*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
button,a{font:inherit}
button{cursor:pointer}
.overlay{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s ease;z-index:20}
.overlay.active{opacity:1;visibility:visible}
.loader-logo{width:220px;max-width:40vw;height:auto}
.spinner{width:34px;height:34px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;margin-top:34px;animation:spin .9s linear infinite}
.loading-label{margin-top:16px;font-size:12px;letter-spacing:.22em}
.pct{margin-top:8px;font-size:12px;opacity:.78}
@keyframes spin{to{transform:rotate(360deg)}}
.mini-header{position:absolute;top:0;left:0;width:100%;height:110px;border-bottom:1px solid #202020;display:flex;align-items:center;padding:0 5vw}
.mini-logo{width:54px;height:auto}
.manifesto-inner{width:90%;max-width:1500px;align-self:center}
.manifesto-inner .eyebrow,.kicker{font-size:12px;letter-spacing:.18em;font-weight:700;margin-bottom:28px}
.manifesto-inner h1{font-size:clamp(48px,6vw,98px);line-height:.96;max-width:980px;margin:0;font-weight:700}
.manifesto-inner p{font-size:clamp(18px,2vw,28px);margin-top:28px}
.app{position:fixed;inset:0;background:#000;opacity:0;visibility:hidden;transition:opacity .6s ease}
.app.ready{opacity:1;visibility:visible}
.site-header{height:100px;border-bottom:1px solid #202020;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}
.brand-btn{background:none;border:0;padding:0}
.brand-logo{width:56px;height:auto;display:block}
nav{display:flex;align-items:center;gap:34px}
nav button{background:none;border:0;color:#fff;padding:14px 0}
nav .cta{background:#fff;color:#000;padding:16px 24px;font-weight:700}
.screen-stage{position:relative;height:calc(100vh - 100px)}
.screen{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,visibility .45s ease}
.screen.active{opacity:1;visibility:visible;transform:none}
.home-grid{width:100%;height:100%;display:grid;grid-template-columns:1fr 1.15fr}
.home-links{border-right:1px solid #202020;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;gap:18px}
.feature-link{width:100%;background:transparent;color:#fff;border:0;border-top:1px solid #333;border-bottom:1px solid #333;padding:28px 0;display:flex;justify-content:space-between;text-align:left;font-size:clamp(20px,2.2vw,34px)}
.home-message{display:flex;align-items:center;padding:0 7vw}
.home-message h2{font-size:clamp(34px,4vw,64px);line-height:1.14;margin:0;font-weight:500;max-width:780px}
.content{width:100%;padding:0 7vw}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center}
.two-col h2,.contact h2,.detail h2{font-size:clamp(42px,5vw,78px);line-height:1.03;margin:0}
.copy{font-size:clamp(18px,1.6vw,26px);line-height:1.5;max-width:760px}
.copy p{margin:0 0 18px}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.area-card{min-height:170px;background:#000;color:#fff;border:1px solid #2b2b2b;padding:26px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:.25s}
.area-card:hover{background:#fff;color:#000}
.area-card span{font-size:13px;opacity:.7}
.area-card strong{font-size:clamp(20px,2vw,30px);font-weight:500}
.big-message{font-size:clamp(38px,4.8vw,74px);line-height:1.05;max-width:1200px;margin:0}
.steps{margin-top:56px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:clamp(16px,1.5vw,24px)}
.steps i{font-style:normal;opacity:.55}
.contact{max-width:1100px}
.white-button{display:inline-block;margin-top:36px;background:#fff;color:#000;text-decoration:none;padding:18px 28px;font-weight:700}
.detail-wrap{max-width:1100px}
.detail p{font-size:clamp(18px,1.7vw,27px);line-height:1.5;max-width:850px}
.back{background:none;color:#fff;border:0;padding:0;margin-bottom:46px;text-decoration:underline}
@media (max-width:900px){
  .site-header{height:84px}
  nav{gap:14px}
  nav button{font-size:13px}
  .brand-logo{width:46px}
  .screen-stage{height:calc(100vh - 84px)}
  .home-grid{grid-template-columns:1fr}
  .home-links{border-right:0;border-bottom:1px solid #202020;padding:5vh 7vw;justify-content:center}
  .home-message{padding:6vh 7vw}
  .feature-link{padding:18px 0}
  .two-col{grid-template-columns:1fr;gap:34px}
  .area-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  nav button:not(.cta){display:none}
  nav .cta{padding:12px 16px}
  .manifesto-inner h1{font-size:clamp(42px,12vw,64px)}
  .loader-logo{width:180px}
  .home-message h2{font-size:clamp(30px,8vw,46px)}
  .area-grid{grid-template-columns:1fr;gap:12px}
  .area-card{min-height:110px}
  .steps{gap:10px}
}


/* v0_06 navigation refinements */
.site-header{position:relative;z-index:10}
nav button{
  transition:background .22s ease,color .22s ease,border-color .22s ease;
  padding:14px 12px;
}
nav button:not(.cta):hover{
  background:#fff;
  color:#000;
}
nav .cta:hover{
  background:#000;
  color:#fff;
  outline:1px solid #fff;
}

.feature-link{
  transition:background .22s ease,color .22s ease,padding .22s ease;
  padding-left:16px;
  padding-right:16px;
}
.feature-link:hover{
  background:#fff;
  color:#000;
}

.screen-nav{
  position:absolute;
  left:7vw;
  bottom:28px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  z-index:5;
}
.screen-nav button{
  background:#000;
  color:#fff;
  border:1px solid #2d2d2d;
  padding:12px 16px;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.screen-nav button:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
}

@media (max-width:1100px){
  nav{gap:8px}
  nav button{font-size:12px;padding:12px 8px}
}
@media (max-width:900px){
  nav button[data-screen="areas"],
  nav button[data-screen="metodo"],
  nav button[data-screen="experiencia"]{display:none}
}
@media (max-width:640px){
  nav button[data-screen="nosotros"]{display:none}
  .screen-nav{left:7vw;right:7vw;bottom:16px}
  .screen-nav button{font-size:12px;padding:10px 12px}
}


/* v0_07 — navegación concentrada en panel izquierdo */
.site-header{
  height:100px;
  justify-content:flex-start;
  padding:0 5vw;
}
.site-header nav{display:none}
.screen-stage{height:calc(100vh - 100px)}

.home-grid{
  grid-template-columns:.95fr 1.15fr;
}
.home-links{
  padding:0 7vw;
  gap:0;
  justify-content:center;
}
.feature-link{
  border:0;
  border-top:1px solid #2b2b2b;
  padding:22px 16px;
  font-size:clamp(18px,1.7vw,28px);
}
.feature-link:last-child{
  border-bottom:1px solid #2b2b2b;
}
.feature-link:hover{
  background:#fff;
  color:#000;
  padding-left:24px;
  padding-right:24px;
}
.home-message{
  padding:0 7vw;
}
.home-message h2{
  font-size:clamp(38px,4.1vw,66px);
}

@media (max-width:900px){
  .home-grid{grid-template-columns:1fr}
  .home-links{
    border-right:0;
    border-bottom:1px solid #202020;
    padding:3vh 7vw;
  }
  .feature-link{
    padding:14px 12px;
    font-size:16px;
  }
  .home-message{
    padding:5vh 7vw;
  }
}


/* v0_08 — marca centrada y menú Home simplificado */
.site-header{
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:transparent;
  border:0;
  color:#fff;
}
.brand-logo{
  width:78px;
  height:auto;
}
.brand-copy{
  font-size:11px;
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
  opacity:.88;
}
.screen-stage{
  height:calc(100vh - 132px);
}
.home-links{
  padding-top:0;
  padding-bottom:0;
}
.feature-link{
  padding-top:24px;
  padding-bottom:24px;
}
@media (max-width:900px){
  .site-header{height:112px}
  .screen-stage{height:calc(100vh - 112px)}
  .brand-logo{width:66px}
  .brand-copy{font-size:10px}
}
@media (max-width:640px){
  .site-header{height:102px}
  .screen-stage{height:calc(100vh - 102px)}
  .brand-logo{width:58px}
  .brand-copy{font-size:9px}
}


/* v0_09 — corrección geométrica del eje central
   El divisor vertical queda exactamente alineado con el centro del logo. */
.home-grid{
  grid-template-columns:1fr 1fr;
}
.home-links{
  border-right:1px solid #202020;
}


/* v0_10 — afinamiento visual sobre geometría aprobada */
.site-header{
  height:114px; /* ~14% menor que 132px */
}
.screen-stage{
  height:calc(100vh - 114px);
}

.brand-lockup{
  gap:11px; /* más aire entre isotipo y copyright */
  cursor:default;
  user-select:none;
}
.brand-logo{
  width:98px; /* ~25% mayor que 78px */
}
.brand-copy{
  font-size:10px;
  opacity:.72;
  letter-spacing:.035em;
}

/* Mensaje principal ligeramente más contenido */
.home-message h2{
  font-size:clamp(35px,3.75vw,60px);
  line-height:1.12;
}

/* Menú izquierdo más preciso */
.feature-link{
  font-size:clamp(17px,1.55vw,25px);
  padding-top:22px;
  padding-bottom:22px;
}
.feature-link span:last-child{
  font-size:.82em;
  opacity:.72;
  transform:translateX(-2px);
  transition:opacity .22s ease, transform .22s ease;
}
.feature-link:hover span:last-child{
  opacity:1;
  transform:translateX(3px);
}

@media (max-width:900px){
  .site-header{height:100px}
  .screen-stage{height:calc(100vh - 100px)}
  .brand-logo{width:82px}
  .brand-copy{font-size:9px}
}
@media (max-width:640px){
  .site-header{height:94px}
  .screen-stage{height:calc(100vh - 94px)}
  .brand-logo{width:72px}
  .brand-copy{font-size:8.5px}
}


/* v0_11 — mayor respiración vertical en la franja de marca */
.site-header{
  height:146px;
  padding:18px 0 20px;
}
.screen-stage{
  height:calc(100vh - 146px);
}
.brand-lockup{
  justify-content:center;
  gap:12px;
}
.brand-logo{
  width:98px;
}
.brand-copy{
  margin-bottom:2px;
}

@media (max-width:900px){
  .site-header{
    height:126px;
    padding:14px 0 16px;
  }
  .screen-stage{
    height:calc(100vh - 126px);
  }
}
@media (max-width:640px){
  .site-header{
    height:116px;
    padding:12px 0 14px;
  }
  .screen-stage{
    height:calc(100vh - 116px);
  }
}


/* v0_12 — mejora de nitidez del copyright */
.brand-copy{
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.02em;
  opacity:.95;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

@media (max-width:900px){
  .brand-copy{
    font-size:10px;
  }
}
@media (max-width:640px){
  .brand-copy{
    font-size:9px;
  }
}


/* v0_13 — corrección responsive real para teléfono */
@media (max-width:700px){

  html,body{
    overflow:hidden;
  }

  .site-header{
    height:122px;
    padding:12px 0 14px;
  }

  .brand-logo{
    width:74px;
  }

  .brand-copy{
    font-size:9px;
    line-height:1.1;
  }

  .screen-stage{
    height:calc(100vh - 122px);
  }

  /* En móvil el Home es una pantalla de navegación, no una miniatura del desktop */
  .home-grid{
    grid-template-columns:1fr !important;
    height:100%;
  }

  .home-links{
    width:100%;
    height:100%;
    border-right:0 !important;
    border-bottom:0;
    padding:4vh 7vw 5vh;
    justify-content:center;
    gap:0;
  }

  .feature-link{
    width:100%;
    min-height:64px;
    padding:17px 12px;
    font-size:18px;
    line-height:1.18;
    border-top:1px solid #2b2b2b;
  }

  .feature-link:last-child{
    border-bottom:1px solid #2b2b2b;
  }

  .feature-link span:first-child{
    max-width:82%;
  }

  .feature-link span:last-child{
    font-size:15px;
    opacity:.8;
    flex:0 0 auto;
    margin-left:12px;
  }

  /* El gran manifiesto del panel derecho pertenece al layout desktop */
  .home-message{
    display:none !important;
  }

  /* El hover no debe dejar estados raros en pantallas táctiles */
  .feature-link:hover{
    padding-left:12px;
    padding-right:12px;
  }

  .feature-link:active{
    background:#fff;
    color:#000;
  }
}

@media (max-width:390px){
  .site-header{
    height:116px;
  }
  .screen-stage{
    height:calc(100vh - 116px);
  }
  .home-links{
    padding:3vh 7vw 4vh;
  }
  .feature-link{
    min-height:60px;
    padding:14px 10px;
    font-size:17px;
  }
}


/* v0_14 — continuidad visual Pantalla 2 -> Home
   Misma franja, eje y escala de logo en ambas pantallas. */

.mini-header{
  height:146px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 0 20px;
  border-bottom:1px solid #202020;
}

.mini-logo{
  width:98px;
  height:auto;
}

/* El contenido del manifiesto parte bajo la misma franja del Home */
.manifesto-inner{
  padding-top:146px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Escala del mensaje Home según ancho Y altura útil */
.home-message h2{
  font-size:clamp(34px, min(3.75vw, 6.2vh), 60px);
  line-height:1.10;
}

/* Pantallas desktop de poca altura */
@media (min-width:701px) and (max-height:820px){
  .home-message h2{
    font-size:clamp(32px, min(3.45vw, 5.7vh), 54px);
    line-height:1.08;
  }
}

@media (max-width:900px){
  .mini-header{
    height:126px;
    padding:14px 0 16px;
  }
  .mini-logo{
    width:82px;
  }
  .manifesto-inner{
    padding-top:126px;
  }
}

@media (max-width:700px){
  .mini-header{
    height:122px;
    padding:12px 0 14px;
  }
  .mini-logo{
    width:74px;
  }
  .manifesto-inner{
    padding-top:122px;
  }
}

@media (max-width:390px){
  .mini-header{
    height:116px;
  }
  .mini-logo{
    width:72px;
  }
  .manifesto-inner{
    padding-top:116px;
  }
}


/* v0_15 — franja de marca única desde Pantalla 2 en adelante */
.manifesto-brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  user-select:none;
}
.manifesto-brand-copy{
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.02em;
  opacity:.95;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

/* El manifiesto ya no lleva el rótulo redundante IDAS CONSULTORES */
.manifesto-inner h1{
  margin-top:0;
}

@media (max-width:900px){
  .manifesto-brand-copy{font-size:10px}
}
@media (max-width:700px){
  .manifesto-brand-lockup{gap:8px}
  .manifesto-brand-copy{font-size:9px}
}
@media (max-width:390px){
  .manifesto-brand-copy{font-size:8.5px}
}


/* v0_16 — franja superior realmente unificada desde Pantalla 2 en adelante */
.mini-header,
.site-header{
  height:146px;
  padding:18px 0 20px;
  border-bottom:1px solid #202020;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-header .brand-lockup,
.site-header .brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  user-select:none;
}

.mini-header .brand-logo,
.site-header .brand-logo{
  width:98px;
  height:auto;
  display:block;
}

.mini-header .brand-copy,
.site-header .brand-copy{
  margin:0 0 2px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.02em;
  opacity:.95;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  white-space:nowrap;
}

/* mismo comportamiento responsive en ambas franjas */
@media (max-width:900px){
  .mini-header,
  .site-header{
    height:126px;
    padding:14px 0 16px;
  }
  .screen-stage{height:calc(100vh - 126px)}
  .mini-header .brand-logo,
  .site-header .brand-logo{width:82px}
  .mini-header .brand-copy,
  .site-header .brand-copy{font-size:10px}
  .manifesto-inner{padding-top:126px}
}

@media (max-width:700px){
  .mini-header,
  .site-header{
    height:122px;
    padding:12px 0 14px;
  }
  .screen-stage{height:calc(100vh - 122px)}
  .mini-header .brand-lockup,
  .site-header .brand-lockup{gap:8px}
  .mini-header .brand-logo,
  .site-header .brand-logo{width:74px}
  .mini-header .brand-copy,
  .site-header .brand-copy{font-size:9px; line-height:1.1}
  .manifesto-inner{padding-top:122px}
}

@media (max-width:390px){
  .mini-header,
  .site-header{
    height:116px;
  }
  .screen-stage{height:calc(100vh - 116px)}
  .mini-header .brand-logo,
  .site-header .brand-logo{width:72px}
  .mini-header .brand-copy,
  .site-header .brand-copy{font-size:8.5px}
  .manifesto-inner{padding-top:116px}
}


/* v0_17 — tipografía del manifiesto alineada con Home + watermark tenue */
#manifesto{
  position:fixed;
  overflow:hidden;
}
#manifesto::before{
  content:"";
  position:absolute;
  inset:146px 0 0 0;
  background:
    linear-gradient(to left, rgba(0,0,0,0.12), rgba(0,0,0,0) 42%),
    url("assets/idas-logo.png") no-repeat right 9vw center / min(30vw, 380px);
  opacity:.07;
  filter: blur(2px);
  pointer-events:none;
}

.manifesto-inner{
  position:relative;
  z-index:1;
  width:min(82vw, 1500px);
}

.manifesto-inner h1{
  font-size:clamp(34px, min(3.75vw, 6.2vh), 60px);
  line-height:1.10;
  max-width:720px;
  font-weight:500;
  letter-spacing:0;
}

.manifesto-inner p{
  font-size:clamp(18px, 1.8vw, 24px);
  margin-top:28px;
  max-width:720px;
}

@media (min-width:701px) and (max-height:820px){
  .manifesto-inner h1{
    font-size:clamp(32px, min(3.45vw, 5.7vh), 54px);
    line-height:1.08;
  }
}

@media (max-width:900px){
  #manifesto::before{
    inset:126px 0 0 0;
    background:
      linear-gradient(to left, rgba(0,0,0,0.14), rgba(0,0,0,0) 38%),
      url("assets/idas-logo.png") no-repeat right -10vw center / min(42vw, 260px);
    opacity:.055;
    filter: blur(2px);
  }
}

@media (max-width:700px){
  #manifesto::before{
    display:none;
  }
  .manifesto-inner{
    width:min(86vw, 760px);
  }
  .manifesto-inner h1{
    max-width:100%;
  }
}


/* v0_19 — usar directamente los íconos originales, sin reprocesarlos */
#manifesto::before{display:none !important;}

.manifesto-inner{
  position:relative;
  z-index:1;
  width:min(88vw, 1540px);
  height:calc(100vh - 146px);
  margin:0 auto;
  padding-top:0;
  display:grid;
  grid-template-columns:minmax(520px, 720px) minmax(420px, 1fr);
  align-items:center;
  gap:clamp(34px, 5vw, 88px);
}

.manifesto-copy h1{
  font-size:clamp(34px, min(3.75vw, 6.2vh), 60px);
  line-height:1.10;
  font-weight:500;
  max-width:720px;
  margin:0;
}

.manifesto-copy p{
  font-size:clamp(18px, 1.8vw, 24px);
  margin-top:28px;
}

.manifesto-icons{
  position:relative;
  width:min(100%, 650px);
  aspect-ratio:1.16 / 1;
  justify-self:center;
}

.area-icon{
  position:absolute;
  width:27%;
  height:auto;
  object-fit:contain;
  opacity:.28;
  filter:grayscale(100%);
  z-index:2;
}

/* Cinco íconos originales, equilibrados alrededor del centro */
.i1{left:36.5%; top:0;}
.i2{right:0; top:27%;}
.i3{left:0; top:27%;}
.i4{left:10%; bottom:0;}
.i5{right:10%; bottom:0;}

.network-ring{
  position:absolute;
  left:29%;
  top:22%;
  width:42%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  z-index:0;
}

.network-line{
  position:absolute;
  left:50%;
  top:50%;
  width:31%;
  height:1px;
  background:rgba(255,255,255,.11);
  transform-origin:left center;
  z-index:1;
}
.line-a{transform:rotate(-90deg);}
.line-b{transform:rotate(-28deg);}
.line-c{transform:rotate(28deg);}
.line-d{transform:rotate(145deg);}
.line-e{transform:rotate(215deg);}

@media (min-width:701px) and (max-height:820px){
  .manifesto-copy h1{
    font-size:clamp(32px, min(3.45vw, 5.7vh), 54px);
    line-height:1.08;
  }
  .manifesto-icons{
    width:min(92%, 570px);
  }
}

@media (max-width:1100px){
  .manifesto-inner{
    grid-template-columns:minmax(440px, 1fr) minmax(330px, .9fr);
    width:min(90vw, 1200px);
  }
  .area-icon{opacity:.23;}
}

@media (max-width:900px){
  .manifesto-inner{
    height:calc(100vh - 126px);
    width:min(86vw, 760px);
    grid-template-columns:1fr;
  }
  .manifesto-icons{display:none;}
}

@media (max-width:700px){
  .manifesto-inner{
    height:calc(100vh - 122px);
  }
}

@media (max-width:390px){
  .manifesto-inner{
    height:calc(100vh - 116px);
    width:min(88vw, 760px);
  }
}


/* v0_20 — composición más orgánica y limpia para la pantalla 2 */
.manifesto-icons{
  width:min(100%, 620px);
  aspect-ratio:1.12 / 1;
  justify-self:center;
}

.area-icon{
  width:29%;
  opacity:.40;
  filter:grayscale(100%);
}

/* Reubicación más orgánica, sin rueda técnica */
.i1{left:35.5%; top:1%;}
.i2{right:1%; top:23%;}
.i3{left:2%; top:27%;}
.i4{left:14%; bottom:2%;}
.i5{right:12%; bottom:1%;}

/* Eliminar el círculo y las líneas del esquema anterior */
.network-ring,
.network-line{
  display:none !important;
}

@media (max-width:1100px){
  .area-icon{opacity:.34;}
}