@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/playfair-latin-v40.woff2') format('woff2'); }
/* Alquimia Stone — hoja de estilo del sitio.
   Paleta y tipografias tomadas del prototipo de Claude Design. */

/* --------------------------------------------------------------------
   :root UNICO. Antes habia dos bloques (uno aqui, otro cerca de la linea
   532) y el segundo ganaba en cascada porque venia despues: los cuatro
   colores de marca y las cuatro fuentes que de verdad se ven en el sitio
   ya eran los de este bloque. Se fusiona en uno solo para que editar un
   token en un solo sitio tenga efecto, sin cambiar ningun valor vivo. */
:root {
  --crema: #f4ece0;
  --crema-2: #f9f6f0;
  --arena: #e6d5b8;
  --tinta: #3e2723;
  --tierra: #8a5a3c;
  --cobre: #9b4919;
  --cobre-osc: #783511;
  --olivo: #556333;
  --olivo-osc: #4e5730;
  --borde: rgba(107, 74, 46, .18);
  --serif: 'Playfair Display', Georgia, serif;
  --display: 'Playfair Display', Georgia, serif;
  --italica: Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1240px;

  /* Colores que hasta hoy estaban escritos a mano en media docena de
     reglas sueltas. Mismo valor, ahora con nombre y un solo lugar donde
     cambiarlos. */
  --sobre-cobre: #fff7ea;   /* texto sobre --cobre / --cobre-osc */
  --sobre-olivo: #f2e3c7;   /* texto sobre --olivo / --olivo-osc */
  --rojo: #8c2f2f;          /* aviso de agotado */
  --rojo-tinta: #7d2f1c;    /* texto del error de checkout */
  --rojo-fondo: #f6e2dc;    /* fondo del error de checkout */
  --esqueleto-1: #e9dfd0;   /* base del hueso de carga */
  --esqueleto-2: #f6efe3;   /* brillo del hueso de carga */

  /* Espaciado — escala 4. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --margen-lateral: clamp(20px, 5vw, 48px); /* pasa a 16px fijo en <=720px */
  --toque: 44px;         /* area tactil minima, obligatoria */
  --toque-comodo: 48px;  /* accion primaria y todo campo de formulario */
  --sep-toque: 12px;     /* separacion minima entre dos controles vecinos */

  /* Radio. */
  --r1: 8px;     /* campos, chips pequenos */
  --r2: 12px;    /* tarjetas, avisos, esqueletos */
  --r3: 18px;    /* paneles y resumen */
  --r4: 20px;    /* hoja inferior: se aplica como 20px 20px 0 0 */
  --r-pil: 999px; /* botones y filtros */

  /* Elevacion. --elev2 es el --sombra de siempre; --sombra queda como
     alias para no reescribir las reglas que ya lo usan. */
  --elev0: none;
  --elev1: 0 1px 2px rgba(60, 39, 35, .06);
  --elev2: 0 6px 18px rgba(60, 39, 35, .07);
  --sombra: var(--elev2);
  --elev3: 0 -6px 20px rgba(30, 18, 14, .14);  /* barra fija inferior: sombra HACIA ARRIBA */
  --elev4: 0 -10px 34px rgba(30, 18, 14, .22); /* cajon abierto como hoja inferior */

  /* Movimiento. */
  --dur-toque: 90ms; --dur-1: 140ms; --dur-2: 200ms; --dur-3: 260ms; --shimmer: 1400ms;
  --curva-estandar: cubic-bezier(.4, 0, .2, 1);
  --curva-salida:   cubic-bezier(.32, .72, 0, 1);
  --curva-entrada:  cubic-bezier(.4, 0, 1, 1);

  /* Area segura y medidas vivas. app.js mide .nav y .barra-accion con un
     ResizeObserver y sobreescribe --alto-nav / --alto-barra; estos son
     solo el respaldo para que la pagina ya sea correcta antes de que
     corra el script. */
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq:   env(safe-area-inset-left, 0px);
  --seguro-der:   env(safe-area-inset-right, 0px);
  --alto-nav: 96px;
  --alto-barra: 0px;
  --alto-foto-ficha: clamp(220px, 40svh, 340px);
  --alto-foto-hero:  clamp(240px, 46svh, 420px);
}

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

/* `hidden` tiene que ganarle a cualquier `display` de clase: el cajon del
   carrito es `display:flex` y sin esto aparecia abierto al cargar. */
[hidden] { display: none !important; }

/* Unica utilidad para texto solo-lector: nunca display:none (eso lo
   sacaria del arbol de accesibilidad). */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

html {
  scroll-behavior: smooth;
  /* Antes 140px fijo: con nav distinta en ingles (envuelve distinto) ese
     numero deja de ser correcto. Se mide, no se adivina. */
  scroll-padding-top: calc(var(--alto-nav) + 12px);
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* Reemplaza los dos padding-bottom fijos (68px y 88px) que asumian una
     sola barra de un alto conocido: ahora el alto lo publica app.js segun
     que barra este realmente visible, o 0 si no hay ninguna. */
  padding-bottom: calc(var(--alto-barra) + var(--seguro-abajo));
}
body.sin-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; }
a { color: var(--cobre); }
a:hover { color: var(--cobre-osc); }
::selection { background: rgba(107, 122, 63, .22); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0 0 .4em; }
h1 { font-size: clamp(30px, 5vw, 48px); }
h2 { font-size: clamp(24px, 3.6vw, 34px); }
h3 { font-size: 18px; }

.cejilla {
  font-family: var(--display);
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--cobre);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.cejilla b { color: var(--c, var(--cobre)); }
.lema { font-family: var(--italica); font-style: italic; font-size: 19px; color: var(--tierra); }
.centro { text-align: center; }
.nota { font-size: 12.5px; color: var(--tierra); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--crema); padding: 10px 16px;
}
.saltar:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--olivo-osc); outline-offset: 4px; }

