/* ============================================================
    AI Fundamentals — new landing design
   ============================================================ */
:root{
    --purple-900:#2d1b4e;
    --purple-700:#4a2d7a;
    --purple-500:#6d3fb0;
    --coral-500:#ff6b5b;
    --coral-600:#e8543f;
    --cream:#fdfaf6;
    --ink:#241a35;
    --ink-soft:#5c4f75;
    --line:#e7dff2;
    --success:#2f9e6b;
    --shadow:0 12px 30px rgba(45,27,78,0.12);
}

/* Reset mínimo sin romper el resto del sitio */
.aif-wrap *{box-sizing:border-box;}
.aif-wrap{
    background:var(--cream);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
}

/* ---------- banner ---------- */
.aif-banner{
    background:var(--purple-900);
    color:#fff;
    text-align:center;
    font-size:13px;
    padding:8px 16px;
}
.aif-banner a{
    color:#fff; text-decoration:none; font-weight:600;
}

/* ---------- layout ---------- */
.aif-page{max-width:1100px; margin:0 auto; padding:26px 24px 60px;}

/*
    Desktop: grid 2 columnas.
    4 hijos directos del grid:
    .aif-hero-top  → col 1 row 1
    .aif-photo     → col 1 row 3
    .aif-hero-bot  → col 1 row 4   (pegado bajo la foto)
    .aif-form-col  → col 2 rows 1-4
*/
.aif-layout{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    column-gap:44px;
    row-gap:0;
    align-items:start;
}

.aif-hero-top{ grid-column:1; grid-row:1; padding-bottom:20px; }
.aif-photo   { grid-column:1; grid-row:2; padding-bottom:20px; }
.aif-hero-bot{ grid-column:1; grid-row:3; }
.aif-form-col{ grid-column:2; grid-row:1 / span 3; }

/* ---------- mobile ---------- */
@media(max-width:900px){
    .aif-layout{
        grid-template-columns:1fr;
        gap:22px;
    }
    /* Orden mobile: hero → form → benefits → foto */
    .aif-hero-top{ grid-column:1; grid-row:auto; order:1; padding-bottom:0; }
    .aif-form-col{ grid-column:1; grid-row:auto; order:2; }
    .aif-hero-bot{ grid-column:1; grid-row:auto; order:3; }
    .aif-photo   { grid-column:1; grid-row:auto; order:4; padding-bottom:0; }
}

/* ---------- hero text ---------- */
.aif-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff2ef; color:var(--coral-600);
    font-weight:700; font-size:12.5px;
    padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.aif-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--coral-600);}

.aif-h1{
    font-size:34px; line-height:1.14; margin:0 0 14px;
    color:var(--purple-900); font-weight:800; letter-spacing:-0.02em;
}
.aif-h1 .free{color:var(--coral-600);}

.aif-sub{
    font-size:16px; color:var(--ink-soft); line-height:1.5;
    margin:0 0 22px; max-width:460px;
}

