/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BASE */
body {
    font-family: 'Poppins', sans-serif;
    background: #9fe1f4;
    color: white;
    margin: 0;
}

/* ===== NAVBAR ===== */
.navbar {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 20px 40px;
    z-index: 10;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 800;
    font-size: 1.2rem;
}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: white;
    font-weight: 400;
}
/* =========================
   HERO TONALLI
========================= */

.hero-tonalli{
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background-image: url('img/Lugares/Lugar 1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =========================
   OVERLAY OPACO
========================= */

.hero-overlay{
    position: absolute;
    inset: 0;

    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(2px);
}

/* =========================
   CONTENIDO
========================= */

.hero-content{
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    padding: 20px 20px 50px;

    text-align: center;
}

/* =========================
   TEXTO SUPERIOR
========================= */

.hero-top-text{
    font-family: 'League Spartan', sans-serif;
    font-size: clamp(1.8rem, 3vw, 3.5rem);
    font-weight: 500;

    color: white;

    margin-top: 0;

    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* =========================
   LOGO
========================= */

.hero-logo{
    width: min(650px, 85%);
}

.hero-logo img{
    width: 100%;
    display: block;
     border-radius: 35px;
}

/* =========================
   TEXTO INFERIOR
========================= */

.hero-bottom-text{
    font-family: 'Open Sauce', sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 3rem);
    font-weight: 400;

    color: white;

    max-width: 1200px;

    line-height: 1.3;

    text-shadow: 0 2px 10px rgba(0,0,0,0.35);

    margin-bottom: 20px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 768px){

    .hero-content{
        padding: 25px 20px 35px;
    }

    .hero-top-text{
        font-size: 1.4rem;
    }

    .hero-bottom-text{
        font-size: 1.2rem;
    }

    .hero-logo{
        width: 90%;
    }
}
/* /* ===== HERO ===== 
.hero {
    height: 100vh;
    position: relative;

    /* TU IMAGEN VA AQUÍ *
    background: url('img/fondo.jpg') center/cover no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Overlay suave *
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(159, 225, 244, 0.6);
}

/* CONTENIDO *
.hero-content {
    position: relative;
    max-width: 800px;
    padding: 20px;
}

.top-text {
    font-size: 1rem;
    margin-bottom: 20px;
}

/* LOGO BOX *
.logo-box {
    background: white;
    color: #2b7bbb;
    padding: 25px 40px;
    border-radius: 12px;
    display: inline-block;
    margin: 20px 0;
}

.logo-box h1 {
    font-size: 3rem;
    font-weight: 800;
}

.logo-box span {
    font-size: 1.2rem;
}

/* TEXTO *
.bottom-text {
    margin: 20px 0;
    font-size: 1rem;
}

/* BOTÓN *
.btn-primary {
    display: inline-block;
    background: white;
    color: #2b7bbb;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-primary:hover {
    background: #2b7bbb;
    color: white;
}

/* ===== RESPONSIVE ===== *
@media (max-width: 768px) {

    .logo-box h1 {
        font-size: 2rem;
    }

    .navbar {
        padding: 15px 20px;
    }

    nav a {
        margin-left: 10px;
        font-size: 0.9rem;
    }
}

.hero-content {
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ===== FUENTES ===== *
@font-face {
    font-family: 'Open Sauce';
    src: url('fonts/OpenSauce-Regular.ttf');
}
 */
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;800&display=swap');

/* ===== SECCIÓN ===== */
.hero-tonalli-2 {
    background: #f6d861;
    padding: 80px 20px;
    min-height: 100vh; 
    display: flex;
    align-items: center; 
}

/* CONTENIDO */
.hero2-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 40px;
}

/* TEXTO */
.hero2-text h1 {
    font-family: 'League Spartan', sans-serif;
    font-size: 4rem;
    line-height: 1.1;
    color: white;
}

.hero2-text .azul {
    color: #376afc;
}

.hero2-text p {
    font-family: 'Open Sauce', sans-serif;
    color: #1e6ba5;
    margin: 25px 0;
    max-width: 500px;
    line-height: 1.6;
    font-size: x-large;
}

/* BOTÓN */
.btn-registro {
    font-family: 'Open Sauce', sans-serif;
    background: #1e6ba5;
    color: #f6d861;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.btn-registro:hover {
    background: #15507a;
}

/* IMAGEN */


.hero2-img img {
    width: 500px;
    border-radius: 20px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

    .hero2-content {
        flex-direction: column;
        text-align: center;
    }

    .hero2-text h1 {
        font-size: 2.5rem;
    }

    .hero2-img {
        transform: rotate(0);
    }
}
.hero2-img {
    animation: floatTilt 4s ease-in-out infinite;
}

/* @keyframes floatTilt {
    0%,100% { transform: rotate(-10deg) translateY(0); }
    50% { transform: rotate(-10deg) translateY(-10px); }
} */

/* FUENTES */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;800&display=swap');

@font-face {
    font-family: 'Open Sauce';
    src: url('fonts/OpenSauce-Regular.ttf');
}

/* SECCIÓN */
.verano-tonalli {
    background: #9fe1f4;
    padding: 80px 20px;
}

/* CONTENEDOR */
.verano-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* IMAGEN */
.verano-img img {
    width: 500px;
    border-radius: 20px;
}

/* TEXTO */
.verano-text h1 {
    font-family: 'League Spartan', sans-serif;
    font-size: 4rem;
    color: white;
}

.naranja {
    color: #f9a53c;
}

.verano-text h3 {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    color: white;
    margin: 10px 0 20px;
    font-size: x-large;
}

.amarillo {
    color: #fced38;
}

/* PÁRRAFOS */
.verano-text p {
    font-family: 'Open Sauce', sans-serif;
    color: #1e6ba5;
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 500px;
    font-size: x-large;
}

/* BOTÓN */
.btn-verano {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    background: #d55e30;
    color: white;

    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;

    font-family: 'Open Sauce', sans-serif;
    font-weight: bold;

    transition: 0.3s;
}

.btn-verano img {
    width: 30px;
}

.btn-verano:hover {
    background: #b94c22;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .verano-content {
        flex-direction: column;
        text-align: center;
    }

    .verano-text h1 {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .verano-img {
        transform: rotate(0);
    }

    .verano-text p {
        margin: 0 auto 15px;
    }
}
/* SECCIÓN */
.como-ensenamos {
    background: #9fe1f4;
    /* padding: 80px 20px; */
    text-align: center;
}

/* TITULO */
.como-ensenamos h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 2.8rem;
    color: white;
    margin-bottom: 40px;
}

