/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.3
Description: Tema hijo del proyecto Navacorp Online. Solo contiene lo que Elementor no puede dar.
*/

/* ==========================================================
   Este archivo NO maqueta. Solo sostiene el comportamiento
   que Elementor no cubre y usa las variables de los Global
   Colors, para que si el cliente cambia un color desde el
   panel esto lo siga.
   ========================================================== */

/* ── Lista generada por el dynamic tag «Lista a partir de líneas» ── */
.nv-lista-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nv-lista-lineas li { position: relative; padding-left: 18px; }
.nv-lista-lineas li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--e-global-color-primary, #fbb102);
}

/* ── Temario del curso ────────────────────────────────────────
 * El temario lo pinta el dynamic tag «navacorp-temario» desde los campos
 * del propio producto. El marcado es plano, así que el aspecto (el mismo
 * del acordeón del React: item gris claro, radio 10, «+» dorado a la
 * derecha) se define aquí. */
.nv-temario { display: flex; flex-direction: column; gap: 16px; }
.nv-temario .nv-modulo {
  border-radius: 10px;
  background: var(--e-global-color-claro, #f7f6f3);
  transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nv-temario .nv-modulo:hover,
.nv-temario .nv-modulo.nv-abierto {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--e-global-color-linea_suave, #ececec);
}
.nv-temario .nv-modulo-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; min-height: 56px;
}
.nv-temario .nv-modulo-titulo h3 {
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family, "Rethink Sans"), sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--e-global-color-secondary, #192537);
}
.nv-temario .nv-modulo-indicadores {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; flex: none; color: var(--e-global-color-amarillo_tinta, #8f5f00);
}
.nv-temario .nv-modulo-indicadores svg { width: 20px; height: 20px; }
.nv-temario .nv-modulo-cuerpo { padding: 0 24px 24px; }

/* ── Temario: acordeón montado sobre el Loop Grid ── */
.nv-temario .nv-modulo-titulo { cursor: pointer; }
.nv-temario .nv-modulo-titulo:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #fbb102); outline-offset: 3px;
}
.nv-temario .nv-modulo-cuerpo[hidden] { display: none !important; }
.nv-temario .nv-indicador-cerrar { display: none; }
.nv-temario .nv-modulo.nv-abierto .nv-indicador-cerrar { display: inline-flex; }
.nv-temario .nv-modulo.nv-abierto .nv-indicador-abrir { display: none; }

/* ── Servicios del inicio: paneles apilados ── */
.nv-servicios-panel-pila { position: relative; }
.nv-servicios-panel-pila .elementor-grid { position: relative; }
/* .nv-panel-caja lo pone el JS sobre el envoltorio del loop item: es el
   elemento que ocupa alto. El panel activo queda en flujo y le da su
   altura a la pila; los otros dos se superponen sin ocupar espacio. */
