<>
.nav-pills .nav-link.active{
background: none;
border-bottom: solid 2px white;
border-radius: 0px;
color: white;
}
.nav-pills .nav-link{
border-radius: 0px;
border-bottom: solid 2px #888888;
color: #888888;
}
/* Mobile first: vw-100 by default */
.vw-100-mobile {
width: 100vw !Important;
}
.vh-100-mobile{
height: 100vh !Important;
}
/* Remove vw-100 on larger screens (md and up - 768px+) */
@media (min-width: 768px) {
.vw-100-mobile {
width: auto !Important;
}
.vh-100-mobile {
height: auto !Important;
}
}
/* Mobile Navigation Base Styles */
.mobile-nav {
background-color: #1b1b30;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1030;
}
/* Mobile Menu Container */
.mobile-menu-container {
position: fixed;
top: 60px; /* Height of the mobile navbar */
left: 0;
width: 100%;
height: calc(100% - 60px); /* Adjust height to account for navbar */
background-color: #1b1b30;
display: none;
overflow: hidden;
}
/* Panel System */
.mobile-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
background-color: #1b1b30;
}
.mobile-panel.active {
transform: translateX(0);
visibility: visible;
opacity: 1;
}
/* Animation for back navigation */
.mobile-panel.slide-back {
transform: translateX(-100%);
}
.panel-content {
flex: 1 1 auto;
overflow-y: auto;
padding: 1rem 0;
}
/* Secondary panel headers */
.panel-header {
padding: 1rem;
border-bottom: 1px solid rgba(2552552550.1);
display: flex;
align-items: center;
}
/* Toggle menu icon animation */
#toggle-mobile-menu .bi-list,
#toggle-mobile-menu .bi-x-lg {
transition: transform 0.3sopacity 0.3s;
}
#toggle-mobile-menu .bi-list.hidden,
#toggle-mobile-menu .bi-x-lg.hidden {
opacity: 0;
transform: scale(0.5);
position: absolute;
}
#toggle-mobile-menu {
position: relative;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
/* Rest of your CSS remains the same */
/* List Group Styling */
.mobile-menu-container .list-group-item {
background-color: transparent;
border-color: rgba(2552552550.1);
padding: 0.75rem 1rem;
}
.mobile-menu-container .menu-link {
color: white;
text-decoration: none;
font-size: 1.1rem;
display: block;
padding: 0.5rem 0;
}
/* Tab Navigation Styling */
.mobile-menu-container .nav-pills .nav-link {
background: none;
color: rgba(2552552550.6);
border-radius: 0;
border-bottom: 2px solid rgba(2552552550.2);
}
.mobile-menu-container .nav-pills .nav-link.active {
background: none;
color: white;
border-bottom: 2px solid white;
}
/* Zone Items */
.mobile-menu-container .zona-item {
border-bottom: 1px solid rgba(2552552550.1);
}
.mobile-menu-container .zona-subtitle {
font-size: 0.85rem;
}
/* Paisaje Grid */
.mobile-menu-container .paisajes-grid {
display: flex;
flex-direction: column;
}
.mobile-menu-container .paisaje-item {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(2552552550.1);
}
/* Button Styling */
.mobile-menu-container .btn-outline-light {
border-color: rgba(2552552550.3);
}
<>
/* Reset existing mega menu animations */
.mega-dropdown .dropdown-menu {
transform: none !important;
transition: none !important;
}
/* Create overlay container for mega menu */
.mega-menu-overlay {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
width: 100%;
background-color: var(--header-bg);
/* border-top: 1.4px solid var(--mega-menu-border-top);*/
//box-shadow: 0 8px 32px rgba(0000.15);
filter: drop-shadow(0 4px 4px rgba(0000.25));
SVG
z-index: 9997;
overflow: hidden;
/* Initial state - hidden with 0 height */
height: 0;
transition: height 0.3s ease-out;
}
/* Active overlay */
.mega-menu-overlay.active {
/* Will be set dynamically by JavaScript */
z-index: 9999999;
border-top: 1px solid var(--mega-menu-border-top);
}
/* Hide Bootstrap dropdown menus */
.mega-dropdown .dropdown-menu {
display: none !important;
}
/* Content containers for each mega menu */
.mega-menu-content {
position: absolute;
width: 100%;
opacity: 0;
pointer-events: none;
}
/* Active content */
.mega-menu-content.active {
opacity: 1;
pointer-events: auto;
}
.nav-link:focus-visible{
box-shadow:0 0 0 0 rgba(13,110,253,.25) !Important;
}
.nav-link:focus-visible{
}
.site-header .nav-link:hover{
color: #ffc207 !important;
}
<>
/* Card Enhancements for Activity and Imperdible Cards */
/* Common card styling for both actividad-card and imperdible-card */
.actividad-card-header.imperdible-card-header {
display: block;
overflow: hidden;
transition: all 0.3s ease;
}
/* Card background container - holds the image or gradient */
.actividad-card-header .position-relative
.imperdible-card .position-relative {
overflow: hidden;
}
/* Background image or gradient container */
.actividad-card-header .w-100.h-100
.imperdible-card-header .w-100.h-100 {
transition: transform 0.3s ease;
}
/* Hover effect for background image - zoom in */
.actividad-card-header:hover .w-100.h-100
.imperdible-card-header:hover .w-100.h-100 {
transform: scale(1.1);
}
/* Overlay gradient for text contrast */
.actividad-card-header .position-cool::after,
.imperdible-card-header .position-cool::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.5) 60%,
rgba(0,0,0,1) 90%
rgba(0,0,0,1) 100%);
transition: background 0.3s ease;
pointer-events: none; /* Ensures click events pass through */
}
/* Lighter overlay gradient on hover to highlight the image */
.actividad-card-header:hover .position-cool::after,
.imperdible-card-header:hover .position-cool::after {
background: linear-gradient(180deg
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 90%
rgba(0,0,0,1) 100%);
transition: background 0.3s ease;
}
/* Ensure text is always white and readable */
.title-header-card {
color: white;
position: relative;
z-index: 2; /* Ensures text stays above the overlay */
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Additional text shadow for readability */
}
/* Make sure card title container stays above the gradient */
.actividad-card-header .position-absolute,
.imperdible-card-header .position-absolute {
z-index: 2;
}
.selected-menu a{
color: #ffc207 !important;
}
/* Rotate the dropdown arrow to point upward when menu is open */
.dropdown-toggle.arrow-up::after {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
/* Add transition for smooth arrow rotation */
.dropdown-toggle::after {
transition: transform 0.3s ease;
}
/* Optional: Change the color of the arrow when menu is open */
.selected-menu .dropdown-toggle::after {
border-top-color: #ffc207; /* Match the yellow highlight color from your theme */
}
<>
/* ============================
MODULAR HEADER STYLES
============================ */
.page-header {
position: relative;
overflow: hidden;
/* margin-top: 120px; */
}
@media (max-width: 1080px) {
.page-header{
/* margin-top: 60px; */
}
}
.page-header .display-4 {
font-family: var(--font-manrope'Manrope');
font-weight: 700;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.header-subtitle {
font-family: var(--font-family'Inter');
font-size: 1.1rem;
line-height: 1.5;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.header-subtitle p {
margin-bottom: 0.5rem;
}
.header-subtitle p:last-child {
margin-bottom: 0;
}
.last-updated {
font-family: var(--font-family'Inter');
font-size: 0.875rem;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.text-white-50 {
color: rgba(2552552550.7) !important;
}
.text-white-75 {
color: rgba(2552552550.8) !important;
}
/* ============================
ZONE BADGES & PAISAJES STYLES
============================ */
.zone-badges .zone-badge {
display: inline-block;
background-color: var(--Soft-blue#456AEB);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 15px;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 600;
text-transform: lowercase;
transition: all 0.3s ease;
text-shadow: none;
}
.zone-badges .zone-badge:hover {
background-color: var(--Deep-blue#002358);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(691062350.4);
}
.paisajes-list {
font-family: var(--font-family'Inter');
}
.paisajes-label {
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.paisaje-link {
font-size: 0.875rem;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: color 0.3s ease;
}
.paisaje-link:hover {
color: var(--Salmon#FE6565) !important;
}
/* ============================
ZONA-SPECIFIC STYLES
============================ */
.zona-paisajes-list {
font-family: var(--font-family'Inter');
}
.zona-paisajes-list h5 {
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.zona-paisajes-list .badge {
backdrop-filter: blur(10px);
transition: all 0.3s ease;
font-size: 0.8125rem;
font-weight: 500;
}
.zona-paisajes-list .badge:hover {
background: rgba(25135840.9) !important;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(25135840.3);
}
.zona-map-image {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
min-height: 300px;
}
.zona-map-image img {
/* border-radius: 8px;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
border: 2px solid rgba(2552552550.1);*/
}
/* ============================
ITINERARIO-SPECIFIC STYLES
============================ */
.itinerario-header-meta {
font-family: var(--font-family'Inter');
}
.itinerario-duration {
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.destinations-list {
margin-top: 0.5rem;
}
.destinations-ul {
list-: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
}
.destination-item {
position: relative;
font-size: 0.9rem;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.destination-item::before {
content: "•";
color: var(--Salmon#FE6565);
font-weight: bold;
margin-right: 0.5rem;
}
.destination-link {
transition: color 0.3s ease;
font-weight: 500;
}
.destination-link:hover {
color: var(--Salmon#FE6565) !important;
}
/* ============================
BLOG-SPECIFIC STYLES
============================ */
.blog-header-meta {
font-family: var(--font-family'Inter');
}
.blog-meta-item {
font-size: 0.9rem;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.blog-meta-item i {
opacity: 0.8;
}
.blog-activities-list {
text-align: right;
}
.blog-activities-list h6 {
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.blog-activities-list .badge {
font-size: 0.75rem;
padding: 0.4rem 0.6rem;
transition: all 0.3s ease;
}
.blog-activities-list .badge:hover {
background-color: var(--Salmon#FE6565) !important;
transform: translateY(-1px);
}
/* ============================
MAP ICON STYLES
============================ */
.header-map-icon {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
min-height: 200px;
}
.map-icon-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
}
.map-icon-container .bi-geo-alt-fill {
font-size: 3rem;
z-index: 2;
position: relative;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.map-icon-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(2552552550.1);
border-radius: 50%;
border: 2px solid rgba(2552552550.2);
backdrop-filter: blur(10px);
}
/* Background image optimizations */
.page-header[*="background-image"] {
background-attachment: fixed;
}
/* ============================
RESPONSIVE DESIGN
============================ */
@media (max-width: 992px) {
.header-map-icon,
.blog-activities-list,
.zona-map-image {
margin-top: 2rem;
justify-content: center;
text-align: center;
min-height: 100px;
}
.map-icon-container {
width: 80px;
height: 80px;
}
.map-icon-container .bi-geo-alt-fill {
font-size: 2rem;
}
.blog-meta-item {
font-size: 0.85rem;
}
.destinations-ul {
justify-content: center;
}
.itinerario-duration {
text-align: center;
}
.zona-paisajes-list .d-flex {
}
}
@media (max-width: 768px) {
.page-header {
min-height: 50vh !important;
}
.page-header .display-4 {
font-size: 2.5rem;
}
.header-subtitle {
font-size: 1rem;
}
.zone-badges .zone-badge,
.zona-paisajes-list .badge {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
margin-bottom: 0.5rem;
}
.paisajes-list {
font-size: 0.8125rem;
}
.paisajes-label {
display: block;
margin-bottom: 0.5rem;
}
.paisaje-link {
font-size: 0.8125rem;
}
.blog-header-meta {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
}
.blog-meta-item {
font-size: 0.8rem;
}
.destinations-ul {
flex-direction: column;
gap: 0.25rem;
align-items: flex-start;
}
.destination-item {
font-size: 0.85rem;
}
.header-map-icon,
.blog-activities-list,
.zona-map-image {
display: none; /* Hide on mobile for cleaner look */
}
.page-header[*="background-image"] {
background-attachment: scroll; /* Better performance on mobile */
}
.zona-paisajes-list h5 {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.page-header {
min-height: 40vh !important;
}
.page-header .display-4 {
font-size: 2rem;
}
.header-subtitle {
font-size: 0.95rem;
}
.zone-badges .zone-badge,
.zona-paisajes-list .badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
.paisajes-list {
font-size: 0.75rem;
}
.paisaje-link {
font-size: 0.75rem;
}
.blog-meta-item {
font-size: 0.75rem;
}
.destination-item {
font-size: 0.8rem;
}
.zona-paisajes-list h5 {
font-size: 0.9rem;
}
}
/* ============================
ACCESSIBILITY
============================ */
.page-header:focus-within {
outline: 2px solid var(--Soft-blue#456AEB);
outline-offset: 2px;
}
.zone-badges .zone-badge:focus,
.paisaje-link:focus,
.destination-link:focus,
.blog-activities-list .badge:focus,
.zona-paisajes-list .badge:focus {
outline: 2px solid var(--Salmon#FE6565);
outline-offset: 2px;
border-radius: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.zone-badges .zone-badge,
.zona-paisajes-list .badge {
background-color: #0000FF;
border: 2px solid #FFFFFF;
}
.zone-badges .zone-badge:hover,
.zona-paisajes-list .badge:hover {
background-color: #800080;
}
.paisaje-link,
.destination-link {
color: #FFFF00 !important;
}
.paisaje-link:hover,
.destination-link:hover {
color: #FF0000 !important;
}
.last-updated,
.blog-meta-item {
color: #FFFFFF !important;
font-weight: 700;
}
.blog-activities-list .badge {
background-color: #0000FF !important;
border: 2px solid #FFFFFF;
}
.zona-map-image img {
border: 3px solid #FFFFFF;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.zone-badges .zone-badge,
.paisaje-link,
.destination-link,
.blog-activities-list .badge,
.zona-paisajes-list .badge {
transition: none;
}
.zone-badges .zone-badge:hover,
.blog-activities-list .badge:hover,
.zona-paisajes-list .badge:hover {
transform: none;
}
}
/* Print s */
@media print {
.page-header {
min-height: 200px !important;
background: #f8f9fa !important;
color: #000000 !important;
}
.page-header .display-4,
.header-subtitle,
.last-updated,
.paisaje-link,
.destination-link,
.blog-meta-item {
color: #000000 !important;
text-shadow: none !important;
}
.zone-badges .zone-badge,
.blog-activities-list .badge,
.zona-paisajes-list .badge {
background-color: #6c757d !important;
color: #ffffff !important;
}
.header-map-icon,
.blog-activities-list,
.zona-map-image {
display: none;
}
.destinations-ul {
flex-direction: column;
}
}
.paisaje-link:hover {
color: var(--Salmon#FE6565) !important;
text-decoration: underline !important;
}
<>
/* ============================
BREADCRUMB SECTION STYLES
============================ */
.breadcrumb-section {
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
padding: 1rem 0;
}
.custom-breadcrumb .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
font-family: var(--font-family'Inter');
}
.custom-breadcrumb .breadcrumb-item {
color: var(--Gray#4E5567);
text-align: center;
font-family: Manrope;
font-size: 16px;
font-: normal;
font-weight: 400;
line-height: 28px; /* 175% */
}
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: #CBD6E3;
font-weight: 600;
padding: 0 0.5rem;
}
.breadcrumb-link {
color: var(--Gray#4E5567);
text-align: center;
font-family: Manrope;
font-size: 16px;
font-: normal;
line-height: 28px; /* 175% */
text-decoration-line: underline;
text-decoration-: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.breadcrumb-link:hover {
}
.breadcrumb-link.home-link {
color: #6c757d;
}
.breadcrumb-link.home-link:hover {
color: var(--Soft-blue#456AEB);
}
.breadcrumb-item.active .current-page {
color: #495057;
font-weight: 600;
}
/* Home icon styling */
.breadcrumb-link .bi-house {
font-size: 0.875rem;
margin-right: 0.25rem;
}
/* ============================
RESPONSIVE DESIGN
============================ */
@media (max-width: 768px) {
.breadcrumb-section {
padding: 0.75rem 0;
}
.custom-breadcrumb .breadcrumb-item {
font-size: 0.8125rem;
}
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
padding: 0 0.375rem;
}
/* Truncate long breadcrumb items on mobile */
.breadcrumb-link,
.current-page {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: bottom;
}
.breadcrumb-link.home-link {
max-width: none; /* Don't truncate home icon */
}
}
@media (max-width: 576px) {
.custom-breadcrumb .breadcrumb-item {
font-size: 0.75rem;
}
.breadcrumb-link,
.current-page {
max-width: 100px;
}
}
/* ============================
ACCESSIBILITY
============================ */
.breadcrumb-link:focus {
outline: 2px solid var(--Soft-blue#456AEB);
outline-offset: 2px;
border-radius: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.breadcrumb-link {
color: #0000FF;
}
.breadcrumb-link:hover {
color: #800080;
}
.breadcrumb-item.active .current-page {
color: #000000;
font-weight: 700;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.breadcrumb-link {
transition: none;
}
}
/* Print s */
@media print {
.breadcrumb-section {
display: none;
}
}
Ubicado entre el Océano Pacífico y los Andesextendiéndose desde el Desierto de Atacama en el norte hasta la Patagonia y la Antártica en el surChile es un país fascinante que ofrece una diversidad inigualable de paisajes .
En el norte se ubica el desierto más árido del mundo: el Desierto de Atacama conocido por sus paisajes surrealistas y sus cielos despejadosideales para la observación astronómica. Mientrasen la zona centro encontrarás vibrantes ciudades como Santiago la capital del paísy Valparaíso famosa por su arquitectura colorida y su vida cultural animada. Ademáspodrás visitar fértiles valles que producen vinos de renombre mundial.
Al surel país se transforma en un paraíso natural con bosqueslagos y glaciares. La Patagonia es famosa por sus impresionantes montañascon parques nacionales como Torres del Paine y otras áreas protegidas que ofrecen un sinfín de actividades al aire libredesde senderismo hasta navegación . Y en la Antártica podrás explorar un mundo de belleza prístina y silencio sobrecogedor.
A ello se suma una rica herencia cultural que refleja la mezcla de tradiciones indígenas y europeas. Ademásla gastronomía va de la mano con la diversidad geográfica del país con una increíble variedad de platosmariscos y pescados únicosjunto con carnes y vinos excepcionales.
Un destino de gente amable e incontables historias. ¡Chile te espera para tu próximo viaje!
<>
/* ============================
SOBRE CHILE CONTENT STYLES
============================ */
.sobre-chile-content {
font-size: 1rem;
line-height: 1.7;
color: #333;
}
/* Content Text Styling */
.content-text p {
margin-bottom: 1.5rem;
text-align: justify;
}
.content-text p:last-child {
margin-bottom: 0;
}
/* Bold text styling for key highlights */
.content-text strong {
color: #002358;
font-weight: 600;
}
/* Video Container */
.video-container {
background: #000;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-radius: 12px !important;
}
.video-container iframe,
.video-container video {
border-radius: 12px;
}
/* Loading state for video */
/*
.video-container::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%-50%);
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #456AEB;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 1;
pointer-events: none;
}
.video-container iframe {
position: relative;
z-index: 2;
}
@keyframes spin {
0% { transform: translate(-50%-50%) rotate(0deg); }
100% { transform: translate(-50%-50%) rotate(360deg); }
}
*/
/* Hide loading spinner once video loads */
.video-container iframe[src] ~ ::before {
display: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.sobre-chile-content {
font-size: 0.95rem;
}
.content-text p {
text-align: left;
margin-bottom: 1.25rem;
}
.video-container {
border-radius: 8px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
}
@media (max-width: 576px) {
.content-text p {
margin-bottom: 1rem;
}
}
/* Print s */
@media print {
.video-section {
display: none;
}
.content-text p {
text-align: left;
margin-bottom: 0.5rem;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.content-text strong {
color: #000;
background: #ffff00;
padding: 0 2px;
}
.video-container {
border: 2px solid #000;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.video-container::before {
animation: none;
}
}
/* Focus states for accessibility */
.video-container iframe:focus {
outline: 2px solid #456AEB;
outline-offset: 2px;
}
<>
/* ============================
DATOS ÚTILES DETAIL STYLES
============================ */
.datos-utiles-detail {
min-height: 60vh;
}
/* Navigation Sidebar */
.section-nav-link {
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
}
.section-nav-link:hover {
background-color: rgba(691062350.1);
color: var(--Soft-blue#456AEB);
border-color: rgba(691062350.2);
}
.section-nav-link.active {
color: white;
border-left: 10px solid var(--Soft-blue#456AEB);
}
.section-nav-link.active i {
color: white !important;
}
/* Content Cards */
.content-card {
border: 1px solid #e9ecef;
transition: all 0.3s ease;
border-radius: 8px;
}
.content-card:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
/* Tab Styling */
.nav-underline .nav-link {
border-bottom: 2px solid transparent;
color: #6c757d;
padding: 1rem 1.5rem;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-underline .nav-link:hover {
border-bottom-color: rgba(691062350.3);
color: var(--Soft-blue#456AEB);
}
.nav-underline .nav-link.active {
border-bottom-color: var(--Soft-blue#456AEB);
color: var(--Soft-blue#456AEB);
font-weight: 600;
}
.tab-content-wrapper {
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
// border-radius: 8px;
}
/* Section Header */
.section-header .section-icon {
background: linear-gradient(135degvar(--Soft-blue#456AEB) 0%#6c5ce7 100%);
box-shadow: 0 4px 15px rgba(691062350.3);
}
/* Content Typography */
.content-text p {
line-height: 1.7;
margin-bottom: 1rem;
}
.content-text p:last-child {
margin-bottom: 0;
}
.content-text ul,
.content-text ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.content-text li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
/* Alerts */
.alert {
border-radius: 8px;
padding: 1rem 1.25rem;
}
.alert i {
font-size: 1.1rem;
}
/* Video Container */
.video-container {
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border-radius: 12px;
overflow: hidden;
}
/* Responsive Design */
@media (max-width: 992px) {
.section-navigation {
position: static !important;
margin-bottom: 2rem;
}
.section-navigation .nav {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.section-nav-link {
flex: 1;
text-align: center;
min-width: calc(50% - 0.25rem);
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.datos-utiles-detail {
padding: 3rem 0 !important;
}
.section-header .d-flex {
flex-direction: column;
text-align: center;
}
.section-header .section-icon {
margin-bottom: 1rem !important;
margin-right: 0 !important;
}
.nav-underline .nav-link {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.section-nav-link {
min-width: 100%;
font-size: 0.9rem;
}
}
<>
/* ============================
FOOTER STYLES
============================ */
.site-footer {
background-color: var(--Deep-blue#00193E);
}
.bg-deep-blue {
background-color: var(--Deep-blue#00193E) !important;
}
/* Footer Titles */
.footer-title {
font-family: var(--font-manrope'Manrope')sans-serif;
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
/* Footer Links */
.footer-link {
transition: color 0.3s easetransform 0.3s ease;
display: block;
}
.footer-link:hover {
color: var(--Salmon#FE6565) !important;
transform: translateX(5px);
}
/* Footer Contact Icons */
.footer-contact i {
color: var(--Soft-blue#456AEB);
}
/* Social Links */
.social-link {
transition: transform 0.3s easeopacity 0.3s ease;
display: inline-block;
}
.social-link:hover {
transform: translateY(-5px);
opacity: 0.8;
}
.social-icon {
transition: filter 0.3s ease;
}
.social-link:hover .social-icon {
filter: brightness(1.2);
}
/* Legal Links */
.legal-links a {
font-size: 0.9rem;
position: relative;
}
.legal-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
transition: width 0.3s ease;
}
.legal-links a:hover::after {
width: 100%;
}
/* Awards */
.award-logo {
transition: transform 0.3s easeopacity 0.3s easefilter 0.3s ease;
}
.award-item {
position: relative;
overflow: visible;
}
.award-item:hover .award-logo {
transform: scale(1.1);
opacity: 1 !important;
/* Golden/Yellow filter effect for SVGs */
filter: brightness(1.2) sepia(1) saturate(5) hue-rotate(5deg);
animation: sparkle 2.5s ease-in-out infinite;
}
/* Sparkle shimmer effect */
@keyframes sparkle {
0%100% {
filter: brightness(1.2) sepia(1) saturate(5) hue-rotate(5deg);
}
50% {
filter: brightness(1.5) sepia(1) saturate(6) hue-rotate(10deg) drop-shadow(0 0 8px rgba(25521500.8));
}
}
/* Add sparkle particles effect */
//.award-item::before,
//.award-item::after {
// content: '✨';
// position: absolute;
// font-size: 1.2rem;
// opacity: 0;
// pointer-events: none;
// transition: opacity 0.3s ease;
//}
.award-item::before {
top: -10px;
right: -10px;
}
.award-item::after {
bottom: -10px;
left: -10px;
}
.award-item:hover::before,
.award-item:hover::after {
opacity: 1;
animation: twinkle 1s ease-in-out infinite;
}
@keyframes twinkle {
0%100% {
opacity: 0.3;
transform: scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.2) rotate(180deg);
}
}
/* Footer Logo */
.footer-logo {
transition: transform 0.3s ease;
}
.footer-logo:hover {
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 992px) {
.footer-title {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.social-links {
justify-content: start;
}
.awards-container {
justify-content: start !important;
}
.footer-contact li {
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
.site-footer {
padding-top: 2rem !important;
}
.footer-title {
font-size: 1rem;
}
.legal-links {
flex-direction: column !important;
gap: 1rem !important;
}
.awards-container {
margin-top: 1rem;
}
.award-logo {
max-height: 60px !important;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.footer-link,
.social-link,
.award-logo,
.footer-logo {
transition: none;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.footer-link:hover {
text-decoration: underline !important;
}
.border-secondary {
border-color: white !important;
}
}
