/* ============================================================
   ESTUDI DENTAL CARRERA — Main Stylesheet
   Beix Pedra #C1B2A2 · Gris Boira #7E7E82
   Playfair Display + N27
   ============================================================ */

/* ============================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   Opts every same-origin navigation (Chrome 126+, Safari 18+)
   into a smooth fade + rise. Unsupported browsers ignore this
   block and do standard page loads — no fallback needed.
   ============================================================ */
@view-transition { navigation: auto; }

/* The outgoing page dissolves up; the incoming page rises into
   place. Both share the ease-out-quart the rest of the site uses.
   Different durations (outgoing shorter) avoid the double-fade
   "wash" feel — the new page starts appearing before the old is
   fully gone. */
::view-transition-old(root) {
  animation: edcPageLeave 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
::view-transition-new(root) {
  animation: edcPageEnter 460ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes edcPageLeave {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes edcPageEnter {
  from { opacity: 0; transform: translateY(14px); }
}

/* Nav and footer persist visually across navigations — naming them
   takes them out of the root snapshot so they stay fixed instead
   of flashing. Honours the editorial continuity: the frame stays,
   the content changes. */
.nav    { view-transition-name: edc-nav; }
.footer { view-transition-name: edc-footer; }
::view-transition-group(edc-nav),
::view-transition-group(edc-footer) {
  animation-duration: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(edc-nav),
  ::view-transition-group(edc-footer) {
    animation: none;
  }
}

/* ---------- TOKENS ---------- */
:root {
  --beix:        #C1B2A2;   /* decorative only — too light for text on light bg */
  --beix-light:  #DDD1C6;
  --beix-xlight: #EDE6DE;
  --beix-bg:     #F4EFE9;
  --beix-text:   oklch(43% 0.06 52);   /* ~#745C4C · 5.3:1 on white — text on light bg */
  --beix-rich:   oklch(54% 0.055 56);  /* ~#9A7860 · 3.3:1 on white — large display nums */
  --beix-deep:   oklch(40% 0.065 52);  /* ~#685040 · 6.1:1 on white — CTA / marquee bg */
  --success:     oklch(52% 0.13 158);  /* semantic success green */
  --gris:        #6B6B6F;
  --gris-dark:   #4A4A4E;
  --ink:         #2A2A2C;
  --white:       #FDFCFA;
  --off-white:   #FAF8F5;
  --cream:       #F2EDE6;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'N27', 'Inter', system-ui, sans-serif;
  /* Signature hand only — loaded on the home pages, never for body copy. */
  --font-hand:    'Nothing You Could Do', 'Segoe Script', cursive;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  24px;
  --radius-xl:  40px;

  --shadow-sm:  0 2px 12px rgba(42,42,44,.06);
  --shadow-md:  0 8px 32px rgba(42,42,44,.10);
  --shadow-lg:  0 24px 60px rgba(42,42,44,.14);

  --ease:   cubic-bezier(0.23, 1, 0.32, 1);
  --trans:  0.25s cubic-bezier(0.23, 1, 0.32, 1);

  --max-w: 1280px;
  --pad:   clamp(20px, 5vw, 80px);
}

/* ---------- FONTS ---------- */
/* WOFF2 first (modern, ~40% smaller), OTF fallback for very old browsers */
@font-face { font-family:'N27'; src:url('../fonts/N27-Light.woff2')   format('woff2'), url('../fonts/N27-Light.otf')   format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'N27'; src:url('../fonts/N27-Regular.woff2') format('woff2'), url('../fonts/N27-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'N27'; src:url('../fonts/N27-Medium.woff2')  format('woff2'), url('../fonts/N27-Medium.otf')  format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'N27'; src:url('../fonts/N27-Bold.woff2')    format('woff2'), url('../fonts/N27-Bold.otf')    format('opentype'); font-weight:700; font-display:swap; }

.form-honeypot {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { font-family:var(--font-body); font-weight:300; color:var(--ink); background:var(--off-white); -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* Balanced line breaks on headings sitewide — the ragged edge of a
   wrapped title should never look lopsided. */
h1, h2, h3, h4 { text-wrap:balance; }
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font:inherit; }
input, select, textarea { font:inherit; }

/* ---------- FOCUS & SKIP LINK ---------- */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--beix-text);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); outline: none; }

/* ---------- UTILS ---------- */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }

/* Anchor targets land clear of the fixed 88px header instead of tucking
   underneath it (affects both same-page and cross-page #anchor links). */
section[id] { scroll-margin-top: 96px; }

.label {
  display:inline-block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.85rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--beix-text);
  margin-bottom:1rem;
}

.section-header { text-align:center; max-width:600px; margin:0 auto 4rem; }
.section-header h2 { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:400; line-height:1.15; color:var(--ink); margin-bottom:1rem; }
.section-header h2 em { font-style:italic; color:var(--beix-text); }
.section-header p { font-size:1rem; color:var(--gris); line-height:1.75; }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:100px;
  font-family:var(--font-body); font-weight:400; font-size:0.875rem;
  letter-spacing:0.04em; white-space:nowrap; cursor:pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease),
    border-color 200ms var(--ease), box-shadow 200ms var(--ease),
    transform 160ms ease-out;
}
.btn:active { transform:scale(0.97); transition-duration:60ms; }
.btn--sm  { padding:12px 20px; font-size:0.8rem; min-height:44px; }
.btn--lg  { padding:16px 36px; font-size:0.9375rem; }
.btn--primary { background:var(--beix-deep); color:var(--white); }
.btn--outline { border:1.5px solid var(--ink); color:var(--ink); }
.btn--ghost { border:1.5px solid rgba(255,255,255,.45); color:var(--white); }
.btn--dark { background:var(--ink); color:var(--white); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background:var(--gris-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .btn--primary:active { transform:translateY(-2px) scale(0.97); }
  .btn--outline:hover { background:var(--ink); color:var(--white); }
  .btn--ghost:hover { border-color:var(--white); background:rgba(255,255,255,.1); }
  .btn--dark:hover { background:var(--gris-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .btn--dark:active { transform:translateY(-2px) scale(0.97); }
}

/* ---------- REVEAL ---------- */
.reveal { opacity:0; transform:translateY(12px) scale(0.98); transition:opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay:var(--delay,0ms); }
.reveal.visible { opacity:1; transform:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 var(--pad);
  transition:background var(--trans), box-shadow var(--trans);
}
.nav.scrolled {
  background:rgba(250,248,245,.93);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(42,42,44,.08);
}
/* Thin editorial hairline under nav in hero state (photo background) */
.nav--hero:not(.scrolled)::after {
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:rgba(255,255,255,.14);
  pointer-events:none;
}
.nav__inner {
  display:flex; align-items:center; gap:2rem;
  max-width:var(--max-w); margin:0 auto; height:88px;
}
.nav__logo { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav__logo-icon {
  height:72px; width:auto;
  transition:filter var(--trans), transform 380ms var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .nav__logo:hover .nav__logo-icon { transform:rotate(-7deg) scale(1.1); }
}
.nav__logo-text { display:flex; flex-direction:column; line-height:1.1; }
.nav__logo-brand { font-size:0.62rem; font-weight:300; letter-spacing:0.14em; text-transform:uppercase; color:var(--gris); transition:color var(--trans); }
.nav__logo-location { font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--ink); transition:color var(--trans); }

/* Hero nav state */
.nav--hero .nav__logo-brand,
.nav--hero .nav__logo-location { color:var(--white); }
.nav--hero .nav__logo-icon { filter:brightness(0) invert(1); }
.nav--hero .nav__links a { color:rgba(255,255,255,.8); }
.nav--hero .nav__links a:hover { color:var(--white); }
.nav--hero .btn--outline { border-color:rgba(255,255,255,.5); color:var(--white); }
.nav--hero .btn--outline:hover { background:var(--white); color:var(--ink); border-color:var(--white); }
/* Scrolled overrides */
.nav.scrolled.nav--hero .nav__logo-brand { color:var(--gris); }
.nav.scrolled.nav--hero .nav__logo-location { color:var(--ink); }
.nav.scrolled.nav--hero .nav__logo-icon { filter:none; }
.nav.scrolled.nav--hero .nav__links a { color:var(--gris-dark); }
.nav.scrolled.nav--hero .btn--outline { border-color:var(--ink); color:var(--ink); }
.nav.scrolled.nav--hero .btn--outline:hover { background:var(--ink); color:var(--white); }

/* ---------- NAV · META (location indicator next to logo) ---------- */
.nav__meta {
  display:none; align-items:center; gap:0.55rem;
  margin-left:0.25rem; padding-left:1.25rem;
  border-left:1px solid var(--beix-xlight);
  height:28px;
  transition: border-color var(--trans);
}
.nav__meta-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--beix-deep);
  box-shadow:0 0 0 2px rgba(193,178,162,0.22);
  transition: background var(--trans), box-shadow var(--trans);
}
.nav__meta-text {
  font-family:var(--font-body); font-size:0.7rem; font-weight:400;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--beix-text);
  transition: color var(--trans);
}
@media (min-width:1100px) { .nav__meta { display:inline-flex; } }

/* Hero state — meta becomes white-ghosted */
.nav--hero .nav__meta { border-left-color:rgba(255,255,255,.22); }
.nav--hero .nav__meta-text { color:rgba(255,255,255,.78); }
.nav--hero .nav__meta-dot { background:var(--white); box-shadow:0 0 0 2px rgba(255,255,255,0.26); }
.nav.scrolled.nav--hero .nav__meta { border-left-color:var(--beix-xlight); }
.nav.scrolled.nav--hero .nav__meta-text { color:var(--beix-text); }
.nav.scrolled.nav--hero .nav__meta-dot { background:var(--beix-deep); box-shadow:0 0 0 2px rgba(193,178,162,0.22); }

/* ---------- NAV · LINKS (numbered, editorial) ---------- */
.nav__links { display:flex; gap:1.6rem; margin-left:auto; align-items:center; }
.nav__links a {
  display:inline-flex; align-items:baseline; gap:0.55em;
  font-size:0.875rem; font-weight:400; color:var(--gris-dark);
  letter-spacing:0.02em; transition:color var(--trans); position:relative;
  padding:0.25rem 0;
}
.nav__num {
  font-family:var(--font-body);
  font-size:0.66rem; font-weight:400;
  letter-spacing:0.14em; color:var(--beix-text);
  transition: color var(--trans), font-weight var(--trans);
  font-variant-numeric: tabular-nums;
}
.nav__label { transition: letter-spacing var(--trans); }
.nav__links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:100%; height:1px; background:var(--beix);
  transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--ease), background 180ms var(--ease);
}
.nav__links a:hover::after { transform:scaleX(1); }
.nav__links a:hover, .nav__links a:hover .nav__num { color:var(--ink); }

/* Active state — stronger: filled deep rule, ink label, bolder number */
.nav__links a.active, .nav__links a[aria-current="page"] {
  color:var(--ink);
}
.nav__links a.active .nav__num,
.nav__links a[aria-current="page"] .nav__num {
  color:var(--beix-deep); font-weight:500;
}
.nav__links a.active::after,
.nav__links a[aria-current="page"]::after {
  transform:scaleX(1); background:var(--beix-deep);
}

/* Hero overrides — numbers and underline adapt to white-on-photo context */
.nav--hero .nav__num { color:rgba(255,255,255,.58); }
.nav--hero .nav__links a:hover .nav__num { color:var(--white); }
.nav--hero .nav__links a.active,
.nav--hero .nav__links a[aria-current="page"] { color:var(--white); }
.nav--hero .nav__links a.active .nav__num,
.nav--hero .nav__links a[aria-current="page"] .nav__num { color:var(--white); }
.nav--hero .nav__links a::after { background:rgba(255,255,255,.42); }
.nav--hero .nav__links a.active::after,
.nav--hero .nav__links a[aria-current="page"]::after { background:var(--white); }
.nav.scrolled.nav--hero .nav__num { color:var(--beix-text); }
.nav.scrolled.nav--hero .nav__links a:hover .nav__num { color:var(--ink); }
.nav.scrolled.nav--hero .nav__links a.active .nav__num,
.nav.scrolled.nav--hero .nav__links a[aria-current="page"] .nav__num { color:var(--beix-deep); }
.nav.scrolled.nav--hero .nav__links a::after { background:var(--beix); }
.nav.scrolled.nav--hero .nav__links a.active::after,
.nav.scrolled.nav--hero .nav__links a[aria-current="page"]::after { background:var(--beix-deep); }

/* ---------- NAV · LANGUAGE SWITCHER ---------- */
.nav__lang {
  display:inline-flex; align-items:center; gap:0.45rem;
  margin-left:1rem; padding-left:1rem;
  border-left:1px solid var(--beix-light);
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  font-variant-numeric: tabular-nums;
}
.nav__lang-link {
  color:var(--beix-text); text-decoration:none;
  padding:0.2rem 0; transition:color var(--trans);
  font-weight:400;
}
@media (max-width:768px) { .nav__lang { display:none; } }
.nav__lang-link:hover { color:var(--ink); }
.nav__lang-link.is-active { color:var(--ink); font-weight:500; }
.nav__lang-sep { color:var(--beix); user-select:none; }

.nav--hero .nav__lang { border-left-color:rgba(255,255,255,.18); }
.nav--hero .nav__lang-link { color:rgba(255,255,255,.55); }
.nav--hero .nav__lang-link:hover,
.nav--hero .nav__lang-link.is-active { color:var(--white); }
.nav--hero .nav__lang-sep { color:rgba(255,255,255,.28); }
.nav.scrolled.nav--hero .nav__lang { border-left-color:var(--beix-light); }
.nav.scrolled.nav--hero .nav__lang-link { color:var(--beix-text); }
.nav.scrolled.nav--hero .nav__lang-link:hover,
.nav.scrolled.nav--hero .nav__lang-link.is-active { color:var(--ink); }
.nav.scrolled.nav--hero .nav__lang-sep { color:var(--beix); }

