:root {
  --ink: #141414;
  --blue: #355BCE;
  --blue-deep: #1c2f74;
  --cream: #E2E3D8;
  --white: #FFFFFF;
  --line: rgba(20, 20, 20, 0.12);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }


html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }

/* spine label — matches brandbook's rotated "SCENIUS" caption */
.spine {
  position: absolute;
  left: 20px;
  top: 40px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--blue);
  opacity: 0.6;
  z-index: 2;
}

@media (max-width: 760px) { .spine { display: none; } }

/* Intro — logo gigante, zoom dentro de la letra, eslogan */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.intro {
  --ip: 0; --zoom: 1; --mask-o: 1; --reveal: 0; --hint: 1; --bgs: 6; --bgo: 0;
  --lw: min(84vw, 1180px);
  position: relative;
  height: 420vh;
  background: var(--blue);
}

.intro-stage {
  position: sticky;
  top: 0;
  /* alto "grande" (barra del navegador recogida): en iOS la barra se encoge
     al hacer scroll y con svh asomaba el fondo de la sección por debajo */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

/* capa beige con el logo recortado: las letras dejan ver el azul de la escena */
.intro-mask {
  position: absolute;
  inset: 0;
  background: var(--cream);
  /* el zoom se aplica al tamaño/posición de la máscara (no con transform: scale)
     para no rasterizar una capa 110× más grande, que en Chrome/iOS dejaba
     teselas vacías (bloques azules) al devolverse en el scroll */
  -webkit-mask-image: url("images/scenius-logo-mask.png"), linear-gradient(#000 0 0);
  -webkit-mask-size: var(--mw, var(--lw)) auto, 100% 100%;
  -webkit-mask-position: var(--mx, center) var(--my, center), center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: url("images/scenius-logo-mask.png"), linear-gradient(#000 0 0);
  mask-size: var(--mw, var(--lw)) auto, 100% 100%;
  mask-position: var(--mx, center) var(--my, center), center;
  mask-repeat: no-repeat;
  mask-composite: exclude;
  opacity: var(--mask-o);
}

.intro-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  background: var(--blue);
  color: var(--cream);
}

/* la S por la que entramos queda de fondo en la sección */
.intro-bg-s {
  position: absolute;
  left: 50%; top: 50%;
  width: min(62vmin, 560px);
  aspect-ratio: 268 / 246;
  background: var(--cream);
  -webkit-mask: url("images/scenius-s.png") center / contain no-repeat;
  mask: url("images/scenius-s.png") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(var(--bgs));
  opacity: var(--bgo);
  pointer-events: none;
  will-change: transform, opacity;
}

/* textura de marca: glow suave sobre el azul */
.intro-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 110vmax; height: 30vmax;
  transform: translate(-50%, -50%) scale(calc(0.7 + 0.3 * var(--reveal)));
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  opacity: var(--reveal);
  pointer-events: none;
}

/* elementos gráficos del brandbook sobre el azul */
.intro-elements {
  position: absolute;
  inset: 0;
  color: var(--cream);
  pointer-events: none;
  /* segunda capa tenue detrás del eslogan (sin parallax) */
  opacity: 0.6;
  transform: scale(calc(1.04 - 0.04 * var(--reveal)));
  will-change: transform;
}

.be {
  --d: 0;
  --in: clamp(0, var(--reveal) * 1.6 - var(--d), 1);
  position: absolute;
  display: block;
  opacity: calc(var(--in) * 0.9);
  transform: translate(-50%, -50%) scale(calc(0.86 + 0.14 * var(--in)));
}

.be-seal-b {
  left: 50%; top: 84%;
  width: 124px;
}
.be-seal-b .be-rot { animation: be-rotate 52s linear infinite; }

.be-spine {
  left: 3.2%; top: 82%;
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%) rotate(180deg);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@keyframes be-rotate { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .be-spine { display: none; }
  .be-seal-b { width: 84px; top: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .be-rot, }

.intro-copy {
  position: relative;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: calc(0.75 * var(--reveal));
  margin-bottom: 26px;
}
.intro-kicker::before,
.intro-kicker::after {
  content: "";
  width: calc(36px * var(--reveal));
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.intro-slogan {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.intro-slogan .line { display: block; overflow: hidden; padding-bottom: 0.1em; }
.intro-slogan .line > span {
  display: inline-block;
  transform: translateY(calc((1 - var(--reveal)) * 110%));
}
.intro-slogan .line:nth-child(2) > span { transform: translateY(calc((1 - clamp(0, var(--reveal) * 1.35 - 0.2, 1)) * 110%)); }
.intro-slogan em { font-style: italic; color: var(--white); }

.intro-sign {
  margin-top: 30px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: calc(0.65 * clamp(0, var(--reveal) * 2 - 1, 1));
}

@media (max-width: 760px) {
  .intro-slogan { font-size: clamp(26px, 7.4vw, 34px); }
}

.intro-hint {
  position: absolute;
  left: 50%;
  bottom: max(34px, env(safe-area-inset-bottom) + 20px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: var(--hint);
  pointer-events: none;
}
.hint-arrow {
  width: 20px;
  height: 12px;
  color: var(--ink);
  animation: hint-bounce 1.5s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(8px); opacity: 1; }
}

@media (max-width: 760px) {
  .intro-hint { font-size: 12.5px; gap: 9px; }
  .hint-arrow { width: 22px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hint-arrow { animation: none; opacity: 0.8; }
}

/* header oculto mientras el logo gigante ocupa la pantalla */
.site-header { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
body.intro-active .site-header { opacity: 0; transform: translateY(-16px); pointer-events: none; }
body.intro-active .site-header .glass { pointer-events: none; }

@media (max-width: 760px) {
  .intro { --lw: 88vw; height: 340vh; }
}

/* sin animaciones: dos pantallas estáticas */
.intro.is-static { height: auto; }
.intro.is-static .intro-stage { position: relative; height: auto; }
.intro.is-static .intro-mask { position: relative; height: 100vh; }
.intro.is-static .intro-scene { position: relative; height: 100vh; }
.intro.is-static { --reveal: 1; --hint: 0; }

/* Header — píldoras liquid glass (iOS) */

.site-header {
  --p: 0;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(92px - 20px * var(--p));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
}

.glass {
  pointer-events: auto;
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, calc(0.34 + 0.24 * var(--p)));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(20, 20, 20, 0.06),
    0 calc(6px + 8px * var(--p)) calc(20px + 20px * var(--p)) rgba(20, 20, 20, calc(0.06 + 0.08 * var(--p)));
  transition: box-shadow 0.4s cubic-bezier(.2,.8,.2,1), transform 0.5s cubic-bezier(.2,.8,.2,1);
}

/* reflejo especular del vidrio */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 48%);
  opacity: calc(0.7 - 0.3 * var(--p));
  pointer-events: none;
}

.pill-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(56px - 14px * var(--p));
  padding: 0 calc(34px - 12px * var(--p));
}
.pill-logo:hover { transform: scale(1.04); }
.pill-logo:active { transform: scale(0.97); }

/* morph: al llegar a contacto la píldora suelta el vidrio y el logo
   viaja al centro del sello giratorio (--m 0→1, posición vía JS) */
.pill-logo {
  --m: 0;
  background: rgba(255, 255, 255, calc((0.34 + 0.24 * var(--p)) * (1 - var(--m))));
  border-color: rgba(255, 255, 255, calc(0.55 * (1 - var(--m))));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(0.85 * (1 - var(--m)))),
    inset 0 -1px 0 rgba(20, 20, 20, calc(0.06 * (1 - var(--m)))),
    0 calc(6px + 8px * var(--p)) calc(20px + 20px * var(--p)) rgba(20, 20, 20, calc((0.06 + 0.08 * var(--p)) * (1 - var(--m))));
}
.pill-logo::before { opacity: calc((0.7 - 0.3 * var(--p)) * (1 - var(--m))); }
.pill-logo.is-morphing { transition: none; }

.logo {
  position: relative;
  height: calc(20px - 5px * var(--p));
  width: auto;
  display: block;
}

/* Portafolio: la píldora de Scenius se tiñe con la marca activa,
   como si el vidrio flotara sobre su diseño */
.pill-logo {
  transition:
    background-color 0.6s cubic-bezier(.2,.8,.2,1),
    border-color 0.6s ease,
    box-shadow 0.4s cubic-bezier(.2,.8,.2,1),
    transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.pill-logo .logo { transition: filter 0.5s ease; }
.site-header.is-branded .pill-logo {
  background-color: color-mix(in srgb, var(--brand-bg) 80%, transparent);
  border-color: color-mix(in srgb, var(--brand-fg) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 18px color-mix(in srgb, var(--brand-accent) 30%, transparent),
    0 12px 32px color-mix(in srgb, var(--brand-bg) 45%, transparent);
}
.site-header.is-branded .pill-logo::before { opacity: 0.28; }
.site-header.is-branded .pill-logo .logo { filter: invert(1) brightness(0.96); }

/* Marcas alcanzadas: las anteriores quedan como fichas apiladas y la
   activa se abre en una píldora del tamaño de la de Scenius con su logo */
.pill-brands {
  --ls: 1;
  --pad: 20px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  /* margen interno para que sombras y aros no se recorten */
  height: calc(56px - 14px * var(--p) + 16px);
  margin: -8px 0;
  padding: 8px 0;
  max-width: 0;
  opacity: 0;
  /* recorta solo en horizontal (para animar el ancho); en vertical las
     sombras respiran sin dejar un borde recto */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  transition:
    max-width 0.6s cubic-bezier(.2,.8,.2,1),
    padding 0.6s cubic-bezier(.2,.8,.2,1),
    margin 0.6s cubic-bezier(.2,.8,.2,1),
    opacity 0.35s ease,
    translate 0.45s cubic-bezier(.2,.8,.2,1);
}
.site-header.has-brands .pill-brands {
  max-width: 560px;
  margin-left: 2px;
  padding: 8px 6px;
  opacity: 1;
}

/* Desktop/tablet: el grupo logo + marcas se desplaza (--gx, calculado en JS)
   para que la píldora de la marca activa quede centrada en pantalla, sin
   pisar la píldora de secciones */
.pill-logo, .pill-brands {
  translate: var(--gx, 0px) 0;
  transition-property: translate;
}
.pill-logo { transition: translate 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s cubic-bezier(.2,.8,.2,1), transform 0.5s cubic-bezier(.2,.8,.2,1); }
.pill-logo.is-morphing {
  transition:
    translate 0.45s cubic-bezier(.2,.8,.2,1),
    background-color 0.5s ease, border-color 0.5s ease,
    box-shadow 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
}
/* al soltar el vidrio: sin fondo, borde, sombra ni tinte de marca */
.site-header .pill-logo.is-morph-out,
.site-header.is-branded .pill-logo.is-morph-out {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header .pill-logo.is-morph-out::before { opacity: 0; transition: opacity 0.4s ease; }
.pill-logo .logo { transform-origin: center; transition: filter 0.5s ease; will-change: transform; }
.site-header.is-branded .pill-logo.is-morph-out .logo { filter: none; }
@media (min-width: 761px) {
  .site-header.has-brands .pill-brands {
    max-width: min(560px, calc(100vw - var(--navw, 480px) - 250px));
  }
}

.brand-chip {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 28px;
  margin-left: 0;
  border-radius: 999px;
  overflow: hidden; /* el logo se revela dentro de la píldora mientras se abre */
  background-color: var(--cream);
  box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(20, 20, 20, 0.18);
  opacity: 0;
  transform: scale(0.3) translateY(-10px);
  transition:
    width 0.6s cubic-bezier(.3,1.25,.5,1),
    height 0.6s cubic-bezier(.3,1.25,.5,1),
    margin 0.6s cubic-bezier(.3,1.25,.5,1),
    background-color 0.45s ease,
    opacity 0.3s ease,
    transform 0.55s cubic-bezier(.3,1.6,.5,1),
    box-shadow 0.45s ease;
}
.brand-chip .chip-mark {
  width: 64%; height: 64%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(.3,1.4,.5,1);
}
.brand-chip .chip-logo {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--lw) * var(--ls));
  height: calc(var(--lh) * var(--ls));
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  object-fit: contain;
  transition: opacity 0.3s ease, transform 0.55s cubic-bezier(.3,1.4,.5,1);
}

.brand-chip.is-in {
  width: 28px;
  margin-left: -9px;
  opacity: 1;
  transform: none;
}
.brand-chip.is-in:first-child { margin-left: 0; }
.brand-chip.is-in:not(.is-active):hover { transform: translateY(-2px) scale(1.08); }

/* activa: píldora completa con el logo oficial */
.brand-chip.is-active {
  width: calc(var(--lw) * var(--ls) + var(--pad) * 2);
  height: calc(56px - 14px * var(--p));
  margin-left: 8px;
  background-color: var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent),
    0 6px 14px -4px rgba(0, 0, 0, 0.35);
}
.brand-chip.is-active:first-child { margin-left: 0; }
.brand-chip.is-active .chip-mark { opacity: 0; transform: scale(0.4); }
.brand-chip.is-active .chip-logo { opacity: 0.94; transform: translate(-50%, -50%); transition-delay: 0.22s; }

/* Chez Migu: píldora de papel crema, como su brandbook */
.brand-chip[data-brand="chez-migu"].is-active {
  background-color: #F5EBD0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.25  0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    radial-gradient(120% 140% at 30% 20%, rgba(255, 252, 240, 0.7), rgba(226, 208, 170, 0.25));
  box-shadow:
    inset 0 0 0 1.5px rgba(31, 36, 56, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px -4px rgba(0, 0, 0, 0.35);
}
.brand-chip[data-brand="chez-migu"].is-active .chip-logo { opacity: 1; }

.marca { scroll-margin-top: 90px; }

@media (max-width: 960px) and (min-width: 761px) {
  .pill-brands { --ls: 0.8; --pad: 16px; }
  .brand-chip.is-in { margin-left: -14px; }
  .brand-chip.is-in:first-child, .brand-chip.is-active:first-child { margin-left: 0; }
  .brand-chip.is-active { margin-left: 8px; }
}

@media (max-width: 760px) {
  .pill-brands { --ls: 0.7; --pad: 11px; }
  .brand-chip { height: 24px; }
  .brand-chip.is-in { width: 24px; margin-left: -16px; }
  .brand-chip.is-in:first-child { margin-left: 0; }
  .brand-chip.is-active { width: calc(var(--lw) * var(--ls) + var(--pad) * 2); margin-left: 6px; }
  .site-header.has-brands .pill-brands { margin-left: 2px; padding: 8px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill-brands, .brand-chip, .pill-logo, .pill-logo .logo { transition: none; }
}

.pill-nav {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: calc(5px - 1px * var(--p));
}

.pill-nav a {
  position: relative;
  z-index: 1;
  padding: calc(10px - 3px * var(--p)) 16px;
  border-radius: 999px;
  font-size: calc(14px - 1px * var(--p));
  font-weight: 500;
  color: var(--ink);
  opacity: 0.72;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.pill-nav a:hover,
.pill-nav a.is-active { opacity: 1; }

.pill-nav .nav-cta {
  margin-left: 4px;
  background: var(--ink);
  color: var(--white);
  opacity: 1;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(.2,.8,.2,1);
}
.pill-nav .nav-cta:hover { background: var(--blue); transform: scale(1.04); }

.nav-indicator {
  position: absolute;
  top: calc(5px - 1px * var(--p));
  bottom: calc(5px - 1px * var(--p));
  left: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(20,20,20,0.08);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(.3,1.35,.5,1),
    width 0.45s cubic-bezier(.3,1.35,.5,1),
    opacity 0.25s ease;
}
.pill-nav.has-indicator .nav-indicator { opacity: 1; }

/* Secciones con la paleta de la marca activa (como la píldora del logo):
   fondo de marca, texto claro de marca, indicador y CTA en su paleta */
.pill-nav {
  transition:
    background-color 0.6s cubic-bezier(.2,.8,.2,1),
    border-color 0.6s ease,
    box-shadow 0.4s cubic-bezier(.2,.8,.2,1),
    transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.pill-nav a { transition: opacity 0.2s ease, color 0.5s ease; }
.site-header.is-branded .pill-nav {
  background-color: color-mix(in srgb, var(--brand-bg) 80%, transparent);
  border-color: color-mix(in srgb, var(--brand-fg) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 18px color-mix(in srgb, var(--brand-accent) 22%, transparent),
    0 12px 32px color-mix(in srgb, var(--brand-bg) 45%, transparent);
}
.site-header.is-branded .pill-nav::before { opacity: 0.22; }
.site-header.is-branded .pill-nav a { color: var(--brand-fg); }
.site-header.is-branded .nav-indicator {
  background: color-mix(in srgb, var(--brand-fg) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand-fg) 30%, transparent);
}
.site-header.is-branded .pill-nav .nav-cta {
  background: var(--brand-fg);
  color: var(--brand-bg);
}
.site-header.is-branded .pill-nav .nav-cta:hover {
  background: var(--brand-accent);
  color: var(--brand-bg);
}

.pill-menu { display: none; }

/* Botón flotante de WhatsApp — mismo vidrio líquido que las píldoras del header */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  transform: scale(0) translateY(10px);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(.34,1.56,.64,1),
    opacity 0.4s ease,
    box-shadow 0.35s cubic-bezier(.2,.8,.2,1),
    padding-right 0.4s cubic-bezier(.2,.8,.2,1);
}
.wa-float.is-visible { transform: scale(1) translateY(0); opacity: 1; }
.wa-float:hover,
.wa-float:focus-visible { transform: scale(1.05) translateY(0); padding-right: 18px; }
.wa-float:active { transform: scale(0.95) translateY(0); }

.wa-badge {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.12);
}
.wa-badge svg { width: 28px; height: 28px; fill: #fff; position: relative; z-index: 1; }

.wa-pulse {
  position: absolute;
  inset: 0;
  margin: 2px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.55;
  animation: wa-pulse 2.6s ease-out infinite;
}

@keyframes wa-pulse {
  0%   { transform: scale(0.92); opacity: 0.5; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.wa-tip {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: max-width 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, margin-left 0.4s ease;
  opacity: 0;
  margin-left: 0;
}
.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip { max-width: 110px; opacity: 1; margin-left: 10px; }

@media (max-width: 760px) {
  .wa-float { right: 16px; bottom: 16px; height: 50px; }
  .wa-badge { width: 50px; height: 50px; }
  .wa-badge svg { width: 25px; height: 25px; }
  .wa-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: opacity 0.3s ease; transform: none !important; }
  .wa-pulse { animation: none; opacity: 0; }
}

@media (max-width: 1100px) {
  .pill-nav a { padding-left: 12px; padding-right: 12px; }
}

/* Tablet: logo a la izquierda para dejar aire a la píldora de secciones */
@media (max-width: 960px) and (min-width: 761px) {
  .site-header { justify-content: flex-start; }
}

/* Móvil: píldora de secciones → botón que despliega panel glass */
@media (max-width: 760px) {
  .site-header { justify-content: center; padding: 0 16px; }

  .pill-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(46px - 6px * var(--p));
    height: calc(46px - 6px * var(--p));
    padding: 0 calc(14px - 2px * var(--p));
    cursor: pointer;
  }
  .pill-menu span {
    position: relative;
    display: block;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  }
  .menu-open .pill-menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-open .pill-menu span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

  .pill-nav {
    top: calc(100% - 4px);
    right: 16px;
    left: 16px;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.3,1.3,.5,1), visibility 0.3s;
  }
  .menu-open .pill-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .pill-nav a { padding: 14px 18px; font-size: 16px; }
  .pill-nav .nav-cta { margin: 6px 0 0; text-align: center; }
  .nav-indicator { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glass, .nav-indicator, .pill-nav, .pill-menu span { transition: none; }
}

/* Hero */

.hero {
  position: relative;
  padding: 150px 0 130px;
  overflow: hidden;
}

.motif { position: absolute; color: var(--blue); pointer-events: none; }

.motif-coil-v {
  width: 260px;
  height: auto;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
}

@media (max-width: 900px) {
  .motif-coil-v { width: 150px; right: -50px; opacity: 0.35; }
}

.hero-inner {
  max-width: 880px;
  opacity: 0;
  transform: translateY(22px);
}

body.is-loaded .hero-inner {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner, .reveal, body.is-loaded .hero-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.hero-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  max-width: 19ch;
  margin-bottom: 28px;
}

.hero-sub {
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  max-width: 520px;
  color: rgba(20,20,20,0.72);
  margin-bottom: 36px;
}

/* servicios en el hero — cada uno salta a su tarjeta */
.hero-svcs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.hero-svcs a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(53, 91, 206, 0.08);
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  transition: background 0.15s ease, color 0.15s ease;
}
.hero-svcs a span {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--blue);
  transition: color 0.15s ease;
}
.hero-svcs a:hover { background: var(--blue); color: var(--white); }
.hero-svcs a:hover span { color: var(--cream); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-card { scroll-margin-top: 110px; }

/* Concept / qué es scenius */

.concept {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: 130px 0;
  overflow: hidden;
}

.ghost-s {
  position: absolute;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 62vw;
  line-height: 1;
  top: -12vw;
  left: -8vw;
  color: rgba(226, 227, 216, 0.045);
  pointer-events: none;
  user-select: none;
}

.motif-coil-h {
  width: 300px;
  height: auto;
  right: 40px;
  bottom: 40px;
  color: var(--blue);
  opacity: 0.4;
}

@media (max-width: 760px) {
  .motif-coil-h { display: none; }
}

.concept-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
}

@media (max-width: 860px) {
  .concept-grid { grid-template-columns: 1fr; gap: 56px; }
}

.concept-copy h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--white);
  max-width: 480px;
  margin-bottom: 28px;
}

