/*
Theme Name: Grupo III Scouts
Description: Child theme del Grupo III Scouts de España, sobre Twenty Twenty-Five.
Author: Grupo III Scouts de España
Template: twentytwentyfive
Version: 0.1.0
Text Domain: scoutg3
*/

/* Bandas a sangre pegadas unas a otras. El tema padre mete 1,2 rem de
   hueco entre bloques hermanos, y eso dejaba una franja de fondo entre
   el menú y el hero, y entre el hero y cada banda de unidad. Aquí no
   queremos ese aire: cada banda ya trae su propio padding interior. */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Mezcla "Sendero + Insignia": estructura de C, tipografía e iconos de B.

   La apertura de la home es una foto real de campamento (todo el grupo,
   en la naturaleza): es lo más característico que tiene este proyecto,
   y dice más de un vistazo que cualquier fondo decorativo. Encima lleva
   un velo azul de marca para que el texto blanco se lea siempre, pase
   lo que pase con la foto que se ponga el día de mañana. */

.scoutg3-hero-foto {
	position: relative;
	isolation: isolate;
	background-image: url("assets/img/campamento.jpg");
	background-size: cover;
	background-position: center 62%;
	/* Sin raya amarilla aquí: la cabecera del sitio ya lleva la suya
	   justo encima y quedaban dos líneas amarillas casi pegadas. */
}
.scoutg3-hero-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--funcional) 82%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--funcional) 68%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--funcional) 88%, transparent) 100%
	);
}
.scoutg3-hero-foto,
.scoutg3-hero-foto :is(h2, p) {
	color: #FFFFFF;
}
/* El titular en amarillo de marca, no en blanco: es lo primero que se
   ve y así lleva la identidad del grupo, no un blanco cualquiera. */
.scoutg3-hero-foto h1 {
	color: var(--wp--preset--color--identidad);
}
/* El botón por defecto es azul oscuro, y sobre el velo azul de la foto
   desaparecía. Aquí va en amarillo de marca con texto azul: destaca y
   sigue siendo la misma paleta. */
.scoutg3-hero-foto .wp-block-button__link {
	background-color: var(--wp--preset--color--identidad);
	color: var(--wp--preset--color--funcional);
}
.scoutg3-hero-foto .wp-block-button__link:hover {
	background-color: #FFFFFF;
	color: var(--wp--preset--color--funcional);
}

/* Cabecera de la ficha de unidad: sin foto (cada unidad ya trae la suya
   dentro) y sin raya amarilla propia, por lo mismo que el hero: la
   cabecera del sitio ya lleva una justo encima. Se queda solo con el
   tinte del color de su sección. */

.scoutg3-tramo { position: relative; overflow: hidden; }

.scoutg3-icono-tramo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--color-seccion, var(--wp--preset--color--identidad));
	color: var(--wp--preset--color--base);
	margin-bottom: 0.75rem;
}
.scoutg3-icono-tramo svg { width: 1.5rem; height: 1.5rem; }
.unidad-castores { --color-seccion: var(--wp--preset--color--castores); }
.unidad-manada { --color-seccion: var(--wp--preset--color--manada); }
.unidad-tropa { --color-seccion: var(--wp--preset--color--tropa); }
.unidad-esculta { --color-seccion: var(--wp--preset--color--esculta); }
.unidad-clan { --color-seccion: var(--wp--preset--color--clan); }

.scoutg3-tarjeta-solapada {
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
	padding: 0.75rem;
	transform: rotate(-1deg);
	/* Formato casi cuadrado y de tamaño contenido: en apaisado 4/3 las
	   fotos salían enormes y alargadas, y se comían la banda entera. */
	max-width: 20rem;
	margin-inline: auto;
}
.scoutg3-tramo:nth-of-type(even) .scoutg3-tarjeta-solapada { transform: rotate(1deg); }
.scoutg3-tarjeta-solapada img {
	border-radius: 8px;
	aspect-ratio: 1/1;
	object-fit: cover;
	width: 100%;
	/* Imprescindible: WordPress pone height="768" como atributo en el
	   <img>, y sin esto ese alto gana y el aspect-ratio se ignora. */
	height: auto;
	display: block;
}
/* El shortcode de la foto sale envuelto en <p> (wpautop); que no meta
   márgenes propios dentro de la tarjeta. */
