/** Shopify CDN: Minification failed

Line 486:0 Unexpected "<"
Line 521:0 Unexpected "<"

**/
:root{--bg:#0B0E14;--t:#EAF1FF;--m:#9FB0CC;--b:#4F7BFF;--c:#22D3EE;--r:16px;--line:rgba(255,255,255,.12)}
body{background:var(--bg);color:var(--t);font-family:Inter,Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65;margin:0}
h1,h2,h3{margin:0 0 .6em;line-height:1.2}
h1{font-size:clamp(30px,4.5vw,56px);font-weight:800}
h2{font-size:clamp(22px,3.2vw,36px);font-weight:700}
h3{font-size:clamp(18px,2.3vw,24px);font-weight:700}
p.lead{color:var(--m)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.grid{display:grid;gap:22px}
@media(min-width:768px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid transparent;font-weight:800;letter-spacing:.02em;cursor:pointer}
.btn--primary{background:linear-gradient(135deg,var(--b),var(--c));color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line)}
.ai-hero{padding:96px 0 72px;background:radial-gradient(900px 360px at 10% -10%,rgba(79,123,255,.22),transparent 60%),radial-gradient(800px 320px at 95% -15%,rgba(34,211,238,.18),transparent 55%)}
.ai-hero .title{max-width:900px}
.ai-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ai-hero {
  background: radial-gradient(900px 360px at 10% -10%, rgba(79,123,255,.22), transparent 60%),
              radial-gradient(800px 320px at 95% -15%, rgba(34,211,238,.18), transparent 55%),
              #0B0E14; /* Fondo oscuro base */
  color: var(--t);
  padding: 120px 0 90px;
  text-align: center;
}
.ai-hero h1 { color: var(--t); }
.ai-hero p { color: var(--m); }
/* Afinar hero y botones */
.ai-hero .lead{ color:#c7d5f2 !important; }      /* subtítulo más legible */
.btn--ghost{                                      /* botón secundario visible */
  color:var(--t) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  background:transparent !important;
}
.btn--ghost:hover{ border-color:var(--c) !important; color:var(--c) !important; }

@media (max-width:768px){                         /* hero más compacto en móvil */
  .ai-hero{ padding:80px 20px; }
  .ai-hero h1{ font-size:26px; }
}
/* Tarjetas de beneficios */
.card {
  background: rgba(255,255,255,0.03);  /* fondo translúcido estilo glass */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35),
              0 0 12px rgba(0,128,255,0.25);
}

.card h3 {
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 12px;
}

.card p {
  color: #c7d5f2;  /* gris azulado más claro */
  font-size: 16px;
  line-height: 1.5;
}
/* Glow azul en hover para las tarjetas */
.card:hover {
  background: rgba(0, 200, 255, 0.05);           /* leve resplandor azul en fondo */
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.25);  /* glow alrededor */
  border-color: rgba(0, 200, 255, 0.4);          /* borde iluminado */
}
/* Quitar subrayado de los botones/enlaces con clase btn */
a.btn, .btn {
  text-decoration: none !important;
}
.cta{
  text-align:center; padding:48px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
/* ===== Banda de logos con animación infinita ===== */
.logo-strip{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:18px 0;
  position:relative;
  overflow:hidden;
}

.logo-strip:before, .logo-strip:after{
  content:""; position:absolute; top:0; width:80px; height:100%; z-index:2;
  pointer-events:none;
}
.logo-strip:before{ left:0; background:linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.logo-strip:after{ right:0; background:linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

.logo-marquee{ overflow:hidden; }

.logo-track{
  display:inline-flex; align-items:center;
  gap:40px; /* bajamos el gap para loop más suave */
  animation: logos-scroll 40s linear infinite;
  white-space:nowrap;
}

.logo{
  max-height:32px; height:auto; width:auto;
  display:inline-block;
  opacity:.95;
  transition: transform .25s ease, opacity .25s ease;
}
.logo:hover{ transform:scale(1.08); opacity:1; }

@keyframes logos-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width:768px){
  .logo-track{ gap:28px; }
  .logo{ max-height:24px; }
}

/* ===== Ajustes de tamaño específicos ===== */
.logo-anthropic { max-height:16px !important; }  /* mitad de lo que estaba */
.logo-gmail     { max-height:44px !important; }  /* más grande */
.logo-stripe    { max-height:60px !important; }  /* casi el doble */
.logo-notion    { max-height:40px !important; }  /* un poco más grande */
.logo-shopify   { max-height:42px !important; }  /* un poco más grande */
.logo-n8n       { max-height:40px !important; }  /* un poco más grande */
.logo-zapier    { max-height:40px !important; }  /* más grande */
.logo-make      { max-height:16px !important; }  /* casi la mitad */
/* ========== HEADER GLASS PRO ========== */
/* Contenedor del header (funciona en la mayoría de temas) */
.shopify-section-header, .header-wrapper, header.header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(11,14,20,0.75) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Menú: enlaces en blanco y sin subrayado */
.header__inline-menu .list-menu__item a,
.header__menu-item, .site-nav__link, .header a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 14px;
  transition: color .25s ease, background .25s ease;
}

/* Hover elegante */
.header__inline-menu .list-menu__item a:hover,
.header a:hover {
  color: #22D3EE !important;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}

/* Estado activo (página actual) */
.header__inline-menu .list-menu__item a[aria-current="page"]{
  color:#22D3EE !important;
}

/* Iconos (buscar, cuenta, bolsa) en blanco */
.header__icon, .header__icon svg, .header__icon svg path {
  color:#fff !important; fill:#fff !important; stroke:#fff !important; opacity:.9;
}

/* Espaciado del menú horizontal */
.header__inline-menu { gap: 14px !important; }

/* Anuncio superior (barra negra) a juego */
.announcement-bar, .announcement-bar__message {
  background:#0B0E14 !important; color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Menú móvil (drawer) oscuro */
.menu-drawer, .menu-drawer__inner-container {
  background:#0B0E14 !important; color:#fff !important;
}
.menu-drawer__menu-item { color:#fff !important; }
.menu-drawer__menu-item:hover { background:rgba(255,255,255,.06); }

/* CTA del menú: estiliza el enlace a /pages/hablemos como botón */
.header__inline-menu a[href*="/pages/hablemos"]{
  background: linear-gradient(135deg, #4F7BFF, #22D3EE);
  color:#0B0E14 !important;
  border:1px solid transparent;
  border-radius:10px;
  padding:10px 16px;
}
.header__inline-menu a[href*="/pages/hablemos"]:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
/* ===== Compactar espacios globales (Home) ===== */

/* Reduce padding vertical de todas las secciones que usan nuestra clase */
.section{ padding: 40px 0 !important; }           /* antes 64px */

/* Hero más compacto y pegado al header */
.ai-hero{
  padding-top: 72px !important;                   /* antes 96–120 */
  padding-bottom: 48px !important;                /* antes 72–90 */
  margin-top: -8px;                               /* quita banda negra entre header y hero */
}

/* Quita márgenes extra que añade el tema alrededor de cada sección */
.shopify-section{ margin: 0 !important; }
.shopify-section .section,
.section .container{ margin: 0 !important; }

/* Títulos y párrafos con menos respiro */
.ai-hero .title{ margin-bottom: 10px !important; }
p.lead{ margin-top: 8px !important; margin-bottom: 0 !important; }

/* Grid de beneficios con separación más corta */
.grid{ gap: 18px !important; }
.card{ padding: 20px !important; }

/* CTA con menos altura */
.cta{ padding: 36px 20px !important; }

/* Ajuste responsive: aún más compacto en móvil */
@media (max-width: 768px){
  .section{ padding: 32px 0 !important; }
  .ai-hero{ padding-top: 56px !important; padding-bottom: 36px !important; }
}
.ai-hero {
  background: linear-gradient(135deg, #0B0E14 0%, #0f3dfd 40%, #22D3EE 80%);
}
/* Hero con degradado más intenso */
.ai-hero {
  background: linear-gradient(135deg, #0B0E14 0%, #001f3f 50%, #004aad 100%);
  padding-top: 72px !important;
  padding-bottom: 48px !important;
  margin-top: -8px;
}
.ai-hero {
  background: linear-gradient(135deg, #0B0E14 0%, #0f3dfd 40%, #22D3EE 80%);
}
.shopify-section .ai-hero{
  background: linear-gradient(135deg, #0B0E14 0%, #0f3dfd 38%, #22D3EE 88%) !important;
  --gradient-background: transparent !important;
}
.shopify-section .ai-hero{
  background: linear-gradient(135deg, #0B0E14 0%, #1b3cff 20%, #7c3aed 20%) !important;
  --gradient-background: transparent !important;
}
.shopify-section .ai-hero {
  background: linear-gradient(
    135deg,
    #0B0E14 0%,         /* negro profundo */
    #1b3cff 35%,        /* azul eléctrico */
    #7c3aed 70%,        /* púrpura vivo */
    #0B0E14 100%        /* vuelve a negro */
  ) !important;
  --gradient-background: transparent !important;
}
.shopify-section .ai-hero {
  background: linear-gradient(
    135deg,
    #0B0E14 0%,        /* negro profundo arriba */
    #1b3cff 35%,       /* azul eléctrico */
    #7c3aed 70%,       /* púrpura vivo */
    rgba(11,14,20,0) 100% /* transparente abajo */
  ) !important;
  --gradient-background: transparent !important;
}
.shopify-section .ai-hero {
  background: linear-gradient(
    180deg,                       /* vertical: de arriba a abajo */
    #0B0E14 0%,                   /* negro profundo arriba */
    #1b3cff 30%,                  /* azul eléctrico */
    #7c3aed 65%,                  /* púrpura vivo */
    rgba(11,14,20,0) 100%         /* transparente abajo */
  ) !important;
  --gradient-background: transparent !important;
}
.ai-hero {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,           /* Arriba totalmente transparente */
    rgba(63, 94, 251, 0.9) 20%,    /* Azul fuerte */
    rgba(131, 58, 180, 0.9) 60%,   /* Morado intermedio */
    rgba(0, 0, 0, 0) 100%          /* Abajo transparente */
  );
  color: white;
  text-align: center;
  padding: 80px 20px;
  border-radius: 0;
}
.ai-hero {
  background: linear-gradient(
    to bottom, 
    /* Arriba (fusión lateral de colores) */
    linear-gradient(to right, rgba(63, 94, 251, 1) 20%, rgba(131, 58, 180, 1) 70%) 0%,
    /* Abajo (desvanecido) */
    rgba(0, 0, 0, 0) 100%
  );
  background: -webkit-linear-gradient(
    to bottom, 
    rgba(63, 94, 251, 1) 0%, 
    rgba(131, 58, 180, 1) 50%, 
    rgba(0, 0, 0, 0) 100%
  );
  color: white;
  text-align: center;
  padding: 80px 20px;
  border-radius: 0;
}
.ai-hero {
  background: linear-gradient(
    to bottom,
    rgba(63, 94, 251, 1) 0%,   /* Azul sólido arriba */
    rgba(131, 58, 180, 1) 50%, /* Morado a media altura */
    rgba(0, 0, 0, 0) 100%      /* Transparente abajo */
  );
  color: white;
  text-align: center;
  padding: 80px 20px;
}
/* HERO: lateral azul→morado (fusión a la izquierda) + desvanecido inferior */
.shopify-section .ai-hero{ 
  /* primero anulamos cualquier fondo previo del tema */
  background: none !important;
  position: relative;
}

.shopify-section .ai-hero::before{
  content:"";
  position:absolute; inset:0;
  /* Capa 1 (arriba): gradiente VERTICAL que acaba TRANSPARENTE abajo  */
  /* Capa 2 (abajo): gradiente HORIZONTAL azul→morado, fusión más cerca de la izquierda */
  background-image:
    linear-gradient(to bottom,
      rgba(27,60,255, 1) 0%,        /* azul sólido arriba */
      rgba(124,58,237, .95) 60%,    /* morado en el centro */
      rgba(11,14,20, 0) 100%        /* transparente abajo (se funde con el fondo) */
    ),
    linear-gradient(to right,
      #1b3cff 20%,                  /* azul dominante a la izquierda */
      #7c3aed 65%                   /* morado, fusión adelantada hacia la izquierda */
    );
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 100% 100%;
  pointer-events:none;
  z-index:0;
}

/* Que el contenido quede por encima de la capa ::before */
.shopify-section .ai-hero > *{ position: relative; z-index:1; }

/* Por si el tema añade overlays: los apagamos */
.shopify-section .ai-hero::after{ background: none !important; }
.shopify-section .ai-hero {
  background: none !important;
  position: relative;
}

.shopify-section .ai-hero::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    #1b3cff 0%,          /* sólido arriba */
    #1b3cff 70%,         /* mantiene sólido casi todo */
    rgba(27,60,255,0) 100% /* desvanecido abajo */
  ) !important;
  z-index:0;
}

.shopify-section .ai-hero > * { position: relative; z-index:1; }
.shopify-section .ai-hero {
  background: none !important;
  position: relative;
}

.shopify-section .ai-hero::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    #1b3cff 0%, 
    #7c3aed 60%, 
    rgba(124,58,237,0) 100%
  ), 
  linear-gradient(
    to right,
    #1b3cff 20%,
    #7c3aed 70%
  ) !important;
  background-blend-mode: screen;
  z-index:0;
}

.shopify-section .ai-hero > * { position: relative; z-index:1; }
.shopify-section .ai-hero {
  background: none !important;
  position: relative;
}

.shopify-section .ai-hero::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    #1b3cff 0%,
    rgba(123,58,237,0.9) 70%,
    rgba(0,0,0,0) 100%
  ), 
  linear-gradient(
    135deg,
    #1b3cff 10%,
    #7c3aed 60%
  ) !important;
  background-blend-mode: overlay;
  z-index:0;
}

.shopify-section .ai-hero > * { position: relative; z-index:1; }
.shopify-section .ai-hero {
  background: none !important;
  position: relative;
}

.shopify-section .ai-hero::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    #1b3cff 0%,              /* azul sólido arriba */
    rgba(124,58,237,0.9) 60%, /* morado degradado en el medio */
    rgba(0,0,0,0) 100%        /* transparente al 100% abajo */
  ), 
  linear-gradient(
    135deg,
    #1b3cff 15%,              /* azul en la izquierda */
    #7c3aed 70%               /* morado en diagonal */
  ) !important;
  background-blend-mode: overlay;
  z-index:0;
}

.shopify-section .ai-hero > * { position: relative; z-index:1; }
.shopify-section .ai-hero {
  background: none !important;
  position: relative;
}

.shopify-section .ai-hero::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    #1b3cff 0%,              /* azul sólido arriba */
    rgba(124,58,237,0.9) 60%, /* morado degradado en el medio */
    rgba(0,0,0,0) 100%        /* transparente al 100% abajo */
  ), 
  linear-gradient(
    135deg,
    #1b3cff 15%,              /* azul en la izquierda */
    #7c3aed 70%               /* morado en diagonal */
  ) !important;
  background-blend-mode: overlay;
  z-index:0;
}

