/* ==========================================================================
   Mezcal Xhigabaa — hoja de estilos
   Estructura: 1 fuentes · 2 variables · 3 base · 4 utilidades · 5 botones
   6 encabezado · 7 secciones de la home · 8 páginas interiores
   9 formulario · 10 legal · 11 verificación de edad · 12 pie · 13 movimiento
   Para cambiar colores o tipografías edita solo la sección 2.
   ========================================================================== */

/* 1. Fuentes de la marca (Manual de Marca 2025, sección 4), alojadas en el sitio.
   Se generan desde TIpografia/ con tools/web-fonts.py */
@font-face {
  font-family: "Intro Rust";
  src: url("../fonts/intro-rust-base-2line.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Intro Head";
  src: url("../fonts/intro-head-base.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Artifakt Element";
  src: url("../fonts/artifakt-element-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* 2. Variables de diseño
   Colores oficiales del Manual de Marca Xhigabaa 2025 (sección 5, Gama cromática):
     Total Black #000000 · Chalet Green #51733C · White Rock #EAE8D6 · Milano Red #C12C04
   Los tonos marcados "derivado" son mezclas de esos cuatro colores, necesarias para
   texto secundario, líneas y estados (hover) con contraste accesible. */
:root {
  /* Oficiales */
  --total-black: #000000;
  --chalet-green: #51733C;
  --white-rock: #EAE8D6;
  --milano-red: #C12C04;

  /* Derivados */
  --black-2: #0c0c0b;        /* Total Black + 5% White Rock: fondos secundarios */
  --black-3: #262622;        /* Total Black + 16% White Rock: líneas sobre negro */
  --white-rock-2: #a4a296;   /* White Rock al 70% sobre negro: texto secundario */
  --white-rock-3: #f4f3ea;   /* White Rock aclarado: campos de formulario */
  --text-dark-2: #46463f;    /* Total Black al 70% sobre White Rock: texto secundario */
  --green-light: #8ea27a;    /* Chalet Green + 40% White Rock: texto pequeño verde sobre negro */
  --milano-red-dark: #9a2303;/* Milano Red oscurecido: hover del botón */

  /* Roles (usa estos en los componentes) */
  --ink: var(--total-black);
  --ink-2: var(--black-2);
  --ink-3: var(--black-3);
  --bone: var(--white-rock);
  --bone-2: var(--white-rock-2);
  --paper: var(--white-rock);
  --paper-2: var(--white-rock-3);
  --ink-text: var(--total-black);
  --ink-muted: var(--text-dark-2);
  --action: var(--milano-red);
  --action-hover: var(--milano-red-dark);
  --accent: var(--chalet-green);     /* líneas, marcas, foco */
  --accent-text: var(--green-light); /* textos pequeños de acento sobre negro */
  --error: var(--milano-red);

  /* Tipografías del manual: Intro Rust = Título B; Artifakt Element = Contenido.
     Intro Head (misma familia Intro) cubre subtítulos y citas mientras no se
     tenga la fuente FALSE (Título A). Solo hay peso Regular de cada una. */
  --font-display: "Intro Rust", "Arial Black", sans-serif;
  --font-head: "Intro Head", "Arial Narrow", sans-serif;
  --font-text: "Artifakt Element", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tamaños de títulos en Intro Rust (mayúsculas anchas: más contenidos) */
  --display-1: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
  --display-2: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --display-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --step-4: clamp(2.75rem, 1.8rem + 4vw, 4.75rem);
  --step-5: clamp(3.25rem, 1.9rem + 5.6vw, 6rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --header-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-img: 12px;
  --radius-buy: 8px;        /* redondeo de los botones de compra */       /* redondeo ligero de fotos (sección El Maestro) */
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="light"] body { background: var(--paper); color: var(--ink-text); }
/* El sitio ya define sus propios colores: así los navegadores de celular con
   "modo oscuro automático" (Chrome, Samsung Internet) no oscurecen las secciones claras. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light dark; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
/* Solo existe el peso Regular: no inventar negritas falsas, salvo <strong> en textos largos */
body { font-synthesis: style; }
strong, b { font-synthesis: weight style; font-weight: 700; }
em { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--action); color: var(--bone); }

/* 4. Utilidades y tipografía */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--bone); color: var(--ink); padding: 0.75rem 1rem; }
.skip:focus { top: 1rem; }

.display {
  font-family: var(--font-display);
  font-size: var(--display-2);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.display--xl { font-size: var(--display-1); }
.h2 {
  font-family: var(--font-display);
  font-size: var(--display-3);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}
.h3 { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.15; margin-bottom: 0.5rem; }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--bone-2); max-width: 38rem; }
[data-theme="light"] .lead, .paper .lead { color: var(--ink-muted); }

.paper { background: var(--paper); color: var(--ink-text); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--accent-text); margin-top: 1rem;
}
.link-arrow svg { transition: transform 400ms var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* 5. Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.85rem 1.6rem;
  font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color 250ms, border-color 250ms, color 250ms;
}
.btn--red { background: var(--action); color: var(--bone); }
.btn--red:hover { background: var(--action-hover); }
.btn--buy { border-radius: var(--radius-buy); }
.btn--line { border-color: rgb(234 232 214 / 0.45); color: var(--bone); background: transparent; }
.btn--line:hover { border-color: var(--bone); background: rgb(234 232 214 / 0.06); }
.paper .btn--line { border-color: rgb(0 0 0 / 0.4); color: var(--ink-text); }
.btn--sm { min-height: 40px; padding: 0.55rem 1.1rem; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* 6. Encabezado */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  transition: background-color 400ms, box-shadow 400ms;
}
.site-header.is-solid, [data-theme="light"] .site-header {
  background: rgb(0 0 0 / 0.94);
  box-shadow: 0 1px 0 rgb(234 232 214 / 0.08);
}
/* El desenfoque va en una capa aparte (::before): puesto en el propio encabezado,
   backdrop-filter encierra al menú móvil (position: fixed) dentro de la franja del
   encabezado y el menú se ve recortado, por debajo del contenido. */
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-solid { background: none; }
  .site-header.is-solid::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgb(0 0 0 / 0.82); backdrop-filter: blur(14px);
  }
}
.site-header__inner {
  height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 2rem; color: var(--bone);
}
.brand img { height: 59px; width: auto; }  /* incluye el trazo bajo de la "g" */
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  font-size: 0.875rem; letter-spacing: 0.04em; text-decoration: none; padding-block: 0.5rem;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat;
  transition: background-size 400ms var(--ease-out);
}
.nav__list a:hover, .nav__list a[aria-current="page"] { background-size: 100% 2px; }
.nav__foot { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.lang {
  font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.1em; text-decoration: none;
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
}
.lang:hover { color: var(--accent-text); }
/* Redes en el encabezado: solo el ícono, sin aro, con área de toque de 40px */
.social.social--header { margin: 0; gap: 0; }
.social.social--header a { width: 40px; height: 40px; border: 0; }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--bone); }
.menu-toggle__close { display: none; }

