/* ==============================
   EL CORO RD
   DISEÑO CARIBE PREMIUM
   ============================== */

:root {
    --color-fondo: #eef7f7;
    --color-fondo-secundario: #dceff0;
    --color-principal: #071923;
    --color-principal-2: #0d2a36;

    --color-turquesa: #18d6c5;
    --color-turquesa-hover: #26f0dc;

    --color-dorado: #d9b56d;
    --color-dorado-hover: #f0cf86;

    --color-texto: #18323b;
    --color-texto-suave: #60747b;

    --color-blanco: #ffffff;
    --color-card: rgba(255, 255, 255, 0.94);

    --sombra-suave: 0 10px 30px rgba(7, 25, 35, 0.12);
    --sombra-fuerte: 0 18px 45px rgba(7, 25, 35, 0.20);

    --radio: 20px;
}


/* ==============================
   RESETEO GENERAL
   ============================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(
            circle at top right,
            rgba(24, 214, 197, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--color-fondo),
            var(--color-fondo-secundario)
        );

    color: var(--color-texto);

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    line-height: 1.6;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

img {
    max-width: 100%;
}


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

header {
    background:
        linear-gradient(
            135deg,
            rgba(7, 25, 35, 0.98),
            rgba(13, 42, 54, 0.96)
        );

    color: var(--color-blanco);

    padding: 28px 20px 0;

    text-align: center;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18);
}


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

#titulo_principal {
    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

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

    letter-spacing: 5px;

    margin: 0 0 22px;

    text-transform: uppercase;

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


/* ==============================
   NAVEGACIÓN
   ============================== */

nav {
    margin-bottom: 20px;
}

nav ul {
    align-items: center;

    display: flex;

    flex-wrap: wrap;

    gap: 12px 25px;

    justify-content: center;

    list-style: none;

    margin: 0;
    padding: 0;
}

nav a {
    border-radius: 30px;

    color: var(--color-blanco);

    display: inline-block;

    font-size: 16px;
    font-weight: bold;

    letter-spacing: 0.8px;

    padding: 9px 16px;

    text-decoration: none;

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

nav a:hover {
    background:
        rgba(24, 214, 197, 0.12);

    color:
        var(--color-turquesa-hover);

    transform:
        translateY(-2px);
}


/* ==============================
   TEXTO DEL HEADER
   ============================== */

header > p {
    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        17px;

    margin:
        0;

    padding-bottom:
        22px;
}


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

.hero {
    align-items:
        center;

    background-image:
        linear-gradient(
            rgba(3, 18, 27, 0.34),
            rgba(3, 18, 27, 0.48)
        ),
        url('imagenes/fotord.jpg');

    background-position:
        center center;

    background-size:
        cover;

    border-radius:
        22px 22px 0 0;

    color:
        var(--color-blanco);

    display:
        flex;

    justify-content:
        center;

    min-height:
        600px;

    overflow:
        hidden;

    padding:
        100px 20px;

    position:
        relative;

    text-align:
        center;
}


/* ==============================
   BRILLO DECORATIVO
   ============================== */

.hero::before {
    background:
        radial-gradient(
            circle,
            rgba(24, 214, 197, 0.18),
            transparent 65%
        );

    content:
        "";

    height:
        500px;

    left:
        50%;

    pointer-events:
        none;

    position:
        absolute;

    top:
        50%;

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

    width:
        500px;
}


/* ==============================
   CONTENIDO DEL HERO
   ============================== */

.hero_content {
    margin:
        0 auto;

    max-width:
        760px;

    position:
        relative;

    text-align:
        center;

    width:
        100%;

    z-index:
        1;
}

.hero_content h2 {
    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(32px, 6vw, 58px);

    font-weight:
        700;

    letter-spacing:
        2px;

    line-height:
        1.15;

    margin:
        0 0 18px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.55);
}

