/* Sistema visual compartido de botones publicos - Ciberseguridad Online */
:root {
    --cso-button-cyan: #20d6e8;
    --cso-button-cyan-soft: #71eaf5;
    --cso-button-blue: #2468e8;
    --cso-button-violet: #704bd8;
    --cso-button-pink: #ec3f91;
    --cso-button-ink: #031725;
    --cso-button-white: #f7fdff;
}

/* Navegacion principal y submenus: linea corporativa en lugar del amarillo heredado. */
.navbar-wrap > ul > li > a {
    color: #c4d2de !important;
    transition: color .2s ease !important;
}

.navbar-wrap > ul > li > a::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 25px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cso-button-cyan), var(--cso-button-blue), var(--cso-button-pink));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .24s ease;
    pointer-events: none;
}

.navbar-wrap > ul > li:hover > a,
.navbar-wrap > ul > li.active > a,
.navbar-wrap > ul > li:focus-within > a {
    color: #fff !important;
}

.navbar-wrap > ul > li:hover > a::after,
.navbar-wrap > ul > li.active > a::after,
.navbar-wrap > ul > li:focus-within > a::after {
    transform: scaleX(1);
}

.navbar-wrap ul li .sub-menu li a {
    color: #b9c7d3 !important;
    background: transparent !important;
    padding-left: 25px;
    transition: color .2s ease, padding-left .2s ease, background .2s ease !important;
}

.navbar-wrap ul li .sub-menu li a::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cso-button-cyan), var(--cso-button-pink));
    transform: translateY(-50%);
    transition: width .2s ease;
}

.navbar-wrap ul li .sub-menu li:hover > a,
.navbar-wrap ul li .sub-menu li.active > a,
.navbar-wrap ul li .sub-menu li:focus-within > a {
    color: #fff !important;
    padding-left: 35px;
    background: linear-gradient(90deg, rgba(32, 214, 232, .10), rgba(112, 75, 216, .08)) !important;
}

.navbar-wrap ul li .sub-menu li:hover > a::before,
.navbar-wrap ul li .sub-menu li.active > a::before,
.navbar-wrap ul li .sub-menu li:focus-within > a::before {
    width: 13px;
}

.mobile-menu .navigation li > a {
    transition: color .2s ease, padding-left .2s ease !important;
}

.mobile-menu .navigation li:hover > a,
.mobile-menu .navigation li.active > a,
.mobile-menu .navigation li:focus-within > a {
    color: var(--cso-button-cyan) !important;
    padding-left: 5px;
}

/* Base: llamadas a la accion. Los filtros y controles de carrusel no se incluyen. */
.main-area .btn:not(.btn-link):not(.close):not(.btn-close),
.home-btn,
.community-btn,
.launch-btn,
.course-cta,
.cp-btn,
.cv-btn,
.pc-btn,
.btn-custom-yellow,
.contact-info-link {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    border-radius: 11px !important;
    border: 1px solid rgba(74, 222, 239, .72) !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px !important;
    font-weight: 900 !important;
    letter-spacing: .025em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease !important;
    box-shadow: 0 10px 28px rgba(20, 119, 194, .22), inset 0 1px rgba(255, 255, 255, .2) !important;
}

.main-area .btn:not(.btn-link):not(.close):not(.btn-close)::before,
.home-btn::before,
.community-btn::before,
.launch-btn::before,
.course-cta::before,
.cp-btn::before,
.cv-btn::before,
.pc-btn::before,
.btn-custom-yellow::before,
.contact-info-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -130%;
    left: -38%;
    width: 28%;
    height: 360%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
    transform: rotate(18deg) translateX(-280%);
    transition: transform .68s ease;
    pointer-events: none;
}

.main-area .btn:not(.btn-link):not(.close):not(.btn-close):hover,
.main-area .btn:not(.btn-link):not(.close):not(.btn-close):focus,
.home-btn:hover,
.home-btn:focus,
.community-btn:hover,
.community-btn:focus,
.launch-btn:hover,
.launch-btn:focus,
.course-cta:hover,
.course-cta:focus,
.cp-btn:hover,
.cp-btn:focus,
.cv-btn:hover,
.cv-btn:focus,
.pc-btn:hover,
.pc-btn:focus,
.btn-custom-yellow:hover,
.btn-custom-yellow:focus,
.contact-info-link:hover,
.contact-info-link:focus {
    transform: translateY(-3px) !important;
    border-color: rgba(112, 235, 248, .98) !important;
    box-shadow: 0 16px 38px rgba(26, 113, 218, .34), 0 0 22px rgba(32, 214, 232, .17) !important;
    filter: saturate(1.08) brightness(1.04);
    text-decoration: none !important;
}

.main-area .btn:not(.btn-link):not(.close):not(.btn-close):hover::before,
.main-area .btn:not(.btn-link):not(.close):not(.btn-close):focus::before,
.home-btn:hover::before,
.home-btn:focus::before,
.community-btn:hover::before,
.community-btn:focus::before,
.launch-btn:hover::before,
.launch-btn:focus::before,
.course-cta:hover::before,
.course-cta:focus::before,
.cp-btn:hover::before,
.cp-btn:focus::before,
.cv-btn:hover::before,
.cv-btn:focus::before,
.pc-btn:hover::before,
.pc-btn:focus::before,
.btn-custom-yellow:hover::before,
.btn-custom-yellow:focus::before,
.contact-info-link:hover::before,
.contact-info-link:focus::before {
    transform: rotate(18deg) translateX(680%);
}