.naranja {
    color: #f9a53c;
}

/* CARD */
.card-ensenanza {
    background: #f2f2f2;
    border-radius: 25px;
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
    border: 3px solid #f9a53c;
}

/* ITEMS */
.item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    text-align: left;
    justify-content: center;
}

.item p {
    font-family: 'Open Sauce', sans-serif;
    color: #1e6ba5;
    margin: 0;
    text-align: center;
    font-size: x-large;
}

.item p::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #f9a53c;
    margin-left: 10px;
    vertical-align: middle;
}

/* ICONOS */
.icon {
    width: 25px;
    height: 25px;
    display: inline-block;
}

.circulo {
    background: #f9a53c;
    border-radius: 50%;
}

.cuadrado {
    background: #fced38;
}

/* FRASE FINAL */
.frase {
    margin-top: 40px;
    font-family: 'Open Sauce', sans-serif;
    color: #1e6ba5;
    font-size: 1.2rem;
}

.amarillo {
    color: #fced38;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .como-ensenamos h2 {
        font-size: 2rem;
    }

    .card-ensenanza {
        padding: 20px;
    }

    .item {
        gap: 10px;
    }
}

.desarrollo {
    background: #9fe1f4;
    padding: 80px 20px;
    text-align: center;
}

/* ===== STATS ===== */
.stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.stat {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #f2f2f2;
    border: 10px solid #d55e30;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Open Sauce', sans-serif;
}

.stat h3 {
    font-size: 40px;
    margin: 5px 0;
    color: #7a3a22;
}

.stat span {
    color: #d55e30;
}

.label {
    color: #d55e30;
    font-size: 14px;
}

/* puntos entre círculos */
.dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 6px solid #d55e30;
}

/* ===== TITULO ===== */
.titulo {
    font-family: 'League Spartan', sans-serif;
    font-size: 42px;
    color: white;
    margin-bottom: 50px;
}

.titulo span {
    color: #fced38;
}

/* ===== CONTENIDO ===== */
.contenido {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    position: relative;
}

/* personaje */
.tona {
    width: 180px;
}

/* ===== CARD ===== */
.card {
    background: #f2f2f2;
    padding: 30px;
    border-radius: 30px;
    border: 3px solid #f9a53c;
    width: 100%;
    max-width: 500px;
}

/* items */
.item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.text-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.text-line p {
    color: #1e6ba5;
    margin: 0;
    font-family: 'Open Sauce', sans-serif;
}

.line {
    width: 40px;
    height: 2px;
    background: #f9a53c;
}

/* iconos */
.icon {
    width: 20px;
    height: 20px;
}

.circulo {
    background: #f39c3d;
    border-radius: 50%;
}

.cuadrado {
    background: #f6d861;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contenido {
        flex-direction: column;
        align-items: center;
    }

    .tona {
        order: -1;
    }
}
.fechas {
    background: #9fe1f4;
    /* padding: 80px 20px; */
    text-align: center;
}

/* frase */
.frase {
    font-family: 'Open Sauce', sans-serif;
    font-size: 20px;
    color: #1e6ba5;
    margin-bottom: 50px;
}

.frase span {
    color: #fced38;
    font-weight: bold;
}

/* contenedor */
.fechas-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* cajas */
.fecha-box {
    background: #f2f2f2;
    border: 10px solid #d55e30;
    border-radius: 30px;
    padding: 30px 60px;
    min-width: 200px;
}

/* textos */
.fecha-box h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: 32px;
    color: #7a3a22;
    margin: 0;
}

.mes {
    font-family: 'Open Sauce', sans-serif;
    color: #d55e30;
    font-size: 20px;
    margin: 10px 0;
}

.dia {
    font-size: 48px;
    font-weight: bold;
    color: #7a3a22;
}

/* línea */
.linea {
    width: 60px;
    height: 6px;
    background: #d55e30;
    border-radius: 5px;
}

/* botón */
.btn-registro {
    display: inline-block;
    margin-top: 40px;
    padding: 15px 35px;
    background: #d55e30;
    color: white;
    font-family: 'Open Sauce', sans-serif;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
}

.btn-registro:hover {
    transform: scale(1.05);
}
@media (max-width: 768px) {
    .fechas-container {
        flex-direction: column;
    }

    .linea {
        width: 6px;
        height: 40px;
    }
}
.horarios {
    background: #9fe1f4;
    padding: 80px 20px;
    text-align: center;
}

/* título */
.horarios h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 42px;
    color: white;
}

.horarios h2 span {
    color: #fced38;
}

.sub {
    color: #1e6ba5;
    margin-bottom: 40px;
}

/* contenedor con scroll */
.tabla-container {
    overflow-x: auto; /* 🔥 clave para mobile */
}

/* tabla */
table {
    margin: auto;
    border-collapse: collapse;
    min-width: 900px; /* 🔥 hace que se vea grande */
}

/* encabezados */
th {
    background: #f6d861;
    color: #793a24;
    padding: 20px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #f39c3d;
}

/* celdas */
td {
    text-align: center;
    border: 2px solid #f39c3d;
    font-size: 18px;

    font-weight: 600;
    padding: 25px 15px;
    color: #793a24;
}

