/*
 * Services: Plantilla de page-servicio
 * Version: 2.1 Correcciones visuales — hero weight/tamaño, subservicios peso,
 *               noticias grid sin excerpt, CTA padding y h2 en una línea
 * Version: 2.2 Reestructuración mobile-first — base = mobile, los @media
 *               (min-width) solo agregan mejoras desde tablet/desktop en
 *               adelante. Se elimina el bloque "MOBILE" al final del archivo
 *               y la sección de Portafolio se reordena a su posición real en
 *               el DOM de page-servicio.php (entre Subservicios y Noticias).
 *               Bugs corregidos en el proceso:
 *               - .svc-cta__copy h2: white-space:nowrap solo aplicaba entre
 *                 701-767px por una declaración redundante en el breakpoint
 *                 de 1024px que nunca restauraba nowrap. Ahora nowrap es
 *                 explícito solo en desktop (min-width:1024px).
 *               - .svc-row.is-active .svc-row__open estaba duplicada dentro
 *                 del bloque mobile viejo; la regla base ya la cubría sin
 *                 necesidad de media query. Eliminada la duplicada.
 * Version: 2.3 P62 — .svc-hero__body .lead y .svc-modal__desc bajaban de
 *               1rem en pantallas chicas (clamp con piso .875rem),
 *               contradiciendo la regla base p{font-size:1rem} de main.css.
 *               Ambos fijados a 1rem plano. Se deja sin tocar (mismo
 *               patrón que labels/captions/títulos en el resto del sitio,
 *               no son párrafos de lectura): .svc-mg-caption (.8rem),
 *               .svc-mg-empty (.875rem), .svc-portfolio-card__title
 *               (clamp con piso .95rem, es un título).
 * Version: 2.4 — P66/P67 (auditoría mobile/tablet):
 *   - P66: .svc-portfolio y .svc-noticias no tenían ningún padding
 *     vertical real — la clase "pad" en el markup de page-servicio.php
 *     es un no-op ahí, solo existe en inicio.css (front page). La única
 *     separación entre secciones era un border-top de 1px. Agregado
 *     padding-top/bottom clamp(3rem,5vw,5rem), mismo patrón ya usado en
 *     .svc-cta más abajo en este archivo.
 *   - P67: .svc-noticias .eyebrow tenía su propio override (10px, gris,
 *     sin el peso visual del resto de los eyebrows del sitio). Removido
 *     — ahora hereda .eyebrow de main.css sin excepciones.
 * Version: 2.5 — P64: unificación completa con el hero de single-proyecto_portafolio.php.
 *     Eliminado CSS del glow/dot decorativo exclusivo de este hero
 *     (.svc-hero__glow, .svc-hero__eyebrow wrapper, .svc-h-dot, .svc-h-line
 *     — esta última nunca se usó, era CSS muerto de antes de esta sesión).
 *     Agregado .svc-hero__body .cta-row (no existía, el hero nunca tuvo
 *     botones) — mismo patrón que .hero .cta-row de inicio.css, replicado
 *     acá porque ese archivo no carga en páginas de servicio.
 * Version: 2.6 — Fix modo claro del hero de servicio (reportado con
 *     capturas: fondo lavado + texto negro sobre el video). Dos bugs
 *     independientes: (1) body.light .svc-hero__overlay reemplazaba el
 *     gradiente oscuro por uno claro (rgba(244,244,244,...)), lavando el
 *     video — eliminado, el hero siempre queda oscuro sin importar el
 *     tema. (2) .svc-hero__body h1 usa var(--white), que se invierte a
 *     casi-negro en modo claro — nunca tuvo el override que main.css ya
 *     tiene para .hero-content. Agregado body.light .svc-hero__body h1/
 *     .lead/.cta-row .btn, mismos valores que ese patrón. Además: el
 *     scroll-cue estaba pegado a la derecha (right:6vw) — centrado,
 *     mismo criterio que .scroll-cue del home (inicio.css).
 * Version: 2.7 P16 — Código muerto retirado: .svc-mg-caption (leyenda de
 *               slide en el modal de galería de subservicios; el track se
 *               puebla 100% vía JS en page-servicio.php y nunca genera ese
 *               elemento, solo .svc-mg-slide) y .svc-row__sub (etiqueta
 *               corta al hover de fila de servicio; nunca se agregó el
 *               elemento HTML correspondiente en .svc-row__inner). Ninguna
 *               referencia real en el markup ni campo meta reservado en el
 *               plugin. La mención de .svc-mg-caption en el comentario de
 *               v2.3 (línea 23) queda como registro histórico de esa
 *               decisión, no se edita.
 * Autor: fcastillo@madis.cl
 */

