/* Hero B · A lamparina — Caroline Guimarães, Enfermeira Esteta */
@font-face{font-family:"Erode";src:url("../fonts/erode-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Erode";src:url("../fonts/erode-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Erode";src:url("../fonts/erode-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Erode";src:url("../fonts/erode-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Erode";src:url("../fonts/erode-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* luz da lamparina e crepúsculo morno */
  --b-ambar:#f4cf95;
  --b-ambar-claro:#fff1d8;
  --b-mel:#d9a46a;
  --b-caramelo:#c48a58;
  --b-creme:#f7ede1;
  --b-creme-2:#efdfcd;
  --b-areia:#e6cfb8;
  --b-vinho:#64362b;
  --b-vinho-escuro:#4d1f19;
  --b-tinta:#3a1a14;
  --b-tinta-suave:#6a4335;

  --b-serifa:"Erode", "Iowan Old Style", Georgia, serif;
  --b-texto:"Proza Libre", "Segoe UI", system-ui, sans-serif;

  --b-margem:clamp(1.25rem, 5.6vw, 6rem);
  --b-nav-h:clamp(4rem, 7vh, 5.25rem);
  --b-titulo:clamp(2.3rem, 1.1rem + 3.2vw, 4.15rem);
  --b-corpo:clamp(1.06rem, .98rem + .3vw, 1.2rem);
  --b-curva:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--b-creme-2)}
body{margin:0;font-family:var(--b-texto);color:var(--b-tinta);background:var(--b-creme-2);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}

/* ---------- navegação ---------- */
.b-nav{position:absolute;inset:0 0 auto 0;z-index:20;height:var(--b-nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--b-margem);gap:1rem}
.b-marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--b-vinho-escuro)}
.b-marca-lamp{width:3.1rem;height:auto;fill:var(--b-vinho-escuro);flex:none}
.b-marca-txt{display:flex;flex-direction:column;line-height:1.05}
.b-marca-nome{font-family:var(--b-serifa);font-weight:500;font-size:1.22rem;letter-spacing:.005em}
.b-marca-cat{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--b-tinta-suave);margin-top:.3rem}
.b-nav-wa{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.95rem;font-weight:500;color:var(--b-vinho-escuro);padding:.6rem 1rem;border-radius:999px;border:1px solid color-mix(in oklab, var(--b-vinho) 28%, transparent);background:color-mix(in oklab, var(--b-creme) 55%, transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,border-color .3s}
.b-nav-wa svg{width:1.1rem;height:1.1rem;fill:currentColor}
.b-nav-wa:hover{background:var(--b-creme);border-color:var(--b-vinho)}

/* ---------- hero ---------- */
.b-hero{position:relative;min-height:100svh;overflow:clip;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:calc(var(--b-nav-h) + 1rem) var(--b-margem) clamp(2rem,5vh,3.5rem);
  --fx:72%;--fy:40%;--lx:0px;--ly:0px}

/* malha de fundo: manchas radiais sobrepostas, sem filtro */
.b-fundo{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 0% 0% in oklab, #f5e8da 0%, transparent 62%),
  radial-gradient(90% 80% at 100% 100% in oklab, #dcbb9c 0%, transparent 70%),
  linear-gradient(160deg in oklab, #f1e3d3, #e7d0ba)}
.b-mancha{position:absolute;border-radius:50%;will-change:transform}
.b-m1{width:72vmax;height:72vmax;left:-22vmax;top:-30vmax;background:radial-gradient(closest-side in oklab, #f9efe3, transparent);animation:b-deriva1 34s ease-in-out infinite alternate}
.b-m2{width:60vmax;height:60vmax;right:-18vmax;bottom:-34vmax;background:radial-gradient(closest-side in oklab, color-mix(in oklab, var(--b-mel) 70%, #e6c3a3), transparent);opacity:.75;animation:b-deriva2 28s ease-in-out infinite alternate}
.b-m3{width:46vmax;height:46vmax;left:18vw;bottom:-28vmax;background:radial-gradient(closest-side in oklab, #e9c7b3, transparent);opacity:.7;animation:b-deriva3 38s ease-in-out infinite alternate}
.b-m4{width:40vmax;height:40vmax;left:-14vmax;bottom:-10vmax;background:radial-gradient(closest-side in oklab, #e3c3a6, transparent);opacity:.55;animation:b-deriva2 31s ease-in-out infinite alternate-reverse}
@keyframes b-deriva1{to{transform:translate(6vmax,4vmax) scale(1.08)}}
@keyframes b-deriva2{to{transform:translate(-5vmax,-4vmax) scale(1.1)}}
@keyframes b-deriva3{to{transform:translate(7vmax,-3vmax) scale(.92)}}

/* a luz da lamparina: halo que nasce na chama e aquece tudo */
.b-luz{position:absolute;left:calc(var(--fx) + var(--lx));top:calc(var(--fy) + var(--ly));width:min(150vmax,2200px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side in oklab,
    #fffaf0 0%, #fff0d3 7%, color-mix(in oklab, var(--b-ambar) 85%, #fff4e2) 20%,
    color-mix(in oklab, var(--b-ambar) 45%, transparent) 40%, color-mix(in oklab, var(--b-mel) 14%, transparent) 64%, transparent 100%);
  opacity:0;scale:.2;transition:opacity 2.6s var(--b-curva), scale 3.4s var(--b-curva)}
.b-hero.is-acesa .b-luz{opacity:1;scale:1;animation:b-respira 17s ease-in-out 3.4s infinite}
@keyframes b-respira{0%,100%{scale:1}50%{scale:1.07}}
/* penumbra de antes de acender: crepúsculo quente, nunca noite */
.b-penumbra{position:absolute;inset:0;background:radial-gradient(130% 120% at 70% 40% in oklab, color-mix(in oklab, #a9785e 22%, transparent), color-mix(in oklab, #7d4b3a 34%, transparent));opacity:1;transition:opacity 2.8s var(--b-curva) .2s}
.b-hero.is-acesa .b-penumbra{opacity:0}

/* granulado fino fixo */
.b-grao{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .08 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:180px}

/* ---------- texto ---------- */
.b-texto{position:relative;z-index:3;max-width:39rem;grid-column:1;align-self:center}
.b-trajeto{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;margin:0 0 clamp(1rem,2.4vh,1.6rem);font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--b-vinho)}
.b-trajeto i{width:1.6rem;height:1px;background:linear-gradient(90deg in oklab, transparent, var(--b-caramelo), transparent)}
.b-titulo{margin:0;font-family:var(--b-serifa);font-weight:500;font-size:var(--b-titulo);line-height:1.02;letter-spacing:-.018em;color:var(--b-vinho-escuro);text-wrap:balance}
.b-titulo>span{display:block}
.b-t2{font-weight:300;color:var(--b-vinho);margin-top:.2em;font-size:.74em;letter-spacing:-.01em}
.b-acesa{position:relative;white-space:nowrap;z-index:0}
.b-acesa::after{content:"";position:absolute;z-index:-1;left:-.12em;right:-.1em;top:.18em;bottom:-.02em;border-radius:.4em;
  background:radial-gradient(closest-side in oklab, color-mix(in oklab, var(--b-ambar) 90%, white), color-mix(in oklab, var(--b-ambar) 30%, transparent) 70%, transparent);
  opacity:0;scale:.6 .8;transition:opacity 1.8s var(--b-curva) 1.6s, scale 2s var(--b-curva) 1.6s}
.b-hero.is-acesa .b-acesa::after{opacity:1;scale:1}
.b-apoio{margin:clamp(1.1rem,2.6vh,1.6rem) 0 0;font-size:var(--b-corpo);line-height:1.6;color:var(--b-tinta);max-width:33rem}
.b-apoio strong{font-weight:600;color:var(--b-vinho-escuro)}

.b-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem;margin-top:clamp(1.4rem,3.2vh,2.1rem)}
.b-cta{display:inline-flex;align-items:center;gap:.65rem;padding:1.02rem 1.6rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:1.04rem;color:#fff6ea;
  background:linear-gradient(180deg in oklab, #6e3a2d, var(--b-vinho-escuro));box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 30px -12px rgba(77,31,25,.55), 0 0 0 0 rgba(244,207,149,0);transition:transform .35s var(--b-curva), box-shadow .5s}
.b-cta svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
.b-cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 36px -12px rgba(77,31,25,.6), 0 0 0 6px rgba(244,207,149,.45)}
.b-cta:focus-visible,.b-sec:focus-visible,.b-nav-wa:focus-visible,.b-marca:focus-visible{outline:2px solid var(--b-vinho-escuro);outline-offset:3px}
.b-sec{font-weight:500;color:var(--b-vinho-escuro);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.2rem;transition:background-size .4s var(--b-curva)}
.b-sec:hover{background-size:0 1px;background-position:100% 100%}

.b-prova{display:flex;align-items:stretch;gap:1.3rem;margin-top:clamp(1.6rem,3.8vh,2.4rem);padding-top:clamp(1.1rem,2.6vh,1.5rem);border-top:1px solid color-mix(in oklab, var(--b-vinho) 22%, transparent)}
.b-nota{display:grid;grid-template-columns:auto;align-content:start;gap:.15rem;flex:none;padding-right:1.3rem;border-right:1px solid color-mix(in oklab, var(--b-vinho) 18%, transparent)}
.b-nota strong{font-family:var(--b-serifa);font-weight:500;font-size:2.3rem;line-height:1;color:var(--b-vinho-escuro)}
.b-estrelas{color:#a8642f;letter-spacing:.12em;font-size:.85rem}
.b-nota-txt{font-size:.84rem;line-height:1.35;color:var(--b-tinta-suave);max-width:8.5rem}
.b-fala{margin:0;align-self:center}
.b-fala p{margin:0;font-family:var(--b-serifa);font-weight:400;font-size:1.16rem;line-height:1.38;color:var(--b-vinho-escuro)}
.b-fala cite{display:block;margin-top:.45rem;font-style:normal;font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--b-tinta-suave)}
.b-registro{display:none;margin:clamp(1rem,2.4vh,1.4rem) 0 0;font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--b-tinta-suave)}

/* ---------- palco: retrato + lamparina ---------- */
.b-palco{position:absolute;right:0;bottom:0;z-index:2;height:min(92svh, 64rem);aspect-ratio:973/1088;max-width:54vw;--W:100%}
.b-retrato{position:absolute;inset:0;margin:0}
.b-retrato img{display:block;width:100%;height:100%;object-fit:contain;object-position:right bottom;
  filter:brightness(.86) saturate(.82) sepia(.06);transition:filter 3s var(--b-curva) .4s}
.b-hero.is-acesa .b-retrato img{filter:brightness(1.01) saturate(1.03) sepia(0)}
/* luz quente pousando no retrato (mascarada pelo próprio recorte) */
.b-retrato-luz{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("../img/caroline-retrato-vinho.webp") right bottom/contain no-repeat;
          mask:url("../img/caroline-retrato-vinho.webp") right bottom/contain no-repeat;
  background:radial-gradient(70% 62% at calc(var(--px,30%) + var(--plx,0px)) calc(var(--py,36%) + var(--ply,0px)) in oklab, rgba(255,214,150,.75), rgba(244,190,120,.32) 45%, transparent 78%);
  mix-blend-mode:soft-light;opacity:0;transition:opacity 2.8s var(--b-curva) .6s}
.b-hero.is-acesa .b-retrato-luz{opacity:1}

.b-lamparina{position:absolute;left:-9%;top:29%;width:40%;z-index:3}
.b-lamp{display:block;width:100%;height:auto;overflow:visible}
.b-lamp-guia{fill:none;stroke:#fff;stroke-width:40;stroke-linecap:round;stroke-linejoin:round}
.b-chama{transform-box:fill-box;transform-origin:50% 100%;opacity:0;scale:0}
.b-brilho{transform-box:fill-box;transform-origin:center;opacity:0;scale:.3}
.b-hero.is-acesa .b-chama{opacity:1;scale:1;transition:opacity .5s ease-out, scale 1.1s cubic-bezier(.3,1.6,.5,1)}
.b-hero.is-acesa .b-chama-fora{animation:b-tremula 3.2s ease-in-out 1.2s infinite}
.b-hero.is-acesa .b-brilho{opacity:1;scale:1;transition:opacity 1.6s ease-out .1s, scale 2s var(--b-curva) .1s;animation:b-pulsa 4.6s ease-in-out 2s infinite}
.b-chama-fora,.b-chama-dentro{transform-box:fill-box;transform-origin:50% 100%}
@keyframes b-tremula{0%,100%{transform:scale(1,1) skewX(0)}22%{transform:scale(.97,1.04) skewX(-2deg)}48%{transform:scale(1.02,.97) skewX(1.5deg)}71%{transform:scale(.98,1.03) skewX(-1deg)}}
@keyframes b-pulsa{0%,100%{opacity:1}50%{opacity:.78}}

/* ---------- entrada ---------- */
.js .b-entra{opacity:0;translate:0 14px;transition:opacity 1s var(--b-curva), translate 1.1s var(--b-curva)}
.js .b-hero.is-pronta .b-entra{opacity:1;translate:0 0}
.js .b-palco{opacity:0;transition:opacity 1.4s var(--b-curva) .15s}
.js .b-hero.is-pronta .b-palco{opacity:1}

/* ---------- tablet e notebook baixo ---------- */
@media (max-width:1180px){
  .b-texto{max-width:31rem}
  .b-marca-coren{display:none}
  .b-palco{max-width:56vw}
}
@media (min-width:861px) and (max-height:760px){
  :root{--b-titulo:clamp(2.2rem, 1rem + 3.2vw, 3.8rem)}
  .b-fala p{font-size:1.04rem}
}

/* ---------- celular ---------- */
@media (max-width:860px){
  :root{--b-nav-h:4.25rem}
  .b-nav-wa span{display:none}
  .b-nav-wa{padding:.7rem}
  .b-nav-wa svg{width:1.3rem;height:1.3rem}
  .b-marca-lamp{width:2.6rem}
  .b-marca-nome{font-size:1.08rem}
  .b-marca-coren{display:none}
  .b-hero{display:flex;flex-direction:column;align-items:stretch;padding:calc(var(--b-nav-h) + .4rem) var(--b-margem) 2.5rem;--fx:30%;--fy:44%}
  .b-texto{display:contents}
  .b-trajeto{order:1;flex-wrap:nowrap;font-size:clamp(.66rem, 3.05vw, .82rem);font-weight:500;text-transform:none;letter-spacing:.01em;gap:.45rem;margin-bottom:.8rem;white-space:nowrap}
  .b-trajeto i{width:.7rem;flex:none}
  .b-titulo{order:2;position:relative;z-index:3}
  .b-palco{order:3;position:relative;right:auto;bottom:auto;height:auto;width:calc(100% + 2*var(--b-margem));max-width:none;margin:.6rem calc(-1*var(--b-margem)) 0;aspect-ratio:973/1000}
  .b-retrato img{object-fit:cover;object-position:right top;
    -webkit-mask:linear-gradient(#000 76%, transparent 99%);mask:linear-gradient(#000 76%, transparent 99%)}
  .b-retrato-luz{-webkit-mask-position:right top;mask-position:right top;-webkit-mask-size:cover;mask-size:cover}
  .b-lamparina{left:2.5%;top:31%;width:35%}
  .b-apoio{order:4;margin-top:-.6rem;position:relative;z-index:3}
  .b-acoes{order:5;position:relative;z-index:3;flex-direction:column;align-items:stretch;gap:1rem;margin-top:1.4rem}
  .b-cta{justify-content:center;padding:1.05rem 1rem;font-size:.98rem;gap:.55rem;white-space:nowrap}
  .b-sec{align-self:center}
  .b-prova{order:6;margin-top:1.6rem;position:relative;z-index:3;flex-direction:column;gap:.9rem}
  .b-nota{grid-template-columns:auto auto 1fr;align-items:baseline;gap:.6rem;padding:0 0 .9rem;border-right:0;border-bottom:1px solid color-mix(in oklab, var(--b-vinho) 18%, transparent)}
  .b-nota-txt{max-width:none}
  .b-nota strong{font-size:1.9rem}
  .b-registro{display:block;order:5;position:relative;z-index:3;margin:1.1rem 0 0;text-align:center}
}
@media (min-width:600px) and (max-width:860px){
  .b-palco{width:min(calc(100% + var(--b-margem)), 64svh);align-self:flex-end;margin-right:calc(-1*var(--b-margem));margin-left:0}
  .b-lamparina{left:-14%;width:38%}
  .b-apoio{margin-top:-1.2rem;max-width:34rem}
  .b-acoes{flex-direction:row;align-items:center}
  .b-sec{align-self:center}
  .b-registro{text-align:left}
}
@media (max-width:370px){
  .b-marca-cat{letter-spacing:.14em}
  .b-trajeto{font-size:.74rem;gap:.35rem}
  .b-trajeto i{width:.5rem}
  .b-cta{font-size:.93rem}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .b-penumbra{opacity:0}
  .b-luz{opacity:1;scale:1}
  .b-retrato-luz{opacity:1}
  .b-retrato img{filter:none}
  .b-chama,.b-brilho{opacity:1;scale:1}
  .b-acesa::after{opacity:1;scale:1}
  .js .b-entra,.js .b-palco{opacity:1;translate:0 0}
}