:root{
      --bg:#020202;
      --bg2:#080604;
      --gold:#d99a28;
      --gold-soft:#ffc765;
      --white:#fff8ed;
      --muted:#d9d0c4;
      --line:rgba(217,154,40,.28);
      --radius:clamp(18px, 2vw, 30px);
      --max:1560px;
      --page-pad:clamp(14px, 3vw, 54px);
      --card-h:clamp(230px, 20vw, 318px);
      --shadow:0 28px 80px rgba(0,0,0,.76);
      --ease:cubic-bezier(.2,.9,.2,1);
    }

    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    html{
      scroll-behavior:smooth;
      -webkit-text-size-adjust:100%;
    }

    body{
      min-height:100svh;
      overflow-x:hidden;
      background:
        radial-gradient(circle at 50% -14%, rgba(217,154,40,.24), transparent 36%),
        radial-gradient(circle at 8% 18%, rgba(217,154,40,.10), transparent 25%),
        radial-gradient(circle at 94% 52%, rgba(216,44,255,.09), transparent 32%),
        linear-gradient(180deg, #050403 0%, #000 38%, #030303 100%);
      color:var(--white);
      font-family:Arial, Helvetica, sans-serif;
    }


    #particles-js{
      position:fixed;
      inset:0;
      z-index:2;
      pointer-events:none;
      background:
        radial-gradient(circle at 50% -12%, rgba(217,154,40,.18), transparent 36%),
        radial-gradient(circle at 12% 18%, rgba(217,154,40,.08), transparent 26%),
        radial-gradient(circle at 92% 56%, rgba(216,44,255,.08), transparent 34%),
        #020202;
    }

    #particles-js canvas{
      display:block;
      width:100%;
      height:100%;
      transform:translateZ(0);
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      z-index:1;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.019) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(217,154,40,.12), transparent 40%);
      background-size:88px 88px, 88px 88px, auto;
      mask-image:linear-gradient(#000, transparent 78%);
      opacity:.55;
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:3;
      background:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:100% 5px;
      opacity:.035;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    button{
      font:inherit;
    }

    .app{
      position:relative;
      z-index:5;
      width:min(var(--max), calc(100% - (var(--page-pad) * 2)));
      margin-inline:auto;
      padding:clamp(14px, 2vw, 30px) 0 calc(24px + env(safe-area-inset-bottom));
    }

    .topbar{
      min-height:clamp(132px, 17vw, 224px);
      display:grid;
      grid-template-columns:clamp(50px, 8vw, 120px) 1fr clamp(50px, 8vw, 120px);
      align-items:start;
      gap:clamp(8px, 2vw, 22px);
      position:relative;
    }

    .icon-button{
      width:clamp(44px, 4.7vw, 64px);
      height:clamp(44px, 4.7vw, 64px);
      margin-top:clamp(16px, 3.6vw, 48px);
      border:1px solid transparent;
      border-radius:18px;
      background:rgba(0,0,0,.06);
      color:var(--gold-soft);
      cursor:pointer;
      display:grid;
      place-items:center;
      filter:drop-shadow(0 0 14px rgba(217,154,40,.22));
      transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), filter .28s var(--ease);
      -webkit-tap-highlight-color:transparent;
    }

    .icon-button:hover,
    .icon-button:focus-visible{
      transform:translateY(-3px) scale(1.03);
      border-color:rgba(217,154,40,.32);
      background:rgba(217,154,40,.07);
      filter:drop-shadow(0 0 24px rgba(217,154,40,.48));
      outline:0;
    }

    .icon-button svg{
      width:72%;
      height:72%;
    }

    .social-links{
      justify-self:end;
      margin-top:clamp(16px, 3.6vw, 48px);
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:clamp(8px, .85vw, 14px);
    }

    .social-icon{
      width:clamp(42px, 4.2vw, 58px);
      height:clamp(42px, 4.2vw, 58px);
      border:1px solid rgba(217,154,40,.20);
      border-radius:17px;
      display:grid;
      place-items:center;
      color:var(--gold-soft);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,199,101,.13), transparent 58%),
        rgba(0,0,0,.12);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 0 13px rgba(217,154,40,.16);
      transition:
        transform .28s var(--ease),
        border-color .28s var(--ease),
        color .28s var(--ease),
        background .28s var(--ease),
        box-shadow .28s var(--ease);
      -webkit-tap-highlight-color:transparent;
    }

    .social-icon svg{
      width:62%;
      height:62%;
      filter:drop-shadow(0 0 8px rgba(217,154,40,.22));
    }

    .social-icon:hover,
    .social-icon:focus-visible{
      transform:translateY(-3px) scale(1.05);
      color:#fff4df;
      border-color:rgba(255,199,101,.48);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,199,101,.22), transparent 60%),
        rgba(217,154,40,.10);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 24px rgba(217,154,40,.42);
      outline:0;
    }

    .social-icon.facebook:hover{ color:#8bbcff; }
    .social-icon.instagram:hover{ color:#ff8dff; }
    .social-icon.tiktok:hover{ color:#67f5ff; }
    .social-icon.whatsapp:hover{ color:#75ff9d; }


    .brand{
      text-align:center;
      padding-top:clamp(0px, .7vw, 6px);
      user-select:none;
    }

    .brand-mark{
      width:clamp(86px, 11vw, 178px);
      height:clamp(86px, 11vw, 178px);
      margin:0 auto clamp(-16px, -1.3vw, -8px);
      color:var(--gold);
      filter:
        drop-shadow(0 0 14px rgba(217,154,40,.32))
        drop-shadow(0 0 36px rgba(217,154,40,.14));
      animation:logoGlow 4s ease-in-out infinite alternate;
    }

    .brand h1{
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(32px, 5vw, 80px);
      line-height:.93;
      letter-spacing:clamp(4px, .75vw, 13px);
      color:var(--gold);
      font-weight:700;
      text-shadow:0 0 18px rgba(217,154,40,.28);
    }

    .brand p{
      margin-top:clamp(8px, 1vw, 15px);
      color:#f6efe6;
      font-size:clamp(10px, 1.42vw, 22px);
      letter-spacing:clamp(2px, .36vw, 5.5px);
      font-weight:500;
    }

    .cards{
      display:grid;
      gap:clamp(14px, 1.7vw, 26px);
    }

    .service-card{
      --accent:#d99a28;
      --soft:#ffc765;
      min-height:var(--card-h);
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      position:relative;
      overflow:hidden;
      isolation:isolate;
      display:grid;
      grid-template-columns:minmax(370px, 41%) 1fr;
      align-items:center;
      background:
        linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.90) 32%, rgba(0,0,0,.33) 58%, rgba(0,0,0,.86) 100%),
        radial-gradient(circle at 78% 48%, color-mix(in srgb, var(--accent), transparent 68%), transparent 37%),
        linear-gradient(135deg, #090807, #010101);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 84%),
        0 0 24px color-mix(in srgb, var(--accent), transparent 78%),
        var(--shadow);
      transform:translateZ(0);
      transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
      -webkit-tap-highlight-color:transparent;
      contain:layout paint style;
      content-visibility:auto;
      contain-intrinsic-size:318px;
    }

    .service-card.beer,
    .service-card.uniforms{
      --accent:#d99a28;
      --soft:#ffc765;
    }

    .service-card.medical{
      --accent:#0a9cff;
      --soft:#71d3ff;
    }

    .service-card.neon{
      --accent:#d82cff;
      --soft:#ff8dff;
    }

    .service-card:hover,
    .service-card:focus-visible{
      transform:translateY(-5px);
      border-color:color-mix(in srgb, var(--accent), white 22%);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 72%),
        0 0 36px color-mix(in srgb, var(--accent), transparent 52%),
        0 30px 90px rgba(0,0,0,.82);
      outline:0;
    }

    .service-card::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        linear-gradient(110deg, transparent 0 24%, rgba(255,255,255,.085) 38%, transparent 52%),
        radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--soft), transparent 78%), transparent 20%),
        radial-gradient(circle at 92% 98%, color-mix(in srgb, var(--accent), transparent 78%), transparent 25%);
      opacity:.8;
      transform:translateX(-14%);
      transition:transform .7s var(--ease), opacity .3s var(--ease);
    }

    .service-card:hover::before{
      transform:translateX(4%);
      opacity:.9;
    }

    .service-card::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:calc(var(--radius) - 1px);
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 14%, transparent 86%, rgba(255,255,255,.04)),
        linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 75%), transparent 25%, transparent 76%, color-mix(in srgb, var(--accent), transparent 72%));
      opacity:.72;
      z-index:12;
      mix-blend-mode:screen;
    }

    .card-noise{
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      background-image:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,.045) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,.035) 0 1px, transparent 1.6px);
      background-size:28px 28px, 36px 36px;
      opacity:.14;
    }

    .ambient{
      position:absolute;
      inset:0;
      z-index:1;
      opacity:.96;
      pointer-events:none;
    }

    .beer .ambient{
      background:
        radial-gradient(circle at 67% 22%, rgba(255,183,68,.31), transparent 15%),
        radial-gradient(circle at 88% 18%, rgba(255,183,68,.22), transparent 12%),
        radial-gradient(circle at 57% 63%, rgba(217,112,23,.16), transparent 20%),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,177,62,.065) 55px 59px, transparent 60px 115px);
    }

    .medical .ambient{
      background:
        radial-gradient(circle at 72% 22%, rgba(10,156,255,.20), transparent 19%),
        radial-gradient(circle at 58% 72%, rgba(255,174,58,.13), transparent 20%),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(120,180,255,.05) 55px 60px, transparent 61px 118px);
    }

    .neon .ambient{
      background:
        radial-gradient(circle at 68% 32%, rgba(216,44,255,.24), transparent 25%),
        radial-gradient(circle at 88% 61%, rgba(255,52,102,.20), transparent 24%),
        radial-gradient(circle at 54% 6%, rgba(255,180,68,.12), transparent 18%),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,72,255,.055) 55px 60px, transparent 61px 118px);
    }

    .uniforms .ambient{
      background:
        radial-gradient(circle at 62% 16%, rgba(255,183,68,.22), transparent 17%),
        radial-gradient(circle at 81% 18%, rgba(255,183,68,.17), transparent 18%),
        radial-gradient(circle at 50% 70%, rgba(217,154,40,.08), transparent 28%),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,177,62,.052) 55px 60px, transparent 61px 118px);
    }

    .copy{
      position:relative;
      z-index:8;
      padding-left:clamp(28px, 6vw, 98px);
      padding-right:clamp(70px, 7vw, 100px);
      text-transform:uppercase;
    }

    .copy .eyebrow{
      display:block;
      font-size:clamp(24px, 3.1vw, 50px);
      line-height:1;
      letter-spacing:.03em;
      color:#fff;
      font-weight:500;
      text-shadow:0 2px 22px rgba(0,0,0,.45);
    }

    .copy .title{
      display:block;
      margin-top:clamp(4px, .5vw, 8px);
      font-size:clamp(42px, 5vw, 80px);
      line-height:.86;
      letter-spacing:.012em;
      color:var(--accent);
      font-weight:950;
      text-shadow:
        0 0 12px color-mix(in srgb, var(--accent), transparent 72%),
        0 4px 22px rgba(0,0,0,.55);
    }

    .copy .title2{
      display:block;
      margin-top:clamp(4px, .55vw, 8px);
      font-size:clamp(34px, 4.1vw, 64px);
      line-height:.94;
      letter-spacing:.012em;
      color:var(--accent);
      font-weight:950;
      text-shadow:0 4px 22px rgba(0,0,0,.48);
    }

    .medical .copy .title2{
      color:#fff;
      font-size:clamp(23px, 2.75vw, 43px);
      line-height:1.16;
      font-weight:550;
      margin-top:clamp(8px, .9vw, 14px);
      letter-spacing:.035em;
    }

    .neon .copy .eyebrow{
      font-size:clamp(25px, 2.9vw, 46px);
      letter-spacing:.045em;
    }

    .neon .copy .title{
      font-size:clamp(36px, 4.1vw, 62px);
      color:#fff;
      -webkit-text-stroke:clamp(1px, .14vw, 2px) #ffcaff;
      text-shadow:
        0 0 8px var(--soft),
        0 0 18px var(--accent),
        0 0 38px rgba(216,44,255,.76);
    }

    .uniforms .copy .title{
      color:#fff;
      font-size:clamp(40px, 4.4vw, 68px);
    }

    .uniforms .copy .title2{
      color:var(--accent);
      font-size:clamp(38px, 4.2vw, 64px);
    }

    .ornament{
      margin-top:clamp(22px, 2.4vw, 38px);
      display:flex;
      align-items:center;
      gap:clamp(10px, 1.2vw, 20px);
      color:var(--accent);
      width:min(310px, 78%);
      filter:drop-shadow(0 0 13px color-mix(in srgb, var(--accent), transparent 58%));
    }

    .ornament::before,
    .ornament::after{
      content:"";
      height:2px;
      flex:1;
      opacity:.72;
      background:linear-gradient(90deg, transparent, currentColor);
    }

    .ornament::after{
      background:linear-gradient(90deg, currentColor, transparent);
    }

    .ornament .icon{
      flex:0 0 auto;
      width:clamp(48px, 4.2vw, 70px);
      height:clamp(48px, 4.2vw, 70px);
      display:grid;
      place-items:center;
    }

    .ornament svg{
      width:100%;
      height:100%;
    }

    .medical .ornament .icon{
      width:clamp(130px, 12vw, 182px);
      height:clamp(42px, 4.5vw, 62px);
    }

    .neon .ornament .icon{
      width:clamp(64px, 6vw, 96px);
      height:clamp(64px, 6vw, 96px);
    }

    .visual{
      position:absolute;
      inset:0;
      z-index:4;
      pointer-events:none;
    }

    .visual::before{
      content:"";
      position:absolute;
      right:0;
      top:0;
      bottom:0;
      width:64%;
      background:
        linear-gradient(90deg, rgba(0,0,0,.12), transparent 16%, transparent 84%, rgba(0,0,0,.35)),
        radial-gradient(circle at 70% 50%, rgba(255,255,255,.055), transparent 38%);
      z-index:-1;
    }

    .bar-backdrop{
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, transparent 0 38%, rgba(96,48,17,.18) 45%, rgba(0,0,0,.2) 100%),
        radial-gradient(circle at 77% 22%, rgba(255,180,60,.16), transparent 15%);
      opacity:.9;
    }

    .bar-backdrop::before{
      content:"";
      position:absolute;
      inset:0 0 auto 40%;
      height:50%;
      background:
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,182,77,.18) 43px 46px, transparent 47px 82px);
      filter:blur(.2px);
      opacity:.38;
    }

    .arrow{
      position:absolute;
      right:clamp(18px, 2.6vw, 40px);
      top:50%;
      transform:translateY(-50%);
      width:clamp(52px, 5.3vw, 82px);
      height:clamp(52px, 5.3vw, 82px);
      border-radius:999px;
      border:clamp(2px, .24vw, 3px) solid var(--accent);
      color:var(--accent);
      display:grid;
      place-items:center;
      z-index:15;
      background:rgba(0,0,0,.22);
      box-shadow:
        0 0 16px color-mix(in srgb, var(--accent), transparent 52%),
        inset 0 0 14px rgba(255,255,255,.035);
      transition:transform .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
    }

    .arrow svg{
      width:52%;
      height:52%;
    }

    .service-card:hover .arrow{
      transform:translateY(-50%) translateX(5px) scale(1.04);
      background:color-mix(in srgb, var(--accent), transparent 88%);
      box-shadow:0 0 28px color-mix(in srgb, var(--accent), transparent 36%);
    }

    /* CERVEZAS */
    .service-card.beer,
    .service-card.medical,
    .service-card.neon,
    .service-card.uniforms{
      aspect-ratio:3 / 1;
      min-height:0;
      padding:0;
    }

    .beer-card-image,
    .medical-card-image,
    .neon-card-image,
    .uniform-card-image{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      z-index:10;
      transform:scale(1.002);
      filter:brightness(1);
      transition:transform .55s var(--ease), filter .35s var(--ease);
      user-select:none;
    }

    .beer:hover .beer-card-image,
    .beer:focus-visible .beer-card-image,
    .medical:hover .medical-card-image,
    .medical:focus-visible .medical-card-image,
    .neon:hover .neon-card-image,
    .neon:focus-visible .neon-card-image,
    .uniforms:hover .uniform-card-image,
    .uniforms:focus-visible .uniform-card-image{
      transform:scale(1.035);
      filter:brightness(1.08) saturate(1.06);
    }

    .medical > .ambient,
    .medical > .bar-backdrop,
    .medical > .card-noise,
    .medical > .copy,
    .medical > .visual,
    .medical > .arrow{
      display:none;
    }

    .neon > .ambient,
    .neon > .bar-backdrop,
    .neon > .card-noise,
    .neon > .copy,
    .neon > .visual,
    .neon > .arrow{
      display:none;
    }

    .uniforms > .ambient,
    .uniforms > .bar-backdrop,
    .uniforms > .card-noise,
    .uniforms > .copy,
    .uniforms > .visual,
    .uniforms > .arrow{
      display:none;
    }

    .next-button{
      --next-glow:var(--accent);
      position:absolute;
      right:clamp(14px, 2vw, 30px);
      top:50%;
      z-index:30;
      width:clamp(38px, 3.5vw, 54px);
      aspect-ratio:1;
      border-radius:50%;
      transform:translateY(-50%);
      display:grid;
      place-items:center;
      background:rgba(0,0,0,.38);
      border:2px solid var(--next-glow);
      box-shadow:
        0 0 9px color-mix(in srgb, var(--next-glow), transparent 40%),
        inset 0 0 8px rgba(0,0,0,.45);
      transition:
        transform .42s var(--ease),
        background .3s ease,
        box-shadow .3s ease;
      isolation:isolate;
    }

    .next-button::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius:50%;
      border:1px solid color-mix(in srgb, var(--next-glow), transparent 35%);
      opacity:.45;
      pointer-events:none;
    }

    .next-button::after{
      content:"";
      position:absolute;
      inset:-5px;
      border-radius:50%;
      border:1px solid var(--next-glow);
      opacity:0;
      pointer-events:none;
    }

    .next-symbol{
      position:relative;
      width:28%;
      height:28%;
      transform:translateX(-14%) rotate(-45deg);
      border-right:2px solid var(--next-glow);
      border-bottom:2px solid var(--next-glow);
      filter:drop-shadow(0 0 4px var(--next-glow));
      transition:transform .42s var(--ease);
    }

    .next-sparks,
    .next-label{
      display:none;
    }

    .service-card:hover .next-button,
    .service-card:focus-visible .next-button{
      transform:translateY(-50%) rotate(360deg) scale(1.08);
      background:color-mix(in srgb, var(--next-glow), transparent 88%);
      box-shadow:
        0 0 13px var(--next-glow),
        0 0 24px color-mix(in srgb, var(--next-glow), transparent 38%);
    }

    .service-card:hover .next-symbol,
    .service-card:focus-visible .next-symbol{
      transform:translateX(-14%) rotate(-45deg);
    }

    .service-card:hover .next-button::after,
    .service-card:focus-visible .next-button::after{
      animation:nextRing 1.35s ease-out infinite;
    }

    .service-card.next-clicked .next-button{
      animation:nextBounce .48s var(--ease);
    }

    .service-card.next-clicked .next-button::after{
      animation:nextClickWave .72s ease-out;
    }

    .service-card.next-clicked .next-symbol{
      animation:nextArrowKick .58s var(--ease);
    }

    .beer .next-button{--next-glow:#f4a51c}
    .medical .next-button{--next-glow:#16a8ff}
    .neon .next-button{--next-glow:#ff3ac8}
    .uniforms .next-button{--next-glow:#ff5a1f}

    @keyframes nextRing{
      0%{opacity:.8;transform:scale(.82)}
      70%,100%{opacity:0;transform:scale(1.42)}
    }

    @keyframes nextClickWave{
      0%{opacity:1;transform:scale(.72)}
      100%{opacity:0;transform:scale(1.85)}
    }

    @keyframes nextBounce{
      0%,100%{transform:translateY(-50%) rotate(360deg) scale(1.08)}
      45%{transform:translateY(-50%) rotate(390deg) translateX(7px) scale(.92)}
    }

    @keyframes nextArrowKick{
      0%,100%{transform:translateX(-14%) rotate(-45deg)}
      45%{transform:translateX(24%) rotate(-45deg)}
    }

    .beer-scene{
      position:absolute;
      right:clamp(66px, 7vw, 120px);
      bottom:clamp(26px, 3vw, 42px);
      width:clamp(410px, 42vw, 650px);
      height:clamp(168px, 15vw, 230px);
      z-index:4;
    }

    .beer .visual .chalk{
      position:absolute;
      left:48.5%;
      top:clamp(40px, 4vw, 60px);
      width:clamp(125px, 13vw, 200px);
      height:clamp(96px, 10vw, 150px);
      display:grid;
      place-items:center;
      text-align:center;
      white-space:pre;
      transform:rotate(-4deg);
      color:#dcc4a8;
      font-size:clamp(14px, 1.6vw, 24px);
      line-height:1.06;
      font-weight:900;
      background:
        linear-gradient(135deg, rgba(93,56,30,.98), rgba(16,10,7,.96)),
        #2b1c12;
      border:clamp(5px, .55vw, 8px) solid #704522;
      box-shadow:0 22px 42px rgba(0,0,0,.55);
      opacity:.88;
      z-index:3;
    }

    .beer .visual .chalk::after{
      content:"";
      position:absolute;
      width:34%;
      height:28%;
      bottom:14%;
      left:50%;
      transform:translateX(-50%);
      border:2px solid rgba(240,225,195,.78);
      border-top:0;
      border-radius:0 0 22px 22px;
      opacity:.6;
    }

    .wheat{
      position:absolute;
      left:0;
      bottom:0;
      width:42%;
      height:44%;
      opacity:.88;
      background:
        linear-gradient(13deg, transparent 48%, rgba(221,162,59,.9) 49% 51%, transparent 52%),
        radial-gradient(ellipse at 38% 42%, rgba(221,162,59,.95) 0 11%, transparent 12%),
        radial-gradient(ellipse at 49% 34%, rgba(221,162,59,.9) 0 10%, transparent 11%),
        radial-gradient(ellipse at 60% 28%, rgba(221,162,59,.78) 0 9%, transparent 10%);
      filter:drop-shadow(0 0 10px rgba(217,154,40,.3));
    }

    .beer-glass{
      position:absolute;
      bottom:0;
      border:2px solid rgba(255,255,255,.36);
      border-radius:28% 28% 16% 16%;
      box-shadow:
        inset 10px 0 18px rgba(255,255,255,.18),
        inset -12px 0 20px rgba(0,0,0,.30),
        0 20px 30px rgba(0,0,0,.55);
      overflow:visible;
    }

    .beer-glass::before{
      content:"";
      position:absolute;
      top:-13%;
      left:8%;
      right:8%;
      height:20%;
      border-radius:50% 50% 42% 42%;
      background:
        radial-gradient(circle at 24% 28%, #fff 0 9%, transparent 10%),
        radial-gradient(circle at 60% 18%, #fff7de 0 8%, transparent 9%),
        linear-gradient(#fff9dc, #d69d4a);
      box-shadow:0 0 16px rgba(255,226,156,.34);
    }

    .beer-glass::after{
      content:"";
      position:absolute;
      left:18%;
      top:16%;
      width:12%;
      height:70%;
      border-radius:999px;
      background:linear-gradient(rgba(255,255,255,.33), transparent);
      opacity:.55;
    }

    .beer-glass.dark{
      left:13%;
      width:14%;
      height:75%;
      background:
        linear-gradient(90deg, rgba(255,255,255,.42), transparent 26%, rgba(255,255,255,.18)),
        linear-gradient(#fff2c9 0 11%, #070605 12% 100%);
    }

    .beer-glass.amber{
      left:37%;
      width:14%;
      height:84%;
      background:
        linear-gradient(90deg, rgba(255,255,255,.44), transparent 24%, rgba(255,255,255,.18)),
        linear-gradient(#fff2c9 0 10%, #dd8618 11% 100%);
    }

    .beer-glass.red{
      left:60%;
      width:15%;
      height:88%;
      background:
        linear-gradient(90deg, rgba(255,255,255,.44), transparent 24%, rgba(255,255,255,.18)),
        linear-gradient(#fff2c9 0 10%, #74120e 11% 100%);
    }

    .beer-bubbles{
      position:absolute;
      inset:0;
      z-index:5;
    }

    .beer-bubbles i{
      position:absolute;
      width:6px;
      height:6px;
      border-radius:50%;
      background:rgba(255,235,180,.65);
      box-shadow:0 0 10px rgba(255,196,87,.55);
      animation:bubble 2.8s ease-in-out infinite;
    }

    .beer-bubbles i:nth-child(1){left:43%;bottom:76%;animation-delay:.2s}
    .beer-bubbles i:nth-child(2){left:48%;bottom:86%;animation-delay:.7s}
    .beer-bubbles i:nth-child(3){left:66%;bottom:88%;animation-delay:1.2s}
    .beer-bubbles i:nth-child(4){left:72%;bottom:76%;animation-delay:.4s}

    .hops{
      position:absolute;
      right:0;
      bottom:4%;
      width:17%;
      height:34%;
      background:
        radial-gradient(circle at 18% 58%, #75b032 0 18%, transparent 19%),
        radial-gradient(circle at 34% 42%, #8fc83d 0 19%, transparent 20%),
        radial-gradient(circle at 48% 58%, #70a92b 0 19%, transparent 20%),
        radial-gradient(circle at 63% 41%, #91d342 0 18%, transparent 19%),
        radial-gradient(circle at 76% 60%, #72a831 0 18%, transparent 19%);
      filter:drop-shadow(0 0 14px rgba(128,190,55,.48));
    }

    /* MÉDICOS */
    .medical-kit{
      position:absolute;
      right:clamp(86px, 10vw, 170px);
      bottom:clamp(24px, 2.8vw, 40px);
      width:clamp(340px, 35vw, 520px);
      height:clamp(150px, 14vw, 205px);
      z-index:4;
    }

    .bag{
      position:absolute;
      left:4%;
      bottom:7%;
      width:56%;
      height:78%;
      border-radius:15% 15% 9% 9%;
      background:
        linear-gradient(90deg, rgba(255,255,255,.13), transparent 27%, rgba(0,0,0,.28)),
        linear-gradient(180deg, #0a1824, #050c13);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:
        inset 0 0 32px rgba(255,255,255,.05),
        0 24px 42px rgba(0,0,0,.62);
    }

    .bag::before{
      content:"";
      position:absolute;
      left:50%;
      top:-25%;
      width:34%;
      height:34%;
      transform:translateX(-50%);
      border:clamp(10px, 1vw, 15px) solid #07121d;
      border-bottom:0;
      border-radius:22px 22px 0 0;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
    }

    .bag::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:linear-gradient(110deg, rgba(255,255,255,.08), transparent 24%, transparent 72%, rgba(255,255,255,.05));
      pointer-events:none;
    }

    .cross{
      position:absolute;
      left:50%;
      top:42%;
      width:24%;
      aspect-ratio:1;
      transform:translate(-50%, -50%);
      z-index:2;
    }

    .cross::before,
    .cross::after{
      content:"";
      position:absolute;
      inset:0;
      margin:auto;
      background:#f2efe6;
      opacity:.9;
    }

    .cross::before{
      width:34%;
      height:100%;
    }

    .cross::after{
      width:100%;
      height:34%;
    }

    .aid-text{
      position:absolute;
      left:10%;
      right:10%;
      bottom:14%;
      text-align:center;
      color:#f4f2ec;
      font-size:clamp(11px, 1vw, 18px);
      letter-spacing:.04em;
      font-weight:800;
      z-index:3;
    }

    .stethoscope{
      position:absolute;
      right:13%;
      bottom:4%;
      width:32%;
      height:48%;
      border:clamp(5px, .55vw, 8px) solid rgba(218,224,223,.72);
      border-top:0;
      border-radius:0 0 999px 999px;
      opacity:.93;
      filter:drop-shadow(0 0 8px rgba(255,255,255,.16));
    }

    .stethoscope::before{
      content:"";
      position:absolute;
      left:-15%;
      top:-18%;
      width:14%;
      aspect-ratio:1;
      border-radius:50%;
      background:#d9dfde;
      box-shadow:calc(clamp(110px, 10vw, 155px)) 0 0 #d9dfde;
    }

    .bottle{
      position:absolute;
      right:2%;
      bottom:13%;
      width:10%;
      height:58%;
      border-radius:12px 12px 6px 6px;
      background:linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,.08)), #f1f1eb;
      box-shadow:0 10px 24px rgba(0,0,0,.35);
    }

    .bottle::before{
      content:"";
      position:absolute;
      top:-22%;
      left:26%;
      width:48%;
      height:25%;
      background:#647765;
      border-radius:5px 5px 0 0;
    }

    .pills{
      position:absolute;
      right:18%;
      bottom:11%;
      width:17%;
      height:25%;
      border-radius:7px;
      transform:rotate(-3deg);
      background:
        linear-gradient(90deg, rgba(255,255,255,.35), transparent),
        repeating-linear-gradient(90deg, #f3f1e8 0 15%, #c5d6d6 15% 23%);
      box-shadow:0 10px 18px rgba(0,0,0,.32);
    }

    /* NEÓN */
    .brick-wall{
      position:absolute;
      inset:0 0 0 38%;
      background:
        linear-gradient(90deg, rgba(0,0,0,.22), transparent),
        repeating-linear-gradient(0deg, rgba(90,36,44,.40) 0 25px, rgba(25,9,13,.38) 26px 29px),
        repeating-linear-gradient(90deg, transparent 0 70px, rgba(0,0,0,.25) 71px 74px);
      opacity:.44;
      z-index:0;
    }

    .bulbs{
      position:absolute;
      left:44%;
      top:0;
      width:clamp(240px, 26vw, 380px);
      height:43%;
      opacity:.86;
      z-index:3;
    }

    .bulbs i{
      position:absolute;
      top:0;
      width:2px;
      height:68%;
      background:rgba(255,180,80,.48);
    }

    .bulbs i::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:-18px;
      width:clamp(18px, 1.9vw, 28px);
      height:clamp(28px, 2.7vw, 40px);
      transform:translateX(-50%);
      border-radius:50%;
      background:radial-gradient(circle at 45% 34%, #fff6c0 0 8%, #ff9d2e 33%, rgba(255,126,15,.12) 72%);
      box-shadow:0 0 26px #ff9b2a;
      animation:bulbPulse 2.6s ease-in-out infinite alternate;
    }

    .bulbs i:nth-child(1){left:5%;height:48%}
    .bulbs i:nth-child(2){left:26%;height:78%}
    .bulbs i:nth-child(3){left:47%;height:42%}
    .bulbs i:nth-child(4){left:69%;height:70%}
    .bulbs i:nth-child(5){left:90%;height:50%}

    .neon-sign{
      position:absolute;
      right:clamp(78px, 9vw, 145px);
      top:clamp(36px, 4.4vw, 66px);
      width:clamp(320px, 35vw, 560px);
      z-index:5;
      text-transform:uppercase;
      font-weight:700;
      line-height:1.08;
      letter-spacing:.035em;
    }

    .neon-sign span{
      display:block;
      font-size:clamp(24px, 2.75vw, 43px);
      margin:clamp(4px, .65vw, 9px) 0;
      text-shadow:0 0 10px currentColor, 0 0 22px currentColor, 0 0 38px currentColor;
    }

    .neon-sign span:nth-child(1){color:#ff70ff}
    .neon-sign span:nth-child(2){color:#ff82ff}
    .neon-sign span:nth-child(3){color:#ffad45}

    .martini{
      position:absolute;
      right:clamp(18px, 3vw, 48px);
      top:clamp(36px, 4vw, 62px);
      width:clamp(78px, 8vw, 126px);
      height:clamp(92px, 9vw, 138px);
      color:#ff386f;
      filter:drop-shadow(0 0 14px #ff2e65);
      z-index:6;
      animation:flicker 4s infinite;
    }

    .martini svg{
      width:100%;
      height:100%;
    }

    /* UNIFORMES */
    .uniform-scene{
      position:absolute;
      right:clamp(72px, 9.5vw, 158px);
      bottom:0;
      width:clamp(430px, 48vw, 700px);
      height:100%;
      z-index:4;
    }

    .person{
      position:absolute;
      bottom:-3%;
      width:29%;
      height:98%;
      filter:drop-shadow(0 24px 30px rgba(0,0,0,.62));
    }

    .person.woman{left:12%}
    .person.man{right:18%}

    .head{
      position:absolute;
      top:8%;
      left:50%;
      transform:translateX(-50%);
      width:46%;
      height:37%;
      border-radius:48% 48% 44% 44%;
      background:linear-gradient(90deg, #b97445, #edb079 48%, #965735);
      box-shadow:inset -12px -8px 20px rgba(0,0,0,.23);
      z-index:3;
    }

    .head::before{
      content:"";
      position:absolute;
      left:23%;
      top:43%;
      width:8%;
      height:5%;
      border-radius:50%;
      background:#17100d;
      box-shadow:36px 0 0 #17100d;
      opacity:.9;
    }

    .head::after{
      content:"";
      position:absolute;
      left:40%;
      top:72%;
      width:24%;
      height:4%;
      border-radius:999px;
      background:rgba(80,26,20,.55);
    }

    .hair{
      position:absolute;
      top:4%;
      left:28%;
      width:52%;
      height:43%;
      border-radius:50% 50% 45% 45%;
      background:#15100d;
      z-index:2;
    }

    .woman .hair::after{
      content:"";
      position:absolute;
      left:-18%;
      top:10%;
      width:42%;
      height:80%;
      border-radius:999px;
      background:#110c0a;
      transform:rotate(8deg);
    }

    .man .hair{
      width:48%;
      height:21%;
      left:28%;
      top:4%;
      border-radius:50% 50% 22px 22px;
      background:#1b120e;
      z-index:4;
    }

    .man .head{
      background:linear-gradient(90deg, #a6633d, #d59262 48%, #74402c);
    }

    .man .head .beard,
    .man .head::after{
      background:rgba(58,30,22,.76);
    }

    .body{
      position:absolute;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:88%;
      height:64%;
      border-radius:26% 26% 7% 7%;
      background:linear-gradient(90deg, #070707, #1a1918 48%, #050505);
      border:1px solid rgba(255,255,255,.06);
      z-index:2;
      overflow:hidden;
    }

    .body::before{
      content:"";
      position:absolute;
      left:50%;
      top:4%;
      width:1px;
      height:90%;
      background:rgba(255,255,255,.12);
    }

    .woman .body::after{
      content:"";
      position:absolute;
      left:15%;
      top:17%;
      width:70%;
      height:79%;
      border-radius:18px 18px 7px 7px;
      background:linear-gradient(90deg, #4c2c1e, #8b593c 45%, #2f1d17);
      border:1px solid rgba(255,190,105,.26);
    }

    .apron-straps{
      position:absolute;
      left:32%;
      top:12%;
      width:9%;
      height:84%;
      background:#1e1713;
      box-shadow:38px 0 0 #1e1713;
      z-index:5;
      border-radius:8px;
    }

    .badge{
      position:absolute;
      left:56%;
      bottom:18%;
      transform:translateX(-50%);
      color:var(--gold);
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(9px, .85vw, 14px);
      z-index:6;
      text-shadow:0 0 8px rgba(217,154,40,.38);
    }

    .menu-board{
      position:absolute;
      right:0;
      top:12%;
      width:24%;
      height:64%;
      background:rgba(12,8,5,.68);
      border-left:1px solid rgba(255,180,80,.22);
      color:rgba(255,228,190,.66);
      padding:clamp(16px, 2vw, 34px) clamp(12px, 1.5vw, 22px);
      font-weight:950;
      font-size:clamp(12px, 1.25vw, 20px);
      line-height:1.36;
      text-transform:uppercase;
      filter:blur(.08px);
    }

    /* Sección Cervezas Artesanales */
    .beer-detail-section{
      margin:clamp(22px, 3vw, 46px) auto 0;
      scroll-margin-top:clamp(18px, 5vw, 72px);
    }

    .beer-detail-shell{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(300px, 430px);
      gap:clamp(20px, 3vw, 48px);
      align-items:center;
      padding:clamp(24px, 4vw, 58px);
      border:1px solid rgba(217,154,40,.28);
      border-radius:var(--radius);
      background:
        radial-gradient(circle at 14% 16%, rgba(255,199,101,.20), transparent 30%),
        radial-gradient(circle at 90% 82%, rgba(217,154,40,.18), transparent 34%),
        linear-gradient(135deg, rgba(18,12,5,.94), rgba(2,2,2,.96) 58%, rgba(17,8,2,.94));
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 0 34px rgba(217,154,40,.18),
        var(--shadow);
    }

    .beer-detail-shell::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(110deg, transparent 0 32%, rgba(255,255,255,.08) 45%, transparent 58%),
        linear-gradient(90deg, rgba(217,154,40,.22), transparent 26%, transparent 74%, rgba(217,154,40,.16));
      opacity:.42;
      transform:translateX(-18%);
    }

    .beer-detail-copy,
    .download-panel{
      position:relative;
      z-index:1;
    }

    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--gold-soft);
      font-size:clamp(12px, 1vw, 15px);
      letter-spacing:.26em;
      font-weight:900;
      text-transform:uppercase;
      text-shadow:0 0 16px rgba(217,154,40,.34);
    }

    .section-kicker::before{
      content:"";
      width:clamp(34px, 4vw, 62px);
      height:1px;
      background:linear-gradient(90deg, var(--gold), transparent);
    }

    .beer-detail-copy h2{
      margin-top:clamp(10px, 1.4vw, 18px);
      max-width:850px;
      font-size:clamp(32px, 5.2vw, 82px);
      line-height:.9;
      letter-spacing:.02em;
      text-transform:uppercase;
      color:#f5b338;
      text-shadow:
        0 0 18px rgba(217,154,40,.30),
        0 10px 34px rgba(0,0,0,.62);
    }

    .beer-detail-copy p{
      margin-top:clamp(14px, 1.8vw, 24px);
      max-width:720px;
      color:rgba(255,248,237,.82);
      font-size:clamp(15px, 1.35vw, 20px);
      line-height:1.55;
    }

    .beer-detail-list{
      margin-top:clamp(16px, 2vw, 26px);
      display:grid;
      gap:10px;
      list-style:none;
      color:rgba(255,230,194,.86);
      font-size:clamp(14px, 1.1vw, 18px);
      line-height:1.35;
    }

    .beer-detail-list li{
      position:relative;
      padding-left:28px;
    }

    .beer-detail-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.52em;
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 14px rgba(217,154,40,.68);
    }

    .download-panel{
      display:grid;
      gap:clamp(12px, 1.4vw, 18px);
    }

    .download-card{
      min-height:clamp(76px, 6vw, 96px);
      display:flex;
      align-items:center;
      gap:clamp(14px, 1.5vw, 22px);
      padding:clamp(14px, 1.7vw, 22px);
      border:1px solid rgba(255,199,101,.24);
      border-radius:clamp(16px, 1.5vw, 22px);
      color:#fff4df;
      background:
        linear-gradient(135deg, rgba(217,154,40,.14), rgba(255,255,255,.035)),
        rgba(0,0,0,.28);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 16px 42px rgba(0,0,0,.32);
      transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
    }

    .download-card:hover,
    .download-card:focus-visible{
      transform:translateY(-4px) scale(1.015);
      border-color:rgba(255,199,101,.62);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,199,101,.24), transparent 58%),
        linear-gradient(135deg, rgba(217,154,40,.20), rgba(255,255,255,.06)),
        rgba(0,0,0,.22);
      box-shadow:
        0 0 28px rgba(217,154,40,.26),
        0 22px 54px rgba(0,0,0,.42);
      outline:0;
    }

    .download-card-primary{
      border-color:rgba(255,199,101,.46);
      background:
        radial-gradient(circle at 28% 0%, rgba(255,199,101,.28), transparent 58%),
        linear-gradient(135deg, rgba(217,154,40,.28), rgba(0,0,0,.20));
    }

    .download-icon{
      width:clamp(46px, 4.2vw, 62px);
      height:clamp(46px, 4.2vw, 62px);
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:16px;
      color:var(--gold-soft);
      background:rgba(0,0,0,.32);
      box-shadow:
        inset 0 0 0 1px rgba(255,199,101,.20),
        0 0 18px rgba(217,154,40,.22);
    }

    .download-icon svg{
      width:68%;
      height:68%;
    }

    .download-card strong,
    .download-card small{
      display:block;
    }

    .download-card strong{
      font-size:clamp(15px, 1.24vw, 20px);
      line-height:1.15;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    .download-card small{
      margin-top:5px;
      color:rgba(255,238,213,.66);
      font-size:clamp(12px, .95vw, 14px);
      line-height:1.25;
    }

    /* Barra inferior */
    .bottom-nav{
      margin:clamp(20px, 2.7vw, 42px) auto 0;
      min-height:clamp(82px, 8vw, 116px);
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      align-items:center;
      border-top:1px solid rgba(217,154,40,.16);
      border-bottom:1px solid rgba(217,154,40,.06);
      background:
        linear-gradient(90deg, transparent, rgba(217,154,40,.045), transparent),
        rgba(0,0,0,.08);
      border-radius:18px;
      overflow:hidden;
    }

    .nav-item{
      min-height:clamp(70px, 7vw, 92px);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:clamp(12px, 1.4vw, 22px);
      position:relative;
      color:#f1e9df;
      transition:color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
      -webkit-tap-highlight-color:transparent;
    }

    .nav-item + .nav-item::before{
      content:"";
      position:absolute;
      left:0;
      top:14%;
      bottom:14%;
      width:1px;
      background:linear-gradient(transparent, rgba(217,154,40,.44), transparent);
    }

    .nav-item:hover,
    .nav-item:focus-visible{
      color:var(--gold-soft);
      background:rgba(217,154,40,.045);
      transform:translateY(-2px);
      outline:0;
    }

    .nav-item svg{
      width:clamp(34px, 3.8vw, 56px);
      height:clamp(34px, 3.8vw, 56px);
      color:var(--gold);
      flex:0 0 auto;
      filter:drop-shadow(0 0 10px rgba(217,154,40,.2));
    }

    .nav-item span{
      font-size:clamp(10px, 1.12vw, 18px);
      line-height:1.16;
      letter-spacing:clamp(1px, .16vw, 2.2px);
      font-weight:700;
      text-transform:uppercase;
    }

    /* Drawer y panel */
    .overlay{
      position:fixed;
      inset:0;
      z-index:80;
      background:rgba(0,0,0,.62);
      opacity:0;
      pointer-events:none;
      transition:opacity .25s var(--ease);
      backdrop-filter:blur(3px);
    }

    .drawer{
      position:fixed;
      top:0;
      bottom:0;
      z-index:90;
      width:min(420px, 88vw);
      padding:calc(22px + env(safe-area-inset-top)) 22px 22px;
      background:
        linear-gradient(160deg, rgba(16,11,6,.98), rgba(0,0,0,.96)),
        #050505;
      border:1px solid rgba(217,154,40,.18);
      box-shadow:0 30px 90px rgba(0,0,0,.8);
      transition:transform .32s var(--ease);
      left:0;
      transform:translateX(-105%);
      border-radius:0 26px 26px 0;
    }

    body.menu-open .overlay{
      opacity:1;
      pointer-events:auto;
    }

    body.menu-open .drawer{
      transform:translateX(0);
    }

    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      color:var(--gold);
      margin-bottom:24px;
    }

    .panel-head strong{
      font-family:Georgia, "Times New Roman", serif;
      font-size:26px;
      letter-spacing:2px;
    }

    .close-btn{
      width:42px;
      height:42px;
      border:1px solid rgba(217,154,40,.22);
      border-radius:14px;
      background:rgba(217,154,40,.06);
      color:var(--gold-soft);
      cursor:pointer;
    }

    .drawer a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:17px 12px;
      border-bottom:1px solid rgba(255,255,255,.07);
      color:#fff4e5;
      font-size:16px;
      letter-spacing:1px;
      text-transform:uppercase;
      transition:color .2s var(--ease), padding-left .2s var(--ease);
    }

    .drawer a:hover{
      color:var(--gold-soft);
      padding-left:18px;
    }


    @keyframes logoGlow{
      from{filter:drop-shadow(0 0 12px rgba(217,154,40,.25)) drop-shadow(0 0 22px rgba(217,154,40,.12))}
      to{filter:drop-shadow(0 0 18px rgba(217,154,40,.48)) drop-shadow(0 0 42px rgba(217,154,40,.18))}
    }

    @keyframes bubble{
      0%,100%{transform:translateY(0);opacity:.3}
      45%{transform:translateY(-16px);opacity:.9}
    }

    @keyframes bulbPulse{
      from{opacity:.72;filter:saturate(.9)}
      to{opacity:1;filter:saturate(1.3)}
    }

    @keyframes flicker{
      0%, 96%, 100%{opacity:1}
      97%{opacity:.65}
      98%{opacity:1}
      99%{opacity:.78}
    }

    /* Laptops medianas */
    @media (max-width:1320px){
      .service-card{
        grid-template-columns:minmax(330px, 42%) 1fr;
      }

      .copy{
        padding-left:clamp(26px, 4.5vw, 64px);
      }

      .beer .visual .chalk{
        left:47%;
      }

      .neon-sign{
        right:92px;
      }
    }

    /* Tablet horizontal / desktop chico */
    @media (max-width:1080px){
      :root{
        --card-h:clamp(245px, 31vw, 310px);
      }

      .app{
        width:min(960px, calc(100% - 32px));
      }

      .service-card{
        grid-template-columns:1fr;
      }

      .copy{
        max-width:58%;
        padding-left:clamp(24px, 5vw, 54px);
        padding-right:90px;
      }

      .visual{
        opacity:.98;
      }

      .visual::before{
        width:75%;
      }

      .beer-scene{
        right:62px;
        width:52%;
      }

      .beer .visual .chalk{
        left:56%;
        opacity:.62;
      }

      .medical-kit{
        right:62px;
        width:48%;
      }

      .neon-sign{
        right:70px;
        width:43%;
      }

      .uniform-scene{
        right:60px;
        width:58%;
      }

      .beer-detail-shell{
        grid-template-columns:1fr;
      }

      .download-panel{
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }

      .download-card{
        align-items:flex-start;
        flex-direction:column;
      }

      .bottom-nav{
        grid-template-columns:repeat(2, 1fr);
      }

      .nav-item:nth-child(3)::before{
        display:none;
      }

      .nav-item:nth-child(1),
      .nav-item:nth-child(2){
        border-bottom:1px solid rgba(217,154,40,.12);
      }
    }

    /* Tablet vertical y móvil grande */
    @media (max-width:760px){
      :root{
        --page-pad:14px;
        --card-h:auto;
      }

      body{
        background:
          radial-gradient(circle at 50% -8%, rgba(217,154,40,.23), transparent 36%),
          radial-gradient(circle at 100% 48%, rgba(216,44,255,.12), transparent 35%),
          #000;
      }

      .app{
        width:calc(100% - 24px);
        padding-top:8px;
      }

      .beer-detail-section{
        margin-top:18px;
        scroll-margin-top:18px;
      }

      .beer-detail-shell{
        gap:18px;
        padding:20px;
        border-radius:22px;
      }

      .beer-detail-copy h2{
        line-height:.94;
      }

      .beer-detail-list{
        gap:8px;
      }

      .download-panel{
        grid-template-columns:1fr;
      }

      .download-card{
        min-height:72px;
        flex-direction:row;
        align-items:center;
      }

      body::after{
        display:none;
      }

      .brand-mark,
      .martini,
      .bulbs i::after,
      .beer-bubbles i{
        animation:none !important;
      }

      .service-card{
        content-visibility:visible;
        contain:layout paint;
      }


      .topbar{
        min-height:128px;
        grid-template-columns:48px 1fr 48px;
        align-items:start;
      }

      .icon-button{
        margin-top:18px;
        border-radius:14px;
      }

      .social-links{
        margin-top:18px;
        gap:5px;
      }

      .social-icon{
        width:34px;
        height:34px;
        border-radius:12px;
      }

      .brand-mark{
        width:92px;
        height:92px;
        margin-bottom:-9px;
      }

      .brand h1{
        font-size:34px;
        letter-spacing:4px;
      }

      .brand p{
        font-size:10px;
        letter-spacing:2px;
        line-height:1.35;
      }

      .cards{
        gap:14px;
      }

      .service-card{
        min-height:clamp(250px, 72vw, 340px);
        border-radius:22px;
        align-items:start;
        padding-top:24px;
        background:
          linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.86) 40%, rgba(0,0,0,.42) 100%),
          radial-gradient(circle at 78% 70%, color-mix(in srgb, var(--accent), transparent 68%), transparent 38%),
          #050505;
      }

      .service-card.beer,
      .service-card.medical,
      .service-card.neon,
      .service-card.uniforms{
        width:100%;
        aspect-ratio:3 / 1;
        min-height:0;
        height:auto;
        padding:0;
        background:#000;
      }

      .beer-card-image,
      .medical-card-image,
      .neon-card-image,
      .uniform-card-image{
        width:100%;
        height:100%;
        object-fit:contain;
        object-position:center center;
        transform:none;
        filter:none;
      }

      .beer:hover .beer-card-image,
      .beer:focus-visible .beer-card-image,
      .medical:hover .medical-card-image,
      .medical:focus-visible .medical-card-image,
      .neon:hover .neon-card-image,
      .neon:focus-visible .neon-card-image,
      .uniforms:hover .uniform-card-image,
      .uniforms:focus-visible .uniform-card-image{
        transform:none;
        filter:none;
      }

      .next-button{
        right:10px;
        width:clamp(36px, 10vw, 46px);
      }

      .next-button .next-label{
        display:none;
      }

      .copy{
        max-width:100%;
        width:100%;
        padding:0 72px 0 22px;
      }

      .copy .eyebrow{
        font-size:clamp(22px, 7vw, 34px);
      }

      .copy .title{
        font-size:clamp(38px, 11vw, 54px);
      }

      .copy .title2{
        font-size:clamp(30px, 9vw, 46px);
      }

      .medical .copy .title2{
        font-size:clamp(22px, 6.2vw, 30px);
      }

      .neon .copy .title{
        font-size:clamp(31px, 8.5vw, 42px);
        -webkit-text-stroke:1px #ffcaff;
      }

      .uniforms .copy .title{
        font-size:clamp(38px, 10vw, 50px);
      }

      .uniforms .copy .title2{
        font-size:clamp(36px, 9.8vw, 48px);
      }

      .ornament{
        margin-top:18px;
        width:190px;
      }

      .ornament .icon{
        width:46px;
        height:46px;
      }

      .medical .ornament .icon{
        width:118px;
        height:42px;
      }

      .neon .ornament .icon{
        width:58px;
        height:58px;
      }

      .arrow{
        top:34px;
        right:18px;
        transform:none;
        width:48px;
        height:48px;
      }

      .service-card:hover .arrow{
        transform:translateX(3px) scale(1.03);
      }

      .bar-backdrop{
        background:
          linear-gradient(180deg, transparent 0 34%, rgba(110,68,25,.18) 55%, rgba(0,0,0,.35) 100%),
          radial-gradient(circle at 77% 73%, rgba(255,180,60,.18), transparent 18%);
      }

      .beer-scene{
        right:6px;
        bottom:16px;
        width:86%;
        height:46%;
        opacity:.98;
      }

      .beer .visual .chalk{
        left:auto;
        right:22px;
        top:44%;
        width:120px;
        height:92px;
        font-size:14px;
        opacity:.38;
      }

      .medical-kit{
        right:6px;
        bottom:12px;
        width:88%;
        height:48%;
      }

      .neon .copy{
        padding-right:62px;
      }

      .brick-wall{
        inset:34% 0 0 0;
      }

      .bulbs{
        left:33%;
        top:32%;
        width:58%;
        height:28%;
      }

      .neon-sign{
        right:20px;
        top:auto;
        bottom:42px;
        width:58%;
      }

      .neon-sign span{
        font-size:clamp(18px, 5.1vw, 25px);
        margin:4px 0;
      }

      .martini{
        right:18px;
        top:auto;
        bottom:45px;
        width:58px;
        height:70px;
        opacity:.86;
      }

      .uniform-scene{
        right:-12px;
        bottom:0;
        width:94%;
        height:54%;
      }

      .person{
        width:26%;
      }

      .person.woman{left:31%}
      .person.man{right:20%}

      .menu-board{
        display:none;
      }

      .bottom-nav{
        margin-top:18px;
        border-radius:20px;
        grid-template-columns:repeat(2, 1fr);
      }

      .nav-item{
        min-height:76px;
        justify-content:flex-start;
        padding-left:18px;
      }

      .nav-item svg{
        width:36px;
        height:36px;
      }

      .nav-item span{
        font-size:10px;
        letter-spacing:1px;
      }
    }

    /* Móvil compacto */
    @media (max-width:430px){
      .app{
        width:calc(100% - 18px);
      }

      .topbar{
        min-height:122px;
      }

      .brand h1{
        font-size:30px;
        letter-spacing:3px;
      }

      .social-links{
        gap:3px;
      }

      .social-icon{
        width:30px;
        height:30px;
        border-radius:10px;
      }

      .brand p{
        max-width:230px;
        margin-inline:auto;
      }

      .service-card{
        min-height:262px;
      }

      .copy{
        padding-left:18px;
        padding-right:60px;
      }

      .copy .title{
        letter-spacing:-.02em;
      }

      .beer-scene{
        width:94%;
      }

      .medical-kit{
        width:96%;
        right:-10px;
      }

      .neon-sign{
        width:72%;
        left:18px;
        right:auto;
      }

      .martini{
        right:16px;
      }

      .uniform-scene{
        width:105%;
        right:-34px;
      }

      .bottom-nav{
        grid-template-columns:1fr;
      }

      .nav-item + .nav-item::before{
        display:none;
      }

      .nav-item{
        border-bottom:1px solid rgba(217,154,40,.10);
      }

      .nav-item:last-child{
        border-bottom:0;
      }
    }

    @media (prefers-reduced-motion:reduce){
      *, *::before, *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
      }
    }