/* =====================================================================
   MEDICINA PREPAGADA FÁCIL — VERSIÓN 2 · Hoja de estilos principal
   /public_html/assets/css/styles.css
   ---------------------------------------------------------------------
   Sistema de diseño común al Core. La versión 2 solo cambia los tokens
   (tipografía amigable, esquinas más redondeadas, sombras más suaves) y
   añade un acento cálido. Las secciones propias del vertical viven en
   assets/css/sections.css.

   Índice
    01. Variables y tokens de diseño
    02. Reset y base
    03. Utilidades (container, section, botones, chips, iconos)
    04. Cabecera y navegación
    05. Beneficios
    06. Proceso de trabajo
    07. CTA final
    08. Contacto y formulario
    09. Footer
    10. Elementos flotantes (WhatsApp, volver arriba)
    11. Animaciones de aparición
    12. Responsive
    13. Accesibilidad y preferencias
   ===================================================================== */

/* =====================================================================
   01. VARIABLES Y TOKENS DE DISEÑO
   ===================================================================== */
:root {
    /* -----------------------------------------------------------------
       PALETA — Colores oficiales de Coomeva Medicina Prepagada
       Azul #0372B9 · Verde medio #008E4F · Gris #58585A
       Los nombres de las variables se conservan (--blue-*, --amber-*) para
       no divergir del Core. El verde corporativo ocupa el rol de ACENTO.
       Contraste verificado con texto blanco:
         azul   #0372B9 → 5.11:1  (cumple AA)
         verde  #008E4F → 4.22:1  (solo texto grande: se usa como acento,
                                   no como fondo de botón con texto blanco)
       ----------------------------------------------------------------- */
    --blue-950: #0372b9;   /* AZUL DE MARCA: fondo base de las bandas azules */
    --blue-900: #0372b9;   /* unificado con el azul de marca: no baja de aquí */
    --blue-800: #0372b9;   /* azul para textos sobre fondos claros (5,11:1) */
    --blue-700: #0372b9;   /* OFICIAL: azul principal */
    --blue-750: #02619f;   /* SOLO estados hover: blanco encima 6,5:1 */
    --blue-600: #0585d4;   /* derivado: acentos claros, NUNCA texto (3,95:1) */
    --blue-500: #2f9ee0;   /* derivado: acentos claros */
    --blue-200: #a8d5ef;   /* derivado: bordes */
    --blue-100: #d3e9f7;   /* derivado: bordes suaves */
    --blue-50:  #eaf4fb;   /* derivado: fondos de sección */

    /* Neutros, alineados con el gris oficial #58585A */
    --ink-900: #23272b;
    --ink-800: #33383d;
    --ink-700: #43484d;
    --ink-600: #58585a;   /* OFICIAL: gris corporativo */
    --ink-500: #6f7073;
    --ink-400: #9a9b9e;
    --ink-300: #c9cacd;
    --ink-200: #e4e5e7;
    --ink-100: #f2f3f4;
    --ink-50:  #f4f6f8;
    --white:   #ffffff;

    /* Acento — verde corporativo (uso moderado, nunca con texto blanco pequeño) */
    --amber-600: #006b3a;  /* derivado: verde accesible con texto blanco */
    --amber-500: #008e4f;  /* OFICIAL: verde medio */
    --amber-400: #00a85e;  /* derivado: verde claro */
    --amber-100: #d9f2e5;  /* derivado: verde muy claro */

    /* Acento cálido — SOLO para detalles emocionales sobre fondo oscuro
       (el trazo que subraya la palabra destacada del slider). Nunca lleva
       texto encima, así que no afecta al contraste de lectura. */
    --warm-500: #ffc247;
    --warm-100: #fff3dc;

    /* Semánticos */
    /* Verde de WhatsApp. El brillante (#25D366) NO admite texto blanco
       encima: da 1,75:1. Se conserva como color de marca para detalles
       pequeños, y los botones usan el tono profundo, que sí cumple:
         #1a7f4b con texto blanco → 5,03:1 (AA)
         #12653a con texto blanco → 7,37:1 (AAA) */
    --green-500: #25d366;  /* verde oficial de WhatsApp (detalles) */
    --green-600: #1da851;
    --green-700: #1a7f4b;  /* fondo de botón con texto blanco */
    --green-800: #12653a;  /* hover del botón */
    --red-500:   #e11d48;

    /* Gradientes */
    --grad-blue: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 100%);
    --grad-deep: var(--blue-700);  /* era un degradado hacia azul oscuro */
    --grad-accent: linear-gradient(135deg, #00804a 0%, var(--amber-600) 100%); /* blanco encima 5,0:1 */
    --grad-soft: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);

    /* Radios — la v2 es más redondeada y cercana */
    --r-xs: 10px;
    --r-sm: 16px;
    --r-md: 24px;
    --r-lg: 34px;
    --r-xl: 44px;
    --r-full: 999px;

    /* Sombras — más difusas y menos azuladas que en la v1 */
    --sh-xs: 0 1px 2px rgba(35, 39, 43, .05);
    --sh-sm: 0 3px 10px rgba(35, 39, 43, .06), 0 12px 26px -16px rgba(35, 39, 43, .16);
    --sh-md: 0 14px 38px -18px rgba(3, 114, 185, .3), 0 3px 10px rgba(35, 39, 43, .05);
    --sh-lg: 0 30px 64px -30px rgba(3, 114, 185, .38), 0 8px 22px -14px rgba(35, 39, 43, .12);
    --sh-xl: 0 44px 96px -36px rgba(3, 114, 185, .46);

    /* Tipografía — v2 más amigable y menos corporativa:
       · Baloo 2 (redondeada, cálida) para títulos y cifras.
       · Nunito (redondeada, muy legible) para el texto.
       Ambas de Google Fonts, licencia SIL OFL. */
    --ff-head: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ff-body: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    /* Medidas */
    --container: 1200px;
    --gutter: clamp(18px, 4vw, 32px);
    --section-y: clamp(64px, 7.5vw, 118px);
    --header-h: 78px;

    /* Movimiento */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur: .38s;
}

