/* ==========================================================================
   components.css — Navbar, Footer, Botones y elementos reutilizables.
   Depende de tokens.css y base.css.
   ========================================================================== */

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  --btn-bg:     var(--color-naranja);
  /* blanco sobre naranja = 3.05:1 (falla AA). verde-dark = 5.11:1 */
  --btn-color:  var(--color-verde-dark);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--btn-color);
  background-color: var(--btn-bg);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-naranja);
  color: var(--btn-color);
}

.btn:active { transform: translateY(0); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-color: var(--text-base);
  --btn-border: var(--border-strong);
}
.btn--secondary:hover {
  --btn-bg: var(--color-negro);
  --btn-color: var(--color-blanco);
  box-shadow: var(--shadow-md);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-color: var(--color-blanco);
  --btn-border: rgba(255, 255, 255, 0.4);
}
.btn--ghost-light:hover {
  --btn-bg: var(--color-blanco);
  --btn-color: var(--color-negro);
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.18);
}

.btn--amarillo {
  --btn-bg: var(--color-amarillo);
  --btn-color: var(--color-negro);
}
.btn--amarillo:hover {
  box-shadow: var(--shadow-glow-amarillo);
  --btn-color: var(--color-negro);
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-spring);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-3);
  background-color: rgba(250, 247, 240, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Estado al hacer scroll (clase aplicada via JS) */
.navbar--scrolled {
  background-color: rgba(250, 247, 240, 0.95);
  border-bottom-color: var(--border-soft);
  box-shadow: var(--shadow-xs);
  padding-block: var(--space-2);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.navbar__brand {
  display: flex;
  align-items: center;
  /* Sin esto el logo es lo primero que el flex aplasta cuando entra otro
     elemento en la barra: a 1024px se quedaba en 41px de ancho. */
  flex-shrink: 0;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-200);
  letter-spacing: var(--ls-heading);
  color: var(--text-base);
}

.navbar__brand:hover { color: var(--text-base); }

.navbar__logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  transition: height var(--dur-base) var(--ease-out);
}
.navbar--scrolled .navbar__logo { height: 36px; }

.navbar__menu {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* "Bolsa de trabajo" partia en dos lineas al entrar el selector de idioma
     en la fila. Un enlace de menu no se parte: se aprieta la barra. */
  white-space: nowrap;
  padding-block: var(--space-2);
  font-size: var(--fs-75);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-base);
}

.navbar__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-naranja);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.navbar__link:hover,
.navbar__link[aria-current="true"] { color: var(--text-accent); }

.navbar__link:hover::after,
.navbar__link[aria-current="true"]::after { transform: scaleX(1); }

/* .navbar__actions ya no se oculta en movil: dentro vive el selector de
   idioma, que debe verse siempre. Lo que se oculta en movil es el CTA.
   El margin-left:auto pega el grupo al boton de menu; en escritorio se
   quita para no alterar el reparto original del flex. */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* Selector de idioma: globo + codigo del idioma que estas viendo.
   Mismo trazo (1.8) que los iconos del pie para que no desentone. */
.navbar__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 8px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: var(--text-base);
  text-decoration: none;
  transition:
    color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.navbar__lang:hover,
.navbar__lang:focus-visible {
  color: var(--text-accent);
  background-color: var(--color-arena);
}

.navbar__lang-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* CTA del navbar: chip compacto con dot indicador.
   No usar .btn — la pildora generica compite con la barra. */
.navbar__cta {
  position: relative;
  /* Oculto en movil: ahi manda el boton de menu. Se muestra a partir de
     1024px, en la misma media query que el menu de escritorio. */
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-5) 10px var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-75);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-blanco);
  background-color: var(--color-verde-dark);
  border-radius: var(--radius-pill);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring);
}

/* Fondo naranja que entra por la izquierda en hover. Sin tocar layout. */
.navbar__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-naranja);
  transform: translateX(-101%);
  transition: transform var(--dur-slow) cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.navbar__cta:hover {
  color: var(--color-blanco);
  transform: translateY(-1px);
}
.navbar__cta:hover::before { transform: translateX(0); }

.navbar__cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-amarillo);
  box-shadow: 0 0 0 0 rgba(255, 241, 77, 0.7);
  animation: navbarPulse 2.4s var(--ease-out) infinite;
  flex-shrink: 0;
}

@keyframes navbarPulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 241, 77, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 241, 77, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(255, 241, 77, 0);    }
}

@media (prefers-reduced-motion: reduce) {
  .navbar__cta-dot { animation: none; }
}

.navbar__cta-label {
  position: relative;
  z-index: 1;
}

/* Boton hamburger (mobile) */
.navbar__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: transparent;
  border: 1px solid var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-out);
}

.navbar__toggle:hover { background-color: var(--color-arena); }

.navbar__toggle-line {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: var(--color-negro);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              top var(--dur-base) var(--ease-out);
}
.navbar__toggle-line:nth-child(1) { top: 16px; }
.navbar__toggle-line:nth-child(2) { top: 21px; }
.navbar__toggle-line:nth-child(3) { top: 26px; }

