/* Fachada de acceso — misma paleta que el libro (preambulo.tex) */
:root{
  --azul:#1F4E79; --verde:#1E6B52; --ocre:#9C6B1E; --vino:#8C2F39;
  --gris:#4A4A4A; --morado:#5B3E85;
  --bg:#FBFAF7; --panel:#FFFFFF; --tinta:#26292E; --tinta2:#5A5E66;
  --linea:#E4E0D6; --suave:#F2EFE7;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171B; --panel:#1D2026; --tinta:#E8E6E0; --tinta2:#A9ADB5;
    --linea:#33373F; --suave:#23262D;
    --azul:#7FA8D0; --verde:#6FB596; --ocre:#CFA05C; --vino:#CC7A85; --morado:#A98FD0;
  }
}
:root[data-theme="dark"]{
  --bg:#15171B; --panel:#1D2026; --tinta:#E8E6E0; --tinta2:#A9ADB5;
  --linea:#33373F; --suave:#23262D;
  --azul:#7FA8D0; --verde:#6FB596; --ocre:#CFA05C; --vino:#CC7A85; --morado:#A98FD0;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--tinta);
  font:16px/1.65 Georgia,'Times New Roman',serif}

.barra{position:sticky; top:0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.6rem 1.2rem;
  background:var(--panel); border-bottom:1px solid var(--linea)}
.marca{font:700 1rem/1 Georgia,serif; color:var(--azul)}
.barra-nav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font:600 .82rem/1 'Segoe UI',system-ui,sans-serif; color:var(--tinta2)}
.barra-nav a{color:var(--tinta2); text-decoration:none}
.barra-nav a:hover{color:var(--azul)}

main{max-width:46rem; margin:0 auto; padding:0 1.3rem}
.hero{padding:2.6rem 0 1.6rem; border-bottom:3px double var(--linea)}
.kicker{font:700 .72rem/1 'Segoe UI',system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ocre); margin:0 0 .8rem}
h1{font:700 2.3rem/1.15 Georgia,serif; color:var(--azul); margin:0 0 .7rem;
  text-wrap:balance}
.bajada{color:var(--tinta2); font-size:1.05rem; margin:0 0 1.6rem; max-width:38rem}

.tag{display:inline-block; font:700 .58rem/1 'Segoe UI',system-ui,sans-serif;
  letter-spacing:.06em; color:#fff; border-radius:3px; padding:.25em .45em;
  vertical-align:.12em; white-space:nowrap}
.tag-ley{background:var(--azul)} .tag-prac{background:var(--verde)}
.tag-crit{background:var(--ocre)}

.caja-estado{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem}
.btn{display:inline-block; font:600 .95rem/1 'Segoe UI',system-ui,sans-serif;
  border:0; border-radius:6px; padding:.75rem 1.2rem; cursor:pointer;
  text-decoration:none}
.btn-primario{background:var(--azul); color:#fff}
.btn-primario:hover{filter:brightness(1.1)}
.btn-secundario{background:transparent; color:var(--azul);
  border:1.5px solid var(--linea)}
.nota-estado{font:.85rem/1.4 'Segoe UI',system-ui,sans-serif; color:var(--tinta2)}
.nota-ok{color:var(--verde); font-weight:600}
.nota-mala{color:var(--vino)}
.letra-chica{font:.8rem/1.5 'Segoe UI',system-ui,sans-serif; color:var(--tinta2);
  margin:.9rem 0 0}

.cifras{display:flex; flex-wrap:wrap; gap:1.6rem; padding:1.4rem 0;
  border-bottom:1px solid var(--linea)}
.cifras div{flex:1 1 8rem}
.cifras b{display:block; font:700 1.6rem/1 Georgia,serif; color:var(--verde);
  font-variant-numeric:tabular-nums}
.cifras span{font:.78rem/1.4 'Segoe UI',system-ui,sans-serif; color:var(--tinta2)}

.bloque{padding:1.8rem 0; border-bottom:1px solid var(--linea)}
h2{font:700 1.35rem/1.3 Georgia,serif; color:var(--azul); margin:0 0 .8rem}
h3{font:700 1rem/1.3 Georgia,serif; margin:0 0 .4rem}
.dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.4rem}
ul,ol{padding-left:1.2rem; margin:.5rem 0}
li{margin:.45rem 0}
li::marker{color:var(--ocre)}
a{color:var(--azul)}
.pasos li{margin:.6rem 0}
.muestra-lista a{text-decoration-thickness:1px; text-underline-offset:2px}

.pie{max-width:46rem; margin:0 auto; padding:1.2rem 1.3rem 2.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font:.78rem/1.6 'Segoe UI',system-ui,sans-serif; color:var(--tinta2)}

@media (max-width:520px){
  h1{font-size:1.75rem}
  main{padding:0 .9rem}
  .btn{width:100%; text-align:center}
}

/* ---------------------------------------------- landing: método y prueba */
.hero h1 em{font-style:italic; color:var(--verde)}
.marcadores{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem;
  margin:1.2rem 0; align-items:baseline}