/* ═══════════════════════════════════════════
   LAYOUT BASE
   ═══════════════════════════════════════════ */
.layout-servicio {
    background: var(--black);
    color: var(--white);
}

/* Light mode */

/* P16 — el hero SIEMPRE va oscuro sobre el video, sin importar el tema
   del sitio. P64-bis ya lo resolvió para el overlay (abajo, sin excepción
   sin importar body.light) pero dejó el texto (h1/.lead/.cta-row .btn)
   resuelto vía overrides body.light — funcionaba, pero era el único de
   los 3 heroes que necesitaba ese mecanismo: .hero-content (main.css) y
   .proyecto-hero-content (single-proyecto.css, P55) usan colores fijos
   directos en la regla base, sin depender de body.light en absoluto.
   Esta sesión mueve svc-hero__body al mismo patrón (ver h1/.lead/.cta-row
   más abajo) — los overrides de acá ya no hacen falta, quedan retirados. */

body.light .svc-row__bg::after {
    background: linear-gradient(105deg, rgba(249,249,249,.75) 30%, rgba(249,249,249,.2) 100%);
}

/* ═══════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════ */
.svc-hero {
    position: relative;
    height: 100svh;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* P16 — antes: flex-direction:column;justify-content:flex-end (ancla
       abajo). Único de los 3 heroes del sitio con este patrón — .hero
       (inicio.css) y .proyecto-hero (single-proyecto.css) ya centraban
       con align-items:center. Causa raíz del choque .svc-hero__body
       vs .scroll-cue en mobile: el padding-bottom calculado (clamp)
       nunca alcanzaba a cubrir el alto real del scroll-cue en anchos
       angostos (confirmado en iPhone 14 Pro Max: 56px de colchón vs
       ~99px que ocupa el scroll-cue). Centrado, el contenido nunca se
       acerca al borde inferior por diseño — el mismo bug estructural
       no puede repetirse. */
}

.svc-hero__vid {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.svc-hero__vid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 10s ease-out;
}

.svc-hero__grid {
    /* P16 — extensión del grid de marca (antes exclusivo de .hero-grid en
       inicio.css) a los 3 heroes. Mismo patrón visual, con el tono cálido
       rgba(16,10,10,.10) aprobado por el design system en vez de
       var(--line) (que en modo claro se invierte a un valor pensado para
       texto sobre fondo claro, no para superponerse a un video/imagen que
       siempre es oscuro). */
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .5;
    background-image:
        linear-gradient(rgba(16,10,10,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,10,10,.10) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(120% 90% at 60% 30%, #000 30%, transparent 80%);
            mask-image: radial-gradient(120% 90% at 60% 30%, #000 30%, transparent 80%);
    pointer-events: none;
}

.svc-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* P16 — replica exacta del patrón de .hero-overlay (inicio.css):
       1 sola pila de 3 gradientes (radial rojo + 2 lineales cruzados),
       no 2 elementos separados. La versión anterior de esta sesión
       (overlay parejo + .svc-hero__glow como círculo aparte) se probó y
       se descartó: al separar el glow en su propio elemento acotado se
       perdía la profundidad que dan las 3 capas superpuestas — quedaba
       plano/lavado en comparación directa con inicio. Mismos colores
       aprobados por el design system (rgba(16,10,10,X) en vez de
       rgba(0,0,0,X); rojo 229,29,37 en vez de 233,33,34), misma
       geometría/opacidad/caída que ya está probada en inicio — no se
       reinventa la fórmula, solo se recolorea. */
    background:
        radial-gradient(100% 80% at 82% 14%, rgba(229,29,37,.18), transparent 55%),
        linear-gradient(90deg, rgba(16,10,10,.9), rgba(16,10,10,.4) 55%, rgba(16,10,10,.72)),
        linear-gradient(180deg, rgba(16,10,10,.2), rgba(16,10,10,.55) 60%, rgba(16,10,10,.92));
}

/* P16 — .svc-hero__glow retirado (definitivamente esta vez, ver P64 en
   Version 2.5 arriba): el glow ahora vive embebido en .svc-hero__overlay
   como capa radial, mismo patrón que .hero-overlay de inicio.css. Un
   elemento aparte y acotado (lo que hubo acá un momento en esta misma
   sesión, y lo que nunca llegó a tener markup real desde P64) se probó
   y se descartó: rompe la profundidad de las 3 capas superpuestas. */

.svc-hero__body {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--header-height) + 2rem);
    /* P16 — padding-bottom (antes clamp(3.5rem,8vw,6rem), colchón contra
       .scroll-cue) retirado: con .svc-hero centrado (align-items:center)
       el contenido nunca llega al borde inferior, no hace falta reservar
       espacio calculado para evitar el choque. Mismo criterio que
       .hero-content/.proyecto-hero-content, que tampoco lo tienen. */
}

