/* La Catrina – oferta świąteczna (SEZONOWA, do usunięcia po świętach)
   Paleta z materiałów Moniki: kość słoniowa, malina, złoto-pomarańcz na czerni.
   Baza układu wspólna z /lacatering/, żeby podstrona nie wyglądała na obcą. */
:root{
  --tlo:#0a0808;
  --kosc:#f3e9dd;
  --malina:#e5266d;
  --malina-ciemna:#b81b52;
  --zloto:#f08a2c;
  --tekst:#ded4c9;
  --przygas:#a1958a;
  --rama:rgba(243,233,221,.28);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Montserrat','Inter',system-ui,sans-serif;background:var(--tlo);color:var(--tekst);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* HEADER */
.ph{background:rgba(10,8,8,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.ph-logo{display:flex;align-items:center;gap:10px}
.ph-logo img{height:36px;width:auto}
.ph-logo-txt{font-family:'Cinzel Decorative',serif;font-size:.85rem;letter-spacing:.05em;color:var(--kosc)}
.ph-back{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--przygas)}
.ph-back:hover{color:var(--malina)}

/* GWIAZDKA JAKO OZDOBNIK */
.gwiazda{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto}
.gwiazda::before,.gwiazda::after{content:'';height:1px;width:110px;max-width:22vw;background:linear-gradient(90deg,transparent,var(--zloto))}
.gwiazda::after{background:linear-gradient(90deg,var(--zloto),transparent)}
.gwiazda span{color:var(--zloto);font-size:1.25rem;line-height:1}

.romb{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto}
.romb::before,.romb::after{content:'';height:1px;width:92px;max-width:20vw;background:var(--malina);opacity:.75}
.romb span{color:var(--malina);font-size:.75rem;line-height:1}

/* RAMA — cienka obwódka ze ściętymi narożnikami, jak na plakatach */
.karta{position:relative;border:1px solid var(--rama);padding:52px 40px 46px;margin:0 auto;text-align:center}
.karta::before,.karta::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--malina)}
.karta::before{top:-5px;left:-5px}
.karta::after{bottom:-5px;right:-5px}
.karta-rog{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--malina)}
.karta-rog.pr{top:-5px;right:-5px}
.karta-rog.ll{bottom:-5px;left:-5px}

/* HERO */
.hero{text-align:center;padding:44px 18px 12px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:760px;height:280px;background:radial-gradient(ellipse at 50% 0%,rgba(229,38,109,.13),transparent 66%);pointer-events:none}
.hero-logo{width:min(210px,52vw);height:auto;margin:0 auto 22px;position:relative}

.tytul{font-family:'Cormorant Garamond',serif;font-weight:600;text-transform:uppercase;line-height:1.06;position:relative}
.tytul .g{display:block;font-size:clamp(2rem,9vw,3.6rem);letter-spacing:.22em;color:var(--kosc);text-indent:.22em}
.tytul .d{display:block;font-size:clamp(1.45rem,6.4vw,2.5rem);letter-spacing:.26em;color:var(--malina);text-indent:.26em;margin-top:6px}

/* MAIN */
.pm{max-width:960px;margin:0 auto;padding:0 18px 84px}
.sek{padding:42px 0 56px}
.sek + .sek{border-top:1px solid rgba(255,255,255,.06)}

/* DWIE OPCJE KOLACJI */
.opcje{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;margin-top:34px}
.kreska-pion{position:relative;background:var(--rama)}
.kreska-pion span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--malina);font-size:.7rem;background:var(--tlo);padding:6px 0;line-height:1}
.opcja{padding:0 34px;text-align:center}
.opcja-nazwa{display:flex;align-items:center;justify-content:center;gap:11px;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kosc)}
.opcja-nazwa::before,.opcja-nazwa::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--zloto)}
.opcja-cena{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--tekst);margin-top:8px}
.dania{list-style:none;margin-top:26px}
.dania li + li{margin-top:22px;padding-top:22px;border-top:1px solid rgba(229,38,109,.3)}
.dania .etap{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--malina);margin-bottom:9px}
.dania .danie{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--kosc);line-height:1.35}
.dania .dod{font-size:.88rem;line-height:1.6;color:var(--tekst);margin-top:5px}

