/* /aprende/aprende.css -- landing de alta conversión del ebook gratuito
   "Está Bien Empezar Desde Cero". Identidad visual tomada de la portada real
   del libro (amarillo #FDEB03, negro, acentos rojos) con un tratamiento
   visual limpio: fondo blanco predominante, tarjetas con esquinas
   redondeadas y sombras suaves (nada de bordes gruesos ni sombras duras
   tipo "sticker"). El header comparte el fondo amarillo del hero. Página
   sin footer -- funnel enfocado, todo empuja al formulario del final. */

:root {
  --eb-yellow: #FDEB03;
  --eb-yellow-dark: #E0D000;
  --eb-black: #141110;
  --eb-cream: #ffffff;
  --eb-radius: 16px;
  --eb-radius-sm: 8px;
  --eb-shadow: 0 18px 40px rgba(20, 17, 16, 0.12);
  --eb-shadow-sm: 0 10px 24px rgba(20, 17, 16, 0.08);
  --eb-shadow-dark: 0 20px 45px rgba(0, 0, 0, 0.45);
}

body { background: #fff; }

/* El header vive dentro de la misma banda amarilla del hero -- ya no tiene
   fondo ni ancho propios, hereda el max-width del band-inner que lo envuelve. */
.aprende-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
}
.aprende-logo img { display: block; }
.aprende-header-cta { font-size: 14px; padding: 10px 18px; }

.aprende-main {
  overflow-x: clip;
  background: #fff;
}

/* El footer sitewide trae margin-top:48px (pensado para cuando lo precede
   contenido con fondo blanco) -- eso deja una franja blanca visible entre
   la última banda de /aprende/gracias (amarilla) y el footer negro. */
.aprende-main + .site-footer {
  margin-top: 0;
}

/* Botones de este landing -- usan las mismas clases y el mismo estilo
   (pastilla, sombra suave) que el resto del sitio; no se sobre-escriben. */

/* ---- Bandas a todo lo ancho -------------------------------------------- */
/* body/html en style.css ya son width:100% sin padding propio, así que las
   bandas llegan solas al borde real del viewport con un simple width:100%.
   Antes usábamos el truco de margin/padding con calc(50vw - 50%), pero en
   móvil (Safari/Chrome) 100vw no siempre coincide con el ancho visible real
   -- eso desalineaba las bandas y cortaba contenido del lado derecho
   (visto en el CTA final). width:100% no depende del viewport, solo del
   contenedor, así que no tiene ese problema. */

.aprende-band {
  width: 100%;
}
.aprende-band-inner { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.aprende-band--yellow { background: var(--eb-yellow); color: var(--eb-black); }
.aprende-band--black { background: var(--eb-black); color: #fff; }
.aprende-band--cream { background: var(--eb-cream); color: var(--ink); }

/* ---- Etiquetas tipo "VOL. 1" de la portada ------------------------------ */

.aprende-tag {
  display: inline-block;
  background: var(--eb-black);
  color: var(--eb-yellow);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--eb-radius-sm);
}
.aprende-band--black .aprende-tag { background: var(--eb-yellow); color: var(--eb-black); }
.aprende-tag--red { background: var(--accent); color: #fff; }

/* Acento de color simple sobre la palabra clave del título (sin marca a
   mano -- se veía ilegible encima del texto). */
.aprende-accent { color: var(--accent); }

/* ---- Hero (texto + portada del libro, sin formulario) -------------------- */

.aprende-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 36px 0 64px;
}
.aprende-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.aprende-hero h1 {
  font-size: clamp(38px, 5.6vw, 60px);
  line-height: 1.02;
  margin: 0;
  color: var(--eb-black);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
/* La página de gracias usa el mismo componente pero con un mensaje
   personalizado -- ahí no queremos mayúsculas, se lee mejor natural. */
.aprende-gracias .aprende-hero h1 { text-transform: none; }
.aprende-hero-sub {
  font-size: 18px;
  color: var(--eb-black);
  opacity: 0.75;
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
}
.aprende-hero-micro {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--eb-black);
}
.aprende-hero-image { position: relative; display: flex; justify-content: center; }
.aprende-hero-image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow);
}

