/* =========================================================
   VARIABLES
========================================================= */

:root {

    /* -----------------------------------------------
       BASE
    ------------------------------------------------ */

    --black: #070909;
    --black-soft: #0D1210;
    --card: #151C18;
    --card-light: #1B2520;

    /* -----------------------------------------------
       VERDE PRINCIPAL
    ------------------------------------------------ */

    --green: #138A55;
    --green-dark: #0B5F3A;
    --green-light: #25B875;
    --green-soft: rgba(19, 138, 85, 0.12);

    /* -----------------------------------------------
       ROJO
    ------------------------------------------------ */

    --red: #C6283D;
    --red-dark: #9F1F31;
    --red-light: #E04A5D;
    --red-soft: rgba(198, 40, 61, 0.12);

    /* -----------------------------------------------
       BLANCOS
    ------------------------------------------------ */

    --white: #FFFFFF;
    --white-soft: #F4F7F5;
    --text: #E3E9E5;
    --muted: #9BA7A0;

    /* -----------------------------------------------
       BORDES
    ------------------------------------------------ */

    --border:
        rgba(19, 138, 85, 0.35);

    --border-soft:
        rgba(255, 255, 255, 0.09);

    /* -----------------------------------------------
       WHATSAPP
    ------------------------------------------------ */

    --whatsapp: #25D366;

    /* -----------------------------------------------
       ERRORES
    ------------------------------------------------ */

    --danger: #E04A5D;

    /* -----------------------------------------------
       DIMENSIONES
    ------------------------------------------------ */

    --max-width: 1200px;
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

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

    background: var(--black);
    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================
   SELECCIÓN DE TEXTO
========================================================= */

::selection {
    background: var(--green);
    color: var(--white);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--black);
}

::-webkit-scrollbar-thumb {
    background: var(--green-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 76px;

    padding: 0 6%;

    display: flex;

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

    background:
        rgba(7, 9, 9, 0.90);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom:
        1px solid
        rgba(19, 138, 85, 0.20);

    z-index: 1000;
}


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

.logo {

    position: relative;

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: 2px;

    white-space: nowrap;

    color: var(--white);
}

.logo span {
    color: var(--red);
}


/* pequeño detalle verde */

.logo::before {

    content: "";

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 8px;

    background: var(--green);

    border-radius: 50%;

    vertical-align: middle;

    box-shadow:
        0 0 12px
        rgba(19, 138, 85, 0.7);
}


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

.nav-menu {

    display: flex;

    align-items: center;

    gap: 30px;
}

.nav-menu a {

    position: relative;

    color: #D8DFDA;

    font-size: 0.88rem;

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

.nav-menu a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--green);

    transition: width 0.3s ease;
}

.nav-menu a:hover {

    color: var(--white);

    transform: translateY(-1px);
}

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


/* =========================================================
   BOTÓN COTIZA DEL MENÚ
   Si el enlace tiene esta clase, gana protagonismo
========================================================= */

.nav-menu a.cta,
.nav-menu a[href*="cotiza"] {

    padding:
        9px 16px;

    background:
        var(--red);

    border-radius: 5px;

    color: var(--white);

    font-weight: 700;
}

.nav-menu a.cta::after,
.nav-menu a[href*="cotiza"]::after {
    display: none;
}

.nav-menu a.cta:hover,
.nav-menu a[href*="cotiza"]:hover {

    background:
        var(--red-light);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(198, 40, 61, 0.25);
}


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

.menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    background: transparent;

    border: none;

    cursor: pointer;

    flex-direction: column;

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

    gap: 5px;
}

.menu-toggle span {

    display: block;

    width: 24px;
    height: 2px;

    background: var(--white);

    transition: 0.3s ease;
}


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

.section {
    width: 100%;

    padding-top: 110px;
    padding-bottom: 110px;

    padding-left:
        max(
            24px,
            calc((100% - var(--max-width)) / 2)
        );

    padding-right:
        max(
            24px,
            calc((100% - var(--max-width)) / 2)
        );

    margin-left: auto;
    margin-right: auto;
}

.section-heading {

    max-width: 700px;

    margin:
        0
        auto
        60px;

    text-align: center;
}

.section-heading > span {

    color: var(--green-light);

    font-size: 0.75rem;

    font-weight: bold;

    letter-spacing: 4px;
}

.section-heading h2 {

    margin-top: 8px;

    color: var(--white);

    font-size:
        clamp(2rem, 5vw, 3.3rem);

    line-height: 1.1;
}

.section-heading p {

    margin-top: 18px;

    color: var(--muted);
}


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

.hero {

    position: relative;

    min-height: 100svh;

    padding:
        120px 6%
        80px;

    display: flex;

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

    text-align: center;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   OVERLAY DEL HERO
========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7, 9, 9, 0.96) 0%,
            rgba(7, 9, 9, 0.72) 50%,
            rgba(7, 9, 9, 0.91) 100%
        );

    z-index: 0;
}


/* línea verde decorativa */

.hero::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--green-light),
            var(--red)
        );

    z-index: 2;
}


/* brillo verde */

.hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 45%;

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

    background:
        radial-gradient(
            circle,
            rgba(19, 138, 85, 0.10),
            transparent 70%
        );

    pointer-events: none;
}


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

