@import 'scroll.css';
@import 'map.css';

@font-face {
  font-family: 'Desgaste';
  src: url('DesgasteVF.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('neuemontreal-regular-webfont.woff2') format('woff2'),
       url('neuemontreal-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;

}

@font-face {
  font-family: 'Neue Montreal Light';
  src: url('neuemontreal-light-webfont.woff2') format('woff2'),
       url('neuemontreal-light-webfont.woff') format('woff');
  font-weight: 100;
  font-style: normal;

}


@font-face {
  font-family: 'Neue Montreal Bold';
  src: url('neuemontreal-bold-webfont.woff2') format('woff2'),
       url('neuemontreal-bold-webfont.woff') format('woff');
  font-weight: 800;
  font-style: normal;

}

:root {
  --font-base: 'Neue Montreal', Helvetica, Arial, Lucida, sans-serif;
  --font-light: 'Neue Montreal Light', Helvetica, Arial, Lucida, sans-serif;
  --font-bold: 'Neue Montreal Bold', Helvetica, Arial, Lucida, sans-serif;
  --font-desgaste: 'Desgaste', Helvetica, Arial, Lucida, sans-serif;
  --color-text: rgb(0, 0, 0);
  --color-bg: #2e4351;
  --color-testimonio-base: #cfcfcf;
}
/* ---------------------------
   TIPOGRAFÍA BASE DEL SITIO
--------------------------- */
body {
  font-family: var(--font-base);
  margin: 0;
  padding: 0;
  background: white;
  color: #111;
  min-height: 100vh;
  overflow-y: auto;
}

.desgaste {
  font-family: var(--font-desgaste);
  /* 
    TIPOGRAFÍA DESGASTE:
    wght: default: 100 (peso por defecto)
    max: 900 (peso máximo)
    min: 100 (peso mínimo)
    tag: "wght" (etiqueta de la variable)
  */
  font-variation-settings: 'wght' 100; /* ← peso (900 es el peso máximo, así se declara en css) */
}

/* ---------------------------
 TÍTULO PRINCIPAL (desgaste paralelismo)
--------------------------- */
.titulo {
  font-size: 80px;    /* ← CAMBIA EL TAMAÑO AQUÍ  (PARALELISMO) */
  margin: 80px 10px 80px;  /* ← controla la posición */
  letter-spacing: -2px;
}

/* Si quieres aplicar textura al título (opcional) */
/* .titulo {
  background: url("textura.png") no-repeat center;
  -webkit-background-clip: text;
  color: transparent;
} */

/* ---------------------------
 SUBTÍTULO DERECHA
--------------------------- */
.subtitulo {
  font-size: 4px;      /* ← tamaño del texto a la derecha */
  font-weight: 100;     /* ← peso */
  text-align: right;
  margin-right: 40px;
  margin-top: -60px;    /* ← mueve hacia arriba/abajo */
  line-height: 1.2;
}

/* ---------------------------
 TEXTO DESCRIPTIVO
--------------------------- */
.descripcion {
  max-width: 900px;
  font-size: 100px;       /* ← tamaño del párrafo */
  font-weight: 400;      /* ← peso */
  line-height: 1.45;
  margin: 140px auto 0 auto;  /* ← distancia respecto del título */
  padding: 0 40px;            /* ← margen izquierdo/derecho */
}
/* ----subtitulo explicacion ------ */
.contenido {
  font-size: 30px;
  font-weight: 50;
  padding: 1em;
  /* pointer-events: none; */
  position: relative;
  z-index: 0;
}

/* ---------------------------
   Ajustes para Lenis / scroll nativo
--------------------------- */
html.lenis {
  height: auto;
}

body.lenis,
body.lenis-smooth {
  overflow-y: auto;
}

.lenis.lenis-stopped {
  overflow: hidden;
}