/* =====================================================================
   ICSE · Piezas de las páginas de producto, blog e institucionales
   Todo se tiñe con el color del producto de la página: <body data-product="sub|es|cp|inc">
   (variables --pc, --pc-deep, --pc-soft, --pc-line, --pc-on de site.css).
   Sin data-product (blog, historia) se usa el azul ICSE.
   ===================================================================== */
body{--pc:#0069B4;--pc-deep:#004A80;--pc-soft:#EAF4FB;--pc-line:#C9E1F3;--pc-on:#9AC8E9;--line:#E3EBF3;--muted:#5a6b7d;--ink:#13263d}
:focus-visible{outline:3px solid #5FB4EC;outline-offset:2px}

/* Migas de pan */
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:#B9C7D6}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--pc-deep)}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

/* Cabecera de producto */
.phero{position:relative;padding:22px 0 56px;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0 0 0 auto;width:46%;background:var(--pc-soft);border-bottom-left-radius:120px;z-index:-1}
.phero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-top:22px}
.pchip{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-deep);background:#fff;border:1.5px solid var(--pc-line);padding:7px 13px 7px 8px;border-radius:999px}
.pchip .ic{width:22px;height:22px;border-radius:7px;background:var(--pc);color:#fff;display:grid;place-items:center}
.pchip .ic svg{width:13px;height:13px}
.phero h1{font-size:clamp(36px,5vw,62px);font-weight:300;letter-spacing:-.035em;line-height:1.02;margin:18px 0 16px;color:var(--ink)}
.phero h1 b{font-weight:800;color:var(--pc)}
.phero .lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);line-height:1.55;max-width:560px}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.phero-media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 40px 80px -40px rgba(8,19,32,.5)}
.phero-media img{width:100%;height:100%;object-fit:cover}
.phero-media .tag{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 14px 30px -14px rgba(8,19,32,.45);display:flex;align-items:center;gap:10px}
.phero-media .tag b{font-size:22px;font-weight:800;color:var(--pc)}
.pstats{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.pstats div{display:flex;flex-direction:column}
.pstats b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--pc-deep);line-height:1.1}
.pstats span{font-size:13px;color:var(--muted)}

/* Botones de producto */
.btn-pc{background:var(--pc);color:#fff;box-shadow:0 14px 30px -14px var(--pc)}
.btn-pc:hover{background:var(--pc-deep);transform:translateY(-2px)}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid #C3D2E0}
.btn-line:hover{border-color:var(--pc);color:var(--pc-deep);transform:translateY(-2px)}

/* Secciones */
.psec{padding:72px 0}
.psec.soft{background:#F6F9FC;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.psec.tint{background:var(--pc-soft)}
.psec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:30px;flex-wrap:wrap}
.psec-head .k{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pc);margin-bottom:10px}
.psec-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:300;letter-spacing:-.03em;line-height:1.08;color:var(--ink);max-width:720px}
.psec-head h2 b{font-weight:800}
.psec-head p{font-size:16px;color:var(--muted);max-width:620px;margin-top:10px;line-height:1.55}
.psec-head .more{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--pc-deep);white-space:nowrap}
.psec-head .more svg{width:16px;height:16px}