.scoutg3-tarjeta-solapada p { margin: 0; }

.scoutg3-tramo .wp-block-heading a { text-decoration: none; }
.scoutg3-tramo .wp-block-heading a:hover { text-decoration: underline; }

.scoutg3-tarjeta-familia {
	background: var(--wp--preset--color--banda);
	border-radius: 16px;
	padding: 2rem;
	max-width: 32rem;
}

.scoutg3-scouters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}
.scoutg3-scouters__item { text-align: center; font-size: 0.9rem; }
.scoutg3-scouters__item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
	margin-bottom: 0.5rem;
}

/* Ficha de unidad: la cabecera se tiñe suavemente del color de la sección,
   y el icono grande junto al título usa el mismo color. */
body.unidad-castores .scoutg3-cabecera-unidad { background-color: color-mix(in srgb, var(--wp--preset--color--castores) 18%, var(--wp--preset--color--base)); }
body.unidad-manada .scoutg3-cabecera-unidad { background-color: color-mix(in srgb, var(--wp--preset--color--manada) 18%, var(--wp--preset--color--base)); }
body.unidad-tropa .scoutg3-cabecera-unidad { background-color: color-mix(in srgb, var(--wp--preset--color--tropa) 18%, var(--wp--preset--color--base)); }
body.unidad-esculta .scoutg3-cabecera-unidad { background-color: color-mix(in srgb, var(--wp--preset--color--esculta) 18%, var(--wp--preset--color--base)); }
body.unidad-clan .scoutg3-cabecera-unidad { background-color: color-mix(in srgb, var(--wp--preset--color--clan) 18%, var(--wp--preset--color--base)); }
.scoutg3-cabecera-unidad .wp-block-post-excerpt { opacity: .65; margin-bottom: .25rem !important; }

.scoutg3-insignia-grande__icono {
	width: 4.5rem;
	height: 4.5rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--color-seccion, var(--wp--preset--color--identidad));
	color: var(--wp--preset--color--base);
}
.scoutg3-insignia-grande__icono svg { width: 2.25rem; height: 2.25rem; }

/* Botón/píldora de Contacto en la navegación: fondo azul oscuro, letras
   SIEMPRE blancas (antes se veían marrones/oscuras y no se leían). */
.scoutg3-nav-pills .wp-block-navigation-item.is-style-boton-contacto a,
.scoutg3-nav-pills .wp-block-navigation-item.is-style-boton-contacto .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--funcional);
	color: #FFFFFF !important;
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
}
.scoutg3-nav-pills .wp-block-navigation-item.is-style-boton-contacto a:hover {
	background-color: var(--wp--preset--color--identidad);
	color: var(--wp--preset--color--contraste) !important;
	text-decoration: none !important;
}

/* Enlaces que requieren sesión iniciada (Galería, Documentos): ocultos en
   el menú mientras no haya sesión. El acceso de verdad está bloqueado en
   PHP (scoutg3-cpts.php, template_redirect); esto es solo para no ofrecer
   un enlace que va a rebotar. */
body:not(.sesion-iniciada) .requiere-login {
	display: none;
}

/* Y al revés: el enlace de "Acceso familias" solo tiene sentido mientras
   no se ha entrado. */
body.sesion-iniciada .solo-sin-sesion {
	display: none;
}
.scoutg3-nav-pills .solo-sin-sesion a {
	border-radius: 999px;
	padding: 0.5rem 1.2rem;
}

/* -------------------------------------------------------------------------
   Área de familias (B4): listado de fichas y formularios.
   ---------------------------------------------------------------------- */

.scoutg3-area { max-width: 46rem; }
.scoutg3-saludo { font-size: 1.15rem; }

