/* ==========================================================================
   Jhosselin Rubio A. — Psicología Cognitiva
   Capa de marca sobre style-friendly.css (plantilla home-3 / "Personal").

   No cambia la estructura ni las clases del tema: solo reasigna la paleta,
   la tipografía y los pocos colores que el tema trae fijados en duro.
   ========================================================================== */

:root {
    --psg-navy: #001C37;
    --psg-yellow: #FFC448;
    --psg-teal: #00B8B8;
    --psg-purple: #4D0E4F;
    --psg-violet: #6D3BE0;
    --psg-green: #25D366;
    --psg-bg: #F8FBFF;
    --psg-text: #4A5568;
    /* Se usa en separadores, migas de pan y listas. Estaba sin declarar, así
       que las reglas que la referenciaban se descartaban en silencio. */
    --psg-border: rgba(0, 28, 55, .14);
}

/* --------------------------------------------------------------------------
   Tipografía de marca
   Principal: Fragille (titulares). Secundaria: Montserrat Regular (cuerpo).
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Fragille";
    /* Subconjunto de 83 glifos: solo lo que usan el titular del hero y el
       cierre del footer. El TTF completo pesaba 103 KB. */
    src: url("../fonts/Fragille-sub.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background-color: var(--psg-bg);
    color: var(--psg-text);
    overflow-x: hidden;
}

/* En pantallas anchas el grid centra el .container con max-width:1300px, lo
   que dejaba ~325px muertos a la izquierda del titular del hero. Solo en ese
   bloque el contenedor ocupa el ancho disponible y arranca con un margen
   proporcional. El resto de secciones conserva el centrado del tema. */
@media (min-width: 1400px) {
    /* Ojo: en home-3 el .container y .mil-hero-main son el MISMO elemento
       (<div class="container mil-hero-main">), no padre e hijo. */
    .mil-hero-3 .container.mil-hero-main {
        max-width: none;
        padding-left: 6vw;
    }
}

/* El tema dimensiona .mil-display4 con calc(1rem + 6vw), una medida pensada
   para el titular corto en inglés del original ("Emma Freeman"). Las palabras
   en español son más largas y se salían del borde en pantallas estrechas, así
   que ahí se reduce la escala y se permite partir palabra. */
/* Nota: el titular del hero NO desborda en móvil. Medido a 390px con JS:
   scrollWidth == clientWidth == 390, el h1 ocupa de 15 a 375px y el texto ya
   fluye en dos líneas. El recorte que aparece en capturas de Chrome headless
   es un artefacto del renderizado, no un fallo de la página, así que aquí no
   se sobreescriben los tamaños del tema. */

/* Fragille es una fuente display: sus dígitos, tildes y ñ están dibujados de
   forma irregular, así que se reserva para los dos titulares de mayor tamaño
   —el nombre del hero y el cierre del footer— donde el carácter de la marca se
   aprecia y el texto es corto. Todo lo demás va en Montserrat. */
h1, h2, h3, h4, h5, h6,
.mil-display1, .mil-display2, .mil-display3, .mil-display4,
.mil-head1, .mil-head2, .mil-head3, .mil-head4, .mil-head5, .mil-head6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: none;
}

.mil-hero-3 .mil-hero-text .mil-display4,
.mil-footer .mil-footer-link {
    font-family: "Fragille", "Montserrat", sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
}

/* El círculo "scroll down" mide 190px y se ancla en bottom:25px del panel
   inferior, por lo que sube sobre la línea del subtítulo y lo pisaba.
   El párrafo se separa para dejarle sitio. */
.mil-hero-3 .mil-hero-main .mil-hero-text .mil-stylized {
    margin-top: 18px;
    margin-bottom: 0;
}

/* La columna es un flex en columna con space-between: espaciador de 120px
   arriba, texto en medio y panel del scroll abajo. Con margin auto vertical
   el texto se reparte el espacio libre y queda centrado frente a la imagen,
   en lugar de quedar pegado arriba. */
