/* Dos grises y dos oros a propósito
   --------------------------------
   El oro claro (#D2AB74) sobre el negro del aula y de la portada de la ficha
   contrasta 9,2:1: perfecto. Pero sobre blanco se queda en 2,1:1, y el gris
   claro en 2,6:1: por debajo del 4,5:1 que piden las WCAG y que desde junio de
   2025 es exigible por ley en España. No es un capricho de norma: a esos
   niveles el texto pequeño no se lee con sol, con una pantalla mala o con la
   vista cansada.

   Así que el oro claro se queda para los fondos oscuros, los bordes y los
   rellenos, y para el texto sobre blanco se usa --oro-texto (#926C2E, 4,8:1),
   que sigue siendo oro. El gris sube de #9AA1AE a #6E7484 (4,7:1) en todas
   partes: no se usa en ninguna zona oscura, así que no rompe nada.
   ------------------------------------------------------------------------ */

/* ------------------------------------------------------- página de venta
   Mismo idioma que el aula: negro de cine, dorado de la casa, filetes finos
   y tipografía grande. Aquí se compra, así que hay un solo botón y se repite
   al final, cuando ya se ha leído todo. */
.dvc{
 --ancho:min(1180px, calc(100vw - 40px));
 --negro:#0A0B0F; --oro:#D2AB74; --oro-texto:#926C2E; --marfil:#DCD5C9;
 --tinta:#14151A; --tinta2:#585E6B; --tinta3:#6E7484;
 --linea:#E4E6EC; --suave:#FAFAFB;
 width:var(--ancho); margin-left:calc(50% - var(--ancho)/2);
 font-family:"Jost","Helvetica Neue",Arial,sans-serif; color:var(--tinta)}
.dvc *{box-sizing:border-box}
.dvc section::before,.dvc section::after{content:none;display:none}

