/* ============================================================
   ABSC SL — Hoja de estilos principal
   CSS propio, sin frameworks. Mobile-first, tipografía grande y
   fluida, paleta neutra (negro/blanco/gris) con un único acento
   de marca (dos variantes de luminosidad, para fondo claro/oscuro).
   Bloques claros y oscuros alternos para dar ritmo visual.
   ============================================================ */

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; }

/* ---------- Tokens ---------- */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3F2EE;
  --color-ink: #0A0A0B;
  --color-ink-soft: #52545A;
  --color-ink-faint: #6B6C70;
  --color-line: #E4E2DC;
  --color-line-strong: #C9C7BF;

  /* Acento único de marca, en dos variantes de luminosidad para
     mantener contraste tanto en fondo claro como en fondo oscuro. */
  --color-accent: #2D3E8C;
  --color-accent-dark: #1E2C6B;
  --color-accent-on-dark: #9AAAFF;

  --color-error: #A8291F;
  --color-error-bg: #FBEAE8;
  --color-success-bg: #E9F3E8;
  --color-success-text: #1E4620;

  /* Bloques oscuros (hero, enfoque, CTA final, footer) */
  --color-dark-bg: #0A0A0B;
  --color-dark-bg-alt: #131315;
  --color-dark-text: #F5F5F3;
  --color-dark-text-soft: #A7A8AD;
  --color-dark-line: rgba(245, 245, 243, 0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container-max: 1240px;
  --container-narrow: 760px;
  --header-height: 76px;

  --radius-sm: 3px;
  --radius-md: 6px;

  --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 10, 11, 0.08);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--color-ink); }
h1 { font-size: clamp(2.75rem, 1.85rem + 4.6vw, 6.25rem); font-weight: 900; letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-size: clamp(2rem, 1.55rem + 2.3vw, 3.75rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); letter-spacing: -0.008em; }

p { color: var(--color-ink-soft); }
strong { color: var(--color-ink); font-weight: 700; }

a { transition: color 0.15s var(--ease); }
a:hover { color: var(--color-accent); }

:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.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;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  background: var(--color-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-weight: 600;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--color-accent);
}

/* ---------- Layout helpers ---------- */
.section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.5vw, 64px);
}
.section__inner--narrow {
  max-width: var(--container-narrow);
}
.section {
  padding-block: clamp(64px, 10vw, 132px);
  border-top: 1px solid var(--color-line);
}
.section--alt { background: var(--color-surface-alt); }

/* Bloques oscuros: hero, enfoque, CTA final. Cambia texto, bordes,
   eyebrow, botones y foco automáticamente dentro del bloque. */
.section--dark,
.hero {
  background: var(--color-dark-bg);
  border-top-color: var(--color-dark-line);
  color: var(--color-dark-text);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.hero h1, .hero h2, .hero h3 { color: var(--color-dark-text); }
.section--dark p, .hero p { color: var(--color-dark-text-soft); }
.section--dark strong, .hero strong { color: var(--color-dark-text); }
.section--dark .eyebrow, .hero .eyebrow { color: rgba(245, 245, 243, 0.6); }
.section--dark .eyebrow::before, .hero .eyebrow::before { background: var(--color-accent-on-dark); }
.section--dark a:hover, .hero a:hover { color: var(--color-accent-on-dark); }
.section--dark :focus-visible, .hero :focus-visible { outline-color: var(--color-accent-on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--color-ink);
  color: #fff;
}
.btn--primary:hover { background: var(--color-accent-dark); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-strong);
}
.btn--ghost:hover { border-color: var(--color-ink); color: var(--color-ink); background: var(--color-surface); }
.btn--small { min-height: 44px; padding: 10px 18px; font-size: 0.9rem; }
.btn--form { width: 100%; margin-top: 6px; }
@media (min-width: 560px) { .btn--form { width: auto; } }
.btn--large { min-height: 58px; padding: 16px 36px; font-size: 1.05rem; }