.shopify-section .ai-hero > * { position: relative; z-index:1; }
<div id="hero-obb" class="ai-hero">
  <div class="container">
    <!-- tu título, párrafo y botones tal cual -->
  </div>
</div>

<style>
  /* Anula cualquier fondo previo del tema en el hero */
  #hero-obb{ position:relative; background:none !important; }

  /* Capa de color: azul→morado de IZQ a DER, y fade a TRANSPARENTE abajo */
  #hero-obb::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    /* capa A: VERTICAL para desvanecer abajo */
    /* capa B: HORIZONTAL para azul→morado (fusión más cerca de la izquierda) */
    background-image:
      linear-gradient(to bottom,
        rgba(27,60,255,1) 0%,         /* ARRIBA SÓLIDO (sin degradado arriba) */
        rgba(124,58,237,0.92) 60%,    /* centro morado */
        rgba(11,14,20,0) 100%         /* ABAJO TRANSPARENTE */
      ),
      linear-gradient(to right,
        #1b3cff 22%,                  /* azul dominante a la izquierda */
        #7c3aed 68%                   /* morado (fusión adelantada hacia la izq.) */
      );
    background-repeat:no-repeat,no-repeat;
    background-size:100% 100%, 100% 100%;
    z-index:0;
  }

  /* Asegura que el contenido quede por encima de la capa ::before */
  #hero-obb > *{ position:relative; z-index:1; }

  /* Si el tema añadiera alguna superposición, la apagamos */
  #hero-obb::after{ content:none !important; background:none !important; }
