/* ===== Lozada · Gateway (3 design directions chooser) ===== */
:root{
  --green:#02A566; --green-bright:#07C57C; --green-deep:#017A4B; --green-tint:#E7F6EF;
  --ink:#14171C; --paper:#FFFFFF; --cloud:#F4F6F5; --muted:#6B7280; --line:#E6E9E8;
  --bg:#0A0C0E; --bg-2:#12161A; --fog:#0E1A14;
  --r:20px; --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:#EAF0EE;
  font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  line-height:1.55; overflow-x:hidden;
}
h1,h2,h3{font-family:Sora,sans-serif; line-height:1.05; letter-spacing:-.02em; margin:0}
a{color:inherit; text-decoration:none}
img,video{display:block; max-width:100%}
.skip{position:absolute; left:-999px; top:0; background:var(--green); color:#fff; padding:.7rem 1rem; border-radius:0 0 10px 0; z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--green-bright); outline-offset:3px; border-radius:6px}

/* ambient mesh */
.mesh{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.orb--1{width:46vw; height:46vw; left:-12vw; top:-10vw; background:radial-gradient(circle,#02A56688,transparent 70%)}
.orb--2{width:40vw; height:40vw; right:-12vw; top:18vh; background:radial-gradient(circle,#07C57C55,transparent 70%)}
.orb--3{width:50vw; height:50vw; left:25vw; bottom:-25vw; background:radial-gradient(circle,#017A4B66,transparent 70%)}

/* header */
.gw-head{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.4rem clamp(1.1rem,4vw,3rem); flex-wrap:wrap;
}
.brand img{height:30px; width:auto}
.brand-tag{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#9fb4ac}

/* layout */
main{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem) 4rem}

/* intro */
.intro{text-align:center; padding:clamp(2.4rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem); max-width:820px; margin:0 auto}
.eyebrow{font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green-bright); margin:0 0 1.1rem; font-weight:600}
.intro h1{font-size:clamp(2.6rem,8vw,5.2rem); font-weight:800}
.grad{background:linear-gradient(100deg,var(--green-bright),#5fe6ad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{margin:1.4rem auto 0; max-width:660px; color:#b9c7c2; font-size:clamp(1rem,1.6vw,1.12rem)}
.lede strong{color:#fff; font-weight:600}
.scroll-cue{display:inline-grid; place-items:center; width:42px; height:42px; margin-top:2.2rem; border-radius:50%; border:1px solid #ffffff2a}
.scroll-cue span{width:7px; height:7px; border-right:2px solid var(--green-bright); border-bottom:2px solid var(--green-bright); transform:rotate(45deg) translateY(-2px); animation:bob 1.6s var(--ease) infinite}
@keyframes bob{0%,100%{transform:rotate(45deg) translateY(-3px)}50%{transform:rotate(45deg) translateY(2px)}}

/* card grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.4vw,1.7rem); align-items:stretch}
.card{
  position:relative; display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden;
  background:var(--bg-2); border:1px solid #ffffff14; isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{transform:translateY(-8px); border-color:#ffffff2e; box-shadow:0 30px 70px -28px #000a}
.card__media{position:relative; aspect-ratio:16/10; overflow:hidden; background:#000}
.card__media img,.card__media video{width:100%; height:100%; object-fit:cover}
.card__media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,#0a0c0ecc,transparent 55%)}
.card__body{display:flex; flex-direction:column; flex:1; padding:1.4rem 1.4rem 1.5rem; gap:.7rem}
.card__head{display:flex; align-items:baseline; gap:.6rem}
.card__head h2{font-size:1.5rem; font-weight:700}
.card__tagline{color:#b9c7c2; font-size:.95rem; margin:0}
.card__feats{list-style:none; margin:.2rem 0 .4rem; padding:0; display:flex; flex-direction:column; gap:.5rem; flex:1}
.card__feats li{position:relative; padding-left:1.5rem; font-size:.9rem; color:#d4ded9}
.card__feats li::before{content:""; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #02a56630}
.card__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.4rem;
  padding:.85rem 1.2rem; border-radius:12px; font-weight:600; font-size:.95rem;
  background:var(--green-deep); color:#fff; transition:background .25s var(--ease), gap .25s var(--ease);
}
.card__cta:hover{background:#015c39; gap:.85rem}
.card__cta svg{transition:transform .25s var(--ease)}
.card__cta:hover svg{transform:translateX(3px)}

/* per-direction card personalities (preview the aesthetic — implicit, no ranking) */
.card--esencial{background:#fff; border-color:#0000}
.card--esencial .card__head h2{color:var(--ink)}
.card--esencial .card__tagline{color:#4b5563}
.card--esencial .card__feats li{color:#374151}
.card--esencial .card__media::after{background:linear-gradient(to top,#ffffffcc,transparent 55%)}

.card--profesional{background:#fbfcfb; border:1px solid #e6e9e8}
.card--profesional .card__head h2{color:var(--ink)}
.card--profesional .card__tagline{color:#4b5563}
.card--profesional .card__feats li{color:#374151}
.card--profesional .card__body{border-top:3px solid var(--green)}
.card--profesional .card__media::after{background:linear-gradient(to top,#0a0c0e99,transparent 60%)}

.card--cine{background:linear-gradient(180deg,#0e1419,#0a0c0e); border:1px solid #07c57c33; box-shadow:0 0 0 1px #02a56618, 0 30px 80px -40px #02a56655}
.card--cine:hover{box-shadow:0 0 0 1px #07c57c44, 0 36px 90px -34px #07c57c66}
.card--cine .card__media::after{background:linear-gradient(to top,#0a0c0eee,transparent 62%)}

.card--v4{background:linear-gradient(160deg,#063a28,#02160f); border:1px solid #07c57c4d; box-shadow:0 0 0 1px #07c57c2b, 0 30px 80px -38px #07c57c66}
.card--v4:hover{box-shadow:0 0 0 1px #07c57c70, 0 36px 92px -30px #07c57c99}
.card--v4 .card__media::after{background:linear-gradient(to top,#02160fee,transparent 60%)}

/* shared foundation strip (commonality, not comparison) */
.shared{margin-top:clamp(3rem,7vw,5rem); text-align:center}
.shared__title{font-size:clamp(1.5rem,4vw,2.2rem); font-weight:700}
.shared__sub{margin:.8rem auto 2rem; color:#b9c7c2; max-width:560px}
.shared__chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}
.shared__chips li{
  display:inline-flex; align-items:center; gap:.55rem; padding:.6rem 1.1rem; border-radius:999px;
  background:#0e1216aa; border:1px solid #ffffff16; backdrop-filter:blur(8px);
  font-size:.9rem; color:#d4ded9;
}
.shared__chips li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 10px #07c57c}

/* footer */
.gw-foot{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:2.4rem clamp(1.1rem,4vw,2rem) 3rem; border-top:1px solid #ffffff12;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.gw-foot__brand{display:flex; align-items:center; gap:.9rem}
.gw-foot__brand p{margin:0; font-size:.85rem; color:#9fb4ac}
.gw-foot__meta{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.85rem; color:#b9c7c2}
.gw-foot__meta a:hover{color:var(--green-bright)}
.gw-foot__meta .dim{color:#8a978f}

/* reveal (translate only — no opacity blend, keeps text full-contrast during motion) */
.reveal{transform:translateY(26px); transition:transform .7s var(--ease)}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none; transition:none}
  .scroll-cue span{animation:none}
  .card{transition:none}
  video{display:none}
  .card__media--video::before{content:""; position:absolute; inset:0; background:#000 url(./assets/pf-02-hd.webp) center/cover}
  .card--v4 .card__media--video::before{background-image:url(./assets/pf-06-hd.webp)}
}

/* responsive */
@media (max-width:900px){
  .grid{grid-template-columns:1fr; max-width:480px; margin:0 auto}
}
@media (max-width:520px){
  .gw-foot{flex-direction:column; align-items:flex-start}
}