/*
Theme Name: VOO Solutions
Theme URI: https://voo-solutions.com
Template: rgstudio-base-wp-tema
Author: VOO Solutions
Author URI: https://voo-solutions.com
Description: Child theme oficial de VOO Solutions (holding) sobre el tema padre rgstudio-base-wp-tema. Tokens de marca tomados del catalogo #07 Paleta_Color_VOO / #08 Tipografia_VOO (v1.0 validados), sin valores inventados.
Version: 0.36.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: voo-solutions
*/

/* ==========================================================================
   DESIGN TOKENS -- sobreescribe los del padre (rgstudio-base-wp-tema) con
   los valores oficiales de VOO Solutions. Fuente de verdad:
   07_Paleta_Color_VOO.md / 08_Tipografia_VOO.md (catalogo #1-20, 14-sep-2026,
   validados por Jorge). Ningun valor de esta hoja se inventa.
   ========================================================================== */
:root{
  /* Paleta -- catalogo #07 */
  --ink:#16241D;            /* Tinta -- texto principal sobre fondo claro */
  --ink-soft:#7C8A80;       /* Muted, reutilizado: el catalogo no define un
                                tono intermedio propio distinto de Muted */
  --paper:#F6F4EE;          /* Papel -- fondo base de marca */
  --paper-raised:#FFFFFF;   /* Blanco -- negativo del isotipo, fondos elevados */
  --line:#D9D3C3;           /* Linea -- bordes y separadores */
  --primary:#1C3428;        /* Primario, verde bosque */
  --primary-ink:#FFFFFF;    /* Blanco sobre Primario -- 13.37:1, pasa AAA (#07) */
  --accent:#C9A566;         /* Dorado claro / accent-light -- CTA principal,
                                subtitulo, borde de boton secundario (#07) */
  --accent-hover:#A8863C;   /* Dorado / Acento del isotipo -- nunca mas del
                                30% de una composicion (#07) */
  --accent-ink:#16241D;     /* Tinta sobre Dorado/Dorado claro -- unico texto
                                que pasa AA sobre ambos tonos (ver tabla de
                                contraste, #07); Blanco sobre Dorado NO pasa */
  --muted:#7C8A80;          /* Muted -- reservar para texto >=14px/UI, no
                                pasa AA como cuerpo de parrafo (#07) */
  --tree-green:#3D7A4F;     /* Verde del arbol (#07) -- hover de tarjetas de
                                Showcase (pedido de Jorge, 17-sep-2026), sin
                                relacion con --primary (verde bosque, mas
                                oscuro, reservado para fondos/superficies) */

  /* Tipografia -- catalogo #08, wordmark en Marcellus queda fuera (solo el
     logo, nunca la tipografia CSS del sitio, decision explicita de Jorge) */
  --font-heading:'Fraunces', Georgia, serif;
  --font-body:'Source Sans 3', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace; /* datos/metadatos --
                                extension propia de este Child, el padre no
                                define este token */
}

/* ==========================================================================
   FONDOS DE SECCION + TITULOS BRANDEADOS + REVEAL AL SCROLL -- pedido
   explicito de Jorge (17-sep-2026): "el color claro del fondo de todas las
   secciones me parece muy monotono" + "titulos brandeados, transiciones de
   los textos al cargar seccion". Las 8 secciones de contenido (proposito,
   valores, modelo, marcas, gobierno, resultados, equipo, contacto) viven
   dentro de la columna de ancho fijo de the_content() -- el fondo de cada
   una se extiende a todo el ancho del viewport con el truco full-bleed
   clasico (50vw/-50vw), no con un cambio de layout. Todos los tonos salen
   del catalogo oficial #07 combinados con color-mix() (nunca un color
   inventado); "gobierno" ya tenia su propia tarjeta oscura
   (.voo-section--dark, sin tocar) asi que solo recibe un tinte de fondo
   de transicion, no un color propio nuevo.
   ========================================================================== */
body{background:var(--paper);}

/*
 * Hero -- "la linea gris debajo del video hero cambiar a color verde"
 * (Jorge, 17-sep-2026). No es una linea real: parallax.js desplaza el
 * <video> (.rgb-parallax__layer) hasta 60px via transform mientras hace
 * scroll, pero el <video> mide exactamente lo mismo que su contenedor
 * (.rgb-hero__bg, width/height:100%) -- al desplazarse dentro de una caja
 * de su mismo tamano, siempre queda un borde sin cubrir por el video, que
 * dejaba ver el fondo transparente de .rgb-hero (body/--paper detras del
 * scrim oscuro = una franja gris apagada). Se le da a .rgb-hero su propio
 * fondo solido en var(--primary) (verde bosque de marca) para que ese
 * borde, cuando aparece, sea verde y no gris -- confirmado en vivo por
 * Jorge que el origen es el fondo del parallax del Hero.
 */
.rgb-hero{background:var(--primary);}

/* Jorge, 17-sep-2026: "agrega este comportamiento de particulas al hero
   con los colores de paleta oficial" -- canvas inyectado por JS
   (assets/js/hero-particles.js) como hermano de .rgb-hero__scrim,
   insertado justo despues de el en el DOM. z-index:1 IGUAL al de
   .rgb-hero__scrim (style.css del tema padre) a proposito: como el
   canvas se inserta despues del scrim en el DOM, en el empate de
   z-index gana el ultimo en el arbol -- pinta por ENCIMA del overlay
   oscuro pero por DEBAJO de .rgb-hero__watermark (z-index:2) y de
   .rgb-hero__inner (z-index:3), igual que en el archivo de referencia
   de Jorge (particulas visibles sobre el fondo, nunca tapando el
   texto). mix-blend-mode:screen (mismo mecanismo del archivo de
   referencia) aclara los tonos de marca al mezclarse con el fondo
   oscuro del Hero. pointer-events:none porque el mousemove de
   repulsion se escucha en .rgb-hero mismo (ver el JS), no en el
   canvas -- asi conviven sin conflicto con hero-mousemove.js, que ya
   escucha el mismo evento en el mismo elemento. */
.rgb-hero .voo-hero-particles{
	position:absolute;
	inset:0;
	z-index:1;
	mix-blend-mode:screen;
	pointer-events:none;
}

section[id]{position:relative;isolation:isolate;padding:48px 0;}
section[id]::before{
	content:"";
	position:absolute;
	top:-36px;bottom:-36px;left:50%;right:50%;
	margin-left:-50vw;margin-right:-50vw;
	width:100vw;
	z-index:-1;
	pointer-events:none;
}
.voo-section-bg__watermark{
	position:absolute;
	z-index:-1;
	max-width:38%;
	height:auto;
	opacity:.05;
	pointer-events:none;
	object-fit:contain;
}

#proposito::before{background:radial-gradient(ellipse at 50% 0%, var(--paper-raised) 0%, var(--paper) 70%);}
#valores::before{background:linear-gradient(155deg, var(--paper) 0%, var(--paper) 55%, color-mix(in srgb, var(--primary) 6%, var(--paper)) 100%);}
#modelo::before{background:radial-gradient(circle at 50% 45%, var(--paper-raised) 0%, var(--paper) 65%);}
/*
 * Jorge, 17-sep-2026 (segundo ajuste): "seccion Marcas en parallax y con
 * watermark de Logo_VOO_Principal_Negativo.png" -- ese archivo es el
 * logotipo completo en tinta CLARA sobre transparente (verificado
 * visualmente antes de usarlo), pensado para ir sobre fondo oscuro --
 * invisible sobre el fondo claro que tenia esta seccion. Se cambia a un
 * fondo solido verde bosque (mismo tratamiento de peso visual que el
 * Hero/Gobierno) para que el watermark tenga contraste real; el titulo y
 * el subtitulo de esta seccion pasan a texto claro mas abajo por el
 * mismo motivo. La tarjeta blanca del showcase (RGStudio_plugin_Showcase)
 * no cambia -- queda flotando sobre el verde, mismo patron ya usado en
 * el resto del sitio (contenido claro sobre fondo oscuro de seccion).
 */
/*
 * Bug real encontrado por Jorge (screenshot en vivo): el fondo verde de
 * Marcas salia "boxed" (ancho del contenido, no full-bleed) pese a usar
 * el mismo truco ::before que las demas secciones. Causa: el tema padre
 * ya trae una regla GENERICA `[data-rgb-parallax]{overflow:hidden;}`
 * (rgstudio-base-wp-tema/style.css, seccion Parallax) -- al agregarle a
 * <section id="marcas"> el atributo data-rgb-parallax (para el efecto
 * pedido), esa seccion hereda overflow:hidden, y el ::before full-bleed
 * (que se sale del ancho de la seccion via left/right:50% + margin
 * -50vw) queda RECORTADO de vuelta al ancho de la seccion -- por eso se
 * veia boxed solo aqui, nunca en las demas secciones (que no tienen ese
 * atributo). Se restaura overflow:visible SOLO en #marcas (el selector
 * de ID gana en especificidad sobre el atributo) -- el pequeno margen
 * negativo del watermark (right:-4%) queda cubierto igual por
 * body{overflow-x:hidden} (seccion 2 del tema padre), sin scroll
 * horizontal.
 * ACTUALIZACION 17-sep-2026: Marcas cambio de tecnica de parallax
 * (ahora "Background-Attachment", ver .voo-marcas-bg-fixed mas abajo) y
 * la <section> YA NO recibe el atributo data-rgb-parallax -- esta regla
 * queda como resguardo defensivo (no-op mientras nadie le agregue ese
 * atributo de nuevo), no se quita por si acaso.
 */
#marcas{overflow:visible;}
#marcas::before{background:var(--primary);}
#marcas > h2:first-of-type{color:var(--primary-ink);}
#marcas > p:first-of-type{color:var(--primary-ink);opacity:.82;}
#gobierno::before{background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, var(--paper)) 0%, var(--paper) 100%);}
#resultados::before{background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--accent) 10%, var(--paper)) 100%);}
#equipo::before{background:linear-gradient(200deg, color-mix(in srgb, var(--primary) 5%, var(--paper)) 0%, var(--paper) 60%);}
#contacto::before{background:linear-gradient(180deg, var(--paper) 0%, var(--paper-raised) 100%);}

/* Titulo brandeado: barra --accent a la izquierda del h2 de cada seccion,
   mismo tratamiento dentro o fuera de la tarjeta oscura de "Gobierno". */
section[id] > h2:first-of-type,
section[id] .voo-section--dark > h2:first-of-type{
	position:relative;
	display:inline-block;
	padding-left:26px;
}
section[id] > h2:first-of-type::before,
section[id] .voo-section--dark > h2:first-of-type::before{
	content:"";
	position:absolute;
	left:0;top:.18em;bottom:.18em;
	width:4px;
	background:var(--accent);
	border-radius:2px;
}

/*
 * "Titulos color verde oscuro" (Jorge, 17-sep-2026) -- solo los titulos
 * de seccion sobre fondo claro: el selector es a proposito ">" (hijo
 * directo de section), asi que NUNCA alcanza el h2 de "Gobierno y
 * tecnologia" (vive un nivel mas abajo, dentro de .voo-section--dark) --
 * Jorge confirmo que ese titulo debe seguir en color claro, ya resuelto
 * por herencia de .voo-section--dark{color:var(--primary-ink)}.
 */
section[id] > h2:first-of-type{color:var(--primary);}

/*
 * "Escribenos" (h3, formulario de Contacto -- RGStudio_plugin_FormulariosCRM)
 * en verde oscuro, mismo pedido -- ver .rgb-crm-form h3 en form.css del
 * plugin (holding-wide, usa var(--primary) con fallback neutro).
 */

/*
 * Fondo de Marcas, tecnica "Background-Attachment" (Jorge, 17-sep-2026,
 * clasificacion de parallax por seccion) -- el logotipo negativo se
 * inyecta como background-image de un <div> real (voo_solutions_section
 * _watermarks() en functions.php), nunca como <img src> (background-
 * attachment no afecta el contenido propio de un <img>). Centrado en
 * ambos ejes con background-position:center; tamano al 130% de la altura
 * del contenedor con background-size:auto 130% (mismo criterio de escala
 * que se uso antes con el <img>, ahora expresado como background-size en
 * vez de height/width). background-attachment:fixed es lo que da el
 * efecto: al hacer scroll, el fondo se queda "clavado" respecto al
 * viewport mientras el contenido de la seccion se desliza encima.
 * NOTA (limitacion conocida y aceptada de esta tecnica en particular):
 * background-attachment:fixed no funciona en iOS Safari -- ahi el fondo
 * simplemente se comporta como scroll normal, sin romper nada
 * visualmente (solo pierde el efecto).
 */
.voo-marcas-bg-fixed{
	position:absolute;
	inset:0;
	z-index:-1;
	opacity:.1;
	pointer-events:none;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 130%;
	background-attachment:fixed;
}

/* Reveal al hacer scroll (assets/js/reveal.js le agrega estas clases a los
   titulos/parrafos de apertura de cada seccion, las tarjetas y los stat
   tiles) -- respeta prefers-reduced-motion desde el propio JS. */
.voo-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.voo-reveal--visible{opacity:1;transform:translateY(0);}

/*
 * Jorge, 17-sep-2026 (Ronda 7, clasificacion de tecnicas de parallax/
 * reveal por seccion): "Aparicion gradual y revelacion (Fade-in/Scroll
 * Zoom): Modelo del ecosistema" -- el diagrama radial (.voo-orbit) usa
 * esta revelacion en vez de .voo-reveal (fade+rise): fade + zoom
 * (escala desde 82% a 100%), disparada UNA sola vez al entrar en
 * viewport (mismo patron "reveal once" de IntersectionObserver que el
 * resto del sitio, no un zoom continuo ligado al scroll). .voo-orbit no
 * tiene ningun transform propio declarado en otra parte de este archivo
 * (los transforms de rotacion/hover viven en .voo-orbit__node, un hijo
 * distinto), asi que no hay conflicto al animar el transform del
 * contenedor completo.
 */
.voo-reveal-zoom{opacity:0;transform:scale(.82);transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);}
.voo-reveal-zoom--visible{opacity:1;transform:scale(1);}

/* ==========================================================================
   UTILIDADES DE CONTENIDO -- clases para usar desde el editor de bloques
   normal de WordPress (campo "Clases CSS adicionales" de cada bloque), no
   plantillas PHP: el padre carga el cuerpo via the_content(). Pensadas para
   Valores, Modelo del ecosistema y Resultados -- las 3 secciones nuevas que
   no tienen un plugin holding-wide que las resuelva (ver "Estructura
   tecnica por seccion" del brief de contenido). Marcas usa RGStudio_plugin_
   Showcase (.rgb-fichas), no estas clases.
   ========================================================================== */

/* Tarjetas -- Valores (5) y Modelo del ecosistema (7), mismo patron que
   .rgb-fichas del padre: grid auto-fill, sin breakpoints a mano. */
.voo-cards{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
	gap:24px;
	margin:32px 0;
}
.voo-card{
	background:var(--paper-raised);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:28px;
	transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.voo-card:hover{
	transform:translateY(-4px) scale(1.01);
	box-shadow:var(--shadow-soft);
	border-color:var(--accent);
}
.voo-card__title{
	font-family:var(--font-heading);
	color:var(--primary);
	font-size:1.05rem;
	margin-bottom:8px;
}
.voo-card__role{
	font-family:var(--font-mono);
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--accent-hover);
	display:block;
	margin-bottom:10px;
}
.voo-card p{color:var(--ink-soft);font-size:.95rem;}

/* Fondo oscuro solido -- "Gobierno y tecnologia" (mismo peso visual que el
   Hero, ver Estructura tecnica por seccion). */
.voo-section--dark{
	background:var(--primary);
	color:var(--primary-ink);
	border-radius:var(--radius);
	padding:56px var(--gutter);
}
.voo-section--dark a{color:var(--accent);}

/* Resultados -- stat tiles + contador animado (assets/js/counters.js). */
.voo-stats{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:28px;
	margin:32px 0;
	text-align:center;
}
.voo-stat{padding:8px;}
.rgb-stat-counter{
	display:block;
	font-family:var(--font-heading);
	font-weight:700;
	font-size:clamp(2rem,4vw,2.75rem);
	color:var(--primary);
	line-height:1;
}
.voo-stat__label{
	display:block;
	margin-top:8px;
	font-size:.92rem;
	color:var(--ink-soft);
}


/*
 * Modelo del ecosistema -- diagrama radial (disco): VOO Solutions al
 * centro, las 6 marcas alrededor cada 60 grados, con el truco CSS de
 * "reloj" (rotate + translate + contra-rotate) -- sin JS ni SVG,
 * reutilizando los tokens de marca del resto del sitio. Sustituye la
 * grilla .voo-cards que se usaba antes en esta seccion -- decision de
 * diseno confirmada por Jorge (17-sep-2026): "modelo del ecosistema no
 * se muestra disco".
 */
/*
 * Rotacion lenta continua del anillo -- pedido explicito de Jorge
 * (17-sep-2026): "los circulos externos pueden girar sobre el eje del
 * circulo central de manera lenta continua". @property registra
 * --voo-orbit-spin como <angle> para que el navegador SI pueda
 * interpolarlo en un @keyframes (una custom property sin registrar no se
 * anima de forma continua, salta entre valores) -- mismo criterio ya
 * usado en este archivo para color-mix(): navegadores 2026 objetivo lo
 * soportan; donde no, el anillo simplemente no gira (no se rompe nada).
 */
@property --voo-orbit-spin{
	syntax:'<angle>';
	inherits:true;
	initial-value:0deg;
}
@keyframes voo-orbit-spin{
	to{--voo-orbit-spin:360deg;}
}
.voo-orbit{
	position:relative;
	width:min(680px,92vw);
	aspect-ratio:1/1;
	margin:56px auto 24px;
	--voo-orbit-spin:0deg;
	animation:voo-orbit-spin 90s linear infinite;
}
/* Se pausa al pasar el mouse -- si el anillo sigue girando mientras el
   usuario intenta leer/hover un nodo especifico, el hover amplificado
   (ver .voo-orbit__node:hover) se siente inestable en vez de preciso. */
.voo-orbit:hover{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
	.voo-orbit{animation:none;}
}
.voo-orbit::before{
	content:"";
	position:absolute;
	inset:13%;
	border:1px dashed var(--line);
	border-radius:50%;
}
.voo-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(28,52,40,.28);
	z-index:2;
}
.voo-orbit__center .voo-orbit__title{color:var(--primary-ink);}
.voo-orbit__center .voo-orbit__role{color:var(--accent);}
.voo-orbit__center p{font-size:.78rem;opacity:.85;margin:4px 0 0;}
.voo-orbit__node{
	position:absolute;
	top:50%;left:50%;
	width:30%;
	aspect-ratio:1/1;
	/*
	 * Bug corregido (1/2): sin centrar la caja en el punto top:50%/left:50%
	 * ANTES de la rotacion, cada nodo quedaba desplazado medio ancho/alto de
	 * si mismo respecto al centro real -- el resultado visual era un racimo
	 * de circulos amontonados en diagonal, no un disco. El margin negativo
	 * (mitad del ancho/alto propio, en % del MISMO contenedor que define
	 * el ancho -- por eso funciona en %) centra la caja primero; recien
	 * ahi rotate+translate+rotate la distribuye correctamente sobre el
	 * circulo. translate(108%) empuja el CENTRO de cada nodo hasta el
	 * anillo punteado (inset:14% del contenedor .voo-orbit).
	 *
	 * Bug corregido (2/2): aspect-ratio:1/1 con height:auto NO recorta el
	 * contenido -- si el rol/titulo de una marca envuelve a 2 lineas (p.ej.
	 * "Monetizacion industrial", "Alfroði Learning Hub") el box crecia mas
	 * alto que ancho y dejaba de ser un circulo real (ovalo). overflow:hidden
	 * fuerza a que el algoritmo de flexbox respete el alto derivado del
	 * aspect-ratio en vez de crecer por el contenido (min-height:auto pasa a
	 * 0 para items flex con overflow != visible). Se subio el tamano del
	 * nodo de 26% a 30% para dar aire suficiente y que ningun texto real del
	 * catalogo de marcas quede cortado dentro del circulo mas chico.
	 */
	margin:-15% 0 0 -15%;
	overflow:hidden;
	--voo-node-scale:1;
	/*
	 * + var(--voo-orbit-spin) en AMBAS rotaciones (la de posicion y la
	 * contra-rotacion): la primera avanza el angulo del nodo alrededor
	 * del centro (lo hace girar en el anillo), la segunda cancela ese
	 * mismo giro sobre el propio nodo (para que su contenido -- texto,
	 * icono -- no quede de cabeza a mitad de vuelta). --voo-orbit-spin
	 * vive en .voo-orbit (heredada) y la anima @keyframes voo-orbit-spin.
	 */
	transform:rotate(calc(var(--voo-angle) + var(--voo-orbit-spin))) translate(124%) rotate(calc(-1 * (var(--voo-angle) + var(--voo-orbit-spin)))) scale(var(--voo-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:var(--shadow-soft,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;
}
/*
 * Separacion y hover amplificados (pedido explicito de Jorge, 17-sep-2026:
 * "separa mas los circulos del alrededor respecto al central para que la
 * animacion del hover sea mas marcada"). translate subio de 108% a 124%
 * (radio real de 220px a 253px en un contenedor de 680px, verificado en
 * vivo: separacion de 49px entre circulos adyacentes, sin overlap) y el
 * anillo punteado (::before, arriba) se ajusto de inset:14% a 13% para
 * seguir marcando la misma orbita visual. El hover ya no puede usar un
 * `transform:scale(...)` directo -- reemplazaria toda la cadena
 * rotate+translate+rotate que posiciona el nodo y lo mandaria a un lugar
 * equivocado. Se agrega `scale(var(--voo-node-scale))` como ULTIMA
 * funcion de la misma cadena de transform, controlada por la custom
 * property --voo-node-scale: crece en su propio sitio sin recalcular
 * la posicion.
 */
.voo-orbit__node:hover{
	--voo-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;
}
.voo-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;}
.voo-orbit__title{font-family:var(--font-heading);font-size:.86rem;font-weight:700;margin:0 0 4px;color:var(--ink);line-height:1.15;}
.voo-orbit__node p{font-size:.7rem;line-height:1.3;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* Movil: el diagrama radial no cabe legible en pantallas angostas -- cae
   a una lista vertical simple (mismo contenido, sin el circulo). */
@media (max-width:640px){
	.voo-orbit{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;margin:24px 0;}
	.voo-orbit::before{display:none;}
	.voo-orbit__center,.voo-orbit__node{position:static;transform:none;margin:0;width:100%;aspect-ratio:auto;border-radius:14px;padding:18px;}
}


/*
 * Jorge, 17-sep-2026 (ronda 8): "dar espacio entre el texto de
 * introduccion de Contacto (H2 + parrafo) y 'Escribenos'" + "centrar el
 * texto de introduccion de Contacto". El H2 y el parrafo viven, junto
 * con el formulario, dentro de .voo-contacto-slide-in (ver
 * voo_solutions_contacto_curtain_wrap() en functions.php -- envuelve
 * TODO el contenido interno de #contacto, no solo el formulario). Se
 * escoge ">" (hijos directos) para no afectar nada dentro de
 * .rgb-crm-wrap (labels, inputs, etc., que no deben centrarse). Sin
 * gating de @media a proposito: se ve bien tanto en el layout de
 * cortina de escritorio como en el flujo normal de movil.
 */
.voo-contacto-slide-in > h2,
.voo-contacto-slide-in > p{
	text-align:center;
}
.voo-contacto-slide-in > p{
	margin-bottom:28px;
}

/*
 * Jorge, 17-sep-2026 (ronda 12): "en la seccion contacto poner el
 * isotipo en watermark fijo encima del fondo claro y que se desvanezca
 * en lo que entra el formulario de contacto". El <img> lo inyecta
 * voo_solutions_contacto_watermark() (functions.php) como PRIMER hijo
 * de <section id="contacto">, HERMANO de (y antes que, en el DOM) de
 * .voo-contacto-slide-in -- por eso no hereda su transform/opacity de
 * slide-in, solo el fade que contacto-curtain.js le aplica por
 * separado (ver ese archivo). "Fijo" = no se mueve ni con el parallax
 * horizontal del formulario ni con el propio scroll de la cortina
 * (#contacto ya es sticky, asi que este watermark, centrado dentro de
 * el con position:absolute, se queda fijo en pantalla igual que el
 * resto del panel mientras dura el efecto). object-fit:contain + un
 * tope de ancho/alto evita que el isotipo se vea gigante en pantallas
 * muy anchas. Sin CSS transition en opacity: el valor lo escribe
 * contacto-curtain.js cada frame de scroll ya interpolado (mismo
 * criterio que .voo-contacto-slide-in, que tampoco usa transition).
 * z-index no hace falta declararlo: en el orden del DOM este <img> va
 * ANTES que .voo-contacto-slide-in, y sin z-index explicito en ninguno
 * de los 2 (ambos auto), gana el orden de pintado normal -- el
 * watermark queda detras del formulario sin necesidad de apilar nada.
 */
.voo-contacto-watermark{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:34%;
	max-width:340px;
	max-height:60%;
	height:auto;
	opacity:.05;
	pointer-events:none;
	object-fit:contain;
}
@media (max-width:960px){
	/* Fuera de la cortina (movil, #contacto vuelve a flujo normal) el
	   watermark no tiene ningun scroll de cortina del que depender para
	   desvanecerse -- se oculta por completo en vez de quedar como un
	   isotipo estatico sin proposito detras del formulario. */
	.voo-contacto-watermark{
		display:none;
	}
}

/*
 * Jorge, 17-sep-2026 (ronda 8): "las cards de showcase en el hover
 * colorear de verde la parte inferior de la card (donde esta el texto:
 * <Marca> y "+Mas") y el texto <Marca> de la card en el hover hacerlo
 * color blanco". La "parte inferior" es el <figcaption> que ya trae
 * RGStudio_plugin_Showcase (assets/showcase.css, holding-wide) -- se
 * sobreescribe aqui, scopeado a este Child, en vez de tocar el CSS del
 * plugin (mismo criterio que el resto de este archivo: un ajuste visual
 * de una sola marca no debe afectar a las demas marcas del holding que
 * comparten el mismo plugin). --tree-green (#07) en vez de --accent
 * (dorado, ya usado en otros estados hover del propio showcase) para que
 * sea un color de hover claramente distinto. Solo el span (<Marca>) pasa
 * a blanco -- "+Mas" (ya en --accent) se deja tal cual, buen contraste
 * sobre el verde y es exactamente lo que Jorge pidio.
 */
.rgb-showcase__item figcaption{
	transition:background-color .25s ease;
}
/*
 * Correccion de Jorge (ronda 13): "el verde de la parte inferior de la
 * card en el hover" tenia que ser el verde OFICIAL de paleta
 * (--primary, el mismo "verde bosque" que usan los titulos de seccion
 * en todo el sitio), no --tree-green (accent secundario). Mismo tipo de
 * correccion ya aplicada al titulo "Que hacemos" de la ficha en ronda
 * 12 -- ver ese comentario en .rgb-ficha__content h3 mas abajo para el
 * criterio completo de cuando usar --primary vs --tree-green.
 */
.rgb-showcase__item:hover figcaption{
	background:var(--primary);
}
.rgb-showcase__item:hover figcaption span{
	color:#fff;
}

/*
 * Jorge (ronda 13): "quitar el color hover dorado de las cards" -- el
 * borde (--accent, #c05621) y el tinte de imagen (.rgb-showcase__trigger
 * ::after, mismo --accent a opacity:.14 en hover) vienen del plugin
 * compartido RGStudio_plugin_Showcase (holding-wide, ver showcase.css) --
 * se neutralizan SOLO aqui en el Child de VOO Solutions (mismo criterio
 * que el resto de este archivo: no tocar el plugin ni afectar a las
 * demas marcas que SI quieren ese dorado). border-color vuelve a
 * --rgb-sc-line (el MISMO valor que ya trae en reposo, definido en
 * .rgb-showcase -- efectivamente "sin cambio de color" en el borde) y
 * el tinte se apaga (opacity:0). El zoom de imagen, el box-shadow del
 * item y el fondo verde oficial del figcaption (regla de arriba) quedan
 * intactos -- son los unicos efectos de hover pedidos.
 */
/*
 * !important necesario aqui (a diferencia del resto de este archivo):
 * el plugin compartido encola showcase.css DESPUES que este style.css
 * del Child (verificado en vivo via el orden real de <link> en la
 * pagina) -- con la MISMA especificidad de selector en ambas reglas
 * (".rgb-showcase__item:hover" / ".rgb-showcase__trigger:hover::after"),
 * el orden de carga decide, y el plugin gana por cargar al final. Sin
 * !important esta regla NO tendria efecto (bug real detectado en vivo
 * al verificar: el dorado seguia apareciendo pese a esta regla). No es
 * el mismo caso que el bug de #modelo/margin-top de ronda 12 -- ahi
 * !important competia contra un valor puesto por JS; aqui ambos lados
 * son CSS estatico, !important es seguro y necesario.
 */
.rgb-showcase__item:hover{border-color:var(--rgb-sc-line) !important;}
.rgb-showcase__trigger:hover::after{opacity:0 !important;}

/*
 * Estilo del enlace "+ Mas" que showcase-lightbox-more.js agrega dentro
 * del marco del lightbox (ver ese archivo) -- mismo tratamiento visual
 * que .rgb-showcase__more de la tarjeta (accent, negrita), con un poco
 * de aire respecto al resto del contenido del marco.
 */
.voo-showcase-lightbox__more{
	display:inline-block;
	margin-top:6px;
	font-size:.8rem;
	font-weight:700;
	color:var(--accent-hover,#A8863C);
}
.voo-showcase-lightbox__more:hover{
	text-decoration:underline;
}

/*
 * Ronda 14 -- Jorge (17/09/2026): "agregar hover a card en lightbox en el isotipo"
 * El isotipo/imagen que se muestra dentro del lightbox (popup) del Showcase
 * no tenia ningun efecto hover; era una imagen completamente estatica.
 * Se agrega aqui (Child theme, siguiendo la convencion de personalizacion
 * de marca unica) un hover sutil de zoom sobre la imagen dentro del marco
 * del lightbox, coherente con el mismo lenguaje visual que ya usa el
 * hover de las cards del grid del Showcase (transform:scale en :hover img),
 * pero con una escala mas moderada (1.06 en lugar de 1.14) porque la imagen
 * del lightbox ya ocupa gran parte del marco (max-height:68vh) y el
 * contenedor .rgb-showcase-lightbox__frame tiene overflow:auto -- una
 * escala mayor podria verse cortada o generar scroll no deseado.
 * Verificado: no existe ninguna regla :hover previa sobre este selector
 * ni en el plugin compartido (showcase.css) ni en este Child theme, por lo
 * que no hay conflicto de cascada y no se requiere !important aqui.
 */
/*
 * Segunda correccion de Jorge (17/09/2026) sobre este mismo hover: "me
 * referia a enmascarar el isotipo en un circulo y que al hacer el hover
 * solo se viera la animacion y la sombra del circulo respectiva" -- es
 * decir: el isotipo SIEMPRE va enmascarado/recortado dentro de un circulo
 * (no solo al hacer hover), y el hover unicamente anima ese circulo (zoom)
 * y le agrega una sombra -- no un halo de fondo aparte como en el intento
 * anterior (v0.32.0/v0.33.0).
 *
 * Para que el circulo NO corte contenido importante del isotipo (logos no
 * cuadrados, con elementos que llegan cerca de las esquinas -- ver ejemplo
 * Hugr Innovations) se usa un padding generoso (18%, por encima del ~14.6%
 * minimo matematico para que las esquinas del cuadro interior de contenido
 * queden dentro del circulo inscrito en el cuadro exterior) mas
 * object-fit:contain (ya provisto por el plugin) para que el isotipo se
 * re-escale dentro de esa area de contenido reducida, sin recortarse -- el
 * circulo recorta unicamente el "aire" alrededor del logo, nunca al logo.
 * aspect-ratio:1/1 fuerza que el recorte sea un circulo real (no una
 * elipse) incluso si el isotipo de otra marca no es cuadrado.
 */
.rgb-showcase-lightbox__frame img{
	box-sizing:border-box;
	aspect-ratio:1/1;
	/* !important necesario: showcase.css (plugin) carga DESPUES de este
	   child theme en esta instalacion (verificado via document.styleSheets
	   en rondas anteriores) y trae su propio border-radius:8px sobre este
	   mismo selector -- misma especificidad, gana el que carga al final
	   sin !important. Caso seguro para !important (los dos lados son CSS
	   estatico, no hay estilo inline por JS de por medio). */
	border-radius:50% !important;
	/*
	 * Jorge, 17-sep-2026 (segunda correccion, tras deploy): "El isotipo de
	 * RG Studio esta distorsionado hay que corregirlo". Causa real: esta
	 * regla NUNCA llego a declarar object-fit:contain (se probo en vivo
	 * via JS durante el debugging y parecia correcto, pero ese cambio no
	 * se traslado al CSS real que se desplego) -- sin object-fit:contain
	 * el valor por defecto del navegador es "fill", que ESTIRA la imagen
	 * para llenar la caja cuadrada. El isotipo de RG Studio no es
	 * cuadrado (1600x1265px, aspecto 1.265), asi que se veia notoriamente
	 * aplastado/deformado. Se agrega object-fit:contain explicito (nunca
	 * estira, preserva la proporcion real del isotipo) y se quita el
	 * padding porcentual (18%) que se habia usado como colchon
	 * anti-recorte: probado en vivo con 3 marcas de proporciones muy
	 * distintas (Hugr -- diagrama irregular, Smidr -- badge ya circular,
	 * Verkthing -- flecha vertical alargada, 640x640) sin padding y con
	 * object-fit:contain, y ninguna se recorto contra el circulo -- el
	 * propio contain ya dejaba margen suficiente. Si aparece a futuro una
	 * marca cuyo isotipo SI toque el circulo, usar padding en px fijos
	 * (nunca porcentual) y volver a probar con espera generosa antes de
	 * descartar la combinacion por un falso positivo de timing (ver nota
	 * en memoria de Ronda 14).
	 */
	object-fit:contain;
	background:var(--paper-raised,#fff);
	border:1px solid var(--line);
	transition:transform .3s ease, box-shadow .3s ease;
}
.rgb-showcase-lightbox__frame img:hover{
	transform:scale(1.06);
	box-shadow:0 10px 26px rgba(28,52,40,.32);
	/*
	 * Jorge, 17-sep-2026: "Quitar el icono de mouse (lupa +) en el hover,
	 * es confuso pues no amplia la imagen, manten el cursor normal" --
	 * se quita cursor:zoom-in (la imagen no tiene ninguna accion de zoom
	 * real al hacer click, asi que ese cursor prometia una interaccion
	 * que no existe). Se deja el cursor por defecto (no se declara la
	 * propiedad).
	 */
}


/*
 * Jorge, 17-sep-2026 (tecnica final -- compartio un archivo HTML de
 * ejemplo con la tecnica exacta: sticky + margen negativo, SIN JS para
 * el movimiento vertical). Mapeo de su ejemplo: "Seccion 1" = Equipo (la
 * cortina que sube), "Seccion 2" = Contacto (la capa fija que se
 * revela), "Seccion 3" = footer (scroll normal despues).
 *
 * Mecanica (ver voo_solutions_contacto_curtain_wrap() en functions.php,
 * que reordena Equipo/Contacto en el HTML de salida -- Contacto PRIMERO,
 * Equipo SEGUNDO): .voo-curtain-stack{height:200vh} es el doble de la
 * altura de un elemento sticky de 100vh -- eso le da a #contacto (sticky,
 * top:0) exactamente 100vh de "vida" pegado en pantalla. #equipo, con
 * margin-top:-100vh, se reposiciona visualmente ENCIMA de #contacto
 * (mismo rect) con mayor z-index -- lo tapa por completo al inicio. Como
 * #equipo NO es sticky (solo position:relative, para poder controlar su
 * z-index), es un elemento normal de flujo: al scrollear se desliza
 * hacia arriba y sale de pantalla al ritmo nativo del scroll (sin JS),
 * revelando a #contacto -- que permanece fijo exactamente ese mismo
 * tramo de 100vh, porque su propia altura (100vh) es igual a la de
 * #equipo. Al terminar, #contacto se suelta solo (comportamiento nativo
 * de position:sticky) y el scroll sigue con normalidad hacia el footer
 * (Jorge: "...ya continue despues el scroll normal").
 *
 * El fondo de #contacto (su ::before ya existente, ver
 * "section[id]::before" arriba) NO forma parte de .voo-contacto-slide-in,
 * asi que es visible desde el primer instante en que #equipo empieza a
 * descubrirlo. .voo-contacto-slide-in (el logotipo + formulario,
 * envueltos por voo_solutions_contacto_curtain_wrap()) arranca fuera de
 * vista a la derecha y entra con parallax horizontal MAS ADELANTE, con
 * un margen de scroll de por medio (pedido explicito de Jorge: "quiero
 * un margen mas amplio entre el revelado y el scroll horizontal") --
 * .voo-curtain-stack mide 260vh, no 200vh: el margen negativo de #equipo
 * lo sigue sacando de pantalla en exactamente 100vh (su propia altura,
 * inalterado), pero #contacto (sticky) queda vivo 160vh en vez de 100vh
 * (260vh - 100vh de su propia altura). Ese excedente de 60vh es tiempo
 * de scroll DESPUES de que #equipo ya salio por completo, durante el
 * cual #contacto sigue fijo -- es ahi, y solo ahi, donde
 * assets/js/contacto-curtain.js hace entrar a .voo-contacto-slide-in
 * (PHASE_A_SHARE = 100/160 marca ese punto de corte). Sin este margen,
 * el logotipo+formulario entraban al mismo tiempo que #equipo salia, sin
 * ninguna pausa perceptible entre un movimiento y el otro.
 *
 * IMPORTANTE (ronda de fix18): #equipo y #contacto YA NO llevan
 * overflow:hidden/auto -- eso era lo que causaba el bug de fondo "boxed"
 * (en vez de fullwidth) que Jorge reporto: el truco de fondo a sangre
 * completa (ver "section[id]::before" arriba, con margenes negativos de
 * -50vw) necesita que la seccion misma permanezca en overflow:visible
 * (el valor por defecto) para poder desbordarse mas alla de su propio
 * ancho de contenido -- CUALQUIER valor de overflow distinto de visible,
 * en cualquiera de los 2 ejes, recorta ese fondo de vuelta al ancho del
 * contenido (el mismo patron de bug ya documentado para Marcas en una
 * ronda anterior). El pequeno desborde vertical que pueda tener el
 * contenido real (unos pocos px de mas sobre 100vh en pantallas grandes)
 * simplemente queda invisible por su cuenta: en #contacto, por quedar
 * fuera del viewport (la seccion esta fija en pantalla completa); en
 * #equipo, por quedar cubierto por su propio mayor z-index sobre
 * #contacto -- ninguno de los 2 casos necesita overflow:hidden para
 * verse bien, y asi se evita ademas la barra de scroll interna que
 * Jorge tampoco queria.
 *
 * .rgb-footer con position:relative + z-index mayor es una guarda
 * defensiva (igual que la "Seccion 3" del ejemplo de Jorge) para que el
 * footer no quede visualmente detras de #contacto (sticky, z-index:1) en
 * el instante exacto en que este se suelta y el footer empieza a
 * ocupar su lugar.
 *
 * Solo en escritorio (>960px, mismo breakpoint que usa nav.js) -- en
 * movil ambas secciones vuelven a flujo normal (el wrapper no agrega
 * altura extra, no hay margen negativo ni sticky, y el slide-in no se
 * activa): fijar dos secciones enteras superpuestas es fragil en
 * pantallas chicas, y el efecto en si es una mejora decorativa de
 * escritorio, no algo esencial para usar el formulario de contacto.
 */

/* Version base (movil, <=960px, donde Equipo/Contacto vuelven a flujo
   normal sin el efecto de cortina): .voo-equipo-logo-fill se muestra
   como una imagen mas, centrada y de tamano moderado -- el @media de
   abajo la reescribe para escritorio (flex:1, rellena el espacio
   restante de la columna). */
.voo-equipo-logo-fill{
	display:flex;
	justify-content:center;
	margin-top:32px;
}
.voo-equipo-logo-fill img{
	width:180px;
	max-width:50%;
	height:auto;
}

@media (min-width:961px){
	.voo-curtain-stack{
		position:relative;
		height:calc(100vh + 100vh + 60vh); /* 100vh de #contacto (su propia altura) + 100vh de salida de #equipo + 60vh de margen extra antes del parallax horizontal */
	}
	/*
	 * Jorge, 17-sep-2026 (ronda 12): "Modelo del ecosistema" cortina de
	 * "Marcas" -- MISMA tecnica (sticky + margen negativo), pero SIN
	 * altura fija: a diferencia de Equipo/Contacto (contenido corto,
	 * cabe comodo en 100vh), Marcas trae el grid completo de Showcase
	 * (~1207px medido en vivo, bastante mas que una pantalla) -- forzarla
	 * a 100vh recortaria tarjetas. En vez de reglas de altura aqui, el
	 * alto real lo mide y aplica assets/js/modelo-marcas-curtain.js via
	 * estilos inline (stack.height, #modelo.height/margin-top) --
	 * decision de Jorge via AskUserQuestion ("Alto real, con JS"). Este
	 * bloque solo define lo que NO depende de una medida en px: posicion
	 * sticky de #marcas, position+z-index de #modelo (cortina) y el
	 * reset de su margin-top inline (el editor de bloques ya inyecta uno
	 * propio, ej. "margin-top:72px" -- mismo motivo/necesidad de
	 * !important que en #equipo/#contacto arriba).
	 */
	.voo-curtain-stack--modelo-marcas #marcas{
		position:sticky;
		top:0;
		z-index:1;
		margin:0 !important;
		/*
		 * Correccion de Jorge (ronda 13): "no se ve el titulo [Marcas] en
		 * estos momentos" -- medido en vivo, con el padding-top:48px
		 * heredado de "section[id]{padding:48px 0}" (regla global), el
		 * h2 "Marcas" renderizaba a solo 66px del top del viewport
		 * mientras el nav sticky del sitio (rgb-nav, --nav-height del
		 * tema padre) ya ocupa 76px -- el titulo quedaba LITERALMENTE
		 * detras del nav. Se sobreescribe el padding-top SOLO en este
		 * contexto (Marcas pineada dentro de la cortina) a la altura del
		 * nav + 40px de aire pedidos por Jorge -- no hace falta
		 * !important: el selector #marcas (ID) ya le gana en
		 * especificidad a "section[id]" (atributo).
		 */
		padding-top:calc(var(--nav-height, 76px) + 40px);
	}
	.voo-curtain-stack--modelo-marcas #modelo{
		position:relative;
		z-index:2;
		/*
		 * SIN !important a proposito, a diferencia de #marcas arriba: aqui
		 * modelo-marcas-curtain.js SI escribe un margin-top propio (el
		 * negativo real, en px, calculado en runtime) directamente sobre
		 * el mismo atributo style -- eso YA reemplaza cualquier valor
		 * inline previo (incluido el margin-top:72px que inyecta el
		 * editor de bloques) sin necesidad de ganarle por cascada. Un
		 * !important aqui competiria CONTRA ese inline del JS y siempre
		 * ganaria (!important en hoja de estilos le gana a inline sin
		 * !important pase lo que pase) -- bug real visto en vivo: con
		 * !important puesto, el navegador imponia margin-top:0 pese a que
		 * el JS si calculaba y escribia el valor correcto, y la cortina
		 * nunca tapaba a Marcas. margin-top:0 aqui es solo el valor de
		 * resguardo ANTES de que el JS corra (mejor que quedarse en los
		 * 72px del editor mientras tanto).
		 */
		margin-top:0;
		/*
		 * Correccion de Jorge (ronda 13): con display:flex + justify-
		 * content:center (version anterior) el titulo+subtitulo (h2+p) y
		 * el disco de marcas (.voo-orbit) se centraban como UN SOLO grupo
		 * dentro de la caja alta de #modelo -- el titulo terminaba
		 * flotando a mitad de la caja en vez de quedarse arriba. Jorge
		 * pidio: el titulo se queda en su posicion normal (arriba) y el
		 * disco se centra verticalmente SOLO en el espacio restante entre
		 * el texto y el borde inferior del contenedor. Grid con una fila
		 * 1fr logra esto sin envolver el texto en un wrapper aparte (h2,
		 * p y .voo-orbit son hijos directos de #modelo, en ese orden): h2
		 * y p ocupan sus filas "auto" (su alto natural, arriba), .voo-
		 * orbit cae en la fila 1fr (todo el espacio restante) y su propio
		 * align-self:center (ver regla de abajo) lo centra DENTRO de esa
		 * fila -- exactamente "centrado entre el texto y el borde".
		 */
		display:grid;
		grid-template-rows:auto auto 1fr;
	}
	.voo-curtain-stack--modelo-marcas #modelo > .voo-orbit{
		/* Se anulan los margenes verticales propios (56px arriba/24px
		   abajo, normales fuera de este contexto) para que el centrado
		   por grid de arriba sea el UNICO factor de posicion vertical --
		   el margin-left/right:auto original (horizontal) se conserva,
		   solo se tocan aqui top/bottom. */
		align-self:center;
		margin-top:0;
		margin-bottom:0;
	}
	.voo-curtain-stack #contacto{
		position:sticky;
		top:0;
		height:100vh;
		z-index:1;
		/* SIN overflow aqui a proposito -- ver nota "IMPORTANTE" arriba:
		   cualquier valor de overflow distinto de visible recorta el
		   fondo a sangre completa de la seccion (::before) de vuelta al
		   ancho del contenido ("boxed"). */
		/* !important necesario: el editor de bloques de WP ya inyecta un
		   margin inline propio en esta seccion (espaciado normal entre
		   secciones, ej. "margin:72px 0 96px") -- un estilo inline gana
		   por especificidad a cualquier regla externa sin !important, y
		   sin resetearlo a 0 aqui la matematica de la tecnica (ver
		   comentario arriba) queda descuadrada. */
		margin:0 !important;
		/* Jorge, ronda fix19: "amplia el espacio superior de la seccion
		   Contacto" -- el padding-top por defecto de section[id] (48px)
		   se queda corto una vez que el contenido arranca pegado al
		   borde superior del panel de 100vh; se duplica aqui solo para
		   Contacto dentro de la cortina (no se toca section[id] global,
		   que afecta a todas las demas secciones del sitio). */
		/* Jorge, ronda fix20: "aumentar su espacio superior 100px" --
		   se suman 100px al valor ya establecido en fix19 (96px), no se
		   reemplaza: 96px + 100px = 196px. */
		padding-top:196px !important;
	}
	.voo-curtain-stack #equipo{
		position:relative;
		z-index:2;
		height:100vh;
		/* SIN overflow aqui tambien -- mismo motivo que en #contacto. */
		/* !important por el mismo motivo que en #contacto arriba -- aqui
		   es todavia mas critico: sin ganarle al margin-top inline que
		   inyecta el editor de bloques, Equipo NUNCA se superpone a
		   Contacto (se queda en flujo normal, deshaciendo el efecto por
		   completo -- este fue exactamente el bug reportado por Jorge). */
		margin-top:-100vh !important;
		/* Jorge, ronda fix19: "el espacio de equipo en blanco es
		   innecesario ... agregar el logotipo colorful para rellenar ese
		   vacio". #equipo pasa a columna flex: el h2 y el parrafo de
		   apertura mantienen su alto natural, y .voo-equipo-logo-fill
		   (ver mas abajo, inyectado por voo_solutions_equipo_logo_fill()
		   en functions.php) se queda con flex:1 -- TODO el espacio
		   vertical restante hasta completar los 100vh -- centrando el
		   logotipo ahi en vez de dejarlo pegado justo debajo del texto.
		   No afecta el ancho de h2/p (heredan su max-width/centrado de
		   un ancestro fuera de esta seccion, sin relacion con
		   display:flex aqui). */
		display:flex;
		flex-direction:column;
	}
	.voo-equipo-logo-fill{
		flex:1;
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:0;
	}
	.voo-equipo-logo-fill img{
		/* Jorge, ronda fix20: "el logotipo en seccion Equipo debe abarcar
		   al 90% del alto del espacio en blanco". .voo-equipo-logo-fill
		   (flex:1 dentro de #equipo, columna flex de 100vh) tiene una
		   altura definida en tiempo de layout -- height:90% aqui se
		   resuelve contra esa altura. width:auto conserva el aspect
		   ratio; max-width evita que se desborde horizontalmente en
		   anchos intermedios. */
		height:90%;
		width:auto;
		max-width:90%;
	}
	.voo-contacto-slide-in{
		display:block;
		transform:translate3d(60%,0,0);
		opacity:0;
		pointer-events:none;
		will-change:transform, opacity;
	}
	/* Jorge, 17-sep-2026: "el formulario debe ir centrado" -- el CSS del
	   plugin compartido (RGStudio_plugin_FormulariosCRM/assets/form.css)
	   define .rgb-crm-form{max-width:520px} pero SIN margin:auto (nunca
	   hizo falta antes: con el logo, .rgb-crm-wrap--con-logo es flex y
	   align-items:center ya centraba todo el conjunto). Ahora que el
	   logo se retiro de Contacto (voo_solutions_contacto_form_no_logo(),
	   ver functions.php) el wrap vuelve a su .rgb-crm-wrap{display:block}
	   liso, y ahi un bloque de ancho maximo sin margin:auto se queda
	   pegado a la izquierda -- se centra aqui, scopeado a este sitio
	   (nunca se toca el CSS del plugin, que es holding-wide). */
	.voo-contacto-slide-in .rgb-crm-form{
		margin-left:auto;
		margin-right:auto;
	}
	.voo-contacto-slide-in.is-revealed{
		pointer-events:auto;
	}
	.rgb-footer{
		position:relative;
		z-index:3;
	}
}

/* ==========================================================================
   Ficha de marca -- .rgb-ficha__media (la caja blanca con el isotipo,
   sesion de fichas de marca + fix de aspect-ratio) quedo OBSOLETA en la
   ronda 11 (17-sep-2026, rediseño de Hero): el isotipo se movio dentro
   del Hero como marca de agua (ver single-ficha.php override + bloque
   "Hero de ficha de marca" mas abajo) -- bloque retirado, ya no se usa. */

/* ==========================================================================
   Contenido de ficha de marca -- upgrade visual + CTA (ronda 10, 17-sep-2026)
   Jorge: "arma un mini brochure comercial con tono persuasivo... hasta para
   incentivar un enlace al sitio... o aun formulario de Bitrix24" + "en UI/UX
   le falta muchisimo para alcanzar un nivel de congruencia con el sitio
   completo" -- aterrizado en las 6 fichas (no como PDF aparte). El listado
   de servicios pasa de texto plano a checklist con marca de verificacion; el
   cierre (etimologia/principio de cada marca) se mueve a <blockquote>
   (wp:quote) y se estiliza como cita destacada; el enlace de cierre se
   vuelve boton real (.rgb-btn--accent, misma clase ya usada en el CTA del
   Hero) apuntando a /#contacto -- el mismo formulario Bitrix24
   (RGStudio_plugin_FormulariosCRM) que ya vive en esa seccion, sin duplicar
   infraestructura. */
.rgb-ficha__content{
	max-width:760px;
}
.rgb-ficha__content > p{
	font-size:1.05rem;
	line-height:1.7;
	color:var(--ink);
	margin-bottom:22px;
}
/*
 * Jorge, 17-sep-2026 (ronda 12, correccion): "el titulo color verde de
 * la ficha me referia al de paleta oficial, no cualquier verde" -- un
 * primer intento uso --tree-green (#3D7A4F, tambien del catalogo #07,
 * pero un acento SECUNDARIO reservado para hovers como el de las
 * tarjetas de Showcase). El verde oficial de marca es --primary
 * (#1C3428, "Primario, verde bosque" del #07) -- el MISMO token que ya
 * usa cada h2 de seccion en todo el sitio (ver "section[id] > h2:first-
 * of-type{color:var(--primary);}" mas arriba, Ronda 6) -- se revierte a
 * ese, coherente con el resto del sitio en vez de introducir un verde
 * distinto solo para esta ficha.
 */
.rgb-ficha__content h3{
	font-family:var(--font-heading);
	font-size:1.25rem;
	color:var(--primary);
	margin:8px 0 18px;
}
.rgb-ficha__content ul.wp-block-list{
	display:grid;
	gap:14px;
	margin:0 0 32px;
}
.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(--tree-green,#3D7A4F);
	color:#fff;
	transform:scale(1.12);
}
.rgb-ficha__content blockquote.wp-block-quote{
	border-left:3px solid var(--accent);
	background:var(--paper-raised);
	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(--primary);
	line-height:1.6;
}
.rgb-ficha__content .rgb-btn{
	margin-right:12px;
	margin-bottom:12px;
}
.rgb-ficha__content .rgb-btn--ghost{
	/* Ghost asume texto claro sobre fondo oscuro por defecto (ver comentario
	   del padre junto a .rgb-btn--ghost) -- aqui vive sobre --paper (claro),
	   mismo override que .rgb-age-gate ya aplica en el padre. */
	color:var(--ink);
	border-color:rgba(22,36,29,.35);
}
.rgb-ficha__content .rgb-btn--ghost:hover{
	background:rgba(22,36,29,.08);
}

/* ==========================================================================
   Hero de ficha de marca (ronda 11, 17-sep-2026) -- Jorge: "rediseñar las
   fichas... los elementos de la primer imagen [breadcrumb + H1 + isotipo]
   colocarlos en un Hero (se tiene que agregar a la plantilla)". Reutiliza
   el MISMO esqueleto de clases de template-parts/hero.php (padre, nunca
   editado) -- .rgb-hero__bg/.rgb-hero__watermark/.rgb-hero__scrim/
   .rgb-hero__inner ya traen su CSS base del padre (color de texto,
   posicionamiento, tamano del watermark); aqui solo se agregan el
   modificador --ficha (mas bajo que el Hero de portada, que es
   min(88vh,860px) -- una ficha de detalle no necesita ocupar toda la
   pantalla) y el fondo degradado (decision de Jorge via AskUserQuestion:
   paleta unificada VOO, no la identidad propia de cada marca).
   hero-particles.js y hero-watermark-strength.js (functions.php, ya
   encolados sitewide) se activan solos por compartir las mismas clases +
   data-rgb-parallax-mouse -- cero JS nuevo. */
.rgb-hero--ficha{
	min-height:min(54vh,480px);
}
.rgb-hero--ficha .rgb-hero__bg{
	background:linear-gradient(160deg, var(--primary) 0%, var(--ink) 100%);
}
/* El isotipo FullColor de cada marca varia mucho en luminosidad (RG
   Studio ~rgb(20,20,20) casi negro, Meraki ~rgb(0,204,203) turquesa
   vivo, etc, verificado muestreando pixeles en vivo) -- sobre el fondo
   oscuro del Hero, un isotipo oscuro se vuelve invisible sin importar
   la opacidad (opacity nunca cambia el matiz, solo interpola hacia el
   fondo). En vez de generar/recolorear un archivo nuevo por marca, se
   fuerza la silueta a blanco puro por CSS (brightness(0) aplana
   cualquier color de entrada a negro preservando el canal alfa,
   invert(1) lo voltea a blanco) -- funciona igual para las 6 marcas sin
   importar su color real, y el opacity ya existente en el atributo
   style (--rgb-hero-watermark-opacity) sigue haciendo el resto (mismo
   efecto sutil que el watermark VOO de portada). */
.rgb-hero--ficha .rgb-hero__watermark img{
	filter:brightness(0) invert(1);
}

/* Breadcrumb: en el resto del sitio vive sobre fondo claro (--ink-soft/
   --ink/--accent hardcoded en el padre, inc/template-tags.php +
   .rgb-breadcrumb en su style.css) -- dentro del Hero oscuro necesita el
   mismo tipo de override de contraste ya aplicado a .rgb-age-gate y a
   .rgb-ficha__content .rgb-btn--ghost (ronda 10): texto claro explicito. */
.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);
}

/* Eyebrow (ficha_tipo, ej. "Servicio") -- mismo tratamiento tipografico
   que .rgb-ficha__cat (padre) pero en dorado sobre el fondo oscuro del
   Hero en vez de --accent sobre papel claro (ese ya es --accent, se
   mantiene el mismo token, solo cambia el contexto). */
.rgb-hero__eyebrow{
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:var(--accent);
	font-weight:700;
	margin-bottom:14px;
}

/* ==========================================================================
   Grid de 2 columnas debajo del Hero (ronda 11) -- imagen 2 adjunta de
   Jorge: izquierda el contenido de la ficha (.rgb-ficha__content, sin
   cambios de la ronda 10), derecha el "logotipo" de la marca (isotipo +
   nombre). "Columnas transparentes": ninguna de las dos lleva fondo
   propio, ambas se apoyan directamente sobre --paper de la pagina. */
.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{
	max-width:180px;
	max-height:180px;
	width:auto;
	height:auto;
	object-fit:contain;
	margin-bottom:22px;
	transition:transform .3s ease;
}
.rgb-ficha__logo:hover .rgb-ficha__logo-icon{
	transform:scale(1.08);
}
.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;
}