.nv-servicios-panel-pila .nv-panel-caja {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nv-servicios-panel-pila .nv-panel-caja.nv-activo {
  position: relative; opacity: 1; pointer-events: auto;
}

/* ── Menú móvil a pantalla completa ── */
.nv-menu-movil {
  position: fixed; inset: 0; z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nv-menu-movil.nv-abierto { opacity: 1; pointer-events: auto; }

/* ── Cabecera al hacer scroll ── */
.nv-cabecera { transition: padding 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Páginas de carrito, pago y mi cuenta ──
   Salen crudas del plugin: aquí solo heredan el contenedor y la
   tipografía del sitio. Los colores vienen de los Global Colors. */
.nv-pagina-tienda { font-family: var(--e-global-typography-text-font-family, inherit); }
.nv-contenedor { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .nv-contenedor { padding: 0 32px; } }
.nv-tienda-cabecera {
  background: linear-gradient(105deg, #192537 0%, #1a3040 38%, #17423a 72%, #145140 100%);
  padding: 150px 0 64px;
}
@media (min-width: 1024px) { .nv-tienda-cabecera { padding: 200px 0 96px; } }
.nv-tienda-cabecera h1 {
  color: #fff; margin: 0;
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-size: clamp(34px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em;
}
.nv-tienda-cuerpo { padding: 72px 20px 104px; }
@media (min-width: 768px) { .nv-tienda-cuerpo { padding: 88px 32px 104px; } }
.nv-pagina-tienda .button,
.nv-pagina-tienda button[type="submit"],
.nv-pagina-tienda .wc-block-components-button {
  background: var(--e-global-color-primary, #fbb102) !important;
  color: var(--e-global-color-secondary, #192537) !important;
  border: 0 !important; border-radius: 30px !important;
  padding: 16px 32px !important; font-weight: 600 !important;
}
.nv-pagina-tienda a { color: var(--e-global-color-amarillo_tinta, #8f5f00); }
.nv-pagina-tienda h2, .nv-pagina-tienda h3 {
  font-family: var(--e-global-typography-primary-font-family, inherit);
  color: var(--e-global-color-secondary, #192537);
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .nv-menu-movil, .nv-servicios-panel-pila .nv-servicio-panel, .nv-cabecera { transition: none; }
}

/* Encabezados de bloque dentro de la hoja de reclamación */
.nv-recl-seccion {
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--e-global-color-apagado, #788094);
  margin: 8px 0 0;
}

/* Estado vacío del catálogo: la tarjeta centrada del React (título 22, texto 15
   y botón oscuro pequeño), dentro del mensaje nativo del Loop Grid */
.e-loop-nothing-found-message__text {
  background: #fff; border-radius: 20px; padding: 64px 30px;
  display: flex; flex-direction: column; align-items: center;
}
.nv-vacio-titulo {
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
  color: var(--e-global-color-secondary, #192537);
}
.nv-vacio-texto {
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: 15px; line-height: 1.6; margin-top: 8px;
  color: var(--e-global-color-text, #535353);
}
.nv-vacio-boton {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 24px; padding: 12px 22px; min-height: 44px;
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: 14px; font-weight: 600; line-height: 1; border-radius: 30px;
  background: var(--e-global-color-secondary, #192537); color: #fff;
  transition: background-color 300ms cubic-bezier(.16,1,.3,1), color 300ms cubic-bezier(.16,1,.3,1);
}
.nv-vacio-boton:hover {
  background: var(--e-global-color-primary, #fbb102);
  color: var(--e-global-color-secondary, #192537);
}

/* ── Iconos de trazo ──────────────────────────────────────────
 * Los iconos del proyecto vienen con fill="none" stroke="currentColor".
 * Elementor escribe `fill: <color>` en el SVG desde el control de color
 * del widget, y un atributo de presentación pierde contra cualquier
 * regla CSS: el icono se rellena y se ve como una mancha. Se anula el
 * relleno para todos; el color lo da el `color` heredado, que es lo que
 * usa currentColor. */
.elementor svg[stroke="currentColor"],
.elementor svg[fill="none"] { fill: none !important; }

/* ── Icono pintado por el dynamic tag propio ── */
.nv-svg { display: inline-flex; line-height: 0; }
.nv-svg svg { width: 1em; height: 1em; }

/* ── Filtro del catálogo ──────────────────────────────────────
 * El widget de filtro solo expone colores de fondo en su panel: la
 * geometría de las filas del diseño (ancho completo, texto a la
 * izquierda, conteo y flecha a la derecha) va aquí. El contenido
 * sigue siendo del widget. */
.nv-filtro-con-conteo .e-filter { align-items: stretch; }
.nv-filtro-con-conteo .e-filter-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; text-align: left;
  transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nv-filtro-con-conteo .nv-filtro-izq,
.nv-filtro-con-conteo .nv-filtro-der { display: inline-flex; align-items: center; }
.nv-filtro-con-conteo .nv-filtro-izq { gap: 12px; min-width: 0; }
.nv-filtro-con-conteo .nv-filtro-der { gap: 8px; flex: none; }
.nv-filtro-con-conteo .nv-filtro-icono { width: 22px; height: 22px; flex: none; }
.nv-filtro-con-conteo .nv-filtro-flecha { width: 16px; height: 16px; flex: none; }
.nv-filtro-con-conteo .nv-filtro-conteo {
  font-size: 13px; color: var(--e-global-color-apagado, #788094);
}
.nv-filtro-con-conteo .e-filter-item[aria-pressed="true"] .nv-filtro-conteo {
  color: var(--e-global-color-secondary, #192537); opacity: .8;
}

/* Enlace «Limpiar filtros»: en el React solo aparece cuando hay un
   filtro puesto. Se resuelve mirando si algún botón activo no es
   «Todos», sin JS. */
.nv-limpiar-filtros { display: none; }
.nv-filtros-caja:has(.e-filter-item[aria-pressed="true"]:not([data-filter="__all"])) .nv-limpiar-filtros {
  display: block;
}

/* ── Padding lateral de página ────────────────────────────────
 * Se declara UNA vez en Site Settings (regla 8.4 del kit) y Elementor lo
 * publica por dispositivo en --container-default-padding-left/right.
 *
 * El problema: Elementor lo aplica al contenedor exterior, y en cuanto una
 * sección declara su propio padding vertical, Elementor escribe los cuatro
 * lados y el lateral global desaparece. El contenido quedaba 64px más ancho
 * que en el React y las tarjetas envolvían distinto.
 *
 * Se mueve al interior del contenedor «boxed», que es donde el React lo
 * tiene (.container-site lleva el padding dentro de su max-width). El
 * exterior se pone a cero para no sumarlo dos veces. Los valores siguen
 * saliendo de Site Settings: aquí no hay ni un número. */
.elementor > .e-con-boxed.e-parent { padding-left: 0; padding-right: 0; }
.elementor > .e-con-boxed.e-parent > .e-con-inner {
  padding-left: var(--container-default-padding-left);
  padding-right: var(--container-default-padding-right);
}

/* ── Migas de pan de la cabecera interna ──────────────────────
 * El widget de migas solo reimprime la salida de Yoast y no trae ni un
 * control de estilo, asi que la tipografia, el hueco y los colores del
 * React se dan aqui. El separador es el icono real, puesto en el ajuste
 * de Yoast (ver bin/seo.php). */
.nv-migas #breadcrumbs { margin: 0; font-size: 14px; font-weight: 500; }
.nv-migas #breadcrumbs > span {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.nv-migas .nv-miga-flecha { width: 14px; height: 14px; flex: none; }
.nv-migas a { color: #fff; transition: color 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.nv-migas > .elementor-widget-container a:first-of-type,
.nv-migas #breadcrumbs > span > span:first-child a { color: var(--e-global-color-crema, #ffe9b0); }
.nv-migas a:hover { color: var(--e-global-color-crema, #ffe9b0); }
.nv-migas .breadcrumb_last { color: rgba(255, 255, 255, 0.8); }

/* ── Cifras del inicio ────────────────────────────────────────
 * El widget contador de Elementor pinta el titulo ENCIMA del numero y no
 * tiene control para invertirlo. En el React el numero va primero y la
 * etiqueta debajo, a 8px. */
.nv-cifra .elementor-counter { display: flex; flex-direction: column-reverse; gap: 8px; }

/* Filas de icono + texto en móvil
   Por debajo de 768px Elementor pone todos los contenedores al 100%, así
   que la caja del icono y su texto, que en el diseño van uno al lado del
   otro, se parten en dos líneas. La regla devuelve la fila: el icono
   conserva su cuadrado y el texto ocupa el resto. */
@media (max-width: 767px) {
  .e-con:has(> .nv-caja-icono) { flex-wrap: nowrap; }
  /* .e-con delante para ganarle a la regla propia de Elementor. */
  .e-con.nv-caja-icono { flex: 0 0 auto; }
  .e-con:has(> .nv-caja-icono) > .e-con:not(.nv-caja-icono),
  .e-con:has(> .nv-caja-icono) > .elementor-widget { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* ── Barra de la cabecera ─────────────────────────────────────
 * Un contenedor hijo dentro de una fila ocupa el 100 % del ancho salvo
 * que se le fije uno, y el control `width` del contenedor no admite
 * «auto». Con el menu de escritorio oculto, el logo y el boton del menu
 * quedaban uno debajo del otro en movil. El control de ancho no acepta
 * «auto» y Elementor hereda --width: 100% a todos los hijos, así que se
 * marcan con una clase los dos bloques que deben ajustarse a su
 * contenido — sin tocar a sus descendientes, que conservan el ancho
 * declarado en el panel (el botón del menú y sus 44px de área táctil). */
.nv-barra-hueco { width: fit-content; }
/* El ancho del botón del menú se declara en el panel (44px de área
 * táctil), pero en una plantilla del Theme Builder Elementor emite la
 * regla como `.elementor-element-xxx`, y su propio
 * `.e-con.e-child { --width: 100% }` pesa más: el botón se quedaba en los
 * 20px del icono. Se devuelve el valor por su propia variable. */
.nv-barra .nv-abrir-menu { --width: 44px; }
/* Mismo caso en el botón de cerrar del menú móvil: su ancho de 44px se
 * declara en el panel y el `.e-con.e-child` de Elementor lo pisaba, así
 * que salía como una barra de lado a lado. */
.nv-menu-movil .nv-cerrar-menu { --width: 44px; }

/* ── Botones en una sola línea ────────────────────────────────
 * El `.btn` del React lleva `white-space: nowrap` y mide su ancho por el
 * texto. Elementor deja que el texto envuelva, y «Ver todos los cursos»
 * salía partido en dos líneas dentro de una caja más estrecha.
 * Y se centra con flex como el React: en bloque, el texto quedaba
 * pegado arriba dentro de la píldora. */
.elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  /* 44px es el alto del botón pequeño del React; los grandes ya lo pasan
     con su propio relleno. */
  min-height: 44px;
}


/* ── Dots de los carruseles ───────────────────────────────────
 * Los de fábrica de Elementor son puntos negros de 6px con opacidad.
 * Los del React son píldoras de 10px, gris línea, y la activa se alarga
 * a 30px en verde. El widget no tiene controles para ese tamaño ni para
 * la forma activa. */
.elementor-widget .swiper-pagination-bullet {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--e-global-color-linea, #d8dde1); opacity: 1;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.elementor-widget .swiper-pagination-bullet:hover { background: var(--e-global-color-apagado, #788094); }
.elementor-widget .swiper-pagination-bullet-active {
  width: 30px; background: var(--e-global-color-accent, #14453a);
}
.elementor-widget .swiper-pagination-bullets { display: flex; justify-content: center; gap: 10px; }
.elementor-widget .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0; }

/* ── Campos de formulario ─────────────────────────────────────
 * Los controles de estilo de campo del widget Form no estan registrados
 * en esta version (su seccion existe pero llega vacia), asi que el borde
 * salia con el gris oscuro de fabrica y esquinas de 3px. Valores leidos
 * del React: 1px #d8dde1, radio 8, relleno 14/20 y 55px de alto. */
.elementor-field-group .elementor-field-textual {
  border: 1px solid var(--e-global-color-linea, #d8dde1);
  border-radius: 8px;
  padding: 14px 20px;
  min-height: 55px;
  background-color: #fff;
}
.elementor-field-group textarea.elementor-field-textual { min-height: 120px; }
.elementor-field-group .elementor-field-textual:focus {
  border-color: var(--e-global-color-secondary, #192537);
  outline: none;
}

/* ── Carruseles: recortar desde el primer pintado ─────────────
 * El recorte lo trae la hoja del widget, que Elementor encola tarde (y
 * dentro de un Loop Item a veces no encola). Hasta que llegaba, las
 * diapositivas se colocaban en fila y ensanchaban la página: aparecía
 * scroll horizontal durante el primer segundo de carga. */
.elementor-widget .swiper,
.elementor-widget .elementor-main-swiper,
.elementor-widget .elementor-loop-container { overflow: hidden; }

/* ── Resumen de tarjeta a dos líneas ──────────────────────────
 * Igual que en el React (2 líneas y puntos suspensivos). Va aquí y con
 * !important porque la regla del propio elemento no gana dentro del
 * carrusel del inicio: el resumen salía a tres líneas y se montaba
 * encima de las horas académicas. */
.nv-resumen-2 > .elementor-widget-container {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  /* Tope de alto además del recorte: dos líneas de 1.6em. Es lo que
     garantiza que el resumen no invada las horas académicas aunque el
     recorte por líneas no llegue a aplicarse. */
  max-height: 3.2em !important;
}

/* ── Flechas de las migas de pan ──────────────────────────────
 * El separador es el SVG del proyecto servido como <img>, y un <img> no
 * hereda el color: salía negro sobre la cabecera oscura. Se pasa a
 * blanco, que es el color que tiene en el React. */
.nv-migas .nv-miga-flecha { filter: brightness(0) invert(1); opacity: .9; }

/* ── Flechas de carrusel: icono centrado ──────────────────────
 * Elementor deja el botón en flex pero sin centrar, así que el SVG se
 * pegaba arriba a la izquierda del círculo y además salía a 25px. En el
 * React el círculo mide 40 y la flecha 16, centrada. */
.elementor-swiper-button {
  /* inline-flex, no flex: en bloque las dos flechas se apilaban una
     debajo de otra en el carrusel de testimonios. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.elementor-swiper-button svg,
.elementor-swiper-button .nv-svg svg { width: 16px; height: 16px; }

/* ── Etiqueta de categoría de la tarjeta ──────────────────────
 * La píldora debe medir lo que su texto (22px con 3px de relleno), como
 * en el React. Dentro del carrusel del inicio se estiraba al alto del
 * widget y parecía un globo. */
.nv-etiqueta-curso > .elementor-widget-container {
  height: fit-content !important;
  align-self: flex-start;
}