/* ARCHIVO GENERADO por construir-sitio.ps1 a partir de _fuente/css. Edita esos archivos, no este. */

/* =================================================================
   MEZCAL YOÓ TU — Sistema de diseño
   Concepto: "Bajo el sol y la luna" — la dualidad del emblema.
   Día = crema, ámbar, naranja · Noche = café profundo, azul noche.
   ================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Cremas */
  --crema-claro: #faf4e9;
  --crema:       #f4ead8;
  --crema-medio: #ece0c9;
  --crema-oscuro:#e0d0b4;

  /* Cafés */
  --tinta:         #231a14;
  --cafe-profundo: #2b211a;
  --cafe:          #3d3027;
  --cafe-medio:    #5b4736;
  --cafe-suave:    #7d6550;

  /* Acentos del emblema */
  --ambar:        #f3b64b;
  --naranja-claro:#f0a444;
  --naranja:      #e0762a;
  --terracota:    #bf4a2b;
  --verde:        #6d9e3f;
  --verde-oscuro: #4a6f2a;
  --azul:         #2a72a8;
  --azul-oscuro:  #1c4b73;
  --azul-claro:   #9cc8ea;
  --noche:        #122435;

  /* Degradados */
  --grad-sol:   linear-gradient(135deg, #f3b64b 0%, #f0a444 35%, #e0762a 70%, #bf4a2b 100%);
  --grad-luna:  linear-gradient(135deg, #2a72a8 0%, #1c4b73 55%, #122435 100%);
  --grad-agave: linear-gradient(135deg, #8fbf55 0%, #6d9e3f 45%, #4a6f2a 100%);
  --grad-texto: linear-gradient(100deg, #f3b64b 0%, #e0762a 50%, #bf4a2b 100%);

  /* Tipografía */
  --f-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-serif:   'Fraunces', Georgia, 'Times New Roman', serif; /* sólo testimonios */
  --f-texto:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'DM Mono', ui-monospace, 'Cascadia Mono', monospace;

  --t-mega: clamp(3.3rem, 11.5vw, 12.5rem);
  --t-xxl:  clamp(2.8rem, 7.2vw, 7.4rem);
  --t-xl:   clamp(2.2rem, 5vw, 4.6rem);
  --t-l:    clamp(1.7rem, 3.2vw, 2.8rem);
  --t-m:    clamp(1.3rem, 2vw, 1.7rem);

  /* Medidas */
  --ancho:  1340px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --r-sm:   12px;
  --r-md:   22px;
  --r-lg:   34px;
  --r-arco: 999px 999px 26px 26px;
  --alto-header: 84px;

  --ease:   cubic-bezier(.16, 1, .3, 1);
  --ease-2: cubic-bezier(.65, 0, .35, 1);
  --sombra:      0 30px 60px -24px rgba(35, 26, 20, .38);
  --sombra-alta: 0 50px 90px -30px rgba(35, 26, 20, .5);
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--crema-claro);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.bloqueado { overflow: hidden; }

/* Grano de película: da calidez y textura táctil a todo el sitio */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--ambar); color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 4px;
  border-radius: 6px;
}

.salto {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10000;
  background: var(--tinta);
  color: var(--crema);
  padding: .8rem 1.2rem;
  border-radius: var(--r-sm);
}
.salto:focus { top: 1rem; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. TIPOGRAFÍA ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h3 { font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
h4 { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }

/* Las palabras resaltadas mantienen el peso: sólo cambian a cursiva y color */
h1 em, h2 em, h3 em, .display em, .italica {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.025em;
}

.t-mega { font-size: var(--t-mega); }
.t-xxl  { font-size: var(--t-xxl); }
.t-xl   { font-size: var(--t-xl); }
.t-l    { font-size: var(--t-l); }
.t-m    { font-size: var(--t-m); }

.texto-sol {
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.acento-sol  { color: var(--naranja); }
.acento-ambar { color: var(--ambar); }
.acento-luna { color: var(--azul-claro); }
.acento-terracota { color: var(--terracota); }

.contorno { opacity: .18; }

.entrada {
  font-family: var(--f-display);
  font-weight: 420;
  font-size: var(--t-m);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.etiqueta::before {
  content: '';
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--grad-sol);
  box-shadow: 0 0 0 5px rgba(243, 182, 75, .2);
  flex-shrink: 0;
}
.etiqueta--luna::before { background: var(--grad-luna); box-shadow: 0 0 0 5px rgba(156, 200, 234, .2); }

.mono {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- 4. MAQUETACIÓN ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: 860px; }

.seccion {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  isolation: isolate;
}
.seccion--corta { padding-block: clamp(2.5rem, 5vw, 4rem); }

.encabezado {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.encabezado h2 { margin: 0; }
.encabezado p:not(.etiqueta) { color: var(--cafe-medio); max-width: 46ch; }
.encabezado--centro {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.encabezado--centro p { margin-inline: auto; }

/* ---------- 5. FONDOS ---------- */
.fondo-blanco { background: #fff; }
.fondo-crema {
  background:
    radial-gradient(60% 55% at 100% 0%, rgba(243, 182, 75, .2), transparent 70%),
    radial-gradient(55% 55% at 0% 100%, rgba(109, 158, 63, .1), transparent 70%),
    var(--crema-claro);
}
.fondo-crema-2 {
  background:
    radial-gradient(55% 60% at 0% 10%, rgba(224, 118, 42, .14), transparent 70%),
    radial-gradient(50% 50% at 100% 90%, rgba(42, 114, 168, .1), transparent 70%),
    var(--crema);
}
.fondo-noche {
  color: var(--crema);
  background:
    radial-gradient(55% 60% at 88% 8%, rgba(42, 114, 168, .5), transparent 70%),
    radial-gradient(50% 60% at 6% 95%, rgba(191, 74, 43, .3), transparent 70%),
    linear-gradient(170deg, #2e231b 0%, #1d1611 100%);
}
.fondo-luna {
  color: var(--crema);
  background:
    radial-gradient(50% 55% at 80% 20%, rgba(156, 200, 234, .28), transparent 70%),
    radial-gradient(60% 60% at 10% 90%, rgba(42, 114, 168, .5), transparent 70%),
    linear-gradient(160deg, #1c4b73 0%, #122435 60%, #0c1a27 100%);
}
.fondo-sol {
  color: var(--tinta);
  background:
    radial-gradient(60% 75% at 12% 15%, #f7c96a 0%, transparent 60%),
    radial-gradient(55% 70% at 92% 85%, #e0762a 0%, transparent 65%),
    linear-gradient(135deg, #f3b64b 0%, #f0a444 100%);
}
.fondo-noche .encabezado p:not(.etiqueta),
.fondo-luna .encabezado p:not(.etiqueta),
.fondo-tema .encabezado p:not(.etiqueta) { color: rgba(250, 244, 233, .76); }

/* ---------- 6. BOTONES ---------- */
.btn {
  --btn-fondo: var(--tinta);
  --btn-texto: var(--crema-claro);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: .55rem .6rem .55rem 1.6rem;
  min-height: 3.5rem;
  border-radius: 100px;
  background: var(--btn-fondo);
  color: var(--btn-texto);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad-sol);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(224, 118, 42, .6); color: var(--tinta); }
.btn:hover::before { transform: none; }

.btn__icono {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(250, 244, 233, .14);
  flex-shrink: 0;
  transition: transform .55s var(--ease), background .4s;
}
.btn__icono svg { width: 1.05rem; height: 1.05rem; }
.btn:hover .btn__icono { transform: rotate(-45deg); background: rgba(35, 26, 20, .12); }
.btn--wa:hover .btn__icono { transform: scale(1.1); }

.btn--sol { --btn-fondo: var(--ambar); --btn-texto: var(--tinta); }
.btn--sol .btn__icono { background: rgba(35, 26, 20, .1); }
.btn--sol::before { background: var(--crema-claro); }
.btn--sol:hover { box-shadow: 0 18px 36px -14px rgba(243, 182, 75, .7); }

.btn--crema { --btn-fondo: var(--crema-claro); --btn-texto: var(--tinta); }
.btn--crema .btn__icono { background: rgba(35, 26, 20, .08); }

.btn--fantasma {
  --btn-fondo: transparent;
  --btn-texto: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--fantasma .btn__icono { background: rgba(127, 127, 127, .14); }

.btn--sin-icono { padding: .55rem 1.8rem; }

.acciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Enlace con flecha */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  font-size: .95rem;
  padding-bottom: .3rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  transition: background-size .5s var(--ease), gap .4s var(--ease);
}
.enlace:hover { gap: 1.1rem; background-size: 35% 1.5px; }
.enlace svg { width: 1rem; height: 1rem; }

/* ---------- 7. PIEZAS REUTILIZABLES ---------- */
.arco { border-radius: var(--r-arco); overflow: hidden; }
.arco img { width: 100%; height: 100%; object-fit: cover; }

.circulo { border-radius: 50%; overflow: hidden; }
.circulo img { width: 100%; height: 100%; object-fit: cover; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: .38rem .85rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  background: rgba(35, 26, 20, .07);
  border: 1px solid rgba(35, 26, 20, .1);
}
.fondo-noche .chip, .fondo-luna .chip, .fondo-tema .chip {
  background: rgba(250, 244, 233, .1);
  border-color: rgba(250, 244, 233, .18);
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Sello giratorio con texto en círculo */
.sello {
  position: relative;
  width: var(--tam, 150px);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.sello svg {
  width: 100%;
  height: 100%;
  animation: girar 24s linear infinite;
}
.sello text {
  font-family: var(--f-mono);
  font-size: 10.4px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  fill: currentColor;
}
.sello img {
  position: absolute;
  inset: 24%;
  width: 52%;
  height: 52%;
  object-fit: contain;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- 8. MARQUESINA ---------- */
.marquesina {
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.marquesina__pista {
  display: flex;
  width: max-content;
  animation: desfilar var(--vel, 38s) linear infinite;
}
.marquesina--inversa .marquesina__pista { animation-direction: reverse; }
.marquesina__grupo {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding-right: clamp(1.4rem, 3vw, 2.6rem);
}
.marquesina__grupo span { font-family: var(--f-display); }
.marquesina__grupo svg { width: clamp(1.4rem, 2.6vw, 2.4rem); height: auto; flex-shrink: 0; }
@keyframes desfilar { to { transform: translateX(-50%); } }

/* ---------- 9. ANIMACIONES DE ENTRADA ---------- */
.js [data-r] {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-r="fade"]   { transform: none; }
.js [data-r="escala"] { transform: scale(.92); }
.js [data-r="izq"]    { transform: translate3d(-50px, 0, 0); }
.js [data-r="der"]    { transform: translate3d(50px, 0, 0); }
/* El recorte va en el hijo: si se recorta el elemento observado,
   el navegador lo considera invisible y la animación nunca arranca. */
.js [data-r="clip"] { opacity: 1; transform: none; }
.js [data-r="clip"] > * {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transition: clip-path .8s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-r].visto { opacity: 1; transform: none; }
.js [data-r="clip"].visto > * { clip-path: inset(0 0 0 0); transform: none; }

/* Titulares que entran palabra por palabra */
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.palabra > span {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + var(--d, 0s));
}
.visto .palabra > span, .palabra.visto > span { transform: none; }

/* Parallax: el JS actualiza --py */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-r] { opacity: 1; transform: none; clip-path: none; }
  .js [data-r="clip"] > * { clip-path: none; transform: none; }
  .palabra > span { transform: none; }
  [data-parallax] { transform: none !important; }
}

@media (max-width: 900px) {
  :root { --alto-header: 72px; }
  .encabezado { grid-template-columns: 1fr; align-items: start; }
}

/* =================================================================
   CABECERA · MENÚ MÓVIL · PIE · BOTÓN FLOTANTE
   ================================================================= */

/* ---------- CABECERA: barra que se vuelve "isla" flotante ---------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  padding: .9rem var(--gutter) 0;
  pointer-events: none;
  transition: transform .6s var(--ease);
}
.cabecera.oculta { transform: translateY(-130%); }

.cabecera__isla {
  pointer-events: auto;
  max-width: var(--ancho);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 64px;
  padding: 0 .55rem 0 1.1rem;
  border-radius: 100px;
  color: var(--crema-claro);
  background: transparent;
  transition: background .5s var(--ease), color .4s, box-shadow .5s var(--ease), max-width .7s var(--ease);
}
.cabecera.solida .cabecera__isla {
  max-width: 1140px;
  color: var(--tinta);
  background: rgba(250, 244, 233, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 40px -12px rgba(35, 26, 20, .28), inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* Páginas con encabezado claro: el texto de la cabecera empieza oscuro */
.cabecera-oscura .cabecera__isla { color: var(--tinta); }
.cabecera-oscura.menu-abierto .cabecera__isla,
.menu-abierto .cabecera-oscura .cabecera__isla { color: var(--crema-claro); }

.marca { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.marca img { width: 44px; height: 44px; object-fit: contain; transition: transform .8s var(--ease); }
.marca:hover img { transform: rotate(-25deg) scale(1.06); }
.marca__nombre {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
  font-size: 1.45rem;
  letter-spacing: -.03em;
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: .2rem; }
.nav a {
  position: relative;
  padding: .6rem .95rem;
  font-size: .92rem;
  font-weight: 600;
  border-radius: 100px;
  transition: background .3s;
}
.nav a:hover { background: rgba(127, 127, 127, .14); }
.nav a.activo::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .22rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--naranja);
}

.cabecera__cta { min-height: 2.9rem; padding: .35rem .4rem .35rem 1.2rem; font-size: .86rem; }
.cabecera__cta .btn__icono { width: 2.1rem; height: 2.1rem; }

.boton-menu {
  display: none;
  align-items: center;
  gap: .6rem;
  height: 48px;
  padding: 0 1.1rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .9rem;
  background: rgba(127, 127, 127, .16);
}
.boton-menu__lineas { position: relative; width: 18px; height: 10px; }
.boton-menu__lineas::before, .boton-menu__lineas::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.boton-menu__lineas::before { top: 0; }
.boton-menu__lineas::after  { top: 8px; }
.menu-abierto .boton-menu__lineas::before { top: 4px; transform: rotate(45deg); }
.menu-abierto .boton-menu__lineas::after  { top: 4px; transform: rotate(-45deg); }

/* ---------- MENÚ MÓVIL A PANTALLA COMPLETA ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 790;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--alto-header) + 2.5rem) var(--gutter) 2rem;
  color: var(--crema-claro);
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(243, 182, 75, .45), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(42, 114, 168, .55), transparent 70%),
    linear-gradient(165deg, #3d3027 0%, #1d1611 100%);
  clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
  visibility: hidden;
  transition: clip-path .9s var(--ease), visibility 0s .9s;
}
.menu-abierto .menu {
  clip-path: circle(150% at calc(100% - 3rem) 2.5rem);
  visibility: visible;
  transition: clip-path .9s var(--ease), visibility 0s;
}
.menu-abierto .cabecera__isla { color: var(--crema-claro); background: transparent; box-shadow: none; }

.menu__lista { list-style: none; display: grid; gap: .2rem; }
.menu__lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease), transform .8s var(--ease), color .3s;
}
.menu__lista a span { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; opacity: .55; font-weight: 400; }
.menu__lista a.activo, .menu__lista a:hover { color: var(--ambar); }
.menu-abierto .menu__lista a { opacity: 1; transform: none; }
.menu-abierto .menu__lista li:nth-child(1) a { transition-delay: .18s; }
.menu-abierto .menu__lista li:nth-child(2) a { transition-delay: .24s; }
.menu-abierto .menu__lista li:nth-child(3) a { transition-delay: .30s; }
.menu-abierto .menu__lista li:nth-child(4) a { transition-delay: .36s; }
.menu-abierto .menu__lista li:nth-child(5) a { transition-delay: .42s; }

.menu__pie { display: grid; gap: 1.2rem; }
.menu__pie .btn { width: 100%; justify-content: space-between; }
.menu__redes { display: flex; gap: 1.4rem; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }

/* ---------- PIE ---------- */
.pie {
  position: relative;
  overflow: hidden;
  color: var(--crema);
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
  background:
    radial-gradient(80% 70% at 50% 118%, rgba(243, 182, 75, .55) 0%, rgba(224, 118, 42, .25) 35%, transparent 70%),
    radial-gradient(40% 40% at 95% 5%, rgba(42, 114, 168, .3), transparent 70%),
    linear-gradient(180deg, #231a14 0%, #2b211a 100%);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.pie__marca img { width: 88px; margin-bottom: 1.4rem; }
.pie__marca p { max-width: 32ch; color: rgba(244, 234, 216, .72); font-size: .97rem; }
.pie h4 {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 1.3rem;
}
.pie ul { list-style: none; display: grid; gap: .7rem; }
.pie li a, .pie li span { color: rgba(244, 234, 216, .82); transition: color .3s, padding .4s var(--ease); }
.pie li a:hover { color: var(--ambar); padding-left: .35rem; }

.pie__redes { display: flex; gap: .6rem; margin-top: 1.6rem; }
.pie__redes a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 234, 216, .08);
  border: 1px solid rgba(244, 234, 216, .14);
  transition: background .4s, transform .5s var(--ease), color .3s;
}
.pie__redes a:hover { background: var(--ambar); color: var(--tinta); transform: translateY(-4px) rotate(-8deg); }
.pie__redes svg { width: 19px; height: 19px; fill: currentColor; }

.pie__marca-gigante {
  margin: clamp(3rem, 7vw, 6rem) 0 -.16em;
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(5rem, 25vw, 23rem);
  line-height: .8;
  letter-spacing: -.06em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(243, 182, 75, .95) 0%, rgba(224, 118, 42, .55) 55%, rgba(224, 118, 42, 0) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.pie__marca-gigante em { font-weight: 800; font-style: italic; }

.pie__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.6rem 0 1.8rem;
  border-top: 1px solid rgba(244, 234, 216, .16);
  font-size: .85rem;
  color: rgba(244, 234, 216, .7);
}
.pie__legal p { margin: 0; }
.pie__aviso { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.pie__credito a { color: var(--ambar); font-weight: 700; }
.pie__credito a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.8rem);
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  z-index: 780;
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 58px;
  padding: 0 1.2rem 0 .45rem;
  border-radius: 100px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 16px 34px -10px rgba(37, 211, 102, .6);
  transform: translateY(calc(100% + 3rem));
  transition: transform .7s var(--ease), box-shadow .4s;
}
.wa-flotante.visible { transform: none; }
.wa-flotante:hover { box-shadow: 0 20px 44px -10px rgba(37, 211, 102, .8); }
.wa-flotante__icono {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .18);
}
.wa-flotante svg { width: 26px; height: 26px; fill: #fff; }

/* ---------- ADAPTACIÓN ---------- */
@media (max-width: 1080px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav, .cabecera__cta { display: none; }
  .boton-menu { display: inline-flex; }
}
@media (max-width: 600px) {
  .cabecera { padding-top: .6rem; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__legal { flex-direction: column; align-items: flex-start; }
  .wa-flotante { padding-right: .45rem; }
  .wa-flotante__texto { display: none; }
}

/* =================================================================
   PÁGINA DE INICIO
   ================================================================= */

/* ---------- PORTADA ---------- */
.portada {
  position: relative;
  min-height: max(100svh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--crema-claro);
  overflow: hidden;
  isolation: isolate;
}
.portada__fondo {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: -2;
}
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
/* Capa oscura entre la foto y el texto: velo uniforme + refuerzo abajo y a la izquierda */
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 13, 10, .45) 0%, rgba(18, 13, 10, 0) 30%, rgba(18, 13, 10, .35) 62%, rgba(18, 13, 10, .88) 100%),
    linear-gradient(90deg, rgba(18, 13, 10, .55) 0%, rgba(18, 13, 10, 0) 70%),
    rgba(18, 13, 10, .42);
}
.portada__contenido {
  position: relative;
  padding-top: calc(var(--alto-header) + 4rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.portada__titulo {
  font-size: clamp(2.9rem, 7.4vw, 7.6rem);
  max-width: 12ch;
  margin-bottom: .55em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
/* también se usa en la cabecera de Contacto */
.portada__bajada {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.portada__bajada p {
  max-width: 44ch;
  font-size: 1.1rem;
  color: rgba(250, 244, 233, .86);
  margin: 0;
}
.portada__sello {
  position: absolute;
  top: calc(var(--alto-header) + 3rem);
  right: var(--gutter);
  --tam: clamp(110px, 12vw, 170px);
  color: var(--crema-claro);
}

/* ---------- CINTA DE PRODUCTOS ---------- */
.cinta {
  position: relative;
  z-index: 2;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  color: var(--crema);
  background: var(--tinta);
  border-block: 1px solid rgba(243, 182, 75, .25);
}
.cinta .marquesina__grupo { gap: clamp(1.8rem, 3.4vw, 3rem); padding-right: clamp(1.8rem, 3.4vw, 3rem); }
.cinta span {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(.9rem, 1.3vw, 1.1rem);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.marquesina__emblema { width: clamp(22px, 2vw, 30px); height: auto; flex-shrink: 0; }

/* ---------- MANIFIESTO ---------- */
.manifiesto__rejilla {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.manifiesto__texto {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin-bottom: 1.6rem;
}
.manifiesto__bajada { color: var(--cafe-medio); max-width: 48ch; }
.manifiesto__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.manifiesto__foto img { width: 100%; height: 100%; object-fit: cover; }
.manifiesto__texto em { font-style: italic; color: var(--terracota); }
.pastilla {
  display: inline-block;
  width: 2.1em;
  height: .92em;
  margin: 0 .06em;
  vertical-align: -.1em;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgba(35, 26, 20, .4);
}
.pastilla--circulo { width: .92em; }
.pastilla img { width: 100%; height: 100%; object-fit: cover; }

.manifiesto__pie {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.cifra { border-top: 1.5px solid var(--tinta); padding-top: 1.1rem; }
.cifra__numero {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin-bottom: .5rem;
}
.cifra__texto { font-size: .9rem; color: var(--cafe-medio); line-height: 1.45; }

/* ---------- COLECCIÓN (bento) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.4vw, 1.2rem);
}
.bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 370px;
  padding: clamp(1.3rem, 2vw, 1.8rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--crema-claro);
  isolation: isolate;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.bento__item:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.bento__item--grande { grid-column: span 2; grid-row: span 2; min-height: 680px; }
.bento__item--ancho  { grid-column: 1 / -1; min-height: 300px; flex-direction: row; align-items: stretch; }

.bento__arriba {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.bento__numero { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; opacity: .8; }
.flecha-circulo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(250, 244, 233, .14);
  border: 1px solid rgba(250, 244, 233, .25);
  flex-shrink: 0;
  transition: transform .7s var(--ease), background .4s, color .4s;
}
.flecha-circulo svg { width: 1.1rem; height: 1.1rem; }
.bento__item:hover .flecha-circulo { transform: rotate(-45deg); background: var(--crema-claro); color: var(--tinta); }

.bento__abajo { position: relative; z-index: 2; }
.bento__item--grande .bento__abajo { max-width: 55%; }
.bento__nombre {
  font-size: clamp(1.6rem, 2.1vw, 2.15rem);
  margin-bottom: .15em;
}
.bento__item--grande .bento__nombre { font-size: clamp(3rem, 6vw, 5.6rem); }
.bento__agave { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; opacity: .85; margin: 0; }
.bento__item--grande .bento__agave { font-size: 1.3rem; margin-bottom: 1.2rem; }

/* Ventana en arco centrada arriba; el texto queda libre abajo */
.bento__foto {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: clamp(1rem, 1.6vw, 1.4rem);
  transform: translateX(-50%);
  width: 44%;
  height: 56%;
  border-radius: var(--r-arco);
  overflow: hidden;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
}
.bento__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.bento__item:hover .bento__foto img { transform: scale(1.08); }

/* Botella en las piezas pequeñas: centrada arriba, sobre un halo */
.bento__halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 6%;
  width: 70%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 207, .45) 0%, rgba(250, 244, 233, .12) 45%, transparent 70%);
}
.bento__botella-mini {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  margin-inline: auto;
  top: clamp(.9rem, 1.4vw, 1.2rem);
  height: 62%;
  width: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45));
  transition: transform 1s var(--ease);
}
.bento__item:hover .bento__botella-mini { transform: translateY(-8px) rotate(-3deg); }

/* Botella flotando en la pieza grande */
.bento__sol {
  position: absolute;
  z-index: 0;
  right: -8%;
  top: 12%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 182, 75, .75) 0%, rgba(243, 182, 75, .25) 45%, transparent 70%);
}
.bento__botella {
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: 4%;
  height: 88%;
  width: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
  transform: rotate(4deg);
  transition: transform 1.2s var(--ease);
}
.bento__item--grande:hover .bento__botella { transform: rotate(0deg) translateY(-10px); }
.bento__item--grande .sello { position: absolute; left: 1.6rem; top: 42%; --tam: 120px; z-index: 2; color: var(--crema-claro); }

/* Pieza ancha del kit */
.bento__item--ancho .bento__texto {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-right: 2rem;
}
/* La foto del kit es cuadrada: marco cuadrado para que la caja se vea completa */
.bento__item--ancho .bento__foto {
  position: relative;
  inset: auto;
  transform: none;
  width: min(38%, 380px);
  height: auto;
  aspect-ratio: 1;
  align-self: center;
  border-radius: var(--r-md);
  flex-shrink: 0;
}

/* ---------- BAJO EL SOL / BAJO LA LUNA ---------- */
.sol-luna {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sol-luna__lado {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.3rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.sol-luna__lado--sol { align-items: flex-end; text-align: right; }
.sol-luna__astro {
  position: absolute;
  z-index: -1;
  width: clamp(260px, 36vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.sol-luna__lado--sol .sol-luna__astro {
  left: -12%;
  top: -10%;
  background: radial-gradient(circle at 50% 50%, #fff3cf 0%, #f7c96a 30%, rgba(240, 164, 68, .6) 55%, transparent 72%);
}
.sol-luna__lado--luna .sol-luna__astro {
  right: -8%;
  top: 6%;
  width: clamp(200px, 26vw, 380px);
  background: transparent;
  box-shadow: inset -34px 22px 0 0 rgba(234, 241, 247, .9);
  filter: drop-shadow(0 0 40px rgba(156, 200, 234, .45));
  transform: rotate(-20deg);
}
.sol-luna__foto {
  width: min(100%, 320px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-arco);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.sol-luna__foto img { width: 100%; height: 100%; object-fit: cover; }
.sol-luna__texto { max-width: 38ch; }
.sol-luna__texto h2 { font-size: var(--t-xl); }
.sol-luna__lado--sol .sol-luna__texto p { color: rgba(35, 26, 20, .8); }
.sol-luna__lado--luna .sol-luna__texto p { color: rgba(250, 244, 233, .8); }

.sol-luna__emblema {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: clamp(130px, 14vw, 200px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--crema-claro);
  box-shadow: 0 0 0 10px rgba(250, 244, 233, .25), 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.sol-luna__emblema img { width: 70%; }
.sol-luna__emblema .sello { position: absolute; inset: -18%; width: auto; --tam: auto; color: var(--crema-claro); }
.sol-luna__emblema .sello img { display: none; }

/* ---------- TESTIMONIOS ---------- */
.testimonios { overflow: hidden; }
.testimonios__comillas {
  position: absolute;
  z-index: -1;
  top: -.2em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(16rem, 38vw, 34rem);
  line-height: 1;
  color: rgba(250, 244, 233, .35);
  pointer-events: none;
}
.carrusel { display: grid; max-width: 1040px; margin-inline: auto; text-align: center; }
.testimonio {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform 1s var(--ease), visibility 0s .8s;
}
.testimonio.activo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .8s var(--ease) .15s, transform 1s var(--ease) .15s, visibility 0s;
}
.testimonio blockquote {
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 3.1rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.carrusel__controles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3rem;
}
.carrusel__puntos { display: flex; gap: .5rem; }
.carrusel__puntos button {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: rgba(35, 26, 20, .25);
  transition: width .6s var(--ease), background .4s;
}
.carrusel__puntos button[aria-current="true"] { width: 34px; background: var(--tinta); }
.carrusel__flecha {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(35, 26, 20, .35);
  transition: background .4s, color .4s, transform .5s var(--ease);
}
.carrusel__flecha:hover { background: var(--tinta); color: var(--crema); transform: scale(1.06); }
.carrusel__flecha svg { width: 1.1rem; height: 1.1rem; }

/* ---------- BRINDIS (llamado final) ---------- */
.brindis {
  position: relative;
  min-height: max(72svh, 520px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--crema-claro);
  overflow: hidden;
  isolation: isolate;
}
.brindis__fondo { position: absolute; inset: -12% 0; z-index: -2; }
.brindis__fondo img { width: 100%; height: 100%; object-fit: cover; }
.brindis__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 45% at 50% 55%, rgba(224, 118, 42, .35), transparent 70%),
    linear-gradient(180deg, rgba(20, 15, 11, .82) 0%, rgba(20, 15, 11, .66) 45%, rgba(20, 15, 11, .9) 100%);
}
.brindis h2 { font-size: var(--t-mega); line-height: .9; margin-bottom: .25em; }
.brindis p { max-width: 50ch; margin: 0 auto 2.4rem; font-size: 1.1rem; color: rgba(250, 244, 233, .86); }
.brindis .acciones { justify-content: center; }

/* ---------- ADAPTACIÓN ---------- */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item--grande { grid-column: 1 / -1; grid-row: auto; min-height: 560px; }
  .manifiesto__rejilla { grid-template-columns: 1fr; }
  .manifiesto__foto { aspect-ratio: 3 / 2; max-height: none; }
}
@media (max-width: 900px) {
  .portada__sello { display: none; }
  .cifras { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .sol-luna { grid-template-columns: 1fr; }
  .sol-luna__lado--sol { align-items: flex-start; text-align: left; padding-bottom: 7rem; }
  .sol-luna__lado--luna { padding-top: 7rem; }
  .sol-luna__emblema { top: 50%; }
  .bento__item--ancho { flex-direction: column; gap: 1.5rem; }
  .bento__item--ancho .bento__foto { width: min(100%, 420px); aspect-ratio: 1; }
  .bento__item--ancho .bento__texto { padding-right: 0; gap: 2rem; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento__item { min-height: 300px; }
  .pastilla { display: none; }

  /* En teléfono el Espadín es una pieza más, igual que las otras */
  .bento__item--grande { min-height: 300px; }
  .bento__item--grande .bento__sol,
  .bento__item--grande .bento__botella,
  .bento__item--grande .sello,
  .bento__item--grande .chips { display: none; }
  .bento__item--grande .bento__halo,
  .bento__item--grande .bento__botella-mini { display: block; }
  .bento__item--grande .bento__abajo { max-width: none; }
  .bento__item--grande .bento__nombre { font-size: clamp(1.6rem, 2.1vw, 2.15rem); }
  .bento__item--grande .bento__agave { font-size: 1.05rem; margin-bottom: 0; }
}

/* En computadora y tableta la pieza grande usa la botella grande, no la pequeña */
@media (min-width: 601px) {
  .bento__item--grande .bento__halo,
  .bento__item--grande .bento__botella-mini { display: none; }
}

/* =================================================================
   PÁGINAS INTERIORES: cabecera de página, Nosotros, Catálogo
   ================================================================= */

/* ---------- CABECERA DE PÁGINA ---------- */
.cabeza {
  position: relative;
  padding: calc(var(--alto-header) + clamp(2rem, 4vw, 3rem)) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.cabeza__rejilla {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.cabeza h1 { font-size: var(--t-xxl); margin-bottom: .3em; }
.cabeza__bajada { max-width: 48ch; font-size: 1.12rem; opacity: .85; }
.cabeza__visual { position: relative; justify-self: end; width: min(100%, 340px, calc((100svh - var(--alto-header) - 9rem) * .8)); }
.cabeza__visual .arco { aspect-ratio: 4 / 5; box-shadow: var(--sombra-alta); }
/* El sello va arriba a la izquierda, sobre la curva del arco, para no tapar a nadie */
.cabeza__visual .sello { position: absolute; left: -16%; top: 4%; --tam: clamp(100px, 9vw, 130px); }
.cabeza__visual .circulo {
  position: absolute;
  right: -10%;
  top: -8%;
  width: 38%;
  aspect-ratio: 1;
  border: 6px solid var(--crema-claro);
  box-shadow: var(--sombra);
}
.fondo-noche .cabeza__visual .circulo { border-color: #2b211a; }
/* Catálogo: en teléfono el hero va sólo con texto */
@media (max-width: 600px) { .cabeza__visual--sin-movil { display: none; } }

.miga {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.8rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}
.miga a:hover { color: var(--ambar); }
.miga span[aria-hidden] { opacity: .5; }

/* Cabecera con fotografía de fondo */
.cabeza--foto { color: var(--crema-claro); min-height: 70svh; display: flex; align-items: flex-end; }
.cabeza--foto > .contenedor { width: 100%; }
.cabeza__fondo { position: absolute; inset: -10% 0 0 0; z-index: -2; }
.cabeza__fondo img { width: 100%; height: 100%; object-fit: cover; }
.cabeza__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Velo uniforme + refuerzo abajo y a la izquierda, donde va el texto */
  background:
    linear-gradient(180deg, rgba(18, 13, 10, .45) 0%, rgba(18, 13, 10, .1) 35%, rgba(18, 13, 10, .82) 100%),
    linear-gradient(90deg, rgba(18, 13, 10, .55) 0%, rgba(18, 13, 10, 0) 75%),
    rgba(18, 13, 10, .5);
}

/* ---------- NOSOTROS: HISTORIA ---------- */
.historia {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.historia__lateral { position: sticky; top: calc(var(--alto-header) + 2rem); }
.historia__anio {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(4.5rem, 12vw, 10rem);
  line-height: .9;
  letter-spacing: -.02em;
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.historia__anio + p { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cafe-medio); margin-top: 1rem; }
.historia__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
}
.historia__fotos .arco { aspect-ratio: 3 / 4; }
.historia__fotos .arco:nth-child(2) { margin-top: 4rem; }

.cita-gigante {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
.cita-gigante strong { font-style: normal; font-weight: 800; }

/* ---------- MISIÓN (sol) / VISIÓN (luna) ---------- */
.astros { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.astro {
  position: relative;
  min-height: 360px;
  padding: clamp(5rem, 9vw, 7rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.astro__palabra {
  position: absolute;
  z-index: -1;
  top: -.08em;
  left: -.04em;
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 1;
  letter-spacing: -.06em;
  opacity: .16;
}
.astro__figura {
  position: absolute;
  z-index: -1;
  right: -60px;
  top: -60px;
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.astro--sol .astro__figura { background: radial-gradient(circle, #fff3cf 0%, #f7c96a 32%, rgba(240, 164, 68, .5) 58%, transparent 72%); }
.astro--luna .astro__figura {
  right: 30px;
  top: 30px;
  width: 170px;
  box-shadow: inset -28px 18px 0 0 rgba(234, 241, 247, .9);
  filter: drop-shadow(0 0 30px rgba(156, 200, 234, .5));
  transform: rotate(-18deg);
}
.astro h2 { font-size: var(--t-l); }
.astro p { font-size: 1.12rem; max-width: 42ch; }
.astro--sol p { color: rgba(35, 26, 20, .82); }
.astro--luna p { color: rgba(250, 244, 233, .85); }

/* ---------- PILARES ---------- */
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); }
.pilar {
  position: relative;
  padding: 2.2rem clamp(1rem, 2vw, 1.8rem) 2.4rem;
  border-left: 1px solid rgba(250, 244, 233, .16);
  transition: background .6s var(--ease);
}
.pilar:first-child { border-left: 0; }
.pilar:hover { background: rgba(250, 244, 233, .05); }
.pilar__num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.05em;
  margin-bottom: 2.5rem;
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pilar h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.pilar p { font-size: .96rem; color: rgba(250, 244, 233, .72); margin: 0; }

/* ---------- PROCESO CON IMAGEN FIJA ---------- */
.proceso { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.proceso__visual {
  position: sticky;
  top: calc(var(--alto-header) + 1.5rem);
  height: calc(100svh - var(--alto-header) - 3rem);
  max-height: 780px;
}
.proceso__marco { position: relative; height: 100%; border-radius: var(--r-arco); overflow: hidden; box-shadow: var(--sombra-alta); }
.proceso__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s var(--ease), transform 1.6s var(--ease);
}
.proceso__marco img.activa { opacity: 1; transform: none; }
.proceso__contador {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  padding: .5rem 1rem;
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--crema-claro);
  background: rgba(24, 18, 14, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.proceso__pasos { list-style: none; }
.paso {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
  opacity: .28;
  transition: opacity .8s var(--ease);
}
.paso.activo { opacity: 1; }
.paso__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(3.4rem, 6vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--naranja);
  opacity: .9;
  margin-bottom: 1rem;
}
.paso h3 { font-size: var(--t-l); }
.paso p { max-width: 44ch; color: var(--cafe-medio); font-size: 1.05rem; }
.paso__dato { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--terracota); margin-bottom: .9rem; }
.paso__foto { display: none; }

/* ---------- GALERÍA HORIZONTAL ---------- */
.galeria-h { position: relative; }
.galeria-h__fijo {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  overflow: hidden;
}
.galeria-h__pista {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding-inline: var(--gutter);
  width: max-content;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.galeria-h__item { margin: 0; flex-shrink: 0; cursor: zoom-in; }
.galeria-h__item img {
  height: clamp(240px, 42svh, 440px);
  width: auto;
  border-radius: var(--r-md);
  object-fit: cover;
  transition: transform .9s var(--ease), filter .6s;
}
.galeria-h__item:nth-child(3n+2) img { height: clamp(200px, 36svh, 380px); border-radius: var(--r-arco); }
.galeria-h__item:hover img { transform: scale(.97); filter: saturate(1.15); }
.galeria-h__item figcaption { margin-top: .8rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.galeria-h__barra { height: 2px; background: rgba(35, 26, 20, .15); border-radius: 2px; overflow: hidden; }
.galeria-h__barra span { display: block; height: 100%; width: var(--avance, 0%); background: var(--grad-sol); }

/* ---------- GALERÍA EN CARRUSEL CON FLECHAS ---------- */
.galeria-c__controles { display: flex; gap: .6rem; justify-self: end; }
.galeria-c__controles .carrusel__flecha:disabled { opacity: .3; cursor: default; transform: none; background: transparent; color: inherit; }
.galeria-c__pista {
  --pad: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  display: flex;
  gap: clamp(.8rem, 1.5vw, 1.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--pad);
  padding: 0 var(--pad) .5rem;
  scrollbar-width: none;
}
.galeria-c__pista::-webkit-scrollbar { display: none; }
.galeria-c__item {
  flex: 0 0 clamp(250px, 29vw, 410px);
  margin: 0;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.galeria-c__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform .8s var(--ease), filter .5s;
}
.galeria-c__item:hover img { transform: scale(.98); filter: saturate(1.12); }
.galeria-c__item figcaption { margin-top: .8rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

/* Visor de imagen */
.visor {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 4rem 1rem;
  background: rgba(20, 15, 12, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.visor.abierto { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.visor img { max-width: min(92vw, 1400px); max-height: 80vh; border-radius: var(--r-md); box-shadow: 0 40px 80px rgba(0, 0, 0, .6); }
.visor__boton {
  position: absolute;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--crema);
  background: rgba(250, 244, 233, .1);
  border: 1px solid rgba(250, 244, 233, .2);
  transition: background .3s;
}
.visor__boton:hover { background: rgba(250, 244, 233, .22); }
.visor__boton svg { width: 1.2rem; height: 1.2rem; }
.visor__cerrar { top: 1.2rem; right: 1.2rem; }
.visor__ant { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.visor__sig { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.visor__pie { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; color: rgba(250, 244, 233, .75); font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- CANALES ---------- */
.canales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.canal {
  padding: 2rem 1.6rem;
  border-radius: var(--r-md);
  background: rgba(250, 244, 233, .07);
  border: 1px solid rgba(250, 244, 233, .14);
  transition: transform .7s var(--ease), background .5s;
}
.canal:hover { transform: translateY(-6px); background: rgba(250, 244, 233, .12); }
.canal svg { width: 2.2rem; height: 2.2rem; stroke: var(--ambar); margin-bottom: 2.2rem; }
.canal h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.canal p { font-size: .94rem; color: rgba(250, 244, 233, .72); margin: 0; }

/* ---------- CATÁLOGO: TARJETAS ---------- */
.coleccion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.8rem);
}
.tarjeta-producto { display: block; }
.tarjeta-producto__panel {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-arco);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  /* fila y columna acotadas: así el alto en % de la botella se calcula sobre el panel */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  margin-bottom: 1.4rem;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.tarjeta-producto:hover .tarjeta-producto__panel { transform: translateY(-8px); box-shadow: var(--sombra-alta); }
.tarjeta-producto__panel::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 244, 233, .38) 0%, transparent 68%);
}
.tarjeta-producto__foto {
  position: relative;
  z-index: 1;
  width: 62%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-arco);
  overflow: hidden;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55);
}
.tarjeta-producto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tarjeta-producto__foto--cuadro { width: 82%; aspect-ratio: 1; border-radius: var(--r-md); }
.tarjeta-producto:hover .tarjeta-producto__foto img { transform: scale(1.08); }
.tarjeta-producto__botella {
  position: relative;
  z-index: 1;
  height: 86%;
  width: auto;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45));
  transition: transform 1.2s var(--ease);
}
.tarjeta-producto:hover .tarjeta-producto__botella { transform: translateY(-10px) rotate(-3deg); }
.tarjeta-producto__num {
  position: absolute;
  z-index: 2;
  top: 18%;
  left: 1.3rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--crema-claro);
}
.tarjeta-producto__panel .flecha-circulo { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem; color: var(--crema-claro); }
.tarjeta-producto:hover .flecha-circulo { transform: rotate(-45deg); background: var(--crema-claro); color: var(--tinta); }
.tarjeta-producto__nombre { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: .1em; }
.tarjeta-producto__agave { font-family: var(--f-display); font-style: italic; color: var(--cafe-medio); margin-bottom: .9rem; }
.tarjeta-producto p.tarjeta-producto__resumen { font-size: .96rem; color: var(--cafe-medio); margin-bottom: 1rem; }

/* ---------- ESPECTRO DE SABOR ---------- */
.espectro { padding: 5.5rem 0 1rem; }
.espectro__barra {
  position: relative;
  height: 14px;
  border-radius: 100px;
  background: linear-gradient(90deg, #f7c96a 0%, #f0a444 25%, #6d9e3f 45%, #8e6fb0 62%, #c1502f 78%, #1c4b73 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .15);
}
.espectro__punto {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
}
.espectro__punto i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color);
  border: 4px solid var(--crema-claro);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .4);
  transition: transform .5s var(--ease);
}
.espectro__punto:hover i { transform: scale(1.25); }
.espectro__punto span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .7rem);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
}
.espectro__punto:nth-child(even) span { bottom: auto; top: calc(100% + .7rem); }
.espectro__extremos {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cafe-medio);
}

.recomendaciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.recomendacion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(35, 26, 20, .08);
  transition: transform .7s var(--ease), background .4s;
}
.recomendacion:hover { transform: translateY(-5px); background: #fff; }
.recomendacion__si { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cafe-medio); }
.recomendacion strong {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color);
}
.recomendacion .enlace { margin-top: auto; align-self: flex-start; }

/* ---------- RITUAL ---------- */
.ritual { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: ritual; }
.ritual__paso { counter-increment: ritual; }
.ritual__paso::before {
  content: counter(ritual, decimal-leading-zero);
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--ambar);
  margin-bottom: 1.3rem;
}
.ritual__paso h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.ritual__paso p { font-size: .96rem; color: rgba(250, 244, 233, .75); margin: 0; }

/* ---------- ADAPTACIÓN ---------- */
@media (max-width: 1100px) {
  .pilares, .canales, .ritual { grid-template-columns: 1fr 1fr; }
  .pilar:nth-child(3) { border-left: 0; }
  .coleccion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cabeza__rejilla, .historia, .astros, .proceso { grid-template-columns: 1fr; }
  .cabeza__visual { justify-self: start; width: min(78%, 360px); margin-top: 1rem; }
  .historia__lateral { position: static; }
  .astro { min-height: 420px; }
  .proceso__visual { display: none; }
  .paso { min-height: 0; opacity: 1; padding-block: 2.5rem; border-top: 1px solid rgba(35, 26, 20, .12); }
  .paso__foto { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.5rem; }
  .paso__foto img { width: 100%; height: 100%; object-fit: cover; }
  .galeria-h { height: auto !important; }
  .galeria-h__fijo { position: static; height: auto; overflow: visible; padding-block: 1rem; }
  .galeria-h__pista {
    width: auto;
    transform: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .galeria-h__item { scroll-snap-align: center; }
  .galeria-h__barra { display: none; }
  .recomendaciones { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pilares, .canales, .ritual, .coleccion { grid-template-columns: 1fr; }
  .pilar { border-left: 0; border-top: 1px solid rgba(250, 244, 233, .16); }
  .historia__fotos .arco:nth-child(2) { margin-top: 2rem; }
  .espectro__punto span { font-size: .9rem; }
  .cabeza__visual .sello { display: none; }
}

/* =================================================================
   CONTACTO · BLOG · ARTÍCULO
   ================================================================= */

/* ---------- FILAS DE CONTACTO ---------- */
.filas { list-style: none; border-top: 1.5px solid var(--tinta); }
.fila {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(.5rem, 2vw, 1.5rem);
  border-bottom: 1.5px solid var(--tinta);
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease);
}
.fila::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color, var(--grad-sol));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .7s var(--ease);
}
.fila:hover::before { transform: scaleY(1); }
.fila:hover { color: var(--crema-claro); }
.fila--sol:hover { color: var(--tinta); }
.fila__icono {
  width: clamp(3.2rem, 5vw, 4.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  transition: transform .7s var(--ease);
}
.fila:hover .fila__icono { transform: rotate(-12deg) scale(1.05); }
.fila__icono svg { width: 42%; height: 42%; fill: currentColor; }
.fila__icono svg.trazo { fill: none; stroke: currentColor; }
.fila__etiqueta { display: block; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: .3rem; }
.fila__valor {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.fila__nota { max-width: 26ch; font-size: .92rem; opacity: .75; text-align: right; }
.fila .flecha-circulo { border-color: currentColor; background: transparent; }
.fila:hover .flecha-circulo { transform: rotate(-45deg); }

/* ---------- UBICACIÓN ---------- */
.ubicacion { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.datos-lugar { list-style: none; display: grid; gap: 0; margin: 2rem 0; border-top: 1px solid rgba(35, 26, 20, .15); }
.datos-lugar li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(35, 26, 20, .15);
}
.datos-lugar span { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cafe-medio); }
.datos-lugar strong { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; text-align: right; }
.mapa {
  position: relative;
  border-radius: var(--r-arco);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  box-shadow: var(--sombra-alta);
  background: var(--crema-medio);
}
/* Mapa solo, a todo el ancho del contenedor */
.mapa--ancho { aspect-ratio: 16 / 7; max-height: 560px; border-radius: var(--r-lg); }
/* Se sube el mapa para que la tarjeta blanca de Google quede oculta bajo el arco */
.mapa iframe { position: absolute; left: 0; top: -96px; width: 100%; height: calc(100% + 96px); border: 0; filter: saturate(.85) sepia(.12); }

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq { list-style: none; border-top: 1.5px solid currentColor; }
.faq__item { border-bottom: 1.5px solid currentColor; }
.faq__pregunta {
  width: 100%;
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.3rem, 2.5vw, 1.9rem) 0;
  text-align: left;
}
.faq__num { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; opacity: .6; }
.faq__texto {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  transition: color .3s;
}
.faq__pregunta:hover .faq__texto { color: var(--naranja); }
.faq__mas {
  position: relative;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background .4s, transform .6s var(--ease);
}
.faq__mas::before, .faq__mas::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .6s var(--ease);
}
.faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.abierto .faq__mas { transform: rotate(180deg); background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.faq__item.abierto .faq__mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq__item.abierto .faq__respuesta { grid-template-rows: 1fr; }
.faq__respuesta > div { overflow: hidden; }
.faq__respuesta p { padding: 0 4rem 1.8rem 4.5rem; max-width: 72ch; opacity: .82; margin: 0; }
.faq__respuesta a { color: var(--terracota); text-decoration: underline; text-underline-offset: 3px; }
.fondo-noche .faq__respuesta a { color: var(--ambar); }

/* ---------- BLOG: FILTROS ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.filtro {
  padding: .6rem 1.2rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .88rem;
  border: 1.5px solid rgba(35, 26, 20, .2);
  transition: background .4s, color .4s, border-color .4s;
}
.filtro:hover { border-color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* ---------- BLOG: TARJETAS ---------- */
.rejilla-notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.8rem); }
.nota { display: flex; flex-direction: column; }
.nota[hidden] { display: none; }
.nota__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 1.3rem;
}
.nota__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nota:hover .nota__media img { transform: scale(1.06); }
.nota__cat {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: .4rem .85rem;
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  background: rgba(250, 244, 233, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nota__meta { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cafe-medio); margin-bottom: .7rem; }
.nota__titulo { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: .5rem; transition: color .3s; }
.nota:hover .nota__titulo { color: var(--terracota); }
.nota__extracto { font-size: .96rem; color: var(--cafe-medio); }

.nota--destacada {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: 1rem;
}
.nota--destacada .nota__media { aspect-ratio: 16 / 11; margin: 0; border-radius: var(--r-arco); }
.nota--destacada .nota__titulo { font-size: var(--t-l); }
.nota--destacada .nota__extracto { font-size: 1.08rem; }

/* Lista compacta (inicio) */
.diario { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.diario .nota--principal .nota__media { aspect-ratio: 5 / 4; border-radius: var(--r-lg); }
.diario .nota--principal .nota__titulo { font-size: var(--t-l); }
.diario__lista { list-style: none; border-top: 1.5px solid var(--tinta); }
.diario__lista li { border-bottom: 1.5px solid var(--tinta); }
.nota--fila { display: grid; grid-template-columns: 130px 1fr; gap: 1.3rem; align-items: center; padding: 1.4rem 0; }
.nota--fila .nota__media { aspect-ratio: 1; margin: 0; border-radius: var(--r-md); }
.nota--fila .nota__titulo { font-size: 1.35rem; margin: 0; }

/* ---------- ARTÍCULO ---------- */
.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 850;
  height: 4px;
  background: var(--grad-sol);
  transform-origin: left;
  transform: scaleX(var(--avance, 0));
}
.articulo-cabeza { padding: calc(var(--alto-header) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 5vw, 4rem); text-align: center; }
.articulo-cabeza .miga { justify-content: center; }
.articulo-cabeza h1 { font-size: var(--t-xl); max-width: 18ch; margin-inline: auto; }
.articulo-cabeza__bajada { max-width: 58ch; margin: 0 auto 2rem; font-size: 1.15rem; color: var(--cafe-medio); }
.articulo-cabeza__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.6rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cafe-medio); }
.articulo-portada { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.articulo-portada img { width: 100%; aspect-ratio: 21 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sombra-alta); }

.prosa { max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); font-size: 1.12rem; line-height: 1.85; }
.prosa > p:first-child::first-letter {
  float: left;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 4.4em;
  line-height: .8;
  margin: .08em .12em 0 0;
  color: var(--terracota);
}
.prosa h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 2.2em 0 .6em; }
.prosa h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 1.8em 0 .5em; }
.prosa a { color: var(--terracota); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--naranja); }
.prosa strong { font-weight: 800; }
.prosa ul, .prosa ol { padding-left: 0; margin: 0 0 1.4em; list-style: none; }
.prosa li { position: relative; padding-left: 1.8rem; margin-bottom: .7em; }
.prosa li::before {
  content: '';
  position: absolute;
  left: .2rem;
  top: .62em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--grad-sol);
}
.prosa blockquote {
  margin: 2.4em -2rem;
  padding: 2rem 2.4rem;
  border-radius: var(--r-md);
  background: var(--grad-sol);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: -.015em;
}
.prosa blockquote p { margin: 0; }
.prosa figure { margin: 2.6em -8vw; max-width: none; }
.prosa figure img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sombra); }
.prosa figcaption { margin-top: .9rem; text-align: center; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cafe-medio); }

