/* ==========================================================================
   Pluffi · scrapbooking cozy
   Paleta: crema · caramelo · café · café oscuro · arena · oliva · pizarra
   + rosa y salvia del moodboard.
   ========================================================================== */

:root {
	--crema: #ebded5;
	--papel: #f6eee7;
	--hoja: #fffbf6;
	--caramelo: #ae8a5c;
	--cafe: #6a4f36;
	--cafe-osc: #4a3422;
	--cafe-prof: #2f2014;
	--arena: #9f9a88;
	--oliva: #716d55;
	--pizarra: #5f5d54;
	--rosa: #d9aea6;
	--rosa-claro: #ecd3cc;
	--rosa-osc: #b98078;
	--salvia: #7b8a86;

	--f-title: 'Lily Script One', 'Brush Script MT', cursive;
	--f-sub: 'Courier New', 'Courier Prime', Courier, monospace;
	--f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-hand: 'Caveat', 'Segoe Script', cursive;

	--ease-out: cubic-bezier(.2, .8, .2, 1);
	--ease-pop: cubic-bezier(.34, 1.56, .64, 1);

	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .2 0 0 0 0 .13 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='11' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.4'%3E%3CfeDistantLight azimuth='45' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
	--fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .07 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body.pf {
	margin: 0;
	background-color: var(--crema);
	background-image:
		radial-gradient(1200px 600px at 8% -10%, rgba(255, 255, 255, .55), transparent 60%),
		radial-gradient(900px 500px at 100% 30%, rgba(217, 174, 166, .18), transparent 60%);
	color: var(--cafe-osc);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Grano de papel sobre todo el sitio */
body.pf::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	background-image: var(--grain);
	opacity: .17;
	mix-blend-mode: multiply;
}

::selection { background: var(--rosa); color: var(--cafe-prof); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }

.pf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Selector de idioma */
.pf-lang { position: fixed; top: 56px; right: 16px; z-index: 97; display: flex; gap: 2px; padding: 4px; background: rgba(255, 251, 246, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px dashed rgba(174, 138, 92, .8); border-radius: 999px; box-shadow: 0 8px 18px rgba(47, 32, 20, .22); }
.pf-lang__opt { display: inline-grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-family: var(--f-sub); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-decoration: none; color: var(--cafe-osc); transition: background .25s, color .25s, transform .3s var(--ease-pop); }
.pf-lang__opt:hover { background: rgba(217, 174, 166, .45); transform: translateY(-2px); }
.pf-lang__opt.is-on { background: var(--cafe-osc); color: var(--crema); }
.pf-lang__opt.is-on:hover { background: var(--cafe-osc); transform: none; }

.pf-skip {
	position: fixed; left: 12px; top: -60px; z-index: 200;
	background: var(--cafe-osc); color: var(--crema);
	padding: 10px 16px; border-radius: 8px; text-decoration: none;
	transition: top .2s;
}
.pf-skip:focus { top: 12px; }

:focus-visible { outline: 3px dashed var(--caramelo); outline-offset: 4px; border-radius: 6px; }

.pf-wrap { width: min(1180px, 100% - 48px); margin-inline: auto; position: relative; }

/* ---------- Íconos y decoración ---------- */
.ico { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.pf-deco { position: absolute; display: block; pointer-events: none; overflow: visible; }

.pf-sticker {
	filter:
		drop-shadow(2.5px 0 0 #fffbf6) drop-shadow(-2.5px 0 0 #fffbf6)
		drop-shadow(0 2.5px 0 #fffbf6) drop-shadow(0 -2.5px 0 #fffbf6)
		drop-shadow(0 6px 7px rgba(74, 52, 34, .3));
	animation: pf-float 7s ease-in-out infinite alternate;
}
@keyframes pf-float {
	from { transform: translateY(0) rotate(var(--r, 0deg)); }
	to   { transform: translateY(-9px) rotate(calc(var(--r, 0deg) + 4deg)); }
}

.pf-sparkle { animation: pf-twinkle 3.2s ease-in-out infinite alternate; }
@keyframes pf-twinkle {
	from { transform: scale(.55) rotate(0deg); opacity: .45; }
	to   { transform: scale(1.1) rotate(25deg); opacity: 1; }
}

/* ---------- Washi tape ---------- */
.pf-tape {
	position: absolute; z-index: 6;
	width: 118px; height: 32px;
	background-color: var(--rosa);
	opacity: .93;
	clip-path: polygon(0 0, 3% 12%, 0 25%, 3% 38%, 0 50%, 3% 62%, 0 75%, 3% 88%, 0 100%, 100% 100%, 97% 88%, 100% 75%, 97% 62%, 100% 50%, 97% 38%, 100% 25%, 97% 12%, 100% 0);
	transform-origin: left center;
	pointer-events: none;
}
.pf-tape--pink  { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 6px, transparent 6px 13px); }
.pf-tape--stripe { background-color: #e6cfa9; background-image: repeating-linear-gradient(90deg, var(--caramelo) 0 9px, transparent 9px 18px); }
.pf-tape--olive { background-color: var(--oliva); background-image: radial-gradient(circle, rgba(235, 222, 213, .6) 2.2px, transparent 2.8px); background-size: 13px 13px; }
.pf-tape--cream { background-color: var(--crema); background-image: repeating-linear-gradient(90deg, rgba(174, 138, 92, .55) 0 2px, transparent 2px 10px); }
.pf-tape--top { top: -15px; left: 50%; margin-left: -59px; rotate: -3deg; }
.pf-tape--tl { top: -14px; left: -26px; rotate: -32deg; }
.pf-tape--br { bottom: -12px; right: -28px; rotate: -28deg; }

.pf-js .pf-tape { scale: 0 1; transition: scale .7s .45s cubic-bezier(.3, .9, .3, 1); }
.pf-js .is-in .pf-tape, .pf-js .pf-tape.is-in { scale: 1 1; }

/* ---------- Reveal ---------- */
.pf-js .pf-reveal {
	opacity: 0;
	translate: 0 30px;
	transition: opacity .8s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-pop), rotate .9s var(--ease-pop);
	transition-delay: calc(var(--d, 0) * 110ms);
}
.pf-js .pf-reveal[data-reveal='paste'] { translate: 0 -26px; scale: 1.09; rotate: -3deg; }
.pf-js .pf-reveal[data-reveal='pop']   { translate: 0 14px; scale: .55; }
.pf-js .pf-reveal[data-reveal='drop']  { translate: 0 -44px; }
.pf-js .pf-reveal.is-in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }

/* ---------- Tipografía de sección ---------- */
.pf-kicker {
	font-family: var(--f-sub);
	font-size: 14px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--cafe);
	display: inline-flex; align-items: center; gap: 10px;
	margin-bottom: 10px;
}
.pf-kicker::before { content: ''; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--caramelo) 0 5px, transparent 5px 9px); }

.pf-title {
	font-family: var(--f-title);
	font-weight: 400;
	font-size: clamp(38px, 5.2vw, 62px);
	line-height: 1.08;
	color: var(--cafe-osc);
	letter-spacing: .005em;
	margin-bottom: 22px;
	text-wrap: balance;
}
.pf-squig {
	display: block; width: 150px; height: 11px; margin-top: 8px;
	color: var(--caramelo);
	stroke-dasharray: 100; stroke-dashoffset: 0;
}
.pf-js .pf-squig { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s .5s var(--ease-out); }
.pf-js .is-in .pf-squig { stroke-dashoffset: 0; }

.pf-lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--cafe); max-width: 58ch; }
.pf-hand { font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--cafe); }
.pf-hand--lg { font-size: clamp(28px, 3vw, 38px); }
.pf-sechead { text-align: center; margin-bottom: 52px; }
.pf-sechead .pf-squig { margin-inline: auto; }
.pf-sechead .pf-kicker::after { content: ''; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--caramelo) 0 5px, transparent 5px 9px); }

/* ---------- Botones y links ---------- */
.pf-btn {
	position: relative;
	display: inline-flex; align-items: center; gap: 12px;
	padding: 17px 30px;
	background: var(--cafe-osc); color: var(--crema);
	font-weight: 700; font-size: 17px; letter-spacing: .02em; text-decoration: none;
	border-radius: 16px;
	box-shadow: 0 6px 0 var(--cafe-prof), 0 14px 22px rgba(74, 52, 34, .25);
	transition: transform .25s var(--ease-pop), box-shadow .25s, background .25s;
	isolation: isolate;
}
.pf-btn::after {
	content: ''; position: absolute; inset: 5px; z-index: -1;
	border: 2px dashed rgba(235, 222, 213, .45); border-radius: 11px;
}
.pf-btn .ico { width: 22px; height: 22px; transition: translate .3s var(--ease-pop); }
.pf-btn:hover { transform: translateY(-4px) rotate(-1.5deg); background: var(--cafe); box-shadow: 0 10px 0 var(--cafe-prof), 0 20px 28px rgba(74, 52, 34, .28); }
.pf-btn:hover .ico { translate: 6px 0; }
.pf-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cafe-prof); }
.pf-btn--sm { padding: 12px 22px; font-size: 15px; }

.pf-link {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--f-sub); font-weight: 700; font-size: 16px; letter-spacing: .04em;
	color: var(--cafe-osc); text-decoration: underline wavy var(--caramelo) 1.5px; text-underline-offset: 8px;
	padding-bottom: 4px;
}
.pf-link .ico { width: 22px; height: 22px; transition: translate .3s var(--ease-pop); }
.pf-link:hover .ico { translate: 7px 0; }
.pf-link:hover { text-decoration-color: var(--rosa-osc); }

/* ==========================================================================
   1 · HERO  (verde, logo al centro, banner transparente de fondo)
   ========================================================================== */
