/* =========================================================================
   Pawmily — Cabecera, pie y bloques de página
   ========================================================================= */

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

.pw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--pw-bg) 92%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--pw-base) var(--pw-ease),
	            box-shadow var(--pw-base) var(--pw-ease);
}
.pw-header.pw-is-stuck {
	border-bottom-color: var(--pw-line);
	box-shadow: var(--pw-shadow-sm);
}

.pw-header__bar {
	display: flex;
	align-items: center;
	gap: var(--pw-3);
	height: var(--pw-header-h);
}

.pw-logo {
	display: flex;
	align-items: center;
	color: var(--pw-brand);   /* El SVG usa currentColor. */
	text-decoration: none;
	flex: none;
	transition: color var(--pw-fast) var(--pw-ease);
}
.pw-logo:hover { color: var(--pw-ink-brand); }
.pw-logo svg { height: 30px; width: auto; }
@media (min-width: 900px) { .pw-logo svg { height: 38px; } }

/* Navegación de escritorio */
.pw-nav { display: none; }

@media (min-width: 900px) {
	.pw-nav { display: block; margin-inline: auto; }
	.pw-nav ul {
		display: flex;
		align-items: center;
		gap: var(--pw-1);
		margin: 0; padding: 0;
		list-style: none;
	}
	.pw-nav li { margin: 0; }
	.pw-nav a {
		display: block;
		padding: var(--pw-2) var(--pw-4);
		border-radius: var(--pw-r-full);
		font-family: var(--pw-font-display);
		font-size: var(--pw-text-base);
		font-weight: 500;
		color: var(--pw-ink);
		text-decoration: none;
		transition: background-color var(--pw-fast) var(--pw-ease),
		            color var(--pw-fast) var(--pw-ease);
	}
	.pw-nav a:hover { background: var(--pw-surface); color: var(--pw-ink-deep); }
	.pw-nav .current-menu-item > a,
	.pw-nav .current_page_item > a,
	.pw-nav [aria-current="page"] {
		background: var(--pw-surface);
		color: var(--pw-ink-deep);
		font-weight: 600;
	}
}

.pw-header__actions { display: flex; align-items: center; gap: var(--pw-1); margin-left: auto; }

@media (min-width: 900px) { .pw-header__actions { margin-left: 0; } }

/* Buscador de escritorio */
.pw-search { display: none; }
@media (min-width: 1100px) {
	.pw-search { display: block; position: relative; width: 220px; }
	.pw-search input {
		min-height: 44px;
		padding: var(--pw-2) var(--pw-4) var(--pw-2) var(--pw-10);
		border-radius: var(--pw-r-full);
		font-size: var(--pw-text-sm);
	}
	.pw-search svg {
		position: absolute;
		left: var(--pw-4); top: 50%;
		transform: translateY(-50%);
		width: 18px; height: 18px;
		color: var(--pw-ink-soft);
		pointer-events: none;
	}
}

/* Menú móvil */
.pw-burger { display: inline-flex; }
@media (min-width: 900px) { .pw-burger { display: none; } }

.pw-drawer {
	position: fixed;
	inset: var(--pw-header-h) 0 0 0;
	z-index: 99;
	background: var(--pw-bg);
	padding: var(--pw-6) var(--pw-gutter) var(--pw-12);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--pw-base) var(--pw-ease),
	            visibility var(--pw-base);
}
.pw-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
@media (min-width: 900px) { .pw-drawer { display: none; } }

.pw-drawer ul { list-style: none; margin: 0 0 var(--pw-6); padding: 0; }
.pw-drawer li { margin: 0; border-bottom: 1px solid var(--pw-line); }
.pw-drawer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--pw-4) 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-xl);
	font-weight: 600;
	color: var(--pw-ink-deep);
	text-decoration: none;
}
.pw-drawer a:hover { color: var(--pw-ink-brand); }

.pw-drawer__search { margin-bottom: var(--pw-6); }

body.pw-no-scroll { overflow: hidden; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.pw-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--pw-10);
}

/* El hero ya cierra con su propio aire: la primera sección no repite el suyo. */
.pw-hero + .pw-section { padding-top: var(--pw-8); }

@media (min-width: 900px) {
	.pw-hero { padding-block: var(--pw-16); }
	.pw-hero + .pw-section { padding-top: var(--pw-12); }
}

.pw-hero__grid {
	display: grid;
	gap: var(--pw-8);
	align-items: center;
}
@media (min-width: 900px) {
	.pw-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--pw-12); }
}

.pw-hero__title {
	font-size: var(--pw-text-4xl);
	margin-bottom: var(--pw-5);
}

/* El acento va en el marrón legible, no en el de marca. */
.pw-hero__accent { color: var(--pw-ink-brand); }

.pw-hero__lead {
	font-size: var(--pw-text-lg);
	color: var(--pw-ink);
	max-width: 46ch;
	margin-bottom: var(--pw-8);
}

.pw-hero__cta { display: flex; flex-wrap: wrap; gap: var(--pw-3); }

