/* =========================================================
   global.css — LIMPIO (reset + layout + utils)
   (NO debe mandar estilos de UI específica)
========================================================= */

/* =========================
   RESET + BASE
========================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  min-height: 100%;
  margin: 0;
  padding: 0;
}

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

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

a{
  color: inherit;
}

/* =========================
   TYPO (neutral)
========================= */
:root{
  /* scale */
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;

  --container: 1200px;
  --gutter: 16px;

  /* readable defaults */
  --text-base: 14px;
  --text-sm: 13px;
  --text-xs: 12px;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  /* evita scroll horizontal por sombras/glows */
  overflow-x: hidden;
}

/* Headings default */
h1, h2, h3{
  line-height: 1.12;
  margin: 0;
}
p{
  margin: 0;
}

/* =========================
   CONTAINER + SPACING
========================= */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* sección default (si te sirve en otras páginas) */
.section{
  padding: 24px 0;
}

/* =========================
   ACCESSIBILITY
   - Usa tus tokens si existen (Freediamantes.css)
   - Fallback seguro si no existen
========================= */
:focus-visible{
  outline: 2px solid var(--pink, rgba(212,3,225,.55));
  outline-offset: 3px;
  border-radius: 10px;
}

/* =========================
   UTILS (chiquitas, útiles)
========================= */
.hidden{ display: none !important; }
.center{ display: grid; place-items: center; }
.flex{ display: flex; }
.flex-col{ display: flex; flex-direction: column; }
.gap-8{ gap: 8px; }
.gap-12{ gap: 12px; }
.gap-16{ gap: 16px; }
.mt-8{ margin-top: 8px; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }
.mt-24{ margin-top: 24px; }

/* =========================
   FORM BASICS (neutral)
   (Freediamantes.css ya estiliza .cb-input y .cb-btn)
========================= */
input, textarea, select{
  border-radius: 10px;
}

button{
  border: 0;
  background: transparent;
}

/* =========================
   RESPONSIVE GUTTERS
========================= */
@media (max-width: 720px){
  :root{
    --gutter: 14px;
  }
}

@media (max-width: 420px){
  :root{
    --gutter: 12px;
  }
}