.navbar__toggle[aria-expanded="true"] .navbar__toggle-line:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-line:nth-child(2) {
  opacity: 0;
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-line:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Panel mobile */
.navbar__panel {
  position: fixed;
  inset-inline: 0;
  /* El navbar lleva backdrop-filter, asi que es el bloque contenedor de este
     panel fijo (no el viewport). Por eso top:100% cae justo bajo la barra
     — sea cual sea su alto, normal o --scrolled — y la altura es la pantalla
     menos esa barra. Antes un top:72px fijo dejaba el panel en 112px de alto
     y solo se veia el primer enlace. */
  top: 100%;
  bottom: auto;
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  background-color: var(--color-verde-dark);
  color: var(--color-blanco);
  padding: var(--space-5) var(--section-px) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navbar__panel[data-open="true"] { transform: translateX(0); }

.navbar__panel-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Rotulo de la lista: en un panel de seis palabras sueltas nada dice que
   sean paginas. Decorativo — el <nav> ya lleva su aria-label. */
.navbar__panel-label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-50);
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-inverse);
}

/* Lista separada por lineas: sin gap el borde inferior hace de separador
   real y cada fila mantiene 60px de area tactil. El tamano baja en
   pantallas estrechas para que "Certificaciones" no parta en dos lineas. */
.navbar__panel-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 8vw, 2.25rem);
  line-height: 1.15;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--color-blanco);
  border-bottom: 1px solid var(--border-inverse-strong);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Flecha: la senal de que la fila lleva a otra pagina */
.navbar__panel-link::after {
  content: "\2192";
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: var(--text-accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.navbar__panel-link:hover { color: var(--color-amarillo); }
/* En tactil no hay hover: el feedback util es el de pulsacion */
.navbar__panel-link:active { color: var(--color-amarillo); }
.navbar__panel-link:active::after { transform: translateX(4px); }

/* Pagina actual: barra amarilla en el margen y "Aqui" en lugar de flecha */
.navbar__panel-link[aria-current="page"] { color: var(--color-amarillo); }

.navbar__panel-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--space-3) * -1);
  top: 50%;
  width: 3px;
  height: 55%;
  transform: translateY(-50%);
  background-color: var(--color-amarillo);
  border-radius: 2px;
}

.navbar__panel-link[aria-current="page"]::after {
  content: "Aqu\00ED";
  font-size: var(--fs-50);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amarillo);
}

.navbar__panel-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-75);
  color: var(--text-muted-inverse);
}
.navbar__panel-meta a { color: var(--color-amarillo); }

/* Bloquea scroll cuando el panel esta abierto */
body[data-nav-open="true"] { overflow: hidden; }

@media (min-width: 1024px) {
  .navbar__menu,
  .navbar__actions { display: flex; }
  .navbar__actions { margin-left: 0; }
  .navbar__cta { display: inline-flex; }
  .navbar__toggle,
  .navbar__panel { display: none; }
}

/* Entre 1024 y 1200 el menu, el CTA y el selector de idioma caben justos:
   la fila necesita 1151px y ahi no los hay. Se aprieta la barra en vez de
   aplastar el logo (lo que hacia el flex por su cuenta: 120px de ancho) o
   de mandar el menu al boton hamburguesa en un portatil. El logo baja a
   36px, que es la altura que ya tiene la barra al hacer scroll. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .navbar__inner { gap: var(--space-4); }
  .navbar__menu { gap: var(--space-4); }
  .navbar__link { letter-spacing: 0.05em; }
  .navbar__logo { height: 34px; }
}

/* Por debajo de 1120 sigue faltando sitio, asi que el menu baja un escalon
   de tamano. Es el ultimo recurso antes de partir "Bolsa de trabajo" en dos
   lineas, que es lo que hacia antes de poner white-space: nowrap. */
@media (min-width: 1024px) and (max-width: 1120px) {
  .navbar__menu { gap: var(--space-3); }
  .navbar__link { font-size: var(--fs-50); letter-spacing: 0.04em; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-verde-dark);
  color: var(--text-inverse);
  padding-block: var(--space-9) var(--space-6);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 241, 77, 0.10), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(255, 95, 0, 0.10), transparent 42%);
  pointer-events: none;
}

.footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 320px;
}

.footer__logo {
  height: 64px;
  width: auto;
}

.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  line-height: var(--lh-snug);
  color: var(--color-blanco);
}

.footer__tagline-accent { color: var(--color-amarillo); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-amarillo);
  margin-bottom: var(--space-4);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__list a,
.footer__list address {
  color: rgba(255, 255, 255, 0.78);
  font-style: normal;
  line-height: var(--lh-snug);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover { color: var(--color-amarillo); }

.footer__contact-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer__contact-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--color-amarillo);
}

.footer__socials {
  display: flex;
  gap: var(--space-3);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-inverse);
  color: var(--color-blanco);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring);
}
.footer__social:hover {
  background-color: var(--color-amarillo);
  color: var(--color-negro);
  transform: translateY(-2px);
}
.footer__social svg { width: 20px; height: 20px; }

.footer__bottom {
  position: relative;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-inverse);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-75);
  color: rgba(255, 255, 255, 0.6);
}

/* Enlace legal del pie: presente y accesible, pero sin peso visual.
   Hereda el gris del footer__bottom y solo se subraya al interactuar. */
.footer__legal-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer__legal-link:hover,
.footer__legal-link:focus-visible {
  color: var(--color-amarillo);
  border-bottom-color: currentColor;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .footer__inner {
    grid-template-columns: 1.2fr 2fr;
    gap: var(--space-9);
    align-items: start;
  }
}