@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Jost:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#fff;font-family:'Jost',sans-serif;}

/* ===================== Slides: the PDF layout, scaled as a whole ===================== */
.pf-slide{width:100%;margin:0 auto;container-type:inline-size;background:#fff;}
.pf-canvas{position:relative;width:100%;aspect-ratio:1920/1090;overflow:hidden;background:#fff;}
.pf-stage{position:relative;}


.pf-img{position:absolute;object-fit:cover;}
.pf-text{position:absolute;white-space:nowrap;}
.pf-doodle{position:absolute;}
.pf-doodle svg{width:100%;height:100%;display:block;overflow:visible;}

/* photos, illustrations and posters are completely inert:
   no click, no right-click "open/save image", no drag-out, no long-press menu */
.pf-img, .pf-faces{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;}

/* red bars with their scrolling phrase */
.pf-marquee{position:absolute;overflow:hidden;display:flex;align-items:center;white-space:nowrap;}
.pf-marquee-track{display:inline-block;animation:mq 26s linear infinite;color:#fff;font-family:'Gloria Hallelujah',cursive;white-space:nowrap;}
.pf-marquee-track span{font-size:1.4cqw;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===================== Hand-drawn reveal ===================== */
.pf-stroke-path{transition:stroke-dashoffset .9s cubic-bezier(.3,.9,.3,1);}
.pf-fill-path{opacity:0;transform-origin:center;transform:scale(.85);transition:opacity .5s ease, transform .5s cubic-bezier(.3,1.4,.4,1);}
.pf-fill-path.pf-in{opacity:1;transform:scale(1);}

.pf-photo-hidden{opacity:0;transition:opacity .6s ease;}
.pf-photo-hidden.pf-in{opacity:1;}

/* text: handwritten titles write themselves, body lines rise in */
.pf-js .pf-slide:not(.pf-visible) .pf-text{opacity:0;}
.pf-js .pf-text.pf-line{transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);transition-delay:var(--d,0ms);}
.pf-js .pf-slide:not(.pf-visible) .pf-text.pf-line{transform:translateY(.5em);}
.pf-write span{display:inline-block;white-space:pre;}
.pf-js .pf-visible .pf-write span{animation:pf-ink .42s ease-out backwards;animation-delay:calc(var(--b,0ms) + var(--i) * 38ms);}
@keyframes pf-ink{from{opacity:0;transform:translateY(25%) rotate(-8deg);filter:blur(1.5px);}to{opacity:1;transform:none;filter:none;}}

/* doodles float gently once drawn and wiggle under the cursor */
.pf-js .pf-visible .pf-doodle{animation:pf-float var(--fd,5s) ease-in-out var(--fdel,1.5s) infinite alternate;}
@keyframes pf-float{from{transform:translateY(0);}to{transform:translateY(-.22cqw);}}
.pf-doodle:hover svg{animation:pf-wiggle .5s ease-in-out;}
@keyframes pf-wiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-10deg);}75%{transform:rotate(8deg);}}

/* the little red ↓ at the bottom-left of each page goes to the next one */
#page-3 .pf-doodle:hover svg{animation:none;}
/* one fixed arrow (the hand-drawn page arrow): down, and up at the end */
.pf-arrow{position:fixed;left:clamp(12px,1.9vw,36px);bottom:clamp(12px,2.2vw,40px);z-index:900;
  width:clamp(16px,1.2vw,26px);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);}
.pf-arrow svg{width:100%;height:100%;display:block;overflow:visible;transition:transform .5s cubic-bezier(.3,1.6,.5,1);}
.pf-arrow.pf-arrow-up svg{transform:rotate(180deg);}
.pf-js .pf-arrow:not(.pf-arrow-up){animation:pf-arrow-bob 1.6s ease-in-out 1.5s infinite;}
@keyframes pf-arrow-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
.pf-arrow:focus-visible{outline:2px dashed #df101c;outline-offset:4px;}
@keyframes pf-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(.35cqw);}}

/* ===================== Cover ===================== */
.pf-cover-play{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28 L7 20 L23 4 L28 9 L12 25 Z' fill='white' stroke='%23df101c' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 28 L7 20 L12 25 Z' fill='%23df101c'/%3E%3C/svg%3E") 4 28, crosshair;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
/* drawings and notes sit ON TOP of the word, as in the PDF */
#page-1 .pf-doodle, #page-1 .pf-text{z-index:3;pointer-events:none;}
#page-1 .pf-text.pf-title{z-index:2;pointer-events:auto;}
/* hidden until the cursor comes close */
.pf-js .pf-text.pf-cover-hidden{opacity:0 !important;}
.pf-js .pf-cover-hidden.pf-write span{animation:none !important;}
.pf-js .pf-visible .pf-cover-revealed.pf-write span{animation-delay:calc(var(--i) * 45ms);}
#page-1 .pf-cover-revealed svg{animation:pf-pop-in .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes pf-pop-in{from{transform:scale(.6) rotate(-10deg);}}
/* "Portfolio" letters drop in, then dance under the cursor */
.pf-bounce-letter{display:inline-block;transition:transform .35s cubic-bezier(.3,1.8,.4,1);}
.pf-js .pf-visible .pf-bounce-letter{animation:pf-drop .7s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--i) * 75ms + 150ms);}
@keyframes pf-drop{from{opacity:0;transform:translateY(-40%) rotate(-12deg);}}

/* ===================== Progress line + menu ===================== */
.pf-progress{position:fixed;top:0;left:0;right:0;height:12px;z-index:950;pointer-events:none;}
.pf-progress svg{width:100%;height:100%;display:block;}
.pf-progress path{stroke-dasharray:1 2;stroke-dashoffset:1;}

