/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.3
Description: Corporación Futura. Solo lo que ningún widget de Elementor da:
animaciones, decoración posicionada y los degradados de marca. El contenido
y la estructura siguen siendo nativos y editables desde el editor.
*/

/* ── Tokens ───────────────────────────────────────────────────
   Duplican los Global Colors de Elementor para poder usarlos en las
   reglas de abajo. El cliente cambia el color en Site Settings; aquí
   solo viven los degradados, que Elementor no sabe guardar como token. */
:root {
  --cf-primario:     #241245;
  --cf-acento:       #7a2be0;
  --cf-texto:        #4b4560;
  --cf-borde:        #2412451f;
  --cf-editorial:    #c026a5;
  --cf-biglietti:    #0ea5e9;
  --cf-diversamente: #f97316;
  --cf-ecosistema:   #16a34a;
  --cf-amarillo:     #ffd60a;
  --cf-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m9 18 6-6-6-6'/%3e%3c/svg%3e");
  --cf-gradiente: linear-gradient(90deg, #ff2d55 0%, #ff9500 18%, #ffd60a 36%, #34c759 54%, #00b4d8 70%, #7a2be0 86%, #ff2d55 100%);
  --cf-gradiente-suave: linear-gradient(135deg, #7a2be0 0%, #c026a5 50%, #ff6a3d 100%);
}

/* ── Acento tipográfico ───────────────────────────────────────
   El <span> dentro de los títulos: Playfair Display en cursiva. */
.cf-acento {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--cf-acento);
  letter-spacing: -0.04em;
}

/* ── Barra arcoíris del footer ────────────────────────────────
   Decoración pura: un degradado animado de 4px. */
.cf-rainbow-bar {
  background: var(--cf-gradiente) !important;
  background-size: 200% 100% !important;
  animation: cf-arcoiris 8s linear infinite;
}
@keyframes cf-arcoiris { to { background-position: 200% 0; } }

/* ── Marquesina ───────────────────────────────────────────────
   El bucle infinito: los grupos van duplicados en el DOM, así que
   desplazar el 50% deja la cinta en el mismo sitio visualmente.
   Se pausa al pasar el ratón, como el React. */
.cf-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
}
.cf-marquee .cf-marquee__track {
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: cf-cinta 52s linear infinite;
}
.cf-marquee:hover .cf-marquee__track { animation-play-state: paused; }
@keyframes cf-cinta { to { transform: translateX(-50%); } }
.cf-marquee .cf-marquee__group { flex-wrap: nowrap !important; width: max-content !important; }

/* Las píldoras de la marquesina */
.cf-pill {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--cf-borde);
  background: #fff;
  border-radius: 60px;
  padding: 11px 20px;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.cf-pill p { margin: 0; white-space: nowrap; }
