/*
    Theme Name: Abogados Actual
    Theme URI: 
    Author: Marlon Gómez Hassan
    Description: Theme Diseñado para venta de páginas web y sistemas a medida
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: Páginas web, sistemas a la medida, software, flexbox, css grid, mobile first
    Text Domain: Abogados
*/

:root {
    /* ================================================================
       1. PALETA DE COLORES (BASE)
       ================================================================ */
    --red: #e61e2a;
    --red-accessible: #ff4d5a;
    --red-dark: #991b1b;
    --dark-blue: #1a2533;
    --gold: #FFD700;
    --corporate-green: #20b358;
    --white: #ffffff;
    --bg-white-ghost: #fcfcfd;
    --light-bg: #f4f7f9;
    --soft-blue-bg: #f8fafc;

    /* ================================================================
       2. TIPOGRAFÍA Y ESTADOS DE TEXTO
       ================================================================ */
    --body-text: #444444;
    --text-gray: #666666;
    --text-muted: #555555;
    --text-placeholder: #8693a5;
    --text-white-soft: rgba(255, 255, 255, 0.85);
    --text-white-bright: rgba(255, 255, 255, 0.92);
    --text-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.3);

    /* ================================================================
       3. BORDES Y SEPARADORES
       ================================================================ */
    --border-slate: #e2e8f0;
    --border-blue-muted: #b6cce3;
    --border-blue-soft: rgba(80, 117, 166, 0.5);
    --border-light: 1px solid rgba(0, 0, 0, 0.05);
    --border-separator: 1px solid rgba(0, 0, 0, 0.05);
    --border-subtle: rgba(0, 0, 0, 0.03);
    --border-white-faint: 1px solid rgba(255, 255, 255, 0.1);

    /* ================================================================
       4. EFECTOS DE CRISTAL (GLASSMORPHISM)
       ================================================================ */
    --glass-white: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --bg-glass-light: rgba(255, 255, 255, 0.08);
    --bg-glass-dark: rgba(10, 25, 47, 0.9);
    --bg-white-soft: rgba(255, 255, 255, 0.85);
    --pill-bg: rgba(255, 255, 255, 0.05);
    --pill-border: rgba(255, 255, 255, 0.1);
    --pill-blur: blur(10px);
    --border-glass: 1px solid rgba(255, 255, 255, 0.1);

    /* ================================================================
       5. DEGRADADOS (GRADIENTS)
       ================================================================ */
    --premium-gradient: linear-gradient(110deg, #ffffff 0%, #f8fafc 58%, #eef2f6 100%);
    --clean-gradient: linear-gradient(110deg, #f8fafc 0%, #ffffff 55%, #eef2f6 100%);
    --red-gradient-deep: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    --red-glow-line: linear-gradient(to bottom, rgba(230, 30, 42, 0) 0%, rgba(230, 30, 42, 0.8) 50%, rgba(230, 30, 42, 0) 100%);
    --glow-red: radial-gradient(circle, rgba(230, 30, 42, 0.12), rgba(230, 30, 42, 0));
    --wave-mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

    /* ================================================================
       6. SOMBRAS (SHADOWS)
       ================================================================ */
    /* Sombras base */
    --img-shadow: rgba(0, 0, 0, 0.15);
    --pilar-hover-shadow: rgba(0, 0, 0, 0.08);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.04);
    --shadow-hover-max: 0 30px 60px rgba(0, 0, 0, 0.15);
    
    /* Sombras cromáticas (Rojo/Verde) */
    --btn-shadow: rgba(230, 30, 42, 0.4);
    --header-cta-shadow: rgba(230, 30, 42, 0.2);
    --green-glow-shadow: rgba(32, 179, 88, 0.25);
    --shadow-red-soft: 0 15px 35px rgba(230, 30, 42, 0.25);
    --shadow-red-medium: 0 30px 60px rgba(230, 30, 42, 0.3);
    
    /* Sombras complejas/Deep */
    --shadow-color-dark: rgba(15, 23, 42, 0.08);
    --shadow-color-red-faint: rgba(230, 30, 42, 0.03);
    --shadow-deep-premium: 
        0 10px 15px -3px rgba(0, 0, 0, 0.02),
        0 30px 60px -12px var(--shadow-color-dark),
        0 50px 100px -20px var(--shadow-color-red-faint);

    /* ================================================================
       7. COMPONENTES ESPECÍFICOS (FOOTER / OTROS)
       ================================================================ */
    --footer-bg-main: #0f172a;
    --footer-bg-deep: #020617;
    --footer-wave-opacity: 0.6;
    --star-empty: #ccc;

    /* ================================================================
       8. ANIMACIONES Y CURVAS
       ================================================================ */
    --elastic-out: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth-out: cubic-bezier(0.16, 1, 0.3, 1);
}
  
  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  body {
      font-family: 'Montserrat', sans-serif;
      background-color: var(--white);
      overflow-x: hidden;
  }
  .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-bottom: -60px;
  }
  /* --- COMPONENTES --- */
  .hero-bg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      display: flex;
      z-index: 1;
  }
  /* Ocultar el enlace rebelde que detecta Lighthouse */
.screen-reader-shortcut, .skip-link {
    display: none !important;
}
  .bg-white { flex: 6; background: var(--light-bg); }
  .bg-dark { 
      flex: 4; 
      background: var(--dark-blue); 
      clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
      animation: bgSlide 2s var(--smooth-out) both;
  }
  .image-container {
      position: absolute;
      left: 55%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      animation: imageReveal 2s var(--elastic-out) 0.5s both;
  }
  .red-arc {
      position: absolute;
      width: 480px; height: 480px;
      border: 18px solid var(--red);
      border-radius: 50%;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) rotate(-10deg);
      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
      z-index: 2;
      animation: arcExpand 2.5s var(--smooth-out) 0.8s both;
  }
  .main-circle {
     width: 380px; 
      height: 380px;
      border: 12px solid var(--white); /* Usando variable */
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 30px 60px var(--shadow-color); /* Usando variable */
  }
  .main-circle img { width: 100%; height: 100%; object-fit: cover; }
  
  .left-side { 
      position: relative;
      z-index: 10;
      padding-right: 100px;
      transform: translateX(-20px);
      animation: superPop 1.8s var(--elastic-out) 1s both;
  }
  
  .logo { 
      color: var(--red); 
      font-weight: 900; 
      margin-bottom: 40px; 
      font-size: 1.2rem; 
  }
      /* Ajuste para fijar altura maxima el logo dentro del header */
/* Este es el contenedor que le da aire al logo */
.custom-logo-link {
    display: flex;
    align-items: center;
    padding-left: 25px; /* Esto separa el logo del borde redondeado izquierdo */
    height: 100%; /* Para que use todo el alto del header */
}
.custom-logo-link img {
    height: 85px !important; /* Bajamos de 90px a 65px para que no toque los bordes superior/inferior */
    width: auto;
    display: block;
    transition: transform 0.3s var(--smooth-out);
}
/* Efecto sutil al pasar el mouse por el logo */
.custom-logo-link img:hover {
    transform: scale(1.05);
}
  .site-logo {
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--dark-blue);
      text-decoration: none;
      letter-spacing: -1px;
  }
    .site-logo span {
      color: var(--red);
  }
  .script-txt { 
      font-family: 'Dancing Script', cursive; 
      font-size: 3.5rem; 
      margin-bottom: -10px; 
  }
  .main-title { 
      font-size: 5rem; 
      font-weight: 900; 
      color: var(--red); 
      line-height: 0.9; 
      text-transform: uppercase; 
      margin-bottom: 30px; 
  }
  .desc { 
      color: var(--text-gray); /* Cambiado de #666 */
      margin-bottom: 40px; 
      border-left: 4px solid var(--red); 
      padding-left: 20px; 
      max-width: 400px; 
  }
  .right-side { 
      display: flex; 
      flex-direction: column; 
      align-items: flex-end; 
      z-index: 10;
  }
  .section-subtitle-small {
    color: var(--red-accessible);
    margin-bottom: 20px;
    font-size: 1.2rem;   /* Ajusta este valor a tu gusto */
    font-weight: 600;    /* Un poco menos pesado que el bold estándar */
    text-transform: none; /* O uppercase si lo quieres todo en mayúsculas */
}
  .pill {
      background: var(--pill-bg); /* Cambiado de rgba manual */
      backdrop-filter: var(--pill-blur); 
      border: 1px solid var(--pill-border); 
      padding: 16px 24px;
      border-radius: 50px;
      margin-bottom: 15px;
      display: flex; 
      align-items: center;
      font-size: 0.9rem; 
      color: var(--white); /* Cambiado de white manual */
      width: 100%; 
      max-width: 320px;
      animation: slideBadge 1.2s var(--elastic-out) both;
      transition: all 0.4s var(--smooth-out); /* Usando tu curva de transición */
  }
  .pill:nth-child(2) { animation-delay: 1.4s; }
  .pill:nth-child(3) { animation-delay: 1.7s; }
  .pill:nth-child(4) { animation-delay: 2.0s; }
  .pill:nth-child(5) { animation-delay: 2.3s; }
  .pill:hover { background: var(--red); transform: scale(1.05) translateX(-10px); }
  .btn {
      background: var(--red); 
      color: var(--white); /* Reemplazado white manual */
      padding: 18px 45px; 
      border-radius: 50px;
      text-decoration: none; 
      font-weight: 700;
      display: inline-block;
      transition: all 0.4s var(--elastic-out);
      margin-top: 8px;
  }
  .btn:hover { 
      transform: scale(1.05); 
      box-shadow: 0 20px 40px var(--btn-shadow); /* Reemplazado rgba manual */
  }
  /* --- HEADER NAVIGATION --- */
