/* ============================================================
   Chillin Online · la página de venta de un curso (/courses/…)
   y la de un paquete (/bundles/…)
   ------------------------------------------------------------
   DÓNDE SE PEGA: Ajustes del sitio → Código y analítica →
   código del pie del sitio, dentro de la misma etiqueta <style>
   que el resto.

   ACOTADO a `body.course-landing-page` y `body.bundle-landing-page`,
   que son las clases que Thinkific pone en estas dos pantallas. El
   marco (papel, telón, barra y pie) lo pinta `marco.css`, que las
   cubre a las dos y al catálogo.

   QUÉ PINTA EL TEMA AQUÍ, que es lo que hay que vencer:

   1. El TELÓN (`banner--course`) sobre una foto de banco con un
      velo negro al 42 % y el título en blanco encima. Esa foto de
      fondo se retira y la portada pasa al papel de la academia,
      con la foto DEL PRODUCTO al lado del texto: la que la ficha de
      matrícula traía debajo, que `curso.js` sube aquí. Algunas
      páginas traen además el telón "con imagen al lado" del tema,
      un 34 % reservado para un `.section__image` que en la academia
      está vacío (la imagen es un `.tiff` y no hay navegador que lo
      pinte): ese hueco también se retira.
   2. El TEMARIO en azul marino, con los capítulos en cajas grises y
      el icono de plegar en cian.
   3. La FICHA de "About this course" en azul pizarra (#2f3841) y
      con `width:418px` clavados.
   4. La TABLA DE PRECIOS con una trampa fina: el tema le da al
      botón `width:2rem;height:2rem;font-size:0`, así que la
      llamada a la acción es un círculo con una flecha y sin texto.
   5. Las OPINIONES y la CUENTA ATRÁS, que solo salen en algunas
      páginas, con el mismo azul y el mismo cian.

   LAS TRES PIEZAS NUESTRAS son las que empiezan por `co-`: cómo se
   estudia, las preguntas y el cierre. Las escribe `curso.js` y NO
   dicen nada del precio, del acceso ni de los certificados, que son
   condiciones comerciales que decide Wilson: solo cuentan cómo
   funciona la academia, que es lo que sabemos que es verdad.

   Los HASHES DE SECCIÓN (`banner___5baf6`, `course-curriculum___81d61`)
   cambian de una página a otra, así que aquí NUNCA se nombran: se
   entra siempre por la clase base. La regla del tema pesa dos
   clases y la nuestra tres, o dos y va después: por eso gana sin un
   solo `!important`.
   ============================================================ */

/* ------------------------------------------------------------
   0 · LAS CAJAS DEL TEMA

   Cada sección trae su propio fondo de color y su propio relleno
   de 4rem arriba y abajo. Se apagan los fondos (basta con que uno
   se quede en su azul para que salga una banda por la junta) y se
   fija el ancho de lectura de la academia.
   ------------------------------------------------------------ */

body:is(.course-landing-page,.bundle-landing-page) main,
body:is(.course-landing-page,.bundle-landing-page) section.banner,
body:is(.course-landing-page,.bundle-landing-page) section.course-curriculum,
body:is(.course-landing-page,.bundle-landing-page) section.pricing-table,
body:is(.course-landing-page,.bundle-landing-page) section.reviews,
body:is(.course-landing-page,.bundle-landing-page) section.countdown,
body:is(.course-landing-page,.bundle-landing-page) section.bundle-includes{
  background:transparent;
  background-image:none;
}

body:is(.course-landing-page,.bundle-landing-page) [class*="__container"]{
  max-width:var(--co-ancho);
  padding-left:24px;
  padding-right:24px;
}

/* El relleno de 4rem del tema baja a la respiración del resto de la
   academia. Va en el `__wrapper` del telón (que es quien lo lleva
   ahí) y en el `__container` de las demás. */
body:is(.course-landing-page,.bundle-landing-page) .banner__wrapper{
  padding-top:38px;
  padding-bottom:34px;
}
body:is(.course-landing-page,.bundle-landing-page) .section-height__medium > [class*="__container"]{
  padding-top:0;
  padding-bottom:34px;
}

/* Los titulares de sección, todos con la misma voz: la del catálogo
   y la del portal. El tema los pinta en blanco (para su fondo
   oscuro) y algunos centrados. */