/* Mobile menu language switcher */
.mobile-menu__lang {
  display:flex; align-items:center; justify-content:center; gap:0.75rem;
  margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid rgba(26,24,22,0.08);
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
}
.mobile-menu__lang-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  color:var(--beix-text); text-decoration:none;
  padding:0.35rem 0.75rem; transition:color var(--trans);
}
.mobile-menu__lang-link:hover { color:var(--ink); }
.mobile-menu__lang-link.is-active { color:var(--ink); font-weight:500; }
.mobile-menu__lang-sep { color:var(--beix); user-select:none; }

/* ---------- NAV · CTA (arrow that shifts on hover) ---------- */
.nav__cta { margin-left:.75rem; gap:0.55rem; }
.nav__cta-arrow {
  transition: transform 240ms var(--ease);
  flex-shrink:0;
}
.nav__cta:hover .nav__cta-arrow { transform: translateX(3px); }
.nav__burger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px; margin-left:auto;
  background:transparent; border:none; padding:0; cursor:pointer;
}
.nav__burger span {
  display:block; width:24px; height:1.5px;
  background:var(--ink); border-radius:1px;
  transition:transform 220ms var(--ease), opacity 220ms var(--ease), background 220ms var(--ease);
  transform-origin:center;
}
.nav--hero:not(.scrolled) .nav__burger span { background:var(--white); }

/* ---------- MOBILE MENU — editorial full-screen ---------- */
.mobile-menu {
  position:fixed; inset:0; z-index:110;  /* above .nav (z-index:100) */
  background:var(--off-white);
  display:flex; flex-direction:column;
  padding: 20px var(--pad) 28px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
  overflow-y: auto;
}
.mobile-menu.open {
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity 320ms var(--ease), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .mobile-menu.open { transition: opacity 160ms linear, visibility 0s linear 0s; }
}

.mobile-menu__top {
  display:flex; align-items:center; justify-content:space-between;
  height:88px;
  margin-bottom: clamp(24px, 5vh, 48px);
}
.mobile-menu__brand img { height:56px; width:auto; }
.mobile-menu__close {
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gris-dark); cursor:pointer;
  background:transparent; border:none; padding:0;
  transition: color 180ms var(--ease), transform 220ms var(--ease);
}
.mobile-menu__close:hover { color:var(--ink); transform:rotate(90deg); }

.mobile-menu__nav {
  display:flex; flex-direction:column;
  gap: clamp(0.6rem, 1.8vh, 1rem);
  margin-bottom: auto;
}
.mobile-menu__link {
  display:flex; align-items:baseline; gap: clamp(1rem, 4vw, 1.6rem);
  font-family:var(--font-display);
  font-size:clamp(2rem, 7.5vw, 3.25rem);
  font-weight:400; line-height:1.05;
  color:var(--ink);
  padding: 0.55rem 0 0.65rem;
  border-bottom:1px solid var(--beix-xlight);
  transition: color 220ms var(--ease), letter-spacing 220ms var(--ease);
}
.mobile-menu__link:hover,
.mobile-menu__link:active { color:var(--beix-text); }
.mobile-menu__link:last-of-type { border-bottom:none; }
.mobile-menu__num {
  font-family:var(--font-body);
  font-size:0.72rem; font-weight:400;
  letter-spacing:.14em; color:var(--beix-text);
  padding-top: 0.9em;
  min-width: 2.2em; flex-shrink:0;
}
.mobile-menu__label { flex:1; }

.mobile-menu__footer {
  display:flex; flex-direction:column;
  gap: 1.1rem;
  padding-top: clamp(20px, 3vh, 32px);
  border-top:1px solid var(--beix-xlight);
}
.mobile-menu__cta { align-self:flex-start; }
.mobile-menu__seus {
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  border:1px solid var(--beix-xlight);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.mobile-menu__seu {
  padding: 14px 18px;
  display:flex; flex-direction:column; gap:3px;
  color:var(--ink);
  transition: background 180ms var(--ease);
  border-right: 1px solid var(--beix-xlight);
  min-height: 64px;
}
.mobile-menu__seu:last-child { border-right:none; }
.mobile-menu__seu:hover,
.mobile-menu__seu:active { background:var(--cream); }
.mobile-menu__seu-label {
  font-size:0.66rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--beix-text);
}
.mobile-menu__seu-phone {
  font-family:var(--font-display);
  font-size:1.05rem; font-weight:500;
  color:var(--ink);
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero {
  position:relative; min-height:100svh;
  display:flex; align-items:center; overflow:hidden;
  background:var(--ink); color:var(--white);
}
.hero__bg {
  position:absolute; inset:0;
  /* The modernist entrance hall (PRODUCT.md principle 2: the building is
     the hero). Source is portrait, cropped hard into this 16:9 band —
     position:top keeps the painted ceiling and carved woodwork in frame
     and crops out the glass door lower in the shot (building-directory
     signage + a surveillance sticker that read as visual noise here). */
  background-color:var(--ink);
  background-image:url('../img/home/hero.webp');
  background-image:image-set(url('../img/home/hero.webp') type('image/webp'), url('../img/home/hero.jpg') type('image/jpeg'));
  background-size:cover; background-position:center top;
}
/* Below ~768px the hero fills 100svh, so cover() shows the source's full
   height with no vertical slack to crop with — position can't hide the
   glass door lower in the shot. Swap to a pre-cropped mobile source that
   ends above the doorway instead. */
@media (max-width:768px) {
  .hero__bg {
    background-image:url('../img/home/hero-mobile.webp');
    background-image:image-set(url('../img/home/hero-mobile.webp') type('image/webp'), url('../img/home/hero-mobile.jpg') type('image/jpeg'));
  }
}
.hero__gradient {
  position:absolute; inset:0;
  /* Two scrims over the photo: a top band so the white nav stays legible,
     and a left-heavy wash so the headline reads while the photo breathes
     through on the right. Warm ink so it sits in the beix system. */
  background:
    linear-gradient(180deg, oklch(18% 0.02 55 / 0.55) 0%, transparent 20%),
    linear-gradient(100deg,
      oklch(20% 0.02 55 / 0.93) 0%,
      oklch(20% 0.02 55 / 0.78) 40%,
      oklch(22% 0.03 55 / 0.44) 74%,
      oklch(24% 0.04 55 / 0.28) 100%);
}
/* On phones the headline spans full width, so darken the scrim more
   evenly (top-to-bottom) instead of left-heavy, to keep it legible. */
@media (max-width:768px) {
  .hero__gradient {
    background:
      linear-gradient(180deg, oklch(18% 0.02 55 / 0.5) 0%, transparent 16%),
      linear-gradient(165deg,
        oklch(19% 0.02 55 / 0.9) 0%,
        oklch(20% 0.02 55 / 0.76) 52%,
        oklch(22% 0.03 55 / 0.56) 100%);
  }
}
.hero__orb {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:floatOrb 10s ease-in-out infinite;
}
.hero__orb--1 { width:700px; height:700px; top:-200px; right:-150px; background:radial-gradient(circle, rgba(193,178,162,.13) 0%, transparent 70%); }
.hero__orb--2 { width:500px; height:500px; bottom:-150px; left:-80px; background:radial-gradient(circle, rgba(126,126,130,.09) 0%, transparent 70%); animation-delay:-4s; }
@keyframes floatOrb { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-20px,-30px) scale(1.06);} }

.hero__content {
  position:relative; z-index:2; width:100%; max-width:var(--max-w);
  margin:0 auto; padding:130px var(--pad) 80px;
}
.hero__eyebrow { font-size:0.72rem; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--beix-light); margin-bottom:1.5rem; }
.hero__title { font-family:var(--font-display); font-size:clamp(3rem,7vw,6rem); font-weight:400; line-height:1.07; color:var(--white); margin-bottom:1.75rem; max-width:700px; }
.hero__title em { font-style:italic; color:var(--beix-light); }
.hero__subtitle { font-size:clamp(1rem,1.5vw,1.1rem); font-weight:300; color:rgba(255,255,255,.92); line-height:1.75; max-width:520px; margin-bottom:2.5rem; text-wrap:balance; }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }

.hero__scroll-hint { position:absolute; bottom:40px; right:var(--pad); display:flex; flex-direction:column; align-items:center; gap:12px; color:rgba(255,255,255,.58); font-size:0.68rem; letter-spacing:.15em; text-transform:uppercase; }
.hero__scroll-line { width:1px; height:60px; background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent); animation:scrollPulse 2.2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.35;} 50%{opacity:.75;} }

/* ---------- MARQUEE ---------- */
.marquee { background:var(--beix-deep); overflow:hidden; padding:14px 0; }
.marquee__track { display:flex; white-space:nowrap; animation:marquee 30s linear infinite; width:max-content; }
.marquee__track span { font-size:0.78rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--white); padding:0 8px; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-33.333%);} }

/* ============================================================
   HOME — ABOUT
   ============================================================ */
.about { padding:clamp(80px,10vw,140px) 0; background:var(--off-white); }
.about__top { display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(32px,5vw,72px); align-items:start; margin-bottom:clamp(48px,6vw,72px); }
.about__heading { font-family:var(--font-display); font-size:clamp(2.5rem,4.5vw,3.8rem); font-weight:400; line-height:1.1; color:var(--ink); margin-bottom:1.75rem; text-wrap:balance; }
.about__heading em { font-style:italic; color:var(--beix-text); }
.about__body { font-size:1rem; line-height:1.8; color:var(--gris); margin-bottom:1.25rem; max-width:480px; }

/* First-visit workflow: a collapsible list below the top row, four
   moments the visitor can expand one at a time. Numbered disclosures
   carry the predictability principle from PRODUCT.md (Principle 5) as
   visible evidence, not a claim, while staying compact by default. */
.about__process {
  position:relative;
  padding:clamp(28px,3.5vw,44px);
  background:var(--white);
  border:1px solid var(--beix-xlight);
  border-radius:var(--radius-lg);
}
.about__process-head { margin-bottom:clamp(20px,2.5vw,28px); }
.about__process-label { display:block; margin-bottom:0.9rem; }
.about__process-title {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.15;
  color:var(--ink); margin:0; text-wrap:balance;
}
.about__process-title em { font-style:italic; color:var(--beix-text); }
.about__process-list { border-top:1px solid var(--beix-xlight); }
.about__process-item { border-bottom:1px solid var(--beix-xlight); }
.about__process-toggle {
  width:100%; display:flex; align-items:center; gap:18px;
  padding:20px 2px; background:none; border:none; cursor:pointer; text-align:left;
}
.about__process-num {
  flex-shrink:0; width:2.2ch;
  font-family:var(--font-display); font-weight:400;
  font-size:1rem; letter-spacing:0.02em;
  color:var(--beix-text); line-height:1.4;
}
.about__process-toggle-title {
  flex:1;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.2;
  color:var(--ink);
}
.about__process-icon { position:relative; flex-shrink:0; width:20px; height:20px; transition:transform 0.3s var(--ease); }
.about__process-icon::before, .about__process-icon::after {
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:1.6px; background:var(--beix-deep);
  transform:translate(-50%,-50%); transition:opacity 0.3s var(--ease);
}
.about__process-icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.about__process-toggle[aria-expanded="true"] .about__process-icon { transform:rotate(180deg); }
.about__process-toggle[aria-expanded="true"] .about__process-icon::after { opacity:0; }
.about__process-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.4s var(--ease); }
.about__process-toggle[aria-expanded="true"] + .about__process-panel { grid-template-rows:1fr; }
.about__process-panel-inner { overflow:hidden; }
.about__process-panel-inner p {
  padding:0 2px 20px calc(2.2ch + 18px);
  margin:0; font-size:1rem; line-height:1.65;
  color:var(--gris); max-width:52ch;
}
.about__process-foot {
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--beix-xlight);
  font-size:0.82rem; line-height:1.55;
  color:var(--beix-text); font-style:italic;
  max-width:44ch;
}
@media (prefers-reduced-motion: reduce) {
  .about__process-panel, .about__process-icon { transition:none; }
}

/* ============================================================
   HOME — SERVICES GRID
   ============================================================ */
.services { padding:clamp(80px,10vw,140px) 0; background:var(--cream); }

/* Editorial asymmetric header: label + H2 on the left, intro on
   the right, aligned to baseline. Replaces the centred stock block. */
.services__head {
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(32px,5vw,80px);
  align-items:end;
  margin-bottom:clamp(48px,6vw,72px);
  padding-bottom:2rem;
  border-bottom:1px solid var(--beix-light);
}
.services__head-left { display:flex; flex-direction:column; gap:0.9rem; }
.services__title {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem,4.2vw,3.4rem); line-height:1.08;
  color:var(--ink); margin:0;
}
.services__title em { font-style:italic; color:var(--beix-text); }
.services__head-lede {
  font-size:clamp(0.95rem,1.25vw,1.05rem); line-height:1.7;
  color:var(--gris); margin:0; max-width:42ch; text-wrap:balance;
}
@media (max-width:768px) {
  .services__head { grid-template-columns:1fr; align-items:start; gap:1.25rem; }
}

.services__grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--beix-xlight); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--beix-xlight);
}

.service-card {
  background:var(--off-white); padding:clamp(28px,3.2vw,44px);
  display:flex; flex-direction:column; gap:0.9rem;
  transition:background 240ms var(--ease);
  position:relative; isolation:isolate;
}
@media (hover: hover) and (pointer: fine) {
  /* Exclude the featured tile: it has a photo background, and the white
     fill would wipe the image and hide its white text on hover. Photo
     tiles are excluded for the same reason — the white fill would flash
     underneath the fading photo. */
  .service-card:not(.service-card--featured):not(.service-card--photo):hover { background:var(--white); }
}

/* Photo reveal on hover: the card's ::after (::before is taken by the
   hairline) carries the image. At z-index:-1 inside the card's own
   stacking context (isolation:isolate above) it paints over the card
   background but under all content and under the title anchor's
   full-tile hit area, so the click target is untouched.
   The photo settles from scale(1.06) to 1 — the tile appears to open
   outwards without the grid ever reflowing. Desktop pointers only:
   inside this media query, touch devices never fetch the images. */
