/* =============================================
   INTERIORS3D — NEW HOME TEMPLATE
   Design reference: ChatGPT mockup 2026-07-03
   ============================================= */

:root {
  --bg-dark:    #0b0b0b;
  --bg-card:    #141414;
  --bg-light:   #ffffff;
  --accent:     #00bfc4;
  --accent-dim: #00979b;
  --text-light: #ffffff;
  --text-muted: #9a9a9a;
  --text-dark:  #111111;
  --border:     rgba(255,255,255,0.08);
  --font: 'Montserrat', sans-serif;
  --max-w: 1200px;
  --nav-h: 72px;
}

@media (max-width: 768px) {
  /* Capas móviles de Tech y Storie. La tablet permanece dentro de Tech. */
  #tech,
  #stories {
    z-index: auto;
    isolation: auto;
  }
  #footer { z-index: 7; }
  /* El contenido textual queda por encima de los canvases 3D. */
  #tech .tech-inner {
    position: relative;
    z-index: 5;
  }
  #tech .tech-header,
  #tech .tech-panel,
  #tech .vs-col {
    position: relative;
    z-index: 6;
  }

  #stories {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse 82% 44% at 108% 12%, rgba(0,184,192,0.16), transparent 70%),
      radial-gradient(ellipse 74% 42% at -12% 88%, rgba(26,82,156,0.11), transparent 72%),
      linear-gradient(148deg, #f8fbfb 0%, #ffffff 48%, #eef8f8 100%);
  }

  .stories-atmosphere {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .stories-atmosphere::before {
    content: '';
    position: absolute;
    inset: -18% -30%;
    opacity: 0.34;
    background: repeating-linear-gradient(
      156deg,
      transparent 0 76px,
      rgba(0,151,164,0.16) 77px,
      transparent 79px 142px
    );
    transform: translate3d(0,0,0);
    animation: storiesLinesDrift 16s ease-in-out infinite alternate;
  }
  .stories-atmosphere span {
    position: absolute;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(0,173,180,0.18);
    box-shadow:
      0 0 22px rgba(0,173,180,0.08),
      inset 0 0 32px rgba(33,87,158,0.06);
  }
  .stories-atmosphere span:nth-child(1) {
    width: 270px;
    height: 270px;
    top: 8%;
    right: -145px;
    animation: storiesBubbleA 12s ease-in-out infinite alternate;
  }
  .stories-atmosphere span:nth-child(2) {
    width: 210px;
    height: 210px;
    left: -118px;
    top: 48%;
    animation: storiesBubbleB 15s ease-in-out -4s infinite alternate;
  }
  .stories-atmosphere span:nth-child(3) {
    width: 360px;
    height: 92px;
    right: -190px;
    bottom: 12%;
    border-radius: 50%;
    border-color: rgba(21,75,151,0.12);
    transform: rotate(-24deg);
    animation: storiesBubbleC 11s ease-in-out -2s infinite alternate;
  }

  #stories .stories-inner {
    position: relative;
    z-index: auto;
  }
  #stories .stories-header,
  #stories .swipe-hint {
    position: relative;
    z-index: 6;
  }
  #stories .stories-gallery-cta {
    position: relative;
    z-index: auto;
  }
  #stories .stories-gallery-label,
  #stories .stories-gallery-btn {
    position: relative;
    z-index: 6;
  }
  #stories .stories-grid {
    position: relative;
    z-index: 5;
    scroll-snap-type: none;
    gap: 16px;
    padding: 4px calc((100% - 82vw) / 2) 22px;
  }
  #stories .story-card {
    flex: 0 0 82vw;
    scroll-snap-align: none;
  }

  @keyframes storiesLinesDrift {
    to { transform: translate3d(-36px,28px,0) rotate(1deg); opacity: 0.22; }
  }
  @keyframes storiesBubbleA {
    to { transform: translate(-46px,38px) scale(1.08); }
  }
  @keyframes storiesBubbleB {
    to { transform: translate(54px,-34px) scale(0.92); }
  }
  @keyframes storiesBubbleC {
    to { transform: translate(-48px,-24px) rotate(-18deg) scaleX(1.1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .stories-atmosphere::before,
    .stories-atmosphere span { animation: none; }
  }
}

/* Escáner viajero: un único canvas fullscreen fijo, solo móvil. Recorre
   hero -> cards -> hueco del panel "Scanner 3D" de #tech sin cambiar de
   tamaño ni de padre DOM; hero-scanner.js mueve únicamente el modelo.
   z-index:2 para quedar detrás de todo el texto/tarjetas (que llevan
   z-index:2 o más) y encima de los fondos de cada sección. */
#hero-scanner-canvas { display: none; }
@media (max-width: 768px) {
  #hero-scanner-canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
  }

  /* El visor propio del panel "Scanner 3D" de #tech (tech-models.js)
     queda oculto en móvil: el escáner viajero de arriba ocupa ese mismo
     hueco al llegar, así que mostrar los dos sería duplicado. El hueco
     (.tech-img-col) se conserva para que el layout/texto no se mueva. */
  #canvas-scanner { display: none !important; }
}

/* ══════════════════════════════════════════════════
   CLIENT WAVE · corporate logos + mobile experience
   ══════════════════════════════════════════════════ */

/* Franja corporativa: logos blancos sobre verde Interiors3D. */
#logos {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 130% at 16% 10%, rgba(255,255,255,0.13), transparent 62%),
    linear-gradient(112deg, #007c80 0%, #008f92 48%, #007477 100%);
  border-bottom-color: rgba(0,0,0,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.12);
}
#logos::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,0.055) 48%, transparent 72%);
}
#logos .logos-inner { position: relative; z-index: 1; }
#logos .logos-label { color: #fff; }
/* Logos siempre a opacidad plena; el hover/tap solo los levanta,
   nunca atenúa ni resalta con transparencia. */
#logos .logo-item {
  opacity: 1;
  transition: transform 0.25s ease;
}
#logos .logo-item:hover,
#logos .logo-item:active {
  opacity: 1;
  transform: translateY(-3px) scale(1.07);
}
#logos .logo-client,
#logos .logo-client--color,
#logos .logo-item:hover .logo-client--color {
  filter: brightness(0) invert(1);
}
#logos .logo-client--unibo,
#logos .logo-client--ica {
  /* Ambos archivos fuente tienen alfa semitransparente. Las sombras a
     desplazamiento cero consolidan su silueta sin añadir resplandor. */
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 0 0 #fff);
}
#logos .logo-text { color: #fff; }

.solutions-scroll-cue { display: none; }

.footer-addr strong {
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}

@media (max-width: 768px) {
  .hero-left { width: 100%; }

  .solutions-inner { position: relative; z-index: 1; }
  /* Botón discreto en la esquina inferior derecha: avanza una card sin
     detener el auto-scroll continuo (ver mobile-experience.js). */
  .solutions-scroll-cue {
    display: flex;
    position: absolute;
    z-index: 8;
    right: 12px;
    bottom: 26px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: rgba(6,16,17,0.52);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    transition: opacity 0.3s ease, transform 0.18s ease;
    animation: solutionsCueFloat 1.3s ease-in-out infinite;
  }
  .solutions-scroll-cue:active {
    animation-play-state: paused;
    transform: scale(0.88);
  }
  .solutions-scroll-cue svg {
    width: 13px; height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .solutions-scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
  @keyframes solutionsCueFloat {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-scroll-cue { animation: none !important; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-dark);
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── DEV LANG TOGGLE ───────────────────────── */
#dev-toggle {
  position: fixed;
  top: 12px; right: 16px;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--accent);
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.lang-btn {
  padding: 6px 14px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  user-select: none;
  font-family: var(--font);
  border: none;
  background: none;
}
.lang-btn.active { background: var(--accent); color: #000; }
.lang-btn:hover:not(.active) { color: #fff; }
#dev-label {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.08em;
  padding: 6px 10px 6px 4px;
  opacity: 0.7;
  display: flex;
  align-items: center;
}

/* ── NAVIGATION ────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(11,11,11,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-logo .logo-main {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.nav-logo .logo-main .logo-3d {
  color: var(--accent);
  position: relative;
}
.nav-logo .logo-sub {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 3px;
}
.logo-img {
  height: 17px;
  width: auto;
  display: block;
  align-self: flex-start; /* evita stretch horizontal dentro de .nav-logo (flex column) */
}
.logo-img--footer {
  max-height: 20px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}
nav ul {
  display: flex;
  list-style: none;
  gap: 28px;
  align-items: center;
}
nav ul li a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
nav ul li a:hover { color: var(--accent); }
nav ul li a .caret { font-size: 8px; opacity: 0.6; }
.nav-cta {
  padding: 9px 22px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: all 0.2s;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ── HERO ──────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/hero_bg.webp');
  background-size: cover;
  background-position: center right;
  opacity: 0.78;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,11,11,0.92) 35%, rgba(11,11,11,0.3) 70%, transparent 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
}
.hero-left { max-width: 580px; }
.hero-h1 {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.hero-h1 .accent { color: var(--accent); display: block; }
.hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  padding: 13px 28px;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 3px;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); }
.btn-outline {
  padding: 12px 26px;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.88);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 3px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline:hover { border-color: #fff; color: #fff; }
.hero-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.play-btn:hover { border-color: var(--accent); background: rgba(0,191,196,0.08); }
.play-btn svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
.play-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.75);
  max-width: 120px;
  line-height: 1.5;
}

