/*
	Theme Name: Hello Elementor Child
	Theme URI: https://elementor.com/hello-theme/
	Description: Tema hijo de Hello Elementor para la landing de Joaquín Valcarce | CEO.
	Author: Hostealo
	Template: hello-elementor
	Version: 1.0.0
	Text Domain: hello-elementor-child
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==================================================================
   TODO EL ESTILO DE LA LANDING VIVE EN ELEMENTOR
   (Site Settings > Variables, y el panel de clases del editor).

   Aqui solo queda lo que el esquema de estilos de Elementor 4 NO puede
   expresar, que son tres cosas:

     1. Propiedades de scroll-snap y ocultado de la barra de scroll: no
        existen en el esquema.
     2. Reglas que dependen del ESTADO DE UN ANCESTRO para cambiar un
        DESCENDIENTE (hover en la tarjeta -> opacidad de su capa interna).
        Los estados de Elementor aplican al propio elemento, nunca a un hijo.
     3. Selectores condicionales (:has, :target) para el punto activo del
        carrusel.

   Lo que se edita desde Elementor sin tocar codigo: colores, tamanos,
   espaciados, tipografias, bordes, fondos, y los hovers de botones,
   pestanas y puntos de paginacion.

   Ojo: lo de este fichero no se ve en el editor de Elementor, solo en la
   pagina publicada.
   ================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Carruseles con scroll nativo
 *
 * El diseno plantea Hitos, Carrera y Blog como carruseles. En lugar de una
 * libreria de JavaScript se usa scroll horizontal nativo con scroll-snap:
 * funciona sin scripts, con teclado, con gestos tactiles y respeta
 * prefers-reduced-motion.
 *
 * El ancho de las tarjetas, los huecos y el overflow SI estan en Elementor
 * (clases `carrusel`, `hito-card`, `logro-card`, `blog-card`).
 * ------------------------------------------------------------------ */

