/** ==========================================================================
 * Componentes CEI — piezas compartidas del sistema 2026
 *
 * Aquí va lo que no es ni un token ni un estilo de texto: componentes que se
 * repiten en varias plantillas. Se carga después de cei-base.css y antes de
 * las hojas por plantilla.
 *
 * A diferencia de cei-base.css, aquí sí hay selectores heredados. Es
 * deliberado y temporal: el componente se define una vez y se le enganchan
 * los selectores del marcado antiguo, para no tener que tocar contenido que
 * está escrito en el editor de WordPress. Según ese marcado se vaya
 * limpiando, cada selector heredado se sustituye por la clase del sistema y
 * la lista encoge.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * AQUÍ ESTUVO LA TRANSICIÓN ENTRE PÁGINAS (Eduardo, 16/09/2026)
 *
 * Era un `@view-transition { navigation: auto }` con la página saliente
 * subiendo al desvanecerse y la entrante llegando desde abajo, más la cabecera
 * quieta por `view-transition-name`.
 *
 * SE QUITA POR EL LIQUID GLASS. La cabecera y el buscador se apoyan en
 * `backdrop-filter`, y una transición de página obliga al navegador a aislar en
 * su propia capa lo que participa en ella: ahí el vidrio deja de ver lo que
 * tiene detrás y se apaga. Llegó a estar sorteado poniendo el nombre de la
 * cabecera solo mientras duraba la transición —una clase en <html> desde
 * `pageswap` y `pagereveal`—, pero es un equilibrio frágil que se rompe en
 * cuanto otra pieza de cristal entra en la ecuación. Entre las dos cosas, se
 * queda el vidrio.
 *
 * Con esto se fue también `transicionCabecera()` de js/mi_js.js.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * BOTÓN
 *
 * Los enganches heredados llevan [href]. No es adorno: la regla del tema para
 * .botones_curso a empata en especificidad con la nuestra y va 154 KB por
 * detrás en el CSS agregado, así que ganaba por orden. El selector de atributo
 * sube un nivel y además dice la verdad, que son enlaces.
 *
 * Un único botón para toda la web: borde de 1px, esquinas de pastilla y la
 * tipografía de Figma (Inter · Regular · 19 · automático · -2%). La geometría
 * sale del CTA de la cabecera, que es donde ya estaba definida.
 *
 * Antes había uno distinto por sitio: 22px/500 sin borde en la home, 18.7px
 * /500 con esquinas rectas en las fichas de curso, y otros tres juegos de
 * variables privadas en las landings (--lf-*, --hiring-*, .Festival-btn), que
 * están pendientes de sumarse aquí.
 * -------------------------------------------------------------------------- */
.Global-boton,
.mas_cursos > a:not(:has(h2, h4)),
.botones_curso a[href],
.botones_embajadores a[href],
.botones_seo_localizaciones > a[href],
.boton_fijo > a[href],
.enlace_despliega_home,
.boton_cursos {
  /* Un solo tamaño para todos los botones (Eduardo, 07/09/2026): 12 vertical,
     24 horizontal, en Size-19. Habia dos —este y una pastilla pequeña de 7×12
     para el «Más estudios» de la home y el «Saber más» de empleo— y se veian
     distintos. La pastilla de la barra de navegacion (.MenuNavegacion-cta) es
     otro componente y conserva la suya. */
  --Global-Boton-relleno: 12px 24px;

  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);

  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--Global-Boton-relleno);
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: transparent;
  color: var(--Global-Color-Black);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* El de la home se ajusta a su texto; los demás ocupan el ancho de su fila. */
.mas_cursos > a:not(:has(h2, h4)) {
  display: inline-flex;
}

.Global-boton,
.botones_curso a[href],
.botones_embajadores a[href],
.botones_seo_localizaciones > a[href],
.boton_fijo > a[href],
.enlace_despliega_home,
.boton_cursos {
  display: flex;
}

/*
 * Los botones que llevan a un PDF marcan la descarga con el icono de Tabler,
 * el mismo que el «Programa académico y horarios» de las fichas
 * (meta-boxes/includes/piezas.php, images/iconos/download.svg).
 *
 * Va por selector de atributo y no clase a clase: cualquier boton del sistema
 * que apunte a un .pdf lo hereda solo, sin tocar el HTML de la pagina ni el
 * contenido guardado en la base de datos (Eduardo, 09/09/2026).
 *
 * El `:not(:has(svg))` evita el icono doble: el «Programa academico y horarios»
 * de la ficha ya trae el suyo dentro del enlace (meta-boxes/includes/piezas.php)
 * y salian dos flechas seguidas. Cualquier boton que pinte su propio icono
 * queda fuera por el mismo motivo, sin tener que listarlo.
 *
 * Es una mascara y no un background: asi el icono toma el color del texto y se
 * invierte con el boton al pasar el raton, igual que la variante llena.
 */
