/* AMATERRA · home. Tokens en :root; los componentes solo leen tokens. */

/* Tipografía del sistema de Apple (SF Pro): se usa la que tenga cada dispositivo, sin archivos */

:root {
  /* Sistema de movimiento común: tres duraciones y dos curvas para todo el sitio.
     Lo atado al scroll no usa estos valores: sigue la posición del scroll (sin tiempo fijo). */
  --mov-corta: 0.4s;    /* respuestas: botones, enlaces, cursor, pastillas */
  --mov-media: 0.8s;    /* entradas de elementos y aparición de textos */
  --mov-larga: 1.2s;    /* cambios de escena y fundidos grandes */
  --ease-estandar: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --bg: #F8F8F8;
  --surface: #F8F8F8;
  --ink: #2B2620;
  --muted: #6B6257;
  --forest: #2F4A3A;
  --forest-deep: #1F3128;
  --birch: #D9BE94;
  --line: #D8CFBE;
  --radius: 14px;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  /* Textura de grano: oscura sobre fondos claros, clara sobre el bosque */
  --tex-light: none;
  --tex-dark: none;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }
/* Al ir a una sección desde el menú, el título no queda debajo del navbar flotante */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--tex-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

img, video { max-width: 100%; display: block; }
p { margin: 0 0 1em; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0.35em 0 0.3em;
  color: var(--forest);
}
h1 { font-size: clamp(2.9rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-size: 1.4rem; }

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

.wrap { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }

section { padding: clamp(72px, 10vw, 140px) 0; }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 600;
}
.eyebrow--light { color: var(--forest); }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 52ch;
}

.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--forest);
}
.logo--foot { font-size: 1.1rem; margin-bottom: 0.5rem; }
.logo img { display: block; height: 40px; width: auto; }
@media (max-width: 520px) {
  .logo img { height: 34px; }
}

.text-link { color: var(--forest); font-weight: 600; }

/* Botones */
/* Botones: un solo diseño de vidrio, igual que el navbar. Los nombres de clase se conservan para el texto de compra y el cursor */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px rgba(43, 38, 32, 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--mov-corta), box-shadow var(--mov-corta), background-color var(--mov-corta);
}
.btn:hover {
  background-color: color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(43, 38, 32, 0.12);
}
.btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.btn__icono { display: inline-flex; margin-left: 0.4rem; }
.btn__icono svg { display: block; }

/* Add to cart: borde de luz LED que gira alrededor del botón, con un halo verde que lo despega del fondo claro */
@property --led-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn--web { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(38, 60, 29, 0.25), 0 0 22px rgba(38, 60, 29, 0.28); color: #263C1D; }
.btn--web::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--led-angulo), #263C1D, #FFFFFF 12%, #263C1D 28%, #FFFFFF 45%, #263C1D 62%, #FFFFFF 78%, #263C1D); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: drop-shadow(0 0 6px rgba(38, 60, 29, 0.55)); animation: led-gira 4s linear infinite; }
.btn--web:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(38, 60, 29, 0.35), 0 0 30px rgba(38, 60, 29, 0.4); }
.btn--web:hover::before { filter: drop-shadow(0 0 10px rgba(38, 60, 29, 0.8)); }
@keyframes led-gira { to { --led-angulo: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn--web::before { animation: none; } }

/* Placeholders: se quitan cuando haya foto o video real */
.ph {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  padding: 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 34ch;
}
.ph--video { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 9; margin-top: 56px; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }

/* Header */
.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 50;
}
/* Navbar flotante de vidrio (receta de mandorla-web-interactiva, con la paleta de AMATERRA) */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 64px;
  padding: 0 14px 0 24px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px rgba(43, 38, 32, 0.08);
}
.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  overflow: visible;
  position: relative;
  z-index: 1;
  transition: opacity var(--mov-corta), max-width var(--mov-corta);
}
.nav__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
  padding: 10px 20px;
  transition: opacity var(--mov-corta), color var(--mov-corta);
}
/* Hover progresivo: el resto de los links baja de intensidad */
.nav__links:hover a { opacity: 0.45; }
.nav__links a:hover { opacity: 1; color: var(--forest); }
/* Pastilla de hover: se desliza hasta el link en el que está el cursor */
.nav__hover {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(43, 38, 32, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: left var(--mov-corta) var(--ease-estandar), width var(--mov-corta) var(--ease-estandar), opacity var(--mov-corta);
}
.nav__hover.is-on { opacity: 1; }
/* Botón de menú: solo se ve en celular */
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid rgba(43, 38, 32, 0.2);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.cart {
  position: relative;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  display: block;
}
.cart img {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}
.cart__count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.cart__count.bump { animation: bump var(--mov-corta) ease; }
@keyframes bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Portada: crema mate con aurora verde y bokeh (manual 3.4), composición asimétrica, botón doble y sellos */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 100px 0 24px;
  background-color: #F8F8F8;
  background-image: var(--tex-light);
  color: var(--forest);
}
.hero__fondo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__aurora,
.hero__bokeh { position: absolute; display: block; will-change: transform; }
.hero__aurora {
  border-radius: 50%;
  filter: blur(70px);
  animation: respira 14s ease-in-out infinite;
}
.hero__aurora--a { width: 62vw; height: 62vw; left: -20vw; top: -26vw; background: radial-gradient(circle, rgba(47, 74, 58, 0.78), rgba(47, 74, 58, 0) 68%); }
.hero__aurora--b { width: 52vw; height: 52vw; right: -18vw; bottom: -24vw; background: radial-gradient(circle, rgba(94, 128, 88, 0.6), rgba(94, 128, 88, 0) 68%); animation-duration: 18s; animation-delay: -6s; }
.hero__aurora--c { width: 34vw; height: 34vw; right: 6vw; top: -10vw; background: radial-gradient(circle, rgba(168, 196, 154, 0.5), rgba(168, 196, 154, 0) 70%); animation-duration: 22s; animation-delay: -12s; }
.hero__bokeh { border-radius: 50%; filter: blur(18px); animation: respira 9s ease-in-out infinite; }
.hero__bokeh--a { width: 13vw; height: 13vw; left: 8vw; bottom: 18vh; background: radial-gradient(circle, rgba(120, 160, 110, 0.55), rgba(120, 160, 110, 0.08) 70%); }
.hero__bokeh--b { width: 8vw; height: 8vw; left: 30vw; top: 16vh; background: radial-gradient(circle, rgba(140, 180, 130, 0.5), rgba(140, 180, 130, 0.06) 70%); animation-duration: 11s; }
.hero__bokeh--c { width: 10vw; height: 10vw; right: 22vw; bottom: 12vh; background: radial-gradient(circle, rgba(47, 74, 58, 0.4), rgba(47, 74, 58, 0.05) 70%); animation-duration: 13s; animation-delay: -4s; }
@keyframes respira {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; text-align: left; }
/* Título central de la portada: centrado en pantalla, en Argesta */
.hero__cabecera { position: relative; z-index: 1; text-align: center; }
.font-argesta { font-family: var(--font-display); }
.hero__eyebrow { color: var(--forest); margin-bottom: 14px; }
.hero h1 { color: var(--forest); font-size: clamp(2.4rem, 4.8vw, 4.6rem); max-width: none; margin: 0 auto 0.3em; text-align: center; }
.hero__sub { font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: 0.02em; color: var(--forest); max-width: 44ch; margin-inline: auto; }
.hero__tarjetas { position: relative; height: clamp(240px, 27vw, 310px); max-width: 900px; width: 100%; margin: 0 auto; }
.tarjeta {
  position: absolute;
  margin: 0;
  padding: 12px;
  border-radius: 3rem;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 50px rgba(27, 51, 34, 0.18);
  transition: transform var(--mov-media) var(--ease-estandar);
  will-change: transform;
}
.tarjeta .ph { height: 100%; border-radius: 2.4rem; }
.tarjeta--picnic { right: 0; top: 0; width: 72%; height: 78%; }
.tarjeta--detalle { left: 0; bottom: 0; width: 46%; height: 52%; }
.hero__acciones { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero__sellos {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(43, 38, 32, 0.12);
}
.hero__sellos .badge svg { width: 34px; height: 34px; }
.hero__sellos .badge strong { font-size: 0.82rem; letter-spacing: 0.04em; }
.hero__sellos .badge span { font-size: 0.78rem; }
@media (min-width: 760px) {
  .hero__sellos { grid-template-columns: repeat(4, 1fr); }
}
.mask { display: inline-block; overflow: hidden; vertical-align: top; }
.line { display: inline-block; }
.closing__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; justify-content: center; }

/* Sellos de confianza (la fila vive al pie del hero) */
.badge { display: flex; gap: 12px; align-items: flex-start; }
.badge svg { flex: none; width: 64px; height: 64px; fill: none; stroke: var(--forest); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.badge strong { display: block; font-weight: 600; }
.badge span { font-size: 0.9rem; color: var(--muted); }

/* Problem */
.problem h2 { max-width: 16ch; }
.list { list-style: none; margin: 40px 0 0; padding: 0; max-width: 60ch; }
.list li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
}