.concept-copy p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 60ch;
  color: rgba(226, 227, 216, 0.8);
  margin-bottom: 18px;
}

.concept-copy em {
  font-style: italic;
  color: var(--white);
}

.concept-quote {
  align-self: center;
  position: relative;
  max-width: 40ch;
  margin: 0 auto;
  text-align: center;
}

.quote-mark { display: block; width: 26px; height: 26px; color: var(--blue); margin: 0 auto 18px; }

.concept-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 16px;
}

.quote-attr {
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 227, 216, 0.6);
}

/* Mercadeo hotelero y gastronómico */

.mercadeo { background: var(--white); padding: 120px 0; }
.mercadeo-head { max-width: 680px; margin-bottom: 56px; }
.mercadeo-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}
.mercadeo-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 14px;
}
.mercadeo-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(20, 20, 20, 0.6);
}

.mercadeo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 64px;
}
@media (max-width: 860px) {
  .mercadeo-grid { grid-template-columns: 1fr; gap: 40px; }
}

.mercadeo-col h3 {
  font-size: 21px;
  margin-bottom: 16px;
}
.mercadeo-col p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(20, 20, 20, 0.72);
  max-width: 50ch;
  margin-bottom: 14px;
}

.mercadeo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid rgba(20, 20, 20, 0.12);
}
.mercadeo-foot p {
  font-size: 15px;
  color: rgba(20, 20, 20, 0.65);
  max-width: 46ch;
}
@media (max-width: 760px) {
  .mercadeo-foot { flex-direction: column; align-items: flex-start; }
}

