/*
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;
}
.rgb-nav.is-scrolled{
  background:var(--primary);
  box-shadow:var(--shadow-soft);
  border-bottom-color:var(--line);
}
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;}
.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;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);
}
.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-nav.is-scrolled .rgb-menu > li > a:hover{background:rgba(255,255,255,.08);}

/* 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;}
.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;}
.rgb-hero__inner{position:relative;z-index:2;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:10px;}
.rgb-footer__logo img{height:56px;width:auto;margin:0 auto;}
.rgb-footer__brand{font-family:var(--font-heading);font-weight:700;font-size:1.2rem;margin-bottom:8px;}
.rgb-footer__tagline{color:rgba(255,255,255,.65);font-size:.92rem;max-width:420px;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:20px 0;}
.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:20px;}
.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;}

.rgb-footer__bottom{font-size:.78rem;color:rgba(255,255,255,.5);}

/* ==========================================================================
   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(--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;}
}