/* Proposition */
.proposition { background-color: var(--bg); background-image: var(--tex-light); position: relative; overflow: hidden; }
.proposition .wrap { position: relative; z-index: 1; }
.statement {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  line-height: 1.04;
  max-width: 18ch;
  margin: 0.2em 0 0.4em;
}

/* Product */
.product h2 { margin-bottom: 0.2em; }
.compartments { display: grid; gap: 16px; margin-top: 48px; }
.compartment {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
}
.compartment .num {
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--forest);
}
.compartment p { color: var(--muted); margin: 0; }
.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0 0;
}
.specs dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.specs dd { margin: 4px 0 0; font-size: 1.05rem; font-weight: 500; }

/* Calculadora */
.calc {
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 56px);
}
.calc__grid { display: grid; gap: 40px; }
.calc__form { display: grid; gap: 20px; align-content: start; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
}
.calc__result {
  padding: 24px;
  background: rgba(58, 86, 48, 0.62);
  color: #F2EBDB;
  border-radius: var(--radius);
}
.calc__big {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  margin: 0 0 0.4em;
  color: #F2EBDB;
}
.calc__result p:last-child { margin: 0; color: rgba(242, 235, 219, 0.82); }
/* Recuadro de fondo con anillos para destacar el resultado (manual, sección 3.5) */
.calc__result { background-image: var(--tex-panel-light); }


/* Reel */
.reel { background-color: var(--surface); background-image: var(--tex-light); }
.reel h2 { margin-bottom: 40px; }
.reel__grid { display: grid; gap: 16px; }

/* Wood */
.wood__grid { display: grid; gap: 48px; align-items: center; }
.wood .lead + p { margin-top: 1em; }
/* Dibujos de anillos (manual, sección 3.5): uno por sección, de acompañamiento */
.dib { color: var(--forest); pointer-events: none; }
.dib svg { width: 100%; height: 100%; display: block; }
.dib--madera {
  width: min(220px, 60vw);
  aspect-ratio: 1;
  margin: 0 0 28px;
}
.dib--proposicion {
  position: absolute;
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  width: min(620px, 95vw);
  aspect-ratio: 1;
  opacity: 0.16;
}

/* Choice (directo o Amazon) */
.choice { background-color: var(--bg); background-image: var(--tex-light); }
.choice h2 { margin-bottom: 40px; }
.choice__grid { display: grid; gap: 16px; }
.choice__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.choice__card p { color: var(--muted); }
.choice__card .btn { margin-top: auto; }

/* Catering */
.catering { background-color: var(--surface); background-image: var(--tex-light); }
.catering__grid { display: grid; gap: 48px; align-items: center; }

/* FAQ */
.faq__wrap { display: grid; gap: 40px; }
.faq__list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--forest); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 14px 0 0; color: var(--muted); max-width: 60ch; }

/* Cierre */
.closing {
  text-align: center;
  padding-bottom: clamp(96px, 12vw, 160px);
  background-color: #F8F8F8;
  background-image: none;
  color: var(--ink);
}
.closing h2 { max-width: 16ch; margin-inline: auto; color: var(--ink); }
.closing__actions { justify-content: center; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0; font-size: 0.92rem; color: var(--muted); }
.foot__grid { display: grid; gap: 32px; }
.foot address { font-style: normal; }
.foot a { color: var(--ink); }
.foot__small { margin: 0; }

/* Breakpoints */
@media (min-width: 760px) {
  .reel__grid { grid-template-columns: repeat(3, 1fr); }
  .calc__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .compartments { grid-template-columns: repeat(3, 1fr); }
  .choice__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .wood__grid { grid-template-columns: 1fr 1fr; }
  .catering__grid { grid-template-columns: 1fr 1fr; }
  .faq__wrap { grid-template-columns: 1fr 1.4fr; gap: 64px; }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .nav__links { gap: 1.2rem; }
  .nav__links a { padding: 10px 12px; }
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; align-items: center; }
  .nav__hover { display: none; }
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-width: none;
    overflow: visible;
    padding: 18px 24px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(43, 38, 32, 0.12);
    box-shadow: 0 10px 30px rgba(43, 38, 32, 0.12);
  }
  .nav__links.is-open a { font-size: 1.05rem; opacity: 1; }
}

@media (max-width: 520px) {
  .specs { grid-template-columns: 1fr; }
  .ph--video { aspect-ratio: 4 / 5; }
}

/* Canales de compra por volumen (texto migrado de la web anterior) */
.canales { display: grid; gap: 28px; margin-top: 40px; }
.canales h3 { font-size: 1.2rem; margin: 0 0 0.3em; }
.canales p { color: var(--muted); margin: 0 0 0.6em; }
@media (min-width: 760px) {
  .canales { grid-template-columns: repeat(3, 1fr); }
}

/* Ficha técnica desplegable: inventario original del producto y el empaque */
.ficha { margin-top: 40px; border-top: 1px solid var(--line); }
.ficha summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.ficha summary::-webkit-details-marker { display: none; }
.ficha summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--forest); }
.ficha[open] summary::after { content: "–"; }
.ficha dl { display: grid; gap: 14px 28px; grid-template-columns: 1fr; margin: 0 0 24px; }
.ficha dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.ficha dd { margin: 4px 0 0; }
.ficha .nota { font-size: 0.85rem; color: var(--muted); }
@media (min-width: 760px) {
  .ficha dl { grid-template-columns: repeat(2, 1fr); }
}

/* Pie: texto de privacidad y de tolerancias */
.foot__small p { margin: 0 0 0.8em; }

/* Políticas de compra: una sola sección, enlazada desde el pie */
.politicas { background-color: var(--surface); background-image: var(--tex-light); }
.politicas h2 { margin-bottom: 40px; }
.politicas__grid { display: grid; gap: 32px; }
.politicas h3 { font-size: 1.2rem; margin: 0 0 0.4em; }
.politicas p { color: var(--muted); }
.politicas .nota { font-size: 0.85rem; }
@media (min-width: 900px) {
  .politicas__grid { grid-template-columns: repeat(3, 1fr); }
}
.foot__links a { text-decoration: underline; text-underline-offset: 3px; }

/* Portada minimalista: video de fondo, título centrado y logo en píldora de vidrio */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background-color: #F8F8F8;
  background-image: none;
  background-size: cover;
  background-position: center;
  color: var(--ink);
  text-align: center;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__velo { position: absolute; inset: 0; background: transparent; z-index: 1; }
.hero__centro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.hero h1 { color: var(--ink); font-size: clamp(2.2rem, 4.6vw, 4.8rem); max-width: none; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.11em; }
.hero__logo {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 5vh, 56px);
  display: inline-flex;
  padding: 0;
  background: none;
}
/* Logo PNG sin fondo, en crema para leerse sobre el verde */
.hero__logo img { display: block; height: 39px; width: auto; filter: none; }
/* Icono y wordmark AMATERRA juntos, con el wordmark a la derecha del icono y todo centrado */
.hero__logo { align-items: center; gap: 4.5px; }
.hero__logo .hero__wordmark { display: block; height: 17.25px; width: auto; filter: none; }
/* TM pequeño en la esquina superior derecha de la palabra AMATERRA */
.hero__marca { position: relative; display: inline-block; }
.hero__tm { position: absolute; top: -1px; right: -7.5px; font: 600 5.25px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.02em; color: #F2EBDB; }
/* Titular un poco más arriba (el logo bajó 2vh con su regla de posición): el hero queda más lleno */
.hero h1 { position: relative; top: -2vh; }
/* Compra y confianza, justo debajo de la portada */
.compra { background-color: #F8F8F8; background-image: var(--tex-light); padding: clamp(56px, 8vw, 96px) 0; }

/* Precarga: el logo dibuja sus vetas en 2,5 s y se rellena en 0,5 s; después la capa se abre como niebla */
.precarga {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #F8F8F8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 1000ms ease;
}
/* Al abrirse, solo se borra el fondo crema: el logo no se desvanece y se acerca nítido hasta atravesar la pantalla */
.precarga.is-listo { background-color: transparent; pointer-events: none; }
/* Al abrirse la precarga, el logo se desvanece sin zoom */
.precarga__escena { transition: opacity 500ms ease-out; }
.precarga.is-listo .precarga__escena { opacity: 0; }
.precarga__logo { width: min(260px, 60vw); height: auto; overflow: visible; }
/* Precarga: el logo completo (anillo y hojitas juntos) aparece con un fundido. El anillo gira como cargando
   (dos vueltas de 1,2 s). El logo queda quieto, sin rebote ni agrandado */
/* El anillo gira sin parar hasta que la precarga se retira: no se congela mientras espera la carga */
.precarga__anillo { transform-box: view-box; transform-origin: 199.63px 199.63px; animation: girar 1200ms linear infinite; }
.precarga__logo { animation: fundir 1000ms ease-out 0ms both; }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
/* Profundidad: la escena se inclina con el puntero (lo mueve main.js) y la sombra se corre al lado contrario */
.precarga__vista { perspective: 620px; }
.precarga__escena {
  --sx: 0px;
  --sy: 14px;
  display: block;
  will-change: transform, filter;
  filter: drop-shadow(var(--sx) var(--sy) 14px rgba(38, 60, 29, 0.26));
}
html.cargando { overflow: hidden; }
/* El título entra recién cuando la precarga ya se abrió: así no se superpone con su logo */
.hero__centro { transition: opacity var(--mov-media) ease; }
html.cargando .hero__centro { opacity: 0; }
/* El logo del hero (fuera del bloque central) también espera a que termine la precarga */
html.cargando .hero__logo { opacity: 0; }

/* Indicador de scroll del hero: pino apuntando al suelo y texto en mayúsculas. Aparece cuando la precarga se desvaneció */
.scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 3;
  margin: 0 auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(43, 38, 32, 0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mov-media) ease;
  animation: bounceSlow 2.4s ease-in-out infinite;
}
html:not(.cargando) .scroll-hint:not(.is-oculto) { opacity: 1; }
.scroll-hint.is-oculto { opacity: 0; }
.scroll-hint__texto { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; }
.scroll-hint__pino { display: block; width: 22px; height: auto; fill: currentColor; }
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; transition: none; }
}

