/* Ingreso 2027 · FHAyCS UADER
   Layout: portada sobre hoja cuadriculada con el lettering de la pieza;
   después, franjas blancas y grises alternadas por sección. */
:root {
  /* Color */
  --papel: #fafafa;
  --papel-hoja: #fffdf8;
  --blanco: #ffffff;
  --gris-franja: #f1f0ed;
  --superficie: var(--papel-hoja); /* fondo de tarjetas, cambia según la franja */
  --cuadricula: rgba(0, 0, 0, .085);
  --tinta: #1b2f5a;          /* azul marino del manuscrito */
  --petroleo: #143c50;       /* "ingreso" */
  --celeste: #2fa8d8;        /* "2027", solo display grande */
  --celeste-texto: #1a6f96;  /* celeste con contraste para texto chico */
  --magenta: #b00060;
  --magenta-hover: #800048;
  --bordo: #5a0030;
  --resaltador: #f3f06a;
  --texto: #2a2f38;
  --texto-suave: #5b6270;
  --linea: rgba(27, 47, 90, .14);
  --tira-1: #b00060; --tira-2: #7e1747; --tira-3: #a3175f; --tira-4: #621038; --tira-5: #3e0c26;

  /* Tipografía */
  --f-display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mano: "Caveat Brush", "Segoe Print", "Comic Sans MS", cursive;
  --f-texto: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --t-xs: .8125rem; --t-s: .9375rem; --t-m: 1.0625rem; --t-l: 1.375rem; --t-xl: 2rem; --t-xxl: clamp(2.75rem, 7vw, 4.75rem);

  --cuadro: 51px;
  --ancho: 72rem;
  --radio: 6px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--blanco);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Cuadriculado de cuaderno: solo portada */
.cuadriculado {
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px);
  background-size: var(--cuadro) var(--cuadro);
  background-position: center top;
  background-attachment: local;
}
/* Franjas alternas por sección */
.franja--blanca { background: var(--blanco); --superficie: var(--gris-franja); }
.franja--gris { background: var(--gris-franja); --superficie: var(--blanco); }

a { color: var(--magenta); text-underline-offset: .18em; }
a:hover { color: var(--magenta-hover); }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 3px; }

.envoltura {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 640px) {
  .envoltura { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--papel-hoja); padding: .5rem 1rem; z-index: 50; }
.saltar:focus { left: 16px; }

/* ---------- Portada: encabezado + hero sobre cuadriculado ---------- */
.portada { position: relative; }
/* manchas suaves de papel, como en la pieza */
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 85% 30%, rgba(0,0,0,.035), transparent 70%),
    radial-gradient(35% 45% at 10% 85%, rgba(0,0,0,.03), transparent 70%);
}
.portada > * { position: relative; }

