/* Estilo de las páginas públicas de Mi Carrera.
   Los mismos tokens de la app: si allá cambia el acento, aquí también. */

:root{
  --acc:#B07C22; --acc-2:#F2D68F; --on-acc:#15151A;
  --acc-suave:color-mix(in srgb, var(--acc) 20%, transparent);
  --acc-tenue:color-mix(in srgb, var(--acc) 10%, transparent);
  --acc-grad:linear-gradient(135deg, var(--acc) 0%, var(--acc-2) 100%);
  --bg:#F6F6FA; --surf:#FFFFFF; --surf-2:#F0F0F5; --linea:#E4E4EC; --linea-2:#CFCFDA;
  --ink:#1A1A22; --dim:#575765; --tenue:#84848F;
  --ok:#2C6E49; --ok-bg:#E3F1E9;
  --avi:#8B5804; --avi-bg:#F9EEDA;
  --luz1:20%; --luz2:14%;
  --sombra:0 1px 2px rgba(20,20,30,.04), 0 14px 34px -22px rgba(20,20,30,.4);
  --r:16px;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#111116; --surf:#1A1A22; --surf-2:#22222B; --linea:#2C2C37; --linea-2:#3C3C4A;
  --ink:#ECECF2; --dim:#A4A4B3; --tenue:#7B7B8A;
  --ok:#6FD6AC; --ok-bg:#152B22;
  --avi:#E0B45E; --avi-bg:#2C2416;
  --luz1:28%; --luz2:20%;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.95);
} }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 46% at 12% -4%, color-mix(in srgb, var(--acc) var(--luz1), transparent) 0%, transparent 68%),
    radial-gradient(52% 42% at 92% 104%, color-mix(in srgb, var(--acc-2) var(--luz2), transparent) 0%, transparent 66%);
}
h1,h2,h3,h4{ font-family:"Fraunces",Georgia,serif; font-weight:600; margin:0; line-height:1.15; }
p{ margin:0 0 14px; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
.tenue{ color:var(--tenue); }
.chiquito{ font-size:.84rem; }

.dentro{ max-width:1080px; margin:0 auto; width:100%; padding:0 20px; }

/* ─── Barra ─────────────────────────────────────────────────────────── */
header.barra{
  position:sticky; top:0; z-index:40; padding:12px 0;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--linea);
}
header.barra .dentro{ display:flex; align-items:center; gap:16px; }
.marca{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.marca:hover{ text-decoration:none; }
.sello{
  width:38px; height:38px; border-radius:12px; background:var(--acc-grad);
  display:grid; place-items:center; color:var(--on-acc); font-weight:700; flex:none;
  font-family:"Fraunces",Georgia,serif; font-size:1.06rem;
}
.marca b{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.14rem; display:block; }
.marca small{ display:block; color:var(--tenue); font-size:.76rem; line-height:1.2; }
.enlaces{ margin-left:auto; display:flex; gap:20px; align-items:center; }
.enlaces a{ color:var(--dim); font-weight:600; font-size:.92rem; }
.enlaces a:hover{ color:var(--ink); text-decoration:none; }

.btn{
  display:inline-block; padding:11px 20px; border-radius:12px; font-weight:600;
  font-size:.95rem; background:var(--surf-2); border:1px solid var(--linea);
  color:var(--ink); cursor:pointer; text-align:center;
}
.btn:hover{ border-color:var(--linea-2); text-decoration:none; }
.btn.principal{ background:var(--acc-grad); color:var(--on-acc); border-color:transparent; }
.btn.chico{ padding:8px 15px; font-size:.9rem; }
.btn.ancho{ display:block; width:100%; }
.btn:disabled{ opacity:.55; cursor:default; }

/* ─── Portada ───────────────────────────────────────────────────────── */
.portada{ padding:70px 0 40px; text-align:center; }
.portada h1{ font-size:clamp(2.2rem, 6vw, 3.6rem); letter-spacing:-.01em; }
.portada h1 .grad{
  background:var(--acc-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.portada .bajada{
  font-size:clamp(1.02rem, 2.2vw, 1.22rem); color:var(--dim);
  max-width:56ch; margin:18px auto 26px;
}
.acciones-portada{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.sello-prueba{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  padding:6px 14px; border-radius:999px; font-size:.86rem; font-weight:600;
  background:var(--acc-tenue); color:var(--acc); border:1px solid var(--acc-suave);
}
.bajo-boton{ color:var(--tenue); font-size:.86rem; margin-top:14px; }
.bajo-boton #nota-apk{ display:block; margin-top:6px; }
/* La guía del perfil de iPhone, debajo de los botones de la portada. */
.guia-ios{ max-width:560px; margin:16px auto 0; text-align:left; background:var(--surf,#1b1b22); border:1px solid var(--linea,#2c2c36); border-radius:14px; padding:14px 18px; font-size:.92rem; }
.guia-ios ol{ margin:10px 0 8px; padding-left:20px; }
.guia-ios li{ margin:6px 0; }
.guia-ios small{ display:block; color:var(--tenue); margin-top:6px; }

/* ─── Secciones ─────────────────────────────────────────────────────── */
section{ padding:52px 0; }
section > .dentro > h2{ font-size:clamp(1.6rem, 4vw, 2.2rem); }
section > .dentro > h2 + p.intro{
  color:var(--dim); max-width:60ch; margin-top:10px; margin-bottom:30px;
}
.centrado{ text-align:center; }
.centrado h2 + p.intro{ margin-left:auto; margin-right:auto; }

.rejilla{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }
.tarjeta{
  background:var(--surf); border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:22px;
}
.tarjeta .icono{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--acc-tenue); font-size:1.35rem; margin-bottom:12px;
}
.tarjeta h3{ font-size:1.12rem; margin-bottom:6px; }
.tarjeta p{ color:var(--dim); font-size:.95rem; margin:0; }

/* ─── Privacidad ────────────────────────────────────────────────────── */
.franja{
  background:var(--surf); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.pasos{ counter-reset:paso; display:grid; gap:14px; margin-top:24px; }
.paso{ display:flex; gap:14px; align-items:flex-start; }
.paso::before{
  counter-increment:paso; content:counter(paso);
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--acc-grad); color:var(--on-acc);
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
}
.paso b{ display:block; }
.paso span{ color:var(--dim); font-size:.95rem; }
.ojo{
  background:var(--avi-bg); color:var(--avi); border-radius:var(--r);
  padding:16px 18px; margin-top:26px; font-size:.95rem;
}
.ojo b{ display:block; margin-bottom:4px; }

/* ─── Precios ───────────────────────────────────────────────────────── */
.planes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:start; }
.plan{ position:relative; text-align:center; }
.plan.destacado{ border-color:var(--acc); box-shadow:0 14px 40px -18px color-mix(in srgb, var(--acc) 60%, transparent); }
.plan .etiqueta{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--acc-grad); color:var(--on-acc); padding:3px 12px;
  border-radius:999px; font-size:.76rem; font-weight:700; white-space:nowrap;
}
.plan h3{ font-size:1.1rem; }
.plan .precio{
  font-family:"Fraunces",Georgia,serif; font-size:2.1rem; font-weight:700;
  line-height:1.1; margin:10px 0 2px;
}
.plan .porMes{ color:var(--tenue); font-size:.86rem; }
.plan p{ margin:12px 0 0; font-size:.93rem; }

.como-pagar{ margin-top:26px; }
.como-pagar .medios{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.medio{
  padding:8px 16px; border-radius:999px; background:var(--surf-2);
  border:1px solid var(--linea); font-weight:600; font-size:.9rem;
}

/* ─── Universidades ─────────────────────────────────────────────────── */
.carreras{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.carrera{
  padding:10px 16px; border-radius:12px; background:var(--surf);
  border:1px solid var(--linea); font-size:.93rem;
}
.carrera b{ display:block; }
.carrera small{ color:var(--tenue); font-size:.82rem; }

.formulario{ max-width:520px; }
label{ display:block; font-size:.86rem; font-weight:600; color:var(--dim); margin:14px 0 6px; }
input[type=text], input[type=email]{
  width:100%; background:var(--surf); border:1px solid var(--linea);
  border-radius:12px; padding:12px 14px; outline:0; font:inherit; color:inherit;
}
input:focus{ border-color:var(--acc); }
.respuesta{ margin-top:14px; padding:12px 16px; border-radius:12px; font-size:.92rem; }
.respuesta.bien{ background:var(--ok-bg); color:var(--ok); }
.respuesta.mal{ background:var(--avi-bg); color:var(--avi); }

/* ─── Preguntas ─────────────────────────────────────────────────────── */
.pregunta{ border-bottom:1px solid var(--linea); }
.pregunta summary{
  cursor:pointer; padding:18px 0; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{ content:'+'; color:var(--acc); font-size:1.4rem; line-height:1; flex:none; }
.pregunta[open] summary::after{ content:'−'; }
.pregunta p{ color:var(--dim); font-size:.96rem; padding-bottom:18px; margin:0; max-width:70ch; }

/* ─── Cierre ────────────────────────────────────────────────────────── */
.cierre{ text-align:center; padding:60px 0; }
.cierre h2{ font-size:clamp(1.6rem, 4vw, 2.3rem); }
.cierre p{ color:var(--dim); max-width:50ch; margin:14px auto 22px; }

/* ─── Pie ───────────────────────────────────────────────────────────── */
.pie{ border-top:1px solid var(--linea); padding:44px 0 30px; background:var(--surf); }
.pie-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:28px; }
.pie h4{ font-size:.95rem; margin-bottom:10px; }
.pie a{ display:block; color:var(--dim); font-size:.92rem; padding:3px 0; }
.pie a:hover{ color:var(--acc); }
.pie .chiquito{ margin-top:30px; padding-top:20px; border-top:1px solid var(--linea); }

/* ─── Documentos legales ────────────────────────────────────────────── */
.documento{ max-width:760px; margin:0 auto; padding:44px 20px 70px; }
.documento h1{ font-size:clamp(1.8rem, 5vw, 2.5rem); margin-bottom:6px; }
.documento .fecha{ color:var(--tenue); font-size:.9rem; margin-bottom:26px; }
.documento h2{
  font-size:1.28rem; margin:36px 0 10px; padding-top:6px;
}
.documento h3{ font-size:1.05rem; margin:22px 0 8px; }
.documento p, .documento li{ color:var(--dim); }
.documento ul, .documento ol{ margin:0 0 14px; padding-left:22px; }
.documento li{ margin-bottom:7px; }
.documento strong{ color:var(--ink); }
.documento .caja{
  background:var(--surf); border:1px solid var(--linea); border-radius:var(--r);
  padding:18px 20px; margin:20px 0;
}
.documento .caja p:last-child{ margin-bottom:0; }
.indice{ background:var(--surf); border:1px solid var(--linea); border-radius:var(--r); padding:18px 22px; margin:24px 0 8px; }
.indice h2{ font-size:1rem; margin:0 0 10px; padding:0; }
.indice ol{ margin:0; padding-left:20px; }
.indice li{ margin-bottom:4px; }

.borrador{
  background:var(--avi-bg); color:var(--avi); border-radius:var(--r);
  padding:16px 20px; margin-bottom:26px; font-size:.93rem; line-height:1.55;
}
.borrador strong{ color:inherit; }
.borrador a{ color:inherit; text-decoration:underline; }

/* ═══ El menú «Universidad y carrera» de arriba: primero la universidad, debajo sus carreras. ═══ */
.menu-carreras{ position:relative; }
.menu-carreras summary{ list-style:none; cursor:pointer; color:var(--dim); font-weight:600; font-size:.92rem;
  display:flex; align-items:center; gap:5px; }
.menu-carreras summary::-webkit-details-marker{ display:none; }
.menu-carreras summary:hover, .menu-carreras[open] summary{ color:var(--ink); }
.menu-carreras[open] summary svg{ transform:rotate(180deg); }
.menu-carreras .desplegable{ position:absolute; top:calc(100% + 14px); left:0; min-width:290px; padding:12px; z-index:30;
  background:var(--surf); border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra); }
.menu-carreras .desplegable b{ display:block; font-size:.74rem; color:var(--tenue); text-transform:uppercase; letter-spacing:.06em;
  padding:8px 10px 4px; }
.menu-carreras .desplegable b + b{ margin-top:8px; }
.menu-carreras .desplegable a{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 10px;
  border-radius:9px; color:var(--ink); font-weight:600; font-size:.92rem; }
.menu-carreras .desplegable a:hover{ background:var(--surf-2); text-decoration:none; }
.menu-carreras .desplegable a small{ color:var(--tenue); font-weight:500; font-size:.76rem; white-space:nowrap; }
.menu-carreras .desplegable a.todas{ margin-top:8px; border-top:1px solid var(--linea); border-radius:0; padding-top:12px; color:var(--acc); }
.menu-carreras .desplegable .tenue{ display:block; padding:8px 10px; font-size:.88rem; }

/* ═══ carreras.php: el espacio de cada carrera ═══ */
.carrera-portada .miga{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; color:var(--tenue); font-size:.86rem; margin-bottom:14px; }
.carrera-portada .miga a{ color:var(--dim); }
.carrera-portada .miga a:hover{ color:var(--acc); }
.carrera-portada .miga [aria-current]{ color:var(--ink); font-weight:600; }
.uni-titulo{ font-family:"Fraunces",Georgia,serif; font-size:1.35rem; margin:0 0 14px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.uni-titulo a{ color:inherit; text-decoration:none; }
.uni-titulo a:hover{ color:var(--acc); }
.uni-titulo small{ font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:.82rem; font-weight:500; color:var(--tenue); }
a.carrera-tarjeta{ color:inherit; text-decoration:none; display:block; }
a.carrera-tarjeta:hover{ border-color:var(--acc); text-decoration:none; }
a.carrera-tarjeta .ver, .carrera .ver{ display:block; margin-top:10px; color:var(--acc); font-weight:600; font-size:.86rem; }
a.carrera{ color:inherit; text-decoration:none; }
a.carrera:hover{ border-color:var(--acc); text-decoration:none; }
.carrera-comunes h2, .sem-titulo{ font-family:"Fraunces",Georgia,serif; font-size:1.5rem; margin:0 0 14px; }
.carrera-comunes{ margin-bottom:40px; }
.carrera-comunes .tarjeta{ padding:18px; }
.carrera-comunes .tarjeta h3{ font-size:1rem; margin-bottom:4px; }
.carrera-comunes .tarjeta p{ font-size:.9rem; }
.sem{ background:var(--surf); border:1px solid var(--linea); border-radius:var(--r); padding:22px 24px; margin-bottom:16px; }
.sem header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sem header h3{ font-family:"Fraunces",Georgia,serif; font-size:1.2rem; margin:0; }
.sem header small{ color:var(--tenue); font-size:.84rem; }
.sem-materias{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.sem-materias .medio{ font-size:.84rem; padding:6px 12px; font-weight:500; }
.sem-materias .medio em{ font-style:normal; color:var(--tenue); font-size:.76rem; margin-left:4px; }
.sem-herr{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; padding-top:14px; border-top:1px dashed var(--linea); }
.sem-herr .herr{ display:flex; gap:12px; align-items:flex-start; }
.sem-herr .ico{ width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--acc-tenue); color:var(--acc); }
.sem-herr .txt{ min-width:0; }
.sem-herr .txt b{ display:block; font-size:.94rem; }
.sem-herr .txt small{ display:block; color:var(--dim); font-size:.8rem; line-height:1.4; }
.sem-herr .txt .mats{ color:var(--acc); font-size:.74rem; margin-top:2px; }
.cierre-carrera{ text-align:center; margin-top:40px; padding:36px 20px; border-radius:var(--r); background:var(--surf); border:1px solid var(--linea); }
.cierre-carrera h2{ font-family:"Fraunces",Georgia,serif; font-size:1.6rem; margin:0 0 8px; }
.cierre-carrera p{ color:var(--dim); margin:0 0 18px; }

/* Los iconos de línea de las tarjetas (icono() en vista.php): dorados, del mismo trazo que los logos. */
.tarjeta .icono{ color:var(--acc); }
.tarjeta .icono svg{ width:22px; height:22px; display:block; }

/* Las tarjetas dentro de una franja: la franja ya es surf, así que van un tono abajo. */
.franja .tarjeta.sobre-franja{ background:var(--bg); box-shadow:none; }

/* «En el celular es una app de verdad»: dos tarjetas anchas con el logo de cada
   plataforma, y debajo dos tiras a todo lo ancho (los widgets y el dispositivo único). */
.plataformas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.plataforma{ padding:30px 28px; display:flex; flex-direction:column; }
.plataforma .icono{ width:56px; height:56px; border-radius:16px; color:var(--acc); margin-bottom:16px; }
.plataforma .icono svg{ width:30px; height:30px; display:block; }
.plataforma h3{ font-size:1.25rem; }
.plataforma p{ margin-bottom:12px; }
.plataforma .ventajas{ margin:0 0 20px; padding-left:18px; color:var(--dim); line-height:1.65; font-size:.95rem; }
.plataforma .ventajas li{ margin-bottom:4px; }
.plataforma .btn{ align-self:flex-start; margin-top:auto; }
.tira{ margin-top:20px; padding:20px 24px; border-radius:var(--r); background:var(--bg); border:1px solid var(--linea); }
.tira b{ display:block; margin-bottom:10px; font-family:"Fraunces",Georgia,serif; font-size:1.05rem; }
.tira .medios{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.tira .medio{ background:var(--surf); padding:7px 14px; font-size:.86rem; }
.tira small{ display:block; color:var(--dim); font-size:.92rem; line-height:1.55; }
.tira b + small{ margin-top:-4px; }

/* ═══ La vitrina de widgets: los doce, dibujados con los mismos colores y medidas
   que en Android (fondo #1B1B22, radio 22, título dorado, acento #B07C22). Es una
   rejilla de celdas de 150 px; cada widget ocupa las celdas que ocupa en el teléfono. ═══ */
.vitrina{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-auto-rows:150px;
  grid-auto-flow:dense; gap:12px; }
.wg{ position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 16px 12px; overflow:hidden;
  border-radius:22px; background:#1B1B22; border:1px solid #2C2C36; color:#F3F1EC;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif; line-height:1.25; box-shadow:0 12px 30px -18px rgba(0,0,0,.7); }
.wg.centro{ justify-content:center; }
.w-1x1{ grid-column:span 1; grid-row:span 1; }
.w-2x1{ grid-column:span 2; grid-row:span 1; }
.w-2x2{ grid-column:span 2; grid-row:span 2; }
.w-4x2{ grid-column:span 4; grid-row:span 2; }
.wg > span, .wg > b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wg .wrap{ white-space:normal; }
.wg-t{ color:#F2D68F; font-size:.74rem; font-weight:700; margin-bottom:3px; }
.wg-h1{ font-size:1.05rem; font-weight:700; }
.wg-acc{ color:#B07C22; font-size:.86rem; font-weight:700; }
.wg-acc.chico{ font-size:.74rem; margin-top:auto; }
.wg-dim{ color:#9A968F; font-size:.74rem; }
.wg-l{ font-size:.82rem; margin-top:4px; }
.wg-cuenta{ color:#F2D68F; font-size:1.35rem; font-weight:700; margin-top:4px; }
.wg-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.wg-fila > span{ display:flex; flex-direction:column; min-width:0; }
.wg-fila > span > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wg-fila i{ font-style:normal; color:#F2D68F; font-size:1.1rem; flex:none; }
.wg-fila b{ flex:none; }
.wg-cifra{ font-size:1.55rem; font-weight:700; color:#F3F1EC; line-height:1; }
.wg-cifra.grande{ font-size:1.7rem; display:flex; align-items:baseline; gap:8px; }
.wg-cifra small{ font-size:.72rem; color:#9A968F; font-weight:500; }
.wg-sub{ color:#9A968F; font-size:.74rem; }
.wg-barra{ display:block; height:8px; border-radius:99px; background:#2C2C36; margin-top:8px; overflow:hidden; }
.wg-barra i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#B07C22,#F2D68F); }
.wg-sep{ display:block; height:1px; background:#2C2C36; margin:6px 0 4px; }
.wg-mas{ font-size:2rem; color:#F2D68F; line-height:1; text-align:center; }
.wg.nota .wg-l{ text-align:center; }
/* Los anillos: el arco se dibuja con el perímetro del círculo (2π·42 ≈ 264). */
.wg.anillo{ align-items:center; justify-content:center; text-align:center; gap:0; }
.wg.anillo svg{ position:absolute; left:50%; top:50%; width:112px; height:112px; transform:translate(-50%,-50%) rotate(-90deg); }
.wg b{ font-family:inherit; font-size:inherit; margin:0; display:inline; }
.wg.anillo .pista{ fill:none; stroke:#2C2C36; stroke-width:9; }
.wg.anillo .arco{ fill:none; stroke:#F2D68F; stroke-width:9; stroke-linecap:round;
  stroke-dasharray:264; stroke-dashoffset:calc(264 - 264 * var(--p) / 100); }
/* La semana: cinco columnas con los bloques de cada materia en su color. */
.wg.semana .wg-dias{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; flex:1; min-height:0; }
.wg.semana .wg-dias > div{ position:relative; border-left:1px solid #2C2C36; padding-left:4px; }
.wg.semana .wg-dias b{ display:block; color:#9A968F; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.wg.semana .wg-dias i{ position:absolute; left:4px; right:0; border-radius:8px; padding:4px 6px; font-style:normal;
  font-size:.62rem; line-height:1.25; overflow:hidden; color:#F3F1EC; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--c) 35%, #1B1B22); border-left:3px solid var(--c); }
/* Dentro del bloque, como en el widget de verdad: nombre, hora, salón y profesor, cada uno en su línea. */
.wg.semana .wg-dias i b{ display:block; font-weight:700; font-size:.66rem; margin-bottom:1px; color:#F3F1EC; text-transform:none; letter-spacing:0; }
.wg.semana .wg-dias i span{ color:rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wg.semana .wg-dias i span:last-child{ color:rgba(255,255,255,.65); }
/* La etiqueta con el nombre del widget, abajo a la derecha, como en el selector de Android. */
.wg-n{ position:absolute; right:10px; bottom:8px; font-size:.62rem; color:#6E6B66; letter-spacing:.04em; text-transform:uppercase; pointer-events:none; }
.wg.anillo .wg-n, .wg.nota .wg-n{ display:none; }   /* esos dos se explican solos */
@media (max-width:720px){
  .vitrina{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .w-4x2{ grid-column:span 2; }
}
@media (max-width:460px){
  .wg.semana .wg-dias{ grid-template-columns:repeat(3,1fr); }
  .wg.semana .wg-dias > div:nth-child(n+4){ display:none; }   /* en un celular angosto caben tres días */
}
/* Cada carrera trae ahora una línea con sus herramientas: que no se estire a lo ancho. */
.carrera{ max-width:440px; }

.menu-carreras .corto{ display:none; }
@media (max-width:720px){
  /* En el celular queda solo el menú de carreras, corto; los otros enlaces se van. */
  .enlaces{ gap:12px; }
  .enlaces > a{ display:none; }
  .menu-carreras .largo{ display:none; }
  .menu-carreras .corto{ display:inline; }
  .menu-carreras .desplegable{ left:auto; right:-70px; min-width:250px; }
  section{ padding:40px 0; }
  .portada{ padding:48px 0 30px; }
}

/* ─── La calculadora de promedio (promedio.php) ─────────────────────── */
.calc{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.calc .tarjeta h2{ font-size:1.3rem; margin-bottom:4px; }
.calc .intro-calc{ color:var(--dim); font-size:.9rem; margin-bottom:14px; }
.calc-cab, .calc-fila{ display:grid; grid-template-columns:minmax(0,1.6fr) 74px 82px 30px; gap:8px; align-items:center; }
.calc-cab{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tenue); padding:0 0 6px 4px; }
.calc-fila{ margin-bottom:8px; }
.calc-fila input{ width:100%; min-width:0; background:var(--surf-2); border:1px solid var(--linea); border-radius:10px; padding:9px 10px; font:inherit; color:inherit; outline:0; }
.calc-fila input:focus{ border-color:var(--acc); }
.calc-fila input[type=number]{ text-align:center; -moz-appearance:textfield; }
.calc-fila input::-webkit-outer-spin-button, .calc-fila input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc-quitar{ width:30px; height:34px; border-radius:9px; border:1px solid transparent; background:none; color:var(--tenue); font-size:1.2rem; cursor:pointer; }
.calc-quitar:hover{ color:var(--ink); border-color:var(--linea); }
.calc-acciones{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 14px; }
.calc-escala{ margin:0 0 0 auto; display:flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; color:var(--dim); }
.calc-escala select, .calc-escala input{ background:var(--surf-2); border:1px solid var(--linea); border-radius:9px; padding:6px 8px; font:inherit; color:inherit; width:auto; }
.calc-escala input{ width:64px; text-align:center; }
.resultado{ padding:16px 18px; border-radius:14px; background:var(--acc-tenue); border:1px solid var(--acc-suave); }
.resultado b{ display:block; font-family:"Fraunces",Georgia,serif; font-size:2.2rem; line-height:1.1; }
.resultado small{ display:block; color:var(--dim); font-size:.88rem; margin-top:4px; line-height:1.45; }
@media (max-width:420px){
  .calc-cab, .calc-fila{ grid-template-columns:minmax(0,1.3fr) 60px 70px 26px; gap:6px; }
  .calc-cab{ font-size:.64rem; letter-spacing:0; }
  .calc-fila input{ padding:8px 6px; }
}

/* ─── Horario de Artemisa (horario-artemisa.php) ────────────────────── */
.pasos-num{ counter-reset:p; display:grid; gap:12px; max-width:720px; margin:0 auto; }
.paso-num-item{ display:flex; gap:16px; align-items:flex-start; background:var(--surf); border:1px solid var(--linea); border-radius:var(--r); padding:18px 20px; text-align:left; }
.paso-num-item::before{ counter-increment:p; content:counter(p); flex:none; width:34px; height:34px; border-radius:50%; background:var(--acc-grad); color:var(--on-acc); display:grid; place-items:center; font-weight:700; font-family:"Fraunces",Georgia,serif; }
.paso-num-item b{ display:block; margin-bottom:2px; }
.paso-num-item p{ margin:0; color:var(--dim); font-size:.95rem; }
.caja-nota{ max-width:720px; margin:26px auto 0; padding:16px 20px; border-radius:var(--r); background:var(--surf); border:1px solid var(--linea); text-align:left; font-size:.95rem; color:var(--dim); }
.caja-nota b{ color:var(--ink); }