/* =========================================================================
   CAFÉ PENITENTE — hoja de estilos única
   Paleta "negro sacro + oro": el oro (#C9A227) y el fondo (#262223) son
   exactamente los de la etiqueta vectorizada, para que web y empaque
   se vean como la misma cosa.
   ========================================================================= */

:root {
  /* --- color --- */
  --negro:      #0F0C0B;   /* fondo base */
  --carbon:     #14100E;   /* secciones alternas */
  --tinta:      #1A1614;   /* tarjetas y bloques */
  --etiqueta:   #262223;   /* el fondo de la etiqueta impresa */
  --oro:        #C9A227;
  --oro-vivo:   #E8C86A;
  --oro-hondo:  #8A6E14;
  --marfil:     #EDE4D3;
  --marfil-60:  rgba(237, 228, 211, .62);
  --marfil-38:  rgba(237, 228, 211, .38);
  --linea:      rgba(201, 162, 39, .22);
  --linea-suave:rgba(237, 228, 211, .10);

  /* --- tipografía --- */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --texto:   "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* --- ritmo --- */
  --wrap: 1180px;
  --sec:  clamp(4.5rem, 9vw, 8.5rem);
  --r:    3px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--texto);
  font-size: clamp(1.05rem, .55vw + .95rem, 1.25rem);
  line-height: 1.72;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--oro); color: #0F0C0B; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oro); color: #0F0C0B; padding: .7rem 1.2rem;
  font-family: var(--display); font-size: .8rem; letter-spacing: .1em;
}
.saltar:focus { left: .8rem; top: .8rem; }

/* --- grano de película sobre todo el sitio ------------------------------ */
.grano {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================  TIPOGRAFÍA BASE  ============================ */

.kicker {
  font-family: var(--display);
  font-size: clamp(.62rem, .3vw + .55rem, .74rem);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1.4rem;
}
.kicker::after {
  content: ""; display: block; width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
  margin-top: .85rem;
}
.cab-sec--centro .kicker::after,
.credo .kicker::after,
.final .kicker::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--oro), transparent); }

.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.15rem, 4.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: .005em;
  margin: 0 0 1.4rem;
  color: var(--marfil);
}

.cab-sec { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.cab-sec--centro { margin-inline: auto; text-align: center; }
.cab-sec__bajada {
  margin: 0;
  font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem);
  color: var(--marfil-60);
  font-style: italic;
}

/* =========================  BOTONES  ==================================== */

.btn {
  --pad: .95em 2.1em;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: var(--pad);
  font-family: var(--display);
  font-size: clamp(.7rem, .28vw + .64rem, .82rem);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .2s;
}
.btn:active { transform: translateY(1px); }

.btn--oro {
  /* el degradado no baja de #B08D1E: por debajo de ahí el texto oscuro
     pierde contraste en botones grandes */
  background: linear-gradient(155deg, #F0D386, var(--oro) 52%, #B08D1E);
  color: #14100A;
  box-shadow: 0 0 0 rgba(201, 162, 39, 0);
}
.btn--oro:hover {
  box-shadow: 0 8px 34px rgba(201, 162, 39, .3);
  background: linear-gradient(155deg, #F8E3A8, var(--oro-vivo) 55%, var(--oro));
}

.btn--linea {
  border-color: var(--linea);
  color: var(--oro);
  background: transparent;
}
.btn--linea:hover { border-color: var(--oro); background: rgba(201, 162, 39, .07); }

.btn--g  { --pad: 1.15em 2.4em; }
.btn--xl { --pad: 1.3em 2.9em; font-size: clamp(.78rem, .3vw + .7rem, .92rem); }
.btn--full { width: 100%; }

/* =========================  HEADER  ===================================== */

.cab {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom: 1px solid transparent;
  padding-block: .55rem;
}
.cab.is-fija {
  background: rgba(15, 12, 11, .88);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--linea);
}
.cab__in { display: flex; align-items: center; gap: 1.5rem; }

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marca__mano { width: 24px; height: auto; filter: drop-shadow(0 0 10px rgba(201,162,39,.35)); }
.marca__txt {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.82rem, .35vw + .74rem, .98rem);
  letter-spacing: .19em; text-transform: uppercase; color: var(--marfil);
}

.nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  position: relative;
  font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--marfil-60); text-decoration: none;
  padding-block: .35rem; transition: color .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--oro); transition: width .35s ease;
}
.nav a:hover, .nav a.is-act { color: var(--oro); }
.nav a:hover::after, .nav a.is-act::after { width: 100%; }

.menu { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.menu span {
  display: block; width: 24px; height: 1.5px; background: var(--oro);
  margin: 5px 0; transition: transform .3s, opacity .3s;
}
.menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(7rem, 12vh, 10rem) 0 clamp(4rem, 8vh, 7rem);
  overflow: hidden;
}
.hero__luz {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 68% 34%, rgba(201, 162, 39, .16), transparent 62%),
    radial-gradient(70% 60% at 20% 78%, rgba(138, 110, 20, .10), transparent 65%),
    radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(0, 0, 0, .75) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

.hero__h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.2rem, 8.2vw, 6.6rem);
  line-height: .94; letter-spacing: .01em;
  margin: 0 0 1.1rem;
  background: linear-gradient(168deg, #F6E4A8 8%, var(--oro) 42%, #9A7C1A 78%, #E3C365 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(201, 162, 39, .16);
}
.hero__lema {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(.82rem, .5vw + .7rem, 1.02rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--marfil); margin: 0 0 1.6rem;
}
.hero__sub {
  max-width: 34rem; margin: 0 0 2.4rem;
  color: var(--marfil-60);
  font-size: clamp(1.08rem, .6vw + .98rem, 1.32rem);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__pack { display: flex; justify-content: center; }

.hero__baja {
  position: absolute; left: 50%; bottom: 2.2rem; translate: -50% 0; z-index: 3;
  width: 22px; height: 38px; border: 1px solid var(--linea); border-radius: 12px;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__baja span {
  width: 3px; height: 7px; border-radius: 2px; background: var(--oro);
  animation: baja 1.9s ease-in-out infinite;
}
@keyframes baja { 0%,100% { transform: translateY(0); opacity: 1 } 55% { transform: translateY(12px); opacity: .15 } }

/* =========================  LA BOLSA  ===================================
   La bolsa está armada en CSS alrededor de la etiqueta real: fuelle
   lateral con degradado, sello superior enrollado y válvula. Así el
   empaque se ve sin depender de una foto.                                */

.bolsa {
  --bw: 300px;
  position: relative;
  /* OJO: el padding NO puede ir en %, porque el % se resuelve contra el ancho
     del contenedor y no contra el de la bolsa. Se calcula sobre --bw. */
  width: var(--bw);
  max-width: 100%;
  padding: calc(var(--bw) * .115) calc(var(--bw) * .065) calc(var(--bw) * .065);
  margin: 0;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(97deg,
      #060505 0%, #1C1817 7%, #2A2422 26%, #322B28 45%,
      #241F1D 68%, #120F0E 88%, #060505 100%);
  box-shadow:
    0 42px 70px -28px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(237, 228, 211, .05),
    inset 0 1px 0 rgba(237, 228, 211, .07);
  isolation: isolate;
}
.bolsa--xl { --bw: 380px; }   /* hero */
.bolsa--l  { --bw: 218px; }   /* 1000 g */
.bolsa--m  { --bw: 176px; }   /*  500 g */
.bolsa--s  { --bw: 140px; }   /*  250 g */

/* sello superior enrollado */
.bolsa__sello {
  position: absolute; top: 2.2%; left: 3.5%; right: 3.5%; height: 5.2%;
  border-radius: 4px;
  background: linear-gradient(180deg, #2E2825, #100D0C 62%, #221D1B);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(237, 228, 211, .09);
}
/* válvula desgasificadora */
.bolsa__valvula {
  position: absolute; top: 9.4%; left: 50%; translate: -50% 0;
  width: 8.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #352E2A, #15110F 70%);
  box-shadow: inset 0 0 0 1px rgba(237, 228, 211, .07), 0 2px 6px rgba(0, 0, 0, .6);
}
.bolsa__valvula::after {
  content: ""; position: absolute; inset: 38%; border-radius: 50%; background: #0A0807;
}
.bolsa__et {
  width: 100%; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .13), 0 10px 26px rgba(0, 0, 0, .55);
}

/* brillo de luz que recorre la bolsa al pasar el mouse */
.bolsa::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(103deg, transparent 34%, rgba(237, 228, 211, .09) 50%, transparent 66%);
}
.hero__pack .bolsa, .ficha__img .bolsa { animation: flota 7s ease-in-out infinite; }
.bolsa:hover::after { opacity: 1; }

@keyframes flota { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-11px) } }