/* Producto justo debajo de la portada: texto y foto del picnic */
.producto-intro { background-color: #F8F8F8; background-image: var(--tex-light); text-align: center; padding: clamp(64px, 9vw, 120px) 0 24px; }
.producto-intro h2 { margin: 0 auto 0.4em; }
.intro__lineas { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; max-width: 46ch; margin: 0 auto 48px; }
.intro__foto img { display: block; width: 100%; height: auto; }


/* Etiqueta "OPEN" que acompaña al cursor sobre la foto del picnic */
.cursor-texto {
  position: fixed;
  left: 0;
  top: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1B3322;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity var(--mov-corta) ease;
}
.cursor-texto.is-on { opacity: 1; }
/* Cursor: el logo de la marca es el cursor nativo (SVG en dos colores). El sistema lo dibuja, así que no se desfasa */
.cursor-none, .cursor-none * { cursor: url("../img/cursor-oscuro.svg") 18 18, auto !important; }
.cursor-none.cursor-claro, .cursor-none.cursor-claro * { cursor: url("../img/cursor-claro.svg") 18 18, auto !important; }
/* Zona de 24 px alrededor de botones y enlaces: ahí aparece la manito antes de llegar al elemento */
.cursor-none.zona-manito, .cursor-none.zona-manito * { cursor: pointer !important; }
/* Los campos de texto siempre muestran el cursor de escritura */
.cursor-none input, .cursor-none textarea, .cursor-none select,
.cursor-none.cursor-claro input, .cursor-none.cursor-claro textarea, .cursor-none.cursor-claro select,
.cursor-none.zona-manito input, .cursor-none.zona-manito textarea, .cursor-none.zona-manito select { cursor: auto !important; }
/* En celular (pantalla táctil) no hay cursor personalizado: navegación nativa */
@media (hover: none), (pointer: coarse) {
  .cursor-none, .cursor-none * { cursor: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .precarga__anillo, .precarga__logo { animation: none !important; filter: none !important; transform: none !important; }
  .precarga__planta { animation: none !important; opacity: 1 !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Apertura de la caja ligada al scroll (main.js): entera a la derecha; al final se acerca y se esconde por el borde derecho, dejando visible la izquierda */
.apertura-scroll { position: relative; height: 280vh; background: #F8F8F8; }
#apertura-caja { padding-top: 0; padding-bottom: 0; }
.apertura-scroll__pegado { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.apertura-scroll__escenario { z-index: 1; position: absolute; top: 0; right: 0; width: min(56vw, 760px); height: 100vh; box-sizing: border-box; padding-top: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.apertura-scroll__canvas { display: block; width: 100%; height: auto; will-change: transform; transform-origin: 50% 50%; }
@media (max-width: 860px) { .apertura-scroll__escenario { width: 100vw; } }
@media (prefers-reduced-motion: reduce) {
  .apertura-scroll { height: auto; }
  .apertura-scroll__pegado { position: static; height: auto; padding: 40px 0; }
  .apertura-scroll__escenario { position: static; width: min(90vw, 760px); height: auto; margin: 0 auto; }
}

/* Información del producto a la izquierda de la apertura: cada bloque aparece con el scroll (--a lo fija main.js) */
.apertura-scroll__info { z-index: 2; position: absolute; top: 104px; left: clamp(24px, 6vw, 96px); width: min(440px, 40vw); display: flex; flex-direction: column; gap: 14px; }
.apertura-scroll__info h2 { margin: 0 0 14px; }
.info-bloque { opacity: var(--a, 0); transform: translateY(calc((1 - var(--a, 0)) * 24px)); }
/* Título y cubiertos: aparecen sin moverse de su lugar, solo se encienden */
.info-bloque[data-pre] { transform: none; }
.apertura-scroll__info .compartments { display: flex; flex-direction: column; gap: 12px; }
/* Línea de tiempo de los cubiertos (columna de información de la caja) */
.apertura-scroll__info .linea-cubiertos { position: relative; margin-top: 22px; padding-left: 36px; }
.apertura-scroll__info .linea-cubiertos::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: rgba(38, 60, 29, 0.18); }
.linea-cubiertos__avance { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: #263C1D; transform-origin: top; transform: scaleY(0); }
.apertura-scroll__info .linea-cubiertos__lista { list-style: none; margin: 0; padding: 0; }
.apertura-scroll__info .linea-cubiertos__item { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 0; margin: 0 0 16px; background: transparent; }
.linea-cubiertos__punto { position: absolute; left: -36px; top: 8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #263C1D; background: #F8F8F8; }
.apertura-scroll__info .linea-cubiertos__item .num { display: block; font-size: 2.2rem; line-height: 1; transition: color 0.4s ease; }
/* Destaque de cada cubierto: rebota y toma el verde del acento, uno a uno, al ritmo de la caja (lo maneja main.js) */
.apertura-scroll__info .linea-cubiertos__item .num.is-destacado { color: var(--forest); transform-origin: 0 60%; animation: rebote-num 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes rebote-num { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 65% { transform: scale(0.95); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .apertura-scroll__info .linea-cubiertos__item .num.is-destacado { animation: none; } }
.apertura-scroll__info .linea-cubiertos__item h3 { margin: 0; font-size: 1rem; text-transform: uppercase; }
.apertura-scroll__info .linea-cubiertos__item p { margin: 0; font-size: 14px; }
.apertura-scroll__info .compartment { display: grid; grid-template-columns: 74px 1fr; column-gap: 16px; align-items: baseline; }
.apertura-scroll__info .compartment .num { font-size: 2.2rem; line-height: 1; }
.apertura-scroll__info .compartment h3 { margin: 0 0 2px; font-size: 1rem; }
.apertura-scroll__info .compartment p { margin: 0; font-size: 14px; }
.apertura-scroll__info .product__buy { display: flex; flex-wrap: wrap; gap: 12px; }
.calc-seccion { padding: 48px 0 clamp(56px, 8vw, 96px); }
@media (max-width: 860px) {
  .apertura-scroll__info { width: calc(100% - 48px); left: 24px; top: 84px; transform: none; gap: 14px; }
  .apertura-scroll__escenario { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .apertura-scroll__info { position: static; transform: none; width: min(640px, 90vw); margin: 0 auto 40px; }
  .info-bloque { opacity: 1 !important; transform: none !important; }
}

/* Columna de información: tamaños contenidos para que entre en la pantalla junto a la caja */
@media (min-width: 861px) {
  .apertura-scroll__info { top: 92px; width: min(480px, 42vw); gap: 16px; }
}
.apertura-scroll__info h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.05; margin: 0 0 10px; }
/* Texto de la caja: mismo formato que el texto de "Set the table with real wood" (tamaño, interlineado, color y largo de línea) */
.apertura-scroll__info .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; color: var(--muted); max-width: 46ch; margin: 0; }
.apertura-scroll__info .specs { gap: 8px 24px; grid-template-columns: repeat(2, 1fr); }
.apertura-scroll__info .specs dd { font-size: 15px; }
.apertura-scroll__info .compartment { padding: 0; background: transparent; }
/* El número ocupa las dos filas de la izquierda, así el título y el texto quedan en la columna ancha */
.apertura-scroll__info .compartment .num { grid-row: span 2; }
/* Sin márgenes de la ficha de producto: cada bloque ya trae su separación del gap de la columna */
.apertura-scroll__info .compartments { margin: 0; gap: 10px; }
.apertura-scroll__info .specs { margin: 0; }
.apertura-scroll__info .ficha { margin: 0; padding-top: 6px; }
/* Los dos botones de compra a ancho de la columna, uno debajo del otro (en una fila no entra el texto de Amazon) */
.apertura-scroll__info .product__buy { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
.apertura-scroll__info .btn--web { padding: 1rem 2rem; letter-spacing: 0.1em; font-size: 0.8rem; white-space: nowrap; }
/* Cantidades: números tabulares para que no salten al contar */
.apertura-scroll__info .num { font-variant-numeric: tabular-nums; }
/* Escritorio: los tres compartimentos en fila, cada uno con su cifra arriba (en celular siguen en columna) */
@media (min-width: 861px) {
  .apertura-scroll__escenario { overflow: visible; } /* la caja puede pasar por detrás del texto, sin recortarse */
  .apertura-scroll__info .compartments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .apertura-scroll__info .compartment { display: flex; flex-direction: column; gap: 6px; }
  .apertura-scroll__info .compartment .num { grid-row: auto; font-size: clamp(44px, 4vw, 56px); }
  .apertura-scroll__info .compartment h3 { margin: 0; font-size: 15px; }
  .apertura-scroll__info .compartment p { font-size: 13px; line-height: 1.45; }
}

/* Hero con la foto real del bosque (assets/js/hero-bosque.js): el canvas va al fondo, el resplandor encima de la foto
   y debajo del titular. Sin WebGL queda el fondo verde */
.hero {
  background-color: #3B5036;
  background-image: linear-gradient(180deg, #3B5036 0%, #263C1D 100%);
  color: #F2EBDB;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
  transition: opacity var(--mov-larga) ease;
}
.hero__foto.is-listo { opacity: 0.6; } /* la foto va suave, sobre el verde del hero */
.hero h1 .mask { overflow: visible; } /* el titular sube sin cortarse */
/* En escritorio: "From the forest" en un renglón y "to your table" debajo (el salto está en el HTML) */
@media (min-width: 861px) {
  .hero .hero__centro h1 { max-width: none; }
  .hero .hero__centro h1 .line { white-space: nowrap; }
}
.hero h1 .palabra { display: inline-block; } /* cada palabra se anima sola (transform solo funciona en bloques en línea) */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(60% 46% at 50% 40%, rgba(242, 235, 219, 0.2), rgba(242, 235, 219, 0) 70%);
  pointer-events: none;
}
.hero h1 {
  color: #F2EBDB;
  font-size: clamp(2.6rem, 6vw, 6rem);
  font-weight: 300;
  max-width: 16ch;
  margin-inline: auto;
  /* Sombra oscura y suave: el crema necesita contraste sobre las hojas claras. Sin brillo, que se perdería */
  text-shadow: 0 2px 28px rgba(14, 26, 10, 0.55), 0 1px 2px rgba(14, 26, 10, 0.4);
}
.hero .scroll-hint { color: rgba(242, 235, 219, 0.85); }
.hero__logo img { filter: brightness(0) invert(0.96); }

/* Material: los tres cubiertos van uno después de otro, en horizontal. El scroll desplaza la pista y cada pieza gira mientras pasa */
.materia { height: 320vh; background: #F8F8F8; }
.materia__fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.materia__pista { display: flex; height: 100%; width: 300vw; will-change: transform; }
.materia__panel {
  flex: 0 0 100vw; height: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px);
  padding: 0 clamp(16px, 6vw, 80px);
}
.materia__pieza { justify-self: end; height: min(70vh, 640px); width: auto; aspect-ratio: 3 / 4; }
.materia__dato { color: #263C1D; max-width: 24ch; }
.materia__titulo { margin: 0 0 18px; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -0.01em; }
.materia__texto { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
/* Cada palabra del titular se mueve sola, según la posición de la escena */
.materia__palabra { display: inline-block; will-change: transform, opacity; }
/* Hilo que une la página (lo arma main.js). z-index 0: queda debajo de los elementos con z-index 1, como los cubiertos */
.hilo { position: fixed; left: 6px; top: 0; bottom: 0; width: 2px; z-index: 0; pointer-events: none; background: rgba(107, 98, 87, 0.22); }
.hilo__avance { display: block; height: 100%; background: #6B6257; transform-origin: top; transform: scaleY(0); }
/* Los cubiertos en 3D van por encima del hilo */
.materia__pieza { position: relative; z-index: 1; }
/* Palabras de los titulares que se leen con el scroll */
.palabra-scroll { display: inline-block; will-change: transform, opacity; }
@media (max-width: 760px) {
  .materia__panel { grid-template-columns: 1fr; grid-template-rows: 1fr auto; justify-items: center; text-align: left; }
  .materia__pieza { justify-self: center; height: min(52vh, 540px); }
}
@media (prefers-reduced-motion: reduce) {
  .materia { height: auto; }
  .materia__fija { position: relative; height: auto; overflow: visible; }
  .materia__pista { flex-direction: column; width: 100%; }
  .materia__panel { flex: none; height: auto; min-height: 70vh; }
}

/* Reel: la frase continúa la calculadora; debajo, una pista de ambientación que se desliza sola */
.reel__frase {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  text-align: center;
  max-width: 18ch;
  margin: 0 auto;
  color: var(--forest);
}
.reel__pista { overflow: hidden; margin-top: 56px; }
.reel__carril { display: flex; width: max-content; animation: reel-desliza 60s linear infinite; }
.reel__carril img,
.reel__copia img { flex: none; height: clamp(220px, 26vw, 340px); width: auto; margin-right: 18px; border-radius: 14px; object-fit: cover; }
.reel__copia { display: flex; }
.reel__pista:hover .reel__carril { animation-play-state: paused; }
.reel__nota { margin-top: 20px; font-size: 0.85rem; color: var(--muted); text-align: center; }
@keyframes reel-desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .reel__carril { animation: none; }
  .reel__pista { overflow-x: auto; }
}

.intro__texto { will-change: transform; }


/* Botón de compra de la calculadora: aparece con el resultado */
.calc__comprar { display: flex; width: 100%; margin-top: 18px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--mov-media) var(--ease-estandar), transform var(--mov-media) var(--ease-estandar); }
.calc__comprar.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* Carrusel de ambientación: al pasar el mouse, la imagen elegida crece y el resto se atenúa */
.reel__carril img, .reel__copia img { transition: transform var(--mov-media) var(--ease-estandar), filter var(--mov-media) ease, opacity var(--mov-media) ease; transform-origin: center; }
.reel__pista:hover .reel__carril img, .reel__pista:hover .reel__copia img { opacity: 0.5; filter: saturate(0.55); }
.reel__pista .reel__carril img:hover, .reel__pista .reel__copia img:hover { opacity: 1; filter: none; transform: scale(1.04); position: relative; z-index: 1; }
.reel__nota { transition: opacity var(--mov-corta) ease; }

/* La tira ya no usa la animación fija: su posición la mueve main.js (velocidad propia por scroll) */
.reel__carril { animation: none; will-change: transform; }

/* Imágenes de ambientación repartidas como fondo suave de secciones con sentido (reemplazan la tira) */
.calc-seccion, .catering { position: relative; isolation: isolate; }
.catering::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
/* Calculadora: la foto de ambientación es el fondo de la propia tarjeta */
.calc { position: relative; isolation: isolate; overflow: hidden; }
.calc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/ambientacion/13.jpg") center / cover; opacity: 0.25; }

/* Producto: dos fotos del mismo tamaño, una al lado de la otra. Aparecen desde abajo al entrar (main.js).
   Ambas en 3:2; la de la derecha se recorta solo por arriba (object-position abajo) para no cortar la caja */
.intro__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 1100px; margin: 0 auto; }
/* Sin sombra de fondo. Borde blanco tipo LED dentro de la foto y brillo que sigue al mouse (los pone main.js) */
.intro__figura { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; --mx: 50%; --my: 50%; transition: transform 0.7s var(--ease-estandar); will-change: transform; }
.intro__figura::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), inset 0 0 22px rgba(255, 255, 255, 0.4); transition: box-shadow 0.6s var(--ease-estandar); }
.intro__figura:hover::before { box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 30px rgba(255, 255, 255, 0.65); }
.intro__figura::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 50%); opacity: 0; transition: opacity 0.6s ease; }
.intro__figura:hover::after { opacity: 1; }
.intro__figura img, .intro__figura video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
@media (max-width: 760px) { .intro__duo { grid-template-columns: 1fr; gap: 20px; } }
/* Catering: franja de tres imágenes al final */
.catering__galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.catering__galeria img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* Foto de evento grande junto al texto de catering (relación de aspecto original 4:3, sin recortar) */
.catering__evento { margin: 0; }
.catering__evento img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 20px 50px rgba(27, 51, 34, 0.16); }
@media (max-width: 760px) { .catering__galeria { grid-template-columns: 1fr; } }

/* Espacios entre secciones: más ajustados. Los cubiertos (materia) quedan con poco aire arriba y abajo */
.materia { padding-top: 0; padding-bottom: 0; }
.catering { padding-top: 24px; }
.faq { padding-bottom: 24px; }
.politicas { padding-top: 24px; }
/* En escritorio, el cubierto ocupa más alto de la pantalla: queda menos aire arriba y abajo dentro del escenario fijo */
@media (min-width: 861px) { .materia__pieza { height: min(80vh, 680px); } }

/* Fotos de catering con efecto de luz: brillo blanco dentro del borde, que sigue al mouse y se inclina (como las del producto) */
.foto-led { position: relative; margin: 0; overflow: hidden; border-radius: 22px; --mx: 50%; --my: 50%; transition: transform 0.7s var(--ease-estandar); will-change: transform; }
.foto-led img, .foto-led video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
.foto-led::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), inset 0 0 22px rgba(255, 255, 255, 0.4); transition: box-shadow 0.6s var(--ease-estandar); }
.foto-led:hover::before { box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 30px rgba(255, 255, 255, 0.65); }
.foto-led::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 50%); opacity: 0; transition: opacity 0.6s ease; }
.foto-led:hover::after { opacity: 1; }

/* Hero con video en loop (desktop 16:9 y celular 9:16, centrados). Reemplaza la foto mientras el video está */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.7; pointer-events: none; }
.hero:has(.hero__video) .hero__foto { display: none; }

