/* Mazda Panamá: sobrio y premium. Negro casi puro (#0b0b0c), blanco, una escala de grises cálidos y Soul Red Crystal como único acento,
   usado con medida: botón principal, etiqueta «Nuevo», cita, enfoque y barra de carga del giro. Titulares en Manrope (OFL, ver
   fonts/OFL.txt) con tracking cerrado, mucho aire, líneas finas y las fotos haciendo el trabajo. Todo lo que no está aquí lo
   resuelve css/sitio.css con estos tokens. */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta: negro, blanco, grises cálidos y Soul Red Crystal */
  --negro: #0b0b0c;
  --blanco: #ffffff;
  --gris-50: #f8f7f5;
  --gris-100: #f1efec;
  --gris-200: #e4e1dc;
  --gris-300: #d0ccc5;
  --gris-400: #a9a49b;
  --gris-500: #7e7a72;
  --gris-600: #5c5851;
  --gris-700: #3f3c37;
  --rojo: #9b0f12;
  --rojo-hondo: #7d0b0e;
  --rojo-claro: #e0444a;

  --fondo: var(--blanco);
  --superficie: var(--blanco);
  --superficie-2: var(--gris-100);
  --suave: var(--gris-50);
  --tinta: var(--negro);
  --tinta-2: var(--gris-700);
  --tinta-3: var(--gris-500);
  --linea: var(--gris-200);
  --linea-fuerte: var(--gris-300);
  --acento: var(--rojo);
  --acento-hondo: var(--rojo-hondo);
  --acento-texto: var(--rojo);
  --acento-texto-oscuro: var(--rojo-claro);
  --sobre-acento: #ffffff;
  --sobre-negro: #f6f4f1;
  --estudio: #ffffff;
  --etiqueta: var(--gris-500);

  /* Formas: casi rectas, como una pieza de carrocería recién cortada */
  --radio: 2px;
  --radio-campo: 2px;
  --radio-boton: 2px;
  --radio-chip: 2px;
  --radio-flotante: 8px;
  --radio-burbuja: 10px;
  --margen: clamp(20px, 5vw, 64px);
  --ancho: 1320px;
  --nav: 76px;

  /* Tipografía */
  --fuente: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titulo-peso: 500;
  --titulo-tracking: -.035em;
  --titulo-interlineado: 1.03;
  --etiqueta-tracking: .22em;
  --boton-tracking: .025em;

  /* Logo: el emblema oficial de mazda.com.pa como máscara, junto al nombre */
  --logo: url('/img/marca/emblema.webp');
  --logo-ancho: 42px;
  --logo-alto: 38.7px;

  /* WhatsApp en una banda gris cálida: el verde queda en los íconos */
  --wa-fondo: var(--gris-100);
  --wa-tinta: var(--negro);
  --wa-tinta-2: var(--gris-700);
  --wa-tarjeta: var(--blanco);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: var(--negro);
    --superficie: #141415;
    --superficie-2: #1d1d1f;
    --suave: #101011;
    --tinta: #f4f2ef;
    --tinta-2: #bdb9b2;
    --tinta-3: #8f8b83;
    --linea: #262625;
    --linea-fuerte: #3a3935;
    --acento-texto: var(--rojo-claro);
    --etiqueta: #8f8b83;
    --wa-fondo: #161617;
    --wa-tinta: #f4f2ef;
    --wa-tinta-2: #bdb9b2;
    --wa-tarjeta: #1d1d1f;
  }
}

body { font-weight: 400; font-feature-settings: 'ss01' on, 'cv11' on; }

/* Titulares: grandes, ligeros y con el tracking cerrado */
.titulo--xl { font-weight: 300; letter-spacing: -.048em; line-height: .98; font-size: clamp(2.9rem, 7.4vw, 6.6rem); }
.titulo--l { font-size: clamp(2.2rem, 4.8vw, 4.1rem); letter-spacing: -.04em; }
.titulo--m { font-weight: 500; }
.portada .titulo { max-width: 13ch; }
.etiqueta { font-weight: 600; font-size: .72rem; }
.portada .etiqueta { display: flex; align-items: center; gap: 14px; }
.portada .etiqueta::before { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .7; }
.bajada { font-weight: 400; }

/* Más aire entre secciones */
.seccion { padding: clamp(96px, 12vw, 176px) 0; }
.seccion--ajustada { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.encabezado { margin-bottom: clamp(44px, 6vw, 80px); }

/* Barra: emblema y nombre en mayúsculas separadas */
.logo__texto { font-weight: 600; font-size: .86rem; letter-spacing: .3em; }
.logo__texto small { font-weight: 500; letter-spacing: .5em; }
.nav__menu a { font-size: .9rem; letter-spacing: .01em; }

/* Botones: rectángulos finos; el rojo solo en la acción principal */
.boton { font-size: .95rem; min-height: 54px; padding: 0 30px; }
.boton--vidrio { border-color: rgb(255 255 255 / .5); }

/* Tarjetas de modelo: la foto de estudio ocupa todo el recuadro (el estudio de las fotos es blanco) y una línea fina la separa del texto */
.modelo__nombre { font-size: 1.6rem; font-weight: 500; letter-spacing: -.035em; }
.modelo__precio strong { font-weight: 500; letter-spacing: -.02em; }
.modelo__nuevo { color: var(--rojo); }
.seccion--oscura .modelo__nuevo { color: var(--rojo-claro); }

/* Cifras, bancos y tablas: cifras grandes y ligeras */
.cifras__fila strong, .banco__bono strong, .mant__precio { font-weight: 400; letter-spacing: -.04em; }
.banco__bono strong { font-size: 1.6rem; }
.mant__precio { font-weight: 300; }

/* La cita de Soul Red: la única línea roja de las bandas oscuras */
.cita { border-left-color: var(--rojo-claro); }
.cita p { font-weight: 400; letter-spacing: -.02em; }

/* Bloque de pie y barra de carga del giro */
.pie { background: var(--negro); }
.giro__carga { background: var(--rojo); }