/* =========================================================================
   Colmenar de Doñana — poster editorial
   Firma visual: papel rasgado en diagonal + degradado ámbar.
   ========================================================================= */

:root{
  /* Papel */
  --paper:      #F3EAD9;
  --paper-hi:   #FBF5EA;
  --paper-2:    #E9DBC1;
  --paper-3:    #DFCFB2;

  /* Ámbar */
  --gold:       #D9A441;
  --amber:      #C7862F;
  --caramel:    #8B5A2B;
  --cocoa:      #4A2E12;
  --cocoa-deep: #2E1B08;

  /* Tinta */
  --ink:        #2B1E10;
  --ink-soft:   #4A3722;
  --ink-mute:   #7C6A4E;
  --ink-paper:  #F6EEE0;   /* texto sobre ámbar */
  --olive:      #5B6B3F;
  --line:       rgba(43,30,16,.14);

  --nav-h: 4.75rem;
  --wrap: 78rem;
  --pad: clamp(1.25rem, 5vw, 4.5rem);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Parisienne", "Fraunces", cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .22vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
svg{ display:block; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

a{ color:inherit; }
::selection{ background:var(--gold); color:var(--cocoa-deep); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; font-size:.85rem; letter-spacing:.06em;
}
.skip:focus{ left:.75rem; top:.75rem; }

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- Tipografía base ---------- */

h1,h2,h3{
  font-family:var(--serif);
  font-weight:380;
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0;
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
h2{ font-size:clamp(2.1rem,1.1rem + 3.9vw,4.15rem); }
h3{ font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem); letter-spacing:-.015em; }

h1 em,h2 em,h3 em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 20, "WONK" 1;
}

p{ margin:0 0 1.1em; }

.kicker{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 1.1rem;
}

.script{
  font-family:var(--script);
  font-weight:400;
  letter-spacing:0;
  color:var(--caramel);
  line-height:1.15;
}
.script-sm{ font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem); }

.sec-head{ max-width:44rem; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.sec-lead{
  color:var(--ink-soft);
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  max-width:38ch;
  margin-top:1.25rem;
}

/* ---------- Botones ---------- */

.btn{
  --b: var(--ink);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.92rem 1.7rem;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--paper-hi); background:var(--b);
  border:1px solid var(--b); border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease),
             transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover{
  background:var(--amber); border-color:var(--amber);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(139,90,43,.7);
}
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(43,30,16,.35);
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper-hi); border-color:var(--ink); }
.btn-sm{ padding:.68rem 1.25rem; font-size:.7rem; }

/* ---------- Textura de papel y filigranas ---------- */

.grain{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:multiply; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.38'/></svg>");
  background-size:240px 240px;
}

.bot{
  position:absolute; pointer-events:none;
  fill:none; stroke:var(--caramel); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.16;
}

/* ---------- Splash ---------- */

.splash{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:var(--paper);
  animation:splashOut .9s var(--ease-out) 4.5s forwards;  /* red de seguridad CSS */
}
.splash.is-done{ animation:splashOut .8s var(--ease-out) forwards; }
.splash-inner{ text-align:center; }
.splash-kicker{
  display:block; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.9rem;
}
.splash-word{
  display:block; font-family:var(--serif); font-weight:300;
  font-variation-settings:"opsz" 144;
  font-size:clamp(2.4rem,7vw,4.5rem); letter-spacing:-.02em; color:var(--ink);
}
.splash-bar{
  display:block; width:min(46vw,15rem); height:1px;
  background:var(--line); margin:1.6rem auto 0; overflow:hidden;
}
.splash-bar i{
  display:block; height:100%; width:100%;
  background:var(--amber); transform-origin:0 50%;
  animation:splashBar 1.5s var(--ease) forwards;
}
@keyframes splashBar{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; } }

/* ---------- Navegación ---------- */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:var(--nav-h);
  display:flex; align-items:center; gap:1.5rem;
  padding-inline:var(--pad);
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(243,234,217,.9);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--line);
}
.nav-logo{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none;
}

