:root{
  --c-primary: rgba(220, 226, 239, .18);
  --c-secondary: rgba(220, 226, 239, .18);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --container: 1200px;
  --header-h: 66px;

  --focus-ring: rgba(220, 226, 239, .18);

  /* glow base (se ajusta por tema) */
  --glow-1: rgba(220, 226, 239, .18);
  --glow-2: rgba(220, 226, 239, .18);
  --glow-strong-1:rgba(220, 226, 239, .18);
  --glow-strong-2: rgba(220, 226, 239, .18);
  /* Aliases para i18n UI (compat con referencia) */
  --primary: rgba(220, 226, 239, .18);
  --primary-2: rgba(220, 226, 239, .18);

  /* Shadows / motion (como referencia) */
  --shadow:    0 18px 55px rgba(220, 226, 239, .18);
  --shadow-lg: 0 28px 90px rgba(220, 226, 239, .18);
    --t-normal: 280ms ease;
  --z-overlay: 1100;
  --z-menu: 1200;


}


*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 650px at 20% 8%, rgba(0,61,165,.14), transparent 60%),
    radial-gradient(1200px 650px at 80% 0%, rgba(24,35,137,.12), transparent 55%),
    var(--bg);
  line-height:1.5;
  padding-top: var(--header-h);
  transition: background-color .35s ease, color .35s ease;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; }
.container{ width:min(var(--container), calc(100% - 40px)); margin:0 auto; }

.skip-link{
  position:absolute; left:-999px; top:10px;
  padding:10px 14px; background:#fff; color:#000;
  border-radius:10px; z-index:9999;
}
.skip-link:focus{ left:10px; }

:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 10px;
}

/* transición suave al cambiar tema */
html.theme-transition *{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease,
              box-shadow .35s ease, transform .25s ease, opacity .35s ease;
}

/* =========================
   Header (fijo)
========================= */
.site-header{
  position:fixed; inset:0 0 auto 0;
  height: var(--header-h);
  z-index:1000;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.header__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:14px;
}

/* Brand */
.brand{
  display:flex; align-items:center; gap:10px;
  min-width:160px;
}
.brand__mark{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-primary) 22%, transparent),
    color-mix(in srgb, var(--c-secondary) 22%, transparent)
  );
  border: 1px solid var(--border);
}
.brand__name{
  font-weight: 780;
  letter-spacing:.2px;
  color: color-mix(in srgb, var(--c-primary) 55%, var(--text));
}

/* Lang moved left */
.header__lang{ flex: 0 0 auto; }

/* Nav centered */
.nav{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  min-width: 0;
}
.nav__link{
  padding:8px 10px;
  border-radius:999px;
  font-weight:650;
  font-size:13px;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  white-space: nowrap;
}
.nav__link:hover{
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.nav__link.is-active{
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Actions right */
.header__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

/* Buttons */
.icon-btn{
  width:36px; height:36px; border-radius:999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  display:grid; place-items:center;
  cursor:pointer;
}
.icon-btn:hover{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-primary) 20%, transparent),
    0 0 18px var(--glow-1);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  font-weight:750;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.btn--pill{ border-radius:999px; }

.btn--primary{
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  border-color: color-mix(in srgb, #fff 12%, transparent);
  color:#fff;
  box-shadow: var(--shadow-soft), 0 0 22px var(--glow-1);
}
.btn--primary:hover{
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px color-mix(in srgb, var(--c-primary) 30%, transparent),
    0 0 28px var(--glow-strong-1);
}
.btn--ghost{
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.btn--ghost:hover{ box-shadow: 0 0 18px var(--glow-2); }

.btn--soft{
  width:100%;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.btn--soft:hover{ box-shadow: 0 0 18px var(--glow-2); }

/* Lang dropdown */
.lang{ position: relative; }
.lang__btn{
  display:flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  cursor:pointer;
}
.lang__code{ font-weight:850; font-size:12px; }
.lang__list{
  position:absolute; left:0; top:calc(100% + 10px);
  width: 220px;
  padding: 8px;
  margin:0;
  list-style:none;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  display:none;
  z-index: 1200;
}
.lang__list.is-open{ display:block; }
.lang__item{
  padding:10px 10px; border-radius:12px; cursor:pointer;
  font-weight:700;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.lang__item:hover{ background: color-mix(in srgb, var(--text) 7%, transparent); }
.lang__item[aria-selected="true"]{
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
}

/* Burger now right side */
.header__burger{ display:none; }

/* =========================
   Mobile menu
========================= */
.mobile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-overlay);
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
.mobile-overlay.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu{
  position: fixed;
  top: 0;
  right: 0;
  width: min(92vw, 420px);
  height: 100dvh;
  height: 100vh;
  background: color-mix(in srgb, var(--bg) 92%, #000 8%);
  border-left: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  box-shadow: 0 28px 90px rgba(0,0,0,0.45);
  transform: translateX(110%);
  transition: transform var(--t-normal);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);

  /* neutraliza el estilo de “popover” */
  border-radius: 0;
  max-height: none;
  overflow: hidden;
  backdrop-filter: none;
}
.mobile-menu.open{
  transform: translateX(0);
}


.mobile-menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--border);
}
.mobile-menu__title{ font-weight:900; letter-spacing:.2px; }
.mobile-nav{
  display:flex; flex-direction:column;
  padding:10px; gap:6px;
}
.mobile-nav__link{
  padding:12px 12px;
  border-radius:14px;
  font-weight:750;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border:1px solid var(--border);
}
.mobile-nav__link:hover{ box-shadow: 0 0 18px var(--glow-2); }
.mobile-nav__link.is-active{
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-primary) 22%, transparent);
}
/* Footer del menú móvil: Idiomas + CTA */
.mobile-menu__footer{
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-lang__label{
  font-weight: 900;
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 80%, transparent);
  margin-top: 2px;
}