/* Servicios */

.servicios { padding: 130px 0 100px; overflow: hidden; }

.servicios-head { margin-bottom: 56px; }
.servicios-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}

.servicios-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  max-width: 620px;
  margin-bottom: 14px;
}

.servicios-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(20,20,20,0.6);
}

.servicios-list { position: relative; }

.servicios-list li {
  --svc: 0;
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  align-items: start;
  padding: 30px 0;
}

/* separador solo bajo el texto, para no cortar la línea de tiempo */
.servicios-list li::after {
  content: "";
  position: absolute;
  left: 64px; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(var(--svc));
  transform-origin: left;
}
.servicios-list li:last-child::after { display: none; }

/* línea de tiempo: pista tenue + relleno azul que crece con el scroll */
.servicios-list { --svc-line: 0; }
.svc-line {
  position: absolute;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--line);
  pointer-events: none;
}
.svc-line i {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleY(var(--svc-line));
  transform-origin: top;
}

.marker {
  position: relative;
  z-index: 1;
  width: 22px; height: 22px;
  margin-top: 4px;
  color: var(--blue);
  background: var(--white);
  border-radius: 50%;
  overflow: visible;
}
.marker .track { opacity: 0.18; }
.marker .ring {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--svc));
  transform: rotate(-90deg);
  transform-origin: center;
}
.marker .dot {
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(.3,1.5,.5,1);
}
.servicios-list li.is-reached .marker .dot { transform: scale(1); }

