/* =========================================================================
   layout.css — Cabecera, navegación, pie y elementos flotantes.
   ========================================================================= */

/* ----- ENC-NUE-24 · Trama global de los fondos claros ---------------------
   El lienzo del contenido (todo lo que no sea una sección con fondo propio)
   deja de ser blanco plano y lleva la rejilla técnica definida en base.css.
   Se pinta sobre `main#contenido`, que no tiene color de fondo propio, así
   que la trama se ve sobre el blanco del documento y queda TAPADA por
   cualquier sección opaca que vaya encima. Sin pseudo-elementos: no crea
   contextos de apilamiento ni interfiere con los elementos fijos. */
#contenido {
  background-image: var(--trama);
  background-size: var(--trama-paso) var(--trama-paso);
}

/* ----------------------------- HEADER ----------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--c-primary);
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.header-inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 88px;
}
.site-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.site-logo img { height: 38px; width: auto; }

.main-nav { margin-inline: auto; min-width: 0; }
.main-nav ul { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  color: #fff; font-weight: var(--fw-semibold); font-size: 1.02rem;
  padding: 32px 0; display: inline-block;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.main-nav a:hover { color: var(--c-secondary); }
.main-nav a.is-active { color: #fff; border-bottom-color: var(--c-secondary); }

/* ENC-NUE-49 · "Diseño Web & ERP" es 60px más ancho que "Web Conectada", y en
   portátiles de 1024–1180px eso bastaba para que el último ítem se metiera
   DEBAJO del botón blanco de Contacto.
   Ojo al medirlo: la caja del <ul> miente. Como es hijo flexible de
   `.header-inner`, se COMPRIME por debajo de su contenido y los ítems, con
   `nowrap`, desbordan hacia la derecha sin que su `getBoundingClientRect`
   cambie ni aparezca scroll horizontal. Lo fiable es comparar el `scrollWidth`
   del <ul> con su `clientWidth`, que es como se ha ajustado esto.
   En ese tramo se estrecha el aire y el logo baja de 38 a 32px de alto: el
   logo se come 264px del ancho útil y es el que ahoga la fila. Ni el color,
   ni la fuente, ni la línea cian del ítem activo cambian. */
@media (min-width: 992px) and (max-width: 1180px) {
  .site-logo img { height: 32px; }
  .main-nav ul { gap: 14px; }
  .main-nav a { font-size: .95rem; }
  .header-inner { gap: 18px; }
  .header-actions { gap: 14px; }
}
/* Por debajo de 1008px los cinco ítems aún desbordaban hasta 14px (medido con
   scrollWidth/clientWidth): en ese último tramo el aire entre ítems baja a 10px. */
@media (min-width: 992px) and (max-width: 1023px) {
  .main-nav ul { gap: 10px; }
}

/* =========================================================================
   ENC-NUE-51 · Llamada a la acción "¿No usas Cuantic?" en la cabecera
   -------------------------------------------------------------------------
   El encargo la pide "en el menú, antes de Contacto". Medido con Chrome real,
   ahí NO cabe a ningún ancho: el ancho útil del <ul> en escritorio es de
   616px y los cinco ítems ya ocupan 540; el sexto pide 173 más. Meterlo a la
   fuerza obligaba a un gap de 10px y a bajar el cuerpo de letra, que es justo
   lo contrario de "que el menú luzca equilibrado".
   Así que la llamada se resuelve en DOS sitios, sin apretar nada:
     · en escritorio (≥992px), como BARRA fina sobre el menú (`.topbar`), a
       todo el ancho y dentro de la cabecera pegajosa: se ve en todas las
       páginas y es más visible que un enlace más;
     · en móvil (≤991px), como último ítem del desplegable (`.nav-cta`), que
       es donde sí sobra sitio y donde una barra extra estorbaría.
   ========================================================================= */