.mobile-lang__select{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  padding: 0 12px;
  font-weight: 800;
  outline: none;
}

/* Botón colaborador abajo (full width) */
.mobile-cta{
  width: 100%;
  justify-content: center;
}


/* =========================
   Hero
========================= */
.main{ min-height: 100vh; }

.hero{
  position:relative;
  padding: 56px 0 0;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b) 60%, var(--hero-c) 100%);
  overflow:hidden;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;                /* más aire */
  align-items:center;
  padding: 50px 0 54px;     /* más aire abajo */
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: color-mix(in srgb, #fff 12%, transparent);
  border:1px solid color-mix(in srgb, #fff 14%, transparent);
  color: rgba(255,255,255,.92);
  font-weight:800;
  font-size:12px;
}
.hero__title{
  margin:14px 0 10px;
  font-size: clamp(34px, 3.5vw, 46px);
  line-height:1.1;
  letter-spacing:-.4px;
  color:#fff;
}
.hero__subtitle{
  margin:0 0 18px;
  color: rgba(255,255,255,.86);
  max-width: 62ch;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }

.kpis{ display:flex; gap:18px; margin-top:14px; flex-wrap: wrap; }
.kpi{
  padding:12px 14px;
  border-radius:16px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  min-width:120px;
  box-shadow: 0 0 18px rgba(0,0,0,.12);
}
.kpi__num{ display:block; font-weight:950; font-size:18px; }
.kpi__label{ display:block; font-size:12px; color: rgba(255,255,255,.82); margin-top:4px; font-weight:650; }

.hero__media{ display:flex; justify-content:flex-end; }
.media-card{
  width:min(560px, 100%);
  border-radius: var(--radius-xl);
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow), 0 0 30px var(--glow-1);
  position:relative;
  min-height: 280px;
}
.media-tag{
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.92);
  color: rgba(6,10,20,.88);
  font-weight:900;
  font-size:12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.media-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.media-fallback{
  height:100%;
  display:grid; place-items:center; gap:10px;
  padding:30px;
  color: rgba(255,255,255,.88);
}
.media-fallback i{ font-size:30px; opacity:.9; }
.media-fallback p{ margin:0; text-align:center; color: rgba(255,255,255,.82); font-weight:650; }
.media-card.no-img .media-fallback{ display:grid; }
.media-card.no-img .media-img{ display:none; }

/* NUEVO: separador 3D (reemplaza franja blanca) */
.hero__divider{
  position: relative;
  height: 86px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 65%, transparent) 52%,
    var(--bg) 100%
  );
}

/* Capa 3D: “borde” y “profundidad” */
.hero__divider::before{
  content:"";
  position:absolute;
  inset: -18px 0 0 0;
  height: 70px;
  background:
    radial-gradient(1200px 60px at 50% 10%,
      var(--divider-top) 0%,
      transparent 62%
    ),
    linear-gradient(90deg,
      transparent 0%,
      var(--divider-mid) 50%,
      transparent 100%
    );
  filter: blur(0.2px);
  opacity: .95;
}

/* “Sombra” inferior sutil */
.hero__divider::after{
  content:"";
  position:absolute;
  left: 0; right: 0; bottom: -10px;
  height: 26px;
  background: radial-gradient(900px 18px at 50% 0%,
    var(--divider-bottom) 0%,
    transparent 70%
  );
  opacity: .55;
}

/* =========================
   Secciones (más separadas)
========================= */
.section{
  padding: 64px 0 56px;
  background: var(--bg);
  color: var(--text);
}
.section--spaced{
  padding-top: 84px;        /* más aire arriba */
}

.section__head{ text-align:center; margin-bottom: 30px; }
.section__title{ margin:0; font-size: clamp(22px, 2.2vw, 32px); letter-spacing:-.2px; }
.section__subtitle{ margin:10px auto 0; max-width:70ch; color: var(--muted); }
.section__accent{
  display:block;
  width: 54px;
  height: 3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  margin: 16px auto 0;
  box-shadow: 0 0 18px var(--glow-2);
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;                /* más separación */
  margin-top: 28px;
}

