/* ============================================
   FUENTES
   ============================================ */

@font-face {
  font-family: 'Gregor';
  src: url('./font/GREGOR (1).OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('./font/Nunito-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
}

/* ============================================
   VARIABLES CSS - COLORES
   ============================================ */

:root {
  --color-1: #2B0A1D;
  --color-2: #531337;
  --color-3: #982365;
  --color-4: #AA2670;
  --color-5: #DF298F;
  --color-6: #FF21D1;
  --color-7: #FF51DB;
  --color-8: #F87ADE;
  --color-9: #FFACEE;
  --color-10: #FFC9F4;
}

/* ============================================
   FUENTE POR DEFECTO
   ============================================ */

* {
  font-family: 'Nunito';
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */

/* H1 - Fuente Gregor con clamp */
h1 {
  font-family: 'Gregor', sans-serif !important;
  font-size: clamp(24px, 2.5vw + 16px, 40px);
  line-height: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 40px !important;
    line-height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 500px) {
  h1 {
    font-size: 24px !important;
    line-height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

/* H2 - Fuente Nunito weight 600 */
h2 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 1.75vw + 14px, 32px);
  line-height: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

@media (min-width: 1024px) {
  h2 {
    font-size: 32px !important;
    line-height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 500px) {
  h2 {
    font-size: 18px !important;
    line-height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

/* H3 - Fuente Nunito */
h3 {
  font-family: 'Nunito', sans-serif !important;
  margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

/* H4 - Fuente Nunito */
h4 {
  font-family: 'Nunito', sans-serif !important;
  margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

/* Párrafos - Fuente Nunito */
p {
  font-family: 'Nunito', sans-serif !important;
  font-size: clamp(12px, 0.5vw + 14px, 16px);
}

@media (min-width: 1024px) {
  p {
    font-size: 16px !important;
  }
}

@media (max-width: 500px) {
  p {
    font-size: 12px !important;
  }
}

/* ============================================
   CLASES DE COLORES
   ============================================ */

.color-1 {
  color: var(--color-1) !important;
}

.color-2 {
  color: var(--color-2) !important;
}

.color-3 {
  color: var(--color-3) !important;
}

.color-4 {
  color: var(--color-4) !important;
}

.color-5 {
  color: var(--color-5) !important;
}

.color-6 {
  color: var(--color-6) !important;
}

.color-7 {
  color: var(--color-7) !important;
}

.color-8 {
  color: var(--color-8) !important;
}

.color-9 {
  color: var(--color-9) !important;
}

.color-10 {
  color: var(--color-10) !important;
}

/* Clases para background-color */
.bg-color-1 {
  background-color: var(--color-1) !important;
}

.bg-color-2 {
  background-color: var(--color-2) !important;
}

.bg-color-3 {
  background-color: var(--color-3) !important;
}

.bg-color-4 {
  background-color: var(--color-4) !important;
}

.bg-color-5 {
  background-color: var(--color-5) !important;
}

.bg-color-6 {
  background-color: var(--color-6) !important;
}

.bg-color-7 {
  background-color: var(--color-7) !important;
}

.bg-color-8 {
  background-color: var(--color-8) !important;
}

.bg-color-9 {
  background-color: var(--color-9) !important;
}

.bg-color-10 {
  background-color: var(--color-10) !important;
}

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-3);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-7);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-6);
}

/* Ocultar botones de flechas en Webkit */
::-webkit-scrollbar-button {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-7) var(--color-3);
}
/* ================================
   FONDO GLOBAL MAPA INTERACTIVO CLANES
   ================================ */

.bg-clanes {
    --clanes-bg: #b00970; /* tono morado base, ajústalo si quieres */
    background: var(--clanes-bg);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Contenedor del texto animado */
.clanes-marquee {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none; /* no bloquea clics en nada */
}

/* Capas de texto */
.clanes-layer {
    position: absolute;
    left: -50%;
    width: 200%;              /* más ancho para que el loop sea suave */
    white-space: nowrap;
    font-family: 'Gregor', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI" !important;
    font-weight: 900;
    letter-spacing: 0em;
    word-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.05;            /* textos opacos como en el PDF */
}

/* Tamaños y posiciones distintas para simular profundidad */
.clanes-layer--1 {
    top: -18%;
    font-size: clamp(10rem, 16vw, 12rem) !important;
    animation: clanes-left 60s linear infinite;
}
.clanes-layer-0 {
    top: 15%;
    font-size: clamp(2.2rem, 6vw, 4.3rem) !important;
    animation: clanes-right 58s linear infinite;
}
.clanes-layer-1 {
    top: 22%;
    font-size: clamp(10rem, 16vw, 12rem) !important;
    animation: clanes-left 60s linear infinite;
}

.clanes-layer-2 {
    top: 54%;
    font-size: clamp(2.2rem, 6vw, 4.3rem) !important;
    animation: clanes-right 58s linear infinite;
}

.clanes-layer-3 {
    top: 60%;
    font-size: clamp(10rem, 16vw, 12rem) !important;
    animation: clanes-left 60s linear infinite;
}

.clanes-layer-4 {
    top: 90%;
    font-size: clamp(2.2rem, 6vw, 4.3rem) !important;
    animation: clanes-right 58s linear infinite;
}
.clanes-layer-5 {
    top: 110%;
    font-size: clamp(2.2rem, 6vw, 4.3rem) !important;
    animation: clanes-right 58s linear infinite;
}
/* Animaciones: unas van a la izquierda, otras a la derecha */
@keyframes clanes-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes clanes-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}