/* ============================================
   THEME OVERRIDE - Sistema de tema completo
   VillapelWebs - Warm Beige + Terracotta Theme
   ============================================
   
   Este archivo importa todos los módulos del tema
   para mantener compatibilidad con el sistema existente.
   ============================================ */

@import './theme/01-colors.css';
@import './theme/02-gradients.css';
@import './theme/03-buttons.css';
@import './theme/04-cards.css';
@import './theme/05-typography.css';
@import './theme/06-forms.css';
@import './theme/07-navbar-theme.css';
/* @import './theme/08-mobile-menu.css'; */
/* DISABLED - Using new mobile-menu-new.css */
@import './theme/09-responsive-theme.css';
@import './theme/10-components.css';
@import './theme/11-desktop-optimizations.css';

/* IT Hero Title formatting */
html[lang="it"] .hero h1 .text-gradient-light {
   display: block !important;
   width: 100% !important;
}

/* ============================================
   CRITICAL OVERRIDES - Máxima Prioridad
   ============================================ */

/* 1. PRICING GRID - MOBILE & DESKTOP OPTIMIZATION */

/* MÓVILES: Una sola columna (hasta 767px) - FORZADO */
@media (max-width: 767px) {

   .pricing-grid,
   .pricing-grid-4,
   .pricing .pricing-grid,
   .pricing .pricing-grid-4,
   section.pricing .pricing-grid-4 {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 1.5rem !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 auto !important;
   }

   .pricing-card,
   .pricing .pricing-card {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
   }

   .pricing-card.featured,
   .pricing .pricing-card.featured {
      transform: none !important;
      scale: 1 !important;
      margin: 0 !important;
      order: 0 !important;
      /* FORZAR orden natural (Starter -> Pro) */
      overflow: visible !important;
      /* Asegurar que el tag no se corte */
   }
}

/* Espaciado extra para sección de Resultados */
#casos.results {
   padding-top: 8rem !important;
   /* Aún más despegado */
   margin-top: 4rem !important;
   /* Margen extra */
}

/* Estilo Premium "Clean Pill" para Etiqueta "Recomendado" */
.popular-tag {
   position: absolute !important;
   top: -16px !important;
   /* Posición flotante perfecta */
   left: 50% !important;
   transform: translateX(-50%) !important;

   background: #FFFFFF !important;
   color: #111827 !important;

   /* Tipografía moderna */
   font-family: 'Outfit', sans-serif !important;
   font-size: 0.75rem !important;
   font-weight: 700 !important;
   letter-spacing: 0.5px !important;
   text-transform: uppercase !important;

   /* Layout interno */
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 6px 16px !important;
   gap: 6px !important;
   white-space: nowrap !important;

   /* Forma y Borde Clean */
   border-radius: 9999px !important;
   /* Full rounded pill */
   border: 1px solid rgba(0, 0, 0, 0.08) !important;

   /* Sombra suave y elegante (Glass shadow) */
   box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06),
      0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;

   z-index: 20 !important;
   min-width: max-content !important;
}

/* Estrella dorada solo con color */
.popular-tag::before {
   content: "★" !important;
   color: #F59E0B !important;
   /* Dorado ambar */
   font-size: 1rem !important;
   margin-right: 2px !important;
}

/* Ocultar emoji original si existe en HTML */
.popular-tag span::before {
   display: none !important;
}

/* Asegurar que la CARD contenedora permita salir al tag en Desktop también */
.pricing-card.featured {
   overflow: visible !important;
   z-index: 5 !important;
   position: relative !important;
}

/* Espacio interno extra para que el Badge NO TAPE el título */
.pricing-card.featured .card-header {
   padding-top: 1.5rem !important;
   /* Espacio reservado para el badge */
}