@media (hover: hover) and (pointer: fine) {
  .service-card--photo::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background-color:var(--ink);
    background-size:cover; background-position:center;
    opacity:0; transform:scale(1.06);
    transition:opacity 320ms var(--ease), transform 700ms var(--ease);
    pointer-events:none;
  }
  .service-card--photo:is(:hover,:focus-within)::after { opacity:1; transform:scale(1); }

  /* Scrim over each photo, slightly denser than the featured tile's:
     body copy here spans the whole tile, not just the dark corner.
     The plain url() declaration comes first as the fallback; browsers
     with image-set() support take the second. */
  .service-card--photo-endo::after {
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      url('../img/seus/slideshow/sl-4-gabinet.jpg');
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      image-set(url('../img/seus/slideshow/sl-4-gabinet.webp') type('image/webp'), url('../img/seus/slideshow/sl-4-gabinet.jpg') type('image/jpeg'));
  }
  .service-card--photo-perio::after {
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      url('../img/seus/slideshow/sl-6-detall.jpg');
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      image-set(url('../img/seus/slideshow/sl-6-detall.webp') type('image/webp'), url('../img/seus/slideshow/sl-6-detall.jpg') type('image/jpeg'));
  }
  .service-card--photo-implants::after {
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      url('../img/serveis/implants-planificacio.jpg');
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      image-set(url('../img/serveis/implants-planificacio.webp') type('image/webp'), url('../img/serveis/implants-planificacio.jpg') type('image/jpeg'));
  }
  .service-card--photo-estetica::after {
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      url('../img/serveis/estetica-llum.jpg');
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      image-set(url('../img/serveis/estetica-llum.webp') type('image/webp'), url('../img/serveis/estetica-llum.jpg') type('image/jpeg'));
  }
  .service-card--photo-pedo::after {
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      url('../img/seus/slideshow-tremp/ts-3-espera.jpg');
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      image-set(url('../img/seus/slideshow-tremp/ts-3-espera.webp') type('image/webp'), url('../img/seus/slideshow-tremp/ts-3-espera.jpg') type('image/jpeg'));
  }
  .service-card--photo-orto::after {
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      url('../img/serveis/ortodoncia-model.jpg');
    background-image:
      linear-gradient(160deg, oklch(16% 0.02 55 / 0.92) 0%, oklch(18% 0.02 55 / 0.72) 50%, oklch(22% 0.03 55 / 0.6) 100%),
      image-set(url('../img/serveis/ortodoncia-model.webp') type('image/webp'), url('../img/serveis/ortodoncia-model.jpg') type('image/jpeg'));
  }

  /* Text lifts to white over the scrim. The photo fade (320ms) leads and
     the colour flips follow at 240ms + 60ms delay, so the copy never sits
     light-on-light mid-transition. */
  .service-card--photo:is(:hover,:focus-within) .service-card__title,
  .service-card--photo:is(:hover,:focus-within) .service-card__title a { color:var(--white); transition-delay:60ms; }
  .service-card--photo:is(:hover,:focus-within) .service-card__title a {
    background-image:linear-gradient(var(--beix-light),var(--beix-light));
  }
  .service-card--photo:is(:hover,:focus-within) p { color:rgba(253,252,250,.88); transition-delay:60ms; }
  .service-card--photo:is(:hover,:focus-within) .service-card__arrow { color:var(--white); }
  .service-card--photo:is(:hover,:focus-within) .service-card__tag {
    background:var(--beix-deep); color:var(--white);
  }
  .service-card--photo:is(:hover,:focus-within)::before { background:rgba(242,230,214,.35); }
}

/* Card heading: Playfair medium, the anchor tag expands to cover
   the whole card (::after absolute inset), so the entire tile is
   clickable while body text remains selectable. */
.service-card__title {
  font-family:var(--font-display); font-size:1.3rem; font-weight:500;
  color:var(--ink); line-height:1.2; margin:0;
  transition:color 240ms var(--ease);
}
.service-card__title a {
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--beix-text),var(--beix-text));
  background-size:0 1px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size 320ms var(--ease), color 240ms var(--ease);
}
.service-card__title a::after {
  content:""; position:absolute; inset:0; z-index:1;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card__title a { background-size:100% 1px; }
}
.service-card__title a:focus-visible {
  outline:2px solid var(--beix-text); outline-offset:4px; border-radius:2px;
}

.service-card p {
  font-size:1rem; line-height:1.7; color:var(--gris);
  flex:1; margin:0; max-width:38ch;
  transition:color 240ms var(--ease);
}

/* Footer row: category chip left, arrow right. Arrow slides right
   on hover — the only moving part in the card, lightweight. */
.service-card__foot {
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:0.6rem;
}
.service-card__tag {
  font-family:var(--font-body); font-size:0.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris-dark); background:var(--beix-xlight);
  padding:5px 11px; border-radius:999px;
  align-self:flex-start;
  transition:background 240ms var(--ease), color 240ms var(--ease);
}
.service-card__tag--lead {
  color:var(--white); background:var(--beix-deep);
  align-self:flex-start;
}
.service-card__arrow {
  display:inline-flex; color:var(--beix-text);
  transition:transform 320ms var(--ease), color 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card__arrow { transform:translateX(4px); color:var(--ink); }
}

/* Subtle top hairline anchored per tile — kept from the earlier
   spec, honours DESIGN.md "flat at rest" with a purposeful hover. */
.service-card::before {
  content:""; position:absolute; top:0;
  left:clamp(28px,3.2vw,44px); right:clamp(28px,3.2vw,44px);
  height:1px; background:var(--beix-light);
  transform:scaleX(0); transform-origin:left;
  transition:transform 480ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover::before { transform:scaleX(1); }
}

/* ---------- Featured tile (ATM/bruxisme) ---------- */
.service-card--featured {
  grid-column:1 / 3; grid-row:1 / 4;
  color:var(--white);
  padding:clamp(36px,4vw,60px);
  gap:1.2rem; overflow:hidden;
  /* Real ATM/diagnosis photo behind a strong warm scrim — a photographic
     feature tile. Gradient layer stacks above the image (first = top).
     Densities are set by measurement, not taste: the tile crop puts a
     bright surgical cap directly under the body copy, and at the previous
     0.9/0.66/0.5 that copy measured 3.98:1 — under AA. These values put
     it at 5.8:1 while the face stays legible through the scrim. */
  background-color:var(--ink);
  background-image:
    linear-gradient(145deg, oklch(16% 0.02 55 / 0.94) 0%, oklch(18% 0.02 55 / 0.78) 46%, oklch(22% 0.03 55 / 0.58) 100%),
    url('../img/home/atm-tile.webp');
  background-image:
    linear-gradient(145deg, oklch(16% 0.02 55 / 0.94) 0%, oklch(18% 0.02 55 / 0.78) 46%, oklch(22% 0.03 55 / 0.58) 100%),
    image-set(url('../img/home/atm-tile.webp') type('image/webp'), url('../img/home/atm-tile.jpg') type('image/jpeg'));
  background-size:cover; background-position:center;
}
.service-card--featured::before {
  background:rgba(242,230,214,.22);
  transform:scaleX(1);
  transition:none;
}
.service-card--featured .service-card__title {
  font-size:clamp(1.9rem, 3.2vw, 2.9rem); line-height:1.08;
  color:var(--white); margin-top:0.15rem; max-width:15ch;
}
.service-card--featured .service-card__title em {
  font-style:italic; color:var(--beix-light);
}
.service-card--featured .service-card__title a {
  background-image:linear-gradient(var(--beix-light),var(--beix-light));
}
.service-card--featured .service-card__lede {
  font-size:clamp(1rem, 1.4vw, 1.1rem); line-height:1.55;
  color:var(--beix-light); font-weight:400;
  max-width:36ch; flex:none; margin-top:0.25rem;
}
.service-card--featured p:not(.service-card__lede) {
  font-size:0.9375rem; line-height:1.75;
  color:rgba(253,252,250,.72); max-width:46ch;
}
.service-card--featured .service-card__cta {
  margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:0.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--beix-light);
  transition:color 240ms var(--ease);
}
.service-card--featured .service-card__cta svg {
  transition:transform 320ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .service-card--featured:hover .service-card__cta { color:var(--white); gap:14px; }
  .service-card--featured:hover .service-card__cta svg { transform:translateX(3px); }
}

/* ATM motif: stroke-drawn on reveal, sits bottom-right as the
   one narrative ornament. Echoes the hero constellation and the
   .sdc-illo grammar — same stroke-width, same ease. Warm beige
   at low alpha so it reads as texture, not decoration. */
.service-card__motif {
  position:absolute; right:-18px; bottom:-24px;
  width:220px; height:220px;
  color:rgba(221,209,198,0.18); /* --beix-light @ 18% */
  pointer-events:none;
  z-index:0;
}
.service-card__motif path,
.service-card__motif circle {
  stroke-dasharray:380; stroke-dashoffset:380;
  animation:servicesMotifDraw 1.8s cubic-bezier(0.23, 1, 0.32, 1) 400ms forwards;
}
.service-card__motif path:nth-of-type(2) { animation-delay:700ms; }
@keyframes servicesMotifDraw {
  to { stroke-dashoffset:0; }
}

/* ---------- Bottom "see all" block ---------- */
.services__all {
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  margin-top:clamp(32px,4vw,48px);
  padding:1.25rem clamp(24px,3vw,36px);
  background:var(--off-white);
  border:1px solid var(--beix-light);
  border-radius:var(--radius-lg);
  text-decoration:none; color:var(--ink);
  transition:background 240ms var(--ease), border-color 240ms var(--ease);
}
.services__all-label {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.05rem,1.4vw,1.2rem);
  color:var(--ink);
}
.services__all-arrow {
  color:var(--beix-deep);
  transition:transform 320ms var(--ease);
  flex-shrink:0;
}
@media (hover: hover) and (pointer: fine) {
  .services__all:hover { background:var(--white); border-color:var(--beix); }
  .services__all:hover .services__all-arrow { transform:translateX(5px); }
}
.services__all:focus-visible {
  outline:2px solid var(--beix-text); outline-offset:3px;
}

/* Reduced motion: snap the ATM motif to final state, and let the photo
   reveal be a plain state flip with no zoom or settle. */
@media (prefers-reduced-motion: reduce) {
  .service-card__motif path,
  .service-card__motif circle { stroke-dashoffset:0; animation:none; }
  .service-card__arrow,
  .service-card--featured .service-card__cta,
  .service-card--featured .service-card__cta svg,
  .services__all,
  .services__all-arrow { transition:none; }
  .service-card--photo::after { transform:none; transition:none; }
  .service-card--photo:is(:hover,:focus-within)::after { transform:none; }
}

/* ============================================================
   HOME — TEAM TEASER
   ============================================================ */
.team-teaser { background:var(--off-white); padding:clamp(80px,10vw,140px) 0; }
.team-teaser__inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:center; }
.team-teaser__text .label { display:block; }
.team-teaser__text h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); font-weight:400; line-height:1.15; color:var(--ink); margin-bottom:1rem; }
.team-teaser__text h2 em { font-style:italic; color:var(--beix-text); }
.team-teaser__text p { font-size:1rem; line-height:1.75; color:var(--gris); max-width:420px; }
.team-teaser__photo-wrap { display:flex; justify-content:center; }
.team-teaser__photo-card {
  width:100%; max-width:340px;
  aspect-ratio:3/4;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 24px 64px oklch(18% 0.03 55 / 0.16), 0 4px 16px oklch(18% 0.03 55 / 0.08);
}
.team-teaser__photo-card img {
  width:100%; height:100%; object-fit:cover;
  object-position:55% 8%; display:block;
  transition:transform 0.8s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .team-teaser__photo-card:hover img { transform:scale(1.04); }
}

/* ============================================================
   HOME — LOCATION CARDS
   ============================================================ */
.locations-preview .locations__cards { display:grid; grid-template-columns:1fr 1fr; }
.location-card { position:relative; min-height:540px; overflow:hidden; display:flex; flex-direction:column; }
.location-card__bg { position:absolute; inset:0; transition:transform 0.7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .location-card:hover .location-card__bg { transform:scale(1.04); }
}
/* Warm gradation instead of a flattening grayscale+sepia filter — the
   building itself is the differentiator (PRODUCT.md principle 2), so it
   should read clearly, not as a dark texture. A scrim (below) carries the
   contrast burden for the white text instead of the photo filter. */
.location-card__bg--carrera {
  background-color:var(--ink);
  /* A different room than the hero on purpose: the entrance hall now
     leads the hero above, so this card shows the Lleida waiting room
     instead of repeating the same photograph lower on the same page. */
  background-image:url('../img/lleida-sala-espera.webp');
  background-image:image-set(url('../img/lleida-sala-espera.webp') type('image/webp'), url('../img/lleida-sala-espera.jpg') type('image/jpeg'));
  background-size:cover;
  background-position:center 35%;
  /* Real photo, naturally warm-graded — only a light touch to sit the
     hue near the beix system, no more heavy correction needed. */
  filter:saturate(0.94) brightness(0.86) contrast(1.02);
}
.location-card__bg--tremp {
  background-color:var(--ink);
  background-image:url('../img/tremp-exterior.webp');
  background-image:image-set(url('../img/tremp-exterior.webp') type('image/webp'), url('../img/tremp-exterior.jpg') type('image/jpeg'));
  background-size:cover;
  background-position:center 50%;
  /* New storefront shot already carries its own warm grade — same light
     touch as --carrera instead of the old heavy sepia correction. */
  filter:saturate(0.94) brightness(0.88) contrast(1.02);
}
.location-card::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,20,18,.12) 0%, rgba(24,20,18,.32) 55%, rgba(24,20,18,.7) 100%);
}
.location-card__content { position:relative; z-index:2; padding:clamp(36px,5vw,60px); display:flex; flex-direction:column; gap:2rem; height:100%; justify-content:space-between; }
.location-card__logo { display:flex; align-items:center; gap:16px; }
.loc-icon { width:44px; height:44px; object-fit:contain; }
.loc-full-logo { height:96px; width:auto; object-fit:contain; }
.loc-name { display:flex; flex-direction:column; line-height:1.1; }
.loc-name__estudi { font-size:0.62rem; font-weight:300; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.loc-name__city { font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:var(--white); }
.location-card__info { display:flex; flex-direction:column; gap:1.1rem; }
.loc-detail { display:flex; flex-direction:column; gap:3px; }
.loc-detail__label { font-size:0.7rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.68); }
.loc-detail__value { font-size:0.9rem; font-weight:300; color:rgba(255,255,255,.82); line-height:1.6; }
.loc-detail__value a { color:inherit; transition:color var(--trans); }
.loc-detail__value a:hover { color:var(--beix-light); }
.location-card__cta { align-self:flex-start; background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.38); }
@media (hover: hover) and (pointer: fine) {
  .location-card__cta:hover { background:var(--beix-deep); border-color:var(--beix-deep); transform:translateY(-2px); box-shadow:0 8px 24px rgba(42,42,44,.28); }
}

