:root {
    --bg: #F8F6F2;
    --surface: #FFFFFF;
    --surface-alt: #F6F3ED;
    --text: #221F17;
    --text-muted: #726B5A;
    --border: #E4E0D8;
    --primary: #5B15A0;
    --primary-hover: #491180;
    --on-primary: #FFFFFF;
    --accent: #241E29;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.25;
}

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

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

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

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

    h2 {
        font-size: clamp(1.5rem, 5vw, 1.85rem);
    }

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

    h4,
    h5,
    h6 {
        font-size: clamp(1rem, 3.5vw, 1.2rem);
    }

    a,
    p,
    span,
    code {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ===== header_section ===== */
.header-boxed {
    box-shadow: 0 12px 28px -10px rgba(34, 31, 23, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 243, 237, 0.35) 100%);
}

.header-cta {
    box-shadow: 0 8px 18px -6px rgba(91, 21, 160, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.js-mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
}

.js-mobile-menu.open {
    display: flex;
}

/* ===== hero_news_section ===== */
#noticias-principales {
    hyphens: auto;
}

/* ===== portal_categories_section ===== */
.mirivon-categories-section {
    overflow: hidden;
}

.mirivon-reflective-title {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 60%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    hyphens: auto;
    line-height: 1.2;
}

.mirivon-category-card {
    box-shadow: 0 16px 36px -10px rgba(36, 30, 41, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
    border: none;
}

.mirivon-sheen-overlay {
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0.25) 100%);
}

.js-category-filter:hover {
    background-color: var(--primary-hover) !important;
}

/* ===== fresh_articles_section ===== */
#articulos {
    overflow: hidden;
    hyphens: auto;
}

#articulos article {
    border-radius: 1rem;
}

.object-fit-cover {
    object-fit: cover;
}

/* ===== thematic_collections_section ===== */
#colecciones {
    overflow: hidden;
}

/* ===== useful_tech_tips_section ===== */
#consejos article {
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px -5px rgba(36, 30, 41, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8)
}

#consejos article:hover {
    box-shadow: 0 20px 30px -10px rgba(91, 21, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9)
}

/* ===== tech_comparisons_section ===== */
#comparativas .js-modal-backdrop:not(.hidden) {
    display: flex
}

body.modal-open {
    overflow: hidden
}

#comparativas ul li i {
    font-size: 14px
}

/* ===== tech_facts_section ===== */
.facts-glossy-card {
    box-shadow: 0 10px 25px -5px rgba(34, 31, 23, 0.06), 0 8px 10px -6px rgba(34, 31, 23, 0.04);
    position: relative
}

.facts-glossy-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    pointer-events: none;
    z-index: 1
}

.facts-glossy-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle at top right, rgba(91, 21, 160, 0.12), transparent 70%);
    border-top-right-radius: 1rem;
    pointer-events: none;
    z-index: 1
}

#datos-curiosos h2,
#datos-curiosos h3 {
    hyphens: auto
}

/* ===== faq_section ===== */
.faq-section-wrapper {
    overflow: hidden;
    hyphens: auto
}

.faq-gradient-title {
    background: linear-gradient(135deg, #241E29 0%, #5B15A0 60%, #491180 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.faq-card {
    position: relative;
    background-color: #FFFFFF;
    box-shadow: 0 4px 20px -2px rgba(91, 21, 160, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8)
}

.faq-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    border-top-right-radius: 1rem;
    pointer-events: none
}

.faq-card.is-active {
    box-shadow: 0 10px 25px -4px rgba(91, 21, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1)
}

.faq-card.is-active .faq-icon-pill {
    background-color: #5B15A0;
    color: #FFFFFF;
    transform: rotate(180deg)
}

/* ===== about_portal_section ===== */
#sobre-nosotros {
    overflow: hidden;
}

#sobre-nosotros img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== contact_feedback_form_section ===== */
#contacto input::placeholder,
#contacto textarea::placeholder {
    color: #726B5A;
}

#contacto select option {
    background-color: #FFFFFF;
    color: #221F17;
}

#contacto input:focus,
#contacto textarea:focus,
#contacto select:focus {
    box-shadow: 0 0 0 2px rgba(91, 21, 160, 0.2);
}

/* ===== universal_modal_controls ===== */
.mv-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 20;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--surface-alt);
    color: var(--accent);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(36, 30, 41, 0.15);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mv-modal-close:hover {
    background-color: var(--primary);
    color: var(--on-primary);
    transform: scale(1.06);
}

/* ===== footer_section ===== */
#footer {
    overflow: hidden;
    hyphens: auto;
}

#footer a {
    text-decoration-skip-ink: auto;
}