/* ==========================================================================
   Macarena Olávarri · landing del curso (curso.html, en /curso)
   Maca la pidió aparte (14 oct): en el sitio completo, quien llega por el
   curso se pierde entre todo lo demás. Va encima de main.css, paginas.css y
   fondos.css: la misma letra, los mismos colores (--tinta, --accion,
   --acento, --palabra-*) y piezas de Mis cursos (el editor del temario, el
   sello, la banda, las preguntas). Aquí solo lo que es de esta página.
   ========================================================================== */

/* La barra: sin menú. En el teléfono quedan solo el botón de inscribirse e
   "Iniciar sesión" (para las alumnas que regresan) */
@media (max-width: 760px) {
  .pagina--curso .barra__nav { display: flex; gap: 14px; }
  .pagina--curso .barra__nav a:not(.barra__cursos, .barra__sesion) { display: none; }
  .pagina--curso .barra__nav .barra__sesion { font-size: 13px; gap: 5px; }
  .pagina--curso .barra__sesion svg { width: 15px; height: 15px; }
  .pagina--curso .barra__nav .barra__cursos { padding: 9px 14px 10px; font-size: 13px; }
}

/* "Tú serás la artista.", en naranja (Maca, 29 oct) */
.pagina--curso .c-mensaje__remate { color: var(--acento); }

/* "Nuevos lugares" o "Sold out" (opciones.js pone html.curso-soldout) */
html:not(.curso-soldout) .si-sold,
html.curso-soldout .si-lugares { display: none; }

.cu-h2 {
  margin: 0; color: var(--tinta);
  font-weight: 900; font-size: clamp(38px, 5vw, 86px); line-height: .94; letter-spacing: -.04em;
}
.cu-h2 em { font-style: normal; font-weight: 300; }

/* ==========================================================================
   1 · Portada
   ========================================================================== */
.cu-portada {
  position: relative;
  display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 3vw;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--alto-barra) + 3vh) var(--margen) 7vh;
}
.cu-portada__txt { position: relative; z-index: 2; }
.cu-titular { font-size: clamp(60px, 9.4vw, 176px); }
.cu-editar { position: relative; }
.cu-editar .garabato { left: -6%; width: 112%; }

/* La frase en pixel, con la palabra que cambia (curso.js), como en home */
.cu-frase {
  margin: 4.5vh 0 0;
  font-family: var(--f-pixel); font-size: clamp(15px, 1.75vw, 28px); line-height: 1.3;
}
.cu-palabra { display: inline-block; font-weight: 700; color: var(--palabra-1); transition: color .5s ease; }
.cu-palabra.is-cambio { animation: subtitulo .5s var(--muelle) backwards; }

.cu-portada__sub {
  margin: 22px 0 0; max-width: 21em;
  font-weight: 300; font-size: clamp(20px, 1.9vw, 31px); line-height: 1.15; letter-spacing: -.015em;
}
.cu-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
html.js .cu-acciones.revela { transition-delay: .2s; }
.cu-datos {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 30px 0 0; padding: 0; list-style: none;
  font-family: var(--f-pixel); font-size: 11px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
}
.cu-datos li { display: flex; align-items: center; gap: 9px; }
.cu-datos li::before { content: ""; width: 8px; height: 8px; background: var(--acento); }

/* Su foto en formato foto, con su fondo y en recuadro (lo pidió Maca, 15
   oct): borde negro y sombra dura, como la ventana y el globo de pixeles */
.cu-portada__foto {
  position: relative; z-index: 1; margin: 0; justify-self: center;
  width: min(28vw, 42vh, 440px);
  container-type: inline-size; /* el globo se mide con la foto (cqw) */
}
.cu-portada__img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover; /* la foto vertical, completa */
  border: 3px solid var(--tinta); box-shadow: 12px 12px 0 var(--tinta);
  rotate: 2deg;
}
html.js .cu-portada__img { opacity: 0; translate: 0 10vh; rotate: -6deg; transition: opacity .8s ease .2s, translate 1.4s var(--salida) .2s, rotate 1.6s var(--muelle) .2s; }
html.js.is-cargado .cu-portada__img { opacity: 1; translate: 0 0; rotate: 2deg; }

