/**
 * Tulkio
 * --------------------------------------------------------------------------
 * CSS global de la aplicación.
 *
 * Incluye:
 * - Variables visuales
 * - Tipografía
 * - Layout general
 * - Navbar
 * - Marca
 * - Hero
 * - Botones
 * - Cards
 * - Secciones
 * - Footer
 * - CMP / consentimiento
 * - Responsive
 *
 * Los estilos específicos de calculadoras vivirán en:
 *
 * /assets/css/tools.css
 * --------------------------------------------------------------------------
 */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {

    /* Marca */
    --tulkio-primary: #2563eb;
    --tulkio-primary-dark: #1d4ed8;
    --tulkio-primary-light: #eff6ff;

    --tulkio-secondary: #0f172a;

    /* Texto */
    --tulkio-text: #1e293b;
    --tulkio-text-muted: #64748b;
    --tulkio-text-light: #94a3b8;

    /* Fondos */
    --tulkio-bg: #ffffff;
    --tulkio-bg-soft: #f8fafc;
    --tulkio-bg-blue: #f4f8ff;

    /* Bordes */
    --tulkio-border: #e2e8f0;
    --tulkio-border-light: #f1f5f9;

    /* Estados */
    --tulkio-success: #16a34a;
    --tulkio-warning: #d97706;
    --tulkio-danger: #dc2626;

    /* Sombras */
    --tulkio-shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.05);

    --tulkio-shadow:
        0 8px 30px rgba(15, 23, 42, 0.07);

    --tulkio-shadow-hover:
        0 14px 40px rgba(15, 23, 42, 0.11);

    /* Radios */
    --tulkio-radius-sm: 0.5rem;
    --tulkio-radius: 0.875rem;
    --tulkio-radius-lg: 1.25rem;
    --tulkio-radius-xl: 1.75rem;

    /* Transiciones */
    --tulkio-transition:
        180ms ease;

}


/* ==========================================================================
   DOCUMENTO
   ========================================================================== */

html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    margin: 0;

    background:
        var(--tulkio-bg);

    color:
        var(--tulkio-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 1rem;

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


main {
    flex: 1;
}


::selection {
    background: var(--tulkio-primary);
    color: #ffffff;
}


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

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
        var(--tulkio-secondary);

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        -0.025em;

}


h1 {
    font-size: clamp(2.25rem, 5vw, 4rem);
}


h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
}


h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}


p {
    margin-bottom: 1rem;
}


a {

    color:
        var(--tulkio-primary);

    text-decoration:
        none;

    transition:
        color var(--tulkio-transition);

}


a:hover {
    color: var(--tulkio-primary-dark);
}


.text-muted {
    color: var(--tulkio-text-muted) !important;
}


/* ==========================================================================
   CONTENEDOR GENERAL
   ========================================================================== */

.section {

    padding-top:
        5rem;

    padding-bottom:
        5rem;

}


.section-soft {
    background: var(--tulkio-bg-soft);
}


.section-blue {
    background: var(--tulkio-bg-blue);
}


.section-title {

    margin-bottom:
        0.75rem;

}


.section-subtitle {

    max-width:
        700px;

    margin-left:
        auto;

    margin-right:
        auto;

    color:
        var(--tulkio-text-muted);

    font-size:
        1.075rem;

}


/* ==========================================================================
   NAVBAR
   ========================================================================== */

.site-header {

    position:
        relative;

    z-index:
        1000;

}


.navbar {

    min-height:
        76px;

    padding-top:
        0.75rem;

    padding-bottom:
        0.75rem;

    background:
        rgba(255, 255, 255, 0.96) !important;

    backdrop-filter:
        blur(12px);

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

}


.navbar-brand {

    padding:
        0;

    color:
        var(--tulkio-secondary);

}


.navbar-brand:hover {
    color: var(--tulkio-secondary);
}


.navbar-nav .nav-link {

    position:
        relative;

    padding:
        0.75rem 0.9rem !important;

    color:
        var(--tulkio-text-muted);

    font-weight:
        600;

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

    transition:
        color var(--tulkio-transition),
        background-color var(--tulkio-transition);

}


