/* ==========================================================================
   FECATRA — Federació Catalana de Tallers de Reparació d'Automòbils
   Institutional stylesheet (no framework).

   Direction: editorial / sober. White and graphite carry the page; the logo
   red appears only as a rule, a link or the primary action; the logo yellow is
   reserved for the focus ring. Structure comes from hairline rules and a
   strict grid — not from shadows, lifts or pills.
   ========================================================================== */

/* ------------------------------- Tokens ---------------------------------- */
:root {
    /* Ink */
    --ink: #14171a;
    --ink-2: #41484f;
    --muted: #6f767d;
    --on-dark: #c9ced3;

    /* Rules & surfaces */
    --line: #e3e7ea;
    --line-2: #cfd5da;
    --bg: #ffffff;
    --bg-alt: #f6f7f8;
    --bg-dark: #14171a;
    --track: #e8ebee;

    /* Brand accents — used sparingly and on purpose */
    --red: #e1232b;      /* logo red: rules, primary action */
    --red-ink: #b0141c;  /* passes AA on white: links, hover */
    --yellow: #f4c20d;   /* focus ring only */

    --maxw: 1140px;
    --gutter: 24px;
    --radius: 3px;
    --header-h: 72px;

    --font-head: "Montserrat", "Segoe UI", Roboto, system-ui, sans-serif;
    --font-body: "Open Sans", "Segoe UI", Roboto, system-ui, sans-serif;
}

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

[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink-2);
    background: var(--bg);
    line-height: 1.62;
    font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red-ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--red); }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--ink);
    line-height: 1.22;
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ----------------------------- Utilities --------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 88px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--tight { padding: 56px 0; }

.eyebrow {
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px;
}

/* The recurring motif: a short red rule opening each section. */
.section-head { max-width: 760px; margin: 0 0 52px; }
.section-head::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--red);
    margin-bottom: 22px;
}
.section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); margin-bottom: .4em; }
.section-head .lead { color: var(--muted); font-size: 1.02rem; margin: 0; }
.section-head .lead:last-child { margin-bottom: 0; }
.section-head--tight { margin-bottom: 26px; }

.text-accent { color: var(--red-ink); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------- Buttons --------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .94rem;
    letter-spacing: .01em;
    padding: 13px 26px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    text-align: center;
}
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-block { display: block; width: 100%; }

/* ------------------------------- Header ---------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 20px rgba(20, 23, 26, .07); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; }
.brand span {
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--ink);
    font-size: 1.15rem;
    letter-spacing: .06em;
}

.nav-menu { display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; height: var(--header-h); }
.nav-menu > li { display: flex; align-items: center; }
.nav-menu a {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--ink-2);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    padding: 0 13px;
    border-bottom: 2px solid transparent;
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a.is-active { color: var(--ink); border-bottom-color: var(--red); }

.nav-menu .nav-cta a {
    height: auto;
    padding: 10px 18px;
    border: 1px solid var(--red);
    border-radius: var(--radius);
    background: var(--red);
    color: #fff;
    margin-left: 6px;
}
.nav-menu .nav-cta a:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }

.nav-lang { display: flex; align-items: center; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); }
.nav-lang a {
    height: auto;
    color: var(--muted);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-bottom: 0;
}
.nav-lang a:hover { color: var(--ink); }
.nav-lang a.is-current { color: var(--ink); }
.nav-lang a + a { border-left: 1px solid var(--line); }

.nav-toggle {
    display: none;
    background: none; border: 0; cursor: pointer;
    width: 44px; height: 44px; padding: 10px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .2s ease, background .2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; width: 100%; }
.nav-toggle span::after { position: absolute; top: 7px; width: 100%; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------- Hero ----------------------------------- */
/* Split: text on white (left) against the workshop photograph (right). The
   left column is padded so its text lines up with .container while the grid
   itself spans the full viewport and the photo bleeds off the right edge. */
