:root{
      --text:#ffffff;
      --muted:rgba(255,255,255,.78);
      --line:rgba(255,255,255,.16);
      --card:rgba(10,16,18,.52);
      --card2:rgba(10,16,18,.34);
      --shadow: 0 24px 60px rgba(0,0,0,.35);
      --focus: rgba(255,255,255,.10);

      --contentTop: 210px;       /* desktop */
      --contentTopMobile: 240px; /* mobile (se recalcula con JS) */
    }

    @font-face{
      font-family: "Gilroy";
      src: url("font/Gilroy-Bold.woff2") format("woff2"),
           url("font/Gilroy-Bold.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background:#071316;
      /* overflow:hidden; */
      overflow-x: hidden !important;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    @media (max-width: 680px){
      body{ overflow:auto; }
    }

    .bg{
      position:fixed;
      inset:0;
      z-index:0;
      overflow:hidden;
      pointer-events:none;
      background:#071316 url("img/fondo-organic-aqua-2.jpg") center/cover no-repeat;
    }
    .bg video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      display:block;
      transform: scale(1.02);
      filter:saturate(1.05) contrast(1.05);
    }
    .bg::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(1200px 700px at 50% 10%,
          rgba(0,0,0,.10) 0%,
          rgba(0,0,0,.35) 55%,
          rgba(0,0,0,.55) 100%),
        linear-gradient(180deg,
          rgba(0,0,0,.10) 0%,
          rgba(0,0,0,.35) 100%);
    }

    .hero{
      position:relative;
      height:inherit;
      width:100%;
      /* overflow:hidden; */
      z-index:1;
    }


    .stageWrap{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index: 3;
    }

    .stage{
      width:min(1200px, 92vw);
      height:clamp(240px, 38vh, 360px);
      position:relative;
      transform-origin: 50% 50%;
      will-change: transform;
    }

    .piece{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      opacity:0;
      filter: blur(18px);
      will-change: transform, opacity, filter;
      user-select:none;
      -webkit-user-drag:none;
    }
    .piece img{
      display:block;
      height:auto;
      filter: drop-shadow(0 14px 22px rgba(0,0,0,.28));
    }

    #h img{ width: 132px; position: relative; }
    #dna img{ width: 92px; position: relative; }
    #mol img{ width: 128px; position: relative; }
    #p1 img, #p2 img{ width: 58px; opacity:.92; }

    .mixFlash{
      position:absolute;
      top:50%;
      left:50%;
      width: 520px;
      height: 520px;
      transform:translate(-50%,-50%);
      background: radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,0) 58%);
      opacity:0;
      filter: blur(10px);
      pointer-events:none;
    }

    /* lockup */
    .lockupOuter{
      position:absolute;
      top:50%;
      left:50%;
      opacity:0;
      filter: blur(18px);
      will-change: transform, opacity, filter;
      pointer-events:none;
      z-index: 4;
      transform: translate(-50%, -390px) !important;
    }
    .lockupInner{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px; /* un poquito más compacto */
      transform-origin: 50% 50%;
      will-change: transform;
    }

    #iso img{
      width: 150px;
      display:block;
      transform-origin: 50% 50%;
    }
    #wordmark{
      width: clamp(220px, 26vw, 340px);
      max-width: 84vw;
      height: clamp(74px, 8.5vw, 110px);
      overflow:hidden;
      position:relative;
    }
    #wordmark img{
      width: 100%;
      height:auto;
      display:block;
      transform: translateY(-37%);
      transform-origin: top center;
    }

    /* contenido */
    .contentWrap{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      padding: 12px 18px 46px; /* un poco menos abajo */
      pointer-events:none;
      opacity:0;
      z-index: 2;
    }

    /* ✅ mobile: el contenido arranca debajo del lockup (dinámico, no fijo bruto) */
    /* @media (max-width: 680px){
      .contentWrap{
        position:relative;
        min-height: 100vh;
        padding-top: 190px;
        padding-bottom: 34px;
      }
    } */

    .content{
      width:min(1200px, 96vw);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      /* margin-top: var(--contentTop); */
      margin-top: 150px
    }

    /* @media (max-width: 680px){
      .content{ margin-top: 0; gap:10px; }
    } */

    .copy{
      text-align:center;
      max-width: 1100px;
      opacity:0;
      transform: translateY(12px);
      margin-bottom: 10px;
    }

    .title{
      font-family:"Comfortaa", ui-sans-serif, system-ui;
      font-weight:600;
      font-size: clamp(24px, 7vw, 26px);
      line-height:1.3;
      letter-spacing:-0.02em;
      margin:0 0 8px 0;
      text-shadow: 0 18px 44px rgba(0,0,0,.35);
    }

    .sub{
      font-family:"Gilroy", ui-sans-serif, system-ui;
      font-weight:700;
      font-size: clamp(13px, 3.7vw, 17px);
      line-height:1.55;
      color:var(--muted);
      margin:0;
      white-space:pre-line;
      text-shadow: 0 18px 44px rgba(0,0,0,.35);
    }

    .card{
      width:min(560px, 92vw);
      border:1px solid var(--line);
      border-radius:18px;
      padding: 20px 22px;
      background: linear-gradient(180deg, var(--card), var(--card2));
      box-shadow: var(--shadow);
      opacity:0;
      transform: translateY(12px);
      backdrop-filter: blur(8px);
      pointer-events:auto;
    }

    .card h3{
      margin: 0 0 11px 0;
      font-size: 16px;
      font-weight: 600;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px 12px;
    }
    .grid .full{ grid-column:1/-1; }

    /* @media (max-width: 680px){
      .grid{ grid-template-columns: 1fr; }
    } */

    label{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin:0 0 6px 0;
    }

    input{
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.12);
      color:#fff;
      font-size:14px;
      outline:none;
    }

    input:focus{
      border-color: rgba(255,255,255,.30);
      box-shadow:0 0 0 4px var(--focus);
    }

    .disclaimer{
      margin-top: 14px;
      padding-left: 4px;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
      display:flex;
      align-items:flex-start;

    }

    .disclaimer input[type="checkbox"]{
      margin:0;
      flex:0 0 auto;
      width: inherit!important;
      margin-right: 10px;
    }

    .disclaimer p{
      margin:0;
    }

    .disclaimer a{
      color: #fff;
    }

    button{
       width: 100%;
      margin-top: 14px;
      padding: 14px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .24);
      background: rgba(255, 255, 255, .10);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      line-height: 18px;
      cursor: pointer;
    }
    button:hover{ background: rgba(255,255,255,.14); }

    footer{
      font-size:12px;
      color:var(--muted);
      text-align:center;
      opacity:0;
      transform: translateY(12px);
      text-shadow: 0 18px 44px rgba(0,0,0,.35);
      pointer-events:auto;
      margin-top: 16px;
      padding-bottom: 10px;
    }



    @media (max-width: 680px){
      .hero{
        height:auto;
        min-height:100vh;
        overflow:visible;
      }
      .title {
        font-size: clamp(20px, 5vw, 22px);
        line-height: 1.5;
        padding: 0px 15px;
      }
      .sub {
        padding: 0px 15px;
      }
      .content {
          margin-top: 100px;
      }
    }

    @media (min-width: 1050px){

      .lockupOuter {
        top: -30%!important;
      }
    }

    .is-invalid {
  border: 1px solid #3bbde7 !important;
}