.navbar-nav .nav-link:hover {

    color:
        var(--tulkio-secondary);

    background:
        var(--tulkio-bg-soft);

}


.navbar-nav .nav-link.active {

    color:
        var(--tulkio-primary);

    background:
        var(--tulkio-primary-light);

}


.navbar-toggler {

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

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

    padding:
        0.45rem 0.6rem;

}


.navbar-toggler:focus {

    box-shadow:
        0 0 0 0.2rem
        rgba(37, 99, 235, 0.15);

}


/* ==========================================================================
   MARCA TULKIO
   ========================================================================== */

.tulkio-brand-mark {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.25rem;

    height:
        2.25rem;

    flex-shrink:
        0;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #3b82f6 0%,
            #2563eb 55%,
            #1d4ed8 100%
        );

    border-radius:
        0.7rem;

    font-size:
        1.25rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.08em;

    box-shadow:
        0 5px 14px rgba(37, 99, 235, 0.24);

}


.tulkio-brand-name {

    color:
        var(--tulkio-secondary);

    font-size:
        1.45rem;

    font-weight:
        800;

    letter-spacing:
        -0.04em;

}


/* ==========================================================================
   DROPDOWN DE HERRAMIENTAS
   ========================================================================== */

.tulkio-tools-menu {

    min-width:
        230px;

    padding:
        0.6rem;

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

    border-radius:
        var(--tulkio-radius);

    box-shadow:
        var(--tulkio-shadow);

}


.tulkio-tools-menu .dropdown-item {

    padding:
        0.65rem 0.8rem;

    border-radius:
        0.45rem;

    color:
        var(--tulkio-text);

    font-size:
        0.95rem;

}


.tulkio-tools-menu .dropdown-item:hover {

    color:
        var(--tulkio-primary);

    background:
        var(--tulkio-primary-light);

}


.tulkio-tools-menu .dropdown-item.active {

    color:
        var(--tulkio-primary);

    background:
        var(--tulkio-primary-light);

    font-weight:
        600;

}


.tulkio-tools-menu .dropdown-divider {
    border-color: var(--tulkio-border-light);
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        6rem 0 5.5rem;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );

}


.hero::before {

    content:
        "";

    position:
        absolute;

    top:
        -220px;

    left:
        50%;

    width:
        700px;

    height:
        700px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.12) 0%,
            rgba(59, 130, 246, 0) 68%
        );

    pointer-events:
        none;

}


.hero-content {

    position:
        relative;

    z-index:
        1;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    margin-bottom:
        1.4rem;

    padding:
        0.45rem 0.8rem;

    color:
        var(--tulkio-primary-dark);

    background:
        var(--tulkio-primary-light);

    border:
        1px solid #dbeafe;

    border-radius:
        999px;

    font-size:
        0.9rem;

    font-weight:
        700;

}


.hero-title {

    margin-bottom:
        1.35rem;

    color:
        var(--tulkio-secondary);

}


.hero-title-highlight {
    color: var(--tulkio-primary);
}


.hero-description {

    max-width:
        720px;

    margin:
        0 auto 2rem;

    color:
        var(--tulkio-text-muted);

    font-size:
        clamp(1.05rem, 2vw, 1.25rem);

}


/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {

    border-radius:
        0.7rem;

    font-weight:
        600;

    padding:
        0.72rem 1.2rem;

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

}


.btn:hover {
    transform: translateY(-1px);
}


.btn-primary {

    background:
        var(--tulkio-primary);

    border-color:
        var(--tulkio-primary);

    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.18);

}


.btn-primary:hover,
.btn-primary:focus {

    background:
        var(--tulkio-primary-dark);

    border-color:
        var(--tulkio-primary-dark);

}


.btn-outline-primary {

    color:
        var(--tulkio-primary);

    border-color:
        #bfdbfe;

}


.btn-outline-primary:hover {

    color:
        #ffffff;

    background:
        var(--tulkio-primary);

    border-color:
        var(--tulkio-primary);

}


/* ==========================================================================
   CARDS
   ========================================================================== */

