/**
 * @file styles.css
 * @description Estilos complementarios a Tailwind CSS
 * @author SIPP
 * @version 3.0.0 — FIX: Testimonial XUP + overflow + altura uniforme
 * 
 * Este archivo contiene únicamente:
 * - Animaciones custom que Tailwind no puede manejar inline
 * - Tooltips personalizados
 * - Utilidades específicas del proyecto
 * 
 * La mayoría del styling está en clases de Tailwind en el HTML
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   @description Variables de diseño centralizadas
   ========================================================================== */
:root {
  /* Colors - Brand Palette */
  --color-bg: #0d0907;
  --color-text: #f9feff;
  --color-accent-gray: #c3c3c3;
  --color-accent-dgray: #999999;
  --color-accent-pink: #e5408f;
  --color-accent-teal: #54bac6;
  --color-accent-orange: #e8441e;
  --color-accent-pink2: #ff7096;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Animation */
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 650ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Base Layer
   @layer base
   ========================================================================== */

/**
 * Smooth scrolling behavior
 * @supports (scroll-behavior: smooth)
 */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Gallery Image Animations (secuencial, determinística 1→4)
   Se dispara por imagen (no por contenedor) para evitar "random" cuando cargan.
   ========================================================================== */

.team-gallery img,
.gallery-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;

  /* Estado base: oculto */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px) translateZ(0);
  will-change: transform, opacity, visibility;
  backface-visibility: hidden;
}

/* El JS marca cuando la imagen ya cargó */
.team-gallery img.gallery-loaded,
.gallery-img.gallery-loaded {
  visibility: hidden;
}

/* Mostrar + animar en el momento exacto (controlado por JS) */
.team-gallery img.gallery-show,
.gallery-img.gallery-show {
  visibility: visible;
  animation: slideInFromLeft var(--duration-slow) var(--easing-default) forwards;
}

/* Hover */
.team-gallery img:hover,
.gallery-img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Section Visibility States
   @description Estados de visibilidad para secciones con fade-in
   ========================================================================== */

/**
 * Section visible state
 * Applied via IntersectionObserver in JavaScript
 */
.fade-section.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* ==========================================================================
   Keyframe Animations
   @keyframes
   ========================================================================== */

/**
 * Slide in from left with blur
 * @animation slideInFromLeft
 */
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
    /* filter: blur(6px); */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    /* filter: blur(0); */
  }
}


/* ==========================================================================
   Tooltip Component
   @component tooltip
   @description Custom tooltips usando pseudo-elementos
   ========================================================================== */

/**
 * Tooltip container
 * @requires data-tooltip attribute
 */
.contact-icon[data-tooltip] {
  position: relative;
}

/**
 * Tooltip bubble
 * @pseudo ::after
 */
.contact-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) scale(0.95);
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-text);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
  font-size: 0.8125rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 
    opacity var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
  box-shadow: var(--shadow-md);
  z-index: 100;
}

/**
 * Tooltip arrow
 * @pseudo ::before
 */
.contact-icon[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-default);
  z-index: 100;
}

/**
 * Tooltip visible state (hover/focus)
 */
.contact-icon[data-tooltip]:hover::after,
.contact-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.contact-icon[data-tooltip]:hover::before,
.contact-icon[data-tooltip]:focus-visible::before {
  opacity: 1;
}

/**
 * Hide tooltips on mobile (touch devices)
 * @media (max-width: 480px)
 */
