/* Avanze — CSS de la maqueta (fiel). Fuentes locales + estilos originales. */
@font-face { font-family:'Outfit'; font-weight:500; font-display:swap; src:url('/assets/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:400; font-display:swap; src:url('/assets/fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap; src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:600; font-display:swap; src:url('/assets/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:600; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2'); }


:root{
  --bg:#0f0d0b;--surface:#171310;--surface2:#1d1610;--hatch1:#1d1813;--hatch2:#221c15;--sel:#26200f;
  --fg:#EDEAE3;--heading:#ffffff;--muted:#b3aa9c;--muted2:#8a8172;--faint:#5f584e;
  --border:rgba(246,192,118,.14);--border-strong:rgba(246,192,118,.24);
  --header-bg:rgba(15,13,11,.88);--logo-dim:#5c4a2b;
  --accent:#EE9B11;--accent2:#F6C076;--accent3:#F2AC4A;
}
:root[data-theme="light"]{
  --bg:#f6f3ec;--surface:#ffffff;--surface2:#fbf7f0;--hatch1:#ece5d8;--hatch2:#e1d8c8;--sel:#fbeacf;
  --fg:#34302a;--heading:#14110d;--muted:#5f574c;--muted2:#867c6c;--faint:#a79d8c;
  --border:rgba(150,110,40,.2);--border-strong:rgba(150,110,40,.34);
  --header-bg:rgba(248,245,238,.9);--logo-dim:rgba(246,192,118,.16);
  --accent:#e08a0a;--accent2:#c8760c;--accent3:#dd922c;
}
html{background:var(--bg)}
body{margin:0;background:var(--bg);font-family:'Space Grotesk',sans-serif;color:var(--fg);transition:background .3s,color .3s}
*{box-sizing:border-box}
input,textarea,select{font-family:'Space Grotesk',sans-serif}
a{color:var(--accent2);text-decoration:none}
a:hover{color:var(--accent)}
.avz-switch{width:46px;height:25px;border-radius:99px;background:var(--surface);border:1px solid var(--border-strong);position:relative;cursor:pointer;flex:none;padding:0}
.avz-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--accent);transition:transform .28s ease}
:root[data-theme="light"] .avz-knob{transform:translateX(21px)}
.avz-burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-strong);border-radius:9px;cursor:pointer;padding:0}
.avz-burger span{display:block;width:19px;height:2px;background:var(--fg);border-radius:2px}
@media(max-width:960px){
  .avz-nav{display:none !important}
  .avz-burger{display:flex !important}
  .avz-cta{display:none !important}
  .avz-lang{display:none !important}
}
@media(min-width:961px){ .avz-mobile-menu{display:none !important} }
/* ────────────────────────────────────────────────────────────────
   NOTA HISTÓRICA: las reglas de más abajo que usan [style*="prop: val"]
   (con espacio tras los dos puntos) vienen de la maqueta original, cuyo
   HTML formateaba los estilos inline con espacio. Nuestro HTML generado
   por PHP nunca lleva ese espacio (siempre "prop:val"), así que esas
   reglas heredadas NUNCA han hecho nada — bug detectado 2026-07-21.
   Se corrigen aquí quitando el espacio; los tamaños de letra responsive,
   el padding y el "inset" del radar vuelven a funcionar tal cual estaban
   pensados. El colapso de columnas (grid-template-columns) se sustituye
   por clases explícitas por sección (mucho más fiable y controlable).
   ──────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  [style*="font-size:58px"]{font-size:33px !important;letter-spacing:-1px !important}
  [style*="font-size:46px"]{font-size:29px !important}
  [style*="font-size:44px"]{font-size:28px !important}
  [style*="font-size:42px"]{font-size:27px !important}
  [style*="font-size:38px"]{font-size:26px !important}
  [style*="font-size:36px"]{font-size:25px !important}
  [style*="font-size:34px"]{font-size:24px !important}
  [style*="font-size:32px"]{font-size:24px !important}
  [style*="font-size:30px"]{font-size:23px !important}
  [style*="font-size:27px"]{font-size:22px !important}
}
@media(max-width:640px){
  [style*="px 48px"]{padding-left:18px !important;padding-right:18px !important}
  [style*=":0px 48px"],[style*=":0 48px"]{padding-left:18px !important;padding-right:18px !important}
  [style*="padding:44px 48px"]{padding:28px 20px !important}
  [style*="padding:40px 44px"]{padding:26px 20px !important}
  [style*="padding:40px 42px"]{padding:26px 20px !important}
  /* --- Pastilla IA con sentido: apilar --- */
  .iaSentido{grid-template-columns:1fr !important;gap:18px !important}
  /* --- Card destacado capacidades: apilar --- */
  .capFeat{grid-template-columns:1fr !important;gap:20px !important;padding:24px !important}
  /* --- Método CTA: apilar y botones en columna --- */
  .metodoCta{flex-direction:column !important;align-items:stretch !important;gap:20px !important;padding:26px 22px !important}
  .metodoCta-btns{flex-direction:column !important}
  .metodoCta-btn{text-align:center}
  /* --- Soluciones ¿Encaja? CTA: apilar --- */
  .encajaCta{flex-direction:column !important;align-items:stretch !important;gap:18px !important;padding:26px 22px !important}
  .encajaCta-btn{text-align:center}
  /* --- Portfolio (Home, casos destacados): mostrar carrusel, ocultar grid --- */
  .portGrid{display:none !important}
  .portCarousel{display:block !important}
}
@media(min-width:641px){ .portCarousel{display:none !important} }

