@layer reset, tokens, base, layout, components, pages, motion;

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sourcesans3-var-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, textarea, select { font-family: inherit; font-size: inherit; }
  button { cursor: pointer; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* ===== PALETA v6.1 "Azul petróleo y salvia" (diseño v6.1-D): TODOS los colores del sitio se definen aquí. Cambiar la paleta = editar solo este bloque ===== */
    /* superficies claras (mezclas sobre blanco; solo frías) */
    --white: #FFFFFF;
    --bg: #F2F8FB;
    --sky-soft: #ECF5F9;
    --sky: #E3F0F6;
    --teal-bg: #E3ECEB;
    --pale: #D9EAF3;
    --pale-hover: #CAE2EE;
    /* acción (azul petróleo) */
    --action: #16667A;
    --action-hover: #0F4C5C;
    --action-ink: #FFFFFF;
    --link: #125467;
    --teal-ink: #2E6560;
    /* verdosos y azul de muestra: SOLO formas decorativas */
    --blue-sample: #4398C3; --teal: #47827C; --sage: #77AB99; --sage-2: #7EABA0; --green-soft: #58A275;
    /* marca (del logo), solo detalles */
    --bronze: #A06A25; --bronze-ink: #85561B; --leaf: #608215; --leaf-ink: #4F6C10;
    /* texto y líneas */
    --ink: #14293A; --body: #34495A; --gray: #636365;
    --line: #647C8D;
    --hair: rgba(20, 41, 58, .10);
    --focus: #0B3550;
    --error: #B42318;
    /* tinte frío de v6.5-C (fotos con tonos cálidos) */
    --cool-1: rgb(15 76 92 / .26); --cool-2: rgb(71 130 124 / .18);
    /* velo suave para el look de concepto de las imágenes de IA (v6.5) */
    --veil: rgb(255 255 255 / .58);
    /* derivados de interacción */
    --nav-hover: rgba(22, 102, 122, .12);
    --nav-wave: rgba(22, 102, 122, .22);
    --ripple-btn: rgba(255, 255, 255, .35);
    --shine: rgba(255, 255, 255, .45);
    --shadow: 0 8px 24px rgba(20, 41, 58, .08);
    --shadow-lg: 0 16px 40px rgba(20, 41, 58, .10);
    --theme-color: #E3F0F6;

    /* capa semántica (los componentes usan estos nombres) */
    --surface: var(--white); --surface-alt: var(--bg); --surface-sky: var(--sky); --surface-teal: var(--teal-bg);
    --text: var(--ink); --text-muted: var(--body); --text-link: var(--link); --border: var(--line); --border-soft: var(--hair);
    --state-ok: var(--teal-ink); --state-error: var(--error);
    --thread-line: var(--hair);

    /* forma */
    --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;

    /* espacio (base 4 px) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
    --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

    --fs-display: clamp(2.125rem, 1.35rem + 5.2vw, 4.25rem);
    --fs-hero: clamp(2.125rem, 1.3rem + 2.9vw, 3.375rem);
    --fs-h1: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);
    --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --fs-num: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    --fs-lead: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --fs-micro: 0.75rem;

    --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
    --ff-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --gutter: 20px;
    --header-h: 64px;
    --bar-h: 64px;
    --section-y: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.2, .7, .2, 1);
    /* movimiento */
    --dur-fast: 150ms; --dur-base: 250ms; --dur-reveal: 450ms; --dur-slow: 900ms; --dur-wave: 600ms;
    --wm-w: min(104vw, 560px); --wm-o: .2;

    /* separación variable (S/M/L), corte inclinado e hilo del rombo */
    --gap-s: 40px; --gap-m: 64px; --gap-l: 96px;
    --cut: clamp(32px, 5vw, 72px);
    /* v6.7-A: ancho del contenedor según la pantalla (fondos a todo ancho; contenido y adornos dentro del contenedor) */
    --container-w: 1280px; --wm-max: 520px;
    --thread-x: max(16px, calc((100% - var(--container-w)) / 2 + 8px));
  }
  @media (min-width: 1680px) { :root { --container-w: 1400px; } }
  @media (min-width: 2200px) { :root { --container-w: 1560px; --wm-max: 600px; } }
  @media (min-width: 3000px) { :root { --container-w: 1680px; --wm-max: 640px; } }
  @media (min-width: 960px) { :root { --gap-s: 56px; --gap-m: 96px; --gap-l: 144px; } }
  @media (min-width: 640px) { :root { --gutter: 32px; } }
  @media (min-width: 480px) { :root { --wm-w: min(100vw, 640px); } }
  @media (min-width: 960px) { :root { --wm-w: 680px; } }
  @media (min-width: 1200px) { :root { --wm-w: 760px; } }
  @media (min-width: 960px) { :root { --header-h: 76px; --section-y: 128px; --fs-body: 1.125rem; } }
  @media (min-width: 1200px) { :root { --gutter: 48px; } }
}

/* ---------- base ---------- */
@layer base {
  html { scroll-padding-top: 88px; }
  @media (max-width: 959.98px) { html { scroll-padding-bottom: 96px; } }
  body {
    background: var(--surface-alt);
    color: var(--text);
    font-family: var(--ff-text);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    padding-bottom: var(--bar-h);
    -webkit-font-smoothing: antialiased;
  }
  @media (min-width: 960px) { body { padding-bottom: 0; } }
  body.no-bar { padding-bottom: 0; }

  h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 500; text-wrap: balance; letter-spacing: -0.01em; }
  h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; }
  h2 { font-size: var(--fs-h2); line-height: 1.12; }
  h3 { font-size: var(--fs-h3); line-height: 1.25; }
  p { text-wrap: pretty; max-width: 68ch; }
  strong { font-weight: 700; }

  a { color: var(--text-link); text-underline-offset: 0.18em; text-decoration-thickness: 2px; text-decoration-color: var(--sage); }
  a:hover { text-decoration-color: var(--text-link); }

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

  .skip-link {
    position: absolute; left: var(--s-4); top: -100px; z-index: 100;
    background: var(--action); color: var(--action-ink); padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill); font-weight: 600; text-decoration: none;
  }
  .skip-link:focus { position: fixed; top: var(--s-3); }
  main:focus { outline: none; }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .label {
    font-family: var(--ff-text); font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  }
  .lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 48ch; }
  .small { font-size: var(--fs-small); }
}

/* ---------- layout ---------- */
@layer layout {
  .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--gutter); }
  .sec { padding-block: var(--section-y); position: relative; }
  .pt-s { padding-top: var(--gap-s); } .pt-m { padding-top: var(--gap-m); } .pt-l { padding-top: var(--gap-l); }
  .pb-s { padding-bottom: var(--gap-s); } .pb-m { padding-bottom: var(--gap-m); } .pb-l { padding-bottom: var(--gap-l); }
  .sec--bg { background: var(--surface-alt); }
  .sec--white { background: var(--surface); }
  .sec--sky { background: var(--surface-sky); }
  .sec--teal { background: var(--surface-teal); }
  .sec--tight { padding-block: calc(var(--section-y) * 0.6); }

  .stack > * + * { margin-top: var(--s-5); }
  .stack-sm > * + * { margin-top: var(--s-3); }

  .grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
  @media (min-width: 960px) {
    .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
  }
}

