/* ============================== */
/* GLOBAL */
body {
  background: white;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif; /* ahora Poppins en todo */
}

/* CONTENEDOR PRINCIPAL (escritorio) */
#inicio {
  position: relative;
  width: calc(100% - 220px);
  margin: 0 auto;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background: #029CFF;
  transition: background 1s ease;
}

/* TEXTO Y BOTÓN (escritorio) */
#inicio .inicio-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  animation: float 4s ease-in-out infinite;
}
#inicio .inicio-titulo {
  font-size: 80px;
  color: #029CFF;
  text-shadow: 2px 2px 3px rgba(0,0,0,.2);
  transition: all .6s ease;
}
#inicio .inicio-parrafo {
  font-size: 30px;
  color: #029CFF;
  transition: all .6s ease;
}
#inicio .inicio-btn-ver-mas {
  background:#029CFF;color:#fff;border:none;border-radius:50px;padding:12px 30px;
  font-size:1.2rem;margin-top:20px;cursor:pointer;transition:all .6s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}

/* Imagen esfera normal (escritorio) */
.img-esfera-normal {
  width:300px;height:300px;object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.7));
  transition:transform .6s ease;
}
#inicio.hover-activo .img-esfera-normal {
  transform:scale(1.05) rotate(-2deg);
  filter:brightness(.95) drop-shadow(0 16px 28px rgba(0,0,0,.85));
}

/* Esferas/logos escritorio (sin cambios) */
#inicio .inicio-esfera-blanca{
  position:absolute;width:1700px;height:1700px;top:-330px;left:-150px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #fff);
  display:grid;align-items:start;justify-items:start;padding:25px;z-index:1;
  transition:opacity 1s ease, transform 1s ease;
  box-shadow:inset -40px -40px 80px rgba(255,255,255,.8),
             inset 40px 40px 80px rgba(0,0,0,.15),
             0 40px 60px rgba(0,0,0,.2);
}
#inicio .inicio-esfera-hover{
  position:absolute;width:1700px;height:1700px;bottom:-380px;right:-150px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #02a9ff, #029CFF);
  display:grid;align-items:end;justify-items:end;padding:25px;z-index:0;opacity:0;
  transform:scale(.8);transition:all 1s ease;
  box-shadow:inset -30px -30px 60px rgba(255,255,255,.3),
             inset 30px 30px 60px rgba(0,0,0,.3),
             0 30px 60px rgba(0,0,0,.4);
}
.img-fondo-hover{
  position:absolute;top:50%;left:70%;
  transform:translate(-50%,-50%) scaleX(-1) scale(1);
  width:30%;height:30%;object-fit:contain;z-index:2;transition:transform .8s ease;
}
#inicio.hover-activo .img-fondo-hover{
  transform:translate(-50%,-50%) scaleX(-1) scale(1.02);
}
#inicio .inicio-logo-normal{
  position:absolute;bottom:40px;right:40px;width:220px;height:220px;border-radius:50%;
  background:#fff;display:flex;justify-content:center;align-items:center;z-index:3;
  transition:all .8s ease;
  box-shadow:inset -15px -15px 30px rgba(255,255,255,.6),
             inset 15px 15px 30px rgba(0,0,0,.2),
             0 8px 18px rgba(0,0,0,.3);
}
#inicio .inicio-logo-normal img{
  transform:scaleX(-1);width:60%;height:60%;object-fit:contain;
  filter:drop-shadow(2px 2px 4px rgba(0,0,0,.296))
         drop-shadow(-1px -1px 3px rgba(255,255,255,.7));
}
#inicio .inicio-logo-hover{
  position:absolute;top:110px;left:40px;width:220px;height:220px;border-radius:50%;
  background:#029CFF;display:flex;justify-content:center;align-items:center;opacity:0;z-index:4;
  transition:all 1s ease;
  box-shadow:inset -15px -15px 30px rgba(255,255,255,.4),
             inset 15px 15px 30px rgba(0,0,0,.3),
             0 10px 20px rgba(0,0,0,.4);
}
#inicio .inicio-logo-hover img{
  width:60%;height:60%;object-fit:contain;
  filter:drop-shadow(-2px -2px 3px rgba(255,255,255,.5))
         drop-shadow(2px 2px 4px rgba(0,0,0,.6));
}