@media (max-width: 959px) {
  .menu-toggle { display: inline-grid; place-items: center; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
  .header-buy { display: none; }
  /* Celular y tablet: redes, idioma y menú juntos en el extremo derecho;
     el ícono del menú se alinea con el margen (su relleno queda fuera). */
  .site-header__inner { gap: 1rem; }
  .site-header__actions { margin-left: auto; gap: 0.25rem; }
  .menu-toggle { margin-right: -10px; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; background: var(--ink);
    padding: 2rem var(--gutter) 3rem; display: flex; flex-direction: column; justify-content: space-between;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out), visibility 0s 350ms;
    overflow-y: auto;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0.25rem; }
  .nav__list a { font-family: var(--font-head); font-size: 2.5rem; letter-spacing: 0; line-height: 1.3; }
  .nav__foot { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
  .nav__mail { display: inline-flex; gap: 0.6rem; align-items: center; color: var(--bone-2); text-decoration: none; }
  .brand img { height: 47px; }
}
/* Celulares angostos: logo y botones un poco más compactos para que todo quepa */
@media (max-width: 379px) {
  .brand img { height: 40px; }
  .social.social--header a { width: 36px; }
  .lang { min-width: 38px; }
}
html.menu-open { overflow: hidden; }

/* 7. Home */
.hero {
  position: relative; isolation: isolate; min-height: max(640px, 100svh);
  display: grid; align-items: center; padding-block: calc(var(--header-h) + 2rem) 3rem; overflow: hidden;
}
.hero__bg, .page-hero__bg, .band__bg, .closer__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img, .page-hero__bg img, .band__bg img, .closer__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Desenfoque ligero del fondo; se amplía un poco para que el borde difuso quede fuera del hero */
.hero__bg img { object-position: 60% 50%; filter: blur(4px); transform: scale(1.03); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.94) 0%, rgb(0 0 0 / 0.72) 45%, rgb(0 0 0 / 0.35) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 30%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 2rem; }
.hero__text .lead { margin-top: 1.75rem; }
.facts {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 2.5rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid rgb(234 232 214 / 0.18); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-2);
}
.facts li + li::before { content: ""; display: inline-block; width: 1.5rem; height: 1px; margin: 0 1rem; vertical-align: middle; background: var(--accent); }
.hero__bottle { position: relative; display: grid; justify-items: center; }
/* Foto de estudio (Multimedia/Botella.png): los bordes se funden con el fondo del hero */
.hero__bottle img {
  height: min(74vh, 720px); width: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 899px) {
  .hero { align-items: end; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__bottle { order: -1; }
  .hero__bottle img { height: min(42svh, 380px); }
  .hero::before { background: linear-gradient(0deg, var(--ink) 20%, rgb(0 0 0 / 0.7) 60%, rgb(0 0 0 / 0.45) 100%); }
}
@media (max-width: 560px) {
  /* En móvil las listas con separador se apilan para que ningún guion quede al inicio de línea */
  .facts { flex-direction: column; gap: 0.35rem; }
  .facts li + li::before { display: none; }
  .steps-line { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; counter-reset: paso; }
  .steps-line li { counter-increment: paso; font-size: var(--step-1); }
  .steps-line li::before, .steps-line li + li::before {
    content: counter(paso, decimal-leading-zero); display: inline; width: auto; height: auto; background: none;
    margin: 0 0.6rem 0 0; font-family: var(--font-text); font-size: 0.75rem; color: var(--accent-text); vertical-align: 0.2em;
  }
  .actions .btn { flex: 1 1 100%; }
}

/* Premios */
.awards { padding-block: clamp(3.5rem, 6vw, 6rem); }
/* Portada: el negro del hero se disuelve en el papel en vez de cortarse en una línea.
   Las paradas siguen una curva suave para que no se note dónde empieza ni dónde acaba. */
.hero + .awards {
  --fade: clamp(8rem, 18vw, 15rem);
  padding-block: calc(var(--fade) + 1rem);
  background:
    linear-gradient(to top, rgb(0 0 0) 0%, rgb(0 0 0 / 0.86) 12%, rgb(0 0 0 / 0.66) 26%, rgb(0 0 0 / 0.44) 41%, rgb(0 0 0 / 0.25) 56%, rgb(0 0 0 / 0.11) 71%, rgb(0 0 0 / 0.03) 86%, transparent 100%) 0 100% / 100% var(--fade) no-repeat,
    linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(0 0 0 / 0.86) 12%, rgb(0 0 0 / 0.66) 26%, rgb(0 0 0 / 0.44) 41%, rgb(0 0 0 / 0.25) 56%, rgb(0 0 0 / 0.11) 71%, rgb(0 0 0 / 0.03) 86%, transparent 100%) 0 0 / 100% var(--fade) no-repeat,
    var(--paper);
}
.awards__title { text-align: center; max-width: 22ch; margin-inline: auto; margin-bottom: 3rem; }
.awards__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.award { text-align: center; }
.award__img img { mix-blend-mode: multiply; width: 100%; aspect-ratio: 1366 / 1110; object-fit: contain; }
/* Elevación al pasar el cursor: la medalla sube y aparece su sombra en el papel.
   El transform va en el <img> (no en <picture>) para no romper el mix-blend-mode. */
