/* Arte Uniformes — public site styles. */

:root {
  --ink: #16181b;
  --ink-soft: #5f6268;
  --ink-faint: #8d9095;
  --paper: #fbfaf8;
  --paper-alt: #f3f0ea;
  --line: #e3dfd7;
  /* Brand colours from the manual (UNIFORMES-GuiaMarca):
     red = Pantone 187 PC, RGB 171/18/36 · grey = Pantone 430 PC, RGB 114/118/120. */
  --accent: #ab1224;
  --brand-grey: #727678;
  --accent-dark: #8a0e1d;
  --accent-soft: #f7e8ea;
  /* Soft wash used on whole sections, so the brand colour carries the page
     instead of only showing up in small details. */
  --accent-tint: #fbeff1;
  --whats: #1faa54;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  /* Header height drives the sticky offsets and the mobile menu's top edge. */
  --header-h: 84px;

  /* One family for everything. Headings separate themselves by weight and tight
     tracking rather than by switching typeface. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.15; margin: 0; }

h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.25rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tint { background: var(--accent-tint); }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 58ch; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* --- Buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid var(--accent); border-radius: 2px;
  background: var(--accent); color: var(--paper);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: transparent; color: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

.btn--whats { background: var(--whats); border-color: var(--whats); color: #fff; }
.btn--whats:hover { background: transparent; color: var(--whats); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.82rem; white-space: nowrap; }

.link-underline {
  display: inline-block;
  font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-underline:hover { color: var(--accent); border-color: var(--accent); }

/* --- Header ---

   Three levels, each with its own register, so they never compete:
   1. utility rail — the shop's details and the institutional pages, small and grey
   2. main bar     — the catalog only, in ink; this is the one that sticks
   3. subnav       — the lines inside the open one (see "Page heading")            */

.utility {
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 40px;
}
.utility__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; }
.utility__links { display: flex; gap: 1.5rem; }
.utility a, .utility span {
  font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-soft);
}
.utility__links a { font-weight: 500; }
.utility a:hover { color: var(--accent); }

.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease);
}
/* Once the rail has scrolled away the bar is on its own, so it lifts off the page. */
.header.is-stuck { box-shadow: 0 10px 24px -22px rgba(0, 0, 0, 0.4); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--header-h);
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
}

/* Logotype traced from the brand manual (static/img/logo.svg). The negative
   version is the all-white monochrome variant the manual allows on dark backgrounds. */
.wordmark { display: flex; align-items: center; }
/* The lockup is roughly 7:1, so height drives how much horizontal room it takes;
   it has to shrink on phones to leave space for the burger. */
.logo { display: block; height: 46px; width: auto; }
.logo--sm { height: 30px; }
/* The tie hangs below the wordmark, so centring the artwork's box leaves the word
   reading high. Nudge down by the gap between the two centres (21% of the box height)
   so the word lines up optically with the nav. Percentage keeps it size-independent. */
.wordmark .logo, .admin-bar__brand .logo { transform: translateY(21%); }

/* Full height on purpose: the dropdown hangs off the bottom of its item, so the item
   has to reach the bottom of the bar for the panel to clear the header. */
.nav { display: flex; align-items: center; align-self: stretch; gap: 1.5rem; }
.nav__list { display: flex; align-items: center; height: 100%; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; font-size: 0.88rem; font-weight: 500;
  padding-block: 0.4rem; white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* "Mais" dropdown: the whole catalog, for what the header does not show directly.
   Anchored to its right edge because the trigger sits near the end of the bar. The item
   spans the whole bar height, so the panel opens clear of the header instead of on it. */
.nav__item--has-menu {
  position: relative; --nav-gap: 0.85rem;
  align-self: stretch; display: flex; align-items: center;
}
.nav__link--more { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__chevron { width: 9px; height: auto; transition: transform 0.22s var(--ease); }
.nav__item--has-menu:hover .nav__chevron { transform: rotate(180deg); }
.nav__panel {
  position: absolute; top: calc(100% + var(--nav-gap)); right: 0; transform: translateY(-6px);
  min-width: 640px; padding: 1.75rem 2rem 0.25rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.28);
  /* Columns rather than a grid: the lines have very different lengths, and rows would
     stretch every one of them to the height of Casual. */
  column-count: 3; column-gap: 2.25rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav__panel > div { break-inside: avoid; padding-bottom: 1.5rem; }
.nav__item--has-menu:hover .nav__panel,
.nav__item--has-menu:focus-within .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Invisible bridge over the gap between the link and the panel. Without it the
   pointer crosses dead space on its way to a subitem and the menu closes. */
.nav__panel::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--nav-gap) * -1); height: var(--nav-gap);
}
.nav__group-title {
  display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem;
}
.nav__sublist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.nav__sublist a { font-size: 0.88rem; color: var(--ink-soft); transition: color 0.18s var(--ease); }
.nav__sublist a:hover { color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: 1rem; }

