/* Estilos del formulario emergente.
   Van en un fichero y no en un <style> a proposito: el parche de textos que
   trae el HTML de referencia recorre TODOS los nodos de texto del documento
   y tambien reescribia dentro del CSS — convertia z-index:9998 en
   "z-index:Gratis8" (por el par 999 -> Gratis) y translate(135%) en
   "translate(12x)" (por 35% -> 2x), asi que la ventana quedaba por debajo
   de la pagina y sin animacion. Desde un fichero externo no lo puede tocar. */
.rag-modal{
  position:fixed;inset:0;z-index:9998;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(19,19,19,.72);backdrop-filter:blur(6px);
}
.rag-modal[open]{display:flex}
.rag-modal__panel{
  background:#fff;border-radius:4px;width:min(560px,100%);
  max-height:calc(100vh - 40px);overflow:auto;position:relative;
  padding:clamp(26px,4vw,44px);
  font-family:"Satoshi",system-ui,sans-serif;color:#131313;
  transform:translateY(14px);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.rag-modal[open] .rag-modal__panel{transform:none;opacity:1}
.rag-modal__tag{
  font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-size:13px;
  letter-spacing:.02em;color:rgba(19,19,19,.62);display:block;margin-bottom:14px;
}
.rag-modal__tag::before{content:"/";opacity:.4;margin-right:2px}
.rag-modal h2{
  font-size:clamp(25px,3.6vw,34px);font-weight:700;letter-spacing:-.04em;
  line-height:1.05;margin:0 0 12px;
}
.rag-modal__lede{font-size:16px;line-height:1.5;color:rgba(19,19,19,.62);margin:0 0 24px;max-width:42ch}
.rag-modal__x{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;cursor:pointer;
  background:transparent;border-radius:4px;display:grid;place-items:center;color:#131313;
}
.rag-modal__x:hover{background:#F3F3F3}
.rag-modal__x svg{width:16px;height:16px}
.rag-f{margin-bottom:14px}
.rag-f label{
  display:block;font-family:"Roboto Mono",ui-monospace,Menlo,monospace;
  font-size:12.5px;color:rgba(19,19,19,.62);margin-bottom:6px;
}
.rag-f input,.rag-f textarea{
  width:100%;background:#F3F3F3;border:1px solid rgba(19,19,19,.14);color:#131313;
  font-family:inherit;font-size:16px;font-weight:500;padding:13px 14px;border-radius:4px;
  min-height:50px;box-sizing:border-box;transition:border-color .16s;
}
.rag-f textarea{min-height:86px;resize:vertical;line-height:1.45}
.rag-f input:focus,.rag-f textarea:focus{outline:2px solid #98FE00;outline-offset:1px;border-color:transparent}
.rag-f.bad input{border-color:#d33a2c}
.rag-f .err{display:none;font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-size:12px;color:#b32a1e;margin-top:5px}
.rag-f.bad .err{display:block}
.rag-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* El boton de la casa: al pasar por encima se invierte y la flecha se cambia
   por otra en diagonal, igual que los de la portada. */
.rag-cta{
  display:inline-flex;align-items:center;border:0;cursor:pointer;background:#131313;color:#fff;
  font-family:inherit;font-weight:700;font-size:17px;letter-spacing:-.02em;border-radius:4px;
  padding:0 0 0 20px;min-height:54px;overflow:hidden;position:relative;margin-top:6px;
  transition:background .34s cubic-bezier(.2,.8,.2,1),color .34s cubic-bezier(.2,.8,.2,1);
}
.rag-cta span{padding:15px 0}
.rag-cta i{
  width:50px;align-self:stretch;margin-left:16px;flex:none;background:#98FE00;color:#131313;
  font-style:normal;position:relative;overflow:hidden;
  transition:background .34s cubic-bezier(.2,.8,.2,1),color .34s cubic-bezier(.2,.8,.2,1);
}
.rag-cta i svg{
  width:15px;height:15px;position:absolute;left:50%;top:50%;margin:-7.5px 0 0 -7.5px;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .34s;
}
.rag-cta i svg + svg{transform:translate(-135%,135%);opacity:0}
.rag-cta:hover{background:#98FE00;color:#131313}
.rag-cta:hover i{background:#131313;color:#98FE00}
.rag-cta:hover i svg{transform:translate(135%,-135%);opacity:0}
.rag-cta:hover i svg + svg{transform:none;opacity:1}
.rag-cta[disabled]{opacity:.55;cursor:progress}
.rag-modal__legal{
  font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.6;
  color:rgba(19,19,19,.5);margin:16px 0 0;max-width:46ch;
}
.rag-modal__msg{display:none;font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-size:13.5px;margin-top:14px;padding:13px 15px;border-radius:4px;line-height:1.6}
.rag-modal__msg.ok{display:block;background:#98FE00;color:#131313;font-weight:700}
.rag-modal__msg.ko{display:block;background:#fdecea;color:#b32a1e;border:1px solid rgba(179,42,30,.3)}
@media(prefers-reduced-motion:reduce){.rag-modal__panel,.rag-cta,.rag-cta i,.rag-cta i svg{transition:none}}