/* ==========================================================================
   Café Altiplano — hoja de estilos única (mobile-first)
   Orden: tokens, reset, layout, header, componentes, páginas, utilidades,
   y al final los breakpoints ascendentes.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Paleta base (decidida, no cambiar) */
  --kraft: #E8DCC8;   /* fondo base */
  --tinta: #2B1D14;   /* texto, café espresso */
  --oxido: #8C3B2E;   /* acento, cereza de café */

  /* Derivados: solo mezclas de los tres de arriba (o kraft aclarado), sin
     colores nuevos. Contraste WCAG medido:
       tinta sobre kraft 12.0 · tinta-suave sobre kraft 6.0
       óxido sobre kraft 5.6 · óxido sobre kraft-hondo 4.6
       kraft sobre óxido 5.6 · kraft sobre tinta 12.0 */
  --kraft-hondo: #D5C9B6;  /* kraft 90% + tinta 10%: fila alterna de tarjetas */
  --kraft-claro: #F2ECE1;  /* kraft 55% + blanco: superficies (formularios) */
  --tinta-suave: #5A4D41;  /* tinta 75% + kraft 25%: texto secundario */
  --borde-kraft: #CCBFAD;  /* kraft 85% + tinta 15%: bordes */
  --canela:      #BA8C7B;  /* kraft 50% + óxido 50%: tueste medio-claro */
  --tostado:     #5C2C21;  /* óxido 50% + tinta 50%: tueste medio-oscuro */
  --oxido-hondo: #793529;  /* óxido 80% + tinta 20%: hover del acento */

  /* Tokens de componentes. Los nombres antiguos se conservan y ahora apuntan
     a la paleta nueva, así checkout, carrito y panel la heredan sin tocar
     sus reglas. */
  --cafe-900: var(--tinta);
  --cafe-800: var(--tinta);
  --cafe-700: var(--oxido);
  --cafe-500: var(--tinta-suave);
  --cafe-300: var(--canela);
  --cafe-100: var(--kraft-hondo);
  --crema:    var(--kraft);

  /* Colores de estado (stock, errores, avisos): semánticos, se mantienen
     para que "agotado" y "listo" se distingan sin depender del texto. */
  --verde:    #4a6b47;
  --verde-claro: #e3ead9;
  --rojo:     var(--oxido);
  --rojo-claro: #f3dcd4;
  --ambar:    #8a5a0c;
  --ambar-claro: #f3e2c2;

  --texto:        var(--tinta);
  --texto-suave:  var(--tinta-suave);
  --borde:        var(--borde-kraft);
  --fondo:        var(--kraft);
  --superficie:   var(--kraft-claro);

  --radio-sm: 4px;
  --radio:    6px;
  --radio-lg: 10px;

  --sombra-sm: 0 1px 2px rgba(43, 29, 20, .06);
  --sombra:    0 2px 10px rgba(43, 29, 20, .10);
  --sombra-lg: 0 10px 30px rgba(43, 29, 20, .14);

  /* Escala de espaciado: el ritmo vertical entre secciones sale de aquí */
  --esp-1: 8px;
  --esp-2: 16px;
  --esp-3: 24px;
  --esp-4: 40px;
  --esp-5: 64px;
  --esp-6: 104px;

  --ancho-max: 1200px;
  --alto-header: 64px;

  --fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fuente-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los saltos a un ancla (#catalogo, #contenido) no quedan bajo el header sticky */
  scroll-padding-top: calc(var(--alto-header) + var(--esp-2));
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--cafe-700); }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

:focus-visible {
  outline: 2px solid var(--cafe-700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Layout ------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 16px;
}

main { min-height: 60vh; padding-block: var(--esp-4) var(--esp-5); }

/* La portada organiza su propio ritmo en bandas de sección. */
main.principal-inicio { padding-block: 0; }

.sobretitulo {
  margin: 0 0 var(--esp-2);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--oxido);
}