.hero-content {

    position: relative;

    z-index: 3;

    max-width: 1000px;

    width: 100%;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.hero-subtitle {

    margin-bottom: 20px;

    color: var(--green-light);

    font-size: 0.75rem;

    font-weight: bold;

    letter-spacing: 6px;

    text-transform: uppercase;
}


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

.hero h1 {

    color: var(--white);

    font-size:
        clamp(3rem, 10vw, 7.5rem);

    font-weight: 900;

    line-height: 0.88;

    letter-spacing: 4px;

    text-transform: uppercase;

    text-shadow:
        0 8px 40px
        rgba(0, 0, 0, 0.55);
}


/* palabra / título fuerte */

.hero h1 strong {

    color: var(--green-light);
}


/* =========================================================
   SUBTÍTULO H2
========================================================= */

.hero h2 {

    margin-top: 20px;

    color: var(--white);

    font-size:
        clamp(1.4rem, 4vw, 2.8rem);

    font-weight: 700;

    line-height: 1.1;
}

/* =========================================================
   DESCRIPCIÓN
========================================================= */

.hero-description {

    max-width: 650px;

    margin:
        28px
        auto
        0;

    color: #D0D9D3;

    font-size:
        clamp(0.95rem, 2vw, 1.15rem);

    line-height: 1.7;
}


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

.primary-button {

    position: relative;

    display: inline-flex;

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

    min-height: 56px;

    margin-top: 36px;

    padding:
        0 32px;

    background:
        var(--red);

    color: var(--white);

    border:
        1px solid
        var(--red);

    border-radius: 5px;

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    overflow: hidden;

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

.primary-button:hover {

    background:
        var(--red-light);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(198, 40, 61, 0.30);
}

/* =========================================================
   SOBRE LA BANDA
========================================================= */

.about {

    position: relative;

    background:
        var(--black-soft);
}


/* línea lateral decorativa */

.about::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            var(--green),
            transparent 70%
        );
}


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

.about-grid {

    max-width:
        var(--max-width);

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 65px;

    align-items: center;
}


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

.about-image {

    position: relative;

    overflow: hidden;

    min-height: 520px;

    border-radius: 8px;

    border:
        1px solid
        rgba(19, 138, 85, 0.35);

    background:
        #101513;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.35);
}

.about-image::after {

    content: "";

    position: absolute;

    inset: 0;

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

    pointer-events: none;
}

.about-image img {

    width: 100%;
    height: 100%;

    min-height: 520px;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.about-image:hover img {

    transform:
        scale(1.04);
}


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

.about-content {

    max-width: 600px;
}

.gold-label,
.green-label {

    color:
        var(--green-light);

    font-size: 0.72rem;

    font-weight: bold;

    letter-spacing: 3px;
}

.about-content h3 {

    margin:
        12px
        0
        22px;

    color:
        var(--white);

    font-size:
        clamp(2rem, 4vw, 3rem);

    line-height: 1.1;
}

.about-content h3 strong {

    color:
        var(--green-light);
}

.about-content p {

    margin-bottom: 18px;

    color:
        #B7C0BA;
}

.about-content p strong {

    color:
        var(--white);
}


/* =========================================================
   DETALLES
========================================================= */

.about-details {

    margin-top: 30px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.detail-box {

    position: relative;

    padding: 18px;

    background:
        var(--card);

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

    border-left:
        3px solid
        var(--green);

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

.detail-box:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(19, 138, 85, 0.35);
}

.detail-box span {

    display: block;

    margin-bottom: 5px;

    color:
        var(--green-light);

    font-size: 0.68rem;

    font-weight: bold;

    letter-spacing: 1.5px;
}

.detail-box strong {

    color:
        var(--white);

    font-size:
        0.92rem;
}


/* =========================================================
   VIDEOS
========================================================= */

.videos {

    background:
        var(--black);
}

.video-grid {

    max-width:
        var(--max-width);

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.video-card {

    overflow: hidden;

    background:
        var(--card);

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

    border-radius: 8px;

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

.video-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(19, 138, 85, 0.45);

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


/* =========================================================
   VIDEO
========================================================= */

.video-container {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background:
        #000;
}

.video-container iframe {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.video-container video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background: #000;
}


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

.video-info {

    padding:
        17px 18px;
}

.video-info h3 {

    color:
        var(--white);

    font-size:
        0.95rem;
}


/* =========================================================
   YOUTUBE
========================================================= */

.youtube-button {

    display: inline-flex;

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

    margin-top: 12px;

    padding:
        9px 15px;

    background:
        #FF0000;

    color:
        #FFFFFF;

    border-radius:
        5px;

    font-size:
        0.75rem;

    font-weight:
        bold;

    transition:
        0.3s ease;
}

.youtube-button:hover {

    background:
        #CC0000;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(255, 0, 0, 0.20);
}


/* =========================================================
   COTIZACIÓN
========================================================= */

.quote-section {

    position: relative;

    background:
        linear-gradient(
            180deg,
            #080A09,
            #0D1210
        );
}


/* decoración */

.quote-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--white),
            var(--red)
        );
}


/* =========================================================
   TARJETA COTIZACIÓN
========================================================= */

.quote-card {

    width: 100%;

    max-width:
        820px;

    margin:
        auto;

    padding:
        clamp(25px, 5vw, 50px);

    background:
        rgba(21, 28, 24, 0.97);

    border:
        1px solid
        rgba(19, 138, 85, 0.30);

    border-radius:
        12px;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.45);

    box-sizing:
        border-box;

    overflow:
        hidden;
}


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

.quote-card form {

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing:
        border-box;
}

.form-group {

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin-bottom: 24px;

    box-sizing:
        border-box;
}

.form-group label {

    display: block;

    margin-bottom: 9px;

    color:
        var(--white);

    font-size:
        0.88rem;

    font-weight:
        bold;
}

.form-group label span {

    color:
        var(--red-light);
}


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

.form-control {

    display: block;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    min-height: 55px;

    padding:
        0 17px;

    background:
        #0A0E0C;

    color:
        var(--white);

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

    border-radius:
        7px;

    outline: none;

    font-size:
        1rem;

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

    box-sizing:
        border-box;
}

