/* =============================================================================
   CARTELES PARA IMPRIMIR · Estilos de cartel.html
   El cartel se mide en unidades del propio cartel (cqw = 1 % de su ancho), así
   que la misma maquetación sirve para la vista previa y para el papel.
   ============================================================================= */

.pagina-cartel { overflow-x: clip; }
.enlace-volver {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .9rem; border-radius: 999px; white-space: nowrap;
  color: var(--texto); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.enlace-volver:hover { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.enlace-volver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .enlace-volver__resto { display: none; } }

/* ─── Página ─── */
.cartel-pagina {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 500px);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding: clamp(1.5rem, 4vw, 3rem) 0 4rem;
}
.cartel-intro h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: .35em; }
.cartel-intro > p { color: var(--texto-suave); max-width: 52ch; }
.cartel-opciones { display: grid; gap: .7rem; margin: 1.6rem 0 1.4rem; }
.cartel-opcion {
  display: grid; gap: .2rem; text-align: left; cursor: pointer;
  padding: 1rem 1.2rem; border-radius: var(--radio);
  border: 2px solid var(--linea); background: var(--superficie); color: var(--texto);
  font: inherit; transition: border-color var(--transicion), box-shadow var(--transicion);
}
.cartel-opcion strong { font-family: var(--fuente-titulo); font-size: 1.15rem; }
.cartel-opcion span { font-size: .9rem; color: var(--texto-suave); }
.cartel-opcion:hover { border-color: color-mix(in srgb, var(--acento) 50%, var(--linea)); }
.cartel-opcion[aria-checked="true"] {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent);
}
.cartel-ayuda { margin: .9rem 0 0; font-size: .87rem; color: var(--texto-suave); }
.cartel-vista { position: sticky; top: 88px; }

@media (max-width: 860px) {
  .cartel-pagina { grid-template-columns: 1fr; }
  .cartel-vista { position: static; max-width: 460px; width: 100%; margin: 0 auto; }
}

/* ─── El cartel ─── */
.cartel {
  container-type: inline-size;
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 210 / 297;
  display: flex; flex-direction: column;
  background: #faf7f0; color: #16221b;
  border-radius: 6px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.cartel__cabeza {
  display: flex; align-items: center; gap: 3.6cqw;
  padding: 5cqw 7cqw;
  background: radial-gradient(130% 160% at 15% 0%, #2b5e39 0%, #1c4428 55%, #112b19 100%);
}
.cartel__escudo { width: 13cqw; height: auto; padding: 1.6cqw; border-radius: 3cqw; background: #faf7f0; }
.cartel__centro { margin: 0; font: 700 5cqw/1.05 var(--fuente-titulo); color: #f3d58a; }
.cartel__centro span {
  display: block; margin-top: 1.2cqw;
  font: 600 2.3cqw/1.2 var(--fuente-texto); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(243, 213, 138, .78);
}

.cartel__cuerpo {
  position: relative; isolation: isolate; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 3cqw 8cqw; text-align: center;
}
.cartel__anillos {
  position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%;
  width: 135cqw; height: auto; opacity: .13;
}
.cartel__anillos circle { fill: none; stroke: #1c6b3f; stroke-width: .5; }

/* Cada grupo es un bloque: el espacio libre se reparte entre bloques, nunca los solapa */
.cartel__grupo { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
/* El logotipo, sobre un fondo crema que tapa los anillos que quedan detrás */
.cartel__logo { display: block; width: auto; height: 31cqw; padding: .8cqw 1.4cqw; border-radius: 3cqw; background: #faf7f0; }
.cartel__lema { margin: 0; font: italic 500 5.4cqw/1.1 var(--fuente-titulo); color: #16221b; }
.cartel__titulo { margin: 0; font: italic 600 9.2cqw/1.05 var(--fuente-titulo); color: #1c6b3f; }
.cartel__sub { margin: 0; max-width: 72cqw; font: 500 4.3cqw/1.35 var(--fuente-titulo); color: #16221b; }
.cartel__banda strong { font-weight: 800; letter-spacing: .04em; }
.cartel__banda {
  margin: 0; padding: 1.8cqw 5cqw; border-radius: 3cqw;
  background: #e0a42b; color: #0b1f13;
  font: 500 3.2cqw/1.35 var(--fuente-texto); letter-spacing: .02em;
}

.cartel__qr {
  width: 36cqw; padding: 2.4cqw; background: #fff;
  border: .7cqw solid #1c6b3f; border-radius: 4cqw;
}
.cartel__qr svg { display: block; width: 100%; height: auto; }

.cartel__llamada { margin: 0; font: 700 4.4cqw/1.2 var(--fuente-texto); color: #16221b; }
.cartel__detalle { margin: 0; max-width: 70cqw; font: 400 3.2cqw/1.4 var(--fuente-texto); color: #4a5a51; }
.cartel__url { margin: .4cqw 0 0; font: 600 2.8cqw/1.2 var(--fuente-texto); color: #1c6b3f; overflow-wrap: anywhere; }

.cartel__pie {
  display: flex; justify-content: space-between; align-items: center; gap: 3cqw;
  padding: 3.4cqw 7cqw; background: #12341f; color: #f3d58a;
  font: 700 2.9cqw/1.2 var(--fuente-texto); letter-spacing: .08em;
}
.cartel__pie span:last-child { font-weight: 500; letter-spacing: .04em; color: rgba(243, 213, 138, .75); }

/* ─── Impresión: solo el cartel, a toda la hoja ─── */
@page { margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .cabecera, .cartel-intro, .salto-contenido { display: none !important; }
  .cartel-pagina.contenedor { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
  .cartel-vista { position: static; max-width: none; }
  .cartel { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}