.scoutg3-aviso {
	background: var(--wp--preset--color--banda);
	border-left: 5px solid var(--wp--preset--color--identidad);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.scoutg3-aviso p { margin: .4rem 0; font-size: .95rem; }
.scoutg3-aviso--ojo { border-left-color: var(--wp--preset--color--esculta); }

.scoutg3-lista-fichas { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.scoutg3-ficha-item {
	display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 15%, transparent);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
}
.scoutg3-ficha-item.es-hecha { border-left: 5px solid var(--wp--preset--color--manada); }
.scoutg3-ficha-item h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.scoutg3-ficha-item p { margin: 0; font-size: .95rem; }
.scoutg3-hecha { color: var(--wp--preset--color--manada); font-weight: 600; margin-top: .35rem !important; }

.scoutg3-formulario { margin-top: 1.5rem; }
.scoutg3-seccion {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 15%, transparent);
	border-radius: 14px;
	padding: 1.25rem 1.5rem 1.5rem;
	margin: 0 0 1.5rem;
}
.scoutg3-seccion legend {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.1rem;
	padding: 0 .5rem;
}
.scoutg3-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; }
.scoutg3-campo--ancho, .scoutg3-campo--casilla { grid-column: 1 / -1; }
@media (max-width: 600px) { .scoutg3-campos { grid-template-columns: 1fr; } }

.scoutg3-campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
.scoutg3-campo input[type="text"],
.scoutg3-campo input[type="date"],
.scoutg3-campo input[type="email"],
.scoutg3-campo input[type="tel"],
.scoutg3-campo select,
.scoutg3-campo textarea {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 28%, transparent);
	border-radius: 8px;
	font: inherit;
	font-size: .95rem;
	background: #fff;
}
.scoutg3-campo :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--identidad);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--funcional);
}
.scoutg3-campo--casilla label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.scoutg3-campo--casilla input { margin-top: .25rem; flex-shrink: 0; }
.scoutg3-sino { display: flex; gap: 1.5rem; }
.scoutg3-sino label { font-weight: 400; display: flex; gap: .35rem; align-items: center; }
.scoutg3-ayuda { font-size: .85rem; color: color-mix(in srgb, var(--wp--preset--color--contraste) 65%, transparent); margin: .15rem 0 .4rem; font-weight: 400; }
.scoutg3-campo abbr { color: var(--wp--preset--color--esculta); text-decoration: none; }

/* Tablas de varias columnas (alergias, personas autorizadas a recoger,
   medicacion pautada, hijos en el grupo).

   Se dejan en anchura automatica y sin minimo al conjunto, para que
   quepan en el ancho del formulario sin barra de desplazamiento. Antes
   se probo con table-layout:fixed mas un minimo por celda, y esas dos
   cosas se pelean: con "fixed" el navegador reparte el ancho segun la
   primera fila e ignora los minimos, asi que salia siempre con scroll. */
.scoutg3-tabla-scroll { overflow-x: auto; }

.scoutg3-tabla-campo {
	width: 100%;
	/* "fixed" reparte el ancho a partes iguales y ocupa todo el
	   contenedor. Con "auto" las columnas se encogían al contenido y la
	   tabla quedaba apretada a la izquierda dejando medio recuadro
	   vacío. Ahora funciona porque los input llevan box-sizing. */
	table-layout: fixed;
	/* "collapse" y no "separate": border-spacing tambien separa por fuera
	   del borde de la tabla, y eso hacia que la tabla se saliera de su
	   caja y apareciera barra de desplazamiento aunque las columnas
	   cupieran. La separacion entre campos se da con relleno en las
	   celdas. */
	border-collapse: collapse;
}

.scoutg3-tabla-campo th,
.scoutg3-tabla-campo td { padding-right: .4rem; }
.scoutg3-tabla-campo th:last-child,
.scoutg3-tabla-campo td:last-child { padding-right: 0; }

.scoutg3-tabla-campo th {
	text-align: left;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding-bottom: .35rem;
	font-weight: 700;
	line-height: 1.25;
	vertical-align: bottom;
	overflow-wrap: break-word;
	hyphens: auto;
}
.scoutg3-tabla-campo td { padding-bottom: .3rem; vertical-align: top; }
.scoutg3-tabla-campo input {
	width: 100%;
	/* box-sizing: sin esto el relleno y el borde se suman al 100% y el
	   input se sale de su columna, que era lo que seguia provocando la
	   barra de desplazamiento aunque las columnas ya cupieran. */
	box-sizing: border-box;
	min-width: 0;          /* sin esto el input impone su ancho por defecto
	                          y descuadra el reparto de columnas */
	padding: .45rem .5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 28%, transparent);
	border-radius: 6px;
	font: inherit;
	font-size: .9rem;
}

