/* 01 tokens */
:root{
      --bg:#ffffff;
      --page:#f8fafc;
      --text:#0f172a;
      --muted:#64748b;
      --border: rgba(15,23,42,.10);
      --shadow: 0 10px 30px rgba(2, 6, 23, .08);
      --radius: 18px;
      --pad: 14px;
      --h: 52px;
      --accent:#0071e3;
      --accent-dark:#0059b8;
      --page-pad: 16px;
      --max: min(1400px, calc(100vw - (max(var(--page-pad), env(safe-area-inset-left)) + max(var(--page-pad), env(safe-area-inset-right)))));
      --nav-h: 64px;
    }

    *{ box-sizing:border-box; }
    html{
      scroll-behavior:smooth;
      text-size-adjust:100%;
      -webkit-text-size-adjust:100%;
      width: 100%;
    }
    html, body { width:100%; }
    body{
      margin:0;
      background:var(--page);
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      -webkit-font-smoothing:antialiased;
    }

    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:0 max(var(--page-pad), env(safe-area-inset-left))
               0 max(var(--page-pad), env(safe-area-inset-right));
    }

    /* NAV (from seachPro3) */
    nav{
      position:sticky;
      top:0;
      z-index:90;
      backdrop-filter:blur(14px);
      background:rgba(255,255,255,0.86);
      border-bottom:1px solid rgba(148,163,184,0.18);
    }
    .nav-inner{
      padding:10px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      max-width:var(--max);
      margin:0 auto;
    }
    nav .logo{
      font-size:1.4rem;
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--accent);
      font-weight:700;
      text-decoration:none;
      letter-spacing:-0.03em;
    }
    nav .logo img{
      height:42px;
      width:auto;
      display:block;
      object-fit:contain;
      filter:drop-shadow(0 6px 14px rgba(15,23,42,.18));
    }
    @media (max-width: 720px){
      .nav-inner{
        flex-wrap:nowrap;
        gap:8px;
        align-items:center;
      }
      nav .logo{
        font-size:1rem;
        gap:8px;
        min-width:0;
      }
      nav .logo span{
        white-space:nowrap;
      }
      nav .logo img{
        height:28px;
      }
      nav .topbar{
        flex:0 0 auto;
      }
    }
    nav .btn-login{
      padding:9px 16px;
      border-radius:999px;
      background:rgba(15,23,42,0.04);
      color:var(--text);
      text-decoration:none;
      font-weight:500;
      border:1px solid rgba(148,163,184,.35);
      display:inline-flex;
      align-items:center;
      gap:6px;
      transition:background .25s ease,border-color .25s ease,transform .18s ease,box-shadow .18s ease;
    }
    nav .btn-login:hover{
      background:#fff;
      border-color:rgba(148,163,184,.65);
      transform:translateY(-1px);
      box-shadow:0 10px 26px rgba(15,23,42,.12);
    }
    nav .btn-login i{
      font-size:1.1rem;
    }
    nav .btn-login .btn-label{
      display:inline-flex;
      align-items:center;
      gap:6px;
      white-space:nowrap;
    }

    /* ===== Topbar (Template1 menu style) ===== */
    nav .topbar{
      display:flex;
      align-items:center;
      gap:10px;
      position:relative;
    }
    #userMenu{ display:none; }
    body.is-auth #userMenu{ display:flex; }
    body.is-auth #loginLink{ display:none; }

    nav .user-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.55);
      background:rgba(255,255,255,.7);
      backdrop-filter: blur(12px);
      color:var(--text);
      font-size:.9rem;
      font-weight:700;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    nav .user-chip:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 28px rgba(15,23,42,.12);
      background:rgba(255,255,255,.9);
    }
    nav .user-chip__name{
      max-width:180px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:var(--muted);
      font-weight:700;
    }
    nav .menu{
      position:absolute;
      top:48px;
      right:0;
      width:min(360px, calc(100vw - 28px));
      border-radius:18px;
      border:1px solid rgba(148,163,184,.35);
      background:rgba(255,255,255,.82);
      backdrop-filter: blur(16px);
      box-shadow:0 28px 70px rgba(15,23,42,.22);
      padding:10px;
      display:none;
      z-index:999;
    }
    nav .menu.is-open{ display:block; }
    nav .menu-overlay{
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.45);
      display:none;
      z-index:998;
    }
    body.menu-open nav .menu-overlay{ display:block; }
    nav .menu-header{
      display:none;
      align-items:center;
      justify-content:space-between;
      padding:12px 16px;
      border-bottom:1px solid rgba(148,163,184,.25);
      background:#ffffff;
      position:sticky;
      top:0;
      z-index:2;
    }
    nav .menu-header__brand{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:700;
      color:var(--accent);
      letter-spacing:-0.02em;
    }
    nav .menu-header__brand img{
      height:26px;
      width:auto;
      display:block;
    }
    nav .menu-close{
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.35);
      background:#fff;
      font-size:22px;
      line-height:1;
      cursor:pointer;
    }
    nav .menu-body{
      padding:10px;
    }
    nav .menu__section{
      padding:8px;
      border-radius:16px;
      background: rgba(15,23,42,.02);
    }
    body:not(.is-owner) nav .menu__section--owner{
      display:none;
    }
    body.is-patient nav .menu__section{
      display:none;
    }
    body.is-patient nav .menu__section--patient{
      display:block;
    }
    body.is-patient nav .menu__section--logout{
      display:block;
    }
    body:not(.is-patient) nav .menu__section--patient{
      display:none;
    }
    nav .menu__section + .menu__section{
      border-top:1px solid rgba(148,163,184,.22);
      margin-top:8px;
      padding-top:12px;
    }
    nav .ds-menu-item{
      width:100%;
      border:0;
      background:transparent;
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 12px;
      border-radius:14px;
      cursor:pointer;
      text-align:left;
      font-weight:800;
      color:var(--text);
      transition:
        transform 180ms cubic-bezier(.2,.8,.2,1),
        background 180ms cubic-bezier(.2,.8,.2,1),
        box-shadow 180ms cubic-bezier(.2,.8,.2,1);
    }
    nav .ds-menu-item:hover{
      background: rgba(59,130,246,.10);
      box-shadow: 0 10px 26px rgba(15,23,42,.10);
      transform: translateY(-1px);
    }
    nav .ds-menu-item:active{
      transform: translateY(0) scale(.99);
      box-shadow: 0 8px 18px rgba(15,23,42,.10);
    }
    nav .ds-menu-ico{
      width:34px;
      height:34px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.75);
      border:1px solid rgba(148,163,184,.35);
      box-shadow:0 8px 18px rgba(15,23,42,.08);
      flex:0 0 auto;
    }
    nav .ds-menu-ico i{
      font-size:18px;
      color: rgba(2,6,23,.72);
    }
    nav .ds-menu-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      flex:1 1 auto;
    }
    nav .ds-menu-title{
      font-size:.95rem;
      letter-spacing:-0.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    nav .ds-menu-sub{
      font-size:.78rem;
      font-weight:700;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    nav .ds-menu-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
      color: rgba(100,116,139,.9);
      font-weight:800;
    }
    nav .ds-menu-chevron{
      font-size:18px;
      color: rgba(100,116,139,.9);
    }
    nav .ds-menu-item--danger .ds-menu-title{ color:#b91c1c; }
    nav .ds-menu-item--danger .ds-menu-ico{ border-color: rgba(185,28,28,.20); }
    nav .ds-menu-item--danger .ds-menu-ico i{ color:#b91c1c; }
    nav .ds-menu-item--danger:hover{ background: rgba(185,28,28,.08); }
    /* Compact nav when logged in */
    body.is-auth nav .nav-inner{ padding:8px 16px; gap:10px; }
    body.is-auth nav .logo{ font-size:1.05rem; }
    body.is-auth nav .logo img{ height:28px; }
    @media (max-width: 520px){
      nav .user-chip{
        padding:6px 10px;
        font-size:.82rem;
      }
      nav .user-chip__name{
        max-width:120px;
      }
    }
    @media (max-width: 720px){
      body.menu-open{
        overflow:hidden;
        touch-action: none;
      }
      nav .menu{
        position:fixed;
        inset:0;
        width:100%;
        max-width:100%;
        border-radius:0;
        padding:0;
        height:100vh;
        background:#f7f7f9 !important;
        opacity:1 !important;
        mix-blend-mode:normal;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        box-shadow:none;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
      }
      nav .menu-overlay{
        background:rgba(2,6,23,.55);
        touch-action: none;
      }
      nav .menu__section{
        background:transparent;
        padding:0;
        border-radius:0;
      }
      nav .menu__section + .menu__section{
        border-top:1px solid rgba(148,163,184,.18);
        margin-top:0;
        padding-top:8px;
      }
      nav .ds-menu-item{
        padding:18px 18px;
        border-radius:12px;
        margin:8px 14px;
        background:#ffffff;
        border:1px solid rgba(148,163,184,.18);
        box-shadow:0 4px 12px rgba(15,23,42,.06);
      }
      nav .ds-menu-title{
        font-size:1.05rem;
        letter-spacing:-0.01em;
      }
      nav .ds-menu-sub{
        font-size:.86rem;
        white-space:normal;
      }
      nav .ds-menu-item:hover{
        background:#ffffff;
        box-shadow:0 6px 16px rgba(15,23,42,.08);
        transform:translateY(-0.5px);
      }
      nav .ds-menu-item:active{
        transform:translateY(0);
        box-shadow:0 4px 12px rgba(15,23,42,.08);
      }
      nav .ds-menu-ico{
        width:36px;
        height:36px;
        border-radius:12px;
        background:rgba(248,250,252,0.95);
        box-shadow:0 3px 8px rgba(15,23,42,.08);
      }
      nav .ds-menu-right{
        color: rgba(100,116,139,.7);
      }
      nav .ds-menu-chevron{
        color: rgba(100,116,139,.7);
      }
      nav .menu-header{
        display:flex;
        padding:calc(16px + env(safe-area-inset-top)) 18px 12px;
        background:#ffffff;
        box-shadow:0 4px 12px rgba(15,23,42,.06);
      }
      nav .menu-body{
        padding:6px 0 calc(16px + env(safe-area-inset-bottom));
      }
    }
    @media (max-width: 420px){
      nav .user-chip{
        padding:6px 8px;
      }
      nav .user-chip__name{
        display:none;
      }
    }
    @media (min-width: 721px){
      body.menu-open nav .menu-overlay{ display:none; }
    }
    #goMyPageBtn{ display:none; }
    #subscribeCoreBtn{ display:none; }
    #completeProfileBtn{ display:none; }

    /* Menu parity with template1 */
    nav .menu{
      border-radius:18px !important;
      border:1px solid rgba(148,163,184,.35) !important;
      background:rgba(255,255,255,.82) !important;
      backdrop-filter: blur(16px) !important;
      box-shadow:0 28px 70px rgba(15,23,42,.22) !important;
      padding:10px !important;
    }
    nav .menu-header{
      border-bottom:1px solid rgba(148,163,184,.25) !important;
      background:#ffffff !important;
    }
    nav .menu__section{
      padding:8px !important;
      border-radius:16px !important;
      background: rgba(15,23,42,.02) !important;
    }
    nav .menu__section + .menu__section{
      border-top:1px solid rgba(148,163,184,.22) !important;
      margin-top:8px !important;
      padding-top:12px !important;
    }
    nav{
      backdrop-filter: saturate(180%) blur(14px) !important;
      background: rgba(255,255,255,0.86) !important;
      border-bottom:1px solid rgba(0,0,0,0.06) !important;
    }
    nav .nav-inner{
      padding:10px 18px !important;
      gap:12px !important;
    }
    nav .logo{
      font-size:1.1rem !important;
      letter-spacing:-0.03em !important;
    }
    nav .logo img{
      height:30px !important;
      filter:none !important;
    }
    nav .ds-menu-item{
      padding:12px 12px !important;
      border-radius:14px !important;
      font-weight:800 !important;
      transition:
        transform 180ms cubic-bezier(.2,.8,.2,1),
        background 180ms cubic-bezier(.2,.8,.2,1),
        box-shadow 180ms cubic-bezier(.2,.8,.2,1) !important;
    }
    nav .ds-menu-item:hover{
      background: rgba(59,130,246,.10) !important;
      box-shadow: 0 10px 26px rgba(15,23,42,.10) !important;
      transform: translateY(-1px) !important;
    }
    nav .ds-menu-item:active{
      transform: translateY(0) scale(.99) !important;
      box-shadow: 0 8px 18px rgba(15,23,42,.10) !important;
    }
    nav .ds-menu-item.onboarding-glow{
      position:relative !important;
      background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.12)) !important;
      border:1px solid rgba(59,130,246,.28) !important;
      box-shadow:
        0 12px 34px rgba(14,165,233,.18),
        0 0 0 1px rgba(255,255,255,.6) inset !important;
      overflow:hidden !important;
    }
    nav .ds-menu-item.onboarding-glow::before{
      content:"";
      position:absolute;
      inset:-12px;
      border-radius:18px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.55), transparent 50%);
      opacity:.65;
      filter:blur(10px);
      animation:onboardingGlowPulse 3.6s ease-in-out infinite;
      pointer-events:none;
    }
    nav .ds-menu-item.onboarding-glow::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
      transform:translateX(-120%);
      animation:onboardingSheen 5.5s ease-in-out infinite;
      pointer-events:none;
      opacity:.35;
    }
    nav .ds-menu-item.onboarding-glow .ds-menu-ico{
      border-color: rgba(59,130,246,.45) !important;
      box-shadow:0 12px 26px rgba(59,130,246,.22) !important;
    }
    nav .ds-menu-item.onboarding-glow .ds-menu-ico i{
      color:#1d4ed8 !important;
    }
    nav .ds-menu-item.onboarding-glow .ds-menu-sub{
      color:#1d4ed8 !important;
    }
    nav .ds-menu-item.stripe-glow{
      position:relative !important;
      background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.12)) !important;
      border:1px solid rgba(59,130,246,.28) !important;
      box-shadow:
        0 12px 34px rgba(14,165,233,.18),
        0 0 0 1px rgba(255,255,255,.6) inset !important;
      overflow:hidden !important;
    }
    nav .ds-menu-item.stripe-glow::before{
      content:"";
      position:absolute;
      inset:-12px;
      border-radius:18px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.55), transparent 50%);
      opacity:.65;
      filter:blur(10px);
      animation:stripeGlowPulse 3.6s ease-in-out infinite;
      pointer-events:none;
    }
    nav .ds-menu-item.stripe-glow::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
      transform:translateX(-120%);
      animation:stripeSheen 5.5s ease-in-out infinite;
      pointer-events:none;
      opacity:.35;
    }
    nav .ds-menu-item.stripe-glow .ds-menu-ico{
      border-color: rgba(59,130,246,.45) !important;
      box-shadow:0 12px 26px rgba(59,130,246,.22) !important;
    }
    nav .ds-menu-item.stripe-glow .ds-menu-ico i{
      color:#1d4ed8 !important;
    }
    nav .ds-menu-item.stripe-glow .ds-menu-sub{
      color:#1d4ed8 !important;
    }
    @keyframes stripeGlowPulse{
      0%, 100% { opacity:.5; transform:scale(1); }
      50% { opacity:.85; transform:scale(1.02); }
    }
    @keyframes stripeSheen{
      0% { transform:translateX(-120%); }
      55% { transform:translateX(120%); }
      100% { transform:translateX(120%); }
    }
    @keyframes onboardingGlowPulse{
      0%, 100% { opacity:.5; transform:scale(1); }
      50% { opacity:.85; transform:scale(1.02); }
    }
    @keyframes onboardingSheen{
      0% { transform:translateX(-120%); }
      55% { transform:translateX(120%); }
      100% { transform:translateX(120%); }
    }
    nav .ds-menu-ico{
      width:34px !important;
      height:34px !important;
      border-radius:12px !important;
      background: rgba(255,255,255,.75) !important;
      border:1px solid rgba(148,163,184,.35) !important;
      box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
    }
    nav .ds-menu-title{
      font-size:.95rem !important;
      letter-spacing:-0.01em !important;
    }
    nav .ds-menu-sub{
      font-size:.78rem !important;
      font-weight:700 !important;
      color:var(--muted) !important;
    }
    nav .ds-menu-right{
      color: rgba(100,116,139,.9) !important;
    }
    nav .ds-menu-chevron{
      color: rgba(100,116,139,.9) !important;
    }
    nav .ds-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:900;
      border:1px solid rgba(148,163,184,.45);
      background: rgba(255,255,255,.75);
      color:var(--muted);
      white-space:nowrap;
    }
    nav .ds-pill--ok{
      color:#16a34a;
      border-color: rgba(34,197,94,.45);
      background: rgba(34,197,94,.10);
    }
    nav .ds-pill--warn{
      color:#f59e0b;
      border-color: rgba(245,158,11,.45);
      background: rgba(245,158,11,.10);
    }
    nav .ds-pill--info{
      color:#1d4ed8;
      border-color: rgba(59,130,246,.35);
      background: rgba(59,130,246,.10);
    }
    nav .ds-menu-item--danger .ds-menu-title{ color:#b91c1c !important; }
    nav .ds-menu-item--danger .ds-menu-ico{ border-color: rgba(185,28,28,.20) !important; }
    nav .ds-menu-item--danger .ds-menu-ico i{ color:#b91c1c !important; }
    nav .ds-menu-item--danger:hover{ background: rgba(185,28,28,.08) !important; }
    @media (max-width: 720px){
      nav{
        padding:10px 14px !important;
      }
      nav .nav-inner{
        gap:8px !important;
      }
      nav .logo{
        font-size:.95rem !important;
      }
      nav .logo img{
        height:26px !important;
      }
      nav .menu{
        border-radius:0 !important;
        padding:0 !important;
        background:#f7f7f9 !important;
        box-shadow:none !important;
      }
      nav .menu__section{
        background:transparent !important;
        padding:0 !important;
        border-radius:0 !important;
      }
      nav .menu__section + .menu__section{
        border-top:1px solid rgba(148,163,184,.18) !important;
        margin-top:0 !important;
        padding-top:8px !important;
      }
      nav .ds-menu-item{
        padding:18px 18px !important;
        border-radius:12px !important;
        margin:8px 14px !important;
        background:#ffffff !important;
        border:1px solid rgba(148,163,184,.18) !important;
        box-shadow:0 4px 12px rgba(15,23,42,.06) !important;
      }
      nav .ds-menu-title{
        font-size:1.05rem !important;
      }
      nav .ds-menu-sub{
        font-size:.86rem !important;
        white-space:normal !important;
      }
      nav .ds-menu-ico{
        width:36px !important;
        height:36px !important;
        border-radius:12px !important;
        background:rgba(248,250,252,0.95) !important;
        box-shadow:0 3px 8px rgba(15,23,42,.08) !important;
      }
      nav .menu-header{
        display:flex !important;
        padding:calc(16px + env(safe-area-inset-top)) 18px 12px !important;
        background:#ffffff !important;
        box-shadow:0 4px 12px rgba(15,23,42,.06) !important;
      }
      nav .menu-body{
        padding:6px 0 calc(16px + env(safe-area-inset-bottom)) !important;
      }
    }

    /* HERO (top copy from seachPro3) */
    .hero{
      position:relative;
      overflow:visible;
      padding-top:56px;
      padding-bottom:24px;
    }
    .hero-bg{
      position:absolute;
      inset:-140px -40px auto;
      background:
        radial-gradient(circle at 0% 0%, rgba(56,189,248,.22), transparent 60%),
        radial-gradient(circle at 100% 0%, rgba(59,130,246,.24), transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(167,139,250,.18), transparent 55%);
      opacity:.92;
      z-index:-2;
      pointer-events:none;
    }
    .hero-glass{
      position:absolute;
      inset:40px 12px auto;
      max-width:var(--max);
      margin:0 auto;
      left:50%;
      transform:translateX(-50%);
      background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(248,250,252,.88));
      border-radius:32px;
      filter:blur(44px);
      opacity:.45;
      z-index:-1;
      pointer-events:none;
    }
    .hero-inner{
      display:grid;
      gap:16px;
      align-items:center;
    }
    .hero-copy h1{
      font-size:2.1rem;
      font-weight:850;
      letter-spacing:-0.04em;
      margin:0 0 10px;
    }
    .hero-copy p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:1.05rem;
      max-width:58ch;
    }
    .hero-seo-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .hero-seo-links a{
      display:inline-flex;
      align-items:center;
      padding:9px 14px;
      border-radius:999px;
      text-decoration:none;
      font-weight:800;
      color:var(--text);
      background:rgba(255,255,255,.78);
      border:1px solid rgba(15,23,42,.08);
      box-shadow:0 10px 24px rgba(15,23,42,.06);
      transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
    }
    .hero-seo-links a:hover{
      transform:translateY(-1px);
      border-color:rgba(0,113,227,.24);
      box-shadow:0 14px 30px rgba(15,23,42,.1);
    }
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top:6px;
      color:var(--muted);
      font-size:.9rem;
    }
    .trust-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(15,23,42,.04);
      border:1px solid rgba(148,163,184,.35);
    }
    .trust-pill i{ color:#22c55e; }
    @media (min-width:768px){
      .hero-copy h1{ font-size:3.1rem; }
    }
    @media (max-width:640px){
      :root{ --nav-h: 58px; }
      .nav-inner{ padding:10px 16px; }
      nav .logo img{ height:34px; }
      nav .logo{ font-size:1.15rem; }
    }

    /* ====== TOP BAR (always visible) ====== */
    .top-search{
      position: sticky;
      top: var(--nav-h);
      z-index: 85;
      padding: 12px max(var(--pad), env(safe-area-inset-right))
               10px max(var(--pad), env(safe-area-inset-left));
      background: rgba(248, 250, 252, .78);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(15,23,42,.06);
    }

    .search-row{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .pill{
      flex:1;
      height: var(--h);
      display:flex;
      align-items:center;
      gap:10px;
      padding: 0 12px;
      background: rgba(255,255,255,.82);
      border:1px solid var(--border);
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(2,6,23,.05);
      -webkit-tap-highlight-color: transparent;
    }

    .icon{ width:18px; height:18px; opacity:.75; flex:0 0 auto; }

    .input{
      flex:1;
      border:0;
      outline:none;
      background:transparent;
      height:100%;
      font-size:16px; /* prevent iOS zoom */
      color:var(--text);
    }
    .input::placeholder{ color: rgba(100,116,139,.85); }

    .clear{
      border:0;
      background: rgba(100,116,139,.14);
      width:28px; height:28px;
      border-radius:999px;
      display:grid;
      place-items:center;
      opacity:0;
      transform: scale(.95);
      transition: opacity .15s ease, transform .15s ease;
      cursor:pointer;
    }
    .clear.is-on{ opacity:1; transform: scale(1); }
    .clear svg{ width:12px; height:12px; opacity:.9; }

    .cancel{
      border:0;
      background:transparent;
      color: var(--accent);
      font-size:16px;
      padding: 8px 6px;
      cursor:pointer;
      opacity:0;
      pointer-events:none;
      transform: translateX(6px);
      transition: opacity .18s ease, transform .18s ease;
      white-space: nowrap;
    }
    .cancel.is-on{ opacity:1; pointer-events:auto; transform: translateX(0); }

    .chips{
      margin-top:10px;
      display:flex;
      gap:8px;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom:2px;
    }
    .chips::-webkit-scrollbar{ display:none; }
    .chip{
      flex:0 0 auto;
      border:1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.72);
      border-radius:999px;
      padding: 8px 12px;
      font-size:13px;
      color: rgba(15,23,42,.78);
      cursor:pointer;
      user-select:none;
    }
    .chip.is-active{
      border-color: rgba(0,113,227,.25);
      color: rgba(0,113,227,.95);
      background: rgba(0,113,227,.08);
    }

    /* ====== MAIN PAGE CONTENT (demo) ====== */
    .page{
      padding: 16px max(var(--pad), env(safe-area-inset-right))
               60px max(var(--pad), env(safe-area-inset-left));
    }
    .card{
      background: white;
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 18px;
      padding: 14px;
      box-shadow: var(--shadow);
    }
    .hint{ color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 10px; }

    /* ====== OVERLAY (iOS-like search results) ====== */
    .overlay{
      position: fixed;
      inset: 0;
      z-index: 96;
      display: none;
    }
    .overlay.is-on{ display:block; }

    .dim{
      position:absolute;
      inset:0;
      background: rgba(248,250,252,.42);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity:0;
      transition: opacity .18s ease;
    }
    .overlay.is-on .dim{ opacity:1; }

    .sheet{
      position:absolute;
      left: var(--overlay-left, 12px);
      right: auto;
      top: var(--overlay-top, calc(env(safe-area-inset-top) + 78px));
      bottom: auto;
      width: var(--overlay-width, calc(100vw - 24px));
      max-height: var(--overlay-max-height, calc(100vh - (env(safe-area-inset-top) + 92px)));
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.94));
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      backdrop-filter: blur(18px) saturate(180%);
      border: 1px solid rgba(191,219,254,.75);
      border-radius: 18px;
      box-shadow:
        0 28px 64px rgba(15,23,42,.16),
        0 0 0 1px rgba(255,255,255,.65) inset;
      transform: translateY(18px);
      opacity: 0;
      transition: transform .22s ease, opacity .22s ease;
      overflow: hidden;
    }
    .overlay.is-on .sheet{
      transform: translateY(0);
      opacity: 1;
    }

    .sheet-inner{
      height: auto;
      max-height: var(--overlay-max-height, calc(100vh - (env(safe-area-inset-top) + 92px)));
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px max(var(--pad), env(safe-area-inset-right))
               calc(18px + env(safe-area-inset-bottom))
               max(var(--pad), env(safe-area-inset-left));
    }

    .section-title{
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: rgba(71,85,105,.82);
      margin: 10px 4px 8px;
    }

    .list{
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(226,232,240,.95);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(15,23,42,.06);
    }
    .row{
      display:flex;
      gap: 10px;
      align-items:center;
      padding: 12px 12px;
      border-top: 1px solid rgba(226,232,240,.92);
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
      background: transparent;
      transition: background .16s ease, transform .16s ease;
    }
    .row:first-child{ border-top: 0; }
    .row:hover{ background: rgba(239,246,255,.92); }
    .row:active{
      background: rgba(219,234,254,.92);
      transform: scale(.997);
    }

    .dot{
      width: 28px; height: 28px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(219,234,254,.96), rgba(191,219,254,.92));
      display:grid;
      place-items:center;
      color: rgba(0,113,227,.96);
      flex: 0 0 auto;
      box-shadow: inset 0 0 0 1px rgba(147,197,253,.55);
    }
    .row-title{ font-size: 15px; font-weight: 700; color: rgba(15,23,42,.96); }
    .row-sub{ font-size: 12px; color: rgba(100,116,139,.95); margin-top: 2px; }
    .grow{ flex:1; min-width:0; }
    .chev{ opacity:.75; color: rgba(100,116,139,.9); }

    .empty{
      margin: 12px 6px 0;
      color: rgba(100,116,139,.92);
      font-size: 13px;
    }

    @media (min-width: 769px){
      .overlay{
        position:fixed;
        inset:0;
        z-index:96;
        pointer-events:none;
      }
      .overlay.is-on{ display:block; }
      .overlay .dim{
        display:none;
      }
      .sheet{
        position:absolute;
        left:var(--overlay-left, 50%);
        right:auto;
        top:var(--overlay-top, calc(var(--nav-h) + 108px));
        bottom:auto;
        width:var(--overlay-width, min(var(--max), calc(100vw - 32px)));
        max-width:min(980px, calc(100vw - 32px));
        max-height:var(--overlay-max-height, min(420px, calc(100vh - (var(--nav-h) + 132px))));
        background:
          linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.95));
        border:1px solid rgba(191,219,254,.78);
        border-radius:22px;
        box-shadow:
          0 30px 70px rgba(15,23,42,.18),
          0 0 0 1px rgba(255,255,255,.7) inset;
        transform:translate(0, 8px);
        opacity:0;
        overflow:hidden;
        pointer-events:auto;
        backdrop-filter:blur(18px) saturate(180%);
        -webkit-backdrop-filter:blur(18px) saturate(180%);
      }
      .overlay.is-on .sheet{
        transform:translate(0, 0);
        opacity:1;
      }
      .sheet-inner{
        height:auto;
        max-height:var(--overlay-max-height, min(420px, calc(100vh - (var(--nav-h) + 132px))));
        padding:12px 12px 16px;
      }
    }

    @media (max-width: 768px){
      .top-search{
        position: relative;
        top: auto;
        z-index: auto;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      .overlay{
        pointer-events:none;
      }
      .overlay .dim{
        display:none;
      }
      .sheet{
        width:var(--overlay-width, calc(100vw - 24px));
        max-width:calc(100vw - 24px);
        max-height:var(--overlay-max-height, min(280px, 42dvh));
        border-radius:18px;
        box-shadow:
          0 20px 44px rgba(15,23,42,.14),
          0 0 0 1px rgba(255,255,255,.7) inset;
        pointer-events:auto;
      }
      .sheet-inner{
        max-height:var(--overlay-max-height, min(280px, 42dvh));
        padding:10px 10px 12px;
      }
      .section-title{
        margin-top:6px;
      }
      .row{
        padding:11px 12px;
      }
    }
  
    /* SECTION: RESULTS (from seachPro3) */
    .section{
      background:var(--page);
      padding-top:34px;
      padding-bottom:64px;
    }
    .seo-cluster{
      padding:8px 0 4px;
    }
    .seo-cluster__card{
      max-width:var(--max);
      margin:0 auto;
      padding:18px;
      border-radius:24px;
      border:1px solid rgba(226,232,240,.9);
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
      box-shadow:0 18px 42px rgba(15,23,42,.08);
      display:grid;
      gap:16px;
    }
    .seo-cluster__eyebrow{
      font-size:.76rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--accent);
      font-weight:900;
      margin-bottom:6px;
    }
    .seo-cluster__card h2{
      margin:0 0 8px;
      font-size:1.35rem;
      letter-spacing:-.03em;
    }
    .seo-cluster__card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
    }
    .seo-cluster__links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .seo-cluster__links a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:999px;
      text-decoration:none;
      font-weight:800;
      color:var(--text);
      background:#fff;
      border:1px solid rgba(148,163,184,.35);
      transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
    }
    .seo-cluster__links a:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(15,23,42,.08);
      border-color:rgba(0,113,227,.22);
    }
    .results-layout{
      display:grid;
      gap:18px;
      align-items:start;
    }
    @media (min-width:980px){
      .results-layout{ grid-template-columns: 360px 1fr; }
    }
    .panel{
      background:#fff;
      border:1px solid rgba(226,232,240,.9);
      border-radius:24px;
      box-shadow:0 18px 42px rgba(15,23,42,.12);
      padding:16px;
    }
    .panel h3{
      margin:0 0 12px;
      font-size:1.05rem;
      letter-spacing:-0.02em;
    }
    .filter-group{
      display:grid;
      gap:10px;
      margin-bottom:14px;
    }
    .filter-label{
      font-size:.85rem;
      color:var(--muted);
      font-weight:700;
      margin-bottom:6px;
    }
    .select, .range{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.35);
      padding:10px 12px;
      outline:none;
      font-size:.95rem;
      background:#fff;
    }

    .result-list{
      display:grid;
      gap:14px;
    }
    .doctor-card{
      display:grid;
      gap:12px;
      grid-template-columns: 64px 1fr;
      align-items:start;
      padding:16px;
      border-radius:24px;
      border:1px solid rgba(226,232,240,.9);
      background:rgba(255,255,255,.92);
      box-shadow:0 16px 40px rgba(15,23,42,.10);
    }
    .doc-avatar{
      width:64px;
      height:64px;
      border-radius:18px;
      background:linear-gradient(135deg,#38bdf8,#6366f1);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:900;
      letter-spacing:-0.02em;
      overflow:hidden;
    }
    .doc-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .doc-top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
    }
    .doc-rating{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 11px;
      border-radius:999px;
      background:rgba(245,158,11,.1);
      border:1px solid rgba(245,158,11,.24);
      color:#92400e;
      font-size:.86rem;
      font-weight:900;
      white-space:nowrap;
    }
    .doc-rating i{ color:#f59e0b; }
    .doc-name{
      font-size:1.05rem;
      font-weight:850;
      letter-spacing:-0.02em;
      margin:0;
    }
    .doc-meta{
      color:var(--muted);
      font-size:.92rem;
      margin-top:2px;
    }
    .doc-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .next-slot-card{
      margin-top:12px;
      padding:12px 14px;
      border-radius:16px;
      background:linear-gradient(180deg, rgba(0,113,227,.08), rgba(255,255,255,.92));
      border:1px solid rgba(0,113,227,.14);
    }
    .next-slot-card__label{
      font-size:.72rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:800;
    }
    .next-slot-card__value{
      margin-top:4px;
      font-size:.98rem;
      font-weight:850;
      color:var(--text);
      line-height:1.4;
    }
    .badge{
      font-size:.78rem;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.35);
      background:rgba(15,23,42,.03);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .badge i{ color:#22c55e; }

    .doc-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
      align-items:center;
    }
    .btn-secondary{
      border:1px solid rgba(148,163,184,.45);
      background:#fff;
      color:var(--text);
      padding:10px 14px;
      border-radius:999px;
      font-weight:800;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(15,23,42,.10);
      border-color:rgba(148,163,184,.8);
    }

    .btn-primary{
      border:0;
      background:var(--accent);
      color:#fff;
      padding:10px 16px;
      border-radius:999px;
      font-weight:900;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
      box-shadow:0 14px 34px rgba(37,99,235,.28);
      transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
      min-width:152px;
      justify-content:center;
    }
    .btn-primary:hover{
      background:var(--accent-dark);
      transform:translateY(-1px);
      box-shadow:0 18px 44px rgba(30,64,175,.38);
    }

    .skeleton{
      position:relative;
      overflow:hidden;
      background:rgba(15,23,42,.04);
      border-radius:14px;
    }
    .skeleton::after{
      content:"";
      position:absolute;
      inset:-20% -60%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
      transform:skewX(-18deg);
      animation:shimmer 1.1s infinite;
    }
    @keyframes shimmer{
      0%{ transform:translateX(-40%) skewX(-18deg); opacity:.55;}
      100%{ transform:translateX(70%) skewX(-18deg); opacity:.75;}
    }
    .doctor-card.is-skeleton{ grid-template-columns:64px 1fr; }
    .sk-line{ height:12px; }
    .sk-line.big{ height:16px; width:58%; }
    .sk-line.mid{ width:42%; }
    .sk-line.small{ width:28%; }
    .sk-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .sk-pill{ height:22px; width:120px; border-radius:999px; }

    .divider{
      height:1px;
      background:rgba(148,163,184,.25);
      margin:14px 0;
    }

    body.is-pristine #results{ display:none; }


/* ====== Premium search look imported from searchPro7 ====== */
.search-card{
      background:#fff;
      border-radius:26px;
      box-shadow:0 22px 60px rgba(15,23,42,.16);
      border:1px solid rgba(226,232,240,.9);
      padding:14px;
      position:relative;
      overflow:hidden;
      width:100%;
      margin:0 auto;
    }

.search-card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(120deg, rgba(0,113,227,.22), rgba(56,189,248,.16), rgba(167,139,250,.14));
      opacity:.35;
      filter:blur(20px);
      z-index:0;
      pointer-events:none;
    }

