/* ========================================
   SANTANDER PARA TODOS - CUSTOM STYLES
   ======================================== */

/* Gotham Rounded Font */
@font-face {
  font-family: 'Gotham Rounded';
  src: url('../fonts/GothamRounded-Medium.eot');
  src: url('../fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GothamRounded-Medium.woff2') format('woff2'),
    url('../fonts/GothamRounded-Medium.woff') format('woff'),
    url('../fonts/GothamRounded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Brand Colors */
:root {
  --brand-blue: #224B86;
  --brand-green: #006838;
  --brand-yellow: #FDC300;
  --brand-black: #000000;
  --brand-white: #ffffff;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Aplicar Gotham Rounded como fuente principal */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-nav,
.btn,
.card-title,
.section-title {
  font-family: 'Gotham Rounded', 'Roboto', sans-serif !important;
}

/* Justificar texto en secciones específicas */
.justified-text {
  text-align: justify;
  line-height: 1.6;
}

/* ========================================
   BRAND COLOR APPLICATIONS
   ======================================== */

/* Primary Brand Colors */
.bg-theme,
.nir-btn {
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
}

.theme1,
.text-red {
  color: var(--brand-blue) !important;
}

.theme {
  color: var(--brand-blue) !important;
  background: transparent !important;
}

.bg-green {
  background-color: var(--brand-green) !important;
  color: var(--brand-white) !important;
}

.text-green {
  color: var(--brand-green) !important;
}

.bg-yellow {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-black) !important;
}

.text-yellow {
  color: var(--brand-yellow) !important;
}

/* ========================================
   NAVIGATION & CONTROLS
   ======================================== */

/* Slider controls - Verde de la marca */
.swiper-button-next,
.swiper-button-prev {
  background-color: var(--brand-green) !important;
  color: var(--brand-white) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: var(--brand-white) !important;
  font-size: 18px !important;
}

/* Back to top button - Verde de la marca */
#back-to-top a {
  background-color: var(--brand-green) !important;
  color: var(--brand-white) !important;
  border-radius: 50% !important;
}

/* ========================================
   SECTION TITLES & TEXT
   ======================================== */

/* Títulos pequeños - Verde de la marca */
.section-title h4,
.mb-1.theme1 {
  color: var(--brand-green) !important;
}

/* Títulos grandes - Texto rojo, no fondo */
.section-title h2 .theme {
  color: var(--brand-blue) !important;
  background: transparent !important;
}

/* Texto especial en verde */
.fw-bold.theme {
  color: var(--brand-green) !important;
  background: transparent !important;
}

/* ========================================
   CARDS & ICONS
   ======================================== */

/* Iconos de cards - Rojo con fondo blanco */
.why-us-icon i,
.why-us-item .why-us-icon i {
  color: var(--brand-blue) !important;
  background: var(--brand-white) !important;
  border: 2px solid var(--brand-blue) !important;
  border-radius: 50%;
  padding: 15px;
  transition: all 0.3s ease;
}

/* Hover de iconos - Verde de la marca */
.why-us-item:hover .why-us-icon i {
  background: var(--brand-green) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-green) !important;
}

/* Texto final de cards - Verde de la marca */
.why-us-item p.mb-0.theme {
  color: var(--brand-green) !important;
  background: transparent !important;
}

/* Iconos del directorio - Fondo blanco con color rojo */
.icon-box i,
.category-icon i {
  background: var(--brand-white) !important;
  color: var(--brand-blue) !important;
  border: 2px solid var(--brand-blue) !important;
}