.servicios-list li > div {
  opacity: var(--svc);
  transform: translateX(calc((1 - var(--svc)) * 28px));
}
.servicios-list li p {
  opacity: clamp(0, calc(var(--svc) * 1.6 - 0.6), 1);
}

.servicios-list h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

.servicios-list p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(20,20,20,0.62);
  max-width: 56ch;
}

.servicios-list.is-static li { --svc: 1; }
.servicios-list.is-static { --svc-line: 1; }
.servicios-list.is-static .marker .dot { transform: scale(1); }

@media (max-width: 640px) {
  .servicios-list li { grid-template-columns: 26px 1fr; gap: 16px; }
  .servicios-list li::after { left: 42px; }
}

/* Portafolio */

.portafolio {
  padding: 0;
  background: var(--cream);
}

.portafolio-head {
  position: relative;
  padding: 150px 0 56px;
}

/* línea que se dibuja al entrar — marca el cambio de sección */
.portafolio-line {
  display: block;
  width: 64px;
  height: 2px;
  margin-bottom: 24px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}
.portafolio-line.reveal.is-visible { transform: scaleX(1); }

.portafolio-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}

.portafolio-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  max-width: 560px;
  margin-bottom: 14px;
}

.portafolio-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(20,20,20,0.6);
}

.marca {
  background: var(--bg);
  color: var(--fg);
  padding: 88px 0 96px;
}

