/* =====================================================================
   Mil para 1000 — estilos de la página web
   Colores y letra tomados del manual de marca y de la portada del libro.
   Para cambiar un color en toda la página, edítalo solo aquí arriba.
   ===================================================================== */
:root {
  --fondo-portada: #0b1633;   /* fondo de la tapa */
  --celda: #1c2b55;           /* celdas del tablero de la tapa */
  --azul-mil: #2e69ec;        /* Azul Mil */
  --azul-profundo: #173a8c;   /* Azul profundo: números y títulos */
  --naranja: #f28c28;         /* Naranja meta */
  --naranja-osc: #cb7521;
  --paleta-clara: #e6ecfb;    /* mitad inferior de las paletas blancas */
  --fila: #eef2fa;            /* filas claras (como en el clavijero) */
  --gris: #6b7280;
  --gris-claro: #c9d0e0;
  --blanco: #ffffff;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--blanco);
  background: var(--fondo-portada);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.contenedor.angosto { max-width: 820px; }

.naranja { color: var(--naranja); }
.gris { color: var(--gris-claro); }

/* Texto solo para lectores de pantalla */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Rótulos en mayúsculas espaciadas, como en la tapa */
.sobretitulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
}

/* ============================ PORTADA ============================ */
.portada { padding: 28px 0 56px; overflow: hidden; }

.franja-superior {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
.derecha { text-align: right; }

.portada-grilla {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas:
    "titulo imagen"
    "accion imagen"
    "autor  imagen";
  column-gap: 40px;
  align-items: start;
  margin-top: 36px;
}
.portada-titulo { grid-area: titulo; }
.portada-imagen { grid-area: imagen; align-self: center; }
.portada-accion { grid-area: accion; }
.portada-autor { grid-area: autor; }

h1 { margin: 0; font-weight: 500; line-height: 1; }

.mil-para {
  display: block;
  font-size: clamp(56px, 10vw, 112px);
  letter-spacing: -0.02em;
  margin-bottom: 0.18em;
}

/* Las paletas «1000» (tipo marcador de aeropuerto) */
.paletas { display: flex; gap: 3%; max-width: 520px; }
.paleta {
  position: relative;
  flex: 1;
  aspect-ratio: 253 / 348;
  border-radius: 14%/10%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: clamp(64px, 12vw, 132px);
  color: var(--azul-profundo);
  background: linear-gradient(var(--blanco) 50%, var(--paleta-clara) 50%);
}
.paleta::after {             /* la línea del medio */
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3%; transform: translateY(-50%);
  background: #2454bc;
}
.paleta-naranja {
  color: var(--blanco);
  background: linear-gradient(var(--naranja) 50%, var(--naranja-osc) 50%);
}
.paleta-naranja::after { background: #6f4012; }

/* Sello «Edición 100 % gratuita» sobre el título */
.sello-gratis {
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 16px 6px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--blanco);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* Lista con ✓ bajo la bajada */
.gratis {
  list-style: none; padding: 0; margin: -8px 0 26px;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: 15px; font-weight: 500;
}
.gratis li { display: flex; align-items: center; gap: 8px; }
.gratis li::before {
  content: "✓";
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--naranja); color: var(--blanco);
  font-size: 13px; font-weight: 700;
}

/* Recuadro «Gratis. De verdad.» */
.banda-gratis {
  margin: 0 0 56px;
  padding: 22px 24px;
  border-left: 6px solid var(--naranja);
  border-radius: 0 12px 12px 0;
  background: #fff4e8;
}
.banda-gratis p { margin: 0; }
.banda-titulo {
  margin-bottom: 6px !important;
  font-size: 24px; font-weight: 700; color: var(--naranja-osc);
}

.destino-rotulo, .autor-rotulo {
  margin: 36px 0 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--naranja);
}
.destino { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.2; }
.bajada { margin: 10px 0 24px; color: var(--gris-claro); max-width: 30em; }
.autor { margin: 0; font-size: 22px; font-weight: 500; }
.autor-rotulo { margin-top: 32px; }

/* Botón de descarga */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  border-radius: 14px;
  background: var(--naranja);
  color: var(--blanco);
  font-weight: 600; font-size: 19px;
  text-decoration: none;
  box-shadow: 0 8px 0 var(--naranja-osc);
  transition: transform .12s, box-shadow .12s;
}
.boton:hover { transform: translateY(2px); box-shadow: 0 6px 0 var(--naranja-osc); }
.boton:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--naranja-osc); }
.boton:focus-visible { outline: 3px solid var(--blanco); outline-offset: 4px; }