.main-header {
    position: fixed; /* Cambiamos a fixed para que flote sobre todo */
    top: 20px;       /* Lo separamos del borde superior */
    left: 50%;
    transform: translateX(-50%); /* Lo centramos horizontalmente */
    width: 90%;      /* No ocupa todo el ancho, deja aire a los lados */
    max-width: 1400px; 
    z-index: 9999;
    /* Look de Cristal (Glassmorphism) */
    background: var(--bg-white-soft); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Estética de Cápsula */
    border-radius: 100px; /* Bordes muy redondeados */
    border: 1px solid var(--glass-border);
    padding: 10px 30px;
    /* Sombra Premium */
    box-shadow: 0 15px 35px var(--img-shadow);
    transition: all 0.4s var(--smooth-out);
}  
.header-container {
    padding: 0 !important; /* Quitamos paddings extra que deformen la cápsula */
    height: 30px;          /* Altura fija y cómoda */
    display: flex;
    align-items: center;
    justify-content: space-between;
}  
  .nav-list {
      display: flex;
      list-style: none;
      gap: 35px;
      align-items: center;
  }
  .nav-list li a {
      text-decoration: none;
      color: var(--dark-blue);
      font-weight: 600;
      font-size: 0.9rem;
      text-transform: uppercase;
      transition: color 0.3s ease;
  }
  .nav-list li a:hover {
      color: var(--red);
  }
  .btn-header-cta {
      background: var(--dark-blue);
      color: var(--white); /* Reemplazado white manual */
      padding: 12px 25px;
      border-radius: 50px;
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 700;
      margin-left: 30px;
      transition: all 0.3s var(--elastic-out);
  }
  .btn-header-cta:hover {
      background: var(--red);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px var(--header-cta-shadow); /* Reemplazado rgba manual */
  }
  /* Ajuste para navegacion (Boton agendar cita) */
  @media (min-width: 1101px) {
      .main-navigation {
          display: flex;
          align-items: center;
      }
  }
/* Ocultar hamburguesa en escritorio */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 10000;
}
.mobile-menu-toggle span {
    width: 30px;
    height: 3px;
    background-color: var(--dark-blue);
    transition: all 0.3s var(--smooth-out);
}
/*-----Responsive Celular y Tablet (Seccion de Inicio y Header)------*/
@media (max-width: 1100px) {
    .main-header {
        top: 6px !important; /* Más pegado arriba para ganar espacio visual */
        width: 95% !important; /* Un poco más ancho para aprovechar el espacio lateral */
        padding: 5px 15px !important; /* Menos aire interno */
    }
    /* 2. El contenedor interno se vuelve más compacto */
    .header-container {
        height: 50px !important; /* Bajamos de 60px/90px a 50px */
    }
    /* 3. El logo debe achicarse para no deformar la nueva cápsula */
    .custom-logo-link img {
        height: 40px !important; /* Logo más sutil pero legible */
        margin-left: 5px !important;
    }
    /* 4. El botón de Agendar Cita también se compacta */
    .btn-header-cta {
        padding: 8px 18px !important;
        font-size: 0.8rem !important;
        margin-left: 15px !important;
    }
    /* 5. Ajuste del Hero para que el menú no tape el texto */
    
/* 1. HERO: Contenedor flexible que crece con el contenido */
    .hero {
        height: auto !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: 80px; 
        background: var(--light-bg); /* Fondo claro base */
        overflow: hidden;
         padding-top: 70px !important; /* Bajamos un poco el inicio del contenido */
    }
    /* 2. FONDOS: Eliminamos cortes diagonales y apilamos */
    .hero-bg {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Al fondo */
    }
    .bg-white { 
        flex: 0 0 50%; /* La mitad superior blanca */
        height: 50%; 
    }
    .bg-dark { 
        flex: 1; /* El resto del fondo oscuro */
        clip-path: none !important; /* Eliminamos la diagonal problemática */
        margin-top: 0;
        animation: none; 
        background: var(--dark-blue) !important;
    }
    /* 3. CONTENIDO: Capa superior centrada */
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        position: relative;
        z-index: 10; /* Por encima de los fondos */
        padding: 20px 5% 60px 5%;
        gap: 15px;
    }
    /* 4. TEXTO (Parte Superior) */
.left-side {
    padding-right: 0 !important;
    transform: none !important;
    width: 100%;
    margin-bottom: 10px; /* Un poco más de espacio */
    position: relative;
    z-index: 15; /* Asegura que esté por encima del fondo oscuro */
}
.main-title {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    margin-bottom: 10px;
    line-height: 1.1;
    display: flex;
    flex-direction: column; /* Apila las palabras */
    align-items: center;
}
.desc {
        max-width: 90%;
        margin: 0 auto;
        border-left: none !important;
        border-bottom: 3px solid var(--red);
        padding-bottom: 15px;
         margin-top: 40px;
         color: var(--white)
    }
/* Compensación de color para el resto del titular sobre oscuro */
.main-title span { 
    color: var(--red); /* Texto 'TU FUTURO' y 'LEGAL' en rojo */
    text-shadow: var(--text-shadow-soft);
}
    /* 5. IMAGEN (Parte Central) */
    .image-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 30px auto !important;
    }
    .main-circle {
        width: 260px !important;
        height: 260px !important;
        border: 8px solid var(--white);
    }
    .red-arc {
        width: 310px !important;
        height: 310px !important;
    }
    /* 6. ESPECIALIDADES (Parte Inferior - Sobre fondo oscuro) */
    .right-side {
        width: 100% !important;
        align-items: center !important;
        margin-top: 10px !important;
    }
    .pill {
        max-width: 280px !important;
        margin: 8px auto !important;
        justify-content: center !important;
        background: var(--bg-glass-light) !important;
        backdrop-filter: blur(10px);
        transform: none !important;
        border: var(--border-glass);
    }
    /* Mantenemos tu cabecera funcional */
    .header-container { height: 70px; }
    .custom-logo-link img { height: 55px !important; }    .header-container {
        padding: 10px 5%; 
        height: 60px; /* Aumentamos un poco la altura total para dar margen */
        display: flex;
        align-items: center; 
        justify-content: space-between;
    }
    /* Ajuste de Compensación: Subimos el logo a 60px */
    .custom-logo-link img {
        height: 60px !important; /* Forzamos más altura para que las letras ganen peso */
        width: auto !important;
        object-fit: contain;
        display: block;
    }
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px; /* Reducimos el espacio entre líneas */
        cursor: pointer;
        z-index: 10000;
        padding: 10px;
        margin-right: -10px;
    }
    /* Hamburguesa más minimalista para que no opaque al logo */
    .mobile-menu-toggle span {
        width: 24px;   /* Más corta para equilibrar con el logo horizontal */
        height: 2px;   
        background-color: var(--dark-blue);
        transition: all 0.3s var(--smooth-out);
    }
