/* ═══════════════════════════════════════════════════════════════════
   HALYON — pulido.css
   Detalles de sensación (skills apple-design + emil-design-eng):
   respuesta al tocar, hover solo con mouse, foco visible, tipografía
   y accesibilidad. No cambia el diseño: va cargado al final.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Respuesta instantánea al apretar ───────────────────────────
   Se usa `scale` (propiedad aparte) para no pisar el `transform` del hover. */
.btn { transition: transform 0.2s var(--ease), scale 0.16s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.nav-cta { transition: background 0.4s, border-color 0.4s, transform 0.3s, scale 0.16s var(--ease); }
.wa-flotante { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), scale 0.16s var(--ease); }
.wa-repetir, .tareas-repetir, .work-link, .nav-burger { transition: color 0.3s, scale 0.16s var(--ease); }
.btn:active, .nav-cta:active, .wa-repetir:active, .tareas-repetir:active,
.work-link:active, .nav-burger:active { scale: 0.97; }
.wa-flotante.visible:active { scale: 0.94; }
.wa-caso:active, .preguntas summary:active { opacity: 0.7; }

/* ─── 2. Toques en el celular: sin el flash gris ni la demora ───── */
a, button, summary, select, label, [role="tab"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ─── 3. Hover solo donde hay mouse ─────────────────────────────────
   En el celular el :hover queda "pegado" después de tocar (el botón se
   queda levantado y con el degradé). Acá se neutraliza. */
@media (hover: none), (pointer: coarse) {
  .btn-primary:hover { transform: none; box-shadow: none; color: #FBFBFC; background: var(--ink); }
  .sol-destacada .btn-primary:hover { color: var(--night); }
  .btn-ghost:hover { transform: none; background: transparent; }
  .nav-cta:hover { transform: none; }
  .mini-card:hover, .sol-card:hover { transform: none; box-shadow: none; }
  .mini-card:hover .mini-img img { transform: none; }
  .work-item:hover .work-frame, .cap-row:hover .cap-shot { box-shadow: 0 30px 70px -34px rgba(21,18,31,0.5); }
  .work-item:hover .dossier-hojas img:first-child { transform: translate(-62%, -8%) rotate(-7deg); }
  .work-item:hover .dossier-hojas img:last-child { transform: rotate(4deg); }
  .wa-flotante:hover > img { transform: none; }
  .marquee:hover .marquee-track { animation-play-state: running; }
  .work-link:hover svg { transform: none; }
}

/* ─── 5. Foco visible para quien navega con teclado ─────────────── */
:where(a, button, summary, select, [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid var(--g-violet);
  outline-offset: 3px;
}
.btn:focus-visible, .nav-cta:focus-visible, .wa-flotante:focus-visible { outline-offset: 4px; }
.cf-input { transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.cf-input:focus {
  border-color: var(--acento);
  background: var(--bg-card);
  box-shadow: 0 0 0 4px rgba(125,84,253,0.12);
}

/* ─── 6. Formulario: el iPhone hace zoom si la letra es menor a 16px ─ */
.cf-input { font-size: 16px; }

/* ─── 7. Tipografía: cortes de línea parejos, sin palabras huérfanas ─ */
.section-title, .cap-title, .work-title, .mini-card h3, .paso h3,
.nos-persona h3, .preguntas summary, .final-sub { text-wrap: balance; }
.hero-sub, .section-desc, .cap-desc, .work-desc, .mini-card p, .paso p,
.nos-lead, .nos-persona p, .preguntas details p, .hablemos-datos p,
.foot-brand p { text-wrap: pretty; }
/* el espaciado entre letras depende del tamaño: en títulos chicos (celular)
   el -0.035em de escritorio queda apretado */
@media (max-width: 640px) {
  .section-title { letter-spacing: -0.022em; }
  .cap-title, .work-title { letter-spacing: -0.018em; }
}
/* números que no "bailan" al cambiar */
.work-stat .v, .wa-estado, .tareas-pie b { font-variant-numeric: tabular-nums; }

/* ─── 8. Preguntas: que se note que se pueden abrir ─────────────── */
.preguntas summary { cursor: pointer; transition: color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .preguntas summary:hover { color: var(--ink-dim); }
}


/* ─── 10. Accesibilidad: menos transparencia / más contraste ────── */
@media (prefers-reduced-transparency: reduce) {
  #nav.pinned { background: rgba(246,246,248,0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #nav.pinned { background: var(--bg); border-color: var(--line-bright); }
  .cf-input { border-color: var(--line-bright); }
}

/* ═══════════════════════════════════════════════════════════════════
   Ronda de animaciones (skill improve-animations)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 11. Entrar despacio, salir rápido ─────────────────────────────
   El botón flotante aparecía y se iba con el mismo tiempo; al irse
   tiene que ser más rápido para no estorbar. */
.wa-flotante:not(.visible) { transition-duration: 0.2s, 0.25s, 0.16s; }

/* ─── 12. Menú del celular: antes aparecía de golpe ─────────────────
   Ahora los links bajan apenas y aparecen de a uno (30 ms entre cada uno). */
@media (max-width: 860px) {
  #nav.pinned.menu-open .nav-links li,
  #nav.pinned.menu-open .nav-right {
    transition: opacity 0.22s var(--ease-out), translate 0.3s var(--ease-out);
  }
  #nav.pinned.menu-open .nav-links li:nth-child(2) { transition-delay: 30ms; }
  #nav.pinned.menu-open .nav-links li:nth-child(3) { transition-delay: 60ms; }
  #nav.pinned.menu-open .nav-links li:nth-child(4) { transition-delay: 90ms; }
  #nav.pinned.menu-open .nav-right { transition-delay: 120ms; }
}
@starting-style {
  #nav.pinned.menu-open .nav-links li,
  #nav.pinned.menu-open .nav-right { opacity: 0; translate: 0 -6px; }
}

/* ─── 13. Aviso de error del formulario: aparece suave, no de golpe ─ */
.cf-error { transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out); }
@starting-style { .cf-error { opacity: 0; translate: 0 -4px; } }

/* ─── 14. "Reducir movimiento" del sistema ──────────────────────────
   La frase del intro volaba letra por letra aunque la persona pidiera
   menos movimiento, y la franja de marcas seguía corriendo sin parar.
   Ahora la frase solo se desvanece y la franja queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .fr-letra { transition: opacity 0.3s ease; }
  .fr-letra.ida { transform: none; filter: none; }
  .marquee-track { animation: none; }
  #nav.pinned.menu-open .nav-links li, #nav.pinned.menu-open .nav-right { translate: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Ronda celular (skill mobile-native)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 15. Mantener apretado un botón no selecciona su texto ─────────
   Solo en controles: el texto de la página se sigue pudiendo copiar. */
button, .btn, .nav-cta, .wa-caso, .wa-flotante, .preguntas summary, .nav-burger {
  -webkit-user-select: none; user-select: none;
}
.btn, .nav-cta, .wa-flotante { -webkit-touch-callout: none; }

/* ─── 16. Celular acostado: nada debajo del notch ───────────────────
   Con el teléfono horizontal el notch queda a un costado; el menú y el
   contenido se corren lo justo para no quedar tapados. */
.wrap {
  padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
}
#nav.pinned {
  width: min(860px, calc(100% - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}
.wa-flotante { right: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-right, 0px)); }

/* ─── 9. Botón flotante de WhatsApp ─────────────────────────────────
   Antes, al pasar el mouse se cambiaba la duración del giro y el texto
   pegaba un salto. Ahora la velocidad la cambia pulido.js de a poco. */
.wa-flotante:hover .wa-flotante-texto { animation-duration: 16s; }