/* ============================================================
   SECCIÓN NUEVA — página de idioma: hero como banner, cuerpo en dos
   columnas con tarjetones a la izquierda y panel de inscripción pegajoso
   a la derecha (referencias: sceu.frba.utn.edu.ar y coderhouse.com).
   ============================================================ */

/* ---------- hero del curso, ahora sobre fondo ---------- */
.cu-hero { position: relative; overflow: hidden; color: #fff; background: #1c0e12;
  padding: 1.2rem 0 3.2rem }
.cu-hero .crumb { padding: .2rem 0 1.4rem }
/* el título va apoyado sobre el zigzag: hace falta aire antes del párrafo */
.cu-hero h1 { margin-bottom: .5rem }
.cu-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 100% at 20% 40%, rgba(18, 8, 11, .92) 0%,
      rgba(18, 8, 11, .78) 48%, rgba(18, 8, 11, .42) 78%, rgba(18, 8, 11, .3) 100%),
    radial-gradient(70% 95% at 88% 8%, rgba(163, 18, 53, .45), transparent 66%),
    linear-gradient(180deg, rgba(24, 12, 16, .7) 0%, rgba(24, 12, 16, .28) 34%,
      rgba(24, 12, 16, .82) 100%);
}
.cu-hero .in { position: relative; z-index: 2; display: grid; gap: 2.4rem; align-items: center }
@media (min-width: 900px) { .cu-hero .in { grid-template-columns: 1.1fr .9fr; gap: 3.2rem } }

.cu-hero .eyebrow { color: #FFD9A0 }
.cu-hero h1 { color: #fff; text-shadow: 0 2px 22px rgba(12, 5, 8, .7) }
.cu-hero p { color: rgba(255, 255, 255, .78) }
.cu-hero .nota { color: rgba(255, 255, 255, .55) }
.cu-hero .btn-gh { border-color: rgba(255, 255, 255, .45); color: #fff }
.cu-hero .btn-gh:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff }
/* las migas van sobre el hero oscuro: al 60% de blanco se perdían contra la
   foto, sobre todo en las zonas claras. Van en blanco, con una sombra que las
   despega del fondo, y el separador atenuado para que no compita */
/* El .wrap de las migas no es el .in, así que quedaba por debajo del velo
   oscuro de .cu-hero::after (z-index 1): el texto se veía apagado por más
   blanco que se le pusiera. Subirlo al mismo plano que el resto del hero es
   lo que realmente lo destapa. */
.cu-hero .crumb { position: relative; z-index: 2;
  color: #fff; font-size: .84rem; font-weight: 600;
  text-shadow: 0 1px 10px rgba(12, 5, 8, .75) }
.cu-hero .crumb a { color: rgba(255, 255, 255, .95) }
.cu-hero .crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px }
.cu-hero .crumb span { color: rgba(255, 255, 255, .45) }
/* el zigzag del título necesita más presencia sobre oscuro */
.cu-hero .hl svg path { stroke: #FFD9A0 }

/* ---------- cuerpo en dos columnas ---------- */
.cu-body { padding: 3.4rem 0 4rem }
.cu-cols { display: grid; gap: 2rem; align-items: start }
@media (min-width: 1000px) { .cu-cols { grid-template-columns: 1fr 348px; gap: 4rem } }

.cu-main > section + section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--linea) }
.cu-main h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: .5rem }
.cu-main .sub { color: var(--tinta-2); margin-bottom: 1.5rem }
.cu-main .form { max-width: none; margin: 0 }

