/* ==========================================================================
   Detalles con Amor — estilos propios del tema hijo
   Prefijo de clases: dca-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de marca
   -------------------------------------------------------------------------- */
:root {
	/* Colores */
	--c-brand: #5A3E36;        /* Marrón chocolate: texto, títulos, botón principal */
	--c-brand-hover: #A67C68;  /* Marrón caramelo: solo títulos grandes y detalles */
	--c-cream: #F7F3EE;        /* Blanco roto */
	--c-beige: #E9DCC9;        /* Beige cálido */
	--c-blush: #E8C7C0;        /* Maquillaje pastel */
	--c-peach: #F3D2B8;        /* Melocotón pastel */
	--c-sage: #D8E2D4;         /* Verde salvia */
	--c-taupe: #C8C1BB;        /* Gris topo */
	--c-white: #FFFFFF;

	/* Formas */
	--dca-radius-s: 8px;
	--dca-radius-m: 16px;
	--dca-radius-l: 24px;
	--dca-radius-pill: 999px;

	/* Sombras suaves en lugar de bordes duros */
	--dca-shadow-s: 0 1px 2px rgba(90, 62, 54, 0.06), 0 2px 8px rgba(90, 62, 54, 0.06);
	--dca-shadow-m: 0 2px 4px rgba(90, 62, 54, 0.06), 0 8px 24px rgba(90, 62, 54, 0.10);

	/* Movimiento */
	--dca-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dca-dur-fast: 150ms;
	--dca-dur: 250ms;

	/* Táctil */
	--dca-tap: 44px;
}

/* --------------------------------------------------------------------------
   2. Botones
   Dos formas de uso:
   - Enlace o botón propio: <a class="dca-btn dca-btn--primary">.
   - Bloque core/button: la clase (dca-btn--primary / dca-btn--soft) se pone
     en «Clase CSS adicional» y WordPress la deja en el contenedor
     div.wp-block-button; por eso los estilos se aplican a su enlace interior
     y nunca al contenedor (:not(.wp-block-button)).
   Los estilos globales de GreenShift para botones usan :root :where(...)
   (especificidad 0), así que estas reglas los sustituyen sin !important.
   -------------------------------------------------------------------------- */
.dca-btn,
.wp-block-button[class*="dca-btn--"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--dca-tap);
	padding: 0.75em 1.5em;
	border: 0;
	border-radius: var(--dca-radius-pill);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dca-dur-fast) var(--dca-ease-out),
		box-shadow var(--dca-dur) var(--dca-ease-out),
		background-color var(--dca-dur) var(--dca-ease-out);
}

/* Principal: chocolate + crema (contraste ≈ 9:1) */
.dca-btn--primary:not(.wp-block-button),
.wp-block-button.dca-btn--primary > .wp-block-button__link {
	background: var(--c-brand);
	color: var(--c-cream);
	box-shadow: var(--dca-shadow-s);
}
.dca-btn--primary:not(.wp-block-button):hover,
.wp-block-button.dca-btn--primary > .wp-block-button__link:hover {
	background: #4A322C; /* chocolate oscurecido: mantiene el contraste */
	color: var(--c-cream);
	box-shadow: var(--dca-shadow-m);
	transform: translateY(-1px);
}

/* Secundario: pastel con texto chocolate */
.dca-btn--soft:not(.wp-block-button),
.wp-block-button.dca-btn--soft > .wp-block-button__link {
	background: var(--c-peach);
	color: var(--c-brand);
}
.dca-btn--soft:not(.wp-block-button):hover,
.wp-block-button.dca-btn--soft > .wp-block-button__link:hover {
	background: var(--c-blush);
	color: var(--c-brand);
}

.dca-btn:active,
.wp-block-button[class*="dca-btn--"] > .wp-block-button__link:active {
	transform: translateY(0) scale(0.98);
}

.dca-btn:focus-visible,
.wp-block-button[class*="dca-btn--"] > .wp-block-button__link:focus-visible,
.dca-card:focus-visible {
	outline: 3px solid var(--c-brand);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Tarjetas
   -------------------------------------------------------------------------- */
.dca-card {
	background: var(--c-white);
	border-radius: var(--dca-radius-m);
	box-shadow: var(--dca-shadow-s);
	transition:
		transform var(--dca-dur) var(--dca-ease-out),
		box-shadow var(--dca-dur) var(--dca-ease-out);
}
@media (hover: hover) {
	.dca-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--dca-shadow-m);
	}
}