.pf-hero {
	position: relative; isolation: isolate; z-index: 3;
	min-height: min(84vh, 760px);
	display: grid; place-items: center;
	padding: clamp(64px, 8vw, 110px) 24px clamp(120px, 12vw, 150px);
	color: var(--crema); text-align: center;
	background-color: var(--oliva);
	background-image:
		var(--fibers),
		radial-gradient(circle, rgba(235, 222, 213, .13) 1.5px, transparent 1.9px),
		radial-gradient(90% 70% at 50% 42%, #8b8764 0%, rgba(139, 135, 100, 0) 70%),
		linear-gradient(180deg, #6b6750, #5f5d4a);
	background-size: 400px 400px, 30px 30px, auto, auto;
}
.pf-hero::before { z-index: 2; /* costura alrededor del lienzo */
	content: ''; position: absolute; inset: 16px 16px 40px; z-index: 1; pointer-events: none;
	border: 2px dashed rgba(235, 222, 213, .3); border-radius: 10px;
}

.pf-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pf-hero__bg picture, .pf-hero__bg img { display: block; width: 100%; height: 100%; }
.pf-hero__bg img { object-fit: cover; object-position: center; filter: saturate(1.02); }
.pf-hero__bg[data-depth] { scale: 1.04; translate: calc(var(--mx, 0) * var(--depth, 0) * 1px) calc(var(--my, 0) * var(--depth, 0) * 1px); transition: translate .6s var(--ease-out); }

.pf-hero__center { position: relative; z-index: 3; display: grid; justify-items: center; gap: 18px; max-width: 640px; }
.pf-hero__logo { width: min(100%, 560px); filter: drop-shadow(0 4px 0 rgba(47, 32, 20, .28)); }
.pf-hero__logo img { width: 100%; }
.pf-hero__tag { font-family: var(--f-sub); font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .16em; color: var(--crema); min-height: 1.6em; }
.pf-hero__stitch { width: 120px; border-top: 3px dashed rgba(217, 174, 166, .9); margin: 4px 0; }
.pf-hero__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(30px, 4vw, 50px); line-height: 1.12; color: var(--hoja); text-wrap: balance; text-shadow: 0 2px 0 rgba(47, 32, 20, .22); }
.pf-hero__lead { color: rgba(246, 238, 231, .92); max-width: 46ch; font-size: 18px; margin-bottom: 8px; }

.pf-btn--light { background: var(--crema); color: var(--cafe-osc); box-shadow: 0 6px 0 #4b4a38, 0 14px 22px rgba(47, 32, 20, .3); }
.pf-btn--light::after { border-color: rgba(74, 52, 34, .4); }
.pf-btn--light:hover { background: var(--hoja); box-shadow: 0 10px 0 #4b4a38, 0 20px 28px rgba(47, 32, 20, .34); }
.pf-btn--light:active { box-shadow: 0 2px 0 #4b4a38; }

.pf-d-sp1 { width: 30px; top: 18%; left: 30%; z-index: 2; }
.pf-d-sp2 { width: 22px; top: 30%; right: 29%; animation-delay: 1.2s; z-index: 2; }
.pf-d-sp3 { width: 26px; bottom: 26%; left: 34%; animation-delay: .6s; z-index: 2; }
.pf-hero .pf-deco[data-depth] { translate: calc(var(--mx, 0) * var(--depth, 0) * 1px) calc(var(--my, 0) * var(--depth, 0) * 1px); transition: translate .5s var(--ease-out); }

.pf-hero__scraps { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pf-scrap { position: absolute; background-color: #7f7c5c; background-image: var(--fibers); filter: url(#pf-rough-soft); box-shadow: 0 8px 18px rgba(47, 32, 20, .2); opacity: .6; }
.pf-js .pf-hero__scraps .pf-tape { scale: 1 1; }
.pf-scrap--a { width: 20%; height: 40%; left: -3%; top: 8%; rotate: -9deg; background-color: #85825f; }
.pf-scrap--b { width: 18%; height: 36%; right: -3%; top: 12%; rotate: 8deg; background-color: #77745a; }
.pf-scrap--c { width: 16%; height: 26%; right: 12%; bottom: -8%; rotate: 5deg; background-color: #8d8a67; }
.pf-hero__tape1 { top: 8%; left: 6%; rotate: -38deg; width: 130px; }
.pf-hero__tape2 { top: 20%; right: 4%; rotate: 32deg; width: 130px; }
.pf-h-flower1 { width: 92px; left: 9%; top: 24%; --r: -12deg; z-index: 2; }
.pf-h-sprig1  { width: 58px; left: 4%; top: 52%; --r: 14deg; z-index: 2; }
.pf-h-heart1  { width: 46px; left: 11%; top: 74%; --r: -14deg; z-index: 2; }
.pf-h-flower2 { width: 80px; right: 10%; top: 50%; --r: 16deg; z-index: 2; }
.pf-h-sprig2  { width: 60px; right: 20%; top: 20%; --r: -10deg; z-index: 2; }
.pf-h-heart2  { width: 44px; right: 7%; top: 28%; --r: 12deg; z-index: 2; }

/* Ilustración principal a la derecha */
.pf-hero__art { position: absolute; z-index: 2; right: clamp(-110px, -4vw, 0px); bottom: 0; width: min(54vw, 800px); aspect-ratio: 1400 / 1472; pointer-events: none; }
.pf-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 18px rgba(47, 32, 20, .3)); }
.pf-hero__paper { position: absolute; left: 6%; right: 4%; top: 10%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3e7dc, var(--crema) 70%); filter: url(#pf-rough); box-shadow: 0 14px 30px rgba(47, 32, 20, .3); }
.pf-hero__arttape { top: 7%; left: 40%; width: 120px; rotate: -6deg; scale: 1 1 !important; z-index: 3; }
.pf-hero--art { place-items: center start; }
.pf-hero--art .pf-hero__center { justify-items: start; text-align: left; max-width: 620px; margin-left: max(24px, calc((100vw - 1180px) / 2)); }
.pf-hero--art .pf-hero__logo { width: min(100%, 520px); }
.pf-hero--art .pf-hero__lead { max-width: 44ch; }
.pf-hero--art .pf-scrap--a, .pf-hero--art .pf-hero__tape1, .pf-hero--art .pf-h-flower1 { display: none; }
.pf-hero--art .pf-h-sprig1 { left: 50.5%; top: 12%; }
.pf-hero--art .pf-h-heart1 { left: 51%; top: 78%; }
.pf-hero--art .pf-hero__art[data-depth] { translate: calc(var(--mx, 0) * var(--depth, 0) * 1px) calc(var(--my, 0) * var(--depth, 0) * 1px); transition: translate .6s var(--ease-out); }
.pf-hero--art .pf-h-flower2, .pf-hero--art .pf-h-sprig2, .pf-hero--art .pf-h-heart2, .pf-hero--art .pf-scrap--b { display: none; }

/* Letras de máquina de escribir */
.pf-type .ch { opacity: 0; }
.pf-type.is-typing .ch { animation: pf-ch .01s forwards; animation-delay: calc(var(--i) * 38ms + 700ms); }
@keyframes pf-ch { to { opacity: 1; } }

/* ==========================================================================
   2 · LISTÓN DE CATEGORÍAS
   ========================================================================== */
.pf-ribbon { position: relative; z-index: 5; margin-top: -58px; margin-bottom: 22px; padding: 22px 0; min-height: 116px; display: flex; align-items: center; }
.pf-ribbon__strip {
	position: absolute; left: -2%; right: -2%; top: 0; bottom: 0; z-index: -1;
	background-color: #cfae82;
	background-image:
		var(--fibers),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 18px, transparent 18px 36px),
		linear-gradient(180deg, #d6b88f, #c4a276);
	filter: url(#pf-rough-soft);
	rotate: -.8deg;
	box-shadow: 0 10px 22px rgba(74, 52, 34, .2);
}
.pf-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; width: min(1180px, 100% - 48px); margin-inline: auto; position: relative; }
.pf-pill {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 22px 13px 16px;
	background: var(--hoja); color: var(--cafe-osc);
	border-radius: 999px;
	font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
	box-shadow: 0 3px 0 rgba(74, 52, 34, .22), 0 10px 18px rgba(74, 52, 34, .18);
	border: 2px dashed rgba(174, 138, 92, .75); outline: 4px solid var(--hoja);
	transition: transform .3s var(--ease-pop), background .25s, color .25s;
	rotate: var(--pr, 0deg);
}
.pf-pill .ico { color: var(--caramelo); width: 28px; height: 28px; transition: transform .45s var(--ease-pop), color .25s; }
.pf-pills li:nth-child(odd)  .pf-pill { --pr: -1.6deg; }
.pf-pills li:nth-child(even) .pf-pill { --pr: 1.4deg; }
.pf-pills li:nth-child(3n)   .pf-pill { --pr: 0deg; }
.pf-pill:hover { transform: translateY(-6px) rotate(calc(var(--pr) * -1.5)) scale(1.05); background: var(--cafe-osc); color: var(--crema); }
.pf-pill:hover .ico { transform: rotate(-14deg) scale(1.25); color: var(--rosa); }
.pf-pill:active { transform: translateY(1px) scale(.97); }

/* ==========================================================================
   Papel con bordes rasgados (secciones de color)
   ========================================================================== */
.pf-what, .pf-how, .pf-star { position: relative; z-index: 2; background: var(--bg); }
.pf-what::before, .pf-what::after, .pf-how::before, .pf-how::after, .pf-star::before, .pf-star::after {
	content: ''; position: absolute; left: -2%; right: -2%; height: 40px; background: var(--bg); filter: url(#pf-rough); z-index: 1;
}
.pf-what::before, .pf-how::before, .pf-star::before { top: -18px; }
.pf-what::after, .pf-how::after, .pf-star::after { bottom: -18px; }

/* ==========================================================================
   5 · QUÉ ES PLUFFI  (rosa, moderno)
   ========================================================================== */
.pf-what {
	--bg: var(--rosa-claro);
	padding: clamp(84px, 9vw, 130px) 0;
	background-image:
		radial-gradient(60% 80% at 100% 0%, rgba(255, 251, 246, .55), transparent 65%),
		radial-gradient(50% 70% at 0% 100%, rgba(217, 174, 166, .45), transparent 70%),
		linear-gradient(var(--bg), var(--bg));
	margin-top: 40px;
}
.pf-what__inner { position: relative; z-index: 2; width: min(1180px, 100% - 48px); margin-inline: auto; display: grid; gap: clamp(36px, 5vw, 60px); }
.pf-what__head { text-align: center; display: grid; justify-items: center; }
.pf-what .pf-squig { color: var(--rosa-osc); margin-inline: auto; }
.pf-what .pf-title { font-size: clamp(42px, 5.8vw, 76px); }
.pf-what__d1 { width: 90px; top: 70px; right: 7%; --r: 14deg; }
.pf-what__d2 { width: 34px; top: 120px; left: 9%; animation: pf-twinkle 3.4s infinite; }

/* Bento: texto grande, cita y tres pilares de colores distintos */
.pf-what__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 2vw, 24px); }
.pf-what__card {
	position: relative; padding: clamp(26px, 3vw, 38px); border-radius: 34px;
	border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 16px 36px rgba(185, 128, 120, .2);
	transition: transform .45s var(--ease-pop), box-shadow .4s;
}
.pf-what__card::after { content: ''; position: absolute; inset: 9px; border: 1.5px dashed rgba(74, 52, 34, .2); border-radius: 26px; pointer-events: none; }
.pf-what__card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 30px 54px rgba(185, 128, 120, .32); }
.pf-what__card--text { grid-column: 1 / -1; background: rgba(255, 251, 246, .8); display: grid; gap: 22px; align-content: center; justify-items: start; }
.pf-what__card--text .pf-lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.6; }
/* Fila de tres fotos redondas, como la de «Sobre mí»: disco de papel blanco rasgado + trazo punteado que gira */
.pf-what__gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 40px); }
.pf-what__shot { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 380px; justify-self: center; }
.pf-what__disc { position: absolute; inset: 0; border-radius: 50%; background-color: #fffdf9; background-image: var(--paper); background-size: 320px 320px; background-blend-mode: soft-light; filter: url(#pf-rough) drop-shadow(0 18px 24px rgba(74, 52, 34, .24)); }
.pf-what__orbit { position: absolute; inset: 5.5%; border: 3px dashed var(--caramelo); border-radius: 50%; animation: pf-me-spin 48s linear infinite; }
.pf-what__orbit::after { content: ''; position: absolute; inset: 7px; border: 2px dotted rgba(185, 128, 120, .7); border-radius: 50%; animation: pf-me-spin 48s linear infinite reverse; }
.pf-what__shot:nth-child(2) .pf-what__orbit { animation-direction: reverse; }
.pf-what__shot:nth-child(2) .pf-what__orbit::after { animation-direction: normal; }
.pf-what__photo { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; border: 7px solid var(--hoja); background: var(--crema); box-shadow: 0 4px 6px rgba(74, 52, 34, .2), 0 14px 26px rgba(74, 52, 34, .28); }
.pf-what__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease-out); }
.pf-what__shot:hover .pf-what__photo img { scale: 1.07; }
.pf-what__shot .pf-hand { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 4px 16px 5px; background: var(--hoja); border-radius: 999px; font-size: 24px; line-height: 1.1; color: var(--cafe-osc); rotate: -3deg; box-shadow: 0 4px 10px rgba(74, 52, 34, .22); }
.pf-what__shot:nth-child(2) .pf-hand { rotate: 3deg; }
.pf-what__note { display: flex; align-items: center; gap: 10px; font-size: 30px; line-height: 1.05; color: var(--cafe-osc); }
.pf-what__note svg { flex: none; width: 30px; height: 30px; animation: pf-beat 2.8s infinite; }
.pf-what__card--pillar { grid-column: span 2; overflow: hidden; }
.pf-what__card--p0 { background: rgba(255, 251, 246, .72); }
.pf-what__card--p1 { background: #cfd5cd; }
.pf-what__card--p2 { background: var(--rosa); }
.pf-what__num { position: absolute; right: 22px; top: 6px; font-family: var(--f-title); font-size: 96px; line-height: 1; color: rgba(74, 52, 34, .09); pointer-events: none; }
.pf-pillar__icon { position: relative; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; margin-bottom: 20px; background: var(--cafe-osc); color: var(--rosa); transition: transform .5s var(--ease-pop), border-radius .4s; }
.pf-pillar__icon .ico { width: 32px; height: 32px; }
.pf-what__card:hover .pf-pillar__icon { transform: rotate(-8deg) scale(1.08); border-radius: 50%; }
.pf-what__card h3 { font-family: var(--f-title); font-weight: 400; font-size: 28px; line-height: 1.12; margin-bottom: 8px; color: var(--cafe-osc); }
.pf-what__card--pillar p { color: var(--cafe-osc); font-size: 16px; line-height: 1.6; }

/* ==========================================================================
   3 · PRODUCTO ESTRELLA
   ========================================================================== */
.pf-star {
	--bg: #46311f;
	margin-top: 30px;
	padding: clamp(110px, 11vw, 150px) 0 clamp(90px, 9vw, 130px);
	color: var(--crema);
	background-image:
		radial-gradient(55% 75% at 27% 52%, rgba(217, 174, 166, .30), transparent 70%),
		linear-gradient(rgba(235, 222, 213, .16) 1.5px, transparent 1.5px),
		linear-gradient(90deg, rgba(235, 222, 213, .16) 1.5px, transparent 1.5px),
		linear-gradient(rgba(235, 222, 213, .11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(235, 222, 213, .11) 1px, transparent 1px),
		linear-gradient(135deg, #4d3626, #3d2a1b);
	background-size: auto, 140px 140px, 140px 140px, 28px 28px, 28px 28px, auto;
	background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
}

.pf-star__ticker { position: absolute; z-index: 5; top: 26px; left: -3%; right: -3%; height: 44px; overflow: hidden; background: var(--rosa); color: var(--cafe-prof); rotate: -1.1deg; box-shadow: 0 8px 16px rgba(0, 0, 0, .35); display: flex; align-items: center; }
.pf-star__track { display: flex; width: max-content; animation: pf-ticker 38s linear infinite; }
.pf-star__track span { flex: none; white-space: pre; padding-right: .5em; font-family: var(--f-sub); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; }
@keyframes pf-ticker { to { transform: translateX(-50%); } }

.pf-star__grid { z-index: 3; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }

.pf-star__photo {
	position: relative; width: min(100%, 440px); justify-self: center;
	background: var(--hoja); padding: 16px 16px 72px;
	box-shadow: 0 2px 3px rgba(74, 52, 34, .2), 0 28px 54px rgba(47, 32, 20, .45);
	--rot: -3deg;
	transform: perspective(1000px) rotate(var(--rot)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .35s var(--ease-out);
}
.pf-star__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--crema); }
.pf-star__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.pf-star__photo:hover .pf-star__img img { scale: 1.07; }
.pf-star__photo .pf-hand { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 32px; color: var(--cafe-osc); }

.pf-star__badge { position: absolute; z-index: 7; top: -52px; right: -62px; width: 156px; height: 156px; filter: drop-shadow(0 10px 14px rgba(47, 32, 20, .4)); animation: pf-wobble 4.5s ease-in-out infinite; }
.pf-star__badge text { text-transform: uppercase; }
.pf-star__spin { transform-origin: 80px 80px; animation: pf-spin 16s linear infinite; }
@keyframes pf-wobble { 0%, 100% { rotate: -6deg; scale: 1; } 50% { rotate: 6deg; scale: 1.07; } }

.pf-star .pf-kicker { color: var(--rosa); }
.pf-star .pf-kicker::before { background: repeating-linear-gradient(90deg, var(--rosa) 0 5px, transparent 5px 9px); }
.pf-star__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(44px, 6vw, 86px); line-height: 1.02; color: var(--hoja); text-wrap: balance; margin-bottom: 22px; text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .3); }
.pf-star__name { display: inline-block; font-family: var(--f-sub); font-weight: 700; font-size: clamp(16px, 1.7vw, 21px); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); margin-bottom: 14px; background: linear-gradient(transparent 62%, rgba(185, 128, 120, .55) 62% 94%, transparent 94%); padding: 0 6px; }
.pf-star__lead { font-size: clamp(17px, 1.5vw, 20px); max-width: 48ch; margin-bottom: 18px; color: rgba(246, 238, 231, .92); }
.pf-star__price { display: inline-block; font-family: var(--f-sub); font-weight: 700; font-size: 20px; padding: 6px 18px; margin-bottom: 20px; background: var(--rosa); color: var(--cafe-prof); border-radius: 999px; border: 2px dashed var(--cafe-prof); rotate: -2deg; }
.pf-btn--big { padding: 21px 40px; font-size: 20px; }
.pf-btn--big .ico { width: 26px; height: 26px; }
.pf-star .pf-btn--light { box-shadow: 0 6px 0 #a67d73, 0 14px 24px rgba(0, 0, 0, .4); background: var(--rosa); color: var(--cafe-prof); }
.pf-star .pf-btn--light::after { border-color: rgba(47, 32, 20, .4); }
.pf-star .pf-btn--light:hover { background: #e6bcb4; box-shadow: 0 10px 0 #a67d73, 0 22px 30px rgba(0, 0, 0, .45); }
.pf-star .pf-btn--light:active { box-shadow: 0 2px 0 #a67d73; }

.pf-star__sp1 { width: 34px; top: -4%; left: 40%; }
.pf-star__sp2 { width: 24px; bottom: -2%; right: 8%; animation-delay: 1s; }
.pf-star__sp3 { width: 28px; top: 38%; left: 47%; animation-delay: .5s; }
.pf-star__flower { width: 96px; left: -1%; bottom: -4%; --r: -14deg; z-index: 6; }
.pf-star__heart { width: 54px; right: 4%; top: 6%; --r: 14deg; }

/* ==========================================================================
   4 · LO NUEVO
   ========================================================================== */
.pf-new { position: relative; padding: clamp(90px, 9vw, 120px) 0 clamp(50px, 6vw, 80px); }
.pf-new__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 30px; margin-bottom: 40px; }
.pf-new__head .pf-title { margin-bottom: 12px; }
.pf-new__marquee { position: relative; padding: 24px 0 38px; }

/* Piezas del plugin Marquee, vestidas de polaroid */
.pf-new .marquee-gen-pieza { position: relative; }
.pf-new .marquee-gen-pieza__img {
	border: 9px solid var(--hoja) !important; border-radius: 3px !important;
	box-shadow: 0 2px 3px rgba(74, 52, 34, .18), 0 14px 26px rgba(74, 52, 34, .24);
	transition: transform .4s var(--ease-pop), box-shadow .4s;
}
.pf-new .marquee-gen-pieza:nth-child(4n+1) .marquee-gen-pieza__img { transform: rotate(-2.2deg); }
.pf-new .marquee-gen-pieza:nth-child(4n+2) .marquee-gen-pieza__img { transform: rotate(1.6deg); }
.pf-new .marquee-gen-pieza:nth-child(4n+3) .marquee-gen-pieza__img { transform: rotate(-.8deg); }
.pf-new .marquee-gen-pieza:nth-child(4n)   .marquee-gen-pieza__img { transform: rotate(2.4deg); }
.pf-new .marquee-gen-pieza:hover .marquee-gen-pieza__img { transform: rotate(0deg) translateY(-10px) scale(1.04); box-shadow: 0 24px 38px rgba(74, 52, 34, .32); }
.pf-new .marquee-gen-pieza::before {
	content: ''; position: absolute; z-index: 3; top: -9px; left: 50%; width: 64px; height: 20px; margin-left: -32px; rotate: -4deg;
	background-color: var(--rosa); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 5px, transparent 5px 11px); opacity: .92;
	clip-path: polygon(0 0, 4% 14%, 0 28%, 4% 42%, 0 56%, 4% 70%, 0 84%, 4% 100%, 100% 100%, 96% 84%, 100% 70%, 96% 56%, 100% 42%, 96% 28%, 100% 14%, 96% 0);
}
.pf-new .marquee-gen-pieza:nth-child(even)::before { background-color: #e6cfa9; background-image: repeating-linear-gradient(90deg, var(--caramelo) 0 6px, transparent 6px 12px); rotate: 5deg; }

/* Estilo por pieza (se elige en Marquee): sticker = recorte con borde blanco, limpia = sin marco */
.pf-new .marquee-gen-pieza--sticker::before, .pf-new .marquee-gen-pieza--limpia::before { display: none; }
.pf-new .marquee-gen-pieza--sticker .marquee-gen-pieza__img {
	border: 0 !important; border-radius: 0 !important; box-shadow: none; object-fit: contain; background: none;
	filter: drop-shadow(3px 0 0 #fffaf0) drop-shadow(-3px 0 0 #fffaf0) drop-shadow(0 3px 0 #fffaf0) drop-shadow(0 -3px 0 #fffaf0) drop-shadow(0 10px 14px rgba(74, 52, 34, .28));
}
.pf-new .marquee-gen-pieza--sticker:hover .marquee-gen-pieza__img { box-shadow: none; transform: rotate(-3deg) translateY(-8px) scale(1.06); }
.pf-new .marquee-gen-pieza--limpia .marquee-gen-pieza__img { border: 0 !important; border-radius: 3px !important; box-shadow: 0 12px 24px rgba(74, 52, 34, .2); transform: none; }
.pf-new .marquee-gen-pieza--limpia:hover .marquee-gen-pieza__img { transform: translateY(-8px) scale(1.03); }

/* Esquinas curvas (opción por pieza en Marquee) */
.pf-new .marquee-gen-pieza--curvas .marquee-gen-pieza__img { border-radius: 22px !important; }
.pf-new .marquee-gen-pieza--limpia.marquee-gen-pieza--curvas .marquee-gen-pieza__img { border-radius: 26px !important; }

/* ==========================================================================
   6 · COLECCIONES  (papel punteado de bullet journal, tarjetas modernas)
   ========================================================================== */
.pf-colls {
	position: relative; padding: clamp(70px, 8vw, 110px) 0;
	background-image: radial-gradient(circle, rgba(106, 79, 54, .26) 1.3px, transparent 1.7px);
	background-size: 28px 28px;
}
.pf-colls__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 36px); }

.pf-coll {
	position: relative; display: flex; flex-direction: column; padding: 14px;
	background: var(--hoja); border: 1.5px solid rgba(174, 138, 92, .25); border-radius: 36px;
	box-shadow: 0 14px 34px rgba(74, 52, 34, .10);
	transition: transform .45s var(--ease-pop), box-shadow .4s, border-color .3s;
}
.pf-coll__link { position: absolute; inset: 0; z-index: 8; border-radius: 36px; }
.pf-coll--active:hover { transform: translateY(-9px); border-color: var(--caramelo); box-shadow: 0 30px 56px rgba(74, 52, 34, .2); }

.pf-coll__photo { position: relative; }
.pf-coll__img { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 26px; background: var(--crema); }
.pf-coll__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: scale 1.1s var(--ease-out), filter .6s; }
.pf-coll--active:hover .pf-coll__img img { scale: 1.07; }
.pf-coll--soon .pf-coll__img img { filter: grayscale(.65) sepia(.3) brightness(.97); }
.pf-coll--soon:hover .pf-coll__img img { filter: grayscale(.2) sepia(.2); }

.pf-chip {
	position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 15px 7px 12px; border-radius: 999px;
	background: rgba(255, 251, 246, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	font-family: var(--f-sub); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cafe-osc);
	box-shadow: 0 6px 14px rgba(74, 52, 34, .18);
}
.pf-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #3fae72; box-shadow: 0 0 0 0 rgba(63, 174, 114, .65); animation: pf-ping2 2s infinite; }
.pf-coll--soon .pf-chip::before { background: #c9a05a; animation: none; }
@keyframes pf-ping2 { 0% { box-shadow: 0 0 0 0 rgba(63, 174, 114, .65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(63, 174, 114, 0); } }

.pf-coll__body { display: flex; flex-direction: column; flex: 1; padding: 24px 14px 12px; }
.pf-coll__body h3 { font-family: var(--f-title); font-weight: 400; font-size: clamp(30px, 3vw, 38px); line-height: 1.08; margin-bottom: 10px; color: var(--cafe-osc); }
.pf-coll__body p { color: var(--cafe); font-size: 16px; margin-bottom: 22px; }
.pf-coll__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1.5px dashed rgba(174, 138, 92, .45); }
.pf-coll .pf-btn { position: relative; z-index: 1; pointer-events: none; }
.pf-coll--active:hover .pf-btn { background: var(--cafe); transform: translateY(-2px); }
.pf-coll--active:hover .pf-btn .ico { translate: 6px 0; }
.pf-colls__cta { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.pf-what__cta { margin-top: 26px; }
.pf-coll__soon { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(159, 154, 136, .22); color: var(--pizarra); font-family: var(--f-sub); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   7 · SOBRE MÍ
   ========================================================================== */
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-prose p { margin: 0 0 1.1em; color: var(--cafe); max-width: 58ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.75; }
.pf-sign { margin-top: 8px; color: var(--rosa-osc); rotate: -3deg; display: inline-block; }

/* ==========================================================================
   8 · CÓMO LO HAGO  (oliva a sangre, tarjetas de cristal)
   ========================================================================== */
.pf-how {
	--bg: var(--oliva);
	margin: 40px 0;
	padding: clamp(90px, 9vw, 130px) 0;
	color: var(--crema);
	background-image:
		var(--fibers),
		radial-gradient(circle, rgba(235, 222, 213, .12) 1.4px, transparent 1.8px),
		linear-gradient(var(--bg), var(--bg));
	background-size: 400px 400px, 30px 30px, auto;
}
.pf-how .pf-wrap { z-index: 2; }
.pf-how .pf-kicker { color: var(--rosa); }
.pf-how .pf-title { color: var(--hoja); }
.pf-how .pf-squig { color: var(--rosa); }
.pf-how .pf-kicker::before, .pf-how .pf-kicker::after { background: repeating-linear-gradient(90deg, var(--rosa) 0 5px, transparent 5px 9px); }

.pf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.pf-step {
	position: relative; padding: 38px 32px 36px; text-align: left;
	background: rgba(255, 251, 246, .09); border: 1.5px solid rgba(235, 222, 213, .24); border-radius: 34px;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 36px rgba(47, 32, 20, .18);
	transition: transform .45s var(--ease-pop), background .3s, border-color .3s;
}
.pf-step:hover { transform: translateY(-9px); background: rgba(255, 251, 246, .16); border-color: rgba(217, 174, 166, .7); }
.pf-step__num { position: absolute; top: 20px; right: 28px; font-family: var(--f-title); font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(217, 174, 166, .75); }
.pf-step__icon { width: 74px; height: 74px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 24px; background: var(--rosa); color: var(--cafe-osc); transition: transform .5s var(--ease-pop), border-radius .4s; }
.pf-step__icon .ico { width: 38px; height: 38px; }
.pf-step:hover .pf-step__icon { transform: rotate(-9deg) scale(1.08); border-radius: 50%; }
.pf-step h3 { font-family: var(--f-title); font-weight: 400; font-size: 32px; line-height: 1.1; margin-bottom: 10px; color: var(--hoja); }
.pf-step p { color: rgba(235, 222, 213, .9); font-size: 16.5px; line-height: 1.65; }

/* ==========================================================================
   9 · DÓNDE COMPRAR  (moderno: lista de tiendas)
   ========================================================================== */
.pf-shops { position: relative; padding: clamp(70px, 8vw, 110px) 0 clamp(60px, 6vw, 80px); }
.pf-shops__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.pf-shops__head { position: sticky; top: 90px; }
.pf-shops__list { display: grid; gap: 18px; }

.pf-store {
	position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 8px 24px; align-items: center;
	padding: 24px 28px 24px 24px;
	background: var(--hoja); border: 1.5px solid rgba(174, 138, 92, .3); border-radius: 28px;
	box-shadow: 0 10px 28px rgba(74, 52, 34, .09);
	transition: transform .35s var(--ease-pop), box-shadow .35s, border-color .3s, background .3s;
}
.pf-store__link { position: absolute; inset: 0; z-index: 3; border-radius: 28px; }
.pf-store:not(.pf-store--empty):hover { transform: translateY(-5px); border-color: var(--caramelo); background: #fff; box-shadow: 0 22px 44px rgba(74, 52, 34, .16); }
.pf-store:not(.pf-store--empty):hover .pf-btn { background: var(--cafe); transform: translateY(-2px); }
.pf-store:not(.pf-store--empty):hover .pf-btn .ico { translate: 6px 0; }

.pf-store__mark { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; overflow: hidden; background: var(--cafe-osc); color: var(--crema); transition: transform .5s var(--ease-pop), border-radius .4s; }
.pf-store__mark img { width: 100%; height: 100%; object-fit: contain; background: var(--crema); padding: 10px; }
.pf-store__mark span { font-family: var(--f-title); font-size: 42px; line-height: 1; }
.pf-store:hover .pf-store__mark { transform: rotate(-8deg) scale(1.06); border-radius: 50%; }

.pf-store__body h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--f-title); font-weight: 400; font-size: 30px; line-height: 1.1; margin-bottom: 6px; color: var(--cafe-osc); }
.pf-store__body p { color: var(--cafe); font-size: 15.5px; line-height: 1.55; }
.pf-store__chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(123, 138, 134, .18); color: #3f4f4b; font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.pf-store__chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3fae72; box-shadow: 0 0 0 0 rgba(63, 174, 114, .65); animation: pf-ping 2.2s infinite; }
@keyframes pf-ping { 70% { box-shadow: 0 0 0 8px rgba(63, 174, 114, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0); } }

.pf-store .pf-btn { position: relative; z-index: 1; pointer-events: none; }

.pf-store--empty { grid-template-columns: 76px 1fr; background: transparent; box-shadow: none; border: 2px dashed rgba(159, 154, 136, .8); }
.pf-store--empty .pf-store__mark { background: transparent; color: var(--rosa-osc); border: 2px dashed var(--rosa); }
.pf-store--empty .pf-store__mark .ico { width: 32px; height: 32px; animation: pf-beat 3s infinite; }
.pf-store--empty .pf-hand { color: var(--pizarra); margin: 0; }

/* ==========================================================================
   9 · FOOTER
   ========================================================================== */
.pf-footer { position: relative; z-index: 3; background-color: #644830; color: var(--crema); padding: 96px 0 44px; text-align: center; background-image: var(--paper); background-size: 320px 320px; background-blend-mode: multiply; }
.pf-footer::after { content: ''; position: absolute; inset: 22px 22px 22px; border: 2px dashed rgba(235, 222, 213, .22); border-radius: 10px; pointer-events: none; }
.pf-footer__torn { position: absolute; left: -2%; right: -2%; top: -20px; height: 44px; background-color: #644830; background-image: var(--paper); background-size: 320px 320px; background-blend-mode: multiply; filter: url(#pf-rough); }
.pf-footer__inner { display: grid; justify-items: center; gap: 18px; }
.pf-footer__btn { margin: 6px 0 4px; box-shadow: 0 6px 0 #2f2014, 0 14px 22px rgba(0, 0, 0, .38); }
.pf-footer__btn:hover { box-shadow: 0 10px 0 #2f2014, 0 20px 28px rgba(0, 0, 0, .42); }
.pf-footer__btn:active { box-shadow: 0 2px 0 #2f2014; }
.pf-footer__logo { width: min(250px, 70%); transition: transform .5s var(--ease-pop); }
.pf-footer__logo:hover { transform: rotate(-4deg) scale(1.06); }
.pf-footer__text { font-family: var(--f-hand); font-weight: 600; font-size: 28px; color: var(--rosa); }
.pf-social { display: flex; gap: 14px; }
.pf-social a {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	border: 2px dashed rgba(235, 222, 213, .6); color: var(--crema);
	transition: transform .4s var(--ease-pop), background .25s, color .25s, border-color .25s;
}
.pf-social .ico { width: 28px; height: 28px; }
.pf-social a:hover { background: var(--rosa); color: var(--cafe-prof); border-color: var(--rosa); transform: translateY(-6px) rotate(-10deg) scale(1.08); }
.pf-footer__credit { font-family: var(--f-sub); font-size: 14px; letter-spacing: .06em; color: rgba(235, 222, 213, .75); margin-top: 10px; }
.pf-top { position: absolute; right: 0; bottom: -6px; display: grid; justify-items: center; gap: 2px; font-family: var(--f-hand); font-size: 22px; font-weight: 600; text-decoration: none; color: var(--rosa); }
.pf-top__btn { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px dashed rgba(235, 222, 213, .7); color: var(--crema); overflow: hidden; transition: transform .4s var(--ease-pop), background .25s, color .25s, border-color .25s; }
.pf-top__btn .ico { width: 26px; height: 26px; rotate: -90deg; }
.pf-top:hover .pf-top__btn { background: var(--rosa); color: var(--cafe-prof); border-color: var(--rosa); transform: translateY(-6px); }
.pf-top:hover .pf-top__btn .ico { animation: pf-up .7s var(--ease-pop) infinite; }
@keyframes pf-up { 0% { translate: 0 0; } 45% { translate: 0 -22px; opacity: 0; } 46% { translate: 0 22px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }

/* ==========================================================================
   Capas vivas: hojas que caen, corazones del cursor, progreso
   ========================================================================== */
.pf-leaves { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.pf-leaf { position: absolute; top: -60px; width: var(--s, 26px); height: var(--s, 26px); opacity: 0; animation: pf-fall var(--dur, 12s) linear var(--del, 0s) 1 both; }
.pf-leaf svg { width: 100%; height: 100%; display: block; animation: pf-sway var(--sw, 5s) ease-in-out infinite alternate; filter: drop-shadow(0 2px 2px rgba(74, 52, 34, .2)); }
@keyframes pf-fall {
	0%   { transform: translateY(-6vh); opacity: 0; }
	6%   { opacity: .85; }
	92%  { opacity: .85; }
	100% { transform: translateY(112vh); opacity: 0; }
}
@keyframes pf-sway {
	from { transform: translateX(-34px) rotate(-40deg); }
	to   { transform: translateX(34px) rotate(40deg); }
}

.pf-trail, .pf-burst { position: fixed; z-index: 95; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pf-trail { animation: pf-trail .9s ease-out forwards; }
@keyframes pf-trail {
	from { transform: translate(0, 0) scale(1) rotate(var(--rr, 0deg)); opacity: .9; }
	to   { transform: translate(var(--dx, 0), -34px) scale(.3) rotate(calc(var(--rr, 0deg) + 40deg)); opacity: 0; }
}
.pf-burst { animation: pf-burst .8s cubic-bezier(.2, .7, .3, 1) forwards; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
@keyframes pf-burst {
	from { transform: translate(0, 0) scale(.4); opacity: 1; }
	to   { transform: translate(var(--bx), var(--by)) scale(1.1) rotate(var(--rr, 0deg)); opacity: 0; }
}

.pf-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 6px; z-index: 96; pointer-events: none; }
.pf-progress span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: repeating-linear-gradient(90deg, var(--caramelo) 0 10px, transparent 10px 15px); box-shadow: 0 -1px 0 rgba(255, 255, 255, .5); }

/* ==========================================================================
   Botón de temporada (freebies)
   ========================================================================== */
.pf-gift { --g-bg: #d9aea6; --g-fg: #2f2014; --g-sh: #a67d73; position: fixed; left: 18px; bottom: 26px; z-index: 96; animation: pf-gift-in .9s var(--ease-pop) 1.4s both; }
.pf-gift--caramelo { --g-bg: #ae8a5c; --g-fg: #2f2014; --g-sh: #7d5d38; }
.pf-gift--salvia { --g-bg: #8fa19c; --g-fg: #1f2a27; --g-sh: #5f6f6a; }
.pf-gift--oliva { --g-bg: #716d55; --g-fg: #fffbf6; --g-sh: #4b4a38; }
.pf-gift--cafe { --g-bg: #4a3422; --g-fg: #ebded5; --g-sh: #2f2014; }
.pf-gift.is-closed, .pf-gift.is-wait { display: none; }
@media (min-width: 701px) { .pf-gift--nodesk { display: none !important; } }
.pf-gift.is-late { animation-delay: .4s; }
@keyframes pf-gift-in { from { opacity: 0; transform: translateY(40px) scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

.pf-gift__link {
	position: relative; display: inline-flex; align-items: center; gap: 0; padding: 9px;
	background: var(--g-bg); color: var(--g-fg); border-radius: 999px;
	font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none;
	box-shadow: 0 6px 0 var(--g-sh), 0 16px 26px rgba(47, 32, 20, .32);
	transition: transform .3s var(--ease-pop), box-shadow .3s, gap .45s var(--ease-out), padding .45s var(--ease-out);
	isolation: isolate; animation: pf-gift-bob 3.6s ease-in-out 2.4s infinite;
}
.pf-gift__link::before { content: ''; position: absolute; inset: 5px; z-index: -1; border: 2px dashed currentColor; opacity: .38; border-radius: 999px; }
.pf-gift__link::after { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: 999px; box-shadow: 0 0 0 0 var(--g-bg); animation: pf-gift-ping 2.6s ease-out 2.4s infinite; }
@keyframes pf-gift-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1.2deg); } }
@keyframes pf-gift-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-bg) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 18px transparent; } }
.pf-gift__link:hover { animation-play-state: paused; transform: translateY(-6px) rotate(-2deg) scale(1.04); box-shadow: 0 10px 0 var(--g-sh), 0 22px 32px rgba(47, 32, 20, .38); }
.pf-gift__link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--g-sh); }

.pf-gift__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .38); }
.pf-gift__ico .ico { width: 26px; height: 26px; transform-origin: 50% 70%; animation: pf-gift-wiggle 3.6s ease-in-out 2.6s infinite; }
@keyframes pf-gift-wiggle { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: -14deg; } 72% { rotate: 12deg; } 78% { rotate: -9deg; } 84% { rotate: 6deg; } }
.pf-gift__txt { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ease-out), opacity .3s; }
.pf-gift__link:hover, .pf-gift__link:focus-visible { gap: 12px; padding-right: 22px; }
.pf-gift__link:hover .pf-gift__txt, .pf-gift__link:focus-visible .pf-gift__txt { max-width: 24ch; opacity: 1; }

.pf-gift__x { position: absolute; top: -10px; right: -8px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #fffbf6; color: #4a3422; cursor: pointer; box-shadow: 0 4px 10px rgba(47, 32, 20, .3); transition: transform .3s var(--ease-pop); }
.pf-gift__x svg { width: 14px; height: 14px; }
.pf-gift__x:hover { transform: rotate(90deg) scale(1.12); }
.pf-gift__sp1 { width: 20px; top: -14px; left: 26px; }
.pf-gift__sp2 { width: 14px; bottom: -6px; right: 30px; animation-delay: .9s; }

@media (max-width: 640px) {
	.pf-hero__actions { justify-content: center; }
	.pf-freebie { margin-inline: auto; width: min(100%, 340px); }
	.pf-gift { left: auto; right: 14px; bottom: 18px; }
	.pf-gift__link { padding: 8px; }
	.pf-gift__ico { width: 40px; height: 40px; }
}

/* ==========================================================================
   Tarjeta de freebies en el hero (se abre al pasar el mouse)
   ========================================================================== */
.pf-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 24px; justify-self: stretch; width: 100%; }
.pf-freebie { --g-bg: #d9aea6; --g-fg: #2f2014; --g-sh: #a67d73; flex: 0 1 300px; max-width: 100%; }
.pf-freebie--caramelo { --g-bg: #ae8a5c; --g-fg: #2f2014; --g-sh: #7d5d38; }
.pf-freebie--salvia { --g-bg: #8fa19c; --g-fg: #1f2a27; --g-sh: #5f6f6a; }
.pf-freebie--oliva { --g-bg: #a29d7c; --g-fg: #2f2014; --g-sh: #6f6a4d; }
.pf-freebie--cafe { --g-bg: #4a3422; --g-fg: #ebded5; --g-sh: #2f2014; }

.pf-freebie--mobile-only { display: none; }
.pf-freebie__card { position: relative; display: block; height: 104px; perspective: 1000px; text-decoration: none; color: var(--g-fg); rotate: -2deg; transition: rotate .45s var(--ease-pop), translate .35s var(--ease-pop); }
.pf-freebie__card:hover, .pf-freebie__card:focus-visible { rotate: 0deg; translate: 0 -5px; }

.pf-freebie__inside, .pf-freebie__cover { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 20px 0 16px; border-radius: 20px; }
.pf-freebie__inside { background: var(--g-bg); box-shadow: 0 7px 0 var(--g-sh), 0 18px 30px rgba(0, 0, 0, .34); }
.pf-freebie__inside::after { content: ''; position: absolute; inset: 6px; border: 2px dashed currentColor; opacity: .32; border-radius: 15px; pointer-events: none; }
.pf-freebie__gift { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .42); }
.pf-freebie__gift .ico { width: 28px; height: 28px; }
.pf-freebie__in-text { display: grid; gap: 4px; }
.pf-freebie__in-text strong { font-family: var(--f-title); font-weight: 400; font-size: 24px; line-height: 1.05; }
.pf-freebie__in-text em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; font-size: 14.5px; letter-spacing: .05em; text-decoration: underline wavy currentColor 1.4px; text-underline-offset: 6px; }
.pf-freebie__in-text em .ico { width: 18px; height: 18px; transition: translate .3s var(--ease-pop); }
.pf-freebie__card:hover .pf-freebie__in-text em .ico { translate: 6px 0; }

.pf-freebie__cover {
	z-index: 2; transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	background: var(--hoja) repeating-linear-gradient(135deg, rgba(174, 138, 92, .07) 0 8px, transparent 8px 16px);
	border: 2px dashed var(--g-bg);
	box-shadow: 0 7px 0 rgba(74, 52, 34, .2), 0 18px 30px rgba(0, 0, 0, .34);
	transition: transform .85s var(--ease-pop);
	animation: pf-card-peek 5.5s ease-in-out 3.2s infinite;
}
.pf-freebie__cover .pf-freebie__gift { background: var(--g-bg); color: var(--g-fg); }
.pf-freebie__cover .pf-hand { color: var(--cafe-osc); font-size: 29px; line-height: 1; }
.pf-freebie__tape { top: -15px; left: 24px; width: 84px; rotate: -8deg; }
.pf-freebie__card:hover .pf-freebie__cover, .pf-freebie__card:focus-visible .pf-freebie__cover { transform: rotateY(-158deg); animation: none; }
@keyframes pf-card-peek { 0%, 84%, 100% { transform: rotateY(0deg); } 90% { transform: rotateY(-22deg); } 95% { transform: rotateY(-6deg); } }

/* Tarjeta de freebies flotando en la esquina inferior derecha */
.pf-freebie--corner, .pf-freebie--topleft { position: fixed; z-index: 96; flex: none; width: 300px; animation: pf-gift-in .9s var(--ease-pop) 1.4s backwards; }
.pf-freebie--corner { right: 22px; bottom: 28px; }
.pf-freebie--topleft { left: 22px; top: 62px; width: 236px; transform-origin: left top; transition: transform .85s cubic-bezier(.55, 0, .75, .4), opacity .45s ease .3s, visibility 0s linear .85s; }
.pf-freebie--topleft.is-docked { transform: translateY(68vh) scale(.4); opacity: 0; visibility: hidden; pointer-events: none; }
/* Tarjeta de arriba a la izquierda, más compacta */
.pf-freebie--topleft .pf-freebie__card { height: 84px; }
.pf-freebie--topleft .pf-freebie__inside, .pf-freebie--topleft .pf-freebie__cover { gap: 11px; padding: 0 14px 0 12px; border-radius: 16px; }
.pf-freebie--topleft .pf-freebie__gift { width: 42px; height: 42px; }
.pf-freebie--topleft .pf-freebie__gift .ico { width: 23px; height: 23px; }
.pf-freebie--topleft .pf-freebie__in-text strong { font-size: 19px; }
.pf-freebie--topleft .pf-freebie__in-text em { font-size: 12.5px; text-underline-offset: 5px; }
.pf-freebie--topleft .pf-freebie__cover .pf-hand { font-size: 23px; }
.pf-freebie--topleft .pf-freebie__tape { width: 64px; height: 24px; top: -12px; left: 18px; }
.pf-freebie--corner.is-closed, .pf-freebie--topleft.is-closed { display: none; }
.pf-js .pf-freebie--corner .pf-tape, .pf-js .pf-freebie--topleft .pf-tape { scale: 1 1; }
.pf-freebie__x { position: absolute; top: -12px; right: -10px; z-index: 5; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #fffbf6; color: #4a3422; cursor: pointer; box-shadow: 0 4px 10px rgba(47, 32, 20, .3); transition: transform .3s var(--ease-pop); }
.pf-freebie__x svg { width: 14px; height: 14px; }
.pf-freebie__x:hover { transform: rotate(90deg) scale(1.12); }
body.pf:has(.pf-freebie--corner) .pf-top { right: auto; left: 0; }
/* Con la tarjeta arriba a la izquierda, el hero baja un poco para que no tape el logo */
body.pf:has(.pf-freebie--topleft:not(.pf-freebie--mobile-only)) .pf-hero { padding-top: 150px; }
@media (max-width: 640px) {
	.pf-freebie--corner { right: 12px; bottom: 16px; width: min(270px, calc(100vw - 24px)); }
	.pf-freebie--topleft { left: 12px; top: 58px; width: min(220px, calc(100vw - 150px)); }
}

/* ==========================================================================
   Popup «tu freebie está listo»
   ========================================================================== */
html.pf-modal-open { overflow: hidden; }
.pf-modal { --g-bg: #d9aea6; --g-fg: #2f2014; --g-sh: #a67d73; border: 0; padding: 0; background: transparent; width: min(92vw, 460px); max-width: none; max-height: none; overflow: visible; color: var(--cafe-osc); }
.pf-modal::backdrop { background: rgba(47, 32, 20, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pf-modal[open] { animation: pf-modal-in .6s var(--ease-pop); }
.pf-modal[open]::backdrop { animation: pf-modal-fade .4s ease-out; }
@keyframes pf-modal-in { from { opacity: 0; transform: translateY(36px) rotate(-4deg) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes pf-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.pf-modal__card {
	position: relative; padding: 54px 34px 38px; text-align: center; border-radius: 30px;
	background: var(--hoja) repeating-linear-gradient(135deg, rgba(174, 138, 92, .07) 0 9px, transparent 9px 18px);
	box-shadow: 0 8px 0 rgba(74, 52, 34, .2), 0 30px 60px rgba(0, 0, 0, .5);
}
.pf-modal__card::before { content: ''; position: absolute; inset: 10px; border: 2px dashed var(--g-bg); border-radius: 22px; pointer-events: none; }
.pf-modal .pf-tape { scale: 1 1 !important; }
.pf-modal__tape { top: -14px; left: 50%; margin-left: -59px; rotate: -4deg; }
.pf-modal__x { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--crema); color: var(--cafe-osc); cursor: pointer; transition: transform .3s var(--ease-pop), background .2s; }
.pf-modal__x svg { width: 16px; height: 16px; }
.pf-modal__x:hover { transform: rotate(90deg) scale(1.1); background: var(--g-bg); }
.pf-modal__gift { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--g-bg); color: var(--g-fg); box-shadow: 0 6px 0 var(--g-sh); animation: pf-gift-wiggle 3.2s ease-in-out .6s infinite; }
.pf-modal__gift .ico { width: 46px; height: 46px; }
.pf-modal__title { font-family: var(--f-title); font-weight: 400; font-size: clamp(32px, 6vw, 42px); line-height: 1.08; margin: 0 0 12px; color: var(--cafe-osc); text-wrap: balance; }
.pf-modal__text { color: var(--cafe); font-size: 16.5px; line-height: 1.6; max-width: 34ch; margin: 0 auto 26px; }
.pf-modal__dl { margin-bottom: 4px; }
.pf-modal__sp1 { width: 26px; top: 26px; left: 32px; }
.pf-modal__sp2 { width: 20px; bottom: 30px; right: 36px; animation-delay: .8s; }
.pf-modal__confetti { position: absolute; left: 50%; top: 26%; width: 0; height: 0; pointer-events: none; }
.pf-modal__confetti svg { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; animation: pf-burst .9s cubic-bezier(.2, .7, .3, 1) forwards; }
.pf-modal__card { max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
.pf-modal--multi { width: min(94vw, 680px); }
.pf-modal__list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: left; }
.pf-modal__item { display: flex; flex-direction: column; background: #fff; border: 1.5px solid rgba(174, 138, 92, .35); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 18px rgba(74, 52, 34, .12); transition: transform .35s var(--ease-pop), box-shadow .3s; }
.pf-modal__item:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(74, 52, 34, .2); }
.pf-modal__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--crema); }
.pf-modal__thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out); }
.pf-modal__item:hover .pf-modal__thumb img { scale: 1.07; }
.pf-modal__info { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; flex: 1; }
.pf-modal__info h3 { font-family: var(--f-title); font-weight: 400; font-size: 22px; line-height: 1.1; margin: 0; color: var(--cafe-osc); }
.pf-modal__info p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--cafe); flex: 1; }
.pf-modal__info .pf-btn { justify-content: center; align-self: stretch; }
@media (max-width: 560px) {
	.pf-modal__list { grid-template-columns: 1fr; gap: 12px; }
	.pf-modal__item { flex-direction: row; align-items: stretch; }
	.pf-modal__thumb { flex: 0 0 38%; aspect-ratio: auto; }
	.pf-modal__info { padding: 12px 14px 14px; }
	.pf-modal__info h3 { font-size: 20px; }
	.pf-modal__info p { font-size: 13px; margin-bottom: 6px; }
}
@media (max-width: 480px) { .pf-modal__card { padding: 50px 24px 32px; } }

/* Páginas genéricas */
.pf-generic { padding: 80px 0 120px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.pf-star__grid { grid-template-columns: 1fr; }
	.pf-star__badge { right: -22px; width: 124px; height: 124px; top: -40px; }
	.pf-star__sp3, .pf-star__heart { display: none; }
	.pf-me__grid, .pf-shops__layout { grid-template-columns: 1fr; }
	.pf-what__card--pillar { grid-column: span 3; }
	.pf-what__shot .pf-hand { font-size: 21px; }
	.pf-what__card--pillar { grid-column: span 6; }
	.pf-shops__head { position: static; }
	.pf-colls__grid { grid-template-columns: 1fr; }
	.pf-steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 1100px) {
	.pf-hero--art .pf-hero__center { max-width: 46vw; }
	.pf-hero__art { width: 52vw; }
}
@media (max-width: 700px) {
	/* La flor del producto estrella va a la derecha para no tapar el botón */
	.pf-star__flower { left: auto; right: 6%; bottom: 0; width: 82px; --r: 14deg; }
	/* Freebies en celular: la tarjeta va en el hero; al bajar, queda solo el círculo con el regalo */
	.pf-freebie--corner, .pf-freebie--hero { display: none !important; }
	.pf-freebie--topleft.pf-freebie--mobile-only { display: block; }
	.pf-gift__link:hover, .pf-gift__link:focus-visible { gap: 0; padding-right: 9px; }
	.pf-gift__link:hover .pf-gift__txt, .pf-gift__link:focus-visible .pf-gift__txt { max-width: 0; opacity: 0; }
	body.pf:has(.pf-freebie--topleft) .pf-hero { padding-top: 150px; }
	.pf-hero--art { padding: 110px 20px 330px; }
	.pf-hero--art { place-items: center; }
	.pf-hero--art .pf-hero__center { margin-left: 0; max-width: 640px; justify-items: center; text-align: center; }
	.pf-hero__art { width: min(78vw, 330px); right: -6%; }
	.pf-h-sprig1, .pf-h-sprig2, .pf-h-heart2, .pf-scrap--c, .pf-hero__tape2 { display: none; }
	.pf-scrap--a { height: 18%; width: 26%; }
	.pf-h-flower1 { width: 62px; left: 4%; top: 3%; }
	.pf-h-flower2 { width: 54px; right: 4%; top: auto; bottom: 14%; }
	.pf-h-heart1 { width: 34px; left: 8%; top: auto; bottom: 18%; }
}
@media (max-width: 640px) {
	body.pf { font-size: 16px; }
	.pf-coll { padding: 12px; border-radius: 30px; }
	.pf-store { grid-template-columns: 64px 1fr; padding: 20px; }
	.pf-store .pf-btn { grid-column: 1 / -1; justify-content: center; }
	.pf-store__mark { width: 64px; height: 64px; }
	.pf-new__head { align-items: flex-start; }
	.pf-pill { font-size: 15px; padding: 11px 18px 11px 13px; }
	.pf-top { position: static; margin-top: 8px; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.pf-js .pf-reveal { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
	.pf-js .pf-tape { scale: 1 1; }
	.pf-js .pf-squig { stroke-dashoffset: 0; }
	.pf-type .ch { opacity: 1; }
	.pf-leaves, .pf-progress { display: none; }
}

/* ==========================================================================
   10 · FREEBIES  (caja verde salvia con papeles abanicados, antes del pie)
   ========================================================================== */
.pf-promo { position: relative; padding: 0 0 clamp(110px, 11vw, 150px); }
.pf-promo__box {
	position: relative; width: min(1180px, 100% - 48px); margin-inline: auto;
	display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center;
	padding: clamp(40px, 5vw, 70px) clamp(28px, 5vw, 70px);
	background-color: #7b8a86; background-image: var(--paper), radial-gradient(70% 90% at 0% 0%, rgba(255, 251, 246, .22), transparent 65%);
	background-size: 320px 320px, auto; background-blend-mode: multiply, normal;
	border-radius: 44px; box-shadow: 0 6px 0 #5f6c68, 0 28px 50px rgba(47, 32, 20, .3);
	color: var(--hoja);
}
.pf-promo__box::after { content: ''; position: absolute; inset: 14px; border: 2px dashed rgba(255, 251, 246, .38); border-radius: 32px; pointer-events: none; }
.pf-promo__stack { position: relative; display: flex; justify-content: center; align-items: center; min-height: 300px; }
.pf-promo__card {
	position: relative; display: block; width: min(250px, 46%); padding: 11px 11px 14px; margin-inline: -4px;
	background: var(--hoja); border-radius: 6px; color: var(--cafe-osc); text-decoration: none;
	box-shadow: 0 3px 4px rgba(47, 32, 20, .2), 0 18px 32px rgba(47, 32, 20, .34);
	transition: transform .45s var(--ease-pop), box-shadow .4s;
}
.pf-promo__card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.pf-promo__card--0 { rotate: -7deg; translate: 0 8px; }
.pf-promo__card--1 { rotate: 6deg; translate: 0 -10px; z-index: 2; }
.pf-promo__card--2 { rotate: -3deg; z-index: 3; }
.pf-promo__card--3 { rotate: 8deg; z-index: 1; }
.pf-promo__card:hover { transform: translateY(-14px) scale(1.05) rotate(-2deg); z-index: 5; box-shadow: 0 4px 6px rgba(47, 32, 20, .2), 0 30px 46px rgba(47, 32, 20, .4); }
.pf-promo__label { display: block; margin-top: 10px; text-align: center; font-family: var(--f-hand); font-size: 24px; line-height: 1; }
.pf-promo__text .pf-kicker { color: var(--rosa-claro); }
.pf-promo__text .pf-title { color: var(--hoja); font-size: clamp(36px, 4.6vw, 62px); margin-bottom: 16px; text-shadow: 0 3px 0 rgba(47, 32, 20, .22); }
.pf-promo__text .pf-lead { color: rgba(255, 251, 246, .92); }
.pf-promo__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 28px; }
.pf-promo__hand { font-size: 28px; color: var(--rosa-claro); rotate: -4deg; }
.pf-promo__d1 { width: 36px; top: 26px; left: 44%; animation: pf-twinkle 3.2s infinite; }
.pf-promo__d2 { width: 44px; bottom: 30px; left: 6%; rotate: -12deg; }
.pf-promo__d3 { width: 64px; top: -22px; right: 40px; rotate: 28deg; }
@media (max-width: 860px) {
	.pf-promo__box { grid-template-columns: 1fr; text-align: center; }
	.pf-promo__stack { min-height: 0; padding: 14px 0 6px; }
	.pf-promo__cta { justify-content: center; }
	.pf-promo__card { width: min(210px, 44%); }
	.pf-promo .pf-btn--big { padding: 16px 26px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pf-promo__card, .pf-what__card { transition: none; } }

/* ==========================================================================
   10 · REDES  (carruseles grandes de Instagram y Pinterest)
   ========================================================================== */
.pf-soc { position: relative; padding: clamp(40px, 5vw, 70px) 0 clamp(70px, 8vw, 100px); overflow-x: clip; }
.pf-soc .pf-sechead { margin-bottom: 44px; }
.pf-soc .pf-sechead .pf-lead { margin-inline: auto; text-align: center; max-width: 52ch; }
.pf-soc__row + .pf-soc__row { margin-top: clamp(40px, 5vw, 64px); }
.pf-soc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 22px; }
.pf-soc__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: var(--cafe-osc); color: var(--rosa); transition: transform .5s var(--ease-pop), border-radius .4s; }
.pf-soc__row--pin .pf-soc__badge { background: var(--salvia); color: var(--hoja); }
.pf-soc__badge .ico { width: 29px; height: 29px; }
.pf-soc__row:hover .pf-soc__badge { transform: rotate(-8deg) scale(1.06); border-radius: 50%; }
.pf-soc__handle { font-family: var(--f-hand); font-size: 36px; line-height: 1; color: var(--cafe-osc); }
.pf-soc__follow { margin-left: 6px; }
	display: grid; place-items: center; width: 50px; height: 50px; padding: 0; cursor: pointer;
	border: 1.5px solid rgba(74, 52, 34, .35); border-radius: 50%; background: var(--hoja); color: var(--cafe-osc);
	box-shadow: 0 4px 0 rgba(74, 52, 34, .25); transition: transform .25s var(--ease-pop), background .25s, box-shadow .25s, opacity .25s;
}

.pf-soc__track {
	display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 22px); overflow-x: auto; padding: 14px max(24px, calc((100vw - 1180px) / 2)) 26px;
	margin-inline: calc(50% - 50vw); scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2));
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pf-soc__track::-webkit-scrollbar { display: none; }
.pf-soc__track:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: -3px; border-radius: 12px; }
.pf-soc__slide {
	position: relative; flex: none; display: block; width: clamp(250px, 29vw, 360px); aspect-ratio: 4 / 5; scroll-snap-align: start;
	padding: 10px; background: var(--hoja); border-radius: 8px; overflow: hidden;
	box-shadow: 0 3px 4px rgba(74, 52, 34, .16), 0 16px 30px rgba(74, 52, 34, .24);
	transition: transform .45s var(--ease-pop), box-shadow .4s;
}
.pf-soc__slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; transition: transform .6s var(--ease-out); }
.pf-soc__slide:nth-child(3n+1) { rotate: -1.6deg; }
.pf-soc__slide:nth-child(3n+2) { rotate: 1.2deg; translate: 0 10px; }
.pf-soc__slide:nth-child(3n) { rotate: -.6deg; }
.pf-soc__slide:hover { transform: translateY(-10px) rotate(0deg) scale(1.02); box-shadow: 0 4px 6px rgba(74, 52, 34, .18), 0 28px 44px rgba(74, 52, 34, .32); }
.pf-soc__slide:hover img { transform: scale(1.05); }
.pf-soc__row--ig .pf-soc__slide { aspect-ratio: 1; }
.pf-soc__row--pin .pf-soc__slide { border-radius: 22px; padding: 0; }
.pf-soc__row--pin .pf-soc__slide img { border-radius: 22px; }
.pf-soc__row--pin .pf-soc__slide--0 { aspect-ratio: 3 / 4.3; }
.pf-soc__row--pin .pf-soc__slide--1 { aspect-ratio: 3 / 3.4; }
.pf-soc__row--pin .pf-soc__slide--2 { aspect-ratio: 3 / 4; }
@media (max-width: 700px) {
	.pf-soc__handle { font-size: 30px; }
	.pf-soc__slide { width: 72vw; }
	.pf-soc__follow { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pf-soc__slide, .pf-soc__slide img { transition: none; } }

/* Selector Instagram | Pinterest (solo si hay las dos redes) */
.pf-soc__tabs { display: flex; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 34px; padding: 6px; background: var(--hoja); border: 2px dashed rgba(74, 52, 34, .4); border-radius: 999px; box-shadow: 0 8px 20px rgba(74, 52, 34, .12); }
.pf-soc__tab { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px 11px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--cafe-osc); font: 700 16px/1 var(--f-body); cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease-pop); }
.pf-soc__tab .ico { width: 22px; height: 22px; }
.pf-soc__tab:hover { transform: translateY(-2px); }
.pf-soc__tab.is-on { background: var(--cafe-osc); color: var(--hoja); }
.pf-soc__tab:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 2px; }
.pf-soc__row.is-off { display: none; }
.pf-soc__tabs ~ .pf-soc__row, .pf-soc__tabs ~ .pf-soc__row + .pf-soc__row { margin-top: 0; }