@media (min-width: 993px) {
    .mil-hero-3 .mil-hero-main .mil-hero-text {
        margin-top: auto;
        margin-bottom: auto;
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Frases rotativas del hero

   Replican la entrada del logo del preloader: una barra barre el texto de
   izquierda a derecha, y al retirarse desde el lado contrario descubre la
   frase siguiente. Las frases se apilan para que el bloque no dé saltos.
   -------------------------------------------------------------------------- */
/* La caja se ciñe al texto (inline-grid) en vez de ocupar todo el ancho de la
   columna, y las tres frases comparten la misma celda del grid para que
   aparezcan siempre en el mismo sitio y la caja tome la altura de la más alta.
   Así la barra cubre la frase y no el bloque entero. */
/* La caja toma la altura de la frase más larga y las centra en su celda.

   Ojo: main.js trocea el titular (.mil-rubber) e inyecta ~176 .mil-word-span
   como hijos DIRECTOS del <h1>. Al ser este un grid, cada uno generaba su
   propia fila y el bloque crecía a 556px con ~397px de filas vacías debajo,
   dejando la frase 213px por encima del centro. Se apilan todos en la celda
   1/1 para que no aporten filas. */
.psg-hero-phrase {
    position: relative;
    display: grid;
    grid-template-columns: auto;
    justify-items: start;
    align-items: center;
}

.psg-hero-phrase > .mil-word-span {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
}
/* Las frases fluyen dentro del ancho de la columna (no max-content, que las
   sacaba fuera) y comparten celda para aparecer siempre en el mismo punto. */
/* La frase se ciñe a su texto con fit-content acotado al ancho de la columna:
   con width:100% la barra se estiraba 150-250px más allá de la última letra,
   y con max-content el texto se salía de la columna (1050px sobre 722px). */
.psg-hero-phrase .psg-phrase {
    grid-area: 1 / 1;
    justify-self: start;
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    opacity: 0;
    transition: opacity .18s linear;
    pointer-events: none;
}
.psg-hero-phrase .psg-phrase.psg-on {
    opacity: 1;
    pointer-events: auto;
}

/* La barra es un pseudo-elemento de la frase activa, así hereda su caja
   exacta: cubre el texto y no el bloque entero ni la celda del grid.
   El <span class="psg-reveal-box"> del HTML queda sin uso visual. */
.psg-hero-phrase .psg-reveal-box {
    display: none;
}
/* La barra se escala en horizontal en vez de animar el ancho: transform es
   más fiable que width con un absolute anclado, y no depende de cómo resuelva
   el porcentaje el bloque contenedor. */
/* La barra se extiende un poco fuera de la caja de la frase: las descendentes
   ("p", "y", "j") caen ~10px por debajo del bloque y asomaban bajo la barra. */
.psg-hero-phrase .psg-phrase::after {
    content: "";
    position: absolute;
    z-index: 9;
    top: -4px;
    bottom: -14px;
    left: -4px;
    right: -4px;
    background-color: var(--psg-yellow);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
}
.psg-hero-phrase .psg-phrase.psg-sweep-in::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform .42s cubic-bezier(.7, 0, .3, 1);
}
.psg-hero-phrase .psg-phrase.psg-sweep-out::after {
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .42s cubic-bezier(.7, 0, .3, 1);
}

/* La barra alterna entre los dos colores de la marca */
.psg-hero-phrase .psg-phrase.psg-c0::after { background-color: var(--psg-yellow); }
.psg-hero-phrase .psg-phrase.psg-c1::after { background-color: var(--psg-teal); }

.mil-stylized,
.mil-text-sm, .mil-text-md, .mil-text-lg, .mil-text-xl,
.mil-btn, .mil-footer-menu a, .mil-main-menu ul li a {
    font-family: "Montserrat", sans-serif;
}

.mil-stylized {
    font-weight: 600;
    letter-spacing: .18em;
}

.mil-btn { font-weight: 600; }

/* --------------------------------------------------------------------------
   Paleta: el tema usa m1..m4 (neutros) y a1/a2 (acentos)
   -------------------------------------------------------------------------- */
.mil-m1 { color: var(--psg-navy); }
.mil-m2 { color: var(--psg-text); }
.mil-a1 { color: var(--psg-yellow); }
.mil-a2 { color: var(--psg-teal); }

.mil-m1-bg { background-color: var(--psg-navy); }
.mil-a1-bg { background-color: var(--psg-yellow); }
.mil-a2-bg { background-color: var(--psg-teal); }
.mil-g-m3  { background-color: var(--psg-navy); }

.mil-deco-text { border-left-color: var(--psg-yellow); }

/* Titulares y textos base del tema en azul noche */
.mil-head1, .mil-head2, .mil-head3, .mil-head4,
.mil-display1, .mil-display2, .mil-display3, .mil-display4 { color: var(--psg-navy); }

/* --------------------------------------------------------------------------
   Hero 3: el tema fija el fondo de la escena en verde y el panel en gris
   -------------------------------------------------------------------------- */
.mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame .mil-scene-frame {
    background-color: var(--psg-teal);
}
.mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame .mil-scene-frame:before {
    background-color: var(--psg-bg);
}
.mil-hero-3 .mil-hero-main .mil-bottom-panel {
    background-color: var(--psg-bg);
}
.mil-hero-3 .mil-hero-main .mil-bottom-panel:before {
    background-color: var(--psg-bg);
}
/* La capa 3 es el recorte PNG de la psicóloga sobre el turquesa. El tema le
   aplica object-fit:cover, que la amplía y le corta la cabeza y los pies: se
   ajusta entera y anclada al pie del marco. El velo oscuro se retira para que
   el turquesa quede limpio. */
.mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame .mil-scene-frame .mil-scene .mil-image-wrap img.mil-parallax-3 {
    object-fit: contain;
    object-position: bottom center;
    margin-top: 0;
}
.mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame .mil-scene-frame .mil-overlay {
    opacity: 0;
}

/* Escena del CTA: mismo tratamiento, figura recortada sobre el turquesa.
   El tema pinta el turquesa en .mil-live-image-frame, no en .mil-scene-frame. */
.mil-half-container .mil-image-box .mil-live-image-frame {
    background-color: var(--psg-teal);
}
.mil-live-image-frame .mil-scene-frame { background-color: var(--psg-teal); }
.mil-live-image-frame .mil-scene-frame .mil-overlay { opacity: 0; }

/* La capa 3 es el recorte PNG: con el object-fit:cover del tema se amplía y
   se corta por abajo. Se ajusta entera y anclada al pie del marco. */
.mil-half-container .mil-image-box .mil-live-image-frame .mil-scene-frame .mil-scene .mil-image-wrap img.mil-parallax-3 {
    object-fit: contain;
    object-position: bottom center;
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Botones y enlaces
   -------------------------------------------------------------------------- */
.mil-btn {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    background-color: var(--psg-navy);
    color: #fff;
}
.mil-btn.mil-a2 {
    background-color: var(--psg-teal);
    color: #fff;
}
.mil-btn.mil-a1 {
    background-color: var(--psg-yellow);
    color: var(--psg-navy);
}
.mil-btn.mil-btn-border {
    background-color: transparent;
    color: var(--psg-navy);
    box-shadow: 0 0 0 2px var(--psg-navy) inset;
}
.mil-btn.mil-btn-border:hover {
    background-color: var(--psg-navy);
    color: #fff;
}
.mil-btn-wa {
    background-color: var(--psg-green) !important;
    color: #fff !important;
}

.mil-text-link.mil-a2 { color: var(--psg-teal); }

/* --------------------------------------------------------------------------
   Grilla de servicios (work cards)
   El tema tiñe el hover con su verde rgba(55,204,141,.7) y pone la barra de
   descripción en #353639; ambos pasan a la paleta de la marca.
   -------------------------------------------------------------------------- */
.mil-work-card .mil-hover-overlay {
    background-color: rgba(0, 184, 184, .72);
}
.mil-work-card .mil-hover-overlay .mil-descr {
    background-color: var(--psg-navy);
}
.mil-work-card .mil-hover-overlay .mil-stylized-btn.mil-a1 {
    color: var(--psg-yellow);
}

/* El título va sobre la barra azul noche: la regla de marca lo pintaba del
   mismo color y quedaba invisible. */
.mil-work-card .mil-hover-overlay .mil-descr .mil-text-frame .mil-head4 {
    color: #fff;
}
.mil-work-card .mil-hover-overlay .mil-descr .mil-text-frame .mil-text-sm {
    color: rgba(255, 255, 255, .8);
}

/* La barra reservaba mucho alto vacío. El alto no lo marca el texto sino el
   bloque "Ver más": .mil-stylized-btn mide 120x120 fijos y, al ser .mil-descr
   un flex centrado, esa altura arrastra toda la barra. Se reduce el botón y
   se compacta el texto, en todas las tarjetas por igual. */
.mil-work-card .mil-hover-overlay .mil-descr .mil-text-frame {
    padding: 18px 30px;
}
.mil-work-card .mil-hover-overlay .mil-descr .mil-text-frame .mil-head4 {
    font-size: 20px;
    margin-bottom: 6px;
}
.mil-work-card .mil-hover-overlay .mil-descr .mil-stylized-btn {
    width: 86px;
    height: 86px;
    padding: 14px 0;
}
.mil-work-card .mil-hover-overlay .mil-descr .mil-stylized-btn i {
    font-size: 24px;
    margin-right: 14px;
}

/* --------------------------------------------------------------------------
   Iconbox de servicios
   -------------------------------------------------------------------------- */
/* El tema mete el icono en un rectángulo de color plano. Se sustituye por un
   círculo suave, que sienta mejor a unos iconos de línea. El scale del hover
   lo sigue aportando el tema. */
.mil-iconbox .mil-hover-frame {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background-color: rgba(0, 184, 184, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.mil-iconbox.mil-hover:hover .mil-hover-frame {
    background-color: rgba(255, 196, 72, .28);
}
.mil-iconbox .mil-hover-frame img {
    width: 60px;
    height: 60px;
    margin-bottom: 0 !important;
}
.mil-iconbox .mil-head4 {
    font-size: 22px;
}

/* Puntos del slider de testimonios: el tema marca el activo con su verde.
   El inactivo necesita un gris con cuerpo; --psg-border (10% de alfa) queda
   casi invisible en un punto de 8px. */
.mil-sr-pagination .swiper-pagination-bullet {
    background-color: rgba(0, 28, 55, .22);
}
.mil-sr-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--psg-teal);
}

/* --------------------------------------------------------------------------
   Portada circular del "about" y retratos de reseñas
   -------------------------------------------------------------------------- */
.mil-portrait img { object-fit: cover; }

/* --------------------------------------------------------------------------
   Preloader y barra de progreso
   -------------------------------------------------------------------------- */
.mil-preloader {
    background: linear-gradient(0deg, var(--psg-navy) 0%, #05294a 100%);
}
/* El tema fija Anton y mayúsculas en los <p> del preloader con una regla más
   específica que .mil-head1, de ahí el selector con el contenedor. */
.mil-preloader .mil-preloader-animation .mil-pos-abs p.mil-head1,
.mil-preloader .mil-animation-1 p,
.mil-preloader .mil-animation-2 p {
    color: #fff;
    font-family: "Fragille", "Montserrat", sans-serif;
    font-weight: 400;
    text-transform: none;
    font-size: calc((1rem + 2.5vw) * .85);
}

/* Cada palabra de la frase en un color de la marca. El selector iguala al del
   tema (.mil-preloader .mil-preloader-animation .mil-pos-abs p) y añade la
   clase, porque si no el blanco de arriba gana por especificidad. */
.mil-preloader .mil-preloader-animation .mil-pos-abs p.mil-a1 { color: var(--psg-yellow); }
.mil-preloader .mil-preloader-animation .mil-pos-abs p.mil-a2 { color: var(--psg-teal); }

/* La barra de revelado del preloader viene en el naranja del tema */
.mil-preloader .mil-preloader-animation .mil-pos-abs .mil-reveal-frame .mil-reveal-box {
    background-color: var(--psg-yellow);
}

/* El cierre del preloader muestra el logo en lugar del dominio */
.mil-preloader .mil-preloader-logo {
    width: clamp(187px, 29vw, 357px);
    height: auto;
    display: inline-block;
    vertical-align: middle;
}
.mil-progress { background-color: var(--psg-teal); }

/* --------------------------------------------------------------------------
   Barra superior y menú del tema
   -------------------------------------------------------------------------- */
/* El tema reserva 100x120px para un logo icónico; el de la marca es una
   lockup horizontal, así que el contenedor pasa a ancho automático para que
   no se recorte ni asome su fondo. */
.mil-top-panel .mil-logo {
    width: auto;
    background: none;
}
.mil-logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* Botones circulares de la barra: el tema los deja en gris carbón con el
   icono naranja (#353639 / #FEAF62), fuera de la paleta de la marca. */
.mil-top-panel .mil-buttons-tp-frame {
    background-color: var(--psg-bg);
}
.mil-top-panel .mil-buttons-tp-frame .mil-buttons .mil-tp-btn {
    background-color: var(--psg-navy);
    color: var(--psg-yellow);
}
.mil-top-panel .mil-buttons-tp-frame .mil-buttons .mil-tp-btn:hover {
    background-color: var(--psg-teal);
    color: #fff;
}
.mil-menu-btn span,
.mil-menu-btn span:before,
.mil-menu-btn span:after {
    background-color: var(--psg-yellow);
}

/* Círculo "scroll down" del hero: en home-3 el marco es transparente a
   propósito (a diferencia de hero-1/2), así que solo se recolorean la flecha
   y el texto, que el tema dejaba en gris carbón y naranja. */
.mil-circle-text-frame .mil-circle-text svg text {
    fill: var(--psg-navy);
}
.mil-circle-text-frame .mil-circle-text .mil-arrow {
    background-color: var(--psg-navy);
}
.mil-circle-text-frame .mil-circle-text .mil-arrow i {
    color: var(--psg-yellow);
}
.mil-top-panel .mil-phone { color: var(--psg-navy); }
.mil-tp-btn { color: var(--psg-navy); }
/* Ojo: .mil-menu-frame es un overlay a pantalla completa (z-index 998) que el
   tema mantiene transparente hasta abrir el menú. Darle un color de fondo aquí
   taparía toda la página, así que el color va en .mil-menu-window, que es el
   panel que efectivamente se desliza. */
.mil-menu-frame .mil-menu-window {
    background-color: #fff;
}
.mil-menu-frame .mil-menu-window .mil-menu-section,
.mil-menu-frame .mil-menu-window .mil-blog-section,
.mil-menu-frame .mil-menu-window .mil-social-section {
    border-top-color: var(--psg-border);
}

/* Los enlaces vienen en Anton y en mayúsculas apretadas: se pasan a Montserrat
   con caja normal y más aire entre ellos. */
.mil-main-menu li a {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--psg-navy);
}
.mil-main-menu > li {
    margin-bottom: 22px;
}
.mil-main-menu li a:hover,
.mil-main-menu li.mil-current > a {
    color: var(--psg-teal);
}

/* Submenú de servicios. El selector iguala al del tema
   (.mil-main-menu li ul li a), que si no gana por especificidad y lo deja en
   Outfit, mayúsculas y 12px. */
.mil-main-menu li ul li a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--psg-text);
}
.mil-main-menu li ul li a:hover {
    color: var(--psg-teal);
}
.mil-main-menu li ul li:hover {
    border-left-color: var(--psg-teal);
}

.mil-menu-frame .mil-head4,
.mil-menu-frame .mil-head6 { color: var(--psg-navy); }

/* Franja inferior de redes: el tema la pinta de verde (#37CC8D) */
.mil-menu-frame .mil-menu-window .mil-social-section {
    background-color: var(--psg-navy);
}
.mil-menu-frame .mil-menu-window .mil-social-section li a { color: #fff; }
.mil-menu-frame .mil-menu-window .mil-social-section li a:hover { color: var(--psg-yellow) !important; }

/* Flechas del carrusel del menú: naranja del tema -> amarillo de marca */
.mil-sb-nav .mil-slider-btn {
    background-color: var(--psg-yellow);
    color: var(--psg-navy);
}
.mil-sb-nav .mil-slider-btn.swiper-button-disabled {
    background-color: var(--psg-border);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* El footer de home-3 es claro: su fondo lo da el degradado de .mil-footer:before
   sobre el fondo de la página. Ponerle un color sólido y los textos en blanco
   lo desfiguraba, así que aquí solo se reasignan los acentos. */
.mil-footer .mil-footer-link { color: var(--psg-navy); }
/* El selector iguala al del tema (.mil-footer-menu-frame .mil-footer-menu li a),
   que si no gana por especificidad y deja el hover en su verde #37CC8D. */
.mil-footer-menu-frame .mil-footer-menu li a { color: var(--psg-navy); }
.mil-footer-menu-frame .mil-footer-menu li a:hover { color: var(--psg-teal); }
.mil-footer-menu-frame .mil-social li a { color: var(--psg-navy); }
.mil-footer .mil-social li a { color: var(--psg-navy); }
.mil-footer .mil-social li a:hover { color: var(--psg-teal); }
.mil-footer-contact:hover .mil-stylized-btn { background-color: var(--psg-teal); }

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp (único añadido fuera del tema)
   -------------------------------------------------------------------------- */
.psg-wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 950;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--psg-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
    transition: transform .25s;
}
.psg-wa-float:hover { transform: scale(1.08); color: #fff; }

/* ==========================================================================
   RESPONSIVE
   Ajustes medidos en 360 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920 / 2560.
   Ninguna anchura desborda; lo que se corrige aquí son proporciones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Monitores grandes (>= 1800px)
   El titular llegaba a 100px y el CTA a 1024px de alto.
   -------------------------------------------------------------------------- */
@media (min-width: 1800px) {
    .mil-hero-3 .mil-hero-text .mil-display4 {
        font-size: clamp(64px, 4.2vw, 88px);
    }
    .mil-half-container .mil-text-box {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .mil-hero-3 .container.mil-hero-main {
        padding-left: 5vw;
    }
}

/* --------------------------------------------------------------------------
   Portátiles y monitores estándar (1200-1399px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .mil-hero-3 .mil-hero-text .mil-display4 {
        font-size: clamp(46px, 5vw, 66px);
    }
}

/* --------------------------------------------------------------------------
   Laptops pequeñas (993-1199px)
   La columna de texto quedaba estrangulada (414px frente a 580px de imagen).
   -------------------------------------------------------------------------- */
@media (min-width: 993px) and (max-width: 1199px) {
    .mil-hero-3 .mil-hero-text .mil-display4 {
        font-size: clamp(38px, 4.6vw, 52px);
    }
    .mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame {
        width: 48vw;
    }
    .mil-iconbox .mil-hover-frame {
        width: 104px;
        height: 104px;
    }
    .mil-iconbox .mil-hover-frame img {
        width: 50px;
        height: 50px;
    }
}

/* --------------------------------------------------------------------------
   Tablets (max 992px)
   Era el peor caso: hero de 1297px de alto con la imagen a 812px y el
   titular a 77px. El tema ya apila las columnas aquí.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .mil-hero-3 .mil-hero-text .mil-display4 {
        font-size: clamp(34px, 6.4vw, 54px);
    }
    /* El bloque de texto deja de repartirse el espacio: ya no hay dos columnas */
    .mil-hero-3 .mil-hero-main .mil-hero-text {
        margin-top: 0;
        margin-bottom: 0;
        padding: 60px 0 40px;
        text-align: left;
    }
    /* La escena pasaba de 812px de alto; se acota a una proporción sensata */
    .mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame {
        padding-bottom: 92%;
    }
    .mil-half-container .mil-text-box {
        padding-top: 90px;
        padding-bottom: 90px;
    }
    /* Las frases del hero se centran en su celda también apiladas */
    .psg-hero-phrase {
        align-items: start;
    }
}

/* --------------------------------------------------------------------------
   Móviles (max 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .mil-hero-3 .mil-hero-text .mil-display4 {
        font-size: clamp(30px, 8.4vw, 40px);
    }
    .mil-hero-3 .mil-hero-main .mil-hero-text {
        padding: 40px 0 30px;
    }
    .mil-hero-3 .mil-hero-main .mil-image-half .mil-image-frame {
        padding-bottom: 104%;
    }
    /* El círculo del iconbox ocupaba 128px fijos en una columna de 330px */
    .mil-iconbox .mil-hover-frame {
        width: 92px;
        height: 92px;
        margin-bottom: 22px;
    }
    .mil-iconbox .mil-hover-frame img {
        width: 44px;
        height: 44px;
    }
    .mil-iconbox .mil-head4 {
        font-size: 19px;
    }
    /* El menú del footer apilaba menú y redes en 501px de alto */
    .mil-footer-menu-frame .mil-footer-menu {
        flex-wrap: wrap;
        gap: 6px 26px;
        margin-bottom: 30px;
    }
    .mil-footer-menu-frame .mil-footer-menu li {
        margin-right: 0;
    }
    .mil-footer .mil-footer-link {
        font-size: clamp(34px, 11vw, 48px);
    }
    .mil-footer.mil-p-160-160 {
        padding-top: 90px;
        padding-bottom: 90px;
    }
    /* Datos de contacto: el teléfono y el email se salían de escala */
    .mil-head3 {
        font-size: 24px;
    }
    /* Botón flotante algo menor para no tapar contenido */
    .psg-wa-float {
        width: 52px;
        height: 52px;
        font-size: 24px;
        right: 16px;
        bottom: 16px;
    }
}

/* --------------------------------------------------------------------------
   Móviles estrechos (max 400px)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .mil-iconbox .mil-hover-frame {
        width: 84px;
        height: 84px;
    }
    .mil-iconbox .mil-hover-frame img {
        width: 40px;
        height: 40px;
    }
    .mil-review {
        padding: 22px;
    }
}

/* ==========================================================================
   PAGINAS DE SERVICIO
   ========================================================================== */
.psg-service-hero {
    padding: 200px 0 60px;
}
.psg-service-hero .mil-display2 {
    font-family: "Fragille", "Montserrat", sans-serif;
    font-weight: 400;
    color: var(--psg-navy);
}
.psg-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.psg-breadcrumbs li + li::before {
    content: "/";
    margin-right: 10px;
    color: var(--psg-border);
}
.psg-breadcrumbs a { color: var(--psg-text); }
.psg-breadcrumbs a:hover { color: var(--psg-teal); }
.psg-breadcrumbs li:last-child { color: var(--psg-navy); font-weight: 600; }

.psg-service-cover {
    border-radius: 22px;
    overflow: hidden;
    max-height: 460px;
}
.psg-service-cover img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
}

.psg-service-aside {
    background: #fff;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 8px 30px rgba(0, 28, 55, .06);
}

.psg-otros-servicios {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--psg-border);
}
.psg-otros-servicios li { border-bottom: 1px solid var(--psg-border); }
.psg-otros-servicios a {
    display: block;
    padding: 22px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--psg-navy);
    transition: color .25s, padding-left .25s;
}
.psg-otros-servicios a:hover {
    color: var(--psg-teal);
    padding-left: 14px;
}