/* ── LOGOS ─────────────────────────────────── */
#logos {
  background: var(--bg-light);
  padding: 40px 40px 56px;
  border-bottom: 1px solid #efefef;
}
.logos-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.logos-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #888;
  margin-bottom: 32px;
}
.logos-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.logos-strip {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logos-scroll 32s linear infinite;
}
@keyframes logos-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-item {
  opacity: 0.38;
  transition: opacity 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-item:hover { opacity: 1; }
/* Imágenes reales — siempre negro, hover solo sube opacidad */
.logo-client {
  height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  filter: brightness(0);
}
.logo-client--sm    { height: 32px; }
.logo-client--sq    { height: 48px; }
.logo-client--wide  { height: 34px; max-width: 180px; }
.logo-client--febal { height: 46px; max-width: 112px; }
.logo-client--unibo { height: 86px; max-width: 120px; }
/* Logo con color propio (ej. SAP): sin filtro negro, opacidad controla gris→color */
.logo-client--color { filter: none; }
.logo-item:hover .logo-client--color { filter: none; }

/* Text fallback: color negro para que opacity controle el gris → negro */
.logo-text {
  color: #000;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
}
.logo-text--xs { font-size: 12px; }
.logo-sub-line { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; display: block; }

/* ╔══════════════════════════════════════════════╗
   ║  SECCIÓN: SOLUZIONI PER OGNI ESIGENZA        ║
   ║  Fondo blanco. Cards unificadas.             ║
   ╚══════════════════════════════════════════════╝ */

/* — Contenedor de la sección — */
#solutions {
  background: #ffffff;          /* fondo blanco */
  padding: 64px 40px 0;         /* ↕ ajusta el padding top/bottom aquí */
}
.solutions-inner {
  max-width: var(--max-w);      /* ancho máximo del contenido */
  margin: 0 auto;
}

/* — Título de sección — */
.section-title {
  text-align: center;
  font-size: clamp(18px, 2.4vw, 24px);   /* tamaño del título */
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 40px;          /* espacio entre título y cards */
  color: #111111;
}
.section-title .accent { color: var(--accent); }

/* — Grid de 6 cards — */
.sol-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;                    /* ← espacio entre cards */
}

/* — Animación: una sola vuelta lenta y etérea —
   Usamos @keyframes en lugar de transition para evitar que
   el navegador calcule rutas cortas y haga doble vuelta.    */
@keyframes sol-spin {
  0%   { transform: perspective(700px) rotateY(0deg)   translateY(0px); }
  50%  { transform: perspective(700px) rotateY(180deg) translateY(-6px); }
  100% { transform: perspective(700px) rotateY(360deg) translateY(0px); }
}

/* — Card unificada (texto + imagen = una sola pieza) — */
.sol-card {
  position: relative;           /* necesario para .sol-card-back absoluto */
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;          /* ← radio de esquinas */
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.4s ease, transform 0.32s cubic-bezier(0.2, 0.75, 0.25, 1);
  transform-style: preserve-3d; /* habilita espacio 3D para los hijos */
  will-change: transform;
}
.sol-card:not(.is-flipping):hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  transform: translateY(-6px) scale(1.025);
  z-index: 2;
}
.sol-card.is-flipping {
  animation: sol-spin 1.54s linear forwards;
  z-index: 2;
}

/* — Ocultar el frente del contenido cuando la card da la vuelta — */
.sol-card-info,
.sol-card-img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* — Dorso blanco con borde — aparece exactamente a los 180° — */
.sol-card-back {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transform: rotateY(180deg);   /* apunta hacia atrás en reposo */
  backface-visibility: hidden;  /* oculto en reposo, visible a los 180° */
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

/* — Parte superior: ícono + título + descripción — */
.sol-card-info {
  padding: 22px 16px 18px;      /* ↕↔ ajusta padding del texto aquí */
  text-align: center;
  flex: 1;  /* crece para absorber espacio extra — la imagen siempre queda abajo */
}

/* — Ícono — */
.sol-icon {
  width: 40px;                  /* tamaño del ícono */
  height: 40px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--accent);        /* color del ícono = teal */
  fill: none;
  stroke-width: 1.5;
}

/* — Título de la card — */
.sol-card h3 {
  font-size: 9.5px;             /* tamaño del título de card */
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #111111;
}

/* — Descripción de la card — */
.sol-card p {
  font-size: 11px;              /* tamaño del texto descriptivo */
  color: #888888;
  line-height: 1.6;
}

/* — Parte inferior: imagen de proyecto — */
.sol-card-img {
  position: relative;
  flex: 0 0 140px;              /* ← altura FIJA igual en todas las cards */
  overflow: hidden;             /* ← clip aquí, NO en .sol-card */
  border-bottom-left-radius: 10px;    /* redondeo inferior izquierdo */
  border-bottom-right-radius: 10px;   /* redondeo inferior derecho */
}
.sol-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sol-card-img picture,
.story-card-bg picture {
  display: contents;
}
.sol-card:not(.is-flipping):hover .sol-card-img img { transform: scale(1.05); }

/* — Placeholder mientras no hay imagen real — */
.sol-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #b8cece, #96b0b0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #6a8a8a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* — Botón de flecha en la imagen — */
.sol-img-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;                  /* tamaño del botón circular */
  height: 32px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #000000;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.sol-img-btn:hover { background: var(--accent-dim); }

/* ── Fin sección Soluzioni ─────────────────── */

/* ── TECH PANEL ────────────────────────────── */
#tech {
  background: #0d0d0d;
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.tech-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
}
.tech-header {
  text-align: center;
  margin-bottom: 64px;
}
.tech-header h2 {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tech-header h2 .accent { color: var(--accent); }
.tech-panels {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: start;
}
.tech-panel-wrap {
  position: relative;
  display: block;
  min-height: 440px;
}
/* ── Canvas 3D: fondo absoluto detrás del texto ── */
.tech-img-col {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 440px;
  z-index: 3;
  pointer-events: none;
}
/* Panel izquierdo (scanner): canvas a la izquierda */
.tech-panel-wrap:not(.right) .tech-img-col {
  right: auto;
  left: 0;
}
#canvas-scanner,
#canvas-tablet {
  width: 300px;
  height: 440px;
  display: block;
  background: transparent;
}
/* ── Texto: encima del 3D ── */
.tech-panel {
  position: relative;
  z-index: 4;
  padding: 0 16px;
}
/* Izquierda: empujar texto a la derecha del canvas */
.tech-panel-wrap:not(.right) .tech-panel {
  padding-left: 300px;
}
/* Derecha: dejar espacio visual para el modelo */
.tech-panel-wrap.right .tech-panel {
  max-width: calc(100% - 200px);
}
.tech-badge {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.tech-panel h3 {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.tech-panel > p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  line-height: 1.65;
}
.tech-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.tech-feats li {
  font-size: 12.5px;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tech-feats li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.tech-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.tech-link:hover { gap: 10px; }
.vs-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.vs-circle {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
}
/* Campo 3D de escaneo: fondo -> malla -> modelos/textos */
#tech-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 1;
}

/* Immersive platform atmosphere: particles -> glass -> tablet/text. */
#immersive-canvas {
  position: absolute;
  top: -46px;
  left: -30px;
  width: calc(
    100% +
    max(72px, calc((100vw - var(--max-w)) / 2 + 72px))
  );
  height: calc(100% + 74px);
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 1;
  --immersive-fade-start: 42%;
  --immersive-fade-end: 72%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent var(--immersive-fade-start),
    #000 var(--immersive-fade-end),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent var(--immersive-fade-start),
    #000 var(--immersive-fade-end),
    #000 100%
  );
}

/* Old-browser fallback: a black veil protects the copy from the glass. */
@supports not ((mask-image: linear-gradient(to right, transparent, #000)) or
               (-webkit-mask-image: linear-gradient(to right, transparent, #000))) {
  .tech-panel-wrap.right::before {
    content: '';
    position: absolute;
    inset: -46px -42px -28px -30px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      to right,
      #080a0b 0%,
      rgba(8, 10, 11, 0.98) 44%,
      rgba(8, 10, 11, 0.72) 58%,
      transparent 74%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  #tech-canvas { opacity: 0.62; }
  #immersive-canvas { opacity: 0.78; }
}

/* ── SUCCESS STORIES ───────────────────────── */
#stories {
  background: var(--bg-dark);
  padding: 96px 40px;
}
.stories-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.stories-header {
  text-align: center;
  margin-bottom: 48px;
}
.stories-header h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.stories-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.stories-track-wrap {
  position: relative;
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.story-card {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #1a1a1a;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.story-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.story-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1a2a2a, #0d1515);
  /* SLOT: story card background image */
}
.story-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.4s;
}
.story-card:hover .story-card-bg img { opacity: 0.9; transform: scale(1.05); }
.story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 40%, transparent 100%);
}
.story-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 20px;
}
.story-content h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.story-content p {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 14px;
  line-height: 1.5;
}
.story-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.story-link:hover { gap: 10px; }
.stories-gallery-cta {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0a1a1b 0%, #0d1f20 100%);
  border-radius: 8px;
  border: 1px solid rgba(0,173,180,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
#cta-mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.stories-gallery-cta .stories-gallery-label,
.stories-gallery-cta .stories-gallery-btn {
  position: relative;
  z-index: 1;
}
.stories-gallery-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.88);
  line-height: 1.4;
}
.stories-gallery-label strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.stories-gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, gap 0.2s;
}
.stories-gallery-btn:hover {
  background: var(--accent-dim);
  transform: translateY(-1px);
  gap: 12px;
}