/* TABLETS: Dos columnas (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

   .pricing-grid,
   .pricing-grid-4 {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 1.5rem !important;
      max-width: 900px !important;
      margin: 0 auto !important;
   }

   .pricing-card.featured {
      transform: none !important;
   }
}

/* DESKTOP: Cuatro columnas optimizadas (1024px+) */
@media (min-width: 1024px) {
   .pricing-grid-4 {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: clamp(1rem, 2vw, 2rem) !important;
      max-width: 1400px !important;
      margin: 0 auto 60px !important;
      padding: 20px !important;
   }

   .pricing-card {
      padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px) !important;
   }

   /* FIX: Quitar transform: scale para evitar texto borroso */
   .pricing-card.featured {
      transform: none !important;
      z-index: 2 !important;
      /* Compensar la falta de scale con borde y sombra más destacados */
      border-width: 2px !important;
      border-color: rgba(249, 115, 22, 0.5) !important;
      box-shadow: 0 20px 40px -10px rgba(249, 115, 22, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.1) !important;
      /* Renderizado nítido */
      -webkit-font-smoothing: antialiased !important;
      -moz-osx-font-smoothing: grayscale !important;
      text-rendering: optimizeLegibility !important;
   }

   .pricing-card.featured:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.25), 0 12px 24px -6px rgba(0, 0, 0, 0.1) !important;
   }

   /* FIX: "Cotización Personalizada" Text Size */
   .pricing-card-custom .price .amount {
      font-size: clamp(1.5rem, 2vw, 2rem) !important;
      line-height: 1.1 !important;
      letter-spacing: -0.02em !important;
      display: block !important;
   }
}


/* 2. UI VISUAL OPTIMIZATIONS (FIX "QUALITY VILLAPEL" BADGE) */

.visual-right.glass-card {
   position: relative !important;
   padding: 90px 30px 30px 30px !important;
   overflow: visible !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
   border: 1px solid var(--color-border) !important;
   border-radius: 24px !important;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
   /* HIDE SCROLLBARS */
   -ms-overflow-style: none !important;
   scrollbar-width: none !important;
}

.visual-right.glass-card::-webkit-scrollbar {
   display: none !important;
}

.ui-mockup {
   width: 100% !important;
   background: var(--color-surface) !important;
   border-radius: 16px !important;
   padding: 24px !important;
   border: 1px solid var(--color-border) !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 20px !important;
   box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2) !important;
   overflow: hidden !important;
   /* HIDE SCROLLBARS */
   -ms-overflow-style: none !important;
   scrollbar-width: none !important;
}

.ui-mockup::-webkit-scrollbar {
   display: none !important;
}

/* Header del mockup (puntos) */
.ui-header {
   display: flex !important;
   gap: 8px !important;
   margin-bottom: 4px !important;
   padding-bottom: 12px !important;
   border-bottom: 1px solid var(--color-border) !important;
}

.ui-dot {
   width: 10px !important;
   height: 10px !important;
   border-radius: 50% !important;
}

.ui-dot:nth-child(1) {
   background: #FF5F56 !important;
}

.ui-dot:nth-child(2) {
   background: #FFBD2E !important;
}

.ui-dot:nth-child(3) {
   background: #27C93F !important;
}

/* Cuerpo del mockup */
.ui-body {
   display: flex !important;
   flex-direction: column !important;
   gap: 16px !important;
   /* HIDE SCROLLBARS */
   -ms-overflow-style: none !important;
   scrollbar-width: none !important;
   overflow: hidden !important;
}

.ui-body::-webkit-scrollbar {
   display: none !important;
}

.ui-block {
   background: var(--color-surface-elevated) !important;
   border-radius: 6px !important;
}

.title-block {
   height: 14px !important;
   width: 60% !important;
   background: var(--color-text-secondary) !important;
   opacity: 0.3 !important;
}

