/* =========================================================
   Optica Full Vision — Cuenca, Ecuador
   Quiet, light and precise: white paper, navy ink, the logo's blue
   used sparingly. Hairlines instead of boxes. Motion only where it
   means something — things come into focus, the way a lens settles.
   ========================================================= */

/* Typefaces load via <link> in each page's <head>; an @import here would
   block rendering until the font CSS resolves. */

:root {
  --paper: #FFFFFF;
  --mist: #F4F6FA;
  --ink: #0E1330;
  --ink-2: #3D4460;
  --ink-3: #676D86;
  --line: #E4E7EF;
  --line-strong: #CBD0DD;
  --night: #121A4A;

  /* Sampled from the logo artwork: rgb(53, 75, 187). */
  --blue: #354BBB;
  --blue-deep: #28398F;
  --blue-soft: #A3B0EC;

  /* WhatsApp's own #25D366 fails contrast under white text (1.98:1). */
  --wa: #178344;
  --wa-deep: #106A36;

  /* Drawn by the Braille Institute for readers with low vision —
     the people this shop serves. */
  --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1180px;
  --gutter: 24px;
  --header-h: 84px;
  --header-h-compact: 68px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* =========================================================
   Base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(53, 75, 187, 0.14);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
address,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p,
li,
address {
  text-wrap: pretty;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a,
button,
label,
input,
textarea,
summary {
  touch-action: manipulation;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-footer :focus-visible,
.lightbox :focus-visible {
  outline-color: #FFFFFF;
}

:target {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.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;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 104px;
}

@media (max-width: 700px) {
  .section {
    padding-block: 72px;
  }

}

/* A section that continues the one above it. */
.section-follow {
  padding-top: 0;
}

.section-title {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* =========================================================
   Buttons & links
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.16s var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--blue);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--blue-deep);
}

/* The main button carries the brand's navy; WhatsApp keeps its green in the
   floating button and the small "Consultar" links, where it reads as the app. */
.btn-whatsapp {
  background: var(--night);
  color: #FFFFFF;
}

.btn-whatsapp:hover {
  background: var(--blue);
}

.btn-whatsapp:hover {
  background: var(--wa-deep);
}

.btn-sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.95rem;
}

/* Standalone text link: a hairline underline that thickens and turns blue. */
.link {
  display: inline-block;
  padding-bottom: 3px;
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color 0.2s ease, background-size 0.25s var(--ease-out);
}

.link:hover {
  color: var(--blue);
  background-size: 100% 2px;
}

/* =========================================================
   Top bar + header
   A night-blue strip for phones and social links,
then the header in the
   logo's own blue,
as on the shop's original site.
   ========================================================= */
.topbar {
  background: var(--night);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}

.topbar-contact,
.topbar-social {
  display: flex;
  align-items: center;
}

.topbar-contact {
  flex-wrap: wrap;
  gap: 4px 24px;
}

.topbar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.topbar-contact .fa {
  color: var(--blue-soft);
}

.topbar-social {
  gap: 4px;
}

.topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.topbar a:hover {
  color: #FFFFFF;
}

.topbar-social a:hover {
  background: rgba(255, 255, 255, 0.12);
}

.topbar :focus-visible,
.site-header :focus-visible {
  outline-color: #FFFFFF;
}

/* No backdrop-filter or transform here: either would make the header the
   containing block of the fixed mobile menu inside it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--blue);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -16px rgba(18, 26, 74, 0.6);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height 0.35s var(--ease-out);
}

.site-header.is-scrolled .header-row {
  height: var(--header-h-compact);
}

.brand {
  flex: none;
  display: inline-flex;
}

.brand img {
  width: auto;
  height: 58px;
  transition: height 0.35s var(--ease-out);
}

.site-header.is-scrolled .brand img {
  height: 46px;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  position: relative;
  display: inline-block;
  padding-block: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: #FFFFFF;
}

.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after {
    transform: scaleX(1);
  }
}

.header-contact {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* On the blue header the call to action is the one white thing. */
.btn-light {
  background: #FFFFFF;
  color: var(--blue);
}

.btn-light:hover {
  background: var(--mist);
  color: var(--blue-deep);
}

