/* ==========================================================================
   CIDI Group · Sistema de diseño
   Documentado en docs/04-sistema-de-diseno.md
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Marca */
  --azul: #1f3665;          /* principal */
  --blanco: #ffffff;        /* secundario */
  --arena: #ddd9d0;         /* tercero */
  --celeste: #008fe2;       /* acompaña al azul */
  --crema: #fef5d8;         /* fondos */

  /* Derivados */
  --azul-900: #142545;
  --azul-050: #f3f6fb;
  --celeste-100: #e3f3fd;
  --gris-logo: #7b7a7e;
  --texto: #1b2b4d;
  --texto-suave: #5a6684;
  --borde: rgba(31, 54, 101, 0.10);
  --fondo: #fbfaf7;

  /* Esmerilado */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: blur(18px) saturate(165%);

  /* Sombras delicadas */
  --sombra-xs: 0 1px 2px rgba(31, 54, 101, 0.05);
  --sombra-sm: 0 1px 2px rgba(31, 54, 101, 0.04), 0 4px 16px rgba(31, 54, 101, 0.05);
  --sombra-md: 0 2px 4px rgba(31, 54, 101, 0.04), 0 12px 32px rgba(31, 54, 101, 0.08);
  --sombra-lg: 0 4px 8px rgba(31, 54, 101, 0.04), 0 24px 56px rgba(31, 54, 101, 0.12);

  /* Tipografía */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

  /* Formas y espacios */
  --radio-sm: 10px;
  --radio: 16px;
  --radio-lg: 24px;
  --gutter: 16px;
  --header-h: 72px;
  --appbar-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 80px; }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-anchor: none; /* evita saltos de scroll cuando el mapa se expande */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--celeste); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--azul); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 1em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: var(--radio-sm); }
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -9999px; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 3. Utilidades de estilo -------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sombra-md);
}
.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: rgba(0, 143, 226, .25); text-decoration: none; }
.eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste); margin-bottom: .5rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.link-arrow .icon { transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* 4. Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .65em 1.2em;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), color .2s;
  text-decoration: none !important; white-space: nowrap;
}
.btn--primary { background: var(--azul); color: #fff; box-shadow: 0 6px 18px rgba(31, 54, 101, .22); }
.btn--primary:hover { background: var(--azul-900); transform: translateY(-1px); }
.btn--accent { background: var(--celeste); color: #fff; box-shadow: 0 6px 18px rgba(0, 143, 226, .25); }
.btn--ghost { background: rgba(255, 255, 255, .55); color: var(--azul); border-color: var(--borde); }
.btn--ghost:hover { background: #fff; }
.btn--block { width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: .45em; padding: .5em .9em;
  border-radius: 999px; background: var(--azul-050); color: var(--azul); font-weight: 600; font-size: var(--fs-sm);
}

/* 5. Header esmerilado ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  height: var(--header-h);
  /* Más transparente y con esmerilado más intenso */
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(24px) saturate(185%);
  backdrop-filter: blur(24px) saturate(185%);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--sombra-sm); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.site-header__logo { flex: none; }
.site-header__logo img { width: 128px; height: auto; }
.site-header__actions { flex: none; }
.site-header__inner { gap: 20px; }
.site-nav__list a, .site-nav__subtoggle { white-space: nowrap; }
@media (min-width: 1200px) {
  .site-nav__list a, .site-nav__subtoggle { padding-inline: .7em; }
}
/* Entre 1200 y 1599px el botón "Instalar app" muestra sólo el ícono para que entre todo */
@media (min-width: 1200px) and (max-width: 1599px) {
  .btn--install { width: 44px; padding: 0; }
  .btn--install__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.site-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.site-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  display: block; padding: .5em .85em; border-radius: 999px;
  color: var(--texto); font-weight: 500; font-size: .95rem;
}
.site-nav__list a:hover { background: rgba(31, 54, 101, .06); text-decoration: none; }
.site-nav__accesos { display: none; }

/* Submenú "Sedes" */
.has-sub { position: relative; }
.site-nav__subtoggle {
  display: flex; align-items: center; gap: 4px; padding: .5em .85em; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto); font-weight: 500; font-size: .95rem; cursor: pointer;
}
.site-nav__subtoggle:hover { background: rgba(31, 54, 101, .06); }
.site-nav__chevron { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.has-sub.is-open .site-nav__chevron { transform: rotate(180deg); }
.site-nav__sub { list-style: none; margin: 0; padding: 8px; display: none; }
.has-sub.is-open .site-nav__sub { display: grid; }
.site-nav__sub a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; color: var(--texto); text-decoration: none; }
.site-nav__sub a:hover { background: rgba(0, 143, 226, .08); }
.site-nav__sub a .icon { color: var(--celeste); }
.site-nav__sub strong { display: block; font-weight: 600; color: var(--azul); font-size: .92rem; line-height: 1.25; }
.site-nav__sub small { display: block; color: var(--texto-suave); font-size: .78rem; line-height: 1.25; }
@media (min-width: 1200px) {
  .has-sub:hover .site-nav__sub, .has-sub:focus-within .site-nav__sub { display: grid; }
  .has-sub:hover .site-nav__chevron { transform: rotate(180deg); }
  .site-nav__sub {
    position: absolute; top: calc(100% + 10px); left: -8px; min-width: 280px; gap: 2px;
    border-radius: var(--radio-lg);
    /* Dentro del header el desenfoque no se aplica (no se anidan backdrop-filter): fondo casi opaco */
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); box-shadow: var(--sombra-lg);
  }
  /* puente invisible para que el menú no se cierre al bajar el mouse */
  .site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
}

