/* FORGE STUDIO · v3 inner pages (trabajos, casos, servicios, sobre mí, contacto, opiniones, errores).
   Loads after v2.css and reuses its tokens: --blue #057FFE · --ink #141414 · --cream #F4EFE6. */

/* ---------- page head ---------- */
.ph3{position:relative;padding:clamp(40px,7vw,104px) 0 clamp(36px,5vw,72px);overflow:hidden}
.ph3::after{content:"";position:absolute;right:-12vw;top:-18vw;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(closest-side,rgba(5,127,254,.13),rgba(5,127,254,0));pointer-events:none}
.ph3__in{position:relative;z-index:1}
.ph3__h{margin:0;max-width:16ch;font:800 clamp(2.9rem,8.4vw,7.6rem)/.9 var(--display);font-stretch:76%;letter-spacing:-.02em;text-wrap:balance}
.ph3__h em,.cs-hd__h em,.sm3__h em{font-style:normal;color:var(--blue-txt)}
.ph3__lead{margin:28px 0 0;max-width:56ch;font-size:clamp(1.06rem,1.35vw,1.25rem);color:var(--ink-2)}
.ph3__lead strong{color:var(--ink)}
.ph3__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--line)}
.ph3__jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,44px)}
.count{margin:0;font:600 .82rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.fchip[aria-current="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.fchip[aria-current="true"] .fchip__n{background:var(--blue-btn);color:#fff}
.nf__links{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0;padding:0}
.sh__h--sm{font-size:clamp(2rem,4vw,3.4rem)}

/* ---------- work grid ---------- */
.wk{padding:clamp(20px,3vw,40px) 0 clamp(80px,10vw,140px)}
.wk--nf{padding-top:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(18px,2.2vw,32px)}
.card{min-width:0}
.card__a{display:grid;justify-items:start;text-decoration:none;color:var(--ink);border-radius:24px}
.card__a:focus-visible{outline:3px solid var(--blue-btn);outline-offset:6px}
.card__frame{position:relative;display:block;width:100%;aspect-ratio:5/4;border-radius:24px;overflow:hidden;background:var(--sky);box-shadow:inset 0 0 0 1px rgba(20,20,20,.06);transition:transform .6s var(--out),box-shadow .6s var(--out)}
.card--paper .card__frame{background:var(--cream-2)}
.card--mist .card__frame{background:var(--mist)}
.card--blue .card__frame{background:var(--blue)}
.card__a:hover .card__frame,.card__a:focus-visible .card__frame{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__browser{position:absolute;left:9%;top:13%;width:82%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(20,20,20,.55),0 0 0 1px rgba(20,20,20,.08);transition:transform .7s var(--out)}
.card__browser .card__img{width:100%;height:auto}
.card__poster{position:absolute;left:50%;top:10%;width:52%;translate:-50% 0;border-radius:10px;overflow:hidden;box-shadow:0 22px 40px -22px rgba(20,20,20,.6);rotate:-3deg;transition:transform .7s var(--out),rotate .7s var(--out)}
.card__phone{position:absolute;left:50%;top:9%;width:34%;aspect-ratio:9/16;translate:-50% 0;border:6px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--ink);box-shadow:0 24px 40px -20px rgba(20,20,20,.6);transition:transform .7s var(--out)}
.card__phone .card__img{width:100%;height:100%;object-fit:cover}
.card__a:hover .card__browser,.card__a:focus-visible .card__browser{transform:translateY(-10px) scale(1.02)}
.card__a:hover .card__poster,.card__a:focus-visible .card__poster{rotate:0deg;transform:translateY(-8px)}
.card__a:hover .card__phone,.card__a:focus-visible .card__phone{transform:translateY(-10px)}
.card__a:hover .pc__ver,.card__a:focus-visible .pc__ver{background:var(--blue-btn)}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px}
.card__type{display:inline-flex;align-items:center;gap:.6em;font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.card__n{color:var(--blue-txt)}
.tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600;background:var(--paper);color:var(--ink)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.tag--type::before{display:none}
.tag--client{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card__t{margin:10px 0 0;font:800 clamp(1.5rem,2vw,1.95rem)/1.02 var(--display);font-stretch:80%;letter-spacing:-.005em;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .5s var(--out)}
.card__a:hover .card__t,.card__a:focus-visible .card__t{background-size:100% 2px}
.card__d{margin-top:8px;max-width:44ch;font-size:.97rem;color:var(--ink-2)}
.card__go{display:inline-flex;align-items:center;gap:.5em;margin-top:14px;min-height:28px;font-weight:600;font-size:.95rem;color:var(--blue-txt)}
.card[hidden]{display:none}

/* ---------- case study ---------- */
.cs-hd{padding:clamp(28px,4.5vw,64px) 0 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 22px;font-size:.92rem;color:var(--ink-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:48px;color:var(--blue-txt);font-weight:600;text-underline-offset:4px}
.case__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cs-hd__h{margin:0;max-width:18ch;font:800 clamp(2.6rem,7.4vw,6.8rem)/.92 var(--display);font-stretch:76%;letter-spacing:-.02em;text-wrap:balance}
.cs-hd__foot{display:grid;grid-template-columns:minmax(0,1.2fr) auto;align-items:end;gap:24px 48px;margin-top:clamp(24px,3vw,40px)}
.cs-hd__lead{margin:0;max-width:56ch;font-size:clamp(1.06rem,1.35vw,1.24rem);color:var(--ink-2)}
.cs-hd__cta{display:flex;flex-wrap:wrap;gap:12px}
.cs-cover{position:relative;margin-top:clamp(36px,5vw,64px);border-radius:32px;background:var(--sky);padding:clamp(28px,5vw,80px) clamp(16px,6vw,96px) 0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)}
.cs-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(5,127,254,.22) 1.4px,transparent 1.5px);background-size:24px 24px;mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%)}
.cs-cover__browser{position:relative;display:block;max-width:1100px;margin:0 auto;background:#fff;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,20,20,.55),0 0 0 1px rgba(20,20,20,.08)}
.cs-cover__browser img{width:100%;height:auto;display:block}
.cs-cover__phone{position:absolute;right:clamp(12px,5vw,72px);bottom:-40px;width:clamp(96px,17vw,230px);border:7px solid var(--ink);border-radius:30px;overflow:hidden;background:var(--ink);box-shadow:0 30px 50px -24px rgba(20,20,20,.7)}
.cs-cover__phone img{width:100%;height:auto;display:block}
.cs-cover--ads{padding-bottom:clamp(28px,5vw,80px);display:grid;place-items:center}
.cs-cover__poster{position:relative;display:block;width:min(100%,520px);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,20,20,.6);rotate:-2deg}
.cs-cover__poster img{width:100%;height:auto;display:block}
.cs-story{padding:clamp(72px,9vw,140px) 0}
.cs-story__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,96px);align-items:start}
.cs-facts{position:sticky;top:96px;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.facts{margin:0;display:grid;gap:18px}
.facts>div{display:grid;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.facts>div:last-child{border-bottom:0;padding-bottom:0}
.facts dt{font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:0;font-weight:600}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-weight:400}
.ticks li{display:flex;gap:10px}
.ticks li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--blue)}
.note{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--sky);font-size:.92rem;color:var(--ink)}
.cs-body{display:grid;gap:clamp(40px,5vw,64px)}
.csb{padding-top:22px;border-top:1px solid var(--line)}
.csb__n{display:block;margin-bottom:14px;font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-txt)}
.csb h2{margin:0 0 14px;font:800 clamp(1.8rem,3vw,2.7rem)/1 var(--display);font-stretch:80%;letter-spacing:-.01em}
.csb p{margin:0;max-width:62ch;font-size:clamp(1.04rem,1.2vw,1.15rem)}
.csb--big p{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5}
.cs-shots{padding:clamp(72px,9vw,140px) 0;background:var(--blue-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mo{margin:0 0 clamp(28px,4vw,56px);border-radius:28px;background:var(--sky);padding:clamp(16px,4vw,64px)}
.mo--paper{background:var(--cream-2)}
.mo--mist{background:var(--mist)}
.mo img{width:100%;height:auto;border-radius:12px;box-shadow:0 30px 60px -34px rgba(20,20,20,.55),0 0 0 1px rgba(20,20,20,.08);transition:transform 1.2s var(--out)}
.mo figcaption{margin-top:14px;font-size:.92rem;color:var(--ink-2)}
.mo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,40px)}
.mo-row .mo{flex:0 1 340px;margin-bottom:0;padding:clamp(14px,2vw,24px)}
.mo--tall img{border-radius:16px}
.vid{margin:0 0 clamp(28px,4vw,56px)}
.vid video{width:min(100%,400px);height:auto;margin:0 auto;border-radius:24px;background:var(--ink);box-shadow:0 30px 60px -30px rgba(20,20,20,.6)}
.vid figcaption{margin-top:14px;text-align:center;font-size:.92rem;color:var(--ink-2)}
.embed{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--ink)}
.embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed__go{position:relative;z-index:1}
.cs-next{background:var(--blue-deep);color:var(--cream);padding:clamp(72px,9vw,130px) 0}
.cs-next__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.cs-next__h{margin:0 0 18px;font:800 clamp(2.4rem,5vw,4.6rem)/.92 var(--display);font-stretch:76%;letter-spacing:-.02em}
.cs-next__h em{font-style:normal;color:#BFDBFF}
.cs-next__ask p:not(.sh__k){margin:0 0 30px;color:#E3E9F3;max-width:42ch}
.nextp{display:grid;gap:14px;padding:clamp(18px,2vw,26px);border-radius:28px;background:var(--cream);color:var(--ink);text-decoration:none;transition:transform .6s var(--out),box-shadow .6s var(--out)}
.nextp:hover,.nextp:focus-visible{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.nextp:focus-visible{outline:3px solid var(--cream);outline-offset:4px}
.nextp__k{font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-txt)}
.nextp__im{display:block;border-radius:16px;overflow:hidden;background:var(--sky);aspect-ratio:16/9}
.nextp__im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--out)}
.nextp:hover .nextp__im img,.nextp:focus-visible .nextp__im img{transform:scale(1.04)}
.nextp__t{display:flex;align-items:center;gap:.4em;font:800 clamp(1.6rem,2.6vw,2.3rem)/1 var(--display);font-stretch:80%}
.nextp__c{font-size:.92rem;color:var(--ink-2)}

