@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
/* Una columna angosta para leer en el celular; cada paso es una tarjeta con su pantalla de ejemplo. */
:root {
  --marino: #11233f;
  --verde: #217609;
  --verde-suave: #e6f1df;
  --fondo: #f3f7f1;
  --papel: #ffffff;
  --texto: #11233f;
  --gris: #55637a;
  --linea: #dbe3dd;
  --aviso: #fff4d6;
  --aviso-borde: #e4b43c;
  --wa-fondo: #efeae2;
  --wa-burbuja: #d9fdd3;
  --titulos: 'Poppins', system-ui, sans-serif;
  --cuerpo: 'Inter', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marino: #dfe8f5; --verde: #7fcf5a; --verde-suave: #1d3519; --fondo: #0f1a14; --papel: #16241c;
    --texto: #e8efe9; --gris: #a3b1a8; --linea: #2b3b31; --aviso: #3a2f12; --aviso-borde: #b88a1f;
    --wa-fondo: #1b2620; --wa-burbuja: #12452a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --marino: #dfe8f5; --verde: #7fcf5a; --verde-suave: #1d3519; --fondo: #0f1a14; --papel: #16241c;
  --texto: #e8efe9; --gris: #a3b1a8; --linea: #2b3b31; --aviso: #3a2f12; --aviso-borde: #b88a1f;
  --wa-fondo: #1b2620; --wa-burbuja: #12452a; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--cuerpo);
}
.pagina {
  max-width: 40rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 1.5rem 3rem;
  display: grid;
  gap: 1.5rem;
}
.pagina > *, .paso > *, .caja > *, .pantalla > *, .tarjeta-grupo > * { min-width: 0; }
h1, h2, h3 { font-family: var(--titulos); color: var(--marino); text-wrap: balance; margin: 0; line-height: 1.2; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
strong { color: var(--marino); }
a { color: var(--verde); font-weight: 600; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }

.portada { display: grid; gap: .9rem; }
.logo { display: inline-block; justify-self: start; padding: .5rem .8rem; border-radius: .6rem; background: #fff; }
.logo img { display: block; width: 11rem; height: auto; }
.bajada { font-size: 1.15rem; color: var(--gris); }

.caja { display: grid; gap: .75rem; padding: 1.1rem; border-radius: .8rem; background: var(--papel); border: 1px solid var(--linea); }
.lista-check { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.lista-check li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; }
.lista-check li::before { content: "✓"; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--verde-suave); color: var(--verde); font-weight: 700; }
.precio { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; padding: .8rem 1rem; border-radius: .6rem; background: var(--verde-suave); }
.precio b { font-family: var(--titulos); font-size: 1.3rem; color: var(--verde); }

.indice { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; counter-reset: indice; }
.indice li { counter-increment: indice; }
.indice a { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: center; min-height: 2.75rem; padding: .35rem .6rem; border-radius: .5rem; color: var(--texto); text-decoration: none; font-weight: 500; }
.indice a::before { content: counter(indice); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--marino); color: var(--papel); font: 700 .95rem/1 var(--titulos); }
.indice a:hover { background: var(--verde-suave); }

.paso { display: grid; gap: 1rem; padding: 1.25rem 1.1rem; border-radius: .9rem; background: var(--papel); border: 1px solid var(--linea); scroll-margin-top: 1rem; }
.paso-cabecera { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }
.numero { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--verde); color: #fff; font: 700 1.2rem/1 var(--titulos); }
.paso-cabecera p { color: var(--gris); font-size: .95rem; }

.pasitos { margin: 0; padding-left: 1.4rem; display: grid; gap: .65rem; }
.pasitos li::marker { font-weight: 700; color: var(--verde); }

.ojo { display: grid; gap: .3rem; padding: .85rem 1rem; border-radius: .6rem; background: var(--aviso); border-left: 4px solid var(--aviso-borde); }
.ojo b { color: var(--texto); }
.consejo { padding: .85rem 1rem; border-radius: .6rem; background: var(--verde-suave); }

/* Pantallas de ejemplo: imitan lo que verán en el celular */
.pantalla { display: grid; gap: .7rem; padding: 1rem; border: 2px solid var(--marino); border-radius: 1.2rem; background: var(--fondo); max-width: 22rem; width: 100%; justify-self: center; }
.pantalla-titulo { font: 700 .75rem/1 var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); text-align: center; }
.campo { display: grid; gap: .25rem; }
.campo span { font-weight: 600; font-size: .9rem; color: var(--marino); }
.campo i { display: block; min-height: 2.5rem; padding: .45rem .65rem; border: 1.5px solid var(--gris); border-radius: .4rem; background: var(--papel); font-style: normal; font-size: .95rem; color: var(--texto); overflow-wrap: anywhere; }
.campo i.vacio { color: var(--gris); }
.marca { display: flex; gap: .5rem; align-items: center; font-size: .9rem; }
.marca::before { content: "✓"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: .25rem; background: var(--verde); color: #fff; font-size: .8rem; font-weight: 700; }
.marca.sin::before { content: ""; background: var(--papel); border: 1.5px solid var(--gris); }
.btn { display: grid; place-items: center; min-height: 2.75rem; padding: .4rem .8rem; border-radius: .5rem; background: var(--marino); color: var(--papel); font-weight: 700; font-size: .95rem; text-align: center; }
.btn.verde { background: var(--verde); color: #fff; }
.btn.linea { background: transparent; color: var(--verde); border: 1.5px dashed var(--gris); }
.flecha { color: var(--verde); font-weight: 700; }
.tarjeta-grupo { display: grid; gap: .5rem; padding: .7rem; border-radius: .5rem; border: 1px solid var(--linea); background: var(--papel); }
.tarjeta-grupo > b { font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .35rem .7rem; border: 1.5px solid var(--gris); border-radius: .45rem; font-weight: 600; font-size: .9rem; background: var(--papel); }
.chip.si { background: var(--verde); border-color: var(--verde); color: #fff; }
.chip.agotado { text-decoration: line-through; opacity: .55; }

.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .55rem .5rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
th { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
td code, .codigo { font: 600 .95rem/1.4 ui-monospace, Consolas, monospace; color: var(--marino); background: var(--fondo); padding: .1rem .3rem; border-radius: .25rem; overflow-wrap: anywhere; }

.whatsapp { display: grid; gap: .5rem; padding: 1rem; border-radius: 1rem; background: var(--wa-fondo); max-width: 22rem; width: 100%; justify-self: center; }
.burbuja { padding: .7rem .85rem; border-radius: .7rem .7rem .7rem .2rem; background: var(--wa-burbuja); font-size: .92rem; line-height: 1.5; white-space: pre-line; color: var(--texto); }

.copiar { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
.copiar input { min-width: 0; width: 100%; min-height: 2.9rem; padding: .5rem .7rem; border: 1.5px solid var(--gris); border-radius: .45rem; background: var(--papel); color: var(--texto); font: 500 .95rem/1.3 var(--cuerpo); }
.copiar button { min-height: 2.9rem; padding: 0 1rem; border: 0; border-radius: .45rem; background: var(--verde); color: #fff; font: 700 .95rem/1 var(--cuerpo); cursor: pointer; }

details { border: 1px solid var(--linea); border-radius: .6rem; background: var(--papel); }
summary { padding: .85rem 1rem; font-weight: 600; cursor: pointer; color: var(--marino); }
details > div { padding: 0 1rem 1rem; display: grid; gap: .6rem; }

.pie { text-align: center; color: var(--gris); font-size: .9rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }