/* ==========================================================================
   KRAVITTAL — global.css
   Sistema de diseño extraído de Figma «Kravittal-20260918» · Page 2
   Lienzo de referencia: 1920 px · contenedor 1596 px · márgenes 162 px
   --------------------------------------------------------------------------
   Los nombres de las variables de color replican literalmente los estilos de
   color de Figma para que el mapeo a Global Colors de Elementor sea 1:1.
   ========================================================================== */

/* --- 0. Fuentes (auto-alojadas) -----------------------------------------
   Montserrat sustituye a Campton (de pago). Inter es la secundaria del
   diseño. Se sirven desde el propio dominio en lugar de Google Fonts: evita
   la transferencia de IP a un tercero (RGPD) y quita una conexión externa.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-300-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- 1. Reset ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }


/* --- 2. Tokens ----------------------------------------------------------- */

:root {

  /* 2.1 Color — un token por estilo de color de Figma ---------------------- */
  --kv-negro-profundo:    #1A1A1A;   /* Negro profundo   (sin uso en Home)   */
  --kv-azul-petroleo:     #21333B;   /* Azul petróleo                        */
  --kv-gris-hielo:        #C4CBD0;   /* Gris Hielo                           */
  --kv-arena-suave:       #EBE0D6;   /* Arena suave  (= Background 03)       */
  --kv-champagne-arena:   #AD8566;   /* Champagne arena                      */
  --kv-champagne-oscuro:  #7A5132;   /* Champagne oscuro                     */
  --kv-white:             #FFFFFF;   /* White                                */
  --kv-bg-01:             #F5EFEB;   /* Background 01 — fondo de página      */
  --kv-bg-02:             #EEE9E5;   /* Background 02 — bandas de sección    */
  --kv-bg-03:             #EBE0D6;   /* Background 03 — cajas interiores     */

  /* 2.2 Roles semánticos — lo que se usa en la maquetación ----------------- */
  --kv-fondo:             var(--kv-bg-01);
  --kv-fondo-banda:       var(--kv-bg-02);
  --kv-fondo-caja:        var(--kv-bg-03);
  --kv-fondo-oscuro:      var(--kv-azul-petroleo);
  --kv-texto:             var(--kv-azul-petroleo);
  --kv-texto-claro:       var(--kv-arena-suave);
  --kv-titulo:            var(--kv-champagne-arena);
  --kv-acento:            var(--kv-champagne-oscuro);
  --kv-borde:             var(--kv-champagne-arena);

  /* 2.3 Tipografía --------------------------------------------------------- */
  /* El diseño usa Campton Light (de pago, René Bieder). Se sustituye por
     Montserrat Light por decisión de proyecto. Cambiar la familia aquí es el
     único punto a tocar si algún día se licencia Campton.                   */
  --kv-font:      "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --kv-font-alt:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --kv-peso-light:   300;
  --kv-peso-regular: 400;

  /* 2.4 Escala tipográfica fluida, anclada al lienzo de 1920 px ------------ */
  /* vw = px_figma / 1920 * 100                                              */
  --kv-fs-h1:      clamp(2.5rem,    4.1667vw, 5rem);       /* 80 px */
  --kv-fs-hero:    clamp(2rem,      3.0208vw, 3.625rem);   /* 58 px */
  --kv-fs-italic:  clamp(1.75rem,   2.5vw,    3rem);       /* 48 px */
  --kv-fs-cita:    clamp(1.5rem,    2.1354vw, 2.5625rem);  /* 41 px */
  --kv-fs-h2:      clamp(1.5rem,    1.875vw,  2.25rem);    /* 36 px */
  --kv-fs-h3:      clamp(1.125rem,  1.3542vw, 1.625rem);   /* 26 px */
  --kv-fs-h4:      clamp(1.0625rem, 1.1458vw, 1.375rem);   /* 22 px */
  --kv-fs-lg:      clamp(1rem,      1.0417vw, 1.25rem);    /* 20 px */
  --kv-fs-md:      clamp(0.9375rem, 0.9375vw, 1.125rem);   /* 18 px */
  --kv-fs-base:    1rem;                                   /* 16 px */
  --kv-fs-sm:      0.875rem;                               /* 14 px */
  --kv-fs-xs:      0.75rem;                                /* 12 px */
  --kv-fs-2xs:     0.625rem;                               /* 10 px */

  /* Interletraje: en Figma «letterSpacing: -3» es un porcentaje, no píxeles.
     A 80 px equivale a -2,4 px; a 36 px, a -1,08 px. De ahí el valor en em. */
  --kv-ls-titulo: -0.03em;

  /* 2.5 Layout ------------------------------------------------------------- */
  --kv-container:  1596px;                          /* ancho de contenido    */
  --kv-gutter:     clamp(1.25rem, 8.4375vw, 162px); /* margen lateral        */
  --kv-header-h:   87px;

  /* 2.6 Espaciado — escala derivada de los saltos reales del diseño -------- */
  --kv-space-3xs:  0.5rem;    /*   8 px */
  --kv-space-2xs:  0.75rem;   /*  12 px */
  --kv-space-xs:   1.25rem;   /*  20 px */
  --kv-space-sm:   2rem;      /*  32 px */
  --kv-space-md:   3.25rem;   /*  52 px */
  --kv-space-lg:   clamp(3rem, 5.2083vw, 6.25rem);   /* 100 px */
  --kv-space-xl:   clamp(4rem, 7.8125vw, 9.375rem);  /* 150 px */
  --kv-space-2xl:  clamp(5rem, 10.4167vw, 12.5rem);  /* 200 px */

  /* 2.7 Movimiento --------------------------------------------------------- */
  --kv-ease:     cubic-bezier(.22, .61, .36, 1);
  --kv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --kv-dur:      .4s;
}


