/* =========================================================
   COMSPAIN XXI — Design system
   Vanilla CSS. Custom properties, native nesting, clamp().
   ========================================================= */

:root {
  /* --- Color tokens --- */
  --color-red: rgb(196 24 39);
  --color-red-dark: rgb(142 16 28);
  --color-red-light: rgb(226 65 79);
  --color-gold: rgb(212 175 55);
  --color-ink: rgb(23 23 26);
  --color-ink-soft: rgb(64 64 70);
  --color-white: rgb(255 255 255);
  --color-gray-50: rgb(247 247 248);
  --color-gray-100: rgb(238 238 240);
  --color-gray-200: rgb(224 224 228);
  --color-gray-300: rgb(199 199 205);
  --color-gray-600: rgb(112 112 120);
  --color-border: rgb(228 228 231);

  /* --- Typography --- */
  --font-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Layout --- */
  --container-max: 1280px;
  --pad-inline: clamp(1rem, 4vw, 3rem);
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgb(23 23 26 / 0.08);
  --shadow-md: 0 8px 24px rgb(23 23 26 / 0.12);
  --header-h: clamp(64px, 9vw, 84px);
}

/* =========================================================
   Reset
   ========================================================= */

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

* {
  margin: 0;
}

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

body {
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* =========================================================
   Layout utilities
   ========================================================= */

[data-wrap="container"] {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

[data-section] {
  scroll-margin-top: var(--header-h);
  padding-block: clamp(3rem, 7vw, 6rem);

  & > [data-wrap="container"] > [data-section-head] {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);

    & > p[data-eyebrow] {
      color: var(--color-red);
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
    }

    & > h1,
    & > h2 {
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      margin-bottom: 0.75rem;
    }

    & > p[data-lead] {
      color: var(--color-ink-soft);
      font-size: clamp(1rem, 1.4vw, 1.15rem);
    }
  }
}

[data-section="alt"],
[data-section][data-tone="alt"] {
  background: var(--color-gray-50);
}

[data-section][data-tone="dark"] {
  background: var(--color-ink);
  color: var(--color-white);

  & > [data-wrap="container"] > [data-section-head] {
    & > p[data-eyebrow] {
      color: var(--color-red-light);
    }

    & > h2 {
      color: var(--color-white);
    }

    & > p[data-lead] {
      color: rgb(255 255 255 / 0.7);
    }
  }
}

/* Recolorable emblem (assets/img/logo-comspain.svg) via CSS mask, tinted with currentColor */
[data-emblem] {
  display: inline-block;
  flex-shrink: 0;
  aspect-ratio: 906.3 / 867.2;
  background-color: currentColor;
  -webkit-mask-image: url("../img/logo-comspain.svg");
  mask-image: url("../img/logo-comspain.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* =========================================================
   Buttons
   ========================================================= */

[data-button] {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;

  &:hover {
    transform: translateY(-1px);
  }
}

[data-button="primary"] {
  background: var(--color-red);
  color: var(--color-white);

  &:hover {
    background: var(--color-red-dark);
  }
}

[data-button="ghost-light"] {
  border-color: rgb(255 255 255 / 0.65);
  color: var(--color-white);

  &:hover {
    background: rgb(255 255 255 / 0.12);
    border-color: var(--color-white);
  }
}

[data-button="outline"] {
  border-color: var(--color-ink);
  color: var(--color-ink);

  &:hover {
    background: var(--color-ink);
    color: var(--color-white);
  }
}

/* Small "see more" link (e.g. a card's "Ver tecnología →") — usable both
   nested in a card (which only adds spacing on top of this) and standalone
   in body copy. */
[data-card-link] {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Stacks more than one [data-card-link] vertically instead of letting them
   run together inline (e.g. a card pointing to two different services). */
[data-card-links] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

/* =========================================================
   Header
   ========================================================= */

body {
  padding-top: var(--header-h);
}

[data-site-header] {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--header-h);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;

  & > [data-wrap="container"] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
  }
}

[data-logo] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.01em;
  flex-shrink: 0;

  & > span {
    background: var(--color-red);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.5em;
    border-radius: 3px;
  }

  & > em {
    font-style: normal;
    color: var(--color-ink-soft);
    font-weight: 600;
    font-size: 0.6em;
    display: none;
  }

  @media (min-width: 640px) {
    & > em {
      display: inline;
    }
  }
}

[data-primary-nav] {
  display: none;

  @media (width >= 1020px) {
    display: block;
    flex: 1;

    & > ul {
      display: flex;
      align-items: center;
      gap: clamp(0.25rem, 1.4vw, 1.1rem);
      justify-content: center;

      & > li {
        position: relative;
        display: flex;
        align-items: center;

        & > a {
          display: flex;
          align-items: center;
          gap: 0.3rem;
          padding: 0.6rem 0.15rem;
          font-weight: 600;
          font-size: 0.92rem;
          color: var(--color-ink);
          border-bottom: 2px solid transparent;
          transition: color 0.15s ease, border-color 0.15s ease;

          &:hover {
            color: var(--color-red);
          }

          /* Current page (set once per page in markup) or, on the home page,
             the section currently in view (toggled by init_scrollspy in
             main.js). Deliberately styled beyond hover's color-only change
             (adds weight + a persistent underline) so the two never read the
             same. */
          &[data-nav-active] {
            color: var(--color-red);
            font-weight: 800;
            border-bottom-color: var(--color-red);
          }
        }

        & > [data-dropdown-toggle] {
          display: grid;
          place-items: center;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: -0.15rem;
          color: var(--color-gray-600);
          transition: color 0.15s ease, transform 0.2s ease;

          & svg {
            width: 13px;
            height: 13px;
          }

          &:hover {
            color: var(--color-red);
          }

          &[aria-expanded="true"] svg {
            transform: rotate(180deg);
          }
        }

        /* Visibility is driven solely by aria-expanded (toggled on click/
           keyboard by toggle_dropdown, and on hover — with a close delay —
           by init_nav_hover_dropdowns in main.js) rather than a plain
           :hover selector, so leaving the item for the panel below it
           doesn't close the menu before the delayed close is cancelled. */
        &:has(button[aria-expanded="true"]) > [data-dropdown] {
          display: grid;
        }
      }
    }
  }
}

[data-dropdown] {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.6rem;
  min-width: 280px;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  /* Flush against the nav item's bottom edge (no margin-top): with a real
     gap, moving the pointer down from the item into the panel would cross
     empty space outside the <li>'s hover area and close the menu first. */
  margin-top: 0;

  & a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-ink-soft);

    &:hover {
      background: var(--color-gray-50);
      color: var(--color-red);
    }

    /* Current page, e.g. the technology page's own entry in its dropdown. */
    &[aria-current="page"] {
      background: rgb(196 24 39 / 0.08);
      color: var(--color-red);
      font-weight: 700;
    }
  }
}

[data-header-actions] {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  flex-shrink: 0;
}