.form-control::placeholder {

    color:
        #707B74;
}

.form-control:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(19, 138, 85, 0.12);
}

select.form-control {
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 50px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E8E5DD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
        right 18px center;

    background-size: 17px 17px;
}


/* =========================================================
   SELECT
========================================================= */

select.form-control {

    cursor:
        pointer;
}

select.form-control option {

    background:
        #111713;

    color:
        var(--white);
}


/* =========================================================
   TEXTAREA
========================================================= */

textarea.form-control {

    min-height:
        125px;

    padding:
        15px 17px;

    resize:
        vertical;

    line-height:
        1.5;
}

.textarea-counter {

    margin-top:
        5px;

    color:
        #68736D;

    text-align:
        right;

    font-size:
        0.7rem;
}


/* =========================================================
   FECHA
========================================================= */

/* =========================================================
   CAMPO DE FECHA - AJUSTE FINAL
========================================================= */

.date-picker {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 55px;

    display: flex;
    align-items: center;

    padding: 0 17px;

    background: #101314;

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

    border-radius: 7px;

    box-sizing: border-box;

    overflow: hidden;

    cursor: pointer;
}

.date-display {
    display: block;

    width: 100%;

    color: #777A78;

    font-size: 1rem;

    line-height: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    pointer-events: none;
}

.date-display.has-date {
    color: var(--white);
}


/* El input queda invisible y NO interfiere con el clic */

.date-picker input[type="date"] {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    opacity: 0.01;

    cursor: pointer;

    border: 0;
    outline: none;

    background: transparent;

    box-sizing: border-box;

    z-index: 10;

    -webkit-appearance: none;
}


/* Estado cuando el usuario entra al campo */

.date-picker:focus-within {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(197, 164, 90, 0.09);
}

.date-picker.error {
    border-color: var(--danger);
}

.date-display {

    display:
        block;

    width:
        100%;

    color:
        #707B74;

    font-size:
        1rem;

    line-height:
        1;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    pointer-events:
        none;
}

.date-display.has-date {

    color:
        var(--white);
}

.date-picker:focus-within {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(19, 138, 85, 0.12);
}

.date-picker.error {

    border-color:
        var(--danger);
}


/* =========================================================
   FILAS
========================================================= */

.form-row {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px;

    box-sizing:
        border-box;
}

.form-row > .form-group {

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.field-description {

    display:
        block;

    margin-top:
        7px;

    color:
        #707B74;

    font-size:
        0.72rem;

    line-height:
        1.4;
}


/* =========================================================
   DURACIÓN
========================================================= */

.duration-box {

    width:
        100%;

    margin:
        -5px
        0
        25px;

    padding:
        15px 17px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    background:
        rgba(19, 138, 85, 0.07);

    border:
        1px solid
        rgba(19, 138, 85, 0.20);

    border-radius:
        8px;

    box-sizing:
        border-box;

    transition:
        0.3s ease;
}

.duration-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(19, 138, 85, 0.13);

    border-radius:
        50%;

    font-size:
        18px;
}

.duration-box > div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}

.duration-label {

    color:
        var(--green-light);

    font-size:
        0.67rem;

    font-weight:
        bold;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}

.duration-box strong {

    margin-top:
        2px;

    color:
        #D8E0DB;

    font-size:
        0.9rem;

    font-weight:
        normal;
}

.duration-box.active {

    background:
        rgba(19, 138, 85, 0.11);

    border-color:
        rgba(19, 138, 85, 0.35);
}


/* =========================================================
   GOOGLE MAPS
========================================================= */

.maps-preview {

    width:
        100%;

    margin:
        -7px
        0
        25px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    background:
        #101613;

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

    border-radius:
        8px;

    box-sizing:
        border-box;

    transition:
        0.3s ease;
}

.maps-preview-icon {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(19, 138, 85, 0.11);

    border-radius:
        50%;

    font-size:
        18px;
}

.maps-preview-content {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;
}

.maps-preview-content strong {

    color:
        var(--white);

    font-size:
        0.82rem;
}

.maps-preview-content span {

    margin-top:
        2px;

    color:
        #707B74;

    font-size:
        0.7rem;

    line-height:
        1.4;
}

.maps-button {

    flex:
        0 0 auto;

    padding:
        8px 12px;

    background:
        rgba(19, 138, 85, 0.10);

    color:
        var(--green-light);

    border:
        1px solid
        rgba(19, 138, 85, 0.25);

    border-radius:
        5px;

    font-size:
        0.7rem;

    font-weight:
        bold;

    transition:
        0.3s ease;

    pointer-events:
        none;

    opacity:
        0.45;
}

.maps-button.active {

    pointer-events:
        auto;

    opacity:
        1;
}

.maps-button:hover {

    background:
        var(--green);

    color:
        var(--white);
}


/* =========================================================
   ERRORES
========================================================= */

.error-message {

    display:
        block;

    min-height:
        18px;

    margin-top:
        5px;

    color:
        var(--danger);

    font-size:
        0.75rem;

    line-height:
        1.4;
}

.form-control.error {

    border-color:
        var(--danger);
}


/* =========================================================
   AVISO
========================================================= */

.quote-disclaimer {

    width:
        100%;

    margin:
        5px
        0
        22px;

    padding:
        14px 16px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

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

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

    border-radius:
        7px;

    box-sizing:
        border-box;
}

.quote-disclaimer-icon {

    width:
        21px;

    height:
        21px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(19, 138, 85, 0.45);

    border-radius:
        50%;

    color:
        var(--green-light);

    font-size:
        0.7rem;

    font-weight:
        bold;
}

