/*
 * Landing de Málico. Mismos tokens y componentes que la app (hosting-app/src/estilos.css y DESIGN.md):
 * papel kraft, tinta café, óxido como acento, Young Serif para nombres e IBM Plex Sans tabular para datos.
 * Solo tono claro. Botones y chips con filo de 2 px, nunca pastilla.
 */
:root {
  --bg: #f6efe7;
  --surface: #fffaf3;
  --surface-2: #efe4d6;
  --line: #cdb9a3;
  --text: #3b2a20;
  --muted: #66503f;
  --ink: #3b2a20;
  --on-ink: #f6efe7;
  --on-ink-soft: #f6efe7;
  --ink-hover: #4f3a2c;
  --accent: #9a5314;
  --on-accent: #ffffff;
  --accent-text: #8a4a10;
  --honey: #e0a83a;
  --star-line: #8a5a00;
  --ok: #2f5e22;
  --ok-bg: #e1ecd5;
  --focus: #245469;
  --f-display: "Young Serif", Georgia, serif;
  --f-data: "IBM Plex Sans", system-ui, sans-serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (min-width: 900px) { html { scroll-padding-top: 88px; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--f-data); -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
.dato, .num { font-variant-numeric: tabular-nums; }

.contenedor { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Cinta de avisos y encabezado ────────────────────────────────────── */
/* Cintillo de novedades: corre de derecha a izquierda como en las noticias. Es el mismo en la landing y en la app
   (hosting-app/src/estilos.css): si cambias algo aquí, cámbialo allá. Hay 4 copias de la lista para que siempre
   llene la pantalla, y el desplazamiento de -50% (dos listas) es lo que lo hace continuo. */
.cinta { position: relative; background: var(--ink); color: var(--on-ink); overflow: hidden; }
.cinta-pista { display: flex; width: max-content; animation: cinta-mover 60s linear infinite; }
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista, .cinta.pausada .cinta-pista { animation-play-state: paused; }
.cinta-lista {
  list-style: none; margin: 0; padding: 9px 0; display: flex; flex: none; white-space: nowrap;
  font: 600 12px/1.4 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase;
}
.cinta-lista li::after { content: "·"; margin: 0 28px; color: var(--honey); }
.cinta a { color: inherit; text-decoration: none; }
.cinta a:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cinta a:focus-visible, .cinta .cinta-pausa:focus-visible { outline: 2px solid var(--honey); outline-offset: 1px; }
.cinta .cinta-pausa {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48px; min-height: 0; padding: 0; display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink); border: 0; border-radius: 0; box-shadow: -14px 0 12px var(--ink); cursor: pointer;
}
.cinta .cinta-pausa:hover { background: var(--ink); color: var(--honey); }
.cinta .cinta-pausa .ic-seguir, .cinta .cinta-pausa[aria-pressed="true"] .ic-pausa { display: none; }
.cinta .cinta-pausa[aria-pressed="true"] .ic-seguir { display: block; }
@keyframes cinta-mover { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta .cinta-pausa { display: none; }
  .cinta-pista { animation: none; width: auto; justify-content: center; }
  .cinta-lista[aria-hidden="true"] { display: none; }
  .cinta-lista { flex-wrap: wrap; justify-content: center; white-space: normal; padding-inline: 16px; gap: 2px 0; }
  .cinta-lista li:last-child::after { display: none; }
}

.cab { position: static; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--ink); }
.cab-fila { display: flex; align-items: center; gap: 12px 28px; min-height: 64px; flex-wrap: wrap; padding-block: 6px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 400 28px/1 var(--f-display); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.logo::before { content: ""; flex: none; width: 26px; height: 35px; background: currentColor; -webkit-mask: url(/assets/logo-mucilago-grueso.svg) center / contain no-repeat; mask: url(/assets/logo-mucilago-grueso.svg) center / contain no-repeat; }
.logo:hover { color: var(--text); }
.nav { display: flex; gap: 0 22px; flex: 1 1 100%; order: 3; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--text); text-decoration: none;
  font: 600 13px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--accent); }
.cab .btn { margin-left: auto; }
@media (max-width: 899px) { .nav { flex-wrap: wrap; overflow: visible; gap: 0 18px; } }
@media (min-width: 900px) { .cab { position: sticky; top: 0; } .nav { order: 0; flex: 1 1 auto; } }

