/*
Theme Name: RG Studio Base
Theme URI: https://rgstudio.com.mx
Author: VOO Solutions
Author URI: https://voo-solutions.com
Description: Tema padre oficial del holding VOO Solutions. Construido a codigo puro (sin page builder ni framework comercial de terceros), pensado para que cada marca (Hugr Innovations, Smidr Consulting, Verkthing Supply, VOO Solutions, Meraki Cultural, RG Studio) lo herede como Child theme aportando solo sus tokens de marca (paleta/tipografia del catalogo #1-20 oficial) y su loader.json. Arquitectura hibrida one-page + multipagina, menu sticky de 3 niveles, Hero configurable (imagen/video/slider), parallax on/off por seccion, responsivo mobile-first y full width en todos los bloques.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rgstudio-base-wp-tema
*/

/* ==========================================================================
   1. DESIGN TOKENS -- el padre no fija ningun valor de marca.
   Cada Child sobreescribe estas variables en su propio style.css
   (fuente de verdad: 07_Paleta_Color_<Marca> / 08_Tipografia_<Marca>
   del catalogo #1-20 oficial de cada marca -- nunca inventar valores).
   ========================================================================== */
:root{
  /* Paleta -- valores neutros de fallback, cada Child los reemplaza */
  --ink:#111318;
  --ink-soft:#4a5160;
  --paper:#f4f5f7;
  --paper-raised:#ffffff;
  --line:#dfe3e8;
  --primary:#1e2a3a;
  --primary-ink:#f4f6f8;
  --accent:#c05621;
  --accent-hover:#9c4419;
  --accent-ink:#241000;
  --muted:#6b7280;

  /* Tipografia -- el Child encola sus Google Fonts y sobreescribe estas dos */
  --font-heading:'Archivo Expanded', Arial, sans-serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;

  /* Ritmo/estructura -- comun a todas las marcas, no es branding */
  --max-width:1400px;
  --gutter:32px;
  --radius:10px;
  --nav-height:76px;
  --transition-base:220ms ease;
  --shadow-soft:0 10px 30px -12px rgba(17,19,24,.18);
}

/* ==========================================================================
   2. RESET + BASE -- mobile-first, full width real (nada "boxed")
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper-raised);
  line-height:1.65;
  overflow-x:hidden;
  width:100%;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:.01em;line-height:1.15;}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);width:100%;}
.section{padding:88px 0;width:100%;}
.section--tight{padding:56px 0;}
.section--alt{background:var(--paper);}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 18px;z-index:1000;}
.skip-link:focus{left:12px;top:12px;}

/* ==========================================================================
   3. NAV STICKY -- transparente al inicio, paleta oficial al hacer scroll,
   mega-menu de hasta 3 niveles, iconos de redes sociales.
   ========================================================================== */
.rgb-nav{
  position:sticky;top:0;z-index:100;
  height:var(--nav-height);
  display:flex;align-items:center;
  background:transparent;
  transition:background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  border-bottom:1px solid transparent;
}
/*
 * Pedido explicito de Jorge (17-sep-2026): "la linea inferior gris del
 * menu inicial cambiarlo a dorado al igual que cuando cambia a sticky" --
 * antes el estado inicial no tenia linea visible (transparent) y el
 * estado is-scrolled usaba var(--line), un gris neutro sin relacion con
 * la marca. Ambos estados usan ahora var(--accent) (el dorado de VOO, o
 * el acento que cada Child defina) para quedar consistentes entre si.
 */
.rgb-nav{border-bottom-color:var(--accent);}
.rgb-nav.is-scrolled{
  background:var(--primary);
  box-shadow:var(--shadow-soft);
  border-bottom-color:var(--accent);
}
body.rgb-hero-none .rgb-nav,
.rgb-nav.is-scrolled{ }
.rgb-nav .container{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;}
.rgb-nav__brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.rgb-nav__brand img,.rgb-nav__brand svg{height:36px;width:auto;display:block;}
/* Swap de logotipo (fijo vs. invertido al hacer scroll) -- configurable en
   Personalizar -> Identidad del sitio, ver inc/customizer-nav-logo.php. Sin
   swap (.rgb-nav__brand sin la clase --swap) el logotipo negativo ni
   siquiera se imprime en el DOM, asi que estas reglas no aplican. Mismo
   patron de currentColor que ya usan el texto del menu y los iconos
   sociales, pero via display porque una imagen no puede cambiar de color
   con CSS. */
