:root{
  --bg:#0f0f10;
  --card:#1b1b1d;
  --muted:#9aa0a6;
  --text:#e8eaed;
  --ring:#2a2a2e;
  --ok:#3ddc97;

  /* Colores de estados */
  --blue:#0071e3;   /* foco */
  --amber:#ad8200;  /* borde confirmado */
  --amber-fill:#2b2000; /* relleno confirmado */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: white;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:center;
}
/* (tus @font-face aquí si los necesitas) */

.wrap{
  min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:clamp(16px, 4vw, 62px);
}

/* ---------- Cabecera ---------- */
.brand{
  font-weight:700;
  font-size: clamp(22px, 5vw, 28px);
  text-align:center; letter-spacing:.2px;
}
.brand .sign-in-label{
  display:block;
  font-family: system-ui, Helvetica Neue, sans-serif;
  font-size:32px; font-weight:600; line-height:36px; color:black;
  -webkit-margin-before:20px; margin-block-start:20px;
  text-align:center; margin-bottom:20px;
}

/* ---------- Card ---------- */
.card{
  width:100%; max-width:640px; margin:18px auto 8px;
  background:white;
  /*border:1px solid var(--ring); border-radius:22px;*/
  /*box-shadow:0 10px 30px rgba(0,0,0,.35); */overflow:hidden;
}
.card-inner{ padding:14px clamp(14px, 4vw, 22px) 18px; }
.card-interior{ width:90%; }

/* ---------- Inputs ---------- */
.field{ display:grid; gap:8px; margin:12px 0 0; }
.label{ font-size:13px; color:var(--muted) }

.input-row{
  position:relative;
  display:flex; align-items:center; gap:10px;
  background: hsla(0, 0%, 100%, .04);
  border:1px solid #6e6e73; border-radius:16px;
  padding:12px 12px;
  transition:border-color .14s ease, background .14s ease;
}
/* foco azul SIN brillo */
.input-row:focus-within{
  border-color:var(--blue) !important;
  box-shadow:none !important;
}