@media (max-width: 992px) {
    .psg-service-hero { padding: 150px 0 40px; }
    .psg-service-cover img { height: 300px; }
}
@media (max-width: 576px) {
    .psg-service-hero { padding: 120px 0 30px; }
    .psg-service-cover img { height: 220px; }
    .psg-service-aside { padding: 26px; }
    .psg-otros-servicios a { font-size: 17px; }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES
   Sigue el patron tipografico del bloque "service" del tema (numero en acento
   + mil-head4 + mil-text-md). Lo unico propio es el despliegue animado, que
   Pixy no trae en ninguna de sus paginas.
   ========================================================================== */
.psg-faq-item {
    border-bottom: 1px solid var(--psg-border);
    padding-bottom: 6px;
    margin-bottom: 30px;
}

.psg-faq-q {
    position: relative;
    margin: 0;
    padding: 6px 54px 6px 0;
    cursor: pointer;
    color: var(--psg-navy);
    transition: color .25s;
}
.psg-faq-q:hover,
.psg-faq-item.psg-open .psg-faq-q {
    color: var(--psg-teal);
}
.psg-faq-q:focus-visible {
    outline: 2px solid var(--psg-teal);
    outline-offset: 6px;
}

/* El indicador es un signo +/- dibujado con dos trazos, sin icono extra */
.psg-faq-q::before,
.psg-faq-q::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 17px;
    height: 2px;
    background-color: currentColor;
    transition: transform .35s cubic-bezier(.7, 0, .3, 1);
}
/* Cerrada: los dos trazos forman un "+". Abierta: el vertical gira a
   horizontal y queda un "−". */