/* =====================================================================
   02. RESET Y BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo [hidden] siempre debe ocultar el elemento.
   Sin esta regla, cualquier display definido por clase (por ejemplo
   .to-top { display: inline-flex }) anula el comportamiento del atributo. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
    margin: 0;
    font-family: var(--ff-body);
    font-size: clamp(15px, .45vw + 14px, 16.5px);
    line-height: 1.68;
    color: var(--ink-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
    font-family: var(--ff-head);
    color: var(--ink-900);
    line-height: 1.16;
    letter-spacing: -.02em;
    margin: 0 0 .55em;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   ESCALA TIPOGRÁFICA (revisada)
   Relación titular principal ÷ texto general = 2.8x, dentro del rango
   sano (2.5-3.2). Antes era de 3.8x, que es lo que hacía que los títulos
   se sintieran gigantes.
   El paso fluido baja de 4.6vw a 3.2vw: con 4.6vw el tope se alcanzaba ya
   en pantallas de 1360 px, así que en cualquier portátil el titular estaba
   siempre en su tamaño máximo.
   Los tres valores máximos son los que un futuro panel podrá ajustar.
   --------------------------------------------------------------------- */
h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; letter-spacing: -.035em; }  /* 46 px */
h2 { font-size: clamp(1.55rem, 2.2vw, 2.05rem); letter-spacing: -.03em; }                  /* 33 px */
h3 { font-size: clamp(1.05rem, 1.3vw, 1.18rem); }                                          /* 19 px */
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--blue-750); }

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.icon { flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; }

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

