/* ═══════════════════════════════════════════════════════════════════════════
   v2.css — Sistema visual del sitio — Consulado de El Salvador
   Mobile-first. Tokens, cabecera, pie, botones y bloques de la home.
   La cargan todas las páginas; lo propio de cada plantilla vive en
   ficha.css (consulados y guías) y styles.css (bloques heredados).
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Las clases mantienen el prefijo .ec-: es el nombre del sistema visual
   compartido con consulado-ecuatoriano.com, no una marca de pais. Lo unico
   que cambia entre sitios son los tokens de color de aqui debajo.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
    --ec-ink:        #0d1b2e;   /* titulares */
    --ec-body:       #45506a;   /* texto corrido */
    --ec-muted:      #7b869c;   /* etiquetas, apoyos */
    --ec-brand:      #0047A9;   /* acción — azul de la bandera salvadoreña */
    --ec-brand-dark: #003480;   /* hover / franjas */
    --ec-brand-soft: #eaf1fb;   /* fondos de acento */
    --ec-brand-line: #cfdff2;
    /* El azul de Guatemala (#003F87) y el de El Salvador (#0047A9) son casi
       el mismo color. Sin algo más, los dos sitios se confundirían. El
       amarillo de la bandera —que Guatemala no usa en ningún sitio— es lo
       que separa las dos marcas: subrayado de sección, pestaña activa del
       menú y contadores de la home. */
    --ec-accent:     #FFCD00;
    --ec-accent-ink: #4a3b00;   /* texto legible sobre el amarillo */
    --ec-cream:      #f4f7fb;   /* fondo de página */
    --ec-line:       #e2e8f2;
    --ec-r-sm:       10px;
    --ec-r:          14px;
    --ec-r-lg:       20px;
    --ec-shadow-1:   0 1px 2px rgba(13,27,46,.05);
    --ec-shadow-2:   0 10px 30px rgba(13,27,46,.07);
    --ec-shadow-3:   0 18px 48px rgba(13,27,46,.14);
    --ec-pad:        clamp(20px, 3.5vw, 64px);
    /* Ancho útil de la página. Los 1400px fijos del sistema dejaban casi 300px
       de banda a cada lado en un monitor grande antes siquiera de empezar el
       relleno, y el hero se leía como una isla en medio de la pantalla. Con el
       tope en vw el contenido acompaña a la ventana y el margen no crece sin
       parar; el 1800 evita que en pantallas muy anchas las líneas de texto se
       hagan ilegibles de largas. */
    --ec-max:        min(1800px, 100%);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ec-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ec-cream);
    color: var(--ec-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* `clip` y no `hidden`: con hidden el body pasa a ser contenedor de scroll
       (overflow-y se resuelve en auto) y eso anula el position:sticky de la
       barra de navegación, que se iba con el scroll. */
    overflow-x: clip;
}
.ec-body img, .ec-body svg { display: block; max-width: 100%; }
/* Iconos en línea. Sustituyen a los emojis del contenido: los dibujaba el
   sistema operativo de cada visitante, con forma y color distintos en Android,
   Windows e iPhone. Estos heredan el color del texto que acompañan. */
.ec-body .sv-ico {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -.15em;
    margin-right: .3em;
}
.ec-body a { color: inherit; text-decoration: none; }
.ec-body h1, .ec-body h2, .ec-body h3, .ec-body h4 {
    color: var(--ec-ink);
    margin: 0;
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 700;
}
/* Selector de tipo, no `.ec-body p`: con la clase delante esta regla le ganaba
   por especificidad a cualquier margen puesto por clase sobre un <p>, y varios
   del diseño se perdían sin dar la cara. */
p { margin: 0; }
.ec-body button { font: inherit; }
.ec-body :focus-visible {
    outline: 2px solid var(--ec-brand);
    outline-offset: 2px;
    border-radius: 6px;
}
.ec-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.ec-wrap {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: 0 var(--ec-pad);
}
/* Solo el eje vertical: como atajo, `padding: 40px 0` borraba el relleno
   lateral de .ec-wrap en los bloques que llevan las dos clases, y en movil
   el contenido quedaba pegado a los bordes de la pantalla. */
.ec-section { padding-top: 40px; padding-bottom: 40px; }
.ec-section-head { margin-bottom: 20px; }
.ec-section-head p { margin-top: 8px; font-size: 15px; color: var(--ec-muted); max-width: 62ch; }

/* ── Encabezados y títulos ───────────────────────────────────────────────────
   Los h1/h2/h3 llevan los mismos textos que la home actual y se pintan en
   pequeño, como antetítulo: el esquema de la página no cambia al rediseñarla.
   El titular grande de cada sección es un <p>, porque es lenguaje de producto,
   no la etiqueta de la sección. */
.ec-body .ec-seo {
    font-size: 12.5px; font-weight: 700; line-height: 1.35;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--ec-brand);
    margin: 0 0 7px;
}
.ec-body .ec-title {
    font-size: clamp(21px, 3.6vw, 26px); font-weight: 700;
    line-height: 1.18; letter-spacing: -.02em; color: var(--ec-ink);
}
.ec-body .ec-subtitle {
    font-size: 18px; font-weight: 700;
    line-height: 1.2; letter-spacing: -.02em; color: var(--ec-ink);
}
/* Encabezado que solo etiqueta la rejilla que viene detrás. */
.ec-seo--suelto { margin: 0 0 12px; }
.ec-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ec-brand);
}

/* Chispa de IA: mismo gesto en badge, botones y titular. */
.ec-spark { flex: 0 0 auto; color: var(--ec-brand); }

/* ── Franja superior ──────────────────────────────────────────────────────── */
.ec-topbar {
    background: var(--ec-brand-soft);
    border-bottom: 1px solid var(--ec-brand-line);
    font-size: 12.5px;
    color: #2b4d78;
}
.ec-topbar-inner {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: 7px var(--ec-pad);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 18px;
}
.ec-topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.ec-topbar-sep { display: none; color: var(--ec-brand-line); }
@media (min-width: 720px) { .ec-topbar-sep { display: inline; } }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
/* El <header> no genera caja: un elemento sticky solo se pega mientras su padre
   está a la vista, y el header mide lo que ocupa la propia barra, así que la
   soltaba de inmediato. Sin caja, la barra se ancla al documento y la franja
   superior se va con el scroll, que es lo que toca: informa una vez. */
