/* ==========================================================================
   ForwArt — Estilos Editoriales Minimalistas (Fondo Blanco)
   Tipografía: Mont (Montserrat)
   Paleta Oficial: #FFFFFF, #26314A, #5BBABC, #BEDAD3, #EA5327, #EF792D
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-mont);
  background-color: var(--c-bg);
  color: var(--text-primary);
  color-scheme: light;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: #FFFFFF;
  /* Textura de micropuntos arquitectónicos y halos ambientales sutiles */
  background-image: 
    radial-gradient(circle at 12% 18%, rgba(91, 186, 188, 0.045) 0%, transparent 45%),
    radial-gradient(circle at 88% 42%, rgba(234, 83, 39, 0.035) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(38, 49, 74, 0.035) 0%, transparent 50%),
    radial-gradient(rgba(38, 49, 74, 0.045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-mont);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografía Mont Estricta */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mont);
  color: var(--c-base);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

p, span, a, button, input, textarea, select {
  font-family: var(--font-mont);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Línea Reglamentaria de Gradiente ForwArt (como en el manual oficial) */
.brand-divider-line {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #26314A 0%, #5BBABC 25%, #BEDAD3 50%, #EA5327 75%, #EF792D 100%);
  display: block;
}

/* ==========================================================================
   BOTONES MINIMALISTAS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-mont);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  user-select: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Botón Cotizar: Rojo Coral #EA5327 con hover en Naranja Solar #EF792D */
.btn-cta {
  background-color: var(--c-coral) !important;
  color: #FFFFFF !important;
  box-shadow: var(--cta-shadow);
}

.btn-cta:hover {
  background-color: var(--c-solar) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(239, 121, 45, 0.35);
}

.btn-cta:active {
  transform: translateY(0);
}

/* Botón Secundario: Línea en Azul Profundo #26314A */
.btn-secondary {
  background-color: transparent;
  color: var(--c-base);
  border: 1.5px solid var(--c-base);
}

.btn-secondary:hover {
  background-color: var(--c-base);
  color: #FFFFFF;
}

.btn-teal {
  background-color: var(--c-primary);
  color: #FFFFFF;
  font-weight: 700;
}

.btn-teal:hover {
  background-color: #48A7A9;
}

.btn-sm {
  padding: 0.5rem 1.15rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   TARJETAS MINIMALISTAS Y SOFISTICADAS (DESATURADAS & DINÁMICAS)
   ========================================================================== */
.minimal-card,
.produccion-type-card,
.lux-card {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid rgba(38, 49, 74, 0.09);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  box-shadow: 0 1px 3px rgba(38, 49, 74, 0.02), 0 6px 18px rgba(38, 49, 74, 0.03);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Hairline dinámico en el borde superior:
   En reposo es sutil y tenue (30% ancho, opacidad baja para evitar saturación);
   en hover se expande con suavidad al 100% revelando el acento de marca */
.minimal-card::before,
.produccion-type-card::before,
.lux-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--card-accent, var(--c-primary));
  opacity: 0.35;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
}

.minimal-card:hover,
.produccion-type-card:hover,
.lux-card:hover {
  transform: translateY(-4px);
  border-color: rgba(38, 49, 74, 0.18);
  box-shadow: 0 16px 36px -10px rgba(38, 49, 74, 0.08), 0 2px 6px rgba(38, 49, 74, 0.02);
}

.minimal-card:hover::before,
.produccion-type-card:hover::before,
.lux-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Variantes de color de acento sin estridencia */
.accent-cyan {
  --card-accent: var(--c-primary);
  --card-accent-soft: rgba(91, 186, 188, 0.08);
  --card-accent-border: rgba(91, 186, 188, 0.28);
}
.accent-solar {
  --card-accent: var(--c-solar);
  --card-accent-soft: rgba(239, 121, 45, 0.08);
  --card-accent-border: rgba(239, 121, 45, 0.28);
}
.accent-coral {
  --card-accent: var(--c-coral);
  --card-accent-soft: rgba(234, 83, 39, 0.08);
  --card-accent-border: rgba(234, 83, 39, 0.28);
}
.accent-navy {
  --card-accent: var(--c-base);
  --card-accent-soft: rgba(38, 49, 74, 0.06);
  --card-accent-border: rgba(38, 49, 74, 0.25);
}

/* Cabecera de la tarjeta: Icono desaturado + Índice arquitectónico */
.card-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.card-icon-housing {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(38, 49, 74, 0.035);
  border: 1px solid rgba(38, 49, 74, 0.07);
  color: var(--c-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.minimal-card:hover .card-icon-housing,
.produccion-type-card:hover .card-icon-housing,
.lux-card:hover .card-icon-housing {
  background: var(--card-accent-soft, rgba(91, 186, 188, 0.08));
  border-color: var(--card-accent-border, rgba(91, 186, 188, 0.28));
  color: var(--card-accent, var(--c-primary));
  transform: scale(1.05);
}

.card-num {
  font-size: 0.74rem;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  transition: color 0.28s ease;
}

.minimal-card:hover .card-num,
.produccion-type-card:hover .card-num,
.lux-card:hover .card-num {
  color: var(--card-accent, var(--c-base));
}

/* Footer de la tarjeta: Micro-etiqueta con viñeta + Flecha sutil */
.card-footer-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(38, 49, 74, 0.06);
  padding-top: 0.95rem;
  margin-top: 1.25rem;
}

.card-footer-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.card-footer-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-accent, var(--c-primary));
  opacity: 0.75;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.card-action-arrow {
  width: 15px;
  height: 15px;
  color: #94A3B8;
  opacity: 0.35;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(0);
}

.minimal-card:hover .card-footer-tag,
.produccion-type-card:hover .card-footer-tag,
.lux-card:hover .card-footer-tag {
  color: var(--c-base);
}

.minimal-card:hover .card-footer-tag .tag-dot,
.produccion-type-card:hover .card-footer-tag .tag-dot,
.lux-card:hover .card-footer-tag .tag-dot {
  opacity: 1;
  transform: scale(1.3);
}

.minimal-card:hover .card-action-arrow,
.produccion-type-card:hover .card-action-arrow,
.lux-card:hover .card-action-arrow {
  opacity: 1;
  color: var(--card-accent, var(--c-primary));
  transform: translate(2px, -2px);
}

.minimal-card-featured {
  background-color: var(--c-bg-subtle);
  border: 1.5px solid var(--c-primary);
}

/* Tarjetas de Equipo (Minimalistas & Dinámicas) */
.team-member-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(38, 49, 74, 0.08);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  box-shadow: 0 1px 3px rgba(38, 49, 74, 0.02), 0 4px 12px rgba(38, 49, 74, 0.03);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
  overflow: hidden;
}

.team-member-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5px;
  background: var(--card-accent, var(--c-primary));
  opacity: 0.35;
  transform: scaleY(0.3);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.team-member-card:hover {
  transform: translateY(-3px);
  border-color: rgba(38, 49, 74, 0.16);
  box-shadow: 0 12px 28px -8px rgba(38, 49, 74, 0.07);
}

