/* ============================================================
 * polish.css · Capa de pulido siguiendo la filosofía Emil Kowalski
 *
 * Se carga AL FINAL del head (después de styles.css, enhancements.css,
 * depth-3d.css, tech-vibe.css, impact.css) para sobrescribir
 * antipatrones sin tocar los archivos originales.
 *
 * Principios aplicados:
 *   1. Especificidad en transitions (nunca `all`)
 *   2. Feedback en :active (scale 0.97)
 *   3. Hover SOLO en dispositivos con puntero fino
 *   4. Easing fuerte (no Material Design débil)
 *   5. Duraciones < 250ms en UI
 *   6. transform-origin coherente en popovers
 *   7. Respect prefers-reduced-motion
 *
 * Eliminar este archivo cuando se refactorice styles.css.
 * ============================================================ */

:root {
  /* Easings fuertes (override) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Durations (override) */
  --t-instant: 100ms;
  --t-fast: 160ms;
  --t-base: 200ms;
  --t-slow: 280ms;
  --t-marketing: 500ms;
}

/* ============================================================
 * 1. BOTONES · Feedback responsivo
 * ============================================================ */

.btn,
.btn--primary,
.btn--accent,
.btn--secondary,
.btn--ghost {
  transition:
    transform var(--t-fast) var(--ease-out),
    background-color var(--t-base) ease,
    border-color var(--t-base) ease,
    color var(--t-base) ease,
    box-shadow var(--t-base) ease;
  will-change: transform;
}

/* Active state → feedback instantáneo de pulsación */
.btn:active,
.btn--primary:active,
.btn--accent:active,
.btn--secondary:active,
button:active:not(:disabled),
[role="button"]:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* Hover SOLO cuando hay puntero fino (mouse/trackpad) */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-1px);
  }
  .btn--accent:hover {
    transform: translateY(-1px);
  }
  .btn:hover .btn-arrow {
    transform: translateX(4px);
  }
}

/* Arrow icon transition más específico */
.btn-arrow {
  transition: transform var(--t-fast) var(--ease-out);
  display: inline-block;
}

/* ============================================================
 * 2. NAV LINKS · Subraya progresivo elegante
 * ============================================================ */

.nav-link {
  position: relative;
  transition: color var(--t-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link::after {
    content: "";
    position: absolute;
    left: var(--space-3, 12px);
    right: var(--space-3, 12px);
    bottom: 6px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-out);
    opacity: 0.7;
  }
  .nav-link:hover::after {
    transform: scaleX(1);
  }
  .nav-link.is-active::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ============================================================
 * 3. CARDS · Hover sutil, sin animar `all`
 * ============================================================ */

.feature-card,
.service-card,
.case-card,
.kpi-card,
.testimonial-card,
.pricing-card,
.faq-item,
.team-card,
.integration-card {
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) ease,
    border-color var(--t-base) ease,
    background-color var(--t-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .service-card:hover,
  .case-card:hover,
  .pricing-card:hover {
    transform: translateY(-2px);
  }
}

/* ============================================================
 * 4. INPUTS · Focus ring crisp
 * ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  transition:
    border-color var(--t-base) ease,
    box-shadow var(--t-base) ease,
    background-color var(--t-base) ease;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand, #0F2A44);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0F2A44) 15%, transparent);
}

/* ============================================================
 * 5. LINKS · Underline animado
 * ============================================================ */

a:not(.btn):not(.nav-link):not(.logo) {
  transition: color var(--t-base) ease;
}

/* ============================================================
 * 6. HEADER · Border progresivo según scroll
 * ============================================================ */

.site-header {
  transition:
    background-color var(--t-base) ease,
    border-bottom-color var(--t-base) ease,
    backdrop-filter var(--t-base) ease;
}

/* ============================================================
 * 7. CHAT LAUNCHER · Animaciones más vivas
 * ============================================================ */

.chat-launcher,
[class*="chat-bubble"] {
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) ease;
}

.chat-launcher:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .chat-launcher:hover {
    transform: scale(1.05);
  }
}

