@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{color-scheme:light dark;--ground:#FBF6F1;--surface:#FFFFFF;--clay:#ECDCCE;--text:#2B201B;--muted:#5E4F46;--link:#7A3E2A;--sage:#4A6350;--buttonBg:#7A3E2A;--buttonText:#FFFFFF;--border:#E6D6C8;--thread:#7A3E2A;--needle:#4A6350;--err:#A61B1B;--errBg:#FBF4F4;--linen:#EAE4D8;--seam:#B08D78;--toneTight:#8A6414;--toneNo:#8C2F39;--bezel:#2B201B;--bezelRing:#6B5448;--skLine:#EADFD5;--skInk:#CDBBAD;--skDim:#E6DBD1;--accent:#7A3E2A;--on-accent:#FFFFFF;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]){--ground:#2A1E19;--surface:#35271F;--clay:#3B2C24;--text:#F6EDE7;--muted:#D9C8BC;--link:#E6C3AE;--sage:#A9BFAD;--buttonBg:#E6C3AE;--buttonText:#2A1E19;--border:#4B3A31;--thread:#E6C3AE;--needle:#8FA894;--err:#FFB4AB;--errBg:#4D3830;--linen:#231915;--seam:#7E6556;--toneTight:#E8C27A;--toneNo:#F2A9B0;--bezel:#140E0C;--bezelRing:#6B5448;--skLine:#4B3A31;--skInk:#6E5A4E;--skDim:#211814;--accent:#E6C3AE;--on-accent:#2A1E19}
}
:root[data-theme=dark]{--ground:#2A1E19;--surface:#35271F;--clay:#3B2C24;--text:#F6EDE7;--muted:#D9C8BC;--link:#E6C3AE;--sage:#A9BFAD;--buttonBg:#E6C3AE;--buttonText:#2A1E19;--border:#4B3A31;--thread:#E6C3AE;--needle:#8FA894;--err:#FFB4AB;--errBg:#4D3830;--linen:#231915;--seam:#7E6556;--toneTight:#E8C27A;--toneNo:#F2A9B0;--bezel:#140E0C;--bezelRing:#6B5448;--skLine:#4B3A31;--skInk:#6E5A4E;--skDim:#211814;--accent:#E6C3AE;--on-accent:#2A1E19}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
.t-classic{--ground:#FBF6EC;--surface:#FFFFFF;--text:#2A241D;--muted:#5F574D;--border:#DAD4CB;--errBg:#FBF4F4;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.t-natural{--ground:#F7F5F0;--surface:#FFFFFF;--text:#2A241D;--muted:#5F574D;--border:#D6D4CE;--errBg:#FBF4F4;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.t-modern{--ground:#FFFFFF;--surface:#FFFFFF;--text:#1F1F1F;--muted:#595959;--border:#DBDBDB;--errBg:#FBF4F4;--display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.a-terracotta{--accent:#B4532A;--on-accent:#FFFFFF;--link:#B4532A}
.a-olive{--accent:#4F6B2F;--on-accent:#FFFFFF;--link:#4F6B2F}
.a-ink{--accent:#2F4B7C;--on-accent:#FFFFFF;--link:#2F4B7C}
.a-burgundy{--accent:#8C2F39;--on-accent:#FFFFFF;--link:#8C2F39}
.a-mustard{--accent:#8A6414;--on-accent:#FFFFFF;--link:#8A6414}
.a-raspberry{--accent:#A8466A;--on-accent:#FFFFFF;--link:#A8466A}
.t-classic.a-terracotta{--stitch:#DDB29B;--accent-tint:#FBF6F4;--accent-disc:#F7ECE8}
.t-classic.a-olive{--stitch:#B3BC9D;--accent-tint:#F6F8F5;--accent-disc:#ECEFE8}
.t-classic.a-ink{--stitch:#A5AEBD;--accent-tint:#F5F6F8;--accent-disc:#E8EBF1}
.t-classic.a-burgundy{--stitch:#CCA2A1;--accent-tint:#F9F5F5;--accent-disc:#F2E8E9}
.t-classic.a-mustard{--stitch:#CCB991;--accent-tint:#F9F7F3;--accent-disc:#F2EEE5}
.t-classic.a-raspberry{--stitch:#D8ACB5;--accent-tint:#FBF6F8;--accent-disc:#F5EBEF}
.t-classic .fits-yes{--fits-tint:#F4F6F3}
.t-classic .fits-tight{--fits-tint:#F8F4F1}
.t-natural.a-terracotta{--stitch:#DBB19D;--accent-tint:#FBF6F4;--accent-disc:#F7ECE8}
.t-natural.a-olive{--stitch:#B0BB9F;--accent-tint:#F6F8F5;--accent-disc:#ECEFE8}
.t-natural.a-ink{--stitch:#A3AEBF;--accent-tint:#F5F6F8;--accent-disc:#E8EBF1}
.t-natural.a-burgundy{--stitch:#CAA2A3;--accent-tint:#F9F5F5;--accent-disc:#F2E8E9}
.t-natural.a-mustard{--stitch:#C9B894;--accent-tint:#F9F7F3;--accent-disc:#F2EEE5}
.t-natural.a-raspberry{--stitch:#D6ACB8;--accent-tint:#FBF6F8;--accent-disc:#F5EBEF}
.t-natural .fits-yes{--fits-tint:#F4F6F3}
.t-natural .fits-tight{--fits-tint:#F8F4F1}
.t-modern.a-terracotta{--stitch:#E0B7A6;--accent-tint:#FBF6F4;--accent-disc:#F7ECE8}
.t-modern.a-olive{--stitch:#B5C1A8;--accent-tint:#F6F8F5;--accent-disc:#ECEFE8}
.t-modern.a-ink{--stitch:#A8B3C8;--accent-tint:#F5F6F8;--accent-disc:#E8EBF1}
.t-modern.a-burgundy{--stitch:#CFA8AC;--accent-tint:#F9F5F5;--accent-disc:#F2E8E9}
.t-modern.a-mustard{--stitch:#CEBE9C;--accent-tint:#F9F7F3;--accent-disc:#F2EEE5}
.t-modern.a-raspberry{--stitch:#DAB1C0;--accent-tint:#FBF6F8;--accent-disc:#F5EBEF}
.t-modern .fits-yes{--fits-tint:#F4F6F3}
.t-modern .fits-tight{--fits-tint:#F8F4F1}
.sc{color-scheme:light;--thread:#7A3E2A;--needle:#4A6350;--err:#A61B1B}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .t-classic{--ground:#1F1A15;--surface:#2A241D;--text:#FBF6EC;--muted:#C9BFB1;--border:#423D37;--errBg:#44352E;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root:not([data-theme=light]) .t-natural{--ground:#1C1B18;--surface:#282623;--text:#F7F5F0;--muted:#C6C1B7;--border:#3F3E3B;--errBg:#423733;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root:not([data-theme=light]) .t-modern{--ground:#141414;--surface:#1F1F1F;--text:#FFFFFF;--muted:#BDBDBD;--border:#3A3A3A;--errBg:#3A3130;--display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root:not([data-theme=light]) .a-terracotta{--accent:#E39A78;--on-accent:#1F1A15;--link:#E39A78}
:root:not([data-theme=light]) .a-olive{--accent:#B5CC8E;--on-accent:#1F1A15;--link:#B5CC8E}
:root:not([data-theme=light]) .a-ink{--accent:#9DB5DE;--on-accent:#1F1A15;--link:#9DB5DE}
:root:not([data-theme=light]) .a-burgundy{--accent:#EBA0A8;--on-accent:#1F1A15;--link:#EBA0A8}
:root:not([data-theme=light]) .a-mustard{--accent:#E0BC74;--on-accent:#1F1A15;--link:#E0BC74}
:root:not([data-theme=light]) .a-raspberry{--accent:#EB9EBA;--on-accent:#1F1A15;--link:#EB9EBA}
:root:not([data-theme=light]) .t-classic.a-terracotta{--stitch:#71503F;--accent-tint:#332A22;--accent-disc:#3E3127}
:root:not([data-theme=light]) .t-classic.a-olive{--stitch:#5E6548;--accent-tint:#312C23;--accent-disc:#393629}
:root:not([data-theme=light]) .t-classic.a-ink{--stitch:#545B69;--accent-tint:#302B27;--accent-disc:#373432}
:root:not([data-theme=light]) .t-classic.a-burgundy{--stitch:#755253;--accent-tint:#342A24;--accent-disc:#3F322C}
:root:not([data-theme=light]) .t-classic.a-mustard{--stitch:#705E3D;--accent-tint:#332C21;--accent-disc:#3E3527}
:root:not([data-theme=light]) .t-classic.a-raspberry{--stitch:#75515A;--accent-tint:#342A25;--accent-disc:#3F312E}
:root:not([data-theme=light]) .t-classic .fits-yes{--fits-tint:#322E24}
:root:not([data-theme=light]) .t-classic .fits-tight{--fits-tint:#352D23}
:root:not([data-theme=light]) .t-natural.a-terracotta{--stitch:#705040;--accent-tint:#312C27;--accent-disc:#3D332C}
:root:not([data-theme=light]) .t-natural.a-olive{--stitch:#5C654A;--accent-tint:#2F2E28;--accent-disc:#38382F}
:root:not([data-theme=light]) .t-natural.a-ink{--stitch:#525C6B;--accent-tint:#2E2D2C;--accent-disc:#353638}
:root:not([data-theme=light]) .t-natural.a-burgundy{--stitch:#735354;--accent-tint:#322C2A;--accent-disc:#3D3332}
:root:not([data-theme=light]) .t-natural.a-mustard{--stitch:#6E5F3F;--accent-tint:#312E27;--accent-disc:#3C372C}
:root:not([data-theme=light]) .t-natural.a-raspberry{--stitch:#73525C;--accent-tint:#322C2B;--accent-disc:#3D3334}
:root:not([data-theme=light]) .t-natural .fits-yes{--fits-tint:#303029}
:root:not([data-theme=light]) .t-natural .fits-tight{--fits-tint:#342F28}
:root:not([data-theme=light]) .t-modern.a-terracotta{--stitch:#6B4C3E;--accent-tint:#292523;--accent-disc:#352D29}
:root:not([data-theme=light]) .t-modern.a-olive{--stitch:#586147;--accent-tint:#272825;--accent-disc:#30322B}
:root:not([data-theme=light]) .t-modern.a-ink{--stitch:#4E5869;--accent-tint:#252729;--accent-disc:#2D3034}
:root:not([data-theme=light]) .t-modern.a-burgundy{--stitch:#6E4F52;--accent-tint:#292526;--accent-disc:#352D2E}
:root:not([data-theme=light]) .t-modern.a-mustard{--stitch:#6A5B3C;--accent-tint:#292723;--accent-disc:#343028}
:root:not([data-theme=light]) .t-modern.a-raspberry{--stitch:#6E4E5A;--accent-tint:#292527;--accent-disc:#352D30}
:root:not([data-theme=light]) .t-modern .fits-yes{--fits-tint:#282926}
:root:not([data-theme=light]) .t-modern .fits-tight{--fits-tint:#2B2924}
:root:not([data-theme=light]) .fits-yes{--fits-tone:#B5CC8E}
:root:not([data-theme=light]) .fits-tight{--fits-tone:#E8C27A}
:root:not([data-theme=light]) .sc{color-scheme:dark;--thread:#E6C3AE;--needle:#8FA894;--err:#FFB4AB}
}
:root[data-theme=dark] .t-classic{--ground:#1F1A15;--surface:#2A241D;--text:#FBF6EC;--muted:#C9BFB1;--border:#423D37;--errBg:#44352E;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme=dark] .t-natural{--ground:#1C1B18;--surface:#282623;--text:#F7F5F0;--muted:#C6C1B7;--border:#3F3E3B;--errBg:#423733;--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme=dark] .t-modern{--ground:#141414;--surface:#1F1F1F;--text:#FFFFFF;--muted:#BDBDBD;--border:#3A3A3A;--errBg:#3A3130;--display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme=dark] .a-terracotta{--accent:#E39A78;--on-accent:#1F1A15;--link:#E39A78}
:root[data-theme=dark] .a-olive{--accent:#B5CC8E;--on-accent:#1F1A15;--link:#B5CC8E}
:root[data-theme=dark] .a-ink{--accent:#9DB5DE;--on-accent:#1F1A15;--link:#9DB5DE}
:root[data-theme=dark] .a-burgundy{--accent:#EBA0A8;--on-accent:#1F1A15;--link:#EBA0A8}
:root[data-theme=dark] .a-mustard{--accent:#E0BC74;--on-accent:#1F1A15;--link:#E0BC74}
:root[data-theme=dark] .a-raspberry{--accent:#EB9EBA;--on-accent:#1F1A15;--link:#EB9EBA}
:root[data-theme=dark] .t-classic.a-terracotta{--stitch:#71503F;--accent-tint:#332A22;--accent-disc:#3E3127}
:root[data-theme=dark] .t-classic.a-olive{--stitch:#5E6548;--accent-tint:#312C23;--accent-disc:#393629}
:root[data-theme=dark] .t-classic.a-ink{--stitch:#545B69;--accent-tint:#302B27;--accent-disc:#373432}
:root[data-theme=dark] .t-classic.a-burgundy{--stitch:#755253;--accent-tint:#342A24;--accent-disc:#3F322C}
:root[data-theme=dark] .t-classic.a-mustard{--stitch:#705E3D;--accent-tint:#332C21;--accent-disc:#3E3527}
:root[data-theme=dark] .t-classic.a-raspberry{--stitch:#75515A;--accent-tint:#342A25;--accent-disc:#3F312E}
:root[data-theme=dark] .t-classic .fits-yes{--fits-tint:#322E24}
:root[data-theme=dark] .t-classic .fits-tight{--fits-tint:#352D23}
:root[data-theme=dark] .t-natural.a-terracotta{--stitch:#705040;--accent-tint:#312C27;--accent-disc:#3D332C}
:root[data-theme=dark] .t-natural.a-olive{--stitch:#5C654A;--accent-tint:#2F2E28;--accent-disc:#38382F}
:root[data-theme=dark] .t-natural.a-ink{--stitch:#525C6B;--accent-tint:#2E2D2C;--accent-disc:#353638}
:root[data-theme=dark] .t-natural.a-burgundy{--stitch:#735354;--accent-tint:#322C2A;--accent-disc:#3D3332}
:root[data-theme=dark] .t-natural.a-mustard{--stitch:#6E5F3F;--accent-tint:#312E27;--accent-disc:#3C372C}
:root[data-theme=dark] .t-natural.a-raspberry{--stitch:#73525C;--accent-tint:#322C2B;--accent-disc:#3D3334}
:root[data-theme=dark] .t-natural .fits-yes{--fits-tint:#303029}
:root[data-theme=dark] .t-natural .fits-tight{--fits-tint:#342F28}
:root[data-theme=dark] .t-modern.a-terracotta{--stitch:#6B4C3E;--accent-tint:#292523;--accent-disc:#352D29}
:root[data-theme=dark] .t-modern.a-olive{--stitch:#586147;--accent-tint:#272825;--accent-disc:#30322B}
:root[data-theme=dark] .t-modern.a-ink{--stitch:#4E5869;--accent-tint:#252729;--accent-disc:#2D3034}
:root[data-theme=dark] .t-modern.a-burgundy{--stitch:#6E4F52;--accent-tint:#292526;--accent-disc:#352D2E}
:root[data-theme=dark] .t-modern.a-mustard{--stitch:#6A5B3C;--accent-tint:#292723;--accent-disc:#343028}
:root[data-theme=dark] .t-modern.a-raspberry{--stitch:#6E4E5A;--accent-tint:#292527;--accent-disc:#352D30}
:root[data-theme=dark] .t-modern .fits-yes{--fits-tint:#282926}
:root[data-theme=dark] .t-modern .fits-tight{--fits-tint:#2B2924}
:root[data-theme=dark] .fits-yes{--fits-tone:#B5CC8E}
:root[data-theme=dark] .fits-tight{--fits-tone:#E8C27A}
:root[data-theme=dark] .sc{color-scheme:dark;--thread:#E6C3AE;--needle:#8FA894;--err:#FFB4AB}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.6;display:flex;flex-direction:column;min-height:100vh;font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15;letter-spacing:-.01em;margin:0 0 .75rem}
h1{font-size:clamp(2rem,6vw,3rem)}
h2{font-size:clamp(1.45rem,3.6vw,1.9rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-100px;background:var(--surface);color:var(--text);padding:.75rem 1rem;border-radius:8px;min-height:44px;z-index:10}
.skip:focus{top:1rem}
.wrap{width:100%;max-width:68rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.narrow{max-width:40rem}
main{flex:1}
.lead{font-size:1.15rem}
.muted{color:var(--muted)}
.note{font-size:.95rem;color:var(--muted);border-left:3px solid var(--border);padding-left:.75rem}

/* Buttons: 48px tall, 44px minimum everywhere */
.button,.button-outline{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;min-width:44px;padding:.75rem 1.4rem;border-radius:999px;font:600 1rem/1.25 var(--body);text-decoration:none;cursor:pointer;border:2px solid var(--accent)}
.button{background:var(--accent);color:var(--on-accent)}
.button-outline{background:var(--surface);color:var(--link)}
.button:hover,.button-outline:hover{text-decoration:underline}
.button svg,.button-outline svg{flex:none;width:1.25rem;height:1.25rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.75rem;margin:1.5rem 0 .75rem}
.block-link{display:inline-flex;align-items:center;min-height:44px}
button{font:inherit}

/* ── Site chrome (landing, order landing, 404) ─────────────────────────── */
/* The «Hilo» identity (marks.ts): colours come from here so they follow the scheme */
.mark .thread{stroke:var(--thread)}
.mark .needle{stroke:var(--needle)}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-family:var(--display);font-style:italic;font-weight:480;font-size:1.6rem;line-height:1;color:var(--thread);text-decoration:none;letter-spacing:-.01em}
.brand .mark{width:3.1rem;height:auto;flex:none;margin-top:-.15rem}
.brand:hover span{text-decoration:underline;text-decoration-thickness:1px}
.signature{position:relative;display:inline-block;margin:0 0 1.25rem;padding:0 1.25em .55em 0;font-family:var(--display);font-style:italic;font-weight:480;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;letter-spacing:-.015em;color:var(--thread)}
.signature svg{position:absolute;left:-.1em;bottom:0;width:calc(100% + .2em);height:auto;overflow:visible}
.signature .thread{stroke:var(--thread)}
.signature .needle{stroke:var(--needle)}
.site-footer .signature{font-size:clamp(1.9rem,5vw,2.4rem);margin-top:.5rem}
.site-footer{margin-top:3rem;padding-top:1.5rem;padding-bottom:2rem;font-size:.95rem;color:var(--muted);border-top:1px solid var(--border)}
.site-footer p{margin:0 0 .5rem}
.page{padding-top:1rem;padding-bottom:2rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.25rem;margin:0 0 1rem}
.stores{display:flex;flex-wrap:wrap;gap:.75rem;padding:0;margin:0;list-style:none}
.stores a{display:inline-flex;align-items:center;min-height:44px}

/* ── Shared: the eyebrow and the stitch (every A Trazos page) and, for
   .strip, the showcase's photo strips further down ─────────────────────── */
.eyebrow{display:inline-block;font-family:var(--body);font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .75rem}
.stitch{display:block;width:100%;height:24px;color:var(--link)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:0;padding:0;list-style:none}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
@media (prefers-reduced-motion:no-preference){
  .stitch path{stroke-dashoffset:0;animation:sew 2.4s ease-out both}
}
@keyframes sew{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}

/* ── «Sobre A Trazos» (/sobre, redesigned 2026-10-05) ─────────────────────
   An editorial page in the home's language: the manifesto beside the «A»
   that paints itself (draw-load, the home's mechanism below), the purpose
   said large, the story as a chapter with a sticky head, the name on the
   linen band, the beliefs as four plain statements under a dashed seam —
   not cards — and the home's clay closing. Its body is class="about". */
.about-hero{display:grid;gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(24px,4vw,56px)}
@media (min-width:56rem){.about-hero{grid-template-columns:1.45fr 1fr}}
.about-hero h1{max-width:18ch;margin:0;font-size:clamp(2.5rem,5.6vw,4.75rem);font-style:italic;font-weight:400;line-height:1.04;letter-spacing:-.02em}
.about-hero .lead{max-width:36em;margin:0;font-size:clamp(1.125rem,1.6vw,1.3125rem);color:var(--muted)}
.about-a{width:min(100%,clamp(220px,30vw,400px));margin:0 auto}
@media (max-width:55.99rem){.about-a{order:-1;width:clamp(180px,48vw,240px)}}
.statement{padding-top:clamp(4rem,8vw,7rem);max-width:56rem}
.statement p{margin:0;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.25;font-weight:400;letter-spacing:-.01em}
.chapter{display:grid;gap:8px clamp(32px,6vw,96px)}
@media (min-width:56rem){.chapter{grid-template-columns:minmax(16rem,1fr) 1.6fr}.chapter>.chapter-head{position:sticky;top:1.5rem;align-self:start}}
.chapter .sec-title{max-width:14ch}
.prose{max-width:40rem}
.prose p{font-size:1.125rem}
.prose .big{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.625rem);line-height:1.45;font-weight:400}
.drop::first-letter{float:left;font-family:var(--display);font-style:italic;font-size:3.6em;line-height:.8;padding:.06em .1em 0 0;color:var(--thread)}
.pull{margin:clamp(28px,4vw,44px) 0 0;padding:0}
.pull p{margin:0 0 .5rem;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.2vw,2.125rem);line-height:1.25;color:var(--link)}
.site .pull .stitch{width:18rem;max-width:70%;height:20px}
.beliefs{list-style:none;margin:clamp(24px,4vw,48px) 0 0;padding:0;display:grid;gap:0 clamp(32px,6vw,96px)}
@media (min-width:56rem){.beliefs{grid-template-columns:1fr 1fr}}
.beliefs li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;align-content:start;gap:6px 20px;padding:28px 0;border-top:2px dashed var(--seam)}
.beliefs .num{grid-row:span 2;min-width:1.4ch;font-family:var(--display);font-style:italic;font-size:2.75rem;line-height:1;color:var(--link)}
.beliefs h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.625rem,2.8vw,2.25rem);line-height:1.15}
.beliefs p{margin:0;font-size:1.125rem;color:var(--muted)}
.site.about .site-footer{margin-top:0;border-top:0}
/* «Quién está detrás» on /sobre: the owner's name, town and email, as a quiet
   list sewn with the beliefs' dashed seam — labels in the eyebrow's voice,
   values in the display serif. The email may break anywhere at 320px. */
.owner-card{max-width:44rem;margin:clamp(24px,4vw,40px) 0 0;padding:0}
.owner-card div{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;gap:4px 24px;padding:20px 0;border-top:2px dashed var(--seam)}
.owner-card dt{flex:0 0 10rem;font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.owner-card dd{flex:1 1 16rem;min-width:0;margin:0;font-family:var(--display);font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.3;overflow-wrap:anywhere}
.owner-card a{color:var(--link)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}

/* ── The showcase ──────────────────────────────────────────────────────── */
/* Every colour below is a preset token (--ground, --surface, --text, --muted,
   --accent, --on-accent, --border, --stitch): the page wears the WORKSHOP's
   look in every theme × accent, and each text pair is measured in
   test/i18n-and-contrast.test.ts. Shadows are the only alpha, and none sits
   behind text. */
.sc main{padding-bottom:0}
.sc main>.wrap:last-child{padding-bottom:3rem}
@media (min-width:48rem){.sc main{padding-bottom:3.5rem}.sc main>.wrap:last-child{padding-bottom:0}}
.sc-bar{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.5rem 1rem;padding-top:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.sc-bar a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--text);text-decoration:none}
.sc-bar img{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.sc-bar .back{font-family:var(--body);font-size:1rem;font-weight:600;color:var(--link)}

/* The hero: the cover as a framed window, the identity as the sign hung over it */
.sc-hero{padding-top:.75rem}
.cover{width:100%;aspect-ratio:4/3;max-height:34rem;object-fit:cover;border-radius:18px;background:var(--surface)}
@media (min-width:40rem){.sc-hero{padding-top:1.25rem}.cover{aspect-ratio:16/7;border-radius:24px}}
.identity{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin:-2.75rem .6rem 0;padding:1.5rem 1.25rem 1.35rem;background:var(--surface);border:1px solid var(--border);border-radius:18px;outline:1.5px dashed var(--stitch);outline-offset:-8px;box-shadow:0 28px 50px -32px #0000004D}
/* A long name (#477, UI-01): smaller on a narrow screen, wrapped between
   words, and only a word too long for a line of its own is broken — never
   with a hyphen. «anywhere», not «break-word»: only «anywhere» lets the
   card's column shrink below the longest word, so the name cannot push the
   card past the screen. */
.identity h1{font-size:clamp(1.85rem,7vw,3.6rem);font-weight:500;line-height:1.05;letter-spacing:-.02em;margin-bottom:.6rem;overflow-wrap:anywhere;-webkit-hyphens:manual;hyphens:manual}
.identity .tagline{margin:0}
.logo{position:relative;z-index:1;width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;border:4px solid var(--surface);background:var(--surface);margin:-4.25rem 0 .75rem;box-shadow:0 10px 24px -14px #00000066}
.identity-side .status{margin-top:0}
.identity .contact .actions{margin:1rem 0 0}
.identity .actions,.product-info .actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.identity .closed{background:var(--ground);margin-top:0}
.identity .more-contact,.identity .follow-links{justify-content:center}
.identity .follow-heading{text-align:center}
@media (min-width:60rem){
  .identity{grid-template-columns:minmax(0,1.45fr) minmax(17rem,1fr);gap:3rem;align-items:center;margin:-6.5rem 2.5rem 0;padding:2.5rem 2.75rem;border-radius:22px;outline-offset:-10px}
  .logo{width:6.5rem;height:6.5rem;margin-top:-5.25rem}
  .identity-side{padding-left:2.5rem;border-left:1px solid var(--border)}
}
.name-only{margin:0;padding:2.5rem 0 .5rem;background:none;border:0;outline:0;box-shadow:none;border-radius:0}
.name-only h1{font-size:clamp(2.2rem,9vw,5rem)}
.name-only .stitch{max-width:14rem;margin:0 0 1rem;color:var(--accent)}
@media (min-width:60rem){.name-only{margin:0;padding:4rem 0 1rem}}
.tagline{font-size:clamp(1.1rem,2.4vw,1.3rem);line-height:1.5;color:var(--muted);max-width:40rem}
.status{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.5rem 1rem;margin:1rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:.3rem .9rem;border-radius:999px;border:2px solid var(--accent);background:var(--surface);color:var(--text);font-weight:600;font-size:.95rem}
.chip::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--accent)}
.closed{margin:1rem 0 0;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:10px;max-width:40rem}
.closed p{margin:0}.closed p+p{margin-top:.35rem}
.closed strong{font-family:var(--display);font-size:1.15rem;font-weight:600}
.sc .contact .button,.sc .contact .button-outline{min-height:54px;font-size:1.0625rem;padding:.85rem 1.5rem}
.sc .button{box-shadow:0 10px 22px -14px var(--accent)}
.sc .button:hover,.sc .button-outline:hover{text-decoration:underline;text-underline-offset:.2em}
.copy-note{margin:.5rem 0 0;padding:.75rem 1rem;border-radius:10px;background:var(--surface);border:1px solid var(--border);max-width:40rem}
.copy-note:empty{padding:0;border:0;margin:0}
.copy-note q{display:block;margin-top:.35rem;font-style:italic;quotes:"«" "»"}
/* «¿Llega a tiempo?» (#169), as the owner approved it on the canvas
   (2026-10-05): the identity card's frame, spanning its column like every
   section. `.fits` is a size CONTAINER, so the layout follows the card's own
   width, not the viewport's — the same card fills the home's page and the
   product page's narrow column. Narrow (and any browser without container
   queries): one column, the columns' wrappers dissolved (`display:contents`)
   so «Probar con otra fecha» can close the card under the actions. Wide
   (48rem of card and up): the canvas's 5fr / 7fr grid. The answer's border
   and icon say the verdict in a tone measured at AA (FITS_TONES), and its
   heading says it in words — colour is never the only signal. Tints are the
   solid per-preset mixes of STITCH_CLASSES; nothing here is an alpha. */
.fits{margin:1.5rem 0;scroll-margin-top:1rem;container:fits/inline-size}
.sc-fits{padding-top:3.25rem}
@media (min-width:60rem){.sc-fits{padding-top:4.5rem}}
.sc-fits .fits{margin:0}
.fits-card{--fits-tone:var(--muted);position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 22px 24px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:20px;outline:1.5px dashed var(--stitch,var(--border));outline-offset:-8px;box-shadow:0 24px 44px -32px #0000004D}
.fits-lead,.fits-main{display:contents}
.fits p{margin:0}
.fits-head{display:flex;align-items:center;gap:12px}
.fits-icon{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--accent-disc,var(--ground));color:var(--accent)}
.fits-icon svg{width:24px;height:24px}
.fits h2{margin:0;font-family:var(--display);font-weight:600;font-size:1.875rem;line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word;min-width:0}
.fits-note{font-size:.9375rem;color:var(--muted)}
.fits-scope{display:flex;align-items:flex-start;gap:10px}
.fits-scope svg{display:none;flex:none;order:-1;width:20px;height:20px;margin-top:2px;color:var(--muted)}
.fits-note[hidden]+svg{display:none}
.fits-scope:has(>.fits-note[hidden]){display:none}
.fits-form{display:flex;flex-direction:column;gap:16px;margin-top:6px;padding:18px 16px;border-radius:14px;background:var(--accent-tint,var(--ground))}
.fits-form .rq-date-field legend{margin-bottom:10px;font-weight:600;font-size:1.0625rem}
/* The canvas's one row of three, in its proportions — but never below what
   «septiembre» and «2026» need: a narrower card wraps the row instead of
   clipping a month (a select's own width cannot say so; it is compressible). */
.fits .rq-date{gap:6px}
.fits .rq-date-day{flex:.9 1 0;min-width:3.75rem}
.fits .rq-date-month{flex:1.6 1 0;min-width:7.25rem}
.fits .rq-date-year{flex:1.15 1 0;min-width:4.3rem}
.fits .op-field .rq-date-part label{margin-bottom:4px;font-size:.875rem}
.fits .op-field .rq-date select{min-height:52px;padding:0 22px 0 8px;border-width:1.5px;font-weight:500;font-size:1rem;background-position:calc(100% - .85rem) 50%,calc(100% - .5rem) 50%}
.fits-form .button{width:100%;min-height:56px;font-size:1.125rem}
.fits-live{display:flex;flex-direction:column;gap:14px}
.fits-live:empty{position:absolute}
.fits-checked{display:flex;flex-direction:column;gap:4px}
.fits-checked-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fits-checked-date{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.3}
.fits-again{order:1;text-align:center}
.fits-again .block-link{min-height:48px;font-weight:600}
.fits-answer{display:flex;flex-direction:column;gap:12px;padding:20px 18px;border:2px solid var(--fits-tone);border-radius:14px;background:var(--fits-tint,var(--surface))}
.fits-yes{--fits-tone:#4F6B2F}
.fits-tight{--fits-tone:#92400E}
.fits-answer h3{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--display);font-weight:600;font-size:1.375rem;line-height:1.2}
.fits-answer h3 svg{flex:none;width:30px;height:30px;color:var(--fits-tone)}
.fits-actions{display:flex;flex-direction:column;gap:10px}
.fits-actions .button,.fits-actions .button-outline{width:100%;min-height:56px;font-size:1.125rem}
@container fits (min-width:48rem){
  .fits-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:44px 48px;border-radius:22px;outline-offset:-10px;box-shadow:0 28px 50px -34px #0000004D}
  .fits-lead,.fits-main{display:flex;flex-direction:column;gap:16px;min-width:0}
  .fits-head{flex-direction:column;align-items:flex-start;gap:16px}
  .fits-icon{width:56px;height:56px}
  .fits-icon svg{width:28px;height:28px}
  .fits h2{font-size:2.5rem}
  .fits-help{font-size:1.1875rem;line-height:1.5}
  .fits-scope svg{display:block}
  .fits-form{gap:20px;margin-top:0;padding:28px;border-radius:16px}
  .fits-form .rq-date-field legend{margin-bottom:12px}
  .fits .rq-date{gap:12px}
  .fits .rq-date-day{flex:1 1 0;min-width:4.5rem}
  .fits .rq-date-month{flex:2 1 0;min-width:8.5rem}
  .fits .rq-date-year{flex:1.3 1 0;min-width:5.25rem}
  .fits .op-field .rq-date-part label{margin-bottom:6px;font-size:.9375rem}
  .fits .op-field .rq-date select{min-height:54px;padding:0 2rem 0 14px;font-size:1.125rem;background-position:calc(100% - 1.25rem) 50%,calc(100% - .9rem) 50%}
  .fits-checked-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-size:.9375rem;color:var(--muted)}
  .fits-checked-date{font-size:1.5rem}
  .fits-again{order:0;text-align:start}
  .fits-again .block-link{min-height:44px}
  .fits-answered .fits-live{gap:20px;padding:28px;border:2px solid var(--fits-tone);border-radius:16px;background:var(--fits-tint,var(--surface))}
  .fits-answer{gap:14px;padding:0;border:0;border-radius:0;background:none}
  .fits-answer h3{gap:12px;font-size:1.625rem}
  .fits-answer h3 svg{width:34px;height:34px}
  .fits-answer>p:first-of-type{font-size:1.125rem}
  .fits-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .fits-actions .button,.fits-actions .button-outline{width:auto;min-height:54px;padding:0 26px;font-size:1.0625rem}
}
.more-contact{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 1.25rem}
.more-contact a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* «Sígueme» (20261004210000): 48px round icon buttons, the accent's outline. */
.follow{margin:1rem 0 0}
.follow-heading{margin:0 0 .5rem;font:600 .9375rem/1.4 var(--body);color:var(--muted)}
.follow-links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.75rem}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--accent);background:var(--surface);color:var(--link)}
.icon-button svg{width:1.5rem;height:1.5rem}
.icon-button:hover{background:var(--ground)}

/* Sections */
.sc-section{padding-top:3.25rem}
@media (min-width:60rem){.sc-section{padding-top:4.5rem}}
.sc-section>h2{display:flex;align-items:center;gap:1rem;font-size:clamp(1.6rem,3.8vw,2.35rem);margin-bottom:1.5rem}
.sc-section>h2::after{content:"";flex:1;border-top:2px dashed var(--stitch);min-width:2rem}

/* Grids that fill their rows (rowPlan in showcaseView.ts): two columns on a
   phone, where .m-full takes the row; twelve from 60rem, where the tile size
   decides the span. --ratio is the photo's shape at that size. */
.products,.works{list-style:none;margin:0;padding:0;display:grid}
.products.grid,.works{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
.works{gap:1.25rem 1rem}
.products.grid>li,.works>li{--ratio:4/5}
.works>li{--ratio:1/1}
@media (max-width:59.99rem){.products.grid>.m-full,.works>.m-full{grid-column:1/-1;--ratio:4/3}}
@media (min-width:60rem){
  .products.grid,.works{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.75rem 1.5rem}
  .works{gap:2rem 1.5rem}
  .products.grid>li,.works>li{grid-column:span 4}
  .products.grid>.s-quarter,.works>.s-quarter{grid-column:span 3}
  .products.grid>.s-half,.works>.s-half{grid-column:span 6;--ratio:1/1}
  .products.grid>.s-full{grid-column:1/-1;--ratio:3/2}
  .works>.s-half,.works>.s-full{grid-column:span 6;--ratio:4/3}
  .products.grid>.s-full .product-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:center}
  .products.grid>.s-full .product-card h3{margin-top:0;font-size:clamp(1.6rem,2.6vw,2.2rem)}
  .products.grid>.s-half .product-card h3{font-size:1.55rem}
}
.products.list{grid-template-columns:1fr;gap:2.5rem}
.products.list>li{--ratio:4/3}
.product-card{display:block;color:var(--text);text-decoration:none;height:100%;border-radius:16px}
.product-card .ph{position:relative;display:block;overflow:hidden;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.product-card img,.product-card .placeholder{width:100%;aspect-ratio:var(--ratio,4/5);object-fit:cover}
.product-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.product-card:hover img{transform:scale(1.035)}
.product-card .placeholder{display:grid;place-items:center;color:var(--accent);outline:2px dashed var(--stitch);outline-offset:-12px;border-radius:16px}
.placeholder svg{width:42%;max-width:9rem;height:auto}
.badge{position:absolute;left:.75rem;top:.75rem;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem .4rem .7rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.875rem;font-weight:700;letter-spacing:.02em;line-height:1.2;box-shadow:0 6px 14px -8px #00000080}
.badge::before{content:"";flex:none;width:.75rem;height:.75rem;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.product-card .info{padding:.85rem .15rem 0}
.product-card h3{margin:0 0 .3rem;font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.25;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .2s}
.product-card:hover h3,.product-card:focus-visible h3{text-decoration-color:currentColor}
.price{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.price.soft{color:var(--muted);font-weight:500;font-style:italic}
.product-card .excerpt{margin:.5rem 0 0;color:var(--muted)}
@media (min-width:52rem){
  .products.list .product-card{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
  .products.list .product-card .info{padding:0}
  .products.list .product-card h3{font-size:1.8rem}
}

/* A card with several photos (photoStripCard in showcaseView.ts): a
   horizontal scroll-snap strip, one photo per snap point, so a swipe, a
   trackpad or the arrow keys move it with no script. The card is a <div>
   (the strip cannot sit inside a link): the photos and the name are each a
   link to the product. Every colour is a measured preset pair (text on
   surface, muted and accent on ground). No scrollbar on a touch screen,
   where the swipe is the way; a thin one with a mouse, which has no swipe. */
.strip{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:16px}
.strip::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.strip{scrollbar-width:thin}.strip::-webkit-scrollbar{display:initial}}
.strip>a{flex:0 0 100%;display:block;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always}
.strip:focus-visible{outline-offset:-3px;border-radius:16px}
.ph .badge,.ph-count{pointer-events:none}
.ph-count{position:absolute;right:.75rem;top:.75rem;padding:.3rem .7rem;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--border);font-size:.875rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.strip-dots{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:.4rem;margin-top:.6rem}
.strip-dots span{width:.55rem;height:.55rem;border-radius:999px;border:1.5px solid var(--muted)}
.strip-dots span.on{width:1.3rem;background:var(--accent);border-color:var(--accent)}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover h3,.card-link:focus-visible h3{text-decoration-color:currentColor}
.strip-ctl{margin:0 0 1.25rem}

/* Works: the photo, then a caption that is readable text, not a footnote */
.works figure{margin:0}
.works img{width:100%;aspect-ratio:var(--ratio,1/1);object-fit:cover;border-radius:14px;background:var(--surface)}
.works figcaption{margin-top:.65rem;font-size:1rem;line-height:1.5;color:var(--muted)}
.works figcaption a{display:flex;align-items:center;width:fit-content;min-height:44px;font-weight:600;color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.works figcaption a:hover{text-decoration-thickness:2px}
.see-all{margin:1.25rem 0 0}
.see-all .block-link{font-weight:600}

/* The story: text beside the photos on a wide screen */
.story-layout{display:grid;gap:1.75rem}
@media (min-width:60rem){.story-layout.both{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3.5rem;align-items:start}}
.story{max-width:40rem;font-size:1.0625rem}
.story p{line-height:1.7}
.story p:first-child::first-letter{float:left;font-family:var(--display);font-size:3.6em;line-height:.85;padding:.08em .12em 0 0;color:var(--accent)}
.gallery-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.gallery-grid li:first-child:nth-last-child(odd){grid-column:1/-1}
.gallery-grid li:first-child:nth-last-child(odd) img{aspect-ratio:16/9}
@media (min-width:60rem){.story-layout:not(.both) .gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.story-layout:not(.both) .gallery-grid li{grid-column:auto}.story-layout:not(.both) .gallery-grid img{aspect-ratio:1/1}}
.gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
.shipping p{max-width:42rem;margin:0;padding:1.1rem 1.35rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;outline:1.5px dashed var(--stitch);outline-offset:-6px}

/* Sharing */
.share{margin-top:3.5rem;padding:1.5rem;border-radius:18px;background:var(--surface);border:1px solid var(--border)}
.share h2{font-size:1.35rem;margin-bottom:.25rem}
.share .actions{margin:1rem 0 0}
.status-msg{margin:.75rem 0 0;font-weight:600}
[hidden]{display:none!important}

/* The message bar pinned to the bottom of a phone screen (stickyContact) */
.cta-bar{position:sticky;bottom:0;z-index:5;display:grid;gap:.5rem;margin-top:2.5rem;padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom,0px));background:var(--ground);border-top:1px solid var(--border);box-shadow:0 -14px 28px -22px #00000059}
/* WCAG 2.2 · 2.4.11 (#306, A11YW-04): what the keyboard focuses must not end
   up under the sticky bar. Tabbing at 375px hid «Añadir …» entirely behind
   it (the bar is ~79px; two lines at 200 % text, more). The browser scrolls
   focus into view leaving this much clear at the bottom. */
html:has(.cta-bar){scroll-padding-bottom:calc(7rem + env(safe-area-inset-bottom,0px))}
.cta-bar .button{width:100%;min-height:54px;font-size:1.0625rem}
.cta-bar .copy-note{margin:0;max-width:none}
@media (min-width:48rem){.cta-bar{display:none}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .cta-bar.after-hero{animation:cta-in linear both;animation-timeline:scroll(root);animation-range:8rem 22rem}
  }
}
@keyframes cta-in{from{transform:translateY(110%);visibility:hidden}1%{visibility:visible}to{transform:none;visibility:visible}}

/* The cart (#168). Every colour is a preset token already measured in
   test/i18n-and-contrast (text, muted and accent on surface and ground; white
   on the accent): no new pair. «Añadir» sits under the card, not inside its
   link; the bar is the contact bar, showing the cart once it holds something,
   on every width. */
.products>li{display:flex;flex-direction:column}
.products>li>.product-card{flex:1 1 auto;height:auto}
.cart-ctl{margin-top:.65rem;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.5rem}
.cart-ctl .cart-add{min-height:48px;padding:.6rem 1.1rem}
.cart-ctl.big{margin:0 0 1.25rem}
.cart-ctl.big .cart-add{min-height:54px;min-width:12rem}
.cart-step{display:inline-flex;align-items:center;gap:.25rem;border:2px solid var(--accent);border-radius:999px;background:var(--surface)}
.cart-step button{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--link);font:700 1.45rem/1 var(--body);cursor:pointer}
.cart-step button:hover{background:var(--ground)}
.cart-step output{min-width:2.2ch;text-align:center;font-weight:700;font-size:1.1rem;color:var(--text);font-variant-numeric:tabular-nums}
.cart-sum{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:space-between;gap:.35rem 1rem}
.cart-sum .cart-line{margin:0;font-size:1rem;color:var(--text)}
.cart-sum .cart-line span:first-child{color:var(--muted);font-weight:600}
.cart-sum .button{width:auto;flex:1 1 12rem}
.cta-bar.has-cart .cta-contact{display:none}
@media (min-width:48rem){.cta-bar.has-cart{display:grid;padding-left:max(1.25rem,calc((100% - 72rem)/2));padding-right:max(1.25rem,calc((100% - 72rem)/2))}.cart-sum .button{flex:0 0 auto}}
.cta-bar.has-cart{animation:none}

/* The request page (#168): pieces, total, her details; the order page's
   form rules (.op-form, .op-field) and tokens. */
.rq-page{max-width:46rem}
.rq-page>.lead{color:var(--muted);max-width:40rem}
.rq-section>h2{font-size:clamp(1.35rem,4vw,1.7rem);margin:1.5rem 0 1rem}
.rq-pieces{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.rq-piece{display:grid;gap:1rem;padding:1.1rem 1.1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.rq-piece-head{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:.75rem 1rem}
.rq-piece-head img{width:4.5rem;height:4.5rem;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.rq-piece-head>div{flex:1 1 12rem}
.rq-piece-head h3{margin:0 0 .2rem;font-size:1.2rem}
.rq-unit{margin:0;color:var(--muted);font-weight:600}
.rq-remove{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.rq-qty input{max-width:8rem}
.rq-hint{margin:0 0 .4rem;font-size:.95rem;color:var(--muted)}
.rq-total{margin-top:1.75rem}
.rq-total-value{margin:0 0 .5rem;font-family:var(--display);font-size:clamp(1.5rem,5vw,2rem);font-weight:600;overflow-wrap:anywhere}
.rq-fields{margin-top:0}
.rq-check{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.25rem .75rem;padding:.9rem 1rem;background:var(--surface);border:2px solid var(--muted);border-radius:12px}
.rq-check.small{padding:.6rem .75rem;border-width:1px}
.rq-check input{width:1.5rem;height:1.5rem;margin:.1rem 0 0;accent-color:var(--accent)}
.rq-check label{font-weight:600;cursor:pointer}
.rq-check .op-err,.rq-check .rq-terms-link{grid-column:2;margin:0}
.rq-terms-link a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.rq-choice{border:0;margin:0;padding:0;min-width:0}
.rq-choice legend{padding:0}
.rq-choice h2{font-size:clamp(1.35rem,4vw,1.7rem);margin:1.5rem 0 1rem}
.rq-radios{display:grid;gap:.6rem}
.rq-radio{align-items:center}
.rq-radio label{min-height:44px;display:flex;align-items:center}
.rq-turnstile{min-height:65px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rq-empty{margin-top:1.5rem}
/* Tracking and last step */
.rq-send{margin:1rem 0 .5rem}
.rq-send .button,.rq-send .button-outline{min-height:54px}
.rq-wa{font-size:1.1rem}
@media (max-width:39.99rem){.rq-send{flex-direction:column;align-items:stretch}}
.rq-message{margin-top:1rem}
.rq-message summary{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--link);cursor:pointer}
.rq-message pre{margin:.5rem 0 0;padding:1rem;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.95rem;background:var(--ground);border:1px solid var(--border);border-radius:12px;color:var(--text)}
.rq-fields-list{list-style:none;margin:.25rem 0 0;padding:0}
.rq-ideas,.rq-comment,.rq-reason{margin:.35rem 0 0;white-space:pre-line;overflow-wrap:anywhere}
.op-confirm-terms{display:grid;gap:1rem;width:100%}
.op-confirm-terms .button{justify-self:start}
/* The terms page */
.tc-list{margin:0 0 .75rem;padding-left:1.25rem}
.tc-list li{margin:.35rem 0}
.tc-text ul{padding-left:1.25rem}
.tc-text li{margin:.3rem 0}
.tc-section{padding-top:2rem}
.tc-none{margin-top:2rem;color:var(--muted)}

/* The footer: «Powered by A Trazos», quiet, in the workshop's colours */
.sc .site-footer{margin-top:0;padding-top:1.75rem;padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
.sc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1.5rem}
.sc-foot p{margin:0}
.sc-credit a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--muted);font-weight:600;text-decoration:none;letter-spacing:.01em}
.sc-credit a:hover{color:var(--text)}
.sc-credit a:hover span{text-decoration:underline;text-underline-offset:.2em}
.sc-credit .mark{flex:none;width:2.6rem;height:auto;overflow:visible}
.sc-tagline{font-weight:500}
.sc-credit .mark .thread,.sc-credit .mark .needle{stroke:currentColor}
.sc-privacy{font-size:.9rem;color:var(--muted)}
@media (max-width:47.99rem){.sc-foot{flex-direction:column;align-items:center;text-align:center}}

/* Product page */
.product{display:grid;gap:1.75rem;padding-top:1.25rem}
@media (min-width:56rem){.product{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:3.5rem;padding-top:2rem}.product-info{position:sticky;top:1.5rem}}
.carousel{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0 0 .5rem;border-radius:18px}
.carousel li{flex:0 0 88%;scroll-snap-align:start}
.carousel li:only-child{flex-basis:100%}
.carousel img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.product-media .product-card{--ratio:4/5}
.product h1{font-size:clamp(2.1rem,5.5vw,3.3rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:.75rem}
.product .price{font-family:var(--display);font-size:clamp(1.4rem,3vw,1.75rem);font-weight:600;margin-bottom:1.25rem}
.product .price.soft{font-family:var(--body);font-size:1.2rem}
.description{padding-top:1.25rem;border-top:2px dashed var(--stitch)}
.description p{max-width:40rem;line-height:1.7}
.product-info .status{margin-top:1.25rem}
.product-info .actions{max-width:26rem}
/* ── The order page (/o/<token>, #190) ─────────────────────────────────── */
/* Tokens only, like the showcase: with a published showcase the body carries
   `sc t-… a-…` and these read the WORKSHOP's preset; without one they read the
   site palette above (light and dark). Every text pair is one the contrast
   tests already measure: text/muted/link on ground and surface, on-accent on
   the accent. The step dots and the card outline are non-text (3:1). */
.op:not(.sc){--stitch:var(--border)}
.op-shop{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;margin:0;font-family:var(--display);font-size:1.15rem;font-weight:600}
.op-page{max-width:46rem;padding-top:1.75rem;padding-bottom:2.5rem}
.op-ref{margin:0 0 .6rem;font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.op-page h1{font-size:clamp(2rem,7.5vw,3rem);font-weight:500;line-height:1.08;letter-spacing:-.02em;margin-bottom:.6rem;overflow-wrap:break-word}
.op-page .lead{color:var(--muted);max-width:38rem}
.op-flash{margin:1.25rem 0 0;padding:.9rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:12px;font-weight:600}
.op-flash.warn{border-left-color:var(--text)}
/* The outcome line takes focus on load (formErrors.ts outcomeLine, #306): a
   ring in the text's own colour, so low vision sees where focus landed. */
.op-flash:focus{outline:3px solid currentColor;outline-offset:3px}
/* The progress line: dots joined by a seam, the label under each. Done is a
   filled dot with a tick, now is a ringed dot and bold text, and each state is
   also in words for a screen reader — never colour alone.
   A row while every word of every label fits its column; otherwise ONE
   vertical list (#477, UI-02): the Worker computes the narrowest row that
   keeps the words whole (stepsFit.ts) into a row-min-* class on the list's
   box, and STEPS_FIT_CSS, after these rules, turns the list vertical below
   it. No word is ever hyphenated or broken in the row. The list is a
   container too, so the labels shrink with the LIST (cqi), as the threshold
   assumes; a browser without cqi keeps the old vw size. */
.op-steps{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;container-type:inline-size}
.op-steps li{position:relative;flex:1 1 0;min-width:0;padding:2rem 0.15rem 0;font-size:clamp(.7rem,3.1vw,.85rem);font-size:clamp(0.7rem,3.45cqi,0.85rem);line-height:1.3;text-align:center;color:var(--muted)}
.op-steps li::after{content:"";position:absolute;top:.8rem;left:-50%;width:100%;border-top:2px dashed var(--muted)}
.op-steps li:first-child::after{display:none}
.op-steps li::before{content:"";position:absolute;top:.25rem;left:50%;z-index:1;box-sizing:border-box;width:1.2rem;height:1.2rem;margin-left:-.6rem;border-radius:50%;border:2px solid var(--muted);background:var(--ground);font-size:.75rem;font-weight:800;line-height:.95rem;text-align:center;color:var(--on-accent)}
.op-steps .done::before{content:"✓";content:"✓" / "";background:var(--accent);border-color:var(--accent)}
.op-steps .done::after,.op-steps .current::after{border-top-style:solid;border-color:var(--accent)}
.op-steps .current{color:var(--text);font-weight:700}
.op-steps .current::before{border:4px solid var(--accent);background:var(--surface)}
/* Only the vertical list has room for a done step's date and a visible «now». */
.op-step-date{display:none;font-size:.85rem;font-weight:400;color:var(--muted)}
.op-step-now{display:none;margin-left:.5rem;padding:0 .45rem;border:1px solid currentColor;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;vertical-align:.1em}
@supports (container-type:inline-size){
.op-steps-box{width:calc(100% * 10 / var(--row-min));container:op-steps/inline-size}
.op-steps-box>.op-steps{width:calc(100cqi * var(--row-min) / 10)}
}
.row-min-1300{--row-min:13}.row-min-1350{--row-min:13.5}.row-min-1375{--row-min:13.75}.row-min-1400{--row-min:14}.row-min-1425{--row-min:14.25}.row-min-1450{--row-min:14.5}.row-min-1500{--row-min:15}.row-min-1525{--row-min:15.25}.row-min-1550{--row-min:15.5}.row-min-1575{--row-min:15.75}.row-min-1625{--row-min:16.25}.row-min-1675{--row-min:16.75}.row-min-1700{--row-min:17}.row-min-1725{--row-min:17.25}.row-min-1750{--row-min:17.5}.row-min-1775{--row-min:17.75}.row-min-1800{--row-min:18}.row-min-1850{--row-min:18.5}.row-min-1875{--row-min:18.75}.row-min-1900{--row-min:19}.row-min-1925{--row-min:19.25}.row-min-1950{--row-min:19.5}.row-min-2025{--row-min:20.25}.row-min-2050{--row-min:20.5}.row-min-2500{--row-min:25}.row-min-2550{--row-min:25.5}.row-min-2600{--row-min:26}.row-min-2625{--row-min:26.25}.row-min-2800{--row-min:28}.row-min-2900{--row-min:29}
@container op-steps (width<10rem){.op-steps li{flex:0 0 100%;padding:0 0 1.1rem 2.1rem;font-size:.95rem;line-height:1.4;text-align:start;overflow-wrap:anywhere}.op-steps li:last-child{padding-bottom:0}.op-steps li::before{top:.065rem;left:0;margin-left:0}.op-steps li::after{top:.665rem;bottom:-.665rem;left:calc(.6rem - 1px);width:0;border-top:0;border-left:2px dashed var(--muted)}.op-steps li:first-child::after{display:block}.op-steps li:last-child::after{display:none}.op-steps .done::after{border-left-style:solid;border-color:var(--accent)}.op-steps .current::after{border-left-style:dashed;border-color:var(--muted)}.op-step-date{display:block}.op-step-now{display:inline-block}}
.op-todo ul{margin:.5rem 0 0;padding-left:1.25rem}
.op-todo li{margin:.25rem 0}
.op-todo a{display:inline-block;padding:.4rem 0;font-weight:700}
.op-steps .done{color:var(--text)}
/* Cards */
.op-card{margin:2rem 0 0;padding:1.4rem 1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.op-card.primary{border:2px solid var(--accent);outline:1.5px dashed var(--stitch);outline-offset:-9px;padding:1.6rem 1.35rem 1.6rem}
.op-card h2{font-size:clamp(1.4rem,4.5vw,1.8rem);margin-bottom:.5rem}
.op-card>p{max-width:38rem}
.op-label{margin:.75rem 0 .15rem;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.op-mask{margin:0 0 .5rem;font-family:var(--display);font-size:clamp(1.25rem,4vw,1.5rem);line-height:1.3;overflow-wrap:anywhere}
.op-note{font-size:.95rem;color:var(--muted);margin:.25rem 0 0}
.op-deposit{max-width:38rem;margin:0 0 1rem}
.op-wrong{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border)}
.op-wrong>p{margin:0}
.op-wrong .actions{margin:.85rem 0 0}
.op-pickup>h3{margin:0 0 .5rem;font-size:1.15rem}
.op-pickup>p{margin:0}
.op-pickup .actions{margin:.85rem 0 0}
.op-ship{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.op-ship>h3{margin:0 0 .5rem;font-size:1.15rem}
/* The form: one column on a phone; postcode beside the town from 32rem */
.op-form{display:grid;gap:1.1rem;margin-top:1.25rem}
.op-row{display:grid;gap:1.1rem}
@media (min-width:32rem){.op-row{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.op-field label{display:block;margin-bottom:.35rem;font-weight:700}
.op-mark{font-weight:400;color:var(--muted)}
.op-field input,.op-field select{display:block;width:100%;min-height:52px;padding:.7rem .85rem;font:inherit;font-size:1.0625rem;color:var(--text);background:var(--surface);border:2px solid var(--muted);border-radius:12px;appearance:none;-webkit-appearance:none}
.op-field select{padding-right:2.5rem;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 50%,calc(100% - .9rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat}
.op-field input:focus,.op-field select:focus{outline:3px solid var(--link);outline-offset:2px;border-color:var(--text)}
/* A date as day / month / year (dateField.ts): the legend reads like a field's
   label and sits INSIDE the box (floated), so an error's red border goes round
   it instead of through it; the parts wrap when the text is large. */
.rq-date-field{margin:0;padding:0;border:0;min-width:0}
.rq-date-field legend{float:left;width:100%;padding:0;margin-bottom:.35rem;font-weight:700}
.rq-date-field legend+*{clear:both}
.rq-date{display:flex;flex-wrap:wrap;gap:.5rem}
.rq-date-part{min-width:0}
.op-field .rq-date-part label{margin-bottom:.2rem;font-weight:400;font-size:.95rem;color:var(--muted)}
.op-field .rq-date select{padding-right:2rem}
.rq-date-day{flex:1 1 5rem}
.rq-date-month{flex:3 1 8.5rem}
.rq-date-year{flex:1.5 1 5.5rem}
/* Errors (formErrors.ts): the summary and every invalid field are red boxes —
   a red border on a solid red tint, an icon, the words in red. */
.op-errors{margin:0 0 .25rem;padding:1rem 1.1rem .6rem;border:3px solid var(--err);border-radius:12px;background:var(--errBg);scroll-margin-top:1rem}
.op-errors:focus{outline:3px solid var(--err);outline-offset:3px}
.op-errors .op-errors-h{display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:.5rem;margin:0 0 .25rem;font-family:var(--body);font-size:1.15rem;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--err)}
.op-errors ul{margin:0;padding-left:1.4rem;color:var(--err)}
.op-errors a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--err);text-decoration:underline;text-decoration-thickness:2px}
.err-icon{flex:none;width:1.4rem;height:1.4rem}
.op-err{display:flex;align-items:flex-start;gap:.45rem;margin:.1rem 0 .5rem;font-weight:700;line-height:1.4;color:var(--err)}
.op-err .err-icon{width:1.25rem;height:1.25rem;margin-top:.05rem}
.op-field.has-error{padding:.85rem 1rem 1rem;border:3px solid var(--err);border-radius:12px;background:var(--errBg)}
.op-field [aria-invalid="true"]{border-color:var(--err);border-width:3px}
/* A summary link lands on the control: keep its label and message in view. */
[aria-invalid="true"]{scroll-margin-top:11rem}
.rq-check.has-error{border-color:var(--err);border-width:3px;background:var(--errBg)}
.rq-check .op-err{margin:.1rem 0 0}
.rq-choice-body.has-error{padding:.9rem 1rem 1rem;border:3px solid var(--err);border-radius:12px;background:var(--errBg)}
.op-privacy{margin:0;font-size:.95rem;color:var(--muted)}
.op-form .button{width:100%;min-height:54px;font-size:1.0625rem}
@media (min-width:40rem){.op-form .button{width:auto;justify-self:start}}
/* Lists */
.op-section{margin-top:2.5rem}
.op-section>h2{display:flex;align-items:center;gap:1rem;font-size:clamp(1.35rem,4vw,1.7rem);margin-bottom:1rem}
.op-section>h2::after{content:"";flex:1;min-width:2rem;border-top:2px dashed var(--stitch)}
.op-items{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.op-item{margin:0 0 .4rem;font-weight:700;font-size:1.1rem}
.op-qty{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.op-stages{list-style:none;margin:0;padding:0}
.op-stages li{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;justify-content:space-between;gap:.1rem 1rem;padding:.55rem 0;border-top:1px dashed var(--border)}
.op-stage-state{color:var(--muted);font-size:.95rem}
.op-stages .done .op-stage-state::before{content:"✓ ";content:"✓ " / "";font-weight:800;color:var(--text)}
.op-stages .now span:first-child{font-weight:700}
.op-stages .now .op-stage-state{color:var(--text);font-weight:600}
.op-dl{margin:0;display:grid}
.op-dl div{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;justify-content:space-between;gap:.15rem 1rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.op-dl dt{color:var(--muted)}
.op-dl dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.op-card .op-dl div:last-child{border-bottom:0}
.op-card .actions{margin:1.25rem 0 1.5rem}
/* «Cómo pagar» (20260929170000): one card per way to pay; the IBAN never
   breaks mid-group, and wraps whole on a narrow phone. */
.op-pay{margin:0 0 1rem;padding:1rem 1.15rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.op-pay h3{margin:0 0 .25rem;font-size:1.15rem}
.op-pay .op-dl div:last-child{border-bottom:0}
.op-pay-account{letter-spacing:.02em;word-spacing:.1em}
.op-pay .actions{margin:.75rem 0 0}
.op-more{margin-top:2.75rem}
.op-more p{margin:0}
.op-page .share{margin-top:1.25rem}
.op-private{margin-top:2.5rem}
/* «Guardar o imprimir este pedido» (#638): at the page's foot, or in the closing notice */
.op-keep{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.op-keep .actions,.op-closed .actions{margin:0 0 .6rem}
.op-keep .op-note{max-width:38rem}
.op-closed .actions{margin-top:1rem}
.op-closed-when{font-weight:700}
.op-closed .op-closed-readonly{margin-top:1rem}
.print-only{display:none}
.op-contact-list{list-style:none;margin:.75rem 0 0;padding:0}
.op-contact-list li{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:0 1rem;border-bottom:1px solid var(--border)}
.op-contact-list li:last-child{border-bottom:0}
.op-contact-kind{flex:0 0 6rem;color:var(--muted)}
.op-contact-list a{display:flex;flex:1 1 10rem;min-width:0;align-items:center;min-height:44px;font-weight:700;overflow-wrap:anywhere}
.op-terms summary{min-height:44px;box-sizing:border-box;padding:.6rem 0;font-weight:600;color:var(--link);cursor:pointer}
.op-terms h3{margin:1.25rem 0 .5rem;font-size:1.0625rem}
.op-terms-text>.op-note{margin:0 0 .5rem}
.op-choice{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.75rem;margin:1.25rem 0 .75rem}
.op-choice form{margin:0}
.op-img{display:block;border-radius:12px;overflow:hidden;background:var(--ground);border:1px solid var(--border)}
.op-img:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.op-img img{display:block;width:100%;height:auto;object-fit:contain}
.op-img-main{margin:1rem 0 .5rem}
.op-img-main img{aspect-ratio:4/3}
.op-img-thumb img{aspect-ratio:4/3;object-fit:cover}
.op-img-photo img{aspect-ratio:1/1;object-fit:cover}
.op-design-all{display:grid;gap:1rem;margin:1rem 0 .5rem}
.op-design-all .op-img-main{margin:0}
.op-thumbs{list-style:none;margin:.5rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.6rem}
.op-design-desc{margin:1rem 0 0;white-space:pre-line}
.op-changes{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.op-changes h3{margin:0;font-size:1.15rem}
.op-changes .button-outline{justify-self:start;min-height:52px}
.op-field textarea{display:block;width:100%;min-height:6.5rem;padding:.7rem .85rem;font:inherit;font-size:1.0625rem;line-height:1.45;color:var(--text);background:var(--surface);border:2px solid var(--muted);border-radius:12px;resize:vertical}
.op-field textarea:focus{outline:3px solid var(--link);outline-offset:2px;border-color:var(--text)}
.op-field textarea::placeholder{color:var(--muted);opacity:1}
.op-sub{margin:.9rem 0 .35rem;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.op-design-line{margin-top:.5rem}
.op-design-state{margin:.35rem 0 0}
.op-design-state.done{font-weight:600}
.op-design-state.now{font-weight:700}
.op-design-state a{display:inline-flex;align-items:center;min-height:44px}
.op-design-comment{margin:.25rem 0 0;overflow-wrap:anywhere}
.op-photo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.9rem}
.op-photo-grid figure{margin:0}
.op-photo-grid figcaption{display:flex;flex-direction:column;gap:.1rem;margin-top:.35rem;font-size:.95rem}
.op-photo-caption{font-weight:600;overflow-wrap:anywhere}
.op-photo-date{color:var(--muted)}
.op-media-item{margin-bottom:1.5rem}
/* The example order (demoOrder.ts): a ribbon over the workshop's bar in the
   theme's own text and ground, swapped — the pair the theme tests measure, at
   the same ratio — and the banner after a button, an ordinary warn flash. */
.demo-ribbon{background:var(--text);color:var(--ground);font-size:.95rem;line-height:1.45}
.demo-ribbon .wrap{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:space-between;gap:.25rem 1.5rem;padding-top:.5rem;padding-bottom:.5rem}
.demo-ribbon p{margin:0}
.demo-ribbon-links{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.demo-ribbon a{display:inline-flex;align-items:center;min-height:44px;color:var(--ground);font-weight:600;text-decoration:underline}
.demo-ribbon a:focus-visible{outline:3px solid var(--ground);outline-offset:2px}
/* A page opened with the team code (teamMark.ts, #568): one band over
   everything, the page's text and ground swapped — the pair every palette
   is measured on — with a dashed edge, so it is not told from the example
   order's ribbon, or from the page, by colour alone. */
.team-mark{background:var(--text);color:var(--ground);font-size:.95rem;line-height:1.45;border-bottom:3px dashed var(--ground)}
.team-mark p{margin:0 auto;padding-top:.625rem;padding-bottom:.625rem}
.team-mark strong{font-weight:700;margin-right:.375rem}
/* #601: a read-only team view. The sentence under a disabled control takes a
   line of its own inside a row of choices, and the control reads as off by
   its dashed edge and cursor — its words keep the page's full contrast. */
.team-readonly{flex-basis:100%;margin:.5rem 0 0;color:var(--text);font-weight:600}
button.button[disabled],button.button[disabled]:hover{cursor:not-allowed;background:transparent;color:var(--text);border:2px dashed var(--text);box-shadow:none}
.demo-inert{margin-top:1rem}
.demo-order-note{margin:0;color:var(--muted)}
.code-page{max-width:34rem}
.code-form .op-field .op-note{margin:0 0 .6rem}
.code-form input{font-size:1.35rem;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.code-form .button{width:100%;min-height:54px;font-size:1.0625rem}
@media (min-width:40rem){.code-form .button{width:auto;justify-self:start}}
.code-cant{margin-top:2rem}
/* The Turnstile check on the code form (M-01): a red box, like a field's, when it did not pass. */
.code-check{margin:0 0 1rem}
.code-check.has-error{padding:.85rem 1rem 1rem;border:3px solid var(--err);border-radius:12px;background:var(--errBg)}
@media (prefers-reduced-motion:no-preference){.identity{animation:rise .7s cubic-bezier(.2,.7,.2,1) .05s both}}

/* ── Legal texts (/aviso-legal, /privacidad, /terminos, /normas, /cookies; legal.ts) and the footer's links ── */
.legal-links ul{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:0 1rem;margin:.25rem 0 .5rem;padding:0;list-style:none}
.legal-links a{display:inline-flex;align-items:center;min-height:44px}
.legal-links a[aria-current="page"]{color:var(--text);font-weight:600}
/* The language selector (A Trazos's own pages only; languageSwitcher in html.ts): quiet,
   in the footer's smaller size, but every name a 44×44 target. Colours are the measured
   link-on-ground and text-on-ground pairs; focus is the site-wide :focus-visible ring. */
.lang-switch ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 .15rem;margin:0 0 .5rem -.4rem;padding:0;list-style:none;font-size:.9rem}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 .4rem;text-decoration:none}
.lang-switch a:hover{text-decoration:underline}
.lang-switch a[aria-current="true"]{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-thickness:2px}
.legal-doc{max-width:48rem;padding-top:1.5rem;padding-bottom:1rem}
.legal-meta{color:var(--muted);font-size:.95rem}
.legal-body h2{font-size:clamp(1.25rem,3vw,1.5rem);margin-top:2.25rem}
.legal-body h3{font-family:var(--body);font-size:1.05rem;font-weight:700;letter-spacing:0;margin-top:1.5rem}
.legal-body ul,.legal-body ol,.legal-others ul{padding-left:1.25rem;margin:0 0 1rem}
.legal-body li{margin-bottom:.4rem}
.legal-body a{overflow-wrap:anywhere}
.legal-table{overflow-x:auto;margin:0 0 1.25rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.legal-table table{width:100%;border-collapse:collapse;font-size:.95rem}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:.6rem .75rem;border-bottom:1px solid var(--border);min-width:8rem}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table th{background:var(--clay);color:var(--text)}
.legal-others{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.legal-others h2{font-size:1.2rem}
/* /eliminar-cuenta (accountDeletion.ts): the privacy policy's retention section, quoted; and /privacidad's link to the page. */
.legal-pointer{font-weight:600}
.policy-excerpt{margin:0 0 1.5rem}
.policy-excerpt blockquote{margin:0;padding:0 0 0 1rem;border-left:3px solid var(--border)}
.policy-excerpt figcaption{color:var(--muted);font-size:.95rem;margin-top:.5rem}

/* ── A Trazos's own pages: the canvas «Presentación A Trazos» (2026-10-05) ──
   Every page with the site chrome carries <body class="site">: the header,
   the footer and the type scale below are the canvas's, on the home and on
   /sobre, the legal texts, /eliminar-cuenta, the forms and the error pages
   alike. The home adds class="home". Colours are the LIGHT / DARK tokens
   (dark derived from them: the canvas is drawn light only), each text pair
   measured in test/i18n-and-contrast. */
.site{font-size:1.125rem}
.wrap.wide{max-width:81rem;padding-left:clamp(1rem,4vw,3rem);padding-right:clamp(1rem,4vw,3rem)}
.site h1+.stitch,.site h2+.stitch{display:block;width:12.5rem;max-width:70%;height:20px;margin:1rem 0;color:var(--link)}
.site h1+.stitch{margin-top:-.25rem;margin-bottom:1.25rem}
.site .actions .button,.site .actions .button-outline{min-height:52px;padding:0 1.75rem;font-size:1.0625rem}
.ic{display:block;flex:none;width:22px;height:22px}
.ic .t{stroke:var(--thread)}
.ic .n{stroke:var(--needle)}
.drawn-a{display:block;height:auto;overflow:visible}
.drawn-a .thread,.thread-divider .thread,.long-thread .thread{stroke:var(--thread)}
.drawn-a .needle,.thread-divider .needle,.long-thread .needle{stroke:var(--needle)}

/* The header */
.site-header-in{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:space-between;gap:12px 32px;padding-top:20px;padding-bottom:20px}
.site .brand{gap:12px;min-height:48px;font-size:1.75rem}
.site .brand .mark{width:50px;margin-top:0}
.site-nav ul{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:4px 8px;margin:0;padding:0;list-style:none;font-size:1rem;font-weight:600}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--text);text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-style:dashed;text-decoration-thickness:2px;text-underline-offset:.35em}
.site-nav .button{min-height:44px;padding:0 20px;border-radius:999px;color:var(--on-accent)}
/* At phone width the row above wrapped onto two lines (owner, 2026-10-05):
   below the breakpoint the header is the logotype, «Pide acceso» and a native
   <details> «Menú» whose panel lies OVER the page (absolute, from the header),
   so opening it moves nothing underneath. The breakpoint, 62rem, is where the
   widest language's row still fits on one line: French needs 904 px of logotype,
   gap and links; 992 px leaves 912 between the gutters (Chrome, 2026-10-05). Below
   30rem the button shows its three lines only — its word stays its accessible
   name — so the logotype, «Pide acceso» and the button share one row at
   360–390 px in all nine languages. */
.site-header{position:relative}
.site-nav{display:none}
.site-narrow{display:flex;align-items:center;gap:8px;margin-left:auto}
.site-narrow>.button{min-height:44px;padding:0 14px;font-size:.9375rem;white-space:nowrap}
.site-menu-button{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border:2px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:.9375rem;font-weight:600;cursor:pointer;list-style:none;user-select:none}
.site-menu-button::-webkit-details-marker{display:none}
.site-menu-button:hover{border-color:var(--text)}
.site-menu-button:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.site-menu[open]>.site-menu-button{border-color:var(--text)}
.site-menu:not([open]) .site-menu-panel{display:none}
.site-menu-panel{position:absolute;top:calc(100% - 12px);left:clamp(1rem,4vw,3rem);right:clamp(1rem,4vw,3rem);z-index:20;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 40px -18px rgb(0 0 0 / .35)}
.site-menu-panel ul{display:block;margin:0;padding:0;list-style:none;font-size:1.0625rem;font-weight:600}
.site-menu-panel a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--text);text-decoration:none}
.site-menu-panel a:hover{text-decoration:underline}
.site-menu-panel a[aria-current="page"]{text-decoration:underline;text-decoration-style:dashed;text-decoration-thickness:2px;text-underline-offset:.35em}
@media (max-width:29.99rem){.site-header-in{gap:12px}.site .brand{gap:8px;font-size:1.375rem}.site .brand .mark{width:38px}.site-narrow>.button{font-size:.875rem}.site-menu-button{padding:0 9px}.site-menu-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:23.99rem){.site .brand{font-size:1.25rem}.site .brand .mark{width:32px}}
@media (min-width:62rem){.site-nav{display:block}.site-narrow{display:none}}

/* The footer */
.site .site-footer{margin-top:clamp(3rem,6vw,5rem);padding:clamp(56px,7vw,88px) 0 40px;border-top:2px dashed var(--border);font-size:1rem;color:var(--muted)}
.home .site-footer{margin-top:0;border-top:0}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px clamp(32px,6vw,96px)}
.foot-main{flex:1 1 18.75rem;min-width:0;max-width:26.25rem}
.foot-main p{margin:0 0 10px}
.site .foot-main .signature{margin:0 0 20px;font-size:2.5rem}
.foot-code{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot-col{flex:0 1 13.75rem}
.foot-h{margin:0 0 8px;font-family:var(--body);font-size:.875rem;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.site .foot-col ul{display:block;margin:0;padding:0;list-style:none}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--text)}
.foot-col a[aria-current="page"]{font-weight:600;text-decoration-thickness:2px}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;gap:12px 32px;margin-top:40px;padding-top:20px;border-top:2px dashed var(--border);font-size:.9375rem}
.foot-bar .foot-made{margin:0;font-family:var(--display);font-style:italic}
.foot-bar .lang-switch ul{margin:0}

/* Section titles: the eyebrow, the h2 with its second half in the thread's colour, the stitch */
.sec-title{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.1;letter-spacing:-.015em}
.sec-title em{font-style:italic;color:var(--link)}
.sec{padding-top:clamp(4.5rem,9vw,8rem)}
.sec-lg{padding-top:clamp(5rem,10vw,9rem)}
.sec-title+.stitch{margin:16px 0}
.long-thread{display:block;width:100%;height:auto;margin:28px 0 8px;overflow:visible}
.thread-divider{max-width:40rem;margin:clamp(72px,9vw,128px) auto 0;padding:0 clamp(1rem,4vw,3rem)}
.thread-divider svg{display:block;width:100%;height:auto;overflow:visible}
.muted a,.flow a{font-weight:600}

/* 1 · The hero */
.hero{padding-top:clamp(24px,4vw,56px);text-align:center}
/* The «A» shrank for phones (launch review B8, 2026-10-07): at 390×844 it took
   106 px more and «Pide acceso a la beta» began at pixel 672, under the bars of
   Instagram's in-app browser. */
.hero-a{width:clamp(120px,22vw,300px);margin:0 auto 8px}
.hero .eyebrow{margin-bottom:14px}
.hero h1{max-width:16ch;margin:0 auto;font-size:clamp(2.625rem,6.2vw,5.25rem);line-height:1.04;letter-spacing:-.02em}
.hero h1 em{display:block;font-style:italic;color:var(--link)}
.hero-sub{margin:.75rem auto 0;font-family:var(--display);font-style:italic;font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.25;color:var(--muted)}
.hero .stitch{width:min(300px,70%);height:22px;margin:18px auto 20px}
@media (max-width:37.5rem){.hero .stitch{width:min(200px,60%);height:16px;margin:12px auto 14px}.hero .actions{margin-top:20px}}
/* A laptop's 768–800 px of height (B8): with the «A» at its widest the button
   began at pixel 765 of 768 at 1440 px. A short window takes a smaller «A»
   and less air above it; a tall one keeps the canvas's. */
@media (min-width:37.51rem) and (max-height:56rem){.hero{padding-top:24px}.hero-a{width:clamp(120px,14vw,200px)}}
.hero .lead{max-width:40em;margin:0 auto;font-size:clamp(1.125rem,1.6vw,1.3125rem);color:var(--muted)}
.hero .actions{justify-content:center;margin:28px 0 14px}
.beta-note{display:flex;justify-content:center;align-items:flex-start;gap:8px;max-width:36em;margin:0 auto;font-size:.9375rem;color:var(--muted)}
.beta-note .ic{width:20px;height:20px;margin-top:2px}
.pair{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,5vw,72px);max-width:47.5rem;margin:0 auto}
.hero .pair{margin-top:clamp(40px,5vw,64px)}
.pair-item{flex:0 1 17.5rem;min-width:0}
.pair-item.low{margin-top:56px}
.pair-cap{margin:14px 0 0;font-size:.9375rem;font-weight:600;color:var(--muted)}

/* 1b · «Míralo funcionando» (launch review B1, 2026-10-07): two cards under the
   hero, the trade card's surface and radius (.trade, below), each with its
   showcase's link preview on top and an outline button of ≥ 52 px. */
.live{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr));gap:20px;margin:clamp(24px,3vw,36px) 0 0;padding:0;list-style:none}
.live-card{display:flex;flex-direction:column;gap:12px;padding:14px 14px 22px;background:var(--surface);border-radius:20px}
.live-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:14px;background:var(--linen)}
.live-card h3{margin:6px 8px 0;font-family:var(--display);font-weight:500;font-size:1.625rem;line-height:1.2}
.live-card p{margin:0 8px}
.live-card .muted{font-size:1rem}
.live-card .actions{margin-top:6px}

/* 2 · An order, start to finish; and the beta's three steps */
#encargo .sec-title,#beta .sec-title{max-width:20ch}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.625rem),1fr));gap:28px 24px}
.flow li{display:flex;flex-direction:column;gap:6px}
.flow .num{font-family:var(--display);font-style:italic;font-size:2.125rem;line-height:1;color:var(--link)}
.flow h3{margin:0;font-family:var(--body);font-size:1.1875rem;font-weight:700;line-height:1.3;letter-spacing:0}
.flow p{margin:0;font-size:1rem;line-height:1.5;color:var(--muted)}
.flow-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:32px}
.flow-3 li{gap:8px}
.flow-3 .num{font-size:2.75rem}
.flow-3 h3{font-size:1.3125rem}
.flow-3 p{font-size:1.125rem;line-height:1.6}
.beta-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.25rem),1fr));gap:16px 32px;margin-top:40px;padding:24px 28px;border:2px dashed var(--seam);border-radius:20px;font-size:1rem}
.beta-notes p{margin:0}

/* 3 · Your day: three features, each a text and a phone, alternating */
.intro{max-width:47.5rem;margin:0 auto clamp(48px,6vw,88px);text-align:center}
.site .intro .stitch{margin:16px auto}
.intro p{margin:0}
.feature-stack{display:flex;flex-direction:column;gap:clamp(72px,9vw,128px)}
.feature{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px clamp(32px,7vw,112px)}
.feature.reverse,.split.reverse{flex-direction:row-reverse}
.feature-text{flex:1 1 27.5rem;min-width:0;max-width:36.25rem}
.feature-text .eyebrow{margin-bottom:10px}
.feature h3{margin:0 0 16px;font-family:var(--display);font-weight:500;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15}
.feature p{margin:0 0 14px}
.feature-phone{flex:0 1 17.5rem;min-width:0}
.chips{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;min-height:34px;padding:2px 14px;border-radius:999px;border:1.5px dashed var(--seam);font-size:.9375rem;font-weight:600;color:var(--muted)}

/* The bands: clay («¿Llega a tiempo?», the closing), ink (the showcase), linen (the trades) */
.tone-band{margin-top:clamp(72px,9vw,128px)}
.tone-band-in{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px)}
.tone-clay{background:var(--clay)}
.tone-linen{margin-top:clamp(80px,10vw,144px);background:var(--linen)}
.tone-ink{--ground:#2A1E19;--surface:#35271F;--clay:#3B2C24;--text:#F6EDE7;--muted:#D9C8BC;--link:#E6C3AE;--sage:#A9BFAD;--buttonBg:#E6C3AE;--buttonText:#2A1E19;--border:#4B3A31;--thread:#E6C3AE;--needle:#8FA894;--err:#FFB4AB;--errBg:#4D3830;--linen:#231915;--seam:#7E6556;--toneTight:#E8C27A;--toneNo:#F2A9B0;--bezel:#140E0C;--bezelRing:#6B5448;--skLine:#4B3A31;--skInk:#6E5A4E;--skDim:#211814;--accent:#E6C3AE;--on-accent:#2A1E19;margin-top:0;background:#2A1E19;color:var(--text)}
.measure{max-width:48.75rem}
.measure p{margin:0 0 14px}
.measure p:last-child{margin:0}

/* 4 · «¿Llega a tiempo?» */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr));gap:clamp(48px,6vw,80px);margin-top:clamp(48px,6vw,80px)}
.two-col{display:flex;flex-direction:column;gap:24px}
.two-col h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.625rem,2.6vw,2.125rem);line-height:1.2}
.two-col>p{margin:0}
.two-col .pair{gap:clamp(16px,3vw,32px);margin:0}
.two-col .pair-item{flex-basis:16.25rem}
.two-col .pair-item.low{margin-top:48px}
.fits-demo{display:flex;flex-direction:column;gap:14px;margin:0}
.fits-mock{display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:var(--surface);border:1.5px solid var(--border);border-radius:18px}
.fits-mock-title{font-family:var(--display);font-size:1.5rem;font-weight:500}
.fits-mock-help{font-size:1rem;color:var(--muted)}
.fits-mock-row{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;gap:10px}
.fits-mock-field{display:flex;flex-direction:column;gap:4px;font-size:.875rem;font-weight:600;color:var(--muted)}
.fits-mock-field i{display:block;width:64px;height:44px;border:1.5px solid var(--seam);border-radius:10px;background:var(--surface)}
.fits-mock-field.wide i{width:88px}
.fits-mock-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:1rem}
.verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.25rem),1fr));gap:12px;margin:0;padding:0;list-style:none}
.verdict{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;color:var(--tone)}
.verdict .ic{width:26px;height:26px}
.verdict strong{font-size:1.0625rem}
.verdict span{font-size:.9375rem;line-height:1.45;color:var(--muted)}
.v-yes{--tone:var(--sage)}
.v-tight{--tone:var(--toneTight)}
.v-no{--tone:var(--toneNo)}
.fits-demo figcaption,.offline-demo figcaption{font-size:.9375rem;color:var(--muted)}

/* 5 · The showcase, on the ink band */
.showcase-head{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;justify-content:space-between;gap:32px clamp(32px,6vw,96px)}
.showcase-head-text{flex:1 1 32.5rem;min-width:0;max-width:43.75rem}
.showcase-head-text p{margin:0 0 14px}
.showcase-head-text p:last-child{margin:0}
.showcase-head-cta{margin:0}
.showcase-head-cta .button{min-height:52px;padding:0 1.75rem;font-size:1.0625rem}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18.75rem),1fr));gap:48px clamp(24px,4vw,56px);margin:clamp(48px,6vw,80px) 0 0;padding:0;list-style:none}
.trio li{display:flex;flex-direction:column;gap:20px}
.trio-phone{width:100%;max-width:17.5rem;margin:0 auto}
.trio h3{margin:0;font-family:var(--body);font-size:1.25rem;font-weight:700;letter-spacing:0}
.trio p{margin:0;font-size:1rem}

/* 6, 7, 8 · Text beside a pair of phones (or the offline figure) */
.split{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px clamp(32px,7vw,112px)}
.split-text{flex:1 1 28.75rem;min-width:0;max-width:37.5rem}
.split-text>p{margin:0 0 14px}
.split>.pair,.split>.offline-art{flex:0 1 37.5rem;min-width:0;margin:0}
.split .pair{gap:clamp(16px,3vw,32px)}
.ticks{max-width:40rem;margin:0 0 18px;padding:0;list-style:none}
.ticks li{display:flex;gap:14px;padding:12px 0;border-bottom:2px dashed var(--border)}
.ticks .ic{margin-top:3px}
.split-text .small{font-size:1rem}
.prompt{margin:22px 0 0;padding:22px 24px;background:var(--surface);border:1.5px dashed var(--seam);border-radius:18px}
.prompt figcaption{margin:0 0 8px;letter-spacing:.08em}
.prompt blockquote{margin:0}
.prompt blockquote p{margin:0;font-family:var(--display);font-style:italic;font-size:1.1875rem;line-height:1.5}
.prompt q{quotes:"«" "»"}
.prompt q:lang(en),.prompt q:lang(nl){quotes:"“" "”"}
.prompt q:lang(de){quotes:"„" "“"}
.prompt q:lang(pl){quotes:"„" "”"}
.offline-art{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:32px}
.offline-demo{display:flex;flex-direction:column;gap:14px;flex:1 1 16.25rem;min-width:0;max-width:20rem;margin:0}
.offline-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:6px 16px;border-radius:20px;line-height:1.35;background:var(--text);color:var(--ground);font-size:.9375rem;font-weight:600}
.offline-chip .ic{width:18px;height:18px}
.offline-card{display:flex;flex-direction:column;gap:12px;padding:18px 20px;background:var(--surface);border:1.5px solid var(--border);border-radius:18px;box-shadow:0 14px 30px #2B201B14}
.offline-card p{margin:0;font-size:1.0625rem}
.offline-card ul{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px;margin:0;padding:0;list-style:none}
.offline-card li{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:.9375rem;font-weight:600;color:var(--muted)}
.offline-card li.filled{padding:0 18px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.offline-card li.outline{padding:0 18px;border-radius:999px;border:1.5px solid var(--accent);color:var(--link)}
.offline-phone{flex:0 1 16.25rem;min-width:0}

/* 9 · And also: one compact line (owner, 2026-10-05), not six cards */
.also{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:14px 28px;margin:clamp(24px,3vw,36px) 0 0;padding:0;list-style:none}
.also li{display:inline-flex;align-items:center;gap:10px;font-size:1.0625rem;font-weight:600}
.also .ic{width:26px;height:26px}

/* 10 · Trades, on the linen band */
.legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin:32px 0 28px;font-size:.9375rem;color:var(--muted)}
.legend div{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:10px}
.legend dd{margin:0}
.legend dt,.phases li{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:2px solid var(--thread);font-weight:600;color:var(--text)}
.legend dt{background:var(--surface)}
.legend dt.machine,.phases li.machine{border-style:dashed;border-color:var(--needle)}
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21.25rem),1fr));gap:20px;margin:0;padding:0;list-style:none}
.trade{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--surface);border-radius:20px}
.trade h3{margin:0;font-family:var(--display);font-weight:500;font-size:1.625rem}
.trade p{margin:0;font-size:.9375rem}
.phases{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:6px;margin:0;padding:0;list-style:none;font-size:.9375rem;font-weight:600}
.swatch{display:block;width:96px;height:20px}
.sw-emb{color:#B4532A}.sw-cer{color:#2F4B7C}.sw-wood{color:#8A6414}.sw-bak{color:#8C2F39}.sw-print{color:#4A6350}.sw-other{color:#4F6B2F}
/* AFTER the light rules above, same specificity: on a dark page the band goes a step deeper and the swatches lighten (they never showed while this came first). */
@media (prefers-color-scheme:dark){.tone-ink{background:#1A1210}.sw-emb{color:#E39A78}.sw-cer{color:#9DB5DE}.sw-wood{color:#E0BC74}.sw-bak{color:#EBA0A8}.sw-print{color:#A9BFAD}.sw-other{color:#B5CC8E}}

/* 12 · Questions: a <details> each */
.faq{display:flex;flex-wrap:wrap;gap:32px clamp(32px,6vw,96px)}
.faq-head{flex:1 1 17.5rem;min-width:0;max-width:23.75rem}
.faq-head p{margin:16px 0 0}
.faq-list{flex:999 1 35rem;min-width:0}
.faq details{border-bottom:2px dashed var(--border)}
.faq summary{min-height:56px;padding:14px 0;font-family:var(--display);font-size:1.375rem;font-weight:500;line-height:1.3;cursor:pointer}
.faq details p{margin:0 0 20px;color:var(--muted)}

/* 13 · The closing «A», on the clay band */
.closing-cta .tone-band-in{max-width:53.75rem;padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px);text-align:center}
.closing-a{width:168px;margin:0 auto 20px}
.closing-cta .muted{max-width:34em;margin:18px auto 0}
.closing-cta .actions{justify-content:center;margin:28px 0 0}

/* The error and 404 pages: the drawn «A» over the title */
.error-page{max-width:46rem;padding-top:clamp(2rem,5vw,4rem);text-align:center}
.error-a{width:clamp(160px,22vw,240px);margin:0 auto 1rem}
.error-page h1+.stitch{margin-left:auto;margin-right:auto}
.error-page .lead{color:var(--muted)}
.error-page .actions{justify-content:center}

/* The iPhone frame (phone.ts): the screenshot, or the drawing of its screen */
.phone{width:100%;aspect-ratio:280/580;padding:3.6%;border-radius:17%/8.2%;background:var(--bezel);box-shadow:0 0 0 1.5px var(--bezelRing),0 22px 44px -10px #2B201B33;container-type:inline-size}
.phone-screen{position:relative;height:100%;overflow:hidden;border-radius:14%/6.8%;background:var(--ground)}
.phone-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.phone-island{position:absolute;top:12px;left:33%;width:34%;height:26px;border-radius:16px;background:var(--bezel);top:4.5cqi;height:10cqi;border-radius:6cqi}
.sk{height:100%;padding:56px 18px 16px;font-size:12px;padding:20cqi 6.5cqi 6cqi;font-size:4.6cqi}
.sk-dimmed,.sk-exportar-metricas,.sk-cambios-pendientes{background:var(--skDim)}
.sk-in{display:flex;flex-direction:column;gap:.8em;height:100%}
:where(.sk) i,:where(.sk) span{display:block}
.sk-l{flex:none;height:.55em;border-radius:1em;background:var(--skLine)}
.sk-l.b{height:.7em;background:var(--skInk)}
.sk-l.t{height:1.05em;background:var(--muted)}
.sk .w2{width:20%}.sk .w3{width:30%}.sk .w4{width:40%}.sk .w5{width:50%}.sk .w6{width:60%}.sk .w7{width:70%}.sk .w8{width:80%}.sk .w9{width:90%}.sk .w10{width:100%}
.sk-row{display:flex;align-items:center;gap:.6em}
.sk-col{display:flex;flex-direction:column;gap:.45em;flex:1;min-width:0}
.sk-col .sk-l{max-width:100%}
.sk-card{display:flex;flex-direction:column;gap:.6em;padding:.85em;background:var(--surface);border:1px solid var(--border);border-radius:.9em}
.sk-card.primary{border:2px solid var(--accent)}
.sk-card.focus{border-left:.35em solid var(--thread)}
.sk-card.yes{border:2px solid var(--sage)}
.sk-card.chosen{border:2px solid var(--thread)}
.sk-card.identity{align-items:center;margin:-2.4em .6em 0;text-align:center}
.sk-card.identity .sk-l,.sk-card.identity .sk-btn{align-self:stretch;margin:0 auto}
.sk-h{height:.5em;border-radius:1em;background:var(--sage)}
.sk-dot{flex:none;width:.85em;height:.85em;border-radius:50%}
.sk-dot.thread,.sk-pill.thread,.sk-meter .thread,.sk-tabs .on,.sk-chart .now{background:var(--thread)}
.sk-dot.sage,.sk-pill.sage,.sk-meter .sage,.sk-toggle.on{background:var(--sage)}
.sk-dot.seam{background:var(--seam)}
.sk-pill{flex:none;height:1.35em;border-radius:1em}
.sk-ava{flex:none;width:1.9em;height:1.9em;margin-left:auto;border-radius:50%;background:var(--clay);border:1px solid var(--border)}
.sk-row>.sk-ava:first-child{margin-left:0}
.sk-ava.big{width:3.4em;height:3.4em;margin:0 auto;border:3px solid var(--surface)}
.sk-bar{display:flex;align-items:center;gap:.6em;padding-bottom:.15em}
.sk-back{flex:none;width:.7em;height:.7em;margin-left:.2em;border-left:2px solid var(--thread);border-bottom:2px solid var(--thread);transform:rotate(45deg)}
.sk-url{padding:.45em .7em;border-radius:1em;background:var(--surface);border:1px solid var(--border)}
.sk-url i{width:55%;height:.5em;margin:0 auto;border-radius:1em;background:var(--skLine)}
.sk-btn{flex:none;height:2.1em;border-radius:2em;background:var(--accent)}
.sk-btn.o{background:var(--surface);border:2px solid var(--accent)}
.sk-steps{display:flex;gap:.35em}
.sk-steps i{flex:1;height:.4em;border-radius:1em;background:var(--skLine)}
.sk-steps i.done{background:var(--sage)}
.sk-steps i.now{background:var(--thread)}
.sk-photo{position:relative;flex:1;aspect-ratio:4/3;border-radius:.7em;background:var(--clay)}
.sk-photo::after{content:"";position:absolute;inset:26% 34%;border:2px dashed var(--seam);border-radius:50%}
.sk-photo.sm{flex:none;width:2.8em;height:2.8em;aspect-ratio:auto}
.sk-photo.sm::after{inset:28%}
.sk-photo.lg{flex:none;aspect-ratio:16/10}
.sk-sum{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.sk-fig{flex:none;width:2.4em;height:.6em;margin-left:auto;border-radius:1em;background:var(--skInk)}
.sk-fig.b{height:.8em;background:var(--thread)}
.sk-rule{height:0;border-top:1px dashed var(--seam)}
.sk-meter{height:.6em;border-radius:1em;background:var(--skLine);overflow:hidden}
.sk-meter i{height:100%;border-radius:1em}
.sk-meter .over{background:var(--toneNo)}
.sk-field{padding:.65em .7em;border:1.5px solid var(--seam);border-radius:.6em;background:var(--surface)}
.sk-ok{flex:none;width:1.4em;height:1.4em;border:.25em solid var(--sage);border-radius:50%}
.sk-timer{flex:none;width:2.5em;height:2.5em;border:.32em solid var(--thread);border-right-color:var(--skLine);border-radius:50%}
.sk-chev{flex:none;width:.6em;height:.6em;margin-left:auto;margin-right:.3em;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.sk-tabs{display:flex;gap:.4em}
.sk-tabs i{flex:1;height:1.5em;border-radius:1em;border:1.5px solid var(--border);background:var(--surface)}
.sk-tabs i.on{border-color:var(--thread)}
.sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.sk-grid.three{grid-template-columns:repeat(3,1fr)}
.sk-grid .sk-photo{aspect-ratio:4/5}
.sk-grid .sk-photo.sm{width:auto;height:auto;aspect-ratio:1}
.sk-swatches{display:flex;gap:.5em}
.sk-swatches i{width:1.6em;height:1.6em;border-radius:50%;border:2px solid var(--surface)}
.sk-swatches i.on{box-shadow:0 0 0 2px var(--text)}
.sk-swatches .s1{background:#7A3E2A}.sk-swatches .s2{background:#4A6350}.sk-swatches .s3{background:#2F4B7C}.sk-swatches .s4{background:#B4532A}.sk-swatches .s5{background:#8C2F39}
.sk-toggle{position:relative;flex:none;width:2.3em;height:1.25em;margin-left:auto;border-radius:1em;background:var(--skLine)}
.sk-toggle::after{content:"";position:absolute;top:.17em;left:.17em;width:.9em;height:.9em;border-radius:50%;background:var(--surface)}
.sk-toggle.on::after{left:auto;right:.17em}
.sk-chart{display:flex;align-items:flex-end;gap:.25em;height:6.5em}
.sk-chart i{flex:1;border-radius:.3em .3em 0 0;background:var(--sage)}
.sk-chart i.prev{background:var(--skLine)}
.sk-chart .h2{height:20%}.sk-chart .h3{height:30%}.sk-chart .h4{height:40%}.sk-chart .h5{height:50%}.sk-chart .h6{height:60%}.sk-chart .h7{height:70%}.sk-chart .h8{height:80%}.sk-chart .h9{height:90%}
.sk-big{width:60%;height:1.4em;border-radius:.4em;background:var(--muted)}
.sk-radio{flex:none;width:1.15em;height:1.15em;border:2px solid var(--seam);border-radius:50%}
.sk-radio.on{border:.38em solid var(--thread)}
.sk-check{flex:none;width:1.15em;height:1.15em;border-radius:.3em;background:var(--sage)}
.sk-sheet{display:flex;flex-direction:column;gap:.6em;margin:auto -1.7em -1.6em;padding:.9em 1.5em 1.8em;background:var(--surface);border-radius:1.4em 1.4em 0 0;box-shadow:0 -12px 24px -14px #2B201B59}
.sk-handle{width:3em;height:.35em;margin:0 auto .3em;border-radius:1em;background:var(--skLine)}
.sk-banner{padding:.6em .8em;border-radius:1em;background:var(--text)}
.sk-banner i{width:70%;height:.5em;border-radius:1em;background:var(--ground)}

/* Drawing in (marks.ts): the resting state is the finished drawing; motion
   only when the visitor has not asked for less, and scroll-driven only where
   the browser knows view timelines — elsewhere a draw-view is simply drawn. */
.draw-load .thread,.draw-view .thread{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .draw-load .thread{stroke-dashoffset:1;animation:draw 2.6s cubic-bezier(.5,0,.2,1) .3s forwards}
  .draw-load .needle{opacity:0;animation:appear .5s ease-out 2.6s forwards}
  @supports (animation-timeline:view()){
    .draw-view .thread{animation:draw-in linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .draw-view .needle{animation:appear-in linear both;animation-timeline:view();animation-range:cover 40% cover 50%}
    .stitch.draw-view path{animation:sew linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
@keyframes draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes appear-in{from{opacity:0}to{opacity:1}}

/* Customer reviews (#500): «Lo que dicen» on the showcase, and the card, form
   and withdrawal on the order page. The quotes are Fraunces italic in every
   theme (self-hosted above); the opening quote mark and the card's inner seam
   are the decorative --stitch, which carries no text. A card without a photo
   is tinted with --accent-tint (the solid accent-into-surface mix «¿Llega a
   tiempo?» measures), which the contrast test measures again for this card's
   text, caption and links. */
.rv-section>h2{margin-bottom:.6rem}
.rv-line{margin:0 0 2rem;max-width:40rem;font-size:.9375rem;color:var(--muted)}
.rv-list{list-style:none;margin:0;padding:0;columns:3 18rem;column-gap:1.5rem}
.rv-list>li{break-inside:avoid;margin:0 0 1.5rem}
.rv-card{position:relative;margin:0;display:flex;flex-direction:column;gap:1rem;padding:14px 14px 24px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:20px;outline:1.5px dashed var(--stitch,var(--border));outline-offset:-8px;box-shadow:0 24px 44px -32px #0000004D}
.rv-card.rv-tint{padding:34px 24px 28px;background:var(--accent-tint,var(--surface));box-shadow:none}
.rv-card-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--ground)}
.rv-card-text{display:flex;flex-direction:column;gap:14px;padding:0 10px}
.rv-tint .rv-card-text{padding:0}
.rv-quote{position:relative;margin:0;padding-top:22px}
.rv-mark{position:absolute;top:-16px;left:-4px;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:64px;line-height:1;color:var(--stitch,var(--border))}
.rv-tint .rv-quote{padding-top:26px}
.rv-tint .rv-mark{top:-18px;left:-6px;font-size:80px}
.rv-quote p{margin:0;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:1.3125rem;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.rv-tint .rv-quote p{font-size:clamp(1.35rem,2.6vw,1.5625rem);line-height:1.4}
.rv-card figcaption{display:flex;flex-direction:column}
.rv-name{font-weight:700;overflow-wrap:anywhere}
.rv-meta{font-size:.9375rem;color:var(--muted)}
/* 20261006130000: the order's pieces under the name — one line that wraps, the muted ink of .rv-meta. */
.rv-pieces{list-style:none;margin:.15rem 0 0;padding:0;font-size:.9375rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.rv-pieces li{display:inline}
.rv-single{max-width:58rem}
.rv-single .rv-quote p{font-size:clamp(1.35rem,3vw,1.625rem);line-height:1.4}
@media (min-width:48rem){
  .rv-wide.rv-has-photo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;padding:16px}
  .rv-wide.rv-has-photo .rv-card-photo img{aspect-ratio:4/5}
  .rv-wide.rv-has-photo .rv-card-text{padding:0 12px 0 0;gap:16px}
  .rv-wide .rv-quote{padding-top:28px}
  .rv-wide .rv-mark{top:-20px;left:-6px;font-size:88px}
  .rv-all-narrow{display:none}
}
@media (max-width:47.99rem){
  .rv-list{columns:1}
  .rv-list:not(.rv-all)>li:nth-child(n+4){display:none}
  .rv-section .see-all .block-link,.rv-section .see-all a{display:flex;justify-content:center;width:100%;min-height:48px;border:2px solid var(--accent);border-radius:999px;font-weight:600;text-decoration:none}
}
.rv-page h1{margin-bottom:.5rem}
/* The order page */
.rv-invite{position:relative}
.rv-invite h2{padding-right:3rem}
.rv-invite-mark{top:-.35rem;left:auto;right:1.25rem;font-size:6rem;color:var(--stitch,var(--border))}
.rv-thumbs{list-style:none;margin:.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;max-width:24rem}
.rv-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:var(--ground)}
.rv-actions{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.5rem 1rem;margin:1.1rem 0 .4rem}
.op-card .rv-actions{margin:1.1rem 0 .4rem}
@media (max-width:39.99rem){.rv-invite .rv-actions .button,.rv-mine .rv-actions .button-outline{width:100%}}
.rv-mine-head{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.75rem}
.rv-mine-head h2{margin:0}
.chip.rv-ok{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.rv-ok::before{display:none}
.rv-mine-photo{margin:0 0 .75rem}
.rv-mine-photo img,.rv-keep-img{width:12rem;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--ground)}
.rv-mine-quote{padding:0;margin:.25rem 0 .5rem}
.rv-mine-quote p{font-size:1.125rem}
.rv-withdraw{font-weight:600}
.rv-back{margin:0 0 .25rem}
.rv-back .block-link{font-weight:600}
.rv-count{margin:.35rem 0 0;text-align:right;font-size:.95rem;color:var(--muted)}
.rv-photo{margin:0;padding:0;border:0;min-width:0}
.rv-photo>legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-weight:700}
.rv-photo>legend+*{clear:both}
.rv-photo.has-error{padding:.85rem 1rem 1rem;border:3px solid var(--err);border-radius:12px;background:var(--errBg)}
.rv-modes{display:grid;gap:.5rem}
.rv-mode{display:flex;align-items:center;gap:.75rem;min-height:52px;padding:0 .9rem;background:var(--surface);border:2px solid var(--border);border-radius:12px}
.rv-mode:has(input:checked){border-color:var(--accent);background:var(--accent-tint,var(--surface))}
.rv-mode input{flex:none;width:1.4rem;height:1.4rem;margin:0;accent-color:var(--accent)}
.rv-mode label{flex:1;display:flex;align-items:center;min-height:48px;font-weight:600;cursor:pointer}
.rv-panel{padding:.35rem 0 .6rem}
@supports selector(:has(*)){
  .rv-panel{display:none}
  .rv-modes:has(#rv-mode-pick:checked) .rv-panel-pick,.rv-modes:has(#rv-mode-upload:checked) .rv-panel-upload,.rv-modes:has(#rv-mode-keep:checked) .rv-panel-keep{display:block}
}
.rv-tiles-set{margin:0;padding:0;border:0;min-width:0}
.rv-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.rv-tile{position:relative}
.rv-tile-input{position:absolute;top:.5rem;left:.5rem;width:1px;height:1px;margin:0;opacity:0}
.rv-tile label{position:relative;display:block;border-radius:12px;cursor:pointer;box-shadow:0 0 0 1px var(--border)}
.rv-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--ground)}
.rv-tile-input:checked+label{box-shadow:0 0 0 3px var(--accent)}
.rv-tile-input:focus-visible+label{outline:3px solid var(--link);outline-offset:4px}
.rv-tick{display:none;position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:13px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.95rem;line-height:1;align-items:center;justify-content:center}
.rv-tile-input:checked+label .rv-tick{display:flex}
.rv-drop{padding:1rem;border:2px dashed var(--accent);border-radius:14px;background:var(--accent-tint,var(--surface))}
.rv-drop label{display:block;margin-bottom:.2rem;font-weight:700}
.rv-drop input[type=file]{display:block;max-width:100%;min-height:44px;margin-top:.5rem;font:inherit;color:var(--text)}
.rv-again{font-weight:600;color:var(--text)}
.rv-panel-upload>.op-note{margin-top:.6rem}
.rv-preview .op-label{margin:0 0 .6rem}
.rv-preview .rv-card{max-width:24rem}
.rv-empty{color:var(--muted)}
.rv-own{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:1rem;border-radius:14px;background:var(--accent-tint,var(--ground));color:var(--muted);font-weight:600;text-align:center;overflow-wrap:anywhere}
.rv-consent{display:grid;gap:.6rem;padding:1rem;border-radius:14px;background:var(--accent-tint,var(--ground))}
.rv-consent .op-note,.rv-privacy{margin:0}
.rv-privacy .block-link{font-size:.95rem;font-weight:600}
.button.rv-danger{background:var(--text);border-color:var(--text);color:var(--surface)}
/* The stars (2026-10-05): optional, never averaged. On a card, five small
   stars — filled in the accent, empty in the muted outline (both ≥ 3:1, as
   non-text). In the form, a radio group of 52px targets; the stars up to the
   chosen one fill where :has() exists, and the chosen one is outlined where
   it does not. */
.rv-stars{margin:0;line-height:1}
.rv-stars-row{display:inline-flex;gap:3px}
.rv-stars-row svg{width:1.15rem;height:1.15rem;stroke-width:1.6;stroke-linejoin:round}
.rv-stars .on svg{fill:var(--accent);stroke:var(--accent)}
.rv-stars .off svg{fill:none;stroke:var(--muted)}
.rv-mine .rv-stars{margin:.25rem 0 .5rem}
.rv-rating{margin:0;padding:0;border:0;min-width:0}
.rv-rating>legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-weight:700}
.rv-rating>legend+*{clear:both}
.rv-rating.has-error{padding:.85rem 1rem 1rem;border:3px solid var(--err);border-radius:12px;background:var(--errBg)}
.rv-rating-none{display:flex;align-items:center;gap:.75rem;min-height:52px;margin-bottom:.5rem;padding:0 .9rem;background:var(--surface);border:2px solid var(--border);border-radius:12px}
.rv-rating-none:has(input:checked){border-color:var(--accent);background:var(--accent-tint,var(--surface))}
.rv-rating-none input{flex:none;width:1.4rem;height:1.4rem;margin:0;accent-color:var(--accent)}
.rv-rating-none label{flex:1;display:flex;align-items:center;min-height:48px;font-weight:600;cursor:pointer}
.rv-rating-stars{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.25rem}
.rv-star{position:relative}
.rv-star label{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;cursor:pointer}
.rv-star svg{width:36px;height:36px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}
.rv-star .rv-tile-input:checked+label{box-shadow:0 0 0 2px var(--accent)}
.rv-star .rv-tile-input:focus-visible+label{outline:3px solid var(--link);outline-offset:2px}
@supports selector(:has(*)){
  .rv-star .rv-tile-input:checked+label{box-shadow:none}
  .rv-rating-stars:has(#rv-star-1:checked) .rv-star:nth-child(-n+1) svg{fill:var(--accent);stroke:var(--accent)}
  .rv-rating-stars:has(#rv-star-2:checked) .rv-star:nth-child(-n+2) svg{fill:var(--accent);stroke:var(--accent)}
  .rv-rating-stars:has(#rv-star-3:checked) .rv-star:nth-child(-n+3) svg{fill:var(--accent);stroke:var(--accent)}
  .rv-rating-stars:has(#rv-star-4:checked) .rv-star:nth-child(-n+4) svg{fill:var(--accent);stroke:var(--accent)}
  .rv-rating-stars:has(#rv-star-5:checked) .rv-star:nth-child(-n+5) svg{fill:var(--accent);stroke:var(--accent)}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── Paper (#638): «Guardar o imprimir este pedido» ──────────────────────────
   The order as a document the customer keeps: the workshop's name, the
   reference, where the order stands, the pieces with their designs and
   photos, the payments. What is not the order is not printed — forms, every
   button, sharing, «lo que te toca», the footer, the team's band, an outcome
   line. Ink is forced black on white: a page drawn dark (the phone's scheme
   or the workshop's) would otherwise print its pale text on white paper.
   Written for the order page; any other page printed gets the same plain ink.
   KEEP THIS BLOCK LAST: test/workshopDeletion.test.ts reads it to the end. */
@media print{
@page{margin:1.5cm}
form,button,.button,.button-outline,.block-link,.share,.op-todo,.op-more,.op-keep,.op-private,.site-footer,.skip,#op-flash,.team-mark,.op-closed .op-note,.op-wrong,.rv-actions,.op-terms details,nav{display:none!important}
*,*::before,*::after{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;outline:0!important;border-color:#888!important}
:root{color-scheme:light!important}
html,body{background:#fff!important}
body{font-size:11pt}
.wrap{max-width:none;padding-left:0;padding-right:0}
a{text-decoration:none}
h1{font-size:20pt}
h2,h3{break-after:avoid}
.op-card,.op-card.primary{margin-top:.6cm;padding:.4cm .5cm;border:1px solid #888!important;border-radius:6px;break-inside:avoid}
.op-pay,.op-item,.op-dl,figure,img{break-inside:avoid}
img{max-width:100%!important;max-height:7cm!important;width:auto!important;height:auto!important}
.op-closed{border-width:2px!important}
.op-terms{break-inside:auto!important}
.op-terms h3{font-size:12pt}
.print-only{display:block}
.op-keep-stamp{margin-top:.8cm;font-size:9pt}
}