/* Entrar (13-nov): todo en el claro de la app (Jorge: «el negro y el claro parecen dos apps»), mascota viva arriba,
   avisos en tarjetas blancas como las de la app, formulario debajo sin cambiar de fondo. Sin desplazamiento horizontal. */
html:has(.en),body:has(.en){background:#f6f5f1}
.en{position:fixed;inset:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:#f6f5f1;color:#111;overflow-x:hidden;font-family:Inter,sans-serif}
.en-arriba{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top) + 18px) 24px 26px;overflow:hidden}
.en-escena{position:absolute;inset:0;pointer-events:none}
.en-halo{position:absolute;left:72%;top:34%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.45) 0%,rgba(139,92,246,.14) 40%,transparent 70%)}
.en-masc{position:absolute;right:6%;top:calc(env(safe-area-inset-top) + 16%);width:min(36vw,150px);height:auto;overflow:visible}
.en-sombra{fill:#111;opacity:.08}
.en-aviso{position:absolute;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:14px;opacity:0;will-change:transform,opacity;
  background:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(17,17,17,.06),0 8px 22px rgba(17,17,17,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  max-width:54vw;white-space:nowrap}
.en-aviso i{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#8b5cf6;color:#0b0b0b}
.en-aviso span{display:flex;flex-direction:column;min-width:0}
.en-aviso b{font:600 12.5px/1.2 Inter,sans-serif;color:#111;overflow:hidden;text-overflow:ellipsis}
.en-aviso small{font:400 11.5px/1.25 Inter,sans-serif;color:#8a8a85;overflow:hidden;text-overflow:ellipsis}
.en-a0,.en-a3{left:20px;top:calc(env(safe-area-inset-top) + 7%)}
.en-a1,.en-a4{left:20px;top:calc(env(safe-area-inset-top) + 7% + 62px)}
.en-a2,.en-a5{left:20px;top:calc(env(safe-area-inset-top) + 7% + 124px)}
.en-txt{position:relative}
.en-txt h1{margin:0;font:800 34px/1.05 Inter,sans-serif;letter-spacing:-.035em;color:#111}
.en-txt h1 span{color:#7c3aed}
.en-txt p{margin:8px 0 0;font:400 15.5px/1.4 Inter,sans-serif;color:#6f6f6a}

.en-hoja{position:relative;color:#111;padding:4px 20px calc(env(safe-area-inset-bottom) + 22px)}
.en-google{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:16px;margin-top:6px;
  background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.08);color:#111;font:600 16px Inter,sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent}
.en-google:active{transform:scale(.98)}
.en-o{display:flex;align-items:center;gap:10px;margin:16px 2px;color:#a3a39d;font:500 12.5px Inter,sans-serif}
.en-o::before,.en-o::after{content:'';flex:1;height:1px;background:rgba(17,17,17,.1)}
.en-form{display:flex;flex-direction:column;gap:10px}
.en-campo{display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 15px;border-radius:16px;background:#fff;color:#8a8a85;box-shadow:0 0 0 1px rgba(17,17,17,.08);
  border:1.5px solid transparent;transition:border-color .15s,background .15s}
.en-campo:focus-within{border-color:#111;background:#fff;color:#111}
.en .en-campo input{all:unset;box-sizing:border-box;flex:1;min-width:0;width:auto!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;font:500 16px Inter,sans-serif!important;color:#111}
.en-campo input::placeholder{color:#a3a39d}
.en-ver{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#8a8a85}
.en-ver:active{background:#f1f1ee}
.en-entrar{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:16px;margin-top:4px;
  background:#8b5cf6;color:#0b0b0b;font:700 16.5px Inter,sans-serif;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 22px rgba(124,58,237,.3)}
.en-entrar:active{transform:scale(.98)}
.en-entrar:disabled{opacity:.6}
.en-error{margin:2px 4px;color:#d23b3b;font:500 14px Inter,sans-serif}
.en-alta{margin:8px 0 0;text-align:center;font:400 14.5px Inter,sans-serif;color:#8a8a85}
.en-alta a{color:#111;font-weight:700;text-decoration:none;border-bottom:2px solid #8b5cf6}
@media (min-width:700px){
  .en{flex-direction:row}
  .en-arriba{flex:1.2;min-height:100dvh;padding:48px}
  .en-masc{width:230px;right:auto;left:58%;top:20%;transform:translateX(-50%)}
  .en-halo{left:58%;top:34%}
  .en-aviso{max-width:none}
  .en-a0,.en-a3,.en-a1,.en-a4,.en-a2,.en-a5{left:48px}
  .en-a0,.en-a3{top:48px}.en-a1,.en-a4{top:110px}.en-a2,.en-a5{top:172px}
  .en-txt h1{font-size:52px}
  .en-hoja{flex:1;max-width:460px;display:flex;flex-direction:column;justify-content:center;padding:48px 44px;background:#fff;box-shadow:-1px 0 0 rgba(17,17,17,.06)}
}

/* Sin scroll (Jorge, 13-nov): todo cabe en la pantalla; en móviles bajitos (o Safari con sus barras) se compacta */
@media (max-width:699px) and (max-height:760px){
  .en-arriba{padding-bottom:16px}
  .en-txt h1{font-size:29px}
  .en-txt p{font-size:14.5px;margin-top:5px}
  .en-masc{width:min(30vw,124px);top:calc(env(safe-area-inset-top) + 12%)}
  .en-aviso{padding:6px 10px 6px 6px;border-radius:12px}
  .en-aviso i{width:24px;height:24px;border-radius:8px}
  .en-a0,.en-a3{top:calc(env(safe-area-inset-top) + 16px)}
  .en-a1,.en-a4{top:calc(env(safe-area-inset-top) + 66px)}
  .en-a2,.en-a5{top:calc(env(safe-area-inset-top) + 116px)}
  .en-google,.en-campo{height:48px}
  .en-entrar{height:50px}
  .en-o{margin:11px 2px}
  .en-form{gap:8px}
  .en-alta{margin-top:4px}
}
@media (max-width:699px) and (max-height:620px){
  .en-a2,.en-a5{display:none}
  .en-txt p{display:none}
}