/* ══════════════════════════════════════════════════════════════
   UPGRADES.CSS — San Miguel S.A. · Ultra-Premium Financial Edition
   Nivel: Marcus GS / Revolut / Wise / Stripe
   ══════════════════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES ADICIONALES ─────────────────────────── */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.7s;
  --duration-reveal: 0.9s;
}

/* ══════════════════════════════════════════════════════════════
   1. REVEAL ANIMATIONS — Sofisticadas con stagger
   ══════════════════════════════════════════════════════════════ */

/* Base: todos los elementos con data-reveal empiezan ocultos */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition: 
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

[data-reveal="up"] { transform: translateY(40px); }
[data-reveal="down"] { transform: translateY(-40px); }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="fade"] { transform: none; }

/* Revealed state */
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays — más suaves */
[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.3s; }
[data-reveal][data-delay="4"] { transition-delay: 0.4s; }
[data-reveal][data-delay="5"] { transition-delay: 0.5s; }

/* ══════════════════════════════════════════════════════════════
   2. MICROINTERACCIONES — Botones Premium
   ══════════════════════════════════════════════════════════════ */

/* Botones: transición más suave y profesional */
.btn-teal, .btn-navy, .btn-primary, .btn-secondary, .btn-outline-white, .btn-nav-cta {
  position: relative;
  overflow: hidden;
  transition: 
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo) !important;
}

.btn-teal:hover, .btn-navy:hover, .btn-primary:hover {
  transform: translateY(-2px) !important;
}

.btn-teal:active, .btn-navy:active, .btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: 0.1s !important;
}

/* Ripple mejorado */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: rippleEffect 0.6s var(--ease-out-expo) forwards;
  pointer-events: none;
}

@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   3. TARJETAS — Hover Premium con elevación real
   ══════════════════════════════════════════════════════════════ */

.product-card,
.benefit-card,
.testimonial-card,
.mv-card,
.faq-item {
  transition: 
    transform 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo),
    border-color 0.4s var(--ease-out-expo) !important;
}

/* Product cards: hover con elevación y glow sutil */
.product-card:hover {
  transform: translateY(-6px) !important;
}

/* Benefit cards: slide horizontal elegante */
.benefit-card:hover {
  transform: translateX(6px) !important;
}

/* Testimonial cards: elevación suave */
.testimonial-card:hover {
  transform: translateY(-4px) !important;
}

/* MV cards: elevación */
.mv-card:hover {
  transform: translateY(-4px) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. NAVBAR — Transiciones ultra-suaves
   ══════════════════════════════════════════════════════════════ */

#navbar {
  transition: 
    background 0.5s var(--ease-out-expo),
    padding 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo),
    backdrop-filter 0.4s var(--ease-out-expo) !important;
}

.nav-link {
  position: relative;
  transition: 
    color 0.25s var(--ease-out-expo),
    background 0.25s var(--ease-out-expo) !important;
}

/* Underline animado para nav links activos */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.3s var(--ease-out-expo), left 0.3s var(--ease-out-expo);
}

.nav-link.active::after,
.nav-link:hover::after {
  width: 60%;
  left: 20%;
}

/* CTA del navbar: pulse sutil */
.btn-nav-cta {
  animation: ctaPulse 3s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(45, 192, 172, 0.3); }
  50% { box-shadow: 0 4px 28px rgba(45, 192, 172, 0.5); }
}

/* ══════════════════════════════════════════════════════════════
   5. HERO — Animaciones de entrada premium
   ══════════════════════════════════════════════════════════════ */

/* Hero content: entrada escalonada */
.hero-content .hero-badge {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.3s both;
}

.hero-content .hero-title {
  animation: heroFadeUp 0.9s var(--ease-out-expo) 0.5s both;
}

.hero-content .hero-subtitle {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.7s both;
}

.hero-content .hero-actions {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.9s both;
}