</style>
.ai-hero {
  background: linear-gradient(
    to bottom, 
    /* Arriba (fusión lateral de colores) */
    linear-gradient(to right, rgba(63, 94, 251, 1) 20%, rgba(131, 58, 180, 1) 70%) 0%,
    /* Abajo (desvanecido) */
    rgba(0, 0, 0, 0) 100%
  );
  background: -webkit-linear-gradient(
    to bottom, 
    rgba(63, 94, 251, 1) 0%, 
    rgba(131, 58, 180, 1) 50%, 
    rgba(0, 0, 0, 0) 100%
  );
  color: white;
  text-align: center;
  padding: 80px 20px;
  border-radius: 0;
}
.shopify-section .ai-hero {
  background: linear-gradient(
    135deg,
    #0B0E14 0%,        /* negro profundo arriba */
    #1b3cff 35%,       /* azul eléctrico */
    #7c3aed 70%,       /* púrpura vivo */
    rgba(11,14,20,0) 100% /* transparente abajo */
  ) !important;
  --gradient-background: transparent !important;
}
/* RESET: elimina cualquier degradado/fondo viejo del hero */
.ai-hero,
.ai-hero::before,
.ai-hero::after {
  background: none !important;
  content: none !important;
}
.ai-hero {
  background: linear-gradient(
    to bottom,
    #1b3cff 0%,             /* azul sólido arriba */
    #7c3aed 60%,            /* morado en el centro */
    rgba(11,14,20,0) 100%   /* transparente abajo */
  ) !important;
}
.ai-hero {
  background: linear-gradient(
    to bottom,
    #1b3cff 0%,             /* azul sólido arriba */
    #7c3aed 60%,            /* morado en el centro */
    rgba(11,14,20,0) 100%   /* transparente abajo */
  ) !important;
}
/* ===== CTA PRO & COMPACTO ===== */
#cta-obb, .cta {                 /* aplica a tu CTA aunque no tenga id */
  position: relative;
  margin: 0 auto;
  max-width: 1080px;             /* más angosto = más elegante */
  padding: 28px 22px !important; /* menos alto */
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

