/* === SITE HEADER === */
:root {
    --announcement-height: 48px;
    --site-header-height: 94px;
}
.announcement-bar {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: var(--announcement-height);
    padding: 5px 20px;
    background-color: #0A6280;
    color: #ffffff;
    text-align: center;
}
.announcement-copy {
    margin: 0;
    font-family: 'FuenteTextos', sans-serif;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.25;
}
.announcement-copy-wide {
    white-space: nowrap;
}
.announcement-copy-compact {
    display: none;
}
.announcement-cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 2px solid #1a1a1a;
    background: #FDCF58;
    box-shadow: 3px 3px 0 #1a1a1a;
    color: #1a1a1a;
    font-family: 'FuenteTextos', sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
}
.announcement-cta:hover {
    color: #1a1a1a;
    transform: translateY(-1px);
}
.site-header {
    position: sticky;
    top: var(--announcement-height);
    left: 0;
    width: 100%;
    margin-bottom: calc(-1 * var(--site-header-height));
    background-color: #082330;
    border-bottom: none;
    z-index: 1000;
    padding: 15px 20px;
}
.legal-page .site-header {
    position: relative;
    top: auto;
    margin-bottom: 0;
}
.legal-page main {
    padding-top: 24px !important;
}
.legal-page .courses-container {
    padding-top: 24px !important;
}
@media (max-width: 1100px) {
    .announcement-copy-wide {
        display: none;
    }
    .announcement-copy-compact {
        display: block;
    }
}
@media (max-width: 1024px) {
    /* The sticky header overlaps the hero by design; reserve its height so
       the first hero item (the logo) starts below the navigation. */
    .hero {
        padding-top: calc(60px + var(--site-header-height));
    }
}
@media (max-width: 700px) {
    :root {
        --announcement-height: 72px;
    }
    .announcement-bar {
        flex-direction: column;
        gap: 3px;
        padding: 4px 12px;
    }
    .announcement-copy {
        font-size: 0.8rem;
    }
    .announcement-cta {
        gap: 5px;
        padding: 3px 10px;
        font-size: 0.8rem;
    }
}
.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.hamburger-btn {
    background: #FDCF58;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0px #1a1a1a;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.4rem;
    color: #1a1a1a;
    transition: transform 0.2s, box-shadow 0.2s;
}
.hamburger-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #1a1a1a;
}
.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-logo-img {
    height: 60px;
    object-fit: contain;
}
.login-btn {
    background: #D9004C; 
    color: #ffffff;
    font-family: 'FuenteTextos', sans-serif;
    font-weight: bold;
    font-size: 1.05rem;
    padding: 10px 24px;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0px #1a1a1a;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.login-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0px #1a1a1a;
    color: #ffffff;
}