.rgb-nav__brand--swap .rgb-nav__logo--negativo{display:none;}
.rgb-nav.is-scrolled .rgb-nav__brand--swap .rgb-nav__logo--normal{display:none;}
.rgb-nav.is-scrolled .rgb-nav__brand--swap .rgb-nav__logo--negativo{display:flex;}
.rgb-nav__brand-text{font-family:var(--font-heading);font-weight:700;color:var(--primary-ink);text-transform:uppercase;letter-spacing:.03em;}
.rgb-nav:not(.is-scrolled) .rgb-nav__brand-text{color:var(--ink);}

.rgb-menu{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;}
.rgb-menu > li{position:relative;}
.rgb-menu > li > a{
  display:block;position:relative;padding:10px 14px;font-size:.92rem;font-weight:600;
  color:var(--ink-soft);border-radius:6px;transition:color var(--transition-base), background var(--transition-base);
}
/*
 * Hover apenas se notaba (bug reportado): antes el unico cambio era el
 * color de texto de --ink-soft a --accent, dos tonos de luminancia
 * parecida en varias marcas (ej. VOO: --ink-soft #7C8A80 vs --accent
 * #C9A566), asi que el cambio de color solo no se percibia bien. Se anade
 * el mismo patron de subrayado-que-crece-desde-el-centro ya validado en
 * el footer (.rgb-footer__ecosystem, ver seccion 7 de este archivo) --
 * independiente del color de fondo detras del nav (transparente sobre el
 * Hero, o solido al hacer scroll), asi que siempre es visible.
 */
.rgb-menu > li > a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform var(--transition-base);pointer-events:none;}
.rgb-nav.is-scrolled .rgb-menu > li > a{color:var(--primary-ink);}
.rgb-menu > li > a:hover,.rgb-menu > li.current-menu-item > a{color:var(--accent);}
.rgb-menu > li > a:hover::after,.rgb-menu > li.current-menu-item > a::after{transform:scaleX(1);}
.rgb-nav.is-scrolled .rgb-menu > li > a:hover{background:rgba(255,255,255,.14);}
/*
 * Bug corregido: en el estado is-scrolled, la regla de color de esa
 * clase (.rgb-nav.is-scrolled .rgb-menu > li > a, 3 clases) tenia MAS
 * especificidad que la regla de :hover de arriba (.rgb-menu > li >
 * a:hover, 2 clases) y siempre ganaba -- el subrayado y el fondo sutil
 * si se veian al hacer hover en el nav ya scrolleado, pero el texto
 * nunca cambiaba a --accent ("la animacion hover no funciona, ni en
 * ambos estados"). Se agrega la misma regla con el prefijo
 * .rgb-nav.is-scrolled para igualar/superar esa especificidad.
 */
.rgb-nav.is-scrolled .rgb-menu > li > a:hover,
.rgb-nav.is-scrolled .rgb-menu > li.current-menu-item > a{color:var(--accent);}

/* Nivel 2 y 3 -- mega-menu desplegable */
.rgb-menu .sub-menu{
  position:absolute;top:100%;left:0;min-width:220px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index:10;
}
.rgb-menu li:hover > .sub-menu,
.rgb-menu li.rgb-submenu-open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.rgb-menu .sub-menu li{position:relative;}
.rgb-menu .sub-menu a{display:block;padding:9px 12px;border-radius:6px;font-size:.88rem;color:var(--ink-soft);}
.rgb-menu .sub-menu a:hover{background:var(--paper);color:var(--accent);}
.rgb-menu .sub-menu .sub-menu{top:-8px;left:100%;margin-left:6px;} /* nivel 3 */

.rgb-nav__social{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.rgb-nav__social a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-soft);transition:background var(--transition-base), color var(--transition-base);}
.rgb-nav.is-scrolled .rgb-nav__social a{color:var(--primary-ink);}
.rgb-nav__social a:hover{background:var(--accent);color:var(--accent-ink);}
.rgb-nav__social svg{width:16px;height:16px;fill:currentColor;}

.rgb-nav__toggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0;}
.rgb-nav__toggle span{display:block;height:2px;width:100%;background:var(--ink-soft);border-radius:2px;transition:background var(--transition-base);}
.rgb-nav.is-scrolled .rgb-nav__toggle span{background:var(--primary-ink);}

