/* ═══════════════════════════════════════════════════════════════════
   SERVICIOS.CSS · Módulo de servicios del portal público
   ═══════════════════════════════════════════════════════════════════

   Carga: /servicios (listado) y /servicios/{slug} (detalle).

   Convención: clases prefijadas con .srv-* para evitar colisión
   con otros módulos. Variables CSS locales scopeadas en .page-servicios.

   NO contiene reglas multi-selector compartidas con otras secciones
   del portal (heros con --hero-img, container con z-index para
   texto encima de imagen, responsive móvil de la imagen). Esas
   reglas viven en style.css y aplican a .srv-hero, .srv-detail-hero,
   .cal-hero, .ct-hero, .ns-hero y .fmc-hero simultáneamente.

   Orden de carga garantizado por public.php:
       style.css → nosotros.css → laboratorio.css → servicios.css →
       formacion.css → blog.css

   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   1) VARIABLES CSS LOCALES DEL MÓDULO
   ═══════════════════════════════════════════════════════════════════ */

.page-servicios {
    --srv-azul-inst:    #042C53;
    --srv-azul-medio:   #1C579D;
    --srv-azul-geo:     #3E64D7;
    --srv-azul-inge:    #2C2D82;
    --srv-rojo:         #E10713;
    --srv-verde:        #0D9D31;
    --srv-naranja:      #B8651A;
    --srv-amarillo:     #E8A93A;
    --srv-gris:         #939393;
    --srv-gris-bg:      #F5F5F4;
    --srv-gris-border:  #E5E5E3;
    --srv-bg-azul:      #F0F4F9;
    --srv-bg-verde:     #F0FAF3;
    --srv-bg-naranja:   #FDF5EE;
    --srv-bg-cream:     #FAFAF8;

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #2C2C2C;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════
   2) ELEMENTOS BASE COMPARTIDOS
   ═══════════════════════════════════════════════════════════════════ */

.srv-pretitulo {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--srv-verde);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.srv-pretitulo--light  { color: #FFB347; }
.srv-pretitulo--orange { color: var(--srv-naranja); }

.srv-section {
    padding: 5rem 0;
    background: #fff;
}
.srv-section--alt {
    background: var(--srv-bg-cream);
}

.srv-section-header {
    max-width: 760px;
    margin: 0 auto 3rem;
}
.srv-section-titulo {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--srv-azul-inst);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.srv-section-titulo--small {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}
.srv-section-intro {
    font-size: 1.0625rem;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

.srv-text-lg {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   3) HERO DEL LISTADO /servicios
   ═══════════════════════════════════════════════════════════════════ */

.srv-hero {
    background: linear-gradient(135deg, var(--srv-azul-inst) 0%, var(--srv-azul-inge) 100%);
    color: #fff;
    padding: 6rem 0 5rem;
    position: relative;
    overflow: hidden;
}

/* Overlays radiales sutiles — compartidos con el hero del detalle */
.srv-hero::before,
.srv-detail-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at top right, rgba(13, 157, 49, 0.12), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(62, 100, 215, 0.10), transparent 50%);
    pointer-events: none;
}

/* Texto del listado encima del overlay y de la eventual imagen */
.srv-hero > .container {
    position: relative;
    z-index: 1;
}

.srv-hero-titulo {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0.5rem 0 1.5rem;
    max-width: 880px;
    color: #fff !important;
}
.srv-hero-descripcion {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88) !important;
    max-width: 720px;
}


/* ═══════════════════════════════════════════════════════════════════
   4) INTRO DE POSICIONAMIENTO
   ═══════════════════════════════════════════════════════════════════ */

.srv-intro-content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   5) GRILLA DE TARJETAS DE SERVICIO
   ═══════════════════════════════════════════════════════════════════ */

/* Grilla del listado completo */
.srv-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* Grilla de servicios relacionados */
.srv-cards-grid--small {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin: 0 auto;
}

/* Tablet */
@media (max-width: 992px) {
    .srv-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móvil */
@media (max-width: 576px) {
    .srv-cards-grid,
    .srv-cards-grid--small {
        grid-template-columns: 1fr;
    }
}

/* Tarjeta base */
.srv-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: #fff;
    border-radius: 14px;
    border: 2px solid var(--srv-gris-border);
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.srv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
}

/* Badge "in situ" para modalidades especiales (ICAL-IS) */
.srv-card-badge-modalidad {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #3E64D7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.4px;
    text-transform: lowercase;
    z-index: 2;
}

