/* 
    Created on : 9 ago 2025, 8:50:12 p.m.
    Author     : edgarreyessuarez
*/
/* Estilos light dark*/ 
    :root {color-scheme: light dark; --color-bg: linear-gradient(to bottom, #fdfdfd, #ddd); --color-text: #111; --color-nav: #ffffff; --color-border: #333; --color-card: #fefefe; --primary-color: #3c6e8f; --placeholder-color: #333; --main-color: #7DB8C7;
      --text-color: #1a1a1a;
      --bg-color: #ffffff;
      --subtext-color: #666;
      --button-text: #ffffff;
      --button-bg: #3c6e8f;
      --button-bg-hover: #30596f;
      --card-shadow: rgba(0, 0, 0, 0.08);
      --card-shadow-hover: rgba(0, 0, 0, 0.3);
      --over-bg: #999;
      --body-color: #839FAE;
      --fill-svg-color: #fff;
      --bg-logo: url('https://api.teeknic.com/assets/img/logo/LogoTeeknic_B.svg');
      --bg-perfil: url('https://api.teeknic.com/assets/icons/perfil.svg');
      --bg-setup: url('https://api.teeknic.com/assets/icons/ajustes.svg');
      --bg-help: url('https://api.teeknic.com/assets/icons/ayuda.svg');
      --bg-facebook: url('https://api.teeknic.com/assets/icons/facebook.svg');
      --bg-instagram: url('https://api.teeknic.com/assets/icons/instagram.svg');
      --bg-x: url('https://api.teeknic.com/assets/icons/twitter-alt.svg');
      --bg-linkedin: url('https://api.teeknic.com/assets/icons/linkedin.svg');
      --bg-tiktok: url('https://api.teeknic.com/assets/icons/tik-tok.svg');
    }
    @media (prefers-color-scheme: dark) {
      :root {--color-bg: #222; --color-text: #eee; --color-nav: #1f1f1fcc; --color-border: #aaa; --color-card: #121212; --main-color: #7DB8C7;

        --text-color: #f2f2f2;
        --color-bg: linear-gradient(to bottom, #121212, #333);
        --subtext-color: #bbb;
        --button-text: #ffffff;
        --button-bg: #4c9fd3;
        --button-bg-hover: #397aa1;
        --card-shadow: rgba(0, 0, 0, 0.08);
        --card-shadow-hover: rgba(0, 0, 0, 0.3);
        --over-bg: #222;
        --placeholder-color: #aaa;
      --body-color: #121212;
      --fill-svg-color: #fff;
      --bg-logo: url('https://api.teeknic.com/assets/img/logo/LogoTeeknic_W.svg');
      --bg-perfil: url('https://api.teeknic.com/assets/icons/perfil_w.svg');
      --bg-setup: url('https://api.teeknic.com/assets/icons/ajustes_w.svg');
      --bg-help: url('https://api.teeknic.com/assets/icons/ayuda_w.svg');
      --bg-facebook: url('https://api.teeknic.com/assets/icons/facebook_w.svg');
      --bg-instagram: url('https://api.teeknic.com/assets/icons/instagram_w.svg');
      --bg-x: url('https://api.teeknic.com/assets/icons/twitter-alt_w.svg');
      --bg-linkedin: url('https://api.teeknic.com/assets/icons/linkedin_w.svg');
      --bg-tiktok: url('https://api.teeknic.com/assets/icons/tik-tok_w.svg');
      }

    }
    @font-face { font-family: orbitron; src: url(resources/font/Orbitron/Orbitron-ExtraBold.ttf); }

    * {box-sizing: border-box; margin: 0; padding: 0;}
    body {font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color:var(--body-color); color: var(--color-text); padding-top: env(safe-area-inset-top);}
    header {top: 20px; left: 50%; transform: translateX(-50%);display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.8rem; max-width: 1200px; z-index: 98; background-color: transparent; border-bottom: solid 0.5px white; box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 8px 15px rgba(255,255,255,0.3); }
    header.scrolled {background-color: rgba(52,119,144,0.6); border-color:#839FAE; transition: background-color 1s ease, box-shadow 1s ease, border-color 1s ease;;}
    nav{display: flex;}
    nav.desktop-nav {align-items: center; height: 40px;}
    nav.desktop-nav a {color: white; text-decoration: none; padding: 0.5rem 1rem; transition: background 0.3s;}
    nav.desktop-nav a:hover, .icon-btn:hover, .logo-teeknic:hover {background-color: rgba(255, 255, 255, 0.2); cursor: pointer;}
    main {}
    section{padding: 1rem; margin-bottom: 5rem;}
    /*section.grid-container {padding: 10px; }*/
    aside  {padding: 10px;}
    .scroll-bar::after{left: 0; bottom: 0; position: fixed; z-index: 5000; content:""; height: .5em; width: 100%; background: var(--main-color); border-radius:9999px; transform-origin: top left; animation: progress-scale linear; animation-timeline: scroll();}
   
/*Columns*/
.halfs, .thirds, .quarters, .fifths{display: grid; gap: 2rem; }
.parte-4, .thirds {grid-template-columns: repeat(4, 1fr);}
.parte-4, .quarters {grid-template-columns: repeat(4, 1fr);}
.parte-5, .fifths {grid-template-columns: repeat(5, 1fr);}


/*Logo*/
.logo-teeknic {display: flex; align-items: center; gap: 0.5rem; margin-right: 0.8rem; padding:5px;}
.logo-teeknic img, .logo-teeknic i {height: 35px; width: 35px;}
.tema-img {width: 150px; height: auto; border-radius: 10px; margin:.1%;}
.img-claro {display: block;}
.img-oscuro {display: none;}

/* Main Header */
.header-text {padding: 70px 40px; display: flex; flex-direction: column; align-items: center; width:100%;}
.header-text h1{font-size: 4rem;}
.header-text h1 sup{font-size: 2rem; font-weight: lighter;}
.header-text p{font-size: 1.2rem; max-width: 700px; text-align: center;}

/* Page Container */
#body-container{display: none; width: 100%; background: var(--color-bg);}
#body-container.active{display:block; transition: display 0.3s ease-in-out;  z-index: 4;}
.container {display: flex; flex-wrap: wrap; width: 100%; min-height: 300px; background-color: var(--color-bg);}

.subtitulo {text-align: left; margin: 40px 20px 10px 20px;}
.subtitulo h2 {font-size: 1.5rem; color: var(--color-text); margin-bottom: 5px; font-weight: 700;}
.subtitulo .descripcion {font-size: 1.1rem; color: #aaa; line-height: 1.5;}

/* Card */
article.card{height:450px; overflow: hidden; display: flex; flex-direction: column; padding: 0%; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.card-content-title {font-size: 1.2rem; font-weight: bold; margin-bottom: 4px;}
.card-content-category, .card-content-date {font-size: 0.9rem; color: #ccc;}
.card-content-description {font-size: 0.95rem; color: #eee; margin-bottom: 60px; /* Deja espacio para el footer */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.card-content-footer {position: absolute; bottom: 16px; width: 100%; display: flex; justify-content: center; z-index: 3;}
article.card, article.square {animation-fill-mode:both; animation-timeline: view(); animation-range:0% 20%; animation-name: card-appear;}


/* Rating */
.rating {display: flex; align-items: center; gap: 2px; font-size: 1rem; color: #f5b301;}
.rating .star-empty {color: #ccc;}

/* Pill button */
.pill-button { margin: 5px; align-self: center; color: var(--button-text); border: none; padding: 10px 24px; font-size: 0.95rem; transition: background-color 0.3s ease; flex-shrink: 0;}
.pill-button:hover, .carousel-caption a.read-more:hover, .square-button:hover {background-color: var(--button-bg-hover); cursor: pointer;}

/* CARD CUADRADA */
article.square {overflow: hidden; display: flex; flex-direction: column; width: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; justify-content: center;}
.overlay-text {max-width: 70%;}
.overlay-text h3 {margin: 0; font-size: 1.1rem; font-weight: bold;}
.overlay-text .card-category, .overlay-text .card-date, .overlay-text .rating {font-size: 0.8rem; color: #ddd; margin-top: 2px;}


/* Card Banner */
.card-banner {width: 100%; height: 400px; overflow: hidden; display: flex; align-items: center; color: white;}
.card-banner img {top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.3s ease;}
.card-banner:hover img {transform: scale(1.05);}
.card-banner-content {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding-left: 5%; max-width: 500px;}
.tag {background-color: #ffcc00; color: #333; font-size: 12px; font-weight: bold; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;}
.card-banner h3 {font-size: 2.5rem; font-weight: bold; margin-bottom: 10px; text-shadow: 3px 3px 8px black;}
.description {font-size: 1.3rem; line-height: 1.5; margin-bottom: 18px; text-shadow: 3px 3px 8px black;}

.card-preview {display: flex; flex-wrap: wrap; overflow: hidden;}
.card-banner-container {flex: 3; min-width: 300px; height: 400px;}
.text-container {flex: 1; min-width: 250px; padding: 50px; display: flex; flex-direction: column; justify-content: center;}
.text-container h2 {font-size: 22px; margin-bottom: 12px; color: var(--color-text); }
.text-container p {font-size: 15px; color: var(--color-text); line-height: 1.5;}

/* Icon Button */
.icon-btn {background: var(--system-bg);}
.icon-btn i, .logo-teeknic i, .mobile-menu a i, .logo-teeknic i, .footer-link i {display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: center;}
.icon-btn i, .footer-link i {width: 18px; height: 18px; }
.logo-teeknic i{height: 35px; width: 35px;}

/* Clase específica para ícono de usuario */
.icon-user {background-image: url("https://api.teeknic.com/assets/icons/perfil_w.svg");}
.icon-search {background-image: url("https://api.teeknic.com/assets/icons/busqueda.svg");}
.icon-facebook{background-image: var(--bg-facebook);} 
.icon-instagram {background-image: var(--bg-instagram);}
.icon-x {background-image: var(--bg-x);}
.icon-linkedin {background-image: var(--bg-linkedin);}
.icon-tiktok {background-image: var(--bg-tiktok);}
.icon-teeknic-w {background-image: url("https://api.teeknic.com/assets/img/logo/LogoTeeknic_W.svg");}
.icon-teeknic-w {background-image: url("https://api.teeknic.com/assets/img/logo/LogoTeeknic_W.svg");} 
.icon-perfil {background-image: var(--bg-perfil);}
.icon-setup {background-image: var(--bg-setup);}
.icon-help {background-image: var(--bg-help);}
.icon-btn img, .icon-btn svg {fill: white; width: 18px; height: 18px;}
.square-button, .icon-btn {border: none; width: 40px; height: 40px; color: white; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; flex-shrink: 0;}



  /* Overlay difuminado */
#overlay { top: 0; left: 0; right: 0; bottom: 0;  opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 99;}
#overlay.active {opacity: 1; pointer-events: auto;}


/*Position*/
.fixed, header, #overlay, #search-modal, #results, #login-modal, .mobile-menu, .popUp, #preloader {position: fixed;} 
.absolute, .carousel-caption, .card-banner img, .card-overlay, #user-menu, .slider, .favorite-icon, .slider::before, .loader-circle::before, .logo-loader, article.card img, .full-overlay  {position: absolute;}
.relative, .carousel, article.card, .card-content, .card-banner, .card-container, .switch, article.square, .loader-circle, #body-container {position: relative;}

/* BackGround Color */
article.card, .card-preview, .text-container, .trending-list, .trending-item, .ad-banner, article.square, .related-list a.pill {background-color: var(--color-card);}
.square-button, .pill-button{background-color: var(--button-bg);}


/* Shadow */
.card-shadow, article.card, .card-banner, .card-preview, article.square .trending-list, .ad-banner {box-shadow: 0 10px 20px var(--card-shadow);}
#search-modal, #results, #login-modal, .mobile-menu, .popUp, #user-menu {box-shadow: 0 15px 24px rgba(0,0,0,0.8), inset 0 8px 15px rgba(255,255,255,0.3);}

/* Rounded */
.rounded-40, article.card, .card-banner, .card-preview, #results, #login-modal, .popUp, .mobile-menu, article.square, .trending-list, .trending-item, .ad-banner, article.card-article {border-radius: 40px;}
.rounded-30, .result-item{border-radius: 30px;}
.rounded-25, .result-image {border-radius: 25px;}
.rounded-8 {border-radius: 8px;}

 /*pill-style*/
.pill, .pill-button, .carousel-caption a.read-more, #search-modal, .slider, .related-list a.pill, header, nav.desktop-nav a, input[type="text"], input[type="email"], input[type="password"] {border-radius: 999px;} 


 /*Circle*/
.carousel-indicators button, .icon-btn, .square-button, .trending-item img, .logo-teeknic {border-radius: 50%;}

/* Square */
.square {aspect-ratio: 1 / 1;}

/* Resalt Scale Card */
article.card:hover, article.square:hover, .trending-item:hover, .related-list .pill:hover {animation: highlight 0.2s ease-in-out forwards; box-shadow: 0 15px 28px var(--card-shadow-hover); z-index: 1;}
.result-item:hover, #user-menu li:hover {background-color: rgba(52,119,144,0.3); cursor: pointer;}

/* Blur Effect */
.blur-5 {backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(5px);}
.blur-10, #overlay{backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.blur-20{backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* soporte Safari */}
.blur-half, #search-modal, #results, #user-menu, #login-modal, .mobile-menu, .popUp, header {backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);}

 /*Traslucid Effect*/
.traslucid-10, #search-modal, #results,  #login-modal, .mobile-menu {background-color: color-mix(in srgb, var(--color-bg) 20%, transparent);}
.traslucid-30, #overlay, .popUp {background-color: color-mix(in srgb, var(--over-bg) 30%, transparent);}
.traslucid-half{background-color: color-mix(in srgb, var(--color-bg) 50%, transparent);}
.traslucid-80, #user-menu{background-color: color-mix(in srgb, var(--color-card) 80%, transparent);}

 /*Gradient Transparent*/
.black-gradient, .carousel-caption, .card-overlay, .full-overlay {background: linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.9) 90%);}

/* HV Centered Modal */
#login-modal, .popUp {top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5);}

 /*Horizontal Centered*/

/* Auto Overflow */
.mobile-menu, #results, #user-menu, .popUp {overflow-y: auto;}

/* Scroll personalizado */
#results::-webkit-scrollbar, .mobile-menu::-webkit-scrollbar, .popUp::-webkit-scrollbar {width: 8px; background: transparent;}
#results::-webkit-scrollbar-thumb, .mobile-menu::-webkit-scrollbar-thumb, .popUp::-webkit-scrollbar-thumb{background: rgba(125, 184, 199, 0.6); border-radius: 4px;}
#results::-webkit-scrollbar-track, .mobile-menu::-webkit-scrollbar-track, .popUp::-webkit-scrollbar-track{background: rgba(255, 255, 255, 0.05);}

/* Over */
#search-modal, #results, .mobile-menu, .popUp {z-index: 999;}

/* Image Cover */
img.coverfit, .card-image-container img, article.square img, article.card img, .carousel-slide img, .result-image img  {width: 100%; height: 100%; object-fit: cover; display: block;}

/* Caption Overlay */
.caption-overlay, .carousel-caption, .card-overlay, .full-overlay {bottom: 0; left: 0; width: 100%; padding: 20px; color: white; z-index: 2;}
.full-overlay {height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.card-overlay{display: flex; justify-content: space-between; align-items: flex-end;}
.carousel-caption {padding-bottom: 80px; padding-left:7%;}


/*Carousel*/
.carousel {width: 100%; height: 95vh; overflow: hidden;}
.carousel-track {display: flex; height: 100%; transition: transform 0.5s ease-in-out;}
.carousel-slide {flex: 0 0 100%; position: relative;}
.carousel-caption h3 {margin: 0; font-size: 5rem; font-weight: bold; width: 45%;}
.carousel-caption p {margin: 5px 0; font-size: 1.5rem;  width: 45%;}
.carousel-caption .meta {font-size: 0.9rem; color: #ccc;}
.carousel-caption a.read-more {font-size: 0.95rem;display: inline-block; padding: 7px 20px; color: #fff; background-color: var(--button-bg); text-decoration: none; margin-top: 10px;}
.carousel-indicators {position: absolute; bottom: 20px; width: 100%; text-align: center;}
.carousel-indicators button {width: 12px; height: 12px; margin: 0 5px; border: none; background-color: rgba(255, 255, 255, 0.5); cursor: pointer;}
.carousel-indicators button.active {background-color:  var(--button-bg);}

  /* Modal búsqueda tipo spotlight */
#search-modal {top: 15vh; left: 50%; transform: translate(-50%, -20%) scale(0.8); padding: 0.75rem 1rem; width: 90%; max-width: 700px; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; pointer-events: none;  display: flex; align-items: center; }
#search-modal.active {opacity: 1; pointer-events: auto; animation: fadeZoomIn 0.4s ease-in-out forwards;}
#search-input {flex: 1; background: transparent; border: none; outline: none; padding: 0.75rem 1rem; color: var(--color-text); font-size: 1.25rem;}
#search-input::placeholder {color: var(--placeholder-color);}
#close-btn {margin-left: 1rem; background: transparent; border: none; color: var(--color-text); font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0 0.25rem;}
#close-btn:hover {color: rgba(0, 123, 255, 0.8);}
#results {top: calc(15vh + 40px);  left: 50%; transform: translateX(-50%) scaleY(0); transform-origin: top center; transition: transform 0.3s ease, opacity 0.3s ease; width: 90%; max-width: 700px; max-height: calc(100vh - 30vh); /* dinámico según altura de pantalla */ opacity: 0; padding: 0.5rem;}

/* Mostrar resultados con animación desde arriba */
#results.active {transform: translateX(-50%) scaleY(1); opacity: 1;}

 /* Result Item */
.result-item {display: flex; padding: 0.5rem; align-items: center;  transition: background-color 0.15s ease;}
.result-item:hover {background-color: rgba(52,119,144,0.3); cursor: pointer;}
.result-image {width: 80px; height: 80px; overflow: hidden; margin-right: 1rem;}
.result-info {flex: 1; display: flex; flex-direction: column;}
.result-title {color: var(--color-text); font-weight: bold; font-size: 1.1rem; text-decoration: none; margin-bottom: 0.25rem;}
.result-description {font-size: 0.9rem;color: var(--color-text);}
.result-date {font-size: 0.8rem; color: var(--color-text);}
.loader {width: 48px; height: 48px; border: 5px solid rgba(52,119,144,0.3);border-top-color: #839FAE; border-radius: 50%; animation: spin 1s linear infinite; margin: 2rem auto;}



/* Menú de usuario */
#user-menu {top: 100%; right: 1rem; color: var(--color-text); border-radius: 12px; min-width: 200px; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 5; visibility: hidden;}
#user-menu.active {pointer-events: auto; animation: slideDown 0.3s ease-in-out forwards;}
#user-menu {will-change: opacity, transform;}
#user-menu ul {list-style: none; margin: 0; padding: 0.5rem 0;}
#user-menu li {padding: 0.75rem 1rem; cursor: pointer;}

/* Modal de login */
#login-modal {padding: 2rem; width: 90%; max-width: 400px; display: none; flex-direction: column; align-items: center;  z-index: 100; color: var(--color-text); animation: fadeZoomIn 0.4s ease-in-out forwards; }
#login-modal.active {display: flex;}
.modal-logo {width: 100px; height: auto; margin-bottom: 1rem;}
.modal-title {font-size: 1.25rem; margin-bottom: 1.5rem;}
#login-modal input {margin-bottom: 1rem;}
#login-modal input::placeholder {color: var(--placeholder-color);}
.modal-links {margin-top: 1rem; text-align: center;}
.modal-links a {color: #ddd; text-decoration: none; margin: 0 0.5rem; font-size: 0.9rem;}
.modal-links a:hover {text-decoration: underline; cursor: pointer;}

 /*Menu Movil*/
.mobile-menu {top: 0; left: -400px; width: 300px; height: 100%; transition: transform 0.3s ease; display: flex; flex-direction: column; padding: 80px 1rem 1rem; margin:5px;}
.mobile-menu.active {transform: translateX(400px);}
.mobile-menu-header {text-align: center; margin-bottom: 1rem;}
.mobile-menu-header img {width: 60px; height: 60px; margin: 0 auto; margin-bottom: 0.3rem;}
.mobile-menu-header h1 {color: var(--color-text); font-size: 1.2rem; margin: 0;}
.mobile-menu hr {border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 0.5rem 0;}
.menu-group-title {color: var(--color-text); font-size: 0.85rem; text-transform: uppercase; margin: 0.75rem 0 0.25rem; opacity: 0.6; padding-left: 0.5rem;}
.user-info {color: var(--color-text); font-size: 0.9rem; margin-bottom: 1rem; display: none; align-items: center;}
.user-info img {width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 0.5rem;}
.user-text {display: flex; flex-direction: column;}
.user-text strong {font-size: 1rem; margin-bottom: 0.2rem;}
.user-text span {font-size: 0.75rem; opacity: 0.8;}
.mobile-menu a {color: var(--color-text); display: flex; align-items: center; padding: 1rem; text-decoration: none; transition: background 0.3s;}
.mobile-menu a:hover {background-color: rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer;}
.mobile-menu a img, .mobile-menu a i {margin-right: 0.5rem; width: 20px; height: 20px;}


/* PopUp */
.popUp {padding: .25rem; display: none; pointer-events: none; width: 95%; max-width: 1024px; max-height: 90vh; flex-direction: column; align-items: center; color: var(--system-fg); }
.popUp.active {display: flex; pointer-events: auto; transition: opacity 0.4s ease, transform 0.4s ease; animation: fadeZoomIn 0.4s ease-in-out forwards;}
.popUp-content {padding: 2rem; width:95%;}
.popUp-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
.popUp-header h2 {font-size: 1.5rem; margin: 0; text-align: left;}
.popUp-header h2 small{font-size: 1rem; font-weight: normal;}
.popUp-header img {width: 80px; height: auto;}
.popUp-columns {display: flex; flex-wrap: wrap; gap: 2rem;}
.popUp-column {display: flex; flex: 1 1 45%; flex-direction: column; gap: 1.5rem; margin: 1rem 0.5rem;}
.popUp-column p {margin: .5rem; text-align: justify;}
.popUp-footer {text-align: center; margin-top: 1.5rem;}
.popUp-footer button{min-width: 200px; margin: .8rem;}
.popUp form {display: flex; flex-wrap: wrap; gap: 0.01rem; margin-bottom: 2rem;}
.form-group {display: flex; flex-direction: column;}
.form-group label {margin-bottom: 0.4rem; font-weight: 600;}
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], #login-modal input {padding: 0.8em 1.2em; border: 1px solid var(--color-border); background: transparent; font-size: 1rem; color: var(--color-text); outline: none; width: 100%; }
.form-group input::placeholder{color: var(--placeholder-color);}
.form-group input:hover, .form-group input:focus, #login-modal input:hover, #login-modal input:focus {background-color: rgba(105,186,201,0.1); border: 1px solid #ccc; transition: 0.4s;}
.toggle-list {display: flex; flex-direction: column; gap: 1rem; padding-left: 1rem; }
.toggle-slide {display: flex; align-items: center; justify-content: flex-start; gap: 1rem;}
.toggle-slide .switch-label {flex: none; min-width: 80px; font-size: 1rem;}
.toggle-slide .switch-label {flex: 1;}
.switch-wrapper {display: flex; align-items: center; margin-bottom: 1rem; width: 100%;}
.switch-label {margin-left: 0.5rem; min-width: 80px; font-size: 0.9rem;}
.switch-label a{color: var(--color-text); font-weight: bold; text-decoration: none;}
.switch-label a:hover{color: #839FAE;}
.switch {width: 40px; height: 22px;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s;}
.slider::before {content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s;}
.switch input:checked + .slider {background-color: rgba(105,186,201, 0.4);}
.switch input:checked + .slider::before {transform: translateX(18px);}


/* Footer */
footer {background-color: rgba(105,186,201, 0.3); padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; border-top: 1px solid rgba(0,0,0,0.1);margin-top:2rem;}
.footer-header {text-align: center; margin-bottom: 2rem;}
.footer-header img {width: 80px; border-radius: 12px;}
.footer-header h2 {margin-top: 0.5rem; font-size: 1.5rem; font-weight: bold;}
.footer-columns {display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; width: 100%; max-width: 960px;}
.footer-column {flex: 1; min-width: 200px;}
.footer-column h3 {margin-bottom: 0.75rem;}
.footer-link {display: flex; align-items: center; margin: 0.5rem 0; padding: 0.5rem; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.3s;}
.footer-link:hover {background-color: rgba(0, 0, 0, 0.1);}
.footer-link svg, .footer-link i {margin-right: 0.5rem;}
.footer-bottom {width: 100%; max-width: 960px; border-top: 1px solid rgba(0,0,0,0.2); margin-top: 2rem; padding-top: 1rem; text-align: center; font-size: 0.9rem; color: rgba(0,0,0,0.6);}

/* Favorite icon */
.favorite-icon {top: 12px; right: 20px; font-size: 1.5rem; color: #bbb; cursor: pointer; user-select: none; z-index: 5; transition: color 0.3s ease, transform 0.2s ease;}
.favorite-icon.active {color: #e74c3c; transform: scale(1.2);}

/* CONTENEDOR Y GRID */
#contenedor-parte5 {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}


/* Trending list */
.aside-content {display: flex; flex-direction: column; width: 100%; gap: 1rem;}
.trending-list {display: flex; flex-direction: column; width: 100%; gap: 0.5rem; padding: 10px;}
.trending-item {display: flex; flex-direction: row; width: 100%; align-items: center; gap: 1rem; padding: 0.25rem 0.75rem; text-decoration: none; color: inherit; transition: all 0.3s ease;}
.trending-item:hover {transform: scale(1.03); background-color: rgba(52,119,144,0.3);}
.trending-item img {width: 48px; height: 48px; object-fit: cover; flex-shrink: 0;}
.trending-info {display: flex; flex-direction: column; flex: 1;}
.trending-info h4 {margin: 0; font-size: 1rem; font-weight: 600;}
.trending-info small {font-size: 0.75rem; color: gray;}

.ad-banner {height: 300px; width: 100%;}


/* Columna derecha: artículo */
article.card-article {flex: 1 1 75%; max-width: 75%; background: var(--color-card); padding: 2rem;}
article.card-article h1 {font-size: 2rem; margin-bottom: 0.5rem;}
article.card-article p {margin: 0.5rem 0;}
article.card-article .rating {margin: 1rem 0; font-size: 1.2rem; color: var(--color-accent);}
article.card-article figure {margin: 2rem 0; text-align: center;}
article.card-article figure img {width: 100%; border-radius: 6px;}
article.card-article figcaption {font-size: 0.9rem; color: #555;}
article.card-article figcaption a {text-decoration: none; color: #007acc;}
article.card-article figcaption a:hover {color: #004b70;}
article.card-article .sources h4 {margin-top: 2rem;}
article.card-article .sources ul {list-style: none; padding-left: 0;}
article.card-article .sources li a {text-decoration: none; color: #444; display: inline-block; margin-bottom: 0.3rem;}
article.card-article .sources li a:hover {color: var(--color-primary);}
article.card-article .social-share button {margin: 0.3rem; padding: 0.5rem 1rem; border: none; background-color: var(--main-color); color: white; border-radius: 4px; cursor: pointer;}
article.card-article .social-share button:hover {background-color: #005e99;}

/* Columna izquierda: artículos relacionados y más buscados */
aside.sidebar {flex: 1 1 25%; max-width: 25%;}
.related-list {display: flex; flex-direction: column; padding: 10px;}
.related-list a.pill {padding: 0.6rem 1rem; margin-bottom: 0.6rem; border: none; text-align: left; width: 100%; transition: all 0.2s ease; text-decoration: none; font-size: .85rem; display:block; color: #333;}
.related-list .pill:hover {cursor: pointer; background-color: #e6f4ff;}


/* Comentarios */
.comments {margin-top: 2rem;}
.comments textarea {width: 100%; height: 100px; padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; resize: vertical; font-family: inherit;}
.rating-stars {display: flex; margin-top: 0.5rem;}
.rating-stars span {font-size: 1.5rem; color: #ccc; transition: color 0.2s; cursor: pointer;}
.rating-stars span.hover, .rating-stars span.selected { color: #f5b301; }
.comments button {margin-top: 0.8rem; background-color: var(--color-primary); color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;}
.comments button:disabled {background-color: #999; cursor: not-allowed;}
.comment-item {margin-top: 1rem; border-top: 1px solid #ccc; padding-top: 1rem;}
.comment-item .stars {color: #f5b301; font-size: 1.1rem;}



#preloader {top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.8s ease, visibility 0.8s ease;}
.preloader-content {text-align: center;}
.loader-circle {width: 100px; height: 100px; margin: 0 auto;}
.loader-circle::before {content: ''; box-sizing: border-box; top: 0; left: 0; width: 100px; height: 100px; border: 8px solid #ddd; border-top: 8px solid var(--main-color); border-radius: 50%; animation: spin 1s linear infinite; z-index: 1;}
.logo-loader {top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; }
#preloader.fade-out {opacity: 0; visibility: hidden;} 


/* Distribución para pantallas grandes */
@media (min-width: 1800px) {
    main {width: 80%; /* 5/6 */}
    aside {width: 20%; /* 1/6 */}
    .container {width: 90%;flex-direction: row; margin: 0 auto;}
}
@media (max-width: 1799px) {
  main , aside, .container {width: 100%;}
  .aside-content {flex-direction: row; flex-wrap: nowrap; gap: 1rem; justify-content: space-between; align-items: flex-start;}
  .ad-banner {min-height: 300px;}

}
@media (max-width: 1295px){
  .quarters, .fifths {grid-template-columns: repeat(4, 1fr);}
}

@media (max-width: 1366px) and (min-width: 1025px) {
  .trending-list {display: grid; grid-template-columns: repeat(3, 1fr); width: 75%;}
  .ad-banner {width: 25%;}
  .trending-item {flex-direction: row; width: 100%;}

}
@media (min-width: 1133px) and (max-width: 1210px) {
  /*.card-content {gap: 0.0001rem; padding-top: 5px; margin-bottom: 15px;}
  .card-description{margin-bottom:0;}
  .card-image-container {height: 52%;} */
}
@media (width: 1180px) {
  /*.card-content {gap: 0.10rem; padding-top: 5px; margin-bottom: 10px;}
  .card-description{margin-bottom:0;}*/
}
@media (max-width: 1024px) and (min-width: 744px) {
  .trending-list {display: grid; grid-template-columns: repeat(1, 1fr); width: 50%;}
  .ad-banner {width: 50%;}
}
@media(max-width: 1024px){
  .related-list {display: none;}
  .main-container {flex-direction: column;}
  aside.sidebar, article.card-article {max-width: 100%;}
  .quarters, .fifths {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 853px) {
    nav.desktop-nav {display: none;}
}
@media (min-width: 768px) {
  .popUp-columns {flex-direction: row;}
}

/* Distribución para móviles */
@media (max-width: 767px) {
    main, aside {width: 100%;}
    .container {flex-direction: column;}
    header {padding: 0.8rem 1rem; width: 95%;}
    .logo img {height: 32px;}
}
@media (max-width: 768px) {
    .carousel-btn {font-size: 1.5rem; padding: 8px 12px;}
    .card-preview {flex-direction: column;}
    .card-container, .text-container {width: 100%; height: auto;}
    .text-container {padding: 20px;}
    aside section{grid-template-columns: 1fr;}
    section.grid {grid-template-columns: 1fr;}
    .switch-label{width: 80%;}
    .popUp-column {flex: 1 1 100%;}
}
@media (max-width: 600px) {
    .card-banner {height: 300px;}
    .card-content {margin-left: 20px; margin-right: 20px; max-width: 90%;}
    .title {font-size: 20px;}
    .description {font-size: 13px;}
}
@media (max-width: 480px) {
    .carousel-caption h3 {margin: 0; font-size: 2.5rem; width: 90%;}
    .carousel-caption p {font-size: 1rem; width: 90%;}
    section.grid {grid-template-columns: 1fr;}
    aside section{grid-template-columns: 1fr;}
    .aside-content {flex-direction: column;}
    .trending-list {flex-direction: column; display: flex; width: 100%;}
    .trending-item {flex-direction: row; width: 100%; align-items: center;}
    .ad-banner {width: 100%; height: 200px;}
    .quarters, .fifths {grid-template-columns: 1fr;}
}
@media(prefers-color-scheme: dark){
    .img-claro {display: none;}
    .img-oscuro {display: block;}
    .footer-bottom {color: rgba(255,255,255,0.6); border-top-color: rgba(255,255,255,0.2);}
}

/* Animations */
@keyframes slideDown {
  0% {opacity: 0; transform: translateY(-50px); }
  100% {opacity: 1; transform: translateY(0); visibility: visible;}
}

@keyframes fadeZoomIn {
  0% {opacity: 0; transform: translate(-50%, -50%) scale(0.5);}
  50% {opacity: 1; transform: translate(-50%, -50%) scale(1.03);}
  75% {opacity: 1; transform: translate(-50%, -50%) scale(0.97);}
  100% {opacity: 1; transform: translate(-50%, -50%) scale(1);}
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes card-appear{
    0% {opacity: 0; transform: translateY(20%) scale(0.8);}
    75% {opacity: 1; transform: translateY(-5%) scale(1.01);}
    }
@keyframes highlight{
    75% {transform: scale(1.05);}
    100% {transform: scale(1.03);}
    }
@keyframes progress-scale{
        from{transform: scaleX(0);}
        to{transform: scaleX(1);}
    }