:root {
    /* ---- Fondos ---- */
    --fondo:        #F1F0F9;   /* lavanda muy diluido: el color del sitio */
    --fondo-hondo:  #E4E2F4;   /* franjas y realces */
    --superficie:   #FFFFFF;   /* tarjetas y secciones claras */

    /* ---- Marca ---- */
    --marino:       #2E2A6B;   /* índigo profundo: títulos y barra del panel */
    --marino-hondo: #1E1B4B;
    --marino-suave: #453FA0;   /* enlaces */
    --azul:         #6B5FD4;   /* violeta medio: decorativo */
    --azul-hondo:   #514AC0;   /* su versión legible sobre claro */
    --azul-sobre-marino: #B9B3F0;  /* y su versión legible sobre el índigo */
    --azul-tenue:   rgba(107, 95, 212, 0.11);
    --rosa:         #B23A5E;   /* coral de acento, en versión legible */
    --rosa-hondo:   #8E2C4A;
    --rosa-vivo:    #E0577F;   /* coral vivo: solo decorativo */
    --rosa-tenue:   rgba(224, 87, 127, 0.10);

    /* ---- Texto ---- */
    --texto:        #171426;
    --texto-medio:  #444058;
    --texto-tenue:  #625D78;

    /* ---- Líneas ---- */
    --linea:        #DEDCEE;
    --linea-fuerte: #C2BEDD;
    --borde-campo:  #8A85A5;   /* controles: necesitan 3:1 */

    /* ---- Estado ---- */
    --exito:        #12704B;
    --alerta:       #8A5A0F;
    --peligro:      #A32C23;

    /* Alias heredados: se usan por todo el sitio y se conservan
       para no romper nada al cambiar la paleta. */
    --piedra-400:   var(--texto-tenue);
    --piedra-500:   var(--texto-medio);
    --piedra-600:   var(--texto-medio);
    --carbon-900:   var(--texto);
    --rosa-texto:   var(--rosa);
    --papel:        var(--fondo);

    /* ---- Tipografía ---- */
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* ---- Forma ---- */
    --radio-sm: 8px;
    --radio:    12px;
    --radio-lg: 18px;
    --radio-xl: 24px;
    --ancho-maximo: 1240px;
    --ancho-texto: 66ch;

    /* ---- Sombras ---- */
    --sombra:        0 2px 6px rgba(46, 42, 107, 0.05), 0 14px 34px -18px rgba(46, 42, 107, 0.20);
    --sombra-fuerte: 0 4px 12px rgba(46, 42, 107, 0.06), 0 30px 64px -28px rgba(46, 42, 107, 0.32);

    /* ---- Movimiento ---- */
    --curva: cubic-bezier(0.16, 1, 0.3, 1);
    --curva-corta: cubic-bezier(0.4, 0, 0.2, 1);
    --vel: 0.5s;
    --vel-corta: 0.25s;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.72;
    color: var(--texto-medio);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ---------- Tipografía ----------
   Barlow Condensed es estrecha: permite titulares enormes sin
   que se desborden, que es justo lo que le da fuerza a la
   portada. En mayúsculas gana presencia institucional. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--marino);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.004em;
    margin: 0 0 0.4em;
    text-wrap: balance;
}
/* El término central va en vw para que el título baje de verdad en
   pantallas angostas: con un mínimo alto, en un teléfono el titular se
   parte en demasiadas líneas y empuja el resto fuera de la pantalla. */
h1 {
    font-size: clamp(2.5rem, 9vw, 5.4rem);
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
}
h2 {
    font-size: clamp(1.9rem, 6vw, 3.6rem);
    font-weight: 700;
    text-transform: uppercase;
}
h3 { font-size: 1.4rem; font-weight: 600; line-height: 1.15; }
h4 { font-size: 1.1rem; font-weight: 600; }

