/* =============================================================
   REFUGIO INTERIOR — sistema visual
   Portado de la referencia Next.js (framer-motion + Tailwind).
   Cabecera y pie: constructor de Astra. Cuerpo: Elementor.
   Aqui vive lo que el panel no sabe expresar.
   ============================================================= */

:root {
	--ri-navy-50:  #EEF4FA;
	--ri-navy-100: #DCE9F5;
	--ri-navy-200: #B6D2EA;
	--ri-navy-300: #8CBBE0;
	--ri-navy-400: #5C9BD0;
	--ri-navy-500: #2E7CBB;
	--ri-navy-600: #1A6099;
	--ri-navy-700: #134D7E;
	--ri-navy-800: #0F3F68;
	--ri-navy-900: #0B3253;
	--ri-navy-950: #07223A;

	--ri-ink:   #0F2740;
	--ri-text:  #5A6B7C;
	--ri-mist:  #F5F8FC;
	--ri-ice:   #EEF4FA;

	--ri-wa:      #25D366;
	--ri-wa-dark: #1EBE5A;
	--ri-wa-soft: #E9F9EF;

	--ri-gold:     #C08A2E;
	--ri-gold-dot: #E0A93F;

	--ri-grad-navy: linear-gradient(135deg, #0B3253 0%, #134D7E 55%, #1A6099 100%);
	--ri-grad-ice:  linear-gradient(180deg, #FFFFFF 0%, #EEF4FA 100%);
	--ri-grad-hero: linear-gradient(180deg, #DCE9F5 0%, #EEF4FA 60%, #FFFFFF 100%);
	--ri-veil:      linear-gradient(120deg, rgba(11,50,83,.94) 0%, rgba(19,77,126,.88) 55%, rgba(26,96,153,.82) 100%);
	--ri-veil-v:    linear-gradient(180deg, rgba(19,77,126,.55) 0%, rgba(11,50,83,.85) 55%, rgba(7,34,58,.95) 100%);

	/* Sombras siempre azuladas, nunca negras. */
	--ri-sh-soft: 0 2px 8px -2px rgba(15,63,104,.08), 0 12px 32px -12px rgba(15,63,104,.12);
	--ri-sh-card: 0 1px 2px rgba(15,63,104,.04), 0 18px 40px -20px rgba(15,63,104,.25);
	--ri-sh-lift: 0 8px 16px -8px rgba(15,63,104,.18), 0 32px 64px -32px rgba(15,63,104,.35);

	--ri-ease: cubic-bezier(0.21, 0.6, 0.25, 1);
	--ri-header-h: 76px;

	--ri-r-lg: 24px;
	--ri-r:    16px;

	--ri-i-wsp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
	--ri-i-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 3.5 5.2 2 2 0 0 1 5.5 3z'/%3E%3C/svg%3E");
	--ri-i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 8.2 5.6a1.5 1.5 0 0 0 1.6 0L21 7'/%3E%3C/svg%3E");
	--ri-i-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06zm0 3.678a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 01-2.88 0 1.44 1.44 0 012.88 0z'/%3E%3C/svg%3E");
	--ri-i-fb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 011.141.195v3.325a8.623 8.623 0 00-.653-.036 26.805 26.805 0 00-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 00-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
	--ri-i-tt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

/* =============================================================
   1. BASE
   ============================================================= */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ri-header-h) + 16px);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	text-wrap: balance;
}

::selection { background: var(--ri-navy-700); color: #fff; }

/* Barra de desplazamiento a juego */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ri-navy-50); }
::-webkit-scrollbar-thumb {
	background: var(--ri-navy-200);
	border-radius: 999px;
	border: 2px solid var(--ri-navy-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--ri-navy-300); }

/* =============================================================
   2. ANTETITULO — "— TEXTO" con su rayita
   ============================================================= */
.ri-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.ri-eyebrow .elementor-heading-title::before {
	content: "";
	flex: 0 0 32px;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}
.ri-eyebrow--center .elementor-heading-title { justify-content: center; }