/* Botón instalar webapp */
.btn--install { background: var(--celeste); color: #fff; box-shadow: 0 6px 18px rgba(0, 143, 226, .25); }
.btn--install:hover { background: #007ccc; transform: translateY(-1px); }
.btn--install[hidden] { display: none; }
@media (max-width: 767px) {
  /* En celular: sólo el ícono, redondo */
  .btn--install { width: 44px; padding: 0; }
  .btn--install__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Instrucciones de instalación en iPhone */
.install-ios {
  width: min(92vw, 380px); border-radius: var(--radio-lg); padding: 28px 24px 20px; color: var(--texto); text-align: center;
  background: var(--glass-bg-strong);
}
.install-ios::backdrop { background: rgba(20, 37, 69, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.install-ios img { margin: 0 auto 12px; border-radius: 16px; box-shadow: var(--sombra-sm); }
.install-ios h2 { font-size: 1.25rem; }
.install-ios ol { text-align: left; padding-left: 1.2em; margin: 0 0 20px; display: grid; gap: 8px; }
.install-ios ol .icon { display: inline-block; vertical-align: -3px; color: var(--celeste); }

.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 12px; background: rgba(255,255,255,.6); cursor: pointer; position: relative; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--azul); border-radius: 2px; content: ""; transition: transform .25s var(--ease), opacity .2s;
}
.menu-toggle__bars { top: 21px; }
.menu-toggle__bars::before { left: 0; right: 0; top: -6px; }
.menu-toggle__bars::after { left: 0; right: 0; top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1200px) {
  .site-header__logo img { width: 150px; }
}
@media (max-width: 1199px) {
  .menu-toggle { display: block; }
  .site-nav {
    position: absolute; top: calc(var(--header-h) + 8px); left: var(--gutter); right: var(--gutter);
    padding: 12px; border-radius: var(--radio-lg);
    background: rgba(255, 255, 255, .97); /* casi opaco: ver nota del submenú */
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); box-shadow: var(--sombra-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav__list { flex-direction: column; }
  .site-nav__list a { padding: .8em 1em; font-size: 1.05rem; }
  .site-nav__accesos { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 8px 4px; border-top: 1px solid var(--borde); margin-top: 8px; }
}
@media (max-width: 767px) {
  .hide-sm { display: none !important; }
}

/* 6. Portada: mapa interactivo -------------------------------------------- */
.hero-map { position: relative; isolation: isolate; }
.hero-map__canvas {
  height: 56vh; min-height: 340px;
  background: linear-gradient(160deg, var(--azul-050), var(--crema));
}
.hero-map__overlay { position: relative; z-index: 500; margin-top: -298px; } /* celular: el panel sube 298px sobre el mapa (48 + 150 + 100, pedidos del cliente) */
.hero-map__panel { border-radius: var(--radio-lg); padding: 24px 20px; }
.hero-map__eyebrow {
  text-align: center;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}
.hero-map__panel h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); }
.hero-map__panel h1 span { color: var(--celeste); }
.hero-map__lead { color: var(--texto-suave); }
/* Home: el mapa arranca DEBAJO del header para que se vea el esmerilado desde el inicio */
.page-home .hero-map { margin-top: calc(-1 * var(--header-h)); }
.page-home .hero-map__canvas { height: calc(56vh + var(--header-h)); }
.page-home .hero-map .leaflet-top { top: var(--header-h); }
@media (min-width: 900px) {
  .page-home .hero-map__canvas { height: calc(min(84vh, 780px) + var(--header-h)); }
  .page-home .hero-map__overlay { padding-top: var(--header-h); }
}
/* Celular: al elegir una sede el mapa se expande y el panel (y todo lo que sigue) baja.
   Lo activa mapa.js con .is-expandido; se revierte al cerrar la ficha. */
@media (max-width: 899px) {
  .hero-map__canvas { transition: height .35s var(--ease); }
  .hero-map__overlay { transition: margin-top .35s var(--ease); }
  .hero-map.is-expandido .hero-map__canvas { height: calc(100svh - var(--appbar-h) - 24px); min-height: 620px; }
  .hero-map.is-expandido .hero-map__overlay { margin-top: 16px; }
  .hero-map.is-expandido .leaflet-bottom { bottom: 0; }
}
@media (max-width: 899px) {
  /* El panel se superpone 48px al mapa: subimos zoom y créditos para que no queden tapados */
  .hero-map .leaflet-bottom { bottom: 306px; }
}
.hero-map__geo-msg { font-size: var(--fs-sm); color: var(--texto-suave); margin: .5rem 0 0; min-height: 1.2em; }

@media (min-width: 900px) {
  .hero-map__canvas { height: min(84vh, 780px); min-height: 600px; }
  .hero-map__overlay { position: absolute; inset: 0; margin: 0 auto; pointer-events: none; display: flex; align-items: center; }
  /* Título más chico en escritorio: "imágenes cerca tuyo" entra en un solo renglón */
  .hero-map__panel h1 { font-size: 2.15rem; }
  .hero-map__panel { pointer-events: auto; width: 440px; max-height: calc(100% - 64px); display: flex; flex-direction: column; padding: 32px 28px; }
  .sede-list { overflow-y: auto; }
}

.sede-list { list-style: none; margin: 16px -8px 0; padding: 0; display: grid; gap: 2px; }
.sede-list__item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  text-align: left; cursor: pointer; color: var(--texto);
  transition: background .2s var(--ease);
}
.sede-list__item:hover, .sede-list__item.is-active { background: rgba(255, 255, 255, .75); box-shadow: var(--sombra-xs); }
.sede-list__item.is-active .sede-list__pin { background: var(--celeste); box-shadow: 0 0 0 5px rgba(0, 143, 226, .18); }
.sede-list__pin { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px rgba(31, 54, 101, .1); transition: all .2s; }
.sede-list__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sede-list__text strong { font-weight: 600; color: var(--azul); }
.sede-list__text small { color: var(--texto-suave); font-size: .82rem; }
.sede-list__dist { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--celeste); white-space: nowrap; }