/* ---------- componentes ---------- */
@layer components {
  /* encabezado v6 (v6.4): fondo --sky-soft, logo directo con multiply, filete de 1 px, sin verde ni crema */
  .site-header {
    position: sticky; top: 0; z-index: 60; background: var(--sky-soft); color: var(--text);
    height: var(--header-h); view-transition-name: site-header;
  }
  .site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--border-soft); pointer-events: none; z-index: 0; }
  .site-header::before { content: ""; position: absolute; inset: 0; box-shadow: var(--shadow); opacity: 0; pointer-events: none; z-index: -1; }
  .site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); position: relative; }
  .brand {
    align-self: center; display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--text);
    line-height: 1.1; mix-blend-mode: multiply; flex: none; padding-block: 6px; border-radius: var(--r-sm);
  }
  .brand-mark { height: 34px; width: auto; flex: none; }
  .brand-wm { height: 15px; width: auto; flex: none; }
  @media (min-width: 960px) { .brand-mark { height: 44px; } .brand-wm { height: 20px; } }
  @media (max-width: 359px) { .brand-wm { display: none; } }
  @media (max-width: 420px) { .brand-wm { height: 12px; } }

  .menu-btn {
    display: none; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
    background: transparent; color: var(--text); border: 1.5px solid var(--border); border-radius: var(--r-pill);
    font-family: var(--ff-text); font-size: 1rem; font-weight: 600; line-height: 1.3;
  }
  .menu-btn:hover { background: var(--nav-hover); }
  .js .menu-btn { display: inline-flex; }
  .menu-btn svg { width: 24px; height: 24px; color: var(--bronze); }

  .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .site-nav a { text-decoration: none; }
  .nav-link {
    white-space: nowrap;
    position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 44px;
    padding: 8px 16px; border-radius: var(--r-pill); color: var(--text); font-weight: 600; font-size: 1rem;
  }
  .nav-link:hover { background: var(--nav-hover); }
  .nav-link[aria-current="page"] { font-weight: 700; }
  /* indicador del item activo (lleva el view-transition-name nav-ind): barra azul de 3 px con rombo menta de 8 px */
  .nav-ind { position: absolute; inset: auto 16px 5px; height: 3px; background: var(--action); pointer-events: none; }
  .nav-ind::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--sage); transform: rotate(45deg); }
  .rip {
    position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
    background: var(--nav-wave); pointer-events: none; z-index: -1;
    animation: rip 600ms var(--ease) forwards;
  }
  .btn .rip { background: var(--ripple-btn); }
  .nav-phone-item { display: none; }
  .phone-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: var(--r-pill); color: var(--text); font-weight: 600; font-size: 1rem; }
  .phone-link svg { width: 22px; height: 22px; flex: none; color: var(--bronze); }
  .phone-link:hover { background: var(--nav-hover); }
  .phone-link .phone-txt { display: none; }
  @media (min-width: 1100px) { .nav-phone-item { display: block; } }
  @media (min-width: 1360px) { .phone-link .phone-txt { display: inline; } .phone-link:hover .phone-txt, .phone-link:focus-visible .phone-txt { text-decoration: underline; text-underline-offset: 0.2em; } }
  @keyframes rip { from { transform: scale(0); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .rip { display: none; } }

  /* sin JS en movil: el menu queda visible en una segunda fila */
  @media (max-width: 1099.98px) {
    .site-header { height: auto; min-height: var(--header-h); }
    .site-header .container { flex-wrap: wrap; min-height: var(--header-h); }
    .site-nav { width: 100%; order: 3; padding: var(--s-3) 0 var(--s-4); }
    .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
    .nav-cta-item { margin-top: var(--s-2); }
    .nav-ind { display: none; }
    .nav-secondary { border: 1.5px solid var(--border); }
    .js .site-header { height: var(--header-h); }
    .js .site-header .container { flex-wrap: nowrap; }
    .js .site-nav {
      position: fixed; left: 0; right: 0; top: var(--header-h); width: auto; order: initial;
      background: var(--sky-soft); border-top: 1px solid var(--border-soft); padding: var(--s-4) var(--gutter) var(--s-6);
      max-height: calc(100% - var(--header-h)); overflow-y: auto; z-index: 55; box-shadow: var(--shadow);
      border-radius: 0 0 var(--r-lg) var(--r-lg);
    }
    .js .site-nav:not(.is-open) { display: none; }
    .js .site-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .js .menu-panel .nav-link { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; min-height: 52px; border-radius: 0; border-bottom: 1px solid var(--border-soft); padding: 8px 4px 8px 28px; }
    .js .menu-panel .nav-link[aria-current="page"] { font-weight: 700; background: transparent; }
    .js .menu-panel .nav-link[aria-current="page"]::before { content: ""; position: absolute; left: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--sage); border: 1.5px solid var(--bronze); transform: rotate(45deg); }
    .js .menu-panel .nav-secondary { font-family: var(--ff-text); font-size: 1rem; font-weight: 600; border: 0; border-bottom: 1px solid var(--border-soft); }
    .js .menu-panel .btn { margin-top: var(--s-5); width: 100%; }
  }
  @media (min-width: 1100px) {
    .site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; margin-left: var(--s-6); }
    .site-nav ul { flex-direction: row; align-items: center; gap: var(--s-1); }
    .nav-secondary { font-size: 0.9375rem; border: 1.5px solid var(--border); margin-left: 14px; }
    .nav-secondary:hover { background: var(--pale); }
    .site-nav .nav-right { display: flex; align-items: center; gap: var(--s-3); }
    .site-nav .nav-right .btn { min-height: 44px; padding: 8px 20px; white-space: nowrap; }
    .menu-btn { display: none !important; }
  }

  @media (min-width: 1100px) and (max-width: 1279.98px) { .site-nav { margin-left: var(--s-3); } .nav-link { padding-inline: 9px; } .nav-ind { inset-inline: 9px; } .nav-secondary { margin-left: 0; padding-inline: 12px; } .site-nav .nav-right { gap: var(--s-1); } .site-nav .nav-right .btn { padding-inline: 16px; } .brand-wm { height: 17px; } .brand { gap: var(--s-2); } }

  /* botones: píldora; el unico color de accion del sitio es el azul (.btn-cta); secundario .btn-sec */
  .btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 48px; padding: 12px 28px; border-radius: var(--r-pill); border: 0;
    font-family: var(--ff-text); font-size: 1rem; font-weight: 600; line-height: 1.3;
    text-decoration: none; text-align: center; cursor: pointer;
  }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--action-hover);
    transform: scaleX(0); transform-origin: left center;
  }
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover { text-decoration: none; }
  .btn-cta { background: var(--action); color: var(--action-ink); font-weight: 700; }
  .btn-cta:hover { color: var(--action-ink); }
  .btn-sec { background: var(--pale); color: var(--link); }
  .btn-sec::before { background: var(--pale-hover); }
  .btn-sec:hover { color: var(--link); }
  .btn svg { width: 20px; height: 20px; flex: none; }

  /* microtexto "qué ocurre después" */
  .cta-block { display: grid; gap: var(--s-3); justify-items: start; }
  .after { position: relative; font-size: 0.9375rem; line-height: 1.45; color: var(--text-muted); padding-left: 18px; max-width: 46ch; }
  .after::before { content: ""; position: absolute; left: 1px; top: 0.45em; width: 10px; height: 10px; background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(-8deg); }

  /* enlace secundario con flecha */
  .link-arrow {
    display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--text-link);
    text-decoration: none; background: linear-gradient(var(--sage), var(--sage)) 0 100% / 100% 2px no-repeat;
    padding-block: 4px 3px;
  }
  .link-arrow { white-space: normal; }
  .link-arrow svg { width: 20px; height: 20px; flex: none; }
  .link-plain { font-weight: 600; }

  /* contacto directo */
  .contact-line { font-size: 0.9375rem; color: var(--text-muted); }
  .contact-line a { color: var(--text-link); font-weight: 600; overflow-wrap: anywhere; }

  /* destacado (tarjeta dentro de Servicios) */
  .feature { background: var(--surface-sky); color: var(--text); border-radius: var(--r-md); }
  .feature p { max-width: 56ch; }

  /* imágenes de arte y fotos */
  .art { display: block; }
  .art img { width: 100%; height: 100%; object-fit: cover; }
  .media { position: relative; }
  .media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); filter: saturate(.85); }
  .media--45 img { aspect-ratio: 4 / 5; }
  .media--32 img { aspect-ratio: 3 / 2; }

  /* pie (v6.5): cielo, esquinas superiores amplias en escritorio, enlaces azules subrayados */
  .site-footer { background: var(--surface-sky); color: var(--text); border-top: 1px solid var(--border-soft); padding-block: var(--s-8) var(--s-6); }
  .site-footer a { color: var(--text-link); }
  .logo-link { display: block; width: min(320px, 100%); mix-blend-mode: multiply; text-decoration: none; }
  .logo-full { width: 100%; height: auto; }
  .footer-grid { display: grid; gap: var(--s-6); }
  .footer-title { font-family: var(--ff-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: var(--s-4) 0 var(--s-3); }
  .footer-grid nav .footer-title, .footer-grid > div:last-child .footer-title { margin-top: 0; }
  .footer-list { list-style: none; margin: 0; padding: 0; }
  .footer-list a { display: inline-block; padding-block: 6px; overflow-wrap: anywhere; }
  .footer-list a:hover { text-decoration-color: var(--text-link); }
  .footer-social a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .footer-grid > div .footer-title.footer-title-redes { margin-top: var(--s-5); }
  .site-footer p { color: var(--text-muted); max-width: 44ch; }
  .footer-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }
  .legal-text { display: flex; flex-direction: column; gap: var(--s-1); }
  .credit { font-size: var(--fs-small); }
  .img-note { margin-top: var(--s-5); font-size: var(--fs-small); }
  .fine-link {
    font-family: var(--ff-text); font-weight: 400; font-size: var(--fs-small); color: var(--text-muted) !important;
    text-decoration: underline; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; padding: 6px 8px; align-self: flex-start;
  }
  @media (max-width: 959px) { .fine-link { min-height: 44px; padding-block: 14px; } }
  @media (min-width: 960px) {
    .site-footer { border-radius: var(--r-xl) var(--r-xl) 0 0; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); }
    .footer-base { flex-direction: row; justify-content: space-between; align-items: center; }
    .legal-text { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s-3); }
    .credit::before { content: "\B7" / ""; margin-right: var(--s-3); }
    .fine-link { align-self: auto; }
  }

  /* barra móvil inferior permanente: CTA, teléfono y correo */
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--bar-h);
    display: flex; gap: var(--s-3); align-items: center; padding: 0 var(--gutter);
    background: var(--sky-soft); border-top: 1px solid var(--border-soft);
  }
  .mbar .btn { flex: 1; }
  @media (max-width: 359px) { .mbar { gap: var(--s-2); } .mbar .btn { padding-inline: 8px; font-size: 0.9375rem; } }
  .mbar-btn { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--link); border-radius: var(--r-pill); color: var(--link); background: var(--white); }
  .mbar-btn svg { width: 24px; height: 24px; }
  .no-bar .mbar { display: none; }
  @media (min-width: 960px) { .mbar { display: none; } }

  /* acordeón de servicios */
  .svc { scroll-margin-top: calc(var(--header-h) + 64px); container-type: inline-size; border-top: 1px solid var(--border-soft); padding-block: var(--s-6) var(--s-5); }
  .svc > details > summary {
    display: flex; align-items: center; gap: var(--s-4); min-height: 64px; cursor: pointer; list-style: none;
  }
  .svc > details > summary::-webkit-details-marker { display: none; }
  .svc-num { font-family: var(--ff-display); font-weight: 300; font-size: var(--fs-num); line-height: 1; color: var(--teal-ink); min-width: 1.6em; }
  .svc-label { font-family: var(--ff-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); min-width: 4.2em; }
  .svc summary h2 { flex: 1; font-size: var(--fs-h2); }
  .chev { width: 28px; height: 28px; flex: none; color: var(--link); }
  .svc details[open] .chev { transform: rotate(180deg); }
  .svc-body { padding-top: var(--s-4); display: grid; gap: var(--s-5); }
  .svc-intro { font-size: var(--fs-lead); line-height: 1.45; max-width: 56ch; }
  .svc-list { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s-3); }
  .svc-list > li { padding-left: 0.25rem; }
  .svc-list li::marker { color: var(--text-muted); font-weight: 600; }
  .svc-list .sublist { margin-top: var(--s-2); padding-left: 1.25rem; list-style: none; border-left: 2px solid var(--bronze); display: grid; gap: 4px; }
  .svc-list .sublist li { padding-left: var(--s-3); }
  @container (min-width: 640px) {
    .svc-list.cols { display: block; column-count: 2; column-gap: var(--s-6); }
    .svc-list.cols > li { break-inside: avoid; margin-bottom: var(--s-3); }
  }
  .svc--plain > .svc-head { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; }
  .svc--plain h2 { font-size: var(--fs-h2); }

  .anchors { background: var(--surface-alt); border-bottom: 1px solid var(--border-soft); position: sticky; top: var(--header-h); z-index: 40; }
  .anchors ul { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .anchors li { scroll-snap-align: start; flex: none; }
  .anchors a { display: block; padding: var(--s-3) 0; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--text); min-height: 48px; line-height: 24px; }
  .anchors a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--action); }

  /* principios */
  .principles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: p; }
  .principle { border-top: 1px solid var(--border-soft); padding-top: var(--s-4); }
  .principle-num { font-family: var(--ff-display); font-weight: 300; font-size: var(--fs-num); line-height: 1; color: var(--teal-ink); display: block; margin-bottom: var(--s-2); }
  .principle p { margin-top: var(--s-2); color: var(--text-muted); }

  /* formulario de Google incrustado (v6.8) */
  .form-embed > h2 { margin-bottom: var(--s-4); }
  .form-embed .form-intro { margin-bottom: var(--s-4); }
  .form-embed__frame { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
  /* alturas medidas el 2026-10-25 (scrollHeight del formulario real en cada punto de quiebre) + 100 px de holgura (Google no permite autoajuste entre dominios; R15-07). Si el dueño agrega o quita preguntas, volver a medir. */
  .form-embed iframe { display: block; width: 100%; border: 0; height: 2890px; background: var(--surface); }
  @media (min-width: 340px) { .form-embed iframe { height: 2660px; } }
  @media (min-width: 360px) { .form-embed iframe { height: 2600px; } }
  @media (min-width: 375px) { .form-embed iframe { height: 2470px; } }
  @media (min-width: 390px) { .form-embed iframe { height: 2430px; } }
  @media (min-width: 414px) { .form-embed iframe { height: 2280px; } }
  @media (min-width: 430px) { .form-embed iframe { height: 2260px; } }
  @media (min-width: 480px) { .form-embed iframe { height: 2200px; } }
  @media (min-width: 540px) { .form-embed iframe { height: 2160px; } }
  @media (min-width: 600px) { .form-embed iframe { height: 2120px; } }
  @media (min-width: 640px) { .form-embed iframe { height: 2120px; } }
  @media (min-width: 700px) { .form-embed iframe { height: 2060px; } }
  @media (min-width: 768px) { .form-embed iframe { height: 2050px; } }
  @media (min-width: 960px) { .form-embed iframe { height: 2160px; } }
  @media (min-width: 1024px) { .form-embed iframe { height: 2120px; } }
  @media (min-width: 1100px) { .form-embed iframe { height: 2120px; } }
  @media (min-width: 1200px) { .form-embed iframe { height: 2060px; } }
  @media (min-width: 1280px) { .form-embed iframe { height: 2050px; } }
  .form-embed__fallback { margin: var(--s-4) 0 0; font-size: var(--fs-small); }
  .form-aviso { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--body); }
  .legal-extra { margin-top: var(--s-8); }
  .consulta { font-weight: 600; margin-bottom: var(--s-4); }
  @media (max-width: 1099.98px) { .site-nav .nav-right { flex-direction: column-reverse; } }

  .diag-pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7;
    background: repeating-linear-gradient(135deg, transparent 0 22px, var(--pale) 22px 25px);
    -webkit-mask-image: linear-gradient(to left, var(--ink), transparent 70%); mask-image: linear-gradient(to left, var(--ink), transparent 70%); }
}

