/* SEPROLIMCA — one-motif: tabbed folder stack. Brand palette from @seprolimca.mcbo */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0E2A47;
  --cyan: #00A8E8;
  --teal: #00B4D8;
  --yellow: #FFC000;
  --white: #FFFFFF;
  --pale: #E8EDF4;
  --front: #1B3A5F;
  --tile-cyan: #D9F2FC;
  --tile-yellow: #FFDE85;
  --tile-teal: #D8F3F7;
  --muted: rgba(14, 42, 71, 0.6);
  --frame: 32px;
  --tab-cut: 18px;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-small: 16px;
  --t-body: 17px;
  --t-lead: 20px;
  --t-head: 36px;
  --t-title: 44px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============ HERO — tabbed folder stack ============ */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(rgba(14, 42, 71, 0.72), rgba(14, 42, 71, 0.82) 62%, var(--navy) 96%),
    url("assets/envisat-radar-composite-of-the-port-of.jpg") center 30% / cover no-repeat;
  background-color: var(--navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__top {
  position: relative;
  width: 100%;
  height: 24px;
  margin: 24px 0 0;
  padding: 0 var(--frame);
  font-size: var(--t-small);
}
.hero__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 800ms var(--ease-out) 200ms;
}
.hero__top { pointer-events: none; }
.hero__top a { pointer-events: auto; }
.hero.is-in .hero__brand {
  opacity: 1;
}
.hero__link {
  position: absolute;
  right: var(--frame);
  transition: opacity 0.2s ease;
}
.hero__link:hover { opacity: 0.6; }