.burger {
  display: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--ink);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Mobile menu --- */

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 45;
  background: var(--paper); padding: 2rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu__shortcuts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.mobile-menu__shortcuts a {
  padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px;
}
.mobile-menu__link {
  display: block; font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em;
  padding-block: 0.5rem; border-bottom: 1px solid var(--line);
}
.mobile-menu__group { padding-block: 1rem; border-bottom: 1px solid var(--line); }
.mobile-menu__sublist { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.mobile-menu__sublist a { font-size: 0.95rem; color: var(--ink-soft); }
.mobile-menu__cta { margin-top: 2rem; display: grid; gap: 0.75rem; }

/* --- Hero --- */

.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--shell); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
}
.hero__title { margin-bottom: 1.5rem; }
/* Only the roman Inter is bundled, so an italic here would be a synthesised
   oblique. The second line is set apart by colour instead. */
.hero__title em { font-style: normal; color: var(--accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.hero__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-alt); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
  position: absolute; left: 0; bottom: 0;
  background: var(--accent); color: var(--paper); padding: 1rem 1.4rem;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}

/* Gentle reveal of the opening image on load: a soft fade with a slight zoom-out,
   then the badge rises in. Skipped when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-reveal 1.1s var(--ease) both; }
  .hero__badge { animation: hero-badge 0.7s var(--ease) 0.55s both; }
}
@keyframes hero-reveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hero-badge {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Credentials strip --- */

.strip { border-bottom: 1px solid var(--line); background: var(--accent-tint); }
.strip__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.strip__item { padding: 2rem 0; }
.strip__item + .strip__item { border-left: 1px solid var(--line); padding-left: 2rem; }
.strip__value { font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1; display: block; color: var(--accent); }
.strip__label { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.5rem; display: block; }

/* --- Section heading --- */

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__head p { margin-top: 0.9rem; }

/* --- Grids --- */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* --- Category card --- */

.category-card { display: block; }
.category-card__media {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
}
/* cover, unlike the product cards: these are navigation tiles, so an even grid matters
   more than showing every edge of the garment. 2:3 covers are untouched; the rest crop. */
.category-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transition: transform 0.65s var(--ease);
}
.category-card:hover .category-card__media img { transform: scale(1.04); }
.category-card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.category-card__title { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; }
.category-card__count { font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }
.category-card__sub { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.35rem; }

/* --- Product card --- */

.product-card { display: block; }
.product-card__media {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
}
/* cover so every tile in a listing is filled to the same size. The library is mixed —
   about half the photos are 2:3 and half are square — and contain made the square ones
   render visibly smaller. Cropping a square shot mostly removes empty backdrop.
   The detail view still uses contain: there the garment must never be cut. */
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.035); }
.product-card__cat {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-top: 1rem; display: block;
}
.product-card__title { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.015em; margin-top: 0.35rem; }
.product-card__summary { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.4rem; }

/* Gentle fade-up as the listing tiles appear. The hidden start state is added by JS,
   so with JS off the cards simply render in place. Disabled for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-item { opacity: 0; transform: translateY(16px); }
  .reveal-item.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

/* --- Page heading --- */