/* ────────────────────────────────────────────────────────────────
   Rejillas responsive por clase (reemplaza al mecanismo roto de arriba
   para grid-template-columns). Convención de puntos de corte del sitio:
   escritorio > 900px · tablet 641–900px · móvil ≤ 640px.
   ──────────────────────────────────────────────────────────────── */

/* Home · "qué hacemos hoy" (5 capacidades): 2 cols → 1 col en móvil */
@media(max-width:640px){ .avz-grid-caps{grid-template-columns:1fr !important} }

/* Home · casos destacados (grid de escritorio; el carrusel ya cubre móvil) */
@media(max-width:900px) and (min-width:641px){ .portGrid{grid-template-columns:repeat(2,1fr) !important} }

/* Radar (Home): escritorio 220px|texto|botón · tablet 2 cols (botón bajo el texto) · móvil 1 col */
@media(max-width:900px) and (min-width:641px){
  .radarCta{grid-template-columns:220px 1fr !important;row-gap:18px}
  .radarCta-btn{grid-column:2;justify-self:start}
}
@media(max-width:640px){
  .radarCta{grid-template-columns:1fr !important;gap:24px !important;text-align:left;justify-items:start;padding:30px 22px !important}
  .radarDial{width:150px !important;height:150px !important;margin:0 auto}
  .radarDial > div[style*="inset:26px"]{inset:20px !important}
  .radarDial > div[style*="inset:52px"]{inset:40px !important}
  .radarCta .radarCta-btn{width:100%;text-align:center}
}

/* Soluciones (listado): 2 cols → 1 col en móvil */
@media(max-width:640px){ .avz-grid-sol{grid-template-columns:1fr !important} }

