/* ═══════════════════════════════════════════════════════════════════════════
   Cara clara del sitio — el diseño de /abogado-chino-chile, para todo el resto
   ═══════════════════════════════════════════════════════════════════════════
   Decisión del dueño (2026-09-17): el diseño de /abogado-chino-chile se aplica
   a todo el sitio. Esa página es el sistema de las landings (css/landing-ads.css)
   más una capa `body.claro` que reasigna los colores oscuros de Tailwind.

   Esta hoja es esa capa, sacada de la página y generalizada. Por qué así y no
   reescribiendo el marcado: las ~400 páginas del sitio comparten la misma
   plantilla oscura, con las clases de color escritas dentro de cada una. Se
   redefinen las 64 reglas de color que genera Tailwind (lista completa sacada de
   css/tailwind.css) y todo cuelga de `body.claro`: más especificidad que la
   clase suelta, así que casi no hace falta !important, y revertir una página es
   quitar una clase del body.

   El !important solo aparece contra atributos `style` escritos en el marcado
   (encabezado, barra móvil, velos de fotos, modales), que le ganan a cualquier
   hoja. Se los selecciona por el color que llevan, no por su posición.

   Se conecta con scripts/aplicar-cara-clara.py, que es idempotente.

   Decisiones que vienen del sistema y no se "arreglan":
     · cero border-radius y cero sombras (registro documental);
     · solo cara clara, con `color-scheme: light` para que el teléfono en modo
       oscuro no repinte inputs ni scrollbars;
     · el dorado de marca #d4af7a sobre papel da 1,8:1: sobre claro va #8a6a35.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tokens: los mismos valores de css/landing-ads.css. Se repiten acá porque la
   mayoría de las páginas no carga esa hoja; si se cambia uno, cambiar los dos. */