.compartir {
  max-width: 720px;
  margin: 3.5rem auto 0;
  padding: 2rem var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  border-top: 1.5px solid var(--tinta);
}
.compartir > span { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-right: auto; }
.compartir a, .compartir button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .86rem;
  border: 1.5px solid rgba(35, 26, 20, .2);
  transition: background .4s, color .4s, border-color .4s;
}
.compartir a:hover, .compartir button:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.compartir svg { width: 16px; height: 16px; }

/* ---------- ADAPTACIÓN ---------- */
@media (max-width: 1000px) {
  .rejilla-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ubicacion, .diario { grid-template-columns: 1fr; }
  .prosa figure { margin-inline: 0; }
  .prosa blockquote { margin-inline: 0; }
}
@media (max-width: 760px) {
  .rejilla-notas { grid-template-columns: 1fr; }
  .nota--destacada { grid-template-columns: 1fr; }
  .fila { grid-template-columns: auto 1fr; }
  .fila__nota, .fila .flecha-circulo { display: none; }
  .faq__pregunta { grid-template-columns: 2.2rem 1fr auto; }
  .faq__respuesta p { padding: 0 0 1.6rem 3.2rem; }
  .mapa { aspect-ratio: 1; border-radius: var(--r-lg); }
  .nota--fila { grid-template-columns: 96px 1fr; }
}