/* Botón + contador de descargas, uno al lado del otro */
.descarga { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.motivacion {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 220px; max-width: 320px;
  font-size: 14px; line-height: 1.45; color: var(--gris-claro);
}
.motivacion p { margin: 0; }
.motivacion strong { color: var(--naranja); font-weight: 600; }
.motivacion .contador:empty { display: none; }
.motivacion .con-texto { display: none; }
.motivacion.con-numero .con-texto { display: inline; }
.motivacion.con-numero .sin-texto { display: none; }
.motivacion.con-numero { color: var(--blanco); font-weight: 500; }
.contador b {              /* el punto de los miles */
  align-self: flex-end; width: 6px; text-align: center;
  font-weight: 700; color: var(--naranja); line-height: 1;
}
.motivacion.clara { margin: 22px auto 0; justify-content: center; max-width: 420px; color: var(--gris); }
.motivacion.clara.con-numero { color: var(--azul-profundo); }
.motivacion.clara .contador i { background: var(--azul-profundo); }
.motivacion.clara .contador i::after { background: var(--blanco); }

.detalle-descarga { margin: 18px 0 0; font-size: 14px; color: var(--gris-claro); }
.detalle-descarga.oscuro { color: var(--gris); }

/* ============================ SECCIONES ============================ */
.seccion { padding: 72px 0; }
.seccion.oscura { background: var(--fondo-portada); border-top: 1px solid var(--celda); }
.seccion.clara { background: var(--blanco); color: #1f2937; }

.titulo-grande {
  margin: 12px 0 24px;
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 700; line-height: 1.12;
}
.liviano { font-weight: 300; color: #dfe4f0; }

.texto { margin: 0 0 18px; }
.oscura .texto { color: #d5dbe8; }

.destacado { color: var(--naranja); font-weight: 600; margin: 0 0 32px; }

/* Cifras con contador de celdas, como en la contraportada */
.cifras { list-style: none; padding: 0; margin: 0 0 56px; display: grid; gap: 18px; }
.cifras li { display: flex; align-items: center; gap: 18px; font-weight: 500; line-height: 1.4; }
.contador { display: flex; gap: 3px; flex-shrink: 0; }
.contador i {
  position: relative;
  width: 26px; height: 32px; border-radius: 4px;
  display: grid; place-items: center;
  font-style: normal; font-weight: 600; font-size: 17px;
  color: var(--naranja);
  background: var(--celda);
}
.contador i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--fondo-portada);
}

.cita { margin: 0; padding-left: 28px; border-left: 6px solid var(--naranja); }
.cita p { margin: 0; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.4; color: #dfe4f0; }
.cita b { color: var(--blanco); font-weight: 600; }
.cita footer { margin-top: 14px; color: var(--naranja); font-weight: 500; }

/* Título como en las páginas interiores: azul con raya naranja */
.titulo-pagina {
  margin: 0 0 24px;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 700; color: var(--azul-profundo); line-height: 1.2;
}
.titulo-pagina::after {
  content: ""; display: block; width: 84px; height: 5px; margin-top: 10px;
  background: var(--naranja);
}

/* Pasos numerados con paleta pequeña */
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 16px 18px 16px 76px;
  background: var(--fila);
  border-radius: 12px;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 18px; top: 16px;
  width: 40px; height: 50px; border-radius: 7px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 24px; color: var(--blanco);
  background: linear-gradient(var(--azul-mil) 50%, #2658c6 50%);
}
.pasos b { color: var(--azul-profundo); display: block; }

.cierre { margin-top: 48px; text-align: center; }

/* ============================ PIE ============================ */
.pie { padding: 56px 0 64px; font-size: 14px; color: var(--gris-claro); }
.pie p { margin: 0 0 14px; }
.pie a { color: var(--naranja); }
.pie-logo { margin-bottom: 22px; }
.aviso { color: #9aa3b8; }
.contacto { margin-top: 24px !important; }

/* ============================ CELULAR ============================ */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .portada { padding-top: 20px; }
  .derecha { text-align: left; }
  .portada-grilla {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "accion" "imagen" "autor";
    margin-top: 24px;
  }
  .sobretitulo { font-size: 12px; }
  .destino-rotulo { margin-top: 28px; }
  .portada-imagen { max-width: 320px; margin: 36px auto 0; }
  .portada-accion, .portada-autor { text-align: center; }
  .autor-rotulo { margin-top: 8px; }
  .bajada { margin-left: auto; margin-right: auto; }
  .sello-gratis { font-size: 12px; margin-bottom: 16px; }
  .gratis { flex-direction: column; align-items: center; }
  .boton { width: 100%; }
  .descarga { flex-direction: column; }
  .motivacion { flex: none; justify-content: center; text-align: center; max-width: 340px; }
  .motivacion.con-numero { text-align: left; }
  .seccion { padding: 56px 0; }
  .cifras li { gap: 14px; }
  .contador i { width: 22px; height: 28px; font-size: 15px; }
  .pasos li { padding-left: 68px; }
  .pasos li::before { left: 14px; width: 38px; height: 46px; font-size: 22px; }
}