/* Carrusel automático y continuo: se pausa al pasar el mouse o enfocar; sin movimiento si el sistema lo pide */
.pf-soc__track { display: block; overflow: hidden; padding: 14px 0 26px; margin-inline: calc(50% - 50vw); scroll-snap-type: none; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pf-soc__belt { display: flex; width: max-content; animation: pf-soc-run 70s linear infinite; }
.pf-soc__group { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 22px); padding-right: clamp(14px, 2vw, 22px); }
.pf-soc__track:hover .pf-soc__belt, .pf-soc__track:focus-within .pf-soc__belt { animation-play-state: paused; }
@keyframes pf-soc-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.pf-soc__track { overflow-x: auto; mask-image: none; -webkit-mask-image: none; padding-inline: 24px; margin-inline: 0; }
	.pf-soc__belt { animation: none; }
	.pf-soc__group[aria-hidden="true"] { display: none; }
}

/* Pinterest en polaroid (marco blanco, base más ancha y cinta) */
.pf-soc__row--pin .pf-soc__slide, .pf-soc__row--pin .pf-soc__slide--0, .pf-soc__row--pin .pf-soc__slide--1, .pf-soc__row--pin .pf-soc__slide--2 { aspect-ratio: 4 / 5; border-radius: 6px; padding: 10px 10px 40px; overflow: visible; }
.pf-soc__row--pin .pf-soc__slide img { border-radius: 3px; }
.pf-soc__row--pin .pf-soc__slide::before {
	content: ''; position: absolute; z-index: 2; top: -11px; left: 50%; width: 76px; height: 22px; margin-left: -38px; rotate: -4deg;
	background-color: var(--rosa); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 5px, transparent 5px 11px); opacity: .92;
	clip-path: polygon(0 0, 4% 14%, 0 28%, 4% 42%, 0 56%, 4% 70%, 0 84%, 4% 100%, 100% 100%, 96% 84%, 100% 70%, 96% 56%, 100% 42%, 96% 28%, 100% 14%, 96% 0);
}
.pf-soc__row--pin .pf-soc__slide:nth-child(even)::before { background-color: #e6cfa9; background-image: repeating-linear-gradient(90deg, var(--caramelo) 0 6px, transparent 6px 12px); rotate: 5deg; }

/* «Lo nuevo»: mismo tamaño que los carruseles de redes (el panel de Marquee queda para otros usos) */
.pf-new .marquee-gen { --marquee-ancho: clamp(250px, 29vw, 360px); --marquee-proporcion: 4 / 5; --marquee-separacion: clamp(18px, 2.4vw, 30px); padding-top: 14px; }
@media (max-width: 700px) { .pf-new .marquee-gen { --marquee-ancho: 72vw; } }

/* ==========================================================================
   7 · SOBRE MÍ  (scrapbook: fotos pegadas + texto sobre papel rasgado)
   ========================================================================== */
.pf-me { position: relative; padding: clamp(70px, 8vw, 110px) 0; }
.pf-me__grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 0; align-items: center; }

