/* acerca.css (REESTRUCTURADO / LIMPIO)
   - Fondos: blancos / grises claros
   - Textos: negro / gris fuerte
   - Acentos: azul de marca (solo en detalles y botones)
*/

/* =========================
   Theme / Tokens
========================= */
:root{
  --z-header: 10000;
  --t-fast: 150ms ease;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --max: 1180px;
  --header-h: 74px;
  --radius: 18px;
  --radius-lg: 26px;

  /* Fondos (claros) */
  --bg: #DCE2EF;
  --bg-2: #DCE2EF;
    --bg-soft: #DCE2EF;
--panel: #DCE2EF;

  /* Texto (alto contraste) */
  --text: #000000;
  --heading: #182389;
  --muted: rgba(0,0,0,.72);
  --muted-2: rgba(0,0,0,.58);

  /* Marca (se mantiene) */
  --primary: #182389;
  --primary-2: #182389;
  --accent: #5B75B6;

  --grad-primary: linear-gradient(180deg, #5B75B6 0%, #5B75B6 100%);

  /* Bordes / sombras */
  --border: rgba(24,35,137,.18);
  --border-2: rgba(24,35,137,.26);

  --shadow: 0 18px 60px rgba(91,117,182,.18);
  --shadow-soft: 0 14px 40px rgba(91,117,182,.14);
  --shadow-lg: 0 28px 90px rgba(91,117,182,.22);

  /* 3D tilt helpers */
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-z: 0px;
}


/* =========================
   Dark mode (compat)
   Activa con: body.theme-dark
========================= */
body.theme-dark{
  --bg: #0B1020;
  --bg-2: #0E1630;
  --bg-soft: #0E1630;
  --panel: #0E1630;

  --text: #F3F6FF;
  --heading: #FFFFFF;
  --muted: rgba(243,246,255,.74);
  --muted-2: rgba(243,246,255,.60);

  --border: rgba(91,117,182,.28);
  --border-2: rgba(91,117,182,.36);

  --shadow: 0 18px 55px rgba(0,0,0,0.40);
  --shadow-soft: 0 14px 40px rgba(0,0,0,0.30);
  --shadow-lg: 0 28px 90px rgba(0,0,0,0.58);

  background:
    radial-gradient(1200px 700px at 55% 10%, rgba(27,114,255,0.16), transparent 60%),
    radial-gradient(900px 600px at 18% 85%, rgba(0,61,165,0.10), transparent 62%),
    linear-gradient(180deg, #060813 0%, #070b14 55%, #060813 100%);
}
/* =========================
   Reset / Base
========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(var(--max), 100% - 40px); margin:0 auto; }
.w-full{ width:100%; }
.muted{ color:var(--muted); }
.accent{ color: var(--primary); }

::selection{ background: rgba(27,114,255,.20); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 3px solid rgba(27,114,255,.40);
  outline-offset: 3px;
  border-radius: 14px;
}

/* =========================
   Tipografía BAUSEN
========================= */
h1,h2,h3,h4,.logo-text{
  font-family: "Momo Trust", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.08em;
  color: var(--heading);
}
p, .section__sub, .hero__subtitle, .muted{
  font-family: "Source Sans 3", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
p, li{ color: var(--muted); }

/* =========================
   Header
========================= */
.site-header{
  position: sticky;
  top:0; left:0; right:0;
  width:100%;
  z-index: var(--z-header);
  height: var(--header-h);
  background: #DCE2EF !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(19,33,68,0.06);
}
.site-header:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 1px;
  background: rgba(0,0,0,.04);
  pointer-events:none;
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ height: 26px; width:auto; object-fit:contain; }
.brand img,
.logo-link img{
  width: 140px;
  max-width: 180px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(19,33,68,0.10));
}
.header__actions{ display:flex; align-items:center; gap:10px; }
/* =========================
   CONTROLES HEADER (igual a stylebeca.css)
========================= */

/* CTA colaborador (fuera del menú, en header) */
.collab-cta--header{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  box-shadow: none;
}

/* Language selector (desktop) — mismo tamaño/tono que referencia */
.language-selector{ position: relative; }

.language-btn{
  display:flex;
  align-items:center;
  gap: 8px;

  height: 44px;
  padding: 0 12px;
  min-width: 44px;
  border-radius: 14px;

  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 .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.language-btn:hover{ transform: translateY(-1px); }

.language-btn i{
  font-size: 12px;
  transition: transform .18s var(--ease);
}

.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: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 28px 90px rgba(19,33,68,0.16);

  min-width: 230px;
  padding: 8px;

  opacity:0;
  visibility:hidden;
  transform: translateY(-8px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s var(--ease);
  z-index: calc(var(--z-header) + 30);
}

.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 .15s var(--ease);
}

.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));
}