.main-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%; 
    height: 100vh;
    /* Fondo oscuro semi-transparente para un look elegante */
    background: var(--bg-glass-dark);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 9999;
}
.nav-list {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px; /* Un poco más de aire entre items */
    margin-bottom: 40px; 
    padding: 0;
    list-style: none;
}
.nav-list li a {
    font-size: 1.6rem;
    font-weight: 700;
    /* Texto en blanco o gris muy claro para contrastar con el fondo oscuro */
    color: var(--white); 
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.3s ease;
}
/* Color al pasar el dedo o hover */
.nav-list li a:active,
.nav-list li a:hover {
    color: var(--red);
}
/* Botón de Agendar Cita: Manteniendo tu estilo pero ajustado al centro */
.btn-header-cta {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 16px 40px !important;
    font-size: 1.1rem !important;
    width: auto !important;
    display: inline-block !important;
    background-color: var(--red) !important;
    color: var(--white) !important;
    border-radius: 50px !important; /* Más redondeado para look moderno */
    font-weight: 700 !important;
    box-shadow: 0 10px 20px var(--btn-shadow) !important;
}
/* Asegurar que la X de cerrar sea blanca para que se vea sobre el fondo oscuro */
.mobile-menu-toggle.active span {
    background-color: var(--white) !important;
}
.main-navigation.active { right: 0; }
    .nav-list { flex-direction: column; text-align: center; gap: 30px; }
    .btn-header-cta { margin-left: 0; margin-top: 30px; }
    .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background-color: var(--red); }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background-color: var(--red); }
} 
/* --- AJUSTE EXCLUSIVO PARA TABLETS (Para no afectar el celular) --- */
@media (min-width: 768px) and (max-width: 1100px) {
    .header-container {
        height: 100px; /* Le damos más aire al header solo en tablet */
    }
    .custom-logo-link img {
        height: 75px !important; /* Subimos el logo significativamente solo en tablet */
        max-width: 280px;
    }
    .mobile-menu-toggle span {
        width: 32px; /* La hamburguesa crece un poco para no verse ridícula junto al logo grande */
        height: 3px; /* Un pelín más gruesa para que tenga peso visual en tablet */
    }
}
/*----------------------------------------------Botón Front ver mas servicios o especialidades-----------------------------*/
/*Boton de ver mas servcios */
.view-more-container {
    display: flex;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 40px; /* Ajusta según el padding inferior de tu section */
    width: 100%;
    background: transparent; /* Evita el efecto de "cambio de capa" */
}
.btn-primary-custom {
    display: inline-block;
    padding: 18px 54px;
    background-color: var(--red);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.4s ease;
    box-shadow: var(--shadow-red-soft);
    border: none;
    cursor: pointer;
}
.btn-primary-custom:hover {
    background-color: var(--dark-blue);
    transform: translateY(-5px);
    box-shadow: var(--shadow-red-soft)
}
/* =====================================
   RESPONSIVE: BOTÓN PRIMARY CUSTOM
   ====================================*/
/* TABLET (Hasta 1100px) */
@media (max-width: 1100px) {
    .view-more-container {
        padding-top: 40px;
        padding-bottom: 30px;
    }
    .btn-primary-custom {
        padding: 16px 45px; /* Reducimos un poco el ancho */
        letter-spacing: 2px;
    }
}
/* MÓVIL (Hasta 768px) */
@media (max-width: 768px) {
    .view-more-container {
        padding-top: 30px;
        padding-bottom: 20px;
        padding-left: 20px;  /* Margen de seguridad lateral */
        padding-right: 20px;
    }
    .btn-primary-custom {
        display: block;      /* Opcional: hace que el botón sea más fácil de tocar */
        width: 100%;         /* El botón ocupa el ancho disponible en móvil */
        max-width: 320px;    /* Pero le ponemos un límite para que no sea gigante */
        margin: 0 auto;      /* Lo centramos */
        padding: 15px 30px; 
        font-size: 0.85rem;
        letter-spacing: 1.5px;
        text-align: center;
    }
}



  /*-------------------------------------Sección Página de Nosotros (PAGE.PHP)-------------------------------------------- */
  @keyframes aboutFadeUp {
      from {
          opacity: 0;
          transform: translateY(28px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  @keyframes aboutScaleIn {
      from {
          opacity: 0;
          transform: scale(0.92);
      }
      to {
          opacity: 1;
          transform: scale(1);
      }
  }
  @keyframes aboutArcSpinIn {
      from {
          opacity: 0;
          transform: rotate(-35deg) scale(0.86);
      }
      to {
          opacity: 0.9;
          transform: rotate(0deg) scale(1);
      }
  }
  
  .about-section {
      padding: 140px 0 80px; /* Reducido de 180px para subir el contenido y eliminar el hueco amarillo */
      background: var(--premium-gradient);
      position: relative;
      /* min-height: 90vh; Ajustado para que no fuerce tanto scroll innecesario */
      display: flex;
      align-items: center;
  }
  .about-section::before {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      top: -180px;
      left: -120px;
      border-radius: 50%;
      background: var(--glow-red);
      pointer-events: none;
  }
  .about-container {
      max-width: 1500px;
      margin: 0 auto;
      padding: 0 5%;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 70px; /* Reducido de 100px para que la imagen y el texto se sientan conectados */
      align-items: flex-start; /* Cambiado a flex-start para que la imagen no flote en el medio */
      position: relative;
      z-index: 1;
  }
  /* --- LADO IZQUIERDO: CONTENIDO --- */
  .about-left {
      position: relative;
      z-index: 10;
      padding-top: 20px; /* Alineación visual con el tope de la foto */
  }
  .about-subtitle {
      font-family: 'Dancing Script', cursive;
      font-size: 2.6rem; /* Un toque más pequeño para mayor elegancia */
      color: var(--dark-blue);
      margin-bottom: -3px;
      display: block;
      line-height: 1;
  }
  .about-title {
      font-size: 3.8rem; /* Reducido ligeramente de 4rem para compactar el bloque */
      font-weight: 900;
      color: var(--red);
      line-height: 0.95;
      text-transform: uppercase;
      margin-bottom: 35px;
      letter-spacing: -1px;
  }
  .about-main-text {
      margin-bottom: 40px; /* Reducido para que los pilares suban */
      border-left: 4px solid var(--red);
      padding-left: 25px;
  }
  .about-main-text p {
      font-size: 1.05rem;
      color: var(--body-text); /* Reemplazado color manual */
      line-height: 1.7;
      margin-bottom: 12px;
  }
  /* Grid de Pilares */
  .about-pilars {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px; /* Más compacto para que todo entre en el primer scroll */
  }
  .pilar-item {
      background-color: var(--light-bg);
      padding: 25px;
      border-radius: 18px;
      border: 1px solid var(--border-subtle); /* Reemplazado color manual */
      transition: all 0.5s var(--elastic-out);
      display: grid;
      gap: 10px;
  }
  .pilar-icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 800;
      color: var(--white);
      background: var(--red);
      box-shadow: 0 10px 20px var(--header-cta-shadow);
  }
  .pilar-item:hover {
      background-color: var(--dark-blue);
      transform: translateY(-8px);
      box-shadow: 0 15px 30px var(--pilar-hover-shadow); /* Reemplazado rgba manual */
  }
  .pilar-item:hover * {
      color: var(--white) !important; /* Reemplazado #fff manual */
  }
  .pilar-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--dark-blue);
      margin-bottom: 8px;
      text-transform: uppercase;
  }
  .pilar-desc {
      font-size: 0.9rem;
      color: var(--text-gray); /* Reemplazado color manual #666 */
      line-height: 1.5;
  }
  /* --- LADO DERECHO: IMAGEN --- */
  .about-right {
      position: relative;
      height: 560px; /* Altura optimizada para que no estire la sección */
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
  }
  .about-arc {
      position: absolute;
      width: 240px;
      height: 240px;
      border: 14px solid var(--red);
      border-radius: 50%;
      right: -40px;
      top: -35px;
      clip-path: polygon(50% 0, 100% 0, 100% 100%, 30% 100%);
      opacity: 0.9;
      z-index: 2;
      transform-origin: center;
  }
  .about-image-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 35px;
      overflow: hidden;
      box-shadow: 0 35px 70px var(--img-shadow);
      z-index: 5;
  }