/* --------------------------------------------------------------------------
   4. Etiquetas
   -------------------------------------------------------------------------- */
.dca-tag {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: var(--dca-radius-pill);
	background: var(--c-sage);
	color: var(--c-brand);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   4b. Cabecera (todas las páginas)
   Parte de plantilla «Cabecera» (254), bloque de navegación con el menú
   «Menú Principal» (112). Un solo menú: la hamburguesa es el mismo menú
   plegado. Registrado en «Ajustes globales» de DECISIONES.md.
   -------------------------------------------------------------------------- */

/* Hamburguesa por debajo de 855 px. El tema padre la oculta desde 768 px
   (assets/coreblocks/navigation.css) y el bloque no permite elegir el corte.
   Con «Tartas de Pañales» y «Personaliza tu canastilla» en dos líneas, desde
   855 px quedan al menos 24 px entre «Tienda» y el icono de la cuenta (medido
   con el menú actual). Si cambian los textos del menú, volver a medirlo. */
@media (min-width: 768px) and (max-width: 854.98px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* «Tienda» (estilo «Botón principal») en el menú hamburguesa abierto:
   el color de menú móvil de GreenShift (#5A3E36) le ponía el texto del mismo
   color que el fondo. Alto mínimo táctil de 44 px. */
header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.is-style-primarybtn
	> .wp-block-navigation-item__content.wp-block-navigation-item__content {
	min-height: 44px;
	color: var(--c-cream) !important;
}

/* --------------------------------------------------------------------------
   5. Portada
   Página «Portada nueva» (plantilla no-title). Móvil primero:
   base < 700 px · tableta ≥ 700 px · escritorio ≥ 1100 px.
   -------------------------------------------------------------------------- */

/* 5.1 Hero: texto y botones arriba (sin scroll en móvil), imagen debajo */
.dca-hero {
	margin-block: 0;
	color: var(--c-brand);
}
.dca-hero > * {
	margin-block: 0;
}

.dca-hero__text {
	max-width: 36rem;
	margin-inline: auto;
	padding: 1.5rem 1.25rem 1.75rem;
	text-align: center;
}
.dca-hero__text > * {
	margin-block: 0;
}

.dca-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-brand);
}

.dca-hero h1 {
	margin-top: 0.5rem;
	text-align: center; /* los estilos globales alinean los títulos a la izquierda */
	font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
	line-height: 1.15;
	color: var(--c-brand);
}

.dca-hero__lead {
	margin-top: 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Botones apilados, ancho cómodo para el pulgar */
.dca-hero .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	max-width: 300px;
	margin: 1.25rem auto 0;
}
.dca-hero .wp-block-button,
.dca-hero .wp-block-button__link {
	width: 100%;
}

.dca-hero .wp-block-image {
	margin: 0;
}
.dca-hero .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.dca-hero-img-desk {
	display: none;
}

@media (min-width: 700px) {
	.dca-hero-img-mob {
		display: none;
	}
	.dca-hero-img-desk {
		display: block;
	}
}

/* Escritorio: imagen a todo el ancho y texto superpuesto en el hueco central
   (columna que empieza en el 36,5 % y ocupa el 27 % del ancho). */
@media (min-width: 1100px) {
	.dca-hero {
		display: grid;
		grid-template-columns: 36.5% 27% 1fr;
		align-items: center;
	}
	.dca-hero > .dca-hero-img-desk {
		grid-row: 1;
		grid-column: 1 / -1;
	}
	.dca-hero > .dca-hero__text {
		grid-row: 1;
		grid-column: 2;
		z-index: 1;
		max-width: none;
		padding: 0;
	}
}

/* 5.2 Banda «Personaliza tu canastilla» */
.dca-band {
	width: calc(100% - 2rem); /* margen lateral en móvil; el layout fija margin-inline */
	margin-block: 2.5rem;
	padding: 2rem 1.25rem;
	border-radius: var(--dca-radius-l);
	background: var(--c-peach);
	color: var(--c-brand);
	text-align: center;
}
.dca-band > * {
	margin-block: 0;
}
.dca-band h2 {
	color: var(--c-brand);
	text-align: center;
}
.dca-band p {
	margin-top: 0.75rem;
}
.dca-band .wp-block-buttons {
	justify-content: center;
	margin-top: 1.5rem;
}

@media (min-width: 700px) {
	.dca-band {
		padding: 3rem 2.5rem;
	}
}

/* Subtítulo de sección compartido (Para quién) */
.dca-section__subtitle {
	text-align: center;
	color: var(--c-brand);
}

/* --------------------------------------------------------------------------
   5b. Barra de ventajas
   Patrón «Barra de ventajas» (patterns/ventajas.php), debajo del hero de la
   portada actual. Móvil primero, cortes de GreenShift: 1 por fila,
   2 desde 768 px (tableta) y 4 desde 992 px (escritorio).
   Fuente y peso de los títulos: los heredan de los estilos globales.
   -------------------------------------------------------------------------- */
.dca-ventajas {
	margin-block: 0;
	padding: 40px 20px;
	background: var(--c-cream);
	color: var(--c-brand);
}

.dca-ventajas__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}