.hero_content p {
    color:
        rgba(255, 255, 255, 0.94);

    font-size:
        clamp(17px, 2vw, 21px);

    margin:
        0 0 34px;

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


/* ==============================
   ETIQUETAS PREMIUM
   ============================== */

.hero-etiqueta,
.seccion-etiqueta {
    color:
        var(--color-dorado-hover);

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        3px;

    margin-bottom:
        12px;

    text-transform:
        uppercase;
}

.hero_content .hero-etiqueta {
    margin-bottom:
        18px;
}


/* ==============================
   BOTÓN PRINCIPAL DEL HERO
   ============================== */

.hero_content a {
    background:
        linear-gradient(
            135deg,
            var(--color-turquesa),
            #0eb5aa
        );

    border:
        1px solid rgba(255, 255, 255, 0.28);

    border-radius:
        50px;

    box-shadow:
        0 10px 30px rgba(24, 214, 197, 0.28);

    color:
        #062027;

    display:
        inline-block;

    font-size:
        17px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

    padding:
        14px 30px;

    text-decoration:
        none;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.hero_content a:hover {
    background:
        linear-gradient(
            135deg,
            var(--color-turquesa-hover),
            var(--color-turquesa)
        );

    box-shadow:
        0 14px 35px rgba(24, 214, 197, 0.42);

    transform:
        translateY(-4px);
}


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

main {
    margin:
        0 auto;

    max-width:
        1200px;

    padding:
        55px 30px;

    width:
        100%;
}

main h2 {
    margin-bottom:
        15px;
}

main p {
    margin-top:
        0;
}


/* ==============================
   ENCABEZADOS DE SECCIÓN
   ============================== */

.encabezado-seccion {
    margin:
        0 auto 35px;

    max-width:
        760px;

    text-align:
        center;
}

.encabezado-seccion h2 {
    margin-top:
        0;
}

.encabezado-seccion .seccion-etiqueta {
    margin-bottom:
        8px;
}


/* ==============================
   PRESENTACIÓN
   ============================== */

#presentacion {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(244, 252, 252, 0.94)
        );

    border:
        1px solid rgba(24, 214, 197, 0.15);

    border-radius:
        28px;

    box-shadow:
        var(--sombra-suave);

    margin:
        35px auto;

    max-width:
        950px;

    padding:
        40px;

    text-align:
        center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#presentacion:hover {
    box-shadow:
        var(--sombra-fuerte);

    transform:
        translateY(-3px);
}

#presentacion h2 {
    color:
        var(--color-principal);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        36px;

    letter-spacing:
        1px;
}

#presentacion > p:not(.seccion-etiqueta) {
    color:
        var(--color-texto-suave);

    margin:
        0 auto 10px;

    max-width:
        720px;
}


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

.boton-secundario {
    border:
        1px solid var(--color-dorado);

    border-radius:
        50px;

    color:
        #078f87 !important;

    display:
        inline-block;

    font-weight:
        bold;

    margin-top:
        15px;

    padding:
        12px 25px;

    text-decoration:
        none !important;

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

.boton-secundario:hover {
    background:
        var(--color-principal);

    box-shadow:
        0 8px 22px rgba(7, 25, 35, 0.20);

    color:
        var(--color-blanco) !important;

    transform:
        translateY(-3px);
}


/* ==================================================
   ¿POR QUÉ EL CORO RD?
   ================================================== */

#por-que {
    margin:
        90px auto;

    padding:
        10px 0;
}

#por-que .encabezado-seccion h2 {
    color:
        var(--color-principal);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(30px, 5vw, 42px);

    letter-spacing:
        1px;
}

#por-que .encabezado-seccion > p:not(.seccion-etiqueta) {
    color:
        var(--color-texto-suave);
}


/* ==============================
   TARJETAS DE BENEFICIOS
   ============================== */