/* ---------- services ---------- */
.sv3{padding:clamp(12px,2vw,24px) 0 clamp(80px,10vw,140px)}
.sv3__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.4vw,32px)}
.sv3__i{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(26px,3.6vw,52px);border:1px solid var(--line);border-radius:28px;background:var(--paper);scroll-margin-top:96px;transition:box-shadow .6s var(--out),border-color .3s}
.sv3__i:hover{box-shadow:var(--shadow);border-color:rgba(5,127,254,.35)}
.sv3__head{position:relative}
.sv3__head .svx__n{right:0;top:0}
.sv3__t{margin:24px 0 12px;font:800 clamp(2rem,3.6vw,3.3rem)/.95 var(--display);font-stretch:78%;letter-spacing:-.01em}
.sv3__p{margin:0 0 14px;max-width:48ch;font-size:clamp(1.04rem,1.2vw,1.15rem)}
.sv3__for{margin:0 0 26px;max-width:48ch;color:var(--ink-2)}
.sv3__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);align-content:start}
.sv3__col{padding:20px 22px;border-radius:20px;background:var(--cream)}
.sv3__col--need{background:var(--sky)}
.sv3__col h3{margin:0;font:600 .82rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-txt)}
.sv3__col .svx__l{margin:14px 0 0}
.sv3__note{margin:clamp(28px,3vw,40px) 0 0;max-width:72ch;padding:18px 22px;border-left:3px solid var(--blue);background:var(--paper);border-radius:0 16px 16px 0;color:var(--ink-2)}
.sv3__note strong{color:var(--ink)}

