/* ==========================================================
   INDEM LOS CABOS
   SISTEMA VISUAL PÚBLICO GLOBAL
   ========================================================== */

:root {
    --indem-orange: #f39323;
    --indem-orange-light: #ffad45;
    --indem-orange-dark: #c96f0b;
    --indem-orange-soft: rgba(243, 147, 35, 0.14);

    --indem-navy-950: #070c17;
    --indem-navy-900: #0e1525;
    --indem-navy-850: #121a2b;
    --indem-navy-800: #172136;
    --indem-navy-750: #1d283e;
    --indem-navy-700: #273248;

    --indem-white: #ffffff;
    --indem-text: #f8fafc;
    --indem-text-soft: #cbd5e1;
    --indem-text-muted: #94a3b8;

    --indem-border: rgba(255, 255, 255, 0.10);
    --indem-border-strong: rgba(255, 255, 255, 0.17);
    --indem-border-orange: rgba(243, 147, 35, 0.42);

    --indem-surface:
        linear-gradient(
            145deg,
            rgba(27, 37, 57, 0.96),
            rgba(14, 21, 37, 0.94)
        );

    --indem-surface-soft:
        linear-gradient(
            145deg,
            rgba(42, 50, 67, 0.92),
            rgba(27, 34, 50, 0.92)
        );

    --indem-shadow-sm:
        0 8px 22px rgba(0, 0, 0, 0.22);

    --indem-shadow-md:
        0 18px 45px rgba(0, 0, 0, 0.30);

    --indem-shadow-lg:
        0 28px 80px rgba(0, 0, 0, 0.38);

    --indem-glow:
        0 0 28px rgba(243, 147, 35, 0.18);

    --indem-radius-sm: 10px;
    --indem-radius-md: 16px;
    --indem-radius-lg: 24px;
    --indem-radius-xl: 32px;

    --indem-page-width: 1720px;
    --indem-header-offset: 96px;

    --indem-transition:
        180ms ease;
}

/* ==========================================================
   BASE GENERAL
   ========================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--indem-header-offset);
}

body {
    min-width: 320px;
    color: var(--indem-text);
    background-color: var(--indem-navy-950);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
    font-family:
        'Poppins',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    color: #111827;
    background: var(--indem-orange-light);
}

/* ==========================================================
   CONTENEDOR COMÚN DE TODAS LAS PÁGINAS
   ========================================================== */

.public-page {
    position: relative;
    isolation: isolate;

    width: min(
        calc(100% - 32px),
        var(--indem-page-width)
    );

    min-height: calc(100vh - 170px);

    margin-inline: auto;

    padding:
        clamp(28px, 4vw, 64px)
        clamp(4px, 1vw, 18px)
        clamp(64px, 7vw, 110px);
}

.public-page::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(243, 147, 35, 0.14),
            transparent 31%
        ),
        radial-gradient(
            circle at 9% 74%,
            rgba(51, 65, 85, 0.24),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(7, 12, 23, 0.84),
            rgba(7, 12, 23, 0.97)
        ),
        url('../../imagenes/INDEM.PNGFONDO.png')
            center / cover fixed;
}

.public-page > * {
    position: relative;
    z-index: 1;
}

.public-page section[id],
.public-page article[id],
.public-page div[id] {
    scroll-margin-top:
        calc(var(--indem-header-offset) + 16px);
}

/* ==========================================================
   TIPOGRAFÍA
   ========================================================== */