.team-member-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.team-photo-placeholder {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: rgba(38, 49, 74, 0.035);
  border: 1px solid rgba(38, 49, 74, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.team-member-card:hover .team-photo-placeholder {
  background: var(--card-accent-soft, rgba(91, 186, 188, 0.08));
  border-color: var(--card-accent-border, rgba(91, 186, 188, 0.25));
  transform: scale(1.04);
}

/* Tags y Píldoras */
.minimal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background-color: rgba(91, 186, 188, 0.12);
  border: 1px solid rgba(91, 186, 188, 0.3);
  color: #2D7C7E;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Layout y Contenedores */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.section {
  padding: 6.5rem 0;
  position: relative;
}

@media (max-width: 768px) {
  .section {
    padding: 4rem 0;
  }
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ==========================================================================
   NAVBAR EN FONDO BLANCO
   ========================================================================== */
/* Barra de Progreso Superior al Desplazarse (Pista Guía + Relleno Dinámico) */
.scroll-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(38, 49, 74, 0.12);
  z-index: 99999;
  pointer-events: none;
}

.scroll-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-coral) 55%, var(--c-solar) 100%);
  box-shadow: 0 0 10px rgba(91, 186, 188, 0.8), 0 0 4px rgba(234, 83, 39, 0.5);
  border-radius: 0 2px 2px 0;
  transition: width 0.05s ease-out;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--c-border-subtle);
  backdrop-filter: blur(10px);
  animation: navSlideDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.navbar.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(38, 49, 74, 0.07);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  height: 5.25rem;
  max-width: 1440px;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
  white-space: nowrap;
  width: 100%;
}

.nav-menu {
  margin-left: clamp(1rem, 2vw, 2.5rem);
  flex-shrink: 1;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.65rem);
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-link {
  font-weight: 700;
  font-size: clamp(0.76rem, 0.9vw, 0.85rem);
  color: var(--c-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
}

.btn-portal-proyecto {
  background: rgba(91, 186, 188, 0.12) !important;
  color: var(--c-primary) !important;
  border: 1.5px solid var(--c-primary) !important;
  padding: 0.42rem 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-portal-proyecto:hover {
  background: rgba(91, 186, 188, 0.22) !important;
  transform: translateY(-1px);
}

.theme-toggle-btn {
  background: rgba(38, 49, 74, 0.06);
  border: 1.5px solid var(--c-border-subtle);
  color: var(--c-base);
  padding: 0.42rem 0.65rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.theme-toggle-btn:hover {
  background: rgba(91, 186, 188, 0.15);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}

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

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--c-primary);
}

/* ==========================================================================
   ISOTIPO GIRATORIO SEGÚN SCROLL (HERO - PARTE DERECHA)
   ========================================================================== */


/* Botón flotante WhatsApp */
.wa-float-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.4rem;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
  transition: transform var(--transition-fast);
  text-decoration: none;
}

.wa-float-btn:hover {
  transform: translateY(-2px);
  color: #FFFFFF;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(38, 49, 74, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background-color: #FFFFFF;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(38, 49, 74, 0.25);
}

.modal-box.modal-lg {
  max-width: 920px;
}

.modal-box.modal-md {
  max-width: 620px;
}

.modal-box.modal-sm {
  max-width: 480px;
}

/* Modales Estructurados (Cabecera y Pie fijos con cuerpo deslizable - A prueba de cualquier pantalla) */
.modal-overlay.modal-structured-overlay {
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 1.5rem 1rem !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-box.modal-structured {
  padding: 0 !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 1.5rem auto !important;
  border-radius: 12px !important;
}

.modal-structured-form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.modal-structured-body {
  padding: 1.5rem 1.75rem !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(88vh - 135px) !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-structured-footer {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  padding: 1rem 1.75rem !important;
  border-top: 1px solid var(--hub-border) !important;
  background: var(--hub-bg-card-subtle) !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

/* Animaciones Reveal Suaves */
.reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* Cintillo a lo largo de toda la pantalla (Full-Width, Delgado y con Degradado Animado) */
@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cintillo-screen-bar {
  width: 100%;
  background: linear-gradient(110deg, #26314A 0%, #5BBABC 25%, #BEDAD3 50%, #EA5327 75%, #EF792D 90%, #26314A 100%);
  background-size: 250% 250%;
  animation: moveGradient 6s ease infinite;
  padding: 0.65rem 1rem;
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(38, 49, 74, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.cintillo-text-slender {
  font-family: var(--font-mont);
  font-size: clamp(0.78rem, 1.2vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.cintillo-star {
  opacity: 0.7;
  font-size: 0.82rem;
}


/* Isotipo Cinético Oficial en Mitad Derecha */
.kinetic-isotipo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  animation: gentleFloat 5s ease-in-out infinite;
}

.kinetic-isotipo-img {
  width: clamp(280px, 34vw, 430px);
  height: auto;
  object-fit: contain;
  will-change: transform;
  transform-origin: center center;
  filter: drop-shadow(0 14px 30px rgba(38, 49, 74, 0.12));
  transition: transform 0.08s linear;
}


.nav-brand-link {
  display: inline-flex;
  align-items: center;
}

.nav-brand-link:hover img {
  transform: translateY(-2px) scale(1.08);
}


/* ==========================================================================
   TEXTURAS SUTILES DE CONTRASTE POR SECCIÓN
   ========================================================================== */
.section-texture-grid {
  position: relative;
  background-color: #F8FAFC !important;
  background-image: 
    linear-gradient(to right, rgba(38, 49, 74, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38, 49, 74, 0.025) 1px, transparent 1px) !important;
  background-size: 38px 38px !important;
}

.section-texture-weave {
  position: relative;
  background-color: #F8FAFC !important;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(91, 186, 188, 0.035) 0%, transparent 50%),
    linear-gradient(to right, rgba(38, 49, 74, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38, 49, 74, 0.025) 1px, transparent 1px) !important;
  background-size: 100% 100%, 32px 32px, 32px 32px !important;
}

/* Halo ambiental detrás del Isotipo en Hero */
.hero-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(91, 186, 188, 0.15) 0%, rgba(190, 218, 211, 0.07) 45%, transparent 70%);
  filter: blur(48px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: pulseAmbient 7s ease-in-out infinite alternate;
}

@keyframes pulseAmbient {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA AL INGRESAR (HERO ENTRANCE)
   ========================================================================== */
@keyframes heroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-badge-enter {
  animation: heroFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.12s;
}

.hero-title-enter {
  animation: heroFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.22s;
}

.hero-p-enter {
  animation: heroFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.34s;
}

.hero-cta-enter {
  animation: heroFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.46s;
}

.hero-isotipo-enter {
  animation: heroScaleIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}

/* Flotación orgánica continua del Isotipo */
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Retrasos escalonados para tarjetas al hacer scroll */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ==========================================================================
   FONDO DINÁMICO CON MOVIMIENTO CONTINUO (CINTAS CINÉTICAS & HALOS FLUIDOS)
   ========================================================================== */
.dynamic-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dynamic-ambient-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  will-change: transform, opacity;
  pointer-events: none;
}

.aura-cyan {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(91, 186, 188, 0.16) 0%, rgba(91, 186, 188, 0.04) 55%, transparent 75%);
  top: -120px;
  left: -80px;
  animation: auraFloat1 18s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.aura-coral {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(234, 83, 39, 0.12) 0%, rgba(255, 182, 54, 0.035) 55%, transparent 75%);
  bottom: 8%;
  right: -100px;
  animation: auraFloat2 24s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes auraFloat1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(80px, 110px) scale(1.12); opacity: 1; }
  100% { transform: translate(30px, 180px) scale(0.95); opacity: 0.85; }
}

@keyframes auraFloat2 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate(-90px, -70px) scale(1.15); opacity: 0.95; }
  100% { transform: translate(-40px, -150px) scale(0.92); opacity: 0.8; }
}

.dynamic-kinetic-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.30;
  will-change: transform;
  overflow: visible;
}

.kinetic-wave-mover {
  will-change: transform;
}

/* Desplazamiento continuo y fluido de izquierda a derecha */
.mover-1 {
  animation: waveFlowRight1 18s linear infinite;
}

.mover-2 {
  animation: waveFlowRight2 26s linear infinite;
}

.mover-3 {
  animation: waveFlowRight3 22s linear infinite;
}

@keyframes waveFlowRight1 {
  0% { transform: translateX(-720px); }
  100% { transform: translateX(0px); }
}

@keyframes waveFlowRight2 {
  0% { transform: translateX(-800px); }
  100% { transform: translateX(0px); }
}

@keyframes waveFlowRight3 {
  0% { transform: translateX(-600px); }
  100% { transform: translateX(0px); }
}

.kinetic-wave {
  fill: none;
  will-change: transform;
}

.wave-1 {
  animation: dashMarchRight1 3.5s linear infinite, waveBreathing1 7s ease-in-out infinite alternate;
}

.wave-2 {
  animation: waveBreathing2 9s ease-in-out infinite alternate;
}

.wave-3 {
  animation: waveBreathing3 8s ease-in-out infinite alternate;
}

/* Puntadas que avanzan de izquierda a derecha */
@keyframes dashMarchRight1 {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -180; }
}