/* ---------- about ---------- */
.ab3{padding:clamp(36px,6vw,96px) 0 clamp(72px,9vw,130px)}
.ab3__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.ab3__name{margin:26px 0 0;font:800 clamp(1.4rem,2vw,1.8rem)/1 var(--display);font-stretch:80%;color:var(--blue-txt)}
.ab3__txt .hx__cta{margin-top:34px}
.ab3__txt .ph3__h{font-size:clamp(2.6rem,6.4vw,6rem)}

/* ---------- contact ---------- */
.ct3{padding:clamp(36px,6vw,96px) 0 clamp(80px,10vw,140px)}
.ct3__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.ct3__side{position:sticky;top:96px}
.ct3__side .ph3__h{font-size:clamp(2.8rem,7vw,6.4rem)}
.next3{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.next3 li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.next3 span{font:600 .82rem/1 var(--sans);letter-spacing:.1em;color:var(--blue-txt)}
.next3 p{margin:0}
.ct3__mail{margin:26px 0 0;color:var(--ink-2)}
.ct3__mail a{display:inline-flex;align-items:center;min-height:48px;color:var(--blue-txt);font-weight:600;text-underline-offset:4px;word-break:break-all}
.ct3__form{padding:clamp(22px,3.4vw,48px);border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:0 30px 60px -44px rgba(20,20,20,.45);scroll-margin-top:96px}
.f{display:grid;gap:20px}
.f__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.f__step{display:flex;align-items:center;gap:12px;margin:6px 0 -4px;font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.f__step span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-size:.74rem;letter-spacing:0}
.f__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f__g{display:grid;gap:8px;align-content:start;min-width:0;margin:0;padding:0;border:0}
.f__g>label,.f__g legend{font-weight:600;font-size:.98rem}
.req,.opt{font-weight:400;font-size:.86rem;color:var(--ink-2)}
.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid rgba(20,20,20,.42);border-radius:14px;background:#fff;color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .2s,box-shadow .2s}
.f textarea{min-height:150px;resize:vertical}
.f select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:none;border-color:var(--blue-btn);box-shadow:0 0 0 4px rgba(5,127,254,.25)}
.f [aria-invalid=true]{border-color:#B3261E!important;border-width:2px!important}
.f__hint{margin:0;font-size:.9rem;color:var(--ink-2)}
.f__err{margin:0;font-weight:600;font-size:.94rem;color:#B3261E}
.f__err::before{content:"! ";}
.f__alert{padding:16px 18px;border-radius:16px;border:2px solid #B3261E;background:#FCEEEC;color:var(--ink)}
.f__alert p{margin:0}
.f__alert ul{margin:8px 0 0;padding-left:20px}
.f__alert a{display:inline-flex;align-items:center;min-height:44px;color:#8C1D18;font-weight:600}
.f__ref{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:14px 18px;border-radius:16px;background:var(--sky)}
.f__ref p{margin:0}
.f__ref .link{display:inline-flex;align-items:center;min-height:48px;color:var(--blue-txt);font-weight:600}
.f__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:6px;padding-top:20px;border-top:1px solid var(--line)}
.f__privacy{margin:0;font-size:.9rem;color:var(--ink-2);max-width:34ch}
.f__send[disabled],.f__send[aria-disabled=true]{opacity:.7;cursor:progress}
.f__ok{display:grid;justify-items:start;gap:4px;outline:none}
.f__ok h2{margin:14px 0 8px;font:800 clamp(2rem,3.6vw,3rem)/1 var(--display);font-stretch:78%}
.f__okmark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--blue-btn);color:#fff;font-size:1.8rem;font-weight:700}
html.motion .f__okmark{animation:pop .7s var(--boing) both}
.f__offline{margin:0 0 20px;padding:14px 18px;border-radius:16px;background:var(--sky);font-size:.94rem}
.f__check{display:flex;align-items:flex-start;gap:12px}
.f__check input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--blue-btn)}
.f__check label{font-weight:500;min-height:44px}