.btn-accent {
  padding: 14px 30px;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.btn-accent:hover { background: var(--accent-dim); transform: translateY(-1px); }

/* ── FOOTER ────────────────────────────────── */
#footer {
  background: #0b0b0b;
  border-top: 1px solid var(--border);
  padding: 64px 40px 32px;
  position: relative;
  overflow: hidden;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
/* Malla técnica discreta detrás de Contatti en todas las resoluciones. */
.footer-net {
  display: block;
  position: absolute;
  right: -12px;
  top: 52%;
  transform: translateY(-50%);
  width: min(40vw, 520px);
  height: auto;
  opacity: 0.68;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  z-index: 0;
}
.footer-top {
  position: relative;
  isolation: isolate;
}
.footer-top > .footer-col {
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  /* En escritorio la membrana se abre hacia el centro para llenar el vacío
     entre las columnas sin introducir una segunda malla repetida. */
  .footer-net {
    right: -34px;
    top: 55%;
    width: min(80vw, 1020px);
    opacity: 0.54;
    -webkit-mask-image: linear-gradient(to left, #000 68%, transparent 100%);
    mask-image: linear-gradient(to left, #000 68%, transparent 100%);
  }
}
@media (max-width: 899px) {
  .footer-net {
    right: -58px;
    top: 58%;
    width: min(116vw, 510px);
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
    mask-image: linear-gradient(to left, #000 62%, transparent 100%);
  }
}
/* CTA row integrado (antiguo pre-footer) */
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 44px;
}
.footer-cta-left h2 {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  line-height: 1.3;
  max-width: 480px;
  margin-bottom: 12px;
}
.footer-cta-left p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  max-width: 420px;
  line-height: 1.7;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.footer-brand .nav-logo { margin-bottom: 14px; }
.footer-brand p {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin-bottom: 18px;
}
.footer-socials {
  display: flex;
  gap: 12px;
}
.social-icon {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s;
}
.social-icon:hover { border-color: var(--accent); color: var(--accent); }
.footer-col h4 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--accent); }
.footer-addr,
.footer-company {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.9;
}
.footer-email {
  margin-top: 4px;
  margin-bottom: 20px;
}
.footer-addr-cols { display: block; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom a:hover { color: var(--accent); }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 1024px) {
  .cards-grid, .cards-images { grid-template-columns: repeat(3, 1fr); }
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-panels { grid-template-columns: 1fr; gap: 48px; }
  .tech-panel-wrap.right { grid-template-columns: auto 1fr; }
  .vs-col { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
  #navbar { padding: 0 20px; }
  nav ul { display: none; }
  .hero-content { flex-direction: column; padding: 60px 20px; }
  .hero-right { display: none; }
  .cards-grid, .cards-images { grid-template-columns: repeat(2, 1fr); }
  .stories-grid { grid-template-columns: 1fr; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  #solutions, #tech, #stories, #pre-footer { padding: 64px 20px; }
  #logos { padding: 36px 20px; }
}

/* ==========================================================
   UI REFINEMENT — visual language aligned to the reference
   Typography, color, rhythm and component proportions only.
   ========================================================== */

:root {
  --bg-dark: #080b0c;
  --bg-card: #101516;
  --bg-light: #f7f8f7;
  --accent: #00adb4;
  --accent-dim: #008f96;
  --text-light: #f7f8f8;
  --text-muted: #8e989b;
  --text-dark: #111718;
  --border: rgba(255,255,255,0.11);
  --font: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --max-w: 1240px;
  --nav-h: 70px;
}

body {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.008em;
  background: var(--bg-dark);
  color: var(--text-light);
}

#navbar {
  height: var(--nav-h);
  padding: 0 clamp(28px, 4vw, 58px);
  background: rgba(8,11,12,0.94);
  border-bottom-color: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
}
.logo-img { height: 20px; }
nav ul { gap: 34px; }
nav ul li a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.075em;
  color: rgba(255,255,255,0.88);
}
.nav-cta {
  padding: 10px 25px;
  border-color: rgba(0,173,180,0.7);
  border-radius: 2px;
}
.nav-hamburger, .nav-overlay, .nav-mobile-panel, .swipe-hint { display: none; }

#hero {
  min-height: 650px;
  padding-top: var(--nav-h);
}
.hero-bg {
  background: linear-gradient(110deg, #070a0b 0%, #0a1112 58%, #102224 100%);
}
.hero-bg-img { opacity: 0.82; }
.hero-overlay {
  background: linear-gradient(90deg, rgba(6,9,10,0.97) 0%, rgba(6,9,10,0.86) 36%, rgba(6,9,10,0.35) 73%, rgba(6,9,10,0.1) 100%);
}
.hero-content {
  max-width: 1360px;
  padding: 96px 40px 76px;
  gap: 64px;
}
.hero-left { max-width: 535px; }
.hero-h1 {
  font-size: clamp(37px, 4.1vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.hero-h1 .accent { color: var(--accent); }
.hero-sub {
  max-width: 455px;
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.76);
}
.hero-btns { gap: 12px; }
.btn-primary,
.btn-outline {
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.075em;
}
.btn-primary { color: #fff; }
.play-btn {
  width: 62px;
  height: 62px;
  border-width: 1.5px;
}
.play-label {
  max-width: 180px;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.075em;
}

#logos {
  padding: 24px 40px 30px;
  background: var(--bg-light);
  border-bottom-color: #e2e5e4;
}
.logos-label {
  margin-bottom: 20px;
  color: #545d5f;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
}
.logos-strip { gap: 56px; }
.logo-item { opacity: 0.55; }

#solutions {
  padding: 32px 40px 30px;
  background: var(--bg-light);
}
.section-title {
  margin-bottom: 24px;
  color: var(--text-dark);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.sol-cards-grid { gap: 9px; }
.sol-card {
  border-color: #dfe4e3;
  border-radius: 6px;
  box-shadow: 0 3px 14px rgba(17,31,33,0.055);
}
.sol-card-info { padding: 18px 13px 15px; }
.sol-icon {
  width: 35px;
  height: 35px;
  margin-bottom: 10px;
}
.sol-icon svg { stroke-width: 1.65; }
.sol-card h3 {
  min-height: 26px;
  margin-bottom: 7px;
  color: #111718;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sol-card p {
  color: #616b6d;
  font-size: 9.5px;
  line-height: 1.5;
}
.sol-card-img {
  flex-basis: 125px;
  border-radius: 0 0 6px 6px;
}
.sol-img-btn {
  width: 29px;
  height: 29px;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

#tech {
  padding: 54px 40px 46px;
  background: #080a0b;
}
.tech-header { margin-bottom: 42px; }
.tech-header h2 {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.035em;
}
.tech-panels { grid-template-columns: 1fr 70px 1fr; }
.tech-panel-wrap { min-height: 400px; }
.tech-img-col,
#canvas-scanner,
#canvas-tablet {
  width: 280px;
  height: 400px;
}
.tech-panel-wrap:not(.right) .tech-panel { padding-left: 280px; }
.tech-panel-wrap.right .tech-panel { max-width: calc(100% - 185px); }
.tech-panel { padding-inline: 12px; }
.tech-badge {
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 1px;
  color: #061012;
  font-size: 8px;
  letter-spacing: 0.12em;
}
.tech-panel h3 {
  margin-bottom: 10px;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.tech-panel > p {
  margin-bottom: 15px;
  color: rgba(255,255,255,0.62);
  font-size: 11.5px;
  line-height: 1.55;
}
.tech-feats {
  gap: 6px;
  margin-bottom: 22px;
}
.tech-feats li {
  gap: 7px;
  color: rgba(255,255,255,0.78);
  font-size: 10.5px;
  line-height: 1.35;
}
.tech-feats li::before {
  width: 13px;
  height: 13px;
  background-size: 8px;
}
.tech-link {
  font-size: 9.5px;
  letter-spacing: 0.08em;
}
.vs-col { padding-top: 62px; }
.vs-circle {
  width: 48px;
  height: 48px;
  border-width: 1px;
  font-size: 11px;
}

/* Desktop readability: descriptions, benefits, checks and CTA. */
@media (min-width: 901px) {
  .tech-panels {
    position: relative;
  }
  .tech-panel-wrap:not(.right) {
    grid-column: 1;
  }
  .tech-panel-wrap.right {
    grid-column: 3;
  }
  .vs-col {
    position: absolute;
    top: 0;
    left: 50%;
    width: 70px;
    padding-top: 62px;
    transform: translateX(-50%);
    z-index: 6;
  }
  .tech-panel h3 {
    min-height: 2.24em;
  }
  .tech-panel > p {
    min-height: 3.2em;
    margin-bottom: 17px;
    font-size: 13px;
    line-height: 1.6;
  }
  .tech-feats {
    gap: 7px;
    margin-bottom: 25px;
  }
  .tech-feats li {
    gap: 8px;
    font-size: 12px;
    line-height: 1.42;
  }
  .tech-feats li::before {
    width: 15px;
    height: 15px;
    background-size: 9px;
  }
  .tech-link {
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: 0.075em;
  }
  .tech-link:hover { gap: 12px; }
}

@media (max-width: 900px) {
  br.tech-desktop-break { display: none; }
}

#stories {
  padding: 32px 40px 30px;
  background: var(--bg-light);
  color: var(--text-dark);
}
.stories-header { margin-bottom: 20px; }
.stories-header h2 {
  color: var(--text-dark);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stories-header h2 span { color: var(--accent); }
.stories-header h2::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.stories-header p {
  margin-top: 3px;
  color: #697274;
  font-size: 10.5px;
  letter-spacing: 0;
}
.stories-grid { gap: 10px; }
.story-card {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(16,27,29,0.12);
}
.story-overlay {
  background: linear-gradient(to top, rgba(3,7,8,0.93) 8%, rgba(3,7,8,0.56) 54%, rgba(3,7,8,0.05) 100%);
}
.story-content { padding: 16px 15px 14px; }
.story-content h3 {
  margin-bottom: 2px;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.story-content p {
  margin-bottom: 8px;
  font-size: 9.5px;
  line-height: 1.4;
}
.story-link {
  color: #fff;
  font-size: 8.5px;
  letter-spacing: 0.06em;
}
.stories-nav {
  gap: 8px;
  margin-top: 15px;
}
.stories-arrow {
  width: 34px;
  height: 34px;
  border-color: #9ca5a5;
  color: #445052;
  font-size: 13px;
}
.dot { background: #c6cccb; }
.dot.active { background: var(--accent); }

.btn-accent {
  min-height: 42px;
  padding: 11px 24px;
  border-radius: 2px;
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.075em;
}

#footer {
  padding: 44px 40px 20px;
  background:
    radial-gradient(circle at 4% 0%, rgba(0,173,180,0.10), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(0,173,180,0.06), transparent 26%),
    #0b0b0b;
}
.footer-cta {
  padding-bottom: 34px;
  margin-bottom: 34px;
  gap: 38px;
}
.footer-cta-left h2 {
  max-width: 455px;
  margin-bottom: 8px;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.footer-cta-left p {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  line-height: 1.55;
}
.footer-top {
  grid-template-columns: 1.5fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 30px;
  margin-bottom: 18px;
}
.logo-img--footer { max-height: 26px; width: auto; }
.footer-brand p {
  margin-bottom: 14px;
  font-size: 9.5px;
  line-height: 1.55;
}
.footer-socials { gap: 8px; }
.social-icon {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.footer-col h4 {
  margin-bottom: 10px;
  font-size: 9px;
  letter-spacing: 0.09em;
}
.footer-col ul { gap: 5px; }
.footer-col ul li a,
.footer-addr,
.footer-company {
  font-size: 9.5px;
  line-height: 1.55;
}
.footer-bottom {
  font-size: 9px;
  letter-spacing: 0;
}

@media (min-width: 901px) and (max-width: 1024px) {
  .tech-panels { grid-template-columns: 1fr 58px 1fr; gap: 0; }
  .tech-panel-wrap { min-height: 390px; }
  .vs-col { display: flex; }
  .stories-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  #hero { min-height: 610px; }
  .hero-content { padding-block: 70px; }
  .tech-panels { grid-template-columns: 1fr; gap: 42px; }
  .vs-col { display: none; }
  .tech-panel-wrap.right .tech-panel { max-width: calc(100% - 185px); }
  .stories-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  #solutions, #tech, #stories, #pre-footer { padding: 45px 20px; }
  #stories { padding-block: 32px; }
  #logos { padding: 28px 20px; }
  .sol-card-img { flex-basis: 145px; }
  .tech-panel-wrap:not(.right) .tech-panel { padding-left: 235px; }
  .tech-img-col,
  #canvas-scanner,
  #canvas-tablet { width: 235px; }
}

@media (max-width: 540px) {
  .hero-h1 { font-size: 36px; }
  .tech-panel-wrap { min-height: 710px; }
  .tech-panel-wrap:not(.right) .tech-panel,
  .tech-panel-wrap.right .tech-panel {
    max-width: none;
    padding: 410px 0 0;
  }
  .tech-img-col {
    top: 0;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  #immersive-canvas {
    top: -24px;
    left: -20px;
    width: calc(100% + 40px);
    height: 445px;
    --immersive-fade-start: 18%;
    --immersive-fade-end: 58%;
  }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════
   MOBILE REFINEMENT — solo <=768px
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav ul { display: none; }
  .nav-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
  .nav-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; }
  .nav-mobile-panel { display: flex; flex-direction: column; position: fixed; top: 0; right: -100%; width: 220px; height: 100vh; background: #080a0b; border-left: 1px solid rgba(0,173,180,0.2); padding: 60px 24px 24px; z-index: 1000; transition: right 0.3s ease; }
  .nav-mobile-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
  .nav-mobile-panel li a { display: block; padding: 16px 0; font-size: 13px; letter-spacing: 0.1em; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-panel-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }
  .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; }
  body.nav-open .nav-overlay { display: block; }
  body.nav-open .nav-mobile-panel { right: 0; }
  .logo-img--footer { max-height: 18px; }

  #hero { min-height: 560px; }
  .hero-content { padding: 88px 20px 52px; }
  .hero-h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .hero-sub { font-size: 14px; }

  /* ── Hero: fondo oscuro con luz entrante (misma fórmula que el hero
     de tecnologie) en vez de la foto — deja ver el escáner viajero
     detrás del texto. Va aquí (bloque tardío) para ganar la cascada
     sobre las reglas base sin media query de más arriba. ── */
  .hero-bg-img { background-image: none; }
  .hero-bg {
    background:
      radial-gradient(circle at 78% 26%, rgba(0,173,180,0.16), transparent 46%),
      linear-gradient(120deg, #05080a 0%, #0a1213 55%, #0e1e20 100%);
  }
  .hero-overlay { background: none; }

  /* ── Parallax de revelado: la sección negra de tecnologías sube y
     cubre la sección blanca de cards. #solutions queda fija (sticky)
     mientras #tech, con fondo sólido, se desliza por encima. Solo
     afecta el orden de apilado (z-index) — no toca tamaños ni el
     resize de los canvases 3D de #tech.

     #solutions no tiene contenedor propio que acote su rango de
     "pegado": su containing block es el body, que llega hasta el
     final de la página, así que sigue siendo sticky mucho después de
     #tech (bug: las cards reaparecían sobre historias/footer). Como
     #tech ya lo tapa mientras dura su propia sección, basta con que
     TODO lo que viene después también quede por encima en el orden
     de apilado — sin necesidad de acotar el sticky con envoltorios
     extra que además romperían el alto del documento. ── */
  #solutions {
    /* Más espacio abajo: banda libre donde el escáner viajero se lee
       como una presencia grande de fondo en vez de asomar apenas por
       un hueco angosto entre las cards y la siguiente sección. */
    padding: 40px 20px 190px;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Transparente (antes blanco): #solutions es sticky con su propio
       z-index, así que pinta como un bloque atómico por encima del
       canvas del escáner sin importar la posición del modelo — si la
       sección tuviera su propio fondo opaco, taparía el escáner por
       completo. Al quedar transparente, el escáner se ve a través de
       cualquier hueco que no cubran las cards/el título/las
       partículas; el body ya tiene fondo oscuro (--bg-dark) como base. */
    background: transparent;
    overflow: hidden;
  }
  .section-title { color: #fff; }
  #tech,
  #stories,
  #footer {
    position: relative;
    z-index: 2;
  }
  /* Partículas discretas alrededor del escáner (ver hero-scanner.js,
     que las genera e inicia su animación al entrar la sección). */
  .sol-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .sol-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8CFFF2;
    opacity: 0;
    box-shadow: 0 0 6px rgba(92,255,242,0.85);
    animation: solParticleFloat 6s ease-in-out infinite;
  }
  @keyframes solParticleFloat {
    0%   { opacity: 0; transform: translateY(16px) scale(0.6); }
    18%  { opacity: 0.85; }
    50%  { transform: translateY(-12px) scale(1); }
    82%  { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-28px) scale(0.6); }
  }

  /* ── Carrusel sol-cards (mobile) ──
     Sin scroll-snap: el movimiento es continuo (ver mobile-experience.js)
     y el snap mandatory forcejeaba contra las escrituras de scrollLeft,
     dejando la card clavada en el punto de snap más cercano.
     Cards más pequeñas y cuadradas para dejarle protagonismo al
     escáner de fondo; los bordes del carrusel se desvanecen (mismo
     truco de máscara que la franja de logos) en vez de cortar en seco. */
  .sol-cards-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 10px 20px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 86%, transparent 100%);
  }
  .sol-cards-grid::-webkit-scrollbar { display: none; }
  .sol-card {
    flex: 0 0 48vw;
    aspect-ratio: 1 / 1.08;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .sol-card.is-carousel-active {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0,173,180,0.18);
  }
  .sol-card h3 { font-size: 9.5px; min-height: 0; margin-bottom: 4px; }
  .sol-card p {
    font-size: 9px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sol-icon { width: 22px; height: 22px; margin: 0 auto 6px; }
  /* Card compacta y cuadrada: info reducida al mínimo, la imagen se
     lleva la mayor parte del espacio. */
  .sol-card-info { padding: 12px 10px 8px; flex: 0 0 auto; }
  .sol-card-img { flex: 1 1 auto; min-height: 88px; }
  /* ── Swipe hint ── */
  .swipe-hint { display: flex; align-items: center; gap: 6px; opacity: 0.5; font-size: 11px; letter-spacing: 0.08em; color: var(--accent); margin-top: -8px; padding-left: 4px; transition: opacity 0.4s; }
  .swipe-hint.hidden { opacity: 0; pointer-events: none; }
  .sh-arrow { display: inline-block; animation: swipeNudge 1.4s ease-in-out infinite; }
  @keyframes swipeNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  /* ── Carrusel stories (mobile) ── */
  .stories-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 20px;
    scrollbar-width: none;
  }
  .stories-grid::-webkit-scrollbar { display: none; }
  .story-card {
    flex: 0 0 82vw;
    scroll-snap-align: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .story-card.is-carousel-active {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,173,180,0.15);
  }

  #tech { padding: 48px 20px 40px; }
  .tech-header { margin-bottom: 32px; }
  .tech-panel > p { font-size: 13px; }
  .tech-feats li { font-size: 12px; line-height: 1.45; }
  .tech-link { font-size: 11px; padding-block: 12px; }

  .story-content h3 { font-size: 14px; }
  .story-content p { font-size: 12px; }
  .story-link { font-size: 10.5px; padding-block: 10px; }
  .stories-gallery-cta { padding: 22px 20px; }
  .stories-gallery-label strong { font-size: 15px; }
  .stories-gallery-btn { min-height: 44px; width: 100%; justify-content: center; }

  .btn-accent { min-height: 44px; }
  .footer-cta-left h2 { font-size: 21px; }
  .footer-cta-left p, .footer-brand p, .footer-addr, .footer-company, .footer-col ul li a { font-size: 12px; }
  .footer-col ul { gap: 10px; }
  .footer-col ul li a { display: inline-block; padding-block: 4px; }
  .social-icon { width: 40px; height: 40px; font-size: 13px; }

  /* Las dos "Sede legale" van lado a lado en vez de en columna. */
  .footer-addr-cols { display: flex; gap: 16px; margin: 2px 0 8px; }
  .footer-addr-cols .footer-addr { flex: 1 1 0; min-width: 0; }
  .footer-email { margin-top: 2px; }
}

