/* =========================================================
   Intellihelp — estilos del sitio (home y páginas internas: /diagnostico-sin-cargo/ y /postulate/)
   Identidad de Nico: Saira, carbón, violeta y lima, header blanco, botones y rótulos. Del lenguaje de Globant se toma
   el ritmo (secciones amplias, tipografía grande, cortes de fondo secos), no los colores.
   El movimiento extra (preloader y recetas de animación) va en css/motion.css, que se enlaza después de este archivo
   (ver el comentario MOVIMIENTO del <head>): puede pisar los tokens de :root (--section-y, --wrap-max, --t-in...) sin tocar este.
   ========================================================= */

/* ---------- Fuente ---------- */
/* Saira (SIL Open Font License), fuente variable 400–700, subconjunto latino: un solo archivo local. */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/saira-latin.woff2") format("woff2");
}

/* ---------- Tokens ----------
   Paleta cerrada: no agregar colores. Dos familias de acento que no se mezclan en una misma sección: lima y violeta.
   Fondos: fondo oscuro únicamente en el hero (placeholder del video de fondo). El resto alterna blanco y lavanda liso
   (.bg-white / .bg-gray) con brillos de marca muy suaves (ver "Ritmo de fondos"); barra superior carbón y pie blanco.
   .section--alt marca la familia violeta (rótulo, palabra clave, controles); sin modificador o con .section--dark, lima.
   Lima como texto solo en la palabra clave del título (grande y en negrita; 1,9:1, pedido del cliente): nunca en texto
   corrido ni en íconos finos, donde va como relleno, barra o dentro de un círculo carbón. */
:root {
  --ink: #2A2A2A;
  --ink-2: #333333;
  --muted: #444444;
  --line-dark: #4A4A4A;
  --purple: #663399;
  --lime: #98CC32;
  --lavender: #F0EBF5;
  --gray-bg: #E6E2EA;   /* fondo gris de las secciones alternadas */
  --white: #FFFFFF;

  --radius: 16px;
  --radius-sm: 8px;
  --header-h: 72px;

  /* Layout amplio (ritmo de Globant): contenedor de 1240px, 40px de margen lateral (20 en celular) y secciones de
     104px arriba y abajo en escritorio (64 en celular). */
  --wrap-max: 1240px;
  --wrap-pad: 40px;
  --section-y: clamp(64px, 7.2vw, 104px);

  /* Escala de títulos, la misma en todas las páginas (home, diagnóstico, postulate, privacidad y el blog): el H1 de
     cada página es siempre lo más grande de la pantalla y los títulos de sección quedan un escalón abajo.
     --h2-big es el título de las dos secciones madre (¿Qué ofrecemos? y Quiénes somos), siempre por debajo del H1 desde
     1024 px. Escala de esas secciones: título 1 · subsección (.offer__sub-title) ~0,55 · tarjeta (.service__title) ~0,42. */
  --h1: clamp(38px, 5vw, 72px);
  --h2: clamp(30px, 3.6vw, 52px);
  --h2-big: clamp(34px, 3vw + 18px, 64px);

  /* Movimiento: una sola curva de entrada (easeOutQuint) y tiempos fijos por tipo de gesto.
     Se anima solo transform y opacity; con "reducir movimiento" no se anima nada (ver .anim en <head>). */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .2s;     /* color, fondo y flecha */
  --t-lift: .35s;    /* elevación de tarjetas y botones */
  --t-in: .9s;       /* subida (rise), la de Nico */
  --t-focus: .9s;    /* entrada de títulos (focusIn) */
  --t-img: .85s;     /* zoom de fotos */
  --stagger: .08s;   /* paso del escalonado */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* El lienzo también va en lavanda (no solo el body): ni al recargar, ni al rebotar el scroll en los bordes, ni mientras
   el navegador arma la página se ve un cuadro blanco. */
html { background: var(--lavender); }
body {
  margin: 0;
  font-family: 'Saira', sans-serif;
  font-size: 17px;
  color: var(--ink);
  background: var(--lavender);
}

/* Barra de desplazamiento de la página con los colores del sitio (violeta sobre lavanda) en lugar de la gris del
   sistema, y sin el destello gris o celeste al tocar en el celular. scrollbar-color lo toman Chrome, Edge y Firefox;
   ::-webkit-scrollbar, Safari. Las pantallas del diagnóstico lo ajustan en diagnostico.css (en /gracias-reserva/, gris
   sobre carbón), con selectores más específicos que este. */
html { scrollbar-color: var(--purple) var(--lavender); }
html::-webkit-scrollbar { width: 12px; height: 12px; background: var(--lavender); }
html::-webkit-scrollbar-thumb { border: 3px solid var(--lavender); border-radius: 12px; background: var(--purple); }
* { -webkit-tap-highlight-color: transparent; }

a { color: var(--ink); }
.section--alt a:not(.btn) { color: var(--purple); }
a:hover { color: var(--ink); }

/* Sin subrayados en ninguna página (pedido de Brian): ni fijos ni animados, en links, menú, títulos, botones y pie.
   Los links de texto se distinguen por el color de la familia de la sección y el peso. Va con !important para que
   ninguna regla de una página interna lo vuelva a encender. */
a, a:is(:hover, :focus, :focus-visible, :active, :visited), summary, button, u, ins, abbr[title] {
  text-decoration: none !important;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.section--alt :focus-visible { outline-color: var(--purple); }

.site-footer :focus-visible { outline-color: var(--ink); }
/* Sobre carbón el contorno carbón no se ve: lima en el hero y en las secciones oscuras */
.hero :focus-visible, .section--dark :focus-visible { outline-color: var(--lime); }

.list-reset { list-style: none; margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
@media (max-width: 600px) { :root { --wrap-pad: 20px; } }

.section { padding: var(--section-y) 0; }
/* Fondos: solo color, alternados sección a sección (la clase va en cada <section>) */
/* ---------- Ritmo de fondos y brillos de marca ----------
   REGLA: fondo oscuro únicamente en el hero (placeholder del video de fondo) y en /gracias-reserva/. El resto alterna
   blanco (.bg-white) y lavanda (.bg-gray), de modo que dos secciones seguidas nunca tengan el mismo fondo. Paleta
   acotada: carbón para el texto, violeta #663399, lima #98CC32 solo como acento, blanco y lavanda.
   Home: hero carbón · Qué ofrecemos blanco · Presencia lavanda · Equipo blanco · Socios lavanda · Clientes blanco ·
   Historia lavanda · Casos blanco · Cita lavanda · Preguntas blanco · Cierre lavanda (card blanca) · pie blanco.
   Las piezas claras se ajustan al fondo: círculos de íconos y chips en lavanda sobre blanco y en blanco sobre lavanda.
   BRILLOS EN TODAS LAS SECCIONES (pedido de Brian, 09/11): cada sección con fondo propio, blanca o lavanda, lleva la
   misma textura: puntos de luz de marca chicos y casi imperceptibles (de 1 a 4 por sección, violeta y lima), como las
   luces del hero pero en claro, que se desplazan despacio y se desvanecen antes del borde (ver "Luces de cada
   sección", abajo). Así no hay secciones lisas al lado de otras animadas.
   Si se activan las animaciones de Windows con Chrome abierto, Chrome sigue informando "reducir movimiento" hasta que se
   lo cierra y se vuelve a abrir: recién ahí se ven moverse.
   - main.js agrega a cada sección de primer nivel con fondo propio una capa .brillos (aria-hidden) como primer hijo;
     fuera de pantalla se detiene. Las zonas sin fondo propio (encabezados de privacidad y 404, diagnóstico) muestran
     el de main::before, con los mismos brillos y la misma deriva.
   - Con "reducir movimiento" (por ejemplo, Windows con las animaciones apagadas) se ven igual, quietos.
   - Solo degradados y transform: no repintan. El texto carbón sobre la mezcla más fuerte sigue por encima de 10:1. */
:root { --lav-2: var(--lavender); }
.bg-white { background: var(--white); }
.bg-gray { background: var(--lavender); }
main::before {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130px circle at 82% 22%, rgb(102 51 153 / .06), rgb(102 51 153 / .025) 35%, rgb(102 51 153 / 0) 100%),
    radial-gradient(130px circle at 16% 80%, rgb(176 228 56 / .10), rgb(190 236 90 / .04) 35%, rgb(208 242 130 / 0) 100%);
}
.dx--noche main::before { content: none; }

/* Luces de cada sección (como las del hero, pero en claro y casi imperceptibles). main.js agrega a cada sección clara
   una capa .brillos con 1 a 4 puntos de luz (<i class="luz luz--violeta|luz--lima">): la cantidad sale de
   data-luces="N" en la sección o, si no está, de su alto (corta: 2; media: 3; alta: 4), siempre con violeta y lima.
   Posición, tamaño, recorrido, duración y desfase varían de sección a sección (valores fijos por página, no al azar en
   cada carga), así no se repite el mismo patrón. Cada punto es chico (hasta el 16 % del ancho, como mucho 260 px; en
   celular hasta el 40 %, como mucho 180 px), de opacidad baja y caída rápida (violeta .06, lima .10 en el centro), se
   desplaza hacia adentro de la sección y se desvanece antes del borde (la capa además se funde arriba y abajo). Con
   "reducir movimiento" quedan quietos. Variables de cada punto: --x y --y (posición), --k (escala del tamaño, .55 a 1),
   --dx y --dy (recorrido en px), --t (duración) y --d (desfase). */
.con-brillos { position: relative; isolation: isolate; }
.brillos {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.luz {
  position: absolute;
  left: var(--x, 10%);
  top: clamp(24px, var(--y, 20%), calc(100% - 24px - min(16%, 260px)));
  width: calc(var(--k, 1) * min(16%, 260px));
  aspect-ratio: 1;
  border-radius: 50%;
}
.luz--violeta { background: radial-gradient(closest-side, rgb(102 51 153 / .06), rgb(102 51 153 / .025) 35%, rgb(102 51 153 / .006) 70%, rgb(102 51 153 / 0)); }
.luz--lima { background: radial-gradient(closest-side, rgb(176 228 56 / .10), rgb(190 236 90 / .04) 35%, rgb(208 242 130 / .01) 70%, rgb(226 248 175 / 0)); }
@media (max-width: 760px) {
  .luz { width: calc(var(--k, 1) * min(40%, 180px)); top: clamp(24px, var(--y, 20%), calc(100% - 24px - min(40%, 180px))); }
}
@media (prefers-reduced-motion: no-preference) {
  .luz { animation: luzDeriva var(--t, 17s) ease-in-out var(--d, 0s) infinite alternate; }
  .brillos.is-quieto .luz { animation-play-state: paused; }
  main::before { animation: brilloFondo 20s ease-in-out infinite alternate; }
}
@keyframes luzDeriva {
  0% { transform: translate3d(0, 0, 0) scale(.95); }
  50% { transform: translate3d(calc(var(--dx, 80px) * .55), calc(var(--dy, 30px) * .55), 0) scale(1.06); }
  100% { transform: translate3d(var(--dx, 80px), var(--dy, 30px), 0) scale(1); }
}
@keyframes brilloFondo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-4%, 3%, 0); } }

/* Piezas claras según el fondo */
.bg-gray :is(.icon-circle, .chip, .offer__sub-num) { background: var(--white); }
.bg-gray .service:not(.service--dark) .icon-circle { background: var(--white); }
/* Nuestra historia: el segundo hito de un mismo año lleva un aro del color de la sección que tapa la línea */
#historia .hist__item--same .hist__node { border-color: var(--lavender); }

/* Cierre "Agendá una reunión": card blanca sobre el lavanda de la sección (nada oscuro fuera del hero). Ícono en
   círculo lima, título carbón, bajada en gris y la palabra clave en violeta; CTA lima y WhatsApp con borde carbón. */
.cta-card.closing { background: var(--white); color: var(--ink); }
.cta-card.closing .icon-circle { background: var(--lime); color: var(--ink); }
.cta-card.closing .closing__free { color: var(--ink); }
.cta-card.closing .closing__free .ico { color: var(--purple); }
.cta-card.closing .closing__lead { color: var(--muted); }
.cta-card.closing .closing__lead .hl { color: var(--purple); }

.section--dark { padding: var(--section-y) 0; }

.section-head { max-width: 760px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.section-head--wide { max-width: 980px; }
.section-title.section-title--big { font-size: var(--h2-big); } /* doble clase: .section-title (más abajo) no lo pisa */
h1.section-title { font-size: var(--h1); } /* páginas internas: el H1 usa la clase del título de sección */

.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.section-cta__note { margin: 0; color: var(--muted); font-size: 15px; }
/* Próximo paso: link de texto que lleva a la sección que responde la duda siguiente. Sin subrayado: se distingue por
   el peso, el color de la familia de la sección y la flecha; al pasar el mouse cambia de color y la flecha avanza. */
.next-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
.section--alt .next-link { color: var(--purple); }
.next-link { transition: color var(--t-fast) var(--ease-out); }
.next-link:hover { color: var(--purple); }
.section--alt .next-link:hover { color: var(--ink); }
.next-link .arr { display: inline-block; flex: none; transition: transform var(--t-fast) var(--ease-out); } /* avance de la flecha: ver .card-h */
.section-cta .next-link { flex-basis: 100%; }
.section-next { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 36px 0 0; }
/* En Presencia el próximo paso cierra la sección en su propia fila, alineado a la izquierda como en el resto de las
   secciones (como tercer ítem de la fila quedaba flotando a la derecha del mapa). El gap de .presence ya da el aire. */
.presence > .section-next { flex-basis: 100%; margin-top: 0; }
/* Escritorio: el link va al pie de la columna de texto, a la altura del final del mapa, y el mapa se limita en alto
   para que la card entre entera en la pantalla junto con el título de la sección. */
@media (min-width: 1024px) {
  #presencia .presence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 24px; }
  #presencia .presence > .presence__text { grid-column: 1; grid-row: 1; }
  #presencia .presence > .map-card { grid-column: 2; grid-row: 1 / span 2; }
  #presencia .presence > .section-next { grid-column: 1; grid-row: 2; align-self: end; }
  #presencia .armap { width: auto; max-width: 100%; height: min(400px, 48vh); }
}
.faq__a a { color: var(--purple); font-weight: 600; transition: color var(--t-fast) var(--ease-out); }
.faq__a a:hover { color: var(--ink); }
.section--dark .section-cta__note { color: var(--muted); }

/* ---------- Tipografía ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; flex: none; width: 24px; height: 3px; border-radius: 2px; background: var(--lime); }
.section--alt .eyebrow { color: var(--purple); }
.section--alt .eyebrow::before { background: var(--purple); }
.site-footer .eyebrow--lime { color: var(--muted); }
.section--dark .eyebrow::before { background: var(--lime); }

.section-title { margin: 0; font-size: var(--h2); font-weight: 700; line-height: 1.1; }
.lead { margin: 0; font-size: 21px; line-height: 1.6; color: var(--muted); }

/* Palabra clave: resaltador lima con letra carbón sobre blanco (como una card lima), violeta sobre lila, lima sobre carbón.
   `box-decoration-break: clone` cierra el resaltado en cada línea cuando la frase se corta. */
.hl { color: var(--lime); }
.section--alt .hl { color: var(--purple); }

/* ---------- Botones ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-lift) var(--ease-out), box-shadow var(--t-lift) var(--ease-out);
}
/* Brillo que cruza el botón al pasar el mouse. Se mueve con transform (no con `left`) para no relayoutar en cada cuadro;
   445% de su propio ancho (45% del botón) equivale a recorrer dos anchos del botón. */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: rgba(255, 255, 255, .4);
  transform: translateX(0) skewX(-22deg);
  transition: transform .8s var(--ease-out);
  pointer-events: none;
}
/* Hover: cambio de color de cada variante, elevación mínima (1 px, sin escala), sombra suave y el brillo de Nico que
   cruza el botón. Solo con mouse y con movimiento habilitado; con "reducir movimiento" o en pantallas táctiles queda
   el cambio de colores. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(42, 42, 42, .12); }
  .btn:hover::after { transform: translateX(445%) skewX(-22deg); }
}

/* Principal: .btn-primary (violeta) y .btn-lime (lima con letra carbón); .btn-light es el secundario con borde carbón */
.btn-light { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-light:hover { background: var(--ink); color: var(--white); }
/* Botón de la card lima del CTA final: gris, y al pasar el mouse fondo blanco */
.btn-gray { background: var(--line-dark); color: var(--white); border-color: var(--line-dark); }
.btn-gray:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
/* Gris claro (el de las cards de Servicios), letra carbón; al pasar el mouse se invierte */
.btn-soft { background: var(--gray-bg); color: var(--ink); border-color: var(--gray-bg); }
.btn-soft:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { color: var(--ink); filter: brightness(1.06); } /* `color` repetido: `a:hover` pesa más que `.btn-lime` */

.btn-sm { min-height: 48px; }
/* Clic: el botón se hunde apenas (igual en todo el sitio: home, header, diagnóstico y postulate) */
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
}
.btn[aria-disabled="true"] { cursor: progress; opacity: .75; }
.btn:disabled { cursor: not-allowed; opacity: .5; filter: grayscale(.4); }