/* P64: .svc-hero__eyebrow (wrapper con dot decorativo) y .svc-h-dot/.svc-h-line
   eliminados — el markup ahora usa <span class="eyebrow"> suelto, igual que
   single-proyecto_portafolio.php y el resto del sitio. .svc-h-line nunca se
   usó en ningún markup, quedó de una iteración anterior. */
.svc-hero__body .eyebrow { margin-bottom: 1.75rem; }

/* ── H1: weight 300, tamaño grande, sin max-width ── */
.svc-hero__body h1 {
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    color: var(--static-ghost-white); /* fijo: el fondo del hero siempre es
       oscuro (video+overlay), sea cual sea el tema del sitio. */
}

.svc-hero__body h1 .accent {
    color: var(--red);
}

/* ── Lead: más pequeño y atenuado ── */
.svc-hero__body .lead {
    margin-top: 1.75rem;
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    color: var(--static-light-gray); /* fijo, mismo motivo que el h1 de arriba */
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 0;
}

/* ── CTA row (P64) — el hero de servicio nunca tuvo botones antes.
   Mismo patrón que .hero .cta-row en inicio.css (front page), replicado
   acá porque ese archivo no carga en páginas de servicio. ── */
.svc-hero__body .cta-row {
    display: flex;
    gap: 16px;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* P16 — fijo, no body.light: mismo criterio que .proyecto-hero-content
   .btn/.btn-primary/.btn-ghost (P55). .btn/.btn-primary/.btn-ghost son
   globales (main.css) y sí cambian con el tema porque en el resto del
   sitio se usan sobre fondos que cambian — acá, dentro del hero, siempre
   están sobre el mismo fondo oscuro. */
.svc-hero__body .cta-row .btn { color: var(--static-ghost-white); border-color: rgba(255,252,255,.35); }
.svc-hero__body .cta-row .btn-primary { color: var(--static-white); border-color: var(--red); }
.svc-hero__body .cta-row .btn-ghost:hover { border-color: var(--static-ghost-white); }

/* ── Scroll cue ── */
/* Antes pegado a la derecha (right:6vw) — el resto del sitio centra el
   scroll-cue (ver .scroll-cue en inicio.css: left:50%+translateX(-50%)).
   Alineado al mismo criterio. */
/* P16 — unificado con .scroll-cue de inicio.css (mismo bottom:34px,
   tipografía heredada sin overrides propios, animación scaleY sobre
   gradiente en vez del "drop" que tenía antes con pseudo-elemento —
   sin motivo documentado para que fuera distinto, se alinea al patrón
   compartido). Selector con .svc-hero delante se mantiene: el markup
   usa class="scroll-cue" simple, igual que inicio.css/page-servicio.php,
   pero esto vive en un archivo que solo carga en esta plantilla. */
.svc-hero .scroll-cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--static-light-gray);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.svc-hero .scroll-cue .bar {
    width: 1px;
    height: 46px;
    background: linear-gradient(var(--red-accent), transparent);
    animation: cue 2s var(--ease) infinite;
}

@keyframes cue {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ═══════════════════════════════════════════
   2. FILAS DE SUBSERVICIOS
   ═══════════════════════════════════════════ */
.svc-rows {
    border-top: 1px solid var(--dark-graphite);
}

.svc-row {
    position: relative;
    border-bottom: 1px solid var(--dark-graphite);
    overflow: hidden;
    cursor: pointer;
    background: var(--black);
}

/* Línea roja inferior — crece desde la izquierda al hover */
.svc-row::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 0;
    height: 1px;
    background: var(--red);
    transition: width .6s var(--ease, cubic-bezier(.22,1,.36,1));
    pointer-events: none;
}

