/* ambar.css — Sistema visual propio del caso de estudio Ámbar.
   Identidad completamente distinta de la Home de Valionns. */

:root{
  --char:#231D19; --bone:#F1E8D8; --ivory:#FAF6EE; --clay:#A75336; --copper:#C48745; --ash:#9B9389; --linen:#D8CAB2;
  --line-l:rgba(35,29,25,.14); --line-d:rgba(241,232,216,.16);
  --serif:'Fraunces',serif; --sans:'DM Sans',sans-serif; --mono:'Space Mono',monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--char);font-family:var(--sans);font-weight:300;overflow-x:hidden;line-height:1.5}
a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{width:min(1240px,calc(100% - 56px));margin:auto}
::selection{background:var(--copper);color:var(--char)}
a:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* reveal system — exactly four techniques, used consistently */
[data-rv]{opacity:0}
[data-rv].show{opacity:1}
[data-rv="v"]{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);transform:translateY(22px)}
[data-rv="v"].show{transform:none}
[data-rv="mask"]{overflow:hidden}
[data-rv="mask"] .inner{transform:translateY(105%);transition:transform 1s cubic-bezier(.16,.8,.24,1)}
[data-rv="mask"].show .inner{transform:none}
[data-rv="zoom"] img{transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
[data-rv="zoom"].show img{transform:scale(1)}
[data-rv="zoom"]{transition:opacity .9s ease}
[data-rv="color"] img{filter:grayscale(1) brightness(.92);transition:filter 1.5s ease}
[data-rv="color"].show img{filter:grayscale(0) brightness(1)}
[data-rv="color"]{transition:opacity .9s ease}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  [data-rv] img{transform:none!important;filter:none!important;transition:none!important}
  [data-rv="mask"] .inner{transform:none!important}
}

/* nav — minimal, with discreet index */
.nav{position:fixed;z-index:50;top:0;left:0;width:100%;padding:22px 0;mix-blend-mode:difference}
.nav .wrap{display:flex;justify-content:space-between;align-items:center}
.nav .wm{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--bone)}
.nav .right{display:flex;align-items:center;gap:22px}
.nav button{background:none;border:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);cursor:pointer;padding:0}
.nav a.small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.index-panel{position:fixed;z-index:49;top:0;right:0;height:100svh;width:min(340px,84vw);background:var(--char);color:var(--bone);transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);padding:100px 34px 34px;display:flex;flex-direction:column;gap:6px}
.index-panel.open{transform:translateX(0)}
.index-panel a{font-family:var(--serif);font-size:22px;padding:12px 0;border-bottom:1px solid var(--line-d)}
.index-panel .cta{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);border:none;border-top:1px solid var(--line-d);padding-top:26px}

/* cover */
.cover{min-height:100svh;position:relative;background:var(--char);color:var(--bone)}
.cover img{position:absolute;inset:0;opacity:.5}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,29,25,.4) 0%,rgba(35,29,25,.55) 50%,rgba(35,29,25,.93) 100%)}
.cover-in{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 0 60px}
.cover .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:22px}
.cover h1{font-size:clamp(64px,11vw,148px);font-weight:500;line-height:.88;margin:0 0 24px;letter-spacing:-.01em}
.cover .tag{font-size:clamp(17px,1.7vw,23px);line-height:1.5;max-width:640px;color:var(--linen);margin:0 0 40px;font-family:var(--serif);font-style:italic;font-weight:400}
.cover-services{border-top:1px solid var(--line-d);padding-top:22px;font-family:var(--sans);font-size:13px;color:var(--linen);letter-spacing:.02em}
.cover-services b{color:var(--copper);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:10px;font-weight:400}

/* generic section shells */
.sec{padding:104px 0;border-bottom:1px solid var(--line-l)}
.sec-light{background:var(--ivory);color:var(--char)}
.sec-soft{background:var(--bone);color:var(--char)}
.sec-dark{background:var(--char);color:var(--bone);border-bottom-color:var(--line-d)}
.sec-head{display:grid;grid-template-columns:.5fr 1.5fr;gap:48px;margin-bottom:50px}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.sec-dark .kick{color:var(--copper)}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.2vw,54px);line-height:1.05;margin:12px 0 0}
.sec-intro{font-size:16px;line-height:1.8;max-width:600px;align-self:end;color:#5b5048}
.sec-dark .sec-intro{color:var(--linen)}
.body{font-size:16.5px;line-height:1.85;max-width:720px;color:#5b5048}
.sec-dark .body{color:var(--linen)}
.body p{margin:0 0 20px}
.body p:last-child{margin-bottom:0}

/* meta grid (overview) */
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);max-width:760px}
.meta-grid div{background:var(--ivory);padding:22px 24px}
.meta-grid b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-bottom:8px;font-weight:400}
.meta-grid span{font-size:14.5px;color:#4a4038}

/* process / bullet lists */
.plist{margin:0;padding:0;list-style:none;max-width:720px}
.plist li{padding:17px 0;border-top:1px solid var(--line-l);font-size:15.5px;line-height:1.6}
.sec-dark .plist li{border-color:var(--line-d)}
.plist li:last-child{border-bottom:1px solid var(--line-l)}
.sec-dark .plist li:last-child{border-color:var(--line-d)}
.plist b{font-family:var(--mono);font-size:11px;color:var(--clay);margin-right:14px}
.sec-dark .plist b{color:var(--copper)}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.tag-row span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-d);padding:8px 14px;border-radius:30px;color:var(--linen)}