/* Filtros */
.pfilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px}
.pfilters .search{flex:1 1 260px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #DCE4EC;border-radius:999px;padding:0 16px;min-height:46px}
.pfilters .search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.pfilters .search input{border:0;outline:0;font:inherit;font-size:15px;width:100%;background:none;color:var(--ink)}
.pfilters .search:focus-within{border-color:var(--pc)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid #DCE4EC;background:#fff;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--pc);color:var(--pc-deep)}
.chip.on,.chip[aria-pressed="true"]{background:var(--pc);border-color:var(--pc);color:#fff}
.chip .n{font-size:12px;opacity:.7}
.pcount{font-size:14px;color:var(--muted);margin:-8px 0 18px}
.pcount b{color:var(--ink)}

/* Tarjetas */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.pcard:hover{transform:translateY(-4px);border-color:var(--pc-line);box-shadow:0 30px 60px -36px rgba(8,19,32,.45)}
.pcard .ph{position:relative;aspect-ratio:16/10;background:var(--pc-soft) center/cover no-repeat}
.pcard .ph .badge{position:absolute;left:12px;top:12px;background:#fff;color:var(--pc-deep);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.pcard .ph .new{position:absolute;right:12px;top:12px;background:#E11D2E;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.pcard .bd{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.pcard .eyebrow2{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pc)}
.pcard h3{font-size:18.5px;font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:6px 0 10px}
.pcard p{font-size:14px;color:var(--muted);line-height:1.5}
.pmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.pmeta span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink);background:#F2F5F9;padding:5px 10px;border-radius:999px}
.pmeta svg{width:13px;height:13px;color:var(--pc)}
.pcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:800;color:var(--pc-deep)}
.pcard .go svg{width:16px;height:16px;transition:transform .2s}
.pcard:hover .go svg{transform:translateX(4px)}
.pcard a.cover{position:absolute;inset:0;z-index:1}
.pcard .bd a:not(.cover),.pcard button{position:relative;z-index:2}
.pempty{padding:40px;text-align:center;border:1.5px dashed #C3D2E0;border-radius:22px;color:var(--muted)}

/* Bloques de ventajas / servicios */
.pfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.pfeat .it{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;scroll-margin-top:140px}
.pfeat .it .ic{width:46px;height:46px;border-radius:14px;background:var(--pc-soft);color:var(--pc);display:grid;place-items:center;margin-bottom:14px}
.pfeat .it .ic svg{width:22px;height:22px}
.pfeat .it .num{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--pc);display:block;margin-bottom:6px}
.pfeat .it h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink)}
.pfeat .it p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* Pasos */
.psteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:st}
.psteps li{list-style:none;position:relative;padding:22px 22px 22px 70px;background:#fff;border:1px solid var(--line);border-radius:20px}
.psteps li::before{counter-increment:st;content:counter(st);position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:50%;background:var(--pc);color:#fff;font-weight:800;display:grid;place-items:center}
.psteps b{display:block;font-size:16px;font-weight:800;margin-bottom:4px;color:var(--ink)}
.psteps span{font-size:14px;color:var(--muted);line-height:1.5}

/* Banda de llamada a la acción */
.pband{position:relative;border-radius:28px;background:var(--pc);color:#fff;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;overflow:hidden}
.pband::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08)}
.pband h2{font-size:clamp(26px,3vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.1;max-width:620px}
.pband h2 b{font-weight:800}
.pband p{color:rgba(255,255,255,.82);margin-top:8px;max-width:560px}
.pband .acts{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.pband .btn-light{background:#fff;color:var(--pc-deep)}
.pband .btn-ghost-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.pband .btn-ghost-w:hover{border-color:#fff;transform:translateY(-2px)}

/* Preguntas frecuentes */
.pfaq{display:grid;gap:10px;max-width:860px}
.pfaq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px}
.pfaq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:18px 0;font-weight:800;font-size:16px;color:var(--ink)}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--pc);transition:transform .2s}
.pfaq details[open] summary::after{transform:rotate(45deg)}
.pfaq details p{padding:0 0 18px;color:var(--muted);line-height:1.6;font-size:15px}

/* Formulario en página */
.pform{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 30px 60px -40px rgba(8,19,32,.4)}
.pform h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.pform .sub{font-size:14px;color:var(--muted);margin-bottom:16px}
.pform .field{display:block;width:100%;border:1.5px solid #e2e9f1;border-radius:12px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);background:#fbfdff;margin-bottom:10px}
.pform .field:focus{outline:0;border-color:var(--pc);background:#fff;box-shadow:0 0 0 3px rgba(0,105,180,.1)}
.pform .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pform textarea.field{min-height:110px;resize:vertical}
.pform .legal{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:4px 0 14px}
.pform .legal a{text-decoration:underline}
.pform .btn{width:100%;justify-content:center}

/* Navegación interna fija (anclas de la página) */
.ptabs{position:sticky;top:72px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ptabs-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ptabs a{flex-shrink:0;padding:14px 14px;font-size:14px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.ptabs a:hover,.ptabs a.on{color:var(--pc-deep);border-bottom-color:var(--pc)}
[id]{scroll-margin-top:140px}

/* Texto largo (artículos, páginas institucionales) */
.prose{font-size:17px;line-height:1.75;color:#24364b}
.prose h2{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:40px 0 12px}
.prose h3{font-size:21px;font-weight:800;color:var(--ink);margin:28px 0 8px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--pc-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:4px solid var(--pc);background:var(--pc-soft);padding:16px 20px;border-radius:0 14px 14px 0;margin:24px 0;font-weight:600;color:var(--ink)}
.ph-note{display:inline-block;background:#FFF7D6;border:1px dashed #E0B400;color:#6B5600;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:8px}

@media(max-width:980px){
  /* El fondo suave arranca a media altura de la foto: nunca corta textos ni cifras */
  .phero::before{width:100%;height:calc(31vw + 44px);top:auto;bottom:0;border-radius:40px 40px 0 0}
  .phero-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .phero-media{aspect-ratio:16/10}
  .ptabs{top:64px}
}
@media(max-width:640px){
  .psec{padding:52px 0}
  .pband{padding:30px 24px;border-radius:22px}
  .pform{padding:22px 18px}
  .pform .row{grid-template-columns:1fr;gap:0}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .pstats{gap:12px 22px}
  .pstats b{font-size:22px}
}

/* Modalidades de FP Superior: exactamente tres */
@media(min-width:861px){.pfeat.pfeat-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Móvil: las cifras del hero en una rejilla ordenada (3 en fila, o 2x2 si son 4), sin cifras sueltas */
@media(max-width:640px){
  .pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 14px}
  .pstats:has(> div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstats span{font-size:12.5px;line-height:1.3;margin-top:2px}
}

/* Móvil: tarjetas de catálogo más compactas (foto apaisada, resumen en 2 líneas) para que las listas no se hagan eternas */
@media(max-width:640px){
  .pgrid{gap:14px}
  .pcard .ph{aspect-ratio:16/7}
  .pcard .bd{padding:14px 16px 16px}
  .pcard h3{font-size:17px;margin:4px 0 6px}
  .pcard p.res,.pcard .bd>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
  .pcard .pmeta{display:flex;flex-wrap:wrap;gap:6px}
  .pcard .go{margin-top:10px}
}

/* Móvil: tarjetas de modalidades y servicios con el icono a la izquierda del título (menos altura, misma información) */
@media(max-width:640px){
  .pfeat{gap:12px}
  .pfeat .it{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px}
  .pfeat .it>*{grid-column:2}
  .pfeat .it .ic{grid-column:1;grid-row:1/span 3;width:42px;height:42px;margin:0}
  .pfeat .it .num{grid-column:2}
  .pfeat .it h3{font-size:17px;margin:0 0 4px;align-self:center}
  .pfeat .it p{font-size:14px}
  .pfeat .it .for,.pfeat .it .more{justify-self:start}
}

/* Grado medio: acceso a becas en la columna lateral */
.gm-becas{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:18px;border:1.5px solid #E8C766;background:linear-gradient(135deg,#FFF8E1,#fff 75%);color:var(--ink);transition:.18s}
.gm-becas:hover{transform:translateY(-2px);box-shadow:0 18px 32px -26px rgba(122,92,0,.6)}
.gm-becas .st{width:38px;height:38px;border-radius:11px;background:#C9A227;color:#fff;display:grid;place-items:center;flex-shrink:0}
.gm-becas .st svg{width:17px;height:17px}
.gm-becas .tx{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.gm-becas b{font-size:15px;font-weight:800}
.gm-becas .tx span{font-size:13.5px;color:var(--muted)}

/* Auditoría final: sin elementos sueltos en la última fila */
@media(min-width:1101px){.psteps.psteps-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:641px){.pstats:has(> div:nth-child(4)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 22px}}