@media (max-width:960px){
  .rgb-nav__toggle{display:flex;}
  .rgb-menu{
    position:fixed;inset:var(--nav-height) 0 0 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-raised);padding:16px;overflow-y:auto;
    transform:translateX(100%);transition:transform var(--transition-base);
  }
  body.rgb-nav-open .rgb-menu{transform:translateX(0);}
  .rgb-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;display:none;margin-left:12px;}
  .rgb-menu li.rgb-submenu-open > .sub-menu{display:block;}
  .rgb-nav__social{display:none;}
}

/* ==========================================================================
   4. HERO -- full width, 3 variantes configurables por Customizer:
   imagen fija / URL de video / slider (flechas + dots)
   ========================================================================== */
.rgb-hero{position:relative;width:100%;min-height:min(88vh,860px);display:flex;align-items:center;overflow:hidden;color:var(--primary-ink);}
.rgb-hero__bg{position:absolute;inset:0;z-index:0;transition:transform .2s ease-out;} /* Jorge 17-sep-2026: mousemove parallax del Hero (assets/js/hero-mousemove.js) escribe su propio transform inline en cada movimiento del cursor -- esta transition corta suaviza el seguimiento (evita que se sienta "pegado" al pixel del mouse) y tambien anima el regreso a 0 en mouseleave; no choca con .rgb-hero .rgb-hero__bg img,video (esos no llevan transform propio). */
.rgb-hero__bg img,.rgb-hero__bg video{width:100%;height:100%;object-fit:cover;}
/* pointer-events:none en scrim/inner -- ninguna de las dos capas necesita
   recibir clicks, pero al ser cajas full-width/relativamente altas SI
   interceptaban (hit-test) los de las flechas y los dots del slider, que
   viven dentro de .rgb-hero__bg. Su z-index:3 no ayudaba: .rgb-hero__bg
   crea su propio contexto de apilamiento (position+z-index:0), asi que
   ese 3 solo compite contra otros hijos de .rgb-hero__bg, nunca contra
   .rgb-hero__scrim/.rgb-hero__inner (hermanos con z-index 1 y 2) -- por
   eso "las flechas y marcadores no responden a clic" pese a tener un
   z-index nominal mas alto. Confirmado en vivo con elementFromPoint()
   antes de aplicar el fix: los 3 targets devolvian .rgb-hero__scrim. */
.rgb-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(17,19,24,.55), rgba(17,19,24,.72));pointer-events:none;}

/* Watermark del Hero (isotipo/marca de agua, por marca via Customizer):
   HERMANO de .rgb-hero__bg (no hijo) a proposito -- el comentario de
   arriba ya documenta que .rgb-hero__bg crea su propio contexto de
   apilamiento (position+z-index:0), asi que un z-index puesto en un hijo
   suyo nunca compite contra .rgb-hero__scrim/.rgb-hero__inner, solo
   contra otros hijos de .rgb-hero__bg. Puesto como hermano, con
   z-index:2, queda: video (0) -> scrim (1) -> watermark (2) -> texto (3,
   ver .rgb-hero__inner abajo) -- sobre el video, debajo del texto, tal
   como se pidio. La opacidad es una custom property por instancia
   (--rgb-hero-watermark-opacity, inline desde hero.php) porque cada marca
   configura su propio isotipo desde Apariencia -> Personalizar y puede
   necesitar un valor distinto. */
.rgb-hero__watermark{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:var(--rgb-hero-watermark-opacity,.14);transition:transform .2s ease-out;}
.rgb-hero__watermark img{max-width:calc(42% * var(--rgb-hero-watermark-scale,1));max-height:calc(60% * var(--rgb-hero-watermark-scale,1));width:auto;height:auto;object-fit:contain;}