/* Todos los iconos - Fondo blanco con color rojo */
.icon,
.fa,
.fab,
.fas,
.far {
  background: var(--brand-white) !important;
  color: var(--brand-blue) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Botones con color #17233e - Verde de la marca */
.nir-btn-black,
.btn-dark,
[style*="#17233e"] {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: var(--brand-white) !important;
}

.nir-btn-black:hover {
  background-color: #005530 !important;
  border-color: #005530 !important;
}

.nir-btn:hover {
  background-color: #c5050f !important;
}

.progress-bar.bg-theme {
  background-color: var(--brand-blue) !important;
}

/* ========================================
   DESTINATIONS & ROUTES
   ======================================== */

/* Nombres de lugares - Amarillo de la marca */
.trend-content-title h5 a.theme1,
.trend-content h5 a.theme1,
.trend-content-title h5 a,
.trend-content h5 a {
  color: var(--brand-yellow) !important;
}

/* Títulos en grids de destinos - Verde */
.trend-item1 .trend-content-title h5 a {
  /*color: var(--brand-green) !important;*/
}

/* Rutas turísticas - Verde de la marca en hover */
.trend-item:hover .trend-content h4 a {
  color: var(--brand-green) !important;
}

/* Títulos de rutas - Fondo blanco con texto rojo */
.trend-content h4 a {
  color: var(--brand-blue) !important;
  background: var(--brand-white) !important;
  padding: 5px 10px;
  border-radius: 5px;
}

/* ========================================
   TESTIMONIAL SECTION
   ======================================== */

/* Texto "El turismo se construye desde el territorio" - Verde */
.testimonial .section-title h4 {
  color: var(--brand-green) !important;
}

/* Texto "Operador Turístico" - Verde */
.testimonial .section-title h2 .theme1 {
  color: var(--brand-green) !important;
}

/* ========================================
   FONTAWESOME FALLBACK
   ======================================== */

/* Ocultar iconos FontAwesome hasta que se carguen las fuentes reales */
.fa,
.fab,
.fas,
.far,
.fal,
.fad,
.fass,
.fasr,
.fatl {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', sans-serif !important;
}

/* Si las fuentes no cargan, mostrar texto alternativo */
.fa::before,
.fab::before,
.fas::before,
.far::before {
  content: "⚫" !important;
  /* Círculo como fallback */
}

/* ========================================
   PRELOADER
   ======================================== */

/* Preloader styling and transitions */
#preloader {
  transition: opacity 0.3s ease-out;
  z-index: 9998;
  /* Menor que logo-animation-overlay (9999) */
}

#preloader.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================================
   LOGO ANIMATION
   ======================================== */

/* Logo Animation Overlay */
#logo-animation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--brand-white);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1s ease-out;
}

#logo-animation-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.logo-container {
  text-align: center;
  position: relative;
}

.animated-logo {
  width: 400px;
  height: auto;
  max-width: 80vw;
}

/* SVG Animation with original colors */
.animated-logo path {
  fill: transparent;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

/* Isotipo (S roja con estrella) - Primer elemento */
.animated-logo path:nth-child(1) {
  stroke: var(--brand-blue);
  animation: drawLogo 1.5s ease-in-out forwards;
  animation-delay: 0s;
}

/* SAN (S-A-N) - Empiezan con 500ms de retraso */
.animated-logo path:nth-child(2) {
  stroke: var(--brand-green);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 0.5s;
}

.animated-logo path:nth-child(3) {
  stroke: var(--brand-green);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 0.7s;
}

.animated-logo path:nth-child(4) {
  stroke: var(--brand-green);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 0.9s;
}

/* TAN (T-A-N) */
.animated-logo path:nth-child(5) {
  stroke: var(--brand-green);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 1.1s;
}

.animated-logo path:nth-child(10) {
  stroke: var(--brand-green);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 1.3s;
}

.animated-logo path:nth-child(6) {
  stroke: var(--brand-green);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 1.5s;
}

/* DER (D-E-R) */
.animated-logo path:nth-child(7) {
  stroke: var(--brand-blue);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 1.7s;
}

.animated-logo path:nth-child(8) {
  stroke: var(--brand-blue);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 1.9s;
}

.animated-logo path:nth-child(9) {
  stroke: var(--brand-blue);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 2.1s;
}

/* PARA - Empieza cuando termina la A de TAN (alrededor de 2.3s) */
.animated-logo path:nth-child(11) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 2.3s;
}

