/* site.css — estilos GLOBALES compartidos por TODAS las páginas del portfolio.
   Tokens, base, nav, botones, label hundido, CTA (tab-eats-panel) y footer.
   Layout de case study → assets/case.css. Ver components/README.md. */
:root{
  --cream:#F7EEE3; --cream-2:#FBF2E6; --panel:#FCF7EF;
  --ink:#5A2326; --ink-soft:#7A4042;
  --orange:#EC7A4E; --orange-deep:#D9612F;
  --peach:#F6D3B8; --amber:#FFCD87; --celeste:#A7D2E8; --celeste-deep:#3F8FB0;
  --brown:#6B3A2E; --muted:#9A7B6E; --maxw:1180px;
  --bd:1px solid rgba(255,255,255,.6);
  --sh:0 18px 34px -18px rgba(90,38,30,.26);          /* sombra SOLO abajo */
  --r:30px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html{background:var(--cream)}
body{font-family:'DM Sans',sans-serif;color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
/* fondo marble en un pseudo-elemento FIJO al viewport (no con background-attachment:fixed,
   que iOS ignora y hace que el fondo se mueva con las cards). Asi queda estatico en todos lados. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(249,235,216,.55),rgba(241,224,205,.6)),
    url('https://images.unsplash.com/photo-1566041510394-cf7c8fe21800?fm=jpg&q=70&w=2000&auto=format&fit=crop') center/cover;}
/* al navegar a #about/#work/#contact, dejar aire arriba para que el titulo no quede tapado por el nav sticky */
section[id]{scroll-margin-top:110px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:880px){
  .wrap{padding:0 16px}
  /* footer: sin el "Visual & Content Designer"; mail + linkedin a la derecha */
  .ftitle{display:none}
  footer .bar{font-size:13px;padding:24px 20px}
}
.fr{font-family:'Fraunces',serif;font-variation-settings:'SOFT'100}
.mk{color:var(--orange);font-style:normal}
.ico{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---- reuso ---- */
.outer{background:rgba(249,235,216,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);position:relative}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:18px;cursor:pointer;border:2px solid var(--brown);background:var(--brown);color:var(--cream);transition:.2s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.cream{background:var(--cream-2);border-color:var(--cream-2);color:var(--brown)}
.btn.cream:hover{background:#fff}
@supports(corner-shape:scoop){
  .scoop-bl{corner-shape:round round round scoop;border-bottom-left-radius:48px}
  .scoop-br{corner-shape:round round scoop round;border-bottom-right-radius:48px}
  .scoop-tr{corner-shape:round scoop round round;border-top-right-radius:42px}
}
/* label hundido (Problem/Brief/etc). Antes .lbl-sunk en el case; unificado a .lbl. */
.lbl{display:inline-flex;align-items:center;gap:8px;background:#F9E1CA;color:var(--brown);
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em;padding:11px 22px;border-radius:14px;
  box-shadow:inset 0 3px 6px -1px rgba(120,68,30,.42),inset 0 -2px 4px rgba(255,255,255,.6)}
.lbl .mk{color:var(--orange-deep);font-size:19px}

/* ---- NAV ---- */
nav{position:sticky;top:0;z-index:50;padding:14px 0}
nav .bar{display:flex;align-items:center;gap:16px;height:74px;padding:0 26px;border-radius:26px;
  background:var(--panel);border:var(--bd);box-shadow:var(--sh)}
.brand{font-family:'Fraunces';font-weight:800;font-size:22px;font-variation-settings:'SOFT'100;display:flex;gap:9px;align-items:center;text-decoration:none;color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:26px;margin-left:auto;font-weight:400;font-size:15px;
  background:var(--panel);padding:11px 26px;border-radius:16px;
  box-shadow:inset 0 4px 8px -2px rgba(90,38,30,.26),inset 0 -3px 6px rgba(255,255,255,.6)}
.navlinks a{color:var(--ink);text-decoration:none;opacity:.85;transition:color .18s;white-space:nowrap}
.navlinks a:hover{color:var(--orange-deep)}
/* boton menu (solo mobile): dentro de la pastilla hundida; al abrir se despliegan los links
   en horizontal y el "Melissa Uzal" del brand se repliega dejando solo el sol */
.menu-btn{display:none;align-items:center;justify-content:center;border:none;background:none;
  color:var(--brown);cursor:pointer;padding:0;width:22px;height:22px}
.menu-btn .ico{width:21px;height:21px}
.menu-btn .i-x{display:none}
.bname{display:inline-block;white-space:nowrap}
@media(max-width:880px){
  nav .bar{height:62px;padding:0 18px;gap:8px}
  .brand{font-size:19px}
  .bname{max-width:140px;overflow:hidden;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .3s}
  nav .bar.open .bname{max-width:0;opacity:0}
  .navlinks{gap:0;padding:9px 14px;font-size:14px}
  .menu-btn{display:flex}
  nav .bar.open .menu-btn .i-menu{display:none}
  nav .bar.open .menu-btn .i-x{display:block}
  .navlinks a{max-width:0;opacity:0;overflow:hidden;margin-left:0;
    transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .3s,margin-left .45s cubic-bezier(.4,0,.2,1)}
  nav .bar.open .navlinks a{max-width:76px;opacity:1;margin-left:16px}
  /* la X separada del ultimo link (Contact) */
  .menu-btn{transition:margin-left .45s cubic-bezier(.4,0,.2,1)}
  nav .bar.open .menu-btn{margin-left:16px}
}

/* ---- CONTACT + CTA (tab-eats-panel) ---- */
.contact{padding:56px 0 24px}
.cta-stage{position:relative;width:1132px;max-width:100%;height:420px;margin:0 auto}
.cta-shadow{position:absolute;inset:0;z-index:0;filter:drop-shadow(0 8px 12px rgba(90,35,38,.10)) drop-shadow(0 24px 40px rgba(90,35,38,.10))}
/* panel FLUIDO (corte central: izq en px, der/abajo en calc) — misma forma a cualquier ancho/alto */
.cta-panel{position:absolute;inset:0;background:var(--panel);
  clip-path:polygon(384.5px 0.0px, calc(100% - 34.0px) 0.0px, calc(100% - 27.2px) 0.7px, calc(100% - 20.9px) 2.7px, calc(100% - 15.1px) 5.9px, calc(100% - 10.0px) 10.0px, calc(100% - 5.9px) 15.1px, calc(100% - 2.7px) 20.9px, calc(100% - 0.7px) 27.2px, calc(100% - 0.0px) 34.0px, calc(100% - 0.0px) calc(100% - 34.0px), calc(100% - 0.7px) calc(100% - 27.2px), calc(100% - 2.7px) calc(100% - 20.9px), calc(100% - 5.9px) calc(100% - 15.1px), calc(100% - 10.0px) calc(100% - 10.0px), calc(100% - 15.1px) calc(100% - 5.9px), calc(100% - 20.9px) calc(100% - 2.7px), calc(100% - 27.2px) calc(100% - 0.7px), calc(100% - 34.0px) calc(100% - 0.0px), 34.0px calc(100% - 0.0px), 27.2px calc(100% - 0.7px), 20.9px calc(100% - 2.7px), 15.1px calc(100% - 5.9px), 10.0px calc(100% - 10.0px), 5.9px calc(100% - 15.1px), 2.7px calc(100% - 20.9px), 0.7px calc(100% - 27.2px), 0.0px calc(100% - 34.0px), 0.0px 66.5px, 0.1px 65.5px, 0.5px 64.6px, 1.0px 63.8px, 1.8px 63.0px, 2.6px 62.4px, 3.7px 62.0px, 4.8px 61.7px, 6.0px 61.6px, 309.5px 61.6px, 317.1px 61.0px, 324.1px 59.2px, 330.5px 56.3px, 336.0px 52.6px, 340.6px 48.0px, 344.1px 42.8px, 346.2px 37.0px, 347.0px 30.8px, 347.0px 30.8px, 347.8px 24.6px, 349.9px 18.8px, 353.4px 13.6px, 358.0px 9.0px, 363.5px 5.3px, 369.9px 2.4px, 376.9px 0.6px, 384.5px 0.0px)}
.cta-tab-wrap{position:absolute;top:0;left:0;z-index:3;filter:drop-shadow(0 5px 8px rgba(90,35,38,.20))}
.cta-tab{position:relative;width:330px;height:46px;background:#F9E1CA;display:flex;align-items:center;gap:9px;padding-left:30px;
  color:var(--brown);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em;
  clip-path:path('M0.267 24.040C0.120 11.250 12.698 0.820 28.265 0.820L327.500 0.820C328.881 0.820 330.000 1.740 330.000 2.880L330.000 23.000C330.000 35.710 317.464 46.000 302.000 46.000L1.874 46.000C0.922 46.000 0.224 45.270 0.455 44.510C0.485 44.410 0.499 44.310 0.498 44.200L0.267 24.040Z')}
.cta-tab .mk{color:var(--orange-deep);font-size:19px}
.cta-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 40px 44px}
.cta-body h2{font-family:'Fraunces';font-weight:900;font-size:clamp(32px,4.4vw,54px);color:var(--ink);margin:0 0 14px;line-height:1.04}
.cta-body p{color:var(--ink-soft);max-width:460px;margin:0 0 30px;font-size:16px;line-height:1.5}
/* mobile: MISMA forma (bite escalado .72, esquinas 26) + pestaña bezier exacta escalada */
@media(max-width:880px){
  .contact{padding:40px 0 18px}
  .cta-stage{height:auto}
  /* CTA mobile: pestaña "Available" (chip corto TW145) escalada .85 = MISMO tamaño que todo el resto */
  .cta-long{display:none}
  /* labels de seccion a 11px (About me, Education, Problem, Brief) = igual que las pestañas .85 */
  .lbl{font-size:11px}
  .lbl .mk{font-size:15px}
  .cta-panel{clip-path:polygon(199.3px 0.0px, calc(100% - 26.0px) 0.0px, calc(100% - 20.8px) 0.5px, calc(100% - 15.9px) 2.1px, calc(100% - 11.5px) 4.5px, calc(100% - 7.7px) 7.7px, calc(100% - 4.5px) 11.5px, calc(100% - 2.1px) 15.9px, calc(100% - 0.5px) 20.8px, calc(100% - 0.0px) 26.0px, calc(100% - 0.0px) calc(100% - 26.0px), calc(100% - 0.5px) calc(100% - 20.8px), calc(100% - 2.1px) calc(100% - 15.9px), calc(100% - 4.5px) calc(100% - 11.5px), calc(100% - 7.7px) calc(100% - 7.7px), calc(100% - 11.5px) calc(100% - 4.5px), calc(100% - 15.9px) calc(100% - 2.1px), calc(100% - 20.8px) calc(100% - 0.5px), calc(100% - 26.0px) calc(100% - 0.0px), 26.0px calc(100% - 0.0px), 20.8px calc(100% - 0.5px), 15.9px calc(100% - 2.1px), 11.5px calc(100% - 4.5px), 7.7px calc(100% - 7.7px), 4.5px calc(100% - 11.5px), 2.1px calc(100% - 15.9px), 0.5px calc(100% - 20.8px), 0.0px calc(100% - 26.0px), 0.0px 56.5px, 0.1px 55.7px, 0.4px 54.9px, 0.9px 54.2px, 1.5px 53.6px, 2.2px 53.1px, 3.1px 52.7px, 4.1px 52.4px, 5.1px 52.4px, 135.6px 52.4px, 142.0px 51.8px, 148.0px 50.3px, 153.4px 47.9px, 158.1px 44.7px, 162.0px 40.8px, 164.9px 36.4px, 166.8px 31.5px, 167.4px 26.2px, 167.4px 26.2px, 168.1px 20.9px, 170.0px 16.0px, 172.9px 11.5px, 176.8px 7.7px, 181.5px 4.5px, 186.9px 2.1px, 192.9px 0.5px, 199.3px 0.0px)}
  .cta-tab{transform:scale(.85);transform-origin:top left;
    clip-path:path('M0.267 24.040C0.120 11.250 12.698 0.820 28.265 0.820L177.500 0.820C178.881 0.820 180.000 1.740 180.000 2.880L180.000 23.000C180.000 35.710 167.464 46.000 152.000 46.000L1.874 46.000C0.922 46.000 0.224 45.270 0.455 44.510C0.485 44.410 0.499 44.310 0.498 44.200L0.267 24.040Z');width:180px}
  .cta-tab .mk{font-size:17.5px}   /* sol a 15px visual (17.5 x .85) = igual que los labels */
  .cta-body{position:relative;padding:86px 22px 46px}
  .cta-body h2{font-size:clamp(28px,8.4vw,40px)}
  .cta-body p{font-size:15px;margin-bottom:24px}
}

/* ---- FOOTER (botón sol ✺) ---- */
footer{position:relative;padding:40px 0 16px}
footer .bar{background:var(--brown);color:var(--cream);border-radius:26px;padding:26px 32px;position:relative;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;box-shadow:var(--sh)}
footer a{color:var(--peach);text-decoration:none}
.footer-home{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;
  background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 14px 26px -8px rgba(217,97,47,.8);z-index:2;text-decoration:none;transition:transform .18s}
.footer-home:hover{transform:translateX(-50%) scale(1.07)}