.btn .arr { display: inline-block; margin-left: 6px; transition: transform var(--t-fast) var(--ease-out); }

/* ---------- Componentes ---------- */
.chip { display: inline-block; padding: 7px 12px; border-radius: 6px; background: var(--lavender); color: var(--ink); font-size: 15px; }

/* Tarjetas minimalistas (pedido de Brian): sin caja de fondo, sin sombra, sin elevación y sin filetes. Se separan
   solo por aire y tipografía; al pasar el mouse el título toma el color de la familia de la sección. */
:root { --card-line: rgb(42 42 42 / .16); }
.card-h { position: relative; transition: border-color var(--t-fast) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover .arr, .next-link:hover .arr { transform: translateX(4px); }
}

/* Card lima (sobre carbón): texto e íconos carbón. */
/* Card del CTA final con el estilo de las cards de Soluciones: carbón, letras blancas, círculo lima con ícono carbón */
.card-dark { background: var(--ink); color: var(--white); }
.card-dark .icon-circle { background: var(--lime); color: var(--ink); }
.card-dark .cta-card__text { color: var(--lavender); }
.card-dark :focus-visible { outline-color: var(--lime); }

/* Íconos de trazo: el color sale de `color` del contenedor */
.ico { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

.icon-circle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lavender); /* sobre blanco; en las secciones lavanda va en blanco (ver "Ritmo de fondos") */
  color: var(--purple);
}
.icon-circle--sm { width: 52px; height: 52px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Desplegable "Ver más": el contenido queda en el DOM (indexable y encontrable con Ctrl+F) */
.more__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--purple);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.more__btn::-webkit-details-marker { display: none; }
.more__btn { transition: color var(--t-fast) var(--ease-out); }
.more__btn:hover { color: var(--ink); }
.more__chev { transition: transform .25s var(--ease-out); }
.more[open] .more__chev { transform: rotate(180deg); }
.more:not([open]) .more__label--open,
.more[open] .more__label--closed { display: none; }
.more__body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.more--text .more__body { padding-top: 8px; }
.more--text .more__body > p { margin: 0; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(42, 42, 42, .28);
  transition: transform var(--t-lift) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity .3s var(--ease-out); /* lima con el logo blanco; al pasar el mouse, blanco con el logo carbón */
}
.wa-float .ico { flex: none; }
.wa-float:hover { background: var(--white); color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wa-float:hover { transform: translateY(-3px) scale(1.06); }
}
/* Entra una sola vez, después del hero */
.anim .wa-float { animation: rise .5s 1.5s var(--ease-out) backwards; }
/* Siempre a la vista: si tapa un control chico, main.js lo sube lo justo (--wa-lift) en lugar de ocultarlo */
.wa-float { translate: 0 calc(-1 * var(--wa-lift, 0px)); }
@media (prefers-reduced-motion: no-preference) {
  .wa-float { transition: transform var(--t-lift) var(--ease-out), translate .35s var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
}
@media (max-width: 760px) {
  .wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .wa-float .ico { width: 26px; height: 26px; }
}
/* Con el globo abierto, el botón queda en blanco con el logo carbón (el mismo estado que el hover) */
.wa-float.is-activo { background: var(--white); color: var(--ink); }

/* Globo de WhatsApp (main.js lo arma sobre el botón flotante; sin JS no existe y el botón es el link directo).
   Un globo de conversación blanco que nace del botón: encabezado con el logo, el mensaje de la página en un campo
   editable con forma de mensaje propio (lavanda, sin borde ni tirador de tamaño, crece con el texto) y el botón lima
   "Enviar por WhatsApp →". Se abre con un fundido y una escala corta desde el botón; con "reducir movimiento", solo el
   fundido. La cola apunta al centro del botón. */
.wa-globo {
  --wa-boton: 60px;
  --wa-borde: 24px;
  position: fixed;
  right: var(--wa-borde);
  bottom: calc(var(--wa-borde) + var(--wa-boton) + 14px + var(--wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 51;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 56px -16px rgba(42, 42, 42, .38), 0 2px 8px rgba(42, 42, 42, .08);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transform-origin: calc(100% - var(--wa-boton) / 2) 100%;
  transition: opacity .22s var(--ease-out), transform .34s var(--ease-out);
  pointer-events: none;
}
.wa-globo.is-abierto { opacity: 1; transform: none; pointer-events: auto; }
.wa-globo::after {
  content: "";
  position: absolute;
  right: calc(var(--wa-boton) / 2 - 7px);
  bottom: -6px;
  width: 14px;
  height: 14px;
  border-radius: 0 0 3px 0;
  background: var(--white);
  transform: rotate(45deg);
}
.wa-globo__cab { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-right: 32px; }
.wa-globo__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: var(--white); }
.wa-globo__avatar svg { width: 22px; height: 22px; }
.wa-globo__titulo { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.wa-globo__sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.wa-globo__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.wa-globo__cerrar:hover { background: var(--lavender); color: var(--ink); }
.wa-globo__texto {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 76px;
  max-height: 172px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px 14px 4px 14px;
  background: var(--lavender);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  overflow-y: auto;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  scrollbar-width: thin;
  scrollbar-color: var(--purple) transparent;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.wa-globo__texto::-webkit-scrollbar { width: 6px; background: transparent; }
.wa-globo__texto::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--purple); }
.wa-globo__texto:focus { outline: none; }
.wa-globo__texto:focus-visible { box-shadow: inset 0 0 0 2px var(--purple); }
.wa-globo__enviar { width: 100%; min-height: 50px; font-size: 16px; }
@media (max-width: 760px) {
  .wa-globo { --wa-boton: 52px; --wa-borde: 16px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-globo { transform: none; transition: opacity .15s linear; }
  .wa-float.is-activo { transform: none; }
}
@media print { .wa-globo { display: none; } }

/* ---------- Header (componente único de todas las páginas) ----------
   Barra carbón con el logo original y la frase "Servicios IT / desde 2010" en dos líneas, el menú en mayúsculas
   espaciadas y un único CTA lima ("Agendá reunión →", el mismo .btn de todo el sitio). El marcado es el mismo en todas
   las páginas (entre header:inicio y header:fin) y en el tema del blog.
   - main.js la compacta pasados 24 px (.is-compact: sube 10 px, el contenido baja 5 y la marca queda al 90 %) y la
     esconde al bajar (.is-hidden); vuelve apenas se sube. data-header-fijo en el <header> la deja quieta.
   - Hasta 1100 px el menú y el CTA van en un panel propio que despliega el botón [data-nav-toggle] (main.js). Sin JS,
     el menú queda siempre visible debajo de la marca.
   - Sin subrayados: el ítem activo (sección a la vista en la home, o la página interna) va en lima. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background-color: var(--ink);
  border-bottom: 1px solid rgb(255 255 255 / .08);
  color: var(--white);
}
.site-header :focus-visible { outline-color: var(--lime); }
.section, .clients, .quienes-somos, .offer__part, .pres-slide { scroll-margin-top: var(--header-h); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 100%; }

.brand { display: flex; flex: none; align-items: center; gap: 12px; min-height: 44px; color: var(--white); text-decoration: none; } /* 44 px: tocable */
.brand:hover { color: var(--white); }
.brand img { display: block; width: auto; height: 40px; }
.brand__tag { display: flex; flex-direction: column; color: rgb(240 235 245 / .72); font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav a:not(.btn) {
  color: rgb(255 255 255 / .72);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.nav a:not(.btn):hover { color: var(--white); }
/* is-active: sección de la home a la vista (main.js); aria-current: la página interna en la que se está */
.nav a.is-active, .nav a[aria-current="page"] { color: var(--lime); }
.site-header__cta { flex: none; min-height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }

/* Botón del menú: tres líneas que se cruzan en una X al abrir (diseño propio) */
.nav-toggle {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast) var(--ease-out);
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--lime); }
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s var(--ease-out), top .3s var(--ease-out); }
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Compacta y escondida (main.js). Todo con transform: la barra no cambia de alto en el flujo y la página no salta. */
.site-header, .site-header__inner, .brand { transition: transform .45s var(--ease-out), background-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.brand { transform-origin: 0 50%; }
.site-header.is-compact { transform: translateY(-10px); background-color: rgb(42 42 42 / .97); box-shadow: 0 10px 30px -14px rgb(0 0 0 / .6); }
.site-header.is-compact .site-header__inner { transform: translateY(5px); }
.site-header.is-compact .brand { transform: scale(.9); }
.site-header.is-hidden { transform: translateY(-100%); }
/* Con el panel del menú abierto no se compacta ni se esconde */
.site-header:has(.nav.is-open), .site-header:has(.nav.is-open) .site-header__inner { transform: none; }

/* Panel del menú en pantallas angostas */
@media (max-width: 1100px) {
  .js .nav-toggle { display: inline-grid; }
  .js .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    padding: 8px var(--wrap-pad) 24px;
    border-bottom: 1px solid rgb(255 255 255 / .08);
    background: var(--ink);
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / .7);
    /* Celular en horizontal: el panel entra en la pantalla y, si hace falta, se desplaza por dentro con una barra fina
       con los colores del sitio (no la del sistema), así el CTA "Agendá reunión" siempre se alcanza */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lime) transparent;
  }
  .js .nav::-webkit-scrollbar { width: 6px; background: transparent; }
  .js .nav::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--lime); }
  .js .nav.is-open { display: flex; }
  .js .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav a:not(.btn) { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: 14px; }
  .js .nav a:not(.btn)::after { content: "→"; color: rgb(255 255 255 / .35); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
  .js .nav a:not(.btn):hover::after { color: var(--lime); transform: translateX(4px); }
  .js .nav .site-header__cta { width: 100%; min-height: 52px; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js .nav.is-open { animation: navPanel .32s var(--ease-out) both; }
  .js .nav.is-open li { animation: navItem .4s var(--ease-out) both; }
  .js .nav.is-open li:nth-child(2) { animation-delay: .03s; }
  .js .nav.is-open li:nth-child(3) { animation-delay: .06s; }
  .js .nav.is-open li:nth-child(4) { animation-delay: .09s; }
  .js .nav.is-open li:nth-child(5) { animation-delay: .12s; }
  .js .nav.is-open li:nth-child(6) { animation-delay: .15s; }
}
@keyframes navPanel { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes navItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* Sin JS: el menú se ve completo debajo de la marca */
html:not(.js) .site-header { height: auto; }
html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
@media (max-width: 1100px) {
  html:not(.js) .nav { flex-wrap: wrap; flex-basis: 100%; }
  html:not(.js) .nav ul { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .site-header__inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand img { height: 36px; }
  .brand__tag { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .brand { transition: background-color .2s linear; }
}

/* ---------- Hero ---------- */
/* Imagen (o video) a pantalla completa con overlay; texto y CTA encima, sin scroll */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: 48px 0;
  overflow: hidden;
}
.hero { color: var(--white); } /* el texto va en blanco sobre el video con velo oscuro */
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.hero__media > img,
.hero__media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Nada nativo a la vista: sin el botón de play que Safari pone sobre un video que no arrancó ni sus controles (si
   play() falla, main.js cambia el video por su poster). */
.hero__media video::-webkit-media-controls,
.hero__media video::-webkit-media-controls-start-playback-button,
.hero__media video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 42, 42, .55), rgba(42, 42, 42, .8)); /* velo oscuro para leer el texto */
  transition: opacity .9s var(--ease-out);
}
/* Fondo de luces (el de la página anterior), en el hero y en Nuestra historia. Carbón con cuatro luces de degradado
   radial de perfil suave (sin filter: blur) y un grano fino fijo que evita los escalones del degradado.
   Cada luz combina una órbita (47–60 s), una deriva de ida y vuelta (31–44 s) y una respiración de escala (30–46 s):
   duraciones distintas, así la combinación nunca se repite igual. Solo rotate/translate/scale (GPU, sin repintar).
   Con "reducir movimiento" quedan quietas. En el hero, sin el velo pensado para el video: blanco sobre carbón ya
   tiene contraste. */
.hero__media--luces::after { content: none; }
.tech { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); }
@supports (overflow: clip) { .tech { overflow: clip; } } /* recorta sin crear un contenedor de scroll: el sticky sigue andando */
.fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; contain: strict; pointer-events: none; }
.hero__media--luces .fondo { z-index: 0; }
.fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .045;
}
.fondo__luz {
  --c: 102 51 153; /* violeta #663399 en RGB; --a: intensidad en el centro */
  --a: .5;
  position: absolute;
  width: var(--d);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(var(--c) / var(--a)) 0%,
    rgb(var(--c) / calc(var(--a) * .9)) 15%,
    rgb(var(--c) / calc(var(--a) * .66)) 30%,
    rgb(var(--c) / calc(var(--a) * .39)) 45%,
    rgb(var(--c) / calc(var(--a) * .19)) 60%,
    rgb(var(--c) / calc(var(--a) * .075)) 75%,
    rgb(var(--c) / calc(var(--a) * .024)) 90%,
    rgb(var(--c) / 0) 100%);
  transform-origin: 45% 56%;
}
.fondo__luz--1 { --d: clamp(560px, 80vw, 1200px); --a: .5; --deriva: fondoDeriva1; --t1: 58s; --t2: 41s; --t3: 33s; --retraso: -17s; top: calc(var(--d) * -.38); left: calc(var(--d) * -.3); }
.fondo__luz--2 { --d: clamp(480px, 64vw, 980px); --a: .4; --deriva: fondoDeriva2; --t1: 52s; --t2: 37s; --t3: 46s; --retraso: -29s; right: calc(var(--d) * -.3); bottom: calc(var(--d) * -.36); transform-origin: 56% 43%; }
.fondo__luz--3 { --c: 152 204 50; --d: clamp(300px, 38vw, 620px); --a: .1; --deriva: fondoDeriva3; --t1: 47s; --t2: 31s; --t3: 39s; --retraso: -8s; top: 6%; right: 6%; } /* lima */
.fondo__luz--4 { --c: 240 235 245; --d: clamp(360px, 48vw, 760px); --a: .05; --deriva: fondoDeriva4; --t1: 60s; --t2: 44s; --t3: 30s; --retraso: -36s; bottom: -14%; left: 20%; transform-origin: 54% 46%; } /* lavanda */
@media (max-width: 767px) {
  .fondo__luz--3 { top: 38%; right: -18%; }
  .fondo__luz--4 { bottom: 22%; left: -20%; }
}
@media (prefers-reduced-motion: no-preference) {
  .fondo__luz {
    animation: fondoOrbita var(--t1) linear infinite, var(--deriva) var(--t2) ease-in-out infinite alternate, fondoRespira var(--t3) ease-in-out infinite alternate;
    animation-delay: var(--retraso, 0s);
  }
  .fondo__luz--2, .fondo__luz--4 { animation-direction: reverse, alternate, alternate; }
}
@keyframes fondoOrbita { to { rotate: 1turn; } }
@keyframes fondoRespira { from { scale: 1; } to { scale: 1.14; } }
@keyframes fondoDeriva1 { from { translate: 0 0; } to { translate: 90px 60px; } }
@keyframes fondoDeriva2 { from { translate: 0 0; } to { translate: -80px -70px; } }
@keyframes fondoDeriva3 { from { translate: 0 0; } to { translate: -110px 80px; } }
@keyframes fondoDeriva4 { from { translate: 0 0; } to { translate: 100px -50px; } }