.animated-logo path:nth-child(12) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 2.5s;
}

.animated-logo path:nth-child(13) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 2.7s;
}

.animated-logo path:nth-child(14) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 2.9s;
}

/* TODOS */
.animated-logo path:nth-child(15) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 3.1s;
}

.animated-logo path:nth-child(16) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 3.3s;
}

.animated-logo path:nth-child(17) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 3.5s;
}

.animated-logo path:nth-child(18) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 3.7s;
}

.animated-logo path:nth-child(19) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 3.9s;
}

.animated-logo path:nth-child(20) {
  stroke: var(--brand-black);
  animation: drawLogo 1s ease-in-out forwards;
  animation-delay: 4.1s;
}

@keyframes drawLogo {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }

  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }

  100% {
    stroke-dashoffset: 0;
    fill: currentColor;
    stroke: currentColor;
  }
}

/* Rojo para elementos rojos */
.animated-logo path:nth-child(1),
.animated-logo path:nth-child(7),
.animated-logo path:nth-child(8),
.animated-logo path:nth-child(9) {
  color: var(--brand-blue);
}

/* Verde para elementos verdes (solo SAN) */
.animated-logo path:nth-child(2),
.animated-logo path:nth-child(3),
.animated-logo path:nth-child(4) {
  color: var(--brand-green);
}

/* Amarillo para elementos amarillos (solo TAN) */
.animated-logo path:nth-child(5),
.animated-logo path:nth-child(6),
.animated-logo path:nth-child(10) {
  color: var(--brand-green);
}

/* Negro para PARA TODOS */
.animated-logo path:nth-child(11),
.animated-logo path:nth-child(12),
.animated-logo path:nth-child(13),
.animated-logo path:nth-child(14),
.animated-logo path:nth-child(15),
.animated-logo path:nth-child(16),
.animated-logo path:nth-child(17),
.animated-logo path:nth-child(18),
.animated-logo path:nth-child(19),
.animated-logo path:nth-child(20) {
  color: var(--brand-black);
}

.logo-text {
  color: var(--brand-black);
  font-size: 1.4rem;
  margin-top: 30px;
  opacity: 0;
  animation: fadeInText 0.8s ease-in-out 4.2s forwards;
  font-weight: 500;
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

.skip-animation {
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: rgba(0, 0, 0, 0.1);
  color: var(--brand-black);
  border: 1px solid var(--brand-black);
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.skip-animation:hover {
  background: var(--brand-black);
  color: var(--brand-white);
}

/* ========================================
   FOOTER & HEADER
   ======================================== */

/* Footer logo white color */
.footer-logo svg {
  filter: brightness(0) invert(1);
}

/* Header logo styling */
.navbar-brand img {
  max-height: 50px;
  width: auto;
}

/* ========================================
   UTILITIES
   ======================================== */

/* Ocultar precios */
.price,
.cost,
.amount,
.pricing {
  display: none !important;
}

/* ========================================
   DROPDOWN MENU FIX
   ======================================== */

/* Asegurar que los dropdowns sean visibles */
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu {
  position: relative;
}

.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.35);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  display: block !important;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-top: 10px;
  z-index: 9999;
  transition: all 0.3s ease-in-out;
}

/* Mostrar dropdown en hover */
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 0;
}

/* Estilos de items del dropdown */
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li {
  display: block;
  float: none;
  margin-right: 0;
  border-bottom: 1px dashed #f1f1f1;
}

.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li:last-child {
  border-bottom: none;
}

.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  line-height: 2.5;
  color: #777;
  font-size: 14px;
  padding: 8px 20px;
  font-weight: 400;
  letter-spacing: 0.3px;
  transition: all 0.15s linear;
  display: block;
  text-transform: capitalize;
  white-space: nowrap;
}

.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover {
  background: var(--brand-green);
  color: #fff;
  padding-left: 25px;
}