/* Palabra resaltada dentro de un título */
.destacado {
    background: linear-gradient(100deg, var(--azul-hondo) 0%, #5B51C8 45%, var(--rosa) 105%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--texto); font-weight: 600; }

a {
    color: var(--marino-suave);
    text-decoration: none;
    transition: color var(--vel-corta) var(--curva-corta);
}
a:hover { color: var(--rosa); }

img { max-width: 100%; display: block; }

::selection { background: var(--marino); color: #fff; }

:focus-visible {
    outline: 2px solid var(--marino);
    outline-offset: 3px;
    border-radius: 4px;
}

.contenedor {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 32px;
}

.folio {
    font-family: var(--font-mono);
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--marino-suave);
    font-variant-numeric: tabular-nums;
}

/* ---------- Iconos ---------- */
.icono-svg { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icono-sm { width: 15px; height: 15px; }
.icono-lg { width: 30px; height: 30px; }

.icono {
    width: 48px;
    height: 48px;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--azul-tenue);
    color: var(--azul-hondo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--vel) var(--curva),
                color var(--vel) var(--curva),
                border-color var(--vel) var(--curva),
                box-shadow var(--vel) var(--curva);
}
.icono .icono-svg { width: 22px; height: 22px; }

/* ---------- Etiquetas de sección ---------- */
.kicker,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--rosa);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.73rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.kicker::before,
.eyebrow::before {
    content: '';
    width: 26px;
    height: 1.5px;
    background: currentColor;
}
.seccion-encabezado .kicker::after,
.cabecera-pagina.centrada .kicker::after {
    content: '';
    width: 26px;
    height: 1.5px;
    background: currentColor;
}

/* Píldora de estado, con punto que late */
.pildora {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 13px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 999px;
    background: var(--superficie);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--texto-medio);
}
.pildora .punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--exito);
    animation: latido 2.4s var(--curva-corta) infinite;
}
@keyframes latido {
    0%   { box-shadow: 0 0 0 0 rgba(18, 112, 75, 0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(18, 112, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 112, 75, 0); }
}

/* ---------- Encabezado ---------- */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(241, 240, 249, 0.82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--vel) var(--curva),
                background var(--vel) var(--curva),
                box-shadow var(--vel) var(--curva);
}
.encabezado.desplazado {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: var(--linea);
    box-shadow: 0 10px 30px -22px rgba(46, 42, 107, 0.5);
}
.nav-principal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    transition: padding var(--vel) var(--curva);
}
.encabezado.desplazado .nav-principal { padding: 10px 0; }

/* --- Marca ---
   El logotipo es un lockup completo: gota + "JMAPA" + "SAN FELIPE,
   GTO." + el consejo directivo. A 46px de alto ese texto resulta
   ilegible, así que por CSS se recorta únicamente la gota y el
   nombre se compone con tipografía al lado. */
.marca { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.marca-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--vel) var(--curva);
}
.marca:hover .marca-simbolo { transform: translateY(-2px); }
/* Marca del sitio: SVG en línea usado como máscara, así toma el color
   del texto que lo rodea (índigo en la cabecera, blanco sobre el panel)
   sin necesitar dos archivos de imagen ni filtros de inversión. */
.marca-gota {
    display: block;
    height: 42px;
    width: 42px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='m9 10 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='m9 10 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: height var(--vel) var(--curva), width var(--vel) var(--curva);
}
.encabezado.desplazado .marca-gota { height: 34px; width: 34px; }
.marca-texto {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--marino);
    text-transform: uppercase;
}
.marca-texto small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--texto-tenue);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 5px;
}

/* En escritorio manda la barra de enlaces y el panel del teléfono no
   existe. En móvil se invierte (ver la media query del final). */
.menu-escritorio { display: block; }
.panel-envoltura { display: none; }
.panel-cabecera,
.panel-pie { display: none; }

.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a {
    position: relative;
    color: var(--texto-medio);
    font-weight: 500;
    font-size: 0.91rem;
    padding: 8px 2px;
    margin: 0 13px;
    display: inline-block;
    /* Una etiqueta nunca debe partirse a media palabra en la barra */
    white-space: nowrap;
    transition: color var(--vel-corta) var(--curva-corta);
}
.menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--rosa-vivo);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--vel) var(--curva);
}
.menu a:hover { color: var(--marino); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu a.activo { color: var(--marino); font-weight: 600; }
.menu a.activo::after { transform: scaleX(1); }


/* ---------- Botones ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 13px 24px;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background var(--vel) var(--curva),
                color var(--vel) var(--curva),
                border-color var(--vel) var(--curva),
                box-shadow var(--vel) var(--curva),
                transform var(--vel-corta) var(--curva-corta);
}
.btn .icono-svg { width: 16px; height: 16px; transition: transform var(--vel) var(--curva); }
.btn:hover .icono-svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primario {
    background: linear-gradient(135deg, #453FA0, var(--marino) 65%);
    color: #fff;
    box-shadow: 0 10px 28px -14px rgba(46, 42, 107, 0.85);
}
.btn-primario:hover {
    color: #fff;
    box-shadow: 0 18px 40px -16px rgba(46, 42, 107, 1);
    transform: translateY(-2px);
}

/* Rosa oscuro y no el del logo: sobre el rosa claro el texto blanco
   queda en 4.49:1 y no alcanza el mínimo de 4.5 de WCAG AA. */
.btn-secundario {
    background: var(--rosa);
    color: #fff;
    box-shadow: 0 10px 28px -14px rgba(178, 58, 94, 0.8);
}
.btn-secundario:hover {
    background: var(--rosa-hondo);
    color: #fff;
    box-shadow: 0 18px 40px -16px rgba(178, 58, 94, 1);
    transform: translateY(-2px);
}

.btn-fantasma {
    background: var(--superficie);
    border-color: var(--borde-campo);
    color: var(--marino);
}
.btn-fantasma:hover {
    background: var(--marino);
    border-color: var(--marino);
    color: #fff;
    transform: translateY(-2px);
}


.btn-ancho { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 0.89rem;
    color: var(--marino-suave);
}
.enlace-flecha .icono-svg {
    width: 15px; height: 15px;
    transition: transform var(--vel) var(--curva);
}
.enlace-flecha:hover .icono-svg { transform: translateX(5px); }

.btn-menu-movil {
    display: none;
    background: var(--superficie);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-sm);
    padding: 9px;
    color: var(--marino);
    cursor: pointer;
    line-height: 0;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 116px 0 106px;
    --deriva: 0px;   /* GSAP la anima al hacer scroll (efecto parallax) */
}
/* Halos de color muy diluidos: dan profundidad sin ensuciar */
.hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    background:
        radial-gradient(760px 460px at 78% 6%, rgba(107, 95, 212, 0.20), transparent 62%),
        radial-gradient(620px 420px at 10% 92%, rgba(224, 87, 127, 0.10), transparent 64%);
    pointer-events: none;
}
/* Silueta de la gota del logotipo */
.hero::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -130px;
    width: 420px;
    height: 420px;
    background-color: var(--azul);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='m9 10 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='m9 10 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.05;
    pointer-events: none;
    transform: translateY(var(--deriva));
}
.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 72px;
    align-items: center;
}
.hero h1 { margin-bottom: 0.26em; }
.hero p.lead {
    color: var(--texto-medio);
    font-size: 1.12rem;
    line-height: 1.7;
    max-width: 50ch;
}
.hero-acciones {
    display: flex;
    gap: 16px;
    margin-top: 38px;
    align-items: center;
    flex-wrap: wrap;
}