/* Icono, título y texto en columna, todo centrado sobre el mismo eje */
.dca-ventaja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	text-align: center;
}
.dca-ventaja > * {
	margin: 0; /* anula el margen del diseño de flujo de WordPress */
}

/* Icono: círculo de color, siempre centrado */
.dca-ventaja .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto;
	border-radius: var(--dca-radius-pill);
}
.dca-ventaja .wp-block-image img {
	width: 26px;
	height: 26px;
}

/* Colores de los círculos, en orden: melocotón, maquillaje, salvia, beige */
.dca-ventajas__lista > :nth-child(1) .wp-block-image { background: var(--c-peach); }
.dca-ventajas__lista > :nth-child(2) .wp-block-image { background: var(--c-blush); }
.dca-ventajas__lista > :nth-child(3) .wp-block-image { background: var(--c-sage); }
.dca-ventajas__lista > :nth-child(4) .wp-block-image { background: var(--c-beige); }

.dca-ventajas h3 {
	text-align: center; /* los estilos globales alinean los títulos a la izquierda */
	font-size: 18px;
	color: var(--c-brand);
}
.dca-ventajas p {
	max-width: 240px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-brand);
	text-wrap: balance; /* sin palabras sueltas en la última línea («100 %.», «detalle.») */
}

@media (min-width: 768px) {
	.dca-ventajas {
		padding: 48px 24px;
	}
	.dca-ventajas__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (min-width: 992px) {
	.dca-ventajas {
		padding: 56px 24px;
	}
	.dca-ventajas__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px;
	}
	.dca-ventajas h3 {
		font-size: 19px;
	}
}

