/*
Theme Name: DePaw
Theme URI: https://depaw.co
Description: Tema hijo de Twenty Twenty-Five con el sistema de diseno de DePaw: paleta, tipografia y espaciado del manual de marca.
Author: Snapik
Template: twentytwentyfive
Version: 7.15.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: depaw
Tags: block-patterns, full-site-editing
*/

:root {
	--depaw-radius: 8px;
}

/* ---------------------------------------------------------------
   Radio 8 global: imagenes, botones, campos y tarjetas.
   theme.json cubre los bloques nativos; esto cubre WooCommerce,
   formularios y los bloques de GenerateBlocks y Kadence.
   --------------------------------------------------------------- */

.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-media-text__media img,
.wp-block-cover,
.wp-block-gallery .wp-block-image img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img,
.kb-gallery-item img,
.kt-blocks-carousel img,
.gb-container img {
	border-radius: var(--depaw-radius);
}

/* El logotipo de DePaw es cuadrado y con fondo propio: lleva el mismo radio
   que el resto del sistema, como en la pagina de uso del manual de marca. */
.wp-block-site-logo img,
.custom-logo {
	border-radius: var(--depaw-radius);
}


button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.kb-button,
.gb-button {
	border-radius: var(--depaw-radius);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.wp-block-search__input,
.wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single,
.kb-form-field input,
.kb-form-field textarea,
.kb-form-field select {
	border-radius: var(--depaw-radius);
	border: 1px solid var(--wp--preset--color--border);
}

/* Tarjetas y contenedores con fondo propio */
.wc-block-grid__product,
.woocommerce ul.products li.product,
.wp-block-post-template li,
.kb-info-box-wrap,
.kt-accordion-panel,
.wp-block-details,
.wp-block-table figure,
.wp-block-table table {
	border-radius: var(--depaw-radius);
}

.wp-block-table table {
	overflow: hidden;
}

/* ---------------------------------------------------------------
   Detalles de marca
   --------------------------------------------------------------- */

/* Bloque de preguntas frecuentes (details nativo) */
.wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 2px;
}

/* Foco visible y consistente en toda la interfaz */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 2px;
}

/* Tablas legibles */
.wp-block-table th {
	background: var(--wp--preset--color--surface);
	text-align: left;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------
   Cabecera de tienda: barra de aviso, navegacion y hero con promociones
   --------------------------------------------------------------- */

/* ---------- Barra superior de aviso ---------- */
.depaw-topbar {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-topbar p {
	font-size: .85rem;
	font-weight: 500;
	color: var(--wp--preset--color--morado);
	letter-spacing: .01em;
}

/* ---------- Barra de navegacion ---------- */
.depaw-navbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #d3b8ea;
}

.depaw-navbar-in {
	gap: 1rem;
	padding-block: .55rem;
	padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	min-height: 78px;
}

/* Menu a la izquierda, en mayusculas */
.depaw-navbar .depaw-menu {
	flex: 1 1 0;
}

.depaw-navbar .wp-block-navigation__container {
	gap: 1.1rem;
}

.depaw-navbar .wp-block-navigation-item__content {
	font-size: .8rem;
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
	transition: border-color .15s ease;
}

.depaw-navbar .wp-block-navigation-item__content:hover {
	box-shadow: none;
	border-bottom-color: var(--wp--preset--color--contrast);
}

/* Submenu desplegable */
.depaw-navbar .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: .4rem 0;
	box-shadow: var(--depaw-sombra-alta);
	min-width: 15rem;
}

.depaw-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	font-size: .9rem;
	border-bottom: 0;
	width: 100%;
}

/* Logotipo centrado */
.depaw-navbar .depaw-logo,
.depaw-navbar .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
}

.depaw-navbar .wp-block-site-logo img {
	border-radius: var(--depaw-radius);
	display: block;
}

/* Acciones de la derecha: buscador, cuenta y carrito */
.depaw-nav-acciones {
	flex: 1 1 0;
	justify-content: flex-end;
	align-items: center;
}

.depaw-navbar .wp-block-search {
	margin: 0;
	width: min(230px, 21vw);
}

.depaw-navbar .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--base);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: .18rem .18rem .18rem .9rem;
}

.depaw-navbar .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: .86rem;
	padding: .4rem 0;
	border-radius: 0;
}

.depaw-navbar .wp-block-search__input:focus {
	outline: none;
}

.depaw-navbar .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--contrast);
}

.depaw-navbar .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--morado);
	border: 0;
	padding: .3rem .5rem;
	min-width: 0;
}

.depaw-navbar .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Iconos de cuenta y carrito */
.depaw-navbar .wc-block-customer-account,
.depaw-navbar .wp-block-woocommerce-mini-cart {
	margin: 0;
}

.depaw-navbar .wc-block-customer-account__account-icon svg,
.depaw-navbar .wc-block-mini-cart__button svg {
	width: 26px;
	height: 26px;
	fill: var(--wp--preset--color--contrast);
}

.depaw-navbar .wc-block-customer-account__button,
.depaw-navbar .wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
	padding: .25rem;
	background: transparent;
	border: 0;
}

.depaw-navbar .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--morado);
	color: #fff;
	border-color: var(--wp--preset--color--lila);
}

/* En pantallas medianas se oculta el buscador para dejar sitio */
@media (max-width: 1100px) {
	.depaw-navbar .wp-block-search {
		display: none;
	}
}

@media (max-width: 900px) {
	.depaw-navbar-in {
		gap: .75rem;
		min-height: 66px;
	}

	.depaw-navbar .depaw-menu {
		flex: 0 0 auto;
	}

	.depaw-navbar .wp-block-site-logo img {
		width: 84px;
	}
}

/* ---------- Hero con promociones ---------- */
.depaw-hero {
	position: relative;
	background: linear-gradient(135deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--lila-claro) 100%);
	padding-bottom: 2.6rem;
	overflow: hidden;
}

.depaw-carrusel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin: 0;
}

.depaw-carrusel::-webkit-scrollbar {
	display: none;
}

.depaw-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	margin: 0;
}

.depaw-slide-texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
}

/* Cintas de texto sobre fondo translucido, como en el original */
.depaw-cinta {
	display: inline-block;
	background: rgba(255, 255, 255, .55);
	color: var(--wp--preset--color--contrast);
	padding: .5rem 1.4rem;
	border-radius: 999px;
	font-size: clamp(1rem, 2.2vw, 1.5rem);
	font-weight: 600;
	margin: 0;
	backdrop-filter: blur(2px);
}

.depaw-slide-titulo {
	font-size: clamp(3rem, 8vw, 5.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--morado);
	margin: .2rem 0;
}

.depaw-slide-cta {
	margin-top: .8rem;
}

.depaw-slide-cta .wp-block-button__link {
	background: #7734b2;
	color: #ffffff;
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .95rem 2rem;
	border: 0;
	box-shadow: var(--depaw-sombra);
}

.depaw-slide-cta .wp-block-button__link:hover,
.depaw-slide-cta .wp-block-button__link:focus-visible {
	background: #eedafe;
	color: #7734b2;
}

.depaw-slide-media .depaw-ph {
	max-width: 320px;
	margin-inline: auto;
	background: rgba(255, 255, 255, .75);
}

/* Puntos de navegacion del carrusel */
.depaw-puntos {
	position: absolute;
	bottom: 1.1rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: .6rem;
	z-index: 2;
}

.depaw-puntos a {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--morado);
	background: transparent;
	transition: background .18s ease;
}

.depaw-puntos a:hover,
.depaw-puntos a:focus-visible {
	background: var(--wp--preset--color--morado);
}

@media (max-width: 781px) {
	.depaw-slide-texto {
		align-items: center;
		text-align: center;
	}

	.depaw-slide-media {
		margin-top: 1.5rem;
	}
}

/* ---------- Tira de sellos bajo el hero ---------- */
.depaw-sellos-tira {
	background: var(--wp--preset--color--morado);
	padding-block: .9rem;
}

.depaw-sellos-lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.depaw-sellos-lista li {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	flex: 1 1 auto;
	justify-content: center;
}

.depaw-sellos-lista svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: #fff;
}

@media (max-width: 781px) {
	.depaw-sellos-lista {
		justify-content: center;
	}

	.depaw-sellos-lista li {
		flex: 0 0 calc(50% - 1rem);
		font-size: .72rem;
		letter-spacing: .04em;
	}
}

/* ---------------------------------------------------------------
   Portada: replica exacta del mockup aprobado
   --------------------------------------------------------------- */

:root {
	--depaw-paso: clamp(3.5rem, 7vw, 6.5rem);
	--depaw-sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
	--depaw-sombra-alta: 0 2px 4px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .10);
}

/* Firma manuscrita de marca */
.depaw-firma {
	font-family: var(--wp--preset--font-family--manuscrita);
	color: var(--wp--preset--color--morado);
	font-size: 1.6rem;
	line-height: 1;
	margin: 0 0 .2rem;
}

/* Etiqueta superior de seccion */
.depaw-eyebrow {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 .1rem;
}

/* Cabecera de seccion: limita el ancho como en el mockup */
.depaw-cabeza {
	max-width: 60ch;
	margin-bottom: 2.6rem;
}

.depaw-cabeza h2 {
	margin: .7rem 0 .8rem;
}

.depaw-cabeza p:not(.depaw-eyebrow) {
	color: var(--wp--preset--color--contrast-muted);
	font-size: 1.05rem;
	margin: 0;
}

/* Entradilla del hero */
.depaw-lede {
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 52ch;
}

/* ---------- Composicion de foto con manchas organicas ---------- */
.depaw-compo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 0;
}

.depaw-compo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--lila-suave);
	border-radius: 52% 48% 44% 56% / 50% 42% 58% 50%;
	z-index: 0;
}

.depaw-compo::after {
	content: "";
	position: absolute;
	width: 38%;
	height: 38%;
	right: 2%;
	top: 6%;
	background: var(--wp--preset--color--lila-claro);
	border-radius: 50% 50% 42% 58% / 54% 46% 54% 46%;
	opacity: .85;
	z-index: 0;
}

.depaw-compo > * {
	position: relative;
	z-index: 1;
	width: 58%;
}

/* Marcador de posicion de foto */
.depaw-ph {
	border: 1.5px dashed var(--wp--preset--color--lila);
	border-radius: var(--depaw-radius);
	background: var(--wp--preset--color--base);
	padding: 2rem 1rem;
	text-align: center;
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-ph p {
	font-size: .74rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.4;
	letter-spacing: .02em;
	margin: 0;
}

.depaw-ph svg {
	width: 30px;
	height: 30px;
	color: var(--wp--preset--color--lila);
	margin: 0 auto .5rem;
	display: block;
}

/* ---------- Sellos del hero ---------- */
.depaw-hero-sellos {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
	font-size: .82rem;
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 500;
	margin: 0;
}

.depaw-hero-sellos span {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.depaw-check {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--wp--preset--color--morado);
}

/* ---------- Tira de confianza ---------- */
.depaw-sello p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.depaw-sello strong {
	font-size: .92rem;
	font-weight: 700;
}

.depaw-sello span {
	font-size: .78rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---------- Tarjetas de solucion y de guia ---------- */
.depaw-tarjeta {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.6rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.depaw-tarjeta:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--lila);
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-tarjeta > * {
	margin: 0;
}

.depaw-tarjeta h3 {
	line-height: 1.3;
}

.depaw-tarjeta h3 a {
	text-decoration: none;
	color: inherit;
}

.depaw-tarjeta h3 a:hover {
	color: var(--wp--preset--color--morado);
}

.depaw-tarjeta p:not(.depaw-eyebrow):not(.depaw-mas) {
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-tarjeta .depaw-icono {
	width: 34px;
	height: 34px;
	color: var(--wp--preset--color--morado);
	margin-bottom: .4rem;
}

.depaw-mas {
	margin-top: auto !important;
	padding-top: .9rem;
	font-size: .86rem;
	font-weight: 700;
}

.depaw-mas a {
	text-decoration: none;
	color: var(--wp--preset--color--morado);
}

.depaw-mas a:hover {
	text-decoration: underline;
}

/* ---------- Tarjetas de producto de WooCommerce ----------
   La maquetacion (columnas y anchos) la resuelve WooCommerce con su
   propio flexbox. Aqui solo se cambia el aspecto: el marco de la tarjeta
   se dibuja con un pseudo-elemento para no tocar el reparto de columnas.
   --------------------------------------------------------------- */

.depaw-productos .wc-block-grid {
	max-width: none;
}

.depaw-productos .wc-block-grid__product {
	position: relative;
	padding: 0 8px 1.2rem;
	margin: 0 0 1.2rem;
	text-align: left;
}

/* Marco de la tarjeta */
.depaw-productos .wc-block-grid__product::after {
	content: "";
	position: absolute;
	inset: 0 8px 1.2rem 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	pointer-events: none;
	z-index: 0;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.depaw-productos .wc-block-grid__product:hover::after {
	border-color: var(--wp--preset--color--lila);
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-productos .wc-block-grid__product > * {
	position: relative;
	z-index: 1;
}

/* Imagen sobre fondo de marca, con las esquinas superiores redondeadas */
.depaw-productos .wc-block-grid__product-link {
	display: block;
	margin: 0 0 .9rem;
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius) var(--depaw-radius) 0 0;
	overflow: hidden;
}

.depaw-productos .wc-block-grid__product-image {
	margin: 0;
	padding: 0;
	display: block;
}

.depaw-productos .wc-block-grid__product-image img {
	border-radius: 0;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .4s ease;
}

.depaw-productos .wc-block-grid__product:hover .wc-block-grid__product-image img {
	transform: scale(1.04);
}

/* Texto */
.depaw-productos .wc-block-grid__product-title,
.depaw-productos .wc-block-grid__product-price,
.depaw-productos .wc-block-grid__product-add-to-cart {
	padding-inline: 1rem;
	margin-inline: 0;
	text-align: left;
}

.depaw-productos .wc-block-grid__product-title {
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 .35rem;
}

.depaw-productos .wc-block-grid__product-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.depaw-productos .wc-block-grid__product-title a:hover {
	color: var(--wp--preset--color--morado);
}

.depaw-productos .wc-block-grid__product-price {
	font-size: 1.02rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
	display: block;
	margin: 0 0 .9rem;
}

.depaw-productos .wc-block-grid__product-price del {
	font-weight: 400;
	opacity: .55;
	margin-right: .3rem;
}

/* Boton de contorno que se rellena al pasar el raton */
.depaw-productos .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.2;
	padding: .7rem .5rem;
	background: transparent;
	color: var(--wp--preset--color--morado);
	border: 1.5px solid var(--wp--preset--color--morado);
	border-radius: var(--depaw-radius);
	transition: background .18s ease, color .18s ease;
}

.depaw-productos .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.depaw-productos .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--morado);
	color: #fff;
}

.depaw-productos .wc-block-grid__product .added_to_cart {
	display: block;
	text-align: center;
	font-size: .78rem;
	margin-top: .5rem;
	color: var(--wp--preset--color--morado);
}

/* Etiqueta opcional: solo cuando haya un dato real que la respalde */
.depaw-productos .wc-block-grid__product.depaw-destacado::before {
	content: attr(data-depaw-etiqueta);
	position: absolute;
	top: .7rem;
	left: 1.2rem;
	z-index: 2;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--morado);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .3rem .6rem;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--border);
}

/* ---------- Pasos numerados ---------- */
.depaw-pasos {
	counter-reset: depaw-paso;
}

.depaw-paso {
	counter-increment: depaw-paso;
	position: relative;
	padding-left: 3.4rem;
}

.depaw-paso::before {
	content: counter(depaw-paso);
	position: absolute;
	left: 0;
	top: -.1rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--morado);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
}

.depaw-paso h3 {
	margin-top: 0;
}

/* ---------- Chips de ingredientes ---------- */
.depaw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	padding: 0;
	margin: 1.6rem 0 0;
}

.depaw-chips li {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	padding: .4rem .9rem;
	font-size: .84rem;
	font-weight: 500;
}

/* Lista con palomita en vez de vineta */
.depaw-lista-check {
	list-style: none;
	padding: 0;
	margin: 1.6rem 0 0;
	display: grid;
	gap: .7rem;
}

.depaw-lista-check li {
	position: relative;
	padding-left: 1.7rem;
	font-size: .96rem;
}

.depaw-lista-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 15px;
	height: 9px;
	border-left: 2.2px solid var(--wp--preset--color--morado);
	border-bottom: 2.2px solid var(--wp--preset--color--morado);
	transform: rotate(-45deg);
}

/* ---------- Cifras de distribuidoras ---------- */
.depaw-cifra p {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.depaw-cifra strong {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}

.depaw-cifra span {
	font-size: .82rem;
	color: var(--wp--preset--color--contrast-muted);
	margin-top: .25rem;
}

/* ---------- Aparicion al hacer scroll ---------- */
.depaw-reveal {
	opacity: 0;
	transform: translateY(14px);
}

.depaw-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.depaw-reveal {
		opacity: 1;
		transform: none;
	}

	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Ajustes moviles ---------- */
@media (max-width: 781px) {
	.depaw-compo {
		max-width: 380px;
		margin-inline: auto;
	}

	.depaw-hero-sellos {
		gap: 1rem;
	}
}

/* Enlace al carrito en la barra de navegacion */
.depaw-navbar .depaw-carrito {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast);
	padding: .25rem;
	line-height: 0;
}

.depaw-navbar .depaw-carrito svg {
	width: 26px;
	height: 26px;
}

.depaw-navbar .depaw-carrito:hover {
	color: var(--wp--preset--color--morado);
}

/* ---------------------------------------------------------------
   Fuentes desde CDN externo.
   Los woff2 alojados en el servidor quedan atrapados por la verificacion
   de Imunify360, igual que el CSS. Estas declaraciones van al final para
   ganar a las de theme.json y cargar desde jsdelivr, que si responde.
   --------------------------------------------------------------- */

@font-face {
	font-family: "Open Sauce One";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one/files/open-sauce-one-latin-300-normal.woff2) format("woff2");
}

@font-face {
	font-family: "Open Sauce One";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one/files/open-sauce-one-latin-400-normal.woff2) format("woff2");
}

@font-face {
	font-family: "Open Sauce One";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one/files/open-sauce-one-latin-600-normal.woff2) format("woff2");
}