[data-lang-select] {
  display: flex;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px;

  & a {
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 3px;
    color: var(--color-gray-600);
    text-transform: uppercase;

    &[aria-current="true"] {
      background: var(--color-ink);
      color: var(--color-white);
    }

    &:not([aria-current="true"]):hover {
      background: var(--color-gray-100);
    }
  }
}

[data-header-actions] > a[data-button] {
  display: none;

  @media (width >= 1020px) {
    display: inline-flex;
    padding: 0.6rem 1.1rem;
  }
}

[data-menu-toggle] {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;

  & span {
    position: relative;
    width: 22px;
    height: 2px;
    background: var(--color-ink);
    display: block;

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      width: 22px;
      height: 2px;
      background: var(--color-ink);
      transition: transform 0.2s ease, top 0.2s ease;
    }

    &::before {
      top: -7px;
    }

    &::after {
      top: 7px;
    }
  }

  @media (width >= 1020px) {
    display: none;
  }
}

[data-site-header][data-menu-open="true"] [data-menu-toggle] span {
  background: transparent;

  &::before {
    top: 0;
    transform: rotate(45deg);
  }

  &::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* Mobile nav panel */
@media (width <= 1019.98px) {
  [data-primary-nav] {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    padding: 1rem var(--pad-inline) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;

    & > ul > li {
      border-bottom: 1px solid var(--color-border);
      display: flex;
      align-items: center;

      & > a {
        flex: 1;
        justify-content: space-between;
        padding: 1rem 0.1rem;
        font-size: 1.05rem;
        font-weight: 700;

        &[data-nav-active] {
          color: var(--color-red);
          font-weight: 800;
        }
      }

      & > [data-dropdown-toggle] {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        color: var(--color-gray-600);
        transition: transform 0.2s ease;

        & svg {
          width: 16px;
          height: 16px;
        }

        &[aria-expanded="true"] svg {
          transform: rotate(180deg);
        }
      }
    }
  }

  [data-site-header][data-menu-open="true"] [data-primary-nav] {
    transform: translateX(0);
  }

  [data-dropdown] {
    position: static;
    transform: none;
    display: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0.5rem 0.5rem;
    min-width: 0;
  }

  [data-primary-nav] li:has(button[aria-expanded="true"]) > [data-dropdown] {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-primary-nav] a {
    transition: none;
  }
}

/* =========================================================
   Hero
   ========================================================= */

[data-hero-media] {
  position: absolute;
  inset: 0;
  z-index: 0;

  & > img,
  & > video,
  & > [data-media-placeholder] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

[data-hero-overlay] {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(23 15 16 / 0.35) 0%, rgb(23 15 16 / 0.55) 55%, rgb(12 8 8 / 0.88) 100%),
    linear-gradient(115deg, rgb(150 16 28 / 0.72) 0%, rgb(23 23 26 / 0.68) 55%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.04) 0 2px, transparent 2px 26px);
  background-blend-mode: normal, multiply, normal;
}

[data-hero] {
  scroll-margin-top: var(--header-h);
  position: relative;
  min-height: clamp(480px, 78vh, 760px);
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
  background: var(--color-ink);

  @media (width <= 768px) {
    min-height: clamp(420px, 82svh, 580px);
  }

  & > [data-wrap="container"] {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(2rem, 8vw, 5rem);
  }

  & [data-hero-tag] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.3);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
  }

  & h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.75rem);
    max-width: 18ch;
    margin-bottom: 1.1rem;
    text-wrap: balance;
  }

  & p[data-hero-lead] {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    max-width: 56ch;
    color: rgb(255 255 255 / 0.88);
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }

  & [data-hero-cta] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* Brand watermark on the empty right side of the hero photo — anchored to the
   container's own content edge (not the section/window edge), sits above the
   overlay but behind the text container, and stays subtle so it never
   competes with the headline/buttons. */
[data-emblem="hero"] {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(max(0px, (100% - var(--container-max)) / 2) + var(--pad-inline));
  transform: translateY(-50%);
  width: clamp(200px, 22vw, 340px);
  color: var(--color-white);
  opacity: 0.14;
  pointer-events: none;

  @media (width <= 768px) {
    right: auto;
    left: 50%;
    width: clamp(140px, 42vw, 200px);
    opacity: 0.07;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   Stats band
   ========================================================= */

[data-section="stats"] {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--color-ink);
  color: var(--color-white);

  & > [data-wrap="container"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    text-align: center;
  }

  & data {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--color-white);

    & > [data-count-prefix] {
      color: var(--color-red-light);
    }

    & > [data-count-to] {
      display: inline-block;
      font-variant-numeric: tabular-nums;

      &[data-count-digits="1"] {
        min-width: 1ch;
      }

      &[data-count-digits="2"] {
        min-width: 2ch;
      }

      &[data-count-digits="3"] {
        min-width: 3ch;
      }

      &[data-count-digits="4"] {
        min-width: 4ch;
      }
    }
  }

  & p {
    font-size: 0.9rem;
    color: rgb(255 255 255 / 0.7);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/* =========================================================
   Technologies
   ========================================================= */

[data-tech-group] {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);

  &:last-child {
    margin-bottom: 0;
  }

  & > h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-red);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
  }
}

[data-cards] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

article[data-card="tech"],
article[data-card="capability"],
article[data-card="challenge"] {
  scroll-margin-top: var(--header-h);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--color-white);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;

  &:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-red);
    transform: translateY(-3px);
  }

  & [data-card-icon] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: rgb(196 24 39 / 0.08);
    color: var(--color-red);
    border-radius: var(--radius);
    margin-bottom: 1rem;

    & svg {
      width: 24px;
      height: 24px;
    }
  }

  & h4 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: var(--color-ink-soft);
    font-size: 0.92rem;
    margin-bottom: 0.9rem;
  }

}

/* =========================================================
   Technology detail pages (es/tecnologias/*.html)
   ========================================================= */

/* Shorter, single-photo variant of [data-hero] used by interior pages. */
[data-hero][data-hero-size="page"] {
  min-height: clamp(340px, 46vw, 460px);

  @media (width <= 768px) {
    min-height: clamp(300px, 60svh, 420px);
  }
}

/* Constrained-width body copy, reused wherever a section needs one or more
   paragraphs wider than [data-section-head]'s 62ch (e.g. beside an image). */
[data-prose] {
  display: grid;
  gap: 1rem;
  max-width: 68ch;
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

/* Two-column media + content layout ("how it works", "applications").
   Source order sets left/right — put the <img> first or second in markup. */
[data-split] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;

  & > img,
  & > [data-media-placeholder] {
    width: 100%;
    height: 100%;
    min-height: 240px;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--radius);
  }

  @media (width <= 900px) {
    grid-template-columns: 1fr;

    & > img,
    & > [data-media-placeholder] {
      max-height: 320px;
    }
  }
}

[data-feature-list] {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

[data-feature-item] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;

  & [data-feature-icon] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: rgb(196 24 39 / 0.08);
    color: var(--color-red);
    border-radius: var(--radius);

    & svg {
      width: 18px;
      height: 18px;
    }
  }

  & p {
    padding-top: 0.35rem;
    color: var(--color-ink-soft);
    font-size: 0.95rem;
  }
}

