/*
  K3 Ingenieria -- Inicio (index.html) page-specific styles
  Hero, "Las dos lineas" and "A quien servimos". Depends on
  tokens/base/layout/components being loaded first. Reused primitives
  (.image-placeholder, .reveal-panel/-media/-rule, .how-we-work-list)
  live in components.css since Nosotros also reuses the definition
  list. The contact-strip module once shared with Consultoria/Comercio
  was removed sitewide in a later session -- see "Contact strip" in
  CLAUDE.md if you need the history.
*/

/* =========================================================
   Hero
   Cols 1-7 text, cols 8-12 image. Not centered. Uses the shared
   .grid + .col-span-* utilities directly in the markup.
   ========================================================= */
.hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.hero-grid { align-items: center; }
.hero h1 { margin-bottom: 0.6em; }
.hero .standfirst { margin-bottom: 1.25em; }

/* "Measured drawing" motif -- a fine graph-paper grid, navy at very low
   alpha via color-mix (never teal: tokens.css reserves teal from ever
   being a background). Ties to the brand mark itself (a ruler and a
   compass -- "instruments for bounded, measured drawing", the same idea
   already written into the Nosotros brand story) rather than a generic
   decorative pattern. Fixed 28px cell size on purpose, not fluid --
   a real drafting grid doesn't stretch with the viewport.

   Lives on a ::before rather than directly on .hero-text's own
   background so it can be swept in independently of the text's
   fade/rise below -- the sweep is what it looks like to draw a grid
   with a ruler, which is the one bit of boldness this page spends (see
   the keyframes below). Scoped here only; not a shared primitive, since
   nowhere else on the site needs this. If color-mix() is unsupported,
   the whole background-image is dropped and the hero just renders as
   before -- acceptable silent degradation, matching this codebase's
   convention for other modern-CSS features (text-wrap:balance in
   base.css). */
.hero-text { position: relative; }
.hero-text::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--navy) 7%, transparent) 0 1px,
      transparent 1px 28px),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--navy) 7%, transparent) 0 1px,
      transparent 1px 28px);
  animation: hero-grid-draw 700ms var(--ease-out) both;
}

/* Single orchestrated load-in moment (per the design system's existing
   restraint: one deliberate motion moment beats fades scattered across
   every element, so this stays the only one on the page). The grid
   sweeps in left-to-right like a ruler drawing it, the text fades/rises
   under it, and the photo settles in just after -- three parts of one
   choreographed beat, not three separate effects. Fires once on page
   load, never on hover or scroll. prefers-reduced-motion is handled
   globally in base.css (zeroes animation-duration/-delay site-wide,
   including clip-path animations), so no separate branch is needed
   here. */
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-grid-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.hero-text  { animation: hero-settle 600ms var(--ease-out) both; }
.hero-media { animation: hero-settle 600ms var(--ease-out) 120ms both; }

/* Real photo, replacing the hero's former .image-placeholder box. The
   source asset is pre-cropped to 3:4, but aspect-ratio is set here too
   (rather than relying on the file's intrinsic ratio alone) so the
   layout can't shift if a future re-crop drifts slightly off-spec. */
.hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Soft navy-tinted lift, not a filter/vignette on the image itself
     (DESIGN-PLAN.md §4 bans treatments like that on imagery) -- just
     depth behind the photo so it reads as placed on the page rather
     than a flat cutout. */
  box-shadow: 0 32px 56px -24px rgba(0, 58, 80, 0.35);
}

/* =========================================================
   Las dos lineas
   Two stacked full-width rows, not side-by-side cards. Each row:
   cols 1-4 label/prose/title, cols 5-12 image. Whole row is a single
   link using the shared realce-de-panel primitives.
   ========================================================= */
.lines {
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.lines-heading {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  /* Hero's "Conozca nuestras líneas de negocio" link jumps here; the
     sticky header (components.css) would otherwise cover it on landing.
     Same value and reasoning as #main's rule there. */
  scroll-margin-top: 120px;
}

.line-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: center;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule-soft);
}
.line-row:last-child { border-bottom: 1px solid var(--rule-soft); }

.line-row-text { grid-column: 1 / 5; }
.line-row-media { grid-column: 5 / 13; }

/* Real photo, replacing both "Lineas de negocio" rows' former
   .image-placeholder boxes. Mirrors components.css's
   .image-placeholder--21-9 re-crop rule for the same reason: 21:9
   becomes a letterbox slit below 760px. */
.line-row-photo {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
@media (max-width: 759.98px) {
  .line-row-photo { aspect-ratio: 3 / 2; }
}

/* Visible "link" line inside the row. Not a real nested <a> -- the
   whole row is already one <a>, and an anchor can't contain another
   one -- so this is styled to read as a link (matches base.css's `a`
   treatment) while staying plain text; the row's own href carries it. */
.line-row-cta {
  margin: 0.75em 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration-line: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 1099.98px) {
  .line-row { grid-template-columns: 1fr; }
  .line-row-text,
  .line-row-media { grid-column: 1 / -1; }
}

/* =========================================================
   A quien servimos
   Rule-separated list, one line of prose per sector. No client logo
   wall -- there are no logos to show and none should be implied.
   ========================================================= */
/* Now the page's last section before the footer (the contact-strip
   module that used to follow it was removed), so its bottom padding
   matches the closing weight other pages give the section right
   before the footer, not the smaller mid-page value it used before. */
.who-we-serve {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.who-we-serve-heading { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.who-we-serve-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.who-we-serve-list li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.who-we-serve-list li:last-child { border-bottom: 1px solid var(--rule-soft); }

.who-we-serve-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.35em;
}
.who-we-serve-list p { margin: 0; max-width: 60ch; }