.svc-row:hover::before,
.svc-row.is-active::before {
    width: 100%;
}

/* Imagen de fondo hover */
.svc-row__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity .65s var(--ease, cubic-bezier(.22,1,.36,1));
    pointer-events: none;
}

.svc-row__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.8) saturate(.5);
    transform: scale(1.04);
    transition: transform .8s var(--ease, cubic-bezier(.22,1,.36,1));
}

.svc-row:hover .svc-row__bg,
.svc-row.is-active .svc-row__bg {
    opacity: 1;
}

.svc-row:hover .svc-row__bg img,
.svc-row.is-active .svc-row__bg img {
    transform: scale(1);
}

.svc-row__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(16,10,10,.96) 30%, rgba(16,10,10,.4) 100%);
}

/* Contenido de la fila */
.svc-row__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 6vw;
    transition: padding .5s var(--ease, cubic-bezier(.22,1,.36,1));
}

.svc-row:hover .svc-row__inner,
.svc-row.is-active .svc-row__inner {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.svc-row__left {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* ── Nombre: weight 300, tamaño mayor — igual al h1 del HTML ref ── */
.svc-row__name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.7vw, 2.4rem);
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--mid-gray);
    border: none;
    padding: 0;
    margin: 0;
    transition: transform .5s var(--ease, cubic-bezier(.22,1,.36,1)),
                letter-spacing .5s var(--ease, cubic-bezier(.22,1,.36,1));
}

.svc-row:hover .svc-row__name,
.svc-row.is-active .svc-row__name {
    transform: translateX(10px);
    letter-spacing: -.01em;
}

.svc-row__name:hover {
    color: var(--white);
    opacity: 1;
}

/* Botón circular flecha — MOBILE-FIRST: visible por defecto (touch no
   tiene hover confiable). P16 — desde 768px se oculta y solo aparece al
   hover, ver bloque TABLET más abajo (antes era un bloque aparte en
   701px, fusionado). */
.svc-row__open {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mid-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-graphite);
    color: var(--mid-gray);
    flex-shrink: 0;
    opacity: 1;
    transform: none;
    transition: background .35s,
                border-color .35s,
                color .35s,
                transform .5s var(--ease, cubic-bezier(.22,1,.36,1)),
                opacity .35s;
}

/* Estado activo — aplica en cualquier ancho, es una interacción real
   (tap en mobile, click en desktop), no algo width-dependiente */
.svc-row.is-active .svc-row__open {
    background: var(--red);
    border-color: var(--red);
    color: var(--static-white);
    transform: rotate(45deg);
}

/* ═══════════════════════════════════════════
   3. MODAL GALERÍA + INFO
   P52 — antes era mobile-first stacked (galería 56vw arriba, info abajo)
   y a partir de 701px pasaba a 2 columnas lado a lado (imagen 1fr + info
   300px, height:580px fijo) — mismo patrón que .pmodal, mismo problema:
   panel angosto apretado, mucho aire. Ahora es 1 columna apilada en
   TODOS los anchos: imagen 16/9 (ya no 56vw, más consistente con el
   resto del sitio) arriba, info compacta abajo. Mismo fix de margen fijo
   en px que .pmodal/.pgmodal (P50/P51) para que la pantalla más chica de
   la empresa también deje margen arriba del modal.
   ═══════════════════════════════════════════ */
.svc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(16,10,10,.82);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}

.svc-modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

