/* =====================================================================
   La Centollería · web v2 · septiembre 2026
   Identidad oficial del diseñador (Marcos Vera, 24 sep 2026):
   Marca La Centollería/Identidad visual - disenador (24 sep 2026)/LEEME.md

   LICENCIA DE FUENTES (leer antes de publicar)
   Gotham y Chronicle Display son de Hoefler&Co. Lo que entregó el
   diseñador es licencia de ESCRITORIO (OTF). Servir esos OTF desde un
   sitio público no está cubierto por esa licencia. Para el lanzamiento:
     a) comprar la licencia webfont (typography.com) y reemplazar los
        archivos de fonts/ por los WOFF2 licenciados (se mantienen los
        nombres de familia "Gotham LC" y "Chronicle LC" de abajo), o
     b) borrar los cuatro @font-face y cargar los fallbacks desde
        Google Fonts: Montserrat o Figtree (texto) y Playfair Display
        (títulos). Las pilas --font-ui y --font-titulo ya los incluyen.
   Mientras tanto, esta versión es para revisión interna.

   MVP de venta (30 sep 2026): una sola página de compra. Se quitaron los
   componentes de fichas, catálogo, conservas, recetas, nuestra casa,
   profesionales y la etiqueta "por confirmar" (copia completa en
   ../_archivo/v2-completa-2026-09-30/).
   ===================================================================== */

@font-face {
  font-family: "Gotham LC";
  src: url("fonts/Gotham-Light.otf") format("opentype");
  unicode-range: U+0000-009F, U+00A1-FFFF;   /* el U+00A0 de este OTF mide 25.000 unidades: se excluye */
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham LC";
  src: url("fonts/Gotham-Book.otf") format("opentype");
  unicode-range: U+0000-009F, U+00A1-FFFF;   /* el U+00A0 de este OTF mide 25.000 unidades: se excluye */
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chronicle LC";
  src: url("fonts/ChronicleDispCond-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chronicle LC";
  src: url("fonts/ChronicleDispCond-SemiItal.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Color oficial (lámina 13) ---------- */
  --navy:   #0F3546;
  --rojo:   #D7453F;   /* sólo dentro del logo y del favicon. Nunca como texto ni en la UI. */
  --crema:  #F2EBE0;
  --blanco: #FFFFFF;

  /* Derivados de trabajo (superficies y texto secundario; no son parte de la identidad) */
  --crema-hondo: #E9E0D2;   /* banda alterna */
  --crema-claro: #F8F4EE;   /* tarjeta, campo */
  --navy-hondo:  #0B2A38;   /* hover de botón */
  --texto:        var(--navy);
  --texto-suave:  #4A5A61;
  --texto-inv:    var(--crema);
  --texto-inv-suave: #BFC8C9;
  --borde:        #D5CABA;
  --borde-fuerte: var(--navy);
  --foco:         var(--navy);
  /* Contraste medido (WCAG 2.x): navy/crema 11,0:1 · navy/crema-hondo 9,9:1 · texto-suave/crema 6,1:1 ·
     texto-suave/crema-hondo 5,5:1 · crema/navy 11,0:1 · texto-inv-suave/navy 7,6:1 · borde de campo #807360
     sobre crema-claro 4,2:1. Rojo/crema 3,7:1: NO sirve para texto; por eso el rojo vive sólo en el logo. */

  /* ---------- Tipografía ---------- */
  --font-ui:     "Gotham LC", "Montserrat", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Chronicle LC", "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-display: clamp(3rem, 2rem + 4vw, 5.5rem);
  --fs-h1:      clamp(2.5rem, 1.9rem + 2.4vw, 4.25rem);
  --fs-h2:      clamp(2.125rem, 1.65rem + 1.9vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body:    1.0625rem;   /* 17 px */
  --fs-small:   .9375rem;    /* 15 px */
  --fs-label:   .8125rem;    /* 13 px, sólo rótulos cortos */

  /* ---------- Espacio ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --seccion-y: clamp(64px, 4vw + 40px, 120px);
  --gutter: 16px;
  --contenedor: 1240px;

  --radio-s: 4px;
  --radio-m: 6px;
  --linea: 1px solid var(--borde);
  --sombra-flotante: 0 10px 30px rgba(15, 53, 70, .14);   /* sólo carro, barra fija y aviso */

  --tap: 44px;
  --btn-h: 48px;
  --cabecera-h: 68px;
  --dur: 160ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --cabecera-h: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-h) + 16px); }
body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis: none;          /* sin negritas ni cursivas falsas */
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 400; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 2px; }
.sobre-navy :focus-visible { outline-color: var(--crema); }
[hidden] { display: none !important; }