/* Celular: el logo va centrado arriba del titular (no sobre el indicador Swipe, que queda abajo) */
@media (max-width: 760px) {
  .hero { justify-content: center; }
  .hero__logo { position: relative; right: auto; bottom: auto; order: -1; align-self: center; margin: 0 0 24px; }
}

/* Menú de celular: mismas letras que el menú de escritorio, más chico, panel de vidrio transparente y despliegue animado */
@media (max-width: 860px) {
  .nav__toggle { font-family: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 7px 14px; color: var(--ink); border: 1px solid rgba(43, 38, 32, 0.18); background: rgba(255, 255, 255, 0.22); transition: background var(--mov-corta), border-color var(--mov-corta); }
  .nav__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.45); border-color: rgba(43, 38, 32, 0.3); }
  .nav .nav__links { display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-width: none; overflow: visible; margin: 0; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 30px rgba(43, 38, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); transform-origin: top right; opacity: 0; transform: translateY(-8px) scale(0.96); visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease-estandar), transform 0.45s var(--ease-entrada), visibility 0s linear 0.45s; }
  .nav .nav__links.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 0.35s var(--ease-estandar), transform 0.45s var(--ease-entrada), visibility 0s; }
  .nav .nav__links a { display: block; font-size: 0.7rem; letter-spacing: 0.22em; padding: 9px 10px; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.4s var(--ease-entrada), color var(--mov-corta); }
  .nav .nav__links.is-open a { opacity: 1; transform: none; }
  .nav .nav__links.is-open li:nth-child(1) a { transition-delay: 0.05s; }
  .nav .nav__links.is-open li:nth-child(2) a { transition-delay: 0.1s; }
  .nav .nav__links.is-open li:nth-child(3) a { transition-delay: 0.15s; }
  .nav .nav__links.is-open li:nth-child(4) a { transition-delay: 0.2s; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav .nav__links, .nav .nav__links a, .nav__toggle { transition: none !important; }
}