/* --- Navegacion ---------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px clamp(16px, 4vw, 48px);
  background: #eee1ce;
  border-bottom: 1px solid var(--borde);
  /* Nunca material traslucido en la nav: es una de las dos barras donde
     esta prohibido, y aqui no hacia falta para que el par de contraste
     pasara. */
}
.marca { display: flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; color: inherit; }
.marca img { width: 42px; height: 42px; border-radius: 50%; background: rgba(249, 246, 240, .7); padding: 4px; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt b { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.marca-txt i { font-family: var(--display); font-style: normal; font-size: 9px; letter-spacing: .18em; color: var(--tierra); }

.nav-links { display: flex; gap: 22px; }
.nav-links a {
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--tinta); text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque);
  transition: color var(--dur-1) var(--curva-estandar), border-color var(--dur-1) var(--curva-estandar);
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--cobre); border-bottom-color: var(--cobre); }

.nav-acc { display: flex; align-items: center; gap: 12px; }
.idioma {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: none;
  color: var(--tinta); border: 1.5px solid var(--borde); border-radius: var(--r-pil); padding: 5px 11px;
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque);
  transition: color var(--dur-1) var(--curva-estandar), border-color var(--dur-1) var(--curva-estandar);
}
.idioma:hover { border-color: var(--cobre); color: var(--cobre); }
.carrito-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--tinta); padding: 6px; display: flex;
  min-width: var(--toque); align-items: center; justify-content: center;
  touch-action: manipulation;
}
.carrito-n {
  position: absolute; top: -2px; right: -4px;
  background: var(--cobre); color: var(--sobre-cobre);
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 17px; padding: 3px 4px; border-radius: var(--r-pil); text-align: center;
}

/* --- Botones -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  padding: 12px 22px; border-radius: var(--r-pil); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  min-height: var(--toque-comodo); font-size: 15px;
  touch-action: manipulation;
  transition: background-color var(--dur-1) var(--curva-estandar),
              color var(--dur-1) var(--curva-estandar),
              border-color var(--dur-1) var(--curva-estandar),
              transform var(--dur-toque) var(--curva-estandar),
              filter var(--dur-toque) var(--curva-estandar);
}
.btn-primario { background: var(--cobre); color: var(--sobre-cobre); }
.btn-primario:hover { background: var(--cobre-osc); color: var(--sobre-cobre); }
.btn-primario[disabled] { background: #c3b6a6; color: #453c33; cursor: not-allowed; }
.btn-borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn-borde:hover { background: var(--tinta); color: var(--crema); }
.btn-sm { padding: 9px 15px; font-size: 12.5px; }
.btn-bloque { width: 100%; }
.btn-wa { background: #25d366; color: #06301a; }
button:disabled { cursor: not-allowed; }

/* Confirmacion visible del toque: escala + brillo, 90ms. Se aplica a todo
   control tactil de la lista cerrada del contrato de movimiento. */
.btn:active, .filtro:active, .cantidad-btn:active, .cajon-cerrar:active, .barra-wa:active {
  transform: scale(.97);
  filter: brightness(.96);
}

/* Boton que tarda: la etiqueta ya cambia a gerundio desde afuera
   (K.procesando); aqui solo se dibuja el anillo. Bajo movimiento
   reducido el anillo desaparece (ver el bloque de mas abajo): un
   girador detenido se lee como proceso colgado. */
.btn-cargando { position: relative; padding-left: 40px; }
.btn-cargando::after {
  content: ''; position: absolute; left: 14px; top: 50%; margin-top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Estructura ----------------------------------------------------- */
main { display: block; }
main > section, main > article, main > nav { max-width: var(--ancho); margin: 0 auto; padding: clamp(36px, 6vw, 68px) clamp(20px, 5vw, 48px); }
main > nav.miga { padding-bottom: 0; }
.miga a { font-size: 13px; font-weight: 600; text-decoration: none; }

/* --- Portada -------------------------------------------------------- */
/* El hero ya no es dos columnas: la portada es un banner con el frasco a
   la derecha y la mitad izquierda vacia a proposito, asi que la foto va
   detras y el texto encima de ese espacio libre. */
.hero { position: relative; display: grid; align-items: center; min-height: clamp(360px, 42vw, 560px); }
.hero-foto { position: absolute; inset: 0; z-index: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* La foto terminaba en un canto duro contra el fondo de la pagina y se
   leia como una diapositiva pegada. Este degradado la funde con el crema
   del sitio: abajo, donde arrancan los sellos, y a la izquierda, para que
   el texto no compita con la luz del fondo. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 74%, color-mix(in srgb, var(--crema) 55%, transparent) 90%, var(--crema) 100%),
    linear-gradient(to right, var(--crema) 0%, color-mix(in srgb, var(--crema) 45%, transparent) 32%, transparent 54%);
}
.hero-txt { position: relative; z-index: 1; max-width: 49%; }
.hero h1 { max-width: 13ch; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.09; }
.hero-sub { font-size: 17px; line-height: 1.65; color: #55403a; max-width: 46ch; }
.insignia {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  background: rgba(107, 122, 63, .14); color: var(--olivo-osc);
  padding: 6px 13px; border-radius: var(--r-pil);
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
/* Tableta: el banner se cambia por dos columnas y la foto vuelve al flujo. */
@media (max-width: 860px) {
  .hero-txt { max-width: none; }
  .hero { display: grid; grid-template-columns: 1.1fr .8fr; gap: 22px; }
  .hero-foto { position: static; margin: 0; align-self: center; }
  .hero-foto img { aspect-ratio: 4 / 5; object-fit: contain; }
  .hero::after { display: none; }
  .hero h1 { font-size: clamp(32px, 5.6vw, 48px); }
  .hero-btns { gap: 8px; }
  .sellos { margin-top: 0; }
}

.sellos {
  list-style: none; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px) clamp(24px, 4vw, 40px);
  max-width: var(--ancho);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  position: relative; z-index: 1; margin-top: -34px;
}
.sellos li {
  background: var(--crema-2); border: 1px solid var(--borde); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--elev2);
}
.sellos b { display: block; font-family: var(--serif); font-size: 15.5px; }
.sellos span { font-size: 12.5px; color: var(--tierra); }

