:root{
  --lulo-navy:#0B2D5B; --lulo-deep:#0F1824; --lulo-soft:#0B2D5B;
  --lulo-bg:#FFFFFF; --lulo-band:#F6FAFF; --lulo-band-2:#F6FAFF;
  --lulo-line:#DCE5F0; --lulo-line-2:#DCE5F0;
  --lulo-ink:#0F1824; --lulo-muted:#55657C;
  --lulo-accent:#007BFF; --lulo-accent-d:#0B2D5B;
  --lulo-olive:#2E4E37; --lulo-on-olive:#FFFFFF; --lulo-gold:#F7FF00;--lulo-aqua:#00D1C7;
  --lulo-aviso:#E8F1FA; --lulo-aviso-ink:#1F5C8B; --lulo-aviso-line:#B5D2E8;
  --lulo-w:1260px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;max-width:100%}
body{overflow-x:clip;max-width:100%}
html{-webkit-text-size-adjust:100%}
body{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;color:var(--lulo-ink);background:var(--lulo-bg);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit}
h1,h2,h3{font-weight:500;letter-spacing:-.019em;line-height:1.16}
:focus-visible{outline:2px solid var(--lulo-accent);outline-offset:2px}
.lulo-wrap{max-width:var(--lulo-w);margin:0 auto;padding:0 clamp(18px,3.6vw,34px);width:100%}

/* barra de servicio */
.lulo-util{background:var(--lulo-deep);color:var(--lulo-line);font-size:12px}
.lulo-util .lulo-wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:14px;flex-wrap:wrap}
.lulo-util b{color:#fff;font-weight:600}
.lulo-util .lulo-dot{color:var(--lulo-muted);margin:0 9px}

/* cabecera */
.lulo-head{background:#fff;border-bottom:1px solid var(--lulo-line-2)}
.lulo-head .lulo-wrap{display:flex;align-items:center;gap:24px;height:70px}
.lulo-brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.lulo-brand .lulo-mark{font-size:23px;font-weight:600;letter-spacing:-.01em;color:var(--lulo-navy)}
.lulo-brand .lulo-sub{font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--lulo-muted);text-transform:uppercase}
.lulo-search{flex:1;display:flex;align-items:center;background:#fff;border:1px solid var(--lulo-line);border-radius:5px;height:40px;padding:0 12px;gap:9px}
.lulo-search:focus-within{border-color:var(--lulo-navy)}
.lulo-search input{flex:1;border:none;background:none;outline:none;font-size:14px}
.lulo-search input::placeholder{color:#9AA6B5}
.lulo-hbtn{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:5px;font-size:13.5px;font-weight:600;border:1px solid var(--lulo-line);white-space:nowrap}
.lulo-hbtn:hover{border-color:var(--lulo-navy)}
.lulo-hbtn.lulo-solid{background:var(--lulo-navy);color:#fff;border-color:var(--lulo-navy)}
.lulo-hbtn.lulo-solid:hover{background:var(--lulo-deep)}
.lulo-hbtn .lulo-count{background:#fff;color:var(--lulo-navy);border-radius:20px;font-size:11px;font-weight:700;padding:1px 6px}

/* Ver/ocultar contraseña: un botón de ojo a la derecha del campo, en todo el
   sitio —acceso, recuperación, cambio de clave—. El script lo agrega solo
   alrededor de cualquier input de contraseña; aquí solo va su estilo. */
.lulo-pass-wrap{position:relative}
.lulo-pass-wrap input[type=password],.lulo-pass-wrap input[type=text]{padding-right:42px}
.lulo-pass-toggle{position:absolute;top:0;right:0;height:100%;width:40px;display:flex;align-items:center;justify-content:center;color:var(--lulo-muted);border-radius:0 5px 5px 0}
.lulo-pass-toggle:hover{color:var(--lulo-navy)}
.lulo-pass-toggle svg{width:19px;height:19px;pointer-events:none}


/* Utilidad: oculta visualmente pero deja el contenido accesible a lectores de pantalla. */
.lulo-oculto-visual{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}