/* Variante primaria: conversion, inscripcion y envio. */
.main-area .btn:not(.btn-link):not(.close):not(.btn-close),
.home-btn-primary,
.community-btn-primary,
.launch-btn-buy,
.course-cta-buy,
.course-cta-pending,
.cp-primary,
.cv-btn-primary,
.pc-primary,
.btn-custom-yellow,
.contact-form .btn {
    color: var(--cso-button-ink) !important;
    background: linear-gradient(105deg, var(--cso-button-cyan) 0%, var(--cso-button-cyan-soft) 64%, #c9c5fa 100%) !important;
}

/* Variante profunda: acciones informativas y secundarias. */
.home-btn-secondary,
.community-btn-pink,
.community-btn-outline,
.launch-btn-info,
.course-cta-view,
.cp-secondary,
.cv-btn-secondary,
.pc-secondary,
.header-buttons .btn-primary {
    color: var(--cso-button-white) !important;
    background: linear-gradient(112deg, #123c88 0%, var(--cso-button-blue) 52%, var(--cso-button-violet) 82%, var(--cso-button-pink) 125%) !important;
    border-color: rgba(72, 213, 235, .62) !important;
}

.main-area .btn:not(.btn-link):not(.close):not(.btn-close):hover,
.main-area .btn:not(.btn-link):not(.close):not(.btn-close):focus,
.home-btn-primary:hover,
.home-btn-primary:focus,
.community-btn-primary:hover,
.community-btn-primary:focus,
.launch-btn-buy:hover,
.launch-btn-buy:focus,
.course-cta-buy:hover,
.course-cta-buy:focus,
.course-cta-pending:hover,
.course-cta-pending:focus,
.cp-primary:hover,
.cp-primary:focus,
.btn-custom-yellow:hover,
.btn-custom-yellow:focus {
    color: var(--cso-button-ink) !important;
}

.home-btn-secondary:hover,
.home-btn-secondary:focus,
.community-btn-pink:hover,
.community-btn-pink:focus,
.community-btn-outline:hover,
.community-btn-outline:focus,
.launch-btn-info:hover,
.launch-btn-info:focus,
.course-cta-view:hover,
.course-cta-view:focus,
.cp-secondary:hover,
.cp-secondary:focus,
.header-buttons .btn-primary:hover,
.header-buttons .btn-primary:focus {
    color: var(--cso-button-white) !important;
}

/* Las tarjetas de Servicios forman parte del mismo sistema visual. */
.services-items-wrapper .list-wrap {
    gap: 14px;
}

.services-items-wrapper .list-wrap > li,
.services-items-wrapper .list-wrap > li:nth-child(n) {
    margin: 0 !important;
    padding: 34px 22px !important;
    border: 1px solid rgba(46, 190, 220, .24) !important;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(7, 43, 69, .98), rgba(3, 27, 46, .98));
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.services-items-wrapper .list-wrap > li::after {
    background: linear-gradient(112deg, rgba(18, 60, 136, .96), rgba(36, 104, 232, .84), rgba(112, 75, 216, .78)) !important;
    border-radius: 16px;
}

.services-items-wrapper .list-wrap > li:hover,
.services-items-wrapper .list-wrap > li:focus-within {
    transform: translateY(-5px);
    border-color: rgba(72, 220, 238, .86) !important;
    box-shadow: 0 18px 42px rgba(10, 95, 174, .3), 0 0 22px rgba(32, 214, 232, .14);
}

.services-items-wrapper .list-wrap > li a [class*="flaticon"] {
    color: var(--cso-button-cyan) !important;
    border: 1px solid rgba(60, 211, 235, .46);
    background: linear-gradient(145deg, rgba(20, 72, 142, .84), rgba(86, 59, 176, .72)) !important;
    box-shadow: 0 12px 28px rgba(20, 103, 202, .24), 0 0 18px rgba(32, 214, 232, .1) !important;
}

.services-items-wrapper .list-wrap > li:hover *,
.services-items-wrapper .list-wrap > li:focus-within * {
    color: #fff !important;
}

/* Enlaces de contacto tratados como acciones, no como texto amarillo. */
.contact-info-link {
    color: var(--cso-button-white) !important;
    background: linear-gradient(112deg, #123c88, var(--cso-button-blue), var(--cso-button-violet)) !important;
    margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .main-area .btn,
    .home-btn,
    .community-btn,
    .launch-btn,
    .course-cta,
    .cp-btn,
    .cv-btn,
    .pc-btn,
    .contact-info-link,
    .services-items-wrapper .list-wrap > li > a {
        transition: none !important;
    }

    .navbar-wrap a,
    .navbar-wrap a::after,
    .navbar-wrap a::before,
    .mobile-menu .navigation li > a {
        transition: none !important;
    }
}

@media (max-width: 575px) {
    .main-area .btn:not(.btn-link):not(.close):not(.btn-close),
    .home-btn,
    .community-btn,
    .launch-btn,
    .course-cta,
    .cp-btn,
    .contact-info-link {
        min-height: 46px;
    }
}