/*
  main.css (clean rewrite)
  Goal: same behavior/markup compatibility, cleaner structure, no duplicate rules.

  ── Breakpoints ──
  sm:  min-width: 600px   (large phones / modals)
  md:  min-width: 768px   (tablets)        max-width: 767px  (mobile-only)
  lg:  min-width: 1024px  (desktop)        max-width: 1023px (tablet-only)
  xl:  min-width: 1200px  (large desktop)
  2xl: min-width: 1440px  (ultrawide)

  Micro-breakpoints (single-use, kept for pixel precision):
  360px max — slider thumbnail size on small phones
  520px max — grid single-column on narrow screens
  900px min — slider cards 3-column intermediate
*/

:root{
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --text:#111111;
  --muted:#6B6B6B;

  --pad:30px;
  --gap:18px;
  --radius:22px;

  --border:#CFCFCF;

  --blue:#007AFF;
  --wa:#3FAE57;
  --sticky-h: 70px;

  --shadow: 0 10px 30px rgba(0,0,0,.06);

  /* Tier 2 — editorial / storytelling pages (cities, audience hubs, reviews, events).
     Tokens defined here so blocks shared between tiers can reference them; the
     bulk of Tier 2 visual treatment lives in /assets/css/editorial.css, loaded
     conditionally via _head.php for page_type in city/audience/reviews/event. */
  --teal:      #51ABB2;
  --hairline:  #ECECEC;
  --soft:      #F6F6F6;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --t2-hero-bg: linear-gradient(135deg, #1f1a16 0%, #3a2e26 40%, #5a4538 100%);
  --t2-hero-vignette: radial-gradient(80% 60% at 50% 0%, transparent, rgba(0,0,0,.4) 100%);
}

/* ── Utility classes ── */
.sr-only{ position: absolute; left: -9999px; opacity: 0; }
.full-bleed{ margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); width: calc(100% + 2 * var(--pad)); }
.cta-final__layer{ position: relative; z-index: 2; }