[data-app-list] {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;

  & li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-ink-soft);
    font-size: 0.95rem;

    &::before {
      content: "";
      flex-shrink: 0;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--color-red);
    }
  }
}

/* Small subheading used to break a [data-split] copy column into labelled
   groups (e.g. "Sistemas de accionamiento", "Equipamiento habitual"). */
[data-subhead] {
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* Two-column variant of [data-feature-list] for dense technical lists
   (e.g. "Tecnologías especiales") — falls back to one column on narrow screens. */
[data-feature-list][data-cols="2"] {
  @media (width >= 700px) {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* Differentiator band (e.g. "Ensayos y control de calidad") — an accented
   card used to call out a competitive-advantage argument within a section. */
[data-highlight] {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius);
  background: rgb(196 24 39 / 0.04);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);

  & [data-highlight-icon] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-red);
    color: var(--color-red);
    border-radius: 999px;
    background: var(--color-white);

    & svg {
      width: 28px;
      height: 28px;
    }
  }

  & [data-highlight-body] {
    & p[data-eyebrow] {
      margin-bottom: 0.5rem;
    }

    & h2 {
      font-size: clamp(1.4rem, 2.6vw, 1.9rem);
      margin-bottom: 0.75rem;
    }

    & > p:not([data-eyebrow]) {
      color: var(--color-ink-soft);
      font-size: 1rem;
      max-width: 68ch;
      margin-bottom: 1.25rem;
    }
  }

  @media (width <= 640px) {
    flex-direction: column;
  }
}

/* "Capacidad" mini-fichas (equipo · dimensiones · país) on technology pages. */
[data-capacity-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  margin-top: 1.5rem;
}

[data-capacity-item] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: var(--color-white);
}

[data-capacity-equipo] {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}

[data-capacity-meta] {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-red);
}

[data-capacity-note] {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--color-gray-600);
}

/* Trailing line-item for a card grid's "and other equipment" catch-all
   (e.g. "También fabricamos: ..." below [data-cards] in "Qué fabricamos"). */
[data-tech-extra] {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-ink-soft);
  font-size: 0.95rem;

  & strong {
    color: var(--color-ink);
  }
}

/* =========================================================
   Services
   ========================================================= */

[data-services] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

article[data-card="service"] {
  scroll-margin-top: var(--header-h);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 2.8vw, 2.25rem) clamp(1.5rem, 2.4vw, 1.85rem);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

  &:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-red);
    transform: translateY(-3px);

    & [data-card-icon] {
      background: var(--color-red);
      color: var(--color-white);
    }
  }

  & [data-card-icon] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: rgb(196 24 39 / 0.08);
    color: var(--color-red);
    border-radius: var(--radius);
    margin-bottom: 1.4rem;
    transition: background-color 0.2s ease, color 0.2s ease;

    & svg {
      width: 28px;
      height: 28px;
    }
  }

  & h4 {
    font-size: 1.08rem;
    margin-bottom: 0.65rem;
  }

  & p {
    color: var(--color-ink-soft);
    font-size: 0.92rem;
  }

  & [data-card-link] {
    margin-top: 0.9rem;
  }
}

/* =========================================================
   Service detail pages (es/servicios/*.html)
   ========================================================= */

/* Enlarged opening statement below a [data-section-head] on service pages —
   the positioning message, set apart from ordinary body copy with a red
   accent rule so it reads as an editorial lede, not just another paragraph. */
[data-lead-editorial] {
  max-width: 52ch;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  padding-left: clamp(1.1rem, 2.5vw, 1.6rem);
  border-left: 4px solid var(--color-red);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Fixed column counts (rather than the sitewide [data-cards]/[data-why]
   auto-fit) for service-page grids, scoped to data-page="servicio" so the
   shared home/technology components keep their own fluid behaviour. Card
   counts on these grids should stay multiples of 3 (or at least divisible
   by 2) so no breakpoint leaves a lone card in the last row. --cards-gap
   mirrors each selector's own gap value, so data-cols="3" below (which
   switches to flex to center a ragged last row) can size its flex-basis
   around the same spacing instead of guessing at it. */
[data-page="servicio"] [data-cards] {
  --cards-gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;

  @media (width >= 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

[data-page="servicio"] [data-why] {
  --cards-gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;

  @media (width >= 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Six-phase process stepper ("Cómo trabajamos") — a horizontal line of
   connected steps on desktop, collapsing to a vertical timeline on mobile.
   Pure CSS: the connector is a pseudo-element line spanning between each
   step's number badge and the next. */
[data-process] {
  display: flex;
  gap: 0 clamp(0.5rem, 1.6vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-process-step] {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;

  &:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 26px;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
    background: var(--color-border);
  }

  & h4 {
    font-size: 0.98rem;
  }

  & p {
    color: var(--color-ink-soft);
    font-size: 0.85rem;
    max-width: 24ch;
  }
}

[data-process-num] {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 800;
  font-size: 1.1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

@media (width <= 900px) {
  [data-process] {
    flex-direction: column;
    gap: 0;
  }

  [data-process-step] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding-bottom: clamp(1.5rem, 4vw, 2rem);

    & p {
      max-width: none;
    }

    &:not(:last-child)::after {
      top: 52px;
      left: 25px;
      width: 2px;
      height: calc(100% - 26px);
    }
  }

  [data-process-num] {
    margin-right: 0.3rem;
  }
}

/* Technical-capability fiches ("Experiencia y capacidades") — grouped stat
   cards (numeric ranges) and tag-list cards (materials/equipment), styled
   to read as credible engineering data rather than a plain bullet list. */
[data-capabilities] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-capability-card] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 1.85rem);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);

  /* Shared label style for a card's heading, whichever element carries it:
     an <h3> for a tag-list card, a <table>'s own <caption> for a data card. */
  & h3,
  & caption {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-red);
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-border);
  }

  /* Sub-label for one tag group inside a merged card (e.g. "Materiales" /
     "Equipamiento" within a single "Materiales y equipamiento" card) — a
     smaller, tighter [data-subhead] than its standalone use elsewhere. */
  & [data-subhead] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
    margin-top: 1.1rem;
    margin-bottom: 0.5rem;

    &:first-of-type {
      margin-top: 0;
    }
  }
}

/* Horizontal scroll safety net for [data-capability-table] on narrow
   screens — a no-op at the current 2-column width, but keeps any wider
   capability table added on future service pages from overflowing. */
[data-table-scroll] {
  overflow-x: auto;
}

[data-capability-table] {
  width: 100%;
  border-collapse: collapse;

  & thead th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    text-align: left;
    padding-bottom: 0.5rem;

    &:last-child {
      text-align: right;
    }
  }

  & tbody tr {
    border-top: 1px solid var(--color-border);
  }

  & th[scope="row"] {
    text-align: left;
    font-weight: 400;
    color: var(--color-ink-soft);
    font-size: 0.85rem;
    padding: 0.55rem 0;
  }

  & td {
    text-align: right;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-ink);
    padding: 0.55rem 0;
    white-space: nowrap;
  }
}

