/* Gayo Valdez — portafolio minimalista. Talavera como único gesto; todo lo demás, aire. */
:root{
  --bg:#F6F6F9; --surface:#ECEDF5; --fg:#11142E; --muted:#5A5F84; --cobalt:#2441B8; --rosa:#C81E68; --line:#D8DBEA;
  --display:"Syne","Arial Black",sans-serif; --body:"Figtree",system-ui,sans-serif; --tile:#2441B8;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B0E24;--surface:#151A3F;--fg:#ECEEFA;--muted:#9CA3CF;--cobalt:#8197FF;--rosa:#FF5BA0;--line:#232A5C;--tile:#8197FF;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B0E24;--surface:#151A3F;--fg:#ECEEFA;--muted:#9CA3CF;--cobalt:#8197FF;--rosa:#FF5BA0;--line:#232A5C;--tile:#8197FF;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:3px solid var(--rosa);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto}

nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 14px var(--display);letter-spacing:.08em}
.brand svg{width:22px;height:22px}
nav .links{display:flex;gap:22px;font-size:14px;font-weight:500}
nav .links a{text-decoration:none;color:var(--muted)} nav .links a:hover{color:var(--fg)}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,6vw,72px);align-items:end;padding-block:clamp(40px,9vw,110px) clamp(48px,8vw,96px)}
.eyebrow{margin:0 0 22px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font:800 clamp(56px,11vw,132px)/.88 var(--display);letter-spacing:-.035em;margin:0}
h1 span{display:block} h1 .v{color:var(--cobalt)}
.tag{margin:26px 0 0;font-size:clamp(18px,2.4vw,22px);color:var(--muted);max-width:30ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid var(--fg);transition:transform .15s}
.btn.main{background:var(--fg);color:var(--bg)}
.btn:hover{transform:translateY(-2px)}
.tile{aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--surface)}
.tile svg{display:block;width:100%;height:100%}
.tile .t{fill:none;stroke:var(--tile);stroke-width:1.4;opacity:.75}
.tile .f{fill:var(--tile);opacity:.16}

.sec{display:grid;grid-template-columns:220px 1fr;gap:clamp(18px,4vw,48px);padding-block:clamp(44px,7vw,88px);border-top:1px solid var(--line)}
.sec>*{min-width:0}
.sec h2{margin:0;font:600 13px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sec h2 i{font-style:normal;color:var(--cobalt);margin-right:10px}
.lead{margin:0 0 24px;font-size:clamp(19px,2.4vw,24px);line-height:1.4;max-width:34ch}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;text-decoration:none;font:700 clamp(20px,3vw,26px) var(--display)}
.list a span{font:400 14px var(--body);color:var(--muted)}
.list a:hover{color:var(--rosa)}
.list a::after{content:"↗";font:400 18px var(--body);color:var(--muted);margin-left:auto;order:3}
.list a span{margin-left:auto}
.mail{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mail a{font:700 clamp(20px,3.6vw,32px) var(--display);text-decoration:none;overflow-wrap:anywhere;border-bottom:2px solid var(--rosa)}
.mail button{font:600 14px var(--body);padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}

footer{padding-block:32px max(32px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer nav{padding:0;gap:18px;display:flex}
footer a{text-decoration:none} footer a:hover{color:var(--fg)}

.legal{padding-block:clamp(40px,8vw,96px);max-width:68ch}
.legal h1{font-size:clamp(36px,7vw,60px);line-height:1;margin-bottom:20px}
.legal h3{font:700 18px var(--display);margin:30px 0 8px}
.legal p{margin:0 0 14px}
.muted{color:var(--muted)}

@media(max-width:760px){
  .hero{grid-template-columns:1fr}
  .tile{aspect-ratio:auto;height:96px;order:-1}
  .sec{grid-template-columns:1fr}
  nav .links{gap:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}