:root {
    /* Paleta de colores premium */
    --primary-green: #9bb61b;
    --primary-green-hover: #7e9614;
    --primary-green-light: #a8c832;
    --primary-green-dark: #6b7f13;
    --primary-green-alpha: rgba(155, 182, 27, 0.1);
    --background-main: white;
    --background-card: #ffffff;
    --background-secondary: #f8f9f6;
    --background-accent: #fafbf8;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6b6b6b;
    --text-light: #8a8a8a;
    --border-light: #e8eae1;
    --border-medium: #d8dbd0;
    --border-focus: var(--primary-green);
    /* Sistema de espaciados perfecto (múltiplos de 8px) */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    /* Espaciados específicos del formulario */
    --form-section-gap: 48px;
    --panel-padding: 40px;
    --input-spacing: 24px;
    --button-spacing: 32px;
    /* Radios modernos */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;
    /* Sombras premium */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
    --shadow-focus: 0 0 0 4px var(--primary-green-alpha);
    --shadow-button: 0 4px 14px rgba(155, 182, 27, 0.25);
    /* Transiciones suaves */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* -------------------------------
   RESET 
--------------------------------*/
* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(180deg, var(--background-main) 0%, #e8ead5 100%);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ----------------------------------
    Ajuste carolina 20/10
----------------------------------*/
.MensajeImportante {
    color: red !important;
}
/* -------------------------------
   CONTENEDOR PRINCIPAL 
--------------------------------*/
.Content-Reserva {
    background: var(--background-main);
    padding: var(--space-2xl) var(--space-lg);
    max-width: 1200px;
    margin: var(--space-xl) auto;
    border-radius: var(--radius-xl);
    position: relative;
    animation: slideInUp 0.8s var(--transition-normal);
    min-height: 100vh;
}

    .Content-Reserva::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--primary-green), var(--primary-green-light));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 2px 8px rgba(155, 182, 27, 0.3);
    }

    /* -------------------------------
   TIPOGRAFÍA 
--------------------------------*/
    .Content-Reserva h1,
    .Content-Reserva .h1 {
        font-family: "Crete Round", serif;
        font-size: clamp(2rem, 5vw, 2.8rem);
        color: var(--text-primary);
        font-weight: 400;
        text-align: center;
        margin-bottom: var(--space-xl);
        position: relative;
        animation: fadeInDown 1s var(--transition-normal) 0.3s both;
        letter-spacing: -0.02em;
    }

        .Content-Reserva h1::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-green), var(--primary-green-light));
            border-radius: var(--radius-full);
            animation: scaleIn 0.6s var(--transition-bounce) 1s both;
        }

/* -------------------------------
   SECCIONES CON ESPACIADO 
--------------------------------*/
.form-section {
    margin-bottom: var(--form-section-gap);
    animation: fadeInUp 0.6s var(--transition-normal);
    animation-fill-mode: both;
}

    .form-section:nth-child(1) {
        animation-delay: 0.1s;
    }

    .form-section:nth-child(2) {
        animation-delay: 0.2s;
    }

    .form-section:nth-child(3) {
        animation-delay: 0.3s;
    }

    .form-section:nth-child(4) {
        animation-delay: 0.4s;
    }

.Content-Reserva h5,
.Content-Reserva .h5 {
    font-family: "Inter", sans-serif;
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin: var(--space-xl) 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-light);
    position: relative;
    letter-spacing: -0.01em;
}

    .Content-Reserva h5::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 50px;
        height: 2px;
        background: var(--primary-green);
        border-radius: var(--radius-full);
        transition: width var(--transition-normal);
    }

    .Content-Reserva h5:hover::before {
        width: 100px;
    }

/* -------------------------------
   PANELES 
--------------------------------*/
.panel,
.GeneralPnlContent {
    background: var(--background-card);
    padding: var(--panel-padding);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

    .panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--primary-green-alpha), transparent);
        transition: all var(--transition-normal);
    }

    .panel:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        border-color: var(--primary-green-alpha);
    }

        .panel:hover::before {
            background: linear-gradient(90deg, var(--primary-green), var(--primary-green-light), var(--primary-green));
        }

