/*
Theme Name: Astra Child
Theme URI: https://www.wpastra.com/
Template: astra
Author: Xulum.com
Author URI: https://www.xulum.com
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme.
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 1.0.0.1778165294
Updated: 2026-05-07 14:48:14

*/


/* ---------------------------------------------------------------------------
   "Mi propósito: la anticipación como bienestar"

   El título estaba maquetado como <h4> dentro del widget de texto, lo que
   rompía la jerarquía (era el primer encabezado de la página y aparecía antes
   que cualquier H2). Al pasarlo a <h2> heredó el tamaño de H2 del tema: 48px en
   escritorio —más grande que el H1 del hero, que mide 42px— y 43.8px en mobile,
   donde ocupaba cuatro líneas.

   Se mantiene el <h2> por semántica y se le devuelve un tamaño acorde: el mismo
   que usan las otras secciones del sitio. Va en una columna de 540px, así que
   toma 32px y no los 40px de los títulos a todo el ancho.
   --------------------------------------------------------------------------- */
.elementor-element-ef22f9b h2 {
	font-size: 32px;
	line-height: 1.25;
	margin-bottom: 18px;
}

@media (max-width: 921px) {
	.elementor-element-ef22f9b h2 {
		font-size: 21px;
		line-height: 1.3;
		margin-bottom: 14px;
	}
}

/* ---------------------------------------------------------------------------
   Colores de hover / activo en el header transparente

   La paleta global de Astra quedó con los valores de la plantilla de demostración:
   --ast-global-color-0 es #060097 (índigo) y --ast-global-color-1 era #c10fff
   (violeta). El violeta se corrigió en el Customizer, pero el índigo se usa en
   32 reglas más, así que en vez de reemplazarlo se pisa sólo donde se ve: el
   menú sobre el hero oscuro, donde además quedaba casi invisible.

   El body en el selector sube la especificidad lo justo para ganarle a la regla
   de Astra sin recurrir a !important.

   Los tres estados van declarados explícitamente y en orden de prioridad
   creciente, para no depender de los valores por defecto del tema:
   normal (0,4,1) < activo (0,5,1) < hover (0,5,1 pero después en el archivo).

   Nota sobre el activo: cuatro de los cinco ítems apuntan a anclas del home
   (/#quien-soy, /#servicios, /#experiencia, /#faqs). Como todas resuelven a la
   misma URL, WordPress les pone current-menu-item a las cuatro al mismo tiempo.
   El scrollspy de ui.php limpia esa marca y la deja sólo en la sección visible.
   --------------------------------------------------------------------------- */

/* normal: blanco */
body.ast-theme-transparent-header .main-header-menu .menu-item > .menu-link {
	color: #fff;
}

/* sección o página actual: dorado */
body.ast-theme-transparent-header .main-header-menu .menu-item.current-menu-item > .menu-link,
body.ast-theme-transparent-header .main-header-menu .menu-item.current-menu-ancestor > .menu-link {
	color: #C2A056;
}

/* hover: dorado, y gana sobre los dos anteriores */
body.ast-theme-transparent-header .main-header-menu .menu-item:hover > .menu-link,
body.ast-theme-transparent-header .main-header-menu .menu-item:hover > .ast-menu-toggle {
	color: #C2A056;
}

/* ---------------------------------------------------------------------------
   Decoración del hero: flecha "Conocé mi propósito" + sello rotativo.

   Antes vivían como widgets HTML dentro de Elementor y se borraban cada vez que
   se guardaba el home desde el editor. Ahora los inyecta ui.php directamente en
   el hero, así que ya no dependen del contenido de Elementor. El markup se crea
   por JS; acá van sólo los estilos.
   --------------------------------------------------------------------------- */