.search-card > *{ position:relative; z-index:1; }

.search-form{
      display:flex;
      flex-direction:column;
      gap:12px;
      width:100%;
    }

.field{
      display:flex;
      align-items:center;
      gap:10px;
      background:#fff;
      border:1px solid rgba(148,163,184,.35);
      border-radius:16px;
      padding:12px 14px;
      box-shadow:0 10px 24px rgba(15,23,42,.06);
      transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
      width:100%;
    }

.field:focus-within{
      border-color:rgba(0,113,227,.55);
      box-shadow:0 18px 40px rgba(37,99,235,.16);
      transform:translateY(-1px);
    }

.field i{ color:var(--accent); font-size:1.2rem; }

.field input{
      border:0;
      outline:none;
      width:100%;
      font-size:1rem;
      background:transparent;
      color:var(--text);
      min-width:0;
    }

.btn-search{
      border:0;
      cursor:pointer;
      border-radius:999px;
      padding:12px 18px;
      font-weight:800;
      background:var(--accent);
      color:#fff;
      box-shadow:0 16px 40px rgba(37,99,235,.35);
      display:inline-flex;
      align-items:center;
      gap:10px;
      justify-content:center;
      transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
      min-height:50px;
      width:100%;
    }

.btn-search:hover{
      background:var(--accent-dark);
      transform:translateY(-2px);
      box-shadow:0 22px 54px rgba(30,64,175,.45);
    }