.public-page :where(h1, h2, h3, h4) {
    font-family:
        'Montserrat',
        'Poppins',
        sans-serif;

    font-weight: 800;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.public-page :where(h1) {
    margin:
        0
        0
        clamp(18px, 2vw, 28px);

    color: var(--indem-white);

    font-size:
        clamp(2.55rem, 6vw, 5.8rem);

    line-height: 0.98;
}

.public-page :where(h2) {
    margin:
        0
        0
        clamp(16px, 2vw, 26px);

    color: var(--indem-orange);

    font-size:
        clamp(1.7rem, 3.2vw, 3rem);

    line-height: 1.08;
}

.public-page :where(h3) {
    margin:
        0
        0
        14px;

    color: var(--indem-text);

    font-size:
        clamp(1.08rem, 1.7vw, 1.42rem);

    line-height: 1.24;
}

.public-page :where(p, li, dd) {
    color: var(--indem-text-soft);
    line-height: 1.72;
}

.public-page :where(p) {
    margin:
        0
        0
        1rem;
}

.public-page :where(small) {
    color: var(--indem-text-muted);
}

/* ==========================================================
   PANELES Y TARJETAS COMPARTIDAS
   ========================================================== */

.public-page :where(
    .styled-panel,
    .content-panel,
    .page-panel,
    .section-panel,
    .glass-panel,
    .indem-panel,
    .news-panel,
    .document-panel
) {
    border:
        1px solid var(--indem-border);

    border-radius:
        var(--indem-radius-lg);

    background:
        var(--indem-surface);

    box-shadow:
        var(--indem-shadow-md);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}

.public-page :where(
    .styled-panel,
    .content-panel,
    .page-panel,
    .section-panel
) {
    padding:
        clamp(22px, 3vw, 44px);
}

.public-page :where(
    .card,
    .requisitos-panel,
    .pdf-panel,
    .image-panel,
    .news-card,
    .document-card,
    .article-card,
    .toolbar-btn
) {
    border:
        1px solid var(--indem-border);

    border-radius:
        var(--indem-radius-md);

    box-shadow:
        var(--indem-shadow-sm);

    transition:
        transform var(--indem-transition),
        border-color var(--indem-transition),
        box-shadow var(--indem-transition),
        background var(--indem-transition);
}

@media (hover: hover) {
    .public-page :where(
        .card,
        .requisitos-panel,
        .news-card,
        .document-card,
        .article-card
    ):hover {
        transform: translateY(-4px);

        border-color:
            var(--indem-border-orange);

        box-shadow:
            var(--indem-shadow-md),
            var(--indem-glow);
    }
}

/* ==========================================================
   ENLACES Y BOTONES
   ========================================================== */

.public-page a {
    text-underline-offset: 3px;
}

.public-page :where(
    .btn,
    .button,
    .toolbar-btn,
    .pdf-panel-download a,
    a[class*="-button"],
    button[class*="-button"]
) {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding:
        0.72rem
        1.25rem;

    border:
        1px solid rgba(243, 147, 35, 0.55);

    border-radius:
        999px;

    color:
        #111827;

    background:
        linear-gradient(
            135deg,
            var(--indem-orange-light),
            var(--indem-orange)
        );

    box-shadow:
        0 8px 24px rgba(243, 147, 35, 0.22);

    font-family:
        'Montserrat',
        sans-serif;

    font-weight: 800;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--indem-transition),
        box-shadow var(--indem-transition),
        filter var(--indem-transition);
}

@media (hover: hover) {
    .public-page :where(
        .btn,
        .button,
        .toolbar-btn,
        .pdf-panel-download a,
        a[class*="-button"],
        button[class*="-button"]
    ):hover {
        transform: translateY(-2px);

        filter: brightness(1.06);

        box-shadow:
            0 13px 30px rgba(243, 147, 35, 0.32);
    }
}

.public-page :where(
    a,
    button,
    input,
    select,
    textarea
):focus-visible {
    outline:
        3px solid rgba(243, 147, 35, 0.42);

    outline-offset: 3px;
}

/* ==========================================================
   FORMULARIOS
   ========================================================== */

.public-page :where(
    input,
    select,
    textarea
) {
    width: 100%;
    min-height: 48px;

    padding:
        0.78rem
        1rem;

    border:
        1px solid var(--indem-border-strong);

    border-radius:
        var(--indem-radius-sm);

    color:
        var(--indem-text);

    background:
        rgba(7, 12, 23, 0.72);

    transition:
        border-color var(--indem-transition),
        box-shadow var(--indem-transition);
}

.public-page textarea {
    min-height: 130px;
    resize: vertical;
}

.public-page :where(
    input,
    select,
    textarea
):focus {
    border-color:
        var(--indem-orange);

    box-shadow:
        0 0 0 4px rgba(243, 147, 35, 0.12);

    outline: none;
}

.public-page ::placeholder {
    color:
        rgba(203, 213, 225, 0.66);
}