.marcadores dt{white-space:nowrap}
.marcadores dd{margin:0; font-size:.95rem}
.nota-fragmento{font:.85rem/1.5 'Segoe UI',system-ui,sans-serif; color:var(--tinta2);
  margin-bottom:.5rem}
.fragmento{margin:1rem 0; padding:1rem 1.2rem; background:var(--panel);
  border:1px solid var(--linea); border-left:4px solid var(--azul);
  border-radius:0 5px 5px 0}
.fragmento p{margin:.4rem 0}
.fuente-frag{font:.82rem/1.5 'Segoe UI',system-ui,sans-serif; color:var(--tinta2);
  border-top:1px dotted var(--linea); padding-top:.5rem; margin-top:.7rem !important}
.cita-honestidad{margin:1.4rem 0; padding-left:1.1rem;
  border-left:3px solid var(--ocre); color:var(--tinta)}
.cita-honestidad p{font-style:italic}
.cita-honestidad footer{font:.82rem/1.5 'Segoe UI',system-ui,sans-serif;
  color:var(--tinta2); font-style:normal}

/* ------------------------------------------------------- landing: vigía */
.lista-cambios li{margin:.55rem 0}
.vigia{background:var(--suave); border-radius:6px; padding:1rem 1.2rem; margin:1.3rem 0;
  border-left:4px solid var(--verde)}
.vigia-titulo{font:700 .74rem/1 'Segoe UI',system-ui,sans-serif; letter-spacing:.11em;
  text-transform:uppercase; color:var(--verde); margin:0 0 .5rem}
.vigia p:last-child{margin-bottom:0}
.bitacora{list-style:none; padding:0; margin:.8rem 0}
.bitacora li{display:grid; grid-template-columns:11rem 1fr; gap:.2rem 1rem;
  padding:.7rem 0; border-bottom:1px solid var(--linea); margin:0}
.bitacora li:last-child{border-bottom:0}
.bit-fecha{font:700 .78rem/1.5 'Segoe UI',system-ui,sans-serif; color:var(--ocre);
  font-variant-numeric:tabular-nums}
.bit-texto{font-size:.95rem}

/* ---------------------------------------------- landing: gratis y precio */
.destacado{background:var(--suave); border-radius:8px; padding:1.5rem 1.4rem;
  border:1px solid var(--linea)}
.muestra-lista{list-style:none; padding:0}
.muestra-lista li{padding:.6rem 0; border-bottom:1px solid var(--linea)}
.muestra-lista li:last-child{border-bottom:0}
.muestra-lista a{font-size:1.02rem; text-decoration-thickness:1px;
  text-underline-offset:3px}
.muestra-desc{display:block; font:.85rem/1.5 'Segoe UI',system-ui,sans-serif;
  color:var(--tinta2); margin-top:.15rem}
.precio-caja{display:flex; flex-wrap:wrap; gap:1.2rem; margin:1rem 0 1.2rem}
.precio-linea{flex:1 1 11rem; background:var(--panel); border:1px solid var(--linea);
  border-radius:6px; padding:.9rem 1.1rem}
.precio-monto{display:block; font:700 1.9rem/1 Georgia,serif; color:var(--azul);
  font-variant-numeric:tabular-nums}
.precio-que{display:block; font:.82rem/1.4 'Segoe UI',system-ui,sans-serif;
  color:var(--tinta2); margin-top:.3rem}
.faq{margin:1.4rem 0 0}
.faq dt{font-weight:700; margin-top:.9rem}
.faq dd{margin:.2rem 0 0; color:var(--tinta2); font-size:.95rem}

@media (max-width:520px){
  .bitacora li{grid-template-columns:1fr}
  .marcadores{grid-template-columns:1fr; gap:.2rem}
  .marcadores dd{margin-bottom:.6rem}
}

/* El botón oficial de Google se dibuja solo, con su propio ancho y su propia
   altura. Aquí únicamente se le hace sitio dentro de la fila de botones, y en
   pantalla chica se le deja ocupar el ancho completo como a los demás. */
.btn-google{display:inline-flex; align-items:center; min-height:2.7rem}
.btn-google iframe{margin:0 !important}
@media (max-width:640px){
  .btn-google{width:100%}
}

/* El enlace al índice completo, bajo la muestra gratuita. Va con peso: quien
   duda antes de suscribirse casi nunca duda del precio, duda de si adentro
   está lo que necesita, y el índice es lo que contesta eso. */
.ver-indice{margin:1.4rem 0 0; padding-top:1.2rem;
  border-top:1px solid var(--linea)}
.ver-indice a{font:600 1rem 'Segoe UI',system-ui,sans-serif; color:var(--azul);
  text-decoration:none; border-bottom:2px solid var(--azul); padding-bottom:1px}
.ver-indice a:hover{background:var(--suave)}
.ver-indice span{display:block; margin-top:.4rem;
  font:.88rem/1.6 'Segoe UI',system-ui,sans-serif; color:var(--tinta2)}