.award__img { position: relative; }
.award__img::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -4%; height: 12%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / 0.38), transparent 100%);
  opacity: 0; transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.award__img img { transition: transform 450ms var(--ease-out); }
@media (hover: hover) {
  .award:hover .award__img img { transform: translateY(-10px) scale(1.05); }
  .award:hover .award__img::after { opacity: 1; transform: scale(0.86); }
}
@media (prefers-reduced-motion: reduce) {
  .award__img img, .award__img::after { transition: none; }
}
.award__medal { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.1; margin: 0.75rem 0 0.25rem; }
.award__event { font-size: var(--step--1); color: var(--ink-muted); line-height: 1.45; margin: 0; }
.awards--compact { padding-block: 2.5rem; }
.awards--compact .awards__list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.5rem 1rem; }
@media (max-width: 899px) {
  .awards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards--compact .awards__list { grid-template-columns: repeat(4, 1fr); }
}

/* Bloques imagen + texto */
.split { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: stretch; }
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; height: 100%; min-height: min(78vh, 720px); object-fit: cover; }
/* El trabajador ocupa la foto de arriba abajo: al recortar se conserva la cabeza */
.story .split__media img { object-position: 50% 0; }
/* Fotos redondeadas, con margen para que las esquinas no toquen el borde de la pantalla */
.story .split__media, .serve .split__media, .impact .split__media { padding: clamp(0.75rem, 2vw, 1.5rem); }
.story .split__media img, .serve .split__media img, .impact .split__media img { border-radius: var(--radius-img); }
.split__text { align-self: center; padding: var(--section) var(--gutter); max-width: 38rem; }
.split__text p { color: var(--bone-2); }
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media img { min-height: 0; aspect-ratio: 4 / 3; }
  .split__text { padding-block: 3rem var(--section); }
}

/* Comercial: se reproduce solo al entrar en pantalla; botones de pausa y sonido */
.film { padding-block: var(--section); }
.film .lead { margin-top: 1rem; }
.film__frame { position: relative; margin-top: clamp(2rem, 4vw, 3rem); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-img); background: var(--ink-2); }
.film__frame video { cursor: pointer; display: block; width: 100%; height: 100%; object-fit: cover; }
.film__controls { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: 0.5rem; }
.film__controls[hidden] { display: none; }
.film__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid rgb(234 232 214 / 0.45); border-radius: 50%; background: rgb(0 0 0 / 0.6); color: var(--bone);
  transition: background-color 250ms, border-color 250ms;
}
.film__btn:hover { border-color: var(--bone); background: rgb(0 0 0 / 0.85); }
.film__icon { display: grid; }
.film__btn[aria-pressed="true"] .film__icon--off, .film__btn[aria-pressed="false"] .film__icon--on { display: none; }
@media (max-width: 560px) {
  .film__controls { right: 0.5rem; bottom: 0.5rem; }
}

/* Recurso gráfico del manual: el bule en Chalet Green */
.bule { width: 44px; height: auto; margin-bottom: 1.5rem; }

/* Cata */
.tasting { padding-block: var(--section); background: var(--ink-2); }
.tasting__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.tasting__img { margin-top: 2.5rem; }
.tasting__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-img); }
.notes { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.note { border-top: 1px solid var(--ink-3); padding-block: 1.75rem 2rem; }
.note__icon { width: auto; height: 64px; margin-bottom: 1rem; }
.note dt { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.1; margin-bottom: 0.5rem; }
.note dd { margin: 0; color: var(--bone-2); }
.tasting--compact .h2 { margin-bottom: 2rem; }
.notes--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) {
  .tasting__grid { grid-template-columns: 1fr; }
  .notes--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .notes, .notes--row { grid-template-columns: 1fr; } }

/* Franja del proceso */
.band { position: relative; isolation: isolate; padding-block: calc(var(--section) * 1.3); overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 0.92) 25%, rgb(81 115 60 / 0.55)); }
.band__text { max-width: 1280px; }
.band__text > p { max-width: 40rem; color: var(--bone-2); font-size: var(--step-1); }
.steps-line { list-style: none; padding: 0; margin: 2.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem 0; }
.steps-line li { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.2; }
.steps-line li + li::before { content: ""; display: inline-block; width: clamp(1rem, 3vw, 2.5rem); height: 1px; margin-inline: 0.9rem; vertical-align: middle; background: var(--accent); }