@font-face {
	font-family: "Open Sauce One";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.jsdelivr.net/npm/@fontsource/open-sauce-one/files/open-sauce-one-latin-700-normal.woff2) format("woff2");
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://cdn.jsdelivr.net/npm/@fontsource/caveat/files/caveat-latin-600-normal.woff2) format("woff2");
}

/* ---------------------------------------------------------------
   Sustitutos minimos del CSS del nucleo de WordPress.
   Imunify360 tambien intercepta los archivos de bloques del nucleo,
   asi que las reglas imprescindibles se replican aqui en linea.
   --------------------------------------------------------------- */

/* El boton de menu movil solo debe verse en pantallas pequenas */
@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
		width: 100%;
		position: relative;
		z-index: auto;
		background-color: inherit;
	}

	.wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* Etiquetas solo para lectores de pantalla: nunca visibles */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal;
}

/* ---------------------------------------------------------------
   Ajustes finales de portada
   --------------------------------------------------------------- */

/* Boton de menu movil: oculto en escritorio pase lo que pase */
.depaw-navbar .wp-block-navigation__responsive-container-open {
	display: none !important;
}

@media (max-width: 599px) {
	.depaw-navbar .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.depaw-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* La portada es una sucesion de bandas de color: fuera los espacios
   automaticos entre bloques raiz y entre secciones, que se ven como
   franjas blancas. Cada banda maneja su propio espacio interior. */
body.home .wp-site-blocks > * + * {
	margin-block-start: 0;
}

body.home main {
	margin-block-start: 0;
}

body.home .wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   Logotipo centrado de verdad.
   Con flexbox el centro depende de lo que ocupen los lados, asi que
   se usa una rejilla de tres columnas: los laterales miden igual (1fr)
   y el logotipo queda en el centro optico de la barra.
   --------------------------------------------------------------- */

.depaw-navbar .depaw-navbar-in {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.depaw-navbar .depaw-menu {
	justify-self: start;
}

.depaw-navbar .depaw-logo {
	justify-self: center;
}

.depaw-navbar .depaw-nav-acciones {
	justify-self: end;
}

/* En movil el menu se reduce al boton y la rejilla sigue centrando */
@media (max-width: 599px) {
	.depaw-navbar .depaw-navbar-in {
		gap: .5rem;
	}
}


/* ---------------------------------------------------------------
   El buscador ocupa el espacio libre de su columna.
   La rejilla mantiene los laterales iguales para centrar el logo, asi
   que la columna derecha sobra respecto a su contenido. En vez de dejar
   ese hueco junto al logo, lo aprovecha el buscador.
   --------------------------------------------------------------- */

.depaw-navbar .depaw-nav-acciones {
	justify-self: stretch;
	width: 100%;
}

.depaw-navbar .wp-block-search {
	flex: 1 1 auto;
	width: auto;
	max-width: 340px;
	min-width: 0;
	margin-left: 2.5rem;
}

@media (max-width: 1100px) {
	.depaw-navbar .depaw-nav-acciones {
		justify-self: end;
		width: auto;
	}
}

/* ---------------------------------------------------------------
   Cabecera fija al hacer scroll.
   El sticky debe ir en <header>, no en la barra interior: un elemento
   pegajoso solo se desplaza dentro de su contenedor, y el contenedor de
   la barra termina justo debajo de ella, asi que no tenia recorrido.
   El desplazamiento negativo esconde la barra de aviso al bajar y deja
   fijo solo el menu de navegacion.
   --------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--depaw-topbar-alto));
	z-index: 40;
}

:root {
	--depaw-topbar-alto: 2.75rem;
}

/* La barra ya no necesita ser pegajosa por su cuenta */
.depaw-navbar {
	position: relative;
	top: auto;
}

/* Los anclajes del carrusel no deben quedar bajo la cabecera fija */
.depaw-slide {
	scroll-margin-top: 6rem;
}

@media (max-width: 599px) {
	:root {
		--depaw-topbar-alto: 3.6rem;
	}
}

/* ---------------------------------------------------------------
   Hero integrado.
   Fondo continuo, sin cortes verticales: el texto a la izquierda y la
   composicion de manchas organicas a la derecha, como en el mockup.
   --------------------------------------------------------------- */

.depaw-hero {
	position: relative;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-bottom: 2.8rem;
	overflow: hidden;
}

.depaw-slide {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	margin: 0;
}

.depaw-slide-texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .55rem;
}

.depaw-slide-texto > * {
	margin: 0;
}

.depaw-slide-titulo {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	line-height: 1.04;
	letter-spacing: -.03em;
	margin: .3rem 0 .2rem !important;
	max-width: 16ch;
}

.depaw-split-lede {
	font-size: clamp(.98rem, 1.4vw, 1.1rem);
	color: #4a4550;
	max-width: 40ch;
}

.depaw-slide-cta {
	margin-top: 1rem !important;
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
}

.depaw-hero-sellos {
	margin-top: 1.6rem !important;
}

/* Puntos del carrusel centrados bajo el contenido */
.depaw-puntos {
	position: absolute;
	bottom: 1.2rem;
	left: 0;
	right: 0;
	justify-content: center;
}

@media (max-width: 781px) {
	.depaw-slide-texto {
		align-items: center;
		text-align: center;
	}

	.depaw-slide-titulo {
		max-width: none;
	}

	.depaw-slide-cta {
		justify-content: center;
	}

	.depaw-hero-sellos {
		justify-content: center;
	}
}


/* ---------------------------------------------------------------
   Selector de necesidad capilar
   --------------------------------------------------------------- */

.depaw-necesidades {
	background: linear-gradient(170deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 100%);
	padding-block: clamp(3rem, 6vw, 4.5rem);
	text-align: center;
}

.depaw-necesidades .depaw-firma {
	margin-bottom: .3rem;
}

.depaw-nec-titulo {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 auto .6rem;
	max-width: 20ch;
}

.depaw-nec-sub {
	color: #4a4550;
	max-width: 52ch;
	margin: 0 auto clamp(1.8rem, 3vw, 2.4rem);
	font-size: 1rem;
}

.depaw-nec-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .9rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.depaw-nec {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.6rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.depaw-nec:hover,
.depaw-nec:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--lila);
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-nec svg {
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--morado);
}

.depaw-nec b {
	font-size: 1rem;
	font-weight: 700;
}

.depaw-nec span {
	font-size: .82rem;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.4;
}

@media (max-width: 900px) {
	.depaw-nec-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------
   Hero de una sola pieza.
   Sin carrusel: se compacta el espaciado para que el titular, los
   botones y los sellos entren en la primera pantalla sin hacer scroll.
   --------------------------------------------------------------- */

.depaw-carrusel {
	display: block;
	overflow: visible;
}

.depaw-hero {
	padding-bottom: 0;
}

.depaw-slide {
	padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
}

.depaw-slide-titulo {
	font-size: clamp(1.9rem, 3.7vw, 2.8rem) !important;
	margin: .2rem 0 .1rem !important;
}

.depaw-split-lede {
	font-size: clamp(.95rem, 1.25vw, 1.02rem);
}

.depaw-slide-cta {
	margin-top: .8rem !important;
}

.depaw-hero-sellos {
	margin-top: 1.1rem !important;
}

.depaw-firma {
	font-size: clamp(1.35rem, 2.4vw, 1.6rem);
}

/* La composicion de la foto no debe estirar el alto del hero */
.depaw-compo {
	max-width: 400px;
	margin-inline: auto;
}

@media (min-width: 782px) {
	.depaw-compo {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------
   Imagen real del hero.
   El 58% de ancho era para el marcador de posicion; una foto de verdad
   ocupa toda la composicion, con la mancha de marca asomando detras.
   --------------------------------------------------------------- */

/* El limite del 58% queda solo para los marcadores que aun existen */
.depaw-compo > * {
	width: 100%;
}

.depaw-compo > .depaw-ph {
	width: 58%;
}

.depaw-compo {
	aspect-ratio: 4 / 3;
	max-width: 620px;
	margin-inline: auto;
	overflow: visible;
}

/* La mancha se desplaza para asomar por detras de la foto */
.depaw-compo::before {
	inset: 7% -7% -7% 7%;
}

.depaw-compo::after {
	width: 30%;
	height: 30%;
	right: -5%;
	top: -6%;
}

/* La foto llena la composicion */
.depaw-compo .wp-block-image {
	margin: 0;
	height: 100%;
	width: 100%;
}

.depaw-compo .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: var(--depaw-radius);
	box-shadow: 0 18px 46px rgba(119, 52, 178, .22), 0 3px 10px rgba(119, 52, 178, .10);
}

/* Con foto real, el hero puede respirar mas */
.depaw-slide {
	padding-block: clamp(2rem, 3.6vw, 3.25rem);
}

@media (max-width: 781px) {
	.depaw-compo {
		max-width: 460px;
		aspect-ratio: 3 / 2;
	}

	.depaw-compo::before {
		inset: 5% -5% -5% 5%;
	}
}

/* ---------------------------------------------------------------
   Hero compacto con foto.
   Menos aire vertical y foto algo mas baja, para que titular, texto y
   botones entren en la primera pantalla junto a la imagen.
   --------------------------------------------------------------- */

.depaw-slide {
	padding-block: clamp(1.9rem, 3.4vw, 3.3rem);
}

.depaw-compo {
	aspect-ratio: 5 / 4;
	max-width: 560px;
}

.depaw-slide-titulo {
	font-size: clamp(1.85rem, 3.3vw, 2.6rem) !important;
}

.depaw-split-lede {
	margin-top: .1rem !important;
}

.depaw-slide-cta {
	margin-top: .9rem !important;
}

/* La firma no necesita tanto aire por debajo */
.depaw-slide-texto .depaw-firma {
	margin-bottom: 0 !important;
}

@media (max-width: 781px) {
	.depaw-compo {
		aspect-ratio: 3 / 2;
		max-width: 440px;
	}
}

/* ---------------------------------------------------------------
   Foto del hero: limpia y completa.
   La foto ya trae su propio fondo, asi que las manchas decorativas
   sobran y creaban el efecto de recuadro. Se muestra entera, sin
   recortes ni sombras, y con un alto maximo para que el hero completo
   quepa en la primera pantalla.
   --------------------------------------------------------------- */

.depaw-hero .depaw-compo {
	aspect-ratio: auto;
	max-width: 640px;
	padding: 0;
}

.depaw-hero .depaw-compo::before,
.depaw-hero .depaw-compo::after {
	display: none;
}

.depaw-hero .depaw-compo .wp-block-image,
.depaw-hero .depaw-compo figure {
	height: auto;
	margin: 0;
}

.depaw-hero .depaw-compo .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	max-height: min(58vh, 480px);
	object-fit: contain !important;
	border-radius: 0;
	box-shadow: none;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.depaw-hero .depaw-compo {
		max-width: 460px;
	}

	.depaw-hero .depaw-compo .wp-block-image img {
		max-height: 44vh;
	}
}

/* ---------------------------------------------------------------
   Vuelven las manchas de fondo del hero.
   La foto sigue sin marco ni sombra y se ve completa; las manchas
   quedan detras, asomando alrededor, como en el diseno aprobado.
   --------------------------------------------------------------- */

.depaw-hero .depaw-compo::before,
.depaw-hero .depaw-compo::after {
	display: block;
}

.depaw-hero .depaw-compo::before {
	inset: auto;
	left: 50%;
	top: 50%;
	width: 84%;
	height: auto;
	aspect-ratio: 1;
	transform: translate(-50%, -52%);
	background: var(--wp--preset--color--lila-suave);
	border-radius: 50%;
	z-index: 0;
}

.depaw-hero .depaw-compo::after {
	inset: auto;
	width: 32%;
	height: auto;
	aspect-ratio: 1;
	right: 2%;
	top: -3%;
	background: var(--wp--preset--color--lila-claro);
	border-radius: 50%;
	opacity: .7;
	z-index: 0;
}

/* La foto va por encima de las manchas */
.depaw-hero .depaw-compo .wp-block-image {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------
   Tarjetas de producto: texto centrado y botones de marca.
   Mismo tratamiento que los botones del hero: morado solido que al
   pasar el raton se vuelve lila suave con el texto en morado.
   --------------------------------------------------------------- */

.depaw-productos .wc-block-grid__product,
.depaw-productos .wc-block-grid__product-title,
.depaw-productos .wc-block-grid__product-price,
.depaw-productos .wc-block-grid__product-add-to-cart {
	text-align: center;
}

/* Sin subrayado ni fondo en el nombre del producto */
.depaw-productos .wc-block-grid__product-title,
.depaw-productos .wc-block-grid__product-title a,
.depaw-productos .wc-block-grid__product-link,
.depaw-productos .wc-block-grid__product a {
	text-decoration: none !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast);
}

.depaw-productos .wc-block-grid__product-title a:hover {
	text-decoration: none !important;
	color: var(--wp--preset--color--morado);
}

/* Boton igual al del hero */
.depaw-productos .wc-block-grid__product-add-to-cart .wp-block-button__link,
.depaw-productos .wc-block-grid__product .add_to_cart_button,
.depaw-productos .wc-block-grid__product .wc-block-grid__product-add-to-cart a {
	background: #7734b2 !important;
	color: #ffffff !important;
	border: 1.5px solid #7734b2 !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .78rem;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.depaw-productos .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.depaw-productos .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible,
.depaw-productos .wc-block-grid__product .add_to_cart_button:hover,
.depaw-productos .wc-block-grid__product .add_to_cart_button:focus-visible {
	background: #eedafe !important;
	color: #7734b2 !important;
	border-color: #eedafe !important;
}

/* Nombre del producto: fondo lila y texto morado, sin subrayado */
.depaw-productos .wc-block-grid__product-title {
	background: var(--wp--preset--color--lila-suave) !important;
	padding-block: .6rem;
}

.depaw-productos .wc-block-grid__product-title,
.depaw-productos .wc-block-grid__product-title a {
	color: var(--wp--preset--color--morado) !important;
	text-decoration: none !important;
}

.depaw-productos .wc-block-grid__product-title a:hover {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
}

/* ---------------------------------------------------------------
   Boton "Ir a la tienda" al pie de la seccion de productos.
   Fondo lila con texto morado; al pasar el raton invierte a morado
   solido, el mismo par de colores que usa el resto de la portada.
   --------------------------------------------------------------- */

.depaw-productos > .wp-block-buttons .wp-block-button__link,
.depaw-productos > .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--lila-suave) !important;
	color: var(--wp--preset--color--morado) !important;
	border: 1.5px solid var(--wp--preset--color--lila-suave) !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .82rem;
	padding: .9rem 2rem;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.depaw-productos > .wp-block-buttons .wp-block-button__link:hover,
.depaw-productos > .wp-block-buttons .wp-block-button__link:focus-visible,
.depaw-productos > .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.depaw-productos > .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--morado) !important;
	color: #ffffff !important;
	border-color: var(--wp--preset--color--morado) !important;
}

/* ---------------------------------------------------------------
   Fondo blanco en las fotos de producto.
   Las fotos traen su propio fondo claro, asi que el lila quedaba como
   un marco alrededor. Sobre blanco el envase manda y los colores del
   producto se leen fieles.
   --------------------------------------------------------------- */

.depaw-productos .wc-block-grid__product-link,
.depaw-productos .wc-block-grid__product-image {
	background: #ffffff !important;
}

/* El envase se ve completo, sin recortes */
.depaw-productos .wc-block-grid__product-image img {
	object-fit: contain !important;
	padding: .5rem;
}

/* ---------------------------------------------------------------
   Foto de producto en formato vertical.
   Los envases son altos y estrechos: en un cuadro cuadrado quedaban
   rodeados de blanco y parecian pequenos. Las imagenes se normalizaron
   a 800x1000 con el producto siempre a la misma altura, y el marco
   acompana esa proporcion.
   --------------------------------------------------------------- */

.depaw-productos .wc-block-grid__product-image {
	aspect-ratio: 4 / 5;
}

.depaw-productos .wc-block-grid__product-image img {
	aspect-ratio: 4 / 5;
	padding: 0;
}

/* ---------------------------------------------------------------
   Fotos dentro de las composiciones de seccion (fuera del hero).
   La composicion deja de imponer proporcion y la foto manda, con las
   manchas de marca asomando por detras.
   --------------------------------------------------------------- */

.depaw-compo:has(.wp-block-image) {
	aspect-ratio: auto;
	max-width: 416px;
}

.depaw-compo .wp-block-image {
	margin: 0;
	position: relative;
	z-index: 1;
	height: auto;
}

/* Sin recuadro: la foto va suelta sobre las manchas, no dentro de una tarjeta.
   El hero conserva su propia regla, mas especifica. */
.depaw-compo .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain;
	display: block;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

/* ---------------------------------------------------------------
   Fotos sueltas en columnas (distribuidoras y similares)
   --------------------------------------------------------------- */

.depaw-foto {
	margin: 0 auto;
}

@media (min-width: 782px) {
	.depaw-foto {
		max-width: 80%;
	}
}

.depaw-foto img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--depaw-radius);
	box-shadow: var(--depaw-sombra-alta);
}

/* ---------------------------------------------------------------
   El hero manda sobre el ancho general de las composiciones, para
   poder crecer la foto principal sin tocar la de ingredientes.
   --------------------------------------------------------------- */

.depaw-hero .depaw-compo:has(.wp-block-image) {
	max-width: 458px;
}

/* ---------------------------------------------------------------
   TIENDA (/tienda/)
   Plantilla templates/archive-product.html del tema hijo.
   El hero y el catalogo van arriba; de ahi hacia abajo, comparativa,
   rutinas, promesas, preguntas y cierre, con el arcoiris de la marca
   y las manchas lilas como motivos propios.
   --------------------------------------------------------------- */

.depaw-seccion {
	padding-block: clamp(2.4rem, 5vw, 4rem);
}

.depaw-seccion.depaw-panel {
	background: var(--wp--preset--color--surface);
}

.depaw-cabeza {
	max-width: 680px;
	margin-bottom: 2rem;
}

.depaw-cabeza p:last-child {
	color: var(--depaw-texto-atenuado, #5c5566);
	margin-bottom: 0;
}

/* ---- Cabecera de la tienda ---- */

.depaw-tienda-cabecera {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 4vw, 3.4rem);
}

.depaw-tienda-cabecera::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	right: -90px;
	top: -140px;
	z-index: 0;
}

.depaw-tienda-cabecera::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-claro);
	opacity: .7;
	right: 160px;
	top: 70px;
	z-index: 0;
}