/* Hamburguesa (PC + móvil) — mismo tamaño que referencia */
/* =========================
   HAMBURGUESA (PIXEL-PERFECT)
   - NO IDs / NO JS / NO HTML
   - Barras dibujadas con CSS (control total de grosor/color)
========================= */
.icon-btn.burger{
  /* Tamaño como referencia (puedes ajustar 46/44 si tu referencia exacta difiere) */
  width: 46px;
  height: 44px;
  border-radius: 14px;

  /* Fondo azul muy claro + borde azul claro/blanco */
  background: rgba(27,114,255,.10);
  border: 1px solid rgba(27,114,255,.22);
  box-shadow: 0 12px 26px rgba(19,33,68,.10);

  display: grid;
  place-items: center;
  cursor: pointer;

  position: relative;
  overflow: hidden;

  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

/* Apaga el ícono FA (para que NO interfiera con grosor) */
.icon-btn.burger i{
  opacity: 0 !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Tres barras dibujadas (grosor real controlado) */
.icon-btn.burger::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* Ancho de barras (ajusta si tu referencia es más larga/corta) */
  width: 18px;

  /* Grosor EXACTO de barras (aquí controlas el look) */
  height: 2.5px;
  border-radius: 999px;

  /* Color de barras (alto contraste, como referencia) */
  background: rgba(11,22,51,.92);

  /* Crea las otras 2 barras con sombras */
  box-shadow:
    0 -6px 0 rgba(11,22,51,.92),
    0  6px 0 rgba(11,22,51,.92);
}

/* Hover “encendido” como referencia */
.icon-btn.burger:hover{
  transform: translateY(-1px);
  background: rgba(27,114,255,.14);
  border-color: rgba(27,114,255,.30);
  box-shadow:
    0 18px 40px rgba(19,33,68,.12),
    0 0 0 4px rgba(27,114,255,.10);
}

/* Active/pressed */
.icon-btn.burger:active{
  transform: translateY(0);
  box-shadow:
    0 12px 26px rgba(19,33,68,.10),
    0 0 0 3px rgba(27,114,255,.10);
}
/* Ocultar CTA del header si existe (solo en menú móvil según tu regla) */
.header__actions .collab-cta--header{ display:inline-flex !important; }

/* Nav desktop */
.nav{
  margin-left:auto;
  display:flex;
  gap:18px;
  align-items:center;
}
.nav__link{
  position:relative;
  font-size: 14px;
  color: rgba(11,22,51,.80);
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
  border: 1px solid transparent;
}
.nav__link:hover{
  background: rgba(0,61,165,.06);
  border-color: rgba(0,61,165,.14);
  color: var(--text);
  transform: translateY(-1px);
}
.nav__link.is-active{
  background: rgba(0,61,165,.10);
  border: 1px solid rgba(0,61,165,.20);
  color: var(--text);
}

/* Buttons */
.icon-btn{
  height: 38px;
  min-width: 38px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text);
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(24,35,137,.10);
  border-color: rgba(0,61,165,.22);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  user-select:none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn--pill{ border-radius: 999px; padding: 10px 14px; }

.btn--primary,
.btn-primary{
  background: var(--grad-primary);
  color: #FFFFFF;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 14px 36px rgba(0,61,165,.18);
}
.btn--primary{
  background: #182389;
  box-shadow: 0 18px 50px rgba(0,61,165,.22);
}

.btn--ghost{
  background: #5B75B6;
  border-color: #5B75B6;
  color: var(--text);
}
.btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(0,61,165,.22);
}
.btn i{ font-size: 14px; }

/* Language (desktop) */
.lang{ display:flex; align-items:center; position: relative; }
.lang__btn{
  display:flex;
  align-items:center;
  gap:10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text);
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.lang__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,61,165,.22);
}
.lang__code{ font-weight: 950; letter-spacing: .02em; }

