/* =========================================
   VARIABLES
   ========================================= */
:root {
    --azul-primario: #0077b5;
    --azul-oscuro: #005a8a;
    --verde-whatsapp: #25d366;
    --verde-oscuro: #128c4a;
    --blanco: #ffffff;
    --texto-oscuro: #1a2332;
    --texto-medio: #4a5568;
    --overlay-capa: rgba(0, 20, 40, 0.55);
    --nav-height: 70px;
    --radio: 14px;
    --sombra: 0 8px 32px rgba(0, 0, 0, 0.08);
    --sombra-hover: 0 16px 48px rgba(0, 0, 0, 0.14);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--texto-oscuro);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 1.5rem;

}

/* NAV */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6%;
    height: var(--nav-height);
    background: var(--blanco);
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    transition: box-shadow 0.3s;
    border-bottom: 1px solid transparent;
}
nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.10); border-bottom-color: rgba(0,0,0,.05); }

.logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--texto-oscuro); letter-spacing: -0.3px; }
.logo span { color: var(--azul-primario); }
.nav-links { list-style: none; display: flex; align-items: center; gap: 22px; }
.nav-links a { text-decoration: none; color: var(--texto-medio); font-weight: 600; font-size: 0.88rem; transition: color .3s; }
.nav-links a:hover { color: var(--azul-primario); }
.nav-cta { background: var(--azul-primario); color: var(--blanco) !important; padding: 8px 20px; border-radius: 50px; transition: background .3s !important, transform .2s !important; }
.nav-cta:hover { background: var(--azul-oscuro) !important; color: var(--blanco) !important; transform: translateY(-1px); }

.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; transition: background .2s; z-index: 101; }
.hamburger:hover { background: rgba(0,0,0,.05); }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--texto-oscuro); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; transform-origin: center; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; opacity: 0; transition: opacity .3s; }
.menu-overlay.is-open { opacity: 1; }

/* HERO */
.hero {
    position: relative;
    min-height: 100svh; min-height: 100vh;
    padding-top: var(--nav-height);
    background: url('img/FOTOPORTADA.png') no-repeat center center / cover;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--blanco);
    padding-left: 20px; padding-right: 20px;
}
.hero::before { content: ''; position: absolute; inset: 0; background: var(--overlay-capa); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 860px; width: 100%; }

.kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.78rem; background: var(--azul-primario); padding: 6px 16px; border-radius: 50px; margin-bottom: 24px; }
h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(2rem, 5.5vw, 3.8rem); font-weight: 800; line-height: 1.1; margin-bottom: 22px; text-shadow: 0 4px 20px rgba(0,0,0,.4); }
.hero-description { font-size: clamp(1rem, 2.5vw, 1.2rem); margin-bottom: 40px; font-weight: 400; max-width: 640px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 8px rgba(0,0,0,.3); opacity: .95; line-height: 1.7; }