.marca-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 48px;
  align-items: end;
  margin-bottom: 44px;
}

.marca-head h3 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  color: var(--fg);
}

.marca-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 10px;
}

.marca-desc {
  font-size: 16px;
  line-height: 1.65;
  max-width: 46ch;
  opacity: 0.78;
}

.reel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px max(24px, calc((100vw - 1180px) / 2 + 24px)) 12px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2 + 24px));
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 35%, transparent) transparent;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.reel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reel.is-dragging * { pointer-events: none; }

.tile {
  flex: 0 0 auto;
  height: min(70vh, 540px);
  aspect-ratio: var(--ar);
  border-radius: 6px;
  overflow: hidden;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.tile video,
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 860px) {
  .marca { padding: 64px 0 72px; }
  .marca-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .tile { height: min(62vh, 440px); }
}

/* Vista de perfil de Instagram (Casa Solea) */




















#lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 24, 0.9);
  cursor: zoom-out;
}
#lightbox[hidden] { display: none; }
#lightbox img {
  max-width: min(94vw, 900px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}


/* Contacto */

.contacto {
  position: relative;
  padding: 150px 0 140px;
  text-align: center;
  overflow: hidden;
}

.seal {
  width: 220px;
  height: 220px;
  color: var(--blue);
  display: block;
  margin: 0 auto 44px;
  animation: spin 30s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

.contacto h2 {
  font-size: clamp(30px, 4.2vw, 48px);
  margin-bottom: 20px;
}

.contacto-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(20,20,20,0.6);
  margin-bottom: 36px;
}

/* Footer — cierra el relato: propósito, portafolio y el logo gigante del inicio */

.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding-top: 110px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}

.footer-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 227, 216, 0.5);
  margin-bottom: 20px;
}

.footer-statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.9vw, 42px);
  line-height: 1.14;
  text-wrap: balance;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.footer-statement em { font-style: italic; color: var(--white); }
.footer-statement .nowrap { display: inline-block; text-wrap: balance; }
@media (min-width: 861px) { .footer-statement .nowrap { white-space: nowrap; } }

.footer-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.footer-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(226, 227, 216, 0.15);
  opacity: 0.78;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.3,1.5,.5,1);
}
.footer-mark img { width: 64%; height: 64%; object-fit: contain; }
.footer-mark:hover { opacity: 1; transform: translateY(-3px) scale(1.06); }

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 34px;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 227, 216, 0.45);
  margin-bottom: 6px;
}
.footer-col a, .footer-col span { color: rgba(226, 227, 216, 0.8); width: fit-content; }
.footer-col a { transition: color 0.2s ease; }
.footer-col a:hover { color: var(--white); }

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 90px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(226, 227, 216, 0.12);
  font-size: 12px;
  color: rgba(226, 227, 216, 0.45);
}
.footer-bar a { color: rgba(226, 227, 216, 0.45); transition: color 0.2s ease; }
.footer-bar a:hover { color: rgba(226, 227, 216, 0.9); }
.to-top span { display: inline-block; margin-left: 4px; transition: transform 0.3s cubic-bezier(.3,1.5,.5,1); }
.to-top:hover span { transform: translateY(-3px); }

/* logo gigante, cortado por el borde inferior: espejo del intro */
.footer-wordmark {
  width: calc(100% - 40px);
  margin: 10px auto 0;
  aspect-ratio: 4148 / 568;
  background: var(--blue);
  -webkit-mask: url("images/scenius-logo-mask.png") center top / 100% auto no-repeat;
  mask: url("images/scenius-logo-mask.png") center top / 100% auto no-repeat;
  margin-bottom: -3.2vw;
}

