/* ==========================================================================
   HolaHello v6 — Capa de experiencia (UX/UI)
   Se carga al final en todas las páginas. No cambia textos ni estructura:
   suma tipografía fluida, estados, movimiento sobrio y ayudas de navegación.
   Todo el movimiento se apaga con "Reducir movimiento" del sistema.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Base */
html { scroll-padding-top: 96px; scroll-behavior: auto !important; }
/* Suave solo después de cargar: al llegar con #seccion desde otra página el salto es instantáneo */
@media (prefers-reduced-motion: no-preference) { html.ux-smooth { scroll-behavior: smooth !important; } }
::selection { background: #E56061; color: #0E0E10; }
:focus-visible { outline: 2px solid #E56061; outline-offset: 3px; border-radius: 6px; }
#services :focus-visible { outline-color: #B8393C; }
[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- 2. Tipografía editorial
   Tamaños fluidos (sin saltos entre celular, tablet y desktop) y títulos balanceados. */
.h1 { font-size: clamp(38px, 1.2rem + 3.9vw, 72px); line-height: 1.1; }
.h2 { font-size: clamp(32px, 1.25rem + 2.7vw, 56px); line-height: 1.14; }
.h2--xl { font-size: clamp(36px, 1.3rem + 3.2vw, 64px); line-height: 1.12; }
h1, h2, h3, .work-card__title, .case-card__title, .slide__quote { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.lead { max-width: 68ch; }
.hero__sub, .footprint__text .lead { margin-inline: auto; }
.footprint__text .lead, .gteam .lead { margin-inline: 0; }

/* ---------------------------------------------------------------- 3. Header
   Siempre visible. */
.filter-bar { transition: box-shadow .3s; }
.filter-bar.is-stuck { box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .8); }
/* Sección activa en el menú de la Home */
.hh5-nav a.is-active { color: #fff; }
.hh5-nav a.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #E56061;
}
.hh5-nav a { position: relative; }

/* ---------------------------------------------------------------- 4. Hero: acceso por público */
.audience { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 32px; }
.audience__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.audience__link span { color: #E56061; transition: transform .25s; }
.audience__link:hover { color: #fff; }
.audience__link:hover span { transform: translateY(3px); }
@media (max-width: 767px) {
  .audience { justify-content: flex-start; flex-direction: column; gap: 0; margin-top: 20px; }
  .audience__link { font-size: 11px; }
}

/* Bloque destacado al llegar desde un enlace (público, caso puntual) */
@keyframes ux-spotlight {
  0%   { box-shadow: 0 0 0 0 rgba(229, 96, 97, 0); }
  20%  { box-shadow: 0 0 0 3px rgba(229, 96, 97, .9), 0 24px 60px -20px rgba(229, 96, 97, .45); }
  100% { box-shadow: 0 0 0 0 rgba(229, 96, 97, 0); }
}
.is-spotlight { animation: ux-spotlight 2.4s cubic-bezier(.2,.7,.2,1) 1; }

/* ---------------------------------------------------------------- 5. Tarjetas: estados claros */
.case-card, .work-card .media, .svc-box, .gteam__stat, .contact-link,
.leader, .person, .office, .side-card, .principle, .split-cta__card {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, background-color .3s;
}
/* Elevación: solo transform + borde (lo más liviano de dibujar) */
.case-card:hover { transform: translate3d(0, -4px, 0); border-color: rgba(229, 96, 97, .35); }
.case-card .media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.case-card:hover .media img { transform: scale(1.04); }
.work-card:hover .media { border-color: rgba(229, 96, 97, .45); }
.work-card:focus-visible { outline-offset: 6px; }
.work-card__title { transition: color .2s; }
.work-card:hover .work-card__title { color: #fff; text-decoration: underline; text-decoration-color: rgba(229, 96, 97, .7); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.gteam__stat:hover, .side-card:hover { border-color: rgba(229, 96, 97, .35); }
/* Botones magnéticos: vuelven a su lugar con transición */
.btn--primary, .hh5-header .hh5-btn { transition: background-color .2s, border-color .2s, color .2s, box-shadow .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.btn--primary.is-magnet, .hh5-header .hh5-btn.is-magnet { transition-duration: .2s, .2s, .2s, .3s, .08s; }
.btn--primary:hover, .hh5-btn:hover { box-shadow: 0 10px 30px -12px rgba(229, 96, 97, .7); }

/* ---------------------------------------------------------------- 6. Work: filtros animados */
.case-card.is-hidden { display: none; }
.case-card.is-entering { animation: ux-card-in .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes ux-card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.chip { transition: background-color .2s, border-color .2s, color .2s, transform .15s; }
.chip:active { transform: scale(.97); }

/* ---------------------------------------------------------------- 7. CTA flotante en celular */
.hh5-fab { display: none; }
@media (max-width: 767px) {
  .hh5-fab {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 20px; right: 20px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
    height: 52px; border-radius: 999px;
    background: #E56061; color: #0E0E10; font: 600 16px/1 'Poppins', system-ui, sans-serif; text-decoration: none;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(14, 14, 16, .2);
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s;
  }
  .hh5-fab.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  body.menu-open .hh5-fab { opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------------- 8. Apariciones al hacer scroll
   Solo si el JS está activo y el usuario no pidió reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .ux-on .ux-reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
  .ux-on .ux-reveal.is-in { opacity: 1; transform: none; }
  .ux-on .ux-reveal.ux-now { transition: none; }
  /* Apariciones de About / Contact / Careers (v3): igual de rápidas */
  .js [data-reveal] { transform: translateY(12px); transition-duration: .45s; }
  .js [data-reveal].is-visible { transform: none; }

  /* Cambio de página suave: fundido corto; el menú queda fijo (no parpadea).
     Navegadores sin soporte (Firefox) navegan normal. */
  @view-transition { navigation: auto; }
  .hh5-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation: none; }
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(root) { animation: ux-page-out .16s ease-in both; }
  ::view-transition-new(root) { animation: ux-page-in .34s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes ux-page-out { to { opacity: 0; } }
  @keyframes ux-page-in { from { opacity: 0; transform: translateY(10px); } }
}
@media (prefers-reduced-motion: reduce) {
  .case-card:hover, .case-card:hover .media img { transform: none; }
  .is-spotlight { animation: none; box-shadow: 0 0 0 3px rgba(229, 96, 97, .9); }
}

/* About: el título conserva el corte de líneas de la V5 (ancho 13ch) */
.team-hero .h1 { text-wrap: wrap; }

/* ---------------------------------------------------------------- 9. Rendimiento
   - Animaciones infinitas (mapa, logos, brillos) en pausa cuando no se ven.
   - Con el video del hero andando, los brillos de respaldo no se dibujan. */
.ux-offscreen, .ux-offscreen * { animation-play-state: paused !important; }
.hero.has-video .glow, .hero.has-video .dots { display: none; }

/* ---------------------------------------------------------------- 10. Global Team · mapa geográfico de fondo
   Puntos de tierra tenues detrás de la animación (rutas y ciudades no cambian). */
.gteam__map .geo-land {
  fill: none; stroke: rgba(255, 255, 255, .065); stroke-width: 2.2; stroke-linecap: round;
  pointer-events: none;
}
/* Regiones (NORTH AMERICA, LATAM, EUROPE): más legibles sobre el mapa, con un halo oscuro que las separa de los puntos */
.gteam__map .city-label--muted {
  fill: rgba(255, 255, 255, .62); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  paint-order: stroke; stroke: #17171A; stroke-width: 4px; stroke-linejoin: round;
}

/* ==========================================================================
   11. Voz "datos": JetBrains Mono para etiquetas, categorías y números
   ========================================================================== */
:root { --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.eyebrow, .kicker, .logos-band__label, .trusted__label, .hh5-footer__heading,
.contact-link__label, .chip, .filter-bar__label, .hero-stats__label, .acc__num,
.trusted .clients__title, .gteam__map .city-label--muted, .filter, .people__label {
  font-family: var(--mono); font-weight: 500; letter-spacing: .1em;
}
.eyebrow { font-size: 12px; }
.kicker { font-size: 11px; }

/* ==========================================================================
   12. What we do (diseño v7, paleta actual)
   Fondo oscuro como el resto del sitio; Brands y AdTech como tarjetas iguales.
   Acordeón en todos los tamaños: un servicio abierto por caja, flecha para abrir/cerrar.
   ========================================================================== */
#services .section-head .h2 { font-size: clamp(36px, 1.2rem + 3.4vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
.svc-grid { align-items: stretch; gap: 24px; }
.svc-box { min-height: 0; padding: 48px; border-radius: 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.svc-box__kicker { display: inline-flex; align-items: center; gap: 10px; }
.svc-box__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E56061; }
.svc-box__title { font-size: clamp(26px, 1rem + 1.3vw, 36px); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 36px; }
.acc__num { font-size: 12px; }
.acc__title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

/* Las dos cajas: tarjeta oscura con borde sutil */
#services .svc-box, #services .svc-box--coral { background: #17171A; border: 1px solid rgba(255, 255, 255, .08); color: #fff; box-shadow: none; }
#services .svc-box__kicker { color: rgba(255, 255, 255, .72); }
#services .svc-box--coral .svc-box__kicker::before { box-shadow: 0 0 0 5px rgba(229, 96, 97, .22); }
#services .h3 { color: #fff; }
#services .acc, #services .acc__item { border-color: rgba(255, 255, 255, .10) !important; }
#services .acc__num { color: #E56061 !important; opacity: 1 !important; }
#services .acc__icon { border-color: rgba(255, 255, 255, .25) !important; color: #fff; transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s, border-color .2s, color .2s; }
#services .acc__btn:hover .acc__icon { border-color: #E56061 !important; }
#services .acc__btn[aria-expanded="true"] .acc__icon { background: #E56061 !important; border-color: #E56061 !important; color: #0E0E10 !important; }
#services .acc__btn:hover .acc__title { color: #E56061 !important; opacity: 1; }
#services .acc__panel p { color: rgba(255, 255, 255, .7) !important; }
.svc-route { display: block; width: 100%; max-width: 420px; height: auto; margin: auto 0 0 auto; padding-top: 32px; color: rgba(229, 96, 97, .55); fill: #E56061; }
/* Hover en cada servicio (solo con mouse): fila resaltada, número y título se corren y la flecha se enciende */
@media (hover: hover) and (pointer: fine) {
  #services .acc__item { position: relative; }
  #services .acc__item::before {
    content: ""; position: absolute; inset: 0 -20px; border-radius: 14px; pointer-events: none;
    background: linear-gradient(90deg, rgba(229, 96, 97, .10), rgba(229, 96, 97, 0) 85%);
    opacity: 0; transition: opacity .25s ease-out;
  }
  #services .acc__item:hover::before { opacity: 1; }
  #services .acc__btn, #services .acc__panel { position: relative; z-index: 1; }
  #services .acc__num, #services .acc__title { transition: transform .3s cubic-bezier(.2,.7,.2,1), color .2s; }
  #services .acc__item:hover .acc__num, #services .acc__item:hover .acc__title { transform: translateX(8px); }
  #services .acc__item:hover .acc__title { color: #E56061 !important; }
  #services .acc__item:hover .acc__icon { border-color: #E56061 !important; color: #E56061; }
  #services .acc__item:hover .acc__btn[aria-expanded="false"] .acc__icon { transform: translateY(2px); }
  #services .acc__item:hover .acc__btn[aria-expanded="true"] .acc__icon { color: #0E0E10 !important; }
  /* La caja también acompaña */
  #services .svc-box:hover { border-color: rgba(229, 96, 97, .30); }
}
@media (prefers-reduced-motion: reduce) {
  #services .acc__item:hover .acc__num, #services .acc__item:hover .acc__title, #services .acc__item:hover .acc__icon { transform: none !important; }
}
@media (max-width: 767px) {
  .svc-box { padding: 28px 22px; border-radius: 20px; }
  .svc-route { max-width: 260px; }
}

/* ---------------------------------------------------------------- 13. Work · descripción desplegable
   2 líneas con "…" y "Read more"; se abre dentro de la tarjeta (sin modal: es un solo párrafo).
   Las métricas siguen visibles. Sin JS se ve el texto completo. */
.case-card.has-more:not(.has-full):not(.is-open) .case-card__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.case-card.has-full:not(.is-open) .case-card__full { display: none; }
.case-card.has-full .case-card__full .case-card__text { margin-top: 12px; }
.case-card__text.is-animating, .case-card__full.is-animating { display: block !important; overflow: hidden; transition: height .4s cubic-bezier(.2,.7,.2,1); }
.case-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 6px 0 -8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px/1 'Poppins', system-ui, sans-serif; color: #E56061;
}
.case-more:hover { color: #fff; }
.case-more__icon { position: relative; width: 20px; height: 20px; border: 1px solid rgba(229, 96, 97, .5); border-radius: 50%; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s; }
.case-more__icon::before, .case-more__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; background: currentColor; border-radius: 1px;
}
.case-more__icon::after { transform: rotate(90deg); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.case-more:hover .case-more__icon { border-color: #fff; }
.case-card.is-open .case-more__icon { transform: rotate(180deg); }
.case-card.is-open .case-more__icon::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .case-more__icon, .case-more__icon::after { transition: none; } }