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

body {
    font-family: Arial, sans-serif;
}


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

header {
    height: 90px;
    width: 100%;

    background-color: #111111;

    display: flex;
    align-items: center;

    padding: 0 35px;

    position: relative;
    z-index: 100;
}


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

.header-logo {
    width: 180px;
    height: 90px;

    display: flex;
    align-items: center;

    flex-shrink: 0;

    position: relative;
    z-index: 10;
}

.header-logo img {
    width: 100px;
    height: 100px;

    object-fit: cover;

    border-radius: 50%;

    border: 3px solid #d62828;

    display: block;

    position: relative;
    top: 30px;
}


/* =========================
   NOMBRE (solo visible en móvil,
   cuando el menú de navegación
   está oculto)
========================= */

.header-brand {
    display: none;
}


/* Checkbox oculto que controla el menú */
.menu-checkbox {
    display: none;
}


/* =========================
   MENÚ
========================= */

.header-menu {
    flex: 1;

    display: flex;
    justify-content: center;
}

.header-menu ul {
    display: flex;
    align-items: center;

    gap: 100px;

    list-style: none;
}

.header-menu a {
    position: relative;

    text-decoration: none;

    color: white;

    font-size: 13px;
    font-weight: 700;

    transition: color 0.3s ease;
}


/* Línea roja debajo del menú */

.header-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 0;
    height: 2px;

    background-color: #d62828;

    transition: width 0.3s ease;
}

.header-menu a:hover {
    color: #d62828;
}

.header-menu a:hover::after {
    width: 100%;
}


/* PÁGINA ACTIVA */

.header-menu a.active {
    color: #d62828;
}

.header-menu a.active::after {
    width: 100%;
}


/* =========================
   GRUPO DERECHO: WHATSAPP + HAMBURGUESA
========================= */

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;

    flex-shrink: 0;
}


/* =========================
   WHATSAPP
========================= */

.header-whatsapp {
    width: 180px;

    flex-shrink: 0;
}

.header-whatsapp a {
    width: 100%;

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

    gap: 9px;

    padding: 13px 15px;

    background-color: #d62828;

    color: white;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    border-radius: 2px;

    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
}

.header-whatsapp a:hover {
    background-color: #b51f1f;

    transform: translateY(-2px);
}


/* ICONO WHATSAPP */

.header-whatsapp i {
    font-size: 20px;
}


/* =========================
   HAMBURGUESA
========================= */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;

    width: 26px;
    height: 20px;

    cursor: pointer;

    flex-shrink: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;

    background-color: #ffffff;
    border-radius: 2px;

    transition: transform 0.3s ease, opacity 0.3s ease;
}


/* OVERLAY OSCURO */

.menu-overlay {
    display: none;

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    z-index: 998;

    cursor: pointer;
}


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

@media (max-width: 1100px) {

    header {
        padding: 0 20px;
    }

    .header-menu ul {
        gap: 25px;
    }

    .header-menu a {
        font-size: 11px;
    }

    .header-logo {
        width: 140px;
    }

    .header-whatsapp {
        width: 160px;
    }
}


/* =========================
   TABLET / MÓVIL
========================= */

@media (max-width: 850px) {

    header {
        height: 75px;
        padding: 0 20px;
    }

    .header-logo {
        width: auto;
        height: 75px;
    }

    .header-logo img {
        width: 75px;
        height: 75px;

        position: relative;
        top: 8px;
    }

    /* Nombre centrado que ocupa el hueco que deja el menú al ocultarse */
    .header-brand {
        display: flex;
        flex: 1;
        min-width: 0;

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

        color: #ffffff;

        font-family: "Dancing Script", cursive;
        font-size: clamp(16px, 5vw, 24px);
        font-weight: 700;

        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        pointer-events: none;
    }

    /* Botón hamburguesa visible */
    .menu-toggle {
        display: flex;
    }

    /* Panel del menú deslizante */
    .header-menu {
        position: fixed;
        top: 0;
        right: 0;

        width: 78%;
        max-width: 300px;
        height: 100vh;

        background-color: #111111;
        border-left: 3px solid #d62828;

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

        transform: translateX(100%);
        transition: transform 0.35s ease;

        z-index: 999;
    }

    .header-menu ul {
        flex-direction: column;
        gap: 35px;
    }

    .header-menu a {
        font-size: 14px;
    }

    /* Grupo WhatsApp + hamburguesa pegado a la derecha */
    .header-right {
        margin-left: auto;
        gap: 12px;
    }

    .header-whatsapp {
        width: auto;
    }

    .header-whatsapp a {
        width: auto;
        padding: 11px 15px;
    }

    .header-whatsapp span {
        display: none;
    }

    .header-whatsapp i {
        font-size: 22px;
    }

    /* ===== ESTADOS: MENÚ ABIERTO (checkbox marcado) ===== */

    .menu-checkbox:checked ~ .header-menu {
        transform: translateX(0);
    }

    .menu-checkbox:checked ~ .menu-overlay {
        display: block;
    }

    .menu-checkbox:checked ~ .header-right .menu-toggle span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .menu-checkbox:checked ~ .header-right .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .menu-checkbox:checked ~ .header-right .menu-toggle span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }
}