.saltar {
  position: absolute; left: 8px; top: -80px; z-index: 100;
  background: var(--navy); color: var(--crema); padding: 12px 16px; border-radius: var(--radio-s);
}
.saltar:focus { top: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: var(--seccion-y); }
.seccion--alterna { background: var(--crema-hondo); }
.seccion--borde { border-top: var(--linea); }

/* ---------- Tipografía ---------- */
h1, h2, h3, .display {
  font-family: var(--font-titulo); font-weight: 600; line-height: 1.02;
  letter-spacing: 0; margin: 0; text-wrap: balance;
}
.display { font-size: var(--fs-display); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.1; }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; max-width: 46ch; }
.small { font-size: var(--fs-small); }
.suave { color: var(--texto-suave); }
.rotulo {
  display: block; font-size: var(--fs-label); font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--s-4);
}
.cabeza-seccion { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 760px; }
.cabeza-seccion p { color: var(--texto-suave); font-size: var(--fs-lead); font-weight: 300; margin: 0; }


/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); min-width: var(--tap); padding: 10px 22px;
  font: 400 1rem/1.2 var(--font-ui); letter-spacing: .01em; text-align: center; text-decoration: none;
  border-radius: var(--radio-s); border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primario { background: var(--navy); color: var(--crema); }
.btn--primario:hover { background: var(--navy-hondo); }
.btn--secundario { background: transparent; color: var(--navy); border-color: var(--borde-fuerte); }
.btn--secundario:hover { background: var(--navy); color: var(--crema); }
.btn--crema { background: var(--crema); color: var(--navy); }
.btn--crema:hover { background: var(--blanco); }
.btn--bloque { width: 100%; }
.btn--chico { min-height: var(--tap); padding: 8px 14px; font-size: var(--fs-small); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--crema-hondo); color: var(--texto-suave); border-color: var(--borde); cursor: not-allowed;
}
.enlace {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; color: var(--navy);
}
.enlace::after { content: "\2192"; display: inline-block; text-decoration: none; }
.enlace:hover { text-decoration-thickness: 2px; }
.botonera { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.apoyo { font-size: var(--fs-small); color: var(--texto-suave); margin-top: var(--s-4); max-width: 46ch; }

/* ---------- Avisos ---------- */
.aviso-qa {
  background: var(--navy); color: var(--crema); font-size: var(--fs-small);
  text-align: center; padding: 8px var(--gutter);
}
.aviso-catalogo {
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--crema-claro);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); font-size: var(--fs-small);
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40; background: var(--crema);
  border-bottom: var(--linea);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--cabecera-h);
}
.marca { display: inline-flex; align-items: center; min-height: var(--tap); flex: 0 0 auto; }
.marca img { width: 108px; height: auto; }
@media (min-width: 768px) { .marca img { width: 140px; } }
.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: clamp(16px, 2.4vw, 36px); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  text-decoration: none; font-size: .96875rem; letter-spacing: .01em;
}
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.cabecera__acciones { display: flex; align-items: center; gap: var(--s-2); }
.btn-pedido { min-height: var(--tap); padding: 8px 16px; font-size: .96875rem; gap: 6px; }
.btn-pedido .n { font-variant-numeric: tabular-nums; }

.btn-pedido, .nav a { white-space: nowrap; }
@media (min-width: 768px) { .nav { display: block; } }
@media (min-width: 768px) and (max-width: 900px) { .nav ul { gap: 16px; } .marca img { width: 124px; } }