/* Borde con brillo muy sutil (tecnológico) */
#cta-obb::before, .cta::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;                   /* grosor del halo */
  background: linear-gradient(135deg, rgba(79,123,255,.5), rgba(34,211,238,.4));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.6; pointer-events:none;
}

/* Título y párrafo más compactos */
#cta-obb h2, .cta h2{
  font-size: 26px; line-height:1.2; margin: 0 0 8px 0; color:#fff;
}
#cta-obb p, .cta p{
  margin: 0 0 16px 0; color:#c7d5f2; font-size:16px;
}

/* Botones */
#cta-obb .btn, .cta .btn{
  text-decoration:none !important;
  border-radius: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
#cta-obb .btn:hover, .cta .btn:hover{ transform: translateY(-2px); filter:brightness(1.05); }

/* Primario con gradiente */
#cta-obb .btn--primary, .cta .btn--primary{
  background: linear-gradient(135deg, #4F7BFF, #22D3EE);
  color:#0B0E14 !important; font-weight:700;
  box-shadow: 0 6px 16px rgba(34,211,238,.18);
}

/* Secundario outline */
#cta-obb .btn--ghost, .cta .btn--ghost{
  background: transparent; color:#cfe7ff !important;
}
#cta-obb .btn--ghost:hover, .cta .btn--ghost:hover{
  background: rgba(255,255,255,.05);
}

