/* dinamico.css · capa de interacción para guardian.rafadp.es
   Enlázala DESPUÉS del CSS existente:  <link rel="stylesheet" href="/dinamico.css">
   Solo añade hovers, transiciones y un movimiento con sentido; no cambia la maquetación. */

:root{--hover:#8A6212;--on-hover:#FFFFFF;--lift:0 10px 24px -12px rgba(15,76,92,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hover:#F2CC7A;--on-hover:#10201F;--lift:0 10px 24px -12px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--hover:#F2CC7A;--on-hover:#10201F;--lift:0 10px 24px -12px rgba(0,0,0,.6)}

html{scroll-behavior:smooth}
::selection{background:var(--brass);color:#14262E}

/* Enlaces: el subrayado fino se sustituye por uno que crece y el color cambia */
main a:not(.btn),footer a,nav a,.login{
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.2em;
  background:linear-gradient(var(--hover),var(--hover)) 0 100%/0% 2px no-repeat;
  transition:color .2s ease,background-size .3s ease,text-decoration-color .2s ease}
.brand{text-decoration:none;background:none}
@media (hover:hover){
  main a:not(.btn):hover,footer a:hover,nav a:hover,.login:hover{color:var(--hover);background-size:100% 2px;text-decoration-color:transparent}
}

/* Botones */
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
@media (hover:hover){
  .btn.primary:hover{background:var(--hover);border-color:var(--hover);color:var(--on-hover);transform:translateY(-2px);box-shadow:var(--lift)}
  .btn.ghost:hover{background:var(--accent);color:var(--on-accent,#fff);transform:translateY(-2px);box-shadow:var(--lift)}
}
.btn:active{transform:translateY(0);box-shadow:none}

/* Logo: la llave gira al pasar por encima */
.brand svg{transition:transform .45s cubic-bezier(.3,1.4,.5,1),color .2s ease}
@media (hover:hover){.brand:hover svg{transform:rotate(-35deg) scale(1.1);color:var(--hover)}}

/* Tarjetas: se elevan y el borde coge color */
.box,.demo,.beta{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
@media (hover:hover){
  .box:hover,.demo:hover,.beta:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:var(--accent)}
  .box.no:hover{border-left-color:var(--brass)}
  .box.yes:hover{border-left-color:var(--accent)}
}
.ic{transition:transform .3s cubic-bezier(.3,1.4,.5,1),color .2s ease}
@media (hover:hover){.why .box:hover .ic{color:var(--hover);transform:scale(1.18) rotate(-6deg)}}

/* Pasos numerados */
.steps li::before{transition:transform .3s cubic-bezier(.3,1.4,.5,1),background-color .2s ease}
@media (hover:hover){.steps li:hover::before{transform:scale(1.15) rotate(-8deg);background:var(--hover);color:var(--on-hover)}}

/* Tabla comparativa */
.tbl td,.tbl th{transition:background-color .2s ease}
@media (hover:hover){.tbl tbody tr:hover td{background:color-mix(in srgb,var(--brass) 14%,transparent)}.tbl tbody tr:hover td.us{background:var(--mint)}}

/* Preguntas frecuentes */
summary{transition:color .2s ease,padding-left .25s ease}
@media (hover:hover){summary:hover{color:var(--hover);padding-left:.4rem}}
details[open] summary{color:var(--accent)}
details[open] p{animation:abre .3s ease}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Campo de la demo: brilla al escribir */
.demo input{transition:border-color .2s ease,box-shadow .2s ease}
.demo input:focus{border-color:var(--brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 25%,transparent)}
.enc{transition:background-color .3s ease}
.demo:focus-within .enc{background:color-mix(in srgb,var(--brass) 18%,var(--mint))}

/* Movimiento con sentido: los datos "viajan" entre dispositivos y hacia el servidor */
.il .dash{animation:fluye 1.4s linear infinite}
@keyframes fluye{to{stroke-dashoffset:-11}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}