/** Shopify CDN: Minification failed

Line 306:0 Unexpected "}"
Line 433:0 Unexpected "}"

**/
/* ==========================================================================
   PLEENA · Sistema de scroll, reveals y secciones de marca
   Mobile-first. Todo visible por defecto si el JS falla.
   ========================================================================== */

:root{
  --pl-bg:#F6F1EA;
  --pl-bg-deep:#EDE3D8;
  --pl-ink:#2B211B;
  --pl-soft:#7A6A5D;
  --pl-line:#E2D5C6;
  --pl-accent:#C09A7E;
  --pl-deep:#8A6A52;
  --pl-ease:cubic-bezier(.22,1,.36,1);
  --pl-pad:20px;
}
@media (min-width:900px){ :root{ --pl-pad:clamp(28px,4vw,72px); } }

.pl{position:relative;background:var(--pl-bg);color:var(--pl-ink);font-family:var(--font-body-family,inherit);-webkit-font-smoothing:antialiased;overflow:clip}
.pl *,.pl *::before,.pl *::after{box-sizing:border-box}
.pl p{margin:0}
.pl a{color:inherit;text-decoration:none}
.pl img{display:block;max-width:100%}
.pl strong,.pl b{font-weight:inherit;color:var(--pl-accent)}

/* color:inherit es obligatorio — el tema pinta h1/h2/h3 con su propio color
   y eso rompe los títulos claros sobre fondo oscuro.
   --pl-display lo fija la sección del símbolo para toda la página. */
.pl-h{font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));line-height:1.07;letter-spacing:-.025em;margin:0;color:inherit}
.pgal__name,.pfp__name,.pexp__tile h3,.prit__step h3,.pcta__title,.pgal__title{color:inherit}
.pl-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--pl-deep);margin:0;font-weight:500}
.pl-sub{font-size:clamp(15px,3.7vw,18px);line-height:1.62;color:var(--pl-soft)}
.pl-wrap{padding-left:var(--pl-pad);padding-right:var(--pl-pad);max-width:1340px;margin:0 auto;width:100%}

/* ---------- botones (especificidad alta: `.pl a` pisa el color si no) ------ */
.pl .pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:54px;padding:0 28px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;text-align:center;position:relative;overflow:hidden;transition:transform .35s var(--pl-ease),background .35s,color .35s,border-color .35s,box-shadow .35s}
.pl .pl-btn--solid{background:var(--pl-ink);color:#fff}
.pl .pl-btn--solid:hover{background:var(--pl-deep);box-shadow:0 14px 34px -14px rgba(43,33,27,.55)}
.pl .pl-btn--ghost{border-color:currentColor;background:transparent}
.pl .pl-btn--ghost:hover{background:currentColor}
.pl .pl-btn--light{background:#fff;color:#2B211B}
.pl .pl-btn--light:hover{box-shadow:0 16px 38px -16px rgba(0,0,0,.5)}
.pl .pl-btn:active{transform:scale(.97)}
.pl .pl-btn svg{flex:0 0 auto}
/* brillo que cruza el botón al pasar el cursor */
.pl .pl-btn::after{content:"";position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-220%) skewX(-16deg);transition:transform .7s var(--pl-ease);pointer-events:none}
.pl .pl-btn--light::after{background:linear-gradient(100deg,transparent,rgba(43,33,27,.14),transparent)}
.pl .pl-btn:hover::after{transform:translateX(320%) skewX(-16deg)}

/* ---------- reveals (solo se ocultan si el JS arrancó) ---------- */
.pl-js [data-preveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--pl-ease) var(--d,0s),transform .9s var(--pl-ease) var(--d,0s);will-change:opacity,transform}
.pl-js [data-preveal="fade"]{transform:none}
.pl-js [data-preveal="rise"]{transform:translateY(54px)}
.pl-js [data-preveal="scale"]{transform:scale(1.06)}
.pl-js [data-preveal="left"]{transform:translateX(-28px)}
.pl-js [data-preveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 103% 0);transition:clip-path 1.2s var(--pl-ease) var(--d,0s)}
.pl-js [data-preveal="none"]{opacity:1;transform:none}
[data-preveal-on]{opacity:1 !important;transform:none !important;clip-path:inset(0 0 0 0) !important}

/* ---------- reveal por palabras ---------- */
.pl-words .pl-word{display:inline-block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em;vertical-align:bottom}
.pl-words .pl-word > i{display:inline-block;font-style:inherit}
.pl-js .pl-words .pl-word > i{transform:translateY(115%);transition:transform 1.05s var(--pl-ease) var(--d,0s)}
.pl-js .pl-words[data-preveal-on] .pl-word > i{transform:none}

/* ---------- puntos flotantes (compartido) ---------- */
.pl-dots{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pl-dots i{position:absolute;display:block;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:var(--pl-dot,rgba(192,154,126,.6));box-shadow:0 0 12px var(--pl-dot,rgba(192,154,126,.5));opacity:0;animation:plDot var(--t,9s) ease-in-out var(--dl,0s) infinite}
.pl-dots i.is-ring{width:calc(var(--s,4px) * 2.6);height:calc(var(--s,4px) * 2.6);background:none;box-shadow:none;border:1px solid var(--pl-dot,rgba(192,154,126,.6));animation-name:plDotRing}
.pl-dots i.is-soft{width:calc(var(--s,4px) * 1.9);height:calc(var(--s,4px) * 1.9);filter:blur(1.7px)}
@keyframes plDot{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.45)}
  20%{opacity:.95}
  56%{opacity:.62;transform:translate3d(calc(var(--mx,0px) / 2),-12px,0) scale(1)}
  100%{opacity:0;transform:translate3d(var(--mx,0px),-34px,0) scale(.55)}
}
@keyframes plDotRing{
  0%{opacity:0;transform:translate3d(0,14px,0) scale(.3)}
  28%{opacity:.55}
  62%{opacity:.4;transform:translate3d(calc(var(--mx,0px) / 2),-14px,0) scale(.9)}
  100%{opacity:0;transform:translate3d(var(--mx,0px),-32px,0) scale(1.2)}
}