/* Insignia giratoria "Fuel Your Growth" (la misma del home) sobre la
   esquina de la portada -- usa las clases base .hero-badge / .hero-badge-svg
   / .hero-badge-text / .hero-badge-arrow ya definidas en style.css (spin
   incluido); aquí solo se reposiciona, se re-escala y se oscurece el texto
   para que se lea sobre el fondo amarillo. */
.aprende-hero-badge {
  position: absolute;
  top: -14px;
  right: 2%;
  width: 108px;
  height: 108px;
  transform: none;
  z-index: 2;
}
.aprende-hero-badge .hero-badge-text { fill: rgba(20, 17, 16, 0.85); }
.aprende-hero-badge .hero-badge-arrow { color: var(--eb-black); }

/* ---- Tarjeta del formulario (ahora vive en el CTA final) ------------------ */

.aprende-form-card {
  background: #fff;
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow);
  padding: 36px;
  width: 100%;
}
.aprende-form-card .aprende-hero-micro { text-align: center; margin-top: 16px; }
.aprende-form-card-cta {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 800;
  color: var(--eb-black);
  text-align: center;
}

/* ---- Formulario ------------------------------------------------------------ */

.aprende-form { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.aprende-form label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 12px; color: var(--eb-black); }
.aprende-form-optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.55; }
.aprende-form input,
.aprende-form select {
  /* min-width:0 es necesario porque son hijos de un flex column -- sin esto,
     un <select> con una opcion larga (p.ej. "Una agencia de mercadotecnia
     para mi empresa") usa esa opcion como su ancho minimo de contenido y
     el navegador lo respeta por encima del stretch del flexbox, empujando
     el formulario (y la pagina entera) mas ancho que la pantalla en movil. */
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1.5px solid rgba(20, 17, 16, 0.16);
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--font-body);
  background: #fff;
  color: var(--eb-black);
}
.aprende-form input:focus,
.aprende-form select:focus {
  outline: none;
  border-color: var(--accent);
}
.aprende-form button { margin-top: 20px; width: 100%; }
.aprende-form-hint { font-size: 12.5px; color: var(--eb-black); opacity: 0.6; text-align: center; margin: 12px 0 0; }

/* ---- Video introductorio -------------------------------------------------
   En escritorio va DESPUÉS de "¿Te suena?"; en móvil va ANTES (arriba),
   pegado al hero. En vez de duplicar el HTML del video para cada caso (dos
   iframes de Vimeo cargando a la vez sería un desperdicio), el video vive
   en el DOM en la posición de MÓVIL (justo después del hero) y ".aprende-
   intro-group" -- que envuelve hero + video + "¿Te suena?" -- se vuelve un
   flex column donde solo en escritorio se le da "order" a cada banda para
   que "¿Te suena?" se pinte antes que el video. En móvil no se toca ningún
   "order" (quedan en su orden natural del HTML: hero, video, suena). */
.aprende-intro-group { display: flex; flex-direction: column; }
@media (min-width: 901px) {
  .aprende-intro-hero { order: 1; }
  .aprende-intro-suena { order: 2; }
  .aprende-intro-video-band { order: 3; }
}

.aprende-intro-video {
  padding: 56px 0;
  display: flex;
  justify-content: center;
}
.aprende-video-wrap {
  position: relative;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--eb-radius);
  overflow: hidden;
  box-shadow: var(--eb-shadow-dark);
}
.aprende-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Móvil: que el video ocupe todo el ancho real de la pantalla (no solo el
   ancho del contenido con el padding de 40px del band-inner) -- por eso el
   margin negativo, para cancelar exactamente ese padding lateral solo en
   esta sección. Sin esquinas redondeadas ni sombra porque, pegado al borde
   de la pantalla, ya no se ven como una tarjeta flotante sino como un
   corte raro. */
@media (max-width: 900px) {
  .aprende-intro-video {
    padding: 0 0 32px;
    margin: 0 -40px;
  }
  .aprende-video-wrap {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}


/* ---- ¿Te suena? ---------------------------------------------------------- */

.aprende-suena {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}
.aprende-suena h2 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: var(--eb-yellow);
  margin: 0 0 28px;
}
.aprende-suena-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.aprende-suena-list li {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  padding-left: 32px;
  position: relative;
}
.aprende-suena-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.aprende-suena-close {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 0;
}
.aprende-suena-image img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-dark);
}