/* En pantallas estrechas una tabla de cuatro columnas no cabe de ninguna
   manera: se apila en fichas, con la cabecera de cada dato delante. */
@media (max-width: 700px) {
	.scoutg3-tabla-campo,
	.scoutg3-tabla-campo tbody,
	.scoutg3-tabla-campo tr,
	.scoutg3-tabla-campo td { display: block; width: 100%; }
	.scoutg3-tabla-campo thead { display: none; }
	.scoutg3-tabla-campo tr {
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 18%, transparent);
		border-radius: 10px;
		padding: .6rem;
		margin-bottom: .6rem;
	}
	.scoutg3-tabla-campo td::before {
		content: attr(data-etiqueta);
		display: block;
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .02em;
		font-weight: 700;
		margin: .35rem 0 .15rem;
	}
	.scoutg3-tabla-campo td:first-child::before { margin-top: 0; }
}

.scoutg3-enviar { margin-top: 1.5rem; }

/* Visor de la ficha en PDF: se ve el documento oficial tal cual. */
/* En móvil el visor de PDF embebido va regular; se deja más bajo y se
   confía en el enlace de descarga. */
@media (max-width: 640px) {
	}

.scoutg3-botonera {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin: 1.5rem 0;
}
.scoutg3-boton--sec {
	background: transparent !important;
	color: var(--wp--preset--color--funcional) !important;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--funcional);
}
.scoutg3-boton--sec:hover {
	background: var(--wp--preset--color--funcional) !important;
	color: #fff !important;
}
.scoutg3-aviso--ok { border-left-color: var(--wp--preset--color--manada); }

/* Paso previo: de qué hijo o hija es la ficha. */
.scoutg3-educandos { margin: 1.5rem 0 2rem; }
.scoutg3-educandos h3 { margin-bottom: .5rem; }

.scoutg3-hijos { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; gap: .75rem; flex-wrap: wrap; }
.scoutg3-hijo {
	display: flex; gap: .6rem; align-items: center;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--contraste) 18%, transparent);
	border-radius: 999px;
	padding: .55rem 1.1rem;
	cursor: pointer;
	background: #fff;
	font-weight: 400;
}
.scoutg3-hijo.es-activo {
	border-color: var(--wp--preset--color--funcional);
	background: color-mix(in srgb, var(--wp--preset--color--funcional) 8%, #fff);
}
.scoutg3-hijo strong { display: block; font-size: .95rem; }
.scoutg3-hijo em { font-style: normal; font-size: .8rem; opacity: .7; }

.scoutg3-etiqueta-unidad {
	display: inline-block;
	background: var(--wp--preset--color--identidad);
	color: var(--wp--preset--color--contraste);
	border-radius: 999px;
	padding: .1rem .7rem;
	font-size: .8rem;
	font-weight: 700;
	vertical-align: middle;
}
.scoutg3-para-quien { margin-top: -.5rem; }

.scoutg3-anadir-hijo summary {
	cursor: pointer;
	font-weight: 600;
	font-size: .95rem;
	color: var(--wp--preset--color--funcional);
}
.scoutg3-anadir-hijo[open] summary { margin-bottom: .75rem; }

/* Vista de la ficha en blanco dentro del área de familias. */
/* Formulario de acceso de familias, dentro del sitio. */
.scoutg3-acceso { max-width: 26rem; }
.scoutg3-acceso .login-username,
.scoutg3-acceso .login-password { margin-bottom: 1rem; }
.scoutg3-acceso label {
	display: block;
	font-weight: 600;
	font-size: .92rem;
	margin-bottom: .25rem;
}
.scoutg3-acceso input[type="text"],
.scoutg3-acceso input[type="password"] {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 28%, transparent);
	border-radius: 8px;
	font: inherit;
	background: #fff;
}
.scoutg3-acceso .login-remember label {
	font-weight: 400;
	display: flex;
	gap: .5rem;
	align-items: center;
}
.scoutg3-acceso .login-submit input[type="submit"] {
	font: inherit;
	font-family: var(--wp--preset--font-family--titular);
	background: var(--wp--preset--color--funcional);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .8rem 2rem;
	cursor: pointer;
}
.scoutg3-acceso .login-submit input[type="submit"]:hover {
	background: var(--wp--preset--color--contraste);
}

