/* ── Tipografía ──────────────────────────────────────────────────────
   Fraunces y Karla van auto-hosteadas desde assets/fuentes/, no desde
   fonts.googleapis.com. El CSS que servía Google es dinámico y por eso no
   admite integridad (SRI): era un tercero con permiso permanente de inyectar
   CSS en las 8 páginas. Además ahorra el viaje de ida y vuelta a buscar ese
   CSS antes de siquiera pedir la fuente.

   Las dos son VARIABLES: un archivo por subset cubre todos los pesos, así que
   `font-weight` va como rango. Fraunces trae además el eje óptico opsz 9–144;
   `font-optical-sizing: auto` (el default del navegador) lo mueve solo según
   el tamaño, que es exactamente lo que hacía la versión de Google. No agregar
   `font-variation-settings`: pisaría ese automatismo y aplanaría los títulos.

   Se sirven latin y latin-ext. El subset vietnamita que manda Google se
   descartó: son 60 KB que este sitio no usa.
   Para actualizarlas: node actualizar-fuentes.mjs */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fuentes/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fuentes/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fuentes/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fuentes/karla-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────────────────
   La PALETA y las TIPOGRAFÍAS no están acá: se generan en assets/tokens.css
   desde contenido.json, que es lo que edita el panel de administración
   (node generar-tokens.mjs). tokens.css se carga antes que este archivo.
   Los valores de partida son los de brand_assets/BRAND.md.

   Lo que queda acá abajo es lo que el panel NO deja tocar: la escala de
   espaciado, el easing y el halo del pedido. Son decisiones de maquetación,
   no de marca. */
:root {
  /* Spacing: escala de 8, sin pasos random */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 6rem;

  /* Easing tipo spring, sin overshoot excesivo */
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* Halo del pedido. BRAND.md pide no usar sombras difusas, y esta es la única
     excepción: la barra y el panel flotan sobre el contenido y en crema sobre
     crema quedaban perdidos. Va en el tostado del calado, no en negro — es el
     canto quemado del láser corrido para afuera, no una sombra de profundidad. */
  --halo-laser:
    0 0 0 1px rgba(120, 72, 32, 0.18),
    0 3px 12px rgba(120, 72, 32, 0.16),
    0 0 34px rgba(120, 72, 32, 0.26);
}

* {
  box-sizing: border-box;
}

/* Scroll suave al saltar entre secciones. El margen compensa el nav sticky
   para que el título no quede tapado al llegar. */
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--crema);
  color: var(--tierra);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Grano de arcilla al 4%. Única textura del sitio. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Tipografía ──────────────────────────────────────────────────── */
h1,
h2,
h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 {
  font-size: clamp(2.5rem, 6.4vw, 4rem); /* 40 → 64 */
}
h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem); /* 28 → 40 */
}
h3 {
  font-size: 1.25rem; /* 20 */
}
p {
  margin: 0;
}

.eyebrow {
  font-family: var(--body);
  font-size: 0.875rem; /* 14 */
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--arcilla-texto);
  margin: 0;
}

.lead {
  font-size: 1.25rem; /* 20 */
  line-height: 1.6;
}

.fine {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--s4);
  position: relative;
  z-index: 1;
}

.band {
  padding-block: var(--s8);
}

/* Dos bandas crema seguidas no necesitan doble aire entre medio */
.band:not(.band--verde) + .band:not(.band--verde) {
  padding-top: 0;
}

/* ── El calado ────────────────────────────────────────────────────
   Signature del sitio. Una forma recortada en la superficie por la que
   asoma color, tal como las tapas de MDF cortadas a láser. El anillo
   interior tostado es el canto quemado del corte. */
.calado {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--salvia);
  isolation: isolate;
  /* El papel de color asoma alrededor de la foto, como en la tapa calada.
     Un solo tono en todo el sitio: tres papeles distintos daban arcoíris. */
  padding: 6px;
}

.calado::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(46, 42, 37, 0.22),
    inset 0 0 10px rgba(120, 72, 32, 0.4);
}

.calado img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  transform: scale(1);
  transition: transform 0.7s var(--spring);
}

/* Foto muy vertical con lo importante arriba: sin esto el recorte centrado
   deja los brotes pegados al borde y llena el resto de tierra. */
.calado img.foco-alto {
  object-position: 50% 30%;
}

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--crema);
  border-bottom: 1px solid rgba(46, 42, 37, 0.1);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: inherit;
}

/* Logo original de la marca, sacado del PDF vectorial (generar-logo.mjs).
   En pantalla ancha va el lockup horizontal completo; en angosta, la frutilla
   sola, que es para lo que existe el isotipo. */
.brand__logo,
.brand__mark {
  display: block;
  flex: none;
  width: auto;
  /* El wordmark del logo es manuscrito: por debajo de ~52px no se lee */
  height: 52px;
}

.brand__mark {
  display: none;
  height: 36px;
}

.brand span {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.1;
}

.nav__cta {
  white-space: nowrap;
}

/* Bajo 560px no entran isotipo + wordmark + CTA en una línea: a 360px ambos
   se partían en dos. Queda el isotipo, que para eso está. */
@media (max-width: 560px) {
  .brand__logo {
    display: none;
  }
  .brand__mark {
    display: block;
    height: 34px;
  }
  .nav__cta {
    font-size: 0.8125rem;
    padding: 0.55rem var(--s2);
  }
}

