/* Estilos compartidos de las páginas de cuenta y del campus.
   Misma paleta y tipografía que el resto del sitio (ver inscripcion.html). */
:root{
  --abyss:#060F20; --night:#0A1A33; --indigo:#16305A; --indigo-2:#1E3E6E;
  --silver:#C7D3E3; --sail:#F4F1E6; --lake:#3E8F94;
  --stone:#9AA6B8; --stone-dim:#6B7789; --ring:rgba(199,211,227,.55);
  --coral:#E4886A;
  --serif:"Cormorant Garamond",Palatino,"Iowan Old Style",Georgia,serif;
  --sans:Montserrat,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pad:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%}
body{margin:0; background:var(--abyss); color:var(--sail); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%}
a{color:var(--silver)}
.wrap{max-width:720px; margin:0 auto; padding:0 var(--pad)}
.wrap-ancho{max-width:980px}
header{padding:26px 0 0; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif);
  letter-spacing:.08em; font-size:.82rem; color:var(--sail); text-decoration:none}
.brand .mk{width:30px; height:30px; background:url("/marca.png") center/contain no-repeat; flex:0 0 auto}
.sesion{font-size:.8rem; color:var(--stone); display:flex; gap:14px; align-items:center; white-space:nowrap}
.sesion b{color:var(--sail); font-weight:600}
main{padding:38px 0 70px}
h1{font-family:var(--serif); font-size:clamp(1.7rem,7vw,2.6rem); line-height:1.15; margin:0 0 10px; font-weight:600}
h2{font-family:var(--serif); font-size:clamp(1.15rem,5vw,1.4rem); font-weight:600;
  margin:36px 0 14px; padding-top:14px; position:relative}
h2::before{content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--silver); border-radius:2px}
p{margin:0 0 14px; max-width:62ch}
.intro{color:var(--stone); margin:0 0 28px; max-width:60ch}
.nota{color:var(--stone); font-size:.88rem}
label .nota{display:block; font-size:.78rem; font-weight:400; margin-top:2px}
.eyebrow{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); font-weight:700; margin:0 0 12px}

/* formulario */
.campo{margin:0 0 16px}
label{display:block; font-size:.9rem; color:var(--silver); margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=password]{
  width:100%; min-height:48px; padding:12px 14px; border-radius:6px; font:inherit;
  color:var(--sail); background:rgba(30,62,110,.28); border:1px solid rgba(199,211,227,.28)}
input:focus{outline:2px solid var(--ring); outline-offset:1px; border-color:var(--silver)}
input::placeholder{color:var(--stone-dim)}
.fila{display:grid; gap:14px}
@media (min-width:560px){ .fila{grid-template-columns:1fr 1fr} }
.opcion{display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:6px;
  border:1px solid rgba(199,211,227,.22); background:rgba(30,62,110,.18); cursor:pointer; min-height:48px}
.opcion:has(input:checked){border-color:var(--silver); background:rgba(30,62,110,.45)}
.opcion input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--lake); flex:0 0 auto}
.opcion span{font-size:.95rem; line-height:1.4}
.destacado{background:rgba(30,62,110,.3); border:1px solid rgba(199,211,227,.2); border-radius:10px; padding:18px 20px; margin:18px 0}
.destacado p:last-child{margin-bottom:0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px;
  padding:14px 26px; border-radius:6px; border:0; font:inherit; font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; text-decoration:none; width:100%}