/* photo */
.photo{height:58vh;min-height:400px}
.caption{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--copper);margin:14px 0 0}

/* microcopy */
.copy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:820px}
.copy-card{background:var(--ivory);border:1px solid var(--line-l);padding:22px 24px}
.copy-card .use{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-bottom:10px;display:block}
.copy-card p{font-family:var(--serif);font-style:italic;font-size:18px;margin:0;line-height:1.4}

/* logo system */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.logo-card{background:var(--ivory);color:var(--char);border:1px solid var(--line-d);padding:30px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.logo-card.on-dark{background:var(--char);color:var(--bone);border-color:var(--line-d)}
.logo-card .lock{display:flex;align-items:center;gap:12px}
.mk{width:38px;height:24px;border:2.5px solid currentColor;border-radius:50%}
.mk.sm{width:22px;height:14px;border-width:2px}
.logo-card .wm2{font-family:var(--serif);font-size:24px;font-weight:500}
.logo-card .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-top:14px}
.stack{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin:auto}
.clearspace{border:1px dashed var(--ash);padding:26px;display:flex;align-items:center;justify-content:center;margin:auto}
.minsize{display:flex;align-items:flex-end;gap:18px;margin:auto}
.minsize .wm2{font-size:13px}

/* typography specimen */
.type-row{border-top:1px solid var(--line-l);padding:26px 0;display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:baseline}
.type-row:last-child{border-bottom:1px solid var(--line-l)}
.type-row .role{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay)}
.font-tag{font-family:var(--mono);font-size:10px;color:var(--ash);margin-left:10px}

/* color system */
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-l);margin-bottom:36px}
.swatch-grid div{height:130px;display:flex;align-items:flex-end;padding:14px;font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.ratio-bar{display:flex;height:34px;width:100%;max-width:760px;overflow:hidden;border-radius:3px;margin-bottom:14px}
.ratio-bar span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;color:#fff}
.combo-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.combo{padding:14px 20px;font-family:var(--serif);font-size:15px}

/* packaging & applications grid */
.item-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.item-card{background:var(--ivory);border:1px solid var(--line-l);padding:20px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.item-card .obj{align-self:center;margin:auto}
.item-card .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);text-align:center}
.bagshape{width:64px;height:84px;background:var(--clay);border-radius:2px 2px 22px 22px;position:relative}
.bagshape:before{content:"";position:absolute;top:-9px;left:14px;right:14px;height:16px;border:2px solid var(--linen);border-bottom:none;border-radius:30px 30px 0 0}
.boxshape{width:78px;height:56px;background:var(--copper);position:relative}
.boxshape:before{content:"";position:absolute;inset:6px;border:1.5px solid rgba(35,29,25,.3)}
.labelshape{width:66px;height:40px;background:var(--ivory);border:1.5px solid var(--clay);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px}
.wrapshape{width:80px;height:60px;background:repeating-linear-gradient(115deg,var(--linen),var(--linen) 8px,var(--bone) 8px,var(--bone) 16px)}
.cupshape{width:44px;height:66px;background:var(--ivory);border:1.5px solid var(--clay);border-radius:4px 4px 16px 16px}
.napkinshape{width:60px;height:60px;background:var(--linen);transform:rotate(3deg)}
.stampshape{width:46px;height:46px;border-radius:50%;border:2px solid var(--clay);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px}
.cardshape{width:80px;height:50px;background:var(--char);color:var(--bone);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:12px}
.plaqueshape{width:80px;height:36px;background:var(--char);color:var(--bone);border:1px solid var(--copper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:12px}
.tagshape{width:50px;height:70px;background:var(--char);color:var(--bone);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:12px}
.numshape{width:40px;height:40px;border:1.5px solid var(--clay);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px}

/* editorial mockups */
.editorial-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px}
.menu-cover{background:var(--char);color:var(--bone);padding:40px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:420px}
.menu-cover .wm2{font-family:var(--serif);font-size:36px}
.menu-cover .sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper)}
.menu-inside{background:var(--ivory);border:1px solid var(--line-l);padding:36px 34px}
.menu-inside .cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin:20px 0 8px}
.menu-inside .cat:first-child{margin-top:0}
.menu-inside .row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line-l);font-family:var(--serif);font-size:16px}
.menu-inside .row span:last-child{font-family:var(--mono);font-size:11px;color:var(--clay)}
.mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mini-card{background:var(--bone);border:1px solid var(--line-l);padding:18px}
.mini-card .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.mini-card p{font-family:var(--serif);font-size:14px;margin:0}