.hero { border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; }
.hero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 56px 80px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.hero__title { margin: 0; }
.hero__mark {
    display: block;
    font-size: clamp(2.6rem, 5.2vw, 4rem);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ink);
    line-height: 1;
}
.hero__full {
    display: block;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0;
    line-height: 1.35;
    margin-top: 14px;
    max-width: 30ch;
}
.hero__rule { width: 40px; height: 3px; background: var(--red); margin: 26px 0; }
.hero__sub { color: var(--muted); font-size: 1.02rem; max-width: 44ch; margin: 0; }
.hero__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero__media { position: relative; background: var(--bg-alt); }
.hero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

/* ------------------------------- Figures --------------------------------- */
/* Stat tiles, not a chart: four headline numbers separated by hairlines.
   The values wear ink, never an accent colour. */
.figures { border-bottom: 1px solid var(--line); background: var(--bg); }
.figures__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}
.figures__item { padding: 0 32px; border-left: 1px solid var(--line); }
.figures__item:first-child { border-left: 0; padding-left: 0; }
.figures__item:last-child { padding-right: 0; }
.figures__value {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.figures__label {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .84rem;
    color: var(--ink);
    margin-top: 10px;
}
.figures__note { display: block; font-size: .82rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ----------------------------- Presentation ------------------------------ */
.about__grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 64px; align-items: start; }
.about__logo { justify-self: center; }
.about__logo img { width: 190px; height: 190px; }
.about__text > :last-child { margin-bottom: 0; }
.about__text .figure { font-size: 1.06rem; color: var(--ink); }
.about__text strong { color: var(--ink); font-weight: 700; }

/* ------------------------------- Milestones ------------------------------ */
.fites__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 64px; list-style: none; margin: 0; padding: 0; }
.fites__item {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: baseline;
    gap: 0 8px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
}
.fites__grid .fites__item:first-child,
.fites__grid .fites__item:nth-child(2) { border-top: 1px solid var(--line); }
.fites__num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .78rem;
    color: var(--red);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.fites__text { font-size: .97rem; margin: 0; }

/* --------------------------- Representativeness -------------------------- */
.repr { border-bottom: 1px solid var(--line); }
.repr__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.repr__text { margin: 0; color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; max-width: 46ch; }
.repr__logos { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.repr__logos img { height: 46px; width: auto; }

/* ------------------------------- Segments -------------------------------- */
/* One hue for every bar: identity comes from the printed label beside each
   row, so colour is free to stay a single sober graphite. Bars are square at
   the baseline and rounded at the data end. Values are printed on every row,
   which is also the table view — hence no tooltip layer. */
.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.segment { margin: 0; }
.segment__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 22px;
}
.bars { list-style: none; margin: 0; padding: 0; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-bottom: 20px; }
.bar:last-child { margin-bottom: 0; }
.bar__label { font-size: .88rem; color: var(--ink-2); line-height: 1.35; }
.bar__value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.bar__track { grid-column: 1 / -1; height: 8px; background: var(--track); }
.bar__fill { display: block; height: 100%; background: var(--ink-2); border-radius: 0 3px 3px 0; }
.segments__note { margin: 40px 0 0; font-size: .84rem; color: var(--muted); }

/* ------------------------------ Challenges ------------------------------- */
.reptes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 40px; }
.repte { border-top: 1px solid var(--line-2); padding-top: 18px; }
.repte h3 { font-size: 1rem; margin-bottom: .45em; }
.repte p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ------------------------------- Strengths ------------------------------- */
.pull {
    border-left: 3px solid var(--red);
    padding-left: 28px;
    margin: 0 0 52px;
    font-size: 1.1rem;
    color: var(--ink);
    max-width: 840px;
}
.pull p { margin: 0; }
.aposta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 40px; list-style: none; margin: 0; padding: 0; }
.aposta li {
    border-top: 1px solid var(--line-2);
    padding-top: 16px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .96rem;
    color: var(--ink);
}

/* ----------------------------- Associations ------------------------------ */
.assoc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.assoc-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px;
    transition: border-color .15s ease;
}
.assoc-card:hover { border-color: var(--line-2); }
.assoc-card img { width: 72px; height: 72px; margin-bottom: 20px; }
.assoc-card h3 { font-size: 1.02rem; margin-bottom: .4em; }
.assoc-card p { color: var(--muted); font-size: .89rem; margin: 0; }
.assoc-card p strong { color: var(--ink-2); font-weight: 600; }