.tulkio-card {

    height:
        100%;

    padding:
        1.5rem;

    background:
        #ffffff;

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

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

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

    transition:
        transform var(--tulkio-transition),
        border-color var(--tulkio-transition),
        box-shadow var(--tulkio-transition);

}


.tulkio-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #bfdbfe;

    box-shadow:
        var(--tulkio-shadow-hover);

}


.tulkio-card-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        3rem;

    height:
        3rem;

    margin-bottom:
        1rem;

    color:
        var(--tulkio-primary);

    background:
        var(--tulkio-primary-light);

    border-radius:
        0.85rem;

    font-size:
        1.25rem;

    font-weight:
        800;

}


.tulkio-card-title {

    margin-bottom:
        0.65rem;

    font-size:
        1.15rem;

}


.tulkio-card-description {

    margin-bottom:
        0;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.95rem;

}


/* ==========================================================================
   CATEGORÍAS
   ========================================================================== */

.category-card {

    display:
        block;

    height:
        100%;

    color:
        inherit;

}


.category-card:hover {
    color: inherit;
}


.category-card-count {

    display:
        inline-block;

    margin-top:
        1rem;

    color:
        var(--tulkio-primary);

    font-size:
        0.875rem;

    font-weight:
        700;

}


/* ==========================================================================
   BLOQUE CTA
   ========================================================================== */

.cta-box {

    position:
        relative;

    overflow:
        hidden;

    padding:
        3rem;

    background:
        var(--tulkio-secondary);

    color:
        #ffffff;

    border-radius:
        var(--tulkio-radius-xl);

}


.cta-box h2,
.cta-box h3 {
    color: #ffffff;
}


.cta-box p {
    color: #cbd5e1;
}


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

.form-control,
.form-select {

    min-height:
        48px;

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

    border-radius:
        0.7rem;

    color:
        var(--tulkio-text);

}


.form-control:focus,
.form-select:focus {

    border-color:
        #93c5fd;

    box-shadow:
        0 0 0 0.2rem
        rgba(37, 99, 235, 0.12);

}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {

    margin-top:
        auto;

    padding:
        4.5rem 0 2rem;

    background:
        #0f172a;

    color:
        #cbd5e1;

}


.footer-brand-link {
    color: #ffffff;
}


.footer-brand-link:hover {
    color: #ffffff;
}


.tulkio-brand-mark-footer {

    box-shadow:
        none;

}


.footer-brand-name {

    color:
        #ffffff;

    font-size:
        1.4rem;

    font-weight:
        800;

    letter-spacing:
        -0.035em;

}


.footer-tagline {

    max-width:
        360px;

    color:
        #94a3b8;

    font-size:
        0.95rem;

}


.footer-heading {

    margin-bottom:
        1rem;

    color:
        #ffffff;

    font-size:
        0.85rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

}


.footer-links li {

    margin-bottom:
        0.55rem;

}


.footer-links a {

    color:
        #94a3b8;

    font-size:
        0.925rem;

    transition:
        color var(--tulkio-transition);

}


.footer-links a:hover {

    color:
        #ffffff;

}


.footer-divider {

    margin:
        3rem 0 1.6rem;

    border-color:
        rgba(255, 255, 255, 0.1);

}


.footer-bottom {

    color:
        #64748b;

    font-size:
        0.875rem;

}


.footer-note {

    color:
        #64748b;

}


/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

:focus-visible {

    outline:
        3px solid rgba(37, 99, 235, 0.45);

    outline-offset:
        3px;

}


.visually-hidden-focusable:focus {

    position:
        fixed !important;

    top:
        1rem;

    left:
        1rem;

    z-index:
        99999;

    width:
        auto !important;

    height:
        auto !important;

    padding:
        0.75rem 1rem;

    overflow:
        visible !important;

    clip:
        auto !important;

    white-space:
        normal !important;

    color:
        #ffffff;

    background:
        var(--tulkio-secondary);

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

}


/* ==========================================================================
   UTILIDADES TULKIO
   ========================================================================== */

.text-tulkio-primary {
    color: var(--tulkio-primary) !important;
}