.header-phone {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.header-phone .fa {
  color: var(--blue);
}

/* Two bars that cross into an X — the icon shows what the tap will do. */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle-bar {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
  transition: transform 0.3s var(--ease-out);
}

.nav-toggle-bar:first-child {
  transform: translateY(-4px);
}

.nav-toggle-bar:last-child {
  transform: translateY(4px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  :root {
    --header-h: 72px;
    --header-h-compact: 64px;
  }

  .brand img {
    height: 48px;
  }

  .site-header.is-scrolled .brand img {
    height: 42px;
  }

  .nav-toggle {
    display: block;
  }

  .site-menu {
    position: fixed;
    top: var(--menu-top, var(--header-h));
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
    padding: 20px var(--gutter) 40px;
    background: var(--paper);
    color: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .site-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
  }

  .site-menu :focus-visible {
    outline-color: var(--blue);
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links li {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }

  .site-menu.is-open .nav-links li {
    opacity: 1;
    transform: none;
  }

  .site-menu.is-open .nav-links li:nth-child(2) { transition-delay: 0.04s; }
  .site-menu.is-open .nav-links li:nth-child(3) { transition-delay: 0.08s; }
  .site-menu.is-open .nav-links li:nth-child(4) { transition-delay: 0.12s; }
  .site-menu.is-open .nav-links li:nth-child(5) { transition-delay: 0.16s; }

  .nav-links a,
  .nav-links a:hover {
    display: block;
    padding: 18px 0;
    color: var(--ink);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a[aria-current="page"] {
    color: var(--blue);
  }

  .header-contact {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .header-contact .btn {
    min-height: 52px;
    background: var(--blue);
    color: #FFFFFF;
  }

  .site-menu .header-phone {
    display: inline-flex;
    justify-content: center;
    font-size: 1.1rem;
  }
}

@media (max-width: 520px) {
  .topbar {
    font-size: 0.82rem;
  }
}

/* =========================================================
   Page intros — each inner page opens with its words on the left and
   its own small composition on the right.
   ========================================================= */
.page-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
  background:
    radial-gradient(ellipse 50% 70% at 82% 50%, var(--mist), transparent 70%),
    var(--paper);
}

.page-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.page-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 700;
}

/* The small labels carry a tiny pair of the logo's glasses, drawn in the
   label's own colour. The mask is the same traced drawing the hero uses. */
.page-kicker::before,
.showcase-kicker::before {
  content: '';
  flex: none;
  width: 38px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 438.5'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M409.3 0.6c11.3-1 25.5-0.8 33.8-0.2c8.3 0.6 11.1 1.6 16 3.8c4.9 2.2 7.5 3.6 13.3 9.5c5.8 5.9 16.8 21.2 21.3 26.1c4.5 4.9 3.6 3.4 5.6 3.5c2 0 2.4 0.6 6.3-3.2c3.9-3.8 12-14.3 17-19.5c5-5.2 9-8.6 13.3-11.5c4.3-2.9 8.1-4.6 12.7-6.1c4.6-1.5 8.9-2.4 15.2-2.7c6.3-0.3 14.5-0.3 22.5 0.7c8 1 16.4 2.6 25.7 5c9.3 2.4 18.1 5.3 30.2 9.6c12.1 4.3 26.3 9.1 42.3 16.2c16 7.2 33.6 17.7 53.6 26.7c20 9 45.9 18.3 66.2 27.1c20.3 8.8 39.4 17.7 55.6 25.7c16.2 8 27.6 14.1 41.4 22.1c13.8 8 29.9 17.9 41.5 26c11.6 8.1 20.3 15.1 28.1 22.5c7.8 7.4 14.6 16.4 18.7 21.9c4.1 5.5 4.4 7.6 5.8 11.1c1.4 3.5 2.3 6.5 2.9 9.9c0.6 3.4 0.9 7.5 0.6 10.8c-0.3 3.3-1 6-2.3 9.1c-1.3 3.1-3.3 6.4-5.6 9.2c-2.3 2.8-4.9 5.1-8.2 7.6c-3.3 2.5-6.5 4.5-11.8 7.1c-5.3 2.6-15.6 6.4-19.9 8.8c-4.3 2.4-4.2 2.9-5.7 5.3c-1.5 2.3-2 1.7-3.1 8.8c-1.1 7.1-2 24.3-3.8 33.9c-1.8 9.6-3.9 15.9-7 23.8c-3.1 7.9-7.3 16.5-11.9 23.7c-4.6 7.2-10.3 14.1-15.4 19.4c-5.1 5.3-9.6 8.8-15.2 12.5c-5.6 3.7-10.8 6.4-18.2 9.6c-7.4 3.2-17 6.6-26.5 9.3c-9.5 2.7-17.5 4.9-30.7 7c-13.2 2.1-27.4 4.1-48.2 5.4c-20.8 1.3-59.8 2.2-76.9 2.4c-17.1 0.2-17.6-0.1-25.4-1.4c-7.8-1.3-15.8-4.3-21.3-6.4c-5.5-2.1-7.9-3.9-11.5-6.4c-3.7-2.5-5.2-2.8-10.4-8.5c-5.2-5.7-14.1-15.5-20.9-25.7c-6.8-10.2-13.7-22.7-19.9-35.7c-6.2-13-12.9-34.5-17.2-42.3c-4.3-7.8-3.7-3.4-8.5-4.4c-4.8-1-2.9-1.8-20-1.8c-17.1 0-64.4 1.3-82.6 2c-18.2 0.7-20.7 1.3-26.6 2.2c-5.9 0.9-6.4 1.2-9 2.9c-2.6 1.7-1.5-2.1-6.6 7.3c-5.1 9.4-16.8 36.1-24.2 49.3c-7.4 13.2-15.1 23.4-20.3 30.2c-5.2 6.8-7 7.4-11 10.8c-4 3.4-8.8 6.9-13.2 9.6c-4.4 2.7-8.7 4.9-13.2 6.7c-4.5 1.8-8.4 3.2-13.6 4.3c-5.2 1.1-9.4 1.7-17.7 2.1c-8.3 0.4-19.2 0.9-32.3 0.1c-13.1-0.8-30.1-2.2-46.6-5.1c-16.5-2.9-34.7-6.9-52.3-12.1c-17.7-5.2-41.5-14.3-53.6-18.9c-12.1-4.6-14.1-5.8-19.2-8.5c-5.1-2.7-7.8-4.4-11.4-7.5c-3.6-3.1-6.9-6.6-10-10.8c-3.1-4.2-6.1-9.2-8.6-14.3c-2.5-5.1-4.4-10.2-6.3-16.4c-1.9-6.2-3.9-11.4-5.300-20.6c-1.4-9.2-1.9-27.4-2.8-34.8c-0.9-7.4-1.3-6.6-2.6-9.3c-1.3-2.7-1.7-3.7-5.3-6.7c-3.6-3-12.3-8-16.5-11.2c-4.2-3.2-6.2-5.2-8.8-8.1c-2.6-2.9-4.9-5.9-6.8-9.1c-1.9-3.2-3.5-6.9-4.5-10.4c-1-3.5-1.6-7.1-1.7-10.5c-0.1-3.4 0.2-6.7 0.9-10.1c0.7-3.4 1.8-6.9 3.5-10.3c1.7-3.5 1.9-5.1 6.5-10.4c4.6-5.3 12.4-13.9 21.1-21.6c8.7-7.7 20.3-16.7 31.2-24.3c10.9-7.6 22.2-14.4 34.4-21.2c12.2-6.8-0.8-2.5 38.9-19.6c39.7-17.1 159.9-67.3 199.6-83.2c39.7-15.9 26.4-9 38.5-12c12.1-3 22.6-4.8 33.9-5.8zM412.3 32.3c8-0.7 14.4-0.6 20.2 0.5c5.8 1.1 9.6 2.4 14.7 6.1c5.1 3.7 11.8 11.1 15.9 15.8c4.1 4.7 6.6 8.9 8.6 12.3c2 3.4 2.8 5.3 3.4 7.8c0.6 2.5 0.5 4.6 0 7.1c-0.5 2.5 2.2-0.1-3.3 8c-5.5 8.1-23.7 32.1-29.6 40.8c-5.9 8.7-4.4 7.7-5.6 11.2c-1.2 3.6-1.5 6.7-1.6 10.1c-0.1 3.4 0.3 7.4 1.1 10.1c0.8 2.7 2.2 4.6 3.8 6.2c1.6 1.6 2.9 2.9 6 3.6c3.1 0.7 8.9 1.5 12.7 0.6c3.8-0.9 7-2.5 10.3-6.1c3.3-3.6 6.1-8.3 9.6-15.3c3.5-7 9.2-21.5 11.7-26.5c2.5-5 2.2-3.6 3.5-3.3c1.3 0.3 0.7-1.9 4.4 4.8c3.7 6.7 13.2 27.7 17.7 35.7c4.5 8 6.9 9.7 9.4 12.4c2.6 2.7 3.7 2.9 5.9 3.7c2.2 0.8 4.7 1.2 7.1 1.1c2.4-0.1 4.8-0.8 7.1-1.8c2.3-1 4.5-2 6.4-4.4c2-2.4 4.6-6.3 5.3-10.2c0.7-3.9 0.2-8.3-1.2-13.1c-1.4-4.8-1.8-6.3-7.2-15.6c-5.4-9.3-20.7-31.5-25.5-39.9c-4.8-8.4-3-7.4-3.5-10.8c-0.5-3.4-0.2-6.8 0.4-9.9c0.6-3.1 1.6-5.8 2.9-8.7c1.3-2.9 1.6-4.6 5.2-8.7c3.6-4.1 10.9-12 16.2-15.6c5.3-3.6 9.6-5.1 15.6-6.2c6-1.1 13.6-1.1 20.5-0.4c6.9 0.7 7.2 0.3 21.1 4.7c13.9 4.4 40.2 14.5 62.6 21.7c22.4 7.2 48.3 13.3 71.8 21.5c23.5 8.2 48.5 18.7 69.4 27.8c20.9 9.1 36.8 16.5 55.8 26.6c19 10.1 41.3 23.1 58.1 34.1c16.8 11 34.2 25.2 42.5 31.9c8.3 6.7 5.3 5.4 7.4 8.5c2.1 3.1 3.7 6.6 4.9 9.9c1.2 3.3 1.9 6.9 2 10.1c0.1 3.2-0.4 6.5-1.3 9.2c-0.9 2.7-2.3 4.6-4.1 6.7c-1.8 2.1-4.3 4.3-6.9 6c-2.6 1.7-5.9 3.3-8.6 4.2c-2.7 0.9-4.8 1.4-7.6 1.2c-2.8-0.2-5-0.1-9.3-2.6c-4.3-2.5-11.6-9-16.6-12.2c-5-3.2-9-5.2-13.7-7.1c-4.7-1.9-8.9-3.3-14.2-4.6c-5.3-1.3-3.9-2.3-17.7-3.1c-13.8-0.8-46.8-2-65.4-1.9c-18.6 0.1-31.2 1.2-46.4 2.2c-15.2 1-25.9 1.7-44.6 4c-18.7 2.3-51.5 6.9-67.7 9.7c-16.2 2.8-22.4 4.9-29.7 7c-7.3 2.1-9.8 3.5-14.3 5.6c-4.5 2.1-6.2 2.2-12.7 7.1c-6.5 4.9-19.2 18.2-26.3 22.3c-7.1 4.1 9.8 2.2-16.4 2.5c-26.2 0.3-116.1 0-141-0.8c-24.9-0.8-4.4-0.5-8.1-3.8c-3.7-3.3-9.4-11.1-14.1-15.7c-4.7-4.6-9.4-8.3-14.2-11.6c-4.8-3.3-9.4-6-14.4-8.4c-5-2.4-1.6-2.8-15.5-6.3c-13.9-3.5-44.8-10.8-67.9-14.5c-23.1-3.7-50.3-6.2-70.4-7.9c-20.1-1.7-29.9-2.2-50.2-2.4c-20.3-0.2-57.9 0.4-71.3 1.1c-13.3 0.7-5.9 1.4-8.8 3c-2.9 1.6-4.2 1.2-8.6 6.4c-4.4 5.2-14.4 20.5-18 24.9c-3.6 4.4-2.2 1.5-3.6 1.7c-1.4 0.2-2 0.8-4.9-0.7c-2.9-1.5-8.8-4.9-12.3-8.1c-3.5-3.2-6.8-7.2-8.6-11.2c-1.8-4-2.6-8.4-2.4-12.8c0.2-4.4 1.5-8.8 3.6-13.3c2.1-4.5 5.6-9.4 9.1-13.7c3.5-4.3 4.5-5.7 11.9-11.9c7.4-6.2 23.5-18.7 32.4-25.2c8.9-6.5 8.7-6.8 21.1-13.6c12.4-6.8 25.9-15 53.4-27c27.5-12 82.7-35.1 111.7-45c29-9.9 41.6-8.8 62.1-14.3c20.5-5.5 46.1-14.6 60.9-18.5c14.8-3.9 19.9-4.1 27.9-4.8zM833.8 246.5c21.9-0.5 33.3-0.7 44-0.3c10.7 0.4 15.2 1.8 20 2.8c4.8 1 6 2 8.5 3.4c2.5 1.4 4.6 3 6.3 4.7c1.7 1.7 3 3.4 4.1 5.7c1.1 2.3 1.9 3.5 2.6 8.3c0.7 4.8 1.3 13.5 1.3 20.5c0 7-0.5 14.7-1.4 21.4c-0.9 6.7-2.2 12.7-4 18.9c-1.8 6.2-4.2 12.7-6.7 18.1c-2.5 5.4-5.1 9.9-8.3 14.5c-3.2 4.6-6.7 9-10.7 13.1c-4 4.1-8.9 8-13.5 11.3c-4.6 3.3-6.7 5.2-14.3 8.5c-7.6 3.3-18.9 8.3-31.2 11.5c-12.3 3.2-21.6 6-42.6 7.9c-21 1.9-64.3 3.2-83.6 3.6c-19.3 0.4-24-0.2-32-1.4c-8-1.2-10.3-2.6-16.1-5.8c-5.8-3.2-12.5-8-18.4-13.3c-5.9-5.3-12.1-11.9-17.2-18.5c-5.1-6.6-8.9-11.5-13.4-21.4c-4.5-9.9-11.1-29.7-13.7-37.8c-2.6-8.1-1.5-7.4-1.7-11c-0.2-3.6 0-7.4 0.5-10.6c0.5-3.1 1.2-5.6 2.5-8.3c1.3-2.7 3-5.1 5.4-7.6c2.5-2.5 5.6-5.1 9.3-7.6c3.7-2.5 6-4.4 12.6-7.2c6.6-2.8 16.9-7.1 27-9.7c10.1-2.6 17.6-4 33.8-5.8c16.2-1.8 38.2-3.9 63.3-5.2c25.2-1.3 65.7-2.2 87.6-2.7zM103 232.9c11.6-0.3 37.4-0.5 59.4 0.6c22 1.1 49.7 3.1 72.5 5.8c22.8 2.7 45.2 6.3 64.2 10.2c19 3.9 39.4 9.7 49.6 12.9c10.2 3.2 8.2 3.9 11.7 6.2c3.5 2.3 6.5 4.8 9.2 7.6c2.7 2.8 5.1 5.9 6.9 9c1.8 3.1 3.2 6.4 4.1 9.7c0.9 3.3 1.3 6.5 1.4 9.8c0.1 3.3 0.9 3.2-0.8 10.1c-1.7 6.9-5.4 21.5-9.4 31.2c-4 9.7-9 18.8-14.7 27c-5.6 8.2-12.8 16.4-19.2 22.4c-6.4 6-12.1 10.1-19.3 13.5c-7.2 3.4-17 5.6-23.7 7c-6.7 1.4-10.8 1.3-16.3 1.5c-5.5 0.2-6.7 0.6-16.9-0.6c-10.2-1.2-27.8-3.4-44.1-6.4c-16.3-3-37.9-7.4-53.8-11.7c-15.9-4.3-31.1-9.8-41.6-14c-10.5-4.2-15.9-6.9-21.6-11.1c-5.7-4.2-9-8-12.8-14c-3.8-6-7.2-13-9.9-21.8c-2.7-8.8-4.7-19.9-6.1-30.7c-1.4-10.8-2.4-25.2-2.3-34.2c0.1-9 1.7-15.4 3-19.9c1.3-4.5 2.6-5.1 4.5-7.3c1.9-2.2 4.3-4.3 6.9-6c2.6-1.7 5.4-3.2 8.6-4.3c3.2-1.1-1.1-2.2 10.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 438.5'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M409.3 0.6c11.3-1 25.5-0.8 33.8-0.2c8.3 0.6 11.1 1.6 16 3.8c4.9 2.2 7.5 3.6 13.3 9.5c5.8 5.9 16.8 21.2 21.3 26.1c4.5 4.9 3.6 3.4 5.6 3.5c2 0 2.4 0.6 6.3-3.2c3.9-3.8 12-14.3 17-19.5c5-5.2 9-8.6 13.3-11.5c4.3-2.9 8.1-4.6 12.7-6.1c4.6-1.5 8.9-2.4 15.2-2.7c6.3-0.3 14.5-0.3 22.5 0.7c8 1 16.4 2.6 25.7 5c9.3 2.4 18.1 5.3 30.2 9.6c12.1 4.3 26.3 9.1 42.3 16.2c16 7.2 33.6 17.7 53.6 26.7c20 9 45.9 18.3 66.2 27.1c20.3 8.8 39.4 17.7 55.6 25.7c16.2 8 27.6 14.1 41.4 22.1c13.8 8 29.9 17.9 41.5 26c11.6 8.1 20.3 15.1 28.1 22.5c7.8 7.4 14.6 16.4 18.7 21.9c4.1 5.5 4.4 7.6 5.8 11.1c1.4 3.5 2.3 6.5 2.9 9.9c0.6 3.4 0.9 7.5 0.6 10.8c-0.3 3.3-1 6-2.3 9.1c-1.3 3.1-3.3 6.4-5.6 9.2c-2.3 2.8-4.9 5.1-8.2 7.6c-3.3 2.5-6.5 4.5-11.8 7.1c-5.3 2.6-15.6 6.4-19.9 8.8c-4.3 2.4-4.2 2.9-5.7 5.3c-1.5 2.3-2 1.7-3.1 8.8c-1.1 7.1-2 24.3-3.8 33.9c-1.8 9.6-3.9 15.9-7 23.8c-3.1 7.9-7.3 16.5-11.9 23.7c-4.6 7.2-10.3 14.1-15.4 19.4c-5.1 5.3-9.6 8.8-15.2 12.5c-5.6 3.7-10.8 6.4-18.2 9.6c-7.4 3.2-17 6.6-26.5 9.3c-9.5 2.7-17.5 4.9-30.7 7c-13.2 2.1-27.4 4.1-48.2 5.4c-20.8 1.3-59.8 2.2-76.9 2.4c-17.1 0.2-17.6-0.1-25.4-1.4c-7.8-1.3-15.8-4.3-21.3-6.4c-5.5-2.1-7.9-3.9-11.5-6.4c-3.7-2.5-5.2-2.8-10.4-8.5c-5.2-5.7-14.1-15.5-20.9-25.7c-6.8-10.2-13.7-22.7-19.9-35.7c-6.2-13-12.9-34.5-17.2-42.3c-4.3-7.8-3.7-3.4-8.5-4.4c-4.8-1-2.9-1.8-20-1.8c-17.1 0-64.4 1.3-82.6 2c-18.2 0.7-20.7 1.3-26.6 2.2c-5.9 0.9-6.4 1.2-9 2.9c-2.6 1.7-1.5-2.1-6.6 7.3c-5.1 9.4-16.8 36.1-24.2 49.3c-7.4 13.2-15.1 23.4-20.3 30.2c-5.2 6.8-7 7.4-11 10.8c-4 3.4-8.8 6.9-13.2 9.6c-4.4 2.7-8.7 4.9-13.2 6.7c-4.5 1.8-8.4 3.2-13.6 4.3c-5.2 1.1-9.4 1.7-17.7 2.1c-8.3 0.4-19.2 0.9-32.3 0.1c-13.1-0.8-30.1-2.2-46.6-5.1c-16.5-2.9-34.7-6.9-52.3-12.1c-17.7-5.2-41.5-14.3-53.6-18.9c-12.1-4.6-14.1-5.8-19.2-8.5c-5.1-2.7-7.8-4.4-11.4-7.5c-3.6-3.1-6.9-6.6-10-10.8c-3.1-4.2-6.1-9.2-8.6-14.3c-2.5-5.1-4.4-10.2-6.3-16.4c-1.9-6.2-3.9-11.4-5.300-20.6c-1.4-9.2-1.9-27.4-2.8-34.8c-0.9-7.4-1.3-6.6-2.6-9.3c-1.3-2.7-1.7-3.7-5.3-6.7c-3.6-3-12.3-8-16.5-11.2c-4.2-3.2-6.2-5.2-8.8-8.1c-2.6-2.9-4.9-5.9-6.8-9.1c-1.9-3.2-3.5-6.9-4.5-10.4c-1-3.5-1.6-7.1-1.7-10.5c-0.1-3.4 0.2-6.7 0.9-10.1c0.7-3.4 1.8-6.9 3.5-10.3c1.7-3.5 1.9-5.1 6.5-10.4c4.6-5.3 12.4-13.9 21.1-21.6c8.7-7.7 20.3-16.7 31.2-24.3c10.9-7.6 22.2-14.4 34.4-21.2c12.2-6.8-0.8-2.5 38.9-19.6c39.7-17.1 159.9-67.3 199.6-83.2c39.7-15.9 26.4-9 38.5-12c12.1-3 22.6-4.8 33.9-5.8zM412.3 32.3c8-0.7 14.4-0.6 20.2 0.5c5.8 1.1 9.6 2.4 14.7 6.1c5.1 3.7 11.8 11.1 15.9 15.8c4.1 4.7 6.6 8.9 8.6 12.3c2 3.4 2.8 5.3 3.4 7.8c0.6 2.5 0.5 4.6 0 7.1c-0.5 2.5 2.2-0.1-3.3 8c-5.5 8.1-23.7 32.1-29.6 40.8c-5.9 8.7-4.4 7.7-5.6 11.2c-1.2 3.6-1.5 6.7-1.6 10.1c-0.1 3.4 0.3 7.4 1.1 10.1c0.8 2.7 2.2 4.6 3.8 6.2c1.6 1.6 2.9 2.9 6 3.6c3.1 0.7 8.9 1.5 12.7 0.6c3.8-0.9 7-2.5 10.3-6.1c3.3-3.6 6.1-8.3 9.6-15.3c3.5-7 9.2-21.5 11.7-26.5c2.5-5 2.2-3.6 3.5-3.3c1.3 0.3 0.7-1.9 4.4 4.8c3.7 6.7 13.2 27.7 17.7 35.7c4.5 8 6.9 9.7 9.4 12.4c2.6 2.7 3.7 2.9 5.9 3.7c2.2 0.8 4.7 1.2 7.1 1.1c2.4-0.1 4.8-0.8 7.1-1.8c2.3-1 4.5-2 6.4-4.4c2-2.4 4.6-6.3 5.3-10.2c0.7-3.9 0.2-8.3-1.2-13.1c-1.4-4.8-1.8-6.3-7.2-15.6c-5.4-9.3-20.7-31.5-25.5-39.9c-4.8-8.4-3-7.4-3.5-10.8c-0.5-3.4-0.2-6.8 0.4-9.9c0.6-3.1 1.6-5.8 2.9-8.7c1.3-2.9 1.6-4.6 5.2-8.7c3.6-4.1 10.9-12 16.2-15.6c5.3-3.6 9.6-5.1 15.6-6.2c6-1.1 13.6-1.1 20.5-0.4c6.9 0.7 7.2 0.3 21.1 4.7c13.9 4.4 40.2 14.5 62.6 21.7c22.4 7.2 48.3 13.3 71.8 21.5c23.5 8.2 48.5 18.7 69.4 27.8c20.9 9.1 36.8 16.5 55.8 26.6c19 10.1 41.3 23.1 58.1 34.1c16.8 11 34.2 25.2 42.5 31.9c8.3 6.7 5.3 5.4 7.4 8.5c2.1 3.1 3.7 6.6 4.9 9.9c1.2 3.3 1.9 6.9 2 10.1c0.1 3.2-0.4 6.5-1.3 9.2c-0.9 2.7-2.3 4.6-4.1 6.7c-1.8 2.1-4.3 4.3-6.9 6c-2.6 1.7-5.9 3.3-8.6 4.2c-2.7 0.9-4.8 1.4-7.6 1.2c-2.8-0.2-5-0.1-9.3-2.6c-4.3-2.5-11.6-9-16.6-12.2c-5-3.2-9-5.2-13.7-7.1c-4.7-1.9-8.9-3.3-14.2-4.6c-5.3-1.3-3.9-2.3-17.7-3.1c-13.8-0.8-46.8-2-65.4-1.9c-18.6 0.1-31.2 1.2-46.4 2.2c-15.2 1-25.9 1.7-44.6 4c-18.7 2.3-51.5 6.9-67.7 9.7c-16.2 2.8-22.4 4.9-29.7 7c-7.3 2.1-9.8 3.5-14.3 5.6c-4.5 2.1-6.2 2.2-12.7 7.1c-6.5 4.9-19.2 18.2-26.3 22.3c-7.1 4.1 9.8 2.2-16.4 2.5c-26.2 0.3-116.1 0-141-0.8c-24.9-0.8-4.4-0.5-8.1-3.8c-3.7-3.3-9.4-11.1-14.1-15.7c-4.7-4.6-9.4-8.3-14.2-11.6c-4.8-3.3-9.4-6-14.4-8.4c-5-2.4-1.6-2.8-15.5-6.3c-13.9-3.5-44.8-10.8-67.9-14.5c-23.1-3.7-50.3-6.2-70.4-7.9c-20.1-1.7-29.9-2.2-50.2-2.4c-20.3-0.2-57.9 0.4-71.3 1.1c-13.3 0.7-5.9 1.4-8.8 3c-2.9 1.6-4.2 1.2-8.6 6.4c-4.4 5.2-14.4 20.5-18 24.9c-3.6 4.4-2.2 1.5-3.6 1.7c-1.4 0.2-2 0.8-4.9-0.7c-2.9-1.5-8.8-4.9-12.3-8.1c-3.5-3.2-6.8-7.2-8.6-11.2c-1.8-4-2.6-8.4-2.4-12.8c0.2-4.4 1.5-8.8 3.6-13.3c2.1-4.5 5.6-9.4 9.1-13.7c3.5-4.3 4.5-5.7 11.9-11.9c7.4-6.2 23.5-18.7 32.4-25.2c8.9-6.5 8.7-6.8 21.1-13.6c12.4-6.8 25.9-15 53.4-27c27.5-12 82.7-35.1 111.7-45c29-9.9 41.6-8.8 62.1-14.3c20.5-5.5 46.1-14.6 60.9-18.5c14.8-3.9 19.9-4.1 27.9-4.8zM833.8 246.5c21.9-0.5 33.3-0.7 44-0.3c10.7 0.4 15.2 1.8 20 2.8c4.8 1 6 2 8.5 3.4c2.5 1.4 4.6 3 6.3 4.7c1.7 1.7 3 3.4 4.1 5.7c1.1 2.3 1.9 3.5 2.6 8.3c0.7 4.8 1.3 13.5 1.3 20.5c0 7-0.5 14.7-1.4 21.4c-0.9 6.7-2.2 12.7-4 18.9c-1.8 6.2-4.2 12.7-6.7 18.1c-2.5 5.4-5.1 9.9-8.3 14.5c-3.2 4.6-6.7 9-10.7 13.1c-4 4.1-8.9 8-13.5 11.3c-4.6 3.3-6.7 5.2-14.3 8.5c-7.6 3.3-18.9 8.3-31.2 11.5c-12.3 3.2-21.6 6-42.6 7.9c-21 1.9-64.3 3.2-83.6 3.6c-19.3 0.4-24-0.2-32-1.4c-8-1.2-10.3-2.6-16.1-5.8c-5.8-3.2-12.5-8-18.4-13.3c-5.9-5.3-12.1-11.9-17.2-18.5c-5.1-6.6-8.9-11.5-13.4-21.4c-4.5-9.9-11.1-29.7-13.7-37.8c-2.6-8.1-1.5-7.4-1.7-11c-0.2-3.6 0-7.4 0.5-10.6c0.5-3.1 1.2-5.6 2.5-8.3c1.3-2.7 3-5.1 5.4-7.6c2.5-2.5 5.6-5.1 9.3-7.6c3.7-2.5 6-4.4 12.6-7.2c6.6-2.8 16.9-7.1 27-9.7c10.1-2.6 17.6-4 33.8-5.8c16.2-1.8 38.2-3.9 63.3-5.2c25.2-1.3 65.7-2.2 87.6-2.7zM103 232.9c11.6-0.3 37.4-0.5 59.4 0.6c22 1.1 49.7 3.1 72.5 5.8c22.8 2.7 45.2 6.3 64.2 10.2c19 3.9 39.4 9.7 49.6 12.9c10.2 3.2 8.2 3.9 11.7 6.2c3.5 2.3 6.5 4.8 9.2 7.6c2.7 2.8 5.1 5.9 6.9 9c1.8 3.1 3.2 6.4 4.1 9.7c0.9 3.3 1.3 6.5 1.4 9.8c0.1 3.3 0.9 3.2-0.8 10.1c-1.7 6.9-5.4 21.5-9.4 31.2c-4 9.7-9 18.8-14.7 27c-5.6 8.2-12.8 16.4-19.2 22.4c-6.4 6-12.1 10.1-19.3 13.5c-7.2 3.4-17 5.6-23.7 7c-6.7 1.4-10.8 1.3-16.3 1.5c-5.5 0.2-6.7 0.6-16.9-0.6c-10.2-1.2-27.8-3.4-44.1-6.4c-16.3-3-37.9-7.4-53.8-11.7c-15.9-4.3-31.1-9.8-41.6-14c-10.5-4.2-15.9-6.9-21.6-11.1c-5.7-4.2-9-8-12.8-14c-3.8-6-7.2-13-9.9-21.8c-2.7-8.8-4.7-19.9-6.1-30.7c-1.4-10.8-2.4-25.2-2.3-34.2c0.1-9 1.7-15.4 3-19.9c1.3-4.5 2.6-5.1 4.5-7.3c1.9-2.2 4.3-4.3 6.9-6c2.6-1.7 5.4-3.2 8.6-4.3c3.2-1.1-1.1-2.2 10.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: kicker-glasses 0.9s var(--ease-out) 0.2s both;
}

@keyframes kicker-glasses {
  from { opacity: 0; transform: translateX(-8px) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-kicker::before,
  .showcase-kicker::before {
    animation: none;
  }
}

.page-intro h1 {
  margin-top: 14px;
  color: var(--ink);
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  animation: focus-in 0.8s var(--ease-out) both;
}

.page-lead {
  margin-top: 18px;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: 1.1rem;
  line-height: 1.6;
  animation: rise-in 0.8s var(--ease-out) 0.15s both;
}

.page-meta {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 0.95rem;
  animation: rise-in 0.8s var(--ease-out) 0.3s both;
}

.page-meta .fa {
  margin-right: 6px;
  color: var(--blue);
}

.page-chips,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  animation: rise-in 0.8s var(--ease-out) 0.3s both;
}

.page-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.page-chip:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: #FFFFFF;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---- the compositions ---- */
.page-intro-visual {
  position: relative;
  height: clamp(260px, 30vw, 420px);
}

.pv {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mist);
  box-shadow: 0 24px 40px -24px rgba(14, 19, 48, 0.45);
  animation: pv-in 1s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.12s);
}

.pv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes pv-in {
  from { opacity: 0; translate: 0 28px; scale: 0.94; }
}

/* Servicios: three photos fanned like cards */
.page-intro--servicios .pv {
  top: 12%;
  width: 52%;
  aspect-ratio: 4 / 3;
  transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out);
}

