/* ===== josemedina.es · Modo claro (por defecto) y modo oscuro =====
   Bricks guarda las variables --jm-* con los valores del diseño OSCURO. Aquí:
   1) Modo CLARO (por defecto, sin atributo o data-brx-theme="light"): se redefinen las variables
      (estilo limpio tipo webartesanal.com: blanco + gris azulado muy claro, texto marino, acentos índigo).
   2) Modo OSCURO (data-brx-theme="dark", elemento "Alternar modo" de Bricks): diseño oscuro original,
      y las secciones claras pasan a azul marino (sin secciones blancas).
   :root:not([data-brx-theme="dark"]) tiene más especificidad que el :root de Bricks, el orden no importa. */

/* ---------- Variables · modo claro ---------- */
:root:not([data-brx-theme="dark"]) {
	color-scheme: light;
	--jm-fondo: #FFFFFF;
	--jm-fondo-profundo: #F7F9FC;
	--jm-superficie: #FFFFFF;
	--jm-superficie-clara: #FFFFFF;
	--jm-texto: #101D35;
	--jm-texto-2: #4C5870;
	--jm-blanco: #0B1530;          /* "texto fuerte" (titulares de tarjetas, precios): en claro, marino */
	--jm-claro: #F3F6FD;           /* secciones alternas */
	--jm-tinta: #0B1530;
	--jm-tinta-2: #4C5870;
	--jm-borde-oscuro: #E6EBF4;
	--jm-borde-claro: #E2E8F0;
	--jm-acento: #4F46E5;          /* antetítulos y acentos de texto (AA sobre blanco) */
	--jm-enlace: #4F46E5;
	--jm-sombra-suave: 0 12px 32px -14px rgba(16, 29, 53, .16);
}

/* ---------- Variables · modo oscuro ---------- */
:root[data-brx-theme="dark"] {
	color-scheme: dark;
	--jm-acento: #22D3EE;
	--jm-enlace: #818CF8;
	--jm-superficie-clara: #13224A;
	--jm-claro: #0F1D3D;           /* las secciones "claras" pasan a marino */
	--jm-tinta: #E2E8F0;
	--jm-tinta-2: #94A3B8;
	--jm-borde-claro: rgba(255, 255, 255, .1);
	--jm-sombra-suave: 0 12px 32px -14px rgba(0, 0, 0, .55);
}