.pw-hero__art {
	position: relative;
	border-radius: var(--pw-r-xl);
	overflow: hidden;
	background: var(--pw-surface);
}
.pw-hero__art svg, .pw-hero__art img { width: 100%; height: auto; display: block; }

/* Nota de ahorro flotante sobre la ilustración. */
.pw-hero__tag {
	position: absolute;
	bottom: var(--pw-5); left: var(--pw-5);
	display: flex;
	align-items: center;
	gap: var(--pw-3);
	padding: var(--pw-3) var(--pw-5);
	background: var(--pw-surface);
	border-radius: var(--pw-r-full);
	box-shadow: var(--pw-shadow-lg);
	font-family: var(--pw-font-display);
	font-weight: 600;
	color: var(--pw-ink-deep);
	font-size: var(--pw-text-sm);
}
.pw-hero__tag svg { width: 22px; height: 22px; color: var(--pw-ink-brand); }

/* -------------------------------------------------------------------------
   Cabecera de sección
   ------------------------------------------------------------------------- */

.pw-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pw-4);
	margin-bottom: var(--pw-8);
	flex-wrap: wrap;
}
.pw-sechead h2 { margin: 0; }
.pw-sechead p { margin: var(--pw-2) 0 0; color: var(--pw-ink-soft); max-width: 52ch; }
.pw-sechead__link {
	font-family: var(--pw-font-display);
	font-weight: 600;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--pw-2);
	text-decoration: none;
}
.pw-sechead__link svg { width: 18px; height: 18px; transition: transform var(--pw-fast) var(--pw-ease); }
.pw-sechead__link:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Categorías destacadas — dos puertas grandes, no tarjetas iguales
   ------------------------------------------------------------------------- */

.pw-doors { display: grid; gap: var(--pw-4); }
@media (min-width: 760px) { .pw-doors { grid-template-columns: 1fr 1fr; gap: var(--pw-6); } }

.pw-door {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
	padding: var(--pw-6);
	border-radius: var(--pw-r-xl);
	overflow: hidden;
	text-decoration: none;
	background: var(--pw-surface);
	transition: transform var(--pw-base) var(--pw-ease),
	            box-shadow var(--pw-base) var(--pw-ease);
}
@media (min-width: 760px) { .pw-door { min-height: 340px; padding: var(--pw-8); } }

.pw-door:hover { transform: translateY(-4px); box-shadow: var(--pw-shadow-lg); }

.pw-door__art {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.pw-door__art svg { width: 100%; height: 100%; object-fit: cover; }

/* Velo cálido para que el texto se lea siempre sobre la ilustración. */
.pw-door::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(74, 49, 33, 0.82) 0%,
		rgba(74, 49, 33, 0.45) 38%,
		rgba(74, 49, 33, 0) 68%);
}

.pw-door__text { position: relative; z-index: 2; }
.pw-door__title {
	display: block;
	margin: 0 0 var(--pw-1);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xl);
	font-weight: 600;
	line-height: var(--pw-leading-tight);
	color: var(--pw-surface);
}
.pw-door__meta {
	display: flex;
	align-items: center;
	gap: var(--pw-2);
	margin: 0;
	color: color-mix(in srgb, var(--pw-surface) 88%, transparent);
	font-size: var(--pw-text-sm);
}
.pw-door__meta svg { width: 16px; height: 16px; transition: transform var(--pw-fast) var(--pw-ease); }
.pw-door:hover .pw-door__meta svg { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Banda de confianza — franja continua, no tres tarjetas sueltas
   ------------------------------------------------------------------------- */

.pw-trust {
	background: var(--pw-surface);
	border-block: 1px solid var(--pw-line);
}
.pw-trust__row {
	display: grid;
	gap: var(--pw-6);
	padding-block: var(--pw-8);
}
@media (min-width: 760px) {
	.pw-trust__row { grid-template-columns: repeat(3, 1fr); gap: var(--pw-8); }
}

.pw-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--pw-4);
}
.pw-trust__item svg { width: 30px; height: 30px; color: var(--pw-ink-brand); flex: none; }
.pw-trust__item h3 {
	margin: 0 0 var(--pw-1);
	font-size: var(--pw-text-base);
	font-weight: 600;
}
.pw-trust__item p { margin: 0; font-size: var(--pw-text-sm); color: var(--pw-ink-soft); }

/* Separadores solo entre columnas en escritorio. */
@media (min-width: 760px) {
	.pw-trust__item + .pw-trust__item {
		border-left: 1px solid var(--pw-line);
		padding-left: var(--pw-8);
	}
}

/* -------------------------------------------------------------------------
   Banda de marca — aquí sí vive #C58B58, sin texto encima
   ------------------------------------------------------------------------- */

.pw-brandband {
	position: relative;
	background: var(--pw-ink-deep);
	color: var(--pw-surface);
	border-radius: var(--pw-r-xl);
	padding: var(--pw-10) var(--pw-6);
	overflow: hidden;
	text-align: center;
}
@media (min-width: 760px) { .pw-brandband { padding: var(--pw-16) var(--pw-12); } }

.pw-brandband h2 { color: var(--pw-surface); margin-bottom: var(--pw-4); }
.pw-brandband p {
	color: color-mix(in srgb, var(--pw-surface) 85%, transparent);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--pw-8);
}