/* Chat window: entrada desde el launcher, no desde center */
.chat-window,
.chat-modal {
  transform-origin: bottom right;
  transition:
    transform var(--t-slow) var(--ease-out),
    opacity var(--t-base) ease;
}

/* ============================================================
 * 8. POPOVERS / TOOLTIPS · transform-origin desde trigger
 * ============================================================ */

[role="tooltip"],
.tooltip,
.popover {
  transform-origin: var(--popover-origin, var(--radix-popover-content-transform-origin, center));
  transition:
    transform var(--t-fast) var(--ease-out),
    opacity var(--t-fast) ease;
}

/* ============================================================
 * 9. MODALES · Mantener centrado pero animación crisp
 * ============================================================ */

.modal,
.modal-content,
[role="dialog"]:not([role="tooltip"]) {
  transform-origin: center;
  transition:
    transform var(--t-slow) var(--ease-out),
    opacity var(--t-base) ease;
}

/* Backdrop fade más rápido */
.modal-backdrop,
.dialog-overlay {
  transition: opacity var(--t-base) ease;
}

/* ============================================================
 * 10. STAGGER ENTRANCE · Cards aparecen escalonados
 * ============================================================ */

.feature-grid > *,
.service-grid > *,
.case-grid > * {
  animation: polish-fade-up 400ms var(--ease-out) backwards;
}

.feature-grid > *:nth-child(1),
.service-grid > *:nth-child(1),
.case-grid > *:nth-child(1) { animation-delay: 0ms; }
.feature-grid > *:nth-child(2),
.service-grid > *:nth-child(2),
.case-grid > *:nth-child(2) { animation-delay: 60ms; }
.feature-grid > *:nth-child(3),
.service-grid > *:nth-child(3),
.case-grid > *:nth-child(3) { animation-delay: 120ms; }
.feature-grid > *:nth-child(4),
.service-grid > *:nth-child(4),
.case-grid > *:nth-child(4) { animation-delay: 180ms; }
.feature-grid > *:nth-child(5),
.service-grid > *:nth-child(5),
.case-grid > *:nth-child(5) { animation-delay: 240ms; }
.feature-grid > *:nth-child(6),
.service-grid > *:nth-child(6),
.case-grid > *:nth-child(6) { animation-delay: 300ms; }

@keyframes polish-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
 * 11. CTA HOVER · Press-down más natural
 * ============================================================ */

.cta-band,
.cta-section {
  --cta-shine-x: -150%;
}

@media (hover: hover) and (pointer: fine) {
  .cta-band .btn--accent:hover,
  .cta-section .btn--accent:hover {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--accent, #22C55E) 35%, transparent);
  }
}

/* ============================================================
 * 12. SCROLL · Smooth elegante
 * ============================================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
 * 13. SELECTION · Color de marca
 * ============================================================ */

::selection {
  background: color-mix(in srgb, var(--accent, #22C55E) 30%, transparent);
  color: var(--brand, #0F2A44);
}

/* ============================================================
 * 14. FOCUS RING UNIVERSAL · Solo con teclado
 * ============================================================ */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent, #22C55E);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Botones tienen su propio focus ring */
.btn:focus-visible {
  outline: 2px solid var(--accent, #22C55E);
  outline-offset: 3px;
}

/* ============================================================
 * 15. IMAGES · transición opacidad sutil
 *
 * NOTA: NO usar `img[loading="lazy"]:not(.loaded) { opacity: 0 }`
 * porque dejaría todas las imágenes lazy invisibles si no hay un
 * JS que añada `.loaded` cuando cargan. Mejor confiar en el
 * browser nativo.
 * ============================================================ */

img,
picture {
  transition: opacity var(--t-base) ease;
}

/* ============================================================
 * REDUCED MOTION · Respetar preferencias del usuario
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Mantener fades de opacidad (no causan motion sickness) */
  .modal,
  .modal-backdrop,
  [role="dialog"] {
    transition: opacity 200ms ease !important;
  }
}