.historia { text-align: center; background: var(--arena); max-width: none; }
.historia blockquote {
  font-family: var(--italica); font-style: italic; font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.5; max-width: 46ch; margin: 0 auto 22px; color: #4a3128;
}
.aclaracion { text-align: center; }
.aclaracion p { max-width: 62ch; margin: 0 auto; color: #55403a; }
.alianza { text-align: center; background: var(--crema-2); max-width: none; }
.alianza p { max-width: 58ch; margin: 0 auto 20px; color: #55403a; }

/* --- Rejilla y tarjetas --------------------------------------------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 22px; }
.celda[hidden] { display: none; }

.tarjeta {
  background: var(--crema-2); border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dur-1) var(--curva-estandar), border-color var(--dur-1) var(--curva-estandar), box-shadow var(--dur-1) var(--curva-estandar);
}
.tarjeta:hover { border-color: var(--tierra); }
/* El levantamiento al pasar el mouse es un gesto de puntero fino: en
   tactil no hay hover real y el navegador lo simula al primer toque, asi
   que se retira para no dejar tarjetas "levantadas" despues de tocar. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--elev2); }
}
/* 4:5, la proporcion en que vienen las fotos. Con la misma proporcion,
   `cover` no recorta nada; con `aspect-ratio: 1` cortaba tapas y bases. */
.tarjeta-foto { position: relative; display: block; background: var(--arena); aspect-ratio: 4 / 5; }
.tarjeta-foto picture { position: absolute; inset: 0; display: block; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; }
.pastilla {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em;
  /* Unico pastel que se apoya sobre fotografia: con --olivo-osc (mas
     oscuro que el --olivo viejo) el par sobre foto variable sube de
     5.15:1 hacia arriba en vez de bajar. */
  background: color-mix(in srgb, var(--olivo-osc) 92%, transparent);
  color: var(--sobre-olivo);
  padding: 4px 9px; border-radius: var(--r-pil);
}
.pastilla-agotado { left: auto; right: 11px; background: rgba(62, 39, 35, .93); }
.tarjeta-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.tarjeta-tit { display: flex; align-items: center; gap: 8px; }
.tarjeta-tit h3 { margin: 0; font-size: 17.5px; }
.tarjeta-tit a { text-decoration: none; color: inherit; }
.tarjeta-tit a:hover { color: var(--cobre); }
.punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--cobre)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--cobre)) 32%, transparent); }
.tarjeta-prop { font-family: var(--italica); font-style: italic; font-size: 15px; color: var(--tierra); margin: 5px 0 14px; }
.tarjeta-pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.precio { margin-top: auto; }
.precio b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.precio i { display: block; font-style: normal; font-size: 10.5px; color: var(--tierra); }
.precio-grande b { font-size: 28px; }

/* .filtros es el punto de apoyo del catalogo: en escritorio una fila que
   envuelve; en <=720px, la utilidad .tira la convierte en una fila que
   se desliza (ver el bloque movil). */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 32px; }
.filtro {
  cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  padding: 9px 18px; border-radius: var(--r-pil);
  border: 1.5px solid var(--borde); background: var(--crema-2); color: var(--tinta);
  transition: background-color var(--dur-1) var(--curva-estandar), border-color var(--dur-1) var(--curva-estandar), color var(--dur-1) var(--curva-estandar);
}
.filtro:hover { border-color: var(--cobre); }
.filtro.activo { background: var(--olivo); border-color: var(--olivo); color: var(--sobre-olivo); }
/* Nombre corto para la version movil del chip: el nombre accesible
   (aria-label del boton) no depende del punto de corte, solo el texto
   visible. Por defecto se ve el largo; el corto se activa <=720px. */
.filtro-corto { display: none; }
.cat-cab { text-align: center; margin-bottom: 30px; }

/* --- Ficha de producto ---------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.pdp-media {
  position: sticky; top: calc(var(--alto-nav) + 12px);
  height: var(--alto-foto-ficha);
}
.pdp-media picture { display: block; height: 100%; }
.pdp-media img {
  height: 100%; width: auto; max-width: 100%; margin-inline: auto;
  display: block; object-fit: contain; border-radius: 12px; border: 1px solid var(--borde);
}
.pdp-info { min-width: 0; }
.pdp-prop { font-family: var(--italica); font-style: italic; font-size: 20px; color: var(--tierra); margin: 0 0 10px; }
.pdp-linea { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tierra); }
.pdp-compra { border-top: 1px solid var(--borde); padding-top: 12px; margin: 18px 0 24px; }
.pdp-compra .precio { margin: 0; }
.pdp-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.pdp-sensorial { font-size: 16px; color: #55403a; }
.envio-libre { font-size: 12.5px; color: var(--olivo-osc); }
.agotado-aviso { font-weight: 700; color: var(--rojo); }

.sentidos { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sentidos li { background: var(--crema-2); border: 1px solid var(--borde); border-radius: 12px; padding: 11px 13px; min-width: 0; }
.sentidos span { display: block; font-family: var(--display); font-size: 9.5px; letter-spacing: .16em; color: var(--cobre); }
.sentidos b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

.beneficios { list-style: none; padding: 0; margin: 0 0 24px; }
.beneficios li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 15px; }
.beneficios li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--olivo);
}

.acordeon { margin-top: 26px; }
details { border-top: 1px solid var(--borde); }
details summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font-weight: 600; font-size: 14.5px; display: flex; justify-content: space-between; gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details[open] .mas { transform: rotate(45deg); }
.mas { transition: transform 180ms var(--curva-estandar); color: var(--cobre); font-size: 19px; line-height: 1; }
details p { margin: 0 0 16px; font-size: 14.5px; color: #55403a; }

/* Nota de uso propia del producto, dentro del acordeon de precauciones.
   Se separa con un filete para que no se lea como continuacion del texto
   general: aplica solo a este producto. */
