/* ==========================================================================
   Delia MK · Casos de éxito: mosaico masonry con tarjetas volteables
   ========================================================================== */

.dm-case {
	--dm-card-ink: #2b2b2b;
	--dm-radius: 8px;
	--dm-gap: 1rem;
}

/* Row: forzar que las columnas se igualen al fondo común */
.dm-case > .kt-row-column-wrap {
	align-items: stretch;
}
.dm-case .dm-col {
	align-self: stretch;
	height: 100%;
}
.dm-case .dm-col > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	gap: var(--dm-gap);
	height: 100%;
	min-height: 100%;
}

/* Reparto vertical: solo dm-grow absorbe el sobrante */
.dm-case .dm-grow {
	flex: 1 1 auto;
}
.dm-case .dm-col > .kt-inside-inner-col > .wp-block-kadence-column:not(.dm-grow) {
	flex: 0 0 auto;
}

/* Alturas mínimas por tipo de tarjeta */
.dm-case .dm-h-s { min-height: 150px; }
.dm-case .dm-h-l { min-height: 260px; }

/* Tarjeta volteable */
.dm-case .wp-block-kadence-column.dm-flip {
	position: relative;
	perspective: 1400px;
}
.dm-case .wp-block-kadence-column.dm-flip > .kt-inside-inner-col {
	display: grid;
	height: 100%;
	min-height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dm-case .wp-block-kadence-column.dm-flip > .kt-inside-inner-col > .dm-face {
	grid-area: 1 / 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin: 0;
}
.dm-case .dm-face--back {
	transform: rotateY(180deg);
}
.dm-case .dm-flip.is-flipped > .kt-inside-inner-col {
	transform: rotateY(180deg);
}
@media (hover: hover) and (pointer: fine) {
	.dm-case .dm-flip:hover > .kt-inside-inner-col {
		transform: rotateY(180deg);
	}
	.dm-case .dm-flip {
		cursor: pointer;
	}
}

/* Caras */
.dm-case .dm-face,
.dm-case .dm-social {
	position: relative;
	border-radius: var(--dm-radius);
	overflow: hidden;
	color: var(--dm-card-ink);
}
.dm-case .dm-face > .kt-inside-inner-col {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.dm-case .dm-face h2,
.dm-case .dm-face h3,
.dm-case .dm-face p,
.dm-case .dm-face li {
	color: inherit;
}
.dm-case .dm-face p,
.dm-case .dm-face li {
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}
.dm-case .dm-face ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* Etiquetas de la cara frontal: abajo a la izquierda */
.dm-case .dm-face--front > .kt-inside-inner-col {
	justify-content: flex-end;
}
.dm-case .dm-label {
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	padding-right: 2.5rem;
}

/* Marca */
.dm-case .dm-face--brand > .kt-inside-inner-col {
	justify-content: center;
	align-items: center;
	text-align: center;
}
.dm-case .dm-face--brand .dm-label {
	padding-right: 0;
	color: #555555;
}
.dm-case .dm-face--brand figure,
.dm-case .dm-logo {
	margin: 0;
	max-width: 85%;
}
.dm-case .dm-face--brand img,
.dm-case .dm-logo img {
	display: block;
	max-height: 140px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

/* Foto */
.dm-case .dm-face--photo {
	--dm-card-ink: #ffffff;
}

/* Redes */
.dm-case .dm-social > .kt-inside-inner-col {
	justify-content: center;
}
.dm-case .dm-social .kt-svg-icons {
	justify-content: space-evenly;
}

/* Botón + */
.dm-case .dm-flip-toggle {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--dm-toggle-ink, #2b2b2b);
	font: 600 1.1rem/1 var(--global-body-font-family);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.3s ease;
}
.dm-case .dm-flip--photo .dm-flip-toggle {
	--dm-toggle-ink: #ffffff;
}
.dm-case .dm-flip.is-flipped .dm-flip-toggle,
.dm-case .dm-flip:hover .dm-flip-toggle {
	--dm-toggle-ink: #2b2b2b;
	transform: rotate(45deg);
}
.dm-case .dm-flip-toggle:focus-visible {
	outline: 2px solid #2b2b2b;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dm-case .wp-block-kadence-column.dm-flip > .kt-inside-inner-col,
	.dm-case .dm-flip-toggle {
		transition: none;
	}
}

@media (max-width: 767px) {
	.dm-case .dm-h-l { min-height: 220px; }
}


/* ==========================================================================
   Blog: hero de cabecera + márgenes del listado (v3 — !important forzado).
   ========================================================================== */

/* Section: imagen de fondo con parallax, altura viewport completa */
body.blog .entry-hero.post-archive-hero-section {
	position: relative !important;
	min-height: 100vh !important;
	background-image: url("https://deliarodriguezmarketing.com/wp-content/uploads/2025/06/Web-20250517_134915-scaled.jpg") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Overlay palette2 al 50% sobre el div que Kadence ya inserta */
body.blog .entry-hero.post-archive-hero-section .hero-section-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: var(--global-palette2, #d28a5e) !important;
	opacity: 0.65 !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

/* Inner container: viewport height, flex center, padding-bottom para subir el título */
body.blog .entry-hero.post-archive-hero-section .entry-hero-container-inner {
	position: relative !important;
	z-index: 2 !important;
	min-height: 100vh !important;
	padding-bottom: 15vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	width: 100% !important;
}

/* Contenedores intermedios transparentes y a ancho completo */
body.blog .entry-hero.post-archive-hero-section .hero-container,
body.blog .entry-hero.post-archive-hero-section .entry-header,
body.blog .entry-hero.post-archive-hero-section .post-archive-title {
	background: transparent !important;
	width: 100% !important;
	max-width: none !important;
	text-align: center !important;
	padding: 0 !important;
	border: none !important;
	position: relative !important;
	z-index: 5 !important;
}

/* Título BLOG: blanco puro, mayúsculas, un pelín más grande */
body.blog .entry-hero.post-archive-hero-section .page-title,
body.blog .entry-hero.post-archive-hero-section h1.page-title,
body.blog .entry-hero.post-archive-hero-section .archive-title,
body.blog .entry-hero.post-archive-hero-section h1 {
	color: #ffffff !important;
	text-transform: none !important;
	font-size: clamp(2.8rem, 5.5vw, 4rem) !important;
	font-weight: 700 !important;
	margin: 0 !important;
	text-align: center !important;
	background: transparent !important;
	line-height: 1.15 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
	letter-spacing: 0.02em !important;
	position: relative !important;
	z-index: 6 !important;
}

/* Márgenes laterales del listado — ajustados al ancho "narrow" del design system
   para que coincidan con las secciones tipo "cajitas" de la home */
body.blog #primary.content-area .content-container.site-container {
	max-width: var(--global-content-narrow-width, 842px) !important;
	padding-left: var(--global-content-edge-padding, 1.5rem) !important;
	padding-right: var(--global-content-edge-padding, 1.5rem) !important;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Home · Tarjetas de Casos de éxito (patrón sincronizado 560): tamaño del logo
   ========================================================================== */
.dm-home-case-logo,
.dm-home-case-logo figure {
	margin: 0 0 0.75rem 0 !important;
}
.dm-home-case-logo img {
	max-height: 110px !important;
	max-width: 220px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
}

/* ==========================================================================
   Home · Tarjetas de Casos de éxito: tipografía en blanco y hover
   El anchor del outer row es "casos", así que #casos scopea todo al patrón.
   ========================================================================== */

/* Textos en blanco sobre las tarjetas de color */
#casos .kb-section-has-link .wp-block-kadence-advancedheading,
#casos .kb-section-has-link .wp-block-kadence-advancedheading * {
	color: var(--global-palette8, #f7fafc) !important;
}

/* Hover: la tarjeta sube ligeramente y gana una sombra suave */
#casos .wp-block-kadence-column.kb-section-has-link {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
	            box-shadow 0.35s ease;
	will-change: transform;
}
#casos .wp-block-kadence-column.kb-section-has-link:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 32px rgba(43, 43, 43, 0.18);
}

/* El logo se aumenta un pelín cuando pasas el ratón */
#casos .kb-section-has-link .dm-home-case-logo img {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#casos .wp-block-kadence-column.kb-section-has-link:hover .dm-home-case-logo img {
	transform: scale(1.06);
}

/* Movimiento reducido: sin efectos */
@media (prefers-reduced-motion: reduce) {
	#casos .wp-block-kadence-column.kb-section-has-link,
	#casos .kb-section-has-link .dm-home-case-logo img {
		transition: none;
	}
	#casos .wp-block-kadence-column.kb-section-has-link:hover {
		transform: none;
	}
	#casos .wp-block-kadence-column.kb-section-has-link:hover .dm-home-case-logo img {
		transform: none;
	}
}

