/* =====================================================================
   BAYOUD STUDIO V3 — sistema compartido de las páginas interiores.
   Mismo mundo que la portada: tinta, marfil, oro; filetes finos;
   mucho aire; tipografía monumental serifa. Sin dependencias externas.
   ===================================================================== */
:root{
  --ink:#0D0A07; --ink2:#14100B; --ivory:#F2E9D8; --ivory-dim:#CBBEA3;
  --copper:#C68B5E; --gold:#C9A35F; --gold-bright:#E8C87E;
  --line:rgba(201,163,95,.14); --panel:rgba(16,12,8,.72);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.19,1,.22,1); --ease-io:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink)}
body{font-family:var(--sans); color:var(--ivory); overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(110% 60% at 50% -10%, rgba(201,163,95,.07), transparent 60%),
    linear-gradient(180deg,#0D0A07, #0B0806 40%, #0D0A07);}
::selection{background:var(--gold); color:var(--ink)}
img{max-width:100%}
a{color:inherit}
#grain{position:fixed; inset:-100px; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-38px,22px)}50%{transform:translate(24px,-30px)}75%{transform:translate(-14px,-18px)}}

/* ============ HEADER ============ */
header{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(18px,4vw,54px);
  background:linear-gradient(180deg, rgba(13,10,7,.92), rgba(13,10,7,0)); backdrop-filter:blur(4px)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:38px; height:38px; border-radius:9px; display:block}
.brand .bt{line-height:1.02}
.brand .bt b{font-family:var(--serif); font-weight:560; font-size:19px; letter-spacing:.18em; display:block}
.brand .bt span{font-size:9.5px; letter-spacing:.5em; color:var(--copper); text-transform:uppercase}
nav.main{display:flex; gap:clamp(14px,2.6vw,34px)}
nav.main a{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim); text-decoration:none; position:relative; padding:6px 0; display:inline-block}
nav.main a .nl{display:inline-block; transition:color .3s}
nav.main a:hover .nl{color:var(--gold-bright)}
nav.main a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
nav.main a:hover::after{transform:scaleX(1); transform-origin:left}
nav.main a.act{color:var(--ivory)}
nav.main a.act .nl{color:var(--gold)}
nav.main a.act::after{transform:scaleX(1)}
.btn{display:inline-flex; align-items:center; gap:12px; background:var(--copper); color:#17100A; font-weight:600;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; padding:15px 28px; border-radius:100px;
  transition:transform .35s var(--ease), background .3s, box-shadow .35s; box-shadow:0 8px 32px rgba(198,139,94,.22)}
.btn:hover{transform:translateY(-2px); background:var(--gold-bright); box-shadow:0 14px 40px rgba(201,163,95,.32)}
.btn.ghost{background:transparent; color:var(--ivory); border:1px solid rgba(242,233,216,.35); box-shadow:none}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-bright); background:rgba(201,163,95,.06)}
.btn.big{font-size:14px; padding:20px 38px}
.btn .arr{transition:transform .35s var(--ease)} .btn:hover .arr{transform:translateX(4px)}
header .btn{padding:12px 20px}
#burger{display:none; width:44px; height:44px; border:1px solid rgba(242,233,216,.25); border-radius:12px; background:rgba(13,10,7,.6); cursor:pointer; place-items:center}
#burger i{display:block; width:18px; height:1.5px; background:var(--ivory); position:relative; transition:.3s}
#burger i::before,#burger i::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ivory); transition:.3s}
#burger i::before{top:-6px} #burger i::after{top:6px}
body.menu-open #burger i{background:transparent}
body.menu-open #burger i::before{top:0; transform:rotate(45deg)}
body.menu-open #burger i::after{top:0; transform:rotate(-45deg)}
#mmenu{position:fixed; inset:0; z-index:99; background:rgba(9,6,4,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; padding:100px clamp(24px,8vw,60px) 40px;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease)}
body.menu-open #mmenu{opacity:1; pointer-events:auto}
#mmenu a.mlink{font-family:var(--serif); font-size:clamp(30px,8vw,44px); font-weight:480; color:var(--ivory);
  text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline}