@keyframes waveBreathing1 {
  0% { transform: translateY(0px) scaleY(1); }
  100% { transform: translateY(14px) scaleY(1.05); }
}

@keyframes waveBreathing2 {
  0% { transform: translateY(0px) scaleY(1); }
  100% { transform: translateY(-16px) scaleY(0.96); }
}

@keyframes waveBreathing3 {
  0% { transform: translateY(0px) scaleY(1); }
  100% { transform: translateY(14px) scaleY(1.04); }
}

/* ==========================================================================
   FONDO TRAVEL: NUBES DINÁMICAS & SUTILES EN MOVIMIENTO CONTINUO
   ========================================================================== */
.section-travel {
  position: relative;
  overflow: hidden;
}

.travel-clouds-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.travel-cloud {
  position: absolute;
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(91, 186, 188, 0.22));
}

.travel-cloud.cloud-1 {
  top: 4%;
  width: 260px;
  opacity: 0.85;
  animation: travelCloudFly1 38s linear infinite;
  animation-delay: -6s;
}

.travel-cloud.cloud-2 {
  top: 18%;
  width: 330px;
  opacity: 0.80;
  animation: travelCloudFly2 48s linear infinite;
  animation-delay: -22s;
}

.travel-cloud.cloud-3 {
  top: 36%;
  width: 390px;
  opacity: 0.88;
  animation: travelCloudFly3 54s linear infinite;
  animation-delay: -34s;
}

.travel-cloud.cloud-4 {
  top: 50%;
  width: 240px;
  opacity: 0.82;
  animation: travelCloudFly4 42s linear infinite;
  animation-delay: -12s;
}

.travel-cloud.cloud-5 {
  top: 68%;
  width: 350px;
  opacity: 0.78;
  animation: travelCloudFly1 58s linear infinite;
  animation-delay: -44s;
}

.travel-cloud.cloud-6 {
  bottom: 5%;
  width: 300px;
  opacity: 0.84;
  animation: travelCloudFly2 46s linear infinite;
  animation-delay: -16s;
}

.travel-cloud.cloud-7 {
  top: 10%;
  width: 210px;
  opacity: 0.86;
  animation: travelCloudFly4 34s linear infinite;
  animation-delay: -26s;
}

.travel-cloud.cloud-8 {
  top: 58%;
  width: 290px;
  opacity: 0.80;
  animation: travelCloudFly3 45s linear infinite;
  animation-delay: -3s;
}

@keyframes travelCloudFly1 {
  0% { transform: translateX(-360px) translateY(0); }
  50% { transform: translateX(50vw) translateY(8px); }
  100% { transform: translateX(calc(100vw + 360px)) translateY(-5px); }
}

@keyframes travelCloudFly2 {
  0% { transform: translateX(-420px) translateY(0); }
  50% { transform: translateX(52vw) translateY(-10px); }
  100% { transform: translateX(calc(100vw + 420px)) translateY(8px); }
}

@keyframes travelCloudFly3 {
  0% { transform: translateX(-480px) translateY(0); }
  50% { transform: translateX(48vw) translateY(6px); }
  100% { transform: translateX(calc(100vw + 480px)) translateY(-8px); }
}

@keyframes travelCloudFly4 {
  0% { transform: translateX(-280px) translateY(0); }
  50% { transform: translateX(54vw) translateY(-6px); }
  100% { transform: translateX(calc(100vw + 280px)) translateY(5px); }
}

/* ==========================================================================
   FONDO TEXTIL: AGUJA ILUSTRADA & BORDADOS ARTESANALES
   ========================================================================== */
.section-textil {
  position: relative;
  overflow: hidden;
}

.textil-embroidery-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.textil-embroidery-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0.50;
}

.textil-stitch-mover {
  will-change: transform;
}

/* Desplazamiento continuo del bordado artesanal de izquierda a derecha */
.stitch-mover-1 {
  animation: stitchMoveRight1 18s linear infinite;
}

.stitch-mover-2 {
  animation: stitchMoveRight2 24s linear infinite;
}

@keyframes stitchMoveRight1 {
  0% { transform: translateX(-600px); }
  100% { transform: translateX(0px); }
}

@keyframes stitchMoveRight2 {
  0% { transform: translateX(-720px); }
  100% { transform: translateX(0px); }
}

.embroidery-stitch-line {
  will-change: stroke-dashoffset;
  animation: stitchDashMarch1 4s linear infinite;
}

.embroidery-stitch-accent {
  will-change: stroke-dashoffset;
  animation: stitchDashMarch2 5s linear infinite;
}

/* Las puntadas también corren activamente de izquierda a derecha */
@keyframes stitchDashMarch1 {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}

@keyframes stitchDashMarch2 {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -160; }
}

/* Aguja de coser ilustrada / editorial que recorre el bordado */
.needle-tracer-wrapper {
  position: absolute;
  top: 22%;
  left: -140px;
  width: 140px;
  height: 48px;
  pointer-events: none;
  z-index: 1;
  animation: needleStitchGlide 22s ease-in-out infinite;
}

.needle-svg-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(38, 49, 74, 0.16));
  animation: needleSewingDip 1.35s ease-in-out infinite alternate;
}

.needle-sparkle {
  transform-origin: 122px 21.5px;
  animation: needleSparklePulse 1.2s ease-in-out infinite alternate;
}

@keyframes needleSparklePulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3) rotate(12deg); opacity: 1; }
}

.needle-thread-flow {
  animation: needleThreadWave 1.6s ease-in-out infinite alternate;
}

@keyframes needleThreadWave {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

@keyframes needleSewingDip {
  0% { transform: rotate(-6deg) translateY(-2px); }
  50% { transform: rotate(5deg) translateY(4px); }
  100% { transform: rotate(-3deg) translateY(-1px); }
}

@keyframes needleStitchGlide {
  0% {
    transform: translate(0, 0) rotate(8deg);
    opacity: 0;
  }
  4% {
    opacity: 0.95;
  }
  25% {
    transform: translate(28vw, 36px) rotate(-6deg);
  }
  50% {
    transform: translate(58vw, -16px) rotate(10deg);
  }
  75% {
    transform: translate(84vw, 30px) rotate(-5deg);
  }
  96% {
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(100vw + 150px), 8px) rotate(6deg);
    opacity: 0;
  }
}

