/* La Matritense nº 7 — propuesta de web
   Colores del escudo: azul real, oro y el rojo del templo. Nunca negro puro. */
:root {
  --noche: #0f0e0c;
  --noche-2: #16151a;
  --azul: #24468f;
  --azul-hondo: #101a35;
  --oro: #d1aa55;
  --oro-claro: #ecd49a;
  --carmesi: #9c1f1f;
  --hueso: #f2ece0;
  --hueso-2: #e7dfcf;
  --papel: #d3c7af;         /* fondo de las franjas claras: pergamino apagado, para no chocar con las oscuras */
  --papel-claro: #e0d6c2;
  --papel-campo: #e9e1d1;
  --tinta: #1d1b18;
  --gris: #57514a;
  --linea: rgba(209, 170, 85, .28);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --ancho: 1180px;
  --cab: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--cab); }
body { margin: 0; background: var(--noche); color: var(--hueso); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
body.cargando { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; }
p, li, dd, summary, figcaption { text-wrap: pretty; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Pantalla de carga ---------- */
.carga { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 6px; background: radial-gradient(ellipse at 50% 40%, #1a2448 0%, var(--noche) 70%); transition: opacity .8s ease, visibility .8s; }
.carga.fuera { opacity: 0; visibility: hidden; }
.carga-signo { width: min(190px, 44vw); overflow: visible; }
.trazo { fill: none; stroke: var(--oro); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.compas { stroke-dasharray: 380; stroke-dashoffset: 380; transform-origin: 120px 30px; animation: trazar 1s .15s cubic-bezier(.6,0,.2,1) forwards, abrir 1s .15s cubic-bezier(.6,0,.2,1) both; }
.eje { stroke-dasharray: 50; stroke-dashoffset: 50; animation: trazar .4s .1s ease forwards; }
.escuadra { stroke-dasharray: 230; stroke-dashoffset: 230; animation: trazar .9s .75s cubic-bezier(.6,0,.2,1) forwards; }
.carga-g { font: 700 48px var(--serif); fill: var(--oro-claro); opacity: 0; animation: aparecer .6s 1.45s ease forwards; }
.carga-nombre { font: 600 clamp(26px, 5vw, 38px) var(--serif); letter-spacing: .04em; margin: 22px 0 0; opacity: 0; animation: subir .8s 1.55s ease forwards; }
.carga-nombre span { color: var(--oro); font-style: italic; }
.carga-lema { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--oro); margin: 0; opacity: 0; animation: subir .8s 1.75s ease forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes abrir { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cab); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(18px, 4vw, 48px); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.cabecera.solida { background: rgba(15, 14, 12, .92); backdrop-filter: blur(10px); border-color: var(--linea); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.marca img { width: 36px; }
.marca-texto { display: grid; line-height: 1.1; }
.marca-texto b { font: 600 22px var(--serif); }
.marca-texto small { font-size: 11px; letter-spacing: .08em; color: var(--oro); }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); font-size: 14px; }
.nav a { text-decoration: none; color: rgba(242, 236, 224, .78); position: relative; padding: 6px 0; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--oro); transform: scaleX(0); transition: transform .3s; }
.nav a:hover, .nav a.activo { color: var(--hueso); }
.nav a.activo::after, .nav a:hover::after { transform: scaleX(1); }
.nav-sep { width: 1px; height: 22px; background: var(--linea); }
.nav-biblio { color: var(--oro-claro) !important; }
.btn-acceso { font: 600 13px var(--sans); color: var(--noche); background: var(--oro); border: 0; border-radius: 2px; padding: 10px 16px; cursor: pointer; transition: background .2s; }
.btn-acceso:hover { background: var(--oro-claro); }
.menu-btn { display: none; }

/* ---------- Botones ---------- */
.btn { display: inline-block; font: 600 14px var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 15px 26px; border-radius: 2px; border: 1px solid var(--oro); cursor: pointer; transition: background .25s, color .25s; }
.btn-oro { background: var(--oro); color: var(--noche); }
.btn-oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); }
.btn-linea { background: transparent; color: var(--hueso); }
.btn-linea:hover { background: rgba(209, 170, 85, .14); }

/* ---------- Bienvenida ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: calc(var(--cab) + 30px) 20px 90px; background: radial-gradient(ellipse 70% 60% at 50% 30%, #1d2a57 0%, var(--azul-hondo) 45%, var(--noche) 100%); }
.hero-suelo { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform-origin: 50% 100%; transform: perspective(600px) rotateX(64deg); background: repeating-conic-gradient(#e9e2d3 0 25%, #121110 0 50%) 0 0 / 120px 120px; -webkit-mask: linear-gradient(to top, rgba(0,0,0,.55), transparent 85%); mask: linear-gradient(to top, rgba(0,0,0,.55), transparent 85%); animation: avanzar 30s linear infinite; }
@keyframes avanzar { to { background-position: 0 240px; } }
.hero-columna { position: absolute; bottom: 12%; width: clamp(34px, 4vw, 56px); height: 52%; background: linear-gradient(90deg, #6b5426, var(--oro) 35%, var(--oro-claro) 50%, #8b6c2e 80%); border-radius: 3px; opacity: .55; }
.hero-columna::before { content: ""; position: absolute; left: -10px; right: -10px; top: -14px; height: 16px; background: var(--oro); border-radius: 2px; }
.hero-columna span { position: absolute; top: -56px; left: 0; right: 0; font: 600 26px var(--serif); color: var(--oro-claro); }
.hero-columna.izq { left: clamp(14px, 12vw, 200px); }
.hero-columna.der { right: clamp(14px, 12vw, 200px); }
.hero-contenido { position: relative; max-width: 760px; }
.hero-escudo { width: clamp(96px, 13vw, 150px); margin: 0 auto 26px; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.antetitulo { font: 600 12px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--oro); margin-bottom: 18px; }
.hero h1 { font-size: clamp(54px, 9vw, 116px); font-weight: 600; letter-spacing: -.01em; margin-bottom: 18px; }
.hero h1 em { color: var(--oro); font-weight: 500; }
.hero-lema { font-size: clamp(17px, 1.6vw, 20px); color: rgba(242, 236, 224, .85); max-width: 580px; margin: 0 auto 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-bajar { position: absolute; bottom: 26px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 1px solid var(--linea); border-radius: 14px; }
.hero-bajar span { position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--oro); border-radius: 2px; animation: rueda 2s infinite; }
@keyframes rueda { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 48px); position: relative; }
.papel { background: var(--papel); color: var(--tinta); }
.papel .antetitulo { color: var(--carmesi); }
.noche { background: var(--noche); }
.noche + .noche { border-top: 1px solid var(--linea); }
.envoltura { max-width: var(--ancho); margin: 0 auto; }
.envoltura.estrecha { max-width: 820px; }
.dos { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.dos > * { min-width: 0; }
h2 { font-size: clamp(36px, 4.6vw, 60px); margin-bottom: 26px; }
.entrada { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; }
.entrada.ancha { max-width: 780px; }
.noche .entrada { color: rgba(242, 236, 224, .86); }
.datos { display: grid; gap: 0; margin: 34px 0 0; border-top: 1px solid rgba(29, 27, 24, .16); }
.datos div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(29, 27, 24, .16); }
.datos dt { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.datos dd { margin: 0; font-weight: 600; text-align: right; }
.foto-templo { margin: 0; }
.foto-templo img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border: 1px solid rgba(29,27,24,.2); padding: 10px; background: var(--papel-claro); box-shadow: 0 30px 60px -30px rgba(29,27,24,.45); }
.foto-templo figcaption { font-size: 13px; color: var(--gris); margin-top: 12px; }

.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 56px 0 40px; background: var(--linea); border: 1px solid var(--linea); }
.tres > * { min-width: 0; }
.tarjeta { background: var(--noche); padding: 38px 32px; transition: background .3s; }
.tarjeta:hover { background: var(--noche-2); }
.tarjeta svg { width: 44px; height: 44px; fill: none; stroke: var(--oro); stroke-width: 1.6; margin-bottom: 22px; }
.tarjeta h3 { font-size: 30px; }
.tarjeta p { color: rgba(242, 236, 224, .75); margin: 0; }
.nota { max-width: 760px; color: rgba(242, 236, 224, .7); font-style: italic; font-family: var(--serif); font-size: 21px; }

.valores { list-style: none; padding: 0; margin: 0; }
.valores li { padding: 16px 0 16px 34px; border-bottom: 1px solid rgba(29, 27, 24, .14); position: relative; }
.valores li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 10px; height: 10px; border: 1.5px solid var(--carmesi); transform: rotate(45deg); }
.valores b { font-family: var(--serif); font-size: 21px; }
.requisitos { background: var(--azul-hondo); color: var(--hueso); padding: clamp(30px, 4vw, 48px); border-top: 3px solid var(--oro); }
.requisitos h3 { font-size: 30px; }
.requisitos p { color: rgba(242, 236, 224, .8); }
.requisitos ul { padding-left: 20px; margin: 0 0 30px; }
.requisitos li { margin-bottom: 10px; }
.requisitos li::marker { color: var(--oro); }

.historia { background: linear-gradient(180deg, var(--noche) 0%, var(--azul-hondo) 100%); }
.linea { list-style: none; padding: 0; margin: 60px 0 0; position: relative; }
.linea::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 1px; background: var(--linea); }
.linea li { display: grid; grid-template-columns: 100px 1fr; gap: 38px; padding: 0 0 46px; position: relative; }
.linea li > * { min-width: 0; }
.linea li::before { content: ""; position: absolute; left: 113px; top: 14px; width: 11px; height: 11px; background: var(--noche); border: 2px solid var(--oro); transform: rotate(45deg); }
.anio { font: 600 34px/1 var(--serif); color: var(--oro); text-align: right; padding-top: 4px; }
.linea h3 { font-size: 28px; margin-bottom: 8px; }
.linea p { color: rgba(242, 236, 224, .78); max-width: 640px; margin: 0; }

.pasos { list-style: none; padding: 0; margin: 34px 0 0; }
.pasos li { padding: 18px 0 18px 30px; border-left: 1px solid rgba(156, 31, 31, .35); position: relative; }
.pasos li::before { content: ""; position: absolute; left: -5px; top: 26px; width: 9px; height: 9px; background: var(--carmesi); transform: rotate(45deg); }
.pasos h3 { font-size: 24px; margin-bottom: 4px; }
.pasos p { margin: 0; color: #4a453d; }
.formulario { background: var(--papel-claro); padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(29, 27, 24, .12); box-shadow: 0 30px 60px -36px rgba(29, 27, 24, .5); display: grid; gap: 16px; align-self: start; }
.formulario h3 { font-size: 30px; margin: 0 0 4px; }
.formulario label, .acceso label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: #4a453d; }
.formulario input, .formulario textarea, .acceso input, .acceso select { font: 400 16px var(--sans); color: var(--tinta); padding: 12px 14px; border: 1px solid rgba(29, 27, 24, .22); border-radius: 2px; background: var(--papel-campo); width: 100%; }
.formulario input:focus, .formulario textarea:focus, .acceso input:focus, .acceso select:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.formulario .check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.formulario .check input { width: auto; margin-top: 3px; }
.form-estado { margin: 0; font-size: 14px; min-height: 1.4em; color: var(--carmesi); }
.form-estado.ok { color: #2d6a3e; }

.ilustres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.ilustres > * { min-width: 0; }
.ilustres article { border: 1px solid var(--linea); padding: 34px 30px; position: relative; overflow: hidden; transition: border-color .3s, transform .3s; }
.ilustres article:hover { border-color: var(--oro); transform: translateY(-3px); }
.inicial { display: block; font: 600 66px/1 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--oro); margin-bottom: 16px; }
.ilustres h3 { font-size: 27px; }
.ilustres p { color: rgba(242, 236, 224, .74); margin: 0; }

.faq { border-top: 1px solid rgba(29, 27, 24, .18); margin-top: 40px; }
.faq details { border-bottom: 1px solid rgba(29, 27, 24, .18); }
.faq summary { list-style: none; cursor: pointer; font: 600 23px/1.3 var(--serif); padding: 22px 44px 22px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font: 400 30px var(--sans); color: var(--carmesi); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 44px 22px 0; color: #4a453d; margin: 0; }

.niveles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 54px; }
.niveles > * { min-width: 0; }
.nivel { display: flex; flex-direction: column; text-decoration: none; padding: 30px 26px; border: 1px solid var(--linea); background: linear-gradient(180deg, rgba(36,70,143,.16), transparent); transition: border-color .3s, background .3s; }
.nivel:hover { border-color: var(--oro); background: linear-gradient(180deg, rgba(36,70,143,.3), transparent); }
.nivel h3 { font-size: 28px; margin-top: 18px; }
.nivel p { color: rgba(242, 236, 224, .72); flex: 1; }
.nivel b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.candado { display: block; width: 22px; height: 18px; border: 1.6px solid var(--oro); border-radius: 2px; position: relative; margin-top: 10px; }
.candado::before { content: ""; position: absolute; left: 3px; bottom: 100%; width: 12px; height: 10px; border: 1.6px solid var(--oro); border-bottom: 0; border-radius: 8px 8px 0 0; transform: translateX(6px) rotate(18deg); transform-origin: 0 100%; }
.candado.cerrado::before { transform: none; }

/* ---------- Pie ---------- */
.pie { background: #0b0a09; border-top: 1px solid var(--linea); padding: 70px clamp(20px, 5vw, 48px) 30px; font-size: 15px; }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; }
.pie-rejilla > * { min-width: 0; }
.pie h4 { font-size: 13px; font-family: var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; }
.pie p { color: rgba(242, 236, 224, .75); }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--oro-claro); }
.pie-marca { display: flex; gap: 18px; align-items: center; }
.pie-marca img { width: 64px; }
.gle { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.gle img { width: 56px; border-radius: 2px; background: #fff; }
.gle span { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.pie-legal { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(242,236,224,.08); font-size: 13px; }
.pie-legal p { margin: 0; color: rgba(242, 236, 224, .5); }

/* ---------- Acceso ---------- */
.acceso { border: 0; padding: 0; background: transparent; color: var(--tinta); max-width: 420px; width: calc(100% - 32px); }
.acceso::backdrop { background: rgba(10, 12, 24, .78); backdrop-filter: blur(4px); }
.acceso-caja { background: var(--hueso); padding: 40px 34px 30px; display: grid; gap: 14px; position: relative; border-top: 3px solid var(--oro); }
.acceso-caja img { width: 54px; margin: 0 auto; }
.acceso-caja h3 { font-size: 32px; text-align: center; margin: 4px 0 0; }
.acceso-sub { text-align: center; color: var(--gris); margin: 0 0 6px; font-size: 15px; }
.cerrar { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--gris); }
.demo-aviso { font-size: 12px; color: var(--gris); margin: 0; text-align: center; }
.acceso .btn { width: 100%; }

/* ---------- Aparición al hacer scroll ---------- */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.revelar.visto { opacity: 1; transform: none; }

/* ---------- Pantallas medianas y móvil ---------- */
@media (max-width: 1100px) {
  .menu-btn { display: grid; place-content: center; gap: 7px; width: 46px; height: 46px; background: none; border: 1px solid var(--linea); border-radius: 2px; cursor: pointer; }
  .menu-btn span:not(.sr) { width: 20px; height: 1.5px; background: var(--hueso); transition: transform .3s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }
  .nav { position: fixed; inset: var(--cab) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 24px 26px; background: rgba(15, 14, 12, .98); border-bottom: 1px solid var(--linea); transform: translateY(-110%); visibility: hidden; transition: transform .4s, visibility .4s; font-size: 17px; }
  .nav.abierto { transform: none; visibility: visible; }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(242,236,224,.06); }
  .nav a::after { display: none; }
  .nav-sep { display: none; }
  .btn-acceso { margin-top: 18px; padding: 14px; font-size: 15px; }
  .cabecera { background: rgba(15, 14, 12, .92); }
  .niveles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .dos, .tres, .ilustres, .pie-rejilla { grid-template-columns: 1fr; }
  .ilustres { gap: 16px; }
  .linea::before { left: 6px; }
  .linea li { grid-template-columns: 1fr; gap: 6px; padding-left: 38px; }
  .linea li::before { left: 1px; top: 8px; }
  .anio { text-align: left; font-size: 28px; }
  .hero-columna { display: none; }
  .datos div { flex-direction: column; gap: 2px; }
  .datos dd { text-align: left; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .niveles { grid-template-columns: 1fr; }
  .marca-texto small { display: none; }
  .hero-cta .btn { flex: 1 1 100%; }
  .pie-legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; }
}

/* Segunda visita en la misma sesión: el signo aparece ya dibujado */
.carga.rapida *, .carga.rapida { animation-duration: .01ms !important; animation-delay: 0s !important; }

/* ---------- Biblioteca y área privada ---------- */
.bib-cab { padding: calc(var(--cab) + 70px) clamp(20px, 5vw, 48px) 60px; background: radial-gradient(ellipse 70% 90% at 50% 0%, #1d2a57 0%, var(--azul-hondo) 50%, var(--noche) 100%); }
.bib-cab h1 { font-size: clamp(46px, 6vw, 76px); }
.bib-cab .entrada { color: rgba(242,236,224,.85); max-width: 720px; }
.sesion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; padding: 16px 20px; border: 1px solid var(--linea); max-width: 760px; font-size: 15px; }
.sesion b { color: var(--oro-claro); }
.sesion button { font: 600 13px var(--sans); background: none; border: 1px solid var(--linea); color: var(--hueso); padding: 8px 14px; cursor: pointer; border-radius: 2px; }
.sesion button:hover { border-color: var(--oro); }
.bib { display: grid; grid-template-columns: 240px 1fr; gap: clamp(30px, 5vw, 70px); max-width: var(--ancho); margin: 0 auto; padding: 60px clamp(20px, 5vw, 48px) 120px; }
.bib > * { min-width: 0; }
.bib-menu { position: sticky; top: calc(var(--cab) + 24px); align-self: start; display: grid; gap: 2px; }
.bib-menu a { text-decoration: none; padding: 12px 14px; border-left: 2px solid transparent; color: rgba(242,236,224,.75); display: flex; justify-content: space-between; gap: 10px; }
.bib-menu a:hover { color: var(--hueso); border-color: var(--linea); }
.bib-menu a.bloqueado { color: rgba(242,236,224,.35); }
.bib-menu a small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.bib-nivel { padding-bottom: 60px; margin-bottom: 60px; border-bottom: 1px solid var(--linea); }
.bib-nivel h2 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 8px; }
.bib-nivel > p { color: rgba(242,236,224,.72); }
.docs { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--linea); }
.docs li { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--linea); }
.docs li > * { min-width: 0; }
.doc-ico { width: 34px; height: 42px; border: 1.4px solid var(--oro); border-radius: 2px; position: relative; font: 600 9px var(--sans); color: var(--oro); display: grid; place-items: end center; padding-bottom: 5px; letter-spacing: .06em; }
.docs h3 { font-size: 21px; margin: 0; }
.docs p { margin: 2px 0 0; font-size: 14px; color: rgba(242,236,224,.6); }
.docs a, .docs button.ver { font: 600 13px var(--sans); text-decoration: none; color: var(--noche); background: var(--oro); border: 0; padding: 9px 14px; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.pendiente-et { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-claro); border: 1px solid var(--linea); padding: 3px 8px; border-radius: 2px; }
.cerrojo { margin-top: 26px; padding: 34px; border: 1px dashed var(--linea); text-align: center; color: rgba(242,236,224,.7); }
.cerrojo .btn { margin-top: 10px; }
.subir { margin-top: 26px; display: grid; gap: 12px; padding: 26px; border: 1px dashed var(--oro); background: rgba(36,70,143,.12); }
.subir h3 { font-size: 24px; margin: 0; }
.subir-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.subir select, .subir input[type=file] { font: 400 15px var(--sans); color: var(--hueso); background: var(--noche); border: 1px solid var(--linea); padding: 10px; border-radius: 2px; max-width: 100%; }
.subir .btn { padding: 11px 18px; }
.subir small { color: rgba(242,236,224,.6); }
.moderacion { margin-top: 0; }
.moderacion .acciones { display: flex; gap: 8px; }
.moderacion .acciones button { font: 600 12px var(--sans); border: 1px solid var(--linea); background: none; color: var(--hueso); padding: 8px 12px; cursor: pointer; border-radius: 2px; }
.moderacion .acciones button.aprobar { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.vacio { color: rgba(242,236,224,.5); font-style: italic; padding: 16px 4px; }
@media (max-width: 860px) {
  .bib { grid-template-columns: 1fr; }
  .bib-menu { position: static; grid-template-columns: repeat(2, 1fr); }
  .docs li { grid-template-columns: 38px 1fr; }
  .docs li > :last-child { grid-column: 2; justify-self: start; }
}

/* Cursor de metal, al estilo Diablo: hierro y oro con gema; en lo que se pulsa, la gema y el filo se encienden */
html, body { cursor: url("../img/cursor.svg") 2 2, auto; }
a, button, summary, label, select, [data-abrir-acceso], .nivel { cursor: url("../img/cursor-activo.svg") 2 2, pointer; }
input:not([type=checkbox]):not([type=file]):not([type=radio]), textarea { cursor: text; }

/* Formulario de ingreso */
.form-intro { font-size: 14px; color: var(--gris); margin: -6px 0 4px; }
.form-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-par > * { min-width: 0; }
.formulario select { font: 400 16px var(--sans); color: var(--tinta); padding: 12px 14px; border: 1px solid rgba(29, 27, 24, .22); border-radius: 2px; background: var(--papel-campo); width: 100%; }
.opciones { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.opciones legend { font-size: 13px; font-weight: 600; letter-spacing: .03em; color: #4a453d; margin-bottom: 10px; padding: 0; }
.opciones label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; }
.opciones input, .formulario .check input { width: auto; accent-color: var(--carmesi); }
.formulario.revisado :invalid:not(fieldset):not(form) { border-color: var(--carmesi); }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-nota { font-size: 12px; color: var(--gris); margin: 0; }
.formulario button:disabled { opacity: .6; }
@media (max-width: 520px) { .form-par { grid-template-columns: 1fr; } }

/* Área privada */
.acceso-error { color: var(--carmesi); font-size: 14px; margin: 0; min-height: 1.2em; text-align: center; }
.aviso { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: var(--hueso); color: var(--tinta); padding: 12px 20px; border-left: 3px solid var(--oro); font-size: 15px; transition: opacity .3s, transform .3s; max-width: calc(100% - 32px); }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.mal { border-color: var(--carmesi); }
.docs .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.docs .acciones button, .docs .acciones select { font: 600 12px var(--sans); border: 1px solid var(--linea); background: var(--noche); color: var(--hueso); padding: 8px 12px; border-radius: 2px; }
.docs .acciones button.aprobar { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.docs .acciones button:hover { border-color: var(--oro); }
.docs li.inactivo { opacity: .5; }
.hermanos .doc-ico { font: 600 18px var(--serif); place-items: center; padding: 0; border-radius: 50%; width: 38px; height: 38px; }
.subir label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(242,236,224,.8); }
.subir input:not([type=file]), .subir select { font: 400 15px var(--sans); color: var(--hueso); background: var(--noche); border: 1px solid var(--linea); padding: 10px 12px; border-radius: 2px; width: 100%; }
.subir-fila select { width: auto; }
.subir-fila input[type=file] { flex: 1 1 240px; }
.subir .btn:disabled { opacity: .6; }
.alta-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.alta-rejilla > * { min-width: 0; }
.clave-nueva { font: 600 14px ui-monospace, Consolas, monospace; background: var(--hueso); color: var(--tinta); padding: 7px 10px; border-radius: 2px; user-select: all; }
.solicitudes { margin-top: 26px; border-top: 1px solid var(--linea); }
.solicitud { border-bottom: 1px solid var(--linea); }
.solicitud summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 4px; }
.solicitud summary::-webkit-details-marker { display: none; }
.solicitud summary b { font: 600 21px var(--serif); }
.solicitud summary span { font-size: 13px; color: rgba(242,236,224,.55); }
.solicitud.nueva summary span { color: var(--oro); }
.solicitud dl { display: grid; gap: 10px; margin: 0 0 18px; padding: 0 4px; }
.solicitud dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.solicitud dd { margin: 2px 0 0; color: rgba(242,236,224,.85); white-space: pre-line; }
.solicitud .btn { margin: 0 4px 18px; padding: 10px 16px; font-size: 12px; }
@media (max-width: 640px) { .alta-rejilla { grid-template-columns: 1fr; } .docs .acciones { justify-content: flex-start; } }

/* Cortes entre secciones: siluetas de Madrid, soportales y frontón (img/corte-*.svg, como máscara) */
.corte { position: absolute; left: 0; right: 0; bottom: -1px; pointer-events: none; z-index: 2; }
.corte-madrid { height: clamp(80px, 11vw, 160px); -webkit-mask: url(../img/corte-madrid.svg) center bottom / max(100%, 760px) 100% no-repeat; mask: url(../img/corte-madrid.svg) center bottom / max(100%, 760px) 100% no-repeat; }
.corte-arcos { height: clamp(34px, 4.4vw, 64px); -webkit-mask: url(../img/corte-arcos.svg) left bottom / auto 100% repeat-x; mask: url(../img/corte-arcos.svg) left bottom / auto 100% repeat-x; }
.corte-fronton { height: clamp(34px, 6vw, 90px); -webkit-mask: url(../img/corte-fronton.svg) center bottom / 100% 100% no-repeat; mask: url(../img/corte-fronton.svg) center bottom / 100% 100% no-repeat; }
.a-papel { background: var(--papel); }
.a-noche { background: var(--noche); }
.a-pie { background: #0b0a09; }
.seccion:has(> .corte) { padding-bottom: calc(clamp(80px, 11vw, 140px) + clamp(40px, 7vw, 110px)); }
.hero .corte-madrid { z-index: 1; }
.noche + .noche { border-top: 0; }
.pie { border-top: 0; }
.pie { background: var(--azul-hondo); }
.a-pie { background: var(--azul-hondo); }
.pie-legal { border-top-color: rgba(242,236,224,.1); }
#ingreso .dos { align-items: start; }
#ingreso .dos > div:first-child { position: sticky; top: calc(var(--cab) + 30px); }
@media (max-width: 860px) { #ingreso .dos > div:first-child { position: static; } }