/*
 * setdevelopers — Custom CSS
 * ==========================
 * Solo para lo que Tailwind no cubre directamente.
 * Mantener este archivo mínimo.
 */

/* Smooth scroll global */
html {
  scroll-behavior: smooth;
}

/* Gradiente de texto azul — para destacar palabras en headings */
.text-gradient {
  background: linear-gradient(135deg, #04A9F4, #0284C7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Borde decorativo con color de marca */
.border-brand {
  border-color: #04A9F4;
}

/* Fondo con gradiente sutil para secciones alternadas */
.bg-section-alt {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
}

/* Badge estilo pill para etiquetas de sección */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: #E0F2FE;
  color: #0284C7;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Animación sutil en hover de cards */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(4, 169, 244, 0.15);
}

/* Botón chat flotante — animación de pulso */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(4, 169, 244, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(4, 169, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 169, 244, 0); }
}

.chat-bubble-pulse {
  animation: pulse-ring 2s ease-out infinite;
}

/* Línea decorativa horizontal con degradado */
.divider-brand {
  height: 2px;
  background: linear-gradient(90deg, transparent, #04A9F4, transparent);
  border: none;
  margin: 0;
}

/* ============================================================
   HERO — Fondo con gradiente y profundidad
============================================================ */

.hero-bg {
  background:
    radial-gradient(ellipse 65% 55% at 75% -5%, rgba(4, 169, 244, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 5% 90%,  rgba(2, 132, 199, 0.05) 0%, transparent 55%),
    #ffffff;
}

/* Patrón de puntos decorativo */
.hero-dots {
  background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ============================================================
   GARANTÍAS — Sección oscura
============================================================ */

.garantias-bg {
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%,  rgba(4, 169, 244, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 10% 80%,  rgba(2, 132, 199, 0.08) 0%, transparent 50%),
    #07101E;
}

/* ============================================================
   MARQUEE — Carrusel infinito de logos
============================================================ */

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-left 28s linear infinite;
}

.marquee-track-reverse {
  display: flex;
  width: max-content;
  animation: marquee-right 36s linear infinite;
}

/* Pausa al hacer hover en la fila */
.marquee-wrapper:hover .marquee-track,
.marquee-wrapper:hover .marquee-track-reverse {
  animation-play-state: paused;
}

/* Máscara de degradado en los bordes */
.marquee-fade {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}


/* ============================================================
   ANIMACIONES DE ENTRADA — Scroll triggered
============================================================ */

[data-animate] {
  opacity: 0;
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="up"]    { transform: translateY(28px); }
[data-animate="left"]  { transform: translateX(-28px); }
[data-animate="right"] { transform: translateX(28px); }
[data-animate="scale"] { transform: scale(0.94); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Delays escalonados */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }


/* ============================================================
   FLOAT — elementos decorativos flotantes
============================================================ */

@keyframes float-y {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-8px); }
}

.float-y      { animation: float-y 4s ease-in-out infinite; }
.float-y-slow { animation: float-y 6s ease-in-out infinite 1.2s; }


/* ============================================================
   SHIMMER — efecto de brillo en botones CTA al hover
============================================================ */

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-15deg);
  opacity: 0;
}

.btn-shimmer:hover::after {
  opacity: 1;
  animation: shimmer-slide 0.55s ease forwards;
}

@keyframes shimmer-slide {
  from { left: -80%; }
  to   { left: 130%; }
}


/* ============================================================
   SCANLINE — efecto en paneles de código
============================================================ */

.code-panel {
  position: relative;
  overflow: hidden;
}

.code-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  top: -100px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(4, 169, 244, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: scanline-move 5s linear infinite;
}

@keyframes scanline-move {
  from { top: -100px; }
  to   { top: 110%;   }
}


/* ============================================================
   CURSOR — parpadeo en líneas de terminal
============================================================ */

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #04A9F4;
  vertical-align: middle;
  margin-left: 3px;
  border-radius: 1px;
  animation: cursor-blink 1.1s ease-in-out infinite;
}


/* ============================================================
   FEATURE ITEM — hover en "Lo que resolvemos"
============================================================ */

.feature-item {
  transition: transform 0.22s ease;
}

.feature-item:hover {
  transform: translateX(5px);
}

.feature-icon {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}

.feature-item:hover .feature-icon {
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(4, 169, 244, 0.4);
}


/* ============================================================
   METOD ITEM — hover deslizante en Metodología
============================================================ */

.metod-item {
  transition: background-color 0.22s ease, padding-left 0.22s ease, border-radius 0.22s ease;
}

.metod-item:hover {
  padding-left: 0.75rem;
  background-color: rgba(4, 169, 244, 0.04);
  border-radius: 1rem;
}

.metod-icon {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.metod-item:hover .metod-icon {
  background-color: #04A9F4;
  box-shadow: 0 0 16px rgba(4, 169, 244, 0.35);
}

.metod-icon svg {
  transition: color 0.25s ease;
}

.metod-item:hover .metod-icon svg {
  color: #ffffff !important;
}


/* ============================================================
   STAT CARD — hover mejorado en Garantías
============================================================ */

.stat-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(4, 169, 244, 0.22);
  border-color: rgba(4, 169, 244, 0.4) !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
}


/* ============================================================
   HERO CODE PANEL — Typing line reveal
============================================================ */

[data-typed-line] {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#hero-result {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}


/* ============================================================
   VENTAJA ICON — hover en strip de ventajas del hero
============================================================ */

.ventaja-icon {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ventaja-icon:hover {
  transform: scale(1.12);
  box-shadow: 0 0 20px rgba(4, 169, 244, 0.45);
}