/* Configuración de estados iniciales con un toque 3D */
.about-section.about-animate-init .about-left,
.about-section.about-animate-init .about-main-text,
.about-section.about-animate-init .pilar-item,
.about-section.about-animate-init .about-reveal {
    opacity: 0;
    /* Un desplazamiento mayor y rotación sutil lo hace ver más Pro */
    transform: translateY(40px) rotateX(-10deg); 
    transform-origin: top center;
    transition: opacity 0.8s ease, transform 0.8s var(--smooth-out);
}
/* El Arco: Que no solo rote, que crezca desde el centro */
.about-section.about-animate-init .about-arc {
    opacity: 0;
    transform: rotate(-60deg) scale(0.5);
    filter: blur(4px); /* Sutil desenfoque al inicio */
}
/* La Imagen: Un zoom out que respire */
.about-section.about-animate-init .about-image-wrapper {
    opacity: 0;
    transform: scale(1.15); /* Empieza grande y se ajusta al tamaño real */
}
.about-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  /* --- VARIANTES PARA SECCIONES EXTRA (NOSOTROS) --- */
  .about-section--compact {
      min-height: auto;
      display: block;
      padding: 80px 0;
  }
  .about-section--alt {
      background: var(--clean-gradient);
  }
  .about-container--single {
      grid-template-columns: 1fr;
      gap: 35px;
      align-items: stretch;
  }
  .about-section-head {
      max-width: 860px;
  }
  .about-title--sm {
      font-size: 3rem;
      margin-bottom: 18px;
  }
  .about-pilars--3 {
      grid-template-columns: repeat(3, 1fr);
  }
  .about-pilars--4 {
      grid-template-columns: repeat(4, 1fr);
  }
  .pilar-item--quote {
      gap: 14px;
  }
  .pilar-item--quote .pilar-title {
      margin-bottom: 0;
  }
  /* --- FORMATOS NUEVOS (para no repetir cards) --- */
  .about-timeline {
      list-style: none;
      padding: 0;
      margin: 10px 0 0;
      display: grid;
      gap: 14px;
      max-width: 980px;
  }
  .about-timeline__step {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 16px;
      align-items: start;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid var(--border-subtle);
      background: var(--bg-white-soft);
      box-shadow: var(--shadow-deep-premium);
      transition: all 0.3s ease;
  }
  .about-timeline__step:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover-max);
   border-color: var(--border-blue-muted); /* Ilumina el borde al pasar el mouse */
}
  .about-timeline__title {
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--dark-blue);
      margin-bottom: 6px;
      text-transform: uppercase;
  }
  .about-timeline__text {
      color: var(--body-text);
      line-height: 1.7;
  }
  /* Layout base en dos columnas */
.methodology-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    align-items: start;
}
/* El nuevo contenedor visual Premium */
.methodology-visual-prestige {
   position: -webkit-sticky !important; /* Soporte Safari Antiguo */
    position: sticky !important;
    top: 120px;
    height: 100%;
}
.prestige-card-inner {
    background: var(--glass-white);
    border: var(--border-light);
    border-radius: 28px;
    height: 520px; /* Igualamos la altura de los pasos */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 40px;
    box-shadow: var(--shadow-deep-premium);
    /* EFECTO DE LUZ SUTIL (Gradiente radial) */
    background-image: radial-gradient(at 100% 0%, var(--shadow-color-red-faint) 0px, transparent 50%), radial-gradient(at 0% 100%, var(--shadow-color-dark) 0px, transparent 50%);
    backdrop-filter: var(--pill-blur);    backdrop-filter: blur(10px); /* Efecto de cristal esmerilado */
    overflow: hidden;
}
/* El Tag Rojo */
.prestige-tag {
    color: var(--red); 
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2.5px;
    margin-bottom: 25px;
    display: block;
}
/* El Título Elegante */
.prestige-card-inner h3 {
    font-size: 2.2rem;
    line-height: 1.15;
    margin-bottom: 25px;
    color: var(--dark-blue);    font-weight: 900;
    text-transform: capitalize;
}
/* El Texto Refinado */
.prestige-card-inner p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}
/* Responsive para móvil */
/* Ajuste para que SÍ se vea en celulares */
@media (max-width: 991px) {
    /* La rejilla pasa de 2 columnas a 1 sola (una arriba de otra) */
    .methodology-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* Quitamos el 'sticky' para que no flote y se comporte normal */
    .methodology-visual-prestige {
        position: relative;
        top: 0;
        display: block; /* Antes decía 'none', ahora 'block' para que se vea */
        margin-top: 20px;
    }
    /* Ajustamos la altura para que no sea un bloque eterno en el móvil */
    .prestige-card-inner {
        height: auto; 
        padding: 40px 25px;
    }
    /* En móvil, quizás quieras que la animación no tarde TANTO */
    .animar-scroll-delay {
        transition-delay: 0.5s; /* Un retraso más corto para que no parezca que la web está vacía al final */
        transition: all 1.5s ease-out;
    }
}
/*-------Testimoniales -------- */
/* 1. EL CONTENEDOR */
.testimonials-slider {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden !important;
    position: relative;
    display: block !important;
    opacity: 1 !important;
}
/* 2. EL WRAPPER */
.testimonials-slider .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: auto !important;
}
/* 3. LA TARJETA PREMIUM (Unificada para evitar estiramientos) */
.testimonial-card.swiper-slide {
    background: var(--white);
    border-radius: 24px;
    padding: 40px 30px;
    border: var(--border-light);
    box-shadow: var(--shadow-premium);
    transition: all 0.4s ease; /* Suaviza el cambio de color y posición */
    display: flex !important;
    flex-direction: column;
    gap: 15px;
    height: auto !important; 
    box-sizing: border-box;
    flex-shrink: 0 !important;
    width: auto;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 40px;
}
/* Al pasar el mouse, la tarjeta se vuelve oscura y el borde rojo Novaweb */
.testimonial-card.swiper-slide:hover {
    transform: translateY(-10px);
    background: var(--dark-blue) !important;
    border-color: var(--red) !important;
    box-shadow: var(--shadow-hover-max);
}
/* Cambiar colores de texto en HOVER */
.testimonial-card.swiper-slide:hover .testimonial-text,
.testimonial-card.swiper-slide:hover .author-name {
    color: var(--white) !important;
}
.testimonial-card.swiper-slide:hover .star.filled {
    color: var(--gold) !important;
}

.testimonial-card.swiper-slide:hover .star.empty {
    color: var(--text-white-faint);
}/* --- VARIANTE DARK FIJA (Si la usas en el PHP) --- */
.testimonial-card--dark {
    background: var(--dark-blue) !important;
    color: var(--white);
}
/* ESTRELLAS */
.testimonial-stars { display: flex; gap: 4px; margin-bottom: 5px; }
.testimonial-stars span { color: var(--red); font-size: 1.2rem; }
.testimonial-card--dark .testimonial-stars span { color: var(--gold); }
/* TEXTO */
.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    flex-grow: 1; 
}
.testimonial-card--dark .testimonial-text { color: var(--text-white-bright); }
/* AUTOR */
.testimonial-author {
    margin-top: auto; /* Empuja el autor abajo sin estirar el card */
    padding-top: 15px;
    border-top: var(--border-separator);
}
.testimonial-card--dark .testimonial-author { border-top: var(--border-white-faint); }
.author-name {
    display: block;
    font-weight: 900;
    font-size: 0.95rem;
    text-transform: uppercase;
    color: var(--dark-blue);
}
.author-label {
    font-size: 0.8rem;
    color: var(--red);
    font-weight: 700;
    display: block;
}
/* FOTOS  */
.testimonial-header { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.testimonial-avatar {
    width: 65px; height: 65px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--red); flex-shrink: 0;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }

  @media (prefers-reduced-motion: reduce) {
      .about-left,
      .about-main-text,
      .pilar-item,
      .about-arc,
      .about-image-wrapper {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
      }
  }

  .testimonial-stars .star {
    font-size: 1.2rem;
}

/* Estrellas activas */
.testimonial-stars .star.filled {
    color: var(--red);
}

/* Estrellas inactivas */
.testimonial-stars .star.empty {
    color: var(--star-empty);
}

/*-----Responsive(Seccion de Nosotros: Nuestra firma)-----*/
  @media (max-width: 520px) {
      .about-pilars--4 { grid-template-columns: 1fr; }
  }
  @media (max-width: 1100px) {
    .about-section--compact { padding: 75px 20px; margin-top: 0px; }
      .about-title--sm { font-size: 2.4rem; }
      .about-pilars--4 { grid-template-columns: repeat(2, 1fr); }
      .about-pilars--3 { grid-template-columns: 1fr; }
      .about-section { padding-top: -30px; margin-top: 0; overflow: hidden;  /* debo cambiar */}
      .about-container {  display: flex; flex-direction: column; gap: 1px; align-items: stretch}
      .about-right { height: 450px; order: -1; justify-content: center; }
      .about-image-wrapper { position: relative; width: 95%; height: 370px; margin-top: -25px; }
      .about-title { font-size: 2.4rem; }
      .about-subtitle {font-size:2.4rem}
      .about-left { padding-top: 4; margin-top: -80px; }
      .about-arc { right: -6px; top: -20px; width: 180px; height: 180px; }
      .about-section-head {margin-top: -40px;}
  }



