/* Portal principal · Colegio Los Ángeles (mismos colores del escudo que los planificadores) */
:root {
  --azul-900:#062a57; --azul:#084183; --azul-claro:#1666c4;
  --rojo:#ca2b20; --oro:#e8b931; --oro-claro:#ffd257;
  --tinta:#1b2133; --tinta-2:#4a5368; --tinta-3:#8a91a3;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:"Playfair Display", Georgia, serif;
}
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; }
body { margin:0; min-height:100vh; font-family:var(--sans); color:#fff; font-variant-numeric:lining-nums;
  background:
    radial-gradient(700px 420px at 100% -10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(700px 500px at -20% 110%, rgba(202,43,32,.45), transparent 60%),
    linear-gradient(160deg, var(--azul-900), var(--azul) 50%, var(--azul-claro));
  background-attachment:fixed; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.06;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size:44px 44px; }

.portal { position:relative; max-width:560px; margin:0 auto; padding:48px 20px 32px; display:flex; flex-direction:column; align-items:center; }

/* Perfil (como la cabecera de un Linktree) */
.perfil-portal { text-align:center; margin-bottom:28px; }
.perfil-portal .logo { height:150px; width:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.perfil-portal h1 { font-family:var(--serif); font-size:36px; margin:16px 0 4px; letter-spacing:-.01em; }
.lema { font-family:var(--serif); font-style:italic; color:var(--oro-claro); margin:0 0 10px; letter-spacing:.06em; }
.bio { margin:0; display:inline-block; padding:6px 14px; border-radius:99px; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; background:rgba(255,255,255,.1); border:1px solid rgba(255,210,87,.55); }

/* Botones de enlace */
.enlaces { width:100%; display:grid; gap:14px; }
.enlace { position:relative; display:flex; align-items:center; gap:14px; padding:14px 18px 14px 14px; border-radius:18px; text-decoration:none;
  color:var(--tinta); background:#fff; box-shadow:0 10px 30px -12px rgba(0,0,0,.45), inset 0 -3px 0 var(--color);
  transition:transform .18s, box-shadow .18s; overflow:hidden; }
.enlace:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 16px 36px -12px rgba(0,0,0,.5), inset 0 -3px 0 var(--color); }
.enlace:active { transform:scale(.99); }
.enlace-ico { width:54px; height:54px; flex:none; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:20px; font-weight:700; color:var(--color);
  background:color-mix(in srgb, var(--color) 14%, #fff); border:1px solid color-mix(in srgb, var(--color) 30%, #fff); }
.enlace-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.enlace-txt strong { font-size:17px; color:var(--azul-900); }
.enlace-txt em { font-style:normal; font-weight:600; color:var(--color); margin-left:4px; }
.enlace-txt small { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tinta-3); }
.mini-barra { width:90px; height:6px; border-radius:99px; background:#eef2f8; overflow:hidden; flex:none; }
.mini-barra span { display:block; height:100%; min-width:3px; border-radius:99px; background:var(--color); }
.enlace-flecha { font-size:30px; line-height:1; color:var(--color); font-weight:300; transition:transform .18s; }
.enlace:hover .enlace-flecha { transform:translateX(4px); }

/* Login */
.tarjeta-login { width:100%; background:#fff; color:var(--tinta); border-radius:20px; padding:28px; box-shadow:0 20px 50px -20px rgba(0,0,0,.5); }
.tarjeta-login h2 { font-family:var(--serif); color:var(--azul-900); margin:0 0 4px; font-size:26px; }
.tarjeta-login p { margin:0 0 18px; color:var(--tinta-2); }
.tarjeta-login label { display:block; margin-bottom:14px; }
.tarjeta-login label span { display:block; font-size:13px; font-weight:600; color:var(--azul); margin-bottom:6px; }
.tarjeta-login input { width:100%; padding:12px 14px; border:1px solid #d9d6cc; border-radius:10px; font:inherit; }
.tarjeta-login input:focus { outline:none; border-color:var(--oro); box-shadow:0 0 0 4px rgba(232,185,49,.2); }
.boton-oro { width:100%; padding:13px; border:none; border-radius:10px; font:inherit; font-weight:700; font-size:15px; cursor:pointer;
  color:#3a2a00; background:linear-gradient(135deg, var(--oro-claro), var(--oro)); box-shadow:0 8px 18px -6px rgba(232,185,49,.6); }
.boton-oro:hover { filter:brightness(1.03); }
.error { background:#fdecea; color:#b42318; border:1px solid #f6c9c4; padding:10px 12px; border-radius:10px; font-size:13.5px; margin:0 0 14px; }

.salir { margin-top:26px; display:flex; align-items:center; gap:12px; font-size:13px; color:#dce6f7; }
.salir button { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:9px; padding:6px 12px; font:inherit; cursor:pointer; }
.salir button:hover { background:rgba(255,255,255,.18); }
.pie { margin-top:34px; font-size:12px; color:rgba(255,255,255,.6); }

@media (max-width:480px) {
  .portal { padding-top:32px; }
  .perfil-portal .logo { height:120px; }
  .perfil-portal h1 { font-size:30px; }
  .mini-barra { width:60px; }
}