.topbar {
  background: linear-gradient(90deg, var(--c-primary), #16324f 45%, var(--c-secondary));
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar__link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 38px; padding: 7px 24px;
  color: #fff; font-size: .92rem; font-weight: var(--fw-semibold); text-align: center;
  transition: background var(--t-fast);
}
.topbar__link:hover { background: rgba(255,255,255,.09); color: #fff; }
.topbar__link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.topbar__q { font-weight: 700; }
.topbar__r { font-weight: 400; color: rgba(255,255,255,.88); }
.topbar__ic { display: inline-flex; width: 17px; height: 17px; flex: 0 0 auto; transition: transform var(--t-fast); }
.topbar__ic svg { width: 17px; height: 17px; }
.topbar__link:hover .topbar__ic { transform: translateX(4px); }
@media (max-width: 991px) { .topbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .topbar__ic { transition: none; } .topbar__link:hover .topbar__ic { transform: none; } }

/* El mismo mensaje, como ítem del desplegable de móvil. Pastilla de contorno
   cian: secundaria, sin competir con el botón blanco de Contacto. */
.main-nav a.nav-cta {
  padding: 9px 15px; border-radius: 6px;
  border: 1px solid var(--c-secondary); border-bottom-width: 1px;
  color: var(--c-secondary); font-size: .95rem; line-height: 1.2;
}
.main-nav a.nav-cta:hover { background: var(--c-secondary); color: #fff; }
.main-nav a.nav-cta:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 2px; }
@media (max-width: 991px) {
  .main-nav a.nav-cta { width: auto; margin: 14px 0 0; display: inline-block; }
}
@media (min-width: 992px) {
  /* En escritorio lo dice la barra de arriba: el ítem sobra. */
  .main-nav li:has(> .nav-cta) { display: none; }
}

.header-actions { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.btn-contacto {
  background: #fff; color: var(--c-primary);
  padding: .7em 1.5em; border-radius: 6px; font-weight: var(--fw-semibold);
  transition: all var(--t-fast);
}
.btn-contacto:hover { background: var(--c-secondary); color: #fff; }
.header-icon { color: #fff; display: inline-flex; transition: color var(--t-fast); }
.header-icon:hover { color: var(--c-secondary); }
.header-icon svg { width: 26px; height: 26px; }

/* Hamburguesa (móvil) */
.nav-toggle { display: none; color: #fff; }
.nav-toggle svg { width: 30px; height: 30px; }

/* ENC-NUE-52 · La cabecera desbordaba en móvil y arrastraba a TODO el sitio.
   Medido con Chrome real a 390px: `.header-inner` es flex con gap 28px y sus
   tres hijos visibles van `flex: 0 0 auto` (logo 180px + acciones 202px +
   hamburguesa 30px = 412px, más 56px de aire y 48px de gutter = 516px). Como
   ninguno se encoge, el botón se plantaba en x=558 y el documento entero
   ganaba 168px de scroll horizontal — en todas las páginas, porque la
   cabecera es global.
   Se arregla dando aire menor y, por debajo de 768px, sacando de la barra los
   dos iconos (Soporte y Soluciones), que NO se pierden: entran como ítems del
   desplegable (`.nav-solo-movil`, ver header.php). Queda logo + Contacto +
   hamburguesa, que caben hasta en 320px. */
@media (max-width: 991px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .header-actions { margin-left: auto; }
  .header-inner { gap: 14px; }
  .header-actions { gap: 14px; }
  /* El desplegable pinta la pastilla "¿No usas Cuantic?" siempre la última */
  .main-nav li:has(> .nav-cta) { order: 9; }
  .main-nav {
    position: fixed; inset: 88px 0 auto 0; margin: 0;
    background: var(--c-primary);
    max-height: 0; overflow: hidden; transition: max-height var(--t);
    box-shadow: 0 14px 24px rgba(0,0,0,.25);
  }
  .main-nav.is-open { max-height: 70vh; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 10px 24px 24px; }
  .main-nav a { padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav a.is-active { border-bottom-color: var(--c-secondary); }
  .btn-contacto { padding: .55em 1.1em; }
}

/* ENC-NUE-52 · Ítems que SOLO existen en el desplegable de móvil: recogen los
   dos iconos que se retiran de la barra por debajo de 768px. */
.nav-solo-movil { display: none; }
@media (max-width: 767px) {
  .nav-solo-movil { display: block; }
  .header-actions .header-icon { display: none; }
  .header-inner { gap: 12px; padding-inline: 16px; }
  /* El logo es lo único que puede ceder ancho, y cede en proporción: así la
     fila cabe a cualquier ancho, no solo a los 390px del iPhone de referencia
     (a 360px sobraban 5px y volvía el scroll). */
  .site-logo { flex: 0 1 auto; min-width: 0; }
  .site-logo img { max-width: 100%; height: auto; max-height: 32px; }
  .btn-contacto { padding: .5em .95em; font-size: .95rem; }
}

/* ----------------------------- FOOTER -----------------------------------
   ENC-NUE-28 · El pie global es ahora el diseño de la home v3. Sus estilos
   están al final de este mismo fichero (bloque "PIE DE PÁGINA GLOBAL").
   Se han retirado de aquí las reglas del pie antiguo (.footer-logo,
   .footer-kit, .footer-nap, .footer-legal, .footer-marcas), que ya no tienen
   marcado que las use.
   ------------------------------------------------------------------------ */

/* -------------------------- FLOTANTES ----------------------------------- */
.float-phone {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast), background var(--t-fast);
}
.float-phone:hover { background: var(--c-secondary); color: #fff; transform: scale(1.08); }
.float-phone svg { width: 24px; height: 24px; }

.scroll-top {
  position: fixed; right: 28px; bottom: 90px; z-index: 899;
  width: 44px; height: 44px; border-radius: 8px;
  background: #fff; color: var(--c-secondary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; }
.scroll-top:hover { transform: translateY(-3px); }
.scroll-top svg { width: 22px; height: 22px; }

/* -------------------- BANNER DE PÁGINA (internas) ----------------------- */
.page-banner {
  background: var(--c-primary) url('../img/slider.jpg') center / cover no-repeat;
  color: #fff; padding-block: clamp(46px, 7vw, 84px);
}
.page-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-banner h1 { color: #fff; margin: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb > span:not(.actual) { color: var(--c-secondary); }
.breadcrumb .actual { color: #fff; }
@media (max-width: 575px) { .breadcrumb { display: none; } }

/* =========================================================================
   ENC-NUE-26 · COMPONENTES FLOTANTES GLOBALES
   -------------------------------------------------------------------------
   El hub de contacto (WhatsApp + teléfono) y el interruptor de modo
   claro/oscuro nacieron dentro de la propuesta de home v3. Se han traído
   aquí, a la hoja GLOBAL, para poder usarlos en cualquier página (hoy: home
   v3 y precios) sin duplicar CSS. Las reglas de convivencia con los
   flotantes antiguos van condicionadas con :has(.v3-hub), de modo que las
   páginas que NO llevan hub conservan su botón de teléfono de siempre.
   ========================================================================= */

/* ----- R · PUNTO 27 · CONTACT HUB flotante (cápsula WhatsApp + Teléfono) --- */
/* Un único componente ovalado en la esquina inferior derecha con los dos
   iconos separados por una línea fina, en lugar de dos botones sueltos que
   compiten entre sí. Sustituye al botón de teléfono global en esta propuesta. */
body:has(.v3-hub) .float-phone { display: none !important; }

.v3-hub {
  position: fixed; right: 24px; bottom: 24px; z-index: 902;
  display: inline-flex; align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(13,27,46,.08);
  box-shadow: 0 14px 34px -10px rgba(7,13,26,.38), 0 2px 6px rgba(7,13,26,.10);
  transition: all 0.3s ease;
}
.v3-hub:hover { box-shadow: 0 20px 44px -12px rgba(7,13,26,.46), 0 2px 6px rgba(7,13,26,.12); }
.v3-hub__sep {
  width: 1px; height: 26px;
  background: rgba(13,27,46,.12);
  margin-inline: 2px;
}
.v3-hub__it {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.v3-hub__it svg { width: 24px; height: 24px; }
.v3-hub__it--wa  { color: #25d366; }
.v3-hub__it--tel { color: var(--c-primary, #142038); }
.v3-hub__it--wa:hover  { background: #25d366; color: #fff; transform: scale(1.06); }
.v3-hub__it--tel:hover { background: var(--c-primary, #142038); color: #fff; transform: scale(1.06); }
.v3-hub__it:focus-visible { outline: 3px solid var(--d-cyan-300, #45c2f0); outline-offset: 2px; }

/* Convivencia con "volver arriba": la cápsula manda en la esquina y la flecha
   se apila encima con margen suficiente para que no se pisen. */
body:has(.v3-hub) .scroll-top { bottom: 104px; right: 29px; }

@media (max-width: 640px) {
  .v3-hub { right: 14px; bottom: 14px; padding: 5px; }
  .v3-hub__it { width: 42px; height: 42px; }
  .v3-hub__it svg { width: 22px; height: 22px; }
  body:has(.v3-hub) .scroll-top { bottom: 84px; right: 18px; }
}

/* ----- S · PUNTO 26 · INTERRUPTOR DE MODO CLARO / OSCURO ------------------ */
/* <button> real, minimalista y discreto, fijo en la esquina inferior
   IZQUIERDA: la derecha ya está ocupada por el raíl del paseo (media altura),
   el hub de contacto y el "volver arriba", así que aquí no estorba ni al
   recorrido ni a la lectura. El estado vive en .v3-dark sobre <html> y se
   persiste en localStorage (ver propuesta-hibrida-v3.js). */
.v3-tema {
  position: fixed; left: 22px; bottom: 24px; z-index: 902;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: rgba(255,255,255,.92);
  color: var(--c-primary, #142038);
  border: 1px solid rgba(13,27,46,.12);
  box-shadow: 0 10px 26px -12px rgba(7,13,26,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: all 0.3s ease;
}
.v3-tema:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(7,13,26,.55); }
.v3-tema:focus-visible { outline: 3px solid var(--d-cyan-300, #45c2f0); outline-offset: 3px; }
.v3-tema__ic { display: none; }
.v3-tema__ic svg { width: 20px; height: 20px; }
.v3-tema__ic--luna { display: inline-flex; }     /* en claro se ofrece pasar a oscuro */
.v3-dark .v3-tema__ic--luna, .p3-dark .v3-tema__ic--luna { display: none; }
.v3-dark .v3-tema__ic--sol, .p3-dark .v3-tema__ic--sol  { display: inline-flex; }
.v3-dark .v3-tema, .p3-dark .v3-tema {
  background: rgba(19,37,63,.92);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
@media (max-width: 640px) {
  .v3-tema { left: 14px; bottom: 14px; width: 40px; height: 40px; }
}


/* Hub flotante de contacto sobre fondo oscuro */
.v3-dark .v3-hub, .p3-dark .v3-hub { background: rgba(19,37,63,.94); border-color: rgba(255,255,255,.14); }
.v3-dark .v3-hub__sep, .p3-dark .v3-hub__sep { background: rgba(255,255,255,.16); }
.v3-dark .v3-hub__it--tel, .p3-dark .v3-hub__it--tel { color: #fff; }
.v3-dark .v3-hub__it--tel:hover, .p3-dark .v3-hub__it--tel:hover { background: var(--d-cyan, #009ad9); color: #fff; }

/* "Volver arriba" legible en oscuro */
.v3-dark body:has(.v3-hub) .scroll-top, .p3-dark body:has(.v3-hub) .scroll-top { background: #13253F; color: var(--d-cyan-300, #45c2f0); }


/* =========================================================================
   ENC-NUE-28 · PIE DE PÁGINA GLOBAL (antes exclusivo de la home v3)
   -------------------------------------------------------------------------
   El pie que se diseñó y afinó en la propuesta de home (logo con halo, línea
   de contexto del ecosistema, CTA en degradado de marca, menú legal y barra
   inferior con copyright + dominios del grupo) pasa a ser EL pie del sitio.
   Marcado en `includes/footer.php`, estilos aquí: cualquier cambio futuro se
   hace en un único sitio y se replica en todas las páginas, presentes y
   futuras. El pie sigue llevando la clase `.site-footer` además de
   `.v3-footer`, para no romper las reglas que ya dependían de ella.
   ========================================================================= */

/* Estructura base del pie: logo, línea de contexto del ecosistema, botón CTA
   central tipo "pill", menú legal centrado y una barra inferior (filete
   superior fino) con el copyright a la izquierda y los dominios del grupo a
   la derecha, en orden estricto. Sin bloque de contacto duplicado. */
.v3-footer {
  background: #0D1B2E;
  color: rgba(255,255,255,.72);
  padding: clamp(36px, 4.5vw, 56px) 0 0;   /* ENC-NUE-8: pie más compacto */
}
.v3-footer .container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v3-footer__logo img { height: 44px; width: auto; }

/* ENC-NUE-15 (punto 25) · El banner institucional (Kit Digital / UE / Gobierno
   de España) se ELIMINA del pie. En su lugar, una línea de contexto sobre el
   botón del ecosistema. */
.v3-footer__eco-txt {
  margin: 26px 0 0;                        /* logo -> texto de contexto */
  max-width: 46ch;
  color: rgba(255,255,255,.72);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Botón CTA central tipo "pill": fondo oscuro, borde fino, muy redondeado. */
.v3-footer__cta {
  margin-top: 14px;                        /* texto de contexto -> botón ecosistema */
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.v3-footer__cta:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-2px);
}

/* Menú legal centrado, justo encima de la barra inferior. */
.v3-footer__legal {
  margin-top: 24px;                        /* ENC-NUE-8: botón -> menú legal */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.v3-footer__legal a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .95rem;
}
.v3-footer__legal a:hover { color: #fff; text-decoration: underline; }

/* ENC-NUE-36 punto 56 · Datos de contacto (NAP) del pie.
   Son enlaces FUNCIONALES (tel: / mailto: / Google Maps) pero NO deben leerse
   como enlaces principales: gris apagado, sin subrayado y sin el cian de
   marca. Solo se iluminan —a blanco— al pasar el ratón o al recibir el foco,
   para no ensuciar la limpieza visual del pie. `<address>` sin cursiva. */
.v3-footer__nap {
  margin-top: 14px;
  font-style: normal;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 14px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}
.v3-footer__nap a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .25s ease;
}
.v3-footer__nap a:hover,
.v3-footer__nap a:focus-visible { color: #fff; }
.v3-footer__nap a:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 3px; }
.v3-footer__nap-sep { color: rgba(255, 255, 255, .22); }
@media (max-width: 575px) {
  /* En móvil la dirección es larga: se apila y el separador estorba. */
  .v3-footer__nap { flex-direction: column; gap: 8px; }
  .v3-footer__nap-sep { display: none; }
}

/* Barra inferior: línea superior fina, copyright a la izquierda y dominios a
   la derecha (orden estricto), repartidos con space-between. */
.v3-footer__bar {
  width: 100%;
  margin-top: 18px;                        /* ENC-NUE-8: menú legal -> barra divisoria */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
  font-size: .9rem;
}
.v3-footer__copy { color: rgba(255,255,255,.55); }
.v3-footer__marcas { display: inline-flex; align-items: center; gap: 8px; }
.v3-footer__marcas a { color: rgba(255,255,255,.82); text-decoration: none; }
.v3-footer__marcas a:hover { color: #fff; text-decoration: underline; }
.v3-footer__marcas span { color: rgba(255,255,255,.4); }
@media (max-width: 640px) {
  .v3-footer__bar { flex-direction: column; text-align: center; }
}


/* =====================================================================
   W · COLOR Y PROFUNDIDAD EN EL PIE DE PÁGINA (ENC-NUE-21, punto 35)
   ---------------------------------------------------------------------
   El pie propio de la v3 (bloque I) había quedado plano: navy liso, CTA
   "outline" que se perdía y enlaces sin acento. Se le da vida sin salirse
   del Dark Theme ni de la paleta de marca (cobalto #1750E0, cian #009ad9,
   con un violeta profundo #3B2E86 solo como luz de fondo):
     1. CTA del ecosistema con degradado sólido de marca y glow.
     2. Halos radiales muy difuminados detrás del logo y del CTA, más un
        filete superior en degradado que separa el pie del contenido.
     3. Enlaces inferiores con transición suave a cian brillante.
     4. Separador de la barra inferior en degradado (ya no un filete gris).
   ===================================================================== */
.v3-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* --- 2 · Acentos de luz: halos radiales que se funden con el navy --- */
.v3-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* halo azul corporativo, centrado tras el logo y el CTA */
    radial-gradient(60% 46% at 50% 26%, rgba(23, 80, 224, .30), transparent 70%),
    /* halo violeta profundo, ligeramente desplazado, para dar volumen */
    radial-gradient(46% 40% at 74% 8%, rgba(59, 46, 134, .26), transparent 72%),
    /* respiración cian muy tenue en la esquina opuesta */
    radial-gradient(40% 36% at 16% 4%, rgba(0, 154, 217, .16), transparent 74%);
}
/* Filete superior en degradado: cierra el contenido y entra en el pie. */
.v3-footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(23, 80, 224, .75) 28%, rgba(0, 154, 217, .95) 50%, rgba(23, 80, 224, .75) 72%, transparent);
}
/* Toque de luz en el logo (halo cian muy suave, sin teñirlo). */
.v3-footer__logo img {
  filter: drop-shadow(0 6px 22px rgba(0, 154, 217, .35));
}

/* --- 1 · CTA del ecosistema: de "outline" a botón sólido de marca --- */
.v3-footer__cta {
  background: linear-gradient(135deg, #1750E0 0%, #0f76dd 52%, #009ad9 100%);
  border: 0;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(0, 154, 217, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-position .3s ease, transform .2s ease, box-shadow .25s ease, filter .25s ease;
  background-size: 160% 100%;
  background-position: 0% 50%;
}
.v3-footer__cta:hover,
.v3-footer__cta:focus-visible {
  /* Se redeclara el degradado y el color: el hover "outline" del bloque I
     (shorthand `background`) y el `a:hover` global los pisarían. */
  background-image: linear-gradient(135deg, #1750E0 0%, #0f76dd 52%, #009ad9 100%);
  background-color: transparent;
  color: #fff;
  background-position: 100% 50%;           /* el degradado se desplaza al pasar */
  border: 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(0, 154, 217, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
  filter: saturate(1.08);
}
.v3-footer__cta span[aria-hidden] { transition: transform .25s ease; }
.v3-footer__cta:hover span[aria-hidden] { transform: translateX(4px); }
.v3-footer__cta:focus-visible { outline: 2px solid #45c2f0; outline-offset: 3px; }

/* --- 3 · Enlaces inferiores: transición suave a cian brillante --- */
.v3-footer__legal a,
.v3-footer__marcas a {
  transition: color .25s ease, text-decoration-color .25s ease;
  text-decoration-color: transparent;
}
.v3-footer__legal a:hover,
.v3-footer__legal a:focus-visible,
.v3-footer__marcas a:hover,
.v3-footer__marcas a:focus-visible {
  color: #45c2f0;                          /* cian brillante de marca */
  text-decoration: underline;
  text-decoration-color: rgba(69, 194, 240, .55);
  text-underline-offset: 4px;
}

/* --- 4 · Separador de la barra inferior en degradado --- */
.v3-footer__bar {
  border-top: 0;
  position: relative;
}
.v3-footer__bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(0, 154, 217, .55) 50%, rgba(255, 255, 255, .04));
}

@media (prefers-reduced-motion: reduce) {
  .v3-footer__cta,
  .v3-footer__cta span[aria-hidden] { transition: none; }
  .v3-footer__cta:hover { transform: none; }
}   /* ← este cierre faltaba: el @media quedaba abierto hasta el final del
       fichero y se tragaba cualquier regla añadida después. */

/* =========================================================================
   ENC-NUE-35 · MODO OSCURO GENÉRICO (páginas sin tema propio)
   -------------------------------------------------------------------------
   El interruptor claro/oscuro ha dejado de ser cosa de la home v3, precios y
   la Academia: ahora sale en TODAS las páginas (lo pinta `flotantes_v3()`
   desde el pie). Las páginas que no se han rediseñado todavía —soluciones,
   sectores, corporativas, legales, la home clásica— no tenían un modo oscuro
   que ofrecer, así que aquí se les da uno digno, con la paleta marina de la
   estética v3.

   Gancho: `<html class="v3-dark">` (estado del tema) + `<body class="tema-base">`
   (la clase que `header.php` añade solo cuando la página NO declara
   `$tema_propio`). Así este bloque no puede pisar los temas oscuros ya
   afinados de precios/contacto/blog/home v3 ni las propuestas congeladas.
   Superficies de referencia: fondo #0E1B2E, tarjetas #16283F, líneas al 10 %.
   ========================================================================= */
.v3-dark body.tema-base { background-color: #0E1B2E; color: #C3D0E2; }
.v3-dark .tema-base h1, .v3-dark .tema-base h2, .v3-dark .tema-base h3,
.v3-dark .tema-base h4, .v3-dark .tema-base h5, .v3-dark .tema-base h6 { color: #EDF3FB; }
/* Enlaces de PROSA a un cian más claro (el corporativo pierde algo de
   legibilidad sobre marina). Ojo: acotado al cuerpo de texto — un `a` suelto
   pisaría el color de los botones, que son enlaces con clase `.btn`. */
.v3-dark .tema-base .contenido-texto a,
.v3-dark .tema-base .prosa a { color: #45c2f0; }
.v3-dark .tema-base .contenido-texto a:hover,
.v3-dark .tema-base .prosa a:hover { color: #7fd6f7; }

/* Secciones alternas y lienzo */
.v3-dark .tema-base .section--soft { background-color: #14243B; }
.v3-dark .tema-base .section--dark { background-color: #0B1524; }

/* Hero de la portada: la foto de fondo se funde con el color oscuro en vez
   de quedar recortada sobre blanco. */
.v3-dark .tema-base .hero { background-color: #22364F; background-blend-mode: multiply; }
.v3-dark .tema-base .hero-sub,
.v3-dark .tema-base .btn-link { color: #DCE6F4; }

/* Tarjetas y superficies claras */
.v3-dark .tema-base .otra-card,
.v3-dark .tema-base .faq-item { background-color: #16283F; }
.v3-dark .tema-base .otra-card,
.v3-dark .tema-base .func-card,
.v3-dark .tema-base .ventaja-card { border-color: rgba(255, 255, 255, .12); }
.v3-dark .tema-base .otra-card h5,
.v3-dark .tema-base .ayuda-col h5,
.v3-dark .tema-base .faq-pregunta { color: #EDF3FB; }
.v3-dark .tema-base .func-num { color: rgba(255, 255, 255, .06); }
.v3-dark .tema-base .ventaja-ic { background-color: rgba(0, 154, 217, .18); }

/* Separadores y bordes finos */
.v3-dark .tema-base .modulo + .modulo,
.v3-dark .tema-base .lista-flecha li,
.v3-dark .tema-base .tab-nav { border-color: rgba(255, 255, 255, .12); }
.v3-dark .tema-base .tab-btn { color: #A9B8CC; }

/* Páginas de texto (legales, gracias) */
.v3-dark .tema-base .contenido-texto strong,
.v3-dark .tema-base .contenido-texto b { color: #EDF3FB; }
.v3-dark .tema-base .contenido-texto th { background-color: #14243B; color: #EDF3FB; }
.v3-dark .tema-base .contenido-texto th,
.v3-dark .tema-base .contenido-texto td { border-color: rgba(255, 255, 255, .14); }

/* Botones: el "dark" se quedaba sin contraste sobre el fondo marino */
.v3-dark .tema-base .btn--dark { background-color: #009ad9; }
.v3-dark .tema-base .btn--dark:hover { background-color: #0080b5; }

/* "Volver arriba": en oscuro, superficie marina en vez de blanca */
.v3-dark .tema-base .scroll-top { background-color: #16283F; color: #45c2f0; }

/* =========================================================================
   Contenido citable (AEO) · includes/_citable.php
   Resumen del principio de la página y bloques de preguntas. Colores por
   herencia y transparencias: valen igual en las páginas claras y oscuras.
   ========================================================================= */
.cit-resumen-sec { padding: 32px 0; }
.cit-resumen {
  max-width: 880px; margin: 0 auto; padding: 16px 22px;
  font-size: 1.06rem; line-height: 1.65;
  border-left: 4px solid var(--c-secondary, #0bb4d6);
  background: rgba(127, 140, 160, .10); border-radius: 0 10px 10px 0;
}
.cit-faq { max-width: 880px; margin: 0 auto; }
.cit-faq__titulo { margin: 0 0 18px; }
.cit-faq__it { padding: 16px 0; border-top: 1px solid rgba(127, 140, 160, .28); }
.cit-faq__it:first-of-type { border-top: 0; }
.cit-faq__it h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.35; }
.cit-faq__it p { margin: 0; line-height: 1.65; }
@media (max-width: 640px) { .cit-resumen { padding: 14px 16px; font-size: 1rem; } }

.blog-resumen { max-width: none; margin: 0 0 28px; }
/* En las páginas con tema oscuro (Academia, soluciones, home en oscuro) el
   párrafo heredaba el gris de cuerpo del tema claro y quedaba sin contraste. */
.p3-dark .cit-resumen, .v3-dark .cit-resumen,
.p3-dark .cit-faq, .v3-dark .cit-faq { color: rgba(255, 255, 255, .86); }
.p3-dark .cit-faq h2, .v3-dark .cit-faq h2,
.p3-dark .cit-faq h3, .v3-dark .cit-faq h3 { color: #fff; }
.p3-dark .cit-resumen, .v3-dark .cit-resumen { background: rgba(255, 255, 255, .06); }
.p3-section.cit-resumen-sec { padding-block: 40px 0; }