/* =========================================
   MARISOL ORO - EDITORIAL LUXURY (YELLOW/GOLD & DEEP TONES)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
    /* Paleta Editorial: Base Amarilla y Oro, tonos profundos */
    --color-primario: #DFA92A; /* Amarillo Dorado rico y profundo */
    --color-primario-dark: #A67B1B; /* Oro Ocre profundo para contraste */
    --color-fondo: #FCFBF8; /* Alabastro premium cálido (Papel caro) */
    --color-secundario: #F3EFE7; /* Crema sucio para fondos alternos */
    --color-texto: #161513; /* Negro ónix muy cálido */
    --color-texto-ligero: #5C5852; /* Gris topo */
}

/* =========================================
   BASE Y TIPOGRAFÍA EDITORIAL
   ========================================= */
body {
    font-family: 'Jost', 'Poppins', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, .font-playfair, .font-serif-editorial {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
}

/* Títulos inmensos tipo Revista */
.title-massive {
    font-size: clamp(4rem, 15vw, 10rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-weight: 300;
}

.title-sub {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    font-weight: 300;
}

/* Letras de espaciado alto para contraste geométrico */
.tracking-ultra {
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

/* =========================================
   ELEMENTOS DE DISEÑO ASIMÉTRICO (COMPOSICIÓN)
   ========================================= */

/* Números gigantes de fondo */
.editorial-number {
    position: absolute;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(10rem, 30vw, 25rem);
    font-style: italic;
    color: var(--color-primario);
    opacity: 0.05;
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Finas líneas divisorias doradas */
.editorial-line-v {
    width: 1px;
    height: 120px;
    background-color: var(--color-primario);
    margin: 0 auto;
    opacity: 0.6;
}

.editorial-line-h {
    height: 1px;
    width: 80px;
    background-color: var(--color-primario);
    opacity: 0.6;
}

/* Marcos para fotos (Photo Overlaps) */
.editorial-frame {
    position: relative;
    padding: 1.5rem;
    background-color: var(--color-fondo);
    box-shadow: 0 30px 60px rgba(22, 21, 19, 0.08); /* Sombra ónix */
    border: 1px solid rgba(223, 169, 42, 0.2); /* Borde sutil amarillo */
}

.editorial-image-wrapper {
    overflow: hidden;
    position: relative;
}

/* =========================================
   ANIMACIONES ("Soft Reveals" de Alta Gama)
   ========================================= */
.section-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.section-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto Parallax súper suave para fondos */
.bg-parallax {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* =========================================
   ITINERARIO (Minimalist Node)
   ========================================= */
.timeline-item {
    padding-bottom: 3.5rem;
    position: relative;
}
.timeline-item::before {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-primario);
    top: 0.5em;
    left: -48px;
    z-index: 1;
    box-shadow: 0 0 15px rgba(223, 169, 42, 0.4);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item:hover::before {
    transform: scale(1.5);
}

.timeline-line {
    position: absolute;
    left: -43px;
    top: 5px;
    bottom: -5px;
    width: 1px;
    background-color: rgba(223, 169, 42, 0.3);
    z-index: 0;
}

/* =========================================
   SWIPER.JS - OPTIMIZACIÓN EDITORIAL
   ========================================= */
.swiper-container {
    padding-bottom: 4rem !important;
    padding-top: 2rem !important;
}

/* Fotos estilo impresión fine-art */
.swiper-slide {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s;
    filter: grayscale(30%) contrast(1.1); /* Toque sutil editorial */
}

.swiper-slide-active {
    filter: grayscale(0%) contrast(1.05); /* Recupera full color al centrar */
}

.swiper-slide img {
    box-shadow: 0 15px 45px rgba(22, 21, 19, 0.15);
}

.swiper-button-next, .swiper-button-prev {
    color: var(--color-primario) !important;
}

.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 1.5rem !important; 
    font-weight: 300;
}

@media (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev {
        display: none !important;
    }
}

.swiper-pagination-bullet {
    background-color: var(--color-primario-dark) !important;
    opacity: 0.2 !important;
    width: 6px !important;
    height: 6px !important;
    transition: all 0.5s ease !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-primario) !important;
    opacity: 1 !important;
    transform: scale(1.8) !important;
}

/* =========================================
   UI COMPONENTES Y BOTONES
   ========================================= */
.btn-editorial {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-texto);
    background: transparent;
    border: 1px solid var(--color-primario);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    z-index: 1;
}

.btn-editorial::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-primario);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn-editorial:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-editorial:hover {
    color: var(--color-fondo);
    box-shadow: 0 15px 30px rgba(223, 169, 42, 0.3);
}

.btn-whatsapp {
    background-color: var(--color-primario);
    color: var(--color-fondo);
    border: none;
}
.btn-whatsapp::before {
    background-color: var(--color-texto); /* Hover en negro infinito */
}