/* ==========================================================================
   FONDO LATAM CHAMPIONSHIP: HALOS DE ESTADIO, ONDAS ACÚSTICAS & ESTRELLAS
   ========================================================================== */
.section-campeonato {
  position: relative;
  overflow: hidden;
}

.campeonato-dynamic-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Halos luminosos de estadio (oro solar & cian arena) */
.campeonato-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  pointer-events: none;
  will-change: transform, opacity;
}

.campeonato-aura.aura-gold {
  top: 6%;
  right: 4%;
  width: clamp(340px, 38vw, 560px);
  height: clamp(340px, 38vw, 560px);
  background: radial-gradient(circle, rgba(255, 182, 54, 0.22) 0%, rgba(234, 83, 39, 0.10) 55%, transparent 75%);
  animation: champAuraPulse1 14s ease-in-out infinite alternate;
}

.campeonato-aura.aura-blue {
  bottom: 10%;
  left: 2%;
  width: clamp(320px, 34vw, 500px);
  height: clamp(320px, 34vw, 500px);
  background: radial-gradient(circle, rgba(91, 186, 188, 0.20) 0%, rgba(190, 218, 211, 0.08) 55%, transparent 75%);
  animation: champAuraPulse2 18s ease-in-out infinite alternate;
}

@keyframes champAuraPulse1 {
  0% { transform: scale(0.92) translate(0, 0); opacity: 0.7; }
  50% { transform: scale(1.14) translate(-30px, 25px); opacity: 0.95; }
  100% { transform: scale(1) translate(20px, -20px); opacity: 0.8; }
}

@keyframes champAuraPulse2 {
  0% { transform: scale(1) translate(0, 0); opacity: 0.65; }
  50% { transform: scale(1.18) translate(40px, -30px); opacity: 0.9; }
  100% { transform: scale(0.95) translate(-25px, 20px); opacity: 0.7; }
}

/* Canvas de ondas sonoras */
.campeonato-soundwaves-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Ondas radiales acústicas (resonancia del estadio) */
.acoustic-ring {
  transform-origin: 1060px 220px;
  will-change: transform, opacity;
}