/* Panel de firma manuscrita. */
.scoutg3-firma { max-width: 30rem; }
.scoutg3-firma__lienzo {
	display: block;
	width: 100%;
	height: 10rem;
	background: #fff;
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--contraste) 35%, transparent);
	border-radius: 10px;
	touch-action: none;   /* para poder firmar con el dedo sin que la página se mueva */
	cursor: crosshair;
}
.scoutg3-firma__pie {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: .5rem;
}
.scoutg3-firma__borrar {
	font: inherit;
	font-size: .9rem;
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--funcional);
	text-decoration: underline;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Calendario del curso
   ---------------------------------------------------------------------- */

.scoutg3-cal-portada {
	background: var(--wp--preset--color--funcional);
	border-top: 6px solid var(--wp--preset--color--identidad);
}
.scoutg3-cal-portada p { opacity: .92; }

.scoutg3-campamentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 1.75rem 0 1rem;
}

.scoutg3-camp {
	position: relative;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 12%, transparent);
	border-top: 5px solid var(--color-camp, var(--wp--preset--color--identidad));
	border-radius: 14px;
	padding: 1.4rem 1.35rem 1.5rem;
}
/* Un color por campamento, siguiendo el ciclo del curso. */
.scoutg3-camp--inaugural     { --color-camp: var(--wp--preset--color--manada); }
.scoutg3-camp--navidad       { --color-camp: var(--wp--preset--color--tropa); }
.scoutg3-camp--semana-santa  { --color-camp: var(--wp--preset--color--castores); }
.scoutg3-camp--verano        { --color-camp: var(--wp--preset--color--esculta); }

.scoutg3-camp__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 999px;
	background: var(--color-camp);
	color: #fff;
	margin-bottom: .9rem;
}
.scoutg3-camp__icono svg { width: 1.55rem; height: 1.55rem; }

.scoutg3-camp h3 {
	margin: 0 0 .3rem;
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.3rem;
}
.scoutg3-camp__cuando {
	margin: 0 0 .5rem;
	font-weight: 700;
	color: var(--color-camp);
}
.scoutg3-camp__nota {
	margin: 0;
	font-size: .95rem;
	opacity: .8;
}

