@font-face{font-family:'Bodoni Moda';font-weight:700;font-display:swap;src:url(assets/fonts/bodoni-moda-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:400;font-display:swap;src:url(assets/fonts/playfair-display-400.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/playfair-display-400-italic.woff2) format('woff2')}
@font-face{font-family:'Great Vibes';font-weight:400;font-display:swap;src:url(assets/fonts/great-vibes-400.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-weight:500;font-display:swap;src:url(assets/fonts/caveat-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400 600;font-display:swap;src:url(assets/fonts/inter.woff2) format('woff2')}

:root{
  --bg:#f5ede5;--paper:#fbf6f1;--card:#ece0d5;--blush:#e4cdbf;
  --moca:#80594a;--brown:#5b3c2f;--ink:#3a2620;--text:#54453e;--line:#d6c1b3;
  --radius:18px;--ctl:48px
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font:400 16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;color:var(--ink);line-height:1.05}
h2{font-size:clamp(2.4rem,5vw,3.75rem)}
h3{font-size:1.3rem;line-height:1.2}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:4px}

.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
section{padding:clamp(56px,9vw,96px) 0}
.script{font-family:'Great Vibes',cursive;color:var(--moca);font-weight:400}
.hand{font-family:Caveat,cursive;font-weight:500;color:var(--brown)}
.caps{font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brown)}
.lead{font-size:1.06rem;max-width:34rem}
.pill{display:inline-block;background:var(--blush);border-radius:999px;padding:7px 16px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brown);color:#fff;padding:10px 16px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctl);padding:0 24px;border-radius:999px;background:var(--brown);color:#fff;border:1px solid var(--brown);font:500 .95rem Inter,sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--brown)}
.btn.ghost:hover{background:var(--brown);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px}

.flush-top{margin-bottom:28px}
[hidden]{display:none!important}
.mt{margin-top:14px}
.hero .caps.mt{margin-top:34px}
.sign{font-size:1.9rem;margin-top:26px}
section.flush{padding-top:0}
/* nav */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.top nav{display:flex;justify-content:space-between;align-items:center;min-height:68px}
.brand{font-size:1.9rem;text-decoration:none}
.links{display:flex;gap:28px;font-size:.9rem}
.links a{text-decoration:none;color:var(--brown)}
.links a:hover{text-decoration:underline;text-underline-offset:6px}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(24px,5vw,56px)}
.hero h1{font-size:clamp(3.6rem,9vw,6.5rem);line-height:.92;margin-top:14px}
.hero h1 span{display:block;color:var(--moca)}
.hero .script{font-size:clamp(2.6rem,5.5vw,3.6rem);line-height:1.1;display:block}
.hero .roles{font-size:.66rem;margin:12px 0 22px}
.hero .actions{margin-top:28px}
.strengths{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.strengths li{font-size:.82rem;border:1px solid var(--line);border-radius:999px;padding:5px 14px;background:var(--paper)}
.photo{position:relative;max-width:520px;justify-self:center;width:100%}
.photo img{width:100%;height:auto;aspect-ratio:624/659;object-fit:cover;object-position:top;border-radius:240px 240px 24px 24px;background:radial-gradient(circle at 50% 35%,#efdcd0,var(--blush))}
.note{position:absolute;left:-28px;bottom:56px;background:var(--paper);padding:10px 20px;border-radius:12px;box-shadow:0 12px 30px rgb(91 60 47 / .15);transform:rotate(-4deg);font-size:1.6rem}

/* trabajos */
.head{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap}
.head p{max-width:24rem;font-size:.95rem}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 32px}
.filters button{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--brown);font:500 .85rem Inter,sans-serif;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--brown);border-color:var(--brown);color:#fff}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.work img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:var(--card)}
.work h3{margin:14px 0 8px;font-size:1.2rem}
.work p{font-size:.88rem;margin-top:8px}
.tag{display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:var(--blush);color:var(--brown);border-radius:999px;padding:4px 10px}
.slogan{margin-top:40px;text-align:center}

/* sobre mi */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,72px);align-items:start}
.about h2 span{color:var(--moca)}
.about .bio p+p{margin-top:14px}
.about .roles{margin:18px 0 22px;font-size:.62rem}
.quote{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3vw,2rem);color:var(--ink);line-height:1.25;margin:32px 0 0}
.focus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.focus li{background:var(--card);border-radius:var(--radius);padding:22px}
.focus li:last-child{background:var(--brown);color:#f3e7dd}
.focus li:last-child .caps{color:#fff}
.focus p{font-size:.9rem;margin-top:6px}

/* proceso */
.dark{background:var(--brown);color:#efe2d8}
.dark h2,.dark .caps{color:#fff}
.dark .intro{max-width:40rem;margin-top:18px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px;counter-reset:s}
.steps li{background:rgb(255 255 255 / .07);border:1px solid rgb(255 255 255 / .16);border-radius:var(--radius);padding:22px;font-size:.9rem}
.steps li::before{counter-increment:s;content:'0' counter(s);display:block;font:400 2.2rem 'Playfair Display',serif;color:#fff;margin-bottom:6px}
.steps .caps{display:block;margin-bottom:8px}
.goal{margin-top:44px;padding-top:32px;border-top:1px solid rgb(255 255 255 / .2)}
.goal p:last-child{font:400 clamp(1.4rem,3vw,2rem)/1.3 'Playfair Display',serif;color:#fff;margin-top:10px}

/* experiencia */
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.job{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.job .date{font-size:.8rem;color:var(--moca);font-weight:500}
.job h3{margin-top:4px}
.job .caps{display:block;font-size:.62rem;letter-spacing:.18em;margin:6px 0 12px}
.job ul{font-size:.9rem;display:grid;gap:6px}
.job li{padding-left:16px;position:relative}
.job li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--moca)}

/* habilidades / formacion */
.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.skills li{background:var(--card);border-radius:14px;padding:20px;font-size:.88rem}
.skills b{display:block;color:var(--ink);margin-bottom:4px;font-weight:600}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tools li{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:.85rem;font-weight:500;color:var(--brown)}
.edu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);margin-top:36px}
.edu h3{font-family:'Bodoni Moda',serif;font-weight:700;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.timeline li{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.timeline .date{background:var(--blush);border-radius:8px;padding:4px 8px;text-align:center;font-size:.85rem;align-self:start;color:var(--ink)}
.timeline b{display:block;color:var(--ink);font-weight:600}

/* contacto */
.thanks{text-align:center;background:radial-gradient(ellipse 60% 70% at 50% 50%,var(--blush),transparent 75%)}
.thanks h2{font:700 clamp(4rem,12vw,7.5rem)/1 'Bodoni Moda',serif;margin:10px 0 18px}
.thanks .say{font:400 clamp(1.3rem,3vw,1.8rem)/1.35 'Playfair Display',serif;color:var(--ink);max-width:36rem;margin:12px auto 0}
.thanks .say .script{font-size:1.5em}
.thanks .actions{justify-content:center;margin-top:30px}
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:30px;font-size:.92rem}
.contact a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:hover{border-color:var(--brown)}
footer{border-top:1px solid var(--line);padding:22px 0 90px;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--moca)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fab{position:fixed;right:20px;bottom:20px;z-index:5;border:2px solid var(--bg);box-shadow:0 10px 28px rgb(58 38 32 / .3)}

@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .skills{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .links{display:none}
  .hero,.about,.jobs,.edu{grid-template-columns:1fr}
  .photo{max-width:380px;order:-1}
  .note{left:0;bottom:24px;font-size:1.3rem}
}
@media (max-width:480px){
  .steps,.skills{grid-template-columns:1fr}
  .focus{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:6px}
  .timeline .date{justify-self:start}
  .actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}