/* Carrusel de ofertas de la portada — shortcode [dharma_portada] */

.dwc-portada,
.dwc-portada * {
	box-sizing: border-box;
}

/*
 * container-type y no @media: el carrusel se pega dentro de una fila de
 * Divi, y esa fila puede ser el ancho completo de la pantalla o una
 * columna más estrecha. Lo que decide si cabe el diseño a dos columnas es
 * el ancho real del contenedor, no el del navegador.
 *
 * Las variables de tamaño se declaran en .dwc-portada__pista y no aquí: una
 * @container no puede redefinir propiedades sobre el mismo elemento que
 * declara container-type. Es la misma razón que en horario.css.
 */
.dwc-portada {
	position: relative;
	container-type: inline-size;
	container-name: dwc-portada;
	overflow: hidden;
	border-radius: 18px;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

.dwc-portada__pista {
	--dwc-p-alto: 0px;
	--dwc-p-aire: 26px;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*
	 * La pista es un scroll horizontal de verdad, no slides apiladas que
	 * JavaScript intercambia. Así el carrusel se desliza con el dedo y con
	 * el trackpad sin que escribamos un solo gesto, y si el JS no llega a
	 * cargar sigue siendo navegable: los botones de abajo solo llaman a
	 * scrollTo().
	 */
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

.dwc-portada__pista::-webkit-scrollbar {
	display: none;
}

/*
 * grid-template-rows: auto 1fr, y no dos filas automáticas.
 *
 * Todas las slides de la tira miden lo mismo -son un flex y se estiran a la
 * más alta-, así que en las cortas sobra alto. Con dos filas automáticas
 * ese sobrante se repartía entre las dos, pero la foto tiene tope de alto y
 * no podía crecer: el hueco aparecía como una banda blanca entre la foto y
 * el panel. Con 1fr, el sobrante se lo queda el panel y se ve como lo que
 * es, panel de color.
 */
.dwc-portada__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	/*
	 * En vertical la slide ocupa casi toda la ventana, como cualquier
	 * portada: la mitad de arriba es la foto y la de abajo el panel. Con la
	 * slide ajustada al contenido, la foto salía como una banda estrecha y
	 * parecía la miniatura de un artículo, no la portada del centro.
	 */
	min-height: min(88svh, 760px);
	position: relative;
}

/* Paletas. Son las del resto del sitio; no hay selector de color libre. */
.dwc-portada__slide--arena {
	--dwc-p-panel: #F4EBE0;
	--dwc-p-texto: #2C2622;
	--dwc-p-suave: #6F635A;
	--dwc-p-acento: #A2613C;
	--dwc-p-tarjeta: #FFFBF6;
	--dwc-p-linea: rgba(44, 38, 34, 0.16);
	--dwc-p-esquina: rgba(162, 97, 60, 0.10);
	--dwc-p-cta-fondo: #2C2622;
	--dwc-p-cta-texto: #FBF7F3;
}

.dwc-portada__slide--salvia {
	--dwc-p-panel: #DEE7DF;
	--dwc-p-texto: #23302A;
	--dwc-p-suave: #4F6156;
	--dwc-p-acento: #44705A;
	--dwc-p-tarjeta: #F7FBF7;
	--dwc-p-linea: rgba(35, 48, 42, 0.16);
	--dwc-p-esquina: rgba(68, 112, 90, 0.10);
	--dwc-p-cta-fondo: #23302A;
	--dwc-p-cta-texto: #F7FBF7;
}

.dwc-portada__slide--cacao {
	--dwc-p-panel: #6B5B4E;
	--dwc-p-texto: #FBF7F3;
	--dwc-p-suave: rgba(251, 247, 243, 0.78);
	--dwc-p-acento: #E8BA8C;
	--dwc-p-tarjeta: rgba(255, 255, 255, 0.13);
	--dwc-p-linea: rgba(251, 247, 243, 0.26);
	--dwc-p-esquina: rgba(232, 186, 140, 0.10);
	--dwc-p-cta-fondo: #FBF7F3;
	--dwc-p-cta-texto: #2C2622;
}

/* --- La foto ------------------------------------------------------- */

.dwc-portada__foto {
	position: relative;
	overflow: hidden;
	/*
	 * En vertical la foto es una banda, no media pantalla: el alto se mide
	 * contra la ventana (svh, el alto pequeño, el que queda con la barra
	 * del navegador desplegada) para que lo que viene debajo -el precio,
	 * los items y el botón- entre en la misma vista sin scroll.
	 *
	 * Alto directo y no aspect-ratio con max-height. Un elemento de grid
	 * con proporción intrínseca deja de estirarse a lo ancho de su celda
	 * -la alineación "normal" se comporta como "start" en cuanto hay
	 * proporción-, así que al recortar el alto encogía también el ancho y
	 * aparecía blanco a la derecha de la foto. Sin proporción, la foto
	 * ocupa el ancho entero y es object-fit quien recorta.
	 */
	width: 100%;
	height: clamp(260px, 46svh, 430px);
	background: #E7E0D8;
}

/*
 * La foto va en posición absoluta dentro de su hueco, y no en el flujo.
 * Si participa en el flujo, una foto vertical -las de las clases son de
 * móvil, 960x1280- impone su propio alto al carrusel entero: la tira es un
 * flex y todas las slides se estiran a la más alta, así que una sola foto
 * apaisada de más dejaba 250 píxeles de panel vacío en las otras tres.
 * Absoluta, el alto lo manda el texto y la foto se recorta para caber.
 */
.dwc-portada__foto picture {
	display: contents;
}

/*
 * img.dwc-portada__img y no .dwc-portada__img a secas: WooCommerce declara
 * `.woocommerce-page img { height: auto }`, y el <body> de la portada lleva
 * esa clase porque el sitio es una tienda. Con un solo nombre de clase la
 * suya pesa más (clase + etiqueta) y la foto volvía a su alto intrínseco,
 * dejando la parte de abajo del hueco con el color de fondo.
 */
.dwc-portada img.dwc-portada__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.dwc-portada__foto[data-foco="izquierda"] .dwc-portada__img {
	object-position: 22% center;
}

.dwc-portada__foto[data-foco="derecha"] .dwc-portada__img {
	object-position: 78% center;
}

.dwc-portada__foto--vacia {
	background: linear-gradient(135deg, #E7E0D8, #CFC4B8);
}

/* --- El panel de texto --------------------------------------------- */

.dwc-portada__panel {
	position: relative;
	z-index: 1;
	background: var(--dwc-p-panel);
	color: var(--dwc-p-texto);
	/* Centrado: cuando a una slide corta le sobra alto, el aire se reparte
	   arriba y abajo en vez de acumularse debajo del botón. */
	display: flex;
	align-items: center;
	/* El aire de abajo es para los puntos del carrusel, que flotan sobre
	   el panel. El botón de WhatsApp ya no compite por ese sitio: se
	   esconde mientras el carrusel esté delante (ver portada.js). */
	padding: 20px 18px 56px;
	/* Muerde la foto de arriba: el panel sube y la tapa por el borde
	   redondeado, que es lo que hace que las dos zonas se lean como una
	   sola pieza y no como dos bloques pegados. */
	margin-top: -26px;
	border-radius: 26px 26px 0 0;
}

/*
 * La esquina de color. Es el guiño a las referencias -esos triángulos
 * naranjas que asoman- traducido a la paleta de Dharma: el mismo acento
 * del titular, muy rebajado, para que sea textura y no un segundo foco.
 */
.dwc-portada__panel::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 26%;
	height: 34%;
	background: var(--dwc-p-esquina);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
	pointer-events: none;
}

.dwc-portada__texto {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
}

.dwc-portada__ante {
	margin: 0 0 8px;
	padding: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dwc-p-acento);
}