.scoutg3-horarios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.scoutg3-horario {
	background: #fff;
	border-radius: 12px;
	padding: 1.2rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.scoutg3-horario__etiqueta {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
	opacity: .6;
}
.scoutg3-horario__hora {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.7rem;
	color: var(--wp--preset--color--funcional);
	line-height: 1.1;
}
.scoutg3-horario__nota { font-size: .9rem; opacity: .7; }

.scoutg3-regla {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}
.scoutg3-regla li {
	padding: .75rem 1rem .75rem 2.6rem;
	background: #fff;
	border-radius: 10px;
	position: relative;
}
.scoutg3-regla li::before {
	position: absolute;
	left: .95rem;
	top: .72rem;
	font-size: 1.05rem;
	line-height: 1.3;
}
.scoutg3-regla__si::before { content: "✓"; color: var(--wp--preset--color--manada); }
.scoutg3-regla__no::before { content: "✕"; color: var(--wp--preset--color--esculta); }

/* Normativa de convivencia */
.scoutg3-promesa {
	border-left: 5px solid var(--wp--preset--color--identidad);
	background: #fff;
	padding: 1.2rem 1.4rem;
	border-radius: 0 12px 12px 0;
	font-style: italic;
	font-size: 1.05rem;
}
.scoutg3-aviso-normativa {
	background: color-mix(in srgb, var(--wp--preset--color--esculta) 8%, #fff);
	border-left: 5px solid var(--wp--preset--color--esculta);
	border-radius: 0 12px 12px 0;
	padding: 1.1rem 1.35rem;
	margin: 1.5rem 0;
}
.scoutg3-aviso-normativa p:last-child { margin-bottom: 0; }
.scoutg3-aceptacion {
	background: #fff;
	border: 2px solid var(--wp--preset--color--funcional);
	border-radius: 14px;
	padding: 1.5rem 1.6rem;
	margin-top: 2.5rem;
}
.scoutg3-aceptacion h3 { margin-top: 0; }


/* Foco: UN solo anillo, y solo navegando con teclado.
   -------------------------------------------------------------------
   Al hacer clic con el raton no se pinta nada: el navegador marcaba su
   contorno por defecto encima del borde del propio boton, y en los
   botones de pildora se veian dos anillos superpuestos.

   ":focus:not(:focus-visible)" es justo ese caso — tiene el foco pero
   no por teclado. El !important hace falta porque el contorno lo ponen
   los estilos generados por WordPress a partir de theme.json, que
   cargan despues de esta hoja. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none;
}

/* Con teclado si, y bien visible: es como se orienta quien no usa raton. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--identidad) !important;
	outline-offset: 2px;
}
.scoutg3-campo :is(input, select, textarea):focus-visible {
	outline-offset: 1px;
}

/* El boton de "Acceso familias" lleva su aro con borde, no con sombra
   interior: asi es un unico trazo y no se confunde con un anillo de
   foco superpuesto. */
.scoutg3-nav-pills .solo-sin-sesion a {
	box-shadow: none;
	border: 2px solid var(--wp--preset--color--funcional);
}

/* Listado de unidades */
.scoutg3-lista-unidades { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.scoutg3-unidad-item {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contraste) 12%, transparent);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	gap: 1.25rem;
}
.scoutg3-unidad-item .scoutg3-unidad-foto img { border-radius: 10px; object-fit: cover; }
/* La insignia de Castores hace de foto mientras no haya una. Es redonda:
   recortada para llenar la tarjeta perdería arriba y abajo, así que se
   muestra entera sobre el color de fondo. Se reconoce por el nombre del
   archivo; cuando Castores tenga foto, esta regla deja de aplicarse sola. */
.scoutg3-unidad-foto img[src*="castores-insignia"],
.scoutg3-tarjeta-solapada img[src*="castores-insignia"] { object-fit: contain; background: var(--wp--preset--color--banda); padding: .4rem; }
.scoutg3-unidad-item h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.scoutg3-unidad-item h2 a { text-decoration: none; }
.scoutg3-unidad-item p { margin: 0; font-size: .95rem; opacity: .8; }

/* -------------------------------------------------------------------------
   Móvil
   ---------------------------------------------------------------------- */

/* Menú: las opciones que dependen de la sesión. Las reglas de arriba no
   bastaban en el menú desplegable del móvil: WordPress le da a cada opción
   "display: flex" con una regla más fuerte, y salían todas a la vez
   (Acceso familias y Salir, y Galería, Normativa y Mis fichas sin sesión). */
body:not(.sesion-iniciada) .wp-block-navigation .requiere-login,
body.sesion-iniciada .wp-block-navigation .solo-sin-sesion {
	display: none !important;
}

/* 781 px es donde WordPress apila las columnas: a partir de ahí es móvil. */
@media (max-width: 781px) {

	/* El menú abierto: centrado y sobre el color de papel de la web, en vez
	   de pegado a la derecha sobre blanco. */
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--funcional) !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: center !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 1.25rem !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		justify-content: center !important;
	}
	/* Los dos botones con aro: en el desplegable WordPress les quita el
	   relleno y el texto tocaba el borde. */
	.wp-block-navigation__responsive-container.is-menu-open .is-style-boton-contacto .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open .solo-sin-sesion .wp-block-navigation-item__content {
		padding: 0.6rem 1.5rem !important;
	}

	/* Portada: todo centrado. */
	.scoutg3-hero-foto,
	.scoutg3-mision,
	.scoutg3-tramo,
	.scoutg3-tarjeta-familia {
		text-align: center;
	}
	.scoutg3-hero-foto .wp-block-buttons {
		justify-content: center;
	}
	/* En cada unidad, la foto siempre encima del texto. En escritorio van
	   alternando a izquierda y derecha; apiladas, eso las desordenaba. */
	.scoutg3-tramo .wp-block-column:has(.scoutg3-tarjeta-solapada) {
		order: -1;
	}
}