/* ---------- páginas ---------- */
@layer pages {
  .split { display: grid; gap: var(--s-6); }
  @media (min-width: 960px) {
    .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
    .split-a { grid-column: 1 / span 5; }
    .split-b { grid-column: 6 / span 7; }
  }

  /* páginas internas */
  .page-head { padding-block: var(--s-8) var(--s-7); }
  .page-head h1 { max-width: 18ch; }
  .page-head .lead { margin-top: var(--s-5); }
  .page-head .btn { margin-top: var(--s-6); }
  @media (min-width: 960px) { .page-head { padding-block: var(--s-9) var(--s-8); } }

  /* servicios */
  .svc-layout { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 960px) {
    .svc-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
    .svc-aside { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); }
    .svc-main { grid-column: 4 / span 9; }
    .svc-aside .anchors { position: static; border: 0; background: transparent; }
    .svc-aside .anchors ul { flex-direction: column; overflow: visible; padding: 0; gap: 0; }
    .svc-aside .anchors a { white-space: normal; border-left: 3px solid transparent; padding-left: var(--s-3); box-shadow: none !important; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
    .svc-aside .anchors a[aria-current="true"] { border-left-color: var(--action); background: var(--pale); }
    .svc-aside .anchors a:hover { background: var(--sky); }
  }
  .svc-feature { padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-3); }
  .svc-feature h3 { font-size: var(--fs-h2); }
  .svc-with-img { display: grid; gap: var(--s-5); }
  .svc-with-img .media { max-width: 640px; }
  @container (min-width: 760px) {
    .svc-with-img.has-img { grid-template-columns: 1fr 1fr; align-items: start; }
  }

  /* nosotros */
  .about-grid { display: grid; gap: var(--s-6); }
  .about-label { font-family: var(--ff-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
  .mision-1 { font-family: var(--ff-display); font-weight: 400; font-size: 1.375rem; line-height: 1.4; max-width: 62ch; }
  .mision-body p + p { margin-top: var(--s-5); }
  .mision-body p:not(.mision-1) { font-size: 1.125rem; }
  .vision-text { font-family: var(--ff-display); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.15; max-width: 28ch; text-wrap: balance; }
  @media (min-width: 960px) {
    .about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
    .about-grid > .about-label { grid-column: 1 / span 3; }
    .about-grid > .about-body { grid-column: 4 / span 8; }
    .mision-1 { font-size: 1.75rem; }
  }
  @media (min-width: 640px) and (max-width: 959.98px) { .principles { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
  @media (min-width: 1200px) {
    .principles { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); padding-bottom: 64px; }
    .principle:nth-child(even) { transform: translateY(64px); }
  }

  /* contacto */
  .contact-grid { display: grid; gap: var(--s-7); }
  .contact-data { container-type: inline-size; display: grid; gap: var(--s-4); align-content: start; }
  .contact-data > :first-child, .contact-form > :first-child { margin-top: 0; }
  .contact-data .lead { margin: 0; }
  .contact-data .btn { width: 100%; }
  @media (min-width: 960px) {
    .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
    .contact-data { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
    .contact-form { grid-column: 6 / span 7; }
    .contact-data .btn { width: auto; justify-self: start; }
  }
  .contact-big { font-family: var(--ff-display); font-size: clamp(1.25rem, 8cqi, 2rem); font-weight: 500; line-height: 1.25; overflow-wrap: normal; margin: 0; }
  .contact-big + .contact-big { font-size: clamp(1rem, 5.6cqi, 1.5rem); white-space: nowrap; }
  .contact-big a { color: var(--text-link); }
  @media (max-width: 359px) { .contact-big + .contact-big { white-space: normal; overflow-wrap: anywhere; } }

  /* intranet y 404 */
  .solo { min-height: 60svh; display: flex; align-items: center; position: relative; overflow: hidden; }
  .solo .container { position: relative; z-index: 1; }
  .solo h1 { font-size: var(--fs-display); }
  .solo .lead { margin-top: var(--s-5); }
}

/* ---------- movimiento ---------- */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .btn::before { transition: transform var(--dur-base) var(--ease); }
    .link-arrow svg { transition: transform 180ms var(--ease); }
    .link-arrow:hover svg { transform: translateX(6px); }
        .need-q, .fam-q { transition: transform var(--dur-base) var(--ease); }
    .need-row:has(a:hover, a:focus-visible) .need-q, .fam-row:has(a:hover, a:focus-visible) .fam-q { transform: translateX(8px); }
    .chev, .chevr { transition: transform 200ms var(--ease); }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
    .nav-ind { view-transition-name: nav-ind; }
    ::view-transition-group(nav-ind) { animation-duration: 260ms; animation-timing-function: var(--ease); }
    .mbar { transition: transform var(--dur-base) var(--ease); }
  }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes hshadow { from { opacity: 0; } to { opacity: 1; } }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .progress { display: block; animation: grow linear both; animation-timeline: scroll(root); }
      .site-header::before { animation: hshadow linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
    }
  }
}

@layer pages {
  .svc-wrap { padding-bottom: var(--s-8); }
  @media (max-width: 959.98px) { .svc-layout { display: block; } .svc-aside { display: contents; } .anchors { margin-inline: calc(var(--gutter) * -1); } }
  .svc-main > .svc:first-child { border-top: 0; }
  /* en móvil el índice de servicios queda fijo bajo el encabezado: el foco no debe quedar debajo de ambos */
  @media (max-width: 959.98px) { html:has(.anchors) { scroll-padding-top: 128px; } }
}

/* ---------- documentos legales ---------- */
@layer pages {
  .legal-wrap { padding-block: var(--s-8) var(--s-9); }
  .legal { --legal-measure: 66ch; --legal-body: 1.0625rem; --legal-lh: 1.65; }
  @media (min-width: 960px) { .legal { --legal-body: 1.125rem; } }
  .legal-head { margin-bottom: var(--s-7); }
  .legal-head h1 { margin-bottom: var(--s-4); }
  .legal-head .lead { max-width: var(--legal-measure); }
  .legal-toc { margin-block: 0 var(--s-7); border-block: 1px solid var(--border-soft); padding-block: var(--s-3); }
  .legal-toc ol { list-style: none; padding: 0; margin: 0; }
  .legal-toc a { display: block; padding-block: 10px; min-height: 44px; font-weight: 600; color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
  .legal-body { max-width: var(--legal-measure); font-size: var(--legal-body); line-height: var(--legal-lh); hyphens: manual; overflow-wrap: break-word; }
  .legal-body p { text-wrap: pretty; }
  .legal-body p + p, .legal-body table + *, .legal-body ul, .legal-body ol { margin-top: var(--legal-gap, 1em); }
  .legal-doc { margin-top: var(--s-8); border-top: 1.5px solid var(--bronze); padding-top: var(--s-5); }
  .legal-body > .legal-doc:first-child { margin-top: 0; }
  .legal-doc > h2 { font-family: "Fraunces", serif; font-weight: 500; font-size: var(--fs-h2); line-height: 1.15; text-wrap: balance; margin-bottom: var(--s-4); }
  .legal-doc h3 { font-family: "Fraunces", serif; font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; text-wrap: balance; margin-top: var(--s-7); margin-bottom: var(--s-3); break-after: avoid; }
  .legal-doc h4 { font-weight: 700; font-size: 1.1875rem; line-height: 1.3; margin-top: 28px; margin-bottom: var(--s-2); break-after: avoid; }
  .legal-doc h2 + .doc-org { margin-top: 0; }
  .doc-org { font-weight: 600; font-size: 1rem; color: var(--text-muted); }
  .doc-meta { width: min(100%, var(--legal-measure)); border-collapse: collapse; margin-block: var(--s-4) var(--s-5); border-block: 1px solid var(--ink); font-size: 1rem; line-height: 1.45; }
  .doc-meta th, .doc-meta td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
  .doc-meta tr:last-child th, .doc-meta tr:last-child td { border-bottom: 0; }
  .doc-meta th { background: var(--sky); font-weight: 600; min-width: 7.5rem; width: 7.5rem; }
  .legal-body ol { padding-inline-start: 2rem; }
  .legal-body ul { padding-inline-start: 1.5rem; list-style: disc; }
  .legal-body ol { list-style: decimal; }
  .legal-body li::marker { color: var(--text-muted); }
  .legal-body ol li::marker { font-weight: 600; color: var(--ink); }
  .legal-body li + li { margin-top: var(--s-2); }
  .legal-body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  .legal-body a:focus-visible, .legal-toc a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .back-link { margin-top: var(--s-6); }
  .back-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 1rem; }
  .back-link svg { width: 16px; height: 16px; }
  .legal-doc, .legal-doc [id] { scroll-margin-top: calc(var(--header-h) + 16px); }
  @media (min-width: 1100px) {
    .legal-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s-5); align-items: start; }
    .legal-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 24px); margin-top: 0; }
    .legal-body { grid-column: 4 / span 7; }
  }
}

@media print {
  .site-header, .mbar, .progress, .anchors, .back-link { display: none !important; }
  details > * { display: block; }
}