/* --------------------------------------------------------------------------
   5c. Hero móvil (portada actual, página 987)
   Solo por debajo de 768 px; tableta y escritorio siguen con GreenShift.
   La caja del hero tiene la proporción de la imagen (1080 × 1170) y cada zona
   se coloca en % de esa caja, así cae en su sitio en cualquier ancho.
   Clases puestas en el editor de GreenShift:
     dca-hero-actual     fila «section» (gsbp-32246e1b-00d9). No usar «dca-hero»:
                         es la sección 5 (Portada nueva) y en escritorio la
                         convierte en rejilla centrada.
     dca-hero__caja      columna exterior (gsbp-d6405483-e713)
     dca-hero__capa      fila interior (gsbp-4bc1e5b8-a9fa)
     dca-hero__contenido columna interior (gsbp-7addf90b-cf8a)
     dca-hero__marca     contenedor con «Logo moviles» y «Subtitulo Moviles»
     dca-hero__texto     resumen de móvil (gsbp-08ba293)
     dca-hero__boton     botón de móvil (gsbp-970402c; queda en el enlace)
     dca-hero__imagen    «Imagen fondo moviles» (gsbp-1706c13)
   GreenShift escribe sus estilos con selectores de ID: los !important de esta
   sección anulan solo esos valores (altura 100vh, rellenos, posición relativa
   por defecto de sus contenedores) y solo en móvil.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.dca-hero-actual {
		min-height: 0 !important; /* GreenShift: 100vh en todos los tamaños */
	}

	/* Caja con la proporción de la imagen */
	.dca-hero-actual .dca-hero__caja {
		position: relative;
		aspect-ratio: 1080 / 1170;
		padding: 0 !important;
		overflow: hidden;
	}

	.dca-hero-actual .dca-hero__imagen {
		position: absolute !important;
		inset: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	/* Capa de contenido del tamaño de la caja: las zonas se miden sobre ella */
	.dca-hero-actual .dca-hero__capa {
		position: absolute !important;
		inset: 0;
		z-index: 2;
		margin: 0;
	}
	.dca-hero-actual .dca-hero__capa > .gspb_row__content {
		height: 100%;
	}
	.dca-hero-actual .dca-hero__contenido {
		position: relative;
		width: 100% !important;
		height: 100%;
		padding: 0 !important; /* GreenShift: 70 px arriba y 50 px abajo */
	}

	/* Zona 1: logotipo + eslogan, a la derecha y centrados en vertical */
	.dca-hero-actual .dca-hero__marca {
		position: absolute !important;
		top: 1.5%;
		right: 5%;
		width: 38%;
		height: 29.5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 0.25rem;
		margin: 0;
		padding: 0;
	}
	.dca-hero-actual .dca-hero__marca > * {
		width: 100%;
		margin: 0;
	}
	.dca-hero-actual .dca-hero__marca img {
		display: block;
		width: 100%;
		height: auto;
	}
	.dca-hero-actual .dca-hero__marca h3 {
		font-size: 15px; /* fuente y peso: los de los títulos (Fraunces 700) */
		line-height: 1.2;
		text-align: right;
		text-wrap: balance; /* dos líneas por el ancho de la zona */
		color: var(--c-brand); /* #A67C68 no llega al contraste a este tamaño */
	}

	/* Zona 2: resumen centrado */
	.dca-hero-actual .dca-hero__texto {
		position: absolute;
		top: 31%;
		right: 8%;
		left: 8%;
		width: auto;
		height: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		transform: none;
		font-size: 15px;
		line-height: 1.5;
		text-align: center;
		text-wrap: balance;
		color: var(--c-brand);
	}

	/* Zona 3: botón a la izquierda de la cesta del perro (que empieza en el 52 %).
	   GreenShift pone la clase en el enlace, no en su envoltorio: se coloca el
	   envoltorio (:has) y el enlace conserva su estilo; solo cambia tamaño y relleno. */
	.dca-hero-actual .gspb_button_wrapper:has(> .dca-hero__boton) {
		position: absolute;
		top: 80%;
		left: 4%;
		width: auto;
		margin: 0;
	}
	.dca-hero-actual .dca-hero__boton {
		display: inline-flex;
		align-items: center;
		min-height: var(--dca-tap);
		padding: 0 14px;
		font-size: 13px;
		letter-spacing: 0;
		white-space: nowrap;
	}
}

@media (max-width: 374px) {
	.dca-hero-actual .dca-hero__marca h3 {
		font-size: 13.5px;
	}
	.dca-hero-actual .dca-hero__texto {
		font-size: 14px;
	}
	.dca-hero-actual .dca-hero__boton {
		padding: 0 11px;
		font-size: 12.5px;
	}
}

