/* EmiFotoOttica – animazione 3D "classica" nelle pagine marchio (non Ray-Ban, che ha il suo file dedicato) */
.brand-hero{position:relative;overflow:hidden;}
.brand-hero .container{position:relative;z-index:1;}
.cg-hero-canvas{position:absolute;top:0;right:-4%;width:58%;height:100%;pointer-events:none;
  opacity:0;transition:opacity 1s ease;}
.cg-hero-canvas.ready{opacity:1;}
.cg-hero-canvas canvas{width:100%;height:100%;display:block;}
@media (max-width:900px){
  /* Mobile: l'occhiale non deve più coprire il testo. Lo mettiamo in cima,
     più piccolo e ben visibile (per poter vedere/toccare i colori sotto),
     poi il blocco testo scorre normalmente sotto, compatto. */
  .brand-hero{height:auto !important;min-height:0 !important;overflow:visible;
    padding-top:1.25rem !important;padding-bottom:1.5rem !important;}
  .brand-hero .container{display:block !important;padding-top:0 !important;}
  .cg-hero-canvas{position:relative !important;top:auto !important;left:auto !important;right:auto !important;
    width:68% !important;max-width:280px;height:190px !important;
    margin:0 auto 1.1rem !important;opacity:1 !important;}
}

.brand-colors{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem;align-items:center;}
.brand-colors__label{font:600 .68rem var(--font-b,system-ui,sans-serif);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:.3rem;}
.brand-color-dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  cursor:pointer;transition:transform .2s ease, border-color .2s ease;padding:0;}
.brand-color-dot:hover{transform:scale(1.14);}
.brand-color-dot.active{border-color:var(--gold,#c9a24b);transform:scale(1.16);
  box-shadow:0 0 0 2px rgba(201,162,75,.25);}

.cg-sticky-col{position:sticky;top:96px;align-self:start;}

.cg-story__track{position:relative;height:260vh;}
.cg-story__sticky{position:sticky;top:96px;height:calc(100vh - 116px);min-height:480px;
  border-radius:var(--r);overflow:hidden;
  background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(201,162,75,.16), transparent 70%),
             linear-gradient(180deg,#0a2540 0%, #06182b 100%);}
.cg-story__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cg-story__copy{position:absolute;left:0;right:0;bottom:7%;padding:0 1.5rem;text-align:center;pointer-events:none;}
.cg-step{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;}
.cg-step.on{opacity:1;transform:none;}
.cg-step__eyebrow{font-family:var(--font-b);font-size:.75rem;font-weight:700;letter-spacing:.25em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .5rem;}
.cg-step__title{font-family:var(--font-h);color:#fff;font-size:1.5rem;font-weight:700;margin:0 0 .5rem;}
.cg-step__text{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.65;max-width:440px;margin:0 auto;}
.cg-step--hover{display:none;}
.cg-step--hover.on{display:block;}

.cg-label{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;will-change:transform;
  cursor:pointer;transition:opacity .4s ease, background .2s ease, transform .2s ease;}
.cg-label::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--gold,#c9a24b);box-shadow:0 0 0 4px rgba(201,162,75,.25);}
.cg-label:hover{background:rgba(201,162,75,.2);transform:scale(1.35);}
.cg-label span{position:absolute;color:#fff;font:600 .68rem var(--font-b,system-ui,sans-serif);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;padding-bottom:4px;border-bottom:1px solid rgba(201,162,75,.65);
  left:34px;top:9px;pointer-events:none;}
.cg-label.l span{left:auto;right:34px;}

@media (max-width:900px){
  .cg-sticky-col{position:static;}
  .cg-story__track{height:220vh;}
  .cg-story__sticky{position:sticky;top:70px;height:58vh;}
  /* le etichette restano visibili e diventano toccabili invece di sparire */
  .cg-label{width:34px;height:34px;}
  /* il testo resta ancorato in basso dentro il riquadro (l'animazione a scroll
     resta intatta), ma con un fondo scuro pieno per restare sempre leggibile */
  .cg-story__copy{
    left:0;right:0;bottom:0;top:auto;padding:1.2rem 1.25rem 1.4rem;
    background:linear-gradient(180deg, rgba(6,24,43,0) 0%, rgba(6,24,43,.55) 28%, rgba(6,24,43,.95) 60%, rgba(6,24,43,.98) 100%);
  }
  .cg-step__text{max-width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .cg-hero-canvas, .cg-step{transition:opacity .4s ease;}
}

/* Testo hero più compatto e leggibile su mobile */
@media (max-width:600px){
  .brand-hero__name{font-size:2.1rem !important;line-height:1.05 !important;}
  .brand-hero__desc{font-size:.85rem !important;line-height:1.55 !important;}
  .brand-hero__meta{gap:.4rem !important;}
  .brand-meta-pill{font-size:.68rem !important;padding:.35rem .6rem !important;}
}

/* La sezione CTA in fondo alla pagina usa uno stile inline a 2 colonne che su
   mobile tagliava/sovrapponeva testo e riquadro "Dove acquistarli": la
   forziamo a impilarsi su una sola colonna sotto i 900px. */
@media (max-width:900px){
  .container[style*="grid-template-columns:1fr 1fr"]{
    display:block !important;
  }
  .container[style*="grid-template-columns:1fr 1fr"] > div + div{
    margin-top:2rem;
  }
}

/* Rete di sicurezza generale: niente scroll orizzontale, niente testo tagliato */
@media (max-width:600px){
  html,body{overflow-x:hidden;}
  .spec-table{display:block;overflow-x:auto;}
  h1,h2,h3{overflow-wrap:break-word;}
}