/*
 * Hermandad — Grupos
 * Traducción a CSS de producción de DESIGN-SYSTEM.md y PLUGIN-GRUPOS.md
 * (índice, ficha y formulario). Ni un color ni una tipografía fuera de la
 * tabla del sistema de diseño; los tres puntos de ruptura (900 / 760 /
 * 620px) son media queries reales, no JavaScript.
 */

.hg-scope {
	--hg-marfil: #f4f0e7;
	--hg-verde: #0e2a20;
	--hg-verde-profundo: #081913;
	--hg-titulares: #1b1a17;
	--hg-articulado: rgba(27, 26, 23, .80);
	--hg-secundario: rgba(27, 26, 23, .68);
	--hg-metadatos: rgba(27, 26, 23, .50);
	--hg-discreto: rgba(27, 26, 23, .45);
	--hg-enlace: #7d5411;
	--hg-acento: #b68235;
	--hg-filete: rgba(27, 26, 23, .12);
	--hg-filete-interno: rgba(27, 26, 23, .10);
	--hg-borde-caja: rgba(27, 26, 23, .16);
	--hg-subrayado: rgba(125, 84, 17, .35);
	--hg-verde-texto: #f4f0e7;
	--hg-verde-parrafo: rgba(244, 240, 231, .82);
	--hg-verde-metadatos: rgba(244, 240, 231, .50);
	--hg-verde-acento: #d8b26a;
	--hg-verde-epigrafe: rgba(216, 178, 106, .85);
	--hg-verde-filete: rgba(244, 240, 231, .16);
	--hg-verde-borde: rgba(244, 240, 231, .20);
	--hg-foco: #b68235;
	--hg-font-heading: "Cormorant Garamond", Georgia, serif;
	--hg-font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
	--hg-margen: clamp(20px, 5vw, 80px);
	--hg-separacion: clamp(40px, 6vw, 100px);

	font-family: var(--hg-font-body);
	color: var(--hg-titulares);
}

.hg-scope, .hg-scope *, .hg-scope *::before, .hg-scope *::after { box-sizing: border-box; }
.hg-scope, .hg-scope * { border-radius: 0 !important; box-shadow: none !important; }
.hg-scope a { text-decoration: none; color: inherit; }
.hg-scope button { font: inherit; border-radius: 0; cursor: pointer; }
.hg-scope p, .hg-scope h1, .hg-scope h2 { margin: 0; padding: 0; }
.hg-scope img { max-width: 100%; display: block; }

.hg-scope :focus { outline: none; }
.hg-scope :focus-visible {
	outline: 2px solid var(--hg-foco);
	outline-offset: 2px;
}

/* ================= Índice ================= */

.hg-indice__cabecera {
	padding: clamp(48px, 8vw, 130px) var(--hg-margen) clamp(28px, 4vw, 52px);
	border-bottom: 1px solid var(--hg-filete);
}

.hg-indice__kicker {
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--hg-enlace);
	margin-bottom: 24px !important;
}

.hg-indice__cabecera-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
	gap: clamp(24px, 4vw, 72px);
	align-items: end;
}

.hg-indice__titulo {
	font-family: var(--hg-font-heading);
	font-weight: 400;
	font-size: clamp(44px, 9vw, 140px);
	line-height: .9;
	letter-spacing: -.02em;
}

.hg-indice__intro {
	font-size: 15px;
	line-height: 1.9;
	color: var(--hg-secundario);
	max-width: 46ch;
	text-wrap: pretty;
}

.hg-indice__filtros {
	padding: clamp(18px, 2.6vw, 30px) var(--hg-margen);
	border-bottom: 1px solid var(--hg-filete);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
}

.hg-indice__filtro-etiqueta {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hg-metadatos);
	margin-right: 8px;
}

/*
 * Especificidad extra (`.hg-scope .hg-chip`) y `!important` en las
 * medidas: los estilos globales de "button" del tema o de Divi
 * (pensados para sus propios botones, normalmente bastante más grandes)
 * tienen prioridad sobre una sola clase y, si no se blinda aquí, el chip
 * sale con su tamaño en vez del de este diseño.
 */
.hg-scope .hg-chip {
	background: transparent;
	color: rgba(27, 26, 23, .7);
	border: 1px solid var(--hg-borde-caja);
	padding: 9px 15px !important;
	margin: 0 !important;
	font-family: var(--hg-font-body) !important;
	font-size: 10px !important;
	line-height: 1.4 !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
}

.hg-scope .hg-chip:hover { border-color: var(--hg-acento); }

.hg-scope .hg-chip.is-active {
	background: var(--hg-verde);
	color: var(--hg-marfil);
	border-color: var(--hg-verde);
}

.hg-indice__recuento {
	margin-left: auto;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hg-discreto);
	white-space: nowrap;
}

