/*
 * Sistema de diseño de eresloquecomes.cl — fuente única.
 *
 * Salió del <style> inline del home el 08/08/2026, cuando las subpáginas
 * se pusieron al día con el rediseño. NO volver a inline: si el home y las
 * subpáginas tienen copias distintas del sistema, se separan en una semana
 * y volvemos a tener dos sitios.
 *
 * Se usa junto con:
 *   /assets/elqc-tailwind.js  → los colores cafe/sage/terra y las fuentes
 *   /assets/elqc-site.js      → nav, menú móvil, iconos Lucide, reveal
 *   /assets/subscribe.js      → los formularios de suscripción
 */

:root { --ease: cubic-bezier(.22,.61,.36,1); }
html { scroll-behavior: smooth; }
body { background:#FDFAF6; -webkit-font-smoothing:antialiased; }

/* ---- El header y el footer se defienden solos ----
   Cuatro páginas (sobre, contacto, privacidad, gracias) apagan el preflight de
   Tailwind: se escribieron contra los estilos por defecto del navegador y el
   reset les dejaba los h1 en 16px. Sin preflight vuelven los enlaces
   subrayados, así que el shell compartido trae su propio reset acotado. */
#main-nav a, footer.band-dark a { text-decoration: none; color: inherit; }
#main-nav a:hover, footer.band-dark a:hover { text-decoration: none; }
/* El botón sí lleva su propio color: `color: inherit` de arriba se lo comía. */
#main-nav a.btn-primary, footer.band-dark a.btn-primary { color: #FDFAF6; }
#main-nav ul, footer.band-dark ul { list-style: none; margin: 0; padding: 0; }
#main-nav svg, footer.band-dark svg { display: inline-block; vertical-align: middle; }

/* ---- Tipografía fluida ---- */
.t-hero    { font-size: clamp(2.4rem, 5.2vw + 1rem, 4.6rem); line-height: 1.02; letter-spacing:-.02em; }
.t-section { font-size: clamp(1.8rem, 3vw + 1rem, 3rem);     line-height: 1.06; letter-spacing:-.015em; }
.t-page    { font-size: clamp(2.1rem, 4vw + 1rem, 3.6rem);   line-height: 1.04; letter-spacing:-.02em; }
.t-card    { font-size: clamp(1.15rem, .6vw + 1rem, 1.5rem); line-height: 1.15; letter-spacing:-.01em; }
.t-wordmark{ font-size: clamp(1.6rem, 2.4vw + .5rem, 2.6rem); }
.measure   { max-width: 60ch; }

/* ---- Wordmark manuscrito ---- */
.wordmark { font-family:'Caveat','Caveat respaldo',cursive; color:#C4714A; line-height:.9; }

/* ---- Hero full-bleed (home) ---- */
.hero { position:relative; min-height: clamp(560px, 88vh, 860px); display:flex; align-items:center; overflow:hidden; }
.hero__bg, .hero__bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__overlay {
  position:absolute; inset:0;
  background: linear-gradient(102deg, rgba(253,250,246,.96) 0%, rgba(253,250,246,.9) 26%, rgba(253,250,246,.55) 46%, rgba(253,250,246,.12) 64%, rgba(253,250,246,0) 80%);
}
.hero__content { position:relative; }
@media (max-width: 700px) {
  .hero { align-items:flex-start; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(253,250,246,.97) 0%, rgba(253,250,246,.92) 34%, rgba(253,250,246,.55) 56%, rgba(253,250,246,.05) 78%, rgba(253,250,246,0) 100%);
  }
}

/* ---- Encabezado de subpágina ----
   El home entra por una foto a sangre; una subpágina no puede pagar ese peso
   en cada visita, así que abre con tipografía sobre la banda crema. Mismo
   sistema, otro registro. El padding de arriba deja libre el nav fijo. */
.page-head { padding-top: clamp(7.5rem, 10vw, 10rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); background:#FDFAF6; }
.page-head--cafe { background:#F3EBDD; }
.page-head--sage { background:#EEF3EA; }

/* ---- Bandas / secciones editoriales ---- */
.band-sage  { background:#EEF3EA; }
.band-cafe  { background:#F3EBDD; }
.band-dark  { background:#2C2010; color:#F7F0E6; }
.figure { border-radius:18px; overflow:hidden; box-shadow:0 24px 60px -30px rgba(44,32,16,.45); }
.figure img { width:100%; height:100%; object-fit:cover; display:block; }
.kicker { font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }

/* ---- Tarjetas ---- */
.card {
  background:#fff; border:1px solid #EDE0CC; border-radius:18px; overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow:0 22px 44px -28px rgba(44,32,16,.42); border-color:#DBC9AA; }
.card__body { padding: clamp(1.1rem, 2vw, 1.6rem); }
.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid #DBC9AA; border-radius:999px; padding:.4rem .9rem;
  font-size:.82rem; color:#6B5230; background:#FDFAF6;
}
/* Grid intrínseco: columnas sin media queries. min(...,100%) evita el overflow.
   El ancho mínimo de columna se ajusta por elemento con style="--min:220px";
   sin declararlo son 280px, que es lo que necesita una tarjeta con foto. */
.grid-auto { display:grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); }

/* ---- Fichas de detalle ----
   Las escribe scripts/generar-fichas-web.ts (en elqc-coach) desde src/data/.
   Estas clases viven ACÁ y no allá: si el generador trajera su propio <style>,
   cada regeneración volvería a estampar una copia del diseño en 48 archivos y
   el sitio se separaría de nuevo — que es exactamente lo que pasó el 08/08. */
.ficha-migas { padding-top: clamp(6.5rem, 9vw, 8rem); }  /* despeja el nav fijo */
/* .card se levanta al pasar el mouse porque es un enlace; un bloque de lectura
   no se levanta, solo contiene. Por eso son dos clases y no una con excepción. */
.panel { background:#fff; border:1px solid #EDE0CC; border-radius:18px; }
.paso-num { width:30px; height:30px; background:#C4714A; color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:.82rem; font-weight:700; flex:none; }
.dato { background:#F0F7EE; border:1px solid #7DAA6E; color:#3A6230; border-radius:12px;
  padding:.7rem .5rem; text-align:center; }
.dato b { display:block; font-size:.95rem; font-weight:700; line-height:1.2; }
.dato span { font-size:.7rem; }

/* ---- Iconos Lucide ---- */
.ic { width:1.15em; height:1.15em; stroke-width:1.6; display:inline-block; vertical-align:-.15em; }
.ic-box { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; }
.ic-box svg { width:22px; height:22px; stroke-width:1.6; }

/* ---- Form ---- */
.input-clean { background:#fff; border:1.5px solid #DBC9AA; border-radius:12px; padding:14px 18px; font-size:16px;
  font-family:'Inter','Inter respaldo',Arial,sans-serif; color:#2C2010; outline:none; transition:border-color .2s,box-shadow .2s; width:100%; }
.input-clean::placeholder { color:#C4A882; }
.input-clean:focus { border-color:#5D8E4E; box-shadow:0 0 0 3px rgba(93,142,78,.15); }
.btn-primary { background:#2C2010; color:#FDFAF6; border-radius:12px; padding:14px 26px; font-size:15px; font-weight:600;
  font-family:'Inter','Inter respaldo',Arial,sans-serif; border:none; cursor:pointer; white-space:nowrap; transition:background .2s,transform .1s; }
.btn-primary:hover { background:#4A3820; }
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled { opacity:.6; cursor:default; }
.btn-ghost { border:1.5px solid #DBC9AA; color:#4A3820; border-radius:999px; padding:12px 26px; font-weight:600; transition:background .2s; }
.btn-ghost:hover { background:#F3EBDD; }

.msg-ok { display:none; }
.msg-ok.show { display:flex; }

/* ---- Sticky CTA móvil ---- */
#sticky-cta { transform:translateY(120%); transition:transform .35s var(--ease); }
#sticky-cta.show { transform:translateY(0); }

/* ---- Fade-up ---- */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; }
.reveal.in { animation: fadeUp .6s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .reveal,.reveal.in{opacity:1;animation:none} html{scroll-behavior:auto} }

/* ---- Área táctil de 44px ----------------------------------------------------
   Medido el 16/08/2026 en 390×844 con `scripts/auditar-sitio.mjs`: las páginas
   de listado tenían entre 21 y 39 objetivos bajo el mínimo táctil. Los filtros
   de categoría y los enlaces de ficha son cortos de ALTO, no de ancho: 30-37px
   donde el dedo necesita 44.

   Se agranda el área, no el dibujo: un ::after transparente y centrado recibe
   el toque y el diseño queda intacto. Cambiar el alto real habría movido el
   ritmo de todas las listas del sitio.

   ⚠️ Solo va en controles aislados, NUNCA en enlaces dentro de un párrafo: dos
   áreas de 44 que se solapan hacen que un enlace se robe el toque del vecino,
   que es peor que el objetivo chico. Se comprobó la separación antes de elegir
   a quién aplicárselo — filtros a 45px y fichas a 594px entran sin pisarse.

   Los enlaces del pie entraron después: estaban a 36px entre sí, así que un
   área de 44 se habría solapado y un enlace le habría robado el toque al de
   arriba. Primero se les dio aire de verdad en `partials/footer.html` (py-1 →
   py-2, que los deja a 44 exactos) y recién ahí se les puso el área. El orden
   importa: al revés, el arreglo empeoraba el pie en vez de mejorarlo. */
/* 🪤 El aire entre filas de filtros NO es cosmético: es lo que decide si el área
   de 44 de dos chips vecinos se pisa. Medido el 16/08/2026 con los filtros
   envueltos en varias filas: recetas y música iban a 46 y 45px (gap-3, bien),
   pero biblioteca y personajes a 38 y 37 (gap-2), o sea un chip le robaba el
   toque al de la fila de arriba.

   Ese error lo cometí midiendo UNA página y generalizando. El gap se fija acá,
   junto al área táctil, para que no dependa de qué utilitario eligió cada
   página: 30px de alto + 14 de aire = los 44 justos, y se pide 1rem. */
.flex:has(> .filter-btn) { row-gap: 1rem; }
/* Y el mismo cuidado en la columna del pie: con py-2 los enlaces quedaban a 44
   EXACTOS, sin holgura, así que el redondeo a subpíxel hacía que dos áreas se
   rozaran. 12px de aire lo dejan en 48 y la regla se cumple sin filo. */
footer .flex:has(> a.py-2) { row-gap: 0.75rem; }

.filter-btn, .elqc-ficha, footer a.py-2 { position: relative; }
.filter-btn::after, .elqc-ficha::after, footer a.py-2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: max(100%, 44px);
}

/* Enlaces sueltos: los que viven solos en su bloque ("Leer en El País →", el de
   Instagram). Miden 24-28px de alto y están a 254px del siguiente, así que el
   área de 44 entra sin acercarse a nada — se midió antes de escribir esto.

   ⚠️ `:not(p a)` NO es decoración: los mismos utilitarios de Tailwind se usan en
   enlaces dentro de párrafos, y ahí un área de 44 se comería las líneas de
   texto de arriba y abajo. Un enlace en medio de una frase que roba el toque de
   la línea vecina es peor que uno chico, y además la propia norma (WCAG 2.5.8)
   exime a los objetivos en línea dentro de un bloque de texto justamente por
   esto. El `content: none` de abajo es el cinturón además de los tirantes: si
   alguien agrega una clase nueva a la lista, el texto corrido sigue a salvo. */
a.inline-block:not(p a), a.inline-flex:not(p a) { position: relative; }
a.inline-block:not(p a)::after, a.inline-flex:not(p a)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: max(100%, 44px);
}
p a::after { content: none; }