/* ============================================================
   TESTIMONIS (home landing)
   ============================================================ */
.testimonials {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--cream);
  position: relative;
}
.testimonials__head {
  max-width: 720px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.testimonials__head .label { display:inline-block; margin-bottom: 1rem; }
.testimonials__head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.testimonials__head h2 em {
  font-style: italic;
  color: var(--beix-text);
}
.testimonials__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--gris);
  letter-spacing: 0.02em;
}
.testimonials__rating {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  color: var(--ink);
}
.testimonials__stars { color: var(--beix-deep); letter-spacing: 0.08em; font-size: 0.82rem; }
.testimonials__rating b { font-weight: 500; color: var(--ink); }
.testimonials__sep {
  width: 1px; height: 14px;
  background: var(--beix-xlight);
  display: inline-block;
}
.testimonials__link {
  color: var(--ink);
  border-bottom: 1px solid var(--beix-xlight);
  padding-bottom: 1px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.testimonials__link:hover { color: var(--beix-deep); border-color: var(--beix-deep); }

/* 3D floating stage */
.testimonials__slider { position: relative; }
.testimonials__viewport {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 55%;
  padding: clamp(20px, 3vw, 36px) 0;
  /* Clip horizontally so side cards don't spill out, but keep vertical
     room for the float + shadow. */
  clip-path: inset(-60px 0 -60px 0);
}
.testimonials__track {
  position: relative;
  height: clamp(360px, 42vw, 460px);
  transform-style: preserve-3d;
  width: 100%;
}

/* Pose is animated imperatively by Motion One (transform + opacity).
   The CSS only sets the anchor (left/top + translate -50% -50%) and
   the visual skin of the card. */
.testimonial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 540px);
  translate: -50% -50%;
  opacity: 0;                 /* Motion raises this on first go() */
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;

  background: var(--white);
  border: 1px solid var(--beix-xlight);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4.4vw, 64px);
  box-shadow:
    0 30px 70px -30px rgba(42, 38, 35, 0.35),
    0 8px 20px -8px rgba(42, 38, 35, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  pointer-events: none;
  transition: box-shadow 520ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Decorative quote glyph */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.2em;
  left: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 1;
  color: var(--beix-xlight);
  z-index: 0;
  pointer-events: none;
}
.testimonial > * { position: relative; z-index: 1; }

/* Hit-testing + cursor per logical position.
   These toggles are set by JS; Motion owns the transform itself. */
.testimonial[data-pos="center"] { pointer-events: auto; }
.testimonial[data-pos="left"],
.testimonial[data-pos="right"]  { pointer-events: auto; cursor: pointer; }
.testimonial[data-pos="hidden"] { pointer-events: none; visibility: hidden; }
.testimonial[data-pos="left"],
.testimonial[data-pos="right"] {
  box-shadow: 0 20px 40px -20px rgba(42, 38, 35, 0.22);
}

/* Float carrier — sits inside the card, drifts vertically forever.
   Separate element so it doesn't collide with Motion's pose transform. */
.testimonial__inner {
  display: flex;
  flex-direction: column;
  gap: inherit;
  width: 100%;
  animation: testimonialFloat 7.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
.testimonial[data-pos="center"] .testimonial__inner { animation-play-state: running; }
.testimonial:not([data-pos="center"]) .testimonial__inner { animation-play-state: paused; }

@keyframes testimonialFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.38;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 42ch;
  margin: 0;
}
.testimonial__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--beix-xlight);
  font-style: normal;
  margin-top: auto;
}
.testimonial__who {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.testimonial__name {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.testimonial__src {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beix-text);
  font-variant-numeric: tabular-nums;
}

/* Avatar — initials by default, image if data-avatar is set */
.testimonial__avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--ink);
  background: var(--beix-xlight);
  box-shadow: inset 0 0 0 1px rgba(42, 38, 35, 0.06);
  position: relative;
  overflow: hidden;
  user-select: none;
}
.testimonial__avatar[data-tone="1"] { background: #EAE0D1; color: #6B5A45; }
.testimonial__avatar[data-tone="2"] { background: #2A2623; color: #F2E9DC; }
.testimonial__avatar[data-tone="3"] { background: #F3ECE0; color: #7A6450; }
.testimonial__avatar[data-tone="4"] { background: #C1B2A2; color: #2A2623; }

/* When an image is supplied via data-avatar, hide the initials */
.testimonial__avatar[data-avatar] {
  background-image: var(--avatar-img);
  background-size: cover;
  background-position: center;
  color: transparent;
  text-indent: -999em;
}

/* Small "G" Google glyph corner mark for source authenticity */
.testimonial__avatar::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 45%, transparent 46%),
    conic-gradient(from -45deg, #EA4335 0 25%, #FBBC04 25% 50%, #34A853 50% 75%, #4285F4 75% 100%);
  box-shadow: 0 0 0 2px var(--white);
}

@media (max-width: 720px) {
  .testimonials__track { height: clamp(420px, 88vw, 520px); }
  .testimonial { width: min(86%, 440px); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial__inner { animation: none; }
}

/* Controls */
.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.testimonials__progress {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--beix-text);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 0.55em;
}
.testimonials__progress-sep { opacity: 0.4; }
.testimonials__dots {
  display: flex; gap: 0.5rem;
  flex: 1;
  justify-content: center;
}
.testimonials__dot {
  width: 28px; height: 2px;
  background: var(--beix-xlight);
  border: none; padding: 0; cursor: pointer;
  border-radius: 2px;
  position: relative;
  transition: background 220ms var(--ease);
}
.testimonials__dot::after {
  content: "";
  position: absolute; inset: -21px -8px;
}
.testimonials__dot.is-active { background: var(--beix-deep); }
@media (hover: hover) and (pointer: fine) {
  .testimonials__dot:hover { background: var(--beix-text); }
}
.testimonials__nav {
  display: flex; gap: 0.5rem;
}
.testimonials__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--beix-xlight);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .testimonials__btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
  }
}
.testimonials__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .testimonials__controls { flex-direction: column; gap: 1.25rem; align-items: stretch; }
  .testimonials__dots { justify-content: center; order: 1; }
  .testimonials__progress { order: 2; text-align: center; justify-content: center; }
  .testimonials__nav { order: 3; justify-content: center; }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background:var(--beix-deep); padding:clamp(60px,8vw,100px) 0; }
.cta-band__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band__text h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,2.8rem); font-weight:400; color:var(--white); line-height:1.2; }
.cta-band__text h2 em { font-style:italic; }
.cta-band__text p { font-size:1rem; font-weight:300; color:rgba(255,255,255,.72); margin-top:.5rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding-top:88px; min-height:320px;
  display:flex; align-items:flex-end;
  background:var(--ink); position:relative; overflow:hidden;
}
.page-hero__bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#2A2A2C 0%,#3D3B3A 40%,#564F4A 70%,#7A6E63 100%);
  background-size:cover; background-position:center;
}
.page-hero__bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 50%, rgba(193,178,162,.12) 0%, transparent 60%);
}
.page-hero--light { background:var(--cream); }
.page-hero--light .page-hero__bg { display:none; }

/* Photographic section headers — a real clinic photo behind a bottom-
   heavy scrim (text sits at flex-end) instead of the abstract gradient. */
.page-hero__bg--serveis,
.page-hero__bg--seus,
.page-hero__bg--equip {
  background-image:none; /* clear the abstract gradient fallback */
}
.page-hero__bg--serveis { background-color:var(--ink); background-image:url('../img/headers/hero-serveis.webp'); background-image:image-set(url('../img/headers/hero-serveis.webp') type('image/webp'), url('../img/headers/hero-serveis.jpg') type('image/jpeg')); background-position:center 65%; }
.page-hero__bg--seus { background-color:var(--ink); background-image:url('../img/headers/hero-seus.webp'); background-image:image-set(url('../img/headers/hero-seus.webp') type('image/webp'), url('../img/headers/hero-seus.jpg') type('image/jpeg')); background-position:center 50%; }
.page-hero__bg--equip { background-color:var(--ink); background-image:url('../img/headers/hero-equip.webp'); background-image:image-set(url('../img/headers/hero-equip.webp') type('image/webp'), url('../img/headers/hero-equip.jpg') type('image/jpeg')); background-position:center 65%; }
.page-hero__bg--serveis::after,
.page-hero__bg--seus::after,
.page-hero__bg--equip::after {
  /* Architectural detail shots (painted ceilings, tile/marble) — the
     ornament is the point, so the scrim stays bottom-heavy (text sits
     at flex-end) and lets the pattern read clearly higher up. */
  background:
    linear-gradient(0deg, oklch(14% 0.02 55 / 0.85) 0%, oklch(16% 0.02 55 / 0.5) 42%, oklch(18% 0.03 55 / 0.22) 75%, transparent 100%),
    linear-gradient(180deg, oklch(14% 0.02 55 / 0.3) 0%, transparent 26%);
}
.page-hero__bg--equip::after {
  /* Team portrait line-up — busier and lighter than the architectural
     shots, so a side/edge vignette is layered on top of the bottom
     scrim to keep the heading legible against faces and hair. */
  background:
    linear-gradient(0deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.1) 100%),
    linear-gradient(0deg, oklch(14% 0.02 55 / 0.85) 0%, oklch(16% 0.02 55 / 0.5) 42%, oklch(18% 0.03 55 / 0.22) 75%, transparent 100%),
    linear-gradient(180deg, oklch(14% 0.02 55 / 0.3) 0%, transparent 26%),
    radial-gradient(ellipse 80% 100% at 50% 50%, transparent 45%, oklch(14% 0.02 55 / 0.4) 100%);
}

.page-hero__content { position:relative; z-index:2; padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px); }
.page-hero__content h1 { font-family:var(--font-display); font-size:clamp(2.8rem,6vw,5rem); font-weight:400; line-height:1.08; color:var(--white); margin-bottom:1rem; max-width:640px; }
.page-hero__content h1 em { font-style:italic; color:var(--beix-light); }
.page-hero__content p { font-size:clamp(1rem,1.5vw,1.1rem); font-weight:300; color:rgba(255,255,255,.6); line-height:1.75; max-width:520px; text-wrap:balance; }
.page-hero__content--dark h1 { color:var(--ink); }
.page-hero__content--dark h1 em { color:var(--beix-text); }
.page-hero__content--dark p { color:var(--gris); }

.breadcrumb { display:flex; align-items:center; gap:.75rem; font-size:0.8rem; font-weight:300; color:rgba(255,255,255,.72); margin-bottom:1.5rem; }
.breadcrumb a { color:inherit; transition:color var(--trans); }
.breadcrumb a:hover { color:rgba(255,255,255,.8); }
.breadcrumb--dark { color:var(--gris); }
.breadcrumb--dark a:hover { color:var(--ink); }

/* ============================================================
   SERVEIS PAGE
   ============================================================ */
.page-intro { padding:clamp(40px,5vw,64px) 0; background:var(--white); border-bottom:1px solid var(--beix-xlight); }
.page-intro__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; }

.service-detail { padding:clamp(70px,9vw,120px) 0; background:var(--off-white); }
.service-detail--alt { background:var(--cream); }
.service-detail__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:center; }
.service-detail__grid--reverse > :first-child { order:2; }
.service-detail__grid--reverse > :last-child  { order:1; }
.service-detail__text .label { display:block; }
.service-detail__text h2 { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:400; line-height:1.1; color:var(--ink); margin-bottom:1.25rem; }
.service-detail__text h2 em { font-style:italic; color:var(--beix-text); }
.service-detail__text p { font-size:1rem; line-height:1.8; color:var(--gris); margin-bottom:2rem; max-width:480px; }

.service-detail__visual {}
.service-detail__card {
  background:var(--ink); border-radius:var(--radius-xl);
  padding:clamp(36px,4.5vw,60px); display:flex; flex-direction:column;
  gap:1.25rem; min-height:490px; position:relative; overflow:hidden;
}
.service-detail__card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(193,178,162,.1) 0%, transparent 55%);
  pointer-events:none;
}

/* ---------- Service photograph (real clinic photography) ----------
   Lets the photo BE a photograph: a cleanly framed 4:5 image with a short
   editorial caption below — no headline/stats buried on top under a scrim.
   Replaces the flat ink card + SVG line-art for the services that have a
   genuine matching photo. */
.svc-photo { margin:0; display:flex; flex-direction:column; gap:1.1rem; }
.svc-photo__img {
  aspect-ratio:4 / 5;
  border-radius:var(--radius-xl);
  background-size:cover; background-position:center;
  background-color:var(--beix-xlight);
  box-shadow:0 34px 70px -30px oklch(28% 0.04 55 / 0.5),
             0 8px 22px -12px oklch(28% 0.04 55 / 0.3);
}
.svc-photo__cap {
  font-family:var(--font-display); font-style:italic;
  font-size:1rem; line-height:1.5; color:var(--beix-text);
  max-width:38ch; padding-left:0.15rem; text-wrap:balance;
}
/* On the dark featured (ATM) section the caption reads light */
.service-detail--featured .svc-photo__cap { color:var(--beix-light); }

