html, body, div, span, h1, h2, h3, h4, p, a, ul, li, article, footer, header, nav, section, img {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box;
    text-align: center;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    background: #000000;
    color: #5b5b5b;
    font-size: 15pt;
    line-height: 1.85em;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 300;
}

ol, ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; color: #483949; line-height: 1.25em; }
h2 { font-size: 2.85em; }
h3 { font-size: 1.25em; }

a {
    color: inherit;
    border-bottom: solid 1px rgba(128, 128, 128, 0.15);
    text-decoration: none;
    transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
}

a:hover { color: #ef8376; border-bottom-color: transparent; }
p { margin-bottom: 1em; text-align: center; }

/* 2. Contenedor y Filas esenciales */
.container {
    margin: 0 auto;
    max-width: 100%;
    width: 1400px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    margin-top: -40px;
    margin-left: -40px;
}
.row > * { box-sizing: border-box; padding: 40px 0 0 40px; }
.row > .col-4 { width: 33.33333%; }
.row > .col-12 { width: 100%; }

/* 3. Secciones, Imágenes y Botones */
section, article { margin-bottom: 3em; }
section.special > header, article.special > header { text-align: center; }
header { margin: 0 0 1em 0; }
header > p { font-size: 1.5em; margin: 1em 0 2em 0; line-height: 1.5em; }

.image { position: relative; display: inline-block; border: 0; }
.image img { display: block; width: 100%; border-radius: .4em; }

.carousel .carousel img {
    display: block;
    position: relative;
    top: -1em;
    margin-top: -1em;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: .3em;
    margin: 0;
}

button, .button {
    display: inline-block;
    background: #df7366;
    color: #fff;
    text-align: center;
    border-radius: 0.5em;
    text-decoration: none;
    padding: 0.65em 3em;
    border: 0;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.35s ease-in-out;
}
button:hover, .button:hover { background: #ef8376; color: #fff; }

/* 4. Iconos y Redes */
ul.icons {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4em;
    padding: 0.5em 1em;
    list-style: none;
    position: relative;
    z-index: 10;
}
ul.icons li { display: inline-block; }
ul.icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 100%;
    color: #ffffff;
    border-bottom: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    text-decoration: none;
    transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
}
ul.icons li a:hover { color: #ef8376; background-color: rgba(255, 255, 255, 0.08); }
ul.icons svg { display: block; width: 1em; height: 1em; fill: currentColor; pointer-events: none; }

.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* 5. Estructura visual principal */
.wrapper { background: #fff; margin: 0 0 2em 0; padding: 6em 0; }
#banner { background: #FFF; text-align: center; padding: 4.5em 0; margin-bottom: 0; }
#footer { padding: 6em 0; background: #000; color: #fff; text-align: center; }
#footer h2, #footer h3 { color: #fff; }
#footer .copyright { color: rgba(128, 128, 128, 0.75); font-size: 0.8em; }

/* 6. Carrusel y Flechas funcionales */
.carousel { position: relative; overflow: hidden; padding: 2em 0; }
.carousel .forward, .carousel .backward { position: absolute; top: 50%; width: 6em; height: 12em; margin-top: -6em; cursor: pointer; z-index: 2; }
.carousel .forward:before, .carousel .backward:before {
    content: ''; display: block; width: 6em; height: 6em; border-radius: 100%;
    background-color: rgba(72, 57, 73, 0.5); position: absolute; top: 50%; margin-top: -3em;
}
.carousel .forward:after, .carousel .backward:after {
    content: ''; width: 3em; height: 3em; position: absolute; top: 50%; margin: -1.5em 0 0 0;
    background: url("images/arrow.svg") no-repeat center center;
}
.carousel .forward:hover:before, .carousel .backward:hover:before { background-color: rgba(239, 131, 118, 0.75); }
.carousel .forward { right: 0; }
.carousel .forward:before { right: -3em; }
.carousel .forward:after { right: -0.25em; }
.carousel .backward { left: 0; }
.carousel .backward:before { left: -3em; }
.carousel .backward:after { left: -0.25em; transform: scaleX(-1); }
.carousel .reel { white-space: nowrap; position: relative; padding: 0 2em; }
.carousel article {
    display: inline-block; width: 18em; background: #fff; text-align: center;
    padding: 0em 1.5em 2em 1.5em; margin: 0 2em 0 0; white-space: normal; border-radius: .3em; vertical-align: top; 
}
.carousel article header { margin-top: -1.5em; margin-bottom: 0.5em; }
.carousel article p { text-align: center; margin-bottom: 0em; }

/* --- MENÚ DE NAVEGACIÓN --- */
#nav {
    position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 1.5em 0;
    z-index: 1000; background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #e0e0e0;
}
#nav > ul > li > a { display: block; color: #333333; background: transparent; border-bottom: none; }
ul.dropotron {
    background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 0.35em; padding: 0.5em 0;
}
ul.dropotron li a { color: #333333; padding: 0.5em 1.5em; display: block; }
ul.dropotron li a:hover { background: #f0f0f0; color: #ef8376; }
#nav > ul { display: inline-block; margin: 0; height: 21px; }
#nav > ul > li { display: inline-block; margin: 0 0.5em; padding: 0.85em; }
#nav > ul > li > ul { display: none; }
#navPanel, #titleBar, #navButton { display: none; }

/* MEDIA QUERY CORREGIDA */
@media screen and (max-width: 736px) {
    body { font-size: 12.5pt; }
    .container, .wrapper { width: 100%; padding-left: 1em; padding-right: 1em; }
    .row > .col-12-mobile { width: 100%; }
    .wrapper.style1 p, .wrapper.style1 footer { text-align: center; }
    .image img { display: block; width: 100%; height: auto; aspect-ratio: 350 / 227; object-fit: cover; border-radius: .3em; }

    #nav { display: none; }
    #navButton { display: block; height: 44px; left: 0; position: fixed; top: 0; width: 100%; z-index: 10001; }
    #navButton .toggle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
    #navButton .toggle:before {
        content: '\f0c9'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
        color: rgba(255, 255, 255, 0.75); text-align: center; display: block;
        font-size: 14px; width: 80px; height: 30px; line-height: 30px;
        position: absolute; left: 50%; margin-left: -40px; background: rgba(132, 128, 136, 0.75);
        border-radius: 0 0 0.35em 0.35em;
    }
    #navPanel {
        display: block; height: 50vh; left: 0; overflow-y: auto; position: fixed; top: 0; width: 100%;
        z-index: 10002; background: #1f1920; transform: translateY(-50vh); transition: transform 0.5s ease;
    }
    #navPanel .link { display: block; text-decoration: none; padding: 0.5em; color: #ddd; }
    body.navPanel-visible #navPanel { transform: translateY(0); }
    button, .button { display: block; width: 100%; line-height: 3em; padding: 0; }

    /* Jerarquia en menu movil */
    #navPanel .link {
        display: block; text-decoration: none; padding: 1em 1.5em; color: #ffffff;
        font-size: 1.1em; font-weight: 600; letter-spacing: 0.5px;
        background: #2a2228; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-transform: uppercase; position: relative; transition: background-color 0.3s ease, padding-left 0.3s ease;
    }
    #navPanel .link:hover, #navPanel .link:active { background: #3a3038; padding-left: 1.8em; }
    #navPanel .link:after { position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); font-size: 1.4em; color: rgba(255, 255, 255, 0.4); font-weight: 400; }
    #navPanel .link.depth-1, #navPanel ul ul .link, #navPanel ul ul li a {
        padding: 0.45em 1.5em 0.45em 3em; font-size: 0.9em; font-weight: 300; color: rgba(255, 255, 255, 0.75);
        background: #1a1418; text-transform: none; letter-spacing: normal; border-bottom: none; line-height: 1.4;
    }
    #navPanel .link.depth-1:after, #navPanel ul ul .link:after, #navPanel ul ul li a:after { content: none; }
    #navPanel .link.depth-1:hover, #navPanel .link.depth-1:active { background: #251e22; color: #ef8376; padding-left: 3.2em; }
    #navPanel > ul > li + li, #navPanel > .link + .link { border-top: 1px solid #0a0608; }
} /* <-- LLAVE DE CIERRE CORRECTA AQUÍ */


