/* Páginas de producto EasyStar: extensión editorial de la dirección visual v1. */
.product-page{
  --pp-navy:#070d2d;
  --pp-ink:#10152f;
  --pp-yellow:#ffb91f;
  --pp-ivory:#f6f2e9;
  --pp-white:#fffdf8;
  --pp-line:rgba(16,21,47,.16);
  background:var(--pp-navy);
}
.product-page main{overflow:clip}
.product-page .site-header{background:rgba(7,13,45,.82)}
.product-page .editorial-kicker{margin-bottom:18px}
.product-page h1,.product-page h2,.product-page h3{letter-spacing:-.035em}

.product-hero{
  position:relative;
  min-height:min(900px,100svh);
  display:flex;
  align-items:center;
  padding:clamp(128px,14vh,168px) 0 74px;
  background:radial-gradient(720px 520px at 80% 42%,rgba(37,62,139,.34),transparent 70%),linear-gradient(145deg,#070d2d,#05091f 68%,#0b1238);
  color:#fff;
}
.product-hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,185,31,.38),transparent)}
.product-hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:clamp(50px,8vw,120px);align-items:center}
.product-hero__copy{max-width:620px}
.product-hero h1{margin:0;font-size:clamp(3.25rem,5.4vw,5.6rem);line-height:.98;text-wrap:balance}
.product-hero__lead{max-width:570px;margin:27px 0 0;color:#d7dced;font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.65}
.product-hero .cta-row{margin-top:32px;align-items:center}
.product-hero__note{max-width:520px;margin:21px 0 0;color:#aeb6d2;font-size:.84rem;line-height:1.5}

.pack-display{position:relative;min-height:590px;display:flex;align-items:center;justify-content:center;perspective:1400px}
.pack-display::before{content:"";position:absolute;width:470px;aspect-ratio:1;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 74px rgba(255,255,255,.014),0 0 0 148px rgba(255,255,255,.008)}
.pack-display::after{content:"";position:absolute;left:14%;right:14%;bottom:46px;height:24px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(18px)}
.pack-stand{position:relative;z-index:2;width:285px;transform-style:preserve-3d}
.pack-stand img{display:block;width:100%;height:auto;border-radius:5px;box-shadow:0 38px 74px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.23)}
.pack-stand::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;bottom:-23px;height:24px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(140,155,185,.12));transform:rotateX(67deg)}
.pack-display--one .pack-stand{transform:rotateY(6deg)}
.pack-display--two .pack-stand:first-child{position:absolute;left:11%;width:245px;transform:translateY(38px) rotateY(9deg) rotateZ(-3deg);opacity:.84}
.pack-display--two .pack-stand:last-child{position:absolute;right:10%;width:275px;transform:translateY(-15px) rotateY(-5deg) rotateZ(2deg)}
.pack-display--custom .pack-stand{position:absolute;width:230px}
.pack-display--custom .pack-stand:nth-child(1){left:4%;transform:translateY(42px) rotateY(8deg) rotateZ(-5deg);opacity:.72}
.pack-display--custom .pack-stand:nth-child(2){z-index:4;width:275px;transform:translateY(-17px)}
.pack-display--custom .pack-stand:nth-child(3){right:4%;transform:translateY(42px) rotateY(-8deg) rotateZ(5deg);opacity:.72}
.pack-display__caption{position:absolute;z-index:6;left:10%;bottom:4px;padding-left:16px;border-left:2px solid var(--pp-yellow);color:#aeb6d2;font-size:.76rem}
.pack-display__caption strong{display:block;margin-bottom:3px;color:#fff;font-size:.88rem}

.product-facts{background:var(--pp-ivory);color:var(--pp-ink)}
.product-facts__grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--pp-line)}
.product-facts__grid div{min-height:125px;padding:31px 27px;border-right:1px solid var(--pp-line)}
.product-facts small{display:block;margin-bottom:9px;color:#946700;font-size:.65rem;font-weight:900;letter-spacing:.14em}
.product-facts strong{font-size:1.02rem;line-height:1.35}

.product-story{padding:clamp(92px,11vw,150px) 0;background:var(--pp-white);color:var(--pp-ink)}
.product-story__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(70px,11vw,160px)}
.product-story__intro{position:sticky;top:130px;align-self:start}
.product-story h2,.product-software h2,.product-fit h2,.product-next h2{margin:0;font-size:clamp(2.45rem,4.4vw,4.65rem);line-height:1.03;text-wrap:balance}
.product-story__intro > p:last-child{color:#5d6373;line-height:1.68}
.product-story__rows{border-top:1px solid var(--pp-line)}
.product-story__row{display:grid;grid-template-columns:45px 1fr;gap:25px;padding:34px 0;border-bottom:1px solid var(--pp-line)}
.product-story__row > span{color:#a27000;font-size:.7rem;font-weight:900}
.product-story__row h3{margin:0 0 9px;font-size:1.45rem}
.product-story__row p{margin:0;color:#626879;line-height:1.6}

.product-sequence{padding:clamp(90px,10vw,138px) 0;background:#0a1235;color:#fff}
.product-sequence__head{max-width:760px}
.product-sequence h2{margin:0;font-size:clamp(2.45rem,4.7vw,4.8rem);line-height:1.02;text-wrap:balance}
.product-sequence__head > p:last-child{color:#b7bfd8;line-height:1.65}
.product-sequence__steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.product-sequence__step{min-height:260px;padding:28px 26px;border-left:1px solid rgba(255,255,255,.13)}
.product-sequence__step:first-child{border-left:0}
.product-sequence__step small{color:var(--pp-yellow);font-size:.66rem;font-weight:900;letter-spacing:.16em}
.product-sequence__step h3{margin:48px 0 10px;font-size:1.3rem}
.product-sequence__step p{margin:0;color:#b7bfd8;font-size:.87rem;line-height:1.58}

.product-software{padding:clamp(92px,11vw,150px) 0;background:var(--pp-ivory);color:var(--pp-ink)}
.product-software__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(65px,10vw,145px);align-items:start}
.product-software__copy > p:last-of-type{color:#5d6373;font-size:1.06rem;line-height:1.68}
.software-lines{margin-top:40px;border-top:2px solid var(--pp-ink)}
.software-line{display:grid;grid-template-columns:150px 1fr;gap:25px;padding:24px 0;border-bottom:1px solid var(--pp-line)}
.software-line strong{font-size:1.02rem}
.software-line span{color:#626879;line-height:1.5}
.software-choice{border-top:1px solid var(--pp-line)}
.software-choice__item{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--pp-line)}
.software-choice__item > span{display:grid;place-items:center;width:28px;height:28px;background:var(--pp-yellow);font-size:.72rem;font-weight:900}
.software-choice h3{margin:0 0 7px;font-size:1.25rem}
.software-choice p{margin:0;color:#626879;font-size:.9rem;line-height:1.55}

.product-fit{padding:clamp(92px,11vw,145px) 0;background:#fff;color:var(--pp-ink)}
.product-fit__grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(70px,11vw,150px)}
.fit-list{border-top:1px solid var(--pp-line)}
.fit-list li{display:grid;grid-template-columns:32px 1fr;gap:20px;align-items:start;padding:25px 0;border-bottom:1px solid var(--pp-line);list-style:none}
.fit-list{margin:0;padding:0}
.fit-list span{color:#a27000;font-weight:900}
.fit-list strong{display:block;margin-bottom:6px;font-size:1.12rem}
.fit-list p{margin:0;color:#626879;line-height:1.55}

.product-next{padding:clamp(82px,10vw,128px) 0;background:var(--pp-navy);color:#fff}
.product-next__grid{display:grid;grid-template-columns:1.05fr .75fr;gap:clamp(60px,10vw,150px);align-items:end}
.product-next__action > p{margin:0;color:#bdc5db;line-height:1.65}
.product-next .cta-row{margin-top:28px;align-items:center}
.product-page .site-footer{padding-top:48px}

@media (min-width:981px){
  .product-page--custom .product-hero h1{font-size:clamp(3.25rem,4.65vw,4.7rem)}
}

@media (max-width:980px){
  .product-hero{min-height:auto}
  .product-hero__grid{grid-template-columns:1fr;gap:30px}
  .product-hero__copy{max-width:760px}
  .pack-display{width:min(650px,100%);margin-inline:auto}
  .product-story__grid,.product-software__grid,.product-fit__grid,.product-next__grid{grid-template-columns:1fr;gap:48px}
  .product-story__intro{position:static;max-width:680px}
}

@media (max-width:720px){
  .product-page .container{width:min(100% - 36px,1120px)}
  .product-hero{padding:118px 0 50px}
  .product-hero h1{font-size:clamp(2.6rem,12vw,4rem);line-height:1.01}
  .product-hero__lead{font-size:1rem}
  .product-hero .cta-row,.product-next .cta-row{align-items:stretch;flex-direction:column}
  .product-hero .btn,.product-hero .text-link,.product-next .btn,.product-next .text-link{justify-content:center;width:100%}
  .pack-display{min-height:520px}
  .pack-display::before{width:340px}
  .pack-stand{width:min(59vw,225px)}
  .pack-display--two .pack-stand:first-child{left:4%;width:min(52vw,205px)}
  .pack-display--two .pack-stand:last-child{right:3%;width:min(57vw,225px)}
  .pack-display--custom .pack-stand{width:min(46vw,180px)}
  .pack-display--custom .pack-stand:nth-child(1){left:-5%}
  .pack-display--custom .pack-stand:nth-child(2){width:min(57vw,225px)}
  .pack-display--custom .pack-stand:nth-child(3){right:-5%}
  .pack-display__caption{left:0}
  .product-facts__grid{grid-template-columns:1fr 1fr}
  .product-facts__grid div{min-height:112px;padding:24px 18px;border-bottom:1px solid var(--pp-line)}
  .product-story,.product-sequence,.product-software,.product-fit{padding:86px 0}
  .product-sequence__steps{grid-template-columns:1fr 1fr}
  .product-sequence__step{min-height:220px;border-bottom:1px solid rgba(255,255,255,.13)}
  .product-sequence__step:nth-child(odd){border-left:0}
  .product-sequence__step h3{margin-top:32px}
  .software-line{grid-template-columns:1fr;gap:6px}
  .product-next{padding:82px 0}
}

@media (max-width:430px){
  .product-page .container{width:min(100% - 32px,1120px)}
  .product-hero h1{font-size:clamp(2.38rem,11.5vw,3.15rem)}
  .pack-display{min-height:470px}
  .pack-display::before{width:300px}
  .pack-display--two .pack-stand:first-child{left:0}
  .pack-display--two .pack-stand:last-child{right:0}
  .product-story__row{grid-template-columns:30px 1fr;gap:14px}
  .product-sequence__steps{grid-template-columns:1fr}
  .product-sequence__step{min-height:0;padding:25px 0;border-left:0}
  .product-sequence__step h3{margin-top:22px}
  .product-facts__grid div{padding:21px 14px}
}

@media (prefers-reduced-motion:reduce){
  .product-page .pack-stand{transform:none!important}
}