.sdc-photo-atm {
  background-image:url('../img/serveis/atm-carme.webp');
  background-image:image-set(url('../img/serveis/atm-carme.webp') type('image/webp'), url('../img/serveis/atm-carme.jpg') type('image/jpeg'));
}
.sdc-photo-implants {
  background-image:url('../img/serveis/implants-planificacio.webp');
  background-image:image-set(url('../img/serveis/implants-planificacio.webp') type('image/webp'), url('../img/serveis/implants-planificacio.jpg') type('image/jpeg'));
}
.sdc-photo-ortodoncia {
  background-image:url('../img/serveis/ortodoncia-model.webp');
  background-image:image-set(url('../img/serveis/ortodoncia-model.webp') type('image/webp'), url('../img/serveis/ortodoncia-model.jpg') type('image/jpeg'));
}
.sdc-photo-estetica {
  background-image:url('../img/serveis/estetica-llum.webp');
  background-image:image-set(url('../img/serveis/estetica-llum.webp') type('image/webp'), url('../img/serveis/estetica-llum.jpg') type('image/jpeg'));
}
/* Line-art anatomical illustration — editorial Gray's Anatomy vibes */
.sdc-illo {
  width:clamp(150px, 17vw, 200px);
  height:clamp(150px, 17vw, 200px);
  color:var(--beix);
  opacity:0.92;
  margin-bottom:0.5rem;
  flex-shrink:0;
  position:relative;
}
.sdc-illo svg {
  width:100%; height:100%; display:block;
  opacity:0;
  transition: opacity 420ms var(--ease) 500ms;
  transform-origin: center;
}
/* Solid strokes: draw-on */
.sdc-illo svg path:not([stroke-dasharray]),
.sdc-illo svg line:not([stroke-dasharray]),
.sdc-illo svg rect:not([stroke-dasharray]) {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.23, 1, 0.32, 1) 740ms;
}
.sdc-illo svg circle:not([stroke-dasharray]):not([fill]) {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1s cubic-bezier(0.23, 1, 0.32, 1) 980ms;
}
/* Filled focus marks: scale pop after draw */
.sdc-illo svg circle[fill="currentColor"],
.sdc-illo svg g[fill="currentColor"] > circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition: transform 520ms cubic-bezier(0.23, 1, 0.32, 1) 1740ms;
}
/* Entrance driven by the .reveal on .service-detail__visual */
.service-detail__visual.visible .sdc-illo svg { opacity: 1; }
.service-detail__visual.visible .sdc-illo svg path:not([stroke-dasharray]),
.service-detail__visual.visible .sdc-illo svg line:not([stroke-dasharray]),
.service-detail__visual.visible .sdc-illo svg rect:not([stroke-dasharray]),
.service-detail__visual.visible .sdc-illo svg circle:not([stroke-dasharray]):not([fill]) {
  stroke-dashoffset: 0;
}
.service-detail__visual.visible .sdc-illo svg circle[fill="currentColor"],
.service-detail__visual.visible .sdc-illo svg g[fill="currentColor"] > circle {
  transform: scale(1);
}
/* Idle breathing after entrance completes */
@keyframes sdcIlloBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}
.service-detail__visual.visible .sdc-illo svg {
  animation: sdcIlloBreathe 6s ease-in-out 2900ms infinite;
}
/* Hover: crisper + touch brighter */
.service-detail__card:hover .sdc-illo { opacity: 1; }
.sdc-eyebrow { display:flex; align-items:center; justify-content:flex-start; }
.sdc-num { font-family:var(--font-display); font-size:0.8rem; letter-spacing:0.16em; color:rgba(255,255,255,0.65); font-style:italic; }
.sdc-headline {
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.9rem,2.8vw,2.6rem); color:var(--white);
  line-height:1.12; flex:1; margin-top:.5rem;
}
.sdc-headline strong { font-style:normal; color:var(--beix-light); font-weight:400; }
.sdc-stats {
  display:flex; gap:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:auto;
}
.sdc-stat b {
  display:block; font-family:var(--font-display);
  font-size:1.5rem; font-weight:400; color:var(--beix-light); line-height:1;
}
.sdc-stat span {
  display:block; font-size:0.78rem; color:rgba(255,255,255,.68);
  letter-spacing:0.07em; margin-top:5px; text-transform:uppercase;
}

.service-features { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.feature-item { display:flex; gap:14px; align-items:flex-start; }
.feature-item__check { width:22px; height:22px; border-radius:50%; background:var(--beix-xlight); color:var(--beix-text); display:flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0; margin-top:2px; }
.feature-item strong { display:block; font-size:1rem; font-weight:500; color:var(--ink); margin-bottom:2px; }
.feature-item span { font-size:1rem; color:var(--gris); line-height:1.65; }

.services-extra { padding:clamp(70px,9vw,120px) 0; background:var(--off-white); }
/* Open editorial grid — no card boxes, just border lines */
.services-extra .section-header { text-align:left; margin-left:0; margin-right:0; max-width:none; }
.services-extra__grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; background:none; border:none; border-radius:0; overflow:visible;
  border-top:1px solid var(--beix-xlight);
}
.extra-card {
  background:transparent; padding:clamp(20px,2.5vw,32px) clamp(16px,2vw,28px);
  display:flex; flex-direction:column; gap:.6rem;
  border-bottom:1px solid var(--beix-xlight);
  border-right:1px solid var(--beix-xlight);
  transition:background 200ms var(--ease);
}
.extra-card:nth-child(3n) { border-right:none; }
@media (hover: hover) and (pointer: fine) {
  .extra-card:hover { background:var(--beix-bg); }
}
.extra-card__num {
  font-family:var(--font-display); font-style:italic;
  font-size:0.72rem; font-weight:400; color:var(--gris);
  letter-spacing:.06em; margin-bottom:0.1rem;
}
.extra-card h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ink); }
.extra-card p { font-size:1rem; line-height:1.7; color:var(--gris); }

.process { padding:clamp(70px,9vw,120px) 0; background:var(--cream); }
.process__steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0; align-items:start; margin-top:1rem; }
.process-step { display:flex; flex-direction:column; gap:.75rem; padding:0 1rem; }
.process-step__num { font-family:var(--font-display); font-size:2.5rem; font-weight:400; color:var(--beix-rich); line-height:1; }
.process-step h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:500; color:var(--ink); }
.process-step p { font-size:0.875rem; line-height:1.7; color:var(--gris); }
.process-step__divider { width:40px; height:1px; background:var(--beix-light); margin-top:1.6rem; flex-shrink:0; }

/* ============================================================
   EQUIP PAGE
   ============================================================ */
.team-philosophy { padding:clamp(70px,9vw,120px) 0; background:var(--cream); }
.team-philosophy__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:start; }
.team-philosophy__text { position:relative; padding-bottom:clamp(60px,8vw,100px); }
.team-philosophy__text h2 { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:400; line-height:1.1; color:var(--ink); margin-bottom:1.25rem; }
.team-philosophy__text h2 em { font-style:italic; color:var(--beix-text); }
.team-philosophy__text p { font-size:1rem; line-height:1.8; color:var(--gris); margin-bottom:1rem; max-width:460px; }
/* Care motif: low-alpha stroke-drawn ornament, same grammar as the
   ATM service-card motif — ties the philosophy section back into the
   site's visual language instead of sitting as plain, imageless text. */
.team-philosophy__motif {
  position:absolute; left:-8px; bottom:0;
  width:170px; height:170px;
  color:oklch(60% 0.03 55 / 0.22);
  pointer-events:none;
}
.team-philosophy__motif path,
.team-philosophy__motif circle {
  stroke-dasharray:380; stroke-dashoffset:380;
  animation:servicesMotifDraw 1.8s cubic-bezier(0.23, 1, 0.32, 1) 400ms forwards;
}
.team-philosophy__motif path:nth-of-type(2) { animation-delay:700ms; }
.team-philosophy__pillars { display:flex; flex-direction:column; gap:1.25rem; }
.pillar {
  position:relative; overflow:hidden;
  padding:28px 30px; background:var(--white);
  border-radius:var(--radius-md); border:1px solid var(--beix-xlight);
}
.pillar__num {
  position:absolute; top:-0.35em; right:0.5rem;
  font-family:var(--font-display); font-weight:500;
  font-size:4.2rem; line-height:1;
  color:var(--beix-xlight);
  pointer-events:none;
}
.pillar h4 { position:relative; font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ink); margin-bottom:.4rem; }
.pillar p { position:relative; font-size:1rem; line-height:1.65; color:var(--gris); max-width:36ch; }
@media (prefers-reduced-motion: reduce) {
  .team-philosophy__motif path,
  .team-philosophy__motif circle { stroke-dashoffset:0; animation:none; }
}

.team-section { padding:clamp(60px,8vw,100px) 0; background:var(--off-white); }
.team-section--beix { background:var(--beix-bg); }
.team-section__header { display:flex; align-items:center; gap:14px; margin-bottom:3rem; }
.team-section__icon { width:36px; height:36px; object-fit:contain; }
.team-section__logo-sm { height:32px; width:auto; object-fit:contain; }
.team-section__header strong { font-family:var(--font-display); font-size:1.4rem; font-weight:500; color:var(--ink); display:block; line-height:1; }

.team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.team-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--beix-xlight); display:flex; gap:0; transition:box-shadow 200ms var(--ease), transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .team-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
}