.psg-faq-q::after {
    transform: rotate(-90deg);
}
.psg-faq-item.psg-open .psg-faq-q::after {
    transform: rotate(0deg);
}

.psg-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.7, 0, .3, 1);
}
.psg-faq-a p {
    margin: 0;
    padding: 18px 54px 22px 0;
}

@media (max-width: 576px) {
    .psg-faq-item { margin-bottom: 22px; }
    .psg-faq-q { padding-right: 40px; font-size: 19px; }
    .psg-faq-q::before,
    .psg-faq-q::after { right: 2px; width: 14px; }
    .psg-faq-a p { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Bloque "Sobre mí" (patron mil-half-container de team-frl.html)
   El tema pinta la caja mil-g-m1 con un degradado gris carbon; pasa al azul
   noche de la marca. La firma necesita ancho propio: el tema solo la
   dimensiona bajo .mil-about-short, selector que aqui ya no existe.
   -------------------------------------------------------------------------- */
.mil-half-container .mil-text-box.mil-g-m1:before {
    background: linear-gradient(308.26deg, var(--psg-navy) 0%, #062E52 100%);
}

/* Sobre la caja oscura el titular heredaba el azul noche de la regla global de
   titulares y quedaba invisible; solo se veía el span en amarillo. */
.mil-half-container .mil-text-box.mil-g-m1 .mil-display3,
.mil-half-container .mil-text-box.mil-g-m1 .mil-display3 .mil-word-span,
.mil-half-container .mil-text-box.mil-g-m1 .mil-display3 .mil-letter-span {
    color: #fff;
}
.mil-half-container .mil-text-box.mil-g-m1 .mil-display3 .mil-a1,
.mil-half-container .mil-text-box.mil-g-m1 .mil-display3 .mil-a1 .mil-word-span,
.mil-half-container .mil-text-box.mil-g-m1 .mil-display3 .mil-a1 .mil-letter-span {
    color: var(--psg-yellow);
}

/* El texto de la caja acaba 124px antes del borde por el padding del tema, así
   que a 70px la palabra más larga se cortaba contra la imagen. */
.mil-half-container .mil-text-box .mil-display3 {
    font-size: clamp(34px, 3.1vw, 58px);
    line-height: 1.08;
}

.mil-half-container .mil-text-box .mil-signature {
    width: 160px;
    height: auto;
    display: block;
}

/* Sobre la caja oscura el texto y el filete del deco-text van en claro */
.mil-half-container .mil-text-box.mil-g-m1 .mil-deco-text {
    border-left-color: var(--psg-yellow);
    color: rgba(255, 255, 255, .84);
}
.mil-half-container .mil-text-box.mil-g-m1 .mil-stylized {
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 992px) {
    .mil-half-container .mil-text-box .mil-signature { width: 130px; }
}

/* --------------------------------------------------------------------------
   Barra superior en móvil (<= 500px)

   El tema reescribe aquí la píldora y los botones: les da fondo #353639,
   ancho 50px sin alto, y padding lateral. El resultado es un círculo
   deformado y fuera de la paleta. Se corrige manteniendo la proporción.
   -------------------------------------------------------------------------- */
@media (max-width: 500px) {
    .mil-top-panel {
        background-color: #fff;
        padding: 0 14px 0 0;
    }

    .mil-top-panel .mil-logo {
        height: 72px;
        padding: 0 14px;
    }
    .mil-top-panel .mil-logo img {
        height: 34px;
    }

    .mil-top-panel .mil-buttons-tp-frame {
        background-color: var(--psg-bg);
        border-radius: 999px;
        padding: 6px;
        gap: 6px;
    }

    /* El tema fija width:50px sin height: el círculo salía ovalado. */
    .mil-top-panel .mil-buttons-tp-frame .mil-buttons .mil-tp-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex: 0 0 44px;
        margin: 0;
        border-radius: 50%;
        background-color: var(--psg-navy);
        color: var(--psg-yellow);
    }
    .mil-top-panel .mil-buttons-tp-frame .mil-buttons .mil-tp-btn i {
        font-size: 18px;
    }

    /* Las tres barras del menú hamburguesa, centradas dentro del círculo */
    .mil-top-panel .mil-buttons-tp-frame .mil-buttons .mil-tp-btn .mil-menu-btn {
        padding: 0;
        height: auto;
        width: 100%;
    }
    .mil-menu-btn span,
    .mil-menu-btn span:before,
    .mil-menu-btn span:after {
        width: 18px;
        height: 2px;
        background-color: var(--psg-yellow);
    }
}

/* --------------------------------------------------------------------------
   Scroll en móvil

   ScrollSmoother queda desactivado en táctil: en móvil el scroll nativo es
   más fluido que el emulado por JavaScript, y evita el efecto de arrastre.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    #smooth-wrapper,
    #smooth-content {
        transform: none !important;
        position: static !important;
        height: auto !important;
    }
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   Área táctil de los puntos del slider

   Los bullets de Swiper miden 8x8 px y se solapan entre sí: en móvil son
   imposibles de acertar con el dedo (Lighthouse lo marca como fallo de SEO).
   Se amplía la zona sensible con un ::after invisible de 44x44, que es el
   mínimo recomendado, sin tocar el tamaño visible del punto.
   -------------------------------------------------------------------------- */
.mil-sr-pagination .swiper-pagination-bullet {
    position: relative;
}
.mil-sr-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
/* Separación entre puntos para que las zonas táctiles no se solapen */
.mil-sr-pagination .swiper-pagination-bullet {
    margin: 0 16px !important;
}