/* =========================================================================
   CHARGED · The Dominus Atelier — digital invitation
   Vanilla CSS. Animate transform/opacity only. Mobile-first.
   ========================================================================= */

/* ---------- Fonts (woff2, font-display: swap) ---------- */
@font-face{font-family:'Cinzel Deco';src:url('../assets/fonts/CinzelDecorative-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cinzel Deco';src:url('../assets/fonts/CinzelDecorative-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cinzel Deco';src:url('../assets/fonts/CinzelDecorative-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Eras';src:url('../assets/fonts/eras-itc-light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Eras';src:url('../assets/fonts/eras-itc-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#0a0a0b;
  --panel:#141317;
  --panel-2:#1b1920;
  /* monochrome accent (pink removed) — kept the --pink name to avoid touching every ref */
  --pink:#e9e6ec;
  --pink-2:#ffffff;
  --line:rgba(255,255,255,.30);
  --line-soft:rgba(255,255,255,.12);
  --text:#f4f2f4;
  --muted:#9b9aa0;
  --serif:'Cinzel Deco',Georgia,serif;
  --eras:'Eras','Poppins',sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-flap:cubic-bezier(.34,1.06,.5,1);   /* smooth open, slight settle (no stall at start) */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.accent{color:var(--pink)}

/* fondo2 gradient behind the whole page — NO blur, slow subtle drift for motion.
   inset + scale keeps the edges off-screen as it drifts. Darkened so the card
   (same gradient family) still reads as a lit object on top. */
body::before{
  content:"";position:fixed;inset:-10%;z-index:-2;
  background:#050506 url('../assets/img/page-bg2.webp') center/cover no-repeat;
  background-position:calc(50% + var(--bgx,0px)) calc(50% + var(--bgy,0px)); /* mouse parallax */
  filter:brightness(.4);
  transform:scale(1.1);
  animation:silkdrift 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes silkdrift{
  0%  {transform:scale(1.1) translate3d(0,0,0)}
  100%{transform:scale(1.16) translate3d(-2%,-1.6%,0) rotate(.4deg)}
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(130% 100% at 50% 40%,transparent 28%,rgba(0,0,0,.72) 100%);
}

/* =========================================================================
   PRELOADER
   ========================================================================= */
.preloader{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--ink);
  transition:opacity .6s ease,visibility .6s ease;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__mark{
  width:66px;height:66px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:linear-gradient(150deg,var(--panel-2),var(--ink));
}
.preloader__d{font-family:var(--serif);font-weight:700;font-size:32px;color:var(--pink)}
.preloader__bar{width:120px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px}
.preloader__bar span{display:block;height:100%;width:40%;background:var(--pink);
  animation:load 1.1s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* =========================================================================
   HERO · ENVELOPE
   ========================================================================= */
/* Start gate: fixed full-screen overlay shown on every load; fades away on open.
   Out of flow → the page content starts at the very top (no empty hero space). */
.hero{
  position:fixed;inset:0;z-index:900;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:34px;padding:24px;
  transition:opacity .6s ease,visibility .6s ease;
}
.hero.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.stage{
  perspective:1100px;
  display:flex;flex-direction:column;align-items:center;gap:30px;
}

/* Envelope button — resets + sizing.
   perspective on .stage gives the envelope's own tilt depth; perspective on
   .sobre gives the flap rotation depth (v1 had none → the open looked flat). */
.stage{perspective:1400px}
.sobre{
  appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;
  position:relative;
  width:min(84vw,400px);
  aspect-ratio:1080 / 864;
  perspective:1100px;
  /* no preserve-3d: Safari would switch to 3D paint order and could draw the
     opened flap over the rising card regardless of z-index.
     no drop-shadow under the envelope: it read as a smudge on the dark bg */
  animation:float 4s ease-in-out infinite;
}
.sobre:focus-visible{outline:2px solid var(--pink-2);outline-offset:14px;border-radius:8px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Real envelope art (Sobre-1/2/3), layered on one 1080×864 canvas → overlay at inset:0 */
.sobre > span{position:absolute;inset:0;
  background-position:center;background-size:contain;background-repeat:no-repeat}
.sobre-cuerpo{background-image:url('../assets/img/sobre-cuerpo.webp');z-index:1}  /* back + liner */
.sobre-front {background-image:url('../assets/img/sobre-front.webp'); z-index:3}  /* front pocket */
.sobre-solapa{background-image:url('../assets/img/sobre-solapa.webp');z-index:4;  /* flap */
  transform-origin:top center;
  /* no drop-shadow: it pooled ugly under the flap tip, and on the open flap
     it paints a dark line at the hinge — depth comes baked into the art */
}
/* invitation card inside the envelope — the front art is fully opaque (the
   "interior" is painted INTO it), so a card behind it can never be seen in the
   mouth. Instead the card sits ABOVE the front, inside a clip container whose
   bottom follows the pocket's V edge measured from the art:
   (0,12%) → (50%,56.25%) → (100%,12%) of the canvas. The card only exists
   above that line → it visibly emerges through the envelope mouth. */
.sobre > .sobre-boca{
  inset:auto;left:0;right:0;top:-50%;bottom:0;   /* extends above for the risen card */
  background:none;z-index:4;pointer-events:none;
  /* canvasY → containerY: (y% + 50)/1.5 */
  clip-path:polygon(0 0,100% 0,100% 41.33%,50% 70.83%,0 41.33%);
}
/* interior darkening, shown only once the envelope opens — baking it into the
   front art leaked as a dark triangle beside the closed flap. The clip's V
   bottom keeps this exactly inside the mouth. */
.sobre-boca::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:66.7%; /* canvas area only */
  background:rgba(0,0,0,.27);opacity:0;
}
.js .sobre.is-open .sobre-boca::before{opacity:1;transition:opacity .5s ease .4s}
.sobre-boca .sobre-carta{
  position:absolute;left:14%;right:14%;top:100%;height:60%;
  /* mini preview of the real invitation (ZX-1) — top-aligned so the rise
     shows "Join Us / THE WORK" coming out of the envelope */
  background:#141417 url('../assets/img/carta-preview.webp') top/100% auto no-repeat;
  border-radius:12px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 -12px 34px rgba(0,0,0,.55);
}

/* premium surface — slow diagonal sheen sweep, masked to the envelope silhouette so
   light only plays across the paper, never the page behind it */
.sobre-sheen{
  z-index:6;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:url('../assets/img/sobre-cuerpo.webp') center/contain no-repeat;
          mask:url('../assets/img/sobre-cuerpo.webp') center/contain no-repeat;
  transition:opacity .3s ease;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.05) 46%,
             rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 54%,transparent 66%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:sheen 7.5s ease-in-out infinite;
}
@keyframes sheen{
  0%{background-position:165% 0}
  55%,100%{background-position:-65% 0}
}
.js .sobre.is-open .sobre-sheen{opacity:0}

/* "tap to open" hint */
.hint{
  margin:0;font-family:var(--eras);font-weight:300;letter-spacing:.32em;
  text-transform:uppercase;font-size:.72rem;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.hint__pulse{width:8px;height:8px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 0 0 var(--pink);animation:pulse 2s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ---------- OPEN SEQUENCE (only when JS active) ---------- */
/* flap rotates back in real perspective; z-index drops mid-way via keyframe
   (discrete jump) so it tucks behind the body once it passes vertical.
   Lighting rides along: the flap brightens as it catches light, then dims as
   its back turns to us. The envelope itself recoils slightly, and the card
   inside rises out of the pocket before the hero hands off to the page. */
/* timeline: flap opens (0.1–1.1s) and stays open behind everything as the
   backdrop → card rises out IN FRONT of it (0.78–1.53s) → JS hands off at 1.55s */
.js .sobre.is-open{animation:sobre-react 1.1s var(--ease-out) .1s}  /* replaces idle float */
.js .sobre.is-open .sobre-solapa{
  animation:flap 1s var(--ease-flap) .1s forwards;
  will-change:transform,filter;
}
/* NO z-index inside the keyframes — iOS Safari ignores z-index changes in
   @keyframes, which left the flap painted over the rising card. JS adds
   .is-tucked as the flap passes vertical; a class-driven z-index change
   works everywhere. */
.js .sobre.is-tucked .sobre-solapa{z-index:0}
/* the final translateY(1.5px) overlaps the hinge: without it, subpixel
   rasterization on mobile leaves a black hairline between the opened flap
   and the envelope body (both keyframes share the same function list so the
   interpolation stays a clean rotation, not a matrix blend) */
@keyframes flap{
  0%  {transform:translateY(0) rotateX(0);filter:brightness(1)}
  32% {filter:brightness(1.22)}
  50% {filter:brightness(.92)}
  100%{transform:translateY(1.5px) rotateX(-172deg);filter:brightness(.72)}
}
/* envelope recoil — a small nod + settle as the flap swings (needs .stage perspective) */
@keyframes sobre-react{
  0%  {transform:none}
  28% {transform:rotateX(5deg) scale(1.012)}
  62% {transform:rotateX(-1.6deg)}
  100%{transform:none}
}
/* card rises out through the mouth clip, over the opened flap backdrop */
.js .sobre.is-open .sobre-carta{
  animation:carta .8s var(--ease-out) .82s forwards;
  will-change:transform;
}
@keyframes carta{
  from{transform:translateY(0)}
  to  {transform:translateY(-129%)}
}
/* fade the whole envelope out once the real card takes over */
.js .sobre.is-fading{
  transition:opacity .6s ease,transform .6s var(--ease-out);
  opacity:0;transform:scale(.9) translateY(-10px);pointer-events:none;
}
.js .hint.is-hidden{opacity:0;transition:opacity .3s ease;pointer-events:none}

/* =========================================================================
   INVITATION CARD
   ========================================================================= */
.tarjeta-wrap{
  min-height:100svh;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 20px;
}
.tarjeta{
  /* 1:1 with the reference art (ZX-1.png, 1350×2400): every size below is the
     reference pixel value × --u, so the card is an exact proportional replica
     at any width — resize --card-w and everything scales with it. */
  --card-w:min(92vw,430px);
  --u:calc(var(--card-w) / 1350);
  width:var(--card-w);
  padding:calc(var(--u)*98) 0 calc(var(--u)*266);
  border-radius:14px;
  /* exact ZX-1 background composite (fill + texture), same 1350×2400 ratio → no crop */
  background:#141417 url('../assets/img/card-bg.webp') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 34px 82px rgba(0,0,0,.72);
  text-align:center;
}
/* desktop: the 430px mobile card reads tiny on a large screen — scale the whole
   invitation up (78vh cap keeps it sane on short windows; --u scales the rest) */
@media (min-width:1024px){
  .tarjeta{--card-w:min(620px,78vh)}
}
/* pre-open hidden state only when JS drives the sequence */
.js .tarjeta{opacity:0;transform:translateY(36px) scale(.97);will-change:transform,opacity}
.js .tarjeta.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
/* desktop pointer tilt (added after reveal completes) */
.js .tarjeta.tilt{
  transition:transform .3s ease;
  transform:perspective(1100px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.c-eyebrow{font-family:var(--eras);font-weight:300;line-height:1;
  font-size:calc(var(--u)*42);color:#fff;margin:0}
/* title + subtitle are the exact wordmark layers from the design file */
.c-title{margin:calc(var(--u)*264) 0 0;line-height:0}
.c-title__img{width:calc(var(--u)*810);height:auto;display:block;margin:0 auto}
.c-subtitle{margin:calc(var(--u)*43) 0 0;line-height:0}
.c-subtitle__img{width:calc(var(--u)*693);height:auto;display:block;margin:0 auto}

.c-lead{font-family:var(--eras);font-weight:300;
  font-size:calc(var(--u)*34.5);line-height:calc(var(--u)*38.7);
  color:#eceaee;width:calc(var(--u)*830);margin:calc(var(--u)*114) auto 0;
  text-align:justify;text-align-last:center}
.c-lead .accent{font-weight:700;color:#fff}

.c-info{list-style:none;width:calc(var(--u)*1096);margin:calc(var(--u)*52) auto 0;
  padding:0;display:grid;grid-template-columns:348fr 356fr 392fr;gap:0}
.c-info li{display:flex;flex-direction:column;align-items:center;
  font-family:var(--eras);font-weight:300;
  font-size:calc(var(--u)*30);line-height:calc(var(--u)*40);color:#fff;
  position:relative;padding:0;min-height:calc(var(--u)*257)}
.c-info li + li::before{content:"";position:absolute;left:0;top:0;
  height:calc(var(--u)*254);width:max(1px,calc(var(--u)*3));background:rgba(255,255,255,.9)}
.c-info__ic{height:calc(var(--u)*92);width:auto;object-fit:contain;
  margin:calc(var(--u)*11) 0 calc(var(--u)*43)}

.c-note{font-family:var(--eras);font-weight:300;font-size:calc(var(--u)*30);
  color:#c9c8cd;margin:calc(var(--u)*34) 0 0}
.c-intimate{font-family:var(--eras);font-weight:300;color:#fff;
  font-size:calc(var(--u)*44);line-height:calc(var(--u)*59.5);
  width:calc(var(--u)*620);margin:calc(var(--u)*123) auto 0}

.c-rsvp-line{display:flex;align-items:center;gap:0;
  width:calc(var(--u)*889);margin:calc(var(--u)*63) auto 0}
.c-rule{height:max(1px,calc(var(--u)*3));flex:1;background:rgba(255,255,255,.9)}
.c-rsvp-btn{font-family:var(--eras);font-weight:300;text-decoration:none;
  font-size:calc(var(--u)*37);color:#fff;white-space:nowrap;
  width:calc(var(--u)*352);height:calc(var(--u)*76);
  display:inline-flex;align-items:center;justify-content:center;
  border:max(1px,calc(var(--u)*3)) solid #fff;border-radius:calc(var(--u)*18);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
  /* pulsing glow — the click cue on touch screens where there is no hover */
  animation:rsvp-glow 2.6s ease-in-out infinite}
.c-rsvp-btn:hover{background:rgba(255,255,255,.14);transform:scale(1.06);
  box-shadow:0 0 22px rgba(255,255,255,.4),0 0 52px rgba(255,255,255,.14);
  animation:none}
@keyframes rsvp-glow{
  0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}
  50%    {box-shadow:0 0 16px rgba(255,255,255,.32),0 0 42px rgba(255,255,255,.12)}
}

.c-warmly{font-family:var(--eras);font-weight:300;line-height:1;
  font-size:calc(var(--u)*40);margin:calc(var(--u)*96) 0 0;color:#fff}
.c-sign{margin:calc(var(--u)*142) 0 0;line-height:0}
/* single-line wordmark (THE DOMINUS ATELIER TEAM) — wide + thin */
.c-logo{width:calc(var(--u)*963);height:auto;margin:0 auto;display:block}

/* staggered reveal of card contents after open */
.js .tarjeta.is-in .reveal{animation:rise .7s var(--ease-out) both}
.js .tarjeta.is-in .reveal:nth-child(1){animation-delay:.05s}
.js .tarjeta.is-in .reveal:nth-child(2){animation-delay:.18s}
.js .tarjeta.is-in .reveal:nth-child(3){animation-delay:.30s}
.js .tarjeta.is-in .reveal:nth-child(4){animation-delay:.42s}
.js .tarjeta.is-in .reveal:nth-child(5){animation-delay:.54s}
.js .tarjeta.is-in .reveal:nth-child(6){animation-delay:.64s}
.js .tarjeta.is-in .reveal:nth-child(7){animation-delay:.74s}
.js .tarjeta.is-in .reveal:nth-child(8){animation-delay:.84s}
.js .tarjeta.is-in .reveal:nth-child(9){animation-delay:.94s}
.js .tarjeta.is-in .reveal:nth-child(10){animation-delay:1.04s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* =========================================================================
   SHARED SECTION BITS
   ========================================================================= */
.section-title{font-family:var(--serif);font-weight:400;text-align:center;
  font-size:clamp(1.6rem,6vw,2.4rem);margin:0 0 8px;letter-spacing:.02em}

.details,.rsvp{max-width:640px;margin:0 auto;padding:72px 22px}
.details{text-align:center}

/* Countdown */
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin:30px 0 0}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:64px;
  background:rgba(20,19,23,.7);border:1px solid var(--line-soft);border-radius:12px;
  padding:14px 6px}
.cd-num{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,7vw,2.3rem);
  line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.cd-lbl{font-family:var(--eras);font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:.62rem;color:var(--muted);margin-top:8px}
.cd-sep{font-family:var(--serif);font-size:1.6rem;color:var(--pink);padding-top:14px}
.cd-live{font-family:var(--serif);font-size:1.3rem;color:var(--pink);margin:26px 0 0}

.details__meta{margin:34px 0 0;color:#d9d4d9}
.details__when{font-weight:500;margin:0 0 6px}
.details__where{font-size:.9rem;color:var(--muted);margin:0}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:34px 0 0}
.btn{font-family:var(--body);font-weight:400;font-size:.92rem;letter-spacing:.03em;
  padding:13px 24px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--text);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--pink-2);outline-offset:3px}
.btn--solid{background:var(--pink);border-color:var(--pink);color:#0a0a0b;font-weight:600;
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.btn--solid:hover{background:var(--pink-2);box-shadow:0 14px 32px rgba(0,0,0,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.10)}
.btn--block{width:100%}
.btn--sm{padding:10px 18px;font-size:.84rem}

/* RSVP form */
.rsvp{text-align:center}
.rsvp__sub{color:var(--muted);margin:0 0 30px}
.rsvp__form{text-align:left;display:flex;flex-direction:column;gap:20px;
  background:rgba(20,19,23,.72);border:1px solid var(--line-soft);
  border-radius:16px;padding:clamp(22px,5vw,34px)}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field legend{font-family:var(--eras);font-weight:300;
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--muted)}
.field input,.field textarea{
  font-family:var(--body);font-weight:300;font-size:.98rem;color:var(--text);
  background:rgba(0,0,0,.35);border:1px solid var(--line-soft);border-radius:10px;
  padding:13px 15px;width:100%;transition:border-color .2s ease}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--pink)}
.field textarea{resize:vertical}
.field--radio{border:0;padding:0;margin:0}
.field--radio legend{padding:0;margin-bottom:10px}
.radio{display:flex;align-items:center;gap:10px;font-family:var(--body);
  font-weight:300;font-size:.95rem;color:var(--text);text-transform:none;
  letter-spacing:0;margin-bottom:8px;cursor:pointer}
.radio input{width:auto;accent-color:var(--pink)}
.rsvp__status{margin:4px 0 0;font-size:.9rem;min-height:1.2em}
.rsvp__status.ok{color:#4ade80}
.rsvp__status.err{color:#f87171}

/* Footer */
.footer{text-align:center;padding:60px 22px 80px;border-top:1px solid var(--line-soft);
  margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:18px}
.footer__logo{width:min(84%,320px);height:auto;margin:0 auto}
.footer__copy{font-size:.78rem;color:var(--muted);margin:0}

/* =========================================================================
   SCROLL MOTION — reveal-on-scroll + parallax (JS-driven)
   ========================================================================= */
/* visible by default (no-JS safe); only hidden once JS takes over */
.reveal-up{opacity:1;transform:none}
.js .reveal-up{opacity:0;transform:translateY(32px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .reveal-up.in{opacity:1;transform:none}

/* parallax: JS writes translate3d Y (blocks) or background-position Y (silk) */
[data-parallax]:not([data-parallax-bg]){will-change:transform}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (min-width:560px){
  .sobre{width:380px}
  .cd-unit{min-width:76px}
}

/* =========================================================================
   REDUCED MOTION — skip the whole sequence, show everything static
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .tarjeta{opacity:1;transform:none}
  .js .tarjeta.is-in .reveal{animation:none}
  .js .reveal-up{opacity:1;transform:none}
  .sobre{animation:none}
}