.dwc-portada__titular {
	margin: 0;
	padding: 0;
	/* Fredoka es la tipografía de titulares que el sitio ya carga; si no
	   estuviera disponible cae en la de texto y el diseño aguanta. */
	font-family: "Fredoka", "Open Sans", sans-serif;
	font-weight: 600;
	font-size: clamp(1.55rem, 6cqw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--dwc-p-texto);
	text-transform: none;
}

.dwc-portada__titular-linea {
	display: block;
}

.dwc-portada__titular-linea--acento {
	color: var(--dwc-p-acento);
}

.dwc-portada__precio {
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.dwc-portada__monto {
	font-family: "Fredoka", "Open Sans", sans-serif;
	font-weight: 600;
	font-size: clamp(1.6rem, 5cqw, 2.7rem);
	line-height: 1;
	letter-spacing: -0.01em;
}

.dwc-portada__sufijo {
	font-size: 1rem;
	color: var(--dwc-p-suave);
}

.dwc-portada__bajada {
	margin: 8px 0 0;
	padding: 0;
	font-size: 0.86rem;
	color: var(--dwc-p-suave);
}

/*
 * El párrafo de las slides que no tienen precio. Se limita por caracteres
 * y no por píxeles: lo que cansa de leer es la línea larga, y 46ch es
 * largo cómodo con cualquier cuerpo de letra.
 */
.dwc-portada__descripcion {
	margin: 10px 0 0;
	padding: 0;
	max-width: 46ch;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--dwc-p-suave);
}