/* =========================================
   SECCIÓN DE CONTACTO - ESTILO TARJETA AMPLIO
   ========================================= */

/* Forzamos el fondo y centramos todo */
.contact-section {
    background: #f4f6fa; 
    padding: 6em 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Encabezados */
.contact-header {
    text-align: center;
    margin-bottom: 3em;
    max-width: 800px;
}

.contact-header .pre-title {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 3px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1em;
}

.contact-header .main-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.3em 0;
    line-height: 1.1;
}

.contact-header .subtitle {
    font-size: 1.25rem;
    color: #4b5563;
    margin: 0;
}

/* La Tarjeta Blanca (Centrada en escritorio) */
.form-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 3.5em;
    width: 100%;
    max-width: 900px; /* Tamaño ideal en escritorio */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); 
    box-sizing: border-box;
    text-align: left;
    margin: 0 auto; 
}

/* Rejilla del formulario */
.modern-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.modern-form .form-row .col-full {
    grid-column: 1 / -1;
}

.modern-form .col-half, 
.modern-form .col-full {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Etiquetas */
.modern-form label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    font-size: 1.1rem;
    text-align: left;
}

/* Campos de Texto */
.modern-form input[type="text"],
.modern-form input[type="tel"],
.modern-form input[type="email"],
.modern-form textarea {
    width: 100%;
    padding: 1.2em 1.5em;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    font-size: 1.1rem; 
    font-family: inherit;
    color: #1f2937;
    transition: all 0.3s ease;
    text-align: left;
    box-sizing: border-box;
}