/* Botones sobre fondo oscuro: se invierten para mantener contraste */
.section--dark .btn--primary, .hero .btn--primary {
  background: var(--color-dark-text);
  color: var(--color-dark-bg);
}
.section--dark .btn--primary:hover, .hero .btn--primary:hover {
  background: var(--color-accent-on-dark);
  color: var(--color-dark-bg);
}
.section--dark .btn--ghost, .hero .btn--ghost {
  color: var(--color-dark-text);
  border-color: rgba(245, 245, 243, 0.32);
}
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover {
  border-color: var(--color-dark-text);
  background: rgba(245, 245, 243, 0.08);
  color: var(--color-dark-text);
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-weight: 800;
}
.brand__mark {
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.brand__suffix {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-ink-faint);
  letter-spacing: 0.02em;
}
.brand--footer .brand__mark { font-size: 1.4rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.5vw, 64px);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  font-weight: 600;
  font-size: 0.96rem;
}
.main-nav__list a { color: var(--color-ink-soft); }
.main-nav__list a:hover { color: var(--color-ink); }

.main-nav__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
}
.lang-switch__item { color: var(--color-ink-faint); padding: 12px 6px; display: inline-flex; align-items: center; }
.lang-switch__item.is-active { color: var(--color-ink); }
.lang-switch__item:hover { color: var(--color-accent); }
.lang-switch__sep { color: var(--color-line-strong); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.menu-toggle__box {
  width: 22px;
  height: 14px;
  position: relative;
}
.menu-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), top 0.2s var(--ease);
}
.menu-toggle__bar:first-child { top: 0; }
.menu-toggle__bar:last-child { top: 12px; }
.menu-toggle.is-open .menu-toggle__bar:first-child { top: 6px; transform: rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:last-child { top: 6px; transform: rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 11, 0.32);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease);
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

/* Mobile nav panel */
@media (max-width: 899px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 12px;
    right: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    max-height: calc(100vh - var(--header-height) - 24px);
    overflow-y: auto;
  }
  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .main-nav__list a {
    display: block;
    width: 100%;
    padding: 12px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-line);
  }
  .main-nav__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .lang-switch { justify-content: center; padding: 6px 0; }
  .menu-toggle { display: inline-flex; }
}

@media (min-width: 900px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: 44px;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(76px, 13vw, 156px) clamp(72px, 11vw, 132px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Línea decorativa muy sutil, no un degradado llamativo */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-dark-line) 50%, transparent);
}
.hero__inner { max-width: 920px; position: relative; }
.hero__headline { margin-bottom: 26px; }
/* Entrada del hero: animación CSS pura, nunca depende de JS ni de
   IntersectionObserver, y no requiere una regla de "oculto por
   defecto" fuera de la propia animación — así no hay ningún riesgo
   de que el hero quede invisible en ningún escenario. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero__headline, .hero__lead, .hero__actions {
    animation: heroFadeUp 0.7s var(--ease) both;
  }
  .hero .eyebrow { animation-delay: 0s; }
  .hero__headline { animation-delay: 0.08s; }
  .hero__lead { animation-delay: 0.16s; }
  .hero__actions { animation-delay: 0.24s; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero__lead {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  max-width: 58ch;
  margin-bottom: 40px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Intro ---------- */
.intro__grid {
  display: grid;
  gap: 28px;
  margin-top: 8px;
  max-width: 980px;
}
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.intro__text { font-size: 1.1rem; }

/* ---------- Services (números grandes) ---------- */
.service-list {
  margin-top: 32px;
  border-top: 1px solid var(--color-line);
}
.service-row {
  display: grid;
  gap: 18px;
  padding-block: 44px;
  border-bottom: 1px solid var(--color-line);
}
.service-row__number {
  font-size: clamp(3.25rem, 2.3rem + 4.5vw, 6.5rem);
  font-weight: 900;
  color: var(--color-ink);
  letter-spacing: -0.03em;
  line-height: 0.82;
}
.service-row__body h3 { margin-bottom: 14px; }
.service-row__body > p { max-width: 62ch; margin-bottom: 20px; font-size: 1.04rem; }
.service-row__caps {
  display: grid;
  gap: 10px;
  max-width: 620px;
}
.service-row__caps li {
  font-size: 0.94rem;
  color: var(--color-ink-soft);
  padding-left: 18px;
  position: relative;
}
.service-row__caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 1px;
}

