/* Solution Web México · V5.2 · Pulido de interacción
 * Capa final sobre style.css + v5.css. Aplica los principios de diseño de interacción
 * de emil-design-eng: todo lo que se pulsa responde, las salidas son más rápidas que
 * las entradas, los paneles crecen desde su disparador, curvas ease-out fuertes,
 * hovers solo con mouse y menos movimiento con prefers-reduced-motion.
 * Quitar el <link> de pulido.css en includes/head.php vuelve a la V5.1 tal cual.
 */

:root {
  --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* curva tipo iOS para paneles laterales */
  --dur-exit: 130ms;                            /* las salidas siempre más rápidas */
}

/* ===== 1. Respuesta al presionar en todo lo pulsable ===== */
.nav__trigger, .mega__link, .mega__promo, .header__icon, .nav__close, .acct__btn, .acct__list a,
.cat-filter a, .pagination a, .footer .linklike, .contact, a.work, .link-arrow {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-hover), var(--dur-press);
  transition-timing-function: ease, ease, ease, ease, var(--ease);
}
.nav__trigger:active, .header__icon:active, .nav__close:active, .acct__btn:active, .acct__list a:active, .link-arrow:active { transform: scale(.97); }
.mega__link:active, .mega__promo:active { transform: scale(.98); }
.btn:active { transition-duration: var(--dur-hover), var(--dur-hover), var(--dur-hover), 100ms; }

/* Botones sólidos: brillo superior de 1px para que se lean como pulsables, no como etiquetas */
.btn--ink, .btn--primary, .plan--featured .btn--primary, .search__form .btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 14, 18, .18);
}
.cta .btn--primary, .btn--white { box-shadow: 0 1px 2px rgba(15, 14, 18, .12); }

/* ===== 2. Mega menú: crece desde la opción que lo abrió y se va más rápido de lo que llega ===== */
@media (min-width: 1141px) {
  .mega {
    transform: translateY(-4px) scale(.985);
    transform-origin: var(--mega-origin, 50%) 0;
    transition: opacity var(--dur-exit) ease, transform var(--dur-exit) var(--ease), visibility 0s var(--dur-exit);
  }
  .nav__item.is-open .mega { transform: none; transition: opacity 180ms ease, transform 220ms var(--ease); }
  .nav.is-switching .mega, .nav.is-switching .nav__item.is-open .mega { transition: none; }
}

/* Menú de cuenta: nace de su botón (esquina superior derecha) */
.acct__menu { transform: translateY(-4px) scale(.97); transform-origin: top right; transition: opacity var(--dur-exit) ease, transform var(--dur-exit) var(--ease), visibility 0s var(--dur-exit); }
.acct.is-open .acct__menu { transform: none; transition: opacity 180ms ease, transform 200ms var(--ease); }

/* ===== 3. Menú en celular: curva de cajón, cierre rápido, fondo que se funde ===== */
@media (max-width: 1140px) {
  .nav { transition: transform 200ms var(--ease), visibility 0s 200ms; }
  .nav.is-open { transition: transform 360ms var(--ease-drawer); }
  .header:has(.nav.is-open)::after { opacity: 1; transition: opacity 240ms ease; }
  .nav__item.is-open .mega { opacity: 1; transform: none; transition: opacity 200ms ease, transform 220ms var(--ease); }
  .nav__chev svg { transition-duration: 200ms; }
}
@starting-style {
  .header:has(.nav.is-open)::after { opacity: 0; }
}
@media (max-width: 1140px) {
  @starting-style {
    .nav__item.is-open .mega { opacity: 0; transform: translateY(-4px); }
  }
}

/* ===== 4. Buscador de dominios: estado "Buscando…" con giro rápido ===== */
.search__form .btn[aria-busy="true"] { cursor: progress; }
.search__form .btn[aria-busy="true"] svg { visibility: hidden; }
.search__form .btn[aria-busy="true"]::before {
  content: ""; position: absolute; width: 16px; height: 16px; margin-left: -1px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: sw-spin 600ms linear infinite;
}
.search__form .btn { position: relative; }
.search__form .btn[aria-busy="true"]::before { left: 24px; top: calc(50% - 8px); margin: 0; }
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* ===== 5. Números: cifras tabulares para que precios y contadores no "bailen" ===== */
.plan__amount, .ssl__price, .design__price, .prices td, .search__chips li, .stats dd, .v5-stats dd, .bento__kpis b { font-variant-numeric: tabular-nums; }

/* ===== 6. Tarjetas: un solo lenguaje de hover (solo con mouse) ===== */
.feature, .ssl, .design, .quote, .bento__tile, .v5-steps li, .work {
  transition: border-color var(--dur-hover) ease, box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ssl:hover, .design:not(.design--accent):hover, a.work:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(15, 14, 18, .3); }
  .feature:hover, .ssl:hover { border-color: #d6d2c9; }
  .contact:hover { border-color: var(--ink); box-shadow: 0 24px 48px -30px rgba(15, 14, 18, .3); }
  .mega__link:hover .mega__icon { transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease; }
}
.mega__icon .i { transition: fill var(--dur-hover) ease; }

/* ===== 7. Enlaces de texto: subrayado fino y separado ===== */
.prose a, .accordion details p a, .legal a, .address a {
  text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .prose a:hover, .accordion details p a:hover, .legal a:hover, .address a:hover { text-decoration-color: currentColor; }
}

/* ===== 8. Fotos: se descubren de abajo hacia arriba al entrar en pantalla ===== */
.js .photo-wide.reveal--unveil { clip-path: inset(0 0 14% 0 round var(--r-xl)); }
.js .photo-wide.reveal--unveil.is-in { clip-path: inset(0 0 0 0 round var(--r-xl)); }
.js .photo-wide.reveal--unveil img { transform: scale(1.04); transition: transform 900ms var(--ease); }
.js .photo-wide.reveal--unveil.is-in img { transform: none; }

/* ===== 9. Acordeón: el "+" gira con la misma curva que abre el contenido ===== */
.accordion summary::after { transition: transform var(--dur-ui) var(--ease), background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.accordion summary:active { transform: scale(.99); }

/* ===== 10. Menos movimiento: fundidos sí, desplazamientos no ===== */
@media (prefers-reduced-motion: reduce) {
  .mega, .acct__menu, .nav__item.is-open .mega { transform: none !important; }
  .nav__trigger:active, .header__icon:active, .nav__close:active, .acct__btn:active, .acct__list a:active,
  .link-arrow:active, .mega__link:active, .mega__promo:active, .accordion summary:active { transform: none; }
  .ssl:hover, .design:hover, a.work:hover { transform: none; }
  .js .photo-wide.reveal--unveil, .js .photo-wide.reveal--unveil.is-in { clip-path: none; }
  .js .photo-wide.reveal--unveil img { transform: none; transition: none; }
  .search__form .btn[aria-busy="true"]::before { animation-duration: 1.4s; }
}