/* ============================================================
   RAIDO ELECTRONICS — LANDING
   Page components. Palette, typography and base buttons live in
   brand/tokens.css; only layout here.
   ============================================================ */

/* ---------- Page tokens ----------
   Constants used only by this stylesheet. Brand-wide tokens (--rd-*) live
   in brand/tokens.css. The fades blend photos into the black canvas. */
:root {
  --lp-fade-solid: #000;
  --lp-fade-72: rgba(0,0,0,.72);
  --lp-fade-70: rgba(0,0,0,.7);
  --lp-fade-35: rgba(0,0,0,.35);
  --lp-fade-clear: rgba(0,0,0,0);
  --lp-scrim-header: rgba(0, 0, 0, 0.92);
  --lp-scrim-modal: rgba(0, 0, 0, 0.82);

  --lp-z-base: 0;
  --lp-z-raised: 1;
  --lp-z-header: 50;
  --lp-z-skip-link: 100;
}

/* ---------- Pending content ----------
   Each gap carries data-q with the code of the CONTENT.md question that
   fills it. To see what's missing:

     grep -o 'data-q="[^"]*"' src/index.html | sort | uniq -c

   When none are left, delete this block. */
.slot {
  display: inline-block;
  padding: 0.1em 0.55em;
  border: 1px dashed var(--rd-border-loud);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-text-secondary);
  font-family: var(--rd-font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.slot::before { content: attr(data-q) " · "; color: var(--rd-accent-text); }
.slot--block { display: block; padding: var(--rd-space-3) var(--rd-space-4); max-width: var(--rd-measure); }

/* ---------- Draft ----------
   Your text, already placed but pending review: orange line on the left
   and the code of its question. Once it's final, remove the "draft" class
   (and the data-q). */
.draft { box-shadow: inset 2px 0 0 var(--rd-accent-text); padding-left: var(--rd-space-4); }
.draft::before {
  content: attr(data-q) " · draft";
  display: block;
  margin-bottom: var(--rd-space-1);
  font-family: var(--rd-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rd-accent-text);
}

/* ---------- Structure ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 88px; }  /* fixed nav height + breathing room */

.container { width: 100%; max-width: var(--rd-container); margin: 0 auto; padding: 0 var(--rd-space-6); }
.section { padding-top: var(--rd-section); }
.section__head { margin-bottom: var(--rd-space-12); }
.section__head .rd-label { display: block; margin-bottom: var(--rd-space-3); }
.section__head h2 { margin-bottom: var(--rd-space-6); }

/* Spreads words over lines of similar length. Without this, the hero H1 at
   1440px broke into four lines, leaving "DE" alone on the second one. */
h1, h2 { text-wrap: balance; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--rd-space-4); top: var(--rd-space-4); z-index: var(--lp-z-skip-link);
  padding: var(--rd-space-2) var(--rd-space-4);
  background: var(--rd-accent); color: var(--rd-on-accent);
}

.cta-row { display: flex; gap: var(--rd-space-4); flex-wrap: wrap; margin-top: var(--rd-space-8); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--lp-z-header);
  background: var(--lp-scrim-header);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rd-border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--rd-space-6); height: 64px; }
.nav__logo img { display: block; width: 120px; height: auto; }
.nav__links { display: flex; gap: var(--rd-space-6); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--rd-text-secondary); text-decoration: none;
  font-size: var(--rd-text-label); font-weight: var(--rd-weight-strong);
  text-transform: uppercase; letter-spacing: var(--rd-track-label);
}
.nav__links a:hover { color: var(--rd-text); }
.nav .rd-btn { padding: var(--rd-space-2) var(--rd-space-4); font-size: var(--rd-text-label); }
@media (max-width: 859px) { .nav__links { display: none; } }

/* Language switcher: stays visible on mobile, next to the button. */
.nav__actions { display: flex; align-items: center; gap: var(--rd-space-4); }
.lang { display: flex; list-style: none; margin: 0; padding: 0; }
.lang li + li { border-left: 1px solid var(--rd-border-loud); }
.lang a {
  display: block; padding: var(--rd-space-1) var(--rd-space-2);
  color: var(--rd-text-secondary); text-decoration: none;
  font-size: var(--rd-text-label); font-weight: var(--rd-weight-strong);
  letter-spacing: var(--rd-track-label);
}
.lang a:hover { color: var(--rd-text); }
.lang a[aria-current="page"] { color: var(--rd-accent-text); }