.seccion__titulo {
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  margin-bottom: var(--esp-3);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cafe-900);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radio) 0;
}
.salto-contenido:focus { left: 0; }

/* --- Header ------------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tinta);
  color: var(--kraft);
  transition: box-shadow .2s ease;
}
/* tienda.js agrega esta clase en cuanto la página se desplaza */
.encabezado--desplazado { box-shadow: 0 4px 18px rgba(43, 29, 20, .28); }

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--alto-header);
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--crema);
  text-decoration: none;
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  white-space: nowrap;
}
.marca__grano { flex: none; }
.marca__sub {
  display: none;
  font-family: var(--fuente-texto);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cafe-300);
}

.nav { display: flex; align-items: center; gap: 4px; }

.nav__enlace {
  color: var(--cafe-100);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radio-sm);
  font-size: .9rem;
}
.nav__enlace:hover { background: rgba(255, 255, 255, .08); }
.nav__enlace[aria-current="page"] {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* Botón del carrito + contador persistente */
.boton-carrito {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--crema);
  text-decoration: none;
  font-size: .9rem;
}
.boton-carrito:hover { background: rgba(255, 255, 255, .18); }
.boton-carrito__texto { display: none; }

.contador-carrito {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cafe-300);
  color: var(--cafe-900);
  font-size: .75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.contador-carrito[data-vacio="true"] {
  background: rgba(255, 255, 255, .18);
  color: var(--cafe-100);
}
.contador-carrito.esta-pulsando { animation: pulso .35s ease; }

@keyframes pulso {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--oxido);
  color: var(--kraft-claro);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
.btn:hover { background: var(--oxido-hondo); }

/* Confirmación al agregar al carrito (catalogo.js pone la clase ~1.6 s) */
.btn--agregado,
.btn--agregado:hover {
  background: var(--tinta);
  animation: confirma .32s ease;
}
@keyframes confirma {
  0%   { transform: scale(1); }
  40%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--borde);
  color: var(--texto-suave);
  cursor: not-allowed;
  transform: none;
}

.btn--secundario {
  background: transparent;
  border-color: var(--cafe-500);
  color: var(--cafe-800);
}
.btn--secundario:hover { background: var(--cafe-100); }

.btn--bloque { width: 100%; }
.btn--grande { padding: 14px 22px; font-size: 1rem; }

/* --- Filtros ------------------------------------------------------------ */
.barra-catalogo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borde);
}

.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-1); }

.filtro {
  padding: 9px 18px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filtro:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--kraft);
}

.conteo-resultados { font-size: .85rem; color: var(--texto-suave); }

/* --- Rejilla y tarjetas ------------------------------------------------- */
.rejilla-productos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Transición al cambiar de categoría (solo por acción del usuario) */
.rejilla--cambio { animation: rejilla-entra .35s ease both; }
@keyframes rejilla-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* El fondo alterna fila por fila entre kraft y kraft-hondo. Como el número
   de columnas cambia por breakpoint, la regla se redefine en cada uno
   (ver "Breakpoints"). En móvil hay una columna: alterna tarjeta a tarjeta. */
.tarjeta {
  --fondo-tarjeta: var(--kraft);
  display: flex;
  flex-direction: column;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: border-color .2s ease;
}
.tarjeta:nth-child(2n) { --fondo-tarjeta: var(--kraft-hondo); }
.tarjeta:hover { border-color: var(--tinta-suave); }

.tarjeta__enlace {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tarjeta__figura {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: transparent;
  overflow: hidden;
  padding: var(--esp-3) var(--esp-3) 0;
}
.tarjeta__imagen { width: 100%; height: 100%; object-fit: contain; }

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--esp-3) var(--esp-3) 0;
  flex: 1;
}

.tarjeta__nombre {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}