/* ---------------------------------------------------Sección de Contacto------------------------------------------------------*/
.how-it-question {
    background-color: var(--bg-white-ghost) !important; 
    background-image: radial-gradient(var(--border-slate) 0.8px, transparent 0.8px) !important;
    background-size: 30px 30px !important;    padding: 120px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* El resplandor sutil que usas en el fondo (Img 1) */
.how-it-question::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    /* CAMBIO CLAVE: De right a left */
    top: -150px; 
    left: -100px; /* Lo movemos hacia la izquierda del título */
    border-radius: 50%;
    background: var(--glow-red);    pointer-events: none;
    z-index: 1; /* Aseguramos que esté detrás del texto */
}
.cta-master-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Estructura similar a la Img 1 */
    gap: 70px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
    z-index: 10;
}
/* --- LADO IZQUIERDO: TEXTO (Ajustado estilo Img 1) --- */
.cta-info {
    text-align: left;
}
/* Título Principal (Como "LO QUE DICEN..." en Img 1) */
.cta-info .about-subtitle {
    margin-top: 80px;
}
.cta-description {
    padding-left: 25px;
    margin-bottom: 45px;
    max-width: 60ch; /* Limita el ancho del texto para legibilidad */
}
/* Botones de Acción Rápidos */
.cta-buttons {
    display: flex;
    gap: 15px;
}
.btn-whatsapp-cta {
    background-color: transparent !important; /* Fondo transparente */
    color: var(--corporate-green) !important;
    border: 2px solid var(--corporate-green) !important;
    padding: 14px 28px;
    border-radius: 50px; /* Estilo píldora como tu header */
    font-weight: 800;
    transition: all 0.4s var(--smooth-out);
    box-shadow: none;
}
.btn-whatsapp-cta:hover {
    background-color: var(--corporate-green) !important;/* Se llena de color al pasar el mouse */
    color: var(--white) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--green-glow-shadow);}
/* --- LADO DERECHO: EL FORMULARIO (Mantenemos la tarjeta limpia) --- */
.cta-form-container {
    /* 1. Cambio Clave: Blanco Puro para contraste total */
    padding: 60px !important;
    border-radius: 45px !important; /* Un poco más orgánico */
    border: 1px solid var(--border-blue-soft) !important; /* Borde casi invisible para definir */    
    /* Tres capas de sombra: Contacto, Estructura y Resplandor */
    box-shadow: var(--shadow-deep-premium) !important;
}
/* Inputs de Contact Form 7 - Refinamiento Minimalista */
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea {
    width: 100% !important;
    background-color: transparent !important; /* Fondo transparente para pureza */
    border: none !important;
    border-bottom: 2px solid var(--border-blue-muted) !important; /* Solo línea inferior */    
    padding: 20px 5px !important;
    border-radius: 0 !important;
    margin-bottom: 30px !important;
    font-size: 1.05rem !important;
    color: var(--dark-blue) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wpcf7-textarea {
    height: 80px !important; /* Ajusta los px para que equivalgan a 2 filas */
}
/* Efecto de enfoque Premium */
.wpcf7-form input:focus, 
.wpcf7-form textarea:focus {
    border-bottom-color: var(--red) !important; /* Borde rojo Novaweb */
    outline: none !important;
}
/* Estilo para los Placeholders */
::placeholder {
color: var(--text-placeholder) !important; /* Un gris más nítido para placeholders */    
}
.wpcf7-list-item label {
    display: flex !important;
    align-items: center !important;
    gap: 10px; /* Controla la separación exacta entre el cuadro y el texto */
    white-space: nowrap; /* Evita que el texto salte a la línea de abajo */
    color: var(--text-placeholder) !important; /* Un gris más nítido para placeholders */    
}
.wpcf7-list-item input[type="checkbox"] {
    margin: 0 !important; /* Elimina el empuje hacia abajo */
}
/* Botón de Envío - Gradiente Sutil Novaweb */
.wpcf7-form .wpcf7-submit {
    width: 100% !important;
    /* Un gradiente muy fino para un acabado premium (como Apple) */
    background: var(--red-gradient-deep) !important;    
    color: var(--white) !important;
    padding: 22px !important;
    border-radius: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none !important;
    box-shadow: var(--shadow-red-soft) !important;    
    transition: all 0.5s var(--elastic-out) !important;
    margin-top: 20px;
}
.wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-7px) scale(1.02);
    box-shadow: var(--shadow-red-medium) !important;    
}
        .about-section .title-mapa {
    margin-top: 55px;
}
.about-section .ubicacion-mapa {
    margin-top: -20px;
}
/*-----Responsive Celular Tablet (Seccion de contacto)------*/
@media (max-width: 1020px) {
    /* 1. Ajuste del Grid: Una sola columna */
    .cta-master-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 0 8%;
        margin-top: -90px;
    }
    /* 2. Centramos el contenido de texto */
    .cta-info {
        display: flex;
        flex-direction: column;
    }
    .cta-description {
        margin-top: 22px;
    }
    /* 3. Reajuste de Títulos */
    .cta-info .section-title {
        font-size: 3.2rem !important;
        line-height: 1.1;
    }
    /* 5. El Formulario: Ajuste de tarjeta */
    .cta-form-container {
        max-width: 650px;
        margin: 0 auto !important;
        padding: 45px 30px !important; 
    }
    /* 6. Checkbox y Política: ALINEACIÓN FINAL */
    /* Eliminamos el salto de línea <br> que mete CF7 por defecto */
    .wpcf7-form-control-wrap br {
        display: none !important;
    }
    .wpcf7-list-item {
        display: flex !important;
        margin: 0 !important;
    }
    .wpcf7-list-item label {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Check arriba con la primera línea */
        gap: 12px !important;
        white-space: normal !important; 
        text-align: left !important;
        width: 100% !important;
        cursor: pointer;
    }
    .wpcf7-list-item input[type="checkbox"] {
        flex-shrink: 0 !important;
        margin: 4px 0 0 0 !important; /* Ajuste fino para nivelar con el texto */
        width: 18px !important;
        height: 18px !important;
    }
    .wpcf7-list-item-label {
        line-height: 1.3 !important;
        display: inline-block !important;
    }
.about-section .ubicacion-mapa {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 22px;
    margin-bottom: 0;
    line-height: 0; /* Elimina espacio extra debajo del iframe */
}

.about-section .ubicacion-mapa iframe {
    width: 100% !important;
    height: 450px; 
    display: block;
    border: none;
}
  } 
/* Resposive botones de WAP y correo para que salgan bien tamien en tablet */
@media (max-width: 1100px) {
        /* 4. Botones: Centrados */
    .cta-buttons {
        justify-content: center;
        width: 100%;
        display: flex;
        gap: 15px;
        font-size: 14px;
        padding: 10px 0px;
        margin-top: -35px;
        text-align: center;
    }    
    .cta-buttons .btn {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    /* REDUCIMOS AQUÍ */
    padding: 12px 15px;    /* Antes era 15/25, ahora es más delgado */
    min-width: 120px;      /* Menos ancho para que no parezcan círculos */
    border-radius: 40px;   /* Un radio un poco más cerrado */
    font-size: 13px;       /* Texto ligeramente más pequeño */
    line-height: 1.1;
}
/* Reducir también el tamaño del icono y su margen */
.cta-buttons .btn i {
    font-size: 1.1rem;     /* Icono más sutil */
    margin-bottom: 5px;    /* Menos separación */
  }
}


