/* =============================
       HOME (nuevo look - FicharNet)
       Bootstrap clásico compatible
       ============================= */

    :root{
        --fn-blue:#04488d;
        --fn-sky:#1f9de8;
        --fn-ink:#0f172a;
        --fn-muted:#475569;
        --fn-line:#e5e7eb;
        --fn-bg:#f8fafc;
        --fn-card:#ffffff;
    }

    /* fondo general */
    .home-shell{
        background: var(--fn-bg);
        position:relative;
        overflow:hidden;
        padding-bottom: 40px;
    }
    .home-shell:before{
        content:"";
        position:absolute;
        inset:-120px -60px auto -60px;
        height: 520px;
        background:
            radial-gradient(900px 420px at 15% 10%, rgba(31,157,232,.18), rgba(255,255,255,0)),
            radial-gradient(600px 360px at 80% 30%, rgba(4,72,141,.12), rgba(255,255,255,0));
        pointer-events:none;
    }

    .home-wrap{ position:relative; z-index:1; }

    /* ===== HERO / CAROUSEL ===== */
    .hero{
        margin-top: 10px;
        margin-bottom: 18px;
    }
    #carousel.hero-carousel{
        border-radius: 18px;
        overflow:hidden;
        border:1px solid var(--fn-line);
        box-shadow: 0 18px 52px rgba(2,6,23,.10);
        background:#eef2f7;
    }

    #carousel.hero-carousel .carousel-inner > .item > figure{
        margin:0;
        position:relative;
    }
    #carousel.hero-carousel .carousel-inner > .item > figure:after{
        content:"";
        position:absolute;
        inset:0;
        background: linear-gradient(90deg, rgba(2,6,23,.55), rgba(2,6,23,.10));
        pointer-events:none;
    }
    #carousel.hero-carousel .carousel-inner > .item > figure > img{
        height: 520px;
        width:100%;
        object-fit: cover;
    }

    /* caption moderna */
    .hero-caption{
        position:absolute;
        inset: 0;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        z-index:2;
        padding: 22px;
    }
    .hero-card{
        max-width: 520px;
        color:#fff;
        padding: 18px 18px 16px;
        border-radius: 16px;
        background: rgba(15,23,42,.35);
        border: 1px solid rgba(255,255,255,.18);
        backdrop-filter: blur(6px);
        box-shadow: 0 14px 40px rgba(0,0,0,.18);
    }
    .hero-pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        border-radius: 999px;
        padding: 6px 10px;
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.20);
        font-weight: 800;
        font-size: 12px;
        letter-spacing:.2px;
        width: fit-content;
    }
    .hero-pill .dot{ width:7px;height:7px;border-radius:99px;background: var(--fn-sky); display:inline-block; }
    .hero-title{
        margin: 12px 0 8px;
        font-size: 34px;
        font-weight: 900;
        line-height: 1.05;
        letter-spacing:-.2px;
        text-shadow: 0 12px 30px rgba(0,0,0,.30);
    }
    .hero-text{
        margin: 0 0 14px;
        font-size: 15px;
        line-height: 1.5;
        opacity:.95;
    }
    .hero-actions{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        align-items:center;
    }
    .btn-ghost{
        display:inline-block;
        border-radius: 12px;
        padding: 10px 14px;
        font-weight: 900;
        border: 1px solid rgba(255,255,255,.30);
        background: rgba(255,255,255,.10);
        color:#fff;
        text-decoration:none;
    }
    .btn-ghost:hover{ text-decoration:none; background: rgba(255,255,255,.16); }

    /* indicadores y controles */
    #carousel.hero-carousel .carousel-indicators{ bottom: 10px; }
    #carousel.hero-carousel .carousel-indicators li{
        width: 10px; height: 10px; border-radius: 99px;
        border: 0; margin: 0 4px;
        background: rgba(255,255,255,.45);
    }
    #carousel.hero-carousel .carousel-indicators .active{
        background: rgba(255,255,255,.95);
        width: 22px;
    }
    #carousel.hero-carousel .carousel-control{
        width: 52px;
        opacity: 1;
        text-shadow:none;
        background:none;
    }
    #carousel.hero-carousel .carousel-control .fa{
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background: rgba(255,255,255,.18);
        border: 1px solid rgba(255,255,255,.25);
        position:relative;
        top: 50%;
        transform: translateY(-50%);
    }
    #carousel.hero-carousel .carousel-control:hover .fa{
        background: rgba(255,255,255,.28);
    }

    /* ===== STRIP (trust / stats) ===== */
    .strip{
        margin-top: 14px;
        margin-bottom: 18px;
    }
    .strip-card{
        background: rgba(255,255,255,.65);
        border: 1px solid rgba(229,231,235,.9);
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(2,6,23,.06);
        padding: 14px 14px;
    }
    .strip-row{
        display:flex;
        gap: 12px;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
    }
    .strip-left{
        display:flex;
        gap: 10px;
        flex-wrap:wrap;
        align-items:center;
    }
    .badge-soft{
        display:inline-flex;
        align-items:center;
        gap:8px;
        border-radius: 999px;
        padding: 7px 10px;
        background: #fff;
        border: 1px solid var(--fn-line);
        color: var(--fn-ink);
        font-weight: 900;
        font-size: 12px;
    }
    .badge-soft .fa{ color: var(--fn-sky); }
    .strip-right{
        display:flex;
        gap: 10px;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-end;
    }
    .stat{
        min-width: 160px;
        border-radius: 14px;
        background:#fff;
        border:1px solid var(--fn-line);
        padding: 10px 12px;
    }
    .stat .n{
        font-size: 18px;
        font-weight: 900;
        color: var(--fn-ink);
        line-height:1.1;
    }
    .stat .t{
        font-size: 12px;
        color: var(--fn-muted);
        font-weight: 700;
        margin-top: 2px;
    }

    /* ===== SECCIONES ===== */
    .sec{ padding: 18px 0; }
    .sec-title{
        margin: 0 0 6px;
        font-size: 24px;
        font-weight: 900;
        color: var(--fn-ink);
        letter-spacing: -.2px;
    }
    .sec-sub{
        margin: 0 0 16px;
        color: var(--fn-muted);
        font-size: 14px;
        line-height: 1.45;
    }

    .cardx{
        background: var(--fn-card);
        border: 1px solid var(--fn-line);
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(2,6,23,.06);
        padding: 16px;
        height:auto;
    }
    .cardx h4{
        margin: 10px 0 6px;
        font-weight: 900;
        color: var(--fn-ink);
    }
    .cardx p{ margin:0; color: var(--fn-muted); line-height:1.45; }
    .ico{
        width: 46px; height: 46px;
        border-radius: 14px;
        display:flex;
        align-items:center;
        justify-content:center;
        background: rgba(31,157,232,.12);
        border: 1px solid rgba(31,157,232,.18);
        color: var(--fn-sky);
        font-size: 20px;
    }

    .shot{
        border-radius: 16px;
        overflow:hidden;
        border:1px solid var(--fn-line);
        box-shadow: 0 14px 40px rgba(2,6,23,.08);
        background:#eef2f7;
    }
    .shot img{ width:100%; height:auto; display:block; }

    /* CTA final */
    .cta{
        border-radius: 18px;
        border: 1px solid rgba(4,72,141,.14);
        background: linear-gradient(135deg, rgba(4,72,141,.10), rgba(31,157,232,.12));
        box-shadow: 0 16px 44px rgba(2,6,23,.08);
        padding: 18px;
    }
    .cta h3{ margin:0 0 6px; font-weight: 900; color: var(--fn-ink); }
    .cta p{ margin:0; color: var(--fn-muted); }
    .cta-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

    /* ===== Responsive ===== */
    @media (max-width: 991px){
        #carousel.hero-carousel .carousel-inner > .item > figure > img{ height: 420px; }
        .hero-title{ font-size: 28px; }
        .stat{ min-width: 140px; }
    }
    @media (max-width: 767px){
        .hero{ margin-top: 6px; }
        .home-shell:before{ height: 420px; }
        .strip-right{ width:100%; justify-content:flex-start; }
        .stat{ min-width: 0; flex: 1; }
        .hero-caption{ padding: 14px; align-items:flex-end; }
        .hero-card{ max-width: 100%; }
        #carousel.hero-carousel{ border-radius: 16px; }
        #carousel.hero-carousel .carousel-inner > .item > figure > img{ height: 320px; }
    }

    /* FAQ links */
    #faqAcc .panel-title a{ color: var(--fn-ink); text-decoration:none; display:block; padding: 10px 6px; }
    #faqAcc .panel-title a:hover{ text-decoration:underline; }
    #faqAcc .panel-body{ padding: 12px 10px; }


    /* Carrusel capturas - mini */
    .shot-mini{
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(2,6,23,.08);
    }
    .shot-mini img{
        max-height: 220px;
        object-fit: contain;
        background:#fff;
    }
    #capturasCarousel .carousel-control{
        width: 54px;
        opacity: 1;
        background:none;
        text-shadow:none;
    }
    #capturasCarousel .carousel-control .fa{
        width: 40px; height: 40px;
        border-radius: 999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background: rgba(15,23,42,.12);
        border: 1px solid rgba(15,23,42,.12);
        position:relative;
        top: 50%;
        transform: translateY(-50%);
        color: var(--fn-ink);
    }
    #capturasCarousel .carousel-control:hover .fa{
        background: rgba(15,23,42,.18);
    }
    #capturasCarousel .carousel-indicators li{
        width: 10px; height: 10px; border-radius: 99px;
        border:0; margin:0 4px; background: rgba(15,23,42,.18);
    }
    #capturasCarousel .carousel-indicators .active{
        background: rgba(15,23,42,.55);
        width: 22px;
    }


    /* Capturas: carrusel compacto sin descolocar */
    .cap-grid{
        display:flex;
        gap: 12px;
        padding: 16px 18px 28px;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .cap-item{ flex:1 1 0; min-width:0; }
    .shot-mini{
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(2,6,23,.08);
        background:#fff;
        height: 240px;                 /* altura fija para que no baile */
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 10px;
    }
    .shot-mini img{
        max-height: 220px;
        width:auto;
        max-width:100%;
        object-fit: contain;
        background:#fff;
        border-radius: 10px;
    }
    @media (max-width: 991px){
        .cap-grid{ flex-wrap: wrap; }
        .cap-item{ flex: 1 1 48%; }
        .shot-mini{ height: 220px; }
        .shot-mini img{ max-height: 200px; }
    }
    @media (max-width: 767px){
        .cap-item{ flex: 1 1 100%; }
        .shot-mini{ height: 240px; }
        .shot-mini img{ max-height: 220px; }
    }


    /* FAQ moderno */
    .faq-box{
        background:#fff;
        border:1px solid var(--fn-line);
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(2,6,23,.06);
        padding: 10px;
    }
    .faq-grid{ display:flex; flex-direction:column; gap:10px; }
    .faq-item{
        border:1px solid #eef2f7;
        border-radius: 16px;
        overflow:hidden;
        background: #ffffff;
    }
    .faq-q{
        width:100%;
        text-align:left;
        padding: 14px 14px;
        background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,1));
        border:0;
        font-weight: 900;
        color: var(--fn-ink);
        display:flex;
        align-items:center;
        gap:10px;
        cursor:pointer;
    }
    .faq-q:focus{ outline:none; }
    .faq-ico{
        width: 34px; height: 34px;
        border-radius: 12px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background: rgba(31,157,232,.12);
        border: 1px solid rgba(31,157,232,.18);
        color: var(--fn-sky);
        flex: 0 0 auto;
    }
    .faq-chev{
        margin-left:auto;
        color:#64748b;
        transition: transform .18s ease;
    }
    .faq-q[aria-expanded="true"] .faq-chev{ transform: rotate(180deg); }
    .faq-a{
        padding: 0 14px 14px;
        color: var(--fn-muted);
        line-height: 1.55;
        border-top:1px solid #eef2f7;
        background:#fff;
    }


    /* Tarjetas visuales (mensajes clave) */
    .cardx-visual{ padding:0; overflow:hidden; }
    .cardx-media{ position:relative; overflow:hidden; border-bottom:1px solid var(--fn-line); background:#f8fafc; }
    .cardx-media img{
        width:100%;
        height: 170px;
        object-fit: cover;
        display:block;
        transform: scale(1.02);
    }
    .cardx-badge{
        position:absolute;
        left: 12px;
        bottom: 12px;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(2,6,23,.08);
        color: var(--fn-ink);
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 900;
        font-size: 12px;
        display:inline-flex;
        align-items:center;
        gap:8px;
        box-shadow: 0 10px 24px rgba(2,6,23,.10);
    }
    .cardx-body{ padding: 14px 16px 16px; }
    .cardx-title{ margin:0 0 6px; font-weight: 900; font-size: 18px; }
    .cardx-text{ margin:0; color: var(--fn-muted); line-height:1.55; }
    .cardx-foot{ margin-top:10px; }
    .cardx-link{ font-weight: 900; color: var(--fn-sky); text-decoration:none; }
    .cardx-link:hover{ text-decoration:underline; }


    /* CTA refinado */
    .cta-secondary{ margin-left:8px; }
    .sep-dot{ display:inline-block; margin: 0 8px; color:#94a3b8; font-weight:900; }
    .cta-free-points{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
    .cta-free-points .pt{ color:#334155; font-weight:900; display:flex; gap:8px; align-items:center; }
    .cta-free-points .fa{ color:#16a34a; }
    @media (max-width: 767px){
        .cta-secondary{ margin-left:0; margin-top:8px; display:block; }
        .cta-free-actions .btn{ width:100%; }
    }


    /* CTA 1 mes gratis - look premium */
    #cta-mes-gratis{ margin-top: 6px; }
    #cta-mes-gratis .cta-free{
        background:
            radial-gradient(900px 380px at 15% -10%, rgba(31,157,232,.22), rgba(255,255,255,0)),
            radial-gradient(760px 360px at 110% 10%, rgba(59,130,246,.16), rgba(255,255,255,0)),
            linear-gradient(180deg, #ffffff, #fbfdff);
        border: 1px solid rgba(2,6,23,.10);
        border-radius: 26px;
        box-shadow: 0 22px 70px rgba(2,6,23,.10);
        padding: 22px;
        display:flex;
        gap: 18px;
        align-items: stretch;
        flex-wrap: wrap;
    }
    #cta-mes-gratis .cta-free-left{ flex: 1 1 520px; min-width: 280px; }
    #cta-mes-gratis .cta-free-right{ flex: 0 1 360px; min-width: 280px; display:flex; }

    #cta-mes-gratis .cta-free-kicker{
        display:inline-flex;
        align-items:center;
        gap:10px;
        font-weight: 1000;
        color:#0f172a;
        background: rgba(255,255,255,.86);
        border: 1px solid rgba(2,6,23,.10);
        border-radius: 999px;
        padding: 8px 12px;
        margin-bottom: 12px;
    }
    #cta-mes-gratis .cta-free-title{
        margin:0 0 10px;
        font-weight: 1100;
        letter-spacing: -.02em;
        font-size: 38px;
        line-height: 1.05;
        color:#0f172a;
    }
    #cta-mes-gratis .cta-free-text{
        color:#334155;
        margin:0 0 14px;
        line-height:1.65;
        font-size: 16px;
        font-weight: 700;
        max-width: 58ch;
    }
    #cta-mes-gratis .cta-free-actions{
        display:flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 8px;
    }
    #cta-mes-gratis .cta-free-actions .btn{
        border-radius: 14px;
        font-weight: 1000;
        padding: 12px 16px;
        box-shadow: 0 14px 32px rgba(2,6,23,.12);
    }
    #cta-mes-gratis .cta-free-note{
        margin-top: 12px;
        color:#475569;
        font-weight: 900;
        display:flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items:center;
    }
    #cta-mes-gratis .sep-dot{ color:#94a3b8; font-weight:1000; margin: 0 6px; }

    #cta-mes-gratis .cta-free-card{
        width:100%;
        background:
            linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
        border: 1px solid rgba(2,6,23,.10);
        border-radius: 22px;
        padding: 16px 16px 14px;
        box-shadow: 0 18px 55px rgba(2,6,23,.12);
        position: relative;
        overflow:hidden;
    }
    #cta-mes-gratis .cta-free-card:before{
        content:"";
        position:absolute;
        inset:-60px -60px auto auto;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.22), rgba(34,197,94,0));
        transform: rotate(12deg);
        pointer-events:none;
    }
    #cta-mes-gratis .cta-free-badge{
        display:inline-block;
        font-weight: 1100;
        color:#064e3b;
        background: rgba(34,197,94,.18);
        border: 1px solid rgba(34,197,94,.30);
        border-radius: 999px;
        padding: 8px 12px;
        margin-bottom: 10px;
    }
    #cta-mes-gratis .cta-free-mini{
        color:#475569;
        font-weight: 900;
        margin-bottom: 12px;
    }
    #cta-mes-gratis .cta-free-points{
        margin-top: 10px;
        display:flex;
        flex-direction:column;
        gap: 10px;
    }
    #cta-mes-gratis .cta-free-points .pt{
        color:#0f172a;
        font-weight: 900;
        display:flex;
        gap: 10px;
        align-items:center;
        background: rgba(2,6,23,.03);
        border: 1px solid rgba(2,6,23,.06);
        border-radius: 14px;
        padding: 10px 12px;
    }
    #cta-mes-gratis .cta-free-points .fa{ color:#16a34a; }
    #cta-mes-gratis .cta-free-card .btn{
        border-radius: 14px;
        font-weight: 1100;
        padding: 12px 14px;
        box-shadow: 0 14px 32px rgba(2,6,23,.12);
    }
    #cta-mes-gratis .cta-free-small{
        margin-top: 10px;
        color:#64748b;
        font-size: 12px;
        font-weight: 900;
        text-align:center;
    }

    @media (max-width: 991px){
        #cta-mes-gratis .cta-free-title{ font-size: 32px; }
    }
    @media (max-width: 767px){
        #cta-mes-gratis .cta-free{ padding: 16px; }
        #cta-mes-gratis .cta-free-title{ font-size: 28px; }
        #cta-mes-gratis .cta-free-actions .btn{ width:100%; }
    }