:root {
  color-scheme: light;
  --base:       #fbf9f4;
  --banda:      #f3efe4;
  --superficie: #ffffff;
  --cabecera:   #eae5d9;
  --linea:      #e2dccd;
  --linea-2:    #ddd5c2;
  --linea-3:    #eee7d8;
  --linea-head: #dcd6c8;
  --tinta:      #1a1712;
  --suave:      #4a453d;
  --tenue:      #6f695f;
  --oro:        #8a6a35;
  --oro-hover:  #6d5329;
  --oro-txt:    #5f4a24;
  --oro-tenue:  rgba(138,106,53,.08);
  --oro-fondo:  rgba(138,106,53,.12);
  --head-fondo: rgba(245,242,234,.94);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body.claro {
  color: #1f1b13;
  background-color: var(--base);
  background-image: none;
}
body.claro input,
body.claro textarea,
body.claro select { color-scheme: light; }
body.claro input::placeholder,
body.claro textarea::placeholder { color: #9a9384; }
body.claro *,
body.claro *::before,
body.claro *::after { box-shadow: none !important; }

/* Grano de papel, el mismo de las landings. Va encima y sin capturar clics;
   así no hace falta levantar el contenido con `position: relative`, que en
   /abogado-chino-chile rompía las barras fijas. */
body.claro::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  opacity: .30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.42'/%3E%3C/svg%3E");
}

:root:has(body.claro) ::-webkit-scrollbar-track { background: var(--banda); }
:root:has(body.claro) ::-webkit-scrollbar-thumb { background: #d3cab6; }
:root:has(body.claro) ::-webkit-scrollbar-thumb:hover { background: var(--oro); }

/* ── Texto ───────────────────────────────────────────────────────────────── */
body.claro .text-ice                { color: #1f1b13; }
body.claro .text-ice\/80            { color: #3b3529; }
body.claro .text-ice\/75            { color: var(--suave); }
body.claro .text-ice-muted          { color: #5c5547; }
/* #6e7681 sobre papel da 4,0:1; este llega a 4,6:1 y sigue leyéndose tenue. */
body.claro .text-ice-subtle         { color: #736b5c; }
body.claro .text-ice-subtle\/20     { color: rgba(115,107,92,.25); }

body.claro .text-champ,
body.claro .text-champ-light        { color: var(--oro); }
body.claro .text-champ-dark         { color: var(--oro-txt); }
body.claro .text-champ\/90,
body.claro .text-champ\/85,
body.claro .text-champ\/80          { color: var(--oro); }
body.claro .text-champ\/70,
body.claro .text-champ\/60          { color: rgba(138,106,53,.85); }
body.claro .text-champ\/50          { color: rgba(138,106,53,.7); }
body.claro .text-champ\/30          { color: rgba(138,106,53,.35); }
body.claro .text-champ\/20          { color: rgba(138,106,53,.22); }

/* text-carbon va sobre fondo dorado (botones); text-carbon-500 va sobre papel
   (los separadores «/» de las migas). */
body.claro .text-carbon,
body.claro .text-\[\#0d1117\]       { color: #fbf9f4; }
body.claro .text-carbon-500         { color: #8f8778; }
body.claro .decoration-carbon-500   { text-decoration-color: #cfc7b4; }

/* ── Superficies ─────────────────────────────────────────────────────────── */
body.claro .bg-carbon               { background-color: var(--base); }
body.claro .bg-carbon\/90           { background-color: rgba(251,249,244,.94); }
body.claro .bg-carbon-800           { background-color: var(--superficie); }
body.claro .bg-carbon-800\/60       { background-color: rgba(255,255,255,.7); }
body.claro .bg-carbon-700           { background-color: var(--banda); }
body.claro .bg-carbon-600           { background-color: var(--cabecera); }
/* bg-carbon-500 es el truco de «rejilla con gap-px»: el fondo hace de línea. */
body.claro .bg-carbon-500           { background-color: var(--linea-2); }
body.claro .from-carbon-800\/80 {
  --tw-gradient-from: rgba(255,255,255,.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position);
}

/* Botones dorados: sólidos en el dorado legible, texto papel. */
body.claro .bg-champ,
body.claro .bg-champ-light,
body.claro .bg-\[\#e8d5b0\]         { background-color: var(--oro); }
body.claro .bg-champ\/5             { background-color: rgba(138,106,53,.04); }
body.claro .bg-champ\/10            { background-color: rgba(138,106,53,.07); }
body.claro .bg-champ\/20            { background-color: rgba(138,106,53,.13); }

/* Dorado sobre dorado tenue (numerales en píldora): el tono oscuro. */
body.claro [class*="bg-champ/"] .text-champ,
body.claro .text-champ[class*="bg-champ/"] { color: var(--oro-txt); }

/* ── Líneas ──────────────────────────────────────────────────────────────── */
body.claro .border-carbon-500       { border-color: var(--linea); }
body.claro .border-ice\/20          { border-color: var(--linea-2); }
body.claro .border-champ            { border-color: rgba(138,106,53,.55); }
body.claro .border-champ\/50,
body.claro .border-t-champ\/50      { border-color: rgba(138,106,53,.45); }
body.claro .border-champ\/40,
body.claro .border-champ\/35        { border-color: rgba(138,106,53,.40); }
body.claro .border-champ\/30,
body.claro .border-champ\/25,
body.claro .border-champ\/20        { border-color: rgba(138,106,53,.30); }
body.claro .accent-champ,
body.claro .accent-\[\#d4af7a\]     { accent-color: var(--oro); }

/* ── Estados ─────────────────────────────────────────────────────────────── */
body.claro .hover\:text-ice:hover,
body.claro .group:hover .group-hover\:text-ice          { color: var(--tinta); }
body.claro .hover\:text-ice-muted:hover,
body.claro .group:hover .group-hover\:text-ice-muted    { color: var(--suave); }
body.claro .hover\:text-champ:hover,
body.claro .hover\:text-champ-light:hover,
body.claro .group:hover .group-hover\:text-champ        { color: var(--oro-txt); }
body.claro .hover\:bg-carbon-700:hover                  { background-color: var(--banda); }
body.claro .hover\:bg-champ-light:hover,
body.claro .hover\:bg-\[\#e8d5b0\]:hover                { background-color: var(--oro-hover); }
body.claro .hover\:bg-champ\/8:hover                    { background-color: rgba(138,106,53,.07); }
body.claro .hover\:border-champ:hover,
body.claro .hover\:border-champ\/50:hover,
body.claro .hover\:border-champ\/40:hover,
body.claro .hover\:border-champ\/30:hover,
body.claro .focus\:border-champ:focus,
body.claro .focus\:border-champ\/40:focus               { border-color: var(--oro); }
body.claro .hover\:decoration-champ:hover               { text-decoration-color: var(--oro); }

/* ── Piezas propias de las páginas (definidas en sus <style>) ────────────── */
body.claro .label { color: var(--oro); }
body.claro .card-lift:hover { border-color: rgba(138,106,53,.35); background-color: var(--banda); }

body.claro .prose-dahua p          { color: #3b3529; }
body.claro .prose-dahua h2         { color: #1f1b13; border-bottom-color: var(--linea); }
body.claro .prose-dahua h3         { color: var(--oro); }
body.claro .prose-dahua ul,
body.claro .prose-dahua ol         { color: #5c5547; }
body.claro .prose-dahua a          { color: var(--oro); }
body.claro .prose-dahua a:hover    { color: var(--oro-txt); }
body.claro .prose-dahua blockquote { border-left-color: rgba(138,106,53,.4); color: #5c5547; }
body.claro .prose-dahua strong     { color: #1f1b13; }
body.claro .prose-dahua th,
body.claro .prose-dahua td         { border-color: var(--linea) !important; color: #3b3529; }
body.claro .prose-dahua th         { background: var(--banda) !important; color: #1f1b13; }

/* ── Fondos escritos en atributo style ───────────────────────────────────── */

/* Encabezado fijo (338 páginas) y la barra móvil inferior. */
body.claro [style*="rgba(13,17,23,0.94)"],
body.claro [style*="rgba(13,17,23,0.97)"] {
  background: var(--head-fondo) !important;
  border-color: var(--linea-head) !important;
}

/* Velos sobre fotos de las fichas del equipo: el texto pasa a tinta, así que el
   velo pasa a papel. */
body.claro [style*="rgba(22,27,34,0.97)"],
body.claro [style*="rgba(13,17,23,0.97) 32%"] {
  background: linear-gradient(to top, rgba(251,249,244,.98) 34%, rgba(251,249,244,.55) 62%, transparent 88%) !important;
}
body.claro [style*="rgba(22,27,34,1) 15%"],
body.claro [style*="rgba(22,27,34,0.95) 10%"],
body.claro [style*="rgba(13,17,23,0.95) 25%"] {
  background: linear-gradient(to top, rgba(255,255,255,.97) 14%, rgba(255,255,255,.25) 72%, transparent 100%) !important;
}
body.claro [style*="#1c2128 0%"] { background: var(--banda) !important; }

/* Fondo de los modales. */
body.claro [style*="rgba(0,0,0,.88)"] { background-color: rgba(26,23,18,.55) !important; }

/* Degradados de hero de plan-pyme y gracias. */
body.claro [style*="#0d1117 0%, #161b22 100%"] {
  background: radial-gradient(120% 80% at 80% 0%, rgba(138,106,53,.08) 0%, rgba(251,249,244,0) 55%), var(--base) !important;
}
body.claro [style*="rgba(212,175,122,0.10) 0%, rgba(13,17,23,0) 60%"] {
  background: radial-gradient(120% 90% at 50% 0%, rgba(138,106,53,.07) 0%, rgba(251,249,244,0) 60%) !important;
}
body.claro [style*="rgba(212,175,122,0.08)"] { background: var(--oro-tenue) !important; }

/* ── Recuadros y barra de los artículos (estilos en atributo) ────────────── */
body.claro [style*="color:#e6edf3"] { color: #1f1b13 !important; }
body.claro [style*="color:#8b949e"] { color: #5c5547 !important; }
body.claro [style*="color:#C9A84C"],
body.claro [style*="color:#d4af7a"] { color: var(--oro) !important; }
/* «Dato clave» y resumen de los artículos. */
body.claro [style*="background:#161b22"] {
  background: var(--superficie) !important;
  border-color: var(--linea-2) !important;
}
body.claro [style*="border-left:4px solid #C9A84C"] { border-left-color: var(--oro) !important; }
/* Barra fija «Consulta ahora por WhatsApp». */
body.claro [style*="rgba(13,17,23,.97)"] {
  background: var(--head-fondo) !important;
  border-top-color: var(--linea-head) !important;
}
body.claro [style*="background:#C9A84C"] {
  background: var(--oro) !important;
  color: #fbf9f4 !important;
}
body.claro [style*="background:#C9A84C"]:hover { background: var(--oro-hover) !important; }
body.claro [style*="background:#C9A84C"] i { color: #fbf9f4 !important; }

/* ── Perfiles del equipo ─────────────────────────────────────────────────── */
body.claro .chip { color: var(--oro-txt); border-color: rgba(138,106,53,.40); background: var(--oro-tenue); }
body.claro .cv-item { border-left-color: var(--linea-2); }
body.claro .cv-item::before { background: #cfc7b4; }
body.claro .cv-item.is-key::before { background: var(--oro); }
body.claro .cv-titulo { color: #1f1b13; }
body.claro .cv-casa,
body.claro .cv-det { color: #5c5547; }

/* ── Plan Pyme ───────────────────────────────────────────────────────────── */
/* Sin sombras: la caja de precio conserva su presencia con un marco doble. */
body.claro .price-box {
  background: var(--superficie);
  border: 1px solid var(--oro);
  outline: 1px solid rgba(138,106,53,.35); outline-offset: 5px;
}
body.claro .price-num { color: #1f1b13; text-shadow: none; }
body.claro .plan-featured { outline: 1px solid rgba(138,106,53,.55); }
body.claro .wm-char { color: rgba(138,106,53,.06); }
body.claro .pct-watermark { color: rgba(138,106,53,.10); }
body.claro .ledger,
body.claro .ledger-item { border-color: var(--linea); }
body.claro .ledger-item:hover { background: var(--oro-tenue); }
body.claro .ledger-num { color: rgba(138,106,53,.6); }
body.claro .hairline-v { background: linear-gradient(180deg, transparent, rgba(138,106,53,.45), transparent); }
body.claro .gold-border {
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg, rgba(138,106,53,.9), rgba(138,106,53,.15) 45%, rgba(138,106,53,.7)) border-box;
}
body.claro .seal::after { background: none; }
body.claro .tl::before { background: linear-gradient(180deg, rgba(138,106,53,.5), rgba(138,106,53,.08)); }
body.claro .tl-step::before { background: var(--base); border-color: rgba(138,106,53,.75); }
body.claro .tl-step::after { background: var(--oro); }

/* ── Gracias ─────────────────────────────────────────────────────────────── */
body.claro .step-line::before { background: var(--linea-2); }