/* ══════════════════════════════════════════════════
   DUE TECNOLOGIE — LAYOUT DIAGONAL EXPERIMENTAL (<=540px)
   Escáner arriba-izquierda, tablet abajo-derecha,
   VS al centro sobre una diagonal luminosa.
   ══════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .hero-h1 { font-size: 29px; }
  .sol-card-img { flex-basis: 170px; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }

  .tech-panels { display: block; position: relative; }

  /* Malla del escáner: recortada a la zona superior (header + panel escáner)
     para que las partículas no se derramen sobre plataforma inmersiva. */
  #tech-canvas { height: 790px; }

  /* Escáner: esquina superior izquierda (canvas izq, texto der) */
  .tech-panel-wrap { min-height: 0; }
  .tech-panel-wrap:not(.right) { min-height: 300px; }
  .tech-panel-wrap:not(.right) .tech-img-col {
    top: 0; left: 0 !important; right: auto !important;
    transform: none; width: 160px; height: 250px;
  }
  #canvas-scanner { width: 160px; height: 250px; }
  .tech-panel-wrap:not(.right) .tech-panel { max-width: none; padding: 0 0 0 172px; }

  /* Separador diagonal + VS al centro */
  .tech-panels::before {
    content: '';
    position: absolute; left: -12%; width: 124%; top: 50%; height: 1.5px;
    background: linear-gradient(90deg, transparent 4%, rgba(0,173,180,0.5) 28%,
                                rgba(0,173,180,0.5) 72%, transparent 96%);
    transform: rotate(-14deg); pointer-events: none;
  }
  .vs-col {
    display: flex; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); padding: 0; z-index: 6;
  }
  .vs-circle { background: #080a0b; box-shadow: 0 0 0 10px #080a0b; }

  /* Tablet: esquina inferior derecha (texto izq, canvas der) */
  .tech-panel-wrap.right { min-height: 300px; margin-top: 96px; }
  .tech-panel-wrap.right .tech-img-col {
    /* Ajuste exclusivo de teléfono: centra la composición y conserva
       dentro de cámara el canto derecho de la tablet ampliada. */
    top: 130px; bottom: auto; left: auto !important; right: 18px !important;
    transform: none; width: 310px; height: 290px;
  }
  #canvas-tablet { width: 310px; height: 290px; }
  .tech-panel-wrap.right .tech-panel { max-width: none; padding: 0 190px 0 0; }

  /* Velo de lectura: cristal/tablet debajo, máscara en medio y copy arriba.
     Su borde derecho se disuelve para que la tablet siga presente y no se
     perciba como un rectángulo negro colocado sobre la composición. */
  .tech-panel-wrap.right::after {
    content: '';
    position: absolute;
    z-index: 5;
    top: -18px;
    bottom: -18px;
    left: -20px;
    width: 62%;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(8, 10, 11, 0.90) 0%,
      rgba(8, 10, 11, 0.82) 58%,
      rgba(8, 10, 11, 0.42) 82%,
      rgba(8, 10, 11, 0) 100%
    );
  }

  /* El cristal funciona como atmósfera completa del panel inmersivo.
     La máscara horizontal continúa protegiendo la lectura del texto. */
  #immersive-canvas {
    top: -72px;
    left: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 150px);
  }
}