.pf-me__circle { position: relative; aspect-ratio: 1; width: min(100%, 640px); justify-self: center; }
/* Disco de papel con borde rasgado */
.pf-me__disc {
	position: absolute; inset: 0; border-radius: 50%; filter: url(#pf-rough) drop-shadow(0 22px 28px rgba(74, 52, 34, .26));
	background-color: #fffdf9; background-image: var(--paper); background-size: 320px 320px; background-blend-mode: soft-light;
}
/* Trazo punteado que da vueltas */
.pf-me__orbit { position: absolute; inset: 5.5%; border: 3px dashed var(--caramelo); border-radius: 50%; animation: pf-me-spin 48s linear infinite; }
.pf-me__orbit::after { content: ''; position: absolute; inset: 7px; border: 2px dotted rgba(185, 128, 120, .7); border-radius: 50%; animation: pf-me-spin 48s linear infinite reverse; }
@keyframes pf-me-spin { to { transform: rotate(360deg); } }
.pf-me__photo { position: absolute; inset: 10%; border-radius: 50%; overflow: hidden; border: 8px solid var(--hoja); box-shadow: 0 4px 6px rgba(74, 52, 34, .2), 0 18px 34px rgba(74, 52, 34, .3); background: var(--crema); }
.pf-me__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: scale 1.1s var(--ease-out); }
.pf-me__circle:hover .pf-me__photo img { scale: 1.06; }
.pf-me__tape { top: 2%; left: 50%; margin-left: -59px; rotate: -4deg; z-index: 3; }
.pf-me__flower { width: 104px; left: 3%; bottom: 8%; --r: -12deg; z-index: 4; }
.pf-me__sp1 { width: 32px; top: 11%; right: 10%; z-index: 4; }
.pf-me__heart { width: 38px; right: 7%; bottom: 20%; rotate: 12deg; z-index: 4; animation: pf-beat 2.8s infinite; }