.hero__title {
  margin-top: 86px;
  font-size: clamp(56px, 10vw, 160px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.hero__title-line { display: block; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title-line > span { display: block; }
html.js .hero__title-line > span { transform: translateY(110%); }
html.js .hero.is-in .hero__title-line > span {
  transform: none;
  transition: transform 1000ms var(--ease-out) 150ms;
}

.hero__tag {
  margin-top: 26px;
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}
html.js .hero__tag { opacity: 0; transform: translateY(16px); }
html.js .hero.is-in .hero__tag {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out) 600ms, transform 700ms var(--ease-out) 600ms;
}

/* folder stack */
.stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 51vh;
  bottom: 0;
}
.folder {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 86vw;
  height: calc(100vh - 51vh + 80px);
  display: block;
}
.folder--nosotros { top: 0; background: var(--pale); }
.folder--servicios { top: 64px; background: var(--white); }
.folder--zonas { top: 128px; background: var(--yellow); }
.folder--contacto { top: 192px; background: var(--cyan); }
.folder--front { top: 256px; background: var(--front); padding: 32px; }

.folder__tab {
  position: absolute;
  bottom: 100%;
  height: 40px;
  width: auto;
  min-width: 160px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}
.folder--nosotros .folder__tab { left: 12%; background: var(--pale); color: var(--navy); }
.folder--servicios .folder__tab { left: 34%; background: var(--white); color: var(--navy); }
.folder--zonas .folder__tab { left: 56%; background: var(--yellow); color: var(--navy); }
.folder--contacto .folder__tab { left: 76%; background: var(--cyan); color: var(--navy); width: 170px; }

html.js .folder { opacity: 0; transform: translate(-50%, 80px); }
html.js .hero.is-in .folder {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.js .hero.is-in .folder--nosotros { transition-delay: 250ms; }
html.js .hero.is-in .folder--servicios { transition-delay: 340ms; }
html.js .hero.is-in .folder--zonas { transition-delay: 430ms; }
html.js .hero.is-in .folder--contacto { transition-delay: 520ms; }
html.js .hero.is-in .folder--front { transition-delay: 610ms; }

.folder a:hover { opacity: 0.92; }
.folder--front { transition-property: opacity, transform; }

.folder__action {
  display: inline-block;
  padding: 18px 34px;
  background: var(--cyan);
  color: var(--navy);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: 0.04em;
  clip-path: polygon(var(--tab-cut) 0, calc(100% - var(--tab-cut)) 0, 100% 100%, 0 100%);
  transition: background 0.2s ease, transform 0.15s ease;
}
.folder__action:hover { background: var(--yellow); color: var(--navy); }
.folder__action:active { transform: scale(0.97); }
html.js .folder__action { opacity: 0; transform: scale(0.92); }
html.js .hero.is-in .folder__action {
  opacity: 1; transform: scale(1);
  transition: opacity 600ms var(--ease-out) 850ms, transform 600ms var(--ease-out) 850ms;
}

/* ============ STATEMENT — inline thumbnails ============ */
.statement {
  background: var(--pale);
  padding: 22vh var(--frame);
  text-align: center;
}
.statement__text {
  display: block;
  width: min(74%, 920px);
  margin: 0 auto;
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.chip {
  display: inline-block;
  height: 0.85em;
  width: 1.15em;
  vertical-align: -0.1em;
  margin: 0 0.12em;
  overflow: hidden;
  background: var(--white);
  clip-path: polygon(0.14em 0, calc(100% - 0.14em) 0, 100% 100%, 0 100%);
}
.chip img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
html.js .statement__text { opacity: 0; transform: translateY(20px); }
html.js .statement.is-in .statement__text {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.js .chip { opacity: 0; transform: scale(0.7); }
html.js .statement.is-in .chip {
  opacity: 1; transform: scale(1);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
html.js .statement.is-in .chip:nth-of-type(1) { transition-delay: 200ms; }
html.js .statement.is-in .chip:nth-of-type(2) { transition-delay: 300ms; }
html.js .statement.is-in .chip:nth-of-type(3) { transition-delay: 400ms; }
html.js .statement.is-in .chip:nth-of-type(4) { transition-delay: 500ms; }
html.js .statement.is-in .chip:nth-of-type(5) { transition-delay: 600ms; }

/* ============ SERVICES — specimens on colour tiles ============ */
.specs {
  background: var(--white);
  padding: 120px var(--frame);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px 24px;
}
.specs__intro {
  grid-column: 1 / 4;
  align-self: start;
  padding-top: 8px;
}
.specs__title {
  font-size: var(--t-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.specs__line {
  margin-top: 24px;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--muted);
  max-width: 30ch;
}
.specs__grid {
  grid-column: 4 / 13;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: start;
}
.spec { display: block; }
.spec--double { grid-column: span 2; }
.spec__tile {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.spec--double .spec__tile { aspect-ratio: 8 / 5; }
.spec__tile--cyan { background: var(--tile-cyan); }
.spec__tile--yellow { background: var(--tile-yellow); }
.spec__tile--teal { background: var(--tile-teal); }
.spec__tile img, .spec__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  mix-blend-mode: multiply;
}
.spec--double .spec__tile video { object-fit: cover; object-position: center 30%; mix-blend-mode: normal; }
.spec__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 2px 0;
}
.spec__name { font-size: var(--t-lead); font-weight: 700; }
.spec__fact { font-size: var(--t-body); color: var(--muted); }

/* reveals */
html.js .specs__title { opacity: 0; transform: translateY(20px); }
html.js .specs.is-in .specs__title {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.js .specs__line { opacity: 0; transform: translateY(16px); }
html.js .specs.is-in .specs__line {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out) 200ms, transform 700ms var(--ease-out) 200ms;
}
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .zonas__title { opacity: 0; transform: translateY(20px); }
html.js .zonas.is-in .zonas__title {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.js .zonas__tab { opacity: 0; }
html.js .zonas.is-in .zonas__tab {
  opacity: 1;
  transition: opacity 500ms var(--ease-out);
  transition-delay: calc(var(--z, 0) * 60ms);
}
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ============ ZONAS — square plate, spare text ============ */
.zonas {
  background: var(--yellow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88svh;
  overflow: hidden;
}
.zonas__half {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88svh;
}
.zonas__plate {
  position: relative;
  width: calc(50vw - 40px);
  aspect-ratio: 1 / 1;
}
.zonas__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.zonas__img.is-active { opacity: 1; }

.zonas__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 88svh;
  padding: 40px 40px 40px 56px;
}
.zonas__tabs {
  list-style: none;
  display: flex;
  gap: 40px;
}
.zonas__tab {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(14, 42, 71, 0.4);
  transition: color 0.2s ease;
}
.zonas__tab:hover { color: var(--navy); }
.zonas__tab.is-active { color: var(--navy); }
.zonas__title {
  font-size: var(--t-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.zonas__desc {
  margin-top: 48px;
  font-size: var(--t-body);
  line-height: 1.5;
  max-width: 34ch;
  display: none;
}
.zonas__desc.is-active { display: block; }
.zonas__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  font-size: var(--t-body);
  font-weight: 700;
  text-align: center;
  clip-path: polygon(var(--tab-cut) 0, calc(100% - var(--tab-cut)) 0, 100% 100%, 0 100%);
  transition: transform 0.15s ease, filter 0.2s ease;
}
.cell:hover { filter: brightness(1.08); }
.cell:active { transform: scale(0.98); }
.cell--ink { background: var(--navy); color: var(--white); }
.cell--tone { background: #E8AE00; color: var(--navy); }


/* ============ CTA — one word is the button ============ */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 60svh;
  background: var(--cyan);
  color: var(--navy);
  padding: 32px var(--frame) 24px;
  clip-path: polygon(var(--tab-cut) 0, calc(100% - var(--tab-cut)) 0, 100% 100%, 0 100%);
}
.cta:hover, .cta:focus-visible { background: var(--navy); color: var(--yellow); }
.cta__note {
  position: absolute;
  top: 32px;
  left: var(--frame);
  font-size: var(--t-lead);
}
.cta__arrow {
  position: absolute;
  top: 28px;
  right: var(--frame);
  width: 48px;
  height: 48px;
  color: inherit;
}
.cta__word {
  width: 100%;
  font-size: clamp(56px, 19vw, 280px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: clip;
}
.cta__word-line { display: block; }
html.js .cta__note { opacity: 0; transform: translateY(16px); }
html.js .cta.is-in .cta__note {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out) 300ms, transform 600ms var(--ease-out) 300ms;
}
html.js .cta__arrow { opacity: 0; transform: translateY(16px); }
html.js .cta.is-in .cta__arrow {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out) 400ms, transform 600ms var(--ease-out) 400ms;
}
html.js .cta__word-line { transform: translateY(105%); }
html.js .cta.is-in .cta__word-line {
  transform: none;
  transition: transform 950ms var(--ease-out) 120ms;
}

/* ============ FOOTER — the mark, built large ============ */
.mark {
  background: var(--navy);
  color: var(--white);
  padding: 72px var(--frame) 40px;
}
.mark__blocks {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  align-items: end;
}
.mb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-title);
  font-weight: 800;
  color: var(--navy);
}
html.js .mb { opacity: 0; transform: translateY(24px); }
html.js .mark.is-in .mb {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}
.mb--1 { height: 240px; background: var(--cyan); }
.mb--2 { height: 190px; background: var(--yellow); }
.mb--3 { height: 280px; background: var(--white); }
.mb--4 { height: 170px; background: var(--teal); }
.mb--5 { height: 250px; background: var(--white); }
.mb--6 { height: 200px; background: var(--cyan); }
.mb--7 { height: 270px; background: var(--yellow); }
.mb--8 { height: 180px; background: var(--teal); }
.mb--9 { height: 240px; background: var(--white); }
.mb--10 { height: 210px; background: var(--cyan); }

.mark__cols {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.mark__nav { grid-column: span 3; display: flex; flex-direction: column; gap: 10px; font-size: var(--t-small); }
.mark__nav a { transition: opacity 0.2s ease; opacity: 0.75; }
.mark__nav a:hover { opacity: 1; }
.mark__addr { grid-column: span 3; font-size: var(--t-small); line-height: 1.6; opacity: 0.75; }

.mark__bottom {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-small);
  opacity: 0.9;
}
.mark__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 26px;
  background: var(--cyan);
  color: var(--navy);
  font-weight: 700;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  transition: background 0.2s ease, transform 0.15s ease;
}
.mark__btn:hover { background: var(--yellow); }
.mark__btn:active { transform: scale(0.97); }

.credits {
  margin-top: 40px;
  padding-top: 24px;
  font-size: var(--t-small);
  line-height: 1.7;
  opacity: 0.45;
  max-width: 75ch;
}
.credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* ============ Short Viewports / Low Height Fix ============ */
@media (max-height: 640px) {
  .hero {
    min-height: auto;
    padding-bottom: 24px;
  }
  .hero__title {
    margin-top: 28px;
    font-size: clamp(36px, 7vw, 92px);
  }
  .hero__tag {
    margin-top: 10px;
    font-size: 16px;
  }
  .stack {
    position: relative;
    top: auto;
    margin-top: 46px;
    height: 380px;
  }
  .folder {
    height: 400px;
  }
}
/* ============ Responsive ============ */
@media (max-width: 900px) {
  :root { --frame: 20px; }
  .specs { grid-template-columns: 1fr; }
  .specs__intro { grid-column: auto; margin-bottom: 24px; }
  .specs__grid { grid-column: auto; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .spec--double { grid-column: span 2; }
  .spec--double .spec__tile { aspect-ratio: 8 / 5; }
  .zonas { grid-template-columns: 1fr; }
  .zonas__half { min-height: auto; }
  .zonas__plate { width: calc(100vw - 32px); margin: 16px auto 0; }
  .zonas__panel { height: auto; padding: 32px var(--frame) 40px; }
  .mark__cols { grid-template-columns: repeat(6, 1fr); }
  .mark__nav, .mark__addr { grid-column: span 3; }
  .hero__tag { padding: 0 var(--frame) 16px; }
}
@media (max-width: 640px) {
  .hero__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--frame);
    height: 44px;
    margin-top: 16px;
  }
  .hero__brand {
    position: static;
    transform: none;
    font-size: 14px;
    letter-spacing: 0.22em;
    white-space: nowrap;
  }
  .hero__link {
    position: static;
    right: auto;
    font-size: 13px;
    white-space: nowrap;
  }
  .hero__title {
    margin-top: 40px;
    padding: 0 var(--frame);
    font-size: 10vw;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  .hero__tag {
    padding: 0 var(--frame) 8px;
    margin-top: 6px;
    font-size: 15px;
  }
  .stack { position: relative; top: auto; margin-top: 32px; }
  .folder { width: 100vw; height: calc(100vh - 48svh + 60px); }
  .folder--nosotros { top: 0; }
  .folder--servicios { top: 52px; }
  .folder--zonas { top: 104px; }
  .folder--contacto { top: 156px; }
  .folder--front { top: 208px; padding: 20px; }
  .folder__tab { height: 34px; width: auto; min-width: 120px; padding: 0 18px; font-size: 13px; letter-spacing: 0.14em; }
  .folder--nosotros .folder__tab { left: 6%; }
  .folder--servicios .folder__tab { left: 40%; }
  .folder--zonas .folder__tab { left: 68%; width: 118px; }
  .folder--contacto .folder__tab { left: 8%; width: 128px; }
  .folder__action { display: block; width: 100%; }

  .statement { padding: 96px var(--frame); }
  .statement__text { width: 100%; text-align: left; font-size: clamp(19px, 6.1vw, 24px); }
  .chip:nth-of-type(4), .chip:nth-of-type(5) { display: none; }

  .specs { padding: 80px var(--frame); }
  .specs__title { font-size: 32px; }
  .spec__name { font-size: var(--t-body); }
  .spec__fact { font-size: var(--t-small); }

  .zonas__tabs { gap: 24px; }
  .zonas__tab { font-size: var(--t-small); }
  .zonas__title { font-size: 32px; }
  .zonas__desc { margin-top: 24px; }
  .zonas__actions { grid-template-columns: 1fr; }
  .cell { height: 60px; }

  .cta { height: 46svh; padding: 20px var(--frame) 16px; }
  .cta__note { font-size: var(--t-body); max-width: 14ch; }
  .cta__arrow { width: 32px; height: 32px; }
  .cta__word { font-size: 21vw; }

  .mark { padding: 48px var(--frame) 32px; }
  .mark__blocks { grid-template-columns: repeat(5, 1fr); }
  .mb { font-size: 30px; }
  .mb--1 { height: 104px; } .mb--2 { height: 82px; } .mb--3 { height: 116px; }
  .mb--4 { height: 76px; } .mb--5 { height: 100px; }
  .mb--6 { height: 88px; } .mb--7 { height: 110px; } .mb--8 { height: 78px; }
  .mb--9 { height: 104px; } .mb--10 { height: 92px; }
  .mark__bottom { flex-direction: row; }
}

/* ============ Reduced motion ============ */
@keyframes plate-drift {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: no-preference) {
  .zonas__img.is-active { animation: plate-drift 14s var(--ease-in-out) infinite alternate; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .hero__title-line > span,
  html.js .hero__tag,
  html.js .folder,
  html.js .folder__action,
  html.js .chip,
  html.js .reveal,
  html.js .cta__word-line,
  html.js .mb { opacity: 1; transform: none; }
  .spec--double .spec__tile video { display: none; }
  .spec--double .spec__tile { position: relative; background-image: url("assets/sam-s-club-floor-scrubber-and-inventory-poster.jpg"); background-size: cover; background-position: center 30%; }
}