/* =========================  FOTO DE MOCKUP  =============================
   Sustituye a .bolsa allí donde ya existe foto real. Los bordes vienen
   difuminados desde generar-assets.py (WebP con alfa), así que la foto se
   funde sola con el fondo y no necesita máscara en CSS.                  */

.foto {
  --fw: 300px;
  margin: 0;
  width: var(--fw);
  max-width: 100%;
}
.foto img { width: 100%; height: auto; }

.foto--xl { --fw: 520px; }   /* hero */
.foto--l  { --fw: 300px; }   /* 1000 g */
.foto--m  { --fw: 246px; }   /*  500 g */
.foto--s  { --fw: 198px; }   /*  250 g */

.foto--flota { animation: flota 7s ease-in-out infinite; }

/* dentro de una ficha la foto va a sangre: ya trae su propia atmósfera,
   el resplandor dorado del contenedor sobraría */
/* dos clases a propósito: .ficha__img se define más abajo en el archivo y con
   una sola clase ganaba por orden de aparición */
.ficha__img.ficha__img--foto { padding: 0; background: none; }
/* tope: sin él, cuando la rejilla cae a una columna la foto crece hasta el
   ancho de la tarjeta y la ficha se vuelve una torre de 1000 px */
.ficha__img.ficha__img--foto .foto { --fw: min(100%, 330px); margin-inline: auto; }


/* =========================  CINTA  ====================================== */

.cintas { border-block: 1px solid var(--linea); background: var(--carbon); }
.cinta { overflow: hidden; padding: .95rem 0; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.cinta__pista {
  display: flex; align-items: center; gap: 1.6rem; width: max-content;
  animation: corre 44s linear infinite;
}
.cinta__pista span {
  font-family: var(--display); font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--marfil-60);
  white-space: nowrap;
}
.cinta__pista i { color: var(--oro); font-style: normal; font-size: .6rem; }
@keyframes corre { to { transform: translateX(-50%) } }

/* =========================  HISTORIA  =================================== */

.hist {
  position: relative;
  padding-block: var(--sec);
  background: var(--negro);
  overflow: hidden;
}
/* luz de vela que sigue el cursor */
.hist__vela {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 40%),
              rgba(201, 162, 39, .11), rgba(201, 162, 39, .03) 45%, transparent 72%);
  transition: background .18s linear;
}
.hist .wrap { position: relative; z-index: 1; }

.est { list-style: none; margin: 0; padding: 0; max-width: 42rem; margin-inline: auto; }
.est__i {
  position: relative;
  padding: 0 0 clamp(2.8rem, 5vw, 4.4rem) clamp(3.4rem, 7vw, 5.4rem);
  border-left: 1px solid var(--linea);
}
.est__i:last-child { border-left-color: transparent; padding-bottom: 0; }
.est__num {
  position: absolute; left: 0; top: -.15em; translate: -50% 0;
  width: 2.6em; height: 2.6em; display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: 50%;
  background: var(--negro);
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; color: var(--oro);
}
.est__h {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 1.8vw, 1.75rem); line-height: 1.25;
  margin: 0 0 .7rem; color: var(--marfil);
}
.est__i p { margin: 0; color: var(--marfil-60); }
.est__i em { color: var(--oro-vivo); font-style: italic; }
.est__i strong { color: var(--marfil); font-weight: 600; }

.cita { margin: 0; padding: 0; border: 0; }
.cita p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.95rem); line-height: 1.5;
  color: var(--oro-vivo) !important; margin: 0;
}
.cita__pie {
  margin-top: 1rem !important;
  font-size: .95rem; font-style: italic; color: var(--marfil-38) !important;
}

.hist__cierre { text-align: center; margin-top: clamp(3.5rem, 7vw, 6rem); }
.hist__mano {
  width: clamp(54px, 7vw, 78px); height: auto; margin: 0 auto 1.8rem;
  opacity: .9; filter: drop-shadow(0 0 26px rgba(201, 162, 39, .32));
  color: var(--oro);
}
.hist__frase {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem); line-height: 1.5;
  color: var(--marfil); margin: 0;
}
.hist__frase span { color: var(--oro); }