.ec-body > header { display: contents; }

.ec-nav {
    position: sticky; top: 0;
    /* Por encima de los controles del mapa: Leaflet apila su contenedor de
       controles en 1000, y con 900 los botones de zoom pasaban por delante de
       la barra al desplazarse. El asistente sigue por encima de todo. */
    z-index: 1200;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ec-line);
}
.ec-nav-inner {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: 12px var(--ec-pad);
    display: flex;
    align-items: center;
    gap: 16px;
}
.ec-brand { display: inline-flex; align-items: center; gap: 11px; }
/* La marca es la propia imagen: trae su circulo, asi que no lleva fondo. */
.ec-brand-logo {
    width: 40px; height: 40px; flex: 0 0 auto;
    object-fit: contain;
}
.ec-brand-name {
    font-size: 17px; font-weight: 700; color: var(--ec-ink);
    line-height: 1.1; letter-spacing: -.02em;
}
.ec-brand-name span { display: block; font-weight: 600; color: var(--ec-body); }

.ec-nav-links { display: none; }
@media (min-width: 1000px) {
    .ec-nav-links {
        display: flex; align-items: center; gap: 30px;
        margin: 0 auto; padding: 0; list-style: none;
    }
    .ec-nav-links > li { position: relative; }
    .ec-nav-links a, .ec-nav-drop-btn {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 15px; font-weight: 500; color: var(--ec-body);
        background: none; border: 0; padding: 6px 0; cursor: pointer;
    }
    .ec-nav-links a:hover, .ec-nav-drop-btn:hover { color: var(--ec-brand); }
    .ec-nav-drop {
        position: absolute; top: calc(100% + 10px); left: -14px;
        min-width: 232px; padding: 8px;
        background: #fff; border: 1px solid var(--ec-line);
        border-radius: var(--ec-r); box-shadow: var(--ec-shadow-2);
        list-style: none; margin: 0;
        display: none;
    }
    .ec-nav-drop.is-open { display: block; }
    .ec-nav-drop a {
        display: block; padding: 9px 12px; border-radius: var(--ec-r-sm);
        font-size: 14.5px;
    }
    .ec-nav-drop a:hover { background: var(--ec-brand-soft); }
    /* Las listas largas —25 sedes, 16 trámites— no caben en una columna sin
       salirse de la pantalla, así que se abren en dos. */
    .ec-nav-drop--cols {
        min-width: 452px;
        columns: 2;
        column-gap: 6px;
    }
    .ec-nav-drop--cols li { break-inside: avoid; }
}
.ec-nav-cta { margin-left: auto; }
@media (min-width: 1000px) { .ec-nav-cta { margin-left: 0; } }

/* En móvil la barra solo aguanta marca, asistente y menú: el cambio de idioma
   vive dentro del menú, y por debajo de 420px el botón deja de decir "Iniciar"
   para no empujar al resto fuera de la pantalla. */
@media (max-width: 999px) {
    /* Dos clases mas la del cuerpo: con menos, `.ec-body .ec-link` --- que fija
       display y va despues en la hoja --- ganaba por orden y el enlace de idioma
       seguia en la barra. */
    .ec-body .ec-link.ec-nav-lang { display: none; }
}
@media (max-width: 419px) {
    .ec-nav-cta { padding: 9px 13px; font-size: 13.5px; }
    .ec-brand-name { font-size: 15px; }
}

.ec-burger {
    margin-left: 4px; width: 42px; height: 42px;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--ec-line);
    border-radius: var(--ec-r-sm); cursor: pointer; color: var(--ec-ink);
}
@media (min-width: 1000px) { .ec-burger { display: none; } }

/* Menú móvil desplegable bajo la barra */
/* ── Panel de navegación en móvil ────────────────────────────────────────────
   Entra desde la derecha y ocupa la pantalla. El desplegable anterior colgaba
   de la barra y con 45 sedes dentro había que hacer scroll dentro de un cajón
   de 400px de alto, con la página moviéndose por detrás.
   ────────────────────────────────────────────────────────────────────────── */
.ec-panel-fondo {
    position: fixed; inset: 0;
    background: rgba(13, 27, 46, .45);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1205;
}
.ec-panel-fondo.is-open { opacity: 1; pointer-events: auto; }

.ec-mobile-menu {
    position: fixed; top: 0; right: 0;
    width: min(420px, 100%);
    /* Altura explícita y no top/bottom: dvh sigue a la barra del navegador
       móvil cuando aparece y desaparece, que es cuando el pie con el botón del
       asistente se salía de la pantalla. */
    height: 100dvh;
    background: #fff;
    display: flex; flex-direction: column;
    /* Fuera de pantalla, no display:none: sin transición desde ninguna parte el
       panel aparecería de golpe y no se entendería de dónde sale. */
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2, .9, .3, 1);
    box-shadow: -18px 0 48px rgba(13, 27, 46, .18);
    /* Por encima de la barra, que está en 1200 para ganar a los controles del
       mapa. Con menos, la cabecera se colaba por delante del panel y tapaba el
       buscador. */
    z-index: 1210;
    visibility: hidden;
}
.ec-mobile-menu.is-open { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .ec-mobile-menu { transition: none; }
}
@media (min-width: 1000px) {
    .ec-mobile-menu, .ec-mobile-menu.is-open,
    .ec-panel-fondo, .ec-panel-fondo.is-open { display: none; }
}

.ec-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--ec-line);
    flex: 0 0 auto;
}
.ec-panel-title { font-size: 20px; font-weight: 800; color: var(--ec-ink); letter-spacing: -.02em; }
.ec-panel-close {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 0; border-radius: 50%;
    color: var(--ec-brand); cursor: pointer;
}
.ec-panel-close:hover { background: var(--ec-brand-soft); }

/* El cuerpo es lo único que se desplaza: la cabecera y el pie se quedan
   quietos, así el botón del asistente sigue a mano con el menú abierto. */
.ec-panel-body {
    flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 18px 18px;
}

