/* =========================================================
   PDA Entornos Seguros - Override de marca sobre skin.css
   Se carga DESPUES de style.css y skin.css.
   Colores verificados por muestreo de pixeles en la presentacion
   oficial "PDA Entornos Seguros" (navy del logo + cian de marca).
   ========================================================= */

@font-face {
    font-family: 'Jost';
    src: url('fonts/Jost-Book.woff2') format('woff2'), url('fonts/Jost-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('fonts/Jost-Medium.woff2') format('woff2'), url('fonts/Jost-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('fonts/Jost-Semi.woff2') format('woff2'), url('fonts/Jost-Semi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('fonts/Jost-Bold.woff2') format('woff2'), url('fonts/Jost-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

:root {
    --pda-navy: #07132b;
    --pda-navy-soft: #0e2142;
    --pda-cyan: #00bcd4;
    --pda-cyan-dark: #0092a6;
}

/* Titulos y acentos de marca (navy en vez del azul-grisaceo por defecto de la plantilla) */
h1, h2, h3, h4, h5, h6, .accordion-list > li > a, .counter .value, .table th, .step-item > span,
.text-list-bold b, .text-list-line li b, .quote .quote-author, .quote, p b, .text-color, .text-color p,
body > nav .icon-links a i {
    color: var(--pda-navy);
}

/* Fondo oscuro de marca: menu, footer, boxed-area */
body > nav.light:not(.menu-transparent), nav.light.menu-transparent.scroll-menu, footer,
.boxed-area.light {
    background-color: var(--pda-navy) !important;
}

/* Acento cian de marca (botones, links, iconos activos) */
.btn-text, .accordion-list > li:hover > a, .cnt-box-top-icon > i, .btn.btn-border,
.icon-links a i, nav:not(.menu-transparent) .lan-menu > li:hover > a,
nav .tab-nav li.active a, nav .tab-nav li:hover a, .menu-inner li:hover > a, .menu-inner li.active > a,
a, .badge {
    color: var(--pda-cyan);
}

nav.light a.btn-border, .dropdown > ul li:hover > a, .dropdown > ul li.active > a,
.menu-cnt > ul > li:hover > a, .menu-cnt > ul > li.active > a {
    color: var(--pda-cyan) !important;
}

.btn, .icon-links-grid a:hover, .icon-links-button a, nav.light a.btn-border:hover,
.btn-border:hover, .menu-transparent .btn:not(.btn-border) {
    background-color: var(--pda-cyan);
    border-color: var(--pda-cyan);
}

.light .btn-border {
    color: var(--pda-cyan) !important;
    border-color: var(--pda-cyan) !important;
}

.btn:not(.btn-border):hover, .icon-links-button a:hover {
    background-color: var(--pda-cyan-dark);
    border-color: var(--pda-cyan-dark);
}

.timeline .badge {
    background-color: var(--pda-cyan);
    color: #fff;
}

/* Tarjeta flotante de verificacion (media-box-down) */
.pda-check-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

    .pda-check-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: rgb(88, 119, 144);
        padding: 4px 0;
    }

        .pda-check-list li i {
            color: var(--pda-cyan);
            font-size: 16px;
        }

        .pda-check-list li b {
            margin-left: auto;
            color: #2fae60;
            font-weight: 700;
        }

.pda-badge-ok {
    display: inline-block;
    background: rgba(47, 174, 96, 0.12);
    color: #2fae60;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

/* Wrapper de imagen + tarjeta flotante de verificacion */
.pda-media-wrap {
    position: relative;
}

.pda-float-card {
    position: absolute;
    right: -20px;
    bottom: -25px;
    width: 250px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, .25);
    padding: 18px 20px;
    z-index: 5;
}

.pda-float-card.pda-float-card--left {
    right: auto;
    left: -20px;
}

@media (max-width: 991px) {
    .pda-float-card {
        position: static;
        width: 100%;
        margin-top: 20px;
    }
}

/* ---------------------------------------------------------------
   FIX: el componente "timeline" de la plantilla es un badge de
   fecha/etiqueta (sin forma definida), no un numero circular. Lo
   convertimos en un circulo numerado para los procesos paso a paso.
   --------------------------------------------------------------- */
.timeline .badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -84px;
}

    .timeline .badge p {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }

/* ---------------------------------------------------------------
   Franja compacta de pasos numerados (seccion "propietarios sin
   intermediacion") - version ligera del timeline, en una sola fila.
   --------------------------------------------------------------- */
.pda-step-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

    .pda-step-row li {
        text-align: center;
    }

    .pda-step-row .pda-step-num {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--pda-cyan);
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
    }

    .pda-step-row p {
        font-size: 0.9em;
        margin: 0;
    }

