/* SECPEC 0.6.0: banner de portada. Aviso del comunicado y carrusel comparten una superficie azul noche,
   el arte va enmarcado y completo, y los controles viven dentro de la superficie con el color de acción.
   Fuente única del carrusel: qa-final.css y home-review-v4.css ya no le dan estilo. */
:root {
  --secpec-banner-surface: #0d1b30;
  --secpec-banner-line: #ffffff24;
  --secpec-banner-muted: #6f86a3;
  --secpec-banner-ring: #8fd6d9;
  --secpec-banner-max: 1216px;
  --secpec-banner-gutter: clamp(16px, 4vw, 48px);
  /* El 100% es el ancho del contenido (portada con «contenido a ancho completo» de GeneratePress), que ya descuenta la
     barra de desplazamiento; 100vw la incluye y desbordaba con barras clásicas. */
  --secpec-banner-inline: max(var(--secpec-banner-gutter), calc((100% - var(--secpec-banner-max)) / 2));
  /* A sangre: contrarresta el relleno lateral de .inside-article en la portada (16px hasta 600px, 0 después; qa-final.css). */
  --secpec-banner-bleed: 0px;
}
@media (max-width: 600px) { :root { --secpec-banner-bleed: -16px; } }

/* Aviso del comunicado: mismo fondo que el carrusel; su enlace sigue siendo un enlace de texto. */
body.home .entry-content > [role="note"] {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0 var(--secpec-banner-bleed) !important;
  padding: 32px var(--secpec-banner-inline) 24px !important;
  justify-content: flex-start !important;
  gap: 12px 20px !important;
  background: var(--secpec-banner-surface) linear-gradient(var(--secpec-banner-line), var(--secpec-banner-line)) no-repeat center bottom / calc(100% - 2 * var(--secpec-banner-inline)) 1px !important;
  color: #fff !important;
}
body.home .entry-content > [role="note"] > a { flex: 0 0 auto; border-radius: 4px; }
body.home .entry-content > [role="note"] > a img { width: auto; height: 72px !important; max-width: none; border-radius: 4px !important; object-fit: contain; }
body.home .entry-content > [role="note"] > div { flex: 1 1 280px !important; max-width: 760px !important; min-width: 0; }
body.home .entry-content > [role="note"] > div > div { margin-bottom: 4px !important; color: #fff; font-size: 19px !important; line-height: 1.35 !important; }
body.home .entry-content > [role="note"] > div > a { color: #fff !important; font-size: 16px; text-underline-offset: .2em; }
body.home .entry-content > [role="note"] > div > a:hover { color: var(--secpec-banner-ring) !important; }
body.home .entry-content > [role="note"] a:focus-visible { outline: 3px solid var(--secpec-banner-ring); outline-offset: 3px; }

/* Superficie del carrusel. */
.secpec-carousel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px var(--secpec-banner-inline) 0;
  background: var(--secpec-banner-surface);
  color: #fff;
}
body.home .entry-content .secpec-carousel { width: auto; max-width: none; margin: 0 var(--secpec-banner-bleed) !important; overflow: hidden; }
/* Bandas a sangre de la portada: GeneratePress las saca con calc(50% - 50vw), que con barra clásica desborda media barra
   por lado. Con contenido a ancho completo basta el mismo margen exacto que el banner. */
body.home.full-width-content .entry-content .alignfull { max-width: none; margin-inline: var(--secpec-banner-bleed) !important; }
/* Las rejillas de la portada (Destacados, Eventos…) miden lo mismo que el arte del banner y quedan alineadas con él. */
@media (min-width: 601px) {
  body.home .entry-content .gb-grid-wrapper { box-sizing: border-box; max-width: min(var(--secpec-banner-max), calc(100% - 2 * var(--secpec-banner-gutter))); margin-inline: auto !important; }
}
.secpec-carousel__slides {
  position: relative;
  width: 100%;
  max-width: var(--secpec-banner-max);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px #0000004d;
  touch-action: pan-y pinch-zoom;
}
.secpec-carousel__slide { width: 100%; margin: 0; }
.secpec-carousel__slide[hidden] { display: none !important; }
.secpec-carousel__link { display: block; width: 100%; }
.secpec-carousel__link:focus-visible { outline: 3px solid var(--secpec-banner-ring); outline-offset: -3px; }
.secpec-carousel__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: var(--secpec-image-ratio, auto);
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}
.secpec-carousel__caption { max-width: 68ch; margin: 12px auto 0; padding-inline: 16px; color: #263547; font-size: 16px; line-height: 1.5; text-align: center; }
html.secpec-carousel-js .secpec-carousel__caption { position: absolute; right: 0; bottom: 0; left: 0; max-width: none; margin: 0; padding: 8px 16px; background: #ffffffeb; }

/* Con JavaScript: una sola diapositiva visible en un marco de proporción fija; el arte se ve entero. */
html.secpec-carousel-js .secpec-carousel__slides { aspect-ratio: 1440 / 456; }
html.secpec-carousel-js .secpec-carousel__slide { position: absolute; inset: 0; display: grid; height: 100%; place-items: center; }
html.secpec-carousel-js .secpec-carousel__link,
html.secpec-carousel-js .secpec-carousel__picture { width: 100%; height: 100%; }
html.secpec-carousel-js .secpec-carousel__picture { display: block; }
html.secpec-carousel-js .secpec-carousel__image { width: 100%; height: 100%; aspect-ratio: auto; }
/* Hasta que corre carrusel.js (va en el pie) solo se ve la primera: las demás no pintan ni reciben clics. */
html.secpec-carousel-js .secpec-carousel__slide:not(.is-active) { opacity: 0; visibility: hidden; }
/* La entrante sale de display:none (hidden), donde una transición no corre: se anima con keyframes, y solo tras el
   primer cambio, para no retrasar el primer pintado del cartel inicial. */
@keyframes secpec-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.secpec-carousel-js .secpec-carousel--animado .secpec-carousel__slide.is-active { animation: secpec-slide-in 240ms cubic-bezier(.2,.6,.3,1) both; }

/* Sin JavaScript: las siete artes apiladas, cada una con su marco. */
html:not(.secpec-carousel-js) .secpec-carousel__slides { display: grid; gap: 16px; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
html:not(.secpec-carousel-js) .secpec-carousel__slide { overflow: hidden; border-radius: 8px; background: #fff; }
html:not(.secpec-carousel-js) .secpec-carousel__controls { display: none; }
html:not(.secpec-carousel-js) .secpec-carousel { padding-bottom: 24px; }

/* Barra de controles integrada: indicadores a la izquierda; posición, anterior y siguiente a la derecha. */
.secpec-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--secpec-banner-max);
  min-height: 0;
  margin: 0 auto;
  padding: 16px 0 32px;
  background: transparent;
}
.secpec-carousel__dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.secpec-carousel .secpec-carousel__dot {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.secpec-carousel .secpec-carousel__dot::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 4px;
  right: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--secpec-banner-muted);
  transition: background-color 160ms cubic-bezier(.4,0,.2,1);
}
.secpec-carousel .secpec-carousel__dot:focus,
.secpec-carousel .secpec-carousel__dot:hover { background: transparent; }
.secpec-carousel .secpec-carousel__dot:hover::before { background: #c6d3e2; }
.secpec-carousel .secpec-carousel__dot[aria-current="true"]::before { background: #fff; }
.secpec-carousel .secpec-carousel__dot:focus-visible { outline: 3px solid var(--secpec-banner-ring); outline-offset: 0; }
.secpec-carousel__nav { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; margin-left: auto; }
.secpec-carousel .secpec-carousel__count { min-width: 56px; margin: 0 8px 0 0; color: #fff; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.secpec-carousel .secpec-carousel__previous,
.secpec-carousel .secpec-carousel__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--secpec-banner-ring);
  border-radius: 6px;
  background: var(--secpec-action, #0b5963);
  color: #fff;
  cursor: pointer;
}
.secpec-carousel .secpec-carousel__previous:focus,
.secpec-carousel .secpec-carousel__next:focus { background: var(--secpec-action, #0b5963); color: #fff; }
.secpec-carousel .secpec-carousel__previous:hover,
.secpec-carousel .secpec-carousel__next:hover { border-color: #fff; background: var(--secpec-action-hover, #084750); color: #fff; }
.secpec-carousel .secpec-carousel__previous:focus-visible,
.secpec-carousel .secpec-carousel__next:focus-visible { outline: 3px solid var(--secpec-banner-ring); outline-offset: 3px; }
.secpec-carousel__previous svg,
.secpec-carousel__next svg { display: block; flex: 0 0 auto; }
.secpec-carousel__control-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  body.home .entry-content > [role="note"] { padding: 20px 16px 16px !important; gap: 12px !important; display: grid !important; grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
  body.home .entry-content > [role="note"] > a { grid-column: 1; grid-row: 1; width: 56px; }
  body.home .entry-content > [role="note"] > div { grid-column: 2; grid-row: 1; }
  body.home .entry-content > [role="note"] > div > div { font-size: 16px !important; line-height: 1.3 !important; }
  /* Controles encima del arte: el cartel 1 es vertical y los demás apaisados; así no saltan al cambiar. */
  .secpec-carousel { display: flex; flex-direction: column; padding: 0; }
  .secpec-carousel__slides { order: 2; }
  .secpec-carousel__slides { border-radius: 0; box-shadow: none; }
  html.secpec-carousel-js .secpec-carousel__slides { aspect-ratio: var(--secpec-active-ratio, 1440 / 456); }
  html.secpec-carousel-js .secpec-carousel--portrait-active .secpec-carousel__slides { aspect-ratio: 4 / 5; }
  html:not(.secpec-carousel-js) .secpec-carousel__slide { border-radius: 0; }
  .secpec-carousel__controls { order: 1; box-sizing: border-box; width: 100%; padding: 12px 16px; }
  html:not(.secpec-carousel-js) .secpec-carousel__slides { padding-top: 16px; }
  .secpec-carousel__dots { display: none; }
  .secpec-carousel__nav { width: 100%; justify-content: space-between; margin-left: 0; }
  .secpec-carousel .secpec-carousel__count { margin: 0 auto 0 0; text-align: left; }
}
@media print {
  body.home .entry-content > [role="note"] { background: #fff !important; color: #000 !important; }
  body.home .entry-content > [role="note"] > div > div,
  body.home .entry-content > [role="note"] > div > a { color: #000 !important; }
  html.secpec-carousel-js .secpec-carousel__caption { position: static; background: transparent; }
  .secpec-carousel { padding: 0; background: #fff; color: #263547; }
  .secpec-carousel__controls { display: none !important; }
  html.secpec-carousel-js .secpec-carousel__slides { aspect-ratio: auto; box-shadow: none; }
  html.secpec-carousel-js .secpec-carousel__slide { position: static; display: block !important; break-inside: avoid; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .secpec-carousel__image { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.secpec-carousel-js .secpec-carousel--animado .secpec-carousel__slide.is-active { animation: none; }
  .secpec-carousel .secpec-carousel__dot::before { transition: none; }
}
@media (forced-colors: active) {
  .secpec-carousel .secpec-carousel__dot::before { forced-color-adjust: none; background: GrayText; }
  .secpec-carousel .secpec-carousel__dot[aria-current="true"]::before { background: Highlight; }
  .secpec-carousel .secpec-carousel__previous,
  .secpec-carousel .secpec-carousel__next { border-color: ButtonText; }
}