/* ── Reset moderno ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Las animaciones .tp-reveal (y la cinta .tp-hero__ribbon, que
     sobresale a propósito por la derecha) usan transform para
     empezar fuera de pantalla antes de aparecer al hacer scroll.
     Sin esto, esos px "fuera de pantalla" cuentan como overflow real
     del documento y agregan una barra de scroll horizontal en toda
     la página, en cualquier ancho. */
  overflow-x: hidden;
  font-size: 100%; /* fijo por debajo de 1024px, ver el media query de abajo */
}

/* Regla obligatoria (2026-09-21): de 1024px hacia arriba una sola
   estructura que escala con el tamaño de pantalla, nunca con px
   fijos. Escalar el font-size del <html> acá hace que TODO lo demás
   (ya expresado en rem) crezca gratis por herencia, sin envolver cada
   propiedad en su propio clamp(). Fórmula validada en Maqsa (ver
   CLAUDE.md, "Cumplir 'cero px' en pantallas grandes"): con
   MIN=16px/MAX=20px (100%/125%) y V1=1024px/V2=2560px,
   vw_coef = (20-16)/(2560-1024)*100 = 0.26; constante% = 16/16 -
   0.26/100*1024 = 83.33%. */
@media (min-width: 64em) {
  html {
    font-size: clamp(100%, 83.33% + 0.26vw, 125%);
  }
}

/* El navbar es fixed y no reserva espacio en el documento: sin esto,
   al hacer clic en un enlace del menú (#isos, #nosotros, etc.) el
   scroll suave deja la sección pegada al borde superior real del
   viewport, y el navbar (72px, o 64px ya con scroll) tapa el inicio
   del título. 6rem cubre el caso más alto (72px) con margen. */
section[id] {
  scroll-margin-top: 6rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: #334155;
  background-color: var(--imbo-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* mismo motivo que en html, algunos navegadores
    solo respetan overflow-x en uno de los dos según el elemento que
    tenga scroll real */
}

/* ── Imágenes responsivas ── */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* ── Tipografía ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--imbo-white);
}

h1 { font-size: var(--fs-5xl); font-weight: 900; letter-spacing: -0.04em; }
h2 { font-size: var(--fs-4xl); font-weight: 800; }
h3 { font-size: var(--fs-2xl); font-weight: 700; }
h4 { font-size: var(--fs-xl);  font-weight: 600; }
h5 { font-size: var(--fs-lg);  font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; }

p {
  max-width: 65ch;
}

/* ── Elementos de formulario ── */
input,
button,
textarea,
select {
  font: inherit;
}

/* ── Links ── */
a {
  color: inherit;
  text-decoration: none;
}

/* ── Utilidades de color ── */
.text-orange { color: var(--imbo-orange); }

/* ── Listas ── */
ul, ol {
  list-style: none;
}

/* ── Accesibilidad: foco visible ── */
:focus-visible {
  outline: 0.125rem solid var(--imbo-orange);
  outline-offset: 0.1875rem;
  border-radius: var(--radius-sm);
}

/* ── Accesibilidad: oculto visualmente, presente para lectores de
   pantalla/buscadores (ej. el <h1> real de una sección cuyo texto
   quedó "pintado" dentro de una imagen, como el hero de Techo Propio) ── */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Accesibilidad: saltar al contenido (solo visible con teclado) ── */
.skip-link {
  position: absolute;
  top: -6.25rem;
  left: 1rem;
  z-index: 9999;
  background: var(--imbo-dark);
  color: var(--imbo-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ══════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA (controladas por JS + IntersectionObserver)
══════════════════════════════════════════════════════ */
.fade-in-up {
  opacity: 0;
  transform: translateY(1.875rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   SCROLLBAR — Diseño IMBO (azul + amarillo)
══════════════════════════════════════════════════════ */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--imbo-dark-2) #1a1d1f;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: #1a1d1f;
}

::-webkit-scrollbar-thumb {
  background: var(--imbo-dark-2);
  border-radius: 0.25rem;
  border: 0.125rem solid #1a1d1f;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--imbo-orange);
}