.nota-producto {
  border-left: 2px solid #c8a882;
  padding-left: 12px;
  color: #6b4a2e;
}

.relacionados { border-top: 1px solid var(--borde); }

/* --- FAQ ------------------------------------------------------------ */
.faq { background: var(--crema-2); max-width: none; }
.faq > .cejilla, .faq > h2 { text-align: center; }
.faq-lista { max-width: 800px; margin: 26px auto 0; }
.faq-cta { text-align: center; margin-top: 22px; font-weight: 600; }

/* --- Nosotros y contacto -------------------------------------------- */
/* ---- Paginas de necesidad y de compra local ------------------------- */
.necesidad { max-width: 820px; }
.necesidad h1 { margin-bottom: 18px; }

/* El parrafo citable. Va destacado porque es lo primero que se lee y lo
   unico que un asistente suele extraer: si se pierde entre el resto, se
   pierde la razon de ser de la pagina. */
.respuesta-directa {
  font-family: var(--italica);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.55;
  color: #4a3128;
  background: var(--crema-2);
  border-left: 3px solid var(--olivo);
  border-radius: 0 14px 14px 0;
  padding: 22px 26px;
  margin: 0 0 34px;
}

.necesidad .bloque { margin: 30px 0; }
.necesidad .bloque h2 { font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 10px; }
.necesidad .bloque p { color: #55403a; margin: 0; }
.necesidad .rejilla { margin-bottom: 8px; }

.elegir-lista { margin: 0; display: grid; gap: 16px; }
.elegir-lista dt { font-family: var(--serif); font-size: 18px; margin-bottom: 3px; }
.elegir-lista dt a { color: var(--tierra); text-decoration: none; }
.elegir-lista dt a:hover { text-decoration: underline; }
.elegir-lista dd { margin: 0; color: #55403a; }

.lista-simple, .otras-lineas { margin: 0; padding-left: 20px; color: #55403a; }
.otras-lineas a { color: var(--tierra); }

.aviso-legal {
  font-size: 13px; line-height: 1.6; color: #6b4a2e;
  background: var(--arena); border-radius: 12px; padding: 16px 18px; margin: 30px 0;
}

/* Enlaces a las paginas de necesidad, en el catalogo y en el pie. */
.cat-necesidades { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--borde); }
.cat-necesidades h2 { font-size: 19px; margin: 0 0 12px; }
.cat-necesidades ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cat-necesidades a { color: var(--tierra); }

.pie-necesidades {
  max-width: var(--ancho); margin: 26px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(232, 220, 201, .16);
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px;
}
.pie-necesidades a { color: #d8c3a5; text-decoration: none; }
.pie-necesidades a:hover { text-decoration: underline; }

/* ---- Checkout por pasos --------------------------------------------- */
.pasos {
  list-style: none; display: flex; flex-wrap: nowrap; gap: 12px; margin: 0 0 26px; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--tierra);
}
.pasos li { display: flex; align-items: center; gap: 7px; opacity: .45; }
.pasos li + li::before { content: ""; width: 18px; height: 1px; background: var(--borde); margin-right: 6px; }
.pasos li span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--arena); color: var(--tinta); font-size: 11.5px;
}
.pasos li.activo { opacity: 1; color: var(--tinta); }
.pasos li.activo span { background: var(--cobre); color: var(--sobre-cobre); }
.pasos li.hecho { opacity: .8; }
.pasos li.hecho span { background: var(--olivo); color: var(--sobre-cobre); }

.paso { border: 0; margin: 0; padding: 0; scroll-margin-top: calc(var(--alto-nav) + 12px); }
.paso legend { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 25px); margin-bottom: 4px; padding: 0; }
/* Al pie de cada legend: nada lleva asterisco, se marca al reves. */
.paso-nota { font-size: 12.5px; color: var(--tierra); margin: 0 0 14px; }
/* Cambio de paso: solo entra el que aparece, nunca sale nada (el saliente
   ya esta [hidden] antes de que el CSS pueda animarlo). */
.paso { animation: entrarPaso 160ms var(--curva-estandar); }
@keyframes entrarPaso { from { opacity: 0; } to { opacity: 1; } }

.campo { margin: 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.campo label, .campo-etiqueta { font-size: 13px; font-weight: 600; }
.campo-etiqueta { margin: 22px 0 10px; }
.campo-opcional { font-weight: 400; color: var(--tierra); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 16px; color: var(--tinta);
  background: var(--crema-2); border: 1.5px solid var(--borde); border-radius: var(--r1);
  padding: 11px 13px; width: 100%; min-height: var(--toque-comodo);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--cobre);
}
.campo-ayuda { font-size: 12px; color: var(--tierra); }
/* Validacion en linea al perder el foco, no burbuja nativa. */
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); }
.campo-error { font-size: 12px; color: var(--rojo-tinta); font-weight: 600; }