/* Variantes cromáticas institucionales de la tarjeta */
.srv-card--naranja {
    border-color: var(--srv-naranja);
    background: linear-gradient(135deg, #fff 0%, var(--srv-bg-naranja) 100%);
}
.srv-card--verde {
    border-color: var(--srv-verde);
    background: linear-gradient(135deg, #fff 0%, var(--srv-bg-verde) 100%);
}
.srv-card--azul-geo {
    border-color: var(--srv-azul-geo);
    background: linear-gradient(135deg, #fff 0%, var(--srv-bg-azul) 100%);
}
.srv-card--azul-inge {
    border-color: var(--srv-azul-inge);
    background: linear-gradient(135deg, #fff 0%, var(--srv-bg-azul) 100%);
}

/* Cabecera de la tarjeta */
.srv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.srv-card-icon {
    font-size: 2.5rem !important;
}
.srv-card--naranja  .srv-card-icon { color: var(--srv-naranja); }
.srv-card--verde    .srv-card-icon { color: var(--srv-verde); }
.srv-card--azul-geo .srv-card-icon { color: var(--srv-azul-geo); }
.srv-card--azul-inge .srv-card-icon { color: var(--srv-azul-inge); }

.srv-card-codigo {
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #555;
}

/* Cuerpo de la tarjeta */
.srv-card-titulo {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--srv-azul-inst);
    margin: 0 0 0.4rem;
    line-height: 1.25;
}
.srv-card-subtitulo {
    display: block;
    font-size: 0.875rem;
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}
.srv-card-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1.25rem;
    flex: 1;
}

/* Metadatos de la tarjeta */
.srv-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-top: 1px dashed var(--srv-gris-border);
    border-bottom: 1px dashed var(--srv-gris-border);
}
.srv-card-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #555;
    line-height: 1.5;
}
.srv-card-meta-row .material-symbols-rounded {
    font-size: 1rem !important;
    color: var(--srv-azul-inst);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Link de la tarjeta */
.srv-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--srv-azul-inst);
    margin-top: auto;
}
.srv-card-link .material-symbols-rounded {
    font-size: 1rem !important;
    transition: transform 0.2s;
}
.srv-card:hover .srv-card-link .material-symbols-rounded {
    transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════════════════════
   6) LÍNEAS FUTURAS
   ═══════════════════════════════════════════════════════════════════ */

.srv-futuras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 920px;
    margin: 0 auto 2rem;
}

.srv-futura-item {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--srv-gris-border);
    border-left: 4px solid var(--srv-amarillo);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--srv-azul-inst);
    font-weight: 500;
    transition: transform 0.2s;
}
.srv-futura-item:hover {
    transform: translateX(2px);
}
.srv-futura-item .material-symbols-rounded {
    font-size: 1.25rem !important;
    color: var(--srv-amarillo);
    flex-shrink: 0;
}

.srv-futuras-link {
    text-align: center;
    padding: 1.5rem;
    margin-top: 1rem;
}
.srv-futuras-link p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: #555;
}

.srv-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1.25rem;
    background: var(--srv-azul-geo);
    color: #fff !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s;
}
.srv-link:hover {
    background: var(--srv-azul-inst);
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════
   7) HERO DEL DETALLE /servicios/{slug}
   ═══════════════════════════════════════════════════════════════════
   
   El degradado de fondo lo da la variante de color institucional.
   La imagen opcional (--hero-img inline style) se renderiza via
   ::after por las reglas multi-selector que viven en style.css.
   Los overlays radiales se comparten con .srv-hero::before (más
   arriba en este mismo archivo).
   ═══════════════════════════════════════════════════════════════════ */

.srv-detail-hero {
    padding: 3rem 0 4rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Variantes de color institucional según servicio */
.srv-detail-hero--naranja {
    background: linear-gradient(135deg, #8E4A14 0%, var(--srv-naranja) 100%);
}
.srv-detail-hero--verde {
    background: linear-gradient(135deg, #07621D 0%, var(--srv-verde) 100%);
}
.srv-detail-hero--azul-geo {
    background: linear-gradient(135deg, var(--srv-azul-inst) 0%, var(--srv-azul-geo) 100%);
}
.srv-detail-hero--azul-inge {
    background: linear-gradient(135deg, var(--srv-azul-inst) 0%, var(--srv-azul-inge) 100%);
}

/* Breadcrumb */
.srv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 2rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}
.srv-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s;
}
.srv-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}
.srv-breadcrumb .material-symbols-rounded {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.5);
}
.srv-breadcrumb-actual {
    color: #fff;
    font-weight: 500;
}

/* Contenido del hero */
.srv-detail-hero-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
@media (max-width: 768px) {
    .srv-detail-hero-content {
        flex-direction: column;
        gap: 1.25rem;
    }
}

