/*
  Landing Motus · estilos de página.
  Colores, tipos, radios, sombras y movimiento salen de tokens/*.css (copia de ../tokens).
  Móvil primero: la base es 375 px; el layout de escritorio (grid 1.25fr / 1fr
  del diseño fuente) entra a partir de 900 px.
*/

/* Valores del diseño fuente (#2-marca, cabecera web) que no existen como token.
   Se centralizan aquí para no repetirlos; si se reutilizan fuera de la web,
   subirlos a tokens/colors.css. */
:root {
  --web-lead: #C7CCCB;          /* texto de entradilla sobre Noche */
  --web-stripe-a: #142328;      /* placeholder de foto, raya clara */
  --web-stripe-b: #101D21;      /* placeholder de foto, raya oscura */
  --web-float-shadow: 0 10px 24px rgba(0,0,0,.3);
  --web-on-brand-muted: #C9D4D5; /* texto secundario sobre Petróleo (post de caso), 7,4:1 */
  --web-gutter: var(--space-4); /* 16 px móvil; 36 px en escritorio */
  /* Ancho máximo del contenido: en pantallas grandes (1920 px) formulario, factura y
     textos se estiraban a 900–1000 px. Por encima de 1280 px el margen crece y centra. */
  --web-max: 1280px;
  /* Margen lateral de los bloques a sangre (cabecera, secciones, pie). El % se resuelve
     donde se usa (padding → ancho del bloque), por eso va en variable y no calculado aquí. */
  --web-pad: max(var(--web-gutter), calc((100% - var(--web-max)) / 2));
  --web-header-h: 88px; /* reserva para anclas bajo la cabecera fija */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* Anclas del menú: que el título no quede tapado por la cabecera fija */
main [id] { scroll-margin-top: var(--web-header-h); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
p, h1, ol, figure { margin: 0; }

.skip {
  /* por encima de la cabecera fija */
  position: absolute; left: var(--space-4); top: -48px;
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-pill); z-index: 10;
}
.skip:focus { top: var(--space-4); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Símbolo ---------- */
.mark { width: 28px; height: 28px; flex: none; display: block; }
.mark__bar { fill: var(--motus-hueso); }
.mark--dark .mark__bar { fill: var(--motus-noche); }
.mark__dot {
  fill: var(--accent);
  /* fill-box: el 22 % se mide sobre el propio punto, igual que en el diseño fuente */
  transform-box: fill-box;
  animation: motusRep var(--dur-rep) var(--ease-rep) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mark__dot { animation: none; }
}

/* ---------- Cabecera ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--web-pad);
  border-bottom: 1px solid var(--border-dark);
  /* Fija al hacer scroll: el CTA «Reserva un diagnóstico» queda siempre a mano (conversión) */
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-dark);
}
.logo { display: flex; align-items: flex-end; gap: 6px; text-decoration: none; }
.logo__word {
  font: 800 26px/.74 var(--font-display);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 5px;
}
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav ul { display: none; list-style: none; margin: 0; padding: 0; gap: 32px; }
.site-nav ul a {
  font: var(--body-s);
  color: var(--text-on-dark-muted);
  text-decoration: none;
  transition: color .15s;
  display: inline-block;
  padding-block: 14px; /* 44 px de alto: se tocan bien en iPad horizontal */
}
.site-nav ul a:hover { color: var(--accent); }
.site-nav__n { display: none; }

/* Botón de menú (solo <900 px; nav.js quita el atributo hidden). Dos líneas → X al abrir. */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--text-on-dark);
  border: 1px solid var(--border-dark); border-radius: var(--radius-pill);
  cursor: pointer;
}
.menu-btn[hidden] { display: none; }
.menu-btn__bars { position: relative; width: 18px; height: 10px; }
.menu-btn__bars::before, .menu-btn__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor;
  transition: transform .15s, top .15s, bottom .15s;
}
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { bottom: 4px; transform: rotate(-45deg); }

/* Panel del menú móvil: la misma lista del escritorio, desplegada bajo la cabecera fija.
   Numeración 01–04 en mono Tartán = sistema numerado de la marca. */
@media (max-width: 899px) {
  .site-nav { gap: var(--space-2); }
  .site-header[data-menu="open"] .site-nav ul {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--space-2) var(--web-pad) var(--space-5);
    background: var(--surface-dark);
    border-bottom: 1px solid var(--border-dark);
    box-shadow: var(--shadow-hero);
  }
  .site-header[data-menu="open"] .site-nav ul a {
    display: flex; align-items: baseline; gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-dark);
    font: var(--display-s);
    text-transform: uppercase;
    color: var(--text-on-dark);
  }
  .site-header[data-menu="open"] .site-nav li:last-child a { border-bottom: 0; }
  .site-header[data-menu="open"] .site-nav__n { display: inline; font: var(--label); color: var(--accent); }
}
@media (max-width: 479px) {
  .hide-sm { display: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; /* objetivo táctil mínimo */
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font: 600 13px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.btn--lg { padding: 14px 26px; font-size: 16px; }

/* ---------- Hero ---------- */
/* El hero reparte el margen lateral entre su propio padding y el de sus columnas */
.hero { display: grid; padding-inline: max(0px, calc((100% - var(--web-max)) / 2 - var(--web-gutter))); }
.hero__copy {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: var(--space-7) var(--web-gutter) var(--space-6);
}
.hero__intro { display: flex; flex-direction: column; gap: var(--space-5); }
.eyebrow {
  font: var(--label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent);
}
.hero__title {
  font: var(--display-l);
  font-size: clamp(60px, 16vw, 108px);
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.accent { color: var(--accent); }
.hero__lead { font: var(--body-l); line-height: 1.55; color: var(--web-lead); max-width: 460px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* Servicios 01–04 */
.services {
  display: grid; grid-template-columns: repeat(2, 1fr);
  list-style: none; padding: 0;
  border-top: 1px solid var(--border-dark);
}
.services li {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  font: var(--body-s);
  color: var(--text-on-dark);
}
.services li:nth-child(even) { padding-left: var(--space-4); border-left: 1px solid var(--border-dark); }
.services li:nth-child(n+3) { border-top: 1px solid var(--border-dark); }
.services__n { font: var(--label); color: var(--accent); }

/* Visual: foto + tarjeta de estado.
   Móvil (<600 px): foto en su proporción 3:2 y tarjeta DEBAJO; encima taparía las cabezas.
   600–899 px: foto 3:2 a todo el ancho y tarjeta arriba a la derecha (queda sobre la pared).
   ≥900 px: la foto llena la columna derecha y se recorta por el centro (object-fit). */
.hero__visual {
  position: relative;
  margin: 0 var(--web-gutter) var(--web-gutter);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.hero__picture {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-m);
  overflow: hidden;
  /* rayas = fondo mientras carga la imagen */
  background: repeating-linear-gradient(135deg, var(--web-stripe-a) 0 10px, var(--web-stripe-b) 10px 20px);
}
.hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.status-card {
  align-self: flex-start;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--motus-hueso);
  color: var(--motus-noche);
  box-shadow: var(--web-float-shadow);
}
.status-card .mark { width: 44px; height: 44px; }
.status-card__text { display: flex; flex-direction: column; gap: 3px; }
.status-card__label {
  font: var(--label); /* 11 px (token); a 10 px no se leía bien en móvil */
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.status-card__value { font: 600 14px/1.3 var(--font-body); }

/* ---------- Secciones ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.section { padding: var(--space-7) var(--web-pad); }
.section--light { background: var(--surface-light); color: var(--text-on-light); }
.section--sand { background: var(--motus-arena); color: var(--text-on-light); }
/* Tartán sobre fondo claro no llega a 4,5:1 en texto pequeño: el antetítulo va en Grafito (Eyebrow tone="dark") */
.eyebrow--muted { color: var(--text-on-light-muted); }
/* Antetítulos de sección a 13 px (a 11 px «CASOS» apenas se leía). El del hero se queda en 11 px. */
.section .eyebrow { font-size: 13px; }
.section__title {
  margin: var(--space-4) 0 0;
  font: var(--display-m);
  font-size: clamp(44px, 12vw, 64px);
  text-transform: uppercase;
}
.section__lead { margin-top: var(--space-5); font: var(--body-l); color: var(--text-on-light-muted); max-width: 460px; }

/* Factura automática */
.auto { display: grid; gap: var(--space-6); }
.invoice {
  display: flex; flex-direction: column; gap: 18px;
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.invoice__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.invoice__who { display: flex; flex-direction: column; gap: var(--space-1); }
.invoice__label {
  font: var(--label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.invoice__client { font: 800 38px/.9 var(--font-display); text-transform: uppercase; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--motus-noche); color: var(--motus-hueso);
  font: 500 11px/1.3 var(--font-mono);
  text-transform: uppercase;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.invoice__lines { width: 100%; border-collapse: collapse; border-top: 1px solid var(--border-light); font: 400 14px/1.4 var(--font-body); }
.invoice__lines th { text-align: left; font-weight: 400; }
.invoice__lines td { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.invoice__lines th, .invoice__lines td { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.invoice__muted { color: var(--text-on-light-muted); }
.invoice__total th, .invoice__total td { padding-top: 14px; padding-bottom: 0; border-bottom: 0; font-weight: 600; font-size: 16px; }
.invoice__log {
  display: flex; flex-direction: column; gap: var(--space-2);
  list-style: none; padding: 14px 16px;
  background: var(--motus-hueso);
  border-radius: var(--radius-s);
  font: 400 11px/1.4 var(--font-mono);
}
.invoice__note { font: var(--label); color: var(--text-on-light-muted); }

/* Casos */
/* Rejilla fluida: 1 columna en móvil, 2 desde ~640 px; antes en tablet quedaban apiladas con hueco a la derecha */
.cases-section { display: grid; gap: var(--space-6); }
.cases-section__cta { justify-self: start; margin-top: var(--space-5); }
.cases {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none; /* separación la da el gap de .cases-section */
}
/*
  Superficie de la tarjeta: el post de caso del diseño va sobre Petróleo, pero
  Tartán sobre Petróleo da 2,92:1 y no cumple AA ni en texto grande (3:1).
  Sobre Noche da 4,76:1. Para volver al diseño original: var(--surface-brand).
*/
.case-card {
  --case-surface: var(--surface-dark);
  min-height: 414px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
  padding: 26px;
  background: var(--case-surface);
  color: var(--text-on-dark);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.case-card__meta { display: flex; justify-content: space-between; font: var(--label); text-transform: uppercase; color: var(--text-on-dark-muted); }
.case-card__meta span:first-child { text-transform: none; }
.case-card__stat { display: flex; flex-direction: column; gap: 10px; }
/* La cifra se ajusta al ancho de la tarjeta (unidades de contenedor): «100%» es más ancho que «−6H» */
.case-card { container-type: inline-size; }
.case-card__value { font: 900 clamp(88px, 42cqi, 150px)/.78 var(--font-display); color: var(--accent); }
.case-card__label { font: var(--display-s); text-transform: uppercase; }
.case-card__caption { font: var(--body-s); color: var(--web-lead); }

/* Método */
.method__head { display: flex; flex-direction: column; }
.steps { list-style: none; padding: 0; margin: var(--space-6) 0 0; border-top: 1px solid var(--border-dark); }
.steps li {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-dark);
}
.steps__n { font: var(--label); color: var(--accent); }
.steps__title { font: 600 18px/1.3 var(--font-body); }
.steps__meta { font: var(--label); text-transform: uppercase; color: var(--text-on-dark-muted); white-space: nowrap; }

/* Precios */
.pricing { background: var(--surface-brand); color: var(--text-on-dark); display: grid; gap: var(--space-6); justify-items: start; }
.eyebrow--on-brand { color: var(--web-on-brand-muted); }
.pricing__lead { margin-top: var(--space-5); font: var(--body-l); color: var(--web-on-brand-muted); max-width: 520px; }
.pricing__points { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; width: 100%; }
/* Punto Tartán al lado del título (petición del usuario, 2026-09-26); el texto queda alineado bajo el título */
.pricing__points li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2) var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--border-dark);
}
.pricing__points p { grid-column: 2; }
.pricing__points h3 { margin: 0; font: 600 18px/1.3 var(--font-body); }
.pricing__points p { font: var(--body); color: var(--web-on-brand-muted); }
.pricing__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Contacto */
.contact { display: grid; gap: var(--space-6); }
/* Vías directas de contacto (como en kovenant.es): fila entera pulsable con icono, rótulo, dato y flecha.
   Hover: icono y flecha en Tartán y la flecha avanza 4 px (150 ms, sin rebotes). */
.vias { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--border-light); }
.via {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-on-light); text-decoration: none;
}
.via__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--border-light);
  transition: border-color .15s, color .15s;
}
.via__icon svg, .via__arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.via__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 600 16px/1.3 var(--font-body); overflow-wrap: anywhere; }
.via__label { font: var(--label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-on-light-muted); }
.via__arrow { color: var(--text-on-light-muted); transition: transform .15s, color .15s; }
.via:hover .via__icon { border-color: var(--accent); color: var(--accent); }
.via:hover .via__arrow { color: var(--accent); transform: translateX(4px); }
.vias__or { margin-top: var(--space-5); font: var(--body); color: var(--text-on-light-muted); }
.form {
  display: flex; flex-direction: column; gap: 20px;
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__opt { color: var(--text-on-light-muted); font-weight: 400; }
.field__label { font: var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.field input {
  font: var(--body);
  font-size: 16px; /* 16 px evita el zoom automático de iOS al enfocar */
  padding: 12px 0;
  background: transparent;
  color: var(--text-on-light);
  border: 0;
  /* Grafito y no Línea: el borde es el único límite visible del campo y necesita 3:1 (WCAG 1.4.11) */
  border-bottom: 1px solid var(--text-on-light-muted);
  border-radius: 0;
  transition: border-color .15s;
}
.field input:focus { border-bottom-color: var(--accent); }
.form__legal { font: var(--body-s); font-size: 12px; color: var(--text-on-light-muted); } /* 13 → 12 px a petición del usuario (2026-10-06); Grafito sobre blanco 7,8:1 */
.hp { position: absolute; left: -9999px; }
.form__status:empty { display: none; }
.form__status { font: 600 14px/1.4 var(--font-body); }
/* Confirmación tras enviar: misma tarjeta (altura fijada en form.js), contenido centrado en vertical.
   Entrada en cascada sutil (subir 12 px + fundido) con la curva de la marca; nada si «reducir movimiento». */
.form.is-sent { justify-content: center; }
.form-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); outline: none; }
.form-sent__mark { width: 64px; height: 64px; }
.form-sent__title { margin: 0; font: var(--display-m); font-size: clamp(40px, 9vw, 56px); text-transform: uppercase; }
.form-sent__text { font: var(--body-l); color: var(--text-on-light-muted); max-width: 34ch; }
.form-sent__link {
  display: inline-flex; align-items: center; gap: var(--space-2); padding-block: var(--space-1);
  font: 600 15px/1.3 var(--font-body); color: var(--text-on-light); text-decoration: none;
  border-bottom: 1px solid var(--accent); transition: color .15s;
}
.form-sent__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.form-sent__link:hover { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .form-sent > * { animation: sent-in .45s var(--ease-rep) both; }
  .form-sent > :nth-child(2) { animation-delay: .1s; }
  .form-sent > :nth-child(3) { animation-delay: .2s; }
  .form-sent > :nth-child(4) { animation-delay: .3s; }
}
@keyframes sent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.form__legal a:hover { color: var(--accent); }
.btn--dark { background: var(--motus-noche); color: var(--motus-hueso); border: 1px solid var(--motus-noche); cursor: pointer; }
.btn--light { background: var(--motus-hueso); color: var(--motus-noche); border: 1px solid var(--motus-hueso); }

/* Pie */
.site-footer {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); justify-content: space-between; align-items: flex-end;
  padding: var(--space-7) var(--web-pad);
  border-top: 1px solid var(--border-dark);
  font: var(--body-s);
}
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.endorse { display: flex; align-items: center; gap: 6px; font: var(--label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: color .15s; }
a.endorse { align-self: flex-start; padding-block: var(--space-2); } /* área táctil sin estirar el enlace a todo el ancho */
/* Monograma K de Kovenant (copyright del pie): K en el color del texto y punto en cobre de Kovenant */
.site-footer__copy { display: inline-flex; align-items: center; gap: var(--space-2); }
.kov-mark { width: 14px; height: 14px; flex: none; }
.kov-mark__k { fill: currentColor; }
.kov-mark__stroke { fill: none; stroke: currentColor; stroke-width: 34; }
.kov-mark__dot { fill: var(--kovenant-cobre); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.site-footer__legal { color: var(--text-on-dark-muted); }
.site-footer ul a { display: inline-block; padding-block: var(--space-2); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--accent); }
/* Contacto del pie: icono en círculo (forma píldora de la marca) + etiqueta mono + dato.
   Hover: círculo e icono en Tartán, transición 150 ms (guía de movimiento). */
.site-footer__links { gap: var(--space-4) var(--space-6); }
.site-footer .contact-link { display: inline-flex; align-items: center; gap: var(--space-3); padding-block: var(--space-1); }
.contact-link__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border-dark); border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  transition: border-color .15s, color .15s;
}
.contact-link__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-link__text { display: flex; flex-direction: column; gap: 2px; font: var(--body-s); color: var(--text-on-dark); transition: color .15s; }
.contact-link__label { font: var(--label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-on-dark-muted); }
.contact-link:hover .contact-link__icon { border-color: var(--accent); color: var(--accent); }
.contact-link:hover .contact-link__text { color: var(--accent); }