@media (max-width: 991.98px) {
    .pda-step-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pda-step-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pda-step-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }

        .pda-step-row li {
            text-align: left;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .pda-step-row .pda-step-num {
            margin: 0;
            flex-shrink: 0;
        }
}

/* ---------------------------------------------------------------
   Fila corta de 3 disciplinas ("quien esta detras de PDA")
   --------------------------------------------------------------- */
.pda-disciplinas {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

    .pda-disciplinas i {
        font-size: 36px;
        color: var(--pda-cyan);
    }

    .pda-disciplinas h4 {
        margin: 12px 0 4px;
    }

    .pda-disciplinas p {
        font-size: 0.88em;
        margin: 0;
    }

@media (max-width: 767px) {
    .pda-disciplinas {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   FIX: el <ul> del footer usa <li> con float:left y sin clearfix,
   por lo que su contenedor colapsa a altura 0 y el siguiente
   elemento (iconos sociales) queda superpuesto en vez de debajo.
   --------------------------------------------------------------- */
footer .menu-inner-vertical ul::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------------------------------------------------------------
   Fichas de confianza del hero: centradas en tablet/escritorio,
   se mantienen alineadas a la izquierda en celular (una columna).
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pda-hero-features .cnt-box-top-icon.align-center > i {
        text-align: left;
        margin-left: 1px;
        margin-right: 0;
        display: block;
    }

    .pda-hero-features .cnt-box.align-center .caption {
        text-align: left;
    }
}

/* ---------------------------------------------------------------
   FIX: las tarjetas ".cnt-box.boxed" (fichas con fondo blanco) no
   ocupaban toda la altura de su celda del grid, asi que una ficha
   con titulo de 2 lineas se veia mas alta que las demas. El grid
   ya iguala la altura de ".grid-item" (comportamiento por defecto
   de CSS Grid); aqui hacemos que la tarjeta y su caption llenen
   esa altura para que todas las fichas se vean uniformes.
   --------------------------------------------------------------- */
.grid-item .cnt-box.boxed {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .grid-item .cnt-box.boxed .caption {
        flex: 1 1 auto;
    }

/* ---------------------------------------------------------------
   Etiqueta pequena (eyebrow) arriba de un H1, para nombrar la
   categoria del servicio sin perder un titulo mas emocional.
   --------------------------------------------------------------- */
.pda-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pda-cyan);
    margin: 0 0 10px;
}

/* Honeypot anti-spam: oculto para personas, visible para bots. */
.pda-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Aviso de error en formularios (el theme no trae estilos de alert). */
.pda-alert-warning {
    background: rgba(230, 81, 0, 0.08);
    border: 1px solid rgba(230, 81, 0, 0.35);
    color: #a84400;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* ---------------------------------------------------------------
   FIX: la seccion del video quedaba justo despues del hero, que
   trae la clase ".section-bottom-layer". El theme le quita el
   padding-top a la seccion siguiente (".section-bottom-layer +
   section > .container { padding-top: 0 }") para no duplicar el
   espacio que el hero ya agrega en su propio padding-bottom. Ese
   descuento estaba pensado para la seccion que sigue inmediato al
   hero, no para esta seccion intermedia nueva, asi que se veia
   con mucho menos espacio arriba que abajo. Se restaura el
   padding-top simetrico solo en esta seccion.
   --------------------------------------------------------------- */
.pda-video-section > .container {
    padding-top: 100px !important;
}

/* Overlay de "reproducir" sobre el poster del video, para que se
   entienda que es un video y no solo una imagen. */
.pda-video-wrap {
    position: relative;
}

.pda-video-wrap video {
    display: block;
}

.pda-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(7, 19, 43, 0.25);
    border-radius: 6px;
    transition: background .3s;
}

.pda-video-play:hover {
    background: rgba(7, 19, 43, 0.4);
}

.pda-video-play:after {
    content: "\62";
    font-family: "Icons";
    font-size: 24px;
    color: var(--pda-navy);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.pda-video-wrap.is-playing .pda-video-play {
    display: none;
}