body:is(.course-landing-page,.bundle-landing-page) .section__heading{
  margin:0;
  font-family:var(--co-serif);
  font-size:clamp(23px, 2.6vw, 30px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.18;
  color:var(--co-tinta);
  text-align:left;
}
body:is(.course-landing-page,.bundle-landing-page) .section__subheading{
  margin:10px 0 0;
  max-width:62ch;
  font-size:16.5px;
  line-height:1.62;
  color:var(--co-tinta-2);
  text-align:left;
}
body:is(.course-landing-page,.bundle-landing-page) .section__headings{
  margin:0 0 20px;
  text-align:left;
}

/* El botón de la casa. El del tema es negro con esquina de 4; aquí
   es el verde que en toda la academia significa "esto es lo que
   manda". Se le escribe el tamaño entero porque el tema le pone el
   suyo en tres sitios distintos. */
body:is(.course-landing-page,.bundle-landing-page) .button.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  /* CON LA CAJA CONTADA CON EL RELLENO DENTRO, y no es un detalle:
     el botón lleva 20 de relleno a cada lado, así que en cuanto se
     le pide el ancho entero de su sitio (en el móvil, y en la ficha)
     sin esto se pasa cuarenta píxeles y asoma por fuera de la
     tarjeta. Pasó en la tabla de precios a 390. */
  box-sizing:border-box;
  min-height:46px;
  padding:0 22px;
  border:0;
  border-radius:99px;
  background:var(--co-verde);
  color:#fff;
  font-family:var(--co-sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  text-transform:none;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(11,94,63,.18), 0 10px 22px rgba(11,94,63,.18);
  transition:background .2s var(--co-curva),transform .2s var(--co-curva),box-shadow .2s var(--co-curva);
}
body:is(.course-landing-page,.bundle-landing-page) .button.button-primary:hover,
body:is(.course-landing-page,.bundle-landing-page) .button.button-primary:focus{
  background:var(--co-verde-oscuro);
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(11,94,63,.2), 0 16px 30px rgba(11,94,63,.22);
}
/* La flecha de Font Awesome que el tema mete dentro, a su sitio. */
body:is(.course-landing-page,.bundle-landing-page) .button.button-primary .fa{
  font-size:11px;
  opacity:.9;
}

/* ------------------------------------------------------------
   1 · LA PORTADA (el telón del tema)

   Deja de ser una foto de banco con un velo negro y pasa a ser la
   portada de lectura de la academia, la misma del catálogo: rótulo
   pequeño arriba, titular grande en tinta, la línea que dice de qué
   va y, debajo, los datos del curso en un renglón.

   Al lado, la foto del producto: la sube `curso.js` desde la ficha
   de matrícula (ver el final de esta sección).
   ------------------------------------------------------------ */

body:is(.course-landing-page,.bundle-landing-page) section.banner{
  position:relative;
}
/* El velo que el tema dibuja encima de la foto. */
body:is(.course-landing-page,.bundle-landing-page) section.banner:before,
body:is(.course-landing-page,.bundle-landing-page) section.banner:after{content:none}

body:is(.course-landing-page,.bundle-landing-page) .banner .section__content,
body:is(.course-landing-page,.bundle-landing-page) .banner [class*="__wrapper"]{
  display:block;
  text-align:left;
  justify-content:flex-start;
}

/* El titular del curso: la pieza más grande de la pantalla. */
body:is(.course-landing-page,.bundle-landing-page) .banner .section__heading{
  max-width:20ch;
  font-size:clamp(30px, 4.4vw, 46px);
  line-height:1.12;
  color:var(--co-tinta);
  margin-right:0;
  margin-left:0;
  width:auto;
}
body:is(.course-landing-page,.bundle-landing-page) .banner .section__subheading{
  max-width:60ch;
  margin-top:14px;
  font-size:17px;
  color:var(--co-tinta-2);
  margin-right:0;
  margin-left:0;
  width:auto;
}
body:is(.course-landing-page,.bundle-landing-page) .banner .section__body{color:var(--co-tinta-2)}

/* LAS MIGAS. Dicen de dónde se viene y son el único camino de
   vuelta al catálogo que hay en esta pantalla. */
body:is(.course-landing-page,.bundle-landing-page) .co-migas{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--co-tinta-3);
}
body:is(.course-landing-page,.bundle-landing-page) .co-migas a{
  color:var(--co-tinta-3);
  text-decoration:none;
  transition:color .18s var(--co-curva);
}
body:is(.course-landing-page,.bundle-landing-page) .co-migas a:hover{color:var(--co-verde)}
body:is(.course-landing-page,.bundle-landing-page) .co-migas i{font-style:normal;opacity:.5}
body:is(.course-landing-page,.bundle-landing-page) .co-migas .co-aqui{
  color:var(--co-tinta-2);
  /* de una línea: el nombre del curso puede ser largo y estas migas
     no son el titular, son la orientación */
  max-width:38ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* LOS SELLOS. Idioma y tipo de producto, sacados de lo que la
   propia página dice. Si el curso no dice su idioma, no lleva
   sello: aquí nunca se inventa un dato. */
body:is(.course-landing-page,.bundle-landing-page) .co-sellos{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
body:is(.course-landing-page,.bundle-landing-page) .co-sello{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 12px;
  border-radius:99px;
  border:1px solid var(--co-linea-2);
  background:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--co-tinta-2);
}
body:is(.course-landing-page,.bundle-landing-page) .co-sello.co-sello-verde{
  border-color:transparent;
  background:rgba(15,122,82,.1);
  color:var(--co-verde-oscuro);
}

/* EL RENGLÓN DE DATOS. Capítulos, lecciones y vídeo, contados del
   temario que la propia página ya trae. Es lo que el alumno compara
   entre dos cursos antes de mirar el precio. */
body:is(.course-landing-page,.bundle-landing-page) .co-datos{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .co-datos li{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  min-width:104px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--co-relieve);
}
body:is(.course-landing-page,.bundle-landing-page) .co-datos b{
  font-family:var(--co-serif);
  font-size:19px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
}
body:is(.course-landing-page,.bundle-landing-page) .co-datos small{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--co-tinta-3);
}

/* La fila de botones del telón. El tema la centra. */
body:is(.course-landing-page,.bundle-landing-page) .banner .section__button-group,
body:is(.course-landing-page,.bundle-landing-page) .banner .product-action-buttons,
body:is(.course-landing-page,.bundle-landing-page) .banner [class*="product-action-buttons__purchase"]{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-start;
  margin-top:26px;
}
/* El grupo de acciones NO se estira, y el ancho hay que
   ESCRIBIRLO: el tema le da al `__purchase` un ancho propio (medido:
   715 de los 1072 de la fila), así que con solo tocar el `flex` el
   precio que el guion cuelga detrás seguía saliendo a setecientos
   píxeles del botón al que acompaña. */