/* Línea tipo ficha técnica: origen · altitud · proceso, en oración normal */
.ficha-linea {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.ficha-linea span { color: var(--oxido); padding-inline: 2px; }

.tarjeta__precio {
  margin-top: auto;
  padding-top: var(--esp-1);
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums lining-nums;
}

.tarjeta__pie { padding: var(--esp-2) var(--esp-3) var(--esp-3); }

/* --- Barra de tueste ---------------------------------------------------- */
/* Claro -> oscuro con los tonos derivados; la marca se posiciona por clase
   (tueste--1..5) porque la CSP no permite style="left:..." en línea. */
.tueste { margin-top: 4px; }
.tueste__barra {
  position: relative;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: linear-gradient(90deg,
    var(--kraft-claro) 0%,
    var(--canela) 35%,
    var(--oxido) 58%,
    var(--tostado) 80%,
    var(--tinta) 100%);
}
.tueste__marca {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--kraft-claro);
  border: 3px solid var(--tinta);
  transform: translate(-50%, -50%);
}
.tueste--1 .tueste__marca { left: 10%; }
.tueste--2 .tueste__marca { left: 30%; }
.tueste--3 .tueste__marca { left: 50%; }
.tueste--4 .tueste__marca { left: 70%; }
.tueste--5 .tueste__marca { left: 90%; }

.tueste__etiquetas {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: .75rem;
  color: var(--tinta-suave);
}
.tueste__nivel { color: var(--tinta); font-weight: 600; }

/* --- Etiquetas de stock ------------------------------------------------- */
.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.etiqueta--ok      { background: var(--verde-claro); color: var(--verde); }
.etiqueta--pocas   { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta--agotado { background: var(--rojo-claro);  color: var(--rojo); }

.etiqueta--flotante {
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: var(--sombra-sm);
}

/* --- Página de detalle -------------------------------------------------- */
.migas { font-size: .88rem; color: var(--texto-suave); margin-bottom: var(--esp-4); }
.migas a { color: var(--oxido); }

.detalle { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); }

.detalle__figura {
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--kraft-hondo);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--borde);
  padding: var(--esp-3);
}
@media (min-width: 560px) { .detalle__figura { padding: var(--esp-4); } }
.detalle__imagen { width: 100%; height: 100%; object-fit: contain; }

.detalle__info h1 { font-size: clamp(2rem, 6vw, 2.9rem); margin-bottom: var(--esp-2); }
.detalle__info .ficha-linea { font-size: 1rem; margin-bottom: var(--esp-3); }
.detalle__info .tueste { max-width: 360px; margin: var(--esp-3) 0; }
.detalle__info #zona-acciones {
  margin: var(--esp-4) 0;
  padding-block: var(--esp-3);
  border-block: 1px solid var(--borde);
}

.detalle__precio {
  font-family: var(--fuente-titulo);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0 0 var(--esp-2);
}

.detalle__descripcion {
  color: var(--tinta-suave);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: var(--esp-3) 0;
}

.ficha {
  margin: var(--esp-4) 0;
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  display: grid;
  gap: 12px;
}
.ficha div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .9rem;
}
.ficha dt { color: var(--texto-suave); }
.ficha dd { margin: 0; font-weight: 600; }

.acciones-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* --- Selector de cantidad ----------------------------------------------- */
.selector-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
}

.selector-cantidad__btn {
  width: 40px;
  height: 42px;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--cafe-800);
}
.selector-cantidad__btn:hover:not(:disabled) { background: var(--cafe-100); }
.selector-cantidad__btn:disabled { opacity: .35; cursor: not-allowed; }

.selector-cantidad__entrada {
  width: 52px;
  height: 42px;
  border: 0;
  border-inline: 1px solid var(--borde);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
}
.selector-cantidad__entrada::-webkit-outer-spin-button,
.selector-cantidad__entrada::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Carrito ------------------------------------------------------------ */
/* align-items: start evita que la lista se estire a la altura del resumen
   y deje una línea de carrito alta y vacía cuando hay pocos productos. */