/* Neon más marcado, pero suave */
.card{
  border-radius: var(--radius-lg);
  background: var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 340px;
  transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease;
}

.card--neon{
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px color-mix(in srgb, var(--c-primary) 12%, transparent),
    0 0 26px var(--glow-2);
}

.card--neon:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c-primary) 22%, var(--border));
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--c-primary) 26%, transparent),
    0 0 34px var(--glow-strong-1),
    0 0 26px var(--glow-strong-2);
}

.card__top{ padding: 20px 20px 12px; }
.card__icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  box-shadow: 0 0 26px var(--glow-strong-1);
}
.card__title{ margin:14px 0 10px; font-size: 16px; letter-spacing:-.1px; }
.card__desc{ margin:0; color: var(--muted); font-size: 13px; }

.card__meta{ padding: 0 20px 14px; margin-top:auto; }
.tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius:999px;
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c-primary) 16%, transparent);
  color: color-mix(in srgb, var(--c-primary) 85%, var(--text));
  font-weight:900;
  font-size: 11px;
}
.mini-list{
  list-style:none; margin: 12px 0 0; padding:0;
  display:flex; flex-direction:column; gap: 8px;
  color: color-mix(in srgb, var(--text) 85%, transparent);
  font-weight:650; font-size: 12px;
}
.mini-list i{
  color: color-mix(in srgb, var(--c-primary) 85%, var(--text));
  margin-right: 8px;
}

.card__actions{ padding: 0 20px 20px; }
.link{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:950;
  color: color-mix(in srgb, var(--c-primary) 92%, var(--text));
  font-size: 12px;
}
.link:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* CTA con más aire */
.cta{
  background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  padding: 44px 0;
  color:#fff;
  box-shadow: 0 0 36px var(--glow-1);
}
.cta--spaced{ margin-top: 10px; }
.cta__inner{ display:flex; align-items:center; justify-content:space-between; gap: 18px; }
.cta__title{ margin:0; font-size: 22px; letter-spacing:-.2px; }
.cta__text{ margin: 10px 0 0; color: rgba(255,255,255,.86); max-width: 64ch; }

.btn--light{
  background:#fff; color: rgba(11,16,32,.92);
  border-color: rgba(255,255,255,.60);
}
.btn--light:hover{ background: rgba(255,255,255,.92); box-shadow: 0 0 18px rgba(255,255,255,.22); }
.btn--ghost-light{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.18);
}
.btn--ghost-light:hover{ background: rgba(255,255,255,.18); box-shadow: 0 0 22px rgba(255,255,255,.16); }

/* Footer normal */
.site-footer{
  padding: 40px 0 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, transparent), var(--bg));
  border-top: 1px solid var(--border);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .7fr .8fr 1fr;
  gap: 22px;
  align-items:start;
}
.footer__logo{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer__desc{ margin:0 0 12px; color: var(--muted); font-weight:650; font-size: 12.5px; }

.footer__hours{ display:flex; align-items:flex-start; gap:10px; margin:10px 0 12px; color: var(--text); }
.footer__icon{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--border);
}
.footer__label{ display:block; font-weight:950; font-size:12px; margin-bottom:10px; color: var(--text); }
.footer__social-row{ display:flex; gap:10px; }
.social{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--border);
}
.social:hover{ box-shadow: 0 0 18px var(--glow-2); }

.footer__col{ display:flex; flex-direction:column; gap:10px; }
.footer__title{ margin:0 0 4px; font-size:12px; font-weight:950; letter-spacing:.6px; }
.footer__link{ color: var(--muted); font-weight:650; font-size:12.5px; }
.footer__link:hover{ color: var(--text); }

.footer__note{ margin:0 0 10px; color: var(--muted); font-size:12.5px; font-weight:650; }
.footer__contact-item{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.footer__contact-label{ color: var(--muted); font-weight:950; font-size:12px; }
.footer__contact-val{ color: var(--text); font-weight:950; font-size:12.5px; }
.footer__maps{
  display:inline-flex; gap:10px; align-items:center; margin-top:8px;
  color: color-mix(in srgb, var(--c-primary) 78%, var(--text));
  font-weight:950; font-size:12.5px;
}
.footer__maps:hover{ text-decoration: underline; }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-top:14px; margin-top:18px;
  border-top:1px solid var(--border);
  color: var(--muted);
  font-weight:650; font-size:12px;
}
.footer__legal{ display:flex; gap:16px; flex-wrap:wrap; }
.footer__legal a{ color: var(--muted); }
.footer__legal a:hover{ color: var(--text); }

/* Reveal suave */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1),
              transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.reveal.is-in{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .card:hover{ transform:none; }
}

/* Scroll offset para header fijo */
.section, .cta{ scroll-margin-top: calc(var(--header-h) + 18px); }