body:is(.course-landing-page,.bundle-landing-page) .banner .product-action-buttons,
body:is(.course-landing-page,.bundle-landing-page) .banner [class*="product-action-buttons__purchase"]{
  flex:0 1 auto;
  width:auto;
}

/* El precio al lado del botón, cuando el curso lo dice. */
body:is(.course-landing-page,.bundle-landing-page) .co-precio-telon{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--co-serif);
  font-size:20px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
}
body:is(.course-landing-page,.bundle-landing-page) .co-precio-telon small{
  font-family:var(--co-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--co-tinta-3);
}

/* LA FOTO DEL PRODUCTO EN LA PORTADA. La foto de banco del tema se
   retiró y la portada se quedó de texto solo, con la mitad derecha
   vacía. Sube aquí la del propio curso, la que la ficha de matrícula
   traía debajo: `curso.js` la MUEVE, no la copia.

   De 900 para arriba va al lado del texto, en dos columnas, y del
   ALTO QUE PIDA EL TEXTO (por eso la rejilla estira y la imagen va
   con `height:100%`): es lo que llena el hueco. Por debajo, el
   telón vuelve a una columna y la foto cae debajo de los botones,
   que es el orden en que se lee en el teléfono. */
body:is(.course-landing-page,.bundle-landing-page) .co-portada-foto{
  display:block;
  /* el ancho se ESCRIBE: el telón del tema es una columna flex y sin
     esto la figura se encoge a lo que mide su forma (medido: 512 de
     los 812 de la fila) en vez de ocupar la fila entera */
  width:100%;
  margin:26px 0 0;
  border-radius:20px;
  overflow:hidden;
  background:var(--co-gris);
  box-shadow:var(--co-relieve-alto);
  /* LA FORMA LA MANDA LA CAJA, no la imagen: así una foto vertical
     y una apaisada ocupan lo mismo. Y con el tope, en una tableta
     de 860 la banda no se come la pantalla entera (a 16/10 serían
     537 de alto). */
  aspect-ratio:16 / 10;
  max-height:320px;
}
body:is(.course-landing-page,.bundle-landing-page) .co-portada-foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* el hueco que la foto deja en la ficha, con su fondo gris */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__image.co-sin-foto{
  display:none;
}

/* EL HUECO DEL TEMA AL LADO DEL TELÓN. Algunas páginas (la de la
   cuenta atrás) usan el telón "con imagen al lado": el tema le da
   al wrapper `width:calc(100% - 34%)` y reserva ese 34 % para un
   `.section__image`. Medido: 364x594 de nada, porque la imagen que
   Wilson cargó ahí es un `.tiff` y ningún navegador pinta TIFF.
   Se retira el hueco y el wrapper recupera el ancho entero, que es
   sobre el que se monta la rejilla de abajo. */
body:is(.course-landing-page,.bundle-landing-page) .banner .section__image{
  display:none;
}
body:is(.course-landing-page,.bundle-landing-page) .banner .banner__wrapper{
  width:auto;
  flex:1 1 auto;
  padding-right:0;
  padding-left:0;
}

@media (min-width:900px){
  /* se nombra `.banner .banner__wrapper` (y no solo el wrapper) para
     no depender del orden: arriba hay un `display:block` para todo
     lo que acabe en `__wrapper` que pesa lo mismo que esta regla */
  body:is(.course-landing-page,.bundle-landing-page) .banner .banner__wrapper.co-con-foto{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:stretch;
    gap:46px;
  }
  body:is(.course-landing-page,.bundle-landing-page) .banner__wrapper.co-con-foto .co-portada-foto{
    margin:0;
    /* en dos columnas la forma la da la fila, no la proporción */
    aspect-ratio:auto;
    height:100%;
    min-height:340px;
    /* con el tope, un titular de cuatro líneas no convierte la foto
       en una columna de medio metro; y centrada, el aire que sobra
       se reparte arriba y abajo en vez de caer todo a un lado */
    max-height:520px;
    align-self:center;
  }
  body:is(.course-landing-page,.bundle-landing-page) .banner__wrapper.co-con-foto .co-portada-foto img{
    height:100%;
    aspect-ratio:auto;
  }
}

/* ------------------------------------------------------------
   2 · EL TEMARIO

   La pieza gorda de la pantalla, y la que más se aleja del tema:
   venía en azul marino, con los capítulos en cajas grises pegadas
   unas a otras y el icono de plegar en cian.

   Aquí es la plancha blanca del catálogo, con los capítulos como
   renglones de una lista y la ficha de matrícula a la derecha
   acompañando al bajar. En el móvil la ficha SUBE por encima del
   temario, porque ahí es donde está el botón.
   ------------------------------------------------------------ */