.beneficios {
    display:
        grid;

    gap:
        22px;

    grid-template-columns:
        repeat(4, 1fr);

    margin:
        0 auto;

    max-width:
        1150px;
}

.beneficio-card {
    background:
        linear-gradient(
            145deg,
            rgba(7, 31, 42, 0.98),
            rgba(13, 57, 68, 0.94)
        );

    border:
        1px solid rgba(217, 181, 109, 0.35);

    border-radius:
        24px;

    box-shadow:
        0 12px 32px rgba(7, 25, 35, 0.16);

    margin:
        0;

    min-height:
        255px;

    overflow:
        hidden;

    padding:
        30px 22px;

    position:
        relative;

    text-align:
        center;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.beneficio-card::before {
    background:
        radial-gradient(
            circle,
            rgba(24, 214, 197, 0.16),
            transparent 68%
        );

    content:
        "";

    height:
        180px;

    pointer-events:
        none;

    position:
        absolute;

    right:
        -80px;

    top:
        -80px;

    width:
        180px;
}

.beneficio-card:hover {
    border-color:
        rgba(240, 207, 134, 0.75);

    box-shadow:
        0 20px 45px rgba(7, 25, 35, 0.28);

    transform:
        translateY(-8px);
}

.beneficio-icono {
    align-items:
        center;

    background:
        rgba(24, 214, 197, 0.10);

    border:
        1px solid rgba(217, 181, 109, 0.50);

    border-radius:
        50%;

    color:
        var(--color-dorado-hover);

    display:
        flex;

    font-size:
        28px;

    height:
        62px;

    justify-content:
        center;

    margin:
        0 auto 20px;

    width:
        62px;
}

.beneficio-card h3 {
    color:
        var(--color-blanco);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        20px;

    letter-spacing:
        0.5px;

    margin:
        0 0 12px;

    position:
        relative;
}

.beneficio-card p {
    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        14px;

    margin:
        0;

    position:
        relative;
}


/* ==================================================
   SECCIÓN EXPERIENCIA
   ================================================== */

#experiencia {
    background:
        linear-gradient(
            135deg,
            rgba(7, 25, 35, 0.98),
            rgba(13, 57, 68, 0.96)
        );

    border:
        1px solid rgba(217, 181, 109, 0.40);

    border-radius:
        32px;

    box-shadow:
        0 18px 45px rgba(7, 25, 35, 0.20);

    margin:
        90px auto;

    max-width:
        1100px;

    overflow:
        hidden;

    padding:
        65px 30px;

    position:
        relative;

    text-align:
        center;
}

#experiencia::before {
    background:
        radial-gradient(
            circle,
            rgba(24, 214, 197, 0.18),
            transparent 65%
        );

    content:
        "";

    height:
        400px;

    left:
        50%;

    pointer-events:
        none;

    position:
        absolute;

    top:
        50%;

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

    width:
        400px;
}

.experiencia-contenido {
    position:
        relative;

    z-index:
        1;
}

.experiencia-contenido h2 {
    color:
        var(--color-blanco);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(30px, 5vw, 45px);

    margin:
        0 0 15px;
}

.experiencia-contenido p:not(.seccion-etiqueta) {
    color:
        rgba(255, 255, 255, 0.75);

    margin:
        0 auto 28px;

    max-width:
        650px;
}

.experiencia-contenido a {
    background:
        linear-gradient(
            135deg,
            var(--color-dorado-hover),
            var(--color-dorado)
        );

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius:
        50px;

    box-shadow:
        0 10px 28px rgba(217, 181, 109, 0.20);

    color:
        var(--color-principal);

    display:
        inline-block;

    font-weight:
        bold;

    padding:
        13px 28px;

    text-decoration:
        none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.experiencia-contenido a:hover {
    box-shadow:
        0 14px 35px rgba(217, 181, 109, 0.35);

    transform:
        translateY(-4px);
}


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

#redes {
    background:
        transparent;

    border:
        none;

    box-shadow:
        none;

    max-width:
        1100px;

    padding:
        20px 0;
}

