/* ============================================================
   Rincón del Bosque — CINEMATIC NATURE PREMIUM (v3.0)
   Capa de elevación visual. Se carga DESPUÉS de styles.css /
   themes.css y sobreescribe selectores existentes.
   No requiere cambios en la lógica PHP.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ---------- 1. Tokens cinematográficos ---------- */
:root {
    /* Display serif de lujo + sans geométrica refinada */
    --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
    --font-body: 'Manrope', 'Poppins', -apple-system, sans-serif;

    /* Verdes bosque más profundos y derivados */
    --forest-950: #04140b;
    --forest-900: #07251a;
    --forest-800: #0c3a27;
    --moss: #7cae72;
    --sage: #cfe3c4;
    --gold: #d8b572;          /* acento cálido tipo madera/atardecer */
    --gold-soft: #efe0c2;

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bd: rgba(255, 255, 255, 0.55);
    --glass-bg-dark: rgba(8, 28, 20, 0.55);

    /* Sombras con tinte orgánico */
    --shadow-soft: 0 10px 30px -12px rgba(7, 37, 26, 0.25);
    --shadow-float: 0 28px 60px -28px rgba(7, 37, 26, 0.45);
    --shadow-glow: 0 0 0 1px rgba(124, 174, 114, 0.25), 0 24px 60px -24px rgba(22, 163, 74, 0.55);

    --radius-lg: 26px;
    --radius-xl: 34px;
    --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-padding-top: 96px; }

body {
    font-family: var(--font-body);
    letter-spacing: 0.1px;
    background: #fbfdfb;
}

/* Tipografía display refinada en todos los títulos */
.hero-title,
.section-header h2,
.welcome-content h2,
.cabin-card-body h3,
.attraction-card h3,
.tip-card h3,
.cta-card h3,
.stat-number,
.footer-logo,
.logo-name {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
}

/* ---------- 2. Grano de película + barra de progreso ---------- */
#cine-grain {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#cine-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 10000;
    background: linear-gradient(90deg, var(--green-600), var(--moss), var(--gold));
    box-shadow: 0 0 12px rgba(22, 163, 74, 0.6);
    transition: width 0.12s linear;
}

/* ---------- 3. Header glass de cristal ---------- */
#main-header.scrolled {
    background: rgba(251, 253, 251, 0.72);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border-bottom: 1px solid rgba(124, 174, 114, 0.18);
    box-shadow: 0 8px 40px -20px rgba(7, 37, 26, 0.35);
}

.btn-reserve-header {
    background: linear-gradient(135deg, var(--green-600), var(--forest-800));
    box-shadow: 0 10px 28px -12px rgba(22, 163, 74, 0.7);
    letter-spacing: 0.2px;
}

/* ---------- 4. HERO cinematográfico ---------- */
.hero-section {
    background-attachment: fixed;
}

/* Capas de profundidad inyectadas por JS */
.hero-cine-zoom {
    position: absolute;
    inset: -4%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    animation: kenburns 26s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kenburns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -2%, 0); }
}

/* Vignette + degradado de atardecer sobre el bosque */
.hero-overlay {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(4, 20, 11, 0) 35%, rgba(4, 20, 11, 0.55) 100%),
        linear-gradient(180deg, rgba(4, 20, 11, 0.5) 0%, rgba(4, 20, 11, 0.12) 38%, rgba(4, 20, 11, 0.35) 72%, rgba(4, 20, 11, 0.82) 100%);
}

/* Halo de luz volumétrica */
.hero-lightrays {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(60% 45% at 50% 18%, rgba(216, 181, 114, 0.22), transparent 70%);
    mix-blend-mode: screen;
    animation: rays-breathe 9s ease-in-out infinite;
}
@keyframes rays-breathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.hero-badge {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    letter-spacing: 2.5px;
    font-size: 12px;
    padding: 9px 22px;
}
.hero-badge i { color: var(--gold); }

.hero-title {
    font-weight: 500;
    font-size: clamp(2.8rem, 7vw, 6rem);
    line-height: 1.02;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    letter-spacing: -0.03em;
}
.hero-title span {
    background: linear-gradient(100deg, var(--moss) 0%, var(--gold-soft) 45%, var(--moss) 90%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    animation: shimmer 6s linear infinite;
    font-style: italic;
    font-weight: 500;
}
@keyframes shimmer {
    to { background-position: 220% center; }
}

.hero-subtitle {
    font-weight: 300;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.92);
    max-width: 640px;
}