/*
 * Los dos botones van en la misma fila también en el móvil. Apilados se
 * comían 60 píxeles de alto, que es justo lo que le falta a la foto para
 * ser la mitad de la pantalla, y dejaban media línea vacía al lado de cada
 * uno. Encogen (flex-shrink) antes que envolver: solo pasan a dos líneas
 * si de verdad no caben.
 */
.dwc-portada__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

/* --- Los elementos de la oferta ------------------------------------ */

.dwc-portada__items {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
}

/*
 * Los items van en columnas -icono arriba, nombre y detalle debajo-
 * también en el móvil, y no apilados uno por línea. Apilados, la slide
 * medía dos pantallas de alto y el botón quedaba fuera de la vista: en un
 * carrusel de ofertas, lo que no se ve de una es como si no existiera.
 */
.dwc-portada__item {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.dwc-portada__item-texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.dwc-portada__item + .dwc-portada__item {
	border-left: 1px solid var(--dwc-p-linea);
}

.dwc-portada__item--destacado {
	background: var(--dwc-p-tarjeta);
	border-radius: 16px;
	padding: 12px 8px;
	box-shadow: 0 10px 26px rgba(44, 38, 34, 0.10);
}

.dwc-portada__item--destacado,
.dwc-portada__item--destacado + .dwc-portada__item {
	border-left-color: transparent;
}

.dwc-portada__icono {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dwc-p-tarjeta);
	color: var(--dwc-p-acento);
	display: grid;
	place-items: center;
	flex: none;
}

.dwc-portada__item--destacado .dwc-portada__icono {
	background: var(--dwc-p-panel);
}

.dwc-portada__icono svg {
	width: 20px;
	height: 20px;
}

.dwc-portada__item-nombre {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.25;
}

.dwc-portada__item--destacado .dwc-portada__item-nombre {
	color: var(--dwc-p-acento);
}

.dwc-portada__item-detalle {
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--dwc-p-suave);
}

/* --- El botón ------------------------------------------------------- */

.dwc-portada__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 13px 20px;
	font-size: 0.85rem;
	white-space: nowrap;
	border-radius: 999px;
	background: var(--dwc-p-cta-fondo);
	color: var(--dwc-p-cta-texto);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dwc-portada__cta:hover,
.dwc-portada__cta:focus {
	color: var(--dwc-p-cta-texto);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(44, 38, 34, 0.22);
}

.dwc-portada__cta svg {
	width: 18px;
	height: 18px;
}

.dwc-portada__cta--segundo {
	background: transparent;
	color: var(--dwc-p-texto);
	box-shadow: inset 0 0 0 1.5px var(--dwc-p-texto);
}

.dwc-portada__cta--segundo:hover,
.dwc-portada__cta--segundo:focus {
	color: var(--dwc-p-texto);
	box-shadow: inset 0 0 0 1.5px var(--dwc-p-texto), 0 12px 26px rgba(44, 38, 34, 0.16);
}

/*
 * El botón flotante de WhatsApp (plugin wp-whatsapp-chat) mientras el
 * carrusel tapa esa esquina.
 *
 * No se quita, se esconde: el botón es de otro plugin y sigue existiendo
 * para el resto de la página. La clase la pone y la quita portada.js sobre
 * el <html> -no sobre el body, que es de Divi- en cuanto el carrusel deja
 * de ocupar la franja de abajo, o sea en cuanto alguien baja un poco.
 */
.dwc-portada-chat-oculto .qlwapp {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.qlwapp {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.dwc-portada-chat-oculto .qlwapp,
	.qlwapp {
		transition: none;
	}
}

/* --- Flechas y puntos ----------------------------------------------- */

.dwc-portada__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #2C2622;
	display: none;
	place-items: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 16px rgba(44, 38, 34, 0.18);
	transition: background 0.2s ease;
	z-index: 3;
}

.dwc-portada__flecha:hover {
	background: #fff;
}

.dwc-portada__flecha svg {
	width: 20px;
	height: 20px;
}

.dwc-portada__flecha--atras {
	left: 14px;
}

.dwc-portada__flecha--adelante {
	right: 14px;
}

.dwc-portada__puntos {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 11px;
	border-radius: 999px;
	/*
	 * La píldora translúcida no es decoración: los puntos quedan encima
	 * del panel, y el panel puede ser crema o cacao según la slide. Sin
	 * este fondo propio habría que elegir un color de punto que se viera
	 * bien sobre los dos, y no lo hay.
	 */
	background: rgba(255, 255, 255, 0.66);
	backdrop-filter: blur(6px);
	z-index: 3;
}