#redes:hover {
    box-shadow:
        none;

    transform:
        none;
}

#redes .encabezado-seccion h2 {
    color:
        var(--color-principal);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(30px, 5vw, 40px);
}

#redes .encabezado-seccion > p:not(.seccion-etiqueta) {
    color:
        var(--color-texto-suave);
}


/* ==============================
   GRID DE REDES
   ============================== */

.redes-grid {
    display:
        grid;

    gap:
        18px;

    grid-template-columns:
        repeat(4, 1fr);

    margin:
        0 auto;

    max-width:
        1000px;
}


/* ==============================
   TARJETAS DE REDES
   ============================== */

.red-social {
    align-items:
        center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(242, 250, 250, 0.94)
        );

    border:
        1px solid rgba(24, 214, 197, 0.16);

    border-radius:
        24px;

    box-shadow:
        0 10px 28px rgba(7, 25, 35, 0.10);

    display:
        flex;

    flex-direction:
        column;

    min-height:
        210px;

    justify-content:
        center;

    padding:
        25px 15px;

    position:
        relative;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.red-social:hover {
    border-color:
        rgba(217, 181, 109, 0.65);

    box-shadow:
        0 18px 40px rgba(7, 25, 35, 0.18);

    transform:
        translateY(-7px);
}

.red-icono {
    align-items:
        center;

    background:
        linear-gradient(
            135deg,
            var(--color-principal),
            var(--color-principal-2)
        );

    border:
        1px solid rgba(217, 181, 109, 0.50);

    border-radius:
        50%;

    color:
        var(--color-dorado-hover);

    display:
        flex;

    font-family:
        Georgia,
        serif;

    font-size:
        28px;

    font-weight:
        bold;

    height:
        58px;

    justify-content:
        center;

    margin-bottom:
        15px;

    width:
        58px;
}

.red-nombre {
    color:
        var(--color-principal);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        bold;
}

.red-usuario {
    color:
        var(--color-texto-suave);

    font-size:
        14px;

    margin-top:
        3px;
}

.red-proximamente {
    background:
        rgba(24, 214, 197, 0.10);

    border:
        1px solid rgba(24, 214, 197, 0.18);

    border-radius:
        30px;

    color:
        #078f87;

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    margin-top:
        12px;

    padding:
        5px 10px;

    text-transform:
        uppercase;
}


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

#contacto {
    background:
        linear-gradient(
            145deg,
            rgba(7, 31, 42, 0.98),
            rgba(13, 57, 68, 0.95)
        );

    border:
        1px solid rgba(217, 181, 109, 0.40);

    box-shadow:
        0 15px 40px rgba(7, 25, 35, 0.20);

    color:
        var(--color-blanco);

    max-width:
        1100px;
}

#contacto .seccion-etiqueta {
    color:
        var(--color-dorado-hover);
}

#contacto h2 {
    color:
        var(--color-blanco);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;
}

#contacto .encabezado-seccion > p:not(.seccion-etiqueta) {
    color:
        rgba(255, 255, 255, 0.72);
}


/* ==============================
   GRID DE CONTACTO
   ============================== */

.contacto-grid {
    display:
        grid;

    gap:
        18px;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top:
        35px;
}