/* Estado inicial (con JS): solo el video, velo suave y el botón con la flecha; el texto espera */
.hero.is-idle .hero__media::after { opacity: .3; }
.hero.is-idle .hero__inner { opacity: 0; pointer-events: none; }
.hero__inner { transition: opacity .6s var(--ease-out); }
.hero__down {
  position: absolute;
  left: 50%;
  bottom: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray-bg);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  cursor: pointer;
  transform: translateX(-50%);
  transition: background-color var(--t-fast) var(--ease-out), opacity .4s var(--ease-out);
  animation: nudge 2.2s var(--ease-out) 2;
}
.hero__down:hover { background: var(--white); }
.hero__down[hidden] { display: none; }
.hero:not(.is-idle) .hero__down { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
.hero .eyebrow { color: var(--lime); }
.hero .btn-light { color: var(--white); border-color: var(--white); }
.hero .btn-light:hover { background: var(--white); color: var(--ink); }
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; text-align: center; }
.hero__title { max-width: 1100px; margin: 0; font-size: var(--h1); font-weight: 700; line-height: 1.08; }
.hero__title > .hero__line { display: block; text-wrap: balance; } /* cada línea en renglones parejos, sin palabras sueltas */
/* Rótulo dentro del H1 (palabra clave): mismo aspecto que un .eyebrow suelto y el mismo aire que dejaba el gap del hero */
.hero__title > .hero__kicker { display: flex; justify-content: center; margin-bottom: 22px; line-height: 1.4; }
@media (max-width: 600px) { .hero__title > .hero__kicker { margin-bottom: 18px; } }
@media (max-width: 400px) { .hero__title > .hero__kicker { margin-bottom: 16px; } }
.hero__title:focus { outline: none; } /* tabindex="-1" solo al ocultarse la flecha: ancla del foco, no es parada de Tab */
.hero__lead { max-width: 780px; color: var(--lavender); font-size: 20px; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero__note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--lavender); font-size: 16px; text-align: left; }
.hero__note .ico { flex: none; color: var(--lime); }

.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 56px; margin-top: 10px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 180px; }
.stat::before { content: ""; width: 32px; height: 3px; margin-bottom: 8px; border-radius: 2px; background: var(--lime); }
.stat__value { font-size: 40px; font-weight: 700; line-height: 1.1; }
.stat__label { font-size: 14px; color: var(--lavender); }

/* Tres cifras (16 años, +100 proyectos, +12 provincias): en celular van en una fila de tres, más chicas, con la
   unidad debajo del número para que entren sin cortar la fila. */
