:root{
  --navy:    #082F49;
  --turquesa:#00B6C4;
  --fucsia:  #FF4B84;
  --amarillo:#F6B100;
  --blanco:  #FFFFFF;
  --gris:    #ECEFF3;

  --radius: 26px;
  --shadow: 0 18px 40px -18px rgba(8,47,73,.28);
  --shadow-hover: 0 40px 70px -22px rgba(0,182,196,.5);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:'Manrope','Inter',system-ui,-apple-system,sans-serif;
  color:var(--navy);
  background:
    radial-gradient(120% 80% at 50% -10%, #f3fbfd 0%, #ffffff 55%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.bg-deco{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,182,196,.14), transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(255,75,132,.12), transparent 36%),
    radial-gradient(circle at 78% 85%, rgba(246,177,0,.13), transparent 40%),
    radial-gradient(circle at 18% 88%, rgba(8,47,73,.07), transparent 42%);
  animation:bgDrift 16s ease-in-out infinite alternate;
}
@keyframes bgDrift{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.1) translateY(-1.5%); } }

.stage{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding:clamp(1rem,3vw,2.5rem) clamp(1.2rem,4vw,3rem) 3rem;
}

.hero{
  position:relative;
  text-align:center;
  margin-bottom:clamp(2.8rem,7vw,5rem);
}

.hero__rays{
  position:absolute; left:50%; top:40%;
  width:min(780px,108vw); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  z-index:-2;
  background:conic-gradient(from 0deg,
     rgba(0,182,196,.12), rgba(255,75,132,.0) 22%,
     rgba(246,177,0,.12) 50%, rgba(255,75,132,.0) 72%,
     rgba(0,182,196,.12) 100%);
  border-radius:50%;
  -webkit-mask:radial-gradient(circle, #000 0%, transparent 62%);
          mask:radial-gradient(circle, #000 0%, transparent 62%);
  animation:spin 26s linear infinite;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero__halo{
  position:absolute; left:50%; top:40%;
  width:min(620px,92vw); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
              rgba(0,182,196,.22) 0%,
              rgba(255,75,132,.12) 38%,
              rgba(246,177,0,.09) 58%,
              transparent 70%);
  filter:blur(6px); z-index:-1;
  animation:halo 5.5s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    opacity:.85; }
  50%    { transform:translate(-50%,-50%) scale(1.14); opacity:1; }
}

.hero__logo{
  width:min(520px,86vw); height:auto; display:block;
  margin:0 auto 1.6rem;
}

.hero__claim{
  font-size:clamp(1.15rem,2.7vw,1.7rem);
  font-weight:700; margin:.2rem auto .9rem;
  max-width:32ch; line-height:1.25;
  min-height:2.5em;
}
.hero__values{
  font-family:'Inter',sans-serif;
  font-size:clamp(.74rem,1.7vw,.9rem);
  font-weight:500; letter-spacing:.2em;
  color:var(--turquesa); margin:0;
  min-height:1.4em;
}

.float{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.4rem,3.5vw,2.6rem);
  max-width:980px; margin:0 auto;
}

.tile{
  text-decoration:none; color:var(--navy);
  position:relative;
  flex:0 0 auto; width:clamp(150px,21vw,200px);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  opacity:0;
  will-change:transform,opacity;
}
.tile.is-home .tile__inner{
  animation:floatTile var(--t,7s) ease-in-out infinite;
}

.tile__inner{
  width:100%; aspect-ratio:1/1;
  background:linear-gradient(160deg,#ffffff 0%,#f5f9fc 100%);
  border:1px solid var(--gris);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  padding:11%;
  position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.2,1.1),
             box-shadow .4s ease, border-color .4s ease;
}
.tile__inner::after{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.tile:hover .tile__inner::after{ left:140%; }

.tile__inner img{ max-width:100%; max-height:100%; object-fit:contain; position:relative; z-index:1; }

.tile__name{
  width:100%; text-align:center;
  font-weight:700; font-size:1rem; letter-spacing:.01em;
  transition:color .3s ease;
}

.tile:hover .tile__inner,
.tile:focus-visible .tile__inner{
  transform:translateY(-12px) scale(1.07);
  box-shadow:var(--shadow-hover);
  border-color:var(--turquesa);
  animation-play-state:paused;
}
.tile:hover .tile__name{ color:var(--turquesa); }
.tile:focus-visible{ outline:none; }
.tile:focus-visible .tile__inner{ outline:3px solid var(--turquesa); outline-offset:4px; }

.foot{
  text-align:center; margin-top:clamp(3rem,7vw,5.5rem);
  font-family:'Inter',sans-serif; font-size:.82rem;
  color:var(--navy); opacity:.55;
  transition:opacity .8s ease;
}

.is-loading .hero__logo{ animation:logoIn 1.2s cubic-bezier(.18,.85,.25,1) both; }
.is-loading .hero__claim,
.is-loading .hero__values{ opacity:0; }
.is-loading .foot{ opacity:0; }

.cursor{
  display:inline-block; width:2px; height:1em;
  background:currentColor; margin-left:3px; vertical-align:-2px;
  animation:blink .7s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

body.breathe .hero__logo{ animation:breathe 7s ease-in-out infinite; }

@keyframes logoIn{
  0%{ transform:scale(1.5); opacity:0; filter:blur(10px); }
  55%{ opacity:1; filter:blur(0); }
  100%{ transform:scale(1); opacity:1; filter:blur(0); }
}
@keyframes breathe{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}
@keyframes floatTile{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .tile{ transform:none !important; opacity:1 !important; transition:none; }
  .hero__halo{ opacity:.7; }
}