/* CENNIK ŚWIĄTECZNY */
.grupa{margin-top:38px}
.grupa-tytul{display:flex;align-items:center;justify-content:center;gap:13px;font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--malina);margin-bottom:16px}
.grupa-tytul::before,.grupa-tytul::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--zloto)}
.naglowki{display:flex;justify-content:space-between;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--przygas);padding-bottom:8px;border-bottom:1px solid var(--zloto)}
.cennik{list-style:none;margin-top:14px}
.cennik li{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.cennik .nazwa{font-family:'Cormorant Garamond',serif;font-size:1.18rem;color:var(--kosc);flex:none;max-width:72%;text-align:left}
/* Kropkowana prowadnica między nazwą a ceną — tak jak na plakacie. */
.cennik .kropki{flex:1;border-bottom:1px dotted rgba(229,38,109,.55);transform:translateY(-4px)}
.cennik .cena{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--tekst);white-space:nowrap;flex:none;text-align:right}

/* HASŁA */
.haslo{text-align:center;font-family:'Cormorant Garamond',serif;font-weight:600;text-transform:uppercase;line-height:1.3;margin-top:40px}
.haslo .a{display:block;font-size:clamp(1.15rem,4.4vw,1.7rem);letter-spacing:.2em;color:var(--kosc);text-indent:.2em}
.haslo .b{display:block;font-size:clamp(1.15rem,4.4vw,1.7rem);letter-spacing:.2em;color:var(--malina);text-indent:.2em;margin-top:4px}
.podhaslo{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--przygas);margin-top:24px;line-height:2}
.podhaslo b{color:var(--malina);font-weight:600}

/* KONTAKT */
.kontakty{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.kbtn{display:flex;align-items:center;gap:11px;padding:15px 26px;border:1px solid rgba(229,38,109,.45);font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--kosc);transition:all .22s}
.kbtn:hover{background:rgba(229,38,109,.1);border-color:var(--malina)}
.kbtn svg{width:21px;height:21px;stroke:var(--malina);fill:none;stroke-width:1.6}

/* STOPKA */
.pf{border-top:1px solid rgba(255,255,255,.07);padding:28px 20px;text-align:center}
.pf img{width:120px;height:auto;margin:0 auto 14px;opacity:.85}
.pf .praw{font-size:.7rem;color:#6d635b}
.pf .praw a{color:var(--przygas)}
.pf .praw a:hover{color:var(--malina)}

/* WEJŚCIE PRZY PRZEWIJANIU — jak na stronie głównej; ukrywanie pod `.ma-js`,
   więc bez JS treść po prostu jest widoczna. */
.ma-js [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.ma-js [data-reveal].revealed{opacity:1;transform:translateY(0)}
.ma-js [data-reveal="delay-1"]{transition-delay:.1s}
.ma-js [data-reveal="delay-2"]{transition-delay:.2s}
.ma-js [data-reveal="delay-3"]{transition-delay:.3s}

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

@media(max-width:760px){
  .karta{padding:36px 20px 32px}
  .hero{padding:34px 14px 8px}
  .pm{padding:0 14px 60px}
  .sek{padding:34px 0 44px}

  /* Dwie opcje jedna pod drugą — przy 390 px kolumny robią się nieczytelne. */
  .opcje{grid-template-columns:1fr;gap:0}
  .kreska-pion{height:1px;width:100%;margin:34px 0}
  .kreska-pion span{padding:0 8px}
  .opcja{padding:0}
  .opcja-nazwa{font-size:1.3rem}
  .opcja-cena{font-size:1.25rem}
  .dania .danie{font-size:1.22rem}

  .grupa-tytul{font-size:1.35rem}
  .cennik .nazwa{font-size:1.08rem;max-width:66%}
  .cennik .cena{font-size:1.05rem}
  .kbtn{width:100%;justify-content:center}
}

@media(max-width:420px){
  /* Przy bardzo długich nazwach kropki nie mają gdzie się zmieścić. */
  .cennik li{flex-wrap:wrap}
  .cennik .nazwa{max-width:100%}
  .cennik .kropki{min-width:20px}
}