/* El globo de pixeles de su página de Kajabi: "creative content loading...".
   Va sobre la orilla de arriba de la foto, para no taparle la cara (lo
   pidió Maca, 15 oct). Todo se mide con el ancho de la foto (cqw): en
   compu y en teléfono queda igual, del mismo tamaño y en el mismo lugar */
.cu-globo {
  position: absolute; left: -9%; top: -4%; z-index: 3; margin: 0;
  left: -9cqw; top: -6cqw;
  padding: .85em 1.15em .8em;
  background: #fff; color: var(--tinta);
  border: 3px solid var(--tinta); box-shadow: 5px 5px 0 var(--tinta);
  font-family: var(--f-pixel); font-size: 13px; font-size: 2.9cqw; line-height: 1.3; white-space: nowrap;
  rotate: -8deg;
}
.cu-globo::after {
  content: ""; position: absolute; right: 22%; bottom: -1.1em; width: 1.3em; height: 1.1em;
  background: var(--tinta);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.cu-globo span { display: inline-block; width: 3ch; overflow: hidden; vertical-align: bottom; animation: puntos 1.8s steps(4, jump-none) infinite; }
@keyframes puntos { from { width: 0; } to { width: 3ch; } }
html.js .cu-globo { opacity: 0; scale: .4; transition: opacity .3s ease 1.2s, scale .8s var(--muelle) 1.2s; }
html.js.is-cargado .cu-globo { opacity: 1; scale: 1; }

.cu-portada .sello {
  position: absolute; right: -10%; bottom: 6%; z-index: 3;
  width: clamp(120px, 11vw, 190px); aspect-ratio: 1;
}

.cu-banda { position: relative; z-index: 2; rotate: 1.5deg; }
/* Las bandas de esta página van en azul marino (Maca, 22 oct); en las otras
   páginas siguen en el acento */
.pagina--curso .banda { background: var(--tono-3); color: var(--tono-3-tinta); }
.pagina--curso .banda__pista i { color: var(--acento); }

/* ==========================================================================
   2 · Un curso para aprender a: una ventana de compu vieja, como la de su
   página de Kajabi, encima de ella en el sillón
   ========================================================================== */
.cu-aprende {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  max-width: 1360px; margin: 0 auto; padding: 16vh var(--margen) 12vh;
}
.cu-aprende__maca {
  width: 100%; max-width: 620px; height: auto; justify-self: end;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .16));
  rotate: -3deg;
}
/* arriba de la ventana va su nota de voz, para que no quede escondida (26 oct) */
.cu-aprende__lado { position: relative; z-index: 1; display: grid; gap: 44px; }
.ventana {
  --marco: var(--tono-3); /* el contorno, en azul marino (Maca, 22 oct) */
  position: relative; z-index: 1; margin-left: -9vw;
  background: #fff; color: var(--tinta);
  border: 3px solid var(--marco); box-shadow: 12px 12px 0 var(--marco);
}
html.js .ventana.revela { translate: none; scale: .6; transition: opacity .3s ease .25s, scale .8s var(--muelle) .25s; }
html.js .ventana.revela.is-visible { scale: 1; }
.ventana__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 9px 9px 16px;
  background: var(--marco); color: var(--tono-3-tinta);
  font-family: var(--f-pixel); font-size: 11px; line-height: 1;
}
.ventana__botones { display: flex; gap: 5px; }
.ventana__botones i {
  display: grid; place-items: center; width: 22px; height: 20px;
  background: #fff; color: var(--tinta); font-style: normal; font-size: 12px; line-height: 1;
}
.ventana__cuerpo { padding: clamp(26px, 3.4vw, 50px) clamp(20px, 3vw, 46px) clamp(26px, 3vw, 40px); text-align: center; }
.ventana__titulo {
  margin: 0 0 30px;
  font-family: var(--f-pixel); font-weight: 700; font-size: clamp(14px, 1.45vw, 22px); line-height: 1.4;
  letter-spacing: .03em; text-transform: uppercase;
}
.ventana__lista {
  display: grid; gap: 20px; margin: 0; padding: 0; list-style: none;
  font-family: var(--f-pixel); font-size: clamp(12px, 1.1vw, 16px); line-height: 1.55;
}
.ventana__lista li::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .7em; background: var(--acento); vertical-align: .1em; }
.ventana__ok {
  display: inline-block; min-width: 130px; margin-top: 34px; padding: 13px 26px 12px;
  border: 3px solid var(--marco);
  background: #E4E4E3; color: var(--tinta);
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .2), inset 4px 4px 0 #fff;
  font-family: var(--f-pixel); font-size: 14px; line-height: 1; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.ventana__ok:hover { background: var(--hover); color: var(--hover-tinta); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .2); }
