/* Componentes compartidos por todas las páginas de giormo.com (es/it/pt):
   selector de idioma, capturas con marco, recorrido por pestañas, galería y
   visor a pantalla completa. Usa las variables de color de home.css/landing.css.
   Sin estilos inline en el HTML: la CSP de la landing no los permite. */

/* ====== SELECTOR DE IDIOMA ====== */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--border);font-size:12px;font-weight:700;letter-spacing:.04em}
.lang-switch a{padding:4px 9px;border-radius:100px;color:var(--text-3);transition:.2s;line-height:1.2}
.lang-switch a:hover{color:var(--text-1)}
.lang-switch a[aria-current="true"]{background:var(--gradient);color:#fff}
.header-right{display:flex;align-items:center;gap:10px}
.nav-overlay .lang-switch{margin-top:12px;font-size:15px}
.nav-overlay .lang-switch a{padding:8px 16px;width:auto}
@media(max-width:768px){header .header-right .lang-switch{display:none}}

/* ====== CAPTURA CON MARCO DE NAVEGADOR ====== */
.shot{position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid var(--border-hover);
  border-radius:16px;overflow:hidden;background:var(--bg-2);cursor:zoom-in;text-align:left;font:inherit;color:inherit;
  box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03);transition:transform .3s,box-shadow .3s}
.shot:hover{transform:translateY(-3px);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(249,115,22,.25)}
.shot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.shot-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#0f1420;border-bottom:1px solid var(--border)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#334155}
.shot-bar i:nth-child(1){background:#ef4444}.shot-bar i:nth-child(2){background:#f59e0b}.shot-bar i:nth-child(3){background:#22c55e}
.shot-bar span{margin-left:10px;font-size:11px;color:var(--text-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.shot-zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:rgba(6,8,15,.75);border:1px solid var(--border-hover);
  color:#fff;opacity:0;transition:opacity .2s}
.shot:hover .shot-zoom,.shot:focus-visible .shot-zoom{opacity:1}
.shot-zoom svg{width:18px;height:18px}

/* Captura del móvil (PWA del conductor) */
.shot.phone{max-width:260px;margin:0 auto;border-radius:34px;border:8px solid #1c2333;background:#000}
.shot.phone img{aspect-ratio:390/844;object-fit:cover}

/* Captura grande bajo el hero */
.hero-shot{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:8px 24px 0}
.hero-shot .shot img{aspect-ratio:16/8.6}
.hero-shot figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--text-3)}

/* ====== LO QUE UN TMS GENÉRICO NO RESUELVE ====== */
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;text-align:left}
.pain-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),var(--bg-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:.3s}
.pain-card:hover{border-color:rgba(249,115,22,.25);transform:translateY(-3px)}
.pain-card .pain-q{display:block;font-size:13px;color:var(--orange-light);font-weight:600;margin-bottom:10px}
.pain-card h3{font-size:18px;font-weight:700;color:var(--text-1);margin-bottom:10px}
.pain-card p{font-size:14px;color:var(--text-2);line-height:1.7}

/* ====== RECORRIDO POR PESTAÑAS ====== */
.tour{display:grid;grid-template-columns:300px 1fr;gap:28px;text-align:left;align-items:start}
.tour-tabs{display:flex;flex-direction:column;gap:8px}
.tour-tab{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 18px;border-radius:var(--radius);
  background:var(--bg-1);border:1px solid var(--border);color:var(--text-2);font:inherit;text-align:left;cursor:pointer;transition:.2s}
.tour-tab:hover{border-color:var(--border-hover);color:var(--text-1)}
.tour-tab[aria-selected="true"]{border-color:rgba(249,115,22,.45);color:var(--text-1);
  background:linear-gradient(135deg,rgba(249,115,22,.10),rgba(139,92,246,.08)),var(--bg-1)}