/* Sección de la caja: foto de abedules de cerca de fondo, muy tenue (queda fija junto con la caja al pasar) */
.apertura-scroll__pegado::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/ambientacion/abedules-cerca.jpg") center / cover;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

/* Pie de página: fondo verde claro transparentoso */
.foot { background-color: rgba(196, 232, 176, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Celular: sin fondo de abedules detrás de la caja (no compite con la animación); el abedul pasa al fondo de la calculadora */
@media (max-width: 760px) {
  .apertura-scroll__pegado::before { display: none; }
  .calc::before { background-image: url("../img/ambientacion/abedules-cerca.jpg"); }
}

/* Celular: los cubiertos y su texto suben, y queda espacio libre abajo para la barra del navegador */
@media (max-width: 760px) {
  .materia { height: auto; padding-bottom: 110px; }
  .materia__fija { position: relative; height: auto; overflow: visible; }
  .materia__pista { height: auto; }
  .materia__panel { height: auto; min-height: 0; grid-template-rows: auto auto; gap: 22px; align-content: start; padding-top: 24px; }
  .materia__pieza { height: min(46vh, 420px); }
}

/* Celular: catering en columna normal, una tarjeta debajo de otra. Sin tarjetas fijas que dejaban espacios vacíos al bajar (y que Safari no sincronizaba) */
@media (max-width: 760px) {
  .catering__grid, .catering__galeria { display: block; }
  .catering__galeria { margin-top: 0; }
  .catering .foto-led { clip-path: none !important; }
  .catering__texto, .catering__evento, .catering__galeria > figure {
    position: relative;
    margin: 0 16px 18px;
    background: #fff;
    border: 1px solid rgba(43, 38, 32, 0.08);
    border-radius: 22px;
    box-shadow: 0 -8px 24px rgba(43, 38, 32, 0.08);
  }
  .catering__texto { padding: 26px 22px; text-align: left; }
}

/* Escritorio: la foto grande y tres miniaturas debajo; las miniaturas se iluminan y, al hacer clic, cambian con la principal (lo maneja main.js) */
@keyframes led-blanco {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), inset 0 0 12px rgba(255, 255, 255, 0.35); }
  50% { box-shadow: inset 0 0 0 2px #fff, inset 0 0 26px rgba(255, 255, 255, 0.95); }
}
/* Where to buy: sin inclinación ni brillo al pasar el mouse; solo las miniaturas tienen la luz blanca pulsante */
.catering .foto-led::after { display: none; }
.catering .foto-led::before { display: none; }
.catering .foto-led:hover { transform: none; }
@media (min-width: 861px) {
  .catering__galeria { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 0; }
  .catering__galeria > figure { cursor: pointer; }
}

/* Escritorio: la columna de texto de la caja baja un poco para quedar centrada frente a la caja */
@media (min-width: 861px) {
  .apertura-scroll__info { top: 120px; }
}

/* Where to buy: sin transición CSS en las fotos (el movimiento lo maneja GSAP en main.js, en un solo paso fluido) */
.catering .foto-led { transition: none; }

/* Prueba: mientras el hero está en pantalla (escritorio), la barra no tiene fondo de vidrio: solo letras e íconos en crema, y la pastilla aparece al pasar el mouse */
@media (min-width: 861px) {
  .site-header.nav-sobre-hero .nav { background: none; background-image: none; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header.nav-sobre-hero .nav__links a { color: #F2EBDB; }
  .site-header.nav-sobre-hero .nav__hover { background: rgba(242, 235, 219, 0.2); box-shadow: none; }
  .site-header.nav-sobre-hero .logo img, .site-header.nav-sobre-hero .cart img { filter: brightness(0) invert(0.96); }
}

/* Navbar: más fina, más angosta y con esquinas menos redondeadas (en línea con el resto de la web) */
.nav { height: 54px; width: min(980px, calc(100% - 32px)); border-radius: 12px; }
.nav__hover { top: 8px; bottom: 8px; border-radius: 8px; }
.nav__toggle { border-radius: 8px; }
@media (max-width: 860px) {
  .nav .nav__links.is-open { border-radius: 12px; }
}
/* Sobre el hero: la pastilla un poco más opaca y las letras con una sombra suave para que se lean mejor */
.site-header.nav-sobre-hero .nav__hover { background: rgba(242, 235, 219, 0.34); }
.site-header.nav-sobre-hero .nav__links a { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }

/* Calculadora: texto breve de cómo usarla */
.calc__como { margin: 14px 0 0; font-size: 0.95rem; color: var(--muted); max-width: 44ch; }

/* Calculadora: sin sombra debajo de los botones */
.calc .btn, .calc .btn:hover { box-shadow: none; }

/* Where to buy: la foto grande y las miniaturas más juntas, y el texto centrado frente a todo el bloque (en escritorio) */
@media (min-width: 861px) {
  .catering { padding-top: 48px; padding-bottom: 72px; }
  .catering__grid { row-gap: 8px; }
  .catering__texto { grid-row: 1 / span 2; align-self: center; }
  .catering__galeria { margin: 0; }
}
/* Mismo espacio entre Where to buy y Preguntas que entre Preguntas y Políticas (24 px + 24 px) */
.faq { padding-top: 24px; }

/* Celular: el logo queda por encima del velo del hero para que se vea sobre el video */
@media (max-width: 760px) {
  .hero__logo { z-index: 3; }
}

/* Celular: el panel del menú es transparente sobre el hero, y fuera del hero se vuelve bastante más sólido para leerse sobre las fotos */
@media (max-width: 860px) {
  .site-header:not(.nav-sobre-hero) .nav .nav__links.is-open { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
}

/* Hero: el ícono y la palabra AMATERRA del logo con menos opacidad */
.hero__logo .hero__wordmark, .hero__logo > img { opacity: 0.7; }

/* Celular: la barra sobre el hero sin fondo de vidrio, con letras, íconos y botón Menu en crema (igual que en escritorio) */
@media (max-width: 860px) {
  .site-header.nav-sobre-hero .nav { background: none; background-image: none; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header.nav-sobre-hero .logo img, .site-header.nav-sobre-hero .cart img { filter: brightness(0) invert(0.96); }
  .site-header.nav-sobre-hero .nav__toggle { background: rgba(242, 235, 219, 0.2); border-color: rgba(242, 235, 219, 0.6); color: #F2EBDB; }
}

/* Celular: el logo del hero (círculo y AMATERRA, con su separación y el TM) se achica todo lo mismo, 75 % del tamaño */
@media (max-width: 760px) {
  .hero__logo img { height: 39px; }
  .hero__logo { gap: 4.5px; }
  .hero__logo .hero__wordmark { height: 17.25px; }
  .hero__tm { font-size: 5.25px; right: -7.5px; }
}

/* Celular: al pasar sobre una opción del menú se ilumina una pastilla a lo ancho, con los mismos colores que la pastilla de escritorio */
@media (max-width: 860px) {
  .nav .nav__links.is-open a { border-radius: 10px; transition: opacity 0.25s ease, transform 0.4s var(--ease-entrada), color var(--mov-corta), background var(--mov-corta), box-shadow var(--mov-corta); }
  .nav .nav__links.is-open a:hover,
  .nav .nav__links.is-open a:focus-visible { background: rgba(47, 74, 58, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(43, 38, 32, 0.08); }
  .site-header.nav-sobre-hero .nav .nav__links.is-open a:hover,
  .site-header.nav-sobre-hero .nav .nav__links.is-open a:focus-visible { background: rgba(242, 235, 219, 0.34); box-shadow: none; }
}

/* Clic en cualquier parte: una onda circular nace chica, se expande a velocidad media y se desvanece. No bloquea los clics */
.onda {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  border: 1.5px solid var(--onda, #2F4A3A);
  pointer-events: none;
  z-index: 40;
  transform: scale(0.05);
  opacity: 0.8;
  animation: onda 0.9s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
@keyframes onda {
  to { transform: scale(1); opacity: 0; }
}

/* Celular: los cubiertos quedan fijos en pantalla mientras se recorre la sección (como en escritorio), así cada texto tiene tiempo */
@media (max-width: 760px) {
  .materia { height: 300vh; padding-bottom: 0; }
  .materia__fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .materia__pista { height: 100%; }
  .materia__panel { height: 100%; min-height: 0; grid-template-rows: 1fr auto; align-content: stretch; gap: 22px; padding: 96px 16px 120px; }
  .materia__pieza { height: min(46vh, 420px); }
}

.hero h1 .letra {
  display: inline-block;
  transition: transform 0.35s ease-out;
}

/* Calculadora: el botón de Amazon puede dar dos líneas y las columnas pueden achicarse, así el formulario no se sale de la tarjeta (en celular se corría a la derecha y se cortaban los campos) */
.calc__grid > *, .calc__form, .calc__result { min-width: 0; }
.calc__comprar { white-space: normal; text-align: center; }

/* Sello de AMATERRA al final de la página, inclinado hacia la derecha, como estampado */
.foot { position: relative; }
.foot__sello { position: absolute; right: clamp(16px, 5vw, 64px); bottom: 28px; width: 150px; height: auto; overflow: visible; transform: rotate(10deg); pointer-events: none; }
@media (max-width: 760px) { .foot__sello { width: 104px; right: 16px; bottom: 20px; } }

/* Pie en computadora: el texto "Designed in the USA · Made in China" se corre a la izquierda para no tapar el sello */
@media (min-width: 1280px) {
  .foot__small { margin-left: -180px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .foot__small { margin-left: -120px; }
  .foot__sello { width: 120px; }
}

/* Sello del pie: cae sobre la página como un golpe de estampa, una sola vez, cuando el pie entra en pantalla */
@keyframes sellar {
  0% { transform: rotate(10deg) scale(1.3); opacity: 0; }
  70% { transform: rotate(10deg) scale(0.97); opacity: 1; }
  100% { transform: rotate(10deg) scale(1); opacity: 1; }
}
.foot__sello.espera { opacity: 0; }
.foot__sello.sellando { animation: sellar 0.4s cubic-bezier(0.3, 0.6, 0.4, 1) both; }

/* Titular del hero: sombra más marcada para que el crema se lea sobre cualquier fondo */

/* Titular del hero: vuelve al original (mayúsculas, crema, 0,11em de espaciado). Al pasar el mouse, las letras cercanas suben y se van hacia el verde claro. Sombra de color opuesto, sin desenfoque */
.hero h1 .letra { display: inline-block; transition: transform 0.35s ease-out, color 0.35s ease-out; color: color-mix(in srgb, #C4E8B0 calc(var(--k, 0) * 100%), #F2EBDB); }

/* Celular: el resto del titular va fino, igual que en escritorio */
@media (max-width: 760px) {
  .hero h1 { font-weight: 300; }
}

/* Texto de producto (copy del cliente): mismo tono que el texto de la portada del producto */
.producto-texto { max-width: 52ch; margin: 0 auto 40px; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.7; text-align: center; }
.producto-texto p { margin: 0 0 1em; }
.producto-puntos { list-style: none; margin: 28px auto 0; padding: 0; max-width: 60ch; display: grid; gap: 14px; text-align: left; font-size: 0.98rem; line-height: 1.6; color: var(--ink); }
.producto-puntos li { padding-left: 18px; position: relative; }
.producto-puntos li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: #263C1D; }
.producto-puntos strong { font-weight: 600; }
.producto-usos { margin: 40px auto 0; }
.producto-usos p { text-align: center; }
.apertura-scroll__info .specs-nota { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
/* Frase del material: abajo y centrada en la sección de los cubiertos */
.materia__pie { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; width: min(90%, 60ch); margin: 0; text-align: center; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.6; color: #263C1D; pointer-events: none; }
@media (max-width: 760px) { .materia__pie { position: relative; left: auto; bottom: auto; transform: none; margin: 8px auto 0; padding: 0 16px; } }
/* Frase del material: en una sola línea a todo el ancho (escritorio) y un poco más suave */
.materia__pie { left: 0; right: 0; width: auto; transform: none; padding: 0 16px; white-space: nowrap; font-size: clamp(0.85rem, 1.05vw, 0.98rem); opacity: 0.8; }
@media (max-width: 760px) { .materia__pie { white-space: normal; } }

/* Fondo único #F8F8F8 desde el preloader hasta cada sección clara (decisión del 2026-10-24, confirmada el 2026-11-11). El pie queda igual */
:root { --bg: #F8F8F8; --surface: #F8F8F8; }
html, body,
.producto-intro, .apertura-scroll, .materia, .calc-seccion, .catering, .faq, .politicas, .compra {
  background-color: #F8F8F8 !important;
  background-image: none !important;
}

/* Colinas en capas, como las de la caja: pasan de la arena al verde del pie */
.foot__colinas { position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(60px, 9vw, 120px); pointer-events: none; }
.foot__colinas svg { display: block; width: 100%; height: 100%; }
.colina-atras { fill: #3B5036; opacity: 0.45; }
.colina-delante { fill: #3B5036; }


/* Pasto a lápiz al fondo de los cubiertos individuales: viento dentro del propio SVG */
.hierba-pie { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
.hierba-pie img { display: block; width: 100%; height: auto; opacity: 0.28; }
.materia__fija { position: sticky; }
.materia__pista, .materia__pie { position: relative; z-index: 1; }

/* Aplicado desde la copia de prueba: botón de vidrio y carrito con pastilla */
@keyframes destello { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
/* Prueba 5 · Botón de vidrio (mismo estilo del hero, en tono oscuro para fondos claros) */
.btn--vidrio { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; color: #263C1D; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .6); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; background-color: rgba(255, 255, 255, .16); background-image: none; border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .6s cubic-bezier(.16, 1, .3, 1), background-color .5s cubic-bezier(.22, .61, .36, 1); }
.btn--vidrio:hover { background-color: rgba(255, 255, 255, .3); }
.btn--vidrio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); animation: destello 5s cubic-bezier(.45, .05, .25, 1) 2s infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .btn--vidrio::after { animation: none; } }

/* Carrito de la barra: al pasar el mouse se convierte en la pastilla "Shop on Amazon" */
.cart { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 0; transition: padding .6s cubic-bezier(.16, 1, .3, 1), background-color .5s cubic-bezier(.22, .61, .36, 1), border-color .5s cubic-bezier(.22, .61, .36, 1); border: 1px solid transparent; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cart { transition: none; } }


/* Prueba: sobre el hero, la pastilla del carrito tiene un velo oscuro para que las letras blancas se lean */

/* Carrito sobre el hero: letras blancas y velo oscuro. En el resto de la página el fondo es transparente y se funde con la barra */

/* El texto del carrito está dentro de un enlace: se quita el subrayado que el navegador le pone por defecto */
.cart { text-decoration: none; }


/* Datos de la caja como botones (aprobado desde la copia) de vidrio entre los números y el botón de compra */
.apertura-scroll__info .specs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.apertura-scroll__info .specs > div { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); color: #263C1D; }
.apertura-scroll__info .specs dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.apertura-scroll__info .specs dd { margin: 0; font-size: .9rem; }


/* Columna de texto más ancha (aprobado desde la copia) y centrada respecto de la caja, con textos y espacios más cómodos (escritorio) */
@media (min-width: 861px) {
  .apertura-scroll__info { width: min(500px, 42vw); top: 50%; transform: translateY(-50%); gap: 18px; }
  .apertura-scroll__info .lead { font-size: 1.25rem; line-height: 1.7; }
  .apertura-scroll__info .linea-cubiertos__item { margin: 0 0 22px; }
  .apertura-scroll__info .specs { gap: 12px; }
  .apertura-scroll__info .specs > div { padding: 12px 20px; }
  .apertura-scroll__info .specs dt { font-size: .75rem; }
  .apertura-scroll__info .specs dd { font-size: .95rem; }
  .apertura-scroll__info .product__buy { width: 100%; }
  .apertura-scroll__info .product__buy .btn--vidrio { width: 100%; justify-content: center; }
}


/* Tamaños de texto un poco más grandes (aprobado) en escritorio (unos 8 a 12 % más) */
@media (min-width: 861px) {
  body { font-size: 18.5px; }
  h1 { font-size: clamp(3rem, 7.4vw, 6.9rem); }
  h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
  h3 { font-size: 1.5rem; }
  .hero h1 { font-size: clamp(2.5rem, 5vw, 5rem); }
  .eyebrow, .apertura-scroll__info .eyebrow { font-size: 0.85rem; }
  .apertura-scroll__info h2 { font-size: clamp(32px, 3.3vw, 46px); }
  .apertura-scroll__info .lead, .intro__lineas, .producto-texto { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
  .apertura-scroll__info .linea-cubiertos__item .num { font-size: 2.5rem; }
  .apertura-scroll__info .specs dt { font-size: .8rem; }
  .apertura-scroll__info .specs dd { font-size: 1rem; }
  .btn { font-size: 0.86rem; }
  .apertura-scroll__info .btn--vidrio { font-size: 0.86rem; }
  .nav__links a { font-size: 0.78rem; }
  .foot { font-size: 0.98rem; }
  .canales h3, .politicas h3 { font-size: 1.35rem; }
}

/* Celular: el titular queda en dos renglones, "From the forest" arriba y "to your table" abajo, al máximo tamaño que entra */
@media (max-width: 760px) {
  .hero h1 { font-size: min(8.95vw, 35px); white-space: nowrap; max-width: none; }
  .hero h1 .line { white-space: nowrap; }
}


/* Ajustes de diseño (corrección): pasto de fondo siempre al pie de la sección de materiales; datos y números más compactos */
@media (max-width: 860px) {
  .materia { position: relative; }
  .materia__fija { position: static; height: auto; overflow: visible; }
  .materia .hierba-pie { position: absolute; bottom: 0; left: 0; right: 0; }
  .apertura-scroll__info .linea-cubiertos__item .num { font-size: 1.7rem; }
  .apertura-scroll__info .linea-cubiertos__item { margin: 0 0 10px; }
  .apertura-scroll__info .specs { gap: 8px; }
  .apertura-scroll__info .specs > div { padding: 6px 10px; }
  .apertura-scroll__info .specs dt { font-size: .6rem; }
  .apertura-scroll__info .specs dd { font-size: .78rem; }
}
/* Pantallas de computadora bajas: la columna de la caja entra completa, con el botón visible */
@media (min-width: 861px) and (max-height: 860px) {
  .apertura-scroll__info { top: 44%; gap: 12px; }
  .apertura-scroll__info h2 { font-size: clamp(26px, 2.6vw, 36px); }
  .apertura-scroll__info .lead { font-size: 1rem; line-height: 1.55; }
  .apertura-scroll__info .linea-cubiertos__item .num { font-size: 1.8rem; }
  .apertura-scroll__info .linea-cubiertos__item { margin: 0 0 10px; }
  .apertura-scroll__info .specs > div { padding: 7px 13px; }
  .apertura-scroll__info .specs dt { font-size: .66rem; }
  .apertura-scroll__info .specs dd { font-size: .85rem; }
  .apertura-scroll__info .btn--vidrio { padding: 10px 20px; }
}

/* Corrección del botón cortado en la sección de la caja: en celular el contenido ya no se recorta; en pantallas bajas la columna se compacta */
@media (max-width: 860px) {
  .apertura-scroll { height: auto; }
  .apertura-scroll__pegado { position: relative; height: auto; overflow: visible; padding-bottom: 48px; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .apertura-scroll__info { top: 40%; gap: 8px; }
  .apertura-scroll__info h2 { font-size: clamp(22px, 2.2vw, 30px); }
  .apertura-scroll__info .lead { font-size: .9rem; line-height: 1.45; }
  .apertura-scroll__info .linea-cubiertos__item .num { font-size: 1.5rem; }
  .apertura-scroll__info .linea-cubiertos__item { margin: 0 0 6px; }
  .apertura-scroll__info .specs > div { padding: 5px 10px; }
  .apertura-scroll__info .specs dd { font-size: .78rem; }
  .apertura-scroll__info .btn--vidrio { padding: 8px 16px; }
}

/* Celular (y tablet chico): la caja y los cubiertos vuelven a quedar fijos mientras se recorren, como en escritorio.
   Las reglas de arriba que las soltaban (para que el botón no se corte) rompían el cálculo del scroll de main.js: se trababan y se pisaban. */
@media (max-width: 860px) {
  .apertura-scroll { height: 300vh; height: 300svh; }
  .apertura-scroll__pegado { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0; }
  .apertura-scroll__info { position: absolute; top: 84px; left: 24px; right: 24px; width: auto; transform: none; }
  .apertura-scroll__escenario { position: absolute; top: 42%; left: 0; right: 0; bottom: 0; width: 100%; height: auto; opacity: 0.22; padding: 0; }

  .materia { height: 300vh; height: 300svh; position: relative; padding: 0; }
  .materia__fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .materia__pista { display: flex; height: 100%; width: 300vw; }
  .materia__panel { flex: 0 0 100vw; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 22px; padding: 96px 24px 150px; box-sizing: border-box; text-align: center; }
  .materia__pieza { height: min(46vh, 420px); width: auto; justify-self: center; align-self: center; }
  .materia__dato { max-width: 30ch; margin: 0 auto; }
  .materia__titulo { font-size: 30px; margin: 0 0 12px; }
  .materia__texto { font-size: 17px; }
  .materia .hierba-pie { position: absolute; bottom: 0; left: 0; right: 0; }
  .materia__pie { position: absolute; left: 0; right: 0; bottom: 28px; transform: none; margin: 0; padding: 0 24px; text-align: center; white-space: normal; font-size: 0.9rem; opacity: 0.85; }
}

/* Calculadora: video de cumpleaños de fondo con capa verde (el de How to Buy) de fondo en la calculadora, con una capa verde traslúcida encima de la imagen. Las letras van en blanco */
.calc__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
.calc::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(62, 92, 52, 0.78); }
.calc__grid > div:first-child h2, .calc__grid > div:first-child p, .calc__form label { color: #fff; }
/* Resultado sin fondo verde: solo el texto sobre la capa. El botón de Amazon es de vidrio, como el del carrito, con letra blanca */
.calc__result { background: none; background-image: none; color: #fff; }
.calc__big, .calc__result p:last-child { color: #fff; }
.calc__comprar.btn--vidrio { color: #fff; }
/* PRUEBA: cada campo de la calculadora (Guests, Settings per guest) va encerrado en un rectángulo de borde fino y puntas redondeadas, con fondo difuso en vez de crema liso */
.calc__form .field { border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 16px; padding: 14px 16px 16px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.calc__form .field input { border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; padding: 0.6rem 0.8rem; }
.calc__form .field input:focus { outline: 1px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }
/* PRUEBA: celulares de pantalla baja: la columna de la caja se compacta para que el botón de compra entre completo en pantalla */
@media (max-width: 860px) and (max-height: 780px) {
  .apertura-scroll__info { top: 66px; gap: 8px; }
  .apertura-scroll__info h2 { font-size: 26px; margin: 0 0 6px; }
  .apertura-scroll__info .lead { font-size: 0.86rem; line-height: 1.42; }
  .apertura-scroll__info .specs > div { padding: 5px 10px; }
  .apertura-scroll__info .specs dd { font-size: 0.8rem; }
  .apertura-scroll__info .linea-cubiertos { margin-top: 10px; }
  .apertura-scroll__info .linea-cubiertos__item { margin: 0 0 4px; }
  .apertura-scroll__info .linea-cubiertos__item .num { font-size: 1.35rem; }
  .apertura-scroll__info .linea-cubiertos__item h3 { font-size: 0.85rem; }
  .apertura-scroll__info .btn--vidrio { padding: 9px 18px; }
  .apertura-scroll__info .product__buy { margin-top: 6px; }
}
/* PRUEBA: en pantallas bajas, los cubiertos son un poco más chicos para que el texto no se pise con la frase de abajo */
@media (max-width: 860px) and (max-height: 780px) {
  .materia__panel { padding-top: 84px; padding-bottom: 150px; gap: 16px; }
  .materia__pieza { height: min(28vh, 240px); }
  .materia__titulo { font-size: 26px; margin: 0 0 8px; }
  .materia__texto { font-size: 15px; }
}
/* PRUEBA: celular acostado (pantalla muy baja): la columna de la caja y los números se compactan más para que el botón de compra entre */
@media (max-width: 860px) and (max-height: 500px) {
  .apertura-scroll__info { top: 50px; gap: 4px; }
  .apertura-scroll__info h2 { font-size: 20px; margin: 0 0 2px; }
  .apertura-scroll__info .lead { font-size: 0.76rem; line-height: 1.3; }
  .apertura-scroll__info .specs { gap: 4px; }
  .apertura-scroll__info .specs > div { padding: 3px 8px; }
  .apertura-scroll__info .specs dd { font-size: 0.72rem; }
  .apertura-scroll__info .linea-cubiertos { margin-top: 2px; }
  .apertura-scroll__info .linea-cubiertos__item { margin: 0 0 2px; }
  .apertura-scroll__info .linea-cubiertos__item .num { font-size: 1.1rem; }
  .apertura-scroll__info .linea-cubiertos__item h3 { font-size: 0.72rem; }
  .apertura-scroll__info .btn--vidrio { padding: 6px 14px; font-size: 0.7rem; }
  .apertura-scroll__info .product__buy { margin-top: 0; }
}
/* PRUEBA: celular acostado (horizontal): se usa el diseño de escritorio, con el texto a la izquierda y la caja y los cubiertos a la derecha, para que todo entre en la pantalla */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .apertura-scroll__info { position: absolute; top: 50px; left: 4vw; width: min(42vw, 380px); transform: none; }
  .apertura-scroll__escenario { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 56vw; height: 100%; opacity: 1; padding: 0; }
  .materia__panel { grid-template-columns: 1fr 1fr; grid-template-rows: none; justify-items: stretch; align-items: center; text-align: left; padding: 56px 6vw 60px; gap: 4vw; }
  .materia__pieza { justify-self: end; height: min(62vh, 300px); }
  .materia__dato { max-width: 22ch; justify-self: start; }
  .materia__titulo { font-size: 22px; margin: 0 0 6px; }
  .materia__texto { font-size: 14px; }
  .materia__pie { bottom: 14px; }
}
/* PRUEBA: horizontal de pantalla muy baja (375 px de alto): la columna de texto sube un poco más */
@media (max-width: 860px) and (max-height: 400px) and (orientation: landscape) {
  .apertura-scroll__info { top: 34px; gap: 2px; }
  .apertura-scroll__info .lead { font-size: 0.72rem; line-height: 1.25; }
  .apertura-scroll__info h2 { font-size: 18px; }
}

/* Datos de la caja (specs): suben y aparecen uno tras otro al entrar en pantalla */
.specs > div { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.specs.is-visible > div { opacity: 1; transform: none; }
.specs.is-visible > div:nth-child(2) { transition-delay: .08s; }
.specs.is-visible > div:nth-child(3) { transition-delay: .16s; }
.specs.is-visible > div:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .specs > div { opacity: 1; transform: none; transition: none; } }

/* iPhone: el recorte horizontal va en <html>, no en <body>. Con overflow en <body>, Safari deja de fijar (sticky) las secciones de scroll y el scroll deja de avisar a los efectos */

/* Celular: la caja y los cubiertos ya no quedan fijos con el scroll. Cada sección ocupa la pantalla y su animación corre sola (main.js) */
@media (max-width: 760px) {
  .apertura-scroll { height: 100vh; height: 100svh; }
  .apertura-scroll__pegado { position: relative; height: 100vh; height: 100svh; overflow: hidden; padding: 0; }
  .materia { height: 100vh; height: 100svh; padding: 0; }
  .materia__fija { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
}

/* Celular: áreas de toque de al menos 44 px (botón de menú, logo, preguntas, enlaces del pie y de texto) */
@media (max-width: 760px) {
  .nav__toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  a.logo { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .faq summary, details > summary { min-height: 48px; display: flex; align-items: center; padding: 12px 0; }
  .text-link, [data-email] { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__links a, .foot a[href^="mailto"], .foot a[href^="#"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .foot__links { line-height: 2.4; }
  .foot__small { font-size: 0.85rem; }
}

/* Celular: el texto y los datos de la caja se ven desde el inicio; la animación de main.js los va revelando. No depende de avisos del navegador */
@media (max-width: 760px) {
  .info-bloque { --a: 1; }
  .specs > div { opacity: 1 !important; transform: none !important; }
}

/* Celular: los cubiertos giran solos, en un recorrido de ida y vuelta que no termina (main.js) */
@media (max-width: 760px) {
  .materia__fija { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
  .materia__pista { width: 300vw; height: 100%; }
  .materia__panel { flex: 0 0 100vw; }
}

/* Celular: el dedo que se mueve de lado mueve los cubiertos; el dedo que sube o baja sigue bajando la página */
@media (max-width: 760px) { .materia__fija { touch-action: pan-y; } }

/* Celular: How to Buy sin transición de entrada. Las fotos quedan como videos planos, apilados, para que corran */
@media (max-width: 760px) {
  .catering .foto-led,
  .catering .foto-led video,
  .catering .foto-led img { clip-path: none !important; transform: none !important; }
  .catering .foto-led { transition: none !important; }
}

/* Celular: "Cómo comprar" en fotos fijas que se apilan con el scroll: el texto y cada foto quedan arriba y la siguiente se desliza por debajo */
@media (max-width: 760px) {
  .catering__grid, .catering__galeria { display: contents; }
  .catering__texto, .catering__evento, .catering__galeria > figure {
    position: relative;
    z-index: calc(var(--i, 0) + 1);
    margin: 0 16px 18px;
    background: #fff;
    border: 1px solid rgba(43, 38, 32, 0.08);
    border-radius: 22px;
    box-shadow: 0 -8px 24px rgba(43, 38, 32, 0.08);
  }
  .catering__texto { padding: 26px 22px; text-align: left; }
  .catering__evento, .catering__galeria > figure { position: sticky; top: calc(96px + (var(--i, 1) - 1) * 12px); }
}

/* Celular: en "What is in the box" los textos, los datos, los cubiertos y el botón se reparten a lo alto de toda la pantalla (no quedan todos arriba) */
@media (max-width: 760px) {
  .apertura-scroll__info { top: 84px; bottom: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
}

/* Celular: los datos de la caja van uno debajo del otro, de menor a mayor tamaño (Pieces, Care, Length, Material), y los cubiertos tienen más distancia entre sí y líneas más largas */
@media (max-width: 760px) {
  .apertura-scroll__info .specs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .apertura-scroll__info .specs > div:nth-child(1) { order: 1; } /* Pieces */
  .apertura-scroll__info .specs > div:nth-child(4) { order: 2; } /* Care */
  .apertura-scroll__info .specs > div:nth-child(2) { order: 3; } /* Length */
  .apertura-scroll__info .specs > div:nth-child(3) { order: 4; } /* Material */
  .apertura-scroll__info .linea-cubiertos { padding-top: 6px; padding-bottom: 6px; }
  .apertura-scroll__info .linea-cubiertos__lista { display: flex; flex-direction: column; gap: 22px; }
}

/* Portada: la foto de los abedules queda de fondo (se ve con el video y, si el iPhone no deja reproducirlo, queda fija). Sin el bosque anterior */
.hero { background-color: #3B5036; background-image: linear-gradient(rgba(38, 60, 29, 0.35), rgba(38, 60, 29, 0.35)), url("../img/ambientacion/abedules-cerca.jpg"); background-size: cover; background-position: center; }
.hero.sin-video .hero__video, .hero.sin-video .hero__foto { display: none !important; }

/* Portada: la foto de los abedules solo aparece si el video no se reproduce (modo de ahorro de energía). Con el video, no se ve por detrás */
.hero { background-image: none; }
.hero.sin-video { background-image: linear-gradient(rgba(38, 60, 29, 0.35), rgba(38, 60, 29, 0.35)), url("../img/ambientacion/abedules-cerca.jpg"); background-size: cover; background-position: center; }

/* Portada en modo de ahorro de energía: el video no corre; se muestra su primer cuadro quieto (en el lienzo), sin botón de play */
.hero.sin-video .hero__video { display: none !important; }
.hero.sin-video .hero__foto { display: block !important; object-fit: cover; }

/* Crédito del estudio en el pie (2026-11-11): una línea chica debajo de "Designed in the USA", solo "Mandorla" es enlace.
   Mismo tamaño y color que el resto del texto chico del pie, como hacen los sitios grandes (p. ej. "Website by Locomotive" en Haven Studios) */
.foot__credito { margin: 0; opacity: 0.85; }
.foot__credito a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.3s ease, opacity 0.3s ease; }
.foot__credito a:hover, .foot__credito a:focus-visible { color: var(--ink); }
@media (max-width: 760px) {
  .foot__credito a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
}