/* ════════════════════════════════════════════════════════════════
   TX POLISH — Sistema de detalles harmonizados para todo el sitio
   Aplica Emil Kowalski + impeccable + high-end-visual-design
   a cualquier página que linkee este stylesheet.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Easings consistentes */
  --tx-ease-out:    cubic-bezier(.22, 1, .36, 1);      /* ease-out-quart — entradas */
  --tx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* spring sutil — hovers */
  --tx-ease-soft:   cubic-bezier(.4, 0, .2, 1);        /* material — defaults */
  --tx-ease-snap:   cubic-bezier(.4, 0, .6, 1);        /* snap fuerte — clicks */

  /* Duraciones */
  --tx-dur-instant: 80ms;     /* click feedback */
  --tx-dur-fast:    180ms;    /* hover */
  --tx-dur-base:    240ms;    /* default */
  --tx-dur-slow:    420ms;    /* entradas mayores */

  /* Sombras consistentes (estilo editorial premium) */
  --tx-shadow-1: 0 1px 0 rgba(10,16,48,.05);
  --tx-shadow-2: 0 4px 14px rgba(10,16,48,.08);
  --tx-shadow-3: 0 12px 28px -8px rgba(10,16,48,.18);
  --tx-shadow-4: 0 24px 48px -12px rgba(10,16,48,.22);
  --tx-shadow-cobalto: 0 12px 32px -8px rgba(20,17,225,.28);
  --tx-shadow-terracota: 0 12px 32px -8px rgba(186,52,2,.32);
}

/* ═══ BUTTONS · estado :active universal (feedback táctil) ═══
   Todo <button>, <a class="*btn*">, .nav-cta hereda el active scale.
   No tocamos `transition: all` legacy para no romper layouts; aplicamos via :where para baja especificidad. */
:where(button, .btn, a[class*="btn"], a[class*="cta"], .tour-cta-btn, .tour-cotizar-btn, .nav-cta, .nav-link-team, .filter-btn):active {
  transition-duration: var(--tx-dur-instant) !important;
}
:where(button, .btn, a[class*="btn"]):not(:disabled):focus-visible {
  outline: 2px solid rgba(20,17,225,.4);
  outline-offset: 2px;
}

/* ═══ INPUTS · focus ring unificado ═══ */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  transition: border-color var(--tx-dur-base) var(--tx-ease-out),
              box-shadow var(--tx-dur-base) var(--tx-ease-out),
              background var(--tx-dur-base) var(--tx-ease-out);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus-visible {
  outline: none;
  border-color: var(--cobalto, #1411E1) !important;
  box-shadow: 0 0 0 4px rgba(20,17,225,.10) !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea)::placeholder {
  transition: opacity var(--tx-dur-fast) var(--tx-ease-out);
}
:where(input, textarea):focus::placeholder { opacity: .35; }
:where(input, textarea):invalid:not(:placeholder-shown):not(:focus) {
  border-color: #C0392B !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.08) !important;
}

/* ═══ CARDS · hover sutil consistente ═══
   Aplica a cards de equipo, testimonios, gastos, perfiles staff. */
:where(.user-card, .guia-card, .aud-card, .step-card, .diff-card, .tour-card, .testimonial-card) {
  transition: transform var(--tx-dur-slow) var(--tx-ease-out),
              box-shadow var(--tx-dur-slow) var(--tx-ease-out);
}

/* ═══ MODAL · entry pattern ═══
   Para cualquier overlay que use clases conocidas. Los que ya tienen
   transición específica no se rompen porque solo añadimos opacity. */
:where(.modal-overlay, .pay-overlay, .login-overlay) {
  transition: opacity var(--tx-dur-base) var(--tx-ease-out);
}

/* ═══ TOAST · spring entry mejorada ═══ */
.toast {
  transform: translateY(20px) scale(.95);
  opacity: 0;
  transition: transform var(--tx-dur-base) var(--tx-ease-spring),
              opacity var(--tx-dur-fast) var(--tx-ease-out);
  will-change: transform;
}
.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ═══ LINKS · subrayado animado en footers/nav ═══ */
:where(footer a:not([class]), .nav-mobile-panel a:not(.nav-mobile-cta)) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--tx-dur-base) var(--tx-ease-out),
              color var(--tx-dur-fast) var(--tx-ease-out);
}
:where(footer a:not([class]), .nav-mobile-panel a:not(.nav-mobile-cta)):hover {
  background-size: 100% 1px;
}