.dwc-portada__punto {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(44, 38, 34, 0.3);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.dwc-portada__punto[aria-current="true"] {
	width: 24px;
	background: #2C2622;
}

.dwc-portada__flecha:focus-visible,
.dwc-portada__punto:focus-visible,
.dwc-portada__cta:focus-visible {
	outline: 2px solid #2C2622;
	outline-offset: 3px;
}

/*
 * Pantallas estrechas (360 px y por ahí). Los dos botones caben en una
 * fila solo si encogen: con el tamaño normal suman 342 píxeles y la
 * columna mide 332, así que envolvían y la foto perdía otros 50 píxeles.
 */
@container dwc-portada (max-width: 400px) {
	.dwc-portada__cta {
		padding: 12px 15px;
		font-size: 0.8rem;
		gap: 6px;
	}

	.dwc-portada__cta svg {
		width: 16px;
		height: 16px;
	}

	.dwc-portada__item-nombre {
		font-size: 0.64rem;
	}

	.dwc-portada__item-detalle {
		font-size: 0.64rem;
	}
}

/* --- Dos columnas, cuando hay sitio --------------------------------- */

@container dwc-portada (min-width: 760px) {
	.dwc-portada__slide {
		grid-template-columns: 44% 56%;
		grid-template-rows: minmax(0, 1fr);
		min-height: clamp(440px, 42cqw, 620px);
	}

	.dwc-portada__cta {
		padding: 14px 28px;
		font-size: 0.92rem;
		gap: 10px;
	}

	/*
	 * La foto se sale de su columna a propósito. El panel la invade y se
	 * corta en diagonal, así que su borde superior queda unos puntos más a
	 * la derecha que el final de la columna de la foto: con la foto a
	 * ancho exacto, ahí asomaba un triángulo blanco. Ese sobrante lo tapa
	 * el propio panel, que va por encima.
	 */
	.dwc-portada__foto {
		grid-area: 1 / 1 / 2 / 2;
		height: auto;
		width: 112%;
		max-width: none;
	}

	.dwc-portada__panel {
		grid-area: 1 / 2 / 2 / 3;
		margin-top: 0;
		/* El panel invade la columna de la foto y se corta en diagonal.
		   Ese corte es lo que separa las dos zonas sin una línea recta,
		   como en las referencias. */
		margin-left: -7%;
		border-radius: 0;
		clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
		/* El aire de arriba es mayor que el de abajo a propósito: la barra
		   de menú del sitio flota por encima del carrusel, y con padding
		   simétrico el antetítulo quedaba debajo del menú. */
		padding: clamp(64px, 7cqw, 110px) clamp(36px, 5cqw, 72px) clamp(56px, 5cqw, 72px) clamp(64px, 9cqw, 130px);
	}

	.dwc-portada__items {
		gap: clamp(8px, 1.4cqw, 20px);
		margin-top: clamp(20px, 2.6cqw, 32px);
		flex-wrap: nowrap;
	}

	/*
	 * El separador vertical entre items solo existe aquí: es el gesto de
	 * las referencias, y necesita que los items estén en columnas.
	 */
	.dwc-portada__item {
		gap: 7px;
		padding: 10px 8px;
	}

	.dwc-portada__item--destacado {
		border-radius: 18px;
		padding: 14px 12px;
	}

	.dwc-portada__item-nombre {
		font-size: 0.74rem;
	}

	.dwc-portada__item-detalle {
		font-size: 0.72rem;
	}

	.dwc-portada__icono {
		width: 44px;
		height: 44px;
	}

	.dwc-portada__icono svg {
		width: 22px;
		height: 22px;
	}

	.dwc-portada__botones {
		gap: 10px;
	}

	.dwc-portada__botones {
		margin-top: clamp(20px, 2.6cqw, 32px);
	}

	.dwc-portada__flecha {
		display: grid;
	}

	.dwc-portada__puntos {
		/* Centrados sobre el panel, no sobre la slide entera: sobre la
		   foto se perderían contra cualquier imagen clara. */
		left: 72%;
		bottom: 20px;
	}
}

@container dwc-portada (min-width: 1100px) {
	.dwc-portada__item-nombre {
		font-size: 0.8rem;
	}

	.dwc-portada__item-detalle {
		font-size: 0.76rem;
	}

	.dwc-portada__descripcion {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dwc-portada__pista {
		scroll-behavior: auto;
	}

	.dwc-portada__cta,
	.dwc-portada__punto {
		transition: none;
	}

	.dwc-portada__cta:hover,
	.dwc-portada__cta:focus {
		transform: none;
	}
}