/* ============================================================
   TALENTO BEACH CAPITAL — Península
   Ensayo fotográfico enmarcado: un paspartú fijo, y dentro
   una sola columna de imagen a sangre. El texto es puntuación.
   ============================================================ */

@font-face{font-family:"Beachwalk";src:url("../fonts/Beachwalk.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Beachwalk";src:url("../fonts/Beachwalk Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Sailor";src:url("../fonts/Sailor.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Coasty";src:url("../fonts/Coasty Branch.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --frame:#171E31;
  --frame-deep:#0D1220;

  --sand:#E5C29C;
  --sand-bright:#F3DFC7;
  --sand-deep:#B98F63;

  --ink:#FBF7F2;
  --ink-dim:rgba(251,247,242,.76);
  --ink-faint:rgba(251,247,242,.55);
  --hair:rgba(229,194,156,.22);

  --display:"Beachwalk",'Playfair Display',Didot,'Bodoni MT',serif;
  --script:"Coasty",'Snell Roundhand',cursive;
  --body:"Jost",'Futura','Century Gothic',system-ui,sans-serif;
  /* Sailor sólo para el logotipo: su cmap está dañado y deja en blanco
     todos los acentos (Í→"cedilla" vacío). El logotipo no lleva ninguno. */
  --logo:"Sailor",'Optima','Gill Sans',sans-serif;
  --label:"Jost",'Futura','Century Gothic',system-ui,sans-serif;

  --rail:0px;                        /* el paspartú: sólo en escritorio */
  --pad:clamp(1.5rem,5vw,4.5rem);
}
@media(min-width:900px){:root{--rail:clamp(46px,5vw,92px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--frame)}

body{
  margin:0;
  padding-inline:var(--rail);
  background:var(--frame);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1.06rem,1rem + .32vw,1.2rem);
  line-height:1.66;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
::selection{background:var(--sand);color:var(--frame)}
:focus-visible{outline:2px solid var(--sand);outline-offset:4px}

/* ---------- tipografía ---------- */

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.03;text-wrap:balance}
.t-xl{font-size:clamp(2.5rem,1.1rem + 6.2vw,6.4rem)}
.t-lg{font-size:clamp(2.1rem,1.2rem + 4vw,4.2rem)}
.t-md{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem)}

sup{font-size:.48em;vertical-align:.72em;line-height:0}

p{margin:0 0 1rem;color:var(--ink-dim);max-width:56ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.18rem,1.06rem + .6vw,1.55rem);color:var(--ink);font-weight:300;line-height:1.5}

.kicker{
  font-family:var(--label);font-weight:400;
  font-size:clamp(.76rem,.72rem + .2vw,.86rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--sand);margin:0 0 1.7rem;
}

.script{font-family:var(--script);color:var(--sand);line-height:1.3;
  font-size:clamp(1.7rem,1.1rem + 3vw,3.8rem)}

/* ============================================================
   MARCO FIJO
   ============================================================ */

.chrome{position:fixed;inset:0;z-index:60;pointer-events:none}
.chrome > *{pointer-events:auto}

.mark{
  position:absolute;top:clamp(1rem,2.2vw,1.8rem);left:clamp(1rem,2.2vw,1.8rem);
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
}
.mark img{width:clamp(22px,2.2vw,28px);height:auto}
.mark .n{font-family:var(--logo);text-transform:uppercase;letter-spacing:.3em;
  font-size:.88rem;line-height:1;color:var(--ink)}
.mark .n small{display:block;font-size:.56rem;letter-spacing:.32em;color:var(--sand);margin-top:.3rem}

.chrome .wa{
  position:absolute;top:clamp(1rem,2.2vw,1.8rem);right:clamp(1rem,2.2vw,1.8rem);
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--label);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--frame);background:var(--sand);
  padding:.85em 1.5em;border-radius:1px;
  transition:background .3s ease,transform .3s ease;
}
.chrome .wa:hover{background:var(--sand-bright);transform:translateY(-1px)}
.chrome .wa svg{width:1.05em;height:1.05em}
@media(max-width:899px){.chrome .wa{display:none}}