/* ---------- small pages (opiniones) ---------- */
.sm3{padding:clamp(40px,7vw,110px) 0 clamp(80px,10vw,140px)}
.sm3__card{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,56px);border:1px solid var(--line);border-radius:28px;background:var(--paper)}
.sm3__h{margin:0 0 18px;font:800 clamp(2.2rem,5vw,4rem)/.95 var(--display);font-stretch:78%;letter-spacing:-.015em}
.sm3__p{color:var(--ink-2);margin-bottom:28px}
.sm3__card .f__okmark{margin-bottom:10px}
.stars legend{margin-bottom:10px}
.stars__row{display:flex;flex-wrap:wrap;gap:10px}
.star{position:relative;display:inline-grid;place-items:center;min-width:56px;min-height:56px;border:1.5px solid rgba(20,20,20,.42);border-radius:16px;background:#fff;font-weight:700;font-size:1.1rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.star input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.star:has(input:checked){background:var(--ink);color:var(--cream);border-color:var(--ink)}
.star:has(input:focus-visible){outline:3px solid var(--blue-btn);outline-offset:3px}

/* ---------- closing on inner pages ---------- */
.hc--page{margin-top:0}

/* ---------- motion (only with html.motion; content stays visible without JS) ---------- */
html.motion .ph3__lead,html.motion .ph3__bar,html.motion .ph3__jump,html.motion .nf__links,html.motion .cs-hd__foot,html.motion .case__tags{animation:fade .9s .35s var(--out) both}
html.motion .cs-cover{animation:fade 1.1s .45s var(--out) both}
html.motion.io .card.rv:nth-child(3n+2){transition-delay:.08s}
html.motion.io .card.rv:nth-child(3n+3){transition-delay:.16s}
html.motion.io .mo.rv:not(.in) img{transform:scale(1.05)}
html.motion.io .csb.rv{transition-duration:1s}

/* ---------- responsive ---------- */
@media (max-width:1080px){
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sv3__i{grid-template-columns:1fr}
}
@media (max-width:960px){
 .cs-hd__foot,.cs-story__in,.cs-next__in,.ab3__in,.ct3__in{grid-template-columns:1fr}
 .cs-facts,.ct3__side{position:static}
 .ab3__ph{max-width:520px}
}
@media (max-width:700px){
 .cards{grid-template-columns:1fr}
 .f__row,.sv3__cols{grid-template-columns:1fr}
 .cs-cover{border-radius:22px}
 .cs-cover__phone{bottom:-20px;border-width:5px;border-radius:20px}
 .mo{border-radius:20px}
 .ph3__bar{align-items:flex-start;flex-direction:column}
 .nf__links .bx,.cs-hd__cta .bx,.f__send{width:100%;justify-content:center}
 .f__end{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){.mo img,.card__frame,.card__browser,.card__poster,.card__phone,.nextp{transition:none!important}}
@media (forced-colors:active){.fchip[aria-current="true"],.star:has(input:checked){border:3px solid Highlight}.card__frame,.mo,.cs-cover{border:1px solid CanvasText}}
@media print{.cs-facts,.ct3__side{position:static}.hc--page .mq{display:none}}

/* ===== v3c · capa dibujada a mano ===== */
/* Lettering: Caveat Brush (SIL OFL 1.1, self-hosted, latin subset with á é í ó ú ñ ¿ ¡). Display/accents only, never body text.
   Drawings: original SVG line art generated by scripts/draw-ill.py (single blue ink on cream). */
@font-face{font-family:"Caveat Brush";src:url(../fonts/caveat-brush-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--hand:"Caveat Brush","Segoe Print","Bradley Hand",cursive}
.hand{font-family:var(--hand);font-weight:400;font-style:normal;font-stretch:normal;letter-spacing:0;text-transform:none}
.ill{display:block}
.ill img,.ill svg{display:block;width:100%;height:auto;max-width:none}
.ill--spot{pointer-events:none}
/* line draw: only with JS + motion + IntersectionObserver. Without them the drawing is simply there. */
html.motion.io .ill:not(.in) img{opacity:0}
html.motion.io .ill svg path{stroke-dasharray:1 1;stroke-dashoffset:1;fill-opacity:0;transition:stroke-dashoffset .8s var(--ease) var(--d,0s),fill-opacity .45s linear calc(var(--d,0s) + .25s)}
html.motion.io .ill.in svg path{stroke-dashoffset:0;fill-opacity:1}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-2.4deg}60%{rotate:1.8deg}}
@media (hover:hover){
 html.motion .svx__i:hover .svx__doodle,html.motion .sv3__i:hover .svx__doodle,
 html.motion .fq__ill:hover svg,html.motion .fq__ill:hover img,html.motion .nf__art:hover svg{animation:wiggle .6s var(--ease)}
}

/* ---------- ¿Cómo hacemos el trabajo? ---------- */
.hw{padding:clamp(64px,8vw,120px) 0}
.hw__card{position:relative;background:var(--paper);border-radius:clamp(26px,3vw,44px);padding:clamp(26px,5vw,76px);box-shadow:inset 7px 0 0 var(--blue),var(--shadow)}
.hw__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(36px,4.6vw,68px)}
.hw__head{position:relative}
.hw__pc{margin:0}
.hw__pcill{max-width:640px;margin-left:auto}
.hw__h{font-size:clamp(3.1rem,6.6vw,6.8rem)}
.hw__h,.fq__h{margin:0;font-size:clamp(3.1rem,8.2vw,7.6rem);line-height:.9;color:var(--blue);rotate:-2deg;transform-origin:0 50%;text-wrap:balance}
.hw__lead{margin:22px 0 0;max-width:54ch;font-size:clamp(1.05rem,1.3vw,1.22rem);color:var(--ink-2)}
.hw__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
.hw__step{position:relative;display:flex;flex-direction:column}
.hw__step{border-top:2px solid var(--line);padding-top:6px}
.hw__n{display:block;margin:10px 0 8px;font:800 1.05rem/1 var(--display);letter-spacing:.06em;color:var(--blue-txt)}
.hw__t{margin:0 0 8px;font:800 clamp(1.32rem,1.65vw,1.62rem)/1.04 var(--display);font-stretch:82%;letter-spacing:-.005em}
.hw__p{margin:0;color:var(--ink-2)}
html.motion.io .hw__step:nth-child(2){transition-delay:.08s}
html.motion.io .hw__step:nth-child(3){transition-delay:.16s}
html.motion.io .hw__step:nth-child(4){transition-delay:.24s}