.pv-left { left: 2%; rotate: -7deg; }
.pv-center { left: 24%; top: 2% !important; z-index: 2; }
.pv-right { left: 46%; rotate: 7deg; }

@media (hover: hover) and (pointer: fine) {
  .page-intro-visual:hover .pv-left { rotate: -11deg; translate: -14px 0; }
  .page-intro-visual:hover .pv-right { rotate: 11deg; translate: 14px 0; }
}

/* Productos: frames floating on white */
.page-intro--productos .pv {
  width: 44%;
  aspect-ratio: 4 / 3;
  background: #FFFFFF;
}

.pv-a { top: 0; left: 6%; }
.pv-b { top: 24%; left: 50%; z-index: 2; }
.pv-c { top: 48%; left: 14%; }

.pv-float img {
  animation: pv-float 7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -2.3s);
}

@keyframes pv-float {
  from { translate: 0 -6px; rotate: -1.5deg; }
  to { translate: 0 6px; rotate: 1.5deg; }
}

/* Galería: a small mosaic */
.pv-tall { top: 0; left: 6%; width: 38%; height: 100%; }
.pv-top { top: 0; left: 48%; width: 50%; height: 48%; }
.pv-bottom { bottom: 0; left: 48%; width: 50%; height: 48%; }

/* Contactos: the shop under an arch, with the address pinned on it */
.pv-arch {
  top: 0;
  left: 12%;
  width: 70%;
  height: 100%;
  border-radius: 999px 999px 16px 16px;
}