[data-capability-tags] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  & li {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-ink-soft);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
  }
}

/* Column-count modifiers for [data-page="servicio"] [data-cards] grids whose
   card count isn't a multiple of 3 (the default's desktop column count) —
   applied on the grid element itself as data-cols="2" or data-cols="3".
   data-cols="2": counts divisible by 2 but not 3 (e.g. 4 cards) — stay at
   2 columns instead of stepping to 3 at desktop. */
[data-page="servicio"] [data-cards][data-cols="2"] {
  @media (width >= 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* data-cols="3": counts that don't fill a 3-column grid evenly (3 itself,
   or a ragged case like 5 = 3+2). Single column through tablet (skipping
   the uneven 2-column stop), then at desktop switches from grid to flex:
   grid's justify-content can't center a partial last row once an earlier
   row already spans every track, but flex-wrap + justify-content: center
   can, since flex doesn't lock siblings into shared column tracks. Exactly
   full rows (3, 6, 9…) render identically either way. */
[data-page="servicio"] [data-cards][data-cols="3"],
[data-page="servicio"] [data-why][data-cols="3"] {
  @media (width >= 640px) and (width < 1024px) {
    grid-template-columns: 1fr;
  }

  @media (width >= 1024px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    & > * {
      flex: 0 1 calc((100% - 2 * var(--cards-gap)) / 3);
    }
  }
}

/* Compact bordered callout wrapping a reused [data-certification] block
   (e.g. the ISO 9001 card repeated on a service page) — same red-accent
   language as [data-lead-editorial]/[data-highlight], scaled down to a
   single card instead of a full section. */
[data-cert-compact] {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-white);
  margin-top: clamp(2rem, 4vw, 2.5rem);

  & h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    margin-bottom: 1rem;
  }
}

/* Five-checkpoint quality-gate stepper ("Cinco puertas de calidad") —
   deliberately distinct from [data-process]: a checkmark badge per gate
   instead of a typed number, a sequence label generated by a CSS counter,
   and a thicker red connector instead of a thin neutral line. Reuses the
   [data-reveal]/[data-reveal-item] scroll-reveal system, same as
   [data-process] — no separate IntersectionObserver. */
[data-quality-gates] {
  display: flex;
  gap: 0 clamp(0.5rem, 1.6vw, 1.25rem);
  counter-reset: gate;
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-quality-gate] {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  counter-increment: gate;

  &:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 26px;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 3px;
    background: var(--color-red);
    opacity: 0.25;
  }

  & h4 {
    font-size: 0.98rem;
  }

  & [data-gate-desc] {
    color: var(--color-ink-soft);
    font-size: 0.85rem;
    max-width: 24ch;
  }
}

[data-gate-icon] {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--color-white);
  color: var(--color-red);
  border: 2px solid var(--color-red);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);

  & svg {
    width: 24px;
    height: 24px;
  }
}

[data-gate-num]::before {
  content: "Puerta " counter(gate);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 0.3rem;
}

@media (width <= 900px) {
  [data-quality-gates] {
    flex-direction: column;
    gap: 0;
  }

  [data-quality-gate] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding-bottom: clamp(1.5rem, 4vw, 2rem);

    & [data-gate-desc] {
      max-width: none;
    }

    &:not(:last-child)::after {
      top: 52px;
      left: 25px;
      width: 3px;
      height: calc(100% - 26px);
    }
  }

  [data-gate-icon] {
    margin-right: 0.3rem;
  }
}

/* Component specification table ("Componentes fabricados para durar") — a
   normal <table> from 768px up (first column bold via <th scope="row">),
   collapsing below that into one stacked card per <tr> with each <td>'s
   own column header restated via ::before/attr(data-label), so nothing
   scrolls horizontally on a phone. */
[data-spec-table] {
  width: 100%;
  border-collapse: collapse;

  & caption {
    text-align: left;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 1rem;
  }

  & thead th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    padding: 0 0.75rem 0.6rem 0;
    border-bottom: 2px solid var(--color-border);
  }

  & tbody th[scope="row"],
  & tbody td {
    text-align: left;
    vertical-align: top;
    padding: 0.85rem 0.75rem 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
    color: var(--color-ink-soft);
  }

  & tbody th[scope="row"] {
    font-weight: 800;
    color: var(--color-ink);
    white-space: nowrap;
  }
}

@media (width <= 767.98px) {
  [data-spec-table] {
    & thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    & tbody {
      display: block;
    }

    & tbody tr {
      display: block;
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
      margin-bottom: 1rem;
      background: var(--color-white);
      box-shadow: var(--shadow-sm);
    }

    & tbody th[scope="row"] {
      display: block;
      font-size: 1rem;
      padding: 0 0 0.6rem;
      margin-bottom: 0.6rem;
      border-bottom: 1px solid var(--color-border);
    }

    & tbody td {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      padding: 0.4rem 0;
      border-bottom: none;

      &::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--color-gray-600);
      }
    }
  }
}

/* Three "assistance modes" cards ("Cómo le damos soporte") — alternatives,
   not sequential steps, so unlike [data-process]/[data-quality-gates] there
   is no numbering and no solid connecting bar: a dashed "o" divider badge
   sits between cards instead, reading as "pick one" rather than "do these
   in order". */
[data-assistance-modes] {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-assistance-mode] {
  flex: 1 1 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 1.85rem);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);

  & [data-card-icon] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: rgb(196 24 39 / 0.08);
    color: var(--color-red);
    border-radius: var(--radius);
    margin-bottom: 1.1rem;

    & svg {
      width: 26px;
      height: 26px;
    }
  }

  & h4 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: var(--color-ink-soft);
    font-size: 0.92rem;
  }
}

[data-assistance-divider] {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px dashed var(--color-red);
  color: var(--color-red);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--color-white);
}

@media (width <= 900px) {
  [data-assistance-modes] {
    flex-direction: column;
  }
}

/* Single-figure variant of the home's [data-section="stats"] band (e.g. a
   lone "+40 países" instead of the home's four-figure row) — same dark
   band and counter markup/JS, centered, with a link below the figure. */
[data-section="stats"][data-stats-single] > [data-wrap="container"] {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

[data-stats-single-item] {
  max-width: 40ch;

  & a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    color: var(--color-red-light);
    font-weight: 700;
    font-size: 0.95rem;

    &:hover {
      color: var(--color-white);
    }
  }
}

/* Short "see also" line below a [data-why]/[data-cards] grid, pointing to
   sibling service pages that cover an adjacent need instead of adding
   another card to the grid itself. */