/* columna grupos */
.grupo {
   background: #e99545; 
    color: #7a3a22;
    font-weight: bold;
    font-size: 20px;
}

/* filas alternas (opcional mejora visual) */
tbody tr:nth-child(odd) td:not(.grupo) {
    background: #82deff; /* azul claro */
}

tbody tr:nth-child(even) td:not(.grupo) {
    background: #f4f4f4; /* gris claro */
}

.requisitos {
    background: #9fe1f4;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

/* ===== TOP ===== */
.top-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 80px;
}

/* TITULO */
.texto h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 4rem;
    line-height: 1.1;
    color: white;
    max-width: 700px;
}

.texto h2 span {
    color: #f9a53c;
}

/* BOTÓN */
.btn-test {
    display: inline-block;
    margin-top: 40px;

    background: #d55e30;
    color: white;

    padding: 18px 40px;
    border-radius: 40px;

    text-decoration: none;
    font-family: 'Open Sauce', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;

    transition: 0.3s;
}

.btn-test:hover {
    transform: scale(1.05);
}

/* PERSONAJE ARRIBA */
.tona-top {
    width: 500px;
}

/* ===== WRAPPER ===== */
.info-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

/* CARD */
.info-card {
    background: #f2f2f2;
    border: 4px solid #f6b63c;

    border-radius: 40px;

    max-width: 700px;
    width: 100%;

    padding: 60px 50px;

    text-align: center;
}

.info-card p {
    font-family: 'Open Sauce', sans-serif;
    color: #1e6ba5;
    font-size: 1.2rem;
    line-height: 1.5;
    font-size: x-large;
    margin-bottom: 30px;
}

/* BADGE */
.badge-importante {
    position: relative;

    top: -58px;
    right: -758px;

    z-index: 2;
    background: #f2c94c;
    color: #6b3a22;

    width: 120px;
    height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-family: 'Open Sauce', sans-serif;
    font-weight: bold;

    clip-path: polygon(
        50% 0%,
        61% 12%,
        75% 5%,
        78% 20%,
        92% 18%,
        88% 32%,
        100% 40%,
        88% 50%,
        100% 60%,
        88% 68%,
        92% 82%,
        78% 80%,
        75% 95%,
        61% 88%,
        50% 100%,
        39% 88%,
        25% 95%,
        22% 80%,
        8% 82%,
        12% 68%,
        0% 60%,
        12% 50%,
        0% 40%,
        12% 32%,
        8% 18%,
        22% 20%,
        25% 5%,
        39% 12%
    );
}

/* PERSONAJE ABAJO */
.tona-small {
   position: absolute;

    left: 28%;
    bottom: -55px;

    transform: translateX(-28%);

    width: clamp(120px, 14vw, 180px);
}


/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {

    .top-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;

    max-width: 1200px;
    margin: 0 auto 80px;
    }

   

    .tona-top {
        margin-top: 40px;
        width: 200px;
    }

    .tona-small,
    .numero {
        display: none;
    }

    .badge-importante {
        right: 10px;
    }

    .info-card {
        padding: 40px 25px;
    }
}
.planes {
    background: #9fe1f4;
    padding: 100px 20px;
}

/* ===== HEADER ===== */

.planes-header {
    max-width: 1200px;
    margin: 0 auto 70px;
}

.planes-header h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 5rem;
    line-height: 0.95;
    color: white;
    margin-bottom: 40px;
}

.planes-header .amarillo {
    color: #fced38;
}

.planes-header h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: 3rem;
    color: white;
}

.planes-header .naranja {
    color: #f9a53c;
}

/* ===== WRAPPER ===== */

.planes-wrapper {
    max-width: 1400px;
    margin: auto;

    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 60px;
    flex-wrap: wrap;
}

/* ===== PERSONAJE ===== */

.tona-side {
    position: relative;
    width: 250px;
}

.tona-side img {
    width: 220px;
}

/* caja pequeña */
.clase-unitaria {
    position: absolute;
    top: -140px;
    left: 20px;

    background: #f2f2f2;
    border: 5px solid #f6d861;
    border-radius: 25px;

    padding: 20px 30px;
    text-align: center;
}

.clase-unitaria p {
    font-family: 'Open Sauce', sans-serif;
    color: #7a3a22;
    font-weight: bold;
    margin-bottom: 10px;
}

.clase-unitaria span {
    font-size: 4rem;
    color: #7a3a22;
    font-weight: bold;
}

/* ===== PLANES ===== */

.plan-card {
    position: relative;

    width: 320px;
    min-height: 650px;

    background: #f2f2f2;

    border: 6px solid #f6d861;
    border-radius: 120px 120px 35px 35px;

    padding: 40px 30px;

    text-align: center;
}

/* círculo arriba */
.top-icon {
    width: 90px;
    height: 90px;

    border-radius: 50%;
    background: #2d86d1;

    margin: -85px auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}



/* label */
.plan-label {
    background: #f4df3d;
    color: #7a3a22;

    padding: 20px;
    border-radius: 40px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: bold;

    margin-bottom: 30px;
}

/* texto */
.plan-card h4 {
    font-family: 'League Spartan', sans-serif;
    color: #7a3a22;

    font-size: 3rem;
    line-height: 1.1;

    margin-bottom: 40px;
}

.plan-card h4 span {
    color: #2d86d1;
}

/* precios */
.precio {
    position: relative;
    margin-bottom: 50px;
}

.notachado {
    display: block;
    margin-top: 75px;
    font-size: 5rem;
    font-weight: bold;
    color: #7a3a22;

    position: relative;
}
.tachado {
    display: block;

    font-size: 5rem;
    font-weight: bold;
    color: #7a3a22;

    position: relative;
}

/* X roja */
.tachado::before,
.tachado::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 120px;
    height: 8px;

    background: red;
    border-radius: 20px;
}

