/* ============================================================
   Chillin Online · el marco de las pantallas abiertas
   ------------------------------------------------------------
   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.

   QUÉ ES ESTO: lo que comparten todas las pantallas que se ven
   SIN haber entrado (el catálogo y las páginas de venta de cada
   curso y de cada paquete). Son cuatro piezas y ninguna sabe qué
   hay en el medio de la página:

     0 · el papel        · el fondo hueso y la letra de la casa
     1 · el telón        · la malla quieta del fondo
     2 · la barra        · la banda negra, y su despegue al bajar
     3 · el pie          · la banda negra de abajo

   Estaba escrito dentro de `catalogo.css` porque el catálogo era la
   única de estas pantallas encendida. Sale aquí el 26-ago-2026, al
   entrar las páginas de venta, para que la lista de pantallas se
   escriba UNA vez: si mañana se enciende otra (una página suelta,
   la portada), se añade su clase al prefijo de aquí y no hay que
   repasar cuatro secciones.

   EL PREFIJO SE ESCRIBE CON `:is()` a propósito. Las alternativas
   eran repetir cada regla tres veces (que es donde se olvida una) o
   colgar de una clase que ponga el guion, y eso no vale: este marco
   tiene que estar pintado ANTES de que el guion corra, o el
   visitante ve el azul marino del tema y luego el salto. `:is()`
   pesa lo que su argumento más específico, o sea una clase, así que
   la cuenta de especificidad queda EXACTAMENTE igual que cuando
   esto se escribía `body.collections-landing-page`.

   LA PORTADA (`home-landing-page`) ENTRA EL 27-AGO-2026: era la
   única pantalla pública que se quedaba con el traje del tema.

   OJO: lo que hay aquí NO es todo lo que el visitante ve sin
   entrar. El estilo de arranque del tema (`tema-empire-head.html`)
   lleva una copia corta de la barra, del papel y del pie, porque el
   bloque del pie llega tarde. Si se cambia el alto de la barra, el
   ancho de lectura o el tamaño del logo, HAY QUE CAMBIARLO EN LOS
   DOS SITIOS.
   ============================================================ */

/* La misma paleta de la clase y del portal, palabra por palabra:
   si un día cambia un valor, cambia en los cuatro sitios a la vez y
   la academia entera se mueve junta. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page){
  --co-tinta:#14110f;
  --co-tinta-2:#3a332e;
  --co-tinta-3:#7a6f66;
  --co-linea:#ebe7e3;
  --co-linea-2:#ddd6d0;
  --co-gris:#fbfaf9;
  --co-verde:#0f7a52;
  --co-verde-oscuro:#0b5e3f;
  --co-radio:10px;
  --co-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --co-serif:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --co-titulo-peso:700;
  --co-titulo-espaciado:-.03em;
  --co-curva:cubic-bezier(.22,1,.36,1);

  --co-aire:26px;
  --co-ancho:1120px;

  --co-sombra:0 1px 2px rgba(20,17,15,.04);
  --co-sombra-alta:0 6px 22px rgba(20,17,15,.07);

  /* El papel hueso del recorrido de venta y del portal. */
  --co-papel:#f5f2ee;

  /* El relieve de dos sombras: la corta pega la pieza al papel, la
     larga y abierta se lee como aire por debajo. */
  --co-relieve:0 1px 2px rgba(20,17,15,.035),
               0 12px 28px rgba(20,17,15,.045);
  --co-relieve-alto:0 2px 4px rgba(20,17,15,.05),
                    0 22px 46px rgba(20,17,15,.085),
                    0 44px 90px rgba(20,17,15,.05);

  --co-plancha:0 1px 2px rgba(20,17,15,.03),
               0 30px 70px rgba(20,17,15,.055);
  --co-plancha-ancho:min(1160px, 100% - 32px);
  --co-plancha-radio:28px;
  --co-plancha-aire:30px;
}

/* ------------------------------------------------------------
   0 · EL PAPEL

   El tema pinta estas pantallas en azul marino con el texto en gris
   claro. Se les da la vuelta entera.

   Se pinta el documento Y el cuerpo, porque según el navegador
   quien se desplaza no es el mismo elemento y basta con que uno se
   quede en su azul para que asome una banda al rebotar el scroll.
   ------------------------------------------------------------ */

html:has(body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page)){
  background:#f5f2ee;
}