.cf-pill a { color: inherit; text-decoration: none; }
.cf-pill:hover { background: var(--cf-primario); border-color: var(--cf-primario); transform: translateY(-3px); }
.cf-pill:hover, .cf-pill:hover a, .cf-pill:hover .elementor-icon-box-title a { color: #fff !important; }
.cf-pill--brand { padding: 8px 22px 8px 8px; }
.cf-pill--brand .elementor-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: currentColor;
}
.cf-pill--brand .elementor-icon svg { color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────
   Los dos elementos flotantes van posicionados sobre la imagen. Se
   revisan en los tres tamaños porque son justo lo que el contenedor
   recorta cuando la columna se estrecha. */
/* Posiciones tomadas del React a 1440 (.hero1__bg-shape,
   .hero1__floating--flask y .hero1__floating--rating):

     thumb   528x409    el marco de la columna
     bloque  528x302    el 74% inferior, pegado abajo
     foto    498x409    15px de aire a cada lado, por encima
     flask    63x63     colgando por la DERECHA (-32px)
     rating  362x54     colgando por la IZQUIERDA (-94px)

   Aqui solo va el posicionado. Los colores del bloque y de los dos
   flotantes estan en sus controles de Elementor. */
.cf-hero-thumb { position: relative; }
.cf-hero-shape {
  position: absolute !important;
  left: 0; bottom: 0; width: 100%; height: 74%;
  z-index: 0; pointer-events: none;
}
.cf-hero-thumb > .elementor-widget-image { position: relative; z-index: 2; }
.cf-hero-flotante { position: absolute !important; z-index: 3; }
/* line-height 0: el icono es inline-block y el hueco del renglon
   metia 6px de mas bajo la caja de color, que es lo que se ve. */
.cf-hero-flotante--1 { bottom: 20%; right: -32px; line-height: 0; }
.cf-hero-flotante--2 { bottom: 70px; left: -94px; }
/* El rating se mide por su contenido, no por la rejilla del padre */
.cf-hero-flotante--2 { width: auto !important; }
.cf-hero-rating__avatar img { height: 44px; object-fit: cover; }
/* La frase del React va en una linea: es lo que fija el ancho de la
   tarjeta (362px). Sin esto se parte y la tarjeta encoge. */
.cf-hero-rating__nota p,
.cf-hero-rating__texto p { white-space: nowrap; }
@media (max-width: 1199px) {
  .cf-hero-flotante--1 { right: -16px; }
  .cf-hero-flotante--2 { left: -20px; }
}
@media (max-width: 767px) {
  .cf-hero-flotante--1 { width: 50px; height: 50px; right: 4px; }
  .cf-hero-flotante--2 { bottom: 10px; left: 10px; max-width: calc(100% - 20px); }
  .cf-hero-rating__texto p { white-space: normal; }
}

/* ── Contadores del hero ──────────────────────────────────────
   .hero1__stat del React: 4px entre el número y su etiqueta, y la
   etiqueta a 13px con interlineado corto. Con el interlineado del
   cuerpo (1.65) se partia en dos lineas muy separadas. */
.cf-hero-stats .elementor-counter-title {
  margin-top: 4px;
  line-height: 1.35;
}
.cf-hero-stats .elementor-counter-number-wrapper { line-height: 1; }

/* Avatares solapados de la píldora del hero. El tamaño, el borde y el
   redondeo estan en el panel de cada imagen; aqui solo el solape de -6px
   y el recorte, que ningun control da. */
.cf-avatares { flex-wrap: nowrap !important; }
.cf-avatares .elementor-widget-image:not(:first-child) { margin-left: -6px; }
.cf-avatares img { display: block; height: 24px; object-fit: cover; }

/* El sufijo (+) del contador, en el color de acento del React. */
.cf-hero-stats .elementor-counter-number-suffix,
.cf-about-stats .elementor-counter-number-suffix { color: var(--cf-acento); }
@media (max-width: 575px) {
  .cf-hero-stats .elementor-widget-counter:nth-child(odd) {
    border-left: 0 !important; padding-left: 0 !important;
  }
}

/* ── Tarjetas de marca ────────────────────────────────────────
   La franja de color va pegada al borde izquierdo, de arriba abajo: su
   ancho y su color estan en el panel, aqui solo el estirado. El logo se
   limita a 96 de alto para que las cuatro cajas midan igual pese a que
   los logos tienen proporciones distintas. */
.cf-marca { position: relative; }
.cf-marca-barra { position: absolute !important; left: 0; top: 0; height: 100%; }
.cf-marca-logo img { max-height: 96px; width: auto; }
.cf-marca-desc { flex: 1; }

/* ── Tarjeta de programa ──────────────────────────────────────
   El tamano, el color, el borde y el redondeo estan en el panel de cada
   pieza. Aqui solo queda lo que ningun control hace: el recorte de la
   foto, el zoom al pasar el raton, la etiqueta puesta ENCIMA de la foto
   y las dos variaciones que dependen del producto. */
.cf-tarjeta-thumb { position: relative; }
.cf-tarjeta-thumb img { width: 100%; aspect-ratio: 604 / 440; object-fit: cover; transition: transform .6s; }
.cf-tarjeta-programa:hover .cf-tarjeta-thumb img { transform: scale(1.06); }

/* Arriba a la derecha, como .courses1__offer1 */
.cf-badge-categoria { position: absolute !important; top: 16px; right: 16px; z-index: 2; }
.cf-badge-categoria p { margin: 0; }

/* El diplomado lleva el morado de acento; los cursos, el verde que
   tienen en su panel. Elementor no puede dar un color distinto segun el
   producto, asi que el cambio se hace por la clase que WordPress pone en
   cada item del bucle. */
.product_cat-diplomado .cf-badge-categoria .elementor-widget-container {
  background-color: var(--cf-acento) !important;
}

/* Misma razon para el icono de las sesiones: calendario en el diplomado,
   dos personas en los cursos. */
.cf-ses--diplomado { display: none; }
.product_cat-diplomado .cf-ses--diplomado { display: block; }
.product_cat-diplomado .cf-ses--curso { display: none; }

/* El punto que separa "Certificado" de "En vivo" */
.cf-tp-vivo { position: relative; }
.cf-tp-vivo::before {
  content: "·"; position: absolute; left: -9px; top: 50%;
  transform: translateY(-50%); color: var(--cf-texto);
}
.cf-tp-vivo strong { color: var(--cf-acento); font-style: italic; font-weight: 500; }
.cf-tp-vivo p { font-style: italic; }

/* Las filas de datos de la tarjeta miden lo que mide su texto: el
   contenedor del icon-box hereda el interlineado 1,5 del cuerpo y cada
   fila crecia 10px. Con dos filas por tarjeta y once tarjetas, la pagina
   de catalogo salia un 19% mas alta en movil. */
.cf-tarjeta-programa .elementor-icon-box-content { line-height: 1; }
.cf-tp-flecha { line-height: 0; }

/* Descripción recortada a 3 líneas, como el React */
.cf-recorte-3 .elementor-widget-container,
.cf-recorte-3 p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Migas de pan ─────────────────────────────────────────── */
.cf-migas { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.cf-migas a { color: inherit; text-decoration: none; }
.cf-migas a:hover { color: var(--cf-amarillo); }
/* El separador es el chevron del React, no un punto. */
.cf-migas__sep {
  width: 8px; height: 8px; opacity: .62; background: currentColor;
  -webkit-mask: var(--cf-chevron) center / contain no-repeat;
  mask: var(--cf-chevron) center / contain no-repeat;
}
.cf-migas__actual { color: var(--cf-amarillo); }

/* La trama del encabezado, estirada por detras del texto */
.cf-encabezado { position: relative; }
.cf-encabezado__trama {
  position: absolute !important; inset: 0; z-index: 0; pointer-events: none;
}
.cf-encabezado__trama img { width: 100%; height: 100%; object-fit: cover; }
.cf-encabezado > .e-con-inner > *:not(.cf-encabezado__trama) { position: relative; z-index: 1; }

/* ── Listas con icono ─────────────────────────────────────────
   Los campos de beneficios, público y metodología son un editor visual
   con viñetas, para que el cliente los edite como en un Word. El icono
   de check es el SVG real del React, puesto por CSS: es estilo, no
   contenido, así que no rompe la editabilidad. */
.cf-lista-check ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cf-lista-check li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.cf-lista-check li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  background-color: var(--cf-ecosistema);
  -webkit-mask: var(--cf-icono-check) center / contain no-repeat;
          mask: var(--cf-icono-check) center / contain no-repeat;
}
.cf-lista-personas li::before { background-color: var(--cf-acento); -webkit-mask-image: var(--cf-icono-users); mask-image: var(--cf-icono-users); }
.cf-lista-clases li::before   { background-color: var(--cf-acento); -webkit-mask-image: var(--cf-icono-play);  mask-image: var(--cf-icono-play); }

/* ── Números de la lista de razones ─────────────────────────── */
.cf-num { margin: 0; line-height: 1; }
.cf-big { margin: 0; line-height: 1; }

/* ── Precio «Consultar» ───────────────────────────────────────
   Los programas no tienen precio a propósito (ver analisis/NEGOCIO.md).
   Donde WooCommerce pintaría el importe va esta etiqueta. */
.cf-precio-consultar { font-weight: 600; color: var(--cf-primario); }

/* ── Páginas de WooCommerce ───────────────────────────────────
   Carrito, checkout y mi cuenta salen crudas, con la tipografía del
   plugin. Heredan la del sitio y los colores de marca. */
.woocommerce, .woocommerce-page,
.woocommerce input, .woocommerce button, .woocommerce select, .woocommerce textarea {
  font-family: "Mona Sans", system-ui, sans-serif;
}
.woocommerce h1, .woocommerce h2, .woocommerce h3 { color: var(--cf-primario); }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .wc-block-components-button {
  background: var(--cf-acento) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-weight: 600;
  padding: 13px 26px !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .wc-block-components-button:hover {
  background: var(--cf-primario) !important;
  color: #fff !important;
}
.woocommerce-message, .woocommerce-info { border-top-color: var(--cf-acento); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--cf-acento); }
.woocommerce .woocommerce-breadcrumb { display: none; }

/* El contenido de las páginas de plugin necesita el ancho del sitio */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
  max-width: 1320px;
  margin-inline: auto;
  padding: 64px 16px 90px;
}