.tachado::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.tachado::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* nuevo precio */
.nuevo {
    position: absolute;
    right: -50px;
    bottom: -40px;

    background: #f2f2f2;

    border: 4px solid #f6d861;
    border-radius: 25px;

    padding: 10px 20px;

    color: #7a3a22;
    font-size: 3rem;
    font-weight: bold;
}

/* botón */
.btn-plan {
    display: inline-block;

    background: #d55e30;
    color: white;

    padding: 18px 35px;
    border-radius: 40px;

    text-decoration: none;

    font-family: 'Open Sauce', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;

    transition: .3s;
}

.btn-plan:hover {
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {

    .planes-header h2 {
        font-size: 3.5rem;
    }

    .planes-header h3 {
        font-size: 2rem;
    }

    .planes-wrapper {
        gap: 100px;
    }

    .plan-card {
        width: 100%;
        max-width: 350px;
    }

    .tona-side {
        display: none;
    }
}
.individuales {
    padding-top: 40px;
}
.porque-tonalli {
    background: #f9a53c;
    padding: 60px 20px;
    overflow: hidden;
}

/* ===== WRAPPER ===== */

.porque-wrapper {
    max-width: 1300px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;

    flex-wrap: wrap;
}

/* ===== PERSONAJE ===== */

.porque-img {
    position: relative;
}

.porque-img img {
    width: 320px;
}

/* ===== TEXTO ===== */

.porque-content h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 5rem;
    line-height: 0.95;

    color: white;

    margin-bottom: 50px;
}

.porque-content h2 span {
    color: #9fe1f4;
}

/* párrafo */
.porque-content p {
    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    line-height: 1.5;

    color: white;
}

.porque-content p span {
    color: #9fe1f4;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {

    .porque-wrapper {
        gap: 60px;
        text-align: center;
    }

    .porque-content h2 {
        font-size: 3.5rem;
    }

    .porque-content p {
        font-size: 1.4rem;
    }

    .porque-img img {
        width: 220px;
    }
}
.beneficios-tonalli {
    background: #f9a53c;
    padding: 60px 20px;
    overflow: hidden;
}

/* ===== GRID ===== */

.beneficios-grid {
    max-width: 1400px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;

    align-items: center;
}

/* ===== CARD ===== */

.beneficio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== HEADER / FOOTER AZUL ===== */

.beneficio-header,
.beneficio-footer {
    width: 100%;
    height: 230px;

    background: #66c4ea;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px;
}

/* arriba */
.beneficio-header {
    border-radius: 200px 200px 0 0;
}

/* abajo */
.beneficio-footer {
    border-radius: 0 0 200px 200px;
}

/* títulos */
.beneficio h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: 2.5rem;
    line-height: 1.1;

    color: #1e6ba5;
}

/* ===== CUERPO BLANCO ===== */

.beneficio-body {
    width: 90%;

    background: #f5f5f5;

    border: 14px solid #66c4ea;
    border-radius: 40px;

    padding: 35px 30px;

    margin-top: -10px;
    margin-bottom: -10px;

    position: relative;
    z-index: 2;
}

/* texto */
.beneficio-body p {
    font-family: 'Open Sauce', sans-serif;
    font-size: 1.8rem;
    line-height: 1.4;

    color: #1e6ba5;
    text-align: center;
}

/* ===== BOTÓN ===== */

.beneficios-btn {
    text-align: center;
    margin-top: 90px;
}

.beneficios-btn a {
    display: inline-block;

    background: #9fe1f4;
    color: #1e6ba5;

    padding: 20px 45px;

    border-radius: 40px;

    text-decoration: none;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: bold;

    transition: .3s;
}

.beneficios-btn a:hover {
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {

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

@media (max-width: 768px) {

    .beneficios-grid {
        grid-template-columns: 1fr;
    }

    .beneficio h3 {
        font-size: 2.3rem;
    }

    .beneficio-body p {
        font-size: 1.3rem;
    }

    .beneficios-btn a {
        font-size: 1.4rem;
    }
}
.conexion-tonalli {
    background: #fced38;
    padding: 100px 20px;
    overflow: hidden;
}

/* ===== WRAPPER ===== */

.conexion-wrapper {
    max-width: 1400px;
    margin: auto;
}

/* ===== TITULO ===== */

.conexion-title {
    text-align: center;
    margin-bottom: 80px;
}

.conexion-title h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 6rem;
    line-height: .95;

    color: white;
}

.conexion-title .naranja {
    color: #d55e30;
}

/* ===== CONTENIDO ===== */

.conexion-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;

    flex-wrap: wrap;
}

/* ===== PERSONAJE ===== */

.conexion-img {
    position: relative;
}

.conexion-img img {
    width: 380px;
}


/* ===== TEXTO ===== */

.conexion-text {
    max-width: 750px;
}

.conexion-text p {
    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    line-height: 1.5;

    color: #7f4827;

    margin-bottom: 45px;
}

/* palabras destacadas */
.conexion-text span {
    color: #f8a43c;
}

/* TONALLI */
.conexion-text h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: 7rem;
    line-height: 1;

    color: #f8a43c;

    margin-top: 20px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px) {

    .conexion-title h2 {
        font-size: 4rem;
    }

    .conexion-content {
        gap: 50px;
    }

    .conexion-text p {
        font-size: 1.4rem;
    }

    .conexion-text h3 {
        font-size: 5rem;
        text-align: center;
    }

    .conexion-img img {
        width: 260px;
    }

    .conexion-text {
        text-align: center;
    }
}

@media (max-width: 768px) {

    .conexion-title h2 {
        font-size: 3rem;
    }

    .conexion-text p {
        font-size: 1.2rem;
    }

    .conexion-text h3 {
        font-size: 4rem;
    }
}
.profesor-tonalli {
    background: #15bce1;
    padding: 110px 20px;
    overflow: hidden;
}

/* ===== WRAPPER ===== */