.quote-disclaimer p {

    color:
        #78837D;

    font-size:
        0.7rem;

    line-height:
        1.5;
}


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

.whatsapp-button {

    width:
        100%;

    min-height:
        62px;

    padding:
        10px 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    background:
        var(--whatsapp);

    color:
        white;

    border:
        none;

    border-radius:
        50px;

    cursor:
        pointer;

    font-size:
        clamp(0.9rem, 2vw, 1.05rem);

    font-weight:
        bold;

    transition:
        0.3s ease;

    box-sizing:
        border-box;
}

.whatsapp-button svg {

    flex:
        0 0 auto;

    width:
        27px;

    height:
        27px;

    fill:
        white;
}

.whatsapp-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(37, 211, 102, 0.20);
}

.whatsapp-button:active {

    transform:
        translateY(0);
}

.form-note {

    margin-top:
        15px;

    color:
        #707B74;

    text-align:
        center;

    font-size:
        0.75rem;

    line-height:
        1.5;
}


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

.social-section {

    position:
        relative;

    background:
        #0A0D0B;
}

.social-section::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--green),
            transparent
        );
}

.social-grid {

    max-width:
        900px;

    margin:
        auto;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}

.social-link {

    width:
        90px;

    min-height:
        90px;

    padding:
        10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        #131916;

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

    border-radius:
        10px;

    transition:
        0.3s ease;
}

.social-link svg {

    width:
        28px;

    height:
        28px;

    fill:
        var(--white);
}

.social-link span {

    color:
        #9DA8A1;

    font-size:
        0.68rem;

    text-align:
        center;
}

.social-link:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--green);

    background:
        #17221C;

    box-shadow:
        0 15px 30px
        rgba(0, 0, 0, 0.35);
}

.social-link:hover span {

    color:
        var(--green-light);
}


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

footer {

    position:
        relative;

    padding:
        30px 20px;

    background:
        #050706;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    color:
        #707B74;

    text-align:
        center;

    font-size:
        0.78rem;
}

footer strong {

    color:
        var(--green-light);
}


/* =========================================================
   BOTÓN VOLVER ARRIBA
========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        900;

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(19, 138, 85, 0.40);

    border-radius:
        50%;

    background:
        rgba(13, 18, 16, 0.96);

    color:
        var(--green-light);

    font-size:
        25px;

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(20px);

    transition:
        0.3s ease;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.4);
}

.back-to-top.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}

.back-to-top:hover {

    background:
        var(--green);

    color:
        var(--white);

    transform:
        translateY(-4px);

    border-color:
        var(--green);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .navbar {

        padding:
            0 4%;
    }

    .nav-menu {

        gap:
            20px;
    }

    .nav-menu a {

        font-size:
            0.8rem;
    }

    .section {

        padding:
            90px 5%;
    }

    .about-grid {

        gap:
            40px;
    }

    .about-image,
    .about-image img {

        min-height:
            450px;
    }

    .video-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    html {

        scroll-padding-top:
            70px;
    }

    .navbar {

        height:
            70px;

        padding:
            0 5%;
    }

    .logo {

        font-size:
            0.95rem;

        letter-spacing:
            1.5px;
    }

    .menu-toggle {

        display:
            flex;
    }

    .nav-menu {

        position:
            absolute;

        top:
            70px;

        left:
            0;

        width:
            100%;

        padding:
            25px 20px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        background:
            rgba(7, 9, 9, 0.98);

        border-bottom:
            1px solid
            rgba(19, 138, 85, 0.25);
    }

    .nav-menu.active {

        display:
            flex;
    }

    .nav-menu a {

        padding:
            15px 5px;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.06);

        font-size:
            0.9rem;
    }

    .nav-menu a::after {

        display:
            none;
    }

    .nav-menu a[href*="cotiza"] {

        margin-top:
            12px;

        text-align:
            center;

        border:
            none;
    }

    .menu-toggle.active span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {

        opacity:
            0;
    }

    .menu-toggle.active span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* -----------------------------------------------
       HERO MOBILE
    ------------------------------------------------ */

    .hero {

        min-height:
            100svh;

        padding:
            100px 5% 70px;
    }

    .hero-subtitle {

        font-size:
            0.62rem;

        letter-spacing:
            3px;
    }

    .hero h1 {

        font-size:
            clamp(3rem, 15vw, 5rem);

        letter-spacing:
            2px;
    }

    .hero h2 {

        margin-top:
            15px;

        font-size:
            1.5rem;
    }

    .hero-description {

        font-size:
            0.95rem;

        line-height:
            1.6;
    }

    .primary-button {

        min-height:
            54px;

        padding:
            0 25px;
    }


    /* -----------------------------------------------
       SECCIONES
    ------------------------------------------------ */

    .section {

        padding:
            80px 5%;
    }

    .section-heading {

        margin-bottom:
            45px;
    }

    .section-heading > span {

        font-size:
            0.65rem;

        letter-spacing:
            3px;
    }


    /* -----------------------------------------------
       ABOUT
    ------------------------------------------------ */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .about-image,
    .about-image img {

        min-height:
            350px;
    }

    .about-content {

        max-width:
            none;
    }


    /* -----------------------------------------------
       VIDEOS
    ------------------------------------------------ */

    .video-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    /* -----------------------------------------------
       FORMULARIO
    ------------------------------------------------ */

    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .quote-card {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        padding:
            25px 16px;

        overflow:
            hidden;
    }

    .quote-card form {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }

    .form-group {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }

    .date-picker {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        height:
            55px;

        box-sizing:
            border-box;

        overflow:
            hidden;
    }

    .date-picker input[type="date"] {

        width:
            100% !important;

        height:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /* -----------------------------------------------
       DURACIÓN
    ------------------------------------------------ */

    .duration-box {

        margin-top:
            -5px;

        padding:
            13px 14px;
    }


    /* -----------------------------------------------
       MAPS
    ------------------------------------------------ */

    .maps-preview {

        align-items:
            flex-start;

        padding:
            13px;
    }

    .maps-button {

        padding:
            7px 9px;

        font-size:
            0.65rem;
    }


    /* -----------------------------------------------
       AVISO
    ------------------------------------------------ */

    .quote-disclaimer {

        padding:
            13px;
    }


    /* -----------------------------------------------
       REDES
    ------------------------------------------------ */

    .social-grid {

        gap:
            12px;
    }

    .social-link {

        width:
            82px;

        min-height:
            82px;
    }


    /* -----------------------------------------------
       VOLVER ARRIBA
    ------------------------------------------------ */

    .back-to-top {

        right:
            18px;

        bottom:
            18px;

        width:
            48px;

        height:
            48px;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 400px) {

    .logo {

        max-width:
            220px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }

    .hero h1 {

        font-size:
            2.7rem;
    }

    .hero h2 {

        font-size:
            1.25rem;
    }

    .primary-button {

        width:
            100%;
    }

    .about-details {

        grid-template-columns:
            1fr;
    }

    .quote-card {

        padding:
            22px 16px;
    }

    .whatsapp-button {

        min-height:
            65px;

        padding:
            10px 18px;
    }

    .whatsapp-button span {

        text-align:
            center;
    }

    .social-link {

        width:
            74px;

        min-height:
            74px;
    }

    .maps-preview {

        flex-wrap:
            wrap;
    }

    .maps-preview-content {

        flex:
            1 1 calc(100% - 55px);
    }

    .maps-button {

        width:
            100%;

        text-align:
            center;
    }
}


/* =========================================================
   IPAD / TABLET HORIZONTAL
========================================================= */

@media
    (min-width: 769px)
    and (max-width: 1180px)
    and (orientation: landscape) {

    .hero h1 {

        font-size:
            5.5rem;
    }

    .about-image,
    .about-image img {

        min-height:
            400px;
    }
}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}

