/* ============================================================
   CIBERPRO — media-v20.css · Maquetación de secciones con imagen
   Cargar DESPUÉS de app-v18.css y v19-system.css.
   Hero a 2 columnas, splits texto+imagen, lista de entregables
   y bloque #consulta (imagen izq + texto der).
   ============================================================ */

/* ---- Marco de imagen común ---- */
.media-fig,.hero-media,.consulta-media{margin:0;position:relative}
.media-fig img,.hero-media img,.consulta-media img{display:block;width:100%;height:auto;object-fit:cover;border-radius:22px}
.hero-media img{aspect-ratio:4/3;border:1px solid rgba(87,201,255,.22);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.media-fig img{aspect-ratio:1/1;border:1px solid rgba(87,201,255,.22);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.media-fig.fig-4x3 img{aspect-ratio:4/3}
.consulta-media img{aspect-ratio:4/3;border:1px solid #cdddec;box-shadow:0 26px 64px rgba(6,21,42,.20)}
.media-fig:after,.consulta-media:after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(87,201,255,.22)}

/* ---- Hero a dos columnas ---- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-grid .hero-copy{min-width:0}

/* ---- Split genérico (texto + imagen) ---- */
.media-split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.media-split .media-text{min-width:0}
.media-split .media-fig{max-width:460px;margin-inline:auto}
.media-split .media-fig.fig-4x3{max-width:520px}
.media-split .eyebrow{display:block;margin-bottom:14px}
.media-split .media-text h2{margin-bottom:16px}
.media-split .media-text>p{margin-bottom:22px}
.media-split .section-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---- Lista de entregables (Cybersecurity) ---- */
.entregables-list{display:flex;flex-direction:column;gap:16px}
.entregable{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid rgba(87,201,255,.16);border-radius:16px;background:linear-gradient(180deg,rgba(16,29,46,.65),rgba(8,17,31,.65))}
.entregable .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid currentColor;background:rgba(255,255,255,.03)}
.entregable .ic svg{width:24px;height:24px}
.entregable h3{font-size:1.12rem;margin:0 0 4px;letter-spacing:-.01em}
.entregable p{margin:0;font-size:.96rem}
.entregable.e-c .ic,.entregable.e-c h3{color:#57c9ff}
.entregable.e-m .ic,.entregable.e-m h3{color:#cf57ff}
.entregable.e-o .ic,.entregable.e-o h3{color:#ff8a22}

/* ---- #consulta (imagen izquierda + contact-box derecha) ---- */
.consulta-split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
/* el acento cian del título debe ganar a la regla legacy .section-light span */
.section-light .contact-box .accent-c{color:#57c9ff}

/* ---- Responsive ---- */
@media(max-width:880px){
  .hero-grid,.media-split{grid-template-columns:1fr;gap:30px}
  .hero-media{order:-1}
  .media-split .media-fig{order:-1;max-width:520px}
}
@media(max-width:860px){
  .consulta-split{grid-template-columns:1fr;gap:26px}
}