/* =====================================================================
   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 de la marca Urbanización Tierra Grata Camino Verde
       Verde profundo #1C4842 · Arena #E4CC82 · Blanco predominante
       Los nombres históricos (--blue-*, --amber-*, --warm-*) se conservan
       para no divergir del Core, pero guardan los colores de esta marca.
       Contraste verificado:
         blanco sobre #1C4842  → 10,2:1  (AA y AAA)
         texto oscuro sobre #E4CC82 → 9,6:1 (AA y AAA)
         #1C4842 como texto sobre blanco → 10,2:1
       ----------------------------------------------------------------- */
    --brand-900: #12302a;   /* verde más profundo: hover de botones */
    --brand-800: #163a34;
    --brand-700: #1c4842;   /* OFICIAL: verde de la marca */
    --brand-600: #246057;
    --brand-500: #2f7a6c;   /* acentos claros e iconos */
    --brand-100: #cddedb;   /* bordes suaves */
    --brand-50:  #eef4f2;   /* fondos de sección */

    --sand-600: #cbb35f;    /* hover del botón arena */
    --sand-500: #e4cc82;    /* OFICIAL: arena */
    --sand-100: #f7efd8;    /* fondos cálidos suaves */

    --blue-950: var(--brand-700);
    --blue-900: var(--brand-700);
    --blue-800: var(--brand-700);
    --blue-700: var(--brand-700);
    --blue-750: var(--brand-900);   /* hover: blanco encima 14,6:1 */
    --blue-600: var(--brand-600);
    --blue-500: var(--brand-500);
    --blue-200: var(--brand-100);
    --blue-100: var(--brand-100);
    --blue-50:  var(--brand-50);

    /* Neutros: gris muy oscuro para el texto sobre fondos claros */
    --ink-900: #20272a;   /* texto principal (13,4:1 sobre blanco) */
    --ink-800: #2e3639;
    --ink-700: #444c4f;
    --ink-600: #5b6366;
    --ink-500: #6f7779;
    --ink-400: #9aa1a3;
    --ink-300: #c9cfd0;
    --ink-200: #e3e7e7;
    --ink-100: #f1f4f3;
    --ink-50:  #f7f5ef;   /* hueso: fondo claro alterno de la marca */
    --white:   #ffffff;

    /* Acento: la arena de la marca (texto oscuro encima, 9,6:1) */
    --amber-600: var(--sand-600);
    --amber-500: var(--sand-500);
    --amber-400: var(--sand-500);
    --amber-100: var(--sand-100);

    /* Acento cálido: el mismo dorado, para marcadores y detalles */
    --warm-500: var(--sand-500);
    --warm-100: var(--sand-100);

    /* Semánticos */
    /* Verde de WhatsApp. El brillante (#25D366) NO admite texto blanco
       encima: da 1,98: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,02:1 (AA)
         #12653a con texto blanco → 7,12: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:   #b3261e;  /* error: sobre blanco 6,6:1 */

    /* Gradientes */
    --grad-blue: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 100%);
    --grad-deep: var(--brand-700);
    --grad-accent: linear-gradient(135deg, var(--sand-500) 0%, var(--sand-600) 100%);
    --grad-soft: linear-gradient(180deg, var(--white) 0%, var(--brand-50) 100%);

    /* Radios — redondeados, con aire natural (menos geométricos que el Core) */
    --r-xs: 8px;
    --r-sm: 14px;
    --r-md: 22px;
    --r-lg: 30px;
    --r-xl: 40px;
    --r-full: 999px;

    /* Sombras — suaves y verdosas, nunca azuladas */
    --sh-xs: 0 1px 2px rgba(32, 39, 42, .05);
    --sh-sm: 0 3px 10px rgba(32, 39, 42, .06), 0 12px 26px -16px rgba(28, 72, 66, .18);
    --sh-md: 0 14px 38px -18px rgba(28, 72, 66, .3), 0 3px 10px rgba(32, 39, 42, .05);
    --sh-lg: 0 30px 64px -30px rgba(28, 72, 66, .34), 0 8px 22px -14px rgba(32, 39, 42, .12);
    --sh-xl: 0 44px 96px -36px rgba(28, 72, 66, .42);

    /* Tipografía — TIP-06 del catálogo:
       · Fraunces (serif con carácter, natural y elegante) para títulos.
       · Work Sans (limpia y muy legible) para el texto.
       Ambas de Google Fonts, licencia SIL OFL. */
    --ff-head: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --ff-body: "Work Sans", "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(--ink-900); color: var(--ink-900); box-shadow: 0 12px 26px -14px rgba(203, 179, 95, .75); }
.btn-accent:hover { color: var(--ink-900); }
/* Botón arena: es el acento de esta marca. Lleva texto oscuro encima
   (9,6:1) porque el blanco sobre la arena daría 1,6:1. */
.btn-sand      { --btn-bg: var(--sand-500); --btn-fg: var(--ink-900); --btn-border: var(--sand-500); box-shadow: 0 12px 26px -14px rgba(203, 179, 95, .8); }
.btn-sand:hover { --btn-bg: var(--sand-600); --btn-fg: var(--ink-900); }
.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; }