.team-card__avatar {
  width:120px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:var(--white);
}
.team-card__avatar--a { background:linear-gradient(135deg,#2A2A2C,#4A4A4E); }
.team-card__avatar--b { background:linear-gradient(135deg,#C1B2A2,#A89585); }
.team-card__avatar--c { background:linear-gradient(135deg,#5A6E5A,#7E9A7E); }
.team-card__avatar--d { background:linear-gradient(135deg,#6E6A82,#9E9AB2); }
.team-card__avatar--e { background:linear-gradient(135deg,#8A7A6A,#C1A882); }
.team-card__avatar--f { background:linear-gradient(135deg,#2A3A4A,#4A6A7A); }
.team-card__avatar--g { background:linear-gradient(135deg,#4A5A4A,#7A8A6A); }
.team-card__avatar--h { background:linear-gradient(135deg,#7A4A5A,#B27A8A); }

.team-card__photo { width:120px; flex-shrink:0; overflow:hidden; background:var(--beix-bg); }
.team-card__photo img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.team-card__initials { font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:var(--beix-text); }

.team-card__body { padding:clamp(20px,2.5vw,28px); flex:1; display:flex; flex-direction:column; gap:1rem; }
.team-card__header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.team-card__header h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:500; color:var(--ink); line-height:1.2; }
.team-card__role { font-size:0.78rem; color:var(--beix-text); font-weight:400; letter-spacing:.04em; display:block; margin-top:3px; }
.team-card__badge { font-size:0.75rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--beix-text); border:1px solid var(--beix-light); border-radius:100px; padding:4px 10px; white-space:nowrap; flex-shrink:0; }
.team-card__body > p { font-size:1rem; line-height:1.7; color:var(--gris); flex:1; }
.team-card__tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.team-card__tags span { font-size:0.72rem; background:var(--beix-xlight); color:var(--gris-dark); padding:4px 10px; border-radius:100px; font-weight:400; }

.formation { padding:clamp(70px,9vw,120px) 0; background:var(--cream); }
/* Open 2×2 grid — items breathe better, no card boxing needed */
.formation .section-header { text-align:left; margin-left:0; margin-right:0; max-width:none; margin-bottom:0; }
.formation__grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0; margin-top:3rem;
  border-top:1px solid var(--beix-xlight);
}
.formation-item {
  background:transparent; border:none; border-radius:0;
  padding:clamp(28px,3.5vw,48px) clamp(20px,2.5vw,40px);
  border-bottom:1px solid var(--beix-xlight);
  border-right:1px solid var(--beix-xlight);
}
.formation-item:nth-child(2n) { border-right:none; }
.formation-item__icon { color:var(--beix-text); font-size:.6rem; margin-bottom:1.25rem; }
.formation-item h4 { font-family:var(--font-display); font-size:1.1rem; font-weight:500; color:var(--ink); margin-bottom:.6rem; line-height:1.25; }
.formation-item p { font-size:0.875rem; line-height:1.65; color:var(--gris); }

/* ============================================================
   SEUS PAGE
   ============================================================ */
.seu-detail { padding:clamp(70px,9vw,120px) 0; background:var(--off-white); }
.seu-detail--alt { background:var(--cream); }
.seu-detail__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.seu-detail__grid--reverse > :first-child { order:2; }
.seu-detail__grid--reverse > :last-child  { order:1; }

.seu-detail__logo-wrap { display:flex; align-items:center; gap:14px; margin-bottom:2.5rem; }
.seu-detail__icon { width:44px; height:44px; object-fit:contain; }
.seu-detail__logo-vertical { height:112px; width:auto; object-fit:contain; }
.seu-name { display:flex; flex-direction:column; line-height:1.1; }
.seu-name span { font-size:0.65rem; font-weight:300; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.seu-name strong { font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:var(--ink); }

.seu-detail__data { display:flex; flex-direction:column; gap:2rem; }
.seu-data-item {}
.seu-data-item__label { display:flex; align-items:center; gap:8px; font-size:0.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--beix-text); margin-bottom:.6rem; }
.seu-data-item__label svg { width:16px; height:16px; color:var(--beix-text); }
.seu-data-item p { font-size:0.95rem; color:var(--ink); line-height:1.65; font-weight:300; }
.seu-data-item p a { color:var(--beix-text); font-weight:400; transition:color var(--trans); }
.seu-data-item p a:hover { color:var(--gris-dark); }
.seu-data-item__link { font-size:0.82rem; color:var(--beix-text); font-weight:400; margin-top:.4rem; display:inline-block; transition:color var(--trans); }
.seu-data-item__link:hover { color:var(--gris-dark); }

.horari-table { border-collapse:collapse; width:100%; }
.horari-table td { padding:5px 0; font-size:0.9375rem; font-weight:300; color:var(--ink); line-height:1.65; }
.horari-table td:first-child { color:var(--gris); padding-right:2rem; width:60%; }

/* Embedded Google Map */
.seu-map {
  position:relative;
  width:100%; max-width:100%;
  aspect-ratio: 4 / 3;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--beix-xlight);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}
.seu-map iframe {
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  display:block;
  filter: grayscale(0.35) contrast(0.96);
  transition: filter 400ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .seu-map:hover iframe { filter: grayscale(0) contrast(1); }
}
.seu-map__cta {
  position:absolute; right:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:10px 16px; min-height:40px;
  background:var(--ink); color:var(--white);
  font-family:var(--font-body); font-size:0.78rem; font-weight:400;
  letter-spacing:0.06em;
  border-radius:100px;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
  z-index:2;
}
.seu-map__cta:hover { background:var(--beix-deep); transform: translateY(-1px); }
@media (max-width: 760px) {
  .seu-map { aspect-ratio: 4 / 3.2; }
}

.seu-divider { height:1px; background:var(--beix-xlight); margin:0; }

/* ============================================================
   CLINIC GALLERY (seus) — editorial masonry, a block WITHIN the Lleida
   section (the photos are all from the Lleida clinic). Separated from the
   address/map above by a hairline, sharing the section's off-white ground.
   ============================================================ */
.clinic-gallery__block {
  margin-top:clamp(48px,7vw,90px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--beix-xlight);
}
.clinic-gallery__head { max-width:640px; margin-bottom:clamp(36px,5vw,56px); }
.clinic-gallery__head .label { display:inline-block; }
.clinic-gallery__head h2 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.12;
  color:var(--ink); margin-bottom:1rem;
}
.clinic-gallery__head h2 em { font-style:italic; color:var(--beix-text); }
.clinic-gallery__head p { font-size:1rem; line-height:1.75; color:var(--gris); max-width:54ch; }

/* ---------- Elegant slideshow ----------
   A single large stage that crossfades between photos. Mixed orientations
   are handled by a blurred, scaled copy of the photo behind a `contain`ed
   sharp image, so portraits and landscapes both fill the frame gracefully.
   Autoplay with a thin progress bar; pauses on hover / focus / off-screen. */
.gallery-slideshow { position:relative; }
.gallery-slideshow__stage {
  position:relative;
  aspect-ratio:3 / 2;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--ink);
  box-shadow:0 34px 74px -34px oklch(26% 0.04 55 / 0.55),
             0 8px 22px -14px oklch(26% 0.04 55 / 0.3);
}
.gallery-slide {
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity 850ms var(--ease), visibility 0s linear 850ms;
}
.gallery-slide.is-active {
  opacity:1; visibility:visible;
  transition:opacity 850ms var(--ease), visibility 0s linear 0s;
}
.gallery-slide__bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(30px) saturate(1.08) brightness(0.6);
  transform:scale(1.18);
}
.gallery-slide__img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
/* Very slow Ken Burns on the active slide for a touch of life */
.gallery-slide.is-active .gallery-slide__img {
  animation:gallerySlideZoom 8s ease-out both;
}
@keyframes gallerySlideZoom { from{transform:scale(1.001)} to{transform:scale(1.035)} }

/* Autoplay progress bar pinned to the bottom edge of the stage */
.gallery-slideshow__track {
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,0.16); z-index:3;
}
.gallery-slideshow__progress {
  display:block; height:100%; width:100%;
  background:var(--beix-light);
  transform:scaleX(0); transform-origin:left;
}

.gallery-slideshow__bar {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; margin-top:1.35rem;
}
.gallery-slideshow__caption {
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.4;
  color:var(--beix-text); max-width:48ch;
}
.gallery-slideshow__nav { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.gallery-slideshow__count {
  font-family:var(--font-body); font-size:0.82rem; letter-spacing:0.14em;
  color:var(--gris); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.gallery-slideshow__btn {
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--beix-light); background:transparent; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .gallery-slideshow__btn:hover { background:var(--ink); border-color:var(--ink); color:var(--white); }
}
.gallery-slideshow__btn:active { transform:scale(0.94); }
.gallery-slideshow__btn svg { display:block; }

.gallery-slideshow__dots { display:flex; gap:0.5rem; margin-top:1.1rem; }
.gallery-slideshow__dot {
  width:26px; height:2px; border:none; padding:0; cursor:pointer;
  border-radius:2px; background:var(--beix-light);
  position:relative; transition:background 220ms var(--ease);
}
.gallery-slideshow__dot::after { content:""; position:absolute; inset:-11px 0; }
.gallery-slideshow__dot.is-active { background:var(--beix-deep); }
@media (hover:hover) and (pointer:fine) {
  .gallery-slideshow__dot:hover { background:var(--beix-text); }
}
@media (max-width:600px) {
  .gallery-slideshow__stage { aspect-ratio:4 / 5; }
  .gallery-slideshow__bar { flex-direction:column; gap:0.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-slide { transition:opacity 200ms linear, visibility 0s linear 200ms; }
  .gallery-slide.is-active { transition:opacity 200ms linear, visibility 0s linear 0s; }
  .gallery-slide.is-active .gallery-slide__img { animation:none; }
  .gallery-slideshow__track { display:none; }
}

/* ============================================================
   CONTACT FORM (seus.html)
   ============================================================ */
.contact-full { padding:clamp(70px,9vw,120px) 0; background:var(--off-white); }
.contact-full__grid { display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(40px,6vw,80px); align-items:start; }
.contact-full__intro .label { display:block; }
.contact-full__intro h2 { font-family:var(--font-display); font-size:clamp(2.2rem,3.5vw,3rem); font-weight:400; color:var(--ink); line-height:1.15; margin-bottom:1rem; }
.contact-full__intro h2 em { font-style:italic; color:var(--beix-text); }
.contact-full__intro > p { font-size:1rem; line-height:1.75; color:var(--gris); margin-bottom:2.5rem; }
.contact-channels { display:flex; flex-direction:column; gap:.75rem; }
.channel-item { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--radius-md); border:1px solid var(--beix-xlight); transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .channel-item:hover { border-color:var(--beix); background:var(--beix-bg); transform:translateX(4px); }
}
.channel-item__icon { width:36px; height:36px; border-radius:50%; background:var(--beix-xlight); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 200ms var(--ease); }
.channel-item__icon svg { width:16px; height:16px; color:var(--beix-text); transition:color 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .channel-item:hover .channel-item__icon { background:var(--beix-text); }
  .channel-item:hover .channel-item__icon svg { color:var(--white); }
}
.channel-item strong { display:block; font-size:0.78rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-dark); }
.channel-item span { font-size:0.875rem; font-weight:300; color:var(--gris); }

.contact-full__form {
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-sm);
  border:1px solid var(--beix-xlight);
  display:flex; flex-direction:column; gap:1.25rem;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group--full { grid-column:1/-1; }
.form-group label { font-size:0.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-dark); }
.form-group input,
.form-group select,
.form-group textarea {
  padding:12px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--beix-xlight); background:var(--off-white);
  color:var(--ink); font-size:1rem; font-weight:300;
  transition:border-color var(--trans), box-shadow var(--trans);
  -webkit-appearance:none; appearance:none;
}
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E7E82' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--beix);
  box-shadow:0 0 0 3px rgba(193,178,162,.15); background:var(--white);
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-check { align-items:flex-start; }
.check-label { display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--gris); line-height:1.65; cursor:pointer; }
.check-label input { margin-top:2px; accent-color:var(--beix); flex-shrink:0; }
.check-label a { color:var(--beix-text); text-decoration:underline; }
.submit-btn { width:100%; justify-content:center; }

.field-error {
  display:block; margin-top:6px;
  font-size:0.82rem; color:oklch(48% 0.16 25); /* warm red, not pure/neon */
}
[aria-invalid="true"] { border-color:oklch(55% 0.17 25) !important; }

.form-status {
  margin-top:0.25rem; padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:0.9rem; line-height:1.55;
}
.form-status--error   { background:oklch(96% 0.03 25);  color:oklch(38% 0.14 25); }
.form-status--success { background:oklch(96% 0.04 158); color:oklch(34% 0.12 158); }
.form-status--info     { background:var(--beix-bg); color:var(--beix-deep); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--ink); padding:clamp(60px,8vw,100px) 0 0; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,4vw,60px); padding-bottom:4rem; }
.footer__logo { display:flex; align-items:center; gap:14px; margin-bottom:1.5rem; }
.footer__logo img { height:88px; width:auto; object-fit:contain; transition:transform 380ms var(--ease), opacity 380ms var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .footer__logo:hover img { transform:rotate(-7deg) scale(1.12); opacity:.75; }
}
.footer__logo div { display:flex; flex-direction:column; line-height:1.15; }
.footer__logo span { font-size:0.62rem; font-weight:300; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.footer__logo strong { font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--white); }
.footer__tagline { font-size:0.875rem; font-weight:300; color:rgba(255,255,255,.62); line-height:1.75; }
.footer__heading { font-size:0.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:1.25rem; }
.footer__col ul { display:flex; flex-direction:column; gap:.55rem; }
.footer__col li, .footer__col a { font-size:0.875rem; font-weight:300; color:rgba(255,255,255,.55); transition:color var(--trans); }
.footer__col a:hover { color:var(--beix-light); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer__bottom p { font-size:0.85rem; color:rgba(255,255,255,.62); margin:0; }
.footer__meta { display:flex; flex-direction:column; gap:0.35rem; }
.footer__credit { font-size:0.74rem; letter-spacing:0.02em; }
.footer__credit a {
  color:rgba(255,255,255,.62);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:color var(--trans), border-color var(--trans);
}
.footer__credit a:hover { color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.55); }
.footer__legal { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer__legal a { font-size:0.85rem; color:rgba(255,255,255,.62); transition:color var(--trans); }
.footer__legal a:hover { color:var(--white); }

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal-section { padding:clamp(60px,8vw,100px) 0 clamp(80px,10vw,120px); background:var(--white); }
.legal-wrap { max-width:760px; }
.legal-meta { font-size:0.85rem; font-weight:300; color:var(--gris); letter-spacing:.04em; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--beix-xlight); }
.legal-wrap h2 {
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  font-weight:400;
  color:var(--ink);
  margin:2.75rem 0 .75rem;
  line-height:1.25;
}
.legal-wrap h2:first-of-type { margin-top:0; }
.legal-wrap h3 {
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin:2rem 0 .5rem;
}
.legal-wrap p {
  font-size:1rem;
  font-weight:300;
  color:var(--gris);
  line-height:1.85;
  margin-bottom:1rem;
  max-width:68ch;
}
.legal-wrap ul {
  margin:0 0 1rem 0;
  padding:0;
  list-style:none;
  max-width:68ch;
}
.legal-wrap ul li {
  font-size:1rem;
  font-weight:300;
  color:var(--gris);
  line-height:1.85;
  padding-left:1.25rem;
  position:relative;
  margin-bottom:.3rem;
}
.legal-wrap ul li::before {
  content:'·';
  position:absolute;
  left:0.25rem;
  color:var(--beix-deep);
  font-weight:400;
}
.legal-wrap a { color:var(--beix-text); text-decoration:underline; text-underline-offset:3px; transition:color var(--trans); }
.legal-wrap a:hover { color:var(--ink); }
.legal-wrap strong { font-weight:500; color:var(--ink); }
.legal-highlight {
  background:var(--cream);
  border-radius:var(--radius-md);
  padding:1.25rem 1.5rem;
  margin:1.5rem 0 1rem;
}
.legal-highlight p { margin:0; }
.table-scroll {
  max-width:68ch;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1rem 0 1.5rem;
}
.cookies-table {
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-size:0.88rem;
  margin:0;
}
.cookies-table th {
  text-align:left;
  font-weight:500;
  font-size:0.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:2px solid var(--beix-xlight);
  padding:.6rem .75rem;
}
.cookies-table td {
  vertical-align:top;
  border-bottom:1px solid var(--beix-xlight);
  padding:.65rem .75rem;
  font-weight:300;
  color:var(--gris);
  line-height:1.6;
}

/* ============================================================
   SOCIAL ICONS — footer + mobile menu
   ============================================================ */
.footer__social {
  display:flex; align-items:center; gap:0.75rem; margin-top:1.25rem;
}
.footer__social-link {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.52);
  transition:color var(--trans), border-color var(--trans), background var(--trans);
  text-decoration:none;
}
.footer__social-link:hover {
  color:var(--white);
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.07);
}
.footer__social-link svg { display:block; flex-shrink:0; }

/* Mobile-menu social row */
.mobile-menu__social {
  display:flex; align-items:center; gap:0.65rem;
  margin-top:1rem;
}
.mobile-menu__social-link {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(26,24,22,.1);
  color:var(--beix-text);
  transition:color var(--trans), border-color var(--trans), background var(--trans);
  text-decoration:none;
}
.mobile-menu__social-link:hover {
  color:var(--ink);
  border-color:var(--beix);
  background:var(--beix-xlight);
}
.mobile-menu__social-link svg { display:block; flex-shrink:0; }

/* ============================================================
   WHATSAPP FLOATING ACTION BUTTON
   ============================================================ */
.whatsapp-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:900;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:#075E54;
  color:var(--white);
  text-decoration:none;
  box-shadow:0 4px 16px rgba(7,94,84,.38), 0 1px 4px rgba(0,0,0,.14);
  transition:transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.whatsapp-fab:hover {
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 28px rgba(7,94,84,.48), 0 2px 8px rgba(0,0,0,.16);
}
.whatsapp-fab:active { transform:scale(0.97); }
.whatsapp-fab svg { display:block; }
@media (prefers-reduced-motion:reduce) {
  .whatsapp-fab { transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .services__grid { grid-template-columns:repeat(2,1fr); }
  /* Featured card on tablet — span the full 2-col row but let it flow normally */
  .service-card--featured { grid-column:1 / -1; grid-row:auto; }
  .service-card--featured .service-card__title { font-size:clamp(1.6rem, 4vw, 2.2rem); }
  .services-extra__grid { grid-template-columns:repeat(2,1fr); }
  /* Correct border rule for 2-col layout (was 3n) */
  .extra-card:nth-child(3n) { border-right:1px solid var(--beix-xlight); }
  .extra-card:nth-child(2n) { border-right:none; }
  .process__steps { grid-template-columns:1fr; gap:2rem; }
  .process-step__divider { display:none; }
  .team-grid { grid-template-columns:1fr; }
  .team-card__avatar { width:100px; }
  .team-card__photo { width:100px; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
  .page-intro__grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .nav__links, .nav__cta { display:none; }
  .nav__burger { display:flex; }
  .about__top { grid-template-columns:1fr; }
  .team-teaser__inner { grid-template-columns:1fr; }
  .team-teaser__photo-wrap { order:-1; }
  .team-teaser__photo-card { max-width:280px; }
  .locations-preview .locations__cards { grid-template-columns:1fr; }
  .location-card { min-height:420px; }
  .service-detail__grid { grid-template-columns:1fr; }
  .service-detail__grid--reverse { direction:ltr; }
  .seu-detail__grid { grid-template-columns:1fr; }
  .seu-detail__grid--reverse > :first-child { order:unset; }
  .seu-detail__grid--reverse > :last-child  { order:unset; }
  .contact-full__grid { grid-template-columns:1fr; }
  .team-philosophy__grid { grid-template-columns:1fr; }
  .cta-band__inner { flex-direction:column; align-items:flex-start; }
  .footer__grid { grid-template-columns:1fr; }
  /* Hide decorative scroll hint — overlaps hero content at mobile heights */
  .hero__scroll-hint { display:none; }
  /* Service detail cards: stat items may wrap on narrow screens */
  .sdc-stats { flex-wrap:wrap; gap:1.5rem; }
  /* Team cards (equip page): allow badge to wrap under the name */
  .team-card__header { flex-wrap:wrap; gap:.5rem; }
  /* Footer bottom: stack copyright + legal links vertically */
  .footer__bottom { flex-direction:column; align-items:flex-start; gap:0.5rem; }
}

@media (max-width:560px) {
  .services__grid { grid-template-columns:1fr; }
  .services-extra__grid { grid-template-columns:1fr; }
  /* 1-col: no side borders on extra-cards */
  .extra-card { border-right:none; }
  .extra-card:nth-child(2n) { border-right:none; }
  .formation__grid { grid-template-columns:1fr; }
  .team-card { flex-direction:column; }
  .team-card__avatar { width:100%; height:80px; }
  .team-card__photo { width:100%; height:auto; aspect-ratio: 4 / 5; }
  .form-row { grid-template-columns:1fr; }
  .hero__actions { flex-direction:column; align-items:flex-start; }
  .about__stats { gap:1.5rem; flex-wrap:wrap; }
}

@media (max-width:480px) {
  /* Service intro grid (serveis.html): single column at very small screens */
  .page-intro__grid { grid-template-columns:1fr; }
  /* Horari table: tighter first-column padding */
  .horari-table td:first-child { padding-right:0.75rem; }
  /* CTA button in band: full width on tiny screens */
  .cta-band .btn { width:100%; justify-content:center; }
}

/* Landscape mobile: tighten hero vertical padding at small viewport heights */
@media (max-height:680px) and (orientation:landscape) and (max-width:900px) {
  .hero__content { padding-top:90px; padding-bottom:40px; }
  .hero__scroll-hint { display:none; }
}

/* ============================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* ---------- SHARED KEYFRAMES ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bandShimmer {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 100% 0%; }
}

/* ---------- NAV ENTRANCE ---------- */
.nav {
  animation: navFadeIn 0.5s var(--ease) 0.05s both;
}

/* ---------- HERO REVEAL STAGGER ---------- */
/* Delays applied via CSS so the existing .reveal + JS observer mechanism fires them in sequence */
.hero .hero__eyebrow.reveal   { --delay: 80ms; }
.hero .hero__title.reveal     { --delay: 240ms; }
.hero .hero__subtitle.reveal  { --delay: 0ms; opacity: 1; transform: none; transition: none; }
.hero .hero__actions.reveal   { --delay: 560ms; }

/* Scroll hint has no .reveal — give it its own entrance */
.hero__scroll-hint {
  animation: fadeUp 0.6s var(--ease) 1.3s both;
}

/* ---------- INNER-PAGE HERO STAGGER ---------- */
.page-hero__content .breadcrumb.reveal { --delay: 60ms; }
.page-hero__content h1.reveal          { --delay: 180ms; }
.page-hero__content p.reveal           { --delay: 300ms; }

/* ---------- MOBILE MENU ITEM STAGGER ---------- */
/* Items start hidden; slide up and fade in when menu opens, reset instantly on close */
.mobile-menu__link,
.mobile-menu__cta,
.mobile-menu__seus {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease), color var(--trans), border-color var(--trans);
}
.mobile-menu.open .mobile-menu__nav > .mobile-menu__link:nth-child(1) { opacity:1; transform:none; transition-delay:120ms; }
.mobile-menu.open .mobile-menu__nav > .mobile-menu__link:nth-child(2) { opacity:1; transform:none; transition-delay:200ms; }
.mobile-menu.open .mobile-menu__nav > .mobile-menu__link:nth-child(3) { opacity:1; transform:none; transition-delay:280ms; }
.mobile-menu.open .mobile-menu__nav > .mobile-menu__link:nth-child(4) { opacity:1; transform:none; transition-delay:360ms; }
.mobile-menu.open .mobile-menu__cta                                    { opacity:1; transform:none; transition-delay:460ms; }
.mobile-menu.open .mobile-menu__seus                                   { opacity:1; transform:none; transition-delay:540ms; }

/* ---------- BACK TO TOP ---------- */
.back-top {
  position:fixed; bottom:calc(1.5rem + 56px + 14px); right:1.5rem; z-index:90;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--white);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px) scale(0.88);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease), background 200ms var(--ease);
  pointer-events:none;
  box-shadow:var(--shadow-md);
}
.back-top.visible { opacity:1; transform:none; pointer-events:auto; }
@media (hover:hover) and (pointer:fine) {
  .back-top:hover { background:var(--beix-deep); transform:translateY(-3px); }
}
.back-top:active { transform:scale(0.93); }