/* ── Botones, insignias, chips ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  background: var(--ink); color: var(--on-ink); border: 2px solid var(--ink); border-radius: 2px; cursor: pointer;
  font: 600 14px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transition: background 0.15s;
}
.btn:hover { background: var(--ink-hover); color: var(--on-ink); border-color: var(--ink-hover); }
.btn:active { transform: translateY(1px); }
.btn.sec { background: transparent; color: var(--text); border: 2px solid var(--text); }
.btn.sec:hover { background: var(--surface-2); color: var(--text); }
.btn.claro { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.btn.claro:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.btn.sec-claro { background: transparent; color: var(--on-ink); border: 2px solid var(--on-ink); }
.btn.sec-claro:hover { background: rgba(246, 239, 231, 0.12); color: var(--on-ink); }
.btn.grande { min-height: 56px; padding: 0 28px; font-size: 15px; }
.btn svg { flex: none; }

.insignia {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 2px;
  font: 600 12px var(--f-data); letter-spacing: 0.04em; border: 1.5px solid currentColor;
}
.insignia.ok { background: var(--ok-bg); color: var(--ok); }
.insignia.punteada { border-style: dashed; color: var(--muted); }
.insignia.sobre-oxido { background: var(--on-accent); color: var(--accent-text); border-color: var(--on-accent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 2px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--line); font: 500 15px var(--f-data);
}
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip[aria-pressed="true"]::before { content: ""; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); margin-right: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding: 40px 0 64px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(42px, 9vw, 88px); line-height: 1.02; letter-spacing: -0.02em; margin: 18px 0 20px; }
.hero .lead { font-size: 20px; line-height: 1.5; max-width: 34em; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-pie { margin-top: 20px; font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (min-width: 900px) { .hero { padding: 64px 0 88px; } .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } }

/* La hoja de cata: tarjeta con borde de tinta y sombra dura, como las tarjetas de la app. */
.hoja {
  background: var(--surface); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink);
  padding: 22px 22px 18px; display: grid; gap: 14px;
}
.hoja-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.etq { font: 600 12px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hoja-puntaje { font: 700 clamp(72px, 17vw, 96px)/1 var(--f-data); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hoja-puntaje small { font-size: 16px; letter-spacing: 0.04em; font-weight: 600; margin-left: 0.4em; color: var(--muted); text-transform: uppercase; }
.hoja h2 { font-size: clamp(30px, 5vw, 40px); line-height: 1.1; }
.hoja-donde { color: var(--muted); font-size: 16px; margin-top: -8px; }
.hoja-puente { margin-top: 18px; font-size: 16px; max-width: 30em; }
.hoja-datos { margin: 0; display: grid; border-top: 2px solid var(--ink); }
.hoja-datos > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.hoja-datos dt { font: 600 12px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.hoja-datos dd { margin: 0; font: 500 16px var(--f-data); text-align: right; font-variant-numeric: tabular-nums; }
.hoja-fuente { font-size: 13px; color: var(--muted); }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { padding: 72px 0; }
.seccion h2 { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.06; letter-spacing: -0.015em; }
.seccion .intro { margin-top: 16px; font-size: 19px; max-width: 38em; }
.seccion-cab { margin-bottom: 36px; }
.oxido { background: var(--accent); color: var(--on-accent); }
.oxido a { color: var(--on-accent); }
.oxido a:hover { color: var(--on-ink); }
.tinta { background: var(--ink); color: var(--on-ink); }
.tinta a { color: var(--on-ink); }
.tinta .suave { color: var(--on-ink-soft); }
.kraft2 { background: var(--surface-2); border-block: 1px solid var(--line); }
@media (max-width: 639px) { .seccion { padding: 56px 0; } }

/* Lo nuevo: recetario y convertidor */
.nuevo-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .nuevo-grid { grid-template-columns: 1.15fr 0.85fr; gap: 36px; } }
.bloque { background: var(--surface); color: var(--text); border: 2px solid var(--ink); border-radius: 20px; padding: 22px; display: grid; gap: 18px; }
.bloque h3 { font-size: 28px; line-height: 1.1; }
.bloque.oscuro { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--on-accent); }
.bloque.oscuro a { color: var(--on-ink); }
.bloque .sub { color: var(--muted); font-size: 16px; }
.bloque.oscuro .sub { color: var(--on-ink-soft); }

.receta-datos { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.receta-datos > div { padding: 10px 12px; border-left: 1px solid var(--line); }
.receta-datos > div:first-child { border-left: 0; }
.receta-datos dt { font: 600 11px var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.receta-datos dd { margin: 2px 0 0; font: 700 19px var(--f-data); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .receta-datos { grid-template-columns: repeat(2, 1fr); }
  .receta-datos > div:nth-child(3) { border-left: 0; }
  .receta-datos > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.receta-pasos { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.receta-pasos li { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.receta-pasos .n { font: 700 14px var(--f-data); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.receta-pasos .t { font: 400 20px/1.2 var(--f-display); }
.receta-pasos .s { font: 700 14px var(--f-data); font-variant-numeric: tabular-nums; padding: 3px 8px; border: 1.5px solid var(--line); border-radius: 2px; background: var(--bg); }
.receta-pasos .agua { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; font: 600 13px var(--f-data); color: var(--muted); font-variant-numeric: tabular-nums; }
.receta-pasos .agua i { display: block; flex: 1; height: 10px; border: 2px solid var(--ink); border-radius: 2px; background: var(--surface); overflow: hidden; }
.receta-pasos .agua i b { display: block; height: 100%; background: var(--accent); }
.enlace-flecha { font: 600 14px var(--f-data); letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.enlace-flecha::after, .btn.flecha::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* Convertidor en miniatura */
.conv { display: grid; gap: 14px; }
.conv label { display: grid; gap: 6px; }
.conv label span { font: 500 13px var(--f-data); color: var(--on-ink-soft); }
.conv select, .conv input {
  font: 400 16px var(--f-data); min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--text); width: 100%;
}
.conv input { font-weight: 700; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.conv .fila-clics { display: grid; grid-template-columns: 48px 1fr 48px; gap: 6px; }
.conv .paso { min-height: 48px; border-radius: 2px; border: 2px solid var(--on-ink); background: transparent; color: var(--on-ink); cursor: pointer; display: grid; place-items: center; }
.conv .paso:hover { background: rgba(246, 239, 231, 0.14); }
.conv-res { text-align: center; border: 2px solid var(--on-ink); border-radius: 12px; padding: 14px 12px; display: grid; gap: 4px; }
.conv-res .grande { font: 700 clamp(64px, 18vw, 88px)/1 var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.conv-res .grande small { font-size: 0.28em; letter-spacing: 0.06em; margin-left: 0.2em; text-transform: uppercase; font-weight: 600; }
.conv-res p { font-size: 15px; color: var(--on-ink-soft); }
.conv-res p strong { color: var(--on-ink); }

/* ── México: hoja de cata completa ───────────────────────────────────── */
.constancia { display: grid; gap: 4px 28px; padding: 20px 0; margin-bottom: 28px; border-block: 2px solid var(--ink); }
.constancia strong { font: 400 clamp(26px, 4vw, 36px)/1.1 var(--f-display); }
.constancia p { color: var(--muted); font-size: 16px; }
@media (min-width: 760px) { .constancia { grid-template-columns: auto 1fr; align-items: baseline; } }
.mx-controles { display: grid; gap: 12px; margin-bottom: 22px; }
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 2px; background: var(--ink); border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; max-width: 560px; }
.tabs button { min-height: 52px; border: 0; border-radius: 0; background: var(--surface); color: var(--text); font: 700 16px var(--f-data); font-variant-numeric: tabular-nums; cursor: pointer; }
.tabs button:hover { background: var(--surface-2); }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.mx-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .mx-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .mx-mapa { position: sticky; top: 92px; } }
.mx-mapa { border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); padding: 14px 14px 10px; }
.mx-mapa svg { display: block; width: 100%; height: auto; }
.mx-mapa .pais { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.mx-mapa .estados { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linejoin: round; }
.mx-mapa .punto { fill: var(--accent); fill-opacity: 0.94; stroke: var(--ink); stroke-width: 3; }
.mx-mapa .nombre { font: 600 21px var(--f-data); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
.mx-mapa-pie { font-size: 14px; color: var(--muted); margin-top: 6px; }
.lotes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lote { display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 14px; align-items: center; padding: 16px 8px; border-bottom: 1px solid var(--ink); }
.lote:hover { background: var(--surface-2); }
.lote .r { font: 700 18px var(--f-data); font-variant-numeric: tabular-nums; color: var(--accent-text); align-self: start; padding-top: 4px; }
.lote h3 { font: 400 24px/1.15 var(--f-display); }
.lote .quien { font-size: 15px; color: var(--muted); }
.lote .ficha { grid-column: 2 / 3; font: 500 14px var(--f-data); display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.lote .puntos { grid-row: 1 / span 2; grid-column: 3; text-align: right; font: 700 34px/1 var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lote .escala { grid-column: 2 / -1; height: 8px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--surface); overflow: hidden; margin-top: 8px; }
.lote .escala b { display: block; height: 100%; background: var(--accent); }
.mx-nota { margin-top: 18px; font-size: 14px; color: var(--muted); max-width: 52em; }
.mx-fuentes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }

/* ── Tostadores con premio ───────────────────────────────────────────── */
.premios { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--on-ink); }
.premio { display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid rgba(246, 239, 231, 0.4); }
.premio h3 { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.1; }
.premio .donde { font: 600 13px var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-soft); margin-top: 4px; }
.premio .logro { font-size: 18px; line-height: 1.45; }
.premio .logro em { font-style: normal; color: var(--honey); font-weight: 600; }
.premio .fuente { font-size: 14px; color: var(--on-ink-soft); margin-top: 6px; }
@media (min-width: 900px) { .premio { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .premio .fuente { grid-column: 2; } }
.tinta-cierre { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.tinta-cierre p { max-width: 36em; color: var(--on-ink-soft); font-size: 15px; }

/* ── Bitácora (próximamente) ─────────────────────────────────────────── */
.bit-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .bit-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.bit-pagina {
  background: var(--surface); border: 2px solid var(--ink); border-radius: 20px; padding: 22px 22px 20px; display: grid; gap: 14px;
}
.bit-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bit-pagina h3 { font-size: 30px; line-height: 1.1; }
.estrellas { display: flex; gap: 2px; }
.estrellas svg { width: 26px; height: 26px; }
.estrellas .llena { fill: var(--honey); stroke: var(--star-line); }
.estrellas .vacia { fill: none; stroke: var(--star-line); }
.bit-nota { font-size: 19px; line-height: 34px; min-height: 136px; background-image: linear-gradient(transparent 33px, var(--line) 33px); background-size: 100% 34px; }
.bit-lista { margin-top: 18px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.bit-lista li { padding-left: 28px; position: relative; font-size: 18px; }
.bit-lista li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 14px; height: 8px; border-left: 2.5px solid var(--accent-text); border-bottom: 2.5px solid var(--accent-text); transform: rotate(-45deg); }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { padding: 48px 0 40px; border-top: 2px solid var(--ink); }
.pie-grid { display: grid; gap: 28px 48px; }
@media (min-width: 760px) { .pie-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.pie h3 { font: 600 12px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie ul a { display: inline-flex; min-height: 36px; align-items: center; }
.pie .logo { display: inline-flex; margin-bottom: 10px; }
.pie .logo::before { width: 34px; height: 45px; }
/* Redes junto al logo del pie: iconos de línea, de 44 px de alto para tocarse bien */
.pie-marca { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
.pie .pie-marca .logo { margin: 0; }
.redes { display: inline-flex; align-items: center; gap: 2px; }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); text-decoration: none; transition: color .15s, background-color .15s; }
.redes a:hover { color: var(--accent-text); background: var(--surface-2); }
.redes svg { width: 24px; height: 24px; }
.redes a:last-child svg { transform: scale(1.14); } /* la nota de TikTok es más angosta: se agranda un poco para que pese igual que el icono de Instagram */
.pie-legal { margin-top: 32px; font-size: 13px; color: var(--muted); max-width: 60em; }

/* ── Página de tostadores ────────────────────────────────────────────── */
.t-hero { padding: 48px 0 72px; }
.t-hero .hero-grid { align-items: start; }
.t-hero h1 { font-size: clamp(40px, 8vw, 80px); line-height: 1.03; letter-spacing: -0.02em; margin: 16px 0 18px; }
.t-demo { display: grid; gap: 14px; align-content: start; }
.t-demo .vista { border: 2px dashed var(--line); border-radius: 20px; padding: 18px; background: var(--surface-2); min-height: 280px; display: grid; place-items: start center; }
.t-demo .vista > div { width: 100%; max-width: 480px; }
.codigo {
  margin: 0; padding: 14px 16px; background: var(--ink); color: var(--on-ink); border-radius: 12px; overflow-x: auto;
  font: 500 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.pasos-t { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: p; border-top: 2px solid var(--ink); }
.pasos-t li { counter-increment: p; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--ink); }
.pasos-t li::before { content: counter(p, decimal-leading-zero); font: 700 28px/1 var(--f-data); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pasos-t h3 { font-size: 28px; line-height: 1.1; margin-bottom: 6px; }
.pasos-t p { color: var(--text); max-width: 40em; }
.dos-col { display: grid; gap: 28px 56px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.lista-hechos { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lista-hechos li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.lista-hechos strong { display: block; font: 400 22px/1.2 var(--f-display); margin-bottom: 2px; }
.tinta .lista-hechos { border-top-color: var(--on-ink); }
.tinta .lista-hechos li { border-bottom-color: rgba(246, 239, 231, 0.4); }
.faq { display: grid; gap: 10px; }
.faq details { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 16px; }
.faq summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font: 600 16px var(--f-data); }
.faq details p { padding-bottom: 16px; color: var(--muted); }
.cta-final { display: grid; gap: 18px; justify-items: start; }
.cta-final h2 { max-width: 14em; }

/* ── Propuesta: las fincas primero ───────────────────────────────────── */
.p-hero { background: var(--ink); color: var(--on-ink); padding: 56px 0 0; }
.p-hero h1 { font-size: clamp(44px, 9.5vw, 96px); line-height: 1.02; letter-spacing: -0.02em; max-width: 12em; }
.p-hero .lead { margin-top: 22px; font-size: 20px; line-height: 1.5; max-width: 34em; }
.p-hero .hero-acciones { margin-top: 28px; }
.p-hero .hero-pie { color: var(--on-ink); margin-top: 20px; }
.p-indice { list-style: none; margin: 56px 0 0; padding: 0; display: grid; border-top: 2px solid var(--on-ink); }
.p-indice a { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: baseline; padding: 20px 0; color: var(--on-ink); text-decoration: none; border-bottom: 1px solid rgba(246, 239, 231, 0.4); }
.p-indice a:hover { background: rgba(246, 239, 231, 0.08); }
.p-indice .n { font: 700 15px var(--f-data); color: var(--honey); font-variant-numeric: tabular-nums; grid-row: 1 / span 3; }
.p-indice .nombre { font: 400 clamp(26px, 3.4vw, 34px)/1.1 var(--f-display); }
.p-indice .donde { font: 600 12px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-soft); }
.p-indice .logro { font-size: 15px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .p-indice { grid-template-columns: repeat(4, 1fr); gap: 0 28px; border-top: 2px solid var(--on-ink); margin-top: 72px; }
  .p-indice a { grid-template-columns: 1fr; padding: 24px 0 28px; align-content: start; border-bottom: 0; }
  .p-indice .n { grid-row: auto; }
}
.p-hero-cierre { height: 56px; }

.finca { padding: 80px 0; }
.finca.g2 { background: var(--surface-2); border-block: 1px solid var(--line); }
.finca-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .finca-grid { grid-template-columns: 1fr 1fr; gap: 64px; } .finca-izq { position: sticky; top: 92px; } .finca.inv .finca-izq { order: 2; } }
.finca-num { font: 700 15px var(--f-data); font-variant-numeric: tabular-nums; color: var(--accent-text); }
.finca-nombre { font-size: clamp(44px, 8vw, 92px); line-height: 1; letter-spacing: -0.02em; margin: 12px 0 14px; }
.finca-lugar { font: 600 13px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.finca-texto { margin-top: 24px; font-size: 20px; line-height: 1.55; max-width: 30em; }
.finca-fuentes { margin-top: 18px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ficha { background: var(--surface); border: 2px solid var(--ink); border-radius: 20px; padding: 22px; display: grid; gap: 22px; box-shadow: 6px 6px 0 var(--ink); }
.ficha h3 { font-size: 24px; line-height: 1.15; margin-bottom: 4px; }
.ficha-datos { margin: 0; border-top: 2px solid var(--ink); }
.ficha-datos > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ficha-datos dt { font: 600 12px var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.ficha-datos dd { margin: 0; font-size: 16px; }
@media (max-width: 479px) { .ficha-datos > div { grid-template-columns: 1fr; gap: 2px; } }
.historial { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; align-items: start; }
.historial .col { display: grid; justify-items: center; gap: 6px; padding: 8px 0 6px; border-top: 2px solid var(--ink); }
.historial .anio { font: 700 12px var(--f-data); color: var(--muted); font-variant-numeric: tabular-nums; }
.historial .vacio { font: 500 14px var(--f-data); color: var(--line); height: 34px; display: grid; place-items: center; }
.pto { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); font: 700 14px var(--f-data); font-variant-numeric: tabular-nums; }
.pto.oro { background: var(--honey); }
.pto.fuera { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.pto-p { font: 600 11px var(--f-data); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -3px; }
.historial-leyenda { font-size: 14px; color: var(--muted); }
.historial-detalle { border: 1.5px dashed var(--line); border-radius: 12px; padding: 0 14px; }
.historial-detalle summary { min-height: 46px; display: flex; align-items: center; cursor: pointer; font: 600 15px var(--f-data); }
.historial-detalle ul { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.mapita svg { display: block; width: 100%; height: auto; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.mapita .pais { fill: var(--surface); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.mapita .estados { fill: none; stroke: var(--line); stroke-width: 1.4; }
.mapita .punto { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
.mapita .nombre { font: 700 24px var(--f-data); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }

.finca-foto { margin: 26px 0 0; max-width: 34em; }
.finca-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); border-radius: 20px; background: var(--surface-2); }
.finca-foto figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.p-banda { margin: 0; }
.p-banda img { display: block; width: 100%; height: clamp(240px, 38vw, 460px); object-fit: cover; object-position: 50% 58%; border-top: 2px solid var(--on-ink); background: var(--surface-2); }
.p-banda figcaption { padding: 12px 0 16px; font-size: 14px; line-height: 1.45; color: var(--on-ink-soft); }
.p-banda figcaption a { color: var(--on-ink); }

/* ── Inicio: la misión ───────────────────────────────────────────────── */
.m-hero { padding: 40px 0 72px; }
.m-hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .m-hero { padding: 64px 0 96px; } .m-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.m-hero h1 { font-size: clamp(42px, 8.6vw, 88px); line-height: 1.02; letter-spacing: -0.02em; }
.m-hero .lead { margin-top: 22px; font-size: 20px; line-height: 1.5; max-width: 33em; }
.m-hero .hero-acciones { margin-top: 28px; }
.m-hero .hero-pie { margin-top: 18px; }
.m-foto { margin: 0; }
.m-foto > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); background: var(--surface-2); }
.m-foto figcaption { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.m-ficha { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); overflow: hidden; }
.m-ficha > div { padding: 9px 12px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.m-ficha dt { font: 600 11px var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.m-ficha dd { margin: 2px 0 0; font: 700 19px var(--f-data); font-variant-numeric: tabular-nums; }

.m-tesis { padding: 88px 0; }
.m-tesis h2 { font-size: clamp(32px, 5.6vw, 60px); line-height: 1.05; letter-spacing: -0.015em; max-width: 14em; }
.m-tesis-texto { margin-top: 24px; display: grid; gap: 16px; max-width: 38em; font-size: 20px; line-height: 1.55; }
.m-tesis-texto p { margin: 0; }
.cadena { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.cadena li { display: grid; grid-template-columns: 64px 1fr; gap: 2px 16px; align-items: center; padding: 14px 0; position: relative; }
.cadena li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 66px; bottom: -14px; width: 2px; background: var(--on-ink); opacity: 0.55; }
.cadena .nodo { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--on-ink); display: grid; place-items: center; background: var(--ink); position: relative; z-index: 1; }
.cadena .nodo svg { width: 28px; height: 28px; }
.cadena li.mio .nodo { background: var(--honey); border-color: var(--honey); color: var(--ink); }
.cadena strong { font: 400 24px/1.1 var(--f-display); align-self: end; }
.cadena span.sub { font: 500 15px/1.35 var(--f-data); color: var(--on-ink-soft); align-self: start; }
.cadena .aqui { font: 700 12px var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--honey); position: absolute; top: -2px; left: 80px; margin: 0; white-space: nowrap; }
.cadena li.mio.con-aqui { padding-top: 34px; }
@media (min-width: 900px) {
  .cadena { grid-template-columns: repeat(6, 1fr); gap: 0 12px; margin-top: 72px; }
  .cadena li { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 0; }
  .cadena li:not(:last-child)::after { left: 64px; right: -12px; top: 31px; bottom: auto; width: auto; height: 2px; }
  .cadena .nodo { grid-row: auto; margin-bottom: 8px; }
  .cadena .aqui { top: -28px; left: 0; }
  .cadena li.mio.con-aqui { padding-top: 0; }
}
.variables { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--on-ink); }
.variables li { padding: 22px 0; border-bottom: 1px solid rgba(246, 239, 231, 0.4); display: grid; gap: 4px; }
.variables .v-etq { font: 600 12px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-soft); display: flex; align-items: center; gap: 8px; }
.variables .v-etq svg { width: 18px; height: 18px; color: var(--honey); }
.variables .v-val { font: 700 clamp(36px, 5vw, 52px)/1.05 var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.variables .v-txt { font-size: 16px; color: var(--on-ink-soft); max-width: 22em; }
.variables-nota { margin-top: 14px; font-size: 14px; color: var(--on-ink-soft); max-width: 46em; }
@media (min-width: 760px) { .variables { grid-template-columns: repeat(4, 1fr); gap: 0 28px; border-bottom: 0; } .variables li { border-bottom: 0; } }

.m-ritual { padding: 88px 0; }
.ritual { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 900px) { .ritual { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.ritual li { display: grid; gap: 14px; align-content: start; }
.ritual .num { font: 700 15px var(--f-data); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ritual figure { margin: 0; }
.ritual figure img, .ritual .dial { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); }
.ritual .dial { padding: 18px; object-fit: contain; }
.ritual figcaption { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.ritual h3 { font-size: 30px; line-height: 1.1; }
.ritual p { margin: 0; font-size: 17px; max-width: 24em; }
.ritual a.enlace-flecha { margin-top: 2px; }

.m-hub { padding: 88px 0; }
.hub-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .hub-grid { grid-template-columns: 1.1fr 0.9fr; gap: 72px; } }
.hub-lista { display: grid; gap: 22px; }
.hub-lista h3 { font: 600 12px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.hub-lista ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hub-lista li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.hub-lista li strong { display: block; font: 400 22px/1.2 var(--f-display); }

.m-exc { padding: 88px 0; }
.exc-grid { display: grid; gap: 22px; margin-top: 36px; }
@media (min-width: 900px) {
  /* Una sola tarjeta: foto a la izquierda y texto a la derecha, a todo el ancho. */
  .exc-grande { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr auto; }
  .exc-grande img { grid-row: 1 / span 2; height: 100%; min-height: 340px; border-bottom: 0; border-right: 2px solid var(--ink); }
  .exc-cuerpo { align-self: end; padding: 28px 32px 12px; gap: 12px; }
  .exc-pie { padding: 0 32px 20px; }
}
.exc-grande { display: grid; align-content: start; border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); overflow: hidden; box-shadow: 6px 6px 0 var(--ink); text-decoration: none; color: var(--text); }
.exc-grande img { display: block; width: 100%; height: clamp(220px, 28vw, 340px); object-fit: cover; border-bottom: 2px solid var(--ink); }
.exc-cuerpo { padding: 20px 22px 22px; display: grid; gap: 8px; }
.exc-cuerpo h3 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.exc-cuerpo p { margin: 0; font-size: 17px; }
.exc-puerta { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; border: 2px solid var(--ink); border-radius: 20px; text-decoration: none; color: var(--text); background: var(--bg); }
.exc-puerta h3 { font-size: 30px; line-height: 1.1; }
.exc-puerta p { margin: 0; font-size: 16px; }
.exc-grande:hover, .exc-puerta:hover { background: var(--surface-2); color: var(--text); }
.exc-pie { font-size: 13px; color: var(--muted); padding: 0 22px 16px; margin: 0; }

.m-widget { padding: 56px 0; }
.m-widget-fila { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; justify-content: space-between; }
.m-widget h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; max-width: 18em; }

/* ── Cata: rueda de sabores ──────────────────────────────────────────── */
.c-hero { padding: 48px 0 24px; }
.c-hero h1 { font-size: clamp(42px, 8vw, 84px); line-height: 1.04; letter-spacing: -0.02em; max-width: 12em; }
.c-hero .lead { margin-top: 20px; font-size: 20px; line-height: 1.5; max-width: 34em; }
.c-hero .hero-acciones { margin-top: 26px; }
.c-rueda { padding: 28px 0 72px; scroll-margin-top: 80px; }
.c-barra { display: grid; gap: 8px; margin-bottom: 22px; }
@media (min-width: 700px) { .c-barra { grid-template-columns: minmax(0, 440px) 1fr; align-items: end; gap: 24px; } }
.c-buscar { display: grid; gap: 6px; }
.c-buscar input { font: 400 16px var(--f-data); min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); width: 100%; }
.c-buscar input:focus-visible { border-color: var(--focus); }
.c-resultado { margin: 0; min-height: 24px; font-size: 15px; color: var(--muted); }
.c-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .c-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 40px; } .c-panel { position: sticky; top: 92px; } }
.c-rueda-caja { border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); padding: 10px; box-shadow: 6px 6px 0 var(--ink); }
.c-rueda-caja svg { display: block; width: 100%; height: auto; max-width: 720px; margin-inline: auto; aspect-ratio: 1; }
.c-sector { cursor: pointer; outline: none; transition: opacity 0.2s; }
.c-sector:hover .c-arco { filter: brightness(1.08); }
.c-sector:focus-visible .c-arco { stroke: var(--focus); stroke-width: 4; }
.c-arco.elegido { stroke: var(--ink); stroke-width: 3.5; }
.c-sector.apagado { opacity: 0.2; }
.c-et { font-family: var(--f-data); font-weight: 600; pointer-events: none; }
.c-centro { outline: none; }
.c-centro.activo { cursor: pointer; }
.c-centro.activo:hover circle { fill: var(--surface-2); }
.c-centro:focus-visible circle { stroke: var(--focus); stroke-width: 4; }
.c-centro-t { font: 400 16px var(--f-display); fill: var(--ink); }
.c-centro-s { font: 700 11px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--accent-text); }
@keyframes c-entra { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.c-giro.entra { animation: c-entra 0.28s ease-out; transform-origin: 0 0; }
.c-panel { border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); padding: 20px; display: grid; gap: 16px; align-content: start; min-height: 260px; }
.c-panel h3 { font-size: 30px; line-height: 1.1; }
.c-ayuda { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.c-familias { display: flex; flex-wrap: wrap; gap: 8px; }
.c-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.c-punto.grande { width: 20px; height: 20px; }
.c-familias .chip .c-punto { margin-right: 4px; }
.c-migas { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.c-miga { min-height: 32px; padding: 0 10px; border-radius: 2px; border: 1.5px solid var(--line); background: var(--bg); font: 600 12px var(--f-data); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; }
.c-miga:hover { border-color: var(--text); }
.c-miga.actual { cursor: default; border-style: dashed; border-color: var(--muted); }
.c-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.c-def { margin: 0; font-size: 17px; line-height: 1.5; }
.c-parece .c-def { font: 400 22px/1.3 var(--f-display); margin-top: 4px; }
.c-hijos { display: grid; gap: 8px; }
.c-agregar { width: 100%; }
.c-micata { margin-top: 36px; border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); padding: 20px; display: grid; gap: 16px; }
.c-micata-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.c-micata-cab h3 { font-size: 28px; }
.c-micata-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.c-micata-lista li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 6px 6px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); }
.c-micata-lista small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.c-micata-lista li.c-vacio { grid-column: 1 / -1; display: block; padding: 14px; border-style: dashed; color: var(--muted); }
.c-quitar { width: 44px; height: 44px; border-radius: 2px; border: 1.5px solid var(--line); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.c-quitar:hover { border-color: var(--text); }
.c-micata-acc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c-micata-nota { margin: 0; font-size: 14px; }
.c-lista { margin-top: 28px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface); padding: 0 16px; }
.c-lista summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font: 600 16px var(--f-data); }
.c-lista-cuerpo { padding-bottom: 18px; }
.c-lista-cuerpo ul { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 6px; }
.c-lista-cuerpo > ul { padding-left: 0; gap: 20px; }
.c-lista-cuerpo h3 { font-size: 26px; display: inline; }
.c-lista-cuerpo li span { color: var(--muted); }
.c-cierre { margin-top: 36px; display: grid; gap: 18px; max-width: 44em; font-size: 18px; }
.c-cierre p { margin: 0; }
.c-cierre .hero-acciones { margin: 0; }

/* ── Empieza por aquí: videos de la app en un teléfono ───────────────── */
.demos { display: grid; gap: 72px; }
.demo { display: grid; gap: 28px; align-items: center; scroll-margin-top: 80px; }
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 320px) 1fr; gap: 64px; }
  .demo.inversa { grid-template-columns: 1fr minmax(0, 320px); }
  .demo.inversa .demo-tel { order: 2; }
}
.demo-tel { display: grid; gap: 14px; justify-items: center; }
.telefono { width: min(100%, 300px); background: var(--ink); border: 3px solid var(--ink); border-radius: 38px; padding: 8px; box-shadow: 6px 6px 0 var(--ink); }
.demo-video { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1386; border-radius: 30px; background: var(--bg); }
.demo-pausa { cursor: pointer; }
.demo-texto h3 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.01em; }
.demo-porque { margin: 14px 0 22px; font-size: 18px; line-height: 1.5; max-width: 34em; }
.demo-pasos { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 6px; max-width: 38em; }
.demo-paso { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; width: 100%; text-align: left; padding: 12px 14px; border-radius: 2px; border: 1.5px solid transparent; background: transparent; color: var(--on-accent); font: 400 16px/1.4 var(--f-data); cursor: pointer; }
.demo-paso:hover { background: rgba(255, 255, 255, 0.1); }
.demo-paso.activo { background: rgba(255, 255, 255, 0.16); border-color: var(--on-accent); }
.demo-paso:focus-visible { outline: 3px solid var(--on-accent); outline-offset: 2px; }
.demo-n { font: 700 14px var(--f-data); font-variant-numeric: tabular-nums; padding-top: 3px; }
.demo-paso strong { display: block; font: 600 17px/1.3 var(--f-data); }
.demo-porque-p { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; }

/* ── Menú colapsable (hamburguesa) ───────────────────────────────────────
   menu.js agrega .con-menu al encabezado; sin JavaScript el menú queda visible como antes. */
.menu-btn { display: none; }
.cab.con-menu .cab-fila { position: relative; flex-wrap: nowrap; gap: 12px; }
.cab.con-menu .cab .btn, .cab.con-menu .btn { margin-left: auto; }
.cab.con-menu .menu-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 0 14px; justify-content: center;
  background: transparent; color: var(--text); border: 2px solid var(--ink); border-radius: 2px; cursor: pointer;
  font: 600 14px var(--f-data); letter-spacing: 0.1em; text-transform: uppercase;
}
.cab.con-menu .menu-btn:hover { background: var(--surface-2); }
.menu-barras, .menu-barras::before, .menu-barras::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.18s, background 0.18s;
}
.menu-barras { position: relative; }
.menu-barras::before, .menu-barras::after { content: ""; position: absolute; left: 0; }
.menu-barras::before { top: -6px; }
.menu-barras::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-barras { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-barras::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-barras::after { top: 0; transform: rotate(-45deg); }
.cab.con-menu .nav {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(340px, 100%);
  flex-direction: column; flex: none; order: 0; gap: 0; padding: 8px 18px; overflow: visible;
  background: var(--bg); border: 2px solid var(--ink); border-radius: 2px; box-shadow: var(--sh-hard-sm, 4px 4px 0 var(--ink));
}
.cab.con-menu .nav.abierto { display: flex; }
.cab.con-menu .nav a { min-height: 52px; border-bottom: 1px solid var(--line, rgba(59, 42, 32, 0.2)); font-size: 14px; }
.cab.con-menu .nav a:last-child { border-bottom: 0; }
.cab.con-menu .nav a:hover, .cab.con-menu .nav a[aria-current] { border-bottom-color: var(--accent); }
@media (max-width: 479px) {
  .cab.con-menu .menu-btn .menu-texto { display: none; }
  .cab.con-menu .btn { padding: 0 16px; }
}

/* Cata compartida contigo */
.c-recibida { margin-top: 36px; border: 2px solid var(--ink); border-radius: 20px; background: var(--surface-2); padding: 20px; display: grid; gap: 14px; box-shadow: var(--sh-hard-sm); }
.c-recibida h3 { font-size: 28px; }
.c-recibida p { margin: 0; }
.c-micata-acc [hidden] { display: none; }

/* Iconos del menú de hamburguesa */
.cab.con-menu .nav a { gap: 14px; }
.menu-icono { flex: none; color: var(--accent-text); }

/* Sin el botón «Abrir la app», el botón de menú queda a la derecha. */
.cab.con-menu .menu-btn { margin-left: auto; }

/* Etiqueta «Próximamente» dentro del menú (neutra: borde punteado) */
.menu-pronto { margin-left: auto; padding: 2px 8px; border: 1.5px dashed currentColor; border-radius: 2px; font: 600 10px/1.4 var(--f-data); letter-spacing: 0.06em; color: var(--muted); }

/* ── Campeones mexicanos ─────────────────────────────────────────────── */
.k-hero { padding: 64px 0 56px; border-bottom: 2px solid var(--ink); }
.k-hero h1 { margin-top: 16px; font-size: clamp(44px, 8vw, 84px); line-height: 1; letter-spacing: -0.02em; }
.k-hero .lead { margin-top: 20px; font-size: 20px; line-height: 1.5; max-width: 36em; }
.k-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .k-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; } }
.k-cat { border: 2px solid var(--ink); border-radius: 20px; background: var(--surface); padding: 22px 22px 18px; box-shadow: var(--sh-hard-sm, 4px 4px 0 var(--ink)); }
.k-cat h3 { font-size: 34px; line-height: 1.05; }
.k-que { margin: 6px 0 14px; color: var(--muted); font-size: 15px; }
.k-lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.k-lista li { display: grid; grid-template-columns: 3.4em 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.k-lista li:last-child { border-bottom: 0; }
.k-anio { font: 700 18px var(--f-data); font-variant-numeric: tabular-nums; color: var(--accent-text); }
.k-quien strong { display: block; font: 400 19px/1.2 var(--f-display); }
.k-quien small { color: var(--muted); font-size: 14px; }
.k-nota { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
.k-nota a, .k-fuente a { color: var(--accent-text); }
.k-fuente { margin: 26px 0 0; font-size: 14px; color: var(--muted); max-width: 46em; }
.k-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); counter-reset: k; }
.k-pasos li { counter-increment: k; position: relative; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--line); }
.k-pasos li::before { content: counter(k, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 700 14px var(--f-data); color: var(--accent-text); }
.k-pasos strong { display: block; font: 600 18px var(--f-data); margin-bottom: 2px; }

.seccion .insignia + h2 { margin-top: 14px; }

/* ── Cata en el inicio: la rueda en un teléfono, sobre fondo oscuro ─────── */
.m-cata .telefono { background: var(--on-ink); border-color: var(--on-ink); box-shadow: 8px 8px 0 var(--accent); }
.m-cata .demo-paso.activo { border-color: var(--honey); }
.cata-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 64px 0 0; padding-top: 28px; border-top: 2px solid var(--on-ink); }
.cata-cifras dd { margin: 0; order: -1; font: 400 clamp(48px, 8vw, 84px)/1 var(--f-display); color: var(--honey); font-variant-numeric: tabular-nums; }
.cata-cifras div { display: flex; flex-direction: column; gap: 6px; }
.cata-cifras dt { font: 600 13px/1.4 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-soft); }
@media (max-width: 639px) { .cata-cifras { grid-template-columns: 1fr; } .cata-cifras div { flex-direction: row; align-items: baseline; gap: 16px; } .cata-cifras dd { font-size: 48px; min-width: 2.2em; } }

