/* Estilos base */ html, body { overflow-x: hidden; position: relative; width: 100%; } body { font-family: 'Outfit', sans-serif; color: #374151; /* gray-700 (Default text) */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #F9FAFB; /* bg-gray-50 */ display: flex; /* Para footer pegajoso si el contenido es corto */ flex-direction: column; /* Para footer pegajoso */ min-height: 100vh; /* Para footer pegajoso */ } main { /* Para footer pegajoso */ flex-grow: 1; } h1, h2, h3, h4, h5, h6, .font-poppins { font-family: 'Outfit', sans-serif; font-weight: 700; } .font-montserrat { font-family: 'Montserrat', sans-serif; } /* Variables de Color */ :root { --logo-dark-blue: #005AAB; --logo-light-blue: #00AEEF; --logo-green: #009A44; --logo-yellow: #FFDD00; --logo-white: #FFFFFF; --logo-orange: #895e29; --primary-color: var(--logo-dark-blue); --secondary-color: var(--logo-light-blue); --accent-color: var(--logo-yellow); --success-color: var(--logo-green); --text-on-primary: var(--logo-white); --text-dark: #1a2b41; --text-medium: #4A5568; --card-bg: #FFFFFF; --section-bg-light: #F0F8FF; /* Colores personalizados para el banner de estado (NUEVA PALETA) */ --banner-gradient-light-gray: #E5E7EB; /* Tailwind gray-200 */ --banner-gradient-sand: #F3D9A9; /* Un color arena suave */ --banner-gradient-turquoise: #76D7C4; /* Un turquesa suave */ --banner-text-color: var(--text-dark); /* Texto oscuro para contraste */ /* Colores para el CTA de Tarifas */ --cta-tarifas-bg-sand: #F0E68C; /* Arena más claro, tipo Khaki */ --cta-tarifas-bg-water: #87CEEB; /* Azul cielo / Agua */ --cta-tarifas-text-dark: var(--text-dark); /* Texto oscuro para contraste */ --cta-tarifas-icon-bg: var(--primary-color); /* Iconos de fondo en azul oscuro */ /* Colores para Hero de Accesibilidad */ --accesibilidad-hero-bg-start: #a0d2eb; /* Azul cielo muy claro */ --accesibilidad-hero-bg-end: #e0f2f7; /* Casi blanco con un toque de azul/verde */ --accesibilidad-icon-bg: var(--secondary-color); --accesibilidad-icon-color: var(--logo-white); /* Colores para el Hero de Tarifas estilo Ticket */ --hero-tarifas-bg-start: #2c3e50; --hero-tarifas-bg-end: #3498db; --hero-tarifas-ticket-bg: #fdfdfd; --hero-tarifas-ticket-border-color: #cccccc; --hero-tarifas-ticket-text: var(--text-dark); --hero-tarifas-cta-bg: var(--logo-orange); --hero-tarifas-cta-text: var(--logo-white); --hero-tarifas-cta-hover-bg: var(--accent-color); --hero-tarifas-cta-hover-text: var(--primary-color); --hero-tarifas-decorative-icon-color: rgba(255, 255, 255, 0.07); --hero-tarifas-ticket-accent-bg: var(--secondary-color); --hero-tarifas-ticket-accent-text: var(--logo-white); --hero-servicios-overlay-start: rgba(60, 70, 90, 0.6); /* Un gris azulado oscuro semitransparente */ --hero-servicios-overlay-end: rgba(30, 40, 60, 0.8); /* Más oscuro */ --hero-servicios-icon-color: var(--logo-white); --hero-plano-overlay-color: var(--primary-color); /* Azul oscuro para el overlay */ --hero-plano-icon-color: var(--accent-color); /* Amarillo para el icono grande */ --hero-plano-text-color: var(--logo-white); --hero-faq-bg-start: #1D2B3E; /* Un azul noche muy oscuro */ --hero-faq-bg-end: #2C3E50; /* Un poco más claro */ --hero-faq-q-mark-main: var(--accent-color); /* Amarillo para el ? principal */ --hero-faq-q-mark-float: rgba(255, 255, 255, 0.1); /* Para los ? flotantes */ --hero-faq-text-color: var(--logo-white); --hero-agua-bg-deep-blue: #0b3d78; /* Un azul más profundo y oscuro */ --hero-agua-bg-mid-blue: #1e65b0; /* Un azul medio */ --hero-agua-bg-light-accent: var(--logo-light-blue); /* Azul claro del logo para destellos */ --hero-agua-bubble-color1: rgba(173, 216, 230, 0.1); /* Lightblue muy sutil para burbujas */ --hero-agua-bubble-color2: rgba(200, 230, 255, 0.15); /* Otro tono de azul claro */ --hero-agua-bubble-highlight: rgba(255, 255, 255, 0.25); /* Pequeño brillo en la burbuja */ --hero-agua-icon-color: var(--logo-white); --hero-agua-text-color: var(--logo-white); --hero-piscinas-overlay-color: rgba(0, 0, 0, 0.4); /* El que ya se usa con bg-black opacity-40 */ --hero-piscinas-text-color: var(--logo-white); /* Colores para el Aviso Importante en Index */ --aviso-bg-color: var(--section-bg-light); /* Un fondo claro, como azul pálido */ --aviso-border-color: var(--secondary-color); /* Un borde con el color secundario */ --aviso-icon-color: var(--accent-color); /* Icono en amarillo */ --aviso-title-color: var(--primary-color); --aviso-text-color: var(--text-medium); /* Colores para CTA Santuario (Servicios) */ --cta-santuario-overlay-start: rgba(20, 30, 48, 0.7); /* Un azul muy oscuro casi negro */ --cta-santuario-overlay-end: rgba(36, 59, 85, 0.85); /* Un poco más claro */ --cta-santuario-text: var(--logo-white); --cta-santuario-icon-color: var(--accent-color); /* Amarillo para el icono principal */ --cta-santuario-button-primary-bg: var(--accent-color); --cta-santuario-button-primary-text: var(--primary-color); --cta-santuario-button-primary-hover-bg: var(--logo-yellow); --cta-santuario-button-secondary-bg: transparent; --cta-santuario-button-secondary-text: var(--logo-white); --cta-santuario-button-secondary-border: var(--logo-white); --cta-santuario-button-secondary-hover-bg: rgba(255, 255, 255, 0.1); --cta-faq-bg-start: var(--primary-color); /* Azul oscuro del logo */ --cta-faq-bg-end: var(--secondary-color); /* Azul claro del logo */ --cta-faq-shape-color: rgba(255, 255, 255, 0.08); /* Formas de fondo muy sutiles */ --cta-faq-icon-color: var(--accent-color); /* Amarillo para el icono principal */ --cta-faq-text-color: var(--logo-white); --cta-faq-button-primary-bg: var(--accent-color); --cta-faq-button-primary-text: var(--primary-color); --cta-faq-button-primary-hover-bg: var(--logo-yellow); /* Amarillo más brillante */ --cta-faq-button-secondary-bg: transparent; --cta-faq-button-secondary-text: var(--logo-white); --cta-faq-button-secondary-border: var(--logo-white); --cta-faq-button-secondary-hover-bg: rgba(255, 255, 255, 0.1); --cta-faq-button-secondary-hover-border: var(--accent-color); /* Colores para Hero de Atracciones */ --hero-atracciones-overlay-start: rgba(0, 60, 120, 0.7); /* Azul oscuro semitransparente */ --hero-atracciones-overlay-end: rgba(0, 20, 50, 0.9); /* Más oscuro hacia abajo */ --hero-atracciones-icon-color: var(--accent-color); --hero-atracciones-text-color: var(--logo-white); /* Colores para CTA Final de Atracciones */ --cta-atracciones-final-bg-start: var(--secondary-color); /* Azul claro */ --cta-atracciones-final-bg-end: var(--primary-color); /* Azul oscuro */ --cta-atracciones-final-icon-color: var(--accent-color); --cta-atracciones-final-text-color: var(--logo-white); --cta-atracciones-button-primary-bg: var(--accent-color); --cta-atracciones-button-primary-text: var(--primary-color); --cta-atracciones-button-secondary-bg: var(--logo-white); --cta-atracciones-button-secondary-text: var(--primary-color); /* Colores para Hero de Salón de Relax */ --hero-salon-overlay-start: rgba(30, 40, 60, 0.7); /* Azul grisáceo oscuro */ --hero-salon-overlay-end: rgba(10, 20, 30, 0.85); /* Casi negro */ --hero-salon-icon-color: var(--logo-white); --hero-salon-text-color: var(--logo-white); --hero-salon-button-bg: rgba(255, 255, 255, 0.15); --hero-salon-button-text: var(--logo-white); --hero-salon-button-border: rgba(255, 255, 255, 0.4); --hero-salon-button-hover-bg: rgba(255, 255, 255, 0.25); --hero-salon-button-hover-border: var(--logo-white); /* Colores para CTA Final Salón de Relax */ --cta-salon-final-overlay-start: rgba(0, 0, 0, 0.5); --cta-salon-final-overlay-end: rgba(0, 0, 0, 0.7); --cta-salon-final-icon-color: var(--accent-color); --cta-salon-final-text-color: var(--logo-white); /* Colores para Hero de Gastronomía */ --hero-gastronomia-overlay-start: rgba(0, 0, 0, 0.3); --hero-gastronomia-overlay-end: rgba(0, 0, 0, 0.7); --hero-gastronomia-icon-color: var(--accent-color); --hero-gastronomia-text-color: var(--logo-white); /* Colores para Puntos Gastronómicos */ --punto-gastronomico-title-underline: var(--secondary-color); /* Colores para CTA "Antojo de Diversión" (Gastronomía) */ /* --cta-antojo-bg-image: url('../images/gastronomia/cta_gastronomia_diversion_bg.jpg'); Se define en el HTML */ --cta-antojo-overlay-start: rgba(0, 90, 171, 0.85); /* Azul primario con opacidad */ --cta-antojo-overlay-middle: rgba(0, 174, 239, 0.75); /* Azul secundario con opacidad */ --cta-antojo-overlay-end: rgba(0, 90, 171, 0.85); /* Azul primario con opacidad */ --cta-antojo-floating-icon-color: rgba(255, 255, 255, 0.12); /* Iconos flotantes más visibles */ --cta-antojo-icon-color: var(--accent-color); --cta-antojo-text-color: var(--logo-white); --cta-antojo-button-bg: #f6ce92; --cta-antojo-button-hover-bg: #e0b87f; /* una versión un poco más oscura para el hover */ --cta-antojo-button-text: #a23315; --cta-antojo-button-hover-text: #a23315; /* Colores para CTA "Sumérgete en Bienestar" (Agua Termal) */ --cta-agua-overlay-start: rgba(10, 60, 100, 0.75); /* Azul profundo semitransparente */ --cta-agua-overlay-end: rgba(0, 30, 60, 0.9); /* Más oscuro */ --cta-agua-floating-drop-color: rgba(173, 216, 230, 0.2); /* Gotas de agua claras */ --cta-agua-icon-color: var(--logo-light-blue); --cta-agua-text-color: var(--logo-white); --cta-agua-button-primary-bg: var(--logo-light-blue); --cta-agua-button-primary-text: var(--primary-color); --cta-agua-button-primary-hover-bg: var(--secondary-color); --cta-agua-button-secondary-bg: transparent; --cta-agua-button-secondary-text: var(--logo-white); --cta-agua-button-secondary-border: var(--logo-light-blue); --cta-agua-button-secondary-hover-bg: rgba(0, 174, 239, 0.15); --cta-agua-button-secondary-hover-border: var(--logo-white); /* Colores para CTA Final de Plano del Parque */ --cta-plano-final-bg-image: url('../images/atracciones/cta_atracciones_bg.jpg'); /* Reutilizar o cambiar */ --cta-plano-final-overlay-start: rgba(0, 174, 239, 0.85); /* Azul secundario */ --cta-plano-final-overlay-middle: rgba(0, 90, 171, 0.8); /* Azul primario */ --cta-plano-final-overlay-end: rgba(0, 174, 239, 0.85); /* Azul secundario */ --cta-plano-final-icon-color: var(--accent-color); --cta-plano-final-text-color: var(--logo-white); --cta-plano-button-primary-bg: var(--accent-color); --cta-plano-button-primary-text: var(--primary-color); --cta-plano-button-secondary-bg: var(--logo-white); --cta-plano-button-secondary-text: var(--primary-color); } /* Clases de utilidad para colores de fondo */ .bg-primary-color { background-color: var(--primary-color); } .bg-secondary-color { background-color: var(--secondary-color); } .bg-accent-color { background-color: var(--accent-color); } .bg-success-color { background-color: var(--success-color); } .text-text-on-primary { color: var(--text-on-primary) !important; } .text-text-on-secondary { color: var(--text-on-primary) !important; } /* --- ESTILOS PARA EL MENÚ DE NAVEGACIÓN MEJORADO --- */ /* --- ESTILOS PARA EL FOOTER OSCURO (CON BORDE DEGRADADO SUPERIOR) --- */ .site-footer { /* bg-slate-800 text-slate-300 pt-16 pb-8 ya están en el HTML */ font-size: 0.9rem; position: relative; /* Necesario para el pseudo-elemento ::before */ /* El padding-top original (pt-16) se mantiene para el contenido, el borde va encima */ } .site-footer::before { /* Borde degradado superior */ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; /* Mismo alto que la barra del header */ background-image: linear-gradient(to right, var(--logo-light-blue), var(--logo-green), var(--logo-yellow)); /* Si quieres que sea idéntico al del header, asegúrate que los colores y dirección coincidan */ } .site-footer .container { /* Asegurar que el contenido del footer esté por encima del borde si es necesario */ position: relative; z-index: 1; } .site-footer h4 { /* text-lg font-poppins font-semibold text-white mb-4 ya están en el HTML */ } .footer-link { color: var(--slate-300, #cbd5e1); transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out; display: inline-block; position: relative; } .footer-link:hover { color: var(--secondary-color, #00AEEF); padding-left: 5px; } /* Contenedor principal de las 5 columnas del footer */ .footer-top-section { /* Las clases de grid (grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-6 gap-y-10 mb-12 items-start) ya están en el HTML de footer.php. Si necesitas más control sobre el ancho de cada una de las 5 columnas en 'lg', podrías cambiar lg:grid-cols-5 a lg:grid-cols-12 y luego usar lg:col-span-X en cada .footer-column. Por ahora, asumimos que lg:grid-cols-5 distribuye el espacio equitativamente. */ } .footer-column { /* Estilos comunes para todas las columnas si son necesarios */ /* En móvil (debajo de sm), cada columna ocupará el ancho completo y tendrá un gap-y-10 */ } .footer-column .footer-column-title { /* Títulos "Ubicación", "Contacto", "Síguenos" */ color: var(--logo-white); margin-bottom: 0.75rem; /* mb-3 */ font-size: 0.95rem; /* Un poco más pequeño que el h4 por defecto del footer anterior */ } /* Columna 1 y 2: Logos */ .footer-column img.h-20 { /* Logos de Termas y Calidad */ height: 6rem; /* Aumentado el tamaño (era h-20 = 5rem) */ } @media (min-width: 768px) { /* md */ .footer-column img.md\:h-24 { height: 6rem; /* Aumentado el tamaño (era md:h-24 = 6rem) */ } } /* Columna 3 y 4: Ubicación y Contacto */ .footer-column p.text-sm { color: var(--slate-300, #cbd5e1); line-height: 1.6; } .footer-column .footer-link { color: var(--slate-300, #cbd5e1); transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out; display: inline-flex; align-items: center; position: relative; font-size: 0.875rem; /* text-sm */ } .footer-column .footer-link:hover { color: var(--secondary-color, #00AEEF); padding-left: 4px; } .footer-column .footer-link i.fa-fw { width: 1.4em; text-align: center; color: var(--secondary-color); margin-right: 0.35rem; /* Ajustar espacio */ } /* Centrado en dispositivos móviles */ @media (max-width: 640px) { .footer-column { text-align: center; } .footer-column h3, .footer-column h4, .footer-column p { text-align: center; } } /* Columna 5: Redes Sociales */ .footer-column .flex.space-x-4 { /* Contenedor de iconos sociales */ /* justify-center sm:justify-start ya están en HTML */ } .footer-social-icon { color: var(--slate-300, #cbd5e1); font-size: 1.6rem; /* Ligeramente más pequeño que antes para que quepan mejor */ transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; } .footer-social-icon:hover { color: var(--secondary-color, #00AEEF); transform: scale(1.1) rotate(-5deg); } .site-footer .border-t.border-slate-700 { /* Línea divisoria antes del copyright */ border-color: #334155; margin-top: 2.5rem; /* Asegurar que haya espacio si el contenido es poco */ } .site-footer .text-secondary-color { color: var(--secondary-color, #00AEEF) !important; } .sitios-amigos-section { /* border-t border-slate-700 pt-10 mt-10 text-center ya están en el HTML */ /* Puedes añadir un padding inferior si es necesario antes del copyright */ /* padding-bottom: 2rem; */ } .sitios-amigos-section h4 { /* text-md font-poppins font-semibold text-white mb-6 uppercase tracking-wider ya están en el HTML */ color: var(--slate-200, #e2e8f0); /* Un blanco un poco más suave para este título */ } .sitios-amigos-section .flex { /* El div que contiene los enlaces */ /* flex flex-wrap justify-center items-center gap-x-6 gap-y-4 ya están en el HTML */ } .sitio-amigo-link { display: inline-block; padding: 0.5rem; /* Un pequeño padding alrededor del logo/texto */ transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; /* Ligeramente transparente por defecto */ } .sitio-amigo-link:hover { opacity: 1; transform: translateY(-3px); /* Ligera elevación al hacer hover */ } .sitio-amigo-link img { /* h-10 md:h-12 max-w-[150px] object-contain transition-transform duration-300 group-hover:scale-105 ya están en HTML */ /* filter: grayscale(20%) brightness(1.5); Hacer los logos un poco desaturados y brillantes para que se integren con el fondo oscuro */ transition: filter 0.3s ease; } .sitio-amigo-link:hover img { filter: grayscale(0%) brightness(1); /* Color completo al hacer hover */ } .sitio-amigo-link span { /* Para el nombre del sitio si no hay logo */ color: var(--slate-300, #cbd5e1); font-weight: 500; font-size: 0.875rem; /* text-sm */ } .sitio-amigo-link:hover span { color: var(--logo-white); } /* --- FIN ESTILOS FOOTER OSCURO --- */ /* --- ESTILOS PARA BOTONES EN MENÚ MÓVIL (Tickets y WhatsApp) --- */ #mobile-menu .p-4.space-y-3 { /* Selector más específico */ display: flex; flex-direction: column; gap: 0.75rem; /* Tailwind space-y-3 es 0.75rem, esto lo reemplaza para flex-gap */ } .whatsapp-float-button { position: fixed; width: 60px; height: 60px; bottom: 25px; right: 25px; background-color: #25D366; color: #FFF; border-radius: 50%; text-align: center; font-size: 30px; box-shadow: 2px 2px 8px rgba(0,0,0,0.25); z-index: 100; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .whatsapp-float-button:hover { transform: scale(1.1); box-shadow: 3px 3px 12px rgba(0,0,0,0.3); } .whatsapp-float-button i { } /* Ocultar botón flotante en pantallas pequeñas (móviles) */ @media (max-width: 1023px) { /* Coincide con el breakpoint 'lg' de Tailwind (1024px) */ .whatsapp-float-button { display: none !important; } } /* Hero Section "Portal a la Aventura" */ .hero-atracciones-custom { /* relative h-[85vh] min-h-[550px] md:min-h-[650px] bg-gray-700 flex items-center justify-center text-center text-white overflow-hidden ya están en HTML */ /* El bg-gray-700 es un fallback */ } .hero-atracciones-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .ken-burns-image { width: 100%; height: 100%; background-size: cover; background-position: center center; animation: kenburns-effect 20s ease-in-out infinite alternate; transform-origin: center center; /* Asegurar que el zoom sea desde el centro */ } @keyframes kenburns-effect { 0% { transform: scale(1) translateX(0) translateY(0); } 25% { transform: scale(1.05) translateX(-2%) translateY(1%); } 50% { transform: scale(1.1) translateX(0) translateY(0); } 75% { transform: scale(1.05) translateX(2%) translateY(-1%); } 100% { transform: scale(1) translateX(0) translateY(0); } } /* El overlay de degradado ya está en el HTML:
Puedes ajustar la opacidad y los colores en las clases de Tailwind si es necesario. */ .hero-atracciones-icon { /* Para el icono fas fa-route */ /* text-6xl md:text-7xl text-accent-color ya están en HTML */ text-shadow: 0 0 20px var(--accent-color), 0 0 30px var(--logo-orange); animation: hero-icon-float 3s ease-in-out infinite alternate; } @keyframes hero-icon-float { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } 100% { transform: translateY(0px) scale(1); } } #hero-atracciones-portal h1 { color: var(--hero-atracciones-text-color); } #hero-atracciones-portal p { color: var(--slate-100, #f1f5f9); } #hero-atracciones-portal .cta-button { /* Botón "Iniciar Exploración" */ background-color: var(--logo-white); color: var(--primary-color); /* Otras clases de Tailwind ya aplican el resto */ } #hero-atracciones-portal .cta-button:hover { background-color: var(--section-bg-light); /* Un blanco hueso o gris muy claro */ } /* --- NUEVOS ESTILOS PARA LA SECCIÓN DE AVISO IMPORTANTE (INDEX.PHP) --- */ .aviso-importante-section { background: linear-gradient(145deg, #ffe0e0 0%, #ffb3b3 100%); /*border-top: 4px solid var(--aviso-border-color); border-bottom: 4px solid var(--aviso-border-color);*/ /* padding py-8 md:py-12 ya están en el HTML */ /* animate-on-scroll ya está en el HTML */ } .aviso-content-wrapper { /* bg-white p-6 sm:p-8 rounded-xl shadow-2xl md:flex md:items-start md:gap-6 ya están en HTML */ /* Hacemos el fondo del wrapper ligeramente transparente para que se vea el amarillo de la sección */ background-color: rgba(255, 255, 255, 0.85); /* Blanco con un poco de transparencia */ backdrop-filter: blur(3px); /* Efecto de vidrio esmerilado si el navegador lo soporta */ -webkit-backdrop-filter: blur(3px); border: 1px solid color-mix(in srgb, var(--aviso-border-color) 40%, transparent); /* Borde sutil con color de acento */ } .aviso-imagen-container { /* Clases de Tailwind ya manejan el layout */ } .aviso-imagen-container img { border: 4px solid var(--logo-white); box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* max-h-64 md:max-h-full ya está en HTML, ajusta si es necesario */ } .aviso-texto-container h2 { color: var(--aviso-title-color); /* text-shadow: 0 1px 2px rgba(0,0,0,0.1); */ /* Sombra sutil para el título */ } .aviso-texto-container h2 i { color: red; animation: aviso-icon-attention 1.8s infinite ease-in-out; text-shadow: 0 0 5px rgba(255, 0, 0, 0.4); } @keyframes aviso-icon-attention { 0%, 100% { transform: scale(1) rotate(0deg); } 10% { transform: scale(1.15) rotate(-8deg); } 20% { transform: scale(1.15) rotate(8deg); } 30% { transform: scale(1.15) rotate(-8deg); } 40% { transform: scale(1.15) rotate(8deg); } 50% { transform: scale(1) rotate(0deg); } } .aviso-texto-container .prose { color: var(--aviso-text-color); } .aviso-texto-container .prose p { margin-bottom: 0.75em; /* Espacio entre párrafos del aviso */ } .aviso-texto-container .prose strong { color: var(--primary-color); /* Resaltar los strong si los usas en el texto del aviso */ } /* --- FIN ESTILOS SECCIÓN AVISO IMPORTANTE --- */ /* CTA Final en Atracciones.php */ .cta-atracciones-final-custom { /* relative py-20 md:py-28 text-center overflow-hidden ya están en HTML */ /* El fondo se maneja por .cta-atracciones-final-bg-image y el overlay de gradiente */ background-color: var(--primary-color); /* Fallback */ } .cta-atracciones-final-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 0; filter: brightness(0.6) blur(1px); /* Oscurecer y desenfocar ligeramente la imagen de fondo */ transform: scale(1.03); /* Para evitar bordes del blur */ } /* El overlay de degradado ya está en el HTML:
*/ #cta-atracciones-final-v2 .fa-exclamation-circle { color: var(--cta-atracciones-final-icon-color); text-shadow: 0 0 15px var(--cta-atracciones-final-icon-color); } #cta-atracciones-final-v2 h2 { color: var(--cta-atracciones-final-text-color); } #cta-atracciones-final-v2 p { color: var(--slate-100, #f1f5f9); line-height: 1.7; } .cta-button-atracciones-primary { background-color: var(--cta-atracciones-button-primary-bg); color: var(--cta-atracciones-button-primary-text); font-family: 'Poppins', sans-serif; font-weight: 700; padding: 0.8rem 2rem; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; border: 2px solid transparent; } .cta-button-atracciones-primary:hover { background-color: color-mix(in srgb, var(--cta-atracciones-button-primary-bg) 90%, black); /* Ligeramente más oscuro */ transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 20px color-mix(in srgb, var(--cta-atracciones-button-primary-bg) 40%, black); } .cta-button-atracciones-secondary { background-color: var(--cta-atracciones-button-secondary-bg); color: var(--cta-atracciones-button-secondary-text); border: 2px solid var(--cta-atracciones-button-secondary-text); /* Borde del color del texto */ font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0.8rem 2rem; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease; } .cta-button-atracciones-secondary:hover { background-color: rgba(255, 255, 255, 0.15); border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-3px); } .cta-button-atracciones-primary i, .cta-button-atracciones-secondary i { transition: transform 0.3s ease; } .cta-button-atracciones-primary:hover i, .cta-button-atracciones-secondary:hover i { transform: translateX(3px); } /* --- FIN ESTILOS HERO Y CTA ATRACCIONES --- */ /* --- NUEVOS ESTILOS PARA CTA "SUMÉRGETE EN BIENESTAR" (AGUA-TERMAL.PHP) --- */ .cta-agua-termal-final-custom { /* py-20 md:py-28 relative text-white text-center overflow-hidden ya están en HTML */ background-color: var(--hero-agua-bg-deep-blue); /* Fallback, un azul oscuro */ min-height: 55vh; display: flex; align-items: center; justify-content: center; } .cta-agua-termal-video-bg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .cta-agua-termal-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); object-fit: cover; filter: blur(3px) brightness(0.6) saturate(0.8); /* Efecto más etéreo para el video de fondo */ } /* El overlay de degradado ya está en el HTML:
Puedes ajustar la opacidad en Tailwind (ej. /70, /40) o definir un degradado más específico aquí si es necesario: #cta-sumergete-bienestar .bg-gradient-to-t { background-image: linear-gradient(to top, var(--cta-agua-overlay-end), var(--cta-agua-overlay-start), transparent); opacity: 1; // La opacidad ya está en las variables RGBA } */ .cta-agua-floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 5; /* Entre el video/fondo y el overlay de color, o encima del overlay si este es muy opaco */ } .agua-drop { position: absolute; background-color: var(--cta-agua-floating-drop-color); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Forma de gota más orgánica */ animation: float-and-fade 10s linear infinite; box-shadow: inset 0 -2px 2px rgba(255,255,255,0.3), 0 0 5px rgba(173,216,230,0.3); /* El tamaño, left, top, animation-delay, animation-duration se definen inline en el HTML */ } .agua-drop:nth-child(even) { animation-direction: alternate-reverse; animation-duration: 15s; /* Duración diferente para algunas */ } @keyframes float-and-fade { 0% { transform: translateY(110vh) scale(0.3) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; /* Aparece */ } 90% { opacity: 0.1; /* Comienza a desvanecerse */ } 100% { transform: translateY(-10vh) scale(1) rotate(360deg); /* Sube, rota y desaparece */ opacity: 0; } } #cta-sumergete-bienestar .fa-tint { color: var(--cta-agua-icon-color); text-shadow: 0 0 20px var(--cta-agua-icon-color), 0 0 35px var(--logo-white); /* Resplandor azul claro y blanco */ animation: icon-subtle-pulse 3s infinite ease-in-out; /* Reutilizar animación o crear una nueva */ } #cta-sumergete-bienestar h2 { color: var(--cta-agua-text-color); /* text-shadow ya está en el HTML */ } #cta-sumergete-bienestar p { color: var(--slate-100, #f1f5f9); line-height: 1.7; /* text-shadow ya está en el HTML */ } .cta-button-agua-primary { background-color: var(--cta-agua-button-primary-bg); color: var(--cta-agua-button-primary-text); font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0.85rem 2.2rem; border-radius: 8px; /* Menos redondeado */ text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.3s ease; border: 1px solid transparent; } .cta-button-agua-primary:hover { background-color: var(--cta-agua-button-primary-hover-bg); color: var(--logo-white); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 174, 239, 0.4); } .cta-button-agua-secondary { background-color: var(--cta-agua-button-secondary-bg); color: var(--cta-agua-button-secondary-text); border: 2px solid var(--cta-agua-button-secondary-border); font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0.85rem 2.2rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em; transition: all 0.3s ease; } .cta-button-agua-secondary:hover { background-color: var(--cta-agua-button-secondary-hover-bg); border-color: var(--cta-agua-button-secondary-hover-border); color: var(--logo-white); transform: translateY(-3px); } .cta-button-agua-primary i, .cta-button-agua-secondary i { transition: transform 0.3s ease; } .cta-button-agua-primary:hover i, .cta-button-agua-secondary:hover i { transform: translateX(3px); } /* --- FIN ESTILOS CTA AGUA TERMAL --- */ /* --- NUEVOS ESTILOS PARA BOTÓN DE WHATSAPP EN MENÚ MÓVIL --- */ .mobile-nav-whatsapp-button { display: flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; background-color: var(--success-color); color: var(--logo-white); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 100%; /* Asegurar que ocupe el ancho si está en un flex-column container */ } .mobile-nav-whatsapp-button:hover { background-color: color-mix(in srgb, var(--success-color) 85%, black); transform: translateY(-1px); } .mobile-nav-whatsapp-button i { font-size: 1.1em; margin-right: 0.5rem; } .main-nav-links { position: relative; } /* --- NUEVOS ESTILOS PARA EL CTA "SANTUARIO DE BIENESTAR" (SERVICIOS.PHP) --- */ .cta-santuario-custom { /* py-24 md:py-32 relative text-white text-center overflow-hidden ya están en HTML */ /* El color de fondo se maneja por el video y el overlay */ min-height: 60vh; /* Altura mínima para que el video se aprecie */ display: flex; align-items: center; justify-content: center; } .cta-santuario-video-bg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; /* Detrás del overlay y contenido */ } .cta-santuario-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); object-fit: cover; /* Asegura que el video cubra el contenedor */ filter: blur(1px) brightness(0.7); /* Sutil desenfoque y oscurecimiento del video */ } /* El overlay oscuro ya está definido en el HTML con clases de Tailwind:
Si se necesita un degradado más específico: .cta-santuario-custom .absolute.inset-0.bg-black { background-image: linear-gradient(to bottom, var(--cta-santuario-overlay-start), var(--cta-santuario-overlay-end)); opacity: 1; // La opacidad ya está en el degradado } */ #cta-santuario-bienestar .container { /* position: relative; z-index: 20; ya está en el HTML */ } #cta-santuario-bienestar .fa-hand-sparkles { /* text-5xl md:text-6xl text-accent-color mb-6 animate-on-scroll ya están en HTML */ color: var(--cta-santuario-icon-color); text-shadow: 0 0 15px rgba(255, 221, 0, 0.5); /* Resplandor amarillo */ animation: icon-subtle-pulse 3s infinite ease-in-out; } @keyframes icon-subtle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } #cta-santuario-bienestar h2 { /* text-4xl sm:text-5xl font-extrabold mb-6 font-poppins ... text-shadow ya están en HTML */ color: var(--cta-santuario-text); } #cta-santuario-bienestar p { /* text-lg sm:text-xl text-gray-200 ... text-shadow ya están en HTML */ color: var(--slate-100, #f1f5f9); line-height: 1.7; } .cta-button-santuario { padding: 0.85rem 2rem; /* py-3.5 px-8 */ border-radius: 0.5rem; /* rounded-lg */ font-family: 'Poppins', sans-serif; font-weight: 600; /* semibold */ text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 2px solid transparent; } .cta-button-santuario:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 7px 20px rgba(0,0,0,0.2); } .cta-button-santuario i { transition: transform 0.3s ease; } .cta-button-santuario:hover i { transform: rotate(-5deg); } .cta-button-santuario.primary { background-color: var(--cta-santuario-button-primary-bg); color: var(--cta-santuario-button-primary-text); } .cta-button-santuario.primary:hover { background-color: var(--cta-santuario-button-primary-hover-bg); /* color se mantiene o ajusta si es necesario */ } .cta-button-santuario.secondary { background-color: var(--cta-santuario-button-secondary-bg); color: var(--cta-santuario-button-secondary-text); border-color: var(--cta-santuario-button-secondary-border); } .cta-button-santuario.secondary:hover { background-color: var(--cta-santuario-button-secondary-hover-bg); border-color: var(--logo-white); /* Borde más brillante al hacer hover */ } /* --- FIN ESTILOS CTA SANTUARIO --- */ /* --- NUEVOS ESTILOS PARA LA PÁGINA DE GASTRONOMÍA (gastronomia.php) --- */ .gastronomia-page { /* Estilos generales para la página si son necesarios */ } /* Hero Section para Gastronomía */ .hero-gastronomia-custom { /* py-28 md:py-40 relative flex items-center justify-center text-center overflow-hidden ya están en HTML */ min-height: 60vh; background-color: #4A3B31; /* Un marrón oscuro como fallback */ } .hero-gastronomia-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: brightness(0.8) saturate(1.1); /* Ligeramente más oscuro y saturado */ transform: scale(1.03); /* Para evitar bordes si hay algún efecto */ } /* El overlay oscuro ya está en el HTML:
Puedes ajustar la opacidad en Tailwind (ej. opacity-60 o opacity-70) */ .hero-gastronomia-icon { /* text-5xl md:text-6xl text-accent-color mb-6 ya están en HTML */ color: var(--accent-color); text-shadow: 0 0 15px rgba(255, 221, 0, 0.4), 0 0 25px rgba(255, 221, 0, 0.3); animation: food-icon-bounce 2.5s infinite ease-in-out; } @keyframes food-icon-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.08); } } #hero-gastronomia h1 { /* text-shadow ya está inline en el HTML */ color: var(--logo-white); } #hero-gastronomia p { /* text-shadow ya está inline en el HTML */ color: var(--slate-100, #f1f5f9); line-height: 1.7; } /* Sección de Puntos Gastronómicos */ #puntos-gastronomicos .section-title-underline-center { /* Estilos ya definidos para este tipo de subrayado */ } .punto-gastronomico-item { /* lg:flex items-center gap-8 lg:gap-12 animate-on-scroll ya están en HTML */ /* Podríamos añadir un borde sutil o un fondo si no es bg-white */ background-color: var(--card-bg); /* Fondo blanco para cada item */ padding: 1.5rem; /* p-6 */ border-radius: 0.75rem; /* rounded-xl */ box-shadow: 0 8px 25px rgba(0,0,0,0.07); margin-bottom: 2.5rem; /* Espacio entre items si no se usa space-y en el contenedor */ } /* Para la alternancia de imagen/texto */ /* .lg\:flex-row-reverse ya está en el HTML para los items impares */ .punto-gastronomico-item img { /* w-full h-auto max-h-[400px] object-cover rounded-xl shadow-xl transform transition-transform duration-500 hover:scale-105 ya están en HTML */ border: 4px solid white; /* Borde blanco alrededor de la imagen */ } .punto-gastronomico-item h3 { /* text-2xl md:text-3xl font-bold text-primary-color font-poppins mb-3 ya están en HTML */ } .title-underline-dynamic { /* Para el subrayado debajo del nombre del local */ display: block; width: 70px; height: 3px; background-image: linear-gradient(to right, var(--line-color, var(--secondary-color)), color-mix(in srgb, var(--line-color, var(--secondary-color)) 70%, var(--accent-color))); border-radius: 1.5px; /* mb-5 ya está en el HTML */ } .punto-gastronomico-item .text-text-medium { /* Descripción */ font-size: 0.95rem; } .punto-gastronomico-item .text-sm.text-accent-color { /* Notas especiales */ color: var(--logo-orange); /* Naranja para las notas especiales */ } .punto-gastronomico-item .text-sm.text-accent-color i { color: var(--logo-orange); } /* CTA "Antojo de Diversión" (Gastronomía) */ .cta-antojo-custom { min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #a02e13; /* Fallback */ position: relative; } .cta-antojo-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; z-index: 0; animation: kenburns-effect-cta-gastronomia 25s ease-in-out infinite alternate; filter: brightness(0.6) blur(1px); } @keyframes kenburns-effect-cta-gastronomia { 0% { transform: scale(1.05) translateX(0%) translateY(0%); } 50% { transform: scale(1.15) translateX(-1%) translateY(1%); } 100% { transform: scale(1.05) translateX(0%) translateY(0%); } } /* El overlay de degradado ya está en el HTML:
Asegúrate que los colores y opacidades (ej. /85, /75) sean los deseados. */ .cta-antojo-floating-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; /* Encima de la imagen de fondo, debajo del overlay de color */ } .cta-floating-icon { /* Clase para los iconos flotantes en el CTA de gastronomía */ position: absolute; color: var(--cta-antojo-floating-icon-color); /* Blanco muy tenue */ opacity: 0.6; /* Ligeramente más visibles */ animation: floating-food-icons 20s ease-in-out infinite; /* El tamaño, top, left y animation-delay se definen inline en el HTML */ text-shadow: 0 0 8px rgba(255,255,255,0.2); /* Pequeño halo */ } .cta-floating-icon:nth-child(2n) { animation-duration: 25s; animation-direction: alternate-reverse; } .cta-floating-icon:nth-child(3n) { animation-duration: 18s; opacity: 0.5; } .cta-floating-icon:nth-child(4n) { animation-duration: 28s; animation-direction: alternate; } @keyframes floating-food-icons { 0% { transform: translateY(10px) rotate(0deg) scale(0.9); opacity: 0.1; } 25% { transform: translateY(-20px) rotate(15deg) scale(1.1); opacity: 0.4; } 50% { transform: translateY(5px) rotate(-10deg) scale(1); opacity: 0.2; } 75% { transform: translateY(-15px) rotate(-15deg) scale(1.05); opacity: 0.5; } 100% { transform: translateY(10px) rotate(0deg) scale(0.9); opacity: 0.1; } } #cta-antojo-diversion .container { /* position: relative; z-index: 20; ya está en el HTML */ } #cta-antojo-diversion .fa-shopping-basket { color: var(--cta-antojo-icon-color); text-shadow: 0 0 20px var(--cta-antojo-icon-color), 0 0 30px var(--logo-orange); animation: icon-subtle-pulse 2.5s infinite ease-in-out; } #cta-antojo-diversion h2 { color: var(--cta-antojo-text-color); /* text-shadow ya está en el HTML */ } #cta-antojo-diversion p { color: var(--slate-100, #f1f5f9); line-height: 1.75; /* text-shadow ya está en el HTML */ } .cta-button-antojo { background-image: linear-gradient(to right, var(--cta-antojo-button-bg) 0%, var(--cta-antojo-button-hover-bg) 50%, var(--cta-antojo-button-bg) 100%); background-size: 200% auto; color: var(--cta-antojo-button-text); font-family: 'Poppins', sans-serif; font-weight: 700; padding: 0.9rem 2.5rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 5px 20px rgba(0,0,0,0.25); transition: all 0.4s ease-out; border: none; } .cta-button-antojo:hover { background-position: right center; color: var(--cta-antojo-button-hover-text); transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 25px color-mix(in srgb, var(--cta-antojo-button-hover-bg) 50%, black); } .cta-button-antojo i { transition: transform 0.3s ease; } .cta-button-antojo:hover i { transform: rotate(10deg) scale(1.1); } /* --- FIN ESTILOS PÁGINA GASTRONOMÍA --- */ /* --- NUEVOS ESTILOS PARA EL CTA "AVENTURA" (PREGUNTAS-FRECUENTES.PHP) --- */ .cta-faq-aventura-custom { min-height: 55vh; /* Ajustar altura si es necesario */ display: flex; align-items: center; justify-content: center; background-color: #1A2930; /* Color de fondo oscuro de respaldo */ /* Degradado personalizado: Verde azulado oscuro a azul medianoche */ background-image: linear-gradient(135deg, #08415C 0%, #132E32 100%); color: #F0F4F8; /* Texto principal casi blanco */ position: relative; /* Para los elementos de fondo y el overlay */ /* py-20 md:py-28 text-white text-center overflow-hidden ya están en HTML */ } /* El overlay de degradado que ya tienes en el HTML puede ser suficiente, o puedes quitarlo si el fondo principal ya es oscuro y contrastante. Si lo mantienes: #cta-faq-aventura .absolute.inset-0.bg-gradient-to-br { opacity: 0.7; // Ajusta esta opacidad } */ .cta-faq-background-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .cta-faq-background-shapes .shape { position: absolute; background-color: rgba(173, 216, 230, 0.07); /* Azul claro muy tenue para las formas */ border-radius: 30%; animation: float-shapes 20s ease-in-out infinite alternate; will-change: transform, opacity; } .cta-faq-background-shapes .shape1 { width: 150px; height: 150px; top: 10%; left: 5%; animation-delay: 0s; } .cta-faq-background-shapes .shape2 { width: 200px; height: 200px; top: 60%; left: 80%; animation-delay: -4s; background-color: rgba(100, 180, 220, 0.05); } .cta-faq-background-shapes .shape3 { width: 100px; height: 100px; top: 75%; left: 15%; animation-delay: -8s; } .cta-faq-background-shapes .shape4 { width: 180px; height: 180px; top: 5%; left: 70%; animation-delay: -12s; background-color: rgba(100, 180, 220, 0.06); } .cta-faq-background-shapes .shape5 { width: 120px; height: 120px; top: 40%; left: 30%; animation-delay: -16s; } @keyframes float-shapes { 0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); opacity: 0.03; } 25% { transform: translateY(-25px) translateX(20px) rotate(50deg) scale(1.15); opacity: 0.08; } 50% { transform: translateY(15px) translateX(-25px) rotate(100deg) scale(0.95); opacity: 0.05; } 75% { transform: translateY(-20px) translateX(15px) rotate(145deg) scale(1.1); opacity: 0.1; } 100% { transform: translateY(0px) translateX(0px) rotate(180deg) scale(1); opacity: 0.03; } } #cta-faq-aventura .container { /* position: relative; z-index: 10; (o z-20 si el overlay tiene z-10) */ } #cta-faq-aventura .fa-compass { color: var(--accent-color); /* Amarillo para el icono de la brújula */ text-shadow: 0 0 20px var(--accent-color), 0 0 30px var(--logo-orange); /* Resplandor más intenso */ animation: compass-spin-pulse 5s infinite ease-in-out; } @keyframes compass-spin-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 25% { transform: scale(1.12) rotate(15deg); opacity: 1; } 50% { transform: scale(1) rotate(-5deg); opacity: 0.9; } 75% { transform: scale(1.08) rotate(-15deg); opacity: 1; } } #cta-faq-aventura h2 { color: var(--logo-white); /* Texto blanco */ text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Sombra para destacar */ } #cta-faq-aventura p { color: var(--slate-200, #e2e8f0); /* Un blanco ligeramente grisáceo */ line-height: 1.75; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .cta-button-faq-primary { background-color: var(--accent-color); color: #0d3a4c; font-family: 'Poppins', sans-serif; font-weight: 700; padding: 0.9rem 2.2rem; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 5px 15px rgba(0,0,0,0.25), inset 0 -2px 0px rgba(0,0,0,0.2); /* Sombra y un ligero bisel inferior */ transition: all 0.3s ease; border: none; } .cta-button-faq-primary:hover { background-color: var(--accent-color); /* Amarillo al pasar el cursor */ color: #0d3a4c; /* Texto azul oscuro */ transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 25px rgba(255,221,0,0.4), inset 0 -1px 0px rgba(0,0,0,0.1); } .cta-button-faq-secondary { background-color: transparent; color: var(--logo-white); border: 2px solid var(--logo-white); font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0.9rem 2.2rem; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease; } .cta-button-faq-secondary:hover { background-color: rgba(255, 255, 255, 0.15); border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-3px); } .cta-button-faq-primary i, .cta-button-faq-secondary i { transition: transform 0.3s ease; } .cta-button-faq-primary:hover i, .cta-button-faq-secondary:hover i { transform: translateX(4px) rotate(5deg); } /* --- FIN ESTILOS CTA FAQ AVENTURA --- */ /* --- NUEVOS ESTILOS PARA PÁGINA DE ACCESIBILIDAD (accesibilidad.php) --- */ .accesibilidad-page-v2 { /* Estilos generales para la página si son necesarios */ } /* Hero Section Personalizado para Accesibilidad */ .hero-accesibilidad-custom { /* py-20 md:py-32 relative text-center animate-fade-in ya están en HTML */ /* El background-image se define inline en el PHP */ /* Aquí definimos el degradado que va encima de la imagen de fondo (si la hubiera) o como fondo principal */ } .hero-accesibilidad-bg-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(135deg, var(--accesibilidad-hero-bg-start) 0%, var(--accesibilidad-hero-bg-end) 100%); opacity: 0.85; /* Ajusta la opacidad del degradado si hay una imagen de fondo debajo */ z-index: 0; /* Detrás del contenido del hero */ } #hero-accesibilidad .container { /* El div.container dentro del hero */ /* position: relative; z-index: 10; ya están en el HTML */ } #hero-accesibilidad img { /* Imagen del símbolo de accesibilidad */ /* w-24 h-24 md:w-32 md:h-32 mx-auto opacity-90 mb-8 ya están en HTML */ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); /* Sombra para destacar el símbolo */ } #hero-accesibilidad h1 { /* text-4xl sm:text-5xl md:text-6xl ... text-white style="text-shadow..." ya están en HTML */ color: var(--primary-color); /* Cambiar color del título principal a azul oscuro */ text-shadow: 1px 1px 2px rgba(255,255,255,0.5); /* Sombra clara para contraste sobre degradado */ } #hero-accesibilidad p { /* text-lg sm:text-xl md:text-2xl ... text-gray-200 style="text-shadow..." ya están en HTML */ color: var(--text-dark); /* Párrafo en gris oscuro para legibilidad */ opacity: 0.9; text-shadow: none; /* Quitar sombra si el fondo es claro */ } /* Contenido de Accesibilidad */ #contenido-accesibilidad .section-title-underline-center, #contenido-accesibilidad .section-title-underline-left { /* Los estilos para estos subrayados ya existen y deberían aplicarse */ } .accessibility-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 3rem; /* w-12 */ height: 3rem; /* h-12 */ border-radius: 50%; /* rounded-full */ background-color: var(--accesibilidad-icon-bg); /* Color secundario (azul claro) */ color: var(--accesibilidad-icon-color); /* Texto/icono blanco */ margin-bottom: 0.5rem; /* Espacio si el texto va debajo en móvil */ } /* En la columna derecha, la imagen del símbolo ya tiene clases de Tailwind */ #contenido-accesibilidad .lg\:w-2\/5 img { /* w-48 h-48 md:w-64 md:h-64 mx-auto mb-6 object-contain ya están en HTML */ } #contenido-accesibilidad .lg\:w-2\/5 h3 { /* text-xl font-semibold text-primary-color font-poppins mb-2 ya están en HTML */ } #contenido-accesibilidad .lg\:w-2\/5 p { /* text-text-medium font-nunito text-sm ya están en HTML */ } #contenido-accesibilidad .lg\:w-2\/5 .cta-button { /* Clases de Tailwind y .cta-button ya deberían darle estilo */ font-size: 0.875rem; /* text-sm */ } /* CTA Final de la página de accesibilidad */ #cta-accesibilidad-final { /* Si decides añadir un ID específico a esa sección CTA */ /* background-color: var(--primary-color); text-white; ya están en HTML */ } #cta-accesibilidad-final .cta-button.bg-accent-color { /* Estilos específicos si son necesarios */ } #cta-accesibilidad-final .cta-button.bg-white { /* Estilos específicos si son necesarios */ } /* --- FIN ESTILOS PÁGINA ACCESIBILIDAD --- */ /* --- NUEVOS ESTILOS PARA EL HERO DE AGUA-TERMAL.PHP (EFECTO ACUÁTICO) --- */ .hero-agua-termal-custom { background-color: var(--hero-agua-bg-deep-blue); background-image: linear-gradient(to bottom, var(--hero-agua-bg-deep-blue) 0%, var(--hero-agua-bg-mid-blue) 100%); /* Cambiado a linear para un efecto de profundidad más simple */ min-height: 70vh; position: relative; color: var(--hero-agua-text-color); } .hero-agua-termal-animated-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .hero-agua-termal-animated-bg .particle { position: absolute; background-color: var(--hero-agua-bubble-color1); border-radius: 50%; animation: rise-bubbles 10s linear infinite; opacity: 0; box-shadow: inset -3px -3px 6px var(--hero-agua-bubble-highlight), inset 3px 3px 6px rgba(0,0,0,0.05); /* Ajustado el brillo */ } .hero-agua-termal-animated-bg .particle:nth-child(5n+1) { width: 15px; height: 15px; animation-duration: 12s; } .hero-agua-termal-animated-bg .particle:nth-child(5n+2) { width: 25px; height: 25px; background-color: var(--hero-agua-bubble-color2); animation-duration: 18s; animation-delay: -3s; } .hero-agua-termal-animated-bg .particle:nth-child(5n+3) { width: 10px; height: 10px; animation-duration: 10s; animation-delay: -7s; } .hero-agua-termal-animated-bg .particle:nth-child(5n+4) { width: 30px; height: 30px; background-color: var(--hero-agua-bubble-color2); animation-duration: 15s; animation-delay: -10s; } .hero-agua-termal-animated-bg .particle:nth-child(5n+5) { width: 20px; height: 20px; animation-duration: 13s; animation-delay: -5s; } @keyframes rise-bubbles { 0% { transform: translateY(100vh) translateX(0px) scale(0.5); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.4; } 100% { transform: translateY(-100px) translateX(20px) scale(1.2); opacity: 0; } } #hero-agua-termal-v2 .mb-8.text-center svg { color: var(--hero-agua-icon-color); filter: drop-shadow(0 0 15px color-mix(in srgb, var(--hero-agua-icon-color) 60%, transparent)); animation: svg-icon-pulse 3.5s infinite ease-in-out; } @keyframes svg-icon-pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } } /* TÍTULO ANIMADO CON EFECTO AGUA */ #hero-agua-termal-v2 h1 { color: var(--hero-agua-text-color); font-family: 'Poppins', sans-serif; /* Mantenemos Poppins para consistencia, pero más grueso */ font-weight: 800; /* Extrabold */ letter-spacing: -0.02em; /* Ligeramente más junto */ text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 15px rgba(var(--logo-light-blue-rgb, 0, 174, 239), 0.3); /* Sombra y un ligero resplandor azul */ position: relative; /* Para el pseudo-elemento de la onda */ display: inline-block; /* Para que el ::after se ajuste al texto */ padding-bottom: 5px; /* Espacio para la onda */ /* Animación de onda de texto */ animation: text-wave 4s ease-in-out infinite alternate; } /* Definir --logo-light-blue-rgb si no existe para el text-shadow */ :root { --logo-light-blue-rgb: 0, 174, 239; /* Valores RGB de tu --logo-light-blue */ } /* Animación de onda para el texto */ @keyframes text-wave { 0% { transform: translateY(0px); text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 15px rgba(var(--logo-light-blue-rgb), 0.3); } 50% { transform: translateY(-3px); /* Sube un poco */ text-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 25px rgba(var(--logo-light-blue-rgb), 0.5); /* Sombra y resplandor más intensos */ } 100% { transform: translateY(0px); text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 15px rgba(var(--logo-light-blue-rgb), 0.3); } } #hero-agua-termal-v2 p { color: var(--slate-100, #f1f5f9); line-height: 1.75; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } /* --- FIN ESTILOS HERO AGUA TERMAL --- */ /* --- CTA SOSTENIBILIDAD --- */ /* Fondo animado tipo burbujas flotantes */ .cta-sostenibilidad-custom { background-color: transparent !important; } .cta-sostenibilidad-animated-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: linear-gradient(to bottom right, #e6f5ea, #f0fdf4); /* verde muy claro */ overflow: hidden; pointer-events: none; } .cta-sostenibilidad-animated-bg::before, .cta-sostenibilidad-animated-bg::after { content: ""; position: absolute; width: 200%; height: 200%; background-repeat: no-repeat; background-image: radial-gradient(circle at 20% 20%, rgba(34,197,94,0.15) 10px, transparent 11px), radial-gradient(circle at 70% 30%, rgba(22,163,74,0.2) 15px, transparent 16px), radial-gradient(circle at 40% 80%, rgba(21,128,61,0.2) 12px, transparent 13px), radial-gradient(circle at 80% 70%, rgba(34,197,94,0.1) 18px, transparent 19px); animation: float-bubbles 30s linear infinite; } .cta-sostenibilidad-animated-bg::after { animation-delay: 15s; opacity: 0.6; } @keyframes float-bubbles { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-20%) rotate(360deg); } } /* Botones */ .cta-button-sostenibilidad.primary { background-color: #22c55e; /* Tailwind green-500 */ color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 9999px; transition: background-color 0.3s ease; } .cta-button-sostenibilidad.primary:hover { background-color: #16a34a; /* Tailwind green-600 */ } .cta-button-sostenibilidad.secondary { background-color: white; color: #16a34a; font-weight: 600; padding: 0.75rem 1.5rem; border: 2px solid #16a34a; border-radius: 9999px; transition: background-color 0.3s ease, color 0.3s ease; } .cta-button-sostenibilidad.secondary:hover { background-color: #16a34a; color: white; } /* Animaciones al hacer scroll (debes activar con JS o IntersectionObserver si lo deseas) */ .animate-on-scroll[data-animation="fade-in-up"] { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s forwards; } .animate-on-scroll[data-animation="pop-in"] { opacity: 0; transform: scale(0.8); animation: popIn 1s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @keyframes popIn { to { opacity: 1; transform: scale(1); } } /* --- FIN CTA SOSTENIBILIDAD --- */ /* --- NUEVOS ESTILOS PARA EL HERO DE FAQS --- */ .hero-faq-custom { /* py-28 md:py-40 relative flex items-center justify-center text-center overflow-hidden text-white ya están en HTML */ background-color: var(--hero-faq-bg-start); /* Fallback */ background-image: radial-gradient(circle at center, var(--hero-faq-bg-end) 0%, var(--hero-faq-bg-start) 70%); min-height: 60vh; /* Altura del hero */ } .hero-faq-animated-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; /* Detrás del contenido principal */ } .q-mark-float { position: absolute; font-family: 'Poppins', sans-serif; /* O una fuente más decorativa para los ? */ color: var(--hero-faq-q-mark-float); opacity: 0; /* Inician invisibles, la animación los muestra */ animation: float-q-mark 15s linear infinite; /* El tamaño, top, left y animation-delay se definen inline en el HTML para variedad */ /* Ejemplo de estilos inline que podrías tener: style="top: 10%; left: 15%; font-size: 3rem; animation-delay: 0s;" */ } .q-mark-float.q1 { font-size: 4rem; animation-duration: 18s; } .q-mark-float.q2 { font-size: 2.5rem; animation-duration: 22s; } .q-mark-float.q3 { font-size: 5rem; animation-duration: 16s; opacity: 0.05; } /* Más grande, más sutil */ .q-mark-float.q4 { font-size: 3rem; animation-duration: 20s; } .q-mark-float.q5 { font-size: 4.5rem; animation-duration: 14s; } .q-mark-float.q6 { font-size: 2rem; animation-duration: 24s; opacity: 0.07;} .q-mark-float.q7 { font-size: 3.5rem; animation-duration: 19s; } @keyframes float-q-mark { 0% { transform: translateY(20px) translateX(0px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } /* Aparece */ 25% { transform: translateY(-15px) translateX(10px) rotate(15deg); } 50% { transform: translateY(10px) translateX(-15px) rotate(-10deg); opacity: 0.8; } 75% { transform: translateY(-10px) translateX(5px) rotate(10deg); } 90% { opacity: 0.1; } /* Comienza a desaparecer */ 100% { transform: translateY(20px) translateX(0px) rotate(0deg); opacity: 0; } } .hero-faq-main-icon-container { /* mb-8 animate-on-scroll data-animation="pop-in" ya están en HTML */ /* Estilos adicionales si son necesarios */ } .hero-faq-main-q-mark { font-family: 'Poppins', serif; /* Una fuente serifada con carácter para el ? principal */ font-size: 7rem; /* text-8xl o 9xl */ line-height: 1; font-weight: 900; /* extrabold o black */ color: var(--hero-faq-q-mark-main); text-shadow: 0 0 15px color-mix(in srgb, var(--hero-faq-q-mark-main) 50%, transparent), 0 0 25px color-mix(in srgb, var(--hero-faq-q-mark-main) 30%, transparent), 0 2px 3px rgba(0,0,0,0.3); display: inline-block; animation: main-q-mark-pulse 3s infinite ease-in-out; } @keyframes main-q-mark-pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } } #hero-faq-innovative .relative.z-10 h1 { /* text-4xl sm:text-5xl md:text-6xl ... text-white ... style="text-shadow..." ya están en HTML */ color: var(--hero-faq-text-color); margin-top: 1rem; /* Espacio después del ? grande */ } #hero-faq-innovative .relative.z-10 p { /* text-lg sm:text-xl md:text-2xl ... text-gray-200 ... style="text-shadow..." ya están en HTML */ color: var(--slate-200, #e2e8f0); max-width: 600px; /* Limitar ancho del párrafo */ } /* Animación de entrada para el contenido del hero (si se usa data-animation) */ /* Estas son animaciones de ejemplo, puedes crear las tuyas o usar las de animate.css si la tienes */ [data-animation="pop-in"].is-visible { animation: pop-in-effect 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes pop-in-effect { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } [data-animation="fade-in-up"].is-visible { animation: fade-in-up-effect 0.8s ease-out forwards; } @keyframes fade-in-up-effect { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* --- FIN ESTILOS HERO FAQ --- */ /* --- NUEVOS ESTILOS PARA EL HERO DE PLANO-DEL-PARQUE.PHP --- */ .hero-plano-custom { /* py-28 md:py-40 relative flex items-center justify-center text-center overflow-hidden animate-fade-in ya están en HTML */ min-height: 60vh; /* Altura del hero */ background-color: #f0f4f8; /* Un color de fondo muy claro por si la imagen no carga */ } .hero-plano-bg-image-container { /* absolute inset-0 z-0 ya están en HTML */ } .hero-plano-bg-image { width: 100%; height: 100%; object-fit: cover; /* Cubre todo el contenedor */ filter: blur(8px) grayscale(50%) opacity(0.6); /* Efecto de desenfoque, escala de grises y opacidad */ transform: scale(1.1); /* Ligero zoom para evitar bordes por el blur */ } /* El overlay de color primario ya está en el HTML con opacity-80 */ /* #hero-plano-parque .bg-primary-color.opacity-80 { ... } */ .hero-map-icon-container { /* mb-8 animate-on-scroll ya están en HTML */ animation: map-icon-pulse 2.5s infinite ease-in-out; } .hero-map-icon-container i { /* text-6xl md:text-7xl text-accent-color ya están en HTML */ text-shadow: 0 0 15px rgba(255, 221, 0, 0.5), 0 0 25px rgba(255, 221, 0, 0.3); /* Resplandor amarillo */ } @keyframes map-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } #hero-plano-parque h1 { /* text-4xl sm:text-5xl md:text-6xl font-extrabold ... text-white ... style="text-shadow..." ya están en HTML */ color: var(--hero-plano-text-color); } #hero-plano-parque p { /* text-lg sm:text-xl md:text-2xl ... text-gray-200 ... style="text-shadow..." ya están en HTML */ color: var(--slate-100, #f1f5f9); /* Un blanco un poco menos intenso que el título */ } #hero-plano-parque .cta-button { /* bg-accent-color hover:bg-yellow-500 text-primary-color ... ya están en HTML */ /* Puedes añadir más estilos específicos si es necesario */ box-shadow: 0 5px 15px rgba(0,0,0,0.2); } #hero-plano-parque .cta-button:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.3); } /* Estilos para el CTA Final de Plano del Parque (reutilizando algunos de atracciones si es similar) */ .cta-plano-custom { /* Para la sección #cta-plano-detallado */ min-height: 50vh; display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); /* Fallback */ position: relative; } .cta-plano-bg-map-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; z-index: 0; filter: brightness(0.4) blur(3px) grayscale(0.2); /* Oscuro, desenfocado y ligeramente desaturado */ transform: scale(1.05); opacity: 0.7; /* Hacer la imagen de fondo más sutil */ } /* El overlay de degradado ya está en el HTML:
Asegúrate que la opacidad (ej. /90, /80) sea la deseada. */ .cta-plano-floating-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 5; /* Entre el fondo y el overlay de color */ } .cta-map-float-icon { position: absolute; color: var(--logo-white); /* Iconos blancos */ opacity: 0.1; /* Muy sutiles */ animation: floating-map-elements 20s linear infinite alternate; } .cta-map-float-icon:nth-child(even) { animation-duration: 25s; animation-direction: alternate-reverse; } @keyframes floating-map-elements { 0% { transform: translateY(5px) translateX(-5px) rotate(-10deg) scale(0.95); opacity: 0.05;} 50% { transform: translateY(-10px) translateX(10px) rotate(10deg) scale(1.05); opacity: 0.15;} 100% { transform: translateY(5px) translateX(-5px) rotate(-10deg) scale(0.95); opacity: 0.05;} } #cta-plano-detallado .fa-route { /* Icono principal del CTA */ color: var(--cta-plano-final-icon-color); /* Amarillo */ text-shadow: 0 0 20px var(--cta-plano-final-icon-color); } #cta-plano-detallado h2 { color: var(--cta-plano-final-text-color); } #cta-plano-detallado p { color: var(--slate-100, #f1f5f9); line-height: 1.7; } .cta-button-plano-primary { background-color: var(--cta-plano-button-primary-bg); color: var(--cta-plano-button-primary-text); /* ... (otros estilos de botón primario como en CTA atracciones) ... */ padding: 0.8rem 2rem; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Poppins', sans-serif; font-weight: 700; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; border: 2px solid transparent; } .cta-button-plano-primary:hover { background-color: color-mix(in srgb, var(--cta-plano-button-primary-bg) 90%, black); transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 20px color-mix(in srgb, var(--cta-plano-button-primary-bg) 40%, black); } .cta-button-plano-secondary { background-color: var(--cta-plano-button-secondary-bg); color: var(--cta-plano-button-secondary-text); border: 2px solid var(--cta-plano-button-secondary-text); /* ... (otros estilos de botón secundario como en CTA atracciones) ... */ padding: 0.8rem 2rem; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Poppins', sans-serif; font-weight: 600; transition: all 0.3s ease; } .cta-button-plano-secondary:hover { background-color: rgba(255, 255, 255, 0.15); border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-3px); } /* --- FIN ESTILOS HERO PLANO DEL PARQUE --- */ /* --- ESTILOS PARA EL HERO DE TARIFAS.PHP (ESTILO TICKET MEJORADO) --- */ .hero-tarifas-ticket-custom { background-color: var(--hero-tarifas-bg-start, #2c3e50); background-image: linear-gradient(145deg, var(--hero-tarifas-bg-start, #2c3e50) 0%, var(--hero-tarifas-bg-end, #3498db) 100%); min-height: auto; /* Se ajustará al contenido en móvil */ padding: 2rem 1rem; /* Padding para móviles */ display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { /* md breakpoint */ .hero-tarifas-ticket-custom { min-height: 70vh; padding-top: 3rem; padding-bottom: 3rem; } } @media (min-width: 1024px) { /* lg breakpoint */ .hero-tarifas-ticket-custom { padding-top: 4rem; padding-bottom: 4rem; } } .hero-tarifas-bg-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .bg-icon-float { position: absolute; color: var(--hero-tarifas-decorative-icon-color, rgba(255,255,255,0.07)); opacity: 0.5; animation: floating-promo-icons 20s ease-in-out infinite alternate; } .bg-icon-float:nth-child(odd) { animation-direction: alternate-reverse; } @keyframes floating-promo-icons { 0% { transform: translateY(0px) translateX(0px) rotate(-5deg) scale(0.9); opacity: 0.3; } 25% { transform: translateY(-20px) translateX(15px) rotate(3deg) scale(1); opacity: 0.6; } 50% { transform: translateY(15px) translateX(-15px) rotate(8deg) scale(0.95); opacity: 0.4; } 75% { transform: translateY(-15px) translateX(20px) rotate(-6deg) scale(1.05); opacity: 0.7; } 100% { transform: translateY(0px) translateX(0px) rotate(-5deg) scale(0.9); opacity: 0.3; } } .ticket-container { display: flex; flex-direction: column; /* Por defecto apilado para móviles */ background-color: var(--hero-tarifas-ticket-bg, #fdfdfd); color: var(--hero-tarifas-ticket-text, #1a2b41); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); max-width: 720px; width: 95%; /* Ocupa casi todo el ancho en móvil, pero permite centrado */ margin: 1rem auto; /* Centrado y con margen vertical */ overflow: hidden; position: relative; } /* Muescas semicirculares (solo para desktop) */ .ticket-container::before, .ticket-container::after { content: ''; position: absolute; background-color: var(--hero-tarifas-bg-start); /* Color del fondo de la sección hero */ width: 24px; height: 24px; border-radius: 50%; z-index: 1; display: none; /* Oculto por defecto, se muestra en desktop */ } .ticket-left-panel { padding: 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; border-bottom: 2px dashed var(--hero-tarifas-ticket-border-color, #cccccc); /* Línea divisoria abajo en móvil */ } .ticket-right-panel { background-color: var(--hero-tarifas-ticket-accent-bg, #00AEEF); color: var(--hero-tarifas-ticket-accent-text, #FFFFFF); padding: 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; width: 100%; min-height: 200px; /* Altura mínima para la parte celeste en móvil */ } /* Estilos para Desktop (md y superior) */ @media (min-width: 768px) { .ticket-container { flex-direction: row; /* Lado a lado en desktop */ width: 100%; /* Ocupa el max-width: 720px */ } .ticket-container::before, /* Mostrar muescas en desktop */ .ticket-container::after { display: block; } .ticket-container::before { top: -12px; left: calc(65% - 12px); /* Ajustado al ancho del panel izquierdo */ } .ticket-container::after { bottom: -12px; left: calc(65% - 12px); /* Ajustado al ancho del panel izquierdo */ } .ticket-left-panel { width: 65%; padding: 2rem; border-right: 2px dashed var(--hero-tarifas-ticket-border-color, #cccccc); border-bottom: none; text-align: left; } .ticket-right-panel { width: 35%; padding: 2rem 1.5rem; border-top: none; min-height: auto; /* Resetear min-height */ } .ticket-header-main { text-align: left; } .ticket-header-main img { margin-left: 0; } .ticket-body-main { text-align: left; } .ticket-cta-button { align-self: flex-start; } .ticket-title-main { font-size: 2rem; } .ticket-description-main { font-size: 0.95rem; } .ticket-icon-placeholder i { font-size: 3rem; margin-bottom: 0;} .ticket-barcode-placeholder { height: 50px; margin-top: auto; margin-bottom: 0.5rem; } .ticket-info-block.hide-on-mobile { display: block; } } .ticket-body-main { flex-grow: 1; display: flex; flex-direction: column; text-align: center; } .ticket-title-main { color: var(--primary-color); font-size: 1.8rem; line-height: 1.2; margin-bottom: 0.75rem; } .ticket-description-main { font-size: 0.9rem; line-height: 1.6; color: var(--text-medium); margin-bottom: 1.5rem; flex-grow: 1; } .ticket-cta-button { background-color: var(--hero-tarifas-cta-hover-bg); color: var(--hero-tarifas-cta-hover-text); font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0.7rem 1.25rem; border-radius: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; box-shadow: 0 3px 8px rgba(0,0,0,0.1); transition: all 0.25s ease; border: none; align-self: center; } .ticket-cta-button:hover { background-color: var(--hero-tarifas-cta-hover-bg); color: var(--hero-tarifas-cta-hover-text); transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.15); } .ticket-cta-button i { transition: transform 0.25s ease; margin-right: 0.5rem;} .ticket-cta-button:hover i { transform: translateX(3px); } .ticket-icon-placeholder i { color: var(--hero-tarifas-ticket-accent-text); opacity: 0.8; font-size: 2.5rem; margin-bottom: 1rem;} .ticket-info-block { margin-bottom: 1rem; } .ticket-info-block:last-child { margin-bottom: 0; } .ticket-info-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.075em; opacity: 0.7; margin-bottom: 0.1rem; } .ticket-info-value { display: block; font-size: 1.1rem; font-weight: 700; } .ticket-barcode-placeholder { width: 80%; height: 40px; background: repeating-linear-gradient( to right, var(--hero-tarifas-ticket-accent-text) 0, var(--hero-tarifas-ticket-accent-text) 1.5px, transparent 1.5px, transparent 3px ); opacity: 0.6; margin-top: 1rem; margin-bottom: 1rem; } .ticket-info-block.hide-on-mobile { display: none; } /* --- FIN ESTILOS HERO TARIFAS --- */ /* --- NUEVOS ESTILOS PARA EL HERO DE CONTACTO.PHP --- */ .hero-contacto-custom { /* py-28 md:py-40 relative flex items-center justify-center text-white animate-fade-in overflow-hidden ya están en HTML */ min-height: 60vh; /* Altura mínima para el hero */ background-color: var(--primary-color); /* Color de fondo base si el degradado no se ve o mientras carga */ } .hero-contacto-animated-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; /* Importante para que las burbujas no causen scroll */ z-index: 0; /* Detrás del overlay de degradado y del contenido */ } /* Estilos para las burbujas animadas */ .hero-contacto-animated-bg .bubble { position: absolute; background-color: rgba(255, 255, 255, 0.1); /* Color de las burbujas, muy sutil */ border-radius: 50%; animation: hero-bubbles-float 20s linear infinite; /* El tamaño y la posición inicial se establecen con JS */ } .hero-contacto-animated-bg .bubble:nth-child(2n) { animation-duration: 25s; background-color: rgba(255, 255, 255, 0.08); } .hero-contacto-animated-bg .bubble:nth-child(3n) { animation-duration: 15s; animation-direction: alternate; } .hero-contacto-animated-bg .bubble:nth-child(4n) { background-color: rgba(var(--logo-yellow-rgb, 255, 221, 0), 0.1); /* Usar variable si existe, o color directo */ } @keyframes hero-bubbles-float { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 25% { opacity: 1; } 50% { transform: translateY(-30px) translateX(20px) scale(1.1); opacity: 0.8; } 75% { opacity: 0.5; } 100% { transform: translateY(30px) translateX(-20px) scale(0.9); opacity: 0; } } /* El div con la clase .absolute.inset-0.bg-gradient-to-br... ya está en el HTML para el overlay */ /* Asegurarse que el z-index del contenido sea mayor que el del fondo animado y el overlay */ #hero-contacto .relative.z-10 { /* Las clases de Tailwind ya manejan esto, pero podrías forzarlo si es necesario */ /* z-index: 10; */ } #hero-contacto .fa-headset { /* text-5xl md:text-6xl text-accent-color mb-6 ya están en HTML */ /* Podríamos añadirle una animación sutil de "pulso" o "brillo" también */ animation: icon-pulse 2.5s infinite ease-in-out; } @keyframes icon-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } } #hero-contacto h1 { /* text-shadow ya está inline */ } #hero-contacto p { /* text-shadow ya está inline */ } .hero-contact-icon-link { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; /* py-3 px-6 */ background-color: rgba(255, 255, 255, 0.15); /* Fondo semitransparente */ color: var(--logo-white); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.5rem; /* rounded-lg */ font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.95rem; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .hero-contact-icon-link:hover { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .hero-contact-icon-link i { margin-right: 0.6rem; /* Espacio entre icono y texto */ font-size: 1.1em; } /* --- FIN ESTILOS HERO CONTACTO --- */ /* --- NUEVOS ESTILOS PARA LA SECCIÓN CTA EN TARIFAS.PHP (#cta-compra-tarifas) --- */ #cta-compra-tarifas { background-color: var(--cta-tarifas-bg-sand); /* Fallback */ background-image: repeating-linear-gradient( /* Patrón de líneas sutil */ 45deg, transparent, transparent 12px, rgba(0, 0, 0, 0.015) 12px, /* Líneas oscuras muy sutiles */ rgba(0, 0, 0, 0.015) 14px ), linear-gradient( /* Degradado principal de izquierda a derecha */ 100deg, /* Ángulo del degradado */ var(--cta-tarifas-bg-sand) 0%, var(--cta-tarifas-bg-water) 100% ); color: var(--cta-tarifas-text-dark); /* Texto principal oscuro para contraste */ position: relative; overflow: hidden; /* Para los iconos de fondo */ padding-top: 4rem; /* Ajustar padding si es necesario */ padding-bottom: 4rem; border-top: 1px solid #D1D5DB; border-bottom: 1px solid #D1D5DB; } .promo-bg-icons-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .promo-bg-icon { position: absolute; color: var(--cta-tarifas-icon-bg); /* Iconos de fondo en azul oscuro */ opacity: 0.06; /* Aún más sutiles para no competir con el texto */ animation: floating-promo-icons 18s ease-in-out infinite alternate; } .promo-bg-icon:nth-child(2n) { animation-duration: 22s; opacity: 0.05; } .promo-bg-icon:nth-child(3n) { animation-duration: 15s; opacity: 0.07; } .promo-bg-icon:nth-child(4n) { animation-duration: 25s; opacity: 0.04; } @keyframes floating-promo-icons { 0% { transform: translateY(0px) translateX(0px) rotate(-5deg) scale(0.9); } 25% { transform: translateY(-15px) translateX(10px) rotate(0deg) scale(1); } 50% { transform: translateY(10px) translateX(-10px) rotate(5deg) scale(0.95); } 75% { transform: translateY(-10px) translateX(15px) rotate(-2deg) scale(1.05); } 100% { transform: translateY(0px) translateX(0px) rotate(-5deg) scale(0.9); } } #cta-compra-tarifas .container { position: relative; /* Para que el contenido esté sobre los iconos de fondo */ z-index: 1; } #cta-compra-tarifas h2 { color: var(--accent-color); text-shadow: 1px 1px 1px rgba(255,255,255,0.3); /* Sombra clara para destacar sobre degradado */ } #cta-compra-tarifas p { line-height: 1.75; color: var(--text-dark); /* Párrafo en un gris oscuro, legible */ opacity: 0.9; } .cta-button-tarifas { background-color: var(--primary-color); /* Botón naranja vibrante */ color: var(--logo-white); /* Texto blanco */ font-family: 'Poppins', sans-serif; font-weight: 700; padding: 0.85rem 2rem; border-radius: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 5px 15px rgba(0,0,0,0.15); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid transparent; /* Para un posible efecto de borde en hover */ } .cta-button-tarifas:hover { /* Mantenemos el mismo color de fondo y texto, solo efecto de transformación y sombra */ background-color: var(--primary-color); color: var(--logo-white); transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 10px rgba(247, 148, 30, 0.5); /* Sombra más pronunciada con el color del botón */ /* border-color: var(--logo-white); /* Opcional: un borde sutil en hover */ } .cta-button-tarifas i { transition: transform 0.3s ease; } .cta-button-tarifas:hover i { transform: rotate(-10deg) scale(1.1); } /* --- FIN ESTILOS CTA TARIFAS --- */ /* --- NUEVOS ESTILOS PARA EL BANNER DE ESTADO DEL PARQUE EN INDEX.PHP --- */ #estado-parque-banner { background-color: var(--banner-gradient-sand); /* Fallback */ background-image: repeating-linear-gradient( /* Patrón de líneas sutil */ 135deg, /* Ángulo diferente para el patrón */ transparent, transparent 10px, rgba(0, 0, 0, 0.01) 10px, /* Líneas oscuras muy sutiles sobre fondo claro */ rgba(0, 0, 0, 0.01) 11px ), linear-gradient( /* Degradado principal de izquierda a derecha */ to right, var(--banner-gradient-light-gray) 0%, var(--banner-gradient-sand) 50%, var(--banner-gradient-turquoise) 100% ); color: var(--banner-text-color); /* Texto principal oscuro */ position: relative; border-top: 1px solid #D1D5DB; /* Tailwind gray-300 */ border-bottom: 1px solid #D1D5DB; /* py-6 md:py-8 shadow-lg ya están en el HTML */ } #estado-parque-banner .estado-parque-content .text-sm.font-nunito { /* Para la fecha */ color: var(--text-medium); /* Un gris medio para la fecha */ opacity: 0.9; font-weight: 500; } #estado-parque-banner .estado-parque-content .text-2xl.font-poppins.font-bold { /* Para "ABIERTO HOY" / "CERRADO HOY" */ line-height: 1.2; /* El color se define dinámicamente en el PHP. Asegurarse que .text-success-color y .text-red-500 tengan buen contraste. .text-primary-color para "CONSULTAR" también debe contrastar. */ } /* Colores de estado sobre el nuevo fondo claro */ #estado-parque-banner .text-success-color { color: var(--success-color); } /* Verde */ #estado-parque-banner .text-red-500 { color: var(--error-color); } /* Rojo */ #estado-parque-banner .text-primary-color { color: var(--primary-color); } /* Azul oscuro para "CONSULTAR" */ #estado-parque-banner .estado-parque-content .text-md.font-nunito { /* Para el horario */ color: var(--text-dark); /* Texto del horario más oscuro */ font-size: 1.1rem; font-weight: 600; /* Más peso para el horario */ } /* Estilos para el botón del banner */ #estado-parque-banner .cta-button { text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 3px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.08); border: none; } #estado-parque-banner .cta-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); } /* Botón para "ABIERTO HOY" */ #estado-parque-banner .cta-button.bg-accent-color { background-color: var(--logo-green); /* Botón verde */ color: var(--logo-white); } #estado-parque-banner .cta-button.bg-accent-color:hover { background-color: color-mix(in srgb, var(--logo-green) 85%, black); box-shadow: 0 7px 14px rgba(0, 154, 68, 0.25), 0 3px 6px rgba(0, 154, 68, 0.2); } /* Botón para "CERRADO HOY" */ #estado-parque-banner .cta-button.bg-gray-500 { background-color: var(--text-medium); color: var(--logo-white); } #estado-parque-banner .cta-button.bg-gray-500:hover { background-color: var(--text-dark); } /* Botón para "CONSULTAR HORARIOS" */ #estado-parque-banner .cta-button.bg-secondary-color { background-color: var(--secondary-color); /* Azul claro */ color: var(--logo-white); } #estado-parque-banner .cta-button.bg-secondary-color:hover { background-color: color-mix(in srgb, var(--secondary-color) 85%, black); } /* --- FIN ESTILOS BANNER ESTADO PARQUE --- */ /* --- ESTILOS PARA EL HERO DE INDEX.PHP (DESKTOP Y MÓVIL) --- */ #inicio-hero { /* relative h-[calc(100vh-96px)] min-h-[500px] md:min-h-[600px] bg-cover bg-center flex items-center justify-center text-white animate-fade-in overflow-hidden YA ESTÁN EN EL HTML Y SON BUENOS ESTILOS BASE PARA LA SECCIÓN HERO. El bg-cover bg-center en la sección principal puede actuar como fallback si los divs internos no tienen fondo. Podemos añadir un color de fondo de fallback aquí también. */ background-color: var(--primary-color); /* Fallback si no hay imagen/video */ } /* Contenedor para el fondo de video de YouTube (común para desktop y fallback móvil) */ .youtube-video-background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; background-color: #000; /* Fondo negro mientras carga el video */ } .youtube-hero-iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); pointer-events: none; min-width: 177.77vh; /* (100vh * 16/9) para cubrir en portrait */ min-height: 100vw; /* Para cubrir en landscape */ /* Si el video no es 16:9, estos valores podrían necesitar ajuste o usar la técnica de aspect-ratio de Tailwind */ } /* Contenedor para imagen de fondo estática (común para desktop y móvil si se usa imagen) */ .index-hero-image-bg { /* absolute inset-0 z-0 bg-cover bg-center ya están en el HTML y son manejados por Tailwind */ /* No se necesitan estilos adicionales aquí a menos que quieras un filtro específico */ } /* Estilos específicos para el video local (desktop y móvil) */ #inicio-hero video { /* Apunta a cualquier video dentro del hero */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Asegura que el video cubra todo el contenedor */ z-index: 0; } /* Estilos específicos para la imagen del hero móvil (si se usa una imagen vertical) */ .hero-mobile-image { /* background-position: center center; */ /* Podrías querer ajustar esto para imágenes verticales */ /* background-size: cover; ya está */ } /* El overlay oscuro y el contenido textual ya tienen clases de Tailwind y estilos inline para text-shadow que deberían funcionar bien. El div.hero-content-desktop tiene 'hidden lg:block' El div.hero-content-mobile tiene 'block lg:hidden' El div.hero-content-desktop-responsive-fallback tiene 'lg:hidden' Estas clases de Tailwind manejan la visibilidad. */ /* Asegurar que el contenido textual esté por encima del fondo y el overlay */ #inicio-hero .relative.z-20 { /* Las clases de Tailwind ya manejan esto, pero si hay problemas de solapamiento: */ /* z-index: 20; podría ser necesario si el overlay tiene z-index: 10 */ } /* --- FIN ESTILOS HERO INDEX --- */ /* --- ESTILOS PARA BANNER PROMOCIONAL (INDEX.PHP) --- */ .promo-banner-section { /* Sin estilos específicos aquí por ahora, la imagen ocupa el ancho completo */ /* Podrías añadir un margen superior/inferior si es necesario */ /* margin-top: 1rem; */ /* margin-bottom: 1rem; */ line-height: 0; /* Para evitar espacio extra debajo de la imagen si es un enlace */ } .promo-banner-section img { /* w-full h-auto block ya están en el HTML */ /* Podrías añadir un max-height si quieres limitar su altura */ /* max-height: 250px; */ /* object-fit: cover; */ /* Si usas max-height */ } /* --- FIN ESTILOS BANNER PROMOCIONAL --- */ .header-main { position: sticky; top: 0; z-index: 40; background-color: rgba(255, 255, 255, 0.98); /* Ligeramente translúcido */ backdrop-filter: blur(10px); /* Efecto moderno de vidrio */ box-shadow: 0 4px 20px -5px rgba(0,0,0,0.05); /* Sombra más suave y difusa */ transition: all 0.3s ease; } .header-bottom-gradient-bar { height: 3px; width: 100%; background-image: linear-gradient(to right, var(--logo-light-blue), var(--logo-green), var(--logo-yellow)); } /* --- Ítems de Navegación Superiores --- */ header nav a.nav-item, header nav button.nav-button-style { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600; /* Un poco más de peso para legibilidad */ color: var(--text-dark); padding: 0.6rem 1rem; border-radius: 9999px; /* Pill shape completo es más moderno que cuadrado */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; position: relative; background-color: transparent; } /* Efecto Hover en Nav Items Superiores */ header nav a.nav-item:hover, header nav button.nav-button-style:hover, .group:hover > .nav-button-style { color: var(--primary-color); background-color: #F0F9FF; /* Fondo muy sutil al hacer hover (azul muy claro) */ } /* Indicador de Activo (Punto en lugar de línea) */ header nav a.nav-item::after, header nav button.nav-button-style::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; background-color: var(--accent-color); border-radius: 50%; transform: translateX(-50%) scale(0); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; } header nav a.nav-item.active::after, header nav button.nav-button-style.active::after { transform: translateX(-50%) scale(1); opacity: 1; bottom: 8px; } /* Rotación del Chevron */ .nav-button-style i { transition: transform 0.3s ease; } .group:hover .nav-button-style i { transform: rotate(180deg); color: var(--accent-color); } /* --- MEGA MENÚ Y DROPDOWNS MODERNIZADOS --- */ .has-mega-menu { position: relative; height: 100%; display: flex; align-items: center; } .mega-menu, .simple-dropdown { display: none; position: absolute; left: 50%; /* Centrado respecto al padre */ transform: translateX(-50%) translateY(15px); /* Centrado + desplazamiento inicial */ top: 100%; width: auto; background-color: #ffffff; /* Sombra moderna: suave, grande y difusa */ box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.05); z-index: 50; border-radius: 16px; /* Bordes mucho más redondeados */ padding: 1.5rem; border: 1px solid rgba(0,0,0,0.04); /* Borde sutilisimo */ opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); } /* Ajustes específicos de ancho */ .mega-menu { min-width: 600px; max-width: 800px; } .simple-dropdown { width: 260px; padding: 0.75rem; left: 0; transform: translateY(15px); } /* Alineado a la izquierda para dropdowns simples */ /* Barra superior decorativa del menú */ .mega-menu::before, .simple-dropdown::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 3px; background-image: linear-gradient(to right, var(--logo-light-blue), var(--logo-green)); border-radius: 0 0 4px 4px; opacity: 0.7; } /* Mostrar Menú al Hover */ .has-mega-menu:hover .mega-menu, .group:hover .simple-dropdown { display: grid; /* O block para simple */ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); /* Movimiento suave hacia arriba */ } .group:hover .simple-dropdown { transform: translateY(0); /* Sin translateX para el simple alineado a izq */ display: block; } /* --- Enlaces dentro del Menú (Lo más importante para el look moderno) --- */ .mega-menu-link { display: flex; align-items: center; padding: 0.75rem 1rem; color: var(--text-medium); border-radius: 8px; /* Botones redondeados */ transition: all 0.2s ease; font-weight: 500; font-size: 0.95rem; border-bottom: none; /* ADIÓS BORDES */ position: relative; } /* Efecto Hover en Sub-enlaces */ .mega-menu-link:hover { background-color: #F3F4F6; /* Gris muy claro */ color: var(--primary-color); padding-left: 1.25rem; /* Desplazamiento sutil a la derecha */ } /* Icono o indicador al hacer hover (opcional, añade un toque pro) */ .mega-menu-link:hover::before { content: ''; position: absolute; left: 0.4rem; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: var(--accent-color); } .mega-menu-link.active-sublink { color: var(--primary-color); font-weight: 700; background-color: #EFF6FF; /* Azul muy muy claro */ } /* Columnas y Grid */ .mega-menu-columns-2 { grid-template-columns: 1.5fr 1fr; gap: 2rem; } .mega-menu-columns-3 { grid-template-columns: 1fr 1fr 1.2fr; gap: 2rem; min-width: 700px; } .mega-menu-column.image-column { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .mega-menu-columns-2 .image-column img, .mega-menu-columns-3 .image-column img { transition: transform 0.5s ease; } .has-mega-menu:hover .image-column img { transform: scale(1.05); /* Zoom suave en la imagen al abrir el menú */ } /* Botón CTA en Nav */ .cta-comprar-tickets { background: linear-gradient(135deg, var(--primary-color), #0284c7); color: #ffffff !important; padding: 0.75rem 1.5rem !important; border-radius: 9999px; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 4px 15px rgba(0, 90, 171, 0.4); /* CORRECCIÓN DE VISIBILIDAD: Oculto por defecto (Móvil) */ display: none !important; align-items: center; justify-content: center; transition: all 0.3s ease; border: none; line-height: 1; white-space: nowrap; } /* MOSTRAR SOLO EN DESKTOP (lg = 1024px) */ @media (min-width: 1024px) { .cta-comprar-tickets { display: inline-flex !important; } } .cta-comprar-tickets:hover { background: linear-gradient(135deg, #004a8f, #0077b6); box-shadow: 0 6px 20px rgba(0, 90, 171, 0.5); transform: translateY(-2px); color: #ffffff !important; } .cta-comprar-tickets i { font-size: 1.1rem; margin-right: 0.5rem; } .cta-comprar-tickets:hover i { transform: rotate(-12deg); } /* Estilos para el Menú Desplegable Simple (Contingentes) */ .simple-dropdown { position: absolute; left: 0; top: calc(100% - 4px); /* Similar al mega-menu para alinearse con la barra del header */ margin-top: 0; width: 250px; border-radius: 0 0 0.375rem 0.375rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); background-color: var(--card-bg); border: 1px solid #e5e7eb; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s, transform 0.2s ease-in-out; z-index: 50; pointer-events: none; overflow: hidden; } /* Si quieres el mismo borde degradado para el simple-dropdown: */ /* .simple-dropdown::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-image: linear-gradient(to right, var(--logo-light-blue), var(--logo-green), var(--logo-yellow)); } .simple-dropdown .py-1 { // El contenedor de los links dentro del dropdown margin-top: 4px; } */ .group:hover .simple-dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto; } .simple-dropdown-link { display: block; padding: 0.8rem 1.2rem; font-size: 0.95rem; font-weight: 500; color: var(--text-dark); transition: background-color 0.2s ease, color 0.2s ease; } .simple-dropdown-link:hover { background-color: var(--section-bg-light); color: var(--primary-color); } /* ... (resto de tus estilos: Menú Móvil, Animaciones, Cards, FAQ, Calendario, Modal, etc. sin cambios) ... */ /* Estilos para Menú Móvil */ .mobile-menu { display: none; border-top: 1px solid #E5E7EB; } .mobile-menu-link { display: block; padding: 0.9rem 1.25rem; font-size: 1rem; font-weight: 600; color: var(--text-dark); border-bottom: 1px solid #f3f4f6; transition: background-color 0.2s ease, color 0.2s ease; } .mobile-menu-link:hover { background-color: var(--section-bg-light); color: var(--primary-color); } .mobile-menu-button-dropdown { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 0.9rem 1.25rem; font-size: 1rem; font-weight: 600; color: var(--text-dark); border-bottom: 1px solid #f3f4f6; transition: background-color 0.2s ease, color 0.2s ease; background-color: transparent; border-top: none; border-left: none; border-right: none; } .mobile-menu-button-dropdown:hover { background-color: var(--section-bg-light); color: var(--primary-color); } .mobile-submenu { display: none; padding-left: 1.25rem; background-color: #f9fafb; } .mobile-submenu-link { display: block; padding: 0.8rem 1rem; font-size: 0.95rem; font-weight: 500; color: var(--text-medium); border-bottom: 1px solid #e5e7eb; transition: background-color 0.2s ease, color 0.2s ease; } .mobile-submenu-link:last-child { border-bottom: none; } .mobile-submenu-link:hover { background-color: var(--section-bg-light); color: var(--primary-color); } /* Botón CTA en Menú Móvil - MEJORADO */ .cta-comprar-tickets-mobile { display: flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; background-color: var(--secondary-color); /* O el color que tenías (era accent-color) */ color: var(--logo-white); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 100%; /* Asegurar que ocupe el ancho si está en un flex-column container */ margin-bottom: 5px; } .cta-comprar-tickets-mobile:hover { background-color: var(--primary-color); /* O el hover que tenías */ color: var(--logo-white); box-shadow: 0 6px 15px rgba(0, 90, 171, 0.4); transform: scale(1.02); } .cta-comprar-tickets-mobile i { font-size: 1.1em; margin-right: 0.5rem; transition: transform 0.25s ease; } .cta-comprar-tickets-mobile:hover i { transform: rotate(-10deg); } .cta-comprar-tickets-mobile > div { display: flex; flex-direction: column; align-items: center; /* Centrar texto si el botón es text-center */ text-align: center; } .cta-comprar-tickets-mobile span { display: block; font-size: 0.75em; line-height: 1.1; font-weight: 500;} .cta-comprar-tickets-mobile span.font-bold { font-size: 0.95em; font-weight: 700;} /* --- ESTILOS PARA FAQ ANIDADO --- */ .faq-category-group { /* Estilos para el contenedor de cada categoría principal */ /* El borde degradado se aplicará al summary */ position: relative; /* Para el pseudo-elemento del borde */ } .faq-category-summary { position: relative; /* Para el pseudo-elemento del borde */ /* padding-bottom: 1.5rem; /* Espacio para el borde degradado si se pone debajo del texto */ } /* Borde degradado para las categorías principales */ .faq-category-summary::after { content: ''; position: absolute; bottom: 0; /* Lo coloca en el borde inferior del summary */ left: 0; width: 100%; height: 4px; /* Grosor del borde degradado */ background-image: linear-gradient(to right, var(--logo-light-blue), var(--logo-green), var(--logo-yellow)); opacity: 0; /* Inicialmente oculto */ transition: opacity 0.3s ease-in-out; } details.faq-category-group[open] > summary.faq-category-summary::after { opacity: 1; /* Mostrar el borde cuando la categoría está abierta */ } details.faq-category-group[open] > summary.faq-category-summary h2 { color: var(--secondary-color); /* Cambiar color del título de categoría cuando está abierta */ } .faq-category-content { /* Estilos para el contenido desplegable de la categoría */ /* background-color: #fdfdfd; /* Un fondo ligeramente diferente si se desea */ } .faq-item-nested { /* Estilos para cada pregunta/respuesta individual */ } .faq-item-nested summary { /* Estilos para la pregunta */ transition: color 0.2s ease; } .faq-item-nested[open] summary { /* Estilos para la pregunta cuando está abierta */ color: var(--primary-color); font-weight: 700; } .faq-answer { font-size: 1rem !important; /* Aumentado y con !important para asegurar que se aplique */ line-height: 1.75 !important; /* Aumentado y con !important */ color: var(--text-dark) !important; /* Color más oscuro para mejor contraste y con !important */ } .faq-answer p { font-size: 1rem !important; /* Asegurar que los párrafos hereden o tengan este tamaño */ line-height: 1.75 !important; color: var(--text-dark) !important; margin-bottom: 1rem; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer a { color: var(--secondary-color); font-weight: 600; text-decoration: underline; transition: color 0.2s ease; } .faq-answer a:hover { color: var(--primary-color); text-decoration: none; } /* Iconos del acordeón anidado */ .faq-item-nested summary .fa-plus, .faq-item-nested summary .fa-minus { transition: opacity 0.2s ease, transform 0.2s ease; } .faq-item-nested[open] summary .fa-plus { opacity: 0; transform: rotate(90deg); } .faq-item-nested[open] summary .fa-minus { opacity: 1; transform: rotate(0deg); } .faq-item-nested summary .fa-minus { opacity: 0; transform: rotate(-90deg); } /* --- ESTILOS PARA EL LAYOUT DE DOS COLUMNAS EN LA PÁGINA DE FAQs --- */ /* El contenedor principal de la sección de FAQs ya usa Tailwind para el layout flex en 'lg': En preguntas-frecuentes.php:
La columna de FAQs:
La columna lateral (aside):