.carrito { display: grid; grid-template-columns: 1fr; gap: var(--esp-3); align-items: start; }

.lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }

.linea {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-template-areas:
    "img info"
    "ctl ctl";
  gap: 12px 14px;
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

.linea__figura {
  grid-area: img;
  margin: 0;
  width: 84px;
  height: 84px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--cafe-100);
}
.linea__imagen { width: 100%; height: 100%; object-fit: cover; }

.linea__info { grid-area: info; min-width: 0; }
.linea__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 2px;
}
.linea__nombre a { color: inherit; text-decoration: none; }
.linea__nombre a:hover { text-decoration: underline; }
.linea__meta { font-size: .85rem; color: var(--texto-suave); }

.linea__control {
  grid-area: ctl;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--borde);
}

.linea__subtotal {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cafe-800);
  font-variant-numeric: tabular-nums;
}

.linea__eliminar {
  border: 0;
  background: none;
  color: var(--rojo);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radio-sm);
}
.linea__eliminar:hover { background: var(--rojo-claro); }

.resumen {
  align-self: start;
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
.resumen h2 { font-size: 1.1rem; }

.resumen__fila {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: .92rem;
  color: var(--texto-suave);
}
.resumen__fila--total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--texto);
}
.resumen__fila span:last-child { font-variant-numeric: tabular-nums; }

.resumen .btn { margin-top: 14px; }

.resumen__nota {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--texto-suave);
  text-align: center;
}