.bg-tulkio-soft {
    background: var(--tulkio-bg-soft) !important;
}


.bg-tulkio-blue {
    background: var(--tulkio-bg-blue) !important;
}


.border-tulkio {
    border-color: var(--tulkio-border) !important;
}


.rounded-tulkio {
    border-radius: var(--tulkio-radius) !important;
}


.shadow-tulkio {
    box-shadow: var(--tulkio-shadow) !important;
}


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

@media (max-width: 991.98px) {

    .navbar {

        min-height:
            68px;

    }


    .navbar-collapse {

        margin-top:
            0.75rem;

        padding:
            0.75rem;

        background:
            #ffffff;

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

        border-radius:
            var(--tulkio-radius);

        box-shadow:
            var(--tulkio-shadow);

    }


    .navbar-nav .nav-link {

        padding:
            0.65rem 0.75rem !important;

    }


    .tulkio-tools-menu {

        margin-top:
            0.25rem;

        border:
            0;

        box-shadow:
            none;

    }


    .hero {

        padding:
            4.5rem 0 4rem;

    }


    .section {

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    .cta-box {

        padding:
            2.25rem;

    }

}


@media (max-width: 575.98px) {

    body {
        font-size: 0.975rem;
    }


    .tulkio-brand-mark {

        width:
            2rem;

        height:
            2rem;

        font-size:
            1.1rem;

    }


    .tulkio-brand-name {

        font-size:
            1.3rem;

    }


    .hero {

        padding:
            3.75rem 0 3.5rem;

    }


    .hero-description {

        font-size:
            1.05rem;

    }


    .section {

        padding-top:
            3.25rem;

        padding-bottom:
            3.25rem;

    }


    .tulkio-card {

        padding:
            1.25rem;

    }


    .cta-box {

        padding:
            1.75rem;

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

    }


    .site-footer {

        padding-top:
            3.5rem;

    }

}


/* ==========================================================================
   REDUCIR ANIMACIONES SI EL USUARIO LO PREFIERE
   ========================================================================== */

@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;

    }

}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.tulkio-breadcrumbs {

    padding:
        1rem 0;

    background:
        #ffffff;

    border-bottom:
        1px solid var(--tulkio-border-light);

}


.tulkio-breadcrumbs .breadcrumb {

    font-size:
        0.875rem;

}


.tulkio-breadcrumbs .breadcrumb-item a {

    color:
        var(--tulkio-text-muted);

    font-weight:
        500;

}


.tulkio-breadcrumbs .breadcrumb-item a:hover {

    color:
        var(--tulkio-primary);

}


.tulkio-breadcrumbs .breadcrumb-item.active {

    color:
        var(--tulkio-text);

    font-weight:
        600;

}


.tulkio-breadcrumbs
.breadcrumb-item
+ .breadcrumb-item::before {

    color:
        var(--tulkio-text-light);

}

/* ==========================================================================
   CATEGORY LAYOUT
   ========================================================================== */

.category-empty-state {

    padding:
        4rem 2rem;

    text-align:
        center;

    background:
        var(--tulkio-bg-soft);

    border:
        1px dashed var(--tulkio-border);

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

}


.tulkio-featured-badge {

    padding:
        0.45rem 0.7rem;

    color:
        var(--tulkio-primary-dark);

    background:
        var(--tulkio-primary-light);

    border:
        1px solid #dbeafe;

    font-size:
        0.75rem;

    font-weight:
        700;

}


/* =============================================================================
   TULKIO - ESPACIOS PUBLICITARIOS
   =============================================================================
   Sistema global de publicidad reutilizable para:

   - Home
   - Catálogo
   - Categorías
   - Herramientas

   Los placeholders se utilizan únicamente durante el desarrollo local.
   Los anuncios reales de AdSense reutilizan la misma estructura visual base.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Contenedor general
   ----------------------------------------------------------------------------- */

.tulkio-ad {
    width: 100%;
    max-width: 100%;
    clear: both;
}


.tulkio-ad__inner {
    width: 100%;
    max-width: 100%;
}


/* -----------------------------------------------------------------------------
   Separación según posición
   ----------------------------------------------------------------------------- */

