/* ===== KODIMIA CUSTOM COLORS ===== */
:root {
  --kodimia-darkgreen: #082722;
  --kodimia-deepgreen: #018C48;
  --kodimia-green: #AFEB2B;
  --kodimia-lightgreen: #CEEDB2;
  --kodimia-palegreen: #E9FCE6;
  --kodimia-blue: #6577FF;
  --kodimia-lightblue: #DDEDFD;
}

/* Background Color Classes */
.bg-kodimia-darkgreen { background-color: var(--kodimia-darkgreen); }
.bg-kodimia-deepgreen { background-color: var(--kodimia-deepgreen); }
.bg-kodimia-green { background-color: var(--kodimia-green); }
.bg-kodimia-lightgreen { background-color: var(--kodimia-lightgreen); }
.bg-kodimia-palegreen { background-color: var(--kodimia-palegreen); }
.bg-kodimia-blue { background-color: var(--kodimia-blue); }
.bg-kodimia-lightblue { background-color: var(--kodimia-lightblue); }

/* Text Color Classes */
.text-kodimia-darkgreen { color: var(--kodimia-darkgreen); }
.text-kodimia-deepgreen { color: var(--kodimia-deepgreen); }
.text-kodimia-green { color: var(--kodimia-green); }
.text-kodimia-lightgreen { color: var(--kodimia-lightgreen); }
.text-kodimia-palegreen { color: var(--kodimia-palegreen); }
.text-kodimia-blue { color: var(--kodimia-blue); }
.text-kodimia-lightblue { color: var(--kodimia-lightblue); }

/* Border Color Classes */
.border-kodimia-darkgreen { border-color: var(--kodimia-darkgreen); }
.border-kodimia-deepgreen { border-color: var(--kodimia-deepgreen); }
.border-kodimia-green { border-color: var(--kodimia-green); }
.border-kodimia-lightgreen { border-color: var(--kodimia-lightgreen); }
.border-kodimia-palegreen { border-color: var(--kodimia-palegreen); }
.border-kodimia-blue { border-color: var(--kodimia-blue); }
.border-kodimia-lightblue { border-color: var(--kodimia-lightblue); }

/* Hover Background Classes */
.hover\:bg-kodimia-darkgreen:hover { background-color: var(--kodimia-darkgreen); }
.hover\:bg-kodimia-deepgreen:hover { background-color: var(--kodimia-deepgreen); }
.hover\:bg-kodimia-green:hover { background-color: var(--kodimia-green); }
.hover\:bg-kodimia-lightgreen:hover { background-color: var(--kodimia-lightgreen); }
.hover\:bg-kodimia-palegreen:hover { background-color: var(--kodimia-palegreen); }
.hover\:bg-kodimia-blue:hover { background-color: var(--kodimia-blue); }
.hover\:bg-kodimia-lightblue:hover { background-color: var(--kodimia-lightblue); }

/* Hover Text Classes */
.hover\:text-kodimia-darkgreen:hover { color: var(--kodimia-darkgreen); }
.hover\:text-kodimia-deepgreen:hover { color: var(--kodimia-deepgreen); }
.hover\:text-kodimia-green:hover { color: var(--kodimia-green); }
.hover\:text-kodimia-lightgreen:hover { color: var(--kodimia-lightgreen); }
.hover\:text-kodimia-palegreen:hover { color: var(--kodimia-palegreen); }
.hover\:text-kodimia-blue:hover { color: var(--kodimia-blue); }
.hover\:text-kodimia-lightblue:hover { color: var(--kodimia-lightblue); }

/* Focus Border Classes */
.focus\:border-kodimia-darkgreen:focus { border-color: var(--kodimia-darkgreen); }
.focus\:border-kodimia-deepgreen:focus { border-color: var(--kodimia-deepgreen); }
.focus\:border-kodimia-green:focus { border-color: var(--kodimia-green); }
.focus\:border-kodimia-lightgreen:focus { border-color: var(--kodimia-lightgreen); }
.focus\:border-kodimia-palegreen:focus { border-color: var(--kodimia-palegreen); }
.focus\:border-kodimia-blue:focus { border-color: var(--kodimia-blue); }
.focus\:border-kodimia-lightblue:focus { border-color: var(--kodimia-lightblue); }

/* Ring Color Classes (for focus rings) */
.ring-kodimia-darkgreen { --tw-ring-color: var(--kodimia-darkgreen); }
.ring-kodimia-deepgreen { --tw-ring-color: var(--kodimia-deepgreen); }
.ring-kodimia-green { --tw-ring-color: var(--kodimia-green); }
.ring-kodimia-lightgreen { --tw-ring-color: var(--kodimia-lightgreen); }
.ring-kodimia-palegreen { --tw-ring-color: var(--kodimia-palegreen); }
.ring-kodimia-blue { --tw-ring-color: var(--kodimia-blue); }
.ring-kodimia-lightblue { --tw-ring-color: var(--kodimia-lightblue); }

/* Fill Color Classes (for SVG elements) */
.fill-kodimia-darkgreen { fill: var(--kodimia-darkgreen); }
.fill-kodimia-deepgreen { fill: var(--kodimia-deepgreen); }
.fill-kodimia-green { fill: var(--kodimia-green); }
.fill-kodimia-lightgreen { fill: var(--kodimia-lightgreen); }
.fill-kodimia-palegreen { fill: var(--kodimia-palegreen); }
.fill-kodimia-blue { fill: var(--kodimia-blue); }
.fill-kodimia-lightblue { fill: var(--kodimia-lightblue); }
.fill-none { fill: none; }