.pv-card {
  position: absolute;
  bottom: 8%;
  left: 2%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px -18px rgba(14, 19, 48, 0.45);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
  animation: pv-in 1s var(--ease-out) both;
  animation-delay: 0.45s;
}

.pv-card .fa {
  color: var(--blue);
  font-size: 1.4rem;
}

@media (max-width: 860px) {
  .page-intro-grid {
    grid-template-columns: 1fr;
  }

  .page-intro-visual {
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv,
.pv-card,
.pv-float img,
.page-intro h1,
.page-lead,
.page-meta,
.page-chips,
.page-actions {
    animation: none !important;
  }
}

/* =========================================================
   Showcase — the home carousel
   The headline sits centred above a pair of glasses drawn after the logo
   that spans the page. Each lens shows the whole photo; a blue line runs
   round the rims while it is on screen and its end moves the carousel on.
   ========================================================= */
.showcase {
  --slide-ms: 6500ms;
  position: relative;
  overflow: hidden;
  padding: 40px 0 44px;
  background: var(--night);
  color: #FFFFFF;
  isolation: isolate;
}

/* Behind everything,
the current photo thrown out of focus — how the shop
   looks without glasses. Only opacity changes,
so the blur is drawn once. */
.showcase-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.showcase-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  /* The same framing and the same scale as the sharp copy inside the lenses,
     so the two line up exactly; the extra scale hides the blur's soft edge. */
  transform: scale(1.18);
  filter: blur(var(--backdrop-blur, 20px)) saturate(1.12) brightness(0.8);
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out), filter 1.4s var(--ease-out);
}

.showcase-backdrop img.is-active {
  opacity: 1;
}

/* Darkens toward the edges and the bottom so the white type always reads. */
.showcase-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(18, 26, 74, 0.05), rgba(18, 26, 74, 0.32) 80%),
    linear-gradient(180deg, rgba(18, 26, 74, 0.34) 0%, rgba(18, 26, 74, 0.06) 45%, rgba(18, 26, 74, 0.68) 100%);
}

.showcase :focus-visible {
  outline-color: #FFFFFF;
}

.showcase-text {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

/* The page's h1: the place,
stated plainly,
between two drawn rules. */
.showcase-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--blue-soft);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Captions share one grid cell,
so the block is as tall as the longest. */
.showcase-captions {
  display: grid;
  margin-top: 16px;
}

.showcase-caption {
  grid-area: 1 / 1;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}

.showcase-caption.is-active {
  visibility: visible;
  transition: visibility 0s;
}

.showcase-title {
  color: #FFFFFF;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Words are wrapped by the script; without it the title is plain text. */
.showcase-title .word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 0.22em, 0);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.showcase-caption.is-active .word {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 0.75s var(--ease-out),
    filter 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  transition-delay: calc(0.3s + var(--i, 0) * 70ms);
}

.showcase-sub {
  margin: 10px auto 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.1rem;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.showcase-caption.is-active .showcase-sub {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out) 0.75s, transform 0.6s var(--ease-out) 0.75s;
}

/* Under the glasses: actions on the left,
the controls on the right. */
.showcase-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 24px;
}

.showcase-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* A secondary action that sits on photos: frosted,
white type. */
.btn-glass {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn-glass:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
}

/* Under the text: a thumbnail for each photo. The current one is ringed and
   a thin line fills beneath it while it is on screen. */
.showcase-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.showcase-lenses {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lens {
  position: relative;
  flex: none;
  width: 64px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out);
}

.lens img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.6);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.lens::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #FFFFFF;
  border-radius: 11px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}

/* the countdown, under the current thumbnail */
.lens::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: -12px;
  left: 4px;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
}

.lens:hover img,
.lens.is-active img {
  opacity: 1;
  filter: none;
}

.lens:hover {
  transform: translateY(-2px);
}

