/* NOCAPAL · Compra palets · Hero independiente */
.cp-hero{position:relative; isolation:isolate;background:#EEF3F8;color:#042F66;overflow:clip;font-family:Inter,Arial,sans-serif}
.cp-hero__photo{position:absolute;inset:0 0 100px 35%;z-index:-2;background:url('../../shared/assets/img-nocapal-compra-palets-hero-1600x900.webp') center center/cover no-repeat}
.cp-hero::before{content:"";position:absolute;inset:0 0 100px 0;z-index:-1;background:linear-gradient(90deg,#f7fbff 0%,#f7fbff 32%,rgba(247,251,255,.92) 44%,rgba(247,251,255,.43) 64%,rgba(247,251,255,0) 90%);pointer-events:none}
.cp-hero__main{max-width:1440px;min-height:520px;box-sizing:border-box;margin:auto;padding:65px 50px 52px;display:flex;align-items:center}
.cp-hero__copy{max-width:590px}.cp-hero__eyebrow{display:block;color:#038fc8;font-size:13px;letter-spacing:.14em;font-weight:800;margin-bottom:18px}
.cp-hero h1{font:800 clamp(42px,4.8vw,74px)/.99 Barlow,Inter,sans-serif;letter-spacing:-.025em;color:#042F66;margin:0 0 22px}
.cp-hero__copy p{font-size:18px;line-height:1.55;color:#536a85;max-width:530px;margin:0 0 30px}
.cp-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.cp-hero__btn{display:inline-flex;justify-content:space-between;align-items:center;gap:25px;min-height:52px;padding:0 23px;text-decoration:none;font-weight:700;font-size:14px;border:1px solid #007fc1;border-radius:0;transition:background .2s,transform .2s}
.cp-hero__btn:hover{transform:translateY(-2px)}.cp-hero__btn--solid{background:#007fc1;color:white}.cp-hero__btn--ghost{background:#ffffffbf;color:#042F66}
.cp-hero__index{background:#e9f4fc;display:grid;grid-template-columns:repeat(4,1fr);max-width:none;padding:15px max(28px,calc((100vw - 1340px)/2));box-sizing:border-box}
.cp-hero__index a{padding:12px 20px;display:flex;flex-direction:column;gap:6px;border-left:1px solid #b9d6e9;text-decoration:none;color:#042F66;min-height:62px}.cp-hero__index a:last-child{border-right:1px solid #b9d6e9}.cp-hero__index b{font:800 24px/1 Barlow,sans-serif;color:#04A0DC}.cp-hero__index span{font:700 16px/1.2 Barlow,sans-serif}
@media(max-width:960px){.cp-hero__photo{left:22%;background-position:65% center}.cp-hero__main{min-height:480px;padding:50px 32px}.cp-hero__copy{max-width:520px}.cp-hero__index{padding-inline:20px}.cp-hero__index a{padding:10px}}
@media(max-width:650px){.cp-hero__photo{inset:0 0 0 0;opacity:.33;background-position:center}.cp-hero::before{inset:0;background:linear-gradient(90deg,rgba(248,252,255,.97),rgba(248,252,255,.85))}.cp-hero__main{min-height:0;padding:50px 22px 35px}.cp-hero h1{font-size:clamp(39px,10vw,56px)}.cp-hero__copy p{font-size:16px}.cp-hero__actions{flex-direction:column}.cp-hero__btn{width:100%;box-sizing:border-box}.cp-hero__index{grid-template-columns:repeat(2,1fr);gap:0;padding:8px 14px}.cp-hero__index a{min-height:58px;border-bottom:1px solid #b9d6e9}.cp-hero__index a:nth-child(2){border-right:1px solid #b9d6e9}}
@media(prefers-reduced-motion:reduce){.cp-hero__btn{transition:none}}


/* V2 — Ajuste del hero a la altura, composición y espaciado de Inicio */
.cp-hero{
  background-color:#eef7fc;
}
.cp-hero__photo{
  inset:0;
  background-position:center center;
  background-size:cover;
}
.cp-hero::before{
  inset:0;
  background:linear-gradient(90deg,
    rgba(247,251,255,.99) 0%,
    rgba(247,251,255,.96) 28%,
    rgba(247,251,255,.89) 39%,
    rgba(247,251,255,.34) 62%,
    rgba(247,251,255,0) 85%);
}
.cp-hero__main{
  width:100%;
  max-width:1440px;
  min-height:700px;
  height:min(820px, 90vh);
  padding:160px clamp(28px,7vw,130px) 74px;
  align-items:center;
}
.cp-hero__copy{max-width:650px;position:relative;z-index:1}
.cp-hero__eyebrow{font-size:12px;margin-bottom:23px}
.cp-hero h1{
  font-family:Barlow,Arial,sans-serif;
  font-size:clamp(56px,5.5vw,90px);
  font-weight:800;
  line-height:.93;
  letter-spacing:-.04em;
  margin:0 0 24px;
}
.cp-hero__copy p{max-width:540px;font-size:18px;line-height:1.75;margin-bottom:24px}
.cp-hero__index{position:relative;z-index:1}
@media(max-width:1100px){
  .cp-hero__main{min-height:700px;height:auto;padding:165px 38px 82px}
  .cp-hero h1{font-size:clamp(52px,6.6vw,78px)}
}
@media(max-width:650px){
  .cp-hero__photo{inset:0;opacity:1;background-position:65% center}
  .cp-hero::before{inset:0;background:linear-gradient(90deg,rgba(247,251,255,.98),rgba(247,251,255,.86) 70%,rgba(247,251,255,.55))}
  .cp-hero__main{min-height:700px;height:auto;padding:166px 24px 60px}
  .cp-hero h1{font-size:clamp(47px,11vw,70px)}
  .cp-hero__copy p{font-size:16px;line-height:1.65}
}