.rail-scroll{
  position:absolute;left:0;bottom:clamp(1.5rem,4vw,2.6rem);width:var(--rail);
  display:none;flex-direction:column;align-items:center;gap:.9rem;
  font-family:var(--label);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-faint);
}
.rail-scroll span{writing-mode:vertical-rl}
.rail-scroll::after{content:"";width:1px;height:48px;
  background:linear-gradient(var(--sand),transparent);
  animation:cue 2.6s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@media(min-width:900px){.rail-scroll{display:flex}}

.fab{
  position:fixed;right:1rem;bottom:1rem;z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--sand);color:var(--frame);
  font-family:var(--label);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:1rem 1.35rem;border-radius:1px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.fab svg{width:1.1rem;height:1.1rem}
@media(min-width:900px){.fab{display:none}}

/* ============================================================
   HERO · el video, directo. Sin preámbulo.
   ============================================================ */

.hero{
  position:relative;
  min-height:min(88svh,920px);
  display:grid;align-items:end;
  padding:clamp(7rem,15vh,10rem) 0 clamp(3rem,7vw,5rem);
  overflow:hidden;isolation:isolate;background:var(--frame-deep);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero__media video.on{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    var(--frame) 1%, rgba(23,30,49,.9) 22%, rgba(23,30,49,.32) 56%, rgba(23,30,49,.52) 100%);
}

.hero__in{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}

.hero__lockup{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  margin-bottom:clamp(1.5rem,3vw,2.3rem)}
.hero__lockup img{width:clamp(40px,4.6vw,58px);height:auto;margin-bottom:.55rem}
.hero__lockup .n{font-family:var(--logo);text-transform:uppercase;color:var(--ink);
  font-size:clamp(1.15rem,.9rem + 1.1vw,1.65rem);letter-spacing:.44em;text-indent:.44em;line-height:1}
.hero__lockup .s{font-family:var(--logo);text-transform:uppercase;color:var(--sand);
  font-size:clamp(.56rem,.52rem + .18vw,.68rem);letter-spacing:.42em;text-indent:.42em}
.hero__lockup .sl{font-family:var(--script);color:var(--sand);
  font-size:clamp(1.15rem,.9rem + 1.1vw,1.75rem);margin-top:.25rem}

.hero h1{margin-bottom:1.3rem;max-width:17ch}
.hero .place{
  max-width:none;margin:0 0 clamp(1.8rem,4vw,2.4rem);
  font-family:var(--label);font-size:clamp(.74rem,.7rem + .2vw,.84rem);
  letter-spacing:.24em;text-transform:uppercase;color:var(--sand);
}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:.9rem}
.hero .cta-row .btn{flex:1 1 auto;min-width:0}

@media(max-width:560px){
  /* con tracking amplio la ubicación no cabe en una línea de teléfono */
  .hero .place{letter-spacing:.16em;font-size:.72rem;line-height:1.7}
  .hero__lockup img{width:44px}
}

/* ============================================================
   GALERÍA CON ZOOM
   Siete imágenes en un lienzo fijo; al bajar, todas crecen a
   distinta velocidad hasta que la central llena la pantalla.
   ============================================================ */

.zoom{position:relative;height:300svh;background:var(--frame-deep)}
.zoom__stage{position:sticky;top:0;height:100svh;overflow:hidden}

.zoom__layer{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  transform:scale(calc(1 + (var(--s,4) - 1) * var(--p,0)));
  /* Sin will-change a propósito. Al promover la capa a la GPU, Chrome la
     rasteriza UNA vez y después sólo estira esa textura mientras cambia
     la escala: por eso se veía pixeleada en movimiento y nítida al soltar.
     Sin la promoción, repinta a resolución correcta en cada cuadro. */
}
.zoom__box{position:relative;height:25svh;width:25vw;overflow:hidden}
.zoom__box img{width:100%;height:100%;object-fit:cover}

/* La capa central termina llenando la pantalla, y es la única que el
   visitante mira de cerca. Si la caja midiera 25vw y creciera ×4, el
   navegador rasterizaría a 25vw y el compositor estiraría ese mapa de
   bits: pixeleado. Midiendo ya su tamaño final y animando de 0.25 a 1,
   el cuadro final se dibuja a resolución nativa. */