/* --- Estados vacíos / carga / error ------------------------------------- */
.estado {
  text-align: center;
  padding: 48px 20px;
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: var(--radio-lg);
}
.estado__icono { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.estado p { color: var(--texto-suave); margin: 0 0 18px; }

.esqueleto {
  border-radius: var(--radio-lg);
  background: linear-gradient(90deg, var(--kraft-hondo) 25%, var(--kraft-claro) 50%, var(--kraft-hondo) 75%);
  background-size: 200% 100%;
  animation: brillo 1.2s infinite;
  height: 280px;
}
@keyframes brillo {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --- Avisos ------------------------------------------------------------- */
.avisos {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 420px;
  pointer-events: none;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--cafe-900);
  color: var(--crema);
  font-size: .9rem;
  box-shadow: var(--sombra-lg);
  animation: entra-aviso .2s ease;
}
.aviso--ok     { background: var(--verde); }
.aviso--error  { background: var(--rojo); }
.aviso--alerta { background: var(--ambar); }

@keyframes entra-aviso {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  padding-block: var(--esp-5) var(--esp-5);
  border-bottom: 1px solid var(--borde);
}
.hero__rejilla {
  display: grid;
  gap: var(--esp-5);
  align-items: end;
}
.hero__titulo {
  font-size: clamp(2.3rem, 8.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 14ch;
  margin-bottom: var(--esp-3);
}
.hero__entrada {
  max-width: 44ch;
  margin: 0 0 var(--esp-4);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* Altitud: tratamiento tipográfico grande, no un banner */
.altitud { margin: 0; }
.altitud__cifra {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 10px;
  font-family: var(--fuente-titulo);
  color: var(--tinta);
  line-height: .9;
}
.altitud__numero {
  /* Una sola línea siempre. La cifra mide ~4.7em de ancho: el tope por vw
     está calculado para que quepa en la columna de cada breakpoint. */
  font-size: clamp(2.4rem, 18vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.altitud__unidad {
  font-size: clamp(1.1rem, 3.6vw, 1.7rem);
  color: var(--oxido);
  font-weight: 600;
}
.altitud__regla {
  display: block;
  height: 3px;
  margin: var(--esp-3) 0;
  background: var(--oxido);
  transform-origin: left center;
}
.altitud__pie {
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* Único momento animado de carga: la cifra sube, la regla se traza y el pie
   aparece, una sola vez. Se anula con prefers-reduced-motion. */
.altitud__cifra { animation: altitud-sube .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
.altitud__regla { animation: altitud-traza .9s cubic-bezier(.6, 0, .2, 1) .55s both; }
.altitud__pie   { animation: altitud-aparece .6s ease 1.1s both; }
@keyframes altitud-sube {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes altitud-traza {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes altitud-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Origen ------------------------------------------------------------- */
.origen {
  background: var(--kraft-hondo);
  padding-block: var(--esp-5);
  border-bottom: 1px solid var(--borde);
}
.origen__rejilla { display: grid; gap: var(--esp-4); align-items: center; }
.origen__texto p:not(.sobretitulo) {
  max-width: 58ch;
  margin: 0 0 var(--esp-2);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tinta-suave);
}
.origen__texto p:last-child { margin-bottom: 0; }

.perfil { margin: 0; width: 100%; max-width: 520px; }
.perfil__svg { width: 100%; height: auto; display: block; }
.perfil__guias line { stroke: var(--borde); stroke-width: 1; stroke-dasharray: 4 6; }
/* Tamaños en unidades del viewBox (480 de ancho): a 375 px de pantalla el SVG
   se reduce ~70%, así que se dimensionan para seguir siendo legibles ahí. */
.perfil__escala text { fill: var(--tinta-suave); font-size: 14px; font-family: var(--fuente-texto); }
/* La sierra va de fondo, más tenue; los rangos por región van al frente */
.perfil__sierra {
  fill: none;
  stroke: var(--tinta-suave);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .55;
}
.perfil__region line { stroke: var(--oxido); stroke-width: 4; stroke-linecap: round; }
.perfil__region circle { fill: var(--kraft-claro); stroke: var(--oxido); stroke-width: 3; }
.perfil__region text {
  fill: var(--tinta);
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
}
.perfil__region .perfil__rango {
  fill: var(--tinta-suave);
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 400;
}
.perfil__pie {
  margin-top: var(--esp-2);
  font-size: .85rem;
  color: var(--tinta-suave);
}

/* --- Catálogo ----------------------------------------------------------- */
.catalogo { padding-block: var(--esp-5) var(--esp-6); }
.catalogo__encabezado { margin-bottom: var(--esp-3); }

/* --- Pie ---------------------------------------------------------------- */
.pie {
  background: var(--tinta);
  color: var(--kraft-hondo);
  padding-block: var(--esp-5) var(--esp-4);
  font-size: .92rem;
}
.pie__contenido {
  display: grid;
  gap: var(--esp-4);
}
.pie p { margin: 0; line-height: 1.6; }
.pie__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  color: var(--kraft);
  margin-bottom: var(--esp-1) !important;
}
.pie__demo p { max-width: 42ch; color: var(--canela); font-size: .85rem; }
.pie__enlace {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--kraft);
  text-decoration: underline;
  text-decoration-color: var(--canela);
  text-underline-offset: 4px;
}
.pie__enlace:hover { text-decoration-color: var(--kraft); }
.pie__legal {
  grid-column: 1 / -1;
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(232, 220, 200, .18);
  font-size: .82rem;
  color: var(--canela);
}
.pie a { color: var(--kraft); }

/* --- Utilidades --------------------------------------------------------- */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.oculto { display: none !important; }

/* --- Breakpoints -------------------------------------------------------- */
@media (min-width: 560px) {
  h1 { font-size: 2.2rem; }
  .rejilla-productos { grid-template-columns: repeat(2, 1fr); }
  /* 2 columnas: filas pares = tarjetas 3 y 4 de cada bloque de 4 */
  .tarjeta:nth-child(n) { --fondo-tarjeta: var(--kraft); }
  .tarjeta:nth-child(4n+3),
  .tarjeta:nth-child(4n+4) { --fondo-tarjeta: var(--kraft-hondo); }
  .pie__contenido { grid-template-columns: 1fr 1fr; }
  .boton-carrito__texto { display: inline; }
  .marca__sub { display: block; }
  .linea {
    grid-template-columns: 96px 1fr auto;
    grid-template-areas: "img info ctl";
    align-items: center;
    padding: 16px;
  }
  .linea__figura { width: 96px; height: 96px; }
  .linea__control {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 0;
    border-top: 0;
  }
  .barra-catalogo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 860px) {
  .contenedor { padding-inline: 40px; }
  main { padding-block: var(--esp-5) var(--esp-6); }
  .rejilla-productos { grid-template-columns: repeat(3, 1fr); gap: var(--esp-4) var(--esp-3); }
  /* 3 columnas: filas pares = tarjetas 4, 5 y 6 de cada bloque de 6 */
  .tarjeta:nth-child(n) { --fondo-tarjeta: var(--kraft); }
  .tarjeta:nth-child(6n+4),
  .tarjeta:nth-child(6n+5),
  .tarjeta:nth-child(6n+6) { --fondo-tarjeta: var(--kraft-hondo); }
  .detalle { grid-template-columns: 1fr 1fr; gap: var(--esp-5); align-items: start; }
  .detalle__figura { position: sticky; top: calc(var(--alto-header) + var(--esp-3)); }
  .carrito { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-4); }
  .resumen { position: sticky; top: calc(var(--alto-header) + 24px); }

  .hero { padding-block: var(--esp-6); }
  .hero__rejilla { grid-template-columns: 1.1fr 1fr; gap: var(--esp-5); }
  .altitud__numero { font-size: clamp(3.2rem, 8.2vw, 6.6rem); }
  .origen { padding-block: var(--esp-6); }
  .origen__rejilla { grid-template-columns: 1fr 1.1fr; gap: var(--esp-6); }
  .barra-catalogo { margin-bottom: var(--esp-5); }

  .pie__contenido { grid-template-columns: 1.2fr 1fr; }
}

@media (min-width: 1100px) {
  .rejilla-productos { grid-template-columns: repeat(4, 1fr); }
  /* 4 columnas: filas pares = tarjetas 5 a 8 de cada bloque de 8 */
  .tarjeta:nth-child(n) { --fondo-tarjeta: var(--kraft); }
  .tarjeta:nth-child(8n+5),
  .tarjeta:nth-child(8n+6),
  .tarjeta:nth-child(8n+7),
  .tarjeta:nth-child(8n+8) { --fondo-tarjeta: var(--kraft-hondo); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Animaciones no esenciales: fuera por completo, contenido en su estado final */
  .altitud__cifra,
  .altitud__regla,
  .altitud__pie,
  .rejilla--cambio,
  .btn--agregado,
  .contador-carrito.esta-pulsando,
  .esqueleto { animation: none !important; }
}

/* ==========================================================================
   Fase 2 — checkout y formularios
   ========================================================================== */

.aviso-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #e6c98a;
  border-left: 4px solid var(--ambar);
  border-radius: var(--radio);
  background: var(--ambar-claro);
  color: #6d4708;
  font-size: .9rem;
  line-height: 1.5;
}
.aviso-demo strong { color: #543605; }

.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.formulario { min-width: 0; }

.campos {
  margin: 0 0 20px;
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}
.campos legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 600;
}
.campos--demo { border-style: dashed; background: #fcfaf7; }

.campo { margin-bottom: 16px; }
.campo:last-child { margin-bottom: 0; }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--cafe-800);
}
.campo__opcional { font-weight: 400; color: var(--texto-suave); }

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.campo textarea { resize: vertical; min-height: 84px; }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--cafe-500);
  box-shadow: 0 0 0 3px rgba(138, 90, 54, .15);
}

.campo__ayuda {
  margin: 6px 0 0;
  font-size: .8rem;
  color: var(--texto-suave);
}

.campo__error {
  margin: 6px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--rojo);
  min-height: 0;
}
.campo__error:empty { display: none; }

.campo--invalido input,
.campo--invalido textarea {
  border-color: var(--rojo);
  background: #fffafa;
}

.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.formulario__error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #e3b5ac;
  border-radius: var(--radio);
  background: var(--rojo-claro);
  color: #7d2a1c;
  font-size: .9rem;
}