/* Foco visible accesible */
:focus-visible {
    outline: 3px solid var(--blue-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enlace de accesibilidad "Saltar al contenido principal".
   Se mantiene FUERA de la pantalla con translate(-50%, -120%): eso lo
   desplaza hacia arriba un 120 % de SU PROPIA altura, así que no puede
   asomar aunque la letra crezca o el texto se parta en dos líneas.
   (Con top: -80px una altura mayor lo dejaba visible sobre la cabecera.)
   Solo aparece cuando el foco llega con el teclado (:focus-visible), no
   con un toque accidental en el móvil. */
.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    pointer-events: none;
    background: var(--blue-800);
    color: var(--white);
    padding: 12px 22px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    z-index: 999;
    font-weight: 600;
    transition: transform .25s var(--ease);
}
.skip-link:focus {
    transform: translate(-50%, 0);
    pointer-events: auto;
    color: var(--white);
}
/* Respaldo para navegadores sin :focus-visible: el foco por puntero
   tampoco lo muestra. */
.skip-link:focus:not(:focus-visible) {
    transform: translate(-50%, -120%);
    pointer-events: none;
}

.site-shell { position: relative; overflow: hidden; }

/* =====================================================================
   03. UTILIDADES
   ===================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section { position: relative; padding: var(--section-y) 0; }

.section-head { max-width: 780px; margin: 0 auto clamp(38px, 5vw, 66px); text-align: center; }
.section-head-split {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    text-align: left;
}
.section-head-split > div { max-width: 660px; }
.section-head-dark .section-title { color: var(--white); }
.section-head-dark .section-subtitle { color: var(--white); }

.section-title { margin-bottom: .5rem; }
.section-title-sm { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }  /* 27 px */
.section-subtitle { color: var(--ink-600); font-size: 1.04rem; margin: 0; }

/* Antetítulo */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ff-head);
    font-size: .755rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--blue-700);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    padding: 8px 16px;
    border-radius: var(--r-full);
    margin-bottom: 20px;
}
.eyebrow-light {
    /* Sobre el azul de marca el relleno blanco tiene que ser mínimo: con .05
       el texto blanco da 4,68:1; con .09 bajaba a 4,36:1 y no cumplía AA. */
    color: var(--white);
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .3);
}

