/* ============================================================
   Inviewd · Estilos exclusivos de la portada
   Extraído del <style> incrustado en index.html para que el
   navegador pueda cachearlo. Se carga DESPUÉS de
   inviewd-2026.css para conservar la cascada original.
   ============================================================ */

    /* ================= Sistema ================= */
    :root {
      --bg: #ffffff;
      --bg-2: #f5f5f4;
      --ink: #191b1f;
      --bar: #17181c;
      --mut: #70747c;
      --blue: #33447e;
      --green: #51b58d;
      --hair: rgba(25, 27, 31, .14);
      --hair-soft: rgba(25, 27, 31, .08);
      --serif: "Fraunces", Georgia, serif;
      --sans: "Instrument Sans", "Open Sans", sans-serif;
      --ease: cubic-bezier(.25, .6, .2, 1);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: clip; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 400 16.5px/1.7 var(--sans);
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }
    ::selection { background: var(--blue); color: #fff; }
    a { color: inherit; }
    img, video { max-width: 100%; display: block; }
    .wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 56px); }
    .skip {
      position: absolute; left: -999px; top: 8px; z-index: 2000;
      background: var(--ink); color: var(--bg); padding: 10px 18px;
      font: 600 13.5px/1 var(--sans); border-radius: 4px; text-decoration: none;
    }
    .skip:focus { left: 8px; }

    /* rótulo pequeño en versalitas */
    .lbl {
      font: 500 11.5px/1 var(--sans);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--mut);
    }
    .lbl b { color: var(--blue); font-weight: 500; }

    /* ================= Navegación ================= */
    .nv {
      position: fixed; inset: 0 0 auto 0; z-index: 1000;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px clamp(20px, 4.5vw, 56px);
      background: var(--bar);
      transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
                  padding .35s var(--ease);
    }
    /* estado con scroll: se mantiene oscura, apenas más compacta */
    #navigation.iv-scrolled {
      background-color: rgba(23, 24, 28, .94) !important;
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
      box-shadow: 0 10px 30px rgba(15, 16, 20, .18);
      padding-top: 10px; padding-bottom: 10px;
    }
    .nv-logo img { height: 47px; width: auto; }
    .nv-links { display: flex; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; }
    .nv-a {
      display: inline-block; padding: 10px 13px;
      font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
      color: #f0efec; text-decoration: none; position: relative;
    }
    .nv-a::after {
      content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
      height: 1px; background: var(--ink);
      transform: scaleX(0); transform-origin: left center;
      transition: transform .3s var(--ease);
    }
    .nv-a:hover::after { transform: scaleX(1); }
    .nv-cta {
      margin-left: 16px; padding: 11px 22px;
      border: 1px solid rgba(240, 239, 236, .5); border-radius: 999px;
      font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
      color: #f0efec; text-decoration: none;
      transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
    }
    .nv-cta:hover { background: #fff; border-color: #fff; color: var(--bar); }
    .nv-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; z-index: 1002; }
    .nv-burger span {
      display: block; width: 24px; height: 1.5px; background: #f0efec;
      margin: 6px 0; transition: transform .3s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease);
    }
    .nv-burger.open span { background: var(--ink); }
    .nv-menu {
      position: fixed; inset: 0; z-index: 1001;
      background: var(--bg);
      display: flex; flex-direction: column; justify-content: center;
      padding: 90px clamp(24px, 8vw, 64px) 40px;
      opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
    }
    .nv-menu.open { opacity: 1; pointer-events: auto; }
    .nv-menu a {
      font: 300 clamp(30px, 7.5vw, 44px)/1.3 var(--serif);
      text-decoration: none; color: var(--ink);
      border-bottom: 1px solid var(--hair-soft); padding: 12px 0;
      transform: translateY(12px); opacity: 0;
      transition: transform .4s var(--ease), opacity .4s var(--ease), color .3s var(--ease);
    }
    .nv-menu.open a { transform: none; opacity: 1; }
    .nv-menu a:nth-child(2) { transition-delay: .05s; } .nv-menu a:nth-child(3) { transition-delay: .1s; }
    .nv-menu a:nth-child(4) { transition-delay: .15s; } .nv-menu a:nth-child(5) { transition-delay: .2s; }
    .nv-menu a:nth-child(6) { transition-delay: .25s; }
    .nv-menu a:hover { color: var(--blue); font-style: italic; }
    body.menu-lock { overflow: hidden; }
    @media (max-width: 940px) {
      .nv-links { display: none; }
      .nv-burger { display: block; }
      .nv-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
      .nv-burger.open span:nth-child(2) { opacity: 0; }
      .nv-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    }

    /* ================= Héroe (video a pantalla completa) ================= */
    .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
    .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    .hero::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to top, rgba(13, 14, 17, .86) 0%, rgba(13, 14, 17, .28) 46%, rgba(13, 14, 17, .52) 100%);
    }
    .hero > .wrap { position: relative; z-index: 2; width: 100%; padding-top: 130px; padding-bottom: clamp(54px, 8vh, 104px); }
    .hero-kicker { display: block; margin-bottom: 22px; color: rgba(247, 246, 243, .72); animation: rise .8s var(--ease) both; }
    .hero-kicker b { color: var(--green); }
    .hero-title {
      margin: 0 0 26px;
      font: 300 clamp(46px, 7.2vw, 92px)/1.06 var(--serif);
      letter-spacing: -.015em; color: #f8f7f4;
      max-width: 15ch; text-wrap: balance;
      text-shadow: 0 2px 30px rgba(0, 0, 0, .28);
      animation: rise .9s .08s var(--ease) both;
    }
    .hero-title em { font-style: italic; font-weight: 400; color: #fff; position: relative; white-space: nowrap; }
    /* subrayado "dibujado a mano" */
    .u-stroke {
      position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .32em;
      overflow: visible; pointer-events: none;
    }
    .u-stroke path {
      fill: none; stroke: #51b58d; stroke-width: 5; stroke-linecap: round;
      stroke-dasharray: 230; stroke-dashoffset: 230;
      animation: draw .9s 1.05s var(--ease) forwards;
    }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    .hero-foot {
      display: flex; justify-content: space-between; align-items: flex-end; gap: 28px;
      flex-wrap: wrap;
      animation: rise .9s .16s var(--ease) both;
    }
    .hero-lede { max-width: 480px; margin: 0; color: rgba(247, 246, 243, .82); font-size: 17px; }
    .hero-lede strong { color: #fff; font-weight: 500; }
    .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero-trust { margin: 22px 0 0; max-width: 520px; font: 500 12.5px/1.6 var(--sans); letter-spacing: .02em; color: rgba(247, 246, 243, .58); }
    /* botones sobre el video oscuro */
    .hero .btn-ink { background: #fff; color: var(--ink); border-color: #fff; }
    .hero .btn-ink:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
    .hero .btn-ghost { border-color: rgba(247, 246, 243, .45); color: #f7f6f3; }
    .hero .btn-ghost:hover { border-color: #fff; }
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 15px 30px; border-radius: 999px; text-decoration: none;
      font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
      transition: background-color .3s var(--ease), color .3s var(--ease),
                  border-color .3s var(--ease), transform .25s var(--ease);
    }
    .btn::after {
      content: "→"; opacity: 0; margin-left: -16px;
      transition: opacity .3s var(--ease), margin-left .3s var(--ease);
    }
    .btn:hover::after { opacity: 1; margin-left: 0; }
    .btn-ink { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
    .btn-ink:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
    .btn-ghost { border: 1px solid var(--hair); color: var(--ink); }
    .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
    @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

    /* ================= Franja de servicios (marquesina serena) ================= */
    .srv {
      border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
      padding: 20px 0; overflow: hidden; white-space: nowrap;
    }
    .srv-track { display: inline-flex; align-items: center; animation: srvmove 48s linear infinite; }
    .srv:hover .srv-track { animation-play-state: paused; }
    .srv-track span {
      font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
      color: var(--mut); padding: 0 clamp(18px, 2.8vw, 34px);
    }
    .srv-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .5; flex: none; }
    .srv-track i:nth-of-type(even) { background: #51b58d; }
    @keyframes srvmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ================= Secciones ================= */
    .sec { padding: clamp(76px, 10vw, 130px) 0; }
    .sec-head {
      display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
      margin-bottom: clamp(34px, 5vw, 58px); flex-wrap: wrap;
      padding-bottom: 22px; border-bottom: 1px solid var(--hair-soft);
    }
    .sec-title {
      margin: 12px 0 0;
      font: 300 clamp(34px, 4.6vw, 56px)/1.1 var(--serif);
      letter-spacing: -.01em;
    }
    .sec-title em { font-style: italic; color: var(--blue); }
    .sec-link {
      font: 500 12px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink); text-decoration: none;
      border-bottom: 1px solid var(--hair); padding-bottom: 4px;
      transition: border-color .3s var(--ease), color .3s var(--ease);
      white-space: nowrap;
    }
    .sec-link:hover { border-color: var(--blue); color: var(--blue); }

    /* aparición sutil */
    .r { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .r.in { opacity: 1; transform: none; }

    /* ================= 01 Proyectos — fichas de galería ================= */
    .gp { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(22px, 3.4vw, 44px) clamp(16px, 2.4vw, 32px); }
    .gp-item { margin: 0; grid-column: span 4; }
    .gp-item:nth-child(1), .gp-item:nth-child(2) { grid-column: span 6; }
    .gp-media {
      overflow: hidden; border-radius: 3px; background: var(--bg-2);
      aspect-ratio: 4 / 3;
    }
    .gp-item:nth-child(1) .gp-media, .gp-item:nth-child(2) .gp-media { aspect-ratio: 16 / 10; }
    .gp-media video, .gp-media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 1s var(--ease);
    }
    .gp-media img { cursor: zoom-in; }
    .gp-item:hover .gp-media video, .gp-item:hover .gp-media img { transform: scale(1.045); }
    .gp-plate {
      display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
      padding-top: 13px; margin-top: 0; position: relative;
      border-top: 1px solid var(--hair-soft);
    }
    .gp-plate::before { /* la línea se "delinea" al pasar el cursor */
      content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
      background: var(--blue);
      transform: scaleX(0); transform-origin: left center;
      transition: transform .5s var(--ease);
    }
    .gp-item:hover .gp-plate::before { transform: scaleX(1); }
    .gp-name { font: 400 17px/1.3 var(--serif); }
    .gp-num { display: none; }
    .gp-media { margin-bottom: 12px; }
    @media (max-width: 860px) { .gp-item, .gp-item:nth-child(-n+2) { grid-column: span 6; } }
    @media (max-width: 560px) { .gp-item, .gp-item:nth-child(n) { grid-column: span 12; } }

    /* ================= 02 Servicios — índice editorial ================= */
    .of-row {
      display: grid; grid-template-columns: 90px 1fr auto; gap: 22px; align-items: baseline;
      padding: clamp(28px, 4vw, 42px) 4px;
      border-bottom: 1px solid var(--hair-soft);
      text-decoration: none; position: relative;
      transition: padding-left .35s var(--ease);
    }
    /* miniatura que se asoma (solo escritorio con cursor) */
    .of-thumb {
      position: absolute; right: 96px; top: 50%; width: 190px;
      border-radius: 6px;
      transform: translateY(-44%) rotate(-4deg) scale(.9);
      opacity: 0; pointer-events: none;
      box-shadow: 0 20px 44px -14px rgba(25, 27, 31, .4);
      transition: opacity .35s var(--ease), transform .5s var(--ease);
    }
    .of-row:hover .of-thumb { opacity: 1; transform: translateY(-50%) rotate(-2.5deg) scale(1); }
    @media (max-width: 980px), (hover: none) { .of-thumb { display: none; } }
    .of-row:first-of-type { border-top: 1px solid var(--hair-soft); }
    .of-row:hover { padding-left: 16px; }
    .of-num { font: 400 13px/1 var(--sans); letter-spacing: .18em; color: var(--mut); }
    .of-title {
      margin: 0; font: 300 clamp(26px, 3.6vw, 42px)/1.15 var(--serif); letter-spacing: -.01em;
      transition: color .3s var(--ease);
    }
    .of-row:hover .of-title { color: var(--blue); font-style: italic; }
    .of-desc { margin: 10px 0 0; color: var(--mut); max-width: 560px; font-size: 15.5px; }
    .of-arrow {
      font: 300 26px/1 var(--serif); color: var(--mut);
      transition: transform .35s var(--ease), color .3s var(--ease);
    }
    .of-row:hover .of-arrow { transform: translateX(8px); color: var(--blue); }
    @media (max-width: 640px) { .of-row { grid-template-columns: 1fr auto; } .of-num { display: none; } }

    /* ================= 03 Testimonio ================= */
    .tm { text-align: center; max-width: 860px; margin: 0 auto; }
    .tm-rule { width: 56px; height: 1px; background: var(--blue); margin: 0 auto 34px; }
    .tm-quote {
      margin: 0 0 34px;
      font: 300 clamp(24px, 3.4vw, 38px)/1.42 var(--serif);
      font-style: italic; letter-spacing: -.005em;
    }
    .tm-quote b { font-weight: 400; color: var(--blue); }
    .tm-name { font: 500 12px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
    .tm-role { font: 400 13.5px/1.6 var(--sans); color: var(--mut); }
    .tm-more { display: inline-block; margin-top: 22px; }
    /* testimonio en banda oscura (como Alianzas) */
    .tm-band { background: #1a1c20; }
    .tm-band .tm-quote { color: #f4f3ee; }
    .tm-band .tm-quote b { color: var(--green); }
    .tm-band .tm-rule { background: var(--green); }
    .tm-band .tm-name { color: #f4f3ee; }
    .tm-band .tm-role { color: rgba(244, 243, 238, .6); }
    .tm-band .tm-more { color: var(--green); border-bottom-color: rgba(81, 181, 141, .5); }
    /* van DEBAJO de la cita: rematan el testimonio con los numeros */
    .tm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: clamp(38px, 5vw, 58px); padding-top: clamp(38px, 5vw, 58px); border-top: 1px solid rgba(244, 243, 238, .14); text-align: center; }
    .tm-stat-l { margin-inline: auto; }
    .tm-stat-n { font: 400 clamp(26px, 3.2vw, 38px)/1.05 var(--serif); color: var(--green); letter-spacing: -.01em; }
    .tm-stat-l { margin-top: 10px; font: 400 13.5px/1.5 var(--sans); color: rgba(244, 243, 238, .6); max-width: 24ch; }
    @media (max-width: 720px) { .tm-stats { grid-template-columns: 1fr; gap: 24px; } }

    /* ================= 04 Clientes ================= */
    .cl { background: var(--bg); }
    /* Mosaico de clientes con relieve.
       No se mueve solo: las tarjetas se inclinan en 3D siguiendo el cursor
       (el calculo esta en el script en linea de la portada). Al no haber
       movimiento automatico, se ve igual con cualquier ajuste del sistema. */
    /* Flex y no grid, y centrado: con 11 logos (numero primo) la ultima fila
       siempre queda coja. Centrada parece intencionada; pegada a la izquierda
       dejaba 500 px vacios y parecia rota. A 1157 px salen 6 + 5. */
    .cl-grid {
      --gap: clamp(9px, 1.1vw, 13px);
      --cols: 6;
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: var(--gap); perspective: 900px;
    }
    /* Numero de columnas fijado a mano, no fluido. Con 11 logos (primo) el
       reparto automatico dejaba filas de uno solo: 5+5+1 a 1024 px y
       2+2+2+2+2+1 en movil. Estos tres valores dan 6+5, 4+4+3 y 3+3+3+2. */
    @media (max-width: 1179px) { .cl-grid { --cols: 4; } }
    @media (max-width: 619px)  { .cl-grid { --cols: 3; } }
    .cl-card {
      position: relative; display: grid; place-items: center; overflow: hidden;
      flex: 0 0 auto; width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
      padding: clamp(20px, 2.6vw, 30px) clamp(10px, 1.8vw, 20px);
      border-radius: 8px; background: var(--bg);
      /* en reposo el filo casi no se ve; solo aparece al pasar el cursor */
      border: 1px solid rgba(25, 27, 31, .045);
      transform-style: preserve-3d; will-change: transform;
      transition: transform .5s var(--ease), box-shadow .45s var(--ease),
                  border-color .45s var(--ease);
    }
    /* brillo que sigue al cursor dentro de la tarjeta */
    .cl-card::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
      background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
                  rgba(51, 68, 126, .15), transparent 60%);
      transition: opacity .45s var(--ease);
    }
    /* cada logo trae su medida calculada para que todos pesen igual a la
       vista; max-width lo encoge sin deformarlo si la tarjeta es estrecha */
    .cl-logo {
      width: var(--w, 96px); height: var(--h, 34px);
      max-width: 100%; object-fit: contain; mix-blend-mode: multiply;
    }
    @media (hover: hover) {
      .cl-card:hover {
        border-color: rgba(51, 68, 126, .34);
        box-shadow: 0 22px 46px -24px rgba(25, 27, 31, .5);
      }
      .cl-card:hover::after { opacity: 1; }
      /* mientras el cursor se mueve, la inclinacion debe ir pegada a el */
      .cl-card.siguiendo { transition-duration: .08s, .45s, .45s; }
    }

    /* ================= Alianzas ================= */
    .al { background: #1a1c20; color: #f4f3ee; padding: clamp(70px, 9vw, 110px) 0; }
    .al-in { text-align: center; max-width: 720px; margin: 0 auto; }
    .al-title {
      margin: 14px 0 16px;
      font: 300 clamp(30px, 4.4vw, 52px)/1.15 var(--serif); letter-spacing: -.01em;
    }
    .al-title em { font-style: italic; color: var(--green); }
    .al-desc { margin: 0 auto 34px; color: rgba(244, 243, 238, .72); max-width: 520px; }
    .al .lbl { color: rgba(244, 243, 238, .55); }
    .al .lbl b { color: var(--green); }
    .al .btn { border: 1px solid rgba(244, 243, 238, .45); color: #f4f3ee; }
    .al .btn:hover { background: #f4f3ee; color: #1a1c20; border-color: #f4f3ee; }

    /* ================= Pie ================= */
    .ft { background: var(--bg); border-top: 1px solid var(--hair-soft); padding: clamp(56px, 8vw, 88px) 0 34px; }
    .ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
    .ft-logo img { height: 38px; width: auto; margin-bottom: 18px; }
    .ft-news p { color: var(--mut); font-size: 14.5px; margin: 0 0 14px; max-width: 320px; }
    .ft-form { display: flex; gap: 8px; }
    .ft-form input[type="email"] {
      flex: 1; min-width: 0; padding: 13px 16px;
      background: #fff; border: 1px solid var(--hair); border-radius: 3px;
      color: var(--ink); font: 400 14px/1 var(--sans);
    }
    .ft-form input[type="email"]:focus { outline: 1.5px solid var(--blue); outline-offset: 1px; }
    .ft-form input[type="submit"] {
      padding: 13px 22px; border: 1px solid var(--ink); border-radius: 3px; cursor: pointer;
      background: var(--ink); color: var(--bg);
      font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
      transition: background-color .3s var(--ease), border-color .3s var(--ease);
    }
    .ft-form input[type="submit"]:hover { background: var(--blue); border-color: var(--blue); }
    .w-form-done, .w-form-fail { display: none; margin-top: 10px; font-size: 13.5px; }
    .w-form-done { color: #2e7d5b; }
    .w-form-fail { color: #b3402a; }
    .ft-legal { color: var(--mut); font-size: 12px; margin-top: 10px; }
    .ft-h { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); margin: 6px 0 18px; }
    .ft-col a {
      display: block; color: var(--ink); text-decoration: none; padding: 5px 0; font-size: 15px;
      transition: color .25s var(--ease);
    }
    .ft-col a:hover { color: var(--blue); }
    .ft-bottom {
      display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
      border-top: 1px solid var(--hair-soft); margin-top: 52px; padding-top: 24px;
      color: var(--mut); font-size: 13px;
    }
    .ft-social { display: flex; gap: 14px; }
    .ft-social a { color: var(--mut); transition: color .25s var(--ease); display: inline-flex; }
    .ft-social a:hover { color: var(--blue); }
    .ft-social svg { width: 21px; height: 21px; }
    @media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .ft-grid { grid-template-columns: 1fr; } }

    /* ================= 01 Cómo trabajamos — el proceso =================
       Explica en una pantalla el recorrido planos -> modelo -> material de
       ventas. Es lo primero que ve un visitante nuevo tras el héroe. */
    .pr-lede {
      margin: 0 0 clamp(42px, 5vw, 66px); max-width: 800px;
      font: 300 clamp(19px, 2.1vw, 25px)/1.5 var(--serif); color: var(--ink);
    }
    .pr-lede em { font-style: italic; color: var(--blue); }

    .pr { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 42px); }
    .pr-step { position: relative; padding-top: 30px; border-top: 1px solid var(--hair); }
    /* punto que marca el inicio de cada paso sobre la línea */
    .pr-step::before {
      content: ""; position: absolute; top: -3.5px; left: 0;
      width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
    }
    .pr-step:nth-child(even)::before { background: var(--green); }
    .pr-n {
      display: block; margin-bottom: 15px;
      font: 400 13px/1 var(--sans); letter-spacing: .18em; color: var(--mut);
    }
    .pr-h {
      margin: 0 0 11px;
      font: 300 clamp(21px, 2.2vw, 27px)/1.2 var(--serif); letter-spacing: -.01em;
      color: var(--ink);
    }
    .pr-p { margin: 0; color: var(--mut); font-size: 15.5px; line-height: 1.65; }

    /* remate: para qué sirve todo lo anterior */
    .pr-out {
      margin: clamp(42px, 5vw, 64px) 0 0; padding-top: 28px;
      border-top: 1px solid var(--hair-soft);
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 20px; flex-wrap: wrap;
    }
    .pr-out p { margin: 0; max-width: 700px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
    .pr-out strong { font-weight: 500; color: var(--blue); }

    @media (max-width: 900px) { .pr { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .pr { grid-template-columns: 1fr; gap: 30px; } }

    .stage-frame video { will-change: transform; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-kicker, .hero-title, .hero-foot, .stage-frame { animation: none; }
      .r { opacity: 1; transform: none; transition: none; }
      .srv-track { animation: none; }
      .u-stroke path { animation: none; stroke-dashoffset: 0; }
      .of-thumb { transition: none; }
      /* el mosaico no lleva movimiento automatico: nada que desactivar.
         La inclinacion la provoca el cursor del propio usuario. */
    }