.nav__links {
  display: flex;
  gap: var(--s5);
}

.nav__cta {
  font-size: 0.875rem;
  padding: 0.6rem var(--s3);
}

/* Botón de menú: sólo en pantallas donde los links no entran en la barra */
.menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background-color: transparent;
  border: 1px solid rgba(46, 42, 37, 0.28);
  color: var(--tierra);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.menu-btn:hover {
  background-color: var(--crema-hondo);
  border-color: var(--tierra);
}

.menu-btn:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 3px;
}

.menu-btn svg {
  width: 20px;
  height: 20px;
}

.menu-btn .cerrar {
  display: none;
}

.menu-btn[aria-expanded="true"] .abrir {
  display: none;
}

.menu-btn[aria-expanded="true"] .cerrar {
  display: block;
}

@media (max-width: 859px) {
  .menu-btn {
    display: grid;
  }

  /* Los links pasan a un panel que baja del nav */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--crema);
    border-bottom: 1px solid rgba(46, 42, 37, 0.12);
    padding: var(--s2) var(--s4) var(--s4);
    /* Cerrado: replegado hacia arriba y sin capturar clics */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity 0.22s ease,
      transform 0.28s var(--spring);
  }

  .nav__links[data-abierto="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav__links a {
    padding-block: var(--s3);
    border-bottom: 1px solid rgba(46, 42, 37, 0.1);
    font-size: 1rem;
  }

  .nav__links a:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 860px) {
  /* Sube la especificidad: .btn se declara más abajo y gana el display */
  .nav__inner > .nav__cta {
    display: none;
  }
}

.nav__links a {
  color: var(--tierra);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding-block: var(--s1);
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.nav__links a:hover {
  color: var(--frutilla);
  border-bottom-color: var(--rosa-flor);
}

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem var(--s4);
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--spring),
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

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

/* Primario: lleva el canto tostado del láser, igual que el calado */
.btn--primary {
  background-color: var(--frutilla);
  color: var(--crema);
  box-shadow: inset 0 0 0 1px rgba(46, 42, 37, 0.25);
}
.btn--primary:hover {
  background-color: var(--frutilla-hover);
}
.btn--primary:focus-visible {
  outline-color: var(--tierra);
}

.btn--ghost {
  color: var(--tierra);
  border-color: rgba(46, 42, 37, 0.28);
}
.btn--ghost:hover {
  border-color: var(--tierra);
  background-color: var(--crema-hondo);
}

.btn--crema {
  background-color: var(--crema);
  color: var(--tierra);
}
.btn--crema:hover {
  background-color: var(--crema-alto);
}
.btn--crema:focus-visible {
  outline-color: var(--crema);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--s7) var(--s8);
}

.hero__grid {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s7);
  }
}

.hero__copy > * + * {
  margin-top: var(--s4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  color: rgba(46, 42, 37, 0.72);
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--arcilla);
}

/* Composición de calados: una ventana grande y dos chicas */
.hero__art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

.hero__art .calado:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

.hero__art .calado:not(:first-child) {
  aspect-ratio: 1 / 1;
}

/* ── Catálogo ────────────────────────────────────────────────────── */
.section__head {
  max-width: 34rem;
}
.section__head > * + * {
  margin-top: var(--s2);
}

.grid-cards {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
}

@media (min-width: 620px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: 22px;
  background-color: var(--crema-hondo);
  border: 1px solid rgba(46, 42, 37, 0.08);
}

.card .calado {
  aspect-ratio: 4 / 5;
}

/* Al pasar por encima, la pieza se acerca y el canto quemado se marca: la
   tapa calada levantándose, no un zoom cualquiera */
.card:hover .calado img {
  transform: scale(1.03);
}

.calado::after {
  transition: box-shadow 0.4s ease;
}

.card:hover .calado::after {
  box-shadow:
    inset 0 0 0 1px rgba(46, 42, 37, 0.3),
    inset 0 0 18px rgba(120, 72, 32, 0.55);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-inline: var(--s1);
  padding-bottom: var(--s2);
}

/* Título de card que lleva a la ficha del producto */
.card__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card__link:hover {
  color: var(--frutilla);
}

.card__link:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 3px;
  border-radius: 4px;
}

.tag {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  color: var(--tierra);
  border: 1px solid var(--arcilla);
}

/* "Más vendido". Va lleno de frutilla para que se distinga de los tags de
   material, y sólo lo llevan dos productos de ocho: si lo llevaran todos
   dejaría de querer decir algo. */
.sello,
.tag--sello {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background-color: var(--frutilla);
  color: var(--crema);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(46, 42, 37, 0.25);
}

/* Sobre la foto: por encima del canto quemado del calado, que va en z-index 2 */
.sello {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 3;
}

/* Card sin foto: el calado se ve vacío, mostrando sólo el papel de color */
.calado--vacio {
  display: grid;
  place-items: center;
  padding: var(--s4);
  text-align: center;
}

.calado--vacio p {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--tierra);
  opacity: 0.75;
}

/* ── Pasos ───────────────────────────────────────────────────────── */
.band--verde {
  background-color: var(--verde-campo);
  color: var(--crema);
}

.band--verde .eyebrow {
  color: var(--salvia-texto);
}

