/* bamchi — sistema visual (marca/MARCA.md §4 «Sistema»). 🥬🖤
   Regla de oro: todo sale de estos tokens. Un solo borde, tres radios, dos sombras,
   tres piezas redondeadas (botón, sello, chip). Si algo necesita un valor nuevo, se
   agrega aquí como token, no suelto en un componente. */
:root {
  /* Color */
  --tinta: #161513;            /* 🖤 texto, bordes, sombras */
  --papel: #F5EFE3;            /* fondo de página */
  --superficie: #FFFDF8;       /* tarjetas, paneles, campos */
  --hundido: #ECE3D2;          /* fondos internos (frasco en tarjeta, avisos neutros) */
  --linea: #CFC5B4;            /* separadores punteados */
  --suave: #5E574E;            /* texto secundario */
  --repollo: #4F7F3A;          /* 🥬 acción principal */
  --repollo-osc: #3B6229;
  --repollo-claro: #DCEBC8;
  --aji: #D9472B;              /* urgencia honesta, lo coreano */
  --aji-claro: #F8D9CF;
  --sobre-tinta: #D8D0C2;      /* texto sobre fondo oscuro */
  --sobre-tinta-acento: #B9DB97;

  /* Forma */
  --borde: 2px solid var(--tinta);
  --linea-punteada: 1.5px dashed var(--linea);
  --radio-l: 18px;             /* tarjetas y paneles */
  --radio-m: 12px;             /* campos, opciones, avisos, fondos internos */
  --pildora: 999px;            /* botones, sellos, chips */
  --sombra-color: var(--tinta);
  --sombra-l: 4px 4px 0 var(--sombra-color);   /* tarjetas destacadas y botones */
  --sombra-s: 3px 3px 0 var(--sombra-color);   /* sellos, botón chico, opción elegida */

  /* Tipo */
  --titulo: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --texto: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texto); font-size: 17px; color: var(--tinta); background: var(--papel); line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nota { font-size: .9rem; color: var(--suave); }
.etiqueta-tipo, .sello, .grilla-metro th { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.con-icono { display: flex; align-items: center; gap: 10px; }
.icono { flex: none; }

/* ── Piezas redondeadas: botón · sello · chip ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--titulo); font-weight: 800;
  font-size: 1.1rem; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--repollo); color: var(--superficie);
  border: var(--borde); border-radius: var(--pildora); padding: 12px 26px; box-shadow: var(--sombra-l); transition: transform .12s, box-shadow .12s; }
.boton:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sombra-color); }
.boton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sombra-color); }
.boton--borde { background: var(--superficie); color: var(--tinta); }
.boton--chico { font-size: .95rem; padding: 7px 18px; box-shadow: var(--sombra-s); }
.boton--ancho { width: 100%; }

.sello { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); border: var(--borde); border-radius: var(--pildora);
  padding: 3px 11px; box-shadow: var(--sombra-s); vertical-align: middle; white-space: nowrap; }
.sello--grande { font-size: .9rem; padding: 6px 15px; }
.sello--vegano { background: var(--repollo-claro); }
.sello--vegano .icono { color: var(--repollo-osc); }
.sello--corea { background: var(--aji-claro); }
.sello__glifo { font-family: "Noto Sans KR", var(--titulo); color: var(--aji); letter-spacing: 0; }
.sellos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.chip { display: inline-flex; align-items: center; gap: 7px; border: var(--borde); border-radius: var(--pildora); padding: 4px 13px;
  background: var(--superficie); font-size: .92rem; font-weight: 600; line-height: 1.3; }
.chip--urgente { background: var(--aji-claro); font-weight: 700; }
.chip--urgente::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aji); flex: none; }

/* ── Cinta demo y avisos ── */
.cinta-demo { background: var(--tinta); color: var(--papel); text-align: center; font-size: .85rem; padding: 6px 16px; }
.avisos { padding-top: 16px; }
.aviso { border: var(--borde); border-radius: var(--radio-m); padding: 12px 16px; margin: 0 0 8px; background: var(--superficie); font-weight: 500; }
.aviso--ok { background: var(--repollo-claro); }
.aviso--error { background: var(--aji-claro); }
.aviso--aviso { background: var(--hundido); }

/* ── Cabecera ── */
.cabecera { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(6px); border-bottom: var(--borde); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: -.04em; }
.nav { display: flex; align-items: center; gap: 22px; font-weight: 500; }
.nav a:not(.boton) { text-decoration: none; }
.nav a:not(.boton):not(.ig):hover { text-decoration: underline wavy var(--repollo); }
@media (max-width: 720px) { .nav a:not(.boton):not(.ig) { display: none; } }

/* ── Hero ── */
.hero { padding: 56px 0 48px; overflow: hidden; }
.hero__grilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; }
.saludo { font-family: var(--titulo); font-weight: 600; color: var(--repollo-osc); font-size: 1.1rem; margin: 0 0 10px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); }
.bajada { font-size: 1.15rem; color: var(--suave); max-width: 34em; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 26px; }
.hero__frascos { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding-top: clamp(4rem, 8vw, 6.5rem); }
.hero__frascos .frasco { position: relative; z-index: 1; filter: drop-shadow(5px 5px 0 var(--tinta)); }
.hero__frascos .frasco:nth-of-type(1) { transform: rotate(-7deg); }
.hero__frascos .frasco:nth-of-type(3) { transform: rotate(7deg); }
.hangul { position: absolute; z-index: 0; top: 0; left: 0; right: 0; text-align: center; font-family: "Noto Sans KR", var(--titulo);
  font-weight: 800; font-size: clamp(5.5rem, 12vw, 9.5rem); color: var(--aji-claro); line-height: 1; letter-spacing: .05em; user-select: none; }