.segmented{
      width:100%;
      display:flex;
      gap:8px;
      padding:6px;
      border-radius:999px;
      background:rgba(15,23,42,.04);
      border:1px solid rgba(148,163,184,.35);
      box-sizing:border-box;
    }

.seg{
      flex:1;
      min-width:0;
      border:0;
      background:transparent;
      padding:10px 12px;
      border-radius:999px;
      cursor:pointer;
      font-weight:800;
      color:var(--muted);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      transition:background .2s ease,color .2s ease,transform .15s ease, box-shadow .2s ease;
      font-size:.92rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      -webkit-tap-highlight-color: transparent;
    }

.seg i{ font-size:1.05rem; }

.seg.is-active{
      background:#fff;
      color:var(--text);
      box-shadow:0 10px 24px rgba(15,23,42,.06);
      border:1px solid rgba(148,163,184,.35);
    }

.seg:active{ transform: translateY(1px); }

.chip-row{
      display:flex;
      gap:8px;
      margin-top:12px;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:4px;
    }

.chip-row::-webkit-scrollbar{ height:0; }

.chip{
      border:1px solid rgba(148,163,184,.35);
      background:rgba(255,255,255,.75);
      color:var(--text);
      padding:8px 12px;
      border-radius:999px;
      font-size:.9rem;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

.chip i{ color:var(--accent); }

.chip:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(15,23,42,.10);
      border-color:rgba(148,163,184,.65);
    }

