/* ============================================================
   Design tokens — AISLADOS en .grexg2 (no en :root) para no colisionar
   con el tema anfitrión ni con otros plugins. Cada widget se renderiza
   dentro de un contenedor .grexg2 (ver AbstractWidget), por lo que estas
   variables sólo existen dentro de nuestro subárbol.
   Portados 1:1 del sistema visual de ScaleReady.
   ============================================================ */
.grexg2 {
	/* Brand */
	--c-ink-deep: #0E1D41;
	--c-ink: #244378;
	--c-accent: #f97316;
	--c-accent-hov: #ea580c;
	--c-accent-soft: #fff5ec;
	--c-glow: #22d3ee;
	--c-glow-soft: #ecfeff;
	--c-white: #ffffff;

	/* Text */
	--c-text: #33405a;
	--c-text-soft: #68738a;
	--c-border: #e5eaf1;
	--c-line: #eef1f6;

	/* Status */
	--c-yes: #10b981;
	--c-yes-bg: rgba(16,185,129,.12);
	--c-yes-bd: rgba(16,185,129,.28);
	--c-yes-text: #0f7a55;
	--c-no: #ef4757;
	--c-no-bg: rgba(239,71,87,.10);
	--c-no-bd: rgba(239,71,87,.28);
	--c-no-text: #d23f4d;
	--c-warn: #f59e0b;
	--c-warn-bg: rgba(245,158,11,.12);
	--c-warn-bd: rgba(245,158,11,.28);
	--c-warn-text: #a86a12;

	/* Typography (fuentes self-hosted vía @font-face inline con URL absoluta;
	   fallback a "Barlow"/"Mulish" si el sitio destino ya las tiene cargadas). */
	--font-display: "GRexG2 Barlow", "Barlow", "Helvetica Neue", Arial, sans-serif;
	--font-body: "GRexG2 Mulish", "Mulish", "Helvetica Neue", Arial, sans-serif;

	/* Radii */
	--r-sm: 6px;
	--r-md: 12px;
	--r-btn: 12px; /* radius de botón = home scaleready.com (menos redondeado) */
	--r-lg: 16px;
	--r-xl: 22px;
	--r-pill: 999px;

	/* Shadows */
	--sh-soft: 0 4px 15px rgba(20,29,55,.05);
	--sh-card: 0 10px 30px rgba(20,29,55,.06);
	--sh-card-hov: 0 18px 44px rgba(20,29,55,.12);
	--sh-glass: 0 20px 50px rgba(36,67,120,.12);

	/* Spacing scale */
	--sp-xs: .44rem;
	--sp-sm: .67rem;
	--sp-md: 1rem;
	--sp-lg: 1.5rem;
	--sp-xl: 2.25rem;
	--sp-2xl: 3.38rem;
	--sp-3xl: 5.06rem;

	/* Motion */
	--ease-expo: cubic-bezier(.16,1,.3,1);
	--ease-out: cubic-bezier(.2,.7,.2,1);
	--t-reveal: .7s;
	--t-micro: .22s;

	/* Layout */
	--sr-container: 1200px;
	--sr-gutter: clamp(1.25rem, 4vw, 3rem);

	/* Base tipográfica del subárbol (no toca el body del sitio anfitrión).
	   font-size/line-height/font-weight explícitos = baseline propio, para no
	   heredar los del tema del destino (que aplica 1.5em/1.41667em/700 en sus <h*>). */
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	color: var(--c-text);
	-webkit-font-smoothing: antialiased;
}
.grexg2 *, .grexg2 *::before, .grexg2 *::after { box-sizing: border-box; }

/* ============================================================
   REFUERZO — neutraliza estilos del tema anfitrión / Elementor dentro de
   .grexg2. Usa :where() para que la especificidad sea solo la de .grexg2
   (0,1,0): le gana a reglas de elemento del tema (p{}, td{}, a{}) PERO NO
   pisa las reglas propias de cada widget (.sr-x .y, que son 0,2,x). Así el
   plugin se ve igual en cualquier tema, sin depender de la herencia.
   ============================================================ */
/* .grexg2.grexg2 = especificidad (0,2,0): le gana a reglas de clase del tema
   (.elementor p / .elementor td = 0,1,1) pero NO a las reglas propias de los
   widgets (.sr-x .y = 0,2,1, que cargan después). :where() no suma nada. */