@media (max-width: 860px) {
  .site-footer { padding-top: 80px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { padding-top: 0; }
  .footer-bar { margin-top: 60px; justify-content: center; text-align: center; }
  .footer-marks { gap: 8px; }
  .footer-mark { width: 40px; height: 40px; }
}

/* Header sobre marcas claras: logo de Scenius en su color original */
.site-header.is-branded.brand-light .pill-logo .logo { filter: none; }

/* Casa Solea: crema de su brandbook + barra naranja, triángulo azul y
   tipografía sans pesada, como sus láminas */
.marca[data-brand="casa-solea"] .marca-head { position: relative; }
.marca[data-brand="casa-solea"] .marca-head h3 {
  position: relative;
  padding-left: 34px;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.marca[data-brand="casa-solea"] .marca-head h3::before {
  content: "";
  position: absolute;
  left: 0; top: 8%;
  width: 12px; height: 84%;
  border-radius: 8px;
  background: var(--accent);
}
.marca[data-brand="casa-solea"] .marca-head::after {
  content: "";
  position: absolute;
  right: 24px; top: -6px;
  width: 54px; height: 54px;
  background: var(--fg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.marca[data-brand="casa-solea"] .marca-tag { color: var(--accent); }
.marca[data-brand="casa-solea"] .marca-desc { color: color-mix(in srgb, var(--fg) 80%, transparent); }
.marca[data-brand="casa-solea"] .tile {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  box-shadow: 0 10px 30px -12px rgba(46, 91, 238, 0.25);
}

/* Casa Solea: la píldora activa en su naranja con el logo blanco */
.brand-chip[data-brand="casa-solea"].is-active { background-color: #FC400C; }
.brand-chip[data-brand="casa-solea"].is-active .chip-logo { opacity: 1; }

/* Chez Migu: de fondo, la lámina del manual de marca con blur (en vez del
   azul liso) y encima la galería de Instagram */
.marca[data-brand="chez-migu"] { position: relative; isolation: isolate; overflow: clip; }
.marca-bg { display: none; }
.marca[data-brand="chez-migu"] .marca-bg {
  display: block;
  position: absolute;
  inset: -30px;
  z-index: -1;
  background:
    linear-gradient(rgba(28, 36, 58, 0.55), rgba(28, 36, 58, 0.62)),
    url("media/chez-migu/i1.jpg") center / cover no-repeat;
  filter: blur(12px) saturate(1.05);
  transform: translateZ(0);
}
.marca[data-brand="chez-migu"] .marca-head h3 { text-shadow: 0 2px 24px rgba(20, 26, 44, 0.45); }
.marca[data-brand="chez-migu"] .marca-desc { opacity: 0.92; }
.tile a { position: relative; display: block; width: 100%; height: 100%; }
.marca[data-brand="chez-migu"] .tile { box-shadow: 0 18px 40px -18px rgba(10, 14, 28, 0.7); }
.tile-reel .ig-badge {
  position: absolute; right: 12px; top: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: rgba(20, 24, 40, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tile-reel .ig-badge svg { width: 16px; height: 16px; margin-left: 2px; }
.marca[data-brand="chez-migu"] .marca-tag { color: #F4AE84; }

/* Servicios 2026 — oferta de Scenius sobre el azul de marca */
.oferta {
  position: relative;
  background: var(--blue);
  color: var(--cream);
  padding: 130px 0 120px;
  overflow: hidden;
}
.oferta-head { max-width: 760px; margin-bottom: 48px; }
.oferta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 227, 216, 0.75);
  margin-bottom: 22px;
}
.oferta-kicker img { width: 16px; height: 16px; filter: brightness(0) invert(0.92); }
.oferta-head h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 22px;
}
.oferta-head h2 em { font-style: italic; color: var(--white); }
.oferta-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.55;
  color: rgba(226, 227, 216, 0.82);
  max-width: 620px;
}

.oferta-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(226, 227, 216, 0.25);
  border-bottom: 1px solid rgba(226, 227, 216, 0.25);
  margin-bottom: 64px;
}
.oferta-stats li { padding: 26px 0 24px; display: flex; flex-direction: column; gap: 6px; }
.oferta-stats li + li { padding-left: 28px; border-left: 1px solid rgba(226, 227, 216, 0.25); }
.oferta-stats b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1;
  color: var(--white);
}
.oferta-stats span { font-size: 14px; color: rgba(226, 227, 216, 0.75); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  border-radius: 22px;
  padding: 28px 24px 24px;
  box-shadow: 0 18px 40px -22px rgba(10, 20, 60, 0.55);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -24px rgba(10, 20, 60, 0.6); }
.svc-card--feature { background: var(--ink); color: var(--cream); }
.svc-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--blue);
  margin-bottom: 20px;
}
.svc-card--feature .svc-num { color: #8FA8F0; }
.svc-who {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.55);
  margin-bottom: 10px;
  min-height: 2.9em;
}
.svc-card--feature .svc-who { color: rgba(226, 227, 216, 0.6); }
.svc-card h3 {
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.1;
  margin-bottom: 14px;
}
.svc-desc { font-size: 15px; line-height: 1.6; color: rgba(20, 20, 20, 0.75); margin-bottom: 18px; }
.svc-card--feature .svc-desc { color: rgba(226, 227, 216, 0.8); }
.svc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 16px;
  margin-bottom: 22px;
  border-top: 1px solid rgba(20, 20, 20, 0.12);
  font-size: 14px;
  line-height: 1.45;
}
.svc-card--feature .svc-list { border-top-color: rgba(226, 227, 216, 0.18); }
.svc-list li { position: relative; padding-left: 18px; }
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 7px; height: 7px;
  border: 1.2px solid var(--blue);
  border-radius: 50%;
}
.svc-card--feature .svc-list li::before { border-color: #8FA8F0; }
.svc-meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 20, 20, 0.12);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.svc-card--feature .svc-meta { border-top-color: rgba(226, 227, 216, 0.18); color: #8FA8F0; }

.oferta-why {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 32px;
  align-items: center;
  padding-top: 36px;
  border-top: 1px solid rgba(226, 227, 216, 0.25);
}
.oferta-why-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 227, 216, 0.7);
}
.oferta-why-text {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: rgba(226, 227, 216, 0.85);
}
.oferta-why-text em { font-style: italic; color: var(--white); }
.oferta-btn { background: var(--cream); color: var(--ink); white-space: nowrap; }
.oferta-btn:hover { background: var(--white); transform: translateY(-2px); }

.svc-grid .svc-card.reveal:nth-child(2) { transition-delay: 80ms; }
.svc-grid .svc-card.reveal:nth-child(3) { transition-delay: 160ms; }
.svc-grid .svc-card.reveal:nth-child(4) { transition-delay: 240ms; }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-who { min-height: 0; }
  .oferta-why { grid-template-columns: 1fr; gap: 18px; }
  .oferta-btn { justify-self: start; }
}
@media (max-width: 640px) {
  .oferta { padding: 96px 0 90px; }
  .svc-grid { grid-template-columns: 1fr; }
  .oferta-stats { grid-template-columns: 1fr; }
  .oferta-stats li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(226, 227, 216, 0.25); }
}

/* BoH: el key visual como fondo desenfocado y en movimiento lento,
   como el fondo de pantalla del iPhone */