@media (max-width: 820px) { .hero__grilla { grid-template-columns: 1fr; } .hero__frascos { order: -1; } }

/* ── Franja del lote ── */
.franja-lote { background: var(--tinta); color: var(--papel); }
.franja-lote__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; }
.franja-lote p { margin: 0; }
.franja-lote__quedan strong { color: var(--aji-claro); }

/* ── Secciones ── */
.seccion { padding: 64px 0; }
.seccion--verde { background: var(--repollo-claro); border-top: var(--borde); border-bottom: var(--borde); }
.seccion--tinta { --sombra-color: var(--repollo); --sombra-l: 4px 4px 0 var(--repollo); --sombra-s: 3px 3px 0 var(--repollo); background: var(--tinta); color: var(--papel); }
.titulo-pagina { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.vacio { font-size: 1.1rem; color: var(--suave); }

/* ── Superficies: panel (plano) y tarjeta (con sombra) ── */
.tarjeta, .adelanto, .avisame__form, .resumen,
.entrega, .paso, .caja, .pasos li { background: var(--superficie); border: var(--borde); border-radius: var(--radio-l); padding: 24px; }
.tarjeta, .adelanto, .avisame__form, .resumen { box-shadow: var(--sombra-l); }

/* ── Tarjetas de frascos ── */
.grilla-frascos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.tarjeta { display: flex; flex-direction: column; gap: 4px; }
.tarjeta__frasco { display: flex; justify-content: center; background: var(--hundido); border-radius: var(--radio-m); padding: 14px 0; margin-bottom: 10px; }
.tarjeta h3, .tarjeta p { margin: 0; }
.tarjeta__distintivo { color: var(--repollo-osc); font-weight: 700; font-size: .92rem; }
.tarjeta .stock { margin-bottom: 14px; }
.tarjeta .boton { margin-top: auto; }
.tarjeta--agotada { opacity: .6; }
.precio { font-family: var(--titulo); font-weight: 800; font-size: 1.6rem; margin-top: 6px !important; }
.stock progress { width: 100%; height: 10px; appearance: none; border: var(--borde); border-radius: var(--pildora); overflow: hidden; background: var(--hundido); }
.stock progress::-webkit-progress-bar { background: var(--hundido); }
.stock progress::-webkit-progress-value { background: var(--repollo); }
.stock progress::-moz-progress-bar { background: var(--repollo); }
.stock--poco progress::-webkit-progress-value { background: var(--aji); }
.stock--poco progress::-moz-progress-bar { background: var(--aji); }
.stock p { font-size: .9rem; color: var(--suave); margin-top: 4px; }
.stock--poco p { color: var(--aji); font-weight: 700; }

/* ── Adelanto (vitrina) ── */
.adelanto { max-width: 760px; padding: 28px; }
.adelanto p { color: var(--suave); }
.adelanto .adelanto__grande { font-family: var(--titulo); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; margin-top: 0; color: var(--tinta); }

/* ── Pasos ── */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.pasos p { margin: 0; color: var(--suave); }
.pasos__n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: var(--papel);
  font-family: var(--titulo); font-weight: 800; margin-bottom: 12px; }