body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page){
  background:var(--co-papel);
  color:var(--co-tinta);
  font-family:var(--co-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* La caja de fuera del tema, a transparente: le pone fondo propio a
   más de una y basta con que una se quede en su color para que
   salga una banda por la junta. Es la misma lección que dejaron el
   portal y la clase. Las cajas de dentro las apaga cada pantalla en
   su archivo, que es quien sabe cómo se llaman. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) main{
  background:transparent;
}

/* La misma red que en la clase y en el portal: los botones y los
   campos NO heredan la letra del cuerpo, se la pone el navegador. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) button,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) input,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) select,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) textarea{
  font-family:var(--co-sans);
}

/* Los enlaces sueltos del tema van en el cian de sistema. Aquí el
   único color que subraya algo es el verde de la casa. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) a{color:inherit}

/* ------------------------------------------------------------
   1 · EL TELÓN

   La malla quieta del fondo, la misma del portal: tres capas, el
   telón al fondo, el papel hueso encima y las planchas por
   delante. Sin ella el papel se lee como una hoja plana y las
   planchas no tienen sobre qué flotar.

   `fixed` de verdad y no un fondo con `background-attachment`,
   que es la forma que se rompe en el Safari del iPhone.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .co-telon{
  position:fixed;
  inset:-25%;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--co-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--co-linea) 1px, transparent 1px);
  background-size:120px 120px;
  transform:rotate(-10deg);
  opacity:0;
  transition:opacity 1.6s ease .4s;
  -webkit-mask-image:radial-gradient(85% 70% at 50% 16%, #000 0%, rgba(0,0,0,.45) 55%, transparent 92%);
  mask-image:radial-gradient(85% 70% at 50% 16%, #000 0%, rgba(0,0,0,.45) 55%, transparent 92%);
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .co-telon.co-dentro{opacity:.55}

/* Y todo lo demás por delante del telón. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) main,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer{
  position:relative;
  z-index:1;
}

/* ------------------------------------------------------------
   2 · LA BARRA DE ARRIBA

   Copiada del portal a propósito, valor por valor: es la MISMA
   barra, con el mismo markup del tema, y si aquí midiera distinto
   el alumno la vería saltar al cambiar de pantalla.

   El logo trae su propio recuadro negro pegado al dibujo, así que
   la barra va en el negro de la clase (#14110f) y ese recuadro
   desaparece dentro del fondo.

   OJO con el patrón: se escribe `header__` con los dos guiones y
   no `header` a secas, que también lo lleva alguna pieza de dentro
   de las tarjetas.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header.header,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__logo"],
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__container"],
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__wrapper"]{
  background:#14110f;
  border-bottom:0;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header a,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header button,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__"] a,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__"] button{color:#fff}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header a,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__"] a{
  font-family:var(--co-sans);
  font-size:12.5px;
  letter-spacing:.08em;
}

/* La barra va BAJA, en 56, y el alto lo fija una sola pieza: el
   renglón del logo. Las otras dos capas del tema traen su propio
   relleno vertical y se suma al de abajo, así que las tres a cero
   y solo una manda. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header.header,
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__container"],
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__wrapper"]{
  padding-top:0;
  padding-bottom:0;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__wrapper"]{
  display:flex;
  align-items:center;
  min-height:56px;
  max-width:var(--co-ancho);
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__logo"]{
  display:flex;
  align-items:center;
  min-height:0;
  padding-top:0;
  padding-bottom:0;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__logo"] img{
  height:30px;
  width:auto;
  object-fit:contain;
  display:block;
}

/* EL RENGLÓN DE LA DERECHA. Aquí solo vive "Entrar", porque estas
   pantallas se ven sin haber entrado. El tema lo monta como lista en
   bloque con los ítems flotando; pasa a fila. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav > ul{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  float:none;
  margin:0;
  padding:0;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav > ul > li{
  display:flex;
  align-items:center;
  float:none;
  margin:0;
  padding:0;
}

/* EL ENLACE VACÍO DEL MENÚ. El tema pinta un `<li>` con un `<a>`
   sin texto y sin destino (viene del ajuste de navegación, que
   está a medio rellenar). Ocupa hueco y arrastra la fila. Se
   esconde por lo que es, no por su posición: cualquier enlace de
   la barra que apunte a la nada. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav > ul > li > a[href=""]{display:none}

/* LOS DEMÁS ENLACES DE LA BARRA. En el catálogo solo vivía "Entrar",
   pero las páginas de venta traen además el enlace de llamada a la
   acción del tema (`header__nav-cta`), que viene con borde azul de 2
   píxeles y 52 de alto: dentro de una barra de 56 se sale por arriba
   y por abajo y no pega con nada. Aquí todos se leen como texto, y
   la única píldora de la barra sigue siendo "Entrar". Va ANTES que
   la regla de "Entrar" a propósito: las dos pesan lo mismo y quien
   manda es la última. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav-item > a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:0 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  text-decoration:none;
  transition:background .18s var(--co-curva);
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav-item > a:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}

/* "Entrar" deja de ser un texto suelto y se lee como el botón que
   es: la única acción de esta barra. Y VA EN VERDE, el mismo del
   botón que manda en la portada (Sebas, 27-ago): de línea sobre la
   banda negra se leía como un enlace más, no como la acción. */
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav-sign-in > a{
  display:flex;
  align-items:center;
  min-height:36px;
  padding:0 16px;
  border:0;
  border-radius:99px;
  background:var(--co-verde);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(11,94,63,.2), 0 8px 18px rgba(11,94,63,.22);
  transition:background .18s var(--co-curva),transform .18s var(--co-curva),box-shadow .18s var(--co-curva);
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav-sign-in > a:hover{
  background:var(--co-verde-oscuro);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(11,94,63,.24), 0 12px 24px rgba(11,94,63,.26);
}
@media (prefers-reduced-motion:reduce){
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav-sign-in > a{transition:background .18s linear}
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__nav-sign-in > a:hover{transform:none}
}

/* ------------------------------------------------------------
   2b · LA BARRA SE DESPEGA AL BAJAR

   El mismo gesto del portal, con los mismos números: arriba del
   todo es una banda de borde a borde y en cuanto la página se
   mueve se encoge, se estrecha, se redondea y flota sobre lo que
   pasa por debajo.

   SOLO CON SITIO (769 para arriba). Y por debajo del velo del
   paso (200 contra 250), para que al cambiar de página el velo
   tape la pantalla entera y no quede la barra flotando.

   LA PELEA CON EL TEMA: al mover la página, el tema le pone al
   header la clase `fixed`, y con ella una regla suya de TRES
   clases que lo pinta del azul marino de la pantalla vieja. Se le
   gana escribiendo `html` delante y nombrando `header.header`,
   que sube la cuenta a cuatro.
   ------------------------------------------------------------ */

@media (min-width:769px){
  html body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header.header{
    position:sticky;
    top:0;
    z-index:200;
    transition:background .35s var(--co-curva),
               padding-top .4s var(--co-curva);
  }
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__wrapper"]{
    transition:min-height .4s var(--co-curva),
               max-width .4s var(--co-curva),
               border-radius .4s var(--co-curva),
               padding .4s var(--co-curva),
               background .35s ease,
               box-shadow .4s ease;
  }
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__logo"] img{
    transition:height .4s var(--co-curva);
  }

  html body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada header.header,
  html body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada header.header.fixed,
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada [class*="header__container"],
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada [class*="header__logo"]{
    background:transparent;
    box-shadow:none;
    border-bottom:0;
  }
  html body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada header.header{padding-top:10px}
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada [class*="header__wrapper"]{
    min-height:50px;
    max-width:min(1040px, calc(100% - 32px));
    border-radius:99px;
    padding-left:22px;
    padding-right:14px;
    background:rgba(20,17,15,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    box-shadow:0 1px 1px rgba(20,17,15,.06),
               0 10px 24px rgba(20,17,15,.14),
               0 30px 60px rgba(20,17,15,.10);
  }
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page).co-barra-bajada [class*="header__logo"] img{height:26px}
}