.marca[data-brand="boh"] { position: relative; overflow: hidden; isolation: isolate; }
.marca[data-brand="boh"] .marca-bg {
  display: block;
  position: absolute;
  inset: -12%;
  z-index: -1;
  /* zoom al edificio naranja del centro para que su luz llene el fondo */
  /* desenfoque horneado en una imagen de 3 KB: animarla no cuesta GPU */
  background: #040900 url("media/boh/bg-blur.jpg") center / cover no-repeat;
  transform: scale(1.15);
  animation: marca-bg-drift 24s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
.marca[data-brand="boh"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(100% 75% at 50% 60%, rgba(4, 9, 0, 0.1), rgba(4, 9, 0, 0.7)),
    linear-gradient(rgba(4, 9, 0, 0.55), rgba(4, 9, 0, 0.2) 45%, rgba(4, 9, 0, 0.45));
  pointer-events: none;
}
@keyframes marca-bg-drift {
  0%   { transform: scale(1.15) translate3d(-2%, -1%, 0) rotate(-1deg); }
  50%  { transform: scale(1.26) translate3d(2%, 1.5%, 0) rotate(0.8deg); }
  100% { transform: scale(1.18) translate3d(-1%, 2%, 0) rotate(-0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marca[data-brand="boh"] .marca-bg { animation: none; }
}

/* Casa Solea: crema de sus piezas con textura de papel y tipografía
   condensada naranja (Anton como equivalente web de su letra de afiche) */
.marca[data-brand="casa-solea"] { position: relative; overflow: hidden; isolation: isolate; }
.marca[data-brand="casa-solea"] .marca-bg { display: none; }
.marca[data-brand="casa-solea"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("images/casa-solea-papel.png");
  opacity: 1;
}
.marca[data-brand="casa-solea"] .marca-head h3 {
  font-family: "Anton", var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
  color: var(--fg);
}
.marca[data-brand="casa-solea"] .marca-tag {
  font-family: "Anton", var(--sans);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}
.marca[data-brand="casa-solea"] .marca-desc { color: color-mix(in srgb, var(--fg) 85%, #5a2410); }
.marca[data-brand="casa-solea"] .tile { box-shadow: 0 14px 34px -16px rgba(150, 60, 20, 0.35); }

/* Casa Solea: su logotipo oficial en naranja en lugar del título en texto */
.marca[data-brand="casa-solea"] .marca-head h3.marca-h3-logo { padding-left: 0; line-height: 0; }
.marca[data-brand="casa-solea"] .marca-head h3.marca-h3-logo::before { display: none; }
.marca-logo { height: clamp(96px, 10vw, 150px); width: auto; display: block; }

/* Casa Solea: lema "Playa & Pola" bajo el logo y el coquito de sus piezas
   en lugar del triángulo */
.marca-lema { display: block; height: clamp(22px, 2.2vw, 32px); width: auto; margin-top: 14px; }
.marca[data-brand="casa-solea"] .marca-head::after {
  width: clamp(84px, 8vw, 118px);
  height: clamp(84px, 8vw, 118px);
  top: -14px;
  background: url("images/casa-solea-coco.png") center / contain no-repeat;
  clip-path: none;
  transform: rotate(-6deg);
}

/* Chez Migu: el candelabro como fondo desenfocado en movimiento lento
   (misma mecánica que BoH y Casa Solea) */
.marca[data-brand="chez-migu"] { overflow: hidden; }
.marca[data-brand="chez-migu"] .marca-bg {
  inset: -12%;
  background:
    url("media/chez-migu/bg-blur.jpg") 50% 30% / cover no-repeat;
  filter: none;
  transform: scale(1.15);
  animation: marca-bg-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .marca[data-brand="chez-migu"] .marca-bg { animation: none; }
}

/* Kuro: mesa de sushi como fondo desenfocado en movimiento lento */
.marca[data-brand="kuro"] { position: relative; overflow: hidden; isolation: isolate; }
.marca[data-brand="kuro"] .marca-bg {
  display: block;
  position: absolute;
  inset: -12%;
  z-index: -1;
  background:
    url("media/kuro/bg-blur.jpg?v=2") 50% 40% / cover no-repeat;
  transform: scale(1.15);
  animation: marca-bg-drift 26s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .marca[data-brand="kuro"] .marca-bg { animation: none; }
}

/* Perla Roca: campo de color vino tinto y beige de su manual, con manchas
   desenfocadas que se mueven lento (mismo gesto que los fondos de foto) */
.marca[data-brand="perla-roca"] { position: relative; overflow: hidden; isolation: isolate; background: #6E3B3E; }
.marca[data-brand="perla-roca"] .marca-bg {
  display: block;
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 22% 28%, rgba(232, 226, 217, 0.55), rgba(232, 226, 217, 0) 70%),
    radial-gradient(34% 30% at 78% 70%, rgba(232, 226, 217, 0.4), rgba(232, 226, 217, 0) 70%),
    radial-gradient(30% 28% at 70% 22%, rgba(215, 165, 164, 0.45), rgba(215, 165, 164, 0) 70%),
    radial-gradient(45% 40% at 30% 80%, rgba(74, 32, 36, 0.9), rgba(74, 32, 36, 0) 72%),
    radial-gradient(60% 55% at 55% 45%, #7C4646, #5A2C30 80%);
  transform: scale(1.1);
  animation: perla-field 22s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
@keyframes perla-field {
  0%   { transform: scale(1.1) translate3d(-3%, -2%, 0) rotate(-3deg); }
  50%  { transform: scale(1.22) translate3d(3%, 2%, 0) rotate(4deg); }
  100% { transform: scale(1.14) translate3d(-1%, 3%, 0) rotate(-1deg); }
}
.marca[data-brand="perla-roca"] .marca-tag { color: #F0C9C7; }
@media (prefers-reduced-motion: reduce) {
  .marca[data-brand="perla-roca"] .marca-bg { animation: none; }
}

/* Rito & Monteo: bestiario recortado flotando sobre la galería, como si
   estuviera más cerca de la cámara (parallax por scroll + vaivén suave) */
.marca[data-brand="rito-monteo"] { position: relative; overflow: hidden; isolation: isolate; }
/* detrás del contenido: el bestiario queda de fondo, asomándose entre y alrededor de la galería */
.rm-floats { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rm-float {
  position: absolute;
  height: auto;
  /* desenfoque de primer plano y sombra horneados en el PNG */
  animation: rm-bob 7s ease-in-out infinite alternate;
  will-change: transform, translate;
}
/* más cerca de la cámara = más grande y más desenfocado */
.rm-f1 { --dof: 2.5px; width: clamp(110px, 11vw, 180px); left: 1%;   top: 34%; animation-duration: 8s; }
.rm-f2 { --dof: 4px;   width: clamp(200px, 22vw, 360px); right: 2%;  top: 0;  animation-duration: 6.5s; animation-delay: -2s; }
.rm-f3 { --dof: 3px;   width: clamp(100px, 10vw, 160px); left: 38%;  bottom: -3%; animation-duration: 9s; animation-delay: -4s; }
@keyframes rm-bob {
  0%   { transform: translate3d(0, 0, 0) rotate(-3deg); }
  100% { transform: translate3d(0, -14px, 0) rotate(3deg); }
}
@media (max-width: 760px) {
  .rm-f1 { top: 52%; left: -4%; }
  .rm-f2 { top: 34%; right: -8%; }
  .rm-f3 { left: 58%; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-float { animation: none; }
}

/* Rendimiento: las animaciones de fondo solo corren con la sección en pantalla
   (la clase la pone un IntersectionObserver) */
.marca:not(.in-view) .marca-bg,
.marca:not(.in-view) .rm-float { animation-play-state: paused; }
/* el header no se compone mientras el logo gigante del intro ocupa la pantalla */
body.intro-active .site-header { visibility: hidden; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.5s; }

/* Rendimiento del header: el cálculo de layout de las píldoras queda
   confinado al header y las transiciones de tamaño son más cortas */
.site-header { contain: layout style; }

/* Móvil: un solo eje central. La píldora de la marca activa va centrada en el
   header, así que el encabezado de cada marca se centra debajo de ella, con
   aire suficiente para que no se lean como dos títulos pegados */
@media (max-width: 760px) {
  .marca { padding: 112px 0 56px; }
  .marca-head {
    justify-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 28px;
  }
  .marca-head h3 { font-size: clamp(34px, 9.5vw, 44px); }
  .marca-info { max-width: 34ch; margin: 0 auto; }
  .marca-tag { margin-bottom: 8px; }
  /* Casa Solea: logo centrado y coquito como acento en la esquina */
  .marca[data-brand="casa-solea"] .marca-head h3.marca-h3-logo { display: flex; flex-direction: column; align-items: center; }
  .marca[data-brand="casa-solea"] .marca-head::after { right: 4px; top: -36px; width: 64px; height: 64px; }
}

/* Escritorio: la columna de descripción de cada marca arranca en el mismo
   eje vertical que el borde izquierdo de la píldora de secciones (--info-shift
   lo calcula el JS al cargar y al cambiar el ancho) */
@media (min-width: 861px) {
  .marca-info { margin-left: var(--info-shift, 0px); }
}

/* Píldora de la marca activa más grande y con más aire respecto al logo de
   Scenius y las fichas apiladas, para que la marca protagonice el centro */
.brand-chip.is-active { --act: 1.22; }
.brand-chip .chip-logo {
  width: calc(var(--lw) * var(--ls) * var(--act, 1));
  height: calc(var(--lh) * var(--ls) * var(--act, 1));
}
.brand-chip.is-active {
  width: calc((var(--lw) * var(--ls) + var(--pad) * 2) * var(--act));
  height: calc((56px - 14px * var(--p)) * 1.16);
  margin-left: 22px;
}
.pill-brands { height: calc((56px - 14px * var(--p)) * 1.16 + 16px); }
@media (max-width: 960px) and (min-width: 761px) {
  .brand-chip.is-active { margin-left: 16px; }
}
@media (max-width: 760px) {
  .brand-chip.is-active { width: calc((var(--lw) * var(--ls) + var(--pad) * 2) * var(--act)); height: 34px; margin-left: 12px; }
}

/* Coherencia con las píldoras: el contenido usa esquinas generosas y
   continuas (estilo iOS) en lugar del radio casi recto de antes */
:root { --r-content: 28px; }
.tile { border-radius: var(--r-content); }
#lightbox img { border-radius: var(--r-content); }
.svc-card { border-radius: var(--r-content); }
@supports (corner-shape: squircle) {
  .tile, .svc-card, #lightbox img { corner-shape: squircle; border-radius: calc(var(--r-content) * 1.6); }
}
@media (max-width: 760px) {
  :root { --r-content: 22px; }
}
/* pantallas medianas: la píldora activa crece menos para no tocar las secciones */
@media (max-width: 1180px) and (min-width: 761px) {
  .brand-chip.is-active { --act: 1.06; margin-left: 12px; }
}
/* escritorio angosto: sin espacio para todo, se ocultan las fichas apiladas y
   quedan solo el logo de Scenius y la píldora de la marca activa */
@media (min-width: 761px) and (max-width: 1060px) {
  .brand-chip.is-in:not(.is-active) { width: 0; margin-left: 0; opacity: 0; transform: scale(0.6); }
  .brand-chip.is-active { margin-left: 8px; }
}

/* Subtítulo de cada marca (categoría y ciudad) como encabezado secundario:
   más grande y en la serif del sitio */
.marca-tag {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
}
@media (max-width: 760px) {
  .marca-tag { font-size: 20px; margin-bottom: 10px; }
}
.marca[data-brand="casa-solea"] .marca-tag { font-family: "Anton", var(--sans); font-weight: 400; letter-spacing: 0.03em; font-size: clamp(20px, 1.9vw, 26px); }
@media (min-width: 761px) and (max-width: 1000px) {
  .brand-chip.is-active { --act: 1; }
}
/* tableta (761-960): no caben logo + marca + secciones; dentro del portafolio
   el logo de Scenius cede su lugar a la píldora de la marca */
@media (min-width: 761px) and (max-width: 960px) {
  .site-header.has-brands .pill-logo { position: absolute; left: 20px; opacity: 0; pointer-events: none; }
}

/* Footer: "Powered by" con el logo oficial de LISA (l1sa ▮) */
.powered-by { display: inline-flex; align-items: center; gap: 8px; }
.powered-logo { height: 13px; width: auto; opacity: 0.55; transition: opacity 0.2s ease; }
.powered-by:hover .powered-logo { opacity: 0.95; }

/* Cada marca: arriba solo el título; subtítulo y descripción debajo de la
   galería, en la columna derecha (alineada con la píldora de secciones) */
.marca-head { margin-bottom: 36px; align-items: end; }
.marca-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 48px;
  margin-top: 40px;
}
.marca-foot .marca-info { grid-column: 2; }
@media (max-width: 860px) {
  .marca-foot { grid-template-columns: 1fr; margin-top: 28px; }
  .marca-foot .marca-info { grid-column: 1; }
}
@media (max-width: 760px) {
  .marca-head { margin-bottom: 24px; }
  .marca-foot { justify-items: center; text-align: center; }
}

/* Sello de contacto: el logo que llega desde el header queda aquí, fijo */
.seal-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 44px; }
.seal-wrap .seal { margin: 0; }
.seal-logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 58%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
body.logo-landed .seal-logo { opacity: 1; }
body.logo-landed .site-header .pill-logo { opacity: 0; visibility: hidden; transition: none; }
@media (prefers-reduced-motion: reduce) { .seal-logo { opacity: 1; } }

/* Otros proyectos desarrollados — cierre del portafolio */
.proyectos {
  background: var(--cream);
  padding: 110px 0 120px;
}
.proyectos-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 32px;
}
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.proyecto figure {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 18px;
  background: rgba(20,20,20,0.06);
}
.proyecto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.proyecto:hover img { transform: scale(1.04); }
.proyecto h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 4px; }
.proyecto p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(20,20,20,0.6);
}
@media (max-width: 760px) {
  .proyectos { padding: 80px 0 90px; }
  .proyectos-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .proyecto:last-child { grid-column: 1 / -1; }
  .proyecto:last-child figure { aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: reduce) {
  .proyecto img, .proyecto:hover img { transition: none; transform: none; }
}