.zoom__layer:first-child{transform:scale(calc((1 + 3 * var(--p,0)) / 4))}
.zoom__layer:first-child .zoom__box{width:100vw;height:100svh}

/* posiciones de los siete, medidas desde el centro */
.zoom__layer:nth-child(2) .zoom__box{top:-30svh;left:5vw;height:30svh;width:35vw}
.zoom__layer:nth-child(3) .zoom__box{top:-10svh;left:-25vw;height:45svh;width:20vw}
.zoom__layer:nth-child(4) .zoom__box{left:27.5vw;height:25svh;width:25vw}
.zoom__layer:nth-child(5) .zoom__box{top:27.5svh;left:5vw;height:25svh;width:20vw}
.zoom__layer:nth-child(6) .zoom__box{top:27.5svh;left:-22.5vw;height:25svh;width:30vw}
.zoom__layer:nth-child(7) .zoom__box{top:22.5svh;left:25vw;height:15svh;width:15vw}

/* pista de que hay que seguir bajando; se apaga al arrancar el zoom */
.zoom__hint{
  position:absolute;inset-inline:0;bottom:clamp(1.4rem,4vw,2.6rem);
  text-align:center;pointer-events:none;
  font-family:var(--label);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.8);text-shadow:0 1px 14px rgba(0,0,0,.7);
  opacity:calc(1 - var(--p,0) * 4);
}

@media(prefers-reduced-motion:reduce){
  .zoom{height:auto}
  .zoom__stage{position:relative;height:auto;display:grid;gap:2px;grid-template-columns:1fr 1fr}
  .zoom__layer{position:static;transform:none;display:block;width:auto;height:auto}
  .zoom__layer:first-child{grid-column:1 / -1}
  .zoom__box{position:static!important;width:auto!important;height:42svh!important;top:auto!important;left:auto!important}
  .zoom__hint{display:none}
}

/* ============================================================
   LATIDOS DE IMAGEN · una foto por pantalla
   ============================================================ */

.beat{position:relative;overflow:hidden;background:var(--frame-deep);margin:0}
.beat img{width:100%;height:100svh;object-fit:cover}
.beat.tall img{height:112svh}
.beat.half img{height:66svh}

.beat figcaption{
  position:absolute;left:var(--pad);bottom:clamp(1.4rem,3vw,2.4rem);margin:0;
  font-family:var(--label);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(0,0,0,.75);
}

.beat.withtext::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,18,32,.82),rgba(13,18,32,.1) 58%,rgba(13,18,32,.34))}
.beat__over{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad) var(--pad) clamp(3rem,7vw,5rem);
}
.beat__over h2{max-width:15ch}
.beat__over .lead{margin-top:1.1rem;max-width:44ch}

/* ============================================================
   LATIDOS DE TEXTO · el marco respira, la frase sola
   ============================================================ */

.say{background:var(--frame);padding:clamp(5rem,15vh,10rem) var(--pad);display:flex;flex-direction:column}
.say.deep{background:var(--frame-deep)}
.say__in{width:100%;max-width:1040px;margin-inline:auto}
.say.center{align-items:center;text-align:center}
.say.center .say__in{display:flex;flex-direction:column;align-items:stretch}
.say.center .say__in > *{margin-inline:auto}
.say.center p{margin-inline:auto}
.say .lead{margin-top:1.5rem}

/* el contraste de precio */
.swap{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:2.4rem 0 0}
.swap .before{font-family:var(--display);font-size:clamp(1.4rem,1rem + 2vw,2.4rem);
  color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--sand-deep);
  text-decoration-thickness:1px;font-variant-numeric:tabular-nums}
.swap .after{font-family:var(--display);font-size:clamp(3.1rem,1.4rem + 8.4vw,8.2rem);
  color:var(--sand);line-height:.92;font-variant-numeric:tabular-nums}
.swap .after em{font-style:normal;font-size:.24em;letter-spacing:.12em;vertical-align:.95em}
.stamp{font-family:var(--label);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:1.5rem}

