/* Simplex Online — Home (v0.1)
   Identidad: 03_DOCUMENTACION_EMPRESA/simplex-style.md
   Azul #002366 (primario) · Amarillo #FFC300 y rosado #ED027A (secundarios) · Gris oscuro #303035
   Baloo 2 = títulos · Poppins = texto · todos los cuadros con esquinas de 16 px
   Sin JavaScript. Tipografías alojadas junto a esta hoja (woff2 latino, licencia OFL). */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(fonts/baloo2-600-800.woff2) format('woff2'); }

:root {
  --navy: #002366;
  --navy-900: #001640;
  --yellow: #ffc300;
  --yellow-600: #e0a800;
  --pink: #ed027a;
  --pink-600: #c70266;
  --pink-700: #a10255;
  --ink: #303035;
  --muted: #565b68;
  --line: #e3e7f0;
  --bg: #f5f7fb;
  --r: 16px;
  --maxw: 1120px;
  --shadow: 0 10px 28px rgba(0, 35, 102, .12);
  --surface: #fbfcff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --f-head: 'Baloo 2', 'Poppins', system-ui, sans-serif;
  --f-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--surface); }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--navy); }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }
.container { width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
section[id] { scroll-margin-top: 88px; }
:focus-visible { outline: 3px solid var(--pink-600); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--yellow); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 18px; background: var(--yellow); color: var(--ink); font-weight: 600; border-radius: var(--r); text-decoration: none; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 2px solid transparent; border-radius: var(--r); font: 600 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease); }
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: var(--yellow-600); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-900); }
.btn-ghost { border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: .92rem; }