/* Botones */
.btn {
    --btn-bg: var(--blue-700);
    --btn-fg: var(--white);
    --btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    font-family: var(--ff-head);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-full);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .75s var(--ease);
    z-index: -1;
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn-primary   { --btn-bg: var(--blue-700); box-shadow: 0 10px 24px -14px rgba(3, 114, 185, .85); }
.btn-primary:hover { --btn-bg: var(--blue-750); }
.btn-accent    { --btn-bg: var(--grad-accent); --btn-fg: var(--white); color: var(--white); box-shadow: 0 12px 26px -14px rgba(0, 128, 74, .8); }
.btn-accent:hover { color: var(--white); }
.btn-whatsapp  { --btn-bg: var(--green-700); color: #ffffff; box-shadow: 0 12px 26px -14px rgba(26, 127, 75, .75); }
.btn-whatsapp:hover { --btn-bg: var(--green-800); color: #ffffff; }
.btn-outline   { --btn-bg: transparent; --btn-fg: var(--blue-800); --btn-border: var(--blue-200); }
.btn-outline:hover { --btn-bg: var(--blue-50); }
.btn-ghost-light { --btn-bg: rgba(255, 255, 255, .05); --btn-fg: var(--white); --btn-border: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { --btn-bg: var(--white); --btn-fg: var(--blue-700); --btn-border: var(--white); }
.btn-soft { --btn-bg: var(--blue-50); --btn-fg: var(--blue-800); --btn-border: var(--blue-100); }
.btn-soft:hover { --btn-bg: var(--blue-100); }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-sm { padding: 10px 18px; font-size: .85rem; }
.btn-block { width: 100%; }

/* Chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 12px; }
.chip-list li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-full);
    font-size: .885rem;
    font-weight: 500;
    color: var(--ink-700);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip-list li .icon { color: var(--blue-600); transition: color var(--dur) var(--ease); }
.chip-list li:hover {
    transform: translateY(-3px);
    border-color: var(--blue-200);
    box-shadow: var(--sh-sm);
    color: var(--blue-800);
}
.chip-list li:hover .icon { color: var(--amber-500); }

/* Tarjeta genérica */
.card {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

/* Redes sociales */
.social-list { display: flex; flex-wrap: wrap; gap: 10px; }
.social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--white);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.social-list a:hover { transform: translateY(-3px); background: var(--warm-500); color: var(--ink-900); }
.social-list-dark a {
    background: var(--blue-50);
    border-color: var(--blue-100);
    color: var(--blue-800);
}

/* =====================================================================
   04. CABECERA Y NAVEGACIÓN
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--ink-200);
    box-shadow: 0 10px 30px -22px rgba(15, 23, 42, .35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-900); }
.brand-logo { width: auto; height: 46px; object-fit: contain; }
.brand-mark { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark svg { flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-text strong {
    font-family: var(--ff-head);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--blue-800);
}
.brand-text small {
    font-size: .66rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-weight: 600;
}
.brand-footer .brand-text strong { color: var(--white); }
.brand-footer .brand-text small { color: var(--white); }

.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav a {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-700);
    border-radius: var(--r-full);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 0;
    height: 2px;
    background: var(--amber-500);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width var(--dur) var(--ease);
}
.main-nav a:hover { color: var(--blue-800); background: var(--blue-50); }
.main-nav a:hover::after { width: 22px; }
.main-nav a.is-active { color: var(--blue-800); background: var(--blue-50); font-weight: 600; }
.main-nav a.is-active::after { width: 22px; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-sm);
    background: var(--white);
    padding: 0;
    align-items: center;
    justify-content: center;
}
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-toggle-bars i {
    display: block;
    height: 2px;
    background: var(--ink-800);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panel del menú móvil.
   IMPORTANTE: este panel es hijo directo de <body>, no de la cabecera.
   La cabecera usa backdrop-filter, lo que la convierte en bloque
   contenedor de los elementos position: fixed; si el panel estuviera
   dentro, su altura se calcularía contra los 78 px de la cabecera y
   quedaría reducida a cero (solo se vería una franja del primer enlace).
   Como hijo de <body> ocupa toda la ventana y se dibuja sobre el hero. */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    /* Por debajo de la cabecera (120) para que el botón de cierre
       siga siempre visible y pulsable por encima del panel. */
    z-index: 118;
    background: rgba(255, 255, 255, .99);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 22px var(--gutter) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.mobile-nav nav ul { display: grid; gap: 8px; }
.mobile-nav nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-sm);
    font-family: var(--ff-head);
    font-weight: 600;
    color: var(--ink-800);
}
.mobile-nav nav a .icon { color: var(--ink-500); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.mobile-nav nav a:hover { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-800); }
.mobile-nav nav a:hover .icon { color: var(--blue-600); transform: translateX(3px); }

/* Aparición escalonada de los enlaces al abrir el menú. */
.mobile-nav.is-open nav li {
    animation: navItemIn .34s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes navItemIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.mobile-nav-footer { display: grid; gap: 12px; margin-top: 26px; }
.mobile-nav-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 0;
    color: var(--ink-600);
    font-size: .92rem;
}
.mobile-nav-contact .icon { color: var(--blue-600); }

/* Con el menú abierto se ocultan los elementos flotantes para que no
   queden por encima del panel. */
body.nav-open .whatsapp-float,
body.nav-open .to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =====================================================================
   15. CTA FINAL
   ===================================================================== */
.cta-final {
    position: relative;
    padding: clamp(76px, 9vw, 132px) 0;
    overflow: hidden;
    background: var(--blue-950);
}
.cta-final-bg { position: absolute; inset: 0; }
.cta-final-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3, 114, 185, .97) 0%, rgba(3, 114, 185, .95) 55%, rgba(3, 114, 185, .97) 100%);
}
.cta-final-inner { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }
.cta-final-title { color: var(--white); margin-bottom: .4em; }
.cta-final-text { color: var(--white); font-size: 1.06rem; max-width: 60ch; margin: 0 auto 32px; }
.cta-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta-final-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 0;
    font-family: var(--ff-head);
    font-weight: 600;
    color: var(--white);
}
.cta-final-phone .icon { color: var(--warm-500); }
.cta-final-phone a { color: var(--white); }
.cta-final-phone a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--warm-500); }

/* =====================================================================
   16. CONTACTO Y FORMULARIO
   ===================================================================== */