@media (min-width: 900px) {
  .service-row {
    grid-template-columns: 200px 1fr;
    gap: 40px;
    padding-block: 60px;
    align-items: start;
  }
  .service-row__caps { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* ---------- Approach / Enfoque (bloque oscuro) ---------- */
.approach__lead { max-width: 64ch; font-size: 1.1rem; margin-top: 6px; }
.approach__steps {
  margin-top: 48px;
  display: grid;
  gap: 32px;
}
.approach__steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.approach__step-number {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 245, 243, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-dark-text);
  background: transparent;
}
.approach__steps h3 { margin-bottom: 8px; font-size: 1.15rem; }
.approach__steps p { font-size: 0.98rem; }

@media (min-width: 700px) {
  .approach__steps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }
}
@media (min-width: 1100px) {
  .approach__steps { grid-template-columns: repeat(4, 1fr); }
  .approach__steps li { flex-direction: column; }
  .approach__step-number { margin-bottom: 4px; }
}

/* ---------- Por qué ABSC ----------
   Mobile-first: en una sola columna, cada argumento se separa con una
   simple línea horizontal (nada de "caja" ni tarjeta) y lleva un
   pequeño índice numerado (01, 02...) generado por CSS —coherente con
   los números grandes de "Servicios"— para reforzar que cada bloque es
   una unidad propia. A partir de 640px, cuando pasa a rejilla de 2/4
   columnas, se recupera el retículo de líneas completo (arriba+
   izquierda en el contenedor, derecha+abajo en cada celda). */
.why-grid {
  counter-reset: why-count;
  margin-top: 44px;
  display: grid;
  gap: 0;
}
.why-item {
  counter-increment: why-count;
  padding-block: 30px;
  border-top: 1px solid var(--color-line);
}
.why-item:last-child { border-bottom: 1px solid var(--color-line); }
.why-item::before {
  content: counter(why-count, decimal-leading-zero);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--color-ink-faint);
  margin-bottom: 14px;
}
.why-item h3 { font-size: 1.15rem; margin-bottom: 12px; }
.why-item p { font-size: 0.98rem; line-height: 1.65; }

@media (min-width: 640px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
  }
  .why-item {
    border-top: none;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    padding: 32px 28px;
  }
  .why-item::before { margin-bottom: 16px; }
}
@media (min-width: 1100px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .why-item { padding: 36px 28px; }
}

/* ---------- Confianza (declaración + principios) ---------- */
.trust__statement {
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-ink);
  max-width: 20ch;
  margin-top: 8px;
}
.trust__principles {
  margin-top: 56px;
  display: grid;
  gap: 40px;
  border-top: 1px solid var(--color-line);
  padding-top: 44px;
}
/* En móvil/tablet (una columna) cada principio lleva además su propia
   línea superior para que se lea como una unidad separada, no como un
   párrafo continuado del anterior. Al pasar a 3 columnas esa línea ya
   no hace falta: el gap + la línea superior del bloque son suficientes. */
.trust__principle:not(:first-child) {
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 780px) {
  .trust__principles { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .trust__principle:not(:first-child) { padding-top: 0; border-top: none; }
}
.trust__principle-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: block;
}
.trust__principle p { font-size: 1rem; line-height: 1.65; color: var(--color-ink); }

