/* ==================================================
   NAVBAR FRUGGINA
================================================== */

#header.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 12000;

  width: 100%;
  height: var(--navbar-h, 76px);

  background: var(--color-background);
  color: var(--color-text);

  border-bottom: 1px solid rgba(28, 36, 30, 0.16);
  box-shadow: 0 6px 20px rgba(28, 36, 30, 0.08);

  transition:
    transform 300ms ease,
    box-shadow 200ms ease;
}

/* Línea amarilla inferior */

#header.site-header::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 4px;

  background: var(--color-primary);
}

#header *,
#header *::before,
#header *::after {
  box-sizing: border-box;
}

/* Ocultar navbar durante el scroll */

#header.site-header.is-hidden,
#header.site-header.nav-hidden {
  transform: translateY(-100%);
}

/* ==================================================
   CONTENEDOR
================================================== */

#header .navbar-shell {
  width: calc(100% - 48px);
  max-width: 1240px;
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 52px);
}

/* ==================================================
   MARCA
================================================== */

#header .navbar-brand {
  height: 100%;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 9px 0;
  color: var(--color-secondary);
  text-decoration: none;
}

#header .navbar-brand img {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  object-position: left center;
  transition: transform 180ms ease;
}

#header .navbar-brand:hover img {
  transform: scale(1.02);
}

/* Marca provisoria mientras no exista el logo */

#header .navbar-brand-text,
#header .mobile-brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;

  color: var(--color-secondary);
  text-transform: uppercase;
}

#header .navbar-brand-text strong,
#header .mobile-brand-text strong {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.8;
}

#header .navbar-brand-text small,
#header .mobile-brand-text small {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
}

/* ==================================================
   NAVEGACIÓN DESKTOP
================================================== */

#header #mainNavbar.main-navbar {
  flex: 1 1 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(25px, 3vw, 44px);

  width: auto;
  height: 100%;

  background: transparent;
}

#header .navbar-menu {
  height: 100%;

  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);

  margin: 0;
  padding: 0;
}

#header .navbar-menu a {
  position: relative;

  height: 100%;

  display: inline-flex;
  align-items: center;

  padding-top: 3px;

  color: var(--color-text);

  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

#header .navbar-menu a::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;

  height: 4px;

  background: var(--color-primary);

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 180ms ease;
}

#header .navbar-menu a:hover,
#header .navbar-menu a:focus-visible,
#header .navbar-menu a.active {
  color: var(--color-secondary);
}

#header .navbar-menu a:hover::after,
#header .navbar-menu a:focus-visible::after,
#header .navbar-menu a.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==================================================
   ACCIONES DESKTOP
================================================== */

#header .navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0;
  padding: 0;
}

#header .nav-consulta-btn.desktop {
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  margin: 0;
  padding: 0 19px;

  border: 1px solid var(--color-primary);
  border-radius: 8px;

  background: var(--color-primary);
  color: var(--color-text);

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

#header .nav-consulta-btn.desktop:hover {
  border-color: var(--color-secondary);

  background: var(--color-secondary);
  color: var(--color-text-light);

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(28, 36, 30, 0.16);
}

#header .nav-consulta-btn.desktop span:last-child {
  font-size: 1rem;
  line-height: 1;

  transition: transform 180ms ease;
}

#header .nav-consulta-btn.desktop:hover span:last-child {
  transform: translateX(4px);
}

#header .org-icon {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--color-secondary);
  border-radius: 8px;

  background: transparent;
  color: var(--color-secondary);

  font-size: 0.82rem;
  text-decoration: none;

  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

#header .org-icon:hover {
  background: var(--color-secondary);
  color: var(--color-text-light);

  transform: translateY(-2px);
}

/* ==================================================
   FOCO
================================================== */

#header a:focus-visible,
#header button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

/* ==================================================
   BOTÓN HAMBURGUESA
================================================== */

#header .menu-toggle {
  display: none;
  align-items: center;
  gap: 13px;

  margin: 0;
  padding: 10px 0;

  border: 0;

  background: transparent;
  color: var(--color-text-dark);

  cursor: pointer;
}

#header .menu-toggle-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

#header .menu-toggle-lines {
  width: 29px;

  display: flex;
  flex-direction: column;
  gap: 7px;
}

#header .menu-toggle-lines span {
  display: block;

  width: 100%;
  height: 3px;

  background: currentColor;
}

#header .menu-toggle-lines span:last-child {
  width: 70%;
  margin-left: auto;
}

/* ==================================================
   MENÚ MOBILE
================================================== */

#header #mmenu.mobile-dropdown {
  position: fixed;
  inset: 0;
  z-index: 12100;

  width: 100%;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  padding: max(18px, env(safe-area-inset-top)) clamp(18px, 5vw, 34px)
    max(24px, env(safe-area-inset-bottom));

  overflow-y: auto;

  background: var(--color-primary);
  color: var(--color-text);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transform: translateX(100%);

  transition:
    transform 280ms ease,
    opacity 220ms ease,
    visibility 220ms ease;
}