/* ── Desplegable de sedes ────────────────────────────────────────────────────
   Con 45 sedes, una caja de búsqueda vacía no dice qué se puede escribir. Al
   pulsarla se abre la lista entera, y escribir la filtra: sirve tanto a quien
   sabe el nombre de su ciudad como a quien viene a ver cuáles hay.
   ────────────────────────────────────────────────────────────────────────── */
.ec-combo { position: relative; }
.ec-combo-campo {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 8px 11px 14px;
    border: 1px solid var(--ec-line); border-radius: 999px;
    background: #fff; color: var(--ec-muted);
    cursor: text;
}
.ec-combo.is-open .ec-combo-campo,
.ec-combo-campo:focus-within {
    border-color: var(--ec-brand); color: var(--ec-brand);
    box-shadow: 0 0 0 3px var(--ec-brand-soft);
}
/* El foco se marca en el contenedor, no en el <input>: la regla general dibuja
   un rectángulo redondeado de 6px por dentro de la pastilla, y quedaban dos
   bordes azules encajados uno dentro de otro. El campo entero sigue
   señalándose, así que no se pierde nada para quien navega con teclado. */
.ec-combo-campo input:focus,
.ec-combo-campo input:focus-visible { outline: none; }
.ec-combo-campo input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; outline: none;
    font-size: 15px; color: var(--ec-ink);
}
.ec-combo-btn {
    display: grid; place-items: center;
    width: 32px; height: 32px; padding: 0;
    background: none; border: 0; border-radius: 50%;
    color: var(--ec-muted); cursor: pointer; flex: 0 0 auto;
}
.ec-combo-chev { transition: transform .2s ease; }
.ec-combo.is-open .ec-combo-chev { transform: rotate(180deg); color: var(--ec-brand); }

.ec-combo-lista {
    list-style: none; margin: 8px 0 0; padding: 4px;
    border: 1px solid var(--ec-line); border-radius: var(--ec-r);
    background: #fff;
    box-shadow: var(--ec-shadow-2);
    /* Una lista de 45 no puede empujar el resto del menú fuera de la vista:
       se desplaza por dentro y deja ver que hay más. */
    max-height: 46vh;
    overflow-y: auto; overscroll-behavior: contain;
}
.ec-combo-lista a {
    display: block; padding: 11px 12px;
    border-radius: var(--ec-r-sm);
    font-size: 15px; color: var(--ec-body);
}
.ec-combo-lista li.is-activo a,
.ec-combo-lista a:hover { background: var(--ec-brand-soft); color: var(--ec-brand-dark); }
.ec-combo-lista a[aria-current="page"] {
    color: var(--ec-brand); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ec-accent);
}
.ec-combo-todas { border-top: 1px solid var(--ec-line); margin-top: 4px; padding-top: 4px; }
.ec-combo-vacio { padding: 12px; font-size: 14px; color: var(--ec-muted); }

/* Atajos a las sedes más buscadas. Sin estas reglas el navegador los pinta
   como botones del sistema —grises y cuadrados— y desentonan con todo lo
   demás. */
.ec-panel-chips {
    display: flex; gap: 7px; margin: 10px 0 2px;
    /* En una fila con desplazamiento, no partidos en dos: "Doral" caía solo en
       una segunda línea y parecía otra cosa distinta de los tres de arriba. */
    flex-wrap: nowrap; overflow-x: auto;
    min-width: 0; scrollbar-width: none;
    padding-bottom: 2px;
}
.ec-panel-chips::-webkit-scrollbar { display: none; }
.ec-panel-chip { flex: 0 0 auto; white-space: nowrap; }
.ec-panel-chip {
    display: inline-flex; align-items: center;
    padding: 7px 14px;
    text-decoration: none;
    background: var(--ec-brand-soft);
    border: 1px solid var(--ec-brand-line);
    border-radius: 999px;
    -webkit-appearance: none; appearance: none;
    font: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--ec-brand-dark);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.ec-panel-chip:hover { background: #fff; border-color: var(--ec-brand); }
.ec-panel-chip:active { transform: translateY(1px); }

.ec-panel-list { list-style: none; margin: 12px 0 0; padding: 0; }
.ec-panel-list > li { border-bottom: 1px solid var(--ec-line); }
.ec-panel-list > li:last-child { border-bottom: 0; }
.ec-panel-list > li > a,
.ec-panel-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 15px 2px;
    background: none; border: 0; text-align: left;
    font-size: 16px; font-weight: 600; color: var(--ec-ink);
    cursor: pointer;
}
.ec-panel-list > li > a:hover, .ec-panel-toggle:hover { color: var(--ec-brand); }
.ec-panel-chev { color: var(--ec-muted); flex: 0 0 auto; transition: transform .2s ease; }
.ec-panel-toggle[aria-expanded="true"] .ec-panel-chev { transform: rotate(180deg); color: var(--ec-brand); }

.ec-panel-sub { display: none; list-style: none; margin: 0 0 12px; padding: 0; }
.ec-panel-grupo.is-open .ec-panel-sub { display: block; }
.ec-panel-sub li { border-top: 1px solid var(--ec-line); }
.ec-panel-sub a {
    display: block; padding: 12px 14px;
    font-size: 15px; color: var(--ec-body);
    background: var(--ec-cream);
}
.ec-panel-sub a:hover { color: var(--ec-brand); }
.ec-panel-sub a[aria-current="page"] {
    color: var(--ec-brand); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ec-accent);
}
.ec-panel-vacio { padding: 12px 14px; font-size: 14px; color: var(--ec-muted); background: var(--ec-cream); }

.ec-panel-foot {
    flex: 0 0 auto;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ec-line);
    background: #fff;
}
.ec-panel-foot .ec-btn { gap: 8px; }
.ec-panel-lang {
    display: block; text-align: center;
    margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ec-brand);
}

