/* =========================================================================
   Pawmily — Base
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pw-header-h) + var(--pw-4));
}

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

body {
	margin: 0;
	background: var(--pw-bg);
	color: var(--pw-ink);
	font-family: var(--pw-font-body);
	font-size: var(--pw-text-base);
	line-height: var(--pw-leading-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   Superficies del navegador

   Selección, cursor, barras de desplazamiento y anillos de foco vienen con
   colores que no pertenecen a ningún sistema de diseño. Tematizarlos es lo
   que separa una página construida de una ensamblada.
   ------------------------------------------------------------------------- */

::selection {
	background: var(--pw-brand);
	color: #fff;
}

html { scrollbar-color: var(--pw-line-strong) var(--pw-bg); scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--pw-bg); }
::-webkit-scrollbar-thumb {
	background: var(--pw-line-strong);
	border: 3px solid var(--pw-bg);
	border-radius: var(--pw-r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--pw-brand); }

/* El caret hereda color: se fija aquí para los inputs. */
input, textarea, select { caret-color: var(--pw-ink-brand); }

/* Un solo anillo de foco en todo el sitio, visible sobre cualquier fondo. */
:focus-visible {
	outline: 3px solid var(--pw-focus);
	outline-offset: 2px;
	border-radius: var(--pw-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* -------------------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pw-font-display);
	font-weight: 600;
	color: var(--pw-ink-deep);
	line-height: var(--pw-leading-tight);
	letter-spacing: -0.015em;
	text-wrap: balance;
	/* Más aire encima que debajo: el título pertenece a lo que sigue. */
	margin: 0 0 var(--pw-4);
}

h1 { font-size: var(--pw-text-4xl); font-weight: 700; }
h2 { font-size: var(--pw-text-3xl); }
h3 { font-size: var(--pw-text-2xl); }
h4 { font-size: var(--pw-text-xl); }
h5, h6 { font-size: var(--pw-text-lg); }

p { margin: 0 0 var(--pw-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--pw-ink-brand);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--pw-brand) 55%, transparent);
	transition: color var(--pw-fast) var(--pw-ease),
	            text-decoration-color var(--pw-fast) var(--pw-ease);
}
a:hover { color: var(--pw-ink-deep); text-decoration-color: currentColor; }

strong, b { font-weight: 700; color: var(--pw-ink-deep); }
small { font-size: var(--pw-text-sm); }

/* Cifras alineadas: los precios de una columna deben cuadrar. */
.pw-num, .price, .amount, .woocommerce-Price-amount, td.product-total, td.product-subtotal {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

ul, ol { margin: 0 0 var(--pw-4); padding-left: var(--pw-5); }
li { margin-bottom: var(--pw-2); }
li::marker { color: var(--pw-brand); }

blockquote {
	margin: var(--pw-6) 0;
	padding: var(--pw-5) var(--pw-6);
	background: var(--pw-surface);
	border-radius: var(--pw-r-md);
	font-size: var(--pw-text-lg);
}

hr {
	border: 0;
	height: 1px;
	background: var(--pw-line);
	margin: var(--pw-10) 0;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; width: 100%; }

code, kbd, pre {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
	font-size: 0.9em;
}

/* -------------------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------------------- */

.pw-container {
	width: 100%;
	max-width: var(--pw-max);
	margin-inline: auto;
	padding-inline: var(--pw-gutter);
}

.pw-container--narrow { max-width: 820px; }

.pw-section { padding-block: var(--pw-section); }

.pw-prose { max-width: var(--pw-max-text); }
.pw-prose h2 { margin-top: var(--pw-10); }
.pw-prose h3 { margin-top: var(--pw-8); }
.pw-prose > :first-child { margin-top: 0; }

/* Accesible para lectores de pantalla, invisible en pantalla. */
.screen-reader-text,
.pw-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Salto al contenido: aparece solo con teclado. */
.pw-skip-link {
	position: absolute;
	top: -100px;
	left: var(--pw-4);
	z-index: 999;
	padding: var(--pw-3) var(--pw-5);
	background: var(--pw-ink-deep);
	color: var(--pw-surface);
	border-radius: var(--pw-r);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--pw-fast) var(--pw-ease);
}
.pw-skip-link:focus { top: var(--pw-4); color: var(--pw-surface); }

/* Marca el contenido de ejemplo pendiente de reemplazo. */
.pw-demo-flag {
	display: inline-block;
	font-size: var(--pw-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pw-ink-soft);
	background: var(--pw-line);
	padding: 2px var(--pw-2);
	border-radius: var(--pw-r-sm);
}