/* Floating label */
.input-row[data-float] .float-label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#7c818a; pointer-events:none;
  font-size: clamp(16px, 1.8vw, 17px); line-height:1;
  transition: all .16s ease;
}
.input-row[data-float] input{
  flex:1; font:inherit; color:var(--text); background:transparent; border:0; outline:0; padding:0;
}
.input-row.is-floating .float-label{
  top:8px; transform:none; font-size:12px; color:var(--muted);
}
.input-row.is-floating input{ padding-top:10px; padding-left:2px;color:#494949;}

/* Confirmado (email validado) */
.input-row.confirmed{
  border-color: #ffe045;
  box-shadow: inset 0 0 0 100px #fffef2;
  background:transparent !important;
}
/* Ocultar flecha del email cuando está confirmado */
.input-row.confirmed .go{ display:none !important; }

/* Botón flecha */
.go{
  width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  background:transparent; color:#8f949d; border:1px solid #8f949d;
  transition:transform .06s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.input-row:focus-within .go{ border-color:#b9bec6; color:#b9bec6; }
.go:active{ transform:translateY(1px) }
.go[disabled]{ opacity:.5; pointer-events:none; }

/* “Pegar” email + password cuando apilamos */
.input-row.joined-top{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.input-row.joined-bottom{
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-top-width:0; /* evita línea doble */
}
/* El bloque email pierde su margen grande al apilar */
#step-email{ display:flex; flex-direction:column; align-items:center; }
#step-email .field{ width:100%; margin-bottom:5em; }
#step-email.stacked .field{ margin-bottom:0 !important; }
.field.compact{ margin:0 !important;padding-bottom:5em }

/* ---------- Checkboxes & helpers ---------- */
.row{ display:flex; align-items:center; gap:10px; margin:12px 2px 0 }
.row input[type="checkbox"]{ width:18px; height:18px }
.helper{ text-align:center; margin:0; font-family: system-ui, Helvetica Neue, sans-serif; font-size:14px; }
.helper a{ color:#2997ff; text-decoration:none }
.helper a:hover{ text-decoration:underline }

/* ---------- Stepper ---------- */
[data-step]{ display:none }
[data-step].active{ display:block }

/* ---------- OTP ---------- */
.otp{ display:flex; gap:10px; justify-content:center; margin-top:12px }
.otp input{
  width: 42px;
  height: 42px;
  text-align: center;
  font-size: 22px;
  border-radius: 6px;
  background: white;
  border: 1px solid #494949;
  color: #494949;
}
.otp input:focus{
  outline:none; border-color:var(--blue) !important; box-shadow:none !important;
}

/* ---------- Success ---------- */
.success{ text-align:center; padding:24px 16px 30px }
.dl{
  margin:18px auto 6px; padding:14px 18px; border-radius:16px; font-weight:700; font-size:16px;
  border:1px solid #2d2f33; background:#232427; color:var(--text); display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.chip{ display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(61,220,151,.12); color:var(--ok); font-size:12px; margin-top:6px }

/* ---------- Safe areas ---------- */
@supports (padding: max(0px)){
  .wrap{ padding-bottom: max(16px, env(safe-area-inset-bottom)) }
}

/* ---------- Autofill transparente ---------- */
/* WebKit: Chrome / Safari / Edge */
.input-row[data-float] input:-webkit-autofill,
.input-row[data-float] input:-webkit-autofill:focus,
.input-row[data-float] input:-webkit-autofill:hover{
  -webkit-box-shadow: 0 0 0 0 transparent inset !important;
          box-shadow: 0 0 0 0 transparent inset !important;
  background-color: transparent !important;
  caret-color: var(--text);
  border-radius:16px;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}
/* Mantener la etiqueta flotante cuando hay autofill */
.input-row[data-float]:has(input:-webkit-autofill) .float-label{
  top:8px; transform:none; font-size:12px; color:var(--muted);
}
.input-row[data-float]:has(input:-webkit-autofill) input{
  padding-top:10px; padding-left:2px;
}

/* Firefox */
.input-row[data-float] input:-moz-autofill{
  box-shadow: inset 0 0 0 0 transparent !important;
  background-color: transparent !important;
  -moz-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}
.input-row[data-float]:has(input:-moz-autofill) .float-label{
  top:8px; transform:none; font-size:12px; color:var(--muted);
}

/* Título OTP */
.otp-title{
  text-align:center;
  margin: 6px 0 10px;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700;
}

/* Separador */
.otp-sep{
  margin: 16px auto;
  width: 92%;
  border: 0;
  height: 1px;
  background: #2a2a2e;
}

/* Acciones con icono (dos columnas) */
.otp-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
  margin: 18px auto 6px;
  max-width: 520px;
}
.otp-action{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #c9d1d9;
  text-decoration: none;
}
.otp-action:hover{ text-decoration: underline; }
.otp-icon{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  border:1px solid #2a2a2e;
  color:#c9d1d9;
}


/* Texto del bloque OTP con la tipografía solicitada */
#step-otp .otp-text,
#step-otp .otp-text a {
font-size: 17px;
line-height: 1.1;
font-weight: 400;
letter-spacing: .011em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
margin-top:20px;
color: #494949;
}

.text2{
  color:#0066cc;
  font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.016em;
  line-height: 1.4285914286;
}

.text2 a{
color:#0066cc!important;
font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif!important;
font-size: 14px!important;
font-weight: 400!important;
letter-spacing: -.016em!important;
line-height: 1.4285914286!important;
}

/* Separador entre bloques */
.otp-sep{
margin: 18px auto;
width: 92%;
height: 1px;
border: 0;
background: #2a2a2e;
}

/* Acciones con icono (dos columnas) */
.otp-actions{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 22px;
margin: 18px auto 6px;
max-width: 520px;
}
.otp-action{
display:flex; flex-direction:column; align-items:center; gap:8px;
color:#c9d1d9; text-decoration:none;
}
.otp-action:hover{ text-decoration:underline; }
.otp-icon{
display:grid; place-items:center;
width:56px; height:56px; border-radius:50%;
border:1px solid #2a2a2e; color:#c9d1d9;
font-size:26px;
}
.otp-action-label{
font-size: 21px;
line-height: 1.381002381;
letter-spacing: .011em;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* Por si quedaba alguna regla antigua para un segundo título, la anulamos */
#step-otp .otp-title, 
#step-otp .label { display:none !important; }

/* Borde rojo para error en el campo */
.input-row.error{
border-color:#b00020 !important;
box-shadow: inset 0 0 0 100px rgba(176,0,32,.08) !important;
background: transparent !important;
}

/* Mensaje de error bajo el input */
.error-msg{
color:#ff6b6b; 
font-size:13px; 
margin:6px 2px 0;
}
.error-msg[hidden]{ display:none; }

.help-cta{
max-width: 860px;
margin: 24px auto;
text-align: center;
color: var(--text, #0f172a);
}
.help-cta__text{
font-size: 1.05rem;
line-height: 1.6;
margin: 0 0 18px;
text-align: center;
  font-family: SF Pro Text, Helvetica Neue, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000E0;
}
.help-cta__actions{
      display: flex;
      gap: 16px;
      justify-content: center;
      align-items: center;
}
.help-cta__btn{
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #0000008F;
  text-decoration: none;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.help-cta__label{
  font-weight: 400;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.help-cta__external{ opacity:.65; }

@media (prefers-color-scheme: dark){
.help-cta{ color: #e5e7eb; }
.help-cta__btn{
  --btn-bg: #1f2937;
  --btn-border: rgba(255,255,255,.08);
  color:#e5e7eb;
}
}
@media (max-width: 540px){
.help-cta__actions{ grid-template-columns: 1fr; }
}

/*Menu*/

/* Contenedor */
.topbar{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    background: #fff;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, .02);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}
.topbar__inner{
  	height: 56px;
    display: flex;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* Logo izquierdo */
.topbar__brand{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.topbar__brand img{
  height: 28px;        /* ajusta a tu imagen */
  width: auto;
  display: block;
}

/* Marca fantasma (decorativa) */
.topbar__ghost{
  justify-self: center;
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .35;
  filter: blur(3px);
}
.topbar__ghost img{
  width: 28px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Botón de tres puntos */
.topbar__more{
  justify-self: end;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
}
.topbar__more:hover{ background: rgba(0,0,0,.06); }
.topbar__more:active{ transform: translateY(1px); }

/* Fondo y halo superior */
.site-footer{
    background: #f3f4f6;
    border-radius: 0 0 10px 10px;
    position: fixed;
    bottom: 0;
    overflow: hidden;
}
.site-footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:18px;
  background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0));
  pointer-events:none;
}

/* Contenido */
.site-footer__inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 24px 22px;
  color: #5c6470;                   /* gris de texto */
  font-size: 14px;
  line-height: 1.3;
}

.site-footer__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Enlaces + separadores verticales finos */
.site-footer__link{
  color: #5c6470;
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer__link:hover{ color:#111; }

.site-footer__sep{
  width:1px; height:16px;
  background: rgba(0,0,0,.12);
  margin: 0 6px;
}

/* Copyright */
.site-footer__copy{
  margin-top: 6px;
}

/* Responsive: en móviles elimina separadores y apila mejor */
@media (max-width: 560px){
  .site-footer__row{ gap: 8px 14px; }
  .site-footer__sep{ display:none; }
  .site-footer__inner{         
    font-size: 11px;
    padding: 2.3em 3.5em; }
}

.title-otp{
  font-size: 21px!important;
  color: #494949!important;
  margin-bottom: 5px!important;
  font-weight: 400!important;
}