/* ============================================================
   LÍNEAS ESTRATÉGICAS — estilos propios de la página
   Usa las variables de marca definidas en inicio.css (:root)
   ============================================================ */

/* ---------- Encabezado ---------- */
.le-hero{
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(31,182,216,.12), transparent 60%),
    linear-gradient(180deg,#fff, var(--cream));
  padding:132px 0 56px;
}
.le-hero .crumbs{font-size:.9rem;color:var(--grey);margin-bottom:18px}
.le-hero .crumbs a{color:var(--blue);text-decoration:none}
.le-hero .crumbs span{margin:0 4px}
.le-hero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);color:var(--navy);line-height:1.12;margin-bottom:18px}
.le-hero h1 .script{color:var(--cyan);font-weight:400}
.le-hero .lead{font-size:1.08rem;font-weight:300;color:var(--grey);max-width:62ch}

/* ---------- Líneas (filas alternadas) ---------- */
.le{padding:24px 0 40px;background:var(--paper)}
.le-item{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;
  padding:40px 0;
  scroll-margin-top:100px;
}
.le-item.reverse .le-media{order:2}

.le-media .frame{
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3;
}
.le-media .frame img{width:100%;height:100%;object-fit:cover;display:block}
.lphoto-pending{
  aspect-ratio:4/3;border-radius:22px;
  border:2px dashed rgba(34,54,74,.22);
  background:linear-gradient(135deg,rgba(69,132,195,.12),rgba(31,182,216,.12));
  display:flex;align-items:center;justify-content:center;
  color:var(--grey);opacity:.7;
}

.le-num{
  display:inline-block;font-size:2.8rem;font-weight:800;line-height:1;
  color:var(--orange);opacity:.24;margin-bottom:8px;
}
.le-text h2{font-size:clamp(1.4rem,2.7vw,2rem);color:var(--navy);line-height:1.24;margin-bottom:14px}
.le-text p{color:var(--grey);font-weight:300;font-size:1.04rem;line-height:1.7}

/* ---------- CTA de cierre ---------- */
.le-cta{
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(31,182,216,.2), transparent 60%),
    linear-gradient(135deg,var(--blue-deep),var(--blue));
  color:#fff;text-align:center;padding:72px 0;
}
.le-cta h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:14px}
.le-cta h2 .script{color:var(--cyan-bright);font-weight:400}
.le-cta p{max-width:56ch;margin:0 auto 30px;font-weight:300;opacity:.95;font-size:1.05rem}
.le-cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.le-cta .btn.white{background:#fff;color:var(--blue-deep)!important}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .le-item{grid-template-columns:1fr;gap:24px;padding:30px 0}
  .le-item.reverse .le-media{order:0}
  .le-media .frame,.lphoto-pending{max-height:320px}
}