/* Final cascade overrides for the client wave. */
#logos {
  background:
    radial-gradient(ellipse 46% 130% at 16% 10%, rgba(255,255,255,0.13), transparent 62%),
    linear-gradient(112deg, #007c80 0%, #008f92 48%, #007477 100%);
  border-bottom-color: rgba(0,0,0,0.12);
}
#logos .logos-label { color: #fff; }
#logos .logo-client--color,
#logos .logo-item:hover .logo-client--color { filter: invert(1) grayscale(1) contrast(1.05); }

#logos .logo-client--sap-white,
#logos .logo-item:hover .logo-client--sap-white { filter: none; }

/* Estructura añadida sin impacto visual en escritorio. */
#hero-ambient-canvas,
.hero-light-rays { display: none; }
.hero-scanner-fade { display: none; }
.solutions-aurora { display: none; }
.sol-carousel-stage { display: contents; }

/* ============================================================
   MOBILE CLIENT REFINEMENT · 2026-07-22
   Capas: fondo < ambiente < escáner < contenido/logos
   ============================================================ */
@media (max-width: 768px) {
  /* El escáner puede cruzar el final del hero, pero la banda corporativa
     siempre lo cubre: la cola queda físicamente detrás de los logos. */
  #logos {
    position: relative;
    z-index: 5;
    isolation: isolate;
  }

  /* Misma luz volumétrica de la tabla comparativa: verde-negro profundo,
     lavado superior derecho y tres haces largos sin cortes visibles. */
  #hero { isolation: auto; }
  .hero-bg {
    background:
      radial-gradient(ellipse 72% 52% at 104% -2%, rgba(160,255,246,0.18), transparent 68%),
      radial-gradient(ellipse 54% 42% at 90% 10%, rgba(0,183,190,0.16), transparent 64%),
      radial-gradient(ellipse 96% 68% at -18% 112%, rgba(0,155,164,0.16), transparent 72%),
      linear-gradient(158deg, #04080a 0%, #071013 44%, #0a1a16 100%);
  }
  #hero-ambient-canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .hero-light-rays {
    display: block;
    position: absolute;
    top: -24%;
    right: auto;
    left: -70%;
    width: 220%;
    height: 170%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-light-rays span {
    position: absolute;
    top: -10%;
    height: 130%;
    background: linear-gradient(to bottom, rgba(190,255,250,0.25), rgba(190,255,250,0.055) 48%, transparent 76%);
    transform: rotate(35deg);
    transform-origin: top right;
    filter: blur(18px);
  }
  .hero-light-rays span:nth-child(1) { right: 8%; width: 92px; opacity: 0.52; }
  .hero-light-rays span:nth-child(2) { right: 40%; width: 54px; opacity: 0.34; }
  .hero-light-rays span:nth-child(3) { right: 66%; width: 34px; opacity: 0.22; }
  .hero-overlay { z-index: 0; }
  /* Fade lineal: casi transparente en el centro y progresivamente más
     oscuro hacia el extremo derecho del hero. */
  .hero-scanner-fade {
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent 0%,
      transparent 48%,
      rgba(2,7,8,0) 64%,
      rgba(2,7,8,0) 82%,
      rgba(2,7,8,0) 150%);
  }
  .hero-content { position: relative; z-index: 4; }
  .hero-left {
    position: relative;
    z-index: 1;
  }

  /* Fondo blanco real por debajo del canvas fijo. El pseudo-elemento pinta
     la sección; el escáner queda en medio y el contenido por encima. */
  #solutions {
    position: sticky;
    top: var(--nav-h);
    z-index: auto;
    isolation: auto;
    overflow: visible;
    padding: 48px 16px 10px;
    background: transparent;
  }
  #solutions::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 66% 52% at 110% 4%, rgba(0,143,153,0.13), transparent 68%),
      radial-gradient(ellipse 58% 46% at -8% 88%, rgba(24,68,150,0.09), transparent 72%),
      linear-gradient(142deg, #f4faf9 0%, #ffffff 43%, #f2f8f8 100%);
    pointer-events: none;
  }
  #solutions::after {
    content: none;
  }
  .solutions-aurora {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    perspective: 700px;
  }
  /* Arco óptico: da una geometría reconocible a la luz, como una lente
     atravesando niebla, en lugar de una simple mancha radial. */
  .solutions-aurora::before {
    content: '';
    position: absolute;
    width: 470px;
    height: 185px;
    left: -215px;
    top: 118px;
    border: 1px solid rgba(0,151,164,0.24);
    border-radius: 50%;
    opacity: 0.72;
    box-shadow:
      0 0 20px rgba(0,173,180,0.13),
      inset 0 0 26px rgba(26,83,154,0.08);
    transform: rotate(-19deg) skewX(-7deg);
    animation: solutionsLensArc 11s ease-in-out infinite alternate;
  }
  /* Lámina de luz afilada: los extremos triangulares hacen que el volumen
     tenga dirección y profundidad, no aspecto de degradado de fondo. */
  .solutions-aurora::after {
    content: '';
    position: absolute;
    width: 470px;
    height: 210px;
    top: -72px;
    right: -250px;
    opacity: 0.58;
    clip-path: polygon(10% 28%, 100% 0, 78% 100%, 0 72%);
    background: linear-gradient(112deg,
      transparent 4%,
      rgba(19,83,153,0.08) 28%,
      rgba(0,173,180,0.32) 49%,
      rgba(160,255,246,0.13) 63%,
      transparent 82%);
    filter: blur(8px) drop-shadow(0 0 14px rgba(0,173,180,0.10));
    transform: rotate(-10deg) translateZ(-40px);
    animation: solutionsLightSheet 9s ease-in-out infinite alternate;
  }
  .solutions-aurora span {
    position: absolute;
    display: block;
    will-change: transform;
    mix-blend-mode: multiply;
  }
  .solutions-aurora span:nth-child(1) {
    width: 520px;
    height: 92px;
    top: 76px;
    right: -280px;
    opacity: 0.52;
    clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 60%);
    background: linear-gradient(90deg,
      transparent 0%, rgba(0,173,180,0.04) 20%,
      rgba(0,173,180,0.46) 54%, rgba(124,242,236,0.18) 72%, transparent 100%);
    filter: blur(7px) drop-shadow(0 0 12px rgba(0,173,180,0.11));
    animation: solutionsAuroraA 10s ease-in-out infinite alternate;
  }
  .solutions-aurora span:nth-child(2) {
    width: 430px;
    height: 74px;
    left: -245px;
    bottom: 70px;
    opacity: 0.38;
    clip-path: polygon(0 0, 100% 38%, 100% 62%, 0 100%);
    background: linear-gradient(90deg,
      transparent 2%, rgba(23,68,145,0.26) 38%,
      rgba(0,151,164,0.20) 64%, transparent 100%);
    filter: blur(12px);
    animation: solutionsAuroraB 13s ease-in-out -4s infinite alternate;
  }
  .solutions-aurora span:nth-child(3) {
    width: 210px;
    height: 210px;
    right: -96px;
    bottom: -72px;
    border: 1px solid rgba(0,173,180,0.20);
    border-radius: 50%;
    opacity: 0.65;
    box-shadow:
      0 0 18px rgba(0,173,180,0.10),
      inset 0 0 32px rgba(17,78,148,0.08);
    animation: solutionsAuroraC 9s ease-in-out -2s infinite alternate;
  }
  @keyframes solutionsAuroraA {
    from { transform: rotate(-18deg) translate3d(0,0,0); }
    to { transform: rotate(-13deg) translate3d(-68px,54px,0) scaleY(1.16); }
  }
  @keyframes solutionsAuroraB {
    from { transform: rotate(21deg) translate3d(0,0,0); }
    to { transform: rotate(15deg) translate3d(82px,-42px,0) scaleX(1.12); }
  }
  @keyframes solutionsAuroraC {
    from { transform: rotate(-14deg) scale(0.92); }
    to { transform: translate(-48px,-36px) rotate(8deg) scale(1.12); }
  }
  @keyframes solutionsLensArc {
    to { transform: translate(54px,-30px) rotate(-13deg) skewX(-4deg) scale(1.08); opacity: 0.38; }
  }
  @keyframes solutionsLightSheet {
    to { transform: translate(-46px,52px) rotate(-4deg) translateZ(16px); opacity: 0.30; }
  }
  #solutions .solutions-inner {
    position: relative;
    z-index: auto;
  }
  #solutions .section-title {
    position: relative;
    z-index: 4;
    color: #101719;
    margin-bottom: 26px;
    padding-bottom: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1.22;
  }
  #tech,
  #stories,
  #footer {
    position: relative;
    z-index: 5;
  }

  /* Carrusel desplazado a la derecha para dejar una columna libre para la
     presencia del escáner, sin panel ni borde decorativo alrededor. */
  .sol-carousel-stage {
    display: block;
    position: relative;
    min-height: 430px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 4px 0 46px;
    overflow: hidden;
    z-index: 3;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .sol-carousel-stage::before {
    content: none;
  }
  .sol-cards-grid {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 calc((100% - 250px) / 2) 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sol-cards-grid::-webkit-scrollbar { display: none; }
  .sol-card {
    flex: 0 0 250px;
    width: 250px;
    height: 380px;
    aspect-ratio: auto;
    overflow: hidden;
    border: 1px solid #dfe4e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(17,31,33,0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .sol-card.is-carousel-active {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(17,31,33,0.14);
  }
  .sol-card-info { padding: 14px 13px 11px; }
  .sol-card h3 { font-size: 11.5px; line-height: 1.24; margin-bottom: 6px; }
  .sol-card p { font-size: 11px; line-height: 1.4; }
  .sol-icon { width: 23px; height: 23px; margin-bottom: 6px; }
  .sol-card-img { flex: 1 1 auto; min-height: 246px; border-radius: 0 0 8px 8px; }
  .solutions-scroll-cue {
    top: 194px;
    right: 12px;
    bottom: auto;
    z-index: 5;
    transform: translateY(-50%);
    color: var(--accent);
    background: rgba(255,255,255,0.94);
    box-shadow: 0 6px 16px rgba(17,31,33,0.16);
  }
  .solutions-scroll-cue:active {
    transform: translateY(-50%) scale(0.88);
  }
  @keyframes solutionsCueFloat {
    0%, 100% { transform: translate(0, -50%); }
    50% { transform: translate(-4px, -50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .solutions-aurora span,
    .solutions-aurora::before,
    .solutions-aurora::after { animation: none; }
  }
}

/* Cascada final para la experiencia móvil de historias. Se mantiene al final
   para prevalecer sobre los bloques responsive heredados del template. */
@media (max-width: 768px) {
  #tech,
  #stories {
    z-index: auto;
    isolation: auto;
  }
  #footer { z-index: 7; }

  #stories {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse 82% 44% at 108% 12%, rgba(0,184,192,0.16), transparent 70%),
      radial-gradient(ellipse 74% 42% at -12% 88%, rgba(26,82,156,0.11), transparent 72%),
      linear-gradient(148deg, #f8fbfb 0%, #ffffff 48%, #eef8f8 100%);
  }
  #stories .stories-inner {
    position: relative;
    z-index: auto;
  }
  #stories .stories-header,
  #stories .swipe-hint {
    position: relative;
    z-index: 6;
  }
  #stories .stories-gallery-cta {
    position: relative;
    z-index: auto;
  }
  #stories .stories-gallery-label,
  #stories .stories-gallery-btn {
    position: relative;
    z-index: 6;
  }
  #stories .stories-grid {
    position: relative;
    z-index: 5;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: none;
    gap: 16px;
    padding: 4px calc((100% - 82vw) / 2) 22px;
  }
  #stories .story-card {
    flex: 0 0 82vw;
    scroll-snap-align: none;
  }
}

