/* Encabezado y pie del sitio para las páginas de cuenta (login / registro).
   Antes usaban el encabezado del panel —logo y un "Volver"— y no tenían pie,
   así que crear cuenta se sentía como salirse a otro sitio. Aquí se reusa el
   mismo encabezado con navegación del cotizador y el pie de la portada, sobre
   panel.css, que es quien sigue dando el estilo de la tarjeta del formulario. */

header.sitio-top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--ink)}
.sitio-top .nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
.sitio-top .brand{flex:0 0 auto}
.sitio-top .brand img{height:44px;width:auto;flex:none;display:block}
.sitio-top .qznav{display:flex;gap:18px;align-items:center}
.sitio-top .qznav a{font-family:var(--font-mono);font-weight:700;font-size:12.5px;letter-spacing:.01em;
  color:var(--body);text-transform:uppercase;text-decoration:none}
.sitio-top .qznav a:hover{color:var(--green-d)}
.sitio-top .rt{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-mono);
  font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.sitio-top .rt a{color:var(--ink);text-decoration:none}
.sitio-top .rt a:hover{color:var(--green-d)}
/* El "Cotizar" es botón, no enlace de navegación: sin esto hereda las mayúsculas
   de .rt y se lee como una opción más del menú. */
.sitio-top .rt a.btn{color:#fff;text-transform:none;letter-spacing:0}
@media(max-width:1000px){.sitio-top .qznav{display:none}}
@media(max-width:520px){.sitio-top .rt .solo-grande{display:none}}

/* Pie: el mismo de la portada, recortado a lo que sirve desde una pantalla de
   cuenta (contacto y legales). El mapa completo del sitio vive en la portada. */
footer.sitio-pie{background:#123d24;color:#cfe0d3;border-top:3px solid var(--ink);
  padding:38px 0 26px;margin-top:26px}
.sitio-pie .foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.sitio-pie .foot-brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);
  font-weight:800;font-size:20px;color:#fff}
.sitio-pie .foot-brand .fmark{width:48px;height:48px;border-radius:12px;background:#f3f7f2;
  border:2px solid #0c2a19;display:grid;place-items:center;overflow:hidden}
.sitio-pie .foot-brand .fmark img{width:84%;height:84%;object-fit:contain}
.sitio-pie .links{display:flex;gap:22px;flex-wrap:wrap}
.sitio-pie .links a{color:#cfe0d3;font-family:var(--font-mono);font-size:13px;
  text-transform:uppercase;text-decoration:none}
.sitio-pie .links a:hover{color:var(--gold)}
.sitio-pie .bottom{border-top:1px solid #1e4a30;margin-top:24px;padding-top:16px;
  font-family:var(--font-mono);font-size:12px;color:#8fae97;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:640px){
  .sitio-pie .links{gap:14px}
  .sitio-pie .bottom{font-size:11.5px}
}

/* La tarjeta del formulario deja de flotar sola en la página: con encabezado y
   pie ya hay marco, y el aire de más la volvía a separar del resto. */
.auth-wrap{margin:28px auto 34px}

/* Crear cuenta en pantalla grande: son ocho campos y en una sola columna de
   440px la mitad del formulario queda abajo del doblez, con el botón de crear
   cuenta fuera de vista. En laptop hay ancho de sobra, así que la tarjeta se
   abre y los campos van de dos en dos: cabe completo sin scroll. En celular
   no cambia nada, ahí la columna angosta es la correcta. */
@media(min-width:900px){
  .auth-ancho{max-width:720px}
  .auth-ancho #paso1 form{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  /* Todo lo que no sea un campo (botón, avisos, el botón de Google) cruza las
     dos columnas; los campos se acomodan de dos por renglón. */
  .auth-ancho #paso1 form > *{grid-column:1/-1}
  .auth-ancho #paso1 form > .field{grid-column:auto}
  .auth-ancho #paso1 form > .row2{display:contents}
  .auth-ancho #paso1 form > button{margin-top:6px}
  .auth-ancho .card .pad{padding:30px 34px}
  /* El paso 2 es un solo código de seis dígitos: si hereda el ancho se ve perdido. */
  .auth-ancho #paso2{max-width:420px;margin:0 auto}
}