/*
 * Modalidades plegables. La etiqueta "cep-modalidades" se pone UNA vez, en el
 * contenedor que agrupa las tarjetas; cada tarjeta es uno de sus hijos y su
 * cabecera es el primer bloque de la tarjeta (el azul con título y datos).
 *
 * Por debajo de 1025 px la tarjeta muestra solo la cabecera y despliega el
 * resto al pulsar. Por encima de ese ancho no se aplica nada.
 */

.cep-modalidades > * {
	position: relative;
}

/* ===================== escritorio: sin plegado ===================== */

@media (min-width: 1025px) {
	.cep-plegable-flecha {
		display: none !important;
	}
}

/*
 * Dentro del editor de Elementor no se pliega nada, ni siquiera en las vistas
 * de tableta y móvil: el cliente tiene que poder ver y editar todo el
 * contenido. Elementor marca el cuerpo con "elementor-editor-active". La
 * flecha sí se dibuja allí, para que el diseño se vea completo.
 */

/* ===================== móvil y tableta: acordeón ===================== */

@media (max-width: 1024px) {
	/* Todo salvo la cabecera se oculta mientras la tarjeta está cerrada */
	body:not(.elementor-editor-active) .cep-modalidades > :not(.cep-abierto) > :not(:first-child) {
		display: none;
	}

	body:not(.elementor-editor-active) .cep-modalidades > * > :first-child {
		position: relative;
		cursor: pointer;
	}

	/*
	 * Hueco a la derecha para que la flecha no se monte sobre el texto. Se
	 * excluye la propia flecha: si no, ese relleno la ensancha y descoloca.
	 */
	.cep-modalidades > * > :first-child > *:not(.cep-plegable-flecha) {
		padding-right: 36px;
	}

	/*
	 * Se repite la clase para ganar al estilo general de botones del kit de
	 * Elementor, que si no la convierte en un botón dorado grande.
	 * La posición vertical la calcula el JS: va centrada sobre el título.
	 */
	button.cep-plegable-flecha,
	.cep-plegable-flecha.cep-plegable-flecha {
		position: absolute;
		top: 16px;
		right: 16px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		min-width: 0;
		height: 20px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		font-size: 0;
		line-height: 0;
		cursor: pointer;
	}

	button.cep-plegable-flecha:hover,
	button.cep-plegable-flecha:focus,
	.cep-plegable-flecha.cep-plegable-flecha:hover {
		background: none;
		box-shadow: none;
		transform: none;
	}

	button.cep-plegable-flecha:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	.cep-plegable-flecha span {
		display: block;
		width: 20px;
		height: 20px;
		background: #fff;
		transition: transform .2s ease;
		-webkit-mask: url('/wp-content/uploads/2026/08/angle-small-down.svg') no-repeat center / contain;
		        mask: url('/wp-content/uploads/2026/08/angle-small-down.svg') no-repeat center / contain;
	}

	.cep-modalidades > .cep-abierto .cep-plegable-flecha span {
		transform: rotate(180deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cep-plegable-flecha span {
		transition: none;
	}
}