/* Exemplos por ramo: cada um com layout, cor e função próprios. */
.ms{container-type:inline-size;transition:opacity .35s,transform .35s}
.ms.swap{opacity:0;transform:translateY(8px)}

.rs{--fg:#222;--bg:#fff;--acc:#0a2540;--on:#fff;--line:rgba(0,0,0,.18);
  font-family:Inter,system-ui,sans-serif;font-size:clamp(12.5px,2.1cqw,15.5px);line-height:1.35;color:var(--fg);background:var(--bg)}
.rs *{box-sizing:border-box}
.rs h3{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.02}
.rs p{margin:0}
.rs small{display:block;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:.5em;font-weight:700}
.rg{display:flex;flex-wrap:wrap;gap:.5em}
.rc{font:inherit;font-weight:600;padding:.5em .95em;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.rc:hover:not(:disabled){transform:translateY(-1px)}
.rc[aria-pressed="true"]{background:var(--acc);color:var(--on);border-color:var(--acc)}
.rc:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.rb{font:inherit;font-weight:800;border:0;border-radius:999px;padding:.85em 1.6em;background:var(--acc);color:var(--on);cursor:pointer;transition:transform .15s}
.rb:hover{transform:translateY(-2px)}
.rs-res{margin-top:.9em;min-height:1.4em;font-weight:700;color:var(--acc)}
.rs button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.cols2{display:grid;gap:1em}
@container (min-width:560px){.cols2{grid-template-columns:1fr 1fr}.cols2 .full{grid-column:1/-1}}

/* ---- Barbearia ---- */
.sk-barb{--bg:#15110e;--fg:#f4ead7;--acc:#c9a227;--on:#15110e;--line:rgba(201,162,39,.4)}
.sk-barb .pole{height:.7em;background:repeating-linear-gradient(135deg,#b3261e 0 .9em,#f4ead7 .9em 1.8em,#1e3a8a 1.8em 2.7em)}
.sk-barb .top{display:flex;justify-content:space-between;align-items:center;padding:1.1em 1.6em;border-bottom:1px solid var(--line)}
.sk-barb .top b{font-weight:900;letter-spacing:.2em;font-size:1.1em}
.sk-barb .top b i{font-style:normal;color:var(--acc);margin-left:.5em;font-weight:300}
.sk-barb .top span{font-size:.8em;opacity:.7}
.sk-barb .r-hero{padding:1.8em 1.6em 1.2em}
.sk-barb .r-hero h3{font-size:2.6em;text-transform:uppercase;letter-spacing:.01em}
.sk-barb .r-hero p{margin-top:.6em;opacity:.8}
.sk-barb .book{margin:0 1.6em 1.6em;padding:1.2em;border:1px solid var(--line);border-radius:.8em;background:#1e1814}

/* ---- Estética ---- */
.sk-est{--bg:#fbf3ef;--fg:#3b2230;--acc:#b5446e;--on:#fff;--line:rgba(181,68,110,.32)}
.sk-est .top{padding:1.2em 1.6em;display:flex;justify-content:space-between;align-items:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.6em;color:var(--acc)}
.sk-est .top span{font-family:Inter,sans-serif;font-style:normal;font-size:.5em;color:var(--fg);opacity:.6}
.sk-est .r-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.2em;padding:0 1.6em;align-items:center}
.sk-est h3{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:2.8em;line-height:1;letter-spacing:-.01em}
.sk-est .r-grid p{margin-top:.8em;opacity:.8;max-width:30ch}
.sk-est .arch{aspect-ratio:3/4;border-radius:999px 999px 1.2em 1.2em;background:linear-gradient(160deg,#f6d2dd,#b5446e);position:relative;overflow:hidden}
.sk-est .arch::after{content:"";position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.38);left:22%;top:26%}
.sk-est .r-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:1.4em 1.6em}
.sk-est .r-steps div{border-top:2px solid var(--acc);padding-top:.6em;font-size:.85em}
.sk-est .r-steps b{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.7em;color:var(--acc);font-weight:400;line-height:1}
.sk-est .book{margin:0 1.6em 1em}
.sk-est .nt{padding:0 1.6em 1.4em;font-size:.78em;opacity:.65}
@container (max-width:480px){.sk-est .r-grid{grid-template-columns:1fr}.sk-est .arch{display:none}}

/* ---- Restaurante ---- */
.sk-rest{--bg:#fff6e0;--fg:#3b1d12;--acc:#c0392b;--on:#fff;--line:rgba(59,29,18,.25)}
.sk-rest .check{height:1.1em;background:repeating-conic-gradient(#c0392b 0 25%,#fff6e0 0 50%) 0 0/1.1em 1.1em}
.sk-rest .top{display:flex;justify-content:space-between;align-items:center;padding:1em 1.6em}
.sk-rest .top b{font-weight:900;font-style:italic;font-size:1.25em;color:var(--acc)}
.sk-rest .top span{font-size:.8em;opacity:.7}
.sk-rest .r-hero{padding:.2em 1.6em 1em}
.sk-rest .r-hero h3{font-size:2.5em;color:var(--fg)}
.sk-rest .r-hero h3 em{color:var(--acc);font-style:normal}
.sk-rest .tabs{padding:0 1.6em .6em}
.sk-rest .menu{list-style:none;margin:0;padding:0 1.6em;display:grid}
.sk-rest .menu li{display:flex;align-items:center;gap:.8em;padding:.65em 0;border-bottom:1.5px dashed var(--line)}
.sk-rest .menu .n{flex:1;font-weight:700}
.sk-rest .menu .n small{text-transform:none;letter-spacing:0;font-weight:400;margin:.15em 0 0;font-size:.8em}
.sk-rest .menu em{font-style:normal;color:var(--acc);font-weight:800}
.sk-rest .add{width:2em;height:2em;border-radius:50%;border:0;background:var(--acc);color:#fff;font-weight:900;font-size:1em;cursor:pointer;flex:none}
.sk-rest .cart{margin:1em 1.6em 0;padding:1em;background:#fff;border:2px solid var(--fg);border-radius:.8em;display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.sk-rest .cart b{font-weight:800}
.sk-rest .rs-res{padding:0 1.6em 1.4em}

/* ---- Loja ---- */
.sk-loja{--bg:#fff;--fg:#12333a;--acc:#0b7285;--on:#fff;--line:rgba(18,51,58,.22)}
.sk-loja .top{display:flex;justify-content:space-between;align-items:center;padding:1.1em 1.6em;font-weight:900;letter-spacing:.14em}
.sk-loja .top span{background:#eef6f7;border-radius:99px;padding:.45em 1em;font-weight:500;letter-spacing:0;font-size:.8em;opacity:.8}
.sk-loja .r-hero{margin:0 1.6em;background:#e3f3f5;border-radius:1em;padding:1.3em 1.4em}
.sk-loja .r-hero h3{font-size:2.1em}
.sk-loja .r-hero p{margin-top:.4em;opacity:.8}
.sk-loja .fl{padding:1em 1.6em 0}
.sk-loja .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;padding:1em 1.6em}
.sk-loja .pcard{border:2px solid transparent;border-radius:.8em;background:#f4f9fa;padding:.55em;text-align:left;cursor:pointer;font:inherit;color:inherit}
.sk-loja .pcard[aria-pressed="true"]{border-color:var(--acc);background:#fff}
.sk-loja .pic{aspect-ratio:1;border-radius:.6em;margin-bottom:.6em;position:relative;overflow:hidden}
.sk-loja .pic::after{content:"";position:absolute;inset:26%;border-radius:50%;background:rgba(255,255,255,.45)}
.sk-loja .p1{background:linear-gradient(135deg,#f6d365,#fda085)}
.sk-loja .p2{background:linear-gradient(135deg,#a1c4fd,#c2e9fb)}
.sk-loja .p3{background:linear-gradient(135deg,#84fab0,#8fd3f4)}
.sk-loja .p4{background:linear-gradient(135deg,#fbc2eb,#a6c1ee)}
.sk-loja .tg{position:absolute;left:.4em;top:.4em;z-index:1;background:var(--fg);color:#fff;font-size:.65em;font-weight:800;padding:.25em .6em;border-radius:99px}
.sk-loja .pn{font-weight:700;font-size:.9em}
.sk-loja .pp{font-weight:800;color:var(--acc)}
.sk-loja .pp s{color:var(--fg);opacity:.5;font-weight:500;margin-left:.4em;font-size:.85em}
.sk-loja .pay{margin:0 1.6em 1.4em;padding:1em;border:2px solid var(--fg);border-radius:.8em;display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.sk-loja .rs-res{padding:0 1.6em 1.2em;margin-top:0}
@container (max-width:560px){.sk-loja .grid4{grid-template-columns:1fr 1fr}}

/* ---- Oficina ---- */
.sk-ofi{--bg:#14161a;--fg:#f5f2e8;--acc:#ffd100;--on:#14161a;--line:rgba(245,242,232,.28)}
.sk-ofi .haz{height:.9em;background:repeating-linear-gradient(45deg,#ffd100 0 1em,#14161a 1em 2em)}
.sk-ofi .top{display:flex;justify-content:space-between;align-items:center;padding:1em 1.6em;text-transform:uppercase;letter-spacing:.14em;font-weight:900}
.sk-ofi .top b span{color:var(--acc)}
.sk-ofi .top i{font-style:normal;font-size:.75em;opacity:.7;letter-spacing:.05em;font-weight:500}
.sk-ofi .r-hero{padding:.6em 1.6em 1.2em}
.sk-ofi .r-hero h3{font-size:2.6em;text-transform:uppercase}
.sk-ofi .r-hero h3 em{color:var(--acc);font-style:normal}
.sk-ofi .r-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:0 1.6em}
.sk-ofi .r-steps div{background:#1f2227;border-left:.3em solid var(--acc);padding:.8em;font-size:.85em}
.sk-ofi .r-steps b{display:block;font-size:2em;color:var(--acc);line-height:1}
.sk-ofi .form{margin:1.2em 1.6em 1.6em;display:grid;gap:1em}
.sk-ofi .photo{border:2px dashed var(--line);border-radius:.6em;padding:.9em;text-align:center;font:inherit;color:var(--fg);background:transparent;cursor:pointer;width:100%}
.sk-ofi .photo.on{border-color:var(--acc);color:var(--acc);border-style:solid}
@container (max-width:480px){.sk-ofi .r-steps{grid-template-columns:1fr}}

/* ---- Academia ---- */
.sk-acad{--bg:#0b0f14;--fg:#fff;--acc:#c6ff3d;--on:#0b0f14;--line:rgba(255,255,255,.24)}
.sk-acad .top{display:flex;justify-content:space-between;align-items:center;padding:1em 1.6em;font-weight:900;letter-spacing:.18em}
.sk-acad .top span{font-size:.7em;letter-spacing:.1em;opacity:.7;font-weight:500}
.sk-acad .r-hero{padding:.8em 1.6em 3.4em;background:linear-gradient(120deg,#16283a,#0b0f14);clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
.sk-acad .r-hero h3{font-size:2.7em;text-transform:uppercase;font-style:italic}
.sk-acad .r-hero h3 em{color:var(--acc)}
.sk-acad .r-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:0 1.6em;margin-top:-1em}
.sk-acad .plan{border:2px solid var(--line);background:#121820;color:var(--fg);border-radius:.8em;padding:1em;text-align:left;font:inherit;cursor:pointer;position:relative}
.sk-acad .plan[aria-pressed="true"]{border-color:var(--acc);background:#1a2430}
.sk-acad .plan b{display:block;font-size:1.9em;color:var(--acc);line-height:1.1}
.sk-acad .plan small{margin:0 0 .3em}
.sk-acad .plan .hot{position:absolute;top:-.8em;right:.8em;background:var(--acc);color:var(--on);font-size:.65em;font-weight:900;padding:.3em .7em;border-radius:99px;text-transform:uppercase}
.sk-acad .sum{padding:1em 1.6em .2em;opacity:.85}
.sk-acad .go{padding:.6em 1.6em 1.6em}
@container (max-width:480px){.sk-acad .r-plans{grid-template-columns:1fr}}

/* ---- Consultório ---- */
.sk-cons{--bg:#f3f8ff;--fg:#0f2a4a;--acc:#1971c2;--on:#fff;--line:rgba(25,113,194,.3)}
.sk-cons .top{padding:1.2em 1.6em;font-family:'Instrument Serif',Georgia,serif;font-size:1.6em;display:flex;justify-content:space-between;align-items:center}
.sk-cons .top span{font-family:Inter,sans-serif;font-size:.5em;opacity:.65}
.sk-cons .r-hero{padding:0 1.6em}
.sk-cons h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:2.7em;letter-spacing:-.01em;line-height:1}
.sk-cons .trust{display:flex;flex-wrap:wrap;gap:.6em;padding:.9em 1.6em 0}
.sk-cons .trust span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.35em .9em;font-size:.8em;font-weight:600}
.sk-cons .week{display:grid;grid-template-columns:repeat(5,1fr);gap:.6em;padding:1.2em 1.6em .8em}
.sk-cons .day{background:#fff;border:1px solid var(--line);border-radius:.7em;padding:.6em;text-align:center}
.sk-cons .day b{display:block;margin-bottom:.3em;font-size:.85em}
.sk-cons .slot{display:block;width:100%;font:inherit;font-size:.85em;padding:.35em 0;margin-top:.3em;border-radius:.5em;border:1px solid var(--line);background:#f3f8ff;cursor:pointer;color:var(--fg)}
.sk-cons .slot[aria-pressed="true"]{background:var(--acc);color:#fff;border-color:var(--acc)}
.sk-cons .go{padding:0 1.6em 1.6em}
.sk-cons .nt{padding:0 1.6em 1.2em;font-size:.78em;opacity:.65}
@container (max-width:480px){.sk-cons .week{grid-template-columns:repeat(3,1fr)}}

/* ---- Pet shop ---- */
.sk-pet{--bg:#fff3d6;--fg:#3b2a12;--acc:#f08c00;--on:#fff;--line:rgba(59,42,18,.25)}
.sk-pet .top{display:flex;justify-content:space-between;align-items:center;padding:1em 1.6em}
.sk-pet .top b{display:flex;align-items:center;gap:.5em;font-weight:900;font-size:1.2em}
.sk-pet .top svg{width:1.8em;height:1.8em;fill:var(--acc)}
.sk-pet .top span{font-size:.8em;opacity:.7}
.sk-pet .r-hero{margin:0 1.6em;background:var(--acc);color:#fff;border-radius:1.6em;padding:1.4em 1.6em;position:relative;overflow:hidden}
.sk-pet .r-hero::after{content:"";position:absolute;right:-2em;bottom:-2.5em;width:9em;height:9em;border-radius:50%;background:rgba(255,255,255,.22)}
.sk-pet .r-hero h3{font-size:2.5em}
.sk-pet .r-hero p{margin-top:.4em;opacity:.95;max-width:26ch}
.sk-pet .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:1.2em 1.6em 0}
.sk-pet .svc .rc{border-radius:1.2em;padding:1em .5em;display:flex;flex-direction:column;align-items:center;gap:.5em;font-weight:800;background:#fff}
.sk-pet .svc .rc[aria-pressed="true"]{background:var(--acc);color:#fff}
.sk-pet .svc svg{width:2em;height:2em;fill:currentColor}
.sk-pet .sz{padding:1em 1.6em 0}
.sk-pet .remind{margin:1em 1.6em 0;background:#2fb27a;color:#fff;border-radius:1em;padding:.9em 1.2em;display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.sk-pet .go{padding:1em 1.6em 1.6em}

/* ---- Prestador ---- */
.sk-prest{--bg:#eef1f4;--fg:#1f2933;--acc:#e8590c;--on:#fff;--line:rgba(31,41,51,.25)}
.sk-prest .top{background:#1f2933;color:#fff;padding:.9em 1.6em;display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.sk-prest .top b{font-weight:900;letter-spacing:.04em}
.sk-prest .top span{color:var(--acc);font-weight:800}
.sk-prest .r-hero{padding:1.5em 1.6em 1em}
.sk-prest h3{font-size:2.5em}
.sk-prest h3 em{color:var(--acc);font-style:normal}
.sk-prest .r-hero p{margin-top:.5em;opacity:.8}
.sk-prest .how{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:0 1.6em}
.sk-prest .how div{background:#fff;border-radius:.7em;padding:.8em;font-size:.85em;border-bottom:.3em solid var(--acc)}
.sk-prest .how b{display:block;color:var(--acc);font-size:1.8em;line-height:1}
.sk-prest .work{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:1em 1.6em .2em}
.sk-prest .work i{aspect-ratio:4/3;border-radius:.6em;background:linear-gradient(135deg,#cbd2d9,#9aa5b1)}
.sk-prest .work i:nth-child(2){background:linear-gradient(135deg,#9aa5b1,#7b8794)}
.sk-prest .areas{padding:.6em 1.6em;font-size:.85em;opacity:.8}
.sk-prest .form{padding:.6em 1.6em 1.6em;display:grid;gap:1em}
@container (max-width:480px){.sk-prest .how{grid-template-columns:1fr}}

/* ---- Outro ramo ---- */
.sk-out{--bg:#F4F1EA;--fg:#0A2540;--acc:#FF5500;--on:#161A1D;--line:rgba(10,37,64,.3)}
.sk-out .top{padding:1.2em 1.6em;font-weight:300;letter-spacing:.06em;text-transform:uppercase}
.sk-out .top b{font-weight:900;font-style:italic}
.sk-out .r-hero{padding:.6em 1.6em 1em}
.sk-out h3{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:3em;letter-spacing:-.01em;line-height:1.02}
.sk-out .r-hero p{margin-top:.7em;opacity:.8}
.sk-out .form{padding:.6em 1.6em 1.8em;display:grid;gap:.9em}
.sk-out input{font:inherit;padding:.8em 1em;border:1.5px solid var(--fg);border-radius:.7em;background:#fff;color:var(--fg);width:100%}

/* ---- Painel ao lado ---- */
.pane h3{font-size:1.35rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.pane .q{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:2.3rem;line-height:1.05;color:var(--orange);margin:6px 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pane .yes{font-family:Inter,sans-serif;font-style:italic;font-weight:900;font-size:.95rem;background:var(--green);color:var(--ink);padding:6px 14px;border-radius:7px;rotate:-5deg;letter-spacing:.02em}
.pane .star{display:inline-block;background:transparent;border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:99px;margin:6px 0 16px}
.pane ul{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.pane li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.pane li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--ink);font-weight:900;font-size:.75rem;display:grid;place-items:center;margin-top:2px}
@media(prefers-reduced-motion:reduce){.rc,.rb{transition:none}}