/* ---------- Fotos ---------- */
.foto { margin: 0; }
.foto img { width: 100%; border-radius: var(--radio-m); object-fit: cover; background: var(--crema-hondo); }
.foto figcaption, .pie-foto { font-size: var(--fs-label); line-height: 1.45; color: var(--texto-suave); margin-top: var(--s-2); letter-spacing: .01em; }

.precio { font-variant-numeric: tabular-nums; font-size: 1.0625rem; }
.precio--pendiente { color: var(--texto-suave); }
.precio s { color: var(--texto-suave); margin-left: .4em; font-size: .9em; }

/* Estado de disponibilidad: texto + forma, nunca sólo color */
.estado { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); line-height: 1.3; }
.estado::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.estado--disponible { color: var(--navy); }
.estado--disponible::before { background: currentColor; }
.estado--por_confirmar, .estado--sin_stock, .estado--veda, .estado--en_desarrollo { color: var(--texto-suave); }
.estado--sin_stock::before, .estado--veda::before { border-radius: 1px; }
.estado--en_desarrollo::before { border-style: dashed; }
.nota-estado { font-size: var(--fs-small); color: var(--texto-suave); margin: 0; }

.catalogo-vacio { border: 1px dashed var(--borde); border-radius: var(--radio-m); padding: var(--s-6); text-align: center; }

.tabla-wrap { margin-top: var(--s-7); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tabla caption { text-align: left; font-size: var(--fs-small); color: var(--texto-suave); caption-side: bottom; padding-top: var(--s-4); }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: var(--linea); }
.tabla thead th { font-weight: 400; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); border-bottom-color: var(--borde-fuerte); }
.tabla tbody th { font-family: var(--font-titulo); font-weight: 600; font-size: 1.375rem; line-height: 1.1; }
.tabla tbody th a { text-decoration: none; }
.tabla tbody th a:hover { text-decoration: underline; }
.tabla td:last-child { padding-right: 0; }
@media (max-width: 759px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; }
  .tabla tr { border-top: var(--linea); padding: var(--s-4) 0; }
  .tabla tbody tr:first-child { border-top-color: var(--borde-fuerte); }
  .tabla th, .tabla td { border: 0; padding: 2px 0; }
  .tabla tbody th { margin-bottom: 4px; }
  .tabla td[data-col]::before { content: attr(data-col) ": "; color: var(--texto-suave); }
}

/* ---------- Campos ---------- */
.campo { display: grid; gap: var(--s-2); }
.campo label, .campo legend { font-size: var(--fs-small); color: var(--texto); }
.campo input, .campo select, .campo textarea {
  min-height: var(--tap); width: 100%; padding: 10px 14px; font: 400 1rem/1.4 var(--font-ui); color: var(--texto);
  background: var(--crema-claro); border: 1px solid #807360; border-radius: var(--radio-s);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-suave); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--foco); outline-offset: 1px; }
.campo input[aria-invalid="true"] { border-color: var(--navy); border-width: 2px; }
.campo .error { font-size: var(--fs-small); color: var(--navy); margin: 0; }
.campo .ayuda { font-size: var(--fs-small); color: var(--texto-suave); margin: 0; }
.comuna-resultado { font-size: var(--fs-small); color: var(--texto); margin: 0; min-height: 1.6em; }

/* ---------- Pie ---------- */
.pie { background: var(--navy); color: var(--texto-inv); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-small); }
.pie a { color: var(--texto-inv); }
.pie__grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .pie__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pie__logo img { width: 180px; }
.pie h2 { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-inv-suave); margin-bottom: var(--s-2); line-height: 1.4; }
.pie ul { list-style: none; }
.pie li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: var(--tap); line-height: 1.35; }
.pie__legal { border-top: 1px solid rgba(242, 235, 224, .22); margin-top: var(--s-7); padding-top: var(--s-5); color: var(--texto-inv-suave); display: grid; gap: var(--s-2); }
.pie__legal p { margin: 0; }