.elementor .carrusel {
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Oculta la barra sin perder la funcionalidad de scroll. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.elementor .carrusel::-webkit-scrollbar {
	display: none;
}

.elementor .carrusel > * {
	scroll-snap-align: start;
}

/*
 * Cuando el carrusel lleva padding lateral (el del Blog arranca a 260px por el
 * hueco del menu lateral), scroll-snap alinea la primera tarjeta al borde del
 * scrollport IGNORANDO ese padding, y el navegador se auto-desplaza esos
 * pixeles al cargar. scroll-padding hace que los anclajes lo respeten.
 */
.elementor .carrusel-sangrado {
	scroll-padding-inline-start: 260px;
}

/* ------------------------------------------------------------------ *
 * 2. Punto activo del carrusel de Hitos
 *
 * El aspecto del punto (10px, circulo, color base y hover) esta en la clase
 * `punto-nav` de Elementor. Aqui solo queda marcar CUAL esta activo, que
 * depende de a que tarjeta apunta la URL: eso necesita :has() + :target.
 * ------------------------------------------------------------------ */

.elementor .e-hitos-carrusel:not(:has(> * > *:target)) .punto-nav:first-child,
.elementor .e-hitos-carrusel:has(#hito-1:target) .punto-nav[href="#hito-1"],
.elementor .e-hitos-carrusel:has(#hito-3:target) .punto-nav[href="#hito-3"],
.elementor .e-hitos-carrusel:has(#hito-5:target) .punto-nav[href="#hito-5"] {
	background-color: var(--blanco-puro);
}

/* ------------------------------------------------------------------ *
 * 3. Muro de LinkedIn: texto revelado al pasar el raton
 *
 * En Figma la capa de texto esta a opacity 0 y se revela en hover. Es una
 * regla "estado del ANCESTRO -> propiedad del DESCENDIENTE", imposible en el
 * esquema de Elementor. Se anade :focus-within para teclado, y en movil se
 * muestra siempre porque no existe hover.
 *
 * El fondo, el padding y la posicion de la capa estan en Elementor
 * (clase `wall-post-overlay`).
 * ------------------------------------------------------------------ */

.elementor .wall-post .wall-post-overlay {
	opacity: 0;
	transition: opacity 250ms ease;
}

.elementor .wall-post:hover .wall-post-overlay,
.elementor .wall-post:focus-within .wall-post-overlay {
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * PAGINA CLASICA (#344) - carruseles
 *
 * En la version clasica todo el estilo esta en los ajustes de cada widget.
 * Esto es la excepcion: `scroll-snap-type`, `scroll-snap-align` y el ocultado
 * de la barra de scroll no existen como control en ningun sitio, y sin
 * Elementor Pro no hay widget de carrusel que admita tarjetas (el de free solo
 * acepta imagenes). El ancho de las tarjetas, el hueco y el overflow SI estan
 * en los ajustes del Container.
 * ------------------------------------------------------------------ */

.elementor .jvl-carrusel {
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.elementor .jvl-carrusel::-webkit-scrollbar {
	display: none;
}

.elementor .jvl-carrusel > * {
	scroll-snap-align: start;
}

/*
 * Franjas de degradado del borde izquierdo de los carruseles (hitos, carrera y
 * actualidad). Son puramente decorativas y van en absolute por encima de las
 * tarjetas, asi que TIENEN que ser transparentes al raton: al ensancharlas hasta
 * el borde de la seccion tapaban el arranque del carrusel y se comian ahi el
 * arrastre (y el clic en la primera tarjeta). `pointer-events` no existe como
 * control en Elementor, de ahi la excepcion.
 */
.elementor .jvl-corte {
	pointer-events: none;
}

/*
 * Cursor de agarre para los carruseles arrastrables (ver js/carrusel-arrastre.js).
 * La clase `jvl-arrastrando` la pone y quita el script mientras se arrastra.
 * `user-select: none` evita que el gesto seleccione el texto de las tarjetas.
 */
.elementor .jvl-carrusel,
.elementor .carrusel {
	cursor: grab;
}

.elementor .jvl-arrastrando {
	cursor: grabbing;
	user-select: none;
}

/*
 * Cuando el carrusel lleva sangrado (el de Actualidad arranca a 260 como el
 * titular), scroll-snap alinea la primera tarjeta al borde del scrollport
 * IGNORANDO ese relleno, y el navegador se auto-desplaza esos pixeles al
 * cargar, cortando la tarjeta. scroll-padding lo corrige, y tampoco existe
 * como control.
 */
.elementor .jvl-carrusel-sangrado {
	scroll-padding-inline-start: 260px;
}

@media (max-width: 767px) {
	.elementor .jvl-carrusel-sangrado {
		scroll-padding-inline-start: 30px;
	}
}

/*
 * PAGINA CLASICA - muro de LinkedIn: texto revelado al pasar el raton.
 *
 * Segunda y ultima excepcion de esta pagina. Es "estado del ANCESTRO ->
 * propiedad del DESCENDIENTE", y eso no existe como control ni en el stack
 * clasico ni en el atomico: los estados de Elementor aplican al propio
 * elemento, nunca a un hijo. El fondo, el relleno y la posicion de la capa SI
 * estan en los ajustes del Container (clase `jvl-wall-overlay`).
 *
 * Se anade :focus-within para quien navegue con teclado, y en movil se muestra
 * siempre porque no hay hover.
 */
.elementor .jvl-wall-overlay {
	opacity: 0;
	transition: opacity 250ms ease;
}

.elementor .jvl-wall-post:hover .jvl-wall-overlay,
.elementor .jvl-wall-post:focus-within .jvl-wall-overlay {
	opacity: 1;
}

/*
 * Las tarjetas son CUADRADAS (410x410 en Figma) y su ancho es fluido, asi que la
 * altura tiene que seguir al ancho. El Container clasico solo tiene `min-height`,
 * no proporcion, y una altura fija convertiria los cuadrados en rectangulos en
 * cuanto la pantalla pasa de 1680. Es la tercera excepcion de esta pagina.
 *
 * `min-height: 410px` sigue puesto en los ajustes como suelo: si esta hoja no
 * cargara, las tarjetas seguirian teniendo altura en vez de colapsar (su unico
 * contenido va en absolute). Por eso aqui no se toca la altura, solo la
 * proporcion: en escritorio la tarjeta mide mas de 410 y manda el cuadrado.
 */
.elementor .jvl-wall-post {
	aspect-ratio: 1;
}

/*
 * LOGOTIPO DEL PIE - forzado a blanco.
 *
 * `logotipo-jvl-horizontal-cc.svg` lleva `fill="currentColor"`, y el widget
 * Imagen lo inserta como <img>. Dentro de un <img> el SVG es un documento
 * AISLADO: `currentColor` no tiene de quien heredar y el navegador lo resuelve a
 * negro, asi que el logotipo salia oscuro sobre el fondo oscuro y casi no se via.
 *
 * `brightness(0)` lo lleva todo a negro y `invert(1)` lo pasa a blanco puro,
 * respetando la transparencia. Es la via limpia con el widget Imagen.
 *
 * Por que no el widget Icono, que SI permitiria darle color de forma nativa:
 * dimensiona por font-size y no por ancho, y con este trazo de 434x29 ya reventó
 * una vez la altura de este pie (se fue a 528).
 */
.elementor .jvl-logo-pie img {
	filter: brightness( 0 ) invert( 1 );
}

/*
 * MENUS: la lista <ul>/<li> que inserta jvl_envuelve_en_lista() en functions.php,
 * sin que cambie ni un pixel de la maquetacion.
 *
 * El truco es `inherit` en todas las propiedades de flex: la lista adopta lo que
 * Elementor haya calculado en el contenedor del menu (direccion, hueco,
 * alineacion), asi que se puede seguir cambiando el menu desde el editor y la
 * lista lo sigue sola. Con valores fijos aqui habria que tocar los dos sitios.
 *
 * Se descarto `display: contents` en el <li>, que seria lo mas transparente para
 * el layout, porque en varios navegadores anula el rol de lista y entonces el
 * marcado semantico no sirve de nada, que es justo lo que se busca.
 */
.elementor .jvl-menu-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: inherit;
	flex-wrap: inherit;
	gap: inherit;
	align-items: inherit;
	justify-content: inherit;
}

.elementor .jvl-menu-lista > li {
	display: flex;
}

/*
 * EJES DE LIDERAZGO - entrada del contenido al cambiar de pestaña.
 *
 * El texto entra desde arriba y la imagen aparece con un desvanecido y un zoom
 * minimo, un pelin despues, para que no se muevan las dos cosas a la vez.
 *
 * POR QUE CSS Y NO UN CONTROL: el widget de pestañas no tiene ninguna opcion de
 * transicion para su contenido, y las animaciones de entrada de Elementor no
 * sirven aqui: se disparan UNA vez, cuando el elemento entra en pantalla, no
 * cada vez que se cambia de pestaña.
 *
 * Funciona porque los paneles inactivos estan en `display: none`. Al activarse
 * uno, su caja se crea de nuevo y la animacion arranca desde el principio, asi
 * que se repite en cada cambio de pestaña (y tambien en la primera carga).
 *
 * Se usa el id de la seccion en vez de una clase nueva para no tener que tocar la
 * pagina: `#ejes-liderazgo` es el ancla del menu, es estable.
 *
 * `nth-of-type` y no `nth-child` a proposito: Elementor intercala etiquetas
 * <style> entre los elementos de sus widgets, y con `nth-child` los indices
 * bailan (ya paso con el muro de LinkedIn).
 */
@keyframes jvl-ejes-texto {
	from { opacity: 0; transform: translateY( -24px ); }
	to   { opacity: 1; transform: none; }
}

@keyframes jvl-ejes-imagen {
	from { opacity: 0; transform: scale( 0.98 ); }
	to   { opacity: 1; transform: none; }
}

.elementor #ejes-liderazgo .e-n-tabs-content > .e-active > .e-con:nth-of-type(1) {
	animation: jvl-ejes-texto 0.5s cubic-bezier( 0.22, 0.61, 0.36, 1 ) both;
}

.elementor #ejes-liderazgo .e-n-tabs-content > .e-active > .e-con:nth-of-type(2) {
	animation: jvl-ejes-imagen 0.6s ease-out 0.12s both;
}

@media (prefers-reduced-motion: reduce) {
	.elementor #ejes-liderazgo .e-n-tabs-content > .e-active > .e-con:nth-of-type(1),
	.elementor #ejes-liderazgo .e-n-tabs-content > .e-active > .e-con:nth-of-type(2) {
		animation: none;
	}
}

/*
 * TARJETAS DE LOGROS - texto al pasar el raton.
 *
 * El componente de Figma tiene dos variantes: en reposo el numero es #3E486E y
 * la descripcion #CDCBCB; al pasar el raton el fondo se vuelve #3E486E y los dos
 * textos, blancos.
 *
 * El FONDO va por control nativo (el Container tiene su grupo de fondo en
 * hover). Los TEXTOS no pueden: es "estado del ANCESTRO -> propiedad del
 * DESCENDIENTE", que no existe como control ni en clasico ni en atomico. Es la
 * misma excepcion irreducible que el muro de LinkedIn y las etiquetas del menu.
 *
 * `:focus-within` acompaña al hover para quien navega con teclado. La transicion
 * va en la regla BASE, no en la de hover, para que tambien se suavice al salir,
 * y sus 0,3s son los mismos que Elementor da al fondo: asi el color del texto y
 * el del fondo viajan juntos.
 */
.elementor .jvl-logro .elementor-heading-title,
.elementor .jvl-logro .elementor-widget-text-editor {
	transition: color 0.3s ease;
}

/*
 * El `.elementor-element` de mas NO sobra, y solo hace falta para el NUMERO.
 *
 * Elementor da su color al titular con
 * `.elementor-<pag> .elementor-element.elementor-element-<id> .elementor-heading-title`,
 * que son CUATRO clases; `.elementor .jvl-logro:hover .elementor-heading-title`
 * son otras cuatro (el `:hover` cuenta como clase) y su hoja carga despues, asi
 * que ganaba ella y el numero se quedaba azul. Con `.elementor-element` suman
 * cinco.
 *
 * A la descripcion no le hacia falta: alli Elementor pone el color sobre el
 * envoltorio del widget, con solo tres clases, y por eso esa si cambiaba.
 */
.elementor .elementor-element.jvl-logro:hover .elementor-heading-title,
.elementor .elementor-element.jvl-logro:focus-within .elementor-heading-title,
.elementor .elementor-element.jvl-logro:hover .elementor-widget-text-editor,
.elementor .elementor-element.jvl-logro:focus-within .elementor-widget-text-editor {
	color: var( --e-global-color-jvl-texto-principal, #FFFFFF );
}

@media (prefers-reduced-motion: reduce) {
	.elementor .jvl-logro .elementor-heading-title,
	.elementor .jvl-logro .elementor-widget-text-editor {
		transition: none;
	}
}

/*
 * Icono SVG a su proporcion real.
 *
 * El widget Icono cuadra el SVG al tamaño elegido (un `viewBox` de 44x34 se
 * pinta en una caja de 43x43, con el dibujo flotando en medio) y encima el
 * envoltorio, que es un elemento en linea, añade el hueco de la linea base.
 * Entre las dos cosas las comillas de la Introduccion ocupaban 49 donde el
 * diseño da 34. No es el comportamiento por defecto que se quiere en todos los
 * iconos, de ahi que sea una clase que se pide expresamente.
 *
 * No hay control de Elementor que haga esto: el de tamaño escribe el MISMO
 * valor en ancho y alto. Y la clase repetida en el segundo selector tampoco
 * sobra, porque ese `height` en pixeles sale con la misma especificidad que la
 * regla y en una hoja que carga despues.
 */
.elementor .elementor-element.jvl-icono-ajustado .elementor-icon-wrapper {
	line-height: 0;
}

.elementor .elementor-element.elementor-element.jvl-icono-ajustado .elementor-icon svg {
	height: auto;
}

/*
 * Texto solo para lectores de pantalla.
 *
 * Lo usa el boton flotante de Viroque en movil: su unico contenido visible es un
 * SVG, asi que sin esto el enlace no tendria nombre accesible. Mismo mecanismo
 * que las etiquetas del menu en reposo (clip-path en vez de display:none, que
 * las sacaria del arbol de accesibilidad).
 */
.elementor .jvl-oculto-visualmente {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * PAGINA CLASICA - menu lateral: etiqueta revelada al pasar el raton.
 * Misma excepcion que el muro (estado del ancestro -> descendiente). En reposo
 * se recorta con clip-path y no con visibility, para que el texto siga siendo el
 * nombre accesible del enlace y a la vez su area no reciba clics.
 */
.elementor .elementor-element.jvl-menu-etiqueta {
	opacity: 0;
	clip-path: inset(50%);
	white-space: nowrap;
	background: var(--e-global-color-jvl-blanco);
	border-radius: 19px;
	padding: 8px 12px;
	transition: opacity 200ms ease;
	/*
	 * LA CLAVE ESTA EN `max-width`, NO EN `width`.
	 *
	 * La etiqueta va en `absolute` con left:55 dentro de un acceso de 45px. El
	 * tema aplica `max-width: 100%`, que resuelve al 100% del BLOQUE CONTENEDOR
	 * (esos 45px) y topa cualquier ancho que se le ponga. De ahi que fallaran
	 * cuatro intentos seguidos peleando con `width`: max-content en el tema,
	 * `_element_custom_width`, un ancho en pixeles por etiqueta y hasta
	 * `width: !important`. Todos daban 45 porque el tope no era el width.
	 *
	 * Con el tope liberado, `max-content` hace que la caja mida lo que el texto y
	 * el `clip-path: inset(0)` del hover ya no lo recorta.
	 */
	max-width: none !important;
	width: max-content !important;
}

.elementor .jvl-menu-item:hover .jvl-menu-etiqueta,
.elementor .jvl-menu-item:focus-visible .jvl-menu-etiqueta {
	opacity: 1;
	clip-path: inset(0);
}

@media (max-width: 767px) {
	.elementor .jvl-wall-overlay {
		opacity: 1;
	}

	/*
	 * MURO DE LINKEDIN - en movil el diseño solo muestra TRES publicaciones (en
	 * el Figma de movil la 4, la 5 y la 6 estan invisibles), y esos 1150px son
	 * los que cuadran la altura de la seccion.
	 *
	 * Antes se ocultaban con el control "ocultar en movil" de cada tarjeta, pero
	 * ahora salen de un bucle y `posts_per_page` no es responsive: no hay forma
	 * nativa de pedir seis en escritorio y tres en movil sin duplicar la rejilla.
	 * Esta seccion ya necesita CSS propio para el texto que se revela al pasar el
	 * raton, asi que la excepcion se queda aqui, al lado.
	 *
	 * OJO con `nth-child`: NO sirve. Elementor intercala una etiqueta <style>
	 * entre cada tarjeta, asi que los indices reales son 3, 5, 7, 9, 11 y 13 y
	 * `nth-child(n+4)` dejaba una sola visible. Los combinadores de hermano si
	 * valen porque ignoran lo que haya en medio: esto selecciona toda tarjeta
	 * precedida por al menos tres tarjetas, o sea la cuarta, la quinta y la sexta.
	 */
	.elementor .jvl-wall-grid .e-loop-item ~ .e-loop-item ~ .e-loop-item ~ .e-loop-item {
		display: none;
	}

	/*
	 * PAGINA CLASICA - Introduccion: la cita vuelve al flujo, encima del video.
	 *
	 * El diseño movil de esa seccion no es una version estrecha del de
	 * escritorio (ver la cabecera de sec-clasico/introduccion.php). Todo lo
	 * demas se resuelve con controles de Elementor; esto no, porque el control
	 * `position` NO es responsive. Lo que salva la situacion es que no escribe
	 * `position` sino la variable `--position` del contenedor, y esa si se puede
	 * reponer aqui. Los desplazamientos ya van a 0 desde los ajustes (esos si
	 * son responsive).
	 *
	 * El `.e-con` de mas no sobra: el CSS que genera Elementor para el elemento
	 * tiene la MISMA especificidad que `.elementor .elementor-element.<clase>` y
	 * se carga despues, asi que sin esa clase extra gana el. Es el mismo recurso
	 * que usa Elementor en container.php ("Hack to increase specificity").
	 */
	/*
	 * Dos casos, un mismo remedio: devolver un contenedor al flujo en movil.
	 *
	 *  - `jvl-cita-en-flujo`  (Introduccion): la cita es absoluta sobre el video
	 *    en escritorio y en el flujo encima de el en movil.
	 *  - `jvl-en-flujo-movil` (Perfil Ejecutivo): la columna de texto es STICKY
	 *    en escritorio, al lado de la foto. En movil la fila se invierte con
	 *    `column-reverse` para que la foto quede debajo, y entonces el sticky se
	 *    quedaba pegado arriba y el texto pasaba POR ENCIMA de la imagen al
	 *    desplazarse.
	 */
	.elementor .elementor-element.e-con.jvl-cita-en-flujo,
	.elementor .elementor-element.e-con.jvl-en-flujo-movil {
		--position: relative;
	}

	/*
	 * CITA DESTACADA - sin retrato de fondo en movil.
	 *
	 * Alli es redundante: el marco de movil ya pone el retrato como imagen propia
	 * debajo de la frase. El COLOR de fondo se conserva; solo se quita la imagen.
	 *
	 * Por que hace falta CSS: la imagen de fondo si es responsive, pero dejarla
	 * vacia no la desactiva (Elementor no emite la propiedad y sigue valiendo la
	 * de escritorio). Y no vale quitar el fondo entero en movil, porque se iria
	 * tambien el color y asomaria el blanco del <body>.
	 *
	 * La clase repetida no sobra: Elementor genera para este caso la regla
	 * `...element-<id>:not(.elementor-motion-effects-element-type-background)`,
	 * que suma CUATRO clases, y esta hoja carga antes que la suya.
	 */
	.elementor .elementor-element.elementor-element.e-con.jvl-sin-fondo-movil {
		background-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .jvl-carrusel {
		scroll-behavior: auto;
	}

	.elementor .jvl-wall-overlay {
		transition: none;
	}
}

/*
 * PAGINA CLASICA - relleno de las pestanas de Ejes.
 *
 * Figma da los selectores en 52 de alto con relleno 0/0/20/0. El widget trae
 * 15/35 de fabrica y NO expone control de relleno para el titulo (comprobado
 * recorriendo sus controles registrados: no existe ninguno de tipo dimensions
 * para eso). Lo que si expone son sus variables CSS, que es la via limpia para
 * ajustarlo sin pelear con especificidad.
 * El 19 en vez de 20 es el borde inferior, que suma por fuera.
 */
.elementor .elementor-widget-n-tabs {
	--n-tabs-title-padding-block-start: 0;
	--n-tabs-title-padding-block-end: 19px;
	--n-tabs-title-padding-inline-start: 0;
	--n-tabs-title-padding-inline-end: 0;

	/*
	 * Estado HOVER. Los ajustes `tabs_title_background_color_hover_*` y
	 * `title_text_color_hover` no entran (los de estado normal y activo si), y el
	 * widget se quedaba con sus valores de fabrica: fondo VERDE #61CE70 y texto
	 * blanco al pasar el raton. Se corrige por variable, como el relleno.
	 * En el diseno el hover solo aclara el texto: ni fondo ni cambio de borde.
	 */
	--n-tabs-title-background-color-hover: transparent;
	--n-tabs-title-color-hover: var(--e-global-color-jvl-texto-secundario);
	/*
	 * AQUI HABIA UNA VARIABLE INVENTADA: --n-tabs-title-border-color-hover.
	 * El widget NO la lee (solo existen las de color de texto y de fondo), asi
	 * que el borde del hover se quedaba sin regla que le diera color y salia
	 * rosa. El color del borde en hover se pone donde toca: en el grupo nativo
	 * `tabs_title_border_hover` de los ajustes del widget.
	 */

	/*
	 * Estos dos ya no se usan (los ajustes del widget los pisan), pero se
	 * neutralizan igual: traen de fabrica un gris #f1f2f3 y un VERDE #61CE70 que
	 * volverian a asomar si alguien toca esos ajustes desde el panel.
	 */
	--n-tabs-title-background-color: transparent;
	--n-tabs-title-background-color-active: transparent;
}

/*
 * Solo borde INFERIOR en hover, foco y pulsacion.
 *
 * El widget trae de fabrica un borde COMPLETO para el estado hover (su grupo
 * `tabs_title_border_hover`, que no expone variable de grosor), y el <button>
 * anade encima el anillo de foco del navegador. El resultado era un recuadro
 * blanco entero mas un borde morado al hacer clic, cuando el diseno solo tiene
 * la linea de abajo.
 */
.elementor .elementor-widget-n-tabs .e-n-tab-title:hover,
.elementor .elementor-widget-n-tabs .e-n-tab-title:focus,
.elementor .elementor-widget-n-tabs .e-n-tab-title:focus-visible,
.elementor .elementor-widget-n-tabs .e-n-tab-title:active {
	border-width: 0 0 1px;
	border-style: solid;
	/*
	 * El color va aqui tambien porque `:active` y `:focus` sin hover no tienen
	 * grupo propio en el widget, y la regla del estado normal que si lo tiene
	 * esta limitada a `:not( :hover )`. Para el hover manda el ajuste del widget,
	 * que gana por especificidad.
	 */
	border-bottom-color: var(--e-global-color-jvl-boton-inactivo);
}

/*
 * Foco de teclado. El anillo del navegador se SUSTITUYE, no se elimina: quien
 * navega con teclado necesita ver donde esta.
 *
 * Antes esto ponia `outline: none` y pasaba el subrayado a blanco, pero el
 * subrayado nunca llegaba a cambiar: la regla del widget para el estado normal
 * lleva cinco clases mas un atributo (`...elementor-element-XXXX...
 * .e-n-tab-title[aria-selected="false"]:not( :hover )`) y gana por
 * especificidad a cualquier selector razonable del tema. Resultado: sin anillo
 * y sin subrayado, la pestana enfocada no se distinguia. Se corrige con un
 * contorno propio, que el widget no toca y por tanto siempre se ve.
 */
.elementor .elementor-widget-n-tabs .e-n-tab-title:focus-visible {
	outline: 2px solid var(--e-global-color-jvl-blanco);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ *
 * 4. Menu lateral: etiqueta revelada al pasar el raton
 *
 * El componente de Figma se llama "Iconos con Hover Menu V1" y lleva la
 * etiqueta a opacity 0. Otra vez "estado del ANCESTRO -> descendiente".
 *
 * En reposo la etiqueta se recorta con clip-path (esta en la clase
 * `menu-etiqueta` de Elementor, junto con su pildora blanca, el tamano y la
 * posicion). El recorte tiene un motivo doble: el texto sigue siendo el nombre
 * accesible del enlace y, a la vez, su area no recibe clics, asi que no deja
 * rectangulos invisibles pulsables sobre la pagina. Al descubrirla hay que
 * quitar el recorte ademas de la opacidad.
 *
 * Se anade :focus-visible para que quien navegue con teclado tambien la vea.
 *
 * La transicion tambien tiene que estar aqui: el esquema de Elementor solo sabe
 * transicionar `all`, y eso animaria el clip-path, con lo que la pildora se
 * desplegaria desde el centro con las esquinas cuadradas. Solo la opacidad.
 * ------------------------------------------------------------------ */

/*
 * El menu es <nav> con <ul>/<li>. Hoy el marcador no llega a pintarse porque
 * el `.e-con` de Elementor ya fuerza `display: block` en los <li>, pero
 * `list-style` no existe en el esquema de estilos y no hay forma de fijarlo
 * desde el panel: se deja aqui como salvaguarda por si ese base style cambia.
 */
.elementor .menu-lista {
	list-style: none;
}

.elementor .menu-etiqueta {
	transition: opacity 200ms ease;
}

.elementor .menu-item:hover .menu-etiqueta,
.elementor .menu-item:focus-visible .menu-etiqueta {
	opacity: 1;
	clip-path: inset(0);
}

@media (max-width: 767px) {
	.elementor .carrusel-sangrado {
		scroll-padding-inline-start: 30px;
	}

	.elementor .wall-post .wall-post-overlay {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .carrusel {
		scroll-behavior: auto;
	}

	.elementor .wall-post .wall-post-overlay,
	.elementor .menu-etiqueta {
		transition: none;
	}
}