.steps {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s6);
  counter-reset: paso;
  list-style: none;
  padding: 0;
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6);
  }
}

.step {
  padding-top: var(--s3);
  border-top: 1px solid rgba(241, 233, 218, 0.28);
}

.step > * + * {
  margin-top: var(--s2);
}

/* La numeración se justifica: el pedido es una secuencia real */
.step__n {
  counter-increment: paso;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--salvia);
  /* El número se graba: una placa del color del fondo lo tapa y baja, con el
     canto del láser en el borde */
  position: relative;
  overflow: hidden;
}

.step__n::before {
  content: counter(paso, decimal-leading-zero);
}

.step__n::after {
  content: "";
  position: absolute;
  inset: -2px 0;
  background-color: var(--verde-campo);
  border-bottom: 2px solid var(--arcilla);
  transform: translateY(0);
}

.step.is-in .step__n::after {
  transform: translateY(101%);
  transition: transform 0.75s cubic-bezier(0.5, 0, 0.2, 1);
  transition-delay: 0.15s;
}

.step p:last-child {
  color: rgba(241, 233, 218, 0.82);
}

/* ── Eventos ─────────────────────────────────────────────────────── */
.eventos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* En pantalla angosta el wrap dejaba una fila con un solo chip colgado a la
   izquierda. Con dos columnas parejas queda ordenado. */
@media (max-width: 640px) {
  .eventos {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .evento {
    text-align: center;
    padding-inline: var(--s2);
    /* Sin esto los items de grid no se achican y "Nacimientos" desborda a 360px */
    min-width: 0;
    font-size: 1.0625rem;
  }
}

.evento {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--s2) var(--s4);
  border-radius: 999px;
  background-color: var(--crema-hondo);
  border: 1px solid rgba(199, 144, 99, 0.5);
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────
   Mismo gesto que la ficha del producto: término a la izquierda, dato a la
   derecha, separados por una línea fina. Son cinco respuestas de un renglón,
   así que van abiertas — un acordeón acá sería un click de más por nada. */
.faq {
  margin: var(--s5) 0 0;
  border-top: 1px solid rgba(46, 42, 37, 0.14);
}

.faq__item {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: 1px solid rgba(46, 42, 37, 0.14);
}

@media (min-width: 760px) {
  .faq__item {
    grid-template-columns: 21rem 1fr;
    gap: var(--s5);
    align-items: baseline;
  }
}

.faq dt {
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.3;
}

.faq dd {
  margin: 0;
  max-width: 62ch;
  color: rgba(46, 42, 37, 0.78);
}

/* ── Nosotros ────────────────────────────────────────────────────── */
.nosotros {
  display: grid;
  gap: var(--s6);
  align-items: center;
}

@media (min-width: 900px) {
  .nosotros {
    grid-template-columns: 5fr 6fr;
    gap: var(--s7);
  }
}

.nosotros__copy > * + * {
  margin-top: var(--s3);
}

.nosotros .calado {
  aspect-ratio: 3 / 2;
}

/* ── Cierre ──────────────────────────────────────────────────────── */
.cierre {
  text-align: center;
}

.cierre > * + * {
  margin-top: var(--s4);
}

.cierre p {
  max-width: 32rem;
  margin-inline: auto;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(46, 42, 37, 0.12);
  padding-block: var(--s5);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
  color: rgba(46, 42, 37, 0.7);
}

.footer a {
  color: var(--tierra);
  text-decoration: none;
  border-bottom: 1px solid var(--rosa-flor);
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--frutilla);
}

.footer a:focus-visible,
.nav__links a:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Reveal ──────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease,
    transform 0.6s var(--spring);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── El láser recorriendo la página ───────────────────────────────────
   El mismo gesto que graba el título del hero, pero acompañando el scroll:
   el cabezal avanzando sobre la madera. */