.lang__list{
  position:absolute;
  top: 46px;
  left:0;
  margin:0;
  padding:8px;
  width: 220px;
  list-style:none;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
  display:none;
  transform-origin: top left;
}
.lang__list.is-open{
  display:block;
  animation: pop .16s var(--ease) both;
}
@keyframes pop{
  from{ opacity:0; transform: translateY(-6px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.lang__list li{
  padding:10px 10px;
  border-radius: 12px;
  cursor:pointer;
  color: rgba(11,22,51,.86);
  transition: background .16s var(--ease);
}
.lang__list li:hover{ background: rgba(0,61,165,.06); }

/* =========================
   HEADER MENU (PC + MÓVIL)
   Drawer + overlay (estética stylebeca)
========================= */

/* Fuerza hamburguesa visible en PC y móvil */
.burger{ display:grid !important; }

/* (Opcional) si existiera nav horizontal en esta página, lo apagamos */
.nav, .nav-list{ display:none !important; }

/* Overlay */
.mobile-menu-overlay[hidden]{ display:none !important; }
.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10010;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.mobile-menu-overlay.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

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

/* Header del drawer */
.mobile-menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.mobile-logo .logo-img{
  width: 140px;
  height: auto;
  display:block;
  object-fit: contain;
}
.close-menu{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  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 .18s var(--ease), box-shadow .18s var(--ease);
}
.close-menu:hover{ transform: translateY(-1px); }

/* Lista */
.mobile-nav-list{
  list-style:none;
  padding: 12px;
  margin: 0;
  flex: 1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-list > li{ margin-bottom: 6px; }
.mobile-nav-item{ list-style:none; }

/* Acordeón */
.mobile-accordion{ list-style:none; padding: 8px 0; margin:0; }
.menu-details{ width:100%; }
.menu-details > summary{ list-style:none; }
.menu-details > summary::-webkit-details-marker{ display:none; }

/* Link base */
.mobile-nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  text-decoration:none;
  color: var(--text);
  font-weight: 950;
  background: color-mix(in srgb, var(--bg) 92%, #0b1220 8%);
  border: 1px solid var(--border);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease), box-shadow .18s var(--ease);
  opacity: 0.95;
}

/* Summary (Inicio/Noticias) usa misma estética, solo acomoda flecha */
.mobile-nav-summary{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* Quitar subrayado del link dentro del summary */
.mobile-menu .mobile-summary-link{ text-decoration:none !important; }
.mobile-menu .mobile-summary-link:hover,
.mobile-menu .mobile-summary-link:focus-visible{ text-decoration:none !important; }

/* Chevron */
.mobile-nav-summary i{
  font-size: 12px;
  opacity: 0.85;
  transition: transform .15s var(--ease);
}
.menu-details[open] > summary i{ transform: rotate(90deg); }

.mobile-nav-link:hover,
.mobile-nav-link.active{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: rgba(0,61,165,.18);
  box-shadow: 0 14px 34px rgba(24,35,137,.14);
  opacity: 1;
}

/* Submenú */
.mobile-submenu{
  list-style:none;
  margin: 6px 0 10px 0;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--border);
}
.mobile-submenu li{ list-style:none; }

.mobile-sub-link{
  display:block;
  text-decoration:none;
  color: var(--text);
  opacity: 0.9;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .15s var(--ease), opacity .15s var(--ease), transform .15s var(--ease);
}
.mobile-sub-link:hover,
.mobile-sub-link:focus-visible{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  opacity: 1;
  transform: translateY(-1px);
  outline:none;
}

/* CTA al final del menú (full width como referencia) */
.mobile-cta{ padding-top: 10px; }
.mobile-menu .mobile-nav-list .btn.btn-primary.btn-sm{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px 18px;
  min-height: 48px;
  border-radius: 16px;
}
.mobile-menu .mobile-nav-list > li:last-child{ margin-top: 12px; }

/* Desktop UX: hover para ver submenú (sin romper móvil) */
@media (hover: hover) and (pointer: fine){
  .menu-details:not([open]) > .mobile-submenu{ display: none; }
  .menu-details:hover > .mobile-submenu{ display: block; }
  .menu-details:hover > summary i{ transform: rotate(90deg); }
}

/* Scroll lock (si tu JS agrega menu-open al body) */
body.menu-open{
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* Resaltado “active” en móvil más limpio (si tu JS ya marca .active) */
@media (max-width: 980px){
  .mobile-menu .mobile-nav-link.active{
    background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
}
/* =========================
   3D Tilt (data-tilt)
========================= */
[data-tilt]{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
[data-tilt].is-tilting{
  transform: perspective(1000px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) translateZ(var(--tilt-z));
}

/* =========================
   Hero
========================= */
.hero{
  position: relative;
  padding: 72px 0 70px;
  overflow:hidden;
  background: var(--bg);
}

.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items:start;
  position:relative;
}

/* Deja ambiente suave (sin “oscurecer” tipografía) */
.hero__bg .orb{
  position:absolute;
  border-radius:999px;
  opacity:.55;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.85), rgba(255,255,255,.18) 42%, rgba(0,0,0,0) 68%),
    radial-gradient(circle at 60% 70%, rgba(0,61,165,.18), rgba(24,35,137,.10) 58%, rgba(0,0,0,0) 80%);
  box-shadow: 0 22px 80px rgba(24,35,137,.10);
  filter: saturate(1.05);
  animation: floaty 14s var(--ease) infinite;
}
.hero__bg .o1{ width: 420px; height:420px; left:-160px; top: 90px; animation-duration: 15s; }
.hero__bg .o2{ width: 320px; height:320px; right:-120px; top: 90px; animation-duration: 17s; }
.hero__bg .o3{ width: 420px; height:420px; right:-160px; bottom:-220px; animation-duration: 19s; opacity:.40; }

@keyframes floaty{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-10px, -14px) scale(1.02); }
}

.hero__copy{ position:relative; }
.hero__title{
  margin: 16px 0 12px;
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--heading);
}

/* Acento visible (antes era blanco “invisible”) */
.hero__accent{
  background: var(--grad-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero__subtitle{
  margin:0 0 18px;
  color: rgba(11,22,51,.72);
  max-width: 560px;
  line-height: 1.6;
  font-weight: 650;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 18px; }

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.stat{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.stat:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(260px 140px at 20% 10%, rgba(27,114,255,.10), transparent 60%),
    radial-gradient(220px 140px at 90% 80%, rgba(168,85,247,.06), transparent 60%);
  opacity:.85;
  pointer-events:none;
}
.stat__k{
  position:relative;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: rgba(11,22,51,.92);
}
.stat__t{
  position:relative;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

/* Panel derecha */
.hero__panel{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow:hidden;
  isolation:isolate;
}
.hero__panel:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 240px at 20% 10%, rgba(27,114,255,.10), transparent 55%),
    radial-gradient(420px 240px at 90% 30%, rgba(34,197,94,.06), transparent 55%),
    radial-gradient(520px 300px at 40% 110%, rgba(168,85,247,.06), transparent 55%);
  opacity:.95;
  pointer-events:none;
  z-index:-1;
}
.hero__panel:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.02) 1px, transparent 0);
  background-size: 14px 14px;
  opacity:.45;
  mix-blend-mode: multiply;
}

.hero__panel-top{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 14px;
}
.chip-mini{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(245,246,250,.9);
  font-weight: 950;
  font-size: 12px;
  color: rgba(11,22,51,.86);
}

/* Holo (se mantiene claro, sin “cuadro azul” / sin tintas blancas) */
.holo{
  position:relative;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.holo:before, .holo:after{ content:""; position:absolute; border-radius:999px; opacity:.35; pointer-events:none; }
.holo:before{
  width: 220px; height:220px; left: -90px; bottom: -110px;
  background: radial-gradient(circle at 30% 30%, rgba(27,114,255,.14), transparent 62%);
}
.holo:after{
  width: 180px; height:180px; right: -90px; top: -100px;
  background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.12), transparent 62%);
}

.holo__ring{ display:none; }  /* rings quitados: evitamos “recuadro”/exceso visual */
.holo__core{ position:relative; display:flex; align-items:center; gap:12px; }
.holo__logo{
  width: 46px; height:46px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight: 950;
  color:#FFFFFF;
  background: var(--grad-primary);
  box-shadow: 0 16px 40px rgba(0,61,165,.16);
}
.holo__txt strong{ display:block; font-weight: 950; letter-spacing: -0.01em; color: var(--heading); }
.holo__txt span{ display:block; color: var(--muted); font-weight: 850; font-size: 12px; margin-top: 2px; }