@media (max-width: 480px) {
  .contact-icon[data-tooltip]::after,
  .contact-icon[data-tooltip]::before {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile Menu / Hamburger Animation
   @component mobile-menu
   ========================================================================== */

/**
 * Hamburger button open state
 * Transforms into X when menu is open
 */
.menu-open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.menu-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.menu-open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ==========================================================================
   Hero Section Animations
   @component hero
   ========================================================================== */

/**
 * Hero content fade-in animation on load
 */
.hero-content {
  animation: heroFadeIn 1.2s ease-out forwards;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ==========================================================================
   Microinteractions
   @component microinteractions
   ========================================================================== */

/**
 * Card hover lift effect
 */
.card-hover {
  transition: transform var(--duration-normal) var(--easing-default),
              box-shadow var(--duration-normal) var(--easing-default);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
   FIX v3.0: Testimonial cards — ELIMINADAS las animaciones fadeInUp
   que bloqueaban el transform via fill-mode:forwards.
   
   ANTES (ROTO):
   .fade-section.visible article:nth-child(1) {
     animation: fadeInUp 0.6s ease-out 0.1s forwards;  <-- forwards congela transform
     opacity: 0;
   }
   
   AHORA: La entrada y el XUP se manejan 100% desde JS con inline styles
   y transition (sin animation, sin fill-mode, sin conflictos).
   ========================================================================= */

/* fadeInUp se mantiene SOLO para uso general (no testimonials) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


/**
 * Floating WhatsApp button entrance
 */
#floating-whatsapp {
  opacity: 1;
  transform: scale(1);
  animation: whatsappPulse 5s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Pulso premium infinito */
@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
  }
}

/* Ajuste para mobile */
@media (max-width: 480px) {
  #floating-whatsapp {
    animation: whatsappPulseMobile 4s ease-in-out infinite;
  }

  @keyframes whatsappPulseMobile {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    }
    70% {
      box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
    }
  }
}

/* Estabilización del contenido interno (texto e ícono) */
#floating-whatsapp span,
#floating-whatsapp i {
  transform: translateZ(0);
}


/* Ajuste de altura uniforme para botones en mobile */
@media (max-width: 640px) {
  #floating-whatsapp {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 1rem !important;
  }
}

/* === Botón secundario CTA === */

/* == Blanco translúcido == */
.cta-secondary {
  background: rgba(249,254,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(249,254,255,0.3);
  color: #f9feff;
}

.cta-secondary:hover {
  background: rgba(249,254,255,0.3);
  border-color: rgba(249,254,255,0.5);
  box-shadow: 0 0 15px rgba(249,254,255,0.35);
}


/**
 * Stats counter animation (number emphasis)
 */
.hero-content .text-4xl,
.hero-content .text-5xl {
  animation: countPulse 2s ease-out forwards;
}

@keyframes countPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/**
 * Section border glow on hover
 */
.fade-section {
  transition: 
    opacity 1s ease-out,
    transform 1s ease-out,
    filter 0.8s ease-out,
    border-color 0.3s ease;
}

.fade-section:hover {
  border-color: currentColor;
}

.fade-section[data-accent="gray"]:hover {
  border-color: var(--color-accent-gray);
}

.fade-section[data-accent="teal"]:hover {
  border-color: var(--color-accent-teal);
}

.fade-section[data-accent="pink"]:hover {
  border-color: var(--color-accent-pink);
}

.fade-section[data-accent="orange"]:hover {
  border-color: var(--color-accent-orange);
}

/* ==========================================================================
   Utility Classes
   @layer utilities
   ========================================================================== */

/**
 * Screen reader only text
 * @utility sr-only
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/**
 * Custom scrollbar (webkit)
 */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/**
 * Focus visible styles for accessibility
 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent-teal);
  outline-offset: 2px;
}

/**
 * Selection color
 */
::selection {
  background: var(--color-accent-pink);
  color: var(--color-text);
}

/* Rebote único y elegante para botón volver arriba */
@keyframes arrowBounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

#back-to-top:hover i,
#back-to-top:focus i {
  animation: arrowBounce 0.6s ease-in-out;
}

@keyframes fadeBlur {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}


/* Animación inicial Hero */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-hero {
  animation: fadeSlide 1s ease forwards;
}

/* Animación inicial contenido con blur */
.animate-hero .hero-content {
  animation: fadeBlur 1.2s ease forwards;
}

/* Fade progresivo con scroll */
.hero-content {
  transition: opacity 0.2s linear, transform 0.2s linear, filter 0.2s linear;
}

/* Logos */
.section-logo {
  object-fit: contain;
}

/* Gradiente animado */
.animate-gradient-premium {
  background-size: 200% 200%;
  animation: premiumFlow 12s ease-in-out infinite;
}

