/* case.css — layout compartido por las páginas de CASE STUDY (case-*.html).
   Se linkea DESPUÉS de site.css. Los clip-path y alturas específicas de cada
   página (hero, process, deliverables/results) van inline en cada case-*.html,
   generados con genclip2.py. Ver components/README.md. */
:root{--ba-orange:#FCAF6B}
section[id]{scroll-margin-top:118px}
#results{scroll-margin-top:80px}
/* nav: en case studies el pill usa gap 24 (el home usa 26) */
.navlinks{gap:24px}
.navlinks .back{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brown);opacity:1}
.navlinks .back .ico{width:16px;height:16px}
/* marca alternativa "← Portfolio" SOLO para mobile (desktop sigue con ✺ Melissa Uzal intacto) */
.brand-back{display:none;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  font-family:'Fraunces';font-weight:800;font-size:20px}
.brand-back .bk{width:20px;height:20px;color:var(--brown);flex:none}

/* ---- stages con clip-path ---- */
.cs-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))}
.cs-tab-wrap{position:absolute;top:0;z-index:3;filter:drop-shadow(0 5px 8px rgba(90,35,38,.20))}
.cs-tab-wrap.tl{left:0}.cs-tab-wrap.tr{right:0}
.cs-tab{position:relative;width:190px;height:46px;background:#F9E1CA;display:flex;align-items:center;gap:9px;
  color:var(--brown);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em}
.cs-tab.tl{padding-left:30px;justify-content:flex-start}
.cs-tab.tr{padding-right:30px;justify-content:flex-end}
.cs-tab .mk{color:var(--orange-deep);font-size:19px}

/* ---- HERO ---- */
.cs-hero{padding:16px 0 0}
.cs-hstage{position:relative;width:1132px;max-width:100%;height:440px;margin:0 auto}
.cs-hpanel{position:absolute;inset:0;background:var(--panel);
  clip-path:path('M887.500 0.000L34.000 0.000C15.431 0.000 0.000 15.431 0.000 34.000L0.000 406.000C0.000 424.569 15.431 440.000 34.000 440.000L1098.000 440.000C1116.569 440.000 1132.000 424.569 1132.000 406.000L1132.000 66.500C1132.000 63.830 1129.314 61.600 1126.000 61.600L962.500 61.600C941.789 61.600 925.000 47.810 925.000 30.810L925.000 30.810C925.000 13.790 908.211 0.000 887.500 0.000Z')}