/* =================================================================
   PÁGINAS DE PRODUCTO
   Cada variedad tiene su propio "mundo de color" (--t1 claro → --t4 profundo)
   ================================================================= */

.tema-espadin    { --t1: #a6cf6b; --t2: #6d9e3f; --t3: #4a6f2a; --t4: #1f3312; }
.tema-papalometl { --t1: #c3a6e0; --t2: #8e6fb0; --t3: #5c4488; --t4: #261a3d; }
.tema-pichometl  { --t1: #6fb3e3; --t2: #2a72a8; --t3: #1c4b73; --t4: #0c1d2c; }
.tema-ensamble   { --t1: #eb8a60; --t2: #c1502f; --t3: #7a2f22; --t4: #34130d; }
.tema-mango      { --t1: #f7c96a; --t2: #e0762a; --t3: #bf4a2b; --t4: #5a1d0d; }
.tema-kit        { --t1: #d8b787; --t2: #a8814e; --t3: #6b4f30; --t4: #2e2016; }

.fondo-tema {
  color: var(--crema-claro);
  background:
    radial-gradient(42% 55% at 74% 44%, var(--t1) 0%, transparent 66%),
    radial-gradient(55% 65% at 0% 100%, var(--t4) 0%, transparent 70%),
    linear-gradient(150deg, var(--t2) 0%, var(--t3) 52%, var(--t4) 100%);
}
.texto-tema { color: var(--t3); }
.fondo-tema h1 em, .fondo-tema h2 em { color: var(--t1); }
.fondo-tema .etiqueta::before { background: linear-gradient(135deg, var(--t1), #fff3cf); box-shadow: 0 0 0 5px rgba(250, 244, 233, .18); }

/* ---------- HÉROE DE PRODUCTO ---------- */
.p-heroe {
  position: relative;
  min-height: max(100svh, 720px);
  display: flex;
  align-items: center;
  padding: calc(var(--alto-header) + 3rem) 0 4rem;
  overflow: hidden;
  isolation: isolate;
}
.p-heroe__palabra {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -.14em;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: 'SOFT' 100;
  font-size: clamp(6rem, 23vw, 24rem);
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(250, 244, 233, .2);
  pointer-events: none;
  user-select: none;
}
.p-heroe__rejilla {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.p-heroe h1 { font-size: clamp(3.4rem, 9vw, 8.6rem); margin-bottom: .08em; }
.p-heroe__agave {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  opacity: .9;
  margin-bottom: 1.6rem;
}
.p-heroe__lema { max-width: 42ch; font-size: 1.12rem; color: rgba(250, 244, 233, .86); margin-bottom: 2rem; }
.p-heroe__datos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 1.4rem 2.2rem;
  padding: 1.4rem 0;
  margin-bottom: 2rem;
  border-block: 1px solid rgba(250, 244, 233, .22);
}
.p-heroe__datos span { display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: .25rem; }
.p-heroe__datos strong { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; }

.p-heroe__visual {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  height: min(78svh, 760px);
}
.p-heroe__sol {
  position: absolute;
  width: min(100%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 207, .55) 0%, rgba(250, 244, 233, .18) 42%, transparent 68%);
}
.p-heroe__anillo {
  position: absolute;
  width: min(88%, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(250, 244, 233, .3);
}
.p-heroe__botella {
  position: relative;
  height: 92%;
  width: auto;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5));
  animation: flotar 7s ease-in-out infinite;
}
/* Dos presentaciones lado a lado (Espadín 750 ml y 700 ml) */
.p-heroe__par {
  position: relative;
  height: 92%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.p-heroe__par .p-heroe__botella { height: 100%; }
.p-heroe__par .p-heroe__botella--2 { height: 88%; margin-left: -4%; animation-delay: -3.5s; }

.p-heroe__arco {
  position: relative;
  width: min(78%, 400px);
  aspect-ratio: 3 / 4.2;
  border-radius: var(--r-arco);
  overflow: hidden;
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .6);
}
.p-heroe__arco img { width: 100%; height: 100%; object-fit: cover; }
.p-heroe__arco--botella { width: min(56%, 300px); aspect-ratio: 1 / 2.05; }
.p-heroe__arco--foto { width: min(92%, 480px); aspect-ratio: 1; border-radius: var(--r-lg); }
.p-heroe__visual .sello { position: absolute; left: 2%; bottom: 10%; --tam: clamp(110px, 11vw, 150px); color: var(--crema-claro); }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(1deg); }
}

/* ---------- INTRODUCCIÓN ---------- */
.p-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.p-intro .entrada { font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.25; }
.p-intro__texto p { color: var(--cafe-medio); }

/* ---------- PERFIL DE SABOR ---------- */
.p-sabor { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.perfil { display: grid; gap: 1.2rem; }
.perfil__fila { display: grid; grid-template-columns: 7.5rem 1fr 2.4rem; align-items: center; gap: 1rem; }
.perfil__nombre { font-weight: 700; font-size: .98rem; }
.perfil__barra { height: 12px; border-radius: 100px; background: rgba(35, 26, 20, .09); overflow: hidden; }
.perfil__barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--t2), var(--t1));
  transition: width 1.6s var(--ease);
  transition-delay: calc(var(--n, 0) * 90ms);
}
.perfil.visto .perfil__barra i { width: calc(var(--v) * 20%); }
.perfil__valor { font-family: var(--f-mono); font-size: .8rem; color: var(--cafe-medio); text-align: right; }

.cata { list-style: none; display: grid; gap: 0; border-top: 1.5px solid var(--tinta); }
.cata li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1.5px solid var(--tinta); }
.cata span { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); padding-top: .25rem; }
.cata p { margin: 0; font-family: var(--f-display); font-size: 1.2rem; line-height: 1.4; }

