/* Freela — el poste. Papeles de color a pantalla completa, tipografía gigante, tiritas que se arrancan. */

@font-face{font-family:"Bagel Fat One";src:url(fonts/BagelFatOne-latin.woff2) format("woff2"),url(fonts/BagelFatOne_400Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Gabarito";src:url(fonts/Gabarito-500.woff2) format("woff2"),url(fonts/Gabarito_500Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Gabarito";src:url(fonts/Gabarito-800.woff2) format("woff2"),url(fonts/Gabarito_800ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/DMMono-latin.woff2) format("woff2"),url(fonts/DMMono_400Regular.ttf) format("truetype");font-weight:400;font-display:swap}

:root{
  --yellow:#FFD23F;--pink:#FF2E93;--green:#19D27C;--orange:#FF6A1F;--blue:#3457FF;--lilac:#C8A2FF;--ink:#111111;--cream:#FFF6E0;
  --ease-hydraulic-butter:linear(0, 0.015, 0.06 2.5%, 0.134 5.2%, 0.234 8.2%, 0.354 11.6%, 0.488 15.4%, 0.627 19.8%, 0.76 25%, 0.867 31.4%, 0.938 38.6%, 0.978 47.4%, 0.995 58.6%, 1 100%);
  --duration-hydraulic:320ms;
  --d2:calc(var(--duration-hydraulic) * 2.2);
  --display:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Gabarito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(20px,5.4vw,72px);
  --r:14px;
  --tear-h:16px;
  --wall:rgba(17,17,17,.22);
  /* borde rasgado: papel (64x16) y tirita (24x8) */
  --tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 16 6 5 13 12 21 1 28 10 35 4 42 14 50 3 57 11 64 16Z'/%3E%3C/svg%3E");
  --tear-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 8 3 2 7 6 11 0 15 5 19 1 24 8Z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{font:500 clamp(1.05rem,.95rem + .45vw,1.3rem)/1.3 var(--body);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

.mono{font:400 clamp(.78rem,.72rem + .2vw,.92rem)/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* Esquinas: continuas donde hay soporte, radio normal si no. El logo queda fuera. */
.surface,.mini,.row,.sample,.undo,.face{border-radius:var(--r)}
.pull,.sample{border-radius:var(--r) var(--r) 0 0}
@supports (corner-shape:superellipse(1.5)){
  .surface,.mini,.row,.sample,.undo,.face{corner-shape:superellipse(1.5);border-radius:calc(var(--r) * 1.7)}
  .pull,.sample{border-radius:calc(var(--r) * 1.7) calc(var(--r) * 1.7) 0 0}
}

/* ───────── Papeles ───────── */
.paper{--paper:var(--yellow);position:relative;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink);padding:calc(var(--pad) * 1.1) var(--pad);display:grid}
.paper[data-paper=yellow]{--paper:var(--yellow)}
.paper[data-paper=pink]{--paper:var(--pink)}
.paper[data-paper=green]{--paper:var(--green)}
.paper[data-paper=orange]{--paper:var(--orange)}
.paper[data-paper=blue]{--paper:var(--blue);color:var(--cream)}
.paper[data-paper=lilac]{--paper:var(--lilac)}

/* cada papel nuevo se pega encima con el borde rasgado */
.paper + .paper{
  margin-top:calc(var(--tear-h) * -1);
  padding-top:calc(var(--pad) * 1.1 + var(--tear-h));
  -webkit-mask:var(--tear) top left/64px var(--tear-h) repeat-x,linear-gradient(#000,#000) 0 calc(var(--tear-h) - 1px)/100% 100% no-repeat;
          mask:var(--tear) top left/64px var(--tear-h) repeat-x,linear-gradient(#000,#000) 0 calc(var(--tear-h) - 1px)/100% 100% no-repeat;
}
/* los papeles se quedan pegados y el siguiente sube encima (el JS ajusta top si el papel es más alto que la pantalla) */
.js .paper{position:sticky;top:0}
.js .paper:last-child{position:relative}

/* ───────── Ilustraciones: serigrafía ───────── */
.art{position:relative;min-height:0}
.print{display:block;overflow:visible;width:100%;height:100%}
.art .print{position:absolute;inset:0}
.print use{transition:transform var(--d2) var(--ease-hydraulic-butter),opacity var(--d2) var(--ease-hydraulic-butter)}
@media (prefers-reduced-motion:no-preference){
  .js .print use{opacity:0}
  .js .print use:nth-child(1){transform:translate(-30px,20px)}
  .js .print use:nth-child(2){transform:translate(26px,-18px)}
  .js .print use:nth-child(3){transform:translate(-16px,-26px)}
  .js .print.on use{opacity:1;transform:none}
  .js .print.on use:nth-child(2){transition-delay:calc(var(--duration-hydraulic) * .8)}
  .js .print.on use:nth-child(3){transition-delay:calc(var(--duration-hydraulic) * 1.6)}
  .js .rise{opacity:0;translate:0 24px;transition:opacity var(--d2) var(--ease-hydraulic-butter),translate var(--d2) var(--ease-hydraulic-butter)}
  .js .rise:nth-child(2){transition-delay:90ms}
  .js .rise:nth-child(3){transition-delay:180ms}
  .js .here .rise{opacity:1;translate:none}
}

/* ───────── Tiritas ───────── */
.strips{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;background:var(--wall)}
.strip{
  --sh:clamp(104px,18svh,190px);--th:8px;
  position:relative;display:block;height:var(--sh);background:var(--paper);color:var(--ink);cursor:grab;
  transform-origin:50% 0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;text-decoration:none;
  -webkit-mask:var(--tear-s) top left/24px var(--th) repeat-x,linear-gradient(#000,#000) 0 calc(var(--th) - 1px)/100% 100% no-repeat;
          mask:var(--tear-s) top left/24px var(--th) repeat-x,linear-gradient(#000,#000) 0 calc(var(--th) - 1px)/100% 100% no-repeat;
  transition:translate var(--duration-hydraulic) var(--ease-hydraulic-butter),scale var(--duration-hydraulic) var(--ease-hydraulic-butter),rotate var(--duration-hydraulic) var(--ease-hydraulic-butter),opacity var(--duration-hydraulic) var(--ease-hydraulic-butter);
}
.strip span{position:absolute;inset:var(--th) 0 0;display:grid;place-items:center;writing-mode:vertical-rl;rotate:180deg;font:400 clamp(.72rem,.66rem + .25vw,.88rem)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.strip:focus-visible{outline:0}
.strip:focus-visible span{outline:3px solid var(--ink);outline-offset:-8px}
.strip.grab{transition:none;cursor:grabbing}
.strip.gone{
  translate:0 62vh;rotate:calc(var(--dir,1) * 16deg);scale:1 1.08;opacity:0;visibility:hidden;pointer-events:none;
  transition:translate var(--d2) var(--ease-hydraulic-butter),rotate var(--d2) var(--ease-hydraulic-butter),scale var(--d2) var(--ease-hydraulic-butter),opacity var(--d2) var(--ease-hydraulic-butter),visibility 0s linear var(--d2);
}
.strip.big{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:var(--th) var(--pad) 0;--sh:clamp(120px,26svh,230px);background:var(--cream)}
.strip.big span{position:static;writing-mode:horizontal-tb;rotate:none;display:block;font:400 clamp(3.4rem,17vw,13rem)/1 var(--display);letter-spacing:0;text-transform:none}
.strip.big:focus-visible span{outline-offset:6px}
.strip.big i{font-style:normal;font-size:clamp(.9rem,.8rem + .5vw,1.4rem)}

/* ayuda única: un dedo jala una tirita */
@keyframes hint{
  0%,14%{translate:0 0;scale:1 1;animation-timing-function:var(--ease-hydraulic-butter)}
  42%,60%{translate:0 30px;scale:1 1.07;animation-timing-function:var(--ease-hydraulic-butter)}
  84%,100%{translate:0 0;scale:1 1}
}
@keyframes tip{
  0%,4%{opacity:0;scale:1;animation-timing-function:var(--ease-hydraulic-butter)}
  14%{opacity:1;scale:1;animation-timing-function:var(--ease-hydraulic-butter)}
  20%,64%{opacity:1;scale:.88;animation-timing-function:var(--ease-hydraulic-butter)}
  80%{opacity:1;scale:1}
  92%,100%{opacity:0;scale:1}
}
.strip.hint{animation:hint 2.8s linear 1 both}
.tip{position:absolute;left:calc(50% - 22px);top:36%;width:44px;height:44px;border-radius:50%;background:#fff;border:4px solid var(--ink);pointer-events:none;opacity:0}
.hint .tip{animation:tip 2.8s linear 1 both}

/* ───────── 1. Hero ───────── */
.hero{padding-bottom:0;grid-template-rows:auto auto minmax(120px,1fr);row-gap:clamp(6px,1.6svh,20px)}
.hero .strips,.negocios .strips,.cierre .strips{margin-inline:calc(var(--pad) * -1)}
.brand{display:flex;align-items:center;gap:10px;font:400 1.7rem/1 var(--display)}
.brand img{width:auto;height:44px}
.hero-copy{display:grid;gap:clamp(10px,2svh,22px)}
h1,h2,h3{font:400 1em/.9 var(--display);text-wrap:balance}
h1{font-size:clamp(3rem,min(19vw,10svh),13.5rem);letter-spacing:-.005em}
h1 span{display:block}
.lede{max-width:30ch;font-size:clamp(1.05rem,.95rem + .5vw,1.5rem);font-weight:800;line-height:1.22}
.hero .art{align-self:stretch}

/* ───────── El campo: una sola cosa que hacer ───────── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.go{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:34rem}
.chips{display:flex;gap:8px;grid-column:1/-1}
.chip{width:48px;height:48px;display:grid;place-items:center;border:3px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:scale var(--duration-hydraulic) var(--ease-hydraulic-butter),background-color var(--duration-hydraulic) var(--ease-hydraulic-butter),color var(--duration-hydraulic) var(--ease-hydraulic-butter)}
.chip:active{scale:.92}
.chip[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.chip:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.go input{min-width:0;height:60px;padding:0 18px;border:3px solid var(--ink);border-radius:16px;background:var(--cream);color:var(--ink);font:800 1.15rem/1 var(--body)}
.go input::placeholder{color:var(--ink);opacity:.55}
.go button[type=submit]{height:60px;padding:0 22px;border:0;background:var(--ink);color:var(--cream);font:400 1.35rem/1 var(--display);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:scale var(--duration-hydraulic) var(--ease-hydraulic-butter)}
.go button[type=submit] svg{color:var(--yellow);transition:translate var(--duration-hydraulic) var(--ease-hydraulic-butter)}
@media (hover:hover){.go button[type=submit]:hover svg{translate:5px 0}}
.go.going button[type=submit] svg{translate:14px 0}
.go input{transition:border-color var(--duration-hydraulic) var(--ease-hydraulic-butter),box-shadow var(--duration-hydraulic) var(--ease-hydraulic-butter)}
.go input:focus{box-shadow:4px 4px 0 var(--ink)}
.go button[type=submit]:active{scale:.97}
.go input:focus-visible,.go button:focus-visible,.alt a:focus-visible,.gets a:focus-visible,a.row:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[data-paper=blue] a.row:focus-visible{outline-color:var(--cream)}
@supports (corner-shape:squircle){.go input{corner-shape:squircle;border-radius:22px}}
.alt{display:flex;align-items:center;gap:14px;font-weight:800;margin-top:-4px}
.alt a{color:inherit;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
.alt .mono{font-size:.78rem;opacity:.8}
@media (min-width:520px){.go{grid-template-columns:minmax(0,1fr) auto}}
/* El portafolio de muestra asoma desde abajo: se ve qué sale antes de leer nada. */
.hero .peek{--w:min(58vw,250px,38svh);justify-self:center;align-self:start;rotate:-3deg;margin-top:clamp(4px,1.5svh,18px)}
.hero{overflow:hidden}
.hero .sample{--paper:var(--pink)}
.sample{transition:scale var(--duration-hydraulic) var(--ease-hydraulic-butter),translate var(--d2) var(--ease-hydraulic-butter)}
.s-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.hero:has(.going) .sample{translate:0 -14px}

/* ───────── 2. Qué te llevas ───────── */
.llevas{align-content:center;gap:clamp(14px,3svh,34px)}
.tag{font-size:clamp(.82rem,.76rem + .25vw,1rem)}
.gets{list-style:none;display:grid;gap:clamp(18px,4svh,44px);padding:0}
.gets a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,4vw,36px);align-items:center;color:inherit;text-decoration:none}
.gets i{font:400 clamp(4.6rem,22vw,11rem)/.8 var(--display);font-style:normal;color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.gets b{font:400 clamp(1.9rem,8.4vw,4.4rem)/.95 var(--display);text-wrap:balance}
.gets .mono{font-size:clamp(.74rem,.7rem + .25vw,.95rem)}
@media (hover:hover){.gets a b{transition:translate var(--duration-hydraulic) var(--ease-hydraulic-butter)}.gets a:hover b{translate:6px 0}}

/* ───────── 3. Negocios reales ───────── */
.negocios{grid-template-rows:auto minmax(190px,1fr);row-gap:clamp(10px,2svh,24px);padding-bottom:0}
.n-copy{display:grid;gap:clamp(12px,2.4svh,26px);align-content:start}
.negocios h2{font-size:clamp(1.8rem,7.4vw,3.4rem);line-height:.98}
.num{display:block;font-size:clamp(3.6rem,20.5vw,15rem);line-height:.84;margin-bottom:.14em}
.rows{display:grid;gap:8px;list-style:none;padding:0}
a.row{text-decoration:none}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;background:var(--c);color:var(--ink);padding:clamp(11px,1.8svh,18px) 18px;font:800 clamp(1.1rem,1rem + .5vw,1.5rem)/1.1 var(--body)}
.row .mono{font-size:clamp(.68rem,.64rem + .2vw,.82rem);white-space:nowrap}
.credit{padding-top:2px}
.negocios .art{margin-inline:calc(var(--pad) * -.3)}

/* ───────── 4. Tu cartel ───────── */
.sample-wrap{--w:min(70vw,290px,calc(52svh * .6));position:relative;width:var(--w)}
.sample{--paper:var(--yellow);position:relative;aspect-ratio:9/15.4;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);padding:calc(var(--w) * .07) calc(var(--w) * .08) 0}
.s-logo{width:auto;height:calc(var(--w) * .11);margin-bottom:calc(var(--w) * .03)}
.s-name{font:400 calc(var(--w) * .22)/.9 var(--display)}
.s-who{font-size:max(.62rem,calc(var(--w) * .036));margin-top:calc(var(--w) * .02)}
.sample .art{flex:1;margin-top:calc(var(--w) * .02)}
.sample .strips{margin:0 calc(var(--w) * -.08);position:relative}
.sample .strip{--sh:calc(var(--w) * .44);--th:7px}
.sample .strip span{font-size:max(.62rem,calc(var(--w) * .036));letter-spacing:.1em}

/* ───────── 5. Cierre ───────── */
.cierre{padding-bottom:0;grid-template-rows:auto minmax(150px,1fr) auto;row-gap:clamp(8px,2svh,20px)}
.f-copy{display:grid;gap:12px;align-content:start}
.cierre h2{font-size:clamp(3.4rem,16.5vw,17rem);line-height:.86}
.cierre h2 span{display:block}
.cierre .art{margin-right:calc(var(--pad) * -.4)}

/* ───────── Pie ───────── */
.foot{display:flex;align-items:center;gap:16px;padding:26px var(--pad) calc(26px + env(safe-area-inset-bottom));background:var(--ink);color:var(--cream)}
.foot img{width:auto;height:32px;flex:none}
.foot .mono{font-size:clamp(.72rem,.68rem + .2vw,.86rem);line-height:1.45;text-transform:none;letter-spacing:.06em}

/* ───────── Pantallas anchas ───────── */
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto minmax(0,1fr);column-gap:var(--pad)}
  .brand{grid-column:1/-1}
  .hero-copy{grid-row:2;align-self:center}
  .hero .art .print{inset:0 0 0 0}
  h1{font-size:clamp(5rem,min(10.6vw,17.5svh),12rem)}
  .lede{max-width:26ch;font-size:clamp(1.15rem,1.45vw,1.7rem)}
  .hero-copy{padding-bottom:3svh}

  .gets{max-width:60rem}

  .negocios{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:1fr;column-gap:var(--pad);padding-bottom:0;align-items:center}
  .n-copy{align-content:center;padding-bottom:var(--pad)}
  .negocios h2{font-size:clamp(2.2rem,3.4vw,3.6rem)}
  .num{font-size:clamp(7rem,14.5vw,17rem)}
  .negocios .art{align-self:stretch;margin:0;min-height:60svh}
  .rows{max-width:34rem}
  .hero .peek{--w:min(30vw,400px,calc(78svh * .58));grid-column:2;grid-row:2;align-self:end;justify-self:center}

  .cierre{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:var(--pad)}
  .f-copy{align-self:center}
  .cierre h2{font-size:clamp(5rem,8.2vw,12rem)}
  .cierre .art{grid-column:2;grid-row:1}
  .cierre .strips{grid-column:1/-1}
}

/* ───────── 404 y Tus datos ───────── */
.nf{grid-template-rows:1fr auto;padding-bottom:0}
.nf h1{align-self:start;font-size:clamp(3.6rem,22vw,14rem)}
.nf .strips{margin-inline:calc(var(--pad) * -1);align-self:end}
.nf .strip.big{overflow:hidden}
.nf .strip.big span{white-space:nowrap;font-size:clamp(3rem,15vw,12rem)}
.texto{display:grid;gap:clamp(12px,2.2svh,20px);max-width:36rem;align-content:start}
.texto a{font-weight:800}
.faq h1{font-size:clamp(3rem,16vw,8rem)}
.faq h2{font:800 clamp(1.15rem,1.05rem + .5vw,1.5rem)/1.2 var(--body);margin-top:clamp(10px,2svh,18px);text-wrap:balance}

/* ───────── Menos movimiento: estado final, sin desplazamiento ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .tip{display:none}
}