#mmenu a.mlink span{font-size:11px; letter-spacing:.3em; color:var(--copper); text-transform:uppercase; font-family:var(--sans)}
#mmenu a.mlink.act{color:var(--gold)}
#mmenu .mfoot{margin-top:30px; color:var(--ivory-dim); font-size:14px; line-height:1.7}
#mmenu .mfoot a{color:var(--gold); text-decoration:none}
@media(max-width:1020px){ nav.main{display:none} #burger{display:grid} header .btn{display:none} }

/* ============ LAYOUT / TYPO ============ */
main{position:relative; z-index:2}
.wrap{max-width:1560px; margin:0 auto; padding:0 clamp(20px,6vw,90px)}
section.blk{padding:clamp(70px,10vh,120px) 0; position:relative}
.eyebrow{display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.46em; text-transform:uppercase; color:var(--copper); margin-bottom:26px}
.eyebrow::after{content:""; height:1px; width:min(120px,22vw); background:var(--line)}
.eyebrow .no{font-family:var(--serif); font-style:italic; letter-spacing:0; font-size:15px; color:var(--gold)}
h1.title, h2.title{font-family:var(--serif); font-weight:460; font-size:clamp(40px,6vw,86px); line-height:1.03; letter-spacing:-.01em; max-width:13em}
h1.title em, h2.title em{font-style:italic; color:var(--gold)}
h2.title.sm{font-size:clamp(32px,4.4vw,58px)}
.lede{margin-top:24px; font-size:clamp(16.5px,1.55vw,19.5px); line-height:1.65; color:var(--ivory-dim); max-width:38em}
.lede strong{color:var(--ivory); font-weight:600}
.kl{display:block; overflow:hidden}
.kl > span{display:block; transform:translateY(112%) rotate(2.5deg); transform-origin:0 100%; transition:transform 1.15s var(--ease)}
.in .kl > span{transform:translateY(0) rotate(0)}
.kl.d1 > span{transition-delay:.08s}.kl.d2 > span{transition-delay:.16s}.kl.d3 > span{transition-delay:.24s}
.rv{opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform 1s var(--ease)}
.rv.in, .in .rv{opacity:1; transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
.ghostword{position:absolute; font-family:var(--serif); font-style:italic; font-weight:300; color:transparent;
  -webkit-text-stroke:1px rgba(201,163,95,.10); pointer-events:none; user-select:none; white-space:nowrap; line-height:1; z-index:0}
.rule-h{height:1px; background:var(--line); border:0; margin:0}

/* page hero */
.phero{padding:clamp(150px,22vh,220px) 0 clamp(60px,9vh,100px); position:relative; overflow:clip}
.phero .folio{position:absolute; right:clamp(20px,4vw,54px); bottom:22px; font-size:10px; letter-spacing:.4em; color:rgba(203,190,163,.5); text-transform:uppercase}
.cta-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:40px}
.pledges{display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:40px; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ivory-dim)}
.pledges span{display:flex; align-items:center; gap:10px}
.pledges i{width:5px; height:5px; border-radius:50%; background:var(--copper); display:block}

/* editorial spread */
.spread{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:center; padding:clamp(56px,9vh,100px) 0; border-top:1px solid var(--line)}
.spread:first-of-type{border-top:0}
.spread.flip .sfig{order:2}
.sfig{position:relative}
.sfig .frame{border-radius:16px; overflow:hidden; border:1px solid rgba(201,163,95,.25); box-shadow:0 40px 80px rgba(0,0,0,.5)}
.sfig img{width:100%; display:block; object-fit:cover}
.sfig figcaption{margin-top:12px; font-size:12px; letter-spacing:.14em; color:var(--ivory-dim); text-transform:uppercase}
.sfig .stamp{position:absolute; right:-10px; bottom:44px; background:var(--copper); color:#17100A; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:10.5px; padding:8px 13px; transform:rotate(-6deg); border-radius:4px; box-shadow:0 14px 30px rgba(0,0,0,.45)}
.scopy .sno{font-family:var(--serif); font-style:italic; color:var(--copper); font-size:17px}
.scopy h3{font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1.08; margin:14px 0 18px}
.scopy h3 em{font-style:italic; color:var(--gold)}
.scopy p{color:var(--ivory-dim); line-height:1.7; font-size:16px; max-width:36em}
.scopy p strong{color:var(--ivory); font-weight:600}
.sprice{display:flex; align-items:baseline; gap:16px; margin-top:26px; flex-wrap:wrap}
.sprice b{font-family:var(--serif); font-size:clamp(30px,3.2vw,42px); color:var(--gold); font-weight:520; line-height:1}
.sprice span{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim)}
.sfix{margin-top:24px; border-left:2px solid var(--gold); padding-left:18px}
.sfix p{font-size:15px}
.sfix .flab{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--copper); margin-bottom:8px}
@media(max-width:900px){ .spread{grid-template-columns:1fr} .spread.flip .sfig{order:0} }