/* ---------------------------------------------------------------- portada */
.dvc-portada{background:var(--negro);color:#fff;width:100vw;margin-left:calc(50% - 50vw);padding:clamp(34px,5vw,64px) calc(50vw - var(--ancho)/2 + 4px)}
.dvc-portada-dentro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:clamp(26px,4vw,56px);align-items:center}
.dvc-kicker{margin:0 0 14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.dvc-titulo{margin:0 0 20px;font-size:clamp(28px,4.2vw,50px);font-weight:400;line-height:1.08;letter-spacing:-.03em;color:#fff;max-width:20ch}
.dvc-lead{margin:0 0 26px;font-size:clamp(16px,1.5vw,18.5px);line-height:1.65;color:rgba(255,255,255,.72);max-width:52ch}
.dvc-datos{margin:0 0 28px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;color:rgba(255,255,255,.62)}
.dvc-datos li{position:relative;padding-left:16px}
.dvc-datos li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--oro);border-radius:50%}
.dvc-precio{margin:0 0 22px;font-size:clamp(30px,3.6vw,42px);font-weight:400;letter-spacing:-.02em;line-height:1;color:#fff}
.dvc-precio del{opacity:.34;font-size:.55em;margin-right:14px}
.dvc-precio ins{text-decoration:none;color:var(--oro)}
.dvc-acciones{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.dvc-btn{display:inline-block;background:#fff;color:#0A0B0F;text-decoration:none;padding:18px 36px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:background .15s,color .15s}
.dvc-btn:hover{background:var(--oro);color:#0A0B0F}
.dvc-enlace{color:rgba(255,255,255,.72);font-size:15px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.dvc-enlace:hover{color:var(--oro);border-color:var(--oro)}
.dvc-nota{margin:18px 0 0;font-size:13.5px;color:rgba(255,255,255,.45)}
.dvc-tuyo{margin:0 0 20px;font-size:18px;color:var(--oro)}
.dvc-imagen img{display:block;width:100%;height:auto}

/* ----------------------------------------------------------------- cuerpo */
.dvc-cuerpo{padding:clamp(40px,5vw,72px) 0 0}
.dvc-bloque{padding:0 0 clamp(34px,4vw,52px);margin:0 0 clamp(34px,4vw,52px);border-bottom:1px solid var(--linea)}
.dvc-h{margin:0 0 22px;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta3)}
.dvc-puntos{margin:0;padding:0;list-style:none;max-width:70ch}
.dvc-puntos li{position:relative;padding:0 0 0 30px;margin:0 0 18px;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.6;color:var(--tinta)}
.dvc-puntos li:last-child{margin-bottom:0}
.dvc-puntos li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border:1px solid var(--oro);border-radius:50%}

.dvc-resumen{margin:-8px 0 22px;font-size:14px;color:var(--tinta2);letter-spacing:.02em}
.dvc-temario{margin:0;padding:0;list-style:none;max-width:70ch}
/* Treinta y seis clases en una sola columna es una escalera infinita: en
   pantalla ancha se parten en dos y se lee de arriba abajo, como un índice. */
.dvc-dos{max-width:none;columns:2;column-gap:clamp(30px,5vw,72px)}
.dvc-temario li{break-inside:avoid}
.dvc-modulo{margin:24px 0 8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-texto);break-after:avoid}
.dvc-modulo:first-child{margin-top:0}
.dvc-clase{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-top:1px solid var(--linea);font-size:16px;line-height:1.45}
.dvc-n{flex:none;width:22px;font-size:12px;color:var(--oro-texto);font-variant-numeric:tabular-nums}

.dvc-quien{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.dvc-retrato img{display:block;width:100%;height:auto;border-radius:50%;aspect-ratio:1;object-fit:cover}
.dvc-quien-n{margin:0 0 6px;font-size:22px;letter-spacing:-.01em}
.dvc-quien-t{margin:0 0 12px;font-size:16.5px;line-height:1.65;color:var(--tinta2);max-width:52ch}
.dvc-quien-e{margin:0;font-size:15px}
.dvc-quien-e a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--oro)}

/* ----------------------------------------------------------------- cierre */
.dvc-cierre{text-align:center;padding:clamp(40px,5vw,64px) 24px;background:var(--suave);border:1px solid var(--linea);margin:0 0 10px}
.dvc-cierre-h{margin:0 0 20px;font-size:clamp(24px,3vw,34px);font-weight:400;letter-spacing:-.025em}
.dvc-precio-claro{color:var(--tinta)}
.dvc-precio-claro del{opacity:.4}
.dvc-precio-claro ins{color:var(--tinta)}
.dvc-cierre .dvc-acciones{justify-content:center}
.dvc-btn-negro{background:var(--tinta);color:#fff}
.dvc-btn-negro:hover{background:var(--oro);color:#0A0B0F}
.dvc-nota-oscura{color:var(--tinta3)}

@media (max-width:860px){
 .dvc{--ancho:min(1180px, calc(100vw - 20px))}
 .dvc-portada-dentro{grid-template-columns:1fr;gap:26px}
 .dvc-imagen{order:-1}
 .dvc-titulo{max-width:none}
 .dvc-btn{width:100%;text-align:center}
 .dvc-acciones{gap:16px}
 .dvc-quien{grid-template-columns:1fr;text-align:left}
 .dvc-dos{columns:1}
 .dvc-retrato{max-width:130px}
}

/* ------------------------------------------------------- el escaparate
   Sustituye al listado de cursos de Tutor, que era lo último del menú
   principal que dependía de él. */
.dvl{--ancho:min(1180px, calc(100vw - 40px));
 --oro:#D2AB74; --oro-texto:#926C2E;
 --tinta:#14151A; --tinta2:#585E6B; --tinta3:#6E7484;
 --linea:#E4E6EC; --suave:#FAFAFB;
 width:var(--ancho); margin-left:calc(50% - var(--ancho)/2);
 font-family:"Jost","Helvetica Neue",Arial,sans-serif; color:var(--tinta)}
.dvl *{box-sizing:border-box}
.dvl article::before,.dvl article::after{content:none;display:none}
.dvl-cabecera{max-width:60ch;margin:0 0 40px}
.dvl-entradilla{margin:0;font-size:17px;line-height:1.6;color:#585E6B}
.dvl-titulo{margin:0 0 12px;font-size:clamp(26px,3.2vw,38px);font-weight:400;letter-spacing:-.03em;line-height:1.12}
.dvl-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(26px,3.5vw,48px)}
.dvl-capsula{display:flex;flex-direction:column}
.dvl-portada{display:block;overflow:hidden;background:var(--suave);aspect-ratio:16/9}
.dvl-portada img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dvl-capsula:hover .dvl-portada img{transform:scale(1.04)}
.dvl-datos{padding:22px 0 0;display:flex;flex-direction:column;flex:1}
.dvl-nombre{margin:0 0 12px;font-size:clamp(20px,2vw,24px);font-weight:400;line-height:1.22;letter-spacing:-.02em}
.dvl-nombre a{color:var(--tinta);text-decoration:none}
.dvl-nombre a:hover{color:var(--oro-texto)}
.dvl-lead{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--tinta2);max-width:46ch}
.dvl-datos-min{margin:0 0 20px;font-size:13px;letter-spacing:.06em;color:var(--tinta3)}
.dvl-pie{margin:auto 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.dvl-btn{padding:15px 28px;background:var(--tinta);color:#fff}
.dvl-btn:hover{background:var(--oro);color:#0A0B0F}
.dvl-precio{font-size:19px;color:var(--tinta)}
.dvl-precio del{opacity:.4;font-size:.75em;margin-right:8px}
.dvl-precio ins{text-decoration:none;color:var(--oro-texto)}
.dvl-tuyo{font-size:14px;color:var(--oro-texto)}
@media (max-width:860px){
 .dvl{--ancho:min(1180px, calc(100vw - 20px))}
 .dvl-rejilla{grid-template-columns:1fr;gap:34px}
 .dvl-btn{width:100%;text-align:center}
}