/* moncreative — multimedia.css
   /wp-content/themes/everhue/assets/css/multimedia.css

   NOTA: Los estilos base (variables, cursor, background, hero,
   sections comunes) se han movido a services-common.css para
   eliminar ~60KB de CSS duplicado (P1 de la auditoría 2026).

   Asegúrate de encolar services-common.css ANTES de este archivo.
   ================================================================ */

    /* ── SERVICES SECTION ── */
    .services-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
      margin-top: 80px;
    }
    .services-left {}
    .services-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      margin-top: 50px;
    }
    .service-item {
      padding: 24px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      position: relative;
      overflow: hidden;
      transition: all 0.4s;
      cursor: auto; /* cursor personalizado via JS en desktop */
    }
    .service-item:first-child { border-radius: 16px 0 0 0; }
    .service-item:nth-child(2) { border-radius: 0 16px 0 0; }
    .service-item:nth-child(7) { border-radius: 0 0 0 16px; }
    .service-item:last-child { border-radius: 0 0 16px 0; }
    .service-item::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 0; height: 2px;
      background: linear-gradient(90deg, var(--sky), var(--orange));
      transition: width 0.4s;
    }
    .service-item:hover::before { width: 100%; }
    .service-item:hover {
      background: rgba(15,188,212,0.06);
      border-color: rgba(15,188,212,0.2);
    }
    .service-num {
      font-family: 'Unbounded', sans-serif;
      font-size: 10px;
      color: var(--sky);
      letter-spacing: 2px;
      margin-bottom: 10px;
      opacity: 0.7;
    }
    .service-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.4;
    }

    /* ── STATS BAR ── */
    .stats-section {
      padding: 80px 0;
      background: var(--bg2);
    }
    .stats-inner {
      max-width: 1200px;
      margin: 0 auto;
      /* padding: 0 40px; ← ELIMINADO - El padding va en stat-block, NO aquí */
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 24px;
      overflow: hidden;
      background: rgba(255,255,255,0.02);
      backdrop-filter: blur(10px);
    }
    .stat-block {
      padding: 50px 40px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.06);
      position: relative;
      overflow: hidden;
      transition: background 0.4s;
      cursor: auto; /* cursor personalizado via JS en desktop */
    }
    .stat-block:last-child { border-right: none; }
    .stat-block::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 0; height: 1px;
      background: linear-gradient(90deg, var(--sky), var(--orange));
      transition: width 0.4s;
    }
    .stat-block:hover::after { width: 80%; }
    .stat-block:hover { background: rgba(15,188,212,0.04); }
    .stat-num {
      font-family: 'Unbounded', sans-serif;
      font-size: 52px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 14px;
      background: linear-gradient(135deg, var(--sky-light) 0%, var(--sky) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-block:nth-child(even) .stat-num {
      background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-lbl {
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 400;
    }

    /* ── PROCESS SECTION ── */
    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 60px;
    }
    .process-item {
      padding: 32px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      transition: all 0.4s;
      cursor: auto; /* cursor personalizado via JS en desktop */
    }
    .process-item:hover {
      background: rgba(15,188,212,0.06);
      border-color: rgba(15,188,212,0.2);
      transform: translateY(-4px);
    }
    .process-num {
      font-family: 'Unbounded', sans-serif;
      font-size: 42px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--sky) 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 16px;
      line-height: 1;
    }
    .process-title {
      font-family: 'Unbounded', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #fff;  /* ← Blanco puro */
      margin-bottom: 12px;
    }
    .process-desc {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* ── FAQ SECTION ── */
    .faq-section {
      padding: 120px 0;
    }
    .faq-header {
      text-align: center;
      margin-bottom: 60px;
    }
    .faq-header .section-tag {
      justify-content: center;
    }
    .faq-header .section-tag::before { display: none; }
    .faq-header .section-title {
      margin: 0 auto 16px;
    }
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      max-width: 1000px;
      margin: 0 auto;
    }
    .faq-item {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      cursor: auto; /* cursor personalizado via JS en desktop */
    }
    .faq-item:hover {
      border-color: rgba(15,188,212,0.2);
      background: rgba(15,188,212,0.05);
    }
    .faq-item.active {
      border-color: rgba(15,188,212,0.3);
      background: rgba(15,188,212,0.08);
    }
    .faq-question {
      padding: 28px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      cursor: auto; /* cursor personalizado via JS en desktop */
    }
    .faq-q-text {
      font-family: 'Unbounded', sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: var(--white);
      line-height: 1.4;
    }
    .faq-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(15,188,212,0.1);
      border: 1px solid rgba(15,188,212,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      background: var(--sky);
      transition: all 0.3s;
    }
    .faq-icon::before {
      width: 14px; height: 2px;
    }
    .faq-icon::after {
      width: 2px; height: 14px;
    }
    .faq-item.active .faq-icon {
      background: var(--sky);
      border-color: var(--sky);
      transform: rotate(90deg);
    }
    .faq-item.active .faq-icon::after {
      opacity: 0;
      transform: scaleX(0);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
      opacity: 0;
    }
    .faq-item.active .faq-answer {
      max-height: 400px;
      opacity: 1;
    }
    .faq-answer-inner {
      padding: 0 32px 28px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
      font-weight: 300;
    }
    .faq-answer-inner strong {
      color: var(--white);
      font-weight: 500;
    }

    /* ── CTA SECTION ── */
.cta-inner::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(15,188,212,0.05) 60deg, transparent 120deg, rgba(255,107,43,0.04) 180deg, transparent 240deg, rgba(15,188,212,0.03) 300deg, transparent 360deg);
  animation: rotate-conic 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes rotate-conic {
  to { transform: rotate(360deg); }
}
.cta-inner > * { position: relative; z-index: 1; }

