/* LUMO: web clasica de MMORPG. Arte nocturno arriba, menu de madera a la izquierda, cajas con
   barra de titulo cafe y cuerpo de pergamino, y tablas en tonos crema. */
@font-face { font-family: "Martel"; src: url("/s/fuentes/martel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martel"; src: url("/s/fuentes/martel-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Martel"; src: url("/s/fuentes/martel-800.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("/s/fuentes/cinzel-decorative-900.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "Cormorant Garamond"; src: url("/s/fuentes/cormorant-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --fondo: #0d0f15;
  --madera: #5f4d41;
  --madera-oscura: #3b2c22;
  --madera-clara: #7c6450;
  --marco: #2a1f17;
  --oro: #d9ac55;
  --oro-claro: #f6dc9a;
  --oro-oscuro: #8f6a2c;
  --pergamino: #f1e0c6;
  --pergamino-2: #e4cfae;
  --pergamino-3: #d4c0a1;
  --linea-pergamino: #c4ab84;
  --tinta: #2b1d12;
  --tinta-suave: #5c4a3a;
  --enlace: #1a4f8f;
  --enlace-hover: #0b3666;
  --rojo: #8e2a1b;
  --verde: #2f7a2f;
  --titulo: "Martel", Georgia, "Times New Roman", serif;
  --texto: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --cursiva: "Cormorant Garamond", Georgia, serif;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 0L48 24L24 48L0 24Z' fill='none' stroke='%23d9ac55' stroke-opacity='.045' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='1.2' fill='%23d9ac55' fill-opacity='.06'/%3E%3C/svg%3E") center top / 48px 48px, var(--fondo);
  color: var(--tinta);
  font: 14px/1.6 var(--texto);
}
/* el arte de LUMO arriba de todo, fundido con el fondo */
.arte {
  position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 15, 21, 0) 55%, var(--fondo) 100%), linear-gradient(90deg, rgba(13, 15, 21, 0.55), rgba(13, 15, 21, 0) 35%), url("/s/escena.svg") center 30% / cover no-repeat;
}
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--enlace-hover); text-decoration: underline; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
p { margin: 0 0 12px; }
strong { font-weight: 700; }
.centro { text-align: center; }
.derecha { text-align: right; }
.pequeno { font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.ancho { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------------ cima: logo sobre el arte */
.cima { position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; min-height: 300px; padding-top: 22px; padding-bottom: 22px; }
.marca { display: inline-flex; }
.marca:hover { text-decoration: none; }
.logo { height: 118px; width: auto; overflow: visible; }
.logo-letras { font-family: "Cinzel Decorative", Georgia, serif; font-weight: 900; font-size: 128px; letter-spacing: 6px; }
.lema-cima { font-family: var(--cursiva); font-style: italic; font-weight: 500; font-size: 22px; color: var(--oro-claro); margin: 0 0 0 30px; text-shadow: 0 2px 8px #000; }
.solo-movil { display: none !important; }
.menu-movil { display: none; }

/* ------------------------------------------------------------------ tres columnas */
.columnas { display: grid; grid-template-columns: 190px minmax(0, 1fr) 230px; gap: 16px; align-items: start; padding-bottom: 40px; flex: 1; }
.col-centro { display: grid; gap: 16px; min-width: 0; }
.col-izq, .col-der { display: grid; gap: 14px; }

/* menu lateral de madera */
.menu-grupo {
  background: var(--grano), linear-gradient(180deg, #4a3a2e, #34271e);
  border: 1px solid #1c140e;
  box-shadow: inset 0 0 0 1px rgba(217, 172, 85, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.menu-cabeza {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 9px 12px;
  background: linear-gradient(180deg, #8a6a46 0%, #5f4630 50%, #4a3424 100%);
  border-bottom: 1px solid #1c140e;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.35);
  font-family: var(--titulo); font-weight: 700; font-size: 14px; color: var(--oro-claro); text-shadow: 0 1px 2px #000;
}
.menu-cabeza svg { width: 18px; height: 18px; color: var(--oro); flex: none; }
.menu-grupo a, .enlace-menu {
  display: block; width: 100%; text-align: left; padding: 6px 12px 6px 22px; position: relative;
  color: #f1e3c8; font: 13px/1.4 var(--texto); background: none; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.35); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.06);
}
.menu-grupo a::before, .enlace-menu::before { content: ""; position: absolute; left: 10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--oro-oscuro); rotate: 45deg; }
.menu-grupo a:hover, .enlace-menu:hover { color: #fff; background: rgba(255, 220, 150, 0.08); text-decoration: none; }
.menu-grupo a[aria-current="page"] { color: var(--oro-claro); background: rgba(0, 0, 0, 0.25); font-weight: 700; }
.menu-grupo a[aria-current="page"]::before { background: var(--oro-claro); }
.menu-grupo form { margin: 0; }

/* ------------------------------------------------------------------ cajas */
.caja {
  position: relative;
  background: var(--pergamino);
  border: 1px solid var(--marco);
  box-shadow: inset 0 0 0 1px rgba(217, 172, 85, 0.5), 0 6px 16px rgba(0, 0, 0, 0.55);
}
.caja-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 14px;
  background: var(--grano), linear-gradient(180deg, #7a5b3e 0%, #5f4531 45%, #46321f 100%);
  border-bottom: 1px solid var(--marco);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.35), inset 0 0 0 1px rgba(217, 172, 85, 0.25);
}
.caja-barra { padding-left: 30px; padding-right: 30px; }
.caja-barra h1::before, .caja-barra h2::before, .plegable > summary span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 0; rotate: 45deg;
  background: linear-gradient(135deg, #fff1c4, #b98d45); box-shadow: 0 0 0 1px #2a1503; vertical-align: middle;
}
.caja-barra h1, .caja-barra h2, .caja-barra span {
  margin: 0; font-family: var(--titulo); font-weight: 700; font-size: 15px; line-height: 1.5;
  color: #fff3d6; text-shadow: 0 1px 2px #000;
}
.caja-barra .boton { flex: none; }
.caja-cuerpo {
  padding: 18px;
  background: var(--grano), var(--pergamino);
  border: 1px solid #fff6e4;
  border-top: 0;
  box-shadow: inset 0 0 34px rgba(140, 95, 40, 0.28);
}
/* esquinas de metal dorado con remache */
.caja::before {
  content: ""; position: absolute; inset: -5px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.45' stop-color='%23d9ac55'/%3E%3Cstop offset='1' stop-color='%236e4310'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=''%3E%3Cpath d='M1.5 28.5V8.5a7 7 0 0 1 7-7h20v5.5H10a3 3 0 0 0-3 3v18.5z' fill='url(%23g)' stroke='%232a1503' stroke-width='1.3'/%3E%3Cpath d='M5 24V9.5A4.5 4.5 0 0 1 9.5 5H24' fill='none' stroke='%23fff3c8' stroke-width='.8' opacity='.7'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.4' fill='%23f6dc9a' stroke='%232a1503' stroke-width='1.2'/%3E%3Ccircle cx='7.7' cy='7.7' r='1.1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") left top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.45' stop-color='%23d9ac55'/%3E%3Cstop offset='1' stop-color='%236e4310'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(30 0) scale(-1 1)'%3E%3Cpath d='M1.5 28.5V8.5a7 7 0 0 1 7-7h20v5.5H10a3 3 0 0 0-3 3v18.5z' fill='url(%23g)' stroke='%232a1503' stroke-width='1.3'/%3E%3Cpath d='M5 24V9.5A4.5 4.5 0 0 1 9.5 5H24' fill='none' stroke='%23fff3c8' stroke-width='.8' opacity='.7'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.4' fill='%23f6dc9a' stroke='%232a1503' stroke-width='1.2'/%3E%3Ccircle cx='7.7' cy='7.7' r='1.1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") right top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.45' stop-color='%23d9ac55'/%3E%3Cstop offset='1' stop-color='%236e4310'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(0 30) scale(1 -1)'%3E%3Cpath d='M1.5 28.5V8.5a7 7 0 0 1 7-7h20v5.5H10a3 3 0 0 0-3 3v18.5z' fill='url(%23g)' stroke='%232a1503' stroke-width='1.3'/%3E%3Cpath d='M5 24V9.5A4.5 4.5 0 0 1 9.5 5H24' fill='none' stroke='%23fff3c8' stroke-width='.8' opacity='.7'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.4' fill='%23f6dc9a' stroke='%232a1503' stroke-width='1.2'/%3E%3Ccircle cx='7.7' cy='7.7' r='1.1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") left bottom / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.45' stop-color='%23d9ac55'/%3E%3Cstop offset='1' stop-color='%236e4310'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(30 30) scale(-1 -1)'%3E%3Cpath d='M1.5 28.5V8.5a7 7 0 0 1 7-7h20v5.5H10a3 3 0 0 0-3 3v18.5z' fill='url(%23g)' stroke='%232a1503' stroke-width='1.3'/%3E%3Cpath d='M5 24V9.5A4.5 4.5 0 0 1 9.5 5H24' fill='none' stroke='%23fff3c8' stroke-width='.8' opacity='.7'/%3E%3Ccircle cx='8.5' cy='8.5' r='3.4' fill='%23f6dc9a' stroke='%232a1503' stroke-width='1.2'/%3E%3Ccircle cx='7.7' cy='7.7' r='1.1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") right bottom / 30px 30px no-repeat;
}
.caja-lateral::before { inset: -4px; background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px; }
.caja-cuerpo > :last-child { margin-bottom: 0; }
.caja-cuerpo h2 { font-size: 17px; color: var(--madera-oscura); }
.caja-cuerpo h3 { font-size: 15px; color: var(--madera-oscura); }

/* caja de la columna derecha */
.caja-lateral .caja-barra { padding: 5px 12px; }
.caja-lateral .caja-barra h2 { font-size: 13.5px; }
.caja-lateral .caja-cuerpo { padding: 12px; font-size: 13px; }
.jugar-caja {
  padding: 14px 12px 10px; text-align: center;
  background: var(--grano), linear-gradient(180deg, #4a3a2e, #2c2018);
  border: 1px solid #1c140e; box-shadow: inset 0 0 0 1px rgba(217, 172, 85, 0.45), 0 6px 16px rgba(0, 0, 0, 0.55);
}
.jugar-caja .boton { width: 100%; }
.jugar-caja p { margin: 8px 0 0; color: #e8d6b4; font-size: 12px; }
.estado-servidor { display: flex; align-items: center; font-weight: 700; margin-bottom: 6px; }
.estado-servidor.on { color: var(--verde); }
.estado-servidor.off { color: var(--rojo); }
.ancho-total { width: 100%; }

.top { margin: 0 0 10px; padding: 0; list-style: none; counter-reset: top; }
.top li { counter-increment: top; display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--linea-pergamino); font-size: 13px; }
.top li:last-child { border-bottom: 0; }
.top li::before { content: counter(top) "."; grid-row: span 2; font-weight: 700; color: var(--madera); }
.top li a { font-weight: 700; }
.top li span { color: var(--tinta-suave); font-size: 11.5px; }
.mas { font-weight: 700; font-size: 12.5px; }
.mas::after { content: " »"; }
.mas.atras::after { content: ""; }
.mas.atras::before { content: "« "; }

/* ------------------------------------------------------------------ botones */
button { font: inherit; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 18px;
  border: 1px solid #1a0d07; border-radius: 4px;
  background: linear-gradient(180deg, #c2452a 0%, #9a2c18 48%, #7a1d0e 52%, #5e1408 100%);
  color: #ffeec8; font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0 1px rgba(246, 200, 120, 0.75), inset 0 2px 0 rgba(255, 220, 170, 0.35), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.boton:hover { color: #fff; text-decoration: none; filter: brightness(1.12); }
.boton:active { filter: brightness(0.95); box-shadow: inset 0 0 0 1px rgba(246, 200, 120, 0.75), inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.boton.jugar {
  background: linear-gradient(180deg, #ffe7a3 0%, #f0bd4f 45%, #cf8a1c 55%, #a8650f 100%);
  color: #2a1503; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.7); border-color: #3a2208;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 210, 0.85), 0 0 16px rgba(255, 180, 70, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.boton.jugar:hover { color: #1a0d02; }
.boton.chico { min-height: 30px; padding: 4px 14px; font-size: 12.5px; }
.boton.grande { min-height: 48px; padding: 10px 22px; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; }
.boton.peligro { background: linear-gradient(180deg, #6b6b6b, #3d3d3d 50%, #2a2a2a); }
.enlace { background: none; border: 0; padding: 0; color: var(--enlace); cursor: pointer; font: inherit; }
.enlace:hover { text-decoration: underline; }
.enlace.peligro { color: var(--rojo); font-weight: 700; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ------------------------------------------------------------------ portada */
.caja-bienvenida .caja-cuerpo { padding: 0; }
.estandarte { position: relative; min-height: 250px; display: flex; align-items: flex-end; overflow: hidden; background: #0d0f15; }
.estandarte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 45%; }
.estandarte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 5, 0.9) 0%, rgba(8, 6, 5, 0.55) 55%, rgba(8, 6, 5, 0.05) 100%); }
.estandarte-texto { position: relative; padding: 26px 22px 22px; max-width: 430px; color: #ecdcbc; text-shadow: 0 1px 3px #000; }
.estandarte-lema { font-family: var(--cursiva); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--oro-claro); margin-bottom: 8px; }
.estandarte .acciones { margin-top: 16px; }

.noticia + .noticia { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--linea-pergamino); }
.noticia-cabeza { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linea-pergamino); }
.noticia-cabeza h3 { margin: 0; font-size: 16px; }
.noticia-cabeza h3 a { color: var(--madera-oscura); }
.noticia-cabeza h3 a:hover { color: var(--enlace); }
.noticia-fecha { font-size: 12px; font-weight: 700; color: #fff; background: var(--madera); padding: 1px 8px; border-radius: 2px; white-space: nowrap; }
.noticia-texto p { text-align: justify; hyphens: auto; }
.noticia-firma { font-style: italic; color: var(--tinta-suave); text-align: right; font-size: 13px; }

.vocaciones { display: grid; gap: 1px; background: var(--linea-pergamino); border: 1px solid var(--linea-pergamino); }
.voc { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 10px 12px; background: var(--pergamino); }
.voc:nth-child(even) { background: var(--pergamino-3); }
.voc h3 { margin: 0 0 2px; font-size: 15px; color: var(--madera-oscura); }
.voc p { margin: 0; font-size: 13px; }
.emblema {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a4636, #2a1d14);
  border: 2px solid var(--oro-oscuro); box-shadow: inset 0 0 0 1px rgba(255, 230, 170, 0.4), 0 2px 4px rgba(0, 0, 0, 0.35);
  color: var(--color);
}
.emblema svg { width: 22px; height: 22px; }
.voc-caballero { --color: #ff9a7a; }
.voc-paladin { --color: #b6e38a; }
.voc-hechicero { --color: #f597d8; }
.voc-druida { --color: #86e1ee; }
.voc-monje { --color: #ffd27a; }

.pasos { margin: 0; padding-left: 22px; }
.pasos li { margin-bottom: 8px; }
.pasos li::marker { font-weight: 700; color: var(--madera); }

/* ------------------------------------------------------------------ tablas */
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--madera); }
.tabla th, .tabla td { padding: 5px 9px; text-align: left; border: 1px solid #faf0dc; }
.tabla thead th { background: var(--madera); color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.tabla tbody tr:nth-child(odd) { background: var(--pergamino); }
.tabla tbody tr:nth-child(even) { background: var(--pergamino-3); }
.tabla tbody tr:hover { background: #ead6b4; }
.tabla td a { font-weight: 700; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td:first-child.num { width: 1%; color: var(--tinta-suave); }
.tabla.ficha th { width: 34%; background: var(--pergamino-3); color: var(--tinta); font-weight: 700; }
.tabla.ficha tbody tr:nth-child(n) { background: var(--pergamino); }
.fecha-celda { white-space: nowrap; color: var(--tinta-suave); width: 1%; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; }
.punto.on { background: #36b336; box-shadow: 0 0 0 2px rgba(54, 179, 54, 0.25); }
.punto.off { background: #c0392b; box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25); }
.etiqueta { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 2px; vertical-align: middle; }
.etiqueta.on { background: var(--verde); color: #fff; }

.filtro { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 12px; padding: 10px 12px; background: var(--pergamino-2); border: 1px solid var(--linea-pergamino); }
.filtro label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.filtro select { width: auto; min-height: 30px; padding: 3px 28px 3px 8px; }
.paginas { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 10px; font-weight: 700; }
.paginas a, .paginas span { min-width: 28px; height: 28px; display: grid; place-content: center; padding: 0 6px; border: 1px solid var(--linea-pergamino); background: var(--pergamino-2); }
.paginas span { background: var(--madera); color: #fff; border-color: var(--madera); }

.buscador { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.buscador label { font-weight: 700; }
.buscador input { flex: 1; min-width: 160px; }

.texto h2 { margin: 18px 0 6px; font-size: 16px; color: var(--madera-oscura); border-bottom: 1px solid var(--linea-pergamino); padding-bottom: 4px; }
.texto ul { margin: 0 0 12px; padding-left: 22px; }
.texto li { margin-bottom: 5px; }

.aviso { padding: 8px 12px; margin: 0 0 12px; border: 1px solid; font-weight: 700; }
.aviso.ok { color: #1f5a1f; background: #dcefcf; border-color: #8cbf78; }
.aviso.error { color: #7a1b10; background: #f6d3c8; border-color: #d48a78; }

/* ------------------------------------------------------------------ formularios */
.caja-formulario .caja-cuerpo { max-width: 100%; }
.formulario { display: grid; gap: 14px; max-width: 520px; }
.formulario.compacto { gap: 8px; }
.formulario.compacto label { font-size: 12px; }
.formulario.compacto input { min-height: 30px; padding: 4px 8px; font-size: 13px; }
label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; color: var(--tinta); }
.ayuda { font-weight: 400; color: var(--tinta-suave); font-size: 12px; }
input, select, textarea {
  font: 14px var(--texto); color: var(--tinta);
  background: #fffaf0; border: 1px solid var(--madera-clara); border-radius: 2px;
  padding: 6px 9px; min-height: 34px; width: 100%;
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.25);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--madera-oscura); box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.25), 0 0 0 2px rgba(217, 172, 85, 0.55); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f4d41' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }
textarea { resize: vertical; min-height: 200px; line-height: 1.5; }
input[type="radio"], input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--madera); box-shadow: none; flex: none; }
fieldset { border: 1px solid var(--linea-pergamino); background: var(--pergamino-2); padding: 8px 12px 10px; margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.opcion { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; min-height: 30px; }
.elegir-voc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.elegir-sexo { display: flex; gap: 24px; }
.acepto { font-size: 13px; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario > .boton { justify-self: start; min-width: 160px; }
.formulario.compacto > .boton { justify-self: stretch; }

.plegable > summary { cursor: pointer; list-style: none; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "+"; color: var(--oro-claro); font: 700 18px/1 var(--texto); text-shadow: 0 1px 2px #000; }
.plegable[open] > summary::after { content: "−"; }
.plegable:not([open]) > summary { border-bottom: 0; }
.plegable.peligro > summary span { color: #ffc7b5; }

/* ------------------------------------------------------------------ pie */
.pie { background: #07080c; border-top: 1px solid #2a1f17; color: #a89a83; font-size: 12.5px; padding: 18px 0; }
.pie a { color: #d9c49b; }

/* ------------------------------------------------------------------ pantallas medianas y chicas */
@media (max-width: 1000px) {
  .columnas { grid-template-columns: 180px minmax(0, 1fr); }
  .col-der { grid-column: 2; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .arte { height: 340px; }
  .cima { flex-direction: row; justify-content: space-between; min-height: 0; padding-top: 12px; padding-bottom: 12px; position: sticky; top: 0; z-index: 10; background: rgba(13, 15, 21, 0.92); max-width: none; border-bottom: 1px solid #2a1f17; }
  .logo { height: 50px; }
  .lema-cima { display: none; }
  .solo-movil { display: inline-flex !important; }
  .menu-movil { display: block; position: relative; }
  .menu-movil summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--oro-oscuro); background: linear-gradient(180deg, #5f4531, #3b2c22); }
  .menu-movil summary::-webkit-details-marker { display: none; }
  .menu-movil summary span { display: block; width: 18px; height: 2px; background: var(--oro-claro); }
  .menu-movil nav { position: absolute; top: 50px; left: 0; min-width: 240px; padding: 6px 0; text-align: left; background: var(--grano), linear-gradient(180deg, #4a3a2e, #34271e); border: 1px solid #1c140e; box-shadow: inset 0 0 0 1px rgba(217, 172, 85, 0.35), 0 16px 30px rgba(0, 0, 0, 0.6); }
  .menu-movil nav a, .menu-movil .enlace-menu { display: block; padding: 11px 16px; color: #f1e3c8; border-top: 1px solid rgba(0, 0, 0, 0.3); font-size: 15px; }
  .menu-movil nav a[aria-current="page"] { color: var(--oro-claro); font-weight: 700; }
  .menu-movil .enlace-menu::before { display: none; }
  .columnas { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .col-izq { display: none; }
  .col-der { grid-column: auto; }
  .estandarte { min-height: 420px; }
  .estandarte img { object-position: 72% 0; }
  .estandarte::before { background: linear-gradient(0deg, rgba(8, 6, 5, 0.95) 0%, rgba(8, 6, 5, 0.78) 45%, rgba(8, 6, 5, 0.15) 75%, rgba(8, 6, 5, 0) 100%); }
  .estandarte-texto { max-width: none; }
  .estandarte .acciones .boton { flex: 1; }
  .elegir-voc { grid-template-columns: 1fr; }
  .ocultar-movil { display: none; }
  .tabla th, .tabla td { padding: 7px 8px; }
  .formulario > .boton { justify-self: stretch; }
  input, select, textarea { min-height: 42px; font-size: 16px; }
}

/* ------------------------------------------------------------------ detalle */
/* letra capitular de las noticias */
.noticia-texto > p:first-child::first-letter {
  float: left; margin: 4px 10px 0 0; padding: 6px 9px 4px;
  font: 900 40px/1 "Cinzel Decorative", Georgia, serif; color: #f6dc9a;
  background: radial-gradient(circle at 35% 30%, #5f4630, #2a1d14 75%);
  border: 2px solid var(--oro-oscuro); box-shadow: inset 0 0 0 1px rgba(255, 230, 170, 0.45), 2px 2px 0 rgba(60, 35, 10, 0.35);
  text-shadow: 0 2px 0 #1a0f06;
}
.noticia-texto p { overflow: visible; }
.adorno-separador { display: none; }
.noticia + .noticia { border-top: 0; padding-top: 6px; }
.noticia + .noticia .adorno-separador { display: block; height: 14px; margin: 0 auto 14px; width: 240px; max-width: 80%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%238f6a2c' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238f6a2c'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%238f6a2c' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238f6a2c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='6.5' width='100' height='1' fill='url(%23a)'/%3E%3Crect x='140' y='6.5' width='100' height='1' fill='url(%23b)'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%238f6a2c'/%3E%3Cpath d='M106 5l2 2-2 2-2-2zM134 5l2 2-2 2-2-2z' fill='%23b98d45'/%3E%3C/svg%3E") center / contain no-repeat; }

/* cifras bajo el estandarte */
.cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0;
  background: var(--grano), linear-gradient(180deg, #3d2d21, #241a12);
  border-top: 1px solid #1c140e; box-shadow: inset 0 1px 0 rgba(217, 172, 85, 0.45);
}
.cifras div { display: flex; flex-direction: column-reverse; align-items: center; padding: 10px 6px 9px; text-align: center; }
.cifras div + div { border-left: 1px solid rgba(0, 0, 0, 0.45); box-shadow: inset 1px 0 0 rgba(217, 172, 85, 0.18); }
.cifras dt { color: #cdb894; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.cifras dd { margin: 0; font: 800 22px/1.2 var(--titulo); color: var(--oro-claro); text-shadow: 0 1px 2px #000; }
.caja-bienvenida .estandarte { border-bottom: 0; }

/* noticias breves */
.breves { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea-pergamino); }
.breves li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 6px 10px 6px 26px; position: relative; font-size: 13px; }
.breves li:nth-child(even) { background: var(--pergamino-3); }
.breves li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; rotate: 45deg; background: var(--madera); }
.breve-fecha { font-weight: 700; color: var(--tinta-suave); white-space: nowrap; font-size: 12px; }
.breves a { font-weight: 700; }

/* columna derecha */
.icono-caja { width: 30px; height: 30px; flex: none; padding: 5px; border-radius: 50%; color: var(--oro-claro); background: radial-gradient(circle at 40% 35%, #5f4630, #2a1d14); border: 1px solid var(--oro-oscuro); }
.destacada { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.destacada + .destacada { border-top: 1px solid var(--linea-pergamino); }
.destacada div { display: grid; line-height: 1.3; }
.destacada strong { color: var(--madera-oscura); font-family: var(--titulo); font-size: 14px; }
.destacada-tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave); font-weight: 700; }
.destacada.jefe .icono-caja { color: #ffb4a0; border-color: #8e2a1b; }
.suave-tinta { color: var(--tinta-suave); margin: 6px 0 0; }
.mundo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--linea-pergamino); border: 1px solid var(--linea-pergamino); }
.mundo div { display: flex; flex-direction: column-reverse; padding: 6px 8px; background: var(--pergamino); }
.mundo div:nth-child(2), .mundo div:nth-child(3) { background: var(--pergamino-3); }
.mundo dt { font-size: 10.5px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.mundo dd { margin: 0; font: 800 17px/1.2 var(--titulo); color: var(--madera-oscura); }

/* nota de la columna izquierda */
.nota-pruebas {
  position: relative; padding: 16px 14px 14px; text-align: center; font-size: 12.5px; line-height: 1.5;
  background: var(--grano), linear-gradient(180deg, #f3e4c9, #dcc39b);
  border: 1px solid #2a1f17; box-shadow: inset 0 0 0 1px rgba(255, 246, 228, 0.8), inset 0 0 24px rgba(140, 95, 40, 0.3), 0 6px 16px rgba(0, 0, 0, 0.5);
  rotate: -1.2deg;
}
.nota-pruebas .icono-caja { margin: -32px auto 6px; display: block; width: 36px; height: 36px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.nota-titulo { font: 700 14px var(--titulo); color: var(--madera-oscura); margin: 0 0 4px; }
.nota-pruebas p:last-child { margin: 0; }

/* sello de nuevo */
.sello-nuevo { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 0 7px; font: 700 10px/18px var(--texto); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: linear-gradient(180deg, #c2452a, #7a1d0e); border: 1px solid #f6c878; rotate: -4deg; }

/* menu: flecha al pasar */
.menu-grupo a:hover::before { background: var(--oro-claro); }
.menu-grupo { position: relative; }

/* pie */
.pie { padding: 0; background: var(--grano), linear-gradient(180deg, #0b0c11, #050608); border-top: 0; position: relative; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--oro-oscuro) 20%, var(--oro) 50%, var(--oro-oscuro) 80%, transparent); }
.pie-columnas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; padding-top: 30px; padding-bottom: 24px; }
.pie-marca .logo { height: 58px; margin-bottom: 6px; }
.pie-marca p { color: #a89a83; max-width: 300px; margin: 0; }
.pie nav { display: grid; gap: 6px; align-content: start; }
.pie-titulo { font: 700 14px var(--titulo); color: var(--oro-claro); margin: 0 0 4px; }
.pie-final { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 16px; border-top: 1px solid #1f1812; color: #7d715e; }
@media (max-width: 720px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: span 2; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifras div:nth-child(3) { border-left: 0; box-shadow: none; }
  .cifras div:nth-child(n + 3) { border-top: 1px solid rgba(0, 0, 0, 0.45); }
  .nota-pruebas { rotate: 0deg; }
}