/* ---------------------------------------------------------------------------
   Public marketing site (automationlab.agency).

   Loaded *after* style.css on the four public pages only - the landing page
   and the three legal pages. The app's own UI is untouched by this file, so
   restyling the marketing site can never break the panel. login.html and
   signup.html deliberately do not load it; they keep _public_nav.html.

   Design language taken from the reference the client approved. Its signature
   moves, in order of how much they define the look:

     1. Big display headings, lowercase, with a trailing period.
     2. Small BOLD BLACK uppercase labels, "/" separating the two halves.
     3. Sections sit on one of three grounds: paper, near-black, or sage.
     4. Structure comes from visible 1px borders forming grids - not shadows.
     5. Large bordered cells: number top-left, arrow top-right, text bottom.
     6. Fully-rounded pills for tags, square corners for everything else.
     7. "/" as a list bullet.

   --accent is the single swap point for the client's brand colour. It is a
   LIGHT colour used as a section GROUND with dark text on it, never as text
   on a light background.
--------------------------------------------------------------------------- */

:root {
  --paper:     #f6f6f9;
  --card:      #ececf1;
  --line:      #b7b7bc;
  --muted:     #5d5d63;
  --ink-soft:  #323237;
  --ink:       #0d0d10;
  --text:      #070709;

  --accent:     #c8d5cc;   /* <- client brand colour goes here */
  --accent-ink: #0d0d10;

  --line-dark: rgba(255, 255, 255, 0.16);
  --text-dark: rgba(255, 255, 255, 0.66);

  --radius: 5.6px;

  --sp:     clamp(66px, 8vw, 116px);
  --gutter: clamp(20px, 5vw, 44px);
  --maxw:   1180px;

  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* --- Shell -------------------------------------------------------------- */

body.site {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.site .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.site p { margin: 0; }

/* Display headings: lowercase, tight, with the reference's trailing period
   supplied by the markup rather than by CSS (so it is part of the content). */
.display {
  font-weight: 700;
  text-transform: lowercase;
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  font-size: clamp(42px, 7.4vw, 92px);
}
.display.sm { font-size: clamp(34px, 4.8vw, 62px); }

/* The sentence-case headline used where the reference puts a statement rather
   than a one-word title (its "Elegidos por equipos..." band). */
.statement {
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0;
}

.site h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; margin: 0; }

/* Small bold black label. `<span>` halves are separated by a "/" in markup. */
.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin: 0;
}
.label .sep { color: var(--line); margin: 0 6px; }
.on-dark .label, .on-dark .label .sep { color: #fff; }
.on-dark .label .sep { color: var(--line-dark); }

.lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--muted); }
.on-dark .lede { color: var(--text-dark); }
.accent-ground .lede { color: var(--ink-soft); }

/* --- Grounds ------------------------------------------------------------ */

.band { padding: var(--sp) 0; }
.band.on-dark { background: var(--ink); color: #fff; }
.band.on-dark h3 { color: #fff; }
.band.accent-ground { background: var(--accent); color: var(--accent-ink); }

/* --- Section headers ---------------------------------------------------- */

/* label | display | lede  - the reference's ".7fr 1.5fr 1fr" */
.sec-head {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 1fr;
  gap: clamp(20px, 4vw, 52px);
  align-items: start;
  margin-bottom: clamp(38px, 5.5vw, 72px);
}
/* statement left | lede right */
.sec-head.split { grid-template-columns: 1.15fr 0.85fr; }
/* label+heading stacked left | content right */
.sec-head.stack { grid-template-columns: 0.95fr 1.05fr; }
.sec-head.stack .label { margin-bottom: 30px; }

@media (max-width: 900px) {
  .sec-head, .sec-head.split, .sec-head.stack { grid-template-columns: 1fr; gap: 18px; }
  .sec-head.stack .label { margin-bottom: 0; }
}

/* --- Nav ---------------------------------------------------------------- */

.site-nav-inner { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; max-width: var(--maxw); margin: 0 auto;
  padding: 20px var(--gutter);
}
.site-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--text); text-decoration: none;
}
.site-brand img { width: 20px; height: 20px; }
/* The reference sets its wordmark lowercase with a trailing period. */
.site-brand::after { content: "."; }
.site-nav-links { display: flex; align-items: center; gap: 26px; }
/* Nav items carry a trailing period, as the reference's do. */
.site-nav-links a {
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
.site-nav-links a::after { content: "."; }
.site-nav-links a:hover { color: var(--muted); }
.site-nav-links a.btn-solid::after { content: none; }

@media (max-width: 860px) { .site-nav-links .hide-sm { display: none; } }

/* --- Buttons ------------------------------------------------------------ */

.btn-solid, .btn-line {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent;
}
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--ink-soft); }
.btn-line { border-color: var(--line); color: var(--text); }
.btn-line:hover { background: var(--card); }