/* =========================
   HERO
========================= */

.hero {
    display: flex;
    align-items: center;
    gap: 30px;

    padding: 35px 55px 20px;

    background: #ffffff;

    overflow: hidden;

    min-height: 500px;
}

.hero-text {
    flex: 1 1 480px;
}

.hero-kicker {
    color: #d62828;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.hero-title {
    font-size: clamp(34px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    color: #111111;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.hero-title span {
    color: #d62828;
}

.hero-slogan {
    font-family: "Dancing Script", cursive;
    font-size: 28px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 20px;
}

.hero-slogan span {
    color: #d62828;
}

.hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: #444444;
    max-width: 420px;
    margin-bottom: 22px;
}

.hero-styles {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    line-height: 1.8;
    margin-bottom: 30px;
}

.hero-styles span {
    color: #d62828;
    margin: 0 4px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    background-color: #d62828;
    color: #ffffff;

    text-decoration: none;
    text-transform: uppercase;

    font-size: 13px;
    font-weight: 700;

    padding: 15px 28px;
    border-radius: 3px;

    transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero-btn:hover {
    background-color: #b51f1f;
    transform: translateY(-2px);
}


/* =========================
   IMAGEN + CITA
========================= */

.hero-image { 
    flex: 1.25 1 600px; 

    position: relative; 

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

    height: 620px; /* Más espacio para hacer la imagen grande */
    min-height: 0; 

    overflow: hidden; 
}


/* =========================
   IMAGEN DE FONDO
========================= */

.hero-image-bg { 
    position: absolute; 

    width: 100%; 
    height: 100%; 

    left: 0; 
    bottom: 0; 

    z-index: 0; 

    background-image: url("../img/BackgroundMain.png"); 

    background-size: cover; 

    /*
       POSICIÓN DE LA IMAGEN DE FONDO

       50% = centro
       60% = un poco a la derecha
       70% = más a la derecha
       80% = todavía más a la derecha
       100% = del todo a la derecha (al final)

       Puedes cambiar SOLO el primer número.
    */
    background-position: 100% center; 

    background-repeat: no-repeat; 
}


/* =========================
   BAILARINA
========================= */

.hero-image img { 
    position: relative; 

    z-index: 1; 

    /* Aumentamos considerablemente el tamaño */
    width: auto; 
    height: 720px; 

    max-width: none; 

    object-fit: contain; 

    display: block; 
}

/* =========================
   BAILA · SIENTE · VIVE
========================= */

.highlights {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #111111;

    padding: 35px 40px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0 55px;

    position: relative;
}

.highlight-item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 1px;
    height: 45px;

    background-color: rgba(255, 255, 255, 0.15);
}

.highlight-item i {
    color: #d62828;
    font-size: 30px;
    flex-shrink: 0;
}

.highlight-item h3 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.highlight-item p {
    color: #cccccc;
    font-size: 13px;
    max-width: 190px;
    line-height: 1.4;
}


/* =========================
   RESPONSIVE — HERO / HIGHLIGHTS
========================= */

@media (max-width: 1100px) {

    .hero {
        padding: 50px 30px;
        gap: 30px;
    }

    .highlights {
        gap: 20px;
        padding: 30px 20px;
    }

    .highlight-item {
        padding: 0 20px;
    }
}