/* =========================  LOS CAFÉS  ================================== */

.cafes { padding-block: var(--sec); background: var(--carbon); border-top: 1px solid var(--linea-suave); }

.rejilla {
  display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.ficha {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(178deg, var(--tinta), #100D0C);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .45s, transform .45s, box-shadow .45s;
}
.ficha:hover {
  border-color: var(--linea);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 60px -30px rgba(201, 162, 39, .35);
}
.ficha--joya { border-color: var(--linea); }

.ficha__cinta {
  position: absolute; top: 1rem; right: -2.6rem; z-index: 3;
  rotate: 38deg; margin: 0;
  background: var(--oro); color: #17120A;
  font-family: var(--display); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .38rem 3rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

.ficha__img {
  display: grid; place-items: center;
  padding: clamp(2rem, 4vw, 3rem) 1rem clamp(1rem, 2vw, 1.6rem);
  background:
    radial-gradient(66% 56% at 50% 42%, rgba(120, 74, 32, .30), transparent 72%),
    radial-gradient(70% 60% at 50% 40%, rgba(201, 162, 39, .09), transparent 70%),
    linear-gradient(180deg, #100D0C, transparent);
}
.ficha__img .bolsa { --bw: 218px; }
/* PROVISIONAL: mientras Geisha no tenga foto, su bolsa CSS se centra dentro de
   una caja con la MISMA proporción y el mismo tope que las fotos, para que los
   títulos de las tres fichas queden a la misma altura sin números mágicos.
   Se puede borrar el día que exista assets/mockup-geisha.webp. */
.ficha__img:not(.ficha__img--foto) { padding: 0; }
.ficha__img:not(.ficha__img--foto)::before {
  content: ""; grid-area: 1 / 1;
  width: min(100%, 330px); aspect-ratio: 760 / 1140;
}
.ficha__img:not(.ficha__img--foto) .bolsa { grid-area: 1 / 1; }

.ficha__cuerpo { padding: 0 clamp(1.4rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; flex: 1; }

.ficha__tag {
  font-family: var(--display); font-size: .62rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 .5rem;
}
.ficha__h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1;
  margin: 0 0 .9rem; color: var(--marfil);
}
.ficha__desc { margin: 0 0 1.4rem; color: var(--marfil-60); font-size: 1.06rem; }

.notas { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--linea-suave); }
.notas li {
  padding: .72rem 0; border-bottom: 1px solid var(--linea-suave);
  font-size: .98rem; color: var(--marfil-60); line-height: 1.45;
}
.notas span {
  display: block;
  font-family: var(--display); font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro-hondo);
  margin-bottom: .18rem;
}

.tallas { display: flex; gap: .5rem; margin: auto 0 1.1rem; }
.talla {
  flex: 1; padding: .62rem .3rem;
  background: transparent; color: var(--marfil-60);
  border: 1px solid var(--linea-suave); border-radius: var(--r);
  font-family: var(--display); font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  cursor: pointer; transition: all .3s;
}
.talla:hover { border-color: var(--linea); color: var(--marfil); }
.talla.is-on { background: rgba(201, 162, 39, .13); border-color: var(--oro); color: var(--oro-vivo); }

/* =========================  PRESENTACIONES  ============================= */

.pres { padding-block: var(--sec); background: var(--negro); }

.pres__fila {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1.2rem, 4vw, 3.4rem);
  flex-wrap: wrap;
  padding-bottom: 1rem;
}
.pres__it { margin: 0; text-align: center; }

.pres__cap {
  margin-top: 1.5rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: .1em;
  color: var(--oro);
}
.pres__cap small {
  display: block; margin-top: .35rem;
  font-family: var(--texto); font-size: .92rem; font-style: italic;
  letter-spacing: 0; text-transform: none; color: var(--marfil-38);
}

.molienda {
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--linea-suave); border-radius: var(--r);
  background: linear-gradient(180deg, var(--tinta), transparent);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  text-align: center;
}
.molienda__t {
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 1.4rem;
}
.molienda__l {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.molienda__l li {
  border: 1px solid var(--linea-suave); border-radius: 100px;
  padding: .48rem 1.1rem; font-size: .95rem; color: var(--marfil-60);
  transition: border-color .3s, color .3s;
}
.molienda__l li:hover { border-color: var(--linea); color: var(--marfil); }
.molienda__n { margin: 0; font-size: .95rem; font-style: italic; color: var(--marfil-38); }

/* =========================  EL RITUAL  ================================== */

.ritual { padding-block: var(--sec); background: var(--carbon); border-block: 1px solid var(--linea-suave); }

.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.paso {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--linea-suave); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(38, 34, 35, .55), transparent);
  transition: border-color .4s, background .4s;
}
.paso:hover { border-color: var(--linea); background: linear-gradient(180deg, rgba(201, 162, 39, .07), transparent); }
.paso__n {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: var(--oro-hondo); margin-bottom: 1rem;
}
.paso h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: .05em; margin: 0 0 .6rem; color: var(--marfil);
}
.paso p { margin: 0; font-size: 1.02rem; color: var(--marfil-60); }