.ventana__ok:active { box-shadow: inset 4px 4px 0 rgba(0, 0, 0, .2); }

/* ==========================================================================
   3 · Temario: el editor de Mis cursos, ya abierto. Entra cuando se llega a
   él (curso.js le pone .con-entrada y luego .is-entrando)
   ========================================================================== */
.cu-temario { padding: 6vh var(--margen) 10vh; }
.cu-temario .contra--editor { margin-top: 0; }
.contra--editor.con-entrada:not(.is-entrando) :is(.editor__ventana, .editor__maca, .editor__cabeza) { opacity: 0; }
/* Detrás del editor, Maca acostada en el sillón (15 oct): la foto es
   horizontal (1463×1100), así que va más ancha, y la ventana le tapa la
   laptop, como si estuviera detrás de su compu */
.pagina--curso .editor { --mw: min(48vw, 66vh, 640px); --mh: calc(var(--mw) * .752); --asoma: .7; }
/* Más color, como en la primera versión del editor (Maca, 22 oct), pero con
   su paleta: los módulos pasan por sus tonos de apoyo (marino, vino, rosa
   clarito) y los bonus siguen en el naranja. Salen de las variables del
   panel, así que siguen a la paleta que se elija */
.pagina--curso .editor__pista li:nth-child(3n+1) .clip:not(.clip--bonus) { --c: var(--tono-3); color: var(--tono-3-tinta); }
.pagina--curso .editor__pista li:nth-child(3n+2) .clip:not(.clip--bonus) { --c: var(--tono-1); color: var(--tono-1-tinta); }
.pagina--curso .editor__pista li:nth-child(3n) .clip:not(.clip--bonus) { --c: var(--tono-2); color: var(--tono-2-tinta); }

/* ==========================================================================
   4 · Así funciona: cuatro celdas con líneas finas (como la Trayectoria de home)
   ========================================================================== */
.cu-como { padding: 10vh var(--margen) 12vh; }
.cu-como .cu-h2 { margin-bottom: 6vh; }
.cu-como__lista {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none;
  border-top: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta);
}
.cu-como__lista li { display: grid; align-content: start; gap: 26px; padding: 26px clamp(16px, 1.6vw, 28px) 32px; }
.cu-como__lista li + li { border-left: 1.5px solid var(--tinta); }
.cu-como__n { font-family: var(--f-pixel); font-size: clamp(40px, 4.4vw, 76px); line-height: 1; color: var(--acento); }
.cu-como__lista p { margin: 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.35; }
.cu-como__lista b { font-weight: 700; }
html.js .cu-como__lista li { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate 1s var(--salida); }
html.js .cu-como__lista.is-visible li { opacity: 1; translate: 0 0; }
html.js .cu-como__lista.is-visible li:nth-child(2) { transition-delay: .1s; }
html.js .cu-como__lista.is-visible li:nth-child(3) { transition-delay: .2s; }
html.js .cu-como__lista.is-visible li:nth-child(4) { transition-delay: .3s; }

/* ==========================================================================
   5 · Alumnas: sus testimonios llegan como notificaciones, una por una, con
   la foto de cada una. La frase, en naranja (Maca, 22 oct)
   ========================================================================== */