/* flecha */
.la-hero-scroll{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.75);text-decoration:none;z-index:5;transition:color .2s cubic-bezier(.4,0,.2,1)}
.la-hero-scroll:hover,.la-hero-scroll:focus,.la-hero-scroll:focus-visible{color:#fff}
.la-hero-scroll:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:3px}
.la-hero-scroll svg{width:20px;height:20px;animation:laFlotar 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes laFlotar{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* sello rotativo · tamaño, opacidad y velocidad los define el panel Hero / Sello
   vía las variables --la-sello-* (con defaults por si el panel no las setea) */
.la-sello{position:absolute;top:50%;right:5.5%;transform:translateY(-50%);width:clamp(150px,17vw,var(--la-sello-tam,250px));aspect-ratio:1;pointer-events:none;opacity:var(--la-sello-op,.85);z-index:4}
.la-sello__svg{display:block;width:100%;height:100%;overflow:visible}
.la-sello__ring{transform-origin:100px 100px;animation:laSelloGirar var(--la-sello-vel,26s) linear infinite}
@keyframes laSelloGirar{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
	.la-hero-scroll svg,.la-sello__ring{animation:none}
}

/* ---------------------------------------------------------------------------
   Marquee de instituciones (dentro de la Galería)

   Tira de logos que se desplaza de derecha a izquierda en loop continuo, con
   desvanecido en los laterales (mask-image). Va en lugar del párrafo descriptivo
   de la galería (.la-gal__lead, que se oculta). Los logos —PNG negro sobre
   transparente— se recolorean a dorado usando cada PNG como máscara sobre un
   fondo del color de marca (var --la-marcas-gold); van atenuados por defecto y
   en dorado sólido al pasar el mouse, igual que las marcas de xulum.com. El track
   tiene el set duplicado y se traslada -50%, así que el corte es invisible. Se
   pausa al pasar el mouse para poder apuntar a un logo.
   El markup lo inyecta ui.php (la_ui_marcas_galeria).
   --------------------------------------------------------------------------- */
.la-gal .la-gal__lead{display:none} /* reemplazado por el marquee de escudos */

.la-marcas{--la-marcas-gold:#C2A056;width:100%;max-width:100%;min-width:0;margin:6px auto 34px}
.la-marcas__mask{width:100%;overflow:hidden}
/* MODO QUIETO: fila centrada, sin desplazamiento (para no competir con el
   movimiento de las fotos de abajo). Los escudos van en dorado sólido.
   Para volver al carrusel en movimiento, restaurar el bloque animado (ver más
   abajo, comentado) y quitar este. */
.la-marcas__track{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;margin:0;padding:0;list-style:none;gap:8px 0}
.la-marcas__item:nth-child(n+7){display:none} /* se muestra un solo set de 6 */
.la-marcas__item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 40px}
/* PNG negro usado como máscara → se ve el fondo dorado con la forma del logo */
.la-marcas__logo{display:block;background:var(--la-marcas-gold);opacity:1;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* --- Carrusel en movimiento (desactivado; descomentar para reactivarlo) ---
.la-marcas__mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.la-marcas__track{justify-content:flex-start;flex-wrap:nowrap;width:max-content;gap:0;animation:laMarcasMover 34s linear infinite;will-change:transform;transform:translateZ(0)}
.la-marcas__item:nth-child(n+7){display:flex}
.la-marcas__mask:hover .la-marcas__track{animation-play-state:paused}
.la-marcas__logo{opacity:.55;transition:opacity .3s ease}
.la-marcas__item:hover .la-marcas__logo{opacity:1}
@keyframes laMarcasMover{to{transform:translateX(-50%)}}
--- fin carrusel en movimiento --- */

@media (max-width:921px){
	.la-marcas{margin-bottom:28px}
	.la-marcas__item{padding:0 22px}
}
/* mobile: la flecha se oculta (la sección siguiente ya se ve); el sello baja a la
   esquina inferior derecha, más chico, sobre la foto */
@media (max-width:921px){
	.la-hero-scroll{display:none}
	.la-sello{width:120px;top:auto;bottom:58px;right:14px;transform:none;opacity:.8}
}