.contacto-item {
    align-items:
        center;

    background:
        rgba(255, 255, 255, 0.06);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        20px;

    display:
        flex;

    gap:
        15px;

    min-height:
        110px;

    padding:
        20px;

    text-align:
        left;

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

.contacto-item:hover {
    background:
        rgba(24, 214, 197, 0.08);

    border-color:
        rgba(217, 181, 109, 0.45);

    transform:
        translateY(-4px);
}

.contacto-icono {
    align-items:
        center;

    background:
        rgba(24, 214, 197, 0.10);

    border:
        1px solid rgba(217, 181, 109, 0.45);

    border-radius:
        50%;

    color:
        var(--color-dorado-hover);

    display:
        flex;

    flex-shrink:
        0;

    font-size:
        21px;

    height:
        48px;

    justify-content:
        center;

    width:
        48px;
}

.contacto-item h3 {
    color:
        var(--color-blanco);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        17px;

    margin:
        0 0 3px;
}

.contacto-item p {
    color:
        rgba(255, 255, 255, 0.65) !important;

    font-size:
        14px;

    margin:
        0;
}

.contacto-item a {
    color:
        var(--color-turquesa-hover) !important;

    font-size:
        14px;

    word-break:
        break-word;
}

.contacto-item a:hover {
    color:
        var(--color-dorado-hover) !important;
}


/* ==============================
   GALERÍA GENERAL
   ============================== */

#galeria {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    justify-content:
        center;
}

#galeria h2 {
    color:
        var(--color-principal);

    flex-basis:
        100%;

    text-align:
        center;
}

.imagenes {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

    justify-content:
        center;

    margin-top:
        20px;

    width:
        100%;
}

.imagenes img {
    border:
        3px solid rgba(255, 255, 255, 0.85);

    border-radius:
        20px;

    box-shadow:
        0 10px 28px rgba(7, 25, 35, 0.18);

    height:
        280px;

    max-width:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    width:
        280px;
}

.imagenes img:hover {
    box-shadow:
        0 18px 40px rgba(7, 25, 35, 0.28);

    transform:
        scale(1.035)
        translateY(-4px);
}


/* ==============================
   DESTINOS
   ============================== */

#destinos {
    margin-top:
        55px;

    width:
        100%;
}

#destinos > h2 {
    color:
        var(--color-principal);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        38px;

    letter-spacing:
        1px;

    text-align:
        center;
}

#destinos > p {
    color:
        var(--color-texto-suave);

    margin-bottom:
        35px;

    text-align:
        center;
}


/* ==================================================
   TARJETAS DE CATEGORÍAS DE DESTINOS
   ================================================== */

article:not(.beneficio-card) {
    background:
        linear-gradient(
            145deg,
            rgba(7, 31, 42, 0.97),
            rgba(13, 57, 68, 0.94)
        );

    border:
        1px solid rgba(217, 181, 109, 0.45);

    border-radius:
        30px;

    box-shadow:
        0 15px 40px rgba(7, 25, 35, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    margin:
        30px auto;

    max-width:
        900px;

    overflow:
        hidden;

    padding:
        30px;

    position:
        relative;

    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;

    width:
        100%;
}

article:not(.beneficio-card)::before {
    background:
        radial-gradient(
            circle,
            rgba(24, 214, 197, 0.14),
            transparent 65%
        );

    content:
        "";

    height:
        220px;

    pointer-events:
        none;

    position:
        absolute;

    right:
        -80px;

    top:
        -100px;

    width:
        220px;
}

article:not(.beneficio-card):hover {
    border-color:
        rgba(240, 207, 134, 0.75);

    box-shadow:
        0 20px 50px rgba(7, 25, 35, 0.30),
        0 0 30px rgba(24, 214, 197, 0.08);

    transform:
        translateY(-4px);
}

article:not(.beneficio-card) h3 {
    color:
        var(--color-blanco);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        23px;

    letter-spacing:
        0.4px;

    line-height:
        1.4;

    margin-top:
        0;
}

article:not(.beneficio-card) h4 {
    color:
        var(--color-dorado-hover);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        23px;

    letter-spacing:
        0.8px;

    margin-bottom:
        22px;

    text-align:
        center;
}

article:not(.beneficio-card) > p {
    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        16px;

    margin:
        20px 0;

    position:
        relative;

    z-index:
        1;
}


/* ==================================================
   BOTONES DE DESTINOS
   ================================================== */

button {
    background:
        linear-gradient(
            135deg,
            var(--color-turquesa),
            #0da99f
        );

    border:
        1px solid rgba(255, 255, 255, 0.28);

    border-radius:
        50px;

    box-shadow:
        0 8px 24px rgba(24, 214, 197, 0.20);

    color:
        #062027;

    cursor:
        pointer;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        17px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

    padding:
        13px 28px;

    position:
        relative;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

    z-index:
        2;
}

button:hover {
    background:
        linear-gradient(
            135deg,
            var(--color-dorado-hover),
            var(--color-dorado)
        );

    border-color:
        rgba(255, 255, 255, 0.55);

    box-shadow:
        0 12px 30px rgba(217, 181, 109, 0.28);

    color:
        var(--color-principal);

    transform:
        translateY(-3px);
}

button:active {
    transform:
        translateY(0);
}


/* ==================================================
   ESTADO ACTIVO DE LOS BOTONES DE DESTINOS
   ================================================== */

button[aria-expanded="true"] {
    background:
        linear-gradient(
            135deg,
            var(--color-dorado-hover),
            var(--color-dorado)
        );

    border-color:
        rgba(255, 255, 255, 0.55);

    box-shadow:
        0 12px 30px rgba(217, 181, 109, 0.28);

    color:
        var(--color-principal);
}


/* ==============================
   SECCIONES DESPLEGABLES
   ============================== */

#playas,
#montanas,
#cultura,
#lugares {
    margin-top:
        25px;

    max-width:
        100%;

    scroll-margin-top:
        20px;
}


