/* Ofelia Berrido — scoped content overrides on top of the original Sunny Bonnell theme.
   Narrow, component-scoped selectors only. Never redefine theme primitives (img, h1, section, .card). */

/* "Ofelia en voz propia" hover CTA circle — was size-90 (9rem/9rem), text felt cramped.
   ~11% larger (10rem) for breathing room. Scoped to this one button only via an added class;
   the sticky-cards/books-grid js-readmore-btn instances (size-80) are untouched. */
.js-readmore-btn-voz-propia {
	width: 10rem;
	height: 10rem;
}

/* Sticky conversation cards — "CONVERSACIONES" is far longer than any original English word here
   (measured ~19% wider than the viewport at the theme's fluid h1 size, consistently from 650px up
   through 1920px since the type scales with vw). Scale down uniformly across the whole desktop range. */
@media (min-width: 650px) {
	.ideas-heading-scale {
		transform: scale(0.82);
		transform-origin: left center;
	}
}

/* Sticky conversation cards — hover-only override. Default state is intentionally left alone:
   the theme's own component CSS already sets .card-inner{background-color:#fff} (app.min.css,
   not a Tailwind utility), with plain inherited/black text — that's the original Sunny base,
   restored by simply not overriding it. Only the hover gets the custom Ofelia color.
   .card-1/.card-2/.card-3 are on the SAME element as .card-inner (not an ancestor) — target directly.
   Overrides the theme's generic hover:bg-[#f4f4f4] (higher specificity: 2 classes vs 1). */
.card-inner.card-1,
.card-inner.card-2,
.card-inner.card-3 {
	transition: background-color 0.3s, color 0.3s;
}
.card-inner.card-1:hover,
.card-inner.card-2:hover,
.card-inner.card-3:hover {
	background-color: #6c1713;
	color: #fff;
}

/* Institutional logos — monochrome black treatment (approved), keeps recognizability/crest detail.
   grayscale only (no brightness(0)) — a hard black clip flattens the PUCMM crest into an unreadable blob. */
.js-clients .client-item img {
	filter: grayscale(1) contrast(1.1);
}
/* Institutional logos — ~25% smaller than the theme's default max-w-[20rem]/max-w-[25rem], with
   room to breathe inside the existing card. object-fit:contain keeps each logo's own aspect ratio
   (w-full+h-auto already prevents cropping here, but contain is the explicit, correct intent). */
.js-clients .client-item img {
	max-width: 15rem;
	object-fit: contain;
}
@media (min-width: 650px) {
	.js-clients .client-item img {
		max-width: 18.75rem;
	}
}
/* hoy.svg's source pixels are white-on-transparent (checked via canvas pixel sampling) — invisible on
   the white card. Invert just this one logo so it renders dark like its five siblings. */
.js-clients .client-item img[alt="Hoy"] {
	filter: grayscale(1) invert(1) contrast(1.1);
}

/* Home + Books — book front/back 3D flip (approved addition) */
.book-flip {
	perspective: 1600px;
}
.book-flip-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.group:hover .book-flip-inner {
	transform: rotateY(180deg);
}
.book-flip-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.book-flip-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.book-flip-back {
	transform: rotateY(180deg);
}

/* Books grid — "not yet available" editorial state for the two upcoming titles only
   (Teoría Cuántica de la Experiencia Estética, Fábrica de Cavilaciones). Pure CSS generated
   content on the existing .picture wrapper — no new markup beyond the class + data attribute,
   published book cards are completely untouched. */
.book-upcoming::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: #efece6;
	opacity: 0.3;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.js-readmore-item:hover .book-upcoming::before {
	opacity: 0.18;
}
.book-upcoming::after {
	content: attr(data-upcoming-label);
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 3;
	background-color: rgba(255, 255, 255, 0.92);
	color: #1b1b1c;
	font-family: sans;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
	pointer-events: none;
}

/* Publicaciones archive filter — the theme's filter JS (app.min.js, untouched) hardcodes the
   literal string "All" as its "show everything" match, comparing each button's raw textContent.
   MASTER's copy calls for the visible label "Todo" (Spanish). Real textContent stays "All" so
   the click handler's equality check keeps working exactly as shipped; the glyph shown to
   visitors is swapped via generated content, so nobody ever sees the English word. Color
   mirrors the JS's own active/inactive toggle (it adds/removes the text-white class on click). */
.js-filter-all {
	color: transparent;
}
.js-filter-all::before {
	content: "Todo";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1b1b1c;
}
.js-filter-all.text-white::before {
	color: #fff;
}