/* =================================================================== */
/* ===    FASTALK - PRODUCT PAGE STYLES (product.css)              === */
/* ===    Estilos específicos para la página de Plataforma         === */
/* =================================================================== */

/* -------------------------------- */
/* 1. HERO ESPECÍFICO DE PRODUCTO   */
/* -------------------------------- */
.page-header-section {
  padding-top: 160px;
  /* Espacio para el navbar fijo */
  padding-bottom: 80px;
  background-color: var(--color-bg-light);
  position: relative;
  overflow: hidden;
}

.page-header-section--grid-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(74, 58, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(74, 58, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  z-index: 0;
  pointer-events: none;
}

/* Badge Premium en el Hero o Secciones */
.badge-premium {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(74, 58, 255, 0.1);
  color: var(--color-accent-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(74, 58, 255, 0.2);
}

/* -------------------------------- */
/* 2. LAYOUTS DE COLUMNAS           */
/* -------------------------------- */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 992px) {
  .two-column-layout {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  /* Clase para invertir el orden en desktop (Texto a la derecha) */
  .two-column-layout.reversed .column-text {
    order: 2;
  }

  .two-column-layout.reversed .column-visual {
    order: 1;
  }
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.feature-list li .material-icons {
  color: var(--color-accent-primary);
  background: var(--color-accent-subtle-bg);
  border-radius: 50%;
  padding: 4px;
  font-size: 18px;
  margin-top: 2px;
}

.feature-image {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-light-lg);
  border: 1px solid var(--color-border-light);
}

/* -------------------------------- */
/* 3. SECCIÓN VOZ (Sound Wave)      */
/* -------------------------------- */
.interactive-voice-demo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-screen {
  width: 100%;
  max-width: 400px;
  height: 250px;
  background: linear-gradient(135deg, #1d2b48, #111522);
  border-radius: var(--border-radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(74, 58, 255, 0.2);
  position: relative;
  overflow: hidden;
}

/* Círculo de fondo animado */
.demo-screen::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(74, 58, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 3s infinite ease-in-out;
}

.demo-status {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  z-index: 2;
}

.sound-wave {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  z-index: 2;
}

.sound-wave span {
  display: block;
  width: 6px;
  height: 100%;
  background: #fff;
  border-radius: 3px;
  animation: wave 1.2s ease-in-out infinite;
}

.sound-wave span:nth-child(1) {
  animation-delay: 0.0s;
  height: 15px;
}

.sound-wave span:nth-child(2) {
  animation-delay: 0.1s;
  height: 30px;
}

.sound-wave span:nth-child(3) {
  animation-delay: 0.2s;
  height: 40px;
}

.sound-wave span:nth-child(4) {
  animation-delay: 0.3s;
  height: 25px;
}

.sound-wave span:nth-child(5) {
  animation-delay: 0.4s;
  height: 15px;
}

@keyframes wave {

  0%,
  100% {
    transform: scaleY(0.5);
    opacity: 0.5;
  }

  50% {
    transform: scaleY(1.2);
    opacity: 1;
    box-shadow: 0 0 10px var(--color-accent-primary);
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* -------------------------------- */
/* 4. SECCIÓN KIOSCO (Showcase)     */
/* -------------------------------- */
.elegant-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.kiosk-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.showcase-item {
  background: rgba(255, 255, 255, 0.03);
  /* Fondo sutil en modo dark */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  transition: transform 0.3s ease;
}

.showcase-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.06);
}

.showcase-item h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.showcase-item p {
  color: var(--color-accent-secondary);
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.showcase-item p::before {
  content: 'mic';
  font-family: 'Material Icons';
  font-style: normal;
  font-size: 16px;
}

/* La tarjeta visual simulada dentro del kiosco */
.kiosk-card-preview {
  background: #fff;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.kiosk-card-preview img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.kiosk-card-preview .card-content {
  padding: 1rem;
}

.kiosk-card-preview h5 {
  color: var(--color-text-primary);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.kiosk-card-preview span {
  color: var(--color-accent-primary);
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.75rem;
}

.kiosk-card-preview .card-details {
  display: flex;
  gap: 1rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 0.75rem;
}

.kiosk-card-preview .card-details span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin: 0;
}

.kiosk-card-preview .card-details .material-icons {
  font-size: 14px;
}

/* -------------------------------- */
/* 5. MULTICANAL & FUNCTION CALLING */
/* -------------------------------- */
.channel-highlights {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.channel-highlight-item {
  display: flex;
  gap: 1rem;
  background: #fff;
  padding: 1.25rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-light-sm);
  transition: transform 0.2s;
}

.channel-highlight-item:hover {
  transform: translateX(5px);
  border-color: var(--color-accent-primary);
}

.channel-highlight-item .material-icons {
  font-size: 32px;
  color: var(--color-accent-primary);
}

.channel-highlight-item h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

.channel-highlight-item p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Function Calling Grid (Dark Section) */
.possibilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.possibility-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  transition: all 0.3s ease;
}

.possibility-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-5px);
  border-color: var(--color-accent-primary);
}

.possibility-card .card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.possibility-card .material-icons {
  font-size: 28px;
  color: var(--color-accent-secondary);
}

.possibility-card h4 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.possibility-card p {
  color: var(--color-text-medium);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* -------------------------------- */
/* 6. PERSONALIZACIÓN               */
/* -------------------------------- */
.instruction-cards-mini {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.mini-card {
  flex: 1;
  min-width: 200px;
  background: #fff;
  padding: 1rem;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-light-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.mini-card .material-icons {
  color: var(--color-accent-primary);
  vertical-align: middle;
  margin-right: 0.5rem;
}

.color-picker-visual {
  background: #fff;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-light-lg);
  border: 1px solid var(--color-border-light);
  padding: 2rem;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.mockup-header img {
  height: 30px;
  margin-bottom: 2rem;
}

.mockup-chat {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.bubble {
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 0.9rem;
  max-width: 80%;
  text-align: left;
}

.bubble.user {
  background: #f0f2f7;
  color: var(--color-text-primary);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.bubble.assistant {
  background: var(--color-accent-primary);
  color: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.color-swatches {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s;
}

.swatch:hover {
  transform: scale(1.2);
}

.swatch.active {
  border-color: #000;
  box-shadow: 0 0 0 2px #fff inset;
}

/* -------------------------------- */
/* 7. ANALÍTICA (Dashboard)         */
/* -------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-card {
  background: #1c202d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent-primary);
  background: #232736;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(74, 58, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
}

.metric-icon .material-icons {
  color: var(--color-accent-secondary);
  font-size: 20px;
}

.metric-value {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  font-family: 'Poppins', sans-serif;
}

.metric-label {
  color: var(--color-text-medium);
  font-size: 0.85rem;
}

/* Ajustes menores para responsividad general en móviles muy pequeños */
@media (max-width: 576px) {
  .page-header-section {
    padding-top: 120px;
  }

  .possibilities-grid,
  .kiosk-showcase {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================== */
/* ===    ESTILOS SECCIÓN VOZ IA (NEXT GEN / NEURAL)               === */
/* =================================================================== */

/* 1. GRID DE ESPECIFICACIONES TÉCNICAS */
.tech-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.tech-spec-item {
  border-left: 3px solid var(--color-accent-primary);
  padding-left: 1rem;
}

.spec-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.spec-label {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 2. TARJETA DE INTERFAZ DE VOZ (VISUAL) */
.voice-interface-card {
  background: #0f111a;
  /* Fondo muy oscuro */
  border-radius: 30px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 450px;
}

/* Fondo sutil degradado */
.voice-interface-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(74, 58, 255, 0.15), transparent 60%);
  pointer-events: none;
}

/* Header: Live & Timer */
.interface-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2ed573;
}

.blink-dot {
  width: 8px;
  height: 8px;
  background-color: #2ed573;
  border-radius: 50%;
  animation: blink 2s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* 3. EL ORBE NEURAL (ANIMACIÓN PRINCIPAL) */
.neural-orb-container {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.neural-orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      #4a3aff,
      #7a70ff,
      #ff4757,
      #4a3aff);
  filter: blur(15px);
  animation: rotate-orb 4s linear infinite;
  opacity: 0.9;
}

.neural-orb-glow {
  position: absolute;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(74, 58, 255, 0.4) 0%, transparent 70%);
  filter: blur(20px);
  animation: pulse-orb 2s ease-in-out infinite alternate;
}

@keyframes rotate-orb {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-orb {
  from {
    transform: scale(0.9);
    opacity: 0.6;
  }

  to {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 4. TARJETA DE TRANSCRIPCIÓN FLOTANTE */
.transcription-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1rem;
  width: 100%;
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.transcription-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transcription-icon .material-icons {
  font-size: 18px;
  color: #fff;
}

.transcription-text p {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* 5. CONTROLES DE LLAMADA */
.call-controls {
  display: flex;
  gap: 1.5rem;
  z-index: 2;
}

.control-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.control-btn .material-icons {
  color: #fff;
  font-size: 24px;
}

.control-btn.end {
  background: #ff4757;
  transform: scale(1.1);
}

.control-btn.end:hover {
  background: #ff6b81;
}

/* Ajustes Responsive */
@media (max-width: 768px) {
  .tech-specs-grid {
    grid-template-columns: 1fr;
    /* Una columna en móvil */
    gap: 1rem;
  }

  .voice-interface-card {
    min-height: 400px;
    padding: 1.5rem;
  }
}

/* =================================================================== */
/* ===    ESTILOS SECCIÓN KIOSCO (TABLET MOCKUPS & UI)             === */
/* =================================================================== */

.kiosk-showcase-premium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

/* El "Dispositivo" Tablet */
.kiosk-device {
  background: #111522;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s;
}

.kiosk-device:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(74, 58, 255, 0.2);
  border-color: rgba(74, 58, 255, 0.3);
}

/* Barra de Escucha (Prompt) */
.kiosk-voice-bar {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mic-pulse {
  color: #ff4757;
  font-size: 20px;
  animation: pulse-mic 1.5s infinite;
  text-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

.mic-pulse-ai {
  color: #7a70ff;
  font-size: 20px;
  animation: pulse-ai 2s infinite;
}

@keyframes pulse-mic {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes pulse-ai {

  0%,
  100% {
    transform: rotate(0deg);
    text-shadow: 0 0 10px rgba(122, 112, 255, 0.5);
  }

  50% {
    transform: rotate(180deg);
    text-shadow: 0 0 20px rgba(122, 112, 255, 0.8);
  }
}

.voice-text {
  color: var(--color-text-medium);
  font-style: italic;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
}

/* Pantalla y Contenido (UI) */
.kiosk-screen {
  position: relative;
  background: #fff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.screen-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s;
}

.kiosk-device:hover .screen-image {
  transform: scale(1.05);
}

.screen-ui {
  padding: 1.5rem;
  background: #fff;
  position: relative;
  z-index: 2;
  /* Para quedar encima de la imagen en hover */
}

/* Etiquetas (Tags) */
.ui-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 1rem;
  background: rgba(74, 58, 255, 0.1);
  color: var(--color-accent-primary);
}

.ui-tag.success {
  background: rgba(46, 213, 115, 0.1);
  color: #2ed573;
}

.ui-tag.ai-gen {
  background: rgba(155, 89, 182, 0.1);
  color: #9b59b6;
}

/* Tipografía de la Tarjeta */
.ui-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.ui-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 1rem;
}

/* Especificaciones con Iconos */
.ui-specs {
  display: flex;
  gap: 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 1.5rem;
}

.ui-specs span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ui-specs .material-icons {
  font-size: 16px;
  color: var(--color-text-tertiary);
}

/* Botón de Acción del Kiosco */
.kiosk-action-btn {
  width: 100%;
  padding: 12px;
  background: #111522;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.kiosk-action-btn:hover {
  background: var(--color-accent-primary);
  transform: translateY(-2px);
}

.kiosk-action-btn.variant-ai {
  background: #9b59b6;
}

.kiosk-action-btn.variant-ai:hover {
  background: #8e44ad;
}

@media (max-width: 768px) {
  .kiosk-showcase-premium {
    grid-template-columns: 1fr;
  }
}

/* =================================================================== */
/* ===    ESTILOS SECCIÓN MULTICANAL (ECOSYSTEM)                   === */
/* =================================================================== */

/* 1. LISTA DE CANALES (IZQUIERDA) */
.omni-channel-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.omni-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--color-border-light);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

/* Barra lateral de color en hover */
.omni-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ccc;
  transition: background 0.3s;
}

.omni-card:hover {
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.omni-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}

.omni-content h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.omni-content p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Variantes de Color por Canal */
.omni-card.whatsapp:hover {
  border-color: #25D366;
}

.omni-card.whatsapp::before {
  background: #25D366;
}

.omni-card.whatsapp .omni-icon {
  background: rgba(37, 211, 102, 0.1);
  color: #25D366;
}

.omni-card.web:hover {
  border-color: #4a3aff;
}

.omni-card.web::before {
  background: #4a3aff;
}

.omni-card.web .omni-icon {
  background: rgba(74, 58, 255, 0.1);
  color: #4a3aff;
}

.omni-card.phone:hover {
  border-color: #9b59b6;
}

.omni-card.phone::before {
  background: #9b59b6;
}

.omni-card.phone .omni-icon {
  background: rgba(155, 89, 182, 0.1);
  color: #9b59b6;
}


/* 2. COMPOSICIÓN VISUAL (DERECHA) */
.omni-visual-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  /* Altura fija para la composición */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Glow de Fondo */
.omni-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(74, 58, 255, 0.15) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

/* Mockup Central (Teléfono) */
.central-phone-mockup {
  width: 260px;
  height: 480px;
  background: #000;
  border-radius: 36px;
  border: 8px solid #1a1a1a;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
  transition: transform 0.5s ease;
}

.omni-visual-wrapper:hover .central-phone-mockup {
  transform: rotate(0deg) scale(1.02);
}

.mockup-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

/* Elementos Flotantes (Glassmorphism) */
.float-notification {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  z-index: 3;
  animation: float-y 4s ease-in-out infinite;
}

/* Widget 1: Llamada (Arriba Izquierda) */
.call-alert {
  top: 10%;
  left: -20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 1.5rem;
  min-width: 220px;
}

.notif-icon {
  width: 40px;
  height: 40px;
  background: #2ecc71;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-green-ring 2s infinite;
}

.notif-text {
  display: flex;
  flex-direction: column;
}

.notif-text span {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

.notif-text small {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* Widget 2: Chat Web (Abajo Derecha) */
.web-widget {
  bottom: 15%;
  right: -20px;
  width: 180px;
  padding: 0;
  overflow: hidden;
  animation-delay: 2s;
  /* Desfase en la animación */
}

.widget-header {
  background: #f1f3f9;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
}

.widget-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.red {
  background: #ff5f56;
}

.dot.yellow {
  background: #ffbd2e;
}

.widget-body {
  padding: 12px;
  background: #fff;
}

.chat-line {
  height: 8px;
  background: #eef0f4;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 80%;
}

.chat-line.loading {
  width: 50%;
  background: var(--color-accent-primary);
  opacity: 0.3;
}

.widget-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: var(--color-accent-primary);
}

@keyframes float-y {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes pulse-green-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

/* Ajuste Móvil */
@media (max-width: 768px) {
  .omni-visual-wrapper {
    height: 400px;
  }

  .central-phone-mockup {
    transform: rotate(0deg);
    width: 220px;
    height: 400px;
  }

  /* En móvil ocultamos los flotantes o los hacemos más pequeños */
  .float-notification {
    transform: scale(0.8);
  }

  .call-alert {
    left: -10px;
  }

  .web-widget {
    right: -10px;
  }
}

/* =================================================================== */
/* ===    ESTILOS SECCIÓN FUNCTION CALLING (BENTO GRID)            === */
/* =================================================================== */

.functions-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Base Card Style */
.bento-card {
  background: #151922;
  /* Fondo oscuro ligeramente más claro que el body */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  min-height: 280px;
}

.bento-card:hover {
  border-color: rgba(74, 58, 255, 0.4);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}

/* Content Text */
.bento-content {
  margin-top: auto;
  /* Empuja el texto abajo */
  position: relative;
  z-index: 2;
}

.bento-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.bento-content p {
  font-size: 0.9rem;
  color: var(--color-text-medium);
  line-height: 1.5;
  margin: 0;
}

/* Status Badges */
.card-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.status-processing {
  background: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
  border: 1px solid rgba(255, 159, 67, 0.2);
}

.status-success {
  background: rgba(46, 213, 115, 0.1);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.2);
}

/* --- VISUAL STAGES (ANIMACIONES) --- */
.visual-stage {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 120px;
}

/* 1. ANIMACIÓN SCANNER (VISION) */
.scan-stage .receipt-icon {
  font-size: 80px;
  color: rgba(255, 255, 255, 0.1);
}

.scan-laser {
  position: absolute;
  width: 100px;
  height: 2px;
  background: #ff4757;
  box-shadow: 0 0 10px #ff4757;
  animation: scan-vertical 2s ease-in-out infinite;
}

@keyframes scan-vertical {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}

/* 2. ANIMACIÓN CALENDAR */
.calendar-ui {
  background: #fff;
  border-radius: 12px;
  width: 70px;
  overflow: hidden;
  text-align: center;
  transform: rotate(-10deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.bento-card:hover .calendar-ui {
  transform: rotate(0deg) scale(1.1);
}

.cal-header {
  background: #ff4757;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px;
}

.cal-body {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  padding: 8px;
}

/* 3. TERMINAL UI */
.terminal-ui {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
}

.code-line {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.cmd {
  color: #2ecc71;
  margin-right: 6px;
}

.text-success {
  color: #2ecc71;
}

/* 4. ICON CIRCLES */
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.3s;
}

.bento-card:hover .icon-circle {
  transform: scale(1.15);
}

.icon-circle .material-icons {
  font-size: 30px;
}

/* Colores */
.bg-purple {
  color: #9b59b6;
  background: rgba(155, 89, 182, 0.1);
}

.bg-pink {
  color: #e91e63;
  background: rgba(233, 30, 99, 0.1);
}

.bg-blue {
  color: #4a3aff;
  background: rgba(74, 58, 255, 0.1);
}

/* Ajustes Responsive */
@media (max-width: 992px) {
  .functions-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .functions-bento-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================== */
/* ===    ESTILOS SECCIÓN PERSONALIZACIÓN (BRANDING STUDIO)        === */
/* =================================================================== */

/* 1. Feature List Mejorada */
.customization-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.feature-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s;
}

.feature-item:hover {
  transform: translateX(5px);
  border-color: var(--color-accent-primary);
}

.feature-icon {
  font-size: 28px;
  color: var(--color-accent-primary);
  background: var(--color-accent-subtle-bg);
  padding: 10px;
  border-radius: 12px;
  height: fit-content;
}

.feature-item strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.feature-item p {
  margin: 0 !important;
  font-size: 0.9rem !important;
}

/* 2. TARJETA VISUAL "STUDIO" */
.branding-studio-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Barra Superior Mockup */
.mockup-top-bar {
  background: #f8f9fc;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mockup-dots {
  position: absolute;
  left: 20px;
  display: flex;
  gap: 6px;
}

.mockup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
}

.mockup-dots span:nth-child(1) {
  background: #ff5f56;
}

.mockup-dots span:nth-child(2) {
  background: #ffbd2e;
}

.mockup-dots span:nth-child(3) {
  background: #27c93f;
}

.mockup-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Área de Chat */
.mockup-chat-area {
  padding: 2rem;
  background: #fff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 250px;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

.chat-row.left {
  justify-content: flex-start;
}

.chat-row.right {
  justify-content: flex-end;
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-bubble {
  max-width: 80%;
  padding: 12px 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
}

/* Burbuja Asistente (Estática) */
.bubble-assistant {
  background: #f1f3f9;
  color: var(--color-text-primary);
  border-radius: 18px 18px 18px 4px;
}

/* Burbuja Usuario (DINÁMICA) */
.bubble-user {
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Transición suave */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 3. CONTROLES DEL STUDIO */
.studio-controls {
  padding: 1.5rem;
  background: #f8f9fc;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.controls-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.color-selector {
  display: flex;
  gap: 12px;
}

.color-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.color-btn:hover {
  transform: scale(1.1);
}

.color-btn.active {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--color-text-primary);
  /* Anillo de selección */
  z-index: 2;
}

@media (max-width: 576px) {
  .mockup-chat-area {
    padding: 1.5rem;
  }
}

/* =================================================================== */
/* ===    ESTILOS SECCIÓN ANALÍTICA (DATA DASHBOARD)               === */
/* =================================================================== */

/* Header Flex */
.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.time-selector {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 4px;
  display: flex;
}

.time-selector span {
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.85rem;
  color: var(--color-text-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.time-selector span.active {
  background: var(--color-accent-primary);
  color: #fff;
  font-weight: 600;
}

/* Grid Layout */
.analytics-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Card Base */
.data-card {
  background: #151922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: transform 0.3s, border-color 0.3s;
}

.data-card:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 58, 255, 0.4);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.card-top h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #fff;
  margin: 0;
}

.icon-faded {
  color: rgba(255, 255, 255, 0.3);
}

.trend.positive {
  color: #2ed573;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}

.trend .material-icons {
  font-size: 14px;
}

.visual-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.center-content {
  justify-content: center;
  align-items: center;
}

.end-content {
  justify-content: flex-end;
}

/* --- GRÁFICO 1: GAUGE (SENTIMIENTO) --- */
.sentiment-gauge {
  position: relative;
  width: 160px;
  height: 80px;
  /* Medio círculo */
  overflow: hidden;
  text-align: center;
}

.gauge-bg,
.gauge-fill {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border: 15px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.gauge-fill {
  border-top-color: #2ed573;
  /* Color positivo */
  border-right-color: #2ed573;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  /* Ajuste para mostrar llenado */
}

.gauge-value {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.gauge-value span {
  font-size: 1rem;
  color: var(--color-text-medium);
}

.gauge-label {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #2ed573;
  font-weight: 500;
}

/* --- GRÁFICO 2: BARRAS DE PROGRESO (INTENCIONES) --- */
.intent-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intent-row {
  width: 100%;
}

.intent-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #ccc;
  margin-bottom: 6px;
}

.progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
}

.fill-purple {
  background: #4a3aff;
}

.fill-blue {
  background: #7a70ff;
}

.fill-pink {
  background: #ff4757;
}

/* --- GRÁFICO 3: CÍRCULO SVG (RESOLUCIÓN) --- */
.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 2.5;
}

.circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

.circular-chart.purple .circle {
  stroke: #4a3aff;
}

.percentage {
  fill: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 0.5em;
  text-anchor: middle;
}

.chart-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-medium);
  margin-top: 0.5rem;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

/* --- GRÁFICO 4: ONDA SVG (VOLUMEN) --- */
.total-badge {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.wave-chart {
  width: 100%;
  height: 80px;
  overflow: visible;
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 4px;
}

@media (max-width: 576px) {
  .analytics-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =================================================================== */
/* ===    ESTILOS FAQ PREMIUM (NO-GLITCH ANIMATION)                === */
/* =================================================================== */

.faq-wrapper-premium {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item-pro {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Estado Activo (Borde y Sombra) */
.faq-item-pro.active {
  border-color: var(--color-accent-primary);
  box-shadow: 0 10px 30px rgba(74, 58, 255, 0.08);
}

/* El Botón (Trigger) */
.faq-trigger {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Poppins', sans-serif;
}

.q-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color 0.3s;
}

.faq-item-pro.active .q-text {
  color: var(--color-accent-primary);
}

/* Icono Animado (+ a -) */
.icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-tertiary);
}

.faq-item-pro:hover .icon-wrapper {
  background: var(--color-accent-subtle-bg);
  color: var(--color-accent-primary);
}

.faq-item-pro.active .icon-wrapper {
  background: var(--color-accent-primary);
  color: #fff;
  transform: rotate(45deg);
  /* Convierte el + en x */
}

/* --- LA ANIMACIÓN MÁGICA (GRID TRICK) --- */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Curva suave */
}

.faq-item-pro.active .faq-content {
  grid-template-rows: 1fr;
}

.faq-inner {
  overflow: hidden;
}

.faq-inner p {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s 0.1s, transform 0.3s 0.1s;
  /* Retraso sutil al abrir */
}

.faq-item-pro.active .faq-inner p {
  opacity: 1;
  transform: translateY(0);
}

/* Contenedor maestro para centrar elementos verticales (Badge + Título) */
.header-center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centrado horizontal en Flex */
  justify-content: center;
  text-align: center;
  /* Centrado para navegadores antiguos */
  width: 100%;
}

/* Refuerzo para el badge premium */
.badge-premium {
  display: inline-flex;
  /* Cambiado de inline-block para mejor control */
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background: rgba(74, 58, 255, 0.1);
  color: var(--color-accent-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(74, 58, 255, 0.2);
  width: fit-content;
  /* Asegura que no se estire al 100% */
}

/* Ajuste adicional para el título de la sección */
.section-title {
  margin-left: auto;
  margin-right: auto;
}