@media (max-width: 700px) {
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; width: 100%; }
  .stat { min-width: 0; text-align: center; }
  .stat__value { display: flex; flex-direction: column; align-items: center; font-size: 30px; line-height: 1.05; }
  .stat__value .stat__unit { font-size: 15px; font-weight: 600; }
  .stat__label { font-size: 12px; line-height: 1.35; }
}
@media (max-width: 600px) {
  .hero { padding: 36px 0; }
  .hero__inner { gap: 18px; }
  /* El rótulo no entra en un renglón: la barrita va arriba y centrada (como en las cifras de abajo) y el texto se
     reparte parejo, así no queda la barra sola a la izquierda de un texto centrado. */
  .hero .eyebrow { flex-direction: column; gap: 10px; text-wrap: balance; }
  .hero__lead { font-size: 18px; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__ctas .btn { width: 100%; max-width: 340px; margin-inline: auto; }
  .hero__note { display: block; max-width: 340px; text-align: center; text-wrap: balance; }
  .hero__note .ico { display: inline-block; margin-right: 6px; vertical-align: -4px; }
}
/* Teléfonos chicos (360 px): logo y menú en una fila, frase y CTA sin scroll */
@media (max-width: 400px) {
  .hero { padding: 28px 0; }
  .hero__inner { gap: 16px; }
}

/* ---------- Socios tecnológicos (slots que rotan) ---------- */
/* Grilla fija de celdas blancas; con JS queda visible una fila por grupo (tres en celular) y cada tanto una celda
   cambia de logo con un fundido cruzado. Sin JS, se ven todos. */
.slots-groups { display: flex; flex-direction: column; gap: 52px; }
.slots-group { display: flex; flex-direction: column; gap: 16px; }
.slots-group__label { color: var(--muted); }
/* Sin la rotación (sin JS o con "reducir movimiento") se ven todos los logos: fichas de ancho fijo y la última fila
   centrada, para que no quede un logo suelto a la izquierda */
html:not(.anim) .slots { display: flex; flex-wrap: wrap; justify-content: center; }
html:not(.anim) .slot { flex: 0 0 calc((100% - 5 * 16px) / 6); }
@media (max-width: 980px) { html:not(.anim) .slot { flex-basis: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 600px) { html:not(.anim) .slot { flex-basis: calc((100% - 12px) / 2); } }
.slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* Cada celda es una grilla de una sola área: en el cambio, el logo que sale y el que entra quedan apilados y se funden
   a la vez (la celda nunca queda vacía). Tamaño óptico parejo: --lf es el alto del logo como fracción del alto útil de
   la celda, calculado según su proporción y su peso visual (un bloque lleno como Fiesa o Lenovo va más chico que un
   trazo fino como Bring). */
/* Celdas sin caja (sin fondo, borde ni sombra): solo el logo y aire. Los logos van con fondo transparente
   (img/socios/*-transparente.webp, sin el blanco de los archivos originales), así nunca se ve un recuadro blanco
   sobre el lavanda, tampoco durante el recambio, que mueve y funde las imágenes. */
.slot { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: 100px; padding: 18px 24px; background: none; }
.slot[hidden] { display: none; }
.slot img {
  display: block;
  grid-area: 1 / 1;
  width: auto;
  height: calc(var(--lf, .6) * 100%);
  max-width: 100%;
  object-fit: contain;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); /* FLIP_MS en main.js */
}
/* Recambio: el logo que sale sube y se achica apenas; el que entra llega desde abajo. Fundido cruzado, sin hueco. */
.slot img.is-in { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(3px); }
.slot img.is-out { opacity: 0; transform: translateY(-14px) scale(.94); filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  .slot img.is-in, .slot img.is-out { transform: none; filter: none; }
}
@media (max-width: 980px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .slot { height: 84px; padding: 14px 18px; } }

/* ---------- Clientes: fichero por rubro (como el original de Nico) con una banda en movimiento por rubro ----------
   Solapas de rubro a la izquierda (Sector público, Seguros y salud, Laboratorios e industria, Medios y tecnología,
   Servicios y comercio; sin "Todos") y a la derecha la banda del rubro elegido. En celular las solapas van arriba,
   en dos o tres renglones centrados (sin scroll). main.js arma cada banda desde la lista del
   HTML: una pista con su lista y una copia exacta; la pista se mueve -50% y el loop no salta. La velocidad es pareja
   (px por segundo, --cinta-dur la calcula main.js según el ancho). Las bandas solo se detienen fuera de pantalla
   (.is-offscreen), no con el mouse. Rubros de 10 logos o más en dos filas (arriba hacia la izquierda, abajo hacia la
   derecha); con menos, una fila hacia la izquierda. Logos en gris; el que está bajo el mouse o enfocado, a color.
   Sin JS o con "reducir movimiento": las dos listas quietas en grilla centrada, cada una con su rótulo. */
.clients { padding: 64px 0 80px; }
.clients__lead { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
/* ---------- Selector de sector o vista (.seg): un solo componente de píldoras para todo el sitio ----------
   Presencia (Argentina / Latam), Clientes y Casos (Sector público / Sector privado) y los filtros del blog usan el
   mismo control: pista redondeada y opción activa rellena. Dos variantes de color:
   - Fondo claro: pista gris (blanca sobre secciones grises, .seg--on-gray) y activo violeta con texto blanco.
   - Fondo carbón (.seg--dark): pista #3a3a3a y activo lima con texto carbón.
   .seg--fill reparte el ancho entre las opciones (panel angosto de Casos). El contador (.seg__n) va como insignia. */
.seg { --seg-track: var(--gray-bg); display: flex; gap: 6px; width: max-content; max-width: 100%; padding: 6px; border-radius: 999px; background: var(--seg-track); }
.seg[hidden] { display: none; }
.seg--on-gray { --seg-track: var(--white); }
.seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seg__btn:hover { color: var(--purple); }
.seg__btn:is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { background: var(--purple); color: var(--white); }
.seg__btn:focus-visible { outline-offset: 2px; }
.seg__n { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg__btn:is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) .seg__n { background: var(--lime); color: var(--ink); }
.seg--dark { --seg-track: #3a3a3a; }
.seg--dark .seg__btn { color: var(--white); }
.seg--dark .seg__btn:hover { color: var(--lime); }
.seg--dark .seg__btn:is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { background: var(--lime); color: var(--ink); }
.seg--dark .seg__n { background: rgb(255 255 255 / .14); color: var(--white); }
.seg--fill { width: 100%; gap: 4px; padding: 4px; }
.seg--fill .seg__btn { flex: 1 1 0; min-height: 42px; padding: 0 12px; font-size: 15px; }
@media (max-width: 600px) {
  .seg { gap: 4px; }
  .seg__btn { gap: 8px; min-height: 42px; padding: 0 16px; font-size: 15px; }
}
/* Teléfonos de 360 px o menos: las opciones reparten el ancho y nunca desbordan la pantalla */
@media (max-width: 360px) {
  .seg { width: 100%; }
  .seg__btn { flex: 1 1 0; gap: 6px; padding: 0 10px; font-size: 14px; }
  .seg__n { min-width: 24px; padding: 0 5px; }
}

.cinta { --logo-gap: 72px; --logo-scale: .82; --item-h: 76px; display: grid; gap: 40px; }
.cinta__panel { min-width: 0; }
.cinta__label { display: flex; max-width: var(--wrap-max); margin: 0 auto 14px; padding: 0 var(--wrap-pad); }
.cinta__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.cinta__item { position: relative; display: flex; flex: none; align-items: center; justify-content: center; height: var(--item-h); }
.cinta__item img {
  display: block;
  width: calc(var(--lw, 120) * var(--logo-scale) * 1px);
  height: auto;
  max-height: 56px;
  object-fit: contain;
  /* Gris parejo: cada logo trae su opacidad (--lo) y, los muy claros, un oscurecido (--lb), calculados según el tono
     medio del logo, para que todos queden en un gris medio similar (ni los claros desaparecen ni los oscuros pesan
     más). --lw es el ancho óptico según su proporción y su peso visual. */
  filter: grayscale(1) brightness(var(--lb, 1));
  opacity: var(--lo, .6);
  transition: filter .45s var(--ease-out), opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
/* El logo bajo el mouse (o enfocado) toma su color original y crece apenas */
.cinta__item:hover img, .cinta__link:focus-visible img { filter: none; opacity: 1; transform: scale(1.06); }
@media (hover: none) { .cinta__item img { opacity: min(1, calc(var(--lo, .6) * 1.25)); } }
/* Logo con caso de éxito: enlace con el aviso "Ver caso" debajo, que aparece con el mouse encima */
.cinta__link { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 4px; border-radius: var(--radius-sm); color: var(--purple); text-decoration: none; }
.cinta__link:hover { color: var(--purple); }
.cinta__cue { position: absolute; left: 50%; bottom: -4px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); pointer-events: none; }
.cinta__link:hover .cinta__cue, .cinta__link:focus-visible .cinta__cue { opacity: 1; transform: translate(-50%, 0); }

/* Con JS (.is-cinta): cada sector es una banda que se desplaza */
.cinta__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cinta__track { display: flex; width: max-content; }
.cinta__list[hidden] { display: none; } /* la lista fuente queda vacía cuando main.js arma la banda */
.cinta.is-cinta .cinta__row .cinta__list { flex-wrap: nowrap; flex: none; align-items: center; gap: var(--logo-gap); max-width: none; margin: 0; padding: 0 var(--logo-gap) 0 0; }
@keyframes cintaA { to { transform: translateX(-50%); } }
@keyframes cintaB { from { transform: translateX(-50%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .anim .cinta.is-cinta .cinta__row--a .cinta__track { animation: cintaA var(--cinta-dur, 60s) linear infinite; }
  .anim .cinta.is-cinta .cinta__row--b .cinta__track { animation: cintaB var(--cinta-dur, 60s) linear infinite; }
  /* Pausa solo fuera de pantalla (no con el mouse ni con el foco, pedido de Brian) */
  .anim :is(.cinta.is-offscreen, .is-offscreen .cinta) .cinta__track { animation-play-state: paused; }
}
/* Quieta (sin "anim": reducir movimiento): grilla centrada, sin máscara ni copias */
html:not(.anim) .cinta__row { -webkit-mask-image: none; mask-image: none; overflow: visible; }
html:not(.anim) .cinta__track { width: auto; justify-content: center; }
html:not(.anim) .cinta.is-cinta .cinta__row .cinta__list { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 12px 40px; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
html:not(.anim) .cinta__list[aria-hidden="true"] { display: none !important; }
@media (max-width: 600px) {
  .clients { padding: 48px 0 60px; }
  .cinta { --logo-gap: 48px; --logo-scale: .64; --item-h: 62px; gap: 28px; }
  .cinta__label { margin-bottom: 8px; }
  .cinta__item img { max-height: 42px; }
}

/* Fichero: solapas de rubro en una fila arriba y, debajo, las bandas del rubro elegido */
.cl-fichero { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; }
.cl-rubros { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-rubro {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--lavender);
  color: var(--purple);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cl-rubro:hover { background: var(--gray-bg); color: var(--purple); }
.cl-rubro[aria-selected="true"] { background: var(--purple); color: var(--white); }
/* Reloj del avance automático: un pseudo-elemento invisible al pie de la solapa activa cuya animación dura lo que dura
   el rubro; al terminar (animationend), main.js pasa al siguiente. Sin indicador a la vista (pedido de Brian, 09/11:
   con la solapa en violeta alcanza). Fuera de pantalla se detiene. */
.cl-rubro::after {
  content: "";
  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .anim .cl-rubro.is-corriendo::after { animation: clProgreso var(--cl-dur, 7s) linear both; }
  .anim .cl-fichero.is-offscreen .cl-rubro::after { animation-play-state: paused; }
}
@keyframes clProgreso { to { transform: scaleX(1); } }

/* Alto fijo del área de bandas en todos los rubros (el de dos filas): en los rubros de una fila la banda queda centrada
   en ese mismo espacio, así nada de lo que sigue se mueve al cambiar de rubro. */
.cl-fichero .cinta { --item-h: 84px; --cl-gap: 12px; display: flex; align-items: center; height: calc(2 * var(--item-h) + var(--cl-gap)); min-width: 0; }
.cl-fichero .cinta__panel[hidden] { display: none; }
.cl-fichero .cinta__panel { display: flex; flex-direction: column; gap: var(--cl-gap); width: 100%; }
/* Quieta (reducir movimiento): alto fijo de la grilla más larga (18 logos: tres renglones de seis; en celular, seis de tres) */
html:not(.anim) .cl-fichero .cinta { align-items: flex-start; height: calc(3 * var(--item-h) + 16px); }
html:not(.js) .cl-fichero .cinta { display: block; height: auto; }
.cl-fichero .cinta__list { max-width: none; padding: 0; }
/* Con JS el rótulo lo da la solapa; sin JS se ven todos los rubros, cada uno con su rótulo */
.js .cl-fichero .cinta__label { display: none; }
html:not(.js) .cl-rubros { display: none; }
html:not(.js) .cl-fichero .cinta__panel + .cinta__panel { margin-top: 32px; }
.cl-fichero .cinta__label { margin: 0 0 12px; padding: 0; }
/* Cambio de rubro: sale con un fundido corriéndose apenas a la izquierda y el nuevo llega desde la derecha */
@media (prefers-reduced-motion: no-preference) {
  .anim .cinta__panel.is-saliendo { animation: clSale .26s var(--ease-out) both; }
  .anim .cinta__panel.is-entrando { animation: clEntra .5s var(--ease-out) both; }
}
@keyframes clSale { to { opacity: 0; transform: translateX(-16px); } }
@keyframes clEntra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
/* Quieta (reducir movimiento): grilla pareja de seis columnas (tres en celular), sin máscara ni copias */
html:not(.anim) .cl-fichero .cinta.is-cinta .cinta__row .cinta__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-items: center; gap: 8px 24px; padding: 0; }
@media (max-width: 900px) {
  html:not(.anim) .cl-fichero .cinta.is-cinta .cinta__row .cinta__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--wrap-pad); }
}
@media (max-width: 900px) {
  .cl-rubros { justify-content: center; gap: 6px; }
  .cl-rubro { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
  .cl-fichero .cinta { --item-h: 72px; margin-inline: calc(-1 * var(--wrap-pad)); }
  html:not(.anim) .cl-fichero .cinta { height: calc(6 * var(--item-h) + 40px); }
}

/* ---------- Servicios (carrusel de a tres) ---------- */
.carousel__track {
  position: relative; /* contiene a los .sr-only absolutos del grupo fuera de vista */
  display: flex;
  gap: 32px;
  margin-bottom: -32px;
  padding: 8px 0 32px; /* aire para el hover de las tarjetas */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
/* Sin barra nativa, con o sin JS (sin JS se sigue deslizando con el dedo, la rueda o el panel táctil) */
.carousel__track { scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .carousel__track { scroll-behavior: smooth; }
}
.carousel__slide { display: flex; flex: 0 0 100%; gap: 20px; min-width: 0; scroll-snap-align: start; }
.carousel__slide > .service { flex: 0 0 calc((100% - 40px) / 3); } /* ancho fijo: una vista con menos de tres tarjetas no las estira */
@media (max-width: 760px) {
  .carousel__slide { flex-direction: column; }
  .carousel__slide > .service { flex: none; }
}

.carousel__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.carousel__controls[hidden] { display: none; }
.carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--purple);
  border-radius: 50%;
  background: var(--white);
  color: var(--purple);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.carousel__btn:hover { background: var(--purple); color: var(--white); }
.carousel__dots { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; }
.carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carousel__dot::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--purple); border-radius: 50%; }
.carousel__dot[aria-current="true"]::before { background: var(--purple); }
/* Tarjeta de Servicios y Soluciones, minimalista: sin fondo, sin radio, sin sombra y sin filete. Número arriba
   a la izquierda, ícono centrado en su círculo, título y "Ver más". La familia de color queda en el círculo y los chips:
   lavanda con ícono violeta en Servicios, lima con ícono carbón en Soluciones (.service--dark). */
.service {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 26px 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
}
.service .icon-circle { background: var(--lavender); color: var(--purple); }
.service .chip { background: var(--lavender); }
.service .more__btn { color: var(--ink); }
.service--dark .icon-circle { background: var(--lime); color: var(--ink); }
.service--dark .chip { background: var(--lime); color: var(--ink); }
.service__title { transition: color var(--t-fast) var(--ease-out); }
@media (hover: hover) {
  .service:hover .service__title { color: var(--purple); }
}
.service__num { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.service__title { margin: 0; color: var(--ink); font-size: 26px; font-weight: 700; line-height: 1.2; }
.service__text { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.6; }

.carousel--soft .carousel__btn { border-color: var(--gray-bg); background: var(--gray-bg); color: var(--ink); }
.carousel--soft .carousel__btn:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.carousel--soft .carousel__dot::before { border-color: var(--purple); }
.carousel--soft .carousel__dot[aria-current="true"]::before { background: var(--purple); }
.carousel--lime .carousel__btn { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.carousel--lime .carousel__btn:hover { border-color: var(--lime); background: var(--white); color: var(--ink); }
.carousel--lime .carousel__dot::before { border-color: var(--lime); }
.carousel--lime .carousel__dot[aria-current="true"]::before { background: var(--lime); }

/* ---------- Servicios y Soluciones: tarjetas minimalistas y flechas a los costados ----------
   Todo acotado a #servicios y #soluciones: el carrusel de Casos y el resto de la página no cambian.
   - Tarjetas sin caja ni filete (ver .service): 40 px de aire entre una y otra. Número arriba a la
     izquierda (nunca centrado) y todo alineado a la izquierda: número, ícono en su círculo, título y "Ver más".
   - Cada tarjeta tiene su propio alto: con el `stretch` por defecto de la pista y del grupo, abrir un "Ver más"
     agrandaba todas las tarjetas del carrusel. El alto parejo en reposo sale de --card-h, que main.js mide con todo
     cerrado. Sin JS queda el `stretch` y la fila se iguala sola.
   - Flechas en columnas laterales, una a cada lado, centradas en alto sobre las tarjetas cerradas (--arrow-y, desde
     main.js); puntos centrados debajo. Los controles se reparten en la grilla del carrusel con `display: contents`. */
:is(#servicios, #soluciones) .service {
  align-items: center; /* ícono, título y "Ver más" centrados en la tarjeta, simétricos entre tarjetas */
  justify-content: flex-start; /* desde arriba: número, ícono y título a la misma altura en toda la fila */
  min-height: var(--card-h, 0px);
  text-align: center;
}
:is(#servicios, #soluciones) .service__num { align-self: flex-start; line-height: 1; } /* el número no se centra */
:is(#servicios, #soluciones) .service .more { text-align: center; }
:is(#servicios, #soluciones) .service .more__body { align-items: center; }
:is(#servicios, #soluciones) .service .chips { justify-content: center; }
:is(#servicios, #soluciones) .service .more { align-self: stretch; margin-top: auto; } /* ancho completo al abrir; "Ver más" al pie, parejo entre tarjetas */
:is(#servicios, #soluciones) .service .more__btn { padding: 2px 0; }
:is(#servicios, #soluciones) .service .more__btn:hover { color: var(--purple); }
/* 40 px entre tarjetas: sin caja, el aire es lo que las separa */
@media (min-width: 761px) {
  :is(#servicios, #soluciones) .carousel__slide { gap: 40px; }
  :is(#servicios, #soluciones) .carousel__slide > .service { flex-basis: calc((100% - 80px) / 3); }
}

/* Íconos de la presentación institucional: círculo de 64 px para que el dibujo (hasta 42 px de ancho) respire. Cada SVG
   trae su ancho y alto; los que van a otra escala compensan el stroke-width, así el trazo mide igual (1,54 px) en todas.
   Las figuras llevan pathLength="64" para que el trazo se dibuje completo con el stroke-dasharray de la entrada.
   Entra con pop y su trazo se dibuja; el ícono queda siempre centrado en su círculo y es el círculo entero el que
   levita (motion.css, bloque 8), así el centro no se corre y no queda espacio de más. */
:is(#servicios, #soluciones) .service .icon-circle { width: 64px; height: 64px; }

/* Grupo incompleto (Servicios 7 a 8, Soluciones 10): las tarjetas van desde la izquierda, como el resto del contenido.
   offset() de main.js usa slide.offsetLeft: no cambia. */
.js :is(#servicios, #soluciones) .carousel__track { align-items: flex-start; }
@media (min-width: 761px) {
  .js :is(#servicios, #soluciones) .carousel__slide { align-items: flex-start; }
}

.js :is(#servicios, #soluciones) .carousel {
  --arrow: 48px;
  display: grid;
  grid-template-columns: var(--arrow) minmax(0, 1fr) var(--arrow);
  column-gap: 20px;
  align-items: start;
}
.js :is(#servicios, #soluciones) .carousel__track { grid-column: 2; grid-row: 1; }
.js :is(#servicios, #soluciones) .carousel__controls:not([hidden]) { display: contents; }
.js :is(#servicios, #soluciones) .carousel__btn {
  position: relative;
  z-index: 1;
  grid-row: 1;
  width: var(--arrow);
  height: var(--arrow);
  margin-top: calc(8px + var(--arrow-y, 120px) - var(--arrow) / 2); /* 8px: padding superior de la pista */
}
.js :is(#servicios, #soluciones) [data-carousel-prev] { grid-column: 1; }
.js :is(#servicios, #soluciones) [data-carousel-next] { grid-column: 3; }
.js :is(#servicios, #soluciones) .carousel__dots { grid-row: 2; grid-column: 2; justify-self: center; margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .js :is(#servicios, #soluciones) .carousel__btn { transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), margin-top .35s var(--ease-out); }
}
/* Celular: una tarjeta por vista. Los grupos de tres se desarman (display: contents) y las tarjetas quedan en una sola
   fila que se desliza de a una, con el borde de la siguiente a la vista. La pista va de borde a borde de la pantalla y
   el margen lateral pasa a ser su padding (el snap respeta ese margen con scroll-padding). Flechas más chicas, una a
   cada lado, superpuestas al borde de la tarjeta y centradas en su alto (como en Casos); puntos centrados debajo.
   main.js detecta el display: contents y navega tarjeta por tarjeta. */
@media (max-width: 760px) {
  :is(#servicios, #soluciones) .service { padding: 24px 34px 6px; } /* 34 px a los lados: la flecha no roza el ícono */
  :is(#servicios, #soluciones) .carousel__slide { display: contents; }
  :is(#servicios, #soluciones) .carousel__track {
    gap: 12px;
    margin-inline: calc(-1 * var(--wrap-pad));
    padding-inline: var(--wrap-pad);
    scroll-padding-inline: var(--wrap-pad);
  }
  :is(#servicios, #soluciones) .carousel__slide > .service { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; }
  .js :is(#servicios, #soluciones) .carousel { --arrow: 38px; position: relative; grid-template-columns: minmax(0, 1fr); }
  .js :is(#servicios, #soluciones) .carousel__track { grid-column: 1; }
  .js :is(#servicios, #soluciones) .carousel__btn {
    position: absolute;
    top: calc(8px + var(--arrow-y, 120px) - var(--arrow) / 2);
    margin-top: 0;
    box-shadow: 0 4px 14px rgba(42, 42, 42, .22);
  }
  .js :is(#servicios, #soluciones) [data-carousel-prev] { left: calc(-1 * var(--wrap-pad) + 2px); }
  .js :is(#servicios, #soluciones) [data-carousel-next] { right: calc(-1 * var(--wrap-pad) + 2px); }
  .js :is(#servicios, #soluciones) .carousel__dots { grid-column: 1; margin-top: 20px; gap: 2px; }
  .js :is(#servicios, #soluciones) .carousel__dot { width: 20px; }
}

/* ¿Qué ofrecemos?: una sola sección. Arriba el título (H2) con su bajada; abajo, dos subsecciones numeradas (H3:
   01 Servicios y 02 Soluciones), separadas por un filete y el mismo aire de una sección. La jerarquía se lee por
   tamaño: título de sección > título de subsección > título de tarjeta. */
.offer__head { max-width: 860px; margin-bottom: 56px; }
.offer__sub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 18px; margin-bottom: 36px; }
.offer__sub-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lavender); color: var(--purple); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.offer__sub-title { margin: 0; font-size: clamp(24px, 1.2vw + 16px, 32px); font-weight: 700; line-height: 1.15; }
.offer__sub-text { grid-column: 2; margin: 0; color: var(--muted); font-size: 19px; line-height: 1.5; }
#soluciones .offer__sub-num { background: var(--lime); color: var(--ink); }
@media (max-width: 600px) {
  .offer__head { margin-bottom: 40px; }
  .offer__sub { column-gap: 14px; margin-bottom: 28px; }
  .offer__sub-num { width: 44px; height: 44px; font-size: 15px; }
  .offer__sub-text { grid-column: 1 / -1; font-size: 17px; }
  .service__title { font-size: 20px; }
}
/* Quiénes somos usa las mismas subsecciones numeradas. En gris, el número va en círculo blanco (también en Historia). */
.sub-head { max-width: 860px; }
.bg-gray .offer__sub-num { background: var(--white); }
#historia .offer__sub { margin-bottom: 4px; }
.offer__part + .offer__part { margin-top: var(--section-y); padding-top: var(--section-y); border-top: 1px solid var(--gray-bg); }

/* Botón "Agendá reunión" y su nota, centrados (mismo botón) */
:is(#servicios, #soluciones) .section-cta { flex-direction: column; align-items: center; text-align: center; }
#soluciones .section-cta .next-link { flex-basis: auto; }

/* ---------- Historia ----------
   Estructura de la página anterior con los colores de Nico (como su Historia original): fondo gris claro, sin luces
   en movimiento, texto carbón y detalles en violeta. El número de años gigante, casi transparente, queda arriba a la
   derecha. Dos columnas desde 960 px (38/62): a la izquierda rótulo, título, bajada y la cifra grande con el cuadrado
   violeta (fija al scrollear); a la derecha la línea de tiempo carbón, con un anillo violeta por hito que se dibuja al
   entrar, año grande en violeta, título carbón y texto gris. */
#historia.historia { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); }
@supports (overflow: clip) { #historia.historia { overflow: clip; } } /* recorta el número sin romper el sticky */
.historia__bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  font-size: min(40vw, 560px);
  font-weight: 700;
  line-height: .74;
  letter-spacing: -.04em;
  color: rgb(102 51 153 / .06);
  transform: translate(-3%, 8%);
  pointer-events: none;
  user-select: none;
}
#historia .history { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
#historia .history__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
#historia .hl { color: var(--purple); }
#historia .eyebrow { color: var(--purple); }
#historia .eyebrow::before { background: var(--purple); }
.history__text { max-width: 46ch; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* Cifra grande: número, cuadrado lima (hace de punto) y etiqueta. Ancho fijo de dos cifras para que el contador no
   mueva el cuadrado ni la etiqueta. */
#historia .hist__big { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 20px 0 0; --big: clamp(112px, 56px + 9vw, 176px); pointer-events: none; }
#historia .hist__num { display: inline-block; min-width: 2ch; color: var(--ink); font-size: var(--big); font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
#historia .hist__sq { flex: none; width: clamp(22px, 18px + .6vw, 30px); aspect-ratio: 1; margin-bottom: calc(var(--big) * .08); margin-left: -10px; background: var(--purple); }
#historia .hist__label { display: flex; flex-direction: column; gap: 2px; padding-bottom: calc(var(--big) * .08); color: var(--muted); font-size: 15px; line-height: 1.3; }
#historia .hist__label-main { color: var(--ink); font-size: 18px; font-weight: 700; }
#historia .hist__label-sub { font-weight: 600; }

/* Línea de 2 px; el nodo de 32 px queda centrado sobre ella (por eso el margen de 15 px a la izquierda).
   [role="list"] en el HTML: Safari no anuncia como lista un <ol> sin viñetas. */
#historia .hist__timeline {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
  margin-left: 15px;
  padding-left: 34px;
  border-left: 2px solid var(--ink);
}
#historia .hist__item { position: relative; display: flex; flex-direction: column; gap: 4px; }
/* 34 px de padding + 1 px de media línea + 16 px de medio nodo */
#historia .hist__node {
  position: absolute;
  top: 0;
  left: -51px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lav-2); /* tapa la línea detrás del anillo (mismo color que la sección) */
}
#historia .hist__ring { display: block; overflow: visible; }
#historia .hist__ring-track { stroke: rgb(42 42 42 / .22); }
#historia .hist__ring-arc { stroke: var(--purple); stroke-dasharray: 75.4; stroke-dashoffset: 0; } /* 75.4 = perímetro (2π·12) */
#historia .hist__ring-dot { fill: var(--purple); transform-box: fill-box; transform-origin: center; }

/* Año grande, 32 px de alto para quedar alineado con el anillo */
#historia .hist__year { margin: 0; color: var(--purple); font-size: 28px; font-weight: 700; line-height: 32px; letter-spacing: .01em; }
#historia .hist__title { margin: 2px 0 0; color: var(--ink); font-size: clamp(19px, 17.6px + .25vw, 21px); font-weight: 700; line-height: 1.3; }
#historia .hist__text { max-width: 60ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* Otro hito del mismo año (el año va solo para lectores de pantalla): más pegado al anterior y con un punto lima
   chico (violeta) a la altura del título. 14 px de punto: 1 px de media línea + 7 px de medio punto → left -42 px. */
#historia .hist__item--same { margin-top: -16px; }
#historia .hist__item--same .hist__node { top: 9px; left: -42px; width: 14px; height: 14px; border: 2px solid var(--gray-bg); background: var(--purple); }

@media (min-width: 960px) {
  #historia .history { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: start; }
  #historia .history__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}
#historia :focus-visible { outline-color: var(--purple); }

/* ---------- Equipo ---------- */
.team { display: flex; flex-wrap: wrap; gap: 24px; }
/* Grilla con subgrilla de filas: foto, cargo, nombre y "Ver más" caen en las mismas filas en toda la hilera, así
   todas las tarjetas cerradas son iguales (sin huecos para quien no tiene certificaciones). Las certificaciones van
   todas dentro de "Ver más", debajo de la bio. Abrir uno no mueve el contenido de los demás. */
@supports (grid-template-rows: subgrid) {
  #equipo .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 24px; }
  #equipo .member { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 12px; align-content: start; padding-bottom: 28px; }
  #equipo .member--grupo { grid-column: 1 / -1; }
  #equipo .member > .member__photo { grid-row: 1; }
  #equipo .member > .eyebrow { grid-row: 2; align-self: start; }
  #equipo .member > .member__name { grid-row: 3; align-self: start; }
  #equipo .member > :is(.more, .member__bio) { grid-row: 4; align-self: start; }
  @media (max-width: 640px) {
    #equipo .team { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  }
}
.member { display: flex; flex: 1 1 300px; flex-direction: column; gap: 12px; min-width: 0; }
.member__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 20px;
  border-radius: var(--radius);
  /* Sin foto todavía: caja gris con una silueta. Cuando esté la foto, va un <img> adentro y la silueta desaparece. */
  background: var(--gray-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / 72px no-repeat;
}
.member__photo:has(img) { background-image: none; padding: 0; overflow: hidden; }
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-img) var(--ease-out); }
/* Tarjeta compacta sin recuadro ni aro: foto, cargo, nombre y "Ver más". Al pasar el mouse, el nombre toma el violeta. */
.member__name { transition: color var(--t-fast) var(--ease-out); }
@media (hover: hover) { #equipo .member:hover .member__name { color: var(--purple); } }
/* Con foto: zoom lento dentro del marco */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .member:hover .member__photo img { transform: scale(1.05); }
}
.member__name { margin: 0; font-size: 26px; font-weight: 600; }
.member__bio { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.member__bio p { margin: 0 0 12px; }
.member__bio p:last-child { margin-bottom: 0; }
.member__bio strong { color: var(--ink); font-weight: 600; }
/* Foto grupal del equipo técnico: primera tarjeta, a todo el ancho, con proporción de foto de equipo. En celular, 4:3. */
#equipo .member--grupo { flex-basis: 100%; }
#equipo .member--grupo .member__photo { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { #equipo .member--grupo .member__photo { aspect-ratio: 4 / 3; } }
/* Celular: el equipo técnico sigue a todo el ancho y las seis personas van de a dos por fila, en el mismo orden.
   Foto cuadrada, nombre y cargo más chicos y la barrita del cargo arriba a la izquierda (el cargo puede ocupar dos
   renglones). Así la sección no se vuelve una tira de siete fotos grandes. */
@media (max-width: 640px) {
  #equipo .team { gap: 32px 14px; }
  #equipo .member:not(.member--grupo) { flex: 1 1 calc(50% - 7px); gap: 8px; }
  #equipo .member:not(.member--grupo) .member__photo { aspect-ratio: 1; padding: 12px; background-size: 52px; }
  #equipo .member:not(.member--grupo) .eyebrow { align-items: flex-start; gap: 8px; font-size: 12px; letter-spacing: .1em; line-height: 1.35; }
  #equipo .member:not(.member--grupo) .eyebrow::before { width: 16px; margin-top: .5em; }
  #equipo .member:not(.member--grupo) .member__name { font-size: 20px; line-height: 1.2; }
  #equipo .member:not(.member--grupo) .member__bio { font-size: 15px; line-height: 1.55; }
  #equipo .member:not(.member--grupo) .member__certs { font-size: 14px; }
}
.member__certs { font-size: 15px; }
/* Certificaciones como insignias: píldoras con un sello, en violeta sobre lavanda, que se despegan del texto. Parecen
   botones pero no son interactivas (sin hover ni cursor de mano). Todas van dentro de "Ver más", agrupadas por fabricante. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 11px 4px 8px;
  border: 1px solid rgba(102, 51, 153, .22);
  border-radius: 999px;
  background: var(--lavender);
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: default;
}
.badge::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5 7.5 22 12 19.5 16.5 22 15 14.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5 7.5 22 12 19.5 16.5 22 15 14.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.badges--neutral .badge { border-color: rgba(42, 42, 42, .14); background: var(--white); color: var(--muted); font-weight: 500; }
/* Certificaciones agrupadas por fabricante, compactas: un bloque por marca (rótulo chico arriba, insignias chicas en
   línea usando todo el ancho de la tarjeta) separados por una línea fina. Nada queda afuera y la tarjeta abierta no
   se hace eterna. */
.certs__grupos { margin: 0; border-bottom: 1px solid rgba(42, 42, 42, .1); }
.certs__grupo { display: grid; gap: 5px; padding: 8px 0; border-top: 1px solid rgba(42, 42, 42, .1); }
.certs__marca { color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.certs .badges { gap: 4px; margin: 0; }
.certs .badge { gap: 5px; min-height: 22px; padding: 2px 8px 2px 6px; font-size: 12px; line-height: 1.2; }
.certs .badge::before { width: 11px; height: 11px; }
.member__certs-title { margin: 16px 0 8px !important; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 640px) {
  #equipo .badge { min-height: 24px; padding: 3px 9px 3px 7px; font-size: 12px; }
  #equipo .badge::before { width: 12px; height: 12px; }
}

/* ---------- Presencia ---------- */
.presence { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.presence__text { display: flex; flex: 1 1 360px; flex-direction: column; gap: 16px; min-width: 0; }

.checks { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; font-size: 17px; line-height: 1.6; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks .ico { flex: none; margin-top: 2px; color: var(--purple); }

.map-card {
  display: flex;
  flex: 1 1 420px;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 8px 0;
  border-radius: 0;
  background: none; /* sin caja: el mapa va directo sobre el gris de la sección */
}
.armap { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }

.prov {
  fill: var(--white); /* provincias "a sumar": blancas sobre el lavanda de la sección, con borde gris lila */
  stroke: var(--gray-bg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill .25s var(--ease-out), stroke .25s var(--ease-out);
}
.prov.on { fill: var(--map-accent, var(--purple)); cursor: pointer; }
.prov.caba { stroke-width: 2; }
/* Solo las zonas con presencia responden al mouse: las grises quedan como dibujo (sin resaltado ni indicador).
   Con (hover: hover) para que en táctil no quede una zona pintada debajo del dedo. */
@media (hover: hover) {
  .prov.on:hover, #presencia .prov.on:hover { fill: var(--map-accent-dark, #4B2272); stroke: var(--map-accent-dark, #4B2272); }
  .prov.caba.on:hover, #presencia .prov.caba.on:hover { stroke: var(--white); }
}

.map-info { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; text-align: center; }
.map-info__name { color: var(--purple); font-size: 20px; font-weight: 600; }
.map-info__status { color: var(--muted); font-size: 14px; }

/* Mapas sin caja, directo sobre el gris de Presencia: las zonas "a sumar" van en blanco con el filete del fondo, así se
   leen sobre el gris; las zonas con presencia, en el acento de cada vista (violeta en Argentina, lima en la región). */
#presencia .prov { fill: var(--white); stroke: var(--gray-bg); }
#presencia .prov.on { fill: var(--map-accent, var(--purple)); }
/* Las zonas con presencia se ven con su color desde el primer cuadro (pedido de Brian, 09/11): sin encendido desde el
   blanco ni pasos por otro color. */
/* Presencia regional: acento lima */
/* Zona elegida o con el mouse encima: el mismo acento, más oscuro (nunca carbón: se leía como negro). */
#presencia { --map-accent-dark: #4B2272; }
.presence--lime { --map-accent: var(--lime); --map-accent-dark: #6B9A1F; }
.presence--lime .map-info__name { color: var(--ink); }
.presence--lime .prov.on { fill: var(--lime); }
@media (hover: hover) { #presencia .presence--lime .prov.on:hover { fill: var(--map-accent-dark); stroke: var(--map-accent-dark); } }
.presence--lime .checks .ico { color: var(--ink); }
.armap--region { max-width: 340px; }

/* Presencia nacional y regional: indicador con el nombre de la zona, foco sobre la zona elegida y chips.
   Todo va acotado a las dos secciones; el resto de las reglas del mapa son las de arriba. */
:is(#presencia, #presencia-regional) .prov { transition: fill .25s var(--ease-out), stroke .25s var(--ease-out), opacity .2s var(--ease-out), filter .2s var(--ease-out); }
:is(#presencia, #presencia-regional) .armap:focus { outline: none; } /* tabindex="-1": no es parada de Tab */
:is(#presencia, #presencia-regional) .prov__hit { fill: transparent; stroke: none; } /* zona de toque de CABA */
#presencia .prov.is-active { fill: var(--map-accent-dark); stroke: var(--map-accent-dark); }
#presencia .prov.caba.is-active { stroke: var(--white); }
#presencia-regional .prov.is-active { fill: var(--map-accent-dark); stroke: var(--map-accent-dark); }
/* Si se interactúa mientras las zonas se prenden, pasan directo al color final (la animación pisaba el resaltado) */
:is(#presencia, #presencia-regional) .armap.is-settled .prov.on { animation: none; }

/* Zona elegida (hover, foco, toque o chip): el resto del mapa se atenúa y desenfoca.
   .map-stage lo arma el JS alrededor del SVG, junto con el indicador. */
:is(#presencia, #presencia-regional) .map-stage { position: relative; }
:is(#presencia, #presencia-regional) .map-stage.is-focusing .prov:not(.is-active) { opacity: .3; filter: blur(1.5px); }

/* Indicador de mapa: etiqueta compacta con el nombre, línea guía y punto sobre la zona (como las etiquetas
   de los mapas de calles). El JS ubica el punto en el centro visual de la zona: fija left/top de la etiqueta
   y --tip-x (dónde cae la línea dentro de la etiqueta). Con .is-below la etiqueta va debajo del punto,
   cuando arriba la taparía la barra fija. Colores por sección con --pin-*. */
:is(#presencia, #presencia-regional) .map-pin {
  --pin-stem: 16px; /* largo de la línea guía; mismo valor que STEM en main.js */
  --pin-bg: var(--ink);
  --pin-fg: var(--white);
  --pin-dot: var(--purple);
  --pin-ring: var(--white);
  position: absolute;
  z-index: 3;
  padding: 5px 10px 6px;
  border-radius: 6px;
  background: var(--pin-bg);
  color: var(--pin-fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(42, 42, 42, .2), 0 1px 2px rgba(42, 42, 42, .16);
  transform-origin: var(--tip-x, 50%) calc(100% + var(--pin-stem));
}
/* Línea guía */
:is(#presencia, #presencia-regional) .map-pin::before {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tip-x, 50%);
  width: 2px;
  height: var(--pin-stem);
  background: var(--pin-bg);
  transform: translateX(-50%);
}
/* Punto sobre la zona */
:is(#presencia, #presencia-regional) .map-pin::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--pin-stem));
  left: var(--tip-x, 50%);
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pin-ring);
  border-radius: 50%;
  background: var(--pin-dot);
  box-shadow: 0 1px 3px rgba(42, 42, 42, .35);
  transform: translate(-50%, -50%);
}
:is(#presencia, #presencia-regional) .map-pin[hidden] { display: none; }
:is(#presencia, #presencia-regional) .map-pin.is-below { transform-origin: var(--tip-x, 50%) calc(-1 * var(--pin-stem)); }
:is(#presencia, #presencia-regional) .map-pin.is-below::before { top: auto; bottom: 100%; }
:is(#presencia, #presencia-regional) .map-pin.is-below::after { top: auto; bottom: calc(100% + var(--pin-stem)); transform: translate(-50%, 50%); }
/* Mismo criterio en los dos mapas: el indicador va en el color de acento del mapa (violeta en Argentina, lima en la
   región) con el nombre en contraste, y la zona elegida en carbón. El punto lleva aro del acento. Así el indicador
   nunca queda del mismo color que la zona que señala. */
#presencia-pais .map-pin { --pin-bg: var(--purple); --pin-fg: var(--white); --pin-dot: var(--white); --pin-ring: var(--purple); }
#presencia-regional .map-pin { --pin-bg: var(--lime); --pin-fg: var(--ink); --pin-dot: var(--ink); --pin-ring: var(--lime); }
/* Presentación del recorrido ("Argentina", "Latinoamérica"): el globo va al costado del mapa, separado, sin línea guía
   ni punto (no señala una zona), con una pestaña que apunta al mapa (.is-izq: el globo a la izquierda del mapa, la
   pestaña a la derecha). Mientras se ve, la silueta entera del país o de la región toma un halo muy suave del color de
   acento del mapa. */
:is(#presencia, #presencia-regional) .map-pin.is-pais {
  padding: 7px 14px 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  transform-origin: 0 50%;
}
:is(#presencia, #presencia-regional) .map-pin.is-pais::before {
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: translate(-45%, -50%) rotate(45deg);
}
:is(#presencia, #presencia-regional) .map-pin.is-pais::after { display: none; }
:is(#presencia, #presencia-regional) .map-pin.is-pais.is-izq { transform-origin: 100% 50%; }
:is(#presencia, #presencia-regional) .map-pin.is-pais.is-izq::before { left: auto; right: 0; transform: translate(45%, -50%) rotate(45deg); }
:is(#presencia, #presencia-regional) .map-stage .armap { transition: filter .6s var(--ease-out); }
:is(#presencia, #presencia-regional) .map-stage.is-intro .armap { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--map-accent, var(--purple)) 40%, transparent)); }
/* Entrada: la etiqueta escala desde el punto (200 ms). Solo con .anim, que ya excluye "reducir movimiento" */
.anim :is(#presencia, #presencia-regional) .map-pin { animation: pinIn .2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pinIn { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }

#presencia-regional .map-card :focus-visible { outline-color: var(--purple); }

/* Slider de presencia (Argentina / Latam). Sin JS: las dos vistas una debajo de la otra. Con JS (.is-slider): apiladas
   en la misma celda de una grilla (el alto es el de la más alta, nada salta al cambiar) y el pase de Globant: la que
   se va se apaga en .7s y la que entra sube 16px en .8s, con .15s de demora.
   Pestañas como píldoras (cambian de color, sin subrayado). Flechas a los costados del contenido, una de cada lado,
   centradas en alto sobre el mapa (--pres-arrow-y, main.js). En celular van más chicas, sobre el borde del mapa. */
.pres-slider__track { display: flex; flex-direction: column; gap: var(--section-y); min-width: 0; }
.pres-slider__bar { display: flex; justify-content: center; margin-bottom: 36px; }
.pres-slider__bar[hidden] { display: none; }
.pres-slider__stage { position: relative; }
.pres-slider__arrow[hidden] { display: none; }
.is-slider .pres-slider__stage { padding-inline: 80px; }
.pres-slider__arrow { position: absolute; top: var(--pres-arrow-y, 50%); z-index: 2; transform: translateY(-50%); }
.pres-slider__arrow--prev { left: 0; }
.pres-slider__arrow--next { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pres-slider__arrow { transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), top .45s var(--ease-out); }
}
.is-slider .pres-slider__track { display: grid; }
.is-slider .pres-slide { grid-area: 1 / 1; }
.is-slider .pres-slide:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.pres-slide:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-slider .pres-slide { transition: opacity .7s var(--ease-out), visibility 0s .7s var(--ease-out); }
  .is-slider .pres-slide.is-active { transition: opacity .8s var(--ease-out) .15s, visibility 0s var(--ease-out); }
  .is-slider .pres-slide.is-active > * { animation: presIn .8s var(--ease-out) .15s backwards; }
  .is-slider .pres-slide.is-active > .map-card { animation-delay: .25s; }
}
@keyframes presIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Título, bajada y "Ver más" de cada vista */
.presence__title { margin: 0; color: var(--purple); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.presence__lede { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.15; }
.presence__more .lead { margin-bottom: 8px; font-size: 19px; }
.presencia .carousel__btn { border-color: var(--purple); }
/* Escritorio: texto y "Ver casos de éxito" juntos, centrados en alto frente al mapa */
@media (min-width: 1024px) {
  #presencia .presence { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  #presencia .presence > .presence__text { grid-row: 2; }
  #presencia .presence > .map-card { grid-row: 1 / span 4; }
  #presencia .presence > .section-next { grid-row: 3; align-self: start; margin-top: 32px; }
}
@media (max-width: 1023px) {
  .is-slider .pres-slider__stage { padding-inline: 64px; }
}
@media (max-width: 760px) {
  .pres-slider__bar { margin-bottom: 28px; }
  .is-slider .pres-slider__stage { padding-inline: 0; }
  .pres-slider__arrow { --arrow: 40px; width: var(--arrow); height: var(--arrow); box-shadow: 0 4px 14px rgba(42, 42, 42, .18); }
  .pres-slider__arrow--prev { left: calc(-1 * var(--wrap-pad) + 4px); }
  .pres-slider__arrow--next { right: calc(-1 * var(--wrap-pad) + 4px); }
}

@media (prefers-reduced-motion: reduce) {
  :is(#presencia, #presencia-regional) .prov { transition: none; }
}

/* ---------- Casos (mini menú a la izquierda + un caso por vez) ---------- */
/* Sección clara: palabra clave y barrita del rótulo en violeta (el lima sobre blanco no llega al contraste mínimo) */
#casos .section-head .hl { color: var(--purple); }
#casos .section-head .eyebrow { color: var(--purple); }
#casos .section-head .eyebrow::before { background: var(--purple); }
.cases-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.js .cases-layout--menu { grid-template-columns: 300px minmax(0, 1fr); }
/* Menú y caso acompañan el scroll (sticky): el más bajo de los dos queda a la vista mientras se recorre el más alto,
   así no se ve un vacío debajo del caso (Sector privado tiene más clientes que alto el caso) ni debajo del menú
   mientras el caso cambia de alto. */
@media (min-width: 961px) {
  .js .cases-layout--menu > :is(.case-menu, .carousel) { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
/* Casos, minimalista: el menú y el caso van sin caja, sin sombra y sin filetes, directo sobre el fondo de la sección;
   los separa el aire. Acentos: lima en chips, barras de avance e íconos; violeta en lo elegido. */
.case-menu { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 0; border: 0; border-radius: 0; background: none; color: var(--ink); }
.case-menu[hidden] { display: none; }
.case-menu :focus-visible { outline-color: var(--purple); }
.case-menu__title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.case-menu__title .ico { flex: none; color: var(--purple); }
.case-menu__group { display: flex; flex-direction: column; gap: 10px; }
.case-menu__group[hidden] { display: none; }
/* Clientes del sector: grilla de tres columnas que crece con su contenido (sin caja con scroll ni barra). La última
   fila incompleta queda alineada a la izquierda, como el resto de la grilla. */
.case-menu__logos { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.case-menu__logos > li { min-width: 0; }
/* Logos de clientes del sector, sin caja: en gris y apenas atenuados en reposo; con el mouse suben 2 px y toman su
   color. El del caso a la vista (acompaña la rotación) queda a color, un poco más grande y con una barrita lima debajo
   que se dibuja desde el centro. Los logos de clientes ya tienen fondo transparente. */
.case-menu__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  padding: 8px 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.case-menu__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .35s var(--ease-out), opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.case-menu__logo::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transition: transform .45s var(--ease-out);
}
.case-menu__logo:hover img, .case-menu__logo:focus-visible img { filter: none; opacity: 1; transform: translateY(-2px); }
.case-menu__logo[aria-current="true"] img { filter: none; opacity: 1; transform: scale(1.06); }
.case-menu__logo[aria-current="true"]::after { transform: scaleX(1); }
.case-menu__logo:active img { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .case-menu__logo img, .case-menu__logo::after, .cinta__item img { transition: none; }
  .case-menu__logo:is(:hover, :focus-visible, [aria-current="true"], :active) img, .cinta__item:hover img { transform: none; }
}
.anim .case-menu__logo { animation: riseSm .4s var(--ease-out) both; }
.carousel__slide[hidden] { display: none; }
/* Casos: la tarjeta no se eleva, así que la pista no necesita aire arriba; sin él, el caso arranca a la misma altura
   que el menú de la izquierda */
.cases-layout .carousel__track { padding-top: 0; }
/* Cada caso con su propio alto (data-carousel-fit: main.js le da a la pista el alto del caso activo). Sin JS la fila se
   iguala sola, como antes. */
.js [data-carousel-fit] .carousel__track { align-items: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-carousel-fit] .carousel__track { transition: height .45s var(--ease-out); }
}
@media (max-width: 960px) {
  .js .cases-layout--menu { grid-template-columns: minmax(0, 1fr); }
  .case-menu__sectors { align-self: flex-start; width: min(100%, 360px); }
  .case-menu__logos { --cols: 7; }
}
@media (max-width: 760px) {
  .case-menu__logos { --cols: 5; }
}
/* Celular: los clientes del sector en una tira que se desliza de costado, sin barra (diseño propio, con bordes
   fundidos). main.js deja a la vista el logo del caso activo. */
@media (max-width: 600px) {
  .case-menu { gap: 14px; padding: 18px 0 0; }
  .case-menu__logos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    margin-inline: calc(-1 * var(--wrap-pad));
    padding: 2px var(--wrap-pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--wrap-pad);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .case-menu__logos::-webkit-scrollbar { display: none; }
  .case-menu__logos > li { flex: 0 0 92px; }
}

/* Carrusel de casos: flechas a los costados del caso, una de cada lado y centradas en alto (siguen al alto del caso
   mientras se anima); contador abajo. La pista nunca muestra scroll vertical: toma el alto del caso activo
   (data-carousel-fit) y main.js lo vuelve a medir si el contenido cambia. */
.cases-layout .carousel { container: caso / inline-size; }
.js .cases-layout .carousel { --arrow: 48px; display: grid; grid-template-columns: var(--arrow) minmax(0, 1fr) var(--arrow); column-gap: 16px; align-items: center; }
.js .cases-layout .carousel__track { grid-column: 2; grid-row: 1; overflow-y: hidden; margin-bottom: 0; padding-bottom: 0; }
.js .cases-layout .carousel__controls:not([hidden]) { display: contents; }
.js .cases-layout .carousel__btn { grid-row: 1; position: relative; z-index: 1; }
.js .cases-layout [data-carousel-prev] { grid-column: 1; }
.js .cases-layout [data-carousel-next] { grid-column: 3; }
.js .cases-layout .carousel__dots { grid-row: 2; grid-column: 2; justify-self: start; display: flex; align-items: center; gap: 14px; margin: 28px 0 0 8px; color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .js .cases-layout .carousel { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
  .js .cases-layout .carousel__track { grid-column: 1; }
  .js .cases-layout .carousel__dots { grid-column: 1; margin-left: 34px; }
  /* En celular el caso es alto: las flechas (una de cada lado) suben a la altura del logo del cliente (24 px de
     padding + mitad de los 68 px del logo), sobre el margen, donde no hay texto, y no a la mitad del caso. */
  .js .cases-layout .carousel__btn { --arrow: 38px; position: absolute; top: calc(24px + 34px); width: var(--arrow); height: var(--arrow); transform: translateY(-50%); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
  .js .cases-layout [data-carousel-prev] { left: calc(-1 * var(--wrap-pad) + 2px); }
  .js .cases-layout [data-carousel-next] { right: calc(-1 * var(--wrap-pad) + 2px); }
}

/* Caso: una sola columna con jerarquía clara y aire (pedido de Brian, 09/11).
   1. Identidad: el logo a la izquierda (caja fija de 152 × 76, así todos los casos arrancan igual) y, a su lado, el
      nombre del cliente y el sector.
   2. Servicios: las etiquetas lima en una fila debajo.
   3. "Qué hicimos": el rótulo con su ícono y la lista de proyectos numerada (o el texto, si es uno solo), con la línea
      de avance a la izquierda.
   .case-card__who es display: contents: sus hijos se ubican directo en la grilla del caso (el HTML no cambia). */
.case-card {
  position: relative;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  grid-template-areas:
    "logo name"
    "logo sector"
    "chips chips"
    "what what";
  column-gap: 28px;
  row-gap: 6px;
  align-content: start;
  min-height: 0;
  padding: 4px 8px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
}
.case-card__who { display: contents; }
.case-card__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
  width: 152px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none; /* sin caja: el logo (PNG con transparencia) va directo sobre el fondo */
}
.case-card__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.case-card__logo--text { color: var(--ink); font-size: 20px; font-weight: 700; text-align: center; }
.case-card__name { grid-area: name; align-self: end; max-width: 26ch; margin: 0; font-size: clamp(24px, 2.1vw, 30px); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.case-card__who > .eyebrow { grid-area: sector; align-self: start; margin-top: 4px; }
.case-card__who > .chips { grid-area: chips; margin-top: 22px; }
.chip--lime { display: inline-flex; align-items: center; gap: 7px; background: var(--lime); color: var(--ink); }
.chip--lime .ico { flex: none; }

.case-card__what { grid-area: what; display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 64ch; margin-top: 40px; }
.case-card__head { display: flex; align-items: center; gap: 14px; }
.case-card__head .eyebrow { white-space: nowrap; }
.case-card :focus-visible { outline-color: var(--purple); }
.case-card__name:focus:not(:focus-visible) { outline: none; } /* recibe el foco al llegar desde un logo de Clientes */
.icon-circle--lime { background: var(--lime); color: var(--ink); }
.case-card__text { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.5; }
/* Avance del caso: el contador ("01 / 17") y su barra van en una fila fija al pie del caso, alineada con su borde
   izquierdo: el contador tiene ancho fijo (cifras tabulares) y la barra, 160 px, así ninguno de los dos se mueve ni
   cambia de largo según el número. La barra se llena de lima en el tiempo total del caso a la vista (main.js le pone
   la duración y la reinicia en cada caso); se pausa con el carrusel y no está con un cliente elegido. */
.case-card__timer { display: none; }
.carousel__count { display: inline-block; flex: none; width: 7ch; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
.carousel__progress { display: inline-block; flex: none; position: relative; width: 160px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--gray-bg); }
.carousel__progress-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--lime); transform-origin: left; transform: scaleX(0); animation-timing-function: linear; animation-fill-mode: forwards; }
.carousel.is-paused .carousel__progress-fill { animation-play-state: paused; }
.carousel.is-pinned .carousel__progress { visibility: hidden; } /* oculta sin mover el contador */
@media (max-width: 600px) { .carousel__progress { width: 120px; } }

/* Cambio de caso. Salida corta y escalonada (todo sube 8 px y se funde, de arriba abajo; SALIDA_MS en main.js) y
   entrada orquestada: el logo crece apenas desde el 92 %, el nombre y el sector suben, las etiquetas llegan en ola,
   "Qué hicimos" aparece y la lista entra línea por línea desde la izquierda. Una sola curva; con "reducir movimiento"
   el cambio es directo. */
.anim .carousel .case-card.is-saliendo :is(.case-card__logo, .case-card__name, .case-card__who > .eyebrow, .chips > li, .case-card__head, .case-step, .case-card__text) { animation: casoSale .24s var(--ease-out) both; }
.anim .carousel .case-card.is-saliendo :is(.case-card__name, .case-card__who > .eyebrow) { animation-delay: .02s; }
.anim .carousel .case-card.is-saliendo :is(.chips > li, .case-card__head) { animation-delay: .04s; }
.anim .carousel .case-card.is-saliendo :is(.case-step, .case-card__text) { animation-delay: .06s; }
@keyframes casoSale { to { opacity: 0; transform: translateY(-8px); } }
@keyframes casoLogo { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes casoSube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes casoChip { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes casoLinea { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.anim .case-card:not([inert]) .case-card__logo { transform-origin: 0 50%; animation: casoLogo .7s var(--ease-out) both; }
.anim .case-card:not([inert]) .case-card__name { animation: casoSube .7s .06s var(--ease-out) both; }
.anim .case-card:not([inert]) .case-card__who > .eyebrow { animation: casoSube .6s .12s var(--ease-out) both; }
.anim .case-card:not([inert]) .chips > li { animation: casoChip .55s calc(.2s + var(--ola, 0) * .06s) var(--ease-out) both; }
.anim .case-card:not([inert]) .chips > li:nth-child(2) { --ola: 1; }
.anim .case-card:not([inert]) .chips > li:nth-child(3) { --ola: 2; }
.anim .case-card:not([inert]) .chips > li:nth-child(4) { --ola: 3; }
.anim .case-card:not([inert]) .chips > li:nth-child(n+5) { --ola: 4; }
.anim .case-card:not([inert]) .case-card__head { animation: casoSube .6s .3s var(--ease-out) both; }
.anim .case-card:not([inert]) .case-card__head .icon-circle { animation: casoLogo .55s .34s var(--ease-out) both; }
.anim .case-card:not([inert]) .case-card__text { animation: casoLinea .6s .4s var(--ease-out) both; }
.anim .case-card:not([inert]) .case-step { animation: casoLinea .55s calc(.4s + var(--linea, 0) * .07s) var(--ease-out) both; }
.anim .case-card:not([inert]) .case-step:nth-child(2) { --linea: 1; }
.anim .case-card:not([inert]) .case-step:nth-child(3) { --linea: 2; }
.anim .case-card:not([inert]) .case-step:nth-child(4) { --linea: 3; }
.anim .case-card:not([inert]) .case-step:nth-child(5) { --linea: 4; }
.anim .case-card:not([inert]) .case-step:nth-child(n+6) { --linea: 5; }

/* Varios proyectos de un mismo cliente: numerados (01, 02…), uno activo por vez, con la línea de avance lima a la
   izquierda mientras corre el carrusel */
.case-steps { display: flex; flex-direction: column; gap: 2px; counter-reset: paso; }
.case-step { position: relative; display: grid; grid-template-columns: 2.4ch minmax(0, 1fr); column-gap: 14px; padding: 10px 0 10px 18px; border-left: 3px solid var(--gray-bg); color: var(--muted); font-size: 17px; line-height: 1.5; counter-increment: paso; transition: color .3s var(--ease-out), border-color .3s var(--ease-out); }
.case-step::before { content: counter(paso, decimal-leading-zero); padding-top: .12em; color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; transition: color .3s var(--ease-out); }
.case-step[aria-current="true"] { border-left-color: var(--lime); color: var(--ink); font-weight: 600; }
.case-step[aria-current="true"]::before { color: var(--purple); }
.carousel.is-auto:not(.is-pinned) .case-step[aria-current="true"] { border-left-color: var(--gray-bg); }
.case-step__btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color var(--t-fast) var(--ease-out); }
.case-step__btn:hover { color: var(--purple); }
.case-step__bar { display: none; position: absolute; top: 0; bottom: 0; left: -3px; width: 3px; background: var(--lime); transform-origin: 50% 0; transform: scaleY(0); pointer-events: none; }
.carousel.is-auto .case-step[aria-current="true"] .case-step__bar { display: block; animation: stepbarY var(--step-ms, 3.5s) linear forwards; }
.carousel.is-paused .case-step__bar { animation-play-state: paused; }
.case-card__hint { display: none; }
/* Con un cliente elegido no hay avance automático ni barras de carga */
.carousel.is-pinned .case-step__bar, .carousel.is-pinned .case-card__timer { display: none !important; }

/* Angosto (el carrusel o la pantalla): todo en una columna, el logo arriba */
@container caso (max-width: 560px) {
  .case-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "sector" "chips" "what"; }
  .case-card__logo { margin-bottom: 14px; }
  .case-card__what { margin-top: 32px; }
}
@media (max-width: 760px) {
  .case-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "sector" "chips" "what"; padding: 24px 34px 8px; } /* 34 px: las flechas no tapan la lista */
  .case-card__logo { width: 136px; height: 68px; margin-bottom: 14px; }
  .case-card__name { font-size: 24px; }
  .case-card__who > .chips { margin-top: 18px; }
  .case-card__what { margin-top: 32px; }
  .case-card__text { font-size: 19px; }
  .case-step { padding-left: 14px; column-gap: 10px; font-size: 16px; }
}

/* ---------- Cita de Carlos (#como-trabajamos) ----------
   Frase a la izquierda con una comilla lima grande y la firma; foto vertical 4:5 a la derecha (en celular, primero la
   foto). Sin caja ni sombra: va sobre el gris de la sección. Sin foto se ve la caja con la silueta del equipo, en blanco
   para que se despegue del gris. */
.quote { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 64px; margin: 0; }
.quote__body { display: flex; flex-direction: column; align-items: flex-start; }
.quote__mark { display: block; height: .5em; color: var(--lime); font-size: 120px; font-weight: 700; line-height: .9; }
.quote__text { margin: 16px 0 28px; }
.quote__mark-end { margin-left: .06em; color: var(--lime); font-weight: 700; }
.quote__text p { max-width: 24em; margin: 0; color: var(--ink); font-size: clamp(24px, 2.3vw, 32px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
/* Firma en una sola línea: "Carlos Baldelli · CEO de Intellihelp". Grilla de barrita + texto: el nombre, el separador
   y el cargo son texto corrido de un mismo bloque (nunca tres renglones). En celular baja prolija: nombre arriba y
   cargo abajo, sin el separador. */
.quote__by { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 17px; }
.quote__firma { min-width: 0; }
.quote__name, .quote__role { white-space: nowrap; }
.quote__sep { color: var(--lime); font-weight: 700; white-space: pre; }
@media (max-width: 600px) {
  .quote__by { align-items: flex-start; }
  .quote__by::before { align-self: flex-start; margin-top: 12px; }
  .quote__sep { display: none; }
  .quote__name, .quote__role { display: block; }
}
.quote__by::before { content: ""; align-self: center; width: 32px; height: 3px; margin-right: 0; border-radius: 2px; background: var(--lime); }
.quote__name { color: var(--ink); font-size: 20px; font-weight: 700; }
.quote__role { font-weight: 600; }
.quote__photo { justify-self: end; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; }
.cita .quote__photo { background-color: var(--white); } /* en carbón, ver "Ritmo de fondos" */
.quote__photo img { object-position: 50% 20%; }
@media (max-width: 1023px) {
  .quote { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .quote__photo { order: -1; justify-self: start; max-width: 320px; }
  .quote__mark { font-size: 96px; }
}

/* ---------- Preguntas frecuentes ----------
   Diseño de la página anterior con los colores de Nico. Dos columnas desde 960 px (2/5 y 3/5): a la izquierda rótulo
   violeta y título (fijos al scrollear); a la derecha la lista, sin tarjeta, con una línea fina entre preguntas.
   Fondo blanco: alterna con el carbón de la cita y el lavanda del cierre (--faq-bg permite cambiarlo).
   Signo +/–: dos barras de 2 px dibujadas con CSS dentro de una caja de 24 px (no un carácter de la fuente, que
   nunca queda centrado igual): siempre exactamente al centro. Al abrir, la barra vertical gira y se acuesta sobre la
   horizontal (+ → –).
   Las páginas internas (/diagnostico-sin-cargo/) usan los nombres anteriores (.faq-layout, .faq-layout__intro, .faq):
   van en los mismos selectores para que se vean igual. */
.faq-sec { --faq-bg: var(--white); background: var(--faq-bg); }
:root { --faq-line: rgb(68 68 68 / .2); }
:is(.faq__grid, .faq-layout) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
:is(.faq__head, .faq-layout__intro) { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.faq__h2 { max-width: 14ch; }
:is(.faq__list, .faq) { min-width: 0; border-top: 1px solid var(--faq-line); }
.faq__item { border-bottom: 1px solid var(--faq-line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding: 20px 0;
  color: var(--ink);
  font-size: clamp(18px, 16.8px + .3vw, 20px);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
/* En celular el "+" deja libre la columna del botón de WhatsApp (abajo a la derecha, siempre a la vista) */
@media (max-width: 760px) { .faq__q { padding-right: 60px; } }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover, .faq__item[open] > .faq__q { color: var(--purple); }
.faq__q:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 2px; }
.faq__sign { position: relative; flex: none; width: 24px; height: 24px; color: var(--purple); }
.faq__sign::before,
.faq__sign::after { content: ""; position: absolute; top: 11px; left: 4px; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
.faq__sign::after { transform: rotate(90deg); transition: transform .4s var(--ease-out); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a { padding: 0 48px 24px 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: .75em; }
@media (min-width: 960px) {
  :is(.faq__grid, .faq-layout) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
  :is(.faq__head, .faq-layout__intro) { position: sticky; top: calc(var(--header-h) + 32px); }
}
@media (max-width: 600px) {
  .faq__a { padding-right: 0; }
}
/* Apertura: alto y opacidad, donde el navegador sabe interpolar hasta height: auto; en el resto abre al instante */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq__item { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: block-size .4s var(--ease-out), opacity .3s var(--ease-out), content-visibility .4s allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* ---------- Cierre "Agendá una reunión" (#agenda) ----------
   Card carbón sobre el gris de la sección: a la izquierda el título y las dos frases, a la derecha el botón a
   /diagnostico-sin-cargo/ y WhatsApp. */
.cta-card.closing { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 32px 64px; padding: clamp(32px, 5vw, 64px); }
.closing__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.closing .cta-card__title { font-size: var(--h2); }
.closing__free { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--white); font-size: 19px; font-weight: 600; }
.closing__free .ico { flex: none; color: var(--lime); }
.closing__lead { max-width: 34em; margin: 0; color: var(--lavender); font-size: 20px; line-height: 1.55; }
.closing__lead .hl { color: var(--lime); font-weight: 600; }
.closing__actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.closing__actions .btn { width: 100%; }
.closing__wa { gap: 10px; }
.closing__wa .ico { flex: none; }
@media (max-width: 860px) {
  .cta-card.closing { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Agenda del CRM (CTA final de la página de diagnóstico) ---------- */
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.contact__intro { display: flex; flex: 1 1 360px; flex-direction: column; gap: 20px; min-width: 0; }
.contact__channels { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; font-size: 16px; }
.contact__channels li { display: flex; align-items: center; gap: 10px; }
.contact__channels .ico { flex: none; color: var(--ink); }
.contact__mail { color: var(--ink); text-decoration: none; }
.contact__mail:hover { color: var(--purple); }
.contact__address { color: var(--muted); font-style: normal; }

.cta-card { display: flex; flex: 1 1 400px; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding: 40px 36px; border-radius: var(--radius); }
.cta-card__title { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.15; }
.cta-card__text { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.6; }

/* ---------- Agenda del CRM y formulario de consulta (card carbón de #agenda) ----------
   Los mismos materiales de la card: carbón con letras blancas, texto secundario lila y lima como relleno (botón,
   círculo, elegido) y nunca como texto. Superficies internas en #333 con filete #4A4A4A. Campos blancos con letra
   carbón y foco con el contorno lima de .card-dark. Sin JS se ve solo el formulario de consulta. */
#agenda .contact { align-items: flex-start; }
#agenda .agenda-panel { flex: 1.25 1 440px; }
#agenda .agenda-panel { scroll-margin-top: calc(var(--header-h) + 16px); } /* destino de los CTA en celular (js/agenda.js) */
.agenda-panel [hidden] { display: none !important; }
.agenda-panel > :is(.agenda-crm, .agenda-form, .agenda-done) { align-self: stretch; }
.agenda-panel :focus:not(:focus-visible) { outline: none; }
#agenda-titulo:focus-visible, .agenda-crm__titulo:focus-visible, .agenda-crm__elegido-texto:focus-visible,
.agenda-done:focus-visible, .agenda-status--nota:focus-visible { outline-offset: 4px; border-radius: 4px; }
/* El texto de la columna izquierda acompaña a la card mientras se completa (solo con dos columnas) */
@media (min-width: 961px) {
  #agenda .contact__intro { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* Paso 1: día y hora */
.agenda-crm, .agenda-crm__paso { display: flex; flex-direction: column; gap: 16px; }
.agenda-crm__titulo { margin: 8px 0 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.agenda-crm__sub, .agenda-crm__alt { margin: 0; color: var(--lavender); font-size: 15px; line-height: 1.55; }
.agenda-crm__sub { margin-top: -8px; }
.agenda-crm__alt a, .agenda-form__legal a, .agenda-form__check a { color: var(--white); font-weight: 600; transition: color var(--t-fast) var(--ease-out); }
.agenda-crm__alt a:hover, .agenda-form__legal a:hover, .agenda-form__check a:hover { color: var(--lavender); }

.agenda-crm__nav { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.agenda-crm__rango { margin: 0; font-size: 16px; font-weight: 600; text-align: center; }
.agenda-crm__flecha, .agenda-crm__dia, .agenda-crm__hora {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
  color: var(--white);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-lift) var(--ease-out);
}
.agenda-crm__flecha { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.agenda-crm__flecha:disabled { cursor: default; opacity: .35; }
.agenda-crm__dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 78px; }
.agenda-crm__dia { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 2px; line-height: 1.1; }
.agenda-crm__dia-semana, .agenda-crm__dia-mes { color: var(--lavender); font-size: 13px; }
.agenda-crm__dia-num { font-size: 24px; font-weight: 700; }
.agenda-crm__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.agenda-crm__legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 600; }
.agenda-crm__legend::first-letter { text-transform: uppercase; }
.agenda-crm__horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; min-height: 48px; }
.agenda-crm__hora { min-height: 48px; padding: 8px 4px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-crm__flecha:not(:disabled):hover, .agenda-crm__dia:hover, .agenda-crm__hora:hover { border-color: var(--lavender); }
/* Elegido: relleno lima con letra carbón, como el botón principal */
.agenda-crm__dia[aria-pressed="true"], .agenda-crm__hora[aria-pressed="true"] { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.agenda-crm__dia[aria-pressed="true"] :is(.agenda-crm__dia-semana, .agenda-crm__dia-mes) { color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .agenda-crm__dia:hover, .agenda-crm__hora:hover { transform: translateY(-2px); }
}
/* Mientras llegan los horarios: el texto y un anillo que gira (sin giro con "reducir movimiento") */
.agenda-crm__cargando { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; margin: 0; color: var(--lavender); font-size: 15px; }
.agenda-crm__cargando::before { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid var(--lime); border-right-color: transparent; border-radius: 50%; }
@keyframes agendaSpin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: no-preference) {
  .agenda-crm__cargando::before { animation: agendaSpin .8s linear infinite; }
}
.agenda-crm[data-estado="cargando"] :is(.agenda-crm__nav, .agenda-crm__dias) { visibility: hidden; }

/* Paso 2: el horario elegido arriba de los datos, con el botón para cambiarlo */
.agenda-crm__elegido { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--ink-2); }
.agenda-crm__elegido-texto { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--lavender); font-size: 14px; line-height: 1.4; }
.agenda-crm__elegido-texto strong { color: var(--white); font-size: 17px; }
.agenda-crm__elegido-texto strong::first-letter { text-transform: uppercase; }
.agenda-crm__cambiar { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--white); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: color var(--t-fast) var(--ease-out); }
.agenda-crm__cambiar:hover { color: var(--lavender); }
@media (min-width: 520px) {
  .agenda-crm__elegido { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agenda-crm__cambiar { grid-column: auto; }
}

/* Campos (los dos formularios) */
.agenda-form { display: flex; flex-direction: column; gap: 16px; }
.agenda-form__nota { margin: 0; color: var(--lavender); font-size: 14px; }
.agenda-form__req { color: var(--lavender); font-weight: 700; }
.agenda-form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.agenda-form__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agenda-form__label { font-size: 15px; font-weight: 600; }
.agenda-form__opc { color: var(--lavender); font-weight: 400; }
.agenda-form__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--white);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px: el celular no hace zoom al enfocar */
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.agenda-form__input::placeholder { color: var(--muted); opacity: .75; }
.agenda-form__input[aria-invalid="true"] { border-color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.agenda-form__textarea { min-height: 96px; resize: none; line-height: 1.5; } /* sin el tirador nativo de tamaño */
.agenda-form__error { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--white); font-size: 14px; line-height: 1.4; }
.agenda-form__error::before { content: "!"; display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; transform: translateY(3px); }
.agenda-form__check { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; font-size: 15px; line-height: 1.5; }
.agenda-form__check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lime); cursor: pointer; }
.agenda-form__check + .agenda-form__error { margin-top: -8px; padding-left: 34px; }
.agenda-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agenda-form__enviar { align-self: flex-start; }
.agenda-form__enviar[aria-disabled="true"] { cursor: progress; opacity: .7; }
.agenda-form__legal { margin: 0; color: var(--lavender); font-size: 13px; line-height: 1.55; }

/* Avisos (role="status"): vacíos no ocupan lugar */
.agenda-status:empty { display: none; }
.agenda-status { margin: 0; padding: 12px 14px; border-left: 3px solid var(--lime); border-radius: 4px; background: var(--ink-2); color: var(--white); font-size: 15px; line-height: 1.5; }
.agenda-status a { color: var(--white); font-weight: 700; }

/* Paso 3 y gracias de la consulta */
.agenda-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--ink-2); }
.agenda-done__titulo { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.agenda-done__texto { margin: 0; color: var(--lavender); font-size: 16px; line-height: 1.6; }
.agenda-done__texto strong { color: var(--white); }

/* Cambio de paso: entrada corta (main.js no interviene; la clase la pone js/agenda.js solo con movimiento) */
.anim .is-entering { animation: riseSm .45s var(--ease-out) both; }

@media (max-width: 600px) {
  #agenda .agenda-panel { padding: 32px 20px; }
  .agenda-form__fila { grid-template-columns: minmax(0, 1fr); }
  .agenda-form__enviar { align-self: stretch; }
  .agenda-crm__dias { gap: 6px; }
  .agenda-crm__dia-num { font-size: 20px; }
  .agenda-crm__horas { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ---------- Footer ---------- */
/* Pie en blanco (reunión de octubre 2026) */
.site-footer { padding: 48px 0 24px; border-top: 1px solid var(--gray-bg); background: var(--white); color: var(--ink); }
.site-footer a { color: var(--ink); font-size: 17px; text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.site-footer a:hover { color: var(--purple); }
.footer__inner { display: flex; flex-direction: column; gap: 32px; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.footer__about { display: flex; flex: 2 1 280px; flex-direction: column; gap: 12px; min-width: 0; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { display: block; width: auto; height: 44px; border-radius: 6px; }
.footer__tag { color: var(--muted); font-size: 12px; line-height: 1.15; letter-spacing: .04em; }
.footer__text { max-width: 360px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.footer__col { display: flex; flex: 1 1 160px; flex-direction: column; gap: 10px; min-width: 0; }
.footer__col--wide { flex-basis: 200px; }
.footer__address { color: var(--muted); font-size: 15px; font-style: normal; }
.footer__bottom a { margin-left: 10px; font-size: inherit; font-weight: 600; text-decoration: none; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-bg);
  color: var(--muted);
  font-size: 13px;
}
/* El WhatsApp flotante (60 px, abajo a la derecha) no tiene que tapar el último renglón del pie al llegar al final.
   Desde 1280 px el renglón termina antes de donde está el botón; más angosto, se reserva su alto debajo del texto. */
@media (max-width: 1279px) {
  .footer__bottom { padding-bottom: 76px; }
}

/* =========================================================
   Animaciones
   Un solo vocabulario para toda la página, con la curva --ease-out y solo transform y opacity:
   - rise: sube 26px en .9s, como en el original (bloques, tarjetas, CTA). riseSm: 14px (hitos y filas chicas).
   - focusIn: títulos; sube 16px con una escala mínima.
   - pop: íconos y cifras, desde scale(.4) como en el original. popSoft (.86) queda para piezas chicas que se repiten
     (logos de casos, puntos de la línea de tiempo).
   - float: los íconos de Servicios y Soluciones flotan 6px después de entrar, como en el original.
   - fadeIn: grillas de logos, que aparecen en su lugar.
   Cada elemento aparece una sola vez (main.js deja de observarlo al mostrarlo). Dentro de una sección el orden es
   rótulo, título, bajada, tarjetas y al final el CTA o el próximo paso. No se anima el header, el pie ni los párrafos
   dentro de tarjetas.
   ========================================================= */
@keyframes rise    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes riseSm  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes focusIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popSoft { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes pop     { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes stepbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stepbarY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes heroMedia { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes histRing { from { stroke-dashoffset: 75.4; } to { stroke-dashoffset: 0; } }

.ico { transform-box: fill-box; transform-origin: center; }

/* Hero: primero aparece el video; el texto entra después, con las demoras de data-d (toda la entrada en ~1,6 s).
   Las dos líneas del título y la bajada entran con focusIn; el resto, con rise. */
.anim .hero__media { animation: heroMedia 1.4s var(--ease-out) both; }
/* H1 y bajada: se pintan desde el primer cuadro (son el LCP). Su entrada es solo CSS, sin esperar a main.js, y nunca
   arranca en opacidad 0: suben 18px desde un 35 % de opacidad. Con la animación de carga (.m-hero-tarde, la pone
   js/carga.js) la entrada se corre para que se vea mientras sale el telón (a los 0,7 s); el texto ya está debajo. */
@keyframes heroLine { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.anim .hero__line { animation: heroLine 1s var(--ease-out) .05s backwards; }
.anim .hero__line + .hero__line { animation-delay: .15s; }
.anim .hero__lead { animation: heroLine var(--t-focus) var(--ease-out) .3s backwards; }
.anim.m-hero-tarde .hero__line { animation-delay: .72s; }
.anim.m-hero-tarde .hero__line + .hero__line { animation-delay: .82s; }
.anim.m-hero-tarde .hero__lead { animation-delay: .97s; }
/* Rótulo, botones, nota y cifras: entrada escalonada (data-d), contada desde que sale el telón (main.js, alAbrir). */

/* Estado previo al revelado. Solo aplica con `.anim` en <html>, que se agrega
   desde <head> cuando hay IntersectionObserver y no se pidió reducir movimiento. */
.anim .rv:not(.show) { opacity: 0; transform: translateY(26px); }
.anim .rv:not(.show) :is(.ico, .num):not(button .ico) { opacity: 0; transform: scale(.4); }
.anim #historia .rv:not(.show) .hist__ring-arc { stroke-dashoffset: 75.4; }
.anim #historia .rv:not(.show) .hist__ring-dot,
.anim #historia .hist__item--same.rv:not(.show) .hist__node { opacity: 0; transform: scale(.86); }

/* Revelado. --rv-d es la demora de cada elemento (data-d o el escalonado que calcula main.js).
   `backwards` (no `both`): al terminar, el elemento vuelve a sus estilos y el hover de .card-h funciona. */
.rv.show { animation: rise var(--t-in) var(--ease-out) var(--rv-d, 0s) backwards; }

/* Encabezados de sección (.rv-seq: rótulo, título, bajada y lo que siga). El contenedor no se mueve: entran sus
   hijos en orden, así el título no viaja junto con el rótulo. --seq se hereda y corre también los íconos de adentro. */
.anim .rv-seq.rv:not(.show) { opacity: 1; transform: none; }
.anim .rv-seq.rv:not(.show) > * { opacity: 0; }
.rv-seq.rv.show { animation: none; }
.rv-seq.show > * { animation: rise var(--t-in) var(--ease-out) calc(var(--rv-d, 0s) + var(--seq, 0s)) backwards; }
.rv-seq.show > :nth-child(2) { --seq: var(--stagger); }
.rv-seq.show > :nth-child(3) { --seq: .2s; }
.rv-seq.show > :nth-child(n+4) { --seq: .3s; }
.rv-seq.show > .section-title { animation-name: focusIn; animation-duration: var(--t-focus); }

/* Logos (clientes y socios): aparecen en su lugar, sin subir */
.anim :is(.cinta, .slots-groups).rv:not(.show) { transform: none; }
:is(.cinta, .slots-groups).rv.show { animation-name: fadeIn; animation-duration: .6s; }
/* Hitos de la línea de tiempo: más cortos, cada uno al entrar */
#historia .hist__item.rv.show { animation-name: riseSm; animation-duration: .6s; }
/* CTA y próximo paso: siempre después del contenido de la sección */
:is(.section-cta, .section-next).rv.show { animation-delay: .4s; }

/* Íconos y cifras dentro de un bloque revelado: entran después de su bloque y el trazo se dibuja */
.rv.show :is(.ico, .num):not(button .ico) { animation: pop .6s var(--ease-out) calc(var(--rv-d, 0s) + var(--seq, 0s) + .2s) both; }
/* Íconos de Servicios y Soluciones: pop y trazo; después quedan quietos y centrados en su círculo (sin flotación) */
.rv.show .svc-ico { animation: pop .6s var(--ease-out) calc(var(--rv-d, 0s) + .2s) both; }
.rv.show .ico:not(button .ico) :is(path, circle, rect, ellipse) { stroke-dasharray: 64; stroke-dashoffset: 64; animation: draw .8s var(--ease-out) calc(var(--rv-d, 0s) + var(--seq, 0s) + .25s) forwards; }
/* Casos: cada tarjeta tiene su propia entrada (ver "Casos"); al revelar el bloque no se animan los íconos de las 39
   tarjetas a la vez, solo sube el carrusel */
#casos .rv.show .case-card :is(.ico, .num) { animation: none; }
#casos .rv.show .case-card .ico :is(path, circle, rect, ellipse) { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
/* Historia: el arco del anillo se dibuja y después aparece el centro; en hitos del mismo año, aparece el punto */
#historia .rv.show .hist__ring-arc { animation: histRing 1.1s var(--ease-out) .15s both; }
#historia .rv.show .hist__ring-dot { animation: popSoft .5s var(--ease-out) .9s both; }
#historia .rv.show.hist__item--same .hist__node { animation: popSoft .5s var(--ease-out) .2s both; }
/* Cuadrado lima de la cifra grande: aparece cuando el número ya entró */
.anim #historia .rv-seq:not(.show) .hist__sq { opacity: 0; }
#historia .rv-seq.show .hist__sq { animation: pop .6s var(--ease-out) calc(var(--rv-d, 0s) + .7s) both; }


/* Apertura suave de los desplegables donde el navegador lo soporta */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .more::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
    }
    .more[open]::details-content { block-size: auto; }
    /* Servicios y Soluciones: el desplegable que se cierra arriba del que se abre lo hace sin transición (main.js) */
    :is(#servicios, #soluciones) .more.is-snap::details-content { transition: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-step__bar, .hero__down, .svc-ico { animation: none; transition: none; }
  .faq__sign::after { transition: none; }
  .cinta__item img, .cinta__cue, .seg__btn, .pres-slider__arrow, .case-menu__logo { transition: none; }
  .btn, .btn::after, .btn .arr, .next-link .arr, .card-h, .card-h::after, .wa-float, .more__chev, .faq__q, .slot img, .member__photo img { transition: none; }
}

/* ---------- Pantallas táctiles chicas: todo lo que se toca mide al menos 44 px ----------
   Celulares en vertical (hasta 600 px) y en horizontal (hasta 430 px de alto). Los puntos de los carruseles pasan a ser
   solo indicadores (main.js los saca del orden de Tab): se navega con las flechas y deslizando. */
@media (max-width: 600px), (max-height: 430px) and (pointer: coarse) {
  .more__btn { min-height: 44px; }
  .next-link { min-height: 44px; }
  .seg__btn, .seg--fill .seg__btn { min-height: 44px; }
  .cl-rubro { min-height: 46px; }
  .carousel__dot { pointer-events: none; }
  .js :is(#servicios, #soluciones) .carousel { --arrow: 44px; }
  .js :is(#servicios, #soluciones) .carousel__btn, .js .cases-layout .carousel__btn { --arrow: 44px; width: 44px; height: 44px; }
  .pres-slider__arrow { --arrow: 44px; }
  .site-footer a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .case-step { padding-block: 0; }
  .case-step__btn { min-height: 44px; padding-block: 9px; }
  .nf-links a, .nav-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .legal-toc a { min-height: 44px; align-content: center; }
}

@media print {
  .wa-float, .carousel__controls { display: none; }
  .anim .rv:not(.show), .anim .rv:not(.show) * { opacity: 1 !important; transform: none !important; }
  .anim #historia .rv:not(.show) .hist__ring-arc { stroke-dashoffset: 0 !important; }
}

/* =========================================================
   Páginas internas (/diagnostico-sin-cargo/, /postulate/ y las que se sumen)
   - .page-head: encabezado con rótulo, título grande y bajada.
   - .page-body: el cuerpo, sobre blanco.
   - .prose: texto que viene del editor (párrafos, títulos, listas, citas, imágenes y tablas) con la tipografía del sitio.
   - .post-list: listado simple de notas (respaldo; Novedades tiene su propia plantilla).
   ========================================================= */
.page-head { padding: calc(var(--section-y) * .8) 0 0; background: transparent; }
.page-head .section-head { margin-bottom: 0; }
.page-head + .page-body { padding-top: 48px; }

.prose { max-width: 760px; color: var(--ink); font-size: 18px; line-height: 1.7; }
.prose > * { margin: 0 0 1.1em; }
.prose > :last-child { margin-bottom: 0; }
.prose :is(h2, h3, h4) { margin: 1.8em 0 .6em; font-weight: 700; line-height: 1.2; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 20px; }
.prose a { color: var(--purple); font-weight: 600; transition: color var(--t-fast) var(--ease-out); }
.prose a:hover { color: var(--ink); }
.prose :is(ul, ol) { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--purple); }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--lime); color: var(--muted); font-size: 20px; }
.prose img, .prose figure { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.prose hr { border: 0; border-top: 1px solid var(--gray-bg); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--gray-bg); text-align: left; }
.prose code { padding: 2px 6px; border-radius: 4px; background: var(--lavender); font-size: .9em; }
.page-links { display: flex; gap: 10px; margin-top: 32px; }

.post-list { display: flex; flex-direction: column; }
.post-list__item { padding: 28px 0; border-bottom: 1px solid var(--gray-bg); }
.post-list__item:first-child { border-top: 1px solid var(--gray-bg); }
.post-list__date { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
.post-list__title { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; }
.post-list__title a { text-decoration: none; }
.post-list__title a:hover { color: var(--purple); }
.post-list__excerpt { margin: 0; color: var(--muted); line-height: 1.6; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 40px; font-weight: 600; }
.nav-links a { color: var(--purple); }
.nav-links .current { color: var(--ink); }

.links-404 { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; font-size: 19px; }