.rgb-hero__inner{position:relative;z-index:3;width:100%;text-align:center;padding:64px 0;pointer-events:none;}
.rgb-hero__inner a,.rgb-hero__inner button{pointer-events:auto;}
.rgb-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);margin-bottom:18px;}
.rgb-hero p.rgb-hero__subtitle{font-size:1.15rem;max-width:680px;margin:0 auto 28px;opacity:.92;}
.rgb-hero__cta{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.rgb-btn{display:inline-block;padding:13px 28px;border-radius:999px;font-weight:700;font-size:.92rem;letter-spacing:.02em;transition:transform var(--transition-base), background var(--transition-base);}
.rgb-btn--accent{background:var(--accent);color:var(--accent-ink);}
.rgb-btn--accent:hover{background:var(--accent-hover);transform:translateY(-2px);}
.rgb-btn--ghost{border:1.5px solid rgba(255,255,255,.6);color:var(--primary-ink);}
.rgb-btn--ghost:hover{background:rgba(255,255,255,.12);}
/* .rgb-btn--ghost asume texto claro sobre fondo oscuro (correcto en el cookie
   banner, .rgb-cookie-bar es oscuro) pero el modal de edad tiene una tarjeta
   CLARA (.rgb-age-gate__card, fondo --paper-raised) -- ahi el mismo texto casi
   blanco (--primary-ink) quedaba casi invisible sobre el fondo blanco. Se
   sobreescribe solo en ese contexto. */
.rgb-age-gate .rgb-btn--ghost{color:var(--ink);border-color:rgba(17,19,24,.35);}
.rgb-age-gate .rgb-btn--ghost:hover{background:rgba(17,19,24,.08);}

/* Slider */
.rgb-hero--slider .rgb-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 600ms ease;}
.rgb-hero--slider .rgb-hero__slide.is-active{opacity:1;visibility:visible;position:relative;}
.rgb-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--transition-base);}
.rgb-hero__arrow:hover{background:rgba(255,255,255,.32);}
.rgb-hero__arrow--prev{left:20px;}
.rgb-hero__arrow--next{right:20px;}
.rgb-hero__dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px;}
.rgb-hero__dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:background var(--transition-base), transform var(--transition-base);}
.rgb-hero__dots button.is-active{background:#fff;transform:scale(1.25);}

/* ==========================================================================
   5. PARALLAX -- on/off por seccion via data-rgb-parallax
   ========================================================================== */
[data-rgb-parallax]{position:relative;overflow:hidden;}
[data-rgb-parallax] .rgb-parallax__layer{will-change:transform;}
@media (prefers-reduced-motion: reduce){
  [data-rgb-parallax] .rgb-parallax__layer{transform:none!important;}
}

/* ==========================================================================
   6. FICHA (CPT reutilizable: servicio / proyecto / producto / cliente)
   ========================================================================== */
.rgb-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;}
.rgb-ficha{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform var(--transition-base), box-shadow var(--transition-base);}
.rgb-ficha:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.rgb-ficha__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper);}
.rgb-ficha__media img{width:100%;height:100%;object-fit:cover;}
.rgb-ficha__body{padding:20px;}
.rgb-ficha__cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;}
.rgb-ficha__title{font-size:1.1rem;margin:6px 0 8px;}
.rgb-ficha__excerpt{color:var(--ink-soft);font-size:.92rem;}

/* Migas de pan + enlace "Volver" de single-ficha.php -- el enlace usa
   history.back() (assets/js/breadcrumb.js) cuando hay historial real del
   sitio, para regresar al Showcase exactamente donde el usuario dio click
   a "+ Mas" (mismo filtro activo, misma posicion de scroll). */
.rgb-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-soft);margin-bottom:18px;}
.rgb-breadcrumb a{color:var(--ink-soft);}
.rgb-breadcrumb a:hover,.rgb-breadcrumb__back:hover{color:var(--accent);}
.rgb-breadcrumb__sep{color:var(--line);}
.rgb-breadcrumb__current{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38ch;}

/* ==========================================================================
   7. FOOTER DEL ECOSISTEMA -- acomodo/posicion/transiciones/colores
   igualados al patron ya validado en los sitios en vivo del holding
   (VOO Solutions, Smiðr, Hugr, Meraki, Verkþing -- inspeccionado en vivo
   17-sep-2026): columna centrada, enlaces de marca subrayados con una
   linea que crece desde el centro al hover (color var(--accent), nunca
   un color de marca fijo -- cada Child ya trae el suyo), y los iconos de
   redes sociales con SU PROPIO estilo/hover sin tocar (instruccion
   explicita de Jorge: la transicion de hover es solo para los enlaces
   de marca, no para los iconos).
   ========================================================================== */