/* ==================================================
   GALERÍAS DE DESTINOS
   ================================================== */

#galeria-playa,
#galeria-montanas,
#galeria-cultura,
#galeria-lugares {
    align-items:
        stretch;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;

    justify-content:
        center;

    margin-top:
        28px;

    width:
        100%;
}


/* ==================================================
   TARJETAS DE DESTINOS
   ================================================== */

.destino-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 251, 251, 0.96)
        );

    border:
        1px solid rgba(24, 214, 197, 0.18);

    border-radius:
        20px;

    box-shadow:
        0 8px 25px rgba(7, 25, 35, 0.14);

    flex:
        0 1 280px;

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    width:
        280px;
}

.destino-card:hover {
    border-color:
        rgba(217, 181, 109, 0.65);

    box-shadow:
        0 18px 40px rgba(7, 25, 35, 0.23);

    transform:
        translateY(-7px);
}

.destino-card img {
    display:
        block;

    height:
        220px;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;

    width:
        100%;
}

.destino-card:hover img {
    transform:
        scale(1.04);
}

.destino-card h5 {
    align-items:
        center;

    color:
        var(--color-principal);

    display:
        flex;

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        19px;

    justify-content:
        center;

    letter-spacing:
        0.4px;

    margin:
        0;

    min-height:
        58px;

    padding:
        12px;

    text-align:
        center;
}


/* ==================================================
   COMPATIBILIDAD CON TARJETAS ANTERIORES
   ================================================== */

.playa-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 251, 251, 0.96)
        );

    border:
        1px solid rgba(24, 214, 197, 0.18);

    border-radius:
        20px;

    box-shadow:
        0 8px 25px rgba(7, 25, 35, 0.14);

    flex:
        0 1 280px;

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    width:
        280px;
}

.playa-card:hover {
    border-color:
        rgba(217, 181, 109, 0.65);

    box-shadow:
        0 18px 40px rgba(7, 25, 35, 0.23);

    transform:
        translateY(-7px);
}

.playa-card img {
    display:
        block;

    height:
        220px;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;

    width:
        100%;
}

.playa-card:hover img {
    transform:
        scale(1.04);
}

.playa-card h5 {
    align-items:
        center;

    color:
        var(--color-principal);

    display:
        flex;

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        19px;

    justify-content:
        center;

    letter-spacing:
        0.4px;

    margin:
        0;

    min-height:
        58px;

    padding:
        12px;

    text-align:
        center;
}


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