/*----------------------------------------- SECCIÓN PAGINA DE SERVICIOS --------------------------------------------- */
.services-section {
    padding: 100px 0;
    background: var(--clean-gradient);
    position: relative;
}
.services-section .about-subtitle {
    margin-top: 15px;
}
.services-section .about-main-text {
    color: var(--text-placeholder);
    font-size: 12.1rem !important;
    line-height: 1.6;
    margin-top: 40px;
}
.services-grid {
    display: grid;
    /* Esto obliga a las tarjetas a ocupar todo el ancho disponible y saltar de fila si no caben */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 30px;
    width: 100%; /* Asegura que use todo el espacio */
    margin-top: 40px;
}
/* La Tarjeta Premium */
.service-card {
    background: var(--white);
    backdrop-filter: blur(12px);
    padding: 50px 40px;
    border-radius: 30px;
    border: 1px solid var(--border-blue-soft);
    transition: all 0.5s var(--smooth-out);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Específico para la sección de servicios para evitar conflictos con la sección About */
.services-section .about-container {
    display: block !important; /* Rompemos el grid de 2 columnas de la sección About */
    max-width: 1300px;
    margin: 0 auto;
}
/* Icono y Número */
.service-icon-box {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--red);
    font-size: 2.5rem;
}
.service-number {
    font-size: 1rem;
    font-weight: 900;
    color: var(--border-blue-muted);
    opacity: 0.5;
}
.service-card-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 15px;
    text-transform: uppercase;
}
.service-card-desc {
      font-size: 1.05rem;
      color: var(--body-text); /* Reemplazado color manual */
      line-height: 1.7;
      margin-bottom: 20px;
}
/* Lista de mini-features */
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}
.service-features li {
    font-size: 0.85rem;
    color: var(--dark-blue);
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.service-features li i {
    color: var(--corporate-green); /* ¡Usamos tu nuevo verde! */
}
/* Link de acción */
.service-link {
    color: var(--red);
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}
/* HOVER EFFECT: Aquí es donde se vuelve Premium */
.service-card:hover {
    transform: translateY(-15px);
    background: var(--dark-blue);
    border-color: var(--red);
    box-shadow: var(--shadow-deep-premium);
}
.service-card:hover .service-card-title,
.service-card:hover .service-card-desc,
.service-card:hover .service-features li {
    color: var(--white) !important;
}
.service-card:hover .service-link {
    color: var(--white);
    transform: translateX(10px);
}
/* Variación Destacada (La del medio) */
.service-card--featured {
    border-bottom: 4px solid var(--red);
}
.about-faq {
      margin-top: 26px;
  }
  .about-faq__list {
      display: grid;
      gap: 12px;
  }
  .about-faq__item {
      border-radius: 18px;
      border: 1px solid var(--border-subtle);
      background: var(--bg-white-soft);
      padding: 14px 16px;
  }
  .about-faq__q {
      cursor: pointer;
      font-weight: 900;
      color: var(--dark-blue);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      list-style: none;
  }
  .about-faq__q::-webkit-details-marker { display: none; }
  .about-faq__a {
      margin-top: 10px;
      color: var(--body-text);
      line-height: 1.7;
      padding-left: 6px;
      border-left: 3px solid var(--red);

      /*.about-stats { grid-template-columns: 1fr; }*/
      .about-quotes { grid-template-columns: 1fr; }
      .about-timeline__step { grid-template-columns: 56px 1fr; }
  }
  /* ============================================
   CONTADOR PREMIUM IMPACTANTE (ESTILO INICIAL)
   ============================================ */
/* Contenedor que envuelve tus stats NUEVO*/
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    padding: 40px 0;
    max-width: 980px;

}
/* La tarjeta individual (reutilizando tu clase .about-stat) */
.about-stat {
    background-color: var(--dark-blue) !important; /* Forzamos tu azul oscuro */
    border-radius: 24px;
    padding: 45px 35px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--smooth-out);
    border: 1px solid var(--pill-border);
    box-shadow: var(--shadow-deep-premium);
}
/* El detalle de la línea roja al pasar el mouse */
.about-stat::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 5px;
    background: var(--red-gradient-deep);
    transform: scaleX(0);
    transition: transform 0.4s var(--elastic-out);
    transform-origin: left;
}
.about-stat:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-hover-max);
}
.about-stat:hover::before {
    transform: scaleX(1);
}
/* Ajuste de los textos internos */
.about-stat__label {
    color: var(--white) !important;
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 0;
    order: -1; /* Mantiene el título arriba */
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
/* El Número Gigante (Impacto visual) */
.about-stat__num-wrapper {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: auto; /* Empuja el número hacia abajo */
}
.about-stat__num {
    color: var(--white) !important;
    font-size: 5.5rem !important; /* El tamaño masivo que querías */
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -3px;
    font-family: 'Montserrat', sans-serif;
}
/* El sufijo (+ o %) en Rojo */
.about-stat__suffix, 
.about-stat__prefix {
    color: var(--red) !important;
    font-size: 2.5rem;
    font-weight: 800;
}
  /*----RESPONSIVE DESIGN (BREAKPOINT: 1100px)------*/
@media screen and (max-width: 1100px) {
    /* 2. Optimización del Contenedor */
    .services-section .about-container {
        padding: 0 5%; /* Añadimos aire a los costados */
        max-width: 100%;
        margin-top: 100px;
    }
    .services-section .about-title {
        font-size: 2.15rem;
        margin-top: -9px;
    }
    .services-section .about-subtitle {
        font-size: 1.9rem;
        margin-bottom: 5px;
    }
    /* 3. Reajuste del Grid de Servicios */
    .services-grid {
        /* Bajamos el mínimo de 350px a 300px para que quepan 3 en pantallas de 1024px */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }
    /* 4. Adaptación de las Tarjetas */
    .service-card {
        padding: 35px 30px; /* Reducimos padding para ganar espacio interno */
        border-radius: 24px;
        background: var(--white);
    }
    .service-card-desc {
        font-size: 1.05rem;
        font-weight: 500
    }
    .service-features li {
    font-size: 0.95rem;
}
    .service-card-title {
        font-size: 1.4rem;
    }
    /* 5. Ajuste de FAQ (Si están en la misma vista) */
    .about-faq {
        margin-top: 40px;
    }
          .about-stats {display: block; margin-top: 40px;
        }
            .about-stat__num {
        font-size: 2.5rem !important;
    }
    .about-stat__label {
        font-size: 1.05rem;
    }
    .about-stat {
        min-height: auto;
      padding: 20px;
    }
}
/*--BONUS: AJUSTE PARA MÓVILES (768px)--------*/
@media screen and (max-width: 768px) {
    .services-section {
        padding: 60px 0;
    }
    .services-section .about-main-text {
        font-size: 3rem !important; /* Tamaño legible en móviles */
    }
    .services-grid {
        /* En móviles, forzamos una sola columna */
        grid-template-columns: 1fr;
    }
    .service-card:hover {
        /* En móviles quitamos el desplazamiento lateral o excesivo */
        transform: translateY(-8px);
    }
}


/*----------------------------------------- SECCIÓN PAGINA DE SINGLE / ENTRADA SERVICIOS ------------------------------------- */
/* ========================================
   1. ESTILOS BASE Y ESCRITORIO (ORDENADOR)
   ========================================*/
/* Hero Detail & Títulos */
.hero-detail .about-title {
    font-size: 3.3rem;
}
.hero-detail .about-subtitle {
    font-size: 2.7rem;
}
.hero-detail .about-right {
    margin-top: 40px;
}
/* Listado de Expertise Hero */
.hero-expertise-wrapper {
    margin-top: 40px;
    max-width: 900px;
}
.expertise-list-container {
    background: linear-gradient(145deg, var(--soft-blue-bg) 0%, var(--white) 100%);
    padding: 35px;
    border-radius: 25px;
    border-left: 5px solid var(--red);
    box-shadow: var(--shadow-premium);
}
.expertise-item-v4 {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0;
    border-bottom: var(--border-separator);
}
.expertise-item-v4:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.expertise-item-v4:first-child {
    padding-top: 0;
}
.expertise-item-v4 i {
    color: var(--dark-blue);
    font-size: 1.4rem;
    margin-top: 3px;
}
.item-info h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin: 0 0 4px 0;
}
.item-info p {
    font-size: 0.95rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.5;
}
/* Ajustes de Apoyo y Badges */
.hero-trust-badge {
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.hero-trust-badge i { color: var(--red-dark); }
/* Grid de Metodología y Comportamiento Sticky */
@media (min-width: 992px) {
    .services-metodo.methodology-grid {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr !important;
        gap: 50px !important;
        align-items: start !important;
    }
    .methodology-visual-prestige {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 120px !important;
        height: auto !important;
        align-self: start !important;
        z-index: 10;
    }
    .prestige-card-inner {
        height: 520px !important; /* Altura premium fija en escritorio */
    }
}
.services-analysis p {
    font-size: 1.1rem;
    color: var(--dark-blue) !important;
    font-weight: 500;
    margin-bottom: 25px; /* Espaciado entre párrafos */
}

.services-analysis p:first-of-type {
    margin-top: 80px;
}

/* Opcional: Si hay una línea roja a la izquierda, asegurar 
   de que el contenedor la tenga para que cubra ambos párrafos */
/* ======================================
   2. SECCIÓN RESPONSIVE (MÓVIL Y TABLET)
   ====================================== */
/* Comportamiento de Grid en Móvil */
@media (max-width: 991px) {
    .services-metodo.methodology-grid {
        display: block !important;
        width: 100% !important;
    }
    .methodology-visual-prestige {
        position: relative !important;
        margin-top: 40px;
        width: 100% !important;
    }
    .prestige-card-inner {
        height: auto !important;
        padding: 40px 25px !important;
    }
}
/* Ajustes específicos para 768px */
@media (max-width: 768px) {

    .services-analysis p {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 25px; /* Espaciado entre párrafos */
    padding-left: 15px;
}
.services-analysis p:first-of-type {
    margin-top: 80px;
}
    .hero-detail .about-title { 
        font-size: 1.9rem !important; 
    }
    .hero-detail .about-subtitle {
        font-size: 1.8rem !important;
        margin-top: -60px;
    }
    .hero-detail .about-image-wrapper {
        margin-top: -80px;
    }
    .methodology-content .about-subtitle {
        font-size: 1.8rem;
        margin-top: 40px;
    }
    .methodology-content .about-main-text { 
        font-size: 1rem !important; /* Corregido de 0.1rem para que sea visible */
        opacity: 1 !important;
    }
    .about-container--single {
        padding: 0 15px !important;
    }
        .beneficios .about-title { 
        font-size: 1.9rem !important; 
    }
    .beneficios .about-subtitle {
        font-size: 1.8rem !important;
    }
}


/*---------------------------------------------------------Sección Footer-----------------------------------------------------*/

.footer-pro {
    position: relative;
    background: linear-gradient(135deg, var(--footer-bg-main) 0%, var(--dark-blue) 60%, var(--footer-bg-deep) 100%);
    color: var(--white);
    padding: 120px 0 40px; /* Suficiente espacio para la onda */
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

/* --- WAVE SUPERIOR (Control de color desde CSS) --- */
.footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

/* Control de la onda desde CSS */
.footer-wave svg path {
    fill: var(--red) !important; 
    mask-image: var(--wave-mask);
    -webkit-mask-image: var(--wave-mask);
    opacity: var(--footer-wave-opacity);
}
/* Toque Premium: Un resplandor de fondo detrás de la onda */
.footer-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--glow-red);
    pointer-events: none;
    z-index: -1;
}
/* --- CONTENIDO GRID (Jerarquía de espacio) --- */
.footer-content {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    gap: 60px;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}
/* --- COLUMNA 1: LOGO Y CONTACTO --- */
.footer-logo h2 {
    color: var(--white);
    font-size: 32px; /* Más grande para el logo principal */
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: lowercase; /* Estilo "legalfound" */
    letter-spacing: -0.5px;
}
.footer-contacto-lista {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}
.footer-contacto-lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px; /* Más espacio entre líneas */
    font-size: 14px;
    color: var(--text-white-bright); /* Mejor contraste */
    line-height: 1.6;
}
.footer-contacto-lista i {
    color: var(--red);
    font-size: 16px; /* Un poco más grande */
    width: 20px;
    text-align: center;
}
.footer-contacto-lista a {
    color: var(--text-white-bright); /* Contraste sutil */
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer-contacto-lista a:hover {
    color: var(--red);
    transform: translateX(3px); /* Pequeña interacción */
}
/* --- COLUMNA 2: NAVEGACIÓN --- */
.footer-menu {
    position: relative;
}
/* Título de sección "NAVEGACIÓN" - Estilo Premium */
.footer-menu::before {
    content: "NAVEGACIÓN";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: 25px;
    padding-left: 10px;
    border-left: 2px solid var(--red); /* Detalle de línea sutil */
}
.footer-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}
.footer-menu ul li {
    list-style: none !important;
    margin-bottom: 16px;
}
.footer-menu ul li a {
    color: var(--text-white-bright); /* Contraste sutil */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s var(--smooth-out);
    display: inline-block;
    padding-bottom: 2px;
}
/* Efecto hover con subrayado elegante que nace del centro */
.footer-menu ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 50%;
    background-color: var(--red);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.footer-menu ul li a:hover {
    color: var(--white);
    transform: translateX(5px);
}
.footer-menu ul li a:hover::after {
    width: 100%;
}
/* --- COLUMNA 3: REDES SOCIALES (Glassmorphism sutil) --- */
.footer-social.premium {
    display: flex;
    gap: 15px; /* Un poco más de espacio */
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.social-icon {
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass-light);
    border: var(--border-glass);
    backdrop-filter: var(--pill-blur);
    border-radius: 12px;
    color: var(--text-white-soft);
    transition: all 0.4s var(--elastic-out);
}
.social-icon i {
    font-size: 20px; /* Tamaño más grande para los iconos */
}
.social-icon:hover {
    /* Usamos tu degradado de rojo a rojo oscuro del root */
    background: var(--red-gradient-deep); 
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-5px);
    box-shadow: var(--shadow-red-soft);
}
/* Asegurar consistencia para Instagram (que estaba diferente) */
.social-icon i.fa-instagram {
    color: inherit !important;
    background: none !important;
    filter: none !important;
}
/* --- BOTTOM / COPYRIGHT --- */
.footer-divider {
    border: 0.5px solid var(--glass-border);
    margin: 3rem 0;
    position: relative;
    z-index: 2;
}
.footer-bottom {
    text-align: center;
    padding: 0 20px 30px;
}
.footer-bottom p {
    font-size: 13px;
    color: var(--text-white-soft); /* Mejor contraste para leer */
    margin: 0;
    letter-spacing: 0.5px;
}
/* Para crédito de mi portafolio */
.developer-credit {
    font-size: 0.52rem !important;
    opacity: 0.7;
    margin-top: 15px; 
    text-align: center;
}

