.mobile-site { display: none; }

@media (max-width: 820px) {
  html { background: #071d4a; scroll-behavior: auto; }
  body { overflow-x: hidden; background: #071d4a; }
  body > .site-header,
  #experience { display: none !important; }
  .mobile-site { display: block; width: 100%; overflow: clip; }
  .mobile-story { width: 100%; }

  .mobile-header {
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    transition: color .22s ease, background-color .22s ease, box-shadow .22s ease;
    pointer-events: none;
  }
  .mobile-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(4,12,28,.34), rgba(4,12,28,0));
    opacity: .88;
    transition: opacity .22s ease, background .22s ease;
  }
  .mobile-header[data-theme="dark"] { color: #111713; background: rgba(249,244,235,.96); box-shadow: 0 4px 18px rgba(34,25,16,.07); }
  .mobile-header[data-theme="dark"]::before { opacity: 0; }
  .mobile-header > * { pointer-events: auto; }
  .mobile-brand { position: relative; width: 108px; height: 38px; }
  .mobile-logo { position: absolute; left: 0; top: 50%; width: 108px; max-height: 34px; object-fit: contain; object-position: left center; transform: translateY(-50%); transition: opacity .2s ease; }
  .mobile-logo-dark { opacity: 0; }
  .mobile-header[data-theme="dark"] .mobile-logo-light { opacity: 0; }
  .mobile-header[data-theme="dark"] .mobile-logo-dark { opacity: 1; }

  .mobile-menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: rgba(255,255,255,.08);
  }
  .mobile-header[data-theme="dark"] .mobile-menu-toggle { background: rgba(17,23,19,.045); }
  .mobile-menu-toggle span { position: absolute; left: 11px; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, top .2s ease, opacity .2s ease; }
  .mobile-menu-toggle span:nth-child(1) { top: 13px; }
  .mobile-menu-toggle span:nth-child(2) { top: 19px; }
  .mobile-menu-toggle span:nth-child(3) { top: 25px; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

  .mobile-nav {
    position: fixed;
    z-index: 4990;
    top: 56px;
    right: 12px;
    width: min(310px, calc(100vw - 24px));
    padding: 18px;
    border: 1px solid rgba(17,23,19,.08);
    border-radius: 22px;
    display: grid;
    gap: 2px;
    color: #111713;
    background: rgba(249,242,229,.985);
    box-shadow: 0 18px 60px rgba(4,12,28,.28);
    transform: translateY(-10px) scale(.985);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .mobile-nav a { padding: 12px 10px; border-radius: 12px; font-family: var(--hand-font); font-size: 21px; font-weight: 700; line-height: 1; }
  .mobile-nav a:active { background: rgba(17,23,19,.05); }
  .mobile-nav-shop { margin-top: 8px; text-align: center; color: #fff; background: #111713; }

  .mobile-screen,
  .mobile-panel,
  .mobile-footer { position: relative; width: 100%; overflow: hidden; scroll-margin-top: 62px; }
  .mobile-screen { min-height: 100svh; background: #071d4a; }
  .mobile-bg { position: absolute; inset: -3%; z-index: 0; width: 106%; height: 106%; max-width: none; object-fit: cover; object-position: center; }
  .mobile-card {
    position: absolute;
    z-index: 30;
    width: calc(100% - 34px);
    max-width: 370px;
    padding: 22px 22px 21px;
    border: 1px solid rgba(70,49,28,.09);
    border-radius: 23px;
    color: #111713;
    background: rgba(249,242,229,.985);
    box-shadow: 0 14px 40px rgba(31,21,11,.16), inset 0 0 0 1px rgba(255,255,255,.4);
    font-family: var(--hand-font);
  }
  .mobile-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(74,52,28,.04); border-radius: 18px; pointer-events: none; }
  .mobile-card h1,
  .mobile-card h2,
  .mobile-panel h2,
  .mobile-product-heading h2 { margin: 0; font-family: var(--hand-font); font-weight: 700; letter-spacing: -.025em; line-height: .9; }
  .mobile-card h1 { font-size: clamp(45px, 13.3vw, 57px); }
  .mobile-card h1 small { display: block; margin-top: 10px; font-size: .53em; font-weight: 400; line-height: 1.05; }
  .mobile-card h2 { margin-bottom: 13px; font-size: clamp(46px, 13vw, 58px); }
  .mobile-card p { margin: 0 0 9px; font-size: 17px; line-height: 1.22; }
  .mobile-card strong { font-size: 17px; }
  .mobile-hand-line { display: block; width: 54px; height: 2px; margin: 13px 0 17px; border-radius: 3px; background: #111713; }
  .mobile-cta {
    min-height: 45px;
    margin-top: 15px;
    padding: 0 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #111713;
    font-family: var(--hand-font);
    font-size: 18px;
    font-weight: 700;
  }
  .mobile-text-link { display: inline-flex; gap: 9px; margin-top: 4px; padding: 5px 0; border-bottom: 1px solid #111713; font-size: 18px; font-weight: 700; }

  .mobile-scroll-cue {
    position: absolute;
    z-index: 80;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 18px;
    height: 29px;
    border: 1.2px solid rgba(255,255,255,.9);
    border-radius: 10px;
    transform: translateX(-50%);
  }
  .mobile-scroll-cue span { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.92); transform: translateX(-50%); animation: mobileScrollDot 1.55s ease-in-out infinite; }
  .mobile-scroll-cue-dark { border-color: rgba(17,23,19,.75); }
  .mobile-scroll-cue-dark span { background: rgba(17,23,19,.75); }
  @keyframes mobileScrollDot { 0% { opacity: 0; transform: translate(-50%,0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,9px); } }

  /* 1. Inicio */
  .mobile-night { min-height: 960px; }
  .mobile-night .mobile-bg { object-position: 54% center; }
  .mobile-night-moon { position: absolute; z-index: 3; top: 83px; right: 20px; width: 86px; }
  .mobile-night-city { position: absolute; z-index: 4; left: -29%; bottom: 0; width: 160%; max-width: none; }
  .mobile-night-hero { position: absolute; z-index: 8; top: 132px; left: 50%; width: min(120vw, 470px); height: 360px; transform: translateX(-50%); }
  .mobile-night-cloud { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: none; transform: translateX(-50%); }
  .mobile-night-sobber { position: absolute; left: 50%; top: 4px; width: 63%; max-width: none; transform: translateX(-50%); }
  .mobile-intro-card { left: 50%; bottom: 57px; transform: translateX(-50%); }

  /* 2. Quiénes somos */
  .mobile-who { min-height: 1060px; }
  .mobile-who .mobile-bg { object-position: 47% center; }
  .mobile-who-city { position: absolute; z-index: 4; left: -28%; bottom: 0; width: 158%; max-width: none; }
  .mobile-who-sobber { position: absolute; z-index: 8; top: 119px; left: 50%; width: 31%; max-width: none; transform: translateX(-50%); }
  .mobile-who-card { left: 50%; bottom: 60px; transform: translateX(-50%); }

  /* 3. Meditación */
  .mobile-meditation { min-height: 930px; }
  .mobile-meditation .mobile-bg { object-position: 46% center; }
  .mobile-meditation-city { position: absolute; z-index: 3; left: -27%; bottom: -3px; width: 155%; max-width: none; }
  .mobile-meditation-sun { position: absolute; z-index: 2; right: -75%; bottom: -15%; width: 170%; max-width: none; opacity: .82; }
  .mobile-meditation-cloud-wrap { position: absolute; z-index: 7; left: 50%; top: 370px; width: 114%; height: 370px; transform: translateX(-50%); }
  .mobile-meditation-cloud { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: none; transform: translateX(-50%); }
  .mobile-meditation-sobber { position: absolute; left: 50%; top: -76px; width: 53%; max-width: none; transform: translateX(-50%); }
  .mobile-thought { position: absolute; z-index: 9; width: 33%; max-width: 145px; }
  .mobile-thought-banana { top: 135px; left: 8%; }
  .mobile-thought-mango { top: 103px; right: 7%; }
  .mobile-thought-strawberry { top: 255px; left: 3%; }
  .mobile-thought-coconut { top: 245px; right: 3%; }

  /* 4. Caída */
  .mobile-fall { min-height: 1010px; }
  .mobile-fall .mobile-bg { object-position: 50% center; }
  .mobile-fall-sobber { position: absolute; z-index: 9; top: 108px; left: 50%; width: 32%; max-width: none; transform: translateX(-50%); }
  .mobile-fall-cloud { position: absolute; z-index: 6; top: 322px; left: 50%; width: 58%; transform: translateX(-50%); }
  .mobile-fall-cloud img { width: 100%; }
  .mobile-fall-card { left: 50%; bottom: 60px; transform: translateX(-50%); }

  /* 5. Portal */
  .mobile-portal { min-height: 880px; }
  .mobile-portal .mobile-bg { object-position: 54% center; filter: saturate(.95); }
  .mobile-portal-vortex,
  .mobile-portal-front { position: absolute; left: 50%; top: 100px; width: 132%; max-width: none; transform: translateX(-50%); }
  .mobile-portal-vortex { z-index: 8; }
  .mobile-portal-front { z-index: 12; pointer-events: none; }
  .mobile-portal-beam { position: absolute; z-index: 6; left: 50%; top: 290px; width: 78%; max-width: none; transform: translateX(-50%); opacity: .92; }
  .mobile-portal-sobber-2d { position: absolute; z-index: 10; left: 50%; top: 330px; width: 36%; max-width: none; transform: translateX(-50%) rotate(180deg); }

  /* 6. Salida 3D */
  .mobile-output { min-height: 900px; }
  .mobile-output .mobile-bg { object-position: 53% center; }
  .mobile-output-beam { position: absolute; z-index: 4; left: 50%; top: -30px; width: 118%; max-width: none; transform: translateX(-50%); opacity: .86; }
  .mobile-output-sobber { position: absolute; z-index: 8; left: 50%; top: 242px; width: 71%; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 20px 30px rgba(251,218,128,.25)); }

  /* 7. Selva */
  .mobile-jungle { min-height: 1260px; }
  .mobile-jungle .mobile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; }
  .mobile-jungle::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(5,18,21,.03), rgba(5,18,21,.15)); pointer-events: none; }
  .mobile-jungle-character { position: absolute; z-index: 7; max-width: none; filter: drop-shadow(0 12px 22px rgba(8,21,14,.16)); }
  .mobile-jungle-mango { top: 78px; left: -12%; width: 73%; }
  .mobile-jungle-banana { top: 365px; right: -3%; width: 58%; }
  .mobile-jungle-coconut { top: 650px; left: -5%; width: 61%; }
  .mobile-jungle-strawberry { top: 902px; right: -20%; width: 87%; }

  /* 8. Cómo hacemos */
  .mobile-panel { min-height: 100svh; padding: 88px 20px 62px; color: #111713; background: linear-gradient(115deg, #f8f1e5, #efe4d3 62%, #faf4e9); }
  .mobile-panel-card { font-family: var(--hand-font); }
  .mobile-kicker { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-panel-card h2 { font-size: clamp(54px, 15vw, 68px); }
  .mobile-panel-card > p:not(.mobile-kicker) { margin: 0 0 12px; font-size: 20px; line-height: 1.24; }
  .mobile-benefits { margin: 24px 0 0; padding: 0; list-style: none; }
  .mobile-benefits-four { display: grid; gap: 18px; }
  .mobile-benefits li { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; font-family: var(--hand-font); font-size: 20px; font-weight: 700; }
  .mobile-benefits svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-process-flow { margin-top: 44px; display: grid; justify-items: center; }
  .mobile-process-step { width: 100%; display: grid; justify-items: center; gap: 6px; }
  .mobile-process-step img { width: min(67vw, 270px); height: 190px; object-fit: contain; }
  .mobile-process-step strong { font-family: var(--hand-font); font-size: 23px; }
  .mobile-process-arrow { margin: 2px 0 10px; font-family: var(--hand-font); font-size: 30px; }

  /* 9/10. Productos */
  .mobile-products { min-height: 1120px; }
  .mobile-product-heading h2 { font-size: clamp(58px, 16vw, 72px); }
  .mobile-product-heading p { max-width: 28ch; margin: 12px 0 30px; font-family: var(--hand-font); font-size: 20px; line-height: 1.24; }
  .mobile-product-list { display: grid; gap: 22px; }
  .mobile-product-row { min-height: 205px; display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 14px; }
  .mobile-product-row img { width: 100%; max-height: 205px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(37,25,13,.11)); }
  .mobile-product-row div { font-family: var(--hand-font); }
  .mobile-product-row strong { display: block; margin-bottom: 7px; font-size: 25px; line-height: 1; }
  .mobile-product-row p { margin: 0; font-size: 18px; line-height: 1.22; }

  /* 11. Cierre */
  .mobile-close { min-height: 1040px; }
  .mobile-close .mobile-bg { object-position: center; }
  .mobile-close-hero { position: absolute; z-index: 7; top: 100px; left: 50%; width: 118%; height: 430px; transform: translateX(-50%); }
  .mobile-close-cloud { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: none; transform: translateX(-50%); }
  .mobile-close-sobber { position: absolute; left: 29%; top: 2%; width: 45%; max-width: none; }
  .mobile-close-pack { position: absolute; top: 135px; width: 26%; max-width: none; }
  .mobile-close-pack-one { left: 54%; }
  .mobile-close-pack-two { left: 73%; }
  .mobile-final-card { left: 50%; bottom: 58px; transform: translateX(-50%); }
  .mobile-final-card h2 { font-size: clamp(51px, 14vw, 65px); }

  /* 12. Footer */
  .mobile-footer { min-height: 930px; padding: 92px 27px 36px; color: #111713; background: linear-gradient(115deg, #f4e4cb, #ead0a7 62%, #f3dfbd); font-family: var(--hand-font); }
  .mobile-footer-logo { width: 155px; max-height: 52px; object-fit: contain; object-position: left; }
  .mobile-footer-tagline { margin: 8px 0 42px; font-size: 15px; font-weight: 700; letter-spacing: .12em; }
  .mobile-footer-statement { display: flex; align-items: center; gap: 16px; }
  .mobile-footer-statement strong { font-size: 44px; line-height: .96; }
  .mobile-footer-statement span { font-size: 32px; }
  .mobile-footer-benefits { margin-top: 45px; display: grid; gap: 19px; }
  .mobile-footer-benefits div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; }
  .mobile-footer-benefits i { font-size: 30px; font-style: normal; line-height: 1; }
  .mobile-footer-benefits span { font-size: 18px; font-weight: 700; line-height: 1.08; text-transform: uppercase; }
  .mobile-footer-social { margin-top: 43px; display: flex; gap: 14px; }
  .mobile-footer-social a { width: 43px; height: 43px; border: 1.5px solid #111713; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; }
  .mobile-footer-contact { margin-top: 24px; display: grid; gap: 3px; font-size: 16px; font-weight: 700; }
  .mobile-footer-copy { position: absolute; left: 27px; bottom: 32px; margin: 0; font-size: 14px; line-height: 1.25; }

  @media (max-width: 390px) {
    .mobile-card { width: calc(100% - 28px); padding-inline: 19px; }
    .mobile-card p { font-size: 16px; }
    .mobile-night { min-height: 930px; }
    .mobile-who { min-height: 1040px; }
    .mobile-fall { min-height: 990px; }
    .mobile-panel { padding-inline: 17px; }
    .mobile-product-row { grid-template-columns: 40% 1fr; gap: 11px; }
    .mobile-product-row p { font-size: 17px; }
  }

  @media (max-height: 740px) {
    .mobile-night,
    .mobile-who,
    .mobile-fall,
    .mobile-close { min-height: 910px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-scroll-cue span { animation: none; }
  }
}

@media (min-width: 821px) {
  .mobile-site { display: none !important; }
}