/* =====================================================================
 * index-linktree.css — rediseño estilo Linktree para la landing weblink.lat
 * Estética: secciones de color a todo ancho que alternan, esquinas XL,
 * tipografía grande y bold, cards coloridas. Multicolor vibrante.
 * Aplica sobre el HTML existente vía clases envoltorio .lt-section-*.
 * ===================================================================== */

:root {
    --lt-green:  #254f1a;   /* verde Linktree oscuro */
    --lt-lime:   #e9c0e9;   /* lila claro */
    --lt-violet: #502274;   /* púrpura */
    --lt-blue:   #1c3bdc;   /* azul royal */
    --lt-red:    #b5170e;   /* rojo */
    --lt-cream:  #f3f3f1;   /* crema base */
    --lt-amazon: #FF9900;
    --lt-amazon-blue: #146EB4;
    --lt-radius: 28px;
    --lt-radius-lg: 40px;
    --lt-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Tipografía grande y bold tipo Linktree ---- */
.index-container .index-header,
.lt-redesign h1,
.lt-redesign h2 {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.index-container .index-header { font-size: clamp(2.4rem, 5vw, 3.8rem) !important; }
.lt-redesign h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; }
.index-subheader { font-size: 1.2rem !important; opacity: 0.85; }

/* ---- Secciones de color a todo ancho ---- */
.lt-section {
    padding: 5rem 0 !important;
    margin: 0 !important;
    position: relative;
}
.lt-section + .lt-section { margin-top: 0 !important; }

/* paleta alternada por sección */
.lt-section-cream  { background: var(--lt-cream); color: #1a1a1a; }
.lt-section-green  { background: var(--lt-green);  color: #f3f3f1; }
.lt-section-lime   { background: var(--lt-lime);   color: #1a1a1a; }
.lt-section-violet { background: var(--lt-violet); color: #f3f3f1; }
.lt-section-blue   { background: var(--lt-blue);   color: #f3f3f1; }
.lt-section-amazon { background: linear-gradient(135deg, var(--lt-amazon), #FFB347); color: #fff; }

/* headings claros sobre fondos oscuros */
.lt-section-green h2, .lt-section-violet h2, .lt-section-blue h2,
.lt-section-green .h1, .lt-section-violet .h1, .lt-section-blue .h1 { color: #fff !important; }
.lt-section-green .text-muted, .lt-section-violet .text-muted, .lt-section-blue .text-muted { color: rgba(255,255,255,0.7) !important; }

/* ---- Cards: esquinas XL, coloridas, hover lift ---- */
.lt-redesign .card {
    border-radius: var(--lt-radius) !important;
    border: none !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.08);
    transition: transform 0.4s var(--lt-ease), box-shadow 0.4s var(--lt-ease);
    overflow: hidden;
}
.lt-redesign .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.16);
}

/* cards de features menores: en vez de gris, color suave alterno */
.lt-features-grid .col-12:nth-child(6n+1) .card { background: #e9f5e1; }
.lt-features-grid .col-12:nth-child(6n+2) .card { background: #fde8d4; }
.lt-features-grid .col-12:nth-child(6n+3) .card { background: #e7e0f5; }
.lt-features-grid .col-12:nth-child(6n+4) .card { background: #dce7ff; }
.lt-features-grid .col-12:nth-child(6n+5) .card { background: #ffe0e0; }
.lt-features-grid .col-12:nth-child(6n+6) .card { background: #fff4cc; }
.lt-features-grid .card .bg-gray-100 { background: transparent !important; }

/* iconos de feature menor: chip de color */
.lt-features-grid .card .bg-gray-100 i { color: #254f1a !important; }

/* ---- Botones pill grandes ---- */
.lt-redesign .btn,
.index-container .index-button {
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 0.9rem 2rem !important;
    transition: transform 0.25s var(--lt-ease), box-shadow 0.25s var(--lt-ease), filter 0.25s ease;
}
.lt-redesign .btn:hover,
.index-container .index-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    filter: brightness(1.03);
}

/* botón primario = naranja Amazon con gradiente */
.btn-primary, .index-button.btn-primary {
    background: linear-gradient(135deg, var(--lt-amazon), #FF7700) !important;
    border: none !important;
}

/* ---- Stats: números enormes ---- */
.lt-stats .h1 {
    font-size: clamp(3rem, 7vw, 5rem) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--lt-amazon), var(--lt-amazon-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lt-stats .card { background: transparent !important; box-shadow: none !important; }

/* ---- Badges/chips de los block types FBA ---- */
.lt-section-amazon .badge { border-radius: 999px !important; }

/* ---- Imágenes de feature: redondeo XL ---- */
.index-card-image, .lt-redesign .rounded {
    border-radius: var(--lt-radius) !important;
}

/* ---- Pixels: chips redondos con hover ---- */
.lt-redesign .bg-gray-100.rounded {
    border-radius: 18px !important;
    transition: transform 0.3s var(--lt-ease);
}
.lt-redesign .bg-gray-100.rounded:hover { transform: translateY(-4px) scale(1.08); }

/* ---- Animación de entrada al hacer scroll (fade-up) ---- */
.lt-section { animation: lt-fade-up 0.7s var(--lt-ease) both; }
@keyframes lt-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Pricing: tarjetas grandes y separadas ---- */
.lt-redesign .plans-container .card,
.lt-redesign [class*="plan"] .card { border-radius: var(--lt-radius) !important; }

/* ---- Accesibilidad: menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
    .lt-redesign *, .lt-section { animation: none !important; transition: none !important; }
}