/* ---------- Carro lateral ---------- */
.velo { position: fixed; inset: 0; background: rgba(15, 53, 70, .38); z-index: 60; }
.carro {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(440px, 100%); background: var(--crema); box-shadow: var(--sombra-flotante);
  display: flex; flex-direction: column;
}
.carro__cabeza { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); border-bottom: var(--linea); }
.carro__cabeza h2 { font-size: 2.125rem; }
.btn-cerrar { min-width: var(--tap); height: var(--tap); padding: 0 10px; border: 1px solid transparent; background: none; border-radius: var(--radio-s); cursor: pointer; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }
.btn-cerrar:hover { border-color: var(--borde-fuerte); }
.carro__cuerpo { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-5) var(--s-4); overscroll-behavior: contain; }
.carro__vacio { padding: var(--s-6) 0; color: var(--texto-suave); }
.carro__avisos { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.carro__avisos p { font-size: var(--fs-small); border-left: 2px solid var(--navy); padding: 4px 0 4px 12px; margin: 0; }
.lineas { list-style: none; }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-4); padding: var(--s-4) 0; border-bottom: var(--linea); }
.linea__nombre { font-family: var(--font-titulo); font-weight: 600; font-size: 1.375rem; line-height: 1.1; }
.linea__formato { font-size: var(--fs-small); color: var(--texto-suave); grid-column: 1; }
.linea__subtotal { font-variant-numeric: tabular-nums; text-align: right; grid-column: 2; grid-row: 1; }
.linea__controles { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); background: var(--crema-claro); }
.cantidad button { width: var(--tap); height: var(--tap); background: none; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--navy); }
.cantidad button:disabled { color: #807360; cursor: not-allowed; }
.cantidad .valor { min-width: 2.5ch; text-align: center; font-variant-numeric: tabular-nums; }
.btn-quitar { background: none; border: 0; min-height: var(--tap); padding: 0 4px; text-decoration: underline; text-underline-offset: 3px; color: var(--texto-suave); cursor: pointer; font-size: var(--fs-small); }
.carro__pie { border-top: var(--linea); padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-3); background: var(--crema); }
.suma { display: flex; justify-content: space-between; gap: var(--s-3); font-variant-numeric: tabular-nums; margin: 0; }
.suma--fuerte { font-size: 1.125rem; }
.suma span:last-child { text-align: right; }
.carro__pie .apoyo { margin-top: 0; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80;
  background: var(--navy); color: var(--crema); padding: 12px 20px; border-radius: var(--radio-s);
  font-size: var(--fs-small); box-shadow: var(--sombra-flotante); max-width: calc(100% - 32px);
}
body.con-barra .toast { bottom: 96px; }

