/* V3 Ramos · Joyería NICE · portada
   Una sola pantalla antes del catálogo (coleccion.html): vitrina en diagonal con tres columnas de piezas
   que corren sin parar (inspirada en Tilted Grid Hero de 21st.dev), el título y un solo CTA.
   Misma paleta que el catálogo: marfil, tinta, oro y rosa de campaña. */
:root{
  --ivory:#FAF8F6; --paper:#F3EEEA; --ink:#1C1917; --ink-2:#44403C; --mute:#78716C; --line:#E7E2DC;
  --gold:#A16207; --rose:#C2185B; --blush:#F6E3E8;
  --f-d:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --f-b:"Montserrat","Segoe UI",system-ui,sans-serif;
  --top:68px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--f-b);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,p{margin:0}
h1{font-family:var(--f-d);font-weight:500;letter-spacing:-.015em;line-height:.92}
h1 em{font-style:italic;color:var(--rose)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--mute)}
svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.price{font-variant-numeric:tabular-nums}

/* barra superior mínima */
.top{position:fixed;z-index:30;top:0;left:0;right:0;height:calc(var(--top) + env(safe-area-inset-top,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;pointer-events:none;
  padding:env(safe-area-inset-top,0px) max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px))}
.top::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;background:linear-gradient(180deg,rgba(250,248,246,.9) 45%,rgba(250,248,246,0))}
.top a{pointer-events:auto}
.top-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 0;border-radius:999px;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.top-mark{font-family:var(--f-d);font-size:24px;line-height:1}
.top-mark em{color:var(--rose)}

/* escenario: todo cabe en una pantalla */
.stage{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:560px;overflow:hidden;display:grid;align-items:center;
  padding:calc(var(--top) + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 32px max(clamp(24px,5vw,72px),env(safe-area-inset-left,0px))}

/* vitrina en diagonal: cada columna lleva sus piezas dos veces para correr sin corte */
.tilt{position:absolute;z-index:-2;inset:-30% -8% -30% 40%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transform:rotate(-12deg)}
.col{display:grid;gap:16px;align-content:start;animation:up 60s linear infinite}
.col:nth-child(2){animation-name:down;animation-duration:70s}
.col:nth-child(3){animation-duration:54s}
@keyframes up{to{transform:translateY(-50%)}}
@keyframes down{from{transform:translateY(-50%)}to{transform:none}}
.tile{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 34px -26px rgba(28,25,23,.45);text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tile img{width:100%;height:100%;object-fit:cover}
.tile span{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 11px;border-radius:12px;background:rgba(250,248,246,.94);font-size:12px;display:grid;line-height:1.3;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.tile span b{font-family:var(--f-d);font-size:17px;font-weight:500}
.tile:hover,.tile:focus-visible{transform:scale(1.04);box-shadow:0 24px 40px -24px rgba(28,25,23,.5)}
.tile:hover span,.tile:focus-visible span{opacity:1;transform:none}
/* el marfil tapa el inicio de la vitrina para que el texto se lea */
.fade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ivory) 30%,rgba(250,248,246,.55) 40%,rgba(250,248,246,0) 49%)}

/* texto y un solo CTA */
.copy{display:grid;justify-items:start;gap:20px;max-width:500px}
.copy h1{font-size:clamp(72px,9vw,148px)}
.copy p{font-size:clamp(15px,1.3vw,17px);color:var(--ink-2);max-width:28em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 30px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--ivory);transition:background .25s,transform .25s}
.btn:hover{background:#000;transform:translateY(-2px)}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.rosa{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);text-decoration:none;min-height:36px;border-bottom:1px solid transparent;transition:border-color .25s}
.rosa:hover{border-color:var(--rose)}
.rosa i{width:9px;height:9px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px var(--blush)}

/* celular: la vitrina arriba y el texto abajo */
@media (max-width:760px){
  .stage{align-items:end;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
  .tilt{inset:-24% -34% 26% -34%;gap:12px}
  .col{gap:12px}
  .tile{border-radius:14px}
  .fade{background:linear-gradient(0deg,var(--ivory) 30%,rgba(250,248,246,.55) 38%,rgba(250,248,246,0) 46%)}
  .copy{justify-items:center;text-align:center;max-width:none;gap:14px}
  .copy h1{font-size:clamp(58px,17vw,92px)}
  .copy p{font-size:14px}
  .copy br{display:none}
}
@media (max-width:560px){
  .top-back span{display:none}
  .top-mark{font-size:21px}
  .rosa{font-size:12px}
}
@media (max-height:680px) and (max-width:760px){.copy p{display:none}}
@media (prefers-reduced-motion:reduce){.col{animation:none}*{transition:none!important}}