/* Extracted styles from index.html */
body {
    box-sizing: border-box;
}
.hero-gradient {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.animate-fade-in {
    animation: fadeIn 0.8s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* WordPress/Divi Compatibility */
.et_pb_section { padding: 0 !important; }
.et_pb_row { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.et_pb_column { padding: 0 !important; }
.et_pb_module { margin-bottom: 0 !important; }

/* Admin Bar Compatibility */
body.admin-bar .fixed-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .fixed-header { top: 46px; }
}

/* Divi Builder Mode */
.et-db #et-boc .et-l { max-width: none !important; }
.et-db #et-boc .et_pb_section { padding: 0 !important; }

/* Custom Styles for WordPress */
.wp-content { width: 100% !important; max-width: none !important; }
.entry-content { width: 100% !important; }

/* Blog Slider Peek Effect */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Propiedad estándar para navegadores que la soporten */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Propiedad estándar para navegadores que la soporten */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Peek effect for blog slider */
#blogSlider {
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    #blogSlider {
        padding-left: 40px;
        padding-right: 40px;
    }
}
/* --- Site logo size variables and helper classes --- */
:root {
    /* Paleta de colores del sitio (ajustada según la petición) */
    --site-bg: #FFFFFF; /* Fondo principal */
    --text-default: #333333; /* Texto principal */
    --brand: #00877C; /* Verde azulado (branding) */
    --brand-dark: #006e66; /* variante oscura para hover/gradients */
    --cta: #E35205; /* Naranja para CTAs */
    --white: #FFFFFF;

    /* base sizes (can be overridden by helper classes) */
    /* Usamos la variable para la altura (max-height) y dejamos el ancho auto para mantener la proporción */
    --site-logo-size: 2rem;       /* móvil/tablet: 2rem = 32px (reducido) */
    --site-logo-size-md: 3rem;    /* escritorio: 3rem = 48px (reducido) */
}

.site-logo {
    max-height: var(--site-logo-size);
    height: auto;
    width: auto;
    object-fit: contain;
    display: inline-block;
}

@media (min-width: 768px) {
    .site-logo {
        /* Preferir max-height para no forzar ancho fijo y así mantener la proporción */
        max-height: var(--site-logo-size-md);
        height: auto;
        width: auto;
    }
}
/* Global page colors and utility overrides for brand palette */
body {
    background: var(--site-bg);
    color: var(--text-default);
}

/* Headings should use neutral text color (no verdes en textos) */
h1, h2, h3 {
    color: var(--text-default);
}

/* Headings that sit on colored backgrounds should be white for readability */
#hero-section h1, #hero-section h1 span, .hero-gradient h1, .hero-gradient h2, .bg-brand h1, .bg-brand h2 {
    color: var(--white);
}

/* Service card titles inside gradient headers must be white (override global h3 rule) */
.gradient-bg-1 h3, .gradient-bg-2 h3, .gradient-bg-3 h3, .gradient-bg-4 h3, .gradient-bg-5 h3, .gradient-bg-6 h3, .gradient-bg-7 h3 {
    color: var(--white);
}

/* Also ensure any h3 inside .bg-brand or hero sections are white */
.bg-brand h3, .hero-gradient h3 { color: var(--white); }

/* Also cover Tailwind-generated gradient/background utilities: make h3 white when inside gradient backgrounds */
.bg-gradient-to-br h3,
.bg-gradient-to-tr h3,
.bg-gradient-to-tl h3,
.bg-gradient-to-r h3,
.bg-gradient-to-l h3,
.bg-gradient-to-b h3,
.bg-gradient-to-t h3,
/* Match any element with a Tailwind 'from-XXX' class (gradient start color) and force child h3 to white */
[class*="from-"] h3,
[class*="to-"] h3 {
    color: var(--white);
}

/* Links use neutral color (no verdes en textos). Keep legible; underline on hover for affordance */
a { color: var(--text-default); text-decoration: underline; }
a:hover { color: var(--text-default); opacity: .9; }