.estado--exito { border-style: solid; border-color: #bcd3b8; background: var(--verde-claro); }
.estado--exito .estado__icono {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 1.6rem;
  line-height: 52px;
}
.estado--exito p { color: #3d5a3a; }

.confirmacion__numero {
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cafe-800);
  margin: 0 0 12px;
}
.confirmacion__nota {
  font-size: .85rem;
  padding-top: 12px;
  border-top: 1px solid #bcd3b8;
}

@media (min-width: 860px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 320px; }
  .checkout .resumen { position: sticky; top: calc(var(--alto-header) + 24px); }
}

/* ==========================================================================
   Fase 2 — panel de administración
   ========================================================================== */

.admin-encabezado {
  background: var(--cafe-900);
  color: var(--cafe-100);
  box-shadow: var(--sombra);
}
.admin-encabezado__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--alto-header);
  padding-block: 8px;
}
.admin-encabezado .marca { font-size: 1rem; }
.admin-usuario { font-size: .85rem; color: var(--cafe-300); }

.admin-acceso {
  max-width: 400px;
  margin: 48px auto;
}
.admin-acceso .campos { margin-bottom: 0; }

.pestanas {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borde);
}
.pestana {
  padding: 10px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto-suave);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.pestana:hover { color: var(--cafe-800); }