/* ── Nada de scroll horizontal ────────────────────────────────
   Cinturón, no tirita: la marquesina y los elementos posicionados son
   los sospechosos habituales y cada uno se arregla en su regla. Esto
   solo evita que el body arrastre lo que sobresalga un pelo. */
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ── Movimiento reducido ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cf-rainbow-bar, .cf-marquee .cf-marquee__track { animation: none; }
  .cf-tarjeta-programa:hover .cf-tarjeta-thumb img { transform: none; }
}

/* ── Galería: tarjeta y modal ─────────────────────────────────
   El detalle viaja dentro de cada tarjeta, oculto. El script lo clona
   en la capa al pulsar. Así el contenido sigue siendo editable. */
.cf-galeria__detalle { display: none; }
.cf-galeria__thumb { position: relative; }
.cf-galeria__thumb img { width: 100%; aspect-ratio: 1256 / 680; object-fit: cover; transition: transform .6s; }
.cf-galeria__item:hover .cf-galeria__thumb img { transform: scale(1.05); }
.cf-galeria__tag { position: absolute !important; top: 12px; left: 12px; z-index: 2; }
.cf-galeria__tag p { margin: 0; }
.cf-galeria__mas {
  position: absolute; right: 14px; bottom: 14px;
  background: #241245cc; padding: 6px 12px; border-radius: 50px; line-height: 1;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.cf-galeria__mas p { margin: 0; }
.cf-galeria__item:hover .cf-galeria__mas { opacity: 1; transform: none; }

.cf-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.cf-modal[hidden] { display: none; }
.cf-modal__fondo { position: absolute; inset: 0; background: #241245cc; }
.cf-modal__panel {
  position: relative; background: #fff; border-radius: 16px; overflow: hidden auto;
  max-width: 640px; width: 100%; max-height: 90vh;
  box-shadow: 0 30px 80px #24124540;
}
.cf-modal__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #fff; color: var(--cf-primario); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px #24124526;
}
.cf-modal__img { width: 100%; aspect-ratio: 1256 / 680; object-fit: cover; display: block; }
.cf-modal__detalle { padding: 22px 24px 26px; display: grid; gap: 12px; }
.cf-modal__detalle .cf-badge { background: var(--cf-acento); border-radius: 50px; padding: 5px 10px; line-height: 1; width: max-content; }
.cf-modal__detalle .cf-badge p { margin: 0; }

/* ── Navegador de módulos del diplomado ─────────────────────── */
.cf-progreso { display: grid; gap: 8px; }
.cf-progreso__txt { display: flex; justify-content: space-between; font-weight: 600; }
.cf-progreso__bg { height: 6px; border-radius: 50px; background: var(--cf-borde); overflow: hidden; }
.cf-progreso__fill { height: 100%; background: var(--cf-acento); border-radius: 50px; transition: width .4s ease; }
.cf-modulos .e-n-tabs-heading { flex-wrap: wrap; gap: 8px; }
.cf-modulos__nav .is-off { opacity: .45; pointer-events: none; }
.cf-clases ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cf-clases li { display: flex; gap: 10px; align-items: baseline; line-height: 1.5; }
.cf-clases li b { color: var(--cf-acento); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Módulo del temario en la ficha ─────────────────────────── */
.cf-modulo .cf-lista-clases ul { margin-top: 8px; }

/* ── Catálogo ─────────────────────────────────────────────── */
.cf-filtros { position: sticky; top: 110px; }
@media (max-width: 991px) { .cf-filtros { position: static; } }
.cf-catalogo-vacio { padding: 40px 0; text-align: center; color: var(--cf-texto); }

/* ── Ficha de programa ────────────────────────────────────── */
.cf-precio { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--cf-borde); }
.cf-precio__label { font-size: 13px; color: var(--cf-texto); }
.cf-precio__valor { font-size: 28px; font-weight: 600; color: var(--cf-primario); line-height: 1.1; }
.cf-precio__nota { font-size: 12px; color: var(--cf-texto); }
.cf-migas--izq { justify-content: flex-start; }

/* ── Editorial ────────────────────────────────────────────── */
.cf-editorial__thumb { position: relative; }
.cf-editorial__thumb img { width: 100%; aspect-ratio: 636 / 500; object-fit: cover; }
/* .team1__rating del React: blanco, arriba a la izquierda, esquina 4px */
.cf-editorial__badge {
  position: absolute; top: 15px; left: 15px; z-index: 2;
  background: #fff; padding: 7px; border-radius: 4px; line-height: 1;
  box-shadow: 0 4px 12px #0000001a;
}

/* ── Biglietti ────────────────────────────────────────────── */
.cf-biglietti__thumb { position: relative; }
/* Abajo a la DERECHA, dentro de la foto (.cf-biglietti__float) */
.cf-biglietti__float { position: absolute !important; right: 20px; bottom: 20px; }
@media (max-width: 767px) {
  .cf-biglietti__float { position: static !important; margin-top: 16px; width: 100%; }
}

/* ── Badge de Diversamente ───────────────────────────────── */
.cf-badge-categoria--diversamente { background: var(--cf-diversamente); }
.cf-badge-categoria p { margin: 0; }

/* ── Cabecera que se oculta al bajar ─────────────────────── */
[data-elementor-type="header"] { transition: transform .4s ease; }
[data-elementor-type="header"].cf-oculta { transform: translateY(-110%); }

/* ── Pestañas que no caben ────────────────────────────────────
   Las tres pestañas de «Nosotros» miden más que el viewport en tablet y
   sacaban scroll horizontal a toda la página. Se dejan envolver en vez
   de taparlo con overflow:hidden, que lo esconde y no lo arregla. */
.e-n-tabs-heading { flex-wrap: wrap; }
.e-n-tab-title { max-width: 100%; }
.e-n-tab-title-text { overflow-wrap: anywhere; }

/* ── La marquesina recorta ─────────────────────────────────────
   La cinta mide varias pantallas a propósito. El recorte es su
   mecanismo, no un parche sobre un desbordamiento. */
.cf-marquee { overflow: hidden; }

/* ── Bloques de WooCommerce en móvil ───────────────────────────
   El bloque del carrito sale con la clase `alignwide`, que le da un
   ancho fijo mayor que el contenedor: 530px dentro de 370px en un móvil
   de 390. Y la rejilla de productos añade márgenes negativos encima.
   Se acota al ancho disponible en vez de taparlo con overflow. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.woocommerce-cart .alignwide,
.woocommerce-checkout .alignwide {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.wc-block-grid__products { margin: 0; max-width: 100%; }
.wc-block-grid__product { min-width: 0; }
.wc-block-grid__product-price, .wc-block-grid__product-title { overflow-wrap: anywhere; }
.wc-block-grid__product-add-to-cart .wp-block-button__link { white-space: normal; }
@media (max-width: 575px) {
  .wc-block-grid.has-2-columns .wc-block-grid__product,
  .wc-block-grid.has-3-columns .wc-block-grid__product,
  .wc-block-grid.has-4-columns .wc-block-grid__product { flex: 1 1 100%; max-width: 100%; }
}

/* ── Tarjeta flotante de Biglietti ─────────────────────────────
   Con position absolute y left/right de 20px se salía 8px del marco en
   tablet: el padre no recorta y el ancho del hijo incluía su borde. */
.cf-biglietti__thumb { overflow: visible; max-width: 100%; }
.cf-biglietti__float { box-sizing: border-box; max-width: calc(100% - 40px); }
.cf-biglietti__img { position: relative; }

/* ── Logo del header ──────────────────────────────────────────
   El React fija la ALTURA y deja el ancho automático
   (.header-logo img { height: 34px; width: auto }). El widget Site Logo
   de Elementor no tiene control de tamaño, así que se hace aquí. */
.cf-logo img { height: 34px; width: auto; max-width: none; }
@media (max-width: 767px) { .cf-logo img { height: 30px; } }
@media (max-width: 480px) { .cf-logo img { height: 28px; } }

/* ── Llamada a la acción ──────────────────────────────────────
   El degradado del React tiene tres paradas y el control de Elementor
   solo admite dos, así que va aquí. Y el <span> de acento dentro del
   bloque es AMARILLO, no morado: sobre este fondo el morado no se lee. */
.cf-cta .cf-acento { color: var(--cf-amarillo); }

/* Igual en cualquier otro bloque de fondo oscuro */
[data-elementor-type="footer"] .cf-acento,
.cf-encabezado .cf-acento { color: var(--cf-amarillo); }

/* ── Imagen de Biglietti ──────────────────────────────────────
   El React le fija la proporción (4/4.4). Sin ella la foto sale a su
   alto natural y estira la página. */
.cf-biglietti__img img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
}

