/* ══════════════════════════════════════════════════════════════════════════
   Cabecera de las páginas de eventos — asomate.org

   Vive en Apariencia → Personalizar → CSS adicional. Esta copia es el
   respaldo legible.

   Todo va acotado a `body.insc-pagina`, la clase que el plugin de
   inscripciones pone en cualquier página que lleve uno de sus atajos
   (ver insc_clase_body en incluye/render.php). Antes estaba atado a
   `body.page-id-1294`, la página del panel: con una página por evento
   habría que ir añadiendo números a mano, y el día que se olvidara
   reaparecería el fallo —menú blanco sobre fondo claro, invisible—.
   Así lo hereda también cada evento que se publique de aquí en adelante.

   El resto del sitio conserva su azul de marca (#1E6DFF). Para llevarlo
   a todo el sitio, borra el prefijo.
   El azul de referencia (#0C2340) es el mismo de `apariencia.colores.oscuro`
   en configuracion.json: si cambias uno, cambia el otro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. La cabecera toma el azul del formulario ─────────────────────────── */

body.insc-pagina #masthead,
body.insc-pagina .ast-above-header-bar,
body.insc-pagina .ast-primary-header-bar,
body.insc-pagina .ast-main-header-wrap,
body.insc-pagina #ast-mobile-header .ast-primary-header-bar,
body.insc-pagina .ast-mobile-header-content {
	background-color: #0C2340 !important;
}

/* En móvil, la lista del menú y cada enlace traían fondo casi blanco propio
   (#F7FAFF). Con el texto en blanco, las opciones desaparecían. */
body.insc-pagina #ast-mobile-header .main-header-menu,
body.insc-pagina #ast-mobile-header .main-header-menu .menu-item,
body.insc-pagina #ast-mobile-header .main-header-menu .menu-link,
body.insc-pagina .ast-mobile-header-content .main-header-menu,
body.insc-pagina .ast-mobile-header-content .menu-link {
	background-color: transparent !important;
	color: #ffffff !important;
}
body.insc-pagina .ast-mobile-header-content a,
body.insc-pagina .ast-mobile-header-content .ast-menu-toggle {
	color: #ffffff !important;
}
body.insc-pagina #ast-mobile-header .main-header-menu .menu-link:hover,
body.insc-pagina #ast-mobile-header .main-header-menu .current-menu-item > .menu-link {
	background-color: rgba(255,255,255,.12) !important;
}
body.insc-pagina .ast-mobile-header-content .menu-item,
body.insc-pagina .ast-mobile-header-content .menu-item > a {
	border-color: rgba(255,255,255,.18) !important;
}
body.insc-pagina .ast-mobile-header-content .sub-menu {
	background-color: rgba(255,255,255,.06) !important;
}

/* El botón de la hamburguesa venía con fondo blanco e icono oscuro. */
body.insc-pagina .menu-toggle.main-header-menu-toggle,
body.insc-pagina .ast-mobile-menu-trigger-fill {
	background-color: transparent !important;
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,.35) !important;
}
body.insc-pagina .menu-toggle .ast-mobile-svg,
body.insc-pagina .menu-toggle svg,
body.insc-pagina .ast-mobile-header-content .ast-arrow-svg,
body.insc-pagina .ast-mobile-header-content .ast-menu-toggle svg {
	fill: #ffffff !important;
}

/* ── 2. Fondo de la página: azul claro de la misma familia ──────────────── */

body.insc-pagina {
	background-color: #DEE9F7;
}

/* ── 3. El hero, azul de borde a borde ──────────────────────────────────── */
/* Traía `border:1px solid var(--insc-linea)`, y esa línea clara se leía como
   un filo blanco alrededor del azul. */

body.insc-pagina .insc-hero {
	border: 0 !important;
}

/* ── 4. Los neutros del formulario venían en verde oliva ────────────────── */
/* configuracion.json solo define los cinco colores de marca; los neutros
   (papel, líneas, textos suaves) seguían siendo los de la plantilla, que son
   verdosos. Se redefinen aquí en la familia azul — es la vía que documenta el
   propio plugin en la cabecera de recursos/inscripciones.css. */

body.insc-pagina .insc {
	--insc-papel-2:     #F2F6FC;
	--insc-linea:       #C8D8EC;
	--insc-claro:       #E3EDF9;
	--insc-tinta:       #101A2B;
	--insc-tinta-suave: #55688A;
	--insc-hero-tenue:  #A8BCD6;
}

/* ── 5. El azul del hero, de borde a borde de la pantalla ───────────────── */
/* El box-shadow pinta el color más allá de la caja y el clip-path lo limita a
   lo horizontal: el contenido conserva su ancho de lectura y no aparece barra
   de desplazamiento, a diferencia de estirar la caja con 100vw. */