/* ── Entregas ── */
.entregas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .entregas { grid-template-columns: 1fr; } }
.entrega h2 { font-size: 1.7rem; }
.entrega h2 .icono { color: var(--repollo); }
.entrega__hora { font-family: var(--titulo); font-weight: 800; font-size: 1.3rem; color: var(--repollo-osc); margin: 0 0 8px; }
.etiquetas { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas .chip { font-weight: 500; font-size: .88rem; padding: 2px 12px; }
.grilla-metro { width: 100%; border-collapse: collapse; margin-top: 12px; }
.grilla-metro th, .grilla-metro td { text-align: left; padding: 8px 6px; border-bottom: var(--linea-punteada); }
.grilla-metro th { color: var(--suave); }
.grilla-metro td:nth-child(2) { font-weight: 700; }
.grilla-metro tr.lleno { color: var(--linea); text-decoration: line-through; }

/* ── Hecho a mano ── */
.manos { text-align: center; max-width: 760px; }
.manos__grande { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.1; }
.manos p { color: var(--sobre-tinta); }
.manos .manos__grande { color: var(--papel); }
.manos__acento { color: var(--sobre-tinta-acento); }
.manos__seguir { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ── Avísame ── */
.avisame { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 820px) { .avisame { grid-template-columns: 1fr; } }
.avisame__form { display: grid; gap: 12px; }

/* ── Formularios ── */
label { display: grid; gap: 4px; font-weight: 500; font-size: .95rem; }
input, select, textarea { font: inherit; padding: 10px 12px; border: var(--borde); border-radius: var(--radio-m); background: var(--superficie); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--repollo); outline-offset: 1px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.check input, .opcion input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--repollo); }

