/* -- RETICULA 12 COLUMNAS -- */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

[class^="col-"] {
    padding: 0 10px; 
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }


/* -- RESPONSIVE -- */


/* -- Desktop Pequeño y Tablets Grandes -- */
@media (min-width: 992px) {
    .col-lg-1 { width: 8.33%; }
    .col-lg-2 { width: 16.66%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.33%; }
    .col-lg-5 { width: 41.66%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.33%; }
    .col-lg-8 { width: 66.66%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.33%; }
    .col-lg-11 { width: 91.66%; }
    .col-lg-12 { width: 100%; }
}

/* -- Tablets -- */
@media (min-width: 768px) {
    .col-md-1 { width: 8.33%; }
    .col-md-2 { width: 16.66%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33%; }
    .col-md-5 { width: 41.66%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33%; }
    .col-md-8 { width: 66.66%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33%; }
    .col-md-11 { width: 91.66%; }
    .col-md-12 { width: 100%; }
}

/* -- VARIABLES -- */

:root{
    /* PALETA DE COLOR*/
    --dom:#00FE83;
    --sec:#E4EFF2;
    --acc1:#0556D2;
    --acc2:#C1A0FD;

    --texto:#111;
    --texto-suave:#333;
    --white:#ffffff;
}

{
    box-sizing:border-box;
    margin:0;
    padding:0
}

body{
    font-family:"Geologica";
    background:var(--sec);
    color:var(--texto);
    margin:0;
    padding:0;
}

html{scroll-behavior:smooth}


.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
[class^="col-"] {
    padding: 0 10px; 
}

/* -- MOVILES -- */

.col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; }
.col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; }
.col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; }
.col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; }

/* -- TABLETS -- */

@media (min-width: 768px) {
    .col-md-1 { width: 8.33%; } .col-md-2 { width: 16.66%; } .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33%; } .col-md-5 { width: 41.66%; } .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33%; } .col-md-8 { width: 66.66%; } .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33%; } .col-md-11 { width: 91.66%; } .col-md-12 { width: 100%; }
}

/* -- DESK Y TABLETS MEDIANAS -- */

@media (min-width: 992px) {
    .col-lg-1 { width: 8.33%; } .col-lg-2 { width: 16.66%; } .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.33%; } .col-lg-5 { width: 41.66%; } .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.33%; } .col-lg-8 { width: 66.66%; } .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.33%; } .col-lg-11 { width: 91.66%; } .col-lg-12 { width: 100%; }
}

/* -- HEADER -- */

header{
    position:fixed; top:0;left:0;right:0;
    background:rgba(255,255,255,0.98);
    backdrop-filter: blur(4px);
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    z-index:40;
}
.nav-wrap{
    max-width:1200px; 
    margin:0 auto;
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:16px;
    padding:14px 20px;
}

.logo{
    font-weight:700;
    font-size:22px;
    color:var(--acc1); 
    letter-spacing:-0.5px;
}

nav{
    display:flex;
    align-items:center;
    gap:14px
}

.menu{
    display:flex;
    gap:18px;
    list-style:none;
    align-items:center;
}

.menu > li{position:relative}


.menu a {
    color: var(--texto); 
    text-decoration: none; 
    font-weight: 500;
    padding: 6px 0; 
    margin: 0 4px; 
    display: inline-block; 
    position: relative;
    transition: color 0.3s ease;
}

.menu a::after {
    content: ""; 
    position: absolute; 
    left: 50%; 
    bottom: -6px;
    width: 0; 
    height: 3px; 
    background-color: var(--acc2);
    transition: width 0.3s ease, left 0.3s ease;
}

.menu a:hover, .menu > li > a.active { 
    color: var(--acc2); 
}

.menu a:hover::after, .menu > li > a.active::after { 
    width: 100%; 
    left: 0; 
    background-color: var(--acc2); 
}

.menu > li.has-sub.active > a, .menu > li.has-sub.active > a::after { 
    color: var(--dom); 
    background-color: var(--dom); 
}


/* -- SUBMENU -- */