.profesor-wrapper {
    max-width: 1400px;
    margin: auto;
}

/* ===== HEADER ===== */

.profesor-header {
    text-align: center;
    margin-bottom: 80px;
}

.profesor-header h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 6rem;
    line-height: .95;

    color: white;

    margin-bottom: 35px;
}

.profesor-header h2 span {
    color: #fced38;
}

.profesor-header p {
    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    line-height: 1.4;

    color: white;
}

/* ===== CONTENT ===== */

.profesor-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;

    flex-wrap: wrap;
}

/* ===== INFO ===== */

.profesor-info {
    flex: 1;
    min-width: 350px;
    max-width: 750px;
}

/* nombre + badge */
.profesor-top {
    display: flex;
    align-items: center;
    gap: 35px;

    margin-bottom: 60px;

    flex-wrap: wrap;
}

/* nombre */
.profesor-top h3 {
    font-family: 'League Spartan', sans-serif;
    font-size: 4rem;

    color: white;
}

.profesor-top h3 span {
    color: #fced38;
}

/* badge */
.profesor-badge {
    background: #fced38;
    color: #1e6ba5;

    padding: 18px 35px;
    border-radius: 60px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;

    line-height: 1.3;
}

/* ===== TEXTO ===== */

.profesor-text p {
    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    line-height: 1.55;

    color: white;

    margin-bottom: 35px;
}

/* ===== IMAGEN ===== */

.profesor-img {
    flex-shrink: 0;
}

/* marco */
.img-frame {
    background: white;

    padding: 6px;

    border-radius: 6px;

    transition: .4s;
}

/* hover */
.img-frame:hover {
    transform: rotate(-6deg) scale(1.03);
}

/* imagen */
.img-frame img {
    width: 360px;
    display: block;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px) {

    .profesor-header h2 {
        font-size: 4.5rem;
    }

    .profesor-top {
        justify-content: center;
    }

    .profesor-info {
        text-align: center;
    }

    .profesor-top h3 {
        font-size: 3rem;
    }

    .profesor-text p {
        font-size: 1.5rem;
    }

    .img-frame img {
        width: 280px;
    }
}

@media (max-width: 768px) {

    .profesor-header h2 {
        font-size: 3.2rem;
    }

    .profesor-header p {
        font-size: 1.3rem;
    }

    .profesor-top h3 {
        font-size: 2.4rem;
    }

    .profesor-badge {
        font-size: 1.1rem;
    }

    .profesor-text p {
        font-size: 1.2rem;
    }

    .img-frame img {
        width: 220px;
    }
}
.manifiesto-tonalli {
    background: #15bce1;
    padding: 40px 20px 120px;
    overflow: hidden;
}

/* ===== WRAPPER ===== */

.manifiesto-wrapper {
    max-width: 1250px;
    margin: auto;
}

/* ===== TEXTO ===== */

.manifiesto-content {
    max-width: 1050px;
    margin: auto;
}

/* párrafos */
.manifiesto-content p {
    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    line-height: 1.5;

    color: white;

    margin-bottom: 50px;
}

/* lista */
.manifiesto-list {
    margin: 70px 0;
}

.manifiesto-list ul {
    margin-top: 25px;
    padding-left: 40px;
}

.manifiesto-list li {
    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    line-height: 1.6;

    color: white;

    margin-bottom: 12px;
}

/* frase final */
.manifiesto-content h3 {
    text-align: right;

    font-family: 'League Spartan', sans-serif;
    font-size: 4rem;
    line-height: 1.2;

    color: white;

    margin-top: 70px;
}

.manifiesto-content h3 span {
    color: #1e6ba5;
}

/* ===== BOTTOM ===== */

.manifiesto-bottom {
    margin-top: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 140px;

    flex-wrap: wrap;
}

/* imagen */
.manifiesto-image img {
    width: 260px;
    display: block;
}

/* botón */
.manifiesto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fced38;
    color: #1e6ba5;

    width: 240px;
    height: 90px;

    border-radius: 60px;

    text-decoration: none;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: bold;

    transition: .3s;
}

.manifiesto-btn:hover {
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px) {

    .manifiesto-content p,
    .manifiesto-list li {
        font-size: 1.5rem;
    }

    .manifiesto-content h3 {
        font-size: 3rem;
        text-align: center;
    }

    .manifiesto-bottom {
        gap: 70px;
    }

    .manifiesto-image img {
        width: 200px;
    }
}

@media (max-width: 768px) {

    .manifiesto-content p,
    .manifiesto-list li {
        font-size: 1.2rem;
    }

    .manifiesto-content h3 {
        font-size: 2.2rem;
    }

    .manifiesto-btn {
        width: 200px;
        height: 75px;

        font-size: 1.5rem;
    }

    .manifiesto-image img {
        width: 150px;
    }
}
/* ===== SECCIÓN ===== */

.cara-ajolote {
    background: #d55e30;
    min-height: 100vh;

    padding: 80px 20px 140px;

    overflow: hidden;
}

/* ===== CONTENEDOR PRINCIPAL ===== */

.ajolote-layout {
    position: relative;

    width: 100%;
    max-width: 1500px;
    height: 950px;

    margin: auto;
}

/* ===== TÍTULO CENTRADO ===== */

.cara-title {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 5;

    text-align: center;
}

.cara-title h2 {
    font-family: 'League Spartan', sans-serif;
    font-size: 7rem;
    line-height: .9;

    color: white;
}

.cara-title span {
    color: #15bce1;
}

/* ===== CÍRCULOS ===== */

.ajolote {
    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;
    overflow: hidden;

    background: white;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .3s;
}

.ajolote:hover {
    transform: scale(1.05);
}

.ajolote img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== POSICIONES ===== */

/* IZQUIERDA */
.aj1 {
    top: 120px;
    left: 140px;
}

.aj2 {
    top: 320px;
    left: 230px;
}

.aj3 {
    top: 560px;
    left: 430px;
}