.contact { background: var(--white); }

.contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    gap: clamp(26px, 3.5vw, 46px);
    align-items: start;
}

.form-card { padding: clamp(26px, 3.4vw, 42px); }
.form-card-head { margin-bottom: 26px; }
.form-card-head h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .35em; }
.form-card-head p { color: var(--ink-600); font-size: .95rem; margin: 0; }

.form-alert {
    padding: 15px 18px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    margin-bottom: 22px;
    border: 1px solid transparent;
}
.form-alert.is-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.form-alert.is-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label {
    font-size: .855rem;
    font-weight: 600;
    color: var(--ink-800);
    font-family: var(--ff-head);
}
.req { color: var(--red-500); }

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-sm);
    color: var(--ink-900);
    font-size: .94rem;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    appearance: none;
}
.form-field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' 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 14px center;
    background-size: 18px;
    padding-right: 44px;
}
.form-field textarea { resize: vertical; min-height: 118px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-500); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(3, 114, 185, .18);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--red-500);
    background: #fff7f8;
}
.field-error {
    font-size: .8rem;
    color: var(--red-500);
    min-height: 0;
    font-weight: 500;
}
.field-error:empty { display: none; }

.form-consent .checkbox {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    font-size: .875rem;
    color: var(--ink-600);
}
.checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--blue-700);
    border-radius: 5px;
    cursor: pointer;
}

.form-actions { display: grid; gap: 12px; margin-top: 6px; }
.form-privacy {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    font-size: .8rem;
    color: var(--ink-500);
}
.form-privacy .icon { color: var(--blue-600); }
.is-submitting { opacity: .72; pointer-events: none; }

/* Columna lateral de contacto */
.contact-aside { display: grid; gap: 20px; }
.contact-cards { display: grid; gap: 12px; }
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--blue-200); box-shadow: var(--sh-sm); }
.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--blue-50);
    color: var(--blue-700);
    flex: 0 0 auto;
}
.contact-card-icon-wa { background: #e7f9ee; color: var(--green-600); }
.contact-card small {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-weight: 600;
    margin-bottom: 2px;
}
.contact-card a, .contact-card span {
    font-family: var(--ff-head);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-900);
    line-height: 1.45;
}
.contact-card a:hover { color: var(--blue-700); }

.contact-social {
    padding: 20px 22px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
}
.contact-social h3 { font-size: .95rem; margin-bottom: 14px; }

.contact-cta {
    padding: 24px 24px 26px;
    background: var(--grad-deep);
    border-radius: var(--r-lg);
    color: var(--white);
    box-shadow: var(--sh-lg);
}
.contact-cta h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: .6em;
}
.contact-cta h3 .icon { color: var(--warm-500); }
.contact-cta p { font-size: .92rem; margin-bottom: 18px; }

/* =====================================================================
   17. FOOTER
   ===================================================================== */
.site-footer {
    position: relative;
    background: var(--blue-950);
    color: var(--white);
    overflow: hidden;
}
.footer-glow {
    position: absolute;
    top: -180px;
    left: 50%;
    width: 900px;
    height: 400px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .06), transparent 68%); /* más luz bajaría el blanco de 5,11 a menos de 4,5:1 */
    pointer-events: none;
}
.footer-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.35fr;
    gap: clamp(26px, 3.4vw, 48px);
    padding: clamp(52px, 6vw, 82px) 0 clamp(36px, 4vw, 52px);
}
.footer-brand { max-width: 380px; }
.footer-description { margin: 20px 0 22px; font-size: .91rem; line-height: 1.7; }
.footer-title {
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 18px;
}
.footer-links { display: grid; gap: 11px; }
.footer-links a { font-size: .9rem; color: var(--white); }
.footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--warm-500); padding-left: 4px; }
.footer-contact { display: grid; gap: 13px; }
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .9rem;
    line-height: 1.55;
}
.footer-contact .icon { color: var(--warm-500); margin-top: 3px; flex: 0 0 auto; }
.footer-contact a { color: var(--white); }
.footer-contact a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--warm-500); }