/* ==========================================================
   TABLAS
   ========================================================== */

.public-page table {
    width: 100%;
    border-collapse: collapse;

    overflow: hidden;

    border:
        1px solid var(--indem-border);

    border-radius:
        var(--indem-radius-md);

    background:
        rgba(14, 21, 37, 0.82);
}

.public-page :where(th, td) {
    padding:
        0.9rem
        1rem;

    border-bottom:
        1px solid var(--indem-border);

    text-align: left;
    vertical-align: top;
}

.public-page th {
    color:
        var(--indem-orange);

    background:
        rgba(243, 147, 35, 0.08);

    font-family:
        'Montserrat',
        sans-serif;

    font-weight: 800;
}

.public-page tbody tr:last-child td {
    border-bottom: 0;
}

/* ==========================================================
   MULTIMEDIA, PDF Y DOCUMENTOS
   ========================================================== */

.public-page :where(
    iframe,
    video,
    img
) {
    border-radius:
        inherit;
}

.public-page iframe {
    max-width: 100%;
}

.public-page :where(
    .pdf-panel-embed,
    .document-preview,
    .media-frame
) {
    overflow: hidden;

    border:
        1px solid var(--indem-border);

    border-radius:
        var(--indem-radius-md);

    background:
        rgba(0, 0, 0, 0.30);
}

/* ==========================================================
   LISTAS
   ========================================================== */

.public-page ul:not([class]) {
    padding-left: 1.35rem;
}

.public-page ul:not([class]) li::marker {
    color:
        var(--indem-orange);
}

/* ==========================================================
   ACORDEONES
   ========================================================== */

.public-page :where(
    details,
    .accordion-item,
    .acc-item
) {
    overflow: hidden;

    border:
        1px solid var(--indem-border);

    border-radius:
        var(--indem-radius-md);

    background:
        rgba(27, 37, 57, 0.72);
}

.public-page summary {
    cursor: pointer;
    color: var(--indem-text);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.public-page details[open] {
    border-color:
        var(--indem-border-orange);

    box-shadow:
        var(--indem-glow);
}

/* ==========================================================
   PÁGINAS BÁSICAS QUE AÚN TENÍAN DISEÑO PROVISIONAL
   ========================================================== */

.public-page--contacto,
.public-page--presupuestos {
    min-height:
        calc(100vh - 190px);

    display: grid;
    align-content: center;

    max-width: 1080px;
}

.public-page--contacto > h2,
.public-page--presupuestos > h2 {
    margin: 0;

    padding:
        clamp(28px, 4vw, 52px)
        clamp(26px, 5vw, 64px)
        20px;

    border:
        1px solid var(--indem-border);

    border-bottom: 0;

    border-radius:
        var(--indem-radius-xl)
        var(--indem-radius-xl)
        0
        0;

    color:
        var(--indem-orange);

    background:
        var(--indem-surface-soft);

    box-shadow:
        var(--indem-shadow-lg);
}

.public-page--contacto > p,
.public-page--presupuestos > p {
    margin: 0;

    padding:
        0
        clamp(26px, 5vw, 64px)
        clamp(30px, 5vw, 58px);

    border:
        1px solid var(--indem-border);

    border-top: 0;

    border-radius:
        0
        0
        var(--indem-radius-xl)
        var(--indem-radius-xl);

    color:
        var(--indem-text-soft);

    background:
        var(--indem-surface-soft);

    box-shadow:
        var(--indem-shadow-lg);

    font-size:
        clamp(1rem, 1.5vw, 1.18rem);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
    :root {
        --indem-header-offset: 78px;
    }

    .public-page {
        width:
            min(calc(100% - 20px), var(--indem-page-width));

        padding-top:
            28px;

        padding-bottom:
            72px;
    }

    .public-page table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .public-page {
        width:
            min(calc(100% - 14px), var(--indem-page-width));

        padding-inline:
            0;
    }

    .public-page :where(
        .styled-panel,
        .content-panel,
        .page-panel,
        .section-panel
    ) {
        padding:
            20px;
    }

    .public-page :where(
        .btn,
        .button,
        .toolbar-btn,
        .pdf-panel-download a,
        a[class*="-button"],
        button[class*="-button"]
    ) {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}