/* =====================================================================
   RV25 Relojería · VARIABLES (tokens de diseño)
   ---------------------------------------------------------------------
   Todos los colores, letras y medidas de la página salen de aquí.
   Para cambiar el aspecto de toda la página, cambia estos valores;
   el resto de archivos solo usa var(--nombre).

   Puntos de quiebre (se escriben a mano en cada archivo, CSS no
   permite variables dentro de @media):
     · base ............ celulares (se diseña primero para ellos)
     · min-width 720px . tabletas y celulares grandes acostados
     · min-width 1040px  computadores
     · max-width 380px . celulares angostos
     · max-width 340px . celulares muy angostos
   ===================================================================== */

:root {
  /* --- Colores de marca (tomados del logo) --- */
  --noche: #061A28;            /* azul noche del logo */
  --noche-hover: #0E2C42;      /* azul noche al pasar el mouse */
  --noche-superficie: #0D2638; /* cajas sobre fondo azul noche */
  --acento: #409DC6;           /* azul de la V */
  --acento-texto: #1D6A90;     /* acento oscurecido para texto sobre crema */
  --claro: #E0E0E0;            /* gris claro del logo */

  /* --- Fondos cálidos --- */
  --fondo: #F5EFE6;            /* crema */
  --arena: #ECE3D5;            /* superficie un tono abajo */
  --arena-2: #E2D6C3;          /* un tono más */
  --arena-hover: #D8CAB4;      /* arena al pasar el mouse */
  --marfil: #FBF8F3;           /* un tono MÁS CLARO que el fondo: vitrinas de los relojes */

  /* --- Texto --- */
  --tinta: #061A28;            /* texto principal */
  --tinta-suave: #3D4954;      /* texto secundario */
  --tinta-sobre-noche: #C9CED4;/* texto secundario sobre azul noche */
  --tinta-placeholder: #7A7F84;
  --ok: #2F6B4A;               /* "Entrega inmediata" (texto) */
  --ok-vivo: #2BB673;          /* punto verde de "Entrega inmediata" (css/componentes/estado.css) */
  --favorito: #A3263A;         /* corazón de favoritos guardado (rojo vino) */
  --portada: #0B2233;         /* fondo de la portada: azul noche un poco más claro */

  /* --- Terceros --- */
  --whatsapp: #25D366;

  /* --- Tipografía --- */
  --letra: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Fraunces", Georgia, "Times New Roman", serif;

  /* --- Medidas --- */
  --margen: 20px;              /* margen lateral de la página */
  --ancho: 1200px;             /* ancho máximo del contenido */
  --seccion: 88px;             /* espacio entre secciones */
  --radio: 4px;                /* esquinas de cajas e imágenes */
  --radio-pildora: 999px;      /* botones redondos */
  --alto-cabecera: 80px;       /* para que los anclajes no queden bajo la barra */
}

@media (min-width: 720px) {
  :root { --margen: 32px; --seccion: 120px; }
}

@media (min-width: 1040px) {
  :root { --margen: 48px; }
}

@media (max-width: 380px) {
  :root { --margen: 16px; }
}