/* lists with gold ticks */
.ticks{list-style:none; margin-top:24px; display:grid; gap:12px}
.ticks li{padding-left:32px; position:relative; color:var(--ivory-dim); font-size:15.5px; line-height:1.55}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700}
.ticks li strong{color:var(--ivory); font-weight:600}

/* cards trio */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px}
.tcard{background:var(--panel); border:1px solid rgba(201,163,95,.12); border-radius:16px; padding:30px 28px; transition:transform .5s var(--ease), border-color .4s}
.tcard:hover{transform:translateY(-6px); border-color:rgba(201,163,95,.4)}
.tcard .tno{font-family:var(--serif); font-style:italic; color:var(--copper); font-size:16px}
.tcard h3{font-family:var(--serif); font-weight:520; font-size:23px; margin:13px 0 11px}
.tcard p{color:var(--ivory-dim); line-height:1.65; font-size:15px}
@media(max-width:900px){ .trio{grid-template-columns:1fr} }

/* gallery / trabajos */
.feat{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,5vw,70px); align-items:start}
.feat .fframe{border-radius:16px; overflow:hidden; border:1px solid rgba(201,163,95,.3); box-shadow:0 40px 80px rgba(0,0,0,.5)}
.feat .fframe img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover}
.tag{display:inline-block; font-style:normal; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--copper); border:1px solid rgba(198,139,94,.5); padding:5px 10px; border-radius:100px}
.tag.cli{color:#17100A; background:var(--gold); border-color:var(--gold); font-weight:700}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:32px}
.stat{background:rgba(16,12,8,.85); padding:20px}
.stat b{font-family:var(--serif); font-size:clamp(28px,3vw,40px); font-weight:520; color:var(--gold); display:block; line-height:1}
.stat span{display:block; margin-top:8px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory-dim)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; margin-top:44px}
.gcard{background:rgba(16,12,8,.85); border:1px solid rgba(201,163,95,.14); border-radius:16px; overflow:hidden; transition:transform .5s var(--ease), border-color .4s}
.gcard:hover{transform:translateY(-6px); border-color:rgba(201,163,95,.4)}
.gcard img{width:100%; aspect-ratio:3/3.1; object-fit:cover; display:block}
.gcard figcaption{padding:16px 18px 18px; position:relative}
.gcard figcaption b{font-family:var(--serif); font-weight:520; font-size:19px; display:block}
.gcard figcaption span{color:var(--ivory-dim); font-size:13px; display:block; margin-top:3px}
.gcard figcaption .tag{position:absolute; top:16px; right:16px}
@media(max-width:900px){ .feat{grid-template-columns:1fr} }

/* price table */
.ptable{margin-top:48px; border-top:1px solid var(--line)}
.prow{display:grid; grid-template-columns:64px 1fr auto auto; gap:clamp(14px,3vw,40px); align-items:center; padding:28px 10px; border-bottom:1px solid var(--line); transition:background .35s}
.prow:hover{background:rgba(201,163,95,.04)}
.prow .pno{font-family:var(--serif); font-style:italic; color:var(--copper); font-size:17px}
.prow h3{font-family:var(--serif); font-weight:520; font-size:clamp(21px,2.4vw,28px)}
.prow .pmain p{color:var(--ivory-dim); font-size:14.5px; line-height:1.55; margin-top:5px; max-width:36em}
.pprice{font-family:var(--serif); font-size:clamp(26px,3vw,38px); color:var(--gold); text-align:right; line-height:1; white-space:nowrap; font-weight:520}
.pprice span{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim); margin-top:7px}
.plink{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); text-decoration:none; border:1px solid rgba(242,233,216,.3); padding:12px 18px; border-radius:100px; white-space:nowrap; transition:.35s var(--ease)}
.plink:hover{border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px)}
@media(max-width:820px){ .prow{grid-template-columns:1fr auto} .prow .pno{display:none} .plink{grid-column:1/-1; justify-self:start} }