/* Marcadores y popups de Leaflet con estilo propio */
.cidi-marker {
  width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--azul); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(31, 54, 101, .35);
  display: grid; place-items: center; transition: background .2s;
}
.cidi-marker::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.cidi-marker.is-active { background: var(--celeste); }
.leaflet-popup-content-wrapper {
  border-radius: var(--radio) !important; padding: 0 !important; overflow: hidden;
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--sombra-lg) !important;
}
.leaflet-popup-content { margin: 0 !important; width: 280px !important; font-family: var(--font); }
.leaflet-popup-tip { background: var(--glass-bg-strong) !important; }
.leaflet-container { font-family: var(--font); background: var(--azul-050); }
/* Crédito de OpenStreetMap: obligatorio por licencia, pero mínimo y tenue */
.hero-map .leaflet-control-attribution {
  background: transparent !important; box-shadow: none !important;
  font-size: 9px; line-height: 1.2; padding: 0 6px 2px; opacity: .45;
}
.hero-map .leaflet-control-attribution a { color: var(--texto-suave); }
.hero-map .leaflet-control-attribution:hover { opacity: .9; }
/* Mapa base desaturado y levemente azulado para que destaquen los marcadores */
.cidi-tiles { filter: grayscale(1) sepia(.12) hue-rotate(180deg) saturate(1.6) brightness(1.04) contrast(.92); }
/* Botón cerrar de la ficha: círculo azul de marca con X blanca gruesa (bien visible sobre la foto).
   !important: leaflet.css se carga después y pisaría estos estilos. */