/* ============================================================
   LEGIBILITY PASS — supporting copy, cards and footer
   The principal headlines keep their current scale; the smaller
   information text receives the extra size requested by the client.
   ============================================================ */
.hero-sub { font-size: 15px; }
.btn-primary,
.btn-outline { font-size: 10.5px; }
.play-label { font-size: 11px; }
.logos-label { font-size: 10px; }

.section-title { font-size: clamp(18px, 1.9vw, 23px); }
.sol-card h3 { font-size: 11px; }
.sol-card p { font-size: 10.5px; line-height: 1.55; }

.tech-header h2 { font-size: clamp(20px, 2.1vw, 27px); }
@media (min-width: 901px) {
  .tech-panel > p { font-size: 14px; }
  .tech-feats li { font-size: 13px; }
  .tech-link { font-size: 12px; }
}

.stories-header h2 { font-size: clamp(20px, 2.1vw, 26px); }
.stories-header p { font-size: 12px; }
.story-content h3 { font-size: 13.5px; }
.story-content p { font-size: 10.5px; }
.story-link { font-size: 9.5px; }
.stories-gallery-label { font-size: 14px; }
.stories-gallery-label strong { font-size: 18px; }
.stories-gallery-btn { font-size: 11px; }

.footer-cta-left p { font-size: 13px; }
.footer-brand p { font-size: 12px; }
.footer-col h4 { font-size: 11px; }
.footer-col ul li a,
.footer-addr,
.footer-company { font-size: 12.5px; }
.footer-bottom { font-size: 10.5px; }

@media (max-width: 768px) {
  .hero-sub { font-size: 15px; line-height: 1.7; }
  .btn-primary,
  .btn-outline { font-size: 11px; }

  .section-title { font-size: 20px; }
  .sol-card h3 { font-size: 12.5px; }
  .sol-card p { font-size: 11.5px; line-height: 1.45; }

  .tech-panel > p { font-size: 14px; }
  .tech-feats li { font-size: 13px; line-height: 1.5; }
  .tech-link { font-size: 12px; }

  .stories-header p { font-size: 12px; }
  .story-content h3 { font-size: 15px; }
  .story-content p { font-size: 13px; }
  .story-link { font-size: 11.5px; }
  .stories-gallery-label { font-size: 14px; }
  .stories-gallery-label strong { font-size: 16.5px; }
  .stories-gallery-btn { font-size: 11.5px; }

  .footer-cta-left p { font-size: 14px; }
  .footer-brand p,
  .footer-addr,
  .footer-company,
  .footer-col ul li a { font-size: 13px; }
  .footer-col h4 { font-size: 11px; }
  .footer-bottom { font-size: 11px; }
  .footer-col#contatti { grid-column: 1 / -1; }
  .footer-col#contatti .footer-addr-cols { gap: 24px; }
}