[data-related-services-note] {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

/* Two-column decision comparison ("Sustituir o modernizar") — parallel
   decision criteria, not sequential steps or interchangeable alternatives,
   so unlike [data-process]/[data-assistance-modes] there's no numbering and
   no "o" divider badge: a vertical rule splits the columns on desktop
   (collapsing to a horizontal one when stacked on mobile), and each column
   carries its own top-accent color/background so it reads as "compare these
   two paths" rather than "pick one of several". */
[data-decision-compare] {
  display: flex;
  margin-top: clamp(2rem, 4vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

[data-decision-col] {
  flex: 1 1 0;
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  border-top: 4px solid var(--color-ink);
  background: var(--color-gray-50);

  & h3 {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--color-ink);
  }

  & ul {
    display: grid;
    gap: 0.75rem;
    list-style: none;
  }

  & li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.6em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
    }
  }

  &:first-child {
    border-top-color: var(--color-red);
    border-right: 1px solid var(--color-border);
    background: var(--color-white);
  }
}

@media (width <= 900px) {
  [data-decision-compare] {
    flex-direction: column;
  }

  [data-decision-col]:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* Single soft-background note paragraph (e.g. "Cuando el tiempo importa" on
   Repuestos) — one sentence that deserves more weight than body copy but
   doesn't need a card, an icon or a grid. */
[data-note] {
  max-width: 68ch;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.25rem, 2.4vw, 1.6rem) clamp(1.5rem, 2.8vw, 1.85rem);
  background: var(--color-gray-50);
  border-radius: var(--radius);
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Two-photo caption gallery (e.g. "Repuestos fabricados por COMSPAIN" on
   Repuestos) — for project photos that don't have a proyectos.json entry
   yet, so the full [data-projects] card component doesn't apply. Plain
   figure/figcaption pairs, side by side from tablet up. */
[data-photo-pair] {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);

  @media (width >= 700px) {
    grid-template-columns: repeat(2, 1fr);
  }

  & figure {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
  }

  & img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  & figcaption {
    padding: 0.85rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-ink-soft);
  }
}

/* =========================================================
   Sectors
   ========================================================= */

[data-sectors] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}

article[data-card="sector"],
a[data-card="sector"] {
  scroll-margin-top: var(--header-h);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 140px;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background: linear-gradient(135deg, rgb(90 90 96), rgb(40 40 44));
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  /* Only the linked (built) sector pages get the lift-on-hover cue —
     unbuilt sectors stay an inert article, so nothing here suggests they're
     clickable when they aren't yet. */
  &:is(a):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  & > img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgb(23 23 26 / 0.15), rgb(23 23 26 / 0.85));
  }

  & > div {
    position: relative;
    z-index: 2;
    padding: 1rem;
  }

  &[data-featured="true"] {
    grid-column: span 2;
    min-height: 170px;

    &::after {
      background: linear-gradient(160deg, rgb(196 24 39 / 0.6), rgb(60 10 16 / 0.88));
    }
  }

  & h4 {
    font-size: 1rem;
  }

  & p {
    font-size: 0.78rem;
    color: rgb(255 255 255 / 0.75);
    margin-top: 0.2rem;
  }
}

/* =========================================================
   Sector detail pages (es/sectores/*.html)

   Deliberately NOT sharing components with "Service detail pages": Sectors
   answer "who do we serve and why do we fit their industry", Services
   answer "what does COMSPAIN do" — six near-identical templates was the
   right call for the latter, wrong for the former. Only header, footer,
   the final CTA and [data-card="project"] are shared with the rest of the
   site; everything below is specific to sector pages.
   ========================================================= */

/* Horizontal process diagram ("Nuestros equipos en el proceso de
   granulación") — this sector template's signature element, so it must
   read as visually distinct from the Services stepper ([data-process]):
   larger outlined icon nodes instead of solid numbered badges, and a
   two-layer connector (a static neutral track plus a red line that grows
   in on scroll) instead of a static grey rule. Reuses the sitewide
   [data-reveal]/[data-reveal-item] system for the trigger — no new
   IntersectionObserver, no SVG, just a CSS width/height transition. */
[data-process-flow] {
  display: flex;
  gap: 0 clamp(0.5rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-process-flow-step] {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;

  /* Static track: always visible, so the layout never looks unfinished
     before the reveal fires (e.g. reduced-motion, or a slow observer). */
  &:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 32px;
    left: calc(50% + 34px);
    width: calc(100% - 68px);
    height: 3px;
    background: var(--color-border);
  }

  /* Animated overlay: red, grows from 0 to full width once revealed. */
  &:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 32px;
    left: calc(50% + 34px);
    width: 0;
    height: 3px;
    background: var(--color-red);
    transition: width 1.1s ease;
  }

  &[data-revealed="true"]:not(:last-child)::before {
    width: calc(100% - 68px);
  }

  & h4 {
    font-size: 1.02rem;
  }

  & p {
    color: var(--color-ink-soft);
    font-size: 0.85rem;
    max-width: 22ch;
  }
}

[data-process-flow-node] {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--color-white);
  color: var(--color-red);
  border: 2px solid var(--color-red);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);

  & svg {
    width: 28px;
    height: 28px;
  }
}

[data-process-flow-num] {
  position: absolute;
  z-index: 3;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 999px;
  border: 2px solid var(--color-white);
}

@media (width <= 900px) {
  [data-process-flow] {
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem) 0;
  }

  [data-process-flow-step] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;

    &:not(:last-child)::after,
    &:not(:last-child)::before {
      top: 68px;
      left: 32px;
      width: 3px;
      height: calc(100% - 4px);
    }

    &:not(:last-child)::before {
      width: 3px;
      height: 0;
    }

    &[data-revealed="true"]:not(:last-child)::before {
      width: 3px;
      height: calc(100% - 4px);
    }

    & p {
      max-width: none;
    }
  }

  [data-process-flow-node] {
    margin-right: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-process-flow-step]:not(:last-child)::before {
    transition: none;
    width: calc(100% - 68px);
  }

  @media (width <= 900px) {
    [data-process-flow-step]:not(:last-child)::before {
      width: 3px;
      height: calc(100% - 4px);
    }
  }
}

/* Sector "challenge" cards ("Lo que exige tratar fertilizantes") — join the
   shared tech/capability card shell above (border, padding, icon-title-text
   layout) for the base look, but override with their own more pronounced
   hover here: a stronger lift and shadow plus a faint red wash, versus
   [data-card="capability"]'s subtler border-colour-and-shadow hover on
   Service pages. Client challenges, not COMSPAIN capabilities, so the
   wording stays distinct too. */
article[data-card="challenge"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgb(23 23 26 / 0.16);
  border-color: var(--color-red);
  background: rgb(196 24 39 / 0.03);
}

/* Lightweight cross-link list ("Equipos que usamos en fertilizantes") — a
   navigation shortcut to existing technology pages, not new content, so it
   stays a plain list rather than another card grid. */
[data-equipment-links] {
  display: grid;
  gap: 0.1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
}

[data-equipment-link] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--color-ink);
  transition: color 0.2s ease, padding-left 0.2s ease;

  & svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-red);
    transition: transform 0.2s ease;
  }

  &:hover {
    color: var(--color-red);
    padding-left: 0.5rem;

    & svg {
      transform: translateX(4px);
    }
  }
}