.acoustic-ring.ring-1 {
  animation: acousticRipple1 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.acoustic-ring.ring-2 {
  animation: acousticRipple2 8.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: -3s;
}

.acoustic-ring.ring-3 {
  animation: acousticRipple3 11s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  animation-delay: -5.5s;
}

@keyframes acousticRipple1 {
  0% { transform: scale(0.75); opacity: 0.55; }
  50% { opacity: 0.3; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes acousticRipple2 {
  0% { transform: scale(0.8); opacity: 0.45; }
  50% { opacity: 0.25; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes acousticRipple3 {
  0% { transform: scale(0.85); opacity: 0.35; }
  50% { opacity: 0.18; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Ondas sonoras de izquierda a derecha */
.champ-wave-mover {
  will-change: transform;
}

.mover-gold {
  animation: champWaveFlowRight1 20s linear infinite;
}

.mover-cyan {
  animation: champWaveFlowRight2 26s linear infinite;
}

@keyframes champWaveFlowRight1 {
  0% { transform: translateX(-720px); }
  100% { transform: translateX(0px); }
}

@keyframes champWaveFlowRight2 {
  0% { transform: translateX(-600px); }
  100% { transform: translateX(0px); }
}

.champ-soundwave {
  fill: none;
  will-change: transform;
}

.wave-gold {
  animation: champDashMarch 4s linear infinite, champWaveBreathing1 7s ease-in-out infinite alternate;
}

.wave-cyan {
  animation: champWaveBreathing2 8.5s ease-in-out infinite alternate;
}

@keyframes champDashMarch {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -180; }
}

@keyframes champWaveBreathing1 {
  0% { transform: translateY(0px) scaleY(1); }
  100% { transform: translateY(16px) scaleY(1.06); }
}

@keyframes champWaveBreathing2 {
  0% { transform: translateY(0px) scaleY(1); }
  100% { transform: translateY(-14px) scaleY(0.95); }
}

/* Capa de estrellas y destellos de campeonato */
.champ-stars-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.champ-star {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 8px rgba(255, 182, 54, 0.35));
}

.champ-star.star-1 {
  top: 14%;
  left: 18%;
  width: 18px;
  height: 18px;
  animation: champStarDrift 9s ease-in-out infinite alternate;
}

.champ-star.star-2 {
  top: 48%;
  left: 8%;
  width: 14px;
  height: 14px;
  animation: champStarDrift 11s ease-in-out infinite alternate;
  animation-delay: -3s;
}

.champ-star.star-3 {
  top: 22%;
  right: 22%;
  width: 22px;
  height: 22px;
  animation: champStarDrift 8s ease-in-out infinite alternate;
  animation-delay: -4s;
}

.champ-star.star-4 {
  bottom: 24%;
  right: 12%;
  width: 16px;
  height: 16px;
  animation: champStarDrift 12s ease-in-out infinite alternate;
  animation-delay: -6s;
}

.champ-star.star-5 {
  bottom: 12%;
  left: 45%;
  width: 18px;
  height: 18px;
  animation: champStarDrift 10s ease-in-out infinite alternate;
  animation-delay: -2s;
}

@keyframes champStarDrift {
  0% {
    transform: translate(0, 0) scale(0.85) rotate(0deg);
    opacity: 0.35;
  }
  50% {
    transform: translate(12px, -18px) scale(1.25) rotate(45deg);
    opacity: 0.85;
  }
  100% {
    transform: translate(-10px, -30px) scale(0.9) rotate(90deg);
    opacity: 0.45;
  }
}

/* ==========================================================================
   GALERÍA FOTOGRÁFICA LATAM CHAMPIONSHIP CON DEGRADADOS & HOVER DINÁMICO
   ========================================================================== */
.latam-photo-showcase {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 1100px) {
  .latam-photo-showcase {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .latam-photo-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .latam-photo-showcase {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .latam-photo-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

.latam-photo-card {
  position: relative;
  height: 380px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(38, 49, 74, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: var(--c-base);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Borde superior decorativo en degradado de marca ForwArt / LATAM */
.latam-photo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-solar) 0%, var(--c-coral) 50%, var(--c-primary) 100%);
  z-index: 3;
  opacity: 0.85;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.latam-photo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 36px rgba(38, 49, 74, 0.22), 0 0 20px rgba(255, 182, 54, 0.2);
  border-color: rgba(255, 182, 54, 0.45);
}

.latam-photo-card:hover::before {
  opacity: 1;
  height: 5px;
}

.latam-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.96) contrast(1.04);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  z-index: 0;
}

.latam-photo-card:hover img {
  transform: scale(1.08);
  filter: brightness(1.03) contrast(1.08);
}

/* Degradados cinematográficos sobre las imágenes para garantizar legibilidad */
.latam-photo-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(38, 49, 74, 0.05) 0%,
    rgba(38, 49, 74, 0.15) 35%,
    rgba(38, 49, 74, 0.72) 75%,
    rgba(22, 30, 47, 0.94) 100%
  );
  transition: background 0.4s ease;
}

.latam-photo-card:hover .latam-photo-gradient-overlay {
  background: linear-gradient(
    180deg,
    rgba(234, 83, 39, 0.08) 0%,
    rgba(38, 49, 74, 0.20) 30%,
    rgba(38, 49, 74, 0.78) 70%,
    rgba(18, 24, 38, 0.97) 100%
  );
}

/* Badge / Etiqueta superior con degradado */
.latam-photo-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.latam-tag-pill {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: #FFFFFF;
  background-color: #1E293B;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease;
}

.latam-photo-card:hover .latam-tag-pill {
  transform: scale(1.05);
}

.latam-tag-pill.pill-cyan {
  background: #1E6B6D linear-gradient(135deg, rgba(91, 186, 188, 0.95), rgba(46, 138, 140, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.latam-tag-pill.pill-gold {
  background: #B37D00 linear-gradient(135deg, rgba(255, 182, 54, 0.95), rgba(234, 83, 39, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.latam-tag-pill.pill-coral {
  background: #C2350E linear-gradient(135deg, rgba(234, 83, 39, 0.95), rgba(194, 53, 14, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Contenido textual en la parte inferior con degradado de lectura */
.latam-photo-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.15rem;
  z-index: 2;
  transform: translateY(4px);
  transition: transform 0.35s ease;
}

.latam-photo-card:hover .latam-photo-content {
  transform: translateY(0);
}

.latam-photo-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 0.35rem 0;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.01em;
}

.latam-photo-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #E2E8F0;
  margin: 0;
  opacity: 0.88;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}

.latam-photo-card:hover .latam-photo-desc {
  opacity: 1;
  color: #F8FAFC;
}

/* ==========================================================================
   ADAPTACIONES RESPONSIVAS MÓVILES (EXCLUSIVAMENTE DENTRO DE MEDIA QUERIES)
   REGLA ESTRICTA: NO AFECTA EN NINGÚN ASPECTO A LA VERSIÓN DE ESCRITORIO
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Prevención total de scroll horizontal y control de anchuras */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box !important;
  }

  .section {
    padding: 3.5rem 0 !important;
  }

  /* 2. Imágenes, videos e iframes fluidos */
  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* 3. Menú de Navegación Móvil (Hamburguesa & Desplegable) */
  .navbar-inner {
    height: 4.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .navbar-brand-link img.navbar-logo-iso {
    height: 42px !important;
    width: auto !important;
  }

  .navbar-brand-link img.navbar-logo-wordmark {
    height: 25px !important;
    width: auto !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--c-border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    z-index: 105 !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    margin-left: auto !important;
  }

  .mobile-menu-toggle:active {
    background-color: var(--c-bg-subtle) !important;
    transform: scale(0.96) !important;
  }

  .mobile-menu-toggle span {
    display: block !important;
    width: 20px !important;
    height: 2.2px !important;
    background-color: var(--c-base) !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease !important;
  }

  .navbar.nav-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(6.2px) rotate(45deg) !important;
    background-color: var(--c-primary) !important;
  }

  .navbar.nav-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  .navbar.nav-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-6.2px) rotate(-45deg) !important;
    background-color: var(--c-primary) !important;
  }

  .nav-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 3px solid var(--c-primary) !important;
    box-shadow: 0 20px 40px rgba(38, 49, 74, 0.16) !important;
    padding: 1.25rem 1.25rem 1.75rem !important;
    z-index: 99 !important;
    animation: navMenuFadeIn 0.22s ease-out both !important;
  }

  @keyframes navMenuFadeIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .navbar.nav-open .nav-menu {
    display: block !important;
  }

  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .nav-links li {
    width: 100% !important;
  }

  .nav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--c-base) !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }

  .nav-link:active,
  .nav-link.active {
    background-color: rgba(91, 186, 188, 0.12) !important;
    color: var(--c-primary) !important;
  }

  .mobile-nav-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--c-border-subtle) !important;
    width: 100% !important;
  }

  .btn-mobile-action {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar-actions {
    display: none !important;
  }

  /* 4. Hero: Reducción tipográfica, padding y 1 columna */
  #inicio {
    padding-top: 2.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    text-align: left !important;
  }

  .hero-badge-enter {
    margin-bottom: 1.25rem !important;
    font-size: 0.74rem !important;
  }

  h1.hero-title-enter {
    font-size: clamp(2.3rem, 10vw, 3.4rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: -0.03em !important;
  }

  p.hero-p-enter {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.75rem !important;
    max-width: 100% !important;
  }

  .hero-cta-enter {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }

  .hero-cta-enter .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    padding: 0.95rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  .hero-isotipo-enter {
    margin-top: 0.5rem !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-brand-logo-enter {
    margin-bottom: 1.15rem !important;
  }

  .hero-brand-logo-img {
    height: clamp(28px, 6.5vw, 40px) !important;
  }

  .kinetic-isotipo-img {
    width: clamp(170px, 46vw, 240px) !important;
    height: auto !important;
    max-height: 240px !important;
  }

  /* Corrección de proporción y dinamismo sutil de líneas de fondo en móvil */
  .dynamic-kinetic-waves {
    width: 100% !important;
    height: 100% !important;
    opacity: 0.28 !important;
  }

  .textil-embroidery-canvas {
    width: 100% !important;
    height: 100% !important;
    opacity: 0.45 !important;
  }

  .kinetic-wave {
    stroke-width: 1.8px !important;
    vector-effect: non-scaling-stroke !important;
  }

  .embroidery-stitch-line,
  .embroidery-stitch-accent {
    stroke-width: 1.8px !important;
    vector-effect: non-scaling-stroke !important;
  }

  /* 5. Quiénes Somos y 4 Pilares en Cuadrícula Compacta 2x2 */
  .quienes-header-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
  }

  .quienes-header-grid h2 {
    font-size: clamp(1.85rem, 7vw, 2.3rem) !important;
  }

  .quienes-header-grid p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .pilares-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 2.25rem !important;
  }

  .pilares-grid .minimal-card {
    padding: 1.1rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .pilares-grid .minimal-card h3 {
    font-size: 1.05rem !important;
    margin-bottom: 0.2rem !important;
  }

  .pilares-grid .minimal-card p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 6. Cintillo de Pantalla: Todas las palabras en un solo renglón sin saltos */
  .cintillo-screen-bar {
    padding: 0.75rem 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .cintillo-text-slender {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: clamp(0.72rem, 3.4vw, 0.95rem) !important;
    letter-spacing: clamp(0.08em, 1.5vw, 0.16em) !important;
    gap: clamp(0.45rem, 2.5vw, 1.25rem) !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .cintillo-star {
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  /* Ocultar 5ª tarjeta en áreas comerciales en móvil para dejar exactamente 4 cuadros (2x2) */
  .mobile-commercial-hide {
    display: none !important;
  }

  /* 7. Travel Section: Mosaico Comercial Ágil y Dinámico */
  .travel-header-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
    margin-bottom: 2rem !important;
  }

  .travel-header-flex img {
    height: 48px !important;
    max-height: 48px !important;
  }

  .travel-header-flex p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  .travel-header-flex .btn-cta {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .travel-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 2.25rem !important;
  }

  .travel-cards-grid .minimal-card {
    padding: 1rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: var(--radius-sm) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .travel-cards-grid .minimal-card h3 {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
  }

  .travel-cards-grid .minimal-card p {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    color: var(--text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  /* Tarjeta CTA de Travel en móvil: Ocupa las 2 columnas y destaca */
  .travel-cards-grid > div:last-child {
    grid-column: span 2 !important;
    padding: 1.35rem 1.15rem !important;
    text-align: center !important;
    align-items: center !important;
    border-color: var(--c-primary) !important;
    box-shadow: 0 4px 16px rgba(91, 186, 188, 0.12) !important;
  }

  .travel-cards-grid > div:last-child p {
    -webkit-line-clamp: unset !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  .travel-cards-grid > div:last-child .btn {
    width: 100% !important;
  }

  /* 8. Textil Section: Mosaico Ágil con Aguja Ilustrada Dinámica */
  .textil-header-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
    margin-bottom: 2rem !important;
  }

  .textil-header-flex img {
    height: 48px !important;
    max-height: 48px !important;
  }

  .textil-header-flex p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  .textil-header-flex .btn-cta {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .textil-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 2.25rem !important;
  }

  .textil-cards-grid .minimal-card {
    padding: 1rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: var(--radius-sm) !important;
  }

  .textil-cards-grid .minimal-card h3 {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
  }

  .textil-cards-grid .minimal-card p {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    color: var(--text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  /* Tarjeta CTA de Textil en móvil: Ocupa las 2 columnas */
  .textil-cards-grid > div:last-child {
    grid-column: span 2 !important;
    padding: 1.35rem 1.15rem !important;
    text-align: center !important;
    align-items: center !important;
    border-color: var(--c-base) !important;
    box-shadow: 0 4px 16px rgba(38, 49, 74, 0.08) !important;
  }

  .textil-cards-grid > div:last-child p {
    -webkit-line-clamp: unset !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  .textil-cards-grid > div:last-child .btn {
    width: 100% !important;
  }

  .needle-tracer-wrapper {
    transform: scale(0.75);
    transform-origin: left center;
  }

  /* 9. LATAM Championship: Enfoque Visual & Categorías Claras */
  .campeonato-header-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .campeonato-header-grid h2 {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
  }

  .campeonato-header-grid p {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .campeonato-header-grid .btn-cta {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .campeonato-header-grid img[src*="logo-latam-championship"] {
    max-height: 140px !important;
    width: auto !important;
  }

  .campeonato-sede-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
    padding: 1.25rem !important;
    margin-bottom: 2rem !important;
  }

  .campeonato-sede-flex > div:last-child {
    border-left: none !important;
    border-top: 3px solid var(--c-coral) !important;
    padding-left: 0 !important;
    padding-top: 1rem !important;
  }

  .campeonato-categories-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin-bottom: 2.25rem !important;
  }

  .campeonato-categories-grid .minimal-card {
    padding: 1.15rem 1rem !important;
  }

  .campeonato-categories-grid .minimal-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.35rem !important;
  }

  .campeonato-categories-grid .minimal-card p {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  /* Galería Fotográfica en Tablet/Móvil */
  .latam-photo-showcase {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  .latam-photo-card {
    height: 300px !important;
  }

  /* Tabla de Resultados */
  .campeonato-results-box {
    padding: 1.5rem 1rem !important;
  }

  .campeonato-results-box h3 {
    font-size: 1.2rem !important;
  }

  .campeonato-results-box table {
    font-size: 0.86rem !important;
    display: table !important;
    width: 100% !important;
  }

  .campeonato-results-box td {
    padding: 0.75rem 0.25rem !important;
  }

  /* 10. Footer a 1 Columna */
  footer {
    padding: 3.5rem 0 2.5rem 0 !important;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    margin-bottom: 2.5rem !important;
  }

  .footer-bottom-flex {
    flex-direction: column !important;
    gap: 0.85rem !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* 11. Modales Móviles Cómodos */
  .modal-overlay {
    padding: 1rem 0.75rem !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.75rem 1.25rem !important;
    max-height: none !important;
    margin: 1.5rem auto !important;
    box-sizing: border-box !important;
  }

  /* Excepción para modales estructurados en móviles para no romper cabecera y pie con botones */
  .modal-box.modal-structured,
  #clientModal .modal-box,
  #taskModal .modal-box,
  #leadModal .modal-box,
  #contractModal .modal-box {
    padding: 0 !important;
    max-height: 92vh !important;
    margin: 0.75rem auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .modal-box.modal-structured .btn,
  #clientModal .modal-box .btn,
  #taskModal .modal-box .btn,
  #leadModal .modal-box .btn,
  #contractModal .modal-box .btn {
    width: auto !important;
    min-height: 40px !important;
  }

  .modal-structured-body,
  #clientModal .modal-structured-body {
    padding: 1.25rem 1rem !important;
    max-height: calc(92vh - 130px) !important;
  }

  .modal-structured-footer,
  #clientModal .modal-structured-footer {
    padding: 0.85rem 1rem !important;
    flex-wrap: wrap !important;
  }

  .modal-form-row-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .modal-box input,
  .modal-box select,
  .modal-box textarea {
    font-size: 16px !important; /* Previene auto-zoom molesto en iOS */
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .modal-box textarea {
    min-height: 90px !important;
  }

  .modal-box .btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* 12. Botón Flotante WhatsApp */
  .wa-float-btn {
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    padding: 0.75rem 1.15rem !important;
    font-size: 0.8rem !important;
  }

  /* 13. Botones y Enlaces Táctiles Generales */
  .btn {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   AJUSTES COMPACTOS PARA PANTALLAS PEQUEÑAS (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .navbar-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .navbar-brand-link img.navbar-logo-iso {
    height: 38px !important;
  }

  .navbar-brand-link img.navbar-logo-wordmark {
    height: 23px !important;
  }

  h1.hero-title-enter {
    font-size: 2.25rem !important;
  }

  /* Cintillo de Pantalla en pantallas extra pequeñas */
  .cintillo-text-slender {
    font-size: clamp(0.66rem, 3.1vw, 0.8rem) !important;
    gap: clamp(0.35rem, 2vw, 0.75rem) !important;
    letter-spacing: 0.08em !important;
  }

  /* Galería Fotográfica: Deslizamiento Táctil Horizontal Suave */
  .latam-photo-showcase {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 0.85rem !important;
    padding-bottom: 0.75rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }

  .latam-photo-showcase::-webkit-scrollbar {
    display: none;
  }

  .latam-photo-card {
    flex: 0 0 84% !important;
    scroll-snap-align: center !important;
    height: 330px !important;
  }

  /* Botón Flotante WhatsApp compacto (solo ícono en teléfonos pequeños para no bloquear lectura) */
  .wa-float-btn span {
    display: none !important;
  }

  .wa-float-btn {
    padding: 0.85rem !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45) !important;
  }
}

/* ==========================================================================
   TRAVEL CONFIDENCE & TRUST SYSTEM (ANTI-ESTAFA & SEGURIDAD TOTAL)
   ========================================================================== */
.travel-trust-banner {
  background: #FFFFFF;
  border: 1.5px solid rgba(91, 186, 188, 0.28);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 4px 20px rgba(38, 49, 74, 0.04);
  position: relative;
  overflow: hidden;
}

.travel-trust-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0E6B6E;
  background: rgba(91, 186, 188, 0.16);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(91, 186, 188, 0.35);
  display: inline-block;
}

.travel-trust-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-mint) 50%, var(--c-solar) 100%);
}

.travel-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.travel-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.travel-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(91, 186, 188, 0.12);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.travel-trust-text h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--c-base);
  margin: 0 0 0.25rem 0;
}

.travel-trust-text p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Tabs de Experiencias */
.travel-tabs-nav {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(38, 49, 74, 0.05);
  border: 1px solid rgba(38, 49, 74, 0.08);
  margin-bottom: 2.25rem;
}

.travel-tab-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.travel-tab-btn.is-active {
  background: #FFFFFF;
  color: var(--c-base);
  box-shadow: 0 2px 10px rgba(38, 49, 74, 0.08);
}

.travel-exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}

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

.travel-exp-card {
  background: #FFFFFF;
  border: 1px solid rgba(38, 49, 74, 0.09);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 4px 16px rgba(38, 49, 74, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.travel-exp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(38, 49, 74, 0.08);
  border-color: rgba(91, 186, 188, 0.4);
}

.travel-exp-card.is-upcoming {
  border-top: 3px solid var(--c-solar);
}

.travel-exp-card.is-past {
  border-top: 3px solid var(--c-primary);
}

.travel-exp-header {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
}

.travel-exp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 28px;
  margin-bottom: 0.75rem;
}

.travel-origin-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: rgba(38, 49, 74, 0.05);
  color: var(--c-base);
}

.travel-status-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.travel-status-pill.past {
  background: rgba(91, 186, 188, 0.12);
  color: #1E6B6D;
}

.travel-status-pill.upcoming {
  background: rgba(255, 182, 54, 0.15);
  color: #B37D00;
}

.travel-band-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--c-base);
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
  min-height: 3.35rem;
  display: flex;
  align-items: flex-start;
}

