/* =========================================================
   Intellihelp Novedades — estilos comunes con el sitio principal
   Subconjunto de TEMPLATE-NICO/css/styles.css: fuente, tokens, base, fondo vivo, tipografía, botones, header, pie, WhatsApp
   flotante, encabezados de pantalla, texto de las notas (.prose), card de cierre y revelados. Las reglas están
   copiadas tal cual (mismos valores y la misma curva --ease-out) para que el header y el pie se vean idénticos; lo
   propio del blog va en blog.css. No se carga el CSS de la home (carruseles, mapas, casos, equipo...).
   Si cambia algo del header o del pie en styles.css, se copia acá igual.
   ========================================================= */

/* ---------- 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: lavanda en todo el sitio, con un brillo de marca suave detrás (ver "Fondo del sitio"); las secciones alternan
   lavanda con toque y lavanda liso (.bg-white / .bg-gray); barra superior carbón y pie blanco. Cards oscuras
   (.card-dark) en carbón con letras blancas.
   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 que el sitio principal (TEMPLATE-NICO/css/styles.css): el H1 de cada pantalla es lo
     más grande y los títulos de sección quedan un escalón abajo. */
  --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);
}

a { color: var(--ink); }
a:hover { color: var(--ink); }
/* Ningún enlace lleva subrayado, en ningún estado (regla del sitio). `:root a` pesa más que el
   `a:where(:not(.wp-element-button)) { text-decoration: underline }` de los estilos globales de WordPress. Los enlaces se
   distinguen por color y peso. */
:root a, :root a:hover, :root a:focus, :root a:visited { text-decoration: none; }
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; }

/* ---------- Nada nativo del navegador a la vista ----------
   Barra de desplazamiento de la página con los colores del sitio (violeta sobre lavanda, como /diagnostico-sin-cargo/),
   sin el resaltado gris al tocar en celular y sin la "×" ni los adornos nativos del campo de búsqueda (el campo tiene
   su propio diseño en blog.css). Tampoco se subraya nada: ni enlaces ni abreviaturas. */
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; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }

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

/* .screen-reader-text es la clase que usa WordPress (por ejemplo, en el título oculto de la paginación). */
.sr-only,
.screen-reader-text {
  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; }
/* ---------- 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.
   Copia de TEMPLATE-NICO/css/styles.css; en el blog main.js pone las capas en las secciones claras (listado, cuerpo del
   404, notas relacionadas, cierre y pie). Si cambia allá, se copia acá igual.
   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); } }

.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); } /* el H1 del listado, las categorías y la página de error */

.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 otra pantalla. Sin subrayado (ni fijo ni animado), igual que en el sitio
   principal: se distingue por el peso 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; }
.next-link { transition: color var(--t-fast) var(--ease-out); }
.next-link:hover { color: var(--purple); }
.next-link .arr { display: inline-block; flex: none; transition: transform var(--t-fast) var(--ease-out); } /* avance de la flecha: ver Componentes */
.section-cta .next-link { flex-basis: 100%; }
/* ---------- 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); }
.site-footer .eyebrow--lime { color: var(--muted); }

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

/* ---------- 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(--white); color: var(--ink); font-size: 15px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover .arr, .next-link:hover .arr { transform: translateX(4px); }
}


/* Card del cierre: carbón, letras blancas, acentos lima */
.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(--white); /* sobre el fondo lavanda del sitio, el círculo va en blanco */
  color: var(--purple);
}
.icon-circle--sm { width: 52px; height: 52px; }

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


/* ---------- 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. En la home main.js lo sube lo justo (--wa-lift) si tapa un control chico; el blog no tiene esos
   controles y no lo define (queda en 0), pero comparte la regla para que el componente sea el mismo. */
.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; }
}
.wa-float.is-oculto { opacity: 0; pointer-events: none; }
/* 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 (header.php). Copiado tal cual de
   TEMPLATE-NICO/css/styles.css: si cambia allá, se copia acá igual.
   - 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, .post-layout { 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; color: var(--white); text-decoration: none; }
.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);
  }
  .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: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .brand { transition: background-color .2s linear; }
}

/* Panel del menú en celulares en horizontal (por ejemplo 667 × 375): el panel mide unos 420 px y la barra es fija, así
   que si no entra en la pantalla se desplaza adentro y el botón "Agendá reunión" sigue al alcance. Cuando entra, no
   cambia nada. */
@media (max-width: 1100px) {
  .js .nav { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Pantallas táctiles chicas: todo lo que se toca mide al menos 44 px ----------
   Mismo criterio que el sitio principal (celulares en vertical hasta 600 px y en horizontal hasta 430 px de alto),
   con las piezas propias del blog. Solo crece el área tocable: el aspecto no cambia. */
@media (max-width: 600px), (max-height: 430px) and (pointer: coarse) {
  .brand { min-height: 44px; }
  .next-link { min-height: 44px; }
  .site-footer a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .post-filter__item { min-height: 44px; }
  .post-hero__crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .post-end__tags .chip { display: inline-flex; align-items: center; min-height: 44px; }
  .post-pager .page-numbers:not(.prev):not(.next) { min-width: 44px; }
}

/* ---------- Cierre "Agendá una reunión" ----------
   Card carbón sobre gris: a la izquierda el título y las dos frases, a la derecha el botón a /diagnostico-sin-cargo/
   y WhatsApp. En el blog es el cierre del listado y de cada nota (template-parts/blog/cta.php). */
.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); }
}

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