/* Texto sobre papel rasgado, encimado sobre el collage */
.pf-me__paper { position: relative; margin-left: clamp(-44px, -3vw, -16px); padding: clamp(40px, 4.4vw, 62px) clamp(34px, 4vw, 58px); rotate: 1.2deg; z-index: 4; filter: drop-shadow(0 20px 26px rgba(74, 52, 34, .28)); }
.pf-me__sheet {
	position: absolute; inset: 0; background-color: #fffdf9; filter: url(#pf-rough);
}
.pf-me__paper::before { content: ''; position: absolute; z-index: 2; top: -13px; left: 14%; width: 96px; height: 26px; rotate: -5deg; background-color: #e6cfa9; background-image: repeating-linear-gradient(90deg, var(--caramelo) 0 8px, transparent 8px 16px); opacity: .92; clip-path: polygon(0 0, 4% 14%, 0 28%, 4% 42%, 0 56%, 4% 70%, 0 84%, 4% 100%, 100% 100%, 96% 84%, 100% 70%, 96% 56%, 100% 42%, 96% 28%, 100% 14%, 96% 0); }
.pf-me__text { position: relative; z-index: 1; }
.pf-me__text .pf-title { margin-bottom: 18px; }

@media (max-width: 860px) {
	.pf-me__grid { grid-template-columns: 1fr; }
	.pf-me__circle { width: min(100%, 460px); }
	.pf-me__paper { margin: -48px 6px 0; rotate: -.8deg; padding: 40px 28px 44px; }
	.pf-me__flower { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .pf-me__orbit, .pf-me__orbit::after, .pf-what__orbit, .pf-what__orbit::after { animation: none; } .pf-me__photo img { transition: none; } }

.pf-what__card--text .pf-lead { max-width: 64ch; }
@media (max-width: 700px) {
	.pf-what__gallery { grid-template-columns: 1fr; }
	.pf-what__shot { max-width: 320px; }
}


/* Popup de productos de una categoría */
button.pf-pill { font: inherit; cursor: pointer; }
.pf-catmodal { width: min(94vw, 760px); }
.pf-catmodal .pf-modal__gift { animation: none; }
.pf-catmodal .pf-modal__list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pf-catmodal .pf-modal__thumb { aspect-ratio: 1; }
.pf-catmodal .pf-modal__info h3 { font-family: var(--f-body); font-weight: 700; font-size: 17px; line-height: 1.25; margin: 0; color: var(--cafe-osc); }
.pf-catmodal__soon { margin: 18px 0 0; font-size: 26px; color: var(--rosa-osc); rotate: -2deg; }
.pf-catmodal__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--cafe-osc); text-decoration: none; border-bottom: 2px dashed var(--caramelo); padding-bottom: 2px; }
.pf-catmodal__all .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-pop); }
.pf-catmodal__all:hover .ico { transform: translateX(4px); }
@media (max-width: 700px) { .pf-catmodal .pf-modal__list { grid-template-columns: 1fr 1fr; gap: 12px; } .pf-catmodal .pf-modal__card { padding: 50px 18px 30px; } }
.pf-catmodal .pf-modal__thumb { aspect-ratio: 5 / 4; }
.pf-catmodal .pf-btn--sm { padding: 10px 14px; font-size: 14px; width: 100%; justify-content: center; }
.pf-catmodal .pf-modal__card { padding-top: 46px; }
.pf-catmodal .pf-modal__gift { width: 68px; height: 68px; margin-bottom: 10px; }
.pf-catmodal .pf-modal__gift .ico { width: 38px; height: 38px; }
@media (max-width: 700px) {
	.pf-catmodal .pf-modal__item { flex-direction: column; }
	.pf-catmodal .pf-modal__thumb { width: 100%; flex: none; aspect-ratio: 1; }
	.pf-catmodal .pf-modal__info { padding: 10px 10px 12px; }
	.pf-catmodal .pf-modal__info h3 { font-size: 15px; }
	.pf-catmodal .pf-btn--sm { padding: 9px 10px; font-size: 13px; }
	.pf-catmodal .pf-btn--sm .ico { display: none; }
}

/* Popup de categorías: textura de puntitos (cuaderno punteado) para diferenciarlo del de freebies; botón fino con precio */
.pf-catmodal .pf-modal__card { background: var(--hoja) radial-gradient(circle, rgba(174, 138, 92, .38) 1.5px, transparent 1.9px) 0 0 / 22px 22px; }
.pf-catmodal .pf-modal__card::before { border-color: var(--caramelo); opacity: .55; }
.pf-catmodal__buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pf-catmodal__price { font-family: var(--f-body); font-weight: 700; font-size: 18px; color: var(--cafe-osc); }
.pf-catmodal__btn { display: inline-block; padding: 7px 20px; border-radius: 999px; background: var(--cafe-osc); color: var(--hoja); font: 700 14px/1.2 var(--f-body); text-decoration: none; letter-spacing: .02em; box-shadow: 0 3px 0 #2f2014; transition: transform .25s var(--ease-pop), background .2s, box-shadow .2s; }
.pf-catmodal__btn:hover, .pf-catmodal__btn:focus-visible { background: var(--rosa-osc); transform: translateY(-2px); box-shadow: 0 5px 0 #2f2014; }
.pf-catmodal__btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f2014; }
.pf-catmodal__btn:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 3px; }

/* Popup de categorías: encabezado y pie fijos, solo se desplaza la lista de productos */
.pf-catmodal .pf-modal__card { display: flex; flex-direction: column; overflow: hidden; max-height: 90vh; padding-bottom: 26px; }
.pf-catmodal .pf-modal__list {
	flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 4px -6px 0; padding: 10px 6px 12px;
	scrollbar-width: thin; scrollbar-color: var(--caramelo) transparent;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}
.pf-catmodal .pf-modal__gift, .pf-catmodal .pf-modal__title, .pf-catmodal .pf-modal__text, .pf-catmodal__soon, .pf-catmodal__all { flex: none; }
.pf-catmodal__all { align-self: center; }
.pf-catmodal .pf-modal__list { grid-auto-rows: max-content; align-content: start; }
.pf-catmodal .pf-modal__thumb { flex: none; width: 100%; }

/* ==========================================================================
   PÁGINA DE CATEGORÍA  (/shop/stickers/)
   ========================================================================== */
.pf-catpage { position: relative; padding: 150px 0 clamp(90px, 10vw, 130px); min-height: 80vh;
	background-image: radial-gradient(circle, rgba(174, 138, 92, .17) 1.3px, transparent 1.7px); background-size: 24px 24px; }
.pf-catpage__bar { margin-bottom: 8px; }
.pf-catpage__back { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 999px; background: var(--hoja); border: 1.5px dashed rgba(74, 52, 34, .4); color: var(--cafe-osc); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 4px 10px rgba(74, 52, 34, .1); transition: transform .3s var(--ease-pop), background .2s; }
.pf-catpage__back .ico { width: 20px; height: 20px; transform: scaleX(-1); }
.pf-catpage__back:hover { transform: translateX(-4px); background: var(--crema); }
.pf-catpage__head { display: grid; justify-items: center; text-align: center; margin: 10px 0 34px; }
.pf-catpage__badge { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--rosa); color: var(--cafe-osc); box-shadow: 0 6px 0 var(--rosa-osc); margin-bottom: 14px; }
.pf-catpage__badge .ico { width: 42px; height: 42px; }
.pf-catpage .pf-title { font-size: clamp(46px, 7vw, 86px); }
.pf-catpage .pf-lead { max-width: 54ch; margin-inline: auto; text-align: center; }
.pf-catpage__filters { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.pf-js .pf-catpage__filters { display: flex; }
.pf-catpage__chip { padding: 10px 22px; border: 1.5px dashed rgba(74, 52, 34, .45); border-radius: 999px; background: var(--hoja); color: var(--cafe-osc); font: 700 15px/1 var(--f-body); cursor: pointer; transition: background .25s, color .25s, transform .3s var(--ease-pop); }
.pf-catpage__chip:hover { transform: translateY(-3px); }
.pf-catpage__chip.is-on { background: var(--cafe-osc); color: var(--hoja); border-style: solid; }
.pf-catpage__chip:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 3px; }
.pf-catpage__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.pf-catpage__grid [hidden] { display: none; }
.pf-prod { background: #fff; border: 1.5px solid rgba(174, 138, 92, .35); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 22px rgba(74, 52, 34, .12); transition: transform .4s var(--ease-pop), box-shadow .3s; }
.pf-prod:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 22px 38px rgba(74, 52, 34, .22); }
.pf-prod__img { aspect-ratio: 1; overflow: hidden; background: var(--crema); }
.pf-prod__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out); }
.pf-prod:hover .pf-prod__img img { scale: 1.07; }
.pf-prod__body { display: grid; gap: 4px; padding: 16px 18px 20px; }
.pf-prod__body h2 { font-family: var(--f-body); font-weight: 700; font-size: 18px; line-height: 1.25; margin: 0; color: var(--cafe-osc); }
.pf-prod__coll { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--rosa-claro); color: var(--cafe); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pf-catpage .pf-catmodal__buy { margin-top: 10px; }
.pf-catpage__foot { display: grid; justify-items: center; gap: 18px; margin-top: 56px; text-align: center; }
.pf-catpage__foot .pf-hand { color: var(--rosa-osc); rotate: -2deg; }
@media (max-width: 700px) {
	.pf-catpage { padding-top: 140px; }
	.pf-catpage__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.pf-prod { border-radius: 20px; }
	.pf-prod__body { padding: 12px 12px 14px; }
	.pf-prod__body h2 { font-size: 15px; }
}