.travel-event-destination {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-primary);
  display: flex;
  align-items: flex-start;
  gap: 0.38rem;
  line-height: 1.35;
  min-height: 2.5rem;
  margin-bottom: 0.5rem;
}

.travel-event-destination i,
.travel-event-destination svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Galería de 3 fotos dentro de cada tarjeta Travel (Expansión interactiva acordeón) */
.travel-gallery-trio {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem 0;
  height: 110px;
  width: 100%;
}

.travel-gallery-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
  background: #F1F5F9;
  border: 1px solid rgba(38, 49, 74, 0.08);
  cursor: pointer;
  transition: flex 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.35s ease, 
              box-shadow 0.35s ease,
              transform 0.35s ease,
              border-color 0.35s ease;
  will-change: flex, transform;
}

.travel-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Al pasar el cursor sobre la galería: las que no tienen hover se hacen pequeñas */
.travel-gallery-trio:hover .travel-gallery-thumb {
  flex: 0.65 1 0;
  opacity: 0.7;
}

/* La foto sobre la que se para el cursor se hace grande */
.travel-gallery-trio .travel-gallery-thumb:hover {
  flex: 2.35 1 0;
  opacity: 1;
  box-shadow: 0 10px 24px rgba(38, 49, 74, 0.22);
  border-color: var(--c-primary);
  transform: translateY(-2px);
  z-index: 5;
}