.hero__panel-cards{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.mini-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #FFFFFF;
}
.mini-ico{
  width: 40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid var(--border);
  background: rgba(0,61,165,.06);
  color: var(--primary);
}
.mini-ico.is-blue{ background: rgba(27,114,255,.10); color: var(--primary); }
.mini-ico.is-purple{ background: rgba(168,85,247,.08); color: var(--primary-2); }
.mini-card p{ margin:4px 0 0; color: var(--muted); font-weight: 750; font-size: 12px; line-height: 1.45; }
.mini-card strong{ font-weight: 950; color: var(--heading); }

.hero__panel-hint{
  position:relative;
  margin-top: 12px;
  text-align:center;
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

@media (max-width: 980px){
  .hero{ padding: 60px 0 40px; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__panel{ order: 2; }
  .stats{ grid-template-columns: 1fr 1fr; }
}

/* =========================
   Esencia
========================= */
.essence{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.e-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.e-card__top{ display:flex; align-items:center; gap:10px; }
.e-ico{
  width: 44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(0,61,165,.10);
  border: 1px solid rgba(0,61,165,.18);
  color: var(--primary);
}
.e-card h3{ margin:0; font-weight: 950; color: var(--heading); }
.e-card p{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
}
.e-card__bar{
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
}

/* “featured” sin marco azul agresivo */
.e-card.is-featured{
  border-color: rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.e-card.is-featured:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(460px 220px at 20% 10%, rgba(27,114,255,.08), transparent 55%),
    radial-gradient(420px 240px at 90% 30%, rgba(168,85,247,.06), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.anchor{ margin-top: 16px; display:flex; justify-content:center; }
@media (max-width: 980px){ .essence{ grid-template-columns: 1fr; } }

/* =========================
   Testimonials
========================= */
.testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tcard{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.tcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Si tienes --warn definido en otra hoja, lo usará; si no, mantén neutro */
.stars{ color: #F59E0B; display:flex; gap:6px; }

.result-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,61,165,.18);
  background: rgba(0,61,165,.06);
  color: rgba(11,22,51,.92);
  font-weight: 950;
  font-size: 12px;
}
.result-pill.is-blue{ border-color: rgba(27,114,255,.22); }
.result-pill.is-purple{ border-color: rgba(168,85,247,.18); }

.tcard__q{
  margin: 12px 0 14px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
}
.tcard__who{
  display:flex;
  gap:10px;
  align-items:center;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.avatar{
  width: 42px; height:42px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(0,61,165,.08);
  color: var(--primary);
  font-weight: 950;
}
.tcard__who span{ display:block; color: var(--muted); font-size: 12px; margin-top: 3px; font-weight: 850; }

@media (max-width: 980px){ .testimonials{ grid-template-columns: 1fr; } }

/* =========================
   Why BAUSEN
========================= */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.why-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.why-ico{
  width: 44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: rgba(0,61,165,.06);
  color: var(--primary);
}
.why-ico.is-blue{ background: rgba(27,114,255,.10); color: var(--primary); }
.why-ico.is-purple{ background: rgba(168,85,247,.08); color: var(--primary-2); }
.why-ico.is-cyan{ background: rgba(34,211,238,.10); color: #0B7285; }
.why-ico.is-slate{ background: rgba(148,163,184,.14); color: #334155; }
.why-ico.is-indigo{ background: rgba(99,102,241,.10); color: #3730A3; }
.why-ico.is-teal{ background: rgba(20,184,166,.10); color: #0F766E; }

.why-card h3{ margin:0 0 8px; font-weight: 950; color: var(--heading); }
.why-card p{ margin:0; color: var(--muted); font-weight: 850; font-size: 13px; line-height: 1.55; }

@media (max-width: 980px){ .why-grid{ grid-template-columns: 1fr; } }

/* =========================
   Leader (QUITA “recuadro azul”)
========================= */
.leader{
  margin: 0 auto;
  width: min(420px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
  padding: 26px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.leader:before{ display:none; } /* elimina glow/gradientes que daban “cuadro azul” */
.leader__icon{
  width: 54px; height:54px;
  border-radius: 18px;
  display:grid; place-items:center;
  margin: 0 auto 12px;
  background: rgba(0,61,165,.08);
  color: var(--primary);
  box-shadow: 0 18px 46px rgba(24,35,137,.10);
}
.leader h3{ margin:0 0 6px; font-weight: 950; color: var(--heading); }
.leader p{ margin:0; color: var(--muted); font-weight: 900; font-size: 12px; }
/* =========================
   EQUIPO DIRECTIVO (definitivo, sin “fix sobre fix”)
   - Imagen MUY GRANDE (1120x1220) SOLO en #equipo
========================= */
#equipo .leader{
  /* Card amplia para soportar imagen grande */
  width: min(820px, 100%);
  padding: 64px 44px;
  border-radius: 24px;

  background: #5B75B6;
  border: 1px solid rgba(24,35,137,.18);
  box-shadow: 0 18px 60px rgba(91,117,182,.22);

  text-align: center;
}

#equipo .leader__icon{
  /* Quita el límite 54x54 del estilo base */
  width: auto;
  height: auto;
  margin: 0 auto 26px;

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

  background: transparent;
  box-shadow: none;
}

#equipo .leader__img{
  /* Tamaño solicitado (ancho 1120px, alto 1220px) */
  width: 380px;
  height: 380px;
  border-radius: 22px;
  object-fit: cover;

  display: block;
  box-shadow: 0 18px 46px rgba(24,35,137,.18);
  border: 1px solid rgba(0,0,0,.06);
}

#equipo .leader h3{
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.10;
  letter-spacing: -0.03em;
  color: #182389;
}

#equipo .leader p{
  margin: 0;
  font-size: 28px;
  line-height: 1.30;
  font-weight: 900;
  color: rgba(0,0,0,.90);
}



.hero__accent{ color:#000000 !important; } /* “BAUSEN” en negro; “Acerca de” se queda en azul */
/* =========================
   Process
========================= */
.process{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: var(--shadow);
  padding: 18px;
}
.process__top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-bottom: 14px;
}
.pnum{
  width: 44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 950;
  letter-spacing: -0.02em;
  border: 1px solid var(--border);
  background: rgba(0,61,165,.06);
  color: var(--primary);
}
.pnum.is-blue{ background: rgba(27,114,255,.10); color: var(--primary); }
.pnum.is-purple{ background: rgba(168,85,247,.08); color: var(--primary-2); }
.pnum.is-pink{ background: rgba(236,72,153,.10); color: #9D174D; }
.pnum.is-green{ background: rgba(34,197,94,.10); color: #166534; }

.pplus{ font-weight: 950; color: rgba(11,22,51,.45); }

.process__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pstep{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 14px;
}
.pstep__t{ font-weight: 950; color: var(--heading); }
.pstep__p{ margin:6px 0 0; color: var(--muted); font-weight: 850; font-size: 12px; line-height: 1.5; }

@media (max-width: 980px){ .process__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){
  .process__grid{ grid-template-columns: 1fr; }
  .process__top{ flex-wrap:wrap; }
}

/* =========================
   Timeline
========================= */
.timeline{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.year-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.year-card__icon{
  width: 46px; height:46px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(27,114,255,.10);
  border: 1px solid rgba(27,114,255,.16);
  color: var(--primary);
  margin-bottom: 10px;
}
.year-card__year{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--heading);
}
.year-card p{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
  line-height: 1.55;
}
.year-card:after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 200px at 20% 10%, rgba(27,114,255,.08), transparent 55%),
    radial-gradient(360px 220px at 90% 60%, rgba(168,85,247,.06), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
@media (max-width: 980px){ .timeline{ grid-template-columns: 1fr; } }

/* =========================
   FAQ
========================= */
.faq-search{
  width: min(720px, 100%);
  margin: 0 auto 14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
}
.faq-search i{ color: rgba(11,22,51,.50); }
.faq-search input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-weight: 750;
  font-size: 14px;
}
.faq-search input::placeholder{ color: rgba(11,22,51,.45); }

.faq{
  width: min(920px, 100%);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.faq__item{
  width:100%;
  text-align:left;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  padding: 14px 14px;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  display:grid;
  grid-template-columns: 34px 1fr 22px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "n q chev"
    "a a a";
  gap: 6px 10px;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.faq__item:hover{
  transform: translateY(-1px);
  border-color: rgba(0,61,165,.18);
  background: #FFFFFF;
}
.faq__n{
  grid-area:n;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 950;
  color: var(--primary);
  background: rgba(27,114,255,.10);
  border: 1px solid rgba(27,114,255,.16);
}
.faq__q{
  grid-area:q;
  font-weight: 950;
  line-height: 1.35;
  color: var(--heading);
}
.faq__chev{
  grid-area:chev;
  justify-self:end;
  align-self:start;
  color: rgba(11,22,51,.55);
  transition: transform .22s var(--ease);
}
.faq__a{
  grid-area:a;
  display:block;
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
  transition: max-height .28s var(--ease), opacity .28s var(--ease), transform .28s var(--ease), margin-top .28s var(--ease);
  margin-top: 0;
}
.faq__item[aria-expanded="true"]{
  border-color: rgba(0,61,165,.18);
  background: #FFFFFF;
}
.faq__item[aria-expanded="true"] .faq__a{
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
}
.faq__item[aria-expanded="true"] .faq__chev{ transform: rotate(180deg); }

.faq-empty{
  text-align:center;
  margin-top: 14px;
  color: var(--muted);
  font-weight: 850;
}

/* =========================
   CTA mini
========================= */
.cta-mini{
  padding: 40px 0 86px;
  position:relative;
  background: var(--bg);
}
.cta-mini__box{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: var(--shadow);
  padding: 16px;
  display:grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 12px;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.cta-mini__box:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(27,114,255,.08), transparent 58%),
    radial-gradient(420px 240px at 90% 50%, rgba(168,85,247,.06), transparent 58%),
    radial-gradient(520px 280px at 50% 120%, rgba(34,197,94,.06), transparent 58%);
  opacity:.95;
  pointer-events:none;
}
.cta-mini__field{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(245,246,250,.9);
  padding: 12px 12px;
}
.cta-mini__field i{ color: rgba(11,22,51,.50); }
.cta-mini__field input{
  width:100%;
  border:0;
  outline:none;
  background: transparent;
  color: var(--text);
  font-weight: 750;
  font-size: 14px;
}
.cta-mini__field input::placeholder{ color: rgba(11,22,51,.45); }
.cta-mini__btn{ white-space:nowrap; }
.cta-mini__msg{
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-weight: 850;
  color: var(--muted);
}
@media (max-width: 980px){
  .cta-mini__box{ grid-template-columns: 1fr; gap: 10px; }
  .cta-mini__btn{ width:100%; }
}

/* =========================
   Footer (SIN azul: gris claro/blanco)
========================= */
.site-footer{
  border-top: 1px solid rgba(0,0,0,.06);
  background: var(--bg-2);
  padding: 54px 0 18px;
  color: var(--text);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.35fr .75fr .75fr .95fr;
  gap: 24px;
  padding-bottom: 28px;
}

.footer__brand .footer__logo{
  width: 140px;
  margin-bottom: 12px;
}
.footer__desc{
  margin:0 0 14px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
}

.footer__hours{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #FFFFFF;
}
.footer__hours strong{ display:block; font-weight: 950; color: var(--heading); }
.footer__hours span{ display:block; color: var(--muted); font-weight: 850; font-size: 12px; margin-top: 2px; }

.footer__social{ margin-top: 14px; }
.footer__social span{ display:block; color: var(--muted); font-weight: 850; margin-bottom: 10px; }

.social{ display:flex; gap:10px; flex-wrap:wrap; }
.social a{
  width: 40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(0,0,0,.06);
  background: #FFFFFF;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.social a:hover{
  transform: translateY(-1px);
  border-color: rgba(0,61,165,.18);
  background: #FFFFFF;
}

.footer__col h4{
  margin: 0 0 12px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.footer__col a{
  display:block;
  padding: 8px 0;
  color: rgba(11,22,51,.84);
  font-weight: 750;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.footer__col a:hover{
  color: var(--primary);
  transform: translateX(2px);
}

.footer__contact{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.citem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #FFFFFF;
}
.citem strong{ display:block; font-weight: 950; color: var(--heading); }
.citem span{ display:block; color: var(--muted); font-weight: 850; font-size: 12px; margin-top: 2px; }

/* Botón mapa: sin “cuadro azul” */
.map{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #FFFFFF;
  font-weight: 900;
  color: var(--primary);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.map:hover{
  transform: translateY(-1px);
  border-color: rgba(0,61,165,.18);
  background: rgba(0,61,165,.04);
}

.footer__bottom{
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(11,22,51,.70);
  font-weight: 750;
  font-size: 12px;
}
.footer__links{ display:flex; gap: 14px; flex-wrap:wrap; }
.footer__links a{
  color: inherit;
  opacity:.95;
  transition: opacity .18s var(--ease), color .18s var(--ease);
}
.footer__links a:hover{ opacity:1; color: var(--primary); }

@media (max-width: 980px){
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* =========================
   Language selector (extra)
========================= */
.language-selector{ position:relative; }
.language-btn{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text);
  cursor:pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.language-btn:hover{ transform: translateY(-1px); border-color: rgba(0,61,165,.18); }
.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: #FFFFFF;
  box-shadow: 0 10px 22px rgba(31,94,255,0.08);
}

.language-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  list-style:none;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  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);
}
.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: rgba(0,61,165,.06); }

.lang-option-flag{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #FFFFFF;
}

/* Flags SVG sizing */
.language-flag,
.lang-option-flag {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.language-btn .language-flag { margin-right: 10px; }
.language-dropdown .language-option { display: flex; align-items: center; gap: 10px; }
.lang-option-flag svg,
.language-flag svg { display: block; width: 18px; height: 18px; }

/* Modo claro fijo */
#themeToggle, #themeToggleMobile { display:none !important; }
/* =========================================================
   PATCH ESTÉTICA (CSS ONLY) — MATCH stylebeca.css
   - NO cambia IDs ni estructura (solo overrides)
   - Scope: header + drawer para no alterar el resto del sitio
========================================================= */

/* 1) Tokens “azul claro” como referencia, SOLO en header/drawer */
.site-header{
  --primary: #182389;
  --primary-2: #182389;
  --border: rgba(24,35,137,.18);
  --text: #000000;
  --bg: #DCE2EF;

  --t-fast: 150ms ease;
  --t-normal: 250ms ease;
}

/* 2) Botón de idioma: mismo tono, borde y tamaño que stylebeca */
.site-header .language-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  min-width: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(24,35,137,0.14);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.site-header .language-btn:hover{ transform: translateY(-1px); }
.site-header .language-btn i{ font-size: 12px; transition: transform var(--t-fast); }
.site-header .language-btn[aria-expanded="true"] i{ transform: rotate(180deg); }
.site-header .language-flag{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.site-header .language-btn .language-flag{ margin-right: 10px; }

.site-header .language-code{
  font-weight: 850;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Dropdown idioma: mismo spacing + “card” */
.site-header .language-dropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);

  list-style:none;
  margin:0;
  padding: 8px;

  min-width: 230px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: 0 28px 90px rgba(19,33,68,0.16);

  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);
}
.site-header .language-dropdown.show{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.site-header .language-dropdown .language-option{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor:pointer;

  color: var(--text);
  font-weight: 900;
  transition: background var(--t-fast);
}
.site-header .language-dropdown .language-option:hover{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.site-header .lang-option-flag{
  display:inline-flex;
  width: 18px;
  height: 18px;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
}

/* 3) Hamburguesa: MISMA estética (azul claro + borde) sin cambiar tu ID/clase */
.site-header .icon-btn.burger{
  width: 46px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(24,35,137,0.14);
  box-shadow: 0 12px 26px rgba(19,33,68,0.10);
  display: grid;
  place-items: center;
}
.site-header .icon-btn.burger:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(19,33,68,0.12);
}
.site-header .icon-btn.burger i{
  font-size: 18px;
  line-height: 1;
  color: var(--text);
}

/* 4) Overlay y drawer: corrige RGBA (en tu CSS actual hay rgba(...,52) que no es válido)
      y deja el look igual a stylebeca */
#mobile-menu-overlay{
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10010;
}
#mobile-menu{
  width: min(92vw, 420px);
  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);
  z-index: 10011;
}

/* Header del drawer (close button igual a idioma/hamburguesa) */
#mobile-menu .close-menu{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  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);
}
#mobile-menu .close-menu:hover{ transform: translateY(-1px); }

/* 5) Espaciados internos del menú (el “espacio pequeño” de la referencia) */
#mobile-menu .mobile-nav-list{ padding: 12px; margin:0; }
#mobile-menu .mobile-nav-list > li{ margin-bottom: 6px; }
#mobile-menu .mobile-accordion{ padding: 8px 0; margin:0; }

/* Links del menú: mismos radios + borde + hover */
#mobile-menu .mobile-nav-link{
  padding: 14px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 92%, #0b1220 8%);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 950;
  opacity: 0.95;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}
#mobile-menu .mobile-nav-link:hover,
#mobile-menu .mobile-nav-link.active{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: rgba(31,94,255,0.18);
  box-shadow: 0 14px 34px rgba(24,35,137,0.14);
  opacity: 1;
}

/* Submenu (idéntico comportamiento/spacing de stylebeca) */
#mobile-menu .mobile-submenu{
  list-style:none;
  margin: 6px 0 10px 0;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--border);
}
#mobile-menu .mobile-sub-link{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  opacity: 0.9;
  transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
#mobile-menu .mobile-sub-link:hover,
#mobile-menu .mobile-sub-link:focus-visible{
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  opacity: 1;
  transform: translateY(-1px);
  outline:none;
}

/* FIX: sin subrayado en Inicio/Noticias dentro del summary (referencia) */
#mobile-menu .mobile-summary-link{ text-decoration: none !important; }
#mobile-menu .mobile-summary-link:hover,
#mobile-menu .mobile-summary-link:focus-visible{ text-decoration: none !important; }

/* Desktop UX: hover abre submenu (igual referencia) */
@media (hover: hover) and (pointer: fine){
  #mobile-menu .menu-details:not([open]) > .mobile-submenu{ display:none; }
  #mobile-menu .menu-details:hover > .mobile-submenu{ display:block; }
  #mobile-menu .menu-details:hover > summary i{ transform: rotate(90deg); }
}

/* Ajustes de ancho en breakpoints como referencia */
@media (max-width: 768px){
  #mobile-menu{ width: min(85vw, 420px); }
}
@media (max-width: 420px){
  #mobile-menu{ width: 100vw; border-left: 0; }
}
/* =========================================================
   PUENTE DE HOVER PARA HAMBURGUESA (PC)
   - No toca IDs / HTML / JS
   - Evita que se cierre al mover el mouse del botón al drawer
========================================================= */
@media (hover: hover) and (pointer: fine){
  .site-header .icon-btn.burger{
    position: relative; /* necesario para el ::after */
    z-index: calc(var(--z-header) + 5);
  }

  /* “Puente invisible” hacia el drawer */
  .site-header .icon-btn.burger::after{
    content: "";
    position: absolute;
    top: -14px;     /* amplía hover vertical */
    bottom: -14px;  /* amplía hover vertical */
    right: -36px;   /* puente hacia la derecha */
    width: 52px;    /* ancho del puente */
    background: transparent;
    pointer-events: auto; /* clave: cuenta como parte del hover del botón */
  }
}


/* =========================
   PALETA BAUSEN (FIX)
   - Fondo: #DCE2EF
   - Acento/CTA: #5B75B6
   - Títulos: #182389 + negro
========================= */

body{ background: #DCE2EF; }

/* Botones: TODOS con look "Conocer más" */
.btn,
.btn--pill,
.btn--primary,
.btn-primary,
.btn--ghost{
  border-radius: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}



/* Primary = Silver lake blue */
.btn--primary,
.btn-primary,
.collab-cta--header{
  background: #5B75B6 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(24,35,137,.18) !important;
  box-shadow: 0 14px 28px rgba(91,117,182,.22) !important;
}
.btn--primary:hover,
.btn-primary:hover,
.collab-cta--header:hover{
  background: color-mix(in srgb, #5B75B6 70%, #182389 30%) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(91,117,182,.26) !important;
}

/* Ghost/Secondary */
.btn--ghost{
  background: rgba(255,255,255,.88) !important;
  color: #182389 !important;
  border: 1px solid rgba(24,35,137,.18) !important;
}
.btn--ghost:hover{
  background: #5B75B6 !important;
  color: #FFFFFF !important;
}

/* Split headings helper */
.accent{ color:#182389 !important; }
.accent-black{ color:#000 !important; }

/* Tarjetas (superficie) */
.card, .service-card, .e-card, .tcard, .mini-card, .contact-form-card{
  background: rgba(220,226,239,.92) !important;
  border: 1px solid rgba(24,35,137,.16) !important;
  box-shadow: 0 18px 50px rgba(91,117,182,.14) !important;
}


/* =========================
   Two-tone titles + centered section heads (Acerca)
========================= */
.tt1{ color: #182389 !important; }
.tt2{ color: #000000 !important; }

/* Centrar títulos solicitados */
#esencia .section__head,
#historias .section__head,
#porque .section__head{
  text-align: center;
}
#esencia .section__head .pill,
#historias .section__head .pill,
#porque .section__head .pill{
  margin-left: auto;
  margin-right: auto;
}
#esencia .section__head .section__sub,
#historias .section__head .section__sub,
#porque .section__head .section__sub{
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}
/* === PATCH SOLO ESTÉTICA === */
/* 1) Centrar títulos que faltaban (igual que los demás) */
#equipo .section__head,
#proceso .section__head,
#historia .section__head,
#faq .section__head{
  text-align: center;
}

#equipo .section__head .pill,
#proceso .section__head .pill,
#historia .section__head .pill{
  margin-left: auto;
  margin-right: auto;
}

/* (Opcional seguro) centra el bloque completo si tu layout usa flex en .section__head */
#equipo .section__head,
#proceso .section__head,
#historia .section__head,
#faq .section__head{
  align-items: center;
  justify-content: center;
}

/* 2) Equipo directivo: imagen 70–80% más grande */
/* =========================
   PATCH (solo estética)
   - Equipo directivo: evita overlays texto/imagen y da aire
   - Proceso/Metodología: encabezado alineado a la izquierda
   (No toca IDs ni JS)
========================= */

/* 1) EQUIPO DIRECTIVO: icono contenedor debe adaptarse a la imagen grande */
/* separación explícita para que título/subtítulo queden “debajo” */
/* 2) PROCESO / METODOLOGÍA: encabezado a la izquierda */
#proceso .section__head{
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

#proceso .section__head .pill{
  margin-left: 0 !important;
  margin-right: auto !important;
}