.cu-alumnas {
  display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 6vw;
  max-width: 1360px; margin: 0 auto; padding: 10vh var(--margen) 12vh;
}
.cu-alumnas .cu-h2 { color: var(--acento); }
.notis { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.noti {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px;
  padding: 16px 20px 19px 16px; border-radius: 24px;
  background: rgba(255, 255, 255, .9); border: 1.5px solid var(--tinta);
  box-shadow: 0 26px 44px -28px rgba(0, 0, 0, .5);
}
.noti:nth-child(2) { margin-left: 7%; margin-right: -3%; }
.noti:nth-child(3) { margin-left: 2%; }
.noti__foto {
  display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--tinta); background: var(--plata);
}
.noti__cabeza {
  display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 9px;
  font-family: var(--f-pixel); font-size: 11px; line-height: 1.2;
}
.noti__cabeza b { font-weight: 700; overflow-wrap: anywhere; }
.noti__cabeza span { opacity: .55; }
.noti__txt { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.38; }
html.js .notis .noti { opacity: 0; translate: 0 -34px; scale: .94; transition: opacity .5s ease, translate .9s var(--muelle), scale .9s var(--muelle); }
html.js .notis.is-visible .noti { opacity: 1; translate: 0 0; scale: 1; transition-delay: calc(var(--i) * .45s); }

/* ==========================================================================
   6 · Quién te enseña
   ========================================================================== */
.cu-maca {
  display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 6vw;
  max-width: 1300px; margin: 0 auto; padding: 8vh var(--margen) 4vh;
}
/* su foto con lentes (22 oct), ya recortada a 3:4; sin pie, la orilla de
   abajo de la polaroid se queda igual de ancha que con texto */
.cu-maca__foto { width: min(100%, 400px); justify-self: center; padding-bottom: 46px; }
.cu-maca__foto img { aspect-ratio: 3 / 4; }
.cu-maca .cu-h2 { font-size: clamp(32px, 3.8vw, 64px); line-height: 1; }
.cu-maca__bio { margin: 26px 0 0; max-width: 32em; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; }
.cu-maca .hud { margin-top: 34px; }

/* ==========================================================================
   7 · La inscripción: un boleto. El talón va en el acento (como la portada
   del curso en Mis cursos); lo que incluye, en blanco. Va antes del mensajito
   ========================================================================== */
.cu-oferta { padding: 4vh var(--margen) 14vh; }
.boleto {
  display: grid; grid-template-columns: .95fr 1.05fr;
  max-width: 1180px; margin: 0 auto;
  border: 3px solid var(--tinta); border-radius: 30px; overflow: hidden;
  background: #fff;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .55);
}
.boleto__talon {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(28px, 4vw, 58px);
  background: url("../img/grano.png") 0 0 / 180px 180px, var(--acento); color: var(--acento-tinta);
  border-right: 3px dashed var(--tinta);
}
html.sin-textura .boleto__talon { background: var(--acento); }
.boleto__titulo { position: relative; z-index: 1; margin: auto 0 0; font-weight: 900; font-size: clamp(54px, 6.8vw, 116px); line-height: .86; letter-spacing: -.05em; }
.boleto__titulo .titular__fino { display: inline-block; }
.boleto__estado {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-pixel); font-size: 12px; line-height: 1.3;
}
.boleto__estado .visor__punto { flex: none; background: currentColor; }
.boleto__talon .contra__tipo { position: relative; z-index: 1; }
.boleto__iso {
  position: absolute; right: -12%; top: -6%; width: 62%; height: auto;
  filter: var(--acento-iso, brightness(0) invert(1)); opacity: .14; rotate: 12deg;
  pointer-events: none;
}
.boleto__cuerpo { padding: clamp(28px, 4vw, 58px); }
.boleto__que { margin: 0 0 10px; font-family: var(--f-pixel); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.boleto__lista { margin: 0 0 34px; padding: 0; list-style: none; }
.boleto__lista li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline;
  padding: 13px 0; border-bottom: 1.5px solid rgba(0, 0, 0, .14);
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.3;
}
.boleto__lista li::before { content: "✓"; font-weight: 900; color: var(--acento); }
.boleto__boton { width: 100%; }
.boleto__nota { margin: 0 0 16px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.3; }
.boleto .aviso { margin: 0; max-width: none; }

/* ==========================================================================
   10 · Cierre
   ========================================================================== */
