/* ══════════════════════════════════════════════════════════════════════════════
   DEFENSORÍA EN LÍNEA — Capa de utilidades (subconjunto de Tailwind, local)
   ══════════════════════════════════════════════════════════════════════════════
   Por qué existe este archivo en vez del CDN de Tailwind:

   El CDN (cdn.tailwindcss.com) compila las clases en el navegador con ~110 KB de
   JavaScript bloqueante. En un smartphone de gama baja con 3G eso es medio
   segundo largo de espera y, si el CDN falla o está bloqueado, la maquetación se
   cae entera. Este archivo contiene SÓLO las utilidades que el HTML usa (unos
   4 KB sin comprimir), con la misma nomenclatura de Tailwind.

   Cómo mantenerlo:
     · Si agregas una clase de Tailwind nueva en el HTML, defínela aquí.
     · Si el proyecto crece, conviene migrar a un build real:
           npx tailwindcss -i ./src/tw.css -o ./assets/utilidades.css --minify
       Las clases seguirán llamándose igual, así que el HTML no cambia.

   Escala de puntos de quiebre (idéntica a Tailwind):
       sm ≥ 640px   ·   md ≥ 768px   ·   lg ≥ 1024px
   ══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ Normalización base (equivalente al preflight) ═══════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  border: 0 solid;
}
* { margin: 0; padding: 0; }

ul, ol { list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
}
button { cursor: pointer; }

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

[hidden] { display: none !important; }

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }


/* ═══════════════ Display y posicionamiento ═══════════════ */
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.relative { position: relative; }
.z-10     { z-index: 10; }


/* ═══════════════ Flexbox ═══════════════ */
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.shrink-0        { flex-shrink: 0; }


/* ═══════════════ Rejilla ═══════════════ */
.gap-px { gap: 1px; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-2 { row-gap: 0.5rem; }


/* ═══════════════ Espaciado ═══════════════ */
.mx-auto { margin-inline: auto; }

.mt-2  { margin-top: 0.5rem; }
.-mt-2 { margin-top: -0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-7  { margin-top: 1.75rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }

.py-2  { padding-block: 0.5rem; }
.py-3  { padding-block: 0.75rem; }
.py-12 { padding-block: 3rem; }
.py-14 { padding-block: 3.5rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }


/* ═══════════════ Tamaños ═══════════════ */
.w-4  { width: 1rem; }    .h-4  { height: 1rem; }
.w-5  { width: 1.25rem; } .h-5  { height: 1.25rem; }
.w-7  { width: 1.75rem; } .h-7  { height: 1.75rem; }
.w-12 { width: 3rem; }    .h-12 { height: 3rem; }
.w-20 { width: 5rem; }    .h-20 { height: 5rem; }

.max-w-xs  { max-width: 20rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }


/* ═══════════════ Tipografía ═══════════════ */
.text-xs   { font-size: 0.75rem;  line-height: 1.1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.35rem; }
.text-base { font-size: 1rem;     line-height: 1.6rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.8rem; }

.font-normal   { font-weight: 400; }
.font-semibold { font-weight: 600; }

.font-titular { font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; }
.font-cuerpo  { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }

.leading-tight    { line-height: 1.25; }
.leading-relaxed  { line-height: 1.65; }

.uppercase        { text-transform: uppercase; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }

.break-all { word-break: break-all; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════ Color (mapeado a las variables de marca) ═══════════════ */
/* Nombres semánticos, no literales: si la paleta vuelve a cambiar de clara a
   oscura, se reasignan las variables en styles.css y el HTML no se toca.
     .text-tinta       → máximo contraste (énfasis dentro de un párrafo)
     .text-texto       → cuerpo de texto
     .text-texto-suave → texto secundario
     .text-acento      → dorado LEGIBLE como texto (no el dorado decorativo) */
.bg-fondo         { background-color: var(--color-fondo); }
.text-tinta       { color: var(--color-tinta); }
.text-texto       { color: var(--color-texto); }
.text-texto-suave { color: var(--color-texto-suave); }
.text-acento      { color: var(--color-acento-oscuro); }

.rounded-full { border-radius: 9999px; }


/* ═══════════════ Punto de quiebre sm (≥ 640px) ═══════════════ */
@media (min-width: 640px) {
  .sm\:block        { display: block; }
  .sm\:inline       { display: inline; }
  .sm\:hidden       { display: none; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:col-span-2   { grid-column: span 2 / span 2; }
  .sm\:h-14         { height: 3.5rem; }
  .sm\:w-14         { width: 3.5rem; }
  .sm\:py-20        { padding-block: 5rem; }
  .sm\:text-lg      { font-size: 1.125rem; line-height: 1.8rem; }
}


/* ═══════════════ Punto de quiebre md (≥ 768px) ═══════════════ */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ═══════════════ Punto de quiebre lg (≥ 1024px) ═══════════════ */
@media (min-width: 1024px) {
  .lg\:block       { display: block; }
  .lg\:hidden      { display: none; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:py-28       { padding-block: 7rem; }
}