/* ═══════════════════════════════════════════════════════════════════════
   PORTADA — Unidad Educativa PCEI Albert Einstein
   Carril del ADULTO que vuelve a estudiar.

   Decisión de diseño: editorial, una sola columna, medida corta de lectura.
   Se lee como una carta, no como un folleto. El serif de la casa (Playfair)
   lleva los titulares; el amarillo aparece poco y solo donde hay que mirar.
   Mucho aire: el lector tiene 40 años, lee desde el bus y no quiere una
   cuadrícula de tarjetas compitiendo por su atención.
   ═══════════════════════════════════════════════════════════════════════ */

.ae-contenedor {
  max-width: 660px;            /* medida corta: ~70 caracteres */
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Sobre el pliegue ─────────────────────────────────────────────── */
.ae-hero {
  padding: 120px 0 56px;
  background: var(--white, #fff);
}

.ae-kicker {
  margin: 0 0 18px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray, #666);
}

.ae-hero h1 {
  margin: 0 0 20px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--dark, #1a1a1a);
}

.ae-sub {
  margin: 0 0 26px;
  font-size: 1.12rem;
  line-height: 1.6;
  color: #3a3a3a;
}

.ae-prueba {
  display: inline-block;
  margin: 0 0 30px;
  padding: 7px 14px;
  background: var(--yellow, #f9d829);
  border-radius: 4px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--dark, #1a1a1a);
}

.ae-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 34px;
  background: var(--dark, #1a1a1a);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: transform .18s ease;
}

.ae-cta:hover { transform: translateY(-2px); }
.ae-cta:focus-visible { outline: 3px solid var(--yellow, #f9d829); outline-offset: 3px; }

.ae-micro {
  margin: 14px 0 0;
  font-size: .92rem;
  color: var(--gray, #666);
}

.ae-enlace {
  display: inline-block;
  margin-top: 18px;
  color: var(--dark, #1a1a1a);
  font-size: .95rem;
  text-underline-offset: 4px;
}

/* ─── Franja de fecha ──────────────────────────────────────────────── */
.ae-franja {
  padding: 16px 0;
  background: var(--dark, #1a1a1a);
  color: #fff;
}

.ae-franja p {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: .95rem;
  line-height: 1.55;
}

/* ─── Las tres respuestas: apiladas, con regla divisoria ───────────── */
.ae-respuestas { padding: 56px 0; }

.ae-respuesta { padding: 30px 0; border-top: 1px solid #e8e6e0; }
.ae-respuesta:first-child { border-top: 0; padding-top: 0; }

.ae-respuesta h2 {
  margin: 0 0 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--dark, #1a1a1a);
}

.ae-respuesta p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: #3a3a3a; }

.ae-titulo-seccion {
  margin: 0 0 30px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.2;
  color: var(--dark, #1a1a1a);
}

/* ─── Situaciones: bloques con barra amarilla ──────────────────────── */
.ae-situaciones { padding: 56px 0; background: #faf9f6; }

.ae-situacion {
  margin-bottom: 26px;
  padding-left: 20px;
  border-left: 4px solid var(--yellow, #f9d829);
}

.ae-situacion h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--dark, #1a1a1a); }
.ae-situacion p { margin: 0 0 10px; font-size: 1rem; line-height: 1.65; color: #3a3a3a; }
.ae-situacion a { font-size: .95rem; font-weight: 600; color: var(--dark, #1a1a1a); }

/* ─── Aula virtual ─────────────────────────────────────────────────── */
.ae-aula { padding: 56px 0; }
.ae-aula h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.2;
}
.ae-aula > .ae-contenedor > p { font-size: 1.02rem; line-height: 1.7; color: #3a3a3a; }

.ae-lista { margin: 22px 0 0; padding: 0; list-style: none; }
.ae-lista li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 30px;
  font-size: 1rem;
  line-height: 1.6;
}
.ae-lista li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--dark, #1a1a1a);
  font-weight: 700;
}

/* ─── Pasos: lista numerada editorial ──────────────────────────────── */
.ae-pasos { padding: 56px 0; background: #faf9f6; }
.ae-ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.ae-ol li {
  counter-increment: paso;
  position: relative;
  margin-bottom: 26px;
  padding-left: 52px;
}
.ae-ol li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--yellow, #f9d829);
  border-radius: 50%;
  font-weight: 700;
  font-size: .95rem;
}
.ae-ol strong { display: block; margin-bottom: 5px; font-size: 1.05rem; }
.ae-ol span { display: block; font-size: 1rem; line-height: 1.65; color: #3a3a3a; }

/* ─── Credenciales, con el retrato de la Rectora ───────────────────── */
.ae-credenciales { padding: 56px 0; }
.ae-credenciales .ae-contenedor { display: grid; gap: 28px; }

.ae-rectora { margin: 0; }
.ae-rectora img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--yellow, #f9d829);
}

.ae-credenciales h2 {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.2;
}
.ae-credenciales p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.7; color: #3a3a3a; }
.ae-comprobar {
  padding: 16px 18px;
  background: #faf9f6;
  border-left: 4px solid var(--dark, #1a1a1a);
  font-size: .97rem;
}

/* ─── Preguntas ────────────────────────────────────────────────────── */
.ae-preguntas { padding: 56px 0; background: #faf9f6; }
.ae-pregunta { margin-bottom: 26px; }
.ae-pregunta h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--dark, #1a1a1a); }
.ae-pregunta p { margin: 0; font-size: 1rem; line-height: 1.68; color: #3a3a3a; }

/* ─── Cierre ───────────────────────────────────────────────────────── */
.ae-cierre { padding: 64px 0 76px; background: var(--dark, #1a1a1a); color: #fff; }
.ae-cierre h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.2;
}
.ae-cierre p { margin: 0 0 26px; font-size: 1.02rem; line-height: 1.7; color: #d8d8d8; }
.ae-cierre .ae-cta { background: var(--yellow, #f9d829); color: var(--dark, #1a1a1a); }

/* ─── Marcadores pendientes ────────────────────────────────────────── */
.pendiente {
  background: #ffe8a3;
  color: #6b4e00;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (min-width: 720px) {
  .ae-credenciales .ae-contenedor {
    grid-template-columns: 150px 1fr;
    align-items: start;
    gap: 36px;
  }
}