.on-dark .btn-solid { background: #fff; color: var(--ink); }
.on-dark .btn-line { border-color: var(--line-dark); color: #fff; }
.on-dark .btn-line:hover { background: rgba(255, 255, 255, 0.08); }
.accent-ground .btn-solid { background: var(--ink); color: #fff; }

.site-nav .btn-solid { padding: 11px 26px; }

/* --- Pills -------------------------------------------------------------- */

.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  font-size: 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text);
  padding: 9px 17px; background: transparent;
}
.on-dark .pill { border-color: var(--line-dark); color: #fff; }
.accent-ground .pill { border-color: rgba(13, 13, 16, 0.28); }

/* --- Hero: centred, big display, object with floating pills -------------- */

.hero { padding: clamp(24px, 4vw, 52px) 0 clamp(60px, 8vw, 104px); text-align: center; }
.hero .label { margin-bottom: clamp(30px, 5vw, 58px); }
.hero .display { max-width: 22ch; margin: 0 auto; }

/* Stippled outline letterforms, as the reference's hero has. Falls back to
   solid ink wherever background-clip:text is unsupported. */
.stipple { color: var(--text); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .stipple {
    color: transparent;
    background-image: radial-gradient(circle at 50% 50%, var(--text) 0.9px, transparent 1px);
    background-size: 4px 4px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.6px rgba(7, 7, 9, 0.55);
  }
}

.hero-stage {
  position: relative;
  margin: clamp(30px, 5vw, 56px) auto 0;
  max-width: 760px;
}
.hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 4vw, 48px); }

/* Real brand artwork, when BRAND_HERO_IMAGE is set. Sized to match the
   abstract fallback exactly, so the floating pills sit correctly either way. */
.hero-art {
  display: block;
  width: min(340px, 62vw);
  height: auto;
  margin: 0 auto;
}

/* The central object. Abstract, so there is no asset to wait on. */
.portal { position: relative; aspect-ratio: 1; width: min(340px, 62vw); margin: 0 auto; }
.portal i { position: absolute; display: block; border: 1px solid var(--line); border-radius: var(--radius); }
.portal i:nth-child(1) { inset: 0;   transform: rotate(0deg); }
.portal i:nth-child(2) { inset: 11%; transform: rotate(7deg); }
.portal i:nth-child(3) { inset: 22%; transform: rotate(14deg); }
.portal i:nth-child(4) { inset: 33%; transform: rotate(21deg); background: var(--card); }
.portal i:nth-child(5) { inset: 44%; transform: rotate(28deg); background: var(--accent); border-color: transparent; }
.portal b {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%);
}

/* Floating two-tone pills, as the reference places around its sculpture. */
.float {
  position: absolute; display: inline-flex; align-items: baseline; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 17px; font-size: 13px; white-space: nowrap;
}
.float em { font-style: normal; color: var(--muted); }
.float b { font-weight: 700; }
.float:nth-of-type(1) { left: 0;    top: 30%; }
.float:nth-of-type(2) { right: 0;   top: 42%; }
.float:nth-of-type(3) { left: 4%;   top: 62%; }
.float:nth-of-type(4) { right: 4%;  top: 74%; }

