/* iLandly — sitio público. Tokens de marca en tokens.css */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-heading);margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(36px,6vw,62px);line-height:1.02;font-weight:700}
h2{font-size:clamp(26px,3.6vw,40px);line-height:1.12;font-weight:700}
h3{font-size:19px;font-weight:600;line-height:1.3}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

.shell{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px}
.narrow-wrap{max-width:820px}
.narrow{max-width:58ch}
.mt{margin-top:32px}
.muted{color:var(--text-muted);font-size:15px}
.fine{font-size:13px;color:var(--text-muted)}

.skip{position:absolute;left:-9999px;top:8px;background:var(--ilandly-ink);color:#fff;
      padding:10px 16px;border-radius:999px;z-index:99}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--ilandly-blue-dark);outline-offset:3px;border-radius:6px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
     backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s, box-shadow .25s}
.nav.is-stuck{border-color:var(--border);box-shadow:0 6px 24px rgba(15,27,42,.06)}
.nav-inner{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.nav-logo img{width:118px}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:500}
.nav-links a{color:var(--text-muted);padding:6px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
                    background:var(--ilandly-orange);transition:right .25s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav-links + .nav-actions{margin-left:0}
.nav-links .nav-menu-cta{display:none}
.menu-btn{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:76px}

.lang{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.lang-btn{font:600 12.5px/1 var(--font-body);letter-spacing:.06em;padding:9px 12px;min-height:34px;
          background:transparent;color:var(--text-muted);border:0;cursor:pointer;transition:background .2s,color .2s}
.lang-btn.is-on{background:var(--ilandly-ink);color:#fff}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:var(--font-heading);font-weight:600;font-size:16px;line-height:1;
     padding:15px 26px;min-height:48px;border-radius:999px;border:1px solid transparent;cursor:pointer;
     transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease}
.btn-primary{background:var(--ilandly-orange);color:var(--ilandly-ink);box-shadow:var(--shadow-lift)}
.btn-primary:hover{background:var(--ilandly-orange-dark);color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:var(--border);color:var(--text);background:var(--surface)}
.btn-ghost:hover{border-color:var(--ilandly-orange);transform:translateY(-2px)}
.btn-sm{font-size:14.5px;padding:11px 18px;min-height:42px}
.btn-lg{font-size:17px;padding:17px 30px;width:100%}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,86px) clamp(150px,16vw,210px);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F2 40%,#FDEBD8 72%,#F9DCC0 100%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:1}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ilandly-orange-text)}
.hero h1{margin-top:14px}
.hero h1 em{font-style:normal;color:var(--ilandly-orange-text)}
.hero .lede{margin-top:20px;font-size:19px;color:var(--text-muted);max-width:54ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero-badges{gap:8px}
.hero-badges li{font-size:13px;font-weight:500;color:var(--text-muted);white-space:nowrap;
  background:#FFFFFFCC;border:1px solid #F0D9C2;padding:6px 12px;border-radius:999px}

.hero-art{display:flex;justify-content:center;align-self:end}
.orbit{position:relative;width:min(100%,380px);aspect-ratio:1;display:grid;place-items:center}
.orbit::before{content:"";position:absolute;inset:6%;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--ilandly-hull) 60%,transparent);
  animation:spin 44s linear infinite}
.lander{width:78%;height:auto;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 22px 34px rgba(15,27,42,.18))}
.lander.sm{width:150px;animation-duration:7s}
.chip{position:absolute;display:inline-flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:8px 14px;
  font-size:13.5px;font-weight:600;box-shadow:var(--shadow-card);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ilandly-green)}
.chip-1{top:6%;left:-2%;animation:bob 5s ease-in-out infinite}
.chip-2{top:44%;right:-6%;animation:bob 5s ease-in-out .9s infinite}
.chip-3{bottom:6%;left:8%;animation:bob 5s ease-in-out 1.8s infinite}

@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(56px,8vw,104px)}
.sec-alt{background:var(--surface)}
.sec-feature{background:var(--ilandly-white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
        color:var(--ilandly-orange-text);margin-bottom:12px}
.sec h2 em{font-style:normal;color:var(--ilandly-orange-text)}
.sec .lede{font-size:18px;color:var(--text-muted);margin-top:14px}

.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:24px;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:color-mix(in srgb,var(--ilandly-orange) 45%,var(--border))}
.card h3{margin-bottom:8px}
.card p{font-size:15px;color:var(--text-muted)}
.sec-alt .card{background:var(--bg)}
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
     background:var(--highlight);margin-bottom:14px}