.cu-cierre { padding: 8vh var(--margen) 12vh; text-align: center; }
.cu-cierre__titulo {
  margin: 0 auto; max-width: 12em;
  font-weight: 900; font-size: clamp(48px, 8.4vw, 150px); line-height: .9; letter-spacing: -.05em;
}
.cu-cierre__sub { margin: 4vh auto 6vh; max-width: 22em; font-weight: 300; font-size: clamp(20px, 2vw, 32px); line-height: 1.15; }

/* ==========================================================================
   Letra (panel de ?demo): los títulos de esta página siguen a los de las otras
   ========================================================================== */
html.letra-editorial :is(.cu-h2, .boleto__titulo, .cu-cierre__titulo) { font-family: var(--f-editorial); font-weight: 400; letter-spacing: -.01em; }
html.letra-editorial :is(.boleto__titulo, .cu-cierre__titulo) { font-style: italic; }
html.letra-editorial :is(.cu-h2 em, .boleto__titulo .titular__fino, .cu-cierre__titulo .titular__fino) { font-style: normal; font-weight: 400; }
html.letra-editorial .cu-h2 em { font-style: italic; }
html.letra-moderna :is(.cu-h2, .boleto__titulo, .cu-cierre__titulo) { font-family: var(--f-moderna); letter-spacing: -.045em; }
html.letra-moderna .cu-h2 em { font-weight: 300; }

/* ==========================================================================
   Teléfono
   ========================================================================== */
@media (max-width: 760px) {
  .cu-portada { grid-template-columns: 1fr; gap: 4vh; padding-top: calc(var(--alto-barra) + 4vh); }
  .cu-titular { font-size: 17.5vw; }
  .cu-frase { font-size: 4vw; }
  .cu-datos { gap: 10px 18px; font-size: 10px; }
  /* más ancha que antes, para que el globo (2.9cqw) no quede chiquito */
  .cu-portada__foto { width: min(74vw, 50vh); margin-top: 5vh; }
  .cu-globo { border-width: 2px; box-shadow: 4px 4px 0 var(--tinta); }
  .cu-portada .sello { right: -12%; width: 116px; }

  .pagina--curso .editor { --mw: min(90vw, 56vh); }
  .cu-aprende { grid-template-columns: 1fr; padding-top: 12vh; }
  .cu-aprende__maca { width: 88%; justify-self: center; margin-bottom: 4vh; }
  .cu-aprende__lado { gap: 36px; }
  .ventana { margin: 0 6px 0 0; box-shadow: 8px 8px 0 var(--marco); }
  .ventana__titulo { font-size: 13px; }

  .cu-temario { padding-bottom: 6vh; }

  .cu-como__lista { grid-template-columns: 1fr; }
  .cu-como__lista li { grid-template-columns: 64px 1fr; gap: 14px; padding: 22px 0; }
  .cu-como__lista li + li { border-left: 0; border-top: 1.5px solid var(--tinta); }
  .cu-como__n { font-size: 34px; }

  .cu-alumnas { grid-template-columns: 1fr; gap: 5vh; }
  .noti:nth-child(2) { margin: 0 0 0 4%; }
  .noti:nth-child(3) { margin: 0 4% 0 0; }
  .noti { grid-template-columns: 38px 1fr; gap: 12px; padding: 14px 16px 16px 12px; border-radius: 20px; }
  .noti__foto { width: 38px; height: 38px; }
  .noti__cabeza { font-size: 10px; }

  .cu-maca { grid-template-columns: 1fr; gap: 6vh; }
  .cu-maca__foto { width: 66vw; }

  .boleto { grid-template-columns: 1fr; border-radius: 24px; }
  .boleto__talon { border-right: 0; border-bottom: 3px dashed var(--tinta); min-height: 62vw; }
  .boleto__titulo { font-size: 15vw; }
  .boleto__boton { font-size: 18px; }
}

/* ==========================================================================
   Menos movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cu-globo span { animation: none; }
  .cu-globo span { width: 3ch; }
  html.js .cu-como__lista li, html.js .notis .noti { opacity: 1; translate: none; scale: 1; transition: none; }
}