:root{--niebla:#e9e3d3;--niebla-2:#b9c3c9}
body{min-height:100vh;min-height:100dvh}
.partida{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}

.lienzo{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 110%,#16324a 0%,var(--noche) 60%);color:var(--niebla);display:flex;flex-direction:column;justify-content:space-between;padding:32px clamp(24px,4vw,56px)}
#relieve{position:absolute;inset:0;width:100%;height:100%}
.lienzo>*:not(canvas){position:relative}
.lienzo .brand{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;color:var(--niebla);font:700 1.125rem/1 var(--display);text-decoration:none}
.lienzo .brand svg{width:28px;height:28px}
.arriba{display:flex;align-items:center;justify-content:space-between;gap:16px}
.arriba>.brand{align-self:auto}
#idioma{display:flex;gap:4px;font:500 .875rem var(--mono)}
#idioma a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--niebla);text-decoration:none}
#idioma a:hover,#idioma a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.lienzo :focus-visible{outline-color:#8fb0ff}
.lema{max-width:30ch}
.lema-grande{font:800 clamp(1.75rem,3.2vw,2.75rem)/1.08 var(--display);letter-spacing:-.025em;margin:0 0 16px;text-wrap:balance}
.lema-chico{color:var(--niebla-2);font-size:1rem;margin:0}
.volver{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;color:var(--niebla);font-weight:600;font-size:.9375rem;text-decoration:none}
.volver svg{width:18px;height:18px;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.volver:hover svg{transform:translateX(-3px)}
.volver:hover{text-decoration:underline;text-underline-offset:4px}

main{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.caja{width:100%;max-width:420px;animation:entra .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{transform:translateY(12px)}}
.caja h1{font-size:clamp(2rem,3.4vw,2.5rem);margin:0 0 24px}
.caja .tarjeta{background:transparent;border:0;padding:0;max-width:none}
.caja p{max-width:none}
.caja input{width:100%;border-color:#8a949c;transition:border-color .2s,box-shadow .2s}
.caja input:hover{border-color:var(--tinta-2)}
.caja input:focus{outline:none;border-color:var(--morpho);box-shadow:0 0 0 4px rgba(47,99,214,.18)}
.caja .btn.pri{width:100%;gap:10px;margin-top:8px}
.caja .btn.pri svg{width:18px;height:18px;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.caja .btn.pri:hover svg{transform:translateX(3px)}
.caja .enlace{margin-top:8px}
.caja .ayuda{margin:8px 0 0}

.con-ver{position:relative}
.con-ver input{padding-right:92px}
.ver{position:absolute;top:4px;right:4px;bottom:4px;min-width:76px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--tinta-2);font:600 .875rem var(--texto);cursor:pointer}
.ver:hover{background:var(--papel)}
.ver[aria-pressed=true]{color:var(--morpho)}

.seguro{display:flex;align-items:center;gap:8px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--papel-2);font-size:.875rem;color:var(--tinta-2)}
.seguro svg{width:16px;height:16px;flex:none}

@media (max-width:860px){
  .partida{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lienzo{min-height:200px;padding:20px 16px;gap:24px}
  .lema-chico{display:none}
  .lema-grande{font-size:1.5rem;max-width:22ch}
  main{align-items:flex-start;padding:32px 16px 56px}
}
@media (prefers-reduced-motion:reduce){
  .caja{animation:none}
  .volver svg,.caja .btn.pri svg{transition:none}
}