:root {
            --verde-principal: #2c5f4f;
            --verde-oscuro: #1a3d33;
            --dorado: #d4af37;
            --dorado-oscuro: #c09220;
            --gris-claro: #f8f9fa;
            --texto-oscuro: #2c3e50;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
        }

        /* ===== HERO SECTION SERVICIOS ===== */
        .hero-servicios{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;           /* ok para recortes limpios */
  /* Fondo por defecto (se sobreescribe con .bg-*) */
  background: linear-gradient(135deg, rgba(31,70,36,.85) 0%, rgba(11,42,20,.85) 100%),
              url('../img/fletes/102.jpg') center/cover no-repeat;
}

/* Fondos específicos por servicio (cambia las rutas a tus imágenes) */
.hero-servicios.bg-transporte{
  background: linear-gradient(135deg, rgba(31,70,36,.82) 0%, rgba(11,42,20,.82) 100%),
              url('../img/fletes/102.jpg') center/cover no-repeat;
}
.hero-servicios.bg-patio{
  background: linear-gradient(135deg, rgba(31,70,36,.82) 0%, rgba(11,42,20,.82) 100%),
              url('../img/patio-contenedor/105.jpg') center/cover no-repeat;
}
.hero-servicios.bg-seguridad{
  background: linear-gradient(135deg, rgba(31,70,36,.82) 0%, rgba(11,42,20,.82) 100%),
              url('../img/custodia-monitoreo/monitoreo2.jpg') center/cover no-repeat;
}

/* El texto siempre por encima del overlay y del fondo */
.hero-servicios .hero-content{
  position: relative;
  z-index: 3;
}


        .hero-servicios::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero-title-main {
            font-size: 4rem;
            font-weight: 900;
            color: #ffffff;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 20px rgba(0,0,0,0.3);
            letter-spacing: 2px;
        }

        .hero-subtitle {
            font-size: 1.3rem;
            color: #e8e8e8;
            line-height: 1.8;
            max-width: 800px;
            margin-bottom: 2rem;
        }

        /* ================================================
   ARREGLO PARA LOGO Y CÍRCULO GIRATORIO (CORREGIDO)
   ================================================ */

/* 1. El contenedor principal (se queda igual) */
.circular-text-decoration {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 350px; 
    height: 350px;
}

/* 2. El LOGO (¡LO MANDAMOS AL FONDO!) */
.logo-circular {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 306px;  /* Ajusta este tamaño si quieres */
    height: 306px;
    border-radius: 50%;
    object-fit: cover;
    
    /* ¡CAMBIO! Lo mandamos para atrás */
    z-index: 1;
    opacity: 0.8;
    
    
}

/* 3. El TEXTO (¡LO TRAEMOS AL FRENTE Y LO HACEMOS VISIBLE!) */
.circular-text-decoration svg {
    /* ¡CAMBIO! Lo traemos al frente */
    position: relative; /* Para que obedezca z-index */
    z-index: 2;
    
    /* Lo hacemos 100% visible */
    opacity: 1; 
    
    
    animation: rotate 30s linear infinite;
    width: 100%;
    height: 100%;
}