/* =========================
   Responsive (rescale móvil)
========================= */
@media (max-width: 1100px){
  .nav{ gap: 12px; }
  .header__actions .btn.btn--pill{ display:none; } /* SOLO header */
}


@media (max-width: 980px){
  .nav{ display:none; }
  .header__burger{ display:grid; }

  /* Header en 2 filas (paridad con referencia) */
  .header__inner{
  height: auto;
  padding: 12px 0;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  align-items:center;
}

  .header__actions{ width:auto; justify-content:flex-end; }

  /* En móvil la referencia oculta CTA del header (ya va dentro del menú) */
  .header__actions .btn--pill{ display:none !important; }

  /* Selector de idioma a lo ancho */
/* Selector de idioma compacto (igual referencia) */
.language-selector{ width:auto; }
.language-btn{ width:auto; justify-content:center; white-space:nowrap; }


  /* Tus ajustes existentes */
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media{ justify-content:flex-start; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .cta__inner{ flex-direction:column; align-items:flex-start; }
}


@media (max-width: 620px){
  .container{ width: min(var(--container), calc(100% - 28px)); }
  .header__inner{ gap: 10px; }
  .brand{ min-width: 0; }
  .lang__btn{ padding: 0 10px; }
  .lang__list{ width: 210px; }
  /* Servicios: en móvil, 1 columna (evita desalineación) */
.cards{ grid-template-columns: 1fr; gap: 16px; }


  .kpi{ min-width: 104px; }
  .hero__divider{ height: 74px; }

  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}
/* =========================
   Header móvil (paridad con referencia)
   - 2 filas: logo/acciones arriba, idioma ancho abajo
========================= */
@media (max-width: 980px){

  .nav{ display:none; }
  .header__burger{ display:grid; }

  .header__inner{
    height:auto;
    padding:12px 0;
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap:10px;
    align-items:center;
  }

  /* Acciones arriba a la derecha */
  .header__actions{
    grid-column: 2;
    grid-row: 1;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
    width:auto;
  }

  /* En móvil, el CTA colaborador NO va en header (va en menú) */
  .header__actions .btn--pill{ display:none !important; }


  /* Botón hamburguesa (misma “caja” que referencia) */
  #menuToggle{
    width:46px;
    height:44px;
    border-radius:14px;
    background: color-mix(in srgb, var(--bg) 84%, var(--c-primary) 16%);
    border: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--border));
  }

}


/* =========================
   CTA colaborador (match referencia)
   - Desktop: usa el botón existente pero con paleta/sombra de referencia
   - Móvil: el CTA está dentro del menú (.mobile-cta)
========================= */
.header__actions .btn--primary.btn--pill{
  border-radius: 999px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border: 0;
  box-shadow: 0 16px 34px rgba(31,94,255,0.20);
}
.header__actions .btn--primary.btn--pill:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.mobile-cta.btn--primary.btn--pill{
  border-radius: 999px;
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border: 0;
  box-shadow: 0 16px 34px rgba(31,94,255,0.20);
}

/* =========================
   Language selector (copied from reference)
========================= */
.language-selector{ position:relative; }
.language-btn{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 86%, var(--primary) 14%);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  color: var(--text);
  cursor:pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
html[data-theme="light"] .language-btn{
  box-shadow: 0 12px 26px rgba(19,33,68,0.10);
}
.language-btn:hover{ transform: translateY(-1px); }
.language-btn i{ font-size: 12px; transition: transform var(--t-fast); }
.language-btn[aria-expanded="true"] i{ transform: rotate(180deg); }

.language-flag{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(31,94,255,0.35), rgba(43,140,255,0.25));
  box-shadow: 0 10px 22px rgba(31,94,255,0.12);
}