/* ============================================================
   TABLET LAYOUT — iPad / 769–1180px
   Six desktop cards are too narrow in this range. Tablets use a
   3 × 2 grid, while the technology panels become two wide rows.
   iPad Mini at 768px keeps the established touch carousel.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1180px) {
  #solutions {
    padding: 42px 40px 44px;
  }
  .section-title {
    margin-bottom: 30px;
    font-size: 22px;
  }
  .sol-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .sol-card-info {
    min-height: 152px;
    padding: 20px 18px 17px;
  }
  .sol-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
  }
  .sol-card h3 {
    min-height: 0;
    font-size: 12.5px;
    line-height: 1.3;
  }
  .sol-card p {
    font-size: 12.5px;
    line-height: 1.55;
  }
  .sol-card-img {
    flex-basis: 180px;
  }

  #tech {
    padding: 58px 40px 52px;
  }
  .tech-header {
    margin-bottom: 46px;
  }
  .tech-panels {
    grid-template-columns: minmax(0, 1fr);
    gap: 54px;
  }
  .vs-col {
    display: none;
  }
  .tech-panel-wrap,
  .tech-panel-wrap:not(.right),
  .tech-panel-wrap.right {
    grid-column: 1;
    min-height: 460px;
  }
  .tech-img-col,
  #canvas-scanner,
  #canvas-tablet {
    width: 300px;
    height: 420px;
  }
  .tech-panel-wrap:not(.right) .tech-panel {
    max-width: none;
    padding: 0 20px 0 300px;
  }
  .tech-panel-wrap.right .tech-panel {
    max-width: calc(100% - 300px);
    padding: 0 20px;
  }
  .tech-panel h3 {
    min-height: 0;
    font-size: 24px;
  }
  .tech-panel > p {
    min-height: 0;
    font-size: 14px;
  }
  .tech-feats li {
    font-size: 13px;
  }

  .stories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .story-content h3 {
    font-size: 15px;
  }
  .story-content p {
    font-size: 12.5px;
  }
  .story-link {
    font-size: 11px;
  }
}

/* ============================================================
   IPAD TYPOGRAPHY — 744–1180px
   Covers iPad Mini, iPad and iPad Pro without changing phone or
   desktop typography.
   ============================================================ */
@media (min-width: 744px) and (max-width: 1180px) {
  nav ul li a {
    font-size: 12px;
  }
  .nav-mobile-panel li a {
    font-size: 14px;
  }

  .hero-h1 {
    font-size: clamp(33px, 4.2vw, 44px);
  }
  .hero-sub {
    font-size: 16px;
  }
  .btn-primary,
  .btn-outline {
    font-size: 12px;
  }
  .logos-label {
    font-size: 11.5px;
  }

  .section-title,
  #solutions .section-title {
    font-size: 24px;
  }
  .sol-card h3 {
    font-size: 14px;
    line-height: 1.3;
  }
  .sol-card p {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .tech-header h2 {
    font-size: 28px;
  }
  .tech-panel h3 {
    font-size: 27px;
  }
  .tech-panel > p {
    font-size: 16px;
    line-height: 1.55;
  }
  .tech-feats li {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .tech-link {
    font-size: 13px;
  }

  .stories-header h2 {
    font-size: 26px;
  }
  .stories-header p {
    font-size: 14px;
  }
  .story-content h3 {
    font-size: 16px;
  }
  .story-content p {
    font-size: 14px;
    line-height: 1.5;
  }
  .story-link {
    font-size: 12.5px;
  }
  .stories-gallery-label {
    font-size: 15px;
  }
  .stories-gallery-label strong {
    font-size: 19px;
  }
  .stories-gallery-btn {
    font-size: 12.5px;
  }

  .footer-cta-left h2 {
    font-size: 28px;
  }
  .footer-cta-left p,
  .footer-brand p,
  .footer-addr,
  .footer-company,
  .footer-col ul li a {
    font-size: 16px;
    line-height: 1.6;
  }
  .footer-col h4 {
    font-size: 13px;
  }
  .footer-bottom {
    color: rgba(255,255,255,0.82);
    font-size: 12.5px;
  }
  .footer-addr,
  .footer-company,
  .footer-col ul li a,
  .footer-addr strong { color: #fff; }
}

/* El cliente retiró del footer el CTA repetido, la columna de marca,
   redes sociales y Esplora. Contatti ocupa ahora todo el ancho disponible. */
#footer .footer-top {
  grid-template-columns: minmax(0, 1fr);
}

/* Título móvil de Soluciones por encima del canvas 3D.
   El bloque vive en el flujo justo antes de #solutions y replica su sticky.
   No existe seguimiento de scroll por JavaScript ni transformaciones. */
.solutions-title-top-layer {
  display: none;
}

@media (max-width: 768px) {
  #solutions .solutions-title-anchor {
    opacity: 0;
  }

  .solutions-title-top-layer {
    display: block;
    position: sticky;
    top: var(--nav-h);
    height: 0;
    z-index: 4;
    pointer-events: none;
  }

  .solutions-title-top-layer .section-title {
    position: absolute;
    top: 48px;
    left: 16px;
    width: calc(100vw - 32px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #101719;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
  }
}

@media (min-width: 744px) and (max-width: 768px) {
  .solutions-title-top-layer .section-title {
    font-size: 24px;
  }
}

/* ══════════════════════════════════════════════════
   LETRA MÁS GRANDE EN MÓVIL — pedido del cliente (2ª vez)
   Bloque final para ganar la cascada sobre los ~12 bloques
   @media (max-width:768px) previos acumulados en este archivo.
   Sube el tamaño base y el de los textos más leídos de la
   página sin tocar layout/posiciones.
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size: 15.5px; }

  .hero-h1 { font-size: 33px; }
  .hero-sub { font-size: 16.5px; line-height: 1.6; }
  .btn-primary, .btn-outline { font-size: 12.5px; }

  .section-title,
  .solutions-title-top-layer .section-title { font-size: 20px; }
  .sol-card h3 { font-size: 14.5px; }
  .sol-card p { font-size: 13px; }

  .tech-header h2 { font-size: 22px; }
  .tech-panel > p { font-size: 15.5px; }
  .tech-feats li { font-size: 14.5px; }
  .tech-link { font-size: 12.5px; }

  /* La lista de features del escáner ahora envuelve a más líneas con
     la letra más grande, así que crece más de lo que el layout diagonal
     esperaba y "SCOPRI DI PIÙ" queda debajo del círculo VS (que se
     centra al 50% de la altura combinada de los dos paneles). Se le
     da más aire al panel del escáner para que ese 50% caiga más abajo,
     lejos del link. */
  .tech-panel-wrap:not(.right) { margin-bottom: 46px; }

  .story-content h3 { font-size: 17px; }
  .story-content p { font-size: 14.5px; }
  .story-link { font-size: 12px; }
  .stories-gallery-label strong { font-size: 16.5px; }

  .footer-cta-left h2 { font-size: 23px; }
  .footer-cta-left p,
  .footer-addr,
  .footer-company,
  .footer-col ul li a { font-size: 16px; line-height: 1.6; }
  .footer-col h4 { font-size: 13px; }
  .footer-addr,
  .footer-company,
  .footer-col ul li a,
  .footer-addr strong { color: #fff; }
  .footer-bottom { color: rgba(255,255,255,0.82); }
}

/* ============================================================
   DESKTOP LEGIBILITY PASS — feedback Andrea 2026-07-29
   Desktop-only: preserve the approved phone and tablet layouts.
   ============================================================ */
@media (min-width: 1181px) {
  .hero-content {
    padding-block: 92px;
  }
  .hero-left {
    max-width: 760px;
  }
  .hero-h1 {
    font-size: clamp(47px, 6.5vw, 75px);
    line-height: 1.06;
    margin-bottom: 28px;
  }
  .hero-sub {
    max-width: 650px;
    font-size: 19.5px;
    line-height: 1.6;
  }

  #logos {
    padding-top: 38px;
  }
  #logos .logos-label {
    max-width: 980px;
    margin: 0 auto 34px;
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    color: #050707;
  }
  #logos .logos-label-accent {
    color: #fff;
  }

  #tech {
    padding-top: 96px;
    padding-bottom: 120px;
  }
  .tech-header {
    margin-bottom: 72px;
  }
  .tech-panel-wrap {
    min-height: 560px;
  }
  .tech-panels {
    grid-template-columns: 1fr 100px 1fr;
  }
  .tech-img-col,
  #canvas-scanner,
  #canvas-tablet {
    height: 520px;
  }
  .tech-panel-wrap.right .tech-img-col,
  #canvas-tablet {
    width: 330px;
  }
  .tech-panel-wrap.right .tech-img-col {
    right: 0;
  }
  .tech-panel-wrap.right .tech-panel {
    max-width: calc(100% - 285px);
  }
  .tech-badge {
    font-size: 12px;
    padding: 6px 14px;
    margin-bottom: 20px;
  }
  .tech-panel h3 {
    font-size: clamp(24px, 2.8vw, 31px);
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .tech-panel > p {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .tech-feats {
    gap: 11px;
    margin-bottom: 34px;
  }
  .tech-feats li {
    font-size: 17px;
    line-height: 1.35;
  }
  .tech-feats li::before {
    width: 19px;
    height: 19px;
    background-size: 12px;
  }
  .tech-link {
    font-size: 15.5px;
  }
  .vs-col {
    padding-top: 96px;
  }
  .vs-circle {
    width: 76px;
    height: 76px;
    border-width: 3px;
    background: rgba(0,191,196,0.12);
    box-shadow: 0 0 28px rgba(0,191,196,0.28);
    font-size: 17px;
    color: #fff;
  }

  #stories {
    padding: 72px 40px 76px;
  }
  .stories-header {
    margin-bottom: 36px;
  }
  .stories-header h2 {
    font-size: clamp(30px, 2.7vw, 36px);
    line-height: 1.1;
  }
  .stories-header h2::after {
    width: 9px;
    height: 9px;
    margin-left: 8px;
  }
  .stories-header p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.5;
  }
  .stories-grid {
    gap: 18px;
  }
  .story-card {
    min-height: 250px;
    aspect-ratio: auto;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(16,27,29,0.16);
  }
  .story-content {
    padding: 26px 22px 22px;
  }
  .story-content h3 {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 1.25;
  }
  .story-content p {
    min-height: 42px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
  }
  .story-link {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .stories-gallery-cta {
    margin-top: 36px;
    padding: 34px 36px;
    border-radius: 10px;
  }
  .stories-gallery-label {
    font-size: 16px;
    line-height: 1.5;
  }
  .stories-gallery-label strong {
    margin-bottom: 4px;
    font-size: 22px;
  }
  .stories-gallery-btn {
    min-height: 52px;
    padding: 15px 32px;
    font-size: 13px;
  }

  #footer .footer-top {
    display: block;
    padding-bottom: 56px;
  }
  #footer .footer-col#contatti {
    width: 100%;
  }
  #footer .footer-col h4 {
    font-size: 18px;
    margin-bottom: 22px;
  }
  #footer .footer-company {
    font-size: 17px;
    margin-bottom: 2px;
    color: #fff;
  }
  #footer .footer-addr-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(80px, 12vw, 200px);
    margin-bottom: 18px;
  }
  #footer .footer-addr {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
  }
  #footer .footer-addr strong {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 21px;
    color: #fff;
  }
  #footer .footer-email {
    font-size: 17px;
    color: #fff;
    margin: 0 0 28px;
  }
  #footer .footer-bottom {
    font-size: 12.5px;
    color: rgba(255,255,255,0.72);
  }
}

