:root{--p:#0a2342;--a:#ff6b2c;--bg:#ffffff;--ink:#1c2535;--soft:#f4f6fa}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
.ribbon{background:#111;color:#fff;font-size:12px;padding:8px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.ribbon a{background:#ff6b2c;padding:5px 12px;border-radius:999px;font-weight:700}
.top{position:sticky;top:0;background:var(--bg);z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;border-bottom:1px solid #e6e9f0;flex-wrap:wrap;gap:10px}
.top .lg{font-weight:800;font-size:19px;color:var(--p);letter-spacing:-.3px}
.top nav{display:flex;gap:18px;font-size:14px;font-weight:600;flex-wrap:wrap}
.top nav a:hover{color:var(--a)}
.btn{display:inline-block;background:var(--a);color:var(--bt,#fff);padding:12px 26px;border-radius:10px;font-weight:700;font-size:14px;border:0;cursor:pointer;font-family:inherit}
.btn.o{background:transparent;border:2px solid #fff;color:#fff}
.hero{background:linear-gradient(135deg,var(--p),var(--p2,var(--p)));color:#fff;padding:90px 28px;text-align:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:var(--a);opacity:.22}
.hero h1{font-size:clamp(30px,5.5vw,56px);font-weight:800;line-height:1.08;max-width:820px;margin:0 auto 14px;position:relative}
.hero p{max-width:620px;margin:0 auto 26px;font-size:17px;opacity:.92;position:relative}
.hero .ct{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}
section{scroll-margin-top:70px;padding:64px 28px;max-width:1100px;margin:0 auto}
section.full{max-width:none;background:var(--soft)}
section.full>.in{max-width:1100px;margin:0 auto}
h2.t{font-size:clamp(24px,3.5vw,34px);font-weight:800;color:var(--p);margin-bottom:8px}
.lead{color:#5a677d;margin-bottom:28px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.c{background:#fff;border:1px solid #e6e9f0;border-radius:16px;padding:24px;box-shadow:0 6px 18px rgba(20,30,60,.05)}
.c .ic{font-size:30px;margin-bottom:8px}
.c h3{font-size:17px;margin-bottom:6px;color:var(--p)}
.c p{font-size:14px;color:#5a677d}
.st{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.st div{background:var(--p);color:#fff;border-radius:16px;padding:24px;text-align:center}
.st b{display:block;font-size:34px;color:var(--a)}
.st span{font-size:13px;opacity:.85}
.pr{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.pr .p{background:#fff;border:2px solid #e6e9f0;border-radius:18px;padding:26px;text-align:center;position:relative}
.pr .p.hot{border-color:var(--a);transform:scale(1.03)}
.pr .p.hot::before{content:"Más popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--a);color:var(--bt,#fff);font-size:11px;font-weight:800;padding:3px 12px;border-radius:999px}
.pr h3{color:var(--p);font-size:18px}
.pr .m{font-size:34px;font-weight:800;margin:8px 0;color:var(--p)}
.pr .m small{font-size:13px;font-weight:500;color:#7a8699}
.pr ul{list-style:none;margin:10px 0 18px;font-size:14px;color:#55627a}
.pr li{padding:4px 0;border-bottom:1px dashed #e6e9f0}
table.tb{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid #e6e9f0}
.tb th,.tb td{padding:13px 16px;text-align:left;font-size:14px;border-bottom:1px solid #eef0f5}
.tb th{background:var(--p);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.tb .tg{background:var(--a);color:var(--bt,#fff);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gal div{aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:34px;position:relative;overflow:hidden}
.gal div:nth-child(3n+1){aspect-ratio:4/3}
.gal div span{position:absolute;left:10px;bottom:8px;font-size:12px;font-weight:700;background:rgba(0,0,0,.35);padding:3px 9px;border-radius:999px}
.q{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.q blockquote{background:#fff;border-left:4px solid var(--a);border-radius:12px;padding:22px;font-size:15px;box-shadow:0 6px 18px rgba(20,30,60,.05)}
.q cite{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--p);font-style:normal}
.pd{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pd .it{background:#fff;border:1px solid #e6e9f0;border-radius:16px;overflow:hidden}
.pd .im{height:130px;display:grid;place-items:center;font-size:46px;background:var(--soft)}
.pd .bd{padding:14px}
.pd .bd h4{font-size:14px;color:var(--p)}
.pd .bd b{color:var(--a);display:block;margin-top:4px}
.spn{display:flex;flex-wrap:wrap;gap:12px}
.spn span{border:2px dashed #cfd6e3;border-radius:12px;padding:14px 24px;font-weight:800;color:#8d99ae}
.fm{display:grid;gap:14px;max-width:560px}
.fm label{font-size:13px;font-weight:600;display:grid;gap:6px}
.fm input,.fm select,.fm textarea{padding:13px;border-radius:10px;border:1px solid #d5dbe7;font:inherit}
.map{height:240px;border-radius:16px;background:repeating-linear-gradient(45deg,#e8edf5 0 14px,#f1f4f9 14px 28px);display:grid;place-items:center;color:#667;font-weight:700}
.dem-foot{background:var(--p);color:#fff;text-align:center;padding:30px;font-size:13px}
.dem-foot a{color:var(--a);font-weight:700}
.wa{position:fixed;right:16px;bottom:16px;background:#25d366;color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 8px 22px rgba(0,0,0,.3);z-index:30}
.cd{display:flex;gap:12px;justify-content:center;margin-top:18px}
.cd div{background:rgba(255,255,255,.15);border-radius:12px;padding:12px 18px;text-align:center}
.cd b{display:block;font-size:28px}
.cd span{font-size:11px;text-transform:uppercase;letter-spacing:1px}

/* ---- 3D / movimiento ---- */
.top .lg{display:flex;align-items:center;gap:11px}
.logo3d{width:42px;height:42px;display:inline-block;perspective:420px;flex:none}
.logo3d b{display:grid;place-items:center;width:100%;height:100%;border-radius:12px;font-weight:800;font-size:16px;color:var(--bt,#fff);letter-spacing:-.5px;
 background:linear-gradient(145deg,rgba(255,255,255,.55),transparent 45%),linear-gradient(135deg,var(--a),var(--p));
 box-shadow:1px 1px 0 var(--p),2px 2px 0 var(--p),3px 3px 0 var(--p),4px 5px 0 rgba(0,0,0,.35),6px 10px 14px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.7);
 text-shadow:0 2px 3px rgba(0,0,0,.4);animation:coin 6s ease-in-out infinite;transform-style:preserve-3d}
@keyframes coin{0%,100%{transform:rotateY(-24deg) rotateX(8deg)}50%{transform:rotateY(24deg) rotateX(-4deg)}}
.hero{padding:70px 28px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:1}
.hero .tx{text-align:left}
.hero .tx h1{margin-left:0}.hero .tx p{margin-left:0}.hero .tx .ct{justify-content:flex-start}
.hero .tx .cd{justify-content:flex-start}
.stage{position:relative;height:340px;perspective:900px;display:grid;place-items:center}
.stage .orb{width:210px;height:210px;border-radius:50%;display:grid;place-items:center;font-size:92px;position:relative;
 background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.75),rgba(255,255,255,.12) 38%,transparent 55%),radial-gradient(circle at 65% 75%,rgba(0,0,0,.45),transparent 60%),linear-gradient(145deg,var(--a),var(--p));
 box-shadow:0 30px 50px rgba(0,0,0,.35),inset -14px -18px 30px rgba(0,0,0,.35),inset 8px 8px 20px rgba(255,255,255,.25);animation:floaty 5s ease-in-out infinite}
.stage .orb span{filter:drop-shadow(0 10px 8px rgba(0,0,0,.4));animation:spinY 9s linear infinite;display:block}
.stage .ring{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;border:3px solid rgba(255,255,255,.55);box-shadow:0 0 18px rgba(255,255,255,.2)}
.stage .r1{animation:ringA 11s linear infinite}.stage .r2{width:250px;height:250px;margin:-125px 0 0 -125px;border-color:var(--a);animation:ringB 8s linear infinite}
.stage .sat{position:absolute;font-style:normal;font-size:30px;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
 background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.55));box-shadow:0 12px 20px rgba(0,0,0,.3),inset 0 -4px 8px rgba(0,0,0,.12)}
.sat.s1{left:6%;top:10%;animation:floaty 4s ease-in-out infinite}
.sat.s2{right:4%;top:26%;animation:floaty 5s ease-in-out -1.5s infinite}
.sat.s3{left:14%;bottom:6%;animation:floaty 4.5s ease-in-out -3s infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes spinY{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes ringA{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes ringB{from{transform:rotateX(68deg) rotateY(25deg) rotateZ(360deg)}to{transform:rotateX(68deg) rotateY(25deg) rotateZ(0)}}
.c .ic,.pd .im{position:relative}
.c .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:32px;margin-bottom:14px;
 background:linear-gradient(145deg,#fff,var(--soft));box-shadow:0 10px 18px rgba(20,30,60,.18),inset 0 -4px 8px rgba(20,30,60,.08),inset 0 2px 2px #fff;animation:floaty 5s ease-in-out infinite}
.c{transition:transform .3s,box-shadow .3s}.c:hover{transform:translateY(-6px) rotateX(4deg);box-shadow:0 18px 30px rgba(20,30,60,.16)}
.c:nth-child(2) .ic{animation-delay:-1.2s}.c:nth-child(3) .ic{animation-delay:-2.4s}.c:nth-child(4) .ic{animation-delay:-3.6s}
.gal div::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 45%);pointer-events:none}
.gal div{box-shadow:0 12px 22px rgba(0,0,0,.2);transition:transform .35s;perspective:600px}
.gal div:hover{transform:translateY(-6px) scale(1.02)}
.gal div::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.gal div{font-size:52px;text-shadow:0 8px 10px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.4)}
.gal div span{text-shadow:none}
.pd .im{height:150px;font-size:62px;background:radial-gradient(circle at 30% 20%,#fff,var(--soft) 60%,#dfe5f0);text-shadow:0 10px 10px rgba(0,0,0,.25)}
.pd .it{transition:transform .3s,box-shadow .3s}.pd .it:hover{transform:translateY(-6px);box-shadow:0 18px 28px rgba(20,30,60,.16)}
.pd .im{animation:none}.pd .it:hover .im{animation:floaty 2s ease-in-out infinite}
.st div{background:linear-gradient(145deg,rgba(255,255,255,.14),transparent 50%),var(--p);box-shadow:0 12px 22px rgba(0,0,0,.2),inset 0 1px 1px rgba(255,255,255,.25)}
.btn{box-shadow:0 5px 0 rgba(0,0,0,.22),0 12px 16px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.btn.o{box-shadow:none}
@media(max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .tx{text-align:center}.hero .tx .ct,.hero .tx .cd{justify-content:center}.hero .tx h1,.hero .tx p{margin-left:auto}.stage{height:260px;order:-1}.stage .orb{width:150px;height:150px;font-size:64px}.stage .ring{width:220px;height:220px;margin:-110px 0 0 -110px}.stage .r2{width:180px;height:180px;margin:-90px 0 0 -90px}.stage .sat{width:48px;height:48px;font-size:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.hphoto{position:relative;justify-self:center;width:min(340px,100%);animation:floaty 6s ease-in-out infinite}
.hphoto img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:22px;box-shadow:0 30px 50px rgba(0,0,0,.4),0 0 0 6px rgba(255,255,255,.14)}
.badge{position:absolute;background:#fff;color:var(--p);border-radius:14px;padding:10px 16px;font-weight:700;font-size:13px;box-shadow:0 14px 24px rgba(0,0,0,.3)}
.badge b{display:block;font-size:24px;color:var(--a);line-height:1.1}
.badge.b1{left:-34px;bottom:34px}.badge.b2{right:-22px;top:28px}
.pgal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pgal .ph{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;box-shadow:0 12px 24px rgba(20,30,60,.18);margin:0}
.pgal .ph.wide{grid-column:span 2;aspect-ratio:auto}
.pgal .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.pgal .ph:hover img{transform:scale(1.07)}
.pgal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;color:#fff;font-size:13px;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.7))}
section.bn{max-width:none;padding:0}
.bn figure{position:relative;margin:0;height:340px;overflow:hidden}
.bn img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.bn figcaption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px max(28px,calc((100% - 1100px)/2));background:linear-gradient(90deg,rgba(10,35,66,.9),rgba(10,35,66,.1));color:#fff}
.bn q{font-size:clamp(20px,3vw,30px);font-weight:800;max-width:560px;line-height:1.2;quotes:none}
.bn b{margin-top:8px;color:var(--a);font-size:14px}
@media(max-width:760px){.pgal{grid-template-columns:1fr 1fr}.pgal .ph.wide{grid-column:span 2}.badge.b1{left:-8px}.badge.b2{right:-6px}.hphoto{order:-1;width:min(260px,70%)}}

/* ajuste de tamaño de fotos */
.hphoto{width:min(270px,100%)}
.hphoto img{aspect-ratio:4/5;max-height:min(340px,48vh)}
.hero{padding:56px 28px}
.pgal{grid-template-columns:repeat(var(--c,3),1fr);gap:12px}
.pgal .ph,.pgal .ph.wide{grid-column:auto;aspect-ratio:3/2}
.pgal figcaption{font-size:12px;padding:20px 10px 8px}
.bn figure{height:220px;max-width:1100px;margin:0 auto;border-radius:16px}
section.bn{padding:0 28px}
.bn figcaption{padding:24px 28px}
.bn q{font-size:clamp(17px,2.4vw,24px)}
@media(max-width:760px){.hphoto{width:min(210px,64%)}.hphoto img{max-height:260px}.pgal{grid-template-columns:1fr 1fr;gap:10px}.pgal .ph.wide{grid-column:auto}.bn figure{height:200px}section.bn{padding:0 16px}.badge{font-size:11px;padding:7px 11px}.badge b{font-size:18px}}


.bn figcaption{background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.05))!important}
.bn b{color:#fff!important;opacity:.9}
.dem-foot a{color:#fff!important;text-decoration:underline}

.pc{padding:0!important;overflow:hidden}
.pc img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .5s}
.pc:hover img{transform:scale(1.05)}
.pc h3{padding:16px 20px 4px}.pc p{padding:0 20px 20px}
.st4 .sp{display:grid;grid-template-columns:repeat(4,1fr);height:100%}
.st4 .sp img{width:100%;height:100%;object-fit:cover}
.st4 figcaption{background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.25))!important}
@media(max-width:760px){.st4 .sp{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr}.st4 figure{height:260px!important}}

.hphoto.land{width:min(420px,100%)}
.hphoto.land img{aspect-ratio:3/2;max-height:none}
@media(max-width:760px){.hphoto.land{width:min(320px,86%)}}