/* From Uiverse.io by mobinkakei - Modificado por IA-Designer */
.cta {
  display: flex;
  padding: 11px 33px;
  text-decoration: none;
  font-family: 'Bender', sans-serif;
  font-size: 25px;
  color: white;
  background: #412D78;
  transition: 1s;
  box-shadow: 6px 6px 0 black;
  transform: skewX(-15deg);
  border: none;
  cursor: pointer;
}

.cta:focus {
  outline: none;
}

.cta:hover {
  transition: 0.5s;
  box-shadow: 10px 10px 0 #17ABBE;
}
/* /* ====== HERO ANIMADO (Geek Tattoo) ====== */
.gt-hero-animated{
  position: relative;
  width: 100%;
  min-height: clamp(380px, 60vh, 620px);
  overflow: hidden;
  background: #0b0b0d; /* ajustá a tu fondo */
}

/* (Opcional) textura/ruido leve sin imagen */
.gt-hero-animated::before{
  content:"";
  position:absolute; inset:0;
  opacity:.35;
  background:
    radial-gradient(1200px 600px at 50% 50%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(800px 400px at 20% 30%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(800px 400px at 80% 70%, rgba(255,255,255,.035), transparent 60%);
  pointer-events:none;
}

/* ====== MARQUEE TEXT ====== */
.gt-marquee{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: clamp(18px, 3.2vh, 34px);
  z-index: 1;
  pointer-events:none;
  transform: translateZ(0);
}

/* Cada fila */
.gt-marquee__row{
  position: relative;
  width: 120%;
  left: -10%;
  display:flex;
  align-items:center;
  overflow:hidden;
  opacity: .55; /* control global del texto */
}

/* Track duplicado para loop perfecto */
.gt-marquee__track{
  display:flex;
  align-items:center;
  gap: clamp(22px, 4vw, 56px);
  white-space: nowrap;
  will-change: transform;
  animation: gt-marquee-left 28s linear infinite;
}

/* Diferentes velocidades/direcciones por fila */
.gt-marquee__row--a .gt-marquee__track{ animation-duration: 30s; }
.gt-marquee__row--b .gt-marquee__track{ animation-name: gt-marquee-right; animation-duration: 34s; opacity:.85; }
.gt-marquee__row--c .gt-marquee__track{ animation-duration: 26s; opacity:.65; }

/* Estilo tipográfico (BENDER ya cargada) */
.gt-marquee__track span{
  font-family: "BENDER", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(38px, 6.2vw, 96px);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.65);
  text-stroke: 2px rgba(255,255,255,.65);

  /* apariencia más "Create": contorno + leve glow */
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.22));
}

/* Ajuste de stroke en mobile */
@media (max-width: 640px){
  .gt-marquee__track span{ -webkit-text-stroke: 1.6px rgba(255,255,255,.62); }
}

/* Animaciones */
@keyframes gt-marquee-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes gt-marquee-right{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ====== VIDEO CENTRADO ====== */
.gt-hero-animated__center{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  z-index: 2;
  padding: clamp(18px, 3vw, 42px);
}

.gt-hero-animated__videoWrap{
  width: min(520px, 62vw);
  aspect-ratio: 9 / 16;       /* look vertical como en el ejemplo */
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.35);

  /* “glass” sutil + separación del fondo */
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
}

.gt-hero-animated__video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Reducir movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .gt-marquee__track{ animation: none !important; transform: translateX(0) !important; }
}

 * 
 * 
 * 
 * 
 * ================================================= */
/* AJUSTES GENERALES DE CARD (Contenedor principal)  */
/* ================================================= */
.card {
    position: relative;
    /* ANCHO AJUSTADO: Aumentamos el ancho para dar espacio a títulos más largos */
    width: 220px; 
    height: 254px; 
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: space-between; 
    padding: 18px 12px; 
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    /* ASUMIMOS que 'Bender' está cargada y aplicada aquí */
    font-family: 'Bender', sans-serif; 
    gap: 0;
}

/* * NOTA: Mantén aquí el resto de tu CSS para el efecto neón y hover 
 * (clases .card::before, .card::after, .card:hover::before, etc.) 
 * NO es necesario repetirlas si ya funcionan.
 */

/* ================================================= */
/* AJUSTES DE LOGO (Discreto)            */
/* ================================================= */

.card-logo-container {
    display: block;
    margin-bottom: 5px;
    opacity: 0.8;
}

.card-logo {
    width: 70px;
    height: auto;
    filter: brightness(150%) saturate(120%);
}

