/* Página de Vuelta. Un solo look, oscuro, sobre el verde bosque de la marca. */
:root {
  --bosque: #0E2A1E;
  --bosque-hondo: #0A2117;
  --bosque-claro: #143B2A;
  --tinta: #0B0F12;
  --menta: #3DD68C;
  --menta-12: rgba(61, 214, 140, 0.12);
  --menta-45: rgba(61, 214, 140, 0.45);
  --hueso: #EEF2EC;
  --hueso-70: rgba(238, 242, 236, 0.72);
  --hueso-50: rgba(238, 242, 236, 0.5);
  --hueso-12: rgba(238, 242, 236, 0.12);
  --hueso-06: rgba(238, 242, 236, 0.06);
  --venta: #F87171;
  --aviso: #FBBF24;
  --brasa: #E8703F;

  --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-fragua: "Archivo", "Arial Narrow", Arial, sans-serif;

  --ancho: 1120px;
  --radio: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bosque); color: var(--hueso);
  font-family: var(--f-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; background: var(--menta); color: var(--tinta); padding: 8px 12px; z-index: 20; }

/* franjas a todo el ancho; el contenido con su margen lateral */
.franja { padding-block: 88px; }
.franja.honda { background: var(--bosque-hondo); }
.dentro {
  max-width: var(--ancho); margin: 0 auto; display: grid; gap: 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.cabeza { display: grid; gap: 12px; max-width: 46rem; }
.cabeza h2 { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; }
.cabeza p { color: var(--hueso-70); font-size: 1.1rem; }
.volanta { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--menta); }

/* logos */
.logo { display: inline-flex; align-items: center; gap: 0.3em; line-height: 1; text-decoration: none; }
.logo svg { width: 1.08em; height: 1.08em; color: var(--menta); flex: none; }
.logo b { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.035em; }
.firma { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5em; color: var(--hueso-50); font-size: 0.85rem; }
.firma .lf { display: inline-flex; align-items: center; gap: 0.35em; color: var(--hueso-70); }
.firma .lf b { font-family: var(--f-fragua); font-stretch: 62%; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.firma .lf b span { font-weight: 500; letter-spacing: 0.1em; margin-right: 0.15em; }
.firma .lf svg { width: 1.5em; height: 1.5em; }

/* botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px;
  border-radius: 12px; font: 600 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton.lleno { background: var(--menta); color: var(--tinta); }
.boton.lleno:hover { background: #52E09B; }
.boton.hueco { border-color: var(--hueso-12); color: var(--hueso); background: transparent; }
.boton.hueco:hover { background: var(--hueso-06); }
@media (prefers-reduced-motion: reduce) { .boton, .boton:hover { transition: none; transform: none; } }

/* encabezado */
.arriba { border-bottom: 1px solid var(--hueso-12); }
.arriba .dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 18px; }
.arriba .logo { font-size: 1.6rem; }
.menu { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; font-size: 0.95rem; }
.menu a { color: var(--hueso-70); text-decoration: none; }
.menu a:hover { color: var(--hueso); }
.arriba .boton { min-height: 40px; padding: 8px 14px; font-size: 0.92rem; }