.ec-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px;
    border-radius: 999px; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ec-body .ec-btn--primary { background: var(--ec-brand); color: #fff; box-shadow: var(--ec-shadow-1); }
.ec-body .ec-btn--primary:hover { background: var(--ec-brand-dark); }
.ec-btn--primary:active { transform: translateY(1px); }
.ec-body .ec-btn--ghost { background: #fff; color: var(--ec-ink); border-color: var(--ec-line); }
.ec-body .ec-btn--ghost:hover { border-color: var(--ec-brand); color: var(--ec-brand); }
.ec-btn--sm { padding: 9px 15px; font-size: 14px; }
.ec-btn--block { width: 100%; }
.ec-body .ec-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14.5px; font-weight: 600; color: var(--ec-brand);
}
.ec-body .ec-link:hover { color: var(--ec-brand-dark); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ec-hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 88% 8%, #dce9f7 0%, rgba(220,233,247,0) 60%),
        linear-gradient(180deg, #f8fbff 0%, var(--ec-cream) 100%);
    overflow: hidden;
}
.ec-hero-inner {
    display: grid; gap: 8px;
    max-width: var(--ec-max); margin: 0 auto;
}
.ec-hero-inner > * { min-width: 0; }
.ec-hero-copy { padding: 22px var(--ec-pad) 8px; min-width: 0; }
@media (min-width: 1000px) {
    /* La foto queda dentro del contenedor, no sangra hasta el borde de la
       ventana: así respira igual que el resto de la página. */
    .ec-hero-inner { grid-template-columns: 48% 52%; align-items: stretch; gap: 0; padding-right: var(--ec-pad); }
    .ec-hero-copy {
        display: flex; flex-direction: column; justify-content: center;
        padding: 24px 12px 32px var(--ec-pad);
    }
}
/* Los cortes de línea del titular son parte del diseño, no del azar del ancho
   disponible: en móvil se dejan al flujo normal. */
.ec-nb { display: none; }
/* Desde 1100px, no desde 1000: por debajo la columna no da para la tercera
   línea completa y el corte a mano dejaba una huérfana. Ahí el texto fluye. */
@media (min-width: 1100px) { .ec-nb { display: inline; } }
.ec-hero-badge {
    display: inline-flex; align-items: center; align-self: flex-start; gap: 8px;
    padding: 6px 13px 6px 10px; margin-bottom: 22px;
    background: #fff; border: 1px solid var(--ec-brand-line);
    border-radius: 999px; box-shadow: var(--ec-shadow-1);
    font-size: 13px; font-weight: 600; color: #2b4d78;
}
.ec-hero-title {
    /* 580 y no 560: "con ayuda de nuestro asistente" mide 567px al tamaño
       máximo, y con 560 se iba a una cuarta línea dejando "con" solo. El tamaño
       acompaña al ancho de ventana para que los tres cortes aguanten también en
       pantallas de escritorio pequeñas. */
    max-width: 580px;
    font-size: clamp(28px, 2.6vw, 37px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}
.ec-hero-title .ec-hl {
    color: var(--ec-brand);
    white-space: nowrap;
}
.ec-hero-title .ec-spark { display: inline; vertical-align: .12em; }
.ec-hero-sub {
    margin-top: 15px; max-width: 46ch;
    font-size: clamp(14.5px, 1.9vw, 15.5px);
}

/* Buscador del asistente */
.ec-ask {
    min-width: 0;
    margin-top: 20px; max-width: 620px;
    background: #fff;
    border: 1.5px solid var(--ec-brand);
    border-radius: 16px;
    padding: 12px 13px;
    box-shadow: var(--ec-shadow-2);
}
.ec-ask-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 620px) { .ec-ask-row { flex-direction: row; align-items: center; } }
.ec-ask-field { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ec-ask-field input {
    flex: 1; min-width: 0;
    border: 0; padding: 8px 0;
    font-size: 15.5px; color: var(--ec-ink);
    background: transparent;
}
.ec-ask-field input::placeholder { color: #94a0b5; }
.ec-ask-field input:focus { outline: none; }
.ec-ask-examples {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    margin-top: 11px; padding-top: 10px;
    border-top: 1px solid var(--ec-line);
}
.ec-ask-examples-label { font-size: 12.5px; color: var(--ec-muted); margin-right: 2px; }
.ec-chip {
    padding: 5px 11px;
    background: #fff; border: 1px solid var(--ec-line);
    border-radius: 999px; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--ec-body); white-space: nowrap;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.ec-chip:hover { border-color: var(--ec-brand); color: var(--ec-brand); background: var(--ec-brand-soft); }

/* Media del hero + tarjeta de resultado */
.ec-hero-media { position: relative; padding: 0 var(--ec-pad) 28px; }
@media (min-width: 1000px) { .ec-hero-media { padding: 0; } }
.ec-hero-photo {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--ec-r-lg);
    overflow: hidden;
}
@media (min-width: 1000px) {
    /* La foto llena la franja del hero, y su borde izquierdo se disuelve en el
       fondo con una máscara: un corte recto ahí partiría el hero en dos
       mitades pegadas. */
    .ec-hero-photo {
        aspect-ratio: auto; height: 100%; min-height: 430px;
        /* Los dos lados se disuelven en el fondo. Sin radio: con el borde
           difuminado no hay esquina que redondear. */
        border-radius: 0;
        -webkit-mask-image: linear-gradient(90deg,
            transparent 0, rgba(0,0,0,.65) 9%, #000 26%,
            #000 74%, rgba(0,0,0,.65) 91%, transparent 100%);
        mask-image: linear-gradient(90deg,
            transparent 0, rgba(0,0,0,.65) 9%, #000 26%,
            #000 74%, rgba(0,0,0,.65) 91%, transparent 100%);
    }
}
.ec-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

.ec-result {
    background: #fff;
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-r);
    box-shadow: var(--ec-shadow-3);
    overflow: hidden;
    margin-top: -34px;
    margin-left: auto; margin-right: auto;
    max-width: 340px;
    position: relative; z-index: 2;
}
@media (min-width: 1000px) {
    /* Se apoya sobre el lado derecho de la foto, alineada con su borde. */
    .ec-result {
        position: absolute; top: 50%; right: 0;
        transform: translateY(-50%);
        margin: 0; width: 296px; max-width: none;
    }
}
@media (min-width: 1180px) { .ec-result { width: 324px; } }
.ec-result-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: var(--ec-brand-dark); color: #fff;
    font-size: 12.5px; font-weight: 600;
}
.ec-result-tag {
    margin-left: auto;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #cfdcea;
}
.ec-result-body { padding: 13px; }
.ec-result-title { font-size: 15px; font-weight: 700; }
.ec-result-pill {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 10px 0 12px; padding: 4px 10px;
    background: var(--ec-brand-soft); color: #2b4d78;
    border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.ec-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ec-result-list li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--ec-body);
}
.ec-result-list svg { margin-top: 1px; color: var(--ec-brand); flex: 0 0 auto; }
.ec-result-box {
    margin-top: 13px; padding: 10px 12px;
    border: 1px solid var(--ec-line); border-radius: var(--ec-r-sm);
}
.ec-result-box-label { font-size: 11.5px; color: var(--ec-muted); }
.ec-result-cost {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 19px; font-weight: 700; color: var(--ec-ink);
}
.ec-result-cost small { font-size: 10.5px; font-weight: 500; color: var(--ec-muted); }
.ec-result-next {
    display: flex; align-items: center; gap: 10px;
    margin-top: 9px; padding: 10px 12px;
    border: 1px solid var(--ec-line); border-radius: var(--ec-r-sm);
}
.ec-result-next div { flex: 1; }
.ec-result-next .ec-result-box-label { display: block; }
.ec-result-next strong { font-size: 12.5px; color: var(--ec-ink); font-weight: 600; }

/* ── Pilares ──────────────────────────────────────────────────────────────── */
.ec-pillars { background: #fff; border-top: 1px solid var(--ec-line); border-bottom: 1px solid var(--ec-line); }
.ec-pillars-grid {
    display: grid; grid-template-columns: 1fr; gap: 0;
    max-width: var(--ec-max); margin: 0 auto; padding: 6px var(--ec-pad);
}
@media (min-width: 640px)  { .ec-pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ec-pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.ec-pillar {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ec-line);
}
.ec-pillar:last-child { border-bottom: 0; }
@media (min-width: 640px) {
    .ec-pillar { border-bottom: 0; border-right: 1px solid var(--ec-line); }
    .ec-pillar:nth-child(2n) { border-right: 0; }
    .ec-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--ec-line); }
}
@media (min-width: 1000px) {
    .ec-pillar { border-right: 1px solid var(--ec-line); border-bottom: 0; }
    .ec-pillar:nth-child(2n) { border-right: 1px solid var(--ec-line); }
    .ec-pillar:last-child { border-right: 0; }
    .ec-pillar:nth-child(-n+2) { border-bottom: 0; }
}
.ec-pillar-icon {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--ec-brand-line); border-radius: 12px;
    color: var(--ec-brand); background: #fbfcfe;
}
.ec-pillar-title { font-size: 15px; }
.ec-pillar p { margin-top: 4px; font-size: 13px; color: var(--ec-muted); }