.depaw-tienda-cabecera > * {
	position: relative;
	z-index: 1;
}

.depaw-tienda-titulo {
	max-width: 18ch;
	line-height: 1.15;
	margin: 0 0 .8rem;
}

.depaw-sellos {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.depaw-sellos li {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: .45rem 1rem;
	font-size: .92rem;
	box-shadow: var(--depaw-sombra-baja);
}

.depaw-atajos {
	margin-top: 1.1rem;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-atajos a {
	font-weight: 600;
}

/* ---- Barra de resultados ---- */

.depaw-catalogo-titulo {
	margin-bottom: .9rem;
}

.depaw-barra-resultados {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: .9rem;
	margin-bottom: 1.6rem;
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-barra-resultados p {
	margin: 0;
}

.depaw-barra-resultados select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: .45rem .8rem;
	background: #fff;
	font: inherit;
	font-size: .92rem;
}

/* ---- Comparativa ---- */

.depaw-comparativa {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-fila {
	display: grid;
	grid-template-columns: 58px 1.5fr auto 1.6fr auto;
	align-items: center;
	gap: 1.2rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: .85rem 1.1rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.depaw-fila:hover,
.depaw-fila:focus-visible {
	border-color: var(--wp--preset--color--lila);
	box-shadow: var(--depaw-sombra-baja);
	transform: translateX(3px);
}

.depaw-fila img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	border-radius: var(--depaw-radius);
	background: #fff;
}

.depaw-fila-nombre {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
}

.depaw-fila-nombre small {
	display: block;
	font-weight: 400;
	font-size: .82rem;
	color: var(--wp--preset--color--contrast-muted);
	margin-top: .15rem;
}

.depaw-fila-para {
	justify-self: start;
	font-size: .8rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	background: var(--wp--preset--color--lila-suave);
	border-radius: 999px;
	padding: .32rem .85rem;
	white-space: nowrap;
}

.depaw-fila-cuando {
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.4;
}

.depaw-fila-ir {
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	white-space: nowrap;
}

/* ---- Arcoiris de la marca ---- */

.depaw-arco {
	margin: 0 0 1rem;
}

.depaw-arco img {
	display: block;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

.depaw-cierre .depaw-arco {
	margin-inline: auto;
}

/* ---- Rutinas ---- */

.depaw-rutinas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-rutina {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 152px;
	gap: 1.2rem;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.6rem;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}

.depaw-rutina:hover,
.depaw-rutina:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-rutina::before {
	content: "";
	position: absolute;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	right: -50px;
	bottom: -100px;
	z-index: 0;
}

.depaw-rutina::after {
	content: "";
	position: absolute;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-claro);
	opacity: .55;
	right: 130px;
	top: -30px;
	z-index: 0;
}

.depaw-rutina > * {
	position: relative;
	z-index: 1;
}

.depaw-rutina-num {
	display: block;
	font-family: var(--wp--preset--font-family--manuscrita);
	font-size: 2.6rem;
	line-height: .9;
	color: var(--wp--preset--color--morado);
	margin-bottom: .35rem;
}

.depaw-rutina h3 {
	margin: 0 0 .4rem;
	font-size: 1.22rem;
	line-height: 1.25;
}

.depaw-rutina p {
	margin: 0 0 .9rem;
	font-size: .97rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-rutina-ir {
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	font-size: .92rem;
}

.depaw-rutina-fotos {
	display: flex;
	gap: .45rem;
}

.depaw-rutina-fotos img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	box-shadow: var(--depaw-sombra-baja);
}

/* ---- Promesas ---- */

.depaw-promesas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius);
	padding: 2rem clamp(1.2rem, 3vw, 2.2rem);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-promesas div {
	text-align: center;
	padding-inline: .6rem;
}

.depaw-promesas b {
	display: block;
	font-size: 1.9rem;
	line-height: 1.05;
	color: var(--wp--preset--color--morado);
	margin-bottom: .3rem;
}

.depaw-promesas span {
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---- Preguntas, acordeon de Kadence ---- */

.depaw-faq {
	max-width: 860px;
	margin-inline: auto;
}

.depaw-faq .kt-accordion-pane {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	background: #fff;
	margin-bottom: .7rem;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.depaw-faq .kt-accordion-pane:hover {
	border-color: var(--wp--preset--color--lila-claro);
}

.depaw-faq .kt-accordion-pane-active {
	border-color: var(--wp--preset--color--lila);
	box-shadow: var(--depaw-sombra-baja);
}

.depaw-faq .kt-blocks-accordion-title-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 1.05rem 1.2rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	color: inherit;
}

.depaw-faq .kt-blocks-accordion-title-wrap::after {
	content: "+";
	color: var(--wp--preset--color--morado);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1;
}

.depaw-faq .kt-accordion-pane-active .kt-blocks-accordion-title-wrap::after {
	content: "\2013";
}

.depaw-faq .kt-accordion-panel-inner {
	padding: 0 1.2rem 1.15rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-faq .kt-accordion-panel-inner p {
	margin: 0;
}

/* ---- Cierre ---- */

.depaw-cierre {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius);
	padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.4rem, 4vw, 3rem);
}

.depaw-cierre::before {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	right: -110px;
	top: -140px;
}

.depaw-cierre::after {
	content: "";
	position: absolute;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-claro);
	opacity: .45;
	left: -60px;
	bottom: -80px;
}

.depaw-cierre > * {
	position: relative;
	z-index: 1;
}

.depaw-cierre p {
	color: var(--wp--preset--color--contrast-muted);
	max-width: 50ch;
	margin-inline: auto;
}

.depaw-cierre .depaw-firma {
	font-family: var(--wp--preset--font-family--manuscrita);
	font-size: 1.9rem;
	color: var(--wp--preset--color--morado);
	margin-top: 1.2rem;
}

@media (max-width: 1100px) {
	.depaw-fila {
		grid-template-columns: 58px 1.4fr auto auto;
	}

	.depaw-fila-cuando {
		display: none;
	}
}

@media (max-width: 980px) {
	.depaw-rutinas {
		grid-template-columns: 1fr;
	}

	.depaw-promesas {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 1.6rem;
	}
}

@media (max-width: 680px) {
	.depaw-fila {
		grid-template-columns: 48px 1fr;
		gap: .9rem;
	}

	.depaw-fila img {
		width: 48px;
		height: 48px;
	}

	.depaw-fila-para,
	.depaw-fila-ir {
		grid-column: 2;
		justify-self: start;
	}

	.depaw-rutina {
		grid-template-columns: 1fr;
	}

	.depaw-promesas {
		grid-template-columns: 1fr;
	}
}

/* Red de seguridad del acordeon: si el JS de Kadence no llegara a cargar, las
   respuestas se muestran en vez de quedar ocultas sin forma de abrirlas. */
.depaw-faq .kt-accordion-inner-wrap:not(.kt-accordion-initialized) .kt-accordion-panel-hidden {
	display: block;
}

/* ---- Tarjetas del catalogo de la tienda ----
   El bloque Product Collection trae su propia rejilla (columns-3). No se toca
   ni display ni width ni flex: solo el interior y el marco de la tarjeta. */

.depaw-productos .wc-block-product {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 0 0 1.3rem;
	overflow: hidden;
	box-shadow: var(--depaw-sombra-baja);
	transition: transform .18s ease, box-shadow .18s ease;
}

.depaw-productos .wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: var(--depaw-sombra-alta);
}

/* La caja de la foto manda, y la foto se ajusta dentro sin recortarse.
   Antes la caja media 479px y la imagen solo 383, asi que quedaba una franja
   vacia que hacia las tarjetas mucho mas altas de lo necesario.
   El bloque de WooCommerce escribe object-fit y aspect-ratio en el atributo
   style de la img, y eso solo se gana con !important. */
.depaw-productos .wc-block-components-product-image {
	margin: 0 0 1rem;
	background: #fff;
	aspect-ratio: 8 / 7;
	overflow: hidden;
	display: block;
}

/* La foto va dentro de un enlace. Si el enlace no tiene alto propio, el
   height:100% de la imagen no se apoya en nada y se dispara. */
.depaw-productos .wc-block-components-product-image > a {
	display: block;
	height: 100%;
}

.depaw-productos .wc-block-components-product-image img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	background: #fff;
	border-radius: 0;
}

.depaw-productos .wp-block-post-title {
	margin: 0 1.1rem .5rem;
	font-size: 1.12rem;
	line-height: 1.3;
}

.depaw-productos .wp-block-post-title a {
	color: var(--wp--preset--color--morado);
	text-decoration: none;
}

.depaw-productos .wp-block-post-title a:hover {
	text-decoration: underline;
}

.depaw-productos .wp-block-post-excerpt {
	margin: 0 1.1rem .7rem;
}

.depaw-productos .wp-block-post-excerpt p,
.depaw-productos .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-productos .wp-block-post-excerpt__more-text {
	display: none;
}

.depaw-productos .wp-block-woocommerce-product-price {
	margin: 0 1.1rem .9rem;
	font-weight: 700;
	font-size: 1.08rem;
}

.depaw-productos .wp-block-woocommerce-product-button {
	margin: 0 1.1rem;
}

.depaw-productos .wp-block-woocommerce-product-button .wp-block-button__link,
.depaw-productos .wc-block-components-product-button .wc-block-components-product-button__button {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--morado);
	color: #fff;
	border: 0;
	border-radius: var(--depaw-radius);
	padding: .75rem 1rem;
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.depaw-productos .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.depaw-productos .wc-block-components-product-button .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--lila-suave);
	color: var(--wp--preset--color--morado);
}

/* ---- Cabecera de la tienda, ajuste de fidelidad al mockup ----
   Tres correcciones: el grupo interior duplicaba el padding lateral del tema,
   los tamanos de titular y entradilla eran los genericos en vez de los del
   mockup, y el eyebrow salia gris en vez de morado. Ademas la altura baja un
   20% respecto a la primera version. */

.depaw-tienda-cabecera {
	padding-block: clamp(1.6rem, 3.2vw, 2.7rem);
}

.depaw-tienda-cabecera > .wp-block-group {
	padding-inline: 0;
}

.depaw-tienda-cabecera .depaw-eyebrow,
.depaw-seccion .depaw-eyebrow,
.depaw-cierre .depaw-eyebrow {
	font-size: .8rem;
	letter-spacing: .14em;
	color: var(--wp--preset--color--morado);
	margin: 0 0 .5rem;
}

.depaw-tienda-titulo {
	font-size: clamp(2rem, 4.4vw, 3rem) !important;
}

.depaw-tienda-cabecera .depaw-lede {
	font-size: 1.25rem;
	max-width: 56ch;
	margin: 0 0 1.6rem;
}

/* ---- La cabecera de la tienda iguala al hero de la Home ----
   Mismo degradado a todo el ancho, mismo espaciado vertical
   (clamp(1.9rem, 3.4vw, 3.3rem), el de .depaw-slide) y la misma altura
   util: la foto del hero de la Home mide 458px de ancho por 305 de alto,
   que con el espaciado da unos 411px de bloque. */

.depaw-tienda-cabecera {
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(1.9rem, 3.4vw, 3.3rem);
	min-height: 411px;
	display: grid;
	align-content: center;
}

/* El contenido ocupa la franja ancha, como las columnas del hero de la Home,
   en vez de quedarse en el ancho de lectura de 720px. */
.depaw-tienda-cabecera > .wp-block-group {
	padding-inline: 0;
	width: 100%;
}

.depaw-tienda-cabecera > .wp-block-group > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Sobre el degradado, la mancha grande se lee mejor en blanco translucido */
.depaw-tienda-cabecera::before {
	background: rgba(255, 255, 255, .5);
}

@media (max-width: 781px) {
	.depaw-tienda-cabecera {
		min-height: 0;
	}
}


/* ---- Cabeceras de seccion alineadas con el ancho del sitio ----
   .depaw-cabeza tenia max-width 680px y, al ser hija de un grupo con layout
   constrained, WordPress la centraba con margin-inline auto. El resultado era
   un titular metido hacia dentro que no cuadraba con las tarjetas de abajo.
   Ahora la caja ocupa la franja ancha y el limite de lectura se aplica a cada
   linea de texto, que arranca a la izquierda. */

.depaw-seccion .depaw-cabeza {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-seccion .depaw-cabeza > * {
	max-width: 680px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.depaw-seccion .depaw-cabeza > .depaw-arco {
	max-width: 104px;
}

/* Las preguntas siguen el mismo criterio: la caja llega al ancho del sitio y
   el acordeon conserva su ancho de lectura, alineado a la izquierda. */
.depaw-faq {
	max-width: var(--wp--style--global--wide-size);
}

.depaw-faq .wp-block-kadence-accordion {
	max-width: 860px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- Cabeceras del acordeon con los colores de DePaw ----
   Kadence pinta por defecto la pregunta abierta sobre gris oscuro con texto
   blanco. Aqui las tarjetas son blancas con el acento lila, como en el mockup. */

.depaw-faq .kt-blocks-accordion-header,
.depaw-faq .kt-accordion-header-active,
.depaw-faq .kt-accordion-pane-active .kt-blocks-accordion-header {
	background: #fff;
	border: 0;
	color: var(--wp--preset--color--contrast);
}

.depaw-faq .kt-blocks-accordion-title,
.depaw-faq .kt-accordion-pane-active .kt-blocks-accordion-title {
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------
   SOLUCIONES (/soluciones/)
   Plantilla templates/page-soluciones.html del tema hijo.
   Comparte el sistema de la Tienda: cabecera con degradado a todo el
   ancho, eyebrow morado, cabeceras a la izquierda, manchas lilas y el
   arcoiris de marca. Lo propio de aqui son las cuatro tarjetas de
   rutina, el diagnostico por sintoma y los tres pasos.
   --------------------------------------------------------------- */

/* ---- Cabecera, mismos valores que la de la Tienda ---- */

.depaw-sol-cabecera {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(1.9rem, 3.4vw, 3.3rem);
	min-height: 411px;
	display: grid;
	align-content: center;
}

.depaw-sol-cabecera::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	right: -90px;
	top: -140px;
	z-index: 0;
}

.depaw-sol-cabecera::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-claro);
	opacity: .55;
	right: 170px;
	top: 80px;
	z-index: 0;
}

.depaw-sol-cabecera > * {
	position: relative;
	z-index: 1;
}

/* En una rejilla, un hijo con margen automatico deja de estirarse y se encoge
   al ancho de su texto. Con width 100% vuelve a ocupar la franja completa. */
.depaw-sol-cabecera > .wp-block-group {
	padding-inline: 0;
	width: 100%;
}

.depaw-sol-cabecera > .wp-block-group > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.depaw-sol-titulo {
	font-size: clamp(2rem, 4.4vw, 3rem) !important;
	max-width: 18ch;
	line-height: 1.15;
	margin: 0 0 .8rem;
}

.depaw-sol-cabecera .depaw-lede {
	font-size: 1.25rem;
	max-width: 56ch;
	margin: 0 0 1.6rem;
}

/* ---- Pastillas de acceso rapido ---- */

.depaw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.depaw-chips a {
	display: block;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: .5rem 1.1rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--wp--preset--color--morado);
	text-decoration: none;
	box-shadow: var(--depaw-sombra-baja);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.depaw-chips a:hover {
	background: var(--wp--preset--color--morado);
	color: #fff;
	border-color: var(--wp--preset--color--morado);
}

/* ---- Las cuatro rutinas ---- */

.depaw-rutinas-sol {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-rutina-sol {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.8rem;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	box-shadow: var(--depaw-sombra-baja);
	transition: transform .2s ease, box-shadow .2s ease;
}

.depaw-rutina-sol:hover,
.depaw-rutina-sol:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-rutina-sol::before {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	right: -70px;
	bottom: -130px;
	z-index: 0;
}

.depaw-rutina-sol::after {
	content: "";
	position: absolute;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-claro);
	opacity: .5;
	right: 120px;
	top: -34px;
	z-index: 0;
}

.depaw-rutina-sol > * {
	position: relative;
	z-index: 1;
}

.depaw-rutina-sol .depaw-rutina-num {
	display: block;
	font-family: var(--wp--preset--font-family--manuscrita);
	font-size: 2.6rem;
	line-height: .9;
	color: var(--wp--preset--color--morado);
	margin-bottom: .3rem;
}

.depaw-rutina-sol h2 {
	font-size: 1.35rem;
	margin: 0 0 .5rem;
	line-height: 1.25;
}

.depaw-rutina-problema {
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--contrast-muted);
	font-size: 1rem;
}

.depaw-rutina-bloque {
	margin: 0 0 1rem;
}

.depaw-rutina-etiqueta {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--morado);
	margin-bottom: .45rem;
}

.depaw-rutina-productos {
	display: flex;
	gap: .8rem;
	align-items: center;
	flex-wrap: wrap;
}

