/* El tema nuevo en las páginas de dplasesores.com que no son por capítulos (blog, tiendas online, marketplaces, zonas,
   preguntas, legales…), sin tocar su contenido. La barra, el menú del teléfono y el pie los pone construir_sitio.py
   (los mismos de las plantillas, con css/marco.css). Aquí: el fondo 3D detrás (js/fondo.min.js); los colores de sus
   dos hojas antiguas (tema.css y el <style> de cada página) llevados a los del tema nuevo, para que cambien con él;
   y sus piezas (portadas, botones, tarjetas, tablas, preguntas…) con el aspecto de las de capítulos (experiencia.css).
   Va después de sus estilos, y con !important donde ellas lo ponen en línea. */

/* ── El 3D va detrás de todo: el fondo pasa a <html> y el de <body> se aparta ── */
html { background: var(--fondo); }
body { background: transparent !important; }
#fondo-3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fondo-listo #fondo-3d { opacity: 1; }
.fondo-velo { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background: radial-gradient(ellipse 75% 65% at 38% 42%, rgba(var(--fondo-rgb), .82), rgba(var(--fondo-rgb), .25) 75%); }
.sin-webgl #fondo-3d { display: none; }
.sin-webgl html, html.sin-webgl { background: radial-gradient(60% 50% at 78% 30%, var(--oferta-cielo), transparent 70%), var(--fondo); background-attachment: fixed; }
/* Sin cristal: con el 3D en movimiento, desenfocar obligaría a repintar en cada imagen */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* El aviso de cookies desenfoca el contenido hasta que se contesta; luego lo dejaba en blur(0), que sigue siendo un filtro
   sobre toda la página y se recompone en cada imagen (la pantalla de las reseñas, de 61 a 26 por segundo) */
body.cookies-accepted #mainContent { filter: none !important; transition: none !important; }

/* ── Los colores antiguos, apuntando a los del tema nuevo (comun.css): así siguen al botón de tema ── */
html:root, html:root[data-theme="light"] {
  /* tema.css: fuera el verde Shopify y el violeta; el cielo y el índigo de las páginas nuevas */
  --t-bg: var(--fondo); --t-card: var(--panel); --t-card-t: var(--panel); --t-card2: var(--panel); --t-raised: var(--panel);
  --t-line: var(--linea-fuerte); --t-dim: var(--tenue); --t-muted: var(--tenue); --t-soft: var(--suave); --t-strong: var(--tinta); --t-text: var(--tinta);
  --t-overlay: rgba(var(--fondo-rgb), .94); --t-overlay-full: rgba(var(--fondo-rgb), .97);
  --t-border: var(--linea); --t-border-soft: var(--linea); --t-border-strong: var(--linea-fuerte);
  --t-sky: var(--cielo); --t-blue: var(--cielo); --t-gold: var(--oro); --t-amber: var(--oro);
  --t-green: var(--cielo); --t-green-soft: var(--cielo);
  --t-indigo: var(--indigo); --t-indigo-soft: var(--indigo); --t-indigo-300: var(--indigo); --t-violet: var(--indigo); --t-indigo-deep: var(--panel);
  /* el <style> de tiendas online, marketplaces y zonas */
  --bg: var(--fondo); --card: var(--panel); --text: var(--tinta); --muted: var(--suave); --a1: var(--indigo); --a2: var(--cielo);
  --gold: var(--oro); --green: var(--cielo); --border: var(--linea); --font: var(--texto);
  /* el de blog, preguntas, legales y el resto */
  --bg-color: var(--fondo); --card-bg: var(--panel); --text-color: var(--tinta); --text-muted: var(--suave); --text-main: var(--tinta);
  --accent-1: var(--indigo); --accent-2: var(--cielo); --accent-primary: var(--cielo); --accent-cyan: var(--cielo); --primary: var(--cielo); --secondary: var(--indigo);
  --border-color: var(--linea); --border-light: var(--linea); --glass-bg: var(--panel); --glass-border: var(--linea); --bg-dark: var(--fondo);
  --font-main: var(--texto); --font-head: var(--display);
}

