section{padding:76px 0}
section[id]{scroll-margin-top:96px}
#videos{padding-bottom:28px}
#servicos{padding-top:28px}
.section-head{display:grid;grid-template-columns:1fr;gap:18px;align-items:end;margin-bottom:28px}
.kicker{color:var(--accent);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
h2{margin:9px 0 0;font-size:43px;line-height:.96;letter-spacing:-.062em}
.section-head p{margin:0;color:var(--muted);font-size:17px;max-width:560px}

.video-showcase{
  padding:76px 0;
  background:linear-gradient(180deg,#fffaf7 0%,#f7f2ee 100%);
}
.video-showcase .container{width:100%}
.video-showcase .section-head,
.video-showcase .video-note{margin-left:12px;margin-right:12px}
.video-showcase .section-head{margin-bottom:38px}
.video-grid{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:2px 12px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.video-grid::-webkit-scrollbar{display:none}
.video-card{
  flex:0 0 min(82vw,330px);
  min-width:0;
  scroll-snap-align:center;
  overflow:hidden;
  border:1px solid rgba(25,20,22,.09);
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 46px rgba(42,25,34,.10);
}
.video-card:first-child{scroll-snap-align:start}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  background:linear-gradient(145deg,#2d1d27,#171015);
}
.video-frame video{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#171015;
  object-fit:contain;
}
.video-poster{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#171015;
}
.video-poster[hidden]{display:none}
.video-start{
  position:absolute;
  left:50%;
  top:53.90625%;
  z-index:2;
  width:20%;
  min-width:48px;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,250,247,.94);
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.video-start::after{content:"";width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #b81853;transform:translateX(2px)}
.video-start:focus-visible{outline:3px solid #e82972;outline-offset:5px}
.video-start[hidden]{display:none}
.video-info{padding:16px 16px 18px}
.video-info small{
  display:block;
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.video-info h3{margin:7px 0;font-size:20px;line-height:1.08;letter-spacing:-.035em}
.video-info p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.watch-video{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:48px;
  margin-top:20px;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
}
.watch-video:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.video-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:12px;
}

.services-grid{display:grid;grid-template-columns:1fr;gap:16px}
.service{
  min-height:230px;
  position:relative;
  overflow:hidden;
  padding:24px;
  border:1px solid var(--line);
  border-radius:23px;
  background:var(--surface);
}
.service-main{min-height:350px;background:var(--plum);color:white}
.service-accent{background:var(--accent);color:white}
.service-no{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.13em;opacity:.6}
.service h3{margin:16px 0 10px;max-width:100%;font-size:30px;line-height:1.04;letter-spacing:-.05em}
.service p{margin:0;max-width:100%;color:inherit;opacity:.72;font-size:16px;line-height:1.48}
.service .possibilities{margin-top:20px;font-size:14px;line-height:1.65;opacity:.9}
.service-scope{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:34px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.service-scope p{flex:1;margin:0;color:var(--muted);max-width:750px}
.service-scope .button{width:100%;line-height:1.3;text-align:center}

.about-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.about-copy{color:var(--muted);font-size:16px;line-height:1.8}
.about-copy p{margin:0 0 20px}
.about-copy p:last-child{margin-bottom:0}

.portfolio{background:var(--plum);color:white;position:relative;overflow:hidden}
.portfolio::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-220px;top:130px;background:radial-gradient(circle,rgba(232,41,114,.22),transparent 68%)}
.portfolio .section-head p{color:#b9adb3}
.gallery{position:relative;z-index:2;display:grid;grid-template-columns:1fr;grid-auto-rows:420px;gap:9px}
.photo{position:relative;overflow:hidden;margin:0;border-radius:17px;background:#3a2a34}
.photo img{height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.68))}
.photo figcaption{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.photo strong{font-size:13px}
.photo span{display:none;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;opacity:.72}
.p1 img{object-position:70% center}
.p2 img{object-position:center 26%}
.p3 img{object-position:center center}
.p4 img{object-position:center 23%}
.p7 img{object-position:78% center;transform:scale(1.14);transform-origin:78% center}
.p8 img{object-position:center 24%}

.experience{position:relative;overflow:hidden;background:var(--surface)}
.experience::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  right:-210px;
  top:80px;
  background:radial-gradient(circle,rgba(232,41,114,.13),transparent 70%);
  pointer-events:none;
}
.experience-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.experience-copy h2{max-width:720px}
.experience-points{display:grid;grid-template-columns:1fr;gap:12px;margin-top:0}
.experience-point{
  min-height:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:20px;
  border:1px solid var(--line);
  border-radius:21px;
  background:#fff;
}
.experience-point strong{display:block;font-size:15px;line-height:1.15;letter-spacing:-.025em}
.experience-point span{display:block;margin-top:9px;color:var(--muted);font-size:12px}

.steps{display:grid;grid-template-columns:1fr;gap:18px}
.step{padding:26px 22px 8px;border-top:1px solid var(--ink)}
.step-no{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:white;font-size:12px;font-weight:900}
.step h3{margin:22px 0 8px;font-size:22px;letter-spacing:-.035em}
.step p{margin:0;color:var(--muted)}

.cta-section{padding-top:24px;padding-bottom:92px}
.cta{
  min-height:470px;
  position:relative;
  overflow:hidden;
  padding:34px 24px;
  display:flex;
  align-items:flex-start;
  border-radius:28px;
  background:var(--accent);
  color:white;
  box-shadow:0 30px 90px rgba(232,41,114,.23);
}
.cta::before{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(255,255,255,.34);border-radius:50%;right:-110px;top:-150px;box-shadow:0 0 0 55px rgba(255,255,255,.065),0 0 0 110px rgba(255,255,255,.03)}
.cta::after{content:"MYCAELLA";position:absolute;right:14px;bottom:12px;font-size:64px;line-height:1;font-weight:950;letter-spacing:-.06em;color:rgba(255,255,255,.10)}
.cta-content{position:relative;z-index:2;max-width:760px}
.cta h2{font-size:50px}
.cta p{max-width:570px;margin:18px 0 0;font-size:18px;opacity:.84}
.cta .button{margin-top:26px;background:white;color:var(--ink)}
.cta .kicker{color:#fff;opacity:.75}

footer{padding:28px 0 max(42px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.footer-row{display:flex;flex-direction:column;align-items:flex-start;gap:22px;color:var(--muted);font-size:12px}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;color:var(--ink);font-weight:800}

#portfolio,#experiencia,#processo,.cta-section,footer{content-visibility:auto;contain-intrinsic-size:auto 720px}