/* ===== ENHANCED BACKGROUNDS & PATTERNS ===== */

.hero-bg-pattern {
    background-image: url("../svg/patron_lightgreen.9e9f80b6469f.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.hero-green-pattern {
    background-image: url("../images/patron_green.003703972688.png");
    background-size: 400px 400px;
    background-position: center;
    background-repeat: repeat;
    filter: brightness(1.1) contrast(0.8);
}

/* ===== ANIMATIONS ===== */

/* Floating animations for brand elements */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(2deg); }
    50% { transform: translateY(-20px) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(-2deg); }
}

@keyframes float-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(-3deg); }
    50% { transform: translateY(-25px) rotate(0deg); }
    75% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(5deg); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
    animation-delay: -2s;
}

.animate-float-slow {
    animation: float-slow 10s ease-in-out infinite;
    animation-delay: -4s;
}

/* Scroll-based animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-delayed {
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.3s forwards;
}

.animate-fade-in-slow {
    opacity: 0;
    animation: fadeIn 1.2s ease-out 0.6s forwards;
}

.animate-slide-up {
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}

.animate-slide-up-delayed {
    opacity: 0;
    animation: slideUp 0.8s ease-out 0.4s forwards;
}

.animate-visible {
    animation-play-state: running !important;
}

/* Gradient text effect */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

/* Ripple effect for buttons */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

/* Enhanced form styles */
.field-focused {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.field-valid input,
.field-valid textarea {
    border-color: var(--kodimia-green) !important;
    box-shadow: 0 0 0 3px rgba(175, 235, 43, 0.1) !important;
}

.field-error input,
.field-error textarea {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Loading states */
.loaded img {
    transition: opacity 0.3s ease;
}

img:not(.loaded) {
    opacity: 0;
}

img.loaded {
    opacity: 1;
}

/* ===== PATRON LOGO VISIBILITY FIX ===== */
/* Ensure patron logo images are properly visible */
img[src*="patron_logo"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Add subtle drop shadow to make them more visible */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

/* For PNG patron logos that might be transparent */
img[src*="patron_logo.png"] {
    /* Add a subtle background to make transparent PNGs visible */
    background-color: rgba(175, 235, 43, 0.1);
    border-radius: 50%;
    padding: 2px;
}

/* For SVG patron logos */
img[src*="patron_logo.svg"] {
    /* Ensure SVGs render properly */
    max-width: 100%;
    height: auto;
    /* Add a subtle filter to ensure visibility */
    filter: brightness(1.1) contrast(1.2) saturate(1.1);
}

/* Specific visibility fixes for different contexts */
.bg-white img[src*="patron_logo.svg"],
.bg-kodimia-palegreen img[src*="patron_logo.svg"] {
    /* SVGs on light backgrounds should be fully visible */
    opacity: 1 !important;
    filter: brightness(0.9) contrast(1.3) saturate(1.2);
}

/* Make floating patterns more visible */
.animate-float img[src*="patron_logo"],
.animate-float-delayed img[src*="patron_logo"],
.animate-float-slow img[src*="patron_logo"] {
    opacity: 0.8 !important;
}

/* ===== SERVICE SELECTOR STYLES ===== */

/* Adaptive Flip Card Container */
.flip-container {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    position: relative;
}

.flip-inner {
    position: relative;
    width: 100%;
    text-align: left;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

/* Flipped state */
.flip-inner.flipped {
    transform: rotateY(180deg);
}

/* Card faces - adaptive height */
.card-face {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    border-radius: 1.5rem;
}

.card-front {
    /* Front face shows by default */
    transform: rotateY(0deg);
    position: relative;
}

.card-back {
    /* Back face is rotated 180 degrees and positioned absolutely to match front height */
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Height will match the front card dynamically */
}

/* Service Button States */
.service-btn {
    position: relative;
    overflow: hidden;
}

.service-btn.active {
    background: linear-gradient(135deg, var(--kodimia-blue), var(--kodimia-deepgreen)) !important;
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--kodimia-blue) !important;
}

.service-btn.active .w-8.h-8 {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Service Card Transitions - Simplified */
.service-card {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

.service-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* Default State Transitions */
#default-state {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

#default-state.hidden {
    opacity: 0;
    transform: translateY(-10px);
}

#service-display {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

#service-display.active {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth Card Switching Animation */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
}

.service-card.entering {
    animation: cardFadeIn 0.4s ease-out;
}

.service-card.exiting {
    animation: cardFadeOut 0.3s ease-in;
}

/* Button Hover Effects */
.service-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Flip Button Effects */
.flip-to-back:hover,
.flip-to-front:hover {
    transform: scale(1.05);
}

/* Pulse animation for default state */
@keyframes pulse-gentle {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
}

#default-state .animate-pulse {
    animation: pulse-gentle 2s ease-in-out infinite;
}

/* Custom scrollbar for technical details */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(175, 235, 43, 0.6);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(175, 235, 43, 0.8);
}

/* Clientes */

.client-logo {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
    background-color: transparent;
}

.client-logo-small {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain;
}