/* Estado hover escritorio */
#inicio.hover-activo{ background:#ffffff; }
#inicio.hover-activo .inicio-esfera-blanca{ opacity:0; transform:scale(.8); }
#inicio.hover-activo .inicio-esfera-hover{ opacity:1; transform:scale(1); }
#inicio.hover-activo .inicio-titulo,
#inicio.hover-activo .inicio-parrafo{
  color:#fff;text-shadow:2px 2px 6px rgba(0,0,0,.6);transform:scale(1.05);
}
#inicio.hover-activo .inicio-btn-ver-mas{
  background:#fff;color:#029CFF;transform:scale(1.2);box-shadow:0 10px 25px rgba(0,0,0,.4);
}
#inicio.hover-activo .inicio-logo-normal{ opacity:0; transform:scale(.5); }
#inicio.hover-activo .inicio-logo-hover{ opacity:1; transform:scale(1.1); }

/* Flotación escritorio */
@keyframes float {
  0%,100% { transform: translateY(-50%) translateY(0); }
  50%     { transform: translateY(-50%) translateY(-10px); }
}

/* ============================== */
/* RESPONSIVE MÓVIL */
@media screen and (max-width: 768px) {
  /* #inicio no ocupa toda la altura ni pinta azul */
  #inicio{
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    display:block !important;
    overflow:visible !important;
  }

  /* Oculta layout de escritorio en móvil */
  #inicio .inicio-container,
  #inicio .inicio-esfera-blanca,
  #inicio .inicio-esfera-hover,
  #inicio .inicio-logo-normal,
  #inicio .inicio-logo-hover,
  #inicio .img-fondo-hover{ display:none !important; }

  /* Bloque central (50vh/dvh) para móvil */
  .hero.hero-50{
    --wave-duration: 9s;   /* lineal, sin baches */
    --float-duration: 7s;
    --float-amp: 8px;

    position: relative;
    width: 100%;
    height: 50vh;          /* fallback */
    height: 50dvh;         /* móviles modernos */
    margin: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    background: #2196F3;
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
  }

  /* Flotación suave solo en wrapper */
  .ondas-wrapper.filas{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    z-index: 2;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    animation: floatY var(--float-duration) linear infinite alternate;
  }

  
.logo-img{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255,255,255,.55),
    0 0 32px rgba(255,255,255,.28),
    inset 0 0 10px rgba(0,0,0,.10);
  filter: brightness(1.02);
  flex: 0 0 auto;
}


.texto-logo{
  font-weight: 700;
  color: #fff;
  font-size: clamp(2rem, 6vw, 3rem);
  z-index: 2;
  line-height: 1;
  text-shadow:
    0 0 10px rgba(255,255,255,.65),
    0 0 20px rgba(255,255,255,.35);
  filter: brightness(1.02);
}

  .texto-logo .ti{ font-size:1.5em; vertical-align:middle; }

  .subtexto{
    margin-top: 12px;
    margin-bottom: 0;
    font-weight: 400;
    font-size: clamp(1.1rem, 3.8vw, 1.6rem);
    line-height: 1.35;
    max-width: 92%;
    z-index: 2;
  }

  
  .onda{
    position:absolute;
    top:50%; left:50%;
    width:160vmax; height:160vmax;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.9);
    opacity:0;
    background:
      repeating-radial-gradient(circle at center,
        rgba(255,255,255,.22) 0px,
        rgba(255,255,255,.05) 10px,
        rgba(255,255,255,0) 20px),
      radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
    transform: translate(-50%,-50%) scale(.28);
    will-change: transform, opacity;
    backface-visibility:hidden;
    transform: translateZ(0) translate(-50%,-50%) scale(.28);
    animation: ripple var(--wave-duration) linear infinite;
    z-index:1;
    pointer-events:none;
  }
  
  .ondas-wrapper .onda:nth-child(3){ animation-delay: 0s; }
  .ondas-wrapper .onda:nth-child(4){ animation-delay: calc(var(--wave-duration) / 3); }
  .ondas-wrapper .onda:nth-child(5){ animation-delay: calc(var(--wave-duration) * 2 / 3); }

  
  @keyframes ripple{
    0%     { transform: translate(-50%,-50%) scale(.28); opacity:.75; }
    70%    { opacity:.18; }
    99.9%  { transform: translate(-50%,-50%) scale(1.02); opacity:0; }
    100%   { transform: translate(-50%,-50%) scale(.28);  opacity:0; }
  }
  @keyframes floatY{
    from { transform: translate3d(0, -8px, 0); }
    to   { transform: translate3d(0,  8px, 0); }
  }

  
  @media (prefers-reduced-motion: reduce){
    .ondas-wrapper.filas{ animation:none; }
    .onda{ animation:none; opacity:.15; }
  }
}