/* ═══ SCROLLBAR · sutil y editorial (Webkit/Chromium) ═══ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(20,17,225,.18);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--tx-dur-base);
}
::-webkit-scrollbar-thumb:hover { background: rgba(20,17,225,.35); background-clip: padding-box; }

/* ═══ SELECTION · cobalto sutil ═══ */
::selection { background: rgba(20,17,225,.18); color: inherit; }

/* ═══ DETAILS / SUMMARY · transición suave en FAQs ═══ */
:where(details summary) {
  transition: color var(--tx-dur-fast) var(--tx-ease-out);
}

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

/* ═══ FOCUS general · accesibilidad consistente ═══ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-offset: 3px;
}

/* ═══ Empty states (heredan del admin pero por si alguna otra página los usa) ═══ */
:where(.empty-state) {
  animation: txEmptyIn var(--tx-dur-slow) var(--tx-ease-out) both;
}
@keyframes txEmptyIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ TESTIMONIAL CARDS (inline-styled en testimonials-section) ═══
   Detectamos por estructura: cards dentro de .testimonials-section que tienen
   estrellitas + comilla + autor. Aplicamos hover sutil. */
.testimonials-section > .container > div:nth-child(2) > div {
  transition: transform .42s var(--tx-ease-out), box-shadow .42s var(--tx-ease-out);
}
.testimonials-section > .container > div:nth-child(2) > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -8px rgba(20,17,225,.14), 0 0 0 1px rgba(20,17,225,.06) !important;
}

/* ═══ DIFF CARDS (about-section) ═══ */
:where(.diff-card) {
  transition: transform .35s var(--tx-ease-out), background var(--tx-dur-base) var(--tx-ease-out);
}
:where(.diff-card):hover {
  transform: translateY(-3px);
  background: rgba(20,17,225,.025);
}

/* ═══ AUDIENCE CARDS ═══ */
:where(.aud-card) {
  transition: transform .35s var(--tx-ease-out), box-shadow .35s var(--tx-ease-out);
}
:where(.aud-card):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -10px rgba(10,16,48,.18);
}

/* ═══ STEP CARDS (how-section) ═══ */
:where(.step-card) {
  transition: background var(--tx-dur-base) var(--tx-ease-out);
}
:where(.step-card):hover {
  background: rgba(255,255,255,.03);
}

/* ═══ ADMIN sidebar buttons ═══ */
:where(.sb-btn) {
  transition: background var(--tx-dur-fast) var(--tx-ease-out),
              color var(--tx-dur-fast) var(--tx-ease-out),
              transform var(--tx-dur-instant) var(--tx-ease-out);
}
:where(.sb-btn):active { transform: scale(.97); }
:where(.sb-btn):focus-visible {
  outline: 2px solid rgba(20,17,225,.4); outline-offset: -2px;
}

/* ═══ USER CARDS (admin equipo / usuarios) ═══ */
:where(.user-card) {
  transition: transform .3s var(--tx-ease-out), box-shadow .3s var(--tx-ease-out);
}
:where(.user-card):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(10,16,48,.16);
}

/* ═══ TAG · transition unificada en pills/badges ═══ */
:where(.tag, .tour-card-tag span, .aud-pill, .badge) {
  transition: background var(--tx-dur-fast) var(--tx-ease-out),
              border-color var(--tx-dur-fast) var(--tx-ease-out),
              color var(--tx-dur-fast) var(--tx-ease-out);
}