/* Dense product tag cloud ("Algunos de los productos que hemos tratado" on
   Química) — this sector's signature element, distinct from Fertilizantes'
   process diagram. Deliberately NOT a word cloud (no varied font sizes) and
   NOT [data-card]-style tiles: uniform, compact chips that read as a quick
   technical reference list rather than a sales grid. */
[data-tag-cloud] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

[data-tag] {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  transition: border-color 0.15s ease, color 0.15s ease;

  &:hover {
    border-color: var(--color-red);
    color: var(--color-red);
  }
}

/* Hardness/abrasiveness scale ("No todos los minerales desgastan igual" on
   Minerales) — this sector's signature element, a third distinct pattern
   after Fertilizantes' process diagram and Química's flat tag cloud: rows
   of proportional bars carrying a real numeric value, growing in from 0 on
   scroll via the shared [data-reveal]/[data-reveal-item] system (each
   item's target width is set per-row with the --hardness-pct custom
   property rather than a fixed CSS value). */
[data-hardness-scale] {
  display: grid;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-hardness-item] {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);

  & [data-hardness-name] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-ink);
  }

  & [data-hardness-value] {
    grid-column: 2;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-ink-soft);
  }
}

[data-hardness-track] {
  grid-column: 2;
  height: 10px;
  border-radius: 999px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

[data-hardness-bar] {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-red-light), var(--color-red));
  transition: width 1.1s ease;
}

[data-hardness-item][data-revealed="true"] [data-hardness-bar] {
  width: var(--hardness-pct);
}

[data-hardness-note] {
  max-width: 68ch;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}

@media (width <= 560px) {
  [data-hardness-item] {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  [data-hardness-track],
  [data-hardness-item] [data-hardness-value] {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-hardness-bar] {
    transition: none;
    width: var(--hardness-pct);
  }
}

/* Before/after transformation gauge ("El secado marca la diferencia" on
   Biomasa) — a fourth distinct sector-signature pattern (process diagram on
   Fertilizantes, flat tag cloud on Química, proportional bar list on
   Minerales): exactly two vertical indicators, since there's only a single
   transformation to show, not a set to compare. Reuses [data-reveal] for
   the trigger; the "después" item is the group's 2nd [data-reveal-item], so
   it inherits that extra transition-delay for free and reads as following
   the "antes" item rather than appearing simultaneously. */
[data-transform-gauge] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-transform-item] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: clamp(150px, 24vw, 210px);
}

[data-transform-track] {
  display: flex;
  align-items: flex-end;
  width: 72px;
  height: 220px;
  border-radius: var(--radius);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

[data-transform-fill] {
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--color-red-light), var(--color-red));
  transition: height 1.1s ease;
}

[data-transform-item][data-revealed="true"] [data-transform-fill] {
  height: var(--fill-pct);
}

[data-transform-value] {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--color-ink);
}

[data-transform-label] {
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-ink-soft);

  & strong {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    color: var(--color-red);
    margin-bottom: 0.3rem;
  }
}

[data-transform-arrow] {
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 100px;
  color: var(--color-red);

  & svg {
    width: 30px;
    height: 30px;
  }
}

[data-transform-note] {
  max-width: 68ch;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}

@media (width <= 640px) {
  [data-transform-gauge] {
    flex-direction: column;
    align-items: center;
  }

  [data-transform-arrow] {
    margin-bottom: 0;
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-transform-fill] {
    transition: none;
    height: var(--fill-pct);
  }
}

/* Thermal-zone gradient ("Un horno, varias temperaturas" on Cerámica) — a
   fifth distinct sector-signature pattern: unlike Minerales (bar length) or
   Biomasa (two separate values), the primary visual variable here is
   COLOR across four contiguous zones of one continuous process. Each
   zone's colour wipes in independently (left-to-right on desktop, top-to-
   bottom on mobile) via its own [data-reveal-item], so the whole bar
   "heats up" progressively rather than appearing all at once. */
[data-thermal-zones] {
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-thermal-zone] {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 230px;
  color: var(--color-white);

  & p {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgb(255 255 255 / 0.9);
  }
}

[data-thermal-zone-bg] {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s ease;
}

[data-thermal-zone][data-revealed="true"] [data-thermal-zone-bg] {
  transform: scaleX(1);
}

[data-thermal-zone="secado"] [data-thermal-zone-bg] {
  background: linear-gradient(135deg, #2f6fa8, #4a95cf);
}

[data-thermal-zone="precalentamiento"] [data-thermal-zone-bg] {
  background: linear-gradient(135deg, #4a95cf, #e8843c);
}

[data-thermal-zone="calcinacion"] [data-thermal-zone-bg] {
  background: linear-gradient(135deg, #e8843c, var(--color-red));
}

[data-thermal-zone="enfriamiento"] [data-thermal-zone-bg] {
  background: linear-gradient(135deg, var(--color-red), #4a95cf);
}

[data-thermal-zone-content] {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1rem, 2vw, 1.4rem);
}

[data-thermal-zone-name] {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

[data-thermal-temp] {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: var(--color-white);
}

[data-thermal-note] {
  max-width: 68ch;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}

@media (width <= 760px) {
  [data-thermal-zones] {
    flex-direction: column;
  }

  [data-thermal-zone] {
    flex: 0 0 auto;
    min-height: 140px;
  }

  [data-thermal-zone-bg] {
    transform: scaleY(0);
    transform-origin: top;
  }

  [data-thermal-zone][data-revealed="true"] [data-thermal-zone-bg] {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-thermal-zone-bg] {
    transition: none;
    transform: none;
  }
}

/* Certification-style badge row ("Diseño conforme a los criterios EHEDG" on
   Alimentación) — a sixth distinct sector-signature pattern, and the only
   one styled as a seal/medallion rather than a card, list, bar or gradient:
   double-ring circular badge instead of [data-card-icon]'s square icon box,
   no card border/background around the item, content centered rather than
   left-aligned. Reads as "criteria met", not "feature offered". */
[data-badge-row] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

[data-badge] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;

  & h4 {
    font-size: 0.95rem;
  }

  & p {
    font-size: 0.82rem;
    color: var(--color-ink-soft);
    max-width: 22ch;
  }
}

[data-badge-seal] {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 3px solid var(--color-red);
  border-radius: 999px;
  color: var(--color-red);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);

  &::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgb(196 24 39 / 0.3);
    border-radius: inherit;
  }

  & svg {
    width: 32px;
    height: 32px;
  }
}

@media (width <= 700px) {
  [data-badge-row] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Airy product list ("Algunos de los productos que hemos tratado" on
   Alimentación) — deliberately not [data-tag-cloud] (Química's dense,
   bordered chips): larger text, no chip background/border, generous gaps,
   so this page's more consumer-facing tone comes through even in a plain
   product list. */
[data-product-list-airy] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}

[data-product-list-airy] li {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 700;
  color: var(--color-ink);
}

/* =========================================================
   Why COMSPAIN
   ========================================================= */

[data-why] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}