.opciones { list-style: none; padding: 0; margin: 0; }
.opciones li { border: 1.5px solid var(--borde); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.opciones label {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 14px 16px; cursor: pointer; min-height: 56px;
}
.opciones label input[type="radio"] { width: 22px; height: 22px; accent-color: var(--olivo); }
.opciones label b { font-size: 14.5px; }
.opciones label span { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--tierra); }
.opciones label i { font-style: normal; font-weight: 600; font-size: 13.5px; }
.opcion-info { font-size: 12.5px; color: var(--tierra); padding: 0 15px 12px; margin: 0; }

/* El resumen pasa a <details>: cerrado por defecto (comportamiento nativo
   sin `open`), abierto en escritorio porque app.js fija details.open en
   ese punto de corte. El total, que es el dato ancla, queda en el
   <summary> y por eso sigue visible aunque este cerrado. */
.checkout-resumen { background: var(--crema-2); border: 1px solid var(--borde); border-radius: 12px; padding: 0; position: sticky; top: 88px; }
.resumen-sumario {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-height: var(--toque-comodo);
  padding: var(--e4) var(--e5);
  font-family: var(--serif); font-weight: 600; font-size: 16px;
}
.resumen-sumario::-webkit-details-marker { display: none; }
.checkout-resumen[open] .resumen-sumario { border-bottom: 1px solid var(--borde); }
.checkout-resumen ul { list-style: none; padding: 0; margin: 14px var(--e5) 14px; }
/* El titulo y las notas tambien llevan el margen lateral del resto del
   panel; sin el quedaban pegados al borde, desalineados de la lista. */
.checkout-resumen h2 { margin: var(--e4) var(--e5) 0; }
.checkout-resumen .nota { margin-left: var(--e5); margin-right: var(--e5); }
.checkout-resumen .nota:last-child { margin-bottom: var(--e5); }
/* Las lineas de producto y los totales son la misma columna visual, asi
   que comparten un solo sistema de alineacion (grid 1fr/auto) en vez de
   flex arriba y grid abajo: dos mecanismos distintos para un mismo borde
   derecho son fragiles aunque hoy cuadren por calculo. */
.checkout-resumen li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; padding: 6px 0; }
.checkout-resumen li b { text-align: right; }
.checkout-resumen dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; border-top: 1px solid var(--borde); padding-top: 12px; margin: 0 var(--e5) var(--e5); }
.checkout-resumen dt { font-size: 13.5px; } .checkout-resumen dd { margin: 0; text-align: right; font-size: 13.5px; }
.checkout-resumen .fuerte { font-family: var(--serif); font-size: 18px; font-weight: 600; }
/* Cifras en tabular para que los digitos no salten de ancho entre filas
   cuando cambia la cantidad o el total. */
.checkout-resumen li b, .checkout-resumen dd, .resumen-sumario { font-variant-numeric: tabular-nums; }
.checkout-vacio { text-align: center; padding: 40px 0; }

/* El boton de WhatsApp va en cada paso: si el cliente prefiere hablarlo,
   interesa que escriba, no que cierre la pestana. */
.checkout-wa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--borde);
  font-size: 13px; color: var(--tierra);
}
.checkout-wa .btn { gap: 7px; }

.checkout-nav { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.checkout-nav .btn { white-space: normal; }
.checkout-error {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--rojo-fondo); color: var(--rojo-tinta); font-size: 14px;
}

/* ---- Confirmacion del pedido ---------------------------------------- */
.pedido { max-width: 720px; scroll-margin-top: calc(var(--alto-nav) + 12px); }
.pedido-ref-etiqueta { font-size: 13px; color: var(--tierra); margin: 24px 0 2px; }
.pedido-ref {
  font-family: var(--display); font-size: clamp(30px, 6vw, 44px); letter-spacing: .1em;
  margin: 0 0 6px; color: var(--cobre); overflow-wrap: anywhere;
}
.pedido-mensaje {
  background: var(--crema-2); border-left: 3px solid var(--olivo); border-radius: 0 12px 12px 0;
  padding: 16px 18px; margin: 24px 0; color: #55403a;
}
.pedido-resumen { border-top: 1px solid var(--borde); padding-top: 18px; }
.pedido-resumen ul { list-style: none; margin: 0 0 14px; padding: 0; }
.pedido-resumen li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14.5px; }
.pedido-resumen dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; font-size: 14.5px; }
.pedido-resumen dd { margin: 0; text-align: right; }
.pedido-resumen .fuerte { font-weight: 700; font-size: 17px; }
.pedido-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }

/* Esqueleto de /pedido/ mientras corre fetch('/api/pedidos/:ref'). Piezas
   genericas (.esqueleto-linea, .esqueleto-bloque) que el marcado combina
   con la silueta real: referencia, mensaje, tres filas de articulo y
   totales. Nunca gira, nunca pantalla en blanco. */