/* ======================= MODO CLARO · componentes ======================= */
:root:not([data-brx-theme="dark"]) {
	scrollbar-color: #CBD5E1 #FFFFFF;
}
:root:not([data-brx-theme="dark"]) ::-webkit-scrollbar-track { background: #FFFFFF; }
:root:not([data-brx-theme="dark"]) ::-webkit-scrollbar-thumb { background: #CBD5E1; border-color: #FFFFFF; }

/* Cabecera con fondo al hacer scroll */
:root:not([data-brx-theme="dark"]) #brx-header::before {
	background-color: rgba(255, 255, 255, .88);
	border-bottom-color: var(--jm-borde-claro);
}

/* Logos: versión clara (letras marino) o versión oscura (letras blancas) según el modo */
:root:not([data-brx-theme="dark"]) .jm-logo-oscuro-only { display: none !important; }
:root[data-brx-theme="dark"] .jm-logo-claro-only { display: none !important; }

/* Enlaces en textos */
:root:not([data-brx-theme="dark"]) :is(.brxe-text, .brxe-text-basic) a { color: var(--jm-enlace); }

/* Botón secundario */
:root:not([data-brx-theme="dark"]) .jm-btn--ghost { color: var(--jm-tinta); box-shadow: inset 0 0 0 1px #CBD5E1; }
:root:not([data-brx-theme="dark"]) .jm-btn--ghost:hover { background: #FFFFFF; color: var(--jm-tinta); box-shadow: inset 0 0 0 1px var(--jm-indigo-oscuro); }

/* Pills */
:root:not([data-brx-theme="dark"]) .jm-pill { color: var(--jm-indigo-oscuro); background: rgba(79, 70, 229, .08); }

/* Tarjetas, planes y mega menú: blanco con borde fino y sombra suave */
:root:not([data-brx-theme="dark"]) :is(.jm-card, .jm-plan) {
	border-color: var(--jm-borde-claro);
	box-shadow: var(--jm-sombra-suave);
}
:root:not([data-brx-theme="dark"]) .jm-card:hover {
	border-color: rgba(79, 70, 229, .35);
	box-shadow: 0 24px 50px -24px rgba(79, 70, 229, .35);
}
:root:not([data-brx-theme="dark"]) .jm-card::before { background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(99, 102, 241, .10), transparent 55%); }
:root:not([data-brx-theme="dark"]) .jm-card--featured { border-color: rgba(79, 70, 229, .35); background: linear-gradient(160deg, rgba(99, 102, 241, .10), #FFFFFF 55%); }
:root:not([data-brx-theme="dark"]) .jm-mega { box-shadow: 0 40px 80px -30px rgba(16, 29, 53, .22); }
:root:not([data-brx-theme="dark"]) .jm-mega__item:hover { background: var(--jm-claro); }
:root:not([data-brx-theme="dark"]) .jm-mega__todos { color: var(--jm-indigo-oscuro); }

/* Hero: orbes suaves, rejilla de puntos oscura, chips blancos */
:root:not([data-brx-theme="dark"]) .jm-hero__bg::before,
:root:not([data-brx-theme="dark"]) .jm-hero__bg::after { opacity: .16; }
:root:not([data-brx-theme="dark"]) .jm-hero__dots { background-image: radial-gradient(rgba(16, 29, 53, .13) 1px, transparent 1.5px); }
:root:not([data-brx-theme="dark"]) .jm-hero__escudo { opacity: .08; }
:root:not([data-brx-theme="dark"]) .jm-hero__foto { box-shadow: 0 40px 80px -30px rgba(79, 70, 229, .35); }
:root:not([data-brx-theme="dark"]) .jm-chip {
	background: rgba(255, 255, 255, .92);
	color: var(--jm-tinta);
	border-color: var(--jm-borde-claro);
	box-shadow: 0 16px 30px -14px rgba(16, 29, 53, .25);
}
:root:not([data-brx-theme="dark"]) .jm-chip :is(i, svg) { color: var(--jm-indigo-oscuro); }
:root:not([data-brx-theme="dark"]) .jm-scroll { border-color: rgba(16, 29, 53, .25); }
:root:not([data-brx-theme="dark"]) .jm-scroll::after { background: var(--jm-indigo-oscuro); }

/* Banda CTA: degradado de marca con texto blanco (como la banda azul de la referencia) */
:root:not([data-brx-theme="dark"]) .jm-cta {
	background: var(--jm-degradado-boton);
	border-color: transparent;
	color: #FFFFFF;
	box-shadow: 0 40px 80px -40px rgba(79, 70, 229, .6);
}
:root:not([data-brx-theme="dark"]) .jm-cta::before,
:root:not([data-brx-theme="dark"]) .jm-cta::after { opacity: .3; background: #FFFFFF; }
:root:not([data-brx-theme="dark"]) .jm-cta :is(h2, h3, p, .jm-lead) { color: #FFFFFF; }
:root:not([data-brx-theme="dark"]) .jm-cta .jm-lead { color: rgba(255, 255, 255, .88); }
:root:not([data-brx-theme="dark"]) .jm-cta .jm-grad { background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
:root:not([data-brx-theme="dark"]) .jm-cta .jm-btn:not(.jm-btn--whatsapp):not(.jm-btn--ghost) { background: #FFFFFF; color: var(--jm-indigo-oscuro); }
:root:not([data-brx-theme="dark"]) .jm-cta .jm-ripple::before,
:root:not([data-brx-theme="dark"]) .jm-cta .jm-ripple::after,
:root:not([data-brx-theme="dark"]) .jm-cta .jm-ripple__ring { border-color: rgba(255, 255, 255, .55); }

/* Pie */
:root:not([data-brx-theme="dark"]) .jm-footer { border-top: 1px solid var(--jm-borde-claro); }
:root:not([data-brx-theme="dark"]) .jm-footer::before { opacity: .08; }
:root:not([data-brx-theme="dark"]) .jm-social a { border-color: var(--jm-borde-claro); }
:root:not([data-brx-theme="dark"]) .jm-social a:hover { background: var(--jm-claro); border-color: var(--jm-indigo-oscuro); }

/* Formularios */
:root:not([data-brx-theme="dark"]) .jm-form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select) { border-color: #CBD5E1; }

/* Ilustración IL-01 sobre fondo claro: bocadillos claros */
:root:not([data-brx-theme="dark"]) .jm-il svg [fill="#0F1D3D"] { fill: #FFFFFF; }
:root:not([data-brx-theme="dark"]) .jm-il svg [stroke="#E2E8F0"] { stroke: #101D35; }
:root:not([data-brx-theme="dark"]) .jm-il svg [fill="#0B1530"] { fill: #FFFFFF; }
:root:not([data-brx-theme="dark"]) .jm-il svg [fill="#E2E8F0"] { fill: #101D35; }

/* ======================= MODO OSCURO · secciones "claras" en marino ======================= */
:root[data-brx-theme="dark"] .jm-section--light :is(.jm-eyebrow, .brxe-text a, .brxe-text-basic a) { color: var(--jm-acento); }
:root[data-brx-theme="dark"] .jm-section--light .jm-btn--ghost { color: var(--jm-tinta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
:root[data-brx-theme="dark"] .jm-section--light .jm-btn--ghost:hover { background: var(--jm-superficie); color: #FFFFFF; }
:root[data-brx-theme="dark"] .jm-section--light .jm-pill { color: var(--jm-indigo-claro); background: rgba(99, 102, 241, .14); }
:root[data-brx-theme="dark"] .jm-section--light .jm-check li::before { background-color: var(--jm-cian); }
:root[data-brx-theme="dark"] .jm-card--light { box-shadow: none; }

/* ======================= Conmutador de modo ======================= */
.jm-mode-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--jm-borde-claro); color: var(--jm-texto); background: transparent; cursor: pointer; transition: background .25s, border-color .25s; }
.jm-mode-toggle:hover { background: var(--jm-claro); border-color: var(--jm-indigo-claro); }
:root[data-brx-theme="dark"] .jm-mode-toggle { border-color: rgba(255, 255, 255, .16); }
:root[data-brx-theme="dark"] .jm-mode-toggle:hover { background: var(--jm-superficie); }


/* Botón secundario dentro de la banda CTA en modo claro (fondo degradado): blanco */
:root:not([data-brx-theme="dark"]) .jm-cta .jm-btn--ghost { color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); background: transparent; }
:root:not([data-brx-theme="dark"]) .jm-cta .jm-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; }