footer {
    background:
        linear-gradient(
            135deg,
            var(--color-principal),
            #041219
        );

    color:
        var(--color-blanco);

    margin-top:
        70px;

    padding:
        55px 30px 25px;

    text-align:
        center;
}

.footer-contenido {
    display:
        grid;

    gap:
        45px;

    grid-template-columns:
        2fr 1fr 1fr;

    margin:
        0 auto;

    max-width:
        1100px;

    text-align:
        left;
}

.footer-marca h2 {
    color:
        var(--color-dorado-hover);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        28px;

    letter-spacing:
        3px;

    margin:
        0 0 15px;
}

.footer-marca p {
    color:
        rgba(255, 255, 255, 0.60);

    font-size:
        14px;

    line-height:
        1.8;

    margin:
        0;

    max-width:
        400px;
}

.footer-columna {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}

.footer-columna h3 {
    color:
        var(--color-blanco);

    font-family:
        "Bodoni 72",
        "Didot",
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        18px;

    margin:
        0 0 8px;
}

.footer-columna a,
.footer-columna span {
    color:
        rgba(255, 255, 255, 0.62);

    font-size:
        14px;

    text-decoration:
        none;

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

.footer-columna a:hover {
    color:
        var(--color-turquesa-hover);

    transform:
        translateX(3px);
}

.footer-final {
    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    margin:
        40px auto 0;

    max-width:
        1100px;

    padding-top:
        22px;
}

.footer-final p {
    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        12px;

    margin:
        5px 0;
}

.footer-final .footer-frase {
    color:
        rgba(217, 181, 109, 0.72);

    letter-spacing:
        0.5px;
}


/* ==============================
   FOCO PARA ACCESIBILIDAD
   ============================== */

a:focus-visible,
button:focus-visible {
    outline:
        3px solid var(--color-dorado);

    outline-offset:
        4px;
}


/* ==================================================
   TABLETAS
   ================================================== */

@media (max-width: 900px) {

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

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

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

    .footer-contenido {
        grid-template-columns:
            1.5fr 1fr 1fr;
    }
}


/* ==================================================
   TABLETAS PEQUEÑAS
   ================================================== */

@media (max-width: 768px) {

    #titulo_principal {
        font-size:
            30px;

        letter-spacing:
            3px;
    }

    nav ul {
        gap:
            8px;
    }

    nav a {
        font-size:
            15px;

        padding:
            8px 12px;
    }

    .hero {
        min-height:
            520px;

        padding:
            80px 20px;
    }

    .hero_content h2 {
        font-size:
            38px;
    }

    .hero_content p {
        font-size:
            18px;
    }

    main {
        padding:
            40px 20px;
    }

    #presentacion {
        padding:
            32px 25px;
    }

    #destinos > h2 {
        font-size:
            32px;
    }

    .imagenes img {
        height:
            240px;

        width:
            240px;
    }

    .destino-card,
    .playa-card {
        width:
            260px;

        max-width:
            100%;
    }

    article:not(.beneficio-card) {
        padding:
            26px;
    }

    #experiencia {
        padding:
            55px 25px;
    }

    .footer-contenido {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-marca {
        grid-column:
            1 / -1;
    }
}


/* ==================================================
   CELULARES
   ================================================== */

