/* Ishiku Lemu · fichas de las plantas (fichas.js): botón sobre cada cartel y ventana con
   foto, nombre y descripción. Misma familia que las tarjetas: crema, radio 20 px. */

/* Botón transparente sobre el cartel del dibujo (que va detrás del contenido). */
.cc-cartel-boton {
	position: absolute;
	z-index: 4;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}

.cc-cartel-boton:focus-visible {
	outline: 2px solid var(--cc-acento);
	outline-offset: 3px;
}

/* Al pasar el mouse el cartel se aviva un poco para mostrar que es un enlace. */
.cc-hoja.cc-hoja--cartel-activo {
	--cc-cartel-op: 0.6;
}

.cc-sobre-oscuro .cc-hoja.cc-hoja--cartel-activo {
	--cc-cartel-op: 0.7;
}

/* Ventana */
.cc-planta-ficha {
	inset: 0;
	width: min(100% - 32px, 880px);
	margin: auto; /* el reset del tema anula el centrado propio de <dialog> */
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--cc-crema);
	color: var(--cc-tinta);
	overflow: auto;
}

.cc-planta-ficha::backdrop {
	background: rgba(26, 46, 26, 0.72);
}

.cc-planta-ficha-caja {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.cc-planta-ficha-foto {
	position: relative;
	margin: 0;
	background: var(--cc-noche);
}

.cc-planta-ficha-foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 70dvh;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.cc-planta-ficha-texto {
	align-self: center;
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.cc-planta-ficha-texto .cc-etiqueta {
	margin-bottom: 0.625rem;
}

.cc-planta-ficha-nombre {
	margin: 0;
	padding: 0;
	font-family: Raleway, sans-serif;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--cc-noche);
}

.cc-planta-ficha-nombre::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 0.875rem;
	background: var(--cc-acento);
}

.cc-planta-ficha-cientifico {
	margin: 0.875rem 0 0;
	padding: 0;
	font-style: italic;
	color: var(--cc-muted, #5c5443);
}

.cc-planta-ficha-descripcion {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.cc-planta-ficha-cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cc-papel);
	color: var(--cc-noche);
	cursor: pointer;
}

.cc-planta-ficha-cerrar:hover {
	background: #fffdf8;
}

.cc-planta-ficha-cerrar:focus-visible {
	outline: 2px solid var(--cc-acento);
	outline-offset: 2px;
}

@media (max-width: 680px) {
	.cc-planta-ficha-caja {
		grid-template-columns: 1fr;
	}

	.cc-planta-ficha-foto img {
		max-height: 42dvh;
		aspect-ratio: 4 / 3;
	}
}

html.cc-mov .cc-planta-ficha[open] {
	animation: cc-planta-ficha-entra 260ms var(--cc-mov-curva, ease-out);
}

@keyframes cc-planta-ficha-entra {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}