/* ============================================================
   Mayores sin miedo · Hoja de estilos de marca
   Usar en TODAS las páginas de la web (y como referencia
   para portadas y libros). No cambiar colores ni tipos sueltos:
   cambiar aquí y se cambia en todo.
   ============================================================ */

/* Fuentes alojadas aquí (no en Google): ningún dato del visitante sale de la web. */
@font-face { font-family: 'Domine'; font-weight: 700; font-display: swap; src: url(fonts/domine-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/nunito-sans.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Colores de marca */
  --azul-noche:   #1F2A44;  /* principal: títulos, fondos oscuros */
  --azul-medio:   #2E3B5C;  /* fondos de apoyo sobre azul */
  --crema:        #FAF7F2;  /* fondo claro principal */
  --arena:        #F1ECE3;  /* fondo claro alternativo */
  --naranja:      #B5541F;  /* acento sobre fondo claro (texto y botones) */
  --naranja-claro:#F2A65A;  /* acento sobre fondo oscuro */
  --texto:        #1F2A44;
  --texto-suave:  #4A5568;
  --texto-claro:  #C9D1E0;  /* texto secundario sobre azul */
  --linea:        #E6DED2;

  /* Tipografía */
  --fuente-titulos: 'Domine', Georgia, serif;
  --fuente-texto:   'Nunito Sans', Arial, sans-serif;

  /* Escala (grande a propósito: público mayor) */
  --t-base: 1.25rem;   /* 20px */
  --t-pequeno: 1.125rem;
  --t-h3: 1.6rem;
  --t-h2: clamp(2rem, 4vw, 2.75rem);
  --t-h1: clamp(2.5rem, 6vw, 4.25rem);

  --radio: 16px;
  --ancho: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { margin: 0 0 1em; }

a { color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, .boton:focus-visible { outline: 4px solid var(--naranja-claro); outline-offset: 3px; }

.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }

.antetitulo {
  font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  font-size: var(--t-pequeno); color: var(--naranja); margin-bottom: .75rem;
}
.oscuro .antetitulo { color: var(--naranja-claro); }

.oscuro { background: var(--azul-noche); color: var(--crema); }
.oscuro p { color: var(--texto-claro); }

.boton {
  display: inline-block; background: var(--naranja); color: #FFF8F0;
  font-weight: 700; font-size: var(--t-base); text-decoration: none;
  padding: .9em 1.6em; border-radius: 999px; min-height: 48px;
}
.boton:hover { background: #9A4518; }
button.boton { border: 0; cursor: pointer; font-family: inherit; }

/* Formularios: campos grandes y fáciles de tocar */
.formulario { display: grid; gap: 1rem; max-width: 32rem; margin-inline: auto; text-align: left; }
.formulario label { font-weight: 700; }
.formulario input[type="email"], .formulario input[type="text"] {
  font: inherit; width: 100%; min-height: 56px; padding: .7em 1em;
  border: 2px solid var(--linea); border-radius: 12px; background: #FFFFFF; color: var(--texto);
}
.formulario input:focus-visible, button.boton:focus-visible { outline: 4px solid var(--naranja-claro); outline-offset: 3px; }
.formulario .casilla { display: flex; gap: .8rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.formulario .casilla input { flex: none; width: 28px; height: 28px; margin: .15em 0 0; accent-color: var(--naranja); }
.formulario .boton { justify-self: start; }
.oscuro .formulario label, .oscuro .formulario .casilla span { color: var(--crema); }
.oscuro .formulario a { color: var(--naranja-claro); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tarjeta {
  background: #FFFFFF; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.75rem;
}

/* Logotipo (texto) */
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.logo svg { width: 44px; height: 44px; flex: none; }
.logo span { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.4rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Páginas de texto (aviso legal, privacidad…) */
.cabecera-simple { padding: 1.25rem 0; }
.texto-legal { max-width: 46rem; padding: clamp(2.5rem, 6vw, 4rem) 0 4rem; }
.texto-legal h1 { font-size: var(--t-h2); }
.texto-legal h2 { font-size: var(--t-h3); margin-top: 2.5rem; }
.texto-legal p, .texto-legal li { line-height: 1.6; }
.texto-legal li + li { margin-top: .5rem; }
.texto-legal .actualizado { color: var(--texto-suave); }
.texto-legal .resumen { background: var(--arena); border-radius: var(--radio); padding: 1.5rem 1.75rem; }
.texto-legal .resumen p:last-child, .texto-legal .resumen ul { margin-bottom: 0; }
.texto-legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; }
.texto-legal dt { font-weight: 700; }
.texto-legal dd { margin: 0; }
@media (max-width: 520px) { .texto-legal dl { grid-template-columns: 1fr; } .texto-legal dd { margin-bottom: .75rem; } }

.pie { padding: 2rem 0; border-top: 1px solid var(--azul-medio); }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.pie p { margin: 0; }
.pie a { color: var(--naranja-claro); }
.pie nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Enlace para saltar al contenido (teclado y lectores de pantalla) */
.saltar { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--crema); color: var(--azul-noche);
          font-weight: 700; padding: .8em 1.2em; border-radius: 12px; }
.saltar:focus { top: 1rem; }

/* Preguntas frecuentes (sin JavaScript: <details>) */
.preguntas { max-width: 46rem; margin-top: 2rem; }
.preguntas details { background: #FFFFFF; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 1rem; }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                     padding: 1.25rem 1.5rem; min-height: 56px; font-weight: 700; font-size: 1.3rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
                            border-radius: 50%; background: var(--arena); color: var(--naranja); font-size: 1.6rem; line-height: 1; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas summary:focus-visible { outline: 4px solid var(--naranja); outline-offset: 2px; border-radius: var(--radio); }
.preguntas details p { margin: 0; padding: 0 1.5rem 1.5rem; color: var(--texto-suave); line-height: 1.6; }

/* Botón de WhatsApp (enlace normal: sin código ni cookies de WhatsApp) */
.boton-whatsapp { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .8em 1.4em; border-radius: 999px;
                  border: 2px solid var(--naranja-claro); color: var(--crema); font-weight: 700; text-decoration: none; }
.boton-whatsapp:hover { background: rgba(242,166,90,.15); }
.boton-whatsapp svg { width: 1.4em; height: 1.4em; flex: none; }

/* Secciones comunes */
.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.estanteria { background: var(--arena); }
.estanteria .antetitulo { color: #9A4518; } /* naranja oscuro del botón: contraste 4.5+ sobre arena */

/* ============================================================
   Páginas de libro (/estafas, /whatsapp, /android…)
   Cada página define su acento con --acento (ver SAGA.md).
   ============================================================ */
.cabecera-libro { padding: 1.25rem 0; }
.cabecera-libro .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cabecera-libro .volver { color: var(--crema); font-weight: 700; display: inline-flex; align-items: center; min-height: 48px; }

.ficha-libro { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.ficha-libro .contenedor { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ficha-libro .antetitulo { color: var(--acento, var(--naranja-claro)); }
.ficha-libro h1 { color: var(--crema); margin-bottom: .4em; }
.ficha-libro .subtitulo { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--crema); line-height: 1.4; margin: 0 0 1.25rem; }
.ficha-libro .para-quien { margin: 0 0 1.75rem; }
.ficha-libro .portada-libro picture img { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto;
  border-radius: 6px; box-shadow: 0 30px 50px rgba(0,0,0,.4); }

.estado { display: inline-block; font-weight: 700; font-size: var(--t-pequeno); padding: .35em 1em; border-radius: 999px;
  color: var(--azul-noche); background: var(--acento, var(--naranja-claro)); margin-bottom: 1.25rem; }

.ventajas { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; }
.ventajas li { display: flex; gap: .7rem; align-items: flex-start; color: var(--crema); font-weight: 600; }
.ventajas svg { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .1rem; color: var(--acento, var(--naranja-claro)); }

/* Tapa dibujada (libros sin portada todavía) */
.tapa-grande { aspect-ratio: 3 / 4; max-width: 340px; margin-inline: auto; border-radius: 6px 14px 14px 6px; padding: 2rem 1.75rem 1.5rem 2.2rem;
  background: linear-gradient(135deg, #263355, var(--azul-noche)); color: var(--crema); display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 8px 0 0 rgba(255,255,255,.08), inset 12px 0 0 rgba(0,0,0,.25), 0 30px 50px rgba(0,0,0,.4); }
.tapa-grande .num { font-weight: 700; letter-spacing: .1em; color: var(--acento); }
.tapa-grande .raya { height: 6px; width: 40%; border-radius: 3px; background: var(--acento); margin: 1rem 0; }
.tapa-grande .tit { font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.12; }
.tapa-grande .marca { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--texto-claro); }

/* Índice de capítulos */
.capitulos { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; counter-reset: cap; }
.capitulos li { counter-increment: cap; display: flex; gap: 1rem; align-items: flex-start; background: #FFFFFF;
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem 1.4rem; }
.capitulos li::before { content: counter(cap); flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--azul-noche); color: var(--crema); font-weight: 700; }
.capitulos strong { display: block; font-family: var(--fuente-titulos); font-size: 1.3rem; line-height: 1.25; margin-bottom: .25rem; }
.capitulos span { color: var(--texto-suave); }

/* Novedades */
.novedades > * { max-width: 46rem; }
.novedades .revision { color: var(--texto-suave); font-weight: 600; }
.entrada { background: #FFFFFF; border: 1px solid var(--linea); border-left: 6px solid var(--naranja); border-radius: var(--radio); padding: 1.5rem 1.75rem; margin-top: 1.25rem; }
.entrada h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.entrada p { margin: 0 0 1rem; line-height: 1.6; }
.firma-tomas { display: flex; align-items: center; gap: .8rem; font-weight: 700; margin: 0; }
.firma-tomas img { width: 56px; height: 56px; border-radius: 50%; flex: none; }

/* Descargas */
.descargas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.descarga { display: flex; gap: 1.1rem; align-items: center; min-height: 96px; padding: 1.4rem 1.6rem; border-radius: var(--radio);
  background: var(--azul-noche); color: var(--crema); text-decoration: none; font-weight: 700; font-size: 1.3rem; line-height: 1.3; }
.descarga:hover { background: var(--azul-medio); }
.descarga:focus-visible { outline: 4px solid var(--naranja); outline-offset: 3px; }
.descarga small { display: block; font-weight: 400; font-size: var(--t-pequeno); color: var(--texto-claro); margin-top: .2rem; }
.descarga svg { flex: none; width: 2.6rem; height: 2.6rem; color: var(--naranja-claro); }

/* Otros libros de la serie */
.otros-libros { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.otros-libros a { display: block; height: 100%; padding: 1.2rem 1.3rem; border-radius: var(--radio); background: var(--azul-medio); color: var(--crema);
  text-decoration: none; border-top: 6px solid var(--acento); min-height: 48px; }
.otros-libros a:hover { background: #38466B; }
.otros-libros .num { display: block; font-weight: 700; font-size: var(--t-pequeno); letter-spacing: .08em; color: var(--acento); }
.otros-libros .tit { display: block; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: .3rem 0; }
.otros-libros .est { display: block; font-size: var(--t-pequeno); color: var(--texto-claro); }

@media (max-width: 900px) {
  .ficha-libro .contenedor { grid-template-columns: 1fr; }
  .ficha-libro .portada-libro picture img, .tapa-grande { max-width: 260px; }
  .capitulos, .descargas { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ventajas { grid-template-columns: 1fr; } }
.tapa-grande .marca img { width: 28px; height: 28px; }