/* Intro del hero en móvil (revelado de arriba abajo de GreenShift).
   Duración y curva: decisión de diseño aprobada (ver CLAUDE.md). Con
   movimiento reducido, la imagen aparece directamente. «Solo una vez» se
   activa en GreenShift (Animación › «Animate 1 time»): no se puede hacer con CSS. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.dca-hero-actual .dca-hero__imagen {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   5d. Hero tableta y portátil pequeño (768–1199 px), portada actual (987)
   Maqueta aprobada: artboards «Hero tableta · Propuesta» (768, 900 y 1100 px).
   Usa los bloques de escritorio, que GreenShift muestra desde 768 px (los de
   móvil ya están ocultos). El rango cruza el corte de GreenShift (992 px):
   aquí se fijan todos los valores que GreenShift cambia a un lado y otro,
   sin vaciar ningún ajuste del editor (escritorio ≥ 1200 no cambia).
   Clases puestas en el editor (además de dca-hero-actual, __caja, __capa y
   __contenido, comunes con 5c):
     dca-hero__logo      «Logo Escritorio» (gsbp-fbcdf8a)
     dca-hero__eslogan   «Subtitulo Escritorio» (gsbp-c8e02c9)
     dca-hero__resumen   «Resumen Escritorio» (gsbp-00f9f11)
     dca-hero__cta       botón de escritorio (gsbp-e57cc56d-8a3e; queda en el enlace)
     dca-hero__fondo     «box container escritorio imagen corrediza» (gsbp-a909cbac-67d8)
   Imagen: assets/img/hero-tableta.jpg (1536 × 1100). La cesta del bebé
   empieza en el 61 % de la altura y la del perro en el 67 %: el bloque de
   texto acaba en el 58 %.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.dca-hero-actual {
		min-height: 0 !important; /* GreenShift: 100vh en todos los tamaños */
	}

	/* Caja con la proporción de la imagen */
	.dca-hero-actual .dca-hero__caja {
		position: relative;
		aspect-ratio: 1536 / 1100;
		padding: 0 !important;
		overflow: hidden;
	}

	/* Imagen de tableta en el contenedor de escritorio (conserva su revelado) */
	.dca-hero-actual .dca-hero__fondo {
		background-image: url("../img/hero-tableta.jpg") !important;
		background-size: cover !important;
		background-position: center !important;
	}

	/* Capa de contenido del tamaño de la caja */
	.dca-hero-actual .dca-hero__capa {
		position: absolute !important;
		inset: 0;
		z-index: 2;
		margin: 0;
	}
	.dca-hero-actual .dca-hero__capa > .gspb_row__content {
		height: 100%;
	}

	/* Bloque único de texto, centrado, por encima de las cestas */
	.dca-hero-actual .dca-hero__contenido {
		position: absolute !important;
		top: 3%;
		right: 10%;
		left: 10%;
		width: auto !important; /* GreenShift: 75 %, 100 % o calc(100% - 20px) según el tramo */
		height: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0 !important; /* GreenShift: 120 px arriba y 100/50 px abajo */
	}

	/* 1. Logotipo: 27 % del ancho del hero (la columna mide el 80 %) */
	.dca-hero-actual .dca-hero__logo {
		position: static !important;
		flex: none;
		width: 33.75%;
		margin: 0;
	}
	.dca-hero-actual .dca-hero__logo img {
		display: block;
		width: 100% !important; /* GreenShift: 209 / 275 px */
		height: auto;
		transform: none !important;
	}

	/* 2. Eslogan: en chocolate, el caramelo no llega al contraste a 18 px */
	.dca-hero-actual .dca-hero__eslogan {
		position: static !important;
		margin: 10px 0 0 !important;
		transform: none !important;
		font-size: 18px !important; /* fuente y peso: los de los títulos (Fraunces 700) */
		line-height: 1.3 !important;
		white-space: nowrap;
		color: var(--c-brand) !important;
	}

	/* 3. Resumen */
	.dca-hero-actual .dca-hero__resumen {
		position: static !important;
		width: auto !important;
		max-width: 460px;
		margin: 14px 0 0 !important; /* GreenShift: 50 px abajo con !important */
		transform: none !important;
		font-size: 16px !important;
		line-height: 1.55 !important;
		text-wrap: balance;
		color: var(--c-brand) !important;
	}

	/* 4. Botón: conserva su estilo; cambian tamaño, relleno y posición.
	   La clase queda en el enlace: el envoltorio se coloca con :has(). */
	.dca-hero-actual .gspb_button_wrapper:has(> .dca-hero__cta) {
		position: static !important;
		justify-content: center !important;
		width: auto;
		margin: 22px 0 0 !important;
	}
	.dca-hero-actual .dca-hero__cta {
		display: inline-flex;
		align-items: center;
		min-height: 48px;
		padding: 0 24px;
		transform: none !important; /* GreenShift: -50 % en horizontal */
		font-size: 15px;
		white-space: nowrap;
	}
}

/* Intro del hero en tableta: revelado de izquierda a derecha del contenedor
   de escritorio. «Solo una vez» se activa en GreenShift y afecta también a
   escritorio. Con movimiento reducido, la imagen aparece directamente. */