.ico svg{width:22px;height:22px;fill:none;stroke:var(--highlight-ink);stroke-width:1.8;
         stroke-linecap:round;stroke-linejoin:round}

/* ---------- suscripción ---------- */
.keep{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-top:22px;
  padding:24px 30px;border-radius:22px;
  background:var(--highlight);
  border:1px solid color-mix(in srgb,var(--ilandly-orange) 45%,transparent)}
.keep h3{font-size:clamp(21px,2.6vw,28px);color:var(--ilandly-ink)}
.keep-lander{width:112px;height:auto;animation:float 6s ease-in-out infinite;
  filter:drop-shadow(0 14px 22px rgba(15,27,42,.18))}
.keep-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.keep-list li{font-size:14px;padding:7px 13px;border-radius:999px;color:var(--ilandly-ink);
  background:var(--ilandly-white);border:1px solid var(--border)}
.keep-list li::before{content:"✓";color:var(--ilandly-orange);font-weight:700;margin-right:6px}

/* ---------- flujo ---------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.flow-step{position:relative}
.step-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ilandly-ink);color:#fff;font:600 14px/1 var(--font-heading);margin-bottom:14px}
.flow-cap{margin-top:14px;font-size:14.5px;color:var(--text-muted)}

.mock-search,.mock-site,.mock-phone{border-radius:16px;border:1px solid var(--border);
  box-shadow:var(--shadow-card);overflow:hidden;background:var(--bg)}
.mock-search{padding:16px}
.search-bar{display:flex;align-items:center;gap:10px;border:1px solid var(--border);
  border-radius:999px;padding:10px 16px;font-size:14px;color:var(--text-muted)}
.search-bar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.typed{border-right:2px solid var(--ilandly-orange);padding-right:3px;animation:caret 1.1s step-end infinite}
@keyframes caret{50%{border-color:transparent}}
.search-result{margin-top:14px;padding:14px;border-radius:12px;background:var(--surface)}
.search-result b{font-family:var(--font-heading);font-size:16px;color:var(--ilandly-blue-dark);display:block}
.search-result span{font-size:12.5px;color:var(--text-muted);display:block;margin-top:2px}
.search-result em{font-style:normal;font-size:13.5px;color:var(--text-muted);display:block;margin-top:6px}

.mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--border)}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:var(--border)}
.mock-bar span{margin-left:8px;font-size:11.5px;color:var(--text-muted)}
.mock-body{padding:20px}
.mock-body h3{font-size:20px}
.mock-body p{font-size:14px;color:var(--text-muted);margin-top:6px}
.slot-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          color:var(--text-muted);margin-top:16px}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.slot{font-size:12.5px;padding:7px 11px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted)}
.slot.on{border-color:var(--ilandly-orange);background:var(--highlight);
         color:var(--highlight-ink);font-weight:600}
.wa{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--ilandly-whatsapp);
    color:#062018;font-family:var(--font-heading);font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px}
.wa svg{width:16px;height:16px;fill:#062018}

.mock-phone{background:var(--ilandly-night);padding:16px;border-color:#22303F}
.ph-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #22303F}
.ph-av{width:32px;height:32px;border-radius:50%;background:var(--ilandly-whatsapp);display:grid;place-items:center;
       font:700 14px/1 var(--font-heading);color:#062018}
.ph-who{color:#E7EBEF;font-size:14px;font-weight:600;line-height:1.3}
.ph-who em{display:block;font-style:normal;font-size:11px;font-weight:400;color:#8FA0B2}
.ph-bubbles{display:grid;gap:8px;padding-top:14px}
.bub{max-width:90%;font-size:13.5px;line-height:1.5;padding:9px 12px;border-radius:14px}
.bub.in{background:#1E2D3E;color:#E7EBEF;border-bottom-left-radius:4px}
.bub.out{background:var(--ilandly-green);color:#062018;margin-left:auto;border-bottom-right-radius:4px}

.report{margin-top:36px;background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:26px}
.figs{display:flex;gap:40px;flex-wrap:wrap;margin:16px 0 14px}
.fig b{display:block;font-family:var(--font-heading);font-size:clamp(38px,5vw,52px);font-weight:700;
       line-height:1;font-variant-numeric:tabular-nums;color:var(--ilandly-orange-text)}
.fig small{display:block;font-size:14px;color:var(--text-muted);margin-top:6px}

/* ---------- comparación ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:26px;
    border:1px solid var(--border);border-radius:18px;overflow:hidden}
.vs-col{padding:26px}
.vs-col + .vs-col{border-left:1px solid var(--border)}
.vs-col h3{font-size:17px;margin-bottom:14px}
.vs-col.old{color:var(--text-muted)}
.vs-col.new{background:var(--highlight)}
.vs-col li{font-size:15px;padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--border)}
.vs-col li:last-child{border-bottom:0}
.vs-col.old li::before{content:"×";position:absolute;left:4px;color:#6B7A8C;font-weight:700}
.vs-col.new li::before{content:"✓";position:absolute;left:2px;color:var(--ilandly-orange);font-weight:700}

/* ---------- trabajos ---------- */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.work-card{position:relative;display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--border);border-radius:20px;overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);
  border-color:color-mix(in srgb,var(--ilandly-orange) 45%,var(--border))}