.language-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  list-style:none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  min-width: 230px;
  padding: 8px;
  opacity:0;
  visibility:hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: calc(var(--z-header) + 30);
}
html[data-theme="light"] .language-dropdown{
  box-shadow: var(--shadow-lg);
}
.language-dropdown.show{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.language-option{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  background: transparent;
  border:none;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
  font-weight: 900;
  transition: background var(--t-fast);
}
.language-option:hover{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.lang-option-flag{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(31,94,255,0.35), rgba(43,140,255,0.25));
}
.logo-img{
  width: 140px;
  height: auto;
  display:block;
  object-fit: contain;
  max-width: 180px;
  filter: drop-shadow(0 8px 18px rgba(19,33,68,0.10));
}
/* =========================
   Mobile header/menu parity (ONLY sizing/spacing)
   ========================= */
@media (max-width: 980px){
 .site-header{ height: auto; } /* <- clave para que no se desescale el layout */
  /* Botón hamburguesa: mismo feel que referencia (más “pill/rect”) */
  .header__burger.icon-btn{
    width: 46px;
    height: 44px;
    border-radius: 14px;
  }
  .header__burger.icon-btn i{
    font-size: 18px;
  }

  /* Botón cerrar del drawer: mismo tamaño que referencia */
  #menuClose.icon-btn{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  /* Header del drawer: padding como referencia */
  .mobile-menu__head{
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Asegura SIEMPRE el slide horizontal (aunque haya reglas previas) */
  .mobile-menu.open{
    transform: translateX(0) !important;
  }

  /* CTA dentro del menú (Eres colaborador) a ancho completo como referencia */
  .mobile-cta{
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 980px){
  .mobile-nav{
    padding: 14px 16px 18px;
    gap: 6px;
  }

  .mobile-nav__link{
    padding: 14px 14px;
    border-radius: 16px;
    font-weight: 950;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    opacity: .95;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
  }

  .mobile-nav__link:hover{
    background: rgba(31,94,255,0.12);
    border-color: rgba(31,94,255,0.35);
    transform: translateX(4px);
  }

  .mobile-nav__link.is-active{
    background: rgba(31,94,255,0.18);
    border-color: rgba(31,94,255,0.38);
  }
}




/* =========================================================
   PATCH: Desktop nav moved into hamburger drawer (Servicios)
========================================================= */
.nav{ display:none !important; }
.nav.nav-disabled{ display:none !important; }
.menu-toggle{ display:flex !important; }



/* Acordeón + submenu */
.menu-details > summary{ list-style:none; }
.menu-details > summary::-webkit-details-marker{ display:none; }

.menu-details[open] .mobile-nav-summary i{ transform: rotate(90deg); }
.mobile-nav-summary i{ transition: transform var(--t-fast, 150ms ease); }

.mobile-submenu{ list-style:none; margin: 8px 0 0; padding: 0 0 0 8px; }
.mobile-sub-link{
  display:block;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, #0b1220 8%);
  opacity: .92;
}
.mobile-sub-link:hover,
.mobile-sub-link:focus-visible{
  background: color-mix(in srgb, var(--primary, #003DA5) 10%, transparent);
  opacity: 1;
}
.mobile-summary-link.active,
.mobile-nav-link.active,
.mobile-sub-link.active {
  background: color-mix(in srgb, var(--primary, #003DA5) 13%, transparent);
  box-shadow: inset 0 0 0 1px rgba(27,114,255,0.14);
  opacity: 1;
}



/* =========================================================
   PATCH v2: Match reference positioning + hamburger aesthetics
   - Header actions pinned to top-right
   - Drawer overlay/menu class mapping to reference styles
========================================================= */

/* Header layout: brand left, actions right */
.header__inner{
  justify-content: space-between;
}
.brand{ flex: 0 0 auto; }
.header__actions{
  margin-left: auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* Ensure order: CTA, language, burger (as reference) */
.header__actions > .btn{ order: 1; }
.header__actions > .language-selector{ order: 2; }
.header__actions > .menu-toggle{ order: 3; }

/* Tighten right edge like reference */
.header__actions{ padding-right: 0; }
.container.header__inner, .container .header__inner{ } /* no-op guard */

/* Make language button same height as burger/cta */
.language-btn{
  height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.language-btn:hover{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-primary) 20%, transparent),
    0 0 18px var(--glow-1);
}
.language-code{ font-weight: 850; font-size: 12px; }

/* Burger button same capsule look */
.menu-toggle{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.menu-toggle:hover{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-primary) 20%, transparent),
    0 0 18px var(--glow-1);
}

/* --- Drawer overlay/menu: map our classes to reference styles --- */
.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-overlay);
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
.mobile-menu-overlay.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu{
  position: fixed;
  top: 0;
  right: 0;
  width: min(92vw, 420px);
  height: 100dvh;
  height: 100vh;
  background: color-mix(in srgb, var(--bg) 92%, #000 8%);
  border-left: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  box-shadow: 0 28px 90px rgba(0,0,0,0.45);
  transform: translateX(110%);
  transition: transform var(--t-normal);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 0;
  overflow: hidden;
}
.mobile-menu.open{ transform: translateX(0); }

.mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--border);
}
.close-menu{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.close-menu:hover{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 0 18px var(--glow-2);
}

.mobile-nav-list{
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:6px;
}

/* Card links like reference */
.mobile-nav-link,
.mobile-nav-summary,
.mobile-sub-link{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-weight: 900;
  letter-spacing: .1px;
}
.mobile-nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
}
.mobile-summary-link{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  padding:0;
}
.mobile-nav-link:hover,
.mobile-sub-link:hover{
  box-shadow: 0 0 18px var(--glow-2);
}

/* Submenu wrapper */
.mobile-submenu{
  margin: 8px 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mobile-sub-link{
  display:block;
  padding:12px 12px;
}

/* Active state (matches reference) */
.mobile-nav-link.active,
.mobile-summary-link.active,
.mobile-sub-link{
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-primary) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-primary) 16%, transparent);
}

/* Summary chevron */
.mobile-nav-summary i{
  transition: transform var(--t-normal);
}
.menu-details[open] .mobile-nav-summary i{
  transform: rotate(90deg);
}

/* Keep desktop actions on small screens consistent */
@media (max-width: 720px){
  .header__actions .btn--primary{ display:none; } /* same idea as reference: CTA goes inside menu on mobile */
}

/* Desktop: allow hamburger even on large screens (as requested) */
.menu-toggle{ display:grid !important; }



/* =========================================================
   PATCH: Button aesthetic (screenshot style)
   - Background: #5B75B6
   - Text: #fff
   - Radius: 8px (pill variants keep pill geometry)
   NOTE: Aesthetic-only. No ID changes.
========================================================= */
:root{
  --btn-solid-bg: #5B75B6;
  --btn-solid-bg-hover: #4F66A4;
  --btn-solid-text: #FFFFFF;
  --btn-solid-radius: 8px;
}

.btn,
.btn--primary,
.btn--light,
.btn--ghost,
.btn--ghost-light,
.btn--soft{
  background: var(--btn-solid-bg) !important;
  color: var(--btn-solid-text) !important;
  border: 1px solid color-mix(in srgb, #000 12%, transparent) !important;
  border-radius: var(--btn-solid-radius) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.btn:hover,
.btn:focus-visible,
.btn--primary:hover,
.btn--light:hover,
.btn--ghost:hover,
.btn--ghost-light:hover,
.btn--soft:hover{
  background: var(--btn-solid-bg-hover) !important;
  box-shadow: 0 10px 22px rgba(27, 35, 60, .12) !important;
}

/* Preserve pill geometry when present */
.btn--pill{ border-radius: 999px !important; }

/* Small button sizing used in card actions ("Ver más detalles") */
.btn--small{
  padding: 10px 16px !important;
  min-height: 38px;
}

/* Optional semantic helper class (no structural dependency) */
.btn--solid{}

/* If legacy .link remains somewhere, keep it visible but styled consistently */
a.link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 16px;
  border-radius: var(--btn-solid-radius);
  background: var(--btn-solid-bg);
  color: var(--btn-solid-text);
  border: 1px solid color-mix(in srgb, #000 12%, transparent);
  font-weight: 800;
}
a.link:hover{ background: var(--btn-solid-bg-hover); }



/* =========================================================
   PATCH: Mobile hamburger menu colors + remove underline highlight
   Requested:
   - Drawer base should be WHITE (not gray)
   - Main items (Inicio/Servicios/etc) should not be gray
   - Sub-items should NOT be white-only vs main; make consistent
   - Remove underline-looking highlight; keep normal highlight
   NOTE: IDs unchanged, aesthetic only.
========================================================= */

/* Drawer base: pure surface (white on light theme) */
html[data-theme="light"] .mobile-menu{
  background: var(--surface) !important;
}

/* Header inside drawer */
html[data-theme="light"] .mobile-menu-header{
  background: var(--surface) !important;
}

/* Main links: white cards */
html[data-theme="light"] .mobile-nav-link,
html[data-theme="light"] .mobile-nav-summary{
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Sub links: same family (slightly tinted surface, not pure white vs main) */
html[data-theme="light"] .mobile-sub-link{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Remove any underline effect anywhere in the drawer */
.mobile-menu a,
.mobile-menu a:hover,
.mobile-menu a:focus-visible{
  text-decoration: none !important;
}

/* Some styles use underline via text-decoration; neutralize */
.mobile-menu .link:hover,
.mobile-menu .mobile-nav-link:hover,
.mobile-menu .mobile-sub-link:hover{
  text-decoration: none !important;
  text-underline-offset: initial !important;
}

/* Active highlight stays (bg/border), but never underline */
.mobile-menu .active{
  text-decoration: none !important;
}

/* If any pseudo underline exists, kill it safely */
.mobile-menu .active::after,
.mobile-menu a::after{
  content: none !important;
}



/* =========================================================
   PATCH: Drawer colors (requested)
   - Main items (Inicio/Servicios/Centro/Noticias/Prensa/Contáctanos): GRAY background
   - Subitems (Acerca de / subservicios / Social): WHITE background
   NOTE: Only affects items INSIDE #mobile-menu.
========================================================= */

html[data-theme="light"] #mobile-menu .mobile-nav-link,
html[data-theme="light"] #mobile-menu .mobile-nav-summary{
  background: var(--surface-2) !important; /* light gray */
  color: var(--text) !important;
}

html[data-theme="light"] #mobile-menu .mobile-sub-link{
  background: var(--surface) !important; /* white */
  color: var(--text) !important;
}

/* Keep highlight normal; never underline */
#mobile-menu a,
#mobile-menu a:hover,
#mobile-menu a:focus-visible{
  text-decoration: none !important;
}
#mobile-menu .active::after,
#mobile-menu a::after{ content:none !important; }



/* =========================================================
   ESTÉTICA (solo UI) — Paleta + tipografía como referencia (index/stylebeca)
   Paleta solicitada:
   - Azul marino: #182389 (R24 G35 B137)
   - Negro: #000000
   - Tarjetas: #5B75B6 (R91 G117 B182)
   - Fondo páginas: #DCE2EF (R220 G226 B239)
   NOTA: No modifica estructura ni IDs. Solo colores/typography.
========================================================= */

html[data-theme="light"]{
  --c-primary: #182389;     /* azul marino */
  --c-secondary: #000000;   /* negro */
  --bg: #DCE2EF;            /* Morning cloud */
  --bg-2: #DCE2EF;
  --surface: #FFFFFF;
  --surface-2: rgba(255,255,255,.72);
  --text: #000000;
  --muted: rgba(0,0,0,.70);
  --border: rgba(24,35,137,.14);

  /* cards / CTA */
  --card-bg: #5B75B6;
  --card-text: #FFFFFF;
}

/* Tipografía como referencia */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen, Ubuntu, sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Fondo general (suave, sin cambiar layout) */
body:not(.theme-dark){
  background: var(--bg) !important;
}

/* =========================
   HAMBURGUESA — exactamente la paleta
========================= */

/* Base drawer */
html[data-theme="light"] #mobile-menu{
  background: var(--bg) !important; /* Morning cloud */
  border-left: 1px solid var(--border) !important;
  box-shadow: 0 28px 90px rgba(19,33,68,0.22) !important;
}

/* Header interno del drawer */
html[data-theme="light"] #mobile-menu .mobile-menu-header{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Items principales (Inicio/Servicios/Centro/Noticias/Prensa/Contáctanos): “card” azul */
html[data-theme="light"] #mobile-menu .mobile-nav-link,
html[data-theme="light"] #mobile-menu .mobile-nav-summary{
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 14px 34px rgba(19,33,68,0.10) !important;
  opacity: 1 !important;
}

/* Links dentro del summary */
html[data-theme="light"] #mobile-menu .mobile-summary-link,
html[data-theme="light"] #mobile-menu .mobile-summary-link span{
  color: var(--card-text) !important;
}