/* ---------- Split hero ----------
   Text on pure black on the left, photo anchored to the right and faded
   to black along its left edge. The photo doesn't sit behind the text, so
   the file isn't darkened.
     .hero--v  vertical, as shot. 42% panel.             <- IN USE
     .hero--h  horizontal, rotated 90°. 60% panel, the logo is readable. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, calc(92vh - 64px), 860px);
  display: flex;
  align-items: center;
  padding: var(--rd-space-24) 0;
  border-bottom: 1px solid var(--rd-border);
}
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--lp-z-base); }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; }

/* Vertical: the logo falls at 25–40% of the photo's width; the fade ends
   at 24%. */
.hero--v .hero__media { width: 42%; }
.hero--v .hero__media img { object-position: 50% 55%; }
.hero--v .hero__media::after { background:
    linear-gradient(90deg, var(--lp-fade-solid) 0%, var(--lp-fade-70) 12%, var(--lp-fade-clear) 24%),
    linear-gradient(0deg,  var(--lp-fade-solid) 0%, var(--lp-fade-clear) 14%); }

/* Horizontal: the logo falls at 33–49% of the width; the fade ends at 32%.
   Overlaps the headline by ~100px: worst pixel behind the text 6.1:1. */
.hero--h .hero__media { width: 60%; }
.hero--h .hero__media img { object-position: 50% 40%; }
.hero--h .hero__media::after { background:
    linear-gradient(90deg, var(--lp-fade-solid) 0%, var(--lp-fade-72) 15%, var(--lp-fade-clear) 32%),
    linear-gradient(0deg,  var(--lp-fade-solid) 0%, var(--lp-fade-clear) 14%),
    linear-gradient(180deg,var(--lp-fade-solid) 0%, var(--lp-fade-clear) 10%); }

.hero__inner { position: relative; z-index: var(--lp-z-raised); }
/* 40rem, not 36: at 64px "DE HARDWARE" measures ~585px. With 36rem (576px) it
   didn't fit and "DE" ended up alone on a line despite text-wrap: balance. */
.hero__text { max-width: 40rem; }
.hero__text p { max-width: 34rem; }

/* Narrow desktop: the photo panel shrinks so the text column doesn't run
   into it. Below 860 it already stacks. */
@media (min-width: 860px) and (max-width: 1199px) {
  .hero--v .hero__media { width: 34%; }
  .hero--h .hero__media { width: 48%; }
}
.hero .rd-label { display: block; margin-bottom: var(--rd-space-4); }
.hero h1 { margin-bottom: var(--rd-space-6); }
.hero__lead { color: var(--rd-text-secondary); font-size: 1.125rem; }

@media (max-width: 859px) {
  .hero { display: block; min-height: 0; padding: 0 0 var(--rd-space-16); }
  .hero__media { position: relative; width: 100% !important; }
  .hero--v .hero__media { aspect-ratio: 3 / 4; max-height: 78vh; }
  .hero--h .hero__media { aspect-ratio: 4 / 3; }
  .hero__media::after { background:
      linear-gradient(0deg, var(--lp-fade-solid) 0%, var(--lp-fade-clear) 35%) !important; }
  .hero__inner { margin-top: calc(-1 * var(--rd-space-12)); }
}