.cta-section {
      padding: 140px 0;
      text-align: center;
    }
    .cta-inner {
      position: relative;
      overflow: hidden;
      max-width: 800px;
      margin: 0 auto;
      padding: 60px 40px;
      background: linear-gradient(160deg, rgba(15,188,212,0.08) 0%, rgba(255,107,43,0.05) 100%);
      border: 1px solid rgba(15,188,212,0.15);
      border-radius: 32px;
      backdrop-filter: blur(20px);
    }
    .cta-title {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 700;
      margin-bottom: 20px;
      color: #fff;  /* ← Blanco puro */
    }
    .cta-body {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 40px !important;
      max-width: 600px;
      margin-left: auto !important; /* ← Centrar bloque */
      margin-right: auto !important; /* ← Centrar bloque */
      text-align: center !important; /* ← Centrar texto dentro del bloque */
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }
      .hero-visual {
        order: -1;
      }
      .services-grid {
        grid-template-columns: 1fr;
      }
      .stats-inner {
        grid-template-columns: repeat(2, 1fr);
      }
      .stat-block:nth-child(2) { border-right: none; }
      .stat-block:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.06); }
      .process-grid {
        grid-template-columns: 1fr;
      }
      .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) { /* ← 900px como branding.php */
      
      /* ← CRÍTICO: Prevenir overflow horizontal */
      body {
        overflow-x: hidden;
      }
      
      .container {
        padding: 0 24px; /* ← Padding lateral para móvil */
        width: 100%;
        max-width: 100%;
      }
      
      /* Hero section */
      .hero {
        padding: 100px 0 60px;
      }
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
      }
      .hero-visual {
        display: none;
      }
      
      /* Stats - AHORA DENTRO DEL CONTAINER */
      .stats-inner {
        grid-template-columns: repeat(2,1fr); /* ← 2 columnas como branding.php */
        max-width: 100%;
      }
      .stat-block:nth-child(2) { border-right: none; }
      .stat-block:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.06); }
      
      /* Números más chicos para que se lean completos en móvil */
      .stat-num {
        font-size: 29px !important; /* De 52px a 38px - suficiente para 3 dígitos */
      }
      .stat-lbl {
        font-size: 9px; /* Un poco más chico */
        letter-spacing: 1.5px;
      }
      
      /* Sections padding */
      section {
        padding: 80px 0;
      }
      
      /* Services & FAQ */
      .services-grid {
        grid-template-columns: 1fr;
      }
      .faq-question {
        padding: 24px 20px;
      }
      .faq-answer-inner {
        padding: 0 20px 24px;
      }
      
      /* CTA */
      .cta-inner {
        padding: 50px 30px;
      }
      
      /* Textos largos */
      .hero-body,
      .section-body {
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
    
    /* ← IPHONE SE / GALAXY S8+ (≤375px) - Padding reducido */
    @media (max-width: 375px) {
      
      /* ← CRÍTICO: Prevenir overflow en body */
      body {
        overflow-x: hidden;
      }
      
      .container {
        padding: 0 16px; /* ← De 24px a 16px para más espacio */
        width: 100%;
        max-width: 100%;
      }
      
      .hero {
        padding: 80px 0 50px;
      }
      
      /* Stats */
      .stats-inner {
        grid-template-columns: repeat(2,1fr);
      }
      
      /* Números aún más chicos */
      .stat-num {
        font-size: 29px !important; /* De 38px a 34px */
      }
      .stat-lbl {
        font-size: 8px; /* De 9px a 8px */
        letter-spacing: 1px;
      }
      
      section {
        padding: 60px 0;
      }
      
      .cta-inner {
        padding: 40px 20px;
      }
    }
/* ── PERFORMANCE: GPU isolation para animaciones ── */
.hero-title,
.hero-visual,
.hero-float-card,
.reveal {
  will-change: transform, opacity;
}

/* ── CLS: Reservar espacio para imágenes antes de cargar ── */
.hero-img-wrap {
  min-height: 300px;
  background: rgba(255,255,255,0.04);
}

/* ── PERFORMANCE: Pausar animaciones cuando no hay foco ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── A11Y: Focus visible en teclado ── */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sky, #0fbcd4);
  outline-offset: 3px;
}