@media (min-width: 768px) and (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
	.dca-hero-actual .dca-hero__fondo {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   5e. Hero escritorio (desde 1200 px), portada actual (987)
   Sin hueco debajo. La imagen de escritorio (1552 × 688) va en «contain»
   arriba a la izquierda dentro de una caja de 100vh, así que sobraba espacio
   bajo ella. Sin el 100vh, la caja toma la proporción de la imagen: la imagen
   ocupa el mismo sitio, los textos (colocados respecto a su columna) no se
   mueven y la barra de ventajas empieza donde acaba la imagen.
   Si se cambia la imagen por otra de distinta proporción, actualizar la cifra.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
	.dca-hero-actual {
		min-height: 0 !important; /* GreenShift: 100vh en todos los tamaños */
	}
	.dca-hero-actual .dca-hero__caja {
		aspect-ratio: 1552 / 688;
	}
}

/* --------------------------------------------------------------------------
   6. Categorías: Bebés / Mascotas
   Sección «¿Para quién es el regalo?» (#para-quien). Las tarjetas no son
   enlaces completos: contienen varios botones.
   -------------------------------------------------------------------------- */
.dca-doors {
	width: calc(100% - 2rem);
	margin-block: 2.5rem;
}
.dca-doors > h2 {
	margin-bottom: 0;
	text-align: center;
	color: var(--c-brand);
}
.dca-doors > .dca-section__subtitle {
	margin-top: 0.5rem;
}

/* core/columns es flex y se apila por debajo de 782 px; aquí se usa grid
   para apilar por debajo de 700 px y tener dos columnas desde 700 px. */
.dca-doors .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 1.75rem;
}
@media (min-width: 700px) {
	.dca-doors .wp-block-columns {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
}

.dca-door {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 1.5rem;
	color: var(--c-brand);
}
.dca-door > * {
	margin: 0.75rem 1.25rem 0;
}
.dca-door h3 {
	margin-top: 0.5rem;
	color: var(--c-brand);
}

/* Imagen: recorte de la imagen de escritorio del hero */
.dca-door > .dca-door__img {
	margin: 0 0 0.5rem;
}
.dca-door__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3; /* más alta que la imagen (≈ 2,25:1) para que cada tarjeta muestre su lado */
	object-fit: cover;
}
.dca-door--bebes .dca-door__img img {
	object-position: 12% 70%;
}
.dca-door--mascotas .dca-door__img img {
	object-position: 86% 70%;
}

/* Etiquetas de cada mundo */
.dca-door > .dca-tag {
	align-self: flex-start;
	margin-top: 0.75rem;
}
.dca-tag--blush {
	background: var(--c-blush);
}
.dca-tag--sage {
	background: var(--c-sage);
}

/* Botones abajo, alineados entre tarjetas */
.dca-door .wp-block-buttons {
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1.25rem;
}

/* Botón suave en blush (Tartas de pañales) */
.wp-block-button.dca-btn--soft.dca-btn--blush > .wp-block-button__link {
	background: var(--c-blush);
}
.wp-block-button.dca-btn--soft.dca-btn--blush > .wp-block-button__link:hover {
	background: var(--c-peach);
}

/* --------------------------------------------------------------------------
   6b. Tarjetas de categorías (portada actual, página 987)
   Las 4 tarjetas «Hover Box» de GreenShift dentro del «Content Area»
   gsbp-6bda85d, que lleva la clase dca-tarjetas. Cada tarjeta es un solo
   enlace (<a class="card">) con, en este orden:
     div 1   «Card Content»: h2 + div «Hover to top» (descripción + botón)
     div 2   «Overlay» (degradado)
     img     «Card Image»
   Los selectores dependen de ese orden: si se reordenan los bloques de una
   tarjeta en el editor, revisar esta sección (ver DECISIONES.md).
   Con ratón, la capa sale con :hover (CSS de GreenShift); aquí se añade lo
   mismo con el foco del teclado. En táctil, todo visible y un solo toque.
   Movimiento reducido: lo cubre la sección 9.
   -------------------------------------------------------------------------- */

/* Foco del teclado visible en todos los dispositivos */
.dca-tarjetas > a.card:focus-visible {
	outline: 3px solid var(--c-brand);
	outline-offset: 3px;
}

/* Ratón: el foco del teclado muestra la misma capa que el ratón encima.
   Mismos valores que las reglas «.gs-parent-hover:hover» de GreenShift; las
   transiciones (500 y 700 ms, excepción aprobada) son las suyas. */
@media (hover: hover) and (pointer: fine) {
	.dca-tarjetas > a.card:focus-visible > div:first-of-type {
		transform: translateY(0);
	}
	.dca-tarjetas > a.card:focus-visible > div:first-of-type > div {
		opacity: 1;
		transform: translateZ(0);
	}
	.dca-tarjetas > a.card:focus-visible > div:nth-of-type(2) {
		transform: translateY(-50%);
	}
	.dca-tarjetas > a.card:focus-visible > img {
		transform: translateY(-4%);
	}
}

/* Táctil: tarjeta entera como enlace, texto y acción siempre visibles sobre
   un degradado chocolate (artboard «Tarjetas · Móvil propuesta», 1 por fila).
   Los !important de transform, opacity y transition anulan las reglas
   «.gs-parent-hover:hover» de GreenShift, más específicas: así el toque no
   cambia nada visible y Safari entra al primer toque. */