/* Cita del maestro */
.quote-block { padding-block: var(--section); }
.quote-block__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.quote-block__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% 50%; border-radius: var(--radius-img); }
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-head); font-size: var(--step-3); line-height: 1.12;
}
.quote blockquote p::before { content: "“"; color: var(--action); }
.quote blockquote p::after { content: "”"; color: var(--action); }
.quote figcaption { display: grid; gap: 0.15rem; margin-top: 2rem; }
.quote figcaption span { color: var(--bone-2); font-size: var(--step--1); letter-spacing: 0.06em; }
@media (max-width: 899px) {
  .quote-block__grid { grid-template-columns: 1fr; }
  .quote-block__img img { aspect-ratio: 4 / 3; }
}

/* Dos puertas: comprar / distribuir */
.doors { padding-top: var(--section); }
.doors__title { margin-bottom: 2.5rem; }
.doors__grid { display: grid; grid-template-columns: 1fr 1fr; }
.door { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(80vh, 720px); overflow: hidden; text-decoration: none; }
.door picture { position: absolute; inset: 0; z-index: -2; }
.door img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
/* El brindis: en pantallas anchas el recorte se ancla arriba para no cortar la cabeza */
.door--trade img { object-position: 50% 4%; }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / 0.95) 10%, rgb(0 0 0 / 0.2) 70%); }
.door:hover img { transform: scale(1.04); }
.door__text { display: grid; gap: 0.75rem; padding: clamp(1.5rem, 4vw, 3.5rem); max-width: 32rem; }
.door__title { font-family: var(--font-head); font-size: var(--step-3); line-height: 1.05; }
.door__body { color: var(--bone-2); }
.door__cta { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.door + .door { border-left: 1px solid var(--ink); }
@media (max-width: 799px) {
  .doors__grid { grid-template-columns: 1fr; }
  .door { min-height: 70svh; }
  .door + .door { border-left: 0; border-top: 1px solid var(--ink); }
}

/* 8. Páginas interiores */
.page-hero {
  position: relative; isolation: isolate; min-height: max(560px, 78svh);
  display: grid; align-items: end; padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 7vw, 6rem); overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ink) 5%, rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0.35) 100%); }
.page-hero__text .lead { margin-top: 1.5rem; }
.page-hero--plain { min-height: 80svh; }
.page-hero--plain::before { display: none; }

/* Proceso */
.steps { padding-block: var(--section); }
.steps__list { list-style: none; margin: 0 auto; display: grid; gap: clamp(4rem, 10vw, 8rem); }
.step { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.step:nth-child(even) .step__img { order: 2; }
.step__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-img); }
.step__n { font-size: var(--step--1); font-weight: 400; letter-spacing: 0.12em; color: var(--accent-text); font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.step__n span { color: var(--bone-2); font-weight: 400; }
.step__text p:last-child { color: var(--bone-2); }
@media (max-width: 899px) {
  .step { grid-template-columns: 1fr; }
  .step:nth-child(even) .step__img { order: 0; }
}
.closer { position: relative; isolation: isolate; padding-block: calc(var(--section) * 1.5); text-align: center; overflow: hidden; }
.closer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.72); }
.closer .lead { margin-inline: auto; margin-top: 1rem; }
.closer .actions { justify-content: center; }

/* Maestro */
.chapters { display: grid; }
.chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.chapter--reverse .chapter__img { order: 2; }
/* Margen para que las esquinas redondeadas no toquen el borde de la pantalla */
.chapter__img { align-self: stretch; padding: clamp(0.75rem, 2vw, 1.5rem); }
.chapter__img img { width: 100%; height: 100%; min-height: min(80vh, 680px); object-fit: cover; border-radius: var(--radius-img); }
.chapter__text { padding: var(--section) var(--gutter); max-width: 40rem; }
.chapter__quote { margin: 0; }
.chapter__quote p { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.3; color: var(--bone); }
.chapter__quote p + p { color: var(--bone-2); }
@media (max-width: 899px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter--reverse .chapter__img { order: 0; }
  .chapter__img img { min-height: 0; aspect-ratio: 4 / 3; }
  .chapter__text { padding-block: 3rem 4rem; }
}
.final-word { padding-block: var(--section); background: var(--ink-2); text-align: center; }
.final-word__inner { max-width: 54rem; }
.final-word blockquote { margin: 0; }
.final-word blockquote p { font-family: var(--font-head); font-size: var(--step-3); line-height: 1.15; }
.final-word__sig { color: var(--accent-text); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--step--1); font-weight: 400; }
.final-word .actions { justify-content: center; }

