/* Temporal: ocultar switch de modo claro/oscuro (mu-plugin ruah-theme-toggle). Borrar esta regla para volver a mostrarlo. */
.ruah-theme-toggle { display: none !important; }

/* Pastillas (clase global chip): celeste al pasar el mouse. */
.elementor .chip {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.elementor .chip:hover {
	background-color: var(--c-brand-soft, #EAF2FF);
	border-color: var(--c-brand, #187CFE);
	color: var(--c-brand-deep, #0B5BC7);
}

/* Tarjetas (card-list + card-service): de 2 en 2 en todo el sitio. El gap es 34px, así que cada tarjeta ocupa 50% - 17px. */
@media (min-width: 768px) {
	.elementor .card-list > .card-service {
		flex: 1 1 calc(50% - 17px);
	}
}

/* Home > Por qué Ruah Media: tiene el mismo fondo que Servicios, así que se quita el padding superior para no duplicar el espacio. */
.elementor .elementor-element.elementor-element-f623cf2 {
	padding-top: 0;
}

/* Secciones de Proceso (step-list) en todo el sitio: al pasar el mouse sobre un paso, su imagen cubre el fondo de toda la sección y el paso se marca en azul semitransparente. Imágenes de prueba al final. */
.elementor .section:has(.step-list) {
	isolation: isolate;
	overflow: hidden;
	transition: --proceso-bg 0s linear .6s allow-discrete;
}
.elementor .section:has(.step-list)::before {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	z-index: -1;
	background: linear-gradient(rgba(6, 10, 18, 0.62), rgba(6, 10, 18, 0.8)), var(--proceso-bg, none) center / cover no-repeat;
	opacity: 0;
	transition: opacity .4s ease .15s;
}
.elementor .section:has(.step-list):has(.step-item:hover) {
	transition-delay: 0s;
}
.elementor .section:has(.step-list):has(.step-item:hover)::before {
	opacity: 1;
	transition-delay: 0s;
}
/* Precarga de las imágenes (cada sección define las suyas abajo). */
.elementor .section:has(.step-list)::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	background-image: var(--proceso-preload, none);
}
.elementor .section:has(.step-list) :is(.h2, .h3, .small, .card-index, .eyebrow .e-paragraph-base) {
	transition: color .4s ease .15s;
}
.elementor .section:has(.step-list):has(.step-item:hover) :is(.h2, .h3, .small) {
	color: #FFFFFF;
	transition-delay: 0s;
}
.elementor .section:has(.step-list):has(.step-item:hover) :is(.card-index, .eyebrow .e-paragraph-base) {
	color: #9CC5FF;
	transition-delay: 0s;
}
.elementor .step-list > .step-item {
	isolation: isolate;
	box-sizing: border-box;
	padding: 16px 20px 20px;
}
.elementor .step-list > .step-item::before {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	z-index: -1;
	background-color: rgba(11, 91, 199, 0.7);
	opacity: 0;
	transition: opacity .3s ease;
}
.elementor .step-list > .step-item:hover::before {
	opacity: 1;
}
.elementor .section:has(.step-list) .step-list > .step-item:hover .card-index {
	color: rgba(255, 255, 255, 0.85);
}

/* Proceso: Producción de video */
.elementor .elementor-element-850d445 { --proceso-preload: url("/wp-content/uploads/2026/09/estudio-ciclorama-produccion-audiovisual-managua.jpg"), url("/wp-content/uploads/2026/09/equipo-ruah-media-toma-rocas-playa-nicaragua.jpg"), url("/wp-content/uploads/2026/09/poster-bts-dia-de-rodaje.jpg"), url("/wp-content/uploads/2026/09/equipo-ruah-media-revisando-tomas-rodaje-nicaragua.jpg"); }
.elementor .elementor-element-850d445:has(.elementor-element-dd53a21:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/estudio-ciclorama-produccion-audiovisual-managua.jpg"); }
.elementor .elementor-element-850d445:has(.elementor-element-63028ed:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/equipo-ruah-media-toma-rocas-playa-nicaragua.jpg"); }
.elementor .elementor-element-850d445:has(.elementor-element-d111a0c:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/poster-bts-dia-de-rodaje.jpg"); }
.elementor .elementor-element-850d445:has(.elementor-element-7a7d759:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/equipo-ruah-media-revisando-tomas-rodaje-nicaragua.jpg"); }

/* Proceso: Servicios */
.elementor .elementor-element-5be94bb { --proceso-preload: url("/wp-content/uploads/2026/09/equipo-produccion-video-ruah-media.jpg"), url("/wp-content/uploads/2026/09/equipo-ruah-media-toma-rocas-playa-nicaragua.jpg"), url("/wp-content/uploads/2026/09/poster-bts-dia-de-rodaje.jpg"), url("/wp-content/uploads/2026/09/estudio-grabacion-video-producto-managua-ruah-media.jpg"); }
.elementor .elementor-element-5be94bb:has(.elementor-element-873d522:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/equipo-produccion-video-ruah-media.jpg"); }
.elementor .elementor-element-5be94bb:has(.elementor-element-4b40c88:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/equipo-ruah-media-toma-rocas-playa-nicaragua.jpg"); }
.elementor .elementor-element-5be94bb:has(.elementor-element-a4128d4:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/poster-bts-dia-de-rodaje.jpg"); }
.elementor .elementor-element-5be94bb:has(.elementor-element-830321d:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/estudio-grabacion-video-producto-managua-ruah-media.jpg"); }

/* Proceso: Diseño web */
.elementor .elementor-element-9f0639a { --proceso-preload: url("/wp-content/uploads/2026/09/equipo-produccion-video-ruah-media.jpg"), url("/wp-content/uploads/2026/09/diseno-web-sitio-en-celular.jpg"), url("/wp-content/uploads/2026/09/diseno-web-sitio-en-computadora.jpg"), url("/wp-content/uploads/2026/09/diseno-web-ruah-media-hero-v2.jpg"); }
.elementor .elementor-element-9f0639a:has(.elementor-element-01ecf37:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/equipo-produccion-video-ruah-media.jpg"); }
.elementor .elementor-element-9f0639a:has(.elementor-element-d975253:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/diseno-web-sitio-en-celular.jpg"); }
.elementor .elementor-element-9f0639a:has(.elementor-element-33df4fd:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/diseno-web-sitio-en-computadora.jpg"); }
.elementor .elementor-element-9f0639a:has(.elementor-element-93d1924:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/diseno-web-ruah-media-hero-v2.jpg"); }

/* Proceso: Fotografía */
.elementor .elementor-element-8322d66 { --proceso-preload: url("/wp-content/uploads/2026/09/clase-luna-bodegon-playa-fotografia-producto-nicaragua.jpg"), url("/wp-content/uploads/2026/09/clase-luna-panuelo-sombrero-libro-fotografia-producto.jpg"), url("/wp-content/uploads/2026/09/fotografo-retrato-pareja-playa-nicaragua.jpg"), url("/wp-content/uploads/2026/09/clase-luna-modelo-panuelo-viento-sesion-fotos-playa.jpg"); }
.elementor .elementor-element-8322d66:has(.elementor-element-bda22c3:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/clase-luna-bodegon-playa-fotografia-producto-nicaragua.jpg"); }
.elementor .elementor-element-8322d66:has(.elementor-element-f32e0af:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/clase-luna-panuelo-sombrero-libro-fotografia-producto.jpg"); }
.elementor .elementor-element-8322d66:has(.elementor-element-e04a793:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/fotografo-retrato-pareja-playa-nicaragua.jpg"); }
.elementor .elementor-element-8322d66:has(.elementor-element-4c5746a:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/clase-luna-modelo-panuelo-viento-sesion-fotos-playa.jpg"); }

/* Proceso: Diseño gráfico */
.elementor .elementor-element-3bd0d19 { --proceso-preload: url("/wp-content/uploads/2026/09/biscuit-club-post-quienes-somos-diseno-grafico.jpg"), url("/wp-content/uploads/2026/09/biscuit-club-post-collage-pasteles.jpg"), url("/wp-content/uploads/2026/09/metanoia-missions-post-diseno-grafico-redes-4.jpg"), url("/wp-content/uploads/2026/09/metanoia-missions-post-diseno-grafico-redes-5.jpg"); }
.elementor .elementor-element-3bd0d19:has(.elementor-element-fa02888:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/biscuit-club-post-quienes-somos-diseno-grafico.jpg"); }
.elementor .elementor-element-3bd0d19:has(.elementor-element-d15ffb7:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/biscuit-club-post-collage-pasteles.jpg"); }
.elementor .elementor-element-3bd0d19:has(.elementor-element-5cc6b0a:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/metanoia-missions-post-diseno-grafico-redes-4.jpg"); }
.elementor .elementor-element-3bd0d19:has(.elementor-element-4deec5c:hover) { --proceso-bg: url("/wp-content/uploads/2026/09/metanoia-missions-post-diseno-grafico-redes-5.jpg"); }

/* Secciones de números (stats) en todo el sitio: fondo azul como la franja de contacto, textos en blanco, número y etiqueta centrados. */
.elementor .elementor-element.stats {
	background-color: #187CFE;
	border-color: #187CFE;
}
.elementor .elementor-element.stats .elementor-counter .elementor-counter-number-wrapper {
	color: #FFFFFF;
}
.elementor .elementor-element.stats .stat-item {
	align-items: center;
	text-align: center;
}
.elementor .elementor-element.stats .label {
	color: rgba(255, 255, 255, 0.8);
}
/* Secciones de números (stats): cursor de claqueta (37x38px) al pasar el mouse (punto de clic en el centro de la imagen). */
.elementor .elementor-element.stats {
	cursor: url("/wp-content/uploads/2026/09/cursor-claqueta-sm.png") 18 19, auto;
	cursor: -webkit-image-set(url("/wp-content/uploads/2026/09/cursor-claqueta-sm.png") 1x, url("/wp-content/uploads/2026/09/cursor-claqueta-sm@2x.png") 2x) 18 19, auto;
	cursor: image-set(url("/wp-content/uploads/2026/09/cursor-claqueta-sm.png") 1x, url("/wp-content/uploads/2026/09/cursor-claqueta-sm@2x.png") 2x) 18 19, auto;
}

/* Producción de video > Números: cada número y su texto se vuelven dorados al pasar el mouse. */
.elementor .elementor-element.elementor-element-9c019aa .stat-item :is(.elementor-counter-number-wrapper, .label) {
	background-image: linear-gradient(135deg, #FCE7A2 0%, #E9C25A 35%, #C99A2E 65%, #F2D57E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	transition: -webkit-text-fill-color .3s ease;
}
.elementor .elementor-element.elementor-element-9c019aa .stat-item .elementor-counter-number-wrapper {
	-webkit-text-fill-color: #FFFFFF;
}
.elementor .elementor-element.elementor-element-9c019aa .stat-item .label {
	-webkit-text-fill-color: rgba(255, 255, 255, 0.8);
}
.elementor .elementor-element.elementor-element-9c019aa .stat-item:hover :is(.elementor-counter-number-wrapper, .label) {
	-webkit-text-fill-color: transparent;
}

/* Pestañas de trabajo con imagen (Fotografía, Diseño gráfico, Diseño web): la imagen se ve completa, sin recortes, hasta 560px de alto. */
.elementor .split-tab-panel img.split-video:not(.split-video-landscape):not(.split-video-portrait) {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 560px;
}
@media (max-width: 767px) {
	.elementor .split-tab-panel img.split-video:not(.split-video-landscape):not(.split-video-portrait) {
		max-height: 480px;
	}
}

/* === INICIO BLOG REDISEÑO 2026-11-05 (para deshacer: borrar hasta FIN BLOG REDISEÑO) === */
/* ==========================================================
   BLOG · Ruah Media — rediseño del listado (https://ruah.media/blog/)
   Pegar en: Apariencia › Personalizar › CSS adicional
   Solo afecta la página del blog (body.ruah-blog-index).
   Los artículos se siguen cargando solos desde WordPress.
   Respeta el modo oscuro del sitio (html[data-theme="dark"]).
   ========================================================== */

body.ruah-blog-index{
  --rb-az:#187CFE;--rb-az2:#0B5BC7;--rb-sc:#1C244B;
  --rb-bg:#F4F7FD;--rb-card:#FFFFFF;--rb-line:#E4E7EE;--rb-ink:#0E1222;--rb-mut:#5A6072;--rb-chip:#EAF2FF;
}
html[data-theme="dark"] body.ruah-blog-index{
  --rb-bg:#0A0F1E;--rb-card:#121A30;--rb-line:rgba(255,255,255,.09);--rb-ink:#F1F4FA;--rb-mut:#A9B4CC;--rb-chip:rgba(24,124,254,.16);
}

/* ---------- HERO ---------- */
body.ruah-blog-index .ruah-post-hero.ruah-post-hero--index{
  min-height:0;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0E1330 0%,#16255A 55%,#1C3A8C 100%);
}
body.ruah-blog-index .ruah-post-hero.ruah-post-hero--index::before{
  content:"";position:absolute;right:-220px;top:-260px;width:760px;height:760px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(24,124,254,.5) 0%,rgba(24,124,254,0) 65%);
}
body.ruah-blog-index .ruah-post-hero-inner{padding:150px max(24px,calc((100% - 1152px)/2)) 170px}
body.ruah-blog-index .ruah-post-title{font-size:clamp(34px,5vw,60px);font-weight:800;max-width:860px}
body.ruah-blog-index .ruah-post-lead{font-size:clamp(16px,1.5vw,19px);color:#D7DEEE;max-width:620px}
body.ruah-blog-index .ruah-post-btn{transition:transform .2s,box-shadow .2s,background .2s}
body.ruah-blog-index .ruah-post-btn:hover{transform:translateY(-2px)}
body.ruah-blog-index .ruah-post-btn--primary,
body.ruah-blog-index .ruah-post-btn--primary:visited,
body.ruah-blog-index .ruah-post-btn--primary:hover{background:var(--rb-az);color:#fff;box-shadow:0 10px 24px rgba(24,124,254,.35)}
body.ruah-blog-index .ruah-post-btn--primary:hover{background:var(--rb-az2)}
body.ruah-blog-index .ruah-post-btn--dark,
body.ruah-blog-index .ruah-post-btn--dark:visited,
body.ruah-blog-index .ruah-post-btn--dark:hover{background:transparent;border:1.5px solid rgba(255,255,255,.45)}
body.ruah-blog-index .ruah-post-btn--dark:hover{background:rgba(255,255,255,.12)}
/* Temas del blog debajo de los botones */
body.ruah-blog-index .ruah-post-hero-copy::after{
  content:"Redes sociales   ·   SEO   ·   Video   ·   Inteligencia artificial   ·   Diseño web";white-space:pre;
  margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.04em;color:#9CC4FF;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14);max-width:640px;
}

/* ---------- LISTADO ---------- */
body.ruah-blog-index #content{background:var(--rb-bg)}
body.ruah-blog-index #content > .ast-container{max-width:1200px;padding:0 24px}
body.ruah-blog-index #primary{margin:0;padding:72px 0 96px}
body.ruah-blog-index .ruah-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:-140px;position:relative;z-index:2}
body.ruah-blog-index .ruah-blog-grid::after{display:none}

/* Tarjeta base */
body.ruah-blog-index .ruah-blog-card{
  gap:0;background:var(--rb-card);border:1px solid var(--rb-line);border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(28,36,75,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body.ruah-blog-index .ruah-blog-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(28,36,75,.14);border-color:rgba(24,124,254,.35)}
body.ruah-blog-index .ruah-blog-card-img{aspect-ratio:16/9;border-radius:0;transition:transform .5s ease;background-color:#1C244B}
body.ruah-blog-index .ruah-blog-card:hover .ruah-blog-card-img{transform:scale(1.04)}
body.ruah-blog-index .ruah-blog-card-body{padding:22px 24px 26px;gap:10px;flex:1;position:relative;background:var(--rb-card)}
body.ruah-blog-index .ruah-post-card-date{
  margin:0;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.08em;line-height:1.5;color:var(--rb-az);
  background:var(--rb-chip);border-radius:999px;padding:5px 12px;
}
body.ruah-blog-index .ruah-blog-card-title{font-size:20px;font-weight:700;line-height:1.25;color:var(--rb-ink)}
body.ruah-blog-index .ruah-blog-card:hover .ruah-blog-card-title{color:var(--rb-az)}
body.ruah-blog-index .ruah-blog-card-excerpt{
  font-size:15px;line-height:1.6;color:var(--rb-mut);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body.ruah-blog-index .ruah-blog-card-body::after{
  content:"Leer artículo  →";white-space:pre;margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--rb-az);transition:letter-spacing .25s;
}
body.ruah-blog-index .ruah-blog-card:hover .ruah-blog-card-body::after{letter-spacing:.02em}

/* Artículo destacado (el más reciente) */
body.ruah-blog-index .ruah-blog-card.is-featured{
  grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;align-items:stretch;
  box-shadow:0 30px 60px rgba(14,18,34,.22);border-color:transparent;
}
body.ruah-blog-index .ruah-blog-card.is-featured:hover{transform:translateY(-4px)}
body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-img{height:100%;min-height:360px;aspect-ratio:auto}
body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body{padding:44px 44px 40px;justify-content:center;gap:16px}
body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body::before{
  content:"★  Artículo más reciente";white-space:pre;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-ink);opacity:.7;
}
body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-title{font-size:clamp(24px,2.4vw,32px);font-weight:800;line-height:1.15}
body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-excerpt{font-size:16px;-webkit-line-clamp:4}
body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body::after{
  content:"Leer artículo  →";margin-top:10px;align-self:flex-start;background:var(--rb-az);color:#fff;
  padding:13px 24px;border-radius:999px;box-shadow:0 10px 24px rgba(24,124,254,.3);
}

/* Paginación */
body.ruah-blog-index .navigation.pagination .page-numbers{background:var(--rb-card);font-weight:600}

/* ---------- FRANJA FINAL ---------- */
body.ruah-blog-index .ruah-post-band{background:var(--rb-bg);padding:64px 24px 96px}
body.ruah-blog-index .ruah-post-band-inner{
  max-width:1152px;position:relative;overflow:hidden;border-radius:28px;padding:56px 56px;
  background:linear-gradient(120deg,#1C244B 0%,#16306E 100%);color:#fff;
}
body.ruah-blog-index .ruah-post-band-inner::before{
  content:"";position:absolute;right:-120px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,124,254,.55),rgba(24,124,254,0) 65%);pointer-events:none;
}
body.ruah-blog-index .ruah-post-band-inner > *{position:relative}
body.ruah-blog-index .ruah-post-band-title{color:#fff;font-weight:800;font-size:clamp(26px,3vw,38px)}
body.ruah-blog-index .ruah-post-band-copy p{color:#C9D2EA}
body.ruah-blog-index .ruah-post-band .ruah-button-invert{
  display:inline-flex;align-items:center;gap:8px;background:var(--rb-az);color:#fff;border:0;border-radius:999px;
  padding:16px 30px;font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:0 10px 24px rgba(24,124,254,.4);transition:transform .2s,background .2s;
}
body.ruah-blog-index .ruah-post-band .ruah-button-invert:hover{background:var(--rb-az2);color:#fff;transform:translateY(-2px)}
body.ruah-blog-index .ruah-post-band .ruah-button-invert::after{content:"→"}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  body.ruah-blog-index .ruah-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ruah-blog-index .ruah-blog-card.is-featured{grid-template-columns:1fr}
  body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-img{min-height:0;aspect-ratio:16/9}
  body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body{padding:30px 30px 32px}
}
@media (max-width:680px){
  body.ruah-blog-index .ruah-post-hero-inner{padding:110px 20px 140px}
  body.ruah-blog-index .ruah-post-hero-copy::after{white-space:normal;word-spacing:2px}
  body.ruah-blog-index .ruah-blog-grid{grid-template-columns:1fr;gap:20px;margin-top:-90px}
  body.ruah-blog-index #content > .ast-container{padding:0 16px}
  body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body{padding:24px 22px 26px}
  body.ruah-blog-index .ruah-post-band{padding:48px 16px 64px}
  body.ruah-blog-index .ruah-post-band-inner{padding:36px 26px;border-radius:22px}
}
/* Textos en inglés del listado (página /en/blog/) */
html:lang(en) body.ruah-blog-index .ruah-post-hero-copy::after{content:"Social media   ·   SEO   ·   Video   ·   Artificial intelligence   ·   Web design"}
html:lang(en) body.ruah-blog-index .ruah-blog-card-body::after{content:"Read article  →"}
html:lang(en) body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body::before{content:"★  Latest article"}
html:lang(en) body.ruah-blog-index .ruah-blog-card.is-featured .ruah-blog-card-body::after{content:"Read article  →"}
/* === FIN BLOG REDISEÑO === */


/* === INICIO POPUP REDISEÑO 2026-11-05 (para deshacer: borrar hasta FIN POPUP REDISEÑO) === */
/* ==========================================================
   POPUP "Envíanos un mensaje" · Ruah Media — rediseño
   Pegar en: Apariencia › Personalizar › CSS adicional
   (debajo del CSS del blog, si ya lo pegaste).
   Solo cambia el diseño: el formulario WPForms (#wpforms-2247),
   el envío y el botón de auditoría siguen funcionando igual.
   ========================================================== */

/* Fondo */
#ruah-pop .ruah-pop__bg{background:rgba(8,12,28,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rpFade .25s ease}
@keyframes rpFade{from{opacity:0}to{opacity:1}}
@keyframes rpUp{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* Tarjeta: panel azul a la izquierda + formulario a la derecha */
#ruah-pop .ruah-pop__card{
  max-width:820px;padding:40px 40px 32px 360px;border-radius:28px;
  font-family:Poppins,sans-serif;background:#fff;
  box-shadow:0 40px 90px -20px rgba(6,10,18,.6);animation:rpUp .35s cubic-bezier(.2,.8,.2,1);
}
#ruah-pop .ruah-pop__card::before{
  content:"Tu próximo proyecto empieza con un mensaje.";white-space:pre-wrap;
  position:absolute;left:0;top:0;bottom:0;width:320px;box-sizing:border-box;padding:52px 34px;
  background:
    radial-gradient(circle at 110% -10%,rgba(24,124,254,.55) 0%,rgba(24,124,254,0) 55%),
    linear-gradient(160deg,#1C244B 0%,#14205A 60%,#18307A 100%);
  color:#fff;font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em;
}
#ruah-pop .ruah-pop__card::after{
  content:"01   Leemos tu mensaje\A\A 02   Te llamamos\A\A 03   Recibís tu plan y presupuesto";white-space:pre-wrap;
  position:absolute;left:34px;bottom:40px;width:252px;
  font-size:14px;font-weight:500;line-height:1.3;color:#C9D6F2;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
}

/* Cerrar */
#ruah-pop .ruah-pop__x{top:16px;right:16px;width:40px;height:40px;background:#F1F4FA;color:#1C244B;font-size:24px;transition:background .2s,transform .2s}
#ruah-pop .ruah-pop__x:hover{background:#E1E7F3;transform:rotate(90deg)}

/* Título */
#ruah-pop .ruah-pop__t{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#0E1222;margin:0 48px 6px 0}
#ruah-pop .ruah-pop__t::after{content:"Completá el formulario y te contactamos.";display:block;margin-top:6px;font-size:14px;font-weight:400;letter-spacing:0;color:#5A6072}

/* Auditoría gratis: tarjeta destacada */
#ruah-pop .ruah-pop__audit{
  position:relative;display:flex;align-items:center;gap:12px;text-align:left;margin:20px 0 22px;
  background:#EEF5FF;color:#0E1222;border:1.5px solid #CFE2FF;border-radius:16px;padding:14px 46px 14px 16px;font-size:15px;font-weight:700;
}
#ruah-pop .ruah-pop__audit::before{
  content:"";flex:none;width:38px;height:38px;border-radius:11px;background:#187CFE center/20px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18M9 16l2 2 4-4'/%3E%3C/svg%3E");
}
#ruah-pop .ruah-pop__audit::after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#187CFE;font-size:18px;transition:right .2s}
#ruah-pop .ruah-pop__audit:hover,#ruah-pop .ruah-pop__audit:focus{background:#187CFE;border-color:#187CFE;color:#fff}
#ruah-pop .ruah-pop__audit:hover::before,#ruah-pop .ruah-pop__audit:focus::before{background-color:rgba(255,255,255,.2)}
#ruah-pop .ruah-pop__audit:hover::after,#ruah-pop .ruah-pop__audit:focus::after{color:#fff;right:14px}

/* Separador "o escribinos" */
#ruah-pop .wpforms-container::before{
  content:"o envianos tu mensaje";display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A93A8;
  justify-content:center;
  background:linear-gradient(90deg,#E4E7EE 0,#E4E7EE calc(50% - 104px),transparent calc(50% - 104px),transparent calc(50% + 104px),#E4E7EE calc(50% + 104px)) left center/100% 1px no-repeat;
}
#ruah-pop .wpforms-container{position:relative}

/* Campos: nombre y celular lado a lado */
#ruah-pop .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
#ruah-pop .wpforms-field{grid-column:1 / -1;padding:0 0 14px}
#ruah-pop [id$="-field_3-container"]{grid-column:1;grid-row:1}
#ruah-pop [id$="-field_1-container"]{grid-column:2;grid-row:1}
#ruah-pop .wpforms-field-label{font-size:13px;font-weight:600;color:#0E1222;margin:0 0 6px}
#ruah-pop .wpforms-required-label{color:#187CFE}
#ruah-pop .wpforms-form input[type=text],
#ruah-pop .wpforms-form textarea,
#ruah-pop .wpforms-form select{
  font-family:Poppins,sans-serif;font-size:15px;background-color:#F4F7FD;border:1.5px solid #E4E7EE;border-radius:12px;
  min-height:48px;padding:12px 14px;transition:border-color .2s,background-color .2s,box-shadow .2s;
}
#ruah-pop .wpforms-form select{padding-right:38px}
#ruah-pop .wpforms-form textarea{min-height:104px;resize:vertical}
#ruah-pop .wpforms-form input::placeholder,#ruah-pop .wpforms-form textarea::placeholder{color:#9AA3B5}
#ruah-pop .wpforms-form input[type=text]:focus,
#ruah-pop .wpforms-form textarea:focus,
#ruah-pop .wpforms-form select:focus{background-color:#fff;border-color:#187CFE;box-shadow:0 0 0 4px rgba(24,124,254,.14)}
#ruah-pop .wpforms-form label.wpforms-error,#ruah-pop .ruah-pop__err{font-size:12px;color:#D93025;margin-top:4px}
#ruah-pop .wpforms-form .wpforms-field input.wpforms-error,
#ruah-pop .wpforms-form .wpforms-field textarea.wpforms-error,
#ruah-pop .wpforms-form .wpforms-field select.wpforms-error{border-color:#D93025}

/* Botón */
#ruah-pop .wpforms-submit-container{padding:6px 0 0}
#ruah-pop .wpforms-form .wpforms-submit{
  font-family:Poppins,sans-serif;height:auto;padding:16px 24px;font-size:16px;font-weight:600;border-radius:999px;
  box-shadow:0 12px 26px rgba(24,124,254,.35);transition:background .2s,transform .2s;
}
#ruah-pop .wpforms-form .wpforms-submit:hover{transform:translateY(-2px)}
#ruah-pop .wpforms-submit-container::after{
  content:"Tus datos solo se usan para responder tu solicitud.";display:block;text-align:center;margin-top:12px;font-size:12px;color:#8A93A8;
}
#ruah-pop .wpforms-confirmation-container-full{padding:20px;border-radius:14px;background:#EAF7EF;color:#0E5C33}

/* Tablet y celular: sin panel lateral */
@media (max-width:860px){
  #ruah-pop .ruah-pop__card{max-width:480px;padding:0 24px 24px}
  #ruah-pop .ruah-pop__card::before{
    content:"CONTACTO";position:static;display:block;width:auto;margin:0 -24px 22px;padding:20px 24px;
    font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1;color:#9CC4FF;
  }
  #ruah-pop .ruah-pop__card::after{display:none}
  #ruah-pop .ruah-pop__x{top:9px;right:12px;width:36px;height:36px;background:rgba(255,255,255,.14);color:#fff}
  #ruah-pop .ruah-pop__x:hover{background:rgba(255,255,255,.24)}
  #ruah-pop .ruah-pop__t{font-size:24px;margin-right:0}
}
@media (max-width:480px){
  #ruah-pop{padding:12px}
  #ruah-pop .ruah-pop__card{border-radius:22px;max-height:calc(100vh - 24px)}
  #ruah-pop .wpforms-field-container{grid-template-columns:1fr}
  #ruah-pop [id$="-field_3-container"],#ruah-pop [id$="-field_1-container"]{grid-column:1 / -1;grid-row:auto}
}
/* Textos en inglés del popup */
html:lang(en) #ruah-pop .ruah-pop__card::before{content:"Your next project starts with a message."}
html:lang(en) #ruah-pop .ruah-pop__card::after{content:"01   We read your message\A\A 02   We call you\A\A 03   You get your plan and quote"}
html:lang(en) #ruah-pop .ruah-pop__t::after{content:"Fill in the form and we will contact you."}
html:lang(en) #ruah-pop .wpforms-container::before{content:"or send us your message"}
html:lang(en) #ruah-pop .wpforms-submit-container::after{content:"Your details are only used to answer your request."}
@media (max-width:860px){html:lang(en) #ruah-pop .ruah-pop__card::before{content:"CONTACT"}}
/* === FIN POPUP REDISEÑO === */