/* Cabecera */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: block; line-height: 0; }
.brand img { width: 132px; }
.nav { display: none; gap: 26px; }
.nav a { color: var(--ink); font-weight: 500; font-size: .95rem; text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--pink); }
@media (min-width: 880px) { .nav { display: flex; } .brand img { width: 150px; } }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Toggle modo oscuro */
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); cursor: pointer; color: var(--navy); transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease); flex: none; }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:hover { background: #e9edf8; border-color: #c8d3ee; }
.theme-toggle svg { width: 18px; height: 18px; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background-color: var(--navy);
  background-image:
    radial-gradient(900px 420px at 88% -8%, rgba(255, 195, 0, .18), transparent 62%),
    radial-gradient(760px 420px at -8% 112%, rgba(237, 2, 122, .22), transparent 62%);
  background-size: auto, auto; }

/* Cuadrícula animada del hero (pseudo-elemento para poder moverla) */
.hero::before {
  content: '';
  position: absolute;
  inset: -48px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: grid-pan 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes grid-pan {
  from { background-position: 0 0,    0 0; }
  to   { background-position: 0 -48px, 48px 0; }
}

/* Motion background del hero */
.hero-motion { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hm-orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0; animation: orb-fade 1.2s ease forwards; }
.hm-orb-1 { width: 520px; height: 420px; background: radial-gradient(circle, rgba(255,195,0,.22), transparent 70%); top: -10%; left: 55%; animation-name: orb-fade, orb-drift-1; animation-duration: 1s, 18s; animation-delay: 0s, 1s; animation-timing-function: var(--ease), ease-in-out; animation-fill-mode: forwards, none; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; }
.hm-orb-2 { width: 460px; height: 380px; background: radial-gradient(circle, rgba(237,2,122,.20), transparent 70%); bottom: -15%; left: -8%; animation-name: orb-fade, orb-drift-2; animation-duration: 1s, 22s; animation-delay: .2s, 1s; animation-timing-function: var(--ease), ease-in-out; animation-fill-mode: forwards, none; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; }
.hm-orb-3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(0,35,102,.6), transparent 70%); top: 30%; left: 30%; animation-name: orb-fade, orb-drift-3; animation-duration: 1s, 26s; animation-delay: .4s, 1s; animation-timing-function: var(--ease), ease-in-out; animation-fill-mode: forwards, none; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; }
.hm-orb-4 { width: 340px; height: 260px; background: radial-gradient(circle, rgba(255,195,0,.14), transparent 70%); top: 50%; right: -5%; animation-name: orb-fade, orb-drift-4; animation-duration: 1s, 20s; animation-delay: .6s, 1s; animation-timing-function: var(--ease), ease-in-out; animation-fill-mode: forwards, none; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; }
@keyframes orb-fade { to { opacity: 1; } }
@keyframes orb-drift-1 { 0%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} 100%{transform:translate(25px,-20px)} }
@keyframes orb-drift-2 { 0%{transform:translate(0,0)} 50%{transform:translate(35px,-25px)} 100%{transform:translate(-20px,15px)} }
@keyframes orb-drift-3 { 0%{transform:translate(0,0)} 50%{transform:translate(20px,20px)} 100%{transform:translate(-15px,-30px)} }
@keyframes orb-drift-4 { 0%{transform:translate(0,0)} 50%{transform:translate(-30px,15px)} 100%{transform:translate(18px,-10px)} }
.hero-arrows { position: absolute; right: 3%; top: 50%; transform: translateY(-58%); width: 210px; opacity: .9; pointer-events: none; display: none; z-index: 2; animation: arrows-float 6s ease-in-out infinite; }
@media (min-width: 900px) { .hero-arrows { display: block; } }
@keyframes arrows-float {
  0%   { transform: translateY(-58%) translate(0,    0   ); }
  25%  { transform: translateY(-58%) translate(-8px,  10px); }
  50%  { transform: translateY(-58%) translate(4px,  -6px); }
  75%  { transform: translateY(-58%) translate(-4px,  8px); }
  100% { transform: translateY(-58%) translate(0,    0   ); }
}
.hero-in { display: grid; gap: 40px; padding: 64px 0 72px; align-items: center; position: relative; z-index: 3; }
@media (min-width: 900px) { .hero-in { grid-template-columns: 1.15fr .85fr; padding: 92px 0 100px; gap: 56px; } }
.chip { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--r); background: rgba(255, 255, 255, .1); font-size: .85rem; font-weight: 500; letter-spacing: .02em; }
.hero h1 { margin: 18px 0 16px; font-family: var(--f-head); font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 3.5rem); line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.lead { max-width: 58ch; font-size: 1.1rem; color: #e4ebff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.hero-note { margin: 0; font-size: .92rem; color: #cdd8f6; }
.hero-card { padding: 28px; border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: 0 22px 54px rgba(0, 0, 0, .3); }
.hero-card h2 { margin-bottom: 16px; font-family: var(--f-head); font-weight: 700; font-size: 1.4rem; color: var(--navy); }
.checks { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks strong { display: block; color: var(--navy); font-weight: 600; line-height: 1.35; }
.checks span { display: block; font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* Secciones */
.section { padding: 76px 0; }
@media (max-width: 640px) { .section { padding: 54px 0; } }
.section-head { max-width: 740px; margin-bottom: 38px; }
.eyebrow { font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-600); }
.title { margin: 6px 0 12px; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; color: var(--navy); }
.sub { margin: 0; color: var(--muted); font-size: 1.05rem; }
.alt-bg { background: var(--bg); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.card:hover { box-shadow: var(--shadow); border-color: #c8d3ee; transform: translateY(-2px); }
.card h3 { margin-top: 6px; font-family: var(--f-head); font-weight: 700; font-size: 1.22rem; line-height: 1.28; color: var(--navy); }
.card p { margin: 0; font-size: .96rem; color: var(--muted); }
.more { margin-top: auto; padding-top: 10px; font-weight: 600; text-decoration: none; color: var(--navy); }
.more:hover { color: var(--pink-600); text-decoration: underline; }
.tile { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--r); background: var(--navy); color: #fff; }
.tile svg { width: 27px; height: 27px; }
.tile.t-yellow { background: var(--yellow); color: var(--ink); }
.tile.t-pink { background: var(--pink-600); }
.tag { align-self: flex-start; padding: 4px 12px; border-radius: var(--r); background: #e6edfc; color: var(--navy); font-weight: 600; font-size: .78rem; }

/* Cuadrícula de Áreas: la primera tarjeta queda destacada (tamaño y color) para romper
   la repetición de tarjetas idénticas y marcar el área más buscada. */
#areas .grid { grid-template-columns: 1fr; }
@media (min-width: 620px) { #areas .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { #areas .grid { grid-template-columns: repeat(3, 1fr); } }
#areas .grid > .card:first-child {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
  border-color: transparent;
  padding: 32px;
}
#areas .grid > .card:first-child h3 { color: #fff; }
#areas .grid > .card:first-child p { color: #c9d6f5; }
#areas .grid > .card:first-child .more { color: #fff; }
#areas .grid > .card:first-child .more:hover { color: var(--yellow); }
#areas .grid > .card:first-child .tile { background: var(--yellow); color: var(--ink); }
@media (min-width: 620px) { #areas .grid > .card:first-child { grid-column: span 2; } }
.note { margin: 30px 0 0; padding: 18px 22px; border: 1px dashed #aebde6; border-radius: var(--r); background: var(--surface); font-size: .96rem; }
.also { margin: 22px 0 0; color: var(--muted); }

/* Cómo funciona */
.steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: paso; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.steps li { position: relative; counter-increment: paso; padding: 66px 24px 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.steps li::before { content: counter(paso); position: absolute; top: 20px; left: 24px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r); background: var(--yellow); color: var(--ink); font-family: var(--f-head); font-weight: 800; font-size: 1.15rem; }
.steps h3 { margin-bottom: 6px; font-family: var(--f-head); font-weight: 700; font-size: 1.2rem; color: var(--navy); }
.steps p { margin: 0; font-size: .96rem; color: var(--muted); }

/* Comunidad */
.community { background: var(--yellow); color: var(--ink); }
.community-in { display: grid; gap: 22px; align-items: center; padding: 52px 0; }
@media (min-width: 820px) { .community-in { grid-template-columns: 1fr auto; } }
.community h2 { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: var(--navy); margin-bottom: 8px; }
.community p { margin: 0; max-width: 60ch; }

/* Preguntas */
.faq { display: grid; gap: 12px; max-width: 840px; }
details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .25s var(--ease); }
summary { position: relative; padding: 18px 56px 18px 22px; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%) rotate(0deg); font-size: 1.6rem; line-height: 1; color: var(--pink-600); transition: transform .3s var(--ease); }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details[open] { border-color: #c8d3ee; }
/* El panel queda siempre "visible" para poder animar su alto; el propio grid de 0fr/1fr
   es lo que lo oculta (recorte vía overflow) cuando la tarjeta está cerrada. */
details > .panel { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
details[open] > .panel { grid-template-rows: 1fr; }
details > .panel > p { margin: 0; padding: 0 22px 20px; color: var(--muted); overflow: hidden; min-height: 0; }

/* Llamado final y pie */
.cta-final { background: var(--navy-900); color: #fff; text-align: center; }
.cta-in { padding: 68px 0; }
.cta-final h2 { margin-bottom: 12px; font-family: var(--f-head); font-weight: 800; font-size: clamp(1.8rem, 3.8vw, 2.6rem); line-height: 1.12; }
.cta-final p { max-width: 54ch; margin: 0 auto 26px; color: #d6e0fb; }
.site-footer { background: var(--navy); color: #d9e3ff; padding: 48px 0 28px; }
.footer-grid { display: grid; gap: 30px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.3fr .9fr 1.2fr .9fr; } }
.logo-chip { display: inline-block; padding: 10px 14px; border-radius: var(--r); background: var(--surface); line-height: 0; }
.logo-chip img { width: 128px; }
.site-footer h2 { margin-bottom: 10px; font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; color: #fff; }
.site-footer p { margin: 14px 0 0; max-width: 42ch; font-size: .95rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer a { color: #9fc0ff; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .logo-chip { color: inherit; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.site-footer .social a {
  display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: var(--yellow); transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.site-footer .social a:hover { background: var(--pink-600); border-color: var(--pink-600); color: #fff; transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }

/* ── Banner de Black Friday (Home y catálogo) ─────────────────────────── */
.bf-banner {
  position: relative; overflow: hidden; padding: 11px 0; color: #fff; text-align: center;
  background: linear-gradient(90deg, #8a0147, #ed027a, #ff5fae, #ed027a, #8a0147); background-size: 300% 100%;
  animation: bf-flujo 7s linear infinite;
}
.bf-brillo {
  position: absolute; inset: 0 auto 0 -30%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg);
  animation: bf-brillo 3.8s ease-in-out infinite;
}
.bf-in { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; }
.bf-sello {
  padding: 3px 12px; border-radius: 999px; background: #0a0a14; color: var(--yellow); font-weight: 800; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; animation: bf-latido 1.8s ease-in-out infinite;
}
.bf-texto { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.2; }
.bf-pct { display: inline-block; color: var(--yellow); font-weight: 800; text-shadow: 0 0 14px rgba(255, 195, 0, .55); animation: bf-latido 1.8s ease-in-out infinite; }
.bf-cta { color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; padding: 5px 14px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 999px; transition: background-color .2s, color .2s; }
.bf-cta:hover { background: #fff; color: #a10255; }
@keyframes bf-flujo { to { background-position: -300% 0; } }
@keyframes bf-brillo { 0% { left: -30%; } 60%, 100% { left: 130%; } }
@keyframes bf-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .bf-banner, .bf-brillo, .bf-sello, .bf-pct { animation: none; } }
.pay-list { display: grid; gap: 10px; }
.pay-chip { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 600; font-size: .92rem; }
.pay-chip svg { width: 22px; height: 22px; flex: none; }
.pay-chip.pay-bank svg { color: #8fd14f; }
.pay-chip.pay-qr svg { color: #fff; }
.pay-chip.pay-binance svg { color: #f3ba2f; }
.site-footer .legal { max-width: none; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .88rem; color: #b9c7ee; }

/* ── Páginas internas de WordPress (certificados, avisos, 404, etc.) ─────── */
.entry { max-width: 800px; }
.entry .title { margin-bottom: 18px; }
.entry-content > * + * { margin-top: 1em; }
.entry-content img { border-radius: var(--r); }
.entry-content h2 { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--navy); margin: 1.6em 0 .4em; }
.entry-content h3 { font-family: var(--f-head); font-weight: 700; font-size: 1.2rem; color: var(--navy); margin: 1.4em 0 .35em; }
.entry-content h4 { font-weight: 600; margin: 1.2em 0 .3em; }
.entry-content a { color: var(--pink-600); text-decoration: underline; }
.entry-content a:hover { color: var(--pink-700); }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote { border-left: 1px solid var(--navy); margin: 1.4em 0; padding: .8em 1.2em; background: var(--bg); border-radius: 0 var(--r) var(--r) 0; color: var(--muted); }
.entry-content code { background: var(--bg); padding: .15em .4em; border-radius: 6px; font-size: .9em; }
.entry-content pre { background: var(--bg); padding: 1em 1.4em; border-radius: var(--r); overflow-x: auto; }
.entry-content hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: .6em 1em; border: 1px solid var(--line); text-align: left; }
.entry-content th { background: var(--bg); font-weight: 600; }

/* Botón flotante de WhatsApp */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r); background: #25d366; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 12px 26px rgba(37, 211, 102, .4); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float:active { transform: scale(.96); }
.wa-float:hover { background: #1da851; }
.wa-float svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero::before { animation: none; }
  .hero-arrows { animation: none; transform: translateY(-58%); }
}
@media print { .site-header, .wa-float, .hero-arrows { display: none; } }

/* ===================== MODO OSCURO ===================== */
[data-theme="dark"] {
  --ink: #e4ebff;
  --muted: #9aabcc;
  --line: rgba(255,255,255,.1);
  --bg: #0f1624;
  --shadow: 0 10px 28px rgba(0,0,0,.5);
}
[data-theme="dark"] body { background: #0a1022; color: var(--ink); }
[data-theme="dark"] .site-header { background: #0d1629; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .nav a { color: #d0d9f0; }
[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #ffc300; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
[data-theme="dark"] .card { background: #131e35; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .card:hover { border-color: rgba(100,140,230,.35); }
[data-theme="dark"] .card h3 { color: #d6e4ff; }
[data-theme="dark"] .card p { color: var(--muted); }
[data-theme="dark"] .more { color: #7ba8f7; }
[data-theme="dark"] .more:hover { color: #f79fc4; }
[data-theme="dark"] .section { background: transparent; }
[data-theme="dark"] .alt-bg { background: #0c1420; }
[data-theme="dark"] .steps li { background: #131e35; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] details { background: #131e35; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] details[open] { border-color: rgba(100,140,230,.35); }
[data-theme="dark"] summary { color: #d6e4ff; }
[data-theme="dark"] .note { background: #131e35; border-color: rgba(100,140,230,.25); }
[data-theme="dark"] .hero-card { background: #1a2540; color: var(--ink); }
[data-theme="dark"] .hero-card h2 { color: #a8c8ff; }
[data-theme="dark"] .checks strong { color: #a8c8ff; }
[data-theme="dark"] .tag { background: #1e2e50; color: #8ab4ff; }
[data-theme="dark"] .btn-outline { border-color: #5585e0; color: #8ab4ff; }
[data-theme="dark"] .btn-outline:hover { background: #1e3060; color: #c2d9ff; }
[data-theme="dark"] .title { color: #c8d9ff; }
[data-theme="dark"] .site-footer { background: #07101e; }
[data-theme="dark"] .logo-chip { background: #1a2540; }
[data-theme="dark"] .skip { background: var(--yellow); color: #1a1200; }
/* Texto oscuro sobre amarillo en dark mode */
[data-theme="dark"] .tile.t-yellow { color: #1a1200; }
[data-theme="dark"] .steps li::before { color: #1a1200; }
[data-theme="dark"] .btn-primary { color: #1a1200; }
[data-theme="dark"] .community { color: #1a1200; }
[data-theme="dark"] .community h2 { color: var(--navy); }
[data-theme="dark"] .community p { color: #1a1200; }
[data-theme="dark"] .community .btn-dark { background: var(--navy); color: #fff; }
/* Sección pasos en dark mode */
[data-theme="dark"] .steps h3 { color: #d6e4ff; }
[data-theme="dark"] .steps p { color: var(--muted); }

/* ── Tutor LMS Pro — integración de marca ──────────────────────────────── */
/* Aplica nuestras fuentes y alinea el color primario del plugin con la marca.
   Los ajustes visuales detallados se harán una vez que Tutor esté instalado y
   corriendo con cursos reales.                                               */
.tutor-wrap,
.tutor-course-lead-info,
.tutor-course-details-page,
.tutor-course-curriculum { font-family: var(--f-body); }

/* Botón de inscripción → navy de Simplex */
.tutor-btn-primary,
.tutor-course-spotlight .tutor-btn-primary,
.tutor-enroll-box .tutor-btn-primary { background-color: var(--navy) !important; border-color: var(--navy) !important; }
.tutor-btn-primary:hover { background-color: var(--navy-900) !important; border-color: var(--navy-900) !important; }

/* Estrellas de valoración → amarillo de Simplex */
.tutor-ratings-count-stars .tutor-icon-star-filled,
.tutor-ratings-count-stars .tutor-icon-star-half-o { color: var(--yellow) !important; }

/* Dentro de las páginas de lección/quiz, nuestro header sticky no debe solapar el contenido */
body.single-courses .site-header,
body.single-lesson .site-header,
body.single-tutor_quiz .site-header { position: sticky; top: 0; z-index: 200; }

/* Video de la clase gratuita (página de venta del curso: templates/curso-venta.php). La página pública
   del curso ya no la dibuja Tutor LMS, sino el tema (estilos de la venta en venta.css). */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--bg); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Viñetas de materiales/requisitos/audiencia/etc. → check en magenta, en vez del punto de Tutor. */
.tutor-icon-bullet-point {
  font-size: 0 !important; width: 18px !important; height: 18px !important; flex: none;
  display: inline-flex !important; align-items: center; justify-content: center; color: transparent !important;
}
.tutor-icon-bullet-point::before {
  content: "\2713"; font-size: 14px; font-family: var(--f-body); font-weight: 700; color: var(--pink-600);
}

/* ── Tutor LMS — página de curso en modo oscuro ─────────────────────────────
   Cobertura: solo la página pública del curso (título, pestañas, temario, barra lateral).
   El resto de pantallas de Tutor (escritorio del alumno, lecciones, cuestionarios, checkout,
   login) todavía se ven con los colores claros propios del plugin; quedan para una siguiente
   iteración si se necesita oscurecer también esas pantallas. */
/* Texto por defecto, sin !important para no pisar colores con sentido propio (estrellas, precios). */
[data-theme="dark"] .tutor-course-details-page,
[data-theme="dark"] .tutor-course-details-page * { color: #e4ebff; }
/* Clases de utilidad de Tutor con color fijo propio: hay que forzarlas explícitamente. */
[data-theme="dark"] .tutor-color-black,
[data-theme="dark"] .tutor-color-secondary,
[data-theme="dark"] .tutor-course-details-title,
[data-theme="dark"] .tutor-course-content-title { color: #e4ebff !important; }
[data-theme="dark"] .tutor-color-muted,
[data-theme="dark"] .tutor-course-content-list-item-duration,
[data-theme="dark"] .tutor-course-content-list-item-status,
[data-theme="dark"] .tutor-btn-ghost,
[data-theme="dark"] .tutor-btn-outline-primary { color: #9aabcc !important; }
[data-theme="dark"] .tutor-btn-outline-primary { border-color: #5585e0 !important; }
/* Cualquier "tarjeta" de Tutor (clase que contenga tutor-card, p. ej. tutor-card-body, tutor-sidebar-card)
   + widgets, pestañas, acordeón del temario y filas del temario: fondo oscuro, igual que .card del tema. */
[data-theme="dark"] .tutor-course-details-page [class*="tutor-card"],
[data-theme="dark"] .tutor-course-content-list-item,
[data-theme="dark"] .tutor-tab-item,
[data-theme="dark"] .tutor-accordion-item,
[data-theme="dark"] .tutor-accordion-item-header,
[data-theme="dark"] .tutor-accordion-item-body,
[data-theme="dark"] .tutor-course-details-widget,
[data-theme="dark"] .tutor-course-details-instructors,
[data-theme="dark"] .tutor-single-course-sidebar-more > div { background: #131e35 !important; border-color: rgba(255,255,255,.1) !important; }
/* Barra de progreso del curso (usuarios inscritos): el riel queda tenue, el relleno conserva su color. */
[data-theme="dark"] .tutor-progress-bar { background-color: rgba(255,255,255,.12) !important; }
[data-theme="dark"] .tutor-is-sticky { background: #0d1629 !important; }
[data-theme="dark"] .tutor-nav { border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .tutor-nav-link { color: #9aabcc !important; }
[data-theme="dark"] .tutor-nav-link.is-active { color: #e4ebff !important; }