/*
 * TOP
 *
 * Utilizado actualmente en herramientas.
 */

.tulkio-ad--top {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}


/*
 * CONTENT
 *
 * Posición intermedia dentro de una página monetizable.
 */

.tulkio-ad--content {
    margin-top: 2.75rem;
    margin-bottom: 2.75rem;
}


/*
 * BOTTOM
 *
 * Posición hacia el final del contenido principal.
 */

.tulkio-ad--bottom {
    margin-top: 3rem;
    margin-bottom: 2.5rem;
}


/* =============================================================================
   PLACEHOLDERS DE DESARROLLO
   =============================================================================
   Son únicamente una ayuda visual para localhost.

   No imitan un anuncio real y no cargan recursos externos.
   ============================================================================= */

.tulkio-ad--placeholder .tulkio-ad__inner {
    min-height: 140px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    padding: 1.5rem;

    text-align: center;

    border:
        2px dashed #bfdbfe;

    border-radius:
        var(--tulkio-radius);

    background:
        repeating-linear-gradient(
            -45deg,
            #f8fbff,
            #f8fbff 12px,
            #f1f7ff 12px,
            #f1f7ff 24px
        );

    color:
        var(--tulkio-text-muted);
}


/* -----------------------------------------------------------------------------
   Etiqueta de desarrollo
   ----------------------------------------------------------------------------- */

.tulkio-ad__development-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0.22rem 0.55rem;

    border-radius:
        999px;

    background:
        #dbeafe;

    color:
        var(--tulkio-primary-dark);

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* -----------------------------------------------------------------------------
   Título del placeholder
   ----------------------------------------------------------------------------- */

.tulkio-ad__placeholder-title {
    display: block;

    color:
        var(--tulkio-secondary);

    font-size:
        0.95rem;

    font-weight:
        700;

    line-height:
        1.4;
}


/* -----------------------------------------------------------------------------
   Descripción del placeholder
   ----------------------------------------------------------------------------- */

.tulkio-ad__placeholder-description {
    display: block;

    max-width:
        520px;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.85rem;

    line-height:
        1.5;
}


/* =============================================================================
   ADSENSE REAL
   =============================================================================
   No añadimos fondos, bordes, botones ni decoración que pueda confundirse
   con el contenido del anuncio.

   El bloque de Google gestiona su propio contenido y dimensiones.
   ============================================================================= */

.tulkio-ad--real {
    overflow: hidden;
}


.tulkio-ad--real .tulkio-ad__inner {
    width: 100%;
    max-width: 100%;
}


.tulkio-ad--real .adsbygoogle {
    max-width: 100%;
}


/* =============================================================================
   AJUSTES POR ZONA
   =============================================================================
   slot.php añade clases como:

   .tulkio-ad--zone-home
   .tulkio-ad--zone-catalog
   .tulkio-ad--zone-category
   .tulkio-ad--zone-tool

   De momento todas comparten el mismo diseño. Estas clases quedan preparadas
   para poder ajustar una zona concreta en el futuro sin modificar el HTML.
   ============================================================================= */


/* =============================================================================
   RESPONSIVE DE PUBLICIDAD
   ============================================================================= */

@media (max-width: 767.98px) {

    .tulkio-ad--top {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }


    .tulkio-ad--content {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }


    .tulkio-ad--bottom {
        margin-top: 2.25rem;
        margin-bottom: 2rem;
    }


    .tulkio-ad--placeholder .tulkio-ad__inner {
        min-height: 120px;

        padding:
            1.25rem 1rem;

        border-radius:
            0.75rem;
    }


    .tulkio-ad__placeholder-title {
        font-size: 0.9rem;
    }


    .tulkio-ad__placeholder-description {
        font-size: 0.8rem;
    }

}


@media (max-width: 374.98px) {

    .tulkio-ad--placeholder .tulkio-ad__inner {
        min-height: 110px;

        padding:
            1rem 0.75rem;
    }


    .tulkio-ad__placeholder-description {
        max-width: 280px;
    }

}


