:root{
      --kr-blue:#004ee0;
      --kr-cyan:#00d8f3;
      --kr-orange:#ff9c00;
      --kr-yellow:#ffb500;
      --kr-red:#ff2b08;
      --kr-white:#dedede;
      --kr-dark:#050505;
      --font:'Century Gothic', 'Montserrat', 'Poppins', Arial, sans-serif;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      background:#000;
      color:var(--kr-white);
      font-family:var(--font);
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:geometricPrecision;
    }

    a{ color:inherit; text-decoration:none; }
    img{ display:block; max-width:100%; height:auto; }

    .kranea-page{ width:100%; min-height:100vh; background:#000; }

    .kr-section{
      position:relative;
      width:100%;
      overflow:hidden;
      isolation:isolate;
      background-repeat:no-repeat;
      background-size:cover;
      background-position:center top;
    }

    .kr-hero{
      height:55.208333vw;
      min-height:560px;
      max-height:1060px;
      background-image:url("../img/asset-01.jpg");
    }

    .kr-hero__content{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding-top:clamp(145px, 15.65vw, 300px);
      pointer-events:none;
    }

    .kr-hero__badge{
      width:clamp(105px, 7.9vw, 152px);
      filter:drop-shadow(0 12px 22px rgba(0,0,0,.08));
    }

    .kr-hero__text{
      margin:clamp(52px, 4.95vw, 95px) 0 0;
      color:var(--kr-cyan);
      font-size:clamp(17px, 1.18vw, 23px);
      line-height:1.25;
      font-weight:300;
      letter-spacing:-.045em;
    }

    .kr-hero__dots{
      width:48px;
      margin-top:17px;
      image-rendering:auto;
    }

    .kr-hero__brain{
      width:clamp(76px, 5.63vw, 108px);
      margin-top:clamp(82px, 8.25vw, 158px);
    }

    .kr-contact{
      height:57.552083vw;
      min-height:660px;
      max-height:1105px;
      background-image:url("../img/asset-02.jpg");
      background-position:center top;
    }

    .kr-contact::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(255,43,8,0) 0%, rgba(255,43,8,.04) 47%, rgba(255,43,8,.18) 100%);
      z-index:-1;
      pointer-events:none;
    }

    .kr-contact__panel{
      position:absolute;
      top:clamp(86px, 6.38vw, 122px);
      left:55.05%;
      width:min(27.3vw, 430px);
      min-width:360px;
    }

    .kr-contact__title{
      margin:0 0 clamp(38px, 3.05vw, 58px);
      color:#fff;
      font-size:clamp(19px, 1.16vw, 22px);
      line-height:1.05;
      font-weight:400;
      letter-spacing:-.045em;
      text-transform:lowercase;
    }

    .kr-form{ width:100%; }

    .kr-field{
      display:block;
      margin:0 0 clamp(18px, 1.45vw, 28px);
    }

    .kr-label{
      display:block;
      margin:0 0 8px;
      color:#fff;
      font-size:clamp(13px, .82vw, 15.6px);
      line-height:1;
      font-weight:400;
      letter-spacing:-.04em;
      text-transform:lowercase;
    }

    .kr-input,
    .kr-textarea{
      display:block;
      width:100%;
      border:0;
      outline:none;
      appearance:none;
      -webkit-appearance:none;
      border-radius:8px;
      background:var(--kr-yellow);
      color:#111;
      font-family:var(--font);
      font-size:16px;
      font-weight:500;
      padding:0 15px;
      box-shadow:none;
      transition:filter .18s ease, transform .18s ease, background-color .18s ease;
    }

    .kr-input{ height:clamp(43px, 2.6vw, 50px); }
    .kr-textarea{
      height:clamp(150px, 8.86vw, 170px);
      min-height:150px;
      padding-top:13px;
      resize:vertical;
    }

    .kr-input:focus,
    .kr-textarea:focus{ filter:brightness(1.06); }

    .kr-hp{
      position:absolute!important;
      left:-9999px!important;
      width:1px!important;
      height:1px!important;
      opacity:0!important;
      pointer-events:none!important;
    }

    .kr-submit-row{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:14px;
      margin-top:-6px;
    }

    .kr-submit{
      border:0;
      background:transparent;
      color:#fff;
      font-family:var(--font);
      font-size:clamp(19px, 1.16vw, 22px);
      line-height:1;
      font-weight:800;
      letter-spacing:-.045em;
      text-transform:uppercase;
      cursor:pointer;
      padding:0 0 0 10px;
      transition:transform .18s ease, opacity .18s ease;
    }

    .kr-submit:hover{ transform:translateX(3px); }
    .kr-submit:disabled{ opacity:.55; cursor:wait; transform:none; }

    .kr-form__msg{
      margin:14px 0 0;
      color:#fff;
      font-size:13px;
      line-height:1.35;
      min-height:18px;
      text-align:right;
    }

    .kr-footer{
      height:43.541667vw;
      min-height:440px;
      max-height:836px;
      background-image:url("../img/asset-03.jpg");
      background-position:center top;
    }

    .kr-footer__info{
      position:absolute;
      top:clamp(132px, 12.55vw, 241px);
      left:54.9%;
      width:min(360px, 30vw);
      color:var(--kr-white);
      font-size:clamp(17px, 1.12vw, 21.5px);
      line-height:1.35;
      font-weight:300;
      letter-spacing:-.045em;
    }

    .kr-footer__line{ margin:0 0 14px; }
    .kr-footer__line a{ transition:opacity .18s ease; }
    .kr-footer__line a:hover{ opacity:.75; }

    .kr-footer__icons{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:19px;
      margin-top:22px;
    }

    .kr-footer__icon{
      display:inline-flex;
      width:clamp(38px, 2.8vw, 54px);
      height:clamp(38px, 2.8vw, 54px);
      align-items:center;
      justify-content:center;
      opacity:1;
      transition:opacity .18s ease, transform .18s ease;
    }

    .kr-footer__icon:hover{ opacity:.75; transform:translateY(-2px); }
    .kr-footer__icon--skull{ width:clamp(34px, 2.4vw, 46px); height:auto; margin-left:2px; }

    @media (min-width:1921px){
      .kr-hero{ max-height:none; }
      .kr-contact{ max-height:none; }
      .kr-footer{ max-height:none; }
    }

    @media (max-width:900px){
      .kr-hero{
        height:680px;
        min-height:680px;
        background-position:center top;
      }
      .kr-hero__content{ padding-top:150px; }
      .kr-hero__badge{ width:112px; }
      .kr-hero__text{
        margin-top:58px;
        width:min(82vw, 420px);
        font-size:18px;
      }
      .kr-hero__brain{ margin-top:105px; width:84px; }

      .kr-contact{
        height:auto;
        min-height:780px;
        background-position:center top;
      }
      .kr-contact::after{
        content:"";
        position:absolute;
        inset:0;
        background:rgba(255,43,8,.08);
        z-index:-1;
      }
      .kr-contact__panel{
        position:relative;
        top:auto;
        left:auto;
        width:min(82vw, 430px);
        min-width:0;
        margin:0 auto;
        padding:92px 0 86px;
      }
      .kr-contact__title{
        font-size:22px;
        margin-bottom:42px;
      }
      .kr-textarea{ height:170px; }

      .kr-footer{
        height:520px;
        min-height:520px;
        background-position:center top;
      }
      .kr-footer__info{
        top:155px;
        left:50%;
        transform:translateX(-2%);
        width:min(78vw, 360px);
        font-size:18px;
      }
    }

    @media (max-width:520px){
      .kr-hero{ height:620px; min-height:620px; background-position:center top; }
      .kr-hero__content{ padding-top:135px; }
      .kr-hero__badge{ width:96px; }
      .kr-hero__text{ margin-top:50px; font-size:16px; }
      .kr-hero__brain{ margin-top:95px; width:72px; }

      .kr-contact{ min-height:760px; background-position:45% top; }
      .kr-contact__panel{ width:min(86vw, 390px); padding-top:78px; }
      .kr-contact__title{ margin-bottom:36px; }
      .kr-field{ margin-bottom:20px; }
      .kr-input{ height:44px; }
      .kr-submit{ font-size:21px; }
      .kr-form__msg{ text-align:left; }

      .kr-footer{ height:500px; min-height:500px; background-position:47% top; }
      .kr-footer__info{
        top:150px;
        left:50%;
        transform:translateX(-50%);
        width:74vw;
      }
      .kr-footer__icons{ gap:16px; margin-top:20px; }
    }
  