.hero-map .leaflet-popup-close-button {
  top: 10px !important; right: 10px !important;
  width: 36px !important; height: 36px !important;
  padding: 0 !important; border-radius: 50% !important;
  background: var(--azul) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(20, 37, 69, .35);
  font-size: 0 !important; color: transparent !important; /* se oculta el "×" de texto */
  display: block; z-index: 2;
  transition: transform .15s var(--ease), background .15s;
}
.hero-map .leaflet-popup-close-button span { display: none; }
.hero-map .leaflet-popup-close-button::before,
.hero-map .leaflet-popup-close-button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 3px; border-radius: 2px; background: #fff;
}
.hero-map .leaflet-popup-close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.hero-map .leaflet-popup-close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hero-map .leaflet-popup-close-button:hover { background: var(--azul-900) !important; transform: scale(1.08); }
.sede-pop__img { width: 100%; height: 150px; object-fit: cover; }
.sede-pop__body { padding: 14px 16px 16px; }
.sede-pop__body h3 { font-size: 1.05rem; margin: 0 0 4px; }
.sede-pop__tag { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--azul); background: var(--crema); padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.sede-pop__body p { margin: 0 0 6px; font-size: .85rem; color: var(--texto-suave); line-height: 1.45; }
.sede-pop__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.sede-pop__actions .btn { min-height: 38px; padding: .5em .6em; font-size: .8rem; }
.sede-pop__actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.leaflet-popup-content .btn--primary { color: #fff; }

/* 7. Secciones ------------------------------------------------------------- */
.section { padding-block: clamp(48px, 6vw, 96px); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.section--cream { background: linear-gradient(180deg, var(--crema), #fffaf0); }
.section__head { max-width: 720px; margin-bottom: 32px; }
.section__head--center { margin-inline: auto; text-align: center; }

/* Accesos prioritarios */
.accesos { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .accesos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .accesos { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.acceso { display: flex; align-items: center; gap: 14px; padding: 18px; color: var(--texto); }
.acceso__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--celeste-100); color: var(--celeste); }
.acceso:first-child .acceso__icon { background: var(--azul); color: #fff; }
.acceso__icon .icon { width: 24px; height: 24px; }
.acceso__text { display: flex; flex-direction: column; line-height: 1.3; }
.acceso__text strong { color: var(--azul); font-size: 1.05rem; }
.acceso__text small { color: var(--texto-suave); }
.acceso__arrow { margin-left: auto; color: var(--celeste); transition: transform .2s var(--ease); }
.acceso:hover .acceso__arrow { transform: translateX(3px); }

/* Trayectoria */
.trayectoria { background: radial-gradient(1200px 400px at 85% 10%, rgba(0, 143, 226, .10), transparent 60%), linear-gradient(180deg, #fff, var(--azul-050)); }
.trayectoria__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .trayectoria__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.stat { border-radius: var(--radio-lg); padding: 22px; display: flex; flex-direction: column-reverse; }
.stat dt { color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 500; }
.stat dd { margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 800; color: var(--azul); letter-spacing: -0.03em; line-height: 1.1; }
.stat dd small { font-size: .45em; font-weight: 700; margin-left: .2em; color: var(--celeste); }

/* Estudios */
.estudios { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.estudio { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--azul); font-weight: 600; }
.estudio__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--azul-050); color: var(--azul); }
.estudio__arrow { margin-left: auto; color: var(--celeste); opacity: .6; }

/* Coberturas: carrusel continuo */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 16px; width: max-content; padding-block: 8px 16px; margin: 0; padding-inline: 0; list-style: none; animation: marquee var(--marquee-dur, 50s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__logo { width: 180px; height: 88px; flex: none; display: grid; place-items: center; border-radius: var(--radio); box-shadow: var(--sombra-sm); }
.marquee__logo { background: rgba(255, 255, 255, .8); }
.marquee__logo img { width: 140px; height: 56px; object-fit: contain; }
.coberturas__nota { text-align: center; margin: 12px 0 0; color: var(--texto-suave); font-size: .92rem; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }

/* Newsletter */
.newsletter--card {
  display: grid; gap: 20px; align-items: center;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--radio-lg);
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(0, 143, 226, .30), transparent 70%),
    linear-gradient(135deg, var(--azul), var(--azul-900));
  color: #fff; box-shadow: var(--sombra-lg);
}
@media (min-width: 900px) { .newsletter--card { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.newsletter--card .eyebrow { color: #8fd0ff; }
.newsletter--card .newsletter__title { color: #fff; font-size: var(--fs-h2); }
.newsletter--card p { color: rgba(255, 255, 255, .8); }
.newsletter__field { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter__field input[type=email] {
  flex: 1 1 200px; min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; font: inherit;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.newsletter__field input::placeholder { color: rgba(255, 255, 255, .65); }
.newsletter--card .btn--primary { background: var(--celeste); box-shadow: 0 6px 18px rgba(0, 143, 226, .35); min-height: 48px; }
.newsletter__msg { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); min-height: 1.2em; }
.newsletter__msg.is-ok { color: #9ff0c4; }
.newsletter__msg.is-error { color: #ffc2c2; }

/* Páginas internas: encabezado ---------------------------------------------- */
.page-hero {
  padding-block: 28px 8px;
  background:
    radial-gradient(900px 320px at 90% 0%, rgba(0, 143, 226, .12), transparent 65%),
    linear-gradient(180deg, var(--crema), var(--fondo));
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--texto-suave); margin-bottom: 16px; }
.breadcrumb a { color: var(--texto-suave); }
.page-hero__box { border-radius: var(--radio-lg); padding: clamp(24px, 4vw, 48px); max-width: 860px; }
.page-hero__box h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); }
.page-hero__lead { color: var(--texto-suave); font-size: var(--fs-lg); margin: 0; }

/* Canales de atención */
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .canales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .canales { grid-template-columns: repeat(3, 1fr); } }
.canal { display: flex; flex-direction: column; padding: 24px; scroll-margin-top: calc(var(--header-h) + 24px); }
.canal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.canal__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--celeste-100); color: var(--celeste); }
.canal__icon .icon { width: 26px; height: 26px; }
.canal__num { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--azul-050); -webkit-text-stroke: 1px rgba(31, 54, 101, .12); }
.canal__title { font-size: 1.3rem; margin-bottom: 2px; }
.canal__bajada { color: var(--celeste); font-weight: 600; font-size: var(--fs-sm); margin-bottom: 10px; }
.canal__texto { color: var(--texto-suave); }
.canal__items { margin: 0 0 12px; padding-left: 1.1em; color: var(--texto-suave); }
.canal__items li::marker { color: var(--celeste); }
.canal__dato { font-weight: 700; color: var(--azul); margin-top: auto; padding-top: 8px; word-break: break-word; }
/* 0810 de la Central de Turnos: app.js ([data-ajustar]) calcula el tamaño para que llegue de borde a borde de la tarjeta.
   El valor de acá es el de respaldo si no corre JavaScript. */
.canal { min-width: 0; } /* el contenido nunca ensancha la tarjeta (ni la columna de la grilla) */
.canal__dato--xl { font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; white-space: nowrap; margin-bottom: 14px; max-width: 100%; overflow: hidden; }
.canal__dato--xl a { display: inline-block; }
.canal__dato--xl a { color: var(--azul); text-decoration: none; }
.canal__dato--xl a:hover { color: var(--celeste); }
.canal__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.canal--destacado { border-color: rgba(0, 143, 226, .35); box-shadow: 0 0 0 4px rgba(0, 143, 226, .08), var(--sombra-md); }
.canal--destacado .canal__icon { background: var(--azul); color: #fff; }
@media (min-width: 1100px) {
  /* Los dos últimos (consultas y reclamos) ocupan la fila completa en mitades */
  .canales { grid-template-columns: repeat(6, 1fr); }
  .canal { grid-column: span 2; }
  .canal:nth-child(4), .canal:nth-child(5) { grid-column: span 3; }
}

.multicanal { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .multicanal { grid-template-columns: 1fr 1fr; gap: 64px; } }
.multicanal__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.multicanal__lista li { border-radius: var(--radio); padding: 14px 18px 14px 46px; position: relative; font-weight: 600; color: var(--azul); box-shadow: var(--sombra-sm); }
.multicanal__lista li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 14px; height: 8px; border-left: 2.5px solid var(--celeste); border-bottom: 2.5px solid var(--celeste); transform: translateY(-70%) rotate(-45deg); }

/* Novedades: tarjetas y grilla ------------------------------------------- */
.novedades-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .novedades-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .novedades-grid { grid-template-columns: repeat(3, 1fr); } }
.section__more { margin: 32px 0 0; text-align: center; }

.nov-card { overflow: hidden; display: flex; }
.nov-card__link { display: flex; flex-direction: column; width: 100%; color: var(--texto); text-decoration: none !important; }
.nov-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.nov-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--azul-050); }
.nov-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.nov-card:hover .nov-card__media img { transform: scale(1.04); }
.nov-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul-050), var(--crema)); }
.nov-card__placeholder img { width: 56px; height: 56px; opacity: .5; }
.nov-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.nov-card__title { font-size: 1.08rem; line-height: 1.3; margin: 0; color: var(--azul); font-weight: 700; letter-spacing: -0.01em; }
.nov-card__excerpt { color: var(--texto-suave); font-size: .92rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nov-card__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--celeste); font-weight: 600; font-size: .9rem; }
.nov-card__more .icon { transition: transform .2s var(--ease); }
.nov-card:hover .nov-card__more .icon { transform: translateX(3px); }