.lens.is-active::before {
  opacity: 1;
  transform: none;
}

.js .showcase.is-ready .lens.is-active::after {
  animation: lens-countdown var(--slide-ms, 6500ms) linear forwards;
}

@keyframes lens-countdown {
  to { transform: scaleX(1); }
}

.js .showcase.is-ready.is-paused .lens.is-active::after,
.js .showcase.is-ready.is-away .lens.is-active::after {
  animation-play-state: paused;
}

.showcase-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: none;
  color: #FFFFFF;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.showcase-toggle:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}

/* ---- The glasses ----
   Drawn after the logo. The photos are clipped to the two lenses,
the
   frame is drawn on top,
and a blue line runs round the rims while each
   photo is on screen. */
.showcase-lens {
  position: relative;
  /* Smaller than the hero, so there is room to move without leaving it. */
  width: min(84%, 1020px, max(440px, calc((100svh - 450px) * 2.28)));
  margin: 30px auto 0;
  /* the proportions of the glasses in the logo */
  aspect-ratio: 1008 / 442;
  /* drop-shadow follows the clipped lens shapes; box-shadow would not. */
  filter: drop-shadow(0 30px 34px rgba(8, 12, 40, 0.45));
}

.glasses-defs {
  position: absolute;
}

.showcase-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--blue-deep);
  -webkit-clip-path: url(#glasses-clip);
  clip-path: url(#glasses-clip);
}

/* Glass: a soft highlight across the upper part of each lens. */
.showcase-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(ellipse 28% 50% at 25% 62%, transparent 55%, rgba(18, 26, 74, 0.22)),
    radial-gradient(ellipse 28% 50% at 75% 62%, transparent 55%, rgba(18, 26, 74, 0.22));
  pointer-events: none;
}

.showcase-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The frame is the logo's own drawing,
filled. */
.glasses-frame {
  fill: #FFFFFF;
}

/* A slow gleam crossing the glass, clipped to the lenses like everything
   else inside the stage. */
.lens-glare {
  position: absolute;
  inset: -20% -60%;
  z-index: 6;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.14) 54%,
    transparent 62%
  );
  transform: translateX(-55%);
  pointer-events: none;
}

.js .showcase.is-ready .lens-glare {
  animation: lens-glare var(--slide-ms) ease-in-out infinite;
}

/* Written to out-rank the rule that starts these animations. */
.js .showcase.is-ready.is-paused .lens-glare,
.js .showcase.is-ready.is-away .lens-glare {
  animation-play-state: paused;
}

@keyframes lens-glare {
  0% { transform: translateX(-55%); }
  55%, 100% { transform: translateX(55%); }
}

/* The scene drifts slowly behind the glasses. Both layers — the blurred one
   and the sharp one inside the lenses — run the same animation, so they never
   come apart. */
@keyframes scene-pan {
  from { translate: -2.5% -1%; scale: 1; }
  to { translate: 2.5% 1%; scale: 1.09; }
}

/* They also ride the scroll, rising a touch slower than the page. */
@supports (animation-timeline: view()) {
  .js .showcase.is-ready .showcase-lens {
    animation:
      glasses-breathe 11s ease-in-out infinite alternate,
      glasses-scroll linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }

  @keyframes glasses-scroll {
    to { translate: 0 14%; }
  }
}

/* And the glasses tilt as if someone were holding them. */
@keyframes glasses-breathe {
  0%   { rotate: -1.5deg; translate: -10px 6px;  scale: 1; }
  50%  { rotate: 0.4deg;  translate: 6px -12px; scale: 1.015; }
  100% { rotate: 1.5deg;  translate: 10px 5px;  scale: 1; }
}

.js .showcase.is-ready .showcase-frame.is-active .frame-photo {
  animation: scene-pan 13s ease-in-out infinite alternate;
}

.js .showcase.is-ready .showcase-lens {
  animation: glasses-breathe 11s ease-in-out infinite alternate;
}

.js .showcase.is-ready.is-paused .showcase-lens,
.js .showcase.is-ready.is-paused .showcase-frame.is-active .frame-photo,
.js .showcase.is-ready.is-away .showcase-lens,
.js .showcase.is-ready.is-away .showcase-frame.is-active .frame-photo {
  animation-play-state: paused;
}

/* One slide at a time: the others wait hidden underneath. */
.showcase-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  visibility: hidden;
  /* A blink: the photo opens from the middle outwards, like an eyelid,
     while it slides in from the side. */
  clip-path: inset(50% 0 50% 0);
  translate: 5% 0;
  transition:
    clip-path 1s var(--ease-in-out),
    translate 1.1s var(--ease-out),
    visibility 0s linear 1.1s;
}

/* The outgoing photo stays underneath until the new one has opened. */
.showcase-frame.is-leaving {
  z-index: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  translate: 0 0;
  transition: none;
}

.showcase-frame.is-active {
  z-index: 2;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  translate: 0 0;
  transition:
    clip-path 1s var(--ease-in-out),
    translate 1.1s var(--ease-out),
    visibility 0s;
}

/* Each lens frames the whole photo, so both show a complete scene. */
.frame-photo {
  position: absolute;
  top: 51.4%;
  width: 34.4%;
  height: 45.3%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: scale(1.14);
  transition: transform 2.4s var(--ease-out);
}

/* A slide can hold a clip instead of a photo: same box, same crop. */
video.frame-photo {
  object-fit: cover;
  background: var(--night);
}

.frame-photo-left {
  left: 5.4%;
}

.frame-photo-right {
  top: 54.6%;
  left: 57.6%;
  width: 35.9%;
  height: 42.8%;
  transition-delay: 0.45s;
}

/* The right lens shows what comes next, and changes half a second after the
   left one: the photos travel across the glasses like a strip. */
.showcase-frame.is-active .frame-photo-right {
  transition-delay: 0.45s;
}

.showcase-frame.is-active .frame-photo,
.showcase-frame.is-leaving .frame-photo {
  transform: none;
}

/* Entrance: everything waits in its starting state until the script marks
   the section ready. Without the script none of this applies. */
.js .showcase:not(.is-ready) .showcase-frame.is-active {
  clip-path: inset(50% 0 50% 0);
  transition: none;
}

.js .showcase:not(.is-ready) .showcase-frame.is-active .frame-photo {
  transform: scale(1.12) rotate(-3deg);
  transition: none;
}

.js .showcase:not(.is-ready) .showcase-caption.is-active .word,
.js .showcase:not(.is-ready) .showcase-caption.is-active .showcase-sub {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 0.22em, 0);
  transition: none;
}

.js .showcase .showcase-kicker {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.1s;
}

.js .showcase .showcase-bar {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.js .showcase .showcase-bar { transition-delay: 0.9s; }

/* The glasses come into focus,
the way a lens is adjusted. */
.js .showcase:not(.is-ready) .showcase-backdrop img {
  --backdrop-blur: 8px;
}

.js .showcase .showcase-lens {
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.06);
  transition:
    opacity 0.9s var(--ease-out),
    filter 1.1s var(--ease-out),
    transform 1.3s var(--ease-out);
}

.js .showcase.is-ready .showcase-lens {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Thumbnails rise in one after another. */
.js .showcase .lens {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: calc(1.1s + var(--i, 0) * 60ms);
}

.js .showcase.is-ready .showcase-kicker,
.js .showcase.is-ready .showcase-bar,
.js .showcase.is-ready .lens {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .showcase {
    padding: 36px 0 48px;
  }

  .showcase-lens {
    margin-top: 20px;
    /* A little wider than the column so the lenses read at phone size. */
    width: calc(100% + var(--gutter));
    margin-inline: calc(var(--gutter) / -2);
  }

  .showcase-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .showcase-actions .btn {
    flex: 1 1 100%;
  }

  .showcase-nav {
    align-self: center;
    gap: 10px;
  }

  /* Smaller thumbnails still fit six across on a phone. */
  .showcase-lenses {
    gap: 7px;
  }

  .lens {
    width: 42px;
    height: 32px;
  }

  .lens::before {
    inset: -3px;
  }

  .lens::after {
    bottom: -9px;
  }

  .showcase-toggle {
    width: 34px;
    height: 34px;
  }
}

/* =========================================================
   Services — the photo or video on one side,
the words on the other
   ========================================================= */

.svc-list {
  display: grid;
  gap: 64px;
}

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

/* Every other service puts its photo on the right. */
.svc:nth-child(even) .svc-media {
  order: 2;
}

.svc-media {
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
  background: var(--mist);
}

.svc-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.svc-media.video-frame {
  aspect-ratio: 4 / 3;
}

.svc-num {
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.svc-body h2 {
  margin-top: 10px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.svc-line {
  margin-top: 14px;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: 1.1rem;
}

.svc-cta {
  display: inline-block;
  margin-top: 20px;
  color: var(--wa);
  font-weight: 600;
}

.svc-cta i {
  margin-right: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .svc-media:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 800px) {

  .svc-list {
    gap: 40px;
  }

  .svc {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .svc:nth-child(even) .svc-media {
    order: 0;
  }

  .svc-media img {
    aspect-ratio: 3 / 2;
  }
}

/* =========================================================
   Photo grids
   ========================================================= */
/* Gallery: fewer,
larger frames. */
.gallery-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--mist);
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img {
    transform: scale(1.035);
  }
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 24, 0.94);
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}

.lightbox-content img {
  max-width: min(92vw, 1100px);
  max-height: 84vh;
  border-radius: 4px;
  transform: scale(0.97);
  transition: transform 0.3s var(--ease-out);
}

.lightbox.is-open .lightbox-content img {
  transform: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: none;
  color: #FFFFFF;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.lightbox-close { top: 20px; right: 20px; font-size: 1.1rem; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 24px;
    transform: none;
  }
}

/* =========================================================
   Contact — details as ruled rows beside the form, the map below
   ========================================================= */
.contact-page {
  padding-top: 8px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.info-list {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.info-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--line);
}

.info-list > li > .fa {
  margin-top: 3px;
  color: var(--blue);
  font-size: 1.1rem;
  text-align: center;
}

.info-label {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info-value {
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
}

.info-value a {
  color: inherit;
}

.info-value a:hover {
  color: var(--blue);
}

.info-action {
  align-self: center;
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}

.info-action .fa {
  margin-left: 4px;
  font-size: 0.8rem;
  transition: transform 0.3s var(--ease-out);
}

.info-action:hover .fa {
  transform: translateX(4px);
}

.contact-form-wrap .contact-form {
  margin-top: 28px;
}

.contact-map {
  overflow: hidden;
  border-radius: 8px;
  background: var(--mist);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 36vw, 440px);
  border: 0;
}