#proceso .section__head .section__sub{
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 760px;
}


/* =========================
   PATCH (SOLO ESTÉTICA): EQUIPO DIRECTIVO +50%
   - Escala ficha (#equipo .leader) y la imagen (.leader__img)
   - No toca IDs ni JS
========================= */
/* =========================================================
   FIX DEFINITIVO: ESCALADO FICHA "NUESTRO EQUIPO DIRECTIVO"
   Motivo: Había reglas previas que limitaban .leader__icon (54x54)
   y por cascada no se notaba el incremento. Este bloque va AL FINAL
   y usa !important para evitar que otra regla lo pise.
   ========================================================= */
/* Ocultar SOLO en móvil el CTA "¿Eres colaborador?" */
@media (max-width: 980px){
  .header__actions .collab-cta--header{
    display: none !important;
  }
}
/* ==========================================
   OVERRIDE DEFINITIVO - Fondo del cuerpo del menú hamburguesa
   (debajo del header logo + X)
   - Mantiene cabecera igual
   - Pinta TODA la barra interna
   - Subservicios siguen transparentes
========================================== */

#mobile-menu{
  overflow: hidden; /* evita cortes visuales al pintar el body */
}

#mobile-menu > nav{
  flex: 1 1 auto;          /* ocupa todo el espacio restante bajo el header */
  min-height: 0;           /* permite scroll interno correcto */
  display: flex;
  flex-direction: column;
  background: #F2F5FB !important; /* <-- CAMBIA ESTE COLOR (fondo de toda la barra) */
}