/* Centrar horizontalmente el contenido de cada tarjeta (logo + nombre + Ver caso) */
#casos .kb-section-has-link .kt-inside-inner-col {
	align-items: center !important;
	text-align: center !important;
}
#casos .kb-section-has-link .dm-home-case-logo,
#casos .kb-section-has-link .dm-home-case-logo figure {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hostel Raíces tiene el logo casi cuadrado (ratio 1.04), así que necesita
   más altura para pesar visualmente lo mismo que los panorámicos (1.78). */
#casos .kb-section-has-link img.wp-image-590 {
	max-height: 150px !important;
	max-width: 200px !important;
}

/* Blindar altura idéntica de las tres tarjetas (Kadence "height" es min-height,
   por eso al meter un logo más alto en HR se estiraba). */
#casos .kb-section-has-link {
	height: 260px !important;
}
@media (max-width: 1023px) {
	#casos .kb-section-has-link {
		height: 220px !important;
	}
}
@media (max-width: 767px) {
	#casos .kb-section-has-link {
		height: 190px !important;
	}
}

/* ==========================================================================
   Post single del blog: mismo tratamiento de hero que en el archive
   (imagen de fondo + overlay palette2 + título blanco).
   ========================================================================== */

body.single-post .entry-hero.post-hero-section {
	position: relative !important;
	min-height: 100vh !important;
	background-image: url("https://deliarodriguezmarketing.com/wp-content/uploads/2025/06/Web-20250517_134915-scaled.jpg") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	padding: 0 !important;
	overflow: hidden !important;
}