.Global-boton[href$=".pdf" i]:not(:has(svg))::after,
.boton_cursos[href$=".pdf" i]:not(:has(svg))::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2017v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2%27/%3E%3Cpath%20d%3D%27M7%2011l5%205l5-5%27/%3E%3Cpath%20d%3D%27M12%204v12%27/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2017v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2%27/%3E%3Cpath%20d%3D%27M7%2011l5%205l5-5%27/%3E%3Cpath%20d%3D%27M12%204v12%27/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/*
 * Variante llena: el hover y el estado «activo». La ciudad actual del selector
 * de sede ya no se rellena (Eduardo, 07/09/2026): el relleno negro queda para
 * las llamadas a la acción, y la sede se distingue por su check (curso.css).
 */
.Global-boton:hover,
.Global-boton--activo,
.mas_cursos > a:not(:has(h2, h4)):hover,
.botones_curso a[href]:hover,
.botones_embajadores a[href]:hover,
.boton_fijo > a[href]:hover,
.botones_seo_localizaciones > a[href]:hover,
.enlace_despliega_home:hover,
.boton_cursos:hover {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

.Global-boton:focus-visible,
.mas_cursos > a:not(:has(h2, h4)):focus-visible,
.botones_curso a[href]:focus-visible,
.botones_embajadores a[href]:focus-visible,
.botones_seo_localizaciones > a[href]:focus-visible,
.boton_fijo > a[href]:focus-visible,
.enlace_despliega_home:focus-visible,
.boton_cursos:focus-visible {
  outline: 2px solid var(--Global-Color-Black);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * VARIANTE SUBRAYADA — .Global-boton--underline (Eduardo, 16/09/2026)
 *
 * El mismo boton, pero al pasar por encima NO se rellena: solo se subraya el
 * texto y aparece la flecha. Para las llamadas secundarias, donde el relleno
 * negro pesa mas de lo que vale lo que hay detras.
 *
 * LA FLECHA es la del sistema: el glifo ↓ de Inter (con el FE0E, que pide la
 * forma de texto y no el emoji) girado -135°, que es lo que lo deja en la
 * diagonal apuntando ↗. Es el mismo valor que usan la flecha del CTA de la
 * barra, la de las tarjetas de area y la de los enlaces externos de la ficha:
 * -135 sobre una flecha que mira hacia ABAJO son los 45° de la diagonal.
 *
 * Reserva su sitio desde el principio (`opacity: 0` y no `display: none`): si
 * apareciera de la nada, el boton crecería al pasar el raton y el texto
 * bailaria.
 *
 * Va DESPUES del hover de la base, como el resto de variantes.
 * -------------------------------------------------------------------------- */

.Global-boton--underline::after {
  content: "\2193\FE0E";
  display: inline-block;
  flex: 0 0 auto;
  rotate: -135deg;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--Font-Weight-400);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.Global-boton--underline:hover,
.Global-boton--underline:focus-visible {
  background-color: transparent;
  color: var(--Global-Color-Black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.Global-boton--underline:hover::after,
.Global-boton--underline:focus-visible::after {
  opacity: 1;
}

/*
 * Variante invertida, para las laminas negras (el bloque de precio): borde y
 * texto blancos, y al pasar el raton se rellena de blanco con el texto en
 * negro. Va DESPUES del hover de la base, que si no la pisaria: misma
 * especificidad, gana el ultimo (lo vigila .tools/comprueba-variantes.py).
 */
.Global-boton--invertido {
  border-color: var(--Global-Color-White);
  color: var(--Global-Color-White);
}

.Global-boton--invertido:hover {
  background-color: var(--Global-Color-White);
  color: var(--Global-Color-Black);
}

.Global-boton--invertido:focus-visible {
  outline-color: var(--Global-Color-White);
}

/*
 * Variante destacada, para la llamada principal de una lamina (el «Matriculate»
 * del bloque de precio, Eduardo, 06/09/2026): rellena del color destacado del
 * sistema con el texto en blanco; al pasar el raton se vacia y el texto toma
 * el color. Tambien va DESPUES del hover de la base, por lo mismo que la
 * invertida.
 *
 * El «Registro» de /programa-embajadores/ es la llamada principal de su pagina
 * y lleva esta (Eduardo, 25/09/2026); el «Acceso» de al lado, para quien ya es
 * embajador, se queda en contorno.
 */
.Global-boton--destacado,
.botones_embajadores a[href]:first-child {
  border-color: var(--Global-Destacado);
  background-color: var(--Global-Destacado);
  color: var(--Global-Color-White);
}

.Global-boton--destacado:hover,
.botones_embajadores a[href]:first-child:hover {
  background-color: var(--Global-Color-White);
  color: var(--Global-Destacado);
}

.Global-boton--destacado:focus-visible,
.botones_embajadores a[href]:first-child:focus-visible {
  outline-color: var(--Global-Destacado);
}

/* --------------------------------------------------------------------------
 * LOS QUE LLEVAN A UN PDF: AL PASAR, SOLO SE SUBRAYAN (Eduardo, 16/09/2026)
 *
 * Descargar un fichero no es la llamada principal de ninguna página, y el
 * relleno negro del hover le daba el peso de la que sí lo es. Con el subrayado
 * se entiende igual que es pulsable y no compite con el botón de al lado.
 *
 * Solo el botón de contorno: los rellenos —invertido y destacado— se quedan
 * con su hover, que ahí el subrayado no se leería sobre el color. La landing de
 * Open Day tiene justo ese caso, su programa en PDF va en un invertido.
 * -------------------------------------------------------------------------- */
.Global-boton[href$=".pdf" i]:not(.Global-boton--invertido):not(.Global-boton--destacado):hover,
.Global-boton[href$=".pdf" i]:not(.Global-boton--invertido):not(.Global-boton--destacado):focus-visible,
.boton_cursos[href$=".pdf" i]:hover,
.boton_cursos[href$=".pdf" i]:focus-visible {
  background-color: transparent;
  color: var(--Global-Color-Black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * CARRUSEL EN MÓVIL
 *
 * Los carruseles de la home y de las áreas son el mismo componente hecho a
 * mano: un contenedor con un grid dentro al que un JS le calcula el ancho por
 * breakpoint y lo desplaza con translateX al pulsar las flechas.
 *
 * En móvil eso no se sostiene. El wrapper hereda un ancho del 275 por ciento,
 * así que en una pantalla de 375 una sola tarjeta salía midiendo 475: más
 * ancha que la ventana. Aquí el recorrido pasa a ser scroll lateral de verdad,
 * con enganche, y el JS deja de escribir el ancho por debajo de 768.
 *
 * Cuántas tarjetas caben lo dice --Global-Carrusel-tarjeta: una, con la
 * siguiente asomando (85%). Cada sitio puede cambiarlo; la home lo bajaba al
 * 45% para ir de dos en dos y desde el 07/09/2026 (Eduardo) va también de una
 * en una.
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .swiper-container_home,
  .swiper-container_area {
    --Global-Carrusel-tarjeta: 85%;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .swiper-container_home::-webkit-scrollbar,
  .swiper-container_area::-webkit-scrollbar {
    display: none;
  }

  .swiper-container_home .swiper-wrapper,
  .swiper-container_area .swiper-wrapper {
    display: flex;
    width: auto;
    gap: 16px;
    transform: none;
    transition: none;
  }

  .swiper-container_home .swiper-slide,
  .swiper-container_area .swiper-slide {
    flex: 0 0 var(--Global-Carrusel-tarjeta);
    width: auto;
    scroll-snap-align: start;
  }

  .swiper-mio-next,
  .swiper-mio-prev,
  .swiper-cursos-next,
  .swiper-cursos-prev {
    display: none;
  }
}

/* --------------------------------------------------------------------------
 * ESQUINAS DE TARJETA — retirado a proposito
 *
 * Aqui habia una regla que ponia el radio de tarjeta a .swiper-slide,
 * .borde_caja y .mini_relacionados de una vez. Era demasiado ancha: la clase
 * .swiper-slide es del carrusel de Swiper y la usa medio sitio, incluida la
 * landing de formaciones, que tenia su propio radio y lo perdio sin que nadie
 * lo pidiera.
 *
 * El radio se pone ahora donde corresponde a cada componente:
 *   · tarjetas de area  -> css/templates/areas.css, sobre la IMAGEN
 *   · cursos relacionados de una ficha -> style.css, sobre .relacionado
 *   · botones y paneles -> mas abajo en esta hoja
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * ESQUINAS DE LOS BOTONES QUE AÚN NO SON EL BOTÓN
 *
 * Estos siguen con su color y su tamaño propios —unos son de un área, otros de
 * una landing—, así que todavía no se enganchan al componente de arriba. Pero
 * la esquina sí puede ser ya la misma en todos: es lo que más se nota cuando
 * conviven en la misma página.
 * -------------------------------------------------------------------------- */
.boton_acuerdo,
.CEI-boton,
a.enlace_wanderlust,
a.enlace_despliega_rojo,
a.enlace_alumnos,
.boton_embajadores a,
.botones_paginas_blancas > a,
.Festival .Festival-btn,
.Programa .Festival-btn,
.Design .Festival-btn {
  border-radius: var(--Global-Radio-Pastilla);
}

/* --------------------------------------------------------------------------
 * EL FLOTANTE DE WHATSAPP Y LA BARRA FIJA DE UNA FICHA
 *
 * En una ficha de curso los dos viven en la misma esquina, y el flotante caia
 * justo encima del boton «Solicita más información»: medido en 390x844, 60px
 * de solape horizontal y 37 de vertical, y con z-index 9999999, o sea que
 * ganaba siempre.
 *
 * Bajar el flotante NO lo resuelve por si solo, y conviene decirlo porque es
 * lo primero que uno intenta: de la base del boton al borde de la ventana solo
 * quedan 15px, asi que por abajo no hay sitio donde apartarlo. Lo que separa
 * de verdad es el eje horizontal: la barra deja libre la esquina y el flotante
 * cabe al lado.
 *
 * Las tres piezas, y las tres hacen falta:
 *   · el flotante pasa de 60 a 44, que es el minimo comodo para un objetivo
 *     tactil;
 *   · baja 16px dentro de su caja, hasta quedar a 8px del borde;
 *   · la barra reserva 72px a su derecha, con lo que su boton termina en 318 y
 *     el flotante empieza en 326.
 *
 * Nada de :has(), y no es un detalle: `:has()` no existe antes de iOS 15.4, y
 * ante un selector que no entiende, el navegador descarta la regla ENTERA. O
 * sea que justo en los telefonos donde mas molesta el solape, el arreglo no
 * llegaba. La barra fija solo existe en las fichas, asi que su regla ya esta
 * acotada sola; y el flotante a 44px en movil no estorba en ninguna pagina.
 * -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
 * LA TARJETA DE CURSO EN EL MOVIL: SOLO LO QUE SE DECIDE DE UN VISTAZO
 *
 * La tarjeta de los carruseles de area lleva titulo, modalidad, hasta tres
 * lineas de certificaciones y titulaciones, duracion y asistencia. En una
 * pantalla de telefono eso son seis lineas de texto en mayusculas alrededor del
 * nombre, y el nombre —que es lo unico que se busca al pasar tarjetas— deja de
 * destacar (Eduardo, 09/09/2026).
 *
 * Se quedan el titulo, la duracion y el horario. Las certificaciones y el
 * «Presencial / Online» no se pierden: estan en la ficha, a un toque.
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .meta_relacionados .certificacion,
  .meta_relacionados .asistencia_modalidad {
    display: none;
  }
}

/* --------------------------------------------------------------------------
 * EL FLOTANTE DE COOKIES, FUERA (Eduardo, 10/09/2026).
 *
 * Era un boton redondo fijo en la esquina de abajo a la izquierda, en TODAS
 * las paginas, para algo que se usa una vez: cambiar el consentimiento. Encima
 * competia con la burbuja de WhatsApp y habia que ir subiendolo cada vez que
 * una plantilla estrenaba barra fija —hay dos reglas para eso, en curso.css y
 * en open-day.css, que quedan inertes pero se dejan por si vuelve—.
 *
 * Su sitio esta en el pie, junto a los otros enlaces legales:
 * cei-footer-admin.php pinta ahi un boton con la clase `cky-banner-element`,
 * que es el gancho documentado de CookieYes y abre el mismo panel.
 *
 * El !important es inevitable: CookieYes clava el suyo desde la hoja que
 * inyecta su script.
 * -------------------------------------------------------------------------- */
.cky-btn-revisit-wrapper {
  display: none !important;
}

/*
 * Y en el pie, con el mismo aspecto que sus vecinos: es un <button> porque
 * abre un panel y no lleva a ninguna parte, pero se lee como un enlace mas.
 *
 * Sin `font: inherit` a proposito. Ese atajo tambien fija el TAMAÑO, y lo
 * heredaria del contenedor —19px— en vez de dejar que se lo de
 * «.PieNavegacion-legalEnlaces .PieNavegacion-enlace», que es Size-14 como
 * sus vecinos. Se hereda solo la familia y el grosor, que es lo que el
 * navegador le cambia a un <button> (Eduardo, 10/09/2026).
 */
.PieNavegacion-enlace.cky-banner-element {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  /*
   * El flotante, al borde de la ventana y a su tamaño de movil.
   *
   * EL PLUGIN CAMBIO. Antes era QLWAPP y estas reglas peleaban contra su
   * contenedor de 108px a base de !important. Ahora es el propio de CEI
   * —`cei-whatsapp-chat`, clases `.ceiwa`—, que se ancla el solo con
   * `position: fixed; right: 20px; bottom: 20px` y sin !important, y que
   * ademas expone su tamaño en una variable. Asi que aqui basta con doblar la
   * clase para ganarle y decirle los dos numeros del sistema (Eduardo,
   * 09/09/2026). Las reglas viejas apuntaban a un plugin que ya no existe: no
   * hacian nada, y por eso la burbuja volvia a caer encima de la barra.
   */
  .ceiwa.ceiwa--bottom-right {
    right: var(--Global-Flotante-margen);
    /*
     * El env() no es adorno: en un iPhone sin boton de inicio, la franja del
     * gesto ocupa unos 34px en la parte de abajo. Anclado solo a 20px, el
     * flotante cae DENTRO de esa franja, donde el sistema se queda con el
     * gesto y pulsarlo cuesta. En un telefono sin franja el valor es 0 y no
     * cambia nada.
     */
    bottom: calc(var(--Global-Flotante-margen) + env(safe-area-inset-bottom, 0px));
    --ceiwa-icon-size: var(--Global-Flotante);
  }

  /*
   * Y la barra le reserva su hueco. La reserva no es un numero suelto: es el
   * ancho del flotante mas su margen y su hueco, asi que cambiar el tamaño del
   * boton reajusta la barra sola.
   *
   * `div.boton_fijo.boton_fijo` no es tartamudeo: el rival es `div.boton_fijo`
   * (0,1,1) y una sola clase pierde. Con la clase repetida sube a (0,2,1) y
   * pasa por delante tambien del `@media (max-width: 420px)` que le cambia el
   * relleno.
   */
  div.boton_fijo.boton_fijo {
    padding-right: calc(
      var(--Global-Flotante-margen) + var(--Global-Flotante) + var(--Global-Flotante-hueco)
    );
    /* Y la barra por encima de la franja del gesto, por lo mismo. */
    padding-bottom: calc(var(--Global-Flotante-margen) + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
 * BOTONES DE LA TIENDA
 *
 * Llevaban `border-radius: 0 !important` de cuando la tienda era una isla
 * dentro del sitio. Pasan a la pastilla del resto de la web.
 *
 * El !important es inevitable: los rivales lo llevan y viven en style.css, que
 * es nuestro pero son reglas heredadas que todavía no se han migrado. Cuando
 * se migren, se quita aquí y allí a la vez.
 *
 * Solo botones. Los otros siete `border-radius: 0` de la tienda se quedan: son
 * un interruptor, dos contenedores, un aviso, una tabla de variaciones, un
 * checkbox y un desplegable de select2, y ninguno se lee como un botón.
 * -------------------------------------------------------------------------- */
.woocommerce div.product form.cart .button,
.woocommerce table.shop_table td.actions .coupon > button.button,
.thankyou-files input#file-upload-button,
.woocommerce .thankyou-submit input.button {
  border-radius: var(--Global-Radio-Pastilla) !important;
}

/*
 * «Continuar proceso», el boton del carrito (Eduardo, 07/09/2026): el mismo
 * boton que el resto de la web —pastilla, Size-19 con su tracking, 12px 24px—
 * relleno de negro como el Matriculate de una ficha, y al pasar el raton se
 * vacia. Los !important son por WooCommerce (.woocommerce-cart
 * .wc-proceed-to-checkout a.checkout-button trae display: block, font-size
 * 1.25em y padding 1em) y por las reglas heredadas de la tienda en style.css,
 * que tambien los llevan. Sus reglas antiguas (fondo negro, 16px, sin radio)
 * se han quitado de style.css.
 */
/*
 * El contenedor del boton NO se pinta. style.css le da fondo negro con
 * !important («.carrito .woocommerce .wc-proceed-to-checkout»), y como el boton
 * va justo encima y mide lo mismo, lo que se veia era una barra negra cuadrada
 * y la pastilla desaparecia dentro (Eduardo, 08/09/2026). Se le gana con el
 * mismo peso y con el atajo, que es lo que usa la regla vieja.
 */
body.carrito .woocommerce .wc-proceed-to-checkout,
body.carrito .woocommerce .wc-proceed-to-checkout:hover,
.wc-proceed-to-checkout,
.wc-proceed-to-checkout:hover {
  /* Con !important tambien en el borde: la tienda pintaba uno en el hover y
     salia un rectangulo con esquinas vivas rodeando la pastilla. */
  border: 0 !important;
  background: transparent !important;
}

/*
 * El «.carrito .woocommerce a.button:not(.default)» de style.css deja este
 * boton transparente con un !important y mas especificidad que la regla de
 * abajo, asi que el texto blanco se perdia sobre el fondo de la pagina
 * (Eduardo, 08/09/2026). Se le gana con el mismo peso: body.carrito delante.
 */
body.carrito .woocommerce .wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout > a {
  --Global-Boton-relleno: 12px 24px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: var(--Global-Boton-relleno) !important;
  border: 1px solid var(--Global-Color-Black) !important;
  border-radius: var(--Global-Radio-Pastilla) !important;
  /* El atajo y no `background-color`: la regla que hay que ganar en style.css
     («.carrito .woocommerce a.button:not(.default)») usa el atajo con
     !important, y un atajo tapa al longhand aunque este pese mas. */
  background: var(--Global-Color-Black) !important;
  color: var(--Global-Color-White) !important;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19) !important;
  font-weight: var(--Font-Weight-400) !important;
  line-height: normal !important;
  letter-spacing: var(--Font-Letter-spacing-0);
  text-decoration: none;
  text-transform: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.carrito .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.carrito .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible,
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout > a:hover {
  /* Atajo, como en la regla base: al longhand le gana el `background` con
     !important que trae style.css. */
  background: transparent !important;
  color: var(--Global-Color-Black) !important;
}

/* --------------------------------------------------------------------------
 * FICHA DE MATRÍCULA (paso 1): un solo cuerpo de texto y un solo botón
 *
 * En /matriculaciones/<curso>/ convivían tres tamaños y tres pesos (Eduardo,
 * 02/10/2026): las etiquetas de los desplegables a 18 en 600, «Reserva de
 * plaza…» y los desplegables a 18 en 500, el mensaje de la opción elegida a 16
 * en 500, y «Continuar el proceso» a 16 en 500 sin tracking, mientras que las
 * dos pastillas de reserva ya iban con los tokens (Size-19, 400, −2 %). Aquí
 * todo pasa al cuerpo del sistema, el mismo que los formularios de
 * css/bloques/formulario.css: Size-19 en Regular, y el botón con la pastilla
 * de .Global-boton (borde de 1px, 12×24, Size-19, −2 %), relleno de negro y
 * que se vacía al pasar el ratón, como el «Continuar proceso» del carrito.
 *
 * Con la misma letra y el mismo relleno, el botón y las dos pastillas miden lo
 * mismo de alto.
 *
 * Los !important son por las reglas heredadas de style.css: el botón lleva
 * «padding: 12px 0 !important», «background / color !important» y, por debajo
 * de 1070 y de 769, «font-size: var(--font-16) !important» con
 * «line-height: 21px !important» para él, el mensaje y las pastillas. Cuando se
 * migre ese bloque, se quitan aquí y allí a la vez.
 * -------------------------------------------------------------------------- */

/* Etiquetas de los desplegables, «Reserva de plaza…», el mensaje de la opción
   elegida y el texto de los propios desplegables. */
.product-template-default.woocommerce div.product form.cart .variations label,
.product-template-default.woocommerce div.product form.cart .variations select,
.product-template-default .wc-deposits-options-form .deposit-option,
.product-template-default .wc-deposits-options-form .deposit-message {
  font-family: var(--Font-Family-Primary) !important;
  font-size: var(--Font-Size-19) !important;
  font-weight: var(--Font-Weight-400) !important;
  line-height: normal !important;
  letter-spacing: var(--Font-Letter-spacing-0) !important;
}

/* Las dos pastillas de la reserva (su forma está en style.css): el tamaño
   fijo, para que las reglas de movil de style.css no las bajen a 16. */
.product-template-default .wc-deposits-options-form input.input-radio:enabled ~ label {
  font-size: var(--Font-Size-19) !important;
  line-height: normal !important;
}

/* «Continuar el proceso». */
.product-template-default.woocommerce div.product form.cart .single_add_to_cart_button {
  --Global-Boton-relleno: 12px 24px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--Global-Boton-relleno) !important;
  border: 1px solid var(--Global-Color-Black) !important;
  border-radius: var(--Global-Radio-Pastilla) !important;
  background: var(--Global-Color-Black) !important;
  color: var(--Global-Color-White) !important;
  font-family: var(--Font-Family-Primary) !important;
  font-size: var(--Font-Size-19) !important;
  font-weight: var(--Font-Weight-400) !important;
  line-height: normal !important;
  letter-spacing: var(--Font-Letter-spacing-2) !important;
  text-transform: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-template-default.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.product-template-default.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
  background: transparent !important;
  color: var(--Global-Color-Black) !important;
}

/* Apagado (falta elegir una opción): WooCommerce le pone opacity .5; se deja. */

/*
 * El mismo carril que el carrito y el checkout (Eduardo, 02/10/2026). En los
 * pasos 2 y 3 el contenido va en la columna de Betheme (.section_wrapper, 1420
 * de tope, centrada) con los 20px de .the_content_wrapper: 1380 de contenido.
 * La ficha no: #Wrapper.shop_mio quita ese tope con un !important y el titulo
 * (.productos_mios) y el formulario (#Content .content_wrapper) iban de borde a
 * borde, a 1550 en una pantalla de 1600. Aqui se les da la misma columna. Son
 * dos cajas distintas porque la ficha pinta el titulo fuera de #Content.
 */
.product-template-default #Wrapper.shop_mio {
  --Ficha-carril: 1420px; /* el ancho de sitio de Betheme, el de .section_wrapper */
  --Ficha-margen: var(--Global-Margen-Pagina, 20px);
}

.product-template-default #Wrapper.shop_mio div.productos_mios {
  box-sizing: border-box;
  max-width: var(--Ficha-carril);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--Ficha-margen) !important; /* style.css: `padding: 0px 20px !important` */
  padding-right: var(--Ficha-margen) !important;
}

/* #Content ya lleva los 20px de margen a cada lado: la caja de dentro mide el
   carril menos esos dos margenes, y queda alineada con el titulo. */
.product-template-default #Wrapper.shop_mio #Content .content_wrapper {
  max-width: calc(var(--Ficha-carril) - 2 * var(--Ficha-margen));
  margin-left: auto;
  margin-right: auto;
}

/*
 * Foto de profesor. Lleva el radio de panel, no el de tarjeta: la imagen es
 * aquí la superficie entera, no algo dentro de una.
 */
.profe img {
  border-radius: var(--Global-Radio-Panel);
}

/* --------------------------------------------------------------------------
 * APARICIÓN AL DESPLAZARSE
 *
 * Animación ligada al scroll, sin JavaScript: `animation-timeline: view()`
 * avanza la animación según lo que el elemento lleva recorrido de pantalla.
 *
 * Va dentro de dos guardas. `@supports` porque los navegadores que no lo
 * entienden se quedan con el contenido visible y quieto, que es la
 * degradación correcta. Y `prefers-reduced-motion` porque a quien ha pedido
 * menos movimiento no se le impone este.
 *
 * Con línea de tiempo de scroll la duración no cuenta: lo que alarga el efecto
 * es el recorrido que se declara en `animation-range`.
 *
 * Esta es la misma animación que ya usaba la landing de admisiones por su
 * cuenta; aquí queda disponible para el resto del sitio.
 * -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
     * Los dos valores de salida se leen de una variable, con el valor de
     * siempre por defecto. Asi la misma animacion sirve para un bloque grande
     * de ficha —que entra desde mas abajo y desde invisible— y para las
     * tarjetas de un carrusel, que solo necesitan un apunte.
     */
    @keyframes ceiAparece {
      from {
        opacity: var(--ceiAparece-opacidad, 0);
        transform: translateY(var(--ceiAparece-desplazamiento, 32px));
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /*
     * Bloques de una ficha de curso. Es lo unico que queda de este revelado:
     * la home, las areas y las paginas de texto se quedaron sin el el
     * 10/09/2026.
     *
     * El mosaico de la home no estuvo nunca aqui, y por un motivo que conviene
     * recordar: esta SOBRE EL PLIEGUE. Una linea de tiempo `view()` mide lo que
     * el elemento lleva recorrido de pantalla, asi que algo que ya se ve al
     * cargar arranca a media animacion y no la termina hasta que haces scroll.
     * Medido con la pagina arriba: la pieza «Nueva» se quedaba en opacity 0,60
     * y 12,7px por debajo de su sitio.
     */
    .curso_desk .cada_curso,
    .curso_desk .centro_colaborador,
    .curso_desk .sistema_evaluacion,
    .curso_desk .instalaciones,
    .curso_desk .universidad,
    .curso_desk .precio,
    .curso_desk .salidas,
    .curso_desk .programa {
      animation: ceiAparece 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /*
     * Titulos de los carruseles, solo en escritorio.
     *
     * El corte es el mismo 1200 que separa escritorio de tableta en los
     * tokens: por debajo el contenido llega antes de que de tiempo a apreciar
     * la transicion, y ahi molesta mas que suma.
     *
     * Las TARJETAS ya no estan aqui (Eduardo, 07/09/2026): las revela un
     * IntersectionObserver en js/mi_js.js (revelaTarjetas), porque viven dentro
     * de .swipper-hidden —la caja que recorta el carrusel con overflow: hidden—
     * y para el navegador eso es un contenedor de scroll: `view()` se medía
     * contra ella y las tarjetas visibles nacian con la animacion terminada.
     */
    /*
     * FUERA LA ENTRADA DE LA HOME Y DE LAS AREAS (Eduardo, 10/09/2026).
     *
     * Aqui vivia el revelado de «.contenido_home .mas_cursos» y de
     * «.contenido_area h2.tipo_curso» —los titulos de los carruseles, por
     * encima de 1200—. Se quita: en esas dos paginas no se quiere movimiento
     * de entrada. Las tarjetas de esos mismos carruseles ya estaban fuera,
     * porque su revelaTarjetas() esta apagado en js/mi_js.js.
     *
     * Lo de arriba —los bloques de la ficha de curso— se queda.
     */
  }
}

/* --------------------------------------------------------------------------
 * REVELADO DE LAS TARJETAS DE LOS CARRUSELES — js/mi_js.js, revelaTarjetas()
 *
 * Con IntersectionObserver: ver el porque en el comentario del script. Aqui lo
 * importante es de quien depende el estado inicial. La clase .cei-revela la
 * pone el JS en el carrusel, asi que sin JavaScript —o si el script no llega—
 * no hay estado inicial que deshacer y las tarjetas se ven quietas. Es la
 * unica forma de que un revelado por script no pueda esconder contenido.
 *
 * El escalonado va en la transicion y no en temporizadores: cada tarjeta lleva
 * su orden en --cei-revela-orden y de ahi sale su retardo.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /*
   * El estado inicial va SIN transicion y la transicion se declara en el
   * estado final. Al contrario, el momento en que el script arma el carrusel
   * seria tambien una transicion —de visible a atenuado— y se veria bajar la
   * tarjeta antes de entrar.
   */
  /*
   * El salto, mas marcado (Eduardo, 09/09/2026): de 0.45 a 0.15 de opacidad y
   * de 14 a 28px de recorrido. Con los valores de antes la entrada se
   * intuia mas que se veia, sobre todo en una pantalla grande, donde el
   * carrusel entero cabe de una vez y las tarjetas apenas se movian.
   */
  .cei-revela .swiper-slide {
    opacity: 0.15;
    transform: translateY(28px);
  }

  .cei-revela.cei-revela--visible .swiper-slide {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s ease-out calc(var(--cei-revela-orden, 0) * 0.11s),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--cei-revela-orden, 0) * 0.11s);
  }
}

/* --------------------------------------------------------------------------
 * BLOQUES COMPARTIDOS (inc/cei-bloques.php)
 *
 * Cada bloque tiene su hoja en css/bloques/ (fundae, precio, empleo, noticias)
 * desde el 07/09/2026: la carga functions.php en las plantillas que lo pintan
 * y el propio bloque al pintarse. Aqui solo queda lo que comparten todos.
 * -------------------------------------------------------------------------- */

/*
 * AQUI ESTABA LA NOTA DE LAS BECAS, flotada al otro extremo. Se fue con ella el
 * 15/09/2026; sus reglas (.Carrito-nota) tambien, que no las usaba nadie mas.
 *
 * La celda del cupon la maqueta WooCommerce con flotantes —el bloque a la
 * izquierda— y sigue siendo una celda de tabla: ponerla en flex la saca del
 * reparto de la tabla y se encoge, de ahi el overflow. «Actualizar selección»
 * tampoco esta: la plantilla lo quito porque cada estudio va de uno en uno.
 */
.woocommerce td.actions {
  overflow: hidden;
}

.woocommerce .coupon {
  align-items: center;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
}

/**
 * ESTUDIOS SELECCIONADOS, VACIO (woocommerce/cart/cart-empty.php)
 *
 * La pantalla decia «Estudios Seleccionados. está vacío.» y ofrecia un enlace
 * pequeño a la tienda. Ahora explica que pasara cuando elijas algo y ofrece
 * dos salidas —pedir informacion o mirar las areas—, con el bloque de tarjetas
 * de area debajo (Eduardo, 08/09/2026).
 *
 * La pagina 404 (404.php) es esta misma pantalla con otro texto (Eduardo,
 * 28/09/2026): lleva las dos clases, .CarritoVacio y .NoEncontrada, y solo se
 * distingue en que su titulo es un <h1> con el tamaño del h2 del sistema. La
 * regla del titulo lleva #Content delante para ganar a los «#Content h1» de
 * style.css.
 */
.CarritoVacio {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  max-width: 70ch;
  margin: var(--Global-Espacio-Grupo) 0;
}

.CarritoVacio .Global-h2,
.CarritoVacio .Global-p,
.CarritoVacio .CarritoVacio-titulo {
  margin: 0;
}

#Content .NoEncontrada h1.Global-h2 {
  margin: 0;
  font-size: var(--Font-Size-45);
  font-weight: var(--Font-Weight-h2-temporal);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/*
 * La 404, a todo el ancho, como la Home v2 (Eduardo, 28/09/2026). Betheme
 * encierra el contenido de una pagina en una columna de 1420px centrada
 * (.section_wrapper) y, en el movil, le pone 33px de relleno con !important a
 * cada lado, mas los 20px de .the_content_wrapper: 53px de carril y las
 * tarjetas de area apretadas. Aqui se queda con el carril de la web
 * (--Global-Margen-Pagina, el de la barra de navegacion y la Home v2) y sin
 * los 90px que Betheme pone encima de .section_wrapper: el titulo quedaba a
 * 170px del borde de #Content.
 */
#Content:has(.NoEncontrada) .section_wrapper {
  max-width: none;
  margin-top: 0;
  padding: 0 !important; /* Betheme, en el movil: `padding: 0 33px !important` */
}

#Content:has(.NoEncontrada) .the_content_wrapper {
  padding: var(--Global-Espacio-Grupo) var(--Global-Margen-Pagina, 20px) 0;
}