.developer-credit a {
    display: inline-block;
    padding: 5px 10px;    /* Expande el área táctil sin afectar lo visual */
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    transition: all 0.3s ease;
    letter-spacing: 0.3px; /* Espaciado normal para "Diseño y desarrollo por" */
}

/* Estilo específico para NovaWeb */
.developer-credit a em {
    font-style: italic;    
    letter-spacing: 2px;   
    font-weight: 600;     
}

.developer-credit a:hover {
    opacity: 1;
    text-decoration: none; 
}

.developer-credit a:hover em {
    text-decoration: underline; /* Solo se subraya el nombre al pasar el mouse */
}

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    .footer-logo h2, .footer-contacto-lista, .footer-menu {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .footer-logo h2 {
        font-size: 28px;
    }
    .footer-contacto-lista li {
        justify-content: center;
    }
    .footer-social.premium {
        justify-content: center;
    }
    .footer-menu::before {
        display: inline-block;
        padding: 0 10px;
        border-left: none;
        border-bottom: 2px solid var(--red); /* Borde inferior en móvil */
        padding-bottom: 5px;
    }
    .footer-menu ul li a:hover {
        transform: scale(1.05);
    }
}



 /* --------------------------------------------------------------------------------------------------------------------------- 
   ---------------------------------------------------A N I M A C I O N E S-------------------------------------------------- 
   ------------------------------------------------------------------------------------------------------------------------ */


  /* ------------------------------------Animación KEYFRAMES Inicio portada principal---------------------------------- */
  @keyframes superPop {
      0% { opacity: 0; transform: scale(0.7) translateX(-100px); filter: blur(20px); }
      100% { opacity: 1; transform: scale(1) translateX(-20px); filter: blur(0); }
  }
  @keyframes imageReveal {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-25deg); filter: brightness(2); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: brightness(1); }
  }
  @keyframes arcExpand {
      0% { transform: translate(-50%, -50%) rotate(-120deg); opacity: 0; }
      100% { transform: translate(-50%, -50%) rotate(-10deg); opacity: 1; }
  }
  @keyframes slideBadge {
      0% { opacity: 0; transform: translateX(100px); filter: blur(10px); }
      100% { opacity: 1; transform: translateX(0); filter: blur(0); }
  }
  @keyframes bgSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }


 /* -------------------------------------------- Animación movimiento acendente general -----------------------------------*/