/* CTA button utility */
.btn-cta { background-color: var(--cta) !important; color: var(--white) !important; }
.btn-cta:hover { background-color: #c84603 !important; }

/* Override some Tailwind blue utilities used across the project to match branding */
.bg-blue-600 { background-color: var(--brand) !important; }
.bg-blue-700 { background-color: var(--brand-dark) !important; }
.text-blue-600 { color: var(--text-default) !important; }
.hover\:text-blue-600:hover { color: var(--text-default) !important; }
.bg-blue-500 { background-color: color-mix(in srgb, var(--brand) 60%, #ffffff 40%) !important; }

/* Indicators and small accents */
.industry-indicator.bg-blue-600 { background-color: var(--brand) !important; }
.blog-indicator.bg-blue-600 { background-color: var(--brand) !important; }

/* Helper classes for easy size switching */
.logo-sm {
    --site-logo-size: 1.5rem;      /* 24px */
    --site-logo-size-md: 2rem;     /* 32px */
}

.logo-md {
    --site-logo-size: 2rem;        /* 32px */
    --site-logo-size-md: 2.5rem;   /* 40px */
}

.logo-lg {
    --site-logo-size: 2.5rem;      /* 40px */
    --site-logo-size-md: 3rem;     /* 48px */
}

/* Helper overrides: use these classes on the <img class="site-logo ..."> to tweak size quickly */
.site-logo--sm { --site-logo-size: 1.5rem; --site-logo-size-md: 2rem; }
.site-logo--md { --site-logo-size: 2rem; --site-logo-size-md: 3rem; }
.site-logo--lg { --site-logo-size: 2.75rem; --site-logo-size-md: 4rem; }

/* Services page specific helpers (extracted from servicios.html) */
.service-icon {
    transition: all 0.3s ease;
}
.service-card:hover .service-icon {
    transform: scale(1.1);
}

/* gradient backgrounds used in the services grid */
.gradient-bg-1 { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }
.gradient-bg-2 { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.gradient-bg-3 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.gradient-bg-4 { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.gradient-bg-5 { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.gradient-bg-6 { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }
.gradient-bg-7 { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }

/* Dedicated utility gradients for FTL (azul profundo) y LTL (naranja consolidación) */
.gradient-ftl { background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%); }
.gradient-ltl { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
/* Gradientes especializados (unificados) */
.gradient-refrigerada { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); }
.gradient-peligrosa { background: linear-gradient(135deg, var(--cta) 0%, #d83520 55%, #b21f16 100%); }
.gradient-sobredimensionada { background: linear-gradient(135deg, #059669 0%, #065f46 100%); }
.gradient-altovalor { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }
.gradient-express { background: linear-gradient(135deg, var(--cta) 0%, #c84603 100%); }
.gradient-vehiculos { background: linear-gradient(135deg, #0c4a6e 0%, #083344 100%); }

/* Fichas sección "Nuestra Flota Moderna" */
.flota-stat {
    background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%); /* Gradiente azul solicitado */
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.15);
    transition: transform .3s ease, box-shadow .3s ease;
}
.flota-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(255,255,255,0.12), transparent 65%);
    pointer-events: none;
}
.flota-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -6px rgba(0,0,0,0.25); }
.flota-stat .stat-number { font-size: 2.5rem; line-height: 1; font-weight: 700; letter-spacing: -.5px; }
.flota-stat .stat-title { font-size: 1rem; font-weight: 600; margin-top: .35rem; }
.flota-stat .stat-sub { font-size: .75rem; margin-top: .35rem; color: #dbeafe; font-weight: 500; }
@media (min-width: 768px) { .flota-stat .stat-sub { font-size: .85rem; } }

.text-accent-blue { color: #dbeafe !important; }

/* Industries slider styles */
.industry-indicator { transition: background-color 0.2s ease; }
#industrySlides { display: flex; align-items: stretch; }
.industry-indicator.active { background-color: var(--brand); }
.industry-card img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Industry slider container sizing */
#industrySlides > div { min-width: 100%; }
@media (min-width: 768px) {
    #industrySlides > div { min-width: 66.666%; }
}
@media (min-width: 1024px) {
    #industrySlides > div { min-width: 50%; }
}

.industry-indicator.bg-blue-600 { background-color: var(--brand); }
.industry-indicator.bg-gray-300 { background-color: #d1d5db; }

/* Force readable text on dark/colored backgrounds: use white */
.bg-brand, .hero-gradient, .gradient-bg-1, .gradient-bg-2, .gradient-bg-3, .gradient-bg-4, .gradient-bg-5, .gradient-bg-6, .gradient-bg-7, .gradient-ftl, .gradient-ltl, .gradient-refrigerada, .gradient-peligrosa, .gradient-sobredimensionada, .gradient-altovalor, .gradient-express, .gradient-vehiculos, .bg-blue-600, .bg-blue-700 {
    color: var(--white);
}

/* Avoid green text: override Tailwind green text utilities to either white (light greens) or neutral black */
.text-green-100, .text-green-200, .text-green-300, .text-green-400 { color: var(--white) !important; }
.text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900 { color: var(--text-default) !important; }

/* Also ensure any inline classes that used brand for text are neutral */
.text-blue-200 { color: var(--text-default); }

/* Ensure common gray text utilities match requested body text */
.text-gray-700 { color: var(--text-default) !important; }
.text-gray-400 { color: #9CA3AF !important; }

/* Utility to set an element background to brand color */
.bg-brand { background-color: var(--brand) !important; color: #fff; }

/* Make sure common gray text utilities match requested body text */
.text-gray-700 { color: var(--text-default) !important; }
.text-gray-400 { color: #9CA3AF !important; }

/* Fallback utility classes for mobile menu animation (in case Tailwind JIT doesn't generate them) */
.translate-x-full { transform: translateX(100%); }
.translate-x-0 { transform: translateX(0%); }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }

/* -----------------------------
   Impact Section (Ecomflow-style)
   ----------------------------- */
.impact-section {
    background-image: radial-gradient(circle at 10% 10%, rgba(0,135,124,0.02), transparent 10%),
                      radial-gradient(circle at 90% 80%, rgba(0,0,0,0.03), transparent 10%);
    position: relative;
    overflow: visible;
}

.impact-left { padding: 2rem 1rem; }
.impact-title {
    font-size: 2.25rem;
    line-height: 1.02;
    font-weight: 800;
    margin: 0 0 0.6rem 0;
    color: var(--text-default);
    background-clip: text;
}
.impact-title .gradient-green {
    background: linear-gradient(90deg, var(--brand) 0%, #00b887 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.impact-subtitle { color: #6b7280; font-size: 1.125rem; max-width: 48rem; }

.impact-cta.btn-cta {
    --tw-shadow: 0 10px 20px rgba(2,132,120,0.12);
    position: relative;
    overflow: hidden;
    padding: 0.8rem 1.25rem;
    font-size: 1rem;
    border-radius: 0.75rem;
}
.impact-cta.btn-cta::after {
    content: '';
    position: absolute;
    left: -40%;
    top: -20%;
    width: 40%;
    height: 140%;
    background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
    transform: rotate(20deg);
    transition: transform 0.9s cubic-bezier(.2,.9,.3,1), opacity 0.6s;
    opacity: 0.9;
}
.impact-cta.btn-cta:hover::after { transform: translateX(220%) rotate(20deg); opacity: 1; }
.impact-cta.btn-cta:focus { outline: 3px solid rgba(0,135,124,0.18); }

.globe-wrap { width: 100%; max-width: 500px; margin: 0 auto; }
.globe-svg { width: 100%; height: auto; display: block; }

.orbital-ring { transform-origin: center; }
.ring-1 { animation: orbit-rotate 28s linear infinite; }
.ring-2 { animation: orbit-rotate-rev 20s linear infinite; }
.ring-3 { animation: orbit-rotate 14s linear infinite; }

@keyframes orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-rotate-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.pulse-dot { transform-origin: center; animation: pulse 2.6s infinite ease-in-out; }
.pulse-dot:nth-child(1) { animation-delay: 0.0s; }
.pulse-dot:nth-child(2) { animation-delay: 0.4s; }
.pulse-dot:nth-child(3) { animation-delay: 0.8s; }
.pulse-dot:nth-child(4) { animation-delay: 1.2s; }

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.6); opacity: 0.28; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.conn-lines .line { stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0.9; animation: drawLine 2.2s forwards ease-in-out; }
.conn-lines .line:nth-child(2) { animation-delay: 0.3s; }
.conn-lines .line:nth-child(3) { animation-delay: 0.6s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.stat-floating { position: absolute; background: rgba(255,255,255,0.98); border-radius: 12px; box-shadow: 0 10px 20px rgba(15,23,42,0.08); padding: 0.6rem; width: 210px; transition: transform .28s ease, box-shadow .28s ease; }
.stat-floating .stat-inner { display:flex; gap:0.75rem; align-items:center; }
.stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(0,135,124,0.12), rgba(0,135,124,0.06)); color: var(--brand); font-weight:700; }
.stat-value { font-weight:700; color: var(--text-default); font-size: 1.125rem; }
.stat-label { font-size: 0.85rem; color: #6b7280; }
.stat-floating:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(15,23,42,0.12); }

.stat-a { left: 8%; top: 8%; }
.stat-b { right: 6%; top: 18%; }
.stat-c { left: 10%; bottom: 8%; }

/* Reveal animations (staggered by data-delay via inline styles set by JS) */
.reveal { opacity: 0; transform: translateY(18px) scale(0.995); transition: opacity 600ms cubic-bezier(.2,.9,.3,1), transform 600ms cubic-bezier(.2,.9,.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .impact-title { font-size: 2rem; }
    .globe-wrap { max-width: 420px; }
    .stat-floating { width: 190px; }
}
@media (max-width: 768px) {
    .impact-left { padding: 1rem 0; }
    .impact-title { font-size: 1.75rem; text-align: left; }
    .impact-subtitle { font-size: 1rem; }
    .impact-right { margin-top: 1.5rem; }
    /* Keep globe centered and stats floating nearby */
    .impact-right { display:flex; flex-direction:column; align-items:center; position:relative; }
    .globe-wrap { max-width: 340px; }
    .stat-floating { width: 170px; }
    .stat-a { position: absolute; top: -8%; left: 50%; transform: translate(-50%, -50%); }
    .stat-b { position: absolute; top: 48%; right: -6%; transform: translate(50%, -50%); }
    /* Mover ficha +1.500 a la izquierda en tablets/móviles anchos */
    .stat-c { position: absolute; bottom: -4%; left: 4%; transform: translate(0, 40%); }
}

@media (max-width: 640px) {
    .impact-right { padding-bottom: 2.5rem; }
    .globe-wrap { max-width: 280px; }
    .stat-floating {
        width: 155px;
        padding: 0.8rem 0.9rem;
        font-size: 0.95rem;
    }
    .stat-floating .stat-value { font-size: 1rem; }
    .stat-floating .stat-label { font-size: 0.78rem; }
    .stat-a { top: -14%; left: 50%; transform: translate(-50%, -60%); }
    .stat-b { top: 55%; right: -2%; transform: translate(25%, -50%); }
    /* En móviles pequeños, aún más a la izquierda y abajo */
    .stat-c { bottom: -10%; left: 6%; transform: translate(0, 50%); }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .orbital-ring, .pulse-dot, .conn-lines .line { animation: none !important; }
}

/* 3D globe wrapper: subtle tilt + realistic slow spin */
.globe-3d {
    width: 100%;
    transform-style: preserve-3d;
    perspective: 900px;
    display: inline-block;
}
.globe-3d .globe-svg {
    transform-origin: 50% 50%;
    /* initial tilt to give a globe-like axis */
    transform: rotateX(14deg) rotateY(0deg) translateZ(0);
    will-change: transform;
    /* sway instead of full 360° rotation */
    animation: globe-sway 10s ease-in-out infinite alternate;
}

@keyframes globe-sway {
    0% { transform: rotateX(14deg) rotateY(-14deg) translateZ(0); }
    50% { transform: rotateX(13.5deg) rotateY(0deg) translateZ(0); }
    100% { transform: rotateX(14deg) rotateY(14deg) translateZ(0); }
}

/* make pulse dots look more like light points */
.pulse-dot { filter: drop-shadow(0 6px 12px rgba(0,135,124,0.14)); }
.pulse-dot { animation-timing-function: cubic-bezier(.2,.9,.3,1); }

/* slightly delay rings to add depth (CSS only) */
.ring-1 { animation-duration: 36s; }
.ring-2 { animation-duration: 22s; }
.ring-3 { animation-duration: 14s; }

/* Routes & markers styling */
.globe-svg .route { stroke-dasharray: 8 6; stroke-linejoin: round; stroke-linecap: round; }
.globe-svg .route:hover { stroke-dasharray: 4 4; }
.globe-svg .hub { filter: drop-shadow(0 6px 10px rgba(0,135,124,0.12)); }
.route-marker { pointer-events: none; transform-origin: center; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12)); }
.route-marker.big { transform: scale(1); }
.route-marker.small { transform: scale(0.8); }
.route-marker path, .route-marker rect { vector-effect: non-scaling-stroke; }

/* subtle glow on routes */
.globe-svg .route { stroke: rgba(0,195,160,0.95); }

/* hub pulse animation for logistics hubs */
@keyframes hub-pulse {
    0% { 
        r: 6px; 
        stroke-opacity: 1; 
    }
    100% { 
        r: 14px; 
        stroke-opacity: 0; 
    }
}

/* when impact-section is in view, add a class to speed animations if needed */
.impact-section.active .globe-3d .globe-svg { animation-play-state: running; }

/* Partners Section */
#partners {
    background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
}

#partners .gradient-green {
    background: linear-gradient(135deg, var(--brand) 0%, #00C3A0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#partners .group:hover {
    background-color: var(--white);
}

#partners .group svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Infinite Carousel Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 2));
    }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

/* Smooth scrolling on smaller screens */
@media (max-width: 768px) {
    .animate-scroll {
        animation: scroll 20s linear infinite;
    }
}

/* Language Toggle Switch Styles */
.lang-toggle-circle {
    transition: transform 0.2s ease-in-out;
}

.lang-toggle-circle.translate-x-5 {
    transform: translateX(1.25rem);
}

#langToggle:focus,
#langToggleMobile:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 135, 124, 0.5);
}

/* Active state for language toggle */
#langToggle.active,
#langToggleMobile.active {
    background-color: var(--brand);
}