/* ================================================= */
/* AJUSTES DE JERARQUÍA DE TEXTO         */
/* ================================================= */

.card-title-main {
    /* Título principal: Grande, bold, neón primario */
    font-size: 20px;
    font-weight: 700;
    color: #40c9ff; 
    text-transform: uppercase;
    /* Fuente: Aplicamos explícitamente y limpiamos el error de sintaxis */
    font-family: 'Bender', sans-serif; 
    line-height: 1.2;
    margin-top: 50px; 
    margin-bottom: 5px;
}

.card-title-sub {
    /* Subtítulo / Aclaración: Más pequeño y gris sutil */
    font-size: 14px;
    font-weight: 500;
    color: #a0a0a0; 
    text-transform: uppercase;
    margin-top: 0;
    /* Margen reducido, ya que el botón reemplaza el "Diseño Personalizado" */
    margin-bottom: 25px; 
}



.card {
    position: relative;
    width: 200px; /* Reducimos el ancho para que sea más compacto que 220px */
    height: 300px; /* Reducimos la altura para compactar los espacios vacíos */
    background-color: #000;
    display: flex;
    flex-direction: column;
    
    /* CAMBIO CLAVE 1: Usamos space-between para distribuir el contenido */
    justify-content: space-between; 
    
    padding: 10px; /* Reducimos el padding interior */
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    font-family: 'Bender', sans-serif;
    overflow: hidden; 
}

/* ================================================= */
/* 1. ANIMACIÓN DEL BORDE (Corregido el tamaño del pseudo-elemento) */
/* ================================================= */

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -5px; /* Mantenemos este offset para la animación de rotación */
    margin: auto;
    width: 210px; /* AJUSTADO: Ancho = 200px (card) + 10px (offset) */
    height: 310px; /* AJUSTADO: Altura = 300px (card) + 10px (margen extra para el glow) */
    border-radius: 10px;
    background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
    z-index: -10;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* ... Mantener el resto de tu CSS original para .card::after, :hover::after, :hover::before ... */
/* (Asegúrate de que la clase :hover::before mantenga el transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);) */


/* ================================================= */
/* 2. LOGO (CORRECCIÓN DE ALINEACIÓN) */
/* ================================================= */

.card-logo-container-final {
    width: 100%;
    margin-bottom: 5px; /* Reducimos el margen inferior */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); 
    padding-bottom: 5px;
    
    /* CORRECCIÓN CLAVE: Centramos el contenido dentro del contenedor flex */
    display: flex;
    justify-content: center; 
    align-items: center;
}

.logo-img-final {
    width: 75px; 
    opacity: 0.9;
    filter: drop-shadow(0 0 5px #40c9ff); 
    transition: transform 0.3s ease;
}
/* ... Mantener el hover del logo ... */

/* 3. TEXTOS (Corrección de Espacios) */
/* ================================================= */

.card-text-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; /* Aseguramos que el bloque de texto esté centrado horizontalmente */
    
    /* CAMBIO CLAVE: Agregamos un margen negativo para compactar el espacio verticalmente */
    margin-top: -30px; 
    margin-bottom: -30px;
}

.card-title-main-final {
    /* Mantenemos tus estilos de tamaño y color */
    font-size: 24px;
    font-weight: 700;
    color: #40c9ff; 
    font-family: 'Bender', sans-serif;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 5px;
}

.card-subtitle-final {
    font-size: 16px;
    font-weight: 400;
    color: #a0a0a0;
    text-transform: uppercase;
}

/* ================================================= */
/* 4. BOTÓN CTA (Alineación y Espacio) */
/* ================================================= */
.cta-button-final {
    display: block;
    width: 100%;
    padding: 12px 0;
    /* ... (resto de estilos de color y animación) ... */
    margin-top: 15px; /* Reducimos el margen superior */
}
/* ... Mantener el hover del botón ... */

  100% {
    fill: white;
  }
}
/* From Uiverse.io by Praashoo7 */ 

:root{
  --pad-size: 260px;         /* diámetro del disco */
  --btn-size: 78px;          /* diámetro de cada botón */
  --bg-outer: #2b2b2b;       /* fondo de la página/módulo */
  --bg-pad: #1c1c1f;         /* disco central */
  --bg-btn: #222429;         /* botón base */
  --ring: rgba(255,255,255,.08);
  --shadow: rgba(0,0,0,.45);
}