/* ================= hero con el logo, narrativa (diseño v6.1-A) ================= */
@layer pages {
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .progress { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; transform-origin: left; background: var(--action); z-index: 1; }

  /* hero: fondo blanco plano; el logo de Vita es el protagonista, sin nada encima */
  .hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding-block: clamp(32px, 5svh, 64px) calc(var(--s-8) + 56px); background: var(--white); }
  .hero > .container { width: 100%; order: 1; }
  .hero-grid { display: grid; gap: var(--s-5); position: relative; }
  /* marca de agua (v6.7-C): decorativa; < 960 en el flujo, centrada bajo la nota; >= 960 en las columnas 8 a 12 del mismo contenedor, nunca detrás de texto (tres bandas del MISMO JPG para ensamblarlas) */
  .hero__wm { order: 2; position: static; pointer-events: none; display: grid; justify-items: center; padding: var(--s-6) var(--gutter) 0; }
  .wm { position: relative; width: min(78vw, 360px); aspect-ratio: 675 / 345; }
  .wm-i { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: var(--wm-o); }
  .wm-top { clip-path: inset(0 0 63.77% 0); }
  .wm-word { clip-path: inset(36.23% 0 36.81% 0); }
  .wm-bot { clip-path: inset(63.19% 0 0 0); }
  .wm-sheen { opacity: 0; clip-path: inset(0 100% 0 0); }
  .wm-echo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .wm-echo path { fill: none; stroke: var(--gray); stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: .28; transform-box: view-box; }
  .wm-echo .e1, .wm-echo .e2 { transform-origin: 333.8px 5.3px; }
  .wm-echo .e3, .wm-echo .e4 { transform-origin: 332.5px 340px; }
  @media (min-width: 960px) {
    .hero { display: block; }
    .hero__wm { position: absolute; inset: 0; z-index: 0; margin-inline: auto; width: 100%; max-width: var(--container-w); box-sizing: border-box; padding-block: clamp(32px, 5svh, 64px) calc(var(--s-8) + 56px); padding-inline: var(--gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: center; }
    .wm { grid-column: 8 / span 5; justify-self: center; width: 100%; max-width: var(--wm-max); }
  }
  .hero .lead { max-width: 52ch; color: var(--body); line-height: 1.6; }
  .hero-copy { position: relative; z-index: 1; display: grid; gap: var(--s-6); align-content: center; }
  .eyebrow { justify-self: start; display: inline-flex; align-items: center; background: var(--pale); color: var(--link); font-weight: 600; font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill); }
  .hero h1 { font-size: clamp(2rem, 1.35rem + 1.5vw, 2.75rem); line-height: 1.22; letter-spacing: -0.02em; font-weight: 600; font-variation-settings: "opsz" 144; text-wrap: balance; }
  @media (max-width: 479.98px) { .hero h1 { font-size: 1.875rem; } .hero-copy { gap: var(--s-5); } .hero .lead { font-size: 1rem; } }
  @media (max-width: 359px) { .hero h1 { font-size: 1.75rem; } }
  .hero h1 .l1 { display: block; font-weight: 300; color: var(--text); }
  .hero h1 .l2 { display: block; color: var(--link); margin-top: 0.2em; }
  .hero-actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; margin-top: 0; }
  .hero-actions .cta-block .btn { width: 100%; }
  .hero-actions > .btn-sec { align-self: stretch; }
  @media (min-width: 640px) { .hero-actions { flex-direction: row; align-items: flex-start; gap: var(--s-5); } .hero-actions .cta-block .btn { width: auto; } .hero-actions > .btn-sec { align-self: flex-start; } }
  /* v6.7-B: botones y nota en una sola cuadrícula; la nota siempre después de los dos botones (solo el Home; Agentes conserva .hero-actions en fila) */
  .hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-3); }
  .hero .hero-actions .cta-block { display: contents; }
  .hero .hero-actions .cta-block .btn, .hero .hero-actions > .btn-sec { width: 100%; }
  .hero .hero-actions .btn-cta { grid-row: 1; } .hero .hero-actions > .btn-sec { grid-row: 2; }
  .hero .hero-actions .after { grid-row: 3; margin: var(--s-2) 0 0; padding-left: 0; font-size: 0.875rem; line-height: 1.6; max-width: 50ch; }
  .hero .after::before { display: none; }
  @media (min-width: 640px) {
    .hero .hero-actions { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: var(--s-5); }
    .hero .hero-actions .cta-block .btn, .hero .hero-actions > .btn-sec { width: auto; }
    .hero .hero-actions .btn-cta { grid-row: 1; grid-column: 1; } .hero .hero-actions > .btn-sec { grid-row: 1; grid-column: 2; }
    .hero .hero-actions .after { grid-row: 2; grid-column: 1 / -1; }
  }
  @media (min-width: 960px) {
    .hero-copy { grid-column: 1 / span 7; grid-row: 1; }
    .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: center; }
  }

  /* narrativa sticky */
  .story { padding-block: var(--gap-m) var(--gap-s); color: var(--text); position: relative; background: var(--surface); }
  .story > .container { position: relative; z-index: 1; }
  .story-grid { display: grid; gap: var(--s-6); }
  .story h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1.1; font-variation-settings: "opsz" 144; margin-bottom: var(--s-4); }
  .story .sub { color: var(--text-muted); max-width: 44ch; }
  .story .support { margin-top: var(--s-4); font-size: 0.9375rem; color: var(--text-muted); max-width: 44ch; }
  /* v6.6-A: logo completo (rombo + wordmark + leyenda) sobre el titular; proporción nativa 675:345 */
  .story-logo { display: block; width: min(78vw, 300px); height: auto; margin: 0 0 var(--s-5); overflow: visible; mix-blend-mode: multiply; }
  .steps { list-style: none; margin: 0; padding: 0; }
  .step { padding: var(--s-5) 0 var(--s-5) var(--s-6); border-left: 2px solid var(--border-soft); position: relative; }
  .step::before { content: ""; position: absolute; left: -7px; top: 36px; width: 12px; height: 12px; background: var(--sage); border: 2px solid var(--bronze); box-sizing: border-box; transform: rotate(45deg); }
  .step h3 { font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; margin-bottom: 6px; }
  .step p { color: var(--text-muted); max-width: 44ch; }
  .story .link-arrow { margin-top: var(--s-2); }
  @media (min-width: 960px) {
    .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
    .pin { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
    .step { padding-block: 7vh; }
    .step:first-child { padding-top: 2vh; }
    .story-logo { width: min(100%, 420px); margin-bottom: var(--s-6); }
  }
  @media (min-width: 768px) and (max-width: 959.98px) { .story-logo { width: min(100%, 360px); } }
  @media (min-width: 1680px) { .story-logo { width: min(100%, 460px); } }
  @media (min-width: 2200px) { .story-logo { width: min(100%, 520px); } }
  @media (min-width: 3000px) { .story-logo { width: min(100%, 560px); } }
  /* pantallas bajas: la columna con logo supera la altura útil, así que no se fija (evita el borde inferior fuera de pantalla) */
  @media (min-width: 960px) and (max-height: 820px) { .pin { position: static; } }
}