.paginacion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 40px; }
.paginacion__nums { display: flex; flex-wrap: wrap; gap: 6px; }
.paginacion__num { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--borde); color: var(--azul); font-weight: 600; text-decoration: none !important; }
.paginacion__num.is-actual { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Nota individual */
.nota__header { padding: 28px 0 8px; background: linear-gradient(180deg, var(--crema), var(--fondo)); }
.nota__title { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin-bottom: 0; }
.nota__media { margin: 24px auto 0; }
.nota__media img { width: 100%; height: auto; border-radius: var(--radio-lg); box-shadow: var(--sombra-md); }
.prose { font-size: 1.075rem; line-height: 1.75; color: var(--texto); padding: 32px 0 8px; }
.prose > * + * { margin-top: 1em; }
.prose p { margin: 0; }
/* Los subtítulos de las notas (h1/h2/h3 dentro del cuerpo) se ven como subtítulos */
.prose h1, .prose h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin-top: 1.8em; margin-bottom: .2em; color: var(--azul); font-weight: 700; }
.prose h3, .prose h4 { font-size: 1.2rem; margin-top: 1.5em; margin-bottom: .2em; }
.prose a { color: var(--celeste); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { color: var(--azul-900); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--celeste); }
.prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--celeste); background: var(--celeste-100); border-radius: 0 var(--radio) var(--radio) 0; }
.prose img, .prose video { max-width: 100%; height: auto; border-radius: var(--radio); }
.prose iframe { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radio); }
.nota__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 56px; padding: 24px; border-radius: var(--radio-lg); }
.nota__cta-title { font-weight: 700; color: var(--azul); font-size: 1.15rem; margin: 0 0 4px; }
.nota__cta p { margin: 0; color: var(--texto-suave); }
.nota__cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso-borrador { background: #fff4d6; color: #7a5a00; text-align: center; padding: 10px 16px; font-size: var(--fs-sm); border-bottom: 1px solid #f0dca0; }

/* Landings de sede ---------------------------------------------------------- */
.site-header__logo--sede { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.sede-badge { font-size: .78rem; font-weight: 700; color: #fff; background: var(--azul); padding: 4px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
@media (max-width: 420px) { .site-header__logo--sede img { width: 104px; } .sede-badge { font-size: .7rem; padding: 3px 8px; } }

.sede-datos { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.sede-datos li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); font-size: .95rem; line-height: 1.4; }
.sede-datos .icon { color: var(--celeste); margin-top: 2px; }
.sede-datos strong { display: block; color: var(--azul); }
.sede-datos small { display: block; color: var(--texto-suave); }
.sede-ctas { display: flex; flex-wrap: wrap; gap: 8px; }

/* Panel de portada de sede ------------------------------------------------------
   Bloques: titulo · portada (foto del equipo) · lead · botones · tel · foto (fachada) · datos
   ≥1280px: panel ancho pegado a la izquierda, 3 columnas (maqueta del cliente)
   700–1279px: el mapa queda arriba y el panel debajo, 2 columnas
   <700px: 1 columna, título siempre en 2 líneas */
.sede-hero { display: grid; gap: 18px;
  grid-template-areas: "titulo" "lead" "foto" "portada" "datos" "tel" "botones"; }
.sede-hero__titulo { grid-area: titulo; }
.sede-hero__titulo .hero-map__eyebrow { margin-bottom: .6rem; }
.sede-hero h1 { margin: 0; }
.sede-hero h1 > span { display: block; white-space: nowrap; color: var(--azul); }
.sede-hero h1 .sede-hero__l2 > span { color: var(--celeste); }
.sede-hero__lead { grid-area: lead; margin: 0; }
.sede-hero__botones { grid-area: botones; }
.sede-hero__tel { grid-area: tel; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--texto); }
.sede-hero__tel .icon { color: var(--celeste); flex: none; }
.sede-hero__datos { grid-area: datos; margin: 0; }
.sede-hero__img { margin: 0; min-width: 0; }
.sede-hero__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 22px; box-shadow: 0 10px 30px rgba(31, 54, 101, .22), 0 2px 6px rgba(31, 54, 101, .12);
}
.sede-hero__foto { grid-area: foto; }
.sede-hero__foto img { object-position: center top; aspect-ratio: 4 / 3; } /* recorte abajo: oculta el texto de la foto. Nunca usar una proporción más alta que 15:16 */
.sede-hero__portada { grid-area: portada; }
.sede-hero__portada img { aspect-ratio: 3 / 2; }