/* Estilo «portafolio»: mosaico de fotos grandes con el nombre y el precio siempre visibles debajo */
.pf-prod__link { display: block; width: 100%; height: 100%; }
.pf-catpage__grid--portfolio { display: block; column-count: 3; column-gap: clamp(20px, 3vw, 40px); }
.pf-catpage__grid--portfolio .pf-prod { position: relative; display: block; break-inside: avoid; margin: 0 0 clamp(26px, 3.4vw, 44px); background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.pf-catpage__grid--portfolio .pf-prod:hover { transform: none; box-shadow: none; }
.pf-catpage__grid--portfolio .pf-prod__img { border-radius: 26px; box-shadow: 0 4px 6px rgba(74, 52, 34, .14), 0 18px 32px rgba(74, 52, 34, .22); transition: transform .5s var(--ease-pop), box-shadow .4s; }
.pf-catpage__grid--portfolio .pf-prod:nth-child(3n+1) .pf-prod__img { aspect-ratio: 4 / 5; rotate: -1deg; }
.pf-catpage__grid--portfolio .pf-prod:nth-child(3n+2) .pf-prod__img { aspect-ratio: 1; rotate: .8deg; }
.pf-catpage__grid--portfolio .pf-prod:nth-child(3n) .pf-prod__img { aspect-ratio: 5 / 6; rotate: -.5deg; }
.pf-catpage__grid--portfolio .pf-prod:hover .pf-prod__img { transform: translateY(-8px) rotate(0deg) scale(1.02); box-shadow: 0 6px 8px rgba(74, 52, 34, .16), 0 30px 46px rgba(74, 52, 34, .3); }
.pf-catpage__grid--portfolio .pf-prod::before { content: ''; position: absolute; z-index: 3; top: -10px; left: 50%; width: 74px; height: 22px; margin-left: -37px; rotate: -4deg; background-color: var(--rosa); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 5px, transparent 5px 11px); opacity: .92; clip-path: polygon(0 0, 4% 14%, 0 28%, 4% 42%, 0 56%, 4% 70%, 0 84%, 4% 100%, 100% 100%, 96% 84%, 100% 70%, 96% 56%, 100% 42%, 96% 28%, 100% 14%, 96% 0); pointer-events: none; }
.pf-catpage__grid--portfolio .pf-prod:nth-child(even)::before { background-color: #e6cfa9; background-image: repeating-linear-gradient(90deg, var(--caramelo) 0 6px, transparent 6px 12px); rotate: 5deg; }
.pf-catpage__grid--portfolio .pf-prod:nth-child(3n)::before { display: none; }
.pf-catpage__grid--portfolio .pf-prod__body { padding: 16px 6px 0; gap: 2px; }
.pf-catpage__grid--portfolio .pf-prod__body h2 { font-size: 19px; }
.pf-catpage__grid--portfolio .pf-prod__coll { padding: 0; background: none; color: var(--rosa-osc); font-size: 12px; }
.pf-catpage__grid--portfolio .pf-catmodal__buy { margin-top: 6px; }
@media (max-width: 900px) { .pf-catpage__grid--portfolio { column-count: 2; } }
@media (max-width: 700px) {
	.pf-catpage__grid--portfolio { column-count: 2; column-gap: 14px; }
	.pf-catpage__grid--portfolio .pf-prod { margin-bottom: 24px; }
	.pf-catpage__grid--portfolio .pf-prod__body { padding: 10px 2px 0; }
	.pf-catpage__grid--portfolio .pf-prod__body h2 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pf-catpage__grid--portfolio .pf-prod__img { transition: none; } }

/* ==========================================================================
   JOURNAL DE STICKERS  (libro abierto con stickers pegados)
   ========================================================================== */
.pf-book { width: min(1060px, 100%); margin-inline: auto; }
.pf-book__cover {
	position: relative; padding: clamp(12px, 2vw, 22px); border-radius: 26px;
	background-color: #644830; background-image: var(--paper); background-size: 320px 320px; background-blend-mode: multiply;
	box-shadow: 0 8px 0 #3b2a1b, 0 30px 50px rgba(47, 32, 20, .4);
}
.pf-book__cover::after { content: ''; position: absolute; inset: 7px; border: 2px dashed rgba(235, 222, 213, .28); border-radius: 20px; pointer-events: none; }
.pf-book__spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(47, 32, 20, .35); }
.pf-book__spread::after { content: ''; position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(50% - 26px); width: 52px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(74, 52, 34, .2) 46%, rgba(74, 52, 34, .34) 50%, rgba(74, 52, 34, .2) 54%, transparent); }
.pf-book__page {
	position: relative; min-height: clamp(520px, 52vw, 640px); padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 36px) 56px;
	background-color: #fffdf9; background-image: radial-gradient(circle, rgba(174, 138, 92, .15) 1.2px, transparent 1.6px), var(--paper); background-size: 22px 22px, 320px 320px; background-blend-mode: normal, soft-light;
}
.pf-book__page:nth-child(odd) { box-shadow: inset -22px 0 30px -18px rgba(74, 52, 34, .22); }
.pf-book__page:nth-child(even) { box-shadow: inset 22px 0 30px -18px rgba(74, 52, 34, .22); }
.pf-book__num { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; font-family: var(--f-hand); font-size: 22px; color: var(--rosa-osc); }
.pf-book__page--note { display: grid; place-items: center; align-content: center; text-align: center; gap: 14px; }
.pf-book__page--note .pf-hand { color: var(--rosa-osc); rotate: -3deg; }
.pf-book__flower { position: relative; width: 90px; --r: 10deg; }

/* con JS: solo se ve la hoja o el par de hojas actual */
.pf-book.is-js .pf-book__page { display: none; }
.pf-book.is-js .pf-book__page.is-shown { display: block; }
.pf-book.is-js .pf-book__page--note.is-shown { display: grid; }
.pf-book.is-js .pf-book__spread { grid-template-columns: repeat(2, 1fr); }
.pf-book.is-js .pf-book__spread:has(.is-shown:only-of-type) { grid-template-columns: 1fr; }
.pf-book__page.is-turn-r { animation: pf-turn-r .6s var(--ease-out); transform-origin: left center; }
.pf-book__page.is-turn-l { animation: pf-turn-l .6s var(--ease-out); transform-origin: right center; }
@keyframes pf-turn-r { from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes pf-turn-l { from { opacity: 0; transform: perspective(1200px) rotateY(14deg) translateX(-30px); } to { opacity: 1; transform: none; } }

/* stickers pegados en la hoja */
.pf-book__stickers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px 10px; }
.pf-stk { position: relative; }
.pf-stk--0 { grid-column: 1; grid-row: 1; rotate: -4deg; }
.pf-stk--1 { grid-column: 2; grid-row: 1; margin-top: 34px; rotate: 3deg; }
.pf-stk--2 { grid-column: 1 / 3; grid-row: 2; justify-self: center; width: 56%; margin-top: -4px; rotate: -2deg; }
.pf-stk__link { position: relative; display: grid; gap: 6px; text-decoration: none; color: var(--cafe-osc); transition: transform .45s var(--ease-pop); }
.pf-stk__link:hover { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
.pf-stk__link:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 6px; border-radius: 14px; }
.pf-stk__img { display: block; aspect-ratio: 1; overflow: hidden; border: 6px solid #fff; box-shadow: 0 2px 3px rgba(74, 52, 34, .2), 0 10px 18px rgba(74, 52, 34, .24); background: var(--crema); }
.pf-stk__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-stk--0 .pf-stk__img { border-radius: 20px; }
.pf-stk--1 .pf-stk__img { border-radius: 50%; }
.pf-stk--2 .pf-stk__img { border-radius: 20px 20px 50% 50% / 20px 20px 36% 36%; }
/* esquina que se despega */
.pf-stk--0 .pf-stk__img::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(135deg, transparent 50%, rgba(255, 251, 246, .95) 50%, #efe3d6); box-shadow: -3px -3px 6px rgba(74, 52, 34, .18); border-top-left-radius: 8px; }
.pf-stk--0 .pf-stk__img, .pf-stk--2 .pf-stk__img { position: relative; }
.pf-stk__tape { position: absolute; z-index: 3; top: -12px; left: 50%; width: 76px; height: 22px; margin-left: -38px; rotate: -5deg; background-color: var(--rosa); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 5px, transparent 5px 11px); opacity: .92; clip-path: polygon(0 0, 4% 14%, 0 28%, 4% 42%, 0 56%, 4% 70%, 0 84%, 4% 100%, 100% 100%, 96% 84%, 100% 70%, 96% 56%, 100% 42%, 96% 28%, 100% 14%, 96% 0); }
.pf-stk--1 .pf-stk__tape { background-color: #e6cfa9; background-image: repeating-linear-gradient(90deg, var(--caramelo) 0 6px, transparent 6px 12px); rotate: 6deg; left: 20%; }
.pf-stk--2 .pf-stk__tape { display: none; }
.pf-stk__note { font-size: 24px; line-height: 1; text-align: center; color: var(--cafe-osc); }
.pf-stk__tag { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 14px; }
.pf-stk__tag b { font-family: var(--f-body); font-weight: 700; color: var(--cafe-osc); }
.pf-stk__tag i { font-style: normal; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: var(--cafe-osc); color: var(--hoja); font-size: 12px; letter-spacing: .04em; }

/* navegación del libro */
.pf-book__nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; }
.pf-book__count { min-width: 72px; text-align: center; font: 700 16px/1 var(--f-body); color: var(--cafe-osc); }
.pf-book__arrow { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; cursor: pointer; border: 1.5px solid rgba(74, 52, 34, .35); border-radius: 50%; background: var(--hoja); color: var(--cafe-osc); box-shadow: 0 4px 0 rgba(74, 52, 34, .25); transition: transform .25s var(--ease-pop), background .25s, color .25s, opacity .25s; }
.pf-book__arrow .ico { width: 24px; height: 24px; }
.pf-book__arrow--prev .ico { transform: scaleX(-1); }
.pf-book__arrow:hover:not(:disabled) { background: var(--cafe-osc); color: var(--hoja); transform: translateY(-3px); }
.pf-book__arrow:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 3px; }
.pf-book__arrow:disabled { opacity: .35; cursor: default; }
html:not(.pf-js) .pf-book__nav { display: none; }

@media (max-width: 800px) {
	.pf-book.is-js .pf-book__spread { grid-template-columns: 1fr; }
	.pf-book__spread::after { display: none; }
	.pf-book__page { min-height: 0; padding-bottom: 60px; }
	.pf-book__stickers { gap: 6px 8px; }
	.pf-stk__note { font-size: 20px; }
	.pf-stk--2 { width: 62%; }
}
@media (prefers-reduced-motion: reduce) { .pf-book__page.is-turn-r, .pf-book__page.is-turn-l { animation: none; } .pf-stk__link { transition: none; } }

.pf-book__page--note { align-content: center; }
.pf-book__page[hidden] { display: none; }

/* Páginas de categoría: todo sube para que se vea en una sola pantalla (la tarjeta de freebies no se muestra aquí, solo el botón de abajo) */
.pf-catpage { padding-top: 84px; padding-bottom: 70px; min-height: 0; }
.pf-catpage__bar { position: absolute; top: 84px; left: 0; margin: 0; z-index: 5; }
.pf-catpage .pf-wrap { position: relative; }
.pf-catpage__head { margin: 0 0 14px; }
.pf-catpage__badge { width: 48px; height: 48px; margin-bottom: 6px; box-shadow: 0 4px 0 var(--rosa-osc); }
.pf-catpage__badge .ico { width: 28px; height: 28px; }
.pf-catpage .pf-kicker { margin-bottom: 0; }
.pf-catpage .pf-title { font-size: clamp(40px, 5vw, 60px); margin-bottom: 6px; }
.pf-catpage .pf-lead { font-size: 16px; line-height: 1.4; margin-top: 0; }
.pf-catpage__filters { margin-bottom: 20px; }
.pf-catpage__chip { padding: 8px 18px; font-size: 14px; }
.pf-catpage .pf-book__page { min-height: clamp(430px, 40vw, 500px); padding-top: 26px; }
.pf-catpage .pf-book__nav { margin-top: 18px; }
.pf-catpage__foot { margin-top: 36px; }
@media (max-width: 1100px) { .pf-catpage__bar { position: static; margin-bottom: 8px; } }
@media (max-width: 700px) { .pf-catpage { padding-top: 78px; } }

/* Escritorio: tres stickers en fila por hoja, para que el libro quepa en una pantalla */
@media (min-width: 801px) {
	.pf-catpage__badge { display: none; }
	.pf-catpage { padding-top: 70px; }
	.pf-catpage__bar { top: 70px; }
	.pf-catpage .pf-book__page { min-height: 0; padding: 38px 26px 54px; }
	.pf-catpage .pf-book__stickers { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 8px 14px; align-items: start; }
	.pf-catpage .pf-stk--0 { grid-column: 1; grid-row: 1; }
	.pf-catpage .pf-stk--1 { grid-column: 2; grid-row: 1; margin-top: 28px; }
	.pf-catpage .pf-stk--2 { grid-column: 3; grid-row: 1; width: auto; justify-self: stretch; margin-top: 6px; }
	.pf-catpage .pf-stk__img { border-width: 5px; }
	.pf-catpage .pf-stk__note { font-size: 19px; }
	.pf-catpage .pf-stk__tag { flex-wrap: wrap; font-size: 13px; }
	.pf-catpage .pf-stk__tape { width: 58px; height: 18px; margin-left: -29px; top: -10px; }
	.pf-catpage .pf-book__page--note { min-height: 280px; }
}
@media (min-width: 1200px) {
	.pf-catpage .pf-book { width: min(1200px, 100%); }
	.pf-catpage .pf-book__page { padding: 54px 30px 62px; }
	.pf-catpage .pf-stk__note { font-size: 22px; }
	.pf-catpage .pf-stk__tag { font-size: 14px; }
}

/* Libreta más cuadrada: dos columnas por hoja (dos stickers arriba y uno abajo), libro más angosto y más alto */
.pf-catpage__foot { margin-top: 26px; gap: 0; }
@media (min-width: 801px) {
	.pf-catpage .pf-book { width: min(860px, 100%); }
	.pf-catpage .pf-book__page { min-height: 0; padding: 36px 30px 48px; }
	.pf-catpage .pf-book__stickers { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 4px 18px; }
	.pf-catpage .pf-stk--0 { grid-column: 1; grid-row: 1; }
	.pf-catpage .pf-stk--1 { grid-column: 2; grid-row: 1; margin-top: 22px; }
	.pf-catpage .pf-stk--2 { grid-column: 1 / 3; grid-row: 2; width: 46%; justify-self: center; margin-top: 0; }
	.pf-catpage .pf-stk__note { font-size: 20px; }
	.pf-catpage .pf-stk__tag { flex-wrap: nowrap; font-size: 13px; }
	.pf-catpage .pf-stk__img { border-width: 6px; }
	.pf-catpage .pf-stk__tape { width: 70px; height: 20px; margin-left: -35px; top: -11px; }
	.pf-catpage .pf-book__page--note { min-height: 0; }
}
@media (min-width: 1200px) {
	.pf-catpage .pf-book { width: min(860px, 100%); }
	.pf-catpage .pf-book__page { padding: 36px 30px 48px; }
	.pf-catpage .pf-stk__note { font-size: 20px; }
	.pf-catpage .pf-stk__tag { font-size: 13px; }
}
@media (min-width: 801px) {
	.pf-catpage .pf-book__page { padding: 28px 30px 40px; }
	.pf-catpage .pf-stk--1 { margin-top: 16px; }
	.pf-catpage .pf-stk--2 { width: 40%; }
	.pf-catpage .pf-book__num { bottom: 10px; font-size: 20px; }
	.pf-catpage .pf-book__nav { margin-top: 12px; }
	.pf-catpage .pf-book__arrow { width: 44px; height: 44px; }
	.pf-catpage__filters { margin-bottom: 16px; }
}
@media (min-width: 801px) {
	.pf-catpage { padding-top: 56px; }
	.pf-catpage__bar { top: 56px; }
	.pf-catpage .pf-title { font-size: 52px; }
	.pf-catpage .pf-book__page { padding: 24px 30px 36px; }
	.pf-catpage .pf-stk--2 { margin-top: -12px; }
	.pf-catpage .pf-book__nav { margin-top: 10px; }
}
/* Escritorio ancho: el botón a Redbubble sube a la esquina superior derecha (espejo de «Back») para que todo quepa en pantalla */
@media (min-width: 1100px) {
	.pf-catpage__foot { position: absolute; top: 56px; right: 0; margin: 0; z-index: 5; }
	.pf-catpage__foot .pf-btn { padding: 11px 22px; font-size: 15px; }
	.pf-catpage { padding-bottom: 60px; }
}