.cta-wrapper { margin-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta-button { display: inline-block; background-color: var(--azul-primario); color: var(--blanco); padding: 18px 44px; border-radius: 50px; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; transition: transform .3s, background-color .3s, box-shadow .3s; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cta-button:hover { background-color: var(--azul-oscuro); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.4); }
.cta-button--whatsapp { background: #25d366; color: #062814; }
.cta-button--whatsapp:hover { background: #1fbd5a; color: #062814; }
.cta-note { flex-basis: 100%; font-size: .82rem; margin-top: 0; opacity: .82; font-style: italic; }

.trust-badges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; font-size: .83rem; font-weight: 600; }
.trust-badges span { background: rgba(255,255,255,.15); padding: 5px 14px; border-radius: 50px; backdrop-filter: blur(5px); white-space: nowrap; border: 1px solid rgba(255,255,255,.2); }
.separator { background: none !important; padding: 0 !important; backdrop-filter: none !important; border: none !important; }

/* Elementos que NO deben justificarse */
nav, h1, h2, h3, h4,
.logo, .nav-links, .kicker, .seccion-kicker,
.trust-badges, .cta-note, .cta-button,
.formulario-btn, .formulario-nota, .formulario-ok,
.campo label, .campo-error,
.ventaja-numero, .nosotros-ubicacion-label, .nosotros-ubicacion-dir,
.contacto-destacado-label, .contacto-destacado-valor,
.footer, .footer-logo, .footer-texto, .footer-copy,
.servicios, .ventajas, .nosotros { text-align: unset; }

.servicios { text-align: center; }
/* SECCIONES BASE */
.seccion { padding: 96px 20px; }
.contenedor { max-width: 1100px; margin: 0 auto; }

.seccion-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; font-size: 1.1rem; color: var(--azul-primario); margin-bottom: 14px; }
.seccion-kicker--claro { color: rgba(255,255,255,.7); }
.seccion-titulo { font-family: 'Montserrat', sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.15; color: var(--texto-oscuro); margin-bottom: 18px; }
.seccion-titulo--claro { color: var(--blanco); }
.seccion-subtitulo { font-size: 1.02rem; color: var(--texto-medio); max-width: 660px; margin-bottom: 56px; line-height: 1.75; }

/* SERVICIOS */
.servicios { background: #f4f7fb; text-align: center; }
.servicios .seccion-subtitulo { margin-left: auto; margin-right: auto; font-size: 1.25rem;  }
.servicios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; text-align: left; }
.servicio-card { background: var(--blanco); border: 1px solid #e4e9f0; border-radius: var(--radio); padding: 34px 28px; transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; }
.servicio-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--azul-primario); opacity: 0; transition: opacity .25s; }
.servicio-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.servicio-card:hover::after { opacity: 1; }
.servicio-icono { font-size: 2.2rem; margin-bottom: 18px; }
.servicio-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--texto-oscuro); margin-bottom: 10px; line-height: 1.3; }
.servicio-card p { font-size: 1.0rem; color: var(--texto-medio); line-height: 1.65; margin-bottom: 18px; }
.servicio-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.servicio-lista li { font-size: .87rem; color: var(--texto-medio); padding-left: 20px; position: relative; }
.servicio-lista li::before { content: '✓'; position: absolute; left: 0; color: var(--azul-primario); font-weight: 700; }

/* VENTAJAS */
.ventajas { background: var(--blanco); }
.ventajas .seccion-subtitulo { margin-left: 0; margin-right: 0; font-size: 1.15rem; }
.ventajas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 50px; text-align: left; }
.ventaja-item { border-top: 3px solid var(--azul-primario); padding-top: 22px; }
.ventaja-numero { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: 2px; color: var(--azul-primario); margin-bottom: 10px; opacity: .55; }
.ventaja-item h3 { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--texto-oscuro); margin-bottom: 10px; line-height: 1.3; }
.ventaja-item p { font-size: 1.15rem; color: var(--texto-medio); line-height: 1.7; }