/* La lista ocupa todo el alto del nav, pero SIN volver a pintar encima */
#mobile-menu > nav > .mobile-nav-list{
  flex: 1 1 auto;
  min-height: 0;
  background: transparent !important;
}

/* Mantener subservicios transparentes (como pediste) */
#mobile-menu .mobile-sub-link{
  background: transparent !important;
}
@media (max-width: 400px){
  .brand img,
  .logo-link img{
    width: 120px;
    max-width: 120px;
  }
}
/* ── Mobile ≤980px: controles compactos ── */
@media (max-width: 980px){

  /* Idioma → píldora */
  .site-header .language-btn{
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
  }
  .site-header .language-code{
    font-size: 12px;
    font-weight: 900;
  }

  /* Hamburguesa → círculo */
 .site-header .icon-btn.burger{
  width: 36px;
  height: 36px;
  border-radius: 10px;  /* ← más cuadrado, menos ovalado */
}
}
/* =========================================================
   FIX FINAL — HAMBURGUESA OCULTA/DIFUMINADA AL ABRIR MENÚ (MÓVIL)
   Basado en referencia index.html + stylebeca.css
   - No toca HTML ni JS
   - Solo evita que el botón hamburguesa quede visible debajo del drawer
========================================================= */

/* Misma estética base de la referencia para el botón hamburguesa */
.site-header .icon-btn.burger{
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(24,35,137,0.16) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header .icon-btn.burger i{
  opacity: 1 !important;
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  color: rgba(11,21,53,0.88) !important;
}
.site-header .icon-btn.burger::before,
.site-header .icon-btn.burger::after{
  content: none !important;
}

/* En móvil, al abrir el drawer, la hamburguesa se difumina y desaparece */
@media (max-width: 980px){
  body.menu-open .site-header .icon-btn.burger,
  .site-header .icon-btn.burger[aria-expanded="true"]{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    filter: blur(8px) !important;
    transform: scale(.92) !important;
    box-shadow: none !important;
  }

  body.menu-open .site-header .icon-btn.burger:hover,
  body.menu-open .site-header .icon-btn.burger:active,
  .site-header .icon-btn.burger[aria-expanded="true"]:hover,
  .site-header .icon-btn.burger[aria-expanded="true"]:active{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    filter: blur(8px) !important;
    transform: scale(.92) !important;
    box-shadow: none !important;
  }
}

/* Ajustes solicitados — solo menú hamburguesa */
#mobile-menu .mobile-menu-header{
  background: linear-gradient(135deg, rgba(0,61,165,0.05), rgba(91,117,182,0.07)) !important;
}

#mobile-menu .mobile-nav-link{
  background: color-mix(in srgb, #ffffff 92%, #0b1220 8%) !important;
  color: rgba(11,21,53,0.84) !important;
}

#mobile-menu .mobile-summary-link,
#mobile-menu .mobile-nav-summary,
#mobile-menu .mobile-nav-summary i,
#mobile-menu .mobile-sub-link{
  color: rgba(11,21,53,0.84) !important;
}

.site-header .icon-btn.burger,
.site-header .icon-btn.burger:hover,
.site-header .icon-btn.burger:active,
.site-header .icon-btn.burger:focus-visible,
#mobile-menu .close-menu,
#mobile-menu .close-menu:hover,
#mobile-menu .close-menu:active,
#mobile-menu .close-menu:focus-visible,
.mobile-menu .close-menu,
.mobile-menu .close-menu:hover,
.mobile-menu .close-menu:active,
.mobile-menu .close-menu:focus-visible{
  box-shadow: none !important;
}