body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__content{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:start;
  gap:26px;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-container{
  min-width:0;
  background:rgba(255,255,255,.92);
  border-radius:var(--co-plancha-radio);
  box-shadow:var(--co-plancha);
  padding:10px var(--co-plancha-aire);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-list{
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter{
  margin:0;
  padding:0;
  border:0;
  border-top:1px solid var(--co-linea);
  background:transparent;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter:first-child{border-top:0}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-content-wrapper{
  background:transparent;
  border:0;
  padding:0;
}

/* LA CABECERA DEL CAPÍTULO es un botón de verdad (el tema lo monta
   así y es quien pliega), y aquí solo se le cambia la ropa: el
   nombre a la izquierda, cuántas lecciones tiene en gris y la
   flecha a la derecha, que gira. */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-header{
  gap:14px;
  padding:18px 4px;
  background:transparent;
  border-radius:12px;
  transition:background .18s var(--co-curva);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-header:hover{
  background:var(--co-gris);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0;
  font-family:var(--co-serif);
  font-size:17px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.3;
  color:var(--co-tinta);
  text-transform:none;
}
/* El número del capítulo, que pone el guion delante del nombre. */
body:is(.course-landing-page,.bundle-landing-page) .co-num-capitulo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:99px;
  background:rgba(15,122,82,.1);
  color:var(--co-verde-oscuro);
  font-family:var(--co-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
}
/* Cuántas lecciones tiene el capítulo, a la derecha del nombre. */
body:is(.course-landing-page,.bundle-landing-page) .co-cuenta-capitulo{
  margin-left:auto;
  padding-left:12px;
  font-family:var(--co-sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0;
  color:var(--co-tinta-3);
  white-space:nowrap;
}
/* El icono de plegar del tema, en cian y a 1.5rem, pasa al gris de
   la casa y a un tamaño de renglón. El otro icono que el tema mete
   dentro del título (`__chapter-collapse`) no se usa aquí. */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-header .toga-icon{
  flex:0 0 auto;
  color:var(--co-tinta-3);
  font-size:15px;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-collapse{display:none}

/* LAS LECCIONES. Cada una es un renglón con su icono (texto, vídeo
   o examen) delante, en gris, y el nombre en tinta. El tema les
   pone el icono a 1.5rem con un relleno de 1rem, que dentro de una
   lista de setenta y siete lecciones es una columna de aire. */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-content{
  margin:0;
  padding:0 4px 14px;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-content li{
  margin:0;
  padding:0;
  line-height:1.5;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-lesson{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:7px 8px;
  border-radius:8px;
  transition:background .16s var(--co-curva);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-lesson:hover{background:var(--co-gris)}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-lesson i{
  flex:0 0 auto;
  margin:0;
  padding:0;
  width:18px;
  font-size:14px;
  line-height:1;
  color:var(--co-tinta-3);
  vertical-align:baseline;
}
/* El icono del vídeo se marca en verde: es lo que distingue una
   lección de ver de una de leer, y es lo que el alumno busca. */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-lesson .toga-icon-content-video{color:var(--co-verde)}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__lesson-title{
  min-width:0;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__lesson-title p{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--co-tinta-2);
}
/* La etiqueta de "gratis" del tema va en su cian; pasa al verde. */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-lesson--free{
  flex:0 0 auto;
  margin:0;
  padding:3px 9px;
  border-radius:99px;
  background:rgba(15,122,82,.1);
  color:var(--co-verde-oscuro);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
}

/* "VER MÁS CAPÍTULOS". Con más de seis, el tema esconde el resto y
   pone abajo un enlace en su cian. Aquí es el renglón verde de la
   casa, el mismo que cierra las tarjetas del catálogo. */
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-toggle{
  padding:6px 4px 16px;
  border-top:1px solid var(--co-linea);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-toggle button{
  padding:8px 4px;
  border:0;
  background:transparent;
  font-family:var(--co-sans);
  font-size:13.5px;
  font-weight:600;
  color:var(--co-verde);
  text-decoration:none;
  cursor:pointer;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-toggle button:hover{
  color:var(--co-verde-oscuro);
  text-decoration:underline;
}

/* ------------------------------------------------------------
   3 · LA FICHA DE MATRÍCULA

   El tema la pinta en azul pizarra con `width:418px` clavados,
   dentro de una columna que mide menos, así que se sale por la
   derecha. Aquí es la tarjeta blanca con relieve del catálogo,
   ocupa su columna y ACOMPAÑA AL BAJAR: mientras se lee un temario
   de setenta y siete lecciones, el botón sigue a la vista.

   El `top` son 76 y no 0: la barra se queda clavada arriba con sus
   56 más los 10 que se despega al bajar. Sin esos 76 la ficha se
   metería por debajo de la barra.
   ------------------------------------------------------------ */

body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__card{
  min-width:0;
  margin:0;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card{
  position:sticky;
  top:76px;
  display:flex;
  flex-direction:column;
  width:auto;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--co-relieve);
  overflow:hidden;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__image{
  display:block;
  margin:0;
  background:var(--co-gris);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details{
  padding:20px;
  color:var(--co-tinta-2);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details__title{
  margin:0 0 14px;
  font-family:var(--co-serif);
  font-size:16px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
  text-transform:none;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details hr{
  display:none;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details ul{
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:9px 0;
  border-top:1px solid var(--co-linea);
  font-size:14.5px;
  line-height:1.45;
  color:var(--co-tinta-2);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details-item:first-child{border-top:0}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details-item .fa{
  flex:0 0 auto;
  width:16px;
  font-size:13px;
  text-align:center;
  color:var(--co-tinta-3);
}
body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card__details-item span{min-width:0}

/* El botón que el guion baja aquí desde el telón, a todo el ancho
   de la ficha: es la acción de la pantalla y aquí no compite con
   nada. */
body:is(.course-landing-page,.bundle-landing-page) .co-ficha-accion{
  padding:16px 20px 20px;
  border-top:1px solid var(--co-linea);
}
body:is(.course-landing-page,.bundle-landing-page) .co-ficha-accion .button.button-primary{
  width:100%;
}
body:is(.course-landing-page,.bundle-landing-page) .co-ficha-nota{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--co-tinta-3);
  text-align:center;
}

/* ------------------------------------------------------------
   4 · LAS PIEZAS NUESTRAS

   Cómo se estudia, las preguntas y el cierre. Las escribe
   `curso.js` y son iguales en todas las páginas de venta: hablan
   de la academia, no de este curso. Van sobre el mismo papel, en
   plancha blanca las dos primeras.
   ------------------------------------------------------------ */

body:is(.course-landing-page,.bundle-landing-page) .co-zona{
  max-width:var(--co-ancho);
  margin:0 auto;
  padding:0 24px 34px;
}
body:is(.course-landing-page,.bundle-landing-page) .co-zona-titulo{
  margin:0 0 6px;
  font-family:var(--co-serif);
  font-size:clamp(23px, 2.6vw, 30px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.18;
  color:var(--co-tinta);
}
body:is(.course-landing-page,.bundle-landing-page) .co-zona-bajada{
  margin:0 0 20px;
  max-width:62ch;
  font-size:16.5px;
  line-height:1.62;
  color:var(--co-tinta-2);
}
/* El titular con la caja pegada debajo: sin bajada de por medio, los
   6 px del titular dejaban la caja subida al texto. */
body:is(.course-landing-page,.bundle-landing-page) .co-zona-titulo + .co-plancha{
  margin-top:22px;
}
body:is(.course-landing-page,.bundle-landing-page) .co-plancha{
  background:rgba(255,255,255,.92);
  border-radius:var(--co-plancha-radio);
  box-shadow:var(--co-plancha);
  padding:var(--co-plancha-aire);
}

/* CÓMO SE ESTUDIA: cuatro cosas, cada una con su dibujo a trazo.
   Los iconos son SVG propios, como en toda la academia: cero
   emojis y cero Font Awesome. */
body:is(.course-landing-page,.bundle-landing-page) .co-modos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .co-modo b{
  display:block;
  margin:12px 0 4px;
  font-family:var(--co-serif);
  font-size:16px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
}
body:is(.course-landing-page,.bundle-landing-page) .co-modo p{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--co-tinta-2);
}
body:is(.course-landing-page,.bundle-landing-page) .co-modo svg{
  display:block;
  width:22px;
  height:22px;
  color:var(--co-verde);
}

/* LAS PREGUNTAS. Cada una es un `<details>` del navegador, así que
   funcionan con el teclado y, si el guion no llegara, abrirían y
   cerrarían igual: lo único que pone el guion es el MOVIMIENTO. */
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta{
  border-top:1px solid var(--co-linea);
}
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta:first-of-type{border-top:0}
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta > summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 4px;
  font-family:var(--co-serif);
  font-size:16px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
  cursor:pointer;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta > summary::-webkit-details-marker{display:none}

/* EL SIGNO DE ABRIR: dos barras, no un carácter. Al abrirse, la
   vertical se encoge sobre su centro y la cruz se queda en raya
   delante de quien mira. Escrito con un "+" y un "−" el cambio es
   un salto seco, porque `content` no se anima. */
body:is(.course-landing-page,.bundle-landing-page) .co-signo{
  position:relative;
  flex:0 0 auto;
  margin-left:auto;
  width:15px;
  height:15px;
}
body:is(.course-landing-page,.bundle-landing-page) .co-signo:before,
body:is(.course-landing-page,.bundle-landing-page) .co-signo:after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:15px;
  height:1.6px;
  border-radius:2px;
  background:var(--co-tinta-3);
  transform:translateY(-50%);
  transition:transform .26s var(--co-curva), background .26s var(--co-curva);
}
body:is(.course-landing-page,.bundle-landing-page) .co-signo:after{
  transform:translateY(-50%) rotate(90deg);
}
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta[open] .co-signo:before,
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta[open] .co-signo:after{
  background:var(--co-verde);
}
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta[open] .co-signo:after{
  transform:translateY(-50%) rotate(90deg) scaleX(0);
}

/* LA RESPUESTA. La caja es la que se estira y se encoge (por eso el
   `overflow`, o el texto asoma por debajo mientras se mueve) y el
   guion la anima con `element.animate`: el cierre no hay CSS que lo
   alcance, porque al soltarse el `open` el contenido desaparece. */
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta-cuerpo{
  overflow:hidden;
}
body:is(.course-landing-page,.bundle-landing-page) .co-pregunta-cuerpo p{
  margin:0;
  padding:0 4px 18px;
  max-width:70ch;
  font-size:15.5px;
  line-height:1.65;
  color:var(--co-tinta-2);
}

/* EL CIERRE: la última llamada, en la banda negra de la casa, para
   que la página termine donde termina la decisión. */
body:is(.course-landing-page,.bundle-landing-page) .co-cierre{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  padding:30px;
  border-radius:var(--co-plancha-radio);
  background:#14110f;
  color:rgba(255,255,255,.78);
}
body:is(.course-landing-page,.bundle-landing-page) .co-cierre h2{
  margin:0 0 6px;
  font-family:var(--co-serif);
  font-size:clamp(21px, 2.4vw, 27px);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.2;
  color:#fff;
}
body:is(.course-landing-page,.bundle-landing-page) .co-cierre p{
  margin:0;
  max-width:56ch;
  font-size:15.5px;
  line-height:1.6;
}

/* ------------------------------------------------------------
   5 · LA TABLA DE PRECIOS

   Y AQUÍ ESTÁ LA TRAMPA FINA DE ESTA PANTALLA: el tema le da al
   botón de cada fila `width:2rem; height:2rem; font-size:0`, así
   que la llamada a la acción se pinta como un círculo negro con una
   flecha y sin una palabra dentro. Hay que devolverle el tamaño Y
   el tamaño de letra: con solo el ancho, el texto sigue sin verse.
   ------------------------------------------------------------ */

/* LA SECCIÓN VIENE PARTIDA EN DOS COLUMNAS, y ese es el descuadre
   grande de esta pantalla: Wilson la dejó en `two-column`, así que el
   tema le da al contenido `flex:0 0 50%` y las tarjetas de precio se
   quedan en la mitad derecha (medido: 552 de los 1104) con la mitad
   izquierda vacía debajo del titular. Todas las demás secciones de
   esta pantalla llevan el titular arriba y el contenido debajo a todo
   el ancho, así que esta también. */
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__wrapper{
  display:block;
}
body:is(.course-landing-page,.bundle-landing-page) .pricing-table .section__content{
  flex:none;
  width:auto;
  max-width:none;
  margin-top:20px;
  padding-right:0;
}

/* Y LAS TARJETAS NO SE ESTIRAN A LOS 1104. Un precio suelto en una
   tarjeta de metro y pico de ancho es un renglón con un botón al
   final del desierto, así que cada una tiene su tope y se alinean a
   la izquierda: sirve igual con un precio, con dos o con tres. */
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 460px));
  justify-content:start;
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin:0;
  padding:20px;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--co-relieve);
}
/* EL BLOQUE DEL PRECIO trae del tema `flex:0 0 60%` y
   `max-width:60%`. En fila eso es "que ocupe el 60 % del ancho", y
   se puede vivir con ello; puesto en COLUMNA (que es como queda en
   el móvil) ese 60 % pasa a medirse sobre la ALTURA, y la tarjeta se
   quedaba con un agujero de aire entre el precio y el botón. Se le
   devuelve el tamaño de su contenido. */
/* Y EL ANCHO, QUE ES LO QUE TIRABA EL BOTÓN A OTRA LÍNEA: el tema le
   deja al bloque `width:100%`, y con `flex-basis:auto` el ancho manda
   sobre la base, así que se llevaba los 496 de la tarjeta enteros
   (medido) y el botón caía debajo con `wrap`. De ahí el agujero de
   aire entre el precio y el botón, que parecía un margen de más y era
   un salto de línea. Ocupa lo que sobra y el botón se queda al lado. */
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item-details{
  flex:1 1 auto;
  width:auto;
  max-width:none;
  min-width:0;
}
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item-details__price{
  margin:0;
  font-family:var(--co-serif);
  font-size:26px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:var(--co-tinta);
  text-transform:none;
}
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item-details__name{
  margin:4px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--co-tinta-3);
}
/* La flecha de esta fila la coloca el tema con `position:absolute`
   y un `translate` del 50 %, para clavarla en el centro del círculo
   que era el botón. Devuelto el botón a botón, esa flecha se
   quedaba flotando encima del texto. */
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item .fa{
  position:static;
  transform:none;
}

/* el botón, devuelto a botón */
body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item .button{
  width:auto;
  height:auto;
  min-height:44px;
  margin-left:auto;
  padding:0 20px;
  font-size:14.5px;
  align-self:center;
}

/* ------------------------------------------------------------
   6 · LAS OPINIONES

   Solo salen en una de las páginas de hoy, pero se visten igual: el
   día que Wilson las encienda en otra, ya están puestas.

   Y AQUÍ NO SE TOCA EL REPARTO, que es lo que costó una vuelta: la
   lista no es una lista, es un CARRUSEL que monta el guion del tema
   (Owl Carousel) metiendo las opiniones dentro de sus propias cajas
   y calculando anchos a mano. Al escribirle encima una rejilla, las
   fichas salían cortadas por la mitad. Se viste la ficha, las
   flechas y los puntos; el reparto es suyo.
   ------------------------------------------------------------ */

/* Y LOS 32 DE RELLENO LATERAL QUE EL TEMA LE PONE A LA CAJA, FUERA:
   son los que dejaban las fichas 32 píxeles a la derecha del titular
   de su propia sección y de las planchas de toda la pantalla. */
body:is(.course-landing-page,.bundle-landing-page) .reviews .section__content{
  padding-left:0;
  padding-right:0;
}

/* CUANDO SON POCAS, EN REJILLA Y A LA IZQUIERDA. La clase se la pone
   `curso.js` después de desmontar el carrusel: con dos opiniones, Owl
   las dejaba de 300 de ancho centradas en un hueco de 1072. Mismo
   reparto que la tabla de precios, para que las dos secciones del
   final se lean como una sola plancha. */
body:is(.course-landing-page,.bundle-landing-page) .reviews__list.co-rejilla{
  /* la lista es a la vez el `section__body`, y el tema le da
     `flex:0 0 66.6667%` con su `max-width`: las fichas se quedaban en
     dos tercios de la fila y centradas. A todo el ancho de lectura */
  flex:none;
  width:auto;
  max-width:none;
  padding-left:0;
  padding-right:0;
  display:grid;
  /* 380 y no 460 como los precios: aquí caben tres en fila, y tres
     opiniones seguidas se leen de un golpe; una tercera sola en la
     fila de abajo parece que falta algo */
  grid-template-columns:repeat(auto-fit, minmax(280px, 380px));
  justify-content:start;
  align-items:stretch;
  gap:16px;
}
body:is(.course-landing-page,.bundle-landing-page) .reviews__list.co-rejilla .reviews__list-item{
  margin:0;
}
/* la opinión que Thinkific sirve sin nada dentro */
body:is(.course-landing-page,.bundle-landing-page) .reviews__list-item.co-vacia{
  display:none;
}

body:is(.course-landing-page,.bundle-landing-page) .reviews__list-item{
  /* el margen hace de aire entre fichas: el carrusel las pega */
  margin:10px;
  padding:20px;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--co-relieve);
  color:var(--co-tinta-2);
}
body:is(.course-landing-page,.bundle-landing-page) .review__star{
  color:#e0a92a;
  font-size:12px;
}
body:is(.course-landing-page,.bundle-landing-page) .review__title{
  margin:10px 0 2px;
  padding:0;
  border:0;
  font-family:var(--co-serif);
  font-size:16px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  color:var(--co-tinta);
  text-transform:none;
}
body:is(.course-landing-page,.bundle-landing-page) .review__author{
  margin:0 0 10px;
  padding:0;
  border:0;
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--co-tinta-3);
}
body:is(.course-landing-page,.bundle-landing-page) .review__body p{
  margin:0;
  font-size:15px;
  line-height:1.6;
}
body:is(.course-landing-page,.bundle-landing-page) .review__show-less,
body:is(.course-landing-page,.bundle-landing-page) .review__show-more{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:var(--co-verde);
  text-decoration:none;
}

/* LAS FLECHAS del carrusel, que el tema pinta como dos círculos
   negros encima de las fichas. Pasan a papel con relieve, como todo
   lo que en esta academia se pulsa y no manda. */
body:is(.course-landing-page,.bundle-landing-page) .owl-nav button.owl-prev,
body:is(.course-landing-page,.bundle-landing-page) .owl-nav button.owl-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:0;
  border-radius:99px;
  background:#fff;
  color:var(--co-tinta-2);
  box-shadow:var(--co-relieve);
  transition:color .18s var(--co-curva),box-shadow .18s var(--co-curva);
}
body:is(.course-landing-page,.bundle-landing-page) .owl-nav button.owl-prev:hover,
body:is(.course-landing-page,.bundle-landing-page) .owl-nav button.owl-next:hover{
  color:var(--co-verde);
  box-shadow:var(--co-relieve-alto);
}
/* los puntos de debajo, al verde de la casa */
body:is(.course-landing-page,.bundle-landing-page) .owl-dots .owl-dot span{
  background:var(--co-linea-2);
}
body:is(.course-landing-page,.bundle-landing-page) .owl-dots .owl-dot.active span{
  background:var(--co-verde);
}

/* ------------------------------------------------------------
   7 · LA CUENTA ATRÁS

   Vive en una sola página (las clases por Zoom) y su fecha está
   pasada desde febrero, así que hoy marca todo ceros. Se viste
   igual, porque una cuenta atrás a cero con el traje del tema se
   lee como una página rota; con este, se lee como un dato más. Que
   la fecha se actualice o que la sección se retire es cosa de
   Wilson: está en la lista de decisiones pendientes.
   ------------------------------------------------------------ */

/* LA DECORACIÓN DE FONDO. Esta sección trae dos capas dibujadas con
   pseudoelementos: un degradado cian de arriba abajo y una ola negra
   en el borde de abajo, recortada con `clip-path`. Sobre el papel
   hueso las dos se leen como un error de maquetación (media pantalla
   azulada y una banda oscura curva partiendo la página), así que se
   apagan. */
body:is(.course-landing-page,.bundle-landing-page) section.countdown:before,
body:is(.course-landing-page,.bundle-landing-page) section.countdown:after{
  content:none;
}

/* Y EL ÚNICO `!important` DE TODO ESTE ARCHIVO, porque no hay otra
   forma: el relleno de abajo de esta sección lo escribe el tema con
   `!important` (`padding-bottom:6rem !important`) en la regla que
   genera para la página. Sumado a los 4rem de la sección deja ciento
   sesenta píxeles de papel vacío entre la cuenta atrás y el temario.
   Ganarle por especificidad no se puede: contra `!important` solo
   vale otro `!important`. */
body:is(.course-landing-page,.bundle-landing-page) section.countdown > [class*="__container"]{
  padding-bottom:34px !important;
}

/* El tema centra esta sección entera y le mete a cada caja de dentro
   un relleno lateral propio, así que el reloj salía en medio de la
   página y el botón quince píxeles a la izquierda del margen de
   lectura. Todo a la izquierda, como el resto de la pantalla. */
body:is(.course-landing-page,.bundle-landing-page) .countdown .section__headings,
body:is(.course-landing-page,.bundle-landing-page) .countdown .section__content,
body:is(.course-landing-page,.bundle-landing-page) .countdown .section__button-group{
  padding-left:0;
  padding-right:0;
  text-align:left;
}
/* y el margen negativo de 16 del envoltorio, que le comía al botón
   el margen de lectura de toda la pantalla */
body:is(.course-landing-page,.bundle-landing-page) .countdown__wrapper{
  margin-left:0;
  margin-right:0;
}

/* EL RELOJ VENCIDO NO SE PINTA. Lo esconde `curso.js` cuando la fecha
   que Wilson puso ya pasó, y hace falta una regla nuestra: el atributo
   `hidden` del navegador es un `display:none` de la hoja del agente y
   pierde contra el `display:flex` que el tema le da al reloj. */
body:is(.course-landing-page,.bundle-landing-page) .countdown-clock.co-vencido{
  display:none;
}

body:is(.course-landing-page,.bundle-landing-page) .countdown-clock{
  text-align:left;
  display:flex;
  /* el tema lo centra desde el `ul`, y ahí no llega el `text-align` */
  justify-content:flex-start;
  align-items:stretch;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.course-landing-page,.bundle-landing-page) .countdown__chrono{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:84px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  box-shadow:var(--co-relieve);
}
body:is(.course-landing-page,.bundle-landing-page) .countdown__count{
  font-family:var(--co-serif);
  font-size:26px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.1;
  color:var(--co-tinta);
}
body:is(.course-landing-page,.bundle-landing-page) .countdown__chrono strong{
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--co-tinta-3);
}
body:is(.course-landing-page,.bundle-landing-page) .countdown .section__button-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

/* ------------------------------------------------------------
   8 · EL PAQUETE

   `/bundles/simuladores` tiene la lista de lo que incluye VACÍA:
   el paquete se publicó sin añadirle los productos. Se le da el
   sitio y el aviso queda apuntado para Wilson; el día que meta los
   cursos dentro, las tarjetas que salgan son las mismas del
   catálogo.
   ------------------------------------------------------------ */

body:is(.bundle-landing-page) .bundle-includes .products__list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.bundle-landing-page) .bundle-includes .products__list:empty{display:none}

/* ------------------------------------------------------------
   9 · EL MÓVIL

   Se mide a 390 de ancho y a 667 de alto. Lo que cambia:

   1. El temario pasa a una columna Y la ficha de matrícula sube
      por encima, que es donde está el botón: dejarla debajo de
      setenta y siete lecciones es esconder la acción.
   2. La ficha deja de acompañar al bajar. Pegada arriba en una
      pantalla de 667 se come media pantalla.
   3. Las planchas pierden su aire de 30 y bajan a 16.
   ------------------------------------------------------------ */

@media (max-width:768px){
  body:is(.course-landing-page,.bundle-landing-page) [class*="__container"]{
    padding-left:16px;
    padding-right:16px;
  }
  body:is(.course-landing-page,.bundle-landing-page) .banner__wrapper{
    padding-top:24px;
    padding-bottom:26px;
  }

  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__content{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__card{order:-1}
  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum-card{
    position:static;
    top:auto;
  }
  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-container{
    padding:6px 16px;
    border-radius:20px;
  }
  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-header{padding:16px 2px}

  body:is(.course-landing-page,.bundle-landing-page) .co-zona{padding-left:16px;padding-right:16px}
  body:is(.course-landing-page,.bundle-landing-page) .co-plancha{padding:18px;border-radius:20px}
  body:is(.course-landing-page,.bundle-landing-page) .co-cierre{padding:22px;border-radius:20px}

  /* los datos del telón, en dos columnas: en fila se parten a
     trocitos y cada dato queda de 70 píxeles */
  body:is(.course-landing-page,.bundle-landing-page) .co-datos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  body:is(.course-landing-page,.bundle-landing-page) .co-datos li{min-width:0}

  /* y los botones, a todo el ancho: es donde llega el pulgar. El
     grupo de acciones del telón también, o el botón se queda de su
     tamaño y centrado en medio de la fila. */
  body:is(.course-landing-page,.bundle-landing-page) .banner .section__button-group{
    margin-top:18px;
    gap:10px;
  }
  body:is(.course-landing-page,.bundle-landing-page) .banner .product-action-buttons,
  body:is(.course-landing-page,.bundle-landing-page) .banner [class*="product-action-buttons__purchase"]{
    width:100%;
  }
  body:is(.course-landing-page,.bundle-landing-page) .banner .button.button-primary,
  body:is(.course-landing-page,.bundle-landing-page) .co-cierre .button.button-primary{
    width:100%;
  }
  /* el precio se queda en su renglón, debajo de los botones y
     alineado con todo lo demás */
  body:is(.course-landing-page,.bundle-landing-page) .co-precio-telon{
    width:100%;
    justify-content:flex-start;
  }
  /* y las migas no se parten: "Todos los cursos" en dos renglones se
     lee como dos enlaces distintos */
  body:is(.course-landing-page,.bundle-landing-page) .co-migas a{white-space:nowrap}
  body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    /* Y `nowrap`, QUE ES LO QUE COSTÓ MEDIR. En fila, el `wrap` de
       arriba sirve para que el botón baje si no cabe. Puesto en
       COLUMNA hace otra cosa completamente distinta: reparte los
       hijos en varias COLUMNAS, así que el precio se quedaba en una
       y el botón en otra, a la derecha y saliéndose de la tarjeta.
       Se veía como si el ancho del botón no se estuviera aplicando,
       y el ancho estaba bien: era el reparto. */
    flex-wrap:nowrap;
  }
  /* y el bloque del precio deja de crecer: en COLUMNA, el `flex:1 1`
     que en fila le da el ancho sobrante se mide sobre la ALTURA y
     devuelve el agujero de aire por la otra puerta */
  body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item-details{
    flex:0 0 auto;
  }
  body:is(.course-landing-page,.bundle-landing-page) .pricing-table__list-item .button{
    /* `stretch` y no `width:100%`: el tema le deja puesto
       `align-self:center`, y centrado no hay ancho que lo estire */
    align-self:stretch;
    width:auto;
    margin-left:0;
  }
}

/* Quien pide menos movimiento no recibe ninguno. Lo que se ve sigue
   siendo exactamente lo mismo. */
@media (prefers-reduced-motion:reduce){
  body:is(.course-landing-page,.bundle-landing-page) .button.button-primary,
  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-header,
  body:is(.course-landing-page,.bundle-landing-page) .course-curriculum__chapter-lesson,
  body:is(.course-landing-page,.bundle-landing-page) .co-signo:before,
  body:is(.course-landing-page,.bundle-landing-page) .co-signo:after{transition:none}
  body:is(.course-landing-page,.bundle-landing-page) .button.button-primary:hover{transform:none}
}