/* =========================================================
   AJUSTE FINAL DE DISEÑO
   BANDA CIELITO LINDO
   RESPONSIVE REAL
========================================================= */


/* =========================================================
   1. VARIABLES DE DISEÑO
========================================================= */

:root {

    --page-max-width: 1200px;

    --page-padding-desktop: 40px;
    --page-padding-tablet: 32px;
    --page-padding-mobile: 20px;

    --green: #176B45;
    --green-light: #25A66A;

    --red: #C52F48;
    --red-light: #E05268;

    --white: #F5F5F0;

    --black: #0D0F10;
    --black-soft: #151819;
    --card: #202426;

    --text: #E8E5DD;
    --muted: #A9AAA5;

    --gold: #C5A45A;
    --gold-light: #D8BC78;

    --border-soft:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   2. CONTROL GENERAL DE ANCHO
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

body {
    background: var(--black);
    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;
}


/* =========================================================
   3. TODAS LAS SECCIONES
========================================================= */

.section {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    padding-top: 110px;
    padding-bottom: 110px;

    padding-left:
        max(
            var(--page-padding-desktop),
            calc(
                (100vw - var(--page-max-width)) / 2
            )
        );

    padding-right:
        max(
            var(--page-padding-desktop),
            calc(
                (100vw - var(--page-max-width)) / 2
            )
        );

    position: relative;

    overflow: hidden;
}


/* =========================================================
   4. CONTENEDORES INTERNOS
========================================================= */

.about-grid,
.video-grid,
.section-heading {

    width: 100%;
    max-width: var(--page-max-width);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   5. HERO
========================================================= */

.hero {

    width: 100%;
    max-width: none;

    min-height: 100svh;

    margin: 0;

    padding-top: 120px;
    padding-bottom: 80px;

    padding-left:
        max(
            var(--page-padding-desktop),
            5vw
        );

    padding-right:
        max(
            var(--page-padding-desktop),
            5vw
        );

    display: flex;

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

    text-align: center;

    position: relative;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   6. CONTENIDO DEL HERO
========================================================= */

.hero-content {

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

    margin-left: auto;
    margin-right: auto;

    position: relative;

    z-index: 2;

    box-sizing: border-box;
}


/* =========================================================
   7. TÍTULO PRINCIPAL
   UNA SOLA REGLA DE FONT-SIZE
========================================================= */

.hero h1 {

    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    color: var(--white);

    font-size:
        clamp(
            2.8rem,
            8vw,
            6rem
        );

    line-height: 0.92;

    letter-spacing:
        clamp(
            1px,
            0.5vw,
            4px
        );

    font-weight: 800;

    text-transform: uppercase;

    overflow-wrap: break-word;

    word-break: normal;

    box-sizing: border-box;
}


/* =========================================================
   8. SUBTÍTULO DEL HERO
========================================================= */

.hero h2 {

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

    margin:
        18px auto 0;

    color: var(--white);

    font-size:
        clamp(
            1.4rem,
            4vw,
            2.8rem
        );

    line-height: 1.1;

    font-weight: 700;

    overflow-wrap: break-word;
}


/* =========================================================
   9. IMPORTANTE:
      NO PINTAR SOLAMENTE LA "D"
========================================================= */

.hero h2::first-letter {
    color: inherit;
}


/* =========================================================
   10. SUBTÍTULO PEQUEÑO
========================================================= */

.hero-subtitle {

    margin-bottom: 20px;

    color: var(--green-light);

    font-size:
        clamp(
            0.65rem,
            1.5vw,
            0.8rem
        );

    font-weight: 700;

    letter-spacing:
        clamp(
            3px,
            0.8vw,
            6px
        );

    text-transform: uppercase;
}


/* =========================================================
   11. DESCRIPCIÓN
========================================================= */

.hero-description {

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

    margin:
        28px auto 0;

    color: #D1CEC5;

    font-size:
        clamp(
            0.9rem,
            2vw,
            1.15rem
        );

    line-height: 1.6;

    overflow-wrap: break-word;
}


/* =========================================================
   12. BOTÓN PRINCIPAL
========================================================= */

.primary-button {

    position: relative;

    width: auto;
    max-width: 100%;

    min-height: 54px;

    margin:
        35px auto 0;

    padding:
        0 32px;

    display: inline-flex;

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

    background:
        var(--red);

    color: #FFFFFF;

    border: none;

    border-radius: 6px;

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

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

    box-sizing: border-box;
}


/* =========================================================
   13. ELIMINAR FRANJA VERDE DEL BOTÓN
========================================================= */

.primary-button::before,
.primary-button::after {

    content: none !important;

    display: none !important;
}


.primary-button:hover {

    background:
        var(--red-light);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(197, 47, 72, 0.25);
}


/* =========================================================
   14. CONÓCENOS
========================================================= */

.about {

    position: relative;

    background:
        var(--black-soft);

    overflow: hidden;
}


/* Línea decorativa mexicana,
   muy fina y discreta */

.about::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--white),
            var(--red)
        );

    opacity: 0.9;
}