/* Encabezado pegajoso, con fondo propio para que el menú se lea sobre el cuadriculado */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1000;
  padding-block: .85rem;
  background: rgba(250, 250, 250, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
.cabecera--fija { border-bottom-color: var(--linea); box-shadow: 0 6px 18px -12px rgba(20, 60, 80, .35); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 1001; background: #fafafa; }
html { scroll-padding-top: 96px; }
@media (max-width: 720px) { html { scroll-padding-top: 80px; } }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.marca { display: block; flex: none; }
.marca__logo { display: block; width: clamp(150px, 18vw, 200px); height: auto; }

.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem .5rem; }
.nav a {
  display: inline-block; padding: .4rem .8rem; border-radius: 999px;
  color: var(--petroleo); text-decoration: none; font-weight: 700; font-size: var(--t-s);
}
.nav a:hover { background: var(--resaltador); color: var(--petroleo); }
.menu-btn { display: none; }
@media (max-width: 720px) {
  /* Sin JS: el menú queda visible debajo del logo */
  html:not(.js-menu) .cabecera__fila { justify-content: center; }
  html:not(.js-menu) .nav { margin-left: 0; width: 100%; }
  html:not(.js-menu) .nav ul { justify-content: center; }

  /* Con JS: menú hamburguesa */
  .js-menu .cabecera__fila { flex-wrap: nowrap; }
  .js-menu .menu-btn {
    display: inline-flex; align-items: center; gap: .5rem; flex: none;
    min-height: 44px; padding: .5rem .75rem; cursor: pointer;
    background: var(--blanco); color: var(--petroleo); border: 1.5px solid var(--linea); border-radius: var(--radio);
    font: 700 var(--t-s)/1 var(--f-display);
  }
  .menu-btn__barras { display: grid; gap: 4px; width: 20px; }
  .menu-btn__barras span { display: block; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-btn[aria-expanded="true"] { background: var(--petroleo); color: #fff; border-color: var(--petroleo); }
  .menu-btn[aria-expanded="true"] .menu-btn__barras span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__barras span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn__barras span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .menu-btn__barras span { transition: none; } }

  .js-menu .nav {
    display: none; position: absolute; z-index: 30; top: calc(100% + .5rem);
    left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
    margin: 0; padding: .5rem; background: var(--blanco);
    border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: 0 14px 30px -12px rgba(20, 60, 80, .35);
  }
  .js-menu .nav.nav--abierta { display: block; }
  .js-menu .nav ul { flex-direction: column; gap: 2px; }
  .js-menu .nav a { display: block; padding: .85rem 1rem; border-radius: 4px; font-size: var(--t-m); }
  .js-menu .nav li + li a { border-top: 1px solid var(--linea); border-radius: 0; }
}

/* ---------- Hero ---------- */
/* Composición con las piezas de la pieza gráfica (referencia 1280 x 720).
   Escritorio: todo en una caja proporcional. Celular: dos grupos apilados. */
.hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 7vw, 5.5rem); }
.hero__comp { position: relative; width: 100%; max-width: 1075px; margin-inline: auto; }
.hero__grupo { display: block; position: relative; margin: 0; }
.hero__grupo img { position: absolute; display: block; height: auto; max-width: none; }

/* Grupo 1: trazo + "ingreso" + 2027 (caja 670 x 280) */
.hero__grupo--ingreso { aspect-ratio: 670 / 280; container-type: inline-size; }
.hero__trazo { left: 1.19%; top: 17.5%; width: 98.36%; }
.hero__ingreso {
  position: absolute; left: 13.13%; top: 1.79%;
  font: 800 16.87cqi/1 var(--f-display); letter-spacing: -.01em; color: var(--petroleo);
}
.hero__2027 { left: 16.12%; top: 37.14%; width: 43.43%; }