/* ABAJO CENTRO */
.aj4 {
    bottom: 30px;
    left: 38%;
}

.aj5 {
    bottom: 30px;
    right: 38%;
}

/* DERECHA */
.aj6 {
    top: 560px;
    right: 430px;
}

.aj7 {
    top: 320px;
    right: 230px;
}

.aj8 {
    top: 120px;
    right: 140px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {

    .cara-title h2 {
        font-size: 5rem;
    }

    .ajolote-layout {
        height: 850px;
    }

    .ajolote {
        width: 130px;
        height: 130px;
    }

    .aj1 { left: 50px; }
    .aj2 { left: 110px; }
    .aj3 { left: 220px; }

    .aj6 { right: 220px; }
    .aj7 { right: 110px; }
    .aj8 { right: 50px; }
}

@media (max-width: 768px) {

    .ajolote-layout {
        height: auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .cara-title {
        position: relative;

        top: unset;
        left: unset;

        transform: none;

        margin-bottom: 30px;
    }

    .cara-title h2 {
        font-size: 3.2rem;
    }

    .ajolote {
        position: relative !important;

        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;

        width: 110px;
        height: 110px;
    }
}
/* ===== SECCIÓN ===== */

.tona-intro{
    background: #d55e30;

    padding: 90px 20px;

    display: flex;
    justify-content: center;
}

/* ===== TARJETA ===== */

.tona-card{
    width: 100%;
    max-width: 1250px;

    background: #15bce1;

    border-radius: 45px;

    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    position: relative;
}

/* ===== IMAGEN ESCENARIO ===== */

.tona-scene{
    flex: 1.7;
}

.tona-scene img{
    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 40px;
}

/* ===== PERSONAJE ===== */

.tona-character{
    flex: 0.8;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
}

/* ===== GLOBO ===== */

.tona-speech{
    background: white;

    border: 5px solid #2b2b2b;

    border-radius: 40px;

    padding: 22px 28px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: 700;

    text-align: center;
    color: black;

    position: relative;

    margin-bottom: -15px;

    z-index: 2;
}

.tona-speech span{
    font-family: 'League Spartan', sans-serif;
    font-size: 3rem;
}

/* Cola del globo */
.tona-speech::after{
    content: "";

    position: absolute;

    bottom: -24px;
    left: 50%;

    transform: translateX(-50%) rotate(45deg);

    width: 40px;
    height: 40px;

    background: white;

    border-right: 5px solid #2b2b2b;
    border-bottom: 5px solid #2b2b2b;
}

/* ===== CONTENEDOR PERSONAJE ===== */

.tona-img{
    width: 280px;
    height: 320px;

    background: white;

    border-radius: 30px;

    overflow: hidden;

    padding: 12px;
}

.tona-img img{
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* ===== RESPONSIVE ===== */

@media(max-width: 992px){

    .tona-card{
        flex-direction: column;
    }

    .tona-scene{
        width: 100%;
    }

    .tona-scene img{
        height: 320px;
    }

    .tona-character{
        width: 100%;
    }

    .tona-speech{
        font-size: 1.5rem;
    }

    .tona-speech span{
        font-size: 2.3rem;
    }
}

@media(max-width: 600px){

    .tona-card{
        padding: 20px;
        border-radius: 30px;
    }

    .tona-scene img{
        height: 240px;
        border-radius: 25px;
    }

    .tona-img{
        width: 220px;
        height: 260px;
    }

    .tona-speech{
        padding: 18px 20px;
        font-size: 1.2rem;
    }

    .tona-speech span{
        font-size: 1.9rem;
    }
}
/* =========================
   SECCIÓN
========================= */

.tona-adventure{
    background: #d55e30;
    padding: 90px 20px;

    display: flex;
    justify-content: center;
}

/* =========================
   TARJETA
========================= */

.adventure-card{
    width: 100%;
    max-width: 1250px;

    background: #15bce1;

    border-radius: 45px;

    padding: 35px;

    display: flex;
    align-items: center;
    gap: 35px;

    position: relative;
}

/* =========================
   PERSONAJE
========================= */

.adventure-character{
    width: 260px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marco blanco */

.character-frame{
    width: 230px;
    height: 320px;

    background: white;

    border-radius: 28px;

    overflow: hidden;

    padding: 10px;

    position: relative;
}

.character-frame img{
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =========================
   GLOBO
========================= */

.speech-bubble{
    position: absolute;

    top: -40px;
    right: -150px;

    background: white;

    border: 5px solid #2a2a2a;

    border-radius: 45px;

    padding: 20px 28px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: 700;

    line-height: 1.2;
    text-align: center;

    color: black;

    z-index: 3;
}

/* Cola */

.speech-bubble::after{
    content: "";

    position: absolute;

    left: -26px;
    bottom: 35px;

    width: 42px;
    height: 42px;

    background: white;

    border-left: 5px solid #2a2a2a;
    border-bottom: 5px solid #2a2a2a;

    transform: rotate(45deg);
}

/* =========================
   ESCENARIO
========================= */

.adventure-scene{
    flex: 1;
}

.adventure-scene img{
    width: 100%;
    height: 450px;

    object-fit: cover;

    border-radius: 40px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 992px){

    .adventure-card{
        flex-direction: column;
    }

    .adventure-character{
        width: 100%;
    }

    .speech-bubble{
        position: relative;

        top: unset;
        right: unset;

        margin-bottom: 25px;
    }

    .speech-bubble::after{
        left: 50%;
        transform: translateX(-218%) rotate(45deg);
    }

    .adventure-scene{
        width: 100%;
    }

    .adventure-scene img{
        height: 320px;
    }
}

@media(max-width: 600px){

    .adventure-card{
        padding: 20px;
        border-radius: 30px;
    }

    .character-frame{
        width: 190px;
        height: 260px;
    }

    .speech-bubble{
        font-size: 1.4rem;
        padding: 16px 22px;
    }

    .adventure-scene img{
        height: 230px;
        border-radius: 25px;
    }
}
/* =========================
   SECCIÓN
========================= */

.tona-night{
    background: #d55e30;

    padding: 70px 20px 90px;

    display: flex;
    justify-content: center;
}

/* =========================
   CONTENEDOR
========================= */

.night-container{
    width: 100%;
    max-width: 1250px;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
}

/* =========================
   IMAGEN
========================= */

.night-scene{
    width: 100%;
    max-width: 1100px;
}

.night-scene img{
    width: 100%;
    height: 470px;

    object-fit: cover;

    border-radius: 60px;
}

/* =========================
   BOTÓN BLANCO
========================= */

.btn-about{
    margin-top: -35px;

    background: white;

    border: 4px solid black;

    border-radius: 18px;

    padding: 18px 30px;

    text-decoration: none;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: 700;

    color: black;

    line-height: 1.15;
    text-align: center;

    transition: .25s ease;
}

.btn-about:hover{
    transform: translateY(-4px);
}

/* =========================
   BOTÓN REGISTRO
========================= */

.btn-register{
    margin-top: 70px;

    background: #15bce1;

    color: white;

    text-decoration: none;

    padding: 24px 48px;

    border-radius: 999px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2.3rem;
    font-weight: 700;

    transition: .25s ease;
}

.btn-register:hover{
    transform: scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 992px){

    .night-scene img{
        height: 350px;
        border-radius: 40px;
    }

    .btn-about{
        font-size: 1.5rem;
    }

    .btn-register{
        font-size: 1.8rem;
        padding: 20px 38px;
    }
}

@media(max-width: 600px){

    .tona-night{
        padding: 50px 16px 70px;
    }

    .night-scene img{
        height: 240px;
        border-radius: 30px;
    }

    .btn-about{
        margin-top: -25px;

        padding: 14px 22px;

        font-size: 1.1rem;

        border-width: 3px;
    }

    .btn-register{
        margin-top: 45px;

        font-size: 1.3rem;

        padding: 16px 28px;
    }
}
/* =========================
   SECCIÓN
========================= */

.experiencias-tonalli{
    background: #fac846;

    padding: 90px 20px;

    overflow: hidden;
}

/* =========================
   TÍTULO
========================= */

.exp-title{
    font-family: 'League Spartan', sans-serif;
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 800;

    text-align: center;

    color: white;

    margin-bottom: 70px;
}

.exp-title span{
    color: #d55e30;
}

/* =========================
   SLIDER
========================= */

.exp-slider{
    position: relative;

    max-width: 1400px;
    margin: auto;

    display: flex;
    align-items: center;
    gap: 20px;
}

/* =========================
   TRACK
========================= */

.exp-track{
    display: flex;
    gap: 35px;

    overflow-x: auto;

    scroll-behavior: smooth;

    padding: 10px;

    scrollbar-width: none;
}

.exp-track::-webkit-scrollbar{
    display: none;
}

/* =========================
   TARJETAS
========================= */

.exp-card{
    min-width: 360px;
    max-width: 360px;

    background: #f3f3f3;

    border-radius: 55px;

    padding: 35px 28px 40px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* =========================
   ICONO
========================= */

.exp-icon{
    width: 72px;
    height: 72px;

    background: #1989d6;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 35px;
}

/* Espiral */
.spiral{
    width: 28px;
    height: 28px;

    border: 5px solid white;
    border-radius: 50%;

    position: relative;
}

.spiral::after{
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border: 4px solid white;
    border-radius: 50%;

    top: 4px;
    left: 4px;
}

/* =========================
   TEXO
========================= */

.exp-text{
    font-family: 'Open Sauce', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;

    line-height: 1.45;

    color: black;

    margin-bottom: 40px;
}

.exp-author{
    font-family: 'Open Sauce', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;

    color: black;
}

/* =========================
   FLECHAS
========================= */

.exp-arrow{
    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    background: white;

    color: #d55e30;

    font-size: 2rem;
    font-weight: bold;

    cursor: pointer;

    flex-shrink: 0;

    transition: .25s ease;
}

.exp-arrow:hover{
    transform: scale(1.08);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 768px){

    .exp-card{
        min-width: 290px;
        max-width: 290px;

        border-radius: 40px;

        padding: 28px 22px 32px;
    }

    .exp-text{
        font-size: 1rem;
    }

    .exp-author{
        font-size: 1.5rem;
    }

    .exp-arrow{
        width: 48px;
        height: 48px;

        font-size: 1.5rem;
    }
}
/* =========================
   SECCIÓN
========================= */

.faq-tonalli{
    background: #1e6ba5;

    padding: 90px 20px;
}

/* =========================
   TÍTULO
========================= */

.faq-header{
    max-width: 1200px;
    margin: auto auto 60px;
}

.faq-title{
    font-family: 'League Spartan', sans-serif;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 800;

    line-height: .9;

    color: white;
}

.faq-title span{
    color: #fac846;
}

/* =========================
   LAYOUT
========================= */

.faq-layout{
    max-width: 1200px;

    margin: auto;

    display: flex;
    gap: 45px;
}

/* =========================
   FILTROS
========================= */

.faq-filters{
    width: 270px;

    display: flex;
    flex-direction: column;
    gap: 25px;
}

.faq-filter{
    background: #f9c746;

    border: none;

    border-radius: 999px;

    padding: 28px 22px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;

    color: white;

    cursor: pointer;

    transition: .25s ease;
}

.faq-filter:hover,
.faq-filter.active{
    transform: translateX(8px);

    background: #ffd96c;
}

/* =========================
   CONTENIDO
========================= */

.faq-content{
    flex: 1;
}

/* =========================
   GRUPOS
========================= */

.faq-group{
    display: none;
}

.faq-group.active{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* =========================
   ITEM FAQ
========================= */

.faq-item{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =========================
   PREGUNTA
========================= */

.faq-question{
    width: 100%;

    background: #f9c746;

    border: none;

    border-radius: 45px;

    padding: 35px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    cursor: pointer;

    text-align: left;

    font-family: 'Open Sauce', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;

    color: white;
}

/* =========================
   RESPUESTA
========================= */

.faq-answer{
    display: none;

    background: #f6d861;

    border-radius: 40px;

    padding: 35px 40px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;

    line-height: 1.45;

    color: white;
}

.faq-item.active .faq-answer{
    display: block;
}

/* =========================
   ICONO
========================= */

.faq-icon{
    width: 18px;
    height: 18px;

    border-right: 3px solid #5f4a00;
    border-bottom: 3px solid #5f4a00;

    transform: rotate(45deg);

    transition: .25s ease;

    flex-shrink: 0;
}

.faq-item.active .faq-icon{
    transform: rotate(-135deg);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 992px){

    .faq-layout{
        flex-direction: column;
    }

    .faq-filters{
        width: 100%;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .faq-filter{
        flex: 1 1 220px;
    }
}

@media(max-width: 768px){

    .faq-question{
        padding: 28px 24px;

        font-size: 1.15rem;

        border-radius: 30px;
    }

    .faq-answer{
        padding: 28px 24px;

        font-size: 1rem;

        border-radius: 28px;
    }

    .faq-filter{
        font-size: 1rem;
        padding: 20px 18px;
    }
}
/* =========================
   SECCIÓN GENERAL
========================= */

.tonalli-footer-section{
    background: #be8720;

    padding: 90px 20px 0;

    overflow: hidden;
}

/* =========================
   CTA SUPERIOR
========================= */

.tonalli-cta-box{
    max-width: 1100px;

    margin: auto;

    position: relative;
}

.tonalli-cta-content{
    background: #64a155;

    border-radius: 45px;

    min-height: 270px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 40px;

    text-align: center;
}

/* =========================
   TÍTULO
========================= */

.tonalli-cta-title{
    font-family: 'League Spartan', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;

    color: #fced38;

    margin-bottom: 35px;

    line-height: 1;
}

/* =========================
   BOTÓN
========================= */

.tonalli-cta-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 240px;
    height: 95px;

    background: #fced38;

    border-radius: 999px;

    text-decoration: none;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: 700;

    color: #7f4827;

    transition: .25s ease;
}

.tonalli-cta-button:hover{
    transform: translateY(-5px) scale(1.03);
}

/* =========================
   PERSONAJE
========================= */

.tonalli-character{
    position: absolute;

    right: -116px;
    bottom: -60px;

    width: 250px;
}

.tonalli-character img{
    width: 100%;
    display: block;
}

/* =========================
   FOOTER
========================= */

.tonalli-footer{
    max-width: 1250px;

    margin: 120px auto 0;

    background: #fefefe;

    padding: 55px 60px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;

    flex-wrap: wrap;
}

/* =========================
   LOGO
========================= */

.footer-logo img{
    width: 320px;
    max-width: 100%;
}

/* =========================
   CONTACTO
========================= */

.footer-contact{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-contact-item{
    display: flex;
    align-items: center;
    gap: 22px;

    font-family: 'Open Sauce', sans-serif;
    font-size: 2rem;
    font-weight: 700;

    color: black;
}

/* =========================
   ICONOS
========================= */

.footer-icon{
    width: 65px;
    height: 65px;

    border-radius: 50%;

    background: black;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;

    flex-shrink: 0;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 992px){

    .tonalli-character{
        position: relative;

        right: auto;
        bottom: auto;

        width: 180px;

        margin: -20px auto 0;
    }

    .tonalli-footer{
        flex-direction: column;
        text-align: center;
    }

    .footer-contact-item{
        justify-content: center;
    }
}

@media(max-width: 768px){

    .tonalli-footer-section{
        padding-top: 60px;
    }

    .tonalli-cta-content{
        min-height: auto;

        padding: 50px 25px;
    }

    .tonalli-cta-title{
        font-size: 2.3rem;
    }

    .tonalli-cta-button{
        min-width: 190px;
        height: 75px;

        font-size: 1.4rem;
    }

    .footer-contact-item{
        font-size: 1.2rem;

        flex-wrap: wrap;
    }

    .footer-icon{
        width: 55px;
        height: 55px;

        font-size: 1.5rem;
    }
}
/* =========================
   SECCIÓN
========================= */

.schedule-image-section{
    background: #9fe1f4;

    padding: 100px 20px;
}

/* =========================
   CONTENEDOR
========================= */

.schedule-container{
    max-width: 1400px;
    margin: auto;

    text-align: center;
}

/* =========================
   TITULO
========================= */

.schedule-title{
    font-family: 'League Spartan', sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 800;

    color: white;

    margin-bottom: 10px;
}

.schedule-title span{
    color: #fced38;
}

/* =========================
   SUBTITULO
========================= */

.schedule-subtitle{
    font-family: 'Open Sauce', sans-serif;
    font-size: 1.5rem;

    color: #1e6ba5;

    margin-bottom: 50px;
}

/* =========================
   IMAGEN
========================= */

.schedule-image-wrapper{
    width: 100%;
}

.schedule-image{
    width: 100%;
    max-width: 900px;


    display: block;

    margin: auto;

    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

@media (max-width: 900px) {
    .tona-venta {
        margin-top: -70px;
        width: 200px;
        margin-bottom: -130px;
    }
}
.tona-venta {
        margin-top: -70px;
        width: 200px;
        margin-bottom: -130px;
    }
.tona-venta2 {
        margin-top: -70px;
        width: 175px;
        margin-bottom: -130px;
    }
.imagenes-row{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}
.imagenes-row img{

    width: 140px;

    height: 140px;

    object-fit: cover;

    border-radius: 50%;
}