.page-head {
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--accent-tint); border-bottom: 1px solid var(--line);
}
.page-head__title { margin-bottom: 1.1rem; }
/* The banner already carries generous padding, so the section right below it does not
   need the full section top gap — pull it up close under the heading. */
.page-head + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Third level: the lines inside the one on screen. Set smaller than the bar above and
   divided by hairlines rather than by space, so it reads as a list within a page and
   never as a second navigation bar. The open one is the only red thing here. */
.subnav { border-bottom: 1px solid var(--line); }
.subnav__inner { display: flex; flex-wrap: wrap; align-items: center; padding-block: 0.6rem; }
.subnav__link {
  font-size: 0.82rem; color: var(--ink-soft);
  padding: 0.2rem 1.15rem;
  transition: color 0.2s var(--ease);
}
.subnav__link:first-child { padding-left: 0; }
.subnav__link + .subnav__link { border-left: 1px solid var(--line); }
.subnav__link:hover { color: var(--ink); }
.subnav__link.is-active { color: var(--accent); font-weight: 600; }

/* --- Product detail --- */

.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* The frame matches the photo library (36 of 41 shots are exactly 2:3), so the usual
   case fills it with no crop and no letterbox. max-width caps the height at 720px while
   keeping the ratio exact — capping height instead would re-introduce side bars.
   contain protects the handful of odd-sized photos from being cut, and object-position
   top pins those to the frame's top so they line up with the details column. */
.gallery__main {
  position: relative;
  aspect-ratio: 2 / 3; max-width: 480px;
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; object-position: top; }

/* Two stacked image layers so changing photo crossfades instead of snapping. JS turns the
   template image into one layer and adds the second; without JS the single image just shows. */
.gallery__layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; }
.gallery__layer.is-shown { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gallery__layer { transition: opacity 0.5s var(--ease); }
}

/* Prev/next arrows and the counter, shown only once the gallery script is running. */
.gallery__nav, .gallery__count { display: none; }
[data-gallery].is-ready .gallery__nav { display: flex; }
[data-gallery].is-ready .gallery__count { display: block; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  opacity: 0; transition: opacity 0.25s var(--ease), background 0.2s var(--ease);
}
.gallery__main:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:hover { background: var(--paper); }
.gallery__nav--prev { left: 0.6rem; }
.gallery__nav--next { right: 0.6rem; }
.gallery__nav svg { width: 1.1rem; height: 1.1rem; }
/* Touch screens have no hover, so the arrows stay visible there. */
@media (hover: none) { [data-gallery].is-ready .gallery__nav { opacity: 1; } }
.gallery__count {
  position: absolute; bottom: 0.7rem; right: 0.7rem; z-index: 2;
  font-size: 0.72rem; letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--paper);
}