.laser-scroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  background-color: var(--arcilla);
  transform: scaleX(var(--avance, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Donde hay scroll-driven animations, se resuelve sin tocar JS */
@supports (animation-timeline: scroll()) {
  .laser-scroll {
    transform: scaleX(0);
    animation: avanzar linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes avanzar {
  to {
    transform: scaleX(1);
  }
}

/* En el celular la barra del navegador se contrae y expande al scrollear, y eso
   cambia la altura del viewport: el avance salta y la línea parpadea. No hay
   forma prolija de compensarlo, así que en pantallas chicas no va. */
@media (max-width: 859px) {
  .laser-scroll {
    display: none;
  }
}

/* ── Transición entre páginas ─────────────────────────────────────────
   Evita el parpadeo blanco al pasar de la home al catálogo. */
@view-transition {
  navigation: auto;
}

/* El nav se mantiene fijo mientras el resto cruza */
.nav {
  view-transition-name: nav;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
}

/* ── Del sobre a la tierra ────────────────────────────────────────────── */
.secuencia {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
  align-items: center;
}

@media (min-width: 720px) {
  .secuencia {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s5);
  }
}

.secuencia figure {
  margin: 0;
}

/* Cuadrado, no apaisado: la foto de la bomba germinando es muy vertical y con
   4/3 el recorte se comía los brotes, que son justo lo que hay que ver. */
.secuencia .calado {
  aspect-ratio: 1 / 1;
}

.secuencia__flecha {
  display: grid;
  place-items: center;
  color: var(--arcilla);
}

.secuencia__flecha svg {
  width: 34px;
  height: 34px;
  /* En columna la flecha apunta hacia abajo */
  rotate: 90deg;
}

@media (min-width: 720px) {
  .secuencia__flecha svg {
    rotate: none;
  }
}

.secuencia__pie {
  margin-top: var(--s3);
  font-size: 0.875rem;
  color: rgba(46, 42, 37, 0.72);
}

/* ── Hojas de fondo ───────────────────────────────────────────────────
   Las cuatro plantas reales de las bombas de semillas (rúcula, cilantro,
   perejil, espinaca), a línea. Muy tenues y con deriva lenta: dan aire sin
   competir con el producto. */
.hojas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hoja {
  position: absolute;
  color: var(--verde-campo);
  opacity: 0.06;
  will-change: transform;
  animation: derivar 42s ease-in-out infinite alternate;
}

.hoja svg {
  display: block;
  width: 100%;
  height: auto;
}

.hoja--1 {
  top: 6%;
  left: -3%;
  width: 190px;
  rotate: -14deg;
  animation-duration: 46s;
}
.hoja--2 {
  top: 38%;
  right: -4%;
  width: 230px;
  rotate: 160deg;
  animation-duration: 54s;
  animation-delay: -8s;
}
.hoja--3 {
  bottom: 8%;
  left: 4%;
  width: 150px;
  rotate: 22deg;
  animation-duration: 50s;
  animation-delay: -20s;
}
.hoja--4 {
  top: 68%;
  right: 12%;
  width: 120px;
  rotate: -40deg;
  animation-duration: 58s;
  animation-delay: -32s;
  opacity: 0.07;
}

/* Deriva mínima: se percibe como aire, no como movimiento */
@keyframes derivar {
  from {
    translate: 0 0;
  }
  to {
    translate: 14px -22px;
  }
}

@media (max-width: 700px) {
  /* En pantallas chicas sobran: quedan dos, y más al borde */
  .hoja--2,
  .hoja--4 {
    display: none;
  }
  .hoja--1 {
    width: 130px;
  }
  .hoja--3 {
    width: 110px;
  }
}

/* ── Hero: el grabado ─────────────────────────────────────────────────
   El título se revela palabra por palabra mientras una línea fina lo recorre,
   como el cabezal del láser pasando sobre la madera. Ocurre una sola vez. */
.hero__title {
  position: relative;
}

.palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.14em);
  animation: grabar 0.62s var(--spring) forwards;
}

@keyframes grabar {
  to {
    opacity: 1;
    transform: none;
  }
}

.laser {
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 0;
  height: 2px;
  background-color: var(--arcilla);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  animation: pasar-laser 1.5s ease-in-out forwards;
}

@keyframes pasar-laser {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  88% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(var(--recorrido, 100%));
    opacity: 0;
  }
}

/* ── Carrusel ─────────────────────────────────────────────────────────── */
.carrusel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.carrusel__nav {
  display: none;
  gap: var(--s1);
  flex: none;
}

@media (min-width: 760px) {
  .carrusel__nav {
    display: flex;
  }
}

.flecha {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background-color: transparent;
  border: 1px solid rgba(46, 42, 37, 0.28);
  color: var(--tierra);
  cursor: pointer;
  transition:
    transform 0.25s var(--spring),
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.flecha:hover:not(:disabled) {
  background-color: var(--crema-hondo);
  border-color: var(--tierra);
  transform: translateY(-2px);
}

.flecha:active:not(:disabled) {
  transform: translateY(0);
}

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

.flecha:disabled {
  opacity: 0.32;
  cursor: default;
}

.flecha svg {
  width: 18px;
  height: 18px;
}

.carrusel {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s4);
  padding-bottom: var(--s2);
  scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
  display: none;
}

.carrusel > .card {
  flex: 0 0 clamp(250px, 74vw, 316px);
  scroll-snap-align: start;
}

.carrusel__pie {
  margin-top: var(--s5);
}

/* En mobile el carrusel se sale del margen para que se vea que hay más */
@media (max-width: 620px) {
  .carrusel {
    margin-inline: calc(var(--s4) * -1);
    padding-inline: var(--s4);
  }
}

/* ── Selector de pedido ───────────────────────────────────────────────
   No es una tienda: no cobra ni maneja stock. Junta productos y arma el
   mensaje de WhatsApp. El estado vive en el navegador. */
.card__accion {
  margin-top: auto;
  padding: 0 var(--s1) var(--s1);
}

.btn--sumar {
  width: 100%;
  background-color: transparent;
  border-color: rgba(46, 42, 37, 0.28);
  color: var(--tierra);
  font-family: var(--body);
}

.btn--sumar:hover {
  border-color: var(--tierra);
  background-color: var(--crema);
}

.btn--sumar[aria-pressed="true"] {
  background-color: var(--verde-campo);
  border-color: var(--verde-campo);
  color: var(--crema);
}

.btn--sumar[aria-pressed="true"]:hover {
  background-color: var(--verde-hondo);
  border-color: var(--verde-hondo);
}

.btn--sumar .tilde {
  display: none;
}

.btn--sumar[aria-pressed="true"] .tilde {
  display: inline;
}