/* Grupo 2: flecha + "descubrí la FHAyCS" (caja 480 x 166), link a la sección */
.hero__grupo--descubri { aspect-ratio: 480 / 166; text-decoration: none; }
.hero__flecha { left: 0; top: 34.94%; width: 38.96%; }
.hero__descubri { left: 41.88%; top: 0; width: 58.13%; transition: transform .25s ease; transform-origin: 60% 60%; }
.hero__grupo--descubri:hover .hero__descubri { transform: rotate(-3deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .hero__descubri { transition: none; } }

@media (min-width: 721px) {
  .hero__comp { aspect-ratio: 1075 / 287; }
  .hero__grupo { position: absolute; }
  .hero__grupo--ingreso { left: 0; top: 0; width: 62.33%; }
  .hero__grupo--descubri { left: 54.51%; top: 38.68%; width: 44.65%; }
}
@media (max-width: 720px) {
  .hero__grupo--descubri { width: 78%; margin: 4% 0 0 auto; }
  .hero__flecha { transform: rotate(38deg); transform-origin: 80% 50%; top: 22%; left: 2%; width: 34%; }
}

/* ---------- Franja de inscripción ---------- */
.inscribite { background: var(--petroleo); color: #fff; }
.inscribite__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 2rem; }
.inscribite__info { display: grid; gap: .5rem; min-width: 0; }
.etiqueta { font: 700 var(--t-xs)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: var(--magenta); }
.etiqueta--clara { color: var(--resaltador); }
.periodo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-variant-numeric: tabular-nums; }
.periodo__fecha { font-size: var(--t-m); color: rgba(255,255,255,.8); white-space: nowrap; }
.periodo__fecha strong { font: 800 clamp(1.75rem, 4vw, 2.5rem)/1 var(--f-display); color: #fff; margin-right: .2em; }
.periodo__flecha { width: clamp(2rem, 6vw, 4.5rem); height: 2px; background: repeating-linear-gradient(90deg, var(--resaltador) 0 6px, transparent 6px 11px); }
.inscribite__nota { font-size: var(--t-s); color: rgba(255,255,255,.75); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--magenta); color: #fff; text-decoration: none; font: 700 var(--t-m)/1.2 var(--f-display);
  padding: .9rem 1.4rem; border-radius: var(--radio); transition: background-color .15s, color .15s;
}
.boton:hover { background: var(--magenta-hover); color: #fff; }
.boton--sec { background: transparent; color: var(--tinta); border: 2px solid var(--tinta); }
.boton--sec:hover { background: var(--tinta); color: #fff; }
.boton--claro { background: var(--resaltador); color: var(--petroleo); }
.boton--claro:hover { background: #fff; color: var(--petroleo); }
.boton svg { width: 1.1em; height: 1.1em; flex: none; }
.nota { font-size: var(--t-s); color: var(--texto-suave); }

/* ---------- Claves ---------- */
.claves { padding-block: 3rem; }
.claves ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 640px) { .claves ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .claves ul { grid-template-columns: repeat(4, 1fr); } }
.claves li { background: var(--blanco); padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.claves strong { font: 400 1.75rem/1.1 var(--f-mano); color: var(--tinta); }
.claves span { font-size: var(--t-s); color: var(--texto-suave); }

/* ---------- Secciones ---------- */
.seccion { padding-block: 4rem; }
.seccion__cab { display: grid; gap: .75rem; margin-bottom: 2rem; max-width: 46rem; }
.seccion__titulo { font: 400 clamp(2.25rem, 5vw, 3rem)/1.05 var(--f-mano); color: var(--tinta); }
.seccion__intro { color: var(--texto-suave); max-width: 62ch; }

.presentacion { display: grid; gap: 1rem; max-width: 62ch; }
.pie a { color: #fff; }

/* La FHAyCS: texto a la izquierda, foto a sangre hasta el borde derecho */
.fhaycs { position: relative; overflow: hidden; }
.fhaycs__foto { margin: 2.5rem 0 -4rem; }
.fhaycs__foto img { display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 70% 40%; }
@media (min-width: 860px) {
  .fhaycs { min-height: 34rem; display: flex; align-items: center; }
  .fhaycs > .envoltura { width: 100%; }
  .fhaycs__texto { width: calc(50% - 2.5rem); }
  .fhaycs__foto { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; margin: 0; }
  .fhaycs__foto picture, .fhaycs__foto img { height: 100%; }
  .fhaycs__foto img { aspect-ratio: auto; }
}

/* ---------- Carreras ---------- */
.filtro { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filtro button {
  font: 600 var(--t-s)/1 var(--f-texto); color: var(--tinta); background: var(--blanco);
  border: 1.5px solid var(--linea); border-radius: 999px; padding: .55rem .95rem; cursor: pointer;
}
.filtro button:hover { border-color: var(--tinta); }
.filtro button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.sedes { display: grid; gap: 1.5rem; }
.sede { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem 1.25rem 1.5rem; scroll-margin-top: 1rem; }
@media (min-width: 640px) { .sede { padding: 1.75rem 2rem 2rem; } }
.sede__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1rem; }
.sede__cab h3 { font: 800 var(--t-l)/1.2 var(--f-display); color: var(--petroleo); }
.sede__n { font-size: var(--t-s); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.sede__escuela { font: 600 var(--t-s)/1.3 var(--f-display); color: var(--bordo); margin: 1.5rem 0 .5rem; }

.carreras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; }
@media (min-width: 760px) { .carreras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carreras li { border-bottom: 1px dashed var(--linea); min-width: 0; }
.carreras a { display: flex; align-items: baseline; gap: .75rem; padding: .6rem .25rem; color: var(--texto); text-decoration: none; }
.carreras a:hover { background: color-mix(in srgb, var(--resaltador) 55%, transparent); }
.carreras a:hover .carrera__nombre { text-decoration: underline; text-decoration-color: var(--magenta); }
.carrera__nombre { min-width: 0; }
.tipo { flex: none; width: 2.6rem; font: 700 .6875rem/1.6 var(--f-display); text-transform: uppercase; letter-spacing: .06em; text-align: center; border-radius: 3px; }
.tipo { font-size: 0; }
.tipo::before { font-size: .6875rem; }
.tipo--licenciaturas { background: #e8eef7; color: var(--tinta); }
.tipo--licenciaturas::before { content: "Lic."; }
.tipo--profesorados { background: #f7e3ec; color: var(--bordo); }
.tipo--profesorados::before { content: "Prof."; }
.tipo--tecnicaturas { background: #e1f1f8; color: #135774; }
.tipo--tecnicaturas::before { content: "Tec."; }
.tipo--traductorados { background: #fbf6c4; color: #5c5300; }
.tipo--traductorados::before { content: "Trad."; }

/* ---------- Pasos ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: paso; }

/* Paso a paso (slider). Sin JS queda como lista desplazable. */
.pasador { display: grid; gap: 1.25rem; }
.pasador__indice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; counter-reset: none; }
.pasador__indice button {
  width: 100%; height: 100%; display: flex; align-items: center; gap: .6rem; text-align: left;
  background: transparent; border: 0; border-top: 3px solid var(--linea); padding: .75rem .25rem 0; cursor: pointer;
  font: 600 var(--t-s)/1.25 var(--f-texto); color: var(--texto-suave);
}
.pasador__indice button:hover { color: var(--tinta); }
.pasador__indice button[aria-current="step"] { border-top-color: var(--magenta); color: var(--tinta); }
.pasador__num { font: 400 1.75rem/1 var(--f-mano); color: var(--celeste); flex: none; }
.pasador__indice button[aria-current="step"] .pasador__num { color: var(--magenta); }
@media (max-width: 600px) { .pasador__tit { display: none; } .pasador__indice button { justify-content: center; } }

.pasador__pista { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radio); }
.pasador__pista::-webkit-scrollbar { display: none; }
.pasador__pista .pasos { display: flex; gap: 0; }
.pasador__pista .paso { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }

.pasador__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pasador__estado { font-size: var(--t-s); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.pasador__btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font: 700 var(--t-s)/1 var(--f-display); color: var(--tinta);
  background: var(--blanco); border: 2px solid var(--tinta); border-radius: var(--radio); padding: .7rem 1rem;
}
.pasador__btn:hover:not(:disabled) { background: var(--tinta); color: #fff; }
.pasador__btn:disabled { opacity: .35; cursor: default; }
.pasador__btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.paso { counter-increment: paso; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; }
@media (min-width: 640px) { .paso { padding: 2rem 2.25rem; grid-template-columns: 4rem minmax(0, 1fr); } }
.paso::before { content: counter(paso); font: 400 3.25rem/1 var(--f-mano); color: var(--celeste); }
.paso__cuerpo { display: grid; gap: .75rem; max-width: 64ch; }
.paso h3 { font: 700 var(--t-l)/1.25 var(--f-display); color: var(--petroleo); }
.paso__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }

.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.docs > li { position: relative; padding-left: 1.75rem; }
.docs > li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.05rem; height: 1.05rem; border: 2px solid var(--tinta); border-radius: 3px; }
.docs ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: var(--t-s); color: var(--texto-suave); }

.aviso { border-left: 4px solid var(--magenta); background: color-mix(in srgb, var(--magenta) 6%, var(--blanco)); padding: .875rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; font-size: var(--t-s); }
.aviso strong { color: var(--bordo); }

/* ---------- Curso de ingreso ---------- */
.curso { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .curso { grid-template-columns: 1fr 1fr; align-items: start; } }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; display: grid; gap: .875rem; }
.tarjeta h3 { font: 700 var(--t-l)/1.25 var(--f-display); color: var(--petroleo); }
.fecha-grande { font: 400 2rem/1.15 var(--f-mano); color: var(--tinta); }

/* ---------- Contacto ---------- */
.contactos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 760px) { .contactos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contactos li { background: var(--superficie); padding: 1rem 1.25rem; display: grid; gap: .15rem; min-width: 0; }
.contactos span { font-weight: 600; color: var(--tinta); }
.contactos a { overflow-wrap: anywhere; font-size: var(--t-s); }

/* ---------- Pie ---------- */
.pie { padding-block: 2.5rem 3rem; background: var(--tinta); color: rgba(255,255,255,.75); font-size: var(--t-s); color: var(--texto-suave); }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }

/* ---------- Marcas de revisión (quitar antes de publicar) ---------- */
.revisar { outline: 2px dashed #d2452f; outline-offset: 2px; border-radius: 2px; }
.revisar::after { content: " · a confirmar"; font: 600 .7rem/1 var(--f-texto); color: #d2452f; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
a.revisar::after { content: " · link pendiente"; }
.boton.revisar::after { color: #fff; }
.boton--claro.revisar::after { color: #b3261e; }
.boton--sec.revisar::after { color: #d2452f; }

/* Paso 1: dos caminos de registro */
.paso__cuerpo { max-width: 76ch; }
.opciones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.opcion { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; min-width: 0; }
.opcion h4 { font: 700 var(--t-m)/1.3 var(--f-display); color: var(--petroleo); }
.opcion ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: var(--t-s); }
.opcion .boton { margin-top: auto; }

/* Contactos: si queda una sola en la última fila, ocupa el ancho */
@media (min-width: 760px) { .contactos li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .paso { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: 1.25rem 1rem; }
  .paso::before { font-size: 2.5rem; }
  .opcion { padding: 1rem; }
}
.pasador__estado { white-space: nowrap; }

/* ==========================================================
   ms-bot - Botón flotante Fhaycs Bot (WhatsApp, solo estudiantes)
   Tomado de mod_fhaycsbot v1.1.1, variante A (link directo).
   ========================================================== */
.ms-bot {
  --ms-bot-mag: #b00060;
  --ms-bot-mag-hover: #800048;
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  font-family: inherit;
  line-height: 1.25;
}
.ms-bot__btn {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 22px 8px 8px;
  background: var(--ms-bot-mag); color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(90, 0, 48, .28);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.ms-bot__btn:hover,
.ms-bot__btn:focus-visible { background: var(--ms-bot-mag-hover); color: #fff; text-decoration: none; transform: translateY(-2px); }
.ms-bot__btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--ms-bot-mag); }
.ms-bot__avatar { flex: 0 0 auto; width: 56px; height: 56px; padding: 6px; background: #fff; border-radius: 50%; box-sizing: border-box; }
.ms-bot__avatar img { display: block; width: 100%; height: 100%; }
.ms-bot__texto { display: flex; flex-direction: column; }
.ms-bot__nombre { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.ms-bot__aviso { font-size: .88rem; line-height: 1.3; }
@media (max-width: 575px) {
  .ms-bot { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ms-bot__btn { padding: 6px 14px 6px 6px; gap: 9px; border-radius: 14px; }
  .ms-bot__avatar { width: 48px; height: 48px; padding: 5px; }
  .ms-bot__nombre { font-size: 1rem; }
  .ms-bot__aviso { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-bot__btn { transition: none; }
  .ms-bot__btn:hover { transform: none; }
}

/* ---------- Volver arriba: encima del bot, mismo lado ---------- */
.subir {
  position: fixed; z-index: 1039;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--petroleo); color: #fff; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(20, 60, 80, .3); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background-color .2s;
}
.subir svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.subir:hover { background: var(--tinta); }
.subir--visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 575px) {
  .subir { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .subir { transition: none; } }

/* Que el bot no tape el final de la página */
.pie { padding-bottom: calc(3rem + 80px); }

/* ---------- Ventana de homologación ---------- */
.dialogo {
  width: min(720px, calc(100% - 32px)); max-height: min(85vh, 900px);
  margin: auto; padding: 0; border: 0; border-radius: 10px;
  background: var(--blanco); color: var(--texto);
  box-shadow: 0 24px 60px -20px rgba(20, 60, 80, .5);
  overflow: hidden; flex-direction: column;
}
.dialogo[open], .dialogo:target { display: flex; }
.dialogo:target { position: fixed; inset: 0; z-index: 2000; }
.dialogo::backdrop { background: rgba(20, 40, 60, .55); }
.dialogo__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1rem 1.5rem; background: var(--petroleo); color: #fff; }
.dialogo__cab h2 { font: 700 var(--t-l)/1.25 var(--f-display); }
.dialogo__cerrar { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.dialogo__cerrar:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.dialogo__cerrar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.dialogo__cuerpo { overflow-y: auto; padding: 1.5rem; display: grid; gap: 1rem; font-size: var(--t-s); }
.dialogo__cuerpo h3 { font: 700 var(--t-m)/1.3 var(--f-display); color: var(--petroleo); margin-top: .5rem; }
.dialogo__cuerpo ul, .dialogo__cuerpo ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.dialogo__cuerpo .aviso { display: grid; gap: .5rem; }
.dialogo__plazo { background: color-mix(in srgb, var(--resaltador) 45%, var(--blanco)); padding: .75rem 1rem; border-radius: var(--radio); }
@media (max-width: 575px) {
  .dialogo { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .dialogo__cuerpo { padding: 1.25rem 1rem; }
}

/* ---------- Curso de Ingreso ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.curso-sec { display: grid; gap: 2.5rem; }
.curso-sec .seccion__cab { margin-bottom: -1rem; }
.curso-sub { font: 700 var(--t-l)/1.25 var(--f-display); color: var(--petroleo); }
.curso-bloque { display: grid; gap: .75rem; }

.curso-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 760px) { .curso-datos { grid-template-columns: 1.4fr 1fr 1fr; } }
.curso-datos li { background: var(--blanco); padding: 1.1rem 1.25rem 1.25rem; display: grid; gap: .35rem; align-content: start; }
.curso-datos strong { font: 400 1.75rem/1.1 var(--f-mano); color: var(--tinta); }

.modulos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.modulos li { display: flex; align-items: center; gap: 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem; min-width: 0; }
.modulos__num { flex: none; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--resaltador); font: 800 1.15rem/1 var(--f-display); color: var(--petroleo); letter-spacing: .02em; }
.modulos__nombre { font: 700 var(--t-m)/1.3 var(--f-display); color: var(--petroleo); min-width: 0; }
.modulos__nombre small { display: block; margin-top: .3rem; font: 400 var(--t-s)/1.3 var(--f-texto); color: var(--texto-suave); }

.lista-simple { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; font-size: var(--t-s); }
.lista-simple li::marker { color: var(--magenta); }

.acceso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; background: var(--petroleo); color: rgba(255,255,255,.85); border-radius: var(--radio); padding: 1.75rem; }
@media (min-width: 760px) { .acceso { padding: 2rem 2.5rem; } }
.acceso__texto { display: grid; gap: .6rem; max-width: 58ch; min-width: 0; }
.acceso h3 { font: 700 var(--t-l)/1.25 var(--f-display); color: #fff; }
.acceso__clave { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; padding: .5rem .9rem; border-radius: 999px; background: var(--resaltador); color: var(--petroleo); font: 700 var(--t-s)/1.3 var(--f-display); }
.acceso__clave::before { content: ""; width: 1.1em; height: 1.1em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.curso-hom .tarjeta { max-width: none; }
.inscribite__fechas { font: 400 clamp(1.3rem, 3vw, 2rem)/1.25 var(--f-display); color: rgba(255,255,255,.88); text-wrap: balance; }
.inscribite__fechas strong { font-weight: 800; color: var(--resaltador); white-space: nowrap; }
.curso-hom .tarjeta .boton { justify-self: start; }

/* Sin el bot en la página: el "volver arriba" baja a la esquina y el pie recupera su margen */
body:not(:has(.ms-bot)) .subir { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 575px) { body:not(:has(.ms-bot)) .subir { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
body:not(:has(.ms-bot)) .pie { padding-bottom: 3rem; }
.inscribite__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.boton--borde-claro { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .75); }
.boton--borde-claro:hover { background: #fff; color: var(--petroleo); border-color: #fff; }
@media (max-width: 420px) { .inscribite__acciones .boton { flex: 1 1 100%; } }

/* Datos clave: el primero tiene más texto, se le da más ancho */
@media (min-width: 640px) and (max-width: 999px) {
  .claves ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .claves li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .claves ul { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
}

/* Carreras sujetas a aprobación del Consejo Superior */
.sujeta { color: var(--magenta); font-weight: 700; white-space: nowrap; }
.sede__nota { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--linea); font-size: var(--t-s); color: var(--texto-suave); max-width: 70ch; }
.sede__nota span { color: var(--magenta); font-weight: 700; }