/* ---------- tarjetones ---------- */
.cu-cards { display: grid; gap: .9rem; grid-template-columns: 1fr }
@media (min-width: 640px) { .cu-cards { grid-template-columns: 1fr 1fr } }
.cu-card {
  background: #fff; border: 1px solid var(--linea); border-radius: 14px;
  padding: 1.2rem 1.25rem; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cu-card:hover {
  border-color: #e6d2d7; transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(20, 16, 17, .4);
}
/* intercaladas: en dos columnas queda un damero */
.cu-card:nth-child(4n+2), .cu-card:nth-child(4n+3) { background: var(--bordo-050) }
.cu-card .ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bordo); color: #fff; margin-bottom: .85rem;
  box-shadow: 0 6px 14px -6px rgba(163, 18, 53, .7);
}
.cu-card .ico svg { width: 19px; height: 19px }
.cu-card h3 { font-size: 1rem; margin-bottom: .35rem; letter-spacing: -.01em }
.cu-card p { font-size: .89rem; color: var(--tinta-2); line-height: 1.5 }

/* ---------- panel de inscripción pegajoso ---------- */
.cu-panel {
  /* Se apoya debajo de LAS DOS barras fijas, no sólo del header: la barra
     institucional ocupa el tope de la pantalla y el header sticky se apoya
     debajo de ella (oficial.css: .hdr { top: var(--barra-oficial) }).
     Descontando sólo --hdr-alto, el header le tapaba la cabecera bordó del
     panel al scrollear. */
  position: sticky;
  top: calc(var(--barra-oficial, 46px) + var(--hdr-alto, 64px) + 1rem);
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 20px 44px -24px rgba(20, 16, 17, .4);
}
.cu-panel .cab { background: var(--bordo); color: #fff; padding: 1rem 1.2rem }
.cu-panel .cab b { display: block; font-size: 1.05rem; letter-spacing: -.01em }
.cu-panel .cab span { display: block; font-size: .78rem; color: rgba(255, 255, 255, .82); margin-top: .2rem }
.cu-panel .cuerpo { padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: .7rem }
.cu-panel .btn { width: 100% }

.cu-dato {
  display: flex; align-items: center; gap: .55rem;
  background: var(--bordo-050); border: 1px solid #f4e4e8; border-radius: 10px;
  padding: .6rem .75rem; font-size: .84rem; font-weight: 600; color: var(--tinta);
}
.cu-dato svg { width: 16px; height: 16px; color: var(--bordo); flex: none }
.cu-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem }
.cu-chips span {
  display: flex; align-items: center; gap: .4rem; justify-content: center;
  border: 1px solid var(--linea); border-radius: 10px; padding: .5rem .4rem;
  font-size: .78rem; color: var(--tinta-2); font-weight: 600;
}
.cu-chips svg { width: 14px; height: 14px; color: var(--tinta-3); flex: none }

.cu-precio { border-top: 1px solid var(--linea); padding-top: .9rem; margin-top: .2rem }
.cu-precio .lbl {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 700;
}
.cu-precio b {
  display: block; font-size: 2.05rem; font-weight: 700; color: var(--bordo);
  letter-spacing: -.035em; line-height: 1.15; margin-top: .15rem;
}
.cu-precio .fin { font-size: .8rem; color: var(--tinta-2); margin-top: .1rem }
.cu-precio a { color: var(--bordo); font-size: .8rem; font-weight: 600; text-decoration: underline }

.cu-sello {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .75rem;
  font-size: .82rem; font-weight: 600;
}
.cu-sello img { height: 17px; width: auto; flex: none }

/* en pantallas chicas el panel deja de ser pegajoso y va primero */
@media (max-width: 999px) {
  .cu-panel { position: static }
  .cu-cols > .cu-panel { order: -1 }
}
@media (prefers-reduced-motion: reduce) { .cu-card { transition: none } }

/* ---------- fechas del curso, con el mismo estilo que las de la home ---------- */
.cu-fechas { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) }