.contact-form {
  margin-top: 32px;
}

.form-group + .form-group {
  margin-top: 22px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.form-control {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control::placeholder {
  color: #9AA0B5;
}

.form-control:hover {
  border-color: #A9B0C4;
}

.form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(53, 75, 187, 0.16);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.captcha-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.captcha-row .form-control {
  flex: 1;
  min-width: 170px;
}

/* The captcha is a control,
not an illustration: it refreshes the code. */
.captcha-refresh {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #FFFFFF;
  line-height: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.captcha-refresh img {
  width: auto;
  height: 48px;
}

.captcha-refresh:hover {
  border-color: var(--blue);
}

.captcha-refresh-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 19, 48, 0.72);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.captcha-refresh:hover .captcha-refresh-hint,
.captcha-refresh:focus-visible .captcha-refresh-hint {
  opacity: 1;
}

.captcha-hint {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.contact-form .btn {
  margin-top: 30px;
}

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

@media (max-width: 480px) {
  .info-list li {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .info-action {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   Section heading row: title on the left,
a way onward on the right
   ========================================================= */
.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 44px;
}

/* =========================================================
   Brands — one thin line of names drifting slowly
   ========================================================= */
.brands {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brands-line {
  padding: 18px 56px 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
}

.brands-track {
  display: flex;
  width: max-content;
  animation: brands-scroll 70s linear infinite;
}

.brands:hover .brands-track,
.brands:focus-within .brands-track,
.brands.is-paused .brands-track {
  animation-play-state: paused;
}

.brands-list {
  display: flex;
  align-items: center;
  flex: none;
}

.brands-list a {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 2px 14px;
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.brands-list a::after {
  content: '';
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}

.brands-list a:hover,
.brands-list a:focus-visible {
  color: var(--blue);
}

@keyframes brands-scroll {
  to { transform: translateX(-50%); }
}

.brands-toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-3);
  font-size: 0.6rem;
  cursor: pointer;
}

.brands-toggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 700px) {
  .brands-line {
    padding-right: 0;
    padding-left: 44px;
  }

  /* The WhatsApp button owns the right edge on phones. */
  .brands-toggle {
    right: auto;
    left: 10px;
  }
}

/* ---- Wide screens: the words on the left, the glasses large on the right ---- */
@media (min-width: 1100px) {
  .showcase > .container {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    grid-template-areas:
      "text lens"
      "bar  lens";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: clamp(32px, 4vw, 72px);
    min-height: min(calc(100svh - 150px), 780px);
  }

  .showcase-text {
    grid-area: text;
    align-self: end;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .showcase-kicker {
    justify-content: flex-start;
  }

  .showcase-title {
    font-size: clamp(2.8rem, 4.4vw, 4.6rem);
    line-height: 1.02;
  }

  .showcase-sub {
    margin-left: 0;
  }

  /* The glasses run past the column into the right margin: bigger, and the
     layout feels less boxed in. */
  .showcase-lens {
    grid-area: lens;
    align-self: center;
    --bleed: max(0px, min(7vw, calc((100vw - 1180px) / 2 - 12px)));
    width: min(calc(100% + var(--bleed)), calc((100svh - 190px) * 2.28));
    margin: 0 calc(var(--bleed) * -1) 0 auto;
  }

  .showcase-bar {
    grid-area: bar;
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-top: 32px;
  }
}

/* =========================================================
   Hero "Enfoque" (2026-10) — the shop's photo comes into focus the way a
   lens is adjusted at an eye exam. Across the whole width the same photo
   waits out of focus; on the right the sharp copy melts into it with no
   edge. The words sit on a plain white card, like a prescription slip.
   The client's photos are upright, so the sharp copy keeps a tall panel
   instead of being stretched across the screen.
   ========================================================= */
.showcase {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--night);
}

/* ---- the out-of-focus photo, full width ---- */
.showcase .showcase-backdrop img {
  object-position: 70% 50%;
  transform: scale(1.12);
  filter: blur(28px) saturate(1.2);
}

/* a light veil only: the photo should still read as the shop, out of focus */
.showcase .showcase-backdrop::after {
  background:
    linear-gradient(90deg, rgba(14, 20, 62, 0.72) 0%, rgba(18, 26, 74, 0.5) 40%, rgba(18, 26, 74, 0.12) 75%, rgba(18, 26, 74, 0) 100%),
    linear-gradient(0deg, rgba(14, 20, 62, 0.45) 0%, rgba(14, 20, 62, 0) 35%);
}

/* ---- the sharp photo, right side, no hard edge ---- */
.showcase .showcase-stage {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  overflow: hidden;
  background: transparent;
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 16%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 16%, #000 44%);
}

.showcase .showcase-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(0deg, rgba(14, 20, 62, 0.4) 0%, rgba(14, 20, 62, 0) 30%);
  pointer-events: none;
}

.showcase .showcase-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  clip-path: none;
  translate: none;
  transition: opacity 0.9s var(--ease-in-out), visibility 0s linear 0.9s;
}

.showcase .showcase-frame.is-leaving {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition: none;
}

.showcase .showcase-frame.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.9s var(--ease-in-out), visibility 0s;
}

/* Each photo arrives out of focus and a little close, then settles sharp. */
.showcase .frame-photo {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  filter: blur(16px);
  transform: scale(1.07);
  transition: filter 1.5s var(--ease-out), transform 7s var(--ease-out);
}

.showcase .showcase-frame.is-active .frame-photo,
.showcase .showcase-frame.is-leaving .frame-photo {
  filter: blur(0);
  transform: none;
}

/* the old drifting pan would open a gap at the panel's edge */
.js .showcase.is-ready .showcase-frame.is-active .frame-photo {
  animation: none;
}

.js .showcase:not(.is-ready) .showcase-frame.is-active {
  clip-path: none;
}

.js .showcase:not(.is-ready) .showcase-frame.is-active .frame-photo {
  filter: blur(16px);
  transform: scale(1.07);
  transition: none;
}

/* ---- the words: straight on the photo, no box ---- */
.showcase > .container.showcase-inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  min-height: clamp(540px, calc(100svh - 125px), 780px);
  padding-block: 56px;
}

.showcase .showcase-card {
  width: min(100%, 560px);
  color: #FFFFFF;
}

.showcase .showcase-text {
  align-self: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.showcase .showcase-kicker {
  justify-content: flex-start;
  color: var(--blue-soft);
}

.showcase .showcase-captions {
  margin-top: 14px;
}

.showcase .showcase-title {
  color: #FFFFFF;
  font-size: clamp(2.3rem, 3.8vw, 3.8rem);
  text-shadow: 0 2px 24px rgba(6, 10, 36, 0.35);
  line-height: 1.04;
}

.showcase .showcase-sub {
  margin-left: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.showcase .showcase-bar {
  display: block;
  align-self: auto;
  max-width: none;
  margin-top: 30px;
}

.showcase .showcase-actions {
  gap: 10px;
}

.showcase .btn-whatsapp {
  background: var(--wa);
}

.showcase .btn-whatsapp:hover {
  background: var(--wa-deep);
}

/* the second button stays frosted glass over the photo */
.showcase .btn-glass {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.showcase .btn-glass:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
}

/* The card rises in as the first photo comes into focus. */
.js .showcase .showcase-card {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.8s var(--ease-out) 0.15s, transform 1s var(--ease-out) 0.15s;
}

.js .showcase.is-ready .showcase-card {
  opacity: 1;
  transform: none;
}

/* ---- the thumbnails, under the card ---- */
.js .showcase .showcase-toggle {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) 1.5s, background-color 0.2s ease, border-color 0.2s ease;
}

.js .showcase.is-ready .showcase-toggle {
  opacity: 1;
}

.showcase > .container > .showcase-nav {
  padding-left: 4px;
}

@media (max-width: 900px) {
  /* On a phone: the photo alone on top, the card overlapping its foot. */
  .showcase .showcase-backdrop {
    display: none;
  }

  .showcase .showcase-stage {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 62svh;
    -webkit-mask-image: none;
    mask-image: none;
    background: var(--blue-deep);
  }

  .showcase .showcase-stage::after {
    background: linear-gradient(0deg, rgba(14, 20, 62, 0.55) 0%, rgba(14, 20, 62, 0) 35%);
  }

  .showcase > .container.showcase-inner {
    align-items: stretch;
    gap: 22px;
    min-height: 0;
    margin-top: 0;
    padding-block: 26px 36px;
  }

  .showcase .showcase-card {
    width: 100%;
  }

  .showcase .showcase-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .showcase .showcase-bar {
    margin-top: 22px;
  }

  .showcase .showcase-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .showcase > .container > .showcase-nav {
    align-self: center;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase .frame-photo,
  .js .showcase:not(.is-ready) .showcase-frame.is-active .frame-photo {
    filter: none;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Magazine sections (home) — white, airy, medium photos, fine rules
   ========================================================= */
.display-sm {
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 32px;
}

.mag {
  padding-block: 88px;
}

/* A hairline inside the page margins, between sections. */
.mag-rule > .container {
  padding-top: 88px;
  border-top: 1px solid var(--line);
}

.mag-rule {
  padding-top: 0;
}

.mag-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}

.mag-title {
  color: var(--ink);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mag-text {
  margin-top: 16px;
  max-width: 44ch;
  color: var(--ink-3);
  font-size: 1.05rem;
}

.container-wide {
  max-width: 1680px;
}

/* Word-by-word entrance for headlines marked [data-words]. */
.js [data-words] .w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 0.3em, 0);
  transition:
    opacity 0.7s var(--ease-out),
    filter 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 0.1s);
}

.js .is-in [data-words] .w,
.js [data-words].is-in .w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-words] .w {
    filter: none;
    transform: none;
    transition: opacity 0.4s ease;
  }
}

.mag-split-body {
  max-width: 560px;
}

/* ---- Categories: four medium photos with the name underneath ---- */
.cat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

/* portraits and landscapes share one crop that keeps faces in frame */
.cat-photo img {
  object-position: 50% 30%;
}

.cat-card {
  display: block;
  color: var(--ink);
}

.cat-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--mist);
}

.cat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.cat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 1.1rem;
  font-weight: 500;
}

