/* ============================================================
   GENLI PHARMA — Sistema de diseño
   Editorial clínico. Alternancia oscuro / claro.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Azules corporativos */
  --blue:        #005B94;
  --blue-deep:   #0A2740;
  --blue-abyss:  #061B2C;
  --cyan:        #00A8E8;
  --cyan-soft:   #3A9BDC;

  /* Neutros */
  --paper:       #FFFFFF;
  --bone:        #F8F9FA;
  --line:        #DEE2E6;
  --line-soft:   #E9ECEF;
  --ink:         #212529;
  --ink-deep:    #1A1A1A;
  --muted:       #6A7078;

  /* Sobre fondo oscuro */
  --on-dark:        #EDF3F7;
  --on-dark-muted:  rgba(237,243,247,.58);
  --on-dark-faint:  rgba(237,243,247,.14);
  --on-dark-hair:   rgba(237,243,247,.10);

  /* Tipografía */
  --serif: "Newsreader", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Ritmo */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1560px;
  --sec-y: clamp(5.5rem, 12vh, 11rem);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

/* ---------- 3. Primitivas tipográficas ---------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Etiqueta pequeña, monoespaciada en espíritu */
.eyebrow{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.eyebrow--dark{ color:var(--on-dark-muted); }
.eyebrow--light{ color:var(--muted); }
.eyebrow b{ font-weight:600; color:var(--cyan); }

/* Display serif */
.display{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.022em;
  line-height:.98;
  text-wrap:balance;
}
.d-xxl{ font-size:clamp(3rem, 9.2vw, 9.5rem); }
.d-xl { font-size:clamp(2.6rem, 7vw, 6.6rem); }
.d-lg { font-size:clamp(2.1rem, 4.6vw, 4.2rem); line-height:1.02; }
.d-md { font-size:clamp(1.6rem, 2.8vw, 2.6rem); line-height:1.1; letter-spacing:-.015em; }

.lede{
  font-size:clamp(1.0625rem, 1.35vw, 1.375rem);
  line-height:1.5;
  font-weight:300;
  max-width:46ch;
  text-wrap:pretty;
}
.tabular{ font-variant-numeric:tabular-nums; }

/* Regla de sección con número */
.rule{
  display:flex; align-items:baseline; gap:1.25rem;
  padding-bottom:1.15rem;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.rule--dark{ border-bottom-color:var(--on-dark-hair); }
.rule .rule-tail{ margin-left:auto; }

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem;
  border-radius:999px;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  transition:background .3s var(--ease-soft), color .3s var(--ease-soft),
             border-color .3s var(--ease-soft), transform .3s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--solid{ background:var(--blue); color:#fff; }
.btn--solid:hover{ background:var(--cyan); }
.btn--ghost-dark{ border:1px solid var(--on-dark-faint); color:var(--on-dark); }
.btn--ghost-dark:hover{ background:var(--on-dark); color:var(--blue-deep); border-color:var(--on-dark); }
.btn--ghost-light{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost-light:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

/* Enlace subrayado fino */
.ulink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8125rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding-bottom:.3rem;
  border-bottom:1px solid currentColor;
  transition:gap .3s var(--ease), opacity .3s;
}
.ulink:hover{ gap:.85rem; }

/* ---------- 5. Navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.05rem var(--gutter);
  transition:background .45s var(--ease-soft), border-color .45s, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav--over-dark{ color:var(--on-dark); }
.nav--over-light{ color:var(--ink); }
.nav.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-soft);
  color:var(--ink);
}
.nav-brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
/* Isotipo original de la marca: gradiente turquesa, legible sobre
   fondo oscuro y claro, así que no cambia con el tono de la barra. */
.nav-mark{ width:auto; height:34px; flex-shrink:0; }
.nav-word{
  font-family:var(--serif); font-size:1.2rem; font-weight:400;
  letter-spacing:-.01em; line-height:1;
}
.nav-word small{
  display:block; font-family:var(--sans); font-size:.5rem;
  letter-spacing:.24em; text-transform:uppercase; opacity:.62; margin-top:.15rem;
}

.nav-links{ display:flex; gap:2.1rem; margin-left:auto; }
.nav-links a{
  font-size:.75rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  opacity:.7; transition:opacity .25s;
  position:relative; padding-block:.2rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }


.nav-burger{ display:none; width:34px; height:34px; margin-left:auto; position:relative; }
.nav-burger i{
  position:absolute; left:6px; width:22px; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav-burger i:nth-child(1){ top:13px; }
.nav-burger i:nth-child(2){ top:20px; }
.nav-burger.is-open i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-burger.is-open i:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.nav-drawer{
  position:fixed; inset:0; z-index:110;
  background:var(--blue-abyss); color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.nav-drawer.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.nav-drawer a{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,8vw,3.4rem); line-height:1.22;
  letter-spacing:-.02em;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-drawer.is-open a{ opacity:1; transform:none; }
.nav-drawer.is-open a:nth-child(1){ transition-delay:.16s }
.nav-drawer.is-open a:nth-child(2){ transition-delay:.22s }
.nav-drawer.is-open a:nth-child(3){ transition-delay:.28s }
.nav-drawer.is-open a:nth-child(4){ transition-delay:.34s }
.nav-drawer.is-open a:nth-child(5){ transition-delay:.40s }
.nav-drawer.is-open a:nth-child(6){ transition-delay:.46s }

/* ---------- 6. Secciones ---------- */
.sec{ position:relative; width:100%; padding-block:var(--sec-y); }
.sec--dark{ background:var(--blue-deep); color:var(--on-dark); }
.sec--abyss{ background:var(--blue-abyss); color:var(--on-dark); }
.sec--light{ background:var(--bone); color:var(--ink); }
.sec--paper{ background:var(--paper); color:var(--ink); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--blue-abyss); color:var(--on-dark);
  overflow:hidden;
  padding-block:8rem 3rem;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:65% 50%;
  opacity:.85;
  transform:scale(1.06);
  will-change:transform;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--blue-abyss) 2%, rgba(6,27,44,.72) 34%, rgba(6,27,44,.18) 72%),
    linear-gradient(to right, rgba(6,27,44,.9) 0%, rgba(6,27,44,.35) 46%, transparent 78%);
}
.hero-inner{ position:relative; z-index:1; width:100%; }

.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:2rem; flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,10vh,7rem);
}
.hero h1{ max-width:15ch; margin-bottom:2rem; }