/* ---------- plan de estudios ---------- */
.cu-plan { display: grid; gap: .55rem }
.cu-nivel { border: 1px solid var(--linea); border-radius: 12px; background: #fff; overflow: hidden }
.cu-nivel > button {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .9rem 1rem; text-align: left; cursor: pointer;
}
.cu-nivel .tag {
  flex: none; min-width: 58px; text-align: center; border-radius: 8px;
  background: var(--bordo); color: #fff; font-size: .78rem; font-weight: 700;
  padding: .3rem .5rem; letter-spacing: -.01em;
}
.cu-nivel[data-estado="proximo"] .tag { background: var(--linea); color: var(--tinta-3) }
.cu-nivel .nom { font-size: .95rem; font-weight: 700; letter-spacing: -.01em }
.cu-nivel .mod { display: block; font-size: .76rem; color: var(--tinta-3); font-weight: 500; margin-top: .1rem }
.cu-nivel .ar { margin-left: auto; color: var(--tinta-3); transition: transform .25s; flex: none }
.cu-nivel > button[aria-expanded="true"] .ar { transform: rotate(180deg) }
.cu-nivel > button[aria-expanded="true"] + .cuerpo { grid-template-rows: 1fr }
.cu-nivel .cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease }
.cu-nivel .cuerpo > div { overflow: hidden }
.cu-nivel .cuerpo p { padding: 0 1rem .5rem; color: var(--tinta-2); font-size: .89rem }
.cu-nivel .cuerpo ul { list-style: none; margin: 0; padding: 0 1rem 1rem; display: grid; gap: .4rem }
.cu-nivel .cuerpo li { display: flex; gap: .6rem; font-size: .87rem; color: var(--tinta-2) }
.cu-nivel .cuerpo li::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bordo); margin-top: .5rem;
}

/* ---------- reseñas: desfile horizontal continuo ---------- */
.cu-resenas { background: var(--bordo-050); padding: 3.4rem 0 3.8rem }
.cu-resenas .sec-head { margin-bottom: 1.8rem }

/* el difuminado de los costados es lo que hace que el desfile no "empiece"
   ni "termine": las tarjetas aparecen y se van */
.cu-marquesina {
  overflow: hidden; padding: .3rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cu-tira { display: flex; gap: 1rem; width: max-content }
.cu-marquesina.anda .cu-tira { animation: cu-desfile var(--vuelta, 60s) linear infinite }
/* al pasar el mouse se frena, para poder leer */
.cu-marquesina:hover .cu-tira, .cu-marquesina:focus-within .cu-tira { animation-play-state: paused }
@keyframes cu-desfile { to { transform: translateX(-50%) } }

.cu-resena {
  flex: none; width: 330px; background: #fff; border: 1px solid var(--linea);
  border-radius: 16px; padding: 1.2rem 1.25rem; display: flex; flex-direction: column;
}
.cu-resena .quien { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem }
.cu-resena .ini {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bordo); color: #fff; font-weight: 700; font-size: .92rem; letter-spacing: -.02em;
}
.cu-resena .nom { font-size: .92rem; font-weight: 700; letter-spacing: -.01em }
.cu-resena .curso { display: block; font-size: .78rem; color: var(--tinta-3); margin-top: .1rem }
.cu-resena .comillas { color: #e8ccd3; font-size: 1.6rem; line-height: .6; margin-bottom: .45rem }
.cu-resena p { font-size: .9rem; color: var(--tinta-2); line-height: 1.55 }
.cu-resena .estrellas { margin-top: auto; padding-top: .9rem; color: var(--bordo); font-size: .82rem; letter-spacing: .12em }

/* Motivos: comparten caja con .cu-resena, cambian el encabezado por un icono.
   Se usan mientras no haya reseñas reales cargadas (prueba-social.js). */
.cu-motivo { gap: .1rem }
.cu-motivo .ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--bordo-050); color: var(--bordo); margin-bottom: .85rem;
}
.cu-motivo .ico svg { width: 21px; height: 21px }
.cu-motivo h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .45rem }
.cu-motivo p { font-size: .88rem; color: var(--tinta-2); line-height: 1.55 }

/* sin animación: vuelve a ser una tira que se desliza a mano */
@media (prefers-reduced-motion: reduce) {
  .cu-marquesina { overflow-x: auto }
  .cu-marquesina.anda .cu-tira { animation: none }
}

/* Las preguntas frecuentes viven en faqs.css: las usan el curso y la home. */