.work-shot{background:var(--surface);border-bottom:1px solid var(--border)}
.work-img{overflow:hidden}
.work-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.work-card:hover .work-img img{transform:scale(1.04)}
.work-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.work-seg{align-self:flex-start;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--highlight-ink);background:var(--highlight);padding:5px 11px;border-radius:999px}
.work-body h3{font-size:20px}
.work-body p:not(.work-seg){font-size:15px;color:var(--text-muted)}
.work-tags{display:flex;flex-wrap:wrap;gap:6px}
.work-tags li{font-size:12.5px;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:4px 10px}
.work-link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-heading);font-weight:600;color:var(--ilandly-orange-text)}
.work-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s ease}
.work-card:hover .work-link svg{transform:translate(2px,-2px)}
/* toda la tarjeta se puede tocar: el enlace se estira sobre ella */
.work-link::after{content:"";position:absolute;inset:0}
.work-link:focus-visible{outline:none}
.work-card:has(.work-link:focus-visible){outline:3px solid var(--ilandly-blue-dark);outline-offset:3px}

/* ---------- chips de giros ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:10px 18px;font-size:14.5px;font-weight:500;transition:transform .18s ease,border-color .18s ease,background .18s}
.chips span:hover{transform:translateY(-2px);border-color:var(--ilandly-orange);background:var(--highlight)}
.note{margin-top:22px;font-size:15px;color:var(--text-muted)}

/* ---------- pasos ---------- */
.steps{display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:22px 24px}
.steps .n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--highlight);color:var(--highlight-ink);
  font:700 17px/1 var(--font-heading)}
.steps p{font-size:15px;color:var(--text-muted);margin-top:6px}

/* ---------- oferta ---------- */
.offer{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:clamp(24px,4vw,44px)}
.ticks{margin:20px 0 16px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:var(--ilandly-green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out;mask-composite:exclude}
.offer-cta{text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:20px;
  padding:26px 24px;display:grid;justify-items:center;gap:14px}
.offer-cta .quote{font-family:var(--font-heading);font-size:17px;font-weight:600}
.offer-cta .btn{width:100%}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:4px 20px}
.faq summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;position:relative;
  font-family:var(--font-heading);font-weight:600;font-size:17px;min-height:48px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;font-size:22px;color:var(--ilandly-orange-text);
  transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:15.5px;color:var(--text-muted)}
.faq details[open] p{animation:fadeUp .3s ease both}

/* ---------- footer ---------- */
.foot{background:var(--ilandly-white);color:var(--text-muted);border-top:1px solid var(--border);padding-block:44px}
.foot-inner{display:grid;grid-template-columns:1.4fr 1fr auto;gap:28px;align-items:start}
.foot-logo{width:132px;margin-bottom:14px}
.foot p{font-size:14.5px;max-width:38ch}
.foot-links{display:grid;gap:10px;font-size:14.5px}
.foot-links a:hover{color:var(--ilandly-ink)}
.foot-cta{display:grid;gap:12px;justify-items:end}

/* ---------- motion ---------- */
.stagger{opacity:0;animation:fadeUp .6s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i) * 90ms + 80ms)}
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i, 0) * 70ms)}
.reveal.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .stagger,.reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-art{order:-1}
  .orbit{width:min(100%,300px)}
  .flow{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr 1fr}
  .foot-cta{justify-items:start}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav-inner{gap:10px}

  .g3,.vs{grid-template-columns:1fr}
  .vs-col + .vs-col{border-left:0;border-top:1px solid var(--border)}
  .figs{gap:24px}
  .foot-inner{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .lang-btn{padding:9px 10px}
}

/* ---------- página de Lander ---------- */
.nav-links a.is-here{color:var(--text)}
.nav-links a.is-here::after{right:0}
.lander-hero .hero-grid{align-items:center}
.battle{margin-top:22px;padding-left:16px;border-left:3px solid var(--ilandly-orange);
        font-family:var(--font-heading);font-size:20px;font-weight:600}