/* El título del tema, por si algún contexto lo reinyecta */
.page-header .entry-title { display: none; }

/* ── Tarjeta de programa relacionado ──────────────────────────
   Molde propio del React (.cf-related-card): más corta que la del
   catálogo — imagen 16/9, etiqueta, título y una línea de datos. */
.cf-tarjeta-relacionada { transition: transform .3s, box-shadow .3s; }
.cf-tarjeta-relacionada:hover { transform: translateY(-4px); box-shadow: 0 14px 34px #2412450f; }
.cf-relacionada__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cf-badge--relacionada {
  width: max-content; background: var(--cf-ecosistema);
  padding: 5px 9px; border-radius: 50px; line-height: 1;
}
.cf-badge--relacionada p { margin: 0; }

/* ── Pestañas de la ficha ─────────────────────────────────────
   Texto con subrayado, como el React (.cf-course-tabs), no botones. */
.cf-ficha-tabs .e-n-tabs-heading { border-bottom: 1px solid var(--cf-borde); gap: 6px; }
.cf-ficha-tabs .e-n-tab-title { border-bottom: 2px solid transparent; border-radius: 0; }
.cf-ficha-tabs .e-n-tab-title[aria-selected="true"] { border-bottom-color: var(--cf-acento); }

/* ── Fotos flotantes del CTA ──────────────────────────────────
   .cta1__user--1..4 del React: círculos con borde translúcido,
   colocados sobre el bloque. Por debajo de 992 el bloque se estrecha
   y estorban, igual que en el original. */
.cf-cta { position: relative; }
/* Solo el SITIO de cada foto: el tamano, el borde y el redondeo salen
   del panel de su imagen. Posiciones medidas en el React sobre la caja
   de 1300 de ancho. */
.cf-cta__avatar { position: absolute !important; z-index: 1; }
.cf-cta__avatar img { object-fit: cover; display: block; }
.cf-cta__avatar--1 { top: 78px;  left: 170px; }
.cf-cta__avatar--2 { top: 60px;  left: 317px; }
.cf-cta__avatar--3 { top: 300px; left: 260px; }
.cf-cta__avatar--4 { top: 148px; left: 1080px; }
@media (max-width: 1199px) {
  .cf-cta__avatar--4 { left: auto; right: 60px; }
}
/* El React las esconde a partir de 767, no de 991: en tableta se ven. */
@media (max-width: 767px) { .cf-cta__avatar { display: none; } }

/* ── Barra superior del header ────────────────────────────────
   Los datos de contacto y el bloque de la derecha van a su ancho
   natural; el eslogan ocupa el resto. Con anchos porcentuales fijos el
   teléfono se partía en dos líneas. */
/* Los dos extremos ocupan lo que necesitan y no se encogen; el eslogan
   se queda con el resto. Sin esto el email y el telefono se solapaban y
   el boton «Aula virtual» se partia en dos lineas. */
.cf-header-top__izq,
.cf-header-top__der {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap;
}
.cf-header-top__eslogan { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
.cf-header-top__eslogan p { margin: 0; }
.cf-header-top__der .elementor-button { white-space: nowrap; }

/* ── Foto de «Nosotros» ───────────────────────────────────────
   El React la mantiene en 500px aunque la columna pase a ancho
   completo. Sin el tope crece a 922px de alto en tablet. */
/* Los nombres de las pestanas no se parten: en el React miden lo que
   mide su texto (83 / 116 / 65) y caben justos en la caja. Al dejarlos
   encoger, "Alianzas" salia en dos lineas. */
/* Elementor parte las palabras de las pestanas (overflow-wrap:
   break-word) y "Alianzas" salia con una letra por linea. En el React
   las pestanas se encogen hasta la palabra mas larga y ahi paran. */
.cf-about-tabs .e-n-tab-title { min-width: min-content; position: relative; }

/* El recuadro negro del foco solo para quien navega con el teclado: al
   hacer clic con el raton el navegador lo dejaba puesto encima de la
   pestaña. */
.cf-about-tabs .e-n-tab-title:focus:not(:focus-visible),
.cf-ficha-tabs .e-n-tab-title:focus:not(:focus-visible) { outline: none; }

/* Linea vertical entre pestañas (.about1__tabs-nav .nav-item::before del
   React): el widget no tiene separador entre titulos. */
.cf-about-tabs .e-n-tab-title + .e-n-tab-title::before {
  content: ""; position: absolute; left: -6px; top: 4px; bottom: 4px;
  width: 1px; background: rgba(36, 18, 69, 0.12);
}
.cf-about-tabs .e-n-tab-title-text {
  overflow-wrap: normal;
  word-break: normal;
  /* Cada rotulo en UNA linea, como lo pidio el cliente. */
  white-space: nowrap;
}

/* El control "Number Position" del contador escribe en el front
   text-align:{{VALUE}} sin resolver (Elementor 4.2), asi que el numero
   se alinea aqui. La etiqueta si sale de su control. */
.cf-hero-stats .elementor-counter-number-wrapper,
.cf-about-stats .elementor-counter-number-wrapper {
  /* El numero se centra porque el hueco de delante crece: son las dos
     variables que escribiria el control roto. */
  --counter-prefix-grow: 0;
  --counter-suffix-grow: 1;
  --counter-number-grow: 0;
  justify-content: flex-start;
  text-align: left;
}

/* ── Nosotros ─────────────────────────────────────────────────
   La tarjeta va SOBRE la foto, arriba a la izquierda. Es lo unico de
   esta seccion que no sale de un control: el tamano, el color, el
   redondeo y la sombra estan en su panel. */
.cf-about-thumb { position: relative; }
.cf-about-tarjeta { position: absolute !important; top: 20px; left: 20px; z-index: 2; }
@media (max-width: 991px) {
  .cf-about-tarjeta { left: 10px; top: 10px; max-width: calc(100% - 20px); }
}

/* ── Contenedor de página ─────────────────────────────────────
   El React usa el `.container` de Bootstrap: ancho máximo escalonado
   (540/720/960/1140/1320) y 12px de separación a los lados.

   El ancho máximo se fija en Site Settings, pero esta versión de
   Elementor no expone el padding lateral del contenedor, y sin él el
   contenido llega pegado al borde de la pantalla en móvil y tablet.
   Va aquí, una sola regla para todo el sitio (regla 8.4: el gutter es
   de la página, no de cada sección). */
.elementor .e-con.e-con-boxed > .e-con-inner {
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 576px)  { .elementor .e-con.e-con-boxed > .e-con-inner { max-width: 540px; } }
@media (min-width: 768px)  { .elementor .e-con.e-con-boxed > .e-con-inner { max-width: 720px; } }
@media (min-width: 992px)  { .elementor .e-con.e-con-boxed > .e-con-inner { max-width: 960px; } }
@media (min-width: 1200px) { .elementor .e-con.e-con-boxed > .e-con-inner { max-width: 1140px; } }
@media (min-width: 1400px) { .elementor .e-con.e-con-boxed > .e-con-inner { max-width: 1320px; } }

/* El bloque de la llamada a la acción va a sangre dentro de su fila,
   igual que en el React, así que no se le aplica el tope. */
.elementor .e-con.cf-cta > .e-con-inner { max-width: none; }

/* ── Iconos de trazo ──────────────────────────────────────────
   Los iconos del React son de dos clases: de relleno y de trazo. Los
   de trazo llevan `fill="none"` y dibujan con `stroke`.

   Elementor aplica `fill: <color>` al SVG, y eso gana al atributo: el
   icono de Instagram se rellenaba entero y salía como un cuadrado
   blanco macizo. Se respeta el `fill="none"` del original y se pinta
   el trazo con el color que haya puesto Elementor.

   Los hijos con `fill` propio (el punto de Instagram) no se tocan: un
   atributo de presentación gana a la herencia. */
/* Vale para cualquier contexto: si el SVG declara fill="none" es de
   trazo por definicion, lo pinte quien lo pinte. */
.elementor svg[fill="none"],
[data-elementor-type] svg[fill="none"] {
  fill: none !important;
  stroke: currentColor;
}

/* ── Píldora del hero ─────────────────────────────────────────
   Se ajusta a su contenido, como en el React. Sin esto ocupaba el
   ancho completo de la columna (624px). */
.cf-hero-pildora {
  width: auto !important;
  max-width: max-content;
}

/* ── Botones ──────────────────────────────────────────────────
   .theme-btn del React: el icono va en una CAJA cuadrada de 42px con
   su propio fondo, separada 20px del texto, y el botón tiene 3px de
   margen interior salvo por la izquierda. Elementor no tiene ese
   control, así que la forma va aquí y los colores siguen en el panel. */
.cf-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: max-content;
  max-width: 100%;
  padding: 3px 3px 3px 20px;
  border-radius: 6px;
  line-height: 1.2;
}
.cf-btn .elementor-button-content-wrapper { gap: 20px; align-items: center; }
.cf-btn .elementor-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  margin: 0;
  transition: background .4s, color .4s;
}
.cf-btn .elementor-button-icon svg { width: 16px; height: 16px; }
.cf-btn .elementor-button-text { white-space: nowrap; }