/* ---- Qué vas a aprender --------------------------------------------------- */
/* En escritorio se ven las 7 tarjetas completas, como antes. En móvil cada
   una es un <details> retráctil (para no ocupar tanta pantalla), agrupadas
   con name="aprende-learn-group" para que abrir una cierre la anterior. */

.aprende-learn { padding: 64px 0; }
.aprende-learn h2 {
  font-size: clamp(28px, 4vw, 38px);
  color: var(--ink);
  font-weight: 800;
  margin: 16px 0 20px;
  line-height: 1.15;
}
.aprende-learn-intro { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 68ch; margin: 0 0 36px; }
.aprende-learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.aprende-learn-block { position: relative; background: #fff; border-radius: var(--eb-radius); box-shadow: var(--eb-shadow-sm); padding: 24px; }
.aprende-learn-block summary { list-style: none; cursor: default; }
.aprende-learn-block summary::-webkit-details-marker { display: none; }
.aprende-learn-num {
  display: inline-block;
  background: var(--eb-yellow);
  color: var(--eb-black);
  font-weight: 800;
  font-size: 20px;
  padding: 4px 12px;
  border-radius: var(--eb-radius-sm);
  margin-bottom: 14px;
}
.aprende-learn-block h4 { margin: 0 0 8px; font-size: 15.5px; color: var(--ink); font-weight: 800; line-height: 1.3; }
.aprende-learn-block p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.aprende-learn-icon { display: none; }

/* ENCONTRAMOS LA CAUSA REAL del bug de "sigue en dropdown en Safari/Chrome
   de escritorio" que veníamos persiguiendo: los navegadores recientes
   (Chrome/Safari de las últimas versiones, parte del esfuerzo Interop de
   estandarizar la animación de <details>) ya NO ocultan el contenido de un
   <details> cerrado poniendo "display:none" directo en sus hijos --lo
   ocultan por dentro, en un pseudo-elemento interno "::details-content"
   que envuelve todo lo que no es <summary>. Por eso un
   "display:block !important" puesto en los hijos (<p>, <h4>, etc) YA NO
   ALCANZA en esos navegadores: el que de verdad colapsa el contenido es
   ese pseudo-elemento, no los hijos, así que "ganarle" ahí es lo único que
   funciona de verdad. Dejamos el `display:block!important` de todas formas
   como respaldo para navegadores más viejos que sí ocultan vía los hijos
   directamente (no estorba en ningún lado). */
.aprende-learn-block > *:not(summary) { display: block !important; }

/* Este es el fix real: forzar el pseudo-elemento ::details-content a estar
   siempre visible y con su alto natural, sin importar si el <details>
   trae o no el atributo "open" -- así no dependemos para nada de si el
   navegador decidió cerrar la tarjeta (por ejemplo, cuando varias
   comparten el mismo "name" y el navegador cierra automáticamente todas
   menos la primera al cargar la página). Sólo aplica en NO-táctil: en
   pantallas táctiles de verdad (abajo) queremos que el navegador SÍ pueda
   colapsar el contenido para que el acordeón de móvil funcione. */
@media not (pointer: coarse) {
  .aprende-learn-block::details-content {
    content-visibility: visible !important;
    overflow: visible !important;
    height: auto !important;
    block-size: auto !important;
  }
}

/* Tarjetas de "Qué vas a aprender" retráctiles solo en pantallas táctiles
   (celulares/tablets) -- para no ocupar tanta pantalla ahí. Ligado al tipo
   de puntero, no al ancho, para que no se active en una ventana de
   escritorio angosta. Aquí SÍ dejamos que el navegador colapse el
   contenido de forma nativa (no tocamos ::details-content), y el
   :not([open]) de abajo refuerza lo mismo para navegadores más viejos que
   ocultan vía los hijos directos. */
@media (pointer: coarse) {
  .aprende-learn-block:not([open]) > *:not(summary) { display: none !important; }
  .aprende-learn-block summary { cursor: pointer; }
  .aprende-learn-block { padding: 20px 44px 20px 20px; }
  .aprende-learn-icon { display: block; top: 20px; right: 20px; }
  .aprende-learn-block p { margin-top: 12px; }
}

/* ---- Desde cero. Literal. -------------------------------------------------- */

.aprende-literal { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; padding: 72px 0; }
.aprende-literal h2 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.02; margin: 0 0 20px; color: var(--eb-black); }
.aprende-literal p { font-size: 17px; line-height: 1.6; color: var(--eb-black); opacity: 0.8; max-width: 48ch; margin: 0; }
.aprende-literal-cover img {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow);
  display: block;
  margin: 0 auto;
}

