@font-face{
    font-family:"Catamaran";
    src:url("../fonts/Catamaran-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Catamaran";
    src:url("../fonts/Catamaran-Medium.woff2") format("woff2");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Catamaran";
    src:url("../fonts/Catamaran-SemiBold.woff2") format("woff2");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Catamaran";
    src:url("../fonts/Catamaran-Bold.woff2") format("woff2");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Catamaran";
    src:url("../fonts/Catamaran-ExtraBold.woff2") format("woff2");
    font-weight:800;
    font-style:normal;
    font-display:swap;
}

:root{
    --blue:#0866FF;
    --blue-2:#2388FF;
    --blue-dark:#0754DB;
    --navy:#102A5C;
    --text:#526887;
    --muted:#66769B;
    --line:#D9E5F5;
    --gold:#F5A800;
    --gold-light:#FFC94A;
    --sky:#EAF4FF;
    --champagne:#FFF4DC;
    --warm-white:#FFFEFC;
    --surface:#F7FAFF;
    --font-main:"Catamaran",Arial,sans-serif;
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    background:var(--warm-white);
}

body{
    margin:0;
    color:var(--text);
    background:var(--warm-white);
    font-family:var(--font-main);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;height:auto}
a,button,input,textarea,select{font-family:var(--font-main)}
a{color:inherit;text-decoration:none}
main,section,article,div,header,footer{min-width:0}

:where(a,button,summary,input,textarea):focus-visible{
    outline:3px solid var(--blue-dark);
    outline-offset:3px;
}

.skip-link{
    position:fixed;
    top:12px;
    left:12px;
    z-index:999;
    padding:10px 16px;
    color:#fff;
    background:var(--navy);
    border-radius:10px;
    transform:translateY(-160%);
}

.skip-link:focus{transform:translateY(0)}

/* ANCHOS */
.section-shell{
    width:min(
        calc(100% - clamp(96px,12vw,220px)),
        1240px
    );
    margin-inline:auto;
}

/* BOTONES */
.btn{
    min-height:46px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
}

.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
}

.btn-voucher{
    min-height:42px;
    padding-inline:18px;
    color:var(--blue);
    background:transparent;
    border:1.5px solid var(--blue);
    border-radius:14px;
    font-size:14px;
    white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
    .btn-primary:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 36px rgba(8,102,255,.20);
    }

    .btn-voucher:hover{
        color:var(--blue-dark);
        background:rgba(8,102,255,.045);
        border-color:var(--blue-dark);
    }
}

/* HEADER */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,254,252,.94);
    border-bottom:1px solid rgba(16,42,92,.06);
    backdrop-filter:blur(12px);
}

.header-inner{
    width:min(
        calc(100% - clamp(64px,7vw,120px)),
        1320px
    );
    min-height:72px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:22px;
}

.brand{display:inline-flex;align-items:center}
.brand-logo{width:180px;max-height:44px;object-fit:contain}

.main-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
}

.main-nav a{
    color:var(--navy);
    font-size:14.5px;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
}

.header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.menu-toggle,
.mobile-voucher-link{
    display:none;
}

/* CONTACTO */
.contact-section{
    position:relative;
    overflow:hidden;
    padding:48px 0 96px;
    background:
        radial-gradient(circle at 12% 24%,rgba(234,244,255,.85) 0%,rgba(234,244,255,.34) 28%,rgba(234,244,255,0) 50%),
        radial-gradient(circle at 92% 78%,rgba(255,244,220,.80) 0%,rgba(255,244,220,.30) 28%,rgba(255,244,220,0) 52%),
        linear-gradient(180deg,#FFFEFC 0%,#FFFFFF 100%);
}

.contact-header{
    max-width:820px;
    margin:0 auto 44px;
    text-align:center;
}

.section-kicker{
    margin:0 0 14px;
    color:var(--blue);
    font-size:13px;
    font-weight:800;
    letter-spacing:1.6px;
}

.contact-header h1{
    margin:0;
    color:var(--navy);
    font-size:clamp(44px,4.5vw,62px);
    font-weight:800;
    line-height:1;
    letter-spacing:-1.6px;
    text-wrap:balance;
}

.contact-lead{
    max-width:720px;
    margin:20px auto 0;
    color:var(--text);
    font-size:19px;
    font-weight:500;
    line-height:1.52;
}

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
    gap:48px;
    align-items:stretch;
}

.contact-form-card{
    padding:34px;
    border:1px solid rgba(16,42,92,.10);
    border-radius:24px;
    background:rgba(255,255,255,.94);
    box-shadow:0 26px 66px rgba(16,42,92,.08),0 4px 14px rgba(16,42,92,.025);
    backdrop-filter:blur(10px);
}

.contact-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 20px;
}