.hg-indice__filas { padding: 0 var(--hg-margen) clamp(48px, 7vw, 110px); }

.hg-fila {
	display: grid;
	grid-template-columns: minmax(200px, .85fr) minmax(0, 2fr);
	gap: clamp(18px, 3vw, 52px);
	padding: clamp(24px, 3.4vw, 48px) 0;
	border-bottom: 1px solid var(--hg-filete);
	align-items: start;
}

.hg-fila[hidden] { display: none; }

.hg-fila__imagen {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	min-width: 0;
	background: var(--hg-filete-interno);
	overflow: hidden;
}

.hg-fila__imagen img { width: 100%; height: 100%; object-fit: cover; }

.hg-fila__cuerpo { min-width: 0; display: grid; gap: 14px; align-content: start; }

.hg-fila__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.hg-fila__numero { color: var(--hg-discreto); font-variant-numeric: tabular-nums; }
.hg-fila__categoria { color: var(--hg-enlace); }

.hg-fila__estado {
	padding: 2px 8px;
	border: 1px solid var(--hg-borde-caja);
	color: var(--hg-discreto);
}
.hg-fila__estado--abierto { color: var(--hg-enlace); border-color: rgba(125, 84, 17, .4); }

.hg-fila__nombre {
	font-family: var(--hg-font-heading);
	font-size: clamp(24px, 3vw, 40px);
	line-height: 1.08;
	display: block;
}
.hg-fila__nombre:hover { color: var(--hg-enlace); }

.hg-fila__entradilla {
	font-size: 14px;
	line-height: 1.85;
	color: var(--hg-secundario);
	text-wrap: pretty;
}

.hg-fila__datos { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 6px; }
.hg-fila__dato { display: grid; gap: 3px; }
.hg-fila__dato-clave { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-discreto); }
.hg-fila__dato-valor { font-size: 13px; color: rgba(27, 26, 23, .78); }

.hg-fila__accesos { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 6px; }

.hg-enlace {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hg-enlace);
	border-bottom: 1px solid var(--hg-subrayado);
	padding-bottom: 3px;
	display: inline-block;
}
.hg-enlace:hover { color: var(--hg-acento); }

.hg-indice__nota {
	margin: clamp(22px, 3vw, 36px) var(--hg-margen) 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--hg-discreto);
	text-wrap: pretty;
}

.hg-vacio { padding: var(--hg-separacion) var(--hg-margen); color: var(--hg-discreto); }

/* ================= Ficha ================= */

.hg-ficha__hero {
	position: relative;
	min-height: 58vh;
	display: flex;
	align-items: flex-end;
	/* Fondo verde liso siempre, sin foto de por medio: sobre una fotografía
	   real (no un color plano) el velo de degradado no bastaba para
	   garantizar contraste con el texto en todos los casos. */
	background: var(--hg-verde);
	overflow: hidden;
}

/* La foto de cabecera (si se ha subido una) ya no se pinta: la cabecera es
   siempre el verde liso de la marca. El campo "Imagen de cabecera" del
   admin se deja tal cual por si se decide recuperar este modo más adelante. */
.hg-ficha__hero-imagen { display: none; }

.hg-ficha__hero-velo { display: none; }

.hg-ficha__hero-texto {
	position: relative;
	padding: clamp(26px, 5vw, 80px);
	color: var(--hg-marfil);
	width: 100%;
}

.hg-ficha__volver {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hg-verde-epigrafe);
	margin-bottom: 18px;
}
.hg-ficha__volver:hover { color: var(--hg-verde-acento); }

.hg-ficha__categoria {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	/* Dorado claro en vez del gris-blanco tenue de antes: sobre el verde
	   liso de la cabecera, el acento dorado se lee con más fuerza. */
	color: var(--hg-verde-acento) !important;
	margin-bottom: 12px !important;
}

.hg-ficha__titulo {
	font-family: var(--hg-font-heading);
	font-weight: 400;
	font-size: clamp(32px, 6vw, 88px);
	line-height: .96;
	letter-spacing: -.02em;
	max-width: 24ch;
	/* Mismo motivo que en .hg-form-banda__titulo: sin esto, el <h1> hereda
	   el verde oscuro de titulares del tema en vez del marfil del fondo
	   de la cabecera, e ilegible sobre la propia foto/velo verde. */
	color: var(--hg-marfil) !important;
}

.hg-ficha__cuerpo {
	padding: clamp(40px, 6vw, 100px) var(--hg-margen);
	display: grid;
	grid-template-columns: minmax(220px, .75fr) minmax(0, 1.7fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}

.hg-ficha__col-datos { min-width: 0; display: grid; gap: 0; align-content: start; }

.hg-ficha__ficha-titulo {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hg-metadatos);
	margin-bottom: 10px !important;
}