.depaw-rutina-producto {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-rutina-producto img {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
}

.depaw-rutina-espera {
	margin: 0 0 1.2rem;
	padding: .8rem 1rem;
	background: var(--wp--preset--color--surface);
	border-radius: var(--depaw-radius);
	font-size: .93rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-rutina-espera b {
	color: var(--wp--preset--color--morado);
}

.depaw-rutina-sol .depaw-rutina-ir {
	margin-top: auto;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	font-size: .95rem;
}

/* ---- Diagnostico por sintoma ---- */

.depaw-diagnostico {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-sintoma {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1.2rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: .95rem 1.2rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.depaw-sintoma:hover,
.depaw-sintoma:focus-visible {
	border-color: var(--wp--preset--color--lila);
	transform: translateX(3px);
	box-shadow: var(--depaw-sombra-baja);
}

.depaw-sintoma-texto {
	font-size: 1rem;
}

.depaw-sintoma-rutina {
	font-size: .8rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	background: var(--wp--preset--color--lila-suave);
	border-radius: 999px;
	padding: .32rem .85rem;
	white-space: nowrap;
}

.depaw-sintoma-ir {
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
}

/* ---- Los tres pasos ---- */

.depaw-pasos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	counter-reset: paso;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-paso {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.6rem;
	position: relative;
}

.depaw-paso::before {
	counter-increment: paso;
	content: counter(paso);
	position: absolute;
	top: -18px;
	left: 1.5rem;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--morado);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 1.05rem;
}

.depaw-paso h3 {
	margin: .8rem 0 .5rem;
	font-size: 1.12rem;
}

.depaw-paso p {
	margin: 0;
	font-size: .96rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---- Que esperar ---- */

.depaw-espera {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-espera div {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.5rem;
	border-top: 4px solid var(--wp--preset--color--lila);
}

.depaw-espera div:last-child {
	border-top-color: var(--wp--preset--color--morado);
}

.depaw-espera b {
	display: block;
	margin-bottom: .4rem;
	font-size: 1.05rem;
}

.depaw-espera span {
	font-size: .96rem;
	color: var(--wp--preset--color--contrast-muted);
}


@media (max-width: 980px) {
	.depaw-rutinas-sol {
		grid-template-columns: 1fr;
	}

	.depaw-pasos {
		grid-template-columns: 1fr;
		gap: 2.2rem;
	}

	.depaw-espera {
		grid-template-columns: 1fr;
	}

	.depaw-sol-cabecera {
		min-height: 0;
	}
}

@media (max-width: 680px) {
	.depaw-sintoma {
		grid-template-columns: 1fr;
		gap: .6rem;
	}

	.depaw-sintoma-rutina,
	.depaw-sintoma-ir {
		justify-self: start;
	}
}

/* ---------------------------------------------------------------
   REGLA DEL SITIO: nada de franjas blancas entre bandas de color.

   WordPress mete un espacio automatico entre bloques hermanos. En una
   pagina construida como sucesion de bandas a todo el ancho, ese hueco
   se ve como una franja blanca: entre el menu y el hero, y entre cada
   dos secciones. Cada banda ya maneja su propio espacio interior.

   Se aplica solo cuando hay bandas a todo el ancho de por medio, asi
   que las entradas del blog conservan su ritmo entre parrafos.
   --------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* La primera banda va pegada al menu de navegacion */
main:has(> .alignfull:first-child),
main:has(> .wp-block-post-content > .alignfull:first-child) {
	margin-block-start: 0;
}

/* Y entre bandas consecutivas no queda hueco */
main > .alignfull + *,
main > * + .alignfull,
.wp-block-post-content > .alignfull + *,
.wp-block-post-content > * + .alignfull {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   PLANTILLA DE PAGINA DE SOLUCION
   La usan las cuatro paginas hijas de /soluciones/ con la plantilla
   templates/page-solucion.html. Los bloques son los mismos en las
   cuatro; el contenido es propio de cada una.
   --------------------------------------------------------------- */

/* ---- Cabecera con ficha de rutina ---- */

.depaw-sol-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(1.9rem, 3.4vw, 3.3rem);
}

.depaw-sol-hero::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	right: -120px;
	top: -160px;
	z-index: 0;
}

.depaw-sol-hero > * {
	position: relative;
	z-index: 1;
}

.depaw-hero-cols {
	align-items: center;
}

.depaw-sol-hero h1 {
	font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
	max-width: 16ch;
	line-height: 1.15;
	margin: 0 0 .8rem;
}

.depaw-migas {
	font-size: .85rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 1rem;
}

.depaw-migas a {
	text-decoration: none;
}

/* Ficha resumen de la rutina */

.depaw-ficha {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.5rem;
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-ficha-titulo {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--morado);
	margin: 0 0 1rem;
	font-weight: 700;
}

.depaw-ficha-item {
	display: flex;
	gap: .8rem;
	align-items: center;
	padding: .6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-ficha-item:last-of-type {
	border-bottom: 0;
}

.depaw-ficha-item img {
	width: 54px;
	height: 54px;
	flex: 0 0 54px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
}

.depaw-ficha-item b {
	display: block;
	font-size: .98rem;
	line-height: 1.25;
}

.depaw-ficha-item span {
	font-size: .85rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-ficha .wp-block-buttons {
	margin-top: 1.1rem;
}

.depaw-ficha .wp-block-button,
.depaw-ficha .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.depaw-ficha-pie {
	margin: .7rem 0 0 !important;
	font-size: .85rem;
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
}

/* ---- Aviso honesto ---- */

.depaw-aviso {
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--morado);
	border-radius: var(--depaw-radius);
	padding: 1.1rem 1.3rem;
	margin-top: 1.6rem;
	max-width: 720px;
}

.depaw-aviso p {
	margin: 0;
	font-size: .97rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-aviso p + p {
	margin-top: .25rem;
}

.depaw-aviso strong {
	color: var(--wp--preset--color--contrast);
}

/* ---- Las dos columnas de honestidad ---- */

.depaw-honestidad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-honestidad > div {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.5rem;
}

.depaw-honestidad > div:first-child {
	border-top: 4px solid var(--wp--preset--color--morado);
}

.depaw-honestidad > div:last-child {
	border-top: 4px solid var(--wp--preset--color--lila-claro);
}

.depaw-honestidad h3 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.depaw-honestidad ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.depaw-honestidad li {
	display: flex;
	gap: .6rem;
	font-size: .96rem;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.45;
}

.depaw-honestidad li::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: .2rem;
	background: var(--wp--preset--color--morado);
}

.depaw-honestidad > div:last-child li::before {
	background: var(--wp--preset--color--lila-claro);
}

/* ---- Pasos de la rutina ---- */

.depaw-rutina-pasos {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-paso-rutina {
	display: grid;
	grid-template-columns: 52px 132px 1fr;
	gap: 1.5rem;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.6rem;
	position: relative;
	overflow: hidden;
}

.depaw-paso-rutina::before {
	content: "";
	position: absolute;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	right: -70px;
	bottom: -120px;
	z-index: 0;
}

.depaw-paso-rutina > * {
	position: relative;
	z-index: 1;
}

.depaw-paso-num {
	font-family: var(--wp--preset--font-family--manuscrita);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--morado);
	text-align: center;
}

.depaw-paso-rutina img {
	width: 132px;
	height: 132px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
}

.depaw-paso-rutina h3 {
	margin: 0 0 .4rem;
	font-size: 1.18rem;
}

.depaw-paso-rutina p {
	margin: 0 0 .6rem;
	font-size: .97rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-paso-como {
	display: inline-block;
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	padding: .35rem .9rem;
	font-size: .87rem;
	color: var(--wp--preset--color--morado);
	font-weight: 600;
}

/* ---- Linea de tiempo ---- */

.depaw-linea {
	position: relative;
	padding-left: 2.4rem;
	max-width: 760px;
	margin-inline: auto;
}

.depaw-linea::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--wp--preset--color--lila-claro);
}

.depaw-hito {
	position: relative;
	padding-bottom: 1.6rem;
}

.depaw-hito:last-child {
	padding-bottom: 0;
}

.depaw-hito::before {
	content: "";
	position: absolute;
	left: -2.4rem;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--morado);
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px var(--wp--preset--color--lila-claro);
}

.depaw-hito b {
	display: block;
	font-size: 1.02rem;
	margin-bottom: .2rem;
}

.depaw-hito span {
	font-size: .97rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---- Bloque de compra ---- */

.depaw-compra {
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius);
	padding: clamp(1.6rem, 3vw, 2.4rem);
}

.depaw-compra .wc-block-grid__products,
.depaw-compra .wp-block-woocommerce-handpicked-products {
	margin-top: 1.2rem;
}

/* ---- Sigue leyendo ---- */

.depaw-sigue {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-sigue a {
	display: block;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.4rem;
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.depaw-sigue a:hover,
.depaw-sigue a:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--depaw-sombra-baja);
	border-color: var(--wp--preset--color--lila);
}

.depaw-sigue small {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--morado);
	margin-bottom: .4rem;
}

.depaw-sigue b {
	display: block;
	font-size: 1.08rem;
	line-height: 1.3;
	margin-bottom: .3rem;
}

.depaw-sigue span {
	font-size: .94rem;
	color: var(--wp--preset--color--contrast-muted);
}

@media (max-width: 980px) {
	.depaw-honestidad {
		grid-template-columns: 1fr;
	}

	.depaw-paso-rutina {
		grid-template-columns: 52px 1fr;
	}

	.depaw-paso-rutina img {
		display: none;
	}

	.depaw-sigue {
		grid-template-columns: 1fr;
	}
}

/* ---- La ficha sube y el hero se compacta ----
   Estaba centrada verticalmente contra una columna de texto mas alta, asi que
   arrancaba por debajo del titular. Ahora las dos columnas empiezan arriba, la
   ficha se alinea con el H1 y el hero pierde altura para caber entero antes de
   hacer scroll. */

.depaw-sol-hero {
	padding-block: clamp(1.2rem, 2.2vw, 2rem);
}

.depaw-sol-hero .depaw-hero-cols {
	align-items: flex-start;
}

/* Las columnas traen is-vertically-aligned-center, que pone align-self: center
   y gana al align-items del contenedor. Hay que anularlo en la columna. */
.depaw-sol-hero .depaw-hero-cols > .wp-block-column {
	align-self: flex-start;
}

.depaw-sol-hero .depaw-hero-cols > .wp-block-column:last-child {
	padding-top: 1.9rem;
}

.depaw-sol-hero .depaw-migas {
	margin-bottom: .6rem;
}

.depaw-sol-hero .depaw-aviso {
	margin-top: 1.2rem;
}

@media (max-width: 980px) {
	.depaw-sol-hero .depaw-hero-cols > .wp-block-column:last-child {
		padding-top: 0;
	}
}

/* ---- El aviso encabeza el panel de "es para ti", sin franja propia ----
   Como banda suelta quedaba flotando en una franja blanca entre dos zonas
   lilas, y ademas el layout constrained lo centraba. Ahora abre el panel y
   arranca en el borde de la franja de contenido, como el resto. */

.depaw-seccion .depaw-aviso {
	background: #fff;
	border-left: 4px solid var(--wp--preset--color--morado);
	border-radius: var(--depaw-radius);
	padding: 1.2rem 1.4rem;
	max-width: 860px;
	margin: 0 0 2rem !important;
}

.depaw-seccion .depaw-aviso > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- Hero de solucion mas compacto ----
   Con tres productos en la ficha, como en cabello dañado, el hero no cabia
   en pantallas cortas. Se recorta por los cuatro lados: titular mas contenido
   en menos lineas, entradilla mas corta de linea y ficha mas apretada. */

.depaw-sol-hero .depaw-migas {
	font-size: .82rem;
	margin-bottom: .4rem;
}

.depaw-sol-hero .depaw-eyebrow {
	margin-bottom: .3rem;
}

.depaw-sol-hero h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important;
	max-width: 19ch;
	line-height: 1.1;
	margin: 0 0 .6rem;
}

.depaw-sol-hero .depaw-lede {
	font-size: 1.05rem;
	line-height: 1.5;
	max-width: 52ch;
	margin: 0;
}

.depaw-sol-hero .depaw-ficha {
	padding: 1.2rem 1.3rem;
}

.depaw-sol-hero .depaw-ficha-titulo {
	margin-bottom: .7rem;
}

.depaw-sol-hero .depaw-ficha-item {
	padding: .45rem 0;
	gap: .7rem;
}

.depaw-sol-hero .depaw-ficha-item img {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
}

.depaw-sol-hero .depaw-ficha-item b {
	font-size: .93rem;
}

.depaw-sol-hero .depaw-ficha-item span {
	font-size: .81rem;
}

.depaw-sol-hero .wp-block-buttons {
	margin-top: .9rem;
}

.depaw-sol-hero .wp-block-button__link {
	padding-block: .7rem;
}

.depaw-sol-hero .depaw-hero-cols > .wp-block-column:last-child {
	padding-top: 1.5rem;
}

/* ---- Botones del bloque de compra a la misma altura ----
   Los titulos ocupan una o dos lineas segun el producto y eso desalineaba los
   botones. Se reserva altura fija para titulo y precio en vez de tocar el
   display o el ancho de la rejilla de WooCommerce, que es fragil. */

.depaw-compra .wc-block-grid__product-title {
	min-height: 2.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
}

.depaw-compra .wc-block-grid__product-price {
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
	margin-bottom: .8rem;
}

.depaw-compra .wp-block-button__link {
	min-height: 3.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.25;
}

/* ---------------------------------------------------------------
   LISTADO DEL BLOG (/blog/)
   Plantilla templates/home.html del tema hijo. Las cuatro guias van
   arriba porque estan marcadas como destacadas (sticky); el resto de
   articulos van debajo con paginacion. Cada tarjeta reserva el hueco
   de la foto destacada, aunque todavia no la tenga.
   --------------------------------------------------------------- */

/* ---- Cabecera ---- */

.depaw-blog-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(1.8rem, 3.2vw, 3rem);
}

.depaw-blog-hero::before {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	right: -120px;
	top: -150px;
	z-index: 0;
}

.depaw-blog-hero > * {
	position: relative;
	z-index: 1;
}

.depaw-blog-hero > .wp-block-group {
	padding-inline: 0;
	width: 100%;
}

.depaw-blog-hero > .wp-block-group > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.depaw-blog-titulo {
	font-size: clamp(2rem, 4.2vw, 2.8rem) !important;
	max-width: 18ch;
	line-height: 1.15;
	margin: 0 0 .7rem;
}

.depaw-blog-hero .depaw-lede {
	font-size: 1.15rem;
	max-width: 58ch;
	margin: 0;
}

/* ---- Filtros por categoria ---- */

.depaw-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.depaw-filtros a {
	display: block;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: .5rem 1.1rem;
	font-size: .93rem;
	font-weight: 600;
	color: var(--wp--preset--color--morado);
	text-decoration: none;
	box-shadow: var(--depaw-sombra-baja);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.depaw-filtros a:hover {
	background: var(--wp--preset--color--lila-suave);
}

.depaw-filtros .activo {
	background: var(--wp--preset--color--morado);
	color: #fff;
	border-color: var(--wp--preset--color--morado);
}

/* ---- Rejilla de tarjetas ---- */

.depaw-rejilla .wp-block-post-template {
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.depaw-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	box-shadow: var(--depaw-sombra-baja);
	transition: transform .2s ease, box-shadow .2s ease;
}

.depaw-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: var(--depaw-sombra-alta);
}

/* El titular estira su enlace sobre toda la tarjeta, asi que se puede
   hacer clic en cualquier parte sin envolver todo en un <a>. */
.depaw-tarjeta .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ---- Portada: foto destacada o marcador ---- */

.depaw-portada {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-destacadas .depaw-portada {
	aspect-ratio: 16 / 8;
}

.depaw-portada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.depaw-ph-foto {
	position: absolute;
	inset: .7rem;
	border: 2px dashed var(--wp--preset--color--lila-claro);
	border-radius: var(--depaw-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	color: var(--wp--preset--color--morado);
	text-align: center;
	padding: 1rem;
}

.depaw-ph-foto svg {
	width: 26px;
	height: 26px;
	opacity: .7;
}

.depaw-ph-foto b {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.depaw-ph-foto span {
	font-size: .8rem;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.3;
}

.depaw-cat {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 2;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .94);
	color: var(--wp--preset--color--morado);
	padding: .3rem .8rem;
	border-radius: 999px;
	box-shadow: var(--depaw-sombra-baja);
}

/* ---- Cuerpo de la tarjeta ---- */

.depaw-tarjeta-cuerpo {
	padding: 1.3rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.depaw-guia-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--morado);
	background: var(--wp--preset--color--surface);
	padding: .25rem .6rem;
	border-radius: 4px;
	margin: 0 0 .6rem;
}

.depaw-tarjeta .wp-block-post-title {
	margin: 0 0 .5rem;
	font-size: 1.12rem;
	line-height: 1.32;
}

.depaw-destacadas .depaw-tarjeta .wp-block-post-title {
	font-size: 1.3rem;
}

.depaw-tarjeta .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.depaw-tarjeta .wp-block-post-title a:hover {
	color: var(--wp--preset--color--morado);
}

.depaw-tarjeta .wp-block-post-excerpt {
	margin: 0 0 1.1rem;
}

.depaw-tarjeta .wp-block-post-excerpt__excerpt {
	font-size: .96rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.depaw-tarjeta .wp-block-post-excerpt__more-text {
	display: none;
}

.depaw-tarjeta-pie {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.depaw-tarjeta-tiempo {
	font-size: .87rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-tarjeta-leer {
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
}

/* ---- Paginacion ---- */

.depaw-paginacion {
	margin-top: 2.5rem;
	gap: .5rem;
}

.depaw-paginacion a,
.depaw-paginacion span.current {
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	font-size: .95rem;
	font-weight: 600;
	color: var(--wp--preset--color--morado);
	text-decoration: none;
	background: #fff;
	padding-inline: .7rem;
}

.depaw-paginacion span.current {
	background: var(--wp--preset--color--morado);
	color: #fff;
	border-color: var(--wp--preset--color--morado);
}

.depaw-paginacion a:hover {
	background: var(--wp--preset--color--lila-suave);
}

@media (max-width: 980px) {
	.depaw-rejilla .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.depaw-rejilla .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   ARTICULO DEL BLOG
   Plantilla templates/single.html del tema hijo. La misma sirve para
   las guias completas y para los articulos: el indice lateral solo
   aparece a partir de cinco secciones.
   --------------------------------------------------------------- */

/* ---- Cabecera ---- */

.depaw-art-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(1.6rem, 3vw, 2.6rem) 0;
}

.depaw-art-hero::before {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	right: -120px;
	top: -150px;
	z-index: 0;
}

.depaw-art-hero > * {
	position: relative;
	z-index: 1;
}

.depaw-art-hero > .wp-block-group {
	padding-inline: 0;
	width: 100%;
}

.depaw-art-hero > .wp-block-group > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.depaw-art-hero-in {
	max-width: 800px;
}

.depaw-art-hero-in > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.depaw-art-titulo {
	font-size: clamp(1.9rem, 4vw, 2.7rem) !important;
	line-height: 1.12;
	margin: .7rem 0 .8rem;
	max-width: 22ch;
}

.depaw-art-hero .depaw-lede {
	font-size: 1.15rem;
	max-width: 62ch;
	margin: 0 0 1.3rem;
}

.depaw-categoria {
	display: inline-block;
	background: var(--wp--preset--color--morado);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .35rem .9rem;
	border-radius: 999px;
	text-decoration: none;
}

.depaw-categoria:hover {
	background: var(--wp--preset--color--lila);
}

.depaw-art-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.4rem;
	align-items: center;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.depaw-art-meta b {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Foto destacada, a caballo entre la cabecera y el cuerpo */

.depaw-portada-hero {
	position: relative;
	margin-top: 1.8rem;
	margin-bottom: -4rem;
	aspect-ratio: 16 / 7;
	border-radius: var(--depaw-radius);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--depaw-sombra-alta);
	border-bottom: 0;
}

.depaw-portada-hero .depaw-ph-foto {
	background: #fff;
}

/* ---- Indice lateral y cuerpo ---- */

.depaw-art-cols {
	display: flex;
	justify-content: center;
}

.depaw-art-cuerpo {
	padding-block: 6rem clamp(2rem, 4vw, 3.2rem);
}

/* ---- Indice plegado, encima del texto ----
   Va cerrado a proposito: quien quiera saltar a una seccion lo abre, y quien
   venga a leer de corrido no se encuentra una lista de quince puntos antes
   del primer parrafo. */

.depaw-toc {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	margin: 0 0 2.2rem;
	overflow: hidden;
}

.depaw-toc summary {
	display: flex;
	align-items: center;
	gap: .8rem;
	cursor: pointer;
	list-style: none;
	padding: 1rem 1.3rem;
}

.depaw-toc summary::-webkit-details-marker {
	display: none;
}

.depaw-toc summary span {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--morado);
}

.depaw-toc summary small {
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
	margin-right: auto;
}

.depaw-toc summary::after {
	content: "+";
	color: var(--wp--preset--color--morado);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1;
}

.depaw-toc[open] summary::after {
	content: "\2013";
}

.depaw-toc[open] summary {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-toc ol {
	list-style: none;
	margin: 0;
	padding: .9rem 1.3rem 1.2rem;
	counter-reset: toc;
	columns: 2;
	column-gap: 2rem;
}

.depaw-toc li {
	counter-increment: toc;
	break-inside: avoid;
	margin-bottom: .1rem;
}

.depaw-toc a {
	display: block;
	padding: .34rem 0 .34rem 1.7rem;
	position: relative;
	font-size: .94rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}

.depaw-toc a::before {
	content: counter(toc);
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--morado);
	font-weight: 700;
	font-size: .82rem;
}

.depaw-toc a:hover {
	color: var(--wp--preset--color--morado);
}

/* ---- Cuerpo del articulo ---- */

.depaw-articulo {
	max-width: 720px;
	font-size: 1.08rem;
	line-height: 1.72;
}

.depaw-articulo .wp-block-post-content > p {
	margin: 0 0 1.3rem;
}

.depaw-articulo h2 {
	font-size: clamp(1.45rem, 2.6vw, 1.9rem);
	line-height: 1.2;
	margin: 2.6rem 0 .9rem;
	padding-top: 1.4rem;
	border-top: 2px solid var(--wp--preset--color--lila-suave);
	scroll-margin-top: 6rem;
}

.depaw-articulo h3 {
	font-size: 1.18rem;
	margin: 1.9rem 0 .6rem;
}

.depaw-articulo ul,
.depaw-articulo ol {
	margin: 0 0 1.3rem;
	padding-left: 1.3rem;
}

.depaw-articulo li {
	margin-bottom: .5rem;
}

/* ---- Firma de autoria ---- */

.depaw-autoria {
	display: flex;
	gap: 1rem;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.3rem 1.5rem;
	margin: 2.6rem 0 0;
}

.depaw-autoria img {
	width: 56px;
	height: auto;
	flex: 0 0 56px;
}

.depaw-autoria b {
	display: block;
	margin-bottom: .2rem;
}

.depaw-autoria span {
	font-size: .94rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---- Sigue leyendo ---- */

.depaw-art-sigue {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-art-sigue a {
	display: block;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.4rem;
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.depaw-art-sigue a:hover,
.depaw-art-sigue a:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--depaw-sombra-baja);
	border-color: var(--wp--preset--color--lila);
}

.depaw-art-sigue small {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--morado);
	margin-bottom: .4rem;
}

.depaw-art-sigue b {
	display: block;
	font-size: 1.05rem;
	line-height: 1.3;
	margin-bottom: .3rem;
}

.depaw-art-sigue span {
	font-size: .93rem;
	color: var(--wp--preset--color--contrast-muted);
}

@media (max-width: 1100px) {
	.depaw-art-cuerpo {
		padding-top: 5rem;
	}

	.depaw-toc ol {
		columns: 1;
	}
}

@media (max-width: 780px) {
	.depaw-portada-hero {
		aspect-ratio: 16 / 10;
		margin-bottom: -2.5rem;
	}

	.depaw-art-cuerpo {
		padding-top: 4rem;
	}

	.depaw-art-sigue {
		grid-template-columns: 1fr;
	}
}

/* ---- El articulo se alinea con el resto del sitio ----
   Estaba centrado en su ancho de lectura, asi que arrancaba mas adentro que
   las demas paginas. Ahora empieza en el borde izquierdo de la franja de
   contenido, igual que las cabeceras de seccion, y conserva el ancho de
   lectura para que la linea no se haga larga de seguir. */

.depaw-art-cols {
	justify-content: flex-start;
	width: 100%;
}

.depaw-articulo {
	max-width: 800px;
	width: 100%;
}

.depaw-articulo > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (max-width: 900px) {
	.depaw-articulo {
		max-width: none;
	}
}

/* ---- El articulo ocupa la franja completa del sitio ----
   Estaba limitado al ancho de lectura y dejaba media pantalla vacia a la
   derecha. Ahora usa los mismos 1200px que el resto de las paginas. */

.depaw-articulo {
	max-width: none;
	width: 100%;
}

.depaw-art-hero-in {
	max-width: none;
}

.depaw-art-titulo {
	max-width: 26ch;
}

.depaw-art-hero .depaw-lede {
	max-width: 80ch;
}

@media (min-width: 1101px) {
	.depaw-articulo {
		font-size: 1.12rem;
	}
}

/* ---- Secciones sin linea divisoria ----
   La separacion entre secciones se marca con espacio y jerarquia, no con una
   regla horizontal: el H2 abre seccion, mas grande y con aire por encima, y
   los H3 quedan claramente subordinados a el. */

.depaw-articulo h2 {
	border-top: 0;
	padding-top: 0;
	margin: 3.4rem 0 1rem;
	font-size: clamp(1.5rem, 2.8vw, 2.05rem);
	letter-spacing: -.015em;
}

.depaw-articulo h2:first-child {
	margin-top: 0;
}

.depaw-articulo h3 {
	margin: 2rem 0 .5rem;
	font-size: 1.16rem;
	color: var(--wp--preset--color--morado);
}

/* ---- Preguntas frecuentes dentro del articulo ----
   Las preguntas van juntas entre si, pero separadas del texto que viene
   despues: sin ese aire, el parrafo siguiente parecia la respuesta de la
   ultima pregunta. */

.depaw-articulo .wp-block-details {
	margin: 0 0 .7rem;
	padding: 1rem 1.2rem;
}

.depaw-articulo .wp-block-details summary {
	padding: 0;
}

.depaw-articulo .wp-block-details[open] summary {
	margin-bottom: .6rem;
}

.depaw-articulo .wp-block-details p:last-child {
	margin-bottom: 0;
}

/* La primera pregunta se separa del titulo o del parrafo que la precede */
.depaw-articulo * + .wp-block-details {
	margin-top: 1.4rem;
}

.depaw-articulo .wp-block-details + .wp-block-details {
	margin-top: 0;
}

/* Y lo que venga despues de la ultima pregunta respira */
.depaw-articulo .wp-block-details + :not(.wp-block-details) {
	margin-top: 2.4rem;
}

/* ===============================================================
   FICHA DE PRODUCTO INDIVIDUAL
   Plantilla single-product.html. El contenido propio de cada
   producto vive en productos.php.
   =============================================================== */

/* ---------- Banda superior con la ficha de compra ---------- */
.depaw-ficha-banda {
	background: linear-gradient(170deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 62%);
	padding-block: clamp(1rem, 2.4vw, 1.8rem) clamp(2rem, 4vw, 3.2rem);
}

.depaw-migas-producto {
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
}

.depaw-migas-producto .woocommerce-breadcrumb {
	font-size: .85rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-migas-producto .woocommerce-breadcrumb a {
	text-decoration: none;
}

.depaw-migas-producto .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* Foto y compra a partes iguales. */
.depaw-ficha-producto {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: start;
}

/* La maquetacion de flujo de WordPress mete margenes entre hermanos;
   dentro de una rejilla sobran y descuadran las dos columnas. */
.depaw-ficha-producto > * + * {
	margin-block-start: 0;
}

/* ---------- Foto del producto ----------
   Se usa la imagen destacada y no la galeria de WooCommerce a proposito.
   La galeria arranca invisible y se enciende con flexslider: mientras ese
   JavaScript no llega, la foto sale recortada, y solo se veia bien al
   refrescar. Los productos tienen una sola foto, asi que la galeria no
   aportaba nada y si tres archivos de JavaScript y un fallo al entrar. */
/* La cabecera del sitio es sticky y deja 134px visibles al bajar. Si la foto
   se pega a 1.5rem queda por debajo y se ve cortada. */
.depaw-galeria {
	position: sticky;
	top: 9.5rem;
}

.depaw-galeria .wp-block-post-featured-image {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	box-shadow: var(--depaw-sombra);
	overflow: hidden;
	margin: 0;
	/* Mas ancha que alta. La foto va con object-fit contain, asi que el envase
	   se sigue viendo entero, solo que la caja ocupa menos alto. */
	aspect-ratio: 5 / 4;
	display: grid;
	place-items: center;
}

/* El bloque escribe object-fit en el atributo style de la img, y eso gana a
   cualquier hoja de estilos. Por eso la plantilla pide scale contain: aqui
   solo se refuerza por si alguien edita el bloque y lo deja en cover. */
.depaw-galeria .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	border-radius: 0;
}

/* ---------- Columna de compra ----------
   Se llama depaw-ficha-compra y no depaw-compra porque ese nombre ya lo usa
   el bloque de productos de las paginas de solucion, y estaba heredando de
   ahi el fondo y el relleno por accidente. */
.depaw-ficha-compra {
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius);
	padding: clamp(1.6rem, 3vw, 2.4rem);
}

.depaw-ficha-compra > * + * {
	margin-block-start: 0;
}

/* Cuando alguien pulsa Comprar en la barra de abajo sin haber elegido tamano,
   se sube aqui y el selector parpadea para que se vea que falta ese paso. */
.depaw-pide-tamano .depaw-carrito-bloque select {
	animation: depaw-pide 1.6s ease;
}

@keyframes depaw-pide {
	0%, 100% { box-shadow: none; }
	20%, 60% { box-shadow: 0 0 0 2px var(--wp--preset--color--morado); }
}

@media (prefers-reduced-motion: reduce) {
	.depaw-pide-tamano .depaw-carrito-bloque select {
		animation: none;
		box-shadow: 0 0 0 2px var(--wp--preset--color--morado);
	}
}

.depaw-ficha-compra .depaw-eyebrow {
	color: var(--wp--preset--color--morado);
	margin-bottom: .5rem;
}

.depaw-producto-titulo {
	font-size: clamp(1.75rem, 3.2vw, 2.35rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	margin: 0 0 .45rem;
}

.depaw-compra-sub {
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 .9rem;
}

.depaw-compra-lede {
	font-size: 1.08rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 1.2rem;
	max-width: 46ch;
}

.depaw-compra-lede p {
	margin: 0;
}

.depaw-precio {
	margin: 0 0 1.2rem;
}

.depaw-precio .wc-block-components-product-price {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Formulario de compra ----------
   Es el formulario clasico de WooCommerce, no el bloque nuevo. El bloque
   nuevo esta en beta y entrega el boton oculto: solo aparece si arranca su
   JavaScript, y si ese archivo no llega no hay forma de comprar. Este es un
   formulario de verdad que se envia aunque el navegador no ejecute nada. */
.depaw-carrito-bloque {
	width: 100%;
	max-width: none;
	margin: 0;
}

.depaw-carrito-bloque form.cart {
	margin: 0;
}

/* El bloque monta el formulario como rejilla de cuatro columnas, pensada para
   otra maqueta: aqui dejaba el selector a media anchura. En el variable se
   apila todo, y en el simple cantidad y boton van en fila. */
.depaw-ficha-compra .depaw-carrito-bloque form.cart.variations_form {
	display: block;
}

.depaw-ficha-compra .depaw-carrito-bloque form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: .6rem;
	flex-wrap: wrap;
}

/* Selector de tamano */
.depaw-carrito-bloque table.variations {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
	border-collapse: collapse;
}

/* WooCommerce monta el selector dentro de una tabla. Hay que pasar toda la
   cadena a bloques, no solo las celdas: si el tbody y el tr siguen siendo
   tabla, el ancho lo manda el contenido y el select queda a media columna. */
.depaw-carrito-bloque table.variations,
.depaw-carrito-bloque table.variations tbody,
.depaw-carrito-bloque table.variations tr,
.depaw-carrito-bloque table.variations th,
.depaw-carrito-bloque table.variations td {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.depaw-carrito-bloque table.variations label {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	margin: 0 0 .5rem;
	display: block;
}

/* Ojo con la altura de linea: "font: inherit" se trae la del cuerpo, que es
   1.65, y a 18px son casi 30px de linea dentro de una caja de 22px. El texto
   del tamano elegido salia cortado por la mitad. Se fija a mano y se deja
   alto minimo para que nunca vuelva a recortarse. */
.depaw-carrito-bloque select {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.35;
	min-height: 3.2rem;
	height: auto;
	padding: .8rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

/* WooCommerce trae su propia regla para este select, con mas peso que la de
   arriba: lo deja transparente, a un 75% de ancho y con su flecha. Se le gana
   con un selector mas largo, pero se le respeta la flecha: por eso aqui se
   toca background-color y no background a secas. */
.depaw-ficha-compra .depaw-carrito-bloque form.cart table.variations td select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin-right: 0;
	background-color: var(--wp--preset--color--base);
}

.depaw-carrito-bloque select:focus {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 2px;
}

.depaw-carrito-bloque .reset_variations {
	display: inline-block;
	margin-top: .5rem;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* El precio de la variacion no se repite aqui: el grande de arriba ya cambia
   al elegir tamano, y verlo dos veces en la misma columna sobra. */
.depaw-carrito-bloque .woocommerce-variation-price {
	display: none;
}

.depaw-carrito-bloque .woocommerce-variation-availability {
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* Cantidad y boton, uno al lado del otro */
.depaw-carrito-bloque .woocommerce-variation-add-to-cart,
.depaw-carrito-bloque form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: .6rem;
	flex-wrap: wrap;
}

.depaw-carrito-bloque .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	background: var(--wp--preset--color--base);
	overflow: hidden;
	flex: 0 0 auto;
}

.depaw-carrito-bloque .quantity input.qty {
	width: 68px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.35;
	border: 0;
	background: transparent;
	text-align: center;
	padding: .85rem 0;
	-moz-appearance: textfield;
}

.depaw-carrito-bloque .single_add_to_cart_button {
	flex: 1 1 200px;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--depaw-radius);
	font-family: inherit;
	line-height: 1.35;
	font-size: 1rem;
	font-weight: 600;
	padding: .85rem 1.75rem;
	cursor: pointer;
	transition: background .18s ease;
}

.depaw-carrito-bloque .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--contrast);
}

.depaw-carrito-bloque .single_add_to_cart_button.disabled,
.depaw-carrito-bloque .single_add_to_cart_button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.depaw-carrito-bloque .stock {
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
	margin-top: .6rem;
}

/* ---------- Garantias y enlace a la rutina, bajo el boton ---------- */
.depaw-compra-confianza {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: .5rem;
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-compra-confianza li {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
}

.depaw-compra-confianza svg {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin-top: .28rem;
	color: var(--wp--preset--color--morado);
}

.depaw-enlace-rutina {
	margin-top: 1.1rem;
	display: flex;
	gap: .7rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: .85rem 1rem;
	font-size: .95rem;
}

.depaw-enlace-rutina:hover {
	border-color: var(--wp--preset--color--lila);
	text-decoration: none;
}

.depaw-enlace-rutina b {
	color: var(--wp--preset--color--morado);
}

.depaw-enlace-rutina i {
	margin-left: auto;
	color: var(--wp--preset--color--morado);
	font-weight: 700;
	font-style: normal;
}

/* ---------- Tira de sellos ---------- */
.depaw-sellos-tira {
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
}

.depaw-sellos-tira ul {
	list-style: none;
	margin: 0;
	padding: .85rem 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	font-size: .92rem;
	text-align: center;
}

.depaw-sellos-tira li + li {
	border-left: 1px solid rgba(255, 255, 255, .28);
}

/* ---------- Es para ti ---------- */
.depaw-parati {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

.depaw-parati > div {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.4rem 1.5rem;
}

.depaw-parati-no {
	background: var(--wp--preset--color--surface);
}

.depaw-parati h3 {
	margin: 0 0 .8rem;
	font-size: 1.1rem;
}

.depaw-parati ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .6rem;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-parati li {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
}

.depaw-parati li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 7px;
	margin-top: .6rem;
	background: var(--wp--preset--color--lila);
}

.depaw-parati-no li::before {
	background: var(--wp--preset--color--contrast-muted);
	opacity: .4;
}

.depaw-honesto {
	margin-top: 1.2rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--lila);
	border-radius: var(--depaw-radius);
	padding: 1rem 1.2rem;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-honesto b {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Modo de uso ---------- */
.depaw-uso-lede {
	margin: 0 0 1.4rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 60ch;
}

.depaw-pasos-uso {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
	counter-reset: depawpaso;
}

.depaw-paso-uso {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.3rem 1.4rem;
	counter-increment: depawpaso;
}

.depaw-paso-uso::before {
	content: counter(depawpaso, decimal-leading-zero);
	display: block;
	font-size: .95rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	letter-spacing: .08em;
	margin-bottom: .5rem;
}

.depaw-paso-uso h3 {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
}

.depaw-paso-uso p {
	margin: 0;
	font-size: .98rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-uso-pie {
	margin: 1.2rem 0 0;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 72ch;
}

/* ---------- Que lleva ---------- */
.depaw-lleva {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: .9rem;
}

.depaw-lleva-item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.1rem;
}

.depaw-lleva-item b {
	display: block;
	color: var(--wp--preset--color--morado);
	font-size: 1rem;
	margin-bottom: .3rem;
}

.depaw-lleva-item span {
	font-size: .93rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---------- Descripcion larga ---------- */
.depaw-descripcion h2 {
	font-size: 1.15rem;
	margin: 2rem 0 .5rem;
	color: var(--wp--preset--color--morado);
}

.depaw-descripcion > *:first-child {
	margin-top: 0;
}

.depaw-descripcion .wp-block-table {
	margin-top: 1rem;
}

/* ---------- La rutina ---------- */
.depaw-rutina-caja {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: center;
}

.depaw-rutina-texto h2 {
	margin: .5rem 0 .7rem;
	font-size: clamp(1.6rem, 3vw, 2rem);
}

.depaw-rutina-texto p {
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.depaw-rutina-texto .depaw-eyebrow {
	color: var(--wp--preset--color--morado);
}

.depaw-rutina-cta {
	margin-top: 1.3rem;
}

.depaw-rutina-cta a {
	display: inline-block;
	background: var(--wp--preset--color--lila-suave);
	color: var(--wp--preset--color--morado);
	text-decoration: none;
	font-weight: 600;
	padding: .85rem 1.75rem;
	border-radius: var(--depaw-radius);
}

.depaw-rutina-cta a:hover {
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.depaw-rutina-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.depaw-rutina-lista li {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
}

.depaw-rutina-lista a,
.depaw-rutina-actual {
	display: flex;
	gap: .8rem;
	align-items: center;
	padding: .7rem .9rem;
	text-decoration: none;
	color: inherit;
}

.depaw-rutina-lista a:hover {
	text-decoration: none;
}

.depaw-rutina-lista li:has(a):hover {
	border-color: var(--wp--preset--color--lila);
}

.depaw-rutina-lista img,
.depaw-rutina-lista .depaw-sin-foto {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--depaw-radius);
}

.depaw-rutina-datos b {
	display: block;
	font-size: 1rem;
}

.depaw-rutina-datos small {
	color: var(--wp--preset--color--contrast-muted);
	font-size: .9rem;
}

.depaw-rutina-lista .depaw-rutina-actual {
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius);
}

.depaw-rutina-lista li:has(.depaw-rutina-actual) {
	border-color: var(--wp--preset--color--lila);
}

.depaw-rutina-actual em {
	margin-left: auto;
	font-style: normal;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
}

.depaw-rutina-lista i {
	margin-left: auto;
	font-style: normal;
	color: var(--wp--preset--color--morado);
	font-weight: 700;
}

/* ---------- Barra de compra que acompana al bajar ---------- */
.depaw-barra-compra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .07);
	padding: .7rem 0;
	transform: translateY(110%);
	transition: transform .22s ease;
}

.depaw-barra-compra.is-visible {
	transform: translateY(0);
}

.depaw-barra-compra-in {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.depaw-barra-compra img {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	object-fit: contain;
	border-radius: var(--depaw-radius);
	background: var(--wp--preset--color--surface);
}

.depaw-barra-compra b {
	font-size: 1rem;
	display: block;
	line-height: 1.25;
}

.depaw-barra-compra small {
	display: block;
	color: var(--wp--preset--color--contrast-muted);
	font-size: .88rem;
}

.depaw-barra-compra .depaw-barra-cta {
	border: 0;
	font: inherit;
	cursor: pointer;
	margin-left: auto;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
	padding: .65rem 1.5rem;
	border-radius: var(--depaw-radius);
	white-space: nowrap;
}

.depaw-barra-compra .depaw-barra-cta:hover {
	background: var(--wp--preset--color--contrast);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.depaw-barra-compra {
		transition: none;
	}
}

/* ---------- Adaptacion a pantallas pequenas ---------- */
@media (max-width: 980px) {
	.depaw-ficha-producto,
	.depaw-parati,
	.depaw-rutina-caja {
		grid-template-columns: 1fr;
	}

	.depaw-galeria {
		position: static;
	}

	.depaw-pasos-uso {
		grid-template-columns: 1fr;
	}

	.depaw-sellos-tira ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.depaw-sellos-tira li + li {
		border-left: 0;
	}
}

@media (max-width: 600px) {
	.depaw-barra-compra small {
		display: none;
	}

	.depaw-barra-compra .depaw-barra-cta {
		padding-inline: 1.1rem;
	}
}

/* ===============================================================
   CARRITO DE LA CABECERA
   Contador sobre el icono y panel de vista previa. El marcado y el
   script estan en carrito.php.
   =============================================================== */

.depaw-carrito {
	position: relative;
	display: inline-flex;
}

.depaw-carrito-num {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	font-size: .72rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--wp--preset--color--lila-claro);
}

/* ---------- Panel ---------- */
.depaw-carrito-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.depaw-carrito-fondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .2s ease;
}

.depaw-carrito-panel.is-visible .depaw-carrito-fondo {
	opacity: 1;
}

.depaw-carrito-caja {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100%);
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 28px rgba(0, 0, 0, .14);
	transform: translateX(100%);
	transition: transform .22s ease;
}