@media (max-width: 860px) {
  .hero-stage { max-width: none; }
  .float { position: static; }
  .hero-floats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
}

/* --- Metrics row -------------------------------------------------------- */

.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(46px, 6vw, 84px);
}
.metric { padding: 34px 26px 0 0; }
.metric + .metric { border-left: 1px solid var(--line); padding-left: 26px; }
.metric b {
  display: block; font-size: clamp(38px, 5vw, 68px); font-weight: 400;
  letter-spacing: -0.05em; line-height: 1; margin-bottom: 22px;
}
.metric strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.metric span { font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 860px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 26px; }
}
@media (max-width: 460px) {
  .metrics { grid-template-columns: 1fr; }
  .metric { border-left: 0 !important; padding-left: 0 !important; }
  .metric + .metric { border-top: 1px solid var(--line); margin-top: 24px; }
}

/* --- Cell grid: number top-left, arrow top-right, text bottom ----------- */

.cells {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.cells.six { grid-template-columns: repeat(6, 1fr); }
.cell {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 26px 32px;
  min-height: 250px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
}
.cell-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cell-num { font-size: 12px; color: var(--muted); }
.cell-arrow { width: 15px; height: 15px; flex: none; opacity: .75; }
.cell h3 { margin-bottom: 12px; }
.cell p { font-size: 14.5px; line-height: 1.58; color: var(--muted); }

.on-dark .cells { border-top-color: var(--line-dark); border-left-color: var(--line-dark); }
.on-dark .cell { border-right-color: var(--line-dark); border-bottom-color: var(--line-dark); }
.on-dark .cell-num { color: var(--text-dark); }
.on-dark .cell p { color: var(--text-dark); }

.cells.six .cell { min-height: 270px; padding: 22px 20px 26px; }
.cells.six .cell h3 { font-size: 17px; }
.cells.six .cell p { font-size: 13.5px; }

@media (max-width: 1080px) { .cells.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .cells, .cells.six { grid-template-columns: 1fr; }
  .cell, .cells.six .cell { min-height: 0; gap: 30px; }
}

/* --- Slash list --------------------------------------------------------- */

.slash { list-style: none; padding: 0; margin: 0; }
.slash li { font-size: 14.5px; line-height: 1.5; color: var(--muted); padding: 5px 0; }
.slash li::before { content: "/"; color: var(--line); margin-right: 10px; }
.on-dark .slash li { color: var(--text-dark); }
.accent-ground .slash li { color: var(--ink-soft); }
.accent-ground .slash li::before { color: rgba(13, 13, 16, 0.38); }

/* --- Process rows: num | content | check -------------------------------- */

.steps { border-top: 1px solid rgba(13, 13, 16, 0.22); }
.step {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 3vw, 36px);
  padding: 26px 0;
  border-bottom: 1px solid rgba(13, 13, 16, 0.22);
  align-items: start;
}
.step-num { font-size: 12px; color: var(--ink-soft); padding-top: 6px; }
.step h3 { margin-bottom: 12px; }
.step-check { width: 17px; height: 17px; flex: none; }

@media (max-width: 620px) {
  .step { grid-template-columns: auto 1fr; }
  .step-check { display: none; }
}

/* --- FAQ ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 26px 46px 26px 0;
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 21px; font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { font-size: 15px; line-height: 1.68; color: var(--muted); padding: 0 46px 26px 0; }

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--text-dark); padding: clamp(50px, 6vw, 76px) 0 40px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.site-footer .site-brand { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer a { color: var(--text-dark); text-decoration: none; font-size: 13px; }
.site-footer a:hover { color: #fff; }
.footer-legal {
  width: 100%; border-top: 1px solid var(--line-dark);
  padding-top: 24px; font-size: 12px;
}

/* --- Legal pages -------------------------------------------------------- */

body.site .legal-page { max-width: 780px; }
body.site .legal-page h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 700; letter-spacing: -0.045em; margin-bottom: 8px; }
body.site .legal-page h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin-top: 38px; }

@media (prefers-reduced-motion: reduce) { .site * { transition: none !important; } }