.hero-content .hero-stats {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 1.1s both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero card: entrada desde la derecha con float */
.hero-visual .hero-card {
  animation: heroCardIn 1s var(--ease-out-expo) 0.6s both;
}

@keyframes heroCardIn {
  from {
    opacity: 0;
    transform: translateX(40px) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

/* Float sutil continuo para la hero card */
.hero-visual .hero-card {
  animation: heroCardIn 1s var(--ease-out-expo) 0.6s both,
             heroFloat 6s ease-in-out 2s infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Hero stats: counter glow al aparecer */
.hero-stat .value {
  transition: color 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════
   6. SCROLL PROGRESS — Más refinado
   ══════════════════════════════════════════════════════════════ */

#scrollProgress {
  height: 3px !important;
  background: linear-gradient(90deg, var(--teal), #3DCFC0, var(--navy-mid), var(--teal)) !important;
  background-size: 200% 100% !important;
  animation: progressShimmer 3s linear infinite;
  box-shadow: 0 0 12px rgba(45, 192, 172, 0.6) !important;
}

@keyframes progressShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ══════════════════════════════════════════════════════════════
   7. PAGE LOADER — Más elegante
   ══════════════════════════════════════════════════════════════ */

.page-loader {
  transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s !important;
}

.page-loader.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.page-loader .loader-ring svg {
  animation: loaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes loaderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   8. FAQ — Accordion con animación suave
   ══════════════════════════════════════════════════════════════ */

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out-expo), padding 0.4s var(--ease-out-expo) !important;
  padding: 0 1.5rem !important;
}

.faq-answer.open {
  max-height: 400px;
  padding: 0 1.5rem 1.5rem !important;
}

.faq-icon {
  transition: transform 0.4s var(--ease-out-expo), background 0.3s ease !important;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* ══════════════════════════════════════════════════════════════
   9. FORMULARIO — Inputs con animaciones de focus
   ══════════════════════════════════════════════════════════════ */

.form-control, .form-select {
  transition: 
    border-color 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-expo),
    transform 0.2s var(--ease-out-expo) !important;
}

.form-control:focus, .form-select:focus {
  transform: translateY(-1px);
}

/* Label animation */
.form-label {
  transition: color 0.3s ease;
}

/* Submit button: loading state */
#btnEnviar .spinner-border {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   10. CHATBOT — Animaciones premium
   ══════════════════════════════════════════════════════════════ */

/* Chatbot window: entrada con spring */
.chatbot-window {
  transition: 
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-out-expo),
    visibility 0.4s !important;
  transform-origin: bottom right;
}

.chatbot-window:not(.open) {
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  visibility: hidden;
  pointer-events: none;
}

.chatbot-window.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: all;
}

/* Chatbot button: bounce sutil */
.chatbot-btn {
  transition: 
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-expo) !important;
}

.chatbot-btn:hover {
  transform: scale(1.08) !important;
}

.chatbot-btn:active {
  transform: scale(0.95) !important;
}

/* Mensajes del chat: entrada animada */
.msg-bot, .msg-user {
  animation: msgSlideIn 0.4s var(--ease-out-expo) both;
}

.msg-bot {
  animation-name: msgSlideInLeft;
}

.msg-user {
  animation-name: msgSlideInRight;
}

@keyframes msgSlideInLeft {
  from { opacity: 0; transform: translateX(-12px) translateY(4px); }
  to { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes msgSlideInRight {
  from { opacity: 0; transform: translateX(12px) translateY(4px); }
  to { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-items: center;
}

.typing-indicator span {
  width: 7px;
  height: 7px;
  background: var(--teal);
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Chat options: entrada escalonada */
.chat-option-btn {
  transition: 
    transform 0.25s var(--ease-out-expo),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

.chat-option-btn:hover {
  transform: translateY(-2px) !important;
}

.chat-option-btn:active {
  transform: translateY(0) scale(0.96) !important;
}

/* Bubble hint: entrada suave */
.chatbot-bubble-hint {
  animation: bubbleHintIn 0.5s var(--ease-out-expo) both;
}

@keyframes bubbleHintIn {
  from { opacity: 0; transform: translateX(10px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Notification dot: pulse */
.notif-dot {
  animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════════
   11. WHATSAPP FLOAT — Animación premium
   ══════════════════════════════════════════════════════════════ */

.wa-float {
  transition: 
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo) !important;
}

.wa-float:hover {
  transform: scale(1.1) translateY(-3px) !important;
}

.wa-float:active {
  transform: scale(0.95) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. SCROLL TOP — Entrada suave
   ══════════════════════════════════════════════════════════════ */

.scroll-top {
  transition: 
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-out-expo),
    background 0.3s ease,
    box-shadow 0.3s ease !important;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.scroll-top:hover {
  transform: translateY(-3px) !important;
}

/* ══════════════════════════════════════════════════════════════
   13. TRUST BAR — Counters con glow
   ══════════════════════════════════════════════════════════════ */

.trust-item {
  transition: transform 0.3s var(--ease-out-expo);
}

.trust-item:hover {
  transform: translateY(-2px);
}

.trust-item .number {
  transition: text-shadow 0.3s ease;
}

.trust-item:hover .number {
  text-shadow: 0 0 20px rgba(45, 192, 172, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   14. GT PHOTO GRID — Hover con zoom
   ══════════════════════════════════════════════════════════════ */

.gt-photo-item img {
  transition: transform 0.6s var(--ease-out-expo) !important;
}

.gt-photo-item:hover img {
  transform: scale(1.05);
}

.gt-photo-label {
  transition: 
    background 0.3s ease,
    transform 0.3s var(--ease-out-expo) !important;
}

.gt-photo-item:hover .gt-photo-label {
  background: rgba(45, 192, 172, 0.85) !important;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   15. STORY CARDS — Hover con parallax
   ══════════════════════════════════════════════════════════════ */

.story-card {
  transition: 
    transform 0.5s var(--ease-out-expo),
    box-shadow 0.5s var(--ease-out-expo) !important;
}

.story-card:hover {
  transform: translateY(-6px) !important;
}

.story-card img {
  transition: transform 0.7s var(--ease-out-expo) !important;
}

.story-card:hover img {
  transform: scale(1.08);
}

/* ══════════════════════════════════════════════════════════════
   16. MODAL DE CONTACTO — Para reducir fricción
   ══════════════════════════════════════════════════════════════ */

/* Overlay */
.contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 14, 36, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: 
    opacity 0.4s var(--ease-out-expo),
    visibility 0.4s;
}

.contact-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal container */
.contact-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.5s var(--ease-out-expo);
  box-shadow: 
    0 24px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(45, 192, 172, 0.1);
}

.contact-modal-overlay.active .contact-modal {
  transform: scale(1) translateY(0);
}

/* Modal close button */
.contact-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease-out-expo);
  color: var(--text-2);
}

.contact-modal-close:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
  transform: rotate(90deg);
}

/* Modal header */
.contact-modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.contact-modal-header h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.contact-modal-header p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Modal form */
.contact-modal .form-control,
.contact-modal .form-select {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

.contact-modal .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* Modal success state */
.contact-modal-success {
  text-align: center;
  padding: 1rem 0;
  display: none;
}

.contact-modal-success.show {
  display: block;
  animation: modalSuccessIn 0.5s var(--ease-out-expo) both;
}

@keyframes modalSuccessIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.contact-modal-success .success-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(45, 192, 172, 0.12);
  border: 2px solid rgba(45, 192, 172, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.contact-modal-success .success-check svg {
  width: 28px;
  height: 28px;
  color: var(--teal);
  animation: checkDraw 0.5s var(--ease-out-expo) 0.2s both;
}

@keyframes checkDraw {
  from { stroke-dashoffset: 30; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* Light mode modal */
[data-theme="light"] .contact-modal {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 
    0 24px 80px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(45, 192, 172, 0.15);
}

[data-theme="light"] .contact-modal-overlay {
  background: rgba(15, 23, 42, 0.5);
}

[data-theme="light"] .contact-modal-close {
  background: #f5f8ff;
  border-color: rgba(15, 23, 42, 0.1);
  color: var(--navy);
}

[data-theme="light"] .contact-modal-close:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

[data-theme="light"] .contact-modal-header h3 {
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════
   17. SECTION DIVIDERS — Más sutiles y elegantes
   ══════════════════════════════════════════════════════════════ */

.section-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--border-mid), transparent) !important;
  margin: 0 !important;
  opacity: 0.6;
}

hr.section-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--border-mid), transparent) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   18. GT PATTERN STRIP — Animación sutil
   ══════════════════════════════════════════════════════════════ */

.gt-pattern-strip {
  position: relative;
  overflow: hidden;
}

.gt-pattern-strip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(45, 192, 172, 0.1), transparent);
  animation: stripShimmer 8s ease-in-out infinite;
}

@keyframes stripShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   19. PROCESO STEPS — Animación de conexión
   ══════════════════════════════════════════════════════════════ */

section[style*="155deg"] .col-md-3 {
  transition: transform 0.3s var(--ease-out-expo);
}

section[style*="155deg"] .col-md-3:hover {
  transform: translateY(-4px);
}

/* Step circles: pulse on hover */
section[style*="155deg"] [style*="border-radius:50%"]:hover {
  box-shadow: 0 0 0 8px rgba(45, 192, 172, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   20. TIPOGRAFÍA — Refinamientos finales
   ══════════════════════════════════════════════════════════════ */

/* Títulos de sección: tracking más apretado para look editorial */
.section-title {
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
}

/* Subtítulos: más respiro */
.section-subtitle {
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
  max-width: 600px;
}

/* Hero title: más impactante */
.hero-title, .display-title {
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
}

/* Body text: mejor legibilidad */
.product-card p,
.benefit-text p,
.testimonial-text,
.mv-card p {
  line-height: 1.7 !important;
  font-size: 0.92rem !important;
}

/* ══════════════════════════════════════════════════════════════
   21. COUNTRY BANNER — Cards con hover mejorado
   ══════════════════════════════════════════════════════════════ */

.country-banner [style*="background:rgba(255,255,255,.08)"] {
  transition: 
    background 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo),
    transform 0.3s var(--ease-out-expo) !important;
}

.country-banner [style*="background:rgba(255,255,255,.08)"]:hover {
  transform: translateY(-3px) !important;
}

/* ══════════════════════════════════════════════════════════════
   22. PERFORMANCE — GPU hints
   ══════════════════════════════════════════════════════════════ */

.product-card,
.benefit-card,
.testimonial-card,
.mv-card,
.hero-card,
.chatbot-window,
.contact-modal,
.btn-teal,
.btn-navy {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduced motion: respeta 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;
  }
  
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .hero-visual .hero-card {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   23. RESPONSIVE MODAL
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
  .contact-modal {
    padding: 1.75rem;
    border-radius: 20px;
    max-height: 85vh;
  }
  
  .contact-modal-header h3 {
    font-size: 1.2rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   24. HERO PRODUCT ITEMS — Hover individual
   ══════════════════════════════════════════════════════════════ */

.hero-product-item {
  transition: 
    background 0.25s var(--ease-out-expo),
    transform 0.25s var(--ease-out-expo) !important;
  border-radius: 10px;
  padding: 0.6rem 0.75rem !important;
  margin: 0 -0.75rem !important;
}

.hero-product-item:hover {
  background: rgba(45, 192, 172, 0.08);
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════════
   25. AGENCY CARD — Hover mejorado
   ══════════════════════════════════════════════════════════════ */

.agency-card {
  transition: 
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo) !important;
}

.agency-card:hover {
  transform: translateY(-3px) !important;
}

/* ══════════════════════════════════════════════════════════════
   26. FORM SUCCESS — Animación mejorada
   ══════════════════════════════════════════════════════════════ */

.form-success {
  animation: formSuccessIn 0.6s var(--ease-out-expo) both;
}

@keyframes formSuccessIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.success-icon svg {
  animation: successCheck 0.6s var(--ease-out-expo) 0.3s both;
}

@keyframes successCheck {
  from { stroke-dashoffset: 50; transform: scale(0.8); }
  to { stroke-dashoffset: 0; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   27. MODO CLARO — Refinamientos adicionales para el modal y formularios
   ══════════════════════════════════════════════════════════════ */

/* Formulario inputs en modo claro */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: #f8faff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: var(--navy) !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: #ffffff !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(45, 192, 172, 0.12) !important;
}

[data-theme="light"] .form-control::placeholder {
  color: rgba(15, 23, 42, 0.35) !important;
}

/* Dark mode inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-1) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(45, 192, 172, 0.12) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-3) !important;
}

/* ══════════════════════════════════════════════════════════════
   28. SECTION TITLES — Animación de underline decorativa
   ══════════════════════════════════════════════════════════════ */

.section-title {
  position: relative;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   29. FOOTER — Hover mejorado en links
   ══════════════════════════════════════════════════════════════ */

.footer-links a {
  transition: 
    color 0.25s var(--ease-out-expo),
    transform 0.25s var(--ease-out-expo) !important;
  display: inline-block;
}

.footer-links a:hover {
  transform: translateX(4px);
}

.footer-social a {
  transition: 
    background 0.25s var(--ease-out-expo),
    transform 0.25s var(--ease-out-expo),
    box-shadow 0.25s var(--ease-out-expo) !important;
}

.footer-social a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 16px rgba(45, 192, 172, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   30. AVISO INFORMATIVO — Mejora visual
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] [style*="border-top:3px solid var(--teal)"][style*="border-bottom:1px solid var(--gray-mid)"] {
  background: linear-gradient(135deg, rgba(45, 192, 172, 0.06), rgba(42, 59, 142, 0.04)) !important;
}

/* ══════════════════════════════════════════════════════════════
   31. TESTIMONIAL CARDS — Quote mark estilizada
   ══════════════════════════════════════════════════════════════ */

.testimonial-card {
  position: relative;
}

/* ══════════════════════════════════════════════════════════════
   32. LABEL TAGS — Hover sutil
   ══════════════════════════════════════════════════════════════ */

.label-tag {
  transition: 
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease-out-expo) !important;
}

/* ══════════════════════════════════════════════════════════════
   33. SMOOTH SCROLL INDICATOR — Sección activa
   ══════════════════════════════════════════════════════════════ */

/* Secciones con reveal: transición suave de fondo */
section {
  transition: background 0.6s var(--ease-out-expo);
}

/* ══════════════════════════════════════════════════════════════
   34. HERO CARD GLOW — Efecto premium en dark mode
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .hero-card {
  position: relative;
}

[data-theme="dark"] .hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(45, 192, 172, 0.2), rgba(42, 59, 142, 0.15), transparent);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
}

[data-theme="dark"] .hero-card:hover::before {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   35. MOBILE OPTIMIZATIONS — Touch-friendly
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* Disable hover effects on mobile (they stick on touch) */
  .product-card:hover,
  .benefit-card:hover,
  .testimonial-card:hover {
    transform: none !important;
  }
  
  /* Bigger tap targets */
  .btn-teal, .btn-navy, .btn-primary, .btn-secondary {
    min-height: 48px;
  }
  
  /* Modal: full-width on mobile */
  .contact-modal {
    margin: 0;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .contact-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  
  .contact-modal-overlay.active .contact-modal {
    transform: translateY(0) !important;
  }
  
  .contact-modal-overlay:not(.active) .contact-modal {
    transform: translateY(100%) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   36. PRODUCT CARD BADGE — Animación al aparecer
   ══════════════════════════════════════════════════════════════ */

.product-badge {
  animation: badgePop 0.4s var(--ease-out-expo) both;
}

@keyframes badgePop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   37. LOADING STATES — Skeleton shimmer
   ══════════════════════════════════════════════════════════════ */

.skeleton-shimmer {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.04) 25%, 
    rgba(255,255,255,0.08) 50%, 
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   38. FOCUS VISIBLE — Accesibilidad premium
   ══════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--teal) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

.btn-teal:focus-visible,
.btn-navy:focus-visible {
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px rgba(45, 192, 172, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   39. SELECTION — Branded text selection
   ══════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(45, 192, 172, 0.2);
  color: inherit;
}

[data-theme="light"] ::selection {
  background: rgba(42, 59, 142, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   40. SMOOTH SCROLLBAR — Custom para webkit
   ══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: rgba(45, 192, 172, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 192, 172, 0.5);
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f0f4ff;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(42, 59, 142, 0.2);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 59, 142, 0.35);
}

/* ── Carrusel de testimonios (pie de página · desktop + móvil) ── */
/* Visibilidad de cada grupo controlada por JS (3 testimonios por grupo) */
.testi-carousel > [class*="col-"].is-active { animation: testiFade .6s ease; }
@keyframes testiFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.testi-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.testi-dots button {
  width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
  background: rgba(45, 192, 172, .35); cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.testi-dots button.is-active { background: var(--teal); transform: scale(1.3); }

/* ── Barra informativa superior (ticker deslizante) ───────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 36px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(90deg, var(--navy-dark, #0f1838), var(--navy, #2A3B8E));
  border-bottom: 1px solid rgba(45, 192, 172, .28);
}
.topbar-track { display: flex; width: max-content; animation: topbarScroll 38s linear infinite; }
.topbar:hover .topbar-track { animation-play-state: paused; }
.topbar-group { display: flex; align-items: center; flex-shrink: 0; }
.topbar-item {
  display: inline-flex; align-items: center; white-space: nowrap;
  color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 500; letter-spacing: .01em;
}
.topbar-item::after { content: "•"; color: var(--teal); margin: 0 1.5rem; opacity: .85; }
@keyframes topbarScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .topbar { justify-content: center; }
  .topbar-track { animation: none; width: auto; }
  .topbar-group:nth-child(2) { display: none; }
}
/* Bajar el navbar para dejar la franja arriba */
#navbar { top: 36px !important; }
@media (max-width: 575.98px) { .topbar-item { font-size: .74rem; } }

/* ══════════════════════════════════════════════════════════════
   AJUSTES MÓVIL — popups cerrables, contenido centrado y compacto
   ══════════════════════════════════════════════════════════════ */

/* La X del chat siempre en la esquina superior derecha */
.chat-close { margin-left: auto; }

@media (max-width: 575.98px) {
  /* Chatbot: que NO ocupe toda la pantalla y el encabezado (X) quede visible */
  .chatbot-window {
    width: calc(100vw - 1.5rem) !important;
    right: .75rem !important;
    bottom: 5rem !important;
    max-height: calc(100vh - 7rem) !important;
  }

  /* Modal de contacto: más pequeño, con margen y siempre cerrable */
  .contact-modal-overlay { padding: 1.25rem !important; }
  .contact-modal {
    max-width: 420px !important;
    max-height: 85vh !important;
    padding: 1.5rem !important;
  }

  /* Contenido centrado y tarjetas más compactas en móvil */
  #productos .product-card,
  .mv-card,
  .testimonial-card,
  .benefit-card,
  .stories-section .story-card {
    max-width: 380px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #productos .product-card { padding: 1.5rem !important; text-align: center; }
  #productos .product-card .product-card-icon { margin-left: auto; margin-right: auto; }
  #productos .product-card .product-rate { justify-content: center; }
  #productos .product-card .product-card-features {
    text-align: left; display: inline-block; margin-left: auto; margin-right: auto;
  }
  .mv-card { text-align: center; }
  .mv-card .mv-icon { margin-left: auto; margin-right: auto; }

  /* Banner de cobertura / valores: centrado */
  .country-banner, #nosotros .value-badge { text-align: center; }
}

/* Pantallas muy pequeñas (≤360px): chat aún más compacto */
@media (max-width: 360px) {
  .chatbot-window {
    width: calc(100vw - 1rem) !important;
    right: .5rem !important;
    bottom: 4.5rem !important;
    max-height: calc(100vh - 6rem) !important;
  }
  .chat-header { padding: .85rem 1rem; }
  .chat-avatar { width: 36px; height: 36px; }
  .chat-name { font-size: .82rem; }
  .chat-messages { padding: 1rem; }
  .chat-input-row { padding: .6rem .75rem; }
  .contact-modal { max-width: 94vw !important; padding: 1.25rem !important; }
}

/* ── Chatbot (escritorio/tablet): un poco más pequeño y que su encabezado
   nunca quede oculto bajo la barra superior + nav ── */
@media (min-width: 576px) {
  .chatbot-window {
    width: 340px !important;
    max-height: min(460px, calc(100vh - 230px)) !important;
    bottom: 7rem !important;
  }
}

/* ── Barras animadas "En crecimiento" (banner de cobertura) ── */
.growth-bars { display:flex; align-items:flex-end; justify-content:center; gap:4px; height:34px; margin:0 auto .5rem; }
.growth-bars span { width:5px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#3DCFC0,var(--teal)); transform-origin:bottom; animation:growBar 1.8s ease-in-out infinite; }
.growth-bars span:nth-child(1){ height:12px; animation-delay:0s; }
.growth-bars span:nth-child(2){ height:18px; animation-delay:.15s; }
.growth-bars span:nth-child(3){ height:24px; animation-delay:.3s; }
.growth-bars span:nth-child(4){ height:32px; animation-delay:.45s; }
@keyframes growBar { 0%,100% { transform:scaleY(.35); opacity:.55; } 50% { transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .growth-bars span { animation:none; } }

/* ── Pulso en TODA la tarjeta "En crecimiento" + barras más grandes ── */
.growth-card {
  position: relative;
  border-color: rgba(45,192,172,.35) !important;
  animation: growthCardPulse 2.4s ease-in-out infinite;
}
@keyframes growthCardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,192,172,0);    border-color: rgba(45,192,172,.25); }
  50%      { box-shadow: 0 0 30px 2px rgba(45,192,172,.32); border-color: rgba(45,192,172,.7); }
}
.growth-bars { height: 44px; gap: 6px; }
.growth-bars span { width: 7px; }
.growth-bars span:nth-child(1) { height: 16px; }
.growth-bars span:nth-child(2) { height: 24px; }
.growth-bars span:nth-child(3) { height: 34px; }
.growth-bars span:nth-child(4) { height: 44px; }
@media (prefers-reduced-motion: reduce) { .growth-card { animation: none; } }

/* ── Estrellas del formulario de reseña ── */
.resena-stars { display: flex; gap: .35rem; font-size: 1.9rem; line-height: 1; }
.resena-stars button {
  background: none; border: none; cursor: pointer; padding: 0 .1rem;
  color: rgba(150,150,150,.45); transition: color .15s ease, transform .15s ease;
}
.resena-stars button:hover { transform: scale(1.12); }
.resena-stars button.on { color: #F59E0B; }

/* ── Controles del carrusel de testimonios (flechas + puntos) ── */
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.testi-controls .testi-dots { margin-top: 0; }
.testi-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(45,192,172,.45);
  background: rgba(45,192,172,.12); color: var(--teal);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.testi-arrow:hover { background: var(--teal); color: #fff; transform: scale(1.08); }

/* ── Chatbot en móviles pequeños (iPhone 11 y similares) ── */
@media (max-width: 430px) {
  .chatbot-window {
    width: calc(100vw - 1rem) !important;
    right: .5rem !important;
    bottom: 4.75rem !important;
    max-height: calc(100vh - 6.5rem) !important;
  }
  .chat-header { padding: .8rem 1rem; }
  .chat-avatar { width: 34px; height: 34px; }
  .chat-avatar svg { width: 18px; height: 18px; }
  .chat-name { font-size: .82rem; }
  .chat-status { font-size: .68rem; }
  .chat-messages { padding: .9rem; font-size: .9rem; }
  .chat-input-row { padding: .55rem .7rem; }
}