/* ---------- Volver arriba ----------
   Círculo Noche con flecha Hueso: se ve sobre fondos claros y oscuros (borde + sombra).
   Hover: Tartán, como el resto de controles. Aparece con fundido (150 ms); oculto al inicio. */
.to-top {
  position: fixed; z-index: 4;
  right: var(--space-4); bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--surface-dark); color: var(--text-on-dark);
  border: 1px solid var(--border-dark);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .15s, visibility .15s, transform .15s, background-color .15s, color .15s;
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .to-top { right: var(--space-6); bottom: var(--space-6); } }

/* ---------- Páginas legales ---------- */
.legal { background: var(--surface-light); color: var(--text-on-light); padding: var(--space-7) var(--web-pad) var(--space-8); }
.legal__inner { max-width: 720px; }
.legal h1 { font: var(--display-m); font-size: clamp(44px, 12vw, 64px); text-transform: uppercase; }
.legal__date { margin-top: var(--space-4); font: var(--label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-on-light-muted); }
/* Página legal única: índice 01–03 + un apartado por texto (sistema numerado de la marca) */
.legal__toc ol { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-light); }
.legal__toc a { display: inline-flex; align-items: baseline; gap: var(--space-2); padding-block: var(--space-2); font: 600 16px/1.3 var(--font-body); text-decoration: none; }
.legal__n { font: var(--label); color: var(--text-on-light-muted); }
.legal__section { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-light); }
.legal h2 { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4); font: var(--display-s); text-transform: uppercase; }
.legal h3 { margin: var(--space-6) 0 var(--space-3); font: 600 20px/1.3 var(--font-body); }
.legal p, .legal li { font: var(--body); max-width: 68ch; }
.legal p + p { margin-top: var(--space-3); }
.legal ul { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.legal dl { display: grid; grid-template-columns: 1fr; margin: var(--space-5) 0 0; border-top: 1px solid var(--border-light); }
.legal dt { padding-top: var(--space-3); font: var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.legal dd { margin: 0; padding: var(--space-1) 0 var(--space-3); border-bottom: 1px solid var(--border-light); }
.legal a:hover { color: var(--accent); }
/* Huecos para rellenar: muy visibles y fáciles de buscar ("RELLENAR") */
.todo { background: var(--accent); color: var(--on-accent); padding: 0 4px; border-radius: var(--radius-s); font-weight: 600; }
@media (min-width: 600px) {
  .legal dl { grid-template-columns: 200px 1fr; }
  .legal dt, .legal dd { padding-block: var(--space-3); border-bottom: 1px solid var(--border-light); }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
  .status-card { position: absolute; top: var(--space-5); right: var(--space-5); }
  .services { grid-template-columns: repeat(4, 1fr); }
  .services li:nth-child(n) { padding: var(--space-4) var(--space-4) 0; border-top: 0; border-left: 1px solid var(--border-dark); }
  .services li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  :root { --web-gutter: var(--space-6); }
  .site-header { padding-block: 20px; }
  .site-nav ul { display: flex; }
  .menu-btn { display: none; }
  .hero { grid-template-columns: 1.25fr 1fr; min-height: 520px; }
  .hero__copy { padding: var(--space-8) var(--web-gutter) 40px; }
  /* Tamaño ligado al ancho de la columna: a 1024 px «TÚ ENTRENAS.» a 108 px no cabía y el titular
     se partía en 4 líneas, empujando los servicios fuera de la primera pantalla. */
  .hero__title { font-size: clamp(64px, calc(11.3vw - 15px), 108px); }
  .hero__visual { margin: var(--space-5) var(--web-gutter) var(--space-5) 0; }
  .hero__picture { position: absolute; inset: 0; aspect-ratio: auto; }
  .section { padding-block: var(--space-8); }
  .auto { grid-template-columns: 1fr 1.25fr; align-items: center; gap: var(--space-8); }
  .invoice { padding: 28px; }
  .method { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-8); align-items: end; }
  .steps { margin-top: 0; }
  .pricing__points { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .contact { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
  .form { padding: 28px; }
}

/* Casos a dos columnas solo con espacio para 2 tarjetas en la derecha (≥1200 px);
   entre 900 y 1199 px, texto arriba y tarjetas lado a lado (si no, se apilaban y la sección se alargaba). */
@media (min-width: 1200px) {
  .cases-section { grid-template-columns: 1fr 1.25fr; gap: var(--space-8); align-items: center; }
}