/* ---------- 01 Capabilities ---------- */
.cards { display: grid; gap: var(--rd-space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rd-card h3 { margin: var(--rd-space-3) 0 var(--rd-space-4); }
.capability-list { list-style: none; margin: 0 0 var(--rd-space-6); display: grid; gap: var(--rd-space-2); color: var(--rd-text-secondary); }
.capability-list li { position: relative; padding-left: var(--rd-space-4); }
.capability-list li::after { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 1px; background: var(--rd-accent-text); }
/* ---------- 02 Gallery ---------- */
.gallery-item {
  display: grid; gap: var(--rd-space-8); align-items: center;
  padding: var(--rd-space-16) 0;
  border-top: 1px solid var(--rd-border);
}
@media (min-width: 860px) {
  .gallery-item { grid-template-columns: 5fr 7fr; gap: var(--rd-space-16); }
  .gallery-item--flip { grid-template-columns: 7fr 5fr; }
  .gallery-item--flip .gallery-item__media { order: -1; }
}
.gallery-item__body h3 { margin: var(--rd-space-3) 0 var(--rd-space-6); }
.gallery-item__media img { display: block; width: 100%; height: auto; }

/* ---------- Cut ---------- */
.cut {
  position: relative; overflow: hidden;
  margin-top: var(--rd-section);
  min-height: clamp(320px, 50vh, 520px);
  display: flex; align-items: flex-end;
}
.cut picture, .cut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cut::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(0deg,   var(--lp-fade-solid) 0%, var(--lp-fade-35) 45%, var(--lp-fade-clear) 70%),
    linear-gradient(180deg, var(--lp-fade-solid) 0%, var(--lp-fade-clear) 25%); }
.cut .container { position: relative; z-index: var(--lp-z-raised); padding-bottom: var(--rd-space-12); }
.cut blockquote {
  margin: 0; max-width: 40rem;
  font-family: var(--rd-font-display); font-weight: var(--rd-weight-heading);
  font-size: var(--rd-text-h3); line-height: 1.35;
}

/* ---------- 03 Process: diagram ----------
   Three stages in a row (a column on mobile) joined by arrows. The middle one
   contains the cycle: an orange bracket that loops from the last step back to
   the first. All content is real text; arrows and bracket are decorative. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rd-space-16); }
@media (min-width: 960px) {
  .flow { grid-template-columns: 1fr 1.3fr 1fr; align-items: stretch; }
}
.flow__stage {
  position: relative;
  padding: var(--rd-space-8);
  background: var(--rd-surface-1);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
}
.flow__stage--loop { border-color: var(--rd-border-loud); }
.flow__num {
  display: block; margin-bottom: var(--rd-space-3);
  font-family: var(--rd-font-mono); font-size: var(--rd-text-sm);
  color: var(--rd-accent-text);
}
/* Smaller than the global h3: "REQUERIMIENTOS" doesn't fit in a one-third
   column at normal size and can't be broken. */
.flow__stage h3 { margin-bottom: var(--rd-space-6); font-size: 1.125rem; letter-spacing: 0.06em; hyphens: auto; }
.flow__stage > p { color: var(--rd-text-secondary); }

/* Arrow between stages: pointing down on mobile, right on desktop,
   centred in the grid gap. */
.flow__arrow {
  position: absolute;
  left: var(--rd-space-8);
  top: calc(100% + (var(--rd-space-16) - 48px) / 2);
  width: 24px; height: 48px;
  fill: none; stroke: var(--rd-border-loud); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 960px) {
  .flow__arrow {
    left: calc(100% + (var(--rd-space-16) - 24px) / 2);
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
  }
}

.flow__stage > .flow__iter {
  display: flex; align-items: center; gap: var(--rd-space-2);
  margin: 0 0 var(--rd-space-4);
  font-size: var(--rd-text-label); font-weight: var(--rd-weight-strong);
  text-transform: uppercase; letter-spacing: var(--rd-track-label);
  color: var(--rd-accent-text);
}
.flow__iter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.flow__cycle {
  position: relative;
  list-style: none; counter-reset: cyc;
  margin: 0 0 var(--rd-space-6);
  padding: 0 var(--rd-space-8) 0 0;
  display: grid; gap: var(--rd-space-2);
}
.flow__cycle li {
  counter-increment: cyc;
  display: flex; align-items: baseline; gap: var(--rd-space-3);
  padding: var(--rd-space-2) var(--rd-space-3);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
  font-size: var(--rd-text-sm);
}
.flow__cycle li::before { content: "2." counter(cyc); font-family: var(--rd-font-mono); font-size: 0.75rem; color: var(--rd-text-secondary); }
/* The bracket: runs down the right side from the first step to the last... */
.flow__cycle::after {
  content: ""; position: absolute; right: 6px; top: 1.1em; bottom: 1.1em; width: 14px;
  border: 1.5px solid var(--rd-accent-text); border-left: 0; border-radius: 0 10px 10px 0;
}
/* ...and the arrowhead, at the top, shows it loops back to the first. */
.flow__cycle::before {
  content: ""; position: absolute; right: 16px; top: calc(1.1em - 4px);
  width: 8px; height: 8px;
  border-left: 1.5px solid var(--rd-accent-text); border-bottom: 1.5px solid var(--rd-accent-text);
  transform: rotate(45deg);
}

/* ---------- 04 Why Raido ---------- */
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rd-space-8) var(--rd-space-6);
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.why li { padding-top: var(--rd-space-6); border-top: 1px solid var(--rd-border-loud); }
.why h3 { margin-bottom: var(--rd-space-4); font-size: 1.125rem; letter-spacing: 0.06em; line-height: 1.3; }
.why p { color: var(--rd-text-secondary); }