.pf-menu-btn{
  position:fixed;top:18px;right:18px;z-index:1001;width:42px;height:42px;border-radius:50%;
  border:2px solid #df101c;background:#fff;cursor:pointer;padding:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .3s ease;
}
.pf-menu-btn:hover{transform:rotate(-8deg) scale(1.06);}
.pf-menu-btn svg{width:100%;height:100%;display:block;overflow:visible;}
.pf-menu-btn path{fill:none;stroke:#df101c;stroke-width:2.6;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .35s ease, opacity .25s ease;}
.pf-menu-open .pf-menu-btn .l1{transform:translateY(7.5px) rotate(45deg);}
.pf-menu-open .pf-menu-btn .l2{opacity:0;}
.pf-menu-open .pf-menu-btn .l3{transform:translateY(-7.5px) rotate(-45deg);}
/* the cover's :) sits where the button is: hide it until you scroll a little */
.pf-at-top:not(.pf-menu-open) .pf-menu-btn{opacity:0;pointer-events:none;transform:translateY(-12px);}

.pf-menu{
  position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.97);
  display:flex;align-items:center;justify-content:center;overflow:auto;padding:80px 24px 40px;
  opacity:0;visibility:hidden;transition:opacity .35s ease, visibility 0s linear .35s;
}
.pf-menu-open .pf-menu{opacity:1;visibility:visible;transition:opacity .35s ease;}
.pf-menu ol{list-style:none;margin:auto;padding:0;text-align:center;}
.pf-menu li{margin:0 0 8px;}
.pf-menu a{
  position:relative;display:inline-block;font-family:'Gloria Hallelujah',cursive;
  font-size:clamp(24px,4.6vh,44px);line-height:1.5;color:#df101c;text-decoration:none;white-space:nowrap;
  clip-path:inset(0 100% 0 0);
}
.pf-menu-open .pf-menu a{clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.4,.1,.3,1);transition-delay:calc(var(--i) * 70ms + 120ms);}
.pf-menu a:hover{transform:rotate(-2deg);}
.pf-underline{position:absolute;left:0;right:0;bottom:-2px;height:10px;pointer-events:none;}
.pf-underline svg{width:100%;height:100%;display:block;overflow:visible;}
.pf-underline path{fill:none;stroke:#df101c;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease;}
.pf-menu a:hover .pf-underline path, .pf-menu a.pf-current .pf-underline path{stroke-dashoffset:0;}
@media (max-width:640px){.pf-menu-btn{width:38px;height:38px;top:12px;right:12px;}}

/* ===================== Play ===================== */
/* cherries you can pick up and leave anywhere */
.pf-js .pf-doodle.pf-cherry{animation:none !important;pointer-events:auto !important;cursor:grab;touch-action:none;will-change:transform;}
.pf-cherry.pf-grabbing{cursor:grabbing;}
.pf-cherry.pf-cover-hidden{pointer-events:none !important;}

/* romper para ver */
.pf-plaster{
  position:absolute;z-index:4;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .24 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 20%, #d4646a 0%, #c9555c 55%, #b84a51 100%);
  box-shadow:inset 0 0 24px rgba(90,20,25,.22);
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M7 31 L21 15' stroke='%23332' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M15 9 L25 4 L32 12 L23 19 Z' fill='%23a9a9a9' stroke='%23222' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 26 8, pointer;
  overflow:visible;
}
.pf-plaster:focus-visible{outline:2px dashed #df101c;outline-offset:4px;}
.pf-plaster.pf-broken{background:none;box-shadow:none;pointer-events:none;}
.pf-plaster-hint{animation:pf-knock 4.5s ease-in-out 2s infinite;}
@keyframes pf-knock{0%,88%,100%{transform:none;}90%{transform:rotate(-1deg);}93%{transform:rotate(1deg);}96%{transform:rotate(-.6deg);}}
.pf-cracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.pf-crack{fill:none;stroke:#7d2a30;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;}
.pf-crack-light{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;}
.pf-shard{
  position:absolute;inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .24 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 20%, #d4646a 0%, #c9555c 55%, #b84a51 100%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.pf-dust{position:absolute;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;background:#d98a8f;pointer-events:none;}

/* illustrations come alive */
.pf-js .pf-visible .pf-img.pf-alive.pf-in{animation-delay:1s;animation-iteration-count:infinite;}
.pf-js .pf-visible .pf-sway.pf-in{animation-name:pf-sway;animation-duration:4s;animation-timing-function:ease-in-out;transform-origin:50% 95%;}
.pf-js .pf-visible .pf-breathe.pf-in{animation-name:pf-breathe;animation-duration:3.6s;animation-timing-function:ease-in-out;}
.pf-js .pf-visible .pf-talk.pf-in{animation-name:pf-talk;animation-duration:3.2s;animation-timing-function:ease-in-out;}
.pf-js .pf-visible .pf-crawl.pf-in{animation-name:pf-crawl;animation-duration:9s;animation-timing-function:ease-in-out;animation-direction:alternate;}
.pf-js .pf-visible .pf-sniff.pf-in{animation-name:pf-sniff;animation-duration:3.8s;}
@keyframes pf-sway{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
@keyframes pf-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035) rotate(1deg);}}
@keyframes pf-talk{0%,45%,100%{transform:scaleY(1);}52%{transform:scaleY(1.12);}58%{transform:scaleY(.95);}64%{transform:scaleY(1.09);}70%{transform:scaleY(1);}}
@keyframes pf-crawl{0%{transform:translateX(0);}25%{transform:translateX(.35cqw) translateY(-.05cqw);}50%{transform:translateX(.6cqw);}75%{transform:translateX(.95cqw) translateY(-.05cqw);}100%{transform:translateX(1.2cqw);}}
@keyframes pf-sniff{0%,70%,100%{transform:none;}74%{transform:translate(.15cqw,-.05cqw) rotate(1.5deg);}78%{transform:translate(-.1cqw,.03cqw) rotate(-1deg);}82%{transform:translate(.12cqw,0) rotate(1deg);}86%{transform:none;}}
.pf-js .pf-img.pf-faces-src{visibility:hidden;}
.pf-faces{position:absolute;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);transition:opacity .6s ease;}
.pf-js .pf-slide:not(.pf-visible) .pf-faces{opacity:0;}
.pf-faces span{background-size:300% 300%;transform-origin:50% 45%;animation:pf-blink var(--dur,4s) ease-in-out var(--del,0s) infinite;}
@keyframes pf-blink{0%,90%,100%{transform:scaleY(1);}93%{transform:scaleY(.86) translateY(1%);}96%{transform:scaleY(1.03);}}

/* cherry rain from the cover's :) */
#page-1 .pf-text.pf-smile{pointer-events:auto;cursor:pointer;display:inline-block;}
.pf-smile:focus-visible{outline:2px dashed #df101c;outline-offset:3px;}
.pf-rain{position:fixed;inset:0;z-index:1200;pointer-events:none;overflow:hidden;}
.pf-raindrop{position:absolute;top:0;pointer-events:auto;cursor:pointer;}
.pf-raindrop svg{width:100%;height:100%;display:block;overflow:visible;}

/* contact */
#page-13 .pf-copy{cursor:pointer;}
#page-13 .pf-copy:hover{transform:rotate(-2deg) scale(1.04);transition:transform .25s cubic-bezier(.3,1.6,.5,1);}
.pf-copy:focus-visible{outline:2px dashed #df101c;outline-offset:3px;}
.pf-js .pf-visible .pf-write.pf-wave span{animation:pf-wave .6s ease-in-out;animation-delay:calc(var(--w,0) * 45ms);}
@keyframes pf-wave{0%,100%{transform:none;}40%{transform:translateY(-22%) rotate(-6deg);}}
.pf-check{position:absolute;z-index:5;pointer-events:none;transition:opacity .5s ease;}
.pf-check svg{width:100%;height:100%;display:block;overflow:visible;}
.pf-check.pf-out{opacity:0;}

/* ===================== Big moments ===================== */
/* section greeting: a marker loop round the title */
.pf-hello-mark{position:absolute;pointer-events:none;z-index:5;}
.pf-hello-mark svg{width:100%;height:100%;display:block;overflow:visible;filter:url(#pf-boil);}
.pf-hello-mark path{fill:none;stroke:#df101c;stroke-linecap:round;stroke-linejoin:round;}
.pf-js .pf-visible .pf-write.pf-hello span{animation:pf-hop .62s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--i) * 45ms);}
@keyframes pf-hop{0%{opacity:0;transform:translateY(-.9em) scale(.3) rotate(-14deg);}60%{opacity:1;transform:translateY(.08em) scale(1.18) rotate(4deg);}100%{opacity:1;transform:none;}}

/* hand-drawn line boil on every marker doodle (not the poster's precise graphics) */
.pf-boil-on .pf-visible .pf-doodle:not(.pf-precise) svg{filter:url(#pf-boil);}
/* small doodles stretch like jelly with scroll speed */
.pf-jelly svg{scale:calc(1 - var(--jelly,0) * .006) calc(1 + var(--jelly,0) * .012);rotate:calc(var(--jelly,0) * .35deg);}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
  .pf-js .pf-text.pf-line, .pf-js .pf-visible .pf-write span, .pf-js .pf-visible .pf-bounce-letter,
  .pf-js .pf-visible .pf-doodle, .pf-js .pf-arrow{animation:none;transition:none;}
  #page-1 .pf-doodle:hover svg, #page-1 .pf-cover-revealed svg,
  .pf-js .pf-visible .pf-img.pf-alive.pf-in, .pf-faces span, .pf-plaster-hint{animation:none;}
  .pf-menu a{clip-path:none;}
}

/* ---------- loader ---------- */
.pf-loading body::before{content:"";position:fixed;inset:0;background:#fff;z-index:3999;}
.pf-loader{position:fixed;inset:0;z-index:4000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vw;}
.pf-loader-logo{width:clamp(90px,11vw,180px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.pf-loader-logo svg{width:100%;height:100%;overflow:visible;}
.pf-loader-bar{width:clamp(160px,18vw,320px);height:clamp(8px,.8vw,14px);}
.pf-loader-bar svg{width:100%;height:100%;overflow:visible;}
.pf-loader-bar path{fill:none;stroke-width:2.5;stroke-linecap:round;}
.pf-loader-track{stroke:#df101c;opacity:.15;}
.pf-loader-fill{stroke:#df101c;stroke-dasharray:1;stroke-dashoffset:1;}

/* page 3: the CV / cover letter buttons download the PDFs */
a.pf-download{text-decoration:none;cursor:pointer;z-index:4;}
a.pf-download:hover{transform:rotate(-2deg) scale(1.04);transition:transform .25s cubic-bezier(.3,1.6,.5,1);}
a.pf-download:focus-visible{outline:2px dashed #df101c;outline-offset:3px;}

/* ===================== Phones (portrait or landscape), small windows and tablets in
   portrait: their own composition. Tablets in landscape, laptops and desktops get the PDF layout. */
.pf-m{display:none;}
@media (max-aspect-ratio: 5/4) and (max-width: 1100px), (max-width: 1199px), (max-height: 520px) and (max-width: 1100px){
  .pf-slide{display:none;}
  .pf-m{display:block;}
}
.pf-m{--w:min(100vw,640px);--pad:calc(var(--w) * .075);color:#df101c;overflow:hidden;}
.pf-m-sec{position:relative;width:var(--w);margin:0 auto;padding:calc(var(--w) * .12) var(--pad) calc(var(--w) * .15);background:#fff;}
.pf-m-sec.pf-m-withbar{padding:0 0 calc(var(--w) * .07);}
.pf-m-pad{position:relative;padding:calc(var(--w) * .1) var(--pad) 0;}
.pf-m-doodle{position:absolute;pointer-events:none;z-index:3;}
.pf-m-doodle svg{width:100%;height:auto;display:block;overflow:visible;}
.pf-m-doodle[style*="inset"] svg{height:100%;}
.pf-m-tap{pointer-events:auto;cursor:default;-webkit-tap-highlight-color:transparent;}
.pf-m-logo{left:var(--pad);top:calc(var(--w) * .06);width:calc(var(--w) * .07);}
.pf-m-pad > .pf-m-logo{top:calc(var(--w) * .04);}
.pf-m-logo-r{left:auto;right:var(--pad);transform:scaleX(-1);}
.pf-m .pf-img{position:relative;left:auto;top:auto;display:block;width:100%;height:auto;}

/* type */
.pf-m-h{font-family:'Gloria Hallelujah',cursive;font-weight:400;font-size:calc(var(--w) * .058);line-height:1.2;text-align:center;margin:0 0 calc(var(--w) * .05);}
.pf-m-script{font-family:'Gloria Hallelujah',cursive;font-size:calc(var(--w) * .036);line-height:1.35;margin:0;}
.pf-m-script.pf-m-big{font-size:calc(var(--w) * .046);margin:.2em 0 .4em;}
.pf-m-script.pf-m-sub{font-size:calc(var(--w) * .043);text-align:center;margin:calc(var(--w) * .08) 0 calc(var(--w) * .05);}
.pf-m-center{text-align:center;}
.pf-m-k{font-family:'Jost',sans-serif;font-weight:600;font-size:calc(var(--w) * .035);letter-spacing:.01em;margin:calc(var(--w) * .03) 0 calc(var(--w) * .035);}
.pf-m-p{font-family:'Jost',sans-serif;font-size:clamp(12px,calc(var(--w) * .032),16px);line-height:1.55;margin:0 0 1.1em;}

/* reveal */
.pf-js .pf-m [data-r]{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);}
.pf-js .pf-m [data-r].pf-m-in{opacity:1;transform:none;}
.pf-m-write span{display:inline-block;white-space:pre;}
.pf-m-write .pf-m-word-wrap{white-space:nowrap;}
.pf-js .pf-m-sec:not(.pf-visible) .pf-m-write span span{opacity:0;}
.pf-js .pf-m-sec.pf-visible .pf-m-write span span{animation:pf-ink .42s ease-out backwards;animation-delay:calc(var(--b,0ms) + var(--i) * 38ms);}
.pf-m-float{animation:pf-m-float var(--fd,5s) ease-in-out var(--fdel,0s) infinite alternate;}
@keyframes pf-m-float{from{transform:translateY(0) rotate(0);}to{transform:translateY(-4px) rotate(3deg);}}
.pf-m-logo-r.pf-m-float{animation:none;}

/* red bars */
.pf-m .pf-m-bar{position:relative;height:calc(var(--w) * .082);background:#df101c;width:100vw;margin-left:calc(50% - 50vw);}
.pf-m .pf-m-bar .pf-marquee-track span{font-size:calc(var(--w) * .036);}

/* cover */
.pf-m-cover{height:100vh;height:100svh;min-height:calc(var(--w) * 1.5);padding:0;display:flex;flex-direction:column;}
.pf-m-year{font-family:'Gloria Hallelujah',cursive;font-size:calc(var(--w) * .034);text-align:center;margin:calc(var(--w) * .07) 0 0;}
.pf-m-smile{position:absolute;right:var(--pad);top:calc(var(--w) * .065);border:0;background:none;padding:6px;color:#df101c;
  font-family:'Gloria Hallelujah',cursive;font-size:calc(var(--w) * .036);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.pf-m-word{flex:1;display:flex;align-items:center;justify-content:center;}
.pf-m-word-in{position:relative;width:64%;font-family:'Jost',sans-serif;font-weight:500;color:#000;line-height:.86;font-size:calc(var(--w) * .27);letter-spacing:-.01em;}
.pf-m-port, .pf-m-folio{display:block;white-space:nowrap;}
.pf-m-folio{margin-left:-.02em;}
.pf-m-l{display:inline-block;}
.pf-m-note{position:absolute;font-family:'Gloria Hallelujah',cursive;font-weight:400;color:#df101c;font-size:calc(var(--w) * .031);letter-spacing:0;line-height:1.2;white-space:nowrap;}
.pf-m-cover .pf-m-bar{flex:none;}

/* page 2 */
.pf-m-who{position:relative;text-align:right;margin-top:calc(var(--w) * .02);}
.pf-m-pilebox{position:relative;aspect-ratio:1/.78;margin:calc(var(--w) * .02) 0 calc(var(--w) * .06);}
.pf-m .pf-img.pf-m-pile{position:absolute;width:31%;aspect-ratio:1;object-fit:cover;rotate:var(--a,0deg);
  animation:pf-m-dance var(--dd,3.2s) ease-in-out var(--dl,0s) infinite alternate;}
@keyframes pf-m-dance{from{rotate:calc(var(--a,0deg) - 5deg);}to{rotate:calc(var(--a,0deg) + 5deg);}}
.pf-m-loc{position:relative;margin-bottom:0;}

/* page 3 */
.pf-m-round{position:relative;width:76%;margin:0 auto calc(var(--w) * .07);}
.pf-m-round .pf-img{border-radius:50%;aspect-ratio:1;object-fit:cover;}
.pf-m-circled{position:relative;margin:calc(var(--w) * .08) auto calc(var(--w) * .03);width:30%;aspect-ratio:154/78;display:flex;align-items:center;justify-content:center;text-align:center;}
.pf-m-circled .pf-m-script{position:relative;font-size:calc(var(--w) * .04);}
.pf-m-tools-h{width:46%;aspect-ratio:253/133;}
.pf-m-tools-h .pf-m-script{line-height:1.15;}
.pf-m-list, .pf-m-tools ul{list-style:none;margin:0;padding:0;font-size:clamp(12px,calc(var(--w) * .032),16px);line-height:1.6;}
.pf-m-list{text-align:center;}
.pf-m-tools{display:grid;grid-template-columns:1fr 1fr;gap:0 6%;width:82%;margin:calc(var(--w) * .02) auto calc(var(--w) * .12);}
.pf-m-docs{display:flex;flex-direction:column;align-items:center;gap:calc(var(--w) * .03);}
.pf-m-doc{position:relative;display:flex;align-items:center;justify-content:center;width:70%;aspect-ratio:548/157;color:#df101c;text-decoration:none;
  font-family:'Gloria Hallelujah',cursive;font-size:calc(var(--w) * .033);white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.pf-m-doc span{position:relative;}
.pf-m-doc:active{transform:scale(.96) rotate(-1deg);}

/* page 4: logo cards */
.pf-m-cards{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .07) calc(var(--w) * .06);}
.pf-m-card{text-align:center;}
.pf-m-card-name, .pf-m-card-desc{font-family:'Gloria Hallelujah',cursive;margin:0;}
.pf-m-card-name{font-size:calc(var(--w) * .028);margin-bottom:.4em;}
.pf-m-card-desc{font-size:calc(var(--w) * .026);line-height:1.35;margin-top:.5em;}
/* the logo crops carry a sliver of the captions above/below: trim it */
.pf-m .pf-img.pf-m-logoimg{width:88%;margin:-7% auto -11%;clip-path:inset(9% 0 13% 0);}

/* rails you can swipe */
.pf-m-rail-wrap{position:relative;margin:calc(var(--w) * .05) calc(var(--pad) * -1) calc(var(--w) * .1);}
.pf-m-rail{display:flex;gap:calc(var(--w) * .035);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pf-m-rail::-webkit-scrollbar{display:none;}
.pf-m-slide{flex:0 0 74%;scroll-snap-align:center;}
.pf-m-swipe{right:var(--pad);bottom:calc(var(--w) * -.07);width:calc(var(--w) * .15);animation:pf-m-nudge 1.8s ease-in-out infinite;}
@keyframes pf-m-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}

/* page 7 */
.pf-m-label{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;margin:calc(var(--w) * .07) 0 calc(var(--w) * .03);}
.pf-m-label .pf-m-k{margin:0;}
.pf-m-rows{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(var(--w) * .025);}
.pf-m-rows-23 .pf-img{grid-column:span 2;aspect-ratio:220/247;object-fit:cover;}
.pf-m-rows-23 .pf-img:nth-child(-n+2){grid-column:span 3;}
.pf-m-justify{display:flex;gap:calc(var(--w) * .025);margin-bottom:calc(var(--w) * .08);}
.pf-m-justify > div{min-width:0;}

/* page 8, 9 */
.pf-m-grid2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .03);}
.pf-m-brand{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .03);margin:calc(var(--w) * .05) 0 calc(var(--w) * .1);}

/* page 11: ink drawings */
.pf-m-ink{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .05) calc(var(--w) * .04);margin:calc(var(--w) * .06) 0 calc(var(--w) * .1);}
.pf-m-frame{position:relative;}
.pf-m .pf-faces{position:absolute;inset:0;}

/* page 12 */
.pf-m .pf-img.pf-m-poster{margin-bottom:calc(var(--w) * .05);}
.pf-m-plaster{width:86%;margin:0 auto calc(var(--w) * .05);}

/* contact */
.pf-m-hello{font-family:'Gloria Hallelujah',cursive;font-weight:400;font-size:calc(var(--w) * .064);line-height:1.25;margin:calc(var(--w) * .1) 0 calc(var(--w) * .1);}
.pf-m-hello > span{display:block;}
.pf-m-aqui{position:relative;display:inline-block !important;padding:.1em .35em;margin-left:-.35em;}
.pf-m-aqui{padding:.25em .55em .3em;margin:-.1em 0 0 -.55em;}
.pf-m-aqui .pf-m-doodle{inset:0;}
.pf-m-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.5em;margin-left:18%;}
.pf-m-contact a{font-family:'Gloria Hallelujah',cursive;font-size:calc(var(--w) * .038);color:#df101c;text-decoration:none;}
/* the contact photo sits right on the footer and reaches the screen's edge */
.pf-m .pf-img.pf-m-kid{width:62%;margin:calc(var(--w) * .06) calc((var(--w) - 100vw) / 2) 0 auto;}
.pf-m-sec.pf-m-last{padding-bottom:0;}

/* ===================== Footer ===================== */
.pf-foot{position:relative;background:#df101c;color:#fff;margin-top:0;padding:clamp(28px,3.5vw,60px) clamp(20px,6vw,110px) clamp(18px,2vw,30px);overflow:hidden;}
.pf-foot-edge{position:absolute;left:0;right:0;top:calc(clamp(14px,2vw,32px) * -1 + 3px);width:100%;height:clamp(14px,2vw,32px);fill:#df101c;overflow:visible;}
.pf-foot{overflow:visible;}
.pf-foot-in{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,70px);align-items:start;max-width:1700px;margin:0 auto;}
.pf-foot p{margin:0;}
.pf-foot-logo{width:clamp(42px,3.6vw,64px);margin-bottom:.6em;}
.pf-foot-logo svg, .pf-foot-d svg{width:100%;height:auto;display:block;overflow:visible;}
.pf-foot svg path{stroke:#fff !important;}
.pf-foot svg path[fill]:not([fill="none"]){fill:#fff !important;}
.pf-foot-name{font-family:'Gloria Hallelujah',cursive;font-size:clamp(28px,3.2vw,58px);line-height:1.1;}
.pf-foot-role{font-family:'Gloria Hallelujah',cursive;font-size:clamp(15px,1.25vw,22px);opacity:.92;}
.pf-foot-nav{display:flex;flex-direction:column;gap:.35em;font-family:'Gloria Hallelujah',cursive;font-size:clamp(17px,1.45vw,26px);}
.pf-foot-contact{display:flex;flex-direction:column;gap:.45em;font-family:'Jost',sans-serif;font-size:clamp(14px,1.05vw,18px);}
.pf-foot a{color:#fff;text-decoration:none;text-underline-offset:.25em;align-self:flex-start;}
.pf-foot a:hover, .pf-foot a:focus-visible{text-decoration:underline wavy;text-decoration-thickness:1.5px;outline:none;}
.pf-foot-cv{font-family:'Gloria Hallelujah',cursive;font-size:1.2em;margin-top:.3em;}
.pf-foot-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;max-width:1700px;margin:clamp(26px,3vw,50px) auto 0;
  padding-top:.9em;border-top:1.5px solid rgba(255,255,255,.55);font-family:'Jost',sans-serif;font-size:clamp(12px,.85vw,15px);opacity:.9;}
.pf-foot-d{position:absolute;pointer-events:none;opacity:.95;}
.pf-foot-d1{right:4%;bottom:18%;width:clamp(40px,4vw,74px);}
.pf-foot-d2{display:none;}
.pf-foot-d3{display:none;}
.pf-foot-d4{left:2%;top:58%;width:clamp(20px,1.7vw,32px);}
/* drawings draw themselves when the footer comes into view */
.pf-js .pf-foot svg:not(.pf-foot-edge) path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.3,1) .2s;}
.pf-js .pf-foot.pf-foot-on svg path{stroke-dashoffset:0;}
.pf-js .pf-foot-in > *, .pf-js .pf-foot-bottom{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);}
.pf-js .pf-foot.pf-foot-on .pf-foot-in > *, .pf-js .pf-foot.pf-foot-on .pf-foot-bottom{opacity:1;transform:none;}
.pf-foot-on .pf-foot-in > :nth-child(2){transition-delay:.12s;}
.pf-foot-on .pf-foot-in > :nth-child(3){transition-delay:.24s;}
.pf-foot-on .pf-foot-bottom{transition-delay:.36s;}
@media (max-aspect-ratio: 5/4) and (max-width: 1100px), (max-width: 1199px), (max-height: 520px) and (max-width: 1100px){
  .pf-foot{padding:44px 24px 20px;margin-top:0;}
  .pf-foot-in{grid-template-columns:1fr;text-align:center;gap:26px;}
  .pf-foot-logo{margin:0 auto .5em;width:46px;}
  .pf-foot-name{font-size:30px;}
  .pf-foot-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.3em 1em;font-size:17px;}
  .pf-foot-contact{align-items:center;}
  .pf-foot a{align-self:center;}
  .pf-foot-bottom{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:.2em;}
  .pf-foot-d2{display:block;left:auto;right:6%;top:8%;width:30px;}
  .pf-foot-d1{right:5%;bottom:24%;width:38px;}
  .pf-foot-d3{display:block;left:8%;top:10%;bottom:auto;width:22px;}
  .pf-foot-d4{left:6%;top:55%;width:22px;}
}
@media (prefers-reduced-motion: reduce){
  .pf-js .pf-foot svg path{stroke-dasharray:none;transition:none;}
  .pf-js .pf-foot-in > *, .pf-js .pf-foot-bottom{opacity:1;transform:none;transition:none;}
}
@media (prefers-reduced-motion: reduce){ .pf-m .pf-img.pf-m-pile{animation:none;} }
/* the little drawings at the foot of a section sit below its last line */
.pf-m-sec > .pf-m-doodle[style*="bottom"]{bottom:4px !important;}

/* phone: more life */
.pf-m-h{position:relative;}
.pf-m-h .pf-m-uline{display:block;width:52%;height:.32em;margin:.08em auto 0;white-space:normal;}
.pf-m-uline svg{width:100%;height:100%;display:block;overflow:visible;}
.pf-m-uline path{fill:none;stroke:#df101c;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;}
.pf-js .pf-m-sec.pf-visible .pf-m-uline path{transition:stroke-dashoffset .7s cubic-bezier(.5,0,.3,1) var(--ud,600ms);stroke-dashoffset:0;}
.pf-m .pf-m-doodle svg{scale:calc(1 - var(--mj,0) * .006) calc(1 + var(--mj,0) * .012);rotate:calc(var(--mj,0) * .45deg);}
.pf-m-round{animation:pf-m-breathe 5s ease-in-out infinite;}
@keyframes pf-m-breathe{0%,100%{scale:1;rotate:0deg;}50%{scale:1.025;rotate:1.5deg;}}
.pf-m-toy{position:absolute;z-index:6;pointer-events:none;}
.pf-m-toy svg{width:100%;height:auto;display:block;overflow:visible;}
.pf-m-toy path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:pf-m-toy-draw .7s cubic-bezier(.5,0,.3,1) forwards;}
@keyframes pf-m-toy-draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .pf-m-round{animation:none;}
  .pf-js .pf-m-sec .pf-m-uline path{stroke-dashoffset:0;transition:none;}
}

/* phone drawings alive like on the desktop: hand-drawn tremble, float, wiggle */
.pf-boil-on .pf-m-sec.pf-m-on .pf-m-doodle svg{filter:url(#pf-boil);}
.pf-js .pf-m-alive > svg{animation:pf-m-wiggle var(--wd,7s) ease-in-out var(--wdel,0s) infinite;}
@keyframes pf-m-wiggle{0%,86%,100%{transform:none;}89%{transform:rotate(-9deg) scale(1.06);}93%{transform:rotate(7deg);}96%{transform:rotate(-3deg);}}
/* the fixed arrow turns white over the red footer */
.pf-arrow path{transition:stroke .3s ease;}
.pf-arrow.pf-arrow-light{filter:none;}
.pf-arrow.pf-arrow-light path{stroke:#fff;}
@media (prefers-reduced-motion: reduce){ .pf-js .pf-m-alive > svg{animation:none;} }

/* cherry confetti when you download the CV / cover letter */
.pf-confetti{position:fixed;inset:0;z-index:1300;pointer-events:none;overflow:hidden;}
.pf-confetti div{position:absolute;left:0;top:0;}
.pf-confetti svg{width:100%;height:auto;display:block;overflow:visible;}

/* the hidden party: five clicks in Contacto and every drawing dances */
@keyframes pf-party{0%{transform:rotate(-14deg) scale(1);}50%{transform:translateY(-12%) rotate(0deg) scale(1.15);}100%{transform:rotate(14deg) scale(1);}}
.pf-party .pf-doodle svg, .pf-party .pf-m-doodle svg, .pf-party .pf-foot svg:not(.pf-foot-edge){
  animation:pf-party .42s ease-in-out infinite alternate !important;transform-origin:50% 70%;}
.pf-party .pf-doodle:nth-child(3n) svg, .pf-party .pf-m-doodle:nth-child(3n) svg{animation-delay:-.14s !important;animation-duration:.36s !important;}
.pf-party .pf-doodle:nth-child(3n+1) svg, .pf-party .pf-m-doodle:nth-child(3n+1) svg{animation-delay:-.28s !important;animation-duration:.48s !important;}

/* ===================== Language switch ===================== */
.pf-lang{position:fixed;top:18px;right:72px;z-index:1001;height:42px;padding:0 14px;display:flex;align-items:center;gap:6px;
  border:2px solid #df101c;border-radius:21px;background:#fff;color:#df101c;cursor:pointer;
  font-family:'Gloria Hallelujah',cursive;font-size:15px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);-webkit-tap-highlight-color:transparent;}
.pf-lang:hover{transform:rotate(-4deg) scale(1.05);}
.pf-lang:focus-visible{outline:2px dashed #df101c;outline-offset:3px;}
.pf-lang [data-l]{opacity:.4;transition:opacity .25s ease;position:relative;}
.pf-lang [data-l].pf-lang-on{opacity:1;}
.pf-lang [data-l].pf-lang-on::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-3px;height:2px;border-radius:2px;background:#df101c;rotate:-3deg;}
.pf-lang-sep{opacity:.5;}
@media (max-width:640px){.pf-lang{top:12px;right:58px;height:38px;padding:0 11px;font-size:13px;}}

/* desktop "¡Un placer conocerte!": same-size photos swaying like on the phone */
.pf-img.pf-dance{object-fit:cover;rotate:var(--a,0deg);animation:pf-m-dance var(--dd,3.2s) ease-in-out var(--dl,0s) infinite alternate;}
@media (prefers-reduced-motion: reduce){ .pf-img.pf-dance{animation:none;} }
/* the language switch shows up together with the menu button */
.pf-lang{transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .3s ease;}
.pf-at-top:not(.pf-menu-open) .pf-lang{opacity:0;pointer-events:none;transform:translateY(-12px);}

/* phone "¡Conóceme!": a collage of paper notes taped to the page */
.pf-m-hi{margin-top:calc(var(--w) * -.02) !important;}
.pf-m-collage{margin:calc(var(--w) * .04) 0 calc(var(--w) * .06);}
.pf-m-paper{position:relative;width:88%;padding:calc(var(--w) * .07) calc(var(--w) * .065) calc(var(--w) * .06);rotate:calc(var(--t,0deg) * .45);}
.pf-m-paper-l{margin-right:auto;}
.pf-m-paper-r{margin-left:auto;}
.pf-m-paper .pf-m-p{margin:0;position:relative;}
/* the frame is drawn by hand around the text (see script), like her doodles */
.pf-m-frame-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.pf-m-frame-svg path{fill:none;stroke:#df101c;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.pf-boil-on .pf-m-sec.pf-m-on .pf-m-frame-svg{filter:url(#pf-boil);}
.pf-js .pf-m .pf-m-paper[data-r] .pf-m-p{opacity:0;transition:opacity .6s ease .45s;}
.pf-js .pf-m .pf-m-paper[data-r].pf-m-in .pf-m-p{opacity:1;}
.pf-js .pf-m .pf-m-paper[data-r]{opacity:1;transform:none;}
/* studies: written by hand, each with one of her stars */
.pf-m-studies{list-style:none;margin:calc(var(--w) * .02) auto calc(var(--w) * .1);padding:0;width:86%;
  font-family:'Jost',sans-serif;font-size:clamp(12px,calc(var(--w) * .032),16px);line-height:1.5;}
.pf-m-studies li{position:relative;padding-left:2em;margin-bottom:.7em;}
.pf-js .pf-m .pf-m-studies li[data-r]{transition-delay:var(--d,0ms);}
.pf-m-studies .pf-m-star{left:0;top:0;width:1.3em;}
/* tools: a handwritten list with her cherries as bullets */
.pf-m-toolset{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.35em 1.1em;width:90%;margin:calc(var(--w) * .03) auto calc(var(--w) * .12);padding:0;
  font-family:'Gloria Hallelujah',cursive;font-size:calc(var(--w) * .036);}
.pf-m-toolset li{position:relative;padding-left:1.05em;white-space:nowrap;}
.pf-m-toolset .pf-m-cherry-dot{left:0;top:.05em;width:.8em;}
.pf-js .pf-m-toolset li{opacity:0;transform:translateY(8px) rotate(-6deg);transition:opacity .4s ease var(--d,0ms), transform .5s cubic-bezier(.3,1.6,.5,1) var(--d,0ms);}
.pf-js .pf-m-toolset.pf-m-in li{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .pf-js .pf-m .pf-m-paper[data-r] .pf-m-p, .pf-js .pf-m-toolset li{opacity:1;transform:none;transition:none;}
}

/* phone Packaging: a little story, each text with the photo it talks about */
.pf-m-story{margin:calc(var(--w) * .04) 0 calc(var(--w) * .04);}
.pf-m-step{position:relative;margin-bottom:calc(var(--w) * .1);}
.pf-m-step-photo{width:64%;rotate:var(--r,0deg);}
.pf-m-step-l .pf-m-step-photo{margin-right:auto;}
.pf-m-step-r .pf-m-step-photo{margin-left:auto;}
.pf-m-step .pf-m-paper{width:80%;margin-top:calc(var(--w) * -.09);background:#fff;z-index:1;}

/* phone Editorial: a contact sheet of the magazine, marked by hand */
.pf-m-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--w) * .03);margin:calc(var(--w) * .05) 0 calc(var(--w) * .08);}
.pf-m-sheet:not(.pf-m-sheet-2):has(> .pf-m-thumb:first-child:nth-last-child(2)){display:flex;justify-content:center;}
.pf-m-sheet:not(.pf-m-sheet-2) > .pf-m-thumb:first-child:nth-last-child(2), .pf-m-sheet:not(.pf-m-sheet-2) > .pf-m-thumb:last-child:nth-child(2){width:calc((100% - var(--w) * .06) / 3);}
.pf-m-thumb{position:relative;}
.pf-m-thumb .pf-img{display:block;}
.pf-m-thumb-mark{z-index:4;}
/* a thumbnail picked out with a hand-drawn box (drawn by the same script as the text frames) */
.pf-m-marked{padding:0;}
.pf-m-marked .pf-m-frame-svg{inset:-9%;width:118%;height:118%;z-index:4;}
.pf-m-hlp{margin-bottom:.4em;}
/* a word marked with her marker: circled or underlined, drawn when read */
.pf-m-hl{position:relative;white-space:nowrap;}
.pf-m-hl svg{position:absolute;pointer-events:none;overflow:visible;}
.pf-m-hl-loop svg{left:-.4em;top:-35%;width:calc(100% + .8em);height:170%;}
.pf-m-hl-under svg{left:-2%;bottom:-.35em;width:104%;height:.5em;}
.pf-m-hl path{fill:none;stroke:#df101c;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;
  transition:stroke-dashoffset .8s cubic-bezier(.5,0,.3,1) .6s;}
.pf-m-in .pf-m-hl path, .pf-m-hl.pf-on path{stroke-dashoffset:0;}
@media (prefers-reduced-motion: reduce){ .pf-m-hl path{stroke-dashoffset:0;transition:none;} }

.pf-m-sheet.pf-m-sheet-2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .04);}
.pf-m-sheet.pf-m-sheet-2 > .pf-m-thumb{width:auto;}

/* the watch video: plays by itself, muted, and is as inert as the photos */
.pf-video{background:#000;object-fit:cover;pointer-events:none;}

/* the watches come to life: hovering (or tapping) a render plays the video in it */
.pf-vid-hot{position:absolute;z-index:3;cursor:default;-webkit-tap-highlight-color:transparent;}
.pf-m-thumb > .pf-vid-hot{inset:0;}
.pf-vid-hot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.pf-vid-hot.pf-playing video{opacity:1;}

/* "¡Rómpelo!": a note in her handwriting by the plaster */
.pf-plaster-note{position:absolute;z-index:5;color:#df101c;font-family:'Gloria Hallelujah',cursive;pointer-events:none;
  display:flex;align-items:flex-start;gap:.4em;transition:opacity .5s ease, transform .5s ease;}
.pf-plaster-note p{margin:0;line-height:1.2;}
.pf-plaster-note span{display:block;}
.pf-plaster-note span:first-child{font-size:1.45em;}
.pf-plaster-note span + span{font-size:.85em;max-width:15em;}
.pf-slide .pf-plaster-note{font-size:1.15cqw;}
.pf-plaster-note svg{flex:none;width:3.2em;height:auto;overflow:visible;margin-top:.6em;}
.pf-plaster-note path{fill:none;stroke:#df101c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s cubic-bezier(.5,0,.3,1) .5s;}
.pf-visible .pf-plaster-note path{stroke-dashoffset:0;}
.pf-plaster-note.pf-gone{opacity:0;transform:translateY(-8px);}
.pf-m-plaster-note{position:relative;font-size:calc(var(--w) * .038);margin:calc(var(--w) * .04) 0 calc(var(--w) * .01) 22%;}
.pf-m-plaster-note svg{width:2.8em;}
@media (prefers-reduced-motion: reduce){ .pf-plaster-note path{stroke-dashoffset:0;transition:none;} }

/* text that wraps inside its box (Branding: Espacio Vital) */
.pf-text.pf-text-block{white-space:normal;}
.pf-m-ev-hero{margin:calc(var(--w) * .02) 0 0;}

/* Branding: the Espacio Vital logo, live */
.pf-ev-live{position:absolute;overflow:hidden;--ev-bg:#F3F1EA;--ev-fg:#4E1E16;}
.pf-m .pf-ev-live{position:relative;width:100%;aspect-ratio:16/9;margin:calc(var(--w) * .02) 0 0;}
.pf-ev-svg{display:block;width:100%;height:100%;}
.pf-ev-bg{fill:var(--ev-bg);transition:fill 1.4s ease;}
.pf-ev-ink{fill:var(--ev-fg);transition:fill 1.4s ease;}
/* 1. the V appears as if written, then the two words come out of it */
.pf-ev-espacio, .pf-ev-ital{opacity:0;transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.3,1);}
.pf-ev-espacio{transform:translateX(60px);}
.pf-ev-ital{transform:translateX(-60px);}
.pf-ev-live.pf-ev-drawn .pf-ev-espacio, .pf-ev-live.pf-ev-drawn .pf-ev-ital{opacity:1;transform:none;}
/* 4. touched, the V stretches and sways like a body in a pose, then settles */
.pf-ev-v2{transform-box:fill-box;transform-origin:50% 92%;}
.pf-ev-photo.pf-ev-stretch .pf-ev-v2{animation:pf-ev-stretch 1.2s cubic-bezier(.3,1.4,.5,1);}
@keyframes pf-ev-stretch{0%{transform:none;}28%{transform:scale(1.04,1.12) rotate(-6deg) skewX(5deg);}
  56%{transform:scale(.98,.95) rotate(4deg) skewX(-3deg);}78%{transform:scale(1.01,1.02) rotate(-1.5deg);}100%{transform:none;}}

@media (prefers-reduced-motion: reduce){
  .pf-ev-espacio, .pf-ev-ital{opacity:1;transform:none;}
  .pf-ev-photo.pf-ev-stretch .pf-ev-v2{animation:none;}
}

/* her "versions" page, piece by piece; the V on the yoga photo moves */
.pf-ev-photo{position:absolute;overflow:hidden;cursor:default;-webkit-tap-highlight-color:transparent;}
.pf-ev-photo .pf-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.pf-ev-photo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.pf-m-ev-versions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--w) * .03);margin:calc(var(--w) * .05) 0 calc(var(--w) * .08);}
.pf-m-ev-wide{grid-column:1 / -1;}
.pf-m .pf-ev-photo{position:relative;width:100%;aspect-ratio:504/450;}

/* Branding: the Vs follow the scroll (rotate / skew / stretch set by the script) */
.pf-ev-scroll{transform-box:fill-box;transform-origin:50% 92%;
  rotate:var(--evs-r,0deg);scale:1 var(--evs-y,1);}
.pf-ev-v.pf-ev-scroll{transform-origin:50% 60%;}
.pf-ev-scroll{transform:skewX(var(--evs-k,0deg));}

/* very wide, short screens (ultrawide monitors): each page fits the screen's
   height and sits centred, instead of growing taller than the screen */
@media (min-aspect-ratio: 23/10){
  .pf-slide{max-width:calc(100vh * 1920 / 1090);}
}

/* small phones: never smaller than a readable size */
.pf-m-year{font-size:max(12px, calc(var(--w) * .034));}
.pf-m-note{font-size:max(11px, calc(var(--w) * .031));}
.pf-m-doc{font-size:max(11.5px, calc(var(--w) * .033));min-width:min(100%, 15.5em);}
.pf-m-card-name{font-size:max(11px, calc(var(--w) * .028));}
.pf-m-card-desc{font-size:max(11.5px, calc(var(--w) * .026));}