/* Solución (detalle): bloques 3 cols → 2 tablet → 1 móvil */
@media(max-width:900px) and (min-width:641px){ .avz-grid-bloques{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:640px){ .avz-grid-bloques{grid-template-columns:1fr !important} }

/* Empresa: stats 4 cols → 2 tablet/móvil · fotos 2 → 1 móvil · valores 3 → 2 tablet → 1 móvil */
@media(max-width:900px){ .avz-grid-stats{grid-template-columns:repeat(2,1fr) !important} }
/* Empresa · foto del edificio a todo el ancho (antes eran dos fotos en rejilla) */
.avz-empresa-foto{height:360px}
@media(max-width:900px){ .avz-empresa-foto{height:300px} }
@media(max-width:640px){ .avz-empresa-foto{height:220px} }
@media(max-width:900px) and (min-width:641px){ .avz-grid-valores{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:640px){ .avz-grid-valores{grid-template-columns:1fr !important} }

/* Casos (listado completo): 3 cols escritorio → 2 tablet → 1 móvil, con paginador */
@media(max-width:900px) and (min-width:641px){ .avz-grid-casos{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:640px){ .avz-grid-casos{grid-template-columns:1fr !important} }

/* Carrusel de casos (Home, móvil): scroll nativo con snap, deslizable con
   el dedo (el navegador gestiona el arrastre solo, más fluido y accesible
   que reimplementarlo con JS). Sustituye al marquee automático anterior. */
.portCarouselTrack{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-padding-left:18px;
  scrollbar-width:none;-ms-overflow-style:none;
}
/* El snap solo se activa mientras el usuario interactúa (clase alternada
   por JS). Si estuviera siempre activo, los micro-incrementos del autoplay
   quedarían "atrapados" cerca del punto de encaje y no se apreciaría
   movimiento alguno (el arrastre manual sí escapa esa zona, por eso ese
   sí funcionaba). */
.portCarouselTrack.is-snap{scroll-snap-type:x proximity}
.portCarouselTrack::-webkit-scrollbar{display:none}
.portCarouselItem{scroll-snap-align:start;scroll-snap-stop:always}

/* Hero (Home): el logo grande animado se oculta en móvil — antes de empezar
   a leer el texto se comía demasiado espacio vertical con poco aporte. */
@media(max-width:640px){ .avz-hero-logo-col{display:none !important} }

/* Método: fila num|título|descripción (90px 260px 1fr) → en móvil los 90+260px
   fijos ya no dejan sitio a la descripción (quedaba con ancho 0, invisible).
   Se apila todo en 1 columna. */
@media(max-width:640px){ .avz-grid-metodo{grid-template-columns:1fr !important;gap:10px !important} }

/* Utilidad genérica: cualquier grid de 2 columnas pasa a 1 en móvil
   (hero, formularios, secciones de detalle en 2 columnas...) */
@media(max-width:640px){ .avz-stack-mobile{grid-template-columns:1fr !important} }

/* Cabecera: blur solo en escritorio. En móvil, position:sticky + backdrop-filter
   en el MISMO elemento es un combo con fallos históricos de compositing en
   WebKit/iOS (la cabecera deja de quedarse fija al hacer scroll). Se evita
   quitando el blur y subiendo la opacidad del fondo en pantallas pequeñas. */
.avz-header,.avz-mobile-menu{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:640px){
  .avz-header,.avz-mobile-menu{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  :root{--header-bg:rgba(15,13,11,.97)}
  :root[data-theme="light"]{--header-bg:rgba(248,245,238,.97)}
}

/* Footer: 3 columnas de enlaces → máx. 2 por fila en móvil (envuelve) */
@media(max-width:640px){
  .avz-footer-outer{flex-direction:column !important;gap:28px !important}
  .avz-footer-cols{gap:28px 40px !important;flex-wrap:wrap !important}
  .avz-footer-col{flex:1 1 40% !important;min-width:130px}
}
@keyframes avz-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-50px) scale(1.18)}}
@keyframes avz-drift2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-80px,40px) scale(1)}}
@keyframes avz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes avz-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes avz-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes avz-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes avz-scan{0%{top:-4%}100%{top:104%}}
@keyframes avz-rise{from{transform:translateY(26px)}to{transform:translateY(0)}}
@keyframes avz-float{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-14px) rotate(45deg)}}
@keyframes avz-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes avz-illum{0%,50%,100%{filter:none}18%{filter:brightness(1.3) saturate(1.3) drop-shadow(0 0 4px rgba(238,155,17,.8))}}
.avz-hero-mark rect:nth-of-type(n+6){animation:avz-illum 2.4s ease-in-out infinite}
.avz-hero-mark rect:nth-of-type(6){animation-delay:0s}
.avz-hero-mark rect:nth-of-type(7){animation-delay:0s}
.avz-hero-mark rect:nth-of-type(8){animation-delay:.3s}
.avz-hero-mark rect:nth-of-type(9){animation-delay:.3s}
.avz-hero-mark rect:nth-of-type(10){animation-delay:.6s}
.avz-hero-mark rect:nth-of-type(11){animation-delay:.3s}
.avz-hero-mark rect:nth-of-type(12){animation-delay:.3s}
.avz-hero-mark rect:nth-of-type(13){animation-delay:.6s}
.avz-hero-mark rect:nth-of-type(14){animation-delay:.6s}
.avz-hero-mark rect:nth-of-type(15){animation-delay:.9s}
.avz-hero-mark rect:nth-of-type(16){animation-delay:.9s}
.avz-hero-mark rect:nth-of-type(17){animation-delay:1.2s}