.svc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(.97);
    z-index: var(--z-modal);
    /* P69.2 — mismo fix que .pmodal (portfolio-modal.css): antes el
       ancho era fijo (min(1100px,94vw)) y max-height:50vh en
       .svc-modal__gallery recortaba la altura cuando no cabía, rompiendo
       el 16:9 declarado en la mayoría de pantallas reales (cualquier
       notebook con viewport bajo ~1237px de alto, con el modal a 1100px
       de ancho). Ahora el ANCHO del modal completo se deriva del
       presupuesto vertical disponible — la imagen sigue ocupando el
       100% de ese ancho (sin franjas internas), y es el modal el que se
       angosta en pantallas bajas, no la imagen la que se recorta de más. */
    width: min(1100px, 94vw, calc((100vh - 360px) * 16 / 9));
    max-height: calc(100vh - 180px);
    background: var(--black);
    border: 1px solid var(--mid-gray);
    border-radius: 6px;
    /* P16 — antes "hidden auto": scrolleaba el modal COMPLETO (galería +
       info) como un solo bloque. En pantallas bajas, el presupuesto
       vertical que le queda a .svc-modal__info después de la galería
       puede ser mínimo (ver cálculo en el comentario de arriba: en el
       peor caso, casi 0px libres) — con scroll a nivel modal, leer la
       descripción arrastraba la galería fuera de vista. Ahora
       overflow:hidden puro (solo recorta para el border-radius) y el
       modal pasa a ser una columna flex con altura acotada — el scroll
       real vive en .svc-modal__desc más abajo, acotado por flexbox. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s var(--ease, cubic-bezier(.22,1,.36,1)),
                transform .38s var(--ease, cubic-bezier(.22,1,.36,1));
}

.svc-modal.open {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}

.svc-modal__inner {
    display: flex;
    flex-direction: column;
    min-height: 0; /* permite que los hijos flex se achiquen y activen su propio scroll interno, en vez de forzar que el padre crezca */
    flex: 1 1 auto;
}

/* P69.2 — el 16:9 real ya está garantizado por el ancho de .svc-modal
   (ver comentario ahí): vuelve a ocupar el 100% de ese ancho, sin tope
   de altura propio — ya no hace falta, el ancho del modal viene
   pre-calculado para que esta altura quepa en el presupuesto vertical.
   P16 — flex-shrink:0: dentro de la columna flex de .svc-modal__inner,
   la galería nunca se comprime para hacerle espacio a la descripción —
   mantiene siempre su aspect-ratio 16:9 real; el que cede espacio y
   scrollea internamente es .svc-modal__desc, no la imagen. */
.svc-modal__gallery {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--static-black);
}

.svc-mg-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.svc-mg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .55s ease;
}

.svc-mg-slide.active {
    opacity: 1;
}

.svc-mg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease, cubic-bezier(.22,1,.36,1));
}

.svc-mg-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: "Nunito", sans-serif;
    font-size: .875rem;
    color: var(--mid-gray);
}

/* P52 — mismo tratamiento que .pmg-btn (portfolio-modal.css): fondo rojo
   sólido, ícono blanco, hover con el segundo rojo. Mismo problema de
   contraste que ahí, mismo fix, consistencia entre los dos modales del
   sitio que usan este patrón. */
.svc-mg-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid var(--red);
    color: var(--static-white);
    box-shadow: 0 4px 16px rgba(16,10,10,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.svc-mg-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.svc-mg-btn:hover {
    background: var(--red-accent);
    border-color: var(--red-accent);
    color: var(--static-white);
    transform: translateY(-50%) scale(1.06);
}

.svc-mg-prev { left: 1rem; }
.svc-mg-next { right: 1rem; }

.svc-mg-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.svc-mg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mid-gray);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.svc-mg-dot.active {
    background: var(--static-white);
    transform: scale(1.3);
}


/* P16 — flex:1 1 auto + min-height:0: recibe TODO el espacio que le
   sobra a la galería dentro del alto acotado de .svc-modal__inner. Sin
   min-height:0, el default de flexbox (min-height:auto) le impediría
   achicarse por debajo de su contenido — que es justo lo que necesitamos
   para que sea .svc-modal__desc, adentro, el que scrollee en vez de
   este contenedor crecer sin límite. overflow:hidden acá (no auto):
   el scroll real vive un nivel más adentro, en .svc-modal__desc. */
.svc-modal__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: .6rem;
}

.svc-modal__info-top {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}

.svc-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--static-mid-gray);
    background: rgba(16,10,10,.75);
    color: var(--static-mid-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
}

.svc-modal__close:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--static-white);
}

.svc-modal__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    letter-spacing: -.022em;
    line-height: 1.1;
    color: var(--white);
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
}

.svc-modal__divider {
    width: 32px;
    height: 1px;
    background: var(--red);
    margin: 0 auto;
}