/* ── Pedido ── */
.pedido-form, .pedido { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .pedido-form, .pedido { grid-template-columns: 1fr; } }
.pedido-form__pasos { display: grid; gap: 24px; }
.paso { margin: 0; display: grid; gap: 12px; }
.paso legend { font-family: var(--titulo); font-weight: 800; font-size: 1.4rem; padding: 0 8px; display: flex; align-items: center; gap: 10px; }
.paso legend .pasos__n { margin: 0; width: 32px; height: 32px; }
.linea-frasco { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: var(--linea-punteada); }
.linea-frasco:last-of-type { border-bottom: 0; }
.linea-frasco__info { display: grid; flex: 1; }
.linea-frasco__info span, .linea-frasco__info small { color: var(--suave); font-size: .9rem; }
.linea-frasco--agotada { opacity: .5; }
.cantidad input { width: 80px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.subtitulo { font-weight: 700; margin: 8px 0 0; }
.opcion { display: flex; align-items: flex-start; gap: 10px; border: var(--borde); border-radius: var(--radio-m); padding: 12px; cursor: pointer; background: var(--superficie); }
.opcion:has(input:checked) { background: var(--repollo-claro); box-shadow: var(--sombra-s); }
.opcion small { display: block; color: var(--suave); }
.opcion .con-icono { display: inline-flex; gap: 6px; vertical-align: -4px; }
.opcion--llena { opacity: .45; cursor: not-allowed; }
.estaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.campos .ancho, .campos .check, .campos .boton { grid-column: 1 / -1; }
.campos .corto { grid-column: span 1; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
.domicilio[hidden] { display: none; }
.resumen { position: sticky; top: 88px; }
.resumen h2 { font-size: 1.5rem; }
.resumen__total, .resumen__linea { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0; }
.resumen__total { padding-top: 10px; border-top: var(--linea-punteada); }
.resumen__total strong { font-family: var(--titulo); font-size: 1.6rem; }
.caja { margin-top: 24px; }
.caja h2 { font-size: 1.4rem; }
.caja .con-icono .icono { color: var(--repollo); }
.datos-cuenta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; }
.datos-cuenta dt { color: var(--suave); }
.datos-cuenta dd { margin: 0; font-weight: 700; }
.pago-opciones { display: grid; gap: 16px; }
.pago-opcion h3 { margin-bottom: 6px; }
.separador { text-align: center; color: var(--suave); font-size: .9rem; margin: 4px 0; }

/* ── Instagram: ícono + cuenta ── */
.ig { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.ig:not(.boton):hover span { text-decoration: underline; }
.ig__icono { flex: none; }
.ig--solo-icono span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ig--solo-icono .ig__icono { width: 26px; height: 26px; }

/* ── Checkout demo y error ── */
.checkout-demo { max-width: 640px; }
.checkout-demo__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.error { padding: 80px 0; text-align: center; }

/* ── Pie ── */
.pie { background: var(--tinta); color: var(--papel); padding: 36px 0; border-top: 6px solid var(--repollo); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.pie p { margin: 0 0 6px; color: var(--sobre-tinta); }
.pie__marca { font-family: var(--titulo); font-weight: 800; font-size: 1.6rem; color: var(--papel) !important; }
.pie__links { display: grid; gap: 6px; align-content: start; }
.pie a { color: var(--sobre-tinta-acento); }
.pie__credito { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--sobre-tinta) 25%, transparent); font-size: .8rem; }
.pie__nuevosur { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; vertical-align: middle; }
.nuevosur { width: 17px; height: 17px; flex: none; }

/* ── Rediseño 2026-10-16: reservar en un minuto, recetas y menos ruido ──
   Accesibilidad: una sola acción principal por pantalla, etiquetas que no parecen botones,
   botones − / + de 44 px, foco visible y nada que dependa solo del color. */
:focus-visible { outline: 3px solid var(--repollo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Etiquetas de marca: informan, no se pulsan (sin sombra ni borde grueso). */
.etiquetas-marca { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--tinta);
  background: var(--hundido); border-radius: var(--pildora); padding: 4px 12px; }
.etiqueta .icono { color: var(--repollo-osc); }
.hero__accion { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 26px 0 0; }
.hero__frascos .frasco:nth-of-type(1) { transform: rotate(-7deg); }
.hero__frascos .frasco:nth-of-type(3) { transform: rotate(7deg); }

/* Tarjetas de frasco con cantidad */
.paso-cantidad { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.paso-cantidad input { width: 64px; text-align: center; font-weight: 800; font-size: 1.15rem; padding: 8px 4px; }
.paso-cantidad__boton { width: 44px; height: 44px; border: var(--borde); border-radius: 50%; background: var(--superficie);
  font-family: var(--titulo); font-weight: 800; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.paso-cantidad__boton:hover { background: var(--repollo-claro); }
.nota--urgente { color: var(--aji); font-weight: 700; margin: 0; }
.tarjeta__distintivo { color: var(--suave) !important; font-weight: 500 !important; }

/* Barra para reservar: abajo de los frascos; fija en pantalla cuando hay algo elegido. */
.barra-reserva { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px;
  background: var(--superficie); border: var(--borde); border-radius: var(--radio-l); padding: 12px 12px 12px 20px; }
.barra-reserva p { margin: 0; font-weight: 700; font-size: 1.1rem; }
.barra-reserva--activa { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--sombra-l); }

/* Recetas */
.grilla-recetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 20px 0 24px; }
.receta-tarjeta { background: var(--superficie); border: var(--borde); border-radius: var(--radio-l); padding: 20px; }
.receta-tarjeta h3 { font-size: 1.25rem; margin-bottom: 6px; }
.receta-tarjeta h3 a { text-decoration: none; }
.receta-tarjeta h3 a:hover { text-decoration: underline wavy var(--repollo); }
.receta-tarjeta p { margin: 0; color: var(--suave); }
.receta-tarjeta__meta { font-size: .85rem; font-weight: 700; color: var(--repollo-osc) !important; margin: 0 0 6px !important; }
.recetas { max-width: 880px; }
.receta { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 28px 0; border-bottom: var(--linea-punteada); scroll-margin-top: 90px; }
.receta h2 { font-size: 1.7rem; margin-bottom: 6px; }
.receta__cuerpo { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; }
.receta__cuerpo h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.receta__cuerpo ul, .receta__cuerpo ol { padding-left: 1.2em; margin: 0; display: grid; gap: 4px; }
.receta__guino { background: var(--repollo-claro); border-radius: var(--radio-m); padding: 10px 14px; font-weight: 500; }
@media (max-width: 680px) { .receta { grid-template-columns: 1fr; } .receta__frasco { display: none; } .receta__cuerpo { grid-template-columns: 1fr; } }

/* Cómo reservar + entrega en Metro */
#como .pasos { margin-bottom: 24px; }
.entrega--metro { max-width: 760px; }
.entrega--metro h3 { font-size: 1.4rem; }
.entrega--metro .icono { color: var(--repollo); }
.seccion--suave { background: var(--hundido); }
.seccion--compacta { padding: 40px 0 64px; }
/* En el celular, tarjetas horizontales: dibujo a la izquierda, datos a la derecha. */
@media (max-width: 560px) {
  .grilla-frascos { gap: 14px; }
  .tarjeta { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px; align-items: start; }
  .tarjeta__frasco { grid-row: 1 / span 6; padding: 6px 0; margin: 0; }
  .tarjeta__frasco .frasco { width: 64px; height: 80px; }
  .tarjeta .precio { font-size: 1.3rem; }
}
.recetas__titulo { margin-top: 40px; }
.guia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.guia__item { background: var(--superficie); border: var(--borde); border-radius: var(--radio-l); padding: 18px; }
.guia__item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.guia__item p { margin: 0; color: var(--suave); }
.combinaciones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; }
.combinaciones li { padding: 10px 0; border-bottom: var(--linea-punteada); }
.combinaciones strong { display: block; }
.receta__nombre { font-size: 1.6rem; margin-bottom: 6px; }
.receta__cuerpo h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: 10px 0 6px; }