/**
 * base.css — Sussanich Turismo
 * Resets, tipografía base, utilidades globales.
 * Todos los colores vía custom properties de tokens.css.
 * Generado: 2026-05-05 | Paso 1
 */

/* ─── RESET (Eric Meyer simplificado + box-sizing universal) ─────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

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

/* ─── TIPOGRAFÍA BASE ────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
}

h1 { font-family: var(--font-display); font-size: var(--fs-h1);      font-weight: var(--fw-regular);  line-height: var(--lh-tight); }
h2 { font-family: var(--font-display); font-size: var(--fs-h2);      font-weight: var(--fw-regular);  line-height: var(--lh-snug); max-width: 500px; }
h3 { font-family: var(--font-body);    font-size: var(--fs-h3);      font-weight: 500;                line-height: var(--lh-base); }
h4 { font-family: var(--font-body);    font-size: var(--fs-h4);      font-weight: var(--fw-semibold); line-height: var(--lh-base); }
h5 { font-family: var(--font-body);    font-size: var(--fs-h5);      font-weight: var(--fw-semibold); line-height: var(--lh-base); }
h6 { font-family: var(--font-body);    font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }

p { margin-bottom: var(--space-3); line-height: var(--lh-normal); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-base);
}
a:hover { color: var(--color-primary-hover); }

strong, b { font-weight: var(--fw-bold); }
em, i     { font-style: italic; }

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

/* ─── CONTENEDORES ────────────────────────────────────────────────────────── */
/* .container / .container-lg → 80% viewport
 * .container-md              → 70% viewport
 * .container-sm              → 60% viewport
 * `!important` necesario para ganarle a Bootstrap 3.3.7 `.container { max-width: 1170px }`
 */
.container,
.container-lg {
  width: 80% !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0;
}

.container-md {
  width: 70% !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0;
}

.container-sm {
  width: 60% !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0;
}

.container--narrow {
  max-width: var(--container-narrow) !important;
}

@media (max-width: 768px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm { width: 92% !important; }
}

/* ─── UTILIDADES DE TEXTO ────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-on-dark { color: var(--color-text-on-dark); }

.kicker {
  font-family: var(--font-display); /* Minerva (decisión Yago 2026-05-18) */
  font-size: var(--fs-kicker);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.kicker--muted {
  color: var(--color-text-muted);
}

/* ─── ACCESIBILIDAD ──────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Outlines de foco completamente eliminados (decisión Yago 2026-05-18 — UX).
 * Bootstrap 3 inyecta outlines azules al :focus de a/button/input que rompen el
 * look del sitio. `!important` necesario porque Bootstrap los aplica con la misma
 * especificidad y se carga después.
 * Trade-off: pérdida de a11y para usuarios de teclado (no ven dónde están al tabular).
 * Si se quiere recuperar a11y sin el outline azul fome, restaurar la regla anterior:
 *   :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
 */
:focus,
:focus-visible,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── UTILIDADES DE LAYOUT ───────────────────────────────────────────────── */
.d-flex      { display: flex; }
.d-block     { display: block; }
.d-none      { display: none; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }

/* ─── SECCIÓN ────────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--gutter-section);
}

.section--surface {
  background-color: var(--color-surface);
}

/* ─── DIVIDER ────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-3);
}

/* ─── RESPONSIVE BÁSICO ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* px, no rem: el reset rompe la base del rem (DECISIONS 2026-05-18) */
  h1 { font-size: clamp(32px, 8vw, 48px); }
  h2 { font-size: clamp(24px, 5vw, 32px); }
  .container { padding-inline: var(--space-3); }
}