.travel-gallery-thumb:hover img {
  transform: scale(1.08);
}

.travel-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(91, 186, 188, 0.08) 0%, rgba(38, 49, 74, 0.04) 100%);
  color: #94A3B8;
  gap: 0.25rem;
  padding: 0.5rem;
  text-align: center;
}

.travel-gallery-placeholder span {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Testimonio / Opinión de Satisfacción del Director */
.travel-director-quote {
  background: rgba(38, 49, 74, 0.03);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.15rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 180px;
}

.travel-director-quote p {
  font-size: 0.84rem;
  font-style: italic;
  color: var(--c-base);
  line-height: 1.55;
  margin: 0 0 0.85rem 0;
  flex: 1 1 auto;
}

.travel-director-quote p:last-child {
  margin-bottom: 0;
}

.travel-director-author {
  font-size: 0.76rem;
  font-weight: 800;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(38, 49, 74, 0.06);
  margin-top: auto;
}

/* ==========================================================================
   TEXTIL: 3 TARJETAS GRANDES & DINÁMICAS (EMPRESARIAL, INSTITUCIONAL, ARTÍSTICO)
   ========================================================================== */
.textil-large-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.textil-large-card {
  background: #FFFFFF;
  border: 1px solid rgba(38, 49, 74, 0.09);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(38, 49, 74, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.textil-large-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(38, 49, 74, 0.08);
  border-color: rgba(38, 49, 74, 0.2);
}

.textil-card-top {
  padding: 2rem 2rem 1.25rem 2rem;
}

.textil-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.textil-card-badge.empresarial {
  background: rgba(38, 49, 74, 0.08);
  color: var(--c-base);
}

.textil-card-badge.institucional {
  background: rgba(91, 186, 188, 0.12);
  color: #1E6B6D;
}

.textil-card-badge.artistico {
  background: rgba(234, 83, 39, 0.1);
  color: var(--c-coral);
}

.textil-card-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--c-base);
  margin: 0 0 0.65rem 0;
  letter-spacing: -0.02em;
}

.textil-card-desc {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
}

/* Galería dinámica de 3 prendas */
.textil-gallery-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  padding: 0 1.75rem 1.5rem 1.75rem;
}

.textil-gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #F8FAFC;
  border: 1px solid rgba(38, 49, 74, 0.07);
  display: flex;
  flex-direction: column;
}

.textil-item-thumb {
  height: 130px;
  position: relative;
  overflow: hidden;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.textil-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.textil-gallery-item:hover .textil-item-thumb img {
  transform: scale(1.06);
}

.textil-has-duo .textil-item-thumb {
  position: relative;
}

.textil-has-duo .thumb-img-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.textil-has-duo .thumb-img-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  z-index: 2;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.textil-has-duo:hover .thumb-img-back {
  opacity: 1;
  transform: scale(1.06);
}

.textil-has-duo:hover .thumb-img-front {
  transform: scale(1.06);
}

.textil-duo-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(13, 19, 34, 0.8);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: opacity 0.25s ease;
}

.textil-has-duo:hover .textil-duo-badge {
  opacity: 0.9;
}

.textil-item-info {
  padding: 0.65rem 0.45rem;
  background: #FFFFFF;
  text-align: center;
  border-top: 1px solid rgba(38, 49, 74, 0.05);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 82px;
  box-sizing: border-box;
}

.textil-item-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--c-base);
  margin: 0 0 0.2rem 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.textil-item-tag {
  font-size: 0.66rem;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  word-break: normal;
}