/* Botones premium con glow respirante */
.btn-primary,
.cabin-card-btn,
.btn-explore {
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
    background: linear-gradient(135deg, var(--green-600), var(--forest-800));
    box-shadow: 0 14px 34px -14px rgba(22, 163, 74, 0.75);
}
.btn-primary:hover,
.cabin-card-btn:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px);
}
.hero-btn { animation: pulse-glow 3.5s ease-in-out infinite; }

.btn-secondary-hero {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.btn-secondary-hero:hover { background: rgba(255, 255, 255, 0.18); }

.hero-scroll-indicator { color: rgba(255, 255, 255, 0.7); }

/* ---------- 5. Secciones: ritmo y badges ---------- */
.section-badge {
    background: linear-gradient(135deg, rgba(124, 174, 114, 0.16), rgba(216, 181, 114, 0.16));
    color: var(--forest-800);
    border: 1px solid rgba(124, 174, 114, 0.3);
    letter-spacing: 2px;
    backdrop-filter: blur(6px);
}
.section-header h2 { font-weight: 500; }
.section-header { margin-bottom: 68px; }

.welcome-section { padding: 130px 0 70px; }
.welcome-content h2 { font-weight: 500; }
.welcome-divider {
    height: 2px;
    width: 110px;
    background: linear-gradient(90deg, transparent, var(--green-600), var(--gold), transparent);
}

/* ---------- 6. STATS con malla animada ---------- */
.stats-section {
    background:
        radial-gradient(80% 120% at 15% 0%, rgba(22, 163, 74, 0.18), transparent 55%),
        radial-gradient(70% 120% at 90% 100%, rgba(216, 181, 114, 0.12), transparent 55%),
        linear-gradient(135deg, var(--forest-950), var(--forest-900));
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: mesh-drift 18s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
    from { background-position: 0% 0%, 100% 100%, 0 0; }
    to   { background-position: 30% 20%, 70% 80%, 0 0; }
}
.stat-icon {
    background: rgba(124, 174, 114, 0.16);
    color: var(--moss);
    box-shadow: inset 0 0 0 1px rgba(124, 174, 114, 0.25);
}
.stat-number .suffix { color: var(--gold); }

/* ---------- 7. CABAÑAS — tarjetas editoriales ---------- */
.cabins-section { background: linear-gradient(180deg, #fbfdfb, #f1f6f0); }
.cabin-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(124, 174, 114, 0.16);
    box-shadow: var(--shadow-soft);
    transition: transform 0.5s var(--ease-cine), box-shadow 0.5s var(--ease-cine);
    background: #fff;
}
.cabin-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-float);
}
.cabin-card-img { height: 300px; }
.cabin-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(4, 20, 11, 0.45));
    opacity: 0.85;
    transition: opacity 0.5s var(--ease-cine);
}
.cabin-card:hover .cabin-card-img img { transform: scale(1.1); }
.cabin-card-price {
    background: rgba(8, 28, 20, 0.62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    z-index: 2;
}
.cabin-card-price strong { color: var(--moss); }
.cabin-card-specs i { color: var(--green-600); }

.btn-explore {
    background: linear-gradient(135deg, var(--forest-900), var(--forest-800));
}

/* ---------- 8. ATRACCIONES / CONSEJOS ---------- */
.attraction-card, .tip-card {
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease-cine), box-shadow 0.5s var(--ease-cine), border-color 0.5s var(--ease-cine);
}
.attraction-card { border: 1px solid rgba(124, 174, 114, 0.18); }
.attraction-card::before, .tip-card::after {
    height: 4px;
    background: linear-gradient(90deg, var(--green-600), var(--gold));
}
.attraction-card:hover, .tip-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-float);
    border-color: rgba(124, 174, 114, 0.5);
}
.attraction-icon, .tip-icon {
    background: linear-gradient(135deg, rgba(124, 174, 114, 0.18), rgba(216, 181, 114, 0.18));
    color: var(--forest-800);
}
.attraction-card:hover .attraction-icon {
    background: linear-gradient(135deg, var(--green-600), var(--forest-800));
    color: #fff;
}