/* Tipografía: fuerza las fuentes de marca en texto de cuerpo y encabezados.
   IMPORTANTE: nunca se toca el `color` de inline (span/em/strong/b/small/i/a).
   Esas etiquetas son donde los widgets ponen los acentos de color
   (p.ej. `.sr-g2suite h2 em{color:var(--c-accent)}` = 0,1,2); si aquí
   pusiéramos `color:inherit` (0,2,0) lo pisaríamos y perderían el naranja. */
.grexg2.grexg2 :where(p, li, dd, dt, blockquote, figcaption) { font-family: var(--font-body); font-weight: 400; color: var(--c-text); }
.grexg2.grexg2 :where(caption, label, input, select, textarea, button) { font-family: var(--font-body); }
.grexg2.grexg2 :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); }
/* Inline: sólo heredan la fuente del contexto; el color lo deciden los widgets. */
.grexg2.grexg2 :where(span, em, strong, b, small, i, a) { font-family: inherit; }
/* Line-height de pills/labels/chips/etc.: fijo a 1.5 (= local) para que no hereden
   el line-height en px que el tema del destino deriva de `1.41667em` en sus <h*>,
   lo que inflaba la altura de las píldoras. Un valor propio corta esa herencia. */
.grexg2.grexg2 :where([class*="chip"], [class*="eyebrow"], [class*="kicker"], [class*="label"], [class*="badge"], [class*="-tag"], [class*="pill"], [class*="btn"], [class*="-cta"], [class*="-link"], [class*="-main"]) { line-height: 1.5; }
/* El tema del destino estila `label` pelado (font-size:1.375rem;font-weight:700) y nuestros
   wrappers de campo son <label class="ts-field">; reset a baseline (los labels con estilo
   propio como .ts-check lo re-afirman por especificidad/orden de carga). */
.grexg2 :where(label) { font-size: 1rem; line-height: 1.5; font-weight: 400; }
/* El tema del destino mete margin-bottom a inputs/labels de formulario, que se suma
   al gap del modal y agranda los huecos entre campos; reset a 0 (el gap manda). */
.grexg2 .ts-field, .grexg2 .g2c-field, .grexg2 .g2c-doc-opt,
.grexg2 .ts-field :where(input, select, textarea),
.grexg2 .g2c-field :where(input, select, textarea) { margin: 0; }
/* El tema fuerza height fijo a los inputs y font/padding grande a los <button>
   (Cancel enorme, botón cerrar .g2c-modal-x deformado); reset a auto/0. */
.grexg2 .ts-field :where(input, select, textarea),
.grexg2 .g2c-field :where(input, select, textarea) { height: auto; }
.grexg2 .ts-cancel { font-size: 1rem; line-height: 1.5; padding: .85em 1.2em; }
.grexg2 .g2c-modal-x { padding: 0; }
.grexg2 .g2c-doc-opt { line-height: 1.3; color: var(--c-text); }
.grexg2 .g2c-doc-opt input, .grexg2 .g2c-modal-news input, .grexg2 .ts-check input { margin: 1px 0 0 0; }
/* Links de prosa sin subrayado impuesto (los widgets definen color/decoración). */
.grexg2.grexg2 :where(a) { text-decoration: none; }
/* Tablas: anula el reset.css de Elementor (bordes grises en los 4 lados + zebra). */
.grexg2.grexg2 :where(table) { border-collapse: collapse; background: transparent; }
.grexg2.grexg2 :where(thead, tbody, tfoot, tr) { background: transparent; }
.grexg2.grexg2 :where(th, td) { border: 0; background: transparent; }

/* Reduced motion (accesibilidad), acotado a nuestro subárbol. */
@media (prefers-reduced-motion: reduce) {
	.grexg2 *, .grexg2 *::before, .grexg2 *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Campo vacío en el editor: texto guía por CSS (jamás entra en el contenido). */
.grexg2 [data-ph]:empty::before { content: attr(data-ph); opacity: .45; font-style: italic; font-weight: 400; }
.grexg2 [data-ph]:empty { min-height: 1em; }
.grexg2 :is(span,b,i,small,strong)[data-ph]:empty { display: inline-block; min-width: 6em; }