/* ══════════════════════════════════════════════════════════════════════
amm26.css — Sistema de diseño · XXVII Simposio Internacional AMMVIH 2026
══════════════════════════════════════════════════════════════════════
Extraído de indexprov.php para que todas las páginas del evento
(registro, becas, login, perfil) compartan una sola fuente de verdad.
Uso mínimo en cualquier página:
…
Nota sobre el fondo: indexprov.php añade encima un
con un shader WebGL2 que se auto-oculta si el navegador no soporta
render float. Esta hoja replica la capa base (foto + velo + degradado),
que es exactamente lo que se ve cuando el shader no corre.
══════════════════════════════════════════════════════════════════════ */
/* ── 01 · Fuente (variable local, sin Google Fonts) ── */
@font-face{
font-family:'Montserrat';
src:url('./font/Montserrat-VariableFont_wght.ttf') format('truetype');
font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Montserrat';
src:url('./font/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
font-weight:100 900; font-style:italic; font-display:swap;
}
/* ── 02 · Tokens ── */
:root{
/* marca */
--warm:#C8102E; /* rojo */
--cool:#00A4E4; /* cian */
--gold:#F2B233; /* dorado */
--scrim:#0C0C0C;
--deep:#11253C;
--plum:#241634;
--sky:#A9DCF4;
--sky-pale:#CDEBFA;
--on-media:#ffffff;
--action-gradient:linear-gradient(104.45deg,#C8102E 10%,#F2B233 100%);
--cool-gradient:linear-gradient(104.45deg,#00A4E4 10%,#A9DCF4 100%);
/* glass */
--glass-bg:color-mix(in srgb,#ffffff 6%,transparent);
--glass-bg-strong:color-mix(in srgb,#ffffff 10%,transparent);
--glass-border:1px solid rgba(255,255,255,.16);
--glass-inset:inset 0 1px 1px rgba(255,255,255,.28);
--blur-glass:16px; --blur-glass-strong:32px;
/* forma */
--radius-field:16px; --radius-button:12px; --radius-panel:24px;
/* escala tipográfica */
--text-display:52px; --text-display-compact:26px;
--text-section:34px; --text-section-compact:24px;
--text-title:19px; --text-lead:16px; --text-body:15px; --text-small:13px;
--leading-body:1.55;
/* movimiento */
--ease:cubic-bezier(.2,0,0,1);
--duration-fast:150ms;
}
@media (max-width:640px){
:root{
--text-display:min(var(--text-display-compact),7.6vw);
--text-section:var(--text-section-compact);
}
}
/* ── 03 · Base ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body.amm{
font-family:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
background:var(--scrim); color:var(--on-media);
line-height:var(--leading-body);
-webkit-font-smoothing:antialiased;
min-height:100svh; position:relative; overflow-x:hidden;
/* Sin padding: el pie va a sangre, pegado a los bordes como en el landing.
El aire lo pone .wrap, que es el contenido. */
padding:0;
}
.wrap{max-width:1080px;margin:0 auto;padding:40px 20px 64px}
.wrap--narrow{max-width:640px}
.wrap--wide{max-width:1240px}
/* ── 04 · Capa de fondo ── */
.media{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.media img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
/* Fondo fijo y quieto: con el pie a sangre, cualquier movimiento del
fondo se nota como un salto al llegar abajo. */
transform:none;
}
.media__scrim{position:absolute;inset:0;
background:color-mix(in srgb,var(--scrim) 40%,transparent)}
/* Degradado sobre la foto: garantiza contraste del texto en cualquier zona */
.scene{position:fixed;inset:0;z-index:-2;background:
radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--deep) 72%,transparent) 0%,transparent 62%),
linear-gradient(180deg,color-mix(in srgb,#07131F 62%,transparent) 0%,
color-mix(in srgb,var(--plum) 52%,transparent) 55%,
color-mix(in srgb,var(--scrim) 82%,transparent) 100%)}
.aurora{position:fixed;border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none}
.a1{width:50vmax;height:50vmax;top:-18vmax;right:-14vmax;
background:radial-gradient(circle,rgba(200,16,46,.38) 0%,transparent 68%);
animation:amm-drift 21s var(--ease) infinite alternate}
.a2{width:44vmax;height:44vmax;bottom:-16vmax;left:-12vmax;
background:radial-gradient(circle,rgba(0,164,228,.30) 0%,transparent 68%);
animation:amm-drift 26s var(--ease) infinite alternate-reverse}
.a3{width:30vmax;height:30vmax;top:42%;left:52%;
background:radial-gradient(circle,rgba(242,178,51,.18) 0%,transparent 70%);
animation:amm-drift 30s var(--ease) infinite alternate}
@keyframes amm-drift{
from{transform:translate3d(0,0,0) scale(1)}
to {transform:translate3d(4vmax,3vmax,0) scale(1.13)}
}
/* ── 05 · Encabezado de página ── */
.amm-head{text-align:center;margin-bottom:44px}
.amm-logo{width:min(126px,26vw);height:auto;display:block;margin:0 auto 22px;
filter:drop-shadow(0 14px 34px rgba(0,0,0,.5));animation:amm-rise .8s var(--ease) both}
.amm-logo--lg{width:min(230px,52vw);margin-bottom:30px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
color:var(--gold);margin-bottom:12px}
.kicker--rule span{display:inline-block;width:34px;height:1px;background:var(--gold);
vertical-align:middle;margin:0 12px 4px;opacity:.65}
h1,.h1{font-size:clamp(25px,5.4vw,var(--text-display));font-weight:800;
line-height:1.1;letter-spacing:-.02em;margin-bottom:10px}
h2,.h2{font-size:clamp(20px,4vw,var(--text-section));font-weight:700;
line-height:1.2;letter-spacing:-.015em}
.grad{background:var(--action-gradient);-webkit-background-clip:text;
background-clip:text;color:transparent}
.lead{font-size:clamp(13px,2.6vw,var(--text-lead));font-weight:300;
color:rgba(255,255,255,.68)}
.muted{color:rgba(255,255,255,.46);font-size:var(--text-small)}
.muted a{color:var(--sky);text-decoration:none}
.muted a:hover{text-decoration:underline}
/* ── 06 · Paneles y tarjetas ── */
.panel,.card{
background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--glass-inset);
-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
border-radius:var(--radius-panel);padding:30px 26px;
}
.panel--tight{padding:20px 18px}
.panel--lg{padding:40px 34px}
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(276px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Tarjeta interactiva (camino, opción, sección del perfil) */
.card--action{
position:relative;display:flex;flex-direction:column;overflow:hidden;
text-decoration:none;color:var(--on-media);cursor:pointer;
transition:transform .4s var(--ease),border-color .4s,background .4s;
}
.card--action::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
background:radial-gradient(90% 70% at 50% 0%,rgba(242,178,51,.16) 0%,transparent 70%)}
.card--action:not(.is-off):hover{transform:translateY(-8px);border-color:rgba(242,178,51,.5)}
.card--action:not(.is-off):hover::before{opacity:1}
.card--action > *{position:relative;z-index:1}
.card.is-off{opacity:.42;pointer-events:none}
.card-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
margin-bottom:18px;background:var(--action-gradient)}
.card-ico svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.card-ico--cool{background:var(--cool-gradient)}
.card-ico--ghost{background:color-mix(in srgb,#ffffff 12%,transparent);
border:1px solid rgba(255,255,255,.2)}
.card h3,.card .h3{font-size:var(--text-title);font-weight:700;margin-bottom:9px}
.card p{font-size:14px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.66)}
.badge{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:5px 11px;z-index:2}
.badge--warm{background:color-mix(in srgb,var(--warm) 26%,transparent);
border-color:color-mix(in srgb,var(--warm) 50%,transparent)}
.badge--ok{background:rgba(46,125,50,.28);border-color:rgba(46,125,50,.55)}
.go{margin-top:20px;display:inline-flex;align-items:center;gap:9px;
font-size:14px;font-weight:700;color:var(--gold)}
.go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.card--action:hover .go svg{transform:translateX(5px)}
/* ── 07 · Botones ── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
height:52px;padding:0 30px;border:0;border-radius:var(--radius-button);
background:var(--action-gradient);color:#fff;
font-family:inherit;font-size:var(--text-body);font-weight:700;
text-decoration:none;cursor:pointer;
transition:transform .3s var(--ease),filter .3s,opacity .3s;
}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--cool{background:var(--cool-gradient)}
.btn--ghost{background:color-mix(in srgb,#ffffff 8%,transparent);
border:1px solid rgba(255,255,255,.28)}
.btn--ghost:hover:not(:disabled){background:color-mix(in srgb,#ffffff 16%,transparent)}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;flex:none}
/* ── 08 · Formularios ── */
.field{margin-bottom:18px}
.label{display:block;font-size:var(--text-small);font-weight:600;
color:rgba(255,255,255,.82);margin-bottom:8px}
.label .opt{font-weight:300;color:rgba(255,255,255,.45)}
.input,.select,.textarea{
width:100%;min-height:52px;padding:14px 16px;
background:color-mix(in srgb,#ffffff 7%,transparent);
border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-field);
color:var(--on-media);font-family:inherit;font-size:var(--text-body);
outline:none;transition:border-color .25s,background .25s,box-shadow .25s;
}
.textarea{min-height:120px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:rgba(255,255,255,.34)}
.input:focus,.select:focus,.textarea:focus{
border-color:var(--gold);background:color-mix(in srgb,#ffffff 11%,transparent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);
}
.input:disabled{opacity:.5;cursor:not-allowed}
/* El menú desplegable lo pinta el sistema: sin esto el texto sale blanco
sobre blanco en Chrome y Safari. */
.select option{background:var(--deep);color:#fff}
.err{display:none;font-size:12px;color:#FF8A8A;margin-top:6px}
.err.show{display:block}
.hint{font-size:12px;color:rgba(255,255,255,.45);margin-top:6px}
/* Opción tipo tarjeta (radio grande) */
.opt-card{
position:relative;display:flex;gap:14px;align-items:flex-start;
background:var(--glass-bg);border:var(--glass-border);border-radius:var(--radius-field);
padding:18px 20px;cursor:pointer;
transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.opt-card:hover{transform:translateY(-3px);border-color:rgba(242,178,51,.45)}
.opt-card.is-selected{border-color:var(--gold);
background:color-mix(in srgb,var(--gold) 12%,transparent)}
.opt-card input{position:absolute;opacity:0;pointer-events:none}
.opt-card .t{font-size:15px;font-weight:700;margin-bottom:3px}
.opt-card .d{font-size:13px;font-weight:300;color:rgba(255,255,255,.6)}
/* Archivo */
.file{display:flex;align-items:center;gap:12px;padding:14px 16px;
background:color-mix(in srgb,#ffffff 7%,transparent);
border:1px dashed rgba(255,255,255,.28);border-radius:var(--radius-field);
cursor:pointer;transition:border-color .25s,background .25s}
.file:hover{border-color:var(--gold);background:color-mix(in srgb,#ffffff 11%,transparent)}
.file input{display:none}
/* ── 09 · Progreso por pasos ── */
.steps{display:flex;align-items:center;gap:8px;margin-bottom:32px;justify-content:center}
.steps .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);
transition:background .3s,transform .3s var(--ease)}
.steps .dot.is-done{background:var(--gold)}
.steps .dot.is-now{background:var(--gold);transform:scale(1.5)}
.progress{height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.progress span{display:block;height:100%;background:var(--action-gradient);
width:0;transition:width .5s var(--ease)}
/* ── 10 · Avisos ── */
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;
border-radius:var(--radius-field);font-size:14px;line-height:1.55;
background:var(--glass-bg);border-left:3px solid var(--cool)}
.note--warn{border-left-color:var(--gold);
background:color-mix(in srgb,var(--gold) 10%,transparent)}
.note--err{border-left-color:var(--warm);
background:color-mix(in srgb,var(--warm) 12%,transparent)}
.note--ok{border-left-color:#2E7D32;background:rgba(46,125,50,.14)}
/* ── 11 · Datos ── */
.kv{display:flex;justify-content:space-between;align-items:baseline;
font-size:13px;color:rgba(255,255,255,.62);margin-bottom:5px}
.kv b{font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.divider{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
/* ── 12 · Entradas animadas ── */
@keyframes amm-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{animation:amm-rise .8s var(--ease) both}
.d1{animation-delay:.06s} .d2{animation-delay:.12s} .d3{animation-delay:.18s}
.d4{animation-delay:.24s} .d5{animation-delay:.3s} .d6{animation-delay:.36s}
.d7{animation-delay:.42s} .d8{animation-delay:.48s}
/* ── 13 · Accesibilidad ── */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.media img{transform:none}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ── 14 · Utilidades ── */
.center{text-align:center}
.stack>*+*{margin-top:16px}
.hidden{display:none!important}
@media (max-width:640px){
/* El padding va en .wrap, NO en el body: si vuelve al body el pie deja
de estar a sangre justo en móvil, que es donde más se nota. */
.wrap{padding:28px 16px 48px}
.panel,.card{padding:24px 20px}
}