/* ============================================================
   CLIENT ROUND 2026-08-04
   Logo strip, mobile navigation, VS marker and compact footer.
   These late overrides deliberately preserve the approved phone
   composition everywhere else.
   ============================================================ */

.logos-label-brand {
  display: inline-block;
  width: auto;
  height: 1.18em;
  margin-left: 0.32em;
  vertical-align: -0.18em;
  filter: brightness(0) invert(1);
}

@media (min-width: 1181px) {
  #logos {
    padding-top: 40px;
    padding-bottom: 38px;
  }

  #logos .logos-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 30px;
  }

  #logos .logos-label-brand {
    height: 31px;
    margin: 0;
  }

  #logos .logos-strip {
    gap: 52px;
  }

  #logos .logo-item {
    min-width: 108px;
  }

  #logos .logo-client {
    height: 52px;
    max-width: 190px;
  }

  #logos .logo-client--sm {
    height: 45px;
  }

  #logos .logo-client--sq {
    height: 64px;
  }

  #logos .logo-client--colombini {
    height: 82px;
  }

  #logos .logo-client--wide {
    height: 48px;
    max-width: 220px;
  }

  #logos .logo-client--febal {
    height: 62px;
    max-width: 148px;
  }

  #logos .logo-client--unibo {
    height: 104px;
    max-width: 150px;
  }

  #logos .logo-client--sap-white,
  #logos .logo-item:hover .logo-client--sap-white {
    filter: brightness(0) invert(1);
  }

  #logos .logo-text {
    font-size: 21px;
  }

  #logos .logo-text--xs {
    font-size: 17px;
  }

  #footer {
    padding: 44px 40px 26px;
  }

  #footer .footer-top {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: clamp(54px, 8vw, 132px);
    align-items: start;
    padding-bottom: 22px;
    margin-bottom: 12px;
  }

  #footer .footer-col#contatti,
  #footer .footer-col {
    width: auto;
  }

  #footer .footer-col h4 {
    margin-bottom: 13px;
    font-size: 15px;
    line-height: 1.2;
  }

  #footer .footer-company,
  #footer .footer-email,
  #footer .footer-addr {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
  }

  #footer .footer-email {
    margin-top: 3px;
  }

  #footer .footer-net {
    top: 56%;
  }
}

@media (max-width: 768px) {
  .nav-mobile-panel {
    right: -100%;
    width: min(84vw, 360px);
    padding: 76px 22px 28px;
    background:
      radial-gradient(circle at 100% 8%, rgba(0, 173, 180, 0.10), transparent 34%),
      #080a0b;
    box-shadow: -20px 0 54px rgba(0, 0, 0, 0.38);
  }

  .nav-mobile-panel ul {
    gap: 12px;
  }

  .nav-mobile-panel li a {
    min-height: 58px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 191, 196, 0.22);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.018);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.105em;
  }

  .nav-mobile-panel li:last-child a {
    border-color: rgba(0, 191, 196, 0.62);
    background: rgba(0, 191, 196, 0.08);
  }

  .nav-panel-close {
    top: 22px;
    right: 22px;
    font-size: 32px;
  }

  .nav-overlay {
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(2px);
  }

  body.nav-open {
    overflow: hidden;
  }

  #footer .footer-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  #footer .footer-contact {
    grid-column: 1 / -1;
  }

  #footer .footer-col h4 {
    margin-bottom: 10px;
  }
}

@media (max-width: 540px) {
  /* CONTROLES DEL STICKER VS MÓVIL
     Overlay absoluto: no ocupa espacio ni desplaza ningún panel. */
  #tech {
    --mobile-vs-size: 81px;
    --mobile-vs-center-x: 50%;
    --mobile-vs-line-top: calc(50% + 16px);
    --mobile-vs-offset-y: -26px;
    --mobile-immersive-gap: 128px;
  }

  /* Se restaura la diagonal y el espaciado originales. */
  .tech-panels::before {
    content: '';
    position: absolute;
    left: -12%;
    top: var(--mobile-vs-line-top);
    width: 124%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 4%, rgba(0, 173, 180, 0.5) 28%, rgba(0, 173, 180, 0.5) 72%, transparent 96%);
    transform: rotate(-14deg);
    pointer-events: none;
    z-index: 1;
  }

  /* Esta capa cubre la composición pero sale totalmente del flujo. */
  .vs-col {
    position: absolute;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto;
    height: 100% !important;
    padding: 0;
    transform: none;
    display: block;
    overflow: visible;
    isolation: isolate;
    pointer-events: none;
    z-index: 20;
  }

  .vs-col::before {
    content: none;
  }

  .tech-panel-wrap.right {
    margin-top: var(--mobile-immersive-gap);
  }

  .vs-circle {
    position: absolute;
    top: var(--mobile-vs-offset-y);
    left: var(--mobile-vs-center-x);
    width: var(--mobile-vs-size);
    height: var(--mobile-vs-size);
    transform: translateX(-50%);
    z-index: 3;
    border-width: calc(var(--mobile-vs-size) * 0.03);
    font-size: calc(var(--mobile-vs-size) * 0.27);
    font-weight: 800;
    color: #fff;
    background: #080a0b;
    box-shadow: 0 0 calc(var(--mobile-vs-size) * 0.34) rgba(0, 191, 196, 0.28);
  }

  #logos .logos-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 8px;
  }

  #logos .logos-label-brand {
    height: 1.05em;
    margin: 0;
  }
}

#logos .logos-label {
  color: #050707;
}
#logos .logos-label-accent {
  color: #fff;
}

@media (max-width: 768px) {
  #logos .logos-label {
    max-width: 380px;
    margin: 0 auto 26px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.015em;
  }
}

/* Desktop card clarity: larger type, stronger contrast and no permanently
   promoted transform layer while the cards are at rest. */
@media (min-width: 1181px) {
  .sol-card {
    will-change: auto;
  }
  .sol-card.is-flipping {
    will-change: transform;
  }
  .sol-card-info {
    min-height: 170px;
    padding: 22px 16px 20px;
  }
  .sol-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
  }
  .sol-card h3 {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.045em;
    color: #0d1719;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  .sol-card p {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    color: #596568;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
}

/* Colombini: SVG vectorial blanco sólido, sin alfa heredado del PNG. */
#logos .logo-client--colombini,
#logos .logo-item:hover .logo-client--colombini {
  height: 58px;
  filter: none;
  opacity: 1;
}

@media (min-width: 1181px) {
  #logos .logo-client--colombini,
  #logos .logo-item:hover .logo-client--colombini {
    height: 92px;
  }
}

/* The custom templates provide their own navigation. Superfly remains enabled
   for the legacy Divi Gallery page only. */
.i3d-custom-page .sfm-rollback,
.i3d-custom-page #sfm-sidebar,
.i3d-custom-page #sfm-overlay-wrapper {
  display: none !important;
}

/* Divi declares heading colors with a higher selector specificity than the
   standalone templates. Reassert the intended light headings on dark panels. */
body.i3d-home .hero-h1,
body.i3d-home .tech-header h2,
body.i3d-home .tech-panel h3,
body.i3d-home .story-content h3,
body.i3d-home .footer-cta-left h2,
body.i3d-tecnologie .th-title {
  color: #fff;
}