/* Celular: el título ocupa siempre 2 líneas y se achica según el ancho de la pantalla */
@media (max-width: 699px) {
  .sede-hero h1 { font-size: min(calc((100vw - 76px) / 13.4), 2.3rem); }
}

/* Tablet y notebooks chicas: mapa arriba, panel debajo en 2 columnas */
@media (min-width: 700px) {
  .sede-hero { grid-template-columns: 1fr 1fr; column-gap: 28px;
    grid-template-areas: "titulo titulo" "lead lead" "foto portada" "datos tel" "datos botones"; }
  .sede-hero h1 > span { display: inline; }
  .sede-hero h1 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); }
  .sede-hero__foto img, .sede-hero__portada img { aspect-ratio: 4 / 3; }
  .sede-hero__botones { align-self: end; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .hero-map--sede .hero-map__overlay { position: relative; inset: auto; display: block; pointer-events: auto; margin-top: -140px; padding-bottom: 8px; }
  .page-home .hero-map--sede .hero-map__canvas { height: calc(520px + var(--header-h)); min-height: 0; }
  .hero-map--sede .hero-map__panel.sede-hero { width: 100%; max-height: none; padding: 32px; }
  .hero-map--sede .leaflet-bottom { bottom: 140px; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .hero-map--sede .hero-map__overlay { margin-top: -140px; }
  .hero-map--sede .hero-map__canvas { height: 460px; }
  .page-home .hero-map--sede .hero-map__canvas { height: calc(460px + var(--header-h)); }
  .hero-map--sede .leaflet-bottom { bottom: 140px !important; }
  .hero-map--sede .hero-map__panel.sede-hero { padding: 28px; }
}

/* Escritorio: panel ancho pegado a la izquierda, 3 columnas */
@media (min-width: 1280px) {
  .hero-map--sede .hero-map__overlay { max-width: none; padding-left: 24px; padding-right: 0; }
  .hero-map--sede .hero-map__panel.sede-hero {
    width: min(1320px, calc(100% - 400px)); max-height: none;
    padding: clamp(24px, 2vw, 36px);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "titulo  titulo  foto"
      "portada lead    foto"
      "portada botones foto"
      "tel     botones datos";
    column-gap: clamp(20px, 2vw, 36px); row-gap: 18px;
  }
  .sede-hero h1 { font-size: clamp(1.9rem, .9rem + 1.5vw, 2.6rem); }
  .sede-hero__lead { font-size: .98rem; }
  .sede-hero__portada img { aspect-ratio: auto; min-height: 240px; }
  /* La fachada nunca se estira: con proporción ≥ 15:16 el texto de abajo de la foto queda siempre fuera */
  .sede-hero__foto { align-self: start; }
  .sede-hero__foto img { aspect-ratio: 15 / 16; height: auto; }
  .sede-hero__botones { flex-direction: column; align-items: stretch; align-self: end; }
  .sede-hero__botones .btn { flex: none; }
  .sede-hero__tel { align-self: center; }
}
/* Sin foto de portada: 2 columnas como la versión anterior */
.sede-hero--sin-portada { }
@media (min-width: 1280px) {
  .hero-map--sede .sede-hero--sin-portada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "titulo foto" "lead foto" "botones foto" "tel datos";
  }
}

/* Marcador único con pulso y etiqueta fija */
.cidi-marker--pulse { position: relative; }
.cidi-marker--pulse::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: rgba(0, 143, 226, .25); transform: rotate(45deg); animation: pulso 2.2s ease-out infinite; z-index: -1;
}
@keyframes pulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.leaflet-tooltip.sede-tooltip {
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--sombra-md);
  color: var(--texto); font-family: var(--font); font-size: .82rem; line-height: 1.35; padding: 8px 12px;
}
.leaflet-tooltip.sede-tooltip strong { color: var(--azul); }
.leaflet-tooltip-right.sede-tooltip::before { border-right-color: rgba(255, 255, 255, .78); }