.textil-card-footer {
  padding: 1.25rem 2rem;
  background: rgba(38, 49, 74, 0.02);
  border-top: 1px solid var(--c-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.textil-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.textil-tag-pill {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  background: rgba(38, 49, 74, 0.05);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

/* ==========================================================================
   MODO OSCURO COMPLETO (DATA-THEME="DARK")
   ========================================================================== */
[data-theme="dark"] {
  --c-base: #F8FAFC;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --c-bg: #0D1322;
  --c-card-bg: #162035;
  --c-border-subtle: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] body {
  background-color: #0D1322 !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .section-texture-grid {
  background-color: #0E1524 !important;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .navbar {
  background-color: rgba(13, 19, 34, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .navbar.navbar-scrolled {
  background-color: rgba(13, 19, 34, 0.98) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .nav-link {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--c-primary) !important;
}

/* Logotipos e Isotipos Oficiales Adaptados a Modo Oscuro */
[data-theme="dark"] #kineticIsotipo {
  content: url("../assets/brand/isotipo-dark-kinetic.png") !important;
}

[data-theme="dark"] .travel-division-logo {
  content: url("../assets/brand/logo-travel-dark.png") !important;
}

[data-theme="dark"] .textil-division-logo {
  content: url("../assets/brand/logo-textil-dark.png") !important;
}

[data-theme="dark"] .navbar-logo-wordmark,
[data-theme="dark"] .hero-brand-logo-img,
[data-theme="dark"] .footer-logo-wordmark,
[data-theme="dark"] footer img[src*="wordmark-navy"] {
  content: url("../assets/brand/wordmark-forwart-dark.png") !important;
}

[data-theme="dark"] .navbar-logo-iso,
[data-theme="dark"] .footer-logo-iso,
[data-theme="dark"] footer img[src*="isotipo-hq"] {
  content: url("../assets/brand/isotipo-dark-kinetic.png") !important;
}

[data-theme="dark"] .latam-championship-logo,
[data-theme="dark"] img[src*="logo-latam-championship"] {
  content: url("../assets/brand/logo-latam-championship-dark.png") !important;
}

[data-theme="dark"] .dci-partner-logo,
[data-theme="dark"] img[src*="logo-dci"] {
  content: url("../assets/brand/logo-dci-dark.png") !important;
}

[data-theme="dark"] .travel-gallery-trio .travel-gallery-thumb:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
  border-color: var(--c-primary) !important;
}

[data-theme="dark"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 182, 54, 0.2) !important;
  border-color: var(--c-solar) !important;
}

/* Secciones y Fondos */
[data-theme="dark"] .section-travel {
  background-color: rgba(15, 22, 38, 0.96) !important;
}

[data-theme="dark"] .section-textil {
  background-color: #101726 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .section-campeonato {
  background-color: rgba(13, 19, 34, 0.96) !important;
}

[data-theme="dark"] .producciones-hero {
  background: linear-gradient(180deg, #0D1322 0%, #151D30 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.section-cta-producciones {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg-subtle) 100%);
}

[data-theme="dark"] .section-cta-producciones {
  background: linear-gradient(180deg, #0D1322 0%, #151D30 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.proximamente-docs-banner {
  background: rgba(255, 182, 54, 0.08);
  border: 1.5px solid rgba(255, 182, 54, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.proximamente-docs-highlight {
  box-shadow: 0 0 0 3px rgba(255, 182, 54, 0.8), 0 10px 30px rgba(255, 182, 54, 0.35) !important;
  transform: translateY(-2px);
  border-color: var(--c-solar) !important;
}

[data-theme="dark"] .proximamente-docs-banner {
  background: rgba(255, 182, 54, 0.12) !important;
  border-color: rgba(255, 182, 54, 0.45) !important;
}

/* Tarjetas y Contenedores */
[data-theme="dark"] .minimal-card,
[data-theme="dark"] .travel-exp-card,
[data-theme="dark"] .textil-large-card,
[data-theme="dark"] .travel-trust-banner,
[data-theme="dark"] .campeonato-sede-flex,
[data-theme="dark"] .campeonato-results-box,
[data-theme="dark"] .apartado-latam-box,
[data-theme="dark"] .team-expandable-card,
[data-theme="dark"] .team-member-card,
[data-theme="dark"] .future-banner-box,
[data-theme="dark"] .produccion-type-card {
  background: #162035 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .team-photo-placeholder {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .minimal-tag {
  background-color: rgba(91, 186, 188, 0.18) !important;
  border-color: rgba(91, 186, 188, 0.4) !important;
  color: #5BBABC !important;
}

[data-theme="dark"] .travel-trust-badge {
  color: #5BBABC !important;
  background: rgba(91, 186, 188, 0.2) !important;
  border-color: rgba(91, 186, 188, 0.4) !important;
}

[data-theme="dark"] .travel-status-pill.past {
  background: rgba(91, 186, 188, 0.2) !important;
  color: #5BBABC !important;
  border: 1px solid rgba(91, 186, 188, 0.35);
}

[data-theme="dark"] .travel-status-pill.upcoming {
  background: rgba(255, 182, 54, 0.2) !important;
  color: #FFB636 !important;
  border: 1px solid rgba(255, 182, 54, 0.35);
}

.latam-doc-solar-text {
  color: #B37D00;
}

[data-theme="dark"] .latam-doc-solar-text {
  color: #FFB636 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] .travel-band-name,
[data-theme="dark"] .textil-card-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] p {
  color: #94A3B8;
}

[data-theme="dark"] .travel-origin-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .travel-tabs-nav {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .travel-tab-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .travel-tab-btn.is-active {
  background: #1E2B45 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .travel-director-quote {
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .travel-director-quote p {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .travel-director-author {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .travel-gallery-thumb {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .textil-gallery-item {
  background: #121A2B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .textil-item-info {
  background: #121A2B !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .textil-item-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] .textil-item-tag {
  color: #94A3B8 !important;
}

[data-theme="dark"] .textil-card-desc {
  color: #94A3B8 !important;
}

[data-theme="dark"] .textil-card-footer {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .textil-tag-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}

[data-theme="dark"] .cintillo-screen-bar {
  background: linear-gradient(90deg, #0D1322 0%, #151D30 50%, #0D1322 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cintillo-text-slender {
  color: #F8FAFC !important;
}

[data-theme="dark"] footer {
  background-color: #080D18 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .modal-box {
  background-color: #162035 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal-structured-footer {
  background-color: #111a2d !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .modal-box input,
[data-theme="dark"] .modal-box select,
[data-theme="dark"] .modal-box textarea {
  background-color: #0D1322 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .modal-box label {
  color: #F8FAFC !important;
}

[data-theme="dark"] .producciones-subnav {
  background: rgba(13, 19, 34, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .subnav-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}

[data-theme="dark"] .subnav-pill.is-active {
  background: #1E2B45 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .results-table-row {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .results-table-row td {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .btn-team-trigger {
  background: #162035 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .btn-team-trigger:hover,
[data-theme="dark"] .btn-team-trigger.is-active {
  background: #1C2942 !important;
  border-color: var(--c-primary) !important;
}

[data-theme="dark"] .btn-team-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] .btn-secondary {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] #espacio-2027,
[data-theme="dark"] [id="espacio-2027"] {
  background-color: #162035 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .producciones-subnav-deck {
  background: rgba(13, 19, 34, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .portal-card {
  background-color: #162035 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .calendar-day-header {
  background: #101726 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .calendar-day-cell {
  background: #162035 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .calendar-day-cell:hover {
  background: #1C2942 !important;
}

[data-theme="dark"] .calendar-day-cell.other-month {
  background: #0E1524 !important;
}

/* Ocultar marca de agua / Powered by Netlify / Drawer */
#netlify-drawer,
netlify-drawer,
iframe#netlify-drawer-frame,
iframe[src*="netlify"],
[data-netlify-deploy-id],
.netlify-drawer-button,
.netlify-feedback-badge,
a[href*="netlify.com"],
[class*="netlify-drawer"],
[id*="netlify-drawer"],
div[style*="z-index: 2147483647"],
div[style*="z-index: 99999999"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  bottom: -9999px !important;
  right: -9999px !important;
}

/* Animación de rotación para sincronización en vivo */
@keyframes forwartCloudSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.refresh-cloud-icon.spinning {
  animation: forwartCloudSpin 0.75s linear infinite !important;
}