/* 1. Tipografias de la marca: Syne (titulos) + Jost (subtitulos y textos) */
  @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Syne:wght@700;800&display=swap');

  :root{
    --font-titulo:'Syne','Jost',Arial,sans-serif;
    --font-texto:'Jost','Futura',Arial,sans-serif;
    /* Escala de tamanos (tomada de tagheuer.com; es fija, igual en PC y celular) */
    --fs-titulo:22px;    /* titulos principales: portada, listado, generos, favoritos, nombre del reloj */
    --fs-titulo-2:18px;  /* titulos de paneles: Filtros, Ordenar por */
    --fs-seccion:14px;   /* titulos pequenos de seccion */
    --fs-texto:13px;     /* parrafos y descripciones */
    --fs-etiqueta:12px;  /* etiquetas, nombres, precios, botones */
    --gris-texto:#6a6a6a;
    /* Colores de las etiquetas de estado */
    --estado-disponible:#067647;  /* verde */
    --estado-transito:#b98900;    /* amarillo (oscurecido para que se lea sobre blanco) */
    --estado-pedido:#d0021b;      /* rojo */
    --bg:#f7f7f8;--card:#ffffff;--border:#ececef;--border2:#dedee2;
    --black:#09090b;--text:#18181b;--muted:#71717a;--muted2:#a1a1aa;
    --green:#067647;--green-bg:rgba(6,118,71,0.08);
    --blue:#24405f;--blue-bg:rgba(36,64,95,0.08);
    --bronze:#8a6d3a;--bronze-bg:rgba(138,109,58,0.10);
    --gray:#3f3f46;--gray-bg:rgba(63,63,70,0.08);
    --slate:#475569;--slate-bg:rgba(71,85,105,0.09);
    --red:#7a2e3a;--red-bg:rgba(122,46,58,0.08);
    --r-lg:14px;--r-md:9px;--r-pill:999px;
    --shadow:0 1px 2px rgba(9,9,11,0.04),0 1px 3px rgba(9,9,11,0.03);
    --shadow-lg:0 8px 24px -6px rgba(9,9,11,0.10),0 2px 6px rgba(9,9,11,0.05);
    --shadow-xl:0 24px 48px -12px rgba(9,9,11,0.20),0 4px 12px rgba(9,9,11,0.08);
    --ease:cubic-bezier(0.32,0.72,0,1);--fast:140ms;--base:220ms;
  }
  
  *{box-sizing:border-box;margin:0;padding:0;}
  /* campos y botones usan la letra de la pagina (el navegador por defecto pone la del sistema) */
  button,input,select,textarea{font-family:var(--font-texto);}
  input::placeholder{font-family:var(--font-texto);}
  input[type=search]{-webkit-appearance:none;appearance:none;}
  input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;}

  /* 2. Asignación de la fuente a toda la página (body) */
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-texto);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .fav-count {
    font-size: 10px;
    font-weight: 600;
    color: #24405f; /* Un tono azul oscuro elegante similar a la imagen */
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: #ffffff;
    padding: 0 3px;
    border-radius: 10px;
  }

  header { background: #ffffff; border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top,0px); position: relative; }
  .header-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1200px; margin: 0 auto; }
  .header-left, .header-right { display: flex; align-items: center; gap: 20px; flex: 1; }
  .header-right { justify-content: flex-end; }
  .header-center { flex: 1; display: flex; justify-content: center; }
  .header-center img { height: 26px; filter: invert(1); } 

  .menu-btn, .icon-btn { background: none; border: none; cursor: pointer; color: #333; display: flex; align-items: center; justify-content: center; padding: 4px; transition: color var(--fast) var(--ease); }
  .menu-btn:hover, .icon-btn:hover { color: var(--black); }
  .desktop-link { font-size: var(--fs-etiqueta); font-weight: 500; letter-spacing: 1px; color: #555; cursor: pointer; text-decoration: none; }
  .desktop-link:hover { color: var(--black); }

  .header-bottom { display: flex; justify-content: center; gap: 32px; padding: 0 24px 16px; max-width: 1200px; margin: 0 auto; }
  .header-bottom a { text-decoration: none; font-size: var(--fs-etiqueta); font-weight: 500; letter-spacing: 1px; color: #555; transition: all var(--fast) var(--ease); border-bottom: 1px solid transparent; padding-bottom: 2px; }
  .header-bottom a:hover { color: var(--black); border-bottom: 1px solid var(--black); }

  /* Clases para controlar qué se ve en PC vs Celular */
  .mobile-only { display: none !important; }

  /* Ajustes para dispositivos móviles */
  @media (max-width: 820px) {
    .desktop-only, .desktop-link { display: none !important; }
    .mobile-only { display: flex !important; }
    .header-left, .header-right { gap: 12px; }
    .header-top { padding: 14px 16px; }
  }