/*
 * Estilos propios del portal institucional (no forman parte de Tabler).
 * Aquí viven los pequeños ajustes de diseño que no son utilidades genéricas:
 * los colores de marca, el header con el logo en diagonal, el hero diagonal
 * de la portada y el botón angular.
 */

/*
 * Colores de marca (tomados del logo oficial: public/assets/img/logo_ccpp.png).
 * Se sobreescribe --tblr-primary y sus derivados: Tabler recalcula
 * automáticamente los tonos claros/oscuros (-lt, -darken) a partir de esta
 * variable, así que también cambian los botones y estados activos del panel
 * administrativo, no solo el sitio público.
 */
:root {
    --ccpp-navy: #2c3a5d;
    --ccpp-green: #1c8a4b;

    --tblr-brand: var(--ccpp-navy);
    --tblr-primary: var(--ccpp-navy);
    --tblr-primary-rgb: 44, 58, 93;
    --tblr-primary-lt-rgb: 234, 235, 239;
}

/*
 * Fuerza que la barra de scroll vertical esté siempre presente (aunque no
 * haga falta), para que el ancho de la página sea siempre el mismo. Sin
 * esto, una página "corta" (sin scroll) mide unos píxeles más de ancho que
 * una página "alta" (con scroll), y el contenido se ve desplazado entre
 * una y otra.
 *
 * overflow-x se define en el mismo elemento (html) junto con el anterior,
 * como salvaguarda contra elementos con ángulos/recortes (clip-path, skew)
 * que puedan sobresalir unos píxeles de su caja.
 */
html {
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Logo dentro del sidebar oscuro del panel administrativo */
.admin-brand-logo {
    height: 40px;
    width: auto;
    background: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Franja superior de contacto */
.site-topbar {
    background: #0d1526;
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
}

.site-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding: .5rem clamp(1rem, 4vw, 3rem);
}

.site-topbar__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.site-topbar__item i {
    color: var(--ccpp-green);
}

/* Header */
.site-header {
    background: linear-gradient(100deg, #0d1526 0%, var(--ccpp-navy) 55%, #4a5f8f 100%);
    min-height: 84px;
}

/* Variante "flotante": el header queda transparente sobre la imagen del
   hero (portada), con un degradado oscuro que baja desde arriba para que
   el texto del menú siga siendo legible sin taparla del todo. */
.hero-stack {
    position: relative;
}

.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

.site-header--overlay .navbar-collapse {
    border: 0 !important;
    box-shadow: none !important;
}

.site-header__logo {
    display: flex;
    align-items: center;
    background: #fff;
    padding: .75rem 3.5rem .75rem 1.5rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 45px) 100%, 0 100%);
    margin-right: -2.5rem;
    position: relative;
    z-index: 2;
}

.site-header__logo img {
    height: 56px;
    width: auto;
    display: block;
}

.site-header__nav-area {
    padding: 0 0 0 3rem;
    gap: 1.5rem;
}

.site-header__nav {
    gap: 1.75rem;
}

.site-header__nav .nav-link {
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
    padding: .5rem 0;
    background: transparent !important;
    border: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

.site-header__nav .nav-item.active .nav-link,
.site-header__nav .nav-link:hover,
.site-header__nav .nav-link:focus {
    color: #fff;
    background: transparent !important;
}

/* Caja sólida en ángulo con el teléfono y el botón, en contraste con
   los links del menú (que quedan totalmente transparentes) */
.site-header__cta-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(120deg, var(--ccpp-navy) 0%, #0d1526 100%);
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0% 100%);
    padding: .85rem clamp(1.25rem, 4vw, 3rem) .85rem 2.5rem;
}

.site-header__phone {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
}

.site-header__phone-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ccpp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.site-header__phone-number {
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
}

.site-header__phone-label {
    font-size: .72rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.2;
    white-space: nowrap;
}

.btn-angular--sm {
    padding: .55rem 1.5rem;
    font-size: .75rem;
}

@media (max-width: 991.98px) {
    .site-header__logo {
        clip-path: none;
        margin-right: 0;
        padding: .75rem 1.25rem;
    }

    .site-header__logo img {
        height: 44px;
    }

    .site-header__nav-area {
        padding: 1rem 1.25rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .site-header__nav {
        flex-direction: column;
        gap: .5rem;
    }

    .site-header__cta-box {
        width: 100%;
        justify-content: space-between;
        clip-path: none;
        padding: .85rem 1.25rem;
    }
}

/* Slider de portada (carrusel con imágenes subidas desde el admin) */
.hero-carousel .carousel-item {
    min-height: 560px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--ccpp-navy);
}

.hero-carousel .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(4, 8, 20, .4) 0%, rgba(13, 21, 38, .25) 35%, rgba(44, 58, 93, .12) 65%, rgba(74, 95, 143, 0) 100%);
}

.hero-carousel__slide-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 560px;
}

.hero-carousel .carousel-indicators {
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .hero-carousel .carousel-item,
    .hero-carousel__slide-inner {
        min-height: 0;
        padding: 3rem 0;
    }
}

/* Hero de la portada (respaldo cuando no hay slides configurados) */
.hero-diagonal {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #0d1526 0%, var(--ccpp-navy) 45%, #4a5f8f 100%);
}

.hero-diagonal__icon {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-panel {
    position: relative;
    max-width: 620px;
    padding: 3rem 2.5rem;
    background: rgba(11, 17, 31, 0.55);
    border-left: 4px solid var(--ccpp-green);
    transform: skewX(-8deg);
}

.hero-panel > * {
    transform: skewX(8deg);
}

.hero-panel__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ccpp-green);
    margin-bottom: .75rem;
}

.hero-panel__title {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.hero-panel__subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1.75rem;
}

/* Botón angular (recorte en paralelogramo) */
.btn-angular {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2.25rem;
    background: var(--ccpp-green);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .03em;
    text-decoration: none;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
    transition: background-color .2s ease;
}

.btn-angular:hover,
.btn-angular:focus {
    background: #156b3a;
    color: #fff;
}

@media (max-width: 767.98px) {
    .hero-diagonal {
        min-height: 0;
        padding: 3rem 0;
    }

    .hero-diagonal__icon {
        display: none;
    }

    .hero-panel {
        max-width: 100%;
        border-left: none;
        border-top: 4px solid var(--ccpp-green);
        transform: none;
    }

    .hero-panel > * {
        transform: none;
    }

    .hero-panel__title {
        font-size: 2rem;
    }

    .btn-angular {
        clip-path: none;
        border-radius: 4px;
    }
}