:root {
    --bg: #FDFAF9;
    --surface: #FFFFFF;
    --surface-alt: #F4EBEA;
    --text: #231412;
    --text-muted: #78625E;
    --border: #E4DAD8;
    --primary: #F6836D;
    --primary-hover: #F46247;
    --on-primary: #111111;
    --primary-text: #302483;
    --accent: #302483;
    --on-accent: #FFFFFF;
    --accent-text: #302483;
    --dark-band: #1E1559;
    --on-dark: #FFFFFF;
    --on-dark-muted: #C3B8B6;
    --brand-btn-bg: #111111;
    --brand-btn-text: #F6836D;
    --section-alt-bg: #F4EBEA;
    --dark-band-bg: #1E1559;
    --brand-band-bg: #F6836D;
    --hero-bg: #1E1559;
    --on-hero: #FFFFFF;
    --footer-bg: #1E1559;
    --on-footer: #FFFFFF;
    --on-footer-muted: #C3B8B6;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Franklin', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-weight: 800;
    line-height: 1.2;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    h2 {
        font-size: clamp(1.4rem, 4vw, 1.85rem);
    }

    h3 {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    }

    h4 {
        font-size: 1.125rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.875rem;
    }

    a[href^="mailto:"],
    a[href^="tel:"] {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ===== header ===== */
.ticker-track {
    display: inline-block;
    animation: tickerScroll 24s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.mobile-menu-overlay.open {
    display: flex !important;
}

/* ===== hero ===== */
#hero {
    overflow: hidden;
}

#hero button:focus {
    outline: 2px solid #F6836D;
    outline-offset: 2px;
}

/* ===== categories ===== */
#categorias button {
    hyphens: auto;
    outline: none;
}

#categorias .js-cat-btn.is-active {
    background-color: var(--accent);
    border-color: var(--primary);
    box-shadow: 6px 6px 0 0 var(--primary);
}

#categorias .js-cat-btn.is-active h3,
#categorias .js-cat-btn.is-active p {
    color: var(--on-dark);
}

#categorias .js-cat-btn.is-active .fa-mobile-alt,
#categorias .js-cat-btn.is-active .fa-laptop,
#categorias .js-cat-btn.is-active .fa-headphones-alt,
#categorias .js-cat-btn.is-active .fa-microchip,
#categorias .js-cat-btn.is-active .fa-tv,
#categorias .js-cat-btn.is-active .fa-satellite-dish {
    color: var(--on-dark);
}

#categorias .js-cat-btn.is-active span:first-child {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* ===== latest_news ===== */
#noticias {
    overflow: hidden;
    hyphens: auto;
}

#noticias button {
    border-radius: 0;
}

#noticias article {
    border-radius: 0;
}

#noticias .js-modal {
    backdrop-filter: blur(4px);
}

/* ===== popular_articles ===== */
#articulos {
    hyphens: auto
}

#articulos button:focus-visible {
    outline: 2px solid #F6836D;
    outline-offset: 2px
}

/* ===== tech_today ===== */
.tech-today-section {
    background-color: #F4EBEA;
    color: var(--text);
    border-color: var(--text);
    overflow: hidden
}

.tech-heading,
.tech-card-title {
    hyphens: auto;
    line-height: 1.2
}

.tech-sticker {
    transform: rotate(-1.5deg);
    transition: transform 0.25s ease;
    box-shadow: 3px 3px 0 var(--primary)
}

.tech-sticker:hover {
    transform: rotate(1.5deg)
}

.tech-image-frame {
    box-shadow: 6px 6px 0 var(--accent)
}

.tech-narrative-card {
    box-shadow: 6px 6px 0 var(--primary)
}

.tech-feature-card {
    box-shadow: 5px 5px 0 var(--accent);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease
}

.tech-feature-card:hover {
    background-color: var(--dark-band);
    color: var(--on-dark);
    border-color: var(--primary);
    transform: translate(-2px, -2px)
}

.tech-feature-card:hover .tech-card-title,
.tech-feature-card:hover .tech-card-desc {
    color: var(--on-dark)
}

.tech-feature-card:hover .tech-card-tag {
    color: var(--primary)
}

.tech-feature-card:hover .tech-icon-box {
    background-color: var(--surface);
    color: var(--accent);
    border-color: var(--primary)
}

/* ===== about ===== */
#sobre-nosotros {
    hyphens: auto;
}

/* ===== gallery ===== */
#galeria {
    hyphens: auto;
}

#galeria article {
    border-radius: 0px;
}

#galeria img {
    border-radius: 0px;
}

/* ===== contact ===== */
#contacto input::placeholder,
#contacto textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

#contacto select option {
    background-color: #1E1559;
    color: #FFFFFF;
}

/* ===== footer ===== */
#footer {
    background-color: var(--dark-band);
    color: var(--on-dark);
}

#footer a {
    transition: color 0.2s ease-in-out;
}