/* Ficha institucional */
.ficha {
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 30px;
    background: var(--superficie);
    box-shadow: var(--sombra);
}
.ficha h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.71rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    font-weight: 600;
    margin-bottom: 22px;
}
.ficha h3 .icono-svg { width: 15px; height: 15px; color: var(--azul-hondo); }
.ficha dl { margin: 0; }
.ficha dt {
    font-size: 0.69rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    font-weight: 600;
}
.ficha dd {
    margin: 6px 0 0;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--texto);
}
.ficha dd + dt { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linea); }

/* ---------- Secciones ---------- */
.seccion { padding: 112px 0; position: relative; }
.seccion-compacta { padding: 72px 0; }
.seccion-alt { background: var(--superficie); border-block: 1px solid var(--linea); }
.seccion-oscura { background: var(--marino); border-block: 1px solid var(--marino-hondo); color: #CCC8EE; }
.seccion-oscura h1,
.seccion-oscura h2,
.seccion-oscura h3 { color: #fff; }
.seccion-oscura .kicker { color: #FFA3BC; }
.seccion-oscura .texto-apagado { color: #CCC8EE; }

/* ---------- Encabezado de sección ----------
   Va sobre una banda de marino en vez de sobre el fondo de la página:
   marca dónde empieza cada sección y hace que el título resalte, en
   lugar de quedar flotando sobre el mismo color que todo lo demás. */
.seccion-encabezado {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
    padding: 48px 44px;
    border-radius: var(--radio-lg);
    background: linear-gradient(135deg, var(--marino) 0%, #252060 52%, var(--marino-hondo) 100%);
    box-shadow: var(--sombra);
}
/* Filigrana de la gota, apenas perceptible */
.seccion-encabezado::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -60px;
    width: 190px;
    height: 190px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='m9 10 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='m9 10 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.06;
    pointer-events: none;
}
.seccion-encabezado > * { position: relative; z-index: 1; }

.seccion-encabezado h2,
.seccion-encabezado h3 { color: #fff; }
.seccion-encabezado .kicker { color: #FFA3BC; }
.seccion-encabezado .enlace-flecha { color: var(--azul-sobre-marino); }
.seccion-encabezado .enlace-flecha:hover { color: #fff; }

.seccion-encabezado.alineado-izq { margin-left: 0; margin-right: 0; text-align: left; }

.seccion-encabezado p {
    color: #CDC8EF;
    font-size: 1.05rem;
    margin-top: 18px;
    margin-bottom: 0;
}

.cabecera-pagina {
    position: relative;
    overflow: hidden;
    padding: 92px 0 0;
    border-bottom: 1px solid var(--linea);
}
.cabecera-pagina::before {
    content: '';
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 150%;
    background: radial-gradient(700px 380px at 74% 0%, rgba(107, 95, 212, 0.17), transparent 64%);
    pointer-events: none;
}
.cabecera-pagina .contenedor { position: relative; z-index: 1; padding-bottom: 72px; }
.cabecera-pagina p.lead {
    color: var(--texto-medio);
    font-size: 1.08rem;
    max-width: 60ch;
    margin-bottom: 0;
}
.cabecera-pagina.centrada { text-align: center; }
.cabecera-pagina.centrada p.lead { margin-inline: auto; }

.rejilla { display: grid; gap: 26px; }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
.rejilla-apretada { gap: 18px; }

/* ---------- Tarjetas ---------- */
.tarjeta {
    position: relative;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 34px;
    transition: border-color var(--vel) var(--curva),
                transform var(--vel) var(--curva),
                box-shadow var(--vel) var(--curva);
}
/* Filo de color que aparece arriba al pasar el cursor */
.tarjeta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--azul), var(--rosa-vivo));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--vel) var(--curva);
}
.tarjeta:hover {
    border-color: var(--linea-fuerte);
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
}
.tarjeta:hover::before { transform: scaleX(1); }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p {
    color: var(--texto-medio);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}
.tarjeta .icono { margin-bottom: 24px; }
.tarjeta:hover .icono {
    background: var(--marino);
    border-color: var(--marino);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(46, 42, 107, 0.9);
}
.tarjeta-pie { margin-top: 22px; }

a.tarjeta { display: block; color: inherit; }
a.tarjeta:hover { color: inherit; }

/* Sobre una sección blanca la tarjeta blanca se pierde: se le marca
   más el borde para que siga leyéndose como bloque. */
.seccion-alt .tarjeta { border-color: var(--linea-fuerte); }

.tarjeta-servicio { display: flex; flex-direction: column; height: 100%; }
.tarjeta-servicio .numero {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--fondo-hondo);
    line-height: 1;
    transition: color var(--vel) var(--curva);
    font-variant-numeric: tabular-nums;
}
.tarjeta-servicio:hover .numero { color: var(--azul); }
.tarjeta-servicio .tarjeta-pie { margin-top: auto; padding-top: 22px; }

/* ---------- Valores ---------- */
.tira-valores { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    color: var(--marino);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 999px;
    transition: border-color var(--vel) var(--curva),
                box-shadow var(--vel) var(--curva),
                transform var(--vel) var(--curva);
}
.chip::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--rosa-vivo);
}
.chip:hover {
    border-color: var(--linea-fuerte);
    box-shadow: var(--sombra);
    transform: translateY(-3px);
}