/* -------------------------------------------------------------------------
   Formulario de contacto (scoutg3-contacto.php)
   ---------------------------------------------------------------------- */

.scoutg3-contacto {
	background: var(--wp--preset--color--banda);
	border-radius: 16px;
	padding: 1.75rem;
	margin-bottom: 2.5rem;
}
/* Aire por arriba. Va con .entry-content delante porque WordPress pone a
   cero el margen del primer bloque del contenido, y gana por orden. */
.entry-content .scoutg3-contacto { margin-top: 2.5rem; }
.scoutg3-contacto h2 { margin-top: 0; }
.scoutg3-contacto .scoutg3-campo--completo { grid-column: 1 / -1; margin-top: 1.25rem; }
/* Nombre y correo, uno al lado del otro pero sin pegarse. */
.scoutg3-contacto .scoutg3-campos { gap: 1.25rem 2rem; }
.scoutg3-contacto .scoutg3-enviar { margin-bottom: 0; }

/* El campo trampa para robots: fuera de la vista, pero sin display:none,
   que algunos robots detectan. */
.scoutg3-tarro-miel {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.scoutg3-contacto { padding: 1.25rem; }
}

/* Página de contacto: cada destino, una tarjeta con su color. Así se
   encuentra de un vistazo, sin leerse la página entera. */

.scoutg3-correos-unidades,
.scoutg3-destinos {
	list-style: none;
	margin: 1.25rem 0 2rem;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}
.scoutg3-correos-unidades { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
/* La tarjeta, estirada dentro de su celda. Con height:100% en el enlace
   se salía por abajo y se montaba sobre la fila siguiente. */
.scoutg3-correos-unidades li { display: flex; }
.scoutg3-correos-unidades a { flex: 1; }
.scoutg3-destinos { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.scoutg3-correos-unidades a {
	display: block;
	text-decoration: none;
	background: var(--wp--preset--color--base);
	border-top: 5px solid var(--color-seccion, var(--wp--preset--color--identidad));
	border-radius: 12px;
	padding: 0.9rem 1rem;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07);
}
.scoutg3-correos-unidades a:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12); }
.scoutg3-correos-unidades strong { display: block; color: var(--color-seccion); font-size: 1.05rem; font-weight: 700; }
.scoutg3-correos-unidades span { display: block; font-size: 0.82rem; opacity: 0.7; margin-bottom: 0.35rem; }
.scoutg3-correos-unidades em { font-style: normal; font-size: 0.85rem; overflow-wrap: anywhere; }

.scoutg3-destino {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border-left: 5px solid var(--color-destino, var(--wp--preset--color--funcional));
	border-radius: 12px;
	padding: 1.1rem 1.25rem;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07);
}
.scoutg3-destino h4 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-destino, var(--wp--preset--color--funcional));
}
.scoutg3-destino p { margin: 0 0 0.75rem; font-size: 0.95rem; }
.scoutg3-destino__correo { font-weight: 600; overflow-wrap: anywhere; margin-top: auto; }

.scoutg3-destino--papeles   { --color-destino: var(--wp--preset--color--funcional); }
.scoutg3-destino--dinero    { --color-destino: var(--wp--preset--color--manada); }
.scoutg3-destino--ropa      { --color-destino: var(--wp--preset--color--tropa); }
.scoutg3-destino--buentrato { --color-destino: var(--wp--preset--color--esculta); }
.scoutg3-destino--datos     { --color-destino: var(--wp--preset--color--clan); }
.scoutg3-destino--grupo     { --color-destino: var(--wp--preset--color--castores); }
.scoutg3-destino--info      { --color-destino: var(--wp--preset--color--funcional); }