.depaw-carrito-panel.is-visible .depaw-carrito-caja {
	transform: translateX(0);
}

/* Con la barra de administracion, el panel arranca por debajo de ella o el
   titulo queda tapado. Solo lo ve quien tiene sesion abierta. */
body.admin-bar .depaw-carrito-caja {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .depaw-carrito-caja {
		top: 46px;
	}
}

body.depaw-carrito-abierto {
	overflow: hidden;
}

.depaw-carrito-cabeza {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.4rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-carrito-cabeza h2 {
	margin: 0;
	font-size: 1.15rem;
}

.depaw-carrito-cerrar {
	margin-left: auto;
	background: none;
	border: 0;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	padding: 0 .2rem;
}

.depaw-carrito-cerrar:hover {
	color: var(--wp--preset--color--morado);
}

.depaw-carrito-cuerpo {
	flex: 1;
	overflow-y: auto;
	padding: 1.2rem 1.4rem;
}

.depaw-carrito-cargando,
.depaw-carrito-vacio {
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
	margin: 2rem 0;
	line-height: 1.7;
}

.depaw-carrito-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.depaw-carrito-lista li {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-carrito-lista li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.depaw-carrito-lista img,
.depaw-carrito-sinfoto {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--depaw-radius);
}

.depaw-carrito-datos {
	display: grid;
	gap: .15rem;
	font-size: .95rem;
}

.depaw-carrito-datos b {
	line-height: 1.3;
}

.depaw-carrito-datos small {
	color: var(--wp--preset--color--contrast-muted);
	font-size: .85rem;
}

.depaw-carrito-cant {
	color: var(--wp--preset--color--contrast-muted);
	font-size: .9rem;
	margin-top: .2rem;
}

/* Quitar un producto */
.depaw-carrito-quitar {
	margin-left: auto;
	align-self: flex-start;
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.depaw-carrito-quitar:hover {
	border-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--morado);
}

.depaw-carrito-quitar:disabled {
	opacity: .4;
	cursor: wait;
}

.depaw-carrito-quitando {
	opacity: .5;
}

.depaw-carrito-error {
	flex-basis: 100%;
	font-size: .85rem;
	color: #b3261e;
	margin-top: .3rem;
}

/* ---------- Pie del panel ---------- */
.depaw-carrito-pie {
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 1.2rem 1.4rem;
	background: var(--wp--preset--color--surface);
}

.depaw-carrito-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 .3rem;
	font-size: 1.05rem;
}

.depaw-carrito-total b {
	font-size: 1.3rem;
}

.depaw-carrito-nota {
	margin: 0 0 1rem;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-carrito-btn {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
	padding: .85rem 1rem;
	border-radius: var(--depaw-radius);
}

.depaw-carrito-btn:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.depaw-carrito-btn-suave {
	margin-top: .6rem;
	background: transparent;
	color: var(--wp--preset--color--morado);
	border: 1px solid var(--wp--preset--color--lila);
}

.depaw-carrito-btn-suave:hover {
	background: var(--wp--preset--color--lila-suave);
	color: var(--wp--preset--color--morado);
}

@media (prefers-reduced-motion: reduce) {
	.depaw-carrito-fondo,
	.depaw-carrito-caja {
		transition: none;
	}
}

/* ===============================================================
   PAGINA DE DISTRIBUIDORAS
   Plantilla page-distribuidoras.html. El contenido son bloques,
   editable desde el editor.
   =============================================================== */

/* ---------- Hero ---------- */
.depaw-distri-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 76%);
	padding-block: clamp(1.3rem, 2.2vw, 1.9rem);
}

.depaw-distri-hero::before {
	content: "";
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	right: -140px;
	top: -180px;
	z-index: 0;
}

.depaw-distri-hero > * {
	position: relative;
	z-index: 1;
}

.depaw-distri-hero-in {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: center;
}

.depaw-distri-hero-in > * + * {
	margin-block-start: 0;
}

.depaw-distri-hero h1 {
	max-width: 24ch;
	font-size: clamp(1.8rem, 2.9vw, 2.25rem);
	line-height: 1.12;
	margin: 0 0 .6rem;
}

.depaw-distri-hero .depaw-eyebrow {
	color: var(--wp--preset--color--morado);
}

.depaw-distri-lede {
	font-size: 1.1rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 50ch;
	margin: 0 0 1.1rem;
}

.depaw-distri-foto {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	overflow: hidden;
	box-shadow: var(--depaw-sombra-alta);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: .9rem;
	max-width: 344px;
	width: 100%;
	justify-self: end;
	margin: 0;
}

.depaw-distri-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.depaw-distri-cifras {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
}

.depaw-distri-cifras li {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: .38rem .85rem;
	font-size: .88rem;
	box-shadow: var(--depaw-sombra);
	white-space: nowrap;
}

.depaw-distri-cifras b {
	color: var(--wp--preset--color--morado);
}

/* ---------- Lo que ganas ---------- */
.depaw-ganas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.depaw-gana {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	box-shadow: var(--depaw-sombra);
}

.depaw-gana-icono {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--morado);
	margin-bottom: .2rem;
}

.depaw-gana-icono svg {
	width: 20px;
	height: 20px;
}

.depaw-gana b {
	font-size: 1.02rem;
	line-height: 1.3;
}

.depaw-gana span {
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---------- Las cuentas claras ---------- */
.depaw-cuenta-bloque {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: center;
}

.depaw-cuenta-bloque > * + * {
	margin-block-start: 0;
}

.depaw-cuenta-visual {
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	overflow: hidden;
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-cuenta-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1;
	display: block;
	border-radius: 0;
}

.depaw-cuenta {
	display: grid;
	gap: 1rem;
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	box-shadow: var(--depaw-sombra);
}

.depaw-cuenta-caja {
	text-align: center;
}

.depaw-cuenta-caja span {
	display: block;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	margin-bottom: .4rem;
}

.depaw-cuenta-caja b {
	display: block;
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	line-height: 1.1;
}

.depaw-cuenta-caja small {
	display: block;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
	margin-top: .35rem;
}

.depaw-cuenta-flecha {
	font-size: 1.8rem;
	color: var(--wp--preset--color--morado);
	line-height: 1;
	text-align: center;
	transform: rotate(90deg);
}

.depaw-cuenta-pie {
	margin: 1.1rem 0 0;
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---------- Como funciona: la ruta ---------- */
.depaw-ruta {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.depaw-ruta::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 16.6%;
	right: 16.6%;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--lila-claro) 0 10px, transparent 10px 20px);
	z-index: 0;
}

/* Columna flexible para que la pastilla se pegue abajo. Si no, cada una
   queda a una altura distinta segun las lineas que ocupe su parrafo. */
.depaw-ruta li {
	position: relative;
	z-index: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.depaw-ruta-num {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	margin: 0 auto 1.1rem;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	font-size: 1.5rem;
	font-weight: 700;
	box-shadow: 0 0 0 8px var(--wp--preset--color--base), 0 8px 20px rgba(119, 52, 178, .28);
}

.depaw-ruta li:nth-child(2) .depaw-ruta-num {
	background: #8f4ec6;
}

.depaw-ruta li:nth-child(3) .depaw-ruta-num {
	background: var(--wp--preset--color--lila);
}

.depaw-ruta h3 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.depaw-ruta p {
	margin: 0 0 .8rem;
	font-size: .98rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 34ch;
	margin-inline: auto;
}

.depaw-ruta-marca {
	display: inline-block;
	margin-top: auto;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	background: var(--wp--preset--color--lila-suave);
	border-radius: 999px;
	padding: .3rem .8rem;
}

/* ---------- Reglas: el acuerdo ---------- */
.depaw-acuerdo {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	overflow: hidden;
	box-shadow: var(--depaw-sombra-alta);
}

.depaw-acuerdo-cabeza {
	background: linear-gradient(120deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--lila-claro) 100%);
	padding: 1.2rem 1.6rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.depaw-acuerdo-cabeza b {
	font-size: 1.1rem;
}

.depaw-acuerdo-sello {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: .35rem .9rem;
}

.depaw-acuerdo ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: acu;
}

.depaw-acuerdo li {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.3rem 1.6rem;
	border-top: 1px solid var(--wp--preset--color--border);
	counter-increment: acu;
}

.depaw-acuerdo li:first-child {
	border-top: 0;
}

.depaw-acuerdo li::before {
	content: counter(acu);
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	color: var(--wp--preset--color--morado);
	font-weight: 700;
	font-size: .92rem;
	display: grid;
	place-items: center;
}

.depaw-acuerdo b {
	display: block;
	margin-bottom: .2rem;
}