/* -------------------------------
   FORMULARIOS  
--------------------------------*/
.form-group {
    margin-bottom: var(--input-spacing);
    position: relative;
}

.form-label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--background-card);
    font-size: 1rem;
    color: var(--text-primary);
    transition: all var(--transition-normal);
    font-family: inherit;
}

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--primary-green);
        box-shadow: var(--shadow-focus);
        outline: none;
        background: var(--background-accent);
        transform: scale(1.01);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-light);
        opacity: 0.8;
        font-style: italic;
    }

/* -------------------------------
   BOTÓN DE ENVIAR PROMINENTE
--------------------------------*/
.submit-button-container {
    text-align: center;
    position: relative;
}

.BtnPrimarioRes,
.BtnPrimarioResSolo,
.btn-submit {
    /* Botón grande y redondeado */
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: var(--shadow-button);
    transform: translateY(0);
    min-width: 100px;
    max-width: 120px;
    min-height: 56px;
}

    .BtnPrimarioRes::before,
    .BtnPrimarioResSolo::before,
    .btn-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.6s ease;
    }

    .BtnPrimarioRes:hover,
    .BtnPrimarioResSolo:hover,
    .btn-submit:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 8px 25px rgba(155, 182, 27, 0.4);
        background: linear-gradient(135deg, var(--primary-green-hover), var(--primary-green));
    }

        .BtnPrimarioRes:hover::before,
        .BtnPrimarioResSolo:hover::before,
        .btn-submit:hover::before {
            left: 100%;
        }

    .BtnPrimarioRes:active,
    .BtnPrimarioResSolo:active,
    .btn-submit:active {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 4px 15px rgba(155, 182, 27, 0.3);
    }

/* Indicador de carga en el botón */
.btn-loading {
    position: relative;
    color: transparent;
}

    .btn-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

/* -------------------------------
   BOTONES SECUNDARIOS
--------------------------------*/
.BtnSecundarioRes {
    padding: 12px 32px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-xl);
    background: var(--background-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
    margin: 0 var(--space-sm);
}

    .BtnSecundarioRes:hover {
        border-color: var(--primary-green);
        color: var(--primary-green);
        background: var(--primary-green-alpha);
        transform: translateY(-2px);
    }

/* -------------------------------
   MENSAJES MEJORADOS
--------------------------------*/
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    border-left: 4px solid;
    position: relative;
    animation: slideInRight 0.5s var(--transition-normal);
    backdrop-filter: blur(10px);
}

.alert-success {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
    border-left-color: #27ae60;
    color: #27ae60;
}

.alert-error {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
    border-left-color: #e74c3c;
    color: #e74c3c;
}

/* -------------------------------
   TABLAS 
--------------------------------*/
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin: var(--space-lg) 0;
}

th,
td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

th {
    background: linear-gradient(135deg, var(--background-secondary), var(--background-accent));
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

tr:hover {
    background: var(--background-accent);
    transform: scale(1.01);
    transition: all var(--transition-fast);
}

/* -------------------------------
   ANIMACIONES 
--------------------------------*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* -------------------------------
   RESPONSIVE 
--------------------------------*/
@media (max-width: 768px) {
    .Content-Reserva {
        padding: var(--space-xl) var(--space-md);
        margin: var(--space-md) auto;
    }

    .panel {
        padding: var(--space-lg);
    }

    .BtnPrimarioRes,
    .BtnPrimarioResSolo,
    .btn-submit {
        width: 100%;
        padding: 18px 40px;
        font-size: 1rem;
    }

    :root {
        --form-section-gap: 32px;
        --panel-padding: 24px;
    }
}

@media (max-width: 480px) {
    .Content-Reserva {
        padding: var(--space-md) var(--space-sm);
    }

    input, select, textarea {
        font-size: 16px; /* Previene zoom en iOS */
        padding: 14px 16px;
    }

    .BtnPrimarioRes,
    .BtnPrimarioResSolo,
    .btn-submit {
        padding: 16px 32px;
        font-size: 0.95rem;
    }
}

/* -------------------------------
   EFECTOS ESPECIALES
--------------------------------*/
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}
/* -------------------------------
   POPUP Notificar problema
--------------------------------*/

