/* La foto del águila es vertical: ocupa la mitad derecha del hero */
.hero-media{left:42%;inset-block-start:90px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.hero-media img{object-position:30% 20%}
.hero h1{max-width:15ch}

/* ---------- Universo ---------- */
.uni{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.rings{width:100%;max-width:520px;margin-left:auto;overflow:visible}
.rings .r{fill:none;stroke:rgba(11,11,11,.14);stroke-width:1.2;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.6s var(--ease),stroke .5s,fill .5s}
.rings.in .r{stroke-dashoffset:0}
.rings .r.on{stroke:var(--accent);stroke-width:2;fill:rgba(228,100,71,.05)}
.rings .tagn{font-family:var(--serif);font-style:italic;font-size:15px;fill:var(--gray-mid);transition:fill .5s}
.rings .tagn.on{fill:var(--accent)}
.rings .core{fill:var(--accent)}
.rings .pulse{fill:rgba(228,100,71,.25);transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(3);opacity:0}}
.uni-list{list-style:none;margin-top:2.4rem;border-top:1px solid var(--line-light)}
.uni-list li{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line-light);cursor:default;transition:opacity .4s}
.uni-list small{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem}
.uni-list b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.2}
.uni-list span{display:block;margin-top:.2rem;font-size:.9rem}
.uni-list li:not(.on){opacity:.45}

/* ---------- Qualitas Insight ---------- */
.insight{overflow:hidden;background:#111;position:relative;}
.insight-bg{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.75}
.insight::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.2),rgba(11,11,11,.85))}
.insight .wrap{position:relative;z-index:1}
.insight p.sub{max-width:52ch}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(3rem,6vw,4.5rem)}
.feat{padding:clamp(1.4rem,2.6vw,2.2rem);border-radius:22px;background:rgba(20,20,20,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line-dark);transition:box-shadow .4s,transform .5s var(--ease)}
.feat:hover{box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-4px)}
.feat small{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem}
.feat h3{margin-top:2.4rem;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.1}
.feat p{margin-top:.6rem;font-size:.95rem;color:rgba(247,247,247,.7)}

/* ---------- La decisión sigue siendo humana ---------- */
.tiles{display:flex;gap:.8rem;height:clamp(320px,42vw,480px);margin-top:clamp(2.5rem,5vw,4rem)}
.tile{flex:1;position:relative;border-radius:22px;overflow:hidden;transition:flex .8s var(--ease)}
.tile:hover,.tile:focus-within{flex:2.2}
.tile .ph-img{position:absolute;inset:0;align-items:flex-start;display:flex;}
.tile h3{position:absolute;left:1.4rem;bottom:1.3rem;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.8rem);color:#fff}
.tile::after{content:"";position:absolute;left:1.4rem;bottom:1rem;width:0;height:2px;background:var(--accent);transition:width .6s var(--ease)}
.tile:hover::after{width:48px}

/* ---------- Invertimos contigo ---------- */
.with{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.big-n{font-family:var(--serif);font-size:clamp(5rem,13vw,11rem);line-height:.82;letter-spacing:-.04em;color:var(--accent);display:flex;align-items:baseline;white-space:nowrap}
.big-n small{font-size:.32em;letter-spacing:0;margin-left:.15em;color:var(--light)}
.with div p{margin-top:1.2rem;max-width:48ch;font-size:clamp(1rem,1.3vw,1.15rem);color:rgba(247,247,247,.72)}

/* ---------- Proceso de selección: embudo ---------- */
.sel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.sel .h2{position:sticky;top:120px}
.funnel{list-style:none;border-top:1px solid var(--line-light)}
.funnel li{display:grid;grid-template-columns:2.6rem minmax(9rem,13rem) 1fr;align-items:center;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line-light)}
.funnel small{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--accent)}
.funnel b{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.15;transition:color .4s}
/* la barra se angosta en cada etapa: el embudo se lee de un vistazo */
.funnel .bar{height:14px;display:flex;justify-content:center}
.funnel .bar i{display:block;width:var(--w);height:100%;border-radius:999px;background:var(--black);opacity:calc(.35 + var(--k)*.1);transform:scaleX(0);transition:transform 1.1s var(--ease),background .4s,opacity .4s;transition-delay:calc(var(--k)*.12s)}
.funnel.in .bar i{transform:none}
.funnel li.own b{color:var(--accent)}
.funnel li.own .bar i{background:var(--accent);opacity:1}
.funnel li:hover b{color:var(--accent)}
.funnel li:hover .bar i{opacity:1}

/* ---------- Track record ---------- */
.tr-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line-dark)}
.tr{padding:2rem 1.4rem 2rem 0;border-right:1px solid var(--line-dark)}
.tr+.tr{padding-left:1.4rem}
.tr:last-child{border-right:0}
.tr svg{width:40px;height:40px;color:var(--accent)}
.tr .v{margin-top:1.8rem;font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.03em;display:flex;align-items:baseline;gap:.15em;flex-wrap:wrap}
.tr .v small{font-size:.38em;letter-spacing:0;color:var(--accent)}
.tr p{margin-top:.7rem;font-size:.92rem;color:rgba(247,247,247,.65)}
.notes{margin-top:2rem;font-size:.76rem;color:var(--gray-mid);max-width:80ch}
.end-cta{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--line-light)}

@media (max-width:860px){
  .hero-media{left:0;-webkit-mask-image:none;mask-image:none}
  .hero-media img{object-position:50% 15%}
  .uni,.with{grid-template-columns:1fr}
  .rings{margin:0 auto;max-width:380px}
  .feats{grid-template-columns:1fr}
  .tiles{flex-direction:column;height:auto}
  .tile{flex:none;height:150px}
  .tile:hover,.tile:focus-within{flex:none}
  .sel{grid-template-columns:1fr}
  .sel .h2{position:static}
  .funnel li{grid-template-columns:2.2rem 1fr;row-gap:.6rem}
  .funnel .bar{grid-column:2;justify-content:flex-start}
  .tr-grid{grid-template-columns:1fr 1fr}
  .tr,.tr+.tr{padding:1.6rem 1rem 1.6rem 0;border-right:0;border-bottom:1px solid var(--line-dark)}
  .tr:nth-child(even){padding-left:1rem;border-left:1px solid var(--line-dark)}
}