/* ---------- Migas ---------- */
.migas { font-size: var(--fs-small); color: var(--texto-suave); padding-top: var(--s-4); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.migas li { display: inline-flex; align-items: center; min-height: var(--tap); }
.migas li + li::before { content: "/"; margin-right: 6px; }

/* Acordeón */
.acordeon { border-top: 1px solid var(--borde-fuerte); }
.acordeon details { border-bottom: var(--linea); }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding: 8px 0; font-family: var(--font-titulo); font-weight: 600; font-size: 1.5rem; line-height: 1.1;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font-family: var(--font-ui); font-weight: 300; font-size: 1.75rem; line-height: 1; }
.acordeon details[open] summary::after { content: "\2212"; }
.acordeon .contenido { padding-bottom: var(--s-5); }
.tabla-info { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tabla-info th, .tabla-info td { text-align: left; vertical-align: top; padding: 10px 0; border-bottom: var(--linea); }
.tabla-info th { width: 36%; font-weight: 400; color: var(--texto-suave); padding-right: var(--s-4); }
.tabla-info tr:last-child th, .tabla-info tr:last-child td { border-bottom: 0; }

/* ---------- Páginas de texto ---------- */
.texto-legal { max-width: 760px; padding-block: var(--s-6) var(--seccion-y); }
.texto-legal h1 { margin-bottom: var(--s-5); }
.texto-legal h2 { font-size: 2.125rem; margin: var(--s-8) 0 var(--s-4); }
.texto-legal ul { padding-left: 1.2em; display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }

.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.texto-legal li b { font-family: var(--font-titulo); font-weight: 600; font-size: 1.15em; line-height: 1.2; }

/* Áreas táctiles de 44 px en enlaces de texto */
.pie li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.aviso-qa a { display: inline-flex; align-items: center; min-height: var(--tap); color: inherit; }
.aviso-qa { padding-block: 0; }
.toast { width: max-content; text-align: center; }
body.sin-scroll .toast { top: 84px; bottom: auto; }
@media (max-width: 759px) { .tabla caption { display: block; width: 100%; padding-top: var(--s-3); } }

/* ---------- Sin derecho a retracto (Ley 19.496 art. 3 bis b · Decreto 52) ----------
   Va junto al precio, destacado y con letra NO menor que la del precio de ese lugar. */
.retracto { font-size: 1.0625rem; line-height: 1.35; color: var(--texto); margin: 4px 0 0; }
.linea__retracto { grid-column: 1 / -1; display: block; margin: 0; }

.carro__pie .enlace { justify-content: center; }

/* ---------- 28 sep 2026: precio por kilo, "Agotado", formato 0,5 kg ---------- */
/* Precio por kilo junto al precio, en letra menor. El aviso de retracto sigue sin ser menor que el precio. */
.precio-kilo { font-size: var(--fs-small); color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: .35em; }
.linea__formato .precio-kilo { font-size: inherit; margin-left: 0; }

/* Agotado: chip, se lee como estado y no como botón */
.estado--sin_stock {
  color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 99px; padding: 2px 12px;
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; align-self: flex-start; justify-self: start;
}
.estado--sin_stock::before { display: none; }

/* =====================================================================
   MVP de venta · 30 sep 2026: una página, pocas piezas, mucho aire
   ===================================================================== */
.espacio-final { height: var(--seccion-y); }

/* ---------- Hero ---------- */
.hero { padding-bottom: var(--seccion-y); }
.hero__texto { display: grid; gap: var(--s-5); justify-items: start; padding-block: var(--s-7) var(--s-6); }
.hero__texto .display { font-size: clamp(3rem, 1.6rem + 5.2vw, 6.75rem); line-height: .96; max-width: 11ch; }
.hero__texto .lead { margin: 0; }
.hero__cta { min-width: 12rem; }
.hero__foto { margin: 0; }
.hero__foto picture { display: block; }
.hero__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; background: var(--crema-hondo); }
.hero .pie-foto { max-width: var(--contenedor); margin: var(--s-3) auto 0; padding-inline: var(--gutter); }
@media (min-width: 768px) {
  .hero__foto img { aspect-ratio: 16 / 9; max-height: 80vh; object-position: 50% 60%; }
}
@media (min-width: 960px) {
  .hero__texto { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); row-gap: var(--s-5); align-items: end; padding-block: var(--s-8) var(--s-7); }
  .hero__texto .display { grid-row: 1 / span 2; }
  .hero__texto .lead { grid-column: 2; }
  .hero__cta { grid-column: 2; }
}