/* ── Trámites + Cómo funciona ─────────────────────────────────────────────── */
.ec-duo { display: grid; gap: 40px; }
@media (min-width: 1060px) { .ec-duo { grid-template-columns: 1fr 1fr; gap: 48px; } }

.ec-tramites-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .ec-tramites-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .ec-tramites-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
.ec-tramite {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--ec-line);
    border-radius: var(--ec-r); overflow: hidden;
    box-shadow: var(--ec-shadow-1);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ec-tramite:hover {
    border-color: var(--ec-brand-line);
    transform: translateY(-2px);
    box-shadow: var(--ec-shadow-2);
}
.ec-tramite-img { aspect-ratio: 4 / 5; background: #fff; flex: 0 0 auto; }
/* Son fotos de producto sobre fondo blanco: recortarlas para llenar la tarjeta
   le cortaría los bordes al documento, así que se muestran enteras. */
.ec-tramite-img img { width: 100%; height: 100%; object-fit: contain; }
.ec-tramite-foot {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 10px 11px;
    /* Alto fijo: con el pie creciendo según el título —"Apostilla y
       legalización" ocupa dos líneas y "DUI salvadoreño" una— las imágenes de
       una misma fila acababan a alturas distintas. */
    min-height: 58px;
    margin-top: auto;
}
.ec-tramite-foot span { flex: 1; font-size: 13px; font-weight: 600; color: var(--ec-ink); line-height: 1.3; }
.ec-tramite-foot svg { color: var(--ec-muted); flex: 0 0 auto; }
.ec-tramite:hover .ec-tramite-foot svg { color: var(--ec-brand); }

.ec-steps { display: grid; gap: 6px; }
@media (min-width: 700px) {
    .ec-steps { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 4px; }
}
.ec-step { position: relative; text-align: center; padding: 12px 8px; }
.ec-step-icon {
    position: relative;
    width: 62px; height: 62px; margin: 0 auto 12px;
    display: grid; place-items: center;
    background: var(--ec-brand-soft); border-radius: 50%;
    color: var(--ec-brand-dark);
}
.ec-step-num {
    position: absolute; top: -4px; left: -4px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: var(--ec-brand); color: #fff;
    border: 2px solid #fff; border-radius: 50%;
    font-size: 12px; font-weight: 700;
}
.ec-step-title { font-size: 14.5px; }
.ec-step p { margin-top: 5px; font-size: 12.5px; color: var(--ec-muted); }
.ec-step-arrow { display: none; }
@media (min-width: 700px) {
    .ec-step-arrow {
        display: grid; place-items: center;
        color: #bcc9da; padding-top: 30px;
    }
    .ec-steps { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
}

/* ── Consulados ───────────────────────────────────────────────────────────── */
/* El buscador va arriba, junto al titular: es lo primero que se usa, y
   colgado en una columna lateral quedaba a media altura de la rejilla. */
.ec-consulados-head {
    display: grid; gap: 16px;
    margin-bottom: 20px;
}
@media (min-width: 860px) {
    .ec-consulados-head {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: end; gap: 28px;
    }
}
.ec-consulados-desc { margin-top: 10px; font-size: 14px; color: var(--ec-muted); max-width: 62ch; }
.ec-search {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px;
    background: #fff; border: 1px solid var(--ec-line);
    border-radius: 999px; box-shadow: var(--ec-shadow-1);
}
.ec-search svg { color: var(--ec-muted); flex: 0 0 auto; }
.ec-search input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    font-size: 14.5px; color: var(--ec-ink);
}
.ec-search input:focus { outline: none; }

.ec-ciudades {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 520px)  { .ec-ciudades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ec-ciudades { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ec-ciudades { grid-template-columns: repeat(4, 1fr); } }
.ec-ciudad {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--ec-line);
    border-radius: var(--ec-r); overflow: hidden;
    box-shadow: var(--ec-shadow-1);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ec-ciudad:hover {
    border-color: var(--ec-brand-line); transform: translateY(-2px);
    box-shadow: var(--ec-shadow-2);
}
.ec-ciudad-img { aspect-ratio: 16 / 9; background: var(--ec-brand-soft); }
.ec-ciudad-img img { width: 100%; height: 100%; object-fit: cover; }
.ec-ciudad-body { padding: 11px 13px 13px; display: flex; flex-direction: column; flex: 1; }
.ec-ciudad-city { font-size: 15px; font-weight: 700; color: var(--ec-ink); }
.ec-ciudad-estado { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ec-brand-dark); }
.ec-ciudad-addr { margin-top: 6px; font-size: 12.5px; color: var(--ec-muted); line-height: 1.55; }
.ec-ciudad-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ec-line);
    font-size: 13px; font-weight: 600; color: var(--ec-brand);
}
.ec-ciudad--sin .ec-ciudad-img { display: none; }
.ec-ciudad--sin { background: #fbfcfe; }
/* Sin foto caben más por fila, y así el bloque no parece una segunda rejilla
   incompleta debajo de la de consulados. */
@media (min-width: 1200px) { .ec-ciudades--compacta { grid-template-columns: repeat(6, 1fr); } }
.ec-noresults { margin: 0 0 16px; font-size: 14.5px; color: var(--ec-muted); }

/* ── Mapa ─────────────────────────────────────────────────────────────────── */
.ec-map-shell {
    border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg);
    overflow: hidden; background: #fff; box-shadow: var(--ec-shadow-1);
}
#ec-leaflet { height: 380px; width: 100%; }
@media (min-width: 900px) { #ec-leaflet { height: 460px; } }

/* ── Fuentes y confianza ──────────────────────────────────────────────────── */
.ec-trust { display: grid; gap: 20px; }
@media (min-width: 1060px) { .ec-trust { grid-template-columns: 258px 1fr; gap: 32px; align-items: center; } }
.ec-trust-badges { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .ec-trust-badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ec-trust-badges { grid-template-columns: repeat(4, 1fr); } }
.ec-badge {
    display: flex; align-items: center; gap: 11px;
    padding: 14px; background: #fff;
    border: 1px solid var(--ec-line); border-radius: var(--ec-r);
}
.ec-badge svg { color: var(--ec-brand); flex: 0 0 auto; }
.ec-badge strong { display: block; font-size: 13.5px; color: var(--ec-ink); }
.ec-badge span { font-size: 12.5px; color: var(--ec-muted); }

/* ── FAQs ─────────────────────────────────────────────────────────────────── */
.ec-faq-head {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.ec-faqs { display: grid; gap: 10px; }
@media (min-width: 900px) { .ec-faqs { grid-template-columns: 1fr 1fr; gap: 12px; } }
.ec-faq {
    background: #fff; border: 1px solid var(--ec-line);
    border-radius: var(--ec-r); overflow: hidden;
}
.ec-faq > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer;
    font-size: 14.5px; font-weight: 600; color: var(--ec-ink);
    list-style: none;
}
.ec-faq > summary::-webkit-details-marker { display: none; }
.ec-faq > summary::after {
    content: ""; margin-left: auto; flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ec-muted); border-bottom: 2px solid var(--ec-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}
.ec-faq[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ec-faq[open] > summary { color: var(--ec-brand-dark); }
.ec-faq-answer { padding: 0 16px 16px; font-size: 14px; }
.ec-faq-answer a { color: var(--ec-brand); font-weight: 600; text-decoration: underline; }

/* ── Emergencias ──────────────────────────────────────────────────────────── */
.ec-emergency {
    background: #fff; border: 1px solid var(--ec-brand-line);
    border-radius: var(--ec-r-lg); padding: 22px;
}
.ec-emergency-grid {
    display: grid; gap: 10px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.ec-tel {
    display: block; padding: 11px 13px;
    background: var(--ec-cream); border: 1px solid var(--ec-line);
    border-radius: var(--ec-r-sm);
}
.ec-tel span { display: block; font-size: 12px; color: var(--ec-muted); }
.ec-tel strong { font-size: 14.5px; color: var(--ec-brand-dark); }
.ec-tel:hover { border-color: var(--ec-brand); }

/* ── Guías ────────────────────────────────────────────────────────────────── */
.ec-guias { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .ec-guias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ec-guias { grid-template-columns: repeat(3, 1fr); } }
.ec-guia {
    padding: 16px; background: #fff;
    border: 1px solid var(--ec-line); border-radius: var(--ec-r);
    transition: border-color .18s ease, transform .18s ease;
}
.ec-guia:hover { border-color: var(--ec-brand); transform: translateY(-2px); }
.ec-guia h3 { font-size: 15px; }
.ec-guia p { margin-top: 6px; font-size: 13px; color: var(--ec-muted); }

/* ── Cierre con el asistente ──────────────────────────────────────────────── */
.ec-cta-band {
    background: var(--ec-brand-dark);
    color: #e7eef7;
    border-radius: var(--ec-r-lg);
    padding: 26px;
    display: grid; gap: 16px;
}
@media (min-width: 860px) {
    .ec-cta-band { grid-template-columns: 1fr auto; align-items: center; padding: 30px 34px; }
}
.ec-cta-band .ec-title { color: #fff; font-size: clamp(20px, 3.2vw, 25px); }
.ec-cta-band p { margin-top: 8px; font-size: 14.5px; max-width: 58ch; }
.ec-cta-band .ec-btn--primary { background: #fff; color: var(--ec-brand-dark); }
.ec-cta-band .ec-btn--primary:hover { background: var(--ec-brand-soft); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ec-footer {
    background: #fff;
    border-top: 1px solid var(--ec-line);
    margin-top: 40px;
    padding: 36px 0 24px;
}
.ec-footer-grid { display: grid; gap: 28px; }
@media (min-width: 700px)  { .ec-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .ec-footer-grid { grid-template-columns: 1.1fr .7fr .7fr .7fr 1.2fr; gap: 32px; } }
.ec-footer-about p { margin-top: 12px; font-size: 13.5px; color: var(--ec-muted); max-width: 30ch; }
.ec-footer-title {
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ec-ink);
}
.ec-footer-col ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.ec-footer-col a { font-size: 13.5px; color: var(--ec-body); }
.ec-footer-col a:hover { color: var(--ec-brand); text-decoration: underline; }
.ec-footer-note {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 16px; background: var(--ec-brand-soft);
    border: 1px solid var(--ec-brand-line); border-radius: var(--ec-r);
}
.ec-footer-note svg { color: var(--ec-brand); flex: 0 0 auto; margin-top: 2px; }
.ec-footer-note strong { display: block; font-size: 13.5px; color: var(--ec-ink); margin-bottom: 5px; }
.ec-footer-note p { font-size: 12.5px; color: #4a5872; }
.ec-footer-note a { color: var(--ec-brand-dark); font-weight: 600; text-decoration: underline; }
.ec-footer-legal {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ec-line);
    display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
    font-size: 12.5px; color: var(--ec-muted);
}

/* ── Placeholder de imagen ────────────────────────────────────────────────────
   Hueco etiquetado con la ruta que debe tener la foto: la página se puede
   juzgar entera antes de tener las imágenes, y subirlas es copiar ficheros. */
.ec-ph {
    position: relative;
    width: 100%; height: 100%;
    min-height: 78px;
    display: grid; place-items: center; gap: 6px;
    padding: 10px;
    background:
        repeating-linear-gradient(135deg, #eef2f8 0 9px, #e6ecf6 9px 18px);
    color: #7d879b;
    text-align: center;
}
.ec-ph svg { opacity: .55; }
.ec-ph-label {
    font-size: 10.5px; font-weight: 600; line-height: 1.3;
    letter-spacing: .01em; word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .ec-body *, .ec-body *::before, .ec-body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ── Pasos de la cita ─────────────────────────────────────────────────────────
   Los cuatro pasos reales del portal de citas. Numerados porque aquí el orden
   sí importa: saltarse uno deja la cita sin confirmar. */
.ec-pasos { counter-reset: paso; display: grid; gap: 12px; }
@media (min-width: 700px)  { .ec-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ec-pasos { grid-template-columns: repeat(4, 1fr); } }
.ec-paso {
    position: relative;
    /* 54 arriba y no 40: con 40 el numero quedaba a 2px del titular, pegado. */
    padding: 54px 17px 18px;
    counter-increment: paso;
    background: #fff;
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-r);
    box-shadow: var(--ec-shadow-1);
}
.ec-paso::before {
    content: counter(paso);
    position: absolute; top: 15px; left: 17px;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: var(--ec-brand); color: #fff;
    border-radius: 50%; font-size: 12.5px; font-weight: 700;
}
.ec-paso h3 { font-size: 14.5px; margin-bottom: 5px; }
.ec-paso p { font-size: 13px; color: var(--ec-muted); line-height: 1.6; }
.ec-paso strong { color: var(--ec-ink); }

/* ── Franja de cifras ────────────────────────────────────────────────────────
   Las cuatro cifras que sitúan a quien llega: cuántos son, cuántas sedes hay,
   lo que cuesta la cita y que hay guardia de emergencias. */
.ec-stats { background: #fff; border-bottom: 1px solid var(--ec-line); }
.ec-stats-inner {
    max-width: var(--ec-max); margin: 0 auto;
    padding: 16px var(--ec-pad);
    display: grid; gap: 14px;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}
@media (min-width: 760px) { .ec-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.ec-stat { display: flex; flex-direction: column; gap: 2px; }
.ec-stat-n { font-size: clamp(20px, 3vw, 25px); font-weight: 800; letter-spacing: -.02em; color: var(--ec-brand-dark); }
.ec-stat-l { font-size: 12.5px; color: var(--ec-muted); }

/* ── Página 404 ──────────────────────────────────────────────────────────── */
.ec-404 { max-width: 62ch; padding: 18px 0 6px; }
.ec-404-grid {
    display: grid; gap: 14px; margin-top: 6px;
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .ec-404-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ec-404-grid { grid-template-columns: repeat(3, 1fr); } }
.ec-404-list { list-style: none; margin: 0 0 14px; padding: 0; }
.ec-404-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 2px;
    font-size: 14px; color: var(--ec-brand-dark);
    border-bottom: 1px solid #eef2f8;
}
.ec-404-list li:last-child a { border-bottom: 0; }
.ec-404-list a:hover { color: var(--ec-brand); text-decoration: underline; }
.ec-404-list svg { color: #b7c3d6; flex: 0 0 auto; }

/* ── Saltos a una sección ────────────────────────────────────────────────────
   La barra de navegación es fija, así que un ancla dejaba su destino justo
   debajo y parecía que el enlace no había ido al sitio. `scroll-margin-top`
   reserva ese alto al desplazarse, sin afectar a la maquetación. */
.ec-body [id] { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Caja del asistente dentro del contenido ──────────────────────────────────
   Misma pieza que el buscador del hero, enmarcada para que se lea como una
   invitacion y no como un formulario mas de la pagina. */
.ec-caja-asistente {
    margin: 30px 0 6px;
    padding: 20px 22px 22px;
    background: var(--ec-brand-soft);
    border: 1px solid var(--ec-brand-line);
    border-radius: var(--ec-r);
}
.ec-caja-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ec-brand-dark);
}
.ec-caja-titulo {
    font-size: clamp(17px, 2.6vw, 20px); font-weight: 700;
    letter-spacing: -.02em; color: var(--ec-ink);
}
.ec-caja-sub {
    margin-top: 7px; max-width: 62ch;
    font-size: 14px; color: var(--ec-body); line-height: 1.6;
}
.ec-caja-asistente .ec-ask { margin-top: 16px; max-width: none; }

/* ── Acento salvadoreño ──────────────────────────────────────────────────────
   El azul de la bandera de El Salvador (#0047A9) y el de Guatemala (#003F87)
   se distinguen mal fuera de un selector de color. Si los dos sitios comparten
   sistema visual y azul, acaban pareciendo el mismo. El amarillo de la bandera
   —que el sitio guatemalteco no usa en ningún sitio— es lo que los separa.
   Se aplica en cuatro gestos y no más: en cuanto el amarillo pasa de acento a
   superficie deja de leerse como marca y empieza a leerse como aviso.
   ────────────────────────────────────────────────────────────────────────── */

/* Antetítulo de sección: un filete amarillo delante del texto. */
.ec-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.ec-eyebrow::before {
    content: "";
    width: 22px; height: 3px; border-radius: 2px;
    background: var(--ec-accent);
}

/* Resaltado del titular: color de marca, como en el sistema, más un subrayado
   fino amarillo por debajo. El amarillo como color de texto no vale —sobre
   blanco da 1.6:1 y el titular deja de leerse— y como banda gruesa se comía
   la línea entera. Así el gesto es salvadoreño sin ser tosco. */
.ec-hero-title .ec-hl {
    color: var(--ec-brand);
    background: linear-gradient(to top, var(--ec-accent) 0 .1em, transparent .1em);
}

/* Distintivo del hero: solo el borde. Dentro ya va el destello del sistema, y
   añadirle un punto de color eran dos marcas para el mismo sitio. */
.ec-hero-badge { border-color: var(--ec-accent); }

/* Página actual dentro de un desplegable: con 45 sedes en la lista, el filete
   amarillo dice dónde estás sin tener que leerlas todas. */
.ec-nav-drop a[aria-current="page"],
.ec-mobile-sub a[aria-current="page"] {
    color: var(--ec-brand);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ec-accent);
}

/* Página actual en el menú de escritorio. */
@media (min-width: 1000px) {
    .ec-nav-links a[aria-current="page"] {
        color: var(--ec-ink); font-weight: 600;
        box-shadow: inset 0 -3px 0 var(--ec-accent);
    }
}

/* ── Volver arriba ──────────────────────────────────────────────────────────
   Blanco con un filete y sombra suave, no un círculo de marca: es un control
   de navegación, no una llamada a la acción, y compitiendo en color con el
   botón de cita se llevaba una atención que no le toca.
   ────────────────────────────────────────────────────────────────────────── */
.up-arrow {
    position: fixed; bottom: 80px; right: 22px;
    width: 42px; height: 42px;
    background: #fff;
    border: 1px solid var(--ec-line);
    color: var(--ec-ink);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--ec-shadow-2);
    z-index: 98; cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.up-arrow:hover { border-color: var(--ec-brand-line); box-shadow: var(--ec-shadow-3); transform: translateY(-2px); }
.up-arrow svg { color: var(--ec-ink); }
/* Es un <button> y no un <a> sin href: así lo alcanza el tabulador y responde
   al Intro, que es como navega quien no usa ratón. */
.up-arrow { padding: 0; font: inherit; -webkit-appearance: none; appearance: none; }

/* ── Botón flotante de cita ─────────────────────────────────────────────────
   Estaba definido en styles.css y otra vez en home.css, y chatbot.css lo
   reposicionaba a la izquierda para dejarle la derecha al asistente.
   ────────────────────────────────────────────────────────────────────────── */
.fixed-btn--container { position: fixed; bottom: 20px; right: 20px; z-index: 99; }
.fixed-btn--container button {
    background: var(--ec-brand);
    color: #fff;
    border: none;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(13,27,46,.22);
    transition: background-color .18s ease, transform .15s ease;
}
.fixed-btn--container button:hover { background: var(--ec-brand-dark); transform: translateY(-2px); }

/* En móvil se retira. Compartía pantalla con el lanzador del asistente y la
   flecha de volver arriba sobre un ancho de 375px: tres cosas flotando encima
   del texto que la gente ha venido a leer. La cita sigue en el menú, en el pie
   y en los botones de cada ficha. */
@media (max-width: 767px) {
    .fixed-btn--container { display: none; }
}

/* ── El hero en móvil ───────────────────────────────────────────────────────
   A 390px el bloque se leía apretado: el distintivo como pastilla suelta, los
   ejemplos partidos en dos filas y todo pegado al marco de la pantalla.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 619px) {
    /* El distintivo pasa de pastilla a tira de ancho completo: en una columna
       estrecha una pastilla corta deja un hueco a su derecha que no dice nada,
       y así además admite el texto entero sin partirse. */
    .ec-hero-badge {
        display: flex;
        align-self: stretch;
        width: 100%;
        justify-content: flex-start;
        padding: 11px 14px;
        margin-bottom: 18px;
        background: var(--ec-brand-soft);
        border-color: var(--ec-accent);
        font-size: 13.5px;
        line-height: 1.3;
    }

    /* Los cuatro ejemplos, en una sola fila. Partidos en dos ocupaban un
       tercio más de alto para decir lo mismo. */
    .ec-ask-examples {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 6px;
        /* Sin esto la fila no puede encogerse y estira a sus padres hasta
           sacar el hero fuera de la pantalla. */
        min-width: 0;
    }
    .ec-ask-examples::-webkit-scrollbar { display: none; }
    .ec-ask-examples-label { flex: 0 0 auto; font-size: 12px; }
    .ec-chip { padding: 5px 10px; font-size: 12px; }

    /* Ritmo del bloque: el titular respira arriba y el subtítulo no se pega. */
    .ec-hero-copy { padding-top: 26px; }
    .ec-hero-title { margin-bottom: 2px; }
    .ec-hero-sub { margin-top: 13px; }
    .ec-ask { margin-top: 20px; }
}

/* ── Los pasos del asistente, en móvil ──────────────────────────────────────
   En una columna estrecha los cuatro pasos van uno debajo de otro y hay sitio
   de sobra: el círculo y su icono crecen para que se lean de un vistazo en vez
   de quedarse en una viñeta diminuta perdida sobre el texto.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
    .ec-steps { gap: 6px; }
    .ec-step { padding: 14px 8px; }
    .ec-step-icon { width: 84px; height: 84px; margin-bottom: 14px; }
    .ec-step-icon svg { width: 42px; height: 42px; }
    .ec-step-num {
        top: -2px; left: -2px;
        width: 28px; height: 28px;
        font-size: 13px;
    }
    .ec-step-title { font-size: 16px; }
    .ec-step p { font-size: 13.5px; }
}