/* — el salto de precio: la cifra que detiene el scroll — */
.pricejump{display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,2vw,1.3rem);
  margin-top:clamp(1.8rem,4vw,2.6rem);width:100%}
.pricejump__was{
  font-family:var(--display);font-variant-numeric:tabular-nums;line-height:1;
  font-size:clamp(2.1rem,1.2rem + 4.4vw,4.6rem);
  color:var(--sand-deep);
  text-decoration:line-through;text-decoration-thickness:.045em;
  text-decoration-color:rgba(229,194,156,.85);
}
.pricejump__was em{display:inline-block;font-style:normal;font-size:.26em;letter-spacing:.12em;vertical-align:.85em;text-decoration:none}
.pricejump__rule{width:1px;height:clamp(1.8rem,4.5vw,3.2rem);
  background:linear-gradient(rgba(185,143,99,0),var(--sand))}
.pricejump__lbl{font-family:var(--label);font-size:clamp(.8rem,.76rem + .2vw,.92rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--sand)}
.pricejump__now{
  font-family:var(--display);font-variant-numeric:tabular-nums;line-height:.9;
  font-size:clamp(3.4rem,1.2rem + 10.5vw,9.4rem);
  color:var(--sand);text-shadow:0 0 70px rgba(229,194,156,.2);
}
.pricejump__now em{font-style:normal;font-size:.2em;letter-spacing:.12em;vertical-align:1.15em}

/* enunciados sueltos: hairlines, sin tarjetas */
.lines{list-style:none;margin:3rem 0 0;padding:0;width:100%;text-align:left}
.lines li{padding:1.5rem 0;border-top:1px solid var(--hair);display:grid;gap:.35rem .5rem}
@media(min-width:780px){.lines li{grid-template-columns:minmax(0,24ch) 1fr;gap:2.5rem;align-items:baseline}}
.lines li:last-child{border-bottom:1px solid var(--hair)}
.lines b{font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);line-height:1.1}
.lines span{color:var(--ink-dim);font-size:clamp(1rem,.96rem + .25vw,1.1rem);line-height:1.62}

/* cifras */
.specs{display:grid;gap:2.4rem 1rem;margin-top:3.2rem;width:100%;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.specs{grid-template-columns:repeat(4,1fr)}}
.specs div{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.specs .v{font-family:var(--display);color:var(--sand);line-height:.95;
  font-size:clamp(2.3rem,1.4rem + 3.4vw,4.2rem);font-variant-numeric:tabular-nums}
.specs .k{font-family:var(--label);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}

/* calendario */
.cal{width:100%;margin-top:3.4rem}
.cal__grid{display:grid;grid-template-columns:repeat(26,1fr);gap:clamp(3px,.6vw,8px)}
@media(max-width:620px){.cal__grid{grid-template-columns:repeat(13,1fr)}}
.cal__wk{aspect-ratio:1;background:rgba(251,247,242,.08);border-radius:1px}
.cal__wk.on{background:var(--sand);box-shadow:0 0 22px rgba(229,194,156,.38)}
.cal__legend{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;margin-top:1.8rem;
  font-family:var(--label);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.cal__legend i{display:inline-block;width:10px;height:10px;margin-right:.6rem;border-radius:1px;vertical-align:-1px}
.cal__legend .on i{background:var(--sand)}
.cal__legend .off i{background:rgba(251,247,242,.08)}

/* comparación */
.vs{width:100%;margin-top:3.2rem;overflow-x:auto;text-align:left}
.vs table{border-collapse:collapse;width:100%;min-width:560px}
.vs th,.vs td{padding:1.2rem 1.05rem;text-align:left;vertical-align:top}
.vs thead th{font-family:var(--label);font-weight:400;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--hair)}
.vs thead th:nth-child(2){color:var(--sand)}
.vs thead th:nth-child(3){color:var(--ink-dim)}
.vs tbody th{font-family:var(--body);font-weight:400;color:var(--ink-dim);font-size:1rem;
  border-bottom:1px solid rgba(251,247,242,.07);white-space:nowrap}
.vs tbody td{border-bottom:1px solid rgba(251,247,242,.07);color:var(--ink-dim);font-size:1.04rem}
.vs tbody td:first-of-type{color:var(--ink)}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:none}
.tick{display:inline-flex;align-items:baseline;gap:.55rem}
.tick svg{width:.95em;height:.95em;flex:none;align-self:center}
.tick.y{color:var(--sand)}
.tick.n{color:var(--ink-faint)}