.depaw-acuerdo span {
	font-size: .96rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-acuerdo-pie {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 1.2rem 1.6rem;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.depaw-acuerdo-pie b {
	color: var(--wp--preset--color--contrast);
	display: inline;
}

/* ---------- Cierre con foto ---------- */
.depaw-cierre-distri {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: center;
	background: var(--wp--preset--color--lila-suave);
	border-radius: var(--depaw-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

.depaw-cierre-distri > * + * {
	margin-block-start: 0;
}

.depaw-cierre-distri h2 {
	margin: 0 0 .5rem;
}

.depaw-cierre-distri > div > p {
	color: var(--wp--preset--color--contrast-muted);
	margin: 0 0 1.2rem;
	max-width: 46ch;
}

.depaw-cierre-foto {
	background: var(--wp--preset--color--base);
	border-radius: var(--depaw-radius);
	overflow: hidden;
	box-shadow: var(--depaw-sombra-alta);
	margin: 0;
}

.depaw-cierre-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1;
	display: block;
	border-radius: 0;
}

.depaw-distri-pqrs {
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 1.2rem 0 0 !important;
}

/* ---------- Adaptacion a pantallas pequenas ---------- */
@media (max-width: 980px) {
	.depaw-distri-hero-in,
	.depaw-cuenta-bloque,
	.depaw-cierre-distri {
		grid-template-columns: 1fr;
	}

	.depaw-distri-foto {
		justify-self: start;
	}

	.depaw-ganas {
		grid-template-columns: repeat(2, 1fr);
	}

	.depaw-ruta {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.depaw-ruta::before {
		display: none;
	}

	.depaw-cierre-foto {
		order: -1;
	}
}

@media (max-width: 600px) {
	.depaw-ganas {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
   DESPLEGABLES DEL MENU
   El icono y el sintoma de cada enlace los pone menu.php.
   =============================================================== */

/* ---------- Enlace con icono y sintoma ---------- */
.depaw-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	padding: .7rem .8rem;
	border-radius: var(--depaw-radius);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.depaw-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.depaw-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.depaw-menu-ico {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--morado);
}

.depaw-menu-ico svg {
	width: 18px;
	height: 18px;
}

.depaw-menu-txt {
	display: block;
	/* El menu hereda nowrap del bloque de navegacion y ahi el sintoma se
	   salia de su columna en vez de partirse en dos lineas. */
	white-space: normal;
	text-transform: none;
	letter-spacing: 0;
}

.depaw-menu-txt .wp-block-navigation-item__label {
	display: block;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.3;
}

.depaw-menu-desc {
	display: block;
	font-size: .86rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.35;
	margin-top: .1rem;
}

/* ---------- El panel ---------- */
.depaw-menu .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	box-shadow: var(--depaw-sombra-alta);
	padding: .5rem;
	margin-top: .55rem;
}

/* La flechita que apunta al elemento del menu */
.depaw-menu .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 26px;
	width: 12px;
	height: 12px;
	background: var(--wp--preset--color--base);
	border-left: 1px solid var(--wp--preset--color--border);
	border-top: 1px solid var(--wp--preset--color--border);
	transform: rotate(45deg);
}

/* Puente sobre el hueco que deja el margen. Sin el, al bajar el cursor del
   nombre del menu al panel se pasa por una franja donde no esta ni sobre uno
   ni sobre el otro, y el desplegable se cierra a media travesia. */
.depaw-menu .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	top: -.65rem;
	left: 0;
	right: 0;
	height: .65rem;
}

.depaw-menu .wp-block-navigation__submenu-container li {
	width: 100%;
}

/* ---------- Soluciones: panel ancho en dos columnas ---------- */
/* Ojo con el ancho: al abrirse, WordPress le pone width:auto con una regla
   mas fuerte que la nuestra, asi que el ancho se fija con min-width, que no
   toca. Y las columnas llevan un minimo: con minmax(0,...) se encogian a
   cero al abrir y los cuatro enlaces se apilaban unos sobre otros. */
.depaw-menu .depaw-submenu-ancho > .wp-block-navigation__submenu-container {
	width: min(848px, calc(100vw - 3rem)) !important;
	min-width: min(848px, calc(100vw - 3rem)) !important;
	display: grid !important;
	/* La tercera columna lleva 328px = 76 de separacion + 252 de tarjeta.
	   Si solo se pone el margen, se lo come del ancho de la tarjeta y esta
	   se desborda por la derecha. */
	grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 328px;
	gap: .4rem;
	padding: .6rem;
}

/* Los enlaces se estiran a la altura de su fila y el texto se centra: la
   tarjeta manda el alto del panel y no sobra hueco en ningun lado. */
.depaw-menu .depaw-submenu-ancho > .wp-block-navigation__submenu-container > li:not(.depaw-menu-aparte) > .wp-block-navigation-item__content {
	height: 100%;
	align-items: center;
}

.depaw-menu-aparte {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.depaw-menu-aparte > div {
	background: var(--wp--preset--color--surface);
	border-radius: var(--depaw-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .55rem;
	/* La columna mide 328px: la tarjeta ocupa 252 y se pega a la derecha,
	   dejando 76 de separacion con los enlaces. Sin height:100% para que
	   sea ella la que marque el alto del panel. */
	max-width: 252px;
	margin-left: auto;
	text-transform: none;
	letter-spacing: 0;
}

.depaw-menu-aparte span {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
}

.depaw-menu-aparte b {
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 600;
}

.depaw-menu-aparte p {
	margin: 0;
	font-size: .88rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.4;
}

.depaw-menu-aparte a {
	margin-top: .2rem;
	white-space: nowrap;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	text-align: center;
	border-radius: var(--depaw-radius);
	padding: .6rem .9rem;
	font-size: .9rem;
	font-weight: 600;
}

.depaw-menu-aparte a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}


/* ---------- Guias: panel sencillo ---------- */
.depaw-menu .depaw-submenu-simple > .wp-block-navigation__submenu-container {
	width: min(320px, calc(100vw - 3rem)) !important;
	min-width: min(320px, calc(100vw - 3rem)) !important;
}

.depaw-menu-pie {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: .4rem;
	padding: .7rem .8rem .3rem;
}

.depaw-menu-pie a {
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

.depaw-menu-pie a:hover {
	text-decoration: underline;
}

/* ---------- Tablet: el panel ancho pasa a una columna ---------- */
@media (max-width: 1099px) {
	.depaw-menu .depaw-submenu-ancho > .wp-block-navigation__submenu-container {
		width: min(360px, calc(100vw - 3rem))  !important;
		min-width: min(360px, calc(100vw - 3rem))  !important;
		grid-template-columns: 1fr;
	}

	.depaw-menu-aparte {
		grid-column: 1;
		grid-row: auto;
		margin-left: 0;
	}
}

/* ---------- Movil: el menu a pantalla completa ----------
   Aqui WordPress deja de flotar los desplegables y los apila. Se convierten
   en un acordeon con las mismas tarjetas, que es donde mas ayudan. */
@media (max-width: 599px) {
	/* El panel de escritorio manda tres columnas y una de ellas es fija de
	   244px. En el movil eso se sale de la pantalla, asi que aqui vuelve
	   todo a una sola columna. */
	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-submenu-ancho > .wp-block-navigation__submenu-container,
	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-submenu-simple > .wp-block-navigation__submenu-container {
		width: 100%;
		max-width: 100%;
		min-width: 0 !important;
		grid-template-columns: 1fr;
		border: 0;
		box-shadow: none;
		background: none;
		/* Aire entre el nombre de la seccion y sus tarjetas */
		padding: 1.15rem 0 1.35rem;
		margin: 0;
		display: grid;
		gap: .3rem;
	}

	/* Nada de la cabecera puede desbordar a lo ancho */
	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		max-width: 100%;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-menu-txt {
		min-width: 0;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-menu-desc {
		white-space: normal;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
		display: none;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		background: var(--wp--preset--color--surface);
		padding: .7rem;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-menu-ico {
		background: var(--wp--preset--color--base);
		width: 30px;
		height: 30px;
		flex-basis: 30px;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-menu-aparte {
		grid-column: 1;
		grid-row: auto;
		margin-left: 0;
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-menu-aparte > div {
		background: var(--wp--preset--color--lila-suave);
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .depaw-menu-pie {
		border-top: 0;
		padding: .3rem .7rem;
	}

	/* Al abrir el menu, el navegador pone el foco en el primer enlace y
	   dibuja su recuadro. Se deja, porque es lo que guia a quien navega con
	   teclado, pero redondeado para que no parezca un error de maqueta. */
	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--wp--preset--color--morado);
		outline-offset: 3px;
		border-radius: var(--depaw-radius);
	}

	.depaw-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
		outline: none;
	}
}

/* ===============================================================
   PANTALLA DE "LA TIENDA ABRE PRONTO"
   Plantilla coming-soon.html. Sustituye la de WooCommerce, que
   llegaba en ingles y sin nada de la marca.
   =============================================================== */

.depaw-pronto {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(2.4rem, 5vw, 4rem);
}

.depaw-pronto::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	right: -130px;
	top: -170px;
	z-index: 0;
}

.depaw-pronto > * {
	position: relative;
	z-index: 1;
}

.depaw-pronto-in {
	text-align: center;
}

.depaw-pronto .depaw-eyebrow {
	color: var(--wp--preset--color--morado);
	margin-bottom: .4rem;
}

.depaw-pronto-titulo {
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.12;
	margin: 0 0 .8rem;
}

.depaw-pronto-lede {
	font-size: 1.12rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 56ch;
	margin: 0 auto 1.6rem;
}

.depaw-pronto-nota {
	margin: 1rem 0 0;
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---------- Las tres salidas ----------
   La misma tarjeta la usan la pantalla de "abre pronto" y el 404: las dos
   son callejones sin salida y conviene que se lean igual. */
.depaw-pronto-rejilla,
.depaw-404-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}

.depaw-pronto-tarjeta,
.depaw-404-tarjeta {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.5rem;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	box-shadow: var(--depaw-sombra);
	transition: transform .18s ease, box-shadow .18s ease;
}

.depaw-pronto-tarjeta:hover,
.depaw-404-tarjeta:hover {
	transform: translateY(-3px);
	box-shadow: var(--depaw-sombra-alta);
	text-decoration: none;
	color: inherit;
}

.depaw-pronto-ico,
.depaw-404-ico {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-suave);
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--morado);
	margin-bottom: .2rem;
}

.depaw-pronto-ico svg,
.depaw-404-ico svg {
	width: 20px;
	height: 20px;
}

.depaw-pronto-tarjeta b,
.depaw-404-tarjeta b {
	font-size: 1.08rem;
	line-height: 1.3;
}

.depaw-pronto-tarjeta span:not(.depaw-pronto-ico),
.depaw-404-tarjeta span:not(.depaw-404-ico) {
	font-size: .96rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-pronto-tarjeta em,
.depaw-404-tarjeta em {
	font-style: normal;
	font-size: .92rem;
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	margin-top: auto;
	padding-top: .5rem;
}

@media (max-width: 900px) {
	.depaw-pronto-rejilla,
	.depaw-404-rejilla {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
   PAGINA DE ERROR 404
   Plantilla 404.html. La tarjeta de las tres salidas se comparte
   con la pantalla de "la tienda abre pronto", mas arriba.
   =============================================================== */

.depaw-404-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 78%);
	padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
}

.depaw-404-hero::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	right: -110px;
	top: -160px;
	z-index: 0;
}

.depaw-404-hero > * {
	position: relative;
	z-index: 1;
}

.depaw-404-hero-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 2rem;
	align-items: center;
	/* El hero termina justo donde empiezan las tarjetas: se ven asomando
	   por el borde de la pantalla, que es lo que invita a bajar. */
	margin-bottom: 1.5rem;
}

.depaw-404-hero h1 {
	font-size: clamp(1.8rem, 3.8vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 .8rem;
}

.depaw-404-lede {
	font-size: 1.08rem;
	color: var(--wp--preset--color--contrast-muted);
	max-width: 52ch;
	margin: 0 0 1.2rem;
}

/* ---------- El numero, con el arco de la marca encima ----------
   Va detras y en lila claro a proposito: es adorno, no informacion.
   Quien llega aqui necesita la salida, no el codigo de error. */
/* Las tarjetas del 404 van dentro del hero y con menos aire que en la
   pantalla de "abre pronto", para que quepan sin empujar el pliegue. */
.depaw-404-tarjeta {
	padding: 1.25rem;
}

.depaw-404-num {
	position: relative;
	display: grid;
	place-items: center;
	justify-self: center;
}

.depaw-404-num span {
	font-size: 8.5rem;
	line-height: .85;
	font-weight: 700;
	color: var(--wp--preset--color--lila-claro);
	opacity: .55;
	letter-spacing: -.04em;
}

.depaw-404-arco {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.depaw-404-arco i {
	display: block;
	height: 8px;
	border-radius: 99px;
}

.depaw-404-arco i:nth-child(1) {
	width: 118px;
	background: var(--wp--preset--color--lila-claro);
}

.depaw-404-arco i:nth-child(2) {
	width: 88px;
	background: var(--wp--preset--color--lila);
}

.depaw-404-arco i:nth-child(3) {
	width: 58px;
	background: var(--wp--preset--color--morado);
}

/* ---------- Buscador ----------
   Lo mas util que se puede poner en un 404: quien llega ya sabe que
   queria, solo se equivoco de puerta. */
.depaw-404-busca {
	max-width: 480px;
}

.depaw-404-busca .wp-block-search__inside-wrapper {
	gap: .6rem;
	border: 0;
}

.depaw-404-busca .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	background: var(--wp--preset--color--base);
	padding: .8rem 1rem;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: var(--depaw-sombra);
}

.depaw-404-busca .wp-block-search__button {
	border: 0;
	border-radius: var(--depaw-radius);
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	font-size: .95rem;
	font-weight: 600;
	padding: .8rem 1.4rem;
	margin: 0;
}

.depaw-404-busca .wp-block-search__button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------- Los cuatro sintomas ----------
   Los mismos del menu. Quien llega perdido casi siempre venia por uno
   de estos cuatro, y asi no tiene que decidir en abstracto. */
.depaw-404-sintomas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .8rem;
}

.depaw-404-sintoma {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}

.depaw-404-sintoma:hover {
	border-color: var(--wp--preset--color--lila);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}

.depaw-404-sintoma .depaw-404-ico {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	margin: 0;
}

.depaw-404-sintoma .depaw-404-ico svg {
	width: 18px;
	height: 18px;
}

.depaw-404-sintoma b {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 600;
}

.depaw-404-sintoma small {
	display: block;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
	line-height: 1.35;
}

@media (max-width: 900px) {
	.depaw-404-hero-in {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.6rem;
	}

	.depaw-404-num {
		justify-self: start;
	}

	.depaw-404-num span {
		font-size: 8rem;
	}

	.depaw-404-sintomas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.depaw-404-sintomas {
		grid-template-columns: minmax(0, 1fr);
	}

	.depaw-404-busca .wp-block-search__inside-wrapper {
		flex-direction: column;
	}

	.depaw-404-busca .wp-block-search__button {
		width: 100%;
	}
}

/* ---- Prueba social: reseñas de clientas ----
   Dos columnas, no tres: con citas de dos párrafos, tres dejaban el renglón
   en unos 45 caracteres, por debajo del rango cómodo de lectura. */

.depaw-resenas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 1.2rem;
	max-width: none;
}

.depaw-resena {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--lila);
	border-radius: var(--depaw-radius);
	padding: 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.depaw-resena p {
	margin: 0 0 .7rem;
}

.depaw-resena p:last-of-type {
	margin-bottom: 0;
}

.depaw-resena-pie {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: .7rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: .9rem;
}

.depaw-resena-firma {
	font-family: var(--wp--preset--font-family--manuscrita);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--morado);
}

.depaw-resena-producto {
	font-size: .84rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-resena-producto::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--lila-claro);
	margin-right: .45rem;
	vertical-align: middle;
}

.depaw-resenas-pie {
	margin-top: 1.6rem;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
}

@media (max-width: 820px) {
	.depaw-resenas {
		grid-template-columns: 1fr;
	}
}

/* ---- Antes y despues del fortalecimiento ----
   Cada par es una pieza: las dos fotos van unidas con un filete en medio,
   asi la comparacion se lee de un vistazo en vez de como cuatro fotos sueltas.
   Los pares se apilan porque las fotos originales miden unos 355px de ancho:
   estirarlas mas las emborrona. */

.depaw-ad {
	display: grid;
	gap: 1.8rem;
	max-width: 720px;
}

.depaw-ad-par {
	margin: 0;
}

.depaw-ad-par > figcaption {
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--morado);
	margin-bottom: .6rem;
}

.depaw-ad-fotos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--wp--preset--color--border);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	overflow: hidden;
}

.depaw-ad-foto {
	position: relative;
}

.depaw-ad-foto + .depaw-ad-foto {
	border-left: 1px solid var(--wp--preset--color--border);
}

.depaw-ad-foto img {
	width: 100%;
	height: auto;
	display: block;
}

.depaw-ad-foto span {
	position: absolute;
	top: .6rem;
	left: .6rem;
	background: rgba(255, 255, 255, .93);
	color: var(--wp--preset--color--contrast);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .25rem .6rem;
	border-radius: 99px;
}

.depaw-ad-pie {
	max-width: 720px;
	margin-top: 1.2rem;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* ---- Carrusel de reseñas, CSS puro ----
   Clases propias (depaw-resenas-*) porque .depaw-carrusel ya existe en el tema
   con otra implementacion y se usa en la portada.
   Sin JavaScript a proposito: Imunify360 sirve los .js como text/html y para
   una visitante nueva el carrusel no arrancaria.
   Las tarjetas llevan margin-right en vez de gap para que la pista mida
   exactamente el doble de un juego y translateX(-50%) cierre sin salto. */

.depaw-resenas-carrusel {
	container-type: inline-size;
	overflow: hidden;
	max-width: none;
	--depaw-res-gap: 1.2rem;
	--depaw-res-vis: 3;
}

.depaw-resenas-pista {
	display: flex;
	width: max-content;
	animation: depaw-resenas-pasa 36s ease-in-out infinite;
}

.depaw-resenas-pista > .depaw-resena {
	width: calc((100cqw - (var(--depaw-res-vis) - 1) * var(--depaw-res-gap)) / var(--depaw-res-vis));
	margin-right: var(--depaw-res-gap);
	flex: none;
}

.depaw-resenas-carrusel:hover .depaw-resenas-pista,
.depaw-resenas-carrusel:focus-within .depaw-resenas-pista {
	animation-play-state: paused;
}

@keyframes depaw-resenas-pasa {
	0%,      13.33% { transform: translateX(0); }
	16.67%,  30%    { transform: translateX(-8.3333%); }
	33.33%,  46.67% { transform: translateX(-16.6667%); }
	50%,     63.33% { transform: translateX(-25%); }
	66.67%,  80%    { transform: translateX(-33.3333%); }
	83.33%,  96.67% { transform: translateX(-41.6667%); }
	100%            { transform: translateX(-50%); }
}

@container (max-width: 900px) {
	.depaw-resenas-pista { --depaw-res-vis: 2; }
}

@container (max-width: 600px) {
	.depaw-resenas-pista { --depaw-res-vis: 1; }
}

/* Quien pide menos movimiento ve la rejilla de siempre, sin duplicados */
@media (prefers-reduced-motion: reduce) {
	.depaw-resenas-pista {
		animation: none;
		width: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 1fr;
		gap: var(--depaw-res-gap);
	}

	.depaw-resenas-pista > .depaw-resena {
		width: auto;
		margin-right: 0;
	}

	.depaw-resenas-pista > [aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   Paginas legales
   Terminos, privacidad, devoluciones, garantia, envios, cookies y PQRS.
   Son documentos largos que se leen de arriba abajo: la medida corta y el
   aire entre bloques importan mas que cualquier adorno.
   ========================================================================== */

.depaw-legal-hero {
	background: linear-gradient(160deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 100%);
	padding-block: clamp(2.2rem, 6vw, 3.6rem);
}

.depaw-legal-hero .depaw-migas {
	margin-bottom: .9rem;
}

.depaw-legal-hero h1 {
	margin: 0;
	font-size: clamp(1.9rem, 5vw, 2.7rem);
	line-height: 1.12;
	letter-spacing: -.02em;
}

.depaw-legal-lede {
	margin: .9rem 0 0;
	max-width: 46rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-legal-meta {
	margin-top: 1.2rem;
}

.depaw-legal-fecha {
	display: inline-block;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	font-size: .82rem;
	color: var(--wp--preset--color--contrast-muted);
}

/* --- Cuerpo del documento --- */

.depaw-legal {
	padding-block: clamp(2rem, 5vw, 3.2rem);
}

.depaw-legal > * {
	max-width: 42rem;
	margin-inline: auto;
}

.depaw-legal p,
.depaw-legal li {
	font-size: 1rem;
	line-height: 1.7;
}

.depaw-legal h2 {
	margin-top: 2.6rem;
	margin-bottom: .7rem;
	font-size: 1.35rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--morado);
}

.depaw-legal h2:first-child {
	margin-top: 0;
}

.depaw-legal h3 {
	margin-top: 1.8rem;
	margin-bottom: .5rem;
	font-size: 1.08rem;
	line-height: 1.3;
}

.depaw-legal ul,
.depaw-legal ol {
	padding-left: 1.2rem;
}

.depaw-legal li + li {
	margin-top: .35rem;
}

.depaw-legal li::marker {
	color: var(--wp--preset--color--lila);
}

.depaw-legal a {
	color: var(--wp--preset--color--morado);
	text-underline-offset: .18em;
}

/* --- Tablas: en movil pasan a tarjetas --- */

.depaw-legal .wp-block-table {
	margin-block: 1.4rem;
	max-width: 42rem;
}

.depaw-legal .wp-block-table table {
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	overflow: hidden;
	font-size: .95rem;
}

.depaw-legal .wp-block-table th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--morado);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.depaw-legal .wp-block-table td {
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}

.depaw-legal .wp-block-table tr:last-child td {
	border-bottom: 0;
}

/* --- Caja de aviso dentro del documento --- */

.depaw-legal .depaw-aviso {
	max-width: 42rem;
	margin-block: 1.6rem;
}

/* --- Pie con los otros documentos --- */

.depaw-legal-otros {
	max-width: 42rem;
	margin: 3rem auto 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.depaw-legal-otros p {
	margin: 0 0 .7rem;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-legal-otros ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.depaw-legal-otros li {
	margin: 0;
}

.depaw-legal-otros a {
	display: inline-block;
	padding: .4rem .85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: .9rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.depaw-legal-otros a:hover,
.depaw-legal-otros a:focus-visible {
	border-color: var(--wp--preset--color--lila);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--morado);
}

@media (max-width: 600px) {

	.depaw-legal .wp-block-table table {
		font-size: .9rem;
	}

	.depaw-legal .wp-block-table th,
	.depaw-legal .wp-block-table td {
		padding: .5rem .55rem;
	}
}

/* ==========================================================================
   Pagina de contacto
   ========================================================================== */

.depaw-contacto-hero {
	background: linear-gradient(160deg, var(--wp--preset--color--lila-suave) 0%, var(--wp--preset--color--base) 100%);
	padding-block: clamp(2.4rem, 6vw, 3.6rem);
}

.depaw-contacto-hero h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.depaw-contacto-lede {
	margin: .9rem 0 0;
	max-width: 38rem;
	font-size: 1.06rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-contacto-firma {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--manuscrita, "Caveat", cursive);
	font-size: 1.5rem;
	color: var(--wp--preset--color--morado);
}

/* --- Canales --- */

.depaw-canales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
	margin-top: 1.6rem;
}

.depaw-canal {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.3rem;
}

.depaw-canal-destacado {
	border-color: var(--wp--preset--color--lila);
	box-shadow: 0 0 0 3px var(--wp--preset--color--lila-suave);
}

.depaw-canal-ico {
	width: 42px;
	height: 42px;
	border-radius: var(--depaw-radius);
	background: var(--wp--preset--color--lila-suave);
	color: var(--wp--preset--color--morado);
	display: grid;
	place-items: center;
	margin-bottom: .8rem;
}

.depaw-canal-etq {
	display: inline-block;
	margin-bottom: .6rem;
	padding: .16rem .55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--morado);
	color: #fff;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.depaw-canal h3 {
	margin: 0 0 .25rem;
	font-size: 1.02rem;
}

.depaw-canal p {
	margin: 0;
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-canal-dato {
	display: inline-block;
	margin-top: .6rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--morado);
	text-decoration: none;
}

.depaw-canal-dato:hover,
.depaw-canal-dato:focus-visible {
	text-decoration: underline;
}

/* --- Atajos --- */

.depaw-contacto-atajos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .8rem;
	margin-top: 1.6rem;
}

.depaw-contacto-atajo {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1rem 1.1rem;
	text-decoration: none;
	color: inherit;
}

.depaw-contacto-atajo:hover,
.depaw-contacto-atajo:focus-visible {
	border-color: var(--wp--preset--color--lila);
}

.depaw-contacto-atajo b {
	display: block;
	font-size: .97rem;
	margin-bottom: .15rem;
}

.depaw-contacto-atajo span {
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-contacto-atajo-flecha {
	margin-left: auto;
	color: var(--wp--preset--color--lila);
	font-size: 1.2rem;
	line-height: 1;
}

/* --- Formulario --- */

.depaw-contacto-form {
	max-width: 42rem;
}

.depaw-contacto-dos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.depaw-campo {
	margin: 0 0 1rem;
}

.depaw-campo label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	margin-bottom: .3rem;
}

.depaw-campo-ayuda {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-campo input,
.depaw-campo select,
.depaw-campo textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	font-family: inherit;
	font-size: .95rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.depaw-campo input:focus-visible,
.depaw-campo select:focus-visible,
.depaw-campo textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 1px;
}

.depaw-campo textarea {
	min-height: 130px;
	resize: vertical;
}

/* El campo trampa: fuera de la vista, pero sin display none, que algunos
   robots detectan. */
.depaw-contacto-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.depaw-contacto-check {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
	margin: 1rem 0 1.2rem;
}

.depaw-contacto-check input {
	margin-top: .25rem;
	flex: 0 0 auto;
}

.depaw-contacto-boton {
	background: var(--wp--preset--color--morado);
	color: #fff;
	border: 0;
	padding: .85rem 1.8rem;
	border-radius: var(--depaw-radius);
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}

.depaw-contacto-boton:hover,
.depaw-contacto-boton:focus-visible {
	background: #5f2a8f;
}

.depaw-contacto-aviso {
	margin: 0 0 1.4rem;
	padding: .9rem 1.1rem;
	border-radius: var(--depaw-radius);
	border-left: 4px solid;
	font-size: .95rem;
}

.depaw-contacto-aviso-bien {
	background: var(--wp--preset--color--surface);
	border-left-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--contrast);
}