/* Palabra acentuada dentro de un titular */
.ri-h em, .ri-h i { font-style: italic; color: var(--ri-navy-500); font-weight: 500; }
.ri-h--light em, .ri-h--light i { color: var(--ri-navy-300); }

/* =============================================================
   3. MOVIMIENTO
   ============================================================= */

/* --- Reveal al entrar en pantalla ---
   El estado oculto solo se aplica con JS activo (html.ri-js): sin
   JavaScript el contenido se ve entero en lugar de quedar invisible. */
.ri-js .ri-rv {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(6px);
	transition:
		opacity .75s var(--ri-ease),
		transform .75s var(--ri-ease),
		filter .75s var(--ri-ease);
	will-change: opacity, transform;
}
.ri-js .ri-rv--left  { transform: translateX(-36px); }
.ri-js .ri-rv--right { transform: translateX(36px); }
.ri-js .ri-rv--down  { transform: translateY(-28px); }
.ri-js .ri-rv--none  { transform: none; }

.ri-js .ri-rv.ri-rv--in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* --- Escalonado: el indice lo pone el JS en --i --- */
.ri-js .ri-rv-group > * {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(6px);
	transition:
		opacity .7s var(--ri-ease),
		transform .7s var(--ri-ease),
		filter .7s var(--ri-ease);
	transition-delay: calc(var(--i, 0) * .12s);
	will-change: opacity, transform;
}
.ri-js .ri-rv-group.ri-rv--in > * {
	opacity: 1;
	transform: none;
	filter: none;
}

/* --- Parallax: el JS escribe --ri-y y --ri-s ---
   Se puede pedir con el atributo o con una clase ri-par-NN, que es lo que
   permite asignarlo desde el campo "Clases CSS" de Elementor. */
[data-ri-parallax],
[class*="ri-par-"] {
	transform: translate3d(0, var(--ri-y, 0px), 0) scale(var(--ri-s, 1));
	will-change: transform;
}
/* El zoom necesita recorte: si no, la foto ampliada desborda su caja. */
.ri-zoom { will-change: transform; }
.ri-clip { overflow: hidden; }
.ri-clip img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Ondas de marca --- */
.ri-swoosh { position: relative; overflow: hidden; }
.ri-swoosh > .e-con-inner,
.ri-swoosh > * { position: relative; z-index: 1; }
.ri-swoosh__layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.ri-swoosh__layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Flotacion suave --- */
@keyframes ri-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -14px, 0); }
}
.ri-float { animation: ri-float 7s ease-in-out infinite; }

/* =============================================================
   4. HOVERS
   ============================================================= */

/* Tarjeta */
.ri-card {
	background: #fff;
	border: 1px solid var(--ri-navy-100);
	border-radius: var(--ri-r-lg);
	box-shadow: var(--ri-sh-card);
	transition: transform .5s var(--ri-ease), box-shadow .5s var(--ri-ease), border-color .5s var(--ri-ease);
	will-change: transform;
}
.ri-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ri-sh-lift);
	border-color: var(--ri-navy-200);
}

/* Cuadro de icono: relleno al pasar el cursor */
.ri-icobox .elementor-icon-box-icon,
.ri-card .elementor-widget-icon-box .elementor-icon-box-icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--ri-navy-50);
	color: var(--ri-navy-700);
	transition: background .5s var(--ri-ease), color .5s var(--ri-ease), transform .5s var(--ri-ease);
}
.ri-card:hover .elementor-icon-box-icon,
.ri-icobox:hover .elementor-icon-box-icon {
	background: var(--ri-navy-700);
	color: #fff;
}
.ri-card:hover .elementor-icon-box-icon svg,
.ri-icobox:hover .elementor-icon-box-icon svg { fill: #fff; }

/* Flecha del enlace "Ver detalles" */
.ri-more .elementor-button-icon { transition: transform .4s var(--ri-ease); }
.ri-more .elementor-button:hover .elementor-button-icon { transform: translateX(6px); }

/* Subrayado que crece */
.ri-underline { position: relative; display: inline-block; }
.ri-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width .3s var(--ri-ease);
}
.ri-underline:hover::after { width: 100%; }