/* ---------- brillo que barre un texto ---------- */
.pl-shine{position:relative;display:inline-block}
.pl-shine::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;background:linear-gradient(100deg,transparent 38%,var(--pl-shine,rgba(255,255,255,.95)) 50%,transparent 62%);background-size:260% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;pointer-events:none;animation:plShine 5.5s ease-in-out 1s infinite}
@keyframes plShine{0%{background-position:260% 0}45%,100%{background-position:-160% 0}}

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.plh{position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;isolation:isolate}
.plh--full{min-height:calc(100vh - var(--plh-cut,0px));min-height:calc(100svh - var(--plh-cut,0px))}
.plh__media{position:absolute;inset:-9% 0;z-index:0;overflow:hidden;transform:translate3d(0,var(--plh-y,0),0);will-change:transform}
.plh__media img{width:100%;height:100%;object-fit:cover;object-position:var(--plh-pos,center);animation:plKen 24s ease-in-out infinite alternate}
@keyframes plKen{from{transform:scale(1)}to{transform:scale(1.09)}}
.plh__fallback{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 15%,#F2E7DD 0%,#E3D2C4 55%,#C9AE9B 100%)}
.plh__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,18,15,.44) 0%,rgba(22,18,15,.10) 18%,rgba(22,18,15,.38) 40%,rgba(22,18,15,.74) 60%,rgba(22,18,15,.94) 100%)}
.plh .pl-dots{z-index:1;--pl-dot:rgba(255,255,255,.75)}
.plh__inner{position:relative;z-index:2;width:100%;padding-top:16vh;isolation:isolate;padding-bottom:clamp(74px,19vw,94px)}
.plh__eyebrow{color:rgba(255,255,255,.86);display:inline-flex;align-items:center;gap:12px}
.plh__eyebrow::before{content:"";display:block;width:clamp(22px,7vw,40px);height:1px;background:var(--plh-accent,#E8CDBC);transform-origin:left;animation:plLine 1.4s var(--pl-ease) .2s both}
@keyframes plLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pl .plh__title{color:#fff;font-size:clamp(2.45rem,10.2vw,6.4rem);margin:14px 0 0;max-width:14ch}
.plh__title .pl-word > i,.plh__eyebrow,.plh__sub{text-shadow:0 1px 3px rgba(22,18,15,.55),0 2px 22px rgba(22,18,15,.65)}
.plh__title em{font-style:normal;color:var(--plh-accent,#E8CDBC);display:block}
.plh__sub{color:rgba(255,255,255,.92);max-width:32ch;margin-top:16px}
.plh__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.plh__cta .pl-btn{flex:1 1 0;min-width:0;padding:0 14px;font-size:14px}
.plh__cue{position:absolute;left:50%;bottom:12px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.7);font-size:9px;letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
.plh__cue span{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));animation:plCue 2.1s var(--pl-ease) infinite}
@keyframes plCue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (min-width:900px){
  .plh__cta{gap:12px;margin-top:30px}
  .plh__cta .pl-btn{flex:0 0 auto;padding:0 30px;font-size:15px}
  .plh__inner{padding-bottom:clamp(56px,6vw,92px)}
  .plh__sub{font-size:19px;max-width:38ch}
  .plh__cue{bottom:20px;font-size:10px}
  .plh__cue span{height:38px}
  /* en escritorio el texto vive a la izquierda: se oscurece esa franja */
  .plh__veil{background:
    linear-gradient(180deg,rgba(22,18,15,.36) 0%,rgba(22,18,15,.04) 26%,rgba(22,18,15,.06) 46%,rgba(22,18,15,.52) 100%),
    linear-gradient(96deg,rgba(22,18,15,.86) 0%,rgba(22,18,15,.72) 34%,rgba(22,18,15,.34) 58%,rgba(22,18,15,.04) 80%,rgba(22,18,15,0) 100%)}
}

/* ==========================================================================
   02 · SYMBOL STORY (el símbolo se abre y nace el wordmark)
   ========================================================================== */
.psym{position:relative;background:var(--psym-bg,#F2EBE4);color:var(--pl-ink)}
.psym__track{position:relative;height:var(--psym-h,230vh)}
.psym__stage{position:sticky;top:0;height:calc(100vh - var(--psym-cut,0px));height:calc(100svh - var(--psym-cut,0px));display:grid;place-items:center;overflow:hidden;padding:0 var(--pl-pad)}
.psym .pl-dots{--pl-dot:var(--psym-dot,rgba(192,154,126,.6))}
.psym__inner{position:relative;z-index:1;width:100%;max-width:980px;display:grid;grid-template-columns:1fr;place-items:center;text-align:center}
.psym__glow{grid-area:1/1;position:absolute;width:min(120vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--psym-glow,rgba(192,154,126,.28)) 0%,rgba(192,154,126,0) 68%);z-index:0;pointer-events:none;animation:plBreathe 7s ease-in-out infinite}
@keyframes plBreathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}

.psym__mark{grid-area:1/1;position:relative;z-index:1;width:min(74vw,340px);height:auto;overflow:visible}
.psym__mark path,.psym__mark circle{fill:none;stroke:var(--psym-mark,#2B211B);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.psym__ring{opacity:.55}
.psym__bar{transform-box:fill-box;transform-origin:center}
.psym__eL,.psym__eR{transform-box:fill-box;transform-origin:center}

/* el trazo se dibuja solo al cargar. En CSS y no en GSAP a propósito:
   una animación CSS con fill-mode both siempre acaba en su estado final,
   aunque el navegador congele los frames intermedios. */
.psym__stage.is-live .psym__ring{stroke-dasharray:704;animation:plDrawRing 1.5s var(--pl-ease) .2s both}
.psym__stage.is-live .psym__eL{stroke-dasharray:268;animation:plDrawE 1.1s var(--pl-ease) .5s both}
.psym__stage.is-live .psym__eR{stroke-dasharray:268;animation:plDrawE 1.1s var(--pl-ease) .64s both}
.psym__stage.is-live .psym__bar{stroke-dasharray:196;animation:plDrawBar .7s var(--pl-ease) 1.18s both}
@keyframes plDrawRing{from{stroke-dashoffset:704}to{stroke-dashoffset:0}}
@keyframes plDrawE{from{stroke-dashoffset:268}to{stroke-dashoffset:0}}
@keyframes plDrawBar{from{stroke-dashoffset:196}to{stroke-dashoffset:0}}

/* el nombre queda exactamente sobre el centro del símbolo;
   bajada y frase cuelgan debajo sin desplazarlo */
.psym__reveal{grid-area:1/1;position:relative;z-index:2;display:grid;place-items:center;width:100%;pointer-events:none}
.psym__sub{position:absolute;top:100%;left:0;right:0;margin-top:clamp(16px,4vw,26px);display:grid;gap:10px;place-items:center}
.psym__word{position:relative;font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:clamp(3rem,15vw,9rem);line-height:1;letter-spacing:-.03em;color:var(--psym-mark,#2B211B);white-space:nowrap}
.psym__word img{width:min(72vw,520px);height:auto}
.psym__claim{max-width:26ch;font-size:clamp(14px,3.7vw,18px);line-height:1.6;color:var(--pl-soft)}
.psym__tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--pl-deep)}
.psym__progress{position:absolute;left:50%;bottom:clamp(54px,11vh,86px);transform:translateX(-50%);width:min(46vw,190px);height:1px;background:rgba(43,33,27,.14);z-index:3;overflow:hidden}
.psym__progress i{display:block;height:100%;width:100%;background:var(--pl-deep);transform:scaleX(var(--psym-p,0));transform-origin:left}
.psym__cue{position:absolute;left:50%;bottom:clamp(18px,4.5vh,34px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--pl-deep);opacity:.7;pointer-events:none}
.psym__cue span{display:block;width:1px;height:24px;background:linear-gradient(180deg,currentColor,transparent);animation:plCue 2.1s var(--pl-ease) infinite}

/* estado por defecto (sin JS): marca chica arriba + nombre debajo */
.psym__stage:not(.is-live) .psym__mark{grid-area:auto;width:min(34vw,140px);margin-bottom:26px}
.psym__stage:not(.is-live) .psym__reveal{grid-area:auto}
.psym__stage:not(.is-live) .psym__sub{position:relative;top:auto}
.psym__stage:not(.is-live) .psym__progress,.psym__stage:not(.is-live) .psym__cue{display:none}

/* ==========================================================================
   03 · STICKY GALLERY (scroll vertical → recorrido horizontal)
   ========================================================================== */
.pgal{position:relative;background:var(--pgal-bg,#2B211B);color:#fff}
.pgal__track{position:relative}
.pgal__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,30px);overflow:hidden;padding:clamp(72px,12vh,110px) 0 clamp(52px,9vh,80px)}
.pgal .pl-dots{--pl-dot:var(--pgal-accent,rgba(224,194,178,.5))}
.pgal__head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.pgal__head .pl-eyebrow{color:var(--pl-on-soft,rgba(255,255,255,.7))}
.pgal__title{font-size:clamp(1.8rem,7vw,3.4rem);max-width:16ch;margin-top:8px}
.pgal__count{font-size:12px;letter-spacing:.18em;color:var(--pl-on-faint,rgba(255,255,255,.55));white-space:nowrap;font-variant-numeric:tabular-nums}

.pgal__rail{position:relative;z-index:1;display:flex;gap:14px;padding:4px var(--pl-pad);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;will-change:transform}
.pgal__rail::-webkit-scrollbar{display:none}
.pgal--live .pgal__rail{overflow:visible;scroll-snap-type:none;padding-right:0}

.pgal__card{position:relative;flex:0 0 auto;width:min(74vw,320px);scroll-snap-align:center;display:flex;flex-direction:column;gap:14px}
.pgal__shot{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#EDE3D8}
.pgal__shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--pl-ease)}
.pgal__card:hover .pgal__shot img{transform:scale(1.05)}
.pgal__idx{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.18em;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);color:#fff}
.pgal__badge{position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--pgal-ink-ac,#8A5F44);color:#fff;font-weight:600}
.pgal__meta{display:flex;flex-direction:column;gap:5px}
.pgal__name{font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:16px;line-height:1.3;letter-spacing:-.01em}
.pgal__note{font-size:13px;line-height:1.5;color:var(--pl-on-soft,rgba(255,255,255,.6))}
.pgal__price{display:flex;align-items:baseline;gap:8px;font-size:15px;margin-top:2px}
.pgal__price s{color:var(--pl-on-faint,rgba(255,255,255,.42));font-size:13px}
.pgal__link{margin-top:6px;font-size:13px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px;color:var(--pl-on,#fff);border-bottom:1px solid currentColor;padding-bottom:3px;align-self:flex-start}

.pgal__bar{position:relative;z-index:1;margin:0 var(--pl-pad);height:2px;background:var(--pl-on-hair,rgba(255,255,255,.14));overflow:hidden;border-radius:2px}
.pgal__bar i{display:block;height:100%;background:var(--pgal-accent,#E7CDB6);transform:scaleX(var(--pgal-p,0));transform-origin:left;transition:transform .12s linear}
.pgal__hint{position:relative;z-index:1;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--pl-on-faint,rgba(255,255,255,.42));text-align:center}

@media (min-width:900px){
  .pgal__card{width:min(42vw,520px)}
  .pgal__rail{gap:22px}
  .pgal__note{font-size:14px}
  .pgal__name{font-size:18px}
}

/* ==========================================================================
   04 · RITUAL (puntos, destellos y línea que se dibuja)
   ========================================================================== */
.prit{position:relative;padding:clamp(60px,13vw,130px) 0;background:var(--prit-bg,#F7F3EF);color:var(--prit-text,#2B211B);overflow:clip}
.prit .pl-dots{--pl-dot:var(--prit-accent,rgba(192,154,126,.55))}
.prit__inner{position:relative;z-index:1}
.prit__head{display:grid;gap:12px;justify-items:center;text-align:center;margin-bottom:clamp(34px,8vw,64px)}
.prit__head .pl-eyebrow{color:var(--prit-accent,#8A6A52)}
.prit__title{font-size:clamp(1.9rem,7.6vw,3.6rem);max-width:17ch}
.prit__sub{max-width:44ch;color:var(--prit-soft,#6E6158)}

.prit__steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,6vw,28px);position:relative}
/* línea que une los pasos y se dibuja con el scroll */
.prit__steps::before{content:"";position:absolute;left:34px;top:34px;bottom:34px;width:1px;background:linear-gradient(180deg,var(--prit-accent,#C09A7E),transparent);opacity:.35;transform:scaleY(var(--prit-line,0));transform-origin:top;transition:transform .2s linear}
.prit__step{position:relative;display:grid;grid-template-columns:68px 1fr;gap:16px;align-items:start;padding:18px;border-radius:18px;background:var(--prit-card,rgba(255,255,255,.72));border:1px solid var(--prit-border,#E4D9CE);overflow:hidden}
/* destello que cruza la tarjeta al aparecer */
.prit__step::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent 28%,var(--prit-shine,rgba(255,255,255,.85)) 50%,transparent 72%);transform:translateX(-160%) skewX(-14deg);pointer-events:none}
.prit__step[data-preveal-on]::after{animation:plCardShine 1.6s var(--pl-ease) .25s 1}
@keyframes plCardShine{to{transform:translateX(320%) skewX(-14deg)}}

.prit__orb{position:relative;width:68px;height:68px;display:grid;place-items:center;flex:0 0 auto}
.prit__orb b{position:relative;z-index:2;font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:17px;letter-spacing:-.02em;color:var(--prit-accent,#8A6A52)}
.prit__orb i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--prit-accent,#C09A7E);opacity:0;animation:plOrb 3.2s ease-out var(--dl,0s) infinite}
.prit__orb i:nth-child(2){animation-delay:calc(var(--dl,0s) + 1.1s)}
.prit__orb i:nth-child(3){animation-delay:calc(var(--dl,0s) + 2.2s)}
.prit__orb::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--prit-orb,rgba(192,154,126,.16));z-index:1}
@keyframes plOrb{0%{transform:scale(.58);opacity:0}25%{opacity:.75}100%{transform:scale(1.05);opacity:0}}

.prit__step h3{font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:clamp(17px,4.6vw,21px);letter-spacing:-.02em;margin:6px 0 0}
.prit__step p{font-size:14px;line-height:1.58;color:var(--prit-soft,#6E6158);margin-top:6px}
.prit__tag{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--prit-accent,#8A6A52);border:1px solid currentColor;border-radius:999px;padding:5px 10px;opacity:.85}

@media (min-width:860px){
  .prit__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .prit__steps::before{left:34px;right:34px;top:52px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,var(--prit-accent,#C09A7E),transparent);transform:scaleX(var(--prit-line,0));transform-origin:left}
  .prit__step{grid-template-columns:1fr;gap:6px;padding:26px 24px 28px}
  .prit__step p{font-size:14.5px}
}

/* ==========================================================================
   05 · CIERRE
   ========================================================================== */
.pcta{position:relative;padding:clamp(66px,15vw,140px) 0;background:var(--pcta-bg,#2B211B);color:#fff;overflow:clip}
.pcta__glow{position:absolute;left:50%;top:38%;width:min(150vw,1050px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--pcta-halo,rgba(192,154,126,.36)) 0%,rgba(192,154,126,0) 64%);pointer-events:none;animation:plBreathe 9s ease-in-out infinite}
.pcta .pl-dots{--pl-dot:var(--pcta-accent,rgba(224,194,178,.7))}
.pcta__rule{position:absolute;left:50%;top:0;width:min(70vw,420px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--pcta-accent,#E7CDB6),transparent);opacity:.5}
.pcta__inner{position:relative;z-index:1;display:grid;gap:clamp(16px,4vw,24px);justify-items:center;text-align:center}
.pcta .pl-eyebrow{color:var(--pcta-accent,#E7CDB6)}
.pcta__title{font-size:clamp(2.1rem,9vw,5rem);max-width:15ch}
.pcta__sub{max-width:40ch;color:var(--pcta-soft,rgba(255,255,255,.72))}
.pcta__btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;margin-top:8px}
.pcta__btns .pl-btn{flex:1 1 0;min-width:0;padding:0 16px;font-size:14px}
.pcta .pl-btn--ghost{color:inherit;border-color:var(--pcta-hair2,rgba(255,255,255,.5))}
.pcta .pl-btn--ghost:hover{background:currentColor;border-color:currentColor}
.pcta .pl-btn--ghost:hover span{color:var(--pcta-bg,#2B211B)}
/* el botón principal se invierte solo según el fondo de la sección */
.pcta .pl-btn--main{background:var(--pcta-btn-bg,#fff);color:var(--pcta-btn-fg,#2B211B)}
.pcta .pl-btn--main:hover{box-shadow:0 18px 40px -18px rgba(43,33,27,.55)}
.pcta .pl-btn--main::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent)}
@media (min-width:760px){ .pcta__btns .pl-btn{flex:0 0 auto;padding:0 30px;font-size:15px} }

.pcta__marquee{position:relative;z-index:1;margin-top:clamp(28px,6vw,48px);width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.pcta__marquee ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;width:max-content;animation:plMarquee var(--pcta-speed,26s) linear infinite}
.pcta__marquee li{font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:clamp(1.3rem,5.4vw,2.4rem);letter-spacing:-.02em;color:var(--pcta-faint,rgba(255,255,255,.34));white-space:nowrap;display:flex;align-items:center;gap:36px}
.pcta__marquee li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--pcta-accent,#E7CDB6);opacity:.9;flex:0 0 auto;box-shadow:0 0 10px var(--pcta-accent,#E7CDB6)}
@keyframes plMarquee{to{transform:translateX(-50%)}}

.pcta__trust{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:clamp(30px,7vw,54px);border-top:1px solid var(--pcta-hair,rgba(255,255,255,.14));padding-top:clamp(24px,5vw,36px)}
.pcta__trust div{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;padding:0 4px}
.pcta__trust em{display:block;width:7px;height:7px;border-radius:50%;background:var(--pcta-accent,#E7CDB6);margin-bottom:4px;position:relative}
.pcta__trust em::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--pcta-accent,#E7CDB6);opacity:0;animation:plOrb 3s ease-out var(--dl,0s) infinite}
.pcta__trust b{font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:clamp(12.5px,3.3vw,16px);letter-spacing:-.01em;color:inherit;line-height:1.25}
.pcta__trust span{font-size:11px;line-height:1.45;color:var(--pcta-soft,rgba(255,255,255,.58))}
@media (min-width:760px){ .pcta__trust{gap:16px} .pcta__trust span{font-size:12.5px} }

/* ==========================================================================
   CAPAS DE AMBIENTE · partículas y hebras de cabello
   ========================================================================== */
.pl-sparks{position:absolute;inset:0;z-index:0;pointer-events:none}
.pl-sparks canvas{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important}
/* con mousemove el contenedor sí escucha el cursor, pero deja pasar los clics */
.pl-sparks.is-interactive,.pl-sparks.is-interactive canvas{pointer-events:auto}

.pl-hair{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pl-hair svg{width:100%;height:100%;display:block}
.pl-hair path{fill:none;stroke:var(--plh-strand,#C9A08F);stroke-width:1.2;stroke-linecap:round;
  transform-origin:center;animation:plWave var(--dur,14s) ease-in-out var(--dl,0s) infinite}
}

/* ==========================================================================
   EXPLORA · accesos al catálogo (sin hablar de producto)
   ========================================================================== */
.pexp{position:relative;padding:clamp(60px,13vw,130px) 0;background:var(--pexp-bg,#EDE3D8);color:var(--pexp-text,#2B211B);overflow:clip}
.pexp__inner{position:relative;z-index:1}
.pexp__head{display:grid;gap:12px;justify-items:center;text-align:center;margin-bottom:clamp(30px,7vw,56px)}
.pexp__head .pl-eyebrow{color:var(--pexp-accent,#8A6A52)}
.pexp__title{font-size:clamp(1.9rem,7.6vw,3.6rem);max-width:16ch}
.pexp__sub{max-width:42ch;color:var(--pexp-soft,#7A6A5D)}

.pexp__grid{display:grid;gap:12px}
@media (min-width:820px){ .pexp__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} }

.pexp__tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  min-height:clamp(178px,42vw,290px);padding:22px;border-radius:20px;overflow:hidden;
  background:var(--pexp-tile,#FFFFFF);border:1px solid var(--pexp-border,rgba(192,154,126,.26));
  transition:transform .55s var(--pl-ease),box-shadow .55s var(--pl-ease),border-color .4s}
.pexp__tile:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(43,33,27,.45);border-color:var(--pexp-accent,#C09A7E)}
.pexp__tile::before{content:"";position:absolute;inset:auto -30% -55% -30%;height:82%;border-radius:50%;
  background:radial-gradient(circle,var(--pexp-glow,rgba(192,154,126,.30)) 0%,transparent 68%);pointer-events:none;
  animation:plBreathe 8s ease-in-out var(--dl,0s) infinite}
.pexp__tile::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-170%) skewX(-14deg)}
.pexp__tile[data-preveal-on]::after{animation:plCardShine 1.7s var(--pl-ease) .3s 1}

.pexp__num{position:absolute;top:18px;left:22px;font-size:10px;letter-spacing:.2em;color:var(--pexp-accent,#8A6A52);opacity:.8}
.pexp__dot{position:absolute;top:18px;right:20px;width:8px;height:8px;border-radius:50%;background:var(--pexp-accent,#C09A7E)}
.pexp__dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid currentColor;color:var(--pexp-accent,#C09A7E);opacity:0;animation:plOrb 3s ease-out var(--dl,0s) infinite}
.pexp__tile h3{position:relative;font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,var(--font-heading-weight,600));font-size:clamp(1.35rem,5.6vw,2rem);letter-spacing:-.025em;margin:0}
.pexp__tile p{position:relative;font-size:13.5px;line-height:1.55;color:var(--pexp-soft,#7A6A5D);max-width:24ch}
.pexp__go{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pexp-accent,#8A6A52)}
.pexp__go svg{transition:transform .4s var(--pl-ease)}
.pexp__tile:hover .pexp__go svg{transform:translateX(5px)}
.pexp__foot{display:flex;justify-content:center;margin-top:clamp(28px,6vw,48px);position:relative;z-index:1}

/* panel suave detrás del texto del hero: la foto ya no se lo come */
.plh__inner::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-6vh -14vw -4vh calc(var(--pl-pad) * -1.6);
  background:radial-gradient(115% 95% at 4% 78%,rgba(22,18,15,.88) 0%,rgba(22,18,15,.66) 38%,rgba(22,18,15,.28) 62%,rgba(22,18,15,0) 82%)}
@media (min-width:900px){ .plh__inner::before{inset:-8vh -34vw -6vh calc(var(--pl-pad) * -1.4)} }

/* ---- tiles de Explora con foto de fondo ---- */
.pexp__tile{justify-content:flex-end;min-height:clamp(230px,56vw,360px);isolation:isolate}
.pexp__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
.pexp__bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--pl-ease)}
.pexp__tile:hover .pexp__bg img{transform:scale(1.07)}
.pexp__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,33,27,.18) 0%,rgba(43,33,27,.05) 34%,rgba(43,33,27,.62) 72%,rgba(43,33,27,.9) 100%)}
/* con foto, el texto va en blanco */
.pexp__tile:has(.pexp__bg){border-color:transparent}
.pexp__tile:has(.pexp__bg) h3,.pexp__tile:has(.pexp__bg) .pexp__num{color:#fff}
.pexp__tile:has(.pexp__bg) p{color:rgba(255,255,255,.86)}
.pexp__tile:has(.pexp__bg) .pexp__go{color:var(--pexp-accent,#E7CDB6)}
.pexp__tile:has(.pexp__bg)::before{display:none}

/* ==========================================================================
   RESEÑAS · mechón que se dibuja al bajar y reseñas con fade
   ========================================================================== */
.ptl{position:relative;padding:clamp(62px,13vw,132px) 0;background:var(--ptl-bg,#121212);color:var(--ptl-text,#fff);overflow:clip}
.ptl__wrap{position:relative;z-index:1}
.ptl__head{display:grid;gap:12px;justify-items:center;text-align:center;margin-bottom:clamp(36px,8vw,68px)}
.ptl__head .pl-eyebrow{color:var(--pl-on-soft,#C9A08F)}
.ptl__title{font-size:clamp(1.9rem,7.6vw,3.6rem);max-width:17ch;color:inherit}
.ptl__summary{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:var(--ptl-soft)}
.ptl__summary .ptl__stars{font-size:14px;letter-spacing:.12em;color:var(--pl-on,#C9A08F)}

.ptl__body{position:relative}
/* el mechón: se dibuja con el scroll y además ondula */
.ptl__strand{position:absolute;left:0;top:0;bottom:0;width:62px;z-index:0;pointer-events:none;
  clip-path:inset(0 0 calc((1 - var(--ptl-draw,1)) * 100%) 0)}
.ptl__strand svg{width:100%;height:100%;display:block;overflow:visible}
.ptl__line{fill:none;stroke:var(--ptl-accent,#C9A08F);stroke-linecap:round;vector-effect:non-scaling-stroke;
  transform-origin:center;animation:plWave var(--dur,13s) ease-in-out var(--dl,0s) infinite}
.ptl__line--a{stroke-width:1;opacity:.34;--dur:15s;--dl:0s}
.ptl__line--b{stroke-width:1.8;opacity:.62;--dur:12s;--dl:-2.5s}
.ptl__line--c{stroke-width:1;opacity:.34;--dur:17s;--dl:-5s}

.ptl__items{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,4.5vw,26px);position:relative;z-index:1}
.ptl__item{position:relative;padding-left:64px}
.ptl__node{position:absolute;left:23px;top:30px;width:15px;height:15px;display:grid;place-items:center}
.ptl__node::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ptl-accent,#C9A08F);
  box-shadow:0 0 0 4px var(--ptl-bg,#121212),0 0 14px var(--ptl-accent,#C9A08F)}
.ptl__node i{position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ptl-accent,#C9A08F);opacity:0}
.ptl__item[data-preveal-on] .ptl__node i{animation:plOrb 2.8s ease-out .2s 3}

.ptl__card{position:relative;padding:20px;border-radius:18px;background:var(--ptl-card,#1A1A1A);
  border:1px solid var(--ptl-border,rgba(201,160,143,.26));overflow:hidden}
.ptl__card::after{content:"";position:absolute;top:0;bottom:0;left:0;width:58%;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);
  transform:translateX(-170%) skewX(-14deg)}
.ptl__item[data-preveal-on] .ptl__card::after{animation:plCardShine 1.6s var(--pl-ease) .3s 1}

.ptl__top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.ptl__face{width:46px;height:46px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  border:2px solid var(--ptl-accent,#C9A08F)}
.ptl__face img{width:100%;height:100%;object-fit:cover}
.ptl__card .ptl__stars{font-size:14px;letter-spacing:.14em;color:var(--ptl-ink-ac,#8A5F44)}
.ptl__quote{margin:0;font-family:var(--pl-display,var(--font-heading-family,inherit));
  font-weight:var(--pl-display-weight,var(--font-heading-weight,600));
  font-size:clamp(15.5px,4.4vw,19px);line-height:1.44;letter-spacing:-.018em;color:inherit}
.ptl__quote::before{content:"“"}
.ptl__quote::after{content:"”"}
.ptl__author{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:13px;font-size:12.5px;color:var(--ptl-soft)}
.ptl__author strong{font-weight:600;color:inherit}
.ptl__badge{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ptl-ink-ac,#8A5F44);
  border:1px solid currentColor;border-radius:999px;padding:4px 9px}

.ptl__closing{margin:clamp(40px,9vw,76px) auto 0;max-width:20ch;text-align:center;
  font-size:clamp(1.5rem,6.2vw,2.8rem);line-height:1.18;letter-spacing:-.028em;color:inherit}

@media (min-width:880px){
  .ptl__strand{left:50%;width:120px;transform:translateX(-50%)}
  .ptl__items{gap:clamp(6px,1.6vw,18px)}
  .ptl__item{padding-left:0;width:calc(50% - 46px)}
  .ptl__item:nth-child(odd){margin-right:auto;text-align:right}
  .ptl__item:nth-child(even){margin-left:auto}
  .ptl__item:nth-child(odd) .ptl__node{left:auto;right:-53px}
  .ptl__item:nth-child(even) .ptl__node{left:-53px}
  .ptl__item:nth-child(odd) .ptl__top{flex-direction:row-reverse}
  .ptl__item:nth-child(odd) .ptl__author{justify-content:flex-end}
  .ptl__card{padding:24px 26px}
  .ptl__quote{font-size:19px}
}

}

/* ---- botón final con destellos ---- */
.pcta__wish-wrap{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;margin-top:10px;width:100%}
.pcta .pcta__wish{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:64px;padding:0 clamp(28px,7vw,52px);border-radius:999px;overflow:visible;
  font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,500);
  font-size:clamp(16px,4.4vw,21px);letter-spacing:-.015em;text-align:center;
  background:var(--pcta-btn-bg,#2B211B);color:var(--pcta-btn-fg,#F4EEE7);
  box-shadow:0 18px 44px -20px rgba(43,33,27,.6),0 0 0 0 var(--pcta-accent,#C09A7E);
  animation:plWishPulse 3.4s ease-in-out infinite;
  transition:transform .4s var(--pl-ease),box-shadow .4s var(--pl-ease)}
.pcta__wish:hover{transform:translateY(-3px) scale(1.02)}
.pcta__wish:active{transform:scale(.98)}
.pcta__wish svg{flex:0 0 auto;transition:transform .4s var(--pl-ease)}
.pcta__wish:hover svg{transform:translateX(6px)}
.pcta__wish-txt{position:relative;z-index:2}
@keyframes plWishPulse{
  0%,100%{box-shadow:0 18px 44px -20px rgba(43,33,27,.6),0 0 0 0 rgba(192,154,126,.55)}
  50%{box-shadow:0 18px 44px -20px rgba(43,33,27,.6),0 0 0 14px rgba(192,154,126,0)}
}
/* brillo que cruza */
.pcta__wish::after{content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%);
  background-size:260% 100%;background-repeat:no-repeat;animation:plShine 4.5s ease-in-out 1s infinite}
/* destellos alrededor */
.pcta__wish-sparks{position:absolute;inset:-26px -30px;z-index:1;pointer-events:none}
.pcta__wish-sparks i{position:absolute;width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:var(--pcta-accent,#C09A7E);box-shadow:0 0 10px var(--pcta-accent,#C09A7E);opacity:0;
  animation:plWishSpark 2.8s ease-in-out var(--dl,0s) infinite}
@keyframes plWishSpark{
  0%{opacity:0;transform:scale(.3) translateY(6px)}
  30%{opacity:1;transform:scale(1) translateY(0)}
  60%{opacity:.7;transform:scale(.85) translateY(-6px)}
  100%{opacity:0;transform:scale(.3) translateY(-14px)}
}
.pcta__wish-note{font-size:12px;letter-spacing:.06em;color:var(--pcta-soft,rgba(43,33,27,.7))}

/* ==========================================================================
   CIERRE · el símbolo se vuelve a unir
   ========================================================================== */
.pfin{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:center;
  padding:clamp(70px,14vw,130px) 0;background:var(--pfin-bg,#33261F);color:var(--pfin-text,#F6F1EA);overflow:clip}
.pfin__halo{position:absolute;left:50%;top:44%;width:min(150vw,1000px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;animation:plBreathe 9s ease-in-out infinite;
  background:radial-gradient(circle,var(--pfin-halo,rgba(231,205,182,.32)) 0%,transparent 64%)}
.pfin .pl-dots{--pl-dot:var(--pfin-accent,#E7CDB6)}
.pfin__inner{position:relative;z-index:1;display:grid;gap:clamp(14px,3.4vw,22px);justify-items:center;text-align:center}
.pfin .pl-eyebrow{color:var(--pl-on-soft,#E7CDB6)}
.pfin__title{font-size:clamp(2.1rem,9vw,4.8rem);max-width:14ch;color:inherit}
.pfin__sub{max-width:34ch;color:var(--pfin-soft)}

/* el símbolo se rearma: las dos "e" vuelven, la barra las une, el aro cierra */
.pfin__mark{width:min(46vw,190px);height:auto;overflow:visible;margin-bottom:clamp(6px,2vw,14px)}
.pfin__mark path,.pfin__mark circle{fill:none;stroke:var(--pfin-accent,#E7CDB6);stroke-width:7;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.pfin__eL,.pfin__eR,.pfin__bar{transform-box:fill-box;transform-origin:center}
.pl-js .pfin__mark .pfin__eL{transform:translateX(-128%) rotate(-14deg);opacity:0}
.pl-js .pfin__mark .pfin__eR{transform:translateX(128%) rotate(14deg);opacity:0}
.pl-js .pfin__mark .pfin__bar{transform:scaleX(0)}
.pl-js .pfin__mark .pfin__ring{opacity:0;transform:scale(1.9);transform-origin:50% 50%}
.pfin__mark[data-preveal-on] .pfin__eL,.pfin__mark[data-preveal-on] .pfin__eR{
  transform:none;opacity:.9;transition:transform 1.25s var(--pl-ease) .1s,opacity .9s var(--pl-ease) .1s}
.pfin__mark[data-preveal-on] .pfin__bar{transform:scaleX(1);transition:transform .7s var(--pl-ease) 1.05s}
.pfin__mark[data-preveal-on] .pfin__ring{opacity:.5;transform:scale(1);
  transition:opacity 1.1s var(--pl-ease) 1.3s,transform 1.1s var(--pl-ease) 1.3s}

/* botón con destellos */
.pfin__cta{display:grid;justify-items:center;gap:13px;margin-top:clamp(8px,2vw,16px)}
.pfin .pfin__wish{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:66px;padding:0 clamp(28px,7vw,54px);border-radius:999px;
  font-family:var(--pl-display,var(--font-heading-family,inherit));font-weight:var(--pl-display-weight,500);
  font-size:clamp(16px,4.4vw,21px);letter-spacing:-.015em;text-align:center;
  background:var(--pfin-btn-bg,#F6F1EA);color:var(--pfin-btn-fg,#33261F);
  animation:plWishPulse 3.4s ease-in-out infinite;
  transition:transform .4s var(--pl-ease)}
.pfin__wish:hover{transform:translateY(-3px) scale(1.02)}
.pfin__wish:active{transform:scale(.98)}
.pfin__wish svg{flex:0 0 auto;transition:transform .4s var(--pl-ease)}
.pfin__wish:hover svg{transform:translateX(6px)}
.pfin__wish-txt{position:relative;z-index:2}
.pfin__wish::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  background-size:260% 100%;background-repeat:no-repeat;animation:plShine 4.5s ease-in-out 1s infinite}
.pfin__sparks{position:absolute;inset:-28px -32px;z-index:1;pointer-events:none}
.pfin__sparks i{position:absolute;width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:var(--pfin-accent,#E7CDB6);box-shadow:0 0 11px var(--pfin-accent,#E7CDB6);opacity:0;
  animation:plWishSpark 2.8s ease-in-out var(--dl,0s) infinite}
.pfin__note{font-size:12px;letter-spacing:.06em;color:var(--pfin-soft)}

.pfin__trust{list-style:none;margin:clamp(16px,4vw,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 22px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pfin-soft)}
.pfin__trust li{display:flex;align-items:center;gap:8px}
.pfin__trust li span{width:6px;height:6px;border-radius:50%;background:var(--pfin-accent,#E7CDB6);flex:0 0 auto}

/* ==========================================================================
   HERO DIVIDIDO · la foto en su propio bloque, nunca se recorta mal
   ========================================================================== */
.plh--split{display:block;min-height:0;align-items:stretch;
  padding:clamp(26px,6vw,64px) 0 clamp(42px,9vw,92px);
  background:var(--plh-bg,#fff);color:var(--plh-text,#2B211B)}
.plh--split .plh__grid{position:relative;z-index:2;display:grid;gap:clamp(22px,5vw,40px);align-items:center;width:100%}
.plh--split .plh__shot{order:-1;position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;
  background:var(--pl-bg-deep,#EDE3D8);box-shadow:0 34px 70px -40px rgba(43,33,27,.45)}
.plh--split .plh__shot img{width:100%;height:100%;object-fit:cover;object-position:var(--plh-pos,center);
  animation:plKen 24s ease-in-out infinite alternate}
.plh--split .plh__copy{display:grid;justify-items:start;text-align:left}
.plh--split .plh__title{color:var(--plh-text,#2B211B);font-size:clamp(2.3rem,9.4vw,4.4rem);
  max-width:13ch;text-shadow:none}
.plh--split .plh__title em{color:var(--plh-ink-ac,#8A5F44)}
.plh--split .plh__eyebrow{color:var(--pl-on-soft,#7A6A5D)}
.plh--split .plh__eyebrow::before{background:var(--plh-accent,#C9A08F)}
.plh--split .plh__sub{color:var(--pl-on-soft,#7A6A5D);text-shadow:none;max-width:34ch}
.plh--split .plh__cue{position:static;transform:none;margin:22px auto 0;color:var(--pl-on-soft,#7A6A5D)}
.plh--split .plh__cue span{background:linear-gradient(180deg,currentColor,transparent)}
.plh--split .pl-dots{--pl-dot:var(--plh-accent,#C9A08F)}
@media (min-width:900px){
  .plh--split .plh__grid{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px)}
  .plh--split .plh__shot{order:0}
  .plh--split .plh__title{font-size:clamp(2.9rem,4.8vw,4.4rem)}
}

/* ==========================================================================
   RESEÑAS · una por pantalla, con el mechón bajando al lado
   ========================================================================== */
.ptl__track{position:relative;height:var(--ptl-h,600vh)}
.ptl__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(16px,3.4vh,30px);
  padding:clamp(74px,12vh,116px) var(--pl-pad) clamp(54px,9vh,86px);overflow:hidden}
.ptl__deck{position:relative;z-index:2;width:100%;max-width:620px;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;min-height:clamp(290px,44vh,410px)}
.ptl__stage.is-live .ptl__rev{position:absolute;left:0;right:0;top:50%;opacity:0;will-change:opacity,transform}
.ptl__stage:not(.is-live) .ptl__deck{display:grid;gap:18px;min-height:0}
.ptl__rev{width:100%;display:grid;gap:14px;justify-items:center;text-align:center;
  padding:clamp(26px,6vw,44px) clamp(20px,5vw,40px);border-radius:26px;
  background:var(--ptl-card,#FFFFFF);border:1px solid var(--ptl-border,rgba(201,160,143,.3));
  box-shadow:0 34px 76px -46px rgba(43,33,27,.5)}
.ptl__rev .ptl__face{width:clamp(58px,15vw,78px);height:clamp(58px,15vw,78px)}
.ptl__rev .ptl__stars{font-size:17px;letter-spacing:.16em;color:var(--ptl-ink-ac,#8A5F44)}
.ptl__rev .ptl__quote{font-size:clamp(1.15rem,5vw,1.9rem);line-height:1.34;max-width:22ch}
.ptl__rev .ptl__author{justify-content:center;margin-top:4px}
.ptl__rail{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ptl__rail i{display:block;width:7px;height:7px;border-radius:50%;background:var(--ptl-accent,#C9A08F);
  opacity:.28;transition:opacity .35s var(--pl-ease),transform .35s var(--pl-ease)}
.ptl__rail i.is-on{opacity:1;transform:scale(1.6)}
/* el mechón cruza toda la escena, de fondo */
.ptl .ptl__strand{left:50%;width:min(86vw,620px);transform:translateX(-50%);opacity:.6}
@media (min-width:880px){ .ptl__deck{max-width:740px} .ptl .ptl__strand{width:min(56vw,760px)} }

/* ondulación más marcada: las curvas suben y bajan de verdad */
@keyframes plWave{
  0%{transform:translate3d(0,-4.2%,0) scaleY(1.06) skewX(0deg)}
  22%{transform:translate3d(2.6%,2.2%,0) scaleY(.95) skewX(2.1deg)}
  48%{transform:translate3d(-2.2%,5.4%,0) scaleY(1.08) skewX(-1.9deg)}
  74%{transform:translate3d(2.2%,-2.6%,0) scaleY(.94) skewX(1.6deg)}
  100%{transform:translate3d(0,-4.2%,0) scaleY(1.06) skewX(0deg)}
}

/* ---- las curvas se dibujan con el scroll cuando llevan pl-hair--draw ---- */
.pl-hair--draw{clip-path:inset(0 0 calc((1 - var(--ptl-draw,1)) * 100%) 0)}
.pl-hair path{stroke-width:1.2}

/* ==========================================================================
   BOTÓN DEL CIERRE · movimiento de verdad, no solo la sombra
   ========================================================================== */
.pfin .pfin__wish{
  background:linear-gradient(115deg,var(--pfin-btn-bg,#2B211B) 0%,var(--pfin-btn-bg2,#4A3A2F) 48%,var(--pfin-btn-bg,#2B211B) 100%);
  background-size:230% 100%;
  animation:plWishPulse 3.2s ease-in-out infinite,
            plWishFloat 4.4s ease-in-out infinite,
            plWishBg 7s linear infinite;
  transition:box-shadow .4s var(--pl-ease),filter .4s var(--pl-ease),scale .35s var(--pl-ease)}
/* scale va como propiedad aparte para que no pelee con el transform del flote */
.pfin .pfin__wish:hover{scale:1.035;filter:brightness(1.1)}
.pfin .pfin__wish:active{scale:.98}
@keyframes plWishFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.022)}}
@keyframes plWishBg{0%{background-position:0% 0}100%{background-position:230% 0}}

/* doble onda expansiva */
@keyframes plWishPulse{
  0%{box-shadow:0 20px 46px -22px rgba(43,33,27,.55),0 0 0 0 var(--pfin-ring,rgba(201,160,143,.75)),0 0 0 0 var(--pfin-ring,rgba(201,160,143,.4))}
  50%{box-shadow:0 20px 46px -22px rgba(43,33,27,.55),0 0 0 15px rgba(201,160,143,0),0 0 0 7px var(--pfin-ring2,rgba(201,160,143,.3))}
  100%{box-shadow:0 20px 46px -22px rgba(43,33,27,.55),0 0 0 26px rgba(201,160,143,0),0 0 0 34px rgba(201,160,143,0)}
}

/* brillo más marcado y más seguido */
.pfin__wish::after{background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.62) 50%,transparent 64%);
  background-size:250% 100%;animation:plShine 3.2s ease-in-out .6s infinite}

/* la flecha se mueve sola */
.pfin__wish svg{animation:plArrow 2.1s ease-in-out infinite}
.pfin__wish:hover svg{transform:none}
@keyframes plArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* chispas visibles sobre blanco Y sobre el botón oscuro:
   núcleo crema con aro tostado */
.pfin__sparks{inset:-34px -38px}
.pfin__sparks i{width:var(--s,5px);height:var(--s,5px);
  background:#FFF3E8;
  box-shadow:0 0 0 1px var(--pfin-ink-ac,#8A5F44),0 0 12px var(--pfin-accent,#C9A08F);
  animation:plWishSpark 2.4s ease-in-out var(--dl,0s) infinite}
@keyframes plWishSpark{
  0%{opacity:0;transform:scale(.25) translateY(8px)}
  25%{opacity:1;transform:scale(1.15) translateY(0)}
  55%{opacity:.85;transform:scale(.9) translateY(-7px)}
  100%{opacity:0;transform:scale(.25) translateY(-18px)}
}

/* ---- puntos visibles sobre blanco: halo + aro fino ---- */
.pl-dots i{box-shadow:0 0 12px var(--pl-dot,#C9A08F),0 0 0 1px rgba(43,33,27,.10)}

/* ---- la sombra del botón ya no se corta a los lados ----
   El anillo se expandía más de lo que cabía en la sección, y `overflow:clip`
   lo recortaba en horizontal. Se le deja aire al botón y el anillo se achica
   en pantallas angostas. */
.pfin{overflow-clip-margin:44px}
.pfin__cta{padding-inline:clamp(40px,11vw,60px)}
.pfin .pfin__wish{--ring-a:20px;--ring-b:26px}
@media (min-width:640px){ .pfin .pfin__wish{--ring-a:26px;--ring-b:34px} }
@keyframes plWishPulse{
  0%{box-shadow:0 20px 46px -22px rgba(43,33,27,.55),0 0 0 0 var(--pfin-ring,rgba(201,160,143,.75)),0 0 0 0 var(--pfin-ring,rgba(201,160,143,.4))}
  50%{box-shadow:0 20px 46px -22px rgba(43,33,27,.55),0 0 0 var(--ring-a,20px) rgba(201,160,143,0),0 0 0 7px var(--pfin-ring2,rgba(201,160,143,.3))}
  100%{box-shadow:0 20px 46px -22px rgba(43,33,27,.55),0 0 0 var(--ring-b,26px) rgba(201,160,143,0),0 0 0 calc(var(--ring-b,26px) + 8px) rgba(201,160,143,0)}
}
.pfin__sparks{inset:-26px -30px}

/* ==========================================================================
   AMBIENTE PREMIUM · aurora difuminada + arcos que giran + grano de película
   Todo CSS puro; va detrás del contenido y no intercepta el puntero.
   ========================================================================== */
.pl-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --pl-deco-c:#C9A08F;--pl-deco-i:1;
  -webkit-mask-image:radial-gradient(116% 104% at 50% 46%,#000 38%,transparent 100%);
          mask-image:radial-gradient(116% 104% at 50% 46%,#000 38%,transparent 100%)}

.pl-deco__aurora{position:absolute;inset:-20%;filter:blur(62px);opacity:calc(.52 * var(--pl-deco-i))}
.pl-deco__blob{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--pl-deco-c) 0%,transparent 70%)}
.pl-deco__blob--1{width:52%;aspect-ratio:1;left:-8%;top:-4%;opacity:.55;animation:plDrift1 26s ease-in-out infinite}
.pl-deco__blob--2{width:44%;aspect-ratio:1;right:-6%;top:12%;opacity:.44;animation:plDrift2 33s ease-in-out infinite}
.pl-deco__blob--3{width:58%;aspect-ratio:1;left:14%;bottom:-16%;opacity:.4;animation:plDrift3 39s ease-in-out infinite}
.pl-deco__blob--4{width:34%;aspect-ratio:1;right:16%;bottom:2%;opacity:.5;animation:plDrift2 29s ease-in-out -13s infinite}
@keyframes plDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,5%,0) scale(1.16)}}
@keyframes plDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(-8%,7%,0) scale(.9)}}
@keyframes plDrift3{0%,100%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(5%,-6%,0) scale(1.2)}}

/* arcos concéntricos: medio borde visible para que el giro se note */
.pl-deco__arcs{position:absolute;inset:0}
.pl-deco__arcs span{position:absolute;left:50%;top:50%;width:var(--w,60%);aspect-ratio:1;
  border-radius:50%;border:1px solid transparent;border-top-color:var(--pl-deco-c);
  border-right-color:var(--pl-deco-c);opacity:calc(.3 * var(--pl-deco-i));
  animation:plArcSpin var(--t,42s) linear infinite}
.pl-deco__arcs span:nth-child(even){animation-direction:reverse;opacity:calc(.19 * var(--pl-deco-i))}
@keyframes plArcSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

/* grano de película: textura fina, nunca ensucia el blanco */
.pl-deco__grain{position:absolute;inset:-60px;opacity:calc(.17 * var(--pl-deco-i));
  mix-blend-mode:multiply;background-repeat:repeat;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:plGrain 7s steps(5) infinite}
@keyframes plGrain{
  0%{transform:translate3d(0,0,0)}     20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)} 60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)}  100%{transform:translate3d(0,0,0)}
}
/* el contenido de cada sección siempre por encima del ambiente */
.pl>.pl-wrap,.pl__inner,.psym__inner,.pgal__inner,.ptl__inner,.pfin__inner{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .pl-deco__blob,.pl-deco__arcs span,.pl-deco__grain{animation:none}
}

/* ==========================================================================
   CIERRE · el símbolo late en bucle y la sección respira en vertical
   ========================================================================== */
/* margen de recorte generoso: el halo del botón no se corta por ningún lado */
.pfin{overflow-clip-margin:130px}
/* el aire del botón vive en el flujo, no depende del recorte del padre */
.pfin__cta{margin-top:0;padding:clamp(26px,6.5vw,46px) clamp(40px,11vw,60px)}

/* el «ee» se rearma en bucle infinito y nunca sale del lienzo */
.pfin__mark{width:min(48vw,200px);overflow:visible}
.pl-js .pfin__mark .pfin__eL,.pl-js .pfin__mark .pfin__eR,
.pl-js .pfin__mark .pfin__bar,.pl-js .pfin__mark .pfin__ring{transform:none;opacity:1}
.pfin__mark .pfin__eL{animation:plFinL 9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) infinite}
.pfin__mark .pfin__eR{animation:plFinR 9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) infinite}
.pfin__mark .pfin__bar{animation:plFinBar 9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) infinite}
.pfin__mark .pfin__ring{animation:plFinRing 9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) infinite}
.pfin__mark[data-preveal-on] .pfin__eL,.pfin__mark[data-preveal-on] .pfin__eR,
.pfin__mark[data-preveal-on] .pfin__bar,.pfin__mark[data-preveal-on] .pfin__ring{transition:none}
@keyframes plFinL{
  0%{transform:translateX(-58%) rotate(-11deg);opacity:0}
  20%,70%{transform:none;opacity:.9}
  90%,100%{transform:translateX(-58%) rotate(-11deg);opacity:0}
}
@keyframes plFinR{
  0%{transform:translateX(58%) rotate(11deg);opacity:0}
  20%,70%{transform:none;opacity:.9}
  90%,100%{transform:translateX(58%) rotate(11deg);opacity:0}
}
@keyframes plFinBar{
  0%,13%{transform:scaleX(0);opacity:0}
  30%,70%{transform:scaleX(1);opacity:.9}
  86%,100%{transform:scaleX(0);opacity:0}
}
@keyframes plFinRing{
  0%,24%{opacity:0;transform:scale(1.45)}
  44%,70%{opacity:.5;transform:scale(1)}
  88%,100%{opacity:0;transform:scale(1.45)}
}
@media (prefers-reduced-motion:reduce){
  .pfin__mark .pfin__eL,.pfin__mark .pfin__eR,
  .pfin__mark .pfin__bar,.pfin__mark .pfin__ring{animation:none;opacity:.9}
}

/* en PC la sección se estira hacia abajo, no a lo ancho */
@media (min-width:900px){
  .pfin{min-height:100vh;min-height:100svh;padding-block:clamp(96px,10vw,150px)}
  .pfin__inner{max-width:660px;margin-inline:auto;gap:clamp(20px,2.2vw,30px)}
  .pfin__title{max-width:11ch;font-size:clamp(3rem,4.4vw,4.3rem)}
  .pfin__sub{max-width:27ch;font-size:clamp(1rem,1.15vw,1.15rem)}
  .pfin__mark{width:206px}
  .pfin__trust{max-width:430px;gap:12px 20px}
  .pfin__halo{width:min(88vw,760px);top:40%}
}

/* móvil: el mismo ambiente, la mitad del coste (blur más corto, grano quieto,
   un blob menos y la cola de puntos fuera) */
@media (max-width:767px){
  .pl-deco__aurora{filter:blur(40px)}
  .pl-deco__blob--4{display:none}
  .pl-deco__grain{animation:none;opacity:calc(.12 * var(--pl-deco-i))}
  .pl-deco__arcs span:nth-child(n+4){display:none}
}

/* ==========================================================================
   HORIZONTE CURVO · arco gigante + resplandor + máscara radial
   Adaptado a fondo claro: el arco es crema y la línea del borde es el acento.
   ========================================================================== */
.pl-horiz{position:absolute;left:50%;bottom:0;z-index:0;pointer-events:none;
  width:min(100%,1680px);height:var(--pl-horiz-h,320px);transform:translateX(-50%);
  overflow:hidden;
  -webkit-mask-image:radial-gradient(62% 78% at 50% 100%,#000 12%,transparent 80%);
          mask-image:radial-gradient(62% 78% at 50% 100%,#000 12%,transparent 80%)}

/* el resplandor que sube desde el centro de la base */
.pl-horiz__glow{position:absolute;inset:0;display:block;
  background:radial-gradient(circle at bottom center,var(--pl-horiz-c,#C9A08F),transparent 74%);
  opacity:calc(.4 * var(--pl-horiz-i))}

/* el arco: 200% de ancho y medio fuera, así solo se ve su curva superior */
.pl-horiz__arc{position:absolute;left:-50%;top:54%;display:block;
  width:200%;aspect-ratio:1 / .7;border-radius:10%;
  background:linear-gradient(to bottom,#FFFCFA 0%,#FFFFFF 42%)}

/* la línea del horizonte, encendida */
.pl-horiz__line{position:absolute;left:-50%;top:54%;display:block;
  width:200%;aspect-ratio:1 / .7;border-radius:10%;
  border-top:1.5px solid var(--pl-horiz-c,#C9A08F);
  opacity:calc(.85 * var(--pl-horiz-i));
  box-shadow:0 -2px 30px -4px var(--pl-horiz-c,#C9A08F);
  animation:plHorizPulse 7s ease-in-out infinite}
@keyframes plHorizPulse{
  0%,100%{opacity:calc(.62 * var(--pl-horiz-i))}
  50%{opacity:calc(.95 * var(--pl-horiz-i))}
}
@media (prefers-reduced-motion:reduce){ .pl-horiz__line{animation:none} }

/* el cierre: el horizonte manda abajo, así que la aurora se retira de esa zona */
.pfin .pl-deco__aurora{-webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 52%,transparent 92%)}

/* ==========================================================================
   CAJA DE EFECTOS · meteoros, rayos, destellos, rejilla, anillos y gotas
   Todo CSS puro, detrás del contenido, sin interceptar el puntero.
   ========================================================================== */
.pl-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --pl-fx-c:#C9A08F;--pl-fx-i:1}

/* — rejilla finísima, recortada con máscara radial para que no llegue a los bordes */
.pl-fx__grid{position:absolute;inset:0;opacity:calc(.5 * var(--pl-fx-i));
  background-image:linear-gradient(to right,var(--pl-fx-c) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--pl-fx-c) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 46%,#000 0%,transparent 76%);
          mask-image:radial-gradient(58% 58% at 50% 46%,#000 0%,transparent 76%)}

/* — haces de luz: dos conos que giran muy despacio en sentidos opuestos */
.pl-fx__rays{position:absolute;left:50%;top:-40%;width:170%;aspect-ratio:1;
  transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(52% 52% at 50% 30%,#000 0%,transparent 72%);
          mask-image:radial-gradient(52% 52% at 50% 30%,#000 0%,transparent 72%)}
.pl-fx__rays span{position:absolute;inset:0;display:block;border-radius:50%;
  opacity:calc(.3 * var(--pl-fx-i));
  background:conic-gradient(from 0deg,transparent 0deg,var(--pl-fx-c) 4deg,transparent 12deg,
    transparent 40deg,var(--pl-fx-c) 45deg,transparent 56deg,transparent 100deg,
    var(--pl-fx-c) 104deg,transparent 116deg,transparent 180deg,
    var(--pl-fx-c) 186deg,transparent 198deg,transparent 260deg,
    var(--pl-fx-c) 265deg,transparent 276deg,transparent 360deg);
  animation:plRays 58s linear infinite}
.pl-fx__rays span:nth-child(2){animation-duration:86s;animation-direction:reverse;
  opacity:calc(.18 * var(--pl-fx-i));filter:blur(3px)}
@keyframes plRays{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* — anillos que se expanden desde el centro, como una onda en el agua */
.pl-fx__rings{position:absolute;left:50%;top:50%;width:0;height:0}
.pl-fx__rings span{position:absolute;left:0;top:0;display:block;
  width:min(62vw,540px);aspect-ratio:1;margin:calc(min(62vw,540px) / -2);
  border-radius:50%;border:1px solid var(--pl-fx-c);opacity:0;
  animation:plRingOut 8s ease-out var(--dl,0s) infinite}
@keyframes plRingOut{
  0%{opacity:0;transform:scale(.18)}
  16%{opacity:calc(.5 * var(--pl-fx-i))}
  100%{opacity:0;transform:scale(1.5)}
}

/* — meteoros: cabeza brillante y cola en degradado, en diagonal */
.pl-fx__meteors{position:absolute;inset:-10% -20%}
.pl-fx__meteors i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--pl-fx-c);box-shadow:0 0 0 1px rgba(201,160,143,.22),0 0 14px var(--pl-fx-c);
  opacity:0;transform:rotate(-38deg);
  animation:plMeteor var(--du,5s) cubic-bezier(.2,.5,.4,1) var(--dl,0s) infinite}
.pl-fx__meteors i::before{content:"";position:absolute;top:50%;right:2px;
  width:var(--len,120px);height:1.5px;transform:translateY(-50%);border-radius:2px;
  background:linear-gradient(to left,var(--pl-fx-c),transparent)}
@keyframes plMeteor{
  0%{opacity:0;transform:rotate(-38deg) translate3d(0,0,0) scale(.6)}
  8%{opacity:calc(.9 * var(--pl-fx-i))}
  62%{opacity:calc(.55 * var(--pl-fx-i))}
  100%{opacity:0;transform:rotate(-38deg) translate3d(340px,0,0) scale(.9)}
}

/* — destellos de cuatro puntas: titilan y giran, el gesto clásico de belleza */
.pl-fx__stars svg{position:absolute;width:var(--sz,14px);height:var(--sz,14px);
  fill:var(--pl-fx-c);opacity:0;transform-origin:50% 50%;
  filter:drop-shadow(0 0 6px var(--pl-fx-c));
  animation:plStarTwinkle var(--du,7s) ease-in-out var(--dl,0s) infinite}
@keyframes plStarTwinkle{
  0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}
  14%{opacity:calc(.95 * var(--pl-fx-i));transform:scale(1) rotate(35deg)}
  30%{opacity:calc(.35 * var(--pl-fx-i));transform:scale(.72) rotate(70deg)}
  46%{opacity:calc(.85 * var(--pl-fx-i));transform:scale(1.06) rotate(110deg)}
  70%{opacity:calc(.2 * var(--pl-fx-i));transform:scale(.6) rotate(160deg)}
}

/* — gotas de sérum: flotan, giran y llevan su propio reflejo */
.pl-fx__drops i{position:absolute;width:var(--sz,16px);height:var(--sz,16px);
  border-radius:52% 48% 46% 54% / 48% 44% 56% 52%;opacity:0;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.92) 0%,
    var(--pl-fx-c) 46%,rgba(201,160,143,.42) 100%);
  box-shadow:inset 0 -2px 6px rgba(255,255,255,.55),0 3px 12px -3px var(--pl-fx-c);
  animation:plDropFloat var(--du,13s) ease-in-out var(--dl,0s) infinite}
@keyframes plDropFloat{
  0%{opacity:0;transform:translate3d(0,26px,0) rotate(0deg) scale(.7)}
  18%{opacity:calc(.72 * var(--pl-fx-i))}
  50%{opacity:calc(.6 * var(--pl-fx-i));transform:translate3d(14px,-18px,0) rotate(170deg) scale(1)}
  82%{opacity:calc(.5 * var(--pl-fx-i))}
  100%{opacity:0;transform:translate3d(-8px,-52px,0) rotate(340deg) scale(.78)}
}

/* móvil: los efectos caros se recortan, no se apagan */
@media (max-width:767px){
  .pl-fx__rays span:nth-child(2){display:none}
  .pl-fx__grid{background-size:54px 54px;opacity:calc(.34 * var(--pl-fx-i))}
  .pl-fx__meteors i:nth-child(n+4){display:none}
  .pl-fx__stars svg:nth-child(n+7){display:none}
  .pl-fx__drops i:nth-child(n+5){display:none}
  .pl-fx__rings span:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .pl-fx__rays span,.pl-fx__rings span,.pl-fx__meteors i,
  .pl-fx__stars svg,.pl-fx__drops i{animation:none}
  .pl-fx__stars svg{opacity:.5;transform:scale(1)}
}

/* ==========================================================================
   DOS REMATES MÁS · haz girando en el borde del botón y degradado en el título
   ========================================================================== */
@property --pl-beam{syntax:'<angle>';inherits:false;initial-value:0deg}

.pfin .pfin__wish{isolation:isolate}
.pfin__wish::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  pointer-events:none;
  background:conic-gradient(from var(--pl-beam),transparent 0deg,var(--pfin-accent,#C9A08F) 24deg,
    #FFF6EE 33deg,var(--pfin-accent,#C9A08F) 42deg,transparent 72deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:plBeamSpin 3.6s linear infinite}
@keyframes plBeamSpin{to{--pl-beam:360deg}}

/* el título del cierre con degradado que respira (la idea del bg-clip-text) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pfin__title .pl-word > i{
    background:linear-gradient(180deg,var(--pfin-text,#2B211B) 0%,var(--pfin-ink-ac,#8A5F44) 96%);
    background-size:100% 240%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:plTitleGrad 9s ease-in-out infinite}
  @keyframes plTitleGrad{
    0%,100%{background-position:50% 0%}
    50%{background-position:50% 100%}
  }
}
@media (prefers-reduced-motion:reduce){
  .pfin__wish::before,.pfin__title .pl-word > i{animation:none}
}

/* ==========================================================================
   HERO · reglas del plan 2.0: nada del hero espera al JavaScript.
   La imagen LCP nunca se oculta y los textos entran con animación CSS propia,
   no con el gate de opacity:0 + clase .pl-js (si el JS tarda, ya están ahí).
   ========================================================================== */
/* sirve para los dos layouts (overlay y split); a .plh__media solo se le
   devuelve la opacidad, nunca el transform, porque ahí vive el parallax */
.pl-js .plh .plh__media{opacity:1;animation:none}
.pl-js .plh .plh__shot{opacity:1;transform:none;animation:none}

.pl-js .plh [data-preveal]:not(.pl-words):not(.plh__shot){
  opacity:1;transform:none;
  animation:plHeroIn .62s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--d,0s) both}
@keyframes plHeroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* el título sigue revelándose por palabras, pero corto y sin esperar al JS:
   solo mueve transform, así el texto se pinta desde el primer frame */
.pl-js .plh .plh__title .pl-word > i{
  transition:none;
  animation:plHeroWord .55s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--dw,0s) both}
@keyframes plHeroWord{from{transform:translateY(112%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .pl-js .plh [data-preveal],
  .pl-js .plh .plh__title .pl-word > i{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   POR NECESIDAD · tres puertas de entrada; se elige por el problema, no por SKU
   ========================================================================== */
.pcon{position:relative;padding:clamp(56px,11vw,110px) 0;overflow:clip;
  background:var(--pcon-bg,#fff);color:var(--pcon-text,#2B211B)}
.pcon__inner{position:relative;z-index:1;display:grid;gap:clamp(12px,2.6vw,18px);justify-items:center;text-align:center}
.pcon__title{font-size:clamp(1.9rem,7.4vw,3.5rem);max-width:17ch;color:inherit}
.pcon__sub{max-width:36ch;color:var(--pcon-soft)}
.pcon .pl-dots{--pl-dot:var(--pcon-accent,#C9A08F)}

.pcon__grid{list-style:none;margin:clamp(22px,5vw,40px) 0 0;padding:0;width:100%;
  display:grid;gap:clamp(14px,2.6vw,22px);grid-template-columns:1fr}
@media (min-width:760px){ .pcon__grid{grid-template-columns:repeat(3,1fr)} }
.pcon__grid:has(li:nth-child(4)){grid-template-columns:1fr}
@media (min-width:760px){ .pcon__grid:has(li:nth-child(4)){grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .pcon__grid:has(li:nth-child(4)){grid-template-columns:repeat(4,1fr)} }

.pcon__card{position:relative}
.pcon .pcon__link{position:relative;display:grid;gap:0;height:100%;text-align:left;
  border-radius:20px;overflow:hidden;color:inherit;text-decoration:none;
  background:#fff;box-shadow:0 1px 0 var(--pcon-line),0 18px 40px -30px rgba(43,33,27,.5);
  transition:transform .5s var(--pl-ease),box-shadow .5s var(--pl-ease)}
.pcon .pcon__link:hover{transform:translateY(-6px);
  box-shadow:0 1px 0 var(--pcon-accent),0 28px 54px -28px rgba(43,33,27,.42)}

.pcon__num{position:absolute;right:14px;top:12px;z-index:2;
  font-family:var(--pl-display,var(--font-heading-family,inherit));font-size:12px;
  letter-spacing:.14em;color:#fff;opacity:.78;mix-blend-mode:difference}
.pcon__media{display:block;position:relative;aspect-ratio:4 / 5;overflow:hidden;background:#F7F1EC}
.pcon__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--pl-ease)}
.pcon .pcon__link:hover .pcon__media img{transform:scale(1.05)}
.pcon__media--empty{background:
  radial-gradient(120% 90% at 30% 20%,var(--pcon-accent) 0%,transparent 62%),#F7F1EC}

.pcon__body{display:grid;gap:7px;padding:clamp(15px,2.4vw,20px)}
.pcon__tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pcon-ink-ac)}
.pcon__name{font-family:var(--pl-display,var(--font-heading-family,inherit));
  font-weight:var(--pl-display-weight,var(--font-heading-weight,400));
  font-size:clamp(1.12rem,2.4vw,1.34rem);line-height:1.16;letter-spacing:-.02em;color:inherit}
.pcon__text{font-size:14px;line-height:1.5;color:var(--pcon-soft)}
.pcon__go{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:12.5px;letter-spacing:.05em;color:var(--pcon-ink-ac)}
.pcon__go svg{transition:transform .4s var(--pl-ease)}
.pcon .pcon__link:hover .pcon__go svg{transform:translateX(5px)}

/* la línea del borde se enciende al pasar por encima */
.pcon__card::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  border:1px solid transparent;transition:border-color .5s var(--pl-ease)}
.pcon__card:hover::after{border-color:var(--pcon-line)}

/* ==========================================================================
   60 FPS · tres frentes
   a) nada se anima fuera de pantalla   b) se quitan los efectos que repintan
   c) escalones de calidad según los fps medidos (pleena-perf.js)
   Sin ese JS no hay clases .pl-perf/.pl-lowfx y todo queda como estaba.
   ========================================================================== */

/* — a) solo anima la sección que se está viendo ------------------------------ */
html.pl-perf .pl:not(.is-vis) .pl-deco__blob,
html.pl-perf .pl:not(.is-vis) .pl-deco__arcs span,
html.pl-perf .pl:not(.is-vis) .pl-deco__grain,
html.pl-perf .pl:not(.is-vis) .pl-dots i,
html.pl-perf .pl:not(.is-vis) .pl-fx__rays span,
html.pl-perf .pl:not(.is-vis) .pl-fx__rings span,
html.pl-perf .pl:not(.is-vis) .pl-fx__meteors i,
html.pl-perf .pl:not(.is-vis) .pl-fx__stars svg,
html.pl-perf .pl:not(.is-vis) .pl-fx__drops i,
html.pl-perf .pl:not(.is-vis) .pl-hair path,
html.pl-perf .pl:not(.is-vis) .pl-horiz__line,
html.pl-perf .pl:not(.is-vis) .pfin__halo,
html.pl-perf .pl:not(.is-vis) .pfin__mark path,
html.pl-perf .pl:not(.is-vis) .pfin__mark circle,
html.pl-perf .pl:not(.is-vis) .pfin__wish,
html.pl-perf .pl:not(.is-vis) .pfin__wish::before,
html.pl-perf .pl:not(.is-vis) .pfin__wish::after,
html.pl-perf .pl:not(.is-vis) .pfin__sparks i,
html.pl-perf .pl:not(.is-vis) .pcta__wish-sparks i{animation-play-state:paused}

/* — b) menos repintado por frame -------------------------------------------- */
/* el blur grande era lo más caro: se reduce a la mitad y desaparece en móvil.
   El radial-gradient ya cae suave por sí solo, el blur sólo lo redondeaba. */
.pl-deco__aurora{filter:blur(34px)}
@media (max-width:900px){ .pl-deco__aurora{filter:none} }

/* lo que solo gira se promueve a su propia capa: el gradiente se pinta UNA vez
   y a partir de ahí rotar no cuesta pintado, solo composición */
/* sin will-change permanente: 20 capas grandes promovidas a la vez gastan mas
   memoria de GPU de la que ahorran. El translateZ(0) del keyframe promueve la capa
   solo mientras la animacion corre, y con las pausas de arriba solo corre la
   seccion que se esta viendo. */
.pl-fx__rays span,.pl-deco__arcs span{transform:translateZ(0)}
@keyframes plRays{from{transform:translateZ(0) rotate(0)}to{transform:translateZ(0) rotate(360deg)}}
@keyframes plArcSpin{
  from{transform:translate(-50%,-50%) translateZ(0) rotate(0deg)}
  to{transform:translate(-50%,-50%) translateZ(0) rotate(360deg)}
}

/* el grano deja de animarse en todas partes: mover una textura con blend
   multiply cada 7s obligaba a recomponer la sección entera */
.pl-deco__grain{animation:none}

/* 46 drop-shadow animados a la vez no los aguanta ningún móvil */
.pl-fx__stars svg{filter:none}

/* — c) escalones de calidad ------------------------------------------------- */
/* nivel 1 · el aparato no llega a 52fps: fuera lo que más cuesta */
html.pl-lowfx .pl-deco__aurora{filter:none}
html.pl-lowfx .pl-deco__grain,
html.pl-lowfx .pl-fx__rays,
html.pl-lowfx .pl-fx__meteors,
html.pl-lowfx .pl-horiz__glow{display:none}
html.pl-lowfx .pl-deco__blob--3,
html.pl-lowfx .pl-deco__blob--4{display:none}
html.pl-lowfx .pl-deco__arcs span:nth-child(n+3){display:none}
html.pl-lowfx .pl-fx__stars svg:nth-child(n+6){display:none}
html.pl-lowfx .pl-fx__drops i:nth-child(n+4){display:none}
html.pl-lowfx .pl-fx__rings span:nth-child(n+2){display:none}
html.pl-lowfx .pl-hair{opacity:.5}
html.pl-lowfx .pl-sparks,
html.pl-lowfx .pl-sparks canvas{display:none}
html.pl-lowfx .pfin__wish::before{animation-duration:6s}

/* nivel 2 · aparato flojo o ahorro de datos: se queda el diseño, no el ambiente */
html.pl-minfx .pl-deco,
html.pl-minfx .pl-fx,
html.pl-minfx .pl-horiz__line{display:none}
html.pl-minfx .pl-hair{display:none}
html.pl-minfx .pfin__halo{animation:none}
/* el símbolo «ee» y el pulso del botón son la marca contándose, no decoración:
   no se apagan ni en el escalón más bajo. */

/* sin IntersectionObserver (navegador muy viejo) se va directo a lo sobrio */
html.pl-novis .pl-deco__grain,html.pl-novis .pl-fx__rays,
html.pl-novis .pl-fx__meteors{display:none}

/* ==========================================================================
   LOS PUNTOS SIEMPRE · Fernanda los quiere ver completos en cualquier aparato.
   No se recorta la CANTIDAD, se abarata el PINTADO: fuera el halo de sombra y
   el desenfoque, que es lo que cuesta. Mover 70 puntos con transform+opacity
   lo hace el compositor y es casi gratis; pintar 70 halos difuminados no.
   ========================================================================== */
html.pl-lowfx .pl-dots i,
html.pl-minfx .pl-dots i,
html.pl-novis .pl-dots i{box-shadow:none}
html.pl-lowfx .pl-dots i.is-soft,
html.pl-minfx .pl-dots i.is-soft,
html.pl-novis .pl-dots i.is-soft{filter:none}
@media (max-width:767px){ .pl-dots i{box-shadow:0 0 7px var(--pl-dot,#C9A08F)} }

/* ==========================================================================
   MÓVIL · 60 fps de verdad (probado contra un iPhone 13 que se trababa)
   En un teléfono se queda lo simple: los puntos, las fotos, los textos.
   Fuera todo lo que obliga a Safari a componer capas extra cada frame:
     · mask-image  → cada máscara es una capa de composición aparte y en iOS
                     es de lo más caro que hay
     · conic-gradient girando, blur, grano con blend, mask-composite
   Este bloque va al final a propósito: gana a todo lo anterior.
   ========================================================================== */
/* ==========================================================================
   MISMO COMPORTAMIENTO EN TELÉFONO Y EN PC (29-sep-2026, pedido de Fernanda)
   Las capas pesadas ya no se generan desde el Liquid; esto es el remate.
   Para recuperarlas: volver a poner los {% render 'pleena-deco' %},
   'pleena-fx', 'pleena-horizonte' y 'pleena-sparkles' en las secciones.
   ========================================================================== */
.pl-deco,.pl-fx,.pl-horiz,.pl-sparks{display:none !important}

/* los puntos se quedan, con halo corto: estático y barato, se pinta una vez */
.pl-dots{display:block}
.pl-dots i{box-shadow:0 0 7px var(--pl-dot,#C9A08F)}
.pl-dots i.is-soft{filter:none}

/* las hebras se dibujan pero ya no ondulan */
.pl-hair path{animation:none !important}

/* un radial-gradient grande con scale repinta cada frame: se queda quieto */
.pfin__halo{animation:none}

/* el aro giratorio del botón usa mask-composite, de lo más caro en Safari.
   El botón conserva su pulso y su destello. */
.pfin__wish::before{display:none}

/* el degradado de los bordes del carrusel también era una máscara */
.pgal__rail{-webkit-mask-image:none;mask-image:none}

@supports (-webkit-touch-callout:none){
  .pl-deco__aurora{filter:none}
  .pl-dots i.is-soft{filter:none}
}

/* ==========================================================================
   HERO · DOS PANELES CON PARALLAX  (rehecho: sobre un retrato el texto va ABAJO)
   El patrón de la referencia pone el título arriba, pero ahí la foto es un
   paisaje. Sobre una cara, el texto arriba tapa la frente y el de abajo el
   cuerpo. Aquí el texto se apoya en el borde inferior, sobre un velo que se
   oscurece hacia abajo, que es donde la foto tiene menos información.
   ========================================================================== */
.plh--panels{position:relative;display:block;padding:0;overflow:clip;
  background:var(--plh-bg,#fff);color:var(--plh-text,#2B211B)}

.plh__panels{position:relative;display:grid;grid-template-columns:1fr}
@media (min-width:860px){
  .plh__panels{grid-template-columns:1.05fr .95fr;min-height:clamp(600px,90svh,880px)}
}

.plh__panel{position:relative;overflow:hidden;display:flex;isolation:isolate}

/* el lienzo va más alto que el panel: ese sobrante es el recorrido del parallax */
.plh__panel-img{position:absolute;left:0;top:-12%;width:100%;height:124%;
  object-fit:cover;object-position:var(--plh-pos,center top);display:block}

/* velo: casi nada arriba, peso abajo, que es donde se apoya el texto */
.plh__panel-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(24,18,14,0) 0%,
    rgba(24,18,14,.06) 38%,
    rgba(24,18,14,.52) 78%,
    rgba(24,18,14,.82) 100%)}

/* — panel A: la foto, el texto apoyado abajo — */
.plh__panel--a{min-height:clamp(430px,62svh,620px)}
@media (min-width:860px){ .plh__panel--a{min-height:0} }
.plh__panel--a .plh__panel-in{justify-content:flex-end}

.plh__panel-in{position:relative;z-index:2;display:flex;flex-direction:column;
  width:100%;padding:clamp(24px,5.6vw,52px);color:#fff}

.plh__pk{margin:0 0 clamp(10px,1.6vw,14px);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  text-shadow:0 1px 4px rgba(22,18,15,.6)}
.plh .plh__pt{margin:0;color:#fff;font-size:clamp(2.3rem,8.6vw,4.4rem);line-height:1.02;
  letter-spacing:-.022em;max-width:15ch;
  text-shadow:0 1px 4px rgba(22,18,15,.45),0 2px 30px rgba(22,18,15,.55)}
.plh .plh__pt em{font-style:italic;font-weight:inherit}
.plh .plh__pt span{display:inline-block;font-size:.76em;opacity:.94}

/* — panel B: bloque con cuerpo propio, no una banda de color suelta — */
.plh__panel--b{background:var(--plh-accent,#C9A08F)}
.plh__panel--b:has(.plh__panel-img){background:none}
.plh__panel--b .plh__panel-veil{background:none}
.plh__panel--b:has(.plh__panel-img) .plh__panel-veil{
  background:linear-gradient(180deg,rgba(24,18,14,.34) 0%,rgba(24,18,14,.72) 100%)}

.plh__panel--b .plh__panel-in{justify-content:center;align-items:flex-start;
  gap:clamp(20px,3vw,30px);
  padding:clamp(38px,9vw,64px) clamp(24px,5.6vw,52px) clamp(44px,10vw,64px)}
.plh__pp{margin:0;max-width:30ch;font-size:clamp(1.06rem,4.6vw,1.34rem);line-height:1.46;
  color:#fff;font-weight:400}
.plh__panel--b:has(.plh__panel-img) .plh__pp{text-shadow:0 1px 4px rgba(22,18,15,.5)}
.plh__pcta .pl-btn{min-height:54px;padding-inline:clamp(28px,7vw,40px)}

/* los textos entran solos, sin esperar al JS (regla del plan 2.0) */
.plh--panels .plh__pt,.plh--panels .plh__pk,
.plh--panels .plh__pp,.plh--panels .plh__pcta{opacity:1;transform:none}
.pl-js .plh--panels .plh__pk{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .08s both}
.pl-js .plh--panels .plh__pt{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .18s both}
.pl-js .plh--panels .plh__pp{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .34s both}
.pl-js .plh--panels .plh__pcta{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .46s both}

/* el aviso de «desliza» estorba encima de la cara */
.plh--panels .plh__cue{display:none}

@media (prefers-reduced-motion:reduce){ .plh__panel-img{transform:none !important} }

/* ==========================================================================
   HERO DE PANELES · la entrada, ahora visible
   El ejemplo entra con translate3d(-20%,0,0) escalonado; 16px verticales no se
   veían. La foto además se asienta desde un zoom suave: se usa la propiedad
   individual `scale`, que COMPONE con el `transform` que GSAP escribe para el
   parallax (si se usara transform, uno pisaría al otro).
   ========================================================================== */
@keyframes plPanelIn{
  from{opacity:0;transform:translate3d(-19%,0,0)}
  to{opacity:1;transform:none}
}
@keyframes plPanelZoom{ from{scale:1.11} to{scale:1} }

.pl-js .plh--panels .plh__pk{animation:plPanelIn .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .25s both}
.pl-js .plh--panels .plh__pt{animation:plPanelIn .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .38s both}
.pl-js .plh--panels .plh__pp{animation:plPanelIn .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .62s both}
.pl-js .plh--panels .plh__pcta{animation:plPanelIn .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .8s both}

/* la palabra en cursiva llega un pelín después que el resto del titular */
.pl-js .plh--panels .plh__pt em{display:inline-block;
  animation:plPanelIn .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .5s both}

.pl-js .plh--panels .plh__panel-img{
  animation:plPanelZoom 1.9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) both}

/* el velo se abre de abajo hacia arriba mientras entra el texto */
.pl-js .plh--panels .plh__panel-veil{
  animation:plHeroIn 1.2s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .1s both}

/* estas son animaciones de ENTRADA, corren una vez: no deben quedar pausadas
   por la regla de visibilidad mientras el hero aún no se ha marcado */
html.pl-perf .plh:not(.is-vis) .plh__pk,
html.pl-perf .plh:not(.is-vis) .plh__pt,
html.pl-perf .plh:not(.is-vis) .plh__pt em,
html.pl-perf .plh:not(.is-vis) .plh__pp,
html.pl-perf .plh:not(.is-vis) .plh__pcta,
html.pl-perf .plh:not(.is-vis) .plh__panel-img,
html.pl-perf .plh:not(.is-vis) .plh__panel-veil{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  .pl-js .plh--panels .plh__pk,.pl-js .plh--panels .plh__pt,
  .pl-js .plh--panels .plh__pt em,.pl-js .plh--panels .plh__pp,
  .pl-js .plh--panels .plh__pcta,.pl-js .plh--panels .plh__panel-img,
  .pl-js .plh--panels .plh__panel-veil{animation:none;opacity:1;transform:none;scale:1}
}

/* ==========================================================================
   HERO · TITULAR LETRA A LETRA + SEPARACIÓN AL BAJAR
   Del hero de sofi.health: cada letra entra desde translateY(120%) con su
   propio retardo, y al bajar la foto y el texto se van en sentidos opuestos.
   Todo con el GSAP que ya está cargado; nada de SplitText ni ScrollSmoother.
   ========================================================================== */
/* La rotación 3D es lo que da el volumen: el contenedor abre una PERSPECTIVA y
   cada letra gira sobre su borde inferior (transform-origin:50% 100%), como una
   persiana que cae hacia quien mira. Sin la perspectiva del padre el rotateX se
   ve plano, y con overflow:hidden se recortaría la letra al girar: por eso aquí
   la caja es visible y el efecto lo cierra la opacidad. */
.plh__chars{display:block;perspective:760px;perspective-origin:50% 60%}
.plh__w{display:inline-block;vertical-align:bottom;transform-style:preserve-3d;
  padding-bottom:.14em;margin-bottom:-.14em}
.plh__w i{display:inline-block;font-style:inherit;transform-origin:50% 100%}
.plh__w--em i{font-style:italic}
.plh__w--sm{font-size:.76em;opacity:.94}

/* sin JS el título está simplemente ahí: nada espera al script */
.plh__w i{transform:none}
.pl-js .plh--panels .plh__w i{
  animation:plChar3D .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--d,0s) both}
@keyframes plChar3D{
  from{opacity:0;transform:translateY(74%) rotateX(-82deg)}
  55%{opacity:1}
  to{opacity:1;transform:translateY(0) rotateX(0deg)}
}

/* la foto entra con una inclinación mínima que se endereza, como la referencia */
.pl-js .plh--panels .plh__panel--a .plh__panel-img{
  animation:plPanelZoom 1.9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) both;
  rotate:-1.6deg}
@keyframes plTilt{ from{rotate:-2.4deg} to{rotate:-1.6deg} }

/* las entradas del título no se pausan por la regla de visibilidad */
html.pl-perf .plh:not(.is-vis) .plh__w i{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  .pl-js .plh--panels .plh__w i{animation:none;transform:none;opacity:1}
  .pl-js .plh--panels .plh__panel--a .plh__panel-img{rotate:0deg}
}

/* ==========================================================================
   HERO 3D · escena sticky (Pleena_Hero_3D_Liquid_Plan)
   La profundidad sale de `perspective` en la ESCENA (no en cada imagen) y de
   `transform-style:preserve-3d` en los paneles. El sticky no se transforma
   nunca: si lo hicieras, dejaría de comportarse como sticky.
   ========================================================================== */
.p3d{position:relative;height:var(--p3d-h,320vh);
  background-color:var(--p3d-start,#C9A08F);color:var(--p3d-ink,#fff)}
.p3d__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.p3d__scene{height:100%;display:grid;grid-template-columns:1fr;
  perspective:1400px;perspective-origin:50% 50%;transform-style:preserve-3d}
@media (min-width:860px){ .p3d__scene{grid-template-columns:1.08fr .92fr} }

.p3d__panel{position:relative;height:100%;transform-style:preserve-3d;
  backface-visibility:hidden}

/* la foto va sobredimensionada al 112%: así puede acercarse sin enseñar bordes */
.p3d__image,.p3d__fallback{position:absolute;inset:-6%;width:112%;height:112%;
  object-fit:cover;object-position:center 22%;display:block;will-change:transform}
.p3d__fallback{background:radial-gradient(120% 90% at 30% 20%,var(--p3d-mid) 0%,var(--p3d-start) 70%)}
.p3d__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,18,14,0) 0%,rgba(24,18,14,.08) 40%,
    rgba(24,18,14,.58) 82%,rgba(24,18,14,.86) 100%)}

.p3d__model-copy{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(24px,5.4vw,56px);display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(10px,1.6vw,16px)}
.p3d__eyebrow{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(22,18,15,.6)}

/* titular letra a letra: mismo mecanismo que el hero de paneles */
.p3d .p3d__title{margin:0;color:#fff;font-size:clamp(2.3rem,8.2vw,4.6rem);
  line-height:1.02;letter-spacing:-.022em;max-width:15ch;
  perspective:760px;perspective-origin:50% 60%;
  text-shadow:0 1px 4px rgba(22,18,15,.45),0 2px 30px rgba(22,18,15,.55)}
.p3d__w{display:inline-block;vertical-align:bottom;transform-style:preserve-3d;
  padding-bottom:.14em;margin-bottom:-.14em}
.p3d__w i{display:inline-block;font-style:inherit;transform-origin:50% 100%}
.p3d__w--em i{font-style:italic}
.pl-js .p3d__w i{animation:plChar3D .95s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--d,0s) both}

/* panel de información */
.p3d__panel--info{display:flex;align-items:center;justify-content:center;
  background:transparent}
.p3d__info-copy{display:grid;gap:clamp(18px,2.6vw,28px);justify-items:start;
  padding:clamp(24px,5vw,56px);max-width:34ch}
.p3d__desc{font-size:clamp(1.02rem,1.5vw,1.26rem);line-height:1.5;color:inherit}
.p3d__desc p{margin:0}

/* cierre: nace desde el fondo de la escena */
.p3d__final{position:absolute;inset:0;z-index:3;display:grid;place-content:center;
  justify-items:center;gap:clamp(14px,2.4vw,22px);text-align:center;
  padding:clamp(24px,6vw,60px);pointer-events:none;opacity:0}
.p3d__final.is-on{pointer-events:auto}
.p3d__mark{max-width:min(62vw,520px);height:auto;display:block}
.p3d__mark--txt{font-family:var(--pl-display,var(--font-heading-family,inherit));
  font-weight:var(--pl-display-weight,var(--font-heading-weight,400));
  font-size:clamp(3rem,13vw,7.5rem);line-height:1;letter-spacing:-.03em;color:#fff}
.p3d__final-sub{margin:0;max-width:26ch;font-size:clamp(.98rem,1.4vw,1.16rem);
  color:rgba(255,255,255,.86)}

/* ---- móvil: recorrido corto, sin giro 3D, un solo cambio de color ---- */
@media (max-width:859px){
  .p3d{height:clamp(200vh,220vh,220vh)}
  .p3d__scene{perspective:none;grid-template-rows:1fr}
  .p3d__panel--info{position:absolute;inset:auto 0 0 0;height:auto;
    align-items:flex-end;background:none}
  .p3d__info-copy{padding-bottom:clamp(28px,9vw,48px)}
  .p3d__model-copy{bottom:34%}
  .p3d__image{inset:-4%;width:108%;height:108%}
}
@media (prefers-reduced-motion:reduce){
  .pl-js .p3d__w i{animation:none;opacity:1;transform:none}
  .p3d__final{opacity:0}
}

/* `.pl` lleva overflow:clip. Eso NO rompe el sticky (clip no crea contenedor de
   scroll, a diferencia de hidden/auto/scroll), pero en esta escena no hace falta:
   quien recorta es `.p3d__sticky`. Se deja en visible para no depender del matiz. */
.pl.p3d{overflow:visible}

/* ==========================================================================
   HERO 3D · afinado del titular
   El parpadeo venía de girar más de 90°: la letra enseñaba el reverso y
   `backface-visibility:hidden` la borraba hasta cruzar de nuevo los 90°.
   Se queda en -82° y sin esa propiedad. Además el texto no lleva sombra
   mientras gira: una sombra sobre una letra inclinada en 3D se ve sucia.
   ========================================================================== */
.p3d__w i{transform-origin:50% 100%;backface-visibility:visible}
.plh__w i{transform-origin:50% 100%;backface-visibility:visible}

@keyframes plChar3D{
  from{opacity:0;transform:translateY(74%) rotateX(-82deg)}
  60%{opacity:1}
  to{opacity:1;transform:translateY(0) rotateX(0deg)}
}

/* la sombra entra DESPUÉS del giro, cuando la letra ya está plana */
.p3d .p3d__title{text-shadow:none}
.pl-js .p3d .p3d__title{animation:plTitleShadow .6s linear 1.25s both}
@keyframes plTitleShadow{
  from{text-shadow:0 0 0 rgba(22,18,15,0)}
  to{text-shadow:0 1px 4px rgba(22,18,15,.45),0 2px 30px rgba(22,18,15,.55)}
}

/* que la línea no baile mientras las letras giran */
.p3d .p3d__title{line-height:1.06}
.p3d__w{padding-bottom:.18em;margin-bottom:-.18em}

/* ==========================================================================
   HERO 3D · MÓVIL, corregido
   Tres fallos que venían de aquí:
   1. El titular animaba AL CARGAR la página. Como el hero es la segunda sección,
      para cuando llegas ya terminó. Ahora espera a que la sección esté a la vista.
   2. `perspective:none` en móvil aplastaba el giro de las letras: se veía
      estirado, no girado. Ahora la escena no tiene perspectiva (paneles planos)
      pero el TITULAR sí, que es lo que gira.
   3. El texto caía a media foto y el botón se salía por abajo.
   ========================================================================== */

/* — 1. el titular entra cuando la sección se ve, no al cargar — */
html.pl-perf .p3d:not(.is-vis) .p3d__w i,
html.pl-perf .p3d:not(.is-vis) .p3d__title{animation-play-state:paused}
/* (si pleena-perf.js no cargara, no existe .pl-perf y animan normal) */

@media (max-width:859px){
  /* — 2. la escena va plana, pero el titular conserva su profundidad — */
  .p3d__scene{perspective:none}
  .p3d .p3d__title{perspective:620px;perspective-origin:50% 62%}

  /* — 3. layout: foto arriba, todo el texto abajo con su velo — */
  .p3d{height:240vh}
  .p3d__sticky{height:100svh;min-height:600px}

  .p3d__panel--model{position:absolute;inset:0;height:100%}
  .p3d__image{inset:-4%;width:108%;height:108%;object-position:center 18%}
  .p3d__veil{background:linear-gradient(180deg,
    rgba(24,18,14,0) 0%,rgba(24,18,14,.05) 34%,
    rgba(24,18,14,.55) 62%,rgba(24,18,14,.90) 100%)}

  .p3d__model-copy{inset:auto 0 auto 0;bottom:auto;top:52%;
    padding:0 clamp(22px,6vw,30px);gap:10px}
  .p3d .p3d__title{font-size:clamp(2.1rem,9vw,3.1rem);max-width:13ch;line-height:1.05}

  .p3d__panel--info{position:absolute;inset:auto 0 0 0;height:auto;
    align-items:flex-start;justify-content:flex-start;background:none}
  .p3d__info-copy{padding:0 clamp(22px,6vw,30px) clamp(34px,10vw,52px);
    max-width:none;gap:16px;justify-items:stretch}
  .p3d__desc{font-size:clamp(.94rem,3.9vw,1.04rem);line-height:1.45;max-width:30ch}
  .p3d__info-copy .pl-btn{width:100%;max-width:280px;min-height:52px}

  /* el cierre también necesita caber */
  .p3d__final{padding:clamp(24px,7vw,40px)}
  .p3d__mark--txt{font-size:clamp(2.8rem,17vw,5rem)}
}

/* pantallas cortas: que el botón nunca quede debajo del borde */
@media (max-width:859px) and (max-height:700px){
  .p3d__model-copy{top:44%}
  .p3d .p3d__title{font-size:clamp(1.9rem,8vw,2.6rem)}
  .p3d__info-copy{padding-bottom:clamp(26px,8vw,36px);gap:12px}
}

/* entradas del resto de textos: también esperan a que la sección se vea */
.pl-js .p3d__eyebrow{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .08s both}
.pl-js .p3d__desc{animation:plHeroIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .95s both}
.pl-js .p3d__info-copy .pl-btn{animation:plHeroIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) 1.15s both}
html.pl-perf .p3d:not(.is-vis) .p3d__eyebrow,
html.pl-perf .p3d:not(.is-vis) .p3d__desc,
html.pl-perf .p3d:not(.is-vis) .p3d__info-copy .pl-btn{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .pl-js .p3d__eyebrow,.pl-js .p3d__desc,
  .pl-js .p3d__info-copy .pl-btn{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   HERO 3D · el cierre, con presencia
   La foto quedaba al 20% encima del fondo oscuro y lo aclaraba entero: el cierre
   se veía marrón sucio en vez de oscuro. Ahora la foto baja al 8-10% y el propio
   cierre trae su fondo, así el contraste no depende de la opacidad de la imagen.
   ========================================================================== */
.p3d__final{background:radial-gradient(120% 90% at 50% 45%,
  rgba(43,33,27,.55) 0%,rgba(43,33,27,.92) 70%)}

.p3d__mark--txt{font-size:clamp(3.6rem,19vw,9rem);letter-spacing:-.04em;line-height:.92}
.p3d__final-sub{font-size:clamp(1rem,4.2vw,1.24rem);color:rgba(255,255,255,.92);
  letter-spacing:.01em}
.p3d__final .pl-btn{min-height:54px;padding-inline:clamp(30px,8vw,44px);margin-top:6px}

/* el wordmark entra escalonado detrás de la escena */
.p3d__final.is-on .p3d__mark,
.p3d__final.is-on .p3d__mark--txt{animation:plHeroIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .05s both}
.p3d__final.is-on .p3d__final-sub{animation:plHeroIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .22s both}
.p3d__final.is-on .pl-btn{animation:plHeroIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .38s both}

@media (max-width:859px){
  .p3d__mark--txt{font-size:clamp(3.4rem,20vw,6rem)}
  .p3d__final{gap:clamp(12px,3.4vw,20px)}
}
@media (prefers-reduced-motion:reduce){
  .p3d__final.is-on .p3d__mark,.p3d__final.is-on .p3d__mark--txt,
  .p3d__final.is-on .p3d__final-sub,.p3d__final.is-on .pl-btn{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   LOGO PLEENA EN SVG · el símbolo se dibuja trazo a trazo
   La longitud de cada trazo se fija a mano en `stroke-dasharray` porque en CSS
   no hay forma de leer getTotalLength(): el aro son 2π·112 ≈ 704, la barra 196,
   y cada «e» ronda los 280. Se dibujan con `dashoffset` de esa misma longitud
   hasta 0. `fill-mode:both` garantiza que SIEMPRE acaben dibujadas, aunque el
   navegador se salte frames.
   ========================================================================== */
.pl-logo{display:grid;justify-items:center;gap:clamp(10px,2vw,18px);
  --pl-logo-c:#2B211B;--pl-logo-s:160px;--pl-logo-w:7}
.pl-logo__svg{width:var(--pl-logo-s);height:auto;display:block;overflow:visible}
.pl-logo__svg circle,.pl-logo__svg path{
  fill:none;stroke:var(--pl-logo-c);stroke-width:var(--pl-logo-w);
  stroke-linecap:round;vector-effect:non-scaling-stroke}

.pl-logo__word{display:block;text-align:center;
  font-family:var(--pl-display,var(--font-heading-family,inherit));
  font-weight:var(--pl-display-weight,var(--font-heading-weight,400));
  font-size:calc(var(--pl-logo-s) * .42);line-height:1;letter-spacing:-.035em;
  color:var(--pl-logo-c)}
.pl-logo__word i{display:inline-block;font-style:normal}

/* ---- modo DRAW: el aro se traza, las «e» aparecen, la barra las cruza ---- */
.pl-logo--draw .pl-logo__ring{stroke-dasharray:704;stroke-dashoffset:704}
.pl-logo--draw .pl-logo__eL,
.pl-logo--draw .pl-logo__eR{stroke-dasharray:280;stroke-dashoffset:280}
.pl-logo--draw .pl-logo__bar{stroke-dasharray:196;stroke-dashoffset:196}
.pl-logo--draw .pl-logo__word i{opacity:0}

.pl-logo--draw.is-on .pl-logo__ring{animation:plLogoDraw 1.5s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .1s both}
.pl-logo--draw.is-on .pl-logo__eL  {animation:plLogoDrawE 1s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .55s both}
.pl-logo--draw.is-on .pl-logo__eR  {animation:plLogoDrawE 1s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .75s both}
.pl-logo--draw.is-on .pl-logo__bar {animation:plLogoDrawBar .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) 1.05s both}
.pl-logo--draw.is-on .pl-logo__word i{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--d,0s) both}

@keyframes plLogoDraw   { from{stroke-dashoffset:704} to{stroke-dashoffset:0} }
@keyframes plLogoDrawE  { from{stroke-dashoffset:280} to{stroke-dashoffset:0} }
@keyframes plLogoDrawBar{ from{stroke-dashoffset:196} to{stroke-dashoffset:0} }

/* ---- modo ASSEMBLE: las piezas llegan de fuera y se juntan ---- */
.pl-logo--assemble .pl-logo__eL,.pl-logo--assemble .pl-logo__eR,
.pl-logo--assemble .pl-logo__bar,.pl-logo--assemble .pl-logo__ring{
  transform-box:fill-box;transform-origin:center}
.pl-logo--assemble.is-on .pl-logo__eL {animation:plLogoInL 1.1s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .1s both}
.pl-logo--assemble.is-on .pl-logo__eR {animation:plLogoInR 1.1s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .1s both}
.pl-logo--assemble.is-on .pl-logo__bar{animation:plLogoInBar .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .9s both}
.pl-logo--assemble.is-on .pl-logo__ring{animation:plLogoInRing 1s var(--pl-ease,cubic-bezier(.22,1,.36,1)) 1.15s both}
.pl-logo--assemble.is-on .pl-logo__word i{animation:plHeroIn .7s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--d,0s) both}

@keyframes plLogoInL  { from{transform:translateX(-120%) rotate(-14deg);opacity:0} to{transform:none;opacity:1} }
@keyframes plLogoInR  { from{transform:translateX(120%) rotate(14deg);opacity:0}  to{transform:none;opacity:1} }
@keyframes plLogoInBar{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes plLogoInRing{from{opacity:0;transform:scale(1.7)} to{opacity:.55;transform:scale(1)} }

/* ---- modo STATIC ---- */
.pl-logo--static .pl-logo__ring{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .pl-logo__ring,.pl-logo__eL,.pl-logo__eR,.pl-logo__bar,.pl-logo__word i{
    animation:none !important;stroke-dashoffset:0 !important;opacity:1;transform:none}
  .pl-logo--draw .pl-logo__ring,.pl-logo--assemble .pl-logo__ring{opacity:.55}
}

/* ==========================================================================
   HERO 3D · CIERRE LIMPIO
   El problema: el cierre compartía pantalla con la foto (aunque fuera al 8%) y
   con un fondo semitransparente. Eso lo ensuciaba: ni era la foto ni era un
   cierre. Ahora el cierre tapa del todo — fondo sólido, la marca sola — que es
   lo que hace que un final se sienta como un final.
   ========================================================================== */
.p3d__final{background:var(--p3d-end,#2B211B);
  gap:clamp(18px,3vw,30px);align-content:center}

/* ritmo vertical: el logo respira, la frase se separa, el botón cierra */
.p3d__final .pl-logo{margin-bottom:clamp(6px,1.4vw,12px)}
.p3d__final-sub{max-width:24ch;line-height:1.45;opacity:.88}
.p3d__final .pl-btn{margin-top:clamp(8px,1.6vw,14px)}

/* una línea fina bajo el logo, del ancho del símbolo: ancla la composición */
.p3d__final .pl-logo::after{content:"";display:block;width:clamp(48px,8vw,72px);
  height:1px;margin:clamp(14px,2.6vw,22px) auto 0;
  background:currentColor;opacity:.28;transform:scaleX(0);transform-origin:center}
.p3d__final.is-on .pl-logo::after{
  animation:plLineIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) 1.5s both}
@keyframes plLineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:859px){
  .p3d__final{padding:clamp(28px,8vw,44px) clamp(22px,6vw,30px)}
  .p3d__final .pl-btn{width:100%;max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  .p3d__final.is-on .pl-logo::after{animation:none;transform:scaleX(1)}
}

/* ==========================================================================
   CIERRE · TODO ANIMADO
   El wordmark hacía un fundido de 16px, que no se notaba. Ahora cada letra gira
   sobre su borde inferior como en el titular (rotateX desde -82°, sin pasar de
   los 90° para que no parpadee), y después un destello la recorre.
   Orden: aro → «e» → barra → línea → LETRAS → frase → botón.
   ========================================================================== */
.pl-logo__word{perspective:680px;perspective-origin:50% 62%;
  display:flex;justify-content:center;flex-wrap:wrap}
.pl-logo__word i{transform-origin:50% 100%;
  padding-bottom:.1em;margin-bottom:-.1em}

/* las letras del wordmark giran, no se funden */
.pl-logo--draw.is-on .pl-logo__word i,
.pl-logo--assemble.is-on .pl-logo__word i{
  animation:plChar3D .9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) var(--d,0s) both}

/* un destello recorre la palabra cuando ya está puesta */
/* SIN overflow:hidden: recortaría las letras al girar en 3D. El destello no lo
   necesita, porque su pseudo-elemento ya va limitado con inset:0. */
.pl-logo__word{position:relative}
.pl-logo__word::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,
    color-mix(in srgb,var(--pl-logo-c) 55%,transparent) 50%,transparent 62%);
  background-size:260% 100%;background-repeat:no-repeat;
  mix-blend-mode:screen;opacity:0}
.pl-logo--draw.is-on .pl-logo__word::after{
  animation:plWordShine 1.6s ease-in-out 1.85s both}
@keyframes plWordShine{
  0%{opacity:0;background-position:180% 0}
  25%{opacity:1}
  100%{opacity:0;background-position:-80% 0}
}

/* el símbolo respira una vez ya dibujado */
.p3d__final.is-on .pl-logo__svg{
  animation:plLogoPulse 2.4s ease-in-out 1.7s both}
@keyframes plLogoPulse{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.035)}
}

/* la frase entra por palabras, no de golpe */
.p3d__final-sub{overflow:hidden}
.p3d__final.is-on .p3d__final-sub{
  animation:plSubIn .9s var(--pl-ease,cubic-bezier(.22,1,.36,1)) 2.1s both}
@keyframes plSubIn{
  from{opacity:0;transform:translateY(120%)}
  to{opacity:1;transform:translateY(0)}
}

/* el botón llega al final, creciendo desde el centro */
.p3d__final.is-on .pl-btn{
  animation:plBtnIn .8s var(--pl-ease,cubic-bezier(.22,1,.36,1)) 2.45s both}
@keyframes plBtnIn{
  from{opacity:0;transform:translateY(22px) scale(.88)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* y el halo del fondo se abre detrás de todo */
.p3d__final::before{content:"";position:absolute;left:50%;top:46%;
  width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(201,160,143,.30) 0%,transparent 66%)}
.p3d__final.is-on::before{
  animation:plHaloOpen 2s var(--pl-ease,cubic-bezier(.22,1,.36,1)) .3s both}
@keyframes plHaloOpen{
  from{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .pl-logo--draw.is-on .pl-logo__word i,
  .p3d__final.is-on .p3d__final-sub,.p3d__final.is-on .pl-btn,
  .p3d__final.is-on .pl-logo__svg,.p3d__final.is-on::before,
  .pl-logo--draw.is-on .pl-logo__word::after{animation:none;opacity:1;transform:none}
}

/* ==========================================================================
   HERO 3D · EL SÍMBOLO COMO PROTAGONISTA
   Cuando no hay foto editorial que aguante una escena de 320vh, el símbolo sí:
   es vectorial, se descompone en cuatro trazos y no pixela por mucho que crezca.
   ========================================================================== */
.p3d__star{position:absolute;inset:0;display:grid;place-items:center;
  transform-style:preserve-3d;will-change:transform}
.p3d__star .pl-logo{gap:0}
.p3d__star .pl-logo__svg{width:min(62vw,520px);overflow:visible}
.p3d__star .pl-logo__ring,.p3d__star .pl-logo__eL,
.p3d__star .pl-logo__eR,.p3d__star .pl-logo__bar{
  transform-box:fill-box;transform-origin:center;will-change:transform}

/* el panel del protagonista, cuando es el símbolo, lleva su propio fondo */
.p3d__panel--model:has(.p3d__star){background:
  radial-gradient(120% 90% at 50% 40%,
    color-mix(in srgb,var(--p3d-mid,#E9D9CF) 70%,transparent) 0%,
    var(--p3d-start,#C9A08F) 72%)}
.p3d__panel--model:has(.p3d__star) .p3d__veil{display:none}

/* el titular, sobre el símbolo, se lee en oscuro */
.p3d__panel--model:has(.p3d__star) .p3d__title,
.p3d__panel--model:has(.p3d__star) .p3d__eyebrow{color:var(--p3d-ink,#2B211B);
  text-shadow:none}

@media (max-width:859px){
  .p3d__star .pl-logo__svg{width:min(76vw,420px)}
  .p3d__panel--model:has(.p3d__star) .p3d__title{font-size:clamp(2rem,8.4vw,2.9rem)}
}

/* ==========================================================================
   PLEENA · LAS LÍNEAS SE VUELVEN LOGO
   Secuencia: las líneas cruzan la pantalla alternando lado → convergen al
   centro → de ahí nace el logo → entra el catálogo.
   Regla aprendida a base de romperla: el texto y el logo NUNCA comparten el
   centro al mismo tiempo; se relevan.
   ========================================================================== */
.pic{position:relative;height:var(--pic-h,340vh);
  background:var(--pic-bg,#fff);color:var(--pic-ink,#2B211B)}
.pl.pic{overflow:visible}
.pic__sticky{position:sticky;top:0;height:100svh;min-height:560px;
  display:grid;place-items:center;overflow:hidden}

/* ---- 1 · las líneas que cruzan ---- */
.pic__lines{grid-area:1/1;display:grid;gap:clamp(2px,.6vw,10px);
  width:100%;justify-items:center;will-change:transform}
.pic__row{display:block;white-space:nowrap;
  font-family:var(--pl-display,var(--font-heading-family,inherit));
  font-weight:var(--pl-display-weight,var(--font-heading-weight,400));
  font-size:var(--pic-size,13vw);line-height:1;letter-spacing:-.035em;
  color:var(--pic-ink,#2B211B);will-change:transform,opacity}
.pic__row--em{font-style:italic;color:var(--pic-accent,#C9A08F)}

/* ---- 2 · el logo, que nace del centro ---- */
.pic__logo{grid-area:1/1;position:relative;display:grid;place-items:center;
  perspective:1200px;opacity:0;will-change:transform,opacity}
.pic__svg{width:min(54vw,340px);height:auto;overflow:visible;
  transform-style:preserve-3d;will-change:transform}
.pic__g{transform-box:view-box;transform-origin:130px 130px}
.pic__svg circle,.pic__svg path{fill:none;stroke:var(--pic-line,#fff);
  stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pic__ring2{stroke:var(--pic-accent,#C9A08F);opacity:0}
.pic__eL,.pic__eR,.pic__bar,.pic__ring,.pic__ring2{
  transform-box:fill-box;transform-origin:center;will-change:transform}

.pic__orbit{position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid var(--pic-accent,#C9A08F);opacity:.26}
.pic__orbit--1{width:min(70vw,460px);aspect-ratio:1;animation:picOrb1 22s linear infinite}
.pic__orbit--2{width:min(86vw,560px);aspect-ratio:1;animation:picOrb2 34s linear infinite reverse;opacity:.15}
@keyframes picOrb1{from{transform:rotateX(74deg) rotateZ(0)}to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes picOrb2{from{transform:rotateY(72deg) rotateZ(0)}to{transform:rotateY(72deg) rotateZ(360deg)}}

/* ---- 3 · el catálogo ---- */
.pic__end{grid-area:1/1;display:grid;justify-items:center;text-align:center;
  gap:clamp(10px,1.8vw,16px);padding:clamp(24px,6vw,48px);opacity:0;
  align-self:end;padding-bottom:clamp(34px,8vh,70px);will-change:transform,opacity}
.pic__word{margin:0;font-family:var(--pl-display,var(--font-heading-family,inherit));
  font-size:clamp(2rem,7vw,3.4rem);line-height:1;letter-spacing:-.03em;
  color:var(--pic-line,#fff)}
.pic__sub{margin:0;max-width:30ch;font-size:clamp(.95rem,1.35vw,1.1rem);
  line-height:1.5;color:var(--pic-line,#fff);opacity:.82}
.pic__btn{margin-top:4px}

@media (max-width:859px){
  .pic{height:280vh}
  .pic__row{font-size:calc(var(--pic-size,13vw) * 1.25)}
  .pic__svg{width:min(70vw,300px)}
  .pic__orbit--1{width:min(88vw,360px)}
  .pic__orbit--2{width:min(98vw,420px)}
  .pic__btn{width:100%;max-width:280px}
  .pic__end{padding-bottom:clamp(30px,7vh,54px)}
}
@media (prefers-reduced-motion:reduce){ html:not(.pl-force-motion) .pic__orbit{animation:none} }

/* ==========================================================================
   ICONO 3D · centrado y fondo con textura
   Tres fallos de la versión anterior: el logo quedaba arriba y el texto abajo
   con un hueco enorme en medio; el fondo era un plano liso; y el giro de 360°
   dejaba el símbolo de canto (eso va corregido en el JS).
   ========================================================================== */

/* — el conjunto compone centrado, no separado por un hueco — */
.pic__end{align-self:center;padding-bottom:0;
  transform:translateY(22vh)}
@media (max-width:859px){ .pic__end{transform:translateY(24vh)} }
.pic__logo{transform-origin:50% 42%}

/* — el fondo deja de ser plano — */
.pic__sticky::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 32%, color-mix(in srgb, var(--pic-accent,#C9A08F) 18%, transparent) 0%, transparent 62%),
    radial-gradient(80% 60% at 18% 88%, color-mix(in srgb, var(--pic-accent,#C9A08F) 10%, transparent) 0%, transparent 70%);
  opacity:0;transition:opacity .6s linear}
.pic.is-dark .pic__sticky::before{opacity:1}

/* retícula finísima, recortada con máscara para que no llegue a los bordes */
.pic__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--pic-accent,#C9A08F) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--pic-accent,#C9A08F) 22%, transparent) 1px, transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(62% 58% at 50% 40%, #000 0%, transparent 78%);
  opacity:.5}

/* los textos, mientras cruzan, llevan un contorno tenue detrás que da cuerpo */
.pic__row{text-shadow:0 1px 0 color-mix(in srgb, var(--pic-accent,#C9A08F) 26%, transparent)}

/* el logo con un halo suave para despegarlo del fondo oscuro */
.pic__logo::before{content:"";position:absolute;left:50%;top:42%;
  width:min(96vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--pic-accent,#C9A08F) 22%, transparent) 0%, transparent 64%)}

@media (max-width:859px){
  .pic__sticky::after{background-size:58px 58px;opacity:.38}
}
@media (prefers-reduced-motion:reduce){
  .pic__sticky::before{transition:none}
}

/* ==========================================================================
   ICONO 3D · QUE QUEPA Y NO SE SOLAPE
   Dos fallos: las líneas se cortaban por la derecha (el tamaño no miraba
   cuántas letras tienen) y el logo y el catálogo se pisaban.
   ========================================================================== */

/* — 1. el tamaño nunca deja que la línea se salga —
   En una serif, cada carácter ocupa ~0.46em de ancho. Para que quepan N
   caracteres en el 92% del ancho: tamaño = 92vw / (N · 0.46) = 200vw/N.
   Se toma el menor entre eso y lo que pida el editor. */
.pic__row{font-size:min(var(--pic-size,13vw), calc(200vw / var(--pic-ch,16)))}
@media (max-width:859px){
  .pic__row{font-size:min(calc(var(--pic-size,13vw) * 1.1), calc(188vw / var(--pic-ch,16)))}
}

/* — 2. el logo y el catálogo en filas distintas: imposible que se pisen — */
.pic__sticky{grid-template-rows:1fr auto;align-content:stretch;
  padding-block:clamp(20px,4vh,44px)}
.pic__lines{grid-row:1 / span 2;align-self:center}
.pic__logo{grid-row:1;grid-column:1;align-self:center;transform-origin:50% 50%}
.pic__end{grid-row:2;grid-column:1;align-self:end;transform:none;
  padding:0 clamp(20px,5vw,40px) clamp(10px,2vh,24px)}

/* el halo sigue al logo, no al centro de la pantalla */
.pic__logo::before{top:50%}

@media (max-width:859px){
  .pic__svg{width:min(58vw,250px)}
  .pic__orbit--1{width:min(74vw,300px)}
  .pic__orbit--2{width:min(88vw,350px)}
  .pic__word{font-size:clamp(1.7rem,7vw,2.4rem)}
  .pic__sub{font-size:clamp(.88rem,3.5vw,1rem);max-width:28ch}
}

/* ==========================================================================
   ICONO 3D · QUE EL LOGO SE LEA
   Se veía solo el aro: las dos «e» y la barra no llegaban a mostrarse. Además
   de arreglarlo en el JS, aquí se garantiza que por defecto están VISIBLES,
   para que un fallo del scroll nunca deje el símbolo a medias.
   ========================================================================== */
.pic__eL,.pic__eR,.pic__bar,.pic__ring{opacity:1}

/* trazo más grueso: a este tamaño, 6px se perdían sobre el fondo oscuro */
.pic__svg circle,.pic__svg path{stroke-width:9}
.pic__ring{stroke-width:7;opacity:.9}
.pic__ring2{stroke-width:5}

/* las «e» y la barra, que son la marca, un punto más marcadas que el aro */
.pic__eL,.pic__eR{stroke-width:10}
.pic__bar{stroke-width:9}

/* la barra se estira desde el centro sin depender del fill-box, que en una
   línea de altura 0 se comporta de forma imprevisible */
.pic__bar{transform-box:view-box;transform-origin:130px 130px}

/* el logo, más grande: es el protagonista del cierre */
.pic__svg{width:min(62vw,400px)}
@media (max-width:859px){
  .pic__svg{width:min(70vw,300px)}
  .pic__svg circle,.pic__svg path{stroke-width:11}
  .pic__eL,.pic__eR{stroke-width:12}
  .pic__ring{stroke-width:8}
}

/* ==========================================================================
   ICONO 3D · EL LOGO, FINO Y LIMPIO
   Me pasé de grosor: a 10-12px las dos «e» se empastan y el interior se cierra.
   El símbolo de Pleena es fino y elegante; se respeta eso y se gana presencia
   con TAMAÑO, no con grosor. Y fuera el segundo aro: con rotate+scale se veía
   descentrado, como un fallo.
   ========================================================================== */
.pic__svg circle,.pic__svg path{stroke-width:5}
.pic__ring{stroke-width:5;opacity:1}
.pic__eL,.pic__eR{stroke-width:5.5}
.pic__bar{stroke-width:5}

/* el segundo aro se retira: aportaba poco y salía corrido */
.pic__ring2{display:none}

/* presencia por tamaño, no por grosor */
.pic__svg{width:min(66vw,420px)}

/* el halo, mucho más discreto: antes ensuciaba el fondo alrededor */
.pic__logo::before{width:min(80vw,480px);
  background:radial-gradient(circle,
    color-mix(in srgb, var(--pic-accent,#C9A08F) 12%, transparent) 0%, transparent 62%)}

/* las órbitas, más finas y separadas del símbolo */
.pic__orbit{border-width:1px;opacity:.16}
.pic__orbit--1{width:min(92vw,560px)}
.pic__orbit--2{width:min(108vw,680px);opacity:.10}

/* la retícula del fondo, más tenue: competía con el logo */
.pic__sticky::after{opacity:.28;background-size:96px 96px}

@media (max-width:859px){
  .pic__svg{width:min(72vw,320px)}
  .pic__svg circle,.pic__svg path{stroke-width:5}
  .pic__eL,.pic__eR{stroke-width:5.5}
  .pic__ring{stroke-width:5}
  .pic__orbit--1{width:min(104vw,420px)}
  .pic__orbit--2{width:min(124vw,520px)}
  .pic__sticky::after{opacity:.2;background-size:70px 70px}
}

/* ==========================================================================
   FONDO · CUATRO GEOMETRÍAS QUE SE RELEVAN CON EL SCROLL
   Las cuatro capas están siempre en el DOM; lo que cambia es su opacidad, su
   tamaño y su posición, todo atado al progreso de lectura. El movimiento va en
   `background-size` y `background-position`, nunca en `transform`: un transform
   rompería `background-attachment:fixed` y volverían los cortes entre secciones.
   ========================================================================== */
.pl-malla{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --pl-malla-c:#C9A08F;--pl-malla-i:1}

.pl-malla__p{position:absolute;inset:0;display:block;pointer-events:none;
  background-attachment:fixed;background-repeat:repeat;opacity:0}

/* 1 · rejilla de líneas */
.pl-malla__p--lineas{
  background-image:
    linear-gradient(to right,  color-mix(in srgb,var(--pl-malla-c) 100%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--pl-malla-c) 100%,transparent) 1px,transparent 1px);
  background-size:78px 78px;opacity:calc(.5 * var(--pl-malla-i))}

/* 2 · círculos */
.pl-malla__p--circulos{
  background-image:radial-gradient(circle,
    color-mix(in srgb,var(--pl-malla-c) 100%,transparent) 0 2.5px, transparent 2.6px);
  background-size:64px 64px}

/* 3 · damero de cuadrados */
.pl-malla__p--cuadros{
  background-image:repeating-conic-gradient(
    color-mix(in srgb,var(--pl-malla-c) 100%,transparent) 0% 25%, transparent 0% 50%);
  background-size:70px 70px}

/* 4 · ondas concéntricas: las curvas */
.pl-malla__p--ondas{
  background-image:repeating-radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--pl-malla-c) 100%,transparent) 0 1px, transparent 1px 34px);
  background-size:100% 100%;background-attachment:scroll}

/* resplandores */
.pl-malla__glow{position:absolute;display:block;border-radius:50%;pointer-events:none;
  will-change:transform,opacity;opacity:calc(.7 * var(--pl-malla-i))}
.pl-malla__glow--1{left:-16%;top:4%;width:min(72vw,620px);aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--pl-malla-c) 26%,transparent) 0%,transparent 66%)}
.pl-malla__glow--2{right:-18%;bottom:2%;width:min(86vw,760px);aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--pl-malla-c) 18%,transparent) 0%,transparent 70%)}
.pl-malla__glow--3{left:56%;top:-14%;width:min(58vw,540px);aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--pl-malla-c) 22%,transparent) 0%,transparent 68%)}

/* el color se invierte donde el fondo se oscurece */
.pic.is-dark .pl-malla,.pfin .pl-malla{--pl-malla-c:#F2E6DE}

/* el contenido siempre por encima */
.psym__track{position:relative;z-index:1}
.pic__sticky{z-index:1}
.ptl__track,.pfin__inner{position:relative;z-index:1}

@media (max-width:859px){
  /* iOS ignora background-attachment:fixed */
  .pl-malla__p{background-attachment:scroll}
  .pl-malla__glow--3{display:none}
}

/* ===================== Onnexa · mejoras de la homepage ===================== */
/* mazo de reseñas: palabras y estrellas que anima anime.js */
.ptl__w,.ptl__star{display:inline-block}
.ptl__star{transform-origin:50% 60%}
.ptl__rev{transform-origin:50% 100%}
/* el círculo oscuro del que nace el logo */
.pic__dark{position:absolute;inset:0;z-index:0;background:var(--pic-bg2,#2B211B);
  clip-path:circle(0% at 50% 52%);pointer-events:none}
.pic__sticky > :not(.pic__dark){position:relative;z-index:1}
/* botón magnético (solo con mouse) */
.pl-magnet{transition:translate .5s cubic-bezier(.2,.8,.2,1)}

/* ==========================================================================
   RENDIMIENTO (23-oct, medido a 5 Mbps con CPU 4x): los puntos flotantes eran
   ~250 capas animadas con sombra y blur y bloqueaban el celular ~7 s.
   Se quedan pocos y sin efectos caros; el ambiente se ve igual.
   ========================================================================== */
@media (max-width:749px){
  .pl-dots i:nth-child(n+11){display:none}
  .pl-dots i{box-shadow:none}
  .pl-dots i.is-soft{filter:none;opacity:.5}
}
html.pl-lowfx .pl-dots i:nth-child(n+9){display:none}
html.pl-lowfx .pl-dots i{box-shadow:none}
html.pl-lowfx .pl-dots i.is-soft{filter:none}
html.pl-minfx .pl-dots i:nth-child(n+6){display:none}