/* NOSOTROS */
.nosotros { background: #f4f7fb; }
.nosotros .seccion-subtitulo { margin-left: 0; margin-right: 0; }
.nosotros-intro { font-size: 1.25rem; color: var(--texto-medio); line-height: 1.8; margin-bottom: 60px; max-width: 850px; }
.nosotros-mapa-wrapper { max-width: 860px; }
.nosotros-ubicacion-label { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--azul-primario); opacity: .7; margin-bottom: auto; }
.nosotros-ubicacion-dir { font-size: .95rem; font-weight: 600; color: var(--texto-oscuro); margin-bottom: 14px; }
.nosotros-mapa { width: 100%; height: 420px; border-radius: var(--radio); overflow: hidden; border: 1px solid #dde3ec; box-shadow: var(--sombra); }

/* =========================================
   CONTACTO — CORREGIDO (Lado a Lado)
   ========================================= */
.contacto {
    background: linear-gradient(150deg, #002f52 0%, #004e7c 35%, #0071a9 70%, #008dc8 100%);
    color: var(--blanco);
    position: relative;
    overflow: hidden;
    padding: 80px 20px; /* Ajuste de padding para mejor respiro */
	font-size: 2.0rem;
}

.contacto-contenedor {
    display: grid;
    /* Definimos dos columnas: la izquierda para info, la derecha para el formulario */
    grid-template-columns: 1fr 1fr; 
    gap: 50px;
    align-items: center; /* Centra verticalmente los dos bloques */
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contacto-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contacto-descripcion {
    font-size: 1.1rem;
    opacity: .9;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Contenedor de las tarjetas de teléfono y email */
.contacto-destacados {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contacto-destacado-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radio);
    padding: 15px 20px;
    text-decoration: none;
    color: var(--blanco);
    transition: all .3s ease;
}

.contacto-destacado-card:hover {
    background: rgba(255,255,255,.2);
    transform: translateX(10px);
}

/* Ajuste del Formulario para que no se vea gigante */
.formulario {
    background: var(--blanco);
    border-radius: 18px;
    padding: 35px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    width: 100%;
}

/* RESPONSIVE: En móviles sí deben ir uno debajo del otro */
@media (max-width: 900px) {
    .contacto-contenedor {
        grid-template-columns: 1fr; /* Una sola columna en tablets/móviles */
        gap: 40px;
    }
    
    .contacto-info {
        text-align: center;
    }

    .contacto-descripcion {
        margin-left: auto;
        margin-right: auto;
    }
}
/* Tarjetas de contacto DESTACADAS */
.contacto-destacados {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.contacto-destacado-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radio);
    padding: 20px 22px;
    text-decoration: none;
    color: var(--blanco);
    transition: background .25s, transform .25s, box-shadow .25s;
    backdrop-filter: blur(6px);
}
.contacto-destacado-card:hover {
    background: rgba(255,255,255,.2);
    transform: translateX(5px);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    color: var(--blanco);
}

.contacto-destacado-card--whatsapp {
    background: rgba(37, 211, 102, .18);
    border-color: rgba(37, 211, 102, .38);
}

.contacto-destacado-card--whatsapp:hover {
    background: rgba(37, 211, 102, .28);
}

.contacto-destacado-icono--whatsapp svg {
    width: 30px;
    height: 30px;
    fill: #25d366;
    display: block;
}

.contacto-destacado-icono {
    width: 54px; height: 54px;
    min-width: 54px;
    background: rgba(255,255,255,.16);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem;
    border: 1px solid rgba(255,255,255,.22);
    flex-shrink: 0;
}

.contacto-destacado-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.contacto-destacado-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .65;
    white-space: nowrap;
}

.contacto-destacado-valor {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-mobile { display: none; }

/* Dato secundario: zona servicio */
.contacto-dato-secundario {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.12);
    opacity: .8;
}
.contacto-dato-secundario .dato-icono { font-size: 1.1rem; flex-shrink: 0; }
.contacto-dato-secundario strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: .65; margin-bottom: 2px; font-family: 'Montserrat', sans-serif; }
.contacto-dato-secundario span { font-size: .92rem; font-weight: 600; }

/* FORMULARIO */
.formulario {
    background: var(--blanco);
    border-radius: 18px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
}

.formulario-header { margin-bottom: 4px; }
.formulario-header h3 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--texto-oscuro); margin-bottom: 4px; }
.formulario-header p { font-size: .84rem; color: var(--texto-medio); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: .82rem; font-weight: 700; color: var(--texto-oscuro); }
.campo input, .campo select, .campo textarea { border: 1.5px solid #dde3ec; border-radius: 10px; padding: 13px 16px; font-family: 'Open Sans', sans-serif; font-size: .92rem; color: var(--texto-oscuro); background: #f8fafc; transition: border-color .25s, box-shadow .25s, background .25s; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul-primario); box-shadow: 0 0 0 3px rgba(0,119,181,.12); background: var(--blanco); }
.campo input.campo-invalido, .campo textarea.campo-invalido { border-color: #e53935; box-shadow: 0 0 0 3px rgba(229,57,53,.1); }
.campo-error { font-size: .77rem; color: #e53935; font-weight: 600; min-height: 1em; }
.campo textarea { resize: vertical; min-height: 84px; }
.campo-grupo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.campo-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.privacidad-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--texto-medio);
    cursor: pointer;
}

.privacidad-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--azul-primario);
}

.privacidad-check a {
    color: var(--azul-primario);
    font-weight: 700;
}

