/* =====================================================================
   sitio-publico.css — páginas internas del sitio público (Servicios y Modalidades)
   Misma paleta de la portada (negro, grafito y rojo de marca) con diseño moderno:
   hero, tarjetas, secciones de texto legible y galería.
   Usa los tokens --pt-* de portada.css. Prefijo sp- para no chocar con otros estilos.
   ===================================================================== */

:root {
    --sp-radio: 16px;
    --sp-sombra: 0 2px 12px rgba(18, 24, 33, .08);
    --sp-sombra-alta: 0 14px 32px rgba(18, 24, 33, .18);
    --sp-max-texto: 760px;
}

body.sp-pagina { background: var(--pt-fondo, #f6f7f9); color: var(--pt-texto, #1f1f1f); font-family: var(--pt-fuente, system-ui, sans-serif); -webkit-font-smoothing: antialiased; }
body.sp-pagina h1, body.sp-pagina h2, body.sp-pagina h3 { font-family: inherit; text-shadow: none; }
body.sp-pagina img { max-width: 100%; }
.sp-pagina a:focus-visible, .sp-pagina button:focus-visible { outline: 3px solid var(--pt-acento, #d32f2f); outline-offset: 2px; }

/* ---------- Hero ---------- */
.sp-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0d0d0d 0%, #2b2b2b 60%, #424242 100%);
    padding: 64px 0 56px;
}
.sp-hero:after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--pt-acento, #d32f2f) 0, var(--pt-acento, #d32f2f) 96px, transparent 96px);
}
.sp-hero .container { position: relative; z-index: 1; }
.sp-eyebrow { display: inline-block; margin-bottom: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff8a80; }
.sp-hero__titulo { margin: 0 0 16px; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: #fff; }
.sp-hero__lead { margin: 0; max-width: 760px; font-size: 1.12rem; line-height: 1.7; color: #d7dade; text-align: left; }
.sp-hero__icono { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font-size: 220px; line-height: 1; color: #fff; opacity: .06; pointer-events: none; }

/* ---------- Secciones ---------- */
.sp-seccion { padding: 56px 0; }
.sp-seccion--clara { background: #fff; }
.sp-seccion--oscura { background: #1c1f24; color: #e8eaed; }
.sp-seccion__titulo { margin: 0 0 8px; font-size: 1.7rem; font-weight: 800; color: var(--pt-negro, #0d0d0d); }
.sp-seccion__sub { margin: 0 0 28px; color: var(--pt-texto-suave, #5f6368); }

/* Texto de lectura cómoda */
.sp-texto { max-width: var(--sp-max-texto); }
.sp-texto p { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.8; color: #2b2f36; text-align: left; }
.sp-texto h2 { margin: 36px 0 12px; font-size: 1.35rem; font-weight: 800; color: var(--pt-negro, #0d0d0d); }
.sp-texto ul { margin: 0 0 22px; padding: 0; list-style: none; }
.sp-texto ul li {
    position: relative; margin: 0 0 10px; padding: 10px 14px 10px 44px; background: #fff; border: 1px solid var(--pt-borde, #e3e5e8);
    border-radius: 12px; line-height: 1.5; font-size: 1.02rem;
}
.sp-texto ul li:before {
    content: "check"; font-family: "Material Icons"; font-size: 18px; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--pt-acento, #d32f2f); color: #fff; font-style: normal; text-transform: none; letter-spacing: normal;
    -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
}
.sp-texto ul.sp-lista-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.sp-texto ul.sp-lista-grid li { margin: 0; }

/* ---------- Tarjetas (cursos, programas) ---------- */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.sp-card {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
    padding: 28px 22px 26px; background: #fff; border: 1px solid var(--pt-borde, #e3e5e8); border-radius: var(--sp-radio);
    box-shadow: var(--sp-sombra); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sp-card:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pt-gris, #424242); transition: background .2s ease; }
.sp-card:hover { transform: translateY(-4px); box-shadow: var(--sp-sombra-alta); border-color: #cfd3d8; }
.sp-card:hover:before { background: var(--pt-acento, #d32f2f); }
.sp-card__img {
    width: 132px; height: 132px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eceff1, #dfe3e6); border-radius: 22px; transition: background .2s ease;
}
.sp-card__img img { width: 84px; height: 84px; object-fit: contain; }
.sp-card:hover .sp-card__img { background: linear-gradient(135deg, #e3e7ea, #cfd5d9); }
.sp-card__titulo { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: var(--pt-negro, #0d0d0d); }

/* ---------- Modalidades: bloques imagen + texto ---------- */
.sp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sp-split--inv .sp-split__media { order: 2; }
.sp-split__media img {
    display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: var(--sp-radio);
    box-shadow: var(--sp-sombra-alta);
}
.sp-split__num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: var(--pt-negro, #0d0d0d); color: #fff; font-weight: 800; }
.sp-split__titulo { margin: 0 0 8px; font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--pt-negro, #0d0d0d); }
.sp-split__sub { display: block; margin-bottom: 14px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-acento, #d32f2f); }
.sp-split__texto { margin: 0; font-size: 1.05rem; line-height: 1.8; color: #2b2f36; text-align: left; }
.sp-seccion--oscura .sp-split__titulo { color: #fff; }
.sp-seccion--oscura .sp-split__texto { color: #d7dade; }
.sp-seccion--oscura .sp-split__num { background: var(--pt-acento, #d32f2f); }

/* ---------- Imagen destacada (memoria, videotutoriales) ---------- */
.sp-destacada { margin: 0; border-radius: var(--sp-radio); overflow: hidden; box-shadow: var(--sp-sombra-alta); background: #1c1f24; }
.sp-destacada img { display: block; width: 100%; height: auto; }

/* ---------- Galería (Outdoor) ---------- */
.sp-galeria { padding: 24px; background: #1c1f24; border-radius: var(--sp-radio); box-shadow: var(--sp-sombra-alta); }
#gallery { margin: 0 auto; }

/* ---------- Llamada a la acción ---------- */
.sp-cta { text-align: center; padding: 48px 0 64px; }
.sp-cta__btn {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 26px; border-radius: 12px; border: 0;
    background: var(--pt-acento, #d32f2f); color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(211, 47, 47, .3); transition: background .15s ease, transform .15s ease;
}
.sp-cta__btn:hover { background: var(--pt-acento-osc, #b71c1c); transform: translateY(-1px); color: #fff; }

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 992px) {
    .sp-split { grid-template-columns: 1fr; gap: 24px; }
    .sp-split--inv .sp-split__media { order: 0; }
    .sp-hero__icono { display: none; }
}
@media (max-width: 600px) {
    .sp-hero { padding: 40px 0 36px; }
    .sp-seccion { padding: 36px 0; }
    .sp-grid { grid-template-columns: 1fr; gap: 16px; }
    .sp-card { flex-direction: row; text-align: left; padding: 16px; gap: 14px; }
    .sp-card__img { width: 84px; height: 84px; flex-shrink: 0; border-radius: 16px; }
    .sp-card__img img { width: 56px; height: 56px; }
    .sp-texto p { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-card, .sp-card:before, .sp-cta__btn { transition: none; }
}