/* Estudios de la sede */
.estudios-sede { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .estudios-sede { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .estudios-sede { grid-template-columns: repeat(3, 1fr); } }
.estudio-sede { display: flex; align-items: flex-start; gap: 14px; padding: 18px; color: var(--texto); height: 100%; }
.estudio-sede__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.estudio-sede__txt strong { color: var(--azul); line-height: 1.3; }
.estudio-sede__txt small { color: var(--texto-suave); font-size: .88rem; line-height: 1.45; }
.estudio-sede .estudio__arrow { margin-top: 10px; }

/* Especialidades */
.especialidades__box { border-radius: var(--radio-lg); padding: clamp(24px, 4vw, 40px); display: grid; gap: 20px; align-items: center;
  background: linear-gradient(135deg, rgba(254, 245, 216, .75), rgba(255, 255, 255, .7)); }
@media (min-width: 900px) { .especialidades__box { grid-template-columns: 1fr 1.3fr; gap: 40px; } }
.especialidades__box p { color: var(--texto-suave); margin: 0; }
.especialidades__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip--lg { padding: .8em 1.2em; font-size: .95rem; background: #fff; box-shadow: var(--sombra-sm); border: 1px solid var(--borde); text-decoration: none !important; }
.chip--lg:hover { box-shadow: var(--sombra-md); border-color: rgba(0, 143, 226, .3); }
.chip--lg .icon { color: #25a244; }

/* Ubicación */
.ubicacion { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ubicacion { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.ubicacion__foto { margin: 0; }
.ubicacion__foto img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); }
.ubicacion__datos { margin: 0 0 24px; display: grid; gap: 14px; }
.ubicacion__datos div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.ubicacion__datos dt { color: var(--texto-suave); font-size: .9rem; }
.ubicacion__datos dd { margin: 0; color: var(--azul); font-weight: 600; }
.ubicacion__datos small { color: var(--texto-suave); font-weight: 400; }
@media (max-width: 520px) { .ubicacion__datos div { grid-template-columns: 1fr; gap: 2px; } }

/* Página de estudio de sede */
.estudio-hero h1 { margin-bottom: .3em; }
.estudio-hero__sub { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 500; color: var(--texto-suave); letter-spacing: 0; margin: 0 0 20px; }
.estudio-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .estudio-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } .estudio-layout__lateral { position: sticky; top: calc(var(--header-h) + 20px); } }
.estudio-layout__texto { padding-top: 0; }
.estudio-layout__lateral { display: grid; gap: 16px; }
.estudio-sede { border-radius: var(--radio-lg); padding: 20px; display: grid; gap: 12px; }
.estudio-sede img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top; border-radius: 16px; box-shadow: var(--sombra-sm); }
.estudio-sede__titulo { font-weight: 700; color: var(--azul); margin: 0; font-size: 1.05rem; }
.estudio-sede .sede-datos { margin: 0; }
.muted-sm { color: var(--texto-suave); font-size: .9rem; margin: 0; }

/* Preparación destacada (páginas de estudio) */
.preparacion {
  position: relative; margin: 32px 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radio-lg);
  background: linear-gradient(135deg, var(--crema), #fffdf5 60%, #fff);
  border: 1px solid rgba(221, 217, 208, .9); border-left: 6px solid var(--celeste);
  box-shadow: var(--sombra-md); scroll-margin-top: calc(var(--header-h) + 24px);
}
.preparacion__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.preparacion__icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--celeste); color: #fff; box-shadow: 0 8px 20px rgba(0, 143, 226, .3); }
.preparacion__icon .icon { width: 28px; height: 28px; }
.preparacion__eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste); }
.preparacion h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.preparacion__sub { font-weight: 700; color: var(--azul); margin: 6px 0 4px; }
.preparacion__body { padding-top: 0; font-size: 1.04rem; }
.preparacion__body ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.preparacion__body li { position: relative; padding: 12px 14px 12px 44px; background: rgba(255, 255, 255, .85); border-radius: 12px; box-shadow: var(--sombra-xs); margin: 0 !important; }
.preparacion__body li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--celeste); border-bottom: 2.5px solid var(--celeste); transform: rotate(-45deg);
}
.preparacion__nota { margin: 18px 0 0; font-size: .92rem; color: var(--texto-suave); }
.preparacion__nota a { font-weight: 600; }
.preparacion__vacia { margin: 0 0 16px; color: var(--texto); }

.estudio-info { margin: 24px 0; padding: 22px 24px; border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra-sm); }
.estudio-info h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 8px; }
.estudio-info h2 .icon { color: var(--celeste); }
.estudio-info .prose { padding-top: 0; font-size: 1rem; }