/* ---------- Trámites ---------- */
.tarjeta-tramite { display: flex; flex-direction: column; }
.tramite-subtitulo {
    font-family: var(--font-body);
    font-size: 0.71rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    font-weight: 600;
    margin: 26px 0 12px;
}
.lista-requisitos,
.lista-indicaciones { list-style: none; margin: 0; padding: 0; }
.lista-requisitos li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.94rem;
    color: var(--texto);
    padding: 7px 0;
    border-bottom: 1px solid var(--linea);
}
.lista-requisitos li:last-child { border-bottom: none; }
.lista-requisitos .icono-svg {
    width: 15px; height: 15px;
    margin-top: 5px;
    color: var(--azul-hondo);
    stroke-width: 2.5;
}
.lista-indicaciones li {
    position: relative;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--texto-medio);
    margin-bottom: 9px;
}
.lista-indicaciones li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--linea-fuerte);
}
.lista-indicaciones li:last-child { margin-bottom: 0; }

.tramite-costo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 26px 0 0;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--marino);
    line-height: 1.2;
}
.tramite-costo .icono-svg { width: 21px; height: 21px; color: var(--rosa); flex-shrink: 0; }
.tramite-costo .etiqueta-costo {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    margin-bottom: 2px;
}

/* ---------- Objetivos ---------- */
.lista-objetivos { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.objetivo {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid var(--linea);
    align-items: start;
    transition: background var(--vel) var(--curva), padding-left var(--vel) var(--curva);
}
.objetivo:hover { background: var(--superficie); padding-left: 16px; }
.objetivo .indice {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--linea-fuerte);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color var(--vel) var(--curva);
}
.objetivo:hover .indice { color: var(--rosa); }
.objetivo h3 { margin-bottom: 9px; }
.objetivo p { color: var(--texto-medio); margin-bottom: 0; max-width: var(--ancho-texto); }

/* ---------- Banda de reporte ---------- */
.banda-reporte {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: var(--radio-xl);
    background:
        radial-gradient(620px 320px at 90% 50%, rgba(224, 87, 127, 0.10), transparent 70%),
        var(--superficie);
    box-shadow: var(--sombra);
    padding: 42px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}
.banda-reporte .texto { display: flex; align-items: center; gap: 22px; }
.banda-reporte .icono { background: var(--rosa-tenue); color: var(--rosa); flex-shrink: 0; }
.banda-reporte h3 { margin-bottom: 5px; }
.banda-reporte p { color: var(--texto-medio); font-size: 0.95rem; margin: 0; }