article[data-card="why"],
article[data-card="audience"] {
  & [data-card-icon] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-red);
    color: var(--color-red);
    border-radius: 999px;
    margin-bottom: 1.1rem;

    & svg {
      width: 26px;
      height: 26px;
    }
  }

  & h4 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  & p {
    font-size: 0.92rem;
    color: var(--color-ink-soft);
  }
}

/* =========================================================
   Recognitions
   ========================================================= */

[data-awards] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

article[data-card="award"] {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem) 1.25rem;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;

  & [data-card-icon] {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    color: var(--color-gold);
    transition: filter 0.25s ease;

    & svg {
      width: 30px;
      height: 30px;
    }
  }

  & h4 {
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.4rem;
  }

  & p {
    color: rgb(255 255 255 / 0.7);
    font-size: 0.88rem;
  }

  &:hover {
    transform: translateY(-6px);
    border-color: rgb(255 255 255 / 0.3);
    background: rgb(255 255 255 / 0.08);

    & [data-card-icon] {
      filter: drop-shadow(0 0 8px rgb(212 175 55 / 0.6));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  article[data-card="award"] {
    transition: none;

    &:hover {
      transform: none;
    }
  }
}

/* =========================================================
   Certification
   ========================================================= */

[data-certification] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 2.5rem);

  & [data-cert-content] {
    flex: 1 1 320px;

    & p {
      max-width: 60ch;
      color: var(--color-ink-soft);
      font-size: 1.05rem;
      margin-bottom: 1rem;
    }
  }
}

[data-cert-badge] {
  flex-shrink: 0;
  width: auto;
  height: 100px;
}

/* =========================================================
   References — audiences & projects
   ========================================================= */

[data-section-head="secondary"] {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

[data-audiences] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}

[data-projects] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

[data-projects][data-projects-visible] {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

article[data-card="project"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;

  & [data-project-open] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background: var(--color-gray-50);
    cursor: pointer;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    &:hover img,
    &:focus-visible img {
      transform: scale(1.04);
    }
  }

  & [data-project-body] {
    padding: clamp(1.1rem, 2vw, 1.5rem);
  }

  & [data-project-meta] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 0.5rem;
  }

  & h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  & p:not([data-project-meta]) {
    font-size: 0.9rem;
    color: var(--color-ink-soft);
  }
}

/* =========================================================
   World map
   ========================================================= */

[data-world-map] {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-gray-50);

  & svg {
    display: block;
    width: 100%;
    height: auto;
  }

  & [data-map-base] path {
    fill: var(--color-gray-200);
    stroke: var(--color-gray-50);
    stroke-width: 0.3;
  }

  & [data-map-active] path {
    fill: var(--color-red);
    stroke: var(--color-white);
    stroke-width: 0.4;
    cursor: pointer;
    transition: fill 0.15s ease;

    &[data-highlighted] {
      fill: var(--color-red-dark);
    }
  }
}

[data-countries-groups] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}

[data-country-group-title] {
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);

  & [data-country-group-count] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: var(--color-gray-600);
  }
}

[data-country-group-list] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

[data-country-item] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline: -0.3rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  transition: background 0.15s ease, color 0.15s ease;

  & [data-country-flag] {
    font-size: 1rem;
    line-height: 1;
  }

  &[data-highlighted] {
    background: var(--color-gray-100);
    color: var(--color-ink);
  }
}

/* =========================================================
   Catalogs
   ========================================================= */

[data-catalogs] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);

  @media (width <= 900px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width <= 560px) {
    grid-template-columns: 1fr;
  }
}

[data-card="catalog"] {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    border-color: var(--color-red);
    box-shadow: var(--shadow-sm);
  }

  & [data-card-icon] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--color-gray-50);
    border-radius: var(--radius);
    color: var(--color-red);

    & svg {
      width: 22px;
      height: 22px;
    }
  }

  & h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
  }

  & p {
    font-size: 0.78rem;
    color: var(--color-gray-600);
  }
}

[data-catalogs-extra],
[data-projects-extra],
[data-countries-extra] {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;

  & > [data-catalogs],
  & > [data-projects],
  & > [data-countries-groups] {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  &[data-expanded="true"] {
    grid-template-rows: 1fr;
    margin-top: clamp(1.5rem, 3vw, 2rem);

    & > [data-catalogs],
    & > [data-projects],
    & > [data-countries-groups] {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.15s;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-catalogs-extra],
  [data-catalogs-extra] > [data-catalogs],
  [data-projects-extra],
  [data-projects-extra] > [data-projects],
  [data-countries-extra],
  [data-countries-extra] > [data-countries-groups] {
    transition: none;
  }
}

[data-catalogs-more],
[data-projects-more],
[data-countries-more] {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

/* =========================================================
   FAQ
   ========================================================= */

[data-faq] {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(100%, 320px), 1fr));
  gap: 0.75rem;
  align-items: start;
  max-width: var(--container-max);
}

@media (width <= 768px) {
  [data-faq] {
    grid-template-columns: 1fr;
  }
}

[data-faq-item] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;

  & summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: "+";
      flex-shrink: 0;
      color: var(--color-red);
      font-size: 1.3rem;
      font-weight: 400;
      transition: transform 0.2s ease;
    }
  }

  & p {
    margin-top: 0.75rem;
    color: var(--color-ink-soft);
    font-size: 0.95rem;
  }

  &[open] summary::after {
    transform: rotate(45deg);
  }
}

/* =========================================================
   CTA band
   ========================================================= */

[data-section="cta"] {
  position: relative;
  overflow: hidden;
  background: var(--color-red);
  color: var(--color-white);

  & > [data-wrap="container"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  & [data-cta-content] {
    max-width: 56ch;
  }

  & h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin-bottom: 0.75rem;
  }

  & p {
    color: rgb(255 255 255 / 0.9);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
  }

  & [data-hero-cta] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  & [data-button="primary"] {
    background: var(--color-white);
    color: var(--color-red);

    &:hover {
      background: var(--color-gray-100);
    }
  }
}

/* Solid emblem beside the CTA copy — a real flex column contained within the
   container's own padding, so it can never overlap the heading/buttons or
   overflow past the content edge. Below 768px it drops out of flow and
   becomes a faint centered backdrop instead, keeping the copy fully legible. */
[data-emblem="stamp"] {
  flex-shrink: 0;
  width: clamp(140px, 14vw, 220px);
  color: var(--color-white);
}