.btn--sumar[aria-pressed="true"] .mas {
  display: none;
}

/* Unidades por producto. Aparece recién cuando el producto está en el pedido. */
.cantidad {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s2);
}

.cantidad[hidden] {
  display: none;
}

.cantidad__label {
  font-size: 0.875rem;
  color: rgba(46, 42, 37, 0.72);
  margin-right: auto;
}

.paso {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 999px;
  background-color: transparent;
  border: 1px solid rgba(46, 42, 37, 0.28);
  color: var(--tierra);
  cursor: pointer;
  transition:
    transform 0.2s var(--spring),
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.paso:hover:not(:disabled) {
  background-color: var(--crema);
  border-color: var(--tierra);
  transform: translateY(-1px);
}

.paso:active:not(:disabled) {
  transform: translateY(0);
}

.paso:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 2px;
}

.paso:disabled {
  opacity: 0.34;
  cursor: default;
}

.cantidad input {
  width: 4.5rem;
  padding: 0.4rem var(--s1);
  font-family: var(--body);
  font-size: 0.9375rem;
  text-align: center;
  color: var(--tierra);
  background-color: var(--crema);
  border: 1px solid rgba(46, 42, 37, 0.28);
  border-radius: 10px;
}

.cantidad input:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 2px;
}

/* Barra y panel comparten anclaje: la caja se apoya abajo y crece hacia
   arriba, así la barra no se mueve cuando el panel se abre. */