/* ── Añadidos (no rompen la maqueta) ─────────────────── */
img{max-width:100%;display:block}
h1,h2,h3{margin:0}
/* Menú móvil: controlado por clase (el toggle lo hace app.js) */
.avz-mobile-menu{flex-direction:column;display:none}
.avz-mobile-menu.is-open{
  display:flex;
  /* En móvil apaisado la pantalla mide ~390px de alto y el menú es más
     largo que eso, así que se quedaba cortado por abajo sin forma de
     llegar al resto: es sticky, de modo que acompaña al scroll de la
     página en vez de dejar ver lo que sobresale. Se limita a lo que cabe
     bajo la cabecera y se le da scroll propio.
     dvh tiene en cuenta las barras del navegador móvil, que vh ignora. */
  max-height:calc(100vh - 69px);
  max-height:calc(100dvh - 69px);
  overflow-y:auto;
  overscroll-behavior:contain;          /* no arrastra la página al llegar al final */
  -webkit-overflow-scrolling:touch;
  /* Los estilos en línea vienen de la maqueta, así que hace falta !important
     para reservar hueco bajo la barra de gestos del móvil. */
  padding-bottom:max(20px, env(safe-area-inset-bottom)) !important;
}
@media(min-width:961px){ .avz-mobile-menu.is-open{display:none} }
body.menu-open{overflow:hidden}
/* Accesibilidad: saltar al contenido */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--accent);color:#0f0d0b;padding:8px 14px;border-radius:8px;font-size:13px}
.skip-link:focus{left:16px}
/* Enlaces que envuelven bloques clicables mantienen el color del contenido */
a.blocklink{color:inherit;text-decoration:none;display:block}

/* ── Escaparate de logo de cliente (casos de éxito) ──────────────────
   Ya no se muestran capturas de los proyectos: la cabecera de cada
   tarjeta es un "escaparate de marca" con el logo del cliente centrado
   sobre un degradado limpio, sin texturas.

   MISMO PATRÓN PARA TODOS, TEÑIDO POR CASO: cada caso define su color
   base de marca en `--caso-color` (atributo style, desde el backoffice)
   y el degradado se calcula a partir de él con color-mix(). Así todas
   las pastillas comparten el mismo lenguaje visual pero cada caso tiene
   personalidad propia. Sin color definido, cae al acento de Avanze.

   Dos variantes de luminosidad, según el tipo de logo:
     · negativo (logo blanco) → fondo oscuro teñido
     · positivo (logo negro)  → fondo claro teñido
   El fondo es fijo, independiente del tema claro/oscuro de la página,
   para garantizar el contraste del logo en todo momento.

   Cada bloque declara primero una versión sólida sin color-mix: los
   navegadores que no lo soporten se quedan con ella y todo sigue
   funcionando (degradación elegante). */