/* portada */
.portada { padding-block: 72px 88px; }
.portada .dentro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.portada-texto { display: grid; gap: 22px; min-width: 0; }
.portada h1 { font-weight: 800; font-size: clamp(2.7rem, 7vw, 5rem); line-height: 0.95; letter-spacing: -0.045em; }
.portada h1 span { color: var(--menta); }
.portada .bajada { color: var(--hueso-70); font-size: 1.18rem; max-width: 34rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada .chico { font-size: 0.9rem; color: var(--hueso-50); max-width: 34rem; }

/* el panel de muestra */
.muestra { display: grid; gap: 12px; min-width: 0; }
.tarjeta { background: var(--tinta); border: 1px solid var(--hueso-12); border-radius: 14px; padding: 16px; display: grid; gap: 4px; min-width: 0; }
.tarjeta-cabeza { display: flex; justify-content: space-between; gap: 10px; padding: 2px 6px 10px; color: var(--hueso-70); font-size: 0.84rem; flex-wrap: wrap; }
.fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 8px; font-size: 0.95rem; }
.fila .n { font-family: var(--f-mono); color: var(--hueso-50); font-size: 0.82rem; }
.fila .p { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.fila.yo { background: var(--menta-12); box-shadow: inset 0 0 0 1px var(--menta-45); }
.fila.yo .quien { color: var(--menta); font-weight: 600; }
.tarjeta-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 6px 2px; font-size: 0.84rem; color: var(--hueso-70); flex-wrap: wrap; }
.vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--menta); }
.vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--menta); animation: latido 2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .vivo i { animation: none; } }
.orden { display: grid; gap: 10px; padding: 14px 16px; }
.orden-arriba { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; flex-wrap: wrap; }
.lado { color: var(--menta); font-weight: 600; }
.orden-monto { font-family: var(--f-mono); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.orden-monto small { color: var(--hueso-50); font-size: 0.85rem; }
.titular { font-size: 0.86rem; color: var(--hueso-70); }
.titular b { color: var(--menta); font-weight: 600; }
.orden-botones { display: flex; gap: 8px; }
.orden-botones span { flex: 1; text-align: center; font-size: 0.86rem; padding: 8px; border-radius: 9px; border: 1px solid var(--hueso-12); }
.orden-botones span.lleno { background: var(--menta); color: var(--tinta); border-color: var(--menta); font-weight: 600; }

/* qué hace */
.funciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.funcion { background: var(--bosque); border: 1px solid var(--hueso-12); border-radius: var(--radio); padding: 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.funcion h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.funcion p { color: var(--hueso-70); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.etiquetas li { font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hueso-12); color: var(--hueso-70); }
.estrella {
  grid-column: 1 / -1; background: var(--bosque); border: 1px solid var(--menta-45); border-radius: 22px; padding: 44px 36px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center;
}
.estrella .texto { display: grid; gap: 16px; min-width: 0; }
.estrella h3 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.estrella p { color: var(--hueso-70); font-size: 1.08rem; }

.billeteras, .numeros { background: var(--tinta); border: 1px solid var(--hueso-12); border-radius: 14px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
.billetera { display: grid; gap: 6px; }
.billetera-arriba { display: flex; justify-content: space-between; gap: 10px; font-size: 0.92rem; flex-wrap: wrap; }
.billetera-arriba b { font-weight: 600; }
.billetera-arriba .mono { color: var(--hueso-70); font-size: 0.84rem; }
.barra { height: 8px; border-radius: 999px; background: var(--hueso-12); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 999px; background: var(--menta); }
.barra i.caliente { background: var(--aviso); }
.turno { font-size: 0.8rem; color: var(--hueso-70); }
.turno.hoy { color: var(--menta); }
.ejemplo { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hueso-50); }
.numeros-cabeza { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; color: var(--hueso-70); }
.grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--hueso-70); }
.grande .mono { font-size: 2.1rem; font-weight: 600; color: var(--menta); letter-spacing: -0.02em; }
.grande small { width: 100%; font-size: 0.84rem; }
.dias { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; height: 64px; }
.dias i { display: block; border-radius: 4px 4px 2px 2px; background: rgba(61, 214, 140, 0.35); }
.dias i.mejor { background: var(--menta); }
.renglones { display: grid; gap: 6px; font-size: 0.92rem; }
.renglones div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hueso-12); padding-top: 6px; }
.renglones span:first-child { color: var(--hueso-70); }
.renglones .sube { color: var(--menta); }

/* cómo se empieza */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; border-top: 2px solid var(--menta); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.pasos li::before { content: counter(paso); font-family: var(--f-mono); color: var(--menta); font-size: 0.9rem; }
.pasos h3 { font-size: 1.3rem; font-weight: 700; }
.pasos p { color: var(--hueso-70); }

/* seguridad */
.seguros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.seguro { border: 1px solid var(--hueso-12); border-radius: var(--radio); padding: 22px 24px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.seguro svg { grid-row: span 2; width: 40px; height: 40px; color: var(--menta); }
.seguro h3 { font-size: 1.15rem; font-weight: 700; }
.seguro p { color: var(--hueso-70); }

/* preguntas */
.preguntas { display: grid; gap: 10px; max-width: 52rem; }
.preguntas details { border: 1px solid var(--hueso-12); border-radius: 14px; background: var(--bosque); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--menta); font-family: var(--f-mono); font-size: 1.2rem; line-height: 1; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding: 0 22px 20px; color: var(--hueso-70); max-width: 44rem; }

