/**
 * AyudasIA — identidad Variante A (D11)
 * Tokens + overrides mínimos de shell (cabecera, CTAs, footer).
 * No reescribe style.css; se carga después de los estilos existentes.
 */

:root {
  --ayudasia-primary: #0B3A4F;
  --ayudasia-accent: #2A7A8F;
  --ayudasia-light: #E6EEF2;

  /* Remapeo mínimo de tokens heredados (cyan/navy IA-Developer → paleta A) */
  --e-global-color-secondary: var(--ayudasia-accent);
  --e-global-color-accent: var(--ayudasia-accent);
  --e-global-color-very-dark-blue: var(--ayudasia-primary);
  --e-global-color-dark-blue: #0d4559;
  --e-global-color-very-blue: #082f40;
  --e-global-color-very-dark-mostly-black-blue: #061f2b;
  --e-global-color-dark-cyan: var(--ayudasia-accent);
  --e-gradient-1: var(--ayudasia-primary);
  --e-gradient-2: var(--ayudasia-accent);
}

/* —— Cabecera / nav —— */
.banner_outer .header,
.sub-banner .header {
  background-color: transparent;
}

.navbar-nav .nav-item .nav-link,
.page-home .navbar-nav .nav-item a,
.page-inner .navbar-nav .nav-item a {
  color: var(--ayudasia-primary);
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus {
  color: var(--ayudasia-accent);
}

.banner-logo__img {
  display: block;
  width: 168px;
  height: 36px;
  max-width: min(220px, 42vw);
  object-fit: contain;
}

/* Wordmark HTML (cabecera navy): siempre legible, sin depender de SVG-as-img */
.banner_outer .navbar-brand {
  flex-shrink: 0;
  text-decoration: none !important;
}

.banner-logo--mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  white-space: nowrap;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.02em;
  user-select: none;
}

.banner-logo__ayudas {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #e6eef2;
}

/* El monograma es cuadrado: se fija la proporcion explicitamente porque
   con `width:auto` el navegador no aplicaba la del SVG y lo estiraba a 200px. */
.navbar-brand .banner-logo__monograma {
  /* !important deliberado: una hoja del tema heredado (no inspeccionable desde
     el navegador por ser de origen cruzado) fuerza width:200px sobre las
     imagenes de la cabecera y estiraba el monograma cuadrado a 200x26. */
  height: clamp(1.6rem, 2.8vw, 2.1rem) !important;
  width: clamp(1.6rem, 2.8vw, 2.1rem) !important;
  aspect-ratio: 1 / 1;
  margin-right: 0.5rem;
  align-self: center;
  flex: 0 0 auto;
}

/* Acento en color solido, NO en degradado sobre texto: `background-clip:text`
   exige poner el relleno del texto en transparente y el logo desaparece si el
   fondo no se pinta (modo de alto contraste, impresion). Ver AYU-026: ya se
   sirvio una vez un logo invisible. La identidad v2 la aporta el monograma. */
.banner-logo__ia {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  color: #5eb8c9;
  letter-spacing: 0.04em;
}

.navbar-brand:hover .banner-logo__ia {
  color: #7ec9d6;
}

/* —— Botones / CTA principales —— */
.lets_talk,
a.lets_talk,
.iadev-cta.lets_talk,
a.iadev-cta.lets_talk,
.page-home .navbar-cta-primary,
.page-inner .navbar-cta-primary,
.navbar-collapse > .navbar-cta-primary.lets_talk {
  background-color: var(--ayudasia-primary) !important;
  background-image: linear-gradient(
    to right,
    var(--ayudasia-primary) 0%,
    var(--ayudasia-accent) 100%
  ) !important;
  color: #ffffff !important;
}

.lets_talk:hover,
a.lets_talk:hover,
.iadev-cta.lets_talk:hover,
.page-home .navbar-cta-primary:hover,
.page-inner .navbar-cta-primary:hover,
.navbar-collapse > .navbar-cta-primary.lets_talk:hover,
.lets_talk:focus-visible,
.page-home .navbar-cta-primary:focus-visible,
.page-inner .navbar-cta-primary:focus-visible {
  background-color: #082f40 !important;
  background-image: linear-gradient(
    to right,
    #082f40 0%,
    #3496ab 100%
  ) !important;
  color: #ffffff !important;
}

.page-home .navbar-cta-primary__icon,
.page-inner .navbar-cta-primary__icon,
.iadev-cta.lets_talk .iadev-cta__icon,
.iadev-cta.lets_talk > i.circle {
  background: var(--ayudasia-light) !important;
}

.page-home .navbar-cta-primary__icon i,
.page-inner .navbar-cta-primary__icon i,
.iadev-cta.lets_talk .iadev-cta__icon i {
  color: var(--ayudasia-primary) !important;
}

/* —— Footer —— */
.footer-section {
  background-color: var(--ayudasia-primary);
  background-image: linear-gradient(
    165deg,
    #0d4559 0%,
    var(--ayudasia-primary) 55%,
    #061f2b 100%
  );
}

.footer-section .middle-portion .social-icons .circle,
.footer-section .middle-portion .icon .footer-location {
  background-color: var(--ayudasia-accent);
}

.footer-section .middle-portion ul li:hover i,
.footer-section .middle-portion ul li:hover .text,
.footer-section a:hover {
  color: var(--ayudasia-light);
}

.footer-section .copyright {
  border-top-color: rgba(230, 238, 242, 0.18);
}

.footer-logo__img {
  height: 44px;
  width: auto;
  max-width: 200px;
}

/* Marca del pie: mismo patron que la cabecera (monograma SVG + wordmark HTML).
   El !important repite el motivo de la cabecera: reglas del tema heredado
   imponen un ancho fijo a las imagenes del pie. */
.footer-logo .footer-logo__marca {
  display: inline-flex;
  align-items: center;
}

.footer-logo .footer-logo__monograma {
  height: 2rem !important;
  width: 2rem !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
  margin-right: 0.5rem;
  flex: 0 0 auto;
}

/* —— Fase C: pulido shell premium —— */
body.page-home,
body.page-inner {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.page-home .banner_outer .header,
body.page-inner .banner_outer .header {
  backdrop-filter: saturate(1.1) blur(6px);
}

.page-home .navbar-nav .nav-item .nav-link,
.page-inner .navbar-nav .nav-item .nav-link {
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.footer-section .copyright p,
.footer-section .middle-portion .text {
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .banner-logo--mark {
    transform: translateY(1px);
  }

  .home-hero__cta,
  .buscador-ayudas__submit,
  .buscador-wizard__next {
    width: 100%;
  }

  .buscador-wizard__nav {
    flex-wrap: wrap;
  }

  .buscador-wizard__next {
    width: 100%;
    justify-content: center;
  }
}