@media (max-width: 480px) {

    header {
        padding:
            18px 12px 0;
    }

    #titulo_principal {
        font-size:
            24px;

        letter-spacing:
            2px;

        margin-bottom:
            18px;

        overflow-wrap:
            anywhere;
    }

    nav ul {
        flex-direction:
            row;

        gap:
            6px;
    }

    nav a {
        font-size:
            14px;

        padding:
            7px 10px;
    }

    header > p {
        font-size:
            15px;

        padding-bottom:
            18px;
    }

    .hero {
        border-radius:
            16px 16px 0 0;

        min-height:
            460px;

        padding:
            60px 15px;
    }

    .hero_content h2 {
        font-size:
            30px;

        letter-spacing:
            1px;
    }

    .hero_content p {
        font-size:
            16px;

        margin-bottom:
            28px;
    }

    .hero_content a {
        font-size:
            16px;

        padding:
            12px 23px;
    }

    .hero-etiqueta {
        font-size:
            10px;

        letter-spacing:
            2px;
    }

    main {
        padding:
            30px 14px;
    }

    #presentacion,
    #redes,
    #contacto {
        padding:
            28px 20px;

        border-radius:
            22px;
    }

    #presentacion h2,
    #redes h2,
    #contacto h2 {
        font-size:
            28px;
    }

    #por-que {
        margin:
            55px auto;
    }

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

    .beneficio-card {
        min-height:
            auto;

        padding:
            28px 22px;
    }

    #experiencia {
        border-radius:
            24px;

        margin:
            55px auto;

        padding:
            48px 20px;
    }

    #experiencia::before {
        height:
            300px;

        width:
            300px;
    }

    .redes-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            12px;
    }

    .red-social {
        min-height:
            185px;

        padding:
            20px 10px;
    }

    .red-icono {
        font-size:
            24px;

        height:
            52px;

        width:
            52px;
    }

    .red-nombre {
        font-size:
            17px;
    }

    .red-usuario {
        font-size:
            12px;
    }

    .red-proximamente {
        font-size:
            9px;

        padding:
            4px 7px;
    }

    #destinos {
        margin-top:
            40px;
    }

    #destinos > h2 {
        font-size:
            29px;
    }

    article:not(.beneficio-card) {
        border-radius:
            24px;

        padding:
            24px 18px;
    }

    article:not(.beneficio-card) h3 {
        font-size:
            20px;
    }

    article:not(.beneficio-card) h4 {
        font-size:
            21px;
    }

    article:not(.beneficio-card) > p {
        font-size:
            15px;
    }

    button {
        font-size:
            16px;

        padding:
            12px 20px;

        width:
            100%;
    }

    .imagenes {
        gap:
            16px;
    }

    .imagenes img {
        height:
            auto;

        max-width:
            100%;

        width:
            100%;
    }

    .destino-card,
    .playa-card {
        width:
            100%;

        max-width:
            100%;
    }

    .destino-card img,
    .playa-card img {
        height:
            220px;

        max-width:
            100%;
    }

    .destino-card h5,
    .playa-card h5 {
        min-height:
            54px;

        font-size:
            18px;
    }

    .contacto-grid {
        gap:
            12px;
    }

    .contacto-item {
        min-height:
            95px;

        padding:
            16px;
    }

    .contacto-icono {
        height:
            42px;

        width:
            42px;
    }

    .footer-contenido {
        grid-template-columns:
            1fr;

        gap:
            30px;

        text-align:
            center;
    }

    .footer-marca {
        grid-column:
            auto;
    }

    .footer-marca p {
        margin:
            0 auto;
    }

    .footer-columna {
        align-items:
            center;
    }

    footer {
        padding:
            45px 20px 22px;
    }
}


/* ==================================================
   PANTALLAS MUY PEQUEÑAS
   ================================================== */

@media (max-width: 360px) {

    #titulo_principal {
        font-size:
            21px;

        letter-spacing:
            1.5px;
    }

    nav ul {
        gap:
            4px;
    }

    nav a {
        font-size:
            13px;

        padding:
            6px 8px;
    }

    .hero {
        min-height:
            430px;

        padding:
            50px 12px;
    }

    .hero_content h2 {
        font-size:
            27px;
    }

    .hero_content p {
        font-size:
            15px;
    }

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

    .red-social {
        min-height:
            170px;
    }

    button {
        font-size:
            15px;
    }
}