:root{
  --paper:#EDEAE1; --paper-deep:#E2DCCB; --ink:#2E2B27; --ink-soft:#6b6459;
  --sage:#7C8768; --rose:#B98A82; --line:#d9d2c0; --card:#F7F4EC;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#211E1A; --paper-deep:#2A2620; --ink:#EDE7DA; --ink-soft:#b3ab9a; --sage:#9AA687; --rose:#CBA098; --line:#3c362c; --card:#28241e; }
}
:root[data-theme="dark"]{ --paper:#211E1A; --paper-deep:#2A2620; --ink:#EDE7DA; --ink-soft:#b3ab9a; --sage:#9AA687; --rose:#CBA098; --line:#3c362c; --card:#28241e; }
:root[data-theme="light"]{ --paper:#EDEAE1; --paper-deep:#E2DCCB; --ink:#2E2B27; --ink-soft:#6b6459; --sage:#7C8768; --rose:#B98A82; --line:#d9d2c0; --card:#F7F4EC; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:Georgia,'Iowan Old Style','Times New Roman',serif; line-height:1.5;}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.sans{font-family:Verdana,Arial,'Helvetica Neue',sans-serif;}

/* header */
header{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1080px; margin:0 auto;}
.nav-logo{display:flex; align-items:center; gap:12px;}
.nav-logo img{height:34px; width:auto;}
@media (prefers-color-scheme: dark){ .nav-logo img{ filter:invert(1) brightness(1.6); } }
:root[data-theme="dark"] .nav-logo img{ filter:invert(1) brightness(1.6); }
:root[data-theme="light"] .nav-logo img{ filter:none; }
.nav-word{font-size:.95rem; letter-spacing:.03em;}
.nav-links{display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px; font-family:Verdana,Arial,sans-serif; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;}
.nav-links a{text-decoration:none; opacity:.75; border-bottom:1px solid transparent; padding-bottom:2px; white-space:nowrap;}
.nav-links a:hover, .nav-links a:focus-visible{opacity:1; border-color:var(--rose);}
.nav-toggle-btn{display:none; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:1.15rem; line-height:1; cursor:pointer;}
.nav-toggle-btn:hover, .nav-toggle-btn:focus-visible{border-color:var(--rose); outline:none;}

@media (max-width:640px){
  .nav{flex-wrap:wrap; padding:14px 20px;}
  .nav-toggle-btn{display:inline-flex;}
  .nav-links{display:none; flex-basis:100%; flex-direction:column; align-items:flex-start; gap:16px; margin-top:16px;}
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:4px 0;}
}

/* hero */
.hero{padding:96px 28px 84px; text-align:center;}
.hero img.mark{width:150px; height:auto; margin:0 auto 30px;}
@media (prefers-color-scheme: dark){ .hero img.mark{ filter:invert(1) brightness(1.6); } }
:root[data-theme="dark"] .hero img.mark{ filter:invert(1) brightness(1.6); }
:root[data-theme="light"] .hero img.mark{ filter:none; }
.hero .eyebrow{font-family:Verdana,Arial,sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 18px;}
.hero h1{font-size:clamp(2rem,5vw,3.1rem); font-style:italic; font-weight:400; margin:0 auto 22px; max-width:760px; text-wrap:balance;}
.hero p.lede{font-family:Verdana,Arial,sans-serif; font-size:1rem; color:var(--ink-soft); max-width:520px; margin:0 auto 34px; line-height:1.75;}
.btn{display:inline-block; font-family:Verdana,Arial,sans-serif; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; padding:14px 30px; text-decoration:none; border:1px solid var(--ink); transition:background .2s,color .2s; background:transparent; color:var(--ink); cursor:pointer;}
.btn:hover, .btn:focus-visible{background:var(--ink); color:var(--paper);}

/* section shells */
section{padding:76px 0;}
.section-head{max-width:640px; margin:0 0 48px;}
.section-head .eyebrow{font-family:Verdana,Arial,sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); margin:0 0 10px;}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:400; font-style:italic; margin:0 0 14px; text-wrap:balance;}
.section-head p{font-family:Verdana,Arial,sans-serif; color:var(--ink-soft); font-size:.92rem; max-width:60ch; line-height:1.75; margin:0;}