/* Chevron visible en azul/white */
html[data-theme="light"] #mobile-menu .mobile-nav-summary i{
  color: rgba(255,255,255,.92) !important;
}

/* Subservicios: blanco */
html[data-theme="light"] #mobile-menu .mobile-sub-link{
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 22px rgba(19,33,68,0.06) !important;
}

/* Hover */
html[data-theme="light"] #mobile-menu .mobile-nav-link:hover,
html[data-theme="light"] #mobile-menu .mobile-sub-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(19,33,68,0.14) !important;
}

/* Active: resaltado normal (sin subrayado) */
html[data-theme="light"] #mobile-menu .mobile-nav-link.active,
html[data-theme="light"] #mobile-menu .mobile-summary-link.active,
html[data-theme="light"] #mobile-menu .mobile-sub-link.active{
  background: color-mix(in srgb, var(--c-primary) 18%, #FFFFFF) !important;
  border-color: color-mix(in srgb, var(--c-primary) 22%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(24,35,137,0.18) !important;
  text-decoration: none !important;
}

/* Quitar cualquier “subrayado”/underline accidental */
#mobile-menu a,
#mobile-menu a:hover,
#mobile-menu a:focus-visible{
  text-decoration: none !important;
}
#mobile-menu .active::after,
#mobile-menu a::after{
  content: none !important;
}