.pedido-caja {
  position: fixed;
  left: 50%;
  translate: -50%;
  bottom: var(--s4);
  z-index: 60;
  width: min(660px, calc(100% - var(--s4) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  pointer-events: none;
}

.barra-pedido {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s1) var(--s1) var(--s1) var(--s2);
  border-radius: 999px;
  /* Más oscura que las bandas verdes: si fuera verde-campo se perdería al pasar
     por encima de la sección "Cómo trabajamos" */
  background-color: var(--verde-hondo);
  color: var(--crema);
  box-shadow:
    inset 0 0 0 1px rgba(46, 42, 37, 0.35),
    var(--halo-laser);
  /* Oculta hasta que haya algo en el pedido */
  opacity: 0;
  transform: translateY(120%);
  transition:
    opacity 0.35s ease,
    transform 0.45s var(--spring);
}

.barra-pedido[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Todo el resumen es el disparador del panel: es el área grande y es lo que
   la persona mira cuando quiere revisar qué lleva. */
.barra-pedido__toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: inherit;
  font-family: var(--body);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.barra-pedido__toggle:hover {
  background-color: rgba(241, 233, 218, 0.12);
}

.barra-pedido__toggle:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 2px;
}

.barra-pedido__texto {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.barra-pedido__chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: rgba(241, 233, 218, 0.78);
  transition: rotate 0.3s var(--spring);
}

.barra-pedido__toggle[aria-expanded="true"] .barra-pedido__chevron {
  rotate: 180deg;
}

.barra-pedido__lista {
  display: block;
  font-size: 0.8125rem;
  color: rgba(241, 233, 218, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-pedido .btn--crema {
  flex: none;
  padding: 0.7rem var(--s3);
  font-size: 0.9375rem;
}

/* ── Panel del pedido ─────────────────────────────────────────────────
   "Vaciar" borraba todo y no había forma de sacar un producto suelto. El
   panel es la lista completa: se cambia la cantidad o se quita de a uno.
   Va en crema sobre la barra verde — la nota de papel apoyada en la placa. */
.panel-pedido {
  display: none;
  pointer-events: auto;
  max-height: min(60vh, 460px);
  padding: var(--s3) var(--s4) var(--s4);
  border-radius: 22px;
  background-color: var(--crema);
  color: var(--tierra);
  border: 1px solid rgba(120, 72, 32, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    var(--halo-laser);
}

.panel-pedido[data-abierto="true"] {
  display: flex;
  flex-direction: column;
  animation: panel-sube 0.35s var(--spring);
}

@keyframes panel-sube {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

.panel-pedido__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid rgba(46, 42, 37, 0.14);
}

.panel-pedido__head h2 {
  font-size: 1.25rem;
}

.panel-pedido__cerrar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: none;
  border: 1px solid transparent;
  color: rgba(46, 42, 37, 0.6);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.panel-pedido__cerrar svg,
.quitar svg {
  width: 16px;
  height: 16px;
  display: block;
}

.panel-pedido__cerrar:hover {
  color: var(--tierra);
  background-color: var(--crema-hondo);
  border-color: rgba(46, 42, 37, 0.2);
}

.panel-pedido__cerrar:focus-visible,
.quitar:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 2px;
}

.panel-pedido__items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pedido-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s2);
  row-gap: var(--s1);
  padding-block: var(--s3);
}

.pedido-item + .pedido-item {
  border-top: 1px solid rgba(46, 42, 37, 0.12);
}

.pedido-item__nombre {
  grid-column: 1;
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.pedido-item .cantidad {
  grid-column: 1;
}

.pedido-item .quitar {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Con lugar, cada producto entra en un renglón */
@media (min-width: 560px) {
  .pedido-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .pedido-item .cantidad {
    grid-column: 2;
  }
  .pedido-item .quitar {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Acá el número es el protagonista: la palabra "unidades" pasa atrás */
.cantidad--panel {
  margin-top: 0;
  gap: 6px;
}

.cantidad--panel .cantidad__label {
  order: 9;
  margin-right: 0;
  margin-left: 2px;
  font-size: 0.8125rem;
}

.cantidad--panel .paso {
  width: 30px;
  height: 30px;
}

.cantidad--panel input {
  width: 3.6rem;
  padding: 0.3rem 4px;
}

.quitar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: none;
  border: 1px solid transparent;
  color: rgba(46, 42, 37, 0.55);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s var(--spring);
}

.quitar:hover {
  color: var(--frutilla);
  background-color: var(--crema-hondo);
  border-color: rgba(178, 58, 78, 0.4);
}

.quitar:active {
  transform: scale(0.94);
}

.panel-pedido__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid rgba(46, 42, 37, 0.14);
}

.panel-pedido__pie .fine {
  color: rgba(46, 42, 37, 0.6);
}

.vaciar {
  background: none;
  border: 0;
  color: rgba(46, 42, 37, 0.72);
  font-family: var(--body);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: var(--s1) 0;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.vaciar:hover {
  color: var(--frutilla);
}

.vaciar:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Deja aire al final para que la barra no tape el último contenido.
   `--alto-barra` lo mide el JS: la barra cambia de alto según el ancho. */
body.con-pedido {
  padding-bottom: calc(var(--alto-barra, 64px) + var(--s5));
}

@media (max-width: 560px) {
  /* En una línea no entran resumen y botón: se apila y el botón va a lo ancho */
  .barra-pedido {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    padding: var(--s2);
    border-radius: 22px;
  }
  .barra-pedido .btn--crema {
    flex: 1;
  }
  .panel-pedido {
    padding: var(--s3);
  }
}

/* ── Página de catálogo ───────────────────────────────────────────────── */
.encabezado {
  padding-block: var(--s7) var(--s6);
}

/* El encabezado ya deja su propio aire abajo: la sección que sigue no necesita
   sumar los 96px de una banda entera */
.encabezado + .band {
  padding-top: var(--s3);
}

/* En la ficha de un producto arriba sólo va el "volver": no necesita el aire
   de un encabezado completo */
.volver-wrap {
  padding-block: var(--s5) var(--s2);
}

.encabezado > * + * {
  margin-top: var(--s3);
}

.encabezado p {
  max-width: 46ch;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tierra);
  text-decoration: none;
  border-bottom: 1px solid var(--rosa-flor);
  transition: color 0.2s ease;
}

.volver:hover {
  color: var(--frutilla);
}

.volver:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Grilla del catálogo ──────────────────────────────────────────────
   Foto y nombre nomás: el detalle vive en la página de cada producto. Con la
   descripción completa acá había que scrollear muchísimo para ver qué más hay. */
.grilla {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
  .grilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grilla--chica {
  margin-top: var(--s5);
}

.ficha-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: 22px;
  background-color: var(--crema-hondo);
  border: 1px solid rgba(46, 42, 37, 0.08);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.3s var(--spring),
    border-color 0.2s ease;
}

.ficha-card:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 42, 37, 0.2);
}

.ficha-card:focus-visible {
  outline: 2px solid var(--frutilla);
  outline-offset: 3px;
}

.ficha-card .calado {
  aspect-ratio: 4 / 5;
}

.ficha-card:hover .calado img {
  transform: scale(1.03);
}

.ficha-card:hover .calado::after {
  box-shadow:
    inset 0 0 0 1px rgba(46, 42, 37, 0.3),
    inset 0 0 18px rgba(120, 72, 32, 0.55);
}

.ficha-card__body {
  padding: 0 var(--s1) var(--s2);
}

.ficha-card__body h2,
.ficha-card__body h3 {
  font-size: 1.25rem;
}

.ficha-card__body p {
  margin-top: 2px;
  color: rgba(46, 42, 37, 0.72);
}

@media (max-width: 480px) {
  .ficha-card__body h2,
  .ficha-card__body h3 {
    font-size: 1.0625rem;
  }
  .ficha-card__body p {
    display: none; /* En dos columnas angostas el resumen no entra */
  }
}

.producto {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s6);
  border-top: 1px solid rgba(46, 42, 37, 0.14);
  align-items: start;
}

/* Única ficha de la página: no necesita la línea que la separa de la anterior.
   Sin padding abajo, porque la columna de fotos suele ser más alta que la de
   texto y dejaba un hueco muerto antes de "Otros productos". */