/* ---------- FORM SUCCESS CHECKMARK ---------- */
.check-path {
  stroke-dasharray:24;
  stroke-dashoffset:24;
  animation:checkStroke .45s cubic-bezier(0.23,1,0.32,1) .08s forwards;
}
@keyframes checkStroke { to { stroke-dashoffset:0; } }

/* ---------- STAT COUNTER COMPLETION PULSE ---------- */
.stat__num.counted {
  animation:statPulse .75s var(--ease) both;
}
@keyframes statPulse {
  0%   { color:var(--beix-deep); }
  38%  { color:var(--ink); transform:scale(1.06); }
  100% { color:var(--beix-deep); transform:scale(1); }
}

/* ---------- CTA BAND ANIMATED BACKGROUND ---------- */
/* Slow shimmer over the deep clay surface — barely perceptible, pure texture */
.cta-band {
  background: linear-gradient(
    110deg,
    var(--beix-deep) 0%,
    oklch(44% 0.06 44) 38%,
    oklch(36% 0.07 56) 62%,
    var(--beix-deep) 100%
  );
  background-size: 240% 100%;
  animation: bandShimmer 10s ease-in-out infinite;
}

/* ============================================================
   HOME — EVIDENCE (editorial pull-quote, no box + sober stat row)
   The quote lives in its own column (.about__quote-col in the
   markup) and deliberately breaks from the card/box language used
   everywhere else on the page (process list, stat figures, team
   cards): no background, no border-box, no radius — just a spine
   rule and an oversized mark. The two figures sit as a compact row
   under the body text.
   ============================================================ */
/* The quote sits on a photo of the person who said it — the face is the
   evidence (PRODUCT.md principle 6), not an ornament. Content is bottom
   aligned and the scrim is weighted to the bottom, so the copy always
   lands on dense shadow while his face stays readable above it. */
.about__quote-col {
  position:relative; isolation:isolate; overflow:hidden;
  align-self:stretch; display:flex; align-items:flex-end;
  min-height:clamp(400px,40vw,540px);
  padding:clamp(26px,3.2vw,40px);
  border-radius:var(--radius-lg);
  background-color:var(--ink);
}
.about__evidence-bg { position:absolute; inset:0; z-index:-2; display:block; }
/* The crop is deliberately narrower than the panel so cover() leaves
   vertical slack; the position then pulls the frame up, seating his
   chin above the copy instead of running into it. */
.about__evidence-bg img { width:100%; height:100%; object-fit:cover; object-position:50% 70%; display:block; }
.about__quote-col::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to top,
    oklch(15% 0.02 55 / 0.95) 0%,
    oklch(16% 0.02 55 / 0.88) 38%,
    oklch(18% 0.02 55 / 0.55) 68%,
    oklch(20% 0.03 55 / 0.20) 100%);
}
.about__evidence-quote {
  position:relative;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.45; color:var(--white);
  border-left:none; padding:0;
  max-width:32ch; margin:0; text-wrap:balance;
  hyphens:none;
}
.about__evidence-quote::before {
  content:'\201C';
  display:block;
  font-family:var(--font-display); font-style:normal;
  font-size:clamp(4.5rem,7vw,6.5rem); line-height:0.5;
  color:rgba(253,252,250,.45); margin:0 0 0.25em -0.03em;
}
.about__evidence-attrib {
  display:block; margin-top:1.5rem;
  font-family:var(--font-body); font-style:normal;
  font-size:0.72rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(253,252,250,.78);
}
/* Signed, not captioned: the name is set in a hand so the quote reads
   as something a person put their name to. The role line underneath
   keeps the formal title and carries the uppercase metadata style. */
.about__evidence-sign {
  display:block;
  font-family:var(--font-hand); font-style:normal;
  font-size:clamp(1.4rem,2.3vw,1.85rem); font-weight:400;
  letter-spacing:0; text-transform:none;
  line-height:1.15; color:var(--white);
  margin-bottom:0.6rem;
}
.about__evidence-role { display:block; }
.about__stats {
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:0.5rem; padding-top:1.75rem;
  border-top:1px solid var(--beix-xlight);
}
.evidence-fig { display:flex; flex-direction:column; gap:4px; padding-left:1.25rem; border-left:1px solid var(--beix-xlight); }
.evidence-fig__num { font-family:var(--font-display); font-size:2rem; font-weight:500; color:var(--beix-deep); line-height:1; }
.evidence-fig__label { font-size:0.82rem; font-weight:300; color:var(--gris); line-height:1.55; max-width:30ch; }

/* ============================================================
   EQUIP — FEATURED TEAM CARD
   First card of each team-grid gets editorial treatment.
   ============================================================ */
.team-card--featured {
  grid-column:1 / -1;
  flex-direction:row;
  background:var(--cream);
  border-color:var(--beix-light);
}
.team-card--featured .team-card__photo {
  width:clamp(180px, 28vw, 320px);
}
.team-card--featured .team-card__body {
  padding:clamp(28px,3.5vw,44px);
  gap:1.25rem;
}
.team-card--featured .team-card__header h3 {
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.15;
}
.team-card--featured .team-card__quote {
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.55; color:var(--ink);
  padding-left:1rem;
  border-left:1px solid var(--beix);
  max-width:52ch;
}
.team-card--featured .team-card__quote cite {
  display:block; margin-top:.5rem;
  font-family:var(--font-body); font-style:normal;
  font-size:0.72rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--beix-text);
}
@media (max-width:560px) {
  .team-card--featured { flex-direction:column; }
  .team-card--featured .team-card__photo { width:100%; height:auto; aspect-ratio: 3 / 4; }
}

/* One-off: Carme's featured photo is a candid action shot (landscape
   composition, hands + splint in frame) rather than a studio portrait —
   give it its own box instead of forcing the usual tall crop. */
.team-card--photo-wide .team-card__photo {
  width:clamp(260px, 34vw, 420px);
}
.team-card--photo-wide .team-card__photo img { object-position:center; }
@media (max-width:560px) {
  .team-card--photo-wide .team-card__photo { width:100%; height:auto; aspect-ratio:4 / 3; }
}

/* ============================================================
   SERVEIS — CONSERVADORISME BAND (philosophy ahead of catalogue)
   ============================================================ */
.philosophy-band {
  padding:clamp(70px,9vw,110px) 0;
  background:var(--off-white);
  border-bottom:1px solid var(--beix-xlight);
}
.philosophy-band__inner {
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; gap:1.5rem;
  align-items:flex-start;
}
.philosophy-band__eyebrow {
  font-family:var(--font-body); font-weight:400;
  font-size:0.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--beix-text);
}
.philosophy-band__quote {
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  line-height:1.3; color:var(--ink);
  max-width:42ch;
}
.philosophy-band__quote::before {
  content:'\201C';
  font-family:var(--font-display);
  font-size:4.5rem; line-height:0.3;
  color:var(--beix); display:block;
  margin-bottom:1.25rem;
}
.philosophy-band__attrib {
  display:block; margin-top:1rem;
  font-family:var(--font-body); font-style:normal;
  font-size:0.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--beix-text);
}
.philosophy-band__body {
  font-size:1rem; line-height:1.8;
  color:var(--gris); max-width:58ch;
}

/* ============================================================
   SERVEIS — FEATURED SERVICE (ATM / bruxisme — strategic wedge)
   Visually heavier than sibling .service-detail sections.
   ============================================================ */
.service-detail--featured {
  background:var(--ink);
  color:var(--white);
}
.service-detail--featured .label,
.service-detail--featured .service-detail__text h2 { color:var(--white); }
.service-detail--featured .service-detail__text h2 em { color:var(--beix-light); }
.service-detail--featured .service-detail__text p { color:rgba(255,255,255,.72); }
.service-detail--featured .feature-item strong { color:var(--white); }
.service-detail--featured .feature-item span { color:rgba(255,255,255,.62); }
.service-detail--featured .feature-item__check {
  background:rgba(193,178,162,.18); color:var(--beix-light);
}
.service-detail--featured .service-detail__card {
  /* longhand, not shorthand `background:` — a shorthand would reset
     background-image to none and wipe out .service-detail__card--photo */
  background-color:var(--beix-deep);
}
.service-detail--featured .service-detail__card::before {
  background:radial-gradient(circle at 15% 85%, rgba(255,255,255,.08) 0%, transparent 55%);
}
.service-detail--featured .btn--primary {
  background:var(--off-white); color:var(--ink);
}
@media (hover:hover) and (pointer:fine) {
  .service-detail--featured .btn--primary:hover { background:var(--beix-light); }
}