.srv-detail-hero-icon {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.srv-detail-hero-icon .material-symbols-rounded {
    font-size: 3rem !important;
    color: #fff;
}

.srv-detail-codigo {
    display: inline-block;
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 0.875rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.srv-detail-hero-text h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: #fff !important;
}
.srv-detail-subtitulo {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 1rem;
    font-style: italic;
}

.srv-detail-norma {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.srv-detail-norma .material-symbols-rounded {
    font-size: 1rem !important;
}


/* ═══════════════════════════════════════════════════════════════════
   8) CONTENIDO DEL DETALLE
   ═══════════════════════════════════════════════════════════════════ */

.srv-detail-content {
    max-width: 880px;
    margin: 0 auto;
}

.srv-detail-html {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
}
.srv-detail-html p {
    margin-bottom: 1.25rem;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.srv-detail-html p:last-child { margin-bottom: 0; }
.srv-detail-html ul,
.srv-detail-html ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
.srv-detail-html li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}
.srv-detail-html strong {
    color: var(--srv-azul-inst);
    font-weight: 600;
}

/* Bloque destacado de cómo se cotiza */
.srv-detail-cotiza-block {
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, var(--srv-bg-azul) 0%, #E8EFF7 100%);
    border-left: 5px solid var(--srv-azul-geo);
    border-radius: 10px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 1.5rem 0;
}
.srv-detail-cotiza-block .material-symbols-rounded {
    font-size: 1.75rem !important;
    color: var(--srv-azul-geo);
    flex-shrink: 0;
}
.srv-detail-cotiza-block p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #2C2C2C;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Bloque de link al final del detalle */
.srv-detail-link-block {
    padding: 1.5rem 1.75rem;
    background: var(--srv-bg-cream);
    border-radius: 10px;
    text-align: center;
    margin-top: 2rem;
}
.srv-detail-link-block p {
    margin-bottom: 1rem;
    color: #555;
    font-size: 0.9375rem;
}


/* ═══════════════════════════════════════════════════════════════════
   9) COMPONENTES TÉCNICOS
   ═══════════════════════════════════════════════════════════════════ */

.srv-componentes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 968px) {
    .srv-componentes-grid { grid-template-columns: 1fr; }
}

.srv-componente-categoria {
    padding: 1.75rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--srv-gris-border);
}

.srv-componente-categoria-titulo {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--srv-verde);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(13, 157, 49, 0.15);
}

.srv-componente-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.srv-componente-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--srv-gris-border);
}
.srv-componente-item:last-child { border-bottom: none; }
.srv-componente-icono {
    color: var(--srv-verde);
    font-size: 1.25rem !important;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.srv-componente-item strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--srv-azul-inst);
    margin-bottom: 0.25rem;
}
.srv-componente-item p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #555;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   10) EXCLUSIONES EXPLÍCITAS
   ═══════════════════════════════════════════════════════════════════ */

.srv-exclusiones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 920px;
    margin: 0 auto 2rem;
}
@media (max-width: 768px) {
    .srv-exclusiones-grid { grid-template-columns: 1fr; }
}

.srv-exclusion-card {
    padding: 1.75rem;
    background: linear-gradient(135deg, #FFF8EE 0%, #FFEED4 100%);
    border-left: 5px solid var(--srv-naranja);
    border-radius: 10px;
}
.srv-exclusion-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.875rem;
    border-bottom: 2px dashed rgba(184, 101, 26, 0.2);
}
.srv-exclusion-header .material-symbols-rounded {
    font-size: 1.75rem !important;
    color: var(--srv-naranja);
    flex-shrink: 0;
}
.srv-exclusion-header h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--srv-azul-inst);
    line-height: 1.3;
}
.srv-exclusion-card p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #2C2C2C;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.srv-exclusion-nota {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    background: var(--srv-bg-cream);
    border-radius: 10px;
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    border: 1px dashed var(--srv-gris-border);
}
.srv-exclusion-nota .material-symbols-rounded {
    color: var(--srv-azul-geo);
    font-size: 1.5rem !important;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.srv-exclusion-nota p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #444;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   11) CTA FINAL
   ═══════════════════════════════════════════════════════════════════ */

.srv-cta {
    padding: 4rem 0;
}
.srv-cta-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, var(--srv-azul-inst) 0%, var(--srv-azul-inge) 100%);
    border-radius: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.srv-cta-box::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 179, 71, 0.15) 0%, transparent 60%);
    pointer-events: none;
}
.srv-cta-box > * { position: relative; z-index: 1; }