/* ---------- FICHA TÉCNICA COMO ETIQUETA ---------- */
.p-ficha { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.etiqueta-botella {
  position: relative;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  background: #fffaf1;
  color: var(--tinta);
  border-radius: 6px;
  box-shadow: var(--sombra-alta);
  outline: 2px solid var(--t2);
  outline-offset: -14px;
  transform: rotate(-1.2deg);
  transition: transform .8s var(--ease);
}
.etiqueta-botella:hover { transform: rotate(0deg) scale(1.01); }
.etiqueta-botella::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid var(--t2);
  opacity: .5;
  pointer-events: none;
}
.etiqueta-botella__cabeza { text-align: center; padding: .6rem 0 1.4rem; border-bottom: 1px dashed rgba(35, 26, 20, .3); margin-bottom: 1rem; }
.etiqueta-botella__cabeza img { width: 64px; margin: 0 auto .6rem; }
.etiqueta-botella__marca { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'SOFT' 100; font-size: 2.2rem; line-height: 1; letter-spacing: -.04em; display: block; }
.etiqueta-botella__tipo { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--t3); }
.etiqueta-botella__variedad { font-family: var(--f-display); font-style: italic; font-size: 1.5rem; color: var(--t3); display: block; margin-top: .5rem; }
.etiqueta-botella dl { margin: 0; display: grid; }
.etiqueta-botella dl div { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; }
.etiqueta-botella dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--cafe-medio); }
.etiqueta-botella dl div::after { content: ''; order: 1; flex: 1; border-bottom: 1.5px dotted rgba(35, 26, 20, .35); transform: translateY(-.3em); }
.etiqueta-botella dd { order: 2; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; text-align: right; }
.etiqueta-botella__pie { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px dashed rgba(35, 26, 20, .3); text-align: center; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }

.p-ficha__fotos { position: relative; }
.p-ficha__fotos .arco { aspect-ratio: 4 / 5; width: 78%; box-shadow: var(--sombra); }
.p-ficha__fotos .circulo {
  position: absolute;
  right: 0;
  bottom: -8%;
  width: 42%;
  aspect-ratio: 1;
  border: 8px solid var(--crema-claro);
  box-shadow: var(--sombra);
}

/* ---------- MARIDAJE ---------- */
.maridaje { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.maridaje__item {
  position: relative;
  padding: 2rem 1.6rem 1.8rem;
  border-radius: var(--r-md);
  background: rgba(250, 244, 233, .08);
  border: 1px solid rgba(250, 244, 233, .16);
  transition: transform .7s var(--ease), background .5s;
}
.maridaje__item:hover { transform: translateY(-6px); background: rgba(250, 244, 233, .14); }
.maridaje__num { display: block; font-family: var(--f-display); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--t1); margin-bottom: 1.6rem; }
.maridaje__item h3 { font-size: 1.35rem; margin-bottom: .45rem; }
.maridaje__item p { font-size: .95rem; margin: 0; color: rgba(250, 244, 233, .76); }

/* ---------- CÓMO SERVIRLO ---------- */
.servir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.servir__item { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.6rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .55); border: 1px solid rgba(35, 26, 20, .08); }
.servir__icono { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--t1), var(--t2)); flex-shrink: 0; }
.servir__icono svg { width: 1.4rem; height: 1.4rem; stroke: #fff; fill: none; }
.servir__item strong { display: block; font-family: var(--f-display); font-size: 1.15rem; margin-bottom: .25rem; }
.servir__item p { margin: 0; font-size: .93rem; color: var(--cafe-medio); }

/* ---------- GALERÍA DEL PRODUCTO ---------- */
.p-galeria { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1rem; align-items: end; }
.p-galeria figure { margin: 0; cursor: zoom-in; overflow: hidden; }
.p-galeria figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.p-galeria figure:hover img { transform: scale(1.06); }
.p-galeria figure:nth-child(1) { aspect-ratio: 3 / 4; border-radius: var(--r-arco); }
.p-galeria figure:nth-child(2) { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.p-galeria figure:nth-child(3) { aspect-ratio: 1; border-radius: 50%; }

/* ---------- LLAMADO DEL PRODUCTO ---------- */
.p-cta { text-align: center; overflow: hidden; }
.p-cta h2 { font-size: var(--t-xl); max-width: 16ch; margin-inline: auto; }
.p-cta p { max-width: 50ch; margin: 0 auto 2.2rem; color: rgba(250, 244, 233, .85); }
.p-cta .acciones { justify-content: center; }

/* ---------- OTROS MEZCALES ---------- */
.otros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.otro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.2rem;
  min-height: 220px;
  padding: 1.3rem;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.otro:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.otro__num { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; opacity: .8; }
.otro strong { font-family: var(--f-display); font-weight: 800; font-variation-settings: 'SOFT' 100; font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; display: block; margin-bottom: .3rem; }
.otro em { font-family: var(--f-display); font-size: .92rem; opacity: .85; }
.otro .flecha-circulo { position: absolute; right: 1rem; top: 1rem; width: 2.4rem; height: 2.4rem; }
.otro:hover .flecha-circulo { transform: rotate(-45deg); background: var(--crema-claro); color: var(--tinta); }

/* ---------- ADAPTACIÓN ---------- */
@media (max-width: 1100px) {
  .otros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .p-heroe { min-height: 0; padding-top: calc(var(--alto-header) + 2.5rem); }
  .p-heroe__rejilla, .p-intro, .p-sabor, .p-ficha { grid-template-columns: 1fr; }
  .p-heroe__visual { height: 62svh; order: -1; }
  .p-heroe__datos { grid-template-columns: repeat(2, auto); }
  .servir { grid-template-columns: 1fr; }
  .p-ficha__fotos { max-width: 480px; }
}
@media (max-width: 600px) {
  .otros { grid-template-columns: 1fr 1fr; }
  .p-galeria { grid-template-columns: 1fr 1fr; }
  .p-galeria figure:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .perfil__fila { grid-template-columns: 6rem 1fr 2rem; }
  .cata li { grid-template-columns: 1fr; gap: .4rem; }
  .p-heroe__visual .sello { display: none; }
}