/* ============================================================
   EDITORIAL MOTION — headline crafts
   ============================================================ */
/* Hero headline: line-by-line stagger on page load.
   The h1 keeps .reveal for the em-underline trigger below, but its
   default opacity/transform are neutralised so the inner spans own
   the entrance instead. */
.hero__title.reveal { opacity:1; transform:none; transition:none; }
.hero__title .hero__line {
  display:block;
  opacity:1; transform:none;
  animation:none;
}
@keyframes heroLine {
  to { opacity:1; transform:none; }
}

/* Italic emphasis underline — draws a 1px architectural rule beneath
   any <em> inside an h2 when its .reveal ancestor enters the viewport.
   Excludes .hero__title because the hero em already has its own
   entrance via the line stagger above. */
h2 em {
  position:relative; display:inline-block;
}
h2 em::after {
  content:""; position:absolute;
  left:0; right:0; bottom:-0.06em;
  height:1px; background:currentColor;
  opacity:0.32;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1400ms var(--ease);
  transition-delay:420ms;
}
.reveal.visible h2 em::after,
h2.reveal.visible em::after,
h2.em-lit em::after { transform:scaleX(1); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Show reveals immediately — no entrance animation */
  .reveal { opacity: 1; transform: none; }
  /* Entrance animations: skip delay, show immediately */
  .nav { animation: none; }
  .hero__scroll-hint { animation: none; opacity: 1; transform: none; }
  .cta-band { animation: none; }
  /* Hero ambient motion: stop the orb float, scroll-hint pulse, marquee scroll */
  .hero__orb { animation: none; }
  .hero__scroll-line { animation: none; }
  .marquee__track { animation: none; }
  /* Mobile menu items: always visible when container is open */
  .mobile-menu__link,
  .mobile-menu__cta,
  .mobile-menu__seus { opacity: 1; transform: none; transition: none; }
  .mobile-menu__close:hover { transform: none; }
  /* Hero line stagger: skip the stagger, show lines immediately */
  .hero__title .hero__line { opacity: 1; transform: none; animation: none; }
  /* Italic underline: skip the draw, show the rule immediately */
  h2 em::after { transform: scaleX(1); transition: none; }
  /* Service illustrations: skip stroke-draw + mark-pop + breathing */
  .sdc-illo svg { opacity: 1; animation: none; }
  .sdc-illo svg path:not([stroke-dasharray]),
  .sdc-illo svg line:not([stroke-dasharray]),
  .sdc-illo svg rect:not([stroke-dasharray]),
  .sdc-illo svg circle:not([stroke-dasharray]):not([fill]) {
    stroke-dasharray: none; stroke-dashoffset: 0;
  }
  .sdc-illo svg circle[fill="currentColor"],
  .sdc-illo svg g[fill="currentColor"] > circle { transform: none; }
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */

.cookie-banner {
  position: fixed;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  max-width: 440px;
  background: var(--off-white, #F8F5F0);
  color: var(--ink, #2A2623);
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 24px 56px -12px rgba(42,38,35,0.28);
  padding: 1.4rem 1.5rem 1.35rem;
  z-index: 9000;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 640ms cubic-bezier(0.23, 1, 0.32, 1) 200ms,
              opacity 420ms ease-out 200ms;
  border: 1px solid rgba(42,38,35,0.06);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.cookie-banner__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(42,38,35,0.72);
  margin: 0 0 1.1rem;
  max-width: 58ch;
}
.cookie-banner__text a { color: var(--ink, #2A2623); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.cookie-banner__actions .cc-btn { flex: 0 0 auto; }
.cookie-banner__actions .cc-btn--primary { margin-left: auto; }

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 1.15rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 220ms var(--ease, ease-out), color 220ms var(--ease, ease-out),
              border-color 220ms var(--ease, ease-out), transform 220ms var(--ease, ease-out);
  white-space: nowrap;
  background: transparent;
  color: inherit;
}
.cc-btn:focus-visible { outline: 2px solid var(--beix-deep, #9A8874); outline-offset: 3px; }
.cc-btn--primary {
  background: var(--ink, #2A2623);
  color: var(--off-white, #F8F5F0);
}
.cc-btn--primary:hover { background: #1a1614; transform: translateY(-1px); }
.cc-btn--ghost {
  border-color: rgba(42,38,35,0.2);
  color: rgba(42,38,35,0.78);
}
.cc-btn--ghost:hover { border-color: var(--ink, #2A2623); color: var(--ink, #2A2623); }
.cc-btn--link {
  padding: 0.68rem 0.4rem;
  color: rgba(42,38,35,0.68);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.cc-btn--link:hover { color: var(--ink, #2A2623); }

/* Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.cookie-modal.is-open { display: flex; }
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,17,15,0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 320ms ease-out;
}
.cookie-modal.is-open .cookie-modal__backdrop { opacity: 1; }
.cookie-modal__panel {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--off-white, #F8F5F0);
  color: var(--ink, #2A2623);
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 40px 80px -16px rgba(20,17,15,0.45);
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 320ms ease-out;
}
.cookie-modal.is-open .cookie-modal__panel { transform: none; opacity: 1; }
.cookie-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(42,38,35,0.6);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.cookie-modal__close:hover { background: rgba(42,38,35,0.06); color: var(--ink, #2A2623); }
.cookie-modal__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.cookie-modal__lead {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(42,38,35,0.72);
  margin: 0 0 1.4rem;
  max-width: 56ch;
}
.cookie-modal__groups { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.4rem; }
.cc-group {
  border: 1px solid rgba(42,38,35,0.1);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.35);
  transition: border-color 220ms ease, background 220ms ease;
}
.cc-group[data-on="true"] { border-color: rgba(42,38,35,0.24); background: rgba(255,255,255,0.6); }
.cc-group__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.cc-group__label {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
}
.cc-group__desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(42,38,35,0.68);
  margin: 0.5rem 0 0;
  max-width: 48ch;
}
.cc-group__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42,38,35,0.5);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Toggle switch */
.cc-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  background: rgba(42,38,35,0.18);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 260ms var(--ease, ease-out);
}
.cc-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cc-switch[aria-checked="true"] { background: var(--ink, #2A2623); }
.cc-switch[aria-checked="true"]::after { transform: translateX(20px); }
.cc-switch[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--beix-deep, #9A8874);
  opacity: 0.7;
}
.cc-switch[aria-disabled="true"]::after { transform: translateX(20px); }
.cc-switch:focus-visible { outline: 2px solid var(--beix-deep, #9A8874); outline-offset: 3px; }

.cookie-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(42,38,35,0.08);
  margin-top: 0.25rem;
}
.cookie-modal__actions .cc-btn--reject { margin-right: auto; }

body.cookie-modal-open { overflow: hidden; }

/* Map consent gate */
.seu-map[data-consent-blocked="true"] iframe { display: none; }
.seu-map__gate {
  display: none;
  position: absolute;
  inset: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    linear-gradient(135deg, rgba(193,178,162,0.18) 0%, rgba(154,136,116,0.12) 100%),
    var(--beix-xlight, #EFE8DF);
  color: var(--ink, #2A2623);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  text-align: left;
}
.seu-map[data-consent-blocked="true"] .seu-map__gate { display: flex; }
.seu-map[data-consent-blocked="true"] .seu-map__cta { display: none; }
.seu-map__gate-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
}
.seu-map__gate-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(42,38,35,0.72);
  margin: 0;
  max-width: 38ch;
}
.seu-map__gate-btn {
  margin-top: 0.3rem;
  align-self: flex-start;
}

/* Footer consent button */
.footer__consent-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.footer__consent-btn:hover { color: var(--beix, #C1B2A2); }

/* Inline manage-preferences button (cookies.html) */
.cookies-manage {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.78rem 1.3rem;
  border-radius: 999px;
  background: var(--ink, #2A2623);
  color: var(--off-white, #F8F5F0);
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}
.cookies-manage:hover { background: #1a1614; transform: translateY(-1px); }
.cookies-manage svg { width: 15px; height: 15px; }

/* Keep the banner clear of the sticky mobile CTA bar (72px + safe-area)
   at the same breakpoint the bar appears, so the visitor's first view of
   the site never has both covering each other or the call/WhatsApp CTAs. */
@media (max-width: 720px) {
  .cookie-banner { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .cookie-banner { left: 12px; right: 12px; padding: 1.15rem 1.2rem 1.1rem; max-width: none; }
  .cookie-banner__actions { gap: 0.4rem; }
  .cookie-banner__actions .cc-btn { flex: 1 1 auto; padding: 0.7rem 0.8rem; font-size: 0.8rem; }
  .cookie-banner__actions .cc-btn--primary { margin-left: 0; flex-basis: 100%; order: -1; }
  .cookie-modal__panel { padding: 1.4rem 1.1rem 1.2rem; }
  .cookie-modal__title { font-size: 1.4rem; }
  .cookie-modal__actions { justify-content: stretch; }
  .cookie-modal__actions .cc-btn { flex: 1 1 auto; }
  .cookie-modal__actions .cc-btn--reject { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: opacity 160ms linear; transform: none; }
  .cookie-modal__backdrop,
  .cookie-modal__panel { transition: opacity 160ms linear; transform: none; }
  .cc-switch::after { transition: none; }
}

/* ============================================================
   CONVERSION COMPONENTS (CRO pass)
   Sticky mobile action bar · trust strip · FAQ · before/after ·
   inline contact row. Built on the existing token system.
   ============================================================ */

/* ---------- STICKY MOBILE ACTION BAR ---------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(253, 252, 250, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--beix-xlight);
  box-shadow: 0 -6px 24px rgba(42, 42, 44, 0.10);
  transition: transform 320ms var(--ease);
}
.mobile-cta-bar.is-hidden { transform: translateY(130%); }
.mobile-cta-bar__btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; text-decoration: none;
  transition: transform 180ms var(--ease);
}
.mobile-cta-bar__btn--call { background: var(--beix-deep); color: var(--white); }
.mobile-cta-bar__btn--wa   { background: #075E54; color: var(--white); }
.mobile-cta-bar__btn:active { transform: scale(0.97); }
.mobile-cta-bar__btn svg { display: block; }
@media (max-width: 720px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-fab { display: none; } /* redundant with the bar's WhatsApp button */
  .back-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar, .mobile-cta-bar__btn { transition: none; }
}

/* ---------- INLINE CONTACT ROW (hero + CTA band) ---------- */
.contact-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 18px; margin-top: 20px;
  font-size: 0.95rem;
}
.contact-row__label { color: var(--gris); }
.contact-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--beix-deep); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease);
}
.contact-link svg { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .contact-link:hover { border-bottom-color: currentColor; }
}
/* On dark contexts (hero, CTA band), lift the contact row to light ink
   so it reads against the dark background instead of the light-bg colors. */
.hero .contact-row__label,
.cta-band .contact-row__label { color: rgba(255, 255, 255, 0.68); }
.hero .contact-link,
.cta-band .contact-link { color: var(--white); }
.cta-band__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cta-band__cta .contact-row { margin-top: 12px; }

/* ---------- TRUST STRIP ---------- */
.trust-strip {
  background: var(--white);
  border-top: 1px solid var(--beix-xlight);
  border-bottom: 1px solid var(--beix-xlight);
}
/* Single attributed line of real evidence (Google rating) — replaces the
   4-stat "big number" grid, a pattern PRODUCT.md explicitly prohibits. */
.trust-strip__inner {
  display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap;
  padding: clamp(20px, 3vw, 28px) 0;
}
.trust-item__num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  color: var(--beix-rich); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0.28em;
}
.trust-item__stars { color: var(--beix-rich); font-size: 0.62em; letter-spacing: 0.04em; }
.trust-item__label {
  font-size: 0.9rem; letter-spacing: 0.02em;
  color: var(--gris); line-height: 1.4;
}
.trust-item a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--beix-light); }
@media (hover: hover) and (pointer: fine) {
  .trust-item a:hover { border-bottom-color: var(--beix-deep); color: var(--beix-deep); }
}

/* ---------- FAQ ACCORDION ---------- */
.faq { background: var(--off-white); padding: clamp(56px, 8vw, 100px) 0; }
.faq__list { max-width: 840px; margin: clamp(32px, 5vw, 56px) auto 0; }
.faq__item { border-bottom: 1px solid var(--beix-xlight); }
.faq__item:first-child { border-top: 1px solid var(--beix-xlight); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 26px 4px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem); color: var(--ink); line-height: 1.35;
}
.faq__icon { position: relative; flex-shrink: 0; width: 22px; height: 22px; transition: transform 0.3s var(--ease); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 1.6px; background: var(--beix-deep);
  transform: translate(-50%, -50%); transition: opacity 0.3s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p { padding: 0 4px 26px; margin: 0; color: var(--gris-dark); line-height: 1.7; max-width: 66ch; }
@media (prefers-reduced-motion: reduce) {
  .faq__a, .faq__icon { transition: none; }
}

/* ---------- BEFORE / AFTER GALLERY ---------- */
.ba { background: var(--white); padding: clamp(56px, 8vw, 100px) 0; }
.ba__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(32px, 5vw, 56px);
}
.ba-case { display: flex; flex-direction: column; }
.ba-case__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ba-shot {
  position: relative; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--beix-xlight), var(--cream));
  display: flex; align-items: center; justify-content: center;
}
.ba-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-shot__tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(42, 42, 44, 0.72); color: var(--white); padding: 3px 9px; border-radius: 100px;
}
.ba-shot__ph { font-size: 0.78rem; color: var(--beix-text); opacity: 0.65; }
.ba-case__service {
  margin-top: 14px; font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--beix-rich);
}
.ba-case__caption { margin-top: 5px; font-size: 0.92rem; color: var(--gris-dark); line-height: 1.65; }
.ba__note { margin-top: clamp(24px, 4vw, 40px); font-size: 0.85rem; color: var(--gris); max-width: 60ch; }
@media (max-width: 900px) { .ba__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ba__grid { grid-template-columns: 1fr; } }