.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.gallery__thumb {
  aspect-ratio: 1; overflow: hidden; background: var(--paper-alt);
  border: 1px solid transparent; padding: 0; cursor: pointer;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
  opacity: 0.62;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover, .gallery__thumb.is-active { opacity: 1; border-color: var(--ink); }

/* Only rendered for a logged-in admin: a quiet shortcut from the public page to the editor. */
.edit-link {
  display: inline-block; margin-top: 1rem;
  font-size: 0.8rem; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 2px; padding: 0.35rem 0.7rem;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.edit-link:hover { color: var(--ink); border-color: var(--ink); }

.detail__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.detail__summary { font-size: 1.05rem; color: var(--ink-soft); margin-block: 1.25rem 2rem; }
/* The title has no bottom margin, so give whichever block follows it room to breathe.
   Most products have no summary, so this usually applies to the description. */
.detail__aside > h1 + .detail__summary,
.detail__aside > h1 + .prose { margin-top: 1.25rem; }

.specs { border-top: 1px solid var(--line); margin: 2rem 0; }
.specs__row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.specs__key { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.specs__value { font-size: 0.92rem; }

.quote-box { background: var(--paper-alt); padding: 1.75rem; border-radius: 3px; }
.quote-box h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.quote-box p { font-size: 0.9rem; color: var(--ink-soft); }
.quote-box .btn { margin-top: 1.1rem; width: 100%; justify-content: center; }

/* --- Editorial content --- */

.prose { max-width: 68ch; }
.prose h2 { margin-block: 2.5rem 1rem; }
.prose h3 { margin-block: 2rem 0.75rem; }
.prose p { color: var(--ink-soft); }

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
/* Landscape ratio to match the storefront photo, so it shows in full without cropping. */
.split__media { align-self: start; aspect-ratio: 960 / 519; overflow: hidden; background: var(--paper-alt); border-radius: 3px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.5rem; }
.pillar__num { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--accent); line-height: 1; }
.pillar h3 { margin-block: 0.75rem 0.5rem; font-size: 1.25rem; }
.pillar p { font-size: 0.92rem; color: var(--ink-soft); }

/* --- Contact --- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.contact-block + .contact-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.contact-block__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5rem; }
.contact-block__value { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.contact-block__value a:hover { color: var(--accent); }
.contact-block__note { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.3rem; }

.map-frame { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); filter: grayscale(1) contrast(1.05); }

/* --- Closing call to action --- */

.cta { background: var(--accent-dark); color: var(--paper); text-align: center; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta p { color: rgba(251, 250, 248, 0.75); max-width: 52ch; margin: 1.25rem auto 2.25rem; }
.cta .btn--ghost { color: var(--paper); border-color: rgba(251, 250, 248, 0.4); }
.cta .btn--ghost:hover { background: var(--paper); color: var(--accent-dark); border-color: var(--paper); }
/* On the red band the WhatsApp green would clash, so the button goes white. */
.cta .btn--whats { background: var(--paper); border-color: var(--paper); color: var(--accent-dark); }
.cta .btn--whats:hover { background: transparent; color: var(--paper); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* --- Footer --- */

.footer { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.footer__title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(251, 250, 248, 0.5); margin-bottom: 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__list a, .footer__text { font-size: 0.88rem; color: rgba(251, 250, 248, 0.72); }
.footer__list a:hover { color: var(--paper); }
.footer .link-underline { border-color: rgba(251, 250, 248, 0.45); }
.footer .link-underline:hover { color: var(--paper); border-color: var(--paper); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(251, 250, 248, 0.16);
  font-size: 0.8rem; color: rgba(251, 250, 248, 0.45);
}

/* --- Floating WhatsApp button --- */

.whats-fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 40;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--whats); color: #fff;
  padding: 0.9rem 1.25rem; border-radius: 100px;
  font-size: 0.88rem; font-weight: 500;
  box-shadow: 0 12px 28px -12px rgba(31, 170, 84, 0.7);
  transition: transform 0.25s var(--ease);
}
.whats-fab:hover { transform: translateY(-2px); }
.whats-fab svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* --- Empty state / 404 --- */

.empty { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.empty p { color: var(--ink-soft); margin-block: 1rem 2rem; }

/* --- Search --- */

.search-form { display: flex; gap: 0.6rem; max-width: 460px; margin-top: 1.5rem; }
.search-form input {
  flex: 1; padding: 0.8rem 1rem; font: inherit; font-size: 0.92rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px; color: var(--ink);
}
.search-form input:focus { border-color: var(--ink); outline: none; }

/* --- Responsive --- */

/* The bar carries the catalog now, so it runs out of room well before the phone
   breakpoint: the burger takes over, and the rail goes with it. */
@media (max-width: 960px) {
  /* Without the rail the bar carries the brand's red edge itself, and the menu below it
     has to start 4px lower to match. */
  .utility { display: none; }
  .header { border-top: 4px solid var(--accent); }
  .mobile-menu { top: calc(var(--header-h) + 4px); }
  .nav { display: none; }
  .burger { display: block; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16 / 10; order: -1; }
  .detail { grid-template-columns: 1fr; }
  .detail > [data-gallery] { margin-top: 0; }
  .detail__aside { position: static; }
  .split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .strip__item + .strip__item { border-left: none; padding-left: 0; }
}

@media (max-width: 780px) {
  :root { --header-h: 72px; }
  .logo { height: 34px; }
  .header__actions .btn { display: none; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .whats-fab span { display: none; }
  .whats-fab { padding: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}