/* ============================================================
   Juárez Protege — Tokens de diseño (§1 del brief)
   ============================================================ */
:root {
  /* Color */
  --naranja: #DB5A24;
  --naranja-oscuro: #B8461A;
  --durazno: #FCEEE5;
  --blanco: #FFFFFF;
  --tinta: #241C17;
  --tinta-60: #6E635B;
  --linea: #ECE3DC;

  /* Tipografía */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --fs-hero: clamp(2.5rem, 6vw, 4rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --lh-body: 1.6;

  /* Espaciado (escala 4/8) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Radios */
  --radio-tarjeta: 16px;
  --radio-boton: 999px; /* píldora, guiño al original */
  --radio-input: 12px;

  /* Contenedor */
  --ancho-max: 1200px;
  --pad-lateral: 24px;

  /* Sombra sutil para hover */
  --sombra-hover: 0 6px 20px rgba(36, 28, 23, 0.10);

  /* Carrusel: lado fijo del slide (§2 brief 2c) */
  --foto-lado: 200px;

  /* Transiciones */
  --dur: 250ms;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}

@media (max-width: 640px) {
  :root {
    --pad-lateral: 16px;
    --foto-lado: 140px;
  }
}