/* ===================================================================== ACUARIUS TRAVEL — Tema visual profesional --------------------------------------------------------------------- Paleta inspirada en el sur del Perú (piedra sillar de Arequipa, terracota del Cañón del Colca, azul profundo del Titicaca, oro andino), no en colores de plantilla genérica. Tipografía: Fraunces (títulos, ya cargada en el ) + Work Sans (texto, ya cargada también). Este archivo se carga al final de la cadena de CSS, así que sus reglas tienen prioridad natural sobre las hojas de estilo originales del theme sin necesitar !important en casi ningún lado. ===================================================================== */ :root { --ink: #1F2A33; --ink-soft: #4B5A63; --paper: #FBF7EF; --paper-alt: #F1EAD9; --paper-line: #E4DAC4; --terracota: #B5482A; --terracota-dark: #8F3620; --terracota-tint: #F3E2DB; --titicaca: #0F6E77; --titicaca-dark: #0B535A; --titicaca-tint: #DDEBEA; --oro: #C99A3E; --oro-dark: #A47E2F; --noche: #16233B; --noche-soft: #223252; --sombra: 0 10px 30px -12px rgba(31, 42, 51, 0.28); --sombra-suave: 0 6px 18px -10px rgba(31, 42, 51, 0.22); --radio: 14px; --radio-chico: 8px; --fuente-titulo: 'Fraunces', Georgia, serif; --fuente-texto: 'Work Sans', -apple-system, sans-serif; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ body { background-color: var(--paper); color: var(--ink); font-family: var(--fuente-texto); -webkit-font-smoothing: antialiased; } h1, h2, h3, .package-name h1 { font-family: var(--fuente-titulo); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); position: relative; padding-bottom: 0.6rem; margin-bottom: 1.5rem; } /* Filete corto en vez de un "eyebrow" en mayúsculas: marca el inicio de cada sección sin gritar. */ h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--terracota); border-radius: 2px; } .about-us h2::after, .purchase-reason h2::after, #promotional-text h1::after { left: 50%; transform: translateX(-50%); } a { color: var(--terracota); } a:hover { color: var(--terracota-dark); } :focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; } /* --------------------------------------------------------------------- Barra superior + navegación --------------------------------------------------------------------- */ .upper-bar { background: var(--noche) !important; background-image: none !important; font-family: var(--fuente-texto); font-size: 0.85rem; } .upper-bar span, .upper-bar a, .upper-bar i { color: #E9E4D8 !important; } .upper-bar a:hover { color: var(--oro) !important; } .navbar { background-color: var(--paper) !important; box-shadow: 0 1px 0 var(--paper-line); } .navbar-brand img { filter: none; } .navbar-light .navbar-nav .nav-link { color: var(--ink) !important; font-family: var(--fuente-texto); font-weight: 500; position: relative; padding: 0.6rem 0.9rem !important; } .navbar-light .navbar-nav .nav-link::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem; height: 2px; background: var(--terracota); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link.activo::after { transform: scaleX(1); } .activado { background: var(--terracota-tint) !important; } .navbar-nav .dropdown-toggle { background-color: transparent !important; } .navbar-nav .dropdown-menu { border: none; box-shadow: var(--sombra-suave); border-radius: var(--radio-chico); padding: 0.4rem; margin-top: 0.5rem !important; } .navbar-nav .dropdown-menu .dropdown-item { color: var(--ink) !important; border-radius: 6px; padding: 0.5rem 0.9rem; font-size: 0.95rem; } .navbar-nav .dropdown-menu .dropdown-item:hover { background: var(--terracota) !important; color: #fff !important; } .navbar-toggler i { color: var(--ink) !important; } /* --------------------------------------------------------------------- Portada / carrusel principal --------------------------------------------------------------------- */ #slide { position: relative; overflow: hidden; animation: aparecer 0.7s ease both; } @keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #slide .swiper-slide img { filter: saturate(1.05) contrast(1.02); } /* Degradado suave abajo, por si alguna foto de portada no trae su propio texto/gráfico incrustado -- ayuda a que cualquier imagen futura respire. */ #slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(to top, rgba(22,35,59,0.35), transparent); pointer-events: none; } .swiper-pagination-bullet { background: #fff; opacity: 0.6; } .swiper-pagination-bullet-active { opacity: 1; background: var(--oro); } /* --------------------------------------------------------------------- "Principales destinos turísticos" -- estilo postal --------------------------------------------------------------------- */ .contenedor-producto-destino.borde { position: relative; border: none; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-suave); transition: box-shadow 0.25s ease, transform 0.25s ease; } .contenedor-producto-destino.borde:hover { box-shadow: var(--sombra); transform: translateY(-3px); } .contenedor-producto-destino.borde figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; } .contenedor-producto-destino.borde figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .contenedor-producto-destino.borde:hover figure img { transform: scale(1.06); } .contenedor-producto-destino .info-destino-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem 1rem 0.9rem; background: linear-gradient(to top, rgba(22,35,59,0.85), rgba(22,35,59,0)); } .contenedor-producto-destino .info-destino-footer h5 a { color: #fff; font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.15rem; } .contenedor-producto-destino .info-destino-footer i { color: var(--oro); transition: transform 0.25s ease; } .contenedor-producto-destino.borde:hover .info-destino-footer i { transform: translateX(4px); } .contenedor-producto-destino.tipo-paquete h2 { margin-bottom: 0.4rem; } .contenedor-producto-destino.tipo-paquete p { color: var(--ink-soft); } /* --------------------------------------------------------------------- Tarjetas de paquete (listado, ficha, "lo más visitado") --------------------------------------------------------------------- */ .contenedor-producto.borde { border: 1px solid var(--paper-line); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-suave); transition: box-shadow 0.25s ease, transform 0.25s ease; background: #fff; } .contenedor-producto.borde:hover { box-shadow: var(--sombra); transform: translateY(-3px); } .contenedor-producto.borde figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; position: relative; } .contenedor-producto.borde figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .contenedor-producto.borde:hover figure img { transform: scale(1.06); } .info-producto-footer { padding: 0.25rem 1.1rem 1.1rem; } /* Etiqueta de tipo de servicio: un color por tipo, con función real (identificar Tour/Paquete/Circuito), no solo decoración. */ .info-producto-footer .paquete { margin-top: -1.1rem; position: relative; z-index: 2; } .info-producto-footer .paquete small { display: inline-block; background: var(--terracota); color: #fff; font-family: var(--fuente-texto); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.35rem 0.9rem; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(0,0,0,0.35); } .info-producto-footer h4 a { color: var(--ink); font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.05rem; line-height: 1.3; } .info-producto-footer h4 a:hover { color: var(--terracota); } .info-producto-footer .dias i { color: var(--titicaca); } .info-producto-footer .servicios-item i { color: var(--ink-soft); font-size: 0.95rem; } .info-producto-footer hr { border-top: 1px solid var(--paper-line); opacity: 1; } .info-producto-footer .precio h2 { margin-bottom: 0; } .info-producto-footer .precio small { font-family: var(--fuente-titulo); font-weight: 600; color: var(--terracota); font-size: 1.15rem; } .info-producto-footer .precio .precioconoferta { color: var(--ink-soft) !important; font-family: var(--fuente-texto); font-weight: 400; font-size: 0.85rem !important; } .btn-success-view-product { background: var(--noche); color: #fff !important; border: none; border-radius: 999px; padding: 0.45rem 1.3rem; font-weight: 600; font-size: 0.82rem; transition: background 0.2s ease, transform 0.2s ease; } .btn-success-view-product:hover { background: var(--terracota); transform: translateY(-1px); } /* --------------------------------------------------------------------- Botones generales --------------------------------------------------------------------- */ .btn, .btn-success-template, .btn-info-session, .btn-consult, .btn-pay { border-radius: 999px !important; font-family: var(--fuente-texto); font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .btn-success-template, .btn-info-session { background: var(--terracota) !important; border-color: var(--terracota) !important; color: #fff !important; } .btn-success-template:hover, .btn-info-session:hover { background: var(--terracota-dark) !important; border-color: var(--terracota-dark) !important; transform: translateY(-1px); box-shadow: var(--sombra-suave); } .btn-consult { background: #fff !important; border: 1.5px solid var(--noche) !important; color: var(--noche) !important; } .btn-consult:hover { background: var(--noche) !important; color: #fff !important; } .btn-pay { background: var(--titicaca) !important; border-color: var(--titicaca) !important; color: #fff !important; } .btn-pay:hover { background: var(--titicaca-dark) !important; border-color: var(--titicaca-dark) !important; transform: translateY(-1px); } /* --------------------------------------------------------------------- Secciones institucionales --------------------------------------------------------------------- */ .about-us { background: var(--paper-alt); } .about-us p { color: var(--ink-soft); max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.7; } .newsletter { background: var(--noche); } .container-promotional { color: #fff; } #promotional-text h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); position: relative; display: inline-block; padding-bottom: 0.6rem; } #promotional-text p { color: #C9D1DA; } .newsletter-email input[type="email"] { border: none; border-radius: 999px 0 0 999px; padding: 0.7rem 1.2rem; min-width: 260px; } .newsletter-email .btn-light { border-radius: 0 999px 999px 0 !important; background: var(--oro) !important; color: var(--noche) !important; font-weight: 700; padding: 0.7rem 1.4rem; } .newsletter-email .btn-light:hover { background: var(--oro-dark) !important; } .purchase-reason { background: var(--paper); } .purchase-reason-item i { color: var(--titicaca); background: var(--titicaca-tint); width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; font-size: 1.4rem !important; } .purchase-reason-item h4 { font-family: var(--fuente-titulo); font-size: 1.1rem; } .purchase-reason-item p { color: var(--ink-soft); font-size: 0.92rem; } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .footer { background: var(--noche); color: #C9D1DA; } .footer h5 { font-family: var(--fuente-titulo); color: #fff; } .footer h6 { color: #C9D1DA; } .footer a { color: #C9D1DA; } .footer a:hover { color: var(--oro); } .footer .fa-2x { color: #C9D1DA; transition: color 0.2s ease; } .footer .fa-2x:hover { color: var(--oro); } .footer .credit-cards img { filter: grayscale(0.15); } .final { background: var(--noche-soft); } .final h6, .final a { color: #C9D1DA !important; } .final a:hover { color: var(--oro) !important; } /* --------------------------------------------------------------------- Ficha de producto --------------------------------------------------------------------- */ #infoproducto-details { background: var(--noche); } .package-name h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } .nav-tabs .nav-link { color: var(--ink-soft); border: none; font-weight: 600; } .nav-tabs .nav-link.active { color: var(--terracota); border-bottom: 2px solid var(--terracota); background: transparent; } .bg-total-price { border-color: var(--paper-line) !important; box-shadow: var(--sombra-suave); } .bg-total-price .total-price, .bg-total-price .currency { color: var(--terracota); font-family: var(--fuente-titulo); } /* --------------------------------------------------------------------- Botón de WhatsApp --------------------------------------------------------------------- */ #wa-icon { transition: transform 0.2s ease; } #wa-icon:hover { transform: scale(1.08); } /* Suponiendo que la caja de la imagen del destino tiene una clase contenedora, puedes aplicar un gradiente sutil en la parte inferior */ .tu-clase-tarjeta-destino { position: relative; } .tu-clase-tarjeta-destino::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); z-index: 1; } .tu-clase-tarjeta-destino text, .tu-clase-tarjeta-destino h3 { position: relative; z-index: 2; /* Esto hace que el texto quede por encima del fondo oscuro */ } /* Reemplaza '.card-body-tour' por la clase real que tengan tus tarjetas de tours */ .card-body-tour { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; } /* Aplica esto a la clase que envuelve el precio de los tours */ .clase-precio-tour { font-size: 1.4rem !important; font-weight: bold !important; color: #f37022 !important; /* Ajusta al código hexadecimal de tu naranja */ } /* ========================================================================== DEGRADADO OSCURO COMPLETO Y CORRECCIÓN DE VISIBILIDAD (DESTINOS) ========================================================================== */ /* 1. Forzamos al contenedor principal a permitir elementos absolutos encima */ div.contenedor-productos-destino, .contenedor-productos-destino figure { position: relative !important; overflow: hidden !important; display: block !important; } /* 2. Colocamos la sombra protectora por encima de la foto */ .contenedor-productos-destino figure::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 70% !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%) !important; pointer-events: none !important; z-index: 5 !important; /* Capa intermedia */ } /* 3. Traemos el texto al frente absoluto (Por encima del degradado) */ .info-destino-foto { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 20px 15px !important; z-index: 10 !important; /* Capa superior máxima */ text-align: left !important; background: transparent !important; } /* 4. Estilos de máxima legibilidad para las letras blancas */ .info-destino-foto span, .info-destino-foto a, .info-destino-foto h3 { color: #ffffff !important; font-size: 1.15rem !important; font-weight: 700 !important; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9) !important; /* Sombra negra para las letras */ }