.avz-caso-head{
  --caso-color:var(--accent);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:linear-gradient(158deg,#1d1712,#0d0b09);
  background:
    radial-gradient(88% 116% at 50% 42%,
      color-mix(in srgb,var(--caso-color) 40%,transparent),transparent 72%),
    linear-gradient(158deg,
      color-mix(in srgb,var(--caso-color) 13%,#17120f),
      #0c0a08 78%);
}
.avz-caso-head img{position:relative;z-index:1;max-width:74%;max-height:56%;object-fit:contain;display:block}
.avz-caso-head.is-positivo{
  background:linear-gradient(160deg,#fbf7f0,#f4efe4);
  background:
    radial-gradient(104% 94% at 26% 2%,
      color-mix(in srgb,var(--caso-color) 30%,transparent),transparent 68%),
    linear-gradient(160deg,
      color-mix(in srgb,var(--caso-color) 7%,#ffffff),
      #ffffff 82%);
}
/* Sin logo todavía: marca de agua con el rombo de Avanze, discreta */
.avz-caso-mark{position:relative;z-index:1;opacity:.4;color:var(--accent)}

/* Pastilla del logo en la ficha de detalle (debajo de la URL del cliente):
   mismo patrón teñido, en formato compacto en línea. */
.avz-logo-pill{
  --caso-color:var(--accent);
  display:inline-flex;align-items:center;
  padding:12px 20px;border-radius:10px;
  background:linear-gradient(158deg,#1d1712,#100e0c);
  background:
    radial-gradient(120% 150% at 50% 40%,
      color-mix(in srgb,var(--caso-color) 34%,transparent),transparent 74%),
    linear-gradient(158deg,
      color-mix(in srgb,var(--caso-color) 13%,#17120f),
      #0c0a08 80%);
  border:1px solid rgba(246,192,118,.16);
  border-color:color-mix(in srgb,var(--caso-color) 26%,rgba(255,255,255,.1));
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.avz-logo-pill img{max-width:180px;max-height:44px;object-fit:contain;display:block}
.avz-logo-pill.is-positivo{
  background:linear-gradient(160deg,#fbf7f0,#f4efe4);
  background:
    radial-gradient(130% 140% at 28% 4%,
      color-mix(in srgb,var(--caso-color) 26%,transparent),transparent 72%),
    linear-gradient(160deg,
      color-mix(in srgb,var(--caso-color) 7%,#ffffff),
      #ffffff 84%);
  border-color:rgba(20,17,13,.12);
  border-color:color-mix(in srgb,var(--caso-color) 22%,rgba(20,17,13,.1));
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}

/* ── Testimonio del cliente (ficha de caso, opcional) ────────────────
   Frase grande bajo el logo, anclada por una comilla de apertura
   sobredimensionada en el color de marca del caso (no se entrecomilla
   además el texto, para no duplicar las comillas). La firma —nombre y
   cargo— va mucho más pequeña y solo aparece si se ha rellenado.
   Si no hay frase, la vista no imprime nada de este bloque. */
.avz-testimonio{
  --caso-color:var(--accent);
  position:relative;
  margin:0 0 40px;
  padding:2px 0 0 48px;
  max-width:58ch;
}
.avz-testimonio::before{
  content:'\201C';
  position:absolute;left:-2px;top:-14px;
  font:700 82px/1 'Outfit',system-ui,sans-serif;
  color:var(--caso-color);
  opacity:.45;
  pointer-events:none;
}
.avz-testimonio-frase{
  margin:0;
  font-size:25px;font-weight:600;line-height:1.42;letter-spacing:-.4px;
  color:var(--heading);
  text-wrap:balance;
}
.avz-testimonio-firma{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin-top:16px;
}
.avz-testimonio-autor{font-size:13.5px;font-weight:700;color:var(--fg)}
.avz-testimonio-cargo{
  font:500 12px 'IBM Plex Mono',monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);
}
@media (max-width:900px){
  .avz-testimonio-frase{font-size:22px}
}
@media (max-width:640px){
  .avz-testimonio{padding-left:0;margin-bottom:32px}
  .avz-testimonio::before{position:static;display:block;font-size:56px;margin-bottom:-26px}
  .avz-testimonio-frase{font-size:19.5px;line-height:1.45;letter-spacing:-.2px}
}

/* ── Consentimiento de cookies ───────────────────────────────────────
   Banner inferior con tres opciones (rechazar / configurar / aceptar) y
   un panel plegable con una fila por categoría. Las necesarias van
   siempre activas y su interruptor está deshabilitado, porque sin ellas
   el sitio no funciona: mostrarlo apagable sería engañoso.
   Mismo lenguaje visual que el resto: variables de tema y bordes .avz-*. */
.avz-cc-back{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,7,6,.55);backdrop-filter:blur(2px);
}
.avz-cc{
  position:fixed;z-index:201;
  inset:auto auto 18px 18px;      /* esquina inferior izquierda */
  width:min(420px,calc(100vw - 36px));
  background:var(--surface2);border:1px solid var(--border-strong);
  border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.4);
  max-height:calc(100vh - 36px);display:flex;flex-direction:column;
}
.avz-cc.is-panel{width:min(560px,calc(100vw - 36px))}
/* IMPORTANTE: display:flex anula por sí solo el atributo hidden del HTML,
   así que hay que devolver explícitamente display:none. Sin esto el banner
   no se cerraba nunca y los botones parecían no funcionar. */
.avz-cc[hidden],.avz-cc-back[hidden]{display:none !important}
.avz-cc-body{padding:20px;overflow-y:auto}
.avz-cc-title{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--heading);letter-spacing:-.3px}
.avz-cc-text{margin:0;font-size:13.5px;line-height:1.6;color:var(--fg)}
.avz-cc-actions{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  padding:0 20px 20px;
}
.avz-cc-btn{
  font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:8px;
  cursor:pointer;border:1px solid var(--border-strong);
  background:transparent;color:var(--fg);
}
.avz-cc-btn:hover{border-color:var(--accent);color:var(--accent2)}
.avz-cc-btn.is-primary{
  background:var(--accent);color:#0f0d0b;border-color:var(--accent);font-weight:700;
}
.avz-cc-btn.is-primary:hover{background:var(--accent2);color:#0f0d0b}

/* Filas de categoría */
.avz-cc-row{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;border-top:1px solid var(--border);
}
.avz-cc-row:first-of-type{margin-top:6px}
.avz-cc-row-txt{flex:1;min-width:0}
.avz-cc-row-name{font-size:14px;font-weight:700;color:var(--heading);margin-bottom:4px}
.avz-cc-row-desc{font-size:12.5px;line-height:1.55;color:var(--muted)}
.avz-cc-row-cookies{
  font:500 11.5px 'IBM Plex Mono',monospace;color:var(--muted2);margin-top:6px;
}
.avz-cc-fixed{
  font:600 11px 'IBM Plex Mono',monospace;color:var(--accent);
  letter-spacing:.08em;white-space:nowrap;padding-top:3px;
}

/* Interruptor accesible: el input real queda oculto pero operable con teclado */
.avz-cc-sw{position:relative;flex:none;width:46px;height:25px}
.avz-cc-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.avz-cc-sw span{
  position:absolute;inset:0;border-radius:99px;pointer-events:none;
  background:var(--surface);border:1px solid var(--border-strong);transition:background .2s,border-color .2s;
}
.avz-cc-sw span::after{
  content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--muted2);transition:transform .28s ease,background .2s;
}
.avz-cc-sw input:checked + span{border-color:var(--accent)}
.avz-cc-sw input:checked + span::after{transform:translateX(21px);background:var(--accent)}
.avz-cc-sw input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:640px){
  .avz-cc{inset:auto 10px 10px 10px;width:auto}
  .avz-cc.is-panel{width:auto}
  .avz-cc-actions{padding:0 16px 16px}
  .avz-cc-actions .avz-cc-btn{flex:1 1 100%;text-align:center}
  .avz-cc-body{padding:18px 16px}
}

/* ── Botones flotantes ───────────────────────────────────────────────
   Dos, en esquinas opuestas para que nunca se solapen: preferencias de
   cookies abajo a la izquierda (junto a donde sale el banner) y volver
   arriba abajo a la derecha. Ambos se ocultan con .is-off en lugar de
   con display, para poder desvanecerlos. */
.avz-fab{
  position:fixed;z-index:120;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border-strong);
  color:var(--muted);cursor:pointer;padding:0;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:opacity .25s ease,transform .25s ease,color .2s,border-color .2s,background .2s;
}
.avz-fab:hover{color:var(--accent);border-color:var(--accent);background:var(--surface)}
.avz-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.avz-fab.is-off{opacity:0;pointer-events:none;transform:translateY(10px)}
.avz-fab[hidden]{display:none !important}
.avz-fab-cookies{left:18px;bottom:18px}
.avz-fab-top{right:18px;bottom:18px}
@media (max-width:640px){
  .avz-fab{width:40px;height:40px}
  .avz-fab-cookies{left:12px;bottom:12px}
  .avz-fab-top{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .avz-fab{transition:none}
}

/* Logotipos institucionales de la página de financiación: en pantallas
   estrechas se apilan centrados en lugar de encogerse hasta ser ilegibles. */
@media (max-width:640px){
  .avz-fondos-logos{flex-direction:column;justify-content:center;gap:24px;padding:24px 20px}
  .avz-fondos-logos img{height:52px}
}

/* Radar IA: rejillas que genera radar.js. Llevan estilos en línea fieles a la
   maqueta, y a 390px las tres columnas de opciones se salían 18px de la
   pantalla. Se adaptan con clases, como el resto de rejillas del sitio. */
@media (max-width:900px){
  .avz-radar-opts{grid-template-columns:repeat(2,1fr) !important}
  .avz-radar-cards{grid-template-columns:1fr !important}
}
@media (max-width:640px){
  .avz-radar-opts{grid-template-columns:1fr !important}
  .avz-radar-form{grid-template-columns:1fr !important}
}