body.single-post .entry-hero.post-hero-section .hero-section-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: var(--global-palette2, #d28a5e) !important;
	opacity: 0.65 !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

body.single-post .entry-hero.post-hero-section .entry-hero-container-inner {
	position: relative !important;
	z-index: 2 !important;
	min-height: 100vh !important;
	padding-bottom: 15vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	width: 100% !important;
}

body.single-post .entry-hero.post-hero-section .hero-container,
body.single-post .entry-hero.post-hero-section .entry-header,
body.single-post .entry-hero.post-hero-section .post-title {
	background: transparent !important;
	width: 100% !important;
	max-width: none !important;
	text-align: center !important;
	padding: 0 !important;
	border: none !important;
	position: relative !important;
	z-index: 5 !important;
}

body.single-post .entry-hero.post-hero-section .entry-title,
body.single-post .entry-hero.post-hero-section h1 {
	color: #ffffff !important;
	text-transform: none !important;
	font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
	font-weight: 700 !important;
	margin: 0 !important;
	text-align: center !important;
	background: transparent !important;
	line-height: 1.15 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
	letter-spacing: 0.02em !important;
	position: relative !important;
	z-index: 6 !important;
}

body.single-post .entry-hero.post-hero-section .entry-meta,
body.single-post .entry-hero.post-hero-section .entry-meta a,
body.single-post .entry-hero.post-hero-section .category-style-normal a,
body.single-post .entry-hero.post-hero-section .kadence-breadcrumbs,
body.single-post .entry-hero.post-hero-section .kadence-breadcrumbs a,
body.single-post .entry-hero.post-hero-section .entry-hero-excerpt {
	color: var(--global-palette8, #f7fafc) !important;
	text-align: center !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Meta del post single (autor + fecha) arriba del contenido del artículo.
   ========================================================================== */
body.single-post .entry-content .dm-post-meta {
	font-family: var(--global-body-font-family);
	font-size: 0.9rem;
	color: var(--global-palette6, #718096);
	margin: 0 0 1.5rem 0;
	letter-spacing: 0.02em;
}
body.single-post .entry-content .dm-post-meta-inner {
	display: inline-block;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--global-palette7, #f5f5f5);
}

/* ==========================================================================
   Blog listado · padding generoso arriba/abajo y etiqueta de categoría
   con contraste suficiente.
   ========================================================================== */

/* Más aire entre el hero y el listado, y entre el listado y el footer */
body.blog #primary.content-area {
	margin-top: 7rem !important;
	margin-bottom: 7rem !important;
}
@media (max-width: 1023px) {
	body.blog #primary.content-area {
		margin-top: 5rem !important;
		margin-bottom: 5rem !important;
	}
}
@media (max-width: 767px) {
	body.blog #primary.content-area {
		margin-top: 3.5rem !important;
		margin-bottom: 3.5rem !important;
	}
}

/* Etiqueta de categoría: terracota + negrita + más tamaño */
body.blog .entry-taxonomies .category-links a,
body.blog .entry-taxonomies a[class*="category-link"] {
	color: var(--global-palette2, #d28a5e) !important;
	font-weight: 700 !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-decoration: none;
}
body.blog .entry-taxonomies .category-links a:hover,
body.blog .entry-taxonomies a[class*="category-link"]:hover {
	color: var(--global-palette4, #2b2b2b) !important;
}