/* Botón cerrar del drawer (misma paleta) */
html[data-theme="light"] #close-menu{
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: #000000 !important;
}
html[data-theme="light"] #close-menu:hover{
  box-shadow: 0 0 18px rgba(24,35,137,0.12) !important;
}



/* =========================================================
   PATCH (aesthetic only): Font + gray sections + hamburger palette
   - Add font stack (reference)
   - Services section background: #DCE2EF
   - CTA band background: #DCE2EF
   - Hamburger: base white, buttons gray, text dark gray, subitems white
   NOTE: No structure/ID changes.
========================================================= */

:root{ --morning-cloud: #DCE2EF; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* Services section background (remove blue) */
#lineas-servicio{
  background: var(--morning-cloud) !important;
}

/* CTA band background (remove blue) */
.cta{
  background: var(--morning-cloud) !important;
  color: color-mix(in srgb, var(--text) 92%, transparent) !important;
  box-shadow: none !important;
}
.cta .cta__title{ color: color-mix(in srgb, var(--text) 92%, transparent) !important; }
.cta .cta__text{ color: color-mix(in srgb, var(--text) 72%, transparent) !important; }

/* =========================================================
   Hamburger menu colors (match reference behavior described)
   - Base: white
   - Bottom base: if exists and is gray, keep (we only set neutral borders)
   - Main buttons: gray
   - Main text: dark gray
   - Subitems: white
========================================================= */

/* Base drawer */
html[data-theme="light"] #mobile-menu{
  background: #FFFFFF !important;
  border-left: 1px solid rgba(11,16,32,.10) !important;
}