.orbit.big{width:min(100%,440px)}
.orbit.big::before{animation-duration:60s}
.halo{position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--ilandly-orange) 22%,transparent), transparent 68%);
  animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.06);opacity:1}}

.ficha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ficha > div{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.ficha > div.wide{grid-column:span 3}
.ficha dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
          color:var(--ilandly-orange-text)}
.ficha dd{margin:8px 0 0;font-family:var(--font-heading);font-size:19px;font-weight:600}
.ficha > div.wide dd{font-size:18px;font-weight:500;line-height:1.45}

.anatomy{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:40px;align-items:start}
.anatomy-stage{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%, var(--surface), transparent 70%);border-radius:50%}
.anatomy-stage .lander.still{width:82%;animation:float 7s ease-in-out infinite}
/* los pines flotan junto con Lander para no despegarse de sus piezas */
.pin-layer{position:absolute;inset:0;animation:float 7s ease-in-out infinite}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
     width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.pin .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ilandly-orange);
  background:color-mix(in srgb,var(--ilandly-orange) 28%,transparent);transition:transform .2s ease, background .2s ease}
.pin .ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--ilandly-orange) 55%,transparent);
  animation:ping 2.6s ease-out infinite;animation-delay:var(--d,0s)}
.pin:hover .ring,.pin:focus-visible .ring,.pin.is-on .ring{transform:scale(1.25);background:var(--ilandly-orange)}
@keyframes ping{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(1.6);opacity:0}}

.parts{display:grid;gap:12px}
.parts li{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:18px 22px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease}
.parts li.is-on{border-color:var(--ilandly-orange);background:var(--highlight);transform:translateX(4px)}
.parts h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:18px}
.parts .num{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.14em;
            color:var(--ilandly-orange-text)}
.parts h3 em{font-style:normal;font-family:var(--font-body);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.parts p{margin-top:8px;font-size:15px;color:var(--text-muted)}

.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.says{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.say-col{border:1px solid var(--border);border-radius:18px;padding:22px;background:var(--bg)}
.col-lbl{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.say-col.yes .col-lbl{color:var(--ilandly-green-dark)}
.say-col.no .col-lbl{color:var(--ilandly-error-text)}
.say-col .say{font-family:var(--font-heading);font-size:16.5px;font-weight:500;padding:12px 16px;
  border-radius:12px;margin-bottom:10px}
.say-col.yes .say{background:var(--highlight);border-left:3px solid var(--ilandly-orange)}
.say-col.no .say{color:var(--text-muted);border-left:3px solid var(--border);
  text-decoration:line-through;text-decoration-color:var(--border)}
.offer-cta .btn-ghost{margin-top:-4px}

@media (max-width:960px){
  .anatomy{grid-template-columns:1fr;gap:26px}
  .anatomy-stage{max-width:380px;margin-inline:auto}
  .ficha{grid-template-columns:1fr 1fr}
  .ficha > div.wide{grid-column:span 2}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .ficha,.says,.g4{grid-template-columns:1fr}
  .ficha > div.wide{grid-column:span 1}
  .battle{font-size:18px}
}

/* ---------- menú desplegable (teléfono y tablet) ---------- */
@media (max-width:960px){
  .nav-links + .nav-actions{margin-left:auto}
  .nav-actions .btn-sm{display:none}
  /* menú móvil: panel que baja bajo el header */
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
    border:1px solid var(--border);border-radius:12px;background:var(--bg);cursor:pointer}
  .bars,.bars::before,.bars::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);
    transition:transform .25s ease, background .2s ease}
  .bars{position:relative}
  .bars::before,.bars::after{content:"";position:absolute;left:0}
  .bars::before{top:-6px}
  .bars::after{top:6px}
  .nav.is-open .bars{background:transparent}
  .nav.is-open .bars::before{transform:translateY(6px) rotate(45deg)}
  .nav.is-open .bars::after{transform:translateY(-6px) rotate(-45deg)}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
    padding:6px 20px 22px;background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:0 18px 36px rgba(15,27,42,.12);
    opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s}
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity .22s ease, transform .22s ease}
  .nav-links a{padding:15px 2px;font-size:17px;color:var(--text);border-bottom:1px solid var(--border)}
  .nav-links a::after{display:none}
  .nav-links a.is-here{color:var(--ilandly-orange-text)}
  .nav-links .nav-menu-cta{display:inline-flex;margin-top:16px;padding:15px 26px;border-bottom:0;
    color:var(--ilandly-ink);width:100%}
}

@media (max-width:720px){
  .keep{grid-template-columns:1fr;gap:14px;padding:22px}
  .keep-lander{width:84px}
}