/* Contorno: caja del icono en acento, texto oscuro */
.cf-btn--linea .elementor-button-icon { background: var(--cf-acento); color: #fff; }
/* Relleno: al revés, caja blanca con la flecha en acento */
.cf-btn--solido .elementor-button-icon { background: #fff; color: var(--cf-acento); }
/* WhatsApp: la caja en verde */
.cf-btn--wa .elementor-button-icon { background: #25d366; color: #fff; }
.cf-btn--wa .elementor-button:hover .elementor-button-icon { background: #1ebe5d; }

/* Variante a todo el ancho de su caja, con el texto a un lado y el
   icono al otro (.about1__stats-box .theme-btn y .cta1__btn-box). */
.cf-btn--ancho .elementor-button { width: 100%; padding: 5px 5px 5px 18px; gap: 10px; }
.cf-btn--ancho .elementor-button-content-wrapper { width: 100%; justify-content: space-between; gap: 10px; }
.cf-btn--ancho .elementor-button-icon { width: 44px; height: 44px; }
.cf-btn--ancho .elementor-button-icon svg { width: 17px; height: 17px; }

/* Los cuatro botones de la llamada a la accion: a todo el ancho de su
   celda, con la caja del icono de 38 (.cta1__btn-box del React). */
.cf-btn--cta .elementor-button { width: 100%; padding: 5px 5px 5px 18px; gap: 20px; }
.cf-btn--cta .elementor-button-content-wrapper { width: 100%; justify-content: space-between; gap: 20px; }
.cf-btn--cta .elementor-button-icon { width: 38px; height: 38px; background: #fff; color: var(--cf-acento); }
.cf-btn--cta .elementor-button-text { white-space: normal; text-align: left; }

@media (max-width: 480px) {
  .cf-btn .elementor-button { width: 100%; }
}

/* ── Contenedores del diseño ──────────────────────────────────
   Los bloques que reproducen una pieza del diseño no deben recibir el
   flex que Elementor impone a todo contenedor (`--flex-direction` en
   columna, huecos, alineación). Se devuelven a un valor neutro para
   que manden los ajustes que SÍ están en el panel de cada contenedor. */
.elementor .e-con.cf-nativo {
  --display: flex;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

/* ── ¿Por qué elegirnos? ──────────────────────────────────────
   Aquí solo va lo que ningún control de Elementor puede dar: el
   desplazamiento de las cintas de avatares, el recorte de sus bordes y
   la posición del botón de play. Colores, degradados, radios y
   tamaños están en el panel de cada elemento, no aquí: si estuvieran
   en esta hoja, el cliente cambiaría el color y no pasaría nada. */
.cf-avatares-grid {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent);
}
.cf-cinta { flex-wrap: nowrap !important; width: max-content !important; animation: cf-cinta 30s linear infinite; }
.cf-cinta--der { animation-direction: reverse; }
@keyframes cf-cinta { to { transform: translateX(-50%); } }
.cf-cinta .elementor-widget-image { flex-shrink: 0; }
.cf-avatar img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 2px solid #fff; display: block;
}

/* El botón de play va en una esquina, sobre la foto */
.cf-wcu-foto { position: relative; }
.cf-play-btn { position: absolute !important; top: 18px; right: 18px; z-index: 2; }
.cf-play-btn .elementor-icon { border: 1px solid #ffffff66; }

/* La caja del icono translúcido es cuadrada de 64px */
.cf-wcu-icono .elementor-icon { width: 64px; height: 64px; }

/* Las razones: el número es un cuadro de 30px, el texto en dos líneas */
.cf-reason-n .elementor-heading-title {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin: 0;
}
.cf-reason-t strong { display: block; color: var(--cf-primario); font-size: 15px; margin-bottom: 2px; }
.cf-reason-t span { display: block; }

/* El enlace con flecha de «Ver programas». El color lo pone el widget
   desde el panel; aquí solo la forma y la flecha. */
.cf-enlace-flecha a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.cf-enlace-flecha a::after { content: "↗"; font-size: 13px; }

/* El número de cada razón no se encoge ni se recorta */
.cf-reason-n { flex: 0 0 30px; }
.cf-reason-n .elementor-widget-container { width: 30px; }

@media (prefers-reduced-motion: reduce) { .cf-cinta { animation: none; } }

/* Los correos del pie de "Innovación constante" heredan el color del
   texto: son enlaces, y el azul del navegador no pinta nada aqui. */
.cf-sf-mail a { color: inherit; text-decoration: none; }
.cf-sf-mail a:hover { color: var(--cf-acento); }

/* ── Preguntas frecuentes ─────────────────────────────────────
   El signo va dentro de un circulo con borde, y al abrir se rellena de
   color: los colores estan en el panel del acordeon, aqui solo la forma
   del circulo, que ningun control da.
   Cuando un bloque esta abierto, el rotulo de la cabecera se esconde y
   el que se lee es el que va dentro, al lado de la foto — igual que en
   el React (.faq1__item.is-open). */
.cf-faq .e-n-accordion-item-title-icon {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center; flex-shrink: 0;
}
.cf-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
  background: var(--cf-acento); border-color: var(--cf-acento);
}
.cf-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text {
  display: none;
}
/* Abierto, la cabecera se queda en la altura del signo (25px de aire
   arriba y abajo solo cuando esta cerrado, como el React). */
.cf-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
  padding-top: 0; padding-bottom: 0;
}
.cf-faq .e-n-accordion-item[open] { box-shadow: 0 12px 30px #7a2be012; }
.cf-faq .e-n-accordion-item { margin-bottom: 10px; }
.cf-faq-thumb img { display: block; object-fit: cover; }

/* La caja gris del formulario no hereda el hueco lateral de página */
.cf-faq-widget > .e-con-inner { padding-left: 0; padding-right: 0; }

/* El botón del formulario ocupa todo el ancho, con el texto a un lado y
   la caja de la flecha al otro (.cf-form .theme-btn del React).
   El !important es para ganar a la hoja del propio widget Form, que
   Elementor carga despues de la del tema hijo. */
.cf-form .elementor-button { width: 100% !important; }
.cf-form .elementor-button .elementor-button-content-wrapper {
  width: 100% !important;
  justify-content: space-between !important;
}
.cf-form .elementor-button .elementor-button-text {
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* Barra arcoiris del pie de la franja superior (.header-top::after del
   React): siete paradas de color, que ningun control de Elementor da. */
.cf-header-top { position: relative; }
.cf-header-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--cf-gradiente); z-index: 2;
}

/* ── Catálogo de Ecosistema ───────────────────────────────────
   Cada opción del filtro ocupa todo el ancho de la barra y el texto va
   a la izquierda, como .cf-filter-group button del React. El widget las
   deja a su ancho natural y centradas. */
.cf-filtro-lista .e-filter { width: 100%; }
.cf-filtro-lista .e-filter-item {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.cf-catalogo-n p { white-space: nowrap; margin: 0; }

/* El halo naranja de la caja de compromiso de Diversamente: un circulo
   de luz abajo a la derecha que ningun control de Elementor hace. */
.cf-commit-box::after {
  content: ""; position: absolute; width: 240px; height: 240px;
  right: -100px; bottom: -110px; border-radius: 50%;
  background: radial-gradient(circle, #f9731666, #f9731600 70%);
  pointer-events: none; z-index: 0;
}
.cf-commit-box > .e-con-inner { position: relative; z-index: 1; }

/* La etiqueta del programa, sobre la foto de la ficha */
.cf-ficha-hero { position: relative; }
.cf-ficha-badge { position: absolute !important; top: 16px; left: 16px; z-index: 2; }
.cf-ficha-badge p { margin: 0; }

/* Las pestañas de la ficha llevan una línea abajo y la activa se subraya
   en morado: el widget no tiene control de subrayado. */
.cf-ficha-tabs .e-n-tabs-heading { border-bottom: 1px solid var(--cf-borde); gap: 6px; }
.cf-ficha-tabs .e-n-tab-title {
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cf-ficha-tabs .e-n-tab-title[aria-selected="true"] { border-bottom-color: var(--cf-acento); }

/* Los dos botones de la barra lateral de la ficha ocupan todo el ancho */
.cf-ficha-lateral .cf-btn .elementor-button { width: 100%; }
.cf-ficha-lateral .cf-btn .elementor-button-content-wrapper {
  width: 100%; justify-content: space-between;
}

/* El correo largo de las tarjetas de contacto parte donde haga falta:
   en 390 sobresalia 8px del marco (.cf-contact-card del React usa
   overflow-wrap: anywhere). */
.cf-contacto-tarjeta .elementor-icon-box-title,
.cf-contacto-tarjeta p { overflow-wrap: anywhere; }

/* Red de seguridad: un contenedor con ancho fijo nunca se sale del hueco
   que tiene. En el React todos los anchos fijos son max-width, y el
   control de Elementor solo escribe width. */
.elementor .e-con { max-width: 100%; }

/* Menos lo que se desplaza A PROPOSITO: la cinta de marcas y la de
   avatares miden MAS que la pantalla y se mueven por dentro de una caja
   con overflow oculto. Al caparlas al 100% las pildoras se encogian
   hasta el icono y los rotulos se montaban unos encima de otros. */
.cf-marquee .e-con,
.cf-marquee__track,
.cf-marquee__group,
.cf-cinta,
.cf-cinta .e-con { max-width: none; }

/* Los correos largos parten donde haga falta */
.cf-faq-widget .elementor-icon-box-title,
.cf-contacto-tarjeta .elementor-icon-box-title { overflow-wrap: anywhere; }

/* El logo de cada marca del pie va dentro de un cuadrado blanco con
   3px de aire (.cf-footer-brand .lg del React). El widget no tiene un
   control de caja para la imagen. */
.cf-footer-marca .elementor-image-box-img {
  width: 38px; height: 38px; border-radius: 8px; background: #fff;
  display: grid; place-items: center; overflow: hidden; padding: 3px;
  flex-shrink: 0; margin-bottom: 0;
}
.cf-footer-marca .elementor-image-box-img img { max-width: 32px; max-height: 32px; width: auto; }
.cf-footer-marca .elementor-image-box-wrapper { display: flex; align-items: center; gap: 10px; }
.cf-footer-marca .elementor-image-box-content { text-align: left; }

/* ── Temario del programa ─────────────────────────────────────
   Un acordeon por modulo, como .cf-curriculum del React. Va con
   <details>/<summary> nativos: el contenido sale del campo del propio
   producto y no hay widget de repetidor, asi que el aspecto lo pone
   esta hoja. */
.cf-temario-mod {
  border: 1px solid var(--cf-borde);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}
.cf-temario-mod[open] { border-color: var(--cf-acento); }
.cf-temario-mod__cab {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  color: var(--cf-primario); font-weight: 600; font-size: 16px;
  font-family: "Mona Sans", sans-serif;
}
.cf-temario-mod__cab::-webkit-details-marker { display: none; }
.cf-temario-mod[open] .cf-temario-mod__cab { background: var(--cf-acento-suave, #f7f5fc); }
.cf-temario-mod__signo {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--cf-primario);
  display: grid; place-items: center; flex-shrink: 0;
  position: relative;
}
/* El signo + / − dibujado con dos barras: no hace falta cargar iconos */
.cf-temario-mod__signo::before,
.cf-temario-mod__signo::after {
  content: ""; position: absolute; background: currentColor;
  transition: opacity .2s;
}
.cf-temario-mod__signo::before { width: 12px; height: 1.5px; }
.cf-temario-mod__signo::after  { width: 1.5px; height: 12px; }
.cf-temario-mod[open] .cf-temario-mod__signo {
  background: var(--cf-acento); border-color: var(--cf-acento); color: #fff;
}
.cf-temario-mod[open] .cf-temario-mod__signo::after { opacity: 0; }
.cf-temario-mod__clases { list-style: none; margin: 0; padding: 6px 20px 16px; }
.cf-temario-mod__clases li {
  padding: 12px 0;
  border-bottom: 1px dashed var(--cf-borde);
  font-size: 14.5px;
  color: var(--cf-primario);
}
.cf-temario-mod__clases li:last-child { border-bottom: 0; }