.hg-ficha__dato {
	display: grid;
	gap: 4px;
	padding: 13px 0;
	border-top: 1px solid var(--hg-filete);
}

.hg-ficha__dato-clave { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-discreto); }
.hg-ficha__dato-valor { font-size: 13.5px; line-height: 1.65; color: rgba(27, 26, 23, .8); }

.hg-boton {
	display: inline-block;
	font-family: var(--hg-font-body);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 13px 20px;
	border: 1px solid var(--hg-borde-caja);
	color: var(--hg-enlace);
}
.hg-boton:hover { background: rgba(182, 130, 53, .12); }

.hg-boton--ficha {
	margin-top: 22px;
	justify-self: start;
	border-color: rgba(125, 84, 17, .4);
}

.hg-ficha__col-texto { min-width: 0; }

.hg-ficha__entradilla {
	font-family: var(--hg-font-heading);
	font-size: clamp(22px, 3vw, 38px);
	line-height: 1.3;
	margin-bottom: 30px !important;
	max-width: 34ch;
}

.hg-ficha__prosa {
	columns: 2 300px;
	column-gap: clamp(24px, 3vw, 48px);
	font-size: 14px;
	line-height: 1.9;
	color: var(--hg-articulado);
	text-align: justify;
	hyphens: auto;
}

.hg-ficha__prosa p { margin: 0 0 1.1em !important; }

.hg-ficha__aviso {
	margin-top: clamp(20px, 2.6vw, 32px) !important;
	border: 1px solid rgba(182, 130, 53, .4);
	padding: clamp(15px, 2vw, 22px);
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--hg-secundario);
}

.hg-ficha__galeria {
	padding: 0 var(--hg-margen) clamp(40px, 6vw, 100px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.hg-ficha__pieza { margin: 0; }
.hg-ficha__pieza > *:first-child {
	position: relative;
	aspect-ratio: 3 / 2;
	width: 100%;
	background: var(--hg-filete-interno);
	overflow: hidden;
}
.hg-ficha__pieza img { width: 100%; height: 100%; object-fit: cover; }
.hg-ficha__pieza figcaption {
	margin-top: 12px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hg-discreto);
}

.hg-ficha__otros { padding: clamp(40px, 6vw, 100px) var(--hg-margen); }

.hg-ficha__otros-titulo {
	margin-bottom: clamp(20px, 3vw, 34px) !important;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hg-enlace);
}

.hg-ficha__otros-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 32px);
	border-top: 1px solid var(--hg-filete);
}

.hg-ficha__otro {
	display: grid;
	gap: 8px;
	padding: clamp(20px, 2.6vw, 34px) 0;
	align-content: start;
}
.hg-ficha__otro:hover { color: var(--hg-enlace); }
.hg-ficha__otro-categoria { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--hg-metadatos); }
.hg-ficha__otro-nombre { font-family: var(--hg-font-heading); font-size: clamp(19px, 2.2vw, 28px); line-height: 1.15; }

/* ================= Formulario ================= */

.hg-form-banda {
	background: var(--hg-verde);
	color: var(--hg-marfil);
	padding: clamp(44px, 7vw, 110px) var(--hg-margen);
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 4vw, 80px);
	align-items: start;
	scroll-margin-top: 80px;
}

.hg-form-banda__kicker {
	margin-bottom: 20px !important;
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--hg-verde-epigrafe);
}

.hg-form-banda__titulo {
	font-family: var(--hg-font-heading);
	font-weight: 400;
	font-size: clamp(28px, 4vw, 54px);
	line-height: 1.03;
	margin-bottom: 22px !important;
	max-width: 22ch;
	/* El color no basta con heredarlo del fondo verde de .hg-form-banda:
	   los estilos globales de titulares del tema (pensados para el resto
	   del sitio, sobre fondo claro) tienen más prioridad que la herencia
	   y pintan este <h2> con su verde oscuro habitual — ilegible sobre
	   este mismo verde. Se fija aquí de forma explícita. */
	color: var(--hg-marfil) !important;
}

.hg-form-banda__parrafo {
	margin-bottom: 16px !important;
	font-size: 14px;
	line-height: 1.9;
	color: var(--hg-verde-parrafo);
	max-width: 48ch;
	text-wrap: pretty;
}
.hg-form-banda__parrafo--discreto {
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--hg-verde-metadatos);
	margin-bottom: 0 !important;
}
.hg-form-banda__requisitos {
	margin-top: 16px !important;
	font-size: 12.5px;
	line-height: 1.85;
	color: var(--hg-verde-epigrafe);
	max-width: 48ch;
	border-left: 2px solid var(--hg-verde-acento);
	padding-left: 14px;
}

.hg-form-banda__caja { min-width: 0; }

.hg-form { display: grid; gap: 0; border: 1px solid var(--hg-verde-borde); padding: clamp(22px, 3vw, 40px); }

