html,body{margin:0;background:#ffffff;color:#23384f;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center}
h1{color:#23384f;font-weight:600;margin:0 0 8px}
p{color:#586c82;margin:0}
footer{padding:24px 16px;text-align:center;color:#586c82;font-size:14px;background:#f7faff}
footer a{color:#2E9BF0;text-decoration:none;font-weight:600}
footer a:hover,footer a:focus{color:#E0A93B}
main a{color:#2E9BF0}main a:hover,main a:focus{color:#E0A93B}
.acceso-app{margin:20px 0 0;font-size:17px}.acceso-app a{font-weight:600}
/* Pie legal (copiado de legal.css, regla 1c de ORDEN_PAGINAS_LEGALES_WEB: no se carga legal.css en estas páginas) */
.pie-legal{background:#f7faff;color:#586c82;padding:24px 16px;text-align:center;font-size:14px;display:grid;gap:8px}
.pie-legal p{margin:0;color:#586c82}.pie-legal b{color:#23384f}.pie-legal nav a{color:#23384f;text-decoration:none}
.pie-legal nav a:hover,.pie-legal nav a:focus{color:#23384f;text-decoration:underline}
.credito a.runcodeai{display:inline-flex;align-items:center;gap:8px;color:#586c82;text-decoration:none}
.credito a.runcodeai b{color:#2E9BF0;font-weight:600}
.credito .logo-rc{border-radius:50%;display:block}
.credito a.runcodeai:hover b,.credito a.runcodeai:focus b{color:#E0A93B}
.pie-legal{line-height:1.6}.pie-legal nav a,.pie-legal .credito a{font-weight:400}
/* Cabecera de portada (ENCARGO_A_WEB_PORTADA_20260923, rama APP · 23/09/2026) */
.afb-cab{background:#f7faff;border-bottom:1px solid #1c2a44;padding:14px 16px 18px}
.afb-nav{max-width:1200px;margin:0 auto;display:flex;align-items:stretch;justify-content:space-between;gap:16px}
.afb-tab{flex:1 1 0;box-sizing:border-box;min-width:260px;text-align:center;display:flex;align-items:center;justify-content:center;padding:12px 20px;background:#ffffff;border:1px solid #1c2a44;border-radius:10px 10px 0 0;color:#23384f;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.afb-tab:hover,.afb-tab:focus-visible{color:#165bb9;border-color:#165bb9;background:#101c33}
.afb-tab[aria-current="page"]{border-bottom-color:#165bb9;color:#165bb9}
.afb-marca{flex:0 1 auto;align-self:center;text-align:center;color:#23384f;font-size:15px;margin:0}
.afb-destacado{max-width:1200px;margin:16px auto 0;text-align:center}
.afb-destacado a{display:inline-block;padding:14px 26px;color:#926300;border:2px solid #926300;border-radius:10px;font-size:19px;font-weight:700;letter-spacing:.2px;text-decoration:none}
.afb-destacado a:hover,.afb-destacado a:focus-visible{background:#926300;color:#1a1300}
.afb-interes{max-width:1200px;margin:8px auto 0;text-align:center;color:#586c82;font-size:13px}
@media(max-width:820px){
  .afb-nav{flex-direction:column}
  .afb-tab{flex:0 0 auto;min-width:0;width:100%;border-radius:10px}
  .afb-marca{order:-1}
  .afb-destacado a{width:100%;font-size:17px;padding:14px 12px;box-sizing:border-box}
}
/* Enlace a la guía, encima del acceso a la app (24/09/2026).
   Estilo distinto del dorado: la guía es explicación gratuita, la app es la herramienta. */
.afb-guia{max-width:1200px;margin:16px auto 0;text-align:center}
.afb-guia a{display:inline-block;padding:11px 22px;color:#165bb9;border:1px solid #0066CC;border-radius:10px;font-size:16px;font-weight:600;text-decoration:none;background:#ffffff}
.afb-guia a:hover,.afb-guia a:focus-visible{background:#101c33;border-color:#165bb9;color:#23384f}
@media(max-width:820px){.afb-guia a{width:100%;font-size:15px;padding:12px;box-sizing:border-box}}


/* ===== IDENTIDAD VISUAL · v1.30 (26/09/2026) =====
   El logo va SIEMPRE sobre placa blanca, con sus colores oficiales: su texto es
   azul marino y sobre el fondo #ffffff desaparece. Ningun texto de la web se
   pone encima de la placa, asi que no hay problema de contraste por diseno.
   Fondo: video donde la pagina puede llevarlo, y el fotograma fijo donde no. */
html{background:#ffffff url(/media/fondo-poster-v2.jpg) center/cover no-repeat fixed}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,15,.58),rgba(6,9,15,.76))}
.fondo-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none;
  filter:brightness(.42) saturate(.85)}

.placa-logo{display:block;width:min(520px,88%);margin:0 auto 16px;border-radius:16px;
  background:#23384f;box-shadow:0 8px 28px rgba(0,0,0,.5);overflow:hidden}
.placa-logo img{display:block;width:100%;height:auto}

/* Pie de pagina: el logo entra por CSS, sin tocar el HTML de ninguna pagina. */
.pie-legal::before{content:"";display:block;width:min(300px,70%);aspect-ratio:320/250;
  margin:0 auto 14px;border-radius:14px;background:#23384f url(/media/logo-placa-v2-320.jpg) center/100% auto no-repeat;
  box-shadow:0 4px 18px rgba(0,0,0,.45)}


/* Publicidad con video de fondo: el texto queda SIEMPRE encima y con sombra. */
.promo{position:relative;overflow:hidden;isolation:isolate}
.promo .pub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  opacity:1;filter:brightness(.55) saturate(.9)}
.promo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,21,38,.48),rgba(13,21,38,.68))}
.promo strong{text-shadow:0 2px 8px rgba(0,0,0,.95)}
.promo span,.promo em{text-shadow:0 1px 5px rgba(0,0,0,.95)}
@media(max-width:820px){.promo .pub-video{display:none}}
/* Movimiento reducido: el video NO se quita. Se queda quieto en su fotograma y
   el visitante decide con el boton de abajo. Asi se cumple el criterio 2.2.2 de
   las WCAG —todo lo que se mueve solo y dura mas de 5 s necesita forma de pararlo—
   sin dejar a nadie sin la imagen. */
.fondo-control{position:fixed;right:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;
  gap:8px;padding:9px 14px;border-radius:999px;border:1px solid #1c2a44;background:rgba(11,17,32,.92);
  color:#23384f;font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer}
.fondo-control:hover,.fondo-control:focus-visible{border-color:#165bb9;color:#23384f}
@media print{.fondo-control{display:none}}

/* Portada: los dos botones flanqueando la placa (orden del titular, 26/09/2026) */
.afb-portada{max-width:1200px;margin:18px auto 0;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:24px}
.afb-portada .placa-logo{margin:0;width:min(460px,100%)}
.afb-portada .afb-guia{margin:0;max-width:330px;justify-self:end}
.afb-portada .afb-destacado{margin:0;max-width:330px;justify-self:start}
.afb-portada .afb-guia a,.afb-portada .afb-destacado a{width:100%;box-sizing:border-box;text-align:center}
@media(max-width:900px){
  .afb-portada{grid-template-columns:1fr;gap:14px;justify-items:center}
  .afb-portada .placa-logo{order:-1;width:min(420px,88%)}
  .afb-portada .afb-guia a,.afb-portada .afb-destacado a{font-size:16px;padding:13px 12px}
}

/* === Ajustes del titular · v1.32 (26/09/2026) ===
   1 · La fila de pestañas pasa a rejilla 1fr-auto-1fr: así el rótulo del centro
       queda centrado en la página exactamente, pase lo que pase con los lados. */
.afb-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:16px}
.afb-marca{align-self:center;justify-self:center;text-align:center}

/* 2 · Las dos pestañas de arriba, con el mismo color que los dos botones de abajo:
       izquierda azul como «Cómo funciona», derecha dorada como «Modo vigilancia». */
.afb-nav .afb-tab:first-child{color:#165bb9;border-color:#0066CC;background:#ffffff;font-weight:700}
.afb-nav .afb-tab:first-child:hover,.afb-nav .afb-tab:first-child:focus-visible{
  background:#101c33;border-color:#165bb9;color:#23384f}
.afb-nav .afb-tab:last-child{color:#926300;border-color:#926300;background:#ffffff;font-weight:700}
.afb-nav .afb-tab:last-child:hover,.afb-nav .afb-tab:last-child:focus-visible{
  background:#926300;color:#1a1300}

/* 3 · El crédito de debajo de la placa, centrado a su anchura y no a la de la página. */
.afb-interes{max-width:min(680px,92%);margin:10px auto 0;line-height:1.5}

/* 4 · Texto sobre el vídeo: negrita y color que se lea, con sombra.
       Regla del titular: donde vaya el vídeo o la foto, el texto se refuerza. */
main h1{font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.85)}
main>p{color:#D7E2EE;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.85)}

/* Maquetación 07/10/2026: columnas simétricas, crédito bajo la imagen. */
.afb-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.afb-tab{min-width:0;min-height:56px}
.afb-portada{grid-template-columns:minmax(0,1fr) minmax(280px,460px) minmax(0,1fr);column-gap:24px;row-gap:14px}
.afb-portada .placa-logo{width:100%;max-width:none;grid-column:2;grid-row:1}
.afb-portada .afb-guia,.afb-portada .afb-destacado{max-width:none;width:100%;justify-self:stretch;grid-row:1}
.afb-portada .afb-guia{grid-column:1}.afb-portada .afb-destacado{grid-column:3}
.afb-portada .afb-guia a,.afb-portada .afb-destacado a{display:flex;align-items:center;justify-content:center;min-height:88px;padding:16px;font-size:17px;font-weight:700;line-height:1.45;border-width:2px}
.afb-portada .afb-interes{grid-column:2;grid-row:2;max-width:none;margin:0;text-align:center;font-size:13px;line-height:1.6}
main h1,main h2,main h3{text-align:center}
main p,main li{text-align:justify;hyphens:auto;overflow-wrap:break-word}
.fondo-controles{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;align-items:center;gap:10px}
.fondo-control{position:static;min-height:44px;box-shadow:0 4px 18px #0005}
.fondo-sonido{width:58px;height:58px;padding:0;justify-content:center;border:1px solid #2d6087;background:#101927eb;font-size:25px}
.fondo-sonido:disabled{opacity:.65;cursor:default}
.fondo-control:focus-visible{outline:3px solid #165bb9;outline-offset:3px}
@media(max-width:900px){
 .afb-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .afb-marca{grid-row:1;grid-column:1/-1}.afb-tab{grid-row:2;padding:12px;font-size:15px}
 .afb-portada{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
 .afb-portada .placa-logo{grid-column:1/-1;grid-row:1;width:min(420px,100%);justify-self:center;order:initial}
 .afb-portada .afb-interes{grid-column:1/-1;grid-row:2;max-width:460px;justify-self:center}
 .afb-portada .afb-guia{grid-column:1;grid-row:3}.afb-portada .afb-destacado{grid-column:2;grid-row:3}
 .afb-portada .afb-guia a,.afb-portada .afb-destacado a{height:100%;min-height:100px;font-size:15px}
 .fondo-controles{right:12px;bottom:12px;gap:6px}.fondo-control{font-size:12px}.fondo-sonido{font-size:24px;width:50px;height:50px}
}
@media print{.fondo-controles{display:none}}
/* Botón Cookiebot identificado con texto; conserva su manejador y etiqueta accesible. */
#CookiebotWidget .CookiebotWidget-logo{width:94px!important;height:44px!important;min-width:94px!important;padding:0 12px!important;border-radius:22px!important;background:#141414!important;border:2px solid #23384f!important;color:#23384f!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
#CookiebotWidget .CookiebotWidget-logo svg{display:none!important}
#CookiebotWidget .CookiebotWidget-logo::after{content:"Cookies";font:600 14px/1.2 Arial,sans-serif!important;color:#23384f!important;display:block!important}
#CookiebotWidget .CookiebotWidget-logo:focus-visible{outline:3px solid #57b9ff!important;outline-offset:3px!important}