/* =========================================================
   15. ENCABEZADOS
========================================================= */

.section-heading {

    box-sizing: border-box;

    text-align: center;
}


.section-heading > span {

    display: inline-block;

    color:
        var(--green-light);

    font-size:
        clamp(
            0.65rem,
            1.5vw,
            0.78rem
        );

    font-weight: 800;

    letter-spacing:
        clamp(
            3px,
            0.7vw,
            5px
        );

    text-transform: uppercase;
}


.section-heading h2 {

    width: 100%;

    margin:
        10px auto 0;

    color: var(--white);

    font-size:
        clamp(
            2rem,
            5vw,
            3.4rem
        );

    line-height: 1.08;

    overflow-wrap: break-word;
}


.section-heading p {

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

    margin:
        18px auto 0;

    color: var(--muted);

    font-size:
        clamp(
            0.9rem,
            2vw,
            1rem
        );
}


/* =========================================================
   16. GRID SOBRE LA BANDA
========================================================= */

.about-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 60px;

    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   17. IMÁGENES
========================================================= */

.about-image {

    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow: hidden;

    box-sizing: border-box;

    border-radius: 10px;

    border:
        1px solid
        rgba(23, 107, 69, 0.45);
}


.about-image img {

    width: 100%;
    max-width: 100%;

    height: 100%;

    min-height: 450px;

    object-fit: cover;

    display: block;
}


/* =========================================================
   18. CONTENIDO DE TEXTO
========================================================= */

.about-content {

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

    min-width: 0;
}


.about-content h3 {

    color: var(--white);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height: 1.1;

    overflow-wrap: break-word;
}


/* =========================================================
   19. DETALLES
========================================================= */

.about-details {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    box-sizing: border-box;
}


.detail-box {

    min-width: 0;

    padding: 18px;

    background:
        var(--card);

    border-left:
        3px solid
        var(--green);

    box-sizing: border-box;
}


/* =========================================================
   20. VIDEOS
========================================================= */

.video-grid {

    display: grid;

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

    gap: 25px;

    box-sizing: border-box;
}