/* =========================  ORIGEN  ===================================== */

.origen { padding-block: var(--sec); background: var(--negro); }
.origen__in {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center;
}
.origen__p { color: var(--marfil-60); margin: 0 0 1.3rem; }
.origen__txt .btn { margin-top: .8rem; }

.datos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--linea-suave); border-left: 1px solid var(--linea-suave);
}
.datos li {
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 1rem;
  border-bottom: 1px solid var(--linea-suave); border-right: 1px solid var(--linea-suave);
  transition: background .4s;
}
.datos li:hover { background: rgba(201, 162, 39, .05); }
.datos strong {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; color: var(--oro);
  margin-bottom: .5rem;
}
.datos span {
  font-size: .88rem; letter-spacing: .04em; color: var(--marfil-38);
  text-transform: uppercase; font-family: var(--display); font-weight: 400;
}

/* =========================  CREDO  ====================================== */

.credo {
  padding-block: clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(201, 162, 39, .08), transparent 65%),
    var(--carbon);
  border-block: 1px solid var(--linea-suave);
  text-align: center;
}
.credo__in { max-width: 44rem; margin-inline: auto; }
.credo__l { list-style: none; margin: 0; padding: 0; }
.credo__l li {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.02rem, 1.7vw, 1.4rem); line-height: 1.6;
  color: var(--marfil-60);
  padding: .85rem 0;
  transition: color .4s;
}
.credo__l li:not(:last-child) { border-bottom: 1px solid var(--linea-suave); }
.credo__l li:hover { color: var(--oro-vivo); }
.credo__l li:last-child { color: var(--marfil); }

/* =========================  CTA FINAL  ================================== */

.final { position: relative; padding-block: clamp(5rem, 10vw, 9rem); background: var(--negro); overflow: hidden; text-align: center; }
.final__luz {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 62% at 50% 42%, rgba(201, 162, 39, .17), transparent 66%);
}
.final__in { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.final__mano {
  width: clamp(62px, 8vw, 92px); height: auto; margin: 0 auto 2rem;
  filter: drop-shadow(0 0 34px rgba(201, 162, 39, .4));
}
.final__h {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.85rem, 4.4vw, 3.2rem); line-height: 1.15;
  margin: 0 0 1.3rem; color: var(--marfil);
}
.final__p { color: var(--marfil-60); margin: 0 0 2.4rem; font-size: clamp(1.08rem, .6vw + 1rem, 1.3rem); }
.final__nota {
  margin: 1.6rem 0 0;
  font-family: var(--display); font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--marfil-38);
}

/* =========================  PIE  ======================================== */

.pie { background: #0A0807; border-top: 1px solid var(--linea-suave); padding-block: clamp(2.6rem, 5vw, 4rem); }
.pie__in { display: grid; gap: 2rem; }
.pie__marca { display: flex; align-items: center; gap: 1rem; }
.pie__marca img { width: 26px; opacity: .85; }
.pie__n {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
}
.pie__d { margin: .25rem 0 0; font-size: .95rem; color: var(--marfil-38); }

.pie__nav { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.pie__nav a {
  font-family: var(--display); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--marfil-60); text-decoration: none; transition: color .3s;
}
.pie__nav a:hover { color: var(--oro); }

.pie__legal {
  margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--linea-suave);
  font-size: .88rem; line-height: 1.6; color: var(--marfil-38);
}