/* ---------- CTA final (bloque oscuro) ---------- */
.cta-band { text-align: center; }
.cta-band__inner {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-band h2 { margin-bottom: 20px; }
.cta-band p { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); max-width: 48ch; margin-bottom: 40px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  gap: 52px;
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
  }
}
.contact-info p { max-width: 48ch; font-size: 1.05rem; }
.contact-info__company {
  font-style: normal;
  margin-top: 26px;
  color: var(--color-ink);
  font-size: 0.98rem;
  line-height: 1.7;
}
.contact-info__email { margin-top: 10px; }
.contact-info__email a { font-weight: 700; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-info__email a:hover { color: var(--color-accent); }

/* ---------- Form ----------
   El formulario se trata como un panel propio (fondo ligeramente
   distinto del blanco de la sección + borde fino + esquina superior
   marcada), para que tenga presencia visual real y no parezca un
   `<form>` estándar suelto sobre la página. Los inputs suben de
   tamaño, los labels pasan a un tratamiento tipo "etiqueta" (mayúsculas
   pequeñas, muy discretas) y el foco gana un anillo suave además del
   cambio de color de borde, coherente con el resto del sitio. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(26px, 4vw, 44px);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  position: relative;
}
.contact-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-ink);
}
.form-row { display: grid; gap: 20px; }
@media (min-width: 620px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
}
.req { color: var(--color-accent); }

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--color-surface);
  font-size: 1rem;
  min-height: 52px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  width: 100%;
}
.form-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-soft) 50%), linear-gradient(135deg, var(--color-ink-soft) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--color-ink-faint);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(45, 62, 140, 0.12);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-error);
}
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
  box-shadow: 0 0 0 4px rgba(168, 41, 31, 0.12);
}
.field-error { color: var(--color-error); font-size: 0.86rem; font-weight: 600; }

.form-field--checkbox {
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  padding-block: 6px;
  min-height: 44px;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border-radius: 3px;
  accent-color: var(--color-ink);
}
.checkbox-label a { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.form-required-note { font-size: 0.8rem; color: var(--color-ink-faint); }

.btn--form {
  min-height: 56px;
  font-size: 1rem;
}
.btn--form::after {
  content: "→";
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.18s var(--ease);
}
.btn--form:hover::after { transform: translateX(4px); }

.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-banner {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.96rem;
  margin-bottom: 4px;
}
.form-banner--success { background: var(--color-success-bg); color: var(--color-success-text); }
.form-banner--error { background: var(--color-error-bg); color: var(--color-error); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: #D9D9D6;
  padding-block: 72px 28px;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.5vw, 64px);
  display: grid;
  gap: 40px;
}
@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 32px; }
}
.site-footer .brand__mark { color: #fff; }
.site-footer .brand__suffix { color: #9a9a9c; }
.site-footer__tagline { margin-top: 14px; color: #b7b7b4; font-size: 0.92rem; max-width: 30ch; }
.site-footer__heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a9a9c;
  margin-bottom: 16px;
}
.site-footer__list { display: grid; gap: 10px; }
.site-footer__list a { color: #D9D9D6; font-size: 0.94rem; }
.site-footer__list a:hover { color: #fff; }
.site-footer__company { color: #D9D9D6; font-size: 0.92rem; line-height: 1.75; font-style: normal; }
.site-footer__email { margin-top: 12px; }
.site-footer__email a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5.5vw, 64px);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem;
}
.site-footer__bottom p { color: #b7b7b4; }

/* ---------- Legal pages ---------- */
.section--legal h1 { margin-bottom: 34px; }
.legal-content h2 {
  font-size: 1.15rem;
  margin-top: 36px;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.legal-content p, .legal-content ul { font-size: 0.98rem; margin-bottom: 4px; }
.legal-content ul { display: grid; gap: 8px; margin: 14px 0 20px; padding-left: 20px; list-style: disc; }
.legal-data-list { list-style: none; padding-left: 0; margin: 18px 0 8px; display: grid; gap: 8px; }
.legal-data-list li { font-size: 0.98rem; color: var(--color-ink-soft); }
.legal-content a { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Error page ---------- */
.section--error { padding-block: clamp(90px, 14vw, 160px); text-align: left; }
.error-page h1 { margin-bottom: 16px; }
.error-page p { font-size: 1.05rem; margin-bottom: 30px; max-width: 52ch; }

/* ---------- Reveal al hacer scroll (mejora progresiva segura) ----------
   Un elemento SOLO se anima si JS ha añadido la clase "js-reveal" al
   body Y le ha añadido individualmente la clase "is-armed" a ESE
   elemento tras confirmarlo con IntersectionObserver (ver main.js).
   Si JS no corre, o falla, o el observer no dispara por cualquier
   motivo, el contenido es 100% visible desde el primer render: nunca
   se parte de "oculto por defecto" en el CSS.
   IMPORTANTE: a diferencia de una implementación típica de "fade in on
   scroll", esta NUNCA usa opacity para el estado inicial. El contenido
   permanece con opacity:1 (perfectamente legible por lectores de
   pantalla, crawlers, Lighthouse o cualquier captura de pantalla
   instantánea) en todo momento; el único efecto es un desplazamiento
   vertical muy sutil que se resuelve al hacer scroll. Así es
   estructuralmente imposible que una sección quede "invisible", pase
   lo que pase con el timing del observer o de la herramienta que
   inspeccione la página. */
@media (prefers-reduced-motion: no-preference) {
  body.js-reveal [data-reveal].is-armed {
    transform: translateY(20px);
    transition: transform 0.6s var(--ease);
  }
  body.js-reveal [data-reveal].is-armed.is-visible {
    transform: translateY(0);
  }
  [data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
  [data-reveal-group] > *:nth-child(2) { transition-delay: 70ms; }
  [data-reveal-group] > *:nth-child(3) { transition-delay: 140ms; }
  [data-reveal-group] > *:nth-child(4) { transition-delay: 210ms; }
}