.modern-form input:focus,
.modern-form textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #df7366; 
    box-shadow: 0 0 0 5px rgba(223, 115, 102, 0.15); 
}

.modern-form textarea {
    resize: vertical;
    min-height: 160px;
}

.modern-form input::placeholder,
.modern-form textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Botón de Enviar */
.submit-btn {
    width: 100%;
    background: #df7366; 
    color: white;
    border: none;
    padding: 1.3em;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-family: inherit;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    background: #ef8376; 
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(223, 115, 102, 0.3);
}

/* RESPONSIVE (Para móviles) */
@media screen and (max-width: 768px) {
    .contact-section {
        padding: 4em 1em; 
    }
    
    .contact-header .main-title {
        font-size: 2.3rem; 
    }
    
    .form-card {
        padding: 2em 1.5em; 
    }

    .modern-form .form-row {
        grid-template-columns: 1fr; 
        gap: 20px;
        margin-bottom: 20px;
    }
}

/* =========================================
   SECCIÓN: CARRUSEL DE EXPERIENCIAS
   ========================================= */

.wrapper.style3 {
    background: #ffffff !important; /* Fondo gris azulado suave */
    padding: 5em 0;
}

.testimonials-carousel {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; /* Imán de desplazamiento */
    gap: 25px !important;
    padding: 1em 20px 2em 20px !important;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; /* Oculta barra en Firefox */
}
.testimonials-carousel::-webkit-scrollbar {
    display: none; /* Oculta barra en Chrome/Safari */
}

.testimonial-card {
    flex: 0 0 320px !important; /* Ancho fijo: evita CLS */
    scroll-snap-align: center !important;
    background: #e9eef5 !important;
    border-radius: 15px !important;
    padding: 2em !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    text-align: left !important;
    border: 1px solid #e1e8ed !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.testimonial-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.testimonial-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}

.testimonial-header img {
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border: 2px solid #df7366 !important;
}

.testimonial-header h4 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.client-tag {
    display: block !important;
    font-size: 0.8rem !important;
    color: #10b981 !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}

.testimonial-card blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.testimonial-card blockquote p {
    font-size: 0.95rem !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    text-align: left !important;
    font-style: italic !important;
}

@media screen and (max-width: 736px) {
    .testimonial-card {
        flex: 0 0 85vw !important;
    }
    .testimonials-carousel {
        scroll-snap-type: x proximity !important;
    }
}