/* ── Las hojas antiguas dan estilo a header, nav, footer y p por etiqueta: que no toquen la barra, el menú ni el pie ── */
header.barra { height: auto !important; width: auto !important; z-index: 1000 !important; background: transparent; border-bottom: 1px solid transparent; }
header.barra.con-fondo { background: rgba(var(--fondo-rgb), .92) !important; border-bottom-color: var(--linea) !important; }
.barra .marca { color: var(--tinta) !important; }
.barra nav.menu { width: auto !important; flex: 0 1 auto; justify-content: flex-start !important; }
nav.menu-movil { z-index: 999 !important; width: auto !important; justify-content: initial !important; }
nav.menu-movil[hidden] { display: none !important; }
footer.pie { text-align: left !important; margin: 0 !important; }
.pie nav { width: auto !important; justify-content: flex-start !important; }
.pie p { margin: 0 !important; font-size: .8rem !important; color: var(--tenue) !important; }
.idiomas, .idiomas-fijo, #dplTema { display: none !important; }

/* ── Letra: la de las páginas nuevas ── */
body { font-family: var(--texto) !important; color: var(--tinta); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .sec, .hero-title, .hero-title-main, .section-title, .card-title, .hub-title { font-family: var(--display) !important; }
h1, .hero-title, .hero-title-main { font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.02 !important; }
h2 { font-weight: 700 !important; letter-spacing: -.025em !important; }
h3, h4 { font-weight: 600 !important; letter-spacing: -.01em; }
.hero h1, .landing-hero h1, .hero-title, .article-container h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem) !important; }
h2.sec, .cta-box h2, .section-title { font-size: clamp(1.7rem, 3vw, 2.5rem) !important; line-height: 1.1 !important; }
/* Las palabras de color de los títulos: el mismo brillo que «de tu caso.» */
.grad, .text-gradient, .gradient-text {
  background: var(--brilla) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ── Portadas de sección: sobre el 3D, sin el degradado verde o morado de antes ── */
.hero, .hero-section, .legal-section, .landing-hero, .tech-hero, .detail-hero,
[style*="var(--t-raised) 0%, var(--t-card) 100%"] { background: none !important; }   /* las portadas con el degradado en línea */
.bg-glow, .glow-1, .glow-2 { display: none !important; }
.hero-badge, .tech-badge, .card-tag, .badge-internal, .dpl-badge {
  border: 1px solid var(--linea-fuerte) !important; background: var(--panel) !important; color: var(--cielo) !important;
  font: 600 .74rem/1.4 var(--texto) !important; letter-spacing: .18em !important; border-radius: 999px !important;
}
.crumbs, .meta, .article-meta, .legal { color: var(--tenue) !important; }
.crumbs a { color: var(--tenue) !important; } .crumbs a:hover { color: var(--cielo) !important; }
.lead { color: var(--suave) !important; }

/* ── Botones: los de las páginas nuevas (el claro y el de línea) ── */
.btn-glow, .btn-submit, .btn-impact, .btn-action, .card-btn, .btn-compliance, .btn-home, .download, .btn-accept, .ck-ok,
.btn-unlock, .btn-select, .btn-modal, .filter-btn.active,
a[style*="background:var(--accent-1)"], a[style*="background: var(--accent-1)"], a[style*="var(--accent-primary)"],
a[style*="linear-gradient(135deg, var(--accent-1)"], a[style*="linear-gradient(135deg,var(--accent-1)"] {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 0 24px !important; border-radius: 999px !important; border: 1px solid transparent !important;
  background: var(--boton-fondo) !important; color: var(--boton-texto) !important; font: 600 .98rem/1 var(--texto) !important;
  box-shadow: none !important; text-decoration: none !important; cursor: pointer; transition: transform .3s var(--curva), box-shadow .3s;
}
.btn-glow:hover, .btn-submit:hover, .btn-impact:hover, .btn-action:hover, .card-btn:hover, .btn-compliance:hover, .btn-home:hover, .download:hover {
  transform: translateY(-2px); box-shadow: 0 10px 34px -8px var(--boton-sombra) !important; color: var(--boton-texto) !important;
}
.btn-sec, .btn-reject, .ck-no, .btn-print {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px !important;
  border-radius: 999px !important; border: 1px solid var(--linea-fuerte) !important; background: transparent !important;
  color: var(--tinta) !important; font: 600 .98rem/1 var(--texto) !important; text-decoration: none !important; cursor: pointer;
}
.btn-sec:hover, .btn-reject:hover, .ck-no:hover, .btn-print:hover { border-color: var(--cielo) !important; color: var(--cielo) !important; }

/* ── Tarjetas, recuadros y pastillas: el panel de las páginas nuevas ── */
.card, .glass-card, .feature-card, .detail-card, .secure-card, .login-card, .stat-box, .stat, .urgency-box, .proprietary-box, .compliance-info,
.hub-card, .calculator-widget, .calc-result, .highlight-box, .setup-container, .credential {
  background: var(--panel) !important; border: 1px solid var(--linea) !important; border-radius: 18px !important; box-shadow: none !important;
}
.card:hover, .feature-card:hover, .glass-card:hover, .hub-card:hover { border-color: var(--cielo) !important; box-shadow: none !important; }
.card a.more { color: var(--cielo) !important; }
.pill, .flags a { background: var(--panel) !important; border: 1px solid var(--linea) !important; color: var(--suave) !important; border-radius: 999px !important; }
.flags a:hover { border-color: var(--cielo) !important; color: var(--tinta) !important; }
.stat b, .stat-val { font-family: var(--display) !important; font-weight: 700 !important; }
/* «En resumen», como el resumen de las páginas nuevas */
.tldr { background: var(--panel) !important; border: 1px solid var(--linea) !important; border-left: 3px solid var(--cielo) !important; border-radius: 18px !important; }
.tldr h2 { font: 600 .8rem/1.4 var(--texto) !important; letter-spacing: .22em !important; color: var(--cielo) !important; }
.tldr p { color: var(--suave) !important; }
.note { background: var(--panel) !important; border: 1px solid var(--linea) !important; border-left: 3px solid var(--oro) !important; border-radius: 0 14px 14px 0 !important; }
.note p { color: var(--suave) !important; }
/* Llamadas a la acción del final */
.cta-box, .article-cta {
  border: 1px solid var(--linea-fuerte) !important; border-radius: 22px !important; box-shadow: none !important;
  background: radial-gradient(80% 120% at 50% 0%, var(--oferta-cielo), transparent 70%), var(--panel) !important;
}
/* Pasos numerados */
.step::before { background: var(--oferta-cielo) !important; border: 1px solid var(--cielo) !important; color: var(--cielo) !important; font-family: var(--display) !important; }
ul.chk li::before { color: var(--cielo) !important; }
/* Preguntas frecuentes: como las de las páginas nuevas */
.faq details { background: var(--panel) !important; border: 1px solid var(--linea) !important; border-radius: 16px !important; }
.faq details[open] { border-color: var(--linea-fuerte) !important; }
.faq summary { font-family: var(--display) !important; font-weight: 600 !important; color: var(--tinta) !important; }
.faq summary::after { color: var(--cielo) !important; font-weight: 400 !important; }
/* Tablas */
.tbl-wrap { border-color: var(--linea) !important; border-radius: 16px !important; background: var(--panel); }
th { background: rgba(var(--fondo-rgb), .55) !important; color: var(--tinta) !important; font-family: var(--display); font-weight: 600 !important; }
th, td { border-color: var(--linea) !important; }
td { color: var(--suave) !important; }
/* El índice de artículos del blog: tarjetas del panel (el violeta del ratón lo ponían en línea) */
#blog-static-index a { background: var(--panel) !important; border: 1px solid var(--linea) !important; border-radius: 16px !important; color: var(--tinta) !important; font-family: var(--display); }
#blog-static-index a:hover { border-color: var(--cielo) !important; }
/* Separación entre bloques y avisos de cookies con el panel nuevo */
main section { border-top-color: var(--linea) !important; }
#cookieWall .cookie-modal, #ckb { background: var(--panel) !important; border: 1px solid var(--linea-fuerte) !important; border-radius: 22px !important; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6) !important; }
.cookie-modal h2 { font-family: var(--display) !important; }

@media (max-width: 760px) {
  .hero h1, .landing-hero h1, .hero-title, .article-container h1 { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
}