.video-card {

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


.video-container {

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;
}


.video-container iframe {

    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* =========================================================
   21. COTIZACIÓN
========================================================= */

.quote-section {

    width: 100%;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #0D0F10 0%,
            #111516 100%
        );
}


.quote-card {

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

    margin:
        0 auto;

    padding:
        clamp(
            25px,
            5vw,
            50px
        );

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   22. FORMULARIOS
========================================================= */

.form-control,
.date-picker,
.form-row,
.form-group,
.maps-preview,
.duration-box,
.quote-disclaimer {

    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


.form-control {

    width: 100%;
}


.form-row {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


/* =========================================================
   23. REDES
========================================================= */

.social-grid {

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

    margin:
        0 auto;

    display: flex;

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

    flex-wrap: wrap;

    gap: 18px;

    box-sizing: border-box;
}


.social-link {

    flex:
        0 0 auto;
}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 1024px) {

    .section {

        padding-left:
            var(--page-padding-tablet);

        padding-right:
            var(--page-padding-tablet);

        padding-top: 90px;
        padding-bottom: 90px;
    }


    .hero {

        padding-left:
            var(--page-padding-tablet);

        padding-right:
            var(--page-padding-tablet);
    }


    .about-grid {

        gap: 40px;
    }


    .video-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   25. TABLET PEQUEÑA / CELULAR GRANDE
========================================================= */

@media (max-width: 768px) {

    .section {

        padding-left:
            var(--page-padding-mobile);

        padding-right:
            var(--page-padding-mobile);

        padding-top: 80px;
        padding-bottom: 80px;
    }


    .hero {

        min-height: 100svh;

        padding-top: 100px;
        padding-bottom: 70px;

        padding-left:
            var(--page-padding-mobile);

        padding-right:
            var(--page-padding-mobile);
    }


    .hero-content {

        max-width: 100%;
    }


    .hero h1 {
    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    color: var(--white);

    font-size: clamp(
        2.35rem,
        10vw,
        4.8rem
    );

    line-height: 0.94;

    letter-spacing: 1px;

    font-weight: 800;

    text-transform: uppercase;

    overflow-wrap: normal;
    word-break: normal;

    box-sizing: border-box;
}


    .hero h2 {

        font-size:
            clamp(
                1.35rem,
                6vw,
                2rem
            );
    }


    .hero-description {

        font-size:
            0.95rem;

        max-width: 580px;
    }


    .primary-button {

        min-height: 54px;

        padding:
            0 25px;
    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .about-image {

        width: 100%;
    }


    .about-image img {

        min-height: 350px;
    }


    .about-content {

        max-width: 100%;
    }


    .video-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;
    }


    .quote-card {

        width: 100%;

        padding:
            25px 18px;
    }


    .social-grid {

        gap: 12px;
    }
}


/* =========================================================
   26. CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 400px) {

    .section {

        padding-left:
            16px;

        padding-right:
            16px;

        padding-top: 70px;
        padding-bottom: 70px;
    }


    .hero {

        padding-left:
            16px;

        padding-right:
            16px;
    }


    .hero h1 {

        font-size:
            clamp(
                2.45rem,
                14vw,
                3.5rem
            );

        letter-spacing:
            0.5px;
    }


    .hero h2 {

        font-size:
            1.25rem;
    }


    .hero-description {

        font-size:
            0.9rem;
    }


    .primary-button {

        width: 100%;

        max-width: 340px;
    }


    .about-details {

        grid-template-columns: 1fr;
    }


    .quote-card {

        padding:
            22px 14px;
    }


    .whatsapp-button {

        min-height: 62px;

        padding:
            10px 16px;
    }
}

/* =========================================================
   AJUSTE FINAL RESPONSIVE DEL HERO
========================================================= */

/* COMPUTADORA */
.hero h1 {
    font-size: clamp(3.2rem, 6vw, 6rem);
    line-height: 0.92;
    letter-spacing: 2px;
}


/* TABLET */
@media (max-width: 1024px) {

    .hero {
        padding-left: 32px;
        padding-right: 32px;
    }

    .hero-content {
        width: 100%;
        max-width: 900px;
    }

    .hero h1 {
        font-size: clamp(
            3rem,
            7vw,
            5rem
        );

        line-height: 0.94;
        letter-spacing: 1.5px;
    }

    .hero h2 {
        font-size: clamp(
            1.4rem,
            4vw,
            2.4rem
        );
    }
}


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

    .hero {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        box-sizing: border-box;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }

    .hero h1 {
        width: 100%;

        font-size: clamp(
            2.35rem,
            10vw,
            4rem
        );

        line-height: 0.95;

        letter-spacing: 0.5px;

        overflow-wrap: normal;
        word-break: normal;
    }

    .hero h2 {
        width: 100%;

        font-size: clamp(
            1.25rem,
            5.5vw,
            1.9rem
        );

        line-height: 1.1;
    }

    .hero-description {
        width: 100%;
        max-width: 580px;

        font-size: 0.92rem;

        margin-left: auto;
        margin-right: auto;
    }

    .primary-button {
        max-width: 340px;

        margin-left: auto;
        margin-right: auto;
    }
}


/* CELULARES PEQUEÑOS */
@media (max-width: 400px) {

    .hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero h1 {
        font-size: clamp(
            2.15rem,
            10vw,
            3.2rem
        );

        line-height: 0.96;

        letter-spacing: 0;
    }

    .hero h2 {
        font-size: 1.25rem;
    }

    .hero-description {
        font-size: 0.88rem;
    }

    .primary-button {
        width: 100%;
        max-width: 320px;
    }
}


/* =========================================================
   CORRECCIÓN DEL "DE ISNARDO GARCÍA"
========================================================= */

.hero h2 span,
.hero h2 strong {
    color: inherit !important;
}


/* =========================================================
   CORRECCIÓN DEL BOTÓN PRINCIPAL
   SIN FRANJA VERDE
========================================================= */

.primary-button {
    background: var(--red) !important;

    color: #FFFFFF !important;

    border: none !important;

    box-shadow: none;
}

.primary-button::before,
.primary-button::after {
    content: none !important;

    display: none !important;
}

.primary-button:hover {
    background: var(--red-light) !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(197, 47, 72, 0.25);
}


/* =========================================================
   MÁRGENES LATERALES PERFECTAMENTE SIMÉTRICOS
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
}


/* =========================================================
   EVITAR QUE CUALQUIER ELEMENTO ROMPA EL ANCHO
========================================================= */

section,
header,
footer,
main,
nav,
div {
    max-width: 100%;
    box-sizing: border-box;
}


img,
iframe,
video {
    max-width: 100%;
}

/* =========================================================
   BOTÓN "COTIZA TU EVENTO" DENTRO DEL MENÚ MOBILE
========================================================= */

@media (max-width: 768px) {

    .nav-menu .primary-button {
        width: 100% !important;

        display: flex;

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

        text-align: left;

        margin: 0;

        padding: 15px 5px;

        background: transparent !important;

        color: #D5D3CC !important;

        border: none !important;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.06) !important;

        border-radius: 0;

        box-shadow: none !important;

        transform: none !important;

        font-size: 0.9rem;

        font-weight: normal;

        letter-spacing: 0;

        text-transform: none;
    }

    .nav-menu .primary-button:hover {
        background: transparent !important;

        color: var(--red) !important;

        transform: none !important;

        box-shadow: none !important;
    }

}

/* =========================================================
   FIX DEFINITIVO - COTIZA TU EVENTO EN MENÚ MOBILE
========================================================= */

@media (max-width: 768px) {

    .navbar .nav-menu > a:nth-child(4) {
        align-self: flex-start !important;

        width: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 5px !important;
        padding-right: 5px !important;

        text-align: left !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

}

/* =========================================================
   GALERÍA DE FOTOS
========================================================= */

.photo-gallery {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #0D0F10 0%,
            #111A16 50%,
            #0D0F10 100%
        );

    overflow: hidden;
}


/* Detalle decorativo tricolor */

.photo-gallery::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--green) 0%,
            var(--green) 33.33%,
            var(--white) 33.33%,
            var(--white) 66.66%,
            var(--red) 66.66%,
            var(--red) 100%
        );
}


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

