/* ═════════════════════════════════════════════════════════════════════════════
   ANALITY · marca.css · lo que TODAS las páginas de la landing comparten
   (2026-09-21, proyecto "subpáginas v6")

   Antes cada una de las diez páginas traía su copia de estas reglas, y ninguna
   igual a la otra: siete pies distintos, tres encabezados distintos, botones
   sólidos en unas y de texto en otras. Esto es la única fuente: el logotipo de
   esquina, "Pruébala gratis", el menú de tres rayas con la pantalla partida,
   los botones como texto en Pacifico con la flecha, los títulos grandes y el
   wordmark como logotipo. Se carga ANTES del <style> propio de cada página.

   ⛔ Los tokens de abajo son RESPALDO: si la página define los suyos en su
   :root (todas definen --accent, --ink, --font...), los suyos ganan porque su
   <style> viene después. Los que faltan en algunas (--accent-bright, --ink-2,
   --ease, --rule, --display, --maxw, los del glass) salen de aquí. Mismos
   valores que la portada, que son los de BRANDING v1.15.

   ⛔ Sin pastillas (BRANDING §6), sin verde ni morado (no son de la marca), y
   ningún color heredado en las piezas que viven sobre fondos oscuros: cada
   una lleva el suyo escrito (la trampa de las bandas oscuras, 2026-08-27).
   ═════════════════════════════════════════════════════════════════════════════ */
:root {
    --paper:#ffffff; --paper-2:#f7f3ec;
    --ink:#14233f; --ink-2:#0f2c59; --ink-soft:#57617a; --ink-mute:#8b94a8;
    --accent:#e85d04; --accent-bright:#ff7a29;
    --rule:rgba(20,35,63,.12); --rule-2:rgba(20,35,63,.07);
    --display:'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --etiqueta:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --maxw:1080px; --ease:cubic-bezier(.22,1,.36,1);
    --glass-blur:blur(12px) saturate(1.35); --glass-edge:rgba(255,255,255,.30); --glass-top:inset 0 1px 0 rgba(255,255,255,.42);
}

/* ── El wordmark: la palabra "anality" es SIEMPRE el logotipo ─────────────────
   marca.js mete el SVG real (letras en currentColor, punto de la i naranja fijo)
   en cada span.wordmark, incluidos los que el propio script envuelve al vuelo.
   A 1.32em las letras quedan como una palabra del mismo cuerpo; el vertical-align
   baja la caja (trae aire) para que la línea base caiga en la del texto. */
.wordmark { display:inline-block; line-height:0; vertical-align:-.3em; font-style:normal; }
.wordmark .wm-svg { height:1.32em; width:auto; display:inline-block; }
/* ⛔ El logotipo lleva SUS colores donde sea (Alan, 21-sep, dos veces): tinta navy y el punto
   naranja. Ni naranja dentro de un botón, ni morado en la etiqueta de un plan. Sobre fondo
   oscuro, crema (el logo blanco de marca), como el de la esquina. */
