/* Ingreso al portal y activación de cuenta.
   Hay dos capas: «portal», con las reglas de siempre (decide la especificidad y el orden de carga), y «paginas», con lo que
   una página cambia de una pieza compartida (gana aunque su hoja se cargue antes). Sin capa quedan solo los pocos !important
   que deben ganarle a una animación o al modo de movimiento reducido. */

@keyframes gira{to{transform:rotate(360deg)}}
@keyframes temb{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

@layer portal {
  /* Etiqueta * */
  *{box-sizing:border-box}

  /* Etiqueta html */
  html,body{height:100%}

  /* Etiqueta body */
  body{margin:0;font-family:"Public Sans","Segoe UI",system-ui,sans-serif;color:#131A26;background:#F5F7FA;-webkit-font-smoothing:antialiased}

  /* Componente .lay* */
  .lay{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,1fr);min-height:100vh}
  @media (max-width:860px) {
    .lay{grid-template-columns:1fr}
  }

  /* Componente .marca* */
  .marca{position:relative;background:var(--marca);color:#fff;padding:48px 56px;display:flex;flex-direction:column;overflow:hidden}
  .marca::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:url(/skyline.png) center bottom/min(1100px,160%) auto no-repeat;opacity:.55;pointer-events:none}
  .marca img{height:30px;width:auto;align-self:flex-start}
  .marca .txt{margin:auto 0;max-width:30ch;position:relative;z-index:1}
  .marca .k{font-size:13px;font-weight:600;color:#D7E6FF}
  .marca h1{margin:12px 0 0;font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-.03em}
  .marca p{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:#EAF2FF}
  @media (max-width:860px) {
    .marca{padding:28px 24px 96px;min-height:auto}
    .marca .txt{margin:40px 0 0}
    .marca h1{font-size:30px}
    .marca::after{height:110px}
  }

  /* Componente .form* */
  .form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
  @media (max-width:860px) {
    .form{padding:32px 20px 48px}
  }

  /* Componente .card* */
  .card{width:100%;max-width:390px}
  .card h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
  .card .s{margin:6px 0 24px;font-size:14px;line-height:1.5;color:#5F6B7A}

  /* Componente .vista* */
  .vista[hidden]{display:none}

  /* Etiqueta label */
  label{display:block;font-size:12.5px;font-weight:600;margin:16px 0 7px}
  label:first-of-type{margin-top:0}

  /* Componente .campo* */
  .campo{position:relative}

  /* Etiqueta input */
  input{width:100%;padding:12px 14px;border:1px solid #DCE3EC;border-radius:10px;font:inherit;font-size:15px;background:#fff;color:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
  input:focus{border-color:var(--azul);box-shadow:0 0 0 4px rgba(31,111,235,.14)}
  input[readonly]{background:#F1F4F8;color:#3A465C}

  /* Componente .conver* */
  input.conver{padding-right:46px}

  /* Componente .ayuda* */
  .ayuda{margin-top:6px;font-size:12.5px;color:#5F6B7A}

  /* Componente .ver* */
  .ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;padding:8px;border-radius:8px;cursor:pointer;color:#5F6B7A;display:flex}
  .ver:hover{background:#EEF3FB;color:var(--azul)}
  .ver:focus-visible{outline:2px solid var(--azul)}

  /* Componente .caps* */
  .caps{display:none;margin-top:8px;font-size:12.5px;color:#7A4F0E;background:#FFF4D6;border-radius:8px;padding:6px 10px}
  .caps.on{display:block}

  /* Componente .reqs* */
  .reqs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px;color:#5F6B7A}
  .reqs li{display:flex;gap:7px;align-items:center}
  .reqs li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid #B9C3CF;flex:none;transition:all .15s}
  .reqs li.ok{color:var(--verde)}
  .reqs li.ok::before{border-color:var(--verde);background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat}

  /* Componente .btn* */
  .btn{width:100%;margin-top:22px;padding:13px;border:0;border-radius:10px;background:var(--azul);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
  .btn:hover{background:var(--azulhover)}
  .btn:disabled{opacity:.75;cursor:default}
  .btn:focus-visible{outline:2px solid #131A26;outline-offset:2px}
  .btn.ok{background:var(--verde)}
  .btn.sec{background:#fff;color:var(--azul);border:1px solid #BFD6FF}
  .btn.sec:hover{background:#F3F7FE}

  /* Componente .spin* */
  .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}

  /* Componente .msg* */
  .msg{margin-top:14px;font-size:13.5px;line-height:1.45;min-height:20px;color:var(--rojo)}
  .msg.bien{color:var(--verde)}

  /* Componente .nota* */
  .nota{margin-top:14px;padding:12px 14px;border-radius:10px;background:#EAF2FF;color:#0B4A85;font-size:13px;line-height:1.5}

  /* Componente .lnk* */
  .lnk{display:inline-block;margin-top:16px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--azul);cursor:pointer;text-decoration:none}
  .lnk:hover{text-decoration:underline}
  .lnk:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}

  /* Componente .pie* */
  .pie{margin-top:34px;padding-top:16px;border-top:1px solid #DCE3EC;font-size:12.5px;color:#5F6B7A}

  /* Componente .temb* */
  .temb{animation:temb .38s cubic-bezier(.36,.07,.19,.97)}
}

/* Deben ganarle a una animación o al modo de movimiento reducido: van sin capa y con !important */
@media (prefers-reduced-motion:reduce) {
  *{animation:none !important}
}
/*  Lo que esta página cambia de las piezas compartidas: gana aunque esta hoja se cargue antes.  */
@layer paginas{
  /* Etiqueta * */
  @media (prefers-reduced-motion:reduce) {
    *{transition:none}
  }
}