/* Header/logo area can remain light gray like reference */
html[data-theme="light"] #mobile-menu .mobile-menu-header{
  background: var(--morning-cloud) !important;
  border-bottom: 1px solid rgba(11,16,32,.10) !important;
}

/* Main items (Inicio/Servicios/Centro/Noticias/Prensa/Contáctanos) -> gray buttons */
html[data-theme="light"] #mobile-menu .mobile-nav-link,
html[data-theme="light"] #mobile-menu .mobile-nav-summary{
  background: var(--morning-cloud) !important;
  border: 1px solid rgba(11,16,32,.10) !important;
  box-shadow: none !important;
}

/* Main text dark gray */
html[data-theme="light"] #mobile-menu .mobile-nav-link,
html[data-theme="light"] #mobile-menu .mobile-nav-summary,
html[data-theme="light"] #mobile-menu .mobile-summary-link,
html[data-theme="light"] #mobile-menu .mobile-summary-link span{
  color: rgba(11,16,32,.86) !important;
}

/* Chevron same dark gray */
html[data-theme="light"] #mobile-menu .mobile-nav-summary i{
  color: rgba(11,16,32,.70) !important;
}

/* Subitems -> white (as requested) */
html[data-theme="light"] #mobile-menu .mobile-sub-link{
  background: #FFFFFF !important;
  border: 1px solid rgba(11,16,32,.10) !important;
  color: rgba(11,16,32,.86) !important;
  box-shadow: none !important;
}

/* Active highlight: keep subtle (no blue) */
html[data-theme="light"] #mobile-menu .mobile-nav-link.active,
html[data-theme="light"] #mobile-menu .mobile-summary-link.active,
html[data-theme="light"] #mobile-menu .mobile-sub-link.active{
  background: color-mix(in srgb, rgba(11,16,32,.08) 100%, #FFFFFF) !important;
  border-color: rgba(11,16,32,.16) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Remove any underline effect in menu */
#mobile-menu a,
#mobile-menu a:hover,
#mobile-menu a:focus-visible{
  text-decoration: none !important;
}
#mobile-menu .active::after,
#mobile-menu a::after{ content: none !important; }



/* =========================================================
   PATCH (solo lo solicitado)
   1) En sección #lineas-servicio:
      - Palabra / título "Nuestras Líneas de Servicio" (Servicios) -> Azul Rey #182389
      - Subtítulo "Soluciones integrales..." -> color de botones (#5B75B6)
   2) Menú hamburguesa:
      - Base blanca (se mantiene)
      - Quitar borde/entorno SOLO en subservicios (.mobile-sub-link)
   NOTA: No cambia estructura ni IDs.
========================================================= */

/* 1) Título (Servicios) en Azul Rey */
#lineas-servicio .section__title{
  color: #182389 !important;
}

/* 1) Subtítulo en color de botones */
#lineas-servicio .section__subtitle,
#lineas-servicio [data-i18n-text="lines.subtitle"]{
  color: var(--btn-solid-bg, #5B75B6) !important;
}

/* 2) Drawer base blanca (refuerzo por si otro patch la pisa) */
html[data-theme="light"] #mobile-menu{
  background: #FFFFFF !important;
}

/* 2) Quitar borde SOLO en subservicios (acerca de / nómina / especializados / fiscal / social) */
html[data-theme="light"] #mobile-menu .mobile-sub-link{
  border: none !important;
  box-shadow: none !important;
}
/* =========================================================
   FIX SEGURO FINAL - Header actions shape (rectangular / square)
   - ¿Eres colaborador? = rectangular
   - Idioma = rectangular
   - Menú hamburguesa = cuadrado
   - No toca IDs/JS/HTML
========================================================= */

/* 1) ¿Eres colaborador? (header) -> rectangular */
.header__actions .btn.btn--primary.btn--pill{
  border-radius: 10px !important;   /* antes pill */
  padding: 10px 14px !important;
  min-height: 36px;
}

/* 2) Botón de idioma -> rectangular */
.header__actions .language-btn{
  height: 36px !important;
  border-radius: 10px !important;   /* antes pill */
  padding: 0 12px !important;
}

/* 3) Menú hamburguesa -> cuadrado */
.header__actions .menu-toggle{
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;   /* cuadrado con esquinas suaves */
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

/* Opcional: icono centrado visualmente */
.header__actions .menu-toggle i{
  line-height: 1;
  font-size: 16px;
}
/* SOLO botones principales del menú hamburguesa (no subservicios) */
html[data-theme="light"] #mobile-menu .mobile-nav-link,
html[data-theme="light"] #mobile-menu .mobile-nav-summary{
  background: rgba(220,226,239,0.55) !important; /* #DCE2EF opaco */
  color: var(--text) !important;
}

/* Hover solo principales */
html[data-theme="light"] #mobile-menu .mobile-nav-link:hover,
html[data-theme="light"] #mobile-menu .mobile-nav-summary:hover{
  background: rgba(220,226,239,0.55) !important;
}