/* ---------- Preguntas frecuentes ---------- */
.fq{padding:clamp(24px,3vw,40px) 0 clamp(72px,9vw,130px)}
.fq__card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,88px);background:var(--paper);border-radius:clamp(26px,3vw,44px);padding:clamp(26px,5vw,76px);box-shadow:inset 7px 0 0 var(--blue),var(--shadow)}
.fq__side{align-self:start;position:sticky;top:104px}
.fq__h{font-size:clamp(3rem,6.6vw,6.4rem)}
.fq__lead{margin:20px 0 0;max-width:42ch;color:var(--ink-2)}
.fq__lead a,.fq__a a{color:var(--blue-txt);font-weight:600;text-underline-offset:4px}
.fq__ill{margin-top:clamp(18px,3vw,36px);max-width:500px;background:var(--cream);border-radius:28px;padding:clamp(8px,1.2vw,16px)}
.fq__list{border-top:2px solid var(--ink)}
.fq__i{border-bottom:1.5px solid var(--line)}
.fq__q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:14px 4px;cursor:pointer;font:700 clamp(1.12rem,1.5vw,1.4rem)/1.18 var(--display);font-stretch:86%;border-radius:10px}
.fq__q::-webkit-details-marker{display:none}
.fq__q:hover span:first-child{color:var(--blue-txt)}
.fq__pl{position:relative;flex:none;width:40px;height:40px;border:2px solid var(--blue-txt);border-radius:50%;transition:background .25s}
.fq__pl::before,.fq__pl::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;border-radius:2px;background:var(--blue-txt);translate:-50% -50%;transition:rotate .3s var(--ease),background .25s}
.fq__pl::after{rotate:90deg}
.fq__i[open] .fq__pl{background:var(--blue-txt)}
.fq__i[open] .fq__pl::before,.fq__i[open] .fq__pl::after{background:var(--paper)}
.fq__i[open] .fq__pl::after{rotate:0deg}
.fq__a{padding:0 4px 24px;max-width:62ch;color:var(--ink-2)}
.fq__a p{margin:0 0 12px}
.fq__a p:last-child{margin:0}
html.motion .fq__i[open] .fq__a{animation:fade .45s var(--out)}
.todo{display:inline;background:#FFF3C4;color:#4F3A00;border:1.5px dashed #9A7400;border-radius:8px;padding:2px 8px;font-size:.92em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- recurring accents ---------- */
.svx__doodle{width:136px;margin:-8px 0 6px -8px}
.sv3__head .svx__doodle{width:150px;margin:-10px 0 6px -10px}
.hx__doodle{position:absolute;right:var(--pad);top:clamp(236px,22vw,330px);width:clamp(230px,19vw,300px);z-index:2;pointer-events:none}
.hx__arrow{width:104px;margin:4px 0 0 18px;scale:-1 1;rotate:8deg}
.hx__bulb{position:absolute;right:-10px;top:-104px;width:74px;rotate:10deg}
.hc__in{position:relative}
.hc__doodle{position:absolute;right:var(--pad);top:clamp(10px,2vw,30px);width:clamp(120px,13vw,190px);pointer-events:none}
.hc__spark{position:absolute;width:46%;left:-46%;top:58%}
.ph__mug{position:absolute;right:-26px;bottom:-30px;width:clamp(92px,9vw,132px);rotate:6deg;z-index:2}
.ph__pencil{position:absolute;left:-26px;top:-28px;width:clamp(82px,8vw,112px);rotate:-8deg;z-index:2}
.ct3__faq{display:flex;align-items:center;gap:12px;margin:22px 0 0;color:var(--ink-2)}
.ct3__hand{flex:none;width:68px}
.ct3__faq a{display:inline-flex;align-items:center;min-height:48px;color:var(--blue-txt);font-weight:600;text-underline-offset:4px}
.ph3--art .ph3__in{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30vw,440px);column-gap:clamp(24px,4vw,64px);align-items:start}
.ph3--art .ph3__in>*{grid-column:1}
.ph3--art .nf__art{grid-column:2;grid-row:1/span 4;align-self:center;background:var(--paper);border-radius:28px;padding:clamp(8px,1.2vw,16px)}