@media (max-width: 850px) {

    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image {
        order: -1;
    }

    .highlights {
        flex-direction: column;
        gap: 25px;
    }

    .highlight-item {
        padding: 0;
        flex-direction: column;
        text-align: center;
    }

    .highlight-item:not(:first-child)::before {
        display: none;
    }

    .highlight-item p {
        max-width: none;
    }
}


/* =========================================================
   POR QUÉ BAILAR
========================================================= */

.why-dance {
    padding: 70px 55px 60px;

    background: #ffffff;
}

.section-heading {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: .5px;

    margin-bottom: 14px;
}

.section-script {
    font-family: "Dancing Script", cursive;
    font-size: 24px;
    font-weight: 600;
    color: #d62828;

    margin-bottom: 18px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;

    margin-top: 45px;
}

.why-item {
    text-align: center;
}

.why-item i {
    font-size: 32px;
    color: #d62828;

    margin-bottom: 16px;
}

.why-item h3 {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #111111;

    margin-bottom: 8px;
}

.why-item p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #555555;

    max-width: 230px;
    margin: 0 auto;
}

.why-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 45px;

    font-family: "Dancing Script", cursive;
    font-size: 22px;
    font-weight: 600;
    color: #d62828;
    text-align: center;
}

.tagline-line {
    position: relative;

    width: 50px;
    height: 0;
    flex-shrink: 0;

    border-top: 1px dashed #d62828;
}

.tagline-line::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;

    width: 6px;
    height: 6px;

    background-color: #d62828;
    border-radius: 50%;

    transform: translateX(-50%);
}


/* =========================================================
   BOTONES REUTILIZABLES
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 15px 26px;

    border: 2px solid transparent;
    border-radius: 3px;

    text-decoration: none;
    text-transform: uppercase;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.2s ease;
}

.btn-primary {
    background-color: #d62828;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #b51f1f;
    transform: translateY(-2px);
}

.btn-dark {
    background-color: #111111;
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #000000;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}

.btn-outline:hover {
    background-color: #ffffff;
    color: #111111;
    border-color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   MARCADOR DE IMAGEN (mientras se añaden las fotos definitivas)
========================================================= */

.img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 260px;

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

    background: linear-gradient(160deg, #f2f2f2 0%, #e4e4e4 100%);

    border: 2px dashed #d0d0d0;
    border-radius: 10px;

    color: #a8a8a8;

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
}

.img-placeholder i {
    font-size: 30px;
    color: #d62828;
    opacity: .35;
}

.img-placeholder.dark {
    background: linear-gradient(160deg, #1c1c1c 0%, #050505 100%);
    border-color: #333333;
    color: #666666;
}


/* =========================================================
   CONOCE A YAMILÉ / APRENDE CON YAMILÉ
========================================================= */

.about {
    background: #f3ece5;
}

.about-yamile {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    align-items: center;
    gap: 50px;

    padding: 75px 55px 55px;
}

.about-photo {
    position: relative;

    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;

    justify-self: center;

    border-radius: 10px;
    overflow: hidden;
}

.about-text p {
    max-width: 440px;
    margin-bottom: 14px;

    font-size: 14.5px;
    line-height: 1.75;
    color: #444444;
}

.about-side {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    padding-left: 42px;
}

.about-list {
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 16px;

    margin-bottom: 26px;
}

.about-list li {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #111111;
}

.about-list i {
    width: 22px;

    font-size: 17px;
    color: #d62828;

    text-align: center;
}

.learn-yamile {
    display: grid;
    grid-template-columns: 240px 1fr 1.3fr;
    align-items: center;
    gap: 50px;

    padding: 25px 55px 80px;
}

.learn-photo {
    position: relative;

    width: 100%;
    max-width: 260px;
    aspect-ratio: 3 / 4;

    justify-self: center;

    border-radius: 10px;
    overflow: hidden;
}

/* Las fotos rellenan su marco sin deformarse */
.about-photo img,
.learn-photo img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    display: block;
}

.learn-text p {
    max-width: 340px;
    margin-bottom: 26px;

    font-size: 14.5px;
    line-height: 1.8;
    color: #333333;
}

.styles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 34px;
}

.style-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.style-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

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

    background-color: #d62828;
    color: #ffffff;

    border-radius: 50%;

    font-size: 16px;
}