/* REFUERZO TOTAL DE VISIBILIDAD */
.about-section {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  visibility: hidden !important;
  transition: all 0.8s ease-out !important;
}
.about-section.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}
/* Forzamos a que todos los hijos se vean cuando el padre sea visible */
.about-section.is-visible * {
  opacity: 1 !important;
  visibility: visible !important;
  animation-play-state: running !important;
}

  /* ---------------------------------------------- Animación Texto General ------------------------------------------------*/
  @keyframes elegantReveal {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Sube desde abajo */
        clip-path: inset(0 0 100% 0); /* Se "descubre" de arriba a abajo */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0); /* Totalmente visible */
    }
}
/* Estado inicial de los párrafos */
.reveal-dust-text p {
    opacity: 0;
    will-change: transform, opacity, clip-path;
}
/* Activación de la animación */
.reveal-dust-text.is-visible p {
    animation: elegantReveal 1.2s cubic-bezier(0.2, 1, 0.3, 1) both;
}
/* Retraso progresivo (Stagger) para que no salgan todos a la vez */
.reveal-dust-text.is-visible p:nth-child(1) { animation-delay: 0.2s; }
.reveal-dust-text.is-visible p:nth-child(2) { animation-delay: 0.5s; }
.reveal-dust-text.is-visible p:nth-child(3) { animation-delay: 0.8s; }



  /* ----------------------------------------------------- Animación Título ----------------------------------------------*/
.animar-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* Cuando se activa */
.animar-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
/* --- Animación al aparecer desde la derecha (más suave y lenta) --- */
.animar-scroll {
  opacity: 0;
  transform: translateX(80px); /* un poco más lejos para dar efecto */
  transition: opacity 1.4s ease-out, transform 1.4s ease-out; /* más lento */
}
.animar-scroll.visible {
  opacity: 1;
  transform: translateX(0);
}


/* --------------------------------------- Animación de entrada: Abajo hacia Arriba ----------------------------------------- */
.entrada-contenido-subiendo {
    opacity: 0;
    transform: translateY(50px); /* Empieza 50px más abajo */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
/* Clase que activa el movimiento (la añade el JS o la puedes poner fija para probar) */
.entrada-contenido-subiendo.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Ajuste para dispositivos móviles (un poco más rápido) */
@media (max-width: 768px) {
    .entrada-contenido-subiendo {
        transition-duration: 0.5s;
        transform: translateY(30px); /* Menos recorrido en móvil */
    }
}


/* ------------------------------------------- Animación de pelotas rebotando --------------------------------------------- */
@keyframes bounceBallSlow {
    0% {
        opacity: 0;
        transform: translateY(-120px) scaleY(1.1); /* Caída desde un poco más arriba */
    }
    45% {
        opacity: 1;
        transform: translateY(0) scaleY(1); /* Primer impacto */
    }
    60% {
        transform: translateY(-45px) scaleY(1.03); /* Rebote medio más lento */
    }
    75% {
        transform: translateY(0) scaleY(0.97); /* Segundo impacto suave */
    }
    85% {
        transform: translateY(-15px) scaleY(1.01); /* Mini rebote final */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1); /* Reposo total */
    }
}
/* La clase que activa el JS */
.pilar-icon.animate-bounce {
    /* Aumentamos a 1.6s para que sea más majestuoso */
    animation: bounceBallSlow 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Estado inicial */
.pilar-icon {
    opacity: 0;
    will-change: transform, opacity; /* Optimización para que el navegador se prepare */
}
.about-pilar:nth-child(1) .pilar-icon { animation-delay: 0s !important; }
.about-pilar:nth-child(2) .pilar-icon { animation-delay: 0.3s !important; }
.about-pilar:nth-child(3) .pilar-icon { animation-delay: 0.6s !important; }
.about-pilar:nth-child(4) .pilar-icon { animation-delay: 0.9s !important; }



/* ------------------------------------ Animación de rompecabezas para la imagen de NOSOTROS --------------------------------- */
/* Estilo común para todas las piezas */
.puzzle-piece {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-fill-mode: forwards;
}
/* PIEZA 1: Superior Izquierda */
.p1 {
    clip-path: polygon(0 0, 50% 0, 50% 50%, 0% 50%);
    animation-name: assembleP1;
}
/* PIEZA 2: Superior Derecha */
.p2 {
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
    animation-name: assembleP2;
}
/* PIEZA 3: Inferior Izquierda */
.p3 {
    clip-path: polygon(0% 50%, 50% 50%, 50% 100%, 0% 100%);
    animation-name: assembleP3;
}
/* PIEZA 4: Inferior Derecha */
.p4 {
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
    animation-name: assembleP4;
}
/* --- KEYFRAMES INDEPENDIENTES PARA QUE SE UNAN --- */
@keyframes assembleP1 {
    0% { opacity: 0; transform: translate(-100px, -100px) scale(1.2); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes assembleP2 {
    0% { opacity: 0; transform: translate(100px, -100px) scale(1.2); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes assembleP3 {
    0% { opacity: 0; transform: translate(-100px, 100px) scale(1.2); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes assembleP4 {
    0% { opacity: 0; transform: translate(100px, 100px) scale(1.2); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}


/*-----------------------------------------------Animacion tarjet servicios -------------------------------------------*
/*---1. ESTILO BASE (Común para todos los dispositivos)---*/
.service-card {
    position: relative;
    overflow: hidden;
    background: var(--white);
    /* El hover láser sigue funcionando en todos lados */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    visibility: visible;
    opacity: 1;
}
.service-card * {
    position: relative;
    z-index: 2;
}
/* El Láser se queda fuera para que funcione en cualquier dispositivo al tocar/hover */
.service-card::before {
    content: '';
    position: absolute;
    top: -150%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--red-glow-line);    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.service-card:hover::before {
    opacity: 1;
    animation: laserScan 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes laserScan {
    0% { top: -100%; }
    100% { top: 100%; }
}

/*-2. Solo ordenador (Pantallas mayores a 1100px)--*/
@media screen and (min-width: 1101px) {
    .services-grid {
        perspective: 3000px;
    }
    .service-card {
        /* Sobrescribimos el estado base solo para PC */
        opacity: 0;
        visibility: hidden;
        filter: blur(15px) brightness(0.5);
        transform: translateY(120px) translateZ(-200px) rotateX(-25deg) scale(0.8);
        transition: 
            opacity 1.4s ease,
            filter 1.2s ease,
            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.3s ease;
        
        will-change: transform, opacity, filter;
    }
    /* La activación secuencial por JS solo afectará en PC */
    .service-card.active {
        opacity: 1;
        filter: blur(0) brightness(1);
        transform: translateY(0) translateZ(0) rotateX(0deg) scale(1);
        visibility: visible;
    }
}


/*-------------------------------------Animacion retardada para seccion metodologia-solida experiencia----------------*/
/* Estado inicial: Invisible y bien abajo */
.animar-scroll-delay {
    opacity: 0;
    transform: translateY(80px); /* Más recorrido para una subida más dramática */
    /* Transición de 2.5 segundos para que el movimiento sea fluido y eterno */
    transition: opacity 2.1s ease-out, transform 2.5s cubic-bezier(0.1, 0.7, 0.1, 1);
    transition-delay: 1.8s; /* Espera más de 2 segundos antes de arrancar */
    will-change: transform, opacity; /* Optimización para que la animación no de saltos */
}
/* Estado activo: Posición final perfecta */
.animar-scroll-delay.aparecer {
    opacity: 1;
    transform: translateY(0);
}



/* ---------------------------- Animación de entrada texto en cascada (letra por letra) --------------------------------- */
/* Animación de Items de Expertise (Cascada) */
.expertise-item-v4 {
    opacity: 0;
    transform: translateX(40px) translate3d(0,0,0);
    transition: 
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.start-animation .expertise-item-v4 {
    opacity: 1;
    transform: translateX(0);
}
.start-animation .expertise-item-v4:nth-child(1) { transition-delay: 0.1s; }
.start-animation .expertise-item-v4:nth-child(2) { transition-delay: 0.6s; }
.start-animation .expertise-item-v4:nth-child(3) { transition-delay: 1.1s; }
.start-animation .expertise-item-v4:nth-child(4) { transition-delay: 1.6s; }
/* Animación de Texto Letra por Letra */
.services-analysis {
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1.7;
}
.word-animate {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    transition: 
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    margin-right: 0.05em; 
}
.services-analysis.is-visible .word-animate {
    opacity: 1;
    transform: translateY(0);
}
.services-analysis p {
    margin-bottom: 1.5em;
    color: var(--text-gray);
}
/* Soporte para accesibilidad (Sin movimiento) */
@media (prefers-reduced-motion: reduce) {
    .expertise-item-v4, .word-animate {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}