.field{
    display:grid;
    gap:6px;
}

.field-full{grid-column:1 / -1}

.field label{
    color:var(--navy);
    font-size:14.5px;
    font-weight:800;
}

.field input,
.field textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--navy);
    background:#fff;
    font-size:16px;
    font-weight:500;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.field input{
    min-height:52px;
    padding:0 16px;
}

.field textarea{
    min-height:150px;
    padding:14px 16px;
    resize:vertical;
    line-height:1.45;
}

.field input::placeholder,
.field textarea::placeholder{
    color:#8290AB;
    opacity:1;
}

.field input:focus,
.field textarea:focus{
    border-color:rgba(8,102,255,.70);
    outline:0;
    box-shadow:0 0 0 4px rgba(8,102,255,.08);
}

.form-actions{margin-top:2px}

.btn-submit{
    min-height:54px;
    padding-inline:28px;
    font-size:16px;
}

.form-legal{
    margin:12px 0 0;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.45;
}

.form-legal a{
    color:var(--blue);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
}

/* VISUAL */
.contact-visual{
    min-height:100%;
    padding:38px 38px 32px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(8,102,255,.10);
    border-radius:24px;
    background:
        radial-gradient(circle at 82% 18%,rgba(255,201,74,.18) 0%,rgba(255,201,74,.05) 30%,rgba(255,201,74,0) 52%),
        linear-gradient(145deg,#EAF4FF 0%,#F7FBFF 48%,#FFF8E9 100%);
}

.contact-visual::before{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-80px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(8,102,255,.06);
    pointer-events:none;
}

.contact-visual-copy{
    position:relative;
    z-index:1;
}

.visual-kicker{
    margin:0 0 12px;
    color:var(--blue);
    font-size:11.5px;
    font-weight:800;
    letter-spacing:1.4px;
}

.contact-visual h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(34px,3.2vw,46px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-1px;
}

.contact-visual h2 span{
    display:block;
    margin-top:4px;
    color:var(--blue);
}

.contact-visual-copy > p:last-child{
    max-width:500px;
    margin:18px 0 0;
    font-size:17px;
    font-weight:500;
    line-height:1.5;
}

.contact-gift{
    min-height:260px;
    margin:auto 0 10px;
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
}

.contact-gift img{
    width:min(82%,320px);
    max-height:320px;
    display:block;
    object-fit:contain;
}

.visual-proof{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.visual-proof span{
    padding:7px 10px;
    color:var(--navy);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(16,42,92,.08);
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

/* FOOTER */
.site-footer{
    background:var(--surface);
    border-top:1px solid var(--line);
}

.footer-inner{
    width:min(
        calc(100% - clamp(64px,7vw,120px)),
        1320px
    );
    min-height:82px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.footer-logo{width:150px}

.footer-inner nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:18px 30px;
}

.footer-inner nav a{
    color:var(--navy);
    font-size:13.5px;
    font-weight:700;
}

@media (max-width:1100px){
    .main-nav{gap:18px}
    .main-nav a{font-size:13.5px}

    .contact-grid{
        grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);
        gap:32px;
    }

    .contact-form-card{padding:30px}
    .contact-visual{padding:32px 28px 28px}
}

@media (max-width:900px){

    .section-shell{
        width:min(calc(100% - 48px),820px);
    }

    .header-inner{
        width:calc(100% - 48px);
        position:relative;
        grid-template-columns:auto 1fr auto;
        gap:12px;
    }

    .main-nav{
        display:none;
        position:absolute;
        top:calc(100% + 8px);
        left:0;
        right:0;
        z-index:60;
        padding:16px;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:16px;
        box-shadow:0 18px 50px rgba(16,42,92,.12);
    }

    .main-nav.is-open{display:flex}

    .main-nav a{
        width:100%;
        padding:10px 8px;
        font-size:14px;
    }

    .header-actions{
        justify-self:end;
    }

    .btn-voucher{display:none}

    .mobile-voucher-link{
        display:block;
        margin-top:8px;
        padding-top:14px !important;
        color:var(--blue) !important;
        border-top:1px solid var(--line);
        font-weight:800 !important;
    }

    .menu-toggle{
        width:42px;
        height:42px;
        padding:0;
        display:grid;
        place-content:center;
        gap:5px;
        border:0;
        background:transparent;
        cursor:pointer;
    }

    .menu-toggle span{
        width:23px;
        height:2px;
        display:block;
        border-radius:999px;
        background:var(--navy);
    }

    .contact-section{
        padding:68px 0 78px;
    }

    .contact-header{
        margin-bottom:34px;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

    .contact-visual{
        min-height:500px;
    }

    .footer-inner{
        width:calc(100% - 48px);
    }
}

@media (max-width:640px){

    .section-shell{
        width:min(calc(100% - 40px),560px);
    }

    .header-inner{
        width:calc(100% - 24px);
        min-height:64px;
    }

    .brand-logo{width:145px}

    .contact-section{
        padding:54px 0 64px;
    }

    .contact-header{
        margin-bottom:28px;
        text-align:left;
    }

    .section-kicker{
        font-size:11px;
        letter-spacing:1.25px;
    }

    .contact-header h1{
        font-size:clamp(38px,10vw,44px);
        line-height:1;
        letter-spacing:-1px;
    }

    .contact-lead{
        margin-top:16px;
        font-size:16.5px;
    }

    .contact-form-card{
        padding:22px 18px;
        border-radius:20px;
    }

    .contact-form{
        grid-template-columns:1fr;
        gap:18px;
    }

    .field-full{
        grid-column:auto;
    }

    .field input{min-height:50px}
    .field textarea{min-height:140px}

    .btn-submit{width:100%}

    .contact-visual{
        min-height:0;
        padding:28px 22px 24px;
        border-radius:20px;
    }

    .contact-visual h2{
        font-size:34px;
    }

    .contact-visual-copy > p:last-child{
        font-size:15.5px;
    }

    .contact-gift{
        min-height:220px;
        margin-top:16px;
    }

    .contact-gift img{
        width:min(78%,260px);
    }

    .visual-proof{
        gap:6px;
    }

    .visual-proof span{
        font-size:11.5px;
    }

    .footer-inner{
        width:calc(100% - 40px);
        padding-block:22px;
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }

    .footer-inner nav{
        justify-content:center;
        gap:12px 20px;
    }
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .btn{transition:none}
}
/* =========================================================
   VALIDACION DEL FORMULARIO DE CONTACTO
========================================================= */

.contact-form .field {
    align-self: start;
}


/*
 * Reservamos el espacio del mensaje desde el inicio
 * para evitar que los campos cambien de posición.
 */
.contact-form .field-error {
    display: block;
    min-height: 15px;
    margin-top: 0px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}


/* Validación devuelta por ASP.NET MVC */
.contact-form .field-validation-error {
    color: #dc2626;
}


/*
 * El mensaje no se ve cuando es válido,
 * pero conserva su espacio.
 */
.contact-form .field-validation-valid {
    visibility: hidden;
}


/* =========================================================
   INPUTS CON ERROR
========================================================= */

.contact-form input.input-error,
.contact-form textarea.input-error,
.contact-form input.input-validation-error,
.contact-form textarea.input-validation-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
}


    /* =========================================================
   FOCUS CON ERROR
========================================================= */

    .contact-form input.input-error:focus,
    .contact-form textarea.input-error:focus,
    .contact-form input.input-validation-error:focus,
    .contact-form textarea.input-validation-error:focus {
        outline: none;
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
    }


/* =========================================================
   PRIVACIDAD
========================================================= */

.contact-privacy {
    align-self: start;
}


    .contact-privacy .field-error {
        min-height: 24px;
        margin-top: 5px;
    }


    .contact-privacy input.input-error,
    .contact-privacy input.input-validation-error {
        outline: 2px solid #dc2626;
        outline-offset: 2px;
    }

/* =========================================================
   MENSAJES GENERALES DEL FORMULARIO
========================================================= */



.form-validation-summary {
    grid-column: 1 / -1;
}

    .form-validation-summary:empty,
    .form-validation-summary.validation-summary-valid {
        display: none;
    }

    .form-validation-summary.validation-summary-errors {
        margin-bottom: 4px;
        padding: 14px 18px;
        color: #b91c1c;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .form-validation-summary ul {
        margin: 0;
        padding-left: 18px;
    }

/* =========================================================
   MODAL AVISO DE PRIVACIDAD
========================================================= */

.swal2-popup .privacy-modal-content {
    text-align: left;
}

    .swal2-popup .privacy-modal-content section {
        text-align: left;
    }

    .swal2-popup .privacy-modal-content h3,
    .swal2-popup .privacy-modal-content h4 {
        text-align: center;
    }

    .swal2-popup .privacy-modal-content p,
    .swal2-popup .privacy-modal-content ul,
    .swal2-popup .privacy-modal-content ol,
    .swal2-popup .privacy-modal-content li {
        text-align: left;
    }

    .swal2-popup .privacy-modal-content ul,
    .swal2-popup .privacy-modal-content ol {
        padding-left: 24px;
    }

    .swal2-popup .privacy-modal-content section + section {
        margin-top: 28px;
    }

    .swal2-popup .privacy-modal-content h3 {
        margin-bottom: 14px;
    }

    .swal2-popup .privacy-modal-content h4 {
        margin: 18px 0 10px;
    }