.style-item h4 {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #111111;

    margin-bottom: 4px;
}

.style-item p {
    font-size: 12.5px;
    line-height: 1.45;
    color: #666666;
}


/* =========================================================
   FOOTER — CTA "¿TE ANIMAS A BAILAR?"
========================================================= */

.footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 45px;

    padding: 55px 55px 45px;

    background-color: #d62828;
}

.cta-message {
    flex: 1 1 260px;
}

.cta-heading {
    font-family: "Dancing Script", cursive;
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 700;
    color: #ffffff;

    margin-bottom: 10px;
}

.cta-deco {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    font-size: 13px;

    opacity: .85;
}

.cta-deco::after {
    content: "";

    flex: 1;
    max-width: 90px;
    height: 1px;

    background-color: rgba(255, 255, 255, 0.5);
}

.cta-text {
    flex: 1 1 240px;

    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.cta-contact {
    flex: 1 1 220px;

    list-style: none;

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

.cta-contact li {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
}

.cta-contact i {
    width: 20px;

    font-size: 16px;

    text-align: center;
}

.cta-contact a {
    color: #ffffff;
    text-decoration: none;
}

.cta-contact a:hover {
    text-decoration: underline;
}

.cta-qr {
    flex: 0 0 auto;

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

    text-align: center;
}

.cta-qr img {
    width: 110px;
    height: 110px;

    padding: 8px;

    background-color: #ffffff;
    border-radius: 8px;
}

.cta-qr p {
    max-width: 130px;

    font-family: "Dancing Script", cursive;
    font-size: 15px;
    line-height: 1.3;
    color: #ffffff;
}


/* =========================================================
   RESPONSIVE — SECCIONES NUEVAS DE INICIO
========================================================= */

@media (max-width: 1100px) {

    .why-dance,
    .about-yamile,
    .learn-yamile,
    .footer-cta {
        padding-left: 30px;
        padding-right: 30px;
    }

    .about-yamile {
        grid-template-columns: 200px 1fr 260px;
        gap: 35px;
    }

    .learn-yamile {
        grid-template-columns: 200px 1fr 1fr;
        gap: 35px;
    }
}

@media (max-width: 1000px) {

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }

    .about-yamile {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;

        gap: 30px;
    }

    .about-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-side {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.12);

        padding-left: 0;
        padding-top: 30px;

        text-align: center;
    }

    .about-list li {
        justify-content: center;
    }

    .learn-yamile {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;

        gap: 30px;
    }

    .learn-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .styles-grid {
        max-width: 480px;
    }

    .style-item {
        text-align: left;
    }

    .footer-cta {
        justify-content: center;
        text-align: center;
    }

    .cta-deco {
        justify-content: center;
    }

    .cta-contact {
        align-items: center;
    }
}

@media (max-width: 640px) {

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

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

    .style-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .why-tagline {
        flex-direction: column;
        gap: 10px;
    }

    .tagline-line {
        display: none;
    }

    .footer-cta {
        padding: 45px 25px 35px;
    }
}


/* =========================================================
   PÁGINA DE CONTACTO
   ESTILO: BLANCO + ROJO + NEGRO
========================================================= */

.contact-page {
    background: #ffffff;
    color: #111111;
    min-height: calc(100vh - 90px);
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 85px 30px 100px;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.contact-heading {
    max-width: 750px;
    margin: 0 auto 65px;
    text-align: center;
}

.contact-subtitle {
    display: inline-block;

    margin-bottom: 16px;

    color: #d71920;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.contact-heading h1 {
    margin: 0 0 20px;

    color: #111111;

    font-size: clamp(44px, 6vw, 68px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
}

.contact-heading h1 span {
    color: #d71920;
}

.contact-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #666666;

    font-size: 16px;
    line-height: 1.8;
}


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

.contact-content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    gap: 65px;

    align-items: start;
}


/* =========================================================
   INFORMACIÓN DE CONTACTO
========================================================= */

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


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

.contact-card {
    display: flex;
    align-items: center;

    gap: 20px;

    padding: 23px;

    background: #ffffff;

    border: 1px solid #e8e8e8;
    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-4px);

    border-color: #d71920;

    box-shadow: 0 15px 35px rgba(215, 25, 32, 0.10);
}


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

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

    flex-shrink: 0;

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

    background: #fff1f1;

    border-radius: 50%;

    color: #d71920;

    font-size: 21px;
}