.hint{
      font-size:.84rem;
      color:var(--muted);
      margin-top:10px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

.sr{ position:absolute; left:-9999px; }

/* ====== Top sticky search uses premium SearchCard (from searchPro7) ====== */
.search-row{ display:block; }
.top-card.search-card{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  border-radius:22px;
  padding:12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
}
.search-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
  width:100%;
}
.search-actions > *{
  width:100%;
}
.search-hint{
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(245,158,11,.24);
  background:rgba(245,158,11,.08);
  color:#92400e;
  font-size:.92rem;
  font-weight:700;
}
.search-hint[hidden]{
  display:none !important;
}
.clear{
  border:0;
  background: rgba(100,116,139,.14);
  width:28px; height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  opacity:0;
  transform: scale(.95);
  transition: opacity .15s ease, transform .15s ease;
  cursor:pointer;
}
.clear.is-on{ opacity:1; transform: scale(1); }
.clear svg{ width:12px; height:12px; opacity:.9; }
.field .right-actions{ display:flex; align-items:center; gap:8px; }
@media (max-width:420px){
  .top-card.search-card{ padding:10px; }
}



/* ====== iPhone overflow fix: include padding in widths ====== */
*, *::before, *::after{ box-sizing: border-box; }
.search-card{ box-sizing: border-box; }