@media (max-width:1180px){.hx__doodle{display:none}}
@media (max-width:1080px){.hw__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.hw__top{grid-template-columns:1fr}.hw__pcill{margin:0 auto}}
@media (max-width:960px){
 .fq__card{grid-template-columns:1fr}
 .fq__side{position:static}
 .fq__ill{max-width:420px}
 .ph3--art .ph3__in{grid-template-columns:1fr}
 .ph3--art .nf__art{grid-column:1;grid-row:auto;width:min(100%,340px);margin-top:28px;order:9}
}
@media (max-width:760px){
 .hc__doodle{position:relative;right:auto;top:auto;width:104px;margin:0 0 6px auto}
 .ph__mug{right:-6px;bottom:-22px}
 .ph__pencil{left:-6px;top:-20px}
}
@media (max-width:600px){
 .hw__steps{grid-template-columns:1fr}
 .hw__card,.fq__card{border-radius:24px;box-shadow:inset 5px 0 0 var(--blue),var(--shadow)}
 .fq__pl{width:36px;height:36px}
}
@media print{.ill img{opacity:1!important}}

/* ---------- v3c · review fixes ---------- */
/* hero: plate photo sits fully inside its own pill, like the puppy */
.inl--plate{background:var(--blue)}
.inl__plate{position:absolute;left:50%;top:50%;width:.68em;height:1.4em;object-fit:contain;translate:-50% -50%;rotate:90deg;filter:drop-shadow(0 .03em .05em rgba(20,20,20,.3));transition:scale .8s var(--out)}
.inl--plate:hover .inl__plate{scale:1.08}
.hx__eb-s{display:none}
@media (max-width:600px){.hx__eb-l{display:none}.hx__eb-s{display:inline;white-space:nowrap}}
/* about without a real photo yet: single clean column, no empty box */
.ha__in--solo,.ab3__in--solo{grid-template-columns:minmax(0,860px)}
/* small text on the band stays AA on narrow screens */
@media (max-width:700px){.band__stroke{stroke:var(--blue-btn)}}

