/* Consolidated styles extracted from original Corsocius PHP site */

/* ---- style block 1 ---- */
/* --- SOLUCIÓN PARA SCROLL HORIZONTAL --- */
        body {
            overflow-x: hidden;
        }

        /* --- ESTILOS PARA ANIMACIONES Y EFECTOS --- */

        /* Animación de entrada hacia arriba */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animación de entrada desde la derecha */
        .fade-in-from-right {
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-from-right.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Animación de entrada desde la izquierda con destello */
        .fade-in-from-left-gleam {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            position: relative; 
            overflow: hidden;   
        }
        .fade-in-from-left-gleam.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
        .fade-in-from-left-gleam.is-visible::after {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 100%;
            background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 80%);
            transform: skewX(-25deg);
            animation: gleam-loop 4s linear 2s infinite; 
        }
        @keyframes gleam-loop {
            0% { left: -150%; }
            100% { left: 150%; }
        }

        /* Efecto de zoom para íconos */
        .icon-zoom {
            transition: transform 0.3s ease-in-out;
        }
        .icon-zoom:hover {
            transform: scale(1.15);
        }
        
        /* Animación para el carrusel de logos continuo */
        @keyframes scroll-logos {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }
        .logo-scroll-animation {
            animation: scroll-logos 30s linear infinite;
        }

        /* Hover para botón del blog */
        .btn-blog-ver-mas:hover {
            background-color: #0084ae;
        }

        /* CAMBIO: Media query para acelerar el carrusel en móviles */
        @media (max-width: 767px) {
            .logo-scroll-animation {
                animation-duration: 20s; /* Más rápido en móviles */
            }
        }