/* =========================
   Apple-like Spinner + Loading
   for searchPro.html
   ========================= */

.ds-action{
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.ds-action.is-loading{
  pointer-events:none;
  opacity:.88;
}

.ds-action .btn-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  transition: opacity .2s ease, transform .2s ease;
}

.ds-action.is-loading .btn-label{
  opacity:0;
  transform: translateY(3px);
}

.ds-action .btn-spinner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform: scale(.88);
  transition: opacity .2s ease, transform .2s ease;
}

.ds-action.is-loading .btn-spinner{
  opacity:1;
  transform: scale(1);
}

.apple-spinner{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: apple-spin .7s linear infinite;
}

.ds-action.is-ghost .apple-spinner{
  border:2px solid rgba(15,23,42,.22);
  border-top-color: var(--accent);
}

@keyframes apple-spin{ to { transform: rotate(360deg); } }

/* Ajuste: tus botones secundarios/ghost se ven mejor sin “jump” en loading */
.btn-secondary.ds-action,
.btn-primary.ds-action,
.btn-search.ds-action,
.cancel.ds-action,
nav .btn-login.ds-action,
nav .btn-page.ds-action,
nav .btn-logout.ds-action{
  min-height: 44px;
}

/* FIX: no matar hover / motion original */
.ds-action:not(.is-loading) .btn-label{
  transform:none !important;
  opacity:1 !important;
}