/* historia */
.historia{background:var(--paper-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.historia-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
@media (max-width:820px){ .historia-grid{grid-template-columns:1fr;} }
.historia-text p{font-family:Verdana,Arial,sans-serif; font-size:.92rem; line-height:1.85; color:var(--ink); margin:0 0 16px;}
.historia-text p:last-child{margin-bottom:0;}
.flag-row{display:flex; gap:10px; font-family:Verdana,Arial,sans-serif; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:22px;}
.flag-row span{padding:5px 10px; border:1px solid var(--line);}
.stitchframe{aspect-ratio:4/5; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--card);}
.stitchframe svg{width:60%; height:60%;}

/* piezas / portfolio */
.pieza-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
@media (max-width:820px){ .pieza-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pieza-grid{grid-template-columns:1fr;} }
.pieza{background:var(--card); padding:0; display:flex; flex-direction:column;}
.pieza-art{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.pieza-art svg{width:56%; height:56%; opacity:.85;}
.pieza-tag{position:absolute; top:14px; left:14px; font-family:Verdana,Arial,sans-serif; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; background:var(--paper); padding:4px 9px; border:1px solid var(--line);}
.pieza-cap{padding:18px 20px 22px; border-top:1px solid var(--line);}
.pieza-cap h3{margin:0 0 4px; font-size:1rem; font-weight:400; font-style:italic;}
.pieza-cap p{margin:0; font-family:Verdana,Arial,sans-serif; font-size:.78rem; color:var(--ink-soft);}

/* proceso */
.proceso-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media (max-width:820px){ .proceso-list{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .proceso-list{grid-template-columns:1fr;} }
.proceso-list li{border-top:1px solid var(--line); padding-top:16px;}
.proceso-list .num{font-family:Verdana,Arial,sans-serif; font-size:.7rem; color:var(--rose); letter-spacing:.08em;}
.proceso-list h4{margin:8px 0 6px; font-weight:400; font-style:italic; font-size:1.05rem;}
.proceso-list p{margin:0; font-family:Verdana,Arial,sans-serif; font-size:.82rem; color:var(--ink-soft); line-height:1.7;}

/* contacto */
.contacto{background:var(--ink); color:var(--paper); text-align:center;}
.contacto .section-head{margin:0 auto 32px; text-align:center;}
.contacto .section-head p{color:#cfc7b8; margin:0 auto;}
.contacto .eyebrow{color:var(--rose);}
.form-row{display:flex; gap:0; max-width:420px; margin:0 auto; border:1px solid #6b6459;}
.form-row input{flex:1; background:transparent; border:0; padding:14px 16px; color:var(--paper); font-family:Verdana,Arial,sans-serif; font-size:.85rem;}
.form-row input::placeholder{color:#a89f8f;}
.form-row input:focus{outline:none;}
.form-row button{background:var(--rose); color:#2A211B; border:0; padding:0 22px; font-family:Verdana,Arial,sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;}
.form-row button:focus-visible{outline:2px solid var(--paper); outline-offset:-3px;}
.form-confirm{margin:16px auto 0; max-width:420px; font-size:.82rem; color:var(--rose);}

@media (max-width:480px){
  .form-row{flex-direction:column; border:0; gap:10px;}
  .form-row input{border:1px solid #6b6459; padding:14px 16px;}
  .form-row button{padding:14px; width:100%;}
}
.social-note{margin-top:22px; font-family:Verdana,Arial,sans-serif; font-size:.78rem; color:#a89f8f;}
.social-note a{text-decoration:underline; color:var(--paper);}

/* footer */
footer{padding:30px 0; border-top:1px solid var(--line);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:Verdana,Arial,sans-serif; font-size:.72rem; color:var(--ink-soft);}

.skip{position:absolute; left:-999px;}
.skip:focus{left:12px; top:12px; background:var(--ink); color:var(--paper); padding:8px 14px; z-index:50;}

.theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:1rem; line-height:1;}
.theme-toggle:hover, .theme-toggle:focus-visible{border-color:var(--rose); outline:none;}