/* P16 — el scroll real del modal vive acá, no en .svc-modal (ver
   comentario ahí). flex:1 1 auto + min-height:0: toma el espacio que le
   sobra a .svc-modal__title/.svc-modal__divider (que no crecen, ver
   .svc-modal__info) dentro de esa columna ya acotada; si el texto no
   entra en ese espacio, scrollea internamente — la galería y el título
   quedan siempre visibles, fijos, mientras se lee la descripción. */
.svc-modal__desc {
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    color: var(--white);
    line-height: 1.6;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--red-accent) transparent;
}
.svc-modal__desc::-webkit-scrollbar { width: 6px; }
.svc-modal__desc::-webkit-scrollbar-track { background: transparent; }
.svc-modal__desc::-webkit-scrollbar-thumb { background: var(--red-accent); border-radius: 3px; }
.svc-modal__desc::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ═══════════════════════════════════════════
   4. CARRUSEL DE PORTAFOLIO — page-servicio.php
   Reordenado a su posición real en el DOM (entre Subservicios/Modal
   y Noticias). Reutiliza carousel.js sin modificar (mismo contrato de
   clases: .carousel-container/.carousel-track/.carousel-slide/
   .carousel-btn/.carousel-indicators). Scoped a .svc-portfolio-carousel
   para no pisar las reglas genéricas de carousel.css (16:9, 800px) que
   sigue usando single-proyecto_portafolio.php sin override.
   MOBILE-FIRST: aspect-ratio 16/9 en todos los anchos (igual que
   svc-news-card__img). P69: eliminado el override a 4/1 en desktop que
   existia antes — feedback real de stakeholders confirmo que se veia
   mal (imagen muy panoramica, poco alto util). Boton/indicador ahora
   heredan el estilo unificado de carousel.css (ver comentario ahi).
   ═══════════════════════════════════════════ */
.svc-portfolio-carousel.carousel-container {
    max-width: 100%;
    width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    margin: 24px 0 0;
    overflow: visible;
}

.svc-portfolio-carousel .carousel-track {
    height: auto;
    gap: 3px;
}

.svc-portfolio-carousel .carousel-slide.svc-portfolio-card {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 16 / 9;
    background: var(--dark-graphite);
    height: auto;
}

.svc-portfolio-card__link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
}

.svc-portfolio-card__img {
    position: absolute;
    inset: 0;
}
.svc-portfolio-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.svc-portfolio-card__img--empty {
    background: var(--dark-graphite);
}

.svc-portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(16,10,10,.82) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    pointer-events: none;
}

.svc-portfolio-card__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(.95rem, 1.6vw, 1.2rem);
    font-weight: 600;
    color: var(--static-ghost-white);
    margin: 0;
    letter-spacing: -.01em;
}

/* P69 — override local de .carousel-btn/.indicator-dot eliminado:
   carousel.css base ahora define el estilo unificado (circulo rojo
   solido 48px + punto circular) para las 4 instancias que comparten
   el componente. Mantener un override aparte aquí habría dejado este
   carrusel con un cuarto estilo distinto al resto, contradiciendo el
   objetivo de unificación. */

/* ═══════════════════════════════════════════
   5. NOTICIAS RELACIONADAS
   ─ Sin excerpt, con fecha, borde rojo hover
   Ya estaba mobile-first (1 columna base, 2 en tablet, 3 en desktop) —
   sin cambios en esta sección.
   ═══════════════════════════════════════════ */
.svc-portfolio {
    border-top: 1px solid var(--dark-graphite);
    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
}

.svc-noticias {
    background: var(--black);
    border-top: 1px solid var(--dark-graphite);
    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
}

/* P67: antes tenía su propio tratamiento (10px, gris, sin guión rojo real
   porque el ::before de main.css quedaba desproporcionado con este
   tamaño) que lo desalineaba del resto del sitio. Ahora hereda
   .eyebrow de main.css sin override — mismo rojo/tracking/guión que
   Portafolio arriba y que cualquier otro eyebrow del sitio. */
.svc-noticias .eyebrow {
    margin-bottom: 2.5rem;
}

/* Grid: 3 columnas con separador de 1px */
.svc-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
}

.svc-news-card {
    position: relative;
    background: var(--black);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color .3s;
}

.svc-news-card:hover {
    border-color: var(--red);
}