#header #mmenu.active,
#header #mmenu.open,
#header #mmenu.show,
#header #mmenu.is-open,
#header #mmenu[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;

  transform: translateX(0);
}

/* ==================================================
   CABECERA MOBILE
================================================== */

#header .mobile-menu-header {
  min-height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid rgba(28, 36, 30, 0.28);
}

#header .mobile-menu-brand {
  display: inline-flex;
  align-items: center;

  min-height: 48px;
  padding: 8px 12px;

  border-radius: 8px;

  background: var(--color-background);
  color: var(--color-secondary);

  text-decoration: none;
}

#header .mobile-menu-brand img {
  display: block;

  width: auto;
  max-width: 130px;
  max-height: 42px;

  object-fit: contain;
  filter: none;
}

#header .mobile-brand-text strong {
  font-size: 1.9rem;
}

#header .mobile-menu-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 10px 0;

  border: 0;

  background: transparent;
  color: var(--color-text);

  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  cursor: pointer;
}

#header .mobile-menu-close span:last-child {
  font-size: 1.1rem;
}

/* ==================================================
   LINKS MOBILE
================================================== */

#header .mobile-menu-nav {
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 30px 0;
}

#header .mobile-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid rgba(28, 36, 30, 0.28);

  color: var(--color-secondary);

  font-family: var(--font-display);
  font-size: clamp(3.1rem, 13vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-decoration: none;
  text-transform: uppercase;
}

#header .mobile-menu-nav a:first-child {
  border-top: 1px solid rgba(28, 36, 30, 0.28);
}

#header .mobile-menu-nav a span:last-child {
  color: var(--color-text);

  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 500;

  transition: transform 180ms ease;
}

#header .mobile-menu-nav a:hover span:last-child {
  transform: translateX(6px);
}

/* ==================================================
   ACCIONES MOBILE
================================================== */

#header .mobile-menu-actions {
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: 10px;
}

#header .nav-consulta-btn.mobile,
#header .mobile-login-link {
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 0 18px;

  border: 1px solid var(--color-secondary);
  border-radius: 8px;

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}

#header .nav-consulta-btn.mobile {
  background: var(--color-secondary);
  color: var(--color-text-light);

  cursor: pointer;
}

#header .mobile-login-link {
  width: 54px;

  justify-content: center;
  padding: 0;

  background: var(--color-background);
  color: var(--color-secondary);
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 920px) {
  #header #mainNavbar.main-navbar {
    display: none;
  }

  #header .menu-toggle {
    display: inline-flex;
  }

  #header .navbar-shell {
    width: calc(100% - 40px);
  }

  #header .navbar-brand img {
    max-width: 200px;
    max-height: 100px;
  }

  #header .navbar-brand-text strong {
    font-size: 2rem;
  }
}

@media (min-width: 921px) {
  #header #mmenu.mobile-dropdown {
    display: none;
  }
}

@media (max-width: 480px) {
  #header.site-header {
    --navbar-h: 68px;
  }

  #header .navbar-shell {
    width: calc(100% - 30px);
  }

  #header .navbar-brand img {
    max-width: 200px;
    max-height: 100px;
  }

  #header .navbar-brand-text strong {
    font-size: 1.8rem;
  }

  #header #mmenu.mobile-dropdown {
    padding-right: 18px;
    padding-left: 18px;
  }

  #header .mobile-menu-nav a {
    font-size: clamp(2.8rem, 13vw, 4.3rem);
  }
}

/* ==================================================
   FOOTER FRUGGINA
================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--color-secondary, #126b3a);
  color: var(--color-text-light, #ffffff);
  font-family: var(--font-body, sans-serif);
}

.site-footer::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  z-index: -1;
  width: 430px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -4deg,
    rgba(213, 162, 27, 0.2) 0deg 4deg,
    transparent 4deg 11deg
  );
  pointer-events: none;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.footer-accent-line {
  width: 100%;
  height: 12px;
  border-top: 2px solid var(--color-text, #1c241e);
  border-bottom: 2px solid var(--color-text, #1c241e);
  background: var(--color-primary, #d5a21b);
}

/* ==================================================
   ESTRUCTURA
================================================== */
.site-footer .footer-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(270px, 1fr) minmax(
      190px,
      0.68fr
    );
  align-items: start;
  gap: clamp(46px, 6vw, 90px);
  padding-top: clamp(64px, 7vw, 100px);
  padding-right: 80px;
  padding-bottom: clamp(60px, 7vw, 92px);
}