.galeria { margin-top: 32px; }
.galeria__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.galeria__grid a { display: block; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-sm); }
.galeria__grid img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform .4s var(--ease); }
.galeria__grid a:hover img { transform: scale(1.05); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 90vh; overflow: visible; }
.lightbox::backdrop { background: rgba(20, 37, 69, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 100%; max-height: 86vh; border-radius: 16px; box-shadow: var(--sombra-lg); }
.lightbox__cerrar { position: absolute; top: -16px; right: -16px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; background: var(--azul); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

.sedes-estudio { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sedes-estudio a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; color: var(--texto); text-decoration: none; }
.sedes-estudio a:hover { background: rgba(0, 143, 226, .08); }
.sedes-estudio .icon { color: var(--celeste); margin-top: 2px; }
.sedes-estudio strong { display: block; color: var(--azul); font-size: .94rem; }
.sedes-estudio small { color: var(--texto-suave); font-size: .8rem; }

/* Institucional */
.inst-trayectoria { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .inst-trayectoria { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; } .inst-cifras { position: sticky; top: calc(var(--header-h) + 24px); } }
.inst-trayectoria__texto { padding-top: 0; }
.inst-cifras { margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.inst-cifras .stat:first-child { grid-column: 1 / -1; }
.inst-mvv { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .inst-mvv { grid-template-columns: repeat(3, 1fr); } }
.inst-mvv__item { border-radius: var(--radio-lg); padding: 28px; }
.inst-mvv__item h2 { font-size: 1.3rem; }
.inst-mvv__item p { margin: 0; color: var(--texto-suave); }
.inst-ofrece { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .inst-ofrece { grid-template-columns: 1fr 1fr; gap: 64px; } }
.inst-ofrece__cierre { color: var(--texto-suave); }
.galeria__grid--inst { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Otras sedes */
.otras-sedes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 1fr; /* todas las filas tan altas como la más alta */ }
.otras-sedes__lista li { display: flex; } /* la tarjeta ocupa toda la celda: todas de la misma altura por fila */
.otra-sede { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; color: var(--texto); width: 100%; min-height: 100%; }
.otra-sede .icon { color: var(--celeste); margin-top: 2px; }
.otra-sede strong { display: block; color: var(--azul); font-size: .95rem; }
.otra-sede small { color: var(--texto-suave); font-size: .82rem; }

/* 8. Footer ---------------------------------------------------------------- */
.site-footer { background: var(--azul-900); color: rgba(255, 255, 255, .75); padding-top: 64px; font-size: .95rem; }
.site-footer a { color: rgba(255, 255, 255, .85); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.4fr; } }
.site-footer__brand img { width: 150px; margin-bottom: 16px; }
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.site-footer__heading { color: #fff; font-weight: 700; margin-bottom: .75em; }
.site-footer__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 6px; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 24px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-sm); }
.site-footer__legal p { margin: 0; }
.site-footer__reclamos { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.btn--outline-light { color: #fff !important; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }
.newsletter--footer .newsletter__title { color: #fff; font-weight: 700; margin-bottom: .75em; }
.newsletter--footer input[type=email] { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.newsletter--footer .btn--primary { background: var(--celeste); }

/* 9. Barra inferior tipo app (móvil) -------------------------------------- */
.appbar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--appbar-h) + env(safe-area-inset-bottom)); }
  .appbar {
    position: fixed; z-index: 950; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: var(--appbar-h); border-radius: 20px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); box-shadow: var(--sombra-lg);
  }
  .appbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--azul); font-size: .7rem; font-weight: 600; text-decoration: none !important; }
  .appbar__item .icon { width: 22px; height: 22px; }
  .appbar__item:first-child { color: var(--celeste); }
}

/* 9b. Flotantes: WhatsApp + chat Botmaker (igual que el sitio actual) ----- */
.cidi-whatsapp-btn {
  position: fixed;
  bottom: 110px; /* por encima del chat de Botmaker */
  right: 25px;
  width: 65px;
  height: 65px;
  z-index: 999999;
  transition: transform .2s ease;
}
.cidi-whatsapp-btn img { width: 100%; height: 100%; object-fit: contain; }
.cidi-whatsapp-btn:hover { transform: scale(1.08); }

/* En celular hay barra de accesos abajo: subimos WhatsApp y la burbuja del chat
   (sólo mientras el chat está cerrado = contenedor de 110px de alto). */
@media (max-width: 767px) {
  .cidi-whatsapp-btn { bottom: calc(110px + var(--appbar-h) + 4px + env(safe-area-inset-bottom)); right: 18px; width: 58px; height: 58px; }
  body > div[style*="height: 110px"]:has(> iframe[title="Botmaker"]) {
    bottom: calc(var(--appbar-h) + 4px + env(safe-area-inset-bottom)) !important;
    /* Sin el cartel "¿Cómo podemos ayudarte?": el contenedor queda del ancho de la burbuja
       y el resto del iframe (donde está el cartel) se recorta por la izquierda. */
    width: 110px !important;
    justify-content: flex-end;
  }
  body > div[style*="height: 110px"] > iframe[title="Botmaker"] {
    width: 330px !important;
    flex: none;
  }
}

/* 10. Accesibilidad: menos movimiento ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Fallback si el navegador no soporta backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, .94); --glass-bg-strong: rgba(255, 255, 255, .97); }
}