/* Huellas decorativas: el motivo del logo llevado al fondo. */
.pw-brandband__paws {
	position: absolute;
	inset: 0;
	z-index: 0;
	color: var(--pw-brand);
	opacity: 0.16;
	pointer-events: none;
}
.pw-brandband > *:not(.pw-brandband__paws) { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Pie
   ------------------------------------------------------------------------- */

.pw-footer {
	background: var(--pw-ink-deep);
	color: color-mix(in srgb, var(--pw-surface) 82%, transparent);
	padding-block: var(--pw-12) var(--pw-6);
	margin-top: var(--pw-section);
}

.pw-footer__grid {
	display: grid;
	gap: var(--pw-8);
	padding-bottom: var(--pw-10);
	border-bottom: 1px solid rgba(255, 248, 237, 0.14);
}
@media (min-width: 700px)  { .pw-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pw-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--pw-10); } }

.pw-footer h3 {
	margin: 0 0 var(--pw-4);
	font-size: var(--pw-text-base);
	color: var(--pw-surface);
	letter-spacing: 0.01em;
}
.pw-footer ul { list-style: none; margin: 0; padding: 0; }
.pw-footer li { margin-bottom: var(--pw-2); }
.pw-footer a {
	color: color-mix(in srgb, var(--pw-surface) 82%, transparent);
	text-decoration: none;
	font-size: var(--pw-text-sm);
	transition: color var(--pw-fast) var(--pw-ease);
}
.pw-footer a:hover { color: var(--pw-surface); text-decoration: underline; }

.pw-footer__logo { color: var(--pw-brand); display: block; margin-bottom: var(--pw-4); }
.pw-footer__logo svg { height: 34px; width: auto; }
.pw-footer__about { font-size: var(--pw-text-sm); max-width: 34ch; }

.pw-social { display: flex; gap: var(--pw-2); margin-top: var(--pw-5); }
.pw-social a {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	background: rgba(255, 248, 237, 0.1);
	border-radius: var(--pw-r-full);
	color: var(--pw-surface);
	transition: background-color var(--pw-fast) var(--pw-ease);
}
.pw-social a:hover { background: var(--pw-brand); }
.pw-social svg { width: 19px; height: 19px; }

/* Newsletter */
.pw-newsletter p { font-size: var(--pw-text-sm); margin-bottom: var(--pw-4); }
.pw-newsletter form { display: flex; flex-direction: column; gap: var(--pw-3); }
.pw-newsletter input {
	background: rgba(255, 248, 237, 0.08);
	border-color: rgba(255, 248, 237, 0.24);
	color: var(--pw-surface);
}
.pw-newsletter input::placeholder { color: rgba(255, 248, 237, 0.6); }
.pw-newsletter input:focus {
	border-color: var(--pw-brand);
	box-shadow: 0 0 0 3px rgba(197, 139, 88, 0.3);
}

/* Métodos de pago */
.pw-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pw-2); margin-top: var(--pw-4); }
.pw-pay span {
	padding: var(--pw-1) var(--pw-3);
	background: rgba(255, 248, 237, 0.1);
	border-radius: var(--pw-r-sm);
	font-size: var(--pw-text-xs);
	font-weight: 600;
	color: var(--pw-surface);
}

.pw-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pw-4);
	padding-top: var(--pw-6);
	font-size: var(--pw-text-xs);
}
.pw-footer__legal { display: flex; flex-wrap: wrap; gap: var(--pw-4); }

/* -------------------------------------------------------------------------
   Cabecera de página interior
   ------------------------------------------------------------------------- */

.pw-pagehead {
	background: var(--pw-surface);
	border-bottom: 1px solid var(--pw-line);
	padding-block: var(--pw-8) var(--pw-10);
}
.pw-pagehead h1 { margin: 0 0 var(--pw-3); }
.pw-pagehead p { margin: 0; color: var(--pw-ink-soft); max-width: 58ch; font-size: var(--pw-text-lg); }

/* Cabecera de categoría con ilustración */
.pw-cathead {
	position: relative;
	border-radius: var(--pw-r-xl);
	overflow: hidden;
	margin-top: var(--pw-6);
	padding: var(--pw-8) var(--pw-6);
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--pw-surface);
}
@media (min-width: 760px) { .pw-cathead { padding: var(--pw-12); min-height: 250px; } }

.pw-cathead__art { position: absolute; inset: 0; z-index: 0; }
.pw-cathead__art svg { width: 100%; height: 100%; object-fit: cover; }
.pw-cathead::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right,
		rgba(74, 49, 33, 0.86) 0%,
		rgba(74, 49, 33, 0.62) 46%,
		rgba(74, 49, 33, 0.14) 100%);
}
.pw-cathead__text { position: relative; z-index: 2; max-width: 40ch; }
.pw-cathead__text h1 { color: var(--pw-surface); margin-bottom: var(--pw-2); }
.pw-cathead__text p { color: color-mix(in srgb, var(--pw-surface) 88%, transparent); margin: 0; }