/* ---------- Comprar ---------- */
.comprar { display: grid; gap: var(--s-6); }
.comprar__foto img { aspect-ratio: 4 / 3; object-position: 50% 62%; }
@media (min-width: 960px) {
  .comprar { grid-template-columns: 5fr 6fr; gap: var(--s-8); align-items: center; }
  .comprar__foto img { aspect-ratio: 4 / 5; }
}
.comprar__texto h2 { margin-bottom: var(--s-3); }
.comprar__bajada { color: var(--texto-suave); font-size: var(--fs-lead); font-weight: 300; margin-bottom: var(--s-6); max-width: 40ch; }
.comprar__nota { font-size: var(--fs-small); color: var(--texto-suave); margin-top: var(--s-5); max-width: 52ch; }
.opciones-compra { list-style: none; display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .opciones-compra { grid-template-columns: 1fr 1fr; } }
.opcion-compra {
  height: 100%; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--crema-claro);
}
.opcion-compra--agotada { border-color: var(--borde); }
.opcion-compra__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.opcion-compra__peso { font-size: clamp(2.5rem, 2.1rem + 1.2vw, 3.25rem); line-height: 1; }
.opcion-compra__formato { font-size: var(--fs-small); color: var(--texto-suave); margin: 0; }
.opcion-compra__precio { margin: var(--s-3) 0 0; }
/* Precio y aviso de retracto al mismo tamaño (el aviso nunca menor que el precio). */
.opcion-compra .precio, .opcion-compra .retracto { font-size: 1.1875rem; }
.opcion-compra .precio-kilo { display: block; margin: 2px 0 0; }
.opcion-compra .retracto { margin-top: var(--s-2); }
.opcion-compra__accion { margin-top: auto; padding-top: var(--s-4); }
.opcion-compra__fila { display: flex; gap: var(--s-3); align-items: stretch; }
.opcion-compra__fila .btn { flex: 1; }
.opcion-compra__fila .cantidad button { height: var(--btn-h); }
.opcion-compra--agotada .precio { color: var(--texto-suave); }

/* ---------- Qué recibes ---------- */
.recibes { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .recibes { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; } }
.recibes__texto h2 { margin-bottom: var(--s-5); }
.recibes__lista { list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-lead); font-weight: 300; }
.recibes__lista b { font-family: var(--font-titulo); font-style: italic; font-weight: 600; font-size: 1.2em; line-height: 1.1; }
.recibes__sub { margin: var(--s-7) 0 var(--s-4); }
.pasos-uso { list-style: none; counter-reset: paso; display: grid; gap: var(--s-3); font-size: var(--fs-lead); }
.pasos-uso li { counter-increment: paso; display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; border-top: var(--linea); padding-top: var(--s-3); }
.pasos-uso li::before { content: counter(paso); font-family: var(--font-titulo); font-weight: 600; font-size: 1.75rem; line-height: 1; }
.recibes__foto img { aspect-ratio: 16 / 10; object-position: 50% 60%; }

/* ---------- Despacho y pago ---------- */
.despacho { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .despacho { grid-template-columns: 7fr 4fr; gap: var(--s-8); align-items: start; } }
.despacho h2 { margin-bottom: var(--s-4); }
.despacho__bajada { color: var(--texto-suave); font-size: var(--fs-lead); font-weight: 300; max-width: 52ch; margin-bottom: var(--s-6); }
.tabla-despacho { width: 100%; max-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-despacho th, .tabla-despacho td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: var(--linea); }
.tabla-despacho th:last-child, .tabla-despacho td:last-child { padding-right: 0; text-align: right; }
.tabla-despacho thead th { font-weight: 400; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 1px solid var(--borde-fuerte); }
.tabla-despacho tbody th { font-weight: 400; }
.despacho__nota { font-size: var(--fs-small); color: var(--texto-suave); margin: var(--s-4) 0 0; max-width: 52ch; }
.despacho__sub { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); margin: var(--s-6) 0 var(--s-2); line-height: 1.4; }
.despacho__ventanas { list-style: none; display: grid; gap: 4px; }
.pago-info { border-top: 1px solid var(--borde-fuerte); padding-top: var(--s-5); max-width: 44ch; }
@media (min-width: 960px) { .pago-info { border-top: 0; border-left: var(--linea); padding: var(--s-2) 0 0 var(--s-7); } }
.pago-info__t { font-size: var(--fs-h3); margin-bottom: var(--s-4); }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { max-width: 860px; }
.preguntas h2 { margin-bottom: var(--s-6); }
.preguntas .acordeon summary { font-size: 1.375rem; min-height: 64px; }
.preguntas .contenido p { max-width: 64ch; }
.preguntas .contenido a { color: var(--texto); }
.preguntas .contenido b { font-family: var(--font-titulo); font-weight: 600; font-size: 1.1em; }

/* Que el RUT no se corte en dos líneas. */
.nb { white-space: nowrap; }