/* ════════════════════════════════════════════════ CIMA DIGITAL · Modo claro / oscuro (compartido) El modo vive en . Lo pone un script corto en el antes de pintar (la elección guardada o, si no hay, la del sistema) y lo cambia assets/modo.js. Cada página define sus colores por modo; acá solo va el conmutador y el cambio en círculo. Marcado del conmutador: button[data-tema-sw] con .tema-sw-riel adentro. ════════════════════════════════════════════════ */ /* ── Conmutador: píldora con sol y luna ── */ .tema-sw{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:99px;font:inherit;color:inherit;flex-shrink:0} .tema-sw-riel{--rw:54px;--rh:30px;--bola:24px;position:relative;display:inline-block;flex-shrink:0;width:var(--rw);height:var(--rh);border-radius:99px;border:1px solid rgba(26,31,26,.22);background:rgba(26,31,26,.05);color:rgba(26,31,26,.62);transition:background .35s,border-color .35s,color .35s} .tema-sw-riel svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tema-sw-riel > .tema-ico{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px} .tema-sw-riel > .tema-ico.sol{left:7px} .tema-sw-riel > .tema-ico.luna{right:7px} .tema-sw-bola{position:absolute;top:2px;left:2px;width:var(--bola);height:var(--bola);border-radius:50%;display:grid;place-items:center;background:var(--tinta);color:var(--damasco);box-shadow:0 2px 6px rgba(26,31,26,.28);transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .35s,color .35s} .tema-sw-bola svg{grid-area:1/1;width:14px;height:14px;transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)} .tema-sw-bola .luna{fill:currentColor;opacity:0;transform:rotate(-90deg) scale(.5)} .tema-sw:hover .tema-sw-riel{border-color:rgba(26,31,26,.4)} .tema-sw:focus-visible,.tema-fila:focus-visible{outline:2px solid var(--terracota);outline-offset:3px} /* En oscuro: la bola se va a la derecha, se vuelve papel y muestra la luna */ [data-tema="oscuro"] .tema-sw-riel{border-color:rgba(245,239,227,.3);background:rgba(245,239,227,.06);color:rgba(245,239,227,.7)} [data-tema="oscuro"] .tema-sw:hover .tema-sw-riel{border-color:rgba(245,239,227,.55)} [data-tema="oscuro"] .tema-sw-bola{transform:translateX(calc(var(--rw) - var(--bola) - 6px));background:var(--papel);color:var(--tinta);box-shadow:0 2px 8px rgba(0,0,0,.45)} [data-tema="oscuro"] .tema-sw-bola .sol{opacity:0;transform:rotate(90deg) scale(.5)} [data-tema="oscuro"] .tema-sw-bola .luna{opacity:1;transform:none} [data-tema="oscuro"] .tema-sw:focus-visible,[data-tema="oscuro"] .tema-fila:focus-visible{outline-color:var(--salvia-claro)} /* ── Fila del menú móvil: «Modo oscuro» con la misma píldora ── */ .tema-fila{appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;margin:0;padding:10px 0 4px;background:none;border:0;border-top:1px solid rgba(26,31,26,.1);font:inherit;font-size:16px;line-height:1.2;color:var(--tinta);cursor:pointer;text-align:left} [data-tema="oscuro"] .tema-fila{color:var(--papel);border-top-color:rgba(245,239,227,.1)} /* ── Cambio de modo: un círculo que se abre desde el conmutador ── modo.js anima el clip-path de la vista nueva; acá se apagan el fundido de las transiciones entre páginas (styles.css) y las transiciones CSS de cada pieza, para que el cambio sea uno solo. */ html.tema-vt::view-transition-old(root),html.tema-vt::view-transition-new(root){animation:none;mix-blend-mode:normal} html.tema-vt::view-transition-old(root){z-index:0} html.tema-vt::view-transition-new(root){z-index:1} html.tema-quieto *,html.tema-quieto *::before,html.tema-quieto *::after{transition:none!important} /* ── Menú entre 769 y 940 px: la píldora del modo entra sin partir el botón ── */ @media(min-width:769px) and (max-width:940px){ .navbar .nav-links{gap:14px} .navbar .nav-links a{font-size:13.5px} .navbar .nav-links .btn{padding:8px 12px;white-space:nowrap} } @media(min-width:769px) and (max-width:830px){.navbar .nav-links{gap:10px}} /* El botón del menú móvil: .mobile-menu a (styles.css) le quitaba el relleno y quedaba de 24 px */ .mobile-menu a.btn{padding:13px 24px;justify-content:center} /* ── Celu (hasta 768 px): la píldora del modo queda siempre a la vista en la barra, junto a la hamburguesa ── styles.css oculta .nav-links entero; acá vuelve con un solo hijo visible, la píldora (con 44 px para el dedo). La fila «Modo oscuro» del menú móvil sobra y se oculta (15-09-2026). */ @media(max-width:768px){ .navbar .nav-links{display:flex;gap:0;margin:0 2px 0 auto} .navbar .nav-links > :not(.tema-sw){display:none} .navbar .nav-links .tema-sw{padding:7px 6px} .mobile-menu .tema-fila{display:none} } @media (prefers-reduced-motion: reduce){ .tema-sw-riel,.tema-sw-bola,.tema-sw-bola svg{transition:none} } /* ════════════════════════════════════════════════ SISTEMA CLARO COMPARTIDO Para las páginas oscuras del sitio (index v9, método, servicios, sobre, contacto, blog). Su CSS lee los colores de variables de tono cuyo valor por defecto reproduce el modo oscuro: --tx-rgb / --tx / --tx-mas texto (el refuerzo --tx-mas sube la opacidad de los grises) --ac-t / --ac-s / --ac-d acentos terracota, salvia y damasco --sh-rgb / --sh-k sombras --sup / --sup-rgb recortes y velos que copian el fondo de la sección (en oscuro no existen: rige el color de respaldo de cada regla) Con cada sección .f9s toma el tono claro y un fondo del manual (.f-crema, .f-tostado; el hero .f-dia). Cada página suma su bloque con las superficies propias (pantallas blancas e islas oscuras que por dentro se ven igual en los dos modos: --sup:initial las devuelve a los colores del oscuro) y sus piezas especiales. ════════════════════════════════════════════════ */ body{--tx-rgb:245,239,227;--tx:var(--papel);--tx-inv:var(--tinta);--tx-mas:0;--ac-t:var(--terracota-claro);--ac-s:var(--salvia-claro);--ac-d:var(--damasco);--sh-rgb:0,0,0;--sh-k:1;--tx-piedra:var(--piedra)} :root[data-tema="claro"] body{background:var(--papel)} /* Tono claro: texto tinta, grises más firmes para pasar AA y acentos oscuros que pasan AA sobre crema */ :root[data-tema="claro"] .f9s.f9s{--tx-rgb:26,31,26;--tx:var(--tinta);--tx-inv:var(--papel);--tx-mas:.2;--ac-t:#A8492A;--ac-s:#4F5C36;--ac-d:#7A4E18;--sh-rgb:26,31,26;--sh-k:.3;--tx-piedra:var(--piedra-oscura);color:var(--tx);background:var(--bg)} /* Fondos del manual */ :root[data-tema="claro"] .f9s.f-crema{--bg:#F5EFE3;--sup:#F5EFE3;--sup-rgb:245,239,227} :root[data-tema="claro"] .f9s.f-tostado{--bg:#E8DFCC;--sup:#E8DFCC;--sup-rgb:232,223,204;--tx-mas:.24} /* Hero de día: cielo de mañana con el resplandor del sol arriba a la derecha */ :root[data-tema="claro"] .f9s.f-dia{--bg:#F2EADB;--sup:#F2EADB;--sup-rgb:242,234,219;background:radial-gradient(560px 400px at 76% 24%,rgba(232,184,122,.34),transparent 70%),linear-gradient(180deg,#F9F5EC 0%,#F3EBDD 55%,#EBE0CB 100%)} /* El crema es liso y quieto: sin luces que derivan ni fundidos oscuros */ :root[data-tema="claro"] .f9s.f9s::before,:root[data-tema="claro"] .f9s.f9s::after{content:none} /* Cordillera de día (hero del index y cierres): la misma, en verdes con el sol en damasco */ :root[data-tema="claro"] .f9s .hero-mountains{opacity:1} :root[data-tema="claro"] .f9s .hero-mountains path:nth-of-type(1){opacity:.26} :root[data-tema="claro"] .f9s .hero-mountains path:nth-of-type(2){opacity:.22} :root[data-tema="claro"] .f9s .hero-mountains path:nth-of-type(3){opacity:.27} :root[data-tema="claro"] .f9s .hero-mountains circle{fill:#E8B87A;animation-name:sol-dia} @keyframes sol-dia{from{transform:translate3d(0,0,0);opacity:.5}50%{opacity:.72}to{transform:translate3d(-18px,16px,0);opacity:.56}} @media(prefers-reduced-motion:reduce){:root[data-tema="claro"] .f9s .hero-mountains circle{animation:none;opacity:.6}} /* Menú: sobre el día, texto tinta; con scroll, vidrio crema; el menú móvil en papel */ :root[data-tema="claro"] .navbar,:root[data-tema="claro"] .mobile-menu{--tx-rgb:26,31,26;--tx:var(--tinta);--tx-inv:var(--papel);--tx-mas:.2;--ac-t:#A8492A;--ac-s:#4F5C36;--ac-d:#7A4E18} :root[data-tema="claro"] body .navbar-dark .nav-links a:not(.btn){color:rgba(26,31,26,.74)} :root[data-tema="claro"] body .navbar-dark .nav-links a:not(.btn):hover,:root[data-tema="claro"] body .navbar-dark .nav-links a.active:not(.btn){color:var(--tinta)} :root[data-tema="claro"] body .navbar-dark .brand-name{color:var(--olivo)} :root[data-tema="claro"] body .navbar-dark .brand-sub{color:var(--piedra-oscura)} :root[data-tema="claro"] body .navbar-dark .hamburger span{background:var(--tinta)} :root[data-tema="claro"] body .navbar.scrolled{background:rgba(245,239,227,.84);box-shadow:0 1px 0 rgba(26,31,26,.08),0 12px 32px rgba(26,31,26,.08)} :root[data-tema="claro"] body .mobile-menu{background:var(--papel);border-top:1px solid rgba(26,31,26,.08);box-shadow:0 24px 48px rgba(26,31,26,.14)} :root[data-tema="claro"] body .mobile-menu a:not(.btn){color:var(--tinta)} :root[data-tema="claro"] body .mobile-menu a:not(.btn):hover{color:var(--olivo)} /* El botón del menú (con scroll y en el menú móvil) conserva el texto papel sobre el terracota */ :root[data-tema="claro"] body :is(.navbar .nav-links,.mobile-menu) .btn-cta{color:var(--papel)} /* Botones sobre crema: el CTA con texto claro que se vuelve tinta al pasar; el oscuro, tinta */ :root[data-tema="claro"] .f9s .btn-cta{color:var(--papel)} :root[data-tema="claro"] .f9s .btn-cta:hover{background:var(--tinta);color:var(--papel)} :root[data-tema="claro"] .f9s .btn-dark{background:var(--tinta);color:var(--papel)} :root[data-tema="claro"] .f9s .btn-dark:hover{background:#000;color:var(--papel)} /* Reglas de styles.css para .bg-tinta (texto claro fijo): misma especificidad, así las del CSS propio de cada página, que cargan después, siguen mandando */ :where(:root[data-tema="claro"]) .bg-tinta .lead{color:rgba(var(--tx-rgb),calc(.75 + var(--tx-mas)))} :where(:root[data-tema="claro"]) .bg-tinta .eyebrow,:where(:root[data-tema="claro"]) .bg-tinta .mono-label{color:var(--tx-piedra)} :where(:root[data-tema="claro"]) .bg-tinta .btn-ghost{color:var(--tx);border-color:rgba(var(--tx-rgb),.3)} :where(:root[data-tema="claro"]) .bg-tinta .btn-ghost:hover{border-color:var(--tx)} :where(:root[data-tema="claro"]) .bg-tinta .badge{background:rgba(var(--tx-rgb),.08);border-color:rgba(var(--tx-rgb),.2);color:rgba(var(--tx-rgb),calc(.75 + var(--tx-mas)))} :where(:root[data-tema="claro"]) .bg-tinta .divider-top{border-color:rgba(var(--tx-rgb),.1)} :where(:root[data-tema="claro"]) .bg-tinta .placeholder-media{background:rgba(var(--tx-rgb),.05);border-color:rgba(var(--tx-rgb),.2)} :where(:root[data-tema="claro"]) .bg-tinta .lead-error{color:var(--ac-d);background:rgba(232,184,122,.14);border-color:rgba(122,78,24,.3)} :where(:root[data-tema="claro"]) .bg-tinta :focus-visible{outline-color:var(--ac-t)} /* ═══ fin sistema claro compartido ═══ */ /* ════════════════════════════════════════════════ FONDOS DE LAS SECCIONES EN OSCURO (2026-09-14) Todas las páginas se ven como el home: cada
toma el fondo de su tono y entre una y otra va la Cordillera (assets/divisiones.css). El crema es #161A16 con un halo oliva arriba a la derecha; el tostado, tinta con las luces de .bg-tinta (styles.css) y un halo terracota arriba a la izquierda. Los halos derivan despacio y se recortan en el borde de su sección; ese borde lo tapa el velo de la Cordillera. Manda el tono (.f-crema, .f-tostado), no la clase .bg-*, así el oscuro y el claro alternan igual. El hero (.f-dia) conserva el fondo de cada página. En claro rigen los fondos del manual de más arriba, que apagan los halos. ════════════════════════════════════════════════ */ :root:not([data-tema="claro"]) body{background:#161A16} :where(.f9s:not(.f-dia)){position:relative;overflow:clip} :root:not([data-tema="claro"]) .f9s.f-crema{background:#161A16} :root:not([data-tema="claro"]) .f9s.f-tostado{background:radial-gradient(900px 480px at 85% -10%,rgba(138,154,107,.2),transparent 65%),radial-gradient(700px 420px at 0% 110%,rgba(196,94,58,.13),transparent 60%),radial-gradient(420px 320px at 55% 45%,rgba(216,155,60,.05),transparent 70%),#1A1F1A} :root:not([data-tema="claro"]) .f9s.f-crema::after,:root:not([data-tema="claro"]) .f9s.f-tostado::before{content:'';display:block;position:absolute;border-radius:50%;filter:blur(80px);opacity:1;pointer-events:none;z-index:0} :root:not([data-tema="claro"]) .f9s.f-crema::after{width:55vw;height:55vw;left:auto;right:-18%;top:-20%;bottom:auto;background:radial-gradient(circle,rgba(92,107,63,.30),transparent 60%);animation:fondo-derivar 26s ease-in-out infinite alternate-reverse} :root:not([data-tema="claro"]) .f9s.f-tostado::before{width:60vw;height:60vw;left:-15%;right:auto;top:-20%;bottom:auto;background:radial-gradient(circle,rgba(196,94,58,.26),transparent 60%);animation:fondo-derivar 22s ease-in-out infinite alternate} @keyframes fondo-derivar{from{transform:translate(-3%,-2%) rotate(0deg)}to{transform:translate(4%,3%) rotate(8deg)}} @media(prefers-reduced-motion:reduce){:root:not([data-tema="claro"]) .f9s.f-crema::after,:root:not([data-tema="claro"]) .f9s.f-tostado::before{animation:none}} /* ═══ fin fondos del oscuro ═══ */