/* ---------- 9. RESEÑAS ---------- */
.reviews-section { background: linear-gradient(180deg, #fff, #f6faf5); }
.review-card {
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid rgba(124, 174, 114, 0.16);
    box-shadow: var(--shadow-soft);
}
.review-card-text::before { color: var(--gold); opacity: 0.7; }
.review-card-avatar {
    background: linear-gradient(135deg, var(--green-600), var(--forest-800));
    box-shadow: 0 6px 16px -6px rgba(22, 163, 74, 0.6);
}
.reviews-dots .dot.active { background: var(--green-600); }

/* ---------- 10. GALERÍA cinematográfica ---------- */
.gallery-section {
    background:
        radial-gradient(60% 80% at 80% 0%, rgba(22, 163, 74, 0.12), transparent 60%),
        linear-gradient(135deg, var(--forest-950), var(--forest-900));
}
.gallery-item { border-radius: 18px; }
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(124, 174, 114, 0.18);
    border-radius: 18px;
    pointer-events: none;
}
.gallery-overlay {
    background: linear-gradient(180deg, transparent 40%, rgba(4, 20, 11, 0.75));
    color: var(--gold-soft);
}

/* ---------- 11. CONTACTO + CTA ---------- */
.contact-section { background: linear-gradient(180deg, #f6faf5, #eef4ec); }
.contact-item>i { background: linear-gradient(135deg, var(--green-600), var(--forest-800)); }
.contact-map { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-float) !important; }
.cta-card {
    background:
        radial-gradient(80% 120% at 80% 10%, rgba(22, 163, 74, 0.22), transparent 55%),
        linear-gradient(135deg, var(--forest-950), var(--forest-800));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(124, 174, 114, 0.18);
}
.cta-card>i { color: var(--gold); }

/* ---------- 12. FOOTER ---------- */
.main-footer { background: linear-gradient(180deg, var(--forest-900), var(--forest-950)); }
.footer-logo i, .footer-links a:hover { color: var(--moss); }
.footer-social a:hover { background: var(--green-600); border-color: var(--green-600); }

/* ---------- 13. Reveal cinematográfico (mejora del existente) ---------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(38px);
    filter: saturate(0.85);
    transition: opacity 0.9s var(--ease-cine), transform 0.9s var(--ease-cine), filter 0.9s var(--ease-cine);
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Tarjetas con tilt 3D (clase añadida por JS) */
.cine-tilt { transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .hero-cine-zoom, .hero-lightrays, .stats-section, .hero-title span { animation: none !important; }
}

@media (max-width: 768px) {
    .hero-section { background-attachment: scroll; }
    .hero-cine-zoom { inset: 0; animation-duration: 32s; }
    #cine-grain { display: none; }
}

/* ============================================================
   14. MOTOR DE RESERVAS — re-coloreado a paleta forest
   (cinematic.css se carga DESPUÉS de reservas.css)
   ============================================================ */
:root {
    /* Reemplaza el azul Booking por verde bosque cinematográfico */
    --navy: #07251a;
    --navy-light: #0c3a27;
    --navy-lighter: #145239;
    --blue-accent: #16a34a;
    --green: #16a34a;
}

/* Fondo del flujo de reserva con textura suave */
body:has(.booking-header) {
    background: linear-gradient(180deg, #f4f8f3, #eef4ec) !important;
    font-family: 'Manrope', 'Poppins', sans-serif;
}

/* Header glass */
.booking-header {
    background: rgba(251, 253, 251, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(124, 174, 114, 0.2);
}
.booking-logo i { color: var(--green-600, #16a34a); }
.booking-logo .logo-name { font-family: 'Fraunces', serif; letter-spacing: -0.01em; }

.btn-login {
    background: linear-gradient(135deg, #16a34a, #07251a);
    box-shadow: 0 10px 24px -12px rgba(22, 163, 74, 0.7);
}
.btn-login:hover { transform: translateY(-2px); }

/* Barra de búsqueda elevada tipo concierge */
.search-bar {
    border-radius: 22px;
    border: 1px solid rgba(124, 174, 114, 0.22);
    box-shadow: 0 24px 60px -30px rgba(7, 37, 26, 0.5);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.search-btn {
    background: linear-gradient(135deg, #16a34a, #07251a);
    border-radius: 14px;
    box-shadow: 0 10px 24px -12px rgba(22, 163, 74, 0.7);
}
.guest-btn:hover { border-color: #16a34a; color: #16a34a; }

/* Acentos verdes en flatpickr y elementos azules residuales */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
}
.flatpickr-day.inRange {
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 rgba(22,163,74,0.12), 5px 0 0 rgba(22,163,74,0.12) !important;
}
.flatpickr-day.today { border-color: #16a34a !important; }
.flatpickr-months .flatpickr-month,
.flatpickr-weekday { color: #07251a !important; }

/* Barra de confianza del flujo de reservas */
.resv-trust { max-width: 1000px; margin: 14px auto 0; padding: 0 24px; }
.resv-trust-inner {
    display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center;
    padding: 14px 20px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(124,174,114,.12), rgba(216,181,114,.10));
    border: 1px solid rgba(124,174,114,.22);
    font-size: 13px; font-weight: 600; color: #0c3a27;
}
.resv-trust-inner span { display: inline-flex; align-items: center; gap: 7px; }
.resv-trust-inner i { color: #16a34a; font-size: 15px; }
.resv-trust-inner a { color: #0c3a27; text-decoration: underline; text-underline-offset: 2px; }
.resv-trust-inner a:hover { color: #16a34a; }
@media (max-width: 640px){ .resv-trust-inner { gap: 8px 16px; font-size: 12px; } }

/* ---------- TIENDA TEASER (index) ---------- */
.shop-teaser { padding: 90px 0; background: linear-gradient(180deg, #f6faf5, #eef4ec); }
.shop-teaser-card {
    display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; gap: 0;
    border-radius: var(--radius-xl, 34px); overflow: hidden;
    background: #fff; box-shadow: var(--shadow-float, 0 28px 60px -28px rgba(7,37,26,.45));
    border: 1px solid rgba(124,174,114,.18);
}
.shop-teaser-text { padding: 56px 48px; }
.shop-teaser-text h2 { font-family: var(--font-display,'Fraunces',serif); font-weight: 500; font-size: clamp(1.8rem,3.2vw,2.6rem); color: var(--forest-950,#04140b); margin: 6px 0 14px; }
.shop-teaser-text p { color: #5a6b60; line-height: 1.7; margin-bottom: 22px; max-width: 460px; }
.shop-teaser-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.shop-teaser-tags span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: linear-gradient(135deg, rgba(124,174,114,.16), rgba(216,181,114,.16));
    border: 1px solid rgba(124,174,114,.28); color: var(--forest-800,#0c3a27);
}
.shop-teaser-tags i { color: var(--green-600,#16a34a); }
.shop-teaser-img { position: relative; min-height: 340px; overflow: hidden; }
.shop-teaser-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-cine, cubic-bezier(.16,1,.3,1)); }
.shop-teaser-card:hover .shop-teaser-img img { transform: scale(1.06); }
@media (max-width: 768px){
    .shop-teaser-card { grid-template-columns: 1fr; }
    .shop-teaser-text { padding: 38px 28px; }
    .shop-teaser-img { min-height: 240px; order: -1; }
}

/* ============================================================
   15. PASE DE AFINADO PAREJO (home + sitio)
   Detalles finos de ritmo, contraste, microinteracciones y a11y.
   ============================================================ */

/* Selección de texto y barra de scroll con la marca */
::selection { background: rgba(124,174,114,.35); color: var(--forest-950,#04140b); }
html { scroll-behavior: smooth; }
* { scrollbar-color: var(--moss,#7cae72) transparent; }

/* Foco visible y accesible en toda la interacción (guía UX skill) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .nav-link:focus-visible {
    outline: 3px solid rgba(22,163,74,.55);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Cursor e interacciones consistentes */
.nav-link, .filter-chip, .view-btn, .reviews-controls button, .gallery-item, .stat-card { cursor: pointer; }

/* Ritmo vertical más equilibrado entre secciones claras */
.attractions-section, .tips-section, .reviews-section { padding-top: 96px; padding-bottom: 96px; }
.section-header p { color: #5a6b60; max-width: 580px; }

/* Lead de bienvenida con mejor jerarquía de lectura */
.welcome-content p:first-of-type { font-size: 1.18rem; color: #3f5147; line-height: 1.8; }
.welcome-content p strong { color: var(--forest-800,#0c3a27); }

/* Stats: números más nítidos y etiqueta legible */
.stat-number { letter-spacing: -0.01em; }
.stat-label { color: #b8cbb2; letter-spacing: .4px; }

/* Imágenes más nítidas en hover-zoom */
.cabin-card-img img, .gallery-item img, .product-img img, .shop-teaser-img img { image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; }

/* Header: micro-pulido del logo al hacer scroll */
.scrolled .logo-name { color: var(--forest-900,#07251a); }
.scrolled .logo i { color: var(--green-600,#16a34a); }

/* Divisores de onda integrados al fondo claro */
.wave-divider svg path[fill="#f8fafc"] { fill: #fbfdfb; }

/* Indicador de scroll del hero más sutil y vivo */
.hero-scroll-indicator { opacity: .8; }

/* Tarjetas: transición de elevación uniforme en todo el sitio */
.cabin-card, .attraction-card, .tip-card, .review-card, .product-card, .stat-card {
    transition: transform .5s var(--ease-cine, cubic-bezier(.16,1,.3,1)),
                box-shadow .5s var(--ease-cine, cubic-bezier(.16,1,.3,1)),
                border-color .5s var(--ease-cine, cubic-bezier(.16,1,.3,1));
}

/* Reseñas: respiración interna pareja */
.review-card { padding: 30px; }
.review-card-text { color: #4a5b51; }

/* CTA y contacto: contraste de texto secundario más legible sobre oscuro */
.cta-card p, .stats-section .stat-label { opacity: .95; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}