.cat-label .fa {
  color: var(--ink-3);
  font-size: 0.85rem;
  transition: transform 0.35s var(--ease-out), color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cat-card:hover img {
    transform: scale(1.05);
  }

  .cat-card:hover .fa {
    color: var(--blue);
    transform: translateX(4px);
  }
}

/* ---- Services: two columns of numbered lines ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  border-top: 1px solid var(--line);
}

.svc-grid a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.svc-index {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.svc-title {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  transition: transform 0.35s var(--ease-out);
}

.svc-grid .fa {
  color: var(--ink-3);
  font-size: 0.8rem;
  transition: transform 0.35s var(--ease-out), color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .svc-grid a:hover .svc-title {
    transform: translateX(6px);
  }

  .svc-grid a:hover .fa {
    color: var(--blue);
    transform: translateX(4px);
  }
}

/* ---- Photo beside text ---- */
.mag-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.mag-split-reverse .mag-split-media {
  order: 2;
}

.mag-split-media {
  overflow: hidden;
  border-radius: 8px;
  background: var(--mist);
}

.mag-split-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

.about-lead {
  margin-top: 14px;
  color: var(--blue);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
}

.about-copy {
  margin-top: 20px;
}

.about-copy p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.7;
}

.about-copy p + p {
  margin-top: 12px;
}

.mag-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 28px;
}

.mag-video {
  max-width: 960px;
}

@media (max-width: 900px) {
  .mag {
    padding-block: 64px;
  }

  .mag-rule {
    padding-top: 0;
  }

  .mag-rule > .container {
    padding-top: 64px;
  }

  .cat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .mag-split {
    grid-template-columns: 1fr;
  }

  .mag-split-reverse .mag-split-media {
    order: 0;
  }
}

/* =========================================================
   Prescription glasses — a head row, then a mosaic of people wearing them
   ========================================================= */
.gr-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 48px;
  align-items: end;
}

.gr-side .mag-text {
  margin-top: 0;
}

.gr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 20px;
}

/* Eleven pictures in an exact 4 x 4 grid: the two posters and three
   portraits stand two rows tall, the rest fill in around them. */
.gr-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, clamp(150px, 17vw, 250px));
  grid-template-areas:
    "a b c d"
    "a b e f"
    "g h i j"
    "g k i j";
  gap: 14px;
  margin-top: 36px;
}

.gr-a { grid-area: a; }
.gr-b { grid-area: b; }
.gr-c { grid-area: c; }
.gr-d { grid-area: d; }
.gr-e { grid-area: e; }
.gr-f { grid-area: f; }
.gr-g { grid-area: g; }
.gr-h { grid-area: h; }
.gr-i { grid-area: i; }
.gr-j { grid-area: j; }
.gr-k { grid-area: k; }

.gr-photos li,
.gr-photos .gallery-item,
.gr-photos img {
  height: 100%;
}

.gr-photos img {
  width: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  aspect-ratio: auto;
}

.product-media-dark {
  background: #0B0D12;
}

.product-media-dark img {
  object-fit: contain;
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .gr-head {
    grid-template-columns: 1fr;
  }

  .gr-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 170px;
    grid-template-areas:
      "a b"
      "a b"
      "c d"
      "e f"
      "g h"
      "g k"
      "i j"
      "i j";
  }
}

/* =========================================================
   Photochromic lenses — words and the clip, then a small mosaic
   ========================================================= */
.fc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.fc-title {
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.fc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 22px 0 28px;
}

.fc-swatches li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.fc-swatches span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(14, 19, 48, 0.12);
}

.fc-video .vid video {
  aspect-ratio: 5 / 4;
}

/* The poster runs the full height on the left; the photos fill three
   exact rows beside it, so the block never ends with a gap. */
.fc-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, clamp(150px, 15vw, 220px));
  grid-template-areas:
    "a b b c"
    "a d e f"
    "a g h f";
  gap: 14px;
  margin-top: 40px;
}

.fc-a { grid-area: a; }
.fc-b { grid-area: b; }
.fc-c { grid-area: c; }
.fc-d { grid-area: d; }
.fc-e { grid-area: e; }
.fc-f { grid-area: f; }
.fc-g { grid-area: g; }
.fc-h { grid-area: h; }

.fc-photos li,
.fc-photos .gallery-item,
.fc-photos img {
  height: 100%;
}

.fc-photos img {
  width: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  aspect-ratio: auto;
}

.page-chip-new {
  border-color: var(--blue);
  color: var(--blue);
}

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

  .fc-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 170px;
    grid-template-areas:
      "a b"
      "a c"
      "d e"
      "f f"
      "g h";
  }
}

/* =========================================================
   Our shops (Contactos) — main shop and branch, with a third photo
   ========================================================= */
.sedes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.sede {
  display: flex;
  flex-direction: column;
}

.sede-photo,
.sede-extra {
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
  background: var(--mist);
}

.sede-photo img,
.sede-extra img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.sede-photo {
  aspect-ratio: 4 / 3;
}

.sede-extra {
  height: 100%;
  min-height: 320px;
}

.sede-body {
  padding-top: 16px;
}

.sede-tag {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sede-body h3 {
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sede-text {
  margin: 6px 0 14px;
  color: var(--ink-3);
}

@media (hover: hover) and (pointer: fine) {
  .sede:hover .sede-photo img,
  .sede-extra:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 860px) {
  .sedes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sede-extra {
    grid-column: 1 / -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

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

/* =========================================================
   Product cards and filters
   ========================================================= */
/* The filters stay at hand under the header while the catalogue scrolls. */
.filters {
  position: sticky;
  top: var(--header-h-compact);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-inline: -8px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn-outline {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.btn-outline:hover {
  border-color: var(--ink);
}

.products-more-btn {
  display: flex;
  margin: 48px auto 0;
}

.products-more-btn[hidden] {
  display: none;
}

@media (max-width: 700px) {
  /* One swipeable row on phones, so the sticky bar stays short. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filters .chip {
    flex: none;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out);
}

.chip span {
  color: var(--ink-3);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.chip:hover {
  border-color: var(--ink);
}

.chip:active {
  transform: scale(0.97);
}

.chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #FFFFFF;
}

.chip[aria-pressed="true"] span {
  color: rgba(255, 255, 255, 0.75);
}

.filter-status {
  margin: 14px 0 32px;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 24px;
}

.product-card {
  display: flex;
  flex-direction: column;
}

.product-card[hidden] {
  display: none;
}

/* The studio backdrop is not pure white,
so the photo fills the frame
   rather than floating as a lighter rectangle inside it. */
.product-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--mist);
  cursor: zoom-in;
  isolation: isolate;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.product-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(14, 19, 48, 0.35);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .product-media:hover img {
    transform: scale(1.06);
  }

  .product-media:hover .product-zoom,
  .product-media:focus-visible .product-zoom {
    opacity: 1;
    transform: none;
  }
}

.product-info {
  margin-top: 16px;
}

.product-brand {
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
}

.product-name {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
}

.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 12px;
  padding-bottom: 2px;
  color: var(--wa);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.3s var(--ease-out), color 0.2s ease;
}

.product-cta:hover {
  color: var(--wa-deep);
  background-size: 100% 1.5px;
}

.products-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 48px;
  color: var(--ink-3);
}

.products-foot p {
  color: var(--ink);
  font-size: 1.25rem;
}

@media (max-width: 1000px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }

  .product-name {
    font-size: 1rem;
  }

  .product-cta-long {
    display: none;
  }
}

/* Brand catalogues as tiles */
.brand-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  border-top: 1px solid var(--line);
}

.brand-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
}

.brand-list .fa {
  color: var(--ink-3);
  font-size: 0.8rem;
  transition: transform 0.3s var(--ease-out), color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .brand-list a:hover {
    color: var(--blue);
  }

  .brand-list a:hover .fa {
    color: var(--blue);
    transform: translateX(4px);
  }
}

@media (max-width: 700px) {
  .brand-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Video — the shop's own clips: they play on their own, without sound,
   and a button turns the sound on.
   ========================================================= */
.vid {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--night);
}

.vid video {
  display: block;
  width: 100%;
  /* the height attribute would otherwise win over aspect-ratio */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: pointer;
}

.vid-tall video {
  aspect-ratio: 9 / 16;
}

/* The wide clip on the home page. */
.vid-wide video {
  aspect-ratio: 16 / 9;
}

/* A play badge while the clip is stopped. */
.vid::after {
  content: '\f04b';
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(10, 14, 40, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font: normal normal normal 18px/1 FontAwesome;
  text-indent: 3px;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}

.vid.is-playing::after {
  opacity: 0;
  transform: scale(0.8);
}

.vid-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 14, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.16s var(--ease-out);
}

.vid-sound:hover {
  background: rgba(10, 14, 40, 0.8);
}

.vid-sound:active {
  transform: scale(0.94);
}