/* =========================  WHATSAPP FLOTANTE  ========================== */

.flota {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 95;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(155deg, #F0D386, var(--oro) 52%, #B08D1E);
  color: #14100A;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 0 rgba(201, 162, 39, .5);
  transition: transform .3s, box-shadow .3s;
  animation: pulso 3.4s ease-out infinite;
}
.flota:hover { transform: scale(1.08); }
@keyframes pulso {
  0%   { box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(201,162,39,.45) }
  70%  { box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 18px rgba(201,162,39,0) }
  100% { box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(201,162,39,0) }
}

/* =========================  REVELADO AL SCROLL  ========================= */

.rev { opacity: 0; transform: translateY(26px); }
.rev.is-vista {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}

/* =========================  RESPONSIVE  ================================= */

@media (max-width: 980px) {
  .hero__in { grid-template-columns: 1fr; text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  .kicker::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--oro), transparent); }
  .hero__pack { order: -1; }
  .bolsa--xl { --bw: 250px; }
  .foto--xl  { --fw: 380px; }
  .origen__in { grid-template-columns: 1fr; }
  .cab-sec { text-align: center; margin-inline: auto; }
}

@media (max-width: 780px) {
  .menu { display: block; }
  .cab__cta { display: none; }
  .nav {
    /* absolute (no fixed): así el 100% del top es la altura del header,
       no la del viewport, y el panel cae justo debajo de la barra */
    position: absolute; inset: 100% 0 auto;
    flex-direction: column; align-items: center; gap: 0;
    background: rgba(10, 8, 7, .98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--linea);
    padding: 1.2rem 0 1.8rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .45s cubic-bezier(.22,.61,.36,1);
  }
  .nav.is-abierto { clip-path: inset(0 0 0 0); }
  .nav a { padding: .95rem 1rem; font-size: .82rem; }
  .nav a::after { display: none; }

  .est__i { padding-left: 3.1rem; }
  .datos { grid-template-columns: repeat(2, 1fr); }
  .pres__fila { gap: 1.4rem 1rem; }
  .bolsa--l { --bw: 150px; }
  .bolsa--m { --bw: 124px; }
  .bolsa--s { --bw: 100px; }
  .foto--l  { --fw: 228px; }
  .foto--m  { --fw: 188px; }
  .foto--s  { --fw: 152px; }
}

@media (max-width: 600px) {
  /* en móvil el paquete no puede empujar el CTA fuera de la primera pantalla */
  .hero { padding-top: clamp(4.8rem, 9.5vh, 6.2rem); }
  .bolsa--xl { --bw: 172px; }
  /* la foto trae aire arriba y abajo de la bolsa, así que a igual ancho es
     más alta que la bolsa CSS: se recorta para que el CTA no salga del fold */
  .foto--xl  { --fw: 215px; }
  .hero__pack { margin-bottom: 0; }
  .kicker { margin-bottom: 1rem; }
  /* en móvil el CTA sube por encima del párrafo largo para no quedar
     fuera de la primera pantalla; el relato queda justo debajo */
  .hero__txt { display: flex; flex-direction: column; }
  .hero__ctas { order: 1; margin-bottom: 2rem; }
  .hero__sub  { order: 2; margin-bottom: 0; font-size: 1.08rem; }
  .hero__lema { margin-bottom: 1.5rem; }
  .hero__ctas .btn { width: 100%; }
  .hero__baja { display: none; }
}

@media (max-width: 460px) {
  .datos { grid-template-columns: 1fr; }
  .pres__fila { flex-direction: column; align-items: center; }
  /* apiladas, pero conservando la proporción entre tamaños:
     es lo único que comunica la diferencia entre 1000, 500 y 250 g */
  .bolsa--l { --bw: 200px; }
  .bolsa--m { --bw: 162px; }
  .bolsa--s { --bw: 130px; }
  .foto--l  { --fw: 304px; }
  .foto--m  { --fw: 246px; }
  .foto--s  { --fw: 198px; }
}

/* =========================  ACCESIBILIDAD  ============================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rev { opacity: 1; transform: none; }
}