/* Service landing pages. Builds on style.css (tokens, header, cards, band, reviews, footer). */

.ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 4px 0 16px; }
.crumbs a:hover { color: var(--primary); }
.crumbs b { color: var(--ink); font-weight: 700; }

/* hero: info card left, sliding reel right */
.lp-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
.lp-hero__info { padding: 38px 40px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.lp-hero__info h1 { font-size: clamp(34px, 3.6vw, 48px); margin: 20px 0 16px; }
.lp-hero__info h1 mark { background: linear-gradient(transparent 58%, var(--mint) 58%); color: inherit; padding: 0 4px; }
.lp-hero__info > p { color: var(--muted); max-width: 470px; }
.lp-hero__info .hero__actions { margin-top: 24px; }
.lp-hero__info hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 28px 0 20px; }
.lp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.lp-facts div { background: #fff; border-radius: 14px; padding: 10px 12px; }
.lp-facts dt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.lp-facts dd { font-size: 13px; font-weight: 700; line-height: 1.35; margin-top: 2px; }

.lp-reel { padding: 22px 0 22px 22px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.lp-reel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 22px; margin-bottom: 16px; }
.lp-reel__head b { display: block; font-size: 16px; }
.lp-reel__head small { color: var(--muted); font-size: 12.5px; }
.lp-reel__nav { display: flex; gap: 8px; }
.lp-reel__nav .icon-btn { background: #fff; }
.lp-reel__nav .icon-btn--dark { background: var(--primary); }
.lp-reel__track {
  flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 22px;
}
.lp-reel__track::-webkit-scrollbar { display: none; }
.lp-slide { position: relative; margin: 0; border-radius: 20px; overflow: hidden; scroll-snap-align: start; min-height: 380px; background: #e4e7e5; }
.lp-slide img, .lp-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-slide::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(18,51,46,.75)); }
.lp-slide figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25; }
.lp-slide figcaption small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-strong); }
.lp-slide__badge {
  position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(18,51,46,.55); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 800;
  padding: 5px 10px 5px 7px; border-radius: 99px;
}
.lp-slide__badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.lp-slide::after { pointer-events: none; }
.lp-slide--video video { cursor: pointer; }
.lp-sound {
  position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--primary-dark); font-size: 12px; font-weight: 800; padding: 7px 12px 7px 9px; border-radius: 99px;
  box-shadow: 0 8px 18px -10px rgba(18,51,46,.7); transition: background-color .2s, color .2s, transform .2s;
}
.lp-sound:hover { transform: scale(1.04); }
.lp-sound svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-sound__on, .is-sound .lp-sound__off { display: none; }
.is-sound .lp-sound__on { display: block; }
.is-sound .lp-sound { background: var(--primary); color: #fff; }
.lp-slide--video:not(.is-sound) .lp-sound { animation: sound-hint 2.4s 1.5s 2 ease-in-out; }
@keyframes sound-hint { 0%, 100% { transform: none; } 15% { transform: scale(1.12); } 30% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-sound { animation: none !important; } }

/* text slides about the procedure */
.lp-slide--info {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 20px 18px;
  background: #fff; color: var(--ink); text-decoration: none;
}
.lp-slide--info::after { content: none; }
.lp-slide__kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.lp-slide__big { font-size: 26px; line-height: 1.05; letter-spacing: -.03em; }
.lp-slide--info p { font-size: 13px; line-height: 1.45; color: var(--muted); }
.lp-slide--dark { background: var(--primary-dark); color: #fff; }
.lp-slide--dark .lp-slide__kicker { color: var(--mint-strong); }
.lp-slide--dark p { color: rgba(255,255,255,.72); }
.lp-slide--mint { background: var(--mint); }
.lp-slide--mint p { color: var(--primary-dark); opacity: .8; }
.lp-slide--shapes { justify-content: space-between; }
.lp-slide--shapes img { position: static; width: 100%; height: auto; border-radius: 12px; margin-bottom: auto; }
.lp-slide--cta { background: radial-gradient(120% 90% at 100% 0%, #2b7a6e 0%, var(--primary) 50%, #12332e 100%); color: #fff; }
.lp-slide--cta .lp-slide__kicker { color: var(--mint-strong); }
.lp-slide--cta p { color: rgba(255,255,255,.75); }
/* text slides with a photo filling the space above the copy */
.lp-slide--photo { padding-top: 0; }
.lp-slide--photo > img { position: static; flex: 1 1 0; min-height: 130px; width: calc(100% + 36px); max-width: none; height: auto; margin: 0 -18px 8px; }
/* animated explainer slides: a --dur loop in four equal phases, one caption each (see partials/animations/*) */
.lp-slide--anim { background: radial-gradient(120% 70% at 50% 20%, #fff 0%, #e3f3ec 60%, #cfe9e1 100%); }
.lp-slide--anim-warm { background: radial-gradient(120% 70% at 50% 25%, #fff 0%, #fdeee6 55%, #f6dccf 100%); }
.lp-slide--anim::after { content: none; }
.lp-anim__svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - 96px); }
.lp-slide--anim figcaption { top: 18px; bottom: auto; color: var(--ink); font-size: 17px; }
.lp-slide--anim figcaption small { color: var(--primary); }
.lp-anim__steps { display: grid; margin-top: 4px; }
.lp-anim__steps > span { grid-area: 1 / 1; opacity: 0; animation: an-step var(--dur) calc(var(--i) * var(--dur) / 4) infinite backwards; }
.lp-anim__steps b { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
@keyframes an-step { 0% { opacity: 0; transform: translateY(6px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lp-anim__steps > span { animation: none; }
  .lp-anim__steps > span:last-child { opacity: 1; }
}
.lp-slide__call {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px;
  background: #fff; color: var(--primary-dark); font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 99px;
}
.lp-slide__call svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* free consultation card */
.lp-consult {
  background: radial-gradient(120% 90% at 100% 0%, #2b7a6e 0%, var(--primary) 45%, #12332e 100%);
  color: #fff; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 22px;
}
.lp-consult::before {
  content: ""; position: absolute; right: -60px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%;
  border: 1.5px dashed rgba(139,208,188,.35);
}
.lp-consult > * { position: relative; }
.lp-consult__top { display: flex; justify-content: space-between; align-items: center; }
.lp-consult__badge {
  background: var(--mint-strong); color: var(--primary-dark); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px;
}
.lp-consult__live { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); }
.lp-consult__live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: lp-live 1.8s infinite; }
@keyframes lp-live { to { box-shadow: 0 0 0 8px rgba(61,220,132,0); } }
.lp-consult h3 { font-size: 22px; margin: 2px 0 0; }
.lp-consult p { font-size: 13px; color: rgba(255,255,255,.72); max-width: none; line-height: 1.5; }
.lp-consult__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-consult__list li {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; line-height: 1.3;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 7px 9px;
}
.lp-consult__list li::before {
  content: "✓"; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--mint-strong);
  color: var(--primary-dark); display: grid; place-items: center; font-size: 10px; font-weight: 800;
}
.lp-consult__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.lp-consult__call {
  flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--primary-dark);
  border-radius: 99px; padding: 7px 16px 7px 7px; font-weight: 800; font-size: 15px; transition: transform .2s;
}
.lp-consult__call .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--mint); }
.lp-consult__call small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.lp-consult__wa {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: #1fa855; color: #fff;
  display: grid; place-items: center; transition: transform .2s;
}
.lp-consult__wa .ico { width: 20px; height: 20px; }
.lp-consult__call:hover, .lp-consult__wa:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .lp-consult__live i { animation: none; } }

/* planning */
.lp-plan { margin-top: 20px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; padding: 36px 40px; align-items: center; }
.lp-plan h2 { margin: 16px 0 10px; font-size: clamp(24px, 2.6vw, 32px); }
.lp-plan__lead { color: var(--muted); font-size: 14px; max-width: 520px; }
.lp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.lp-tile { background: #fff; border-radius: 16px; padding: 16px 18px; }
.lp-tile b { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: var(--mint); padding: 3px 9px; border-radius: 99px; }
.lp-tile h3, .lp-tile h4 { font-size: 15px; margin: 10px 0 2px; }
.lp-tile p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.lp-plan__media { background: #fff; border-radius: 20px; padding: 16px; text-align: center; }
.lp-plan__media img { width: 100%; border-radius: 12px; }
.lp-plan__media small, .lp-plan__media figcaption { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.lp-diagram { grid-template-columns: 1fr 1.1fr; }
.lp-diagram .lp-plan__media { padding: 10px; }
.diagram { display: block; width: 100%; height: auto; }
/* diagram loop: 12s, one 3s phase per tile; site.js starts it on scroll-in and pauses it off-screen.
   The drawing's own keyframes live in its partial (svg_style); only the tile highlight is shared. */
.lp-diagram .lp-tile { transition: box-shadow .3s, transform .3s; }
@media (prefers-reduced-motion: no-preference) {
  .lp-diagram .lp-tile { animation: dg-tile 12s calc(var(--i) * 3s) infinite backwards; }
}
@keyframes dg-tile {
  0% { box-shadow: none; transform: none; }
  3%, 22% { box-shadow: 0 0 0 2px var(--primary), 0 14px 30px -18px rgba(18,51,46,.5); transform: translateY(-3px); }
  25%, 100% { box-shadow: none; transform: none; }
}


/* FAQ */
.lp-faq { padding: 80px 0 10px; }
.lp-faq__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.lp-faq__head h2 { margin-top: 14px; }
.lp-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.lp-faq details { background: var(--card); border-radius: 18px; transition: background-color .2s; }
.lp-faq details[open] { background: var(--mint); }
.lp-faq summary {
  list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; color: var(--primary); font-size: 17px; transition: transform .25s;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); background: var(--primary); color: #fff; }
.lp-faq details p { padding: 0 20px 18px; color: var(--ink); font-size: 14px; opacity: .8; }
.lp-faq details p a { font-weight: 800; text-decoration: underline; }

@media (max-width: 1100px) {
  .lp-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .lp-hero, .lp-plan, .lp-faq__grid { grid-template-columns: 1fr; }
  .lp-hero { gap: 14px; }
  .lp-hero__info { padding: 24px 22px; }
  .lp-hero__info h1 { margin: 14px 0 10px; }
  .lp-hero__info .hero__actions { display: none; }   /* the sticky quick bar carries call + WhatsApp */
  .lp-hero__info hr { margin: 20px 0 16px; }
  .lp-plan { padding: 28px 24px; }
  /* procedure reel comes first on mobile, edge to edge */
  .lp-reel { order: -1; padding: 0; background: none; border-radius: 0; overflow: visible; }
  .lp-reel__head { display: none; }
  .lp-reel__track {
    grid-auto-columns: 62%; gap: 10px; padding: 0 20px; margin: 0 -20px;
    scroll-padding-inline: 20px;
  }
  .lp-slide { min-height: 0; aspect-ratio: 4 / 5; border-radius: 22px; }
}