/* ------------------------------------------------------------
   3 · EL PIE

   El tema lo pinta en el azul marino de la pantalla vieja
   (#000a19) con el texto en blanco, y dentro solo hay dos cosas:
   un enlace vacío (el mismo del menú, que viene del ajuste de
   navegación a medio rellenar) y el aviso de derechos.

   Pasa al negro de la barra, para que la pantalla empiece y
   termine en el mismo color, y el enlace vacío se va.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer{
  background:#14110f;
  color:rgba(255,255,255,.72);
  padding-top:28px;
  padding-bottom:24px;
  margin-top:56px;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer .footer__container{
  max-width:var(--co-ancho);
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer .footer__nav-item > a[href=""]{display:none}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer .section__divide{
  display:block;
  height:1px;
  background:rgba(255,255,255,.14);
  margin:0 0 16px;
}
body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer .footer__copyright{
  font-size:12.5px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.6);
}

/* ------------------------------------------------------------
   4 · EL MÓVIL DEL MARCO

   Lo poco que el marco tiene que mover a 390: los dos rellenos
   laterales, que a esa medida se comen el ancho de lectura. Que la
   barra deje de quedarse arriba lo decide cada pantalla, porque
   depende de cuánto mide lo que hay debajo.
   ------------------------------------------------------------ */

@media (max-width:768px){
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__wrapper"]{
    padding-left:16px;
    padding-right:16px;
  }

  /* EL BOTÓN DE MENÚ, CENTRADO DE VERDAD. El del tema mide 24x24 y
     cuelga su rótulo ("MENÚ") FUERA de la caja, con `position:
     absolute` por debajo. Mientras la barra del tema era alta el
     rótulo cabía; al encogerla nosotros a 56, el botón se centraba
     él solo y el rótulo se salía por abajo, pisando el borde.

     El hueco del rótulo se declara como margen: así el centrado del
     renglón cuenta con los dos y el conjunto queda a media altura,
     sin tocar el icono (que son spans colocados respecto al botón y
     se descuadran en cuanto se le cambia el alto). */
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__mobile-button{
    margin-bottom:13px;
  }
  /* Y LO QUE SE PULSA, 44. El botón dibuja 24 y eso es la mitad de
     lo que pide un dedo: la capa va por debajo, invisible, y no
     mueve nada de sitio. */
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .header__mobile-button:before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:44px;
    height:44px;
  }
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) footer.footer .footer__container{
    padding-left:16px;
    padding-right:16px;
  }
}

/* Quien pide menos movimiento no recibe ninguno: ni el telón que se
   funde ni la barra que se encoge. Lo que se ve sigue siendo
   exactamente lo mismo. */
@media (prefers-reduced-motion:reduce){
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) .co-telon{transition:none}
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) header.header,
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__wrapper"],
  body:is(.home-landing-page,.collections-landing-page,.course-landing-page,.bundle-landing-page) [class*="header__logo"] img{transition:none}
}