/* Fila de botones */
#cta-obb .actions, .cta .actions{ display:flex; gap:10px; justify-content:center; }

/* ===== ESPACIOS ALREDEDOR DEL BLOQUE (quita “negrura”) ===== */
.section { padding: 32px 0 !important; }              /* global más compacto */
#cta-obb.section, .cta.section { padding: 28px 0 !important; }
.shopify-section { margin: 0 !important; }

/* Si el tema mete “relleno de sección” arriba/abajo, neutralízalo aquí */
[data-section-id] .section { margin-top:0 !important; margin-bottom:0 !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px){
  #cta-obb, .cta{ padding: 22px 16px !important; }
  #cta-obb h2, .cta h2{ font-size:22px; }
  #cta-obb .actions, .cta .actions{ flex-direction:column; }
  #cta-obb .btn, .cta .btn{ width:100%; text-align:center; }
}
/* ===== TEXTO EN MOVIMIENTO (marquee) ===== */
.marquee, .shopify-section[data-section-type*="marquee"] {
  font-family: 'Inter', 'Roboto', sans-serif; /* misma familia que resto */
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background: linear-gradient(90deg, #4F7BFF, #22D3EE, #A855F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  white-space: nowrap;
  animation: glowText 3s ease-in-out infinite alternate;
}

/* animación de brillo suave */
@keyframes glowText {
  0%   { text-shadow: 0 0 8px rgba(79,123,255,0.6); }
  100% { text-shadow: 0 0 14px rgba(34,211,238,0.7); }
}
/* Compactar el hero (menos altura abajo) */
#hero-obb{ padding-bottom: 28px !important; }
#hero-obb .container{ margin-bottom: 0 !important; }

/* Logos: quitar padding superior y “subir” el bloque para que se pegue al hero */
#logos-obb.section{
  padding-top: 8px !important;   /* casi sin aire arriba */
  margin-top: -24px !important;  /* solapa un poco con el hero para evitar franja */
}