.contact-card span {
    display: block;

    margin-bottom: 5px;

    color: #d71920;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.contact-card h3 {
    margin: 0 0 5px;

    color: #111111;

    font-size: 17px;
    font-weight: 700;
}

.contact-card p,
.contact-card a {
    margin: 0;

    color: #777777;

    font-size: 14px;
    line-height: 1.5;

    text-decoration: none;
}

.contact-card a {
    color: #222222;
    font-weight: 600;

    transition: color 0.3s ease;
}

.contact-card a:hover {
    color: #d71920;
}


/* =========================================================
   REDES SOCIALES
========================================================= */

.contact-social {
    margin-top: 20px;
}

.contact-social > span {
    display: block;

    margin-bottom: 14px;

    color: #777777;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 43px;
    height: 43px;

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

    background: #111111;
    color: #ffffff;

    border-radius: 50%;

    text-decoration: none;

    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #d71920;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(215, 25, 32, 0.25);
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form-box {
    position: relative;

    padding: 40px;

    background: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 14px;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);

    overflow: hidden;
}


/* Línea roja superior */

.contact-form-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #d71920;
}


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

.form-title {
    margin-bottom: 30px;
}

.form-title span {
    display: block;

    margin-bottom: 8px;

    color: #d71920;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.form-title h2 {
    margin: 0;

    color: #111111;

    font-size: 29px;
    font-weight: 800;
}


/* =========================================================
   CAMPOS
========================================================= */

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #222222;

    font-size: 13px;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 14px 15px;

    background: #fafafa;
    color: #111111;

    border: 1px solid #dddddd;
    border-radius: 7px;

    outline: none;

    font-family: inherit;
    font-size: 14px;

    transition: all 0.25s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999999;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #bbbbbb;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: #ffffff;

    border-color: #d71920;

    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.08);
}

.form-group textarea {
    min-height: 135px;

    resize: vertical;
}

.form-group select {
    cursor: pointer;
}


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