/* digital mockups */
.digital-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:24px;align-items:start}
.browser{background:var(--ivory);border:1px solid var(--line-l);border-radius:8px;overflow:hidden}
.browser-bar{background:var(--bone);padding:11px 16px;display:flex;gap:6px;align-items:center}
.browser-bar span{width:8px;height:8px;border-radius:50%;background:var(--clay)}
.browser-bar .url{margin-left:14px;font-family:var(--mono);font-size:10px;color:var(--ash)}
.browser-nav{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;border-bottom:1px solid var(--line-l)}
.browser-nav .wm2{font-family:var(--serif);font-size:20px}
.browser-nav .links{display:flex;gap:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.browser-hero{padding:50px 34px}
.browser-hero h3{font-family:var(--serif);font-size:32px;margin:0 0 12px}
.browser-hero p{font-size:13.5px;color:#5b5048;margin:0 0 20px}
.dbtn{display:inline-block;background:var(--clay);color:var(--bone);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:12px 22px}
.phone{background:var(--char);border-radius:26px;padding:10px;width:min(230px,100%);margin:0 auto}
.phone-screen{background:var(--ivory);border-radius:18px;padding:24px 18px;min-height:400px;display:flex;flex-direction:column;justify-content:space-between}
.phone-screen .wm2{font-family:var(--serif);font-size:20px;text-align:center}
.phone-screen .item{border-top:1px solid var(--line-l);padding:10px 0;font-family:var(--sans);font-size:11.5px;display:flex;justify-content:space-between}
.phone-screen .dbtn{text-align:center;width:100%;margin-top:16px}

/* service scope */
.phase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.phase{background:var(--ivory);padding:28px 26px}
.phase .n{font-family:var(--mono);font-size:11px;color:var(--clay);letter-spacing:.08em}
.phase h4{font-family:var(--serif);font-size:21px;font-weight:500;margin:10px 0 14px}
.phase ul{margin:0;padding:0;list-style:none}
.phase li{font-size:13.5px;color:#5b5048;padding:6px 0;border-top:1px solid var(--line-l)}
.phase li:first-child{border-top:none}
.deliver-list{columns:2;gap:28px;max-width:820px;margin-top:8px}
.deliver-list li{font-size:14.5px;line-height:1.5;padding:9px 0;border-top:1px solid var(--line-l);break-inside:avoid;list-style:none}

/* commercial closing */
.closing{background:var(--clay);color:var(--ivory);padding:100px 0 50px}
.closing h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1.08;margin:0 0 40px;max-width:820px}
.cta-row{display:flex;gap:18px;flex-wrap:wrap}
.cta{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:16px 28px;border:1px solid var(--ivory);display:inline-flex;align-items:center;gap:10px;transition:.25s}
.cta.primary{background:var(--ivory);color:var(--clay)}
.cta.primary:hover{background:var(--char);color:var(--ivory);border-color:var(--char)}
.cta.ghost:hover{background:var(--ivory);color:var(--clay)}
.closing .footer{margin-top:70px;padding-top:22px;border-top:1px solid rgba(250,246,238,.3);display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;flex-wrap:wrap;gap:12px}
.closing .footer a:hover{text-decoration:underline}

@media(max-width:900px){
  .wrap{width:min(100% - 30px,1240px)}
  .sec{padding:76px 0}
  .sec-head{grid-template-columns:1fr}
  .meta-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:1fr 1fr}
  .type-row{grid-template-columns:90px 1fr}
  .swatch-grid{grid-template-columns:repeat(2,1fr)}
  .item-grid{grid-template-columns:repeat(2,1fr)}
  .editorial-grid{grid-template-columns:1fr}
  .digital-grid{grid-template-columns:1fr}
  .phase-grid{grid-template-columns:1fr}
  .deliver-list{columns:1}
  .copy-grid{grid-template-columns:1fr}
  .cover h1{font-size:clamp(52px,16vw,90px)}
}