.submenu{
    position:absolute; 
    top:40px; 
    left:0;
    background:var(--white); 
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15); 
    min-width:240px; 
    overflow:hidden;
    transform:translateY(-8px); 
    opacity:0; 
    pointer-events:none; 
    transition:all .28s ease;
    padding: 8px 0;
}

.menu > li:hover .submenu, .menu > li:focus-within .submenu{
    transform:translateY(0); 
    opacity:1; 
    pointer-events:auto;
}

.submenu li a{
    display:flex; 
    align-items:center; 
    gap:10px;
    padding:10px 16px; color:#222; 
    text-decoration:none; 
    font-weight:400;
    border-left:4px solid transparent; 
    transition: background-color .2s, color .2s;
}

.submenu li a:hover, .submenu li a:focus, .submenu li a.active {
    color: var(--acc1); 
    background-color: #F5F6FF;
    border-left:4px solid var(--acc1);
}

.submenu li a::after { 
    content: none !important; 
    width: 0 !important; 
    height: 0 !important; 
}

/* -- BUSCADOR -- */

.search{
    background:var(--acc1); 
    padding:6px 12px; 
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.search input{
    border:0;
    background:transparent;
    outline:none;
    width:140px;
    color:white
}

.search input::placeholder { 
    color: rgba(255, 255, 255, 0.7); 
}

.search span { 
    color: white; 
}

/* -- MENU HAMBURGUESA -- */

.hamburger{
    display:none; 
    width:42px;
    height:36px;
    border-radius:8px;
    border:1px solid rgba(0,0,0,0.06);
    background:white;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}


#hero{
    margin-top:72px; 
    height:calc(100vh - 72px); 
    position:relative; 
    overflow:hidden;
}

.hero-text{
    position:absolute; 
    z-index:30; left:50%; 
    top:25%; 
    transform:translateX(-50%);
    text-align:center; 
    padding:0 20px; 
    max-width:1100px; 
    color:var(--texto);
}

.hero-text .sub{
    color:var(--acc2);
    letter-spacing:4px;
    margin-bottom:8px;
    font-weight:600
}

.hero-text h1{
    font-size:clamp(28px,5vw,56px);
    line-height:1.02;
    margin:6px 0 10px;
    font-weight:700;
    color:rgba(17,17,17,0.95)
}

.hero-text p{
    max-width:760px;
    margin:0 auto;
    color:rgba(0,0,0,0.6)
}

.hero-cta{
    margin-top:22px;
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap
}

/* -- BOTONES -- */

.btn{
    padding:12px 20px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    transition:0.25s;
}

.btn-primary{
    background:var(--dom);
    color:#000;
    box-shadow:0 4px 14px rgba(0,254,131,0.25);
}

.btn-secondary{
    background:var(--white);
    border:2px solid var(--acc1);
    color:var(--acc1);
}

.btn-secondary:hover{
    background:var(--acc1);
    color:white;
}

.slide img{
    opacity: 35%;
}

#r1:checked ~ .indicators label[for="r1"], #r2:checked ~ .indicators label[for="r2"], #r3:checked ~ .indicators label[for="r3"]{
    background:var(--dom);
}

/* -- CATEGORIAS -- */

.category-page {
    padding-top: 90px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}

.content-grid-wrap {
    display: flex;
    gap: 30px;
}

/* BARRA LATERAL DE FILTROS */
.sidebar-filters {
    flex: 0 0 280px;
    padding: 20px; 
    background: #fff; 
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    height: fit-content;
    position: sticky; 
    top: 90px;
}

.filter-header h3{
    color:var(--acc1); 
}

.filter-group h4{ 
    color:var(--acc2); 
    font-weight:600; 
}

.filter-group input[type="checkbox"],
.filter-group input[type="radio"] { 
    accent-color: var(--dom); 
}


/* -- CONTENT CARD -- */

.content-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.card-image { 
    height: 180px;
}

.read-more { 
    color: var(--acc1); 
}

.read-more:hover { 
    color: var(--dom);
    }

/* -- SECCIÓN DE ARTÍCULOS -- */