/* Botones: elevacion y brillo que recorre */
.ri-btn-lift .elementor-button,
.elementor-widget-button .elementor-button {
	transition: transform .4s var(--ri-ease), background-color .4s var(--ri-ease),
		color .4s var(--ri-ease), border-color .4s var(--ri-ease), box-shadow .4s var(--ri-ease);
	will-change: transform;
}
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); }

.ri-shine .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ri-shine .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(110deg, transparent, rgba(255,255,255,.25), transparent);
	transition: transform .7s var(--ri-ease);
	pointer-events: none;
}
.ri-shine .elementor-button:hover::after { transform: translateX(100%); }

/* WhatsApp */
.ri-btn-wa .elementor-button {
	box-shadow: 0 18px 36px -18px rgba(37,211,102,.95);
}
.ri-btn-wa .elementor-button:hover { background-color: var(--ri-wa-dark) !important; }
.ri-btn-wa .elementor-button-icon { transition: transform .5s var(--ri-ease); }
.ri-btn-wa .elementor-button:hover .elementor-button-icon { transform: rotate(12deg); }

/* =============================================================
   5. CABECERA
   ============================================================= */
header#masthead {
	position: sticky;
	top: 0;
	z-index: 99;
	transition: background-color .5s var(--ri-ease), box-shadow .5s var(--ri-ease);
	background: rgba(255,255,255,.7);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
header#masthead.ri-scrolled {
	background: rgba(255,255,255,.9);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 1px 0 rgba(19,77,126,.08), 0 10px 30px -20px rgba(19,77,126,.5);
}
body.admin-bar header#masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar header#masthead { top: 46px; } }

/* Movil estrecho: Astra fija el logo a width:284px en TODOS los breakpoints, asi que
   por debajo de ~420px el logo ocupaba casi todo el ancho y empujaba el boton de menu
   fuera de la pantalla. Se reduce (aspecto intacto: width auto + max-width fluido) para
   que quepan logo + hamburguesa. #masthead gana especificidad a la regla de Astra. */
@media (max-width: 420px) {
	#masthead .custom-logo-link img { width: auto; max-width: min(62vw, 210px); }
}

/* El fondo lo pinta el <header>; las capas de Astra van transparentes. */
.ast-primary-header-bar,
.ast-main-header-wrap,
#ast-desktop-header { background: transparent; border-bottom: 0; }
.ast-primary-header-bar .site-primary-header-wrap { min-height: var(--ri-header-h); }

/* Rotulo provisional: al subir el logotipo real Astra lo sustituye. */
.site-title { margin: 0; line-height: 1; }
.site-title a {
	font-family: 'Great Vibes', cursive;
	font-size: 34px;
	font-weight: 400;
	color: var(--ri-navy-800);
	transition: color .3s var(--ri-ease);
}
.site-title a:hover { color: var(--ri-navy-600); }
.site-description {
	margin: 2px 0 0 4px;
	font-family: 'Poppins', sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ri-navy-600);
	line-height: 1;
}
.ast-site-title-wrap { display: flex; flex-direction: column; }

/* Menu */
.main-header-menu > .menu-item > .menu-link {
	position: relative;
	font-family: 'Poppins', sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	color: rgba(15,39,64,.75);
	padding-inline: 14px;
	transition: color .3s var(--ri-ease);
}
.main-header-menu > .menu-item > .menu-link:hover { color: var(--ri-navy-700); }
.main-header-menu > .current-menu-item > .menu-link { color: var(--ri-navy-700); font-weight: 600; }
.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -6px;
	width: 0;
	height: 2px;
	border-radius: 999px;
	background: var(--ri-navy-600);
	transition: width .4s var(--ri-ease);
}
.main-header-menu > .current-menu-item > .menu-link::after { width: calc(100% - 28px); }