/* ================= movimiento v6.1-E (M1 a M14): solo transform y opacity, una vez, sin bucles ================= */
@layer motion {
  /* logo del hero (una sola vez): chevrones que se ensamblan, wordmark que desliza, contorno fino que se dibuja y un destello; solo transform, opacity y clip-path */
  @keyframes wm-drop { 0% { opacity: 0; transform: translateY(-46px); } 62% { opacity: .3; transform: translateY(3px); } 100% { opacity: var(--wm-o); transform: none; } }
  @keyframes wm-rise { 0% { opacity: 0; transform: translateY(46px); } 62% { opacity: .3; transform: translateY(-3px); } 100% { opacity: var(--wm-o); transform: none; } }
  @keyframes wm-slide { 0% { opacity: 0; transform: translateX(-34px); clip-path: inset(36.23% 100% 36.81% 0); } 60% { opacity: .3; } 100% { opacity: var(--wm-o); transform: none; clip-path: inset(36.23% 0 36.81% 0); } }
  @keyframes wm-draw { from { opacity: 0; transform: scale(0); } to { opacity: .28; transform: scale(1); } }
  @keyframes wm-glint { 0% { opacity: .24; clip-path: inset(0 100% 0 0); } 20% { opacity: .24; clip-path: inset(0 82% 0 0); } 80% { opacity: .24; clip-path: inset(0 0 0 82%); } 100% { opacity: .24; clip-path: inset(0 0 0 100%); } }
  @keyframes h-rise { from { opacity: .4; transform: translateY(8px); } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes drift { from { transform: translateY(-12px) scale(1.08); } to { transform: translateY(12px) scale(1.08); } }
  @keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes lit { from { opacity: 0.82; } 30%, 70% { opacity: 1; } to { opacity: 0.82; } }
  @media (prefers-reduced-motion: no-preference) {
    /* M1 y M2: logo y texto del hero (el texto nunca queda invisible) */
    .wm-top { animation: wm-drop 800ms var(--ease-out) 100ms 1 backwards; }
    .wm-bot { animation: wm-rise 800ms var(--ease-out) 100ms 1 backwards; }
    .wm-word { animation: wm-slide 600ms var(--ease-out) 380ms 1 backwards; }
    .wm-echo path { animation: wm-draw 600ms var(--ease-out) 1.05s 1 backwards; }
    .wm-sheen { animation: wm-glint 900ms linear 0.9s 1 backwards; }
    .hero .eyebrow { animation: h-rise 500ms var(--ease-out) 300ms 1 backwards; }
    .hero h1 { animation: h-rise 500ms var(--ease-out) 380ms 1 backwards; }
    .hero .lead { animation: h-rise 500ms var(--ease-out) 460ms 1 backwards; }
    .hero-actions { animation: h-rise 500ms var(--ease-out) 540ms 1 backwards; }
    /* M3 revelado escalonado y M6 imagen que se despliega (la clase .is-in la pone main.js; sin JS todo se ve) */
    .js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
    .reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
    .js .media-in:not(.is-in) { transform: scale(1.04); } /* sin opacity 0: la imagen de portada (LCP) se pinta sin esperar al JS */
    .media-in { transition: transform 700ms var(--ease-out); }
    /* M4 tarjetas con elevación y brillo (solo con puntero) */
    @media (hover: hover) {
      .card--link { transform: perspective(800px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
      .card--link:hover, .card--link:focus-within { --lift: -3px; }
      .card--link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity var(--dur-fast); pointer-events: none; z-index: -1; }
      .card--link:hover::before { opacity: 1; }
      .card--link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 40%, var(--shine) 50%, transparent 60%); transform: translateX(-120%); }
      .card--link:hover::after { transform: translateX(120%); transition: transform 600ms var(--ease-out); }
    }
    /* M5 parallax leve y progreso del hilo (solo con soporte; sin soporte queda quieto) */
    @supports (animation-timeline: view()) {
      .service__media img { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
      .thread-prog { display: block; animation: growy linear both; animation-timeline: scroll(root); }
      .step { animation: lit linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    }
    /* M7 nodos del hilo (aparecen al entrar en pantalla; la hoja se despliega) */
    .js .node:not(.is-in)::after { opacity: 0; transform: rotate(45deg) scale(.6); }
    .node::after { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
    .js .node--leaf:not(.is-in)::before { opacity: 0; transform: rotate(-18deg) scale(.6); }
    .node--leaf::before { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
    /* M8 hojas de la banda salvia */
    .js .lf:not(.is-in) { opacity: 0; transform: scale(.6) rotate(-8deg); }
    .lf { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
    /* M9 línea de tiempo de "Avanzamos contigo, paso a paso" */
    .js .tl:not(.is-in) .tl__step { opacity: .4; transform: scale(.96); }
    .tl__step { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 150ms); }
    /* M11 FAQ: el contenido aparece al abrir (sin animar altura) */
    details[open] > :not(summary) { animation: fade-up 200ms var(--ease-out) 1 backwards; }
    /* M12 botones */
    .btn svg { transition: transform var(--dur-fast) var(--ease-out); }
    .btn:hover svg { transform: translateX(4px); }
    .btn:active { transform: scale(.98); }
    .btn-cta { transition: transform 100ms var(--ease-out); }
  }
}


/* ================= flujo continuo, hilo del rombo, bandas y tarjetas (diseño v6.5) ================= */
@layer pages {
  .h2-sub { margin-top: var(--s-3); font-size: 1.0625rem; line-height: 1.5; color: var(--text-muted); max-width: 60ch; }
  @media (min-width: 960px) { .h2-sub { font-size: 1.125rem; } }
  .contact-pair { display: grid; gap: 0; font-family: var(--ff-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; }
  .contact-pair a { color: var(--text-link); justify-self: start; padding-block: 6px; overflow-wrap: anywhere; }
  @media (max-width: 400px) { .contact-pair { font-size: 1rem; } }
  .contact-note { font-weight: 600; margin-top: var(--s-2); color: var(--text); }
  .need-a .link-arrow, .fam-row .link-arrow, .need-close .link-arrow { padding-block: 11px 10px; }

  /* hilo del rombo: nodos (siempre en el HTML) y línea continua solo en escritorio */
  .node { position: absolute; z-index: 3; left: var(--gutter); top: 0; width: 10px; height: 10px; pointer-events: none; }
  .node::before { content: ""; position: absolute; left: 4px; top: -24px; width: 1.5px; height: 48px; background: var(--thread-line); }
  .node::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; background: var(--white); border: 2px solid var(--bronze); transform: rotate(45deg); }
  /* cada tercer nodo lleva una hoja de 8 px */
  .node--leaf::before { display: block; content: ""; left: 14px; top: -7px; width: 8px; height: 8px; background: var(--leaf); border-radius: 0 100% 0 100%; transform: rotate(-12deg); }
  .thread { display: none; }
  .thread-prog { display: none; position: absolute; inset: 0; background: var(--action); transform-origin: top; }
  @media (min-width: 1100px) {
    .has-thread { position: relative; }
    .thread { display: block; position: absolute; z-index: 1; left: var(--thread-x); top: 66px; bottom: 0; width: 1.5px; margin-left: 4px; background: var(--thread-line); pointer-events: none; }
    .thread::before { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; box-sizing: border-box; background: var(--white); border: 2px solid var(--bronze); transform: rotate(45deg); }
    .has-thread .eyebrow { position: relative; }
    .has-thread .eyebrow::after { content: ""; position: absolute; right: calc(100% + 4px); top: 50%; width: calc(var(--gutter) - 12px); height: 1.5px; background: var(--thread-line); }
    .node { left: var(--thread-x); top: calc(var(--pt, 64px) + 14px); }
    .node:not(.node--leaf)::before { display: none; }
    .node--leaf::before { top: -6px; height: 8px; }
    .pt-s { --pt: var(--gap-s); } .pt-m { --pt: var(--gap-m); } .pt-l { --pt: var(--gap-l); }
  }

  /* entradas por situación: filas-tarjeta (radio 20) que en hover toman --nav-hover */
  .need-head { max-width: 62ch; margin-bottom: var(--s-6); }
  .need-head h2::after, .svc-feature h3::after { content: ""; display: block; width: 64px; height: 3px; background: var(--sage); margin-top: var(--s-3); }
  .need-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
  .need-row { border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface); padding: var(--s-5); display: grid; gap: var(--s-2) var(--s-5); }
  .need-q { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 400; line-height: 1.2; }
  .need-a { display: grid; gap: var(--s-2); justify-items: start; }
  .need-a p { color: var(--text-muted); max-width: 52ch; }
  .need-row:has(a:hover, a:focus-visible) { background: var(--nav-hover); }
  .need-close { margin-top: var(--s-5); }
  @media (min-width: 960px) {
    .need-row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: var(--s-6); }
    .need-q { grid-column: 1 / span 6; }
    .need-a { grid-column: 8 / span 5; }
  }

  /* te suena familiar (apagado hasta validar) */
  .fam-list { list-style: none; margin: 0; padding: 0; max-width: 900px; display: grid; gap: var(--s-3); }
  .fam-row { position: relative; padding: var(--s-5) var(--s-5) var(--s-5) 48px; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-alt); display: grid; gap: var(--s-2); justify-items: start; }
  .fam-row::before { content: ""; position: absolute; left: 24px; top: calc(var(--s-5) + 0.55em); width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--bronze); transform: rotate(45deg); }
  .fam-q { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.25; max-width: 38ch; }
  .fam-a { color: var(--text-muted); max-width: 56ch; }
  .fam-close { margin-top: var(--s-7); display: grid; gap: var(--s-4); justify-items: start; }

  /* panel flotante cielo (servicio destacado) */
  .panel-wrap { background: var(--surface-alt); padding-block: var(--s-6); }
  .panel { width: min(100% - 2 * var(--s-4), calc(var(--container-w) - 48px)); margin-inline: auto; background: var(--surface-sky); color: var(--text); border-radius: var(--r-xl); }
  .panel a:not(.btn) { color: var(--text-link); }
  .feature-sec { padding-block: var(--gap-s); }
  .feature-row { display: grid; gap: var(--s-4) var(--s-6); align-items: start; }
  .hf-text { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }
  .feature-sec h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 600; }
  .feature-sec p { max-width: 56ch; color: var(--text-muted); }
  .feature-sec .label { color: var(--text-muted); }
  .feature-art { display: none; }
  @media (min-width: 1100px) {
    .feature-row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
    .hf-text { display: contents; }
    .hf-text .label, .hf-text h2 { grid-column: 1; }
    .hf-text .label { grid-row: 1; align-self: end; } .hf-text h2 { grid-row: 2; align-self: start; }
    .hf-text > p:not(.label):not(.after) { grid-column: 2; grid-row: 1 / span 2; }
    .hf-text > .btn { grid-column: 3; grid-row: 1; align-self: end; justify-self: start; }
    .hf-text > .after { grid-column: 3; grid-row: 2; align-self: start; }
    .feature-art { display: block; grid-column: 4; grid-row: 1; }
    .feature-art .diamonds { width: 100%; max-width: 200px; height: auto; margin-left: auto; }
  }
  .vision-sec { padding-block: var(--gap-s); }

  /* imágenes por sección (radio 28; ver v6.7 para los recortes) */
  .art-photo { display: block; overflow: hidden; border-radius: var(--r-lg); max-width: 520px; aspect-ratio: 4 / 3; }
  .art-photo img { width: 100%; height: 100%; object-fit: cover; }
  .art-p6 { max-width: none; margin-top: var(--s-6); }
  .art-p6 img { object-position: 50% 60%; }
  .art-p5 { aspect-ratio: 1 / 1; max-width: 460px; border-radius: var(--r-xl); }
  .art-p5 img { object-position: 90% 45%; }
  .art-p1 img { object-position: 30% 50%; }
  .art-g7 img { object-position: 80% 50%; }
  .art-banner { display: block; overflow: hidden; aspect-ratio: 4 / 3; max-width: none; }
  .art-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
  @media (min-width: 960px) {
    .art-p1 { aspect-ratio: 4 / 5; }
    .art-banner { aspect-ratio: 21 / 9; }
  }

  /* avance: la banda menta con un solo corte inclinado */
  /* v6.7-D: la diagonal se dibuja en ::before (fondo); la sección no recorta su contenido, ni tapa el hilo, ni usa margen negativo */
  .avance { --pt: calc(var(--cut) + var(--gap-m)); position: relative; isolation: isolate; margin: 0; padding-block: calc(var(--cut) + var(--gap-m)); background: var(--surface); }
  .avance::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-teal); clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
  .avance-row { position: relative; display: grid; gap: var(--s-5); align-items: center; }
  .avance h2 { max-width: 20ch; font-weight: 300; line-height: 1.1; }
  .avance .avance-text { margin-top: var(--s-5); max-width: 56ch; font-size: var(--fs-lead); }
  .avance a:not(.btn) { color: var(--text-link); }
  .avance + .cta-final { --pt: var(--gap-m); padding-top: var(--gap-m); }

  /* cierre: tarjeta ancha azul pálido (con banner en el Home) */
  .cta-final .cta-grid { display: grid; gap: var(--s-6); align-items: start; }
  .cta-card { background: var(--pale); border-radius: var(--r-xl); overflow: hidden; padding: var(--s-6) var(--s-5); }
  .cta-card .art-banner { margin: calc(var(--s-6) * -1) calc(var(--s-5) * -1) var(--s-6); }
  .cta-final h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.08; font-weight: 400; }
  .cta-final .contact-pair a { color: var(--link); }
  .cta-b { display: grid; gap: var(--s-3); justify-items: start; }
  @media (min-width: 960px) {
    .cta-card { padding: var(--s-8); }
    .cta-card .art-banner { margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) var(--s-7); }
    .cta-final .cta-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
    .cta-final .cta-a { grid-column: 1 / span 7; }
    .cta-final .cta-b { grid-column: 8 / span 5; }
  }

  /* servicios: rombito del hilo junto al ítem activo del índice; CTA con microtexto */
  .anchors a[aria-current="true"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--sage); transform: rotate(45deg); vertical-align: 1px; }
  .svc-body .cta-block, .page-head .cta-block { margin-top: var(--s-2); }
  .page-head .cta-block { margin-top: var(--s-6); }
  .page-head .cta-block .btn { margin-top: 0; }

  /* pie: slot normativo (oculto hasta tener texto revisado) */
  .normativo { margin-top: var(--s-5); font-size: var(--fs-small); }
}


/* ================= v6.1: Servicios en el Home, página Agentes e IA, imágenes de Servicios en degradado ================= */
@layer pages {
  /* Servicios en el Home (v6.1-B): panel cielo que sube 56 px sobre la base del hero */
  .services-home { position: relative; z-index: 2; margin-top: -56px; padding-bottom: var(--s-6); background: transparent; }
  .services-home .panel { padding-block: var(--s-7); }
  .services-home .container { max-width: calc(var(--container-w) - 48px); }
  .svc-grid { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
  @media (min-width: 480px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 960px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
  .svc-card { position: relative; z-index: 0; display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); color: var(--text); text-decoration: none; overflow: hidden; min-height: 44px; }
  .svc-card h3 { font-size: 1.375rem; }
  .svc-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
  .svc-card__more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-weight: 600; color: var(--text-link); }
  .svc-card__more svg { width: 18px; height: 18px; }
  .svc-card:hover .svc-card__more { text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pale); margin-bottom: var(--s-2); }
  .ico svg { width: 26px; height: 26px; fill: none; stroke: var(--bronze); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .ico .i2 { stroke: var(--teal); }
  .svc-wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
  .svc-wide a { font-weight: 600; }
  .svc-wide .svc-wide__name { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 500; text-decoration: none; color: var(--text); }
  .svc-wide .svc-wide__name:hover { text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

  /* componente .pending: solo existe en desarrollo (VITA_PENDING=1); el build de producción lo elimina */
  .pending { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--white); border: 1.5px dashed var(--line); border-radius: var(--r-sm); font-size: var(--fs-small); }
  .pending::before { content: "Pendiente de confirmar. "; font-weight: 700; }

  /* /agentes-ia/ */
  .ia-hero { background: var(--surface-alt); padding-block: var(--s-7); }
  .ia-hero-grid { display: grid; gap: var(--s-6); align-items: center; }
  .ia-hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.08; font-weight: 500; max-width: 22ch; }
  .ia-hero .lead { margin-top: var(--s-4); }
  .ia-hero .hero-actions { margin-top: var(--s-5); }
  .art-p2 { aspect-ratio: 4 / 3; max-width: 560px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
  .art-p2 img { object-position: 78% 50%; }
  @media (min-width: 960px) {
    .ia-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-7); }
    .art-p2 { aspect-ratio: 5 / 4; justify-self: end; width: 100%; }
  }
  .ia-two { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 960px) { .ia-two { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--s-8); } }
  .blocks { width: min(280px, 100%); height: auto; justify-self: center; overflow: visible; }
  .bk { stroke-width: 2; }
  .bk.b1 { fill: var(--pale); stroke: var(--action); }
  .bk.b2 { fill: var(--teal-bg); stroke: var(--teal); }
  .bk.b3 { fill: var(--white); stroke: var(--bronze); }
  .bk-l { stroke: var(--bronze); stroke-width: 2; fill: none; }
  .ia-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
  .ia-list li { position: relative; padding-left: 24px; font-size: 1.0625rem; }
  .ia-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; background: var(--sage); transform: rotate(45deg); }
  .ia-intro { max-width: 68ch; }
  .ia-intro > p:not(.ia-note) { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.5; }
  .ia-cards { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .ia-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ia-cards > li:first-child { grid-column: span 2; } }
  @media (min-width: 960px) { .ia-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } .ia-cards > li:first-child { grid-column: span 1; } }
  .ia-card { height: 100%; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); display: grid; gap: var(--s-2); align-content: start; }
  .ia-card h3 { font-size: 1.375rem; }
  .ia-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
  .ia-card .benefit { color: var(--text); font-size: 0.9375rem; }
  .ia-card .benefit strong { color: var(--teal-ink); }
  .tl { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-5); counter-reset: t; }
  .tl__step { position: relative; padding: var(--s-5) var(--s-5) var(--s-5) 64px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
  .tl__step::before { content: ""; position: absolute; left: 26px; top: 30px; width: 14px; height: 14px; box-sizing: border-box; background: var(--white); border: 2px solid var(--bronze); transform: rotate(45deg); }
  .tl__num { font-family: var(--ff-display); font-size: 2rem; font-weight: 300; line-height: 1; color: var(--teal-ink); display: block; width: fit-content; margin-bottom: var(--s-2); }
  .tl__step h3 { font-size: 1.375rem; }
  .tl__step p { margin-top: var(--s-2); color: var(--text-muted); font-size: 1rem; }
  .tl-close { margin-top: var(--s-5); font-family: var(--ff-display); font-size: 1.375rem; }
  @media (min-width: 960px) {
    .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tl__step { padding: var(--s-6) var(--s-5) var(--s-5); }
    .tl__step::before { left: var(--s-5); top: -7px; background: var(--sage); }
    .tl__step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s-5) + 14px); right: calc(var(--s-5) * -1 - 4px); top: -1px; height: 2px; background: var(--bronze); opacity: .35; }
  }
  .ia-for p { font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; margin-top: var(--s-4); }
  .faq { display: grid; gap: var(--s-3); margin-top: var(--s-6); max-width: 820px; }
  .faq details { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
  .faq summary { cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600; min-height: 52px; display: flex; align-items: center; }
  .faq details:hover { border-color: var(--text-link); }
  .faq details > p { padding: 0 var(--s-5) var(--s-4); color: var(--text-muted); }
  .ia-note { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--text-muted); max-width: 72ch; }

  /* Servicios con imagen en degradado (v6.1-F): la imagen se disuelve en el fondo con máscara, sin bordes duros */
  .svc-text { display: grid; gap: var(--s-5); min-width: 0; }
  .svc-body.has-media > .service__media { order: -1; }
  .service__media { display: block; position: relative; max-width: none; }
  .service__media .art-fig { margin: 0; }
  .service__media picture { display: block; position: relative; width: 100%; height: 200px; max-width: none; overflow: hidden; }
  .service__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .service__media picture {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 55%, transparent 100%);
  }
  @media (min-width: 1100px) {
    .svc-body.has-media { grid-template-columns: minmax(0, 1fr) 38%; align-items: start; column-gap: var(--s-6); }
    /* v6.5-B: la imagen acompaña la lectura de la lista (sticky): sin vacío debajo */
    .svc-body.has-media > .service__media { order: 0; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
    .service__media picture { height: auto; aspect-ratio: 3 / 4; max-height: 680px; }
    .svc-body.has-media > .service__media--left { order: -1; }
    .svc-body.has-media:has(> .service__media--left) { grid-template-columns: 38% minmax(0, 1fr); }
    .service__media picture {
      -webkit-mask-image: linear-gradient(to left, black 0%, black 45%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to left, black 0%, black 45%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
      mask-composite: intersect;
    }
    .service__media--left picture {
      -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
      mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    }
  }
  @supports not (mask-image: linear-gradient(black, black)) {
    .service__media picture::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--bg)); pointer-events: none; z-index: 1; }
  }
  .service__media--ergo img, .service__media--estilos img { filter: saturate(.85); }
  .svc-ico { display: none; }
  .svc--plain .svc-ico { display: grid; }
}

/* hojas de la banda salvia (M8) */
.lf { fill: var(--leaf); }
.leafs { display: block; width: 96px; height: auto; overflow: visible; pointer-events: none; }
.lf-tip { fill: var(--sage); }

/* logo y rombos en SVG en línea: colores desde los tokens */
.lg-b { stroke: var(--bronze); } .lg-g { stroke: var(--leaf); } .lg-t { stroke: var(--gray); }
.dm-1 { stroke: var(--bronze); } .dm-2 { stroke: var(--action); } .dm-3 { stroke: var(--bronze); fill: var(--teal-bg); } .dm-4 { stroke: var(--gray); }

/* retardos escalonados de revelado (M3) y de las hojas (M8): sin estilos en línea (CSP) */
.d1 { --i: 0; } .d2 { --i: 1; } .d3 { --i: 2; } .d4 { --i: 3; } .d5 { --i: 4; } .d6 { --i: 5; }
.lf.i2 { --i: 1; } .lf.i3 { --i: 2; }
@media (max-width: 479.98px) { .d1, .d2, .d3, .d4, .d5, .d6 { --i: 0; } }

/* ================= v6.3: correcciones R11-01 / R11-04, marcado de M15 a M27 e imágenes N1 a N8 ================= */
@layer pages {
  /* M15: subrayado de la palabra clave del título (decorativo; el texto conserva su contraste) */
  .u-draw { position: relative; display: inline-block; }
  .u-draw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 3px; border-radius: 2px; background: var(--teal); transform-origin: left center; }

  /* M16: íconos de línea (el barrido se declara en la capa motion) */
  .ico-draw { overflow: hidden; }

  /* M19: anillo del nodo del hilo (invisible en reposo) */
  .node-ring { position: absolute; inset: 0; box-sizing: border-box; border: 2px solid var(--sage); transform: rotate(45deg); opacity: 0; pointer-events: none; }

  /* M20/M22: enlaces con subrayado que se desliza (se suma al subrayado fijo) */
  .link-arrow, .footer-list a { position: relative; }
  .link-arrow::after, .footer-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--action); transform: scaleX(0); transform-origin: right center; pointer-events: none; }
  .footer-list a::after { bottom: 5px; }
  .footer-list.footer-social a::after { bottom: 10px; }
  .link-arrow:hover::after, .link-arrow:focus-visible::after, .footer-list a:hover::after, .footer-list a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
  @media (min-width: 1100px) and (hover: hover) {
    .nav-link::after { content: ""; position: absolute; inset: auto 16px 5px; height: 2px; background: var(--action); transform: scaleX(0); transform-origin: right center; pointer-events: none; }
    .nav-link:not([aria-current="page"]):hover::after, .nav-link:not([aria-current="page"]):focus-visible::after { transform: scaleX(1); transform-origin: left center; }
  }
  @media (min-width: 1100px) and (max-width: 1279.98px) { .nav-link::after { inset-inline: 9px; } }

  /* M26: viñeta de las preguntas frecuentes = chevron que gira */
  .faq summary { list-style: none; justify-content: space-between; gap: var(--s-4); }
  .faq summary::-webkit-details-marker { display: none; }
  .chevr { width: 20px; height: 20px; flex: none; color: var(--link); }
  .faq details[open] .chevr { transform: rotate(90deg); }

  /* M24: flujo de rombos de /agentes-ia/ (decorativo; sin etiquetas porque el copy 03b no nombra estas piezas) */
  .flow { container-type: inline-size; display: flex; flex-direction: column; align-items: center; margin: var(--s-6) 0 var(--s-5); position: relative; }
  .flow__node { position: relative; flex: none; width: 24px; height: 24px; }
  .flow__node::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; background: var(--white); border: 2px solid var(--action); transform: rotate(45deg); }
  .flow__node--mid::before { background: var(--pale); }
  .flow__node--end::before { border-color: var(--bronze); }
  .flow__node--end::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border: 2px solid var(--sage); transform: rotate(45deg); opacity: 0; pointer-events: none; }
  .flow__link { flex: none; width: 2px; height: 48px; background: var(--action); opacity: .55; }
  .flow__dot { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: 7px 0 0 -5px; background: var(--sage); transform: rotate(45deg); opacity: 0; pointer-events: none; }
  @media (min-width: 640px) {
    .flow { flex-direction: row; justify-content: center; max-width: 560px; margin-inline: 0; }
    .flow__link { width: auto; height: 2px; flex: 1 1 0; }
    .flow__dot { left: 0; top: 50%; margin: -5px 0 0 7px; }
  }

  /* M27: ilustración de rombos en 404 e Intranet */
  .solo .container { display: grid; gap: var(--s-6); align-items: center; }
  .solo-art { width: min(220px, 60%); height: auto; overflow: visible; }
  .solo-art path { fill: none; stroke-width: 2.25; stroke-linejoin: miter; transform-box: fill-box; transform-origin: center; }
  .solo-art .r1 { stroke: var(--action); } .solo-art .r2 { stroke: var(--sage); } .solo-art .r3 { stroke: var(--bronze); stroke-width: 1.5; }
  .solo-art .leaf { fill: var(--leaf); stroke: none; }
  @media (min-width: 768px) { .solo .container { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); } .solo-art { width: 240px; } }
}