.vid-time {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(10, 14, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.vid-title {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 1rem;
}

/* Where each one sits */
.mag-video {
  max-width: 960px;
}

.svc-media .vid video {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mag-split-media .vid-tall video {
  aspect-ratio: 3 / 4;
}

/* Upright clips take two rows, so the grid reads as a mosaic. */
.gallery-video {
  grid-row: span 2;
}

.gallery-video .vid,
.gallery-video .vid video {
  height: 100%;
}

.gallery-video .vid video {
  aspect-ratio: auto;
  object-fit: cover;
}

.contact-place .vid-tall video {
  aspect-ratio: 4 / 5;
}

/* Three per row, and a gentler crop than the original 9:16, so the clips
   read wide instead of like narrow strips. */
.vid-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

.vid-row .vid-tall video {
  aspect-ratio: 4 / 5;
}

.contact-place {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .vid-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  .contact-place {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Video
   ========================================================= */
/* A grid of videos; each one plays with its own sound when tapped. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
}

.video-name {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
}

@media (max-width: 560px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

.video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: var(--night);
}

.video-frame iframe,
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade {
  padding: 0;
  background: none;
  cursor: pointer;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.4s ease;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--blue);
  font-size: 1.6rem;
  box-shadow: 0 16px 40px -12px rgba(14, 19, 48, 0.6);
  transition: transform 0.3s var(--ease-out);
}

.video-play .fa {
  margin-left: 5px;
}

/* A slow ring that says "this plays" without a word. */
.video-play::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: video-ring 2.4s var(--ease-out) infinite;
}

@keyframes video-ring {
  from { transform: scale(0.85); opacity: 1; }
  to { transform: scale(1.35); opacity: 0; }
}

.video-facade:hover img {
  transform: scale(1.04);
  filter: brightness(0.9);
}

.video-facade:hover .video-play {
  transform: scale(1.06);
}

.video-facade:active .video-play {
  transform: scale(0.96);
}

/* =========================================================
   Scroll entrances
   Each kind of block has its own move: headings focus,
cards rise in a
   cascade,
tiles and photos are uncovered. Nothing hides without the script.
   ========================================================= */
.js [data-reveal],
.js [data-reveal="curtain"] > * {
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: 0.8s;
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}

.js [data-reveal="focus"] {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 14px, 0);
}

.js [data-reveal="rise"] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
}

/* A fully clipped element never counts as intersecting the viewport,
so the
   curtain is drawn on the child and the observed element stays unclipped. */
.js [data-reveal="curtain"] > * {
  clip-path: inset(100% 0 0 0 round 8px);
  transition-duration: 1s;
}

.js [data-reveal="curtain"] img {
  transform: scale(1.15);
  transition: transform 1.4s var(--ease-out);
}

.js [data-reveal="zoom"] {
  opacity: 0;
  transform: scale(0.94);
}

.js [data-reveal].is-in {
  opacity: 1;
  filter: none;
  transform: none;
}

.js [data-reveal="curtain"].is-in > * {
  clip-path: inset(0 0 0 0 round 8px);
}

.js [data-reveal="curtain"].is-in img {
  transform: none;
}

/* After arrival,
hover transitions take over the transform again. */
.js [data-reveal].is-settled {
  transition-delay: 0s;
  transition-property: transform, border-color, background-color;
  transition-duration: 0.35s;
}

.js [data-reveal="curtain"].is-settled img {
  transition: transform 0.8s var(--ease-out);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--night);
  color: rgba(255, 255, 255, 0.72);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 56px;
  padding-block: 80px 64px;
}

.footer-logo {
  width: auto;
  height: 64px;
}

.footer-note {
  margin-top: 18px;
  max-width: 30ch;
}

.site-footer h2 {
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

.footer-address {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.footer-address > span {
  display: flex;
  gap: 12px;
}

.footer-address .fa {
  flex: none;
  width: 16px;
  margin-top: 5px;
  color: var(--blue-soft);
  text-align: center;
}

.site-footer a {
  color: #FFFFFF;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--blue-soft);
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-social .fa {
  width: 16px;
  color: var(--blue-soft);
  text-align: center;
}

.footer-bottom {
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 64px 48px;
  }
}

/* =========================================================
   Floating WhatsApp
   ========================================================= */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wa);
  color: #FFFFFF;
  font-size: 1.7rem;
  box-shadow: 0 10px 24px -10px rgba(14, 19, 48, 0.5);
  transition: background-color 0.2s ease, transform 0.16s var(--ease-out);
}

.wa-float:hover {
  background: var(--wa-deep);
}

.wa-float:active {
  transform: scale(0.94);
}

/* =========================================================
   Motion
   Only a few things move on their own: page titles focus once on load,
   photos appear as their pixels arrive, the home carousel and the chart
   demo. Text and cards never slide in on scroll.
   ========================================================= */
@keyframes focus-in {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* The class is only added to images still downloading,
so nothing already
   on screen flickers. */
.js img.is-developing {
  opacity: 0;
  transform: scale(1.02);
}

.js img.is-developed {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}

/* Reduced motion means gentler, not nothing: things still fade so the page
   never changes without explanation — they just stop moving. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* An instant animation would fire `animationend` at once and spin the
     carousel; removing it entirely leaves the slides still. */
  .lens.is-active::before {
    animation: none !important;
  }

  .showcase-frame,
  .showcase-frame.is-active,
  .showcase-frame.is-leaving {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .showcase-frame.is-active,
  .showcase-frame.is-leaving {
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .frame-photo {
    animation: none !important;
  }

  .showcase-lens,
  .lens::after,
  .lens-glare {
    animation: none !important;
  }

  .showcase-lens,
  .showcase-frame {
    translate: none !important;
  }

  .showcase-backdrop img,
  .frame-photo,
  .showcase-lens {
    animation: none !important;
  }

  .js .showcase .showcase-lens {
    filter: none;
  }

  .frame-photo,
  .showcase-title .word,
  .showcase-sub,
  .js .showcase .lens,
  .js .showcase .showcase-bar,
  .nav-links li,
  .js img.is-developing,
  .js img.is-developed {
    filter: none;
    transform: none;
  }

  .nav-toggle-bar {
    transition: none;
  }

  .brands-track {
    animation: none !important;
  }

  .brands-row {
    overflow-x: auto;
  }

  .brands-toggle,
  .video-play::before {
    display: none;
  }

  .js [data-reveal],
  .js [data-reveal="curtain"] > *,
  .js [data-reveal="curtain"] img {
    filter: none;
    transform: none;
    clip-path: none;
    transition-property: opacity;
    transition-duration: 0.3s;
  }
}

@media print {
  .site-header,
  .wa-float,
  .showcase-nav {
    display: none;
  }
}

/* TikTok is not in Font Awesome 4.7,
so it is drawn inline at the icon size. */
.icon-x,
.icon-tiktok {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* =========================================================
   Touch — every control on a phone gets at least a 44px target.
   The extra room is invisible padding or a pseudo-element, so nothing
   changes size on screen.
   ========================================================= */
@media (max-width: 700px) {
  /* On a phone the bar stays: the three numbers on one line, the social
     links centred beneath, everything a little smaller. */
  .topbar-row {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding-block: 6px 4px;
  }

  .topbar-contact {
    justify-content: center;
    gap: 2px 14px;
    font-size: 0.78rem;
  }

  .topbar-contact a {
    gap: 5px;
    min-height: 30px;
  }

  .topbar-label {
    display: none;
  }

  .topbar-social {
    justify-content: center;
    gap: 6px;
  }

  .topbar-social a {
    width: 34px;
    height: 34px;
  }

  .product-cta,
  .info-action,
  .link,
  .chip,
  .header-phone,
  .footer-social a,
  .footer-address a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .product-cta {
    margin-top: 2px;
  }

  .showcase-toggle,
  .brands-toggle {
    position: relative;
  }

  .brands-toggle {
    position: absolute;
  }

  .showcase-toggle::after,
  .brands-toggle::after {
    content: '';
    position: absolute;
    inset: -8px;
  }
}

/* "Leer más" for the story on the home page — phones only. */
.about-more {
  display: inline-flex;
  align-items: center;
  padding: 0 0 3px;
  border: 0;
  background-color: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.about-copy.is-collapsible:not(.is-open) p:nth-child(n + 3) {
  display: none;
}

.about-more {
  margin-top: 10px;
}

/* =========================================================
   Home — the two shops side by side (2026-10). Each card is the shop's
   own photo; "Ver mapa" turns that photo into its map, so a visitor sees
   the door and then where it is, without leaving the page.
   ========================================================= */
.locales-head {
  align-items: flex-end;
  flex-wrap: wrap;
}

.locales-head .page-kicker {
  margin-bottom: 10px;
}

.locales-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.locales-hours .fa {
  color: var(--blue);
}

.locales-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.local-card {
  display: flex;
  flex-direction: column;
}

.local-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 12px;
  background: var(--mist);
  isolation: isolate;
}

.local-photo,
.local-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.local-photo {
  z-index: 1;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transition: transform 1.2s var(--ease-out), opacity 0.6s var(--ease-in-out), filter 0.6s var(--ease-in-out);
}

.local-map {
  z-index: 0;
}

/* the photo dissolves out of focus and the map is underneath */
.local-card.is-map .local-photo {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.06);
  pointer-events: none;
}

.local-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(14, 19, 48, 0.12);
}

.local-tag {
  transition: opacity 0.3s ease;
}

.local-card.is-map .local-tag {
  opacity: 0;
}

.local-body {
  padding-top: 22px;
}

.local-name {
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.local-address {
  margin-top: 6px;
  color: var(--ink-2);
}

.local-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.local-toggle[aria-pressed="true"] {
  border-color: var(--ink);
}

@media (hover: hover) {
  .local-card:not(.is-map):hover .local-photo {
    transform: scale(1.04);
  }
}

.locales-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .locales-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .local-media {
    aspect-ratio: 4 / 4.2;
  }

  .local-actions .btn {
    flex: 1 1 0;
    padding-inline: 14px;
  }

  .locales-contact {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .local-photo {
    transition: opacity 0.2s ease;
  }
}

/* =========================================================
   Gafas con tecnología Meta (2026-10) — a dark band, like the brand's own
   posters: words on the left, the client's photos in a tight mosaic on
   the right. Used on the home page and in Productos (#meta).
   ========================================================= */
.meta-band {
  background: #0C0E16;
  color: #FFFFFF;
  scroll-margin-top: 80px;
}

.meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.meta-band .page-kicker {
  color: #FF8A7A;
}

.meta-title {
  margin-top: 12px;
  color: #FFFFFF;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.meta-lead {
  max-width: 46ch;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.06rem;
  line-height: 1.6;
}

.meta-features {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 28px;
  margin-top: 26px;
}

.meta-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.meta-features .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #FF8A7A;
  font-size: 0.9rem;
}

.meta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.meta-band .btn-whatsapp {
  background: var(--wa);
}

.meta-band .btn-whatsapp:hover {
  background: var(--wa-deep);
}

.meta-band :focus-visible {
  outline-color: #FFFFFF;
}

/* one wide photo on top, the upright ones below */
.meta-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.meta-mosaic li,
.meta-mosaic .gallery-item {
  height: 100%;
}

.meta-mosaic .gallery-item {
  background: #1A1D28;
}

.meta-mosaic img {
  height: 100%;
  aspect-ratio: auto;
}

.meta-a {
  grid-column: span 6;
  aspect-ratio: 3 / 2;
}

.meta-b,
.meta-c {
  grid-column: span 3;
  aspect-ratio: 1 / 1;
}

.meta-grid--4 .meta-b,
.meta-grid--4 .meta-c,
.meta-grid--4 .meta-d {
  grid-column: span 2;
  aspect-ratio: 3 / 4;
}

.meta-a img { object-position: 50% 20%; }
.meta-b img { object-position: 50% 60%; }
.meta-c img { object-position: 40% 50%; }
.meta-d img { object-position: 50% 30%; }

@media (hover: hover) {
  .meta-mosaic .gallery-item:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 900px) {
  .meta-grid {
    grid-template-columns: 1fr;
  }

  .meta-mosaic {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .meta-features {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }

  .meta-actions .btn {
    flex: 1 1 100%;
  }
}