.ds-action{
  will-change: transform, box-shadow;
}

/* FIX: conserva motion/hover original */
.ds-action .btn-label{
  width:auto !important;
}

/* solo si quieres que el spinner no "mueva" el botón */
.ds-action{
  min-width: fit-content;
}


    html, body{
      width:100%;
      overflow-x:hidden;
    }
    img, iframe{
      max-width:100%;
    }

    /* === CINEMATIC REVEAL (Apple-like) === */
    .cinematic{opacity:0;transform:translateY(18px) scale(0.985);filter:blur(6px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--delay,0ms);will-change:transform,opacity,filter}
    .cinematic.cinematic-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    .cinematic-hover{transition:transform .35s ease,box-shadow .35s ease}
    .cinematic-hover:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(15,23,42,.12)}
    @media (prefers-reduced-motion:reduce){.cinematic{opacity:1;transform:none;filter:none;transition:none}.cinematic-hover{transition:none}.cinematic-hover:hover{transform:none;box-shadow:none}}
    @media (max-width: 768px), (hover: none) and (pointer: coarse){
      .cinematic,
      .cinematic.cinematic-visible{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        transition:none !important;
        will-change:auto !important;
      }
      .cinematic-hover,
      .cinematic-hover:hover{
        transform:none !important;
        transition:none !important;
      }
    }

    /* Menu hardening: keep menu links clean in all sizes */
    nav a.ds-menu-item,
    nav a.ds-menu-item:link,
    nav a.ds-menu-item:visited,
    nav a.ds-menu-item:hover,
    nav a.ds-menu-item:focus,
    nav a.ds-menu-item:active{
      text-decoration:none !important;
      border-bottom:0 !important;
      -webkit-text-decoration:none !important;
    }
    nav a.ds-menu-item *{
      text-decoration:none !important;
      border-bottom:0 !important;
      -webkit-text-decoration:none !important;
    }
    nav .ds-menu-right{
      text-decoration:none !important;
      border-bottom:0 !important;
    }
    nav .ds-menu-chevron{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none !important;
      border-bottom:0 !important;
    }
    nav .ds-menu-title,
    nav .ds-menu-sub{
      text-decoration:none !important;
      border-bottom:0 !important;
    }
    .stripe-modal{
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.45);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:1200;
      padding:18px;
    }
    .stripe-modal.is-open{ display:flex; }
    .stripe-modal-card{
      width:min(520px, 100%);
      background:#fff;
      border:1px solid rgba(148,163,184,.3);
      border-radius:20px;
      box-shadow:0 28px 80px rgba(15,23,42,.28);
      overflow:hidden;
    }
    .stripe-modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 16px;
      border-bottom:1px solid rgba(148,163,184,.2);
    }
    .stripe-modal-header h3{ margin:0; font-size:1.1rem; }
    .stripe-modal-close{
      width:34px; height:34px; border-radius:999px; border:1px solid rgba(148,163,184,.35);
      background:#fff; cursor:pointer; font-size:1.2rem; line-height:1;
    }
    .stripe-modal-body{ padding:14px 16px; }
    .stripe-modal-body p{ margin:8px 0; color:var(--text); }
    .stripe-modal-actions{
      padding:14px 16px;
      border-top:1px solid rgba(148,163,184,.2);
      display:flex;
      justify-content:flex-end;
      gap:10px;
    }
    /* Mobile-only overflow guardrails */
    @media (max-width: 720px){
      nav .menu,
      nav .menu-body,
      nav .menu__section{
        max-width:100%;
        box-sizing:border-box;
      }
      nav .menu-body{
        overflow-x:hidden;
      }
      nav .ds-menu-item{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
      }
      nav .ds-menu-left,
      nav .ds-menu-text{
        min-width:0;
      }
      nav .ds-menu-right{
        flex:0 0 auto;
        min-width:24px;
        margin-left:8px;
      }
    }
    /* iOS mobile menu: keep bottom actions reachable (incl. "Cerrar sesión") */
    @media (max-width: 720px){
      body.menu-open{
        touch-action: auto !important;
      }
      nav .menu{
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        overscroll-behavior-y: contain !important;
      }
      nav .menu-body{
        padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
      }
      nav .menu-body::after{
        content: "";
        display: block;
        height: 72px;
      }
    }