/* ---------- héroe en Marte ---------- */
.mars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.terrain{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(170px,20vw,260px)}
.moon{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFF4E8 0%,#F6DCC2 55%,#EDC6A0 100%);
  box-shadow:inset -6px -4px 0 rgba(205,131,80,.18)}
.m1{width:64px;height:64px;top:44px;right:9%;animation:bob 9s ease-in-out infinite}
.m1::before,.m1::after{content:"";position:absolute;border-radius:50%;background:rgba(205,131,80,.22)}
.m1::before{width:14px;height:10px;top:18px;left:16px}
.m1::after{width:9px;height:7px;top:38px;left:36px}
.m2{width:22px;height:22px;top:120px;right:31%;opacity:.8;animation:bob 7s ease-in-out 1s infinite}
/* en Conoce a Lander la órbita es más grande: las lunas se apartan */
.lander-hero .m1{right:3%;top:30px}
.lander-hero .m2{right:44%;top:70px}

/* sombra en el suelo: se achica cuando Lander sube y crece cuando baja */
.landing-shadow{position:absolute;left:50%;bottom:-54px;width:150px;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,70,25,.32),transparent);
  transform:translateX(-50%);animation:shadow 6s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:translateX(-50%) scale(.82);opacity:.55}50%{transform:translateX(-50%) scale(1.05);opacity:.9}}

/* polvo que flota cerca del suelo */
.dust{position:absolute;left:-2%;width:5px;height:5px;border-radius:50%;background:#D98B55;opacity:0;
  animation:drift 16s linear infinite}
.d1{bottom:120px}
.d2{bottom:80px;width:3px;height:3px;animation-delay:5s;animation-duration:21s}
.d3{bottom:150px;width:4px;height:4px;animation-delay:10s;animation-duration:18s}
@keyframes drift{0%{transform:translate(0,0);opacity:0}10%{opacity:.55}50%{transform:translate(52vw,-18px)}90%{opacity:.4}100%{transform:translate(104vw,6px);opacity:0}}

@media (max-width:960px){
  .hero{padding-bottom:140px}
  .hero-art{align-self:auto}
  .landing-shadow{display:none}
  .m1,.lander-hero .m1{width:44px;height:44px;top:24px;right:6%}
  .m2{display:none}
}

@media (max-width:960px){
  .work{grid-template-columns:1fr}
  .work-card{display:grid;grid-template-columns:1fr 1fr}
  .work-shot{border-bottom:0;border-right:1px solid var(--border)}
  .work-img img{height:100%;aspect-ratio:auto;min-height:220px}
}
@media (max-width:620px){
  .work-card{display:flex}
  .work-shot{border-right:0;border-bottom:1px solid var(--border)}
  .work-img img{height:auto;aspect-ratio:16/10;min-height:0}
}

/* ---------- página legal ---------- */
.legal-hero h1{font-size:clamp(30px,4.4vw,44px);line-height:1.08;margin-top:6px}
.legal-hero .lede{max-width:60ch}
.legal-meta{display:flex;flex-wrap:wrap;gap:28px;margin-top:24px}
.legal-meta dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.legal-meta dd{margin:5px 0 0;font-family:var(--font-heading);font-weight:600;font-size:17px}
.legal-note{margin-top:22px;padding-left:14px;border-left:3px solid var(--ilandly-orange);
  font-size:14.5px;color:var(--text-muted)}
.legal-idx-title{font-size:22px}
.legal-index{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.legal-index a{display:block;padding:9px 12px;border-radius:10px;font-size:15px;color:var(--text);
  border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease}
.legal-index a:hover{background:var(--highlight);color:var(--highlight-ink);
  border-color:color-mix(in srgb,var(--ilandly-orange) 35%,transparent)}
.legal h2{font-size:22px;margin-top:40px;padding-top:26px;border-top:1px solid var(--border);scroll-margin-top:86px}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:17px;margin-top:24px}
.legal p{margin-top:12px;font-size:16px;line-height:1.75}
.legal-list{margin-top:12px;display:grid;gap:9px}
.legal-list li{position:relative;padding-left:20px;font-size:16px;line-height:1.75}
.legal-list li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--ilandly-orange)}
/* datos por definir en el contrato */
mark.ph{background:var(--highlight);color:var(--highlight-ink);padding:0 5px;border-radius:5px;font-weight:500}
.legal-top{margin-top:36px;font-size:15px}
.legal-top a{color:var(--ilandly-orange-text);font-weight:600}
@media (max-width:720px){ .legal-index{grid-template-columns:1fr} }