.footer-bottom {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .28);
    padding: 22px 0;
}
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .82rem;
}
.footer-bottom p { margin: 0; }
.footer-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--white); }
.footer-meta .icon { color: var(--warm-500); }

/* =====================================================================
   18. ELEMENTOS FLOTANTES
   ===================================================================== */
/* Botón flotante de WhatsApp: un círculo con el logo en blanco.
   OJO con el color del icono: usa currentColor, así que sobre el verde
   profundo (#1a7f4b) un icono oscuro daría 2,8:1. En blanco da 5,02:1. */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 140;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: var(--green-700);
    color: var(--white);
    border-radius: var(--r-full);
    box-shadow: 0 16px 34px -14px rgba(26, 127, 75, .85), 0 4px 12px rgba(6, 51, 27, .18);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
                opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid rgba(37, 211, 102, .45);
    animation: waPulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes waPulse {
    0%   { transform: scale(.92); opacity: .85; }
    70%  { transform: scale(1.14); opacity: 0; }
    100% { transform: scale(1.14); opacity: 0; }
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.03); background: var(--green-800); color: #ffffff; }
.whatsapp-float-icon { display: inline-flex; }
/* Globo que aparece al pasar el cursor. El botón es un círculo, así que la
   flecha se centra respecto a su eje (el centro está a 29 px del borde). */
.whatsapp-float-hover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    padding: 9px 15px;
    background: var(--blue-900);
    color: var(--white);
    border-radius: var(--r-sm);
    font-size: .82rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    box-shadow: var(--sh-md);
}
.whatsapp-float-hover::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 26px;
    border: 6px solid transparent;
    border-top-color: var(--blue-900);
}
.whatsapp-float:hover .whatsapp-float-hover { opacity: 1; transform: translateY(0); }

.to-top {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 130;
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: 50%;
    color: var(--blue-800);
    box-shadow: var(--sh-md);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
                color var(--dur) var(--ease), opacity var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}
/* Solo se muestra cuando la clase .is-visible está presente (scroll). */
.to-top.is-visible { display: inline-flex; }
.to-top:hover { transform: translateY(-4px); background: var(--blue-700); color: var(--white); }

/* =====================================================================
   19. ANIMACIONES DE APARICIÓN
   ===================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* =====================================================================
   20. RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
    .hero-float-a { left: -2%; }
    .hero-float-b { right: 0; }
    .coverage-figure { left: 0; }
    .professional-badge { right: 0; }
}

@media (max-width: 1080px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .mobile-nav { display: block; }
    .header-wa { display: none; }

    .hero-inner { grid-template-columns: 1fr; gap: 44px; }
    .hero-visual { max-width: 620px; }
    .hero-float-a { left: auto; right: 4%; top: 4%; }
    .hero-float-b { right: 6%; bottom: 4%; }

    .problem-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid .service-card { grid-column: span 6; }
    .services-grid .service-card-lg { grid-column: span 6; }

    .diagnostic-inner { grid-template-columns: 1fr; gap: 48px; }
    .diagnostic-visual { max-width: 520px; margin: 0 auto; }
    .diagnostic-figure { right: 0; bottom: -6%; width: 46%; }

    .process-track { grid-template-columns: repeat(3, 1fr); gap: 32px 18px; }
    .process-track::before { display: none; }

    .coverage-inner,
    .professional-inner,
    .complementary-inner,
    .contact-inner { grid-template-columns: 1fr; }

    .complementary-inner { gap: 30px; }
    .coverage-visual { max-width: 620px; }
    .coverage-figure { left: auto; right: 0; }
    .professional-visual { max-width: 460px; margin: 0 auto; }
    .benefits-grid .benefit-card { grid-column: span 3; }

    .footer-inner { grid-template-columns: repeat(2, 1fr); }
    .footer-brand { max-width: none; }
}

@media (max-width: 900px) {
    :root { --header-h: 70px; }

    .section-head-split { flex-direction: column; align-items: flex-start; }
    .hero-stats { grid-template-columns: 1fr; }
    .hero-stats li { border-right: 0; border-bottom: 1px solid var(--ink-200); }
    .hero-stats li:last-child { border-bottom: 0; }

    .needs-grid { grid-template-columns: repeat(2, 1fr); }
    .need-card-1, .need-card-2, .need-card-3,
    .need-card-4, .need-card-5, .need-card-6 { grid-column: span 1; }

    .benefit-card-featured {
        grid-column: span 6;
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .benefit-card { grid-column: span 3; }
    .benefits-cta { flex-direction: column; align-items: flex-start; }
}

/* Teléfonos: la cabecera queda solo con el logotipo y el botón de menú.
   El botón "Solicitar diagnóstico" se conserva dentro del panel del menú,
   y en tablet (768 px o más) y escritorio sigue visible en la cabecera. */
