/*
 * «Emite en Classicspark» (`/broadcast`, `/es/emite`...). 2.8.43.243, E5 del ingreso 3.
 *
 * Se apoya en la hoja de la pagina de anuncios (`classicspark-advertise.css`, clases `cs220-`: la
 * portada, los beneficios, los pasos, el precio y el cierre) y en la de profesores
 * (`classicspark-teach.css`, clases `cs225-`: el envoltorio del comparativo, la nota honesta y las
 * fuentes, incluido su paso a tarjetas en el movil). Aqui solo va lo propio de esta pagina, con
 * prefijo `cs243-`: el escaparate, las tres listas de «lo que tendras» y las cuatro columnas del
 * comparativo.
 *
 * LAS COLUMNAS SON CUATRO, no seis como en la de profesores, y por eso el ancho se escribe aqui:
 * heredar los anchos de `cs225-` dejaria media tabla vacia.
 */

/* --------------------------------------------------------- Escaparate. Sin cifras ni nombres. */
.cs243-showcase{position:relative;padding:26px 36px 64px 0}
.cs243-stage{position:relative;display:grid;place-items:center;height:236px;overflow:hidden;border:1px solid var(--cs220-line);border-radius:24px;background:radial-gradient(420px 180px at 78% 0,rgba(255,255,255,.26),transparent 70%),linear-gradient(120deg,var(--cs220-wine),var(--cs220-red));box-shadow:0 30px 80px rgba(55,20,32,.16);transform:rotate(-1.2deg)}
.cs243-stage__art{color:rgba(255,255,255,.24);font-size:86px}
.cs243-stage__live{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(15,10,12,.42);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.12em}
.cs243-stage__live>i{width:8px;height:8px;border-radius:50%;background:#ff5a6e;box-shadow:0 0 0 0 rgba(255,90,110,.65);animation:cs243pulse 1.8s infinite}
@keyframes cs243pulse{70%{box-shadow:0 0 0 9px rgba(255,90,110,0)}100%{box-shadow:0 0 0 0 rgba(255,90,110,0)}}
.cs243-stage__bar{position:absolute;left:18px;right:18px;bottom:16px;height:5px;border-radius:999px;background:rgba(255,255,255,.28)}
.cs243-stage__bar>em{display:block;width:62%;height:100%;border-radius:999px;background:#fff}
.cs243-who{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin:-30px 0 0 28px;padding:14px 18px;border:1px solid var(--cs220-line);border-radius:18px;background:#fff;box-shadow:0 18px 46px rgba(55,20,32,.12)}
.cs243-who__faces{display:flex}
.cs243-who__faces>i{width:34px;height:34px;margin-left:-10px;border:3px solid #fff;border-radius:50%;background:var(--cs220-cream)}
.cs243-who__faces>i:first-child{margin-left:0}
.cs243-who__lines{display:grid;flex:1 1 auto;gap:7px}
.cs243-who__lines>b{display:block;height:9px;border-radius:6px;background:#efe8e4}
.cs243-who__lines>b:first-child{width:58%;height:12px;background:#e4d9d4}
.cs243-shield{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:16px;background:var(--cs220-ink);color:#fff;font-size:.9rem;font-weight:700;box-shadow:0 18px 40px rgba(55,20,32,.22)}
.cs243-shield>i{color:#6fd1b4}

/* ------------------------------------------ Lo que incluye: los tres bloques de `PanelDeEmision` */
.cs243-includes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.cs243-group{padding:22px 24px;border:1px solid var(--cs220-line);border-radius:20px;background:#fff}
.cs243-group>h3{margin:0 0 12px;color:var(--cs220-ink);font-family:gilroy-semibold,Arial,sans-serif;font-size:1.02rem;font-weight:400}
.cs243-group>ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cs243-group>ul>li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;color:var(--cs220-muted);font-size:.93rem;line-height:1.5}
.cs243-group>ul>li>i{margin-top:4px;color:#0b6b5e;font-size:13px}
/* «Proximamente» va apagado a proposito: que nadie lo lea como disponible. */
.cs243-group.is-soon{background:var(--cs220-cream);border-style:dashed}
.cs243-group.is-soon>h3{color:var(--cs220-muted)}
.cs243-group.is-soon>ul>li{color:#9b9095}
.cs243-group.is-soon>ul>li>i{color:#b3a8ac}

/* ------------------------------------------------------------------ Comparativo, cuatro columnas */
.cs243-table thead td{width:22%}
.cs243-table thead th{width:19%}
.cs243-table .cs243-col--cs{background:#fdf3f5;color:var(--cs220-ink);font-weight:700}
.cs243-table thead th.cs243-col--cs{width:21%;border-top:3px solid var(--cs220-red);color:var(--cs220-wine)}
.cs243-table td.cs243-col--cs>i{color:var(--cs220-red)}
.cs243-table td.is-si>i{color:#0b6b5e}
.cs243-table td.is-no>i{color:#b3a8ac}
.cs243-table td.is-na{color:#b3a8ac}

.cs243-price__note{display:flex;align-items:flex-start;gap:10px;margin:14px 0 18px;padding:13px 16px;border-radius:14px;background:var(--cs220-cream);color:var(--cs220-ink);font-size:.9rem;line-height:1.55}
.cs243-price__note>i{margin-top:3px;color:var(--cs220-red)}
.cs243-price .cs220-price__big{white-space:normal}
.cs243-steps{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ------------------------------------------------------------------ Anchos */
@media(max-width:1100px){
 .cs243-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
 .cs243-showcase{max-width:560px;padding-right:28px}
 .cs243-includes{grid-template-columns:1fr}
}
/*
 * En el movil, la tabla se vuelve tarjetas con las reglas de `cs225-`; lo unico que hay que repetir
 * es soltar el ancho de nuestra columna, que alli va con su propio prefijo.
 */
@media(max-width:760px){
 .cs243-table .cs243-col--cs{width:auto}
 .cs243-steps{grid-template-columns:1fr}
}
@media(max-width:700px){
 .cs243-showcase{padding:64px 0 58px}
 .cs243-shield{left:0}
 .cs243-who{margin-left:0}
}

/*
 * Los anchos, columna a columna. No son cuatro iguales: la nuestra va primero y algo mas ancha, y la
 * de YouTube necesita sitio porque sus requisitos son la casilla mas larga de la tabla.
 */
.cs243-table thead th.cs243-col--yt{width:24%}
.cs243-table thead th.cs243-col--tw{width:16%}
.cs243-table thead th.cs243-col--fb{width:17%}
.cs243-table td.cs243-col--yt,.cs243-table td.cs243-col--tw,.cs243-table td.cs243-col--fb{color:var(--cs220-muted)}
.cs243-hero .cs220-hero__grid{align-items:center}
@media(max-width:760px){
 .cs243-table thead th.cs243-col--yt,.cs243-table thead th.cs243-col--tw,.cs243-table thead th.cs243-col--fb{width:auto}
}