/* Paleta. Un solo lugar donde cambiar el mundo visual de la pagina. */
    :root {
      --fondo: #08080a;
      --superficie: #0c0c0f;
      --tinta: #f0f0f1;
      --tinta-2: #d2d2d7;
      --tinta-3: #91919a;
      --tinta-4: #93939c;
      --marca: #2440ff;
      --marca-clara: #3d55ff;
      --marca-oscura: #1b33d6;
      --filete: rgba(255,255,255,.08);
      --filete-fuerte: rgba(255,255,255,.15);
      --lavado-marca: rgba(36,64,255,.16);
    }

    body { margin: 0; background: var(--fondo); }
    #page * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    picture { display: contents; }
    #page { font-family: "Host Grotesk", "Helvetica Neue", Arial, sans-serif; color: var(--tinta); -webkit-font-smoothing: antialiased; letter-spacing: -0.011em; }

    a { color: #2440ff; text-decoration: none; }
    a:hover { color: #4f68ff; }
    ::selection { background: var(--marca); color: #ffffff; }
    #page { caret-color: var(--marca); scrollbar-width: thin; scrollbar-color: #2a2a30 transparent; }
    html::-webkit-scrollbar { width: 9px; }
    html::-webkit-scrollbar-track { background: transparent; }
    html::-webkit-scrollbar-thumb { background: #24242a; border: 3px solid #08080a; }
    html::-webkit-scrollbar-thumb:hover { background: #34343c; }
    :focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

    h1, h2, h3, .display { font-family: "Bricolage Grotesque", "Host Grotesk", "Helvetica Neue", Arial, sans-serif; font-optical-sizing: auto; }
    .mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
    .wrap { width: min(1180px, 100% - 100px); margin: 0 auto; }
    .sec { scroll-margin-top: 84px; padding: clamp(76px, 11vw, 156px) 0; position: relative; }
    .h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -0.032em; font-weight: 600; margin: 0; text-wrap: balance; }
    .lead { font-size: clamp(15.5px, 1.4vw, 17px); line-height: 1.62; color: var(--tinta-3); max-width: 62ch; margin: 24px 0 0; }
    .rule { height: 1px; background: var(--filete); border: 0; margin: 0; }
    .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .label { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-4); }

    .cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 28px; background: var(--marca); color: #ffffff; font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; position: relative; overflow: hidden; transition: background .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, transform .12s ease; box-shadow: 0 14px 34px -18px rgba(0,0,0,.95); }
    .cta:hover { background: #000000; color: #ffffff; box-shadow: 0 20px 44px -18px rgba(0,0,0,1); }
    .cta:active { background: #000000; transform: translateY(2px); box-shadow: 0 6px 16px -12px rgba(0,0,0,.95); }

    .ghost { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--filete-fuerte); color: var(--tinta); font-size: 12.5px; letter-spacing: 0.01em; transition: border-color .3s ease, background .3s ease, color .3s ease; }
    .ghost:hover { border-color: var(--marca); background: var(--lavado-marca); color: var(--tinta); }

    .navlink { position: relative; font-size: 13.5px; color: #8e8e97; padding: 6px 0; transition: color .28s ease; }
    .navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.16,1,.3,1); }
    .navlink:hover { color: var(--tinta); }
    .navlink:hover::after, .navlink[data-active="true"]::after { transform: scaleX(1); }
    .navlink[data-active="true"] { color: var(--tinta); }

    /* The icon leans toward the send, a nudge rather than a bounce. */
    .cta svg { transition: transform .32s cubic-bezier(.16,1,.3,1); }
    .cta:hover svg { transform: translateX(3px); }
    .rbtn svg { transition: transform .28s cubic-bezier(.16,1,.3,1); }
    #prev:hover:not(:disabled) svg { transform: translateX(-3px); }
    #next:hover:not(:disabled) svg { transform: translateX(3px); }
    /* The client line picks up the brand colour when its card is under the cursor. */
    .pcard .cliente { color: var(--tinta-4); transition: color .35s ease; }
    .pcard:hover .cliente { color: var(--marca); }
    /* A measured underline instead of the browser default. */
    .subraya { position: relative; }
    .subraya::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.16,1,.3,1); }
    .subraya:hover::after { transform: scaleX(1); }
    .ico { stroke: var(--marca); fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
    .shot { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.62); transition: filter .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
    .figure { position: relative; overflow: hidden; }

    /* Editorial service index */
    .srow { display: grid; grid-template-columns: 46px 1fr 1.3fr; gap: 32px; align-items: start; padding: 34px 18px 34px 0; position: relative; }
    .srow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lavado-marca), rgba(36,64,255,0) 70%); transform: scaleX(0); transform-origin: left; transition: transform .42s cubic-bezier(.16,1,.3,1); }
    .srow:hover::before { transform: scaleX(1); }
    .srow > * { position: relative; }

    /* Project rail */
    #rail { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; padding: 0 max(20px, calc((100% - 1180px) / 2)) 6px; scroll-padding-left: max(20px, calc((100vw - 1180px) / 2)); scrollbar-width: none; cursor: grab; }
    #rail::-webkit-scrollbar { display: none; }
    #rail.dragging { cursor: grabbing; user-select: none; }
    #rail img { -webkit-user-drag: none; user-select: none; }
    #rail:focus-visible { outline: 2px solid var(--marca); outline-offset: 6px; }
    .pcard { flex: 0 0 396px; border: 1px solid var(--filete); background: var(--superficie); transition: border-color .4s ease, background .4s ease; }
    .pcard:hover { border-color: rgba(111,134,255,.45); background: #0e0f13; }
    .pcard:hover .shot { filter: grayscale(1) contrast(1.08) brightness(.94); transform: scale(1.035); }
    .rbtn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--filete-fuerte); background: transparent; color: var(--tinta); cursor: pointer; transition: border-color .25s ease, background .25s ease, opacity .25s ease, transform .12s ease; }
    .rbtn:active:not(:disabled) { transform: scale(.93); }
    .rbtn:hover:not(:disabled) { border-color: var(--marca); background: var(--lavado-marca); }
    .rbtn:disabled { opacity: .3; cursor: default; }

    @media (prefers-reduced-motion: no-preference) {
      .rv { opacity: 0; transform: translateY(-16px); animation: rv .82s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: cover 14% cover 40%; }
      @keyframes rv { to { opacity: 1; transform: none; } }
      .draw { transform: scaleX(0); transform-origin: left; animation: draw .9s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: cover 16% cover 42%; }
      @keyframes draw { to { transform: scaleX(1); } }
      .rvi { clip-path: inset(0 0 100% 0); animation: rvi 1.25s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: entry 10% cover 22%; }
      @keyframes rvi { to { clip-path: inset(0 0 0 0); } }
      .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
      .ln > span { display: block; transform: translateY(-112%); animation: lnIn 1.05s cubic-bezier(.16,1,.3,1) forwards; }
      @keyframes lnIn { to { transform: translateY(0); } }
      .in { opacity: 0; transform: translateY(-12px); animation: rv .9s cubic-bezier(.16,1,.3,1) forwards; }
      .d1 { animation-delay: .42s; } .d2 { animation-delay: .54s; } .d3 { animation-delay: .12s; }
      .datum { transform: scaleX(0); transform-origin: left; animation: draw .95s cubic-bezier(.16,1,.3,1) .3s forwards; }
      .l1 { animation-delay: .06s; } .l2 { animation-delay: .17s; }
      .heroimg { clip-path: inset(0 0 100% 0); animation: rvi 1.5s cubic-bezier(.16,1,.3,1) .12s forwards; }

      /* Cards ride the rail's own axis: they arrive as you pan sideways, not
         as another vertical fade. */
      .pcard { opacity: 0; transform: translateY(-14px); animation: rv .8s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(inline); animation-range: entry 12% entry 62%; }
      /* Rows of a list arrive in sequence, each one a beat behind the last. */
      .row { opacity: 0; transform: translateY(-10px); animation: rv .7s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: cover 12% cover 30%; }
      /* The accent tick draws itself, like a mark set with a straightedge. */
      .tick { transform: scaleX(0); transform-origin: left; animation: draw .7s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: cover 13% cover 34%; }

      /* Every heading is set into place behind a mask edge, the way the hero
         headline already arrives. One voice for the whole page. */
      .h2 { clip-path: inset(-24% -10% 106% -10%); transform: translateY(-26px); animation: setin 1s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: cover 16% cover 44%; }
      @keyframes setin { to { clip-path: inset(-24% -10% -24% -10%); transform: none; } }

      /* The process section performs its own content: the three steps light up
         left to right as you scroll through the band, tick first, text after. */
      .paso { opacity: 0; transform: translateY(-16px); animation: rv .8s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); }
      .paso:nth-child(1) { animation-range: cover 15% cover 38%; }
      .paso:nth-child(2) { animation-range: cover 20% cover 43%; }
      .paso:nth-child(3) { animation-range: cover 25% cover 48%; }
      .paso .marca { transform: scaleX(0); transform-origin: left; animation: draw .65s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); }
      .paso:nth-child(1) .marca { animation-range: cover 13% cover 32%; }
      .paso:nth-child(2) .marca { animation-range: cover 18% cover 37%; }
      .paso:nth-child(3) .marca { animation-range: cover 23% cover 42%; }

      /* Registration numbers arrive like dials coming to rest, one after another. */
      .dial { display: inline-block; clip-path: inset(-30% -10% 110% -10%); transform: translateY(-14px); animation: setin .8s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); }
      .dial:nth-of-type(1) { animation-range: cover 16% cover 40%; }
      .dial:nth-of-type(2) { animation-range: cover 20% cover 44%; }
      .dial:nth-of-type(3) { animation-range: cover 24% cover 48%; }

      /* The crack travels left to right, so its frame opens the same way. */
      .rvx { clip-path: inset(0 100% 0 0); animation: rvx 1.35s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: view(); animation-range: entry 8% cover 26%; }
      @keyframes rvx { to { clip-path: inset(0 0 0 0); } }

      /* The bar settles in with everything else instead of being the one fixed thing. */
      #nav { opacity: 0; transform: translateY(-14px); animation: rv .8s cubic-bezier(.16,1,.3,1) .1s forwards; }
      .par { animation: par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      @keyframes par { from { transform: scale(1.07) translateY(1.4%); } to { transform: scale(1.07) translateY(-1.4%); } }
    }
    /* Scroll-progress rail: hidden on request. Set display to block to restore it. */
    #plumb { display: none; position: fixed; left: 62px; top: 100px; bottom: 34px; width: 9px; z-index: 25; pointer-events: none; }
    #plumbtrack { position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.09); transform: scaleY(0); transform-origin: top; animation: plumbIn .85s cubic-bezier(.16,1,.3,1) .25s forwards; }
    @keyframes plumbIn { to { transform: scaleY(1); } }
    #plumbfill { position: absolute; left: 3px; top: 0; width: 2px; height: 100%; background: var(--marca); transform: scaleY(0); transform-origin: top; }
    #plumbbob { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin-top: -4px; background: var(--marca); opacity: 0; animation: bobIn .5s ease .95s forwards; }
    @keyframes bobIn { to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { #plumbtrack { transform: scaleY(1); animation: none; } #plumbbob { opacity: 1; animation: none; } }
    #acero { position: absolute; inset: 0; opacity: .18; pointer-events: none;
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%); }
    .burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px; }
    .burger span { display: block; height: 1.5px; background: #f0f0f1; transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
    .burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
    .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
    .menu { display: none; position: fixed; inset: 0; z-index: 29; background: rgba(8,8,10,.97); backdrop-filter: blur(18px); flex-direction: column; justify-content: center; gap: 4px; padding: 96px 28px 40px; }
    .menu[hidden] { display: none; }
    .menulink { font-family: "Bricolage Grotesque", "Host Grotesk", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -0.028em; color: var(--tinta); padding: 16px 0; border-bottom: 1px solid var(--filete); }
    .menulink:hover, .menulink:active { color: var(--tinta); }
    .menucta { margin-top: 32px; width: 100%; }

    /* ---------- Tableta y portatil chico ---------- */
    @media (max-width: 1100px) {
      .wrap { width: min(1180px, 100% - 64px); }
      .navlink { font-size: 12.5px; }
      #inicio > div:last-child { min-height: 600px !important; }
      .srow { grid-template-columns: 40px 1fr 1.15fr; gap: 24px; }
    }

    /* ---------- Menu colapsado ---------- */
    @media (max-width: 940px) {
      .navlink, .navtel { display: none; }
      .burger { display: flex; }
      .menu { display: none; }
      #navinner { height: 72px !important; }
      .sec { scroll-margin-top: 72px; }
    }

    /* ---------- Una sola columna ---------- */
    @media (max-width: 860px) {
      .wrap { width: min(1180px, 100% - 40px); }
      .h2 { font-size: clamp(28px, 6.4vw, 40px); }
      .lead { max-width: none; margin-top: 18px; }

      /* Hero: el texto se apoya sobre la foto, con velo mas cerrado */
      #inicio > div:last-child { grid-template-columns: 1fr !important; min-height: 560px !important; }
      #inicio > div:last-child > div:first-child { padding: 120px 20px 72px !important; }
      #inicio > div:last-child > div:last-child { display: none; }
      #inicio > div:nth-child(2) { background: linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.87) 55%, rgba(8,8,10,.96) 100%) !important; }
      #inicio > div:nth-child(3) { display: none; }

      /* Servicios: icono y titulo arriba, explicacion debajo */
      .srow { grid-template-columns: 34px 1fr; gap: 18px 16px; padding: 26px 12px 26px 0; }
      .srow > p { grid-column: 1 / -1; margin-top: -4px !important; }
      .srow:hover > *, .srow:hover::before { transform: none; }

      /* Peritaje: columna unica sobre la foto */
      #peritaje > .wrap { grid-template-columns: 1fr !important; gap: 0 !important; min-height: 420px !important; }
      #peritaje > .wrap > div:first-child { display: none; }
      #peritaje > div:nth-child(2) { background: linear-gradient(180deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.86) 46%, rgba(8,8,10,.96) 100%) !important; }

      /* Proceso y trayectoria: apilados, sin filetes verticales */
      #proceso .wrap > div:last-child { grid-template-columns: 1fr !important; }
      #proceso .wrap > div:last-child > div { border-right: 0 !important; padding: 30px 0 26px !important; border-bottom: 1px solid var(--filete); }
      #proceso .wrap > div:last-child > div:last-child { border-bottom: 0; }
      #trayectoria .wrap > div:last-child { grid-template-columns: 1fr !important; gap: 56px !important; }

      /* Encabezado de proyectos y del bloque de servicios */
      #servicios .wrap > div:first-child, #proyectos .wrap > div:first-child { grid-template-columns: 1fr !important; gap: 20px !important; align-items: start !important; }
      #proyectos .wrap > div:first-child > div:last-child { justify-content: flex-start; padding-bottom: 0 !important; }

      /* Carrusel: tarjetas al ancho del pulgar */
      .pcard { flex: 0 0 78vw; }
      #rail { padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }

      /* Contacto y pie */
      #contacto > div:first-child { padding: 64px 0 !important; }
      #contacto > div:first-child > .wrap > div { grid-template-columns: 1fr !important; gap: 36px !important; }
      #contacto > .wrap > div { flex-direction: column; align-items: flex-start !important; gap: 12px; margin-top: 56px !important; }
    }

    /* ---------- Telefono ---------- */
    @media (max-width: 560px) {
      .wrap { width: min(1180px, 100% - 32px); }
      .cta { width: 100%; height: 54px; }
      #nav .wrap > a:first-child { min-height: 44px; }
      #contacto a[href^="mailto"] { display: inline-block; padding: 12px 0; }
      #inicio > div:last-child > div:first-child > div { flex-direction: column; align-items: stretch !important; gap: 14px !important; }
      .menulink { font-size: 26px; }
      .rbtn { width: 48px; height: 48px; }
      .pcard { flex: 0 0 84vw; }
      #trayectoria .wrap > div:first-child > div:last-child { grid-template-columns: 1fr !important; gap: 16px !important; }
    }

    /* En tactil no hay puntero fino: los estados de hover no aplican */
    @media (hover: none) {
      .srow:hover > *, .srow:hover::before { transform: none; }
      .pcard:hover .shot { filter: grayscale(1) contrast(1.08) brightness(.62); transform: none; }
    }

    #grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; opacity: .045; mix-blend-mode: screen; }
    @media (prefers-reduced-motion: reduce) { #grain { display: none; } }