/* En móvil, solapamos un poco menos */
@media (max-width: 768px){
  #logos-obb.section{ margin-top: -12px !important; padding-top: 6px !important; }
}

/* Por si el tema mete márgenes alrededor de cada sección */
.shopify-section{ margin:0 !important; }
/* === Arreglo de centrado y hueco derecho === */

/* Evita barras horizontales y desplazamientos raros */
html, body { overflow-x: hidden; }

/* Restituye el centrado del contenedor principal del tema */
.container,
.page-width,
.content-container,
.shopify-section .container {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

/* Las secciones ocupan ancho completo y no dejan hueco a la derecha */
.section { width: 100%; }

/* Banda de logos centrada */
#logos-obb .container { margin-left:auto !important; margin-right:auto !important; }

/* Grids de tarjetas: que el bloque completo se centre y llene columnas */
.grid { margin-left: auto; margin-right: auto; }
.grid--3 { justify-items: stretch; }
@media (min-width: 768px){
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Si en algún momento pusimos esto, lo neutralizamos aquí: */
/* .shopify-section .section, .section .container{ margin: 0 !important; } */
/* ========== EQUIPO ========== */
.team-section{ position:relative; }

/* Banda clara (blanco) dentro del tema oscuro */
.team-band{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

/* Cabecera */
.team-head{ text-align:center; max-width: 900px; margin: 0 auto 18px; }
.team-head h1{
  color:#0b0e14; margin:0 0 8px; line-height:1.12; font-size: 36px;
}
.team-head .lead{
  color:#3a4252; margin:0;
}

/* Grid de tarjetas */
.team-grid{
  display:grid; gap:18px; margin-top:18px; margin-bottom:18px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Tarjetas claras con halo tech */
.team-card{
  background:#f7f9ff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.team-card:hover{
  transform: translateY(-4px);
  border-color: rgba(79,123,255,.45);
  box-shadow: 0 14px 36px rgba(79,123,255,.18);
}
.team-card .icon{
  font-size:26px; line-height:1; margin-bottom:8px;
}
.team-card h3{
  margin:0 0 6px; color:#0b0e14; font-size:18px;
}
.team-card p{
  margin:0; color:#3a4252;
}

/* CTA inferior dentro de la banda */
.team-cta{
  text-align:center; margin-top:6px;
}
.team-cta .lead{ color:#3a4252; margin:0 0 10px; }
.team-cta .btn{
  text-decoration:none !important;
  border-radius: 10px; padding: 10px 18px; font-weight:700;
  border:1px solid transparent;
  background: linear-gradient(135deg, #4F7BFF, #22D3EE);
  color:#0B0E14 !important;
  box-shadow: 0 6px 16px rgba(34,211,238,.18);
  transition: transform .2s ease, filter .2s ease;
}
.team-cta .btn:hover{ transform: translateY(-2px); filter:brightness(1.05); }

/* Ajustes responsive */
@media (max-width: 768px){
  .team-band{ padding: 24px 18px; border-radius:18px; }
  .team-head h1{ font-size: 28px; }
}
/* ---- Afinado bloque equipo ---- */
.team-band{
  max-width: 1200px;            /* centrado elegante */
  margin: 0 auto;
  padding: 28px 26px;           /* un poco más compacto */
  border-radius: 20px;
}

/* Título/subtítulo un pelín más pegados */
.team-head h1{ margin-bottom: 6px; }
.team-head .lead{ margin-bottom: 12px; }

/* Grid 3 col desktop, 1 col móvil */
.team-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px){
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Tarjetas: misma altura + icono más visible */
.team-card{
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 180px;            /* iguala alturas */
  padding: 20px;
  border-radius: 16px;
  background:#f8fbff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.team-card .icon{ font-size: 30px; margin-bottom: 10px; }
.team-card h3{ margin: 0 0 6px; color:#0b0e14; }
.team-card p{ color:#3a4252; }

/* Hover sutil y consistente */
.team-card:hover{
  transform: translateY(-3px);
  border-color: rgba(79,123,255,.35);
  box-shadow: 0 14px 34px rgba(79,123,255,.16);
}

/* Borde superior con “glow” muy fino (se nota, pero no molesta) */
.team-band::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4F7BFF, #22D3EE, #7c3aed);
  opacity:.35;
}

/* CTA centrado y botón con mejor foco */
.team-cta{ margin-top: 6px; }
.team-cta .btn{
  padding: 12px 22px; border-radius: 12px;
  box-shadow: 0 8px 18px rgba(34,211,238,.18);
}

/* Un poco menos de negro entre secciones */
.section{ padding: 36px 0 !important; }
/* Afinados rápidos Equipo */
.team-section{ padding: 28px 0 !important; }                /* menos aire exterior */
.team-band{ padding: 24px 24px; border-radius:18px; }       /* más compacto */
.team-head h1{ letter-spacing:-.02em; }                     /* título más contundente */
.team-head .lead{ max-width: 860px; margin: 0 auto 14px; }  /* línea más corta y centrada */

/* Grid: igualamos alturas mejor y alineamos textos */
.team-grid{ gap: 14px; }
.team-card{
  min-height: 190px; display:flex; flex-direction:column; justify-content:flex-start;
  line-height: 1.45;
}
.team-card .icon{
  font-size: 34px; margin-bottom: 10px;
  filter: drop-shadow(0 3px 8px rgba(34,211,238,.18));      /* presencia sutil */
}
.team-card h3{ margin: 0 0 6px; }
.team-card p{ margin: 0; }

/* CTA más pegado y protagonista */
.team-cta{ margin-top: 6px; }
.team-cta .lead{ margin-bottom: 10px; color:#48556b; }
.team-cta .btn{ padding: 12px 22px; border-radius: 12px; }

/* Menos “aire negro” después de la banda */
.team-section + .section{ padding-top: 26px !important; }
/* Ajuste contraste bloque 3 */
#svc-asistentes .cap {
  color: #ffffff !important;   /* Texto de las mini-cards en blanco */
}

#svc-asistentes .svc-apps,
#svc-asistentes .svc-note,
#svc-asistentes .svc-list li {
  color: #ffffff !important;   /* Texto secundario en blanco */
}
/* Ajuste contraste bloque 3 */
#svc-asistentes .cap {
  color: #ffffff !important;   /* Texto de las mini-cards en blanco */
}

#svc-asistentes .svc-apps,
#svc-asistentes .svc-note,
#svc-asistentes .svc-list li {
  color: #ffffff !important;   /* Texto secundario en blanco */
}
/* Quita separación del wrapper de Shopify SOLO alrededor de tus bloques */

/* Sección donde está el hero (contiene #ai-hero-block) */
.shopify-section:has(#ai-hero-block) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Sección de la franja de logos (contiene #logos-obb) */
.shopify-section:has(#logos-obb) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Si tienes la sección de beneficios clara (contiene #benefits-light) */
.shopify-section:has(#benefits-light) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Por si tus propios <section> añaden padding interno */
#logos-obb.section,
#benefits-light.section {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}