/* ========================================================================== 
   TITAYO — TOKENS Y BASE GLOBAL
   --------------------------------------------------------------------------
   Cambiá acá colores, tamaños globales y márgenes base.
   Bootstrap se carga antes; este archivo define la identidad visual del sitio.
   ========================================================================== */

:root{
  /* Colores */
  --color-bg:#080808;
  --color-bg-deep:#050505;
  --color-text:#f1f0ec;
  --color-text-muted:#c1c1bd;
  --color-line:rgba(255,255,255,.14);

  /* Espaciado global */
  --page-pad:clamp(22px,4vw,72px);
  --header-height:92px;
  --header-height-compact:70px;

  /* Posición común de textos en desktop.
     --desktop-copy-bottom también funciona como margen vertical visual. */
  --desktop-copy-gutter:5.5vw;
  --desktop-copy-bottom:max(8vh,64px);

  /* Tipografía */
  --font-ui:'Inter',Arial,Helvetica,sans-serif;
  --font-display:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  --title-section:clamp(48px,min(7.2vw,11vh),108px);
  --title-hero:clamp(64px,min(10vw,14vh),150px);
  --body-size:clamp(14px,1.15vw,18px);

  /* Responsive: se sobrescriben en responsive.css */
  --mobile-gutter:22px;
  --mobile-copy-max:560px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  background:var(--color-bg);
  color:var(--color-text);
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-ui);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}

body.is-loading,
body.menu-open{overflow:hidden}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,video{display:block;max-width:100%;height:auto}

/* Bootstrap puede agregar márgenes propios a headings/párrafos; los anulamos. */
h1,h2,h3,p{margin-top:0}
address{margin:0;font-style:normal}

/* Accesibilidad */
a:focus-visible,
button:focus-visible{outline:2px solid #fff;outline-offset:4px}

.skip-link{
  position:fixed;
  z-index:10000;
  left:16px;
  top:16px;
  padding:10px 14px;
  background:#fff;
  color:#050505;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  transform:translateY(-180%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:3px}
#main-content:focus{outline:none}