/* =============================================================================
   WaterProof WEB — Página "Iniciar aprendizaje" (/web/learning/).
   Replica 05-iniciar_aprendizaje. Depende de tokens + base + components.
   ========================================================================== */

/* --- Hero (collage de videollamadas + overlay navy, texto blanco) --------- */
.wpl-hero { color:#fff; text-align:center; background-position:center; background-size:cover; }
.wpl-hero__inner { padding:84px 0 96px; max-width:820px; margin:0 auto; }
.wpl-hero h1 { color:#fff; font-size:clamp(30px,3.6vw,46px); line-height:1.2; max-width: 22ch; margin: 0 auto;}
.wpl-hero h1 .accent { color:var(--blue); }
.wpl-hero p { color:rgba(255,255,255,.9); margin-top:20px; font-size:var(--fs-lg); line-height:1.7; padding: 0px 15px 0px 15px;}

/* --- Cómo ingresar a los cursos (video izq / texto der, columnas asimétricas) -- */
.wpl-how { padding:72px 0; }
.wpl-how__card { display:grid; gap:40px; align-items:center; }
@media (min-width:860px){ .wpl-how__card { grid-template-columns:535fr 607fr; } }
.wpl-how__media { position:relative; border-radius:var(--rounded-2xl); overflow:hidden; box-shadow:var(--shadow-md); }
.wpl-how__media img { width:100%; aspect-ratio:535/345; object-fit:cover; display:block; }
.wpl-play { position:absolute; inset:0; display:grid; place-items:center; background:var(--overlay-dark-20);
  border:0; width:100%; cursor:pointer; transition:.16s; }
.wpl-play:hover { background:rgba(4,49,76,.36); }
.wpl-play span { width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; box-shadow:var(--shadow-md); }
.wpl-play span svg { width:34px; height:34px; margin-left:5px; color:var(--blue); }
.wpl-how__text h2 { font-size:var(--fs-3xl); color:var(--primary-900); margin-bottom:16px; }
.wpl-how__text p { color:var(--text-3); font-size:var(--fs-md); line-height:1.7; margin-bottom:26px; }
.wpl-how__text .wpw-btn svg { width:20px; height:20px; }

/* --- Aprendizaje virtual a la medida (3 cards "floating box") -------------- */
.wpl-courses { padding:12px 0 84px; }
.wpl-cards { display:grid; gap:12px; }
@media (min-width:820px){ .wpl-cards { grid-template-columns:repeat(3,1fr); } }
/* Cada card = imagen a sangre; el bloque de texto flota abajo como panel esmerilado */
.wpl-card { position:relative; aspect-ratio:401/630; border-radius:var(--rounded-xl); overflow:hidden;
  box-shadow:var(--shadow-md); transition:.18s; }
.wpl-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.wpl-card__img { position:absolute; inset:0; }
.wpl-card__img img { width:100%; height:100%; object-fit:cover; }
.wpl-card__body { position:absolute; left:14px; right:14px; bottom:14px; padding:24px 22px;
  border-radius:var(--rounded-sm); background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  display:flex; flex-direction:column; gap:12px; }
.wpl-card__body h3 { color:var(--primary-900); font-size:var(--fs-3xl); line-height:1.15; }
.wpl-card__body p { color:var(--text-2); font-size:var(--fs-sm); line-height:1.55; }
.wpl-card__body .wpw-btn { margin-top:6px; justify-content:center; width:100%; }

/* Tablet (600–819px): tarjeta horizontal —panel de texto a la izquierda sobre la
   imagen tenue, imagen visible a la derecha—, como el diseño de Figma. */
@media (min-width:600px) and (max-width:819.98px){
  .wpl-card { aspect-ratio:900/500; }
  .wpl-card__body { right:auto; top:0px; bottom:0px; left:0px; width:40%;
    justify-content:center; background:rgba(255,255,255,.84); opacity: 0.75;}
  .wpl-path{
    display: none;
  }
}
/* Móvil (<600px): tarjeta vertical —imagen arriba, texto debajo sobre blanco. */
@media (max-width:599.98px){
  .wpl-card { aspect-ratio:auto; }
  .wpl-card__img { position:static; aspect-ratio:16/10; }
  .wpl-card__body { position:static; inset:auto; border-radius:0;
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
    padding:24px 22px 28px; }
  .wpl-path{
    display: none;
  }
}

/* --- CTA "¿Por qué es necesario empezar ahora?" (caja azul clara) ---------- */
.wpl-cta { padding:8px 0 32px; }
.wpl-cta__box { border:1px solid var(--border-blue); border-radius:var(--rounded-3xl);
  padding:52px 40px; text-align:center; background:var(--primary-50); }
.wpl-cta__box h2 { font-size:var(--fs-3xl); margin-bottom:14px; }
.wpl-cta__box h2 .accent { color:var(--blue); }
.wpl-cta__box p { color:var(--text-3); max-width:60ch; margin:0 auto 26px; font-size:var(--fs-md); line-height:1.7; }

/* --- Decoración de camino ------------------------------------------------- */
.wpl-path { padding:8px 0 40px; }
.wpl-path__img { width:100%; opacity:.9; }
/* "Volver arriba": componente compartido .wpw-totop (components.css) */