/* ---------- más cursos ---------- */
/* ---------- más cursos: tres por fila, con postal de ciudad ---------- */
.cu-otros { background: var(--bordo-050); padding: 3.4rem 0 4rem }

/* La cabecera ocupa todo el ancho para que las flechas queden pegadas al
   borde derecho. Sin el `max-width:none`, `.sec-head` hereda los 660 px del
   estilo base y las flechas terminaban flotando en el medio de la sección,
   a 540 px del borde. El texto se limita aparte, que es lo que se quería. */
.cu-otros .sec-head {
  max-width: none; margin-bottom: 1.8rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.cu-otros .sec-head > div:first-child { max-width: 56ch }

/* ---------- carrusel de otros cursos (assets/otros-cursos.js) ---------- */
.oc-visor { position: relative }
.oc-tira {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  /* se sale del ancho del contenedor para que la primera y la última tarjeta
     no queden pegadas al borde al scrollear */
  margin-inline: -1.25rem; padding: .3rem 1.25rem 1rem;
  /* sin este scroll-padding, el snap alinea la primera tarjeta contra el
     padding y la tira arranca en scrollLeft=20: la flecha izquierda quedaba
     habilitada estando ya en el principio */
  scroll-padding-inline: 1.25rem;
  scrollbar-width: none; overscroll-behavior-x: contain;
  cursor: grab;
}
.oc-tira::-webkit-scrollbar { display: none }
.oc-tira.oc-arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto }
.oc-tira.oc-arrastrando .oc-card { pointer-events: none }