/* ==================================================
   MARCA
================================================== */
.site-footer .footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer .footer-logo-link {
  display: inline-flex;
  align-items: center;
  /* padding: 10px 14px; */
  border: 2px solid var(--color-text, #1c241e);
  border-radius: 16px 16px 16px 5px;
  background: var(--color-background, #f4efe4);
  box-shadow: 7px 7px 0 var(--color-primary, #d5a21b);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.site-footer .footer-logo-link:hover,
.site-footer .footer-logo-link:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--color-primary, #d5a21b);
  text-decoration: none;
}

.site-footer .footer-logo-link:focus-visible {
  outline: 3px solid var(--color-primary, #d5a21b);
  outline-offset: 5px;
}

.site-footer .footer-logo {
  display: block;
  width: clamp(165px, 17vw, 235px);
  max-height: 125px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
}

.site-footer .footer-tagline {
  max-width: 310px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.55;
  text-transform: uppercase;
}

/* ==================================================
   TÍTULOS DE COLUMNAS
================================================== */
.site-footer .footer-column-label {
  margin: 0 0 26px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  color: var(--color-primary, #d5a21b);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

/* ==================================================
   CONTACTO
================================================== */
.site-footer .footer-contact {
  min-width: 0;
}

.site-footer .footer-org {
  max-width: 410px;
  margin: 0 0 30px;
  color: var(--color-text-light, #ffffff);
  font-family: var(--font-display, sans-serif);
  font-size: clamp(2.4rem, 3.5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
}

.site-footer .footer-mail {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.36);
  border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  color: var(--color-text-light, #ffffff);
  transition:
    padding 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.site-footer .footer-mail:hover,
.site-footer .footer-mail:focus-visible {
  padding-left: 10px;
  padding-right: 10px;
  border-color: var(--color-primary, #d5a21b);
  background: var(--color-primary, #d5a21b);
  color: var(--color-text, #1c241e);
  text-decoration: none;
}

.site-footer .footer-mail:focus-visible {
  outline: 3px solid var(--color-primary, #d5a21b);
  outline-offset: 4px;
}

.site-footer .footer-mail-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.site-footer .footer-mail small {
  color: var(--color-primary, #d5a21b);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer .footer-mail:hover small,
.site-footer .footer-mail:focus-visible small {
  color: var(--color-text, #1c241e);
}

.site-footer .footer-mail strong {
  overflow-wrap: anywhere;
  font-size: clamp(0.88rem, 1.1vw, 1.02rem);
  font-weight: 700;
  line-height: 1.35;
}

.site-footer .footer-link-arrow {
  flex: 0 0 auto;
  color: var(--color-primary, #d5a21b);
  font-size: 1.6rem;
  line-height: 1;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

.site-footer .footer-mail:hover .footer-link-arrow,
.site-footer .footer-mail:focus-visible .footer-link-arrow {
  color: var(--color-text, #1c241e);
  transform: translate(4px, -4px);
}

/* ==================================================
   REDES
================================================== */
.site-footer .footer-social {
  min-width: 0;
}

.site-footer .footer-social-links {
  display: flex;
  flex-direction: column;
}

.site-footer .footer-social-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  color: var(--color-text-light, #ffffff);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    padding 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.site-footer .footer-social-links a:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.36);
}

.site-footer .footer-social-links a:hover,
.site-footer .footer-social-links a:focus-visible {
  padding-left: 10px;
  padding-right: 10px;
  border-color: var(--color-primary, #d5a21b);
  background: var(--color-primary, #d5a21b);
  color: var(--color-text, #1c241e);
  text-decoration: none;
}

.site-footer .footer-social-links a:focus-visible {
  outline: 3px solid var(--color-primary, #d5a21b);
  outline-offset: 4px;
}

.site-footer .footer-social-links a span:last-child {
  flex: 0 0 auto;
  color: var(--color-primary, #d5a21b);
  font-size: 1.25rem;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

.site-footer .footer-social-links a:hover span:last-child,
.site-footer .footer-social-links a:focus-visible span:last-child {
  color: var(--color-text, #1c241e);
  transform: translate(4px, -4px);
}

/* ==================================================
   PARTE INFERIOR
================================================== */
.site-footer .footer-bottom {
  position: relative;
  z-index: 2;
  min-height: 74px;
  display: flex;
  align-items: center;
  padding-right: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.36);
}

.site-footer .footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ==================================================
   TABLET
================================================== */
@media (max-width: 980px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding-right: 62px;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  }

  .site-footer .footer-bottom {
    padding-right: 62px;
  }
}

/* ==================================================
   MOBILE
================================================== */
@media (max-width: 650px) {
  .site-footer::after {
    top: -80px;
    right: -190px;
    width: 350px;
  }

  .footer-accent-line {
    height: 10px;
  }

  .site-footer .footer-container {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 58px;
    padding-right: 54px;
    padding-bottom: 58px;
  }

  .site-footer .footer-brand {
    grid-column: auto;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .site-footer .footer-logo-link {
    padding: 9px 12px;
    box-shadow: 5px 5px 0 var(--color-primary, #d5a21b);
  }

  .site-footer .footer-logo {
    width: min(180px, 54vw);
    max-height: 120px;
  }

  .site-footer .footer-tagline {
    max-width: 250px;
  }

  .site-footer .footer-org {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .site-footer .footer-bottom {
    min-height: 68px;
    padding-right: 54px;
  }
}