/* La Primore Clinic, unidade de Balneário Camboriú (conversa #244). Arquétipo "recepção de anéis de luz" (LEITURA.md, seção 5):
   o design de interiores das unidades como sistema. Ripado grafite, ônix iluminado por dentro, anéis de luz pendentes, neon rosa.
   Paleta do site atual: pink #cc3366 (ação), rosa empoeirado #c7a8a6 (fios), grafite do ripado; sem creme com dourado. */
:root {
  --fundo: #fbf7f6;
  --tinta: #2b2627;
  --suave: #665859;
  --marca: #cc3366;
  --marca-2: #a8244f;
  --rosa: #c7a8a6;
  --blush: #f4e9e7;
  --linha: rgb(43 38 39 / .14);
  --grafite: #2b2627;
  --claro: #f4ece9;
  --claro-2: rgb(244 236 233 / .74);
  --mel: #f6ece4;
  --pedra-tinta: #3b2c22;
  --fonte-titulo: "Petrona", Georgia, serif;
  --fonte-texto: "Raleway", system-ui, sans-serif;
  --raio: 4px;
  --sec: clamp(72px, 10vw, 140px);
}

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }

/* ---------- parede ripada (motivo 2) ---------- */
.ripado {
  background-color: var(--grafite);
  background-image:
    linear-gradient(180deg, rgb(255 238 232 / .07), rgb(0 0 0 / .16) 72%),
    repeating-linear-gradient(90deg, #2f2a2b 0 20px, #1d191a 20px 22px, #3b3435 22px 23px, #2f2a2b 23px 24px);
  color: var(--claro);
}

/* ---------- links e botões ---------- */
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.link:hover { color: var(--marca-2); text-decoration-color: currentColor; }
.link--claro:hover { color: #fff; text-decoration-color: var(--marca); }
.link-texto { color: var(--marca-2); text-decoration: underline; text-underline-offset: 4px; }
.botao--pequeno { padding: .78em 1.15em; font-size: .92rem; }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(43 38 39 / .94); backdrop-filter: blur(10px); color: var(--claro); border-bottom: 1px solid rgb(255 255 255 / .06); }
.topo__linha { display: flex; align-items: center; gap: 24px; width: min(1280px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; min-height: 68px; }
.topo__logo { display: inline-flex; align-items: center; min-height: 48px; }
.topo__logo img { width: clamp(132px, 13vw, 176px); height: auto; }
.topo__nav { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto; font-size: .93rem; font-weight: 500; }
.topo__nav a { padding-block: 10px; opacity: .85; transition: opacity .2s; }
.topo__nav a:hover { opacity: 1; }
.topo__cta { padding: .7em 1.1em; font-size: .9rem; }
@media (max-width: 899px) { .topo__nav { display: none; } .topo__cta { margin-left: auto; } }

/* ---------- hero com anéis de luz (motivo 1) ---------- */
.hero { position: relative; overflow: clip; padding-top: clamp(28px, 4vw, 56px); }
.hero__grade { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: end; min-height: calc(100svh - 110px); }
.hero__texto { padding-bottom: clamp(48px, 8vw, 110px); }
.hero__flor { width: 58px; height: auto; margin-bottom: 26px; opacity: .92; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); color: #fff; max-width: 13ch; line-height: 1.04; }
.hero__sub { margin-top: 24px; max-width: 46ch; color: var(--claro-2); font-size: 1.06rem; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.hero__foto { margin: 0; align-self: end; }
.hero__foto-in { position: relative; aspect-ratio: 4 / 5; max-height: 84svh; margin-left: auto; overflow: hidden; border-radius: var(--raio) var(--raio) 0 0; box-shadow: 0 -30px 80px -40px rgb(255 190 210 / .35); }
.hero__foto-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__aneis { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.anel { position: absolute; top: 0; }
.anel svg { width: 100%; height: auto; overflow: visible; }
.anel__fio { stroke: rgb(255 255 255 / .38); stroke-width: 1; }
.anel__luz { fill: none; stroke: #fff6f2; stroke-width: 3.2; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgb(255 160 196 / .95)) drop-shadow(0 0 22px rgb(204 51 102 / .6)); }
.anel--1 { left: 50%; width: clamp(130px, 14vw, 210px); }
.anel--2 { left: 61%; width: clamp(190px, 21vw, 310px); }
.anel--3 { left: 83%; width: clamp(90px, 9.5vw, 146px); }

/* ---------- protocolos em destaque (disposição do site atual) ---------- */
.protocolos { padding-block: var(--sec); }
.sec-cab { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-cab p { color: var(--suave); font-size: 1.08rem; max-width: 56ch; }
.sec-cab--lado { max-width: none; grid-template-columns: 1fr 1fr; align-items: end; gap: 18px 64px; }
.dests { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px); }
.dest--0 { grid-row: span 2; }
.dest__foto { display: block; overflow: hidden; border-radius: var(--raio); }
.dest__img { position: relative; aspect-ratio: 16 / 10; }
.dest--0 .dest__img { aspect-ratio: 4 / 5; }
.dest__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest__texto { padding-top: 18px; display: grid; gap: 10px; }
.dest h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.dest p { color: var(--suave); max-width: 52ch; }
.dest__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 6px; }

/* ---------- todos os procedimentos, com o anel que acende (motivo 5) ---------- */
.procs { padding-block: var(--sec); background: var(--blush); }
.grupos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.grupo__nome { font: 700 .82rem/1.2 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--marca-2); padding-bottom: 12px; border-bottom: 1px solid var(--rosa); }
.grupo ul { list-style: none; margin: 0; padding: 0; }
.proc { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.proc__anel { width: 18px; height: 18px; margin-top: .42em; border-radius: 50%; border: 2px solid var(--rosa); transition: border-color .35s, box-shadow .35s; }
.proc:hover .proc__anel, .proc:focus-within .proc__anel { border-color: #fff; box-shadow: 0 0 0 1.5px var(--marca), 0 0 9px 2px rgb(204 51 102 / .55), inset 0 0 4px rgb(204 51 102 / .45); }
.proc h4 { font-size: 1.38rem; margin-bottom: 6px; }
.proc p { color: var(--suave); font-size: .97rem; }
.proc__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.proc__links a { font-size: .9rem; font-weight: 600; color: var(--marca-2); text-decoration: underline; text-underline-offset: 4px; padding-block: 4px; }
.proc--ig h4::after { content: " · do Instagram"; font: 600 .78rem var(--fonte-texto); color: var(--suave); letter-spacing: .02em; }

/* ---------- neon rosa na parede ripada (motivo 3) ---------- */
.neon-sec { padding-block: var(--sec); }
.neon-sec__in { display: grid; justify-items: center; text-align: center; gap: 18px; }
.neon { font-family: "Tilt Neon", var(--fonte-texto); font-weight: 400; font-size: clamp(2.3rem, 6.6vw, 5.4rem); line-height: 1.12; color: #ffeef4; max-width: 15ch;
  text-shadow: 0 0 2px #fff, 0 0 7px #ffd2e1, 0 0 16px #ff6fa3, 0 0 32px #cc3366, 0 0 58px rgb(204 51 102 / .7); }
.neon__fonte { font-size: .88rem; color: var(--claro-2); }
.neon__fonte a { text-decoration: underline; text-underline-offset: 4px; }
.neon-sec__mamae { display: grid; gap: 22px; justify-items: center; max-width: 58ch; margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgb(199 168 166 / .35); }
.neon-sec__mamae p:first-child { font-family: var(--fonte-titulo); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; }

/* ---------- a fundadora, com o ring light de estúdio ---------- */
.pricila { padding-block: var(--sec); overflow: clip; }
.pricila__grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.pricila__foto { position: relative; margin: 0; display: grid; place-items: center; padding: 8% 0; }
.pricila__ringlight { position: absolute; z-index: 0; width: 104%; aspect-ratio: 1; top: 0; left: -2%; border-radius: 50%; border: clamp(10px, 1.5vw, 16px) solid #fff;
  box-shadow: 0 0 0 1px rgb(199 168 166 / .7), 0 0 34px 6px rgb(255 160 196 / .55), 0 0 90px 10px rgb(204 51 102 / .22), inset 0 0 26px 4px rgb(255 160 196 / .45); }
.pricila__img { position: relative; z-index: 1; display: block; width: 74%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--raio); box-shadow: 0 30px 60px -30px rgb(43 38 39 / .5); }
.pricila__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pricila__texto { display: grid; gap: 16px; }
.pricila__texto p { color: var(--suave); max-width: 58ch; }
.pricila__cargo { font: 700 .82rem/1.3 var(--fonte-texto) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-2) !important; margin-top: -4px; }
.pricila__crio { margin: 12px 0 0; }
.pricila__crio a { display: block; overflow: hidden; border-radius: var(--raio); aspect-ratio: 3 / 2; }
.pricila__crio img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* ---------- unidade de BC ---------- */
.unidade { padding-block: var(--sec); }
.unidade__cab { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; margin-bottom: clamp(36px, 5vw, 60px); }
.unidade h2 { color: #fff; max-width: 12ch; }
.unidade__fatos { margin: 0; display: grid; gap: 14px; }
.unidade__fatos div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(199 168 166 / .25); }
.unidade__fatos dt { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); padding-top: .2em; }
.unidade__fatos dd { margin: 0; }
.unidade__acoes { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 10px; }
.bento__f { position: relative; display: block; overflow: hidden; border-radius: var(--raio); }
.bento__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bento__f:hover img { transform: scale(1.04); }
.bento__f--0 { grid-column: span 2; grid-row: span 2; }
.bento__f--1 { grid-column: span 2; }
.cidades { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 10px; max-width: 900px; color: var(--claro-2); font-size: .95rem; }
.cidades__rotulo { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); }
.cidade b { color: var(--claro); }
.cidade a { color: var(--claro); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- na mídia ---------- */
.midia { padding-block: var(--sec); }
.midia__grade { display: grid; grid-template-columns: 1fr 2fr; gap: 24px 64px; }
.midia__lista { list-style: none; margin: 0; padding: 0; }
.midia__lista a { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--linha); transition: color .2s; }
.midia__lista li:last-child a { border-bottom: 1px solid var(--linha); }
.midia__veiculo { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.midia__titulo { font-family: var(--fonte-titulo); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; }
.midia__ler { font-size: .9rem; font-weight: 600; color: var(--marca-2); text-decoration: underline; text-underline-offset: 4px; }
.midia__lista a:hover .midia__titulo { color: var(--marca-2); }

/* ---------- recepção: ônix iluminado (motivo 4) e nota no anel ---------- */
.contato { padding-block: var(--sec); }
.contato__grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.contato h2 { color: #fff; max-width: 13ch; }
.contato__intro { display: grid; gap: 16px; justify-items: start; }
.contato__intro > p:not(.neon):not(.neon__fonte) { color: var(--claro-2); max-width: 46ch; }
.neon--pequeno { font-size: clamp(1.8rem, 3.6vw, 2.9rem); text-align: left; margin-top: 10px; }
.nota-anel { display: inline-flex; align-items: center; gap: 16px; margin-top: 14px; padding: 6px 0; }
.nota-anel__aro { width: 62px; height: 62px; flex: none; border-radius: 50%; border: 3px solid #fff6f2; box-shadow: 0 0 3px #fff, 0 0 10px rgb(255 160 196 / .9), 0 0 22px rgb(204 51 102 / .55), inset 0 0 8px rgb(255 160 196 / .6); }
.nota-anel__txt { font-size: .95rem; line-height: 1.35; color: var(--claro); }
.nota-anel__txt b { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 500; }
.nota-anel:hover .nota-anel__txt { text-decoration: underline; text-underline-offset: 4px; }
.onix { position: relative; isolation: isolate; overflow: hidden; border-radius: 6px; background: var(--mel); color: var(--pedra-tinta); padding: clamp(24px, 3.4vw, 44px);
  box-shadow: 0 0 0 1px rgb(255 236 210 / .35), 0 0 70px 4px rgb(255 214 160 / .22), 0 40px 80px -40px rgb(0 0 0 / .6); }
.onix__pedra { position: absolute; inset: 0; z-index: -2; }
.onix__pedra svg { width: 100%; height: 100%; }
.onix::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 42%, rgb(255 252 248 / .62), rgb(255 246 236 / .28) 55%, rgb(255 236 220 / 0) 82%); }
.form { display: grid; gap: 16px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo--largo, .campo:first-child { grid-column: 1 / -1; }
.campo span { font-size: .84rem; font-weight: 700; letter-spacing: .02em; }
.campo input, .campo textarea { width: 100%; padding: .85em .9em; border: 1px solid rgb(59 44 34 / .28); border-radius: var(--raio); background: rgb(255 255 255 / .86); color: var(--tinta); }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: transparent; }
.campo textarea { resize: vertical; min-height: 110px; }
.form__enviar { justify-self: start; min-width: 160px; }
.form__ok a { color: var(--marca-2); }
.onix__balcao { display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(59 44 34 / .2); font-size: .93rem; }
.onix__balcao a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- rodapé ---------- */
.rodape { background: #1d191a; color: #e9dfdc; padding-block: clamp(56px, 7vw, 88px) 40px; font-size: .93rem; }
.rodape__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.rodape__marca img { width: 170px; height: auto; margin-bottom: 14px; }
.rodape__marca p { color: rgb(233 223 220 / .75); max-width: 26ch; }
.rodape__rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); margin: 0 0 10px; }
.rodape__rotulo:not(:first-child) { margin-top: 20px; }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rodape a { text-decoration: underline; text-decoration-color: rgb(199 168 166 / .5); text-underline-offset: 3px; }
.rodape__miudo { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .1); color: rgb(233 223 220 / .66); font-size: .82rem; }

/* WhatsApp na cor da marca (nunca o verde forçado) */
.wa-flutuante { background: var(--marca); }

/* ---------- tablet e celular ---------- */
@media (max-width: 1080px) {
  .grupos { grid-template-columns: 1fr 1fr; }
  .rodape__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .hero__grade { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .hero__foto { order: -1; margin-inline: calc(-1 * clamp(16px, 4vw, 48px)); }
  .hero__foto-in { aspect-ratio: auto; height: 62svh; max-height: 620px; border-radius: 0; }
  .hero__texto { padding-bottom: 56px; }
  .hero__flor { width: 44px; margin-bottom: 18px; }
  .anel--1 { left: 6%; width: 112px; }
  .anel--2 { left: 44%; width: 150px; }
  .anel--3 { display: none; }
  .sec-cab--lado, .unidade__cab, .midia__grade, .contato__grade, .pricila__grade { grid-template-columns: 1fr; }
  .unidade__acoes { grid-column: auto; }
  .dests { grid-template-columns: 1fr; }
  .dest--0 { grid-row: auto; }
  .dest--0 .dest__img { aspect-ratio: 4 / 5; }
  .pricila__foto { max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .grupos { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .bento__f--0 { grid-column: span 2; grid-row: span 2; }
  .bento__f--1 { grid-column: span 2; }
  .unidade__fatos div { grid-template-columns: 1fr; gap: 4px; }
  .campos { grid-template-columns: 1fr; }
  .form__enviar { justify-self: stretch; }
  .proc__links a { min-height: 44px; display: inline-flex; align-items: center; }
  .midia__ler, .cidade a, .neon__fonte a, .onix__balcao a, .link-texto { display: inline-flex; min-height: 44px; align-items: center; }
  .rodape__in { grid-template-columns: 1fr; }
  .rodape__lista { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .rodape__lista a { display: inline-flex; min-height: 44px; align-items: center; }
  .rodape p a { display: inline-flex; min-height: 44px; align-items: center; }
  .topo__logo img { width: 128px; }
}