@keyframes premiumFlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(15deg) brightness(1.05);
  }
}

/* ==========================================================
   Premium Footer Links
   ========================================================== */

.footer-links a {
  position: relative;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.6);
  filter: blur(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.footer-links a:hover::after {
  opacity: 0.7;
  transform: scaleX(1);
}

@media (max-width: 821px) {
  .footer-links a {
    transform: none !important;
  }

  .footer-links a::after {
    display: none;
  }
}


/* Ajuste de scroll para que el botón "Descubrí nuestras marcas" lleve al tope exacto */
#header {
  scroll-margin-top: 80px;
}

/* Glow + Bounce Effect */
/* .logo-glow {
  transition: filter 0.4s ease, transform 0.5s ease;
  will-change: filter, transform;
} */

/* .logo-glow.glowing {
  animation: logoGlowBounce 1.2s ease-in-out forwards;
} */

/* Glow + bounce genérico (blanco base) */
/* @keyframes logoGlowBounce {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  30% {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.4));
  }
  60% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.2));
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
} */


/* .logo-glow[data-glow-color="teal"].glowing {
  animation: logoGlowBounceDoubleTeal 2.4s ease-in-out forwards;
}
@keyframes logoGlowBounceDoubleTeal {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-teal)); }
  20% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px var(--color-accent-teal)); }
  40% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-teal)); }
  60% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px var(--color-accent-teal)); }
  80% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-teal)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-teal)); }
}

.logo-glow[data-glow-color="pink"].glowing {
  animation: logoGlowBounceDoublePink 2.4s ease-in-out forwards;
}
@keyframes logoGlowBounceDoublePink {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-pink)); }
  20% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px var(--color-accent-pink)); }
  40% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-pink)); }
  60% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px var(--color-accent-pink)); }
  80% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-pink)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-pink)); }
}

.logo-glow[data-glow-color="orange"].glowing {
  animation: logoGlowBounceDoubleOrange 2.4s ease-in-out forwards;
}
@keyframes logoGlowBounceDoubleOrange {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-orange)); }
  20% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px var(--color-accent-orange)); }
  40% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-orange)); }
  60% { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 12px var(--color-accent-orange)); }
  80% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-orange)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 var(--color-accent-orange)); }
} */


/* ============================
   Glow premium Nike/Apple style
   ============================ */

.logo-glow {
  transition: filter 0.4s ease, transform 0.5s ease;
  will-change: filter, transform;
}

   .logo-glow.glowing {
  animation: logoGlowPremium 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Premium single bounce */
@keyframes logoGlowPremium {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }

  35% {
    transform: translateY(-10px) scale(1.06);
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.15));
  }

  65% {
    transform: translateY(0) scale(1.01);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.08));
  }

  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}

