/* Hoja del reglamento. Compartida por /reglamento/ y /en/reglamento/. */

:root{
  --ink:#0C0C0D; --bone:#F4F1EA; --paper:#FBF9F4;
  --soft:#55514A; --faint:#8A8478; --rule:#D9D4C7; --gold:#CA7F15;
  --marca:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --texto:'Hanken Grotesk', -apple-system, 'Helvetica Neue', sans-serif;
  --dato:'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;
  /* La medida vive en la columna, no en cada párrafo. Un tope en ch entrega
     un 12 % más de caracteres de los que dice, porque el cero de la fuente es
     más ancho que el carácter medio del español compuesto. */
  --columna: 38rem;   /* 608 px · 72 caracteres a 17 px */
  --cuerpo:  clamp(17px, 14px + 0.45vw, 19px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4F1EA; --bone:#0C0C0D; --paper:#141312;
    --soft:#C2BBAF; --faint:#8A8478; --rule:#2B2824; --gold:#F6A31D;
  }
}
:root[data-theme="dark"]{
  --ink:#F4F1EA; --bone:#0C0C0D; --paper:#141312;
  --soft:#C2BBAF; --faint:#8A8478; --rule:#2B2824; --gold:#F6A31D;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--texto); font-weight:300; font-size:var(--cuerpo); line-height:1.66;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
.hoja{max-width:920px; margin:0 auto; padding:64px 32px 120px}

/* ── cabecera ─────────────────────────────────────────────── */
.cabeza{display:flex; justify-content:space-between; align-items:flex-start; gap:24px}
/* Enlace real a la otra URL, no un cambio de textos: se comparte y se indexa. */
.idioma{
  font-family:var(--dato); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); text-decoration:none; white-space:nowrap;
  padding:10px 12px; margin:-8px -12px 0 0; flex:none; transition:color .18s;
}
.idioma:hover{color:var(--gold)}
.marca{
  font-family:var(--marca); font-weight:900; font-size:clamp(38px,7vw,58px);
  letter-spacing:.01em; line-height:1; margin:0;
}
.marca i{color:var(--gold); font-style:normal}
/* Logo horizontal (oct 2026): símbolo a la izquierda y «24·90 FC /
   FESTIVAL DE CINE». En un encabezado alineado a la izquierda se lee mejor
   que el apilado y ocupa menos alto. 5,07 em mantiene el nombre del ancho
   que tenía el logotipo en texto (el nombre es el 66 % del ancho total). */
.marca img{ width:5.07em; height:auto; display:block }
.cabeza .marca{ margin-bottom:22px }
.marca .oscuro{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca .claro{ display:none }
  :root:not([data-theme="light"]) .marca .oscuro{ display:block }
}
:root[data-theme="dark"] .marca .claro{ display:none }
:root[data-theme="dark"] .marca .oscuro{ display:block }
.rot{
  font-family:var(--dato); font-weight:500; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--faint); margin:12px 0 0;
}
h1{
  font-family:var(--marca); font-weight:700; font-size:clamp(26px,4vw,34px);
  letter-spacing:.02em; line-height:1.1; margin:28px 0 0; text-wrap:balance;
}
.entrada{font-size:21px; line-height:1.62; color:var(--soft); margin:18px 0 0}

/* ── tira de datos ────────────────────────────────────────── */
.tira{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-s);
  margin:44px 0 0; overflow:hidden;
}
.tira div{background:var(--paper); padding:15px 16px}
.tira dt{
  font-family:var(--dato); font-weight:500; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin:0 0 5px;
}
.tira dd{
  margin:0; font-size:15px; line-height:1.4; font-weight:400;
  font-variant-numeric:tabular-nums;
}

/* ── artículos ────────────────────────────────────────────── */
article{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:0 22px;
  padding:34px 0 0; margin:34px 0 0; border-top:1px solid var(--rule);
}
.num{
  font-family:var(--dato); font-weight:500; font-size:12px; letter-spacing:.1em;
  color:var(--faint); padding-top:6px; font-variant-numeric:tabular-nums;
}
article h2{
  grid-column:2; font-family:var(--marca); font-weight:700; font-size:25px;
  letter-spacing:.02em; margin:0 0 12px; text-wrap:balance;
}
article > :not(h2):not(.num){grid-column:2}
article p{margin:0 0 12px}
article p:last-child{margin-bottom:0}
b, strong{font-weight:500}

/* Misma composición que la landing: bandera a la izquierda, sin partición
   automática, y equilibrio de líneas en los títulos. */
/* Mismo criterio que la landing: justificado en todo el texto corrido y en
   todos los anchos, sostenido por la partición. El número de artículo queda
   fuera porque es un rótulo, no texto. */
:where(p:not(.num), li, dd, .entrada, .aviso){
  text-align:justify; text-wrap:normal;
  hyphens:auto; hyphenate-limit-chars:8 4 3;
}
@media (max-width:620px){
  :where(p:not(.num), li, dd, .entrada, .aviso){hyphenate-limit-chars:6 3 3}
}
.cifra{font-variant-numeric:tabular-nums; white-space:nowrap}

ul{margin:4px 0 12px; padding:0; list-style:none}
li{position:relative; padding-left:20px; margin:0 0 7px}
li::before{
  content:''; position:absolute; left:2px; top:.72em; width:5px; height:5px;
  border-radius:50%; background:var(--rule);
}
li:last-child{margin-bottom:0}

.secciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;
  margin:6px 0 14px;
}
.sec{border:1px solid var(--rule); border-radius:var(--r-s); padding:16px 17px; background:var(--paper)}
.sec h3{font-family:var(--marca); font-weight:700; font-size:21px; letter-spacing:.02em; margin:0}
.sec .en{
  font-family:var(--dato); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:3px 0 9px;
}
.sec p{font-size:14.5px; line-height:1.55; color:var(--soft); margin:0; width:auto}

.aviso{
  border-left:2px solid var(--gold); padding:2px 0 2px 16px; margin:14px 0;
  color:var(--soft); font-size:var(--cuerpo);
}
.aviso b{color:var(--ink)}

/* Botón de inscripción. Va aquí porque las bases en Festhome remiten a esta
   página: es donde un cineasta termina de leer y quiere inscribirse. Dos
   archivos porque el botón trae fondo propio, blanco o gris oscuro, y hay
   que servir el que contrasta con el tema en curso. */
.festhome{ margin-top:56px; padding-top:34px; border-top:1px solid var(--rule); display:flex; justify-content:center }
.festhome a{ display:block; max-width:100% }
.festhome img{ width:263px; max-width:100%; height:auto; display:block; opacity:.85; transition:opacity .2s }
.festhome a:hover img, .festhome a:focus-visible img{ opacity:1 }
.festhome .oscuro{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .festhome .claro{ display:none }
  :root:not([data-theme="light"]) .festhome .oscuro{ display:block }
}
:root[data-theme="dark"] .festhome .claro{ display:none }
:root[data-theme="dark"] .festhome .oscuro{ display:block }
footer{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--rule);
  font-family:var(--dato); font-size:11px; letter-spacing:.07em; color:var(--faint);
  line-height:1.9;
}
a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--r-s)}

@media (max-width:620px){
  .hoja{padding:44px 20px 90px}
  article{grid-template-columns:1fr; gap:0}
  article h2, article > :not(h2):not(.num){grid-column:1}
  .num{padding:0 0 6px}
}