/* ---------- 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 (las mismas de la home)
   Copia del bloque "Animaciones" de TEMPLATE-NICO/css/styles.css (lo que usa el blog) y de los bloques 5a y 8 de
   css/motion.css (cierre que se expande e íconos que levitan). Detalle en TEMPLATE-NICO/README-movimiento.md, sección
   14. Si cambian allá, se copian acá igual.
   Un solo vocabulario, con la curva --ease-out y solo transform y opacity (más `translate` suelto en la levitación):
   - rise: sube 26px en .9s (bloques, tarjetas, CTA). riseSm: 14px (filas chicas).
   - focusIn: títulos; sube 16px con una escala mínima.
   - pop: íconos, desde scale(.4); el trazo del ícono se dibuja (draw).
   - fadeIn: la foto de la nota, que aparece en su lugar.
   Cada elemento aparece una sola vez (main.js deja de observarlo al mostrarlo) y recién cuando empieza a abrirse el
   telón de la carga (ith:intro-salida). Dentro de un bloque el orden es rótulo, título, bajada, tarjetas y al final el
   CTA o el próximo paso. No se anima el header ni el pie. Todo cuelga de `.anim` en <html> (no se pone con "reducir
   movimiento": todo queda visible y quieto).
   ========================================================= */
@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 fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

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

/* 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) { opacity: 0; transform: scale(.4); }

/* 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 los hover funcionan. */
.rv.show { animation: rise var(--t-in) var(--ease-out) var(--rv-d, 0s) backwards; }

/* Encabezados (.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; }
/* El H1 de la nota (.post-hero__title) es el título de su encabezado: entra igual que .section-title. */
.rv-seq.show > :is(.section-title, .post-hero__title) { animation-name: focusIn; animation-duration: var(--t-focus); }

/* CTA y próximo paso: siempre después del contenido */
:is(.section-cta, .section-next).rv.show { animation-delay: .4s; }

/* Íconos dentro de un bloque revelado: entran después de su bloque y el trazo se dibuja */
.rv.show :is(.ico, .num) { animation: pop .6s var(--ease-out) calc(var(--rv-d, 0s) + var(--seq, 0s) + .2s) both; }
.rv.show .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; }
/* Íconos rellenos (LinkedIn, WhatsApp): no tienen trazo que dibujar, solo el pop */
.rv.show .ico--fill :is(path, circle, rect, ellipse) { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Cierre ("Agendá una reunión"): el bloque oscuro se expande a su lugar desde el 94 %, antes que su contenido
     (motion.css, 5a). */
  .anim .cta-card.closing.rv-seq:not(.show) { opacity: 0; transform: scale(.94); }
  .anim .cta-card.closing.rv-seq.show { animation: mGrow .9s var(--ease-out) var(--rv-d, 0s) backwards; }

  /* Íconos que levitan (motion.css, 8): el círculo del ícono (con el ícono centrado adentro) sube y baja 7 px a cada
     lado de su lugar en un ciclo de 3,6 s con curva senoidal. `translate` suelto: no pisa el transform de las entradas
     ni de los hover y no ocupa lugar en el layout. En cada grupo la ola va ordenada (0, 0,45, 0,9 y 1,35 s de desfase).
     En el blog levitan el calendario del cierre, el ícono del aviso sin notas y los círculos de "Compartir" (LinkedIn,
     WhatsApp y correo). */
  .anim .closing__text > .icon-circle,
  .anim .post-empty > .icon-circle,
  .anim .post-share__btn {
    animation: mLevita 3.6s cubic-bezier(.37, 0, .63, 1) var(--lev-d, 0s) infinite;
  }
  .anim .post-share__list > li:nth-child(2) > .post-share__btn { --lev-d: -.45s; }
  .anim .post-share__list > li:nth-child(3) > .post-share__btn { --lev-d: -.9s; }
  .anim .post-share__list > li:nth-child(4) > .post-share__btn { --lev-d: -1.35s; }
}
@keyframes mGrow   { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mLevita { 0%, 100% { translate: 0 -7px; } 50% { translate: 0 7px; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .btn .arr, .next-link .arr, .wa-float { transition: none; }
  /* Los íconos quedan quietos en su lugar. */
  .icon-circle, .post-share__btn { animation: none !important; translate: none !important; }
}

@media print {
  .wa-float, .nav-toggle { display: none; }
  .anim .rv:not(.show), .anim .rv:not(.show) * { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Pantallas del blog (encabezados, texto de las notas, páginas sueltas, 404)
   - .page-head: encabezado con rótulo, título grande y bajada.
   - .page-body: el cuerpo, sobre el fondo lavanda del sitio.
   - .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 de index.php; el listado real está en blog.css).
   ========================================================= */
.page-head { padding: calc(var(--section-y) * .8) 0 0; background: transparent; }
.page-head .section-head { margin-bottom: 0; }
/* Encabezado sobre lavanda: familia violeta, como las secciones claras del sitio principal (.section--alt). El lima como
   texto queda solo sobre carbón (cierre); sobre lavanda no llega al contraste mínimo. */
.page-head .eyebrow { color: var(--purple); }
.page-head .eyebrow::before { background: var(--purple); }
.page-head .hl { color: var(--purple); }
.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; }
/* Enlaces dentro del texto de la nota: violeta y en negrita, sin subrayado (como el resto del sitio); al pasar el mouse
   cambian a carbón. */
.prose a { color: var(--purple); font-weight: 600; text-decoration: none; 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; }