/* Botones de la cabecera */
.ri-hcta { display: flex; align-items: center; gap: 10px; }
.ast-header-html .ast-builder-html-element { line-height: 1; }
.ri-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: 'Poppins', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 21px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .3s var(--ri-ease), background-color .3s var(--ri-ease),
		color .3s var(--ri-ease), border-color .3s var(--ri-ease), box-shadow .3s var(--ri-ease);
}
.ri-btn:hover { transform: translateY(-2px); }
.ri-btn i {
	width: 16px; height: 16px; flex: 0 0 16px; display: block;
	background-color: currentColor;
	-webkit-mask: var(--ri-i-wsp) center/contain no-repeat;
	        mask: var(--ri-i-wsp) center/contain no-repeat;
	transition: transform .5s var(--ri-ease);
}
.ri-btn--ghost {
	background: transparent;
	color: var(--ri-navy-700);
	border: 1px solid var(--ri-navy-200);
}
.ri-btn--ghost:hover { color: var(--ri-navy-700); border-color: var(--ri-navy-400); box-shadow: var(--ri-sh-soft); }
.ri-btn--wsp {
	background: var(--ri-wa);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(37,211,102,.9);
}
.ri-btn--wsp:hover { background: var(--ri-wa-dark); color: #fff; }
.ri-btn--wsp:hover i { transform: rotate(12deg); }

@media (max-width: 921px) {
	.ri-hcta { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 20px 6px; }
	.ri-btn { justify-content: center; }
	.site-title a { font-size: 28px; }
}

/* =============================================================
   6. PIE
   ============================================================= */
.site-footer { background: var(--ri-navy-900); color: rgba(255,255,255,.75); }
.site-footer .site-primary-footer-wrap[data-section],
.site-footer .site-below-footer-wrap[data-section] { background: var(--ri-navy-900); }
.site-primary-footer-wrap { padding-block: 64px 46px; }
.site-primary-footer-wrap .ast-builder-grid-row {
	grid-template-columns: 1.55fr 1fr 1fr 1.35fr;
	gap: 40px;
}
.site-footer .widget-title,
.site-footer .ri-fcol__t {
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 20px;
}
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .3s var(--ri-ease); }
.site-footer a:hover { color: #fff; }
.site-footer .widget_nav_menu ul { margin: 0; padding: 0; list-style: none; }
.site-footer .widget_nav_menu li { margin: 0 0 11px; }
.site-footer .widget_nav_menu a { font-size: 14.5px; }

.ri-flogo { display: block; text-decoration: none; }
.ri-flogo__name {
	display: block;
	font-family: 'Great Vibes', cursive;
	font-size: 32px;
	color: #fff;
	line-height: 1.1;
}
.ri-flogo__tag {
	display: block;
	margin-left: 3px;
	font-family: 'Poppins', sans-serif;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ri-navy-300);
}
.ri-fbrand__txt {
	margin: 18px 0 22px;
	font-size: 14px;
	line-height: 1.75;
	max-width: 34ch;
	color: rgba(255,255,255,.7);
}
/* Astra envuelve el enlace suelto en un <p> vacio al aplicar wpautop */
.ri-fbrand p:empty { display: none; }

.ri-social { display: flex; gap: 9px; margin-top: 4px; }
.ri-social a {
	width: 38px; height: 38px; border-radius: 10px;
	background: rgba(255,255,255,.09);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .3s var(--ri-ease), transform .3s var(--ri-ease);
}
.ri-social a:hover { background: var(--ri-navy-600); transform: translateY(-2px); }
.ri-social i {
	width: 17px; height: 17px; display: block; background-color: #fff;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ri-social .ri-s--ig i { -webkit-mask-image: var(--ri-i-ig); mask-image: var(--ri-i-ig); }
.ri-social .ri-s--fb i { -webkit-mask-image: var(--ri-i-fb); mask-image: var(--ri-i-fb); }
.ri-social .ri-s--tt i { -webkit-mask-image: var(--ri-i-tt); mask-image: var(--ri-i-tt); }

.ri-fcontact { margin: 0; padding: 0; list-style: none; }
.ri-fcontact li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; font-size: 14px; }
.ri-fcontact__i {
	width: 17px; height: 17px; flex: 0 0 17px; margin-top: 3px; display: block;
	background-color: var(--ri-navy-300);
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ri-fcontact li:nth-child(1) .ri-fcontact__i { -webkit-mask-image: var(--ri-i-tel);  mask-image: var(--ri-i-tel); }
.ri-fcontact li:nth-child(2) .ri-fcontact__i { -webkit-mask-image: var(--ri-i-mail); mask-image: var(--ri-i-mail); }
.ri-fcontact a { word-break: break-word; }

.site-below-footer-wrap { border-top: 1px solid rgba(255,255,255,.12); padding-block: 0; }
.site-below-footer-wrap .ast-builder-grid-row { padding-block: 0; }
.ri-fbottom { font-family: 'Poppins', sans-serif; }
.ri-flegal {
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 26px;
	padding: 16px 0; font-size: 13px;
}
.ri-fcredit {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
	padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12);
	font-size: 12.5px; color: rgba(255,255,255,.6);
}
.site-footer .site-below-footer-wrap .ast-builder-html-element,
.site-below-footer-wrap .ast-footer-copyright { width: 100%; text-align: left; }

@media (max-width: 1024px) {
	.site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: 1fr 1fr; gap: 36px 30px; }
}
@media (max-width: 767px) {
	.site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: 1fr; gap: 34px; }
	.ri-flegal { justify-content: flex-start; gap: 16px; }
	.ri-fcredit { flex-direction: column; gap: 6px; }
	.ri-fbrand__txt { max-width: none; }
}

/* =============================================================
   7. PIEZAS DE PAGINA
   ============================================================= */

/* Bloque oscuro con velo y luz superior */
.ri-dark { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--ri-r-lg); }
.ri-dark::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--ri-veil);
}
.ri-dark::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.16), transparent 70%);
}
.ri-dark > .e-con-inner { position: relative; z-index: 1; }

/* Tarjetas de vidrio sobre banda oscura */
.ri-glass {
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.15);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-radius: var(--ri-r);
	transition: background .5s var(--ri-ease), border-color .5s var(--ri-ease), transform .5s var(--ri-ease);
}
.ri-glass:hover {
	background: rgba(255,255,255,.15);
	border-color: rgba(255,255,255,.35);
	transform: translateY(-6px);
}

/* Cita */
.ri-quote .elementor-heading-title {
	font-family: 'Bitter', serif;
	font-style: italic;
	font-weight: 400;
	line-height: 1.65;
}

/* Lista de comprobacion a dos columnas */
.ri-checks .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
@media (max-width: 600px) { .ri-checks .elementor-icon-list-items { grid-template-columns: 1fr; } }

/* Lista de canales (portada) */
.ri-contact-list .elementor-icon-list-item { align-items: flex-start; }
.ri-contact-list .elementor-icon-list-icon { margin-top: 3px; }
.ri-contact-list .elementor-icon-list-text strong {
	display: block; color: var(--ri-navy-800); font-weight: 600; font-size: 14.5px;
}
.ri-contact-list .elementor-icon-list-text span { font-size: 13px; }

/* Tarjeta de canal (pagina de contacto) */
.ri-canal { transition: border-color .5s var(--ri-ease), box-shadow .5s var(--ri-ease), transform .5s var(--ri-ease); }
.ri-canal:hover { border-color: var(--ri-navy-200); box-shadow: var(--ri-sh-soft); transform: translateY(-3px); }
.ri-canal .elementor-icon-box-title { margin: 0 0 2px; }
.ri-canal .elementor-icon-box-description { font-size: 13px; }

/* Tarjeta de precio */
.ri-precio { box-shadow: var(--ri-sh-lift); }
.ri-precio__cifra .elementor-heading-title span {
	font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
	color: var(--ri-text); letter-spacing: 0;
}
.ri-badge .elementor-heading-title { display: inline-flex; align-items: center; gap: 7px; }
.ri-badge .elementor-heading-title::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--ri-gold-dot); flex: 0 0 6px;
}
.ri-precio__filas > .e-con { border-top: 1px solid var(--ri-navy-50); }
.ri-precio__btns > .elementor-widget { flex: 1 1 0; min-width: 0; }
.ri-precio__btns .elementor-button {
	width: 100%; justify-content: center;
	font-size: 13.5px !important; padding: 13px 14px !important;
}
.ri-precio__btns > .elementor-widget:last-child .elementor-button { border: 1px solid var(--ri-navy-200); }

/* El enlace de Calendly vive dentro de un widget HTML, asi que Elementor
   no le pasa los estilos del widget de boton. Aqui se reproduce el mismo
   pill de "Agendar cita": color, forma, tipografia, icono y la elevacion
   al pasar por encima. Si maniana se cambia el boton, cambiar tambien
   estos valores. */
.ri-precio__btns .ri-btn-cal,
.ri-btn-cal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;                 /* la misma separacion icono-texto del boton */
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 13px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--ri-navy-800);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	will-change: transform;
	transition: transform .4s var(--ri-ease), background-color .4s var(--ri-ease),
		color .4s var(--ri-ease), box-shadow .4s var(--ri-ease);
}
.ri-btn-cal:visited { color: #fff; }
.ri-btn-cal:hover,
.ri-btn-cal:focus-visible {
	background: var(--ri-navy-900);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}
.ri-btn-cal:focus-visible { outline: 2px solid var(--ri-navy-300); outline-offset: 2px; }
.ri-btn-cal svg { width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; }

/* Paso numerado, con la linea punteada que los une */
.ri-num__c .elementor-heading-title {
	width: 56px; height: 56px; margin: 0 auto 4px;
	border-radius: 50%;
	border: 2px solid var(--ri-navy-300);
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	font-family: 'Bitter', serif;
}
.ri-pasos { position: relative; }
.ri-pasos::before {
	content: "";
	position: absolute;
	top: 28px; left: 12%; right: 12%;
	height: 1px;
	background: repeating-linear-gradient(to right, var(--ri-navy-200) 0 6px, transparent 6px 12px);
	z-index: 0;
}
.ri-pasos > .e-con { position: relative; z-index: 1; }
@media (max-width: 1024px) { .ri-pasos::before { display: none; } }

/* Tarjeta con fotografia */
.ri-tfoto .elementor-widget-image img { width: 100%; height: 168px; object-fit: cover; display: block; }

/* --- Carrusel arrastrable ---------------------------------------------
   Elementor gratuito no trae carrusel de tarjetas (el suyo solo admite
   imagenes sueltas), asi que esto convierte una fila normal de
   contenedores en un carrusel sin tocar su estructura: cada tarjeta se
   sigue editando en el panel como cualquier otra, y anadir o quitar
   tarjetas funciona solo. Basta con poner ri-carrusel en la fila.
   El selector lleva .e-con delante para ganarle al ancho por elemento
   que genera Elementor, que se sirve despues de esta hoja. */
.e-con.ri-carrusel {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Al pedir desbordamiento en un eje, el otro deja de ser visible: sin
	   este hueco se recortarian el levantamiento y la sombra de .ri-card. */
	padding-block: 10px 26px;
	cursor: grab;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.e-con.ri-carrusel::-webkit-scrollbar { display: none; }

/* Tres a la vista. flex-basis manda sobre el width que pone Elementor,
   asi que el 33% del panel no estorba. El hueco lo copia el JS de la
   propia fila, para que respetar lo que se ponga en el panel. */
.e-con.ri-carrusel > .e-con {
	flex: 0 0 calc((100% - 2 * var(--ri-car-hueco, 24px)) / 3);
	scroll-snap-align: start;
}
@media (max-width: 1024px) {
	.e-con.ri-carrusel > .e-con { flex-basis: calc((100% - var(--ri-car-hueco, 24px)) / 2); }
}
@media (max-width: 767px) {
	.e-con.ri-carrusel > .e-con { flex-basis: 86%; }
}

/* Mientras se arrastra: sin anclaje, para que siga al raton sin tirones. */
.e-con.ri-carrusel.ri-arrastrando {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}
.e-con.ri-carrusel.ri-arrastrando * { user-select: none; }

/* --- Velo azul sobre la foto ------------------------------------------
   Se retira al pasar el raton. Va en las tarjetas del carrusel y en
   cualquier otra que lleve la clase ri-velo. */
.ri-carrusel .ri-tfoto .elementor-widget-image,
.ri-velo .elementor-widget-image {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
}
.ri-carrusel .ri-tfoto .elementor-widget-image::after,
.ri-velo .elementor-widget-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(19,77,126,.48) 0%, rgba(11,50,83,.66) 100%);
	transition: opacity .55s var(--ri-ease);
	pointer-events: none;
}
.ri-carrusel .ri-tfoto:hover .elementor-widget-image::after,
.ri-velo:hover .elementor-widget-image::after { opacity: 0; }

/* Sin raton no hay forma de retirarlo: se deja solo el tinte de marca
   para que la fotografia siga leyendose. */
@media (hover: none) {
	.ri-carrusel .ri-tfoto .elementor-widget-image::after,
	.ri-velo .elementor-widget-image::after {
		background: linear-gradient(180deg, rgba(19,77,126,.16) 0%, rgba(11,50,83,.24) 100%);
	}
}

/* Ficha compacta */
.ri-mini .elementor-icon-box-title { margin: 0 0 1px; }
.ri-mini .elementor-icon-box-description { font-size: 12.5px; }

/* Distintivos de la cabecera de Sobre Jesus */
.ri-chips .elementor-widget-icon-box {
	background: #fff; border: 1px solid var(--ri-navy-100);
	border-radius: 999px; padding: 9px 17px;
	transition: border-color .5s var(--ri-ease), box-shadow .5s var(--ri-ease);
}
.ri-chips .elementor-widget-icon-box:hover { border-color: var(--ri-navy-300); box-shadow: var(--ri-sh-soft); }
.ri-chips .elementor-icon-box-title { margin: 0; }
.ri-chips .elementor-icon-box-description { display: none; }
.ri-chips .elementor-icon-box-wrapper { align-items: center; }

/* Linea de tiempo.
   Cada hito dibuja su punto y el tramo de linea que baja hasta el
   siguiente. Antes la linea era un ::before del contenedor con un
   desplazamiento fijo, y bastaba con que alguien tocara el relleno del
   contenedor en el panel para descuadrarla respecto a los puntos. */
.ri-linea { position: relative; }
.ri-hito { position: relative; }
.ri-hito::before {
	content: "";
	position: absolute; left: 0; top: 5px;
	width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid var(--ri-navy-300);
	background: #fff;
	z-index: 1;
	transition: background .4s var(--ri-ease), border-color .4s var(--ri-ease);
}
.ri-hito::after {
	content: "";
	position: absolute;
	left: 7px;          /* centro del punto: 15px de ancho / 2 */
	top: 20px;          /* justo debajo del punto */
	bottom: -8px;       /* solapa un poco; el punto siguiente lo tapa */
	width: 1px;
	background: var(--ri-navy-200);
}
.ri-hito:last-child::after { display: none; }
.ri-hito:hover::before { background: var(--ri-navy-600); border-color: var(--ri-navy-600); }

/* Valores numerados */
.ri-valores > .e-con { border-top: 1px solid var(--ri-navy-100); }
.ri-valor__n .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* Hueco de imagen mientras no hay foto real */
.ri-ph {
	background: linear-gradient(135deg, #DCE9F5 0%, #B6D2EA 45%, #8CBBE0 100%);
	border-radius: var(--ri-r-lg);
}

/* =============================================================
   8. FORMULARIO
   ============================================================= */
.ri-form { font-family: 'Poppins', sans-serif; }
.ri-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ri-form__f--full { grid-column: 1 / -1; }
.ri-form label {
	display: block; margin-bottom: 7px;
	font-size: 13px; font-weight: 600; color: var(--ri-navy-800);
}
.ri-form input,
.ri-form select,
.ri-form textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--ri-navy-800);
	background: var(--ri-mist);
	border: 1px solid var(--ri-navy-100);
	border-radius: var(--ri-r);
	/* Astra fija un alto a los campos y con el interlineado del cuerpo
	   el texto del desplegable quedaba cortado por abajo. */
	height: auto;
	line-height: 1.4;
	transition: border-color .3s var(--ri-ease), box-shadow .3s var(--ri-ease), background .3s var(--ri-ease);
}
.ri-form textarea { min-height: 118px; resize: vertical; }
.ri-form input::placeholder,
.ri-form textarea::placeholder { color: #9AAABA; }
.ri-form input:focus,
.ri-form select:focus,
.ri-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--ri-navy-500);
	box-shadow: 0 0 0 3px rgba(46,124,187,.14);
}
.ri-form select {
	appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B7C' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center; background-size: 11px;
	padding-right: 38px;
}
.ri-form__send {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
	margin-top: 4px;
	padding: 15px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--ri-navy-700);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 18px 36px -20px rgba(19,77,126,.95);
	transition: background .4s var(--ri-ease), transform .4s var(--ri-ease);
}
.ri-form__send:hover { background: var(--ri-navy-800); transform: translateY(-2px); }
/* Brillo que recorre el boton, igual que en la referencia */
.ri-form__send::after {
	content: "";
	position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(110deg, transparent, rgba(255,255,255,.25), transparent);
	transition: transform .7s var(--ri-ease);
	pointer-events: none;
}
.ri-form__send:hover::after { transform: translateX(100%); }
.ri-form__send[disabled] { opacity: .65; cursor: progress; transform: none; }

.ri-form__note {
	margin: 14px 0 0; text-align: center;
	font-size: 12.5px; font-style: italic;
	color: var(--ri-navy-600); line-height: 1.6;
}
.ri-form__msg { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; text-align: center; }
.ri-form__msg:empty { display: none; }
.ri-form__msg--ok { color: var(--ri-wa-dark); font-weight: 600; }
.ri-form__msg--error { color: #C0392B; font-weight: 500; }
.ri-form__err { border-color: #C0392B !important; background: #FFF6F5 !important; }
.ri-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) { .ri-form__grid { grid-template-columns: 1fr; } }

/* =============================================================
   9. MOVIMIENTO REDUCIDO
   El JS ademas comprueba matchMedia y no aplica transformaciones.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.ri-js .ri-rv,
	.ri-js .ri-rv-group > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
	[data-ri-parallax] { transform: none !important; }
	.ri-float { animation: none !important; }
}

/* =============================================================
   9. PAGO CON MERCADO PAGO
   El boton "Pagar cita" es un widget de boton normal de Elementor; esto
   solo cubre el estado de carga mientras se arma la preferencia y el
   aviso si el pago en linea todavia no esta configurado (ver
   inc/mercadopago.php). El <a> de Elementor no tiene "disabled" real, asi
   que el bloqueo del clic lo hace la clase, no el atributo.
   ============================================================= */
.ri-mp-cargando { opacity: .65; cursor: progress; }

.ri-mp-aviso {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	max-width: 300px;
	background: #fff;
	border: 1px solid var(--ri-navy-100);
	border-radius: var(--ri-r);
	box-shadow: var(--ri-sh-lift);
	padding: 16px 34px 16px 18px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s var(--ri-ease), transform .4s var(--ri-ease);
}
.ri-mp-aviso--en { opacity: 1; transform: none; }
.ri-mp-aviso p { margin: 0 0 8px; font-size: 13.5px; color: var(--ri-ink); line-height: 1.5; }
.ri-mp-aviso a { font-size: 13px; font-weight: 600; color: var(--ri-navy-600); text-decoration: none; }
.ri-mp-aviso a:hover { text-decoration: underline; }
.ri-mp-aviso__cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	color: var(--ri-text);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
@media (max-width: 480px) {
	.ri-mp-aviso { left: 16px; right: 16px; max-width: none; }
}