.pad-social{
  position: relative;
  width: var(--pad-size);
  height: var(--pad-size);
  margin: 24px auto;
  filter: drop-shadow(0 12px 24px var(--shadow));
}

.pad-base{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120px 120px at 35% 35%, rgba(255,255,255,.05), transparent 60%),
    var(--bg-pad);
  border: 1px solid var(--ring);
}

/* Botón base */
.pad-btn{
  --glow: rgba(255,255,255,.15);
  position: absolute;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  background: radial-gradient(60px 60px at 40% 35%, rgba(255,255,255,.06), transparent 60%), var(--bg-btn);
  display: grid;
  place-items: center;
  text-decoration: none;
  outline: none;
  box-shadow:
    0 10px 14px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  border: 1px solid var(--ring);
}

.pad-btn svg{
  width: 46px; height: 46px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}

/* posiciones (en cruz) */
.btn-instagram{ top: 12px; left: 50%; transform: translate(-50%,0); }
.btn-whatsapp{  top: 50%; right: 12px; transform: translate(0,-50%); }
.btn-facebook{  top: 50%; left: 12px;  transform: translate(0,-50%); }
.btn-tiktok{    bottom: 12px; left: 50%; transform: translate(-50%,0); }

/* hover/focus: levanta, agrega glow del color de marca */
.pad-btn:hover,
.pad-btn:focus-visible{
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 14px 20px var(--shadow),
    0 0 0 2px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* glows por marca */
.btn-instagram{ --glow: #ff4fa680; }
.btn-whatsapp{  --glow: #25d36680; }
.btn-facebook{  --glow: #1877f280; }
.btn-tiktok{    --glow: #25f4ee80; }

/* accesibilidad teclado */
.pad-btn:focus-visible{
  outline: 0;
  box-shadow:
    0 14px 20px var(--shadow),
    0 0 0 3px var(--glow),
    0 0 0 6px rgba(255,255,255,.12);
}

/* Resp. – reduce tamaño en pantallas chicas */
@media (max-width: 420px){
  :root{ --pad-size: 220px; --btn-size: 68px; }
  .pad-btn svg{ width: 40px; height: 40px; }
}

/* Resp. – integra bien en fondos oscuros */
body{ background:#2f2f31; } /* quitar si no querés tocar el fondo global */

/* Animación opcional suave (neón latente) */
@media (prefers-reduced-motion: no-preference){
  .pad-base{ animation: pulse 4s ease-in-out infinite; }
  @keyframes pulse{
    0%,100%{ box-shadow: 0 0 0 rgba(255,255,255,0); }
    50%{ box-shadow: 0 0 24px rgba(255,255,255,.06) inset; }
  }
}
:root{
  --pad-size: 260px;
  --btn-size: 78px;
  --bg-pad: #1c1c1f;
  --bg-btn: #222429;
  --ring: rgba(255,255,255,.08);
  --shadow: rgba(0,0,0,.45);
  --txt: #dfe2f1;
}

.pad-social{
  position: relative;
  width: var(--pad-size);
  height: var(--pad-size);
  margin: 24px auto;
  filter: drop-shadow(0 12px 24px var(--shadow));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

.pad-base{
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120px 120px at 35% 35%, rgba(255,255,255,.06), transparent 60%),
    var(--bg-pad);
  border: 1px solid var(--ring);
}

/* Micro-CTA central */
.pad-badge{
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  color: var(--txt);
  font-size: .9rem;
  opacity: .8;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ring);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Botón base */
.pad-btn{
  --glow: rgba(255,255,255,.15);
  position: absolute;
  width: var(--btn-size); height: var(--btn-size);
  border-radius: 50%;
  background: radial-gradient(60px 60px at 40% 35%, rgba(255,255,255,.06), transparent 60%), var(--bg-btn);
  display: grid; place-items: center;
  text-decoration: none; outline: none;
  border: 1px solid var(--ring);
  box-shadow: 0 10px 14px var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor: pointer;
}

.pad-btn svg{ width: 46px; height: 46px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* Posiciones */
.btn-instagram{ top:12px; left:50%; transform:translate(-50%,0); }
.btn-whatsapp{  top:50%; right:12px; transform:translate(0,-50%); }
.btn-facebook{  top:50%; left:12px;  transform:translate(0,-50%); }
.btn-tiktok{    bottom:12px; left:50%; transform:translate(-50%,0); }

/* Hover / Foco */
.pad-btn:hover,
.pad-btn:focus-visible{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 20px var(--shadow), 0 0 0 2px var(--glow), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Glows de marca */
.btn-instagram{ --glow:#ff4fa680; }
.btn-whatsapp{  --glow:#25d36680; }
.btn-facebook{  --glow:#1877f280; }
.btn-tiktok{    --glow:#25f4ee80; }

/* === Labels / Tooltips === */
.pad-btn::after{
  content: attr(data-label);
  position: absolute;
  font-size: .8rem; line-height: 1;
  color: #e9ecff;
  background: rgba(19,19,22,.7);
  padding: .35rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--ring);
  opacity: 0; transform: translateY(2px) scale(.98);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Ubicación de cada label */
.btn-instagram::after{ bottom: calc(100% + 8px); left: 50%; transform: translate(-50%,2px) scale(.98); }
.btn-whatsapp::after{  left: calc(100% + 8px); top: 50%; transform: translate(2px,-50%) scale(.98); }
.btn-facebook::after{  right: calc(100% + 8px); top: 50%; transform: translate(-2px,-50%) scale(.98); }
.btn-tiktok::after{    top: calc(100% + 8px); left: 50%; transform: translate(-50%,-2px) scale(.98); }

/* Mostrar en hover/focus */
.pad-btn:hover::after,
.pad-btn:focus-visible::after{ opacity: 1; transform: translate(0,0) scale(1); }

/* Mobile: labels siempre visibles */
@media (max-width: 480px){
  .pad-social{ width: 240px; height: 240px; }
  .pad-btn{ width: 70px; height: 70px; }
  .pad-btn svg{ width: 40px; height: 40px; }
  .pad-btn::after{ opacity: 1; transform: none; font-size: .75rem; }
  .pad-badge{ font-size: .8rem; }
}

/* Respeta accesibilidad de movimiento */
@media (prefers-reduced-motion:no-preference){
  .pad-base{ animation: pulse 4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow:none; } 50%{ box-shadow: inset 0 0 24px rgba(255,255,255,.06); } }
}
/* Contenedor para que las tres tarjetas estén una al lado de la otra y centradas */
.cards-container {
    display: flex;
    justify-content: center; /* Centra las tarjetas horizontalmente */
    flex-wrap: wrap; /* Permite que las tarjetas se apilen en móviles */
    gap: 30px; /* Espacio entre las tarjetas */
    padding: 40px 0;
}

/* TARJETA GEEK */ /* ==================== */ /* ============================ */ /* CONTENEDOR GENERAL */ /* ============================ */ .giftcards-section { padding: 40px 20px; width: 100%; display: flex; justify-content: center; } .giftcards-grid { display: flex; justify-content: center; align-items: flex-start; gap: 32px; flex-wrap: wrap; max-width: 1100px; } /* ============================ */ /* CARD GEEK */ /* ============================ */ .card-geek-v2 { position: relative; width: 300px; min-height: 285px; padding: 22px; border-radius: 18px; background: radial-gradient(circle at top left, rgba(64, 201, 255, 0.15), transparent 55%), radial-gradient(circle at bottom right, rgba(232, 28, 255, 0.18), transparent 55%), #05000b; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; color: #fff; font-family: 'Bender', sans-serif; cursor: pointer; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); transition: 0.35s ease; } /* Borde neón animado */ .card-geek-v2::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, #40c9ff, #e81cff, #40c9ff); background-size: 200% 200%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.7; filter: drop-shadow(0 0 12px rgba(64, 201, 255, 0.7)); transition: 0.35s ease; z-index: 0; } .card-geek-v2:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 25px rgba(64, 201, 255, 0.8), 0 0 40px rgba(232, 28, 255, 0.6); } .card-geek-v2:hover::before { animation: neonGlow 3s linear infinite; opacity: 1; } @keyframes neonGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ============================ */ /* LOGO */ /* ============================ */ .card-logo-v2 { z-index: 1; } .logo-img-v2 { width: 100px; filter: drop-shadow(0 0 6px #40c9ff); transition: 0.35s ease; } .card-geek-v2:hover .logo-img-v2 { transform: translateY(-4px) scale(1.09); filter: drop-shadow(0 0 12px #e81cff); } /* ============================ */ /* TEXTOS */ /* ============================ */ .card-info-v2 { z-index: 1; } .card-tag-v2 { font-size: 13px; color: #e81cff; letter-spacing: 2px; margin-bottom: 6px; } .card-title-main-v2 { font-size: 25px; font-weight: 700; color: #40c9ff; margin-bottom: 6px; text-transform: uppercase; } .card-subtitle-v2 { font-size: 15px; color: #c8c8c8;  } /* ============================ */ /* BOTÓN */ /* ============================ */ .cta-button-v2 {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 12px 0;

    background-color: #0a0412; /* Fondo oscuro gamer */
    color: #40c9ff;
    font-size: 15px;
    font-family: 'Bender', sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    text-align: center;
    border: 2px solid transparent;
border-radius: 999px;

    background-image:
        linear-gradient(#0a0412, #0a0412),
        linear-gradient(135deg, #e81cff, #40c9ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;

    box-shadow: 0 0 10px rgba(232, 28, 255, 0.4);
    transition: 0.35s ease;
    z-index: 1;
}

/* HOVER */
.card-geek-v2:hover .cta-button-v2 {
    color: #fff;
    background-image:
        linear-gradient(#0f0620, #0f0620),
        linear-gradient(135deg, #40c9ff, #e81cff);

    box-shadow: 0 0 18px #40c9ff, 0 0 28px #e81cff;
    transform: translateY(2px);
} /* ============================ */ /* RESPONSIVE */ /* ============================ */ @media (max-width: 768px) { .card-geek-v2 { width: 90%; max-width: 340px; } }
/* .neon-icon-wrapper {
    text-align: center;
    padding: 20px;
    /* Ajusta el padding/margen según dónde lo vayas a colocar */
}/* =========================================================
   Geek Tattoo - Hero animado (FULL WIDTH + BENDER + FONDO)
   ========================================================= */

/* 1) “Breakout” para salir de contenedores (Elementor/WPBakery/Theme) */

.gt-breakout{
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) Sección base */
.gt-hero-animated{
  position: relative;
  overflow: hidden;

  /* altura tipo banner wide */
  min-height: clamp(500px, 42vh, 520px);

  /* Fondo más alineado a Geek Tattoo (oscuro + neón) */
  background:
    radial-gradient(900px 380px at 18% 55%, rgba(255, 0, 127, .18), transparent 60%),
    radial-gradient(900px 380px at 82% 50%, rgba(0, 214, 247, .14), transparent 58%),
    linear-gradient(90deg, #07030f 0%, #120027 50%, #07030f 100%);
}

/* overlay para bajar un poco el video y mejorar contraste del texto */
.gt-hero-animated::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  pointer-events:none;
  z-index: 0;
}

/* 3) Marquee de texto */
.gt-marquee{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(14px, 2.6vh, 26px);
  z-index: 1;
  pointer-events:none;
  transform: translateZ(0);
}

.gt-marquee__row{
  width: 120%;
  left: -10%;
  position: relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  opacity: .58;
}

.gt-marquee__track{
  display:flex;
  align-items:center;
  gap:clamp(18px, 3.2vw, 44px);
  white-space: nowrap;
  will-change: transform;
  animation: gt-marquee-left 30s linear infinite;
}

.gt-marquee__row--a .gt-marquee__track{ animation-duration: 32s; }
.gt-marquee__row--b .gt-marquee__track{ animation-name: gt-marquee-right; animation-duration: 36s; opacity:.86; }
.gt-marquee__row--c .gt-marquee__track{ animation-duration: 28s; opacity:.70; }

/* 4) Tipografía: forzamos BENDER (muy probable que haya override del theme) */
.gt-hero-animated,
.gt-hero-animated *{
  font-family:  "BENDER", "Bender", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.gt-marquee__track span{
  /* Texto más chico que tu versión anterior */
  font-size: clamp(16px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  color: transparent;
  -webkit-text-stroke: 1.0px rgba(255,255,255,.55);

  /* Glow sutil estilo neon */
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.28))
    drop-shadow(0 0 10px rgba(255,0,127,.10))
    drop-shadow(0 0 10px rgba(0,214,247,.08));
}

.gt-hero-animated__center{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  z-index: 2;
  padding: clamp(18px, 3vw, 42px);
}

.gt-hero-animated__videoWrap{
  width: min(250px, 62vw);
  aspect-ratio: 9 / 16;       /* look vertical como en el ejemplo */
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.35);

  /* “glass” sutil + separación del fondo */
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
}

.gt-hero-animated__video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
/* 6) Animaciones */
@keyframes gt-marquee-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes gt-marquee-right{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* 7) Responsive fino */
@media (max-width: 768px){
  .gt-hero-animated{ min-height: 320px; }
  .gt-hero-animated__videoWrap{
    width: 94vw;
    aspect-ratio: 16 / 8;
  }
  .gt-marquee__track span{
    font-size: clamp(20px, 4.6vw, 44px);
    -webkit-text-stroke: 1.4px rgba(255,255,255,.55);
  }
}
html, body{
  overflow-x: hidden;
}

/* 8) Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .gt-marquee__track{ animation: none !important; transform: translateX(0) !important; }
}
//////////////////
///////////////////////////


:root {
    --geek-cyan: #00f2ff;
    --geek-pink: #ff007a;
    --geek-purple: #7000ff;
    --geek-bg: #0a0a0a;
    --geek-card: #121212;
}

/* Contenedor Principal */
.gt-coverup-grid {
    background-color: var(--geek-bg);
	    padding: 80px 20px;
    font-family: 'Din', sans-serif; /* Tipografía para textos */
    color: #ffffff;
}

.gt-coverup-grid__header {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gt-coverup-grid__kicker {
    font-family: 'Bender', sans-serif; /* Tipografía para títulos */
    color: var(--geek-cyan);
    font-size: 0.8rem;
    letter-spacing: 4px;
    margin-bottom: 10px;
	display: inline-block;
}

.gt-coverup-grid__title {
    font-family: 'Bender', sans-serif;
    font-size: 2.8rem;
    text-transform: none; /* Quitamos el uppercase */
    margin: 0;
    color: #fff;
    line-height: 1.2;
}

.gt-coverup-grid__subtitle {
    text-align: center;
    color: #888;
    font-size: 0.95rem;
    margin-top: 15px;
    max-width: 600px;
    line-height: 1.6;
}

/* Grid System */
.gt-coverup-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 20px auto 0;
}

/* Card Estilo Geek */
.gt-coverup-grid__card {
    background: var(--geek-card);
    border: 1px solid #222;
    border-radius: 4px;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.gt-coverup-grid__card:hover {
    transform: translateY(-8px);
    border-color: #333;
}

/* Header de la Card */
.gt-coverup-grid__top {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1a1a;
    font-family: 'Bender', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.gt-coverup-grid__badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* El círculo solo aparece aquí, en las cards */
.gt-coverup-grid__dot {
    width: 7px;
    height: 7px;
    background: var(--geek-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--geek-cyan);
    animation: blink 1.5s infinite;
}

/* Imagen Vertical Mejorada */
.gt-coverup-grid__media {
    position: relative;
    width: 100%;
    height: 550px; /* Aumentado para mejor visibilidad vertical */
    overflow: hidden;
    background: #000;
}

.gt-coverup-grid__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    opacity: 0.85;
}

.gt-coverup-grid__card:hover img {
    transform: scale(1.08);
    opacity: 1;
}

/* Escaneo Láser */
.gt-coverup-grid__scan {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(0, 242, 255, 0.15), transparent);
    border-bottom: 1px solid var(--geek-cyan);
    z-index: 2;
    pointer-events: none;
}

.gt-coverup-grid__card:hover .gt-coverup-grid__scan {
    animation: scan 2.5s infinite ease-in-out;
}

/* Caption y Títulos H3 Achicados */
.gt-coverup-grid__caption {
    padding: 25px;
    border-top: 1px solid #222;
    background: #121212;
}

.gt-coverup-grid__h3 {
    font-family: 'Bender', sans-serif !important;
    font-size: 1.1rem !important; /* Achicado según pedido */
    margin: 0 0 10px 0 !important;
}

.gt-coverup-grid__p {
    font-family: 'Din', sans-serif;
    font-size: 0.9rem;
    color: #a0a0a0;
    line-height: 1.5;
    margin: 0;
}

/* Colores por Etapa */
.gt-coverup-grid__card--pink .gt-coverup-grid__dot { background: var(--geek-pink); box-shadow: 0 0 10px var(--geek-pink); }


.gt-coverup-grid__card--mix .gt-coverup-grid__dot { background: var(--geek-purple); box-shadow: 0 0 10px var(--geek-purple); }
.gt-coverup-grid__card--mix .gt-coverup-grid__scan { border-color: var(--geek-purple); }

/* Animaciones */
@keyframes scan {
    0% { top: -100%; }
    100% { top: 100%; }
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Responsive */
@media (max-width: 900px) {
    .gt-coverup-grid__cards { grid-template-columns: 1fr; }
    .gt-coverup-grid__media { height: 450px; }
    .gt-coverup-grid__title { font-size: 2rem; }
}
///////////////////