.photo-grid {
    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;

    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


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

.photo-card {
    position: relative;

    display: block;

    width: 100%;

    height: 320px;

    overflow: hidden;

    background: #111415;

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

    border-radius: 10px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.28);

    cursor: pointer;

    isolation: isolate;

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


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

.photo-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s ease,
        filter 0.55s ease;
}


/* =========================================================
   CAPA OSCURA
========================================================= */

.photo-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.65) 100%
        );

    opacity: 0.65;

    pointer-events: none;

    transition:
        opacity 0.35s ease;
}


/* =========================================================
   DETALLE VERDE / ROJO
========================================================= */

.photo-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--green) 0%,
            var(--white) 50%,
            var(--red) 100%
        );

    z-index: 2;

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        transform 0.35s ease;
}


/* =========================================================
   HOVER
========================================================= */

.photo-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(197, 164, 90, 0.55);

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

.photo-card:hover img {
    transform: scale(1.06);

    filter:
        brightness(1.08);
}

.photo-card:hover::after {
    opacity: 0.4;
}

.photo-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   EFECTO AL HACER CLICK
========================================================= */

.photo-card:active {
    transform:
        translateY(-2px)
        scale(0.99);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .photo-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .photo-card {
        height: 300px;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    .photo-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .photo-card {
        height: 230px;

        border-radius: 8px;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

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

        gap: 14px;
    }

    .photo-card {
        height: 270px;
    }
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

.photo-card:focus-visible {
    outline:
        2px solid
        var(--gold);

    outline-offset: 4px;
}

/* =========================================================
   VISOR DE GALERÍA / LIGHTBOX
========================================================= */

.photo-lightbox {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

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

    padding: 70px 80px;

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

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 9999;

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


/* =========================================================
   VISOR ABIERTO
========================================================= */

.photo-lightbox.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   CONTENEDOR DE IMAGEN
========================================================= */

.lightbox-content {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

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

    min-width: 0;
    min-height: 0;
}

.lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 6px;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.65);

    user-select: none;

    -webkit-user-drag: none;

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


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

.lightbox-close {
    position: absolute;

    top: 20px;
    right: 25px;

    width: 52px;
    height: 52px;

    display: flex;

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

    padding: 0;

    background:
        rgba(20, 23, 24, 0.9);

    color: var(--white);

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

    border-radius: 50%;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

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

.lightbox-close:hover {
    background: var(--red);

    color: #FFFFFF;

    border-color: var(--red);

    transform: rotate(90deg);
}


/* =========================================================
   BOTONES ANTERIOR / SIGUIENTE
========================================================= */

.lightbox-prev,
.lightbox-next {
    position: absolute;

    top: 50%;

    width: 52px;
    height: 52px;

    display: flex;

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

    padding: 0;

    background:
        rgba(20, 23, 24, 0.88);

    color: var(--white);

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

    border-radius: 50%;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transform:
        translateY(-50%);

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

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--green);

    color: #FFFFFF;

    border-color: var(--green);

    transform:
        translateY(-50%)
        scale(1.08);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .photo-lightbox {
        padding:
            65px 45px;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;

        width: 46px;
        height: 46px;

        font-size: 30px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 42px;
        height: 42px;

        font-size: 32px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    .lightbox-content img {
        max-width: 100%;
        max-height: 100%;

        border-radius: 4px;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 400px) {

    .photo-lightbox {
        padding:
            60px 38px;
    }

    .lightbox-close {
        width: 42px;
        height: 42px;

        font-size: 28px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 36px;
        height: 36px;

        font-size: 28px;
    }

    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }
}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .photo-lightbox,
    .lightbox-content img,
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {

        transition: none !important;
    }
}

/* =========================================================
   MENÚ MÓVIL — TODOS LOS ELEMENTOS CENTRADOS
========================================================= */

@media (max-width: 768px) {

    .nav-menu {
        align-items: stretch;
    }

    .nav-menu a {
        width: 100%;
        text-align: center !important;
    }

    .nav-menu a[href="#cotizacion"] {
        text-align: center !important;
        justify-content: center;
    }
}

/* =========================================================
   MENÚ MÓVIL — TODOS LOS ELEMENTOS CENTRADOS
========================================================= */

@media (max-width: 768px) {

    .nav-menu {
        align-items: center !important;
    }

    .nav-menu > * {
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .nav-menu > a,
    .nav-menu > button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .nav-menu a {
        text-align: center !important;
    }

}

/* =========================================================
   CORRECCIÓN DEFINITIVA — VIDEOS EN MENÚ MÓVIL
========================================================= */

@media (max-width: 768px) {

    .nav-menu > :nth-child(4) {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

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

        text-align: center !important;
    }

    .nav-menu > :nth-child(4) a,
    .nav-menu > :nth-child(4) button {
        width: 100% !important;
        margin: 0 !important;

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

        text-align: center !important;
    }

}

/* =========================================================
   CORRECCIÓN FINAL DEL MENÚ MÓVIL
========================================================= */

@media (max-width: 768px) {

    #navMenu {
        align-items: center !important;
    }

    #navMenu > a {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;

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

        text-align: center !important;

        align-self: center !important;
    }

    /* Videos específicamente */
    #navMenu > a[href="#videos"] {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;

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

        text-align: center !important;
        align-self: center !important;
    }

}