/* ---- style block 2 ---- */
/* --- SOLUCIÓN PARA SCROLL HORIZONTAL --- */
        body {
            overflow-x: hidden;
        }

        .highlight-title {
            background-color: #00E398;
            color: #001F44;
            padding: 0.25em 0.5em;
        }
        .card-border {
            border: 4px solid;
            border-image-slice: 1;
            border-image-source: linear-gradient(to bottom, #0061C9, #00E398);
            border-radius: 1rem;
        }
        @keyframes gradient-pan {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .gradient-pan-animation {
          background-size: 200% 200%;
          animation: gradient-pan 4s ease-in-out infinite;
        }

        /* --- ESTILOS PARA ANIMACIONES --- */
        .fade-in-blur {
            opacity: 0;
            transform: translateY(20px);
            filter: blur(5px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
        }
        .fade-in-blur.is-visible {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        /* CORRECCIÓN DEFINITIVA: Zoom suave para íconos de valores */
        .icon-zoom-suave {
            /* Se aplica la transición a la propiedad 'scale' individualmente */
            transition: scale 0.3s ease-in-out;
        }
        .icon-zoom-suave:hover {
            /* Se usa la propiedad 'scale' para no interferir con 'transform: translateX' */
            scale: 1.15; 
        }

/* ---- style block 3 ---- */
/* --- SOLUCIÓN PARA SCROLL HORIZONTAL --- */
        body {
            overflow-x: hidden;
        }

        .highlight-title-servicios {
            background-color: #00E398;
            color: #001F44;
            padding: 0 0.25em !important;
            border-radius: 9999px;
        }
        .cta-background {
            background-image: url('https://corsocius.com/images/1920x654-Corsocius-Servicios.webp');
            background-size: cover;
            background-position: center;
        }

        /* --- Estilos para las animaciones de entrada --- */
        .fade-in-from-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-from-left.is-visible {
            opacity: 1;
            transform: translateX(0);
        }
        .fade-in-from-right {
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-from-right.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* NUEVO: Animación de entrada hacia arriba para el título */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Estilos para efectos hover --- */
        .icon-zoom {
            transition: transform 0.3s ease-in-out;
        }
        .icon-zoom:hover {
            transform: scale(1.2);
        }
        .btn-conversemos {
            transition: background-color 0.3s ease-in-out;
        }
        .btn-conversemos:hover {
            background-color: #00E398 !important;
        }

/* ---- style block 4 ---- */
body { overflow-x: hidden; }
        .highlight-title { background-color: #00E398; color: #004EDC; padding: 0.01em 0.3em; border-radius: 9999px; }
        .fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
        .fade-in-down { opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in-down.is-visible { opacity: 1; transform: translateY(0); }
        .icon-container-zoom { transition: transform 0.3s ease-in-out; }
        .icon-container-zoom:hover { transform: scale(1.1); }
        .form-container { background-color: #f8fafc; border-radius: 1.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
        .form-input-wrapper { position: relative; }
        .form-input-wrapper::after { content: ''; position: absolute; top: 6px; left: 6px; width: 100%; height: 100%; background-color: #00E398; border-radius: 9999px; z-index: 0; }
        .form-input { border: 2px solid #00E398; position: relative; z-index: 1; background-color: white; }

/* ---- style block 5 ---- */
body, html { overflow-x: hidden; }
  .highlight-pill { background-color: #00E398; color: #001F44; padding: 0 0.35em; border-radius: 9999px; }
  .card-soft { background-color: #f8fafc; border-radius: 1.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08); }
  .form-input-wrapper { position: relative; }
  .form-input-wrapper::after { content:''; position:absolute; top:6px; left:6px; width:100%; height:100%; background-color:#00E398; border-radius:9999px; z-index:0; }
  .form-input { border:2px solid #00E398; position:relative; z-index:1; background:#fff; }
  .fade-in-up { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
  .fade-in-up.is-visible { opacity: 1; transform: translateY(0); }
  /* Ajuste básico para que el iframe / embed no se “corte” */
  .landing-form script { display:block; }

/* ---- style block 6 ---- */
body, html { overflow-x: hidden; }
  .highlight-pill { background-color: #00E398; color: #001F44; padding: 0 0.35em; border-radius: 9999px; }
  .card-soft { background-color: #f8fafc; border-radius: 1.5rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08); }
  .btn-primary { background:#ef4444; }
  .btn-primary:hover { background:#dc2626; }
  .btn-ghost { background:#ffffff; border: 2px solid #e5e7eb; }
  .btn-ghost:hover { background:#f3f4f6; }
  .step-card { border:1px solid #e5e7eb; border-radius: 1.25rem; background:#fff; }
  .step-badge { width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; background:#00E398; color:#001F44; font-weight:800; }
  .cal-wrap { border:1px solid #d1fae5; background:#ecfdf5; border-radius: 1.5rem; }
  .calendly-inline-widget { border-radius: 1.25rem; overflow: hidden; }
  .sticky-mobile { position: sticky; bottom: 12px; z-index: 30; }
  @media (min-width: 768px){
    .sticky-mobile { position: static; }
  }

/* ---- style block 7 ---- */
body {
            font-family: 'Inter', sans-serif;
        }
        .hero-gradient {
            /* Fondo de imagen sin overlay */
            background: url('https://corsocius.com/images/banner-home.webp');
            background-size: cover;
            background-position: center;
        }
        .hero-text-shadow {
            text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
        }
        .highlighted-text {
            background-color: #00E398; /* Color de fondo verde (sombreado) */
            color: #0061C9; /* Color de texto azul */
            padding: 0.05em 0.4em; /* Padding ajustado para un sombreado más pegado */
            border-radius: 1.3rem; /* Esquinas redondeadas ajustadas */
            /* Anular la sombra de texto para estas palabras */
            text-shadow: none;
            line-height: 1.5;
            font-weight: 800; /* Asegurar que el texto sea bold */
        }
        .servicio-especializado-bg {
            background-image: url('https://corsocius.com/images/servicio-especializado-copia.webp');
            background-size: contain; /* Muestra la imagen completa */
            background-position: center;
            background-repeat: no-repeat; /* Evita que la imagen se repita */
        }
        .servicio-acompanamiento-bg {
            background-image: url('https://corsocius.com/images/acompañamiento-integral.webp');
            background-size: contain; /* Muestra la imagen completa */
            background-position: center;
            background-repeat: no-repeat; /* Evita que la imagen se repita */
        }
        .testimonial-section-bg {
             background-image: url('https://corsocius.com/images/testimonio.webp');
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
        }
        .footer-bg {
            background-color: #001F44;
        }
        .form-container-hero {
            background-color: rgba(0, 169, 157, 0.15); /* Transparencia del formulario aumentada */
            backdrop-filter: blur(12px);
            border-radius: 2rem; /* Mayor redondeo */
        }
        .slider-container {
            scroll-behavior: smooth;
        }
        .blog-slider::-webkit-scrollbar {
            display: none;
        }
        .blog-slider {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .blog-card-shadow {
            box-shadow: 0 10px 25px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

/* ---- style block 8 ---- */
body {
            font-family: 'Inter', sans-serif;
        }
        .footer-bg {
            background-color: #001F44;
        }
        @keyframes gradient-pan {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .gradient-pan-animation {
          background-size: 200% 200%;
          animation: gradient-pan 4s ease-in-out infinite;
        }

/* ---- style block 9 ---- */
body { overflow-x: hidden; }
    .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 6px rgba(0,0,0,0.4); z-index: 100; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
    .whatsapp-float:hover { transform: scale(1.1); }