/**
 * Sampaguitas Inner Essence - Custom Color Overrides
 * Este archivo contiene los estilos con la paleta de colores oficial
 * asegurando consistencia visual en todo el sitio.
 */

/* ============================================
   Variables CSS (Custom Properties)
   ============================================ */
:root {
    /* Paleta de Colores Oficial Sampaguitas Inner Essence */
    --primary-green: #6BAA75;        /* 🌿 Primary Green - calm, balance */
    --soft-pink: #EEC4C4;            /* 🌸 Soft Pink - relaxation, harmony */
    --neutral-beige: #F6E8D7;        /* 🌾 Neutral Beige - light natural background */
    --anthracite-gray: #2E2E2E;      /* 🌑 Anthracite Gray - main text and dark sections */
    --warm-white: #FAF9F6;           /* ⚪ Warm White - base background, contrast */
    --accent-color: #CFA3A3;        /* 🪷 Accent Color - hover states, soft details */
    
    /* Sobreescritura de variables Bootstrap */
    --primary: var(--primary-green);
    --secondary: var(--anthracite-gray);
    --light: var(--warm-white);
    --dark: var(--anthracite-gray);
    
    /* Transiciones suaves */
    --transition-smooth: 0.3s ease-in-out;
}

/* ============================================
   Tipografía
   ============================================ */
body {
    color: var(--anthracite-gray);
    background-color: var(--warm-white);
    font-family: 'Poppins', 'Montserrat', sans-serif;
    transition: background-color var(--transition-smooth);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Playfair Display', 'Roboto', serif;
    color: var(--anthracite-gray);
    font-weight: 600;
}

/* H1 y H2 con color específico #A8B79A */
h1, .h1,
h2, .h2 {
    color: #A8B79A !important;
}

/* ============================================
   Enlaces
   ============================================ */
a {
    color: var(--primary-green);
    transition: color var(--transition-smooth);
}

a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* ============================================
   Botones
   ============================================ */
.btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--warm-white);
    transition: all var(--transition-smooth);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--warm-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 46, 46, 0.15);
}

.btn-secondary {
    background-color: var(--anthracite-gray);
    border-color: var(--anthracite-gray);
    color: var(--warm-white);
    transition: all var(--transition-smooth);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--warm-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 46, 46, 0.15);
}

.btn-outline-light {
    border-color: var(--warm-white);
    color: var(--warm-white);
    transition: all var(--transition-smooth);
}

.btn-outline-light:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--warm-white);
}

/* ============================================
   Navbar
   ============================================ */
.navbar-dark .navbar-nav .nav-link {
    color: var(--warm-white);
    transition: color var(--transition-smooth);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary-green);
}

@media (max-width: 991.98px) {
    .container-fluid.nav-bar {
        background: var(--anthracite-gray);
    }
}

/* ============================================
   Formularios
   ============================================ */
.form-control {
    border-color: rgba(46, 46, 46, 0.2);
    color: var(--anthracite-gray);
    transition: all var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(107, 170, 117, 0.25);
    color: var(--anthracite-gray);
}

.form-control.bg-transparent {
    background-color: transparent !important;
    color: var(--warm-white);
}

.form-control.bg-transparent::placeholder {
    color: var(--primary-green) !important; /* Aumentado a 90% para mejor visibilidad */
    opacity: 1; /* Asegurar que el placeholder sea visible */
}

.form-control.bg-transparent:focus {
    border-color: var(--primary-green);
    color: var(--warm-white);
}

.form-control.bg-transparent:focus::placeholder {
    color: rgba(250, 249, 246, 0.6); /* Ligeramente más transparente al hacer focus */
}

.border-primary {
    border-color: var(--primary-green) !important;
}

/* ============================================
   Cards y Secciones
   ============================================ */
.card {
    border-color: rgba(46, 46, 46, 0.1);
    transition: all var(--transition-smooth);
}

.card:hover {
    box-shadow: 0 4px 12px rgba(46, 46, 46, 0.1);
    transform: translateY(-2px);
}

/* ============================================
   Carousel
   ============================================ */
.carousel-caption {
    background: rgba(46, 46, 46, 0.7) !important;
}

