/* Acceso de alumnas · MC41 · 29-oct-2026
   Sistema de la home A y de Money Code (P1 + T5). Menú H2-A y pie H4-E de la home. Una sola tarea: pedir el enlace.
   Estructura del login de Heartbeat (marca → bienvenida → instrucción → campo → botón); en escritorio, el titular a la
   izquierda y la tarea a la derecha, las dos dentro de la primera pantalla. Comportamiento: el de Login.tsx (acceso.js). */

@font-face{font-family:"DB Archivo";src:url("/home/web-motion-2026-10-24/assets/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

.ac{
  --papel:#fffdfb; --tinta:#111; --tinta-suave:#3c4247;
  --burdeos:#4b1014; --burdeos-vivo:#750e1e; --acero:#4a6274; --acero-claro:#d3dee7;
  --g:clamp(20px,4.4vw,64px); --max:1312px;
  --archivo:"DB Archivo",Arial,sans-serif;
  --caslon:"A1 Caslon Text","DB Caslon",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  display:block;background:var(--papel);color:var(--tinta);
  font:400 17px/1.65 var(--caslon);font-kerning:normal;font-synthesis:none;
}
@media(min-width:1024px){.ac{font-size:18px}}
.ac p{margin:0;text-wrap:pretty}
.ac :where(h1,h2){margin:0;text-wrap:balance;font-weight:inherit}
.ac ::selection{background:var(--acero-claro);color:var(--tinta)}
.ac a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
.ac a:hover{color:var(--burdeos)}
.ac :is(a,button,summary,input):focus-visible{outline:2px solid var(--acero);outline-offset:4px}
.ac [hidden]{display:none!important}

/* ------------------------------------------------------------- composición -- */
/* La tarea ocupa la primera pantalla entera: el pie queda debajo, fuera del primer golpe de vista (un foco por pantalla). */
.ac-entrada{min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:calc(64px + 48px) var(--g) clamp(64px,8vw,120px)}
.ac-entrada__rejilla{width:100%}
.ac-entrada__rejilla{max-width:var(--max);margin:0 auto;display:grid;gap:40px}
.ac-entrada__cabeza{display:grid;align-content:start}
@media(min-width:960px){
  .ac-entrada{padding-top:calc(84px + clamp(40px,4vw,72px));padding-bottom:clamp(56px,6vw,96px)}
  .ac-entrada__rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(56px,7vw,128px);align-items:start}
  .ac-tarea{padding-top:10px}
}

/* AC1 · titular en Archivo ancho y versales (T5); la segunda línea de AC1-A va en Caslon cursiva, como en producción. */
.ac-titular{display:grid;row-gap:.06em}
.ac-titular__uno{display:block;font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(1.95rem,.95rem + 4vw,4.6rem);line-height:1;overflow-wrap:break-word;clip-path:inset(-.3em -.1em -.3em -.1em)}
.ac-titular__dos{display:block;font:italic 400 clamp(2rem,1rem + 4vw,4.6rem)/1.05 var(--caslon);letter-spacing:-.02em;padding-bottom:.06em}
/* Corrección MC41 (QA-REVISION A-03 = C-04/C-05 de Contacto): el lienzo del relieve ocupa la caja de relleno del soporte y la
   tinta de la L sobresalía hasta 5 px por los lados (cola cortada). El soporte gana --hl de holgura por cada lado (content-box +
   padding) y el margen negativo la devuelve: la L no se mueve y el lienzo contiene el trazo entero. relieve.js no se toca. */
.ac-firma{--hl:12px;position:relative;justify-self:end;box-sizing:content-box;width:92px;height:100px;padding:var(--hl);margin:calc(-2px - var(--hl)) calc(-4px - var(--hl)) calc(-10px - var(--hl)) calc(-1 * var(--hl));display:flex;align-items:center;justify-content:center}
.ac-firma .rl-hazel{display:block;font-size:66px;line-height:1;margin:.275em .356em .187em .185em;color:var(--burdeos)}
/* Sin WebGL o antes de hornear, la reserva «marfil» de relieve.css pinta la L en greige #D8D2CB (vetado, R8): aquí, burdeos. */
.ac-firma:not(.rl-activo) .rl-palabra{color:#4b1014}
@media(forced-colors:active){.ac-firma .rl-palabra{color:CanvasText}}
@media(min-width:960px){
  .ac-firma{width:136px;height:146px;margin:calc(10px - var(--hl)) calc(-1 * var(--hl)) calc(-1 * var(--hl)) calc(-6px - var(--hl));justify-self:start}
  .ac-firma .rl-hazel{font-size:100px}
}
/* A partir de 1200 px la firma crece y cierra la columna izquierda frente al formulario: es la única pieza de marca de la pantalla. */
@media(min-width:1200px){
  .ac-firma{width:218px;height:234px;margin:calc(18px - var(--hl)) calc(-1 * var(--hl)) calc(-1 * var(--hl)) calc(-10px - var(--hl))}
  .ac-firma .rl-hazel{font-size:160px}
}
/* Entrada (sólo con movimiento): el titular sube por su ranura y la firma se escribe después. */
html[data-entrada="1"] .ac-titular__uno{transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease)}
html[data-entrada="1"] .ac-titular__dos{transition:opacity .9s ease .3s,transform 1.05s var(--ease) .3s}
html[data-entrada="1"] .ac-firma{transition:clip-path 1s cubic-bezier(.65,0,.35,1) .75s,opacity .4s ease .75s}
html[data-entrada="1"]:not([data-entrada-hecha]) .ac-titular__uno{clip-path:inset(-.3em -.1em 100% -.1em);transform:translateY(.4em)}
html[data-entrada="1"]:not([data-entrada-hecha]) .ac-titular__dos{opacity:0;transform:translateY(.25em)}
html[data-entrada="1"]:not([data-entrada-hecha]) .ac-firma{clip-path:inset(0 100% 0 0);opacity:0}

/* -------------------------------------------------------------- la tarea -- */
.ac-tarea{display:grid;gap:0;max-width:448px;width:100%}
.ac .ac-entradilla{font-size:clamp(1.12rem,1.02rem + .45vw,1.38rem);line-height:1.5;margin-bottom:28px}
.ac-form{display:grid}
.ac-etiqueta{display:block;margin:0 0 10px;font:600 14px/1.3 var(--archivo);letter-spacing:.01em}
.ac-campo{display:block;width:100%;min-height:58px;box-sizing:border-box;margin:0;padding:14px 16px;border:1px solid var(--acero);border-radius:0;background:var(--papel);color:var(--tinta);font:400 17px/1.4 var(--archivo);caret-color:var(--burdeos);transition:border-color .2s ease,box-shadow .2s ease}
.ac-campo::placeholder{color:var(--tinta-suave);opacity:1}
.ac-campo:hover{border-color:var(--tinta)}
.ac-campo:focus{outline:none;border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.ac-campo:focus-visible{outline:2px solid var(--acero);outline-offset:4px}
.ac-campo:disabled{background:var(--papel);border-color:#11111440;color:var(--tinta-suave);cursor:wait}
.ac .ac-error{margin:12px 0 0;font:500 14px/1.55 var(--archivo);color:var(--burdeos-vivo)}
/* LG7 · el único botón de la pantalla, en burdeos (la pieza burdeos de esta página, como el botón de la home). */
.ac-enviar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:58px;margin:16px 0 0;padding:16px 22px;border:1px solid var(--burdeos);border-radius:0;background:var(--burdeos);color:var(--papel);font:600 13px/1.3 var(--archivo);letter-spacing:.06em;text-transform:uppercase;text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .22s ease,border-color .22s ease}
.ac-enviar svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.ac-enviar:hover{background:var(--tinta);border-color:var(--tinta)}
.ac-enviar:hover svg{transform:translateX(4px)}
.ac-enviar:active{transform:translateY(1px)}
.ac-enviar:focus-visible{outline:2px solid var(--acero);outline-offset:4px}
.ac-enviar:disabled{background:var(--tinta-suave);border-color:var(--tinta-suave);cursor:wait}
.ac-enviar:disabled svg{transform:none;opacity:.55}

/* LG2 · aviso de vuelta de enlace: caja de papel con filete fino de tinta (sin campo de color ni borde a la izquierda). */
.ac .ac-aviso{margin:0 0 26px;padding:16px 18px;background:var(--papel);border:1px solid var(--tinta);font:500 15px/1.55 var(--archivo)}

/* LG8 · confirmación */
.ac-confirmacion{display:grid;gap:18px;justify-items:start}
.ac-confirmacion__titulo{font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);line-height:1.02}
.ac-confirmacion__titulo:focus{outline:none}
.ac-confirmacion__titulo:focus-visible{outline:2px solid var(--acero);outline-offset:6px}
.ac-confirmacion__texto{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.55}
.ac-email{font-family:var(--archivo);font-weight:700;font-size:.92em;overflow-wrap:anywhere;color:var(--burdeos)}
.ac-otro{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;border-bottom:1px solid currentColor;background:none;color:var(--burdeos);white-space:nowrap;font:600 13px/1.3 var(--archivo);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.ac-otro:hover{color:var(--tinta)}

/* LG9 · sin acceso */
.ac .ac-programas{margin-top:26px;font:400 14px/1.6 var(--archivo);color:var(--tinta-suave)}
.ac .ac-programas a{color:var(--burdeos);font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.ac .ac-programas a:hover{color:var(--tinta)}

/* AC6 · accesos anteriores (desplegable nativo, cerrado al cargar) */
.ac-anteriores{margin-top:36px;border-top:1px solid var(--tinta);border-bottom:1px solid var(--acero-claro)}
.ac-anteriores summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:18px 0;cursor:pointer;list-style:none;font:600 15px/1.35 var(--archivo)}
.ac-anteriores summary::-webkit-details-marker{display:none}
.ac-anteriores summary:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.ac-signo{position:relative;flex:none;width:16px;height:16px}
.ac-signo::before,.ac-signo::after{content:"";position:absolute;left:0;top:7.25px;width:16px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.ac-signo::after{transform:rotate(90deg)}
.ac-anteriores[open] .ac-signo::after{transform:rotate(0deg)}
.ac-anteriores__cuerpo{display:grid;gap:12px;padding:0 0 20px}
.ac .ac-anteriores__cuerpo p{font-size:16px;line-height:1.6;color:var(--tinta-suave)}
.ac-campus{display:grid}
.ac .ac-campus a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:8px 0;border-top:1px solid var(--acero-claro);color:var(--burdeos);font:600 14px/1.35 var(--archivo);text-decoration:none}
.ac .ac-campus a:hover{color:var(--tinta)}
.ac-campus a:first-child{border-top:0}
.ac-campus a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ac-campus svg{width:16px;height:16px;flex:none}

/* AC7 · ayuda */
.ac .ac-ayuda{margin-top:22px;font-size:15px;line-height:1.6;color:var(--tinta-suave)}
.ac-ayuda a{color:var(--tinta);text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------- quieto y movimiento reducido -- */
html[data-quieto="1"] .ac *,html[data-quieto="1"] .ac *::before,html[data-quieto="1"] .ac *::after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.ac *,.ac *::before,.ac *::after{transition:none!important;animation:none!important}}