/* ---------- Formularios ---------- */
.tarjeta-formulario {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-fuerte);
    padding: 48px;
    max-width: 580px;
    margin: 0 auto;
}
.campo { margin-bottom: 22px; }
.campo label {
    display: block;
    font-weight: 500;
    font-size: 0.86rem;
    margin-bottom: 8px;
    color: var(--marino);
}
.campo .ayuda { font-size: 0.8rem; color: var(--texto-tenue); margin-top: 7px; }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 13px 15px;
    /* borde-campo y no linea-fuerte: el borde de un control necesita
       3:1 de contraste para distinguirse de la superficie */
    border: 1px solid var(--borde-campo);
    border-radius: var(--radio-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--texto);
    background: var(--superficie);
    transition: border-color var(--vel-corta) var(--curva-corta),
                box-shadow var(--vel-corta) var(--curva-corta);
}
.campo textarea { resize: vertical; min-height: 120px; line-height: 1.65; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--texto-tenue); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--marino);
    box-shadow: 0 0 0 3px rgba(46, 42, 107, 0.14);
}
.campo input[type="file"] { padding: 11px; background: var(--fondo); cursor: pointer; }
.campo input[type="file"]::file-selector-button {
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--marino);
    background: var(--superficie);
    border: 1px solid var(--linea-fuerte);
    border-radius: 6px;
    padding: 7px 14px;
    margin-right: 12px;
    cursor: pointer;
}
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.requerido { color: var(--rosa); }

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    border-radius: var(--radio-sm);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 24px;
    border: 1px solid;
    border-left-width: 3px;
}
.alerta .icono-svg { width: 18px; height: 18px; margin-top: 3px; }
.alerta-error { background: #FBF1F0; color: var(--peligro); border-color: #EBCFCC; }
.alerta-exito { background: #EDF7F2; color: var(--exito); border-color: #C2E2D3; }
.alerta-info  { background: #EFEDFA; color: var(--marino); border-color: #D3CFF0; }
.alerta strong { color: inherit; }

.etiqueta-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid;
}
.etiqueta-estado::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.estado-pendiente  { background: #FBF3E5; color: var(--alerta); border-color: #E8D6B4; }
.estado-en_proceso { background: #EFEDFA; color: var(--marino-suave); border-color: #D3CFF0; }
.estado-resuelto   { background: #EDF7F2; color: var(--exito); border-color: #C2E2D3; }
.estado-cancelado  { background: var(--fondo-hondo); color: var(--texto-medio); border-color: var(--linea-fuerte); }

/* ---------- Puntos de pago ---------- */
.punto-pago { display: flex; gap: 15px; align-items: flex-start; }
.punto-pago .marcador { color: var(--azul-hondo); margin-top: 4px; flex-shrink: 0; }
.punto-pago .marcador .icono-svg { width: 16px; height: 16px; }
.punto-pago .sucursal { color: var(--marino); font-weight: 600; font-size: 0.91rem; margin-bottom: 3px; }
.punto-pago .direccion { color: var(--texto-medio); font-size: 0.9rem; margin: 0; line-height: 1.6; }
.lista-sucursales { margin-top: 20px; display: flex; flex-direction: column; }
.lista-sucursales .punto-pago { padding: 16px 0; border-top: 1px solid var(--linea); }
.lista-sucursales .punto-pago:first-child { border-top: none; padding-top: 0; }
.lista-sucursales .punto-pago:last-child { padding-bottom: 0; }

/* ---------- Noticias ---------- */
.noticia-tarjeta { padding: 0; display: flex; flex-direction: column; }
.noticia-tarjeta .marco-img { overflow: hidden; background: var(--fondo-hondo); }
.noticia-tarjeta img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    transition: transform 1.1s var(--curva);
}
.noticia-tarjeta:hover img { transform: scale(1.05); }
.noticia-tarjeta .cuerpo { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.noticia-tarjeta .fecha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rosa);
    font-weight: 600;
    font-size: 0.71rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}
.noticia-tarjeta .fecha .icono-svg { width: 13px; height: 13px; }
.noticia-tarjeta h3 { font-size: 1.28rem; }
.noticia-tarjeta .enlace-flecha { margin-top: auto; padding-top: 20px; }

/* Noticia sin imagen: en vez de estirar el logotipo completo dentro de
   un 16:10 (donde salía aplastado), se dibuja la gota sobre un degradado. */
.marco-img-vacio {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(420px 220px at 70% 20%, rgba(107, 95, 212, 0.16), transparent 70%),
        linear-gradient(150deg, var(--fondo-hondo), var(--fondo));
    border-bottom: 1px solid var(--linea);
}
.marco-img-vacio .marca-gota {
    height: 68px;
    width: 68px;
    opacity: 0.4;
    transition: opacity var(--vel) var(--curva), transform var(--vel) var(--curva);
}
.noticia-tarjeta:hover .marco-img-vacio .marca-gota { opacity: 0.62; transform: scale(1.05); }

/* ---------- Noticias: carrusel y lista ----------
   La rejilla es el estado base y funciona sin JavaScript. main.js le
   pone data-vista="carrusel" y muestra los controles; el botón de la
   barra alterna entre las dos vistas. */
.noticias-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.noticias-flechas { display: flex; gap: 10px; }
.flecha-carrusel {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--linea-fuerte);
    background: var(--superficie);
    color: var(--marino);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    transition: background var(--vel) var(--curva),
                border-color var(--vel) var(--curva),
                color var(--vel) var(--curva),
                opacity var(--vel) var(--curva);
}
.flecha-carrusel .icono-svg { width: 18px; height: 18px; }
.flecha-carrusel:hover:not(:disabled) {
    background: var(--marino);
    border-color: var(--marino);
    color: #fff;
}
.flecha-carrusel:disabled { opacity: 0.35; cursor: default; }

.noticias-pista { position: relative; }

.noticias[data-vista="carrusel"] .noticias-pista {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* espacio para que la tarjeta levantada en :hover no se recorte */
    padding: 6px 2px 14px;
    margin: -6px -2px -14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.noticias[data-vista="carrusel"] .noticias-pista::-webkit-scrollbar { display: none; }
.noticias[data-vista="carrusel"] .noticias-pista > * {
    flex: 0 0 calc((100% - 52px) / 3);
    scroll-snap-align: start;
}

.noticias-puntos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
}
.noticias[data-vista="lista"] .noticias-puntos,
.noticias[data-vista="lista"] .noticias-flechas { display: none; }

.punto-carrusel {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--linea-fuerte);
    cursor: pointer;
    transition: background var(--vel) var(--curva), width var(--vel) var(--curva);
}
.punto-carrusel:hover { background: var(--texto-tenue); }
.punto-carrusel.activo { background: var(--rosa); width: 28px; }

/* ---------- Galería de fotos de una noticia ---------- */
.galeria { margin: 30px 0 36px; }

.galeria-marco {
    position: relative;
    border-radius: var(--radio-lg);
    overflow: hidden;
    border: 1px solid var(--linea);
    background: var(--fondo-hondo);
}

.galeria-pista { display: flex; }
.galeria-lamina { flex: 0 0 100%; }
.galeria-lamina img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

/* Con varias fotos la pista se desliza. Se hace con desplazamiento
   nativo para que en el teléfono funcione con el dedo sin JavaScript. */
.galeria-carrusel .galeria-pista {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.galeria-carrusel .galeria-pista::-webkit-scrollbar { display: none; }
.galeria-carrusel .galeria-lamina { scroll-snap-align: start; }

.galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.94);
    color: var(--marino);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px -4px rgba(30, 27, 75, 0.4);
    transition: background var(--vel) var(--curva), opacity var(--vel) var(--curva);
}
.galeria-flecha:hover:not(:disabled) { background: #fff; }
.galeria-flecha:disabled { opacity: 0.35; cursor: default; }
.galeria-flecha .icono-svg { width: 18px; height: 18px; }
.galeria-anterior { left: 14px; }
.galeria-siguiente { right: 14px; }

.galeria-contador {
    position: absolute;
    right: 14px;
    bottom: 14px;
    background: rgba(20, 18, 55, 0.78);
    color: #fff;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    padding: 4px 11px;
    border-radius: 999px;
}

.galeria-pies {
    margin-top: 12px;
    font-size: 0.92rem;
    color: var(--texto-medio);
    line-height: 1.6;
}
.galeria-pie { display: block; }
/* Con JavaScript se ve solo el pie de la foto visible; sin él,
   se leen todos seguidos en vez de perderse. */
.galeria.con-js .galeria-pie { display: none; }
.galeria.con-js .galeria-pie.visible { display: block; }

@media (max-width: 600px) {
    .galeria-flecha { width: 38px; height: 38px; }
    .galeria-anterior { left: 8px; }
    .galeria-siguiente { right: 8px; }
}

/* ---------- Cuerpo de una noticia ----------
   Da forma a lo que escribe el personal desde el editor del panel.
   Las etiquetas posibles están fijadas por HTML_PERMITIDO en
   includes/functions.php: si ahí se agrega una, hay que darle estilo aquí. */
.cuerpo-noticia {
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--texto-medio);
}
.cuerpo-noticia > *:first-child { margin-top: 0; }
.cuerpo-noticia > *:last-child { margin-bottom: 0; }