@media (width <= 768px) {
  [data-section="cta"] {
    text-align: center;

    & > [data-wrap="container"] {
      position: relative;
      z-index: 1;
    }

    & [data-cta-content] {
      margin-inline: auto;
    }

    & [data-hero-cta] {
      justify-content: center;
    }
  }

  [data-emblem="stamp"] {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: clamp(160px, 55vw, 260px);
    margin: 0;
    opacity: 0.08;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}

/* =========================================================
   Footer
   ========================================================= */

[data-site-footer] {
  background: var(--color-ink);
  color: rgb(255 255 255 / 0.82);

  & [data-footer-top] {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(min(100%, 200px), 1fr));
    gap: clamp(2rem, 4vw, 3rem);
  }

  & [data-logo] > span {
    background: var(--color-white);
    color: var(--color-red);
  }

  & [data-logo] {
    color: var(--color-white);
    margin-bottom: 0.9rem;
  }

  & [data-footer-about] p {
    font-size: 0.88rem;
    color: rgb(255 255 255 / 0.6);
    max-width: 34ch;
  }

  & h5 {
    color: var(--color-white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
  }

  & address {
    font-style: normal;
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgb(255 255 255 / 0.65);
    margin-bottom: 1.1rem;

    & strong {
      display: block;
      color: var(--color-white);
      font-size: 0.9rem;
      margin-bottom: 0.15rem;
    }
  }

  & [data-footer-links] li {
    margin-bottom: 0.6rem;

    & a {
      font-size: 0.88rem;
      color: rgb(255 255 255 / 0.65);

      &:hover {
        color: var(--color-white);
      }
    }
  }

  & [data-footer-bottom] {
    border-top: 1px solid rgb(255 255 255 / 0.12);
    padding-block: 1.25rem;

    & > [data-wrap="container"] {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.75rem;
      font-size: 0.78rem;
      color: rgb(255 255 255 / 0.5);

      & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;

        & a:hover {
          color: var(--color-white);
        }
      }
    }
  }

  & [data-footer-cert] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: rgb(255 255 255 / 0.5);
  }

  & [data-cert-mark] {
    flex-shrink: 0;
    width: auto;
    height: 22px;
  }
}

@media (width <= 900px) {
  [data-site-footer] [data-footer-top] {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Map
   ========================================================= */

[data-map] {
  width: 100%;
  height: clamp(360px, 45vw, 520px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);

  & iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* =========================================================
   Contact form
   ========================================================= */

[data-contact-grid] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (width <= 768px) {
  [data-contact-grid] {
    grid-template-columns: 1fr;
  }

  [data-map] {
    height: 320px;
  }
}

[data-contact-form] {
  display: grid;
  gap: 1.1rem;
}

[data-form-row] {
  display: grid;
  gap: 0.4rem;

  & label {
    font-size: 0.88rem;
    font-weight: 700;
  }

  & input,
  & textarea {
    font: inherit;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-ink);

    &:focus {
      outline: 2px solid var(--color-red);
      outline-offset: 1px;
      border-color: var(--color-red);
    }
  }

  & textarea {
    resize: vertical;
    min-height: 120px;
  }
}

[data-honeypot] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[data-form-note] {
  font-size: 0.8rem;
  color: var(--color-gray-600);
}

[data-form-status] {
  font-size: 0.9rem;
  font-weight: 600;

  &[data-state="error"] {
    color: var(--color-red);
  }

  &[data-state="ok"] {
    color: rgb(22 130 60);
  }
}

/* =========================================================
   Scroll reveal
   ========================================================= */

[data-reveal-item] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal-item][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-item]:nth-child(2) {
  transition-delay: 0.1s;
}

[data-reveal-item]:nth-child(3) {
  transition-delay: 0.2s;
}

[data-reveal-item]:nth-child(4) {
  transition-delay: 0.3s;
}

[data-reveal-item]:nth-child(5) {
  transition-delay: 0.4s;
}

[data-reveal-item]:nth-child(6) {
  transition-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-item] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Lightbox
   ========================================================= */

html[data-lightbox-open] {
  overflow: hidden;
}

[data-lightbox] {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(10 10 12 / 0.9);

  &[hidden] {
    display: none;
  }
}

[data-lightbox-dialog] {
  position: relative;
  width: 100%;
  max-width: 900px;
}

[data-lightbox-close] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgb(10 10 12 / 0.55);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
  transition: background 0.2s ease;

  & svg {
    width: 20px;
    height: 20px;
  }

  &:hover {
    background: rgb(10 10 12 / 0.75);
  }
}

[data-lightbox-content] {
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius);
  background: var(--color-white);
}

[data-lightbox-media] {
  position: relative;
  background: rgb(0 0 0 / 0.35);

  & img {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }
}

[data-lightbox][data-lightbox-multiple="true"] [data-lightbox-image] {
  cursor: pointer;
}

[data-lightbox-prev],
[data-lightbox-next] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease;

  & svg {
    width: 22px;
    height: 22px;
  }

  &:hover {
    background: rgb(255 255 255 / 0.3);
  }

  &[hidden] {
    display: none;
  }
}

[data-lightbox-prev] {
  left: 0.75rem;
}

[data-lightbox-next] {
  right: 0.75rem;
}

[data-lightbox-panel] {
  padding: clamp(1.25rem, 4vw, 2rem);
}

[data-lightbox-caption] {
  max-width: 65ch;
  margin-inline: auto;
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.7;
}

[data-lightbox-counter] {
  max-width: 65ch;
  margin: 0.75rem auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (width <= 640px) {
  [data-lightbox-media] img {
    max-height: 55vh;
  }
}

/* =========================================================
   Misc
   ========================================================= */

[data-placeholder] {
  outline: 1px dashed rgb(196 24 39 / 0.5);
  outline-offset: 3px;
  position: relative;
}

/* Sober stand-in for a missing photo (see [data-hero-media] and [data-split]
   for how this slots into their image sizing rules). Swap for a real <img>
   once the photo is available. */
[data-media-placeholder] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--color-gray-100);
  border: 1px dashed var(--color-gray-300);
  color: var(--color-gray-600);

  & svg {
    width: 42px;
    height: 42px;
    opacity: 0.6;
  }

  & span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    max-width: 24ch;
  }
}

::selection {
  background: var(--color-red);
  color: var(--color-white);
}

/* =========================================================
   Legal pages (aviso legal, privacidad, cookies, calidad)

   Deliberately not a "Sector"/"Service detail" page: no hero photo, no
   [data-cards]/[data-why]/[data-highlight] — plain, sober long-form text.
   Reuses [data-prose] for paragraph typography rather than redefining it;
   this section only adds what [data-prose] doesn't cover (headings, lists,
   links within a long legal document).
   ========================================================= */

[data-legal-content] {
  max-width: 72ch;
  margin: 0 auto;

  & h2 {
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    margin-top: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 0.85rem;

    &:first-child {
      margin-top: 0;
    }
  }

  & p {
    color: var(--color-ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  /* :not([data-app-list]) so a highlighted [data-app-list] nested here (see
     Calidad's "Principios de calidad") keeps its own red-dot marker style
     instead of picking up this generic disc-bullet list styling too. */
  & ul:not([data-app-list]) {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
    color: var(--color-ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    list-style: disc;

    & li {
      margin-bottom: 0.4rem;
    }
  }

  & [data-app-list] {
    margin-bottom: 1.5rem;
  }

  /* :not([data-button]) so a button link nested here (see Calidad's ISO
     certificate download) keeps [data-button]'s own colours instead of
     this inline-link styling overriding them (text/background both red
     otherwise, since this selector outranks [data-button="primary"]). */
  & a:not([data-button]) {
    color: var(--color-red);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  & strong {
    color: var(--color-ink);
  }
}

[data-legal-meta] {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
}