/* ============================================================
   AUTONEX · DESIGN TOKENS
   ============================================================ */
:root{
  --paper:        #FAFAF9;
  --paper-2:      #F3F3F1;
  --surface-card: #FFFFFF;
  --ink:          #1C1C1C;
  --ink-2:        #2A2A2C;
  --mute:         #6B6B6E;
  --mute-2:       #9A9A9A;
  --rule:         #E2E1DC;
  --rule-strong:  #CFCEC8;
  --primary:      #196DFF;
  --primary-deep: #0F4FCC;

  --coral:        #FF8755;
  --lilac:        #E282FF;
  --sky:          #4CB4ED;

  --f-display:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:       'Roboto Mono', 'SF Mono', Menlo, monospace;

  --r-md:         8px;
  --r-lg:         10px;
  --r-full:       9999px;

  --shadow-focus: 0 0 0 4px rgba(25,109,255,0.18);

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;

  /* === GLASS · efecto cristal reutilizable === */
  --glass-bg:     rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur:   blur(20px) saturate(150%);

  /* === Mesh suave · azul frío + toque cálido (para fondos detrás de glass) === */
  --mesh-soft:
    radial-gradient(120% 100% at 12% 18%, rgba(76, 180, 237, 0.42) 0%, transparent 60%),
    radial-gradient(95% 80% at 88% 90%, rgba(255, 135, 85, 0.20) 0%, transparent 55%),
    radial-gradient(100% 90% at 50% 105%, rgba(25, 109, 255, 0.22) 0%, transparent 60%),
    linear-gradient(135deg, #EEF4FB 0%, #F3F0EC 100%);
}

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

html, body{
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

/* ============================================================
   HEADER · sticky, paper bg, border bottom rule
   ============================================================ */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform 350ms var(--ease-out);
}
.header.is-hidden{
  transform: translateY(-100%);
}
.header.is-scrolled{
  background: rgba(250, 250, 249, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}
/* Header sobre hero · todo en blanco */
.header:not(.is-scrolled) .brand span{ color: #FFFFFF; }
.header:not(.is-scrolled) .brand img{ filter: brightness(0) invert(1); }
.header:not(.is-scrolled) .nav a{ color: rgba(255, 255, 255, 0.88); }
.header:not(.is-scrolled) .nav a:hover{ color: #FFFFFF; }
.header:not(.is-scrolled) .nav-login{ color: #FFFFFF; }
.header:not(.is-scrolled) .nav-login:hover{ color: rgba(255, 255, 255, 0.82); }
.header-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
/* Nav centrado · brand y acciones con peso igual a cada lado */
.header-inner > .brand{ flex: 1 1 0; }
.header-inner > .header-actions{ flex: 1 1 0; justify-content: flex-end; }
.header-inner > .nav{ flex: 0 0 auto; }
.brand{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand img{ height: 32px; }
.brand span{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav{
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a{
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--mute);
  text-decoration: none;
  letter-spacing: -0.003em;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover{ color: var(--ink); }

/* Botón hamburguesa · solo móvil */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0; margin-left: 4px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span{
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out), background-color .2s var(--ease-out);
}
.header:not(.is-scrolled) .nav-toggle span{ background: #FFFFFF; }
body.menu-open .nav-toggle span,
body.menu-open .header:not(.is-scrolled) .nav-toggle span{ background: var(--mute); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Panel del menú móvil · pantalla completa estilo Sierra */
.mobile-menu{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--paper);
  padding: 104px 28px 40px 28px;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform .35s var(--ease-out);
  z-index: 45;
  overflow-y: auto;
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{
  font-family: var(--f-body); font-size: 14px; font-weight: 400;
  color: var(--mute); text-decoration: none;
  letter-spacing: -0.003em;
  padding: 18px 2px; border-bottom: 1px solid var(--rule);
}
.mobile-menu a:first-child{ border-top: 1px solid var(--rule); }
.mobile-menu a:hover{ color: var(--ink); }
/* Header sólido y visible mientras el menú está abierto */
body.menu-open{ overflow: hidden; }
body.menu-open .header{
  transform: translateY(0);
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.menu-open .header .brand img{ filter: none; }

.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* Primary · arrow swap animation (manual oficial) */
.btn-primary{
  background: var(--primary);
  color: var(--paper);
  border-color: var(--primary);
  overflow: hidden;
}
@media (hover: none){
  .btn-primary:active{
    background: var(--primary-deep);
    border-color: var(--primary-deep);
  }
}
.btn-primary:focus{
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn-primary .lbl,
.btn-primary .arr{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out), opacity 0.22s var(--ease-out);
}
.btn-primary .arr{
  position: absolute;
  inset: 0;
  transform: translateY(115%);
  opacity: 0;
}
.btn-primary .arr svg{
  width: 16px;
  height: 16px;
}
@media (hover: hover){
  .btn-primary:hover .lbl{ transform: translateY(-130%); opacity: 0; }
  .btn-primary:hover .arr{ transform: translateY(0); opacity: 1; }
}

/* Ghost · simple color shift, arrow nudge */
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover{ color: var(--primary); }
.btn-ghost .arrow{
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-ghost:hover .arrow{ transform: translateX(3px); }

/* ============================================================
   HERO · full-bleed Sierra style · imagen de fondo + overlay
   ============================================================ */
.hero{
  position: relative;
  min-height: 720px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("autonex-agentes-voz-ia.jpg");
  background-size: cover;
  background-position: center;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.42) 35%,
      rgba(0,0,0,0.18) 65%,
      rgba(0,0,0,0.05) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,0.25) 100%
    );
}
/* Grain canónico · identidad Autonex sobre la foto */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero-content{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.hero-text{
  max-width: 640px;
}
.hero-headline{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 24px 0;
  text-wrap: balance;
  max-width: 560px;
}
.hero-sub{
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 36px 0;
  max-width: 540px;
}
.hero-ctas{
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-ctas .btn-primary{
  background: #FFFFFF;
  color: var(--ink);
  border-color: #FFFFFF;
}
@media (hover: none){
  .hero-ctas .btn-primary:active{
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
  }
}

/* ============================================================
   HERO VIDEO · floating card bottom-right (estilo Ringr)
   Vimeo autoplay loop muted · al hover muestra el play overlay
   ============================================================ */
.hero-video{
  position: absolute;
  bottom: 116px;
  right: 36px;
  z-index: 5;
  width: 280px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--rule-strong);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.hero-video:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.hero-video iframe{
  /* Cover: iframe en 16:9 (ratio nativo del video) escalado para llenar
     la card 16:10 sin barras negras. El sobrante horizontal lo recorta
     `overflow: hidden` del contenedor `.hero-video`. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 111.12%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-video-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur-base) var(--ease-out);
}
.hero-video:hover .hero-video-play{ background: rgba(0, 0, 0, 0.28); }
.hero-video-play .play-circle{
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.hero-video:hover .play-circle{ opacity: 1; transform: scale(1); }
.play-circle svg{ width: 14px; height: 14px; margin-left: 2px; color: var(--ink); }

/* ============================================================
   VIDEO MODAL · lightbox para reproducir el video con sonido
   ============================================================ */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.video-modal.is-open{ display: flex; }
.video-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 22, 0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
/* Ocultar header mientras el modal del video está abierto · foco total en el video */
body:has(.video-modal.is-open) .header{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.video-modal-content{
  position: relative;
  width: min(92vw, 1100px);
  z-index: 1;
}
.video-modal-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.video-modal-frame iframe{
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
}
.video-modal-close{
  position: fixed;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.video-modal-close:hover{
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}
.video-modal-close svg{ width: 20px; height: 20px; }

/* mesh emphasis · only allowed colored gesture in headline */
.t-emphasis-mesh{
  background-image: linear-gradient(135deg, #FF8755, #E282FF 50%, #4CB4ED 78%, #196DFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   HERO CHAT · mock conversación flotante (estilo Sierra)
   Burbujas semi-transparentes con backdrop-blur · loop 10s
   ============================================================ */
.hero-chat{
  position: absolute;
  bottom: 140px;
  right: clamp(220px, 28vw, 440px);
  z-index: 4;
  width: 320px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.chat-bubble{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  padding: 9px 12px 10px 10px;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
  /* Forzar capa de compositing propia para evitar el "tile-seam" del
     backdrop-filter durante la animación (cristal partido). */
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  max-width: 88%;
}
.chat-bubble.agent{ align-self: flex-end; }
.chat-bubble.user{ align-self: flex-start; }

/* Tool call · acción del agente, pill sutil estilo system notification */
.chat-bubble.tool{
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-full);
  padding: 6px 12px 6px 10px;
  gap: 7px;
  align-items: center;
  max-width: 82%;
}
.chat-bubble.tool .tool-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}
.chat-bubble.tool .tool-icon i{ font-size: 13px; }
.chat-bubble.tool .tool-text{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0;
}

.chat-bubble:nth-child(1){ animation: chatB1 18s infinite ease-out; }
.chat-bubble:nth-child(2){ animation: chatB2 18s infinite ease-out; }
.chat-bubble:nth-child(3){ animation: chatB3 18s infinite ease-out; }
.chat-bubble:nth-child(4){ animation: chatB4 18s infinite ease-out; }
.chat-bubble:nth-child(5){ animation: chatB5 18s infinite ease-out; }
.chat-bubble:nth-child(6){ animation: chatB6 18s infinite ease-out; }

.chat-avatar{
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 9.5px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  line-height: 1;
}
.chat-avatar.agent-avatar{
  background:
    radial-gradient(110% 90% at 18% 26%, #FF8755 0%, transparent 55%),
    radial-gradient(110% 110% at 70% 85%, #E282FF 0%, transparent 55%),
    radial-gradient(95% 95% at 30% 95%, #4CB4ED 0%, transparent 55%),
    radial-gradient(120% 120% at 12% 100%, #196DFF 0%, transparent 60%),
    linear-gradient(135deg, #FF8755, #E282FF 50%, #4CB4ED 78%, #196DFF);
}
.chat-avatar.user-avatar{
  background: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}
.chat-avatar span{ position: relative; z-index: 1; }

.chat-content{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-name{
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.005em;
}
.chat-text{
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
}

/* Keyframes · 6 burbujas escalonadas, loop 18s · simula flujo agente AI
   Usamos translate3d (no translateY) para forzar compositing en GPU y
   evitar artefactos de "cristal partido" con backdrop-filter. */
@keyframes chatB1 {
  0%, 5%    { opacity: 0; transform: translate3d(0, 10px, 0); }
  9%, 83%   { opacity: 1; transform: translate3d(0, 0, 0); }
  89%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
@keyframes chatB2 {
  0%, 14%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  17%, 83%  { opacity: 1; transform: translate3d(0, 0, 0); }
  89%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
@keyframes chatB3 {
  0%, 22%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  26%, 83%  { opacity: 1; transform: translate3d(0, 0, 0); }
  89%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
@keyframes chatB4 {
  0%, 36%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  40%, 83%  { opacity: 1; transform: translate3d(0, 0, 0); }
  89%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
@keyframes chatB5 {
  0%, 48%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  52%, 83%  { opacity: 1; transform: translate3d(0, 0, 0); }
  89%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
@keyframes chatB6 {
  0%, 60%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  64%, 83%  { opacity: 1; transform: translate3d(0, 0, 0); }
  89%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}

/* ============================================================
   TRUST BAR · client logos · infinite loop carousel, centered
   ============================================================ */
.trust{
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 44px 0;
  background: var(--paper);
  overflow: hidden;
  position: relative;
}
.trust::before,
.trust::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.trust::before{
  left: 0;
  background: linear-gradient(90deg, var(--paper), transparent);
}
.trust::after{
  right: 0;
  background: linear-gradient(-90deg, var(--paper), transparent);
}
.logo-track{
  display: flex;
  align-items: center;
  gap: 96px;
  width: max-content;
  animation: scroll 38s linear infinite;
  padding: 0 48px;
}
.logo-track img{
  height: 48px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.logo-track img:hover{
  opacity: 1;
  filter: grayscale(0);
}
@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
/* ============================================================
   HERO TRUST · banda inferior con logos dentro del hero
   Marquee izquierda → derecha, logos en blanco translúcido
   ============================================================ */
.hero-trust{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 24px 0;
  overflow: hidden;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
/* Banda limitada al ancho del container (1280px), centrada.
   El mask-image difumina los logos en los bordes sobre cualquier fondo. */
.hero-trust-mask{
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hero-trust .logo-track{
  animation: scroll 42s linear infinite;
  animation-delay: -21s;
}
.hero-trust .logo-track img{
  filter: brightness(0) invert(1);
  opacity: 0.7;
  height: 64px;
}
/* Altura ajustada por logo · equilibrio óptico (proporciones distintas) */
/* Alturas igualadas por ÁREA óptica (cada logo ocupa ~la misma superficie).
   Calculado con h ∝ proporción^-0.42, acotado a [42,74]px para caber en la banda. */
.hero-trust .logo-track img[alt="Eurofitness"]{ height: 34px; }
.hero-trust .logo-track img[alt="Maisqueauga"]{ height: 25px; }
.hero-trust .logo-track img[alt="The Fitzgerald"]{ height: 31px; }
.hero-trust .logo-track img[alt="Spawellplus"]{ height: 22px; }
.hero-trust .logo-track img[alt="Spa4hotels"]{ height: 46px; }  /* logo apilado: +alto para compensar */
.hero-trust .logo-track img[alt="Prim Ortopedia"]{ height: 31px; }
.hero-trust .logo-track img[alt="Hemomadrid"]{ height: 22px; }
.hero-trust .logo-track img:hover{
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* ============================================================
   SECTORS · 4 cards image-heavy + global metrics row
   ============================================================ */
.sectors{
  padding: 120px 0 0 0;
  position: relative;
}
.sectors > .section-head{
  padding-left: 56px;
  padding-right: 56px;
}
.section-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  margin: 0 auto 72px auto;
  max-width: 760px;
}
.section-head .section-pill + .section-title{ margin-top: 16px; }
.section-head .section-title + .section-sub{ margin-top: -6px; }
.section-eyebrow{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}
/* Section pill · chip con icono + label, sustituye al eyebrow tipográfico */
.section-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(25, 109, 255, 0.16);
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.section-pill i{
  font-size: 15px;
  color: var(--ink);
  line-height: 1;
}
.section-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.section-sub{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 580px;
  margin: 0;
}

/* ============================================================
   SECTORS · carrusel expandible · 320px → 600px on hover
   Réplica del de autonexhub.es con drag horizontal + flechas
   ============================================================ */
.sectors-carousel{
  position: relative;
  max-width: 1280px;
  margin: 8px auto 0 auto;
}
.sectors-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  z-index: 2;
  pointer-events: none;
}
.sectors-fade-left{
  left: 0;
  background: linear-gradient(90deg, var(--paper) 0%, transparent 100%);
}
.sectors-fade-right{
  right: 0;
  background: linear-gradient(-90deg, var(--paper) 0%, transparent 100%);
}
.sectors-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.sectors-arrow:hover{
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.04);
}
.sectors-arrow:focus-visible{
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sectors-arrow[disabled]{
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}
.sectors-arrow-prev{ left: 24px; }
.sectors-arrow-next{ right: 24px; }
.sectors-arrow svg{ width: 18px; height: 18px; }

.sectors-track:focus-visible{
  outline: none;
}

.sectors-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 56px 16px 56px;
  cursor: grab;
}
.sectors-track::-webkit-scrollbar{ display: none; }
.sectors-track.is-pressing{ cursor: grabbing; }
.sectors-track.is-dragging{ cursor: grabbing; user-select: none; }

.sector-slide{
  position: relative;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  width: 460px;
  height: 400px;
  user-select: none;
}
.sector-slide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
  pointer-events: none;
}
.sector-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(28, 28, 28, 0.82) 0%, rgba(28, 28, 28, 0.5) 38%, transparent 78%);
}
.sector-name{
  position: absolute;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}
.sector-content{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 260px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.sector-quote{
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 24px 0;
}
.sector-metric{
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 18px;
}
.sector-metric .num{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}
.sector-metric .label{
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ============================================================
   GLOBAL METRICS · 4 stats row below sectors
   ============================================================ */
.metrics{
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 56px;
}
.metrics-head{
  margin: 0 auto 48px auto;
  max-width: 720px;
  text-align: center;
}
.metrics-head .section-pill + .section-title{ margin-top: 16px; }
.metrics-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* Split · métricas izquierda + mapa derecha (estilo Solución) */
.metrics-split{
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: center;
  margin-top: 8px;
}
.metrics-col{ display: flex; flex-direction: column; }
.metrics-col .metric{
  border-right: 0;
  border-bottom: 1px solid var(--rule);
  padding: 26px 0;
  gap: 10px;
}
.metrics-col .metric:last-child{ border-bottom: 0; }
.map-card{
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(20, 20, 22, 0.04);
  aspect-ratio: 4 / 3.4;
  /* Trama de puntos (igual que el panel del dashboard) */
  background-color: #FAFAF9;
  background-image: radial-gradient(circle at 1px 1px, rgba(100, 130, 180, 0.20) 1px, transparent 0);
  background-size: 22px 22px;
  padding: 22px;
}
/* Mapa flotando dentro del panel (como la card del dashboard) */
.map-card iframe{
  width: 100%;
  height: 100%;
  border: 1px solid rgba(28, 28, 28, 0.06);
  border-radius: 12px;
  display: block;
  box-shadow: 0 12px 32px rgba(28, 28, 40, 0.12),
              0 2px 6px rgba(28, 28, 40, 0.05);
}
.spain-map{ width: 100%; height: auto; display: block; }
.map-dots circle{
  fill: #1ED760;
  filter: drop-shadow(0 0 5px rgba(30, 215, 96, 0.55));
}
.map-chip{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(20, 20, 22, 0.08);
  white-space: nowrap;
}
.map-chip i{
  width: 8px; height: 8px; border-radius: 50%;
  background: #1ED760; display: inline-block; flex-shrink: 0;
}
.map-chip--ne{ top: 16%; right: 6%; }
.map-chip--centro{ top: 38%; left: 18%; }
.map-chip--can{ top: 72%; left: 3%; }
.metric{
  padding: 36px 32px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.metric:last-child{ border-right: 0; }
.metric-eyebrow{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}
.metric-num{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.metric-desc{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0;
}

/* ============================================================
   BENEFITS · "floating card" layer Sierra-style
   Bordes inferiores redondeados + shadow azulada multicapa que
   levanta visualmente la capa blanca sobre la sección azul de abajo.
   ============================================================ */
.benefits{
  position: relative;
  z-index: 10;
  background: var(--paper);
  padding: 80px 0 96px 0;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  /* shadow sutil · azul claro para no oscurecer la franja azul de abajo */
  box-shadow:
    0 12px 20px 0 rgba(100, 130, 180, 0.06),
    0 32px 40px 0 rgba(100, 130, 180, 0.05),
    0 80px 80px 0 rgba(100, 130, 180, 0.03);
}
.benefits > .section-head,
.benefits > .benefits-row{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 56px;
  padding-right: 56px;
}
@media (min-width: 1280px){
  .benefits{
    border-bottom-left-radius: 64px;
    border-bottom-right-radius: 64px;
  }
}

/* ============================================================
   SOLUCIÓN · capa azul que vive DETRÁS de Benefits
   margin-top negativo: la sección se desliza bajo los bordes
   redondeados de Benefits, creando overlap. La capa azul ya está
   ahí desde el inicio y se revela conforme Benefits sube.
   ============================================================ */
.solution{
  position: relative;
  z-index: 1;
  margin-top: -96px;        /* desliza UNDER benefits */
  padding: 240px 0 120px 0; /* top padding más generoso · espacio Sierra-style */
  isolation: isolate;
}
.solution-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Banda azul · franja corta justo bajo la curva de Benefits · se desvanece rápido a paper */
.solution-bg-sticky{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  /* azul claro con cuerpo · mismo tono que el acento sky de Capacidad 1 */
  background: linear-gradient(
    180deg,
    #DDEAF5 0%,
    #ECF3F9 45%,
    var(--paper) 100%
  );
}
.solution-bg-dots{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280px;
  background-image: radial-gradient(circle at 1px 1px, rgba(100, 130, 180, 0.10) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 25%, transparent 80%);
  mask-image: linear-gradient(180deg, black 0%, black 25%, transparent 80%);
}
.solution > .section-head,
.solution > .solution-row,
.solution > .scroll-reveal-container,
.solution > .solution-dashboard{
  position: relative;
  z-index: 2;
}

/* ============================================================
   SOLUTION DASHBOARD MOCK · réplica fiel del patrón Sierra/Poly
   Sidebar + question header + summary + 2 grandes cards (chart + topics) + ask input
   ============================================================ */
/* ============================================================
   DASHBOARD MOCK · estilo SKELETON / WIREFRAME Sierra-Poly
   Tono muy sutil: texto en grises, bordes apenas perceptibles,
   sin shadows fuertes · solo los charts conservan color (verde)
   ============================================================ */
.solution-dashboard{
  position: relative;
  max-width: 1200px;
  margin: 24px auto 64px auto;
  padding: 0 56px;
  isolation: isolate;
}
/* Dots textura · full-bleed (ocupa todo el ancho del viewport · todo el bloque) */
.solution-dashboard::before{
  content: "";
  position: absolute;
  top: -32px;
  bottom: -64px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: radial-gradient(circle at 1px 1px, rgba(100, 130, 180, 0.20) 1px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: -2;
}
/* Fade-out inferior del dashboard · se desvanece sin cerrar el panel (estilo Sierra) */
.dashboard-card{
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
}
/* El sidebar también necesita el mismo fade para coherencia */
.dashboard-sidebar{
  border-bottom: 0;
}

/* Tokens locales del skeleton · centralizan los grises del wireframe */
.solution-dashboard{
  --sk-text:        #4B4B4F;   /* texto principal · gris oscuro legible */
  --sk-text-soft:   #8A8A8E;   /* texto secundario · gris medio */
  --sk-border:      rgba(28, 28, 28, 0.07);
  --sk-border-soft: rgba(28, 28, 28, 0.05);
  --sk-bg:          #FCFCFC;
  --sk-bg-active:   #FFFFFF;
}

.dashboard-card{
  display: grid;
  grid-template-columns: 230px 1fr;
  /* Fondo neutro claro · sin mesh de color para que el panel se vea limpio y definido */
  background: linear-gradient(135deg, #EEF3FB 0%, #E4ECF6 100%);
  border: 1px solid var(--sk-border);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  /* Elevación · el panel se despega de la página y resalta */
  box-shadow:
    0 30px 60px -22px rgba(24, 30, 48, 0.30),
    0 12px 28px -10px rgba(24, 30, 48, 0.14),
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset;
}

/* === Sidebar (cristal igual que Cap 1 y 2 · voice-card / logo-card) === */
.dashboard-sidebar{
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, 0.85);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dashboard-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 22px 10px;
}
.dashboard-brand img{
  height: 18px;
  width: auto;
  opacity: 0.55;
}
.dashboard-brand span{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--sk-text);
  letter-spacing: -0.012em;
}
.dashboard-nav-header{
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--sk-text-soft);
  padding: 16px 10px 8px 10px;
  margin: 0;
}
.dashboard-nav-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--sk-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.dashboard-nav-item i{
  font-size: 16px;
  color: var(--sk-text);
  flex-shrink: 0;
}
.dashboard-nav-item:hover{
  background: rgba(28, 28, 28, 0.03);
}
.dashboard-nav-item.is-active{
  background: var(--sk-bg-active);
  border: 1px solid var(--sk-border);
  color: var(--sk-text);
  padding: 6px 9px;
}
.dashboard-nav-item.is-active i{ color: var(--sk-text); }

/* === Main panel (cristal igual que Cap 1 y 2 · voice-card / logo-card) === */
.dashboard-main{
  padding: 22px 28px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
/* Stats row · 5 KPIs editoriales grandes con delta verde · cada uno bloque blanco */
.dashboard-stats{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 4px 0 4px 0;
}
.stat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04),
              0 4px 12px rgba(28, 28, 28, 0.05);
}
.stat-label{
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--sk-text-soft);
  margin: 0 0 6px 0;
  letter-spacing: -0.003em;
  /* Empuja valor y delta al fondo · todos los números quedan alineados aunque el label ocupe 2 líneas */
  flex: 1;
}
.stat-value{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 8px 0;
}
.stat-value small{
  font-size: 19px;
  color: var(--sk-text-soft);
  font-weight: 500;
  margin-left: 2px;
}
.stat-delta{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--sk-text-soft);
  margin: 0;
}
.stat-delta i{ font-size: 13px; color: #4DAF6E; }
.stat-delta .delta-pct{ color: #4DAF6E; font-weight: 500; }

/* Block · single card (el chart "Uso por horas") */
.dashboard-block{
  padding: 18px 20px 20px 20px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04),
              0 4px 12px rgba(28, 28, 28, 0.05);
}
.block-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.block-title{
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--sk-text);
  margin: 0;
  letter-spacing: -0.003em;
}
.block-filter{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--sk-text-soft);
  font-family: var(--f-body);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.block-filter i{ font-size: 12px; }

/* LEFT · Big number + chart (skeleton tones) */
.block-big-number{
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.big-number{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 38px;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.big-delta{
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
}
.big-delta.up{ color: #4DAF6E; }   /* verde más sereno que #1AAA50 */
.big-delta.down{ color: var(--sk-text-soft); }
.block-chart{
  width: 100%;
  height: 130px;
}
.block-chart .grid{
  stroke: var(--sk-border-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

/* RIGHT · Top topics table · rows con border super sutil */
.topics-table{
  width: 100%;
  border-collapse: collapse;
}
.topics-table tr{
  border-bottom: 1px solid var(--sk-border-soft);
}
.topics-table tr:last-child{ border-bottom: 0; }
.topics-table td{
  padding: 10px 0;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--sk-text);
  vertical-align: middle;
}
.topic-name{ flex: 1; }
.topic-value{
  font-weight: 500;
  text-align: right;
  padding-right: 14px !important;
}
.topic-value.up{ color: #4DAF6E; }
.topic-value.down{ color: var(--sk-text-soft); }
.topic-delta{
  font-size: 12px;
  text-align: right;
  padding-right: 14px !important;
  width: 60px;
}
.topic-delta.up{ color: #4DAF6E; }
.topic-delta.down{ color: var(--sk-text-soft); }
.topic-spark{ width: 64px; }
.topic-spark svg{
  width: 60px;
  height: 18px;
  display: block;
}

/* Ask input footer (skeleton) */
.dashboard-input{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  background: var(--sk-bg-active);
}
.dashboard-input input{
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--sk-text);
}
.dashboard-input input::placeholder{ color: var(--sk-text-soft); }
.input-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-pill,
.input-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--sk-border);
  background: var(--sk-bg-active);
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--sk-text-soft);
  cursor: pointer;
}
.input-icon{ width: 30px; padding: 0; }
.input-icon i,
.input-pill i{ font-size: 13px; }
.input-ask{
  height: 30px;
  padding: 0 16px;
  border: 0;
  background: var(--primary);
  color: #FFFFFF;
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 960px){
  /* Dashboard · se muestra pequeño pero ENTERO (estilo Sierra) · ancho fijo de escritorio escalado */
  .solution-dashboard{ padding: 0 12px; margin: 8px auto 28px auto; overflow: hidden; }
  .dashboard-card{ grid-template-columns: 230px 1fr; width: 1180px; zoom: 0.28; margin: 0 auto; }
  .input-actions{ flex-wrap: wrap; }
}
.benefits-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.benefits-row + .benefits-row{ margin-top: 20px; }

.benefit-card{
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.benefit-card:hover{ border-color: var(--rule-strong); }

.benefit-icon{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 24px;
  margin-bottom: 4px;
}
.benefit-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.benefit-desc{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
}

/* Top row cards · with mock · taller */
.benefit-card.with-mock{
  padding: 0;
  overflow: hidden;
}
.benefit-mock{
  background: #F2FAFD;
  border-bottom: 1px solid var(--rule);
  padding: 24px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Las 3 cards de beneficios · misma foto de fondo, encajada a cover */
.benefit-mock:has(.mock-chat),
.benefit-mock:has(.mock-sequence),
.benefit-mock:has(.mock-chart){
  background: url("fondo-beneficios.png") center / cover no-repeat;
}
.benefit-body{
  padding: 24px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   MOCK 1 · Chat (Reduce pérdida de oportunidades) · glass bubbles
   ============================================================ */
.mock-chat{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.mock-chat .msg{
  display: flex;
  gap: 8px;
  max-width: 88%;
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.45;
}
.mock-chat .msg.agent{ align-self: flex-start; }
.mock-chat .msg.user{ align-self: flex-end; flex-direction: row-reverse; }
/* Avatar Marta AI · mesh canónico (uso autorizado: "orbes/avatares circulares") */
.mock-chat .avatar{
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background:
    radial-gradient(110% 90% at 18% 26%,  #FF8755 0%, transparent 55%),
    radial-gradient(110% 110% at 70% 85%, #E282FF 0%, transparent 55%),
    radial-gradient(95% 95% at 30% 95%,   #4CB4ED 0%, transparent 55%),
    radial-gradient(120% 120% at 12% 100%,#196DFF 0%, transparent 60%),
    linear-gradient(135deg, #FF8755, #E282FF 50%, #4CB4ED 78%, #196DFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  color: #FFFFFF;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Grano canónico sobre el avatar · "Sin grano no es Autonex" */
.mock-chat .avatar::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
}
.mock-chat .avatar span{ position: relative; z-index: 1; line-height: 1; }
.mock-chat .bubble{
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid rgba(86, 130, 205, 0.12);
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04),
              0 2px 8px rgba(86, 130, 205, 0.06);
}
/* Marta AI · tinte azul sutil para diferenciarla */
.mock-chat .msg.agent .bubble{
  background: #FFFFFF;
  border-color: rgba(86, 130, 205, 0.20);
}
/* Cliente · blanco neutral */
.mock-chat .msg.user .bubble{
  background: #FFFFFF;
  border-color: rgba(28, 28, 28, 0.08);
}
.mock-chat .msg-name{
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--mute);
  margin-bottom: 2px;
}

/* ============================================================
   MOCK 2 · Sequence (Seguimiento proactivo) · Sierra-style
   ============================================================ */
.mock-sequence{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 16px;
}
.mock-sequence::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 16px;
  width: 0;
  border-left: 1px dashed var(--rule-strong);
}
.mock-sequence .seq-item{
  position: relative;
}
.mock-sequence .seq-item::before{
  content: "";
  position: absolute;
  left: -16px;
  top: 14px;
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  background: var(--surface-card);
  border: 2px solid #5683CD;
}
.mock-sequence .seq-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin-bottom: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: var(--r-full);
  padding: 4px 10px 4px 8px;
  width: fit-content;
}
.mock-sequence .seq-tag i{ font-size: 13px; color: var(--ink); }
.mock-sequence .seq-tag .channel-wa{ color: #25D366; }
.mock-sequence .seq-tag .channel-name{ font-weight: 600; color: var(--ink); }
.mock-sequence .seq-bubble{
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.08);
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04),
              0 2px 8px rgba(86, 130, 205, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}

/* ============================================================
   MOCK 3 · Chart (Datos enriquecidos) · bar chart + overlay glass
   ============================================================ */
.mock-chart{
  position: relative;
  width: 100%;
  height: 100%;
}
/* Background card · bar chart abajo-izquierda */
.mock-chart .chart-bg{
  position: absolute;
  left: 0; bottom: 0;
  width: 72%;
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mock-chart .chart-eyebrow{
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mute);
  text-transform: uppercase;
  margin: 0;
}
.mock-chart .chart-bars{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
}
.mock-chart .bar{
  flex: 1;
  background: rgba(86, 130, 205, 0.22);
  border-radius: 3px 3px 0 0;
  position: relative;
}
.mock-chart .bar::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: #5682CD;
  border-radius: 3px 3px 0 0;
}
/* Overlay card · cristal real encima del bar chart */
.mock-chart .chart-overlay{
  position: absolute;
  right: 0; top: 0;
  width: 62%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 14px 16px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 10px 24px rgba(28, 28, 28, 0.08);
  z-index: 2;
}
.mock-chart .overlay-eyebrow{
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--mute);
  margin: 0;
}
.mock-chart .overlay-num{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--mute);
  letter-spacing: -0.03em;
  margin: 0;
}
.mock-chart .chart-area{
  width: 100%;
  height: 48px;
  display: block;
  margin-top: 2px;
}
.mock-chart .chart-area .grid{
  stroke: rgba(28, 28, 28, 0.07);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* ============================================================
   SOLUTION · zigzag · 3 categorías · texto + visual con mesh
   (estilos base ya definidos en bloque superior · esto solo wrap)
   ============================================================ */
.solution > .section-head,
.solution > .solution-row{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 56px;
  padding-right: 56px;
}
.solution > .section-head{ margin-bottom: 32px; }
.solution-row{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
  padding: 56px 0;
}
.solution-row:first-of-type{ padding-top: 24px; }
.solution-row + .solution-row{
  border-top: 1px solid var(--rule);
}
.solution-row.reverse .solution-text{ order: 2; }
.solution-row.reverse .solution-visual{ order: 1; }

/* TEXT side */
.cat-eyebrow{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 18px 0;
}
.cat-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px 0;
  text-wrap: balance;
  max-width: 480px;
}
.cat-sub{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0 0 32px 0;
  max-width: 460px;
}
.sub-features{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
}
.sub-feat{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
}
.sub-feat i{
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  margin-top: 1px;
}
.sub-feat-content h4{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px 0;
}
.sub-feat-content p{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0;
}

/* VISUAL side · mesh wrapper + white inner card · asymmetric framing
   Card anclada top-left, mesh respira por right + bottom (estilo Ringr/OpenAI) */
.solution-visual{
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  overflow: hidden;
  padding: 32px 72px 72px 32px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 380px;
}
/* Aurora mesh · radial-gradients distorsionados con SVG turbulence
   Cintas curvas tipo OpenAI/Apple/Stripe, sobre la receta del Gradient Book */
.solution-visual::before{
  content: "";
  position: absolute;
  inset: -8%;   /* overflow para que el displacement no recorte por los bordes */
  z-index: -2;
  background: var(--mesh-bg);
  filter: url(#aurora-warp) saturate(1.05);
}
.solution-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.10;
  pointer-events: none;
}

/* === Trío unificado · base azul claro + acento por capacidad ===
   Misma base #EEF3FB → #E4ECF6 (tint del primary diluido)
   El acento define la personalidad de cada capacidad */

/* Capacidad 1 · Voces · LILAC dominante + relleno azul sutil */
.solution-visual[data-mesh="warm"]{
  --mesh-bg:
    radial-gradient(85% 70% at 82% 18%, rgba(226, 130, 255, 0.58) 0%, transparent 65%),
    radial-gradient(65% 55% at 18% 90%, rgba(226, 130, 255, 0.32) 0%, transparent 70%),
    radial-gradient(60% 50% at 12% 18%, rgba(76, 180, 237, 0.30) 0%, transparent 70%),
    radial-gradient(70% 60% at 90% 92%, rgba(25, 109, 255, 0.20) 0%, transparent 70%),
    linear-gradient(135deg, #EEF3FB 0%, #E4ECF6 100%);
}

/* Capacidad 2 · Integraciones · LILA + CORAL cálido + relleno azul */
.solution-visual[data-mesh="balanced"]{
  --mesh-bg:
    radial-gradient(105% 90% at 18% 18%, rgba(226, 130, 255, 0.55) 0%, transparent 78%),
    radial-gradient(95% 82% at 88% 88%, rgba(255, 135, 85, 0.40) 0%, transparent 78%),
    radial-gradient(85% 75% at 90% 14%, rgba(76, 180, 237, 0.32) 0%, transparent 80%),
    radial-gradient(80% 70% at 12% 92%, rgba(25, 109, 255, 0.24) 0%, transparent 80%),
    radial-gradient(60% 55% at 50% 50%, rgba(226, 130, 255, 0.16) 0%, transparent 75%),
    linear-gradient(135deg, #EEF3FB 0%, #E4ECF6 100%);
}

/* Capacidad 3 · Datos · CORAL + LILA cálido + relleno azul */
.solution-visual[data-mesh="cool"]{
  --mesh-bg:
    radial-gradient(105% 90% at 82% 22%, rgba(255, 135, 85, 0.50) 0%, transparent 78%),
    radial-gradient(100% 85% at 18% 88%, rgba(226, 130, 255, 0.52) 0%, transparent 78%),
    radial-gradient(85% 75% at 14% 18%, rgba(76, 180, 237, 0.30) 0%, transparent 80%),
    radial-gradient(85% 75% at 88% 90%, rgba(25, 109, 255, 0.26) 0%, transparent 80%),
    radial-gradient(60% 55% at 50% 50%, rgba(255, 135, 85, 0.14) 0%, transparent 75%),
    linear-gradient(135deg, #EEF3FB 0%, #E4ECF6 100%);
}
/* Capacidad 3 · Datos · fondo con foto (override del mesh) */
.solution-visual[data-mesh="cool"]::before{
  background: url("fondo-capacidad-datos.png") center / cover no-repeat;
  filter: none;            /* foto nítida, sin warp */
}
.solution-visual[data-mesh="cool"]::after{
  opacity: 0;              /* sin grano sobre la foto */
}
/* Capacidad 1 · Voces · fondo con foto (override del mesh) */
.solution-visual[data-mesh="warm"]::before{
  background: url("fondo-capacidad-conversacion.png") center / cover no-repeat;
  filter: none;            /* foto nítida, sin warp */
}
.solution-visual[data-mesh="warm"]::after{
  opacity: 0;              /* sin grano sobre la foto */
}
/* Capacidad 2 · fondo con foto (override del mesh) */
.solution-visual[data-mesh="balanced"]::before{
  background: url("fondo-capacidad-integracion.png") center / cover no-repeat;
  filter: none;            /* foto nítida, sin warp */
}
.solution-visual[data-mesh="balanced"]::after{
  opacity: 0;              /* sin grano sobre la foto */
}

.cat-mock{
  background: var(--surface-card);
  border-radius: 14px;
  padding: 24px;
  width: 88%;
  max-width: 380px;
  box-shadow: 0 12px 32px rgba(28, 28, 28, 0.10),
              0 2px 6px rgba(28, 28, 28, 0.04);
}
/* Mocks que flotan directamente sobre el mesh (sin cat-mock contenedor) */
.solution-visual:has(.mock-logos-grid){
  padding: 32px;
  align-items: center;
  justify-content: center;
}
/* Mock voces · ocupa todo el ancho del visual (sin padding lateral) */
.solution-visual:has(.mock-voices){
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   MOCK · Voces multilingües (row 1) · 2 filas scroll opuesto
   Cards flotando sobre el mesh, sin cat-mock contenedor
   ============================================================ */
.mock-voices{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  position: relative;
  padding: 24px 0;
}
.voice-track{
  display: flex;
  gap: 12px;
  width: max-content;
}
.voice-track--ltr{ animation: voices-scroll-left  34s linear infinite; }
.voice-track--rtl{ animation: voices-scroll-right 36s linear infinite; }
.voice-track:hover{ animation-play-state: paused; }
.mock-voices.audio-playing .voice-track{ animation-play-state: paused; }
@keyframes voices-scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes voices-scroll-right{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

.voice-card{
  width: 240px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-head{
  display: flex;
  align-items: center;
  gap: 8px;
}
.voice-flag{
  font-size: 18px;
  line-height: 1;
}
.voice-lang{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
}
.voice-play{
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.voice-play:hover{ background: var(--primary); }
.voice-play svg{ width: 10px; height: 10px; }
.voice-play .ico-play{ margin-left: 1px; }
.voice-play .ico-pause{ display: none; }
.voice-play.is-playing{ background: var(--primary); }
.voice-play.is-playing .ico-play{ display: none; }
.voice-play.is-playing .ico-pause{ display: block; margin-left: 0; }
.voice-text{
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--mute);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   MOCK · Logos grid (row 2) · 6 cards flotando sobre el mesh
   Sin cat-mock contenedor · grid 3×2 centrado
   ============================================================ */
.mock-logos-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 480px;
}
.logo-card{
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: 12px;
  padding: 16px;
  aspect-ratio: 1.6 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logo-card img{
  object-fit: contain;
  display: block;
}
/* Tamaños individuales por logo · cada SVG tiene aspect ratio distinto
   Ajustados para que todos se vean igual de prominentes */
.logo-card img[alt="HubSpot"]{          max-width: 78%; max-height: 36%; }
.logo-card img[alt="Salesforce"]{       max-width: 60%; max-height: 70%; }
.logo-card img[alt="Siana"]{            max-width: 72%; max-height: 60%; }
.logo-card img[alt="Microsoft"]{        max-width: 78%; max-height: 38%; }
.logo-card img[alt="Google Workspace"]{ max-width: 100%; max-height: 100%; transform: scale(1.7); }
.logo-card img[alt="Zendesk"]{          max-width: 66%; max-height: 60%; }

/* ============================================================
   BLEED mode · card más grande que el wrapper, recortada por overflow
   Aplicado solo al row 3 (Datos). Estilo Ringr/Poly.ai
   ============================================================ */
.solution-visual.bleed{
  overflow: hidden;
  padding: 0;
  display: block;
  min-height: 460px;
}
.solution-visual.bleed .cat-mock{
  position: absolute;
  top: 36px;
  left: 36px;
  width: 540px;
  max-width: none;
  padding: 28px 28px 36px 28px;
}

/* ============================================================
   MOCK · Metrics dashboard (row 3) · KPIs + line chart Poly-style
   ============================================================ */
.mock-metrics{
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}
/* Wrapper blanco SOLO dentro de Funcionalidades (sobre stage azul claro) */
.benefit-mock .mock-metrics{
  gap: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.08);
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04),
              0 2px 12px rgba(86, 130, 205, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
}
.mock-metrics .kpi-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.mock-metrics .kpi-label{
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--mute);
  margin: 0 0 6px 0;
  letter-spacing: -0.003em;
}
.mock-metrics .kpi-num{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0 0 6px 0;
}
.mock-metrics .kpi-num small{
  font-size: 14px;
  color: var(--mute);
  font-weight: 400;
  margin-left: 2px;
}
.mock-metrics .kpi-trend{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--mute);
  margin: 0;
  letter-spacing: -0.003em;
}
.mock-metrics .kpi-trend .arrow-up{
  color: #1AAA50;
  font-weight: 600;
}
.mock-metrics .kpi-trend .delta{
  color: #1AAA50;
  font-weight: 600;
}
.mock-metrics .chart-block .chart-title{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 14px 0;
  letter-spacing: -0.005em;
}
.mock-metrics .chart-svg{
  width: 100%;
  height: 160px;
  display: block;
}
.mock-metrics .chart-svg .axis-label{
  font-family: var(--f-body);
  font-size: 9.5px;
  fill: var(--mute);
}
.mock-metrics .chart-svg .grid-line{
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 0;
}

/* ============================================================
   IMPLEMENTATION · estilo Stripe Atlas
   4 columnas con número en círculo + título + texto · dividers verticales
   ============================================================ */
/* ============================================================
   SEGURIDAD · "caja fuerte" · contenedor exterior gris
   Cabecera alineada a la izquierda + 4 cards en una fila
   ============================================================ */
.security{
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 56px 120px 56px;
}
.security-vault{
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 88px 64px 80px 64px;
  text-align: center;
}
/* Dots en las 4 esquinas del vault · mismo estilo que las cards, más grandes */
.vault-nail{
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--rule-strong);
}
.vault-nail-tl{ top: 18px; left: 18px; }
.vault-nail-tr{ top: 18px; right: 18px; }
.vault-nail-bl{ bottom: 18px; left: 18px; }
.vault-nail-br{ bottom: 18px; right: 18px; }
.security-vault .section-pill + .security-title{ margin-top: 16px; }
.security-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 64px 0;
  text-wrap: balance;
}

.security-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.security-card{
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 36px 26px 32px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04);
}
/* Corner dots · 4 puntos en cada esquina (sello visual) */
.security-card::before,
.security-card::after,
.security-card .dot-tl,
.security-card .dot-br{
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--rule-strong);
}
.security-card::before{ top: 10px; left: 10px; }       /* esquina superior izquierda */
.security-card::after{ top: 10px; right: 10px; }        /* esquina superior derecha */
.security-card .dot-tl{ bottom: 10px; left: 10px; }     /* esquina inferior izquierda */
.security-card .dot-br{ bottom: 10px; right: 10px; }    /* esquina inferior derecha */

.security-icon{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin-bottom: 2px;
}
.security-icon i{ font-size: 30px; }

.security-card-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.security-card-desc{
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0;
}

/* Stagger reveal */
.security-grid .security-card:nth-child(1).reveal{ transition-delay: 0ms; }
.security-grid .security-card:nth-child(2).reveal{ transition-delay: 120ms; }
.security-grid .security-card:nth-child(3).reveal{ transition-delay: 240ms; }
.security-grid .security-card:nth-child(4).reveal{ transition-delay: 360ms; }

/* ============================================================
   CALCULADORA ROI · bloque único negro de marca (estilo Enginy)
   ============================================================ */
.roi{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px 120px 56px;
}
.roi-head{ text-align: center; max-width: 720px; margin: 0 auto 56px auto; }
.roi-head .section-pill + .section-title{ margin-top: 16px; }
.roi-head .section-sub{ margin: 18px auto 0; }

/* Panel transparente · solo contiene las dos tarjetas */
.roi-board{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* Tarjeta blanca · una por calculadora (receta .stat del dashboard) */
.roi-card{
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  background: #fff;
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04),
              0 8px 24px rgba(28, 28, 28, 0.06);
}

.roi-panel-head{ margin-bottom: 24px; }
.roi-panel-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px 0;
}
.roi-panel-desc{
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0;
}

.roi-fields{
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
}
.roi-field-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.roi-field-top label{
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--mute);
}
.roi-field-top output{
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* Slider · barra gruesa estilo Enginy · relleno azul + muesca blanca (--fill lo fija el JS) */
.roi-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(to right,
    var(--primary) 0%, var(--primary) var(--fill, 0%),
    rgba(28, 28, 28, 0.12) var(--fill, 0%), rgba(28, 28, 28, 0.12) 100%);
  outline: none;
  cursor: pointer;
}
.roi-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #fff;
  border: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.roi-range:focus-visible{ box-shadow: var(--shadow-focus); }
.roi-range::-moz-range-thumb{
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #fff;
  border: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.roi-range::-moz-range-track{
  height: 16px;
  border-radius: 6px;
  background: transparent;
}

/* Resultados dentro de cada tarjeta · 2 celdas */
.roi-card-results{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}
.roi-result{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  text-align: center;
}
.roi-card-results .roi-result + .roi-result{ border-left: 1px solid rgba(28, 28, 28, 0.08); }
.roi-result-num{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.roi-result.is-primary .roi-result-num{ color: var(--primary); }
.roi-result-label{
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mute);
}

/* ============================================================
   CTA FINAL · texto + formulario lado a lado (sin mesh)
   ============================================================ */
.cta-cierre{
  position: relative;
  background: var(--paper-2);
  background-image: url('fondo-cta.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 56px 140px 56px;
}
/* Texto en blanco sobre el fondo pastel · sombra sutil para resaltar */
.cta-cierre .cta-eyebrow{
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 8px rgba(40, 50, 90, 0.18);
}
.cta-cierre .cta-title{
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(40, 50, 90, 0.22);
}
.cta-cierre .cta-sub{
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 10px rgba(40, 50, 90, 0.2);
}
.cta-inner{
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 72px;
  align-items: center;
}
.cta-text{ text-align: left; }
.cta-eyebrow{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 20px 0;
}
.cta-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 20px 0;
  text-wrap: balance;
}
.cta-sub{
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  max-width: 480px;
  text-wrap: balance;
}

/* Form card · efecto cristal (como las cards de Capacidad 1/2) */
.cta-form{
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 48px 48px 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 40px rgba(20, 20, 40, 0.12);
}
.cta-form .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cta-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cta-form label{
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.cta-required{ color: var(--primary); margin-left: 2px; }
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="tel"]{
  font-family: var(--f-body);
  font-size: 15px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 28, 28, 0.14);
  border-radius: 10px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.cta-form input::placeholder{ color: var(--mute-2); }
.cta-form input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 109, 255, 0.12);
}
.cta-form .check{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
  cursor: pointer;
}
.cta-form .check input[type="checkbox"]{
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.cta-form .check a{ color: var(--ink); text-decoration: underline; }
.cta-form .btn-primary{
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
  font-size: 15px;
  margin-top: 4px;
}

/* ============================================================
   FOOTER · editorial sobrio · réplica autonexhub.es
   ============================================================ */
/* ============================================================
   FOOTER · claro (mismo color que el fondo) + wordmark gigante
   ============================================================ */
.site-wrap{ position: relative; }
.site-footer{
  position: relative;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 72px 56px 28px 56px;
}
.site-footer .footer-inner{ max-width: 1280px; margin: 0 auto; width: 100%; }
/* Logotipo gigante · logo real (isotipo + wordmark), translúcido y centrado */
.site-footer .footer-wordmark{
  margin-top: 24px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.site-footer .footer-wordmark img{
  width: min(1220px, 94%);
  height: auto;
  display: block;
  opacity: 0.16;
  user-select: none;
}

@media (max-width: 860px){
  .site-footer{ padding: 56px 24px 40px 24px; }
  .site-footer .footer-cols{ grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 36px; }
  .site-footer .footer-wordmark{ margin-top: 36px; }
  .site-footer .footer-wordmark img{ width: 92%; }
}

.footer-main{
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 72px 56px 40px 56px;
}
.footer-inner{
  max-width: 1280px;
  margin: 0 auto;
}
.footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.footer-logo{ height: 32px; width: auto; display: block; }
.footer-gdpr{
  width: 56px;
  height: 56px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-gdpr svg{ width: 100%; height: 100%; }
.footer-divider{
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 48px 0;
}
.footer-cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 48px;
  margin-bottom: 56px;
  align-items: start;
}
.footer-col h4{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 18px 0;
  letter-spacing: -0.012em;
}
.footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col li{ margin: 0; }
.footer-col a,
.footer-col span{
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.footer-col a:hover{ color: var(--ink); }
.footer-social a{
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  transition: color 0.2s var(--ease-out);
}
.footer-social a:hover{ color: var(--ink); }
.footer-social svg{ width: 22px; height: 22px; }
.footer-bottom{
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.footer-copyright{
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--mute);
  text-align: center;
  margin: 0;
}

/* ============================================================
   Animations kept for SOLUTION section (orbit, grid, clock)
   ============================================================ */

/* ===== Animation 1 · 24/7 clock + online dot ===== */
.anim-clock{
  position: relative;
  width: 140px;
  height: 140px;
}
.anim-clock .face{
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: var(--surface-card);
  border: 1px solid var(--rule);
}
.anim-clock .hand{
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  background: var(--ink);
  border-radius: 4px;
}
.anim-clock .hand.h{ width: 4px; height: 36px; margin-left: -2px; animation: rotate 12s linear infinite; }
.anim-clock .hand.m{ width: 3px; height: 50px; margin-left: -1.5px; animation: rotate 6s linear infinite; }
.anim-clock .hand.s{ width: 2px; height: 56px; margin-left: -1px; background: var(--primary); animation: rotate 2s linear infinite; }
.anim-clock .center{
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: var(--r-full);
  transform: translate(-50%, -50%);
}
.anim-clock .label{
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.anim-clock .label .dot{
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #1ED760;
  box-shadow: 0 0 0 0 rgba(30, 215, 96, 0.5);
  animation: pulse 2s infinite;
}
@keyframes rotate{ to{ transform: rotate(360deg); } }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(30, 215, 96, 0.6); }
  70%{ box-shadow: 0 0 0 10px rgba(30, 215, 96, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(30, 215, 96, 0); }
}

/* ===== Animation 2 · Multichannel orbit (chips fixed, pings radial) ===== */
.anim-orbit{
  position: relative;
  width: 220px;
  height: 220px;
}
.anim-orbit .center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--surface-card);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.anim-orbit .center i{ font-size: 24px; color: var(--ink); }
.anim-orbit .ring{
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(28, 28, 28, 0.18);
  border-radius: var(--r-full);
}
.anim-orbit .chip{
  position: absolute;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--surface-card);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.anim-orbit .chip i{ font-size: 18px; color: var(--ink); }
/* 4 chips en posiciones cardinales (top, right, bottom, left) */
.anim-orbit .ring .chip:nth-child(1){ top: -20px; left: 50%; margin-left: -20px; }
.anim-orbit .ring .chip:nth-child(2){ top: 50%; left: 100%; margin: -20px 0 0 -20px; }
.anim-orbit .ring .chip:nth-child(3){ top: 100%; left: 50%; margin: -20px 0 0 -20px; }
.anim-orbit .ring .chip:nth-child(4){ top: 50%; left: 0; margin: -20px 0 0 -20px; }
/* Pulse pings from center */
.anim-orbit .ping{
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin-top: -26px; margin-left: -26px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--primary);
  opacity: 0;
  animation: ping 3s var(--ease-out) infinite;
  z-index: 1;
}
.anim-orbit .ping:nth-child(2){ animation-delay: 1s; }
.anim-orbit .ping:nth-child(3){ animation-delay: 2s; }
@keyframes ping{
  0%{ opacity: 0.7; transform: scale(0.6); }
  100%{ opacity: 0; transform: scale(3.6); }
}

/* ===== Animation 3 · Integrations grid with rotating highlight ===== */
.anim-grid{
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 8px;
}
.anim-grid .cell{
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ink);
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.anim-grid .cell.active{
  border-color: var(--primary);
  transform: scale(1.06);
  box-shadow: var(--shadow-focus);
}

/* Bonus chips row at bottom of benefits section */
.benefits-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.benefits-chips .chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  background: var(--surface-card);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.benefits-chips .chip .num{ color: var(--primary); font-weight: 600; }
.benefits-chips .chip i{ color: var(--mute); font-size: 14px; }

/* ============================================================
   REVEAL · scroll-triggered fade-up with stagger
   ============================================================ */
/* Reveal · spring-like equivalente a Framer Motion stiffness:250 damping:30 */
.reveal{
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.34, 1.42, 0.64, 1);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   SCROLL-DRIVEN ZOOM REVEAL · equivalente vanilla del useScroll+useTransform
   3 capas con scales opuestas para crear sensación de profundidad 3D
   ============================================================ */
.scroll-reveal-container{
  position: relative;
  isolation: isolate;
}
.scroll-reveal-layer{
  transform-origin: center center;
  will-change: transform, opacity;
}
.scroll-reveal-layer[data-layer="bg"]{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.scroll-reveal-layer[data-layer="overlay"]{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.scroll-reveal-layer[data-layer="main"]{
  position: relative;
  z-index: 2;
}
/* Stagger · sector cards */
/* Stagger · metrics */
.metrics-grid .metric:nth-child(1).reveal{ transition-delay: 0ms; }
.metrics-grid .metric:nth-child(2).reveal{ transition-delay: 100ms; }
.metrics-grid .metric:nth-child(3).reveal{ transition-delay: 200ms; }
.metrics-grid .metric:nth-child(4).reveal{ transition-delay: 300ms; }
/* Stagger · benefit cards (rows) */
.benefits-row .benefit-card:nth-child(1).reveal{ transition-delay: 0ms; }
.benefits-row .benefit-card:nth-child(2).reveal{ transition-delay: 100ms; }
.benefits-row .benefit-card:nth-child(3).reveal{ transition-delay: 200ms; }
/* Stagger · solution cards (rows) */
.solution-row > *:nth-child(1).reveal{ transition-delay: 0ms; }
.solution-row > *:nth-child(2).reveal{ transition-delay: 100ms; }
.solution-row > *:nth-child(3).reveal{ transition-delay: 200ms; }

/* Respeta el sistema · sin animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PRINT · clean PDF export
   ============================================================ */
@media print{
  .header{ position: static; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .header-inner{ padding: 16px 24px; }
  .nav{ display: none; }
  .header-actions .nav-login{ display: none; }
  .header-actions > .btn-primary{ padding: 9px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
  .header-actions > .btn-primary .lbl{ white-space: nowrap; }
  .header-actions > .btn-primary .arr{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .mobile-menu{ display: flex; }
  .hero{ min-height: 100vh; height: 100vh; align-items: flex-start; }
  .hero-bg{ background-position: 72% 26%; }
  .hero-trust{ display: none; }
  .section-head{ padding-left: 24px; padding-right: 24px; }
  .hero-content{ padding: 104px 24px 0; }
  .hero-text{ max-width: 100%; }
  .hero-headline{ font-size: clamp(32px, 8vw, 44px); margin-bottom: 20px; }
  .hero-sub{ display: none; }
  /* Chat móvil · feed que sube dentro de una ventana fija (estilo Sierra) */
  .hero-chat{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    top: auto;
    bottom: 0;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    height: 62vh;
    padding-bottom: 104px;   /* mantiene los mensajes por encima de los logos */
    gap: 0;
    overflow: hidden;
    z-index: 3;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  }
  .hero-chat .chat-bubble{
    animation: none;
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    flex-shrink: 0;
    transform: translateY(10px);
    /* todo con el mismo easing y duración para que caja y texto entren como uno solo */
    transition: opacity .6s cubic-bezier(0.33, 1, 0.68, 1),
                transform .6s cubic-bezier(0.33, 1, 0.68, 1),
                max-height .6s cubic-bezier(0.33, 1, 0.68, 1),
                margin-top .6s cubic-bezier(0.33, 1, 0.68, 1);
    max-width: 100%;
  }
  .hero-chat .chat-bubble.in{
    opacity: 1;
    margin-top: 10px;
    transform: translateY(0);
    /* max-height la fija el JS al alto real del mensaje (sin recortes) */
  }
  .hero-video{ display: none; }
  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.35) 40%,
        rgba(0,0,0,0.4) 100%
      );
  }
  .logo-track{ gap: 56px; padding: 0 24px; }
  .logo-track img{ height: 36px; }
  .metrics{ padding: 72px 24px; }
  .benefits{
    padding: 72px 0 80px 0;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow:
      0 10px 16px 0 rgba(100, 130, 180, 0.05),
      0 24px 32px 0 rgba(100, 130, 180, 0.04);
  }
  .benefits > .section-head{ padding-left: 24px; padding-right: 24px; }
  .solution{
    margin-top: -64px;
    padding: 180px 0 96px 0;
  }
  .solution > .section-head,
  .solution > .solution-row{ padding-left: 24px; padding-right: 24px; }
  .sectors{ padding: 72px 0 0 0; }
  .sectors > .section-head{ padding-left: 24px; padding-right: 24px; }
  .section-head{ gap: 12px; margin-bottom: 48px; }
  .sectors-track{
    padding: 0 24px 16px 24px;
    -webkit-overflow-scrolling: touch;
    cursor: auto;
  }
  .sectors-arrow{ display: none; }
  .sectors-fade{ width: 48px; }
  .sector-slide{
    width: 78vw;
    max-width: 360px;
    height: 440px;
  }
  .sector-content{ width: 60%; padding: 24px 22px; }
  /* En mobile mostramos siempre descripción + métrica (no hay hover), ancladas abajo */
  .sector-content{
    opacity: 1;
    transform: none;
    width: 100%;
    padding: 22px 22px 24px 22px;
    justify-content: flex-end;
  }
  .sector-quote{
    display: block;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 14px 0;
  }
  .sector-metric{
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 14px;
  }
  .sector-metric .num{ font-size: 28px; }
  .sector-metric .label{ font-size: 12px; }
  .sector-overlay{
    background: linear-gradient(0deg, rgba(28, 28, 28, 0.9) 0%, rgba(28, 28, 28, 0.6) 45%, rgba(28, 28, 28, 0.12) 78%, transparent 100%);
  }
  .sector-name{
    bottom: auto;
    top: 22px;
    left: 22px;
  }
  .metrics-grid{ grid-template-columns: 1fr; }
  .metric{ border-right: 0; border-bottom: 1px solid var(--rule); padding: 26px 0; }
  .metric:last-child{ border-bottom: 0; }
  .metric:nth-last-child(-n+2){ border-bottom: 0; }
  /* Beneficios · carrusel horizontal con snap al CENTRO (estilo Sierra) ·
     la card activa queda centrada y las vecinas asoman a ambos lados */
  .benefits > .benefits-row{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 12vw 10px 12vw;   /* (100vw - card)/2 a cada lado → centra 1ª y última */
    margin: 0;
  }
  .benefits > .benefits-row + .benefits-row{ margin-top: 16px; }
  .benefits-row::-webkit-scrollbar{ display: none; }
  .benefits-row .benefit-card{
    flex: 0 0 76vw;
    width: 76vw;
    min-width: 0;
    max-width: 76vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* En el carrusel las cards están siempre visibles (si no, la vecina que asoma
     no la detecta el reveal y no se ve hasta deslizar) */
  .benefits-row .benefit-card.reveal{ opacity: 1; transform: none; }
  /* La altura del mock se ajusta a su contenido para que se vea completo en móvil */
  .benefit-mock{ aspect-ratio: auto; }
  .solution-row{ grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
  .solution-row.reverse .solution-text{ order: 1; }
  .solution-row.reverse .solution-visual{ order: 2; }
  /* Capacidad 02 · en móvil el texto va a la izquierda (sin espejar) */
  .solution-row.reverse .solution-text{ text-align: left; }
  .solution-row.reverse .sub-feat{ grid-template-columns: 24px 1fr; }
  .solution-row.reverse .sub-feat > i{ order: 0; }
  .solution-row.reverse .sub-feat-content{ order: 0; text-align: left; }
  .solution-visual{
    min-height: 280px;
    padding: 24px 32px 32px 24px;
    align-items: center;
    justify-content: center;
  }
  .cat-mock{ max-width: 100%; width: 100%; }
  /* Integración · 2 columnas en móvil para que los logos se vean grandes */
  .mock-logos-grid{ grid-template-columns: 1fr 1fr; max-width: 100%; gap: 12px; }
  .mock-workflow{ grid-template-columns: 1fr; }
  .security{ padding: 72px 16px; }
  .security-vault{ padding: 56px 20px; border-radius: var(--r-lg); }
  .security-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .security-card{ padding: 32px 22px; }
  .roi{ padding: 0 16px 80px 16px; }
  .roi-board{ grid-template-columns: 1fr; gap: 14px; }
  .roi-card{ padding: 28px 22px; }
  .cta-cierre{ padding: 80px 20px 96px 20px; }
  .cta-inner{ grid-template-columns: 1fr; gap: 40px; }
  .cta-text{ text-align: center; }
  .cta-sub{ font-size: 15px; margin: 0 auto; }
  .cta-form{ padding: 24px; }
  .cta-form .row{ grid-template-columns: 1fr; gap: 14px; }
  .footer-main{ padding: 56px 24px 32px 24px; }
  .footer-cols{
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
    margin-bottom: 40px;
  }
  .footer-social{
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 4px;
  }
  .footer-divider{ margin-bottom: 36px; }
}

@media (max-width: 560px){
  /* Seguridad en móvil · 2x2 compacto, solo icono + título (sin descripciones) */
  .security-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .security-card{ padding: 24px 14px; gap: 10px; }
  .security-card-desc{ display: none; }
}

/* ============================================================
   PÁGINAS LEGALES (legal.html) + banner de cookies
   ============================================================ */
.legal-page{
  max-width: 920px;
  margin: 0 auto;
  padding: 140px 24px 110px 24px;
}
.legal-hero{ margin-bottom: 8px; }
.legal-hero h1{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 12px 0;
}
.legal-updated{ font-family: var(--f-body); font-size: 14px; color: var(--mute); margin: 0 0 44px 0; text-align: center; }
.legal-tabs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 16px 0;
}
.legal-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 15px;
  background: #FFFFFF;
  border: 1px solid rgba(25, 109, 255, 0.16);
  border-radius: var(--r-full);
  font-family: var(--f-body); font-size: 14px; font-weight: 500;
  color: var(--mute); cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.legal-tab i{ font-size: 17px; color: var(--ink); line-height: 1; }
.legal-tab:hover{ color: var(--ink); border-color: rgba(25, 109, 255, 0.45); }
.legal-tab.is-active{
  color: var(--ink);
  border-color: var(--primary);
}
.legal-section{ display: none; }
.legal-section.is-active{ display: block; animation: legalfade .3s var(--ease-out); }
.legal-title{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.025em; color: var(--ink);
  text-align: center; margin: 0 0 32px 0;
}
.legal-section .legal-intro{ font-size: 16px; line-height: 1.65; color: var(--mute); margin: 0 0 32px 0; }
.legal-section h2{
  font-family: var(--f-display); font-weight: 500; font-size: 20px;
  letter-spacing: -0.015em; color: var(--ink); margin: 38px 0 12px 0;
}
.legal-section h2:first-of-type{ margin-top: 0; }
.legal-section p{ font-family: var(--f-body); font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px 0; }
.legal-section ul{ margin: 0 0 16px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-section li{ font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.legal-section strong{ color: var(--ink); font-weight: 600; }
.legal-section a{ color: var(--primary); text-decoration: underline; }
.legal-data{ margin: 0 0 18px 0; }
.legal-data p{ margin: 0 0 8px 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.legal-data p:last-child{ margin-bottom: 0; }

/* Banner de cookies */
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  max-width: 580px; margin: 0 auto; z-index: 200;
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: 16px; box-shadow: 0 16px 48px rgba(20, 20, 40, 0.18);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
  font-family: var(--f-body);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner p{ font-size: 13.5px; line-height: 1.55; color: var(--mute); margin: 0; }
.cookie-banner a{ color: var(--primary); }
.cookie-actions{ display: flex; gap: 10px; }
.cookie-actions .btn-primary{ padding: 10px 18px; font-size: 13.5px; }
.cookie-ghost{
  background: none; border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 10px 18px; font-family: var(--f-body); font-size: 13.5px; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.cookie-ghost:hover{ border-color: var(--ink); }
@keyframes legalfade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

/* ============================================================
   PÁGINAS DE FORMULARIO · /demo y /partners
   ============================================================ */
.nav-login{
  font-family: var(--f-body); font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none; margin-right: 18px;
  transition: color .2s var(--ease-out);
}
.nav-login:hover{ color: var(--primary); }
.header-actions{ display: inline-flex; align-items: center; }

.form-page{
  max-width: 1080px; margin: 0 auto;
  padding: 150px 24px 110px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.form-intro .cat-eyebrow,
.form-intro .section-pill{ margin-bottom: 18px; }
.form-intro h1{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 18px 0; line-height: 1.05;
}
.form-intro p.lead{
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  color: var(--mute); margin: 0 0 28px 0;
}
.form-valueprops{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.form-valueprops li{ display: flex; align-items: flex-start; gap: 14px; font-family: var(--f-body); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.form-valueprops i{ color: var(--ink); font-size: 22px; flex-shrink: 0; margin-top: 1px; }

.form-card{
  background: #FFFFFF; border: 1px solid var(--rule);
  border-radius: 16px; padding: 32px;
  box-shadow: 0 10px 40px rgba(20, 30, 60, 0.06);
}
.form-card .row{ display: flex; gap: 14px; }
.form-card .row .field{ flex: 1; }
.form-card .field{ margin-bottom: 16px; display: flex; flex-direction: column; }
.form-card label{ font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.form-card input,
.form-card select{
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 12px 14px; width: 100%; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.form-card input:focus,
.form-card select:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,109,255,.12); }
.form-card .check{ display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px 0; font-family: var(--f-body); font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.form-card .check input{ width: auto; margin-top: 3px; }
.form-card .check a{ color: var(--primary); text-decoration: underline; }
.form-card button[type="submit"]{ width: 100%; justify-content: center; margin-top: 8px; }
.form-card button[disabled]{ opacity: .6; pointer-events: none; }

.form-status{ font-family: var(--f-body); font-size: 14px; line-height: 1.5; border-radius: 10px; padding: 12px 14px; margin-top: 16px; display: none; }
.form-status.is-visible{ display: block; }
.form-status.is-success{ background: #E8F7EE; color: #1B7A3D; border: 1px solid #BDE5C8; }
.form-status.is-error{ background: #FCEBEC; color: #B42318; border: 1px solid #F3C0C2; }

/* Consentimiento pasivo bajo el botón de envío (sustituye al checkbox obligatorio) */
.form-consent{
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mute);
  text-align: center;
  margin: 14px 0 0 0;
}
.form-consent a{ color: var(--primary); text-decoration: underline; }

@media (max-width: 860px){
  .form-page{ grid-template-columns: 1fr; gap: 36px; padding-top: 120px; }
  .form-card .row{ flex-direction: column; gap: 0; }
}