/* TEMPO · colecciones · hub oscuro cosmico + 4 paginas, cada una su mundo.
   Reglas duras (del analisis de los 11 agentes): cero morado/magenta, dorado #caa765,
   fuentes de marca (Cinzel/Fraunces/Cormorant/Hanken). El oscuro permitido = navy frio cosmos. */

:root{ --au-gold:#caa765; }

/* =========================================================================
   HUB  ·  oscuro cosmico, las 4 portadas (el "momento galaxia", isla a proposito)
   ========================================================================= */
body.hub{
  background:
    radial-gradient(75% 65% at 6% -2%, rgba(86,128,196,.09), transparent 64%),
    radial-gradient(66% 58% at 98% 6%, rgba(204,166,98,.07), transparent 64%),
    radial-gradient(85% 72% at 52% 114%, rgba(96,166,128,.09), transparent 64%),
    linear-gradient(165deg, rgba(120,150,205,.04) 0%, rgba(206,174,112,.025) 52%, rgba(112,172,134,.04) 100%),
    #fbfcff;
  color:#16181c; min-height:100vh;
}
/* nav claro sobre el hub blanco */
body.hub .nav, body.hub .nav.scrolled{ background:#fff; border-bottom:1px solid #e3e7ee; box-shadow:0 1px 0 rgba(0,0,0,.015); }
body.hub .nav .logo{ color:#16181c; }
body.hub .nav .links a{ color:#3a3f47; }
body.hub .nav .links a:hover, body.hub .nav .links a.on{ color:#16181c; }
/* barra de hover del nav: azul (no el dorado del sitio) en el hub */
body.hub .nav .links a:after{ background:#4f86c6; }
body.hub .announce .gold, body.hub .announce b{ color:var(--au-gold); }

/* campo de estrellas muy sutil (un patron, no un gimmick) */
body.hub::before{ display:none; }

.hub-wrap{ position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:108px clamp(20px,4vw,56px) 56px; }

.hub-head{ text-align:center; margin:0 auto 26px; max-width:680px; }
.hub-head .hh-rule{ display:block; width:42px; height:2px; border-radius:2px; background:var(--au-gold); margin:0 auto 22px; }
.hub-head h1{ font-family:'Cormorant Garamond','Fraunces',serif; font-weight:600; font-size:clamp(40px,6vw,76px); line-height:1; letter-spacing:-.015em; color:#16181c; }
.hub-head .lede{ color:#5f6670; max-width:540px; margin:18px auto 0; font-size:15.5px; line-height:1.62; }
.hub-head .facts{ margin:22px auto 0; display:flex; flex-wrap:wrap; gap:7px 9px; justify-content:center; }
.hub-head .facts span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.10em; text-transform:uppercase; color:#5f6670; border:1px solid #e3e7ee; border-radius:30px; padding:6px 13px; background:rgba(255,255,255,.55); }

.portadas{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
/* carta: NOMBRE arriba, reloj en medio, boton (nombre, fantasma) abajo. Fondo galactico MUY ligero. */
.portada{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  border-radius:18px; overflow:hidden; text-decoration:none; color:#16181c;
  min-height:286px; padding:26px 24px 24px; border:1px solid #e7ebf2;
  box-shadow:0 18px 44px -30px rgba(20,28,46,.45);
  background:
    radial-gradient(54% 44% at 20% 16%, rgba(78,64,128,.06), transparent 62%),
    radial-gradient(54% 48% at 84% 24%, rgba(44,74,140,.07), transparent 62%),
    radial-gradient(92% 70% at 50% 112%, rgba(12,18,38,.07), transparent 64%),
    #f6f7fb;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s; }
.portada:hover{ transform:translateY(-6px); border-color:rgba(202,167,101,.5); box-shadow:0 32px 60px -32px rgba(20,28,46,.4); }
.portada .ptop{ position:relative; z-index:2; text-align:center; }
.portada .pidx{ font-family:var(--mono); font-size:10.5px; letter-spacing:.20em; text-transform:uppercase; color:#6b7588; margin-bottom:10px; }
.portada .pname{ font-family:'Cormorant Garamond','Fraunces',serif; font-weight:600;
  font-size:clamp(28px,3.6vw,42px); line-height:1; letter-spacing:.02em; color:#16181c; }
.portada .pmeta{ font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.02em; color:#566071; margin-top:9px; }
.portada .pmeta .dot{ color:var(--au-gold); margin:0 3px; }
.portada .pbtn .parr{ display:inline-block; margin-left:7px; transition:transform .25s; }
.portada:hover .pbtn .parr{ transform:translateX(4px); }
.portada .pwatch{ position:relative; z-index:2; width:auto; max-width:46%; max-height:152px;
  filter:drop-shadow(0 22px 30px rgba(20,28,46,.2)); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.portada:hover .pwatch{ transform:scale(1.045); }
.portada .pbtn{ position:relative; z-index:2; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(22,34,62,.85);
  background:transparent; border:1px solid rgba(22,34,62,.38); border-radius:9px; padding:12px 30px; transition:background .25s, color .25s, border-color .25s, transform .25s; }
.portada:hover .pbtn{ background:#16223e; border-color:#16223e; color:#fff; transform:translateY(-1px); }
/* cada carta con SU color (relleno por toda la carta, claro) */
.portada.sport{ background:radial-gradient(120% 110% at 50% 0%, #8fa9d2 0%, #b7cae8 50%, #d9e4f4 100%); }
.portada.gmt{ background:radial-gradient(120% 105% at 50% 0%, #d2e0f3 0%, #e5edf7 58%, #eff4fb 100%); }
.portada.dress{ background:radial-gradient(120% 105% at 50% 0%, #f2e4ca 0%, #f8efe0 58%, #fdf8ef 100%); }
.portada.casual{ background:radial-gradient(120% 105% at 50% 0%, #d3ebdb 0%, #e6f2ea 58%, #f0f7f3 100%); }

/* banda CTA al configurador (dentro de .hub-wrap, debajo de las portadas) */
.cfg-band{ position:relative; z-index:2; margin-top:clamp(30px,4vw,44px); }
.cfg-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  border:1px solid #e7ebf2; border-radius:18px; padding:clamp(26px,4vw,40px) clamp(26px,4vw,46px);
  background:linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%); box-shadow:0 18px 44px -34px rgba(20,28,46,.4); }
.cfg-in .cfg-rule{ display:block; width:34px; height:2px; border-radius:2px; background:var(--au-gold); margin-bottom:16px; }
.cfg-txt h2{ margin:0; font-family:'Cormorant Garamond','Fraunces',serif; font-weight:600; font-size:clamp(28px,3.6vw,40px); line-height:1.04; letter-spacing:-.01em; color:#16181c; }
.cfg-txt p{ margin:10px 0 0; color:#5f6670; font-size:15px; line-height:1.6; max-width:480px; }
.cfg-go{ flex-shrink:0; font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:#16223e; border-radius:9px; padding:14px 34px; transition:background .25s, transform .25s; }
.cfg-go:hover{ background:#0b1326; transform:translateY(-1px); }
.cfg-go .parr{ display:inline-block; margin-left:7px; transition:transform .25s; }
.cfg-go:hover .parr{ transform:translateX(4px); }
@media (max-width:900px){ .cfg-in{ flex-direction:column; align-items:flex-start; } }

/* =========================================================================
   PAGINAS DE COLECCION  ·  chrome compartido, paleta por body class
   ========================================================================= */
.col-page{ --cbg:#ffffff; --cpaper:#eef2f7; --cink:#16181c; --cmut:#5f6670; --cline:#e3e7ee; --cacc:#4a78b0; --cglow:rgba(74,120,176,.16); }

.crumb{ max-width:1320px; margin:0 auto; padding:18px clamp(20px,4vw,56px) 0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cmut); }
.crumb a{ color:var(--cmut); text-decoration:none; } .crumb a:hover{ color:var(--cink); } .crumb .sep{ opacity:.5; margin:0 8px; }

.col-hero{ position:relative; overflow:hidden; padding:clamp(56px,9vw,118px) clamp(20px,4vw,56px) clamp(40px,6vw,72px); }
.col-hero .ch-in{ position:relative; z-index:2; max-width:1320px; margin:0 auto; }
.col-hero .ch-kick{ font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--cacc); }
.col-hero .ch-name{ font-family:'Cormorant Garamond','Fraunces',serif; font-weight:600; font-size:clamp(56px,12vw,148px); line-height:.92; letter-spacing:.005em; color:var(--cink); margin:10px 0 0; }
.col-hero .ch-sub{ font-size:clamp(16px,2.1vw,21px); line-height:1.55; color:var(--cmut); max-width:560px; margin:20px 0 0; font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; }
.col-hero .ch-meta{ display:flex; gap:clamp(14px,2.5vw,28px); align-items:center; flex-wrap:wrap; margin-top:28px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cmut); }
.col-hero .ch-meta b{ color:var(--cink); font-weight:500; } .col-hero .ch-meta .g{ color:var(--au-gold); }
.col-hero .ch-meta .sep{ width:1px; height:12px; background:var(--cline); }

/* grid de relojes (estilo img1: reloj + nombre serif + descriptor + Configurable) */
.wgrid{ max-width:1320px; margin:0 auto; padding:clamp(20px,3vw,40px) clamp(20px,4vw,56px) clamp(60px,9vw,110px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,42px) clamp(16px,2.4vw,30px); }
.wcard{ display:block; text-decoration:none; text-align:center; color:var(--cink);
  opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s, filter .35s; }
.wcard.in{ opacity:1; transform:none; }
.wcard .wc-ph{ position:relative; aspect-ratio:1/1.04; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 18%, var(--cpaper), color-mix(in srgb, var(--cpaper) 70%, var(--cbg))); display:flex; align-items:center; justify-content:center; transition:transform .4s; }
.wcard .wc-ph img{ width:78%; height:auto; filter:drop-shadow(0 16px 22px rgba(20,28,46,.18)); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.wcard:hover .wc-ph img{ transform:scale(1.05); }
.wcard .wc-name{ font-family:'Fraunces',serif; font-weight:500; font-size:20px; letter-spacing:-.01em; margin-top:18px; }
.wcard .wc-desc{ color:var(--cmut); font-size:13px; line-height:1.5; margin-top:6px; padding:0 6px; }
.wcard .wc-cta{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--au-gold); }
.wcard .wc-cta .a{ transition:transform .25s; display:inline-block; } .wcard:hover .wc-cta .a{ transform:translateX(4px); }

/* banda CTA al configurador, al pie de cada coleccion */
.col-cta{ border-top:1px solid var(--cline); }
.col-cta .cc-in{ max-width:760px; margin:0 auto; text-align:center; padding:clamp(54px,8vw,92px) clamp(20px,4vw,56px); }
.col-cta .cc-kick{ font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--cacc); }
.col-cta h2{ font-family:'Cormorant Garamond','Fraunces',serif; font-weight:600; font-size:clamp(30px,4.4vw,48px); color:var(--cink); margin:14px 0 12px; }
.col-cta p{ color:var(--cmut); font-size:16px; line-height:1.6; margin-bottom:26px; }

/* ---- PALETAS POR COLECCION ------------------------------------------------ */
/* ICE · claro/frio (puente con el blanco del home) */
body.col-gmt{ background:var(--cbg); color:var(--cink); }
body.col-gmt .col-hero{ background:linear-gradient(178deg, #e7f0f8 0%, #f3f7fb 52%, #ffffff 100%); }
body.col-gmt .col-hero::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 70% at 82% 8%, rgba(120,168,200,.22), transparent 60%); }

/* SUN · calido/luz (oro y cobre; NO crema beige, off-white calido) */
body.col-dress{ --cbg:#fffaf3; --cpaper:#f6ecdd; --cink:#241a10; --cmut:#7a6a55; --cline:#ece0cf; --cacc:#b07a3a; --cglow:rgba(176,122,58,.18); background:var(--cbg); color:var(--cink); }
body.col-dress .col-hero{ background:linear-gradient(178deg, #f7e6cb 0%, #fbf2e3 54%, #fffaf3 100%); }
body.col-dress .col-hero::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.6; pointer-events:none;
  background:radial-gradient(58% 72% at 80% 6%, rgba(201,138,62,.26), transparent 60%); }
body.col-dress .col-hero .ch-sub, body.col-dress .col-cta h2{ color:var(--cink); }

/* ECLIPSE · oscuro navy cosmos (isla, ecoa el hero; nav/footer en oscuro) */
body.col-sport{ --cbg:#070b14; --cpaper:#101a30; --cink:#eef1f6; --cmut:#9aa6b6; --cline:rgba(255,255,255,.10); --cacc:#6f9bd0; --cglow:rgba(58,86,150,.22); background:var(--cbg); color:var(--cink); }
body.col-sport .col-hero{ background:radial-gradient(120% 110% at 50% -10%, #15233f 0%, #0a1326 50%, #05070d 100%); }
body.col-sport .col-hero::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none;
  background-image:radial-gradient(1px 1px at 24% 30%, rgba(255,255,255,.6), transparent),radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,.45), transparent),radial-gradient(1.2px 1.2px at 52% 64%, rgba(255,255,255,.4), transparent),radial-gradient(1px 1px at 86% 50%, rgba(255,255,255,.4), transparent); }
body.col-sport .wcard .wc-ph{ background:radial-gradient(120% 120% at 50% 16%, #111c33, #0a1222); border:1px solid rgba(255,255,255,.06); }
body.col-sport .wcard .wc-ph img{ filter:drop-shadow(0 16px 26px rgba(0,0,0,.5)); }

/* AURORA · oscuro + verde/teal/rosa vivo (NUNCA morado) */
body.col-casual{ --cbg:#06100f; --cpaper:#0e2420; --cink:#eef5f1; --cmut:#9ab4a8; --cline:rgba(255,255,255,.10); --cacc:#5fc79a; --cglow:rgba(95,199,154,.20); background:var(--cbg); color:var(--cink); }
body.col-casual .col-hero{ background:linear-gradient(160deg, #06100f 0%, #0c2622 36%, #14463a 72%, #1c5a48 100%); }
body.col-casual .col-hero::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.6; pointer-events:none;
  background:radial-gradient(60% 64% at 78% 12%, rgba(120,206,156,.32), transparent 60%), radial-gradient(46% 50% at 24% 84%, rgba(206,156,134,.18), transparent 60%); }
body.col-casual .wcard .wc-ph{ background:radial-gradient(120% 120% at 50% 16%, #103029, #0a201c); border:1px solid rgba(255,255,255,.06); }
body.col-casual .wcard .wc-ph img{ filter:drop-shadow(0 16px 26px rgba(0,0,0,.45)); }

/* nav/footer en oscuro para las paginas oscuras (eclipse/aurora) */
body.col-sport .nav, body.col-sport .nav.scrolled, body.col-casual .nav, body.col-casual .nav.scrolled{ background:rgba(7,11,19,.74); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(255,255,255,.09); box-shadow:none; }
body.col-sport .nav .logo, body.col-casual .nav .logo{ color:#fff; }
body.col-sport .nav .links a, body.col-casual .nav .links a{ color:#cdd4de; }
body.col-sport .nav .links a:hover, body.col-sport .nav .links a.on, body.col-casual .nav .links a:hover, body.col-casual .nav .links a.on{ color:#fff; }
body.col-sport .announce, body.col-casual .announce{ background:#05070d; color:#aeb6c2; border-bottom:1px solid rgba(255,255,255,.07); }

/* nav SIEMPRE solido en las paginas claras (que ui.js no lo deje transparente al volver arriba) */
body.col-gmt .nav, body.col-gmt .nav.scrolled, body.col-dress .nav, body.col-dress .nav.scrolled{ background:#fff; border-bottom:1px solid var(--cline); box-shadow:0 1px 0 rgba(0,0,0,.015); }
body.col-gmt .nav .logo, body.col-dress .nav .logo{ color:var(--cink); }
body.col-gmt .nav .links a, body.col-dress .nav .links a{ color:#3a3f47; }
body.col-gmt .nav .links a.on, body.col-dress .nav .links a.on{ color:var(--cink); }
body.col-dress .nav, body.col-dress .nav.scrolled{ border-bottom-color:var(--cline); }

/* site.css pinta un body::before blanco a nivel de DOCUMENTO (sistema de transicion del home).
   En las paginas con fondo no-blanco hay que tintarlo, o el fondo sale blanco bajo el grid/CTA. */
body.col-dress::before{ background:#fffaf3; }
body.col-sport::before{ background:#070b14; }
body.col-casual::before{ background:#06100f; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .portadas{ grid-template-columns:1fr; }
  .portada{ min-height:280px; }
  .portada .pwatch{ width:42%; right:5%; }
  .wgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .portada .pbody{ max-width:74%; }
  .portada .pwatch{ width:40%; opacity:.92; }
  .wgrid{ grid-template-columns:repeat(2,1fr); gap:26px 16px; }
  .col-hero .ch-name{ font-size:clamp(54px,20vw,92px); }
}

@media (prefers-reduced-motion:reduce){
  .portada, .portada .pwatch, .wcard, .wcard .wc-ph img{ transition:none; }
  .wcard{ opacity:1; transform:none; }
}