/* steps (contacto / proceso editorial) */
.steps{list-style:none; margin-top:44px; display:grid; gap:0; border-top:1px solid var(--line)}
.steps li{display:grid; grid-template-columns:110px 1fr; gap:clamp(16px,3vw,40px); padding:30px 6px; border-bottom:1px solid var(--line)}
.steps .sno2{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:clamp(24px,3vw,36px); line-height:1}
.steps h3{font-family:var(--serif); font-weight:520; font-size:clamp(20px,2.4vw,27px); margin-bottom:8px}
.steps p{color:var(--ivory-dim); line-height:1.65; font-size:15.5px; max-width:42em}
.steps .when{margin-top:8px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--copper)}
@media(max-width:640px){ .steps li{grid-template-columns:64px 1fr} }

/* legal prose */
.legal{max-width:46em}
.legal h3{font-family:var(--serif); font-weight:520; font-size:22px; margin:34px 0 10px}
.legal p, .legal li{color:var(--ivory-dim); line-height:1.75; font-size:15.5px}
.legal ul{margin:10px 0 10px 20px}
.legal a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--line)}

/* faq */
.faq-list{margin-top:40px; border-top:1px solid var(--line); max-width:860px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(19px,2.2vw,25px); font-weight:500; padding:24px 40px 24px 4px; position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--gold); font-family:var(--sans); font-weight:300; font-size:26px; transition:transform .4s var(--ease)}
.faq-list details[open ] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{color:var(--ivory-dim); line-height:1.7; font-size:15.5px; padding:0 4px 26px; max-width:44em}

/* closing band */
.close-band{text-align:center; padding:clamp(90px,14vh,150px) 0}
.close-band .mega{font-family:var(--serif); font-weight:460; font-size:clamp(50px,9vw,120px); line-height:.98; letter-spacing:-.015em}
.close-band .mega em{font-style:italic; color:var(--gold)}
.close-band .lede{margin-left:auto; margin-right:auto; text-align:center}
.close-band .cta-row{justify-content:center}
.close-band .mail{margin-top:36px; font-family:var(--serif); font-size:clamp(19px,2.4vw,26px)}
.close-band .mail a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--line)}

/* ============ FOOTER ============ */
footer{position:relative; z-index:2; border-top:1px solid var(--line); background:rgba(10,7,5,.8);
  padding:64px clamp(20px,6vw,90px) 120px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; max-width:1560px; margin:0 auto}
.f-logo{font-family:var(--serif); font-size:24px; letter-spacing:.12em}
.f-logo span{color:var(--copper); font-size:13px; letter-spacing:.4em; display:block; margin-top:4px}
.f-brand p{color:var(--ivory-dim); font-size:14px; line-height:1.6; margin-top:14px; max-width:26em}
.f-col h4{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--copper); margin-bottom:18px; font-weight:600}
.f-col a{display:block; color:var(--ivory-dim); text-decoration:none; font-size:14.5px; margin-bottom:11px; transition:color .3s}
.f-col a:hover{color:var(--gold-bright)}
.f-col p{color:var(--ivory-dim); font-size:14.5px; margin-bottom:11px}
.f-base{grid-column:1/-1; border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--ivory-dim); font-size:12.5px}
.f-base a{color:var(--ivory-dim); text-decoration:none}
.f-base a:hover{color:var(--gold-bright)}
.f-motto{font-family:var(--serif); font-style:italic; color:var(--gold)}
@media(max-width:900px){ footer{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ footer{grid-template-columns:1fr} }

/* ============ MOBILE CTA BAR ============ */
#ctabar{position:fixed; left:12px; right:12px; bottom:12px; z-index:95; display:none; align-items:center; justify-content:space-between; gap:14px;
  background:rgba(16,12,8,.92); border:1px solid rgba(201,163,95,.35); border-radius:16px; padding:13px 16px; backdrop-filter:blur(8px)}