/* Logo animado Kranea: SVG completo suministrado por el cliente */
.kr-hero__badge{
  position:relative;
  width:clamp(105px,7.9vw,152px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#ff9c00;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.08));
  isolation:isolate;
}
.kr-skull-glow{
  position:absolute;
  inset:14%;
  z-index:0;
  border-radius:45%;
  background:rgba(37,164,226,.38);
  filter:blur(10px);
  animation:krGlow 3.15s ease-in-out infinite;
}
.kr-skull-svg{
  position:relative;
  z-index:1;
  width:83%;
  height:83%;
  overflow:visible;
  filter:url(#kr-glow);
}
.kr-skull-float{
  transform-box:view-box;
  transform-origin:50% 54%;
  animation:krFloat 4.5s ease-in-out infinite;
}
.kr-brain-piece,
.kr-pupil,
.kr-lid{
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
}
.kr-brain-piece--left{ animation:krBrainLeft 6.3s ease-in-out infinite; }
.kr-brain-piece--right{ animation:krBrainRight 6.3s .22s ease-in-out infinite; }
.kr-pupil--left{ animation:krPupilLeft 12.6s ease-in-out infinite; }
.kr-pupil--right{ animation:krPupilRight 12.6s ease-in-out infinite; }
.kr-lid--left-top{ animation:krLidLeftTop 12.6s cubic-bezier(.45,0,.2,1) infinite; }
.kr-lid--left-bottom{ animation:krLidLeftBottom 12.6s cubic-bezier(.45,0,.2,1) infinite; }
.kr-lid--right-top{ animation:krLidRightTop 12.6s cubic-bezier(.45,0,.2,1) infinite; }
.kr-lid--right-bottom{ animation:krLidRightBottom 12.6s cubic-bezier(.45,0,.2,1) infinite; }

@keyframes krFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  32%{transform:translateY(-3px) rotate(.45deg)}
  68%{transform:translateY(-1px) rotate(-.45deg)}
}
@keyframes krGlow{
  0%,100%{opacity:.22;transform:scale(.88)}
  50%{opacity:.72;transform:scale(1.12)}
}
@keyframes krBrainLeft{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  25%{transform:translate(-2px,1px) rotate(-1.2deg) scale(1.025)}
  55%{transform:translate(2px,-2px) rotate(1.4deg) scale(.985)}
  78%{transform:translate(-1px,-1px) rotate(-.5deg) scale(1.015)}
}
@keyframes krBrainRight{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  22%{transform:translate(2px,-1px) rotate(1deg) scale(.985)}
  52%{transform:translate(-2px,2px) rotate(-1.3deg) scale(1.025)}
  80%{transform:translate(1px,-1px) rotate(.6deg) scale(1.01)}
}

/* Pupilas con pequeñas miradas laterales y verticales */
@keyframes krPupilLeft{
  0%,8%,18%,29%,43%,55%,69%,82%,100%{transform:translate(0,0) scale(1)}
  11%{transform:translate(-4px,2px) scale(1.02)}
  22%{transform:translate(4px,-1px) scale(.98)}
  48%{transform:translate(-3px,-2px) scale(1.03)}
  74%{transform:translate(3px,2px) scale(.98)}
  88%{transform:translate(-2px,1px) scale(1.01)}
}
@keyframes krPupilRight{
  0%,8%,18%,29%,43%,55%,69%,82%,100%{transform:translate(0,0) scale(1)}
  11%{transform:translate(-3px,-2px) scale(.99)}
  22%{transform:translate(4px,1px) scale(1.02)}
  48%{transform:translate(-2px,2px) scale(.98)}
  74%{transform:translate(3px,-2px) scale(1.03)}
  88%{transform:translate(-2px,-1px) scale(1.01)}
}

/* Párpados: abiertos, guiños, entrecerrado y parpadeo completo */
@keyframes krLidLeftTop{
  0%,13%,18%,32%,39%,54%,62%,76%,83%,100%{transform:translateY(-42px)}
  15%,16%{transform:translateY(-4px)}
  35%,37%{transform:translateY(14px)}
  57%,60%{transform:translateY(4px)}
  79%,81%{transform:translateY(15px)}
  89%{transform:translateY(1px)}
  92%{transform:translateY(-42px)}
}
@keyframes krLidLeftBottom{
  0%,13%,18%,32%,39%,54%,62%,76%,83%,100%{transform:translateY(42px)}
  15%,16%{transform:translateY(5px)}
  35%,37%{transform:translateY(-14px)}
  57%,60%{transform:translateY(-4px)}
  79%,81%{transform:translateY(-15px)}
  89%{transform:translateY(-2px)}
  92%{transform:translateY(42px)}
}
@keyframes krLidRightTop{
  0%,13%,20%,32%,42%,54%,65%,76%,86%,100%{transform:translateY(-37px)}
  15%,17%{transform:translateY(-3px)}
  35%,39%{transform:translateY(11px)}
  57%,62%{transform:translateY(2px)}
  79%,83%{transform:translateY(12px)}
  91%{transform:translateY(0)}
  94%{transform:translateY(-37px)}
}
@keyframes krLidRightBottom{
  0%,13%,20%,32%,42%,54%,65%,76%,86%,100%{transform:translateY(37px)}
  15%,17%{transform:translateY(4px)}
  35%,39%{transform:translateY(-11px)}
  57%,62%{transform:translateY(-3px)}
  79%,83%{transform:translateY(-12px)}
  91%{transform:translateY(-1px)}
  94%{transform:translateY(37px)}
}

@media(max-width:900px){.kr-hero__badge{width:112px}}
@media(max-width:520px){.kr-hero__badge{width:96px}.kr-skull-svg{width:85%;height:85%}}



/* Paquete con assets: garantías de ejecución */
.kr-hero__badge,
.kr-skull-svg,
.kr-skull-float,
.kr-brain-piece,
.kr-pupil,
.kr-lid {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.kr-motion-ready .kr-skull-glow,
.kr-motion-ready .kr-skull-float,
.kr-motion-ready .kr-brain-piece,
.kr-motion-ready .kr-pupil,
.kr-motion-ready .kr-lid {
  animation-play-state: running !important;
}