/* ------------------------------- Denúncia -------------------------------- */
.denuncia { border-top: 1px solid var(--line); }
.denuncia__grid { display: grid; grid-template-columns: 1fr 1fr; }
/* Trama de puntos: relleno decorativo, sin carga semántica. */
.denuncia__media {
    min-height: 440px;
    background-color: var(--bg-alt);
    background-image: radial-gradient(
        circle,
        rgba(111, 118, 125, .30) 1.6px,
        transparent 1.7px
    );
    background-size: 22px 22px;
    background-position: center;
}
/* Photo occupies the left column, so the text pads out to the container's
   right edge — the mirror of the hero. */
.denuncia__body {
    padding: 76px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 76px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.denuncia__body::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--red);
    margin-bottom: 22px;
}
.denuncia__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.denuncia__body h3 { font-size: 1.02rem; color: var(--muted); font-weight: 600; margin: -.2em 0 1em; }
.denuncia__body p { color: var(--ink-2); max-width: 52ch; }
.denuncia__body .btn { align-self: flex-start; margin-top: 10px; }

/* ------------------------------- Contact --------------------------------- */
.contact { background: var(--bg-alt); border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.contact__phone {
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 30px;
}
.contact__phone a { color: var(--ink); }
.contact__phone a:hover { color: var(--red-ink); }
.contact__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.contact__cols h3 {
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    margin-bottom: 8px;
}
.contact__cols p { color: var(--ink-2); font-size: .94rem; margin: 0; }

/* -------------------------------- Forms ---------------------------------- */
.form-card {
    background: var(--bg);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
}
.form-card > h3 { font-size: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field--full { grid-column: 1 / -1; }
.field > label { font-family: var(--font-head); font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--red-ink); }

.input, textarea.input, select.input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 11px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, textarea.input:focus, select.input:focus {
    border-color: var(--ink);
    box-shadow: none;
    outline: 3px solid var(--yellow);
    outline-offset: 1px;
}
textarea.input { min-height: 130px; resize: vertical; }
select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f767d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}
.field-hint { font-size: .84rem; color: var(--muted); margin-top: 6px; }

.field-error { color: var(--red-ink); font-size: .84rem; margin-top: 6px; font-weight: 600; }
.input.has-error, textarea.has-error, select.has-error { border-color: var(--red); }

.check-group { border: 0; padding: 0; margin: 0 0 16px; }
.check-group legend { font-family: var(--font-head); font-weight: 600; font-size: .85rem; margin-bottom: 10px; color: var(--ink); padding: 0; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; font-size: .94rem; }
.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--red); flex: 0 0 auto; }
.check-inline { display: flex; gap: 24px; flex-wrap: wrap; }

.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.captcha { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; }
.captcha input { width: 68px; text-align: center; }

.field input[type="file"] {
    font-size: .93rem;
    padding: 10px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    background: var(--bg-alt);
}

/* ------------------------------- Callout --------------------------------- */
.callout {
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 32px;
}
.callout h2 { font-size: 1.05rem; margin: 0 0 8px; }
.callout p { margin: 0 0 8px; font-size: .93rem; }
.callout p:last-child { margin-bottom: 0; }
.callout .note { color: var(--muted); font-size: .87rem; }