@media (max-width: 768px) {
    :root {
        --site-header-height: 79px;
    }
    .header-logo-img {
        height: 45px;
    }
    .login-btn {
        padding: 8px 16px;
        font-size: 0.95rem;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.bungee-spice-regular {
  font-family: "Bungee Spice", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.bungee-shade-regular {
  font-family: "Bungee Shade", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: 'FuenteTitulos';
    src: url('../fonts/safiro-regular-i.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FuenteTextos';
    src: url('../fonts/safiro-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FuenteAcentos';
    src: url('../fonts/safiro-regular.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
body, html {
    width: 100%;
    min-height: 100%;
    font-family: 'FuenteTextos', sans-serif;
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 160px;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* === HERO SECTION === */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #082330;  

    padding: 60px 40px;
    min-height: 100vh;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}

.hero-left {
    flex: 1 1 500px; max-width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.hero-right {
    flex: 1 1 500px; max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    z-index: 1;
    font-family: 'FuenteTextos', sans-serif;
}

/* === HERO PARTICLES === */
#hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.hero-left, .hero-right {
    position: relative;
    z-index: 1;
}
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}


.hero-tlaloc-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    filter: invert(1);
}

.fuente-titulos-text {
    font-family: 'FuenteTitulos';
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.2rem);
    line-height: 1.5;
    margin-bottom: 20px;
}
.keyword-highlight {
    background-color: #ffffff;
    color: #0A6280;
    padding: 0px 5px;
    border-radius: 6px;
    display: inline-block;
}

.hero .title-wrapper {
    align-items: flex-start;
    text-align: left;
}
.hero .logo {
    width: 120px;
    margin-bottom: 15px;
}
.hero .title {
    font-family: 'FuenteTitulos', sans-serif;
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 2rem);
    text-align: left;
    line-height: 1.1;
    margin-bottom: 5px;
}
.hero .subtitle {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 10px;
    text-align: left;
}

.hero .hero-highlight {
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    margin-bottom: 30px;
    font-size: 1.2rem;
}

.hero .hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 40px;
}

.hero .hero-stats {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
}
.hero .stat-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero .stat-number {
    color: #fff;
    font-weight: 800;
    font-size: 1.5em;
}
.hero .stat-label {
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
}


@media (max-width: 768px) {

    /* Mobile Hero Layout Redesign */
    .hero { 
        padding: calc(40px + var(--site-header-height)) 20px 20px; 
        gap: 20px; 
        flex-direction: column;
        background-image: linear-gradient(rgba(8, 35, 48, 0.92), rgba(8, 35, 48, 0.92)), url('../img/el-dios-tlaloc-fragmento-de-pintura-mural-coleccion-de-arte-prehispanico-museo-amparo-puebla.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .hero-left, .hero-right, .title-wrapper, .hero-content-wrapper {
        display: contents;
    }
    .hero-tlaloc-img {
        display: none;
    }
    
    .hero .logo { order: 1; align-self: flex-start; width: 100px; margin-bottom: 0; }
    .hero .title { order: 2; font-size: 1.2rem; margin-bottom: 0; align-self: flex-start; }
    .hero .hero-top-text { order: 3; font-size: 2.2rem; margin-top: 10px; align-self: flex-start; text-align: left; }
    .hero .hero-highlight { order: 4; align-self: flex-start; margin-bottom: 20px; }
    .hero .hero-buttons { order: 5; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 15px; width: 100%; margin-bottom: 30px; }
    .hero .hero-stats { order: 6; flex-direction: row; gap: 30px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 40px; }
    .hero .subtitle { order: 7; align-self: flex-start; margin-bottom: 20px; display: none; } /* Hide Hecho en mexico to keep it clean, or order it */
    .hero .image-reference { order: 8; align-self: flex-start; margin: auto 0 0 0 !important; width: 100%; font-size: 0.7em !important; }

}

/* === MARQUEE === */
.marquee-section {
    background: #0A6280;
    padding: 60px 0;
    overflow: hidden;
    width: 100%;
}
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.marquee-content {
    display: inline-flex;
    align-items: center;
    animation: scrollMarquee 40s linear infinite;
}
.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}
.marquee-content span {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #F2F2F2;
    padding: 0 30px;
    letter-spacing: -1px;
}
.marquee-content .outline-text {
    color: transparent;
    -webkit-text-stroke: 1.5px #6DB8C1;
    font-style: italic;
}
.marquee-content .separator {
    font-size: clamp(2rem, 4vw, 4rem);
    color: #fff;
    padding: 0 10px;
    -webkit-text-stroke: 0;
}
@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === SECCION ABOUT === */
.about-section {
    background-color: #ffffff;
    padding: 120px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 5;
}

.about-container {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    padding: 20px;
}

.about-tags {
    font-family: 'FuenteTitulos';
    color: #C68A3C;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9em;
}

.about-heading {
    font-family: 'FuenteTitulos';
    font-size: 3.5em;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1px;
}

.about-text {
    font-family: 'FuenteTextos';
    font-size: 1.25em;
    color: #1C1C1C;
    line-height: 1.6;
    font-weight: 400;
    max-width: 750px;
}


/* Uiverse Button */
.primary-button {
 font-family: 'FuenteTextos', sans-serif;
 color: white;
 cursor: pointer;
 font-size: 1.1em;
 font-weight: bold;
 letter-spacing: 0.05rem;
 border: 1px solid #fff;
 padding: 0.8rem 2.1rem;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23ffffff %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
 background-color: #1C1C1C;
 background-size: 200%;
 background-position: 200%;
 background-repeat: no-repeat;
 transition: 0.3s ease-in-out;
 transition-property: background-position, border, color;
 position: relative;
 z-index: 1;
 text-decoration: none;
 display: inline-block;
 text-align: center;
}

.primary-button:hover {
 border: 1px solid #BA160C;
 color: #1C1C1C;
 background-position: 40%;
}

.primary-button:before {
 content: "";
 position: absolute;
 background-color: #fff;
 width: 0.2rem;
 height: 0.2rem;
 top: -1px;
 left: -1px;
 transition: background-color 0.15s ease-in-out;
}

.primary-button:hover:before {
 background-color: #1C1C1C;
}

.primary-button:hover:after {
 background-color: #1C1C1C;
}

.primary-button:after {
 content: "";
 position: absolute;
 background-color: white;
 width: 0.3rem;
 height: 0.3rem;
 bottom: -1px;
 right: -1px;
 transition: background-color 0.15s ease-in-out;
}

.button-borders {
 position: relative;
 width: fit-content;
 height: fit-content;
}

.button-borders:before {
 content: "";
 position: absolute;
 width: calc(100% + 0.5em);
 height: 50%;
 left: -0.3em;
 top: -0.3em;
 border: 1px solid #1C1C1C;
 border-bottom: 0px;
}

.button-borders:after {
 content: "";
 position: absolute;
 width: calc(100% + 0.5em);
 height: 50%;
 left: -0.3em;
 bottom: -0.3em;
 border: 1px solid #1C1C1C;
 border-top: 0px;
 z-index: 0;
}

.secondary-button {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.secondary-button:before {
    background-color: #ffffff;
}
.secondary-button:hover {
    color: #1C1C1C;
}


/* ========================================= */
/* ESTILOS PARA LAS SECCIONES FALTANTES      */
/* ========================================= */

/* Contenedores generales */
.courses-container, .statement-container, .syllabus-container, .why-container, .methodology-container, .team-container, .faq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* Encabezados de seccion */
.courses-heading, .statement-heading, .syllabus-heading, .why-heading, .section-heading {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #1C1C1C;
    margin-bottom: 40px;
    line-height: 1.1;
    text-align: center;
}

/* SECCION CURSOS */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.program-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
    margin-top: 36px;
}
.program-investment {
    padding-left: 0;
    border-left: 0;
}
.program-details-heading {
    margin: 0 0 24px;
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1.8rem;
    color: #1a1a1a;
}
.program-payment-note {
    margin-top: 24px;
}
.program-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}
@media (max-width: 768px) {
    .program-details-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .program-investment {
        padding-left: 0;
        border-left: 0;
    }
    .program-actions {
        margin-top: 30px;
    }
}

/* === BRUTALISM CARDS (COURSES) === */
.brutal-card {
    background: #ffffff;
    border: 3px solid #1a1a1a;
    box-shadow: 8px 8px 0px #1a1a1a;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brutal-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px #1a1a1a;
}
.brutal-title {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 2.2rem;
    color: #1a1a1a;
    margin-bottom: 15px;
    margin-top: 20px;
    line-height: 1.1;
}
.brutal-desc {
    font-family: 'FuenteTextos', sans-serif;
    color: #4a4a4a;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}
.brutal-button {
    background: #151522; /* very dark blue/black like in the image */
    color: #ffffff;
    font-family: 'FuenteTextos', sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 12px 24px;
    border: 2px solid #151522;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    transition: background 0.2s, color 0.2s;
}
.brutal-button:hover {
    background: #ffffff;
    color: #151522;
}
.brutal-badge {
    color: #ffffff;
    padding: 6px 12px;
    font-family: 'FuenteTextos', sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    width: fit-content;
    border: 2px solid #1a1a1a;
    box-shadow: 4px 4px 0px #1a1a1a;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .brutal-card {
        padding: 20px;
        box-shadow: 6px 6px 0px #1a1a1a;
    }
    .brutal-card:hover {
        transform: none;
        box-shadow: 6px 6px 0px #1a1a1a;
    }
}


/* ========================================= */
/* FOOTER                                    */
/* ========================================= */
.site-footer {
    position: relative;
    padding: 80px 20px 40px 20px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('../img/el-dios-tlaloc-fragmento-de-pintura-mural-coleccion-de-arte-prehispanico-museo-amparo-puebla.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr;
    gap: 40px;
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
@media (max-width: 900px) {
    .footer-brand {
        align-items: center;
    }
}

.footer-logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #ffffff;
}

.logo-image {
    width: 60px;
    height: auto;
}

.logo-text {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
}

.footer-tagline {
    font-family: 'FuenteTextos', sans-serif;
    color: #cccccc;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
}

.footer-nav {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

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

.footer-heading {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1.2rem;
    color: #C68A3C;
    margin-bottom: 20px;
}

.footer-nav-col ul li {
    margin-bottom: 12px;
}

.footer-nav-col ul li a {
    color: #cccccc;
    text-decoration: none;
    font-family: 'FuenteTextos', sans-serif;
    transition: color 0.3s;
}

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

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
@media (max-width: 900px) {
    .footer-contact {
        align-items: center;
    }
}

.footer-email {
    color: #cccccc;
    text-decoration: none;
    font-family: 'FuenteTextos', sans-serif;
    transition: color 0.3s;
}
.footer-email:hover {
    color: #ffffff;
}

.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.footer-socials a:hover {
    background-color: #BA160C;
    transform: translateY(-3px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'FuenteTextos', sans-serif;
    font-size: 0.9rem;
    color: #888888;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

.legal-links {
    display: flex;
    gap: 20px;
}

.legal-links a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: #ffffff;
}















/* === STATEMENT === */
.statement-section {
    background-color: #0A6280;
}
.statement-heading {
    font-weight: 400;
    letter-spacing: -1px;
    font-size: clamp(3rem, 6vw, 4.5rem);
    color: #ffffff;
}
.statement-text {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
}


/* === SYLLABUS SECTION RE-DESIGN === */
.syllabus-section {
    background-color: #F4F4F6; /* Light background to make the cards and editor pop */
}

.syllabus-text {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.15rem;
    color: #1a1a1a;
    line-height: 1.6;
    margin-bottom: 30px;
}
.syllabus-heading {
    font-style: normal; /* just in case */
    margin-bottom: 20px;
}

.syllabus-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: center;
}
.syllabus-left {
    flex: 1 1 450px; max-width: 100%;
    max-width: 100%;
}
.syllabus-right {
    flex: 1 1 450px; max-width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CODE EDITOR MOCKUP */
.code-editor-wrapper { position: relative; margin-top: 50px; }
.code-editor-mockup {
    background: #1e1e1e;
    border-radius: 10px;
    border: 2px solid #333;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    z-index: 1;
}
.editor-header {
    background: #2d2d2d;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #111;
}
.editor-dots {
    display: flex;
    gap: 8px;
}
.editor-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.editor-dots span:nth-child(1) { background: #ff5f56; }
.editor-dots span:nth-child(2) { background: #ffbd2e; }
.editor-dots span:nth-child(3) { background: #27c93f; }

.editor-filename {
    color: #888;
    font-size: 0.9rem;
    margin-left: 20px;
    font-family: 'FuenteTextos', sans-serif;
}

.editor-body {
    padding: 20px;
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.5;
    overflow-x: auto;
}
.editor-body .keyword { color: #569cd6; font-weight: bold; }
.editor-body .function { color: #dcdcaa; }
.editor-body .string { color: #ce9178; }
.editor-body .comment { color: #6a9955; font-style: italic; }

.editor-mascot {
    position: absolute;
    top: -40px;
    right: -20px;
    width: 120px;
    z-index: 10;
    transform: rotate(10deg);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
}

/* SYLLABUS BRUTAL LIST */
.syllabus-brutal-card {
    padding: 40px;
}
.syllabus-brutal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.syllabus-brutal-list li {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.1rem;
    color: #1a1a1a;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    line-height: 1.4;
}
.syllabus-brutal-list li i {
    margin-top: 3px;
}




.brutal-button-pink:active {
    transform: translate(0, 0);
    box-shadow: 0px 0px 0px #1a1a1a;
}



/* === WHY SECTION === */
.why-section {
    background-color: #F9F6F0; 
    border-top: 4px solid #1a1a1a;
    border-bottom: 4px solid #1a1a1a;
}
.why-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 60px;
}
.why-image-col {
    flex: 1 1 400px; max-width: 100%;
}
.why-image {
    width: 100%;
    height: auto;
    border: 4px solid #1a1a1a;
    box-shadow: 12px 12px 0px #1a1a1a;
    object-fit: cover;
    display: block;
}
.why-text-col {
    flex: 1 1 450px; max-width: 100%;
    text-align: left;
}
.why-heading {
    color: #960018; 
    margin-bottom: 30px;
    line-height: 1.1;
}
.why-text {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.15rem;
    color: #1a1a1a;
    line-height: 1.6;
    margin-bottom: 20px;
}
.why-author {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1.8rem;
    color: #960018;
    margin-top: 30px;
}


.statement-card {
    background: #569EB5;
    border: 4px solid #1a1a1a;
    box-shadow: 12px 12px 0px #1a1a1a;
    border-radius: 16px;
    padding: 60px 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
@media (max-width: 768px) {
    .statement-card {
        padding: 40px 20px;
        box-shadow: 8px 8px 0px #1a1a1a;
    }
}


/* === METHODOLOGY REDESIGN SECTION === */
.methodology-redesign-section {
    background-color: #0c101a; /* Dark navy/gray */
    padding: 80px 20px;
}
.methodology-redesign-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: center;
}
.meth-left-col {
    flex: 1 1 500px; max-width: 100%;
}
.meth-main-title {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3rem);
    color: #ffffff;
    margin-bottom: 40px;
}
.meth-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.meth-card {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 20px;
    transition: background 0.3s;
}
.meth-card:hover {
    background: rgba(255, 255, 255, 0.05);
}
.meth-badge {
    background-color: #FDCF58;
    color: #1a1a1a;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'FuenteTitulos', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.meth-text-content {
    margin-left: 20px;
}
.meth-title {
    font-family: 'FuenteTextos', sans-serif;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.15rem;
    margin-bottom: 5px;
    margin-top: 0;
}
.meth-desc {
    font-family: 'FuenteTextos', sans-serif;
    color: #b0b0c0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
.meth-right-col {
    flex: 1 1 400px; max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.meth-mascot-img {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.meth-terminal-text {
    font-family: 'Courier New', Courier, monospace;
    color: #569EB5;
    font-size: 0.95rem;
    text-align: center;
    margin-top: 30px;
    line-height: 1.5;
}


/* === ENROLL SECTION === */
.enroll-section {
    background-color: #ffffff; 
    padding: 80px 20px;
}
.enroll-container {
    max-width: 1200px;
    margin: 0 auto;
}
.enroll-heading {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #1C1C1C;
    text-align: center;
    margin-bottom: 10px;
}
.enroll-subheading {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.5rem;
    color: #960018;
    text-align: center;
    margin-bottom: 60px;
    font-style: italic;
}
.enroll-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
}
.enroll-card {
    flex: 1 1 450px; max-width: 100%;
    background: #ffffff;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
}
.enroll-eyebrow {
    font-family: 'Courier New', Courier, monospace; 
    font-weight: 900;
    color: #497959; 
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.enroll-card-title {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    margin-top: 0;
}
.enroll-card-desc {
    font-family: 'FuenteTextos', sans-serif;
    color: #444;
    font-size: 1.1rem;
    margin-bottom: 30px;
}
.enroll-list {
    margin-bottom: 40px;
    flex-grow: 1; 
}
.enroll-list li {
    margin-bottom: 20px;
}
.enroll-list li span {
    font-size: 1.05rem; 
    line-height: 1.5;
}

/* BUTTONS */
.enroll-btn {
    font-family: 'FuenteTextos', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 14px 28px;
    border: 3px solid #1a1a1a;
    box-shadow: 5px 5px 0px #1a1a1a;
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: max-content;
}
.enroll-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0px #1a1a1a;
}
.enroll-btn-pink {
    background-color: #D9004C; 
    color: #1a1a1a;
}
.enroll-btn-purple {
    background-color: #497959; 
    color: #ffffff;
}


/* === TEAM SECTION REDESIGN === */
.team-redesign-section {
    background-color: #F4F4F6; /* Soft cream background */
    padding: 100px 20px;
    border-top: 4px solid #1a1a1a;
    border-bottom: 4px solid #1a1a1a;
}
.team-brutal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}
.team-brutal-card {
    border: 4px solid #1a1a1a;
    box-shadow: 12px 12px 0px #1a1a1a;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-brutal-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 16px 16px 0px #1a1a1a;
}
.team-brutal-photo {
    width: 100%;
    aspect-ratio: 3/4; 
    overflow: hidden;
    border: 2px solid #1a1a1a; 
    margin-bottom: 20px;
    background-color: #fff;
}
.team-brutal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-brutal-info {
    text-align: center;
    width: 100%;
}
.team-brutal-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6rem;
    font-weight: 900;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    line-height: 1.1;
}
.team-brutal-role {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    font-weight: bold;
}
.team-brutal-bio {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    text-align: justify;
}
.team-bio-details {
    margin-top: 10px;
    width: 100%;
}
.team-brutal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.team-brutal-pill {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 15px;
    text-transform: uppercase;
}


/* === FAQ SECTION REDESIGN === */
#seccion-faq {
    background-color: #569EB5;
    padding: 100px 20px;
    border-bottom: 4px solid #1a1a1a;
}
#seccion-faq .section-heading {
    color: #1a1a1a;
    font-size: clamp(3rem, 6vw, 4rem);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -1px;
}
.accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.accordion-item {
    background: #ffffff;
    border: 4px solid #1a1a1a;
    box-shadow: 8px 8px 0px #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.3s ease;
}
.accordion-item:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0px #1a1a1a;
}
.accordion-item.active {
    background: #FDCF58;
}
.accordion-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #1a1a1a;
    text-align: left;
}
.faq-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
.accordion-item.active .faq-icon {
    transform: rotate(45deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.accordion-inner {
    padding: 0 30px 30px 30px;
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #1a1a1a;
    border-top: 3px dashed rgba(26,26,26,0.3);
    margin: 0 30px;
    padding-top: 25px;
    padding-left: 0;
    padding-right: 0;
}


/* === FOOTER REDESIGN === */
.site-footer-redesign {
    background-color: #0c101a;
    color: #ffffff;
    padding: 80px 20px 20px 20px;
}
.footer-container-redesign {
    max-width: 1200px;
    margin: 0 auto;
}
.footer-grid-redesign {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}
.footer-logo {
    width: 100px;
    margin-bottom: 20px;
}
.footer-desc {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.05rem;
    color: #b0b0c0;
    max-width: 250px;
    line-height: 1.6;
    margin: 0;
}
.footer-title {
    color: #D9004C;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-top: 0;
    letter-spacing: 1px;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 15px;
}
.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.05rem;
    font-weight: bold;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #D9004C;
}
.footer-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}
.footer-pill {
    border: 2px solid #D9004C;
    color: #ffffff;
    padding: 8px 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
a.footer-pill:hover {
    background-color: #D9004C;
    color: #1a1a1a;
}
.footer-underline-link {
    color: #ffffff;
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.05rem;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.2s;
}
.footer-underline-link:hover {
    color: #D9004C;
}
.footer-contact-info {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1rem;
    color: #b0b0c0;
    line-height: 1.6;
}
.footer-contact-info a {
    color: #D9004C;
    text-decoration: none;
    font-weight: bold;
}
.footer-bottom-redesign {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    text-align: center;
}
.footer-bottom-redesign p {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 0.9rem;
    color: #b0b0c0;
    margin: 0;
}


/* AZUL MAYA OVERRIDE FOR COL 3 */
.footer-col-blue .footer-title {
    color: #569EB5;
}
.footer-col-blue .footer-pill {
    border-color: #569EB5;
}
.footer-col-blue a.footer-pill:hover {
    background-color: #569EB5;
    color: #ffffff;
}
.footer-col-blue .footer-underline-link:hover {
    color: #569EB5;
}


/* === OUTCOMES SECTION === */
.outcomes-section {
    background-color: #FDCF58; 
    padding: 100px 20px;
    border-top: 4px solid #1a1a1a;
}
.outcomes-container {
    max-width: 1200px;
    margin: 0 auto;
}
.outcomes-header {
    text-align: center;
    margin-bottom: 70px;
}
.outcomes-heading {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: clamp(3rem, 6vw, 4rem);
    color: #1a1a1a;
    margin-bottom: 25px;
    margin-top: 25px;
}
.outcomes-intro {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.25rem;
    color: #1a1a1a;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}
.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}
.outcome-card {
    background-color: #ffffff;
    padding: 40px 30px;
    position: relative;
    border: 4px solid #1a1a1a;
    box-shadow: 8px 8px 0px #1a1a1a;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.outcome-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0px #1a1a1a;
}
.outcome-badge {
    position: absolute;
    top: -20px;
    left: 20px;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 3px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    font-size: 1.2rem;
    box-shadow: 4px 4px 0px #1a1a1a;
}
.outcome-title {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1.6rem;
    color: #1a1a1a;
    margin-top: 15px;
    margin-bottom: 15px;
}
.outcome-desc {
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.05rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}
.outcomes-footer {
    text-align: center;
    font-family: 'FuenteTextos', sans-serif;
    font-size: 1.3rem;
    color: #1a1a1a;
    background: #ffffff;
    border: 4px solid #1a1a1a;
    box-shadow: 8px 8px 0px #1a1a1a;
    padding: 20px 40px;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto;
}


.header-right-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* === MOBILE MENU OVERLAY === */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(26, 26, 26, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(8, 35, 48, 0.90), rgba(8, 35, 48, 0.90)), url('../img/el-dios-tlaloc-fragmento-de-pintura-mural-coleccion-de-arte-prehispanico-museo-amparo-puebla.jpg');
    background-size: cover;
    background-position: center;
    border-left: none;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}
.close-menu-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: #D9004C; 
    color: #ffffff;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0px #1a1a1a;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.close-menu-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0px #1a1a1a;
}
.mobile-nav {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.mobile-link {
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 2.2rem;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 0;
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    transition: padding-left 0.2s, color 0.2s, border-color 0.2s;
}
.mobile-link:hover {
    padding-left: 15px;
    color: #FDCF58; 
    border-bottom-color: #FDCF58;
}

@media (max-width: 600px) {
    .mobile-menu-content {
        max-width: 100%;
        border-left: none;
    }
    .mobile-link {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .editor-mascot { right: 0px; width: 90px; top: -30px; }
    .code-editor-wrapper { width: 100%; max-width: 100%; }
}

/* Prevenir FOUC (Flash of Unstyled Content) en el Hero */
.hero .title, .hero .subtitle, .hero .hero-top-text, .hero .hero-highlight { clip-path: inset(0 100% 0 0); }
.hero .hero-tlaloc-img { clip-path: inset(100% 0 0 0); }
.hero .hero-buttons, .hero .hero-stats, .logo { opacity: 0; }


/* === TESTIMONIALS SECTION === */
.testimonials-section {
    background-color: #0c101a;
    padding: 100px 20px;
    color: #ffffff;
    font-family: 'FuenteTextos', sans-serif;
    border-top: 4px solid #1a1a1a;
}
.testi-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.testi-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.testi-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
}
.testi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}
.testi-avatar-wrapper {
    width: 60px;
    height: 60px;
    border: 3px solid #8e78e6;
    border-radius: 4px;
    transform: rotate(45deg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px rgba(142, 120, 230, 0.4);
}
.testi-avatar {
    width: 150%;
    height: 150%;
    transform: rotate(-45deg) translate(-20%, -15%);
}
.testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testi-quote-icon svg {
    width: 50px;
    height: 50px;
    color: #8e78e6;
}
.testi-content p {
    font-family: 'FuenteTextos', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    line-height: 1.3;
    font-weight: 500;
    margin: 0 0 40px 0;
    color: #e5e5e5;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95rem;
    color: #b3b3b3;
}
.testi-line {
    width: 40px;
    height: 1px;
    background-color: #b3b3b3;
}
.testi-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 20px;
}
.testi-dots {
    display: flex;
    gap: 12px;
}
.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #444;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 0;
}
.testi-dot.active {
    background-color: #8e78e6;
}
.testi-arrows {
    display: flex;
    gap: 15px;
}
.testi-arrow {
    background: transparent;
    border: 1px solid #666;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}
.testi-arrow:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}







/* ========================================
   COOKIE BANNER
   ======================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    border-top: 4px solid #FDCF58;
    z-index: 9999;
    padding: 20px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.cookie-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.cookie-text {
    font-family: 'FuenteTextos', sans-serif;
    color: #ffffff;
    font-size: 1rem;
    margin: 0;
}
.cookie-text a {
    color: #FDCF58;
    text-decoration: underline;
    font-weight: bold;
}
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
}

#accept-cookies {
    background-color: #D9004C;
    color: #ffffff;
    font-family: 'FuenteTitulos', sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0px #1a1a1a;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}
#accept-cookies:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #1a1a1a;
}
#accept-cookies:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #1a1a1a;
}