.img-block {
   height: 140px !important;
   width: 100% !important;
   background: linear-gradient(135deg, var(--color-surface-elevated) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
   border: 1px dashed var(--color-border) !important;
   border-radius: 8px !important;
}

.ui-row {
   display: flex !important;
   gap: 12px !important;
}

.ui-col {
   flex: 1 !important;
   height: 70px !important;
   background: var(--color-surface-elevated) !important;
   border-radius: 8px !important;
   border: 1px solid var(--color-border) !important;
}

.ui-btn {
   height: 40px !important;
   width: 100% !important;
   background: var(--color-primary) !important;
   border-radius: 8px !important;
   margin-top: 8px !important;
   opacity: 0.8 !important;
}

/* Badge Flotante "Calidad Villapel" */
.ui-badge {
   position: absolute !important;
   top: -18px !important;
   right: 30px !important;
   background: #1a1a2e !important;
   color: #fff !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   padding: 10px 20px !important;
   border-radius: 100px !important;
   font-size: 0.9rem !important;
   font-weight: 600 !important;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
   z-index: 20 !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
   white-space: nowrap !important;
   transform: translateY(0) !important;
   transition: transform 0.3s ease !important;
}

.ui-badge:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Ajustes responsive Badge */
@media (max-width: 768px) {
   .visual-right.glass-card {
      margin-top: 40px !important;
      padding: 20px !important;
   }

   .ui-badge {
      right: 50% !important;
      transform: translateX(50%) !important;
      top: -15px !important;
   }

   .ui-badge:hover {
      transform: translateX(50%) translateY(-2px) !important;
   }
}

/* ============================================
   3. REVIEW CARDS - Mejoras Premium
   ============================================ */

/* Contenedor de reviews */
.reviews-section {
   padding-top: clamp(3rem, 6vw, 5rem) !important;
   padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* Grid de reviews con mejor espaciado */
.reviews-grid {
   gap: clamp(1.5rem, 4vw, 2.5rem) !important;
}

/* Review Card - Diseño Premium */
.review-card {
   position: relative !important;
   background: #FFFFFF !important;
   border: 1px solid #E5DDD3 !important;
   border-radius: 20px !important;
   padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   overflow: hidden !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 1.5rem !important;
}

/* Borde izquierdo decorativo con gradiente */
.review-card::before {
   content: '' !important;
   position: absolute !important;
   left: 0 !important;
   top: 0 !important;
   bottom: 0 !important;
   width: 4px !important;
   background: linear-gradient(180deg, #C17C5B 0%, #D4967D 50%, #C17C5B 100%) !important;
   border-radius: 20px 0 0 20px !important;
}

/* Efecto hover elegante */
.review-card:hover {
   transform: translateY(-4px) !important;
   border-color: #C17C5B !important;
   box-shadow: 0 12px 32px rgba(193, 124, 91, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Quote - Tipografía mejorada */
.review-quote {
   position: relative !important;
   font-size: clamp(1rem, 2vw, 1.125rem) !important;
   line-height: 1.75 !important;
   color: #374151 !important;
   font-weight: 400 !important;
   margin: 0 !important;
   padding-left: 2rem !important;
   padding-top: 0.5rem !important;
   font-style: normal !important;
}

/* Comillas decorativas grandes */
.review-quote::before {
   content: '"' !important;
   position: absolute !important;
   left: 0 !important;
   top: -0.5rem !important;
   font-size: 4rem !important;
   line-height: 1 !important;
   color: #C17C5B !important;
   opacity: 0.2 !important;
   font-family: Georgia, serif !important;
   font-weight: 700 !important;
}

/* Sección del autor - Diseño mejorado */
.review-author {
   display: flex !important;
   align-items: center !important;
   gap: 1rem !important;
   padding-top: 1rem !important;
   border-top: 1px solid #F3EDE5 !important;
   margin-top: auto !important;
}

/* Logo del autor - Estilo premium */
.review-author .author-logo-img {
   width: 56px !important;
   height: 56px !important;
   min-width: 56px !important;
   min-height: 56px !important;
   border-radius: 12px !important;
   object-fit: cover !important;
   border: 2px solid #F3EDE5 !important;
   background: #FFFFFF !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
   transition: all 0.3s ease !important;
}

.review-card:hover .author-logo-img {
   border-color: #C17C5B !important;
   box-shadow: 0 4px 12px rgba(193, 124, 91, 0.2) !important;
   transform: scale(1.05) !important;
}

/* Información del autor */
.author-info {
   display: flex !important;
   flex-direction: column !important;
   gap: 0.25rem !important;
   flex: 1 !important;
}

/* Nombre del autor */
.author-name {
   font-size: clamp(1rem, 2vw, 1.125rem) !important;
   font-weight: 600 !important;
   color: #111827 !important;
   margin: 0 !important;
   line-height: 1.4 !important;
}

/* Rol del autor */
.author-role {
   font-size: clamp(0.875rem, 1.8vw, 0.95rem) !important;
   color: #6B7280 !important;
   margin: 0 !important;
   line-height: 1.4 !important;
}

/* Estrellas de calificación (opcional, si quieres agregarlas) */
.review-rating {
   display: flex !important;
   gap: 0.25rem !important;
   margin-top: 0.5rem !important;
}

.review-rating .star {
   color: #FBBF24 !important;
   font-size: 1.125rem !important;
}

/* Responsive - Móviles */
@media (max-width: 767px) {
   .review-card {
      padding: 1.5rem 1.25rem !important;
      border-radius: 16px !important;
      gap: 1.25rem !important;
   }

   .review-quote {
      padding-left: 1.5rem !important;
      font-size: 1rem !important;
   }

   .review-quote::before {
      font-size: 3rem !important;
      left: -0.25rem !important;
   }

   .review-author {
      gap: 0.875rem !important;
      padding-top: 0.875rem !important;
   }

   .review-author .author-logo-img {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      min-height: 48px !important;
   }
}

/* Responsive - Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
   .review-card {
      padding: 2rem 1.75rem !important;
   }
}

/* Desktop - Mejoras adicionales */
@media (min-width: 1024px) {
   .review-card {
      padding: 2.5rem 2rem !important;
   }

   .reviews-grid {
      gap: 2.5rem !important;
   }
}

/* ============================================
   4. PORTFOLIO CARDS - Diseño Premium Premium
   ============================================ */

/* Contenedor de portfolio */
.results {
   padding-top: clamp(3rem, 6vw, 5rem) !important;
   padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* Grid de portfolio - Mobile First */
.results .portfolio-grid,
.portfolio-grid {
   display: grid !important;
   grid-template-columns: 1fr !important;
   gap: clamp(1.5rem, 4vw, 2.5rem) !important;
   width: 100% !important;
   max-width: 100% !important;
   overflow-x: visible !important;
}

/* Tablet - 2 columnas */
@media (min-width: 768px) {

   .results .portfolio-grid,
   .portfolio-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: clamp(1.5rem, 3vw, 2rem) !important;
   }
}

/* Desktop - 2 columnas (mantener 2 para mejor legibilidad) */
@media (min-width: 1024px) {

   .results .portfolio-grid,
   .portfolio-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 2.5rem !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
   }
}

/* Portfolio Card - Diseño Premium */
.portfolio-card {
   display: block !important;
   background: #FFFFFF !important;
   border: 1px solid #E5DDD3 !important;
   border-radius: 20px !important;
   overflow: hidden !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   text-decoration: none !important;
   color: inherit !important;
   cursor: pointer !important;
   position: relative !important;
}

.portfolio-card:hover {
   transform: translateY(-6px) !important;
   border-color: #C17C5B !important;
   box-shadow: 0 12px 32px rgba(193, 124, 91, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Wrapper de imagen */
.portfolio-image-wrapper {
   position: relative !important;
   width: 100% !important;
   height: 200px !important;
   background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   overflow: hidden !important;
   padding: 1.5rem !important;
}

/* Imagen del preview - Logo reducido */
.preview-image {
   width: 100% !important;
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 0.5rem !important;
   background: transparent !important;
   text-align: center !important;
}

.preview-logo-img {
   max-width: 95% !important;
   max-height: 180px !important;
   width: auto !important;
   height: auto !important;
   object-fit: contain !important;
   opacity: 0.9 !important;
   transition: transform 0.3s ease, opacity 0.3s ease !important;
   margin: 0 auto !important;
   display: block !important;
}

.portfolio-card:hover .preview-logo-img {
   transform: scale(1.05) !important;
   opacity: 1 !important;
}

/* Badge LIVE - Top left corner, red background */
.live-badge {
   position: absolute !important;
   top: 16px !important;
   left: 16px !important;
   background: #EF4444 !important;
   color: #FFFFFF !important;
   font-size: 0.7rem !important;
   font-weight: 700 !important;
   letter-spacing: 0.5px !important;
   text-transform: uppercase !important;
   padding: 6px 12px !important;
   border-radius: 100px !important;
   border: none !important;
   box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
   z-index: 10 !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
   white-space: nowrap !important;
   animation: none !important;
}

.live-badge::before {
   content: '' !important;
   display: none !important;
}

@keyframes pulse-dot {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.6;
      transform: scale(0.9);
   }
}

/* Contenido de la card */
.portfolio-content {
   padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 0.5rem !important;
}

/* Nombre del cliente - Título grande */
.portfolio-client-name {
   font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
   font-weight: 700 !important;
   color: #111827 !important;
   margin: 0 !important;
   line-height: 1.3 !important;
   letter-spacing: -0.01em !important;
}

/* Categoría/Industria */
.portfolio-category {
   font-size: clamp(0.875rem, 2vw, 0.95rem) !important;
   color: #6B7280 !important;
   margin: 0 0 0.75rem 0 !important;
   line-height: 1.5 !important;
   font-weight: 400 !important;
}

/* Resultado clave - OCULTO */
.portfolio-result {
   display: none !important;
}

.result-label {
   font-size: 0.8rem !important;
   color: #6B7280 !important;
   font-weight: 500 !important;
}

.result-value {
   font-size: 0.95rem !important;
   color: #C17C5B !important;
   font-weight: 700 !important;
   letter-spacing: -0.01em !important;
}

/* CTA - Botón beige/naranja sobre fondo claro */
.portfolio-cta {
   margin-top: auto !important;
   padding: 1rem 1.25rem !important;
   background: #F5F0EB !important;
   color: #DC5D38 !important;
   border-radius: 12px !important;
   font-size: 0.95rem !important;
   font-weight: 600 !important;
   text-align: center !important;
   transition: all 0.3s ease !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   border: none !important;
   cursor: pointer !important;
}

.portfolio-card:hover .portfolio-cta {
   background: #EDE4DC !important;
   transform: translateY(0) !important;
   box-shadow: 0 2px 8px rgba(220, 93, 56, 0.15) !important;
}

.portfolio-cta span {
   display: inline !important;
   width: auto !important;
}

/* Responsive - Móviles pequeños */
@media (max-width: 480px) {
   .portfolio-image-wrapper {
      height: 180px !important;
      padding: 1rem !important;
   }

   /* ============================================
   PORTFOLIO CARDS - RESPONSIVE OPTIMIZATIONS
   ============================================ */

   /* Tablet Landscape (1024px - 1279px) */
   @media (max-width: 1279px) and (min-width: 1024px) {
      .portfolio-grid {
         gap: 2rem !important;
         max-width: 1000px !important;
      }

      .portfolio-image-wrapper {
         height: 180px !important;
      }

      .preview-logo-img {
         max-height: 170px !important;
         max-width: 95% !important;
      }

      .portfolio-client-name {
         font-size: 1.35rem !important;
      }

      .portfolio-category {
         font-size: 0.9rem !important;
      }
   }

   /* Tablet Portrait (768px - 1023px) */
   @media (max-width: 1023px) and (min-width: 768px) {
      .portfolio-grid {
         grid-template-columns: 1fr !important;
         gap: 2rem !important;
         max-width: 600px !important;
      }

      .portfolio-image-wrapper {
         height: 200px !important;
      }

      .preview-logo-img {
         max-height: 175px !important;
         max-width: 95% !important;
      }

      .portfolio-content {
         padding: 1.5rem 1.5rem !important;
      }

      .live-badge {
         top: 14px !important;
         left: 14px !important;
         font-size: 0.675rem !important;
         padding: 5px 11px !important;
      }
   }

   /* Mobile Large (481px - 767px) */
   @media (max-width: 767px) and (min-width: 481px) {
      .portfolio-grid {
         grid-template-columns: 1fr !important;
         gap: 1.75rem !important;
         max-width: 100% !important;
      }

      .portfolio-card {
         border-radius: 16px !important;
      }

      .portfolio-image-wrapper {
         height: 180px !important;
         padding: 1.25rem !important;
      }

      .preview-logo-img {
         max-height: 160px !important;
         max-width: 90% !important;
      }

      .portfolio-content {
         padding: 1.5rem 1.25rem !important;
         gap: 0.5rem !important;
      }

      .portfolio-client-name {
         font-size: 1.3rem !important;
      }

      .portfolio-category {
         font-size: 0.875rem !important;
         margin-bottom: 0.5rem !important;
      }

      .portfolio-cta {
         padding: 0.875rem 1rem !important;
         font-size: 0.9rem !important;
      }

      .live-badge {
         top: 12px !important;
         left: 12px !important;
         font-size: 0.65rem !important;
         padding: 5px 10px !important;
      }

      .live-badge::before {
         display: none !important;
      }
   }

   /* Mobile Small (0px - 480px) */
   @media (max-width: 480px) {
      .portfolio-grid {
         grid-template-columns: 1fr !important;
         gap: 1.5rem !important;
         max-width: 100% !important;
         padding: 0 !important;
      }

      .portfolio-card {
         border-radius: 14px !important;
         box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
      }

      .portfolio-image-wrapper {
         height: 160px !important;
         padding: 1rem !important;
      }

      .preview-logo-img {
         max-width: 95% !important;
         max-height: 150px !important;
      }

      .portfolio-content {
         padding: 1.25rem 1rem !important;
         gap: 0.4rem !important;
      }

      .portfolio-client-name {
         font-size: 1.2rem !important;
         line-height: 1.25 !important;
      }

      .portfolio-category {
         font-size: 0.85rem !important;
         margin-bottom: 0.5rem !important;
      }

      .portfolio-cta {
         padding: 0.875rem 1rem !important;
         font-size: 0.875rem !important;
         border-radius: 10px !important;
      }

      .live-badge {
         top: 10px !important;
         left: 10px !important;
         font-size: 0.625rem !important;
         padding: 4px 9px !important;
      }

      .live-badge::before {
         display: none !important;
         margin-right: 1.5px !important;
      }
   }

   /* Desktop Large (1280px+) */
   @media (min-width: 1280px) {

      .results .portfolio-grid,
      .portfolio-grid {
         gap: 3rem !important;
         max-width: 1400px !important;
      }

      .portfolio-image-wrapper {
         height: 220px !important;
      }

      .preview-logo-img {
         max-height: 190px !important;
         max-width: 95% !important;
      }

      .portfolio-content {
         padding: 2rem !important;
      }

      .portfolio-client-name {
         font-size: 1.6rem !important;
      }

      .portfolio-category {
         font-size: 1rem !important;
      }

      .portfolio-cta {
         padding: 1.125rem 1.5rem !important;
         font-size: 1rem !important;
      }

      .live-badge {
         top: 18px !important;
         left: 18px !important;
         font-size: 0.75rem !important;
         padding: 7px 14px !important;
      }
   }

   /* Ultra-wide screens (1920px+) */
   @media (min-width: 1920px) {
      .portfolio-grid {
         max-width: 1600px !important;
         gap: 3.5rem !important;
      }

      .portfolio-image-wrapper {
         height: 240px !important;
      }

      .preview-logo-img {
         max-height: 110px !important;
      }
   }

   /* Eliminar estilos antiguos que puedan interferir */
   .portfolio-preview,
   .preview-overlay {
      display: none !important;
   }

   /* ============================================
   MOBILE MENU FIX - HIGH SPECIFICITY OVERRIDES
   ============================================ */

   @media (max-width: 768px) {

      /* 1. Force Navbar Positioning */
      body .navbar {
         position: fixed !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
         z-index: 1000 !important;
         background: #FFFFFF !important;
      }

      /* 2. Force Menu Positioning (ID Selector for max specificity) */
      #mobile-nav-menu.nav-links {
         display: flex !important;
         flex-direction: column !important;

         position: absolute !important;
         top: 100% !important;
         /* Starts exactly at bottom of navbar */
         left: 0 !important;
         right: 0 !important;

         width: 100% !important;
         max-width: 100vw !important;
         height: calc(100vh - 100%) !important;
         /* Fills rest of screen */

         background: #F6F1EB !important;
         z-index: 999 !important;
         /* Below navbar (1000) */

         padding: 20px !important;
         padding-bottom: 100px !important;

         /* Animation State: Hidden */
         transform: translateX(-100%) !important;
         opacity: 0 !important;
         visibility: hidden !important;
         transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s !important;

         /* Reset any conflicting styles */
         box-shadow: none !important;
         border: none !important;
         margin: 0 !important;
      }

      /* 3. Active State */
      #mobile-nav-menu.nav-links.active,
      #mobile-nav-menu.nav-links[aria-expanded='true'] {
         transform: translateX(0) !important;
         opacity: 1 !important;
         visibility: visible !important;
         transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s !important;
         pointer-events: auto !important;
      }

      /* 4. Fix Button Z-Index */
      body .mobile-menu-btn {
         z-index: 1001 !important;
         /* Above navbar and menu */
         position: relative !important;
         display: flex !important;
      }

      /* 5. Prevent Body Scroll but avoid jump */
      body.menu-open {
         overflow: hidden !important;
         height: 100vh !important;
         touch-action: none;
      }
   }

   /* ============================================
   MOBILE MENU FIX - ABSOLUTE FINAL OVERRIDES
   ============================================ */

   @media (max-width: 768px) {

      /* RESET Nav Links from Bundle */
      #mobile-nav-menu.nav-links {
         position: fixed !important;
         /* Force fixed default */
         top: 0 !important;
         left: 0 !important;
         width: 100vw !important;
         height: 100vh !important;
         margin: 0 !important;
         transform: translateX(-100%);
         transition: transform 0.3s ease;
         z-index: 9999 !important;
         background: #F6F1EB !important;
         display: flex !important;
         flex-direction: column !important;

         /* The JS will override 'top' and 'height' dynamically */
         /* This CSS just ensures the basic behavior exists if JS is slow */
      }

      #mobile-nav-menu.nav-links.active {
         transform: translateX(0) !important;
      }

      /* Ensure Container doesn't clip */
      .navbar .container {
         position: static !important;
         /* Allow children to escape if absolute */
      }

      /* Ensure Navbar stays on top */
      .navbar {
         position: fixed !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
         z-index: 10000 !important;
         background: #FFFFFF !important;
      }
   }

   /* ============================================
   BUTTON FIX - FORCE VISIBILITY
   ============================================ */
   @media (max-width: 768px) {
      .mobile-controls {
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         z-index: 10002 !important;
         position: relative !important;
         height: 44px !important;
         width: 44px !important;
      }

      /* Force the button to fill the container and be clickable */
      .mobile-menu-btn {
         width: 100% !important;
         height: 100% !important;
         pointer-events: auto !important;
         cursor: pointer !important;
         z-index: 10003 !important;
         /* Highest priority */
      }

      /* Ensure spans are visible */
      .mobile-menu-btn span {
         background-color: #FFFFFF !important;
         opacity: 1 !important;
         visibility: visible !important;
         display: block !important;
      }
   }
}


/* ============================================
   5. INTERACTIVITY - Pricing Button Pulse
   ============================================ */
@keyframes btn-blink-strong {

   0%,
   100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
   }

   50% {
      transform: scale(0.95);
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.6);
      /* Red "borderline" glow */
   }
}

.pricing-card:hover .btn {
   animation: btn-blink-strong 0.8s ease-in-out infinite !important;
}