/* lista de espera */
.lista .dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 48px; }
.formulario { background: var(--tinta); border: 1px solid var(--hueso-12); border-radius: 20px; padding: 28px; display: grid; gap: 20px; min-width: 0; }
.campo { display: grid; gap: 8px; }
.campo label, .campo legend { font-weight: 600; font-size: 0.95rem; padding: 0; }
.campo small { color: var(--hueso-50); font-weight: 400; }
.campo input[type="email"], .campo input[type="text"] {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hueso-12);
  background: var(--bosque-hondo); color: var(--hueso); font: 1rem var(--f-body);
}
.campo input::placeholder { color: var(--hueso-50); }
.campo input:focus { outline: 2px solid var(--menta); outline-offset: 1px; }
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { position: relative; font-weight: 500; }
.opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opciones span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hueso-12); font-size: 0.92rem; color: var(--hueso-70); }
.opciones input:checked + span { background: var(--menta-12); border-color: var(--menta); color: var(--hueso); }
.opciones input:focus-visible + span { outline: 2px solid var(--menta); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario .boton { width: 100%; font-size: 1.05rem; }
.formulario .boton[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.nota { font-size: 0.85rem; color: var(--hueso-50); }
.estado { font-size: 0.95rem; }
.estado.mal { color: var(--venta); }
.listo { display: grid; gap: 10px; text-align: center; padding: 24px 8px; }
.listo b { font-family: var(--f-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.listo .puesto { color: var(--menta); }
.listo p { color: var(--hueso-70); }

/* pie */
.pie { border-top: 1px solid var(--hueso-12); }
.pie .dentro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; padding-block: 36px 44px; }
.pie-marca { display: grid; gap: 10px; }
.pie-marca .logo { font-size: 1.5rem; }
.pie-datos { display: grid; gap: 6px; font-size: 0.88rem; color: var(--hueso-50); justify-items: end; text-align: right; }
.pie-datos a { color: var(--hueso-70); }

/* páginas de texto (privacidad, gracias) */
.texto-largo { padding-block: 64px 88px; }
.texto-largo .dentro { max-width: 46rem; gap: 20px; }
.texto-largo h1 { font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.2rem); letter-spacing: -0.035em; line-height: 1; }
.texto-largo h2 { font-weight: 700; font-size: 1.3rem; margin-top: 12px; }
.texto-largo p, .texto-largo li { color: var(--hueso-70); }
.texto-largo ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

@media (max-width: 900px) {
  .portada .dentro, .estrella, .lista .dentro { grid-template-columns: minmax(0, 1fr); }
  .funciones, .pasos { grid-template-columns: minmax(0, 1fr); }
  .estrella { padding: 30px 22px; }
}
@media (max-width: 700px) {
  .seguros { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .arriba .boton { margin-left: auto; }
  .franja { padding-block: 64px; }
  .portada { padding-block: 48px 64px; }
  .pie-datos { justify-items: start; text-align: left; }
}

/* guías (generadas por scripts/guias.mjs desde frontend/content/guias) */
.volver { color: var(--hueso-70); text-decoration: none; font-size: 0.92rem; }
.volver:hover { color: var(--hueso); }
.guias-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.guias-lista a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--hueso-12); border-radius: 14px; text-decoration: none; background: var(--bosque-hondo); }
.guias-lista a:hover { border-color: var(--menta-45); }
.guias-lista b { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; color: var(--hueso); }
.guias-lista span { color: var(--hueso-70); font-size: 0.95rem; }
.guia { display: grid; gap: 14px; }
.guia h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; margin-top: 14px; color: var(--hueso); }
.guia h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--hueso); }
.guia p, .guia li { color: var(--hueso-70); }
.guia strong { color: var(--hueso); font-weight: 600; }
.guia ul, .guia ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.guia li > ul, .guia li > ol { margin-top: 6px; }
.guia a { color: var(--hueso); text-underline-offset: 4px; }
.guia a:hover { color: var(--menta); }
.guia code { font-family: var(--f-mono); font-size: 0.88em; background: var(--hueso-06); border-radius: 6px; padding: 1px 6px; color: var(--hueso); }
.guia blockquote { margin: 0; border-left: 2px solid var(--menta-45); padding-left: 14px; font-style: italic; }
.guia-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hueso-12); padding-top: 16px; margin-top: 12px; font-size: 0.92rem; }
.guia-pie a { color: var(--hueso-70); text-decoration: none; }
.guia-pie a:hover { color: var(--hueso); }