/* Fuentes alojadas en el proyecto; ver fonts/LEEME.txt */
  @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
  @font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
  /* Respaldo con las métricas de Inter, para que el texto no salte cuando carga la fuente */
  @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; }
  :root {
    color-scheme: light;
    /* Marca */
    --navy: #162836;
    --navy-900: #0e1b26;
    --navy-700: #22394b;
    --gold: #c2a05a;
    --gold-300: #d8be85;
    --gold-700: #86672a;
    --wa: #1da851;
    /* Superficies y texto sobre claro */
    --paper: #fff;
    --ivory: #f7f5f0;
    --line: #e4e0d6;
    --line-field: #8f8979;
    --line-field-hover: #6f6a5c;
    --ink: #17212b;
    --muted: #5a6672;
    --placeholder: #66727e;
    --danger: #a3271f;
    --danger-bg: #fbeeed;
    /* Texto y líneas sobre azul */
    --on-navy: #fff;
    --on-navy-2: #cfd8e0;
    --on-navy-3: #b9c4ce;
    --on-navy-label: #9fb0bf;
    --rule-on-navy: rgba(255, 255, 255, 0.16);
    --rule-on-navy-strong: rgba(255, 255, 255, 0.4);
    /* Forma, sombra y medidas */
    --r-sm: 4px;
    --r-md: 8px;
    --shadow-card: 0 30px 70px rgba(4, 12, 20, 0.4);
    --shadow-float: 0 10px 24px rgba(4, 12, 20, 0.25);
    --gutter: 32px;
    --section-y: 88px;
    --header-h: 60px;
    /* Tipografía */
    --t-micro: 0.75rem;
    --t-label: 0.8125rem;
    --t-small: 0.875rem;
    --t-body-s: 0.9375rem;
    --t-lead: 1.125rem;
    --t-h4: 1.125rem;
    --t-h3: 1.3125rem;
    /* Titulares de portada: SF Pro si el equipo la trae (Mac, iPhone); si no, Inter con el mismo carácter */
    --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Inter Fallback", "Segoe UI", system-ui, Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  }
  .sprite { position: absolute; }
  *, *::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%; scrollbar-color: var(--line-field) var(--ivory); }
  body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--paper); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--gold-300); color: var(--navy-900); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-underline-offset: 0.18em; }
  p { margin: 0; text-wrap: pretty; }
  h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; }
  h2 { font-size: clamp(1.6875rem, 3.1vw, 2.375rem); }
  h3 { font-size: var(--t-h3); line-height: 1.25; }
  :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
  .hero :focus-visible, .process :focus-visible, .contact :focus-visible, .footer :focus-visible { outline-color: var(--gold-300); }
  .card-form :focus-visible { outline-color: var(--navy); }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: var(--r-sm); background: var(--navy); font-weight: 600; color: var(--on-navy); text-decoration: none; }
  .skip:focus { top: 12px; }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
  .wrap > *, .grid-3 > *, .lists > *, .steps > *, .form-2 > *, .top > * { min-width: 0; }
  .section { padding: var(--section-y) 0; }
  .section--ivory { background: var(--ivory); }
  .section-head { max-width: 660px; margin-bottom: 48px; }
  .section-head p { margin-top: 14px; font-size: var(--t-lead); color: var(--muted); }
  .icon { width: 18px; height: 18px; flex: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 3.125rem; padding: 0.625rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-sm); font: 600 1rem/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: none; }
  .btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
  .btn--navy { background: var(--navy); color: var(--on-navy); }
  .btn--navy:hover { background: var(--navy-700); }
  .btn--ghost { border-color: var(--rule-on-navy-strong); color: var(--on-navy); }
  .btn--ghost:hover { border-color: var(--on-navy); }
  .btn--light { background: #fff; color: var(--navy); }
  .btn--light:hover { background: var(--gold-300); }

  /* Encabezado */
  /* Vidrio esmerilado como apple.com: arriba es liso; al bajar (.scrim) solo cambian dos variables y el fondo se transiciona */
  .header { --hdr-bg: var(--navy-900); --hdr-filter: none; position: sticky; top: 0; z-index: 50; background: var(--hdr-bg); -webkit-backdrop-filter: var(--hdr-filter); backdrop-filter: var(--hdr-filter); border-bottom: 1px solid transparent; transition: background-color 0.347s cubic-bezier(0.4, 0, 0.6, 1) 0.08s, border-color 0.347s cubic-bezier(0.4, 0, 0.6, 1) 0.08s; }
  .header.scrim { --hdr-bg: rgba(14, 27, 38, 0.72); --hdr-filter: saturate(180%) blur(20px); border-bottom-color: rgba(255, 255, 255, 0.08); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header.scrim { --hdr-bg: rgba(14, 27, 38, 0.94); } }
  @media (prefers-reduced-transparency: reduce) { .header.scrim { --hdr-bg: var(--navy-900); --hdr-filter: none; } }
  .header.open { --hdr-bg: var(--navy-900); --hdr-filter: none; border-bottom-color: var(--rule-on-navy); }
  .header :focus-visible { outline-color: var(--gold-300); }
  .header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: var(--header-h); padding-top: 0; padding-bottom: 0; }
  .logo { display: flex; align-items: center; text-decoration: none; }
  .logo img { width: auto; height: 44px; }
  .wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.625rem; line-height: 1; letter-spacing: 0.04em; color: var(--navy); }
  .wordmark small { display: block; margin-top: 4px; font: 500 0.6875rem/1.2 var(--sans); letter-spacing: 0.02em; color: var(--muted); }
  .header .wordmark { color: var(--on-navy); }
  .header .wordmark small { color: var(--on-navy-label); }
  .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; }
  .nav a { padding: 10px 0; font-size: var(--t-label); font-weight: 400; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1); }
  .nav a:hover { color: #fff; }
  .header .btn { flex: none; min-height: 2rem; padding: 0.375rem 1rem; border-radius: 980px; background: #fff; color: var(--navy); font-size: var(--t-label); letter-spacing: -0.01em; white-space: nowrap; }
  .header .btn:hover { background: rgba(255, 255, 255, 0.85); }
  .menu-btn { display: none; flex: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: #fff; cursor: pointer; }
  .menu-btn .icon { width: 22px; height: 22px; }
  .mobile-nav { display: none; border-top: 1px solid var(--rule-on-navy); background: var(--navy-900); }

  /* Portada */
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .d2 { animation-delay: 0.12s; }
  .d3 { animation-delay: 0.24s; }
  .hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-900); color: var(--on-navy); }
  /* Velo sobre la foto: cerrado bajo el texto y abierto al centro, donde queda la estatua */
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--navy-900) calc(50% - 21rem), rgba(14, 27, 38, 0.93) calc(50% - 11rem), rgba(14, 27, 38, 0.78) calc(50% - 7.5rem), rgba(14, 27, 38, 0.5) calc(50% - 3rem), rgba(14, 27, 38, 0.26) calc(50% + 2rem), rgba(14, 27, 38, 0.26) calc(50% + 22rem), rgba(14, 27, 38, 0.62) calc(50% + 40rem)), linear-gradient(0deg, rgba(14, 27, 38, 0.55), rgba(14, 27, 38, 0) 30%); }
  /* Foto del sitio actual, fija (no se desplaza con la página). Se ancla por la estatua, centrada a 36.6% del ancho, para que quede a la derecha del texto con el mazo a su lado */
  .hero-foto { position: absolute; top: 0; left: calc(50% + 8.5rem); z-index: -2; display: block; height: max(100%, 48rem); aspect-ratio: 3 / 2; transform: translateX(-36.6%); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .hero-foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 29rem); align-items: center; min-height: 45rem; padding-top: 80px; padding-bottom: 88px; }
  .hero h1 { font-family: var(--display); font-size: clamp(2.125rem, 3.9vw, 3.5rem); font-weight: 600; line-height: 1.0714; letter-spacing: -0.02em; color: var(--on-navy); }
  .hero h1 span { display: block; }
  .hero h1 .oferta { color: var(--gold-300); }
  .hero .lead { max-width: 27rem; margin-top: 20px; font-size: 1.0625rem; color: var(--on-navy-2); }
  .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
  .hero-cta .btn { min-height: 2.875rem; padding: 0.5rem 1.25rem; font-size: var(--t-body-s); }
  .cta-note { flex: 1 0 100%; max-width: 27rem; font-size: var(--t-small); line-height: 1.55; color: var(--on-navy-3); }
  /* Condiciones del servicio, un renglón por condición */
  .terms { margin: 36px 0 0; border-top: 1px solid var(--rule-on-navy); }
  .terms div { display: flex; flex-wrap: wrap; gap: 2px 20px; padding: 10px 0; }
  .terms div + div { border-top: 1px solid var(--rule-on-navy); }
  .terms dt { flex: 0 0 7.5rem; padding-top: 0.22em; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300); }
  .terms dd { flex: 1 1 12rem; margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--on-navy-2); }

  /* Formularios */
  .card-form { padding: 2rem; border-radius: var(--r-md); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
  .card-form h2, .card-form h3 { font-size: 1.5rem; }
  .card-form .hint { margin-top: 8px; font-size: var(--t-body-s); color: var(--muted); }
  .ic-badge { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; background: var(--navy); color: var(--gold-300); }
  .ic-badge .icon { width: 20px; height: 20px; }
  .field { margin-top: 16px; }
  .field label { display: block; margin-bottom: 6px; font-size: var(--t-label); font-weight: 600; }
  .field .opt { font-weight: 400; color: var(--muted); }
  .field input, .field select, .field textarea { width: 100%; min-height: 2.875rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line-field); border-radius: var(--r-sm); background: var(--paper); font: 400 1rem/1.4 var(--sans); color: var(--ink); caret-color: var(--navy); transition: border-color 0.15s, box-shadow 0.15s; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-field-hover); }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
  .field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
  .field textarea { min-height: 6.5rem; resize: vertical; }
  .field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
  .field .in { position: relative; }
  .field .in > .icon { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--placeholder); pointer-events: none; }
  .field .in input, .field .in select { padding-left: 42px; }
  /* "¿Qué necesita?": opciones con forma de botón; el radio sigue siendo el control real (teclado y lector de pantalla) */
  .chips { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
  .chips legend { margin-bottom: 6px; padding: 0; font-size: var(--t-label); font-weight: 600; }
  .chip-set { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip-set label { position: relative; display: flex; margin: 0; font-size: inherit; font-weight: 500; }
  .chip-set input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
  .chip-set span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line-field); border-radius: var(--r-sm); font-size: var(--t-body-s); line-height: 1.25; text-align: center; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
  .chip-set input:hover + span { border-color: var(--line-field-hover); }
  .chip-set input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--on-navy); }
  .chip-set input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
  @media (forced-colors: active) { .chip-set input:checked + span { outline: 3px solid; outline-offset: -4px; } }
  .error { margin-top: 6px; font-size: var(--t-label); font-weight: 500; color: var(--danger); }
  .card-form .btn { width: 100%; margin-top: 22px; }
  .legal { margin-top: 12px; font-size: var(--t-label); color: var(--muted); }
  .legal a, .check a { color: var(--navy); font-weight: 500; }
  .form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: var(--t-small); color: var(--muted); }
  .check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); }
  .form-status { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--danger-bg); font-size: var(--t-body-s); color: var(--danger); }
  .form-status a { font-weight: 600; }
  .hp { position: absolute; left: -9999px; }
  .form-done :is(h2, h3):focus { outline: none; }
  .form-done p { margin-top: 10px; color: var(--muted); }
  .form-done a { color: var(--navy); font-weight: 600; white-space: nowrap; }
  .form-done b { font-weight: 600; color: var(--ink); }
  /* Enviar otro mensaje: acción secundaria, con aspecto de enlace y área táctil completa */
  .form-again { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 14px; padding: 0; border: 0; background: none; font: 600 var(--t-body-s)/1.2 var(--sans); color: var(--navy); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  .form-again:hover { color: var(--gold-700); }

  /* Clientes */
  .clients { padding: 40px 0; border-bottom: 1px solid var(--line); }
  .clients .wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 40px; align-items: center; }
  .clients h2 { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .logos { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; align-items: center; margin: 0; padding: 0; list-style: none; }
  .logos img { width: 100%; max-width: 64px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; filter: grayscale(1); opacity: 0.75; }
  /* Con JavaScript: tres logotipos a la vez. Los que salen suben y se desenfocan; los que entran llegan desde abajo, uno tras otro */
  .logos.logos--rot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0; height: 96px; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logos.logos--rot li { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--slot, 0) * 0.12s); }
  .logos.logos--rot li.is-on { opacity: 1; transform: none; filter: none; transition-delay: calc(0.15s + var(--slot, 0) * 0.12s); }
  .logos.logos--rot li.is-off { transform: translateY(-12px); transition-duration: 0.55s; }
  .logos.logos--rot img { max-width: 132px; }
  .logos-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
  .logos-toggle:hover { color: var(--navy); }
  .logos-toggle .icon { width: 14px; height: 14px; }

  /* Servicios de cobranza */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .svc { position: relative; display: flex; flex-direction: column; padding: 32px 30px 28px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
  .svc::before { content: ""; position: absolute; left: -1px; top: -1px; width: 56px; height: 3px; background: var(--gold); }
  .svc .num { font: 600 var(--t-body-s) var(--serif); letter-spacing: 0.08em; color: var(--gold-700); }
  .svc h3 { margin-top: 14px; }
  .svc > h3:first-child { margin-top: 0; }
  .svc p { margin-top: 12px; color: var(--muted); }
  .svc .tag { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t-small); font-weight: 500; }
  .svc .tag .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--gold-700); }
  .more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: var(--t-body-s); font-weight: 600; color: var(--navy); text-decoration: none; }
  .more .icon { width: 16px; height: 16px; transition: transform 0.15s; }
  .more:hover .icon { transform: translateX(3px); }

  /* Cómo trabajamos */
  .process { background: var(--navy); color: var(--on-navy); }
  .process h2 { color: var(--on-navy); }
  .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
  .steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: var(--rule-on-navy); }
  .steps li { position: relative; }
  .steps .n { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--gold-300); border-radius: 50%; background: var(--navy); font: 600 1.0625rem var(--serif); color: var(--gold-300); }
  .steps h3 { margin-top: 20px; font-size: var(--t-h4); color: var(--on-navy); }
  .steps p { margin-top: 8px; font-size: var(--t-body-s); color: var(--on-navy-2); }

  /* Más servicios */
  .lists { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
  .list h2 { padding-bottom: 16px; border-bottom: 2px solid var(--navy); font-size: var(--t-h3); line-height: 1.25; }
  .list a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 500; text-decoration: none; }
  .list a > span:first-child { flex: 1 1 9rem; }
  .list a small { display: block; margin-top: 2px; font-size: var(--t-small); font-weight: 400; color: var(--muted); }
  .list a .icon { color: var(--gold-700); transition: transform 0.15s; }
  .list a .go { display: inline-flex; flex: none; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 600; color: var(--gold-700); }
  .list a:hover { color: var(--gold-700); }
  .list a:hover small { color: var(--muted); }
  .list a:hover .icon { transform: translateX(3px); }

  /* Nosotros */
  .about .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .about-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--navy-700), var(--navy)); }
  .about-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55); }
  .about-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 40, 54, 0.1), rgba(22, 40, 54, 0.5)); }
  .about p.text { margin-top: 18px; font-size: var(--t-lead); color: var(--muted); }

  /* Preguntas frecuentes */
  .faq .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
  .faq .section-head { margin-bottom: 0; }
  .faq .more { padding-top: 26px; }
  details { border-bottom: 1px solid var(--line); }
  details:first-of-type { border-top: 1px solid var(--line); }
  summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font: 600 var(--t-h4)/1.35 var(--serif); color: var(--navy); cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  summary:hover { color: var(--gold-700); }
  summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--gold-700), var(--gold-700)) center / 100% 2px no-repeat, linear-gradient(var(--gold-700), var(--gold-700)) center / 2px 100% no-repeat; }
  details[open] summary::after { background-size: 100% 2px, 0 0; }
  details p { padding: 0 40px 24px 0; color: var(--muted); }
  details p a { font-weight: 600; color: var(--navy); }

  /* Contacto */
  .contact { background: var(--navy); color: var(--on-navy); }
  .contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27.5rem); grid-template-rows: auto 1fr; gap: 0 72px; align-items: start; }
  .contact-head { grid-column: 1; grid-row: 1; }
  .contact .card-form { grid-column: 2; grid-row: 1 / span 2; }
  .contact .contact-list { grid-column: 1; grid-row: 2; }
  .contact h2 { color: var(--on-navy); }
  .contact .card-form h2, .contact .card-form h3 { color: var(--navy); }
  .contact .lead { max-width: 30rem; margin-top: 16px; font-size: var(--t-lead); color: var(--on-navy-2); }
  /* En Contacto la sección abre la página: ruta y título como en las demás portadas interiores */
  .contact--page { padding-top: 40px; background: radial-gradient(110% 95% at 88% 0%, var(--navy-700) 0%, var(--navy) 38%, var(--navy-900) 78%); }
  .contact--page h1 { max-width: 14ch; font-family: var(--display); font-size: clamp(2.25rem, 4.2vw, 3.75rem); font-weight: 600; line-height: 1.03; letter-spacing: -0.028em; color: var(--on-navy); }
  .contact-list { display: grid; gap: 22px; margin: 36px 0 0; padding: 0; list-style: none; }
  .contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
  .contact-list .ic { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-on-navy); border-radius: 50%; }
  .contact-list .icon { width: 17px; height: 17px; color: var(--gold-300); }
  .contact-list b { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-label); }
  .contact-list a, .contact-list span { display: block; color: var(--on-navy); text-decoration: none; }
  .contact-list a { margin: -9px 0; padding: 9px 0; }
  .contact-list a:hover { text-decoration: underline; }

  /* Pie de página */
  .footer { border-top: 1px solid var(--rule-on-navy); background: var(--navy-900); font-size: var(--t-body-s); color: var(--on-navy-3); }
  .footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding: 64px 0 48px; }
  .footer .wordmark { color: var(--on-navy); }
  .footer .wordmark small { color: var(--on-navy-label); }
  .footer .about-text { max-width: 30ch; margin-top: 18px; }
  .footer h2 { margin: 0 0 16px; font: 600 var(--t-label) var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); }
  .footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .footer a { color: var(--on-navy-3); text-decoration: none; }
  .footer a:hover { color: var(--on-navy); }
  .footer .bottom { display: flex; justify-content: space-between; gap: 20px; padding: 22px 76px 22px 0; border-top: 1px solid var(--rule-on-navy); font-size: var(--t-small); }
  .footer .bottom div { display: flex; flex-wrap: wrap; gap: 8px 22px; }

  /* WhatsApp flotante y barra de acciones en celular */
  .wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: var(--shadow-float); transition: transform 0.15s; }
  .wa-float .icon { width: 30px; height: 30px; }
  .wa-float:hover { transform: scale(1.06); }
  .wa-float:focus-visible { box-shadow: 0 0 0 3px #fff, var(--shadow-float); }
  @media (max-width: 83.75em) {
    .wa-float { right: 12px; bottom: 16px; width: 48px; height: 48px; }
    .wa-float .icon { width: 26px; height: 26px; }
  }
  .mbar { display: none; }

  @media (max-width: 67.5em) {
    .nav { display: none; }
    .menu-btn { display: grid; }
    /* El menú ocupa la pantalla y se despliega como una hoja que baja desde la barra */
    .header.open .mobile-nav { display: block; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; animation: sheet 0.44s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .header .btn { margin-left: auto; }
    .hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 64px; padding-bottom: 72px; }
    .hero-text { max-width: 29rem; }
    .hero-foto { left: calc(50% + 14.5rem); height: 36rem; }
    .hero::after { background: linear-gradient(180deg, rgba(14, 27, 38, 0) 24rem, var(--navy-900) 35.5rem), linear-gradient(90deg, var(--navy-900) 15rem, rgba(14, 27, 38, 0.88) 28.5rem, rgba(14, 27, 38, 0.3) 32.5rem); }
    /* Pantallas táctiles: botón a tamaño completo */
    .hero-cta .btn { min-height: 3.125rem; padding: 0.625rem 1.5rem; font-size: 1rem; }
    .clients .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
    .clients .logos { grid-column: 1 / -1; grid-row: 2; }
    .logos-toggle { grid-column: 2; grid-row: 1; }
    .logos { grid-template-columns: repeat(7, 1fr); }
    .grid-3 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .steps::before { display: none; }
    .lists, .about .wrap, .faq .wrap, .contact .wrap { grid-template-columns: 1fr; gap: 40px; }
    /* En una columna: título, tarjeta y después los datos de contacto */
    .contact .wrap { grid-template-rows: none; }
    .contact-head, .contact .card-form, .contact .contact-list { grid-column: auto; grid-row: auto; }
    .contact .contact-list { margin-top: 0; }
    .footer .top { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 45em) {
    :root { --gutter: 20px; --section-y: 56px; --header-h: 56px; }
    html { scroll-padding-bottom: 5rem; }
    .footer { padding-bottom: calc(min(3.875rem, 20vw) + env(safe-area-inset-bottom)); }
    .section-head { margin-bottom: 32px; }
    .header .btn { display: none; }
    .logo img { height: 40px; }
    .hero .wrap { padding-top: 4px; padding-bottom: 48px; }
    .hero-foto { position: relative; left: auto; width: 100%; height: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
    .hero::after { background: linear-gradient(180deg, rgba(14, 27, 38, 0.15) 46vw, var(--navy-900) 66.5vw); }
    .hero-cta .btn { width: 100%; padding: 0.75rem 1rem; }
    /* En celular el llamado va en dos renglones, agrupado con su icono */
    .cta-txt { text-align: left; }
    .cta-txt > span { display: block; }
    .terms { margin-top: 28px; }
    .hero h1 { font-size: min(2rem, 10vw); }
    .hero h1 span { display: inline; }
    .hero h1 .oferta { display: block; }
    .card-form { padding: 1.5rem 1.25rem; }
    .form-2 { grid-template-columns: 1fr; }
    .clients { padding: 32px 0; }
    .logos.logos--rot { height: 76px; }
    .logos.logos--rot img { max-width: 100px; }
    .logos { display: flex; gap: 24px; overflow-x: auto; padding: 0 18% 6px 0; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .logos::-webkit-scrollbar { display: none; }
    .logos li { flex: 0 0 64px; scroll-snap-align: start; }
    .svc { padding: 26px 22px 24px; }
    .steps { grid-template-columns: 1fr; gap: 0; }
    .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; padding-bottom: 28px; }
    .steps li::before { content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px; background: var(--rule-on-navy); }
    .steps li:last-child { padding-bottom: 0; }
    .steps li:last-child::before { display: none; }
    .steps .n { grid-row: span 2; }
    .steps h3 { margin-top: 8px; }
    summary { padding: 18px 0; }
    details p { padding-right: 0; }
    .footer .top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; padding: 48px 0 32px; }
    .footer .top > :first-child { grid-column: 1 / -1; }
    /* Servicios legales (la lista más larga) ocupa la columna derecha; Despacho queda debajo de Servicios */
    .footer .top > :nth-child(3) { grid-row: span 2; }
    .footer .bottom { flex-direction: column; gap: 8px; padding-right: 0; }
    .footer ul { gap: 0; }
    .footer li a, .footer .bottom a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
    .footer .bottom div { gap: 0 2px; margin-left: -8px; }
    .footer .bottom a { justify-content: center; min-width: 44px; padding: 0 8px; }
    .wa-float { display: none; }
    .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -6px 20px rgba(4, 12, 20, 0.08); }
    .mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: min(3.875rem, 20vw); font-size: min(var(--t-micro), 4vw); font-weight: 600; color: var(--navy); text-decoration: none; }
    .mbar a + a { border-left: 1px solid var(--line); }
    .mbar .icon { width: 20px; height: 20px; }
    .mbar .wa .icon { color: var(--wa); }
    .mbar .primary { border-left: 0; background: var(--navy); color: var(--on-navy); }
    .mbar a:focus-visible { outline-offset: -4px; }
    .mbar .primary:focus-visible { outline-color: var(--gold-300); }
    .menu-open .mbar { display: none; }
  }

  /* Pantallas bajas (celular horizontal o letra muy grande): el encabezado deja de quedarse fijo */
  @media (max-height: 30em) {
    html { scroll-padding-top: 16px; }
    .header { position: static; }
    .header.open .mobile-nav { height: auto; }
  }

  /* Alto contraste de Windows: el indicador de las preguntas se dibuja con el color de texto del sistema */
  @media (forced-colors: active) {
    summary::after { forced-color-adjust: none; background-image: linear-gradient(CanvasText, CanvasText), linear-gradient(CanvasText, CanvasText); }
  }

  /* Sin movimiento: se conserva el cambio de color, se quitan los desplazamientos */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise { animation: fade 0.3s both; }
    .btn:hover, .wa-float:hover, .more:hover .icon, .list a:hover .icon { transform: none; }
    .logos.logos--rot li, .logos.logos--rot li.is-on, .logos.logos--rot li.is-off { transform: none; filter: none; transition: opacity 0.4s linear; transition-delay: 0s; }
  }

  /* ---------- Páginas interiores ---------- */
  /* Navegación: página actual */
  .nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--gold-300); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .mnav-row[aria-current="page"], .mnav-go[data-current] { color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold-300); }

  /* Encabezado de página: banda azul con ruta, título y entrada */
  .page-hero { background: var(--navy-900); color: var(--on-navy); }
  .page-hero .wrap { padding-top: 48px; padding-bottom: 64px; }
  .page-hero :focus-visible { outline-color: var(--gold-300); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 28px; padding: 0; list-style: none; font-size: var(--t-small); color: var(--on-navy-3); }
  .crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--on-navy-label); }
  .crumbs a { color: var(--on-navy-2); text-decoration: none; }
  .crumbs a:hover { color: var(--on-navy); text-decoration: underline; }
  .page-hero h1 { max-width: 22ch; font-family: var(--display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--on-navy); }
  .page-hero .lead { max-width: 42rem; margin-top: 18px; font-size: var(--t-lead); color: var(--on-navy-2); }

  /* Texto largo */
  .prose { max-width: 46rem; }
  .prose > * + * { margin-top: 18px; }
  .prose h2 { margin-top: 56px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; }
  .prose h3 { margin-top: 36px; font-size: var(--t-h3); }
  .prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
  .prose ul, .prose ol { margin-bottom: 0; padding: 0; }
  .prose ul { list-style: none; }
  .prose ul > li { position: relative; padding-left: 22px; }
  .prose ol { padding-left: 1.4em; }
  .prose li + li { margin-top: 10px; }
  .prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--gold); }
  .prose .cols-2 { columns: 2; column-gap: 40px; }
  .prose .cols-2 > li { break-inside: avoid; }
  /* El espacio va abajo: con padding arriba la viñeta se separa de su renglón y la segunda columna arranca más abajo */
  .prose .cols-2 > li { padding-bottom: 10px; }
  .prose .cols-2 > li + li { margin-top: 0; }
  .prose .note { padding: 16px 20px; border-radius: var(--r-sm); background: var(--ivory); font-size: var(--t-body-s); color: var(--muted); }
  .prose a:not(.btn) { color: var(--navy); font-weight: 500; }
  /* Término y su explicación */
  .defs { margin: 0; }
  .defs > div { padding: 16px 0; border-top: 1px solid var(--line); }
  .defs > div:last-child { border-bottom: 1px solid var(--line); }
  .defs dt { font-weight: 600; color: var(--navy); }
  .defs dd { margin: 4px 0 0; color: var(--muted); }

  /* Servicio en detalle: título a la izquierda, explicación a la derecha */
  .svc-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); }
  .svc-row:first-child { padding-top: 0; border-top: 0; }
  .svc-row:last-child { padding-bottom: 0; }
  .svc-row .num { font: 600 var(--t-body-s) var(--serif); letter-spacing: 0.08em; color: var(--gold-700); }
  .svc-row h2 { margin-top: 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .svc-row .pitch { margin-top: 14px; font-size: var(--t-lead); color: var(--muted); }
  .svc-row .tag { display: flex; gap: 8px; margin-top: 20px; font-size: var(--t-small); font-weight: 600; color: var(--navy); }
  .svc-row .tag .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--gold-700); }

  /* Rasgos del servicio en tres columnas */
  .feature { padding-top: 22px; border-top: 2px solid var(--gold); }
  .feature h3 { font-size: var(--t-h4); }
  .feature p { margin-top: 10px; color: var(--muted); }

  /* Otras materias / índice de páginas */
  .list--page { max-width: 46rem; }
  .list a[aria-current="page"] { color: var(--gold-700); }

  @media (max-width: 67.5em) {
    .svc-row { grid-template-columns: 1fr; gap: 20px; padding: 44px 0; }
  }
  @media (max-width: 45em) {
    .page-hero .wrap { padding-top: 28px; padding-bottom: 40px; }
    .crumbs ol { margin-bottom: 18px; }
    .prose h2 { margin-top: 40px; }
    .prose .cols-2 { columns: 1; }
  }

  /* Formulario: Turnstile y aviso de espera */
  .cf-turnstile { margin-top: 12px; }
  .form-status--wait { background: var(--ivory); color: var(--ink); }

  /* ---------- Menú de Servicios, como el de apple.com ---------- */
  /* La barra se alarga hacia abajo como una sola hoja (clip-path), la página de atrás se difumina y los enlaces
     llegan en cascada, columna por columna. Abre en 0.44 s y cierra en 0.24 s. */
  .nav-fly { display: flex; }
  .nav-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 10px 0; border: 0; background: none; font: 400 var(--t-label)/1.6 var(--sans); letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1); }
  .nav-trigger .icon { width: 11px; height: 11px; opacity: 0.7; transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1); }
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: #fff; }
  .nav-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .nav-trigger[data-current] { color: #fff; text-decoration: underline 2px var(--gold-300); text-underline-offset: 8px; }
  .fly { position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid var(--rule-on-navy); background: var(--navy-900); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.24s cubic-bezier(0.4, 0, 0.6, 1), visibility 0s linear 0.24s; }
  .header.fly-open { --hdr-bg: var(--navy-900); --hdr-filter: none; border-bottom-color: transparent; }
  .header.fly-open .fly { visibility: visible; clip-path: inset(0 0 -2px 0); transition: clip-path 0.44s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .fly :focus-visible { outline-color: var(--gold-300); }
  .header .fly-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 56px; min-height: 0; padding-top: 34px; padding-bottom: 36px; }
  .fly-h { margin: 0 0 12px; font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.01em; color: var(--on-navy-label); }
  .fly ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .fly li, .fly-cta { opacity: 0; transform: translateY(-6px); transition: opacity 0.16s ease-in, transform 0.16s ease-in; }
  .header.fly-open .fly li, .header.fly-open .fly-cta { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(70ms + var(--c, 0) * 45ms + var(--r, 0) * 26ms); }
  .fly-col:nth-child(2) { --c: 1; }
  .fly-col:nth-child(3) { --c: 2; }
  .fly-cta { --c: 3; --r: 3; }
  .fly li:nth-child(2) { --r: 1; }
  .fly li:nth-child(3) { --r: 2; }
  .fly li:nth-child(4) { --r: 3; }
  .fly li:nth-child(5) { --r: 4; }
  .fly a { text-decoration: none; }
  .fly-col--lead a { display: block; padding: 5px 0; }
  .fly-col--lead b { display: block; font: 600 1.5rem/1.17 var(--display); letter-spacing: -0.015em; color: var(--on-navy); transition: color 0.2s; }
  .fly-col--lead span { display: block; margin-top: 2px; font-size: var(--t-label); color: var(--on-navy-3); }
  .fly-col--lead a:hover b, .fly-col--lead a[aria-current="page"] b { color: var(--gold-300); }
  .fly-col:not(.fly-col--lead) a { display: block; padding: 5px 0; font-size: var(--t-body-s); color: var(--on-navy-2); transition: color 0.2s; }
  .fly-col:not(.fly-col--lead) a:hover { color: #fff; }
  .fly-col:not(.fly-col--lead) a[aria-current="page"] { color: var(--gold-300); }
  .fly-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule-on-navy); font-size: var(--t-small); color: var(--on-navy-3); }
  .fly-cta b { color: var(--gold-300); font-weight: 600; }
  .fly-cta .icon { width: 15px; height: 15px; color: var(--gold-300); transition: transform 0.2s; }
  .fly-cta:hover .icon { transform: translateX(3px); }
  /* Lo que queda detrás del menú: velo con desenfoque, debajo del encabezado */
  .fly-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(14, 27, 38, 0.34); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); opacity: 0; visibility: hidden; transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1), visibility 0s linear 0.24s; }
  .fly-scrim.on { opacity: 1; visibility: visible; transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .wa-float { transition: transform 0.15s, opacity 0.24s; }
  .fly-on .wa-float { opacity: 0; pointer-events: none; }
  /* Al elegir un enlace el menú se cierra sin animación para que la página nueva entre limpia */
  .fly-instant .fly, .fly-instant .fly li, .fly-instant .fly-cta, .fly-instant .fly-scrim, .fly-instant .header { transition: none !important; }
  /* Sin JavaScript: el menú se abre con el cursor o al llegar con el tabulador */
  .header:not(.js-fly) .nav-fly:hover .fly, .header:not(.js-fly) .nav-fly:focus-within .fly { visibility: visible; clip-path: inset(0 0 -2px 0); transition: clip-path 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, visibility 0s 0.1s; }
  .header:not(.js-fly) .nav-fly:hover .fly li, .header:not(.js-fly) .nav-fly:focus-within .fly li, .header:not(.js-fly) .nav-fly:hover .fly-cta, .header:not(.js-fly) .nav-fly:focus-within .fly-cta { opacity: 1; transform: none; }

  /* Menú en celular: panel principal y subpanel de Servicios que entra desde la derecha */
  @keyframes sheet { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes row-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .mnav { position: relative; overflow: hidden; min-height: 100%; }
  .mnav-panel { transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.3s, visibility 0s linear 0.3s; }
  .mnav-sub { position: absolute; top: 0; left: 0; right: 0; padding-bottom: 32px; transform: translateX(100%); visibility: hidden; }
  .mnav.sub-open .mnav-main { position: absolute; top: 0; left: 0; right: 0; transform: translateX(-28%); opacity: 0; visibility: hidden; }
  .mnav.sub-open .mnav-sub { position: relative; transform: none; visibility: visible; transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .mnav:not(.sub-open) .mnav-main { transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
  .mnav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px var(--gutter); border: 0; border-bottom: 1px solid var(--rule-on-navy); background: none; font: 400 1rem/1.5 var(--sans); color: rgba(255, 255, 255, 0.9); text-align: left; text-decoration: none; cursor: pointer; }
  .mnav-go .icon { width: 16px; height: 16px; color: var(--on-navy-label); transform: rotate(180deg); }
  .mnav-row--lead { flex-direction: column; align-items: flex-start; gap: 2px; border-bottom: 0; padding-top: 10px; padding-bottom: 10px; font: 600 1.25rem/1.25 var(--display); letter-spacing: -0.01em; color: #fff; }
  .mnav-row--lead small { font: 400 var(--t-label)/1.4 var(--sans); color: var(--on-navy-3); }
  .mnav-back { display: flex; align-items: center; gap: 6px; padding: 14px var(--gutter) 6px; border: 0; background: none; font: 500 var(--t-body-s) var(--sans); color: var(--gold-300); cursor: pointer; }
  .mnav-back .icon { width: 16px; height: 16px; }
  .mnav-h { margin: 0; padding: 22px var(--gutter) 6px; font-size: var(--t-micro); font-weight: 500; color: var(--on-navy-label); }
  .mnav-cta { display: flex; align-items: center; justify-content: center; min-height: 3rem; margin: 28px var(--gutter) 0; border-radius: var(--r-sm); background: #fff; color: var(--navy); font: 600 1rem/1 var(--sans); text-decoration: none; }
  .mnav-cta:hover { background: var(--gold-300); }
  .mnav :focus-visible { outline-color: var(--gold-300); outline-offset: -3px; }
  .header.open .mnav-main > *, .mnav.sub-open .mnav-sub > * { animation: row-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--r, 0) * 32ms); }
  .mnav-panel > :nth-child(2) { --r: 1; }
  .mnav-panel > :nth-child(3) { --r: 2; }
  .mnav-panel > :nth-child(4) { --r: 3; }
  .mnav-panel > :nth-child(5) { --r: 4; }
  .mnav-panel > :nth-child(6) { --r: 5; }
  .mnav-panel > :nth-child(n + 7) { --r: 6; }

  /* ---------- Movimiento al bajar ---------- */
  /* Solo con JavaScript y sin "reducir movimiento"; lo que ya está a la vista al cargar no se anima */
  .js-motion [data-reveal] { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  .js-motion [data-reveal]:not(.in) { opacity: 0; transform: translateY(28px); }
  /* Listas: aparecen como lista, un renglón tras otro (con tope) */
  .js-motion [data-reveal="list"] { transform: none !important; opacity: 1 !important; }
  .js-motion [data-reveal="list"] > * { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(min(var(--i, 0), 5) * 70ms); }
  .js-motion [data-reveal="list"]:not(.in) > * { opacity: 0; transform: translateY(18px); }
  [data-reveal="list"] > :nth-child(2) { --i: 1; }
  [data-reveal="list"] > :nth-child(3) { --i: 2; }
  [data-reveal="list"] > :nth-child(4) { --i: 3; }
  [data-reveal="list"] > :nth-child(5) { --i: 4; }
  [data-reveal="list"] > :nth-child(n + 6) { --i: 5; }
  /* El trazo que une los pasos se dibuja de izquierda a derecha */
  .steps::before { transform-origin: left; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
  .js-motion .steps:not(.in)::before { transform: scaleX(0); }

  /* Paso entre páginas: la barra se queda y el contenido se funde, sin parpadeo en blanco */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .header { view-transition-name: encabezado; }
    ::view-transition-old(root) { animation: vt-out 0.2s cubic-bezier(0.4, 0, 1, 1) both; }
    ::view-transition-new(root) { animation: vt-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

  /* ---------- Portada de página interior (plantilla premium) ---------- */
  .phero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(110% 95% at 88% 0%, var(--navy-700) 0%, var(--navy) 38%, var(--navy-900) 78%); color: var(--on-navy); }
  .phero :focus-visible { outline-color: var(--gold-300); }
  .phero .wrap { padding-top: 40px; padding-bottom: 72px; }
  .phero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; }
  .phero h1 { font-family: var(--display); font-size: clamp(2.375rem, 4.6vw, 4.25rem); font-weight: 600; line-height: 1.03; letter-spacing: -0.028em; color: var(--on-navy); }
  .phero h1 span { display: block; color: var(--gold-300); }
  .phero .lead { max-width: 33rem; margin-top: 24px; font-size: 1.1875rem; line-height: 1.55; color: var(--on-navy-2); }
  .phero .hook { max-width: 33rem; margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; color: var(--on-navy-2); }
  .phero .hook b { font-weight: 600; color: var(--gold-300); }
  .phero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .terms--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; }
  .terms--row div, .terms--row div + div { display: block; padding: 18px 24px 0 0; border-top: 0; }
  .terms--row div + div { padding-left: 24px; border-left: 1px solid var(--rule-on-navy); }
  .terms--row dt { margin-bottom: 6px; }

  /* El círculo de los cuatro frentes: el trazo dorado cierra el círculo alrededor de "Su empresa" y cada frente
     aparece cuando el trazo pasa por él. Es el momento de la página. */
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes node-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
  .orbit { position: relative; width: min(100%, 27rem); aspect-ratio: 1; margin: 0 0 0 auto; }
  .orbit > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
  .orbit > svg circle { fill: none; stroke-width: 1.5; }
  .orbit .track { stroke: var(--rule-on-navy); }
  .orbit .prog { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.7s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
  .orbit-core { position: absolute; inset: 30%; display: grid; place-content: center; text-align: center; }
  .orbit-core b { font: 600 clamp(1.25rem, 2vw, 1.625rem)/1.1 var(--serif); color: var(--on-navy); }
  .orbit-core span { margin-top: 6px; font-size: var(--t-small); color: var(--on-navy-3); }
  .orbit ol { margin: 0; padding: 0; list-style: none; }
  .orbit li { position: absolute; transform: translate(-50%, -50%); animation: node-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .orbit li:nth-child(1) { left: 50%; top: 12.5%; animation-delay: 0.4s; }
  .orbit li:nth-child(2) { left: 87.5%; top: 50%; animation-delay: 0.82s; }
  .orbit li:nth-child(3) { left: 50%; top: 87.5%; animation-delay: 1.25s; }
  .orbit li:nth-child(4) { left: 12.5%; top: 50%; animation-delay: 1.67s; }
  .orbit a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
  .orbit a > span:first-child { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--gold-300); border-radius: 50%; background: var(--navy-900); color: var(--gold-300); transition: background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .orbit .icon { width: 24px; height: 24px; }
  /* La etiqueta es una pastilla: el trazo del círculo pasa por detrás sin cruzar el texto */
  .orbit li b { padding: 4px 11px; border: 1px solid var(--rule-on-navy); border-radius: 999px; background: var(--navy-900); font: 600 var(--t-small)/1.2 var(--sans); color: var(--on-navy); white-space: nowrap; }
  .orbit a:hover > span:first-child, .orbit a:focus-visible > span:first-child { background: var(--gold-300); color: var(--navy-900); transform: scale(1.06); }
  .orbit a:focus-visible { outline: none; }

  /* Gestión de cartera: la vida de una cuenta por cobrar. El trazo dorado avanza de una etapa a la siguiente */
  @keyframes grow-y { from { transform: scaleY(0); } }
  @keyframes grow-x { from { transform: scaleX(0); } }
  .ciclo { width: min(100%, 21rem); margin: 0 0 0 auto; }
  .ciclo ol { position: relative; display: grid; gap: 44px; margin: 0; padding: 0; list-style: none; }
  .ciclo ol::before, .ciclo ol::after { content: ""; position: absolute; left: 28px; top: 29px; bottom: 29px; width: 2px; background: var(--rule-on-navy); }
  .ciclo ol::after { background: var(--gold); transform-origin: top; animation: grow-y 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; }
  .ciclo li { position: relative; z-index: 1; animation: fade 0.6s both; }
  .ciclo li:nth-child(2) { animation-delay: 0.8s; }
  .ciclo li:nth-child(3) { animation-delay: 1.4s; }
  .ciclo a { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; align-items: center; text-decoration: none; }
  .ciclo a > span { grid-row: span 2; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--gold-300); border-radius: 50%; background: var(--navy-900); color: var(--gold-300); transition: background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .ciclo .icon { width: 24px; height: 24px; }
  .ciclo b { align-self: end; font: 600 var(--t-h4)/1.2 var(--serif); color: var(--on-navy); }
  .ciclo small { align-self: start; margin-top: 3px; font-size: var(--t-small); line-height: 1.35; color: var(--on-navy-3); }
  .ciclo a:hover > span, .ciclo a:focus-visible > span { background: var(--gold-300); color: var(--navy-900); transform: scale(1.06); }
  .ciclo a:focus-visible { outline: none; }

  /* Salida a otro servicio al final de una lista de frentes */
  .cross { padding-top: 40px; border-top: 1px solid var(--line); }
  .cross p { font-size: 1.0625rem; color: var(--muted); }
  .cross b { color: var(--ink); }
  .cross .more { margin-top: 16px; }

  /* Cuatro frentes: el índice queda fijo a la izquierda y su línea dorada avanza con la lectura */
  .frentes-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 80px; align-items: start; }
  .frentes-nav { position: sticky; top: calc(var(--header-h) + 56px); }
  .frentes-nav > p { margin-top: 16px; font-size: var(--t-lead); color: var(--muted); }
  .rail { position: relative; margin: 40px 0 0; padding: 0 0 0 24px; list-style: none; }
  .rail::before, .rail::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
  .rail::after { background: var(--gold); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .rail a { display: block; padding: 9px 0; font: 600 1.4375rem/1.2 var(--serif); color: var(--muted); text-decoration: none; transition: color 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .rail a:hover { color: var(--navy-700); }
  .rail a.is-on { color: var(--navy); transform: translateX(6px); }
  .rail li { position: relative; }
  /* Punto dorado sobre la línea: marca el frente que se está leyendo */
  .rail li::before { content: ""; position: absolute; left: -28px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--paper); opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .rail li:has(.is-on)::before { opacity: 1; transform: none; }
  .frente { padding: 48px 0; border-top: 1px solid var(--line); }
  .frente:first-child { padding-top: 0; border-top: 0; }
  .frente:last-child { padding-bottom: 0; }
  .frente > .icon { width: 36px; height: 36px; color: var(--gold-700); }
  .frente > h3 { margin-top: 16px; font-size: clamp(1.875rem, 2.8vw, 2.5rem); line-height: 1.1; }
  .frente-lead { margin-top: 10px; font-size: 1.1875rem; color: var(--ink); }
  .ticks { margin: 24px 0 0; padding: 0; list-style: none; }
  .ticks li { position: relative; padding-left: 30px; color: var(--muted); }
  .ticks li + li { margin-top: 14px; }
  .ticks li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 16px; height: 2px; background: var(--gold); }
  .frente .more { padding-top: 22px; }

  /* Para quién: texto a la izquierda, situaciones a la derecha */
  .split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
  .split .text { margin-top: 18px; font-size: var(--t-lead); color: var(--muted); }
  .checks { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
  .checks li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 1.0625rem; color: var(--muted); }
  .checks b { font-weight: 600; color: var(--ink); }
  .checks .icon { margin-top: 4px; color: var(--gold-700); }

  /* Iguala o por caso: tabla de comparación con la columna del servicio integral resaltada */
  .compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-body-s); }
  .compare th, .compare td { padding: 20px 28px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  .compare thead th { padding-top: 28px; border-bottom-color: var(--navy); font: 600 1.375rem/1.2 var(--serif); color: var(--navy); }
  .compare thead th small { display: block; margin-top: 6px; font: 500 var(--t-small)/1.4 var(--sans); color: var(--muted); }
  .compare tbody th { width: 17%; padding-left: 0; font: 600 var(--t-micro)/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .compare td { color: var(--ink); }
  .compare .is-lead { border-bottom-color: var(--rule-on-navy); background: var(--navy); color: var(--on-navy-2); }
  .compare thead .is-lead { border-radius: var(--r-md) var(--r-md) 0 0; color: var(--on-navy); }
  .compare thead .is-lead small { color: var(--gold-300); }
  .compare tfoot td { border-bottom: 0; padding-top: 24px; padding-bottom: 28px; }
  .compare tfoot .is-lead { border-radius: 0 0 var(--r-md) var(--r-md); }
  .compare .btn { min-height: 2.875rem; padding: 0.5rem 1.25rem; font-size: var(--t-body-s); }
  .compare :focus-visible { outline-color: var(--navy); }
  .compare .is-lead :focus-visible { outline-color: var(--gold-300); }

  /* Portada del sitio: servicio estrella y servicios por caso */
  .hero-alt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 0 100%; margin-top: 6px; font-size: var(--t-small); color: var(--on-navy-3); text-decoration: none; }
  .hero-alt b { font-weight: 600; color: var(--gold-300); }
  .hero-alt .icon { width: 15px; height: 15px; color: var(--gold-300); transition: transform 0.2s; }
  .hero-alt:hover b { text-decoration: underline; }
  .hero-alt:hover .icon { transform: translateX(3px); }
  .feature-svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 52px; border-radius: var(--r-md); background: radial-gradient(120% 120% at 100% 0%, var(--navy-700), var(--navy) 45%, var(--navy-900)); color: var(--on-navy); }
  .feature-svc :focus-visible { outline-color: var(--gold-300); }
  .feature-svc :is(h2, h3) { font-size: clamp(1.875rem, 3.2vw, 2.625rem); line-height: 1.08; color: var(--on-navy); }
  .feature-svc p { margin-top: 16px; font-size: var(--t-lead); color: var(--on-navy-2); }
  .feature-svc .btn { margin-top: 30px; }
  .feature-svc ol { margin: 0; padding: 0; list-style: none; }
  .feature-svc li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 16px; padding: 18px 0; border-top: 1px solid var(--rule-on-navy); }
  .feature-svc li:first-child { border-top: 0; padding-top: 0; }
  .feature-svc li:last-child { padding-bottom: 0; }
  .feature-svc li .icon { grid-row: span 2; width: 26px; height: 26px; color: var(--gold-300); }
  .feature-svc li b { font: 600 var(--t-h4)/1.3 var(--serif); color: var(--on-navy); }
  .feature-svc li span { font-size: var(--t-body-s); color: var(--on-navy-3); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }

  /* Portada de las páginas interiores: misma familia que la del servicio integral, en una sola columna */
  .phero--page .wrap { padding-bottom: 64px; }
  .phero--page h1 { max-width: 16ch; font-size: clamp(2.25rem, 4.2vw, 3.75rem); }
  .phero--page .phero-grid { grid-template-columns: minmax(0, 1fr); }

  /* Textos largos: índice fijo a la izquierda que marca la sección que se está leyendo */
  .doc { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: 72px; align-items: start; }
  .doc-nav { position: sticky; top: calc(var(--header-h) + 40px); }
  .doc-nav > p { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .doc-nav .rail { margin-top: 14px; }
  .doc-nav .rail a { padding: 7px 0; font: 500 var(--t-body-s)/1.35 var(--sans); color: var(--muted); }
  .doc-nav .rail a.is-on { color: var(--navy); font-weight: 600; transform: translateX(4px); }
  .frente > :is(h2, h3) { margin-top: 16px; font-size: clamp(1.875rem, 2.8vw, 2.5rem); line-height: 1.1; }
  .frente .tag { display: flex; gap: 8px; margin-top: 18px; font-size: var(--t-small); font-weight: 600; color: var(--navy); }
  .frente .tag .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--gold-700); }
  .frente .prose { margin-top: 20px; }
  /* Servicios complementarios: lista editorial en dos columnas, con línea dorada arriba */
  .extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; margin: 32px 0 0; padding: 0; list-style: none; }
  .extras li { padding-top: 22px; border-top: 2px solid var(--gold); }
  .extras h3 { font-size: var(--t-h3); }
  .extras p { margin-top: 10px; color: var(--muted); }
  /* Experiencia: procedimientos en dos columnas con guion dorado */
  .ticks--cols { columns: 2; column-gap: 40px; }
  .ticks--cols li { break-inside: avoid; }
  .ticks--cols li { padding-bottom: 14px; }
  .ticks--cols li + li { margin-top: 0; }

  /* Preguntas: abren y cierran con suavidad donde el navegador lo permite */
  summary::after { transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { height: 0; overflow: clip; transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.45s allow-discrete; }
    details[open]::details-content { height: auto; }
  }

  @media (max-width: 67.5em) {
    .fly-scrim { display: none; }
    .doc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .doc-nav { position: static; padding: 20px 22px; border-radius: var(--r-md); background: var(--ivory); }
    .doc-nav .rail { padding-left: 0; }
    .doc-nav .rail::before, .doc-nav .rail::after, .doc-nav .rail li::before { display: none; }
    .doc-nav .rail a.is-on { transform: none; }
    .extras { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .phero-grid, .frentes-grid, .split, .feature-svc { grid-template-columns: minmax(0, 1fr); }
    .phero-grid { gap: 40px; }
    .orbit { width: min(100%, 22rem); margin: 0 auto; }
    .ciclo { width: 100%; margin: 0; }
    .ciclo ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .ciclo ol::before, .ciclo ol::after { left: calc((100% - 32px) / 6); right: calc((100% - 32px) / 6); top: 28px; bottom: auto; width: auto; height: 2px; }
    .ciclo ol::after { transform-origin: left; animation-name: grow-x; }
    .ciclo a { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 4px; text-align: center; }
    .ciclo a > span { grid-row: auto; margin-bottom: 8px; }
    .terms--row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
    .terms--row div:nth-child(3) { padding-left: 0; border-left: 0; }
    .frentes-grid { gap: 32px; }
    .frentes-nav { position: static; }
    .frentes-nav .rail { display: none; }
    .split { gap: 32px; }
    .feature-svc { gap: 36px; padding: 40px; }
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 45em) {
    .phero .wrap { padding-top: 28px; padding-bottom: 48px; }
    .phero .lead { font-size: 1.0625rem; }
    .phero-cta .btn { width: 100%; }
    /* La órbita se vuelve una fila de cuatro accesos: ocupa una línea y lleva a cada frente */
    .orbit { width: 100%; aspect-ratio: auto; margin: 0; }
    .orbit > svg, .orbit-core { display: none; }
    .orbit ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .orbit li, .orbit li:nth-child(n) { position: static; transform: none; animation: fade 0.5s 0.3s both; }
    .orbit a { gap: 8px; min-height: 44px; }
    .orbit a > span:first-child { width: 44px; height: 44px; }
    .orbit .icon { width: 20px; height: 20px; }
    .ciclo ol::before, .ciclo ol::after { top: 22px; }
    .ciclo a > span { width: 44px; height: 44px; }
    .ciclo .icon { width: 20px; height: 20px; }
    .ciclo b { font-size: 0.9375rem; }
    .ciclo small { font-size: 0.75rem; }
    .orbit li b { padding: 0; border: 0; background: none; font-size: 0.8125rem; }
    .phero-grid { gap: 32px; }
    .terms--row { margin-top: 32px; border-top: 1px solid var(--rule-on-navy); }
    .terms--row div, .terms--row div + div { padding: 14px 12px 0 0; }
    .terms--row div:nth-child(even) { padding-left: 14px; }
    .terms--row div:nth-child(n + 3) { margin-top: 14px; }
    .frente { padding: 36px 0; }
    .feature-svc { padding: 28px 22px; border-radius: var(--r-sm); }
    /* La comparación se vuelve una ficha por servicio */
    .compare, .compare tbody, .compare tr, .compare td, .compare tfoot { display: block; }
    .compare thead { display: none; }
    .compare tbody th { display: block; width: auto; padding: 22px 0 6px; border: 0; }
    .compare td { padding: 12px 16px; border: 0; }
    .compare td::before { content: attr(data-col); display: block; margin-bottom: 4px; font: 600 var(--t-micro)/1.4 var(--sans); color: var(--muted); }
    .compare td.is-lead::before { color: var(--gold-300); }
    .compare td.is-lead { border-radius: var(--r-sm) var(--r-sm) 0 0; }
    .compare td + td { border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--ivory); }
    .compare tfoot td, .compare tfoot .is-lead { margin-top: 12px; padding: 0; border-radius: 0; background: none; }
    .compare tfoot td::before, .compare tfoot th { display: none; }
    .compare tfoot .btn { width: 100%; }
    .compare tfoot .btn--light { background: var(--navy); color: var(--on-navy); }
  }

  @media (prefers-reduced-motion: reduce) {
    .orbit .prog { animation: none; stroke-dashoffset: 0; }
    .ciclo ol::after { animation: none; }
    .doc-nav .rail a.is-on { transform: none; }
    details::details-content { transition: none; }
    .orbit li { animation: fade 0.4s both; }
    .header.open .mobile-nav { animation: none; }
    .header.open .mnav-main > *, .mnav.sub-open .mnav-sub > * { animation: fade 0.3s both; }
    .mnav-panel, .mnav.sub-open .mnav-main, .mnav.sub-open .mnav-sub, .mnav:not(.sub-open) .mnav-main { transform: none; }
    .fly li, .fly-cta, .header.fly-open .fly li, .header.fly-open .fly-cta { transform: none; }
    .rail a.is-on, .orbit a:hover > span:first-child { transform: none; }
    .steps::before { transition: none; }
  }