/*
 * «Enseña en Classicspark» (`/teach`, `/es/ensena`...). 2.8.43.225, Fase A5 del ingreso 4.
 *
 * 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 del distintivo de profesor
 * (`classicspark-teacher-level.css`: el distintivo y la escalera de niveles). Aqui solo va lo
 * propio de esta pagina, con prefijo `cs225-`: el escaparate, la escalera en cuatro columnas y el
 * comparativo.
 */

/* ------------------------------------------------------------------ Escaparate. Sin cifras. */
.cs225-showcase{position:relative;padding:26px 36px 64px 0}
.cs225-card{position:relative;display:block;overflow:hidden;border:1px solid var(--cs220-line);border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(55,20,32,.16);transform:rotate(-1.2deg)}
.cs225-card__cover{display:grid;place-items:center;height:132px;background:radial-gradient(420px 160px at 80% 0,rgba(255,255,255,.28),transparent 70%),linear-gradient(120deg,var(--cs220-wine),var(--cs220-red));color:rgba(255,255,255,.22);font-size:78px}
.cs225-card__avatar{position:absolute;left:24px;top:92px;display:grid;place-items:center;width:78px;height:78px;border:4px solid #fff;border-radius:50%;background:var(--cs220-cream);color:#b8a9ae;font-size:36px}
.cs225-card__body{display:grid;justify-items:start;gap:12px;padding:52px 24px 24px}
.cs225-card__body small{color:var(--cs220-red);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cs225-card__lines{display:grid;gap:8px;width:100%}
.cs225-card__lines i{display:block;height:10px;border-radius:6px;background:#efe8e4}
.cs225-card__lines i:first-child{width:62%;height:14px;background:#e4d9d4}
.cs225-card__lines i:last-child{width:84%}
.cs225-card .cs222-teacher:not(#cs222){font-size:13px}
.cs225-card__cta{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:11px 18px;border-radius:12px;background:#d5003b;color:#fff;font-size:.92rem;font-weight:700}

.cs225-music{position:absolute;right:0;top:0;display:grid;gap:10px;width:min(260px,64%);padding:16px 18px;border:1px solid var(--cs220-line);border-radius:18px;background:#fff;box-shadow:0 22px 50px rgba(55,20,32,.14);transform:rotate(1.6deg)}
.cs225-music b{display:inline-flex;align-items:center;gap:8px;font-size:.86rem}
.cs225-music b>i{color:var(--cs220-red)}
.cs225-wave{display:flex;align-items:center;justify-content:space-between;height:44px}
.cs225-wave i{flex:0 0 6px;height:var(--h);border-radius:999px;background:linear-gradient(180deg,#e2446c,var(--cs220-red))}
.cs225-toggle{display:flex;align-items:center;gap:8px;color:var(--cs220-muted);font-size:.78rem;font-weight:700}
.cs225-toggle>i{color:var(--cs220-ink)}
.cs225-toggle em{position:relative;flex:0 0 auto;width:34px;height:20px;margin-left:auto;border-radius:999px;background:#0b6b5e}
.cs225-toggle em::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.cs225-commission{position:absolute;left:-14px;bottom:18px;display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border:1px solid var(--cs220-line);border-radius:14px;background:#fff;box-shadow:0 16px 36px rgba(55,20,32,.12);font-size:.95rem;font-weight:800}
.cs225-commission>i{color:#0b6b5e;font-size:18px}

/* ------------------------------------------------------------------ Niveles: la escalera de siempre, en cuatro columnas */
.cs225-levels .cs223-ladder{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cs225-levels .cs223-step{align-content:start;gap:12px;padding:22px 20px;border-color:var(--cs220-line);border-radius:20px}
.cs225-levels .cs223-step__need{font-size:.92rem;line-height:1.55}
.cs225-levels .cs223-step__gets{gap:7px}
.cs225-levels .cs223-step__gets li{display:grid;grid-template-columns:14px minmax(0,1fr);align-items:baseline;column-gap:8px;row-gap:4px;font-size:.9rem;line-height:1.45}
.cs225-levels .cs223-step__gets li em{grid-column:2;justify-self:start;font-size:.72rem}
.cs225-levels .cs222-teacher:not(#cs222){font-size:13px}
.cs225-note{display:flex;align-items:baseline;gap:9px;margin-top:18px!important;color:var(--cs220-muted);font-size:.92rem}
.cs225-note>i{color:var(--cs220-red)}

/* ------------------------------------------------------------------ Comparativo */
.cs225-table-wrap{overflow-x:auto;border:1px solid var(--cs220-line);border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(55,20,32,.06)}
.cs225-table{width:100%;min-width:980px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.93rem;line-height:1.45}
.cs225-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs225-table th,.cs225-table td{padding:16px 16px;border-bottom:1px solid var(--cs220-line);text-align:left;vertical-align:top}
.cs225-table tbody tr:last-child>*{border-bottom:0}
.cs225-table thead th{padding-top:20px;color:var(--cs220-ink);font-family:gilroy-semibold,Arial,sans-serif;font-size:1rem;font-weight:400}
.cs225-table thead td{width:16%}
.cs225-table thead th{width:13.4%}
.cs225-table tbody th{color:var(--cs220-ink);font-weight:700}
.cs225-table td{color:var(--cs220-muted)}
.cs225-table td>i{margin-right:7px;font-size:14px}
.cs225-table td.is-si>i{color:#0b6b5e}
.cs225-table td.is-no>i{color:#b3a8ac}
.cs225-table td.is-na{color:#b3a8ac}
.cs225-table .cs225-col--cs{background:#fdf3f5;color:var(--cs220-ink);font-weight:700}
.cs225-table thead th.cs225-col--cs{width:17%}
.cs225-table thead .cs225-col--cs{border-top:3px solid var(--cs220-red);color:var(--cs220-wine)}
.cs225-table td.cs225-col--cs>i{color:var(--cs220-red)}
.cs225-after{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 34px;margin-top:22px}
.cs225-honest{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-radius:16px;background:var(--cs220-cream);color:var(--cs220-ink);font-size:.95rem;line-height:1.55}
.cs225-honest>i{margin-top:3px;color:var(--cs220-red)}
.cs225-sources{display:grid;gap:8px;color:var(--cs220-muted);font-size:.84rem;line-height:1.6}
.cs225-sources b{color:var(--cs220-ink)}
.cs225-sources a{white-space:nowrap;color:var(--cs220-wine);text-decoration:underline;text-decoration-color:rgba(139,0,30,.3);text-underline-offset:2px}
.cs225-sources a:hover{color:var(--cs220-red)}

.cs225-price .cs220-btn{margin-top:4px}
.cs225-price .cs220-price__big{white-space:normal}

/* ------------------------------------------------------------------ Anchos */
@media(max-width:1100px){
 .cs225-levels .cs223-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
 .cs225-showcase{max-width:560px;padding-right:28px}
 .cs225-after{grid-template-columns:1fr}
}
/*
 * En el movil, la tabla se vuelve tarjetas: una por pregunta, con cada servicio en su renglon. Una
 * tabla de siete columnas deslizando de lado se lee mal a 390 px, y la primera columna -la nuestra-
 * se perderia de vista al deslizar.
 */
@media(max-width:760px){
 .cs225-table-wrap{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
 .cs225-table,.cs225-table tbody,.cs225-table tr,.cs225-table th,.cs225-table td{display:block;width:auto;min-width:0}
 .cs225-table thead{display:none}
 .cs225-table tbody{display:grid;gap:14px}
 .cs225-table tr{overflow:hidden;border:1px solid var(--cs220-line);border-radius:18px;background:#fff}
 .cs225-table tbody th{width:auto;padding:14px 16px;background:var(--cs220-wine);color:#fff;font-family:gilroy-semibold,Arial,sans-serif;font-size:1.02rem;font-weight:400}
 .cs225-table td{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);align-items:baseline;gap:10px;padding:11px 16px;border-bottom:1px solid var(--cs220-line)}
 .cs225-table td::before{content:attr(data-label);grid-column:1;color:var(--cs220-ink);font-size:.8rem;font-weight:700}
 .cs225-table td>i{display:none}
 .cs225-table td>span{grid-column:2}
 .cs225-table .cs225-col--cs{width:auto}
 .cs225-table tr>td:last-child{border-bottom:0}
}
@media(max-width:700px){
 .cs225-showcase{padding:64px 0 58px}
 .cs225-commission{left:0}
}
@media(max-width:560px){
 .cs225-levels .cs223-ladder{grid-template-columns:1fr}
 .cs225-music{width:78%}
 .cs225-card__cover{height:110px;font-size:62px}
 .cs225-card__avatar{top:72px;width:66px;height:66px;font-size:30px}
 .cs225-card__body{padding:44px 18px 20px}
}