/* Botones del inicio: debajo de la foto y de la ficha de la receta */
.m-foto .hero-acciones { margin-top: 22px; }
@media (min-width: 520px) { .m-foto .hero-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .m-foto .hero-acciones .btn { padding-inline: 12px; } }
@media (max-width: 519px) { .m-foto .hero-acciones { display: grid; gap: 12px; } .m-foto .hero-acciones .btn { width: 100%; } }

/* Ventana (popup) de la cata: pide iniciar sesión para guardar */
.modal-fondo { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(59, 42, 32, 0.6); }
.modal { width: min(100%, 440px); padding: 24px 22px 20px; border: 2px solid var(--ink); border-radius: 20px; background: var(--bg); box-shadow: 8px 8px 0 var(--accent); text-align: left; }
.modal h2 { margin: 0 0 8px; font-size: 28px; }
.modal p { margin: 0 0 16px; font-size: 17px; line-height: 1.5; }
.modal .error { color: var(--err, #a3321f); font-weight: 600; }
.modal .acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.modal .acciones .btn { flex: 1 1 160px; }

/* Ventana para crear la imagen de historias (cata): lienzo a un lado y pasos al otro; en celular, lienzo fijo arriba y pasos debajo */
.modal-fondo:has(.modal.historia) { padding: 8px; }
.modal.historia { --hist-alto: min(36dvh, 340px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(100%, 980px); height: calc(100dvh - 16px); padding: 0; overflow: hidden; }
.hist-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 2px solid var(--ink); }
.hist-cab h2 { margin: 0; font-size: 22px; }
.hist-x { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; }
.hist-x:hover { background: var(--surface-2); }
.hist-cuerpo { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: block; }
.hist-escenario { position: sticky; top: 0; z-index: 2; display: grid; place-items: center; padding: 10px; background: var(--surface-2); border-bottom: 2px solid var(--ink); }
.hist-lienzo { display: grid; place-items: center; height: var(--hist-alto); width: 100%; }
.hist-lienzo canvas { display: block; max-width: 100%; max-height: var(--hist-alto); width: auto; height: auto; border: 2px solid var(--ink); border-radius: 8px; background: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.hist-lienzo canvas.sin-fondo, .hist-estilo canvas.sin-fondo { background-color: #85725f; background-image: linear-gradient(45deg, #94816e 25%, transparent 25%, transparent 75%, #94816e 75%), linear-gradient(45deg, #94816e 25%, transparent 25%, transparent 75%, #94816e 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.hist-lienzo canvas.movible { cursor: grab; touch-action: none; }
.hist-lienzo canvas.movible:active { cursor: grabbing; }
.hist-panel { display: grid; gap: 0; padding: 0 16px 8px; }
.hist-paso { display: grid; gap: 10px; padding: 16px 0; border-bottom: 2px dashed var(--line); }
.hist-paso:last-child { border-bottom: 0; }
.hist-paso h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 16px var(--f-data); }
.hist-paso h3 b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 14px; }
.hist-paso h3 small, .hist-campo small { font: 500 13px var(--f-data); color: var(--muted); }
.hist-drop { display: grid; justify-items: center; gap: 2px; width: 100%; min-height: 112px; padding: 14px; border: 2px dashed var(--ink); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.hist-drop:hover, .hist-drop.encima { background: var(--surface-2); border-style: solid; }
.hist-drop .t { font: 700 16px var(--f-data); }
.hist-drop .s { font: 500 14px var(--f-data); color: var(--muted); }
.hist-drop.cargando { opacity: .6; pointer-events: none; }
.hist-drop.cargando .s::after { content: " · cargando…"; }
.hist-foto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-foto canvas { width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 8px; }
.hist-foto .t { flex: 1 1 auto; font: 700 16px var(--f-data); }
.hist-foto .btn { min-height: 48px; padding: 0 16px; }
.hist-estilos { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 10px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.hist-estilo { flex: 0 0 88px; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 6px 6px 8px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: center; }
.hist-estilo canvas { width: 72px; height: 128px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); }
.hist-estilo .n { font: 600 13px/1.15 var(--f-data); text-align: center; overflow-wrap: anywhere; }
.hist-estilo .r { font: 700 10px var(--f-data); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.hist-estilo[aria-checked="true"] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent); }
.hist-estilo[aria-checked="true"] .n { padding: 2px 8px; border-radius: 2px; background: var(--ink); color: var(--on-ink); }
.hist-estilo[aria-checked="true"] canvas { border-color: var(--ink); }
.hist-ayuda { margin: 0; font-size: 15px; color: var(--muted); }
.hist-campo { display: grid; gap: 6px; font: 600 15px var(--f-data); }
.hist-campo input { width: 100%; min-height: 48px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 2px; background: var(--surface); font: 500 16px var(--f-data); }
.hist-opcion { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 600 15px var(--f-data); cursor: pointer; }
.hist-opcion input { width: 26px; height: 26px; accent-color: var(--ink); }
.hist-aj { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; }
.hist-aj label { font: 600 15px var(--f-data); }
.hist-aj input[type=range] { width: 100%; min-height: 44px; accent-color: var(--ink); touch-action: pan-y; }
.hist-aj .btn { min-height: 44px; padding: 0 14px; }
.hist-aj p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); }
.hist-pie { display: grid; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: var(--bg); }
.hist-pie p { margin: 0; font-size: 15px; }
.hist-pie .resultado { color: var(--ok); font-weight: 600; }
.hist-pie .btn { width: 100%; }
.modal.historia [hidden] { display: none !important; }
@media (min-width: 720px) {
  .modal-fondo:has(.modal.historia) { padding: 16px; }
  .modal.historia { height: min(calc(100dvh - 32px), 860px); }
  .hist-cuerpo { display: grid; grid-template-columns: minmax(260px, 42%) 1fr; overflow: hidden; }
  .hist-escenario { position: static; padding: 20px; border-bottom: 0; border-right: 2px solid var(--ink); }
  .modal.historia { --hist-alto: calc(min(100dvh - 32px, 860px) - 250px); }
  .hist-lienzo { height: 100%; }
  .hist-panel { overflow-y: auto; padding: 0 24px 8px; }
  .hist-estilos { overflow: visible; display: grid; grid-template-columns: repeat(5, 1fr); }
  .hist-estilo { flex: none; }
  .hist-estilo canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; }
  .hist-pie { grid-template-columns: 1fr auto; align-items: center; }
  .hist-pie .btn { width: auto; min-width: 280px; grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 720px) and (max-width: 900px) { .hist-estilos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .hist-estilo { padding: 4px 4px 6px; } }
.hist-modo { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--ink); }
.hist-modo button { min-height: 48px; border: 0; background: transparent; color: var(--ink); font: 700 14px var(--f-data); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.hist-modo button + button { border-left: 2px solid var(--ink); }
.hist-modo button:hover { background: var(--surface-2); }
.hist-modo button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
.hist-prog { height: 12px; border: 2px solid var(--ink); border-radius: 2px; background: var(--surface); overflow: hidden; }
.hist-prog > div { width: 0; height: 100%; background: var(--accent); }
.hist-aj-info { margin: 0; font-size: 15px; color: var(--muted); }
.enlace { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent-text); font: 700 15px var(--f-data); text-decoration: underline; cursor: pointer; }
@media (min-width: 720px) { #c-hist-videos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }