/*
Theme Name: RG Studio
Theme URI: https://rgstudio.com.mx
Template: rgstudio-base-wp-tema
Author: VOO Solutions
Author URI: https://voo-solutions.com
Description: Child theme oficial de RG Studio (6a marca del holding, Fase 2) sobre el tema padre rgstudio-base-wp-tema. Tokens de marca tomados del catalogo #07 Paleta_Color_RGStudio / #08 Tipografia_RGStudio (v1.0 validado por Jorge, 10-sep-2026), sin valores inventados.
Version: 0.1.9
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rgstudio
*/

/* ==========================================================================
   DESIGN TOKENS -- sobreescribe los del padre con los valores oficiales de
   RG Studio. Fuente de verdad: 07_Paleta_Color_RGStudio.md (color de marca
   #FF0000 + 5 neutros de interfaz: Tinta, Papel, Blanco, Linea, Muted) y
   08_Tipografia_RGStudio.md (Livvic, unica tipografia de cuerpo/sitio;
   Big Shoulders Display y JetBrains Mono son EXCLUSIVAS del logotipo).
   Ningun valor se inventa.
   ========================================================================== */
:root{
  --ink:#141414;              /* Tinta -- texto e isotipo/wordmark (#07) */
  --ink-soft:#737373;         /* Muted del #07 (unico gris de texto secundario) */
  --paper:#F5F5F5;            /* Papel (#07) */
  --paper-raised:#FFFFFF;     /* Blanco (#07) */
  --line:#DCDCDC;             /* Linea (#07) */
  --muted:#737373;            /* Muted (#07) */
  --primary:#141414;          /* Tinta como base oscura de interfaz: hero, nav al
                                 hacer scroll, footer y bloques de contraste.
                                 DECISION de esta sesion (el #07 solo define el
                                 rojo como "color de marca / acento UI" y Tinta
                                 como neutro): el rojo se reserva para acento. */
  --primary-ink:#FFFFFF;
  --accent:#FF0000;           /* Rojo de marca (#07) */
  --accent-hover:color-mix(in srgb, var(--accent) 78%, var(--ink) 22%);
  --accent-ink:#FFFFFF;       /* Blanco sobre rojo: 4.0:1 -- pasa AA solo en texto
                                 grande/negrita (botones); es la combinacion ya
                                 vigente y verificada en rgstudio.com.mx. Tinta
                                 sobre rojo daria 4.6:1 si se quisiera AA estricto. */
  --font-heading:'Livvic', Arial, sans-serif;
  --font-body:'Livvic', Arial, sans-serif;
  --font-mono:'Livvic', Arial, sans-serif;  /* el catalogo no define fuente mono para sitio */
}

/* Fix preventivo holding-wide: fondo del Hero = Primario, evita el destello
   gris antes de que cargue el video. */
.rgb-hero{background:var(--primary);}

/* ==========================================================================
   Contenido de la pagina "Inicio" -- secciones ancladas dentro de UN solo
   the_content(). Anchors: #servicios #portafolio #nosotros #ecosistema
   #contacto (los de la home actual: #rg-services/#rg-portfolio/#rg-about/
   #rg-contact, renombrados al patron del holding).
   ========================================================================== */
#rgb-main section[id]{padding:72px 0;border-top:1px solid var(--line);scroll-margin-top:var(--nav-height);}
#rgb-main section[id]:first-of-type{border-top:none;padding-top:0;}
#rgb-main section[id] h2{font-family:var(--font-heading);font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px;color:var(--ink);}
#rgb-main section[id] p{line-height:1.65;color:var(--ink);max-width:760px;}
#rgb-main section[id] p + p{margin-top:14px;}
#rgb-main .rgstudio-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:10px;}
#rgb-main .rgstudio-lead{font-size:1.12rem;color:var(--ink-soft);max-width:760px;}
#rgb-main .rgstudio-cta{display:inline-block;margin-top:24px;padding:12px 26px;background:var(--accent);color:var(--accent-ink);font-weight:700;border-radius:var(--radius);transition:background var(--transition-base), transform var(--transition-base);}
#rgb-main .rgstudio-cta:hover{background:var(--accent-hover);transform:translateY(-2px);}

/* Servicios -- fondo oscuro (Tinta) + watermark NEGATIVO del isotipo con
   parallax estatico (mismo tratamiento validado en Smidr/Verkthing: el isotipo
   queda fijo al viewport y la seccion, con clip-path, solo lo deja ver dentro
   de su caja). El PNG viaja dentro del tema (assets/img/isotipo-negativo.png). */
#servicios{
	position:relative;
	isolation:isolate;
	clip-path:inset(0 -100vmax);
	background:var(--ink);
	box-shadow:0 0 0 100vmax var(--ink);
}
#servicios::before{
	content:"";
	position:fixed;
	top:50%;
	left:50%;
	width:min(120vmin, 1100px);
	aspect-ratio:1/1;
	transform:translate(-50%,-50%);
	background:url("assets/img/isotipo-negativo.png") center/contain no-repeat;
	opacity:.09;
	z-index:-1;
	pointer-events:none;
}
#rgb-main section#servicios h2,
#rgb-main section#servicios p{color:var(--paper-raised);}
#rgb-main section#servicios .rgstudio-lead{color:rgba(255,255,255,.72);}
#rgb-main section#servicios .rgb-showcase{background:transparent;}
@media (prefers-reduced-motion:reduce){
	#servicios::before{position:absolute;}
}

/* Portafolio -- fondo claro, capturas de sitios como tarjetas rectangulares. */
#portafolio{background:var(--paper-raised);box-shadow:0 0 0 100vmax var(--paper-raised);clip-path:inset(0 -100vmax);}
/* Las imagenes destacadas del portafolio son LOGOS de cliente (PNG 447x447 de fondo variable), no capturas: se muestran completos (contain) sobre fondo blanco con aire alrededor. */
#portafolio .rgb-showcase__item img{width:100%;height:100%;object-fit:contain;padding:14%;box-sizing:border-box;border-radius:0;background:var(--paper-raised);}
#portafolio .rgb-showcase-lightbox__frame img{object-fit:contain;background:var(--paper-raised);padding:6%;box-sizing:border-box;}

/* Nosotros -- dos columnas: texto (izquierda) + logotipo FullColor (derecha). */
#nosotros{background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);}
.rgstudio-nosotros-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;margin-top:28px;}
.rgstudio-nosotros-col--logo{display:flex;justify-content:center;align-items:center;}
.rgstudio-nosotros-logo{width:100%;max-width:360px;height:auto;}
.rgstudio-pilares{display:grid;gap:14px;margin:26px 0 0;list-style:none;counter-reset:rgstudio-pilar;max-width:760px;}
.rgstudio-pilares li{position:relative;padding-left:52px;}
.rgstudio-pilares li::before{
  counter-increment:rgstudio-pilar;content:counter(rgstudio-pilar);
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--ink);color:var(--paper-raised);font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:background .25s, transform .25s;
}
.rgstudio-pilares li:hover::before{background:var(--accent);transform:scale(1.12);}
.rgstudio-pilares strong{display:block;color:var(--ink);margin-bottom:2px;}
@media (max-width:960px){
	.rgstudio-nosotros-grid{grid-template-columns:1fr;gap:32px;}
	.rgstudio-nosotros-col--logo{order:-1;}
	.rgstudio-nosotros-logo{max-width:260px;}
}

/* Contacto -- texto guia antes del shortcode [rgb_form]. */
#rgb-main .rgb-contacto-nota{max-width:760px;margin:0 auto 20px;color:var(--ink-soft);font-size:.95rem;}

/* Canvas del efecto "Fuerza y Orbita" (hero-particles.js): hermano de
   .rgb-hero__scrim, overlay aditivo sobre el video/gradiente. */
.rgb-hero .rgstudio-hero-particles{position:absolute;inset:0;z-index:1;mix-blend-mode:screen;pointer-events:none;}

/* ==========================================================================
   Hero de ficha (25-sep-2026) -- puerto del patron ya validado en VOO
   (Ronda 11) y Hugr (Ronda 8): .rgb-hero--ficha mas bajo que el Hero de
   portada, fondo degradado Acero->Tinta (paleta unificada de marca, no
   una imagen/video por ficha), breadcrumb/eyebrow con contraste claro
   sobre fondo oscuro, grid de 2 columnas debajo (contenido / imagen
   destacada con hover, si la ficha tiene una -- DEACERO hoy no, el grid
   se degrada solo a 1 columna). Ver single-ficha.php de este Child.
   ========================================================================== */
.rgb-hero--ficha{min-height:min(54vh,480px);}
.rgb-hero--ficha .rgb-hero__bg{background:linear-gradient(160deg, var(--primary) 0%, var(--ink) 100%);}
.rgb-hero--ficha .rgb-hero__watermark img{filter:brightness(0) invert(1);}

.rgb-hero .rgb-breadcrumb{justify-content:center;margin-bottom:22px;}
.rgb-hero .rgb-breadcrumb,
.rgb-hero .rgb-breadcrumb a,
.rgb-hero .rgb-breadcrumb__current{color:rgba(255,255,255,.82);}
.rgb-hero .rgb-breadcrumb__sep{color:rgba(255,255,255,.35);}
.rgb-hero .rgb-breadcrumb a:hover,
.rgb-hero .rgb-breadcrumb__back:hover{color:var(--accent);}

.rgb-hero__eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:14px;}

.rgb-ficha__content{max-width:760px;}
.rgb-ficha__content > p{font-size:1.05rem;line-height:1.7;color:var(--ink);margin-bottom:22px;}

.rgb-ficha__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start;}
@media (max-width:900px){
	.rgb-ficha__grid{grid-template-columns:1fr;gap:40px;}
}
.rgb-ficha__logo{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:12px;}
.rgb-ficha__logo-icon{width:150px;height:150px;aspect-ratio:1/1;border-radius:0;object-fit:contain;padding:28px;background:radial-gradient(circle closest-side, var(--primary) 99%, transparent 100%);border:0;box-sizing:border-box;margin-bottom:22px;transition:transform .3s, filter .3s;}
.rgb-ficha__logo:hover .rgb-ficha__logo-icon{transform:scale(1.06);filter:drop-shadow(0 10px 18px rgba(20,20,20,.32));}
.rgb-ficha__logo-name::before{content:"";display:block;width:48px;height:2px;background:var(--accent);margin:0 auto 16px;}
.rgb-ficha__logo-name{font-family:var(--font-heading);font-size:1.5rem;color:var(--primary);letter-spacing:.02em;}

/* ==========================================================================
   #ecosistema -- diagrama radial "RG Studio Orbit" (25-sep-2026, Jorge:
   "convertir la grid simple de 'Rol en el ecosistema' al diagrama
   radial/orbit ya usado en VOO Solutions"). Mismo mecanismo CSS puro que
   .voo-orbit (VOO Solutions) y .hugr-orbit (Hugr Innovations) -- rotate+
   translate+contra-rotate, sin JS ni SVG. Namespaced como
   --rgstudio-orbit-* (no se reusan los nombres de otra marca porque cada
   Child es un tema independiente, nunca conviven en la misma pagina), pero
   la mecanica es identica y ya trae corregidos los 2 bugs documentados
   holding-wide: centrar la caja en su punto de anclaje ANTES de rotar
   (translate(-50%,-50%)), y overflow:hidden contra aspect-ratio con texto
   de 2 lineas.

   Contenido real: RG Studio Supply al centro (es la pagina de RG Studio),
   las otras 6 marcas del holding alrededor cada 60 grados -- mismos
   7 roles/funciones YA publicados en la grid simple que este bloque
   reemplaza (VOO Solutions/Gobernanza, RG Studio/Monetizacion,
   Alfroði Learning Hub/Formacion, Meraki Cultural/Operacion cultural,
   Smiðr Consulting/Optimizacion, Hugr Innovations/Innovacion), sin dato
   nuevo -- solo el layout cambia de grid a radial. */
@property --rgstudio-orbit-spin{
	syntax:'<angle>';
	inherits:true;
	initial-value:0deg;
}
@keyframes rgstudio-orbit-spin{
	to{--rgstudio-orbit-spin:360deg;}
}
.rgstudio-orbit{
	position:relative;
	width:min(680px,92vw);
	aspect-ratio:1/1;
	margin:56px auto 24px;
	--rgstudio-orbit-spin:0deg;
	animation:rgstudio-orbit-spin 90s linear infinite;
}
.rgstudio-orbit:hover{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
	.rgstudio-orbit{animation:none;}
}
.rgstudio-orbit::before{
	content:"";
	position:absolute;
	inset:13%;
	border:1px dashed var(--line);
	border-radius:50%;
}
.rgstudio-orbit__center{
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:34%;
	aspect-ratio:1/1;
	border-radius:50%;
	background:var(--primary);
	color:var(--primary-ink);
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;
	padding:6%;
	box-sizing:border-box;
	box-shadow:0 12px 32px rgba(20,20,20,.32);
	z-index:2;
}
.rgstudio-orbit__center .rgstudio-orbit__role{color:var(--accent);}
.rgstudio-orbit__center .rgstudio-orbit__title{color:var(--paper) !important;}
.rgstudio-orbit__node{
	position:absolute;
	top:50%;left:50%;
	width:30%;
	aspect-ratio:1/1;
	margin:-15% 0 0 -15%;
	overflow:hidden;
	--rgstudio-node-scale:1;
	/* --rgstudio-angle se fija inline por nodo en el markup (0deg, 60deg,
	   120deg... 300deg -- 6 nodos a 60 grados). */
	transform:rotate(calc(var(--rgstudio-angle) + var(--rgstudio-orbit-spin))) translate(124%) rotate(calc(-1 * (var(--rgstudio-angle) + var(--rgstudio-orbit-spin)))) scale(var(--rgstudio-node-scale));
	border-radius:50%;
	background:var(--paper-raised);
	border:1px solid var(--line);
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;
	padding:5%;
	box-sizing:border-box;
	box-shadow:0 4px 14px rgba(0,0,0,.08);
	transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .3s ease;
}
.rgstudio-orbit__node:hover{
	--rgstudio-node-scale:1.14;
	border-color:var(--accent);
	box-shadow:0 26px 54px rgba(0,0,0,.28), 0 0 0 3px var(--accent) inset;
	z-index:3;
}
.rgstudio-orbit__role{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-hover);margin-bottom:2px;line-height:1.15;}
.rgstudio-orbit__title{font-family:var(--font-heading);font-size:.86rem;font-weight:700;margin:0;color:var(--ink);line-height:1.15;}

@media (max-width:640px){
	.rgstudio-orbit{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;margin:24px 0;}
	.rgstudio-orbit::before{display:none;}
	.rgstudio-orbit__center,.rgstudio-orbit__node{position:static;transform:none;margin:0;width:100%;aspect-ratio:auto;border-radius:14px;padding:18px;}
}

/* ==========================================================================
   CORTINA ECOSISTEMA/CONTACTO (25-sep-2026, Jorge: "revierte la decision de
   NO construir cortina -- aplicar el mismo parallax horizontal + watermark
   con fade que el resto del holding"). Misma tecnica holding-wide que VOO
   Solutions/Hugr Innovations (sticky + margen negativo medido en runtime,
   ver assets/js/ecosistema-contacto-curtain.js -- puerto directo de la
   version ya corregida de Hugr, Ronda 10, con los 2 fixes de progreso
   (phaseBShare) y de margin-top (cancela hContacto, no el propio alto) ya
   incluidos). Igual que en Hugr, el alto de #ecosistema (ahora con el
   diagrama .rgstudio-orbit) NO se fija en vh -- se mide en runtime, porque
   es bastante mas alto y variable que un 100vh fijo.
   ========================================================================== */
.rgstudio-contacto-slide-in > h2,
.rgstudio-contacto-slide-in > p{
	text-align:center;
}
.rgstudio-contacto-slide-in > p{
	margin-bottom:28px;
}

/* Isotipo en watermark fijo, muy tenue, encima del fondo claro de
   #contacto -- inyectado por rgstudio_contacto_watermark() (functions.php)
   como PRIMER hijo de la seccion, HERMANO de (y antes que)
   .rgstudio-contacto-slide-in, por eso no hereda su transform/opacity de
   slide-in. */
.rgstudio-contacto-watermark{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:34%;
	max-width:340px;
	max-height:60%;
	height:auto;
	opacity:.9;
	pointer-events:none;
	object-fit:contain;
}
@media (max-width:960px){
	.rgstudio-contacto-watermark{
		display:none;
	}
}

@media (min-width:961px){
	.rgstudio-curtain-stack{
		position:relative;
	}
	.rgstudio-curtain-stack #contacto{
		position:sticky;
		top:0;
		min-height:100vh;
		z-index:1;
		margin:0 !important;
		padding-top:196px !important;
		padding-bottom:80px;
	}
	.rgstudio-curtain-stack #ecosistema{
		position:relative;
		z-index:2;
		margin-top:0;
		/* Fondo opaco explicito -- Jorge (25-sep-2026): la seccion se veia
		   "traslucida" durante el scroll de la cortina. Causa real:
		   #ecosistema no tenia background propio (rgba(0,0,0,0), confirmado
		   con getComputedStyle en vivo) -- al deslizarse con z-index:2 sobre
		   #contacto (sticky, z-index:1) detras, el contenido de Contacto se
		   veia parcialmente a traves de los huecos entre los nodos del
		   orbit. Un fondo solido aqui (mismo tono que el body, --paper)
		   soluciona la ocultacion sin alterar el aspecto visual normal
		   fuera de la cortina (--paper es igual al fondo de pagina). */
		background:var(--paper);
		box-shadow:0 0 0 100vmax var(--paper);
		clip-path:inset(0 -100vmax);
	}
	.rgstudio-contacto-slide-in{
		display:block;
		transform:translate3d(60%,0,0);
		opacity:0;
		pointer-events:none;
		will-change:transform, opacity;
	}
	.rgstudio-contacto-slide-in .rgb-crm-form{
		margin-left:auto;
		margin-right:auto;
	}
	.rgstudio-contacto-slide-in.is-revealed{
		pointer-events:auto;
	}
	.rgb-footer{
		position:relative;
		z-index:3;
	}
}

@media (max-width:960px){
	.rgstudio-curtain-stack{
		display:flex;
		flex-direction:column;
	}
	.rgstudio-curtain-stack #ecosistema{
		order:1;
	}
	.rgstudio-curtain-stack #contacto{
		order:2;
	}
}

/* ==========================================================================
   Logotipo del footer -- regla holding-wide (Jorge, 28-sep-2026): variante
   Negativo + 84px (el padre trae 56px por defecto, compartido).
   ========================================================================== */
.rgb-footer__logo img{height:84px;}
/* Footer con el principal A (vertical): mas alto que los 84px de los logos horizontales para que R3G477 sea legible */
.rgb-footer__logo img[src*="logo-principal-a-negativo"]{height:128px;width:auto;}

/* Logo del nav: logotipo en linea (isotipo | rgstudio | R3G477, relacion ~7:1). El padre fija 36px. */
.rgb-nav__brand img{height:44px;width:auto;max-width:100%;}
@media (max-width:640px){.rgb-nav__brand img{height:auto;width:min(230px,58vw);}}

/* ==========================================================================
   Servicios: iconos (PNG transparentes, solo el trazo) sobre circulo Tinta --
   card cerrada, imagen del lightbox e icono lateral de la ficha de un
   servicio. Se acota a servicios: las fichas de PORTAFOLIO usan capturas de
   sitios (rectangulares) que un circulo recortaria.
   ========================================================================== */
#servicios .rgb-showcase__item img{
	box-sizing:border-box;display:block;
	width:64% !important;height:auto !important;aspect-ratio:1/1;
	margin:18% auto !important;padding:15%;
	object-fit:contain;border-radius:0;
	/* circulo pintado como fondo (no border-radius): con border-radius + padding el navegador recorta el CONTENIDO al radio interior y se comian las esquinas del icono */
	background:radial-gradient(circle closest-side, var(--accent) 99%, transparent 100%);
}
/* El lightbox del Showcase se mueve al <body>: ya no cuelga de #servicios. El JS
   (showcase-lightbox-more.js) marca data-rgstudio-src con la seccion de origen. */
.rgb-showcase-lightbox[data-rgstudio-src="servicios"] .rgb-showcase-lightbox__frame img,
#servicios .rgb-showcase-lightbox__frame img{
	box-sizing:border-box;display:block;aspect-ratio:1/1;
	width:min(300px,62vw) !important;height:auto !important;max-height:48vh !important;
	margin:0 auto;padding:17%;object-fit:contain;
	background:radial-gradient(circle closest-side, var(--ink) 99%, transparent 100%);border:0;border-radius:0 !important;
	transition:transform .3s, filter .3s;
}
.rgb-showcase-lightbox[data-rgstudio-src="servicios"] .rgb-showcase-lightbox__frame img:hover{transform:scale(1.06);filter:drop-shadow(0 10px 18px rgba(20,20,20,.32));}
.rgstudio-showcase-lightbox__more{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:700;color:var(--accent);}
.rgstudio-showcase-lightbox__more:hover{text-decoration:underline;}
.ficha_tipo-proyecto .rgb-ficha__logo-icon{width:220px;height:220px;aspect-ratio:1/1;border-radius:var(--radius);object-fit:contain;padding:18px;box-sizing:border-box;background:var(--paper-raised);border:1px solid var(--line);}

/* ==========================================================================
   Hero de portada: el titulo "RG Studio" se sustituye visualmente por el
   logotipo principal B negativo (isotipo + rgstudio/R3G477). El <h1> conserva
   el texto en el DOM (accesibilidad/SEO): se oculta con font-size:0 y el
   logo se pinta como ::before. Solo en el Hero de portada (tipo video).
   ========================================================================== */
.rgb-hero--video .rgb-hero__inner h1{font-size:0;line-height:0;margin-bottom:22px;}
.rgb-hero--video .rgb-hero__inner h1::before{
	content:"";display:block;margin:0 auto;
	width:min(560px,84vw);aspect-ratio:1100/368;
	background:url("assets/img/logo-principal-b-negativo.png") center/contain no-repeat;
}

/* ==========================================================================
   v0.1.7/v0.1.8 - Ajustes de portada
   ========================================================================== */
/* 1) Sin franja blanca entre el hero y Servicios (el articulo trae 88px de padding superior);
      Servicios lleva su propio aire superior, igual que Portafolio (72px). */
body.home #rgb-main article.section{padding-top:0;}
body.home #rgb-main #servicios{padding-top:72px;}

/* 2) Hover del logotipo de Nosotros */
.rgstudio-nosotros-logo{transition:transform .35s ease,filter .35s ease;}
.rgstudio-nosotros-logo:hover{transform:scale(1.05);filter:drop-shadow(0 12px 22px rgba(20,20,20,.25));}

/* 3) Portafolio: cards (solo la card; el fondo de la seccion y del showcase NO cambian).
      Imagen sobre blanco, franja de texto negra, texto blanco, "+ Mas" rojo, contorno negro;
      hover: contorno rojo solido y mascara roja en degradado sobre la imagen. */
#portafolio .rgb-showcase__item{background:#fff;border:1px solid #000;color:#fff;transition:border-color .3s,box-shadow .3s;}
#portafolio .rgb-showcase__item:hover{border-color:#ff0000;box-shadow:0 0 0 1px #ff0000;}
#portafolio .rgb-showcase__item figcaption{background:#000;color:#fff;}
#portafolio .rgb-showcase__item figcaption span{color:#fff;}
#portafolio .rgb-showcase__item .rgb-showcase__more{color:#ff0000;}
#portafolio .rgb-showcase__trigger::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(255,0,0,.75) 0%,rgba(255,0,0,.35) 45%,rgba(255,0,0,0) 100%);opacity:0;transition:opacity .3s ease;}
#portafolio .rgb-showcase__item:hover .rgb-showcase__trigger::after{opacity:1;}

/* 4) Hover de la imagen dentro del lightbox de Portafolio (la card del lightbox conserva su estilo claro) */
.rgb-showcase-lightbox[data-rgstudio-src="portafolio"] .rgb-showcase-lightbox__frame img,
#portafolio .rgb-showcase-lightbox__frame img{transition:transform .35s ease,filter .35s ease;}
.rgb-showcase-lightbox[data-rgstudio-src="portafolio"] .rgb-showcase-lightbox__frame img:hover,
#portafolio .rgb-showcase-lightbox__frame img:hover{transform:scale(1.04);filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));}

/* ==========================================================================
   v0.1.9 - Contenido de fichas de servicio (mini-brochure con CTA)
   Mismo patron que Ronda 10 de VOO: h3, checklist, cita y boton.
   ========================================================================== */
.rgb-ficha__content h3{font-family:var(--font-heading);font-size:1.25rem;color:var(--ink);margin:8px 0 18px;}
.rgb-ficha__content ul.wp-block-list{display:grid;gap:14px;margin:0 0 32px;padding:0;list-style:none;}
.rgb-ficha__content ul.wp-block-list li{position:relative;padding-left:34px;line-height:1.5;color:var(--ink);transition:transform .2s ease;}
.rgb-ficha__content ul.wp-block-list li:hover{transform:translateX(6px);}
.rgb-ficha__content ul.wp-block-list li::before{content:"\2713";position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease;}
.rgb-ficha__content ul.wp-block-list li:hover::before{background:var(--ink);color:#fff;transform:scale(1.12);}
.rgb-ficha__content blockquote.wp-block-quote{border-left:3px solid var(--accent);background:var(--paper);border-radius:0 var(--radius) var(--radius) 0;padding:20px 28px;margin:0 0 32px;}
.rgb-ficha__content blockquote.wp-block-quote p{font-family:var(--font-heading);font-size:1.05rem;font-style:italic;color:var(--ink);line-height:1.6;margin:0;}
.rgb-ficha__content .rgb-btn{margin-right:12px;margin-bottom:12px;}