/* Goling - Estilos propios (complementan Tailwind) */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gradient-text {
  background: linear-gradient(135deg, #46459b 0%, #8a88e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-pattern {
  background-image: radial-gradient(#46459b 0.5px, transparent 0.5px),
    radial-gradient(#46459b 0.5px, #f9fafb 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.05;
}

.pattern-dots {
  background-image: radial-gradient(rgba(247, 209, 230, 0.4) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Textura local (sección Cómo funciona) */
.bg-cubes-pattern {
  background-image: url('../images/cubes.png');
}

/* --- Iconos SVG inline (compatibilidad Font Awesome) --- */
i[data-fa-i2svg] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

i .svg-inline--fa,
.svg-inline--fa {
  display: inline-block;
  height: 1em;
  width: auto;
  max-width: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Iconos en listas (checks, plus): tamaño fijo y alineación */
#planes li > i {
  width: 1.25em;
  min-width: 1.25em;
  margin-top: 0.25em;
}

#planes li .svg-inline--fa {
  width: 1em;
  min-width: 1em;
}

/* Tarjetas de pago (Visa/Mastercard): tamaño fijo para no romper layout */
#planes svg.fa-cc-visa,
#planes svg.fa-cc-mastercard {
  width: 2rem;
  max-width: 2rem;
  height: 1.25rem;
}

/* --- Sección Planes / Precios --- */
#planes article {
  min-height: 0;
}

/* Caja "Todo lo del plan Starter, más" (Premium): fallback por si Tailwind no genera /20 y /50 */
#planes article:nth-child(2) .rounded-xl.p-4.mb-6[class*="brand-secondary"] {
  background-color: rgba(247, 209, 230, 0.2);
  border-color: rgba(247, 209, 230, 0.5);
}

#planes ul.space-y-4 li,
#planes ul.space-y-3 li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Fila de medios de pago: iconos y texto alineados */
#planes .inline-flex.items-center.gap-2 {
  flex-wrap: wrap;
}

#planes .inline-flex.items-center.gap-2 i {
  flex-shrink: 0;
}

/* Hero mockup: achicar en móvil (iPhone SE, iPhone X y similares, max 430px) */
@media (max-width: 430px) {
  .hero-mockup-wrap {
    transform: scale(0.8);
    transform-origin: center center;
  }
}

/* Carrusel testimonios: ocultar barra de scroll (se puede deslizar con dedo o botones) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}