/* ── Shared typography ── */
/* Block title: large responsive heading (7 blocks share this) */
.vg-head__title,
.gd-heading,
.smoke-px__title,
.fog-px__title,
.fb-showcase__title,
.hiw-head__title{
  font-size: clamp(41px, 10.5vw, 56px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .025em;
  line-height: 1.1;
}
/* Block title variant B: slightly smaller (bento, lead form) */
.bt-head__title,
.lead-form__title{
  font-size: clamp(38px, 9vw, 56px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.1;
}
/* Step/card title: small bold heading */
.rsv-m__title,
.hiw-m__title{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
/* Step/card description: muted body text */
.rsv-m__desc,
.hiw-m__desc,
.bt-card__desc,
.evt-card__desc,
.os-card__desc{
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* Global reset / base */
*, *::before, *::after{ box-sizing:border-box; }
html {
  /* Повертаємо height: 100%, це стабільна база */
  height: 100%;
  background: var(--bg); 

  /* iOS (Safari/Chrome/WebView): prevent unwanted text scaling on orientation/UI changes */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {

    min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  background: var(--bg);

  position: relative; /* Додає стабільності контексту */

  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

a{ color:inherit; text-decoration:none; }

/* Mobile: reduce accidental double-tap zoom on interactive elements */
a, button{ touch-action: manipulation; }

/* Safety: ensure the native HTML `hidden` attribute always wins.
   (Prevents conflicts when components set display via classes like .btn{display:flex}.) */
[hidden]{ display:none !important; }

/* Layout */
.container{
  max-width: 430px;
  margin: 0 auto;
  padding: 22px var(--pad) 30px;
  overflow-x: hidden;
}

.stack{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.stickybar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  padding: 10px 12px 10px;
  border-top: 1px solid rgba(0,0,0,.08);

  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.stickyinner{
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
}



/* Spacer to avoid content hidden under sticky bar */
.bottom-spacer{
  height: calc(var(--sticky-h) + 10px + env(safe-area-inset-bottom));
}

/* Titles */
.h1{
  font-size: 40px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align:center;
  margin: 10px 0 18px;
}

.h2{
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align:center;
  margin: 8px 0 16px;
}

.step-subtitle{
  text-align:center;
  font-size:13px;
  color:rgba(0,0,0,.45);
  margin:16px 0 0;
  line-height:1.4;
  border:1px dashed rgba(0,0,0,.12);
  border-radius:16px;
  padding:10px 20px;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.step-subtitle__shipping{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:600;
  color:#1a8d3e;
}
.step-subtitle__shipping[hidden]{ display:none; }
.step-subtitle__check{
  flex-shrink:0;
  vertical-align:middle;
}

.section-title{
  text-align:center;
  font-weight: 800;
  margin: 18px 0 10px;
}

/* Cards */
.card{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.hero-card{ border-radius: 24px; }

.card-media{
  width:100%;
  aspect-ratio: 3 / 4;
  background:#EEE;
  display:block;
  object-fit:cover;
}
picture.card-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.card-title{
  padding: 16px 16px 18px;
  text-align:center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Buttons */
.btnbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 14px;
}

.btn{
  width:100%;
  height:54px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.00);
  background:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

.btn-primary{
  color: var(--blue);
  background: rgba(255,255,255,.92);
}

.btn-wa{
  background: var(--wa);
  color:#fff;
}

/* slightly smaller inside sticky bar */
.stickyinner .btn{
  min-height: 56px;          /* під твій дизайн */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}




/* Focus (keyboard) — safe addition */
.btn:focus-visible,
.acc-btn:focus-visible,
.mini:focus-visible,
.back:focus-visible,
.input:focus-visible{
  outline: 2px solid rgba(0,122,255,.35);
  outline-offset: 2px;
}

/* Info card (accordion content) */
.info-card{
    margin-top: 20px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
  color: var(--muted);
}

.info-card h3{
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text); /* щоб не було синього */
}

/* p + li однакові */
.info-card p,
.info-card li{
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
}

/* bullets не фарбуємо окремо */
.info-card .bullets{
    margin: 12px 0;
    padding-left: 16px;
    color: inherit; }


/* жирний текст у info-card НЕ має свого кольору */
.info-card strong,
.info-card b{
  color: inherit;
  font-weight: 600;
}

/* images inside info-card: ONLY direct images (not sliders) */
.info-card > img:not(.video-thumb):not(.yt-thumb){
  width:100%;
  display:block;
  margin-top: 12px;
  border-radius: 16px;
  object-fit: cover;
}

/* Form */
.form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 10px;
}

.input{
  width:100%;
  height:46px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.60);
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  outline:none;
}

.input::placeholder{ color:#9A9A9A; }

.row{
  display:flex;
  gap:10px;
}

.hours-wrap{
  position:relative;
  flex:1;
}

.hours-controls{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:8px;
}

.mini{
  width:36px;
  height:30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.9);
  font-weight: 800;
  cursor:pointer;
}

.note{
  text-align:center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 6px;
}

/* Top bar (service pages) */
.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin: 6px 0 10px;
}

.back{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
}

/* Accordion */
.acc-btn{
  width:100%;
  height:44px;
  border-radius:999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 15px;
  cursor:pointer;

  font-weight: 400;
  color: rgba(17,17,17,.80);

  transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .12s ease;
}

.acc-btn:active{ transform: scale(.99); }

/* Кнопка в активному стані: не зникає з потоку */
.acc-btn.is-active{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
}
/* Панель */
.acc-panel{
  height: 0;
  overflow: hidden;
  opacity: 0;

  margin-top: 0;
  margin-bottom: calc(-1 * var(--gap)); /* КЛЮЧ: забирає зайвий gap від panel до наступної кнопки */

  transition:
    height .38s cubic-bezier(.22,1,.36,1),
    opacity .22s ease,
    margin-top .38s cubic-bezier(.22,1,.36,1),
    margin-bottom .22s ease;

  overflow-anchor: none;
  pointer-events: none;
}


/* Відкрита панель: стає на місце кнопки */
.acc-panel.is-open{
  opacity: 1;
  margin-top: calc(-44px - var(--gap));
  margin-bottom: 0;              /* повертаємо нормальний відступ */
  pointer-events: auto;
}

/* ===== GRAN DÍA (selling points section) ===== */
.gd-block{
  padding: 32px 28px 36px;
  overflow: visible;
  text-align: center;
}
.gd-block.card{
  border-radius: 0;
  box-shadow: none;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  width: calc(100% + 2 * var(--pad));
  max-width: none;
  background: var(--card);
}
.gd-block + .vg-block{
  margin-top: calc(-1 * var(--gap));
}
/* No-topbar: no gap at top */
.site-no-topbar .container.stack{
  padding-top: 0;
}
.page-home .container.stack{
  --gap: 80px;
}
/* City pages end with the pricing block, which has its own beige
   background. The default .container { padding-bottom: 30px } leaves
   a white strip between the beige pricing card and the white footer
   — kill it so the two sections meet flush. */
body.page-type-city main.container.stack{
  padding-bottom: 0;
}
@media (max-width: 767px){
  .page-home .fb-showcase{ margin-top: -50px; }
  .page-home .smoke-px{ margin-top: -50px; }
  .page-home .fog-px{ margin-top: -15px; }
  .page-home .gd-block{ margin-top: -50px; }
  .page-home #video_slider-24 .vg-head{ margin-bottom: 40px; }
  .page-home #how_it_works{ margin-top: -60px; }
  .page-home #presupuesto{ margin-top: -60px; }
  .page-home #faq{ margin-top: -40px; }
  .page-home #trust{ margin-top: -60px; }
  .page-home #trust .vg-head__title{
    font-size: clamp(41px, 10.5vw, 56px);
    letter-spacing: .025em;
    line-height: 1.1;
    max-width: 10ch;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px){
  .page-home #event_types{ margin-top: 40px; }
  .page-home #smoke_parallax{ margin-top: -10px; }
}
.page-home .gd-col--center{
  width: 100%;
  flex: 1 1 100%;
}
.page-home .gd-col--left,
.page-home .gd-col--right{
  display: none;
}
.page-home .gd-block{
  border-radius: 0;
  box-shadow: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 32px 28px 36px;
}

.gd-photo{
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 24px auto 0;
  border-radius: var(--radius);
}
.gd-photo--mobile{
  display: block;
}
@media (min-width: 768px){
  .gd-photo--mobile{ display: none; }
}
.gd-subtitle{
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.gd-heading{
  /* typography via shared selector above */
  font-style: normal;
  margin: 0;
}

/* List */
.gd-list{
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 24px;
}

.gd-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: left;

  /* slide-from-left reveal */
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.gd-item::before{
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  margin-top: 11px;
}
.gd-item:last-child{
  border-bottom: none;
  padding-bottom: 4px;
}
.gd-item.is-visible{
  opacity: 1;
  transform: translateX(0);
}

/* Legacy — hide if still in DOM */
.gd-num{ display: none; }

.gd-body{
  padding-top: 4px;
}

.gd-body strong{
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.25;
}

.gd-body p{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ===== RESERVA STEPPER ===== */
.rsv-block{
  padding: 32px 28px 36px;
  overflow: visible;
}

.rsv-head{
  margin-bottom: 42px;
  text-align: center;
}
.rsv-head__title{
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* ── Desktop: horizontal stepper (hidden on mobile) ── */
.rsv-desktop{
  display: none;
}

/* ── Mobile: vertical timeline ── */
.rsv-mobile{
  display: flex;
  flex-direction: column;
}

.rsv-m{
  display: flex;
  gap: 16px;
  position: relative;

  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.rsv-m.is-visible{ opacity: 1; transform: translateX(0); }

.rsv-m__left{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.rsv-m__dot{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #e5e5ea;
  background: #f5f5f7;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #aaa;
  flex-shrink: 0;
}

.rsv-m__line{
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: #e5e5ea;
  margin: 4px 0;
}
.rsv-m:last-child .rsv-m__line{ display: none; }

.rsv-m__body{ padding-bottom: 24px; padding-top: 4px; }
.rsv-m__title{ /* typography via shared selector */ margin-bottom: 4px; }
.rsv-m__desc{ /* typography via shared selector */ line-height: 1.55; }

/* ── Mobile done / active states ── */
.rsv-m__dot svg{ width: 14px; height: 14px; display: none; }
.rsv-m.done .rsv-m__dot{
  background: #34c759;
  border-color: #34c759;
  color: #fff;
}
.rsv-m.done .rsv-m__dot span{ display: none; }
.rsv-m.done .rsv-m__dot svg{ display: block; }
.rsv-m.done .rsv-m__line{ background: #34c759; }

.rsv-m.active .rsv-m__dot{
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(29,29,31,.1);
}

/* ── Note ── */
.rsv-note{
  border-top: 1px solid #f0f0f2;
  padding-top: 20px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.rsv-note b{ color: var(--text); }

/* ===== VIDEO BLOCKS (use slider system) ===== */
.vg-block{
  overflow: hidden;
  padding: 20px 0 24px;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  width: calc(100% + 2 * var(--pad));
  background: #fff;
}
.vg-head{ margin-bottom: 60px; text-align: center; }
.photo-samples .tabsbar{ margin-top: 22px; }
.vg-head__title{
  /* typography via shared selector above */
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .vg-head__title{ max-width: none; }
}

/* Video slides — 2:3 portrait with play button + captions
   Use .slide.vg-slide for higher specificity to beat
   generic .slide img / .slider--hero .slide img rules */
.slide.vg-slide{
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 2 / 3;
  scroll-snap-align: start;
  /* scale/opacity like hero slides: dimmed by default */
  opacity: .7;
  transform: scale(.94);
  transition: opacity .35s ease, transform .35s ease;
}
.slide.vg-slide.is-active{
  opacity: 1;
  transform: scale(1);
}

/* No-topbar: video slides almost full-width */
.site-no-topbar .slider--hero .slide.vg-slide{
  flex: 0 0 calc(100vw - 50px);
  opacity: .5;
  transform: scale(.96);
  border-radius: 20px;
}
.site-no-topbar .slider--hero .slide.vg-slide.is-active{
  opacity: 1;
  transform: scale(1);
}
.slide.vg-slide img,
.slider--hero .slide.vg-slide img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: transparent;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  box-shadow: none !important;
  transform: scale(1.2);
}
.slide.vg-slide video{
  opacity: 0;
  transition: opacity .3s ease;
}
.slide.vg-slide .yt-play{
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: opacity .3s ease;
  color: #111;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
  z-index: 2;
}
/* Caption overlay — gradient at bottom */
.vg-caption{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 48px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.vg-caption strong{ font-size: 14px; font-weight: 700; }
.vg-caption span{ font-size: 12px; opacity: .8; }
/* Mobile only: show caption on active slide */
@media (max-width: 1023px){
  .slide.vg-slide.is-active .vg-caption{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop: hover + random focus effects */
@media (min-width: 1024px){
  /* When track is hovered — dim all */
  .vg-block .slider--hero .slider-track:hover .slide.vg-slide{
    opacity: .55;
    transform: scale(.94);
  }
  /* Highlight only hovered slide */
  .vg-block .slider--hero .slider-track:hover .slide.vg-slide:hover{
    opacity: 1;
    transform: scale(1);
  }
  /* Override active when track is hovered */
  .vg-block .slider--hero .slider-track:hover .slide.vg-slide.is-active{
    opacity: .55;
    transform: scale(.94);
  }
  .vg-block .slider--hero .slider-track:hover .slide.vg-slide.is-active:hover{
    opacity: 1;
    transform: scale(1);
  }
  /* Random focus (JS-driven): dim non-focused */
  .slide.vg-slide.is-focus{
    opacity: 1;
    transform: scale(1);
  }
  .vg-block:not(:hover) .slide.vg-slide.is-focus ~ .slide.vg-slide:not(.is-focus),
  .vg-block:not(:hover) .slide.vg-slide:not(.is-focus){
    opacity: .55;
    transform: scale(.94);
  }
  .vg-block:not(:hover) .slide.vg-slide.is-focus{
    opacity: 1;
    transform: scale(1);
  }
  /* Caption: on hover or focus */
  .slide.vg-slide:hover .vg-caption,
  .slide.vg-slide.is-focus .vg-caption{
    opacity: 1;
    transform: translateY(0);
  }
  /* Hide caption from active when something else is focused/hovered */
  .vg-block .slider--hero .slider-track:hover .slide.vg-slide.is-active:not(:hover) .vg-caption{
    opacity: 0;
    transform: translateY(8px);
  }
  .slide.vg-slide:hover .yt-play,
  .slide.vg-slide.is-focus .yt-play{
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 28px rgba(0,0,0,.35);
  }
}

/* ── Video Modal ── */
/* ===== VIDEO MODAL (dm-style bottom sheet) ===== */
.vg-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;              /* prevent overlay from scrolling — sheet handles its own scroll */
  transition: opacity .3s ease;
}
.vg-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.vg-modal__backdrop{
  position: absolute;
  inset: 0;
}
/* Sheet — dm-style white bottom sheet */
.vg-modal__wrap{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-width: 480px;
  height: 96vh;                /* explicit height so flex children fill space */
  height: 96dvh;
  overflow: hidden;            /* no scroll — video shrinks to fit */
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  z-index: 2;
}
.vg-modal__wrap::-webkit-scrollbar{ display: none; }
.vg-modal__wrap.is-dragging{ transition: none; }
.vg-modal.is-open .vg-modal__wrap{
  transform: translateY(0);
}
/* Handle — grey pill */
.vg-modal__handle{
  display: flex;
  justify-content: center;
  padding: 14px 0 0;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}
.vg-modal__handle span{
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d2d2d7;
}
/* Topbar — centered title + close button right */
.vg-modal__topbar{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px 0;
}
.vg-modal__topbar-title{
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}
/* Close button — grey circle with X (dm-style) */
.vg-modal__close{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f5f7;
  border: 2px solid #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a3c;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .15s;
}
.vg-modal__close:hover{ background: #e5e5ea; }
/* Description */
.vg-modal__desc{
  font-size: 13px;
  color: #6e6e73;
  line-height: 1.3;
  padding: 6px 20px 0;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-modal__desc:empty{ display: none; }
.vg-modal__desc b{ color: #1d1d1f; }
/* Video container — fills remaining space in flex sheet */
.vg-modal__video-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;               /* allow shrinking below content size */
  margin: 10px 16px 16px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.vg-modal__player{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vg-modal__player iframe,
.vg-modal__player video{
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
  display: block;
}
/* Swipe capture layer over video — catches touch for swipe-to-close */
.vg-modal__swipe-zone{
  position: absolute;
  inset: 0;
  z-index: 1;    /* above player, below nav arrows */
}
/* Desktop: remove swipe zone so clicks reach video */
@media (min-width: 600px){
  .vg-modal__swipe-zone{ display: none; }
}
/* Nav arrows on video — hidden mobile, shown desktop */
.vg-modal__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.16);
  z-index: 2;
  font-size: 18px;
  color: #1d1d1f;
  transition: background .15s;
}
.vg-modal__nav:hover{ background: #fff; }
.vg-modal__nav--prev{ left: 6px; }
.vg-modal__nav--next{ right: 6px; }
/* Legacy info block — unused, data moved to topbar+desc */
.vg-modal__info{ display: none; }

/* Desktop: centered sheet */
@media (min-width: 600px){
  .vg-modal{ align-items: center; padding: 24px; }
  .vg-modal__wrap{
    border-radius: 28px;
    max-width: 420px;
    height: auto;              /* reset: let content define height */
    max-height: 92vh;
  }
  .vg-modal__video-wrap{
    aspect-ratio: 9 / 16;     /* restore fixed ratio on desktop */
    flex: none;
  }
  .vg-modal__handle{ display: none; }
  .vg-modal__nav{ display: flex; }
  .vg-modal__video-wrap{
    margin: 16px 20px 24px;
    border-radius: 20px;
  }
}

/* ===== BENTO GRID (services overview) ===== */
.bt-block{ overflow: visible; }
.momentos-slider + .bt-block{ margin-top: -60px; }
.bt-head{ margin-bottom: 60px; text-align: center; }
.bt-head__title{ /* typography via shared selector above */ }
.bt-head__sub{ font-size: 13px; color: #aaa; margin-top: 4px; }

/* Mobile: horizontal rows (image left, info right) */
.bt-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bt-card{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.bt-card.is-visible{ opacity: 1; transform: translateY(0) scale(1); }
.bt-card:hover{ box-shadow: 0 10px 36px rgba(0,0,0,.1); }
.bt-card:hover .bt-card__img img{ transform: scale(1.04); }
.bt-card:active{ transform: scale(.97); }

/* tall modifier — no special treatment on mobile rows */
.bt-card--tall{ grid-column: auto; }

.bt-card__img{
  position: relative;
  overflow: hidden;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 12px;
  margin: 8px;
}
.bt-card__img img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bt-card--fondo .bt-card__img img{ object-fit: contain; }

.bt-card__info{
  flex: 1;
  min-width: 0;
  padding: 12px 14px 12px 4px;
}
.bt-card__tag{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0071e3;
  margin-bottom: 4px;
}
.bt-card__name{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.2;
}
.bt-card__desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bt-card__badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f5f5f7;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  color: #3a3a3c;
  margin-top: 5px;
  width: fit-content;
}

/* ===== TILE OVERLAY (fly-to-center) ===== */
.tile-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
.tile-overlay.is-open{
  pointer-events: auto;
  visibility: visible;
}

.tile-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.40);
  opacity: 0;
  transition: opacity .3s ease;
}
.tile-overlay.is-open .tile-overlay__backdrop{ opacity: 1; }

.tile-overlay__panel{
  position: relative;
  width: calc(100% - 24px);
  max-width: 430px;
  max-height: calc(100dvh - 40px);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  opacity: 0;
  transform: scale(.6);
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.tile-overlay.is-open .tile-overlay__panel{
  opacity: 1;
  transform: scale(1);
}
.tile-overlay.is-flying .tile-overlay__panel{
  transition: none;
}

.tile-overlay__head{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.tile-overlay__close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tile-overlay__body{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Panels inside overlay: reset accordion collapse */
.tile-overlay__body .acc-panel{
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Info-card inside overlay: no border, slider/video on top, text below */
.tile-overlay__body .info-card{
  border: none;
  background: none;
  padding: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
.tile-overlay__body .info-card .slider{ order: -1; margin-top: 0; margin-bottom: 12px; }

body.tile-lock{
  overflow: hidden;
  touch-action: none;
}
html.tile-lock{
  overflow: hidden;
}
body.tile-lock .stickybar{ display: none; }

/* Hide acc-panel when bento grid is present (panels shown via overlay) */
.bt-block ~ .acc-panel{ display: none; }

/* ===== DISEÑO MODAL (bottom sheet carousel) ===== */
.dm-overlay{
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  overflow: hidden;
  transition: opacity .3s ease;
}
.dm-overlay.is-open{ opacity: 1; pointer-events: all; }

.dm-sheet{
  background: #fff;
  border-radius: 28px 28px 0 0;
  width: 100%; max-width: 480px;
  max-height: 96dvh;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  scrollbar-width: none;
  /* Ensure sheet is flush to viewport bottom */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dm-sheet::-webkit-scrollbar{ display: none; }
.dm-overlay.is-open .dm-sheet{ transform: translateY(0); }
.dm-sheet.is-dragging{ transition: none; }

.dm-handle{
  width: 36px; height: 4px; background: #d2d2d7;
  border-radius: 2px; margin: 14px auto 0;
}

.dm-topbar{
  position: relative; display: flex;
  align-items: center; width: 100%;
  padding: 14px 16px 0;
}
.dm-topbar__title{
  flex: 0 0 auto;
  font-size: 15px; font-weight: 700; color: #1d1d1f;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.dm-topbar__close{
  width: 32px; height: 32px; border-radius: 50%;
  background: #f5f5f7; border: 2px solid #e5e5ea;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #3a3a3c; cursor: pointer;
  margin-left: auto; flex-shrink: 0;
  transition: background .15s;
}
.dm-topbar__close:hover{ background: #e5e5ea; }

.dm-desc{
  font-size: 13px; color: #6e6e73; line-height: 1.65;
  padding: 10px 20px 0; text-align: center;
}
.dm-desc b{ color: #1d1d1f; }

/* carousel */
.dm-carousel-wrap{ position: relative; margin-top: 16px; }
.dm-carousel{
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 16px 24px 28px;
  scrollbar-width: none;
}
.dm-carousel::-webkit-scrollbar{ display: none; }

.dm-slide{
  flex: 0 0 auto;
  scroll-snap-align: center;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  opacity: .7; transform: scale(.93);
  transition: opacity .3s, transform .3s;
}
.dm-slide.active{ opacity: 1; transform: scale(1); }
.dm-slide img{ display: block; object-fit: cover; }
.dm-slide.strip img{ width: 110px; height: 330px; }
.dm-slide.print img{ width: 220px; height: 330px; }
.dm-slide.fondo{ box-shadow: none; }
.dm-slide.fondo img{ width: 180px; height: 180px; }
.dm-slide.album{ border-radius: 16px; }
.dm-slide.album img{ width: 180px; height: 180px; }

/* arrows */
.dm-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.16); z-index: 2;
  font-size: 18px; color: #1d1d1f;
  transition: background .15s;
}
.dm-arrow:hover{ background: #fff; }
.dm-arrow--prev{ left: 4px; }
.dm-arrow--next{ right: 4px; }

/* caption */
.dm-caption{
  padding: 16px 20px 0;
  height: 100px; overflow: hidden;
  transition: opacity .22s ease, transform .22s ease;
}
.dm-caption.fading{ opacity: 0; transform: translateY(4px); }
.dm-caption__row{
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px;
}
.dm-caption__label{
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #0071e3;
}
.dm-caption__count{
  font-size: 11px; color: #aaa; font-weight: 500;
}
.dm-caption__title{
  font-size: 17px; font-weight: 700; color: #1d1d1f;
  margin-bottom: 4px; line-height: 1.2;
}
.dm-caption__desc{
  font-size: 13px; color: #6e6e73; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* dots */
.dm-dots{
  display: flex; justify-content: center; gap: 5px;
  padding: 14px 0 22px;
}
.dm-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: #d2d2d7; transition: background .2s, width .2s;
}
.dm-dot.on{ background: #1d1d1f; width: 16px; border-radius: 3px; }

/* desktop: center modal */
@media (min-width: 600px){
  .dm-overlay{ align-items: center; padding: 24px; }
  .dm-sheet{ border-radius: 28px; max-width: 720px; max-height: 92vh; }
  .dm-slide.fondo img{ width: 320px; height: 320px; }
  .dm-slide.album{ border-radius: 20px; }
  .dm-slide.album img{ width: 320px; height: 320px; }
}

/* Slider (lightweight) */
.slider{
  position: relative;
  margin-top: 12px;
}
.slide video{
  background:#000;
  display:block;
}

.slider-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:smooth;
  padding: 4px 2px 6px;
  border-radius: 18px;
}

.slider-track::-webkit-scrollbar{ display:none; }

.slide{
  flex: 0 0 88%;
  scroll-snap-align:center;
  margin:0;
}

.slide img{
  width:100%;
  aspect-ratio: 1 / 1;    /* завжди квадратний блок */
  height: auto;
  object-fit: contain;    /* не обрізати */
  border-radius: 18px;
  display:block;
  background:#EEE;
}

.slider-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  font-weight: 800;
  cursor:pointer;
  z-index: 2;
}

.slider-btn.prev{ left: 8px; }
.slider-btn.next{ right: 8px; }

@media (max-width: 360px){
  .slide{ flex-basis: 92%; }
  .slide img{ height: 210px; }
}

/* ---- Hero gallery (Momentos reales) ---- */
.slider--hero .slider-track{ padding: 8px 10% 28px; gap: 10px; }
.slider--hero .slide{
  flex: 0 0 80%;
  scroll-snap-align: center;
  opacity: .7;
  transform: scale(.94);
  transition: opacity .35s ease, transform .35s ease;
}
.slider--hero .slide.is-active{
  opacity: 1;
  transform: scale(1);
}
.slider--hero .slide img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}

.slider-dots{
  display: flex; justify-content: center; gap: 5px;
  padding: 12px 0 2px;
}
.slider-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: #d2d2d7; border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, width .2s, border-radius .2s;
}
.slider-dot.active{
  background: #1d1d1f; width: 16px; border-radius: 3px;
}

/* Video preview box (local videos) */
.video-box{
  position: relative;
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  background: #EEE;

  aspect-ratio: 9 / 16; /* ширина 3, висота 4 */
  display:block;
  cursor:pointer;
}

.video-thumb{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  background:#EEE;
}

.video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:56px;
  height:56px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
}

.video-box iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* YouTube thumbs (single preview blocks) */
.yt-thumb{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.yt-play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:56px;
  height:56px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
}

/* ===== YouTube slider: previews fill the slide (deduplicated) ===== */
[data-yt-slider] .slider-track{ align-items: stretch; }

[data-yt-slider] .slide{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* container of one preview (shorts-like) */
[data-yt-slider] .yt-card,
.yt-card{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: transparent !important;
  line-height: 0;
  font-size: 0;
}

/* preview image / iframe should fill container */
[data-yt-slider] .yt-card img,
[data-yt-slider] .yt-card iframe,
.yt-card img,
.yt-card iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* IMPORTANT: cover to avoid grey bars */
[data-yt-slider] .yt-card img,
.yt-card img{ object-fit: cover; }

/* if thumbs used directly inside yt slider */
[data-yt-slider] .yt-thumb{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* Spacer to avoid content hidden under sticky bar */

/* ===== HP-INCLUDES (legacy checklist — used by efecto-laser etc.) ===== */
.hp-price-title{
  text-align: center;
  margin: 22px 0 12px;
  font-weight: 700;
}
.hp-checklist{
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-checklist li{
  position: relative;
  padding-left: 1.7em;
  margin: 0.55em 0;
  line-height: 1.35;
  font: inherit;
  color: var(--muted);
}
.hp-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.hp-checklist li.reveal-item{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: calc(var(--i, 0) * 220ms);
}
.hp-checklist li.reveal-item.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ===== HP-INCLUDES (Apple-style pricing block — fotomaton) ===== */
.hp-inc-hd{
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.hp-inc-hd.is-visible{ opacity: 1; transform: translateY(0); }

.hp-inc-hd h3{
  font-size: clamp(38px, 9vw, 56px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--text);
}

/* Grid */
.hp-inc-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.hp-inc-card{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  cursor: default;
  user-select: none;
  border: none;
  text-align: left;

  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition:
    opacity   .5s cubic-bezier(.25,.46,.45,.94),
    transform .5s cubic-bezier(.25,.46,.45,.94),
    box-shadow .25s ease;
}
.hp-inc-card.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hp-inc-card:hover{
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
}
.hp-inc-card:active{
  transform: scale(.98);
  transition: transform .1s;
}

.hp-inc-card--wide{ grid-column: 1 / -1; }

.hp-inc-inner{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* SVG check icon */
.hp-inc-icon{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #e6f9ec;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.hp-inc-card:hover .hp-inc-icon{ transform: scale(1.15); }

.hp-check-svg{ width: 36px; height: 36px; display: block; }

.hp-check-circle{
  fill: none;
  stroke: #34c759;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .5s ease;
}
.hp-check-tick{
  fill: none;
  stroke: #34c759;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset .35s ease .35s;
}
.hp-inc-card.is-visible .hp-check-circle{ stroke-dashoffset: 0; }
.hp-inc-card.is-visible .hp-check-tick{ stroke-dashoffset: 0; }

.hp-inc-body{ flex: 1; min-width: 0; }

.hp-inc-title{
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  margin-bottom: 3px;
  line-height: 1.25;
}
.hp-inc-desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* Ripple */
.hp-inc-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(0,113,227,.12);
  transform: scale(0);
  animation: hp-inc-ripple .5s linear forwards;
  pointer-events: none;
}
@keyframes hp-inc-ripple{
  to{ transform: scale(5); opacity: 0; }
}

@media (max-width: 520px){
  .hp-inc-grid{ grid-template-columns: 1fr; }
}

.timeline{
    margin-top: 30px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.tl-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  position: relative;
}

.tl-dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 800;
  flex: 0 0 28px;
  position: relative;
  z-index: 1;
}

.tl-item:not(.tl-last) .tl-dot::after{
  content:"";
  position:absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 10px);
  background: rgba(0,0,0,.10);
  border-radius: 2px;
}

.tl-body{
  padding-top: 2px;
}

.tl-title{
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 2px;
}

.tl-text{
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.tl-note{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
/* Reveal on scroll блок з процедурою бронювання */
/* by default content is visible */
.reveal{
  opacity: 1;
  transform: none;
}

/* animation only when JS enabled */
.js .reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .js .reveal{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ── Eventos en 2025 — counter strip ── */
.ev25-block {
  text-align: center;
  padding: 48px 24px;
}

.ev25-head {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 42px;
}

.ev25-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 12px;
  max-width: 540px;
  margin: 0 auto;
}

.ev25-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ev25-num {
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}

.ev25-num .counter {
  position: relative;
}

.ev25-num .counter::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateX(100%) translateY(-50%);
  font-size: .65em;
  opacity: .45;
  margin-left: 1px;
}

.ev25-city {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}

.ev25-total {
  margin-top: 36px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -.01em;
}

.reviews-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.g-reviews-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.g-reviews-link--spaced{ margin-top: 8px; }

.g-stars{
  letter-spacing: 1px;
  font-size: 13px;
  opacity: .95;
}

.g-link-text{
  color: var(--muted);
}

/* ── Slider modifier: 4×3 landscape slides (reusable) ── */
.slider--4x3 .slide img{
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
@media (min-width: 1024px){
  .slider--hero.slider--4x3 .slide{
    flex: 0 0 24%;
  }
  /* Hover: dim all (incl. active), highlight hovered */
  .slider--hero.slider--4x3 .slider-track:hover .slide,
  .slider--hero.slider--4x3 .slider-track:hover .slide.is-active{
    opacity: .55;
    transform: scale(.94);
  }
  .slider--hero.slider--4x3 .slider-track:hover .slide:hover{
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Slider modifier: 2×3 portrait slides (reusable) ── */
.slider--2x3 .slide img{
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 16px;
  background: #f0f0f0;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}
@media (min-width: 1024px){
  .slider--hero.slider--2x3 .slide{
    flex: 0 0 23%;
  }
  .slider--hero.slider--2x3 .slider-track:hover .slide,
  .slider--hero.slider--2x3 .slider-track:hover .slide.is-active{
    opacity: .55;
    transform: scale(.94);
  }
  .slider--hero.slider--2x3 .slider-track:hover .slide:hover{
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Tabs inside vg-head (pill style) ── */
.vg-head .tabsbar{
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 10px;
}
.tab-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: 100px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all .2s ease;
  user-select: none;
}
.tab-pill.is-active{
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

/* Tab panels */
.photo-samples .tab-panel{ display: none; }
.photo-samples .tab-panel.is-active{ display: block; }

/* ── Q&A accordion (FAQ block) ──
   Used by inc/blocks/faq.php as <details class="qa__item">. Native <details>/[open]
   handles open-state, keyboard, and a11y without JS. Replaces the 2024 .faq button
   accordion universally — every page rendering the faq block picks this up. */
.qa{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.qa__item{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.qa__item > summary{
  cursor: pointer;
  list-style: none;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.qa__item > summary::-webkit-details-marker{ display: none; }
.qa__item > summary::marker{ content: ""; }
.qa__num{
  flex: 0 0 28px;
  height: 28px;
  border-radius: 999px;
  background: #F1EFEC;
  color: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.qa__q{ flex: 1; min-width: 0; }
.qa__plus{
  position: relative;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex: 0 0 30px;
  color: #222;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
/* "+" drawn as two crossed bars instead of a text glyph — guarantees
   the icon is perfectly centred in the round button. When .qa__item is
   open we rotate the whole .qa__plus 45° so the cross becomes an ×. */
.qa__plus::before,
.qa__plus::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
}
.qa__plus::before{ width: 2px; height: 12px; transform: translate(-50%, -50%); }
.qa__plus::after { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.qa__item[open] .qa__plus{
  transform: rotate(45deg);
  background: #111;
  border-color: #111;
  color: #fff;
}
.qa__body{
  padding: 0 24px 22px 70px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #444;
}
.qa__body strong{ color: var(--text); font-weight: 600; }
.qa__body p{ margin: 0 0 12px; }
.qa__body p:last-child{ margin-bottom: 0; }
@media (max-width: 600px){
  .qa__item > summary{ padding: 18px 18px; gap: 14px; font-size: 15px; }
  .qa__body{ padding: 0 18px 18px 60px; font-size: 14px; }
}


/* Tabs (pill style like Google link) 
ФОТО 4/5

*/


/* (old .photo-samples tab styles removed — now in .vg-head .tabsbar + .tab-pill) */

/* 9:16 slider override */
.slider.is-9x16 .slider-track{
  overflow-y: hidden;          /* щоб не було вертикального “внутрішнього” скролу */
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

.slider.is-9x16 .slide{
  flex: 0 0 auto;
  width: clamp(240px, 78vw, 340px);
  overflow: hidden;
  scroll-snap-align: start;
}

.slider.is-9x16 .slide img,
.slider.is-9x16 .slide video{
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 18px;

  -webkit-user-drag: none;
  user-select: none;
}



/* ── Trust stats grid ── */
.trust-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.trust-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  text-align: center;
}
.trust-stat__row{
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-stat__icon{
  font-size: 18px;
  line-height: 1;
}
.trust-stat__value{
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.trust-stat__plus{
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
}
.trust-stat__label{
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.2;
}
/* Hide specific trust stat on mobile */
@media (max-width: 767px){
  .trust-stat.hide-mobile{ display: none; }
}

/* wrapper so arrows position correctly */
#trustBlock,
#otherServices{ overflow: visible; }

/* ── Other services grid (matches Opciones style) ── */
.os-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.os-card{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
}
.os-card:hover{
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
}
.os-card:active{ transform: scale(.98); }
.os-card__img{
  position: relative;
  overflow: hidden;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 12px;
  margin: 8px;
}
.os-card__img picture,
.os-card__img img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.os-card__img picture img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.os-card:hover .os-card__img img{ transform: scale(1.04); }
.os-card__info{
  flex: 1;
  min-width: 0;
  padding: 14px 14px 14px 4px;
}
.os-card__name{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.2;
}
.os-card__desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Final CTA block ── */
.cta-final{ overflow: hidden; text-align: center; padding: 60px 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; position: relative; }
@media (min-width: 768px){ .cta-final{ min-height: 420px; padding: 80px 0 96px; } }
.cta-final__sub{
  font-size: 15px;
  color: var(--muted);
  margin: 8px 0 0;
  font-weight: 400;
}
.cta-final__actions{
  justify-content: center;
}
.cta-final__note{
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ── Falling photo strips ── */
.cta-strips{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.cta-strips picture{
  display: contents;
}
.cta-strip{
  position: absolute;
  top: -40%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  object-fit: cover;
  opacity: 0;
  transform: rotate(0deg);
  will-change: transform, opacity;
}
/* When NOT animating, strips stay invisible via opacity:0 above.
   When animating, the animation fully controls opacity & transform. */

@keyframes sf1{ 0%{opacity:0;transform:translateY(0) rotate(-6deg)} 8%{opacity:.375} 85%{opacity:.375} 100%{opacity:0;transform:translateY(520px) rotate(-6deg)} }
@keyframes sf2{ 0%{opacity:0;transform:translateY(0) rotate(4deg)}  8%{opacity:.34}  85%{opacity:.34}  100%{opacity:0;transform:translateY(480px) rotate(4deg)}  }
@keyframes sf3{ 0%{opacity:0;transform:translateY(0) rotate(-3deg)} 8%{opacity:.41}  85%{opacity:.41}  100%{opacity:0;transform:translateY(550px) rotate(-3deg)} }
@keyframes sf4{ 0%{opacity:0;transform:translateY(0) rotate(7deg)}  8%{opacity:.32}  85%{opacity:.32}  100%{opacity:0;transform:translateY(500px) rotate(7deg)}  }
@keyframes sf5{ 0%{opacity:0;transform:translateY(0) rotate(-5deg)} 8%{opacity:.36}  85%{opacity:.36}  100%{opacity:0;transform:translateY(540px) rotate(-5deg)} }
@keyframes sf6{ 0%{opacity:0;transform:translateY(0) rotate(2deg)}  8%{opacity:.375} 85%{opacity:.375} 100%{opacity:0;transform:translateY(490px) rotate(2deg)}  }

/* 6 strips — size & position */
.cta-strip--1{ left: 5%;  width: 48px; }
.cta-strip--2{ left: 22%; width: 56px; }
.cta-strip--3{ left: 42%; width: 40px; }
.cta-strip--4{ left: 60%; width: 52px; }
.cta-strip--5{ left: 78%; width: 44px; }
.cta-strip--6{ left: 92%; width: 50px; }

/* Trigger animations when block enters viewport */
.cta-final.is-animating .cta-strip--1{ animation: sf1 6s   linear .2s  forwards; }
.cta-final.is-animating .cta-strip--2{ animation: sf2 7s   linear .8s  forwards; }
.cta-final.is-animating .cta-strip--3{ animation: sf3 5.5s linear 1.4s forwards; }
.cta-final.is-animating .cta-strip--4{ animation: sf4 6.5s linear .5s  forwards; }
.cta-final.is-animating .cta-strip--5{ animation: sf5 7.5s linear 1s   forwards; }
.cta-final.is-animating .cta-strip--6{ animation: sf6 5.8s linear 1.8s forwards; }

/* Desktop: bigger strips, more spread */
@media (min-width: 768px){
  .cta-strip--1{ width: 64px; left: 4%;  }
  .cta-strip--2{ width: 72px; left: 18%; }
  .cta-strip--3{ width: 54px; left: 38%; }
  .cta-strip--4{ width: 68px; left: 58%; }
  .cta-strip--5{ width: 58px; left: 76%; }
  .cta-strip--6{ width: 62px; left: 93%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta-strip{ animation: none !important; opacity: 0 !important; }
}

/* ── Lead Form ── */
/* ── Lead form ── */
.lead-form{
  background: #fff;
  padding: 40px 0 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.lead-form ~ .momentos-slider{
  margin-top: calc(-1 * var(--gap));
}
.lead-form__inner{
  max-width: none;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.lead-form__subtitle{
  /* Small italic eyebrow above the form heading (e.g. "Desde 160 €/hora"). */
  display: block;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: .01em;
}
.lead-form__title{
  /* typography via shared selector above; override font-size so the
     long "Solicita presupuesto" headline doesn't overflow on narrow
     phones (the shared 38px floor was wider than the content box on
     ~375-430px viewports). */
  font-size: clamp(28px, 7.5vw, 56px);
  margin: 0 0 60px;
  overflow-wrap: anywhere;
}
/* Forced linebreak in title (e.g. "Cuéntanos sobre<br>Vuestro Gran
   Día") only matters on narrow viewports — collapse to a single line
   on desktop. */
@media (min-width: 768px) {
  .lead-form__title br { display: none; }
}
.lead-form__badge{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(0, 122, 255, .1);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 6px 0 24px;
}
.lead-form__form{
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lead-form__fields{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lead-form__field{
  position: relative;
}
/* Floating label */
.lead-form__float{
  position: relative;
}
.lead-form__label{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: all .2s ease;
  background: #fff;
  padding: 0 6px;
  line-height: 1;
  white-space: nowrap;
}
.lead-form__float .lead-form__input:focus ~ .lead-form__label,
.lead-form__float .lead-form__input:not(:placeholder-shown) ~ .lead-form__label{
  top: 0;
  left: 18px;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text);
}
.lead-form__float .lead-form__input:focus ~ .lead-form__label{
  color: #51ABB2;
}
/* Phone field: ITI wraps input, label is sibling of .iti */
.lead-form__float .iti ~ .lead-form__label{
  left: 50%;
  transform: translate(-50%, -50%);
}
.lead-form__float.has-value > .lead-form__label,
.lead-form__float.has-focus > .lead-form__label{
  top: 0;
  left: 85px;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text);
}
.lead-form__float.has-focus > .lead-form__label{
  color: #51ABB2;
}
.lead-form__input{
  width: 100%;
  height: 48px;
  padding: 0 18px;
  text-align: center;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: box-shadow .2s;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px #999;
  -webkit-appearance: none;
  appearance: none;
}
/* Override Chrome autofill purple/blue background */
.lead-form__input:-webkit-autofill,
.lead-form__input:-webkit-autofill:hover,
.lead-form__input:-webkit-autofill:focus{
  -webkit-box-shadow: inset 0 0 0 1px #999, 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.lead-form__input:hover{
  box-shadow: inset 0 0 0 1px #111;
}
.lead-form__float:hover .lead-form__label{
  color: #111;
}
.lead-form__input:focus{
  outline: none;
  box-shadow: inset 0 0 0 1px #111;
  background: rgba(81, 172, 179, 0.12);
}
.lead-form__input:focus::placeholder{
  opacity: 0;
}
.lead-form__textarea:focus::placeholder{
  opacity: 0;
}
/* Phone inside .iti: strip input chrome — wrapper owns the pill */
.lead-form .iti .lead-form__input{
  box-shadow: none !important;
  background: transparent !important;
}
.lead-form__input.is-error,
.lead-form__textarea.is-error,
.lead-form .iti.is-error,
.dm-input.is-error,
.dm-form .iti.is-error,
.dm-consent.is-error span{
  box-shadow: inset 0 0 0 1px #FF403F;
  background: rgba(255, 64, 63, 0.12);
}
.dm-consent.is-error span{ border-radius: 6px; padding: 2px 4px; }
/* Lead-form toast */
.lf-toast{
  position: fixed;
  left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(20px);
  z-index: 9000;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(17,24,39,0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  max-width: calc(100vw - 32px);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.lf-toast--show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lead-form__input::placeholder{
  color: #b0b0b0;
  font-weight: 400;
}
/* Date input placeholder trick */
.lead-form__input[type="date"]{
  color: #b0b0b0;
}
.lead-form__input[type="date"].has-value{
  color: var(--text);
}

/* Custom dropdown (event type) */
.lf-dropdown{ position: relative; }
.lf-dropdown__trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  position: relative;
}
.lf-dropdown__label{ color: #b0b0b0; }
.lf-dropdown__label.has-value{ color: var(--text); }
.lf-dropdown__arrow{
  position: absolute;
  right: 18px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #999;
  flex-shrink: 0;
  transition: transform .2s;
}
.lf-dropdown.is-open .lf-dropdown__arrow{
  transform: rotate(180deg);
}
.lf-dropdown__menu{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  overflow: hidden;
  z-index: 20;
  padding: 6px 0;
}
.lf-dropdown.is-open .lf-dropdown__menu{
  display: block;
}
.lf-dropdown__option{
  padding: 10px 18px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.lf-dropdown__option:hover,
.lf-dropdown__option.is-active{
  background: rgba(0,0,0,.04);
}
.lf-dropdown__option.is-selected{
  font-weight: 600;
  color: var(--blue);
}

/* Hours range slider */
.lf-hours{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0;
}
.lf-hours__label{
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.lf-hours__range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #51ABB2 0%, #51ABB2 0%, #ddd 0%, #ddd 100%);
  outline: none;
  cursor: pointer;
}
.lf-hours__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #51ABB2;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .15s;
}
.lf-hours__range::-webkit-slider-thumb:hover{
  transform: scale(1.15);
}
.lf-hours__range::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #51ABB2;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
}
.lf-hours__range::-moz-range-track{
  height: 6px;
  border-radius: 3px;
  background: #ddd;
}
.lf-hours__range::-moz-range-progress{
  height: 6px;
  border-radius: 3px;
  background: #51ABB2;
}
.lf-hours__ticks{
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  font-size: 11px;
  color: #999;
}

/* intl-tel-input inside lead form */
.lead-form .iti{ width: 100%; }

/* Floating label for textarea */
.lead-form__float .lead-form__textarea:focus ~ .lead-form__label,
.lead-form__float .lead-form__textarea:not(:placeholder-shown) ~ .lead-form__label{
  top: 0;
  left: 18px;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text);
}
.lead-form__float .lead-form__textarea:focus ~ .lead-form__label{
  color: #51ABB2;
}
.lead-form__label--textarea{
  /* top: 50% inherited from .lead-form__label so the placeholder is
     vertically centred inside the textarea (parent rule already has
     transform: translate(-50%, -50%)). */
  /* Long placeholder text (e.g. "Tipo de evento, lugar, fecha,
     interior o exterior, altura del techo, efectos deseados") was
     overflowing the absolutely-positioned label sideways on narrow
     viewports. Clamp to two lines with ellipsis so the label always
     fits inside the textarea regardless of prompt length. */
  max-width: calc(100% - 32px);
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Textarea: moderate radius, auto-expands */
.lead-form__textarea{
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: box-shadow .2s;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px #999;
  resize: none;
  overflow: hidden;
  min-height: 48px;
  display: block;
  line-height: 1.5;
}
.lead-form__textarea::placeholder{
  color: transparent;
}
.lead-form__textarea{
  text-align: center;
}
.lead-form__textarea:focus{
  text-align: left;
}
.lead-form__textarea:hover{
  box-shadow: inset 0 0 0 1px #111;
}
.lead-form__textarea:focus{
  outline: none;
  box-shadow: inset 0 0 0 1px #111;
  background: rgba(81, 172, 179, 0.12);
}

/* CTA button */
.lead-form__buttons{
  margin-top: 18px;
}
.lead-form__buttons .hero-home__cta{
  width: 100%;
  background: #51ABB2;
  color: #fff;
  border: none;
  font-weight: 500;
  box-shadow: none;
}
.lead-form__buttons .hero-home__cta:active{ opacity: .8; }

/* Privacy consent checkbox */
.lead-form__consent{
  text-align: center;
  margin-top: 4px;
  padding: 10px 20px;
  border-radius: 24px;
}
.lead-form__consent-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 3vw, 13px);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.4;
}
.lead-form__consent-label input[type="checkbox"]{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #51ACB3;
  cursor: pointer;
}
.lead-form__consent-label a{
  color: var(--text);
  text-decoration: underline;
}
.lead-form__consent.is-error{
  background: rgba(255, 64, 63, 0.12);
}

/* Configurator alt link */
.lead-form__alt{
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #999;
}
.lead-form__alt a{
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.lead-form__alt a:hover{
  color: var(--text);
}

/* Status message */
.lead-form__status{
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  min-height: 20px;
}
.lead-form__status--ok{ color: #34c759; font-weight: 600; }
.lead-form__status--err{ color: #E53935; }

/* Success state */
.lead-form__form.is-sent .lead-form__fields,
.lead-form__form.is-sent .lead-form__pills,
.lead-form__form.is-sent .lead-form__field,
.lead-form__form.is-sent .lead-form__buttons,
.lead-form__form.is-sent .lead-form__consent,
.lead-form__form.is-sent .lead-form__alt,
.lead-form__form.is-sent .lead-form__status{
  display: none;
}
.lead-form__sent-msg{
  display: none;
  text-align: center;
  padding: 24px 0 8px;
}
.lead-form__form.is-sent .lead-form__sent-msg{
  display: block;
}
.lead-form__sent-icon{
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(81, 172, 179, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lead-form__sent-text{
  font-size: 15px;
  line-height: 1.5;
  color: #555;
  margin: 0 0 24px;
}
.lead-form__again{
  font-size: 14px;
  padding: 12px 28px;
}

@media (min-width: 768px){
  .lead-form{ padding: 16px 0 64px; }
  .lead-form__inner{ max-width: 420px; }
  .lead-form__fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lead-form__fields .lead-form__field:nth-child(3){
    grid-column: 1 / -1;
  }
  .lead-form__buttons .hero-home__cta{ width: 100%; }
}

/* ── Flatpickr calendar overrides (lead form) ── */
.lead-form-cal.flatpickr-calendar{
  font-family: inherit;
  border: none;
  border-radius: 18px;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 14px auto 0;
  position: relative;     /* anchor for abs-positioned arrows */
}
.lead-form-cal .flatpickr-months{
  display: flex;
  align-items: center;
  padding: 10px 8px 16px;
  overflow: visible;
  position: relative;
  z-index: 10;
}
.lead-form-cal .flatpickr-innerContainer{
  position: relative;
  z-index: 1;
}
.lead-form-cal .flatpickr-rContainer{
  padding-bottom: 10px;
}
.lead-form-cal .flatpickr-month{
  flex: 1;
  height: auto !important;
  overflow: visible !important;
}
/* ── Custom calendar header ── */
.fp-custom-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
/* Month dropdown */
.fp-month-dd{ position: relative; }
.fp-month-dd__trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 150px;
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
}
.fp-month-dd__trigger:hover{ background: rgba(0,0,0,.05); }
.fp-month-dd__arrow{
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #888;
  transition: transform .2s;
}
.fp-month-dd.is-open .fp-month-dd__arrow{ transform: rotate(180deg); }
.fp-month-dd__menu{
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 150px;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  z-index: 30;
  padding: 6px 0;
}
.fp-month-dd.is-open .fp-month-dd__menu{ display: block; }
.fp-month-dd__option{
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.fp-month-dd__option:hover{ background: rgba(0,0,0,.04); }
.fp-month-dd__option.is-selected{ font-weight: 600; color: var(--blue); }
.fp-month-dd__option.is-disabled{
  display: none;
}
/* Year +/- controls */
.fp-year-ctrl{
  display: flex;
  align-items: center;
  gap: 4px;
}
.fp-year-ctrl__val{
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 38px;
  text-align: center;
}
.fp-year-ctrl__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
  line-height: 1;
  padding: 0;
}
.fp-year-ctrl__btn:hover{ background: rgba(0,0,0,.1); }
.fp-year-ctrl__btn:disabled{
  opacity: .3;
  cursor: default;
}
/* Prev/next month arrows — slider-style, aligned with close button */
.lf-cal-container > .flatpickr-prev-month,
.lf-cal-container > .flatpickr-next-month{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 0;
  color: var(--text);
  fill: var(--text);
  cursor: pointer;
  transition: background .15s;
  z-index: 5;
}
.lf-cal-container > .flatpickr-prev-month{ left: 16px; }
.lf-cal-container > .flatpickr-next-month{ right: 16px; }
.lf-cal-container > .flatpickr-prev-month:hover,
.lf-cal-container > .flatpickr-next-month:hover{
  background: rgba(0,0,0,.06);
}
.lf-cal-container > .flatpickr-prev-month svg,
.lf-cal-container > .flatpickr-next-month svg{
  width: 12px;
  height: 12px;
}
.lf-cal-container > .flatpickr-prev-month.flatpickr-disabled{
  opacity: .25;
  pointer-events: none;
}
.lead-form-cal .flatpickr-weekdays{
  padding: 8px 0 4px;
  overflow: visible;
}
.lead-form-cal span.flatpickr-weekday{
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex: 0 0 14.2857%;
  max-width: 14.2857%;
  text-align: center;
}
.lead-form-cal .flatpickr-day{
  font-family: inherit;
  font-size: 14px;
  border-radius: 50%;
  height: 38px;
  line-height: 38px;
  max-width: 14.2857%;
  margin: 1px 0;
  color: var(--text);
}
.lead-form-cal .flatpickr-day:hover{
  background: rgba(0,122,255,.08);
  border-color: transparent;
  color: var(--blue);
}
.lead-form-cal .flatpickr-day.selected,
.lead-form-cal .flatpickr-day.selected:hover{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.lead-form-cal .flatpickr-day.today{
  border-color: var(--blue);
  color: var(--blue);
}
.lead-form-cal .flatpickr-day.today.selected{
  color: #fff;
}
.lead-form-cal .flatpickr-day.flatpickr-disabled{
  color: #ccc;
}
.lead-form-cal .flatpickr-day.prevMonthDay,
.lead-form-cal .flatpickr-day.nextMonthDay{
  visibility: hidden;
}
/* Date input: clickable pill, opens modal */
.lead-form__datepicker{ cursor: pointer; text-align: center; }

/* Calendar modal sheet */
.dm-sheet--cal{ max-width: 420px; padding-bottom: env(safe-area-inset-bottom, 24px); height: auto !important; }
.dm-sheet--cal .dm-topbar{ margin-bottom: 12px; }
.dm-sheet--cal .dm-handle{ margin-bottom: 4px; }
.lf-cal-container{ padding: 0 40px 12px; position: relative; }
.lf-cal-container .lead-form-cal.flatpickr-calendar{
  margin: 0 auto;
}
/* Desktop: center modal, tighter spacing */
@media (min-width: 600px){
  .dm-sheet--cal{ max-width: 480px; border-radius: 28px; }
  .dm-sheet--cal .dm-topbar{ margin-bottom: 0; }
  .lf-cal-container{ padding: 0 16px 16px; }
}

/* ── Thank-you modal ── */
.dm-sheet--thanks{ max-width: 400px; padding-bottom: env(safe-area-inset-bottom, 24px); height: auto !important; }
.dm-sheet--thanks .dm-topbar{ margin-bottom: 0; }
.lf-thanks{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 24px 36px;
  gap: 0;
}
.lf-thanks__check{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #51ABB2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: check-pop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes check-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.lf-thanks__check svg{
  animation: check-draw .4s .25s ease both;
}
@keyframes check-draw {
  0%   { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: scale(1); }
}
.lf-thanks__title{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.lf-thanks__sub{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 280px;
  margin: 0 0 24px;
}
.lf-thanks__buttons{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}
.lf-thanks__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity .2s;
}
.lf-thanks__btn:hover{ opacity: .85; }
.lf-thanks__btn--primary{
  background: #51ABB2;
  color: #fff;
}
.lf-thanks__btn--primary svg{ width: 22px; height: 22px; fill: #fff; }
.lf-thanks__btn--secondary{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--text);
}
.lf-thanks__note{
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}
@media (min-width: 600px){
  .dm-sheet--thanks{ border-radius: 28px; }
}

/* ── dm-sheet variants: showcase (detail) + form ──
   Universal modal chrome (.dm-overlay / .dm-sheet) with sized bodies.
   .dm-sheet--detail — split-view product showcase (image + thumbs + body)
                       opened via [data-dm-open="showcase"][data-cat="<cat>"]
   .dm-sheet--form   — lead/availability form (pack chip + fields + success)
                       opened via [data-dm-open="avail"][data-pack=".."][data-price=".."]
   Behavior: /assets/js/dm-sheet.js (universal handler). */

.dm-sheet--detail{
  max-width: 940px;
  padding-bottom: 0;
  /* Sheet background matches the image preview area so the small strip
     above the photo on mobile (handle + close button row) doesn't break
     the visual with a white band. The body column overrides back to
     white below. */
  background: #faf8f3;
}
.dm-sheet--detail .dm-detail__body{
  background: #fff;
}
.dm-sheet--form{ max-width: 460px; }

/* Desktop: centered modal instead of bottom sheet. Mobile keeps the
   bottom-sheet behavior inherited from .dm-overlay/.dm-sheet defaults. */
@media (min-width: 768px){
  .dm-overlay.dm-overlay--centered{
    align-items: center;
    padding: 24px;
  }
  .dm-overlay.dm-overlay--centered .dm-sheet{
    border-radius: var(--radius-lg);
    transform: translateY(24px);
    max-height: min(90vh, 720px);
  }
  .dm-overlay.dm-overlay--centered.is-open .dm-sheet{ transform: translateY(0); }
  .dm-overlay.dm-overlay--centered .dm-handle{ display: none; }
}

/* Round close button (top-right inside sheet body). Shared by detail+form. */
.dm-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #3a3a3c;
  cursor: pointer;
  z-index: 5;
  transition: background .15s ease;
}
.dm-close:hover{ background: #fff; }

/* ── Split-view showcase (.dm-sheet--detail) ── */
.dm-detail{
  display: flex;
  flex-direction: column;
  position: relative;
}
.dm-detail__image{
  position: relative;
  background: #faf8f3;
  /* The mobile rule below converts this column into a flex-1 child of
     the sheet so it absorbs whatever vertical space the body block
     leaves behind. Object-fit:contain on the image scales it down to
     whatever fits inside this area, preserving aspect ratio.
     `min-height` prevents the image from collapsing on very tall body
     blocks or short phones. */
  /* Use svh (static viewport — URL bar visible) instead of vh so the
     image area is the same size at every modal open. iOS Safari's vh
     unit equals the largest viewport (URL bar hidden), which means
     between modal opens the value can shift if the URL bar state
     changes, making the sheet a different height each time. */
  height: 50svh;
  max-height: 480px;
  min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 18px; /* breathing room so the drop-shadow doesn't clip */
}

/* Mobile fit-to-viewport: pin the sheet at 96 dvh and let image-area
   flex to fill whatever space the body block doesn't claim. This stops
   the sheet from overflowing the visible viewport on phones with a
   Safari URL bar showing — previously a 50 vh fixed image + body
   blocks pushed the close button up behind the URL bar and added an
   internal vertical scroll. */
@media (max-width: 767.98px){
  .dm-sheet--detail{
    max-height: 96svh;
  }
  /* Use CSS keyframes for the slide-up entrance instead of the base
     .dm-sheet's transition. Reason: WebKit handles `transition` by
     interpolating from the current computed value to the new one — on
     iOS Safari the current value on 2nd+ open can drift if compositor
     layers were dropped between opens, producing the "jump to top"
     symptom. Keyframes animations run from the literal `from` value
     every time the class is toggled, so the slide always starts at
     translateY(100%) regardless of WebKit's interpolation state.
     `both` keeps the final transform so position is stable after the
     animation ends. */
  .dm-sheet--detail{
    transition: none;
  }
  .dm-overlay.is-open .dm-sheet--detail{
    animation: dm-detail-slide-up .42s cubic-bezier(.16, 1, .3, 1) both;
  }
}
@keyframes dm-detail-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.dm-detail__image img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Soft drop-shadow that hugs the photo's alpha edges (works on
     transparent PNGs too). Subtle, magazine-style.
     `will-change: filter` keeps the GPU compositor layer alive after
     the opacity transition ends — without it Safari/Chrome dropped the
     layer ~0.4 s after a slide change and the drop-shadow visually
     vanished until the next repaint. `translateZ(0)` doubles down on
     the layer promotion. */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
  transform: translateZ(0);
  will-change: filter, opacity;
  transition: opacity .18s ease;
}
.dm-detail__image.fading img{ opacity: 0; }

/* Per-category positioning override: album showcases (album-small,
   album-large) use illustrations of a hand holding the album where the
   wrist is intentionally extended to the bottom edge of the source PNG.
   To make it read as if the hand emerges from outside the frame, the
   image is anchored to the bottom of the preview area with no
   padding-bottom — instead of being centered with even breathing room. */
.dm-overlay[data-dm-cat^="album-"] .dm-detail__image{
  align-items: flex-end;
  padding-bottom: 0;
}

/* Mobile-only fine-tune: the two hand-holding shots in the SMALL album
   showcase (beige + black covers) sit slightly too high on phones because
   the album object is small relative to the canvas — nudging the artwork
   down 10 px makes the album body land at the same vertical anchor as
   the open-spread slide. Desktop layout doesn't need this — the preview
   column is taller and the proportions already work. */
@media (max-width: 767.98px){
  .dm-overlay[data-dm-cat="album-small"] .dm-detail__image img[src*="album-small-beige"],
  .dm-overlay[data-dm-cat="album-small"] .dm-detail__image img[src*="album-small-black"]{
    transform: translate3d(0, 32px, 0);
  }
  /* Large-album hand-holding shots: the two cover variants are framed
     with the album body offset to the left edge of the source PNG, so on
     phones the artwork reads off-balance. Nudging it 25 px to the right
     centres the visual mass relative to the modal frame. The open-spread
     slide doesn't need this — its composition is already centered. */
  .dm-overlay[data-dm-cat="album-large"] .dm-detail__image img[src*="album-large-beige"],
  .dm-overlay[data-dm-cat="album-large"] .dm-detail__image img[src*="album-large-black"]{
    transform: translate3d(25px, 0, 0);
  }
}

/* Desktop tweak for the same large-album cover shots: the split-view
   image column is wider so the same off-balance issue calls for a
   slightly larger right-shift (30 px) to keep the album visually
   centered within the preview area. */
@media (min-width: 768px){
  /* Small-album cover shots on desktop: same logic as the mobile shift
     but the desktop preview column is taller, so 50 px lands the album
     body at the optical center instead of 32 px (the mobile value). */
  .dm-overlay[data-dm-cat="album-small"] .dm-detail__image img[src*="album-small-beige"],
  .dm-overlay[data-dm-cat="album-small"] .dm-detail__image img[src*="album-small-black"]{
    transform: translate3d(0, 30px, 0) scale(1.1);
  }
  .dm-overlay[data-dm-cat="album-large"] .dm-detail__image img[src*="album-large-beige"],
  .dm-overlay[data-dm-cat="album-large"] .dm-detail__image img[src*="album-large-black"]{
    transform: translate3d(35px, 0, 0);
  }
  /* Large-album open-spread slide: the open book sits slightly left of
     the canvas center, same correction as the cover shots but a smaller
     right-shift looks balanced because the open book is wider. */
  .dm-overlay[data-dm-cat="album-large"] .dm-detail__image img[src*="album-large-open"]{
    transform: translate3d(32px, 0, 0);
  }
}

/* Prev/Next arrows live inside the image area in detail mode (38×38, white .92). */
.dm-sheet--detail .dm-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  color: #1d1d1f;
  z-index: 2;
  transition: background .15s ease, transform .15s ease;
}
.dm-sheet--detail .dm-arrow:hover{
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.dm-sheet--detail .dm-arrow--prev{ left: 12px; }
.dm-sheet--detail .dm-arrow--next{ right: 12px; }

.dm-detail__body{
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  /* Reserve a line of height so the pill doesn't go 0 → 12 px between
     openShowcase clearing it and the API fetch filling it in. Without
     this, the sheet grew by 12 px mid-slide-up on the first open of
     each modal — visible as a stutter on iOS. */
  min-height: 12px;
  display: block;
}
.dm-meta{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Slide counter pill anchored to the bottom-left of the image area
   (e.g. "7 / 11"). Glass effect over the beige preview background. */
.dm-meta--corner{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  letter-spacing: .04em;
  text-transform: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.dm-title{
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  letter-spacing: -.01em;
}
/* In detail mode .dm-desc is body description (overrides the 13-px centered
   caption used by the legacy Diseño-modal). */
.dm-sheet--detail .dm-desc{
  font-size: 14.5px;
  line-height: 1.6;
  color: #333;
  text-align: left;
  padding: 0;
  margin: 4px 0 0;
  /* Reserve room for 2 lines so the modal height doesn't jump when
     navigating between slides with different copy length. Catalog
     copy is written to fit ≤2 lines on mobile (≤375 px). */
  min-height: calc(1.6em * 2);
}

/* Thumbnail strip (horizontal scroller below description) */
.dm-thumbs{
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Reserve the row's height so the sheet doesn't visibly grow when
     thumbs are appended after the API fetch resolves (~150 ms after
     openOverlay). 72 px matches the rendered height of populated thumbs
     (.dm-thumb height 70 + 2 px padding-bottom on the row), so the
     transition empty → filled is pixel-stable. */
  min-height: 72px;
}
.dm-thumbs::-webkit-scrollbar{ display: none; }
.dm-thumb{
  /* Auto width preserves the photo's natural aspect — vertical strips
     stay narrow, landscape prints get wider. Fixed height keeps the
     row visually balanced. */
  flex: 0 0 auto;
  width: auto;
  height: 70px;
  min-width: 30px;
  max-width: 110px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #f5f5f7;
  cursor: pointer;
  opacity: .55;
  padding: 0;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.dm-thumb img{
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.dm-thumb:hover{ opacity: .85; }
.dm-thumb.is-active{
  opacity: 1;
  border-color: var(--teal);
  transform: scale(1.05);
}

/* Desktop split: 2 columns (image | body). Mobile remains stacked. */
@media (min-width: 768px){
  /* Sheet has a fixed height — both columns inherit it via height:100 %
     so the image area extends edge-to-edge with no empty strip below
     the preview, and the body scrolls when its content overflows. */
  .dm-sheet--detail{
    height: 540px;
  }
  .dm-sheet--detail .dm-detail{
    flex-direction: row;
    align-items: stretch;
    height: 100%;
  }
  .dm-sheet--detail .dm-detail__image{
    flex: 1.2;
    aspect-ratio: auto;
    height: 100%;
    /* The mobile rule caps .dm-detail__image at 480 px (because phones
       use 50vh and we want a sensible ceiling). On desktop the sheet has
       a fixed 540 px height and the column should fill it edge-to-edge —
       otherwise a ~60 px white strip appears under the preview area. */
    max-height: none;
    padding: 32px;
  }
  .dm-sheet--detail .dm-detail__body{
    flex: 1;
    padding: 32px 36px 28px;
    overflow-y: auto;
  }
}

/* ── Form variant (.dm-sheet--form) ── */
.dm-form-body{
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.dm-pack{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  background: var(--soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}
.dm-pack__dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--teal);
}
.dm-intro{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.dm-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.dm-input{
  height: 48px;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 1px #ccc;
  padding: 0 18px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: box-shadow .15s ease, background .15s ease;
}
/* iOS Safari auto-zoom suppression — see media query below at the end
   of the dm-input rules (must be after `.dm-input--textarea` so source
   order wins on equal specificity). */
.dm-input::placeholder{ color: #b0b0b0; }
.dm-input:focus{
  box-shadow: inset 0 0 0 1.5px var(--teal);
  background: rgba(81,171,178,.06);
}
.dm-input[type="date"]{ color: #b0b0b0; letter-spacing: .02em; }
.dm-input[type="date"]:valid{ color: var(--text); }
/* Date-picker trigger (readonly text input — opens the bottom-sheet flatpickr). */
.dm-input.dm-date{
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.dm-input--textarea{
  height: auto;
  min-height: 64px;
  border-radius: 22px;
  padding: 14px 18px;
  resize: none;
  line-height: 1.5;
  font-family: inherit;
  font-size: 15px;
}
/* Floating-label wrapper for dm-form fields. Mirrors the homepage
   `.lead-form__float` pattern: placeholder=" " so :placeholder-shown
   stays true while the input is empty; on focus / non-empty the label
   shrinks and pops up to the top edge of the pill. */
.dm-field{ position: relative; }
.dm-field > .dm-input{ width: 100%; }
.dm-label-float{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #b0b0b0;
  pointer-events: none;
  background: #fff;
  padding: 0 6px;
  line-height: 1;
  white-space: nowrap;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.dm-float .dm-input:focus ~ .dm-label-float,
.dm-float .dm-input:not(:placeholder-shown) ~ .dm-label-float{
  top: 0;
  font-size: 12px;
  color: var(--text);
}
.dm-float .dm-input:focus ~ .dm-label-float{ color: var(--teal); }
/* Phone field: `.iti` wraps the input so the sibling selector skips
   past it. Label sits AFTER the country selector at all times (so it
   doesn't overlap "+34"). JS toggles .has-value / .has-focus on the
   wrapper so the label can shrink to the top edge on focus / when
   non-empty. */
.dm-float--phone > .dm-label-float{ left: 95px; }
.dm-float--phone.has-value > .dm-label-float,
.dm-float--phone.has-focus > .dm-label-float{
  top: 0;
  font-size: 12px;
  color: var(--text);
}
.dm-float--phone.has-focus > .dm-label-float{ color: var(--teal); }
/* Textarea: anchor label to the top, not vertically-centred. */
.dm-float--textarea > .dm-label-float{
  top: 22px;
  transform: none;
}
.dm-float--textarea .dm-input:focus ~ .dm-label-float,
.dm-float--textarea .dm-input:not(:placeholder-shown) ~ .dm-label-float{
  top: 0;
  transform: none;
}
/* Auto-grow textarea — JS sets height = scrollHeight on input. */
.dm-input--autogrow{
  overflow-y: hidden;
  max-height: 200px;
}
/* iOS Safari auto-zooms into an input on focus when its computed
   font-size is < 16 px. Bump every modal field to 16 px on small
   screens to suppress the zoom while keeping the desktop typography
   at 15 px. Placed AFTER all base `.dm-input*` rules so the @media
   wins on equal specificity. */
@media (max-width: 640px){
  .dm-input,
  .dm-input--textarea,
  .dm-label-float{
    font-size: 16px;
  }
  /* On mobile centre the user value (and its placeholder) inside the
     name and date pills so the entered text sits visually at the
     midpoint of the field — better balance with the rest of the
     centred elements (pack pill, stepper, submit). Phone / venue keep
     left alignment: phone has the +34 dial-code prefix, venue is a
     multi-line textarea where centring reads worse. */
  #dmName,
  #dmDate{
    text-align: center;
  }
}
/* Duration stepper (photobooth pages only) — sits between date and
   phone fields. Same height/border-radius as the other pill inputs so
   it fits the form rhythm. Default value is 3 horas, clamped [1, 10]
   by JS in dm-sheet.js. */
.dm-hours-field{ display: block; }
.dm-hours-stepper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #e1e1e6;
  border-radius: 999px;
  padding: 4px;
  height: 48px;
  width: 100%;
}
.dm-hours-step{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: var(--text);
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  /* Center the glyph: flex centring is reliable across glyph metrics
     (some fonts render "−" / "+" with non-zero baseline offsets that
     leave them visually high or low when only line-height is used). */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.dm-hours-step:hover{ background: var(--teal); color: #fff; }
.dm-hours-step:active{ transform: scale(.96); }
.dm-hours-value{
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.dm-hours-value__num{
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dm-hours-value__unit{
  font-size: 14px;
  color: var(--muted);
}

/* Self-contained — overrides .btn defaults (white bg + shadow) so the
   submit button is the correct solid teal regardless of whether the
   page loads editorial.css. */
.dm-submit{
  width: 100%;
  margin-top: 6px;
  height: 52px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  border: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.dm-submit:hover{
  background: #469aa0;
  transform: scale(1.01);
}
.dm-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.dm-foot{
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.dm-foot__q{ color: var(--muted); }
.dm-foot__a{ color: var(--teal); text-decoration: underline; }
.dm-foot a{ color: var(--teal); text-decoration: underline; }

/* Privacy consent checkbox row (modal form). */
.dm-consent{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  margin: 2px 4px 0;
  cursor: pointer;
  user-select: none;
}
.dm-consent input[type="checkbox"]{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.dm-consent a{ color: var(--teal); text-decoration: underline; }
.dm-consent a:hover{ text-decoration: none; }

/* Inline submit error message (modal form). */
.dm-error{
  font-size: 13px;
  line-height: 1.4;
  color: #b00020;
  background: rgba(176, 0, 32, .06);
  border: 1px solid rgba(176, 0, 32, .2);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0;
}

@media (min-width: 768px){
  .dm-sheet--form .dm-form-body{ padding: 32px 36px; }
}

/* Success state shown after form submit; .is-sent goes on .dm-overlay.
   Pack pill, foot link and form are hidden — the modal collapses to a
   compact, centred thank-you with a WhatsApp follow-up CTA. */
.dm-success{
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 8px 32px;
  gap: 14px;
}
.dm-overlay.is-sent .dm-form,
.dm-overlay.is-sent .dm-intro,
.dm-overlay.is-sent .dm-title,
.dm-overlay.is-sent .dm-label,
.dm-overlay.is-sent .dm-pack,
.dm-overlay.is-sent .dm-foot{ display: none; }
.dm-overlay.is-sent .dm-success{ display: flex; }
/* Modal shrinks to its content on success — no fixed height bias. */
.dm-overlay.is-sent .dm-sheet--form{ height: auto; }
/* WhatsApp follow-up button — same style as the homepage hero
   `.hero-svc__cta--wa`: transparent background, brown outline, text
   only (svg hidden). Sits below the success message. */
.dm-success__wa{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #8B6755;
  border: 2px solid #8B6755;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.dm-success__wa:hover{ background: #8B6755; color: #fff; }
.dm-success__wa svg{ display: none; }
/* Reviews CTA is a plain text link below the WA button — keeps the
   primary action (chat) visually dominant. Same teal/underline style
   the .dm-foot link uses elsewhere in this modal. */
.dm-success__reviews{
  color: var(--teal);
  text-decoration: underline;
  font-size: 14px;
}
.dm-success__icon{
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  animation: check-pop .5s cubic-bezier(.16,1,.3,1) both;
}
.dm-success__title{
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -.02em;
}
.dm-success__msg{
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 320px;
}

/* Universal "i" info bubble. Used inside pricing list items but available
   anywhere a label needs a tiny explainer that opens a showcase modal. */
.pricing-info-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: .45;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
  vertical-align: middle;
}
.has-info{
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.has-info:hover .pricing-info-icon{
  opacity: 1;
  transform: scale(1.1);
  background: var(--teal);
}

/* Home page only: keep mobile layout unchanged.
   We render the per-card CTA in HTML but hide it on mobile;
   desktop visibility/reveal is handled in the desktop breakpoint below. */
.page-home .home-service__cta{
  display:none;
}

/* ── Laser border animation (shared with hero-svc) ── */
@property --laser-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes laser-spin {
  to { --laser-a: 360deg; }
}
/* Shared laser border effect — used by .hero-home__cta, .hero-svc__cta--primary, .os-home-card__pill */
.laser-border{ position: relative; }
.laser-border::before{
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--laser-a),
    transparent        0%,
    transparent       72%,
    rgba(0,122,255,.08) 79%,
    rgba(0,122,255,.55) 85%,
    #007AFF            89%,
    #80c8ff            91%,
    #ffffff            92%,
    rgba(0,122,255,.3) 94%,
    transparent        96%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: laser-spin 2.8s linear infinite;
  pointer-events: none;
}

/* ── Hero Home ── */
.hero-home{
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px var(--pad) 20px;
  gap: 0;
}
.hero-home__text{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-home__title{
  font-size: 36px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 0 0 29px;
}
.hero-home__sub{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 0 39px;
}
.hero-home__buttons{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hero-home__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 52px;
  border-radius: 999px;
  background: var(--card);
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  transition: transform .2s ease;
}
/* laser border via shared .laser-border class in HTML */
.hero-home__cta:hover{ transform: scale(1.04); }
.hero-home__cta:active{ opacity: .8; transform: scale(.98); }

.hero-home__wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s, transform .2s ease;
}
/* Hide text on mobile — icon only */
.hero-home__wa-label{ display: none; }
.hero-home__wa:hover{ transform: scale(1.04); }
.hero-home__wa:active{ opacity: .8; transform: scale(.98); }
.hero-home__wa svg{ flex-shrink: 0; }

.hero-home__trust{
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 0;
  font-weight: 500;
}
.hero-home__trust--cities{
  margin: 4px 0 0;
}
/* Badges: after H1 on mobile (scroll), before H1 on desktop */
.hero-home__badges{
  margin: 0 0 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
  max-width: 100vw;
  padding: 0 var(--pad);
  box-sizing: border-box;
}
.hero-home__badges::-webkit-scrollbar{ display: none; }
.hero-home__badges .hero-home__badges-track{
  display: flex;
  gap: 8px;
  animation: badges-scroll 11s linear infinite;
  width: max-content;
}
.hero-home__badges.is-touched .hero-home__badges-track{
  animation: none;
}
@keyframes badges-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (min-width: 768px){
  .hero-home__badges{
    order: -1;
    overflow: visible;
    justify-content: center;
    padding: 0;
  }
  .hero-home__badges .hero-home__badges-track{
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-home__badges .hero-svc__badge[aria-hidden="true"]{ display: none; }
}

/* ── Momentos slider (shared: fotomaton + home) ── */
.momentos-slider{
  overflow: hidden;
  padding: 20px 0 24px;
  background: var(--bg);
}
.momentos-slider .slider--cards .slide img{
  background: transparent;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}
.momentos-slider .slider-dots{
  padding: 10px 0 8px;
}

/* ── Homepage: hide stickybar, use float panel instead ── */
.page-home .stickybar{ display: none; }
.page-home .bottom-spacer{ display: none; }

/* Hide float panel on no-topbar pages (FAB menu replaces it) */
.site-no-topbar .hero-fotomat-float{ display: none !important; }

/* ── Float CTA panel (left edge, shared across pages) ── */
.hero-fotomat-float{
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 999;
  transform: translateX(calc(-100% - 16px)) translateY(-50%);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.hero-fotomat-float.hf-visible{
  transform: translateX(0) translateY(-50%);
}
.hero-fotomat-float.hf-visible.hf-peek{
  transform: translateX(calc(-100% + 10px)) translateY(-50%);
  transition: transform .3s ease;
}
.hero-fotomat-float__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 38px;
  width: 38px;
  padding: 0;
  font-size: 0;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0 19px 19px 0;
  box-shadow: 2px 3px 14px rgba(0,0,0,.16);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s, transform .15s;
}
.hero-fotomat-float__btn:active{
  opacity: .75;
  transform: scale(.95);
}
.hero-fotomat-float__btn--budget{
  background: rgba(255,255,255,.96);
  color: var(--blue);
  backdrop-filter: blur(8px);
}
.hero-fotomat-float__btn--wa{
  background: var(--wa);
  color: #fff;
}
.hero-fotomat-float__btn--lang{
  background: rgba(255,255,255,.96);
  color: #222;
  backdrop-filter: blur(8px);
}
.hero-fotomat-float__lang-code{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
}
.hero-fotomat-float__btn svg{ flex-shrink: 0; }
.hero-fotomat-float__euro{
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.hero-fotomat-float__label{
  font-size: 0;
}

/* ── Smoke Parallax ── */
.smoke-px{
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-bottom: -18px;
  overflow: hidden;
  background: var(--bg);
  /* total height = bg image height + 330px grey on top */
  height: calc(50vw + 330px);
  max-height: 750px;        /* 420 bg + 330 grey */
  min-height: 550px;
  opacity: 0;
  transition: opacity .4s ease;
}
.smoke-px.is-loaded{
  opacity: 1;
}

/* header: title + CTA at top of container */
.smoke-px__header{
  position: relative;
  z-index: 10;
  padding-top: 30px;
  padding-bottom: 40px;
  text-align: center;
}
.smoke-px__header .showcase-calc{
  background: rgba(230,230,230,.70);
}
.smoke-px__header .showcase-calc:hover{
  background: rgba(220,220,220,.80);
}
.smoke-px__title{
  /* typography via shared selector above */
  margin: 0 0 16px;
}
/* title links */
.smoke-px__title a,
.fog-px__title a,
.fb-showcase__title a{
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}
.smoke-px__title a:hover,
.fog-px__title a:hover,
.fb-showcase__title a:hover{
  opacity: .65;
}
.smoke-px__title a:active,
.fog-px__title a:active,
.fb-showcase__title a:active{
  opacity: .45;
  transform: scale(.97);
}

/* calc price link under showcase titles — pill style */
.showcase-calc{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 100px;
  padding: 8px 18px;
  text-decoration: none;
  transition: background .2s, color .2s, gap .2s;
}
.showcase-calc:hover{
  background: rgba(0,0,0,.10);
  color: var(--text);
  gap: 10px;
}
.showcase-calc:active{
  background: rgba(0,0,0,.14);
}
.showcase-calc__arrow{
  font-size: 14px;
  transition: transform .2s;
}
.showcase-calc:hover .showcase-calc__arrow{
  transform: translateX(2px);
}

/* background sits at the bottom of the container */
.smoke-px__back{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(100% - 250px);
  z-index: 1;
  pointer-events: none;
}
.smoke-px__back picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* smoke & couple anchored to bottom, smoke can extend into white zone */
.smoke-px__smoke,
.smoke-px__pareja{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.smoke-px__smoke{ z-index: 2; }
.smoke-px__pareja{ z-index: 3; }

.smoke-px__smoke picture,
.smoke-px__pareja picture{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.smoke-px__img{
  display: block;
}
.smoke-px__img--back{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.smoke-px__img--smoke{
  width: 65%;
  max-width: 750px;
  height: auto;
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.smoke-px__img--pareja{
  width: 45%;
  max-width: 480px;
  height: auto;
  will-change: transform;
}
@media (max-width: 767px){
  .smoke-px{
    height: 690px;
    max-height: 690px;
    min-height: 690px;
  }
  .smoke-px__back{
    height: 400px;           /* bg at bottom, 330px grey above */
  }
  .smoke-px__img--smoke{
    width: auto;
    max-width: none;
    height: 95%;
  }
  .smoke-px__img--pareja{
    width: 136%;             /* 68% × 2 */
    max-width: none;
  }
}
/* ── Fog Parallax (Niebla Baja) ── */
.fog-px{
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-bottom: -18px;
  overflow: hidden;
  background: var(--bg);
  height: calc(50vw + 330px);
  max-height: 750px;
  min-height: 550px;
  opacity: 0;
  transition: opacity .4s ease;
}
.fog-px.is-loaded{ opacity: 1; }

.fog-px__header{
  position: relative;
  z-index: 4;
  padding-top: 30px;
  padding-bottom: 40px;
  text-align: center;
}
.fog-px__title{
  /* typography via shared selector above */
  margin: 0 0 16px;
}

.fog-px__back{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(100% - 100px);
  z-index: 1;
  pointer-events: none;
}
.fog-px__back picture{
  display: block;
  width: 100%;
  height: 100%;
}
.fog-px__img--back{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* left & right fog layers anchored to bottom */
.fog-px__left,
.fog-px__right{
  position: absolute;
  bottom: 0;
  height: 25%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
.fog-px__left{
  left: 0;
  justify-content: flex-start;
}
.fog-px__right{
  right: 0;
  justify-content: flex-end;
}
.fog-px__left picture,
.fog-px__right picture{
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.fog-px__img--left,
.fog-px__img--right{
  height: 100%;
  width: auto;
  max-width: none;
  will-change: transform, opacity;
}

@media (max-width: 767px){
  .fog-px{
    height: 625px;
    max-height: 625px;
    min-height: 625px;
  }
  .fog-px__back{
    height: 522px;
  }
  .fog-px__left,
  .fog-px__right{
    height: 20%;
  }
}

/* ── Fotobooth Showcase ── */
.fb-showcase{
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  background: var(--bg);
  min-height: 440px;
}
@media (min-width: 1024px){
  .fb-showcase{ min-height: 730px; }
}
/* header: title + CTA at top */
.fb-showcase__header{
  position: relative;
  z-index: 4;
  padding-top: 30px;
  padding-bottom: 40px;
  text-align: center;
}
.fb-showcase__title{
  /* typography via shared selector above */
  margin: 0 0 16px;
}
.fb-showcase__cta{
  margin: 0 auto;
}
.fb-showcase__booth{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0 0;
}
.fb-showcase__booth img{
  height: auto;
  width: auto;
  max-height: 70vh;
  max-width: 90vw;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.12));
  transform: translateY(55px) scale(1.05);
}
@media (min-width: 1024px){
  .fb-showcase__booth img{
    max-height: 80vh;
    transform: translateX(-70px) scale(1.10);
  }
  .fb-showcase__photos{
    left: -130px;
    right: 130px;
  }
}
@media (max-width: 767px){
  .fb-showcase__booth img{
    transform: translateY(-5px) scale(1.05);
  }
  .fb-showcase__photos{
    top: 40px;
  }
}

/* Keywords — behind photos */
.fb-showcase__keywords{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fb-kw{
  position: absolute;
  font-weight: 800;
  color: rgba(0,0,0,.06);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.fb-showcase.is-visible .fb-kw{
  animation-name: fbKwIn;
  animation-duration: .8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.fb-kw--1{ font-size: clamp(28px,5vw,52px); top: 10%; left: -10%; animation-delay: .3s; }
.fb-kw--2{ font-size: clamp(20px,3.5vw,36px); top: 25%; right: -8%; animation-delay: .8s; }
.fb-kw--3{ font-size: clamp(24px,4vw,44px); bottom: 30%; left: -6%; animation-delay: 1.3s; }
.fb-kw--4{ font-size: clamp(18px,3vw,32px); bottom: 15%; right: -5%; animation-delay: 1.8s; }
.fb-kw--5{ font-size: clamp(22px,3.5vw,40px); top: 50%; left: -12%; animation-delay: 2.3s; }
.fb-kw--6{ font-size: clamp(16px,2.5vw,28px); top: 60%; right: -10%; animation-delay: 2.8s; }

@keyframes fbKwIn{
  0%{ opacity: 0; transform: translateX(var(--kw-dir, 80px)); }
  100%{ opacity: 1; transform: translateX(0); }
}
.fb-kw--1, .fb-kw--3, .fb-kw--5{ --kw-dir: -80px; }
.fb-kw--2, .fb-kw--4, .fb-kw--6{ --kw-dir: 80px; }

/* Falling photos */
.fb-showcase__photos{
  position: absolute;
  top: 100px; left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.fb-photo{
  position: absolute;
  top: -15%;
  box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}
/* strips (s1,s3,s5,s2) = photos 1,3,5,6 → narrow tall (1:3) */
/* portraits (p1,p2)    = photos 2,4     → wider (2:3)       */
/* Mobile: only left-side photos, spread out; right hidden */
/* strips 40px → 120px tall; portrait 80px wide → 120px tall (same height) */
.fb-photo--1{ left: -6%;  width: 40px; aspect-ratio: 1/3; }
.fb-photo--2{ left: 18%;  width: 80px; aspect-ratio: 2/3; }
.fb-photo--3{ left: 2%;   width: 40px; aspect-ratio: 1/3; top: -30%; }
.fb-photo--4{ display: none; aspect-ratio: 2/3; }
.fb-photo--5{ display: none; aspect-ratio: 1/3; }
.fb-photo--6{ display: none; aspect-ratio: 1/3; }
/* Desktop: all photos visible, spread across */
@media (min-width: 768px){
  .fb-photo--1{ width: 56px; left: 3.5%; }
  .fb-photo--2{ width: 100px; left: 13.5%; }
  .fb-photo--3{ width: 50px; left: 28.5%; top: -15%; }
  .fb-photo--4{ display: block; width: 96px; left: 70%; }
  .fb-photo--5{ display: block; width: 54px; left: 80%; }
  .fb-photo--6{ display: block; width: 60px; left: 93%; }
}
/* Narrow desktop (1024–1350): left photos smaller & further left */
@media (min-width: 768px) and (max-width: 1350px){
  .fb-photo--1{ width: 42px; left: -2%; }
  .fb-photo--2{ width: 76px; left: 6%; }
  .fb-photo--3{ width: 38px; left: 18%; }
}

/* Photo rotation per item (used by JS scroll parallax) */
.fb-photo--1{ --fall-rot: -5deg; }
.fb-photo--2{ --fall-rot: 4deg; }
.fb-photo--3{ --fall-rot: -5deg; }
.fb-photo--4{ --fall-rot: 7deg; }
.fb-photo--5{ --fall-rot: -5deg; }
.fb-photo--6{ --fall-rot: 2deg; }

@media (prefers-reduced-motion: reduce){
  .fb-kw, .fb-photo{ animation: none !important; opacity: 0 !important; }
}

/* ── Event type cards ── */
.vg-block:has(.evt-grid){
  overflow: visible;
}
.evt-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px var(--pad);
}
.evt-card{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
  /* button-element resets — keep visual identical to legacy <a> */
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  padding: 0;
}
.evt-card:hover{ box-shadow: 0 6px 24px rgba(0,0,0,.10); transform: scale(1.03); }
.evt-card:active{ transform: scale(.98); }
.evt-card__img{
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 12px;
  margin: 8px;
  overflow: hidden;
  object-fit: cover;
}
.evt-card__img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.evt-card__placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.evt-card__info{
  flex: 1;
  min-width: 0;
  padding: 14px 14px 14px 4px;
}
.evt-card__name{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.2;
}
.evt-card__desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* ── How it works ── */
/* ── How it works — stepper ── */
.hiw-block{
  padding: 32px 28px 36px;
  overflow: visible;
}
.hiw-head{
  margin-bottom: 42px;
  text-align: center;
}
.hiw-head__title{
  /* typography via shared selector above */
  margin: 0;
}
/* desktop hidden on mobile */
.hiw-desktop{ display: none; }
/* mobile vertical timeline */
.hiw-mobile{
  display: flex;
  flex-direction: column;
}
.hiw-m{
  display: flex;
  gap: 16px;
  position: relative;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.hiw-m.is-visible{ opacity: 1; transform: translateX(0); }
.hiw-m__left{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.hiw-m__dot{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #e5e5ea;
  background: #f5f5f7;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #aaa;
  flex-shrink: 0;
}
.hiw-m__line{
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: #e5e5ea;
  margin: 4px 0;
}
.hiw-m:last-child .hiw-m__line{ display: none; }
.hiw-m__body{ padding-bottom: 24px; padding-top: 4px; }
.hiw-m__title{ /* typography via shared selector */ margin-bottom: 4px; }
.hiw-m__desc{ /* typography via shared selector */ line-height: 1.55; }
/* done state */
.hiw-m__dot svg{ width: 14px; height: 14px; display: none; }
.hiw-m.done .hiw-m__dot{
  background: #34c759;
  border-color: #34c759;
  color: #fff;
}
.hiw-m.done .hiw-m__dot span{ display: none; }
.hiw-m.done .hiw-m__dot svg{ display: block; }
.hiw-m.done .hiw-m__line{ background: #34c759; }

/* ── Services home grid ── */
/* ── Services home slider ── */
.os-home-slider{
  padding: 0 0 8px;
}
.slider--cards .slider-track{
  padding: 8px 11% 28px;
  gap: 12px;
}
.slider--cards .slide{
  flex: 0 0 78%;
  scroll-snap-align: center;
  opacity: .7;
  transform: scale(.94);
  transition: opacity .35s ease, transform .35s ease;
}
.slider--cards .slide.is-active,
.slider--cards .slide:first-child{
  opacity: 1;
  transform: scale(1);
}
/* Responsive: show peek edges so user sees there are more cards */
@media (min-width: 600px){
  .slider--cards .slider-track{
    padding: 8px 24px 28px;
  }
  .slider--cards .slide{
    flex: 0 0 42%;
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
  }
  /* Manual hover: dim all, highlight hovered */
  .slider--cards .slider-track:hover .slide{
    opacity: .7;
    transform: scale(.94);
  }
  .slider--cards .slider-track:hover .slide:hover{
    opacity: 1;
    transform: scale(1);
  }
  /* Random focus (JS-driven): when NOT hovered, dim non-focused */
  .slider--cards .slide.is-focus{
    opacity: 1;
    transform: scale(1);
  }
  .os-home-slider:not(:hover) .slider--cards .slide:not(.is-focus){
    opacity: .55;
    transform: scale(.94);
  }
  .os-home-slider:not(:hover) .slider--cards .slide.is-focus{
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 900px){
  .slider--cards .slide{ flex: 0 0 30%; }
}
@media (min-width: 1200px){
  .slider--cards .slide{ flex: 0 0 23%; }
}
.os-home-slide{
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .2s, opacity .35s ease, transform .35s ease;
}
.os-home-slide:hover{ box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.os-home-card__link{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.os-home-card__media{
  position: relative;
  overflow: hidden;
}
.slider--cards .slide img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.os-home-card__placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.os-home-card__pill{
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  pointer-events: none;
  overflow: hidden;
}
/* Laser sweep on pill when hovering card — extends .laser-border via class in HTML */
.os-home-card__pill::before{
  opacity: 0;
  animation: none;
  transition: opacity .2s;
}
.os-home-slide:hover .os-home-card__pill::before{
  opacity: 1;
  animation: laser-spin 2.8s linear 1;
}
.os-home-card__info{
  padding: 10px 12px 12px;
  flex: 1;
}
.os-home-card__name{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.2;
}
.os-home-card__desc{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.os-home-slider .slider-dots{
  padding: 10px 0 8px;
}

/* ==========================================================
   DESKTOP — all pages
   Mobile-first: everything below only activates ≥ 1024 px.
========================================================== */

@media (min-width: 1024px){

  /* ---------- Global layout ---------- */
  :root{
    --pad: 40px;
    --gap: 24px;
    --radius: 24px;
  }

  .container{
    max-width: 760px;       /* service / form pages: comfortable reading width */
  }

  /* ---------- HOME page ---------- */
  .page-home .container{
    max-width: 1200px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Hero home: side-by-side */
  .hero-home{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 48px 24px;
  }
  .hero-home__title{
    font-size: 52px;
  }
  .hero-home__title br{
    display: none;
  }
  .hero-home__sub{
    font-size: 17px;
    max-width: none;
  }
  .hero-home__buttons{
    flex-direction: row;
  }
  .hero-home__wa{
    width: 210px;
    height: 46px;
  }
  .hero-home__wa-label{ display: inline; }
  .hero-home__trust{
    font-size: 14px;
  }
  /* Desktop: momentos slider — 4 slides visible */
  .momentos-slider{
    padding: 32px 0 8px;
  }
  .momentos-slider .slider--cards .slide img{
    aspect-ratio: 3 / 4;
  }

  /* Desktop: float panel — compact icons, expand on hover */
  .hero-fotomat-float{
    gap: 6px;
  }
  .hero-fotomat-float__btn{
    width: 42px;
    height: 42px;
    padding: 0 0 0 12px;
    gap: 7px;
    font-size: 13px;
    border-radius: 0 22px 22px 0;
    box-shadow: 3px 4px 18px rgba(0,0,0,.14);
    overflow: hidden;
    justify-content: flex-start;
    transition: width .3s ease, padding .3s ease, opacity .2s;
  }
  .hero-fotomat-float__btn--lang{
    padding: 0;
    justify-content: center;
  }
  .hero-fotomat-float__lang-code{
    font-size: 13px;
  }
  .hero-fotomat-float__label{
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    width: 0;
    transition: opacity .2s ease, width .3s ease;
  }
  /* Expand all buttons when hovering the panel */
  .hero-fotomat-float:hover .hero-fotomat-float__btn{
    width: auto;
    padding: 0 16px 0 12px;
  }
  .hero-fotomat-float:hover .hero-fotomat-float__btn--lang{
    padding: 0 14px;
  }
  .hero-fotomat-float:hover .hero-fotomat-float__label{
    opacity: 1;
    width: auto;
  }

  /* Event types: 2x2 grid on tablet */
  .evt-grid{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 30px;
    max-width: none;
  }
  .evt-card{
    flex: 0 0 calc(50% - 6px);
    flex-direction: row;
    align-items: flex-start;
    border-radius: 16px;
  }
  .evt-card__img{
    width: 100px;
    height: 100px;
    border-radius: 12px;
    margin: 10px;
  }
  .evt-card__info{
    padding: 10px 14px 14px 4px;
  }

  /* How it works: row */
  /* ── How it works — desktop stepper ── */
  .hiw-desktop{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .hiw-mobile{ display: none; }
  .hiw-step{
    position: relative;
    padding-right: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px) scale(.9);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .hiw-step.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .hiw-step::after{
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 20px);
    right: -4px;
    height: 2px;
    background: #e5e5ea;
    z-index: 0;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .4s ease;
  }
  .hiw-step.is-visible::after{ transform: scaleX(1); }
  .hiw-step:last-child::after{ display: none; }
  .hiw-dot{
    position: relative;
    z-index: 1;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid #e5e5ea;
    background: #f5f5f7;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: #aaa;
    margin: 0 auto 14px;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s;
  }
  .hiw-step.is-visible .hiw-dot{
    animation: hiw-dot-pop .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes hiw-dot-pop{
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  .hiw-dot svg{ width: 14px; height: 14px; display: none; }
  .hiw-step.done .hiw-dot{
    background: #34c759;
    border-color: #34c759;
    color: #fff;
  }
  .hiw-step.done .hiw-dot span{ display: none; }
  .hiw-step.done .hiw-dot svg{ display: block; }
  .hiw-step.done::after{ background: #34c759; }
  .hiw-step__title{ font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
  .hiw-step__desc{ font-size: 12px; color: var(--muted); line-height: 1.5; }

  .os-home-slider .os-home-card__info{
    padding: 14px 16px 10px;
  }

  .page-home .btnbar{
    display:none;            /* CTA lives per-card on desktop */
  }

  /* Cards: horizontal scroll strip */
  .page-home .home-services{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    align-items: start;
  }
  .page-home .home-services::-webkit-scrollbar{ display:none; }

  .page-home .home-service{
    flex: 0 0 auto;
    width: clamp(220px, 22vw, 280px);
    scroll-snap-align: start;
    gap: 0;
  }

  .page-home .home-service .card-media{
    aspect-ratio: 3 / 4;
  }

  /* Hover: slight scale on card */
  .page-home .home-service .card{
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
  }
  .page-home .home-service .card:hover{
    transform: scale(1.03);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }

  .page-home .home-service__cta{
    display:flex;
    width: 100%;
    margin-top: 12px;
  }

  /* =============================================
     SERVICE pages — desktop layout
     Two-column grid, auto-open accordions, wide hero
  ============================================= */

  /* Service page container: single column */
  body:not(.page-home):not(.cfg-page):not(.order-page) .container.stack{
    max-width: 900px;
  }

  /* Hero: wide banner */
  body:not(.page-home) .container > .card:first-child{
  }
  body:not(.page-home) .container > .card:first-child .card-media{
    aspect-ratio: 21 / 9;
    max-height: 400px;
    object-position: center;
  }

  /* Auto-open accordions on desktop: hide buttons, show panels
     ONLY on service pages (not configurator/form) */
  body:not(.page-home):not(.cfg-page):not(.order-page) .acc-btn{
    display: none;
  }
  body:not(.page-home):not(.cfg-page):not(.order-page) .acc-panel{
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
  }

  body:not(.page-home) .acc-panel{
  }

  .page-home .gd-block{
    padding: 48px 80px;
  }

  /* GRAN DÍA — desktop: full viewport width, 3 в ряд */
  body:not(.page-home) .gd-block{
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 48px;
    border-radius: 0;
  }

  .gd-list{
    flex-direction: row;
    gap: 0;
    margin-top: 42px;
  }
  .page-home .gd-col--center{
    flex: 0 0 100%;
  }
  /* Home: numbered list style (01, 02, 03) */
  .page-home .gd-list{
    flex-direction: column;
    counter-reset: gd-num;
  }
  .page-home .gd-item{
    counter-increment: gd-num;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .page-home .gd-item:last-child{
    border-bottom: none;
  }
  .page-home .gd-item::before{
    content: counter(gd-num, decimal-leading-zero);
    font-size: 42px;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 1;
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    margin-top: 0;
  }

  .gd-item{
    flex: 0 0 33.333%;
    border-bottom: none;
  }

  /* RESERVA STEPPER: desktop — full width, 6 columns, cascade animation */
  body:not(.page-home) .rsv-block{
    padding: 48px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
  }
  .rsv-desktop{
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
  }
  .rsv-mobile{ display: none; }

  .rsv-step{
    position: relative;
    padding-right: 12px;
    text-align: center;
    flex: 1;
    max-width: 200px;

    /* Hidden before cascade animation */
    opacity: 0;
    transform: translateY(20px) scale(.9);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .rsv-step.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* connector line between dots */
  .rsv-step::after{
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 20px);
    right: -4px;
    height: 2px;
    background: #e5e5ea;
    z-index: 0;
    /* Line grows from left */
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .4s ease;
  }
  .rsv-step.is-visible::after{
    transform: scaleX(1);
  }
  .rsv-step:last-child::after{ display: none; }

  .rsv-dot{
    position: relative;
    z-index: 1;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid #e5e5ea;
    background: #f5f5f7;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: #aaa;
    margin: 0 auto 14px;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s;
  }
  /* Bounce when visible */
  .rsv-step.is-visible .rsv-dot{
    transform: scale(1);
    animation: rsv-dot-pop .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes rsv-dot-pop{
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
  }

  .rsv-dot svg{ width: 14px; height: 14px; display: none; }

  /* ── Desktop done / active states ── */
  .rsv-step.done .rsv-dot{
    background: #34c759;
    border-color: #34c759;
    color: #fff;
  }
  .rsv-step.done .rsv-dot span{ display: none; }
  .rsv-step.done .rsv-dot svg{ display: block; }
  .rsv-step.done::after{ background: #34c759; }

  .rsv-step.active .rsv-dot{
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(29,29,31,.1);
  }

  .rsv-step__title{ font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
  .rsv-step__desc{ font-size: 12px; color: var(--muted); line-height: 1.5; }

  .rsv-step__title{ font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
  .rsv-step__desc{ font-size: 12px; color: var(--muted); line-height: 1.5; }

  /* VIDEO BLOCKS: full width on desktop, 4 slides */
  .vg-block{
    padding: 48px 0 8px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .vg-block .slide.vg-slide{
    flex: 0 0 calc(25% - 9px);
    aspect-ratio: 2 / 3;
  }
  .vg-block .slide.vg-slide img{
    aspect-ratio: auto;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* BENTO GRID: 5 tiles in one row, full viewport width */
  .bt-block{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 48px;
  }
  .bt-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    gap: 16px;
  }
  .bt-card{
    display: block;
    border-radius: 22px;
  }
  .bt-card--tall{
    grid-row: auto;
    grid-column: auto;
  }
  .bt-card__img{
    width: auto;
    height: auto;
    border-radius: 0;
    margin: 0;
  }
  .bt-card--tall .bt-card__img{ aspect-ratio: 1 / 1; }
  .bt-card:not(.bt-card--tall) .bt-card__img{ aspect-ratio: 1 / 1; }
  .bt-card__info{ padding: 16px 18px 20px; }
  /* Overlay slides: one at a time on desktop */
  .tile-overlay__body .slide{
    flex-basis: 88%;
  }
  .tile-overlay__body .slider.is-9x16 .slide{
    width: clamp(240px, 78vw, 340px);
  }
  /* Panels stay hidden on desktop (shown via overlay) */
  body:not(.page-home):not(.cfg-page):not(.order-page) .bt-block ~ .acc-panel{ display: none; }

  /* Info cards: each takes one column cell */
  body:not(.page-home) .info-card{
    padding: 24px 28px;
  }

  /* Price section — full viewport width, 4 columns × 2 rows */
  body:not(.page-home) .hp-includes{
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: -40px;
    padding: 48px;
  }

  body:not(.page-home) .hp-inc-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  /* Eventos 2025: full-width 6 columns on desktop */
  .ev25-block {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 48px;
  }

  .ev25-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 48px;
    max-width: 1100px;
  }

  .ev25-num {
    font-size: 104px;
  }

  .ev25-city {
    font-size: 28px;
  }

  /* FAQ: single centered column on desktop (qa accordion) */
  .qa{
    gap: 10px;
    padding: 0;
  }

  /* Trust grid: 5 columns on desktop (mobile-only items hidden) */
  .trust-grid{
    grid-template-columns: repeat(5, 1fr);
    max-width: 820px;
    padding: 0;
  }

  /* Slider: show more slides on desktop */
  .slide{
    flex-basis: 48%;
  }
  .slider--hero .slider-track{ padding: 8px 0 28px; }
  .slider--hero .slide{
    flex: 0 0 38%;
  }
  .slider--hero .slide img{
    border-radius: 20px;
  }

  .slider.is-9x16 .slide{
    width: clamp(240px, 30vw, 300px);
  }

  /* Other services: match Opciones full-width layout */
  #otherServices{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 20px 48px 4px;
  }
  .os-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: none;
    padding: 0;
  }
  .os-card{
    flex-direction: column;
    border-radius: 20px;
  }
  .os-card__img{
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    margin: 0;
  }
  .os-card__img picture,
  .os-card__img img{
    position: static;
    aspect-ratio: 1 / 1;
  }
  .os-card__info{
    padding: 14px 16px 18px;
  }

  /* ---------- Sticky bar (service pages) ---------- */
  .stickyinner{
    max-width: 760px;
    flex-direction: row;
  }
  .stickyinner .btn{
    flex: 1;
  }

  /* ---------- FORM / ORDER pages ---------- */
  .cfg-page .container,
  .order-page .container{
    max-width: 1000px;
  }

  .order-page .order-topbar__inner{
    max-width: 1000px;
  }
}

/* ---------- EXTRA-WIDE (≥ 1440px) ---------- */
@media (min-width: 1440px){
  .page-home .container{
    max-width: 1400px;
  }
}

/* Event types: 4 in a row on wide desktop */
@media (min-width: 1200px){
  .evt-card{ flex: 0 0 calc(25% - 9px); }
}

/* ---------- Hover reveal for CTA on home ---------- */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
  .page-home .home-service__cta{
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity .18s ease,
      transform .18s ease,
      max-height .18s ease,
      margin-top .18s ease,
      visibility 0s linear .18s;
  }
  .page-home .home-service:hover .home-service__cta,
  .page-home .home-service:focus-within .home-service__cta{
    max-height: 54px;
    margin-top: 12px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .18s ease, transform .18s ease, max-height .18s ease, margin-top .18s ease;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce){
  .page-home .home-service__cta{
    transition: none;
    transform: none;
  }
}

/* ===== SCROLL FAB (WA + scroll-to-top) ===== */
.scroll-fab{
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.scroll-fab__top,
.scroll-fab__wa{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}
.scroll-fab__top.is-visible,
.scroll-fab__wa.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-fab__top{
  background: #fff;
  color: var(--text);
}
.scroll-fab__wa{
  background: var(--wa);
  color: #fff;
  text-decoration: none;
}
.scroll-fab__wa svg{ width: 24px; height: 24px; }
.scroll-fab__top:active,
.scroll-fab__wa:active{
  transform: scale(.92);
}
@media (min-width: 768px){
  .scroll-fab{ right: 32px; bottom: 32px; }
}

/* ── Footer ── */
/* ── Footer ── */
.hp-footer{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* Top section: 4-col grid */
.hp-footer__top{
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 48px 0 40px;
}
/* Footer width is global — match home (1200px) regardless of page type
   so the layout doesn't shrink on /aviso-legal/ /privacidad/ /cookies/
   or any other narrower-content page. */
.hp-footer .container{ max-width: 1200px; }
.hp-footer__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
  text-align: center;
}
@media (min-width: 768px){
  .hp-footer__grid{
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    text-align: left;
  }
}

/* Column */
.hp-footer__col{ display: flex; flex-direction: column; gap: 4px; }
.hp-footer__col:first-child{ grid-column: 1 / -1; }
@media (min-width: 768px){
  .hp-footer__col:first-child{ grid-column: auto; }
}

/* Brand */
.hp-footer__brand{
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -.02em;
}
.hp-footer__tagline{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Reviews CTA — plain link with a nudge arrow. Centered on mobile
   (matches the centered brand+tagline+social block), left-aligned on
   desktop (matches the left-aligned brand block). */
.hp-footer__cta-reviews{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
@media (min-width: 768px){
  .hp-footer__cta-reviews{ justify-content: flex-start; }
}
.hp-footer__cta-reviews:hover{ color: var(--teal); }
.hp-footer__cta-reviews__arrow{
  font-size: 14px;
  color: var(--teal);
  transition: transform .18s ease;
}
.hp-footer__cta-reviews:hover .hp-footer__cta-reviews__arrow{
  transform: translateX(3px);
}

/* Social */
.hp-footer__social{
  margin: 12px 0 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}
@media (min-width: 768px){
  .hp-footer__social{ justify-content: flex-start; }
}
.hp-footer__social a{
  color: var(--muted);
  transition: color .2s;
}
.hp-footer__social a:hover{
  color: var(--text);
}

/* Section heading */
.hp-footer__heading{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text);
}

/* Links list */
.hp-footer__links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-footer__links a{
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  transition: color .2s;
}
@media (min-width: 768px){
  .hp-footer__links a{ font-size: 14px; }
}
.hp-footer__links a:hover{
  color: var(--text);
}

/* Language switcher */
.hp-footer__lang{
  display: flex;
  gap: 0;
  margin: 14px auto 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 100px;
  overflow: hidden;
  width: fit-content;
}
@media (min-width: 768px){
  .hp-footer__lang{ margin: 14px 0 0; }
}
.hp-footer__lang-btn{
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.hp-footer__lang-btn.is-active{
  background: var(--text);
  color: #fff;
}
.hp-footer__lang-btn:not(.is-active):hover{
  background: rgba(0,0,0,.04);
  color: var(--text);
}

/* Bottom bar */
.hp-footer__bottom{
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 20px 0 calc(var(--sticky-h, 0px) + 24px);
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.hp-footer__bottom .container{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-footer__cities{
  margin: 0;
  letter-spacing: .3px;
}
.hp-footer__cities a{
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.hp-footer__cities a:hover{
  color: var(--text);
}
.hp-footer__legal{
  margin: 0;
}
.hp-footer__legal a{
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.hp-footer__legal a:hover{
  color: var(--text);
}
.hp-footer__copy{
  margin: 0;
  opacity: .6;
}
.hp-footer__address{ margin: 0; }

/* ── Legal pages ── */
/* Pages with no-topbar layout need extra top padding so content doesn't
   sit under the fab-menu (fixed at top: 14px, ~40px tall). */
body.page-type-legal .legal-page{
  padding-top: calc(60px + env(safe-area-inset-top, 0px));
}
.legal-page h1{
  font-size: 22px;
  margin: 0 0 8px;
}
.legal-page h2{
  font-size: 17px;
  margin: 24px 0 8px;
}
.legal-page p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 8px 0;
}
.legal-page a{
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page .table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0;
}
.legal-page .table-wrap table{ margin: 0; min-width: 480px; }
.legal-page table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}
.legal-page th,
.legal-page td{
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal-page th{
  background: var(--bg);
  font-weight: 500;
}
.legal-page ul{
  padding-left: 20px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}
.legal-page li{
  margin-bottom: 4px;
}

/* ── FAB burger menu (all pages with no-topbar) ── */
.fab-menu {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .3s, transform .3s;
}
.fab-menu.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fab-menu.is-visible.is-faded {
  opacity: 0.5;
}
.fab-menu__trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s;
}
.fab-menu__trigger:active { transform: scale(.92); }
.fab-menu__trigger svg { width: 20px; height: 20px; }
.fab-menu.is-open .fab-menu__trigger svg line:nth-child(1) {
  transform: rotate(45deg); transform-origin: center; transition: transform .25s;
}
.fab-menu.is-open .fab-menu__trigger svg line:nth-child(2) {
  opacity: 0; transition: opacity .15s;
}
.fab-menu.is-open .fab-menu__trigger svg line:nth-child(3) {
  transform: rotate(-45deg); transform-origin: center; transition: transform .25s;
}
.fab-menu__trigger svg line { transition: transform .25s, opacity .15s; }
.fab-menu__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fab-menu__item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: scale(0) translateY(-10px);
  transition: opacity .2s, transform .25s;
  position: relative;
}
.fab-menu__item svg { width: 18px; height: 18px; }
.fab-menu__item:active,
.fab-menu.is-open .fab-menu__item:active { transform: scale(.88); }
.fab-menu__item--wa { background: var(--wa); color: #fff; }
.fab-menu__item--cart .site-cartdot {
  position: absolute; top: 2px; right: 2px;
}
.fab-menu.is-open .fab-menu__item {
  opacity: 1; transform: scale(1) translateY(0);
}
.fab-menu.is-open .fab-menu__item:nth-child(1) { transition-delay: .05s; }
.fab-menu.is-open .fab-menu__item:nth-child(2) { transition-delay: .1s; }
.fab-menu.is-open .fab-menu__item:nth-child(3) { transition-delay: .15s; }
.fab-menu.is-open .fab-menu__item:nth-child(4) { transition-delay: .2s; }
@media (min-width: 768px) {
  .fab-menu { top: calc(40px + env(safe-area-inset-top, 0px)); left: 28px; }
  .fab-menu__trigger {
    width: 66px;
    height: 66px;
    background: #51ABB2;
    color: #fff;
    box-shadow: 0 4px 16px rgba(81,171,178,.35);
  }
  .fab-menu__trigger svg { width: 30px; height: 30px; }
  .fab-menu__trigger svg line { stroke: #fff; }
}