/* --- 3. Base ------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kv-header-h) + 1rem);
}

html { overflow-x: hidden; }

body {
  background: var(--kv-fondo);
  color: var(--kv-texto);
  font-family: var(--kv-font);
  font-weight: var(--kv-peso-light);
  font-size: var(--kv-fs-base);
  line-height: 1.25;                 /* 16/20 del estilo «Cuerpos de texto» */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--kv-champagne-arena); color: var(--kv-white); }

:focus-visible {
  outline: 2px solid var(--kv-champagne-oscuro);
  outline-offset: 3px;
}


/* --- 4. Tipografía ------------------------------------------------------- */

.kv-h1,
.kv-h2,
.kv-h3,
.kv-h4 {
  font-family: var(--kv-font);
  font-weight: var(--kv-peso-light);
}

.kv-h1 {                                   /* Figma: H1 · 80/82 · -3%       */
  font-size: var(--kv-fs-h1);
  line-height: 1.025;
  letter-spacing: var(--kv-ls-titulo);
  color: var(--kv-titulo);
}

.kv-h2 {                                   /* Figma: H2 · 36/40 · -3%       */
  font-size: var(--kv-fs-h2);
  line-height: 1.111;
  letter-spacing: var(--kv-ls-titulo);
}

.kv-h3 {                                   /* Figma: H3 · 26/auto           */
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
}

.kv-h4 {                                   /* Figma: H4 · 22/auto           */
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
}

.kv-hero-title {                           /* Figma: Header Hero · 58/65    */
  font-family: var(--kv-font);
  font-weight: var(--kv-peso-light);
  font-size: var(--kv-fs-hero);
  line-height: 1.12;
  color: var(--kv-champagne-oscuro);
}

.kv-cita {                                 /* Figma: Citas · 41/49          */
  font-size: var(--kv-fs-cita);
  line-height: 1.195;
  text-transform: uppercase;
}

.kv-destacado {                            /* Inter Light Italic 48/56      */
  font-family: var(--kv-font-alt);
  font-weight: var(--kv-peso-light);
  font-style: italic;
  font-size: var(--kv-fs-italic);
  line-height: 1.167;
  letter-spacing: var(--kv-ls-titulo);
}

.kv-texto      { font-size: var(--kv-fs-base); line-height: 1.25; }
.kv-texto--big { font-size: var(--kv-fs-lg);  line-height: 1.15; }  /* 20/23 */

.kv-texto-alt {                            /* Inter Regular 18 px           */
  font-family: var(--kv-font-alt);
  font-weight: var(--kv-peso-regular);
  font-size: var(--kv-fs-md);
  line-height: 1.35;
}

.kv-texto-alt--sm {
  font-family: var(--kv-font-alt);
  font-weight: var(--kv-peso-light);
  font-style: italic;
  font-size: var(--kv-fs-xs);
  line-height: 1.5;
  color: var(--kv-champagne-arena);
}

.kv-etiqueta {                             /* rótulos en versal            */
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--kv-champagne-arena);
}

/* Modificadores de color reutilizables */
.kv-u-titulo  { color: var(--kv-titulo); }
.kv-u-acento  { color: var(--kv-acento); }
.kv-u-claro   { color: var(--kv-texto-claro); }
.kv-u-hielo   { color: var(--kv-gris-hielo); }
.kv-u-blanco  { color: var(--kv-white); }
.kv-u-centro  { text-align: center; }


/* --- 5. Layout ----------------------------------------------------------- */

.kv-container {
  width: min(var(--kv-container), 100% - (var(--kv-gutter) * 2));
  margin-inline: auto;
}

.kv-section { padding-block: var(--kv-space-xl); }

.kv-section--banda      { background: var(--kv-fondo-banda); }
.kv-section--oscura     { background: var(--kv-fondo-oscuro); color: var(--kv-texto-claro); }

/* Enlace de salto para teclado y lectores de pantalla */
.kv-skip {
  position: absolute;
  z-index: 1000;
  left: var(--kv-gutter);
  top: var(--kv-space-3xs);
  padding: var(--kv-space-2xs) var(--kv-space-xs);
  background: var(--kv-azul-petroleo);
  color: var(--kv-white);
  transform: translateY(-250%);
  transition: transform var(--kv-dur) var(--kv-ease);
}
.kv-skip:focus { transform: none; }

/* Sólo para lectores de pantalla */
.kv-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --- 6. Puntos de ruptura ------------------------------------------------ */
/*  Los valores concretos por sección viven en css/pages/*.css y en
    components.css. Aquí sólo se ajustan los tokens globales.               */

@media (max-width: 1199px) {          /* Tablet */
  :root {
    --kv-gutter:   clamp(1.5rem, 5vw, 3.5rem);
    --kv-header-h: 76px;
  }
}

@media (max-width: 767px) {           /* Móvil */
  :root {
    --kv-gutter:   1.25rem;
    --kv-header-h: 68px;
    --kv-ls-titulo: -0.02em;          /* a tamaño pequeño, -3% aprieta       */
  }
  body { line-height: 1.4; }          /* 16/20 es muy cerrado en móvil       */
}