.depaw-contacto-aviso-mal {
	background: #fdf3f3;
	border-left-color: #b3261e;
	color: #7a1a15;
}

/* --- Caja lateral --- */

.depaw-aparte {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.3rem;
}

.depaw-aparte + .depaw-aparte {
	margin-top: 1rem;
}

.depaw-aparte h3 {
	margin: 0 0 .5rem;
	font-size: 1.02rem;
	color: var(--wp--preset--color--morado);
}

.depaw-aparte p {
	margin: 0 0 .8rem;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-aparte p:last-child {
	margin-bottom: 0;
}

/* --- Llamada a distribuidoras --- */

.depaw-distri-cta {
	background: var(--wp--preset--color--morado);
	color: #fff;
	border-radius: var(--depaw-radius);
	padding: 1.8rem;
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.depaw-distri-cta div {
	flex: 1 1 260px;
}

.depaw-distri-cta h3 {
	margin: 0 0 .35rem;
	font-size: 1.2rem;
	color: #fff;
}

.depaw-distri-cta p {
	margin: 0;
	font-size: .95rem;
	color: #e6d8f5;
}

.depaw-distri-cta a {
	background: #fff;
	color: var(--wp--preset--color--morado);
	text-decoration: none;
	padding: .75rem 1.4rem;
	border-radius: var(--depaw-radius);
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 820px) {

	.depaw-contacto-dos {
		grid-template-columns: 1fr;
	}
}

/* --- Arreglos de espaciado de la pagina de contacto --- */

/* La causa de que los campos se montaran uno sobre otro: el tema no
   aplica border-box a los controles de formulario, asi que el ancho
   del 100% se sumaba al relleno y al borde, y cada campo salia 29px
   mas ancho que su columna. */
.depaw-campo input,
.depaw-campo select,
.depaw-campo textarea {
	box-sizing: border-box;
	max-width: 100%;
}

.depaw-contacto-dos {
	gap: 0 1.25rem;
}

/* Aire entre el formulario y las cajas de al lado. */
#escribenos .wp-block-columns {
	gap: 3rem;
}

.depaw-aparte + .depaw-aparte {
	margin-top: 1.2rem;
}

@media (max-width: 820px) {

	#escribenos .wp-block-columns {
		gap: 2rem;
	}
}

/* ==========================================================================
   Campos obligatorios del pago
   WooCommerce marca los opcionales con "(opcional)" y deja los
   obligatorios sin senalar. Aqui se anade el asterisco a los obligatorios,
   que es lo que la gente espera ver.

   Se hace con CSS y no con JavaScript: el pago ya depende bastante de
   JavaScript, y el cortafuegos del servidor sirve mal los archivos
   estaticos a quien llega sin su cookie.
   ========================================================================== */

/* Los campos de texto traen el atributo required, asi que se detectan
   solos. El codigo postal, que es opcional, queda fuera sin hacer nada. */
.wc-block-components-text-input:has( input:required ) > label::after,
.wc-block-components-text-input:has( textarea:required ) > label::after,
.wc-block-components-textarea:has( textarea:required ) > label::after,

/* Los desplegables de pais y departamento no llevan el atributo, aunque
   sin ellos no se puede pagar. Se nombran uno a uno. */
label[for="shipping-country"]::after,
label[for="shipping-state"]::after,
label[for="billing-country"]::after,
label[for="billing-state"]::after {
	content: " *";
	color: var(--wp--preset--color--morado);
	font-weight: 700;
}

/* Cuando la etiqueta flota dentro del campo vacio, el asterisco la sigue
   y no molesta. Solo se asegura que no se corte. */
.wc-block-components-text-input > label {
	white-space: nowrap;
}

/* La leyenda que explica el asterisco. */
.depaw-obligatorios {
	margin: 0 0 1.2rem;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-obligatorios span {
	color: var(--wp--preset--color--morado);
	font-weight: 700;
}

/* ==========================================================================
   Boton de WhatsApp (Joinchat)
   La ficha de producto tiene una barra de compra fija abajo, y el boton
   flotante le caia encima justo sobre "Anadir al carrito". Cuando esa
   barra aparece, el boton sube.
   ========================================================================== */

body:has( .depaw-barra-compra.is-visible ) .joinchat {
	--bottom: 88px;
}

.joinchat {
	transition: bottom .22s ease;
}

/* ==========================================================================
   Comparador de tamanos de la ficha de producto

   Solo aparece en los tres tratamientos, que son los que se venden en
   120, 300 y 1.000 ml. Lo pinta depaw_bloque_tamanos() leyendo el
   catalogo, asi que aqui no hay ningun precio escrito a mano.
   ========================================================================== */

/* ⚠️ El bloque lo inyecta render_block, asi que sale sin las clases de layout
   que genera WordPress (is-layout-constrained y su wp-container-*). Por eso el
   alignwide del marcado no constrenia nada y las tarjetas se iban a todo el
   ancho de la ventana mientras su propio titular se quedaba en 1200, que es lo
   que Luisa vio. Se constrine aqui, sin depender de esas clases. */
.depaw-tamanos-seccion > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.depaw-tamanos {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.1rem;
	align-items: stretch;
}

.depaw-tamano {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.5rem 1.5rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	box-shadow: var(--depaw-sombra-baja);
	position: relative;
}

/* El frasco crece con la raiz cubica del volumen: la calcula el PHP y la
   escribe en el atributo style, porque depende de los tamanos que existan. */
/* La foto es la de la variante, que en WooCommerce ya existe para las tres.
   La altura la calcula el PHP con la raiz cubica del volumen y la escribe en
   el atributo style, asi el envase mas grande se ve mas grande de verdad. */
.depaw-tamano-arte {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.depaw-tamano-arte img {
	max-width: 100%;
	height: 100%;
	width: auto;
	/* contain y no cover: el litro es 800x1000 y las otras cuadradas, asi que
	   recortar deformaria unas respecto de otras. */
	object-fit: contain;
	display: block;
}

.depaw-tamano-ml {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.depaw-tamano-para {
	margin: .4rem 0 0;
	font-size: .95rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-tamano-precio {
	margin-top: .2rem;
	padding-top: .9rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.depaw-tamano-cop {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	display: block;
}

.depaw-tamano-ml-precio {
	display: block;
	margin-top: .35rem;
	font-size: .92rem;
	color: var(--wp--preset--color--morado);
	font-weight: 600;
}

.depaw-tamano-equivale {
	display: block;
	margin-top: .3rem;
	font-size: .85rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-tamano-cta {
	margin-top: auto;
	display: block;
	text-align: center;
	text-decoration: none;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: 1rem;
	padding: .75rem 1rem;
	border-radius: var(--depaw-radius);
	transition: background .18s ease, color .18s ease;
}

.depaw-tamano-cta:hover,
.depaw-tamano-cta:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* El tamano mas pequeno lleva el boton en secundario: es el de probar, no
   el que queremos empujar. */
.depaw-tamano.es-secundario .depaw-tamano-cta {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--morado);
	border: 1.5px solid var(--wp--preset--color--lila-claro);
}

.depaw-tamano.es-secundario .depaw-tamano-cta:hover,
.depaw-tamano.es-secundario .depaw-tamano-cta:focus-visible {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--morado);
}

/* ---- La barra: el argumento en una sola imagen ---- */

.depaw-rinde {
	margin-top: 1.8rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: 1.4rem 1.5rem;
}

.depaw-rinde h3 {
	margin: 0 0 .3rem;
	font-size: 1.05rem;
}

.depaw-rinde > p {
	margin: 0 0 1.1rem;
	font-size: .92rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-rinde-fila {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	align-items: center;
	gap: .9rem;
	margin-bottom: .6rem;
}

.depaw-rinde-fila:last-of-type {
	margin-bottom: 0;
}

.depaw-rinde-et {
	font-size: .9rem;
	font-weight: 600;
}

.depaw-rinde-pista {
	background: var(--wp--preset--color--surface);
	border-radius: 99px;
	height: 1.55rem;
	overflow: hidden;
}

.depaw-rinde-barra {
	height: 100%;
	border-radius: 99px;
	background: linear-gradient( 90deg, var(--wp--preset--color--lila-claro), var(--wp--preset--color--lila) );
}

.depaw-rinde-fila:last-of-type .depaw-rinde-barra {
	background: linear-gradient( 90deg, var(--wp--preset--color--lila), var(--wp--preset--color--morado) );
}

.depaw-rinde-val {
	font-size: .9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Especificidad: .depaw-rinde > p ganaba y dejaba el pie pegado a la ultima
   barra. Por eso el selector repite las dos clases. */
.depaw-rinde > p.depaw-rinde-pie {
	margin: 1.3rem 0 0;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-rinde-pie b {
	color: var(--wp--preset--color--contrast);
}

/* El precio lo escribe wc_price() y viene envuelto en su propio span. */
.depaw-tamano-cop .woocommerce-Price-amount,
.depaw-tamano-ml-precio .woocommerce-Price-amount,
.depaw-tamano-equivale .woocommerce-Price-amount,
.depaw-rinde-val .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

@media ( max-width: 860px ) {
	.depaw-tamanos {
		grid-template-columns: 1fr;
	}

	/* Apiladas en vertical ocupaban tres pantallas: en movil la tarjeta se
	   vuelve horizontal y el boton pasa a ocupar el ancho completo. */
	.depaw-tamano {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: .6rem 1.1rem;
		padding: 1.2rem;
	}

	.depaw-tamano-arte {
		height: auto;
		flex: 0 0 auto;
		align-self: center;
	}

	.depaw-tamano-cabeza {
		flex: 1 1 9rem;
		min-width: 0;
	}

	/* El precio va en su propia fila, no a la derecha del nombre: la linea de
	   comparacion ("Ocho frascos de 120 ml cuestan...") no cabe al lado y
	   estiraba la tarjeta a 526 px en una pantalla de 375. */
	.depaw-tamano-precio {
		flex: 1 1 100%;
		margin: 0;
		min-width: 0;
	}

	.depaw-tamano-cta {
		flex: 1 1 100%;
		margin-top: .4rem;
	}

	.depaw-rinde-fila {
		grid-template-columns: 4.6rem 1fr;
		row-gap: .2rem;
	}

	.depaw-rinde-val {
		grid-column: 2;
		justify-self: end;
		font-size: .82rem;
	}
}

/* ==========================================================================
   Formulario de la pagina de distribuidoras

   Sustituye al boton de WhatsApp que cerraba la pagina. Reutiliza
   .depaw-campo del formulario de contacto, que ya trae el box-sizing
   que hizo falta cuando los campos quedaban pegados.
   ========================================================================== */

.depaw-distri-form {
	/* El tema no pone border-box de forma global, asi que sin esto el relleno
	   se suma al max-width y la caja acaba midiendo 832 en vez de 760. */
	box-sizing: border-box;
	max-width: 760px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--depaw-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	box-shadow: var(--depaw-sombra-baja);
}

.depaw-distri-intro {
	margin: 0 0 1.6rem;
	font-size: .98rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-distri-intro b {
	color: var(--wp--preset--color--contrast);
}

.depaw-distri-dos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.1rem;
}

/* El asterisco sale del propio required: si manana cambia que es
   obligatorio, no hay que acordarse de tocarlo aparte. */
.depaw-distri-form .depaw-campo:has( input:required ) > label::after,
.depaw-distri-form .depaw-campo:has( textarea:required ) > label::after,
.depaw-grupo:has( input:required ) > .depaw-grupo-titulo::after {
	content: " *";
	color: var(--wp--preset--color--morado);
	font-weight: 700;
}

/* ---- Grupos de opciones ---- */

.depaw-grupo {
	border: 0;
	padding: 0;
	margin: 0 0 1.4rem;
}

.depaw-grupo-titulo {
	display: block;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .15rem;
	padding: 0;
}

.depaw-grupo-ayuda {
	display: block;
	font-size: .88rem;
	color: var(--wp--preset--color--contrast-muted);
	margin-bottom: .6rem;
}

.depaw-radios {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.depaw-radios.es-lista {
	flex-direction: column;
	gap: .5rem;
}

.depaw-opcion {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--lila-claro);
	border-radius: var(--depaw-radius);
	padding: .65rem .9rem;
	background: var(--wp--preset--color--base);
	transition: border-color .16s ease, background .16s ease;
}

.depaw-radios:not( .es-lista ) .depaw-opcion {
	flex: 0 0 auto;
	min-width: 5.5rem;
	justify-content: center;
	align-items: center;
}

.depaw-opcion:hover {
	border-color: var(--wp--preset--color--lila);
}

.depaw-opcion input {
	margin: 0;
	accent-color: var(--wp--preset--color--morado);
	flex: 0 0 auto;
}

.depaw-radios.es-lista .depaw-opcion input {
	margin-top: .28rem;
}

.depaw-opcion span {
	font-size: .97rem;
	line-height: 1.45;
}

.depaw-opcion:has( input:checked ) {
	border-color: var(--wp--preset--color--morado);
	background: var(--wp--preset--color--surface);
}

.depaw-opcion:has( input:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 1px;
}

/* "Otra situacion" revela su campo con :has(). Donde no se soporte, el campo
   se queda visible: sigue funcionando, solo ocupa sitio. Cero JavaScript,
   que en este servidor es requisito y no preferencia. */
.depaw-otro {
	margin: .6rem 0 0 1.9rem;
	max-width: 22rem;
}

@supports selector( :has( * ) ) {
	.depaw-grupo:not( :has( .depaw-otro-radio:checked ) ) .depaw-otro {
		display: none;
	}
}

.depaw-distri-check {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	margin: .4rem 0 1.4rem;
	font-size: .93rem;
	color: var(--wp--preset--color--contrast-muted);
}

.depaw-distri-check input {
	margin-top: .3rem;
	accent-color: var(--wp--preset--color--morado);
	flex: 0 0 auto;
}

.depaw-distri-check a {
	color: var(--wp--preset--color--morado);
}

.depaw-distri-boton {
	width: 100%;
	font: inherit;
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--depaw-radius);
	padding: .85rem 1.4rem;
	transition: background .18s ease;
}

.depaw-distri-boton:hover,
.depaw-distri-boton:focus-visible {
	background: var(--wp--preset--color--contrast);
}

.depaw-distri-pie {
	margin: .9rem 0 0;
	font-size: .86rem;
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
}

.depaw-distri-aviso {
	border-radius: var(--depaw-radius);
	padding: .85rem 1.1rem;
	margin: 0 0 1.4rem;
	font-size: .95rem;
}

.depaw-distri-aviso-bien {
	background: #eaf7ee;
	border: 1px solid #bfe3c9;
	color: #1d5b2e;
}

.depaw-distri-aviso-mal {
	background: #fdeceb;
	border: 1px solid #f4c3bf;
	color: #8a2318;
}

@media ( max-width: 720px ) {
	.depaw-distri-dos {
		grid-template-columns: 1fr;
	}

	.depaw-radios:not( .es-lista ) .depaw-opcion {
		flex: 1 1 0;
		min-width: 0;
	}
}