/* ---------- fact pills ---------- */
.aif-facts{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.aif-fact{
    display:flex; align-items:center; gap:6px;
    background:#fff; border:1px solid var(--line);
    padding:8px 13px; border-radius:10px;
    font-size:13px; font-weight:600; color:var(--purple-700);
}

/* ---------- benefits box ---------- */
.aif-benefits{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px;}
.aif-benefits ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.aif-benefits li{display:flex; gap:9px; font-size:14px; color:var(--ink); line-height:1.4;}
.aif-check{
    flex-shrink:0; width:18px; height:18px; border-radius:50%;
    background:#eafaf1; color:var(--success);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800;
}

/* ---------- photo ---------- */
.aif-photo img{
    width:100%; display:block; border-radius:16px;
    box-shadow:var(--shadow); object-fit:cover; max-height:280px;
}

/* ---------- form card ---------- */
.aif-card{background:#fff; border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--line);}

.aif-card-head{
    background:linear-gradient(135deg,var(--purple-700),var(--purple-900));
    color:#fff; padding:20px 24px 18px; border-radius:17px 17px 0 0;
}
.aif-card-head .badge{
    display:inline-block; background:rgba(255,255,255,.15);
    font-size:11px; font-weight:700; padding:4px 10px;
    border-radius:999px; margin-bottom:8px;
}
.aif-card-head h2{margin:0 0 4px; font-size:19px; font-weight:800;}
.aif-card-head p{color: #fff; margin:0; font-size:12.5px; opacity:.85;}

.aif-card-body{padding:22px 24px 24px;}

/* ---------- fields ---------- */
.aif-field{margin-bottom:14px;}
.aif-field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:5px;}
.aif-field .opt{font-weight:500; color:var(--ink-soft); font-size:11.5px;}
.aif-field .req{color:var(--coral-600);}
.aif-field .hint{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}

/* text / email / tel inputs */
.aif-input{
    width:100%; padding:12px 13px;
    border:1.5px solid var(--line); border-radius:10px;
    font-size:14.5px; font-family:inherit; color:var(--ink);
    background:#fbfaff;
}
.aif-input:focus{outline:none; border-color:var(--purple-500); background:#fff;}

/* error messages from CI */
.aif-field .error-msg{font-size:11.5px; color:var(--coral-600); margin-top:3px;}

/* ---------- age radio group ---------- */
.aif-radio-group{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.aif-radio-label{
    display:flex; align-items:center; gap:6px;
    background:#fbfaff; border:1.5px solid var(--line);
    padding:8px 14px; border-radius:10px;
    font-size:13.5px; font-weight:600; color:var(--ink);
    cursor:pointer;
}
.aif-radio-label input{margin:0; accent-color:var(--purple-500);}
.aif-radio-label:has(input:checked){
    border-color:var(--purple-500); background:#f6f1fc; color:var(--purple-700);
}

/* ---------- checkbox group (describes) ---------- */
.aif-check-group{display:grid; gap:7px; margin-top:4px;}
.aif-check-label{
    display:flex; align-items:center; gap:8px;
    font-size:13.5px; color:var(--ink); cursor:pointer;
}
.aif-check-label input{margin:0; accent-color:var(--purple-500);}

/* ---------- native select (state) ---------- */
.aif-select{
    width:100%; padding:12px 13px;
    border:1.5px solid var(--line); border-radius:10px;
    font-size:14.5px; font-family:inherit; color:var(--ink);
    background:#fbfaff; appearance:auto;
}
.aif-select:focus{outline:none; border-color:var(--purple-500); background:#fff;}

/* ---------- schedule custom dropdown ---------- */
.aif-sched-wrap{position:relative;}

.aif-sched-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#fbfaff; border:1.5px solid var(--line); border-radius:10px;
    padding:12px 13px; font-family:inherit; font-size:14.5px;
    cursor:pointer; color:var(--ink-soft); text-align:left;
}
.aif-sched-btn.open,.aif-sched-btn:focus{outline:none; border-color:var(--purple-500); background:#fff;}
.aif-sched-btn .sb-label{color:var(--ink-soft);}
.aif-sched-btn.has-value .sb-label{color:var(--ink); font-weight:600;}
.aif-sched-btn .chevron{flex-shrink:0; transition:transform .15s; color:var(--purple-500);}
.aif-sched-btn.open .chevron{transform:rotate(180deg);}

.aif-sched-caption{
    display:none; align-items:center; gap:6px; margin-top:7px;
    font-size:11.5px; color:var(--ink-soft); line-height:1.4; flex-wrap:wrap;
}
.aif-sched-caption.show{display:flex;}
.aif-sched-caption svg{width:13px;height:13px;vertical-align:-2px;margin-right:2px;color:var(--purple-500);}

.aif-dropdown{
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:6px; display:none;
}
.aif-dropdown.open{display:block;}

.aif-dopt{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:10px; border-radius:8px; font-family:inherit;
}
.aif-dopt:hover{background:#f6f1fc;}
.aif-dopt .opt-main{display:flex; flex-direction:column; gap:1px;}
.aif-dopt .opt-title{font-size:13.5px; font-weight:600; color:var(--ink);}
.aif-dopt .opt-sub{font-size:11.5px; color:var(--ink-soft);}
.aif-dopt .opt-badge{
    font-size:10px; font-weight:800; color:var(--coral-600);
    background:#fff2ef; padding:1px 7px; border-radius:999px; margin-right:6px;
}
.aif-dopt.selected{background:#f6f1fc;}
.aif-dopt.selected .opt-title{color:var(--purple-700);}

/* ---------- privacy + CTA ---------- */
.aif-privacy{
    display:flex; gap:8px; align-items:flex-start;
    font-size:11.5px; color:var(--ink-soft);
    margin:18px 0 16px; line-height:1.4;
}
.aif-privacy input{margin-top:3px; accent-color:var(--purple-500);}
.aif-privacy a{color:var(--purple-500); text-decoration:underline; cursor:pointer;}

.aif-btn{
    width:100%; background:var(--coral-500); color:#fff; border:none;
    padding:14px 16px; border-radius:12px; font-size:15.5px; font-weight:800;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:8px; box-shadow:0 8px 18px rgba(255,107,91,0.35);
    transition:background .15s, opacity .15s;
}
.aif-btn:disabled{opacity:.5; cursor:not-allowed;}
.aif-btn:not(:disabled):hover{background:var(--coral-600);}

.aif-microtrust{
    display:flex; align-items:center; gap:6px; justify-content:center;
    margin-top:12px; font-size:11.5px; color:var(--ink-soft);
}

/* ---------- privacy modal ---------- */
#aif-modal{
    display:none; position:fixed; z-index:9999;
    left:0; top:0; width:100%; height:100%;
    overflow:auto; background:rgba(0,0,0,.5);
}
.aif-modal-content{
    background:#fff; margin:5% auto; padding:28px 32px;
    border-radius:16px; max-width:780px; position:relative;
    max-height:85vh; overflow-y:auto;
}
.aif-modal-close{
    position:absolute; right:18px; top:14px;
    font-size:24px; cursor:pointer; color:var(--ink-soft);
}
.aif-modal-content h2{margin-top:0; font-size:20px; color:var(--purple-900);}
.aif-modal-content h5{color:var(--purple-700); margin:20px 0 6px;}