.article-page {
    padding-top: 90px; 
    max-width: 1200px; 
    margin: 0 auto;
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 40px;
}

.article-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.article-body h2 { 
    border-bottom: 3px solid var(--dom); 
}

.article-body h3 { 
    color: var(--acc1); 
}

.dom-quote { 
    background: rgba(0, 254, 131, 0.1); 
    border-left: 6px solid var(--dom); 
}
.sidebar-box h4 { 
    color: var(--acc1); 
}

.dom-bg { 
    background: var(--dom); 
    color: var(--texto); 
}

.related-item a { 
    color: var(--acc1); 
}

.related-item a:hover { 
    color: var(--dom); 
}

.similar-articles-section h3 { 
    border-bottom: 2px solid var(--acc2); 
}

.similar-cards-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* -- FOOTER -- */

.footer { 
    background-color: #1f2a35;
    color: #ecf0f1; 
    padding: 50px 25px 25px; 
}

.footer-wrap { 
    max-width: 1300px; 
    margin: 0 auto; 
    padding-bottom: 30px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
}

.footer-col h3, .footer-col h4 { 
    color: #00FE83; 
    margin-bottom: 15px; 
    font-weight: 700; 
    font-size: 1.2em; 
}

.footer-col p, .footer-col li { 
    font-size: 0.95em; 
    line-height: 1.7; 
    color: #d0d7db; 
}

.footer-col ul { 
    list-style: none;
    padding: 0; 
}

.footer-col a { 
    color: #bdc3c7; 
    text-decoration: none; 
    transition: 0.3s ease; 
}

.footer-col a:hover { 
    color: #ffffff; 
}

.social-icons a { 
    background-color: rgba(255, 255, 255, 0.06); 
    width: 40px; 
    height: 40px; 
    margin-right: 12px; 
    border-radius: 8px; 
    transition: 0.3s ease; 
}

.social-icons a:hover { 
    background-color: #00FE83; 
    color: #1f2a35; 
    transform: translateY(-4px); }

.footer-bottom { 
    text-align: center; 
    padding-top: 25px; 
    font-size: 0.85em; 
    color: #96a0a4; }


/* -- RESPONSIVE -- */

@media (max-width: 900px){

    .nav-wrap{
        padding:12px 16px
    }

    .hamburger{
        display:flex
    }

    .search{display:none} 

    .menu{
        display:none;
        position:absolute;
        left:0px;
        right:16px;
        flex-direction:column;
        background:#fff;
        padding:12px;
        border-radius:10px;
        box-shadow:0 8px 30px rgba(0,0,0,0.12)
    }

    #menu-checkbox:checked + .hamburger + nav .menu{display:flex}

    .submenu {
        position: static; 
        opacity: 1; 
        transform: none; 
        box-shadow: none; 
        padding-left: 0;
        background: #f7f7f7;
        margin-top: 5px; 
        border-radius: 0;
    }

    .submenu li a{ 
        padding-left: 20px; 
    }

    .content-grid-wrap {
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-filters {
        position: static;
        flex: 1 1 100%;
    }

    .article-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 700px){
    .hero-text{
        top:15%;
    } 

    .hero-text h1{
        font-size:clamp(22px,6vw,36px)
    }

    .hero-text p{
        font-size:14px
    }

    .btn{
        padding:10px 14px
    }

    .indicators{
        bottom:18px
    }

    .content-grid {
        grid-template-columns: 1fr; 

    .similar-cards-wrap {
        grid-template-columns: 1fr;
    }
}


/* -- TABLET -- */

@media (min-width: 768px) and (max-width: 991px) {
    .search{
        display:flex;
    }

    .hamburger{
        display:none;
    }

    .menu{
        display:flex !important;
    } 

    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-grid-wrap {
        flex-direction: row;
    }

    .sidebar-filters {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .content-grid-wrap > div:nth-child(2) {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .article-container {
        grid-template-columns: 7fr 5fr;
    }

    .similar-cards-wrap {
        grid-template-columns: repeat(2, 1fr);
    }