.CarritoVacio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
}

.CarritoVacio-titulo {
  margin-top: var(--Global-Espacio-Grupo) !important;
}

/* Las tarjetas de area salen del ancho de lectura del texto. Y sin el margen
   izquierdo de 30px que Betheme da a todo <ul> de .the_content_wrapper: las
   tarjetas salian desplazadas respecto al titulo, en el carrito y en la 404
   (Eduardo, 28/09/2026). */
.CarritoVacio .AreasTarjetas {
  width: 100%;
  max-width: none;
  margin: 0;
}

.CarritoVacio:has(.AreasTarjetas) {
  max-width: none;
}

.CarritoVacio > .Global-h2,
.CarritoVacio > .Global-p {
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
 * POPUP DE BREVO (el «Open Day»)
 *
 * Brevo pinta sus popups desde su SDK en nuestra pagina: un contenedor fijo a
 * pantalla completa (#wpiam-message; «wpiam» es el modulo de mensajes de
 * WonderPush, que es de Brevo) con un iframe de sibforms.com dentro. El gris,
 * la lamina blanca y el formulario van dentro del iframe, que es de otro
 * origen: ahi este CSS no entra. La hoja de dentro es css/brevo-popup.css, que
 * o se pega en el editor del formulario en Brevo o la mete el tema por el
 * proxy de functions.php (ver js/cei-popup-brevo.js).
 *
 * Lo que si es nuestro es lo que queda detras: un velo blanco sobre la pagina,
 * para que el popup se lea siempre sobre una nube clara.
 *
 * EL DESENFOQUE VA EN UN ::before Y NO EN EL CONTENEDOR (Eduardo, 14/09/2026).
 *
 * Un elemento con backdrop-filter se convierte en «raiz de fondo» para todo lo
 * que lleva dentro: si desenfocara el contenedor, la lamina del formulario
 * —que va dentro del iframe, y por tanto dentro de el— dejaria de alcanzar a
 * ver la pagina y su cristal no pintaria nada. Probado: con el desenfoque en el
 * contenedor, quitarle el filtro a la lamina no cambiaba un pixel.
 *
 * Un pseudoelemento, en cambio, es hermano del iframe y no antepasado suyo: no
 * le cambia la raiz de fondo. Asi conviven las dos cosas, la pagina de detras
 * un poco desenfocada y la lamina haciendo de cristal por su cuenta. Los 3px
 * son a proposito: con mas, la lamina refractaria una nube lisa.
 * -------------------------------------------------------------------------- */
#wpiam-message.wpiam-fullscreen-container {
  background-color: rgba(255, 255, 255, 0.3);
}

#wpiam-message.wpiam-fullscreen-container::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* El popup, por encima del desenfoque: el pseudoelemento va posicionado y sin
   esto le ganaria al iframe, que no lo esta. */
#wpiam-message.wpiam-fullscreen-container > iframe {
  position: relative;
}

/* A quien pide menos transparencia, un velo opaco y sin cristal. */
@media (prefers-reduced-transparency: reduce) {
  #wpiam-message.wpiam-fullscreen-container {
    background-color: rgba(255, 255, 255, 0.92);
  }

  #wpiam-message.wpiam-fullscreen-container::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}