/* =============================================================================
   MOVIMIENTO REDUCIDO
   =============================================================================
   Actualmente no existen animaciones publicitarias propias, pero dejamos
   preparada esta protección por si se añaden transiciones en el futuro.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .tulkio-ad,
    .tulkio-ad *,
    .tulkio-ad *::before,
    .tulkio-ad *::after {
        transition: none !important;
        animation: none !important;
    }

}



/* =============================================================================
   TULKIO - CMP / CONSENTIMIENTO
   =============================================================================
   Interfaz global de privacidad.

   Estructura:
   - Banner inicial fijo en la parte inferior.
   - Panel modal de preferencias.
   - Categorías obligatorias y opcionales.
   - Estados accesibles para teclado y lectores de pantalla.

   La lógica vive en:
   /assets/js/main.js
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Utilidad de ocultación
   ----------------------------------------------------------------------------- */

.tulkio-consent-banner[hidden],
.tulkio-consent-preferences[hidden] {
    display: none !important;
}


/* -----------------------------------------------------------------------------
   Banner inicial
   ----------------------------------------------------------------------------- */

.tulkio-consent-banner {

    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        2000;

    padding:
        1rem;

    pointer-events:
        none;

}


.tulkio-consent-banner__inner {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        1.5rem;

    padding:
        1.25rem 1.35rem;

    background:
        rgba(255, 255, 255, 0.98);

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

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

    box-shadow:
        0 18px 55px rgba(15, 23, 42, 0.2);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    pointer-events:
        auto;

}


.tulkio-consent-banner__content {

    min-width:
        0;

}


.tulkio-consent-banner__eyebrow {

    margin:
        0 0 0.35rem;

    color:
        var(--tulkio-primary);

    font-size:
        0.75rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.tulkio-consent-banner__title {

    margin:
        0 0 0.5rem;

    font-size:
        clamp(1.15rem, 2vw, 1.35rem);

    line-height:
        1.25;

}


.tulkio-consent-banner__description {

    max-width:
        760px;

    margin:
        0;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.925rem;

    line-height:
        1.55;

}


.tulkio-consent-banner__policy {

    margin-top:
        0.55rem !important;

    font-size:
        0.85rem;

}


.tulkio-consent-banner__policy-link {

    font-weight:
        600;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        0.18em;

}


.tulkio-consent-banner__actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        0.65rem;

}


.tulkio-consent-banner__button {

    min-height:
        44px;

    white-space:
        nowrap;

    font-size:
        0.9rem;

}


.tulkio-consent-banner__actions
.btn-outline-secondary {

    color:
        var(--tulkio-text);

    background:
        #ffffff;

    border-color:
        var(--tulkio-border);

}


.tulkio-consent-banner__actions
.btn-outline-secondary:hover,
.tulkio-consent-banner__actions
.btn-outline-secondary:focus {

    color:
        var(--tulkio-secondary);

    background:
        var(--tulkio-bg-soft);

    border-color:
        #cbd5e1;

}


.tulkio-consent-banner__noscript {

    grid-column:
        1 / -1;

    margin:
        0;

    padding:
        0.75rem 0.9rem;

    color:
        var(--tulkio-text);

    background:
        #fffbeb;

    border:
        1px solid #fde68a;

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

    font-size:
        0.875rem;

    line-height:
        1.5;

}


/* -----------------------------------------------------------------------------
   Panel de preferencias
   ----------------------------------------------------------------------------- */

.tulkio-consent-preferences {

    position:
        fixed;

    inset:
        0;

    z-index:
        2100;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1rem;

}


.tulkio-consent-preferences__backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(15, 23, 42, 0.62);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

}


.tulkio-consent-preferences__dialog {

    position:
        relative;

    z-index:
        1;

    width:
        min(680px, 100%);

    max-height:
        min(760px, calc(100vh - 2rem));

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;

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

    border-radius:
        var(--tulkio-radius-xl);

    box-shadow:
        0 28px 90px rgba(15, 23, 42, 0.3);

}


.tulkio-consent-preferences__dialog:focus {
    outline: none;
}


.tulkio-consent-preferences__header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1.4rem 1.5rem 1.15rem;

    border-bottom:
        1px solid var(--tulkio-border-light);

}