@media (max-width: 767px) {
    .header-cta { display: none; }
}

@media (max-width: 720px) {
    .problem-grid { grid-template-columns: 1fr; }
    .services-grid .service-card,
    .services-grid .service-card-lg { grid-column: span 12; }
    .services-grid .service-card-lg .service-media { aspect-ratio: 16 / 10; }

    .process-track { grid-template-columns: 1fr; gap: 0; }
    .process-step {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 0 18px;
        text-align: left;
        padding-bottom: 30px;
        position: relative;
    }
    .process-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 28px;
        top: 58px;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, var(--blue-200), transparent);
    }
    .process-node { margin-bottom: 0; grid-row: span 2; }
    .process-body { grid-column: 2; padding-top: 6px; }
    .process-number { text-align: left; }

    .diagnostic-list { grid-template-columns: 1fr; }
    .diagnostic-figure { position: static; width: 100%; margin-top: 26px; }
    .diag-ring { width: min(280px, 84%); }

    .form-row { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }

    .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .whatsapp-float-icon svg { width: 26px; height: 26px; }
    .whatsapp-float-hover { right: -2px; }
    .to-top { right: 18px; bottom: 84px; width: 42px; height: 42px; }
}

@media (max-width: 560px) {
    .hero { padding-top: 40px; }
    .hero-actions .btn { width: 100%; }
    .hero-float { padding: 12px 15px; }
    .hero-float-a { position: static; margin-top: 16px; max-width: none; }
    .hero-float-b { display: none; }
    .hero-location { width: 100%; }

    .needs-grid { grid-template-columns: 1fr; }
    .benefit-card,
    .benefit-card-featured { grid-column: span 6; }
    .benefits-cta { padding: 20px; }
    .benefits-cta .btn { width: 100%; }

    .coverage-figure { position: static; width: 100%; margin-top: 18px; }
    .professional-badge { position: static; max-width: none; margin-top: 18px; }
    .professional-frame { aspect-ratio: 4 / 4; }

    .cta-final-actions .btn { width: 100%; }
    .diag-ring-center strong { font-size: 2.5rem; }

    .chip-list li { font-size: .83rem; padding: 10px 15px; }
}

/* =====================================================================
   21. ACCESIBILIDAD Y PREFERENCIAS
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    .site-header, .whatsapp-float, .to-top, .mobile-nav, .hero-bg, .cta-final-bg { display: none !important; }
    body { color: #000; }
    .section { padding: 24px 0; break-inside: avoid; }
}

/* =====================================================================
   PANTALLA DE INSTALACIÓN
   ===================================================================== */
.setup-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--grad-deep);
    padding: 32px 20px;
}
.setup-card {
    width: 100%;
    max-width: 620px;
    padding: clamp(28px, 4vw, 46px);
    background: var(--white);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
}
.setup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--blue-50);
    color: var(--blue-700);
    margin-bottom: 20px;
}
.setup-card h1 { font-size: 1.6rem; margin-bottom: .5em; }
.setup-card ol, .setup-card ul { margin: 0 0 18px 1.15em; }
.setup-card ol { list-style: decimal; }
.setup-card ul { list-style: disc; }
.setup-card li { margin-bottom: 9px; color: var(--ink-600); }
.setup-card code {
    background: var(--ink-100);
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: .87em;
    color: var(--blue-800);
}
.setup-note { font-size: .87rem; color: var(--ink-500); margin: 0; }