/* ---- Cuánto te costaría aprenderlo a base de errores ------------------------ */
/* Ahora en banda clara (antes negra), justo antes de "Échale un vistazo".
   La foto de Carlos (recorte de cuerpo completo) queda cortada justo en los
   pies en el archivo original -- en vez de dejar un hueco debajo que delate
   el recorte, la hacemos más grande y la dejamos "sangrar" hasta el borde
   real de la sección (sin padding inferior en su columna). */

.aprende-mistakes {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: end;
  padding: 64px 0 0;
}
.aprende-mistakes-text { padding-bottom: 64px; }
.aprende-mistakes h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; color: var(--eb-black); max-width: 22ch; margin: 0 0 32px; line-height: 1.15; }
.aprende-mistakes-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.aprende-mistakes-list li { display: flex; gap: 14px; align-items: flex-start; }
.aprende-mistake-x { color: var(--accent); font-weight: 800; font-size: 18px; line-height: 1.4; }
.aprende-mistakes-list p { margin: 0; color: var(--eb-black); opacity: 0.8; font-size: 16px; line-height: 1.5; }
.aprende-mistakes-close { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--accent); margin: 0 0 24px; }
.aprende-mistakes-image { display: flex; justify-content: center; align-self: end; }
.aprende-mistakes-image img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

/* ---- Échale un vistazo ------------------------------------------------------ */
/* Ahora en banda negra (antes clara). En móvil, carrusel horizontal en vez
   de las 4 páginas apiladas -- ocupaba demasiada pantalla. */

.aprende-preview { padding: 64px 0; text-align: center; }
.aprende-preview h2 { font-size: clamp(28px, 4vw, 38px); color: var(--eb-yellow); font-weight: 800; margin-bottom: 8px; }
.aprende-preview-sub { color: rgba(255, 255, 255, 0.72); max-width: 56ch; margin: 0 auto 40px; }
.aprende-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.aprende-preview-item img {
  width: 100%;
  height: auto;
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-dark);
  display: block;
}

/* ---- Autor ------------------------------------------------------------------ */

.aprende-author { padding: 64px 0; }
.aprende-author-card {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--eb-shadow);
  padding: 44px;
}
.aprende-author-photo {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  border-radius: var(--eb-radius);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(20, 17, 16, 0.18);
}
.aprende-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aprende-author-body h2 { font-size: clamp(24px, 3vw, 32px); color: var(--ink); font-weight: 800; margin: 14px 0 4px; line-height: 1.2; }
.aprende-author-role { font-weight: 700; color: var(--accent); font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 16px; }
.aprende-author-body p { color: var(--ink); opacity: 0.85; font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.aprende-author-body p:last-child { margin-bottom: 0; }

/* ---- Vol. 2 ------------------------------------------------------------------ */

.aprende-vol2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: var(--eb-radius);
  box-shadow: var(--eb-shadow-sm);
  padding: 32px 36px;
  margin-bottom: 64px;
}
.aprende-vol2-text h3 { font-size: 19px; font-weight: 800; margin: 10px 0 6px; color: var(--eb-black); }
.aprende-vol2-text p { margin: 0; color: var(--muted); font-size: 14.5px; }
.aprende-vol2-btn { white-space: nowrap; }

/* ---- Y hay más ---------------------------------------------------------------- */