.tulkio-consent-preferences__eyebrow {

    margin:
        0 0 0.3rem;

    color:
        var(--tulkio-primary);

    font-size:
        0.75rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.tulkio-consent-preferences__title {

    margin:
        0;

    font-size:
        clamp(1.35rem, 3vw, 1.65rem);

}


.tulkio-consent-preferences__close {

    flex:
        0 0 auto;

    margin-top:
        0.1rem;

}


.tulkio-consent-preferences__body {

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    padding:
        1.35rem 1.5rem;

}


.tulkio-consent-preferences__description {

    margin-bottom:
        1.25rem;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.95rem;

}


.tulkio-consent-preferences__categories {

    display:
        grid;

    gap:
        0.75rem;

}


.tulkio-consent-preferences__category {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        1.25rem;

    padding:
        1rem;

    background:
        var(--tulkio-bg-soft);

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

    border-radius:
        var(--tulkio-radius);

}


.tulkio-consent-preferences__category-copy {

    min-width:
        0;

}


.tulkio-consent-preferences__category-heading {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    margin-bottom:
        0.35rem;

}


.tulkio-consent-preferences__category-title {

    margin:
        0;

    font-size:
        1rem;

    letter-spacing:
        -0.01em;

}


.tulkio-consent-preferences__required {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        0.2rem 0.5rem;

    color:
        var(--tulkio-primary-dark);

    background:
        var(--tulkio-primary-light);

    border:
        1px solid #dbeafe;

    border-radius:
        999px;

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1.2;

}


.tulkio-consent-preferences__category-description {

    margin:
        0;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.875rem;

    line-height:
        1.5;

}


.tulkio-consent-preferences__switch {

    margin:
        0;

    padding-left:
        2.8rem;

}


.tulkio-consent-preferences__switch
.form-check-input {

    width:
        2.4rem;

    height:
        1.3rem;

    margin-left:
        -2.8rem;

    cursor:
        pointer;

}


.tulkio-consent-preferences__switch
.form-check-input:checked {

    background-color:
        var(--tulkio-primary);

    border-color:
        var(--tulkio-primary);

}


.tulkio-consent-preferences__switch
.form-check-input:focus {

    border-color:
        #93c5fd;

    box-shadow:
        0 0 0 0.2rem rgba(37, 99, 235, 0.15);

}


.tulkio-consent-preferences__switch
.form-check-input:disabled {

    cursor:
        not-allowed;

    opacity:
        0.75;

}


.tulkio-consent-preferences__policy {

    margin:
        1.25rem 0 0;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.85rem;

    line-height:
        1.55;

}


.tulkio-consent-preferences__policy a {

    font-weight:
        600;

    text-decoration:
        underline;

    text-underline-offset:
        0.18em;

}


.tulkio-consent-preferences__footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1rem 1.5rem 1.25rem;

    background:
        #ffffff;

    border-top:
        1px solid var(--tulkio-border-light);

}


.tulkio-consent-preferences__bulk-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.6rem;

}


.tulkio-consent-preferences__button,
.tulkio-consent-preferences__save {

    min-height:
        44px;

    font-size:
        0.9rem;

}


.tulkio-consent-preferences__noscript {

    margin:
        0 1.5rem 1.25rem;

    padding:
        0.8rem 0.9rem;

    color:
        var(--tulkio-text);

    background:
        #fffbeb;

    border:
        1px solid #fde68a;

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

    font-size:
        0.875rem;

}


/* -----------------------------------------------------------------------------
   Error de almacenamiento generado desde main.js
   ----------------------------------------------------------------------------- */

[data-consent-storage-error] {

    font-size:
        0.875rem;

    line-height:
        1.5;

}


/* -----------------------------------------------------------------------------
   Estado del documento mientras el modal está abierto
   ----------------------------------------------------------------------------- */

body.consent-preferences-open {

    overscroll-behavior:
        none;

}