/* — preguntas frecuentes: acordeón nativo, sin JavaScript — */
.faq{width:100%;margin-top:clamp(2.4rem,5vw,3.4rem);text-align:left;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  padding:1.55rem 0;cursor:pointer;list-style:none;
  font-family:var(--body);font-weight:500;line-height:1.35;color:var(--ink);
  font-size:clamp(1.14rem,1.04rem + .55vw,1.4rem);
  letter-spacing:.004em;
  transition:color .25s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:.6em;height:.6em;margin-top:.4em;
  border-right:1.5px solid var(--sand);border-bottom:1.5px solid var(--sand);
  transform:rotate(45deg);transition:transform .35s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--sand)}
.faq__a{padding:0 0 1.7rem;max-width:64ch}
.faq__a p{margin:0 0 .8rem;max-width:none}
.faq__a p:last-child{margin-bottom:0}

/* precio */
.plans{display:grid;gap:1px;margin-top:3rem;width:100%;background:var(--hair);border:1px solid var(--hair);text-align:left}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
.plan{background:var(--frame);padding:2.3rem 2rem}
.plan .t{font-family:var(--label);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:1.1rem}
.plan .h{font-family:var(--display);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);color:var(--ink);
  line-height:1.05;margin-bottom:.55rem;font-variant-numeric:tabular-nums}
.plan p{font-size:1.02rem;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font-family:var(--label);font-weight:400;font-size:clamp(.78rem,.74rem + .2vw,.88rem);
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:1.25em 2.7em;background:var(--sand);color:var(--frame);
  border:1px solid var(--sand);border-radius:1px;line-height:1;
  transition:background .3s ease,transform .3s ease,border-color .3s ease}
.btn:hover{background:var(--sand-bright);border-color:var(--sand-bright);transform:translateY(-2px)}
.btn svg{width:1.1em;height:1.1em}
.btn--ghost{background:transparent;color:var(--sand);border-color:var(--hair)}
.btn--ghost:hover{background:var(--sand);color:var(--frame)}
.cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

.seals{margin-top:3rem;display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:center;
  font-family:var(--label);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.seals span{display:inline-flex;align-items:center;gap:.55rem}
.seals span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--sand-deep)}

/* pie */
footer{background:var(--frame-deep);padding:clamp(3rem,7vw,4.5rem) var(--pad);border-top:1px solid var(--hair)}
.foot{max-width:1040px;margin-inline:auto;display:grid;gap:2.4rem}
@media(min-width:820px){.foot{grid-template-columns:1.5fr 1fr 1fr}}
.foot h4{font-family:var(--label);font-weight:400;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sand);margin:0 0 1rem}
.foot p{font-size:1rem;margin:0 0 .55rem}
.foot a{display:block;font-size:1rem;color:var(--ink-dim);text-decoration:none;margin-bottom:.5rem;transition:color .25s}
.foot a:hover{color:var(--sand)}
.foot .bn{font-family:var(--logo);text-transform:uppercase;letter-spacing:.32em;color:var(--ink);font-size:.92rem;margin-bottom:.6rem}
.foot .bs{font-family:var(--script);color:var(--sand);font-size:1.2rem;margin-bottom:1rem}
.legal{max-width:1040px;margin:2.6rem auto 0;padding-top:1.4rem;
  border-top:1px solid rgba(251,247,242,.07);display:flex;flex-wrap:wrap;
  gap:.5rem 1.6rem;justify-content:space-between;font-size:.86rem;color:var(--ink-faint)}

/* revelado */
.js .rise{opacity:0;transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1;transform:none}
.js .rise.d1{transition-delay:.1s}
.js .rise.d2{transition-delay:.2s}
.js .rise.d3{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rise{opacity:1;transform:none}
}