.svc-news-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Imagen 16/9 */
.svc-news-card__img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.svc-news-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .5s, transform .6s var(--ease, cubic-bezier(.22,1,.36,1));
}

.svc-news-card:hover .svc-news-card__img img {
    opacity: .9;
    transform: scale(1.04);
}

/* Body: cat, título, fecha — sin excerpt */
.svc-news-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.svc-news-card__cat {
    font-family: "Nunito", sans-serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mid-gray);
    margin-bottom: 6px;
    opacity: 0.7;
}

.svc-news-card__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -.01em;
    line-height: 1.35;
    color: var(--white);
    border: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s;
}

.svc-news-card:hover .svc-news-card__title {
    color: var(--white);
}

/* Fecha en lugar de excerpt */
.svc-news-card__date {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    color: var(--mid-gray);
    margin-top: .25rem;
}

/* Sin .svc-news-card__excerpt ni .svc-news-card__cta en esta versión */

/* ═══════════════════════════════════════════
   6. LOGOS — reutiliza .logo-marquee de inicio.css
   ═══════════════════════════════════════════ */
.svc-logos-section {
    border-top: 1px solid var(--dark-graphite);
}

/* ═══════════════════════════════════════════
   7. CTA
   ─ padding-top 0 porque la sección anterior
     ya entrega el espacio. Grid: copy | btns
   MOBILE-FIRST: h2 con salto de línea normal y tamaño reducido por
   defecto; nowrap solo en desktop (min-width:1024px) — ver nota en
   el header del archivo sobre el bug que esto corrige.
   ═══════════════════════════════════════════ */
.svc-cta {
    border-top: 1px solid var(--dark-graphite);
    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
}

.svc-cta::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,29,37,.09) 0%, transparent 70%);
    bottom: -200px;
    left: 15%;
    pointer-events: none;
}

/* Layout: siempre columna vertical */
.svc-cta__grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-left: 6vw;
    padding-right: 6vw;
}

/* P67 (extensión) — mismo fix que .svc-noticias .eyebrow: esta regla
   tenía su propio tamaño/tracking/color/display, nunca se alineó al
   ajuste original. Ahora hereda .eyebrow de main.css sin excepciones,
   solo con el margen propio de este layout. */
.svc-cta__copy .eyebrow {
    margin-bottom: 1.25rem;
}

.svc-cta__copy h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--white);
    border: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    white-space: normal;
    font-size: clamp(2rem, 8vw, 3rem);
}

.svc-cta__btns {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    align-self: center;
}

/* Botones heredan .btn, .btn-primary, .btn-ghost de inicio.css */
/* Asegurar ancho completo en la columna de botones */
.svc-cta__btns .btn {
    width: 100%;
    justify-content: center;
}

/* ═══════════════════════════════════════════
   TABLET — 768px+
   P16 — el bloque ≥701px que vivía separado (mirror del corte
   original de 700px, ver changelog) se fusiona acá. Confirmado que no
   había ninguna razón de contenido para el valor puntual — mismo
   corte que el resto del archivo.
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {

    .svc-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-cta__btns {
        width: 100%;
        max-width: 320px;
    }

    /* P52 — el modal ya NO vuelve a 2 columnas en desktop, se quitó el
       override que estaba acá (grid-template-columns:1fr 300px,
       height:580px). Ver bloque base arriba — ahora es 1 columna
       apilada en todos los anchos. */

    /* Botón flecha de subservicios: oculto por defecto, aparece al hover */
    .svc-row__open {
        background: transparent;
        opacity: 0;
    }
    .svc-row:hover .svc-row__open {
        opacity: 1;
        background: var(--red);
        border-color: var(--red);
        color: var(--static-white);
        transform: rotate(45deg);
    }

    /* P69 — override de aspect-ratio 4/1 en desktop eliminado: feedback
       real de stakeholders (imagen 1) confirma que se ve mal, se mantiene
       16/9 en todos los anchos (regla base ya cubre esto). */
}

/* ═══════════════════════════════════════════
   DESKTOP — 1024px+
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {

    .svc-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* H2 del CTA en una sola línea — solo cuando hay espacio real */
    .svc-cta__copy h2 {
        white-space: nowrap;
        font-size: clamp(2rem, 4.2vw, 3.4rem);
    }
}