/* =========================================================================
   Legibilidad en todo el sitio (kalos 1.10.0)
   1) Ancho de línea acotado en textos de lectura.
   2) Gris "apagado" con contraste AA.
   3) Textos chicos en mayúsculas: mínimo 12px.
   4) Modo claro opcional (html[data-theme="light"]) para todas las páginas
      interiores. La home cinemática queda siempre oscura.
   Se carga después de theme.css: solo sobreescribe, no reemplaza.
   ========================================================================= */

/* ---------- 2) gris apagado con contraste suficiente (era #55554f = 2,6:1) ---------- */
:root { --muted-2: #7c7c74; }

/* ---------- 1) medida de lectura: 60–75 caracteres ---------- */
.article-body :is(p, li, blockquote, h2, h3),
.legal :is(p, li),
.page-hero p, .page-hero .page-subtitle,
.brief-form .brief-step-intro,
.brief-form .brief-safe p { max-width: 68ch; }
.article-body p, .article-body li { line-height: 1.75; }

/* ---------- 3) nada por debajo de 12px ---------- */
.tag, .post-card .pc-cat, .work-card .wc-type, .case-meta .k, .plan-tag, .plan-billing,
.brief-form .brief-prefill-chip small, .brief-form .brief-steps-list li, .brief-form .brief-steps-meta,
.btn-sm, .footer-credits, .form-note { font-size: max(.75rem, 12px); }

/* ---------- 4) modo claro ---------- */
html[data-theme="light"] {
	color-scheme: light;
	--bg:        #f3f3ef;
	--bg-2:      #ffffff;
	--bg-3:      #e9e9e3;
	--fg:        #101013;
	--muted:     #5d5d58;   /* 6,9:1 sobre #f3f3ef */
	--muted-2:   #74746e;   /* 4,6:1 */
	--line:      #dedcd3;
	--line-2:    #c9c7bd;
	--acid:      #101013;   /* el acento blanco pasa a tinta */
	--acid-dim:  #3c3c39;
	--text:      #101013;
}
html[data-theme="light"] body { background: var(--bg); color: var(--fg); }
html[data-theme="light"] .article-body p, html[data-theme="light"] .article-body ul, html[data-theme="light"] .article-body ol { color: #1f1f1d; }
html[data-theme="light"] .kalos-alert.ok  { color: #1a6b3a; border-color: rgba(30,142,62,.45); }
html[data-theme="light"] .kalos-alert.err { color: #a3222f; border-color: rgba(239,64,86,.5); }
/* Botón fantasma: al pasar se llena de rojo y el texto va a blanco. Botón relleno (rojo):
   al pasar se vuelve blanco con texto y borde rojos, así no desaparece sobre fondo claro. */
html[data-theme="light"] .btn:not(.btn-fill):hover { color: #fff; }
html[data-theme="light"] .btn-fill:hover { color: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
html[data-theme="light"] .brief-form .brief-prefill-chip { background: rgba(0,0,0,.05); }
html[data-theme="light"] .brief-form .brief-safe { background: linear-gradient(180deg, rgba(0,0,0,.025), transparent); }
html[data-theme="light"] .brief-form .brief-steps { background: var(--bg); }
html[data-theme="light"] .brief-form .brief-steps-list li.is-current b { background: var(--fg); color: #fff; border-color: var(--fg); }
html[data-theme="light"] .brief-form .brief-progress-bar { background: var(--fg); }
html[data-theme="light"] .brief-form .brief-skip input { accent-color: var(--fg); }
html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select { color: var(--fg); background: transparent; }
html[data-theme="light"] .article-body pre, html[data-theme="light"] .article-body code { background: #ecece6; }
html[data-theme="light"] .site-header.scrolled { background: rgba(243,243,239,.92); }
html[data-theme="light"] img.brand-logo { filter: none; }
/* Logos y marcas blancas sobre fondo claro */
html[data-theme="light"] .mobile-menu { background: var(--bg); }
html[data-theme="light"] ::selection { background: var(--fg); color: #fff; }

/* ---------- interruptor ---------- */
.site-header .theme-toggle { margin-left: auto; margin-right: 1rem; }
.site-header .theme-toggle + .menu-toggle { margin-left: 0; }
.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 999px;
	border: 1px solid var(--line-2); background: transparent; color: var(--fg);
	cursor: pointer; padding: 0; margin-right: .2rem;
	transition: border-color .25s ease, transform .25s ease;
}
.theme-toggle:hover { border-color: var(--fg); transform: rotate(15deg); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .tt-sun { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun { display: block; }
html[data-theme="light"] .theme-toggle .tt-moon { display: none; }
body.home .theme-toggle, body.front-page .theme-toggle { display: none; } /* la home es cinemática: siempre oscura */
@media (max-width: 720px) { .theme-toggle { width: 32px; height: 32px; } }

/* ---------- modo claro: botones con fondo "ácido" (el acento pasa a tinta) ---------- */
html[data-theme="light"] .header-right .btn, html[data-theme="light"] .header-right button[data-login],
html[data-theme="light"] .site-footer a[data-login], html[data-theme="light"] .site-footer a[href*="mi-panel"],
html[data-theme="light"] body.kalos-cine .cine-mm-meta button[data-login], html[data-theme="light"] body.kalos-cine .cine-mm-meta a[data-login],
html[data-theme="light"] body.kalos-cine .cine-mm-meta a[href*="mi-panel"], html[data-theme="light"] body.kalos-cine .cine-mm-meta a[href*="mi-panel"]:hover,
html[data-theme="light"] .footer-play:hover { color: #fff !important; }
html[data-theme="light"] .btn-fill:not(:hover) { color: #fff; }

/* ---------- modo claro: planes (grises claros fijos del diseño oscuro) ---------- */
html[data-theme="light"] .plan-feats li { color: #2a2a28; }
html[data-theme="light"] .plan-card { background: #fff; border-color: var(--line-2); }
html[data-theme="light"] .plan-card .plan-price .cur, html[data-theme="light"] .plan-card .plan-price .per { color: var(--muted); }
html[data-theme="light"] .plan-card.featured { box-shadow: 0 0 0 1px var(--brand), 0 24px 60px rgba(239,64,86,.10); }
html[data-theme="light"] .plan-tag { background: var(--bg); }

/* ---------- modo claro: otros textos fijos del diseño oscuro ---------- */
html[data-theme="light"] .article-body h2, html[data-theme="light"] .article-body h3 { color: var(--fg); }
html[data-theme="light"] .article-body img { border-color: var(--line-2); }
html[data-theme="light"] .work-card .wc-media::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.05)); }
html[data-theme="light"] .work-featured .wf-media .idbig { color: rgba(0,0,0,.05); }
html[data-theme="light"] .site-footer { background: #fff; }
html[data-theme="light"] .kmk-brief .q .ej { background: rgba(0,0,0,.05); }
html[data-theme="light"] .brief-form .field input, html[data-theme="light"] .brief-form .field textarea, html[data-theme="light"] .brief-form .field select { color: var(--fg); }
html[data-theme="light"] .brief-form .brief-block { background: #fff; }

/* ---------- 5) tamaño mínimo de lectura en textos de apoyo (eran 14,4px) ---------- */
.section p, .plan-card p, .plan-desc, .plan-feats li, .step p, .faq-a, .work-card p, .post-card p { font-size: 1rem; line-height: 1.55; }
.plan-price .cur, .plan-price .per { font-size: .9rem; }
.plan-card .plan-billing, .plan-card .plan-tag { font-size: 12px !important; }
.btn { font-size: .875rem; }
.btn-sm { font-size: 12px; }
.page-hero p { font-size: 1.05rem; line-height: 1.6; }