/* === RELOJ EN VIVO + FRASE (estilo del bloque "Official Timekeeper" de TAG Heuer) === */
  body.vista-catalogo #hora{display:none;}
  .hora{--hora-punto:rgba(255,255,255,.75);position:relative;z-index:1;background:#000;color:#fff;padding:clamp(40px,6vw,96px) clamp(16px,4vw,64px);}
  /* marco de puntos con marcas en las esquinas y una linea de puntos al centro */
  .hora-marco{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1100px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(16px,3vw,48px);
    background:
      radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 0 0/16px 3px repeat-x,
      radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 0 100%/16px 3px repeat-x,
      radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 0 0/3px 16px repeat-y,
      radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 100% 0/3px 16px repeat-y,
      radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 50% 0/3px 16px repeat-y;}
  .hora-esq{position:absolute;width:12px;height:12px;border:0 solid #fff;}
  .hora-esq.e1{top:-1px;left:-1px;border-top-width:1.4px;border-left-width:1.4px;}
  .hora-esq.e2{top:-1px;right:-1px;border-top-width:1.4px;border-right-width:1.4px;}
  .hora-esq.e3{bottom:-1px;left:-1px;border-bottom-width:1.4px;border-left-width:1.4px;}
  .hora-esq.e4{bottom:-1px;right:-1px;border-bottom-width:1.4px;border-right-width:1.4px;}
  .hora-reloj{width:min(100%,380px);margin:0 auto;aspect-ratio:424/412;}
  .hora-reloj svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 30px rgba(255,255,255,.06));}
  .hora-txt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,22px);text-align:center;padding:0 clamp(8px,2.4vw,40px);}
  .hora-logo{display:block;height:clamp(84px,9vw,128px);width:auto;}
  .hora-frase{max-width:28ch;font-size:clamp(15px,1.5vw,21px);font-style:italic;font-weight:300;line-height:1.4;color:#fff;}  /* celular: igual que TAG, acostado (reloj a la izquierda, logo y texto a la derecha), solo mas compacto */
  @media (max-width:820px){
    .hora{padding:40px 12px;}
    .hora-marco{padding:22px 8px;
      background:
        radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 0 0/12px 3px repeat-x,
        radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 0 100%/12px 3px repeat-x,
        radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 0 0/3px 12px repeat-y,
        radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 100% 0/3px 12px repeat-y,
        radial-gradient(circle,var(--hora-punto) 1px,transparent 1.4px) 50% 0/3px 12px repeat-y;}
    .hora-esq{width:9px;height:9px;}
    .hora-reloj{width:92%;}
    .hora-txt{gap:9px;padding:0 6px;}
    .hora-logo{height:46px;}
    .hora-frase{font-size:11.5px;line-height:1.4;}  }