/* Nosotros */
.values { padding-block: var(--section); }
.values__list { margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 6vw, 6rem); }
.values__list > div { border-top: 1px solid var(--ink-3); padding-block: 1.75rem 2rem; }
.values__list dt { font-family: var(--font-head); font-size: var(--step-2); margin-bottom: 0.5rem; }
.values__list dd { margin: 0; color: var(--bone-2); max-width: 32rem; }
.mv { padding-block: var(--section); }
.mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.mv p { color: var(--ink-muted); font-size: var(--step-1); line-height: 1.6; }
@media (max-width: 767px) {
  .values__list, .mv__grid { grid-template-columns: 1fr; }
}

/* Comprar */
.product { padding-block: calc(var(--header-h) + 3rem) var(--section); }
.product .lead { margin-top: 1rem; }
/* Catálogo: una tarjeta por mezcal, lado a lado para comparar y escoger */
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-block: clamp(2rem, 4vw, 3rem); }
.bottle { display: flex; flex-direction: column; }
.bottle__stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; overflow: hidden; margin-bottom: 1.75rem;
  border-radius: var(--radius-img);
  background: radial-gradient(60% 55% at 50% 60%, rgb(81 115 60 / 0.32) 0%, var(--ink-2) 70%);
}
.bottle__stage picture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bottle__stage img { height: 86%; width: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.55)); }
/* Fotos de botella con fondo propio (formato 2:3, se ve la botella completa y el suelo) */
.bottle__stage--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; }
.bottle__badge {
  position: absolute; top: 1rem; left: 1rem; margin: 0; padding: 0.45rem 0.8rem;
  background: var(--action); color: var(--bone); border-radius: var(--radius-buy);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.bottle__title { margin-bottom: 0.75rem; }
/* Título con medalla al lado (Altar de Muerto) */
.bottle__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.bottle__head .bottle__title { margin-bottom: 0; }
.bottle__medal { flex: none; }
.bottle__medal img { display: block; width: clamp(56px, 6vw, 80px); height: auto; }
.bottle__lead { font-size: var(--step-1); line-height: 1.5; color: var(--bone); margin: 0; }
.bottle__text { color: var(--bone-2); margin: 1rem 0 0; }
.bottle .specs { margin: 2rem 0; }
.bottle .btn { margin-top: auto; }
@media (max-width: 759px) {
  .catalog { grid-template-columns: 1fr; gap: 4rem; }
}
.btn svg { flex: none; }
.specs { margin: 2.5rem 0; border-top: 1px solid var(--ink-3); }
.specs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.9rem; border-bottom: 1px solid var(--ink-3); }
.specs dt { color: var(--bone-2); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.15em; }
.specs dd { margin: 0; }
/* Datos pendientes: visibles a propósito para que no se publiquen sin completar */
.specs .is-placeholder dd { color: var(--accent-text); font-style: italic; outline: 1px dashed var(--accent); outline-offset: 4px; }
.order { background: var(--ink-2); padding: clamp(1.5rem, 4vw, 2.5rem); }
.order p { color: var(--bone-2); }
.order .btn { margin-top: 0.5rem; }
.order__legal { font-size: var(--step--1); margin: 1.25rem 0 0; }
@media (max-width: 899px) {
  .specs > div { grid-template-columns: 7.5rem 1fr; }
}