.Pop-upSV {
    background: var(--background-main, #fff);
    position: fixed;
    z-index: 100;
    max-width: 420px;
    width: 92vw;
    left: 50%;
    top: 12vh;
    transform: translateX(-50%);
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.15));
    border: 1.5px solid var(--border-light, #e8eae1);
    padding: var(--space-xl, 48px) var(--space-lg, 32px) var(--space-lg, 32px) var(--space-lg, 32px);
    animation: slideInUp 0.7s var(--transition-normal, 0.3s cubic-bezier(0.4,0,0.2,1));
    opacity: 1;
}

    .Pop-upSV > div:first-child {
        width: 100%;
        text-align: right;
        margin-bottom: var(--space-lg, 32px);
    }

.BtnClose {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--primary-green, #9bb61b);
    padding: 2px 8px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: background 0.2s;
}

    .BtnClose:hover, .BtnClose:focus-visible {
        background: var(--primary-green-alpha, rgba(155,182,27,0.1));
        color: var(--primary-green-dark, #6b7f13);
        outline: none;
    }

/* Titular  */
.Pop-upSV h2 {
    font-family: "Crete Round", serif;
    color: var(--text-primary, #1a1a1a);
    font-weight: 400;
    font-size: 2rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--space-xl, 48px);
    letter-spacing: -0.01em;
    position: relative;
}

    .Pop-upSV h2::after {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-green, #9bb61b), var(--primary-green-light, #a8c832));
        border-radius: var(--radius-full, 50px);
    }

/* Paneles generales */
.PnlsGenerales {
    margin-bottom: var(--input-spacing, 24px);
}

body .PnlsGenerales .PnlInformativo {
        color: red !important;
        padding: 20px;
        text-align: center;
        margin: 10px auto;
        border: 1px solid;
    }

/* Etiquetas */
.TextoDatos {
    display: block;
    font-weight: 500;
    color: var(--text-secondary, #4a4a4a);
    margin-bottom: var(--space-xs, 8px);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

/* Inputs y textarea refinados */
.TextBoxRe {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--border-light, #e8eae1);
    border-radius: var(--radius-md, 12px);
    background: var(--background-card, #fff);
    color: var(--text-primary, #1a1a1a);
    font-size: 1rem;
    font-family: inherit;
    transition: all var(--transition-normal, 0.3s cubic-bezier(0.4,0,0.2,1));
    margin-bottom: 2px;
}

    .TextBoxRe:focus {
        border-color: var(--primary-green, #9bb61b);
        box-shadow: var(--shadow-focus, 0 0 0 4px rgba(155,182,27,0.1));
        outline: none;
        background: var(--background-accent, #fafbf8);
        transform: scale(1.01);
    }

    .TextBoxRe::placeholder {
        color: var(--text-light, #8a8a8a);
        opacity: 0.85;
        font-style: italic;
    }

/* Botón de envío */
.BtnPrimarioResSolo {
    padding: 16px 40px;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-xl, 20px);
    background: linear-gradient(135deg, var(--primary-green, #9bb61b), var(--primary-green-light, #a8c832));
    color: #fff;
    cursor: pointer;
    transition: all var(--transition-normal, 0.3s cubic-bezier(0.4,0,0.2,1));
    box-shadow: var(--shadow-button, 0 4px 14px rgba(155,182,27,0.25));
    text-transform: uppercase;
    min-width: 160px;
    margin-bottom: 2rem;
    margin-top: 2rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .BtnPrimarioResSolo:hover {
        background: linear-gradient(135deg, var(--primary-green-hover, #7e9614), var(--primary-green, #9bb61b));
        transform: scale(1.04);
        box-shadow: 0 10px 28px rgba(155,182,27,0.23);
    }

/* Responsive para móvil */
@media (max-width: 520px) {
    .Pop-upSV {
        padding: var(--space-md, 24px) var(--space-xs, 8px);
        min-width: 200px;
        max-width: 98vw;
        left: 1vw;
        right: 1vw;
    }

    .BtnPrimarioResSolo {
        width: 100%;
        padding: 14px 8px;
        font-size: 1rem;
    }
}

/* Animación mantenida */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(30) scale(1);
    }
}

/* -------------------------------
   ESTADO FOCUS 
--------------------------------*/
*:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* -------------------------------
   BANDERAS
--------------------------------*/

.flagsIdiomas {
    background: var(--background-card, #fff);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
    padding: var(--space-md, 24px) var(--space-lg, 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-lg, 32px);
    width: auto;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.listFlags {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-md, 24px); /* Espacio horizontal armónico */
    margin: 0;
    padding: 0;
}

    .listFlags li {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .listFlags li:first-child {
            margin-right: var(--space-sm, 16px);
            font-weight: 600;
            color: var(--text-secondary, #4a4a4a);
            font-family: "Inter", sans-serif;
            font-size: 1.05rem;
            letter-spacing: 0.01em;
        }

    .listFlags img,
    .listFlags input[type=image] {
        width: 32px;
        height: 24px;
        border-radius: var(--radius-sm, 8px);
        border: 2px solid var(--border-light, #e8eae1);
        opacity: 0.93;
        transition: border-color 0.2s, transform 0.15s, opacity 0.25s;
        background: var(--background-secondary, #f8f9f6);
        object-fit: cover;
        cursor: pointer;
        box-shadow: 0 1px 4px 0 rgba(155,182,27,0.06);
    }

        .listFlags img:hover,
        .listFlags input[type=image]:hover,
        .listFlags img:focus,
        .listFlags input[type=image]:focus-visible {
            border-color: var(--primary-green, #9bb61b);
            transform: scale(1.06);
            opacity: 1;
            outline: none;
        }

/* Responsive: apilar en móvil */
@media (max-width: 450px) {
    .flagsIdiomas {
        padding: var(--space-sm, 16px);
        max-width: 97vw;
    }

    .listFlags {
        gap: var(--space-xs, 8px);
    }

        .listFlags img,
        .listFlags input[type=image] {
            width: 26px;
            height: 20px;
        }
}

/* -------------------------------
   FOOTER
--------------------------------*/
body .Footer_Bottombg {
    background: #254634 !important;
    padding-bottom: 10px;
    padding-top: 30px;
    border-top: 5px solid #93C90E;
}

    body .Footer_Bottombg a {
        text-decoration: none !important;
        color: #ccc !important;
    }

    body .Footer_Bottombg .Footer_Top {
        display: flex;
        padding: 20px;
        border-bottom: 1px solid #d9d9d2;
        margin-bottom: 10px;
    }

    body .Footer_Bottombg .copyright_style {
        float: left;
        padding: 10px 0 0;
        color: #ccc !important;
        font-size: 13px;
    }

    body .Footer_Bottombg div.titular {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        color: #fff;
        margin-top: 0;
        line-height: 24px;
        margin-bottom: 10px;
        padding: 10px 0 0 0;
    }

    body .Footer_Bottombg p {
        color: #eee !important;
        font-weight: 700 !important;
        margin-bottom: 5px !important;
        text-align: left;
    }

    body .Footer_Bottombg .isos {
        color: #ccc !important;
        font-size: 14px;
        margin-top: 10px;
    }

        body .Footer_Bottombg .isos p {
            float: right;
        }

    body .Footer_Bottombg h3.telefono-footer {
        font-family: inherit !important;
        font-size: 25px !important;
    }