@layer motion {
  @keyframes pulse-ring { from { opacity: .5; transform: rotate(45deg) scale(1); } to { opacity: 0; transform: rotate(45deg) scale(2.2); } }
  @keyframes menu-in { from { opacity: 0; transform: translateY(10px); } }
  @keyframes fl-node { from { opacity: 0; transform: scale(.8); } }
  @keyframes fl-link-x { from { clip-path: inset(0 100% 0 0); } }
  @keyframes fl-link-y { from { clip-path: inset(0 0 100% 0); } }
  @keyframes fl-run-x { 0% { opacity: 0; transform: translate(0, 0) rotate(45deg); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(100cqw - 24px), 0) rotate(45deg); } }
  @keyframes fl-run-y { 0% { opacity: 0; transform: translate(0, 0) rotate(45deg); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 144px) rotate(45deg); } }
  @keyframes rombo-in { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(8deg); } }
  @keyframes leaf-in { from { opacity: 0; transform: scale(.6); } }
  @media (prefers-reduced-motion: no-preference) {
    /* M15 subrayado que se dibuja */
    .u-draw::after { transition: transform 600ms var(--ease-out) 200ms; }
    .js .u-draw:not(.is-in)::after { transform: scaleX(0); }
    /* M16 íconos trazados por barrido (clip-path) */
    .ico-draw { clip-path: inset(0 0 0 0); transition: clip-path 500ms var(--ease-out), opacity 150ms linear; transition-delay: calc(var(--i, 0) * 70ms); }
    .js .ico-draw:not(.is-in) { clip-path: inset(0 100% 0 0); opacity: 0; }
    /* M17 tarjetas: una sola transición compuesta (opacidad del revelado + inclinación) */
    .card--link { transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 70ms), transform 250ms var(--ease); }
    @media (hover: none) {
      .card--link:active { transform: translateY(-2px) scale(.985); transition: transform 120ms var(--ease); }
    }
    /* M18 imágenes con revelado de cortina (clip-path; la caja no cambia de tamaño) */
    .curtain { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--ease-out), opacity 800ms var(--ease-out); }
    .js .curtain:not(.is-in) { clip-path: inset(0 100% 0 0); opacity: .6; }
    .js .curtain--l:not(.is-in) { clip-path: inset(0 0 0 100%); }
    /* M19 pulso del rombo del hilo (una vez) */
    .node.is-in .node-ring { animation: pulse-ring 700ms var(--ease-out) 1 both; }
    /* M20 relleno deslizante también con teclado y al tocar */
    .btn:focus-visible::before { transform: scaleX(1); }
    @media (hover: none) { .btn:active::before { transform: scaleX(1); transition-duration: 100ms; } }
    /* M22 subrayados que se deslizan */
    .link-arrow::after, .footer-list a::after, .nav-link::after { transition: transform 200ms var(--ease); }
    /* M23 el formulario se asienta cuando carga (el iframe ya es utilizable) */
    .form-embed__frame { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
    .js .form-embed__frame:not(.is-ready) { opacity: .85; transform: translateY(8px); }
    /* M25 el número del paso se asienta */
    .tl__num { transition: opacity 300ms linear, transform 300ms cubic-bezier(.3, 1.2, .5, 1); transition-delay: calc(var(--i, 0) * 120ms); transform-origin: left center; }
    .js .tl:not(.is-in) .tl__num { opacity: 0; transform: scale(1.25); }
    /* M24 flujo de rombos: se conecta una sola vez */
    .js .flow:not(.is-in) .flow__node, .js .flow:not(.is-in) .flow__link { opacity: 0; }
    .js .flow.is-in .flow__node { animation: fl-node 300ms var(--ease-out) backwards; }
    .js .flow.is-in .flow__link { animation: fl-link-y 350ms var(--ease-out) backwards; }
    .js .flow.is-in .flow__node:nth-of-type(1) { animation-delay: 0ms; }
    .js .flow.is-in .flow__link:nth-of-type(1) { animation-delay: 250ms; }
    .js .flow.is-in .flow__node:nth-of-type(2) { animation-delay: 550ms; }
    .js .flow.is-in .flow__link:nth-of-type(2) { animation-delay: 800ms; }
    .js .flow.is-in .flow__node:nth-of-type(3) { animation-delay: 1100ms; }
    .js .flow.is-in .flow__dot { animation: fl-run-y 600ms var(--ease) 1150ms 1 both; }
    .js .flow.is-in .flow__node--end::after { animation: pulse-ring 650ms var(--ease-out) 1750ms 1 both; }
    @media (min-width: 640px) {
      .js .flow.is-in .flow__link { animation-name: fl-link-x; }
      .js .flow.is-in .flow__dot { animation-name: fl-run-x; }
    }
    /* M27 rombos que se acomodan (404 e Intranet, al cargar) */
    .solo-art .r1 { --dx: -22px; --dy: -14px; animation: rombo-in 600ms var(--ease-out) 0ms 1 backwards; }
    .solo-art .r2 { --dx: 20px; --dy: -18px; animation: rombo-in 600ms var(--ease-out) 120ms 1 backwards; }
    .solo-art .r3 { --dx: 16px; --dy: 20px; animation: rombo-in 600ms var(--ease-out) 240ms 1 backwards; }
    .solo-art .leaf { transform-origin: center; animation: leaf-in 400ms var(--ease-out) 600ms 1 backwards; }
  }
  /* M21 menú móvil: entrada escalonada de los ítems (el panel y el foco existen desde el primer fotograma) */
  @media (max-width: 1099.98px) and (prefers-reduced-motion: no-preference) {
    .js .site-nav.is-open li { animation: menu-in 300ms var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 45ms); }
    .js .site-nav.is-open > ul:first-child > li:nth-child(2) { --n: 1; }
    .js .site-nav.is-open > ul:first-child > li:nth-child(3) { --n: 2; }
    .js .site-nav.is-open > ul:first-child > li:nth-child(4) { --n: 3; }
    .js .site-nav.is-open > ul:first-child > li:nth-child(5) { --n: 4; }
    .js .site-nav.is-open .nav-right > li:nth-child(1) { --n: 5; }
    .js .site-nav.is-open .nav-right > li:nth-child(3) { --n: 6; }
  }
}

/* imágenes N1 a N8 (recortes; se usan solo si el archivo existe en tools/aprobadas y se procesó) */
@layer pages {
  .art-p3, .art-n1, .art-n2 { display: block; }
  .art-n3, .art-n4, .art-n5 { margin-top: var(--s-6); }
  .art-n4 { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); }
  .art-n2 img, .art-n6 img { object-position: 50% 50%; }
  .art-n7 { aspect-ratio: 1 / 1; max-width: min(460px, 100%); border-radius: var(--r-xl); }
  .art-n7 img { object-position: 50% 50%; }
  .art-n3, .art-n5 { max-width: 560px; aspect-ratio: 3 / 2; }
  .art-n4 { max-width: none; aspect-ratio: 16 / 9; }
  .art-n6 { aspect-ratio: 4 / 5; }
}

/* v6.5: pie de imagen, tinte frío, motivo de marca ampliado */
@layer pages {
  .art-fig { margin: var(--s-6) 0 0; max-width: 100%; }
  .art-fig > .art-photo, .art-fig > .art { margin-top: 0; }
  .img-cap { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); font-style: normal; text-align: left; }
  .art-g7, .art-p3, .art-p6, .art-p5 { position: relative; }
  .art-g7 img, .art-p3 img, .art-p6 img, .art-p5 img { filter: saturate(.7) contrast(.98) brightness(1.02); }
  .art-g7::after, .art-p3::after, .art-p6::after, .art-p5::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color;
    background: linear-gradient(160deg, var(--cool-1), var(--cool-2));
  }
}
/* motivo de marca de la banda 'avance' (sin capa, igual que .leafs) */
.avance .leafs { justify-self: end; margin: 0; }
@media (min-width: 960px) { .avance-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-5); } .avance .leafs { grid-column: 2; grid-row: 1; justify-self: center; width: clamp(160px, 16vw, 240px); } }

/* v6.5: look de concepto en las imágenes de IA (no toca la imagen del hero /agentes-ia/, que es el LCP, ni el logo) */
@layer pages {
  .art:not(.art-p2) { position: relative; }
  .art:not(.art-p2) img { filter: blur(1px) saturate(.88); }
  .art:not(.art-p2)::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse at 50% 45%, transparent 42%, var(--veil) 100%);
  }
  .art-g7 img, .art-p3 img, .art-p6 img, .art-p5 img { filter: blur(1px) saturate(.65) contrast(.98) brightness(1.02); }
  .art-photo:not(.art-p2):not(.art-n4) {
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black 56%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black 56%, transparent 100%);
  }
}

/* R13-03: enlaces en linea de Contacto con area tactil de 44 px de alto (WCAG 2.5.8 pide 24) */
.form-aviso a, .form-embed__fallback a { display: inline-flex; align-items: center; min-height: 44px; }