.wordmark { color:var(--ink); }
.banda-oscura .wordmark, .banda-navy .wordmark, .lanza .wordmark, .guard .wordmark, [data-oscuro] .wordmark { color:#f4ece1; }
.menu-panel .wordmark { color:#fff; }   /* el panel del menú es navy: el logotipo va en blanco, como en la portada */
.paso-login .wordmark { color:#fff; }   /* la tarjeta navy de entrar en la caja (mi plan, código, pago) */

/* ── Controles de esquina: logotipo, "Pruébala gratis", tres rayas ───────────
   Fijos. En las subpáginas se ven desde el primer píxel; la portada los esconde
   sobre su intro con reglas propias que cargan después de este archivo. */
.corner-logo {
    position:fixed; top:22px; left:28px; z-index:60;
    display:flex; align-items:center; color:var(--ink);
    transition:opacity .4s var(--ease), color .4s var(--ease);
}
.corner-logo-svg { display:block; height:2.1rem; width:auto; }
.corner-cta { position:fixed; top:18px; right:92px; z-index:60; height:52px; }
.corner-menu {
    position:fixed; top:18px; right:26px; z-index:60;
    width:52px; height:52px; border-radius:4px;
    border:1.5px solid var(--rule); background:rgba(255,255,255,.72);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
    font-family:inherit; color:inherit;
}
.corner-menu:hover { border-color:var(--ink); transform:scale(1.05); }
.corner-menu .bars { display:flex; flex-direction:column; gap:6px; }
.corner-menu .bars i { width:24px; height:3.5px; border-radius:2px; background:var(--ink-2); display:block; }
/* Sobre una banda oscura (marca.js pone body.hdr-oscuro) el logo va blanco y las
   rayas también; el punto de la i sigue naranja. */
body.hdr-oscuro .corner-logo { color:#fff; }
body.hdr-oscuro .corner-menu { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.10); }
body.hdr-oscuro .corner-menu:hover { border-color:#fff; }
body.hdr-oscuro .corner-menu .bars i { background:#fff; }

/* ── Botones: sólidos, en la tipografía de la marca ───────────────────────────
   ⭐ DECISIÓN DE ALAN (30-sep-2026): vuelven a ser BOTONES, con Nunito (`--font`,
   la tipografía de la marca) en vez del texto en Pacifico con la flecha. Antes
   eran `.gob-cta`, la única excepción escrita a "Pacifico jamás en botones";
   esa excepción se retira y la regla original vuelve a valer sin excepciones.

   ⛔⛔ EL COLOR NO ES GUSTO, ES CONTRASTE, y está medido:
       naranja + letra blanca ......... 3.50  ⚠️ sólo pasa si la letra va GRANDE
       naranja + letra azul marino .... 5.09  ✅
       azul marino + letra blanca .... 13.77  ✅  ← el elegido
   Por eso el de antes tenía que ir a 24px: a 20px reprobaba. Un botón normal no
   puede apoyarse en eso, así que el primario es AZUL MARINO con letra blanca.
   El naranja se queda para `.btn-accent`, y ahí va con letra OSCURA (5.09), no
   blanca.

   ⭐ Y las variantes vuelven a significar algo. Estaban VACÍAS desde la decisión
   de Pacifico, así que "No, déjalo así" y "Sí, cancelar la renovación" se veían
   idénticos siendo opuestos. El marcado ya las distinguía (`btn-solido` 10 usos,
   `btn-linea`/`btn-line` 7, `btn-accent` 1): aquí se les devuelve su forma. */
.btn, .gc-btn, .corner-cta, .plan-elegir {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 24px; font-family:var(--font); font-weight:700; font-size:16px; line-height:1.25;
    color:#fff; background:var(--ink); border:1.5px solid var(--ink); border-radius:12px;
    box-shadow:0 1px 2px rgba(20,35,63,.06), 0 6px 18px rgba(20,35,63,.10);
    backdrop-filter:none; -webkit-backdrop-filter:none; text-decoration:none; cursor:pointer;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover, .gc-btn:hover, .corner-cta:hover, .plan-elegir:hover {
    background:color-mix(in srgb, var(--ink) 86%, #fff);
    border-color:color-mix(in srgb, var(--ink) 86%, #fff);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(20,35,63,.08), 0 10px 26px rgba(20,35,63,.14);
}
.btn:focus-visible, .gc-btn:focus-visible, .corner-cta:focus-visible, .plan-elegir:focus-visible {
    outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px;
}
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* SECUNDARIO: el contorno. Es el "No, déjalo así" frente al "Sí, cancelar". */
.btn-linea, .btn-line {
    color:var(--ink); background:transparent; box-shadow:none;
}
.btn-linea:hover, .btn-line:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); }

/* PRIMARIO EXPLÍCITO: igual que el de base, para las páginas que lo declaran. */
.btn-solido { color:#fff; background:var(--ink); border-color:var(--ink); }

/* ACENTO: el naranja de la marca. ⛔ Con letra OSCURA (5.09), nunca blanca (3.50). */
.btn-accent {
    color:#0a1730; background:var(--accent); border-color:var(--accent);   /* #0a1730 y no var(--ink): con --ink da 4.47, MEDIDO, y reprueba por un pelo */
    box-shadow:0 1px 2px rgba(232,93,4,.12), 0 6px 18px rgba(232,93,4,.18);
}
.btn-accent:hover { background:var(--accent-bright); border-color:var(--accent-bright); }

/* Botón que se llena de ancho (la caja lo usa). */
.btn-ancho { width:100%; }
/* El "Elegir este" de las tarjetas de la caja (lo pinta pago.js). */
.plan-elegir { margin-top:auto; }

/* ⛔⛔ SOBRE FONDO OSCURO SE INVIERTE, o el botón DESAPARECE. La tarjeta de
   mi-plan y la de la caja son azul marino: un botón azul marino encima no se ve.
   Ahí el primario va en claro (letra oscura sobre papel) y el secundario en
   contorno blanco. */
.paso-login .btn, .banda-oscura .btn, .paso-login .plan-elegir, .banda-oscura .plan-elegir {
    color:var(--ink); background:#f5f0e8; border-color:#f5f0e8;
    box-shadow:0 1px 2px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.22);
}
.paso-login .btn:hover, .banda-oscura .btn:hover { background:#fff; border-color:#fff; }
.paso-login .btn-linea, .paso-login .btn-line,
.banda-oscura .btn-linea, .banda-oscura .btn-line {
    color:#f5f0e8; background:transparent; border-color:rgba(245,240,232,.5); box-shadow:none;
}
.paso-login .btn-linea:hover, .paso-login .btn-line:hover,
.banda-oscura .btn-linea:hover, .banda-oscura .btn-line:hover { background:rgba(255,255,255,.1); border-color:#f5f0e8; }

/* ── Títulos grandes (estilo Apple): ceja chiquita y el título enorme ─────────
   `section h2.tg` (0,1,2) le gana a cualquier `.algo h2` (0,1,1) por especificidad,
   no por orden. background:none y el fill sólido porque varias páginas pintan sus
   h2 con un degradado navy y background-clip:text. */
section h2.tg, .tg-h {
    font-family:var(--display); font-weight:800; color:var(--ink);
    background:none; -webkit-text-fill-color:currentColor;
    font-size:clamp(2.6rem, 6.4vw, 4.8rem); line-height:1.04; letter-spacing:-.028em;
    text-wrap:balance; margin:0;
}
section h2.tg em, .tg-h em { font-style:normal; color:var(--accent); -webkit-text-fill-color:var(--accent); }
section h2.tg .wordmark, .tg-h .wordmark { vertical-align:-.26em; }
.tg-ceja { display:block; margin-bottom:16px; font-size:1rem; font-weight:700; letter-spacing:.01em; color:var(--ink-soft); }
section h2.tg + p, .tg-h + p { margin-top:20px; font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.55; max-width:56ch; }
@media (max-width:620px) { section h2.tg, .tg-h { font-size:clamp(2.2rem, 10vw, 2.9rem); letter-spacing:-.022em; } }

/* ── El menú: pantalla partida (crema con Ana | navy con las páginas) ───────── */
.menu {
    position:fixed; inset:0; z-index:90; display:grid; grid-template-columns:1fr 1fr;
    opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.menu.open { opacity:1; visibility:visible; }
.menu-visual {
    position:relative; background:var(--paper-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:48px;
    transform:translateX(-26px); transition:transform .55s var(--ease);
}
.menu.open .menu-visual { transform:none; }
.menu-ana { height:clamp(120px, 18vh, 180px); width:auto; }
/* ⚠️ 22-sep · este pie estaba ANCLADO al fondo del panel (position:absolute, bottom:36px) porque
   arriba iba una fila de tres logos chicos. Alan la quitó: debajo de Ana sólo queda este mensaje.
   Si se dejaba anclado quedaba un hueco grande entre Ana y él, así que vuelve al flujo y cae
   justo debajo, con el espacio que ya reparte .menu-visual. Y crece: de .7rem a 1rem, y su logo
   de 18 a 26 px. Se van con la fila sus tres reglas .menu-logos, que quedaban huérfanas. */
.menu-visual-foot { display:flex; align-items:center; gap:13px; font-family:var(--etiqueta); font-size:1rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.menu-visual-foot img { height:26px; width:auto; }
.menu-panel { background:var(--ink-2); color:#fff; padding:40px 52px; display:flex; flex-direction:column; }
.menu-top { display:flex; justify-content:space-between; align-items:center; }
.menu-brand { font-family:var(--etiqueta); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.menu-close {
    width:46px; height:46px; border-radius:4px; border:1.5px solid rgba(255,255,255,.3); background:none; cursor:pointer;
    color:#fff; font-size:1.05rem; font-family:inherit; display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.menu-close:hover { border-color:#fff; background:rgba(255,255,255,.08); }
/* ⛔⛔ EL MENÚ ES EL MISMO EN NUEVE PANTALLAS, Y LA DÉCIMA ES UNA EXCEPCIÓN A PROPÓSITO.
   /planes/mi-plan/ NO lleva este menú y NO se le debe poner. Tiene prohibido enlazar a la tienda
   y a la caja: `qa/mi-plan-pagina.mjs` exige que sus únicos enlaces sean la portada, los dos
   legales y el correo de soporte, y se pone roja si aparece cualquier otro. Ponerle este menú
   metría /planes/, que ES la caja, y rompe la decisión de Alan del 14-sep: la app no vende.
   ⚠️ 22-sep · salió fuera la entrada «Comparar». No estaba rota (apuntaba a /planes/#comparar),
   pero anunciaba una página que ya no existe y duplicaba a «Planes», que es donde vive la tabla.
   La página /comparar/ sigue dando 301, ahora a /planes/ a secas, para las ligas viejas y para
   Google. ⚠️ Apuntaba a /planes/#comparar y Alan lo cambió: nada debe guiar exactamente a esa
   sección, ni siquiera el redirect. La tabla se encuentra bajando, como cualquier otra parte. */
.menu-links { list-style:none; margin:auto 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.menu-links a {
    font-family:var(--display); font-weight:400; text-transform:uppercase; text-decoration:none;
    font-size:clamp(1.6rem, 3.2vw, 2.7rem); color:rgba(255,255,255,.92); letter-spacing:.02em;
    display:block; width:100%; transition:color .25s, transform .5s var(--ease), opacity .5s var(--ease);
    transform:translateY(18px); opacity:0;
}
.menu.open .menu-links a { transform:none; opacity:1; }
.menu.open .menu-links li:nth-child(1) a { transition-delay:.08s; }
.menu.open .menu-links li:nth-child(2) a { transition-delay:.13s; }
.menu.open .menu-links li:nth-child(3) a { transition-delay:.18s; }
.menu.open .menu-links li:nth-child(4) a { transition-delay:.23s; }
.menu.open .menu-links li:nth-child(5) a { transition-delay:.28s; }
.menu.open .menu-links li:nth-child(6) a { transition-delay:.33s; }
.menu-links a:hover { color:var(--accent); }
/* La página en la que estás: naranja fija, para ubicarse. */
.menu-links a[aria-current="page"] { color:var(--accent-bright); }
/* ⚠️ 22-sep · LAS DOS ENTRADAS LARGAS SE AGRUPAN. Decían "Experiencias Financieras Personales"
   y "Experiencias Financieras Compartidas" completas, 35 y 47 caracteres, y a la escala del menú
   se comían tres renglones cada una. Encogerlas (el intento anterior) las dejaba ilegíbles al lado
   de PLANES o FAQ. Ahora la parte repetida va UNA vez como cabecera y lo que cambia queda corto,
   así que las dos ligas pueden ir grandes otra vez. Orden de Alan: "que no se vean tan chicas". */
.menu-grupo { margin-bottom:6px; }
.menu-grupo-t {
    display:block; font-family:var(--display); font-weight:400; text-transform:uppercase;
    font-size:clamp(.92rem, 1.5vw, 1.2rem); letter-spacing:.12em;
    color:rgba(255,255,255,.5); margin-bottom:4px;
}
.menu-grupo a { font-size:clamp(1.45rem, 2.8vw, 2.3rem); padding-left:.55em; }
.menu-foot { display:flex; align-items:center; gap:22px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); flex-wrap:wrap; }
/* Los tres del pie del menú en la letra de marca y un escalón más chicos que los botones de
   página, para que quepan en un renglón en escritorio (Alan, 22-sep). "Entrar" sin flecha:
   es la puerta de siempre, no una invitación. */
.menu-enter { font-family:'Pacifico', cursive; font-weight:400; font-size:20px; line-height:1.3; color:#fff; text-decoration:none; padding:8px 0; }
.menu-foot .btn { font-size:20px; padding:8px 4px; }
.menu-foot .btn::after { width:30px; height:15px; }
.menu-enter:hover { color:var(--accent); }
/* 22-sep · la puerta de quien YA tiene cuenta. Era el texto «¿Ya tienes cuenta? Renueva o cambia
   tu plan» hacia la caja; Alan lo cambió por el botón «Mi plan» hacia /planes/mi-plan/, que es
   donde inicia sesión. Renglón aparte, y fit-content para que sea botón y no barra. */
.menu-miplan { width:fit-content; }
@media (max-width:760px){
    .menu { grid-template-columns:1fr; }
    .menu-visual { display:none; }
    .menu-panel { padding:28px 24px; overflow-y:auto; }
    .menu-links { gap:2px; margin:28px 0; }
    .menu-foot { gap:12px; }
    /* En teléfono los tres del pie caben en un renglón a 16px (medido en 390: 332 de 342). */
    .menu-enter, .menu-foot .btn { font-size:16px; }
    .menu-foot .btn::after { width:24px; height:12px; }
}

/* ── Móvil: la esquina se aprieta ─────────────────────────────────────────── */
@media (max-width:520px) {
    .corner-logo { top:18px; left:20px; }
    .corner-logo-svg { height:1.8rem; }
    .corner-menu { top:16px; right:18px; width:46px; height:46px; }
    .corner-cta { top:16px; right:74px; height:46px; padding:0 4px; }
}

/* ── Fila de anclas de la propia página (bajo el título) ─────────────────────
   Las anclas internas se fueron del encabezado (el menú es de páginas); las páginas
   largas las conservan aquí. Se recorre a los lados en móvil sin romper el ancho. */
.subnav { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:10px 0; margin:0 auto; max-width:var(--maxw); border-bottom:1px solid var(--rule); }
.subnav::-webkit-scrollbar { display:none; }
.subnav a { flex:0 0 auto; padding:8px 14px; font-size:.9rem; font-weight:700; color:var(--ink-soft); text-decoration:none; border-radius:8px; white-space:nowrap; }
.subnav a:hover { color:var(--ink); background:var(--paper-2); }
.subnav-wrap { padding:0 32px; }
/* Páginas sin banda de portada (legales y caja): el contenido deja libre la esquina. */
body.con-aire { padding-top:76px; }

/* En móvil el título de las páginas con banda chocaba con "Pruébala gratis": la banda
   de portada (.phero.banda-hero, 0,2,0) deja el aire de la esquina. */
@media (max-width:620px) { .phero.banda-hero { padding-top:104px; } }

/* Texto solo para lectores de pantalla (h1 oculto a la vista, no al lector). */
.solo-lectores { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
    .btn::after, .gc-btn::after, .corner-cta::after { animation:none; }
    .menu, .menu-visual, .menu-links a { transition:none; }
}

/* ═══════════════════════ EL PIE, COMPARTIDO POR LAS DIEZ PÁGINAS ═══════════════════════
   22-sep · Hasta hoy había SIETE pies distintos: la portada, planes y seguridad con el
   completo (seguridad con un enlace de más), el FAQ con uno mínimo, términos, aviso y
   borrar-cuenta con otro de cuatro ligas, y pago, código y Mi plan SIN pie. Cada uno con su
   CSS copiado dentro. Aquí vive uno solo y las páginas lo heredan.
   ⛔⛔ LA RUTA DEL FONDO VA ABSOLUTA, Y NO ES DETALLE: en la portada era relativa
   («assets/…»), y una ruta relativa dentro de una hoja se resuelve contra LA HOJA, no contra
   la página. Copiada tal cual desde aquí apuntaría a /assets/css/assets/… y el fondo
   desaparecería SIN dar error: sólo se vería el navy plano y nadie sabría por qué.
   ⛔ El wordmark hereda la tinta oscura de la marca; sobre el navy del pie iría navy sobre
   navy, así que aquí se fuerza blanco. */
.footer {
    background-color:#020923;
    background-image:linear-gradient(rgba(2,9,35,.72), rgba(2,9,35,.86)), url('/assets/Ana_Alan_Mapachi/fondo-destellos.webp');
    background-size:cover; background-position:center bottom; background-repeat:no-repeat;
    padding:60px 0 34px; color:rgba(255,255,255,.72);
}
/* ⛔⛔ EL CONTENEDOR DEL PIE SE DEFINE AQUI, Y NO ES DETALLE. La clase .wrap existe en el
   sitio con DOS definiciones distintas (la portada usa width:min(1180px,…), las subpaginas
   max-width:var(--maxw) con padding), y TRES paginas no la definen en absoluto: terminos, aviso
   y borrar-cuenta, que son documentos legales con su propia maqueta. Medido el 22-sep con
   Playwright: en esas tres el pie se desbordaba a lo ancho, en 1440 Y en 390.
   ⇒ Se define acotado al pie (.footer .wrap gana por especificidad a .wrap suelto), para que el
   pie mida lo mismo en las diez sin tocar la maqueta de nadie. */
.footer .wrap { width:min(1180px, calc(100% - 48px)); margin:0 auto; max-width:none; padding:0; }
/* ⛔⛔ minmax(0,…) Y NO 1fr A SECAS. Una columna `1fr` es `minmax(auto,1fr)`, y `auto` NO baja
   de lo que mide su contenido. La segunda columna lleva "Experiencias Financieras Personales
   Compartidas", que es larguisima, asi que la rejilla empujaba hasta 1638 px en una ventana de
   1440. Medido con Playwright el 22-sep en terminos, aviso y borrar-cuenta: las tres desbordaban
   a lo ancho en 1440 Y en 390. Las demas paginas lo tapaban con su propia maqueta, que es peor:
   el defecto estaba en las diez y solo se veia en tres. */
.footer-top { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); gap:44px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand { margin-bottom:12px; color:#fff; }
/* ⛔⛔⛔ EL TAMANO DEL LOGOTIPO SE FIJA AQUI, Y SIN ESTO SE ROMPE LA PAGINA ENTERA. El archivo
   Anality1.png mide 888 px de ancho DE VERDAD. En la portada una regla global lo encogia a 32,
   pero terminos, aviso y borrar-cuenta no tienen esa regla: ahi salia a tamano natural y empujaba
   el documento a 928 px en una ventana de 390. Medido con Playwright el 22-sep, y comprobado
   contra main: ANTES de este pie esas paginas daban 390 y DESPUES 928, o sea que lo rompi yo.
   ⭐ La leccion: un pie compartido NO puede apoyarse en las reglas globales de cada pagina, porque
   cada pagina tiene las suyas. Todo lo que el pie necesita se declara aqui. */
.footer .brand img { height:30px; width:auto; }
.footer .wordmark { color:#fff; }
.footer-tag { font-size:.9rem; max-width:280px; color:rgba(255,255,255,.62); }
.footer-col h5 { font-family:var(--etiqueta); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:10px; }
.footer-col a, .footer-col span { display:block; padding:5px 0; font-size:.92rem; color:rgba(255,255,255,.72); text-decoration:none; }
.footer-col a:hover { color:#fff; }
.footer-bot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:.82rem; color:rgba(255,255,255,.55); }
.foot-eco { display:inline-flex; align-items:center; }
.foot-mapachi { height:18px; width:auto; vertical-align:middle; margin-left:7px; }
@media (max-width:980px){ .footer-top { grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:560px){ .footer-top { grid-template-columns:1fr; } }