.srv-cta-box h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    color: #fff;
    line-height: 1.25;
}
.srv-cta-box p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 540px;
    margin: 0 auto 2rem;
}

.srv-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    background: var(--srv-rojo);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(225, 7, 19, 0.3);
}
.srv-cta-btn:hover {
    background: #C8060F;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(225, 7, 19, 0.4);
    color: #fff !important;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════
   12) JUSTIFICACIÓN TIPOGRÁFICA
   ═══════════════════════════════════════════════════════════════════
   
   Reglas scopeadas a .page-servicios para garantizar que la
   justificación con guionado se aplique solo en esta página y no
   contamine al resto del portal.
   ═══════════════════════════════════════════════════════════════════ */

/* Listado de servicios */
.page-servicios .srv-section-intro,
.page-servicios .srv-text-lg,
.page-servicios .srv-card-desc {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Intro de posicionamiento — solo los <p> de adentro
   (el contenedor preserva text-align: center) */
.page-servicios .srv-intro-content p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   13) RESPONSIVE GENERAL DEL MÓDULO
   ═══════════════════════════════════════════════════════════════════
   
   El responsive de la imagen del hero (.srv-detail-hero[style*="--hero-img"]
   en móvil) vive en style.css como regla multi-selector compartida
   con cal-hero, ct-hero, ns-hero y fmc-hero.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .srv-section { padding: 3rem 0; }
    .srv-hero { padding: 4rem 0 3rem; }
    .srv-detail-hero { padding: 2rem 0 3rem; }
    .srv-card { padding: 1.5rem; }
    .srv-cta-box { padding: 2rem 1.5rem; }
    .srv-componente-categoria { padding: 1.5rem; }
    .srv-exclusion-card { padding: 1.5rem; }
}
/* =========================================================
   BLOQUE "PROGRAMACIÓN Y PRESENCIA" — solo en DIAG
   ========================================================= */

.srv-prog-presencia {
    padding: 4rem 0;
    background-color: transparent;
}

.srv-prog-presencia-box {
    max-width: 1100px;
    margin: 0 auto;
    background-color: #FFF8F0;
    border-top: 1px solid rgba(184, 101, 26, 0.15);
    border-bottom: 1px solid rgba(184, 101, 26, 0.15);
    padding: 3rem 2.5rem;
    border-radius: 6px;
}

.srv-prog-presencia-pretitulo {
    display: inline-block;
    color: #B8651A;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #B8651A;
}

.srv-prog-presencia-titulo {
    color: #042C53;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 2rem 0;
}

.srv-prog-presencia-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.srv-prog-presencia-texto p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.7;
    margin: 0 0 1.2rem 0;
    color: #2C3E50;
    font-size: 1rem;
}

.srv-prog-presencia-texto p:last-child {
    margin-bottom: 0;
}

.srv-prog-presencia-cta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

.srv-prog-presencia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background-color: #B8651A;
    color: #FFFFFF;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(184, 101, 26, 0.25);
}

.srv-prog-presencia-btn:hover {
    background-color: #9F571A;
    transform: translateY(-1px);
    color: #FFFFFF;
    text-decoration: none;
}

.srv-prog-presencia-btn .material-symbols-rounded {
    font-size: 1.25rem;
}

.srv-prog-presencia-btn .material-symbols-rounded:last-child {
    font-size: 1rem;
    opacity: 0.85;
}

.srv-prog-presencia-teaser {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: rgba(4, 44, 83, 0.04);
    border-left: 3px solid #042C53;
    padding: 1rem 1.2rem;
    border-radius: 4px;
}

.srv-prog-presencia-teaser .material-symbols-rounded {
    color: #042C53;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.srv-prog-presencia-teaser p {
    margin: 0;
    color: #042C53;
    font-size: 0.9rem;
    line-height: 1.55;
    font-style: italic;
}

.srv-prog-presencia-teaser p strong {
    font-style: normal;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE — mobile
   ========================================================= */

@media (max-width: 768px) {

    .srv-prog-presencia {
        padding: 2.5rem 0;
    }

    .srv-prog-presencia-box {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }

    .srv-prog-presencia-titulo {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .srv-prog-presencia-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .srv-prog-presencia-cta {
        position: static;
    }

    .srv-prog-presencia-texto p {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .srv-prog-presencia-btn {
        width: 100%;
        padding: 1rem 1.25rem;
    }

    .srv-prog-presencia-teaser {
        padding: 0.9rem 1rem;
    }

    .srv-prog-presencia-teaser p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {

    .srv-prog-presencia-box {
        padding: 1.5rem 1.2rem;
    }

    .srv-prog-presencia-titulo {
        font-size: 1.35rem;
    }
}