.logo-glow[data-glow-color="teal"].glowing {
  animation: logoGlowTeal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.logo-glow[data-glow-color="pink"].glowing {
  animation: logoGlowPink 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.logo-glow[data-glow-color="orange"].glowing {
  animation: logoGlowOrange 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes logoGlowTeal {
  35% {
    filter:
      drop-shadow(0 0 8px rgba(84,186,198,0.95))
      drop-shadow(0 0 22px rgba(84,186,198,0.75))
      drop-shadow(0 0 44px rgba(84,186,198,0.45))
      drop-shadow(0 0 80px rgba(84,186,198,0.18));
  }
}

@keyframes logoGlowPink {
  35% {
    filter:
      drop-shadow(0 0 8px rgba(229,64,143,0.95))
      drop-shadow(0 0 22px rgba(229,64,143,0.75))
      drop-shadow(0 0 44px rgba(229,64,143,0.45))
      drop-shadow(0 0 80px rgba(229,64,143,0.18));
  }
}

@keyframes logoGlowOrange {
  35% {
    filter:
      drop-shadow(0 0 8px rgba(232,68,30,0.95))
      drop-shadow(0 0 22px rgba(232,68,30,0.75))
      drop-shadow(0 0 44px rgba(232,68,30,0.45))
      drop-shadow(0 0 80px rgba(232,68,30,0.18));
  }
}



/* Para PNG fallback (si no migras ya): Usa mask para "cortar" glow cuadrado */
.logo-glow:not([src$=".svg"]) {
  mask-image: url('path/to/mask.png'); /* Si tienes masks, pero SVG es mejor */
  mask-size: contain;
}

/* ================================
   Testimonios Mobile — Carrusel horizontal
   ================================ */
@media (max-width: 821px) {
  .testimonials-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .testimonials-grid article {
    flex: 0 0 90%;
    scroll-snap-align: start;
    display: flex; /* Make article flex container */
    min-height: 360px; /* Adjust based on longest content, test in devices */
  }

  .testimonials-grid article .testimonial-card {
    flex-grow: 1; /* Stretch to fill article */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space content evenly if needed */
  }

  /* Optional: if text varies too much, add overflow-hidden or ellipsis */
  .testimonials-grid p {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .testimonials-grid::-webkit-scrollbar {
    display: none;
  }
}

/* ================================
   Indicadores del carrusel (puntos)
   ================================ */
.carousel-indicators .dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 0.6;
  transition: background-color 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.carousel-indicators .dot.active {
  opacity: 1;
  transform: scale(1.4);
}

/* Colores aplicados SOLO cuando el dot está activo */
.carousel-indicators .dot.active[data-palette="teal"] {
  background-color: #14b8a6;
}
.carousel-indicators .dot.active[data-palette="teal"]::after {
  background-color: #14b8a6;
}

.carousel-indicators .dot.active[data-palette="pink"] {
  background-color: #ec4899;
}
.carousel-indicators .dot.active[data-palette="pink"]::after {
  background-color: #ec4899;
}

.carousel-indicators .dot.active[data-palette="orange"] {
  background-color: #f97316;
}
.carousel-indicators .dot.active[data-palette="orange"]::after {
  background-color: #f97316;
}

/* Onda expansiva repetida */
.carousel-indicators .dot.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  animation: wavePulse 2s infinite ease-out;
}

/* Animación de onda */
@keyframes wavePulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* ================================
   Testimonios Desktop — NUEVO: Solo grid de la vista activa
   El JS controla qué cards se muestran. No hay scroll horizontal.
   No hay overflow:hidden que clipee el XUP.
   ================================ */
@media (min-width: 822px) {
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.25rem 0;     /* Espacio vertical para el XUP */
    overflow: visible;       /* NUNCA hidden */
  }

  /* Ocultamos las cards que no pertenecen a la vista activa */
  .testimonials-grid article {
    display: none;           /* JS las muestra selectivamente */
  }

  .testimonials-grid article.in-view {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    border-radius: 1rem;
    /* 
     * Transición state-driven (no CSS animation):
     * opacity + transform controlados por inline style desde JS.
     * Sin @keyframes, sin animation-fill-mode, sin conflictos.
     */
    transition: 
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.35s ease-out;
    will-change: transform, opacity, box-shadow;
  }

  .testimonials-grid article.in-view .testimonial-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Modo SLIDING: durante el cambio de bloque, las cards deben permanecer SIEMPRE en estado inactivo real
     (evita que el XUP/transform contamine el trackslide). */
  .testimonials-grid.is-sliding article,
  .testimonials-grid.is-sliding article.in-view {
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .testimonials-grid.is-sliding article .testimonial-card {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
  }


  /* Estado XUP: elevación de la card activa */
  .testimonials-grid article.in-view.focus {
    z-index: 10;
  }
}


/* ================================
   Carousel de Marcas (SVG SAFE)
   ================================ */

.partners-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: scroll 30s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

.partner-logo {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  border-radius: 0.75rem;
  padding: 0.75rem;

  width: 180px;
  height: 180px;
  min-width: 180px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;

  transition: transform 0.3s ease, opacity 0.3s ease;
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transform: translateZ(0);
  transition: opacity 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.05);
}

.partner-logo:hover img {
  opacity: 1;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carousel-track:hover {
  animation-play-state: paused;
}

@media (max-width: 640px) {
  .partner-logo {
    width: 120px;
    height: 120px;
    min-width: 120px;
  }

  .carousel-track {
    gap: 1rem;
    animation-duration: 20s;
  }
}

/* =========================
   Testimonial transitions & pulse
   ========================= */
.testimonials-grid article.in-view {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease-out;
  transform-origin: center top;
}

.testimonial-card {
  transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
  border: 1px solid rgba(255,255,255,0.06);
  background-color: rgba(255,255,255,0.02);
}

/* Dot micro-pulse on re-click */
.carousel-indicators .dot.dot-pulse {
  animation: dotPulse 260ms ease-out;
}
@keyframes dotPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

/* Respect user reduced motion */
@media (prefers-reduced-motion: reduce) {
  .testimonials-grid article.in-view,
  .testimonial-card,
  .carousel-indicators .dot {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 821px) {

  /* Reducimos blur para performance */
  .glass,
  .glass-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Nunca tocar filtros de logos */
  .logo-glow,
  .logo-glow.glowing {
    filter: none;
  }

}

/* ==========================================================
   iOS Glow Fix
   ========================================================== */
@supports (-webkit-touch-callout: none) {
  .logo-glow {
    position: relative;
    z-index: 1;
  }

  .logo-glow::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: -1;
  }

  .logo-glow.glowing::after {
    opacity: 1;
  }

  .logo-glow[data-glow-color="teal"].glowing::after {
    box-shadow:
      0 0 16px rgba(84,186,198,0.9),
      0 0 40px rgba(84,186,198,0.6),
      0 0 80px rgba(84,186,198,0.3);
  }

  .logo-glow[data-glow-color="pink"].glowing::after {
    box-shadow:
      0 0 16px rgba(229,64,143,0.9),
      0 0 40px rgba(229,64,143,0.6),
      0 0 80px rgba(229,64,143,0.3);
  }

  .logo-glow[data-glow-color="orange"].glowing::after {
    box-shadow:
      0 0 16px rgba(232,68,30,0.9),
      0 0 40px rgba(232,68,30,0.6),
      0 0 80px rgba(232,68,30,0.3);
  }
}


/* === Block 5 (mobile motion): remove blur, keep fade/translate === */
@media (hover: none) and (pointer: coarse) {
  .fade-section,
  .fade-section.visible {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =========================================================
   SECTION BREATHING (global vertical rhythm)
   Safe add-on: only adds spacing between sections.
   ========================================================= */
:root{ --section-gap: 32px; }
@media (min-width: 640px){ :root{ --section-gap: 56px; } }
@media (min-width: 768px){ :root{ --section-gap: 84px; } }
@media (min-width: 1024px){ :root{ --section-gap: 112px; } }

/* Prefer flex gap (no margin-collapse surprises) */
main{
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* Typography base (safe override) */
:root{
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* iOS/macOS: prefer system-ui (SF) */
@supports (-webkit-touch-callout: none){
  :root{
    --font-sans: system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Inter, sans-serif;
  }
}

html, body{
  font-family: var(--font-sans);
}

/* Typography polish (safe, no size changes) */
h1 { line-height: 1.05; letter-spacing: -0.02em; }
h2 { line-height: 1.12; letter-spacing: -0.015em; }
h3 { line-height: 1.18; letter-spacing: -0.01em; }

/* Paragraph rhythm */
p { line-height: 1.55; }

/* ==========================================================================
   Desktop Exit Lite (visual) — make section exit perceptible (Apple-like)
   SAFE: only affects .fade-section visuals on tablet/desktop, no layout primitives
   ========================================================================== */

@media (min-width: 768px){
  section.fade-section{
    /* Slightly dim + micro shift when not in view */
    opacity: 0.78 !important;
    transform: translate3d(0, 10px, 0) !important;
    filter: blur(1px) !important;
    will-change: opacity, transform, filter;
  }

  section.fade-section.visible{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: blur(0) !important;
  }
}

/* Desktop: a touch cleaner (less blur) */
@media (min-width: 1024px){
  section.fade-section{
    opacity: 0.82 !important;
    transform: translate3d(0, 8px, 0) !important;
    filter: blur(0.8px) !important;
  }
}