/* ==========================================================================
   variables.css — sistema de diseño alineado a cademaprop.com.ar
   Tokens tomados del sitio real (globals.css / navbar.tsx / Footer.tsx):
   rojo #c60c23 como acento único, tipografías Univers + Montserrat.
   ========================================================================== */

/* Montserrat: MISMO archivo y MISMO único peso (400) que el globals.css real.
   A propósito no se agregan variantes 500/600/700 reales — el sitio real no
   las tiene, y el navegador arma un bold "falso" sobre este único peso 400
   cuando .nav-item pide font-weight:600 o Tailwind pide font-bold (700).
   Cargar un Montserrat con pesos reales (ej. Google Fonts) se ve prolijo
   pero es un diseño de letra distinto — no matchea el sitio real. */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Fuentes propias del sitio (Univers, Nexa). Si este proyecto se sirve desde
   el mismo dominio/deploy que el sitio principal, estas rutas van a resolver
   igual que en cademaprop.com.ar (mismo /fonts/). En preview standalone,
   si no existen, cae automáticamente al fallback Helvetica/Arial —
   no rompe nada, solo no se ve la tipografía exacta hasta integrarlo. */
@font-face {
  font-family: 'UniversRegular';
  src: url('/fonts/univers-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'UniversBold';
  src: url('/fonts/univers-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — idéntico al sitio principal, un solo acento */
  --color-bg: #FFFFFF;
  --color-bg-suave: #F7F6F4;
  --color-bg-elevado: #FFFFFF;
  --color-ink: #171717;
  --color-ink-suave: #5F5A53;
  --color-primario: #C60C23;
  --color-primario-oscuro: #A30A1C;
  --color-negro: #111111;
  --color-acento: #C60C23;
  --color-acento-suave: #FBE4E7;
  --color-alerta: #C60C23;
  --color-linea: #E5E2DC;
  --color-linea-fuerte: #D4D0C8;

  /* Superficies de estado (categorías del simulador) */
  --color-accesible-bg: #FBE4E7;
  --color-cercano-bg: #F2F0EC;
  --color-fuera-bg: #F2F0EC;

  /* Tipografía — igual que globals.css del sitio */
  --font-display: 'UniversBold', 'Montserrat', Helvetica, Arial, sans-serif;
  --font-body: 'UniversRegular', Helvetica, Arial, sans-serif;
  --font-nav: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-mono: 'Montserrat', Helvetica, Arial, sans-serif;

  /* Escala tipográfica */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* Forma — el sitio real usa bordes rectos/sutiles (btn-split radius 4px),
     acá se mantiene un poco más redondeado por ser tarjetas tipo Airbnb,
     pero menos "suave" que la propuesta anterior, para no desentonar */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 16px;
  --sombra-card: 0 1px 2px rgba(17, 17, 17, 0.05), 0 8px 20px rgba(17, 17, 17, 0.08);
  --sombra-card-hover: 0 4px 8px rgba(17, 17, 17, 0.07), 0 16px 32px rgba(17, 17, 17, 0.14);

  /* Transiciones */
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapido: 160ms;
  --dur-medio: 300ms;

  /* Alto del navbar, usado para paddear el contenido debajo */
  --alto-navbar: 84px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Nota: antes había una regla global h1,h2,h3{font-family:...} acá, pero
   se filtraba al <h1> del hero real (que no tiene ese override en el sitio
   real — hereda la fuente del body con negrita falsa). Ahora cada título
   propio del simulador (.formulario-titulo, .resultados-titulo,
   .seccion-titulo, .tarjeta-nombre) define su font-family explícitamente
   en su propio archivo, así no hace falta un selector global de elemento
   que termine afectando marcado que no es nuestro. */
h1, h2, h3 { margin: 0; }

button { font-family: inherit; cursor: pointer; }

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

:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}