.producto--solo {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.producto__nota {
  margin-top: var(--s3);
  color: rgba(46, 42, 37, 0.72);
}

@media (min-width: 800px) {
  .producto {
    grid-template-columns: 5fr 7fr;
    gap: var(--s7);
  }
}

.producto .calado {
  aspect-ratio: 4 / 5;
}

/* ── Galería del producto ─────────────────────────────────────────────
   Una foto por vez. Con las seis variantes de las libretas desplegadas la
   ficha era una tira larga y ninguna foto se miraba en serio.
   La pista es un scroller con snap: en el celular se pasa con el dedo y no
   hace falta JS para eso. Las flechas y las miniaturas la mueven. */
.galeria {
  display: grid;
  gap: var(--s2);
}

.galeria__marco {
  position: relative;
}

.galeria__pista {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.galeria__pista::-webkit-scrollbar {
  display: none;
}

.galeria__foto {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 5;
}

/* Van sobre la foto: en crema, no en tostado, para que se despeguen del
   producto sin taparlo. */
.galeria__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  background-color: var(--crema);
  border-color: rgba(46, 42, 37, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.galeria__flecha:hover:not(:disabled) {
  background-color: var(--crema-hondo);
}

.galeria__flecha--anterior {
  left: var(--s2);
}

.galeria__flecha--siguiente {
  right: var(--s2);
}

/* Con mouse no hay swipe, así que las flechas hacen falta: aparecen al
   acercarse al marco para no estar siempre encima de la foto. */
.galeria__flecha {
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.25s var(--spring),
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.galeria__marco:hover .galeria__flecha,
.galeria__flecha:focus-visible {
  opacity: 1;
}

.galeria__marco:hover .galeria__flecha:disabled {
  opacity: 0.32;
}

/* En pantalla táctil sobran —se pasa con el dedo— y sólo taparían el producto */
@media (hover: none) {
  .galeria__flecha {
    display: none;
  }
}

.galeria__minis {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  /* Deja lugar al anillo de la activa, que si no se corta */
  padding: 2px;
  margin: -2px;
}

.galeria__minis::-webkit-scrollbar {
  display: none;
}

/* La miniatura repite el calado en chico: papel salvia y canto quemado */
.mini {
  flex: 0 0 auto;
  width: 62px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--salvia);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(46, 42, 37, 0.22);
  transition:
    box-shadow 0.2s ease,
    transform 0.25s var(--spring);
}

.mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Estado de interfaz, no tratamiento de la foto: la que se está viendo va
     entera y las otras se corren un paso atrás. */
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.mini:hover {
  transform: translateY(-2px);
}

.mini:hover img {
  opacity: 1;
}

.mini[aria-current="true"] {
  box-shadow:
    inset 0 0 0 1px rgba(46, 42, 37, 0.22),
    0 0 0 2px var(--tierra);
}

.mini[aria-current="true"] img {
  opacity: 1;
}

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

.producto__copy > * + * {
  margin-top: var(--s3);
}

.producto__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.ficha {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(46, 42, 37, 0.14);
}

.ficha div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--s3);
  font-size: 0.9375rem;
}

@media (max-width: 560px) {
  .ficha div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.ficha dt {
  color: var(--arcilla-texto);
  font-weight: 600;
}

.ficha dd {
  margin: 0;
}

.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.producto__acciones .btn--sumar {
  width: auto;
}

/* ── Accesos fijos ────────────────────────────────────────────────────
   WhatsApp, Instagram y ayuda. Una sola columna en la esquina: tres botones
   sueltos por la pantalla se leen como parches pegados encima del diseño. */
.flotantes {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition:
    bottom 0.35s var(--spring),
    opacity 0.25s ease;
}

/* Con el panel abierto la columna queda debajo y estorba */
body.pedido-abierto .flotantes {
  opacity: 0;
  pointer-events: none;
}

.flotante {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background-color: var(--crema);
  border: 1px solid rgba(46, 42, 37, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  color: var(--tierra);
  cursor: pointer;
  transition:
    transform 0.25s var(--spring),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.flotante svg {
  width: 20px;
  height: 20px;
  display: block;
}

.flotante:hover {
  transform: translateY(-2px);
  background-color: var(--verde-campo);
  border-color: var(--verde-campo);
  color: var(--crema);
}

.flotante:active {
  transform: translateY(0);
}

/* Por WhatsApp se cierra todo: va lleno y los otros dos acompañan. Un solo
   botón con peso se lee mejor que tres compitiendo. */
.flotante--wa {
  background-color: var(--verde-campo);
  border-color: var(--verde-campo);
  color: var(--crema);
  box-shadow: inset 0 0 0 1px rgba(46, 42, 37, 0.25);
}

.flotante--wa:hover {
  background-color: var(--verde-hondo);
  border-color: var(--verde-hondo);
}

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

.flotante__nombre {
  position: absolute;
  right: calc(100% + var(--s1));
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.4rem var(--s2);
  border-radius: 999px;
  background-color: var(--tierra);
  color: var(--crema);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .flotante:hover .flotante__nombre,
  .flotante:focus-visible .flotante__nombre {
    opacity: 1;
  }
}

/* Bajo 860px la barra del pedido ocupa el ancho completo: la columna se
   corre arriba de la barra en vez de quedar encima. */
@media (max-width: 860px) {
  body.con-pedido .flotantes {
    bottom: calc(var(--s4) + var(--alto-barra, 64px) + var(--s2));
  }
}

@media (max-width: 400px) {
  .flotantes {
    right: var(--s2);
    bottom: var(--s2);
    gap: var(--s1);
  }
  .flotante {
    width: 42px;
    height: 42px;
  }
}

/* ── Cómo funciona ────────────────────────────────────────────────────
   El pedido no es un carrito de compras: conviene decir qué hace y qué no. */
.ayuda {
  width: min(560px, calc(100% - var(--s4) * 2));
  max-height: min(84vh, 720px);
  padding: 0;
  border: 1px solid rgba(46, 42, 37, 0.2);
  border-radius: 22px;
  background-color: var(--crema);
  color: var(--tierra);
  overflow: auto;
}

.ayuda::backdrop {
  background-color: rgba(46, 42, 37, 0.55);
}

.ayuda[open] {
  animation: ayuda-entra 0.35s var(--spring);
}

@keyframes ayuda-entra {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

.ayuda__cuerpo {
  padding: var(--s4) var(--s4) 0;
}

.ayuda__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.ayuda__head h2 {
  font-size: 1.5rem;
  margin-top: var(--s1);
}

.ayuda__intro {
  margin-top: var(--s3);
  color: rgba(46, 42, 37, 0.78);
}

/* Numerada de verdad: el orden es la información. Es la misma secuencia que
   sigue alguien armando el pedido. */
.ayuda__pasos {
  counter-reset: paso;
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
}

.ayuda__pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s2);
  padding-block: var(--s2);
}

.ayuda__pasos li + li {
  border-top: 1px solid rgba(46, 42, 37, 0.12);
}

.ayuda__pasos li::before {
  content: "0" counter(paso);
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--arcilla-texto);
}

.ayuda__pasos h3 {
  font-size: 1.0625rem;
}

.ayuda__pasos p {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: rgba(46, 42, 37, 0.78);
}

.ayuda__nota {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: 14px;
  background-color: var(--crema-hondo);
  color: rgba(46, 42, 37, 0.78);
}

/* En pantallas bajas el diálogo scrollea: pegado abajo, el botón para salir
   queda siempre a mano en vez de esconderse al final del texto. */
.ayuda__pie {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-block: var(--s3) var(--s4);
  background-color: var(--crema);
}

@media (max-width: 560px) {
  .ayuda__cuerpo {
    padding: var(--s4) var(--s3) 0;
  }
  .ayuda__pie .btn {
    flex: 1;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* El grabado del hero pasa directo al estado final */
  .palabra {
    opacity: 1;
    transform: none;
  }
  .laser {
    display: none;
  }
  .hoja {
    animation: none;
    /* Sin parallax: se quedan donde están */
    transform: none !important;
  }
  /* Los números arrancan grabados */
  .step__n::after {
    transform: translateY(101%);
  }
  @view-transition {
    navigation: none;
  }
}

/* ── La acción de la ficha de producto ─────────────────────────────
   "Sumar al pedido" es LA acción de esta página, así que va lleno como el
   resto de los botones principales. En la home NO: ahí hay siete, uno por
   producto, y siete botones rojos en fila le sacan el aire a las fotos, que
   son las que venden. Ahí sigue de contorno.

   Lleno rojo = "hacelo"; lleno verde = "listo, ya está en tu pedido". El
   cambio de color es el que avisa, no un cartel aparte. */
.producto__acciones .btn--sumar {
  background-color: var(--frutilla);
  border-color: transparent;
  color: var(--crema);
  box-shadow: inset 0 0 0 1px rgba(46, 42, 37, 0.25);
}

.producto__acciones .btn--sumar:hover {
  background-color: var(--frutilla-hover);
  border-color: transparent;
}

/* Va con un selector más específico que el de arriba a propósito: si no, al
   estar después en el archivo, el rojo le ganaría al verde del estado sumado. */
.producto__acciones .btn--sumar[aria-pressed="true"] {
  background-color: var(--verde-campo);
  border-color: var(--verde-campo);
}

.producto__acciones .btn--sumar[aria-pressed="true"]:hover {
  background-color: var(--verde-hondo);
  border-color: var(--verde-hondo);
}

/* ── La ficha en pantallas angostas ────────────────────────────────
   En una sola columna el botón quedaba a más de mil píxeles de scroll: foto,
   miniaturas, etiquetas, título, tres párrafos y la tabla de medidas antes de
   poder hacer nada. Acá la acción sube y queda pegada a la primera frase, que
   es la que dice qué es el producto. El detalle largo y las medidas bajan:
   quien los quiera, los busca.

   Se pasa a flex con gap porque el espaciado venía de `* + *`, que mira el
   orden del HTML y no el visual: con `order` los márgenes habrían quedado
   puestos en los elementos equivocados. */
@media (max-width: 799px) {
  .producto__copy {
    display: flex;
    flex-direction: column;
    /* Un paso menos que en desktop: etiquetas, título y primera frase son una
       sola unidad y se leen mejor juntas. */
    gap: var(--s2);
  }

  .producto__copy > * + * {
    margin-top: 0;
  }

  .producto__tags {
    order: 1;
  }
  .producto__copy > h1 {
    order: 2;
  }
  .producto__copy > h1 + p {
    order: 3;
  }
  .producto__acciones {
    order: 4;
  }
  .producto__copy > p.producto__nota {
    order: 5;
  }
  .producto__copy > p {
    order: 6;
  }
  .producto__copy > .ficha {
    order: 7;
  }
}

/* Las miniaturas se achican un punto: son navegación, no producto, y cada
   píxel que ceden acerca el botón de sumar a la primera pantalla.
   La foto grande se deja en 4/5. Probamos pasarla a cuadrada para ganar 86px
   y no va: el recorte centrado se come el borde de abajo, y ahí es donde está
   el grabado en las libretas y la lapicera en el set de escritorio. Es
   justamente lo que se vende. */
@media (max-width: 799px) {
  .mini {
    width: 52px;
  }
}