.formulario-btn { background: var(--azul-primario); color: var(--blanco); border: none; border-radius: 50px; padding: 17px 28px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .3s, transform .2s, box-shadow .3s; box-shadow: 0 6px 20px rgba(0,119,181,.35); margin-top: 4px; }
.formulario-btn:hover { background: var(--azul-oscuro); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,90,138,.45); }
.formulario-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.formulario-nota { font-size: .76rem; color: #aaa; text-align: center; }
.formulario-ok { display: none; background: #e8f5e9; color: #2e7d32; border-radius: 10px; padding: 16px; font-size: .92rem; font-weight: 600; text-align: center; border: 1px solid #c8e6c9; }

/* FOOTER */
.footer { background: #0e1a26; color: rgba(255,255,255,.55); padding: 40px 20px; text-align: center; }
.footer-logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: var(--blanco); margin-bottom: 10px; }
.footer-logo span { color: var(--azul-primario); }
.footer-texto { font-size: .82rem; margin-bottom: 8px; }
.footer-links { font-size: .78rem; margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,.74); text-decoration: none; }
.footer-links a:hover { color: var(--blanco); text-decoration: underline; }
.footer-copy { font-size: .76rem; opacity: .45; }

/* PRIVACIDAD */
.pagina-legal {
    background: #f4f7fb;
    color: var(--texto-oscuro);
    font-size: 1rem;
}

.legal-header {
    background: var(--blanco);
    border-bottom: 1px solid #dde3ec;
    padding: 24px 20px;
}

.legal-header .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.legal-volver {
    color: var(--azul-primario);
    font-weight: 700;
    text-decoration: none;
    font-size: .92rem;
}

.legal-volver:hover { text-decoration: underline; }

.legal-contenido {
    padding: 56px 20px 72px;
}

.legal-documento {
    max-width: 860px;
    margin: 0 auto;
    background: var(--blanco);
    border: 1px solid #dde3ec;
    border-radius: var(--radio);
    padding: 42px;
    box-shadow: var(--sombra);
}

.legal-documento h1 {
    color: var(--texto-oscuro);
    text-shadow: none;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 10px;
}

.legal-documento h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.12rem;
    margin: 30px 0 10px;
}

.legal-documento p,
.legal-documento li {
    color: var(--texto-medio);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-documento ul {
    margin: 10px 0 0 22px;
}

/* MOBILE */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--blanco); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0 20px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 100; transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .3s ease; }
    .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .menu-overlay { display: block; pointer-events: none; }
    .menu-overlay.is-open { pointer-events: auto; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 14px 6%; font-size: 1rem; border-bottom: 1px solid rgba(0,0,0,.06); }
    .nav-links a:hover { background: rgba(0,119,181,.05); }
    .nav-cta { margin: 12px 6%; text-align: center; border-radius: 8px; padding: 14px 18px !important; border-bottom: none !important; }
    .cta-button { display: block; width: 100%; text-align: center; padding: 18px 20px; font-size: 1rem; }
    .cta-wrapper { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .trust-badges { flex-direction: column; gap: 6px; }
    .separator { display: none; }
    .logo { font-size: .92rem; }
    .seccion { padding: 64px 20px; }
    .seccion-subtitulo { margin-bottom: 36px; }
    .servicios-grid { grid-template-columns: 1fr; }
    .ventajas-grid { grid-template-columns: 1fr; gap: 28px; }
    .nosotros-mapa { height: 260px; }
    .contacto-contenedor { grid-template-columns: 1fr; gap: 40px; }
    .contacto-descripcion { max-width: 100%; }
    .contacto-destacado-valor { font-size: 1.1rem; white-space: normal; word-break: normal; overflow-wrap: normal; }
    .contacto-destacado-card[href^="mailto:"] .contacto-destacado-valor { font-size: .96rem; line-height: 1.18; }
    .email-desktop { display: none; }
    .email-mobile { display: inline; }
    .contacto-destacado-card { padding: 16px 18px; gap: 14px; }
    .contacto-destacado-icono { width: 46px; height: 46px; min-width: 46px; font-size: 1.3rem; }
    .campo-grupo--doble { grid-template-columns: 1fr; }
    .formulario { padding: 24px 18px; gap: 14px; }
    .formulario-btn { font-size: .95rem; padding: 16px 20px; width: 100%; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    nav { padding: 0 4%; }
    .nav-links { gap: 14px; }
    .nav-links a { font-size: .82rem; }
    h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
    .contacto-contenedor { gap: 40px; }
}