/* Transición Page - Mediterranean Luxury Refined (v4) */

/* --- Hero Section --- */
.transition-hero {
    @apply relative h-[85vh] min-h-[700px] flex items-center justify-center text-center text-white overflow-hidden bg-med-navy;
}

.transition-hero-bg {
    @apply absolute inset-0 z-0;
    background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    transition: transform 20s ease-in-out;
}

.transition-hero:hover .transition-hero-bg {
    transform: scale(1.1);
}

.transition-hero-overlay {
    @apply absolute inset-0 bg-gradient-to-b from-med-navy/40 via-med-navy/20 to-med-navy/90 z-10;
}

.transition-hero-content {
    @apply max-w-5xl px-6 relative z-20 flex flex-col items-center;
}

.transition-hero-title {
    @apply font-serif text-4xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight drop-shadow-2xl animate-fade-up;
    text-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.transition-hero-subtitle {
    @apply text-xl md:text-2xl font-light text-white/90 max-w-3xl mx-auto mb-12 leading-relaxed drop-shadow-md animate-fade-up delay-1;
}

/* --- Concept Section --- */
.concept-section {
    @apply py-32 bg-white overflow-hidden;
}

.concept-image {
    @apply relative rounded-[3rem] overflow-hidden shadow-2xl h-[600px];
}

.concept-image img {
    @apply w-full h-full object-cover transition-transform duration-700 hover:scale-105;
}

.concept-content {
    @apply p-10 md:p-16 rounded-[2.5rem] bg-brand-50 border border-brand-100;
}

/* --- Details Section (Cards) --- */
.details-section {
    @apply py-32 bg-brand-50 relative;
}

.details-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-8;
}

.detail-card {
    @apply bg-white p-12 rounded-[2.5rem] shadow-premium border border-brand-100 transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl flex flex-col items-center text-center h-full;
}

.detail-icon {
    @apply w-20 h-20 bg-brand-50 rounded-2xl flex items-center justify-center text-3xl text-gold-sand mb-8 transition-all duration-500 shadow-inner;
}

.detail-title {
    @apply text-xl font-bold mb-4 uppercase tracking-widest text-med-navy transition-colors;
}

.detail-value {
    @apply text-3xl text-med-navy font-serif italic mb-4;
}

.detail-desc {
    @apply text-sm text-brand-400 font-medium;
}

/* --- Responsive Adjustments --- */
@media (width < 1024px) {
    .transition-hero {
        @apply h-[70vh] min-h-[600px];
    }
    
    .transition-hero-title {
        @apply text-3xl md:text-6xl;
    }

    .concept-image {
        @apply h-[400px] mb-12;
    }
    
    .concept-content {
        @apply p-8;
    }
}