/* ================= v6.6: bloque Agentes e IA del Home, casa de inicio, íconos de redes, logo de «Cómo trabajamos» ================= */
@layer pages {
  .ia-home { overflow: clip; }
  .aflow { margin: var(--s-7) 0 0; padding: var(--s-5) var(--s-4); background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
  .aflow__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
  .aflow__node { position: relative; display: grid; grid-template-columns: 72px 1fr; align-items: center; column-gap: var(--s-4); min-height: 96px; }
  .aflow__ico { width: 68px; height: 68px; display: grid; place-items: center; justify-self: center; }
  .aflow__dia { width: 48px; height: 48px; display: grid; place-items: center; transform: rotate(45deg); background: var(--white); border: 2px solid var(--bronze); border-radius: 6px; }
  .aflow__dia svg { width: 24px; height: 24px; transform: rotate(-45deg); fill: none; stroke: var(--link); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .aflow__ico { position: relative; }
  .aflow__dia { position: relative; }
  .aflow__dia::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--pale); }
  .aflow__dia svg { position: relative; }
  .aflow__ok { position: absolute; right: -2px; bottom: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-ink); border: 2px solid var(--white); box-sizing: border-box; }
  .aflow__ok svg { width: 14px; height: 14px; fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .aflow__node:nth-child(2) { --i: 1; } .aflow__node:nth-child(3) { --i: 2; } .aflow__node:nth-child(4) { --i: 3; }
  .aflow__txt { display: block; min-width: 0; }
  .aflow__label { font-family: var(--ff-display); font-weight: 500; font-size: 1.375rem; line-height: 1.2; color: var(--text); }
  .aflow__micro { display: block; margin-top: 2px; font-family: var(--ff-text); font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--text-muted); }
  .aflow__node:not(:last-child)::after { content: ""; position: absolute; left: 35px; top: 86px; width: 2px; height: 20px; background: var(--teal); transform-origin: top; }
  .aflow__node:not(:last-child)::before { content: ""; position: absolute; left: 32px; top: 100px; width: 8px; height: 8px; background: var(--teal); transform: rotate(45deg); }
  .aflow__tools { display: none; }
  @media (min-width: 768px) {
    .aflow { padding: var(--s-6) var(--s-5) var(--s-5); }
    .aflow__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .aflow__node { grid-template-columns: 1fr; justify-items: center; align-content: start; row-gap: var(--s-3); height: auto; text-align: center; }
    .aflow__node:not(:last-child)::after { left: calc(50% + 44px); top: 33px; width: calc(100% - 88px); height: 2px; transform-origin: left; }
    .aflow__node:not(:last-child)::before { left: calc(150% - 48px); top: 30px; }
    .aflow__tools { display: flex; gap: var(--s-1); justify-content: center; }
    .aflow__tools i { width: 8px; height: 8px; background: var(--sage); border: 1.5px solid var(--bronze); box-sizing: border-box; transform: rotate(45deg); }
  }
  /* v6.8: maqueta de «aplicación con agente» (decorativa; el ol de pasos es lo que leen los lectores de pantalla) */
  .ia-home__eyebrow { display: inline-flex; gap: var(--s-2); margin-bottom: var(--s-3); }
  .ia-home__eyebrow svg { width: 14px; height: 14px; fill: var(--link); }
  .ia-home__sub { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-lead); line-height: 1.3; color: var(--text); max-width: 40ch; }
  .aflow.aapp { padding: 0; background: transparent; border: 0; border-radius: 0; margin: var(--s-7) 0 0; }
  .aapp__win { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
  .aapp__bar { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); background: var(--sky); border-bottom: 1px solid var(--border-soft); }
  .aapp__dots { display: inline-flex; gap: 6px; }
  .aapp__dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--teal); box-sizing: border-box; }
  .aapp__title { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-small); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aapp__chip { display: inline-grid; justify-items: center; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: var(--pale); color: var(--ink); font-weight: 600; font-size: 0.8125rem; line-height: 1.2; }
  .aapp__chip > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
  .aapp__chip > span::before { content: ""; width: 7px; height: 7px; background: var(--sage); border: 1.5px solid var(--bronze); box-sizing: border-box; transform: rotate(45deg); }
  .aapp__chip-run { opacity: 0; }
  .aapp__body { padding: var(--s-4); display: grid; gap: var(--s-5); max-width: 1040px; margin-inline: auto; }
  .aapp__top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--s-5); }
  .aapp__top::before { content: ""; position: absolute; left: calc(50% - 1px); top: 24px; bottom: 24px; width: 2px; background: var(--teal); transform-origin: top; }
  .aapp__card { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 72px; padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
  .aapp__ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--white); border: 2px solid var(--bronze); border-radius: 10px; }
  .aapp__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--link); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .aapp__txt { min-width: 0; display: grid; gap: 2px; }
  .aapp__lab { font-size: 0.8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
  .aapp__val { font-size: 1rem; line-height: 1.35; color: var(--text); }
  .aapp__det { font-size: 1rem; line-height: 1.35; color: var(--text-muted); }
  .aapp__agent { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); background: var(--white); text-align: center; }
  .aapp__avatar { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--pale); border: 2px solid var(--teal); }
  .aapp__avatar svg { width: 34px; height: 34px; fill: var(--link); }
  .aapp__avatar svg .aapp__spark2 { fill: var(--teal-ink); }
  .aapp__avatar::after { content: ""; position: absolute; right: -2px; bottom: 2px; width: 10px; height: 10px; background: var(--sage); border: 2px solid var(--bronze); box-sizing: border-box; transform: rotate(45deg); }
  .aapp__halo { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; }
  .aapp__log { padding: var(--s-4); background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
  .aapp__log ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
  .aapp__log li { position: relative; padding-left: var(--s-5); font-size: 1rem; line-height: 1.4; color: var(--text-muted); }
  .aapp__log li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 9px; height: 9px; background: var(--sage); border: 2px solid var(--bronze); box-sizing: border-box; transform: rotate(45deg); }
  .aapp__note { max-width: none; margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--text-muted); text-align: center; }
  @media (max-width: 479px) { .aapp__log { display: none; } }
  @media (min-width: 768px) {
    .aapp__bar { padding: 0 var(--s-5); }
    .aapp__body { padding: var(--s-5) var(--s-5) var(--s-6); gap: var(--s-6); }
    .aapp__top { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); column-gap: 0; align-items: center; }
    .aapp__top::before { left: 24px; right: 24px; top: calc(50% - 1px); bottom: auto; width: auto; height: 2px; transform-origin: left; }
    .aapp__agent { padding: var(--s-1) var(--s-2); }
  }
  @media (min-width: 1280px) { .aapp__body { padding: var(--s-6) var(--s-7) var(--s-7); } .aapp__top { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); } }
  @media (forced-colors: active) { .aflow__dia::before { display: none; } .aflow__ok { border-color: CanvasText; } }
  .ia-home__benefits { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
  .ia-home__benefits li { position: relative; padding-left: var(--s-6); font-size: 1.0625rem; line-height: 1.45; color: var(--text); }
  .ia-home__benefits li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; background: var(--sage); border: 2px solid var(--bronze); box-sizing: border-box; transform: rotate(45deg); }
  @media (min-width: 960px) { .ia-home__benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
  .ia-home__cta { margin: var(--s-6) 0 0; }
  @media (max-width: 479px) { .ia-home__cta .btn { width: 100%; } }
}

@layer components {
  /* v6.6-C: casa de inicio. >= 1100 px va dentro del ítem «Inicio»; < 1100 px es un botón junto al logo */
  .home-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: var(--s-1); border-radius: var(--r-pill); flex: none; position: relative; text-decoration: none; }
  .home-btn svg { width: 24px; height: 24px; color: var(--bronze-ink); }
  .home-btn:hover { background: var(--nav-hover); }
  .home-btn[aria-current="page"] { background: var(--pale); }
  .home-btn[aria-current="page"]::after { content: ""; position: absolute; inset: auto 12px 5px; height: 3px; background: var(--action); }
  .nav-home svg { width: 20px; height: 20px; margin-right: var(--s-2); flex: none; color: var(--bronze-ink); }
  .js .site-header .menu-btn { margin-left: auto; }
  @media (min-width: 1100px) { .home-btn { display: none; } }
  @media (max-width: 1099.98px) { .nav-home svg { display: none; } }
  @media (max-width: 420px) { .site-header .container { gap: var(--s-2); } .menu-btn { padding-inline: 12px; gap: var(--s-1); } }
  @media (max-width: 374px) { .brand-wm { display: none; } }
  /* v6.6-D: íconos de redes del pie */
  .footer-social svg.soc { width: 20px; height: 20px; flex: none; margin-right: var(--s-2); }
}

@layer motion {
  /* logo de «Cómo trabajamos» y flujo de Agentes e IA: una sola pasada, solo opacity/transform/stroke-dashoffset; con reduce o sin JS se ve completo y quieto */
  @media (prefers-reduced-motion: no-preference) {
    .js .story-logo:not(.is-in) .sl { stroke-dasharray: 1; stroke-dashoffset: 1; }
    .js .story-logo:not(.is-in) .sl-t, .js .story-logo:not(.is-in) .sl-w { opacity: 0; }
    .story-logo .sl { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease-out); }
    .story-logo .sl-t, .story-logo .sl-w { transition: opacity 500ms var(--ease-out) 600ms; }

    /* v6.8: una sola pasada de ~2,7 s; estado final por defecto (sin JS o con reduce se ve completo) */
    .aapp__task, .aapp__notice { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
    .aapp__notice { transition-delay: 2000ms; }
    .aapp__top::before { transition: transform 600ms var(--ease-out); transition-delay: 300ms; }
    .aflow__dia::before { transition: opacity 300ms var(--ease-out); transition-delay: calc(var(--i, 0) * 500ms + 400ms); }
    .aflow__ok { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); transition-delay: calc(var(--i, 0) * 500ms + 500ms); }
    .aflow__node::after { transition: transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 500ms + 600ms); }
    .aflow__node::before { transition: opacity 200ms var(--ease-out); transition-delay: calc(var(--i, 0) * 500ms + 900ms); }
    .aflow__tools i { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(var(--i, 2) * 500ms + 600ms); }
    .aapp__log li { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
    .aapp__log li:nth-child(1) { transition-delay: 500ms; } .aapp__log li:nth-child(2) { transition-delay: 1000ms; } .aapp__log li:nth-child(3) { transition-delay: 1500ms; }
    .aapp__chip-run, .aapp__chip-ok { transition: opacity 250ms var(--ease-out); transition-delay: 2400ms; }
    .is-in .aapp__halo { animation: aapp-pulse 900ms var(--ease-out) 1000ms 1 both; }
    .js .aapp:not(.is-in) .aapp__task, .js .aapp:not(.is-in) .aapp__notice { opacity: 0; transform: translateY(8px); }
    .js .aapp:not(.is-in) .aapp__top::before { transform: scaleY(0); }
    .js .aapp:not(.is-in) .aflow__dia::before { opacity: 0; }
    .js .aapp:not(.is-in) .aflow__ok { opacity: 0; transform: scale(.4); }
    .js .aapp:not(.is-in) .aflow__node::before { opacity: 0; }
    .js .aapp:not(.is-in) .aflow__node::after { transform: scaleY(0); }
    .js .aapp:not(.is-in) .aflow__tools i { opacity: 0; transform: rotate(45deg) scale(.4); }
    .js .aapp:not(.is-in) .aapp__log li { opacity: 0; transform: translateY(6px); }
    .js .aapp:not(.is-in) .aapp__chip-run { opacity: 1; }
    .js .aapp:not(.is-in) .aapp__chip-ok { opacity: 0; }
    @keyframes aapp-pulse { 0% { opacity: 0; transform: scale(.9); } 40% { opacity: .7; } 100% { opacity: 0; transform: scale(1.25); } }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .js .aapp:not(.is-in) .aapp__top::before { transform: scaleX(0); }
    .js .aapp:not(.is-in) .aflow__node::after { transform: scaleX(0); }
  }
}