.cuerpo-noticia p { margin: 0 0 1.15em; }
.cuerpo-noticia strong { color: var(--texto); font-weight: 600; }
.cuerpo-noticia em { font-style: italic; }

.cuerpo-noticia h3,
.cuerpo-noticia h4 {
    color: var(--marino);
    margin: 1.8em 0 .6em;
}
.cuerpo-noticia h3 { font-size: 1.7rem; }
.cuerpo-noticia h4 { font-size: 1.25rem; }

.cuerpo-noticia ul,
.cuerpo-noticia ol { margin: 0 0 1.15em; padding-left: 26px; }
.cuerpo-noticia li { margin-bottom: 8px; }
.cuerpo-noticia li::marker { color: var(--azul-hondo); }

.cuerpo-noticia a {
    color: var(--marino-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cuerpo-noticia a:hover { color: var(--rosa); }

.cuerpo-noticia blockquote {
    margin: 0 0 1.15em;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--rosa);
    color: var(--texto);
    font-size: 1.1rem;
}

/* ---------- Sección en construcción ---------- */
.en-construccion {
    text-align: center;
    padding: 72px 32px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    background:
        radial-gradient(600px 300px at 50% 0%, var(--azul-tenue), transparent 70%),
        var(--superficie);
}
.en-construccion .icono {
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
}
.en-construccion .icono .icono-svg { width: 28px; height: 28px; }
.en-construccion h2 { margin-bottom: 12px; }
.en-construccion p {
    color: var(--texto-medio);
    max-width: 54ch;
    margin: 0 auto;
}

/* ---------- Estado vacío ---------- */
.estado-vacio {
    text-align: center;
    padding: 88px 32px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio-lg);
    background: var(--superficie);
}
.estado-vacio > .icono-svg {
    width: 36px; height: 36px;
    color: var(--texto-tenue);
    margin: 0 auto 20px;
}
.estado-vacio p { color: var(--texto-medio); margin-bottom: 0; }
.estado-vacio p + .btn { margin-top: 26px; }