.esqueleto, .esqueleto-linea, .esqueleto-bloque {
  background: linear-gradient(90deg, var(--esqueleto-1) 25%, var(--esqueleto-2) 50%, var(--esqueleto-1) 75%);
  background-size: 200% 100%;
  animation: brillo var(--shimmer) linear infinite;
  border-radius: var(--r2);
}
.esqueleto-linea { display: block; height: 1em; }
.esqueleto-bloque { display: block; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.esqueleto-pedido { display: grid; gap: var(--e4); }
.esqueleto-pedido .esqueleto-bloque { width: 100%; }

/* ---- Paginas legales ------------------------------------------------ */
.legal { max-width: 760px; }
.legal h1 { margin-bottom: 6px; }
.legal-fecha { font-size: 13px; color: var(--tierra); margin: 0 0 26px; }
.legal .bloque { margin: 26px 0; }
.legal .bloque h2 { font-size: clamp(18px, 2.2vw, 21px); margin: 0 0 8px; }
.legal .bloque p { color: #55403a; margin: 0; font-size: 15.5px; }

.pie-legal-enlaces { display: flex; gap: 18px; }
.pie-legal-enlaces a { color: #b39c86; text-decoration: underline; }
.pie-legal-enlaces a:hover { color: var(--crema); }

.nosotros { max-width: 780px; }
.nosotros p { font-size: 16.5px; color: #55403a; }
.nosotros .destacado {
  background: rgba(107, 122, 63, .10); border-left: 3px solid var(--olivo);
  padding: 14px 18px; border-radius: 0 10px 10px 0;
}
/* La frase de resiliencia abre la pagina: cita grande, con presencia. */
.nosotros .resiliencia {
  font-family: var(--italica); font-style: italic; font-size: clamp(21px, 3vw, 29px);
  line-height: 1.5; color: #4a3128; margin: 8px 0 36px; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--cobre); max-width: 34em;
}
.nosotros-seccion { margin: 0 0 26px; }
.nosotros-seccion h2 { font-size: clamp(20px, 2.6vw, 25px); margin-bottom: 8px; }
.nosotros-seccion p { margin: 0; }
/* Avisos al final: aparte del relato, sobrios. Los .sellos traen su propio
   margen y relleno de portada; aqui se anulan. */
.nosotros .avisos {
  margin: 36px 0 28px; padding: 20px 22px; border: 1px solid var(--borde);
  border-radius: var(--r2); background: var(--crema-2);
}
.nosotros .avisos h2 {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tierra); margin: 0 0 10px;
}
.nosotros .avisos > p { font-size: 15px; margin: 0 0 18px; }
/* Los sellos de venta salieron del bloque de avisos (en una caja llamada
   «Avisos» se leian como advertencias). Como ya no estan dentro, heredaban el
   margen negativo y el relleno de la portada y quedaban mas angostos que el
   resto de la pagina: aqui se ajustan al ancho del contenido. */
.nosotros > .sellos {
  margin: 0 0 28px; padding: 0; max-width: none; z-index: auto;
  /* Son cuatro: con columnas de 190px y 684px de ancho salian 3 + 1 y uno
     quedaba huerfano. Con 150px caben los cuatro en fila, y en pantallas
     angostas se reparten 2 + 2. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.nosotros figure { margin: 28px 0; }
.nosotros figure img { border-radius: 18px; }

.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.canales, .envios { list-style: none; padding: 0; margin: 0 0 26px; }
.canales li, .envios li { border-bottom: 1px solid var(--borde); padding: 13px 0; }
.canales a { text-decoration: none; color: inherit; display: block; }
.canales b, .envios b { display: block; font-family: var(--serif); font-size: 16px; }
.canales span, .envios span { font-size: 13px; color: var(--tierra); }

.form { background: var(--crema-2); border: 1px solid var(--borde); border-radius: 18px; padding: 24px; }
.form p { margin: 0 0 16px; }
.form label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
.form input, .form textarea, .checkout input, .checkout textarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px;
  padding: 11px 13px; border: 1.5px solid var(--borde); border-radius: 10px;
  background: #fff; color: var(--tinta);
}
.form input:focus, .form textarea:focus, .checkout input:focus, .checkout textarea:focus {
  outline: none; border-color: var(--cobre);
}
.form-nota { font-size: 12px; color: var(--tierra); }

/* --- Checkout -------------------------------------------------------- */
.checkout-cols { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(24px, 4vw, 44px); align-items: start; scroll-margin-top: calc(var(--alto-nav) + 12px); }
.checkout h2 { font-size: 19px; margin-top: 28px; }
.checkout p { margin: 0 0 14px; }

/* --- Cajon del carrito ----------------------------------------------- */
.cajon-fondo {
  position: fixed; inset: 0; background: rgba(30, 18, 14, .45); z-index: 50;
  opacity: 0; transition: opacity var(--dur-2) linear;
}
.cajon-fondo:not([hidden]) { opacity: 1; }
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); z-index: 51;
  background: var(--crema); border-left: 1px solid var(--borde);
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(30, 18, 14, .2);
  max-height: 100dvh; overscroll-behavior: contain;
  /* En escritorio entra por la derecha; en <=720px (mas abajo) se vuelve
     hoja inferior y entra desde abajo. La salida nunca se anima: se
     quita .abierto y se pone [hidden] en la misma vuelta, y [hidden]
     corta la transicion en seco. */
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--curva-salida);
}
.cajon.abierto { transform: translateX(0); }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--borde); }
.cajon-cab h2 { margin: 0; font-size: 19px; }
.cajon-cerrar {
  background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--tinta);
  min-width: var(--toque); min-height: var(--toque);
  display: grid; place-items: center; margin: 0 -10px 0 0;
}
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.cajon-vacio { color: var(--tierra); font-size: 14.5px; }
.cajon-item {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: start;
  gap: var(--e2) var(--e3); padding: 12px 0; border-bottom: 1px solid var(--borde);
}
.cajon-item-foto { grid-row: 1 / 3; width: 56px; height: 70px; border-radius: var(--r1); object-fit: contain; background: var(--arena); }
.cajon-item-txt { grid-column: 2 / 4; grid-row: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cajon-item-txt b { font-family: var(--serif); font-size: 15px; }
.cajon-item-precio { font-size: 13px; color: var(--tierra); }
.cantidad { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cantidad-btn {
  width: var(--toque); height: var(--toque); min-width: var(--toque); min-height: var(--toque);
  border: 1.5px solid var(--borde); background: var(--crema-2); border-radius: var(--r1);
  cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.cantidad-n { width: 40px; text-align: center; font-size: 14px; font-weight: 600; }
.cajon-quitar {
  grid-column: 3; grid-row: 2; justify-self: end; align-self: center;
  min-height: var(--toque); padding: 0 var(--e2);
  font-size: 11.5px; color: var(--tierra); border: none; background: none; text-decoration: underline; cursor: pointer;
}
.cajon-pie { border-top: 1px solid var(--borde); padding: 16px 20px; }
.cajon-total { display: flex; justify-content: space-between; margin-bottom: 12px; }
.cajon-total b { font-family: var(--serif); font-size: 20px; }
.cajon-pie .btn { width: 100%; }

/* --- Pie ------------------------------------------------------------- */
.pie { background: var(--tinta); color: #e8dcc9; margin-top: 40px; padding: clamp(34px, 5vw, 56px) clamp(20px, 5vw, 48px) 24px; }
.pie-cols { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.1fr; gap: 30px; }
.pie h2 { font-family: var(--display); font-size: 11.5px; letter-spacing: .18em; color: #c9a98f; margin-bottom: 12px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 7px; font-size: 13.5px; }
.pie a { color: #e8dcc9; text-decoration: none; }
.pie a:hover { color: #f2c9a0; }
.pie p { font-size: 13.5px; }
.pie-marca b { display: block; font-family: var(--serif); font-size: 19px; margin: 8px 0 4px; }
.pie-marca p { font-family: var(--italica); font-style: italic; color: #c9a98f; }
.pie-aviso { max-width: var(--ancho); margin: 30px auto 0; padding-top: 18px; border-top: 1px solid rgba(232, 220, 201, .16); font-size: 13px; color: #d5c4b0; }
.pie-legal { max-width: var(--ancho); margin: 10px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #d5c4b0; }

/* --- Barra de accion unica (compra o WhatsApp) ------------------------
   Un solo elemento, emitido siempre por layout.js, con su contenido
   segun data-barra. En escritorio la accion ya vive en linea junto al
   precio: la barra no se muestra. INVARIANTE: como maximo una barra fija
   inferior por pagina (esta o la navegacion del checkout, nunca las dos:
   el checkout ya usa data-barra="oculta"). */
.barra-accion { display: none; }

/* --- Adaptable -------------------------------------------------------- */
@media (max-width: 980px) {
  .pdp, .contacto, .checkout-cols { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 24px; }
  .pdp-info h1 { font-size: 32px; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .checkout-resumen { position: static; }
}

/* ======================================================================
   MOVIL, PANTALLA POR PANTALLA — punto de corte unico 720px. Alturas en
   svh (nunca vh) para que la barra del navegador no descuadre la cuenta.
   ====================================================================== */
@media (max-width: 720px) {
  :root { --margen-lateral: 16px; }

  /* --- Nav: dos filas, 96px de alto medido por app.js -------------- */
  .nav { padding: 6px 16px 0; gap: 2px 10px; }
  .marca img { width: 36px; height: 36px; }
  .marca-txt b { font-size: 18px; }
  .marca-txt i { font-size: 8px; }
  .nav-acc { gap: 3px; }
  .nav-acc .idioma, .nav-acc .carrito-btn { min-width: var(--toque); min-height: var(--toque); }
  .nav-links {
    order: 3; width: 100%; flex-wrap: nowrap; gap: 22px;
    /* Los cuatro enlaces caben en 358px a 14px: no hace falta desplazar. */
  }
  .nav-links a { font-size: 14px; white-space: nowrap; min-height: var(--toque); padding-bottom: 0; }

  main > section, main > article { padding: var(--e5) var(--margen-lateral); }
  main > nav.miga { padding: var(--e4) var(--margen-lateral) 0; }
  /* La ficha reparte su presupuesto vertical distinto: la foto ya trae
     su propio aire, asi que el articulo arranca a 16px, no a 24px. */
  body:has(.pdp) main > article { padding-top: var(--margen-lateral); }

  /* --- Portada ------------------------------------------------------ */
  .hero { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .hero-txt { max-width: none; }
  .hero h1 { font-size: 38px; max-width: 13ch; }
  .hero-sub { font-size: 16px; margin-bottom: 12px; }
  /* Foto por altura, no por ancho: a 46svh el borde de .sellos asoma por
     encima del pliegue, que es la senal de que hay mas contenido. */
  .hero-foto { position: static; height: var(--alto-foto-hero); width: 100%; align-self: center; margin: 0; }
  /* display:block es lo que hace que margin-inline:auto centre algo: un
     <img> es inline por defecto (ver regla base "img{}"), asi que sin esto
     el margen automatico no hace nada y la foto queda pegada al borde
     izquierdo de su marco en vez de centrada. */
  .hero-foto img { display: block; height: 100%; width: auto; max-width: 100%; margin-inline: auto; aspect-ratio: auto; object-fit: contain; border-radius: 16px; }
  .hero-btns .btn { flex: 1 1 auto; }
  .sellos { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--margen-lateral) var(--e5); margin-top: 0; }
  .sellos li { padding: 14px; }
  .sellos span { font-size: 13px; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* --- Catalogo y filtros -------------------------------------------
     Antes 4 filas (238px). La utilidad .tira lo vuelve una fila que se
     desliza: el margen negativo mas el padding alinean el primer chip
     con el margen de pagina y recortan el ultimo contra el borde, que es
     la senal de que hay mas. */
  .tira {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: var(--e2); scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; scrollbar-width: none;
    padding: var(--e1) var(--margen-lateral);
    margin-inline: calc(var(--margen-lateral) * -1);
    justify-content: flex-start; margin-bottom: var(--e3);
  }
  .tira::-webkit-scrollbar { display: none; }
  .tira > * { flex: 0 0 auto; scroll-snap-align: start; }
  .filtro-largo { display: none; }
  .filtro-corto { display: inline; }
  .cat-cab { margin-bottom: var(--e4); }
  .cat-cab h1 { font-size: 32px; }
  .tarjeta h3 { font-size: 19px; }
  .tarjeta .btn { padding: 10px 12px; width: 100%; }
  .tarjeta .precio { flex-wrap: wrap; }
  .tarjeta-cuerpo { padding: 14px; }

  /* --- Ficha ---------------------------------------------------------
     Presupuesto de 672px de pliegue util (844 - 96 nav - 76 barra). La
     compra sin scroll la garantiza la barra fija, no el bloque en linea:
     por eso .pdp-btns puede quedar a medio ver, no es un defecto. */
  .pdp { display: flex; flex-direction: column; gap: 16px; }
  .pdp-media { position: static; }
  .pdp-info h1 { font-size: 32px; }
  .pdp-prop { font-size: 17px; margin: 0 0 12px; }
  .sentidos { gap: 10px; }
  .sentidos span { font-size: 10px; }
  .sentidos b { font-size: 13px; }

  /* --- Barra de accion unica: compra o WhatsApp ---------------------
     Piel compartida .barra-base, tambien usada por .checkout-nav mas
     abajo: nunca conviven las dos en una misma pagina. */
  .barra-base {
    background: var(--crema-2);
    border-top: 1px solid var(--borde);
    box-shadow: var(--elev3);
    padding: 10px calc(var(--margen-lateral) + var(--seguro-der)) calc(10px + var(--seguro-abajo)) calc(var(--margen-lateral) + var(--seguro-izq));
  }
  .barra-accion.barra-base {
    display: flex; align-items: center; gap: var(--sep-toque);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    /* Ninguna animacion de entrada: esta ahi desde la primera pintura. */
  }
  .barra-accion[data-barra="oculta"] { display: none; }
  .barra-accion[data-barra="wa"] .barra-cta { width: 100%; }
  .barra-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
  .barra-nombre { font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tierra); }
  .barra-precio { font-size: 18px; font-weight: 600; }
  .barra-estado { font-size: 13px; font-weight: 700; color: var(--rojo); }
  .barra-wa {
    flex: 0 0 var(--toque-comodo); width: var(--toque-comodo); height: var(--toque-comodo);
    display: grid; place-items: center; border-radius: var(--r-pil);
    background: #25d366; color: #06301a;
  }
  .barra-cta { flex: 0 0 auto; min-width: 132px; min-height: var(--toque-comodo); }

  /* --- Cajon del carrito: hoja inferior ------------------------------
     A 844px de alto quedan 743px de hoja y 56px de pagina madre visible
     arriba: se ve donde se vuelve. Sin tirador: la salida es el boton x. */
  .cajon {
    left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none;
    height: min(88svh, 100svh - 56px);
    border-radius: var(--r4) var(--r4) 0 0;
    box-shadow: var(--elev4);
    padding-bottom: var(--seguro-abajo);
    transform: translateY(100%);
  }
  .cajon.abierto { transform: translateY(0); }
  .cajon-pie { padding: var(--e4); }
  .cajon-total b { font-size: 24px; }

  /* --- Checkout ------------------------------------------------------- */
  .checkout-resumen { order: -1; }
  .checkout-cols { gap: 24px; }
  .paso legend { font-size: clamp(20px, 2.6vw, 25px); }
  /* La barra de navegacion del checkout es la unica barra fija visible
     en esas paginas (data-barra="oculta" en el resto del layout). */
  .checkout-nav.barra-base {
    position: sticky; bottom: 0; z-index: 45;
    margin-inline: calc(var(--margen-lateral) * -1);
    flex-wrap: nowrap;
  }
  .checkout-nav .btn { flex: 1; white-space: normal; }
  .checkout-nav [data-atras] { flex: 0 1 auto; min-width: 96px; }
  .pasos { font-size: 13px; }

  /* --- Pedido ---------------------------------------------------------- */
  .pedido-acciones { flex-direction: column; align-items: stretch; }
  .pedido-acciones .btn { width: 100%; }
}

@media (max-width: 370px) {
  .rejilla { grid-template-columns: 1fr; }
  .sellos { grid-template-columns: 1fr; }
  .marca-txt i { display: none; }
  .marca-txt b { font-size: 16px; }
  .hero h1 { font-size: 34px; }
  .sentidos { grid-template-columns: 1fr; }
  .tarjeta-pie { flex-direction: column; align-items: stretch; }
  .tarjeta-tit h3 { font-size: 18px; }
  .tarjeta-cuerpo { padding: 12px; }
}

/* --- Preferencias del sistema -----------------------------------------
   Un solo bloque por preferencia: se extiende aqui, no se duplica en
   otra parte del archivo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* 1ms y no none: la transicion sigue disparando su evento (los
     oyentes de transitionend no se rompen) pero no se percibe. */
  .esqueleto, .esqueleto *, .esqueleto-linea, .esqueleto-bloque { animation: none !important; background: var(--esqueleto-1) !important; }
  .btn:active, .filtro:active, .cantidad-btn:active, .navegacion button:active { transform: none !important; }
  .cajon { transform: none !important; }
  .btn-cargando::after { display: none; }
}
@media (prefers-contrast: more) { :root { --borde: #695242; } .btn-borde { border-width: 2px; } }
@media (forced-colors: active) { .btn, .tarjeta, .opciones label { border: 1px solid ButtonText; } }