/* Sobre el hero el CTA cae encima del ámbar: pastilla crema. Al pegarse
   la barra al crema, vuelve a ser oscuro. */
.nav-cta{ background:var(--paper-hi); color:var(--ink); border-color:rgba(246,238,224,.55); }
.nav-cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--cocoa-deep); }
.nav.is-stuck .nav-cta{ background:var(--ink); color:var(--paper-hi); border-color:var(--ink); }
.nav.is-stuck .nav-cta:hover{ background:var(--amber); border-color:var(--amber); color:var(--paper-hi); }
.nav-logo-mark svg{
  width:1.6rem; height:1.6rem;
  fill:none; stroke:var(--ink); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav-logo-txt{
  font-family:var(--serif); font-size:1.02rem; font-weight:400;
  letter-spacing:-.01em; line-height:1;
}
.nav-logo-txt em{
  font-style:italic; color:var(--ink-mute); font-size:.9em;
}
/* Los enlaces viven en el lado de papel: sobre el ámbar no se leerían */
.nav-links{ display:flex; gap:1.9rem; margin-left:clamp(1.5rem,4vw,3.5rem); margin-right:auto; }
.nav-links a{
  position:relative; text-decoration:none;
  font-size:.79rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
  padding-block:.35rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--amber);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* =========================================================================
   HERO
   ========================================================================= */

.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
}

.hero-amber{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 78% 34%, rgba(233,183,96,.55) 0%, rgba(233,183,96,0) 62%),
    linear-gradient(158deg, var(--gold) 0%, var(--caramel) 46%, var(--cocoa) 100%);
}

.hero-art{
  position:absolute; z-index:1;
  top:0; right:0; bottom:0;
  width:60%;
  margin:0; overflow:hidden;
}
.hero-art img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 46%;
  will-change:transform;
}

/* Hojas de papel rasgado. El drop-shadow va en el contenedor y el recorte en
   sus capas, para que la sombra siga el borde rasgado y no la caja. */