/* Bombillito verde que titila junto a «Available now» */
.pf-catpage .pf-kicker::before { display: none; }
.pf-live { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6ffd9 0 12%, #63c46f 45%, #2f8f45 100%); box-shadow: 0 0 0 2px rgba(255, 251, 246, .9), 0 0 10px 3px rgba(99, 196, 111, .7); animation: pf-live-blink 1.6s ease-in-out infinite; }
.pf-live::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(99, 196, 111, .55); animation: pf-live-ring 1.6s ease-out infinite; }
@keyframes pf-live-blink { 0%, 100% { opacity: 1; filter: brightness(1.15); } 50% { opacity: .45; filter: brightness(.8); } }
@keyframes pf-live-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pf-live, .pf-live::after { animation: none; } }
/* Bombillito completamente flat: círculo verde liso que solo titila */
.pf-live { width: 12px; height: 12px; background: #4caf62; box-shadow: none; filter: none; animation: pf-live-flat 1.4s steps(1, end) infinite; }
.pf-live::after { display: none; }
@keyframes pf-live-flat { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } }
/* Bombillito flat: titila suave y de él sale una onda lisa */
.pf-live { animation: pf-live-soft 2s ease-in-out infinite; }
.pf-live::after { display: block; inset: 0; border: 2px solid #4caf62; box-shadow: none; animation: pf-live-wave 2s ease-out infinite; }
@keyframes pf-live-soft { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes pf-live-wave { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pf-live, .pf-live::after { animation: none; } .pf-live::after { display: none; } }

/* Texto solo para lectores de pantalla */
.pf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Accesibilidad: contraste de texto (mínimo 4.5:1 en texto pequeño, 3:1 en texto grande) */
:root { --rosa-txt: #8a4f46; }
.pf-sign, .pf-catmodal__soon, .pf-book__num, .pf-book__page--note .pf-hand, .pf-catpage__grid--portfolio .pf-prod__coll, .pf-catpage__foot .pf-hand { color: var(--rosa-txt); }
.pf-promo__box { background-color: #5f6e68; box-shadow: 0 6px 0 #48544f, 0 28px 50px rgba(47, 32, 20, .3); }
.pf-promo__text .pf-kicker { color: var(--hoja); }
.pf-promo__text .pf-lead { color: var(--hoja); }

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
/* Botón de pausa del movimiento (junto al selector de idioma) */
.pf-pause { position: fixed; top: 56px; right: 140px; z-index: 97; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; border: 2px dashed rgba(174, 138, 92, .8); border-radius: 50%; background: rgba(255, 251, 246, .94); color: var(--cafe-osc); box-shadow: 0 8px 18px rgba(47, 32, 20, .22); transition: transform .3s var(--ease-pop), background .2s, color .2s; }
.pf-pause:hover { transform: translateY(-2px); background: var(--crema); }
.pf-pause[aria-pressed="true"] { background: var(--cafe-osc); color: var(--hoja); }
.pf-pause__i { width: 20px; height: 20px; }
.pf-pause__i--play { display: none; }
.pf-pause[aria-pressed="true"] .pf-pause__i--pause { display: none; }
.pf-pause[aria-pressed="true"] .pf-pause__i--play { display: block; }
html:not(.pf-js) .pf-pause { display: none; }

/* Con la pausa activada se detiene todo el movimiento continuo */
.pf-paused .annbar__pista, .pf-paused .annbar__grupo,
.pf-paused .marquee-gen__pista, .pf-paused .marquee-gen__grupo,
.pf-paused .pf-soc__belt,
.pf-paused .pf-me__orbit, .pf-paused .pf-me__orbit::after,
.pf-paused .pf-what__orbit, .pf-paused .pf-what__orbit::after,
.pf-paused .pf-live, .pf-paused .pf-live::after,
.pf-paused .pf-sparkle, .pf-paused .pf-gift, .pf-paused .pf-gift__link,
.pf-paused .pf-quote__mark, .pf-paused .pf-what__note svg, .pf-paused .pf-me__heart,
.pf-paused .pf-modal__gift { animation-play-state: paused !important; }

/* Foco visible en todo lo interactivo (valor de reserva de baja especificidad) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 3px; }

/* Objetivos táctiles más cómodos en celular */
@media (max-width: 700px) {
	.pf-catpage__chip { min-height: 44px; padding-inline: 20px; }
	.pf-catmodal__btn { min-height: 36px; display: inline-grid; place-items: center; padding-inline: 22px; }
	.pf-pause { right: 132px; }
}

.pf-annbar-wrap { display: contents; }

/* El botón de pausa vive dentro de los carruseles (Lo nuevo y Redes) */
.pf-pause { position: static; top: auto; right: auto; z-index: auto; flex: none; box-shadow: 0 4px 10px rgba(47, 32, 20, .16); }
.pf-new__tools { display: flex; align-items: center; gap: 16px; }
.pf-soc__top .pf-pause { margin-left: auto; }
@media (max-width: 700px) { .pf-pause { right: auto; } }

.pf-pause-row { display: flex; justify-content: center; margin-top: 4px; }
.pf-new .pf-pause-row { margin-top: 10px; }

/* ==========================================================================
   Stickers: sin efectos al pasar el mouse (solo en los botones) + foto en grande
   ========================================================================== */
.pf-open { display: block; width: 100%; padding: 0; font: inherit; color: inherit; cursor: zoom-in; position: relative; }
.pf-prod__img .pf-open { height: 100%; border: 0; background: none; }
.pf-zoom { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 251, 246, .94); color: var(--cafe-osc); box-shadow: 0 2px 6px rgba(47, 32, 20, .25); pointer-events: none; }
.pf-zoom svg { width: 16px; height: 16px; }
.pf-stk__buy { display: inline-block; padding: 3px 14px; border-radius: 999px; background: var(--cafe-osc); color: var(--hoja); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 3px 0 #2f2014; transition: transform .25s var(--ease-pop), background .2s, box-shadow .2s; }
.pf-stk__buy:hover, .pf-stk__buy:focus-visible { background: var(--rosa-osc); transform: translateY(-2px); box-shadow: 0 5px 0 #2f2014; }
.pf-stk__buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f2014; }
.pf-stk { display: grid; gap: 6px; }
/* nada se mueve al pasar el mouse sobre las fotos */
.pf-prod, .pf-prod:hover { transform: none; }
.pf-prod:hover { box-shadow: 0 10px 22px rgba(74, 52, 34, .12); }
.pf-prod:hover .pf-prod__img img, .pf-prod__img img { scale: 1; transition: none; }
.pf-catpage__grid--portfolio .pf-prod:hover { box-shadow: none; }
.pf-catpage__grid--portfolio .pf-prod:hover .pf-prod__img { transform: none; box-shadow: 0 4px 6px rgba(74, 52, 34, .14), 0 18px 32px rgba(74, 52, 34, .22); }

/* Foto en grande */
.pf-lightbox { width: min(94vw, 760px); }
.pf-lightbox .pf-modal__card { display: grid; gap: 14px; padding: 18px 18px 22px; background: var(--hoja) radial-gradient(circle, rgba(174, 138, 92, .15) 1.2px, transparent 1.6px) 0 0 / 22px 22px; max-height: 94vh; overflow-y: auto; }
.pf-lightbox .pf-modal__x { z-index: 5; }
.pf-lightbox__stage { position: relative; display: grid; place-items: center; background: var(--crema); border-radius: 18px; overflow: hidden; }
.pf-lightbox__img { display: block; width: 100%; max-height: 64vh; object-fit: contain; }
.pf-lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; left: 10px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer; border: 1.5px solid rgba(74, 52, 34, .35); border-radius: 50%; background: rgba(255, 251, 246, .95); color: var(--cafe-osc); box-shadow: 0 4px 0 rgba(74, 52, 34, .25); transition: transform .25s var(--ease-pop), background .2s, color .2s; }
.pf-lightbox__nav .ico { width: 24px; height: 24px; }
.pf-lightbox__nav--prev .ico { transform: scaleX(-1); }
.pf-lightbox__nav:not(.pf-lightbox__nav--prev) { left: auto; right: 10px; }
.pf-lightbox__nav:hover { background: var(--cafe-osc); color: var(--hoja); }
.pf-lightbox__nav:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 3px; }
.pf-lightbox__info { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 2px 8px 0; }
.pf-lightbox__coll { margin: 0; padding: 2px 12px; border-radius: 999px; background: var(--rosa-claro); color: var(--cafe); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pf-lightbox__name { margin: 0; font-size: 34px; line-height: 1.05; color: var(--cafe-osc); }
.pf-lightbox .pf-catmodal__buy { gap: 20px; margin-top: 8px; }
.pf-lightbox .pf-catmodal__price { font-size: 22px; }
.pf-lightbox .pf-catmodal__btn { padding: 9px 30px; font-size: 16px; }
.pf-lightbox [hidden] { display: none; }
@media (max-width: 700px) { .pf-lightbox__img { max-height: 54vh; } .pf-lightbox__name { font-size: 28px; } .pf-lightbox__nav { width: 40px; height: 40px; } }
.pf-stk--1 .pf-zoom { top: 15%; right: 15%; }
.pf-stk--2 .pf-zoom { top: 6px; right: 12%; }

/* Botón de cerrar de los popups: rosado de base, marrón al pasar el mouse o enfocar */
.pf-modal__x { background: var(--rosa); color: var(--cafe-osc); }
.pf-modal__x:hover, .pf-modal__x:focus-visible { background: var(--cafe-osc); color: var(--hoja); }

/* Controles del libro un poco más despegados del borde */
.pf-catpage .pf-book__nav { margin-top: 26px; }

/* ==========================================================================
   TENDEDERO  (totebags colgados de una cuerda con pinzas de madera)
   ========================================================================== */
.pf-line { position: relative; width: min(1000px, 100%); margin-inline: auto; padding: 0 22px; }
.pf-line::before, .pf-line::after {
	content: ''; position: absolute; top: -8px; bottom: 6px; width: 14px; border-radius: 8px;
	background: linear-gradient(90deg, #a97f52, #c9a06b 45%, #a97f52); box-shadow: 0 4px 8px rgba(47, 32, 20, .3);
}
.pf-line::before { left: 0; }
.pf-line::after { right: 0; }
.pf-line__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 292px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 292' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q50 30 100 8' fill='none' stroke='%23a98660' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 8Q50 30 100 8' fill='none' stroke='%23f1e3cb' stroke-width='4' stroke-dasharray='5 7' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 100% 292px; background-repeat: repeat-y; }
.pf-line__grid [hidden] { display: none; }
.pf-line__item { --rope: 14px; --tilt: -2deg; position: relative; display: grid; justify-items: center; align-content: start; padding: 0 12px; }
.pf-line__item--1 { --rope: 19px; --tilt: 1.5deg; }
.pf-line__item--2 { --tilt: -1deg; }
.pf-line__pin { position: absolute; z-index: 4; top: calc(var(--rope) - 5px); left: 50%; width: 15px; height: 38px; margin-left: -7px; border-radius: 3px 3px 6px 6px; background: linear-gradient(90deg, #d9b077 0 45%, #8a5f33 45% 55%, #d9b077 55%); box-shadow: 0 3px 5px rgba(47, 32, 20, .35); }
.pf-line__pin::after { content: ''; position: absolute; left: -1px; right: -1px; top: 38%; height: 5px; background: #9a9a92; border-radius: 2px; }
.pf-line__photo { position: relative; display: block; width: min(150px, 80%); aspect-ratio: 4 / 5; margin-top: calc(var(--rope) + 8px); padding: 0; border: 5px solid #fff; border-radius: 3px; background: var(--crema); cursor: zoom-in; transform-origin: 50% 0; rotate: var(--tilt); box-shadow: 0 3px 5px rgba(74, 52, 34, .22), 0 12px 18px rgba(74, 52, 34, .26); }
.pf-line__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-line__name { margin-top: 12px; font-size: 23px; line-height: 1; text-align: center; color: var(--cafe-osc); }
.pf-line__tag { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.pf-line__tag b { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cafe-osc); }
.pf-line__buy { display: inline-block; padding: 3px 16px; border-radius: 999px; background: var(--cafe-osc); color: var(--hoja); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 3px 0 #2f2014; transition: transform .25s var(--ease-pop), background .2s, box-shadow .2s; }
.pf-line__buy:hover, .pf-line__buy:focus-visible { background: var(--rosa-osc); transform: translateY(-2px); box-shadow: 0 5px 0 #2f2014; }
.pf-line__buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f2014; }
@media (max-width: 700px) {
	.pf-line { padding: 0 16px; }
	.pf-line::before, .pf-line::after { width: 10px; }
	.pf-line__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 282px; }
	.pf-line__item, .pf-line__item--1 { --rope: 16px; padding: 0 6px; }
	.pf-line__photo { width: min(128px, 84%); }
	.pf-line__name { font-size: 19px; }
	.pf-line__tag { gap: 6px; }
}
@media (max-width: 700px) { .pf-line__grid { background-size: 100% 282px; } }


/* Tendedero: fotos más grandes */
.pf-line__grid { grid-auto-rows: 320px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 320' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q50 30 100 8' fill='none' stroke='%23a98660' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 8Q50 30 100 8' fill='none' stroke='%23f1e3cb' stroke-width='4' stroke-dasharray='5 7' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 100% 320px; }
.pf-line__photo { width: min(176px, 84%); }
.pf-line__name { font-size: 25px; }
@media (max-width: 700px) {
	.pf-line__grid { grid-auto-rows: 306px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 306' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q50 30 100 8' fill='none' stroke='%23a98660' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 8Q50 30 100 8' fill='none' stroke='%23f1e3cb' stroke-width='4' stroke-dasharray='5 7' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 100% 306px; }
	.pf-line__photo { width: min(148px, 90%); }
	.pf-line__name { font-size: 20px; }
}


/* ==========================================================================
   CARPETA  (libretas en fundas de plástico, con pestañas por colección)
   ========================================================================== */
.pf-binder { position: relative; width: min(1040px, 100%); margin-inline: auto; padding-right: 100px; }
.pf-binder__cover {
	position: relative; padding: 18px 18px 18px 64px; border-radius: 18px;
	background-color: #644830; background-image: var(--paper); background-size: 320px 320px; background-blend-mode: multiply;
	box-shadow: 0 8px 0 #3b2a1b, 0 30px 50px rgba(47, 32, 20, .4);
}
.pf-binder__cover::after { content: ''; position: absolute; inset: 7px; border: 2px dashed rgba(235, 222, 213, .3); border-radius: 13px; pointer-events: none; }
.pf-binder__ring { position: absolute; z-index: 5; left: 22px; width: 76px; height: 22px; border: 5px solid #cfd0ca; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(60, 60, 55, .25)); box-shadow: 0 3px 4px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(255, 255, 255, .6); pointer-events: none; }
.pf-binder__ring--0 { top: 16%; } .pf-binder__ring--1 { top: 50%; } .pf-binder__ring--2 { top: 84%; }
.pf-binder__page {
	position: relative; padding: 20px 22px 20px 34px; border-radius: 6px;
	background-color: #fffdf9; background-image: radial-gradient(circle, rgba(174, 138, 92, .16) 1.2px, transparent 1.6px), var(--paper); background-size: 22px 22px, 320px 320px; background-blend-mode: normal, soft-light;
	box-shadow: inset 14px 0 18px -12px rgba(74, 52, 34, .3);
}
.pf-binder__grid {
	list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 262px; gap: 0 14px; min-height: 524px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='3' y='3' width='94' height='94' rx='7' fill='%23ffffff' fill-opacity='.35' stroke='%23b99e7c' stroke-opacity='.55' stroke-width='1.6' stroke-dasharray='6 5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: calc(25% - 10.5px) 262px; background-repeat: repeat; background-position: 0 0;
}
.pf-binder__grid [hidden] { display: none; }
.pf-bind__item { position: relative; padding: 4px 0; }
.pf-bind__sleeve { position: relative; height: 100%; padding: 14px 12px 0 18px; display: grid; grid-template-rows: 1fr auto; border-radius: 7px; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .4)); border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 12px rgba(74, 52, 34, .2), inset 0 0 0 1px rgba(174, 138, 92, .25); overflow: hidden; }
/* perforaciones de la funda */
.pf-bind__sleeve::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 6px; background: radial-gradient(circle, rgba(74, 52, 34, .35) 0 2.2px, transparent 2.6px) 0 0 / 6px 30px repeat-y; pointer-events: none; }
.pf-bind__nb { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: none; cursor: zoom-in; align-self: stretch; }
.pf-bind__nb img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 3px; filter: drop-shadow(0 4px 6px rgba(47, 32, 20, .35)); }
.pf-bind__slip { margin: 6px -12px 0 -18px; padding: 7px 10px 8px 22px; display: grid; gap: 3px; justify-items: center; text-align: center; background: #fff; border-top: 1.5px solid rgba(174, 138, 92, .35); }
.pf-bind__name { font-size: 18px; line-height: 1; color: var(--cafe-osc); }
.pf-bind__tag { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pf-bind__tag b { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--cafe-osc); }
.pf-bind__buy { display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--cafe-osc); color: var(--hoja); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 3px 0 #2f2014; transition: transform .25s var(--ease-pop), background .2s, box-shadow .2s; }
.pf-bind__buy:hover, .pf-bind__buy:focus-visible { background: var(--rosa-osc); transform: translateY(-2px); box-shadow: 0 5px 0 #2f2014; }
.pf-bind__buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f2014; }
/* pestañas de colección (filtros) */
.pf-binder__tabs { position: absolute; z-index: 6; right: 0; top: 44px; display: grid; gap: 8px; }
.pf-binder__tab { width: 104px; min-height: 46px; padding: 0 14px 0 16px; border: 0; border-radius: 0 12px 12px 0; text-align: left; font: 700 15px/1.1 var(--f-body); color: var(--cafe-osc); cursor: pointer; background: var(--hoja); box-shadow: 4px 4px 8px rgba(47, 32, 20, .28); translate: -14px 0; transition: translate .25s var(--ease-pop), filter .2s; }
.pf-binder__tab--0 { background: #f3c9c1; } .pf-binder__tab--1 { background: #d4e6d8; } .pf-binder__tab--2 { background: #f7e9a9; } .pf-binder__tab--3 { background: #dccdea; }
.pf-binder__tab:hover { translate: -4px 0; }
.pf-binder__tab.is-on { translate: 0 0; width: 112px; box-shadow: 5px 5px 10px rgba(47, 32, 20, .34); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pf-binder__tab:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 2px; }
@media (max-width: 900px) {
	.pf-binder { padding-right: 0; padding-top: 52px; }
	.pf-binder__tabs { right: auto; left: 16px; top: 0; display: flex; gap: 6px; }
	.pf-binder__tab { width: auto; min-height: 44px; padding: 0 16px; border-radius: 12px 12px 0 0; translate: 0 8px; box-shadow: 0 -3px 6px rgba(47, 32, 20, .2); }
	.pf-binder__tab:hover { translate: 0 4px; }
	.pf-binder__tab.is-on { translate: 0 0; width: auto; }
}
@media (max-width: 760px) {
	.pf-binder__cover { padding: 14px 12px 14px 44px; }
	.pf-binder__ring { left: 10px; width: 56px; height: 18px; border-width: 4px; }
	.pf-binder__page { padding: 14px 10px 14px 20px; }
	.pf-binder__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 250px; gap: 0 10px; min-height: 500px; background-size: calc(50% - 5px) 250px; }
	.pf-bind__name { font-size: 16px; }
}
/* Carpeta: fundas a todo el alto de su hueco y huecos vacíos alineados */
.pf-bind__item { display: flex; }
.pf-bind__sleeve { flex: 1; height: auto; min-width: 0; }
.pf-binder__grid { background-size: calc(25% + 3.5px) 262px; }
@media (max-width: 760px) { .pf-binder__grid { background-size: calc(50% + 5px) 250px; } }
.pf-binder__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-bind__tag { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 760px) {
	.pf-binder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pf-bind__sleeve { padding: 12px 8px 0 14px; }
	.pf-bind__slip { margin: 6px -8px 0 -14px; padding: 6px 6px 8px 18px; }
	.pf-bind__tag b { font-size: 13px; }
}

/* Texto final de la página de categoría (SEO) y descripción en la foto en grande */
.pf-lightbox__desc { margin: 4px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--cafe); }


/* Descripción corta con más aire: lejos de los botones, del título y del contenedor de productos */
.pf-catpage .pf-title { margin-bottom: 14px; }
.pf-catpage .pf-lead { max-width: 44ch; margin: 16px auto 0; }
.pf-catpage__head { margin-bottom: 30px; }

/* Las sombras de los carruseles ya no se cortan: el contenedor recorta (overflow), así que se le da aire abajo y se compensa con margen negativo */
.pf-soc__track { padding-top: 24px; padding-bottom: 72px; margin-bottom: -46px; }
.pf-new .marquee-gen { padding-top: 24px; padding-bottom: 72px; margin-bottom: -46px; }
@media (prefers-reduced-motion: reduce) { .pf-soc__track { padding-bottom: 72px; } }

/* Fotos de producto en 4:5 (1600 × 2000): se ven completas. El círculo del diario sigue cuadrado y recorta el centro. */
.pf-prod__img { aspect-ratio: 4 / 5; }
.pf-stk--0 .pf-stk__img, .pf-stk--2 .pf-stk__img { aspect-ratio: 4 / 5; }
.pf-stk--2 { width: 50%; }

/* Diario de stickers: se acerca la foto para que se vea el sticker del centro (la ampliación muestra la foto completa) */
.pf-stk__img img { transform: scale(1.7); transform-origin: 47% 48%; }

/* Diario: dos stickers por página, en zigzag y más grandes */
.pf-catpage .pf-book__stickers { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px 0; align-content: start; }
.pf-catpage .pf-book__stickers .pf-stk--0, .pf-catpage .pf-book__stickers .pf-stk--1 { grid-column: 1; grid-row: auto; width: 64%; margin-top: 0; }
.pf-catpage .pf-book__stickers .pf-stk--0 { justify-self: start; rotate: -3deg; }
.pf-catpage .pf-book__stickers .pf-stk--1 { justify-self: end; rotate: 3deg; margin-top: -4px; }
@media (max-width: 800px) {
	.pf-catpage .pf-book__stickers .pf-stk--0, .pf-catpage .pf-book__stickers .pf-stk--1 { width: 52%; }
}

/* Ampliación del producto: slider de fotos (mockup, primer plano, medidas) */
.pf-lightbox__stage { aspect-ratio: auto; }
.pf-lightbox__track { display: flex; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pf-lightbox__track::-webkit-scrollbar { display: none; }
.pf-lightbox__track:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: -3px; border-radius: 18px; }
.pf-lightbox__slide { flex: 0 0 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.pf-lightbox__slide img { display: block; width: 100%; max-height: 58vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pf-lightbox__tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: rgba(255, 251, 246, .92); color: var(--cafe-osc); font: 700 12px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(74, 52, 34, .18); pointer-events: none; }
.pf-lightbox__nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.pf-lightbox__dots { position: absolute; left: 50%; bottom: 12px; z-index: 2; translate: -50% 0; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 251, 246, .88); box-shadow: 0 2px 8px rgba(74, 52, 34, .2); }
.pf-lightbox__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(74, 52, 34, .28); cursor: pointer; transition: width .35s var(--ease-pop), background .25s; }
.pf-lightbox__dot:hover { background: rgba(74, 52, 34, .5); }
.pf-lightbox__dot[aria-current="true"] { width: 28px; background: var(--rosa-osc); }
.pf-lightbox__dot:focus-visible { outline: 3px solid var(--rosa-osc); outline-offset: 3px; }
@media (max-width: 700px) { .pf-lightbox__slide img { max-height: 54vh; } }
@media (prefers-reduced-motion: reduce) { .pf-lightbox__dot { transition: none; } }

/* Ventanas de producto: el borde punteado solo va en los laterales, para no cruzarse con el precio y el botón */
.pf-lightbox .pf-modal__card::before, .pf-catmodal .pf-modal__card::before { border-top: 0; border-bottom: 0; border-radius: 0; inset: 0 10px; }

/* Ampliación: más aire entre la foto, el nombre, la descripción y el botón */
.pf-lightbox .pf-modal__card { gap: 20px; }
.pf-lightbox__info { gap: 10px; padding-top: 4px; }
.pf-lightbox__desc { margin-top: 2px; }
.pf-lightbox .pf-catmodal__buy { margin-top: 14px; }

/* Sin puntos de control sobre la foto: la etiqueta indica la posición (p. ej. «Close-up · 2/3») */
.pf-lightbox__dots { display: none !important; }

/* Lista de productos: nombre y precio de cada tarjeta a 16 px */
.pf-prod__body h2 { font-size: 16px; }
.pf-prod .pf-catmodal__price { font-size: 16px; }
@media (max-width: 700px) { .pf-prod__body h2 { font-size: 16px; } }

/* Texto de variantes junto al botón: interlineado compacto */
.pf-catmodal__price { line-height: 1.15; }

/* Carrusel de la portada: el control de pausa más cerca de las fotos */
.pf-new .pf-pause-row { margin-top: -22px; position: relative; z-index: 2; }
/* Misma separación del control de pausa en el carrusel de redes */
.pf-soc .pf-pause-row { margin-top: 15px; }

/* Móvil: el sello de «favorito» más pequeño y por debajo del listón de Star product */
@media (max-width: 600px) {
	.pf-star__badge { width: 92px; height: 92px; top: 38px; right: 22px; }
}

/* Móvil: en la ampliación, el texto de variantes centrado sobre el botón */
@media (max-width: 600px) {
	.pf-lightbox .pf-catmodal__buy { flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
	.pf-lightbox .pf-catmodal__price { font-size: 16px; line-height: 1.2; }
	.pf-lightbox .pf-catmodal__btn { min-width: 160px; justify-content: center; }
}

/* Móvil: fotos de la ampliación más bajas para que el texto y el botón queden a la vista */
@media (max-width: 600px) {
	.pf-lightbox__slide img { max-height: 38vh; }
	.pf-lightbox .pf-modal__card { gap: 14px; padding: 14px 14px 18px; }
}

/* Selector de idioma: en escritorio igual que siempre; en móvil, una pestaña café pegada al borde derecho que se abre al tocarla */
.pf-lang__opts { display: contents; }
.pf-lang__toggle { display: none; }
@media (max-width: 700px) {
	.pf-lang { right: 0; padding: 0; gap: 0; align-items: stretch; background: var(--cafe-osc); backdrop-filter: none; -webkit-backdrop-filter: none; border: 2px dashed rgba(235, 222, 213, .55); border-right: 0; border-radius: 18px 0 0 18px; box-shadow: 0 6px 14px rgba(47, 32, 20, .28); overflow: hidden; }
	.pf-lang__toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--crema); cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.pf-lang__toggle svg { width: 22px; height: 22px; }
	.pf-lang__opts { display: none; align-items: center; gap: 2px; padding: 4px 0 4px 6px; }
	.pf-lang.is-open .pf-lang__opts { display: flex; }
	.pf-lang__opt { color: var(--crema); min-width: 40px; padding: 0 10px; }
	.pf-lang__opt:hover { background: rgba(235, 222, 213, .18); transform: none; }
	.pf-lang__opt.is-on, .pf-lang__opt.is-on:hover { background: var(--crema); color: var(--cafe-osc); }
}

/* Selector de idioma en móvil: morado con letras blancas */
@media (max-width: 700px) {
	.pf-lang { background: #7a5a85; border-color: rgba(255, 255, 255, .55); }
	.pf-lang__toggle, .pf-lang__opt { color: #fff; }
	.pf-lang__opt:hover { background: rgba(255, 255, 255, .18); }
	.pf-lang__opt.is-on, .pf-lang__opt.is-on:hover { background: rgba(255, 255, 255, .26); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
}

/* Móvil: en todas las ventanas emergentes la línea punteada va solo en los laterales, así no se corta al hacer scroll */
@media (max-width: 700px) {
	.pf-modal__card::before { border-top: 0; border-bottom: 0; border-radius: 0; inset: 0 10px; }
}

/* Móvil: la ventana de freebies cabe completa en la pantalla, sin scroll interno */
@media (max-width: 700px) {
	.pf-modal--multi:not(.pf-catmodal) .pf-modal__card { max-height: 98dvh; padding: 34px 18px 20px; }
	.pf-modal--multi:not(.pf-catmodal) .pf-modal__gift { width: 56px; height: 56px; margin-bottom: 10px; }
	.pf-modal--multi:not(.pf-catmodal) .pf-modal__gift .ico { width: 32px; height: 32px; }
	.pf-modal--multi:not(.pf-catmodal) .pf-modal__title { font-size: 30px; margin-bottom: 8px; }
	.pf-modal--multi:not(.pf-catmodal) .pf-modal__text { font-size: 15px; line-height: 1.45; margin-bottom: 14px; }
	.pf-modal--multi:not(.pf-catmodal) .pf-modal__list { gap: 10px; margin: 0; }
}

/* Freebies: imagen completa (logos) sobre fondo negro, sin recortar */
.pf-modal__thumb.is-contain { background: #141314; }
.pf-modal__thumb.is-contain img { object-fit: contain; }
.pf-modal__item:hover .pf-modal__thumb.is-contain img { scale: 1; }

/* Un solo freebie: la tarjeta va centrada */
@media (min-width: 701px) { .pf-modal__list--one { grid-template-columns: minmax(0, 360px); justify-content: center; } }

/* Nota escrita a mano junto a las categorías: cinta washi verde que se mece */
.pf-pills__soon { display: flex; align-items: center; align-self: center; filter: drop-shadow(0 5px 5px rgba(47, 32, 20, .28)); }
.pf-pills__soon span {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 34px 11px 26px;
	background-color: var(--oliva);
	clip-path: polygon(0 0, 2.5% 12%, 0 25%, 2.5% 38%, 0 50%, 2.5% 62%, 0 75%, 2.5% 88%, 0 100%, 100% 100%, 97.5% 88%, 100% 75%, 97.5% 62%, 100% 50%, 97.5% 38%, 100% 25%, 97.5% 12%, 100% 0);
	color: #fff; font-family: var(--f-hand); font-weight: 700; font-size: 32px; line-height: 1;
	text-shadow: 0 2px 0 rgba(47, 45, 32, .6);
	transform: rotate(-2.5deg);
	animation: pf-sway 4s ease-in-out infinite, pf-bob 3.2s ease-in-out infinite;
}
@keyframes pf-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes pf-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.pf-pills__spark { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 2px 0 rgba(47, 45, 32, .55)); }
@media (max-width: 700px) { .pf-pills__soon span { font-size: 26px; padding: 8px 26px 10px 20px; } .pf-pills__spark { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .pf-pills__soon span { animation: none; } }

/* Colección «muy pronto»: un fantasmita que flota en lugar de la foto */
.pf-coll__img--ghost {
	position: relative; display: grid; place-items: center;
	background: radial-gradient(65% 75% at 50% 42%, #6b5238 0%, #46311f 58%, #2f2014 100%);
}
.pf-coll__img--ghost::after {
	content: ''; position: absolute; left: 50%; bottom: 13%; width: 26%; height: 6%; translate: -50% 0;
	border-radius: 50%; background: rgba(0, 0, 0, .38); filter: blur(4px);
	animation: pf-ghost-shadow 3.4s ease-in-out infinite;
}
.pf-ghost { width: 36%; max-width: 170px; height: auto; margin-bottom: 6%; filter: drop-shadow(0 0 16px rgba(255, 251, 246, .32)); animation: pf-ghost-float 3.4s ease-in-out infinite; }
.pf-ghost__sp { position: absolute; width: 26px; height: 26px; animation: pf-ghost-twinkle 2.6s ease-in-out infinite; }
.pf-ghost__sp--1 { top: 18%; left: 22%; }
.pf-ghost__sp--2 { top: 28%; right: 20%; width: 20px; height: 20px; animation-delay: .8s; }
.pf-ghost__sp--3 { bottom: 24%; left: 30%; width: 18px; height: 18px; animation-delay: 1.5s; }
@keyframes pf-ghost-float { 0%, 100% { translate: 0 8px; rotate: -4deg; } 50% { translate: 0 -12px; rotate: 4deg; } }
@keyframes pf-ghost-shadow { 0%, 100% { scale: 1; opacity: .8; } 50% { scale: .7; opacity: .45; } }
@keyframes pf-ghost-twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .pf-ghost, .pf-coll__img--ghost::after, .pf-ghost__sp { animation: none; } }

/* Producto estrella: el rasgado se recorta en la propia sección (así la cuadrícula y el degradado llegan hasta el borde) */
.pf-star::before, .pf-star::after { display: none; }
.pf-star {
	--tear-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%2220%22%20viewBox%3D%220%200%20480%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020%20L0%206%20L4%2011.6%20L8%209.3%20L12%208.5%20L16%209.8%20L20%208%20L24%206.4%20L28%208.1%20L32%208.6%20L36%208.6%20L40%2010.3%20L44%2010.9%20L48%2011.9%20L52%209%20L56%208.3%20L60%208%20L64%206.3%20L68%202.3%20L72%204.3%20L76%203.5%20L80%206%20L84%206.3%20L88%204%20L92%205.8%20L96%207%20L100%204.9%20L104%203.3%20L108%201.8%20L112%202.5%20L116%202.5%20L120%201.2%20L124%202.2%20L128%205.8%20L132%205%20L136%205.1%20L140%205.8%20L144%205.9%20L148%204.6%20L152%206.7%20L156%204.9%20L160%206.1%20L164%207.8%20L168%205.9%20L172%208.4%20L176%2010.9%20L180%2011.2%20L184%2010.6%20L188%208.8%20L192%2010.5%20L196%205.7%20L200%206.2%20L204%206%20L208%207.7%20L212%209.6%20L216%208.7%20L220%207.7%20L224%208.5%20L228%207.1%20L232%205.9%20L236%204.4%20L240%202.5%20L244%202.3%20L248%202.3%20L252%201.2%20L256%204.9%20L260%204%20L264%206.4%20L268%205.6%20L272%205.1%20L276%203.6%20L280%202.5%20L284%202.4%20L288%203.3%20L292%201.5%20L296%204.1%20L300%203.8%20L304%206.9%20L308%207.2%20L312%207.7%20L316%207.9%20L320%209%20L324%208.6%20L328%204.7%20L332%207.6%20L336%205%20L340%207.5%20L344%207.8%20L348%208.7%20L352%2013.3%20L356%2010.1%20L360%2011%20L364%207.6%20L368%207.4%20L372%206.7%20L376%203.9%20L380%207.1%20L384%207.4%20L388%208.1%20L392%208.8%20L396%209%20L400%208%20L404%204.8%20L408%202.2%20L412%201.6%20L416%201.2%20L420%201.2%20L424%201.5%20L428%201.2%20L432%204.2%20L436%204.3%20L440%206%20L444%204.3%20L448%206.5%20L452%203%20L456%202.8%20L460%204.5%20L464%201.5%20L468%204%20L472%203.4%20L476%209%20L480%206%20L480%2020%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
	--tear-bot: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%2220%22%20viewBox%3D%220%200%20480%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20L0%2012.1%20L4%2011.9%20L8%2015.6%20L12%2011.4%20L16%2013.5%20L20%209.6%20L24%2011.3%20L28%2011.4%20L32%2014.4%20L36%2016.2%20L40%2018.0%20L44%2017.7%20L48%2018.8%20L52%2017.3%20L56%2016.7%20L60%2015.6%20L64%2015.5%20L68%2017.0%20L72%2016.8%20L76%2014.0%20L80%2018.3%20L84%2016.9%20L88%2016.5%20L92%2018.8%20L96%2015.3%20L100%2013.8%20L104%2011.5%20L108%2010.2%20L112%2010.0%20L116%2011.2%20L120%2012.4%20L124%2011.2%20L128%2011.3%20L132%2013.8%20L136%2014.3%20L140%2012.8%20L144%209.6%20L148%209.7%20L152%209.7%20L156%208.3%20L160%208.4%20L164%2011.2%20L168%2011.2%20L172%2014.0%20L176%2016.1%20L180%2016.1%20L184%2013.1%20L188%2012.4%20L192%2013.2%20L196%2011.7%20L200%2011.7%20L204%2015.5%20L208%2014.9%20L212%2018.6%20L216%2018.4%20L220%2018.8%20L224%2018.1%20L228%2016.7%20L232%2017.4%20L236%2017.3%20L240%2015.1%20L244%2015.7%20L248%2013.7%20L252%2014.9%20L256%2015.5%20L260%2016.4%20L264%2015.4%20L268%2016.4%20L272%2013.5%20L276%2014.9%20L280%2012.1%20L284%209.8%20L288%2010.7%20L292%208.7%20L296%2011.3%20L300%2012.6%20L304%2011.8%20L308%2013.3%20L312%2014.7%20L316%2011.1%20L320%209.9%20L324%208.6%20L328%208.1%20L332%209.3%20L336%209.2%20L340%2014.6%20L344%2013.3%20L348%2015.5%20L352%2015.9%20L356%2015.4%20L360%2018.6%20L364%2017.4%20L368%2016.8%20L372%2016.3%20L376%2016.5%20L380%2017.6%20L384%2016.3%20L388%2016.1%20L392%2018.8%20L396%2018.8%20L400%2018.8%20L404%2016.7%20L408%2017.0%20L412%2014.5%20L416%2011.1%20L420%2013.0%20L424%2012.1%20L428%2012.3%20L432%2014.7%20L436%2015.0%20L440%2016.4%20L444%2014.9%20L448%2011.2%20L452%208.9%20L456%2011.0%20L460%207.0%20L464%208.7%20L468%2011.0%20L472%2011.9%20L476%2011.6%20L480%2012.1%20L480%200%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask: var(--tear-top) 0 0 / 480px 20px repeat-x, var(--tear-bot) 0 100% / 480px 20px repeat-x, linear-gradient(#000, #000) 0 20px / 100% calc(100% - 40px) no-repeat;
	mask: var(--tear-top) 0 0 / 480px 20px repeat-x, var(--tear-bot) 0 100% / 480px 20px repeat-x, linear-gradient(#000, #000) 0 20px / 100% calc(100% - 40px) no-repeat;
}