/* ---------- 05 About ---------- */
.person { display: grid; gap: var(--rd-space-8); }
@media (min-width: 860px) { .person { grid-template-columns: 4fr 7fr; gap: var(--rd-space-16); align-items: start; } }
.photo-slot {
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-surface-1);
  border: 1px dashed var(--rd-border-loud);
  border-radius: var(--rd-radius);
}
.person__body .rd-label { display: block; margin-bottom: var(--rd-space-3); }
.person__role { margin: var(--rd-space-3) 0 var(--rd-space-8); color: var(--rd-text-secondary); }

/* ---------- 06 Contact ---------- */
.contact { display: grid; gap: var(--rd-space-12); }
@media (min-width: 860px) { .contact { grid-template-columns: 5fr 7fr; gap: var(--rd-space-16); } }
.contact h2 { margin: var(--rd-space-3) 0 var(--rd-space-6); }
.form { display: grid; gap: var(--rd-space-4); }
.field label {
  display: block; margin-bottom: var(--rd-space-2);
  font-size: var(--rd-text-label); font-weight: var(--rd-weight-strong);
  text-transform: uppercase; letter-spacing: var(--rd-track-label);
  color: var(--rd-text-secondary);
}
.field .optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  padding: var(--rd-space-3) var(--rd-space-4);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border-loud);
  border-radius: var(--rd-radius);
  color: var(--rd-text);
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: transparent; }
.form .rd-btn { justify-self: start; cursor: pointer; }

.form__status { margin: 0; font-size: var(--rd-text-sm); color: var(--rd-text-secondary); }
.form__status--ok { color: var(--rd-teal); }
.form__status--error { color: var(--rd-accent-text); }

/* ---------- Form confirmation ---------- */
.modal {
  position: fixed; inset: 0; margin: auto;
  width: min(34rem, calc(100vw - 2rem));
  padding: var(--rd-space-8);
  border: 1px solid var(--rd-border-loud);
  border-radius: var(--rd-radius);
  background: var(--rd-surface-1);
  color: var(--rd-text);
}
.modal::backdrop { background: var(--lp-scrim-modal); backdrop-filter: blur(4px); }
.modal h2 { font-size: var(--rd-text-h3); margin: var(--rd-space-2) 0 var(--rd-space-4); }
.modal p { color: var(--rd-text-secondary); margin-bottom: var(--rd-space-4); }
.modal__mail { font-size: var(--rd-text-sm); }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--rd-section);
  padding: var(--rd-space-12) 0;
  border-top: 1px solid var(--rd-border);
  color: var(--rd-text-secondary); font-size: var(--rd-text-sm);
}
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--rd-space-8); }
.footer img { display: block; width: 120px; height: auto; margin-bottom: var(--rd-space-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rd-space-2); }
.footer a { color: var(--rd-text-secondary); text-decoration: none; }
.footer a:hover { color: var(--rd-text); }
/* max-width: none because tokens.css caps every <p> at 68ch, and with that
   cap the 100% flex-basis didn't push it onto its own line. */
.footer__legal { flex-basis: 100%; max-width: none; margin: var(--rd-space-4) 0 0; }

/* ============================================================
   CLEAN VIEW
   Hides the scaffolding to see the page as a visitor will:
   the dotted pending-gap boxes and the draft markers.
   Nothing was deleted from the markup: the data-q attributes are still
   there and the questions are still in CONTENT.md. To see the
   scaffolding again, comment out this whole block.
   ============================================================ */

/* Pending gaps: hidden */
.slot { display: none; }

/* Elements that only contained a gap and would be left empty */
h2:has(> .slot), h3:has(> .slot) { display: none; }
.why li:has(> h3 > .slot) { display: none; }
.photo-slot { display: none; }
.person { grid-template-columns: 1fr; }

/* Drafts: the text stays, the orange line and the tag go */
.draft { box-shadow: none; padding-left: 0; }
.draft::before { content: none; }