.hero-sheet{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-sheet::before{ content:""; position:absolute; inset:0; }

.hero-sheet-back{ filter:drop-shadow(14px 0 22px rgba(46,27,8,.34)); }
.hero-sheet-back::before{
  background:var(--paper-3);
  clip-path:url(#tornBack);
}

.hero-sheet-front{ z-index:3; filter:drop-shadow(10px 0 16px rgba(46,27,8,.28)); }
.hero-sheet-front::before{
  background:linear-gradient(96deg, var(--paper-hi) 0%, var(--paper) 58%, var(--paper-2) 100%);
  clip-path:url(#tornFront);
}
.hero-sheet-front > *{ clip-path:url(#tornFront); }

.hero-sheet-front .bot-1{ width:min(20vw,15rem); left:-3%; bottom:6%; }
.hero-sheet-front .bot-2{ width:min(13vw,9rem); left:14%; top:11%; opacity:.13; }

.hero-copy{
  position:relative; z-index:4;
  max-width:min(46rem,52vw);
  padding-left:var(--pad);
  padding-top:calc(var(--nav-h) + clamp(2.5rem,9vh,6rem));
}

.hero-title{ margin:0 0 1.6rem; }
.hero-word{
  display:block;
  font-family:var(--serif);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0;
  font-size:clamp(4.6rem,13.5vw,12rem);
  line-height:.82;
  letter-spacing:-.045em;
  color:var(--ink);
}
.hero-title .script{
  display:block;
  font-size:clamp(1.5rem,3.1vw,2.75rem);
  margin-top:.35em; margin-left:.12em;
}
.hero-lead{
  max-width:32ch; color:var(--ink-soft);
  font-size:clamp(1rem,.95rem + .28vw,1.16rem);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }

/* Columna de pilares sobre el ámbar, como en el poster */
.hero-pillars{
  position:absolute; z-index:4;
  right:clamp(1rem,3.2vw,3rem); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:clamp(1.5rem,3.4vh,2.6rem);
  margin:0; padding:0; list-style:none;
  text-align:center;
}
.hero-pillars li{ display:grid; justify-items:center; gap:.55rem; }
.hero-pillars li + li{ position:relative; }
.hero-pillars li + li::before{
  content:""; position:absolute; left:50%; top:calc(-1 * clamp(.75rem,1.7vh,1.3rem));
  width:1.6rem; height:1px; background:rgba(246,238,224,.42); transform:translateX(-50%);
}
.hero-pillars svg{
  width:clamp(1.7rem,2.4vw,2.15rem); height:clamp(1.7rem,2.4vw,2.15rem);
  fill:none; stroke:var(--ink-paper); stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.92;
}
.hero-pillars span{
  font-size:.62rem; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:rgba(246,238,224,.9); line-height:1.5;
}

.hero-foot{
  position:absolute; z-index:4; left:var(--pad); bottom:clamp(1.2rem,3.5vh,2.4rem);
  display:flex; align-items:center; gap:.7rem;
  margin:0; white-space:nowrap;
  font-size:.63rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute);
}
.hero-foot i{ font-style:normal; color:var(--amber); }

/* =========================================================================
   Secciones
   ========================================================================= */

.sec{ position:relative; padding-block:clamp(5rem,11vw,9.5rem); }
.sec > .grain{ z-index:0; }
.sec .wrap{ position:relative; z-index:1; }

/* ---------- Manifiesto ---------- */

.manifiesto{ background:var(--paper); }
.manifiesto .bot-3{
  width:min(24vw,17rem); right:2%; top:8%; opacity:.11;
  transform:scaleX(-1);
}

.mani-grid{
  display:grid; gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  align-items:start;
}
.mani-side .kicker{ margin-bottom:.6rem; }

.pull{
  margin:0 0 2rem;
  font-family:var(--serif); font-weight:340;
  font-variation-settings:"opsz" 120;
  font-size:clamp(1.5rem,1.05rem + 1.85vw,2.6rem);
  line-height:1.24; letter-spacing:-.018em;
  color:var(--ink);
  text-wrap:pretty;
}
.pull em{ font-style:italic; color:var(--amber); font-variation-settings:"opsz" 120,"SOFT" 20,"WONK" 1; }

.mani-text{ max-width:52ch; color:var(--ink-soft); }

.pilares{
  display:grid; gap:clamp(1.5rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:clamp(3.5rem,8vw,6rem) auto 0;
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
  list-style:none;
}
/* Fila fija para el icono: así los tres títulos comparten línea base */
.pilares li{ display:grid; grid-template-rows:2.5rem auto auto; gap:.85rem; justify-items:start; }
.pilares svg{
  width:2.5rem; height:2.5rem;
  fill:none; stroke:var(--olive); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.pilares strong{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}
.pilares p{ margin:0; color:var(--ink-mute); font-size:.96rem; max-width:32ch; }

/* ---------- Variedades ---------- */

.variedades{ background:var(--paper-2); }

.bento{
  display:grid; list-style:none; margin:0 auto; padding:0;
  max-width:66rem;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(1.2rem,3.2vw,3.25rem);
}
.card{ position:relative; }
.card:nth-child(even){ margin-top:clamp(2rem,7vw,6.5rem); }

.card-foto{
  position:relative; margin:0 0 1.35rem; overflow:hidden;
  background:var(--paper-3);
  border-radius:2px;
  box-shadow:0 18px 40px -26px rgba(46,27,8,.55);
}
.card:nth-child(1) .card-foto,
.card:nth-child(4) .card-foto{ aspect-ratio:5/6; }
.card:nth-child(2) .card-foto,
.card:nth-child(3) .card-foto{ aspect-ratio:4/5; }

.card-foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 44%;
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.card:hover .card-foto img{ transform:scale(1.04); }
.card-foto::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 46%, rgba(217,164,65,.28), rgba(217,164,65,0) 70%);
  opacity:0; transition:opacity .6s var(--ease);
}
.card:hover .card-foto::after{ opacity:1; }

.card-meta{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .55rem;
  font-size:.64rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.card-meta i{ font-style:normal; color:var(--amber); }
.card h3{ margin:0 0 .55rem; }
.card-nota{ margin:0; color:var(--ink-soft); max-width:34ch; font-size:.98rem; }

/* ---------- Proceso ---------- */

.proceso{ background:var(--paper); padding-bottom:clamp(4rem,9vw,7rem); }

.proceso-foto{
  position:relative; margin:clamp(1rem,3vw,2rem) 0 0;
  height:clamp(20rem,46vh,34rem); overflow:hidden;
}
.proceso-foto img{
  position:absolute; inset:-12% 0 auto 0;
  width:100%; height:124%; object-fit:cover; object-position:50% 50%;
  will-change:transform;
}
/* Los bordes rasgados hacen que la foto parezca arrancada de la página */
.proceso-foto::before,
.proceso-foto::after{
  content:""; position:absolute; left:0; right:0; height:4.5rem;
  background:var(--paper); z-index:2;
}
.proceso-foto::before{ top:0; transform:scaleY(-1); clip-path:url(#tornTop); }
.proceso-foto::after{ bottom:0; clip-path:url(#tornTop); }

.pasos{
  display:grid; gap:clamp(1.6rem,3.5vw,2.8rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin:clamp(3rem,7vw,5rem) auto 0;
  /* padding:0 a secas se cargaba el padding-inline de .wrap y los pasos
     se iban al borde de la pantalla */
  padding-block:0; list-style:none;
}
.paso{ display:grid; gap:.7rem; align-content:start; padding-top:1.4rem; border-top:1px solid var(--line); }
.paso-n{
  font-family:var(--serif); font-size:.95rem; font-weight:500;
  letter-spacing:.1em; color:var(--amber);
}
.paso h3{ font-size:clamp(1.15rem,1.05rem + .5vw,1.42rem); }
.paso p{ margin:0; color:var(--ink-mute); font-size:.95rem; }

/* ---------- Certificación (fondo firma, espejado) ---------- */

.certificacion{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(5.5rem,12vw,10rem);
  color:var(--ink-paper);
}
.cert-amber{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 22% 40%, rgba(233,183,96,.5) 0%, rgba(233,183,96,0) 60%),
    linear-gradient(200deg, var(--gold) 0%, var(--caramel) 44%, var(--cocoa) 100%);
}
.cert-sheet{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  transform:scaleX(-1);                 /* el rasgado, del otro lado */
  filter:drop-shadow(10px 0 18px rgba(46,27,8,.3));
}
/* Rasgado 'back': su diagonal deja más papel abajo, que es donde cae el
   párrafo. Con el 'front' la columna de texto se comía el borde ámbar. */
.cert-sheet::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, var(--paper-hi) 0%, var(--paper) 60%, var(--paper-2) 100%);
  clip-path:url(#tornBack);
}
.cert-sheet > *{ clip-path:url(#tornBack); }

.cert-grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
}
.cert-badge-wrap{ grid-column:1; grid-row:1; }
.cert-copy{ grid-column:2; grid-row:1; color:var(--ink); padding-left:clamp(0rem,2vw,1.75rem); }
.cert-copy .kicker{ color:var(--ink-mute); }

.cert-num{
  display:flex; align-items:baseline; gap:.7rem;
  margin:1.4rem 0 1.6rem;
}
.cert-count{
  font-family:var(--serif); font-weight:300;
  font-variation-settings:"opsz" 144;
  /* line-height 1: por debajo, el glifo se sale de su caja y pisa el párrafo */
  font-size:clamp(3.6rem,8vw,6.5rem); line-height:1;
  letter-spacing:-.04em; color:var(--amber);
}
.cert-unit{
  font-size:.72rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute);
}
.cert-text{ max-width:36ch; color:var(--ink-soft); margin:0; }

.cert-badge{
  display:grid; justify-items:center; gap:.9rem; text-align:center;
  max-width:20rem; margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.4rem);
  border-radius:999px; aspect-ratio:1;
  align-content:center;
  /* Disco oliva sólido: sobre el ámbar, un velo translúcido no daba contraste */
  background:radial-gradient(72% 72% at 50% 34%, #6C7F4B 0%, #4C5A34 62%, #3C4A28 100%);
  box-shadow:
    0 0 0 1px rgba(217,164,65,.55),
    0 0 0 7px rgba(246,238,224,.10),
    0 18px 40px rgba(46,27,8,.32);
}
.cert-badge svg{
  width:2.6rem; height:2.6rem;
  fill:none; stroke:var(--gold); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.cert-badge strong{
  font-family:var(--serif); font-weight:400; font-size:1.2rem;
  letter-spacing:-.01em; line-height:1.25; max-width:11rem;
}
.cert-badge span{
  font-size:.62rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(246,238,224,.92); line-height:1.7;
  padding-top:.7rem; border-top:1px solid rgba(217,164,65,.4);
}

/* ---------- Contacto ---------- */

.contacto{ background:var(--paper-hi); }
.contacto .bot-4{ width:min(22vw,15rem); left:-4%; bottom:6%; opacity:.1; }

.cont-grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}

.cont-datos{
  display:grid; gap:1.15rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin:2.5rem 0;
  padding-top:2rem; border-top:1px solid var(--line);
}
.cont-datos dt{
  font-size:.63rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.35rem;
}
.cont-datos dd{ margin:0; font-size:.98rem; color:var(--ink-soft); line-height:1.55; }
.cont-datos a{ text-decoration:none; border-bottom:1px solid var(--line); }
.cont-datos a:hover{ border-color:var(--amber); color:var(--amber); }

.cont-mapa{ margin:0; }
.cont-mapa img{
  width:100%; border:1px solid var(--line); border-radius:2px;
  background:var(--paper);
}
.cont-mapa figcaption{
  margin-top:.7rem; font-size:.78rem; color:var(--ink-mute);
}

.cont-form{
  padding:clamp(1.75rem,3.5vw,2.75rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 24px 50px -34px rgba(46,27,8,.5);
}
.form-row{ display:grid; gap:.45rem; margin:0 0 1.15rem; }
.form-row label{
  font-size:.63rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}
.form-row input,
.form-row select,
.form-row textarea{
  font-family:var(--sans); font-size:.98rem; color:var(--ink);
  background:var(--paper-hi);
  border:1px solid var(--line); border-radius:2px;
  padding:.75rem .9rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.form-row textarea{ resize:vertical; min-height:6.5rem; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{ border-color:var(--amber); background:#fff; }
.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"]{ border-color:#A5442A; }

.form-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:1.6rem 0 0; }
.form-msg{ font-size:.85rem; color:var(--olive); }
.form-msg.is-error{ color:#A5442A; }
.form-nota{ margin:1.1rem 0 0; font-size:.78rem; color:var(--ink-mute); }

/* ---------- Pie ---------- */

.pie{
  background:var(--cocoa-deep); color:rgba(246,238,224,.72);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}
.pie-grid{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem;
  justify-content:space-between;
  padding-bottom:2rem; border-bottom:1px solid rgba(246,238,224,.14);
}
.pie-marca{
  margin:0; font-family:var(--serif); font-size:1.35rem;
  color:var(--ink-paper); letter-spacing:-.01em;
}
.pie-marca em{ font-style:italic; color:rgba(246,238,224,.6); font-size:.85em; }
.pie-links{ display:flex; flex-wrap:wrap; gap:1.2rem 1.6rem; }
.pie-links a{
  text-decoration:none; font-size:.73rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.pie-links a:hover{ color:var(--gold); }
.pie-micro{
  display:flex; align-items:center; gap:.6rem; margin:0;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(246,238,224,.5);
}
.pie-micro i{ font-style:normal; color:var(--gold); }
.pie-legal{
  max-width:var(--wrap); margin:1.6rem auto 0; padding-inline:var(--pad);
  font-size:.72rem; color:rgba(246,238,224,.42);
}

/* =========================================================================
   Analizador de pureza
   ========================================================================= */

.pureza{ position:relative; margin:clamp(2.5rem,6vw,4rem) 0 clamp(3.5rem,8vw,6rem); }
.pureza-paso[hidden]{ display:none; }

.pureza-caja{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(1.5rem,4vw,3.25rem);
  box-shadow:0 24px 60px -40px rgba(43,30,16,.5);
}
.pureza-caja-centro{ text-align:center; display:grid; justify-items:center; gap:1rem; }

/* ---------- Zona de subida ---------- */

.zona{
  display:grid; justify-items:center; gap:.85rem; text-align:center;
  padding:clamp(2rem,5vw,3.5rem) 1.25rem;
  border:1px dashed rgba(43,30,16,.28);
  border-radius:3px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(217,164,65,.10) 0%, rgba(217,164,65,0) 60%),
    var(--paper-hi);
  cursor:pointer;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.zona:hover,
.zona:focus-within,
.zona.is-dentro{
  border-color:var(--amber);
  background-color:#FDF8EF;
}
.zona.is-dentro{ transform:scale(1.006); }

.zona-icono svg{
  width:3rem; height:3rem;
  fill:none; stroke:var(--amber); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.zona strong{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.55rem); letter-spacing:-.01em;
}
.zona-sub{ font-size:.85rem; color:var(--ink-mute); }
.zona-btn{ margin-top:.4rem; pointer-events:none; }

.pureza-privacidad{
  margin:1.1rem 0 0; text-align:center;
  font-size:.78rem; line-height:1.6; color:var(--ink-mute);
}

/* ---------- Estado de carga: un tarro que se llena ---------- */

.tarro-carga{
  position:relative; width:3.4rem; height:4.6rem;
  display:grid; grid-template-rows:.7rem 1fr; justify-items:center; gap:.15rem;
}
.tarro-tapa{
  width:2.4rem; height:.7rem; border-radius:2px 2px 1px 1px;
  background:linear-gradient(180deg, var(--gold), #B98526);
}
.tarro-cuerpo{
  position:relative; width:100%; height:100%; overflow:hidden;
  border:1.5px solid rgba(43,30,16,.32);
  border-radius:.35rem .35rem .6rem .6rem;
  background:rgba(255,255,255,.35);
}
.tarro-miel{
  position:absolute; left:0; right:0; bottom:0; height:16%;
  background:linear-gradient(180deg,#F2BE55,#C7862F);
  animation:llenar 2.6s var(--ease) infinite;
}
@keyframes llenar{
  0%   { height:12%; }
  55%  { height:88%; }
  100% { height:12%; }
}
.carga-msg{
  margin:.4rem 0 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:-.01em;
}
.carga-sub{ margin:0; font-size:.82rem; color:var(--ink-mute); }

/* ---------- Tabla comparativa ---------- */

.tabla{ display:grid; gap:0; margin-top:clamp(1.5rem,3vw,2.25rem); }
.tabla-fila{
  display:grid; align-items:center; gap:clamp(.75rem,2vw,1.5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  padding:clamp(.9rem,2vw,1.15rem) 0;
  border-bottom:1px solid var(--line);
}
.tabla-fila:first-child{ border-top:1px solid var(--line); }
.tabla-cab{
  padding-bottom:.6rem; border-bottom:1px solid var(--ink);
  font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute);
}
.tabla-cab span:nth-child(3){ color:var(--amber); }
.tabla-senal{ font-family:var(--serif); font-size:1.05rem; line-height:1.3; }

.marca{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:500; line-height:1.3;
}
.marca svg{ width:1.05rem; height:1.05rem; flex:none; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.marca-bien{ color:#4C5A34; } .marca-bien svg{ stroke:#4C5A34; }
.marca-mal{ color:#9A3B18; }  .marca-mal svg{ stroke:#9A3B18; }
.marca-duda{ color:var(--ink-mute); } .marca-duda svg{ stroke:var(--ink-mute); }

/* ---------- Puerta del email ---------- */

.pureza-gate{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
}
.gate-velo{ position:relative; }
.gate-velo .tabla{ margin-top:0; filter:blur(5px); opacity:.5; user-select:none; }
.gate-difuminado{
  position:absolute; inset:-.5rem;
  background:linear-gradient(180deg, rgba(243,234,217,0) 40%, var(--paper) 100%);
}
.gate-copy h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.1rem); letter-spacing:-.02em; line-height:1.15;
  margin:.5rem 0 .7rem;
}
.gate-resumen{ margin:0 0 1.4rem; color:var(--ink-soft); }
.gate-form label{
  display:block; margin-bottom:.6rem;
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.gate-fila{ display:flex; gap:.6rem; flex-wrap:wrap; }
.gate-fila input{ flex:1 1 13rem; min-width:0; }
.gate-nota{ margin:.9rem 0 0; font-size:.78rem; color:var(--ink-mute); }

/* ---------- Informe ---------- */

.informe-head h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.4rem); letter-spacing:-.02em; line-height:1.1;
  margin:.5rem 0 .6rem;
}
.informe-sub{ margin:0; color:var(--ink-soft); max-width:52ch; }

.informe-glosario{
  display:grid; gap:clamp(1.1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-top:clamp(1.75rem,4vw,2.5rem);
}
.glosa strong{
  display:block; margin-bottom:.35rem;
  font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}
.glosa p{ margin:0; font-size:.85rem; line-height:1.6; color:var(--ink-mute); }

.informe-cupon{
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.4rem,3vw,2.25rem);
  border:1px solid rgba(217,164,65,.5);
  border-radius:3px;
  background:radial-gradient(100% 120% at 0% 0%, rgba(217,164,65,.16), rgba(217,164,65,.05));
  text-align:center;
}
.cupon-codigo{
  margin:.5rem 0 .4rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.06em;
  color:var(--amber);
}
.cupon-texto{ margin:0 0 1.2rem; font-size:.88rem; color:var(--ink-soft); }

.informe-disclaimer{
  margin-top:clamp(1.5rem,3vw,2rem); padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.76rem; line-height:1.65; color:var(--ink-mute);
}
.informe-otra{ margin:1rem 0 0; }

.enlace{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.85rem; color:var(--amber);
  text-decoration:underline; text-underline-offset:.22em;
  text-decoration-color:rgba(199,134,47,.4);
}
.enlace:hover{ text-decoration-color:var(--amber); }

.error-icono svg{
  width:2.8rem; height:2.8rem;
  fill:none; stroke:var(--ink-mute); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.pureza-paso[data-paso="error"] h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,2.8vw,1.8rem); letter-spacing:-.01em; margin:0;
}
.error-texto{ margin:0; max-width:44ch; color:var(--ink-soft); }

/* =========================================================================
   Reveals — el contenido es visible por defecto; el JS solo lo oculta
   si de verdad va a animarlo (gotcha A.4.5).
   ========================================================================= */

.reveal{ opacity:1; transform:none; }
.js-anim .reveal{ opacity:0; transform:translateY(22px); }
.js-anim .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

/* =========================================================================
   Responsive — el móvil es otra composición, no el desktop encogido
   ========================================================================= */

@media (max-width:1080px){
  .hero-copy{ max-width:min(40rem,56vw); }
  .hero-pillars{ right:clamp(.75rem,2vw,1.5rem); }
}

@media (max-width:900px){
  :root{ --nav-h:4rem; }

  .nav-links{ display:none; }

  /* Hero: papel de lado a lado, texto arriba, foto rasgada debajo */
  .hero{
    display:flex; flex-direction:column;
    min-height:auto; background:var(--paper);
    padding-bottom:clamp(2rem,6vw,3rem);
  }
  .hero-amber, .hero-sheet-back{ display:none; }

  .hero-sheet-front{
    filter:none;
  }
  .hero-sheet-front::before{
    background:linear-gradient(170deg,var(--paper-hi),var(--paper) 60%,var(--paper-2));
    clip-path:none;
  }
  .hero-sheet-front > *{ clip-path:none; }
  .hero-sheet-front .bot-1{ width:11rem; left:auto; right:-3rem; bottom:auto; top:34%; opacity:.12; }
  .hero-sheet-front .bot-2{ width:7rem; left:-1.5rem; top:auto; bottom:14%; opacity:.1; }

  .hero-copy{
    order:1; position:relative; z-index:4;
    max-width:none; padding-inline:var(--pad);
    padding-top:calc(var(--nav-h) + 2.5rem);
  }
  .hero-word{ font-size:clamp(4.5rem,26vw,8rem); }
  .hero-title .script{ font-size:clamp(1.5rem,6.4vw,2.4rem); }
  .hero-lead{ max-width:38ch; }

  .hero-pillars{
    order:3; position:relative; z-index:4;
    right:auto; top:auto; transform:none;
    flex-direction:row; justify-content:space-between; gap:1rem;
    margin:2rem var(--pad) 0;
  }
  .hero-pillars li + li::before{ display:none; }
  .hero-pillars svg{ width:1.9rem; height:1.9rem; stroke:var(--olive); }
  .hero-pillars span{ color:var(--ink-mute); font-size:.58rem; }

  .hero-art{
    order:2; position:relative; z-index:3;
    top:auto; right:auto; bottom:auto;
    width:100%; height:min(62vh,30rem);
    margin-top:2.25rem;
  }
  .hero-art::before{
    content:""; position:absolute; z-index:2; left:0; right:0; top:0;
    height:2.75rem; background:var(--paper);
    transform:scaleY(-1); clip-path:url(#tornTop);
  }
  .hero-art img{ object-position:50% 42%; }

  .hero-foot{
    order:4; position:relative; z-index:4;
    left:auto; bottom:auto; transform:none;
    justify-content:center; margin-top:2rem;
  }

  /* Resto de secciones */
  .mani-grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; }
  .card:nth-child(even){ margin-top:0; }
  .card:nth-child(n) .card-foto{ aspect-ratio:4/5; }

  .cert-sheet{ transform:none; }
  .cert-sheet::before{
    clip-path:none;
    background:linear-gradient(180deg,var(--paper-hi),var(--paper) 70%,var(--paper-2));
  }
  .cert-sheet > *{ clip-path:none; }
  .cert-grid{ grid-template-columns:1fr; }
  .cert-badge-wrap{ grid-column:1; grid-row:2; }
  .cert-copy{ grid-column:1; grid-row:1; }
  .cert-badge{ max-width:15rem; }

  .cont-grid{ grid-template-columns:1fr; }
  .proceso-foto{ height:clamp(16rem,40vh,22rem); }

  /* El analizador, en columna. La tabla pierde la cabecera y cada fila
     se convierte en un bloque con sus dos veredictos debajo. */
  .pureza-gate{ grid-template-columns:1fr; }
  .gate-velo{ display:none; }

  .tabla-cab{ display:none; }
  .tabla-fila{
    grid-template-columns:1fr 1fr;
    gap:.5rem 1rem;
    padding:1rem 0;
  }
  .tabla-senal{ grid-column:1 / -1; margin-bottom:.15rem; }
  /* Sin cabecera de tabla, cada veredicto lleva encima de quién es */
  .marca{ flex-wrap:wrap; align-items:flex-start; gap:.35rem .5rem; }
  .marca::before{
    content:attr(data-quien);
    flex:0 0 100%;
    font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-mute);
  }
  .marca svg{ margin-top:.1rem; }
}

@media (max-width:560px){
  .hero-pillars{ gap:.5rem; }
  .hero-pillars span{ font-size:.53rem; letter-spacing:.14em; }
  .hero-actions .btn{ flex:1 1 100%; justify-content:center; }
  .pie-grid{ flex-direction:column; align-items:flex-start; }
}

/* Solo se desactiva lo verdaderamente intrusivo (parallax fuerte y el splash).
   Los micro-movimientos siguen vivos: Windows trae reduced-motion activado
   de serie en muchas instalaciones y el sitio no puede quedarse muerto. */
@media (prefers-reduced-motion: reduce){
  .splash{ display:none; }
  html{ scroll-behavior:auto; }
}