.oc-card {
  flex: 0 0 clamp(240px, 30%, 300px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.oc-card:hover {
  border-color: #e6d2d7; transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(20, 16, 17, .4);
}

.oc-foto { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #2A1218 }
/* la silueta de ciudades.js queda debajo: se ve mientras no haya foto */
.oc-foto .cd-svg, .oc-foto > img:not([width]) {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; transition: transform .45s ease;
}
.oc-card:hover .oc-foto .cd-svg, .oc-card:hover .oc-foto > img:not([width]) { transform: scale(1.05) }

.oc-bandera {
  position: absolute; left: .6rem; top: .6rem; z-index: 2;
  width: 30px; height: 22px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.oc-bandera img { width: 100%; height: 100%; object-fit: cover; display: block }

.oc-txt { display: flex; flex-direction: column; gap: .3rem; padding: .95rem 1.05rem 1.05rem; flex: 1 }
.oc-nom { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em }
.oc-dato { font-size: .79rem; color: var(--tinta-3) }
.oc-ir { margin-top: auto; padding-top: .7rem; font-size: .82rem; font-weight: 700; color: var(--bordo) }
.oc-ir i { display: inline-block; transition: transform .18s; font-style: normal }
.oc-card:hover .oc-ir i { transform: translateX(3px) }

/* ---------- flechas ---------- */
.oc-nav { display: flex; gap: .5rem; flex: none; align-items: center }
.oc-nav[hidden] { display: none }   /* display:flex le gana al [hidden] del navegador */
.oc-flecha {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
  cursor: pointer; box-shadow: 0 2px 10px -4px rgba(20, 16, 17, .25);
  transition: background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
}
.oc-flecha svg { width: 17px; height: 17px }
.oc-flecha:hover:not(:disabled) {
  border-color: var(--bordo); background: var(--bordo); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(163, 18, 53, .6);
}
.oc-flecha:active:not(:disabled) { transform: translateY(0) }
/* deshabilitada se apaga del todo: que no parezca que se puede seguir */
.oc-flecha:disabled { opacity: .3; cursor: default; box-shadow: none; background: transparent }

@media (prefers-reduced-motion: reduce) {
  .oc-card, .oc-foto .cd-svg, .oc-ir i { transition: none }
  .oc-card:hover { transform: none }
  .oc-card:hover .oc-foto .cd-svg { transform: none }
}
}

/* ---------- "Cómo se paga", debajo de los aranceles ---------- */
.pg-como { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--linea) }
.pg-como h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .9rem }
.pg-como .pg-cuenta { max-width: 520px }

/* ---------- banner de certificación (assets/certificacion.js) ----------
   Va a todo el ancho de la columna principal y rompe el ritmo de las
   secciones de arriba a propósito: es el argumento de venta más fuerte. */
.ct-sec {
  margin-top: 3rem; padding: 2rem 0 0; border-top: 1px solid var(--linea);
}
.ct-caja {
  background: linear-gradient(158deg, #1C0E12 0%, #2A1218 55%, #3A1522 100%);
  color: #fff; border-radius: 20px; overflow: hidden;
  padding: 2rem 1.6rem; display: grid; gap: 1.8rem;
}
@media (min-width: 900px) {
  .ct-caja { grid-template-columns: 1fr .92fr; gap: 2.6rem; padding: 2.4rem 2.2rem }
}

.ct-txt .eyebrow { color: #FFD9A0 }
.ct-txt h2 {
  color: #fff; font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  letter-spacing: -.025em; line-height: 1.2; margin: .5rem 0 .7rem;
}
.ct-bajada { color: rgba(255, 255, 255, .8); font-size: .95rem; line-height: 1.6 }

.ct-lista { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem }
.ct-lista li { display: flex; gap: .65rem; font-size: .89rem; line-height: 1.5 }
.ct-lista b { color: #fff; font-weight: 700 }
.ct-lista span:last-child { color: rgba(255, 255, 255, .74) }
.ct-tic {
  flex: none; width: 20px; height: 20px; margin-top: .1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 217, 160, .16); color: #FFD9A0;
}
.ct-tic svg { width: 12px; height: 12px }

.ct-firmas { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .14) }
.ct-firmas-lb {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); font-weight: 700; margin-bottom: .3rem;
}
.ct-firmas p:last-child { font-size: .82rem; color: rgba(255, 255, 255, .78); line-height: 1.5 }

.ct-sec .btn-gh {
  margin-top: 1.5rem; border-color: rgba(255, 255, 255, .4); color: #fff;
}
.ct-sec .btn-gh:hover { background: #fff; color: var(--tinta); border-color: #fff }

/* la muestra del certificado: se inclina un poco para que se lea como objeto
   y no como una captura pegada */
.ct-muestra { margin: 0; align-self: center }
.ct-muestra img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .75);
  transform: rotate(-1.6deg); transition: transform .3s ease;
}
.ct-muestra:hover img { transform: rotate(0deg) scale(1.015) }
.ct-muestra figcaption {
  margin-top: 1rem; font-size: .74rem; color: rgba(255, 255, 255, .55);
  text-align: center; line-height: 1.45;
}

@media (max-width: 700px) {
  .ct-caja { padding: 1.6rem 1.15rem; border-radius: 16px }
  .ct-muestra img { transform: none }
  .ct-muestra:hover img { transform: none }
}

/* aviso del medio de pago en aranceles: reemplaza al bloque con la cuenta,
   que ahora vive dentro del wizard */
.pg-aviso {
  margin-top: 1.4rem; padding: .85rem 1rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--linea);
  font-size: .86rem; color: var(--tinta-2); line-height: 1.55;
}
.pg-otro {
  background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--bordo); text-decoration: underline; cursor: pointer;
}
.pg-otro:hover { color: var(--bordo-800) }

/* ---------- "Por qué estudiar <idioma>" (assets/por-que.js) ----------
   Panel de dos columnas: las razones a la izquierda, la foto a la derecha.
   En mobile se apila y la foto va arriba, que es lo que se mira primero. */
.pq-sec { padding: 3.6rem 0 4rem; background: var(--bordo-050) }
.pq-sec .sec-head { max-width: 62ch; margin-bottom: 2.2rem }
.pq-sec .sec-head p { color: var(--tinta-2); line-height: 1.65 }
.pq-idioma { color: var(--bordo) }