.pestana[aria-selected="true"] {
  color: var(--cafe-800);
  border-bottom-color: var(--cafe-700);
}

.admin-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 720px;
}
.tabla th,
.tabla td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.tabla th {
  background: var(--cafe-100);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cafe-800);
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #fbf8f4; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .acciones { white-space: nowrap; text-align: right; }

.btn-mini {
  padding: 5px 10px;
  margin-left: 4px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--cafe-800);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-mini:hover { background: var(--cafe-100); border-color: var(--cafe-500); }
.btn-mini--peligro { color: var(--rojo); }
.btn-mini--peligro:hover { background: var(--rojo-claro); border-color: #e3b5ac; }

.chip-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.chip-status--pendiente  { background: var(--ambar-claro); color: var(--ambar); }
.chip-status--preparando { background: #e5eef7; color: #2f5d8a; }
.chip-status--enviado    { background: var(--verde-claro); color: var(--verde); }

.pedido__items {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--texto-suave);
}
.pedido__items li { padding: 2px 0; }

.pedido-detalle {
  padding: 14px 16px;
  background: #fbf8f4;
  border-top: 1px dashed var(--borde);
}
.pedido-detalle dl { display: grid; gap: 6px; margin: 0 0 12px; }
.pedido-detalle dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.pedido-detalle dd { margin: 0 0 6px; font-size: .9rem; white-space: pre-line; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(42, 26, 18, .55);
  overflow-y: auto;
}
.modal__caja {
  width: 100%;
  max-width: 520px;
  background: var(--fondo);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: 20px;
}
.modal__titulo { margin-bottom: 16px; }
.modal__acciones {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (min-width: 860px) {
  .pedido-detalle dl { grid-template-columns: repeat(2, 1fr); }
}

/* Credenciales de demostración en el login del panel. Es público a propósito:
   va a tamaño de texto normal y con contraste alto, no como letra chica. */
.aviso-credenciales {
  margin-top: 20px;
  padding: 16px 18px;
  border: 2px solid var(--cafe-500);
  border-radius: var(--radio-lg);
  background: var(--cafe-100);
  color: var(--cafe-900);
  font-size: 1rem;
  line-height: 1.5;
}
.aviso-credenciales p { margin: 0 0 6px; }
.aviso-credenciales p:last-child { margin-bottom: 0; }
.aviso-credenciales code {
  padding: 2px 8px;
  border-radius: var(--radio-sm);
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cafe-800);
}