@media (hover: none), (pointer: coarse) {
	.dca-tarjetas > a.card {
		align-items: stretch;
		padding: 0 20px 18px;
		border-radius: 14px;
		color: var(--c-cream);
	}
	.dca-tarjetas > a.card > div:first-of-type {
		display: flex;
		flex-direction: column;
		gap: 6px;
		text-align: left;
		transform: none !important;
		transition: none !important;
	}
	.dca-tarjetas > a.card h2 {
		margin: 0;
		font-size: 22px;
		line-height: 1.2;
		color: var(--c-cream);
	}
	.dca-tarjetas > a.card > div:first-of-type > div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	/* Descripción */
	.dca-tarjetas > a.card > div:first-of-type > div > div:first-of-type {
		margin: 0;
		font-size: 14px;
		font-style: normal;
		line-height: 1.45;
	}
	/* Acción: texto con flecha en lugar de la caja blanca */
	.dca-tarjetas > a.card > div:first-of-type > div > div:last-of-type {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 4px 0 0;
		padding: 0;
		background: none;
		color: var(--c-cream);
		font-size: 13px;
		letter-spacing: 0.04em;
	}
	.dca-tarjetas > a.card > div:first-of-type > div > div:last-of-type::after {
		content: "→";
		content: "→" / ""; /* decorativa: los lectores de pantalla no la leen */
	}
	/* Degradado chocolate en lugar del negro de GreenShift */
	.dca-tarjetas > a.card > div:nth-of-type(2) {
		height: 100%;
		background-image: linear-gradient(to top, rgba(90, 62, 54, 0.92) 0%, rgba(90, 62, 54, 0.8) 45%, rgba(90, 62, 54, 0) 80%); /* más fuerte que el del artboard: con aquel, título y descripción no llegaban al contraste mínimo */
		transform: none !important;
		transition: none !important;
	}
	.dca-tarjetas > a.card > img {
		height: 100%;
		transform: none !important;
		transition: none !important;
	}
}

/* Táctil por debajo de 576 px: 1 por fila (como GreenShift) y 300 px de alto */
@media (hover: none) and (max-width: 575.98px), (pointer: coarse) and (max-width: 575.98px) {
	.dca-tarjetas > a.card {
		height: 300px;
	}
}

/* Táctil de 992 a 1199 px: 2 por fila (GreenShift pone 4 desde 992 px).
   !important: las reglas de ancho de GreenShift van en línea, después de
   esta hoja, con la misma especificidad. */
@media (hover: none) and (min-width: 992px) and (max-width: 1199.98px), (pointer: coarse) and (min-width: 992px) and (max-width: 1199.98px) {
	.dca-tarjetas > a.card {
		width: calc(50% - (25px * (4 - 1) / 4)) !important;
	}
}

/* --------------------------------------------------------------------------
   7. Productos destacados
   Sección #destacados con el carrusel del plugin Krea ServiciosIT
   ([krea_carousel], v0.6.4). El plugin oculta el carrusel con
   max-width: 768px; para que la sección no quede vacía en móvil, título y
   subtítulo solo aparecen desde 769 px y en móvil queda el enlace a la tienda.
   -------------------------------------------------------------------------- */
.dca-featured {
	margin-block: 0;
	padding-block: 2rem;
	background: var(--c-beige);
	color: var(--c-brand);
	text-align: center;
	overflow-x: clip; /* el fondo 100vw del carrusel desborda ~20 px y crea scroll horizontal */
}
.dca-featured__title {
	text-align: center;
}
.dca-featured > * {
	margin-block: 0;
}

.dca-featured__title,
.dca-featured__subtitle {
	display: none;
}
@media (min-width: 769px) {
	.dca-featured {
		padding-block: 3rem;
	}
	.dca-featured__title {
		display: block;
		color: var(--c-brand);
	}
	.dca-featured__subtitle {
		display: block;
		margin-top: 0.5rem;
	}
	.dca-featured__link {
		margin-top: 0.75rem;
	}
}

.dca-featured__link a {
	display: inline-flex;
	align-items: center;
	min-height: var(--dca-tap);
	color: var(--c-brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.dca-featured__link a:hover {
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   8. WooCommerce: ficha, carrito, checkout (pendiente)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. Movimiento reducido: siempre al final
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}