/* -------------------------------- Alerts --------------------------------- */
.alert { border-radius: var(--radius); padding: 15px 18px; margin-bottom: 24px; font-size: .95rem; border: 1px solid transparent; border-left-width: 3px; }
.alert-success { background: #eef6f1; color: #1a5c38; border-color: #cbe3d5; border-left-color: #1a5c38; }
.alert-error { background: #fdefef; color: #96131b; border-color: #f2cdcf; border-left-color: var(--red); }
.alert ul { margin: 8px 0 0; padding-left: 20px; }

/* ------------------------------ Page hero -------------------------------- */
.page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 60px 0; }
.page-hero::before { content: none; }
.page-hero h1 { color: var(--ink); font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .35em; }
.page-hero .lead { color: var(--muted); max-width: 68ch; margin: 0; font-size: 1rem; }

/* ------------------------------ Legal page ------------------------------- */
.legal { max-width: 820px; }
.legal ol { padding-left: 22px; }
.legal > ol > li { margin-bottom: 18px; }
.legal ol ol { margin-top: 12px; }
.legal h2 { font-size: 1.2rem; margin-top: 1.6em; }

/* -------------------------------- Footer --------------------------------- */
.site-footer { background: var(--bg-dark); color: var(--on-dark); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.footer-brand img { width: 64px; height: 64px; margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; max-width: 52ch; }
.footer-partners { display: flex; align-items: center; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.footer-partners img { height: 38px; width: auto; filter: grayscale(1) brightness(2.2); opacity: .8; }
.footer-nav h2 {
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 16px;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 9px; }
.footer-nav a { color: var(--on-dark); font-size: .93rem; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 56px; padding: 20px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: #8c9399; }
.footer-bottom a { color: var(--on-dark); }

/* ------------------------------ Responsive ------------------------------- */
@media (max-width: 1080px) {
    .reptes__grid { grid-template-columns: repeat(3, 1fr); }
    .segments { gap: 40px; }
}

@media (max-width: 980px) {
    /* Six nav items plus the language switch stop fitting beside the brand
       well before the usual phone breakpoint, so the panel starts here. */
    .nav-toggle { display: block; }
    .nav-menu {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        padding: 8px 16px 18px;
        box-shadow: 0 16px 32px rgba(20, 23, 26, .12);
        transform: translateY(-130%);
        visibility: hidden;
        transition: transform .28s ease, visibility .28s ease;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }
    .nav-menu.is-open { transform: translateY(0); visibility: visible; }
    .nav-menu > li { display: block; }
    .nav-menu a {
        height: auto;
        padding: 13px 4px;
        border-bottom: 1px solid var(--line);
    }
    .nav-menu a.is-active { border-bottom-color: var(--line); color: var(--red-ink); }
    .nav-menu .nav-cta a { margin: 12px 0 0; border: 1px solid var(--red); text-align: center; display: block; }
    .nav-menu .nav-cta a:hover { border-color: var(--red-ink); }
    .nav-lang { margin: 14px 0 0; padding: 0; border-left: 0; }
    .nav-lang a { border-bottom: 0; padding: 4px 10px 4px 0; }
    .nav-lang a + a { padding-left: 10px; }

    .hero__grid { grid-template-columns: 1fr; min-height: 0; }
    .hero__body { padding: 64px var(--gutter); max-width: var(--maxw); margin: 0 auto; }
    .hero__media { min-height: 320px; order: -1; }

    .figures__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    .figures__item:nth-child(odd) { border-left: 0; padding-left: 0; }
    .figures__item:nth-child(even) { padding-right: 0; }

    .about__grid { grid-template-columns: 1fr; gap: 32px; }
    .about__logo img { width: 140px; height: 140px; }

    .fites__grid { grid-template-columns: 1fr; column-gap: 0; }
    .fites__grid .fites__item:nth-child(2) { border-top: 0; }

    .repr__inner { grid-template-columns: 1fr; gap: 24px; }

    .segments { grid-template-columns: 1fr; gap: 44px; }
    .assoc-grid { grid-template-columns: repeat(2, 1fr); }
    .aposta { grid-template-columns: repeat(2, 1fr); }

    .denuncia__grid { grid-template-columns: 1fr; }
    .denuncia__media { min-height: 280px; order: -1; }
    .denuncia__body { padding: 56px var(--gutter); max-width: var(--maxw); margin: 0 auto; }

    .contact__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .section { padding: 60px 0; }

    .reptes__grid { grid-template-columns: 1fr; gap: 26px; }
    .assoc-grid { grid-template-columns: 1fr; }
    .aposta { grid-template-columns: 1fr; }
    .figures__grid { grid-template-columns: 1fr; gap: 28px 0; }
    .figures__item { border-left: 0; padding: 0; }
    .contact__cols { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-card { padding: 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom .container { justify-content: center; text-align: center; }
    .pull { padding-left: 20px; font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}