/* ===========================================================
   IPSE · curso.css  ·  Página de cada curso (estructura como las de EDUCA, con los colores de IPSE).
   El formulario de la derecha usa inscripcion.css.
   =========================================================== */
.ic{--red:#FF2C2C;--redD:#B40017;--redDeep:#6B0010;--ink:#0f172a;--sub:#475569;--line:rgb(15 23 42 / .09);background:#f8fafc}

/* Cabecera */
.ic-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(44px,6vw,78px) 20px clamp(40px,5vw,64px);background:linear-gradient(120deg,var(--redDeep),var(--redD) 45%,#E11D2A)}
.ic-hero::before,.ic-hero::after{content:"";position:absolute;border-radius:50%;border:2px solid rgb(255 255 255 / .12);pointer-events:none}
.ic-hero::before{width:340px;height:340px;right:-80px;top:-120px}
.ic-hero::after{width:220px;height:220px;right:60px;bottom:-140px}
.ic-hero-in{position:relative;z-index:1;max-width:1060px;margin:0 auto}
.ic-kicker{display:inline-block;padding:7px 14px;border-radius:999px;background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .28);font:900 11px/1 system-ui,Arial;letter-spacing:.16em;text-transform:uppercase}
.ic-title{font:900 clamp(30px,4.4vw,52px)/1.08 system-ui,Arial;letter-spacing:-.03em;margin:16px 0 0;color:#fff}
.ic-title span{color:#FFE1E1}
.ic-sub{font:500 clamp(15px,1.4vw,17px)/1.55 system-ui,Arial;color:rgb(255 255 255 / .88);max-width:720px;margin:14px 0 0}
.ic-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ic-tags span{padding:7px 13px;border-radius:999px;background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .26);font:800 12.5px/1 system-ui,Arial}

/* Contenido + formulario */
.ic-layout{max-width:1100px;margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:34px;align-items:start}
.ic-main > section{margin-bottom:38px}
.ic-main h2{font:900 22px/1.2 system-ui,Arial;color:var(--ink);letter-spacing:-.01em;margin:0 0 14px}
.ic-text{font:500 15.5px/1.7 system-ui,Arial;color:var(--sub);margin:0}

/* Interruptor de malla y módulos */
.ic-ayuda{ margin:-4px 0 12px; font-size:14px; color:#64748b; }
.ic-seg{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; margin:0 0 16px; background:#eef2f7; border-radius:14px; }
.ic-seg button{ display:flex; align-items:center; gap:8px; padding:10px 18px; border:0; border-radius:10px; background:transparent; color:#475569; font-family:system-ui,Arial; font-size:15px; font-weight:700; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; }
.ic-seg button svg{ width:18px; height:18px; flex-shrink:0; }
.ic-seg button small{ font-size:12px; font-weight:600; color:#94a3b8; }
.ic-seg button:hover{ color:#0f172a; }
.ic-seg button[aria-pressed="true"]{ background:#fff; color:var(--redD); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.ic-seg button[aria-pressed="true"] small{ color:#64748b; }
.ic-seg button:focus-visible{ outline:2px solid var(--redD); outline-offset:2px; }
.ic-mods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ic-mods[hidden]{display:none}
.ic-mods details,.ic-mod-sola{background:#fff;border:1px solid var(--line);border-radius:12px}
.ic-mods details[open]{border-color:rgb(255 44 44 / .35)}
.ic-mods summary,.ic-mod-sola{display:flex;align-items:baseline;gap:14px;padding:13px 16px}
.ic-mods summary{position:relative;padding-right:44px;list-style:none;cursor:pointer}
.ic-mods summary::-webkit-details-marker{display:none}
.ic-mods summary::after{content:"+";position:absolute;right:16px;top:10px;font:900 20px/1 system-ui,Arial;color:var(--redD)}
.ic-mods details[open] summary::after{content:"–"}
.ic-mods details ul{list-style:none;margin:0;padding:0 16px 14px 104px}
.ic-mods details ul li{position:relative;padding:4px 0 4px 16px;font:500 14px/1.55 system-ui,Arial;color:var(--sub)}
.ic-mods details ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.ic-nota{font:600 14px/1.5 system-ui,Arial;color:var(--sub);margin:0 0 12px}
.ic-mod-n{flex-shrink:0;min-width:74px;font:900 11.5px/1 system-ui,Arial;letter-spacing:.06em;text-transform:uppercase;color:var(--redD)}
.ic-mod-t{font:700 15px/1.4 system-ui,Arial;color:var(--ink)}

/* Datos y salidas */
.ic-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ic-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 8px 24px rgb(15 23 42 / .05)}
.ic-box h3{font:900 15px/1.2 system-ui,Arial;color:var(--redD);margin:0 0 10px}
.ic-box p,.ic-box div{font:500 14.5px/1.65 system-ui,Arial;color:var(--sub);margin:0}
.ic-box b{color:var(--ink)}

/* Preguntas frecuentes */
.ic-faq{display:grid;gap:8px}
.ic-faq details{background:#fff;border:1px solid var(--line);border-radius:12px}
.ic-faq summary{position:relative;list-style:none;cursor:pointer;padding:15px 44px 15px 18px;font:800 15px/1.35 system-ui,Arial;color:var(--ink)}
.ic-faq summary::-webkit-details-marker{display:none}
.ic-faq summary::after{content:"+";position:absolute;right:18px;top:12px;font:900 20px/1 system-ui,Arial;color:var(--redD)}
.ic-faq details[open] summary::after{content:"–"}
.ic-faq p{margin:0;padding:0 18px 16px;font:500 14.5px/1.6 system-ui,Arial;color:var(--sub)}
.ic-faq a{color:var(--redD);font-weight:800}

/* Otros cursos */
.ic-rel-sec{max-width:1100px;margin:0 auto;padding:10px 20px 56px}
.ic-rel-sec h2{font:900 clamp(22px,2.4vw,28px)/1.2 system-ui,Arial;color:var(--ink);text-align:center;margin:0 0 22px}
.ic-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ic-rel a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 8px 24px rgb(15 23 42 / .05);transition:transform .2s,box-shadow .2s}
.ic-rel a:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgb(180 0 23 / .14)}
.ic-rel img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ic-rel a > span{padding:14px 16px}
.ic-rel b{display:block;font:800 15px/1.3 system-ui,Arial;color:var(--ink)}
.ic-rel a > span span{font:700 12.5px/1 system-ui,Arial;color:var(--redD)}

/* Franja final */
.ic-cta{text-align:center;color:#fff;padding:clamp(40px,5vw,64px) 20px;background:linear-gradient(120deg,var(--redDeep),var(--redD) 45%,#E11D2A)}
.ic-cta h2{font:900 clamp(24px,3vw,34px)/1.15 system-ui,Arial;margin:0 0 10px}
.ic-cta p{font:500 16px/1.55 system-ui,Arial;color:rgb(255 255 255 / .88);margin:0 auto 22px;max-width:560px}
.ic-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ic-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font:900 15px/1 system-ui,Arial;text-decoration:none}
.ic-btn--wa{background:#16A34A;color:#fff;box-shadow:0 10px 24px rgb(0 0 0 / .18)}
.ic-btn--ghost{background:#fff;color:var(--redD)}

/* Formulario a la derecha: compacto y fijo al hacer scroll */
.ic-layout > .insc-card{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow:auto;padding:22px 22px 20px}
.ic-layout .insc-tit{font-size:20px;margin-bottom:2px}
.ic-layout .insc-sub{font-size:13px;line-height:1.4;margin-bottom:14px}
.ic-layout .frm{gap:10px}
.ic-layout .insc-elegido{padding:9px 12px;gap:10px}
.ic-layout .insc-elegido-ico{flex-basis:24px;height:24px;font-size:13px}
.ic-layout .insc-elegido b{font-size:14px}
.ic-layout .frm-field{gap:4px}
.ic-layout .frm-field input{padding:10px 12px;font-size:14.5px}
.ic-layout .frm-pills span,.ic-layout .insc-mod{padding:9px 12px;font-size:14px}
.ic-layout .frm-acepto{font-size:12.5px}
.ic-layout .frm-submit{padding:12px 18px;font-size:14.5px}
.ic-layout > .insc-card{border:1.5px solid rgb(255 44 44 / .28);box-shadow:0 24px 60px rgb(180 0 23 / .20),0 6px 18px rgb(15 23 42 / .08)}
.ic-layout > .insc-card::before{display:none}

/* Pantallas anchas: el contenido queda en su lugar y el formulario se centra en el espacio libre de la derecha */
@media(min-width:1240px){
  .ic-layout{max-width:none;grid-template-columns:calc((100vw - 1100px) / 2 - 34px) minmax(0,666px) minmax(0,1fr)}
  .ic-main{grid-column:2}
  .ic-layout > .insc-card{grid-column:3;justify-self:center;max-width:420px}
}
@media(max-width:900px){
  .ic-layout{grid-template-columns:1fr;padding-top:28px}
  .ic-layout > .insc-card{position:relative;top:auto;order:-1;justify-self:center;max-height:none;overflow:visible}
  .ic-two,.ic-rel{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ic-seg{ display:grid; width:100%; } .ic-seg button{ justify-content:center; padding:10px 8px; } .ic-seg button small{ display:none; }
  .ic-mods summary,.ic-mod-sola{flex-direction:column;gap:4px}
  .ic-mods details ul{padding-left:30px}
}