/* 4. La animación (esta ya debe estar en tu CSS) */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

        /* ===== SECCIÓN SERVICIOS GRID ===== */
        .servicios-detallados-section {
            padding: 100px 0;
            background: #ffffff;
        }

        .section-header {
            text-align: center;
            margin-bottom: 70px;
        }

        .section-pretitle {
            font-size: 1rem;
            color: var(--dorado);
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--verde-principal);
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .section-divider {
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--dorado) 0%, var(--dorado-oscuro) 100%);
            margin: 0 auto 30px;
        }

        .section-description {
            font-size: 1.1rem;
            color: #7f8c8d;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* ===== TARJETAS DE SERVICIOS ===== */
        .servicio-card-premium {
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            height: 100%;
            border: 1px solid #e8e8e8;
        }

        .servicio-card-premium:hover {
            transform: translateY(-15px);
            box-shadow: 0 15px 50px rgba(44, 95, 79, 0.2);
            border-color: var(--dorado);
        }

        .servicio-icon-box {
            background: linear-gradient(135deg, var(--verde-principal) 0%, var(--verde-oscuro) 100%);
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .servicio-icon-box::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
            animation: pulse 4s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        .servicio-icon {
            font-size: 3.5rem;
            color: var(--dorado);
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
        }

        .servicio-numero {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.7);
            font-weight: 700;
            letter-spacing: 2px;
            position: relative;
            z-index: 2;
        }

        .servicio-content-box {
            padding: 35px 30px;
        }

        .servicio-titulo {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--verde-principal);
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .servicio-lista {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0;
        }

        .servicio-lista li {
            padding: 12px 0;
            color: #666;
            font-size: 0.95rem;
            display: flex;
            align-items: flex-start;
            line-height: 1.6;
            border-bottom: 1px solid #f0f0f0;
        }

        .servicio-lista li:last-child {
            border-bottom: none;
        }

        .servicio-lista li i {
            color: var(--dorado);
            margin-right: 12px;
            margin-top: 3px;
            font-size: 1rem;
        }

        .btn-servicio-detalle {
            background: transparent;
            color: var(--verde-principal);
            border: 2px solid var(--verde-principal);
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            font-size: 0.95rem;
            letter-spacing: 1px;
        }

        .btn-servicio-detalle:hover {
            background: var(--verde-principal);
            color: #ffffff;
            transform: translateX(5px);
        }

        /* ===== SECCIÓN GALERÍA ===== */
        .galeria-transporte-section {
            padding: 100px 0;
            background: var(--gris-claro);
        }

        .galeria-item {
            position: relative;
            border-radius: 11px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            margin: 15px;
        }

        .galeria-item img {
            width: 100%;
            height: 650px;
            object-fit: fill;
            transition: transform 0.5s ease;
        }

       /* .galeria-item:hover img {
            transform: scale(1.05);
        }*/

        .galeria-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(26, 61, 51, 0.95) 0%, transparent 100%);
            padding: 40px 30px;
            color: #ffffff;
        }

        .galeria-titulo {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--dorado);
        }

        .galeria-descripcion {
            font-size: 1rem;
            opacity: 0.9;
            line-height: 1.6;
        }

        /* Owl Carousel Customización */
        .owl-theme .owl-dots .owl-dot span {
            background: var(--verde-principal);
        }

        .owl-theme .owl-dots .owl-dot.active span {
            background: var(--dorado);
        }

        .owl-theme .owl-nav [class*='owl-'] {
            background: var(--verde-principal) !important;
            color: #ffffff !important;
            font-size: 2rem !important;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            line-height: 45px !important;
            transition: all 0.3s ease;
        }

        .owl-theme .owl-nav [class*='owl-']:hover {
            background: var(--dorado) !important;
        }

        /* ===== CARACTERÍSTICAS ADICIONALES ===== */
        .caracteristicas-extras {
            background: #ffffff;
            padding: 80px 0;
        }

        .caracteristica-item {
            text-align: center;
            padding: 30px 20px;
            transition: all 0.3s ease;
        }

        .caracteristica-item:hover {
            transform: translateY(-5px);
        }

        .caracteristica-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--verde-principal) 0%, var(--verde-oscuro) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            box-shadow: 0 5px 20px rgba(44, 95, 79, 0.3);
        }

        .caracteristica-icon i {
            font-size: 2rem;
            color: var(--dorado);
        }

        .caracteristica-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--verde-principal);
            margin-bottom: 10px;
        }

        .caracteristica-text {
            font-size: 0.95rem;
            color: #7f8c8d;
            line-height: 1.6;
        }

        /* ===== SECCIÓN CTA (CALL TO ACTION) ===== */
        .cta-contacto-section {
            background: linear-gradient(135deg, var(--verde-principal) 0%, var(--verde-oscuro) 100%);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .cta-contacto-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
            opacity: 0.3;
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .cta-text {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.9);
            margin-bottom: 30px;
            line-height: 1.7;
        }

        .btn-cta-dorado {
            background: linear-gradient(135deg, var(--dorado) 0%, var(--dorado-oscuro) 100%);
            color: var(--verde-oscuro);
            padding: 18px 50px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4);
            font-size: 1.1rem;
        }

        .btn-cta-dorado:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 35px rgba(212, 175, 55, 0.6);
            color: var(--verde-oscuro);
        }

        .cta-icon-large {
            font-size: 5rem;
            color: var(--dorado);
            opacity: 0.9;
            margin-bottom: 20px;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 991px) {
            .hero-title-main {
                font-size: 3rem;
            }

            .section-title {
                font-size: 2.2rem;
            }

           /* Círculo a la derecha, centrado verticalmente, por delante del fondo */
.circular-text-decoration{
  position: absolute;
  right: 8vw;                /* ajusta según tu diseño */
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  z-index: 3;                /* mismo plano que el texto */
  pointer-events: none;      /* no bloquea clics */
}

.circular-text-decoration svg{
  width: 100%;
  height: 100%;
  animation: rotate 14s linear infinite;
}

.logo-circular{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;               /* tamaño del logo */
  height: 92px;
  object-fit: contain;
  z-index: 4;                /* por encima del texto del círculo */
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

/* Animación del texto circular */
@keyframes rotate{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* Títulos del hero (por si quieres recalcar) */
.hero-title-main{
  color: #fff;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.35);
}
.hero-subtitle{
  color: #eaeaea;
  max-width: 820px;
}

            .galeria-item img {
                height: 350px;
            }
        }

        @media (max-width: 767px) {
            .hero-servicios {
                height: 450px;
            }

            .hero-title-main {
                font-size: 2.2rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .servicios-detallados-section {
                padding: 60px 0;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .cta-title {
                font-size: 1.8rem;
            }

            .galeria-transporte-section {
                padding: 60px 0;
            }

            .galeria-item img {
                height: 280px;
            }
        }