.aprende-more { padding: 0 0 64px; text-align: center; }
.aprende-more h3 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.aprende-more-sub { color: var(--muted); margin: 0 0 32px; }
.aprende-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: left; }
.aprende-more-item { display: block; background: #fff; border-radius: var(--eb-radius); box-shadow: var(--eb-shadow-sm); padding: 24px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.aprende-more-item:hover { transform: translateY(-3px); box-shadow: var(--eb-shadow); }
.aprende-more-item h4 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.aprende-more-item p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.aprende-more-cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---- Preguntas frecuentes (acordeón, banda negra) ------------------------------ */
/* name="aprende-faq-group" en el markup hace que abrir una cierre la
   anterior (acordeón exclusivo nativo, sin JS). */

.aprende-faq { padding: 64px 0; max-width: 74ch; margin: 0 auto; }
.aprende-faq h3 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #fff; margin: 0 0 24px; }
.aprende-faq-list { display: flex; flex-direction: column; gap: 12px; }
.aprende-faq-item {
  background: #fff;
  border-radius: var(--eb-radius-sm);
  box-shadow: var(--eb-shadow-sm);
  padding: 4px 24px;
}
.aprende-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.aprende-faq-item summary::-webkit-details-marker { display: none; }
.aprende-faq-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
}
.aprende-faq-icon::before,
.aprende-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.aprende-faq-icon::before { width: 14px; height: 2.5px; }
.aprende-faq-icon::after { width: 2.5px; height: 14px; transition: transform 0.15s ease; }
.aprende-faq-item[open] .aprende-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.aprende-faq-item p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Mismo ícono +/- para las tarjetas de "Qué vas a aprender" en móvil. */
.aprende-learn-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 24px;
  right: 24px;
}
.aprende-learn-icon::before,
.aprende-learn-icon::after {
  content: '';
  position: absolute;
  background: var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.aprende-learn-icon::before { width: 14px; height: 2.5px; }
.aprende-learn-icon::after { width: 2.5px; height: 14px; transition: transform 0.15s ease; }
.aprende-learn-block[open] .aprende-learn-icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }

/* ---- CTA final (con el formulario) --------------------------------------------- */

.aprende-final-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0 64px;
}
/* min-width:0 en los hijos del grid: por defecto un grid item tiene
   min-width:auto (su ancho minimo de contenido), igual que un flex item --
   sin esto, un item puede negarse a encogerse por debajo de ese minimo y
   forzar overflow horizontal aunque el grid ya este en una sola columna
   en movil. overflow-wrap es un segundo respaldo por si algun texto
   (titulo, parrafo) tuviera una palabra o token mas largo de lo esperado. */
.aprende-final-cta-text,
.aprende-form-card {
  min-width: 0;
  overflow-wrap: break-word;
}
.aprende-final-cta h2 {
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--eb-black);
  margin: 0 0 20px;
  text-transform: uppercase;
}
.aprende-final-cta-text > p { font-size: 17px; color: var(--eb-black); opacity: 0.75; max-width: 46ch; margin: 0; }

/* ---- Página de gracias -------------------------------------------------------- */

.aprende-gracias .aprende-hero { grid-template-columns: 1fr; text-align: center; }
.aprende-gracias .aprende-hero-text { align-items: center; margin: 0 auto; }
.aprende-gracias .aprende-hero-sub { margin-left: auto; margin-right: auto; }
.aprende-gracias-downloads { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 900px) {
  .aprende-hero { grid-template-columns: 1fr; text-align: center; }
  .aprende-hero-text { align-items: center; }
  .aprende-hero-sub { margin-left: auto; margin-right: auto; }
  .aprende-hero-image img { max-width: 280px; }
  .aprende-hero-badge { width: 78px; height: 78px; top: -6px; right: 6%; }
  .aprende-suena { grid-template-columns: 1fr; text-align: center; }
  .aprende-suena-list { text-align: left; }

  /* "Échale un vistazo": carrusel horizontal en vez de grid apilado. */
  .aprende-preview-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none;
  }
  .aprende-preview-item {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  .aprende-mistakes { grid-template-columns: 1fr; text-align: center; padding: 48px 0 0; }
  .aprende-mistakes-text { padding-bottom: 24px; }
  .aprende-mistakes-list { text-align: left; }
  .aprende-mistakes-image { margin-top: 24px; }
  .aprende-mistakes-image img { max-width: 300px; }
  .aprende-literal { grid-template-columns: 1fr; text-align: center; }
  .aprende-literal p { margin: 0 auto; }
  .aprende-final-cta { grid-template-columns: 1fr; text-align: center; }
  .aprende-final-cta-text > p { margin: 0 auto; }
  .aprende-author-card { flex-direction: column; text-align: center; padding: 32px; }
  .aprende-author-photo { width: 150px; height: 150px; flex-basis: 150px; margin: 0 auto; }
}

@media (max-width: 780px) {
  .aprende-hero { padding: 28px 0 48px; }
  .aprende-vol2 { flex-direction: column; align-items: flex-start; text-align: left; }
}