#chkPrivacyPolicy.is-invalid {
  outline: 2px solid #3bbde7;
  outline-offset: 2px;
}

.form-alert--error{
  margin-bottom: 5px;
}

/* reCAPTCHA responsiveness */
  .recaptcha-wrap { margin: 12px 0; }
  .g-recaptcha > div { transform-origin: left top; }
  @media (max-width: 360px) { .g-recaptcha > div { transform: scale(0.88); } }


  /* Scrollable white panel */
  .policy-wrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 16px auto 24px;   
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 22px 24px;
    max-height: calc(100dvh - 280px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .policy-wrap .row{ margin-left: 0; margin-right: 0; }
  .policy-wrap [class^="col-"], .policy-wrap [class*=" col-"]{
    padding-left: 0; padding-right: 0;
  }


  .policy-wrap p,
  .policy-wrap li,
  .policy-wrap b {
    line-height: 1.55;
    text-align: left;
    color:#fff!important;
    opacity: 1!important;
    animation: none!important;
    font-size: 16px!important;
   }
  .policy-wrap h1.main-heading{
    margin-top: 0;
    text-align: left;
    color:#fff!important;
    opacity: 1!important;
    animation: none!important;
    font-size: 26px!important;
    margin-bottom: 10px;
  }
  .policy-wrap b {
    font-weight: bold;
  }

    .policy-wrap p{
      margin-bottom: 10px;
    }

  .policy-wrap::-webkit-scrollbar{ width:10px }
  .policy-wrap::-webkit-scrollbar-thumb{ background:#d7d7d7; border-radius:10px }
  .policy-wrap::-webkit-scrollbar-track{ background:transparent }

  @media (max-width: 480px){
    .policy-wrap{ max-height: calc(100vh - 240px); padding: 16px 14px; }
  }

  /* Respect iOS safe areas (notch) */
@supports (padding: max(0px)){
  .policy-wrap{
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}