/* ============================================================
   INDUSTRIAS DROT SRL — base.css
   Reset, tipografías, tokens y utilidades
   Maqueta de referencia: 1920px
   ============================================================ */

/* ---------- Tipografías (self-hosted) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/pt-sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("../fonts/pt-sans-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Marca — Brandbook DROT (Pantone P 104-8C) */
  --azul:          #005DAC;
  --azul-oscuro:   #004A8A;
  --azul-claro:    #1E77C7;
  --azul-tenue:    rgba(0, 93, 172, 0.12);

  /* Neutros */
  --negro:         #000000;
  --gris-900:      #1A1A1A;
  --gris-800:      #232427;
  --gris-700:      #33353B;
  --gris-600:      #424242;
  --gris-500:      #8F8F8F;
  --gris-400:      #B4B6B9;
  --gris-300:      #D4D6D9;
  --gris-200:      #E5E7EA;
  --gris-100:      #F2F2F2;
  --blanco:        #FFFFFF;

  /* Roles */
  --fondo:         var(--blanco);
  --texto:         var(--gris-900);
  --texto-tenue:   var(--gris-500);
  --borde:         var(--gris-300);

  /* Tipografía */
  --f-titulo:  "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-texto:   "PT Sans", "Segoe UI", system-ui, sans-serif;
  --f-datos:   "Bebas Neue", "PT Sans", sans-serif;

  /* Layout — medidas tomadas del mockup de 1920px */
  --container:     109.9375rem; /* 1759px  */
  --gutter:        3.75rem;     /*   60px  */
  --nav-alto:      8.3125rem;   /*  133px  */
  --radio-pill:    999rem;
  --radio-card:    1.5rem;

  /* Movimiento */
  --ease-suave:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-salida:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-rapida:    .28s;
  --dur-media:     .5s;
  --dur-lenta:     .8s;

  /* Sombras */
  --sombra-nav:    0 .5rem 2.5rem rgba(0, 0, 0, .16);
  --sombra-btn:    0 .375rem 1.25rem rgba(0, 93, 172, .32);
  --sombra-btn-h:  0 .875rem 2.25rem rgba(0, 93, 172, .42);
  --sombra-card:   0 1.25rem 3.5rem rgba(0, 0, 0, .22);
}

/* Escala fluida: 1rem = 16px a 1920px, proporcional hasta 1392px.

   --escala es la perilla global del sitio. Todo el CSS está en rem —los
   únicos px son este clamp y la utilidad .solo-lectura—, así que cambiar
   este número reescala tipografías, cajas, márgenes y el ancho del
   contenedor en la misma proporción, sin tocar nada más. Equivale al zoom
   del navegador: 0.8 se ve igual que mirar el sitio al 80%.

   Fuera de la escala queda, a propósito, el alto del hero de la home
   (100vh): tiene que seguir llenando la pantalla. */
:root { --escala: .8; }

html {
  /* La escala multiplica la rampa y el techo, pero NO el piso de 11.6px. Así
     el achicado se aplica donde sobra pantalla (arriba de 1740px) y por
     debajo el sitio vuelve solo a su tamaño de diseño, sin saltos: en un
     notebook o en un teléfono el texto no se achica. */
  font-size: clamp(11.6px, calc(0.83333vw * var(--escala)), calc(16px * var(--escala)));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }

body {
  font-family: var(--f-texto);
  font-size: 1.6875rem;   /* 27px */
  line-height: 1.35;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Antes recortaba en X para atajar desbordes; eso convertía al body en
     contenedor de scroll y rompía el sticky de la cabecera de la tabla. El
     responsive ya no desborda en ningún ancho, así que no hace falta. */
  overflow-x: clip;
}

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

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

button, input, select, textarea {
  font: inherit; color: inherit; border: 0; background: none;
}
button { cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

:focus-visible {
  outline: .1875rem solid var(--azul);
  outline-offset: .25rem;
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.t-hero {                       /* 83.8px */
  font-size: 5.2375rem;
  font-weight: 500;
  line-height: 1.06;
}
.t-hero strong { font-weight: 700; }

.t-seccion {                    /* 70.1px */
  font-size: 4.38125rem;
  font-weight: 700;
}

.t-card {                       /* 48px */
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.t-bloque {                     /* 30px — títulos azules de ficha */
  font-family: var(--f-titulo);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: .01em;
}

.t-lead {                       /* 34px */
  font-family: var(--f-texto);
  font-size: 2.125rem;
  line-height: 1.3;
}

.t-dato {                       /* 34px — bloque de contacto */
  font-family: var(--f-texto);
  font-size: 2.125rem;
  line-height: 1.32;
}

.t-mini {                       /* 19.7px */
  font-size: 1.23125rem;
}

p + p { margin-top: 1.35em; }

/* ---------- Layout ---------- */
.contenedor {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.contenedor--angosto {
  width: min(100% - var(--gutter) * 2, 101.25rem); /* 1620px */
  margin-inline: auto;
}

.seccion        { padding-block: 8.75rem; }   /* 140px */
.seccion--chica { padding-block: 5.5rem; }
.seccion--gris  { background: var(--gris-200); }
.seccion--oscura{ background: var(--gris-900); color: var(--gris-100); }
.seccion--negra { background: var(--negro);    color: var(--blanco); }

.seccion--oscura .t-seccion,
.seccion--negra  .t-seccion { color: var(--blanco); }

/* ---------- Utilidades ---------- */
.centrado     { text-align: center; }
.solo-lectura { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar-al-contenido {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 999; background: var(--azul); color: var(--blanco);
  padding: .75rem 1.5rem; border-radius: 0 0 .5rem .5rem;
  font-family: var(--f-texto); font-weight: 700; font-size: 1.125rem;
  transition: transform var(--dur-rapida) var(--ease-suave);
}
.saltar-al-contenido:focus { transform: translate(-50%, 0); }

/* Estado inicial de los elementos animados por GSAP.
   Se neutraliza si JS no está disponible. */
[data-anim] { will-change: transform, opacity; }
html.sin-js [data-anim] { opacity: 1 !important; transform: none !important; }