/* ===== v3d · live hero = option B (original hand-drawn illustration, no photos) ===== */
.hpo__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-areas:"h art" "foot art";column-gap:clamp(24px,3vw,56px);align-items:center}
.hpo__h{grid-area:h;align-self:end}
.hpo__art{grid-area:art;margin:0;align-self:center}
.hpo__foot{grid-area:foot;align-self:start;grid-template-columns:1fr}
.hpo .hpo__h1{font-size:clamp(2.6rem,5.4vw,5.9rem)}
.hpo .ln--3{margin-left:.9em}.hpo .ln--4{margin-left:1.5em}
.hpo__svg{display:block;width:100%;height:auto;overflow:visible}
.hpo__wm{font-family:var(--display);font-weight:800;font-stretch:82%;letter-spacing:.02em}
.hpo__wm--ink{fill:#141414}.hpo--a .hpo__wm--ink{fill:#0058C4}
.hpo__wm--cream{fill:#F4EFE6}
@media (max-width:900px){
 .hpo__in{grid-template-columns:1fr;grid-template-areas:"h" "art" "foot"}
 .hpo__art{max-width:520px;width:100%;justify-self:center;margin-top:18px}
 .hpo .ln--3,.hpo .ln--4{margin-left:0}
}
/* pop-out entrance: each part ≤560ms, slight bounce; only when motion is allowed */
.hpo__pop{transform-box:fill-box;transform-origin:50% 100%}
html.motion .hpo__base{animation:hpoIn .5s .15s var(--out) both}
html.motion .hpo__pop{animation:hpoPop .56s var(--boing) both}
html.motion .hpo__pop--1{animation-delay:.42s}html.motion .hpo__pop--2{animation-delay:.54s}html.motion .hpo__pop--3{animation-delay:.66s}html.motion .hpo__pop--4{animation-delay:.78s}html.motion .hpo__pop--5{animation-delay:.9s}
.hpo--a .hpo__pop--1{transform-origin:0% 100%}
.hpo--c .hpo__pop--1{transform-origin:50% 100%}
@keyframes hpoIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hpoPop{0%{opacity:0;transform:translateY(46px) scale(.45)}60%{opacity:1}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hpo__base,.hpo__pop{animation:none!important}}