.contact-submit {
    width: 100%;

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

    padding: 16px 20px;

    background: #d71920;
    color: #ffffff;

    border: none;
    border-radius: 7px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.contact-submit i {
    font-size: 15px;

    transition: transform 0.3s ease;
}

.contact-submit:hover {
    background: #b9141a;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(215, 25, 32, 0.25);
}

.contact-submit:hover i {
    transform: translateX(5px);
}


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

footer {
    background: #111111;

    color: #ffffff;

    border-top: 4px solid #d71920;
}

.footer-content {
    max-width: 1200px;
    margin: auto;

    padding: 55px 30px 40px;

    text-align: center;
}

.footer-logo img {
    width: 130px;

    margin-bottom: 15px;
}

.footer-content p {
    margin-bottom: 22px;

    color: #999999;

    font-size: 14px;
}

.footer-social {
    display: flex;
    justify-content: center;

    gap: 10px;
}

.footer-social a {
    width: 38px;
    height: 38px;

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

    color: #ffffff;

    border: 1px solid #444444;
    border-radius: 50%;

    text-decoration: none;

    transition: all 0.3s ease;
}

.footer-social a:hover {
    color: #ffffff;

    background: #d71920;

    border-color: #d71920;
}

.footer-bottom {
    padding: 18px 20px;

    color: #777777;

    border-top: 1px solid #292929;

    text-align: center;

    font-size: 12px;
}


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

@media (max-width: 900px) {

    .contact-content {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .contact-info {
        order: 2;
    }

    .contact-form-box {
        order: 1;
    }
}


@media (max-width: 600px) {

    .contact-hero {
        padding: 60px 18px 80px;
    }

    .contact-heading {
        margin-bottom: 45px;
    }

    .contact-heading h1 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .contact-heading p {
        font-size: 15px;
    }

    .contact-form-box {
        padding: 30px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-card {
        padding: 20px;
    }

    .contact-icon {
        width: 48px;
        height: 48px;
    }

}


/* =========================================================
   PÁGINA DE YAMILÉ
========================================================= */

/* ===== HERO ===== */

.yamile-hero {
    display: flex;
    align-items: center;
    gap: 60px;

    padding: 90px 55px 70px;

    background: #ffffff;
}

.yamile-hero-photo {
    position: relative;
    flex: 0 0 280px;

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

.yamile-hero-photo::before {
    content: "";
    position: absolute;
    inset: -14px;

    border: 2px dashed rgba(214, 40, 40, 0.35);
    border-radius: 50%;
}

.yamile-photo-circle {
    width: 280px;
    height: 280px;

    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #d62828;

    position: relative;
    z-index: 1;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.yamile-hero-text {
    flex: 1 1 420px;
}

.yamile-kicker {
    display: block;

    margin-bottom: 14px;

    color: #d62828;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.yamile-intro {
    max-width: 540px;
    margin-bottom: 28px;

    font-size: 15px;
    line-height: 1.75;
    color: #444444;
}

.yamile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.btn-outline-dark {
    background-color: transparent;
    color: #111111;
    border-color: rgba(17, 17, 17, 0.25);
}

.btn-outline-dark:hover {
    background-color: #111111;
    color: #ffffff;
    border-color: #111111;
    transform: translateY(-2px);
}


/* ===== TRAYECTORIA PROFESIONAL ===== */

.career-section {
    padding: 70px 55px 60px;

    background: #f3ece5;
}

.career-heading {
    max-width: 650px;
}

.career-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

    margin-top: 45px;
}

.career-item {
    padding: 26px 22px;

    background: #ffffff;
    border-radius: 10px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.career-years {
    display: inline-block;

    margin-bottom: 14px;
    padding: 5px 12px;

    background: #fff1f1;
    color: #d62828;

    border-radius: 30px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
}

.career-item h3 {
    margin-bottom: 8px;

    color: #111111;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.career-item p {
    color: #666666;

    font-size: 13px;
    line-height: 1.55;
}


/* ===== ESCENARIOS POR EL MUNDO ===== */

.stages-section {
    padding: 70px 55px 65px;

    background: #111111;

    text-align: center;
}

.stages-section .section-heading {
    color: #ffffff;
}

.stages-intro {
    max-width: 600px;
    margin: 0 auto 45px;

    color: #cccccc;

    font-size: 14.5px;
    line-height: 1.7;
}

.stages-groups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.stages-group {
    min-width: 200px;
}

.stages-group h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-bottom: 18px;

    color: #d62828;

    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.location-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    max-width: 260px;
}

.location-tag {
    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
}


/* ===== ESTILOS QUE ENSEÑA (foto recortada) ===== */

.photo-frame {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: linear-gradient(160deg, #ffffff 0%, #e9e0d6 100%);
    border-radius: 10px;

    overflow: hidden;
}

.cutout-photo {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: bottom;

    display: block;
}

.yamile-styles-block {
    padding-top: 80px;
}


/* ===== RECONOCIMIENTOS Y PROYECTOS ===== */

.recognition-heading {
    max-width: 650px;
}

.recognition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    margin-top: 45px;
}


/* =========================================================
   RESPONSIVE — PÁGINA DE YAMILÉ
========================================================= */

@media (max-width: 1100px) {

    .yamile-hero,
    .career-section,
    .stages-section {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 1000px) {

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

@media (max-width: 850px) {

    .yamile-hero {
        flex-direction: column;
        text-align: center;

        padding: 60px 20px 40px;
        gap: 35px;
    }

    .yamile-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .yamile-hero-actions {
        justify-content: center;
    }

    .yamile-styles-block {
        padding-top: 30px;
    }
}

@media (max-width: 640px) {

    .career-grid,
    .recognition-grid {
        grid-template-columns: 1fr;
    }

    .stages-groups {
        gap: 35px;
    }
}


/* =========================================================
   PÁGINA DE GALERÍA
========================================================= */

.gallery-page {
    background: #ffffff;
}


/* ===== CABECERA ===== */

.gallery-hero {
    padding: 80px 55px 0;

    text-align: center;
}

.gallery-kicker {
    display: block;

    margin-bottom: 14px;

    color: #d62828;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.gallery-hero .section-heading {
    margin-bottom: 10px;
}

.gallery-intro {
    max-width: 600px;
    margin: 0 auto;

    color: #555555;

    font-size: 15px;
    line-height: 1.75;
}


/* ===== FILTROS (sin JavaScript) ===== */

/* Los radios están ocultos: se controlan con los <label> */
.filter-input {
    display: none;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    padding: 45px 55px 30px;
}

.gallery-filters label {
    padding: 10px 20px;

    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: 30px;

    color: #111111;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;

    cursor: pointer;
    user-select: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.gallery-filters label:hover {
    border-color: #d62828;
    color: #d62828;
}

/* Filtro activo */
#f-todas:checked   ~ .gallery-filters label[for="f-todas"],
#f-clases:checked  ~ .gallery-filters label[for="f-clases"],
#f-rueda:checked   ~ .gallery-filters label[for="f-rueda"],
#f-shows:checked   ~ .gallery-filters label[for="f-shows"],
#f-eventos:checked ~ .gallery-filters label[for="f-eventos"] {
    background-color: #d62828;
    border-color: #d62828;
    color: #ffffff;
}

/* Ocultar las fotos que no pertenecen a la categoría elegida */
#f-clases:checked  ~ .gallery-grid .g-item:not(.cat-clases),
#f-rueda:checked   ~ .gallery-grid .g-item:not(.cat-rueda),
#f-shows:checked   ~ .gallery-grid .g-item:not(.cat-shows),
#f-eventos:checked ~ .gallery-grid .g-item:not(.cat-eventos) {
    display: none;
}


/* ===== MOSAICO ===== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;   /* rellena los huecos que dejan las fotos grandes */
    gap: 14px;

    padding: 0 55px 75px;
}

.g-item {
    position: relative;

    background: #f3ece5;
    border-radius: 10px;

    overflow: hidden;
}

/* Tamaños especiales */
.g-item.item-tall {
    grid-row: span 2;
}

.g-item.item-wide {
    grid-column: span 2;
}

/* La foto (cuando sustituyas el placeholder por un <img>) */
.g-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}

.g-item:hover img {
    transform: scale(1.06);
}

/* Ajuste del placeholder gris dentro del mosaico */
.g-item .img-placeholder {
    min-height: 0;

    border-radius: 10px;
    border-width: 1px;
}

/* Marco rojo al pasar el ratón */
.g-item::after {
    content: "";

    position: absolute;
    inset: 0;

    border: 0 solid #d62828;
    border-radius: 10px;

    pointer-events: none;

    transition: border-width 0.25s ease;
}

.g-item:hover::after {
    border-width: 3px;
}


/* ===== TEXTO SOBRE LA FOTO ===== */

.g-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 45px 18px 16px;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 15%, rgba(0, 0, 0, 0));

    color: #ffffff;

    pointer-events: none;
}

.g-tag {
    display: inline-block;

    margin-bottom: 7px;
    padding: 4px 11px;

    background-color: #d62828;

    border-radius: 30px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.g-item h3 {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.3;
}


/* ===== BLOQUE DE INSTAGRAM ===== */

.gallery-instagram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    padding: 60px 55px;

    background-color: #111111;
}

.gallery-instagram-text {
    flex: 1 1 420px;
}

.gallery-instagram .section-heading {
    color: #ffffff;
}

.gallery-instagram p {
    max-width: 460px;

    color: #cccccc;

    font-size: 14.5px;
    line-height: 1.7;
}

.gallery-instagram .btn i {
    font-size: 18px;
}


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

@media (max-width: 1100px) {

    .gallery-hero,
    .gallery-filters,
    .gallery-grid,
    .gallery-instagram {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 850px) {

    .gallery-grid {
        grid-auto-rows: 175px;
    }

    .gallery-instagram {
        flex-direction: column;
        text-align: center;
    }

    .gallery-instagram p {
        margin: 0 auto;
    }
}

@media (max-width: 640px) {

    .gallery-hero {
        padding: 55px 18px 0;
    }

    .gallery-filters {
        gap: 8px;

        padding: 30px 18px 22px;
    }

    .gallery-filters label {
        padding: 9px 15px;

        font-size: 11px;
    }

    /* Mosaico de 2 columnas en móvil */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 145px;
        gap: 10px;

        padding: 0 18px 55px;
    }

    .g-item figcaption {
        padding: 35px 12px 12px;
    }

    .g-item h3 {
        font-size: 12.5px;
    }

    .gallery-instagram {
        padding: 45px 25px;
    }
}