/* Distribuidores */
.reasons { padding-block: var(--section); }
.reasons__list { margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.reasons__list > div { border-top: 1px solid var(--ink-3); padding-top: 1.75rem; }
.reasons__list dt { font-family: var(--font-head); font-size: var(--step-2); margin-bottom: 0.5rem; }
.reasons__list dd { margin: 0; color: var(--bone-2); }
@media (max-width: 899px) { .reasons__list { grid-template-columns: 1fr; gap: 2rem; } }

/* 9. Formulario */
.form-section { padding-block: var(--section); }
.form-section__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.form-section__grid > div p { color: var(--ink-muted); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-bottom: 2rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem;
  background: var(--paper-2); color: var(--ink-text);
  border: 1px solid rgb(0 0 0 / 0.32); border-radius: 2px;
  transition: border-color 200ms;
}
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(0 0 0 / 0.6); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { color: var(--error); font-size: var(--step--1); margin: 0; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.field--check input { width: 22px; height: 22px; min-height: 0; margin-top: 0.15rem; accent-color: var(--action); }
.field--check label { font-weight: 400; font-size: var(--step-0); }
.field--check .field__error { grid-column: 2; }
.form__trap { position: absolute; left: -9999px; }
.form__status { margin-top: 1rem; font-weight: 400; }
.form__status.is-error { color: var(--error); }
@media (max-width: 767px) {
  .form-section__grid, .form__grid { grid-template-columns: 1fr; }
}

/* 10. Legal */
.legal { padding-block: calc(var(--header-h) + 4rem) var(--section); }
.legal__inner { max-width: 50rem; }
.legal .display { font-size: var(--display-2); margin-bottom: 2rem; }
.legal__note { background: var(--paper-2); padding: 1rem 1.25rem; color: var(--ink-muted); }
.legal__body { max-width: 70ch; overflow-wrap: anywhere; } /* direcciones web largas en pantallas angostas */
.legal__body h2 { font-family: var(--font-display); font-size: var(--step-2); margin: 2.5rem 0 1rem; }
.legal__body h3 { font-family: var(--font-head); font-size: var(--step-2); margin: 2.25rem 0 0.75rem; }
.legal__body p, .legal__body li { color: var(--ink-muted); }
.legal__body ul, .legal__body ol { padding-left: 1.25rem; margin: 0 0 1em; }
.legal__body table { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; font-size: var(--step--1); }
.legal__body td, .legal__body th { border: 1px solid rgb(0 0 0 / 0.2); padding: 0.5rem; vertical-align: top; }
[data-theme="light"] .site-footer { margin-top: 0; }

/* 11. Verificación de edad */
.age {
  width: min(30rem, calc(100% - 2rem)); padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
  border: 1px solid rgb(81 115 60 / 0.3); background: var(--ink); color: var(--bone); text-align: center;
}
.age::backdrop { background: rgb(0 0 0 / 0.86); backdrop-filter: blur(12px); }
.age__logo { width: 96px; height: auto; margin: 0 auto 1.75rem; }
.age__title { font-family: var(--font-display); font-size: var(--display-3); line-height: 1.1; margin-bottom: 1rem; }
.age__text { color: var(--bone-2); }
.age__actions { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; margin: 2rem 0 1rem; }
.age__denied { color: var(--accent-text); }
.age__note { font-size: 0.8125rem; color: var(--bone-2); margin: 0; }

/* 12. Pie de página */
.site-footer { background: var(--ink); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; border-top: 1px solid var(--ink-3); color: var(--bone); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 2.5rem; }
.site-footer__mark { width: 88px; height: auto; opacity: 0.9; margin-bottom: 1.5rem; }
.site-footer .site-footer__tagline { color: var(--bone); font-family: var(--font-head); font-size: var(--step-2); line-height: 1.2; max-width: 16ch; }
.site-footer__h { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 0.75rem; }
.site-footer__h:not(:first-child) { margin-top: 2rem; }
.site-footer p, .site-footer li { font-size: 0.9375rem; color: var(--bone-2); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--bone); text-decoration: underline; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.social { display: flex; gap: 0.5rem; }
.social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink-3); border-radius: 50%; color: var(--bone); }
.social a:hover { border-color: var(--accent); color: var(--accent-text); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-3); }
.site-footer__base p { font-size: 0.8125rem; margin: 0; }
@media (max-width: 767px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* 13. Movimiento: un solo momento, la botella emerge del humo */
@media (prefers-reduced-motion: no-preference) {
  .hero__bottle picture { animation: emerge 1.8s var(--ease-out) 0.15s both; }
  .hero__text > * { animation: rise 1s var(--ease-out) both; }
  .hero__text > :nth-child(2) { animation-delay: 0.12s; }
  .hero__text > :nth-child(3) { animation-delay: 0.24s; }
  .hero__text > :nth-child(4) { animation-delay: 0.36s; }
  .hero__bg img { animation: drift 24s ease-in-out infinite alternate; }
}
@keyframes emerge {
  from { clip-path: inset(100% 0 0 0); filter: blur(10px); transform: translateY(24px); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.06) translateX(0); } to { transform: scale(1.12) translateX(-1.5%); } }