/* Escritorio SATc · base común (fichas de diseño del sitio Red Alerta Energética) */
/* jurado 4 (R-A2): sin @import de Google Fonts: frenaba el primer pintado con mala señal. La letra la piden escritorio.html, index.html
   y acceso.html con <link media="print" onload> (no frena); si no llega, quedan las letras del sistema. */
:root{
  --papel:#ece5d6; --papel2:#f4efe4; --blanco:#fffdf8; --tinta:#2e2a24; --tinta2:#4a443b; --mut:#6b6357;
  --verde:#61ad6d; --ambar:#f1aa36; --azul:#61aedb; --rosa:#de72a7; --teal:#2E9E8F; --verde-osc:#2E6B4F;
  --copihue:#c8404f; --wa:#25D366;
  --verde-s:#dcefdc; --ambar-s:#fbe7c2; --azul-s:#d9edf8; --rosa-s:#f7dceb; --copihue-s:#f6d9dc;
  --fd:'Fraunces',Georgia,serif; --fb:'Nunito',system-ui,sans-serif;
  --borde:2px solid var(--tinta); --sombra:5px 5px 0 var(--tinta); --sombra-s:3px 3px 0 var(--tinta);
  --r:16px; --r-s:10px; --escala:1;
}
*{box-sizing:border-box}
html{font-size:calc(106.25% * var(--escala));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fb);line-height:1.5}
h1,h2,h3{font-family:var(--fd);font-weight:900;line-height:1.1;margin:0;letter-spacing:-.01em}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.1rem;border:var(--borde);border-radius:999px;background:var(--blanco);font-weight:800;text-decoration:none;cursor:pointer;box-shadow:var(--sombra-s);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.btn.pri{background:var(--copihue);color:#fff}.btn.verde{background:var(--verde)}.btn.wa{background:var(--wa)}.btn.liso{box-shadow:none}
.etq{font-size:.83rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.marca-ej{display:inline-block;font-size:.83rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .45rem;border:1.5px dashed var(--tinta2);border-radius:6px;color:var(--tinta2);background:var(--papel2)}
.barra{height:14px;border:var(--borde);border-radius:999px;background:var(--blanco);overflow:hidden}
.barra>i{display:block;height:100%;background:var(--verde);border-right:var(--borde);transition:width .8s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
html.sin-mov *,html.sin-mov *::before,html.sin-mov *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}

/* ───── 02-11 (O3, pedido de a3): lo que se levanta al pasar el cursor ya no tirita ─────
   Elementos: .btn.
   Antes el :hover subía el elemento 1-2 px; con el cursor en su borde de abajo/derecha el elemento salía de debajo del cursor, bajaba, volvía
   a quedar debajo y subía otra vez (decenas de vaivenes por segundo). Mismo movimiento de siempre, pero al estar levantado el elemento suma un
   aro invisible de 6 px por fuera de su borde (solo mientras está levantado; el centro queda libre para sus hijos): la zona del cursor
   «levantado» siempre cubre a la de «en reposo» y no hay vaivén. Solo con ratón; sin ratón (celular) o con movimiento reducido no se levanta
   (no queda «pegado»). */
@media (hover:hover) and (pointer:fine){
  :where(.btn){position:relative}
  .btn:hover::after{content:"";position:absolute;inset:-6px;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,6px 6px,6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 6px,6px 6px)}
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .btn:hover{transform:none;translate:none}
}