.hero-foot{
  display:grid; gap:2.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:end;
  padding-top:2rem;
  border-top:1px solid var(--on-dark-hair);
}
.hero-stats{ display:flex; flex-wrap:wrap; gap:2.4rem; }
.hero-stat b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1;
  letter-spacing:-.02em; color:var(--on-dark);
}
.hero-stat span{
  display:block; margin-top:.5rem;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; left:var(--gutter); bottom:1.6rem; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.scroll-cue i{
  width:34px; height:1px; background:var(--on-dark-faint); position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--cyan);
  animation:cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* ---------- 8. Marquee ---------- */
.marquee{
  overflow:hidden; width:100%;
  padding-block:1.15rem;
  border-block:1px solid var(--on-dark-hair);
  background:var(--blue-abyss); color:var(--on-dark-muted);
}
.marquee-track{
  display:flex; gap:3.5rem; width:max-content;
  animation:slide 46s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:3.5rem; white-space:nowrap;
}
.marquee-track span::after{ content:"—"; opacity:.4; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 9. Portafolio (carrusel) ---------- */
.folio-head{
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.folio-fams{ display:flex; flex-wrap:wrap; gap:.5rem; }
.fam-chip{
  padding:.6rem 1.05rem; border-radius:999px;
  border:1px solid var(--line);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
  transition:all .3s var(--ease-soft);
}
.fam-chip:hover{ border-color:var(--ink); color:var(--ink); }
.fam-chip.is-on{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* El carril sangra hasta el borde derecho de la ventana, pero su primera
   tarjeta queda alineada con la columna de texto. */
.rail{
  /* Sangrado izquierdo que alinea la primera tarjeta con la columna de texto.
     scroll-padding debe igualarlo o el scroll-snap anula el sangrado. */
  --rail-pad:max(var(--gutter), (100% - var(--maxw)) / 2 + var(--gutter));
  display:flex; gap:1.25rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-left:var(--rail-pad);
  scroll-padding-left:var(--rail-pad);
  padding-right:var(--gutter);
  padding-bottom:1.75rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }

.card{
  flex:0 0 clamp(268px, 30vw, 396px);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:3px;
  overflow:hidden;
  transition:border-color .4s var(--ease-soft), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{
  border-color:var(--blue);
  transform:translateY(-5px);
  box-shadow:0 22px 48px -26px rgba(0,91,148,.42);
}
.card[hidden]{ display:none; }

.card-shot{
  position:relative; aspect-ratio:1/1;
  background:linear-gradient(168deg,#fff 0%, var(--bone) 58%, #EAF2F7 100%);
  display:grid; place-items:center; padding:1.6rem;
  overflow:hidden;
}
.card-shot img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .75s var(--ease);
  mix-blend-mode:multiply;
}
.card:hover .card-shot img{ transform:scale(1.055); }
.card-tag{
  position:absolute; top:1rem; left:1rem;
  padding:.35rem .7rem; border-radius:999px;
  background:color-mix(in srgb, var(--blue-deep) 90%, transparent);
  color:var(--on-dark);
  font-size:.5625rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.card-idx{
  position:absolute; top:1rem; right:1.1rem;
  font-size:.625rem; letter-spacing:.14em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.card-body{ padding:1.5rem 1.5rem 1.65rem; display:flex; flex-direction:column; flex:1; }
.card-kicker{
  font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-soft); margin-bottom:.7rem;
}
.card-name{
  font-family:var(--serif); font-weight:300;
  font-size:1.7rem; line-height:1.06; letter-spacing:-.02em;
  margin-bottom:.55rem;
}
.card-sub{ font-size:.875rem; color:var(--muted); line-height:1.55; margin-bottom:1.15rem; }

.spec{ margin-top:auto; border-top:1px solid var(--line-soft); padding-top:1.05rem; }
.spec-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:.42rem;
  font-size:.75rem;
}
.spec-row dt{ color:var(--muted); letter-spacing:.05em; }
.spec-row dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.spec-row--lead dd{ color:var(--blue); }
.spec-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--line-soft);
}
.spec-foot span{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.spec-foot b{
  font-family:var(--serif); font-weight:400; font-size:1.35rem;
  letter-spacing:-.02em; color:var(--blue-deep);
}
.card-go{
  margin-top:1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue);
}
.card-go .arw{ transition:transform .4s var(--ease); }
.card:hover .card-go .arw{ transform:translateX(5px); }

.rail-nav{
  display:flex; align-items:center; gap:1.5rem;
  margin-top:1.5rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.rail-bar{ position:relative; flex:1; height:1px; background:var(--line); }
.rail-bar i{
  position:absolute; left:0; top:-1px; height:3px;
  background:var(--blue); width:22%;
  transition:transform .18s linear;
}
.rail-btns{ display:flex; gap:.5rem; }
.rail-btn{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  transition:all .3s var(--ease-soft);
}
.rail-btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rail-btn:disabled{ opacity:.28; cursor:default; }
.rail-btn:disabled:hover{ background:none; border-color:var(--line); color:inherit; }

/* ---------- 10. Explorador de beneficios ---------- */
.explorer{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.exp-tabs{ display:flex; flex-direction:column; }
.exp-tab{
  display:flex; align-items:baseline; gap:1.1rem;
  width:100%; text-align:left;
  padding:1.4rem 0;
  border-bottom:1px solid var(--on-dark-hair);
  color:var(--on-dark-muted);
  transition:color .35s var(--ease-soft), padding-left .45s var(--ease);
}
.exp-tab:first-child{ border-top:1px solid var(--on-dark-hair); }
.exp-tab em{
  font-style:normal; font-size:.625rem; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; opacity:.6; flex-shrink:0;
}
.exp-tab b{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.1; letter-spacing:-.02em;
}
.exp-tab:hover{ color:var(--on-dark); padding-left:.5rem; }
.exp-tab.is-on{ color:var(--on-dark); }
.exp-tab.is-on em{ color:var(--cyan); opacity:1; }

.exp-panel{ display:none; }
.exp-panel.is-on{ display:block; animation:fadeUp .6s var(--ease) both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.exp-figure{
  position:relative; aspect-ratio:16/10;
  border-radius:3px; overflow:hidden;
  background:var(--blue-abyss);
  margin-bottom:2rem;
}
.exp-figure img{ width:100%; height:100%; object-fit:cover; }
/* Variante para packshots sobre fondo blanco: se muestran como bandeja clara */
.exp-figure--plate{ background:linear-gradient(168deg,#fff,var(--bone) 60%,#E4EEF5); }
.exp-figure--plate img{ object-fit:contain; padding:1.5rem 1.5rem 3rem; }
.exp-figure--plate .exp-cap{
  background:linear-gradient(to top, rgba(255,255,255,.96), transparent);
  color:var(--muted);
}
.exp-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem;
  background:linear-gradient(to top, rgba(6,27,44,.9), transparent);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.exp-panel p{ font-size:1.0625rem; line-height:1.62; font-weight:300; max-width:60ch; color:rgba(237,243,247,.82); }
.exp-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.5rem; margin-top:2.2rem; padding-top:1.8rem;
  border-top:1px solid var(--on-dark-hair);
}
.exp-fact b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:1.9rem; line-height:1; letter-spacing:-.02em; color:var(--cyan);
}
.exp-fact span{
  display:block; margin-top:.55rem;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-muted); line-height:1.4;
}

/* ---------- 11. Seguridad ---------- */
.safety{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.safety-visual{ position:relative; }
.safety-visual img{
  width:100%; border-radius:3px;
  aspect-ratio:16/10; object-fit:cover;
}
.safety-badge{
  position:absolute; right:-1rem; bottom:-1.6rem;
  width:clamp(112px,15vw,164px);
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:3px; padding:1rem;
  box-shadow:0 20px 46px -26px rgba(6,27,44,.4);
}
.safety-badge img{ aspect-ratio:1/1; object-fit:contain; border-radius:0; }

.steps{ counter-reset:s; margin-top:2.5rem; }
.step{
  counter-increment:s;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.5rem;
  padding:1.65rem 0;
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{
  content:"0" counter(s);
  font-size:.6875rem; letter-spacing:.14em; color:var(--cyan-soft);
  font-variant-numeric:tabular-nums; padding-top:.35rem;
}
.step h4{
  font-family:var(--serif); font-weight:400;
  font-size:1.3rem; line-height:1.2; letter-spacing:-.015em;
  margin-bottom:.5rem;
}
.step p{ font-size:.9375rem; color:var(--muted); line-height:1.6; max-width:52ch; }

/* ---------- 12. Protocolo / grid de datos ---------- */
.grid-data{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--on-dark-hair);
  border:1px solid var(--on-dark-hair);
  border-radius:3px; overflow:hidden;
}
.data-cell{ background:var(--blue-deep); padding:2rem 1.75rem; }
.data-cell em{
  font-style:normal; display:block;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1.1rem;
}
.data-cell h4{
  font-family:var(--serif); font-weight:300;
  font-size:1.5rem; line-height:1.15; letter-spacing:-.02em;
  margin-bottom:.85rem;
}
.data-cell p{ font-size:.875rem; line-height:1.62; color:var(--on-dark-muted); }
.data-cell ul{ margin-top:1rem; }
.data-cell li{
  font-size:.8125rem; color:var(--on-dark-muted);
  padding:.42rem 0 .42rem 1.05rem; position:relative; line-height:1.5;
}
.data-cell li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:5px; height:1px; background:var(--cyan);
}

/* ---------- 13. Citas ---------- */
.quotes{ display:grid; gap:1px; background:var(--on-dark-hair); }
.quote{ background:var(--blue-abyss); padding:clamp(2.2rem,4vw,3.4rem) 0; }
.quote blockquote{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.14; letter-spacing:-.022em;
  max-width:24ch;
}
.quote cite{
  display:block; margin-top:1.5rem; font-style:normal;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-muted);
}

/* ---------- 14. Contacto ---------- */
.contact{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
}
.chan{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.chan-item{
  background:var(--bone);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem;
  align-items:center;
  padding:1.6rem .25rem;
  transition:background .35s var(--ease-soft), padding-left .45s var(--ease);
}
.chan-item:hover{ background:var(--paper); padding-left:1rem; }
.chan-item em{
  font-style:normal; display:block;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem;
}
.chan-item b{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  letter-spacing:-.015em; line-height:1.2; word-break:break-word;
}
.chan-item .arw{ color:var(--blue); transition:transform .4s var(--ease); }
.chan-item:hover .arw{ transform:translateX(5px); }

/* Tarjeta de llamada a la tienda, en la sección de contacto */
.cta-card{
  background:var(--blue-deep); color:var(--on-dark);
  border-radius:3px; padding:clamp(1.9rem,3.4vw,2.8rem);
  position:relative; overflow:hidden;
}
.cta-card::after{
  content:""; position:absolute; right:-28%; top:-38%;
  width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(0,168,232,.24), transparent 68%);
  pointer-events:none;
}
.cta-card h3{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,2.9vw,2.5rem); line-height:1.06; letter-spacing:-.022em;
  margin-bottom:1rem; position:relative;
}
.cta-card p{
  font-size:.9375rem; line-height:1.6; color:var(--on-dark-muted);
  margin-bottom:1.9rem; max-width:36ch; position:relative;
}
.cta-card .btn{ position:relative; }
.cta-note{
  margin-top:1.5rem; padding-top:1.4rem;
  border-top:1px solid var(--on-dark-hair);
  font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--on-dark-muted); position:relative;
  margin-bottom:0 !important;
}

/* ---------- 16. Footer ---------- */
.foot{ background:var(--blue-abyss); color:var(--on-dark); padding-block:clamp(4rem,8vw,6.5rem) 2.5rem; }
.foot-top{
  display:grid; gap:2.5rem;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--on-dark-hair);
}
/* Logotipo completo: la marca ya incluye el nombre, así que sólo
   se acompaña del descriptor legal debajo. */
.foot-brand{ margin-bottom:1.5rem; }
.foot-brand img{ width:auto; height:58px; }
.foot-brand small{
  display:block; margin-top:.85rem;
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.foot-top p{ font-size:.9375rem; line-height:1.62; color:var(--on-dark-muted); max-width:38ch; }
.foot-col h5{
  font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1.35rem;
}
.foot-col li{ margin-bottom:.75rem; }
.foot-col a{ font-size:.875rem; color:var(--on-dark-muted); transition:color .28s; }
.foot-col a:hover{ color:var(--on-dark); }

.disclaimer{
  margin-top:2.5rem; padding:1.75rem;
  border:1px solid var(--on-dark-hair); border-radius:3px;
  font-size:.75rem; line-height:1.68; color:var(--on-dark-muted);
}
.disclaimer strong{ color:var(--on-dark); font-weight:600; }

.foot-bot{
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
  margin-top:2.5rem;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.foot-bot a{ transition:color .28s; }
.foot-bot a:hover{ color:var(--on-dark); }

/* ---------- 17. Página de producto ---------- */
.ph{
  background:var(--blue-deep); color:var(--on-dark);
  padding-block:clamp(8rem,14vh,11rem) clamp(3.5rem,7vw,6rem);
}
.ph-grid{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.ph-shot{
  aspect-ratio:1/1; border-radius:3px;
  background:linear-gradient(168deg,#fff,var(--bone) 60%,#E4EEF5);
  display:grid; place-items:center; padding:clamp(1.5rem,4vw,3.5rem);
}
.ph-shot img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.crumbs{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-muted); margin-bottom:2rem;
}
.crumbs a:hover{ color:var(--on-dark); }
.ph h1{ margin-bottom:1.25rem; }
.ph-lede{ font-size:1.0625rem; line-height:1.6; font-weight:300; color:rgba(237,243,247,.8); max-width:48ch; }
.ph-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1.5rem; margin-block:2.4rem;
  padding-block:1.8rem;
  border-block:1px solid var(--on-dark-hair);
}
.ph-meta b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:1.6rem; line-height:1; letter-spacing:-.02em;
}
.ph-meta span{
  display:block; margin-top:.5rem;
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-muted);
}
.ph-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

.pbody{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  align-items:start;
}
.pnav{ position:sticky; top:6.5rem; }
.pnav a{
  display:block; padding:.65rem 0 .65rem 1rem;
  border-left:1px solid var(--line);
  font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  transition:all .3s var(--ease-soft);
}
.pnav a:hover,.pnav a.is-on{ border-left-color:var(--blue); color:var(--ink); padding-left:1.35rem; }

.pblock{ padding-bottom:clamp(2.5rem,4vw,3.5rem); margin-bottom:clamp(2.5rem,4vw,3.5rem); border-bottom:1px solid var(--line); }
.pblock:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.pblock > em{
  font-style:normal; display:block;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-soft); margin-bottom:1rem;
}
.pblock h2{ margin-bottom:1.5rem; }
.pblock p{ font-size:1rem; line-height:1.68; color:var(--ink); max-width:64ch; margin-bottom:1rem; }
.pblock p:last-child{ margin-bottom:0; }
.plist{ display:grid; gap:0; }
.plist li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--line-soft);
  font-size:.9375rem; line-height:1.55;
}
.plist li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); margin-top:.55em;
}
.ptable{ width:100%; border-collapse:collapse; }
.ptable th,.ptable td{
  text-align:left; padding:.95rem 0;
  border-bottom:1px solid var(--line-soft);
  font-size:.9375rem; vertical-align:top;
}
.ptable th{
  width:38%; font-weight:400; color:var(--muted);
  font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; padding-top:1.15rem;
}
.ptable td{ font-weight:500; }
.pwarn{
  background:#FFF8E6; border:1px solid #F0DFB0; border-radius:3px;
  padding:1.5rem; margin-top:1.5rem;
}
.pwarn em{ font-style:normal; display:block; font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:#8A6A12; margin-bottom:.7rem; }
.pwarn p{ font-size:.875rem; line-height:1.62; color:#5C4A10; margin:0; }

.prel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; }

/* ---------- 18. Animación por scroll ----------
   El estado oculto se aplica SOLO si el script arrancó (.js en <html>).
   Sin JavaScript nada se esconde, así que el contenido nunca queda invisible. */
.js [data-anim]{ opacity:0; }
.js [data-anim="up"]{ transform:translateY(30px); }
.js [data-anim="fade"]{ transform:none; }
.js [data-anim].is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .95s var(--ease);
}
.words span{ display:inline-block; }
.js .words span{
  opacity:0; transform:translateY(.5em) rotate(1.2deg);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
.js .words.is-in span{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-anim],.js .words span{ opacity:1 !important; transform:none !important; }
}

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .explorer,.safety,.contact,.ph-grid,.pbody{ grid-template-columns:minmax(0,1fr); }
  .folio-head{ grid-template-columns:minmax(0,1fr); }
  .foot-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .foot-top > div:first-child{ grid-column:1/-1; }
  .pnav{ position:static; display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
  .pnav::-webkit-scrollbar{ display:none; }
  .pnav a{
    border-left:0; border:1px solid var(--line); border-radius:999px;
    padding:.55rem 1rem; white-space:nowrap;
  }
  .pnav a:hover,.pnav a.is-on{ padding-left:1rem; border-color:var(--blue); }
  .ph-grid > div:first-child{ order:2; }
}
@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .hero-foot{ grid-template-columns:minmax(0,1fr); }
  .hero-stats{ gap:1.75rem; }
  .safety-badge{ right:1rem; bottom:-1.2rem; }
  .scroll-cue{ display:none; }
}
@media (max-width:560px){
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .rule{ flex-wrap:wrap; gap:.6rem; }
  .rule .rule-tail{ margin-left:0; width:100%; }
  .card{ flex-basis:80vw; }
  .ph-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
   20. CAPA DE COMERCIO — Shopify
   Tienda, carrito, cuenta y lista de deseos.
   ============================================================ */

/* ---------- 20.1 Herramientas de la barra ---------- */
.nav-tools{ display:flex; align-items:center; gap:.35rem; margin-left:1.5rem; }
.nav-tool{
  position:relative;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  transition:background .3s var(--ease-soft), opacity .25s;
  opacity:.78;
}
.nav-tool svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav-tool:hover,.nav-tool.is-on{ opacity:1; background:color-mix(in srgb, currentColor 12%, transparent); }
.nav-badge{
  position:absolute; top:2px; right:0;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:999px;
  background:var(--cyan); color:#04222E;
  font-size:.5625rem; font-weight:700; line-height:17px; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ---------- 20.2 Cabecera de página interior ---------- */
.subhead{ padding-block:clamp(8rem,14vh,11rem) clamp(3rem,6vw,5rem); }
.subhead .crumbs{ margin-bottom:2rem; }

/* ---------- 20.3 Rejilla de productos ---------- */
.rejilla{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
}
.card--tienda{ display:flex; flex-direction:column; }
.card--tienda.is-agotado .card-shot img{ opacity:.5; }
.card-sinfoto{
  display:grid; place-items:center; width:100%; height:100%;
  color:var(--muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.card-agotado{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.45rem .9rem; border-radius:999px;
  background:var(--ink); color:#fff;
  font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.card-precio{
  display:flex; align-items:baseline; gap:.6rem;
  margin:auto 0 1.15rem;
  padding-top:1.05rem; border-top:1px solid var(--line-soft);
}
.card-precio b{
  font-family:var(--serif); font-weight:400; font-size:1.55rem;
  letter-spacing:-.02em; color:var(--blue-deep);
}
.card-precio s{ font-size:.875rem; color:var(--muted); }
.card-acciones{ display:grid; gap:.9rem; justify-items:start; }
.btn--full{ width:100%; justify-content:center; }

/* Corazón de la lista de deseos */
.btn-deseo{
  position:absolute; right:.85rem; bottom:.85rem; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  transition:background .3s var(--ease-soft), border-color .3s var(--ease-soft), transform .35s var(--ease);
}
.btn-deseo svg{ width:17px; height:17px; fill:none; stroke:var(--muted); stroke-width:1.7; transition:fill .3s, stroke .3s; }
.btn-deseo:hover{ transform:scale(1.08); border-color:var(--blue); }
.btn-deseo:hover svg{ stroke:var(--blue); }
.btn-deseo.is-on{ background:var(--blue); border-color:var(--blue); }
.btn-deseo.is-on svg{ fill:#fff; stroke:#fff; }
.btn-deseo-texto svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.btn-deseo-texto.is-on svg{ fill:currentColor; }

/* Esqueleto de carga */
.card--esqueleto{ border-color:var(--line-soft); pointer-events:none; }
.card--esqueleto .card-shot{ aspect-ratio:1/1; background:var(--line-soft); }
.card--esqueleto .card-body{ height:172px; }
.card--esqueleto .card-shot,.card--esqueleto .card-body{ animation:latir 1.5s var(--ease-soft) infinite; }
@keyframes latir{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* Estados de la tienda */
.tienda-error,.tienda-vacia,.panel-vacio{
  grid-column:1/-1;
  padding:2.5rem; border:1px solid var(--line); border-radius:3px;
  background:var(--paper); color:var(--muted);
  font-size:.9375rem; line-height:1.62;
}
.tienda-error b,.panel-vacio b{ color:var(--ink); }
.tienda-error code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
  background:var(--line-soft); padding:.15rem .4rem; border-radius:3px;
}
.tienda-error p+p{ margin-top:.6rem; }
.panel-vacio a,.tienda-vacia a{ color:var(--blue); border-bottom:1px solid currentColor; }

/* ---------- 20.4 Bloque de compra en las fichas ---------- */
#comprar{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  margin-top:2.4rem; padding-top:1.8rem;
  border-top:1px solid var(--on-dark-hair);
}
.comprar-precio span{
  display:block; font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:.4rem;
}
.comprar-precio b{
  font-family:var(--serif); font-weight:300; font-size:2rem;
  line-height:1; letter-spacing:-.02em;
}
.comprar-acciones{ display:flex; gap:.75rem; flex-wrap:wrap; margin-left:auto; }

/* ---------- 20.5 Carrito lateral ---------- */
.carrito{ position:fixed; inset:0; z-index:140; pointer-events:none; overflow:hidden; }
.carrito.is-open{ pointer-events:auto; }
.carrito-velo{
  position:absolute; inset:0;
  background:rgba(6,27,44,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s var(--ease-soft);
}
.carrito.is-open .carrito-velo{ opacity:1; }
.carrito-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(430px, 100vw);
  display:flex; flex-direction:column;
  background:var(--bone); color:var(--ink);
  box-shadow:-24px 0 60px -30px rgba(6,27,44,.5);
  transform:translateX(100%);
  transition:transform .55s var(--ease);
}
.carrito.is-open .carrito-panel{ transform:none; }
.carrito-cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem; border-bottom:1px solid var(--line);
}
.carrito-cerrar{ font-size:1.75rem; line-height:1; color:var(--muted); transition:color .25s; }
.carrito-cerrar:hover{ color:var(--ink); }
.carrito-cuerpo{ flex:1; overflow-y:auto; padding:.5rem 1.5rem; }
.carrito-vacio{ padding:3rem 0; text-align:center; color:var(--muted); font-size:.9375rem; line-height:1.7; }
.carrito-vacio a{ color:var(--blue); border-bottom:1px solid currentColor; }

.linea{
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:1rem;
  padding:1.25rem 0; border-bottom:1px solid var(--line-soft);
}
.linea-foto{
  aspect-ratio:1/1; border-radius:3px; overflow:hidden;
  background:linear-gradient(168deg,#fff,var(--bone));
  display:grid; place-items:center;
}
.linea-foto img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.linea-datos h4{ font-size:.9375rem; font-weight:600; line-height:1.35; }
.linea-var{ font-size:.75rem; color:var(--muted); margin-top:.15rem; }
.linea-precio{ font-size:.875rem; font-weight:600; margin-top:.35rem; font-variant-numeric:tabular-nums; }
.linea-cant{ display:flex; align-items:center; gap:.5rem; margin-top:.7rem; }
.linea-cant button{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); color:var(--muted);
  display:grid; place-items:center; font-size:.875rem;
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft);
}
.linea-cant button:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.linea-cant button:disabled{ opacity:.4; cursor:default; }
.linea-cant span{ min-width:20px; text-align:center; font-size:.875rem; font-weight:600; }
.linea-borrar{
  width:auto; border:0; border-radius:0;
  margin-left:auto; padding:0;
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line);
}
.linea-cant .linea-borrar:hover{ color:#B4232A; border-color:transparent; border-bottom-color:#B4232A; }

.carrito-pie{ padding:1.5rem; border-top:1px solid var(--line); background:var(--paper); }
.carrito-total{ display:flex; justify-content:space-between; align-items:baseline; }
.carrito-total span{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.carrito-total b{
  font-family:var(--serif); font-weight:400; font-size:1.6rem;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.carrito-nota{ font-size:.75rem; color:var(--muted); margin:.5rem 0 1.15rem; }

/* ---------- 20.6 Acceso y formularios ---------- */
.acceso{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  align-items:start;
}
.acceso-caja{ background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.acceso-tabs{ display:flex; border-bottom:1px solid var(--line); }
.acceso-tab{
  flex:1; padding:1.15rem 1rem;
  font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); border-bottom:2px solid transparent;
  transition:color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.acceso-tab:hover{ color:var(--ink); }
.acceso-tab.is-on{ color:var(--blue); border-bottom-color:var(--blue); }
.acceso-vista{ padding:clamp(1.6rem,3vw,2.4rem); }

.form{ display:grid; gap:1.15rem; }
.form label{
  display:grid; gap:.5rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.form input[type=email],.form input[type=password],.form input[type=text],
.form input[type=tel],.form input:not([type]){
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:3px;
  background:var(--bone); color:var(--ink);
  font:400 .9375rem/1.4 var(--sans); letter-spacing:normal; text-transform:none;
  transition:border-color .25s, background .25s;
}
.form input:focus{ outline:none; border-color:var(--blue); background:var(--paper); }
.form input::placeholder{ color:#A4ABB2; }
.form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-check{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.8125rem; letter-spacing:normal; text-transform:none; color:var(--ink);
}
.form-check input{ margin-top:.15rem; accent-color:var(--blue); width:16px; height:16px; }
.form-intro{ font-size:.9375rem; color:var(--muted); line-height:1.6; }
.form-error{
  padding:.85rem 1rem; border-radius:3px;
  background:#FDECEC; border:1px solid #F3C9C9; color:#8C1C22;
  font-size:.8125rem; line-height:1.5;
}
.recuperar-ok{
  padding:.85rem 1rem; border-radius:3px;
  background:#E9F6EC; border:1px solid #BFE3C8; color:#1D5B2C;
  font-size:.8125rem; line-height:1.5;
}
.form-pie{
  font-size:.8125rem; color:var(--muted); text-align:center;
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
}
.form-pie a{ color:var(--blue); border-bottom:1px solid currentColor; }
.form-legal{ font-size:.75rem; color:var(--muted); line-height:1.6; padding-top:.5rem; border-top:1px solid var(--line-soft); }
.form-acciones{ display:flex; gap:.75rem; flex-wrap:wrap; }
.form--panel{ max-width:34rem; }

.acceso-lado h2{ margin-bottom:1.5rem; }
.acceso-nota{
  margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--muted); line-height:1.6;
}

/* Aviso de tienda sin conectar dentro del bloque de acceso */
.acceso-aviso .tienda-error{
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:#FFF8E6; color:#5C4A10; padding:1.5rem;
}
.acceso-aviso .tienda-error b{ color:#5C4A10; }
.acceso-aviso .tienda-error code{ background:rgba(0,0,0,.06); }

/* ---------- 20.7 Panel con sesión ---------- */
.panel-grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.panel-saludo{ margin-bottom:2.4rem; }
.panel-saludo h2{ margin:.85rem 0 .6rem; }
.panel-mail{ font-size:.875rem; color:var(--muted); }

.pedidos{ display:grid; gap:1.25rem; }
.pedido{ border:1px solid var(--line); border-radius:3px; padding:1.5rem; background:var(--paper); }
.pedido-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.pedido-cab b{ display:block; font-size:.9375rem; }
.pedido-cab span{ font-size:.75rem; color:var(--muted); }
.pedido-total{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.pedido-estados{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.chip{
  padding:.35rem .75rem; border-radius:999px;
  background:var(--line-soft); color:var(--ink);
  font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.pedido-items{ display:grid; gap:.7rem; padding-top:1rem; border-top:1px solid var(--line-soft); }
.pedido-items li{ display:flex; align-items:center; gap:.85rem; font-size:.8125rem; }
.pedido-items img,.pedido-sinfoto{
  width:40px; height:40px; border-radius:3px; object-fit:contain;
  background:var(--bone); flex-shrink:0;
}
.pedido-items li span:nth-of-type(1){ flex:1; }
.pedido-items li span:last-child{ color:var(--muted); }
.pedido .ulink{ margin-top:1.15rem; color:var(--blue); }

/* ---------- 20.10 Tarjeta estática con compra ----------
   La tarjeta es <article> y el enlace del título se estira sobre toda
   ella; los controles se elevan para quedar por encima del enlace. */
.card{ position:relative; }
.card-link{ color:inherit; }
.card-link::after{ content:""; position:absolute; inset:0; z-index:1; }
.card .btn-deseo,
.card .card-compra{ position:relative; z-index:2; }
.card-compra{ margin-top:auto; }
.card-compra .card-precio{ margin:0 0 1rem; }
.card-go--sec{ margin-top:1rem; opacity:.62; font-weight:500; }
.card:hover .card-go--sec{ opacity:1; }

/* ---------- 20.8 Aviso flotante ---------- */
.aviso{
  position:fixed; left:50%; bottom:clamp(1rem,3vw,2rem); z-index:150;
  transform:translate(-50%, 140%);
  max-width:min(30rem, calc(100vw - 2rem));
  padding:.95rem 1.4rem; border-radius:999px;
  background:var(--blue-deep); color:var(--on-dark);
  font-size:.875rem; line-height:1.4; text-align:center;
  box-shadow:0 18px 44px -20px rgba(6,27,44,.6);
  opacity:0; transition:transform .5s var(--ease), opacity .35s;
}
.aviso.is-in{ transform:translate(-50%,0); opacity:1; }
.aviso[data-tipo="error"]{ background:#8C1C22; }

/* ---------- 20.9 Responsive ---------- */
@media (max-width:1080px){
  .acceso,.panel-grid{ grid-template-columns:minmax(0,1fr); }
  #comprar .comprar-acciones{ margin-left:0; width:100%; }
}
@media (max-width:820px){
  /* Con el menú hamburguesa la barra se queda sin espacio: se aprieta
     el ritmo y se retira el icono de cuenta, que ya vive en el cajón. */
  .nav{ gap:.6rem; }
  .nav-tools{ margin-left:auto; margin-right:0; gap:.1rem; }
  .nav-tool{ width:36px; height:36px; }
  .nav-tool--cuenta{ display:none; }
  .nav-burger{ margin-left:.25rem; flex-shrink:0; }
}
@media (max-width:360px){
  .nav-word{ display:none; }   /* sólo el isotipo en pantallas muy angostas */
}
@media (max-width:560px){
  .form-fila{ grid-template-columns:minmax(0,1fr); }
  .rejilla{ grid-template-columns:minmax(0,1fr); }
  .carrito-panel{ width:100vw; }
  .pedido-cab{ flex-direction:column; gap:.5rem; }
}

/* ============================================================
   21. PÁGINAS LEGALES
   ============================================================ */
.foot-legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.foot-legal a{ transition:color .28s; }
.foot-legal a:hover{ color:var(--on-dark); }

.foot-autor a{
  color:var(--on-dark); border-bottom:1px solid var(--on-dark-faint);
  transition:border-color .28s;
}
.foot-autor a:hover{ border-bottom-color:var(--on-dark); }

/* Aviso al equipo: no debe pasar desapercibido antes de publicar */
.legal-nota{
  background:#FFF8E6; border:1px solid #F0DFB0; border-left:3px solid #C9A227;
  border-radius:3px; padding:1.5rem; margin-bottom:2.5rem;
}
.legal-nota em{
  font-style:normal; display:block;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8A6A12; margin-bottom:.7rem;
}
.legal-nota p{ font-size:.875rem; line-height:1.62; color:#5C4A10; margin:0; }
.legal-nota strong{ color:#3D3108; }

/* Hueco pendiente de rellenar */
.legal-falta{
  background:#FBE9A8; color:#5C4A10;
  padding:.1em .45em; border-radius:2px;
  font-weight:600; font-size:.9em; white-space:normal;
}

.legal-link{ color:var(--blue); border-bottom:1px solid currentColor; }
.legal-link:hover{ color:var(--cyan); }

.pblock code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
  background:var(--line-soft); padding:.15rem .4rem; border-radius:3px;
}
.plist b{ font-weight:600; }

@media (max-width:560px){
  .foot-legal{ gap:.4rem 1.25rem; }
}