/* ════════════════════════════════════════════════════════════════════
   WEBLYM · LAS PÁGINAS DE TEXTO DE LA PORTADA                   (26/10)

   Guía, qué es, cómo funciona, seguridad, precios, diario,
   nosotros y la lista de espera. Pedidas para que el buscador enseñe
   varios enlaces debajo de Weblym, como una web grande: cada una explica
   UNA cosa y tiene su propia dirección.

   No se inventa nada nuevo: es la composición de «Contáctanos»
   (contacto.css) y de las preguntas frecuentes —el titular a la izquierda
   y, desde el 44,2 % del ancho, el contenido—, con la barra y el pie de la
   portada (landing.css, pie.css). Las medidas van en unidades de la
   portada (--u, 1088 de ancho) y en móvil en píxeles, como en ia.css.
   ════════════════════════════════════════════════════════════════════ */

.hoja {
  --u: calc(min(100vw, 1920px) / 1088);
  --linea: #e6e6e6;
  --gris: #6b6b6b;
  --fondo-suave: #f6f6f6;
  display: grid;
  grid-template-columns: 44.2% 1fr;
  align-items: start;
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(56 * var(--u)) calc(43 * var(--u)) calc(120 * var(--u)) 0;
  box-sizing: border-box;
}

/* ── LA COLUMNA DE LA IZQUIERDA: el titular y el índice, que se quedan
   a la vista mientras se lee. ── */
.hoja__cabeza {
  position: sticky;
  /* Por debajo de la barra, que también se queda arriba. */
  top: 96px;
  padding-left: calc(46 * var(--u));
  padding-right: calc(40 * var(--u));
}

.hoja__miga {
  margin: 0 0 calc(14 * var(--u));
  font-size: max(13px, calc(14 * var(--u)));
  color: var(--gris);
}

.hoja__miga a {
  color: inherit;
  text-decoration: none;
}

.hoja__miga a:hover {
  color: var(--tinta);
  text-decoration: underline;
}

.hoja__titulo {
  margin: 0;
  font-size: max(28px, calc(43 * var(--u)));
  font-weight: 400;
  line-height: 1.11;
}

.hoja__lema {
  margin: calc(18 * var(--u)) 0 0;
  max-width: calc(380 * var(--u));
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.35;
  color: var(--tinta-suave);
}

.hoja__indice {
  margin: calc(36 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  font-size: max(14px, calc(15 * var(--u)));
}

.hoja__indice li {
  margin: 0 0 calc(8 * var(--u));
}

.hoja__indice a {
  color: var(--gris);
  text-decoration: none;
}

.hoja__indice a:hover {
  color: var(--tinta);
}

/* ── EL CUERPO ── */
.hoja__cuerpo {
  max-width: calc(600 * var(--u));
  font-size: max(16px, calc(17 * var(--u)));
  line-height: 1.6;
}

.hoja__cuerpo > :first-child {
  margin-top: 0;
}

.hoja__cuerpo h2 {
  margin: calc(56 * var(--u)) 0 calc(14 * var(--u));
  scroll-margin-top: 24px;
  font-size: max(21px, calc(26 * var(--u)));
  font-weight: 500;
  line-height: 1.2;
}

.hoja__cuerpo h3 {
  margin: calc(28 * var(--u)) 0 calc(6 * var(--u));
  font-size: max(17px, calc(18 * var(--u)));
  font-weight: 600;
  line-height: 1.3;
}

.hoja__cuerpo p,
.hoja__cuerpo ul,
.hoja__cuerpo ol {
  margin: 0 0 calc(16 * var(--u));
}

.hoja__cuerpo ul,
.hoja__cuerpo ol {
  padding-left: 1.3em;
}

.hoja__cuerpo li {
  margin-bottom: 0.4em;
}

.hoja__cuerpo a {
  color: var(--tinta);
  text-underline-offset: 0.15em;
}

.hoja__cuerpo strong {
  font-weight: 600;
}

.hoja__fecha {
  color: var(--gris);
  font-size: max(14px, calc(15 * var(--u)));
}

/* Una nota que tiene que verse: lo que todavía no está. */
.hoja__nota {
  margin: 0 0 calc(24 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border-radius: 12px;
  background: var(--fondo-suave);
  font-size: max(15px, calc(16 * var(--u)));
}

/* ── LAS LLAMADAS DEL FINAL: los botones de la portada. ── */
.hoja__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: calc(40 * var(--u));
}

.hoja__acciones .boton {
  width: auto;
  padding-left: 18px;
  padding-right: 18px;
  text-decoration: none;
}

/* ── LA GUÍA: pasos numerados. ── */
.hoja__cuerpo .pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.paso {
  counter-increment: paso;
  margin: 0 0 calc(56 * var(--u));
}

.paso h2 {
  margin-top: 0;
}

.paso h2::before {
  content: counter(paso);
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  font-size: 0.8em;
  vertical-align: 0.1em;
}


/* ── PRECIOS: dos tarjetas lado a lado. ── */
.planes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 calc(24 * var(--u));
}

.plan {
  padding: calc(24 * var(--u));
  border: 1px solid var(--linea);
  border-radius: 16px;
}

.plan--destacado {
  border-color: var(--tinta);
}

.plan__nombre {
  margin: 0 0 4px;
  font-size: max(18px, calc(20 * var(--u)));
  font-weight: 600;
}

.plan__precio {
  margin: 0 0 14px;
  font-size: max(15px, calc(16 * var(--u)));
  color: var(--gris);
}

.plan ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.95em;
}

/* ── EL DIARIO: una línea de tiempo. ── */
.hoja__cuerpo .diario {
  margin: 0;
  padding: 0;
  list-style: none;
}

.diario__entrada {
  position: relative;
  margin: 0;
  padding: 0 0 calc(32 * var(--u)) 26px;
  border-left: 1px solid var(--linea);
}

.diario__entrada::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tinta);
}

.diario__entrada:last-child {
  border-left-color: transparent;
}

.diario__entrada time {
  display: block;
  font-size: max(13px, calc(14 * var(--u)));
  color: var(--gris);
}

.diario__entrada h2 {
  margin: 2px 0 6px;
  font-size: max(18px, calc(20 * var(--u)));
}

.diario__entrada p {
  margin: 0;
}

/* ── LA LISTA DE ESPERA: el formulario de «Contáctanos» (contacto.css)
   en su columna, sin la composición de dos columnas de allí. ── */
.hoja .contacto__formulario,
.hoja .contacto__hecho {
  grid-column: auto;
  max-width: none;
}

/* ── MÓVIL ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hoja {
    display: block;
    padding: 28px 20px 72px;
  }

  .hoja__cabeza {
    position: static;
    padding: 0;
  }

  .hoja__lema {
    max-width: none;
  }

  /* El índice estorba en móvil: el texto ya va justo debajo. */
  .hoja__indice {
    display: none;
  }

  .hoja__cuerpo {
    max-width: none;
    margin-top: 32px;
  }

  .hoja__cuerpo h2 {
    margin-top: 40px;
  }

  .planes {
    grid-template-columns: 1fr;
  }

  /* La portada esconde el botón oscuro en móvil y le da al claro un ancho
     fijo: es para la barra. Aquí son las llamadas del final y van las dos. */
  .hoja__acciones .boton--oscuro {
    display: inline-flex;
  }

  .plan {
    padding: 20px;
  }
}