/* ---------- Reportes ---------- */
.reporte-tarjeta .encabezado-reporte {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.reporte-tarjeta .meta {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    color: var(--texto-medio);
    margin-top: 14px;
}
.reporte-tarjeta .meta .icono-svg { width: 15px; height: 15px; color: var(--azul-hondo); }
.reporte-tarjeta .foto {
    max-width: 250px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--linea);
    margin-top: 16px;
}

/* ---------- Pie de página ---------- */
.pie {
    background: var(--marino-hondo);
    color: #B5AFDF;
    padding: 92px 0 32px;
}
.pie h4 {
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.71rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 22px;
}
.pie a { color: #B5AFDF; }
.pie a:hover { color: #fff; }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 52px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 13px; font-size: 0.9rem; }
.pie li:last-child { margin-bottom: 0; }
.pie .contacto-item { display: flex; align-items: flex-start; gap: 12px; }
.pie .contacto-item .icono-svg {
    width: 15px; height: 15px;
    margin-top: 5px;
    color: var(--azul-sobre-marino);
    opacity: 0.9;
}
.pie-marca { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
/* La gota va en blanco sobre el marino del pie */
.pie-marca .marca-gota { opacity: 0.92; }
.pie-marca strong {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.32rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.pie-descripcion { max-width: 36ch; font-size: 0.9rem; line-height: 1.75; }
.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 68px;
    padding-top: 26px;
    font-size: 0.8rem;
    color: #8B85B8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.pie-valores { display: flex; gap: 10px; flex-wrap: wrap; }
.pie-valores span::after { content: '·'; margin-left: 10px; opacity: 0.5; }
.pie-valores span:last-child::after { display: none; }

/* ---------- Utilidades ---------- */

/* Campo trampa del formulario de reporte: fuera de la vista, pero sin
   display:none, porque muchos robots ignoran los campos ocultos así. */
.trampa-robots {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* El atributo `hidden` del HTML debe ganarle a cualquier `display` que
   venga de una clase. Sin esto, un elemento con hidden pero con
   `.clase { display: flex }` se muestra igual: la hoja del autor le gana
   a la del navegador con la misma especificidad. Es lo que pasaba con
   los controles del carrusel antes de que arrancara el JavaScript. */
[hidden] { display: none !important; }

.centro { text-align: center; }
.mt-0 { margin-top: 0; }
.oculto { display: none !important; }
.medida { max-width: var(--ancho-texto); }
.texto-apagado { color: var(--texto-medio); }
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.solo-lectores:focus {
    position: fixed;
    top: 14px; left: 14px;
    width: auto; height: auto;
    margin: 0;
    padding: 13px 22px;
    clip: auto;
    overflow: visible;
    z-index: 100;
    background: var(--marino);
    color: #fff;
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ==========================================================
   MOVIMIENTO
   ----------------------------------------------------------
   Las animaciones de entrada las maneja GSAP desde main.js con
   gsap.from(), que fija el estado inicial por JavaScript y no
   por CSS. Si el JS no corre, el contenido simplemente se ve
   sin animar: no hay forma de que la página quede en blanco.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- Responsive ---------- */
/* Entre 1081 y 1240 la barra todavía cabe, pero justa: se aprieta el
   espaciado en lugar de dejar que empiece a partirse. */
@media (max-width: 1240px) and (min-width: 1081px) {
    .menu a { margin: 0 9px; font-size: 0.87rem; }
}

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
    .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr; }
    .pie-rejilla > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
    .seccion { padding: 80px 0; }
    .hero { padding: 76px 0 72px; }
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
    .banda-reporte { flex-direction: column; align-items: flex-start; }
    .noticias[data-vista="carrusel"] .noticias-pista > * { flex-basis: calc((100% - 26px) / 2); }
}

@media (max-width: 760px) {
    .contenedor { padding: 0 22px; }
    .seccion { padding: 64px 0; }
    .cabecera-pagina { padding-top: 60px; }
    .cabecera-pagina .contenedor { padding-bottom: 52px; }
}

/* ==========================================================
   El menú lateral entra ANTES que el resto del diseño móvil.
   Con 8 secciones la barra de escritorio ya no cabe por debajo
   de ~1080px: las etiquetas se partían en dos renglones ("Pago /
   en / línea") y el encabezado se veía roto. Por eso estas reglas
   tienen su propio punto de corte, más alto que el de 760px.
   ========================================================== */
@media (max-width: 1080px) {

    /* ---- Panel de navegación móvil ----
       La envoltura ocupa la pantalla y recorta lo que se salga. Es lo que
       impide que el panel escondido a la derecha ensanche el documento:
       un elemento fijo desplazado fuera de la pantalla sí cuenta para el
       ancho de la página, y eso cortaba todo el sitio por la derecha.
       pointer-events:none para que no bloquee los clics cuando está
       cerrada; el panel los vuelve a activar. */
    .menu-escritorio { display: none; }

    .panel-envoltura {
        display: block;
        position: fixed;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        /* Por encima del encabezado (50), que es sticky */
        z-index: 70;
    }

    .panel-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 2;          /* por encima del velo, que va en 1 */
        pointer-events: auto;
        width: min(88vw, 360px);
        max-width: 100%;
        background: var(--superficie);
        border-left: 1px solid var(--linea);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(101%);
        transition: transform 0.45s var(--curva);
        box-shadow: -24px 0 60px -30px rgba(30, 27, 75, 0.55);
    }
    .panel-nav.abierto { transform: translateX(0); }

    .panel-cabecera {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 22px;
        border-bottom: 1px solid var(--linea);
        background: var(--fondo);
    }
    .panel-cabecera .marca-texto { font-size: 1.28rem; }

    .btn-cerrar-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border: 1px solid var(--linea-fuerte);
        border-radius: var(--radio-sm);
        background: var(--superficie);
        color: var(--marino);
        cursor: pointer;
        line-height: 0;
    }
    .btn-cerrar-menu .icono-svg { width: 20px; height: 20px; }

    .menu {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 6px 22px;
    }
    .menu li { border-bottom: 1px solid var(--linea); }
    .menu li:last-child { border-bottom: none; }
    .menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        margin: 0;
        font-size: 1.06rem;
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: var(--marino);
    }
    .menu a::after {
        /* la raya del escritorio se convierte aquí en un punto de "activo" */
        content: '';
        position: static;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--rosa-vivo);
        transform: scale(0);
        transition: transform var(--vel) var(--curva);
        box-shadow: none;
    }
    .menu a.activo::after { transform: scale(1); }

    .panel-pie {
        display: block;
        margin-top: auto;
        padding: 22px;
        border-top: 1px solid var(--linea);
        background: var(--fondo);
    }
    .panel-contacto {
        list-style: none;
        margin: 20px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .panel-contacto a,
    .panel-contacto span {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.87rem;
        color: var(--texto-medio);
    }
    .panel-contacto .icono-svg { width: 15px; height: 15px; color: var(--azul-hondo); flex-shrink: 0; }

    /* El velo vive DENTRO de la envoltura, junto al panel.
       Estando fuera no bastaba con subirle el z-index: el encabezado es
       sticky con z-index 50 y crea su propio contexto de apilamiento, así
       que el 60 del panel solo valía dentro del encabezado y el velo (55,
       en la raíz) se pintaba encima. El menú abría, pero quedaba tapado y
       parecía que el botón no hacía nada. */
    .fondo-menu {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: auto;
        background: rgba(20, 18, 55, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--vel) var(--curva), visibility var(--vel) var(--curva);
    }
    .fondo-menu.visible { opacity: 1; visibility: visible; }

    /* Sin z-index por encima del panel: el panel lo tapa al abrirse y
       quien cierra es el botón de la cabecera, no este. */
    .btn-menu-movil { display: inline-flex; }
}

@media (max-width: 760px) {
    .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
    .campo-fila { grid-template-columns: 1fr; }

    /* Una tarjeta por vista, dejando asomar la siguiente para que se
       entienda que hay más y se puede deslizar */
    .noticias[data-vista="carrusel"] .noticias-pista { gap: 16px; }
    .noticias[data-vista="carrusel"] .noticias-pista > * { flex-basis: 86%; }
    .noticias-barra { margin-bottom: 22px; }
    .noticias-barra .btn { flex: 1; }
    .pie { padding-top: 68px; }
    .pie-rejilla { grid-template-columns: 1fr; gap: 40px; }
    .pie-rejilla > div:last-child { grid-column: auto; }
    .tarjeta-formulario { padding: 32px 26px; }
    .tarjeta { padding: 28px; }
    .objetivo { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
    .objetivo .indice { font-size: 2rem; }
    .banda-reporte { padding: 32px 26px; }
    .banda-reporte .texto { flex-direction: column; align-items: flex-start; gap: 16px; }
    .pie-legal { flex-direction: column; margin-top: 48px; }
    .hero::after { display: none; }
}

@media (max-width: 430px) {
    .marca-texto { font-size: 1.3rem; }
}