#ctabar .ct-txt b{font-family:var(--serif); font-size:16.5px; display:block; font-weight:520}
#ctabar .ct-txt span{font-size:11.5px; color:var(--ivory-dim)}
#ctabar .btn{padding:13px 20px; flex:0 0 auto}
@media(max-width:760px){ #ctabar{display:flex} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .kl>span{transform:none; transition:none}
  .rv{opacity:1; transform:none; transition:none}
  #grain{animation:none}
}

/* =====================================================================
   V3 · CAPA DE DETALLE — focos, scrollbar, máscaras de revelado,
   cortina entre páginas, colofón. El lujo está en lo que casi no se ve.
   ===================================================================== */
:focus-visible{outline:1.5px solid var(--gold); outline-offset:3px; border-radius:2px}
html{scrollbar-color:#4A3A20 #0D0A07}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0D0A07}
::-webkit-scrollbar-thumb{background:#3A2C17; border-radius:6px; border:2px solid #0D0A07}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
h1,h2,h3,.mega,.f-logo,.stat b,.sprice b{font-optical-sizing:auto}
body{hanging-punctuation:first allow-end last}
h1.title,h2.title,.mega{text-wrap:balance}

/* subrayado coreografiado en enlaces de texto */
.legal a, .close-band .mail a, .f-base a, #contacto-links a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .55s var(--ease)}
.legal a:hover, .close-band .mail a:hover, .f-base a:hover{background-size:100% 1px}

/* máscaras de revelado para las imágenes editoriales */
.sfig .frame, .feat .fframe{clip-path:inset(14% 7% 14% 7% round 16px); transition:clip-path 1.25s var(--ease)}
.sfig.in .frame, .feat .in .fframe, .in .fframe{clip-path:inset(0 0 0 0 round 16px)}
.sfig .frame img, .feat .fframe img{transform:scale(1.07); transition:transform 1.6s var(--ease)}
.sfig.in .frame img, .in .fframe img{transform:scale(1)}
.gcard{clip-path:inset(10% 5% 10% 5% round 16px); transition:clip-path 1.1s var(--ease), transform .5s var(--ease), border-color .4s}
.gcard.in{clip-path:inset(0 0 0 0 round 16px)}

/* cortina entre páginas (la crea site.js; sin JS no existe) */
#wipe{position:fixed; inset:0; z-index:300; pointer-events:none; display:flex; align-items:center; justify-content:center}
#wipe .wp{position:absolute; top:0; bottom:0; width:50.5%; background:#080604; transition:transform .8s cubic-bezier(.76,0,.24,1)}
#wipe .wp.l{left:0; border-right:1px solid var(--line)}
#wipe .wp.r{right:0}
#wipe .wm{position:relative; z-index:2; font-family:var(--serif); font-size:52px; color:var(--ivory); transition:opacity .35s ease}
#wipe .wm em{color:var(--gold); font-style:italic}
#wipe.open .wp.l{transform:translateX(-101%)}
#wipe.open .wp.r{transform:translateX(101%)}
#wipe.open .wm{opacity:0}
#wipe:not(.open):not(.leave){pointer-events:auto}
#wipe.leave .wp{transform:translateX(0)!important; transition:transform .6s cubic-bezier(.76,0,.24,1)}
#wipe.leave .wm{opacity:1; transition-delay:.25s}

/* colofón */
.f-colo{flex-basis:100%; font-size:11px; letter-spacing:.14em; color:rgba(203,190,163,.55); text-transform:uppercase}

@media (prefers-reduced-motion: reduce){
  .sfig .frame, .feat .fframe, .gcard{clip-path:none; transition:none}
  .sfig .frame img, .feat .fframe img{transform:none; transition:none}
  #wipe{display:none}
}