.cs-hero .cs-tab.tr{clip-path:path('M189.733 24.040C189.880 11.250 177.302 0.820 161.735 0.820L2.500 0.820C1.119 0.820 0.000 1.740 0.000 2.880L0.000 23.000C0.000 35.710 12.536 46.000 28.000 46.000L188.126 46.000C189.078 46.000 189.776 45.270 189.545 44.510C189.515 44.410 189.501 44.310 189.502 44.200L189.733 24.040Z')}
.cs-hbody{position:absolute;inset:0;padding:38px 44px 40px;z-index:2;display:flex;flex-direction:column}
.cs-hbody h1{font-family:'Fraunces';font-weight:900;font-size:34px;line-height:1.05;color:var(--ink);max-width:820px}
.cs-intro{font-size:15px;color:var(--ink-soft);max-width:960px;margin:12px 0 22px;line-height:1.55}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sub{background:#F9E1CA;border-radius:22px;padding:22px 26px}
.sub .lbl{margin-bottom:16px}
ul.ticks{list-style:none;display:flex;flex-direction:column;gap:9px}
ul.ticks li{position:relative;padding-left:22px;font-size:14px;line-height:1.4;color:#7c4b3c}
ul.ticks li::before{content:"";position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* ---- secciones ---- */
.cs2{padding:50px 0 0}
.sh-wrap{filter:drop-shadow(0 8px 12px rgba(90,35,38,.09)) drop-shadow(0 24px 40px rgba(90,35,38,.09))}
.card{background:var(--panel);border-radius:28px;padding:34px 40px}
/* video-showcase cards (Instagram "Video content" + UGC "Campaigns"): más aire arriba/abajo */
.card.vidcard{padding-top:50px;padding-bottom:50px}
.card h3,.cs-pbody h3{font-family:'Fraunces';font-weight:700;font-size:23px;color:var(--ink);margin-bottom:10px}
.txt-col p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
.txt-col p+p{margin-top:12px}
.split{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center;min-height:380px}
.card.split{min-height:380px}

/* auto-scroll infinito (sin interacción) */
.scroller{width:400px;height:300px;overflow:hidden;border-radius:16px;background:#fff;
  border:1px solid rgba(120,68,30,.12);box-shadow:0 10px 20px -12px rgba(90,38,30,.3)}
.scroll-track{display:flex;flex-direction:column;will-change:transform}
.scroll-track img{width:100%;display:block}
/* notion: leve zoom para tapar los bordes blancos del export */
.scroll-track.notion{animation:vscroll 45s linear infinite;transform-origin:center}
.scroll-track.notion img{transform:scale(1.14);transform-origin:center}
/* feed: recorta el header (grilla arranca a ~2.6% de la altura) */
.scroll-track.feed{animation:vscroll 150s linear infinite}
.scroll-track.feed .fcrop{overflow:hidden;aspect-ratio:135/1470}
.scroll-track.feed .fcrop img{margin-top:-28.9%}
@keyframes vscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ---- MY PROCESS · Strategy ---- */
.cs-pstage{position:relative;width:1132px;max-width:100%;height:380px;margin:0 auto}
.cs-ppanel{position:absolute;inset:0;background:var(--panel);
  clip-path:path('M234.500 0.000L1098.000 0.000C1116.569 0.000 1132.000 15.431 1132.000 34.000L1132.000 346.000C1132.000 364.569 1116.569 380.000 1098.000 380.000L34.000 380.000C15.431 380.000 0.000 364.569 0.000 346.000L0.000 66.500C0.000 63.830 2.686 61.600 6.000 61.600L159.500 61.600C180.211 61.600 197.000 47.810 197.000 30.810L197.000 30.810C197.000 13.790 213.789 0.000 234.500 0.000Z')}
.cs-proc .cs-tab.tl{width:180px;
  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')}
.cs-pbody{position:absolute;inset:0;padding:40px;z-index:2;display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center}
.notion-wrap{position:relative}
.applogo{position:absolute;width:46px;height:46px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 15px -6px rgba(90,38,30,.35);border:1px solid rgba(120,68,30,.10);z-index:4}
.applogo img{width:26px;height:26px;object-fit:contain}
.applogo.ph svg{width:24px;height:24px;stroke:var(--brown)}
.notion-wrap .applogo{top:-16px;left:-16px}

/* ---- REFINEMENT ---- */
.ba-pair{display:flex;gap:14px;justify-content:flex-end}
.ba-pair figure{flex:1;min-width:0;position:relative}
.ba-frame{position:relative;aspect-ratio:1080/1251;border-radius:16px;overflow:hidden;background:var(--ba-orange);
  box-shadow:0 10px 20px -12px rgba(90,38,30,.3)}
.ba-frame img{width:100%;height:100%;display:block}
.ba-frame.cover img{object-fit:cover}
.ba-frame.contain img{object-fit:contain;background:var(--ba-orange)}
/* etiqueta = botón SOBRE EL BORDE superior (no dentro), como los logos en los celus:
   así no tapa nada de la imagen. Vive en <figure> (no en .ba-frame, que recorta). */
.ba-pair figure{overflow:visible}
.ba-badge{position:absolute;top:-13px;left:16px;z-index:3;background:#F9E1CA;color:var(--brown);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:7px 15px;border-radius:12px;
  box-shadow:0 6px 13px -4px rgba(90,38,30,.45)}
.ba-badge.after{background:var(--celeste)}

/* ---- PILLARS (mini cards marrones, título naranjita / texto blanco, como About) ---- */
.pillars{display:flex;gap:14px;margin-top:20px}
.pm{flex:1;background:var(--brown);border-radius:16px;padding:16px 18px;box-shadow:0 10px 18px -10px rgba(90,35,38,.3)}
.pm b{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--amber);margin-bottom:4px}
.pm span{font-size:16.5px;font-weight:600;color:var(--cream)}

/* ---- VIDEO CONTENT (4 celus rellenando, play hover/click) ---- */
.videos{display:flex;justify-content:space-between;margin-top:26px}
.vfig{text-align:center}
/* nav de dos medios botones DENTRO del celular (reusa el patron del celular de la home);
   solo visible en mobile (donde se ve un celular por vez) */
.vpnav{display:none}
.vphone{width:240px;height:452px;background:var(--brown);border-radius:36px;padding:9px;position:relative;cursor:pointer;
  box-shadow:0 22px 38px -20px rgba(90,35,38,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.vphone .vscreen{width:100%;height:100%;border-radius:28px;overflow:hidden;background:var(--brown)}
.vphone video{width:100%;height:100%;object-fit:cover;display:block}
.vphone .applogo{top:-13px;left:-13px;width:42px;height:42px}
.vphone .applogo img{width:24px;height:24px}
.vphone .applogo img[alt="Edits"]{width:28px;height:28px}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;transition:opacity .2s}
.vplay span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.vplay span::after{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--brown);margin-left:4px}
.vphone.playing .vplay{opacity:0}
.vfig figcaption{margin-top:16px;font-size:14px;font-weight:700;color:var(--brown);text-transform:uppercase;letter-spacing:.08em}

/* ---- DELIVERABLES + RESULTS (yin-yang) ----
   Dos cards del MISMO color panel: Deliverables está comida por abajo-izq (cóncavo) y
   Results le sobresale por arriba-izq (convexo), un toque más chico -> calle 16 uniforme.
   El título "Results" es texto plano sobre el panel (sin fondo distinto). Sin pestaña. */
.dr-stage{position:relative;width:1132px;max-width:100%;height:345px;margin:0 auto}
.deliv-wrap{position:absolute;top:0;left:0;width:100%;height:119px;z-index:2;
  filter:drop-shadow(0 5px 9px rgba(90,35,38,.06)) drop-shadow(0 11px 18px rgba(90,35,38,.05))}
.deliv-panel{width:100%;height:100%;background:var(--panel);
  clip-path:polygon(0.00px 24.00px,0.46px 19.32px,1.83px 14.82px,4.04px 10.67px,7.03px 7.03px,10.67px 4.04px,14.82px 1.83px,19.32px 0.46px,24.00px 0.00px,1108.00px 0.00px,1108.00px 0.00px,1112.68px 0.46px,1117.18px 1.83px,1121.33px 4.04px,1124.97px 7.03px,1127.96px 10.67px,1130.17px 14.82px,1131.54px 19.32px,1132.00px 24.00px,1132.00px 95.00px,1132.00px 95.00px,1131.54px 99.68px,1130.17px 104.18px,1127.96px 108.33px,1124.97px 111.97px,1121.33px 114.96px,1117.18px 117.17px,1112.68px 118.54px,1108.00px 119.00px,222.00px 119.00px,222.00px 119.00px,218.49px 118.65px,215.11px 117.63px,212.00px 115.97px,209.27px 113.73px,207.03px 111.00px,205.37px 107.89px,204.35px 104.51px,204.00px 101.00px,204.00px 101.00px,203.35px 94.37px,201.41px 87.99px,198.27px 82.11px,194.04px 76.96px,188.89px 72.73px,183.01px 69.59px,176.63px 67.65px,170.00px 67.00px,24.00px 67.00px,24.00px 67.00px,19.32px 66.54px,14.82px 65.17px,10.67px 62.96px,7.03px 59.97px,4.04px 56.33px,1.83px 52.18px,0.46px 47.68px,0.00px 43.00px,0.00px 24.00px)}
.deliv-body{position:absolute;top:0;left:0;right:0;height:119px;z-index:3;
  display:flex;align-items:flex-start;gap:40px;padding:0 40px}
.deliv-body .cs-lbl{flex:none;margin-top:23px;display:inline-flex;align-items:center;gap:8px;
  color:var(--brown);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em}
.deliv-body .cs-lbl .mk{color:var(--orange-deep);font-size:19px}
.chips{flex:1;align-self:center;display:flex;align-items:center;gap:10px}
.chip{flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:#F9E1CA;color:var(--brown);font-weight:600;font-size:13.5px;
  padding:13px 10px;border-radius:14px;box-shadow:inset 0 3px 6px -1px rgba(120,68,30,.34),inset 0 -2px 4px rgba(255,255,255,.55)}
/* Deliverables + Results: la separación es UN canal de ancho constante 16 que baja un escalón
   (la mordida) con vueltas redondeadas. Deliverables = arriba del canal; Results = abajo. Las dos
   paredes son del MISMO canal -> calle EXACTA 16 en todo el recorrido (recto y en la vuelta) y cada
   card cierra su propia curva con su radio (mordida ~Rc±8, NO paralelas idénticas). "Results" a x40
   centrado sobre el bump (40 del borde, 40 de la vuelta de la mordida). */
.res-wrap{position:absolute;left:0;top:83px;width:100%;height:262px;z-index:1;
  filter:drop-shadow(0 10px 16px rgba(90,35,38,.08)) drop-shadow(0 24px 40px rgba(90,35,38,.10))}
.res-panel{width:100%;height:100%;background:var(--panel);
  clip-path:polygon(0.00px 24.00px,0.46px 19.32px,1.83px 14.82px,4.04px 10.67px,7.03px 7.03px,10.67px 4.04px,14.82px 1.83px,19.32px 0.46px,24.00px 0.00px,170.00px 0.00px,170.00px 0.00px,173.51px 0.35px,176.89px 1.37px,180.00px 3.03px,182.73px 5.27px,184.97px 8.00px,186.63px 11.11px,187.65px 14.49px,188.00px 18.00px,188.00px 18.00px,188.65px 24.63px,190.59px 31.01px,193.73px 36.89px,197.96px 42.04px,203.11px 46.27px,208.99px 49.41px,215.37px 51.35px,222.00px 52.00px,1108.00px 52.00px,1108.00px 52.00px,1112.68px 52.46px,1117.18px 53.83px,1121.33px 56.04px,1124.97px 59.03px,1127.96px 62.67px,1130.17px 66.82px,1131.54px 71.32px,1132.00px 76.00px,1132.00px 238.00px,1132.00px 238.00px,1131.54px 242.68px,1130.17px 247.18px,1127.96px 251.33px,1124.97px 254.97px,1121.33px 257.96px,1117.18px 260.17px,1112.68px 261.54px,1108.00px 262.00px,24.00px 262.00px,24.00px 262.00px,19.32px 261.54px,14.82px 260.17px,10.67px 257.96px,7.03px 254.97px,4.04px 251.33px,1.83px 247.18px,0.46px 242.68px,0.00px 238.00px,0.00px 24.00px)}
/* res-title vive DENTRO de .res-body (posicionado relativo a ella); top:-34 la deja en el notch */
.res-title{position:absolute;left:40px;top:-34px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  color:var(--brown);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em}
.res-title .mk{color:var(--orange-deep);font-size:19px}
.res-body{position:absolute;left:0;top:135px;width:100%;height:210px;padding:40px;z-index:2;display:flex;align-items:center}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%}
.res{background:var(--brown);color:var(--cream);border-radius:22px;padding:16px 28px;box-shadow:0 12px 22px -12px rgba(90,35,38,.34)}
.res b{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--amber);margin-bottom:12px}
.res .ba{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.res .from{font-family:'Fraunces';font-weight:700;font-size:22px;color:var(--peach)}
.res .arrow{color:var(--amber);font-size:18px}
.res .to{font-family:'Fraunces';font-weight:800;font-size:34px;line-height:1}
.res small{display:block;margin-top:10px;font-size:12.5px;color:rgba(247,238,227,.75)}

/* ---- WHAT THIS TAUGHT ME (glass real, más altas, sin línea oscura) ---- */
.taught{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.taught .t{min-height:200px;display:flex;flex-direction:column;padding:32px 30px;border-radius:22px;
  background:linear-gradient(145deg,rgba(150,205,232,.62),rgba(167,210,232,.34));
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 0 26px 3px rgba(255,255,255,.55),0 16px 36px -14px rgba(63,143,176,.42),inset 0 1px 2px rgba(255,255,255,.85)}
.taught .t .cs-lbl{display:inline-flex;align-items:center;gap:8px;color:var(--orange-deep);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:24px}
.taught .t .cs-lbl .mk{color:var(--orange-deep);font-size:18px}
.taught .t h4{font-family:'Fraunces';font-weight:700;font-size:20px;color:var(--ink);margin-bottom:12px;line-height:1.2}
.taught .t p{font-size:14px;color:var(--ink-soft)}

/* CONTACT + FOOTER = ver site.css (fluido + tab escalada en mobile, se comparten). */

/* ================= CASE MOBILE ================= */
/* ≤1000: el contenido reflowea (body estatico crea el alto, panel absolute inset:0 con clip FLUIDO
   -> mismas mordidas a cualquier ancho). ≤880: nav dropdown. */
@media(max-width:1000px){
  /* ROBUSTO: bg + clip van DIRECTO en el body (patron .card), sin panel absoluto detras (eso rompia
     hero + Strategy). La sombra va como filter en el stage (clip-path recortaria un box-shadow del body). */
  .cs-hstage,.cs-pstage{position:relative;width:100%;height:auto;
    filter:drop-shadow(0 12px 16px rgba(90,35,38,.10)) drop-shadow(0 26px 40px rgba(90,35,38,.09))}
  .cs-shadow{display:none}
  /* padding-top 61 = la pestaña ESCALADA (46 x .85 = 39) + ~22 de padding para respetar la mordida */
  .cs-hbody,.cs-pbody{position:relative;padding:61px 26px 30px;background:var(--panel)}
  /* pestañas escaladas .85 -> texto ~11px = MISMO tamaño que todos los titulos de seccion */
  .cs-hero .cs-tab-wrap.tr{transform:scale(.85);transform-origin:top right}
  .cs-proc .cs-tab-wrap.tl{transform:scale(.85);transform-origin:top left}
  /* HERO: clip fluido DIRECTO en el body (pestaña arriba-derecha) */
  .cs-hbody{clip-path:polygon(calc(100% - 207.8px) 0.0px, 34.0px 0.0px, 27.2px 0.7px, 20.9px 2.7px, 15.1px 5.9px, 10.0px 10.0px, 5.9px 15.1px, 2.7px 20.9px, 0.7px 27.2px, 0.0px 34.0px, 0.0px calc(100% - 34.0px), 0.7px calc(100% - 27.2px), 2.7px calc(100% - 20.9px), 5.9px calc(100% - 15.1px), 10.0px calc(100% - 10.0px), 15.1px calc(100% - 5.9px), 20.9px calc(100% - 2.7px), 27.2px calc(100% - 0.7px), 34.0px calc(100% - 0.0px), calc(100% - 34.0px) calc(100% - 0.0px), calc(100% - 27.2px) calc(100% - 0.7px), calc(100% - 20.9px) calc(100% - 2.7px), calc(100% - 15.1px) calc(100% - 5.9px), calc(100% - 10.0px) calc(100% - 10.0px), calc(100% - 5.9px) calc(100% - 15.1px), calc(100% - 2.7px) calc(100% - 20.9px), calc(100% - 0.7px) calc(100% - 27.2px), calc(100% - 0.0px) calc(100% - 34.0px), calc(100% - 0.0px) 56.5px, calc(100% - 0.1px) 55.7px, calc(100% - 0.4px) 54.9px, calc(100% - 0.9px) 54.2px, calc(100% - 1.5px) 53.6px, calc(100% - 2.2px) 53.1px, calc(100% - 3.1px) 52.7px, calc(100% - 4.1px) 52.4px, calc(100% - 5.1px) 52.4px, calc(100% - 144.1px) 52.4px, calc(100% - 150.5px) 51.8px, calc(100% - 156.5px) 50.3px, calc(100% - 161.9px) 47.9px, calc(100% - 166.6px) 44.7px, calc(100% - 170.5px) 40.8px, calc(100% - 173.4px) 36.4px, calc(100% - 175.3px) 31.5px, calc(100% - 176.0px) 26.2px, calc(100% - 176.0px) 26.2px, calc(100% - 176.6px) 20.9px, calc(100% - 178.5px) 16.0px, calc(100% - 181.4px) 11.5px, calc(100% - 185.3px) 7.7px, calc(100% - 190.0px) 4.5px, calc(100% - 195.4px) 2.1px, calc(100% - 201.4px) 0.5px, calc(100% - 207.8px) 0.0px)}
  .cs-hbody h1{font-size:26px}
  .cs-intro{font-size:14.5px;margin:12px 0 20px}
  .duo{grid-template-columns:1fr;gap:16px}
  .sub{padding:20px 22px}
  /* PROCESS (Strategy): clip fluido DIRECTO en el body (pestaña arriba-izquierda) */
  .cs-pbody{clip-path:polygon(199.3px 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 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)}
  .cs-pbody{display:flex;flex-direction:column;gap:24px}
  .split,.card.split{display:flex;flex-direction:column;min-height:0}
  .scroller{width:100%}
  .notion-wrap,.feed{width:100%}
  .card{padding:28px 24px}
  .card.vidcard{padding:34px 0}
  .card.vidcard h3,.card.vidcard .txt-col{padding:0 24px}
  /* pillars: 3 mini-cards mas chicas, una AL LADO de la otra (no apiladas) */
  .pillars{flex-direction:row;gap:8px;margin-top:16px}
  .pm{padding:12px 10px}
  /* margin-bottom 9 = misma calle amarillo->blanco que el original (~7px visual). Hay que subirlo de 3
     porque el span pasa a display:block (abajo) y pierde el leading inline que daba ese gap; con 9 el
     gap vuelve a verse como antes (NO agrandarlo). */
  .pm b{font-size:9.5px;margin-bottom:9px}
  /* UNICO cambio pedido: apretar el espacio ENTRE lineas del texto blanco. display:block para que mande
     SU line-height (inline, el espaciado lo define el strut del bloque .pm -> quedaban a ~25px). */
  .pm span{font-size:13px;line-height:1.1;display:block}
  /* Before/After lado a lado, mas chicas */
  .ba-pair{justify-content:flex-start;gap:12px}
  /* VIDEO: UN solo celular grande centrado; las flechas (dos medios botones abajo del celular,
     IGUAL que el celular de la home) cambian de video con transicion del video + caption + logo */
  .vcarousel{position:relative;margin-top:20px}
  .videos{position:relative;display:block;margin:0;overflow:visible}
  .vfig{position:absolute;top:0;left:0;right:0;margin:0;opacity:0;visibility:hidden;
    transition:opacity .35s ease;display:flex;flex-direction:column;align-items:center}
  .vfig.active{position:relative;opacity:1;visibility:visible}
  .vphone{width:min(290px,76vw);height:auto;aspect-ratio:240/452}
  .vfig figcaption{margin-top:16px}
  /* nav = dos mitades pegadas, degrade marron desde abajo (mismo look que .phone-nav de la home) */
  .vpnav{display:flex;gap:0;position:absolute;left:9px;right:9px;bottom:9px;height:58px;z-index:4;
    border-radius:0 0 28px 28px;overflow:hidden}
  .vpnav button{flex:1;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(to top,rgba(107,58,46,.92),rgba(107,58,46,0));transition:.15s}
  .vpnav button:active{background:linear-gradient(to top,rgba(107,58,46,1),rgba(107,58,46,.1))}
  .vpnav button .ico{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  /* DELIVERABLES + RESULTS: MISMA mordida que el desktop (S-curve Rc=26, calle 16), pero fluida
     y crecida: deliv mas alto (crece hacia arriba, notch abajo-izq intacto), chips en 2 columnas
     (der 4 / izq 2 + label), y el titulo Results comiendo el hueco abajo-izq. */
  .dr-stage{position:relative;display:block;width:100%;height:auto}
  .deliv-wrap,.res-wrap{display:none}
  .deliv-body{position:relative;inset:auto;background:var(--panel);height:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start;padding:24px 22px 22px;
    box-shadow:0 14px 26px -16px rgba(90,38,30,.26);
    clip-path:polygon(0.0px 24.0px, 0.5px 19.3px, 1.8px 14.8px, 4.0px 10.7px, 7.0px 7.0px, 10.7px 4.0px, 14.8px 1.8px, 19.3px 0.5px, 24.0px 0.0px, calc(100% - 24.0px) 0.0px, calc(100% - 24.0px) 0.0px, calc(100% - 19.3px) 0.5px, calc(100% - 14.8px) 1.8px, calc(100% - 10.7px) 4.0px, calc(100% - 7.0px) 7.0px, calc(100% - 4.0px) 10.7px, calc(100% - 1.8px) 14.8px, calc(100% - 0.5px) 19.3px, calc(100% - 0.0px) 24.0px, calc(100% - 0.0px) calc(100% - 24.0px), calc(100% - 0.0px) calc(100% - 24.0px), calc(100% - 0.5px) calc(100% - 19.3px), calc(100% - 1.8px) calc(100% - 14.8px), calc(100% - 4.0px) calc(100% - 10.7px), calc(100% - 7.0px) calc(100% - 7.0px), calc(100% - 10.7px) calc(100% - 4.0px), calc(100% - 14.8px) calc(100% - 1.8px), calc(100% - 19.3px) calc(100% - 0.5px), calc(100% - 24.0px) calc(100% - 0.0px), 202.0px calc(100% - 0.0px), 202.0px calc(100% - 0.0px), 198.5px calc(100% - 0.3px), 195.1px calc(100% - 1.4px), 192.0px calc(100% - 3.0px), 189.3px calc(100% - 5.3px), 187.0px calc(100% - 8.0px), 185.4px calc(100% - 11.1px), 184.3px calc(100% - 14.5px), 184.0px calc(100% - 18.0px), 184.0px calc(100% - 18.0px), 183.3px calc(100% - 24.6px), 181.4px calc(100% - 31.0px), 178.3px calc(100% - 36.9px), 174.0px calc(100% - 42.0px), 168.9px calc(100% - 46.3px), 163.0px calc(100% - 49.4px), 156.6px calc(100% - 51.3px), 150.0px calc(100% - 52.0px), 24.0px calc(100% - 52.0px), 24.0px calc(100% - 52.0px), 19.3px calc(100% - 52.5px), 14.8px calc(100% - 53.8px), 10.7px calc(100% - 56.0px), 7.0px calc(100% - 59.0px), 4.0px calc(100% - 62.7px), 1.8px calc(100% - 66.8px), 0.5px calc(100% - 71.3px), 0.0px calc(100% - 76.0px), 0.0px 24.0px)}
  /* label col-izq fila-1; chips 1-2 col-izq (filas 2-3, arriba del notch); chips 3-6 col-der (filas 1-4) */
  .deliv-body .cs-lbl{grid-column:1;grid-row:1;margin:0 0 2px}
  .chips{display:contents}
  .chip{margin:0}
  .chip:nth-child(1){grid-column:1;grid-row:2}
  .chip:nth-child(2){grid-column:1;grid-row:3}
  .chip:nth-child(3){grid-column:2;grid-row:1}
  .chip:nth-child(4){grid-column:2;grid-row:2}
  .chip:nth-child(5){grid-column:2;grid-row:3}
  .chip:nth-child(6){grid-column:2;grid-row:4}
  .res-body{position:relative;inset:auto;background:var(--panel);margin-top:-36px;height:auto;top:auto;
    padding:70px 22px 26px;box-shadow:0 14px 26px -16px rgba(90,38,30,.26);
    clip-path:polygon(0.0px 24.0px, 0.5px 19.3px, 1.8px 14.8px, 4.0px 10.7px, 7.0px 7.0px, 10.7px 4.0px, 14.8px 1.8px, 19.3px 0.5px, 24.0px 0.0px, 150.0px 0.0px, 150.0px 0.0px, 153.5px 0.3px, 156.9px 1.4px, 160.0px 3.0px, 162.7px 5.3px, 165.0px 8.0px, 166.6px 11.1px, 167.7px 14.5px, 168.0px 18.0px, 168.0px 18.0px, 168.7px 24.6px, 170.6px 31.0px, 173.7px 36.9px, 178.0px 42.0px, 183.1px 46.3px, 189.0px 49.4px, 195.4px 51.3px, 202.0px 52.0px, calc(100% - 24.0px) 52.0px, calc(100% - 24.0px) 52.0px, calc(100% - 19.3px) 52.5px, calc(100% - 14.8px) 53.8px, calc(100% - 10.7px) 56.0px, calc(100% - 7.0px) 59.0px, calc(100% - 4.0px) 62.7px, calc(100% - 1.8px) 66.8px, calc(100% - 0.5px) 71.3px, calc(100% - 0.0px) 76.0px, calc(100% - 0.0px) calc(100% - 24.0px), calc(100% - 0.0px) calc(100% - 24.0px), calc(100% - 0.5px) calc(100% - 19.3px), calc(100% - 1.8px) calc(100% - 14.8px), calc(100% - 4.0px) calc(100% - 10.7px), calc(100% - 7.0px) calc(100% - 7.0px), calc(100% - 10.7px) calc(100% - 4.0px), calc(100% - 14.8px) calc(100% - 1.8px), calc(100% - 19.3px) calc(100% - 0.5px), calc(100% - 24.0px) calc(100% - 0.0px), 24.0px calc(100% - 0.0px), 24.0px calc(100% - 0.0px), 19.3px calc(100% - 0.5px), 14.8px calc(100% - 1.8px), 10.7px calc(100% - 4.0px), 7.0px calc(100% - 7.0px), 4.0px calc(100% - 10.7px), 1.8px calc(100% - 14.8px), 0.5px calc(100% - 19.3px), 0.0px calc(100% - 24.0px), 0.0px 24.0px)}
  /* el titulo Results vuelve al notch (dentro de res-body, arriba-izq sobre el bump) */
  .res-title{top:20px;left:22px;transform:none}
  .res-grid{grid-template-columns:1fr;gap:14px}
  .taught{grid-template-columns:1fr;gap:16px}
  /* todos los labels de seccion a 11px = MISMO tamaño que las pestañas escaladas .85
     (specificity alta para ganarle a .deliv-body .cs-lbl y .taught .t .cs-lbl base) */
  .deliv-body .cs-lbl,.taught .t .cs-lbl,.res-title,.cs-lbl{font-size:11px}
  /* MISMO sol en todo (15px), alta especificidad para ganarle a .deliv-body/.taught base (19/18px) */
  .deliv-body .cs-lbl .mk,.taught .t .cs-lbl .mk,.res-title .mk,.cs-lbl .mk{font-size:15px}
  .cs-tab .mk{font-size:17.5px}   /* tab escalado .85 -> sol 15px visual, igual que los labels */
}

/* ≤880: NAV = mismo mecanismo que la home (botón hundido/hamburguesa dentro del pill que
   despliega los links en horizontal). La MARCA es "← Portfolio": la flecha queda siempre
   visible y "Portfolio" (.bname) se colapsa al abrir -> queda solo la flecha. site.css maneja
   el colapso de .bname y la expansión de los links; acá solo escondemos el .back viejo. */
@media(max-width:880px){
  .navlinks .back{display:none}          /* Portfolio ahora es la marca (.brand-back) */
  .brand{display:none}                    /* ocultar "✺ Melissa Uzal" */
  .brand-back{display:inline-flex}        /* mostrar "← Portfolio" (colapsa a la flecha al abrir) */
  .navlinks{gap:0}                        /* si no, el pill queda estirado por los gaps de 24 */
}