.rgb-footer{background:var(--ink);color:var(--paper-raised);text-align:center;padding:40px 0 28px;width:100%;}
.rgb-footer__logo{margin-bottom:14px;}
.rgb-footer__logo img{height:56px;width:auto;margin:0 auto;}
/* Leyenda de copyright -- va justo debajo del logo (acomodo confirmado por
   Jorge 17-sep-2026: logo, leyenda, enlaces de marca, iconos sociales, en
   ese orden). Ya incluye el nombre del sitio via get_bloginfo('name'), por
   lo que no hay un bloque de nombre/tagline por separado. */
.rgb-footer__legend{font-size:.78rem;color:rgba(255,255,255,.5);max-width:480px;margin:0 auto 24px;}

/* Enlaces de marca: mismo patron base en las 5 referencias -- subrayado
   fijo tenue, y al hover el color/subrayado pasan a var(--accent) con un
   ::after que crece desde el centro (transform:scaleX, transition .3s). */
.rgb-footer a{color:inherit;text-decoration:none;}
.rgb-footer__ecosystem{opacity:.75;font-size:.78rem;margin:0 0 20px;}
.rgb-footer__ecosystem a{position:relative;border-bottom:1px solid rgba(255,255,255,.4);}
.rgb-footer__ecosystem a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.rgb-footer__ecosystem a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .3s ease;pointer-events:none;}
.rgb-footer__ecosystem a:hover::after{transform:scaleX(1);}
.rgb-footer__ecosystem span{opacity:.5;}

/* Iconos de redes sociales -- estilo propio sin cambios (circulo con
   fondo tenue, invierte a var(--accent) solido al hover). */
.rgb-footer__social{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:0;}
.rgb-footer__social a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);transition:background var(--transition-base), color var(--transition-base);}
.rgb-footer__social a:hover{background:var(--accent);color:var(--accent-ink);}
.rgb-footer__social svg{width:16px;height:16px;fill:currentColor;}

/* ==========================================================================
   8. Integraciones -- cookie banner / whatsapp tooltip / edad
   (estilos base; el markup/logica vive en los plugins RGStudio_plugin_*)
   ========================================================================== */
.rgb-cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--ink);color:var(--paper-raised);padding:18px var(--gutter);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;box-shadow:0 -8px 24px rgba(0,0,0,.18);}
.rgb-cookie-bar[hidden]{display:none;}
.rgb-cookie-bar p{font-size:.86rem;max-width:640px;}
.rgb-cookie-bar__actions{display:flex;gap:10px;flex-shrink:0;}

.rgb-whatsapp-tooltip{position:fixed;right:22px;bottom:22px;z-index:850;display:flex;align-items:center;gap:10px;}
.rgb-whatsapp-tooltip__bubble{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.82rem;box-shadow:var(--shadow-soft);max-width:200px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--transition-base), transform var(--transition-base);}
.rgb-whatsapp-tooltip.is-open .rgb-whatsapp-tooltip__bubble{opacity:1;visibility:visible;transform:translateY(0);}
.rgb-whatsapp-tooltip__btn{width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);}
.rgb-whatsapp-tooltip__btn svg{width:28px;height:28px;fill:currentColor;}

.rgb-age-gate{position:fixed;inset:0;z-index:999;background:rgba(17,19,24,.92);display:flex;align-items:center;justify-content:center;padding:24px;}
.rgb-age-gate[hidden]{display:none;}
.rgb-age-gate__card{background:var(--paper-raised);color:var(--ink);border-radius:var(--radius);padding:36px;max-width:420px;text-align:center;}
.rgb-age-gate__actions{display:flex;gap:12px;justify-content:center;margin-top:24px;}

/* ==========================================================================
   9. Loader Lottie -- mecanismo unico (RGStudio_plugin_LoaderMarca)
   Tamano validado por Jorge en RGStudio_Loader_Isotipo_preview.html: 630x630px
   (no inventar otro valor -- ver preview oficial en Branding/). Se limita a
   80vw para no desbordar en pantallas angostas sin cambiar el tamano validado
   en desktop.
   ========================================================================== */
.rgb-loader{position:fixed;inset:0;z-index:9999;background:var(--rgb-loader-bg, var(--paper-raised));display:flex;align-items:center;justify-content:center;transition:opacity 500ms ease;}
.rgb-loader-hidden{opacity:0;pointer-events:none;}
.rgb-loader__anim{width:min(630px,80vw);height:min(630px,80vw);}

@media (min-width:961px){
  .rgb-nav__toggle{display:none;}
}