.tour-tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.tour-num{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;background:var(--bg-3);color:var(--text-2)}
.tour-tab[aria-selected="true"] .tour-num{background:var(--gradient);color:#fff}
.tour-tab strong{display:block;font-size:15px;font-weight:700}
.tour-tab small{display:block;font-size:12.5px;color:var(--text-3);margin-top:3px;line-height:1.45}
.tour-panel{display:grid;grid-template-columns:1fr;gap:20px}
.tour-panel[hidden]{display:none}
.tour-panel h3{font-size:22px;font-weight:800;color:var(--text-1);letter-spacing:-.02em}
.tour-panel ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px}
.tour-panel li{position:relative;padding-left:22px;font-size:14px;color:var(--text-2);line-height:1.6}
.tour-panel li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;background:var(--gradient)}
.tour-panel .tour-media{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.tour-panel .tour-media .shot.phone{width:200px}
@media(max-width:900px){
  .tour{grid-template-columns:1fr}
  .tour-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .tour-tab{flex:0 0 auto;width:auto;scroll-snap-align:start;padding:12px 14px}
  .tour-tab small{display:none}
  .tour-panel .tour-media{grid-template-columns:1fr}
  .tour-panel .tour-media .shot.phone{width:180px}
}

/* ====== GALERÍA DE MÓDULOS ====== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;text-align:left}
.gallery-item{display:flex;flex-direction:column;gap:14px}
.gallery-item h3{font-size:17px;font-weight:700;color:var(--text-1)}
.gallery-item p{font-size:14px;color:var(--text-2);line-height:1.65}
.gallery-item .shot img{aspect-ratio:16/10}
@media(max-width:400px){.gallery{grid-template-columns:1fr}}

/* ====== VISOR A PANTALLA COMPLETA ====== */
.lightbox{position:fixed;inset:0;z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:56px 64px 24px;background:rgba(3,5,10,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lightbox.open{display:flex}
.lightbox-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:auto}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 20px 80px rgba(0,0,0,.6);cursor:zoom-in}
.lightbox.zoomed .lightbox-stage{align-items:flex-start;justify-content:flex-start}
.lightbox.zoomed img{max-width:none;max-height:none;cursor:zoom-out}
.lightbox-cap{max-width:900px;text-align:center;font-size:14px;color:var(--text-2);line-height:1.6}
.lightbox-cap b{color:var(--text-1)}
.lightbox-count{font-size:12px;color:var(--text-3);letter-spacing:.06em}
.lightbox button{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--border-hover);color:#fff;cursor:pointer;transition:.2s}
.lightbox button:hover{background:rgba(249,115,22,.25)}
.lightbox button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.lightbox button svg{width:22px;height:22px}
.lightbox .lb-close{top:10px;right:12px}
.lightbox .lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:10px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){
  .lightbox{padding:56px 8px 16px}
  .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:10px;transform:none}
  .lightbox-cap{padding:0 52px;font-size:13px}
}
body.lb-open{overflow:hidden}

/* ====== ADEMÁS DEL PRODUCTO (bloque compacto) ====== */
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;text-align:left}
.extra{padding:22px;border-radius:var(--radius-lg);background:var(--bg-1);border:1px solid var(--border)}
.extra h3{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:6px}
.extra p{font-size:13.5px;color:var(--text-2);line-height:1.6}
.extra a{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--orange-light)}

/* ====== PASOS DE IMPLANTACIÓN ====== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.step{padding:26px;border-radius:var(--radius-lg);background:var(--bg-1);border:1px solid var(--border)}
.step b{display:block;font-size:40px;font-weight:900;line-height:1;margin-bottom:14px;opacity:.6;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.step h3{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:8px}
.step p{font-size:13.5px;color:var(--text-2);line-height:1.6}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ====== CAPTURAS DENTRO DE LAS PÁGINAS DE PRODUCTO ====== */
.feature-row{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;text-align:left;margin:0 auto 64px;max-width:1100px}
.feature-row:nth-of-type(even) .feature-text{order:2}
.feature-row h3{font-size:24px;font-weight:800;color:var(--text-1);margin-bottom:12px;letter-spacing:-.02em}
.feature-row p{font-size:15px;color:var(--text-2);line-height:1.75;margin-bottom:12px}
.feature-row ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.feature-row li{position:relative;padding-left:22px;font-size:14px;color:var(--text-2);line-height:1.6}
.feature-row li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;background:var(--gradient)}
@media(max-width:900px){.feature-row{grid-template-columns:1fr;gap:20px}.feature-row:nth-of-type(even) .feature-text{order:0}}

.section-more{margin-top:36px;margin-bottom:0}