.pq-panel { display: grid; gap: 1.4rem }
@media (min-width: 940px) { .pq-panel { grid-template-columns: 1fr 1.15fr; gap: 2.2rem; align-items: start } }

/* ---------- la lista de razones ---------- */
.pq-lista { display: grid; gap: .55rem; order: 2 }
@media (min-width: 940px) { .pq-lista { order: 0 } }

.pq-item {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .75rem;
  padding: .95rem 1.05rem; border-radius: 13px;
  background: #fff; border: 1px solid var(--linea);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pq-item:hover { border-color: #e6d2d7; transform: translateX(2px) }
.pq-item.act {
  border-color: var(--bordo); box-shadow: 0 14px 30px -18px rgba(163, 18, 53, .5);
}
.pq-num {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.pq-item.act .pq-num { color: var(--bordo) }
.pq-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bordo-050); color: var(--bordo); transition: background .2s, color .2s;
}
.pq-item.act .pq-ico { background: var(--bordo); color: #fff }
.pq-ico svg { width: 18px; height: 18px }
.pq-t { font-size: .93rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3 }

/* barra de progreso del avance automático: sólo corre en la razón activa y
   sólo mientras la sección está a la vista y sin el mouse encima */
.pq-barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--linea); opacity: 0; transition: opacity .2s;
}
.pq-item.act .pq-barra { opacity: 1 }
.pq-barra i { display: block; height: 100%; width: 0; background: var(--bordo) }
.pq-corriendo .pq-item.act .pq-barra i { animation: pq-progreso 7s linear forwards }
@keyframes pq-progreso { from { width: 0 } to { width: 100% } }

/* ---------- el visor ---------- */
.pq-visor { position: relative; order: 1 }
@media (min-width: 940px) { .pq-visor { order: 0; position: sticky; top: calc(var(--barra-oficial, 38px) + 84px) } }

.pq-lamina {
  margin: 0; background: #fff; border: 1px solid var(--linea);
  border-radius: 18px; overflow: hidden; box-shadow: var(--sh-md);
  animation: pq-entra .45s cubic-bezier(.2, .8, .3, 1);
}
.pq-lamina[hidden] { display: none }
@keyframes pq-entra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.pq-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #2A1218 }
.pq-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: pq-zoom 7s linear forwards;
}
/* un acercamiento muy leve mientras la lámina está a la vista: da vida sin
   que se note como "animación" */
@keyframes pq-zoom { from { transform: scale(1) } to { transform: scale(1.05) } }

.pq-lamina figcaption { padding: 1.25rem 1.35rem 1.4rem }
.pq-lamina h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem }
.pq-lamina p { font-size: .92rem; color: var(--tinta-2); line-height: 1.65 }

@media (max-width: 700px) {
  .pq-sec { padding: 2.8rem 0 3rem }
  .pq-item { padding: .85rem .9rem; gap: .6rem }
  .pq-t { font-size: .88rem }
  .pq-lamina figcaption { padding: 1.05rem 1.05rem 1.15rem }
  .pq-lamina h3 { font-size: 1.05rem }
}

@media (prefers-reduced-motion: reduce) {
  .pq-item, .pq-ico { transition: none }
  .pq-item:hover { transform: none }
  .pq-lamina, .pq-foto img, .pq-barra i { animation: none }
  .pq-foto img { transform: none }
}

/* la bandera del país sobre la foto temática: es lo que ata una imagen
   genérica (una fábrica, un campus) al idioma del curso */
.pq-foto { position: relative }
.pq-bandera {
  position: absolute; left: .75rem; top: .75rem; z-index: 2;
  width: 34px; height: 24px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4), 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.pq-bandera img { width: 100%; height: 100%; object-fit: cover; display: block }

/* En la página de curso el formulario ya vive en la columna angosta del
   cuerpo: ahí la caja no necesita ni ancho máximo ni borde propio, sería una
   tarjeta dentro de otra. */
.cu-main .cs-caja {
  max-width: none; margin-inline: 0; padding: 0;
  background: none; border: 0; box-shadow: none;
}