/* Sin esto, poner `display: grid` arriba anula al atributo `hidden` que
   JS usa para alternar el formulario y el panel de "solicitud enviada"
   (misma especificidad, y esta regla va después en la hoja de estilos):
   el panel de confirmación se vería siempre, incluso sin haber enviado
   nada todavía. Mismo motivo que .hg-fila[hidden] más arriba. */
.hg-form[hidden] { display: none; }

.hg-form__trampa { position: absolute; left: -9999px; top: -9999px; }

.hg-form__campo { display: grid; gap: 7px; padding: 14px 0; border-bottom: 1px solid var(--hg-verde-filete); }

.hg-form__etiqueta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hg-verde-epigrafe);
}

.hg-form__aviso { color: #e0a3a3; }

.hg-form__campo input {
	width: 100%;
	box-sizing: border-box;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(244, 240, 231, .32);
	color: var(--hg-marfil);
	font-family: var(--hg-font-body);
	font-size: 15px;
	padding: 8px 0;
	outline: none;
}

.hg-form__campo input[aria-invalid="true"] { border-bottom-color: rgba(224, 163, 163, .75); }

.hg-form__tutor {
	border: 0;
	margin: 0;
	padding: 4px 0 0;
}
.hg-form__tutor legend {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hg-verde-metadatos);
	padding: 10px 0;
}

.hg-form__rgpd {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 18px 0 4px;
	cursor: pointer;
	border-bottom: 1px solid transparent;
}
.hg-form__rgpd[data-invalido="true"] { border-bottom-color: rgba(224, 163, 163, .75); }
.hg-form__rgpd input { margin: 3px 0 0; accent-color: var(--hg-verde-acento); width: 15px; height: 15px; }
.hg-form__rgpd span { font-size: 12px; line-height: 1.7; color: rgba(244, 240, 231, .72); }
.hg-form__rgpd a { color: var(--hg-verde-acento); text-decoration: underline; }
.hg-form__rgpd.is-invalido span { color: #e0a3a3; }

.hg-form__error {
	margin: 10px 0 0 !important;
	font-size: 11.5px;
	line-height: 1.7;
	color: #e0a3a3;
	min-height: 1.2em;
}

.hg-boton--enviar {
	justify-self: start;
	margin-top: 18px;
	border-color: rgba(216, 178, 106, .65);
	color: var(--hg-verde-acento);
	background: none;
}
.hg-boton--enviar:hover { background: rgba(216, 178, 106, .14); }

.hg-boton--fantasma {
	justify-self: start;
	background: none;
	border-color: rgba(244, 240, 231, .4);
	color: var(--hg-marfil);
}
.hg-boton--fantasma:hover { background: rgba(244, 240, 231, .12); }

.hg-form-confirmacion {
	border: 1px solid rgba(216, 178, 106, .5);
	padding: clamp(24px, 3.4vw, 44px);
	display: grid;
	gap: 16px;
	align-content: start;
}
.hg-form-confirmacion[hidden] { display: none; }
.hg-form-confirmacion__titulo {
	font-family: var(--hg-font-heading);
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.2;
}
.hg-form-confirmacion__texto {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--hg-verde-parrafo);
	max-width: 44ch;
}

/* ================= Destacados ================= */

.hg-destacados {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 40px);
}

.hg-destacado { display: grid; gap: 10px; align-content: start; }
.hg-destacado__imagen {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--hg-filete-interno);
	overflow: hidden;
}
.hg-destacado__imagen img { width: 100%; height: 100%; object-fit: cover; }
.hg-destacado__categoria { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--hg-enlace); }
.hg-destacado__nombre { font-family: var(--hg-font-heading); font-size: clamp(19px, 2.2vw, 26px); line-height: 1.15; }
.hg-destacado:hover .hg-destacado__nombre { color: var(--hg-enlace); }

/* ================= Puntos de ruptura ================= */

@media (max-width: 899px) {
	.hg-indice__cabecera-grid { grid-template-columns: 1fr; }
	.hg-fila { grid-template-columns: 1fr; }
	.hg-ficha__cuerpo { grid-template-columns: 1fr; }
	.hg-ficha__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hg-ficha__otros-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hg-form-banda { grid-template-columns: 1fr; }
	.hg-ficha__dato { border-top: 0; border-left: 2px solid var(--hg-filete); padding: 6px 0 6px 12px; }
}

@media (max-width: 759px) {
	.hg-ficha__prosa { columns: 1; }
}

@media (max-width: 619px) {
	.hg-indice__titulo { font-size: clamp(36px, 12vw, 56px); }
	.hg-ficha__galeria,
	.hg-ficha__otros-lista { grid-template-columns: 1fr; }
}

/* ================= Movimiento reducido ================= */

@media (prefers-reduced-motion: reduce) {
	.hg-scope * { transition: none !important; }
}