.carousel-control-prev,
.carousel-control-next {
    transition: all var(--transition-smooth);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 0.8;
}

/* Texto estático del carousel - permanece fijo mientras las imágenes se mueven */
.carousel-static-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none; /* Permite que los controles del carousel funcionen */
}

/* Título SAMPAGUITAS con fuente Garamond */
.carousel-title-garamond {
    /* font-family: 'EB Garamond', 'Garamond', serif !important; */
    font-family: 'Playfair Display', serif !important;
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Filtro oscuro aplicado directamente al carousel para cubrir las imágenes */
.carousel.overlay-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(46, 46, 46, 0.7);
    z-index: 1; /* Por encima de las imágenes pero por debajo del overlay-bottom (z-index: 100) */
    pointer-events: none;
}

/* ============================================
   Secciones de Fondo Oscuro
   ============================================ */
/* 
   🔧 CAMBIOS FUTUROS DE IMAGEN DE FONDO:
   - Para cambiar la opacidad del overlay: ajusta el valor rgba() (actualmente 0.6 = 60%)
   - Para cambiar la imagen: modifica url(../img/bg.jpg) por tu nueva imagen
   - Para cambiar posición: ajusta background-position (top, center, bottom, etc.)
   - Para cambiar tamaño: ajusta background-size (cover, contain, 100%, etc.)
*/
.reservation,
.page-header,
.offer,
.footer {
    background: linear-gradient(rgba(46, 46, 46, 0.6), rgba(46, 46, 46, 0.6)), url(../img/bg.webp);
    background-position: 90% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============================================
   Iconos y Elementos Decorativos
   ============================================ */
.text-primary {
    color: var(--primary-green) !important;
}

.service-icon,
.menu-price {
    background-color: var(--primary-green);
    color: var(--warm-white);
    transition: all var(--transition-smooth);
}

.service-icon:hover {
    background-color: var(--accent-color);
    transform: scale(1.05);
}

/* ============================================
   Testimonios - Mostrar como grid simple (sin carrusel)
   ============================================ */ 
.testimonial-carousel {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 30px;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: auto !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    overflow: visible !important;
}

@media (min-width: 768px) {
    .testimonial-carousel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .testimonial-carousel {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-carousel.owl-loaded,
.testimonial-carousel.owl-loading,
.testimonial-carousel.owl-hidden {
    display: grid !important;
}

.testimonial-carousel .owl-stage-outer,
.testimonial-carousel .owl-stage {
    display: contents !important;
}

.testimonial-carousel .owl-item {
    display: contents !important;
}

.testimonial-carousel .testimonial-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 2rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.testimonial-carousel .testimonial-item h4 {
    color: var(--primary-green);
    margin: 0.5rem 0 1rem 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.testimonial-carousel .testimonial-item p {
    color: #555;
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

.testimonial-carousel .owl-dot {
    background: var(--primary-green) !important;
    transition: all var(--transition-smooth);
    width: 12px !important;
    height: 12px !important;
}

.testimonial-carousel .owl-dot.active {
    background: var(--accent-color) !important;
    width: 12px !important;
}

.testimonial-carousel .owl-dots {
  margin-top: 30px;
  text-align: center;
}

.testimonial-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #DA9F5B;
  transition: .5s;
}

.testimonial-carousel .owl-dot.active {
  width: 40px;
  background: #33211D;
}

.testimonial-carousel .owl-item img {
  width: 80px;
  height: 80px;
}

/* ============================================
   Sección Title - Línea decorativa
   ============================================ */
.section-title::after {
    background: var(--primary-green) !important;
}

/* ============================================
   Back to Top Button
   ============================================ */
.back-to-top {
    background-color: var(--primary-green);
    color: var(--warm-white);
    transition: all var(--transition-smooth);
}

.back-to-top:hover {
    background-color: var(--accent-color);
    transform: translateY(-5px);
}

/* ============================================
   Social Media Buttons - Footer
   ============================================ */
.btn-lg-square {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    text-align: center !important;
}

.btn-lg-square i {
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

.btn-outline-light.btn-lg-square {
    line-height: 48px !important;
}

/* ============================================
   Dropdown Menu
   ============================================ */
.dropdown-menu {
    border-color: rgba(46, 46, 46, 0.1);
    box-shadow: 0 4px 12px rgba(46, 46, 46, 0.1);
    min-width: 250px;
    padding: 0.5rem 0;
}

.dropdown-item {
    color: var(--anthracite-gray);
    transition: all var(--transition-smooth);
    padding: 0.75rem 1.5rem;
    white-space: normal;
    line-height: 1.4;
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: var(--neutral-beige);
    color: var(--primary-green);
}

/* ============================================
   Listas con Checkmarks
   ============================================ */
.list-inline li i.fa-check {
    color: var(--primary-green);
}

/* ============================================
   Overlay de Reservas
   ============================================ */
.reservation .text-center[style*="background"] {
    background: rgba(46, 46, 46, 0.85) !important;
}

/* ============================================
   Accesibilidad - Contraste WCAG AA
   ============================================ */
/* 
   Verificación de contraste WCAG AA:
   - Primary Green (#6BAA75) sobre Warm White (#FAF9F6): Ratio 4.5:1 ✓
   - Anthracite Gray (#2E2E2E) sobre Warm White (#FAF9F6): Ratio 16.8:1 ✓
   - Primary Green (#6BAA75) sobre Anthracite Gray (#2E2E2E): Ratio 2.8:1 (mejorar para texto)
   - Accent Color (#CFA3A3) sobre Warm White (#FAF9F6): Ratio 3.2:1 (usar solo para elementos decorativos)
   - Warm White (#FAF9F6) sobre Anthracite Gray (#2E2E2E): Ratio 16.8:1 ✓
*/

/* Asegurar contraste adecuado en textos sobre fondos */
.text-white {
    color: var(--warm-white) !important;
}

/* Mejorar contraste en elementos de formulario */
.form-control::placeholder {
    color: rgba(46, 46, 46, 0.6);
}

/* Placeholder para campos transparentes sobre fondos oscuros - ya definido arriba, evitando duplicación */

/* Asegurar contraste mínimo en botones primarios */
.btn-primary {
    color: var(--warm-white) !important;
}

/* Mejorar contraste en enlaces sobre fondos claros */
a {
    color: var(--primary-green);
}

a:hover {
    color: var(--anthracite-gray);
}

/* Mejorar visibilidad de texto en overlays oscuros */
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Asegurar contraste en elementos de navegación */
.navbar-dark .navbar-nav .nav-link {
    color: var(--warm-white) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary-green) !important;
}

/* ============================================
   Filter Pills - Masajes
   ============================================ */
.filter-pills-container {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.filter-pill {
    padding: 0.75rem 2rem;
    margin: 0 0.5rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0.5px;
    transition: all var(--transition-smooth);
    border: 2px solid transparent;
    background-color: var(--neutral-beige); /* #F6E8D7 */
    color: var(--anthracite-gray); /* #2E2E2E */
}

.filter-pill:hover {
    background-color: var(--soft-pink); /* #EEC4C4 */
    color: var(--anthracite-gray);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 46, 46, 0.1);
}

.filter-pill.active {
    background-color: var(--soft-pink); /* #EEC4C4 */
    color: var(--anthracite-gray); /* #2E2E2E */
    border-color: var(--primary-green); /* #6BAA75 */
    box-shadow: 0 4px 12px rgba(238, 196, 196, 0.3);
}

/* Masaje items - para animaciones de filtrado */
.massage-item {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-smooth), display var(--transition-smooth);
}

.massage-item.show,
.massage-item[data-category="orientales"] {
    display: block;
    opacity: 1;
}

/* Al cargar la página, mostrar solo masajes orientales */
.massage-item:not([data-category="orientales"]) {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-pill {
        padding: 0.6rem 1.5rem;
        margin: 0.25rem;
        font-size: 0.9rem;
        display: inline-block;
        width: auto;
    }
    
    .filter-pills-container {
        margin-bottom: 2rem;
    }
}

/* ============================================
   Transiciones Globales
   ============================================ */
* {
    transition: background-color var(--transition-smooth),
                color var(--transition-smooth),
                border-color var(--transition-smooth);
}

/* Excluir elementos que no necesitan transición */
img,
video,
iframe,
svg,
canvas {
    transition: none;
}