.btn-solid{background:var(--sail); color:var(--abyss)}
.btn-solid:disabled{opacity:.55; cursor:default}
.btn-ghost{background:transparent; color:var(--sail); border:1px solid var(--ring)}
.btn-chico{min-height:40px; padding:8px 16px; font-size:.68rem; width:auto}
@media (min-width:560px){ .btn{width:auto} }
.btn-google{background:var(--sail); color:var(--abyss); border:0; text-transform:none; letter-spacing:0; font-size:.95rem; font-weight:600}
.separador{display:flex; align-items:center; gap:14px; margin:26px 0 20px; color:var(--stone); font-size:.82rem}
.separador::before,.separador::after{content:""; flex:1; height:1px; background:rgba(199,211,227,.2)}
.error{display:none; margin:14px 0 0; padding:12px 14px; border-radius:6px; background:rgba(180,60,60,.18);
  border:1px solid rgba(255,140,140,.45); color:#FFD9D9; font-size:.92rem}
.error.on{display:block}
.ok{display:none} .ok.on{display:block}
.oculto{display:none !important}
.enlaces{margin-top:22px; font-size:.9rem; color:var(--stone)}
.enlaces a{margin-right:18px}

/* tarjetas del campus */
.tarjetas{display:grid; gap:14px; margin:0 0 8px}
@media (min-width:640px){ .tarjetas{grid-template-columns:1fr 1fr} }
.tarjeta{display:block; padding:20px 20px 18px; border-radius:10px; text-decoration:none; color:var(--sail);
  border:1px solid rgba(199,211,227,.22); background:rgba(30,62,110,.18); min-height:48px}
.tarjeta:hover,.tarjeta:focus-visible{border-color:var(--silver); background:rgba(30,62,110,.4); outline:none}
.tarjeta .t{font-family:var(--serif); font-size:1.45rem; line-height:1.15; font-weight:600; margin:0 0 6px}
.tarjeta .d{color:var(--stone); font-size:.9rem; margin:0}
.tarjeta .tag{display:inline-block; margin-bottom:10px; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--abyss); background:var(--lake); padding:3px 8px; border-radius:3px; font-weight:700}
.tarjeta .tag.suave{background:transparent; color:var(--silver); border:1px solid rgba(199,211,227,.35)}
.lista{list-style:none; padding:0; margin:0; display:grid; gap:10px}
@media (min-width:640px){ .lista.tres{grid-template-columns:1fr 1fr 1fr} .lista.dos{grid-template-columns:1fr 1fr} }
.lista li{border:1px solid rgba(199,211,227,.22); background:rgba(30,62,110,.18); border-radius:8px; padding:14px 16px}
.lista li b{display:block; font-family:var(--serif); font-size:1.15rem; font-weight:600; margin-bottom:4px}
.lista li a{display:inline-block; margin-right:14px; font-size:.88rem}
.lista li .d{color:var(--stone); font-size:.84rem; margin:0 0 6px}
footer{border-top:1px solid rgba(199,211,227,.14); margin-top:50px; padding:30px 0 50px; color:var(--stone); font-size:.84rem}
footer .volver{display:inline-block; margin-bottom:14px}
@media (min-width:600px){ :root{--pad:28px} body{font-size:17px} }

/* Instalado como app: el contenido arranca debajo de la barra de estado del teléfono (muesca). */
@media (display-mode: standalone){
  body{padding-top:env(safe-area-inset-top)}
  header.wrap{padding-top:calc(12px + env(safe-area-inset-top))}
  .barra-estado{top:env(safe-area-inset-top)}
}

/* ===== Rediseño móvil (9-oct-2026): todo más grande en el celular, y una barra de pestañas en la app ===== */
@media (max-width:640px){
  html{font-size:17px}
  body{line-height:1.6}
  .wrap{padding:0 18px}
  header{padding-top:18px}
  .brand{font-size:.9rem} .brand .mk{width:34px; height:34px}
  main{padding:22px 0 110px}
  h1{font-size:2.1rem} h2{font-size:1.45rem; margin-top:34px}
  .nota{font-size:.95rem}
  .btn{min-height:56px; font-size:.84rem}
  .btn-chico{min-height:46px; font-size:.74rem}
  .destacado{padding:18px}
}
/* la barra de pestañas de la app (sólo en el celular) */
.pestanas-app{display:none}
@media (max-width:700px){
  .pestanas-app{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(6,15,32,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(199,211,227,.16);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
  .pestanas-app a,.pestanas-app button{display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--stone);
    font:inherit; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; background:none; border:0; padding:6px 2px; min-height:52px; cursor:pointer; position:relative}
  .pestanas-app svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .pestanas-app .on{color:var(--sail)}
  .pestanas-app .n{position:absolute; top:2px; right:calc(50% - 22px); background:var(--coral); color:var(--abyss); font-size:.6rem; border-radius:999px; padding:1px 6px}
  .pestanas-app .n:empty{display:none}
  footer{padding-bottom:90px}
}