body.insc-pagina .insc-hero {
	box-shadow: 0 0 0 100vmax #0C2340;
	clip-path: inset(0 -100vmax);
}

/* ── 6. El botón principal: esquinas redondeadas y realce mostaza ───────── */

body.insc-pagina .insc-cta {
	border-radius: 10px;
	transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.insc-pagina .insc-cta:hover,
body.insc-pagina .insc-cta:focus-visible {
	background: #E0A93B !important;
	color: #0C2340 !important;
	filter: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(224,169,59,.35);
}
body.insc-pagina .insc-cta:focus-visible {
	outline: 2px solid #E0A93B;
	outline-offset: 3px;
}
body.insc-pagina .insc-cta:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(224,169,59,.30);
}

/* ── 7. La columna del afiche, en el azul del hero ──────────────────────── */
/* Traía `background:rgba(0,0,0,.2)` encima del azul y se leía como un panel
   más oscuro dentro del hero. Transparente deja ver el #0C2340 de la caja. */

body.insc-pagina .insc-hero-img {
	background: transparent !important;
}


/* ── 8. El menú no se come el titular del hero ───────────────────── */
/* Astra pone #masthead en position:absolute: la cabecera **flota sobre** el
   contenido en vez de empujarlo, y el hero del plugin empieza casi arriba del
   todo. Sin este relleno, el menú parte el titular por la mitad.

   Medido en vivo, lo que tapa la cabecera al hero: 96 px en escritorio
   (cabecera de 151, hero desde 55), 57 px con la cabecera móvil de Astra
   (desde 921 px hacia abajo) y 17 px en pantallas pequeñas. Lo de abajo es esa
   medida más un respiro.

   Va por especificidad y no por !important: `body.insc-pagina .insc-hero-txt`
   le gana al `.insc-hero-txt` del plugin sin pelear, también dentro de las
   media queries del plugin, porque estas no suman especificidad. */

body.insc-pagina .insc-hero-txt {
	padding-top: 82px;
}

@media (min-width: 922px) {
	body.insc-pagina .insc-hero-txt {
		padding-top: 124px;
	}
}

@media (max-width: 520px) {
	body.insc-pagina .insc-hero-txt {
		padding-top: 46px;
	}
}


/* ── 9. Los enlaces del plugin no van subrayados ──────────────────── */
/* Astra imprime en línea `.ast-single-post .entry-content a{text-decoration:
   underline}`. Con especificidad (0,2,1) le gana al `.insc-cta{...none}` del
   plugin (0,1,0), y los botones salían subrayados —incluido el botón grande
   del hero, que parecía un enlace roto—.

   Se arregla subiendo la especificidad y no con !important, para que el propio
   plugin siga pudiendo decidir sus estados: el subrayado al pasar por encima
   del título de una tarjeta se vuelve a poner justo debajo. */

body.insc-pagina .entry-content .insc a,
body.insc-pagina .insc a.insc-cta {
	text-decoration: none;
}

/* Este sí lo queremos: el título de la tarjeta se subraya al pasar el ratón,
   que es lo que dice «esto se puede pinchar». */
body.insc-pagina .entry-content .insc .insc-cart-nombre a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── 10. La cartelera necesita aire bajo la cabecera ──────────────── */
/* Una página de evento arranca con el hero, que ya lleva su relleno (sección
   8). La cartelera no: su primer rótulo empezaba exactamente donde termina la
   cabecera —holgura medida: 0 px— y se leía apelmazado contra el menú. */

body.insc-pagina .insc-cartelera {
	padding-top: 26px;
}

@media (min-width: 922px) {
	body.insc-pagina .insc-cartelera {
		padding-top: 40px;
	}
}

/* ── 11. Afiches que se ven enteros ────────────────────────── */
/* Una foto se recorta sin dolor: da igual perder los bordes. Un afiche no —es
   un cartel con texto— y recortarlo se come justo lo que hay que leer: la
   fecha, el precio, el sello de «gratis para afiliados».

   Cuando la ficha pide `imagen_ajuste: "contain"`, la caja deja de imponer una
   proporción y **toma su altura de la imagen**. Así no hay recorte y tampoco
   franjas de relleno: la tarjeta simplemente crece lo que haga falta.

   El fondo azul y el relleno de 14 px quedan como marco, para que el cartel no
   toque los bordes de la tarjeta. */

body.insc-pagina .insc-cart-tarjeta.imagen-entera .insc-cart-img {
	position: static;
	padding: 14px;
	background: #0C2340;
	align-self: center;
}

body.insc-pagina .insc-cart-tarjeta.imagen-entera .insc-cart-img img {
	position: static;
	width: 100%;
	height: auto;
	display: block;
	object-fit: fill;   /* ya no hace falta recortar: la caja mide lo que la imagen */
}