/* ═══════════════════════════════════════════════════════════
   ECOSISTEMA DE CLIENTES — Oreka Consultores
   Laboratorio / fase de prueba
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --azul:#1F4E79;
  --azul-desc:#3B82C4;
  --azul-claro:#5BA8F5;
  --niebla:#EBF3FB;
  --tierra:#A0714F;
  --gris:#6B7280;
  --negro:#1A1A1A;
  --blanco:#FFFFFF;
  --fondo:#FDFAF7;
  --borde:rgba(0,0,0,0.08);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Jost',Arial,sans-serif;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--negro);color:var(--blanco);line-height:1.7;font-weight:300}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* NAV oscura */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(26,26,26,0.92);backdrop-filter:blur(10px);border-bottom:.5px solid rgba(255,255,255,.06);padding:0 48px;display:flex;align-items:center;justify-content:space-between;height:52px}
.nav-logo-img{height:46px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{color:rgba(255,255,255,.7) !important;border:.5px solid rgba(255,255,255,.25);padding:5px 14px;border-radius:3px;transition:all .2s !important}
.nav-cta:hover{background:rgba(255,255,255,.12);color:#fff !important}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-burger span{display:block;width:20px;height:1px;background:#fff}
.progress-bar{position:fixed;top:52px;left:0;z-index:99;height:2px;background:var(--azul-claro);width:0%;transition:width .1s linear;opacity:.8}

/* HERO */
.eco-hero{position:relative;padding:150px 48px 64px;overflow:hidden}
.eco-hero-orbit{position:absolute;top:50%;right:-120px;transform:translateY(-50%);width:420px;height:420px;opacity:.12;filter:brightness(0) invert(1);animation:ecoSpin 90s linear infinite;pointer-events:none;z-index:0}
@keyframes ecoSpin{to{transform:translateY(-50%) rotate(360deg)}}
.eco-hero-inner{position:relative;z-index:1;max-width:680px}

.eco-badge{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tierra);background:rgba(160,113,79,.12);border:.5px solid rgba(160,113,79,.35);border-radius:100px;padding:7px 16px;margin-bottom:28px;opacity:0;animation:ecoFade .8s ease .1s forwards}
.eco-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--tierra);animation:ecoPulse 2.4s ease-in-out infinite}
@keyframes ecoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}

.eco-title{font-family:var(--serif);font-size:clamp(38px,5.5vw,62px);font-weight:400;color:#fff;line-height:1.08;letter-spacing:-.5px;margin-bottom:28px;opacity:0;animation:ecoFade .9s ease .25s forwards}

.eco-sep{display:flex;align-items:center;gap:10px;margin-bottom:24px;opacity:0;animation:ecoFade .8s ease .4s forwards}
.eco-sep span{width:60px;height:.5px;background:rgba(255,255,255,.15)}
.eco-sep i{width:5px;height:5px;border-radius:50%;background:var(--azul-claro)}

.eco-sub{font-size:15px;font-weight:300;color:rgba(255,255,255,.55);line-height:1.9;max-width:620px;margin-bottom:24px;opacity:0;animation:ecoFade .8s ease .55s forwards}
.eco-aviso{font-size:13px;font-weight:300;font-style:italic;color:rgba(255,255,255,.35);line-height:1.85;max-width:600px;border-left:.5px solid rgba(160,113,79,.35);padding-left:18px;opacity:0;animation:ecoFade .8s ease .7s forwards}
@keyframes ecoFade{to{opacity:1}}

/* SECTION / FRAME */
.eco-section{max-width:1100px;margin:0 auto;padding:24px 48px 110px;position:relative;z-index:1}

.eco-frame{border-radius:14px;overflow:hidden;border:.5px solid rgba(255,255,255,.1);background:#0f0f0f;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.eco-frame-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:rgba(255,255,255,.03);border-bottom:.5px solid rgba(255,255,255,.06)}
.eco-dot{width:9px;height:9px;border-radius:50%;display:block}
.eco-dot--a{background:#D07070}
.eco-dot--b{background:#C49A5A}
.eco-dot--c{background:#6AAF8A}
.eco-frame-label{margin-left:8px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.eco-frame-body{background:var(--fondo)}
.eco-iframe{display:block;width:100%;height:760px;border:none}

.eco-footnote{margin-top:28px;font-size:12px;font-weight:300;color:rgba(255,255,255,.3);line-height:1.8;max-width:560px}

/* FOOTER */
.footer{background:var(--negro);padding:48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;border-top:.5px solid rgba(255,255,255,.06)}
.footer-logo{display:flex;flex-direction:column;gap:6px}
.footer-logo-img{height:56px;width:auto;opacity:.9}
.footer-logo span{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.footer-links{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.footer-links a{font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.32);transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.75)}
.footer-meta{font-size:9px;font-weight:300;color:rgba(255,255,255,.18);letter-spacing:.06em}
.footer-legal-sep{color:rgba(255,255,255,.15);margin:0 6px}
.footer-legal-link{color:rgba(255,255,255,.18);font-size:9px;font-weight:300;letter-spacing:.06em;transition:color .2s}
.footer-legal-link:hover{color:rgba(255,255,255,.5)}

/* RESPONSIVE */
@media(max-width:900px){
  .nav{padding:0 24px}
  .eco-hero{padding:130px 32px 48px}
  .eco-hero-orbit{width:300px;height:300px;right:-100px}
  .eco-section{padding:16px 32px 90px}
  .eco-iframe{height:680px}
  .footer{padding:36px}
}
@media(max-width:640px){
  .nav{padding:0 20px}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:52px;left:0;right:0;background:rgba(12,22,34,.98);border-bottom:.5px solid rgba(255,255,255,.08);padding:20px 24px;gap:16px;z-index:99}
  .nav-burger{display:flex}
  .eco-hero{padding:118px 24px 40px}
  .eco-hero-orbit{display:none}
  .eco-section{padding:12px 24px 72px}
  .eco-frame{border-radius:10px}
  .eco-iframe{height:620px}
  .footer{padding:32px 24px;flex-direction:column;align-items:flex-start}
}