/* public/css/landing.css */

/* Hero Section */
.hero-section {
    position: relative;
    background-attachment: fixed;
    background: url('../images/background/bg2.png') no-repeat center center/cover;
    background-color: #ffffffd3;
    background-attachment: fixed;
}

/* .hero-section .overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.11) 100%);
} */

.ls-2 {
    letter-spacing: 2px;
}

/* Franja Informativa */
.franja-info {
    background: linear-gradient(135deg, #0d6efd 0%, #1a3a5c 100%);
}

/* === CONTENEDOR DE TARJETAS === */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 200px;
    /* Separación entre tarjetas en desktop */
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* === TARJETA INDIVIDUAL === */
.tool-card {
    /* Estructura */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 380px;
    min-height: 320px;
    padding: 0.8rem 2rem 1.3rem;

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.589);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);

    /* Bordes y sombras */
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: 24px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 4px rgba(255, 255, 255, 0);

    /* Transiciones */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.tool-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.763);
    border-color: #1C6CAA;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.25),
        inset 0 1px 4px rgba(255, 255, 255, 0);
}

/* Contenido de la tarjeta */
.tool-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 100%;
}

/* Iconos SIN círculo - Solo icono con color */
.tool-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.tool-card-icon i {
    font-size: 4rem;
    /* Icono más grande al no tener círculo */
    color: #0d6efd;
    /* Azul corporativo */
}

.tool-card-icon.info i {
    color: #ffa348ff;
    /* Color cyan para el editor */
}

.tool-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #212529;
}

.tool-card p {
    text-align: center;
    color: #303030;
    margin-bottom: 0.5rem;
    line-height: 1.6;
    flex: 1;
}

.tool-card-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: 2px solid #0d6efd;
    border-radius: 50px;
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    /* margin-top: auto; */
    background-color: #ffffff73;
}

.tool-card-button.info {
    border-color: #ffa348ff;
    color: #3f3f3f;
}

.tool-card:hover .tool-card-button {
    background: #0d6efd;
    color: white;
    transform: scale(1.05);
}

.tool-card:hover .tool-card-button.info {
    background: #ffa348ff;
    color: white;
}

.card-body img {
    width: 100%;
    height: 100%;
    max-height: fit-content;
    object-fit: contain;
}

/* Navbar */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .cards-container {
        gap: 30px;
        /* Separación reducida en móvil (en lugar de 200px) */
    }

    .tool-card {
        max-width: 100%;
        min-height: 350px;
        padding: 2rem 1.5rem;
    }

    .tool-card-icon i {
        font-size: 3rem;
        /* Icono más pequeño en móvil */
    }
}

/* section {
    margin-top: 50px;
} */

/* =========================================================================
   ENHANCEMENTS FOR LANDING PAGE (PRICING & FAQ)
   ========================================================================= */

/* SaaS Gradients & Colors */
.bg-gradient-dark-blue {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white !important;
}

[data-theme="dark"] .benefits-section {
    background-color: #1e222b !important;
}

.text-gradient-primary {
    background: linear-gradient(to right, #2563eb, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Modern Pricing Cards */
.pricing-card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hover-scale-sm {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale-sm:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 
   DARK MODE OVERRIDES FOR PRICING SECTION 
   Forces White Cards even if Global Dark Mode is ON 
   (Except for the Pro/Blue card)
*/
#precios .card:not(.pro-card) {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: none !important;
}

/* PRO CARD STYLING (Blue Highlight) */
#precios .card.pro-card {
    background-color: #0d6efd !important;
    /* Brand Blue */
    color: #ffffff !important;
    border: none !important;
    transform: scale(1.05);
    /* Slight permanent scale for emphasis */
    z-index: 10;
}

#precios .card-header {
    background-color: transparent !important;
}

#precios .card-body {
    background-color: transparent !important;
}

#precios .pro-card .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

#precios .pro-card .text-dark,
#precios .pro-card .text-primary,
#precios .pro-card h1,
#precios .pro-card h4,
#precios .pro-card span,
#precios .pro-card i {
    color: #ffffff !important;
    /* Force white text/icons on blue card */
}

/* Rounded circles for icons in Pro Card */
#precios .pro-card .rounded-circle.bg-primary {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

#precios .text-muted {
    color: #6c757d !important;
}

#precios h1,
#precios h2,
#precios h3,
#precios h4,
#precios span,
#precios li {
    /* Ensure text inside generic cards is not forced to white */
    color: inherit;
}

/* But titles of the section are white (handled by .bg-gradient-dark-blue) */
#precios h2.fw-bold.text-white {
    color: #ffffff !important;
}

#precios p.lead.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}


/* Modern Accordion */
.accordion-modern .accordion-item {
    border: none;
    background: white;
    border-radius: 12px !important;
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.accordion-modern .accordion-button {
    background: white;
    font-weight: 600;
    color: #1e293b;
    box-shadow: none;
    padding: 1.25rem;
}

.accordion-modern .accordion-button:not(.collapsed) {
    background: #f8fafc;
    color: #0d6efd;
}

.accordion-modern .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* LOGO STRIP */
.logo-strip {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.logo-strip:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* =========================================================================
   PRO PRICING CARD - CUSTOM CARD CLASS (Bypass dark-mode conflicts)
   ========================================================================= */
.pricing-card-pro {
    /* Card base styles (replicate Bootstrap .card) */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;

    /* Force dark styling */
    background: #2d3748 !important;
    color: #ffffff !important;
    border-radius: 1.5rem !important;

    /* Ensure it displays properly */
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

.pricing-card-pro .card-header {
    background-color: transparent !important;
    color: white !important;
    border-bottom: none !important;
}

.pricing-card-pro .card-body {
    background-color: transparent !important;
    color: white !important;
    flex: 1 1 auto;
}

/* Force all text inside to be white */
.pricing-card-pro,
.pricing-card-pro * {
    color: white !important;
}

/* Override any potential text color classes */
.pricing-card-pro .text-muted,
.pricing-card-pro .text-dark,
.pricing-card-pro .text-secondary {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Ensure white stays white */
.pricing-card-pro .text-white {
    color: white !important;
}