*{box-sizing:border-box}
:root{--green:#8bcf3f;--deep:#071a18}
html,body{margin:0;width:100%;height:100%;background:var(--deep)}
body{font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.page{position:relative;width:100vw;height:100dvh;min-height:100vh;background:var(--deep);overflow:hidden}

/* desktop */
.desktop-view{position:absolute;inset:0;display:grid;place-items:center;background:var(--deep)}
.desktop-view img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none}

/* mobile */
.mobile-view{display:none;position:absolute;inset:0;background:#0b211f url('assets/mobile-bg-es.jpg') center/cover no-repeat}
.mobile-overlay{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(2,15,16,.20) 0%,rgba(2,15,16,.37) 28%,rgba(0,0,0,.52) 62%,rgba(0,0,0,.72) 100%)}
.mobile-content{position:relative;z-index:2;width:100%;height:100%;padding:
  calc(env(safe-area-inset-top) + 56px) 24px calc(env(safe-area-inset-bottom) + 24px);
  display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.mobile-logo{width:min(78vw,360px);height:auto;max-height:15vh;object-fit:contain;margin:0 0 7vh}
.mobile-content h1{margin:0;font-weight:900;font-size:clamp(30px,9vw,50px);line-height:.98;letter-spacing:-.03em;text-shadow:0 3px 14px rgba(0,0,0,.5)}
.rule{width:42%;height:3px;border-radius:10px;background:var(--green);margin:4vh 0 3.3vh}
.mobile-content h2{margin:0;color:var(--green);font-size:clamp(17px,5.2vw,26px);line-height:1.12;font-weight:900;max-width:92%}
.mobile-content p{margin:2.1vh 0 0;font-size:clamp(16px,4.5vw,22px);line-height:1.35;font-weight:500;max-width:92%;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.leaf{width:58px;height:58px;margin:3.5vh 0 1.8vh}
.leaf svg{width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.follow{color:var(--green)!important;font-weight:900!important;font-size:clamp(15px,4.4vw,21px)!important;line-height:1.12!important;margin:0!important;max-width:94%!important}
.socials{margin-top:2.2vh;display:flex;align-items:center;justify-content:center;gap:17px}
.socials a{width:31px;height:31px;display:grid;place-items:center}
.socials svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:2.2}
.socials svg path{fill:#fff;stroke:none}.socials svg .play{fill:#0b211f}.socials span{width:1px;height:31px;background:rgba(255,255,255,.65)}

/* language */
.language{position:fixed;z-index:30;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.lang-toggle{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:8px 11px;background:rgba(0,0,0,.48);color:#fff;font:700 12px/1 Arial,sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 18px rgba(0,0,0,.24)}
.lang-toggle span:first-child{font-size:17px}.arrow{opacity:.8}
.lang-menu{position:absolute;right:0;top:calc(100% + 7px);min-width:132px;padding:5px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(3,18,19,.94);box-shadow:0 10px 28px rgba(0,0,0,.32)}
.lang-menu button{width:100%;border:0;border-radius:8px;background:transparent;color:#fff;padding:9px 10px;text-align:left;font-size:13px;cursor:pointer}
.lang-menu button:hover{background:rgba(255,255,255,.1)}

/* phone portrait gets its own composition */
@media (max-width:768px) and (orientation:portrait){
  .desktop-view{display:none}
  .mobile-view{display:block}
  .language{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
  .lang-toggle{padding:7px 9px;font-size:11px}
  .lang-toggle span:first-child{font-size:16px}
}

/* compact phones */
@media (max-height:700px) and (max-width:768px) and (orientation:portrait){
  .mobile-content{padding-top:calc(env(safe-area-inset-top) + 48px)}
  .mobile-logo{width:min(64vw,300px);margin-bottom:3.6vh}
  .mobile-content h1{font-size:clamp(27px,7.9vw,42px)}
  .rule{margin:2.6vh 0 2.3vh}
  .mobile-content h2{font-size:clamp(15px,4.6vw,22px)}
  .mobile-content p{font-size:clamp(14px,4vw,19px);margin-top:1.5vh}
  .leaf{width:45px;height:45px;margin:2.2vh 0 1.2vh}
  .follow{font-size:clamp(13px,3.9vw,18px)!important}
  .socials{margin-top:1.4vh}
}