/* -----------------------------------------------------------------------------
   Responsive CMP
   ----------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .tulkio-consent-banner__inner {

        grid-template-columns:
            1fr;

        gap:
            1rem;

    }


    .tulkio-consent-banner__actions {

        justify-content:
            flex-start;

    }

}


@media (max-width: 767.98px) {

    .tulkio-consent-banner {

        padding:
            0.75rem;

    }


    .tulkio-consent-banner__inner {

        padding:
            1rem;

        border-radius:
            var(--tulkio-radius);

    }


    .tulkio-consent-banner__actions {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        width:
            100%;

    }


    .tulkio-consent-banner__button {

        width:
            100%;

        white-space:
            normal;

    }


    .tulkio-consent-banner__actions
    [data-consent-open-preferences] {

        grid-column:
            1 / -1;

    }


    .tulkio-consent-preferences {

        align-items:
            flex-end;

        padding:
            0;

    }


    .tulkio-consent-preferences__dialog {

        width:
            100%;

        max-height:
            calc(100vh - 0.75rem);

        border-radius:
            var(--tulkio-radius-lg)
            var(--tulkio-radius-lg)
            0
            0;

        border-bottom:
            0;

    }


    .tulkio-consent-preferences__header {

        padding:
            1.15rem 1rem 1rem;

    }


    .tulkio-consent-preferences__body {

        padding:
            1rem;

    }


    .tulkio-consent-preferences__footer {

        align-items:
            stretch;

        flex-direction:
            column;

        padding:
            1rem;

    }


    .tulkio-consent-preferences__bulk-actions {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        width:
            100%;

    }


    .tulkio-consent-preferences__button,
    .tulkio-consent-preferences__save {

        width:
            100%;

    }


    .tulkio-consent-preferences__noscript {

        margin:
            0 1rem 1rem;

    }

}


@media (max-width: 575.98px) {

    .tulkio-consent-banner__title {

        font-size:
            1.1rem;

    }


    .tulkio-consent-banner__description {

        font-size:
            0.875rem;

    }


    .tulkio-consent-banner__actions {

        grid-template-columns:
            1fr;

    }


    .tulkio-consent-banner__actions
    [data-consent-open-preferences] {

        grid-column:
            auto;

    }


    .tulkio-consent-preferences__category {

        grid-template-columns:
            minmax(0, 1fr) auto;

        gap:
            0.75rem;

        padding:
            0.9rem;

    }


    .tulkio-consent-preferences__bulk-actions {

        grid-template-columns:
            1fr;

    }

}


/* -----------------------------------------------------------------------------
   Movimiento reducido
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .tulkio-consent-banner,
    .tulkio-consent-banner *,
    .tulkio-consent-preferences,
    .tulkio-consent-preferences * {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* =============================================================================
   TULKIO - FOOTER
   ============================================================================= */

.tulkio-footer {
    background: #0f172a;
    color: #cbd5e1;
}


/* Marca */

.tulkio-footer > .container {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.tulkio-footer .h4 {
    color: #ffffff;
}


/* Títulos de columnas */

.tulkio-footer h2 {
    color: #ffffff;
}


/* Textos */

.tulkio-footer p {
    color: #cbd5e1;
}


/* Enlaces */

.tulkio-footer a {
    color: #cbd5e1;
    text-decoration: none;
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


.tulkio-footer a:hover,
.tulkio-footer a:focus {
    color: #ffffff;
    text-decoration: underline;
}


/* Logo / nombre Tulkio */

.tulkio-footer > .container .col-lg-4 > a .h4 {
    color: #60a5fa;
}


.tulkio-footer > .container .col-lg-4 > a:hover .h4,
.tulkio-footer > .container .col-lg-4 > a:focus .h4 {
    color: #93c5fd;
}


/* Separador inferior */

.tulkio-footer .border-top {
    border-color: rgba(255, 255, 255, 0.12) !important;
}


/* Franja inferior */

.tulkio-footer .border-top .container {
    color: #94a3b8;
}


.tulkio-footer .border-top p {
    color: #94a3b8;
}


/* Focus visible para navegación por teclado */

.tulkio-footer a:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 4px;
    border-radius: 2px;
}


/* Responsive */

@media (max-width: 767.98px) {

    .tulkio-footer > .container {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }

}