/* ════════════════════════════════════════════════════════════════════════════
   CARDDA · página de trabajos

   Cada bloque de acá abajo sale de un componente medido en
   ../componentes/replicas/. Lo que se traslada es la estructura y la mecánica,
   no la marca: la tipografía, los colores y el contenido son de Cardda.

   Dónde mirar cuando algo no cuadre:
     rejilla de beneficios   → componentes/replicas/resend-beneficios.html
     lista de principios     → componentes/replicas/linear-principios.html
     acordeón                → componentes/replicas/fintoc-acordeon.html
     fila de vacante         → componentes/replicas/mercury-vacante.html
     carrusel de retratos    → componentes/inventarios/ramp-carrusel.json
     pasos del proceso       → componentes/replicas/fleek-pasos.html
     rejilla de tres valores → componentes/replicas/highnote-valores.html
     caja de sección         → componentes/replicas/vambe-caja.html
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía ───────────────────────────────────────────────────────────── */
/* Inter, la única del sitio de Cardda. Los dos archivos son el corte latino y
   el extendido; el navegador baja el segundo sólo si aparece un carácter que
   lo necesite. Esta es la de la PÁGINA y no se toca. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-1.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-2.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* La Inter que sirve cardda.com, que NO es la misma: el sitio la pide a Google
   Fonts (`family=Inter:wght@300..900`) y eso entrega Inter v20. La misma frase
   mide 148,02 px con la de arriba y 154,09 px con ésta — un 4 % —, y en la
   columna de 153,61 px del pie eso decide si un enlace entra en una línea o se
   parte en dos.

   Por eso convive con la otra en vez de reemplazarla: la cáscara (cabecera y
   pie) es marcado ajeno y tiene que calzar al píxel con el sitio, pero el
   cuerpo de la página es nuestro y se queda con SU Inter. Se probó unificar
   todo en ésta y cambiaba la tipografía de la página entera, que no era lo
   pedido.

   Se sirve desde acá y no desde Google porque la página abre con doble clic,
   sin red. Para re-sincronizar: scripts/traer-inter.sh */
@font-face{font-family:"Inter Sitio";font-style:normal;font-weight:300 900;font-display:swap;
  src:url(fonts/inter-gf-1.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Sitio";font-style:normal;font-weight:300 900;font-display:swap;
  src:url(fonts/inter-gf-2.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ── Paleta ───────────────────────────────────────────────────────────────── */
/* Los cinco primeros valores están medidos en cardda.com en vivo, no elegidos:
   el texto, el secundario, el filete, el blanco de las cajas y el naranjo del
   botón. El fondo es lo único propio de esta página: un beige apenas cálido
   para no repetir el blanco del producto. */
:root{
  --fondo:      #FFFFFF;
  --fondo-hondo:#F7F7F5;
  --caja:       #FFFFFF;
  --tinta:      rgb(9, 9, 11);
  --tinta-2:    rgb(107, 114, 128);
  --tinta-3:    rgb(156, 163, 175);
  --filete:     rgba(9, 9, 11, .12);
  --naranjo:    rgb(249, 115, 22);
  --ancho:      1080px;
  --aire:       96px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%}
a{color:inherit}

.env{width:min(100%,var(--ancho));margin-inline:auto;padding-inline:24px}

.sec{padding-block:var(--aire)}
.sec--hondo{background:var(--fondo-hondo)}

/* Rótulo de sección: la etiqueta chica en mayúsculas que usan Linear y Highnote
   arriba de cada bloque. Es lo que deja saber dónde estás sin leer el título. */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
/* 64/64 con peso 510 y -1.4 de espaciado son los de linear.app/careers.
   Fintoc usa 52/500 y Ramp dibuja el suyo como imagen a 58. El patrón que
   comparten los tres es el mismo: titular grande y bajada CHICA, de 15. */
h1{font-size:64px;line-height:1;font-weight:510;letter-spacing:-1.4px}
/* Todos los títulos de sección van centrados y en 44: es lo que hace que la
   página se lea como una sola voz y no como un documento con subtítulos. */
.h2{font-size:52px;line-height:1.1;font-weight:600;letter-spacing:-.03em;margin:0 0 16px;
  text-align:center;max-width:20ch;margin-inline:auto}
.bajada{margin:0;max-width:62ch;font-size:18px;line-height:1.6;color:var(--tinta-2)}
/* El rótulo y la bajada acompañan al título centrado */
.sec .rotulo{text-align:center}
.sec > .env > .bajada{margin-inline:auto;text-align:center}

/* ── Botón ────────────────────────────────────────────────────────────────── */
/* Medido en cardda.com: relleno naranjo, texto blanco, radio 6, 16/500. El
   naranjo aparece dos veces en toda la página y nunca como color de letra. */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 20px;
  border:0;
  border-radius:6px;
  background:var(--naranjo);
  font-family:inherit;
  font-size:16px;
  font-weight:500;
  line-height:24px;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease;
}
.boton:hover{background:#EA6C0C}
.boton:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

.boton--tenue{
  background:transparent;
  color:var(--tinta);
  border:1px solid var(--filete);
}
.boton--tenue:hover{background:rgba(9,9,11,.04)}

/* ── Botón con luz ──────────────────────────────────────────────────────────
   El componente `borde-luz` de ~/Projects/components. Detrás del botón hay un
   cuadrado mucho más grande que él con un conic-gradient girando; el botón le
   tapa el centro y la luz sólo se asoma por el borde de 1px. Es el mismo truco
   de Linear y Vercel.

   Adaptado a Cardda: la luz es el naranjo de la marca, no el azul del
   componente original, y gira más lento porque acá es un botón solo en una
   página clara, no una tarjeta en una pantalla oscura. */
.luz{
  position:relative;
  display:inline-block;
  padding:1.5px;               /* el grosor del borde iluminado */
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  background:var(--filete);    /* el borde apagado, para el resto de la vuelta */
}
/* El botón de adentro va oscuro y no naranjo: la luz que gira ES naranja, y un
   anillo naranjo alrededor de un botón naranjo sobre fondo blanco no se ve.
   Es el mismo botón oscuro que ya usa cardda.com al lado del naranjo. */
.luz .boton{background:var(--tinta)}
.luz .boton:hover{background:#26262B}
.luz::before{
  content:"";
  position:absolute;
  inset:-160%;                 /* mucho más grande que el botón */
  background:conic-gradient(from 0deg,
    transparent 0 62%, var(--naranjo) 78%, #FFC08A 88%, transparent 96%);
  animation:luz-girar 4.5s linear infinite;
}
.luz > .boton{position:relative;border-radius:7px}
@keyframes luz-girar{ to{ transform:rotate(1turn) } }
@media (prefers-reduced-motion:reduce){ .luz::before{animation:none} }

/* ════════════════════════════════════════════════════════════════════════════
   CABECERA
   ════════════════════════════════════════════════════════════════════════════ */
/* La cabecera de cardda.com, no una propia de esta página. Todo medido el
   2026-08-17 a 1440 px sobre el sitio en vivo:
     barra        alto 65, fondo blanco al 80 % con desenfoque de 12,
                  filete inferior rgb(229,231,235)
     contenedor   1280 de ancho máximo, 32 de aire lateral, fila de 64
     enlaces      16/500 en rgb(97,105,117), pasan a naranjo en .15s
     «Empezar»    fondo rgb(249,115,22), 8/16 de relleno, radio 6, texto blanco
   Diferencia a propósito: allá la barra es `fixed` y acá es `sticky`. Se ve
   igual porque la página arranca arriba, y así no hay que compensar con un
   relleno superior que después pelea con el anclaje de las secciones. */
/* La cáscara entera va con la Inter del sitio. Todo lo de adentro hereda. */
.cab,.mm,.mmv,.pie{font-family:"Inter Sitio",Inter,ui-sans-serif,system-ui,sans-serif}

.cab{position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.8);backdrop-filter:blur(12px);
  /* El gris exacto de cardda.com. Resuelve casi igual que el --filete de esta
     página (≈225,225,225) y por un rato se usó ése para no arrastrar dos
     grises; pero la cáscara tiene que ser la del sitio, no una aproximación,
     y en la comparación de píxeles esta línea salía marcada de punta a punta.
     La excepción correspondiente está declarada en pulcritud.cjs. */
  border-bottom:1px solid rgb(229,231,235)}
/* px-4 sm:px-6 lg:px-8 de cardda.com: 16 de base, 24 desde 640, 32 desde 1024.
   Antes acá iba al revés (32 de base, bajando), y a 768 el logo caía 8px
   corrido respecto del sitio. */
.cab__env{width:100%;max-width:1280px;margin-inline:auto;padding-inline:16px;position:relative}
@media (min-width:640px){ .cab__env{padding-inline:24px} }
@media (min-width:1024px){ .cab__env{padding-inline:32px} }
.cab__fila{display:flex;align-items:center;justify-content:space-between;height:64px}
.cab__marca{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.cab__marca img{height:28px;width:auto;display:block}

.cab__centro{display:flex;align-items:center;gap:32px}
.cab__acciones{display:flex;align-items:center;gap:16px}

.cab__enlace{font-size:16px;font-weight:500;line-height:24px;
  color:rgb(97,105,117);text-decoration:none;white-space:nowrap;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.cab__enlace:hover{color:var(--naranjo)}
.cab__desplegable[aria-expanded="true"]{color:var(--naranjo)}
.cab__chevron{width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.4,0,.2,1)}
.cab__desplegable[aria-expanded="true"] .cab__chevron{transform:rotate(180deg)}

.cab__empezar{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:6px;background:var(--naranjo);color:#fff;
  font-size:16px;font-weight:500;line-height:24px;text-decoration:none;
  white-space:nowrap;transition:background .15s cubic-bezier(.4,0,.2,1)}
.cab__empezar:hover{background:rgb(234,88,12)}

/* El foco de teclado con el anillo de la página, no el azul del navegador.
   Es el mismo que ya usa .boton, para que la cáscara no traiga un segundo
   lenguaje de foco. */
.cab__enlace:focus-visible,
.cab__empezar:focus-visible,
.mm__item:focus-visible,
.mm__todos:focus-visible,
.pie a:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:4px}
.pie a:focus-visible{outline-color:#fff}

/* ── Megamenús ──────────────────────────────────────────────────────────────
   Los paneles de «Productos» y «Soluciones». En cardda.com se abren al hacer
   clic; acá igual, más Escape y clic afuera para cerrar. El panel en sí no se
   pudo medir (nace cerrado y sin caja), así que su caja es decisión nuestra:
   fondo blanco, filete y sombra suaves, radio 12, y el mismo contenedor de
   1280 para que caiga alineado con la barra. */
.mm{position:absolute;left:0;right:0;top:100%;z-index:49;
  padding:8px 32px 0}
.mm[hidden]{display:none}
.mm__caja{max-width:1280px;margin-inline:auto;background:#fff;
  border:1px solid var(--filete);border-radius:12px;
  box-shadow:0 12px 32px rgba(9,9,11,.10),0 2px 8px rgba(9,9,11,.05);
  padding:24px;
  animation:mm-entrar .16s cubic-bezier(.4,0,.2,1) both}
@keyframes mm-entrar{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.mm__caja{animation:none}}

/* Productos trae cuatro rubros y Soluciones seis fichas sin rubro, así que
   cada panel declara su propia rejilla en vez de dejarla al auto-fit. */
.mm__cols{display:grid;gap:24px}
.mm--productos .mm__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm--soluciones .mm__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.mm__col{min-width:0}
.mm__rubro{font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 8px;padding-inline:8px}
.mm__items{display:flex;flex-direction:column}

.mm__item{display:flex;align-items:flex-start;gap:12px;
  padding:8px;border-radius:8px;text-decoration:none;color:inherit;
  transition:background .15s cubic-bezier(.4,0,.2,1)}
.mm__item:hover{background:var(--fondo-hondo)}
.mm__icono{flex:0 0 auto;display:grid;place-items:center;
  width:32px;height:32px;border-radius:8px;
  background:rgba(249,115,22,.10);color:var(--naranjo)}
.mm__icono svg{width:16px;height:16px;display:block}
.mm__texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm__titulo{font-size:15px;font-weight:500;color:var(--tinta);line-height:20px}
.mm__desc{font-size:13px;color:var(--tinta-2);line-height:18px}

.mm__todos{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  padding:8px;font-size:15px;font-weight:500;color:var(--naranjo);
  text-decoration:none;border-radius:8px;
  transition:gap .15s cubic-bezier(.4,0,.2,1)}
.mm__todos:hover{gap:10px}
.mm__todos svg{width:16px;height:16px}

/* El corte es lg (1024), que es donde cardda.com pone `lg:hidden` en su botón
   de menú: hasta ahí manda la hamburguesa, de ahí para arriba la barra ancha.
   Antes acá estaba en 860 y entre 860 y 1024 la copia mostraba la barra de
   escritorio mientras el sitio ya mostraba el botón. */
.cab__hamburguesa{display:inline-flex;align-items:center;justify-content:center;
  position:relative;width:40px;height:40px;padding:8px;
  background:none;border:0;cursor:pointer;color:rgb(97,105,117);
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.cab__hamburguesa:hover{color:var(--naranjo)}
.cab__hamburguesa:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;border-radius:6px}
/* Los dos íconos viven encima uno del otro y se cruzan girando, como en el
   sitio (transition-all duration-300, rotate y scale). */
/* Anclado a la caja de contenido del botón (40 de lado con 8 de relleno = 24),
   no dejado a la posición estática dentro del flex: así resolvía medio píxel
   corrido y el ícono era lo único que quedaba distinto del original. */
.cab__ham-icono{position:absolute;inset:8px;width:24px;height:24px;display:block;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}
.cab__ham-icono[data-icono="cerrar"]{opacity:0;transform:rotate(-90deg) scale(.5)}
[aria-expanded="true"] .cab__ham-icono[data-icono="abrir"]{opacity:0;transform:rotate(90deg) scale(.5)}
[aria-expanded="true"] .cab__ham-icono[data-icono="cerrar"]{opacity:1;transform:none}

/* Dos cortes distintos, los dos de cardda.com:
     el grupo del centro (Productos/Soluciones/Blog) aparece desde lg  = 1024
     «Iniciar sesión» y «Empezar»           aparecen desde md  = 768
   A 768 el sitio muestra la hamburguesa Y los dos botones a la vez; tratarlo
   como un solo corte dejaba la copia 17 % distinta justo en tablet. */
@media (max-width:1023.98px){
  .cab__centro{display:none}
  .mm{display:none}
}
@media (max-width:767.98px){
  .cab__solo-md{display:none}
}
@media (min-width:1024px){
  .cab__hamburguesa{display:none}
  .mmv{display:none}
}
@media (max-width:1180px){
  .mm--productos .mm__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm--soluciones .mm__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Panel de teléfono ──────────────────────────────────────────────────────
   Los mismos enlaces del megamenú, en acordeón. Medido en cardda.com a 390:
   filas de 48, 16 de aire lateral, ícono naranjo con 12 de separación, y
   «Empezar» al fondo ocupando el ancho completo. */
.mmv{position:absolute;left:0;right:0;top:100%;z-index:49;
  background:#fff;border-bottom:1px solid rgb(229,231,235);
  max-height:calc(100dvh - 65px);overflow-y:auto;overscroll-behavior:contain}
.mmv[hidden]{display:none}
.mmv__caja{max-width:1280px;margin-inline:auto;padding:8px 16px 24px}
@media (min-width:640px){ .mmv__caja{padding-inline:24px} }

.mmv__seccion{border-bottom:1px solid rgb(229,231,235)}
.mmv__cabeza{display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:12px 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:500;line-height:24px;
  color:rgb(97,105,117);transition:color .15s cubic-bezier(.4,0,.2,1)}
.mmv__cabeza:hover,.mmv__cabeza[aria-expanded="true"]{color:var(--naranjo)}
.mmv__cabeza[aria-expanded="true"] .cab__chevron{transform:rotate(180deg)}
.mmv__cuerpo{padding-bottom:8px}
.mmv__cuerpo[hidden]{display:none}

.mmv__item{display:flex;align-items:center;gap:12px;padding:8px 0;
  text-decoration:none;color:rgb(97,105,117);
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.mmv__item:hover{color:var(--naranjo)}
.mmv__icono{flex:0 0 auto;display:grid;place-items:center;color:var(--naranjo)}
.mmv__icono svg{width:16px;height:16px;display:block}
.mmv__texto{display:flex;flex-direction:column;min-width:0}
.mmv__titulo{font-size:14px;font-weight:500;line-height:20px;color:var(--tinta)}
.mmv__desc{font-size:12px;line-height:16px;color:var(--tinta-2)}

.mmv__todos{display:inline-flex;align-items:center;gap:8px;padding:8px 0;
  font-size:14px;font-weight:500;line-height:20px;color:var(--naranjo);text-decoration:none}
.mmv__plano{display:block;padding:12px 0;border-bottom:1px solid rgb(229,231,235);
  font-size:16px;font-weight:500;line-height:24px;color:rgb(97,105,117);text-decoration:none;
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.mmv__plano:hover{color:var(--naranjo)}
.mmv__empezar{display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:16px;padding:8px 16px;border-radius:6px;
  background:var(--naranjo);color:#fff;font-size:16px;font-weight:500;line-height:24px;
  text-decoration:none;transition:background .15s cubic-bezier(.4,0,.2,1)}
.mmv__empezar:hover{background:rgb(234,88,12)}
.mmv a:focus-visible,.mmv button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* ════════════════════════════════════════════════════════════════════════════
   HERO  ·  el carrusel de retratos de ramp.com/careers
   El texto arriba y debajo la franja de fotos, que avanza sola de a una y
   agranda la que va pasando por el centro.
   ════════════════════════════════════════════════════════════════════════════ */
/* 56 arriba: con 32 el titular quedaba pegado a la barra. El aire lo pagan las
   fotos, que ahora son más chicas y dejan margen sin empujar el timeline. */
.hero{padding-block:56px 16px}
.hero .env{width:min(100%,1180px)}
.hero__cont{display:grid;gap:20px;justify-items:center;text-align:center}
/* 76 y no los 64 del sistema, que salen de linear.app/careers. Ramp usa 48 y
   su titular igual domina: no es el número, es que la página está vacía
   alrededor. Acá el hero tiene bajada, botón y dato al pie, así que para que
   pese hay que darle tamaño. La medida sube a 22ch para que «Ven a cambiar
   cómo pagan las empresas» corte en dos líneas parejas y no en 3+1. */
.hero h1{font-size:88px;line-height:.96;letter-spacing:-2.6px;max-width:20ch}
@media (max-width:900px){ .hero h1{font-size:44px;line-height:1.02;letter-spacing:-1px} }
/* Estuvo en 15 —la medida de Linear, Fintoc y Attio— con un titular de 64. Con
   uno de 88 esos 15 quedaban como nota al pie: 24 la deja leerse como la
   segunda frase del titular, que es lo que es.
   `balance` reparte las líneas en vez de dejar tres palabras solas abajo. */
.hero .bajada{max-width:62ch;margin-inline:auto;text-align:center;
  font-size:22px;line-height:1.45;text-wrap:balance}
/* Después de la base a propósito: son la misma especificidad y gana la última. */
@media (max-width:900px){ .hero .bajada{font-size:18px;line-height:1.5;max-width:none} }

.carrusel{
  position:relative;
  overflow:hidden;
  /* 16 arriba y abajo: la tarjeta del centro se dibuja al 105%, y sin ese aire
     el recorte le comería la cabeza y los pies justo a la que se está mirando. */
  padding-block:16px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}
.carrusel[data-arrastrando="si"]{cursor:grabbing}

.carrusel__via{display:flex;align-items:center;width:max-content;will-change:transform}
/* El <figure> trae 40 de margen a cada lado por defecto. Sin esto el paso real
   es 308 en vez de 228, el avance de una tarjeta queda corto y el carrusel
   nunca aterriza centrado. Costó una tarde. */
.carrusel figure{margin:0}

.retrato{flex:0 0 auto;width:228px}

/* La tarjeta: esquinas de 12 y recorte, como la de Ramp. Es la que recibe el
   `translateX` y la escala que dependen de la distancia. */
.retrato__caja{
  position:relative;
  width:228px;height:368px;
  border-radius:12px;
  overflow:hidden;
  background:var(--fondo-hondo);
  will-change:transform;
}
/* La escala interior va en su propia capa: son dos transformaciones que se
   multiplican, igual que en Ramp. */
.retrato__foto{position:absolute;inset:0;scale:1.05}
.retrato img{display:block;width:100%;height:100%;object-fit:cover;color:transparent;
  pointer-events:none}

/* El epígrafe se apaga en DOS tiempos, no en uno.
   Antes bajaba la opacidad de todo el bloque, así que el degradado negro que
   lo hace legible se iba junto con el texto: en cualquier valor intermedio
   quedaba texto blanco al 60% sobre una foto clara, ilegible. Ahora el fondo
   llega a pleno mucho antes (×2,4) y lo único que se atenúa de verdad es la
   letra, que sobre el degradado ya oscuro se sigue leyendo. */
.retrato figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:48px 20px 20px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));
  font-size:16px;line-height:24px;
  color:rgb(255 255 255 / var(--pie,0));
  /* ×4 y no ×2,4: con 2,4 quedaba un tramo —texto al 28% sobre un degradado
     al 67%— donde la letra ya se ve y el fondo todavía no. Con 4, cualquier
     texto visible (alfa ≥ .25) tiene el degradado entero abajo. */
  opacity:calc(var(--pie,0) * 4);
}

/* Sin JavaScript el carrusel no se mueve, pero se ve: una fila de fotos que se
   recorre con el dedo o con la barra, con los pies a la vista. Nunca una
   franja vacía ni una fila de fotos sin explicar. */
.carrusel:not(.listo){overflow-x:auto;gap:0}
.carrusel:not(.listo) .carrusel__via{gap:16px}
.carrusel:not(.listo) .retrato__foto{scale:1}
.carrusel:not(.listo) figcaption{--pie:1}

@media (prefers-reduced-motion:reduce){
  .carrusel{overflow-x:auto}
}

/* ────────────────────────────────────────────────────────────────────────────
   LÍNEA DE TIEMPO  ·  estructura de raycast.com/careers
   (el componente `raycast-timeline` de ~/Projects/components)

   Lo que la hace funcionar, y que es lo contrario de lo que parece:
     · NADA se desplaza solo. La barra no se mueve nunca. Lo único que cambia
       es qué hito tiene la clase `activo`, que rota cada 5 segundos.
     · la marca vertical es un BORDE izquierdo, no un fondo: por eso puede
       crecer de 32 a 80 sin mover nada de su alrededor.
     · la línea de puntos entre hitos NO son puntos: es un solo degradado de
       cuatro paradas. Cuatro puntos con un elemento cada uno serían 4n nodos.
     · el texto de cada hito está SIEMPRE en el HTML; sólo cambia su opacidad.
       Así el que llega con un lector de pantalla los lee todos.
   ──────────────────────────────────────────────────────────────────────────── */
/* El riel ya reserva 284px abajo —el alto del hito más alto— así que los 96
   que pone la sección se suman a eso y dejan casi 300px de blanco bajo un hito
   corto. La sección cierra con 24 y el aire lo pone el riel. */
/* Chico y del mismo gris que los años, no un título de sección: acá el título
   sólo tiene que nombrar la línea de tiempo, y uno de 52 empujaba el riel otros
   80px hacia abajo justo cuando lo que se quería era subirlo. */
.hitos__tit{margin:0 0 8px;text-align:center;
  color:var(--tinta-3);font-size:12px;font-weight:500;line-height:20px;
  letter-spacing:normal}
.hitos{margin-top:-8px}
/* 32 arriba y no los 96 de sección: el carrusel de arriba ya termina en aire
   —sus tarjetas laterales están encogidas— así que el aire de sección se lee
   doble y empuja el timeline fuera de la ventana. */
#hitos{padding-top:32px;padding-bottom:8px}
.hitos__riel{overflow-x:auto;overflow-y:clip;overscroll-behavior-x:contain;
  /* El riel reserva el alto del hito MÁS ALTO, porque su texto va posicionado
     y el riel lo recorta. Ese es el de 2026, el único con miniatura: 176 de
     texto + 12 + 79 de video = 219, que arrancan 168 abajo del borde. De ahí
     los 260, con 5 de holgura. Los otros diez necesitan 218, así que pagan 42 de aire de más:
     es el precio de tener el video dentro de la línea de tiempo. */
  /* Los 48 de arriba NO son aire: el año va POR ENCIMA de la línea y el riel
     recorta, así que bajarlos le come la cabeza a los «2020». Medido: con 24
     el año sobresalía 12px. El riel se sube recortando abajo, donde sí sobraba. */
  padding:48px 0 268px;-webkit-overflow-scrolling:touch;
  /* Acá NO sirve `overflow-clip-margin`. El spec dice que si un eje es
     `scroll`/`auto`, el otro declarado `clip` COMPUTA A `hidden` — y con
     `hidden` el margen de recorte no existe. Se probó y la miniatura seguía
     cortada exactamente igual; peor, el chequeo la daba por entera porque
     medía contra un margen que el navegador nunca aplicó.
     Lo único que funciona es reservar el alto de verdad: ver el
     `padding-bottom` de arriba, que está calculado sobre el hito más alto. */
  }
/* El aire a los lados es para que el texto del primer hito y el año del último
   no se salgan. En Raycast son 100 a cada lado, pero ellos tienen 17 hitos y un
   riel que se arrastra; con 11 y sin arrastre, 64 alcanza y deja entrar todos
   los hitos a 1440 sin que el último quede fuera de la vista. */
/* 124 a cada lado, y no menos: el texto de un hito mide 240 y va centrado bajo
   su marca, así que las de las puntas necesitan 120 de aire para no cortarse.
   Raycast se ahorra esto alineando el primero a la izquierda y el último a la
   derecha; acá van todos centrados, y el precio es este margen. */
/* 140 de aire, no 124: el texto de un hito va centrado bajo su marca, así que
   su ancho no puede pasar del doble de este aire o los de las puntas se
   cortan. Subirlo a 140 habilita una columna de 280, y con 280 el hito de 2026
   entra en dos líneas en vez de tres — que es lo que le baja el alto al riel y
   le devuelve el aire a los otros diez. */
.hitos__linea{display:grid;height:80px;min-width:100%;padding-inline:140px}

.hito{display:grid;grid-template-columns:1px 1fr;align-items:start;position:relative}
.hito__rel{position:relative}
/* La marca: un borde de 1px que crece. Con `width:0` no ocupa lugar. */
.hito__marca{display:block;position:relative;width:0;height:32px;padding:0;border:0;
  background:none;cursor:pointer;font-family:inherit;
  border-left:1px solid var(--filete);
  transition:border-left-color .15s cubic-bezier(.4,0,.2,1),height .15s cubic-bezier(.4,0,.2,1)}
/* Área de contacto invisible: un elemento de ancho 0 no se puede tocar */
.hito__marca::before{content:"";position:absolute;inset:-10px -14px -40px}
.hito__marca:hover{border-left-color:rgba(9,9,11,.45)}
.hito__marca:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}
.hito.activo .hito__marca{cursor:default;border-left-color:var(--naranjo);height:80px}

/* El ícono cuelga DEBAJO de la marca y se ve siempre, sin pasar el puntero.
   Es lo que hace que la línea se pueda leer de un vistazo. Tal cual Raycast,
   donde el primer hito además usa una foto en vez de un dibujo. */
.hito__ico{position:absolute;top:calc(100% + 16px);left:-50%;transform:translate(-50%);
  display:flex;align-items:center;justify-content:center;width:44px;height:28px;
  color:var(--tinta-3);transition:color .15s cubic-bezier(.4,0,.2,1),opacity .15s;
  opacity:.65;pointer-events:none}
.hito__ico svg{width:20px;height:20px;display:block}
.hito__ico img{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;
  background:var(--fondo-hondo)}
.hito__ico img + img{margin-left:-8px}   /* los dos fundadores, montados */
.hito.activo .hito__ico,.hito__marca:hover + .hito__ico{color:var(--tinta);opacity:1}

.hito__anio{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%);
  color:var(--tinta-3);font-size:12px;font-weight:500;line-height:20px;
  font-variant-numeric:tabular-nums}

/* El separador: un solo degradado de cuatro paradas, no cuatro puntos */
.hito__union{height:16px;background-image:linear-gradient(90deg,
  transparent 0 calc(25% - 1px), var(--filete) calc(25% - 1px) 25%,
  transparent 25% calc(50% - 1px), var(--filete) calc(50% - 1px) 50%,
  transparent 50% calc(75% - 1px), var(--filete) calc(75% - 1px) 75%,
  transparent 75% 100%)}
.hito:nth-last-child(2) .hito__union{background-image:none}

/* Los textos de todos los hitos ocupan la misma franja, uno encima de otro.
   Los que no se ven tampoco se tocan: si no, el de un hito posterior queda por
   delante y se come los clicks del que sí está visible. */
.hito__texto{position:absolute;top:calc(100% + 40px);width:280px;text-align:center;
  transform:translate(-50%);opacity:0;pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1)}
.hito.activo .hito__texto{opacity:1;pointer-events:auto}
/* Todos los textos van centrados bajo su marca, también el primero y el
   último. En Raycast los de las puntas se alinean al borde; acá se ven mejor
   centrados, y el aire lateral del riel alcanza para que no se corten. */
.hito--tope{pointer-events:none}
.hito--tope .hito__union{background-image:none}
.hito__texto h4{margin:24px 0 8px;font-size:16px;font-weight:600;line-height:24px}
.hito__texto p{margin:0;font-size:15px;line-height:24px;color:var(--tinta-2)}

/* El sello: un logo redondo con su nombre al lado, dentro del propio texto.
   Cuando lleva enlace, se subraya al pasar por encima y se puede tocar. */
.sello{display:inline-flex;align-items:center;gap:6px;vertical-align:-6px;
  color:var(--tinta);text-decoration:none;white-space:nowrap}
.sello img{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;
  background:var(--fondo-hondo)}
/* Los isotipos que llegan al borde de su archivo se cortan al recortarlos en
   círculo. Estos van contenidos y con un respiro, sobre blanco. */
.sello img.suelto,.hito__ico img.suelto{object-fit:contain;padding:4px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--filete)}
/* Un logotipo dentro del texto tampoco entra en un círculo: va a lo ancho. */
/* El nombre queda para quien no ve la imagen: el logotipo ya lo dice. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sello img.ancho{width:auto;max-width:56px;height:15px;border-radius:0;object-fit:contain;
  background:none;box-shadow:none;vertical-align:baseline}
/* El sello de YouTube es un ícono, no un logo redondo: va del alto del texto
   y con su rojo, que es lo que lo hace reconocible de un vistazo. */
.sello svg{width:20px;height:14px;display:block;flex:0 0 auto}
.sello--video svg{color:#FF0033}
/* Un logotipo no entra en un círculo de 24: se muestra a lo ancho, sin
   recortar. Raycast hace lo mismo con su primer hito, que es una foto de 85×50
   y no un círculo. */
.hito__ico img.ancho{width:auto;max-width:44px;height:16px;border-radius:0;
  object-fit:contain;padding:0;background:none;box-shadow:none}
a.sello:hover{text-decoration:underline;text-underline-offset:3px}
a.sello:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:4px}

/* El hito que todavía no pasa: la marca va punteada en vez de llena. */
.hito--proximo .hito__marca{border-left-style:dashed}
.hito--proximo.activo .hito__marca{border-left-style:dashed;border-left-color:var(--naranjo)}

@media (max-width:760px){
  /* El mismo 312 que en escritorio: el texto arranca 8 más arriba pero el
     hito con miniatura mide lo mismo, así que da casi igual. Con 267 quedaban
     40px del video afuera. */
  .hitos__riel{padding:40px 0 268px}
  /* 264 y no 200: a 390 el texto centrado en 200 deja 95 de margen a cada
     lado y parte los nombres con avatar por la mitad —«Cristóbal y» /
     «Sebastián nos»—. El techo lo pone el aire lateral del riel: el texto va
     centrado bajo su marca, así que no puede pasar del doble de ese aire o el
     primer hito se sale por la izquierda. Con 132 de aire, 264. */
  .hito__texto{width:264px}
  .hitos__linea{padding-inline:132px}
}

/* ════════════════════════════════════════════════════════════════════════════
   CIFRAS
   ════════════════════════════════════════════════════════════════════════════ */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--filete)}
.cifra{padding:32px 32px 32px 0;border-right:1px solid var(--filete)}
.cifra:last-child{border-right:0;padding-right:0}
.cifra:not(:first-child){padding-left:32px}
.cifra b{display:block;font-size:36px;font-weight:600;line-height:1.1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
/* 14 y no 15: en una columna de tres, con 15 la línea cae a 37 caracteres y
   queda por debajo de la medida de lectura. */
.cifra span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--tinta-2)}
@media (max-width:760px){
  .cifras{grid-template-columns:1fr}
  .cifra{padding:24px 0;border-right:0;border-bottom:1px solid var(--filete)}
  .cifra:last-child{border-bottom:0}
  .cifra:not(:first-child){padding-left:0}
}

/* ── Manifiesto ───────────────────────────────────────────────────────────
   Un bloque de texto centrado y ancho de lectura, como el de linear.app/careers
   y el de ramp.com/careers. No lleva título: el rótulo de arriba alcanza, y un
   h2 encima competiría con el propio texto, que es el que tiene que sonar. */
/* ── Cómo trabajamos · lista de principios de linear.app/careers ────────────
   Medido en la réplica: encabezado en dos mitades iguales, la lista separada
   por un filete y no por margen, y cada fila en dos mitades que alinean por
   línea de base. El número y el título comparten tamaño (15px) y sólo se
   distinguen por el peso, 510 contra 400; las cifras van tabulares. La
   descripción lleva 32 de sangría a cada lado, que es lo que le pone tope al
   ancho de línea: sin eso la fila entera se estira a los 1032 del contenedor
   y el renglón se va a 123 caracteres.                                       */
.principios__enc{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:32px}
.principios__enc .h2{margin:0;text-align:left}
.principios__enc .bajada{margin:0;padding-left:32px;text-align:left}
.principios__sep{height:1px;background:var(--filete);margin-top:48px}

.principios{margin:0;padding:0;list-style:none}
.principio{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;
  padding:24px 0;gap:32px}
.principio + .principio{border-top:1px solid var(--filete)}
.principio__izq{display:flex;gap:12px;align-items:baseline}
.principio__n{font-size:15px;font-weight:600;line-height:1.6;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}
.principio__t{font-size:15px;font-weight:600;line-height:1.6;color:var(--tinta)}
.principio__d{margin:0;padding-right:32px;max-width:62ch;
  font-size:15px;font-weight:400;line-height:1.6;color:var(--tinta-2)}

@media (max-width:900px){
  .principios__enc{grid-template-columns:1fr;gap:16px}
  .principios__enc .bajada{padding-left:0}
  .principio{grid-template-columns:1fr;gap:8px}
  .principio__d{padding-right:0}
}

/* La banda de fotos del hero: el carrusel se sale del contenedor a propósito,
   por eso la sección recorta en vez de dejar barra horizontal. */
/* Las tarjetas de las puntas se salen ~120px por cada lado, y el borde de la
   pantalla las cortaba en seco: se leía como una foto partida, no como una
   fila que sigue. El desvanecido convierte el corte en una disolución.

   El 7% es lo que tarda una tarjeta de 228 en apagarse a 1440; en pantallas
   angostas el mismo porcentaje da menos pixeles, que es lo que corresponde
   —ahí las tarjetas también son más chicas. */

/* El carrusel de fotos vuelve, pero al FINAL: como entrada competía con el de
   las tarjetas de equipo, y como cierre hace lo que hace bien —mostrar cómo se
   ve el día a día— justo después de las vacantes. */
/* Ahora va entre beneficios y vacantes, así que necesita aire ARRIBA —antes
   colgaba del hero y no llevaba— y menos abajo: la lista de posiciones ya trae
   su propio relleno de sección. */
.vida-fotos{padding-top:96px;padding-bottom:32px}
/* Y vacantes cierra con menos arriba: entre las fotos y su título ya hay 32.
   Con los 96 de sección quedaban 128 abajo contra 96 arriba, y se leía torcido. */
#vacantes{padding-top:64px}
.hero-fotos:not(.vida-fotos){padding-bottom:0}

.hero-fotos{overflow:hidden;padding-bottom:var(--aire);
  /* 14% y no 7%: con 7 el desvanecido mide 100px a 1440 y una tarjeta de 228
     alcanza a verse cortada antes de apagarse. Con 14 la disolución cubre una
     tarjeta entera. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}

/* La columna de texto de una oferta. */
/* Sin tope: la columna medía 496 de los 664 disponibles y dejaba 216px de
   blanco entre el texto y el panel — la «columna blanca al medio». Fintoc usa
   848 para lo mismo, así que 664 sigue siendo conservador. */
.oferta__txt{max-width:none}

/* La columna de los plegables. */
.creemos__col{min-width:0}
/* `contain` y no `cover`: el bucle es el tramo de 11:19, que es una lámina con
   texto y cifras. Recortada al alto del panel —que es casi cuadrado y el video
   es 16:9— se perdía un tercio del ancho y quedaba «platanusven» cortado.
   Entera y sobre fondo oscuro se lee como lo que es: un cuadro de video. */
/* Los dos tramos del panel, apilados. El primero es el comienzo de la charla y
   va a sangre; el segundo es la lámina de 11:19 y va entera, porque recortada
   al alto del panel —casi cuadrado contra un video 16:9— se le pierde un tercio
   del ancho. El cruce tapa el cambio de encuadre. */
.pieza video.panel-video__loop{position:absolute;inset:0;object-fit:cover}
.pieza video.panel-video__loop--dos{object-fit:contain;background:#0B0C0E;
  opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.pieza video.panel-video__loop--dos[data-activo="true"]{opacity:1}

/* ── Lo que creemos · plegables + panel, de ramp.com/careers ────────────────
   Medido en vivo a 1440: columna de texto 421px, panel de medios 644×580 con
   radio 12 sobre lab(95.6 …) ≈ #F2F1EF, y 136 de aire entre las dos. Acá el
   ancho útil es 1032, así que las proporciones se mantienen con fracciones.
   El título cerrado va a opacidad .2 y el abierto a 1, cada botón lleva 24 de
   relleno abajo, un filete de 1px y 24 de margen. El panel abre en 300ms.    */
.h2--grande{font-size:64px;line-height:1.02;letter-spacing:-.04em;font-weight:600;
  max-width:24ch;margin-inline:auto;text-align:center;text-wrap:balance}

.creemos{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start;
  margin-top:48px}

.pliegue{border-bottom:1px solid var(--filete);padding-bottom:24px;margin-bottom:24px}
.pliegue:last-child{margin-bottom:0}
.pliegue h3{margin:0;font-size:inherit;font-weight:inherit}
.pliegue__tit{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  text-align:left;font:inherit;font-size:20px;line-height:26px;font-weight:500;
  color:var(--tinta);opacity:.58;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.pliegue__tit:hover{opacity:.82}
.pliegue[data-abierto] .pliegue__tit,
.pliegue[data-abierto] .pliegue__tit:hover{opacity:1}

/* El alto lo anima la fila del grid, igual que el acordeón de Fintoc: CSS no
   sabe animar hacia height:auto pero sí de 0fr a 1fr. */
.pliegue__panel{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.pliegue[data-abierto] .pliegue__panel{grid-template-rows:1fr}
/* El aire de arriba NO puede ir de padding en esta caja: la fila del grid vale
   0fr pero el padding no se encoge, así que cerrado medía 16px en vez de 0 y
   asomaba una franja. Va de margen en el primer párrafo, con overflow:hidden
   acá para que ese margen quede contenido. */
.pliegue__cuerpo{min-height:0;overflow:hidden}
.pliegue__cuerpo > p:first-child{margin-top:16px}
.pliegue__cuerpo p{margin:0 0 12px;font-size:16px;line-height:22px;color:var(--tinta-2)}
.pliegue__cuerpo p:last-child{margin-bottom:0}

/* El panel: relación 644/580 y las capas cruzándose en fundido de 300ms.
   Ramp NO pone la imagen a sangre: sobre el panel gris apoya una pieza más
   chica, con sombra. Además de ser lo que hace el original, resuelve el techo
   de resolución: las fotos del equipo son de 480px de ancho, así que a doble
   densidad no pueden ocupar una caja de más de 240 CSS px sin ampliarse. La
   tarjeta se dimensiona contra el archivo, no contra el gusto.               */
/* El panel iba en rgb(242,241,239), un gris que no es ninguno de los dos
   fondos declarados de la página —ni el blanco ni el --fondo-hondo— así que
   se leía como una mancha de otro color detrás del video. Ahora es del color
   de la página y lo que lo delimita es el filete. */
.creemos__medios{position:relative;aspect-ratio:644/580;border-radius:12px;
  background:var(--fondo);overflow:hidden;border:1px solid var(--filete)}
.medio{position:absolute;inset:0;display:grid;place-items:center;padding:32px;
  opacity:0;visibility:hidden;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
.medio[data-activa]{opacity:1;visibility:visible;transition-delay:0s,0s}

/* Cada pieza lleva la sombra corta de Ramp: cinco capas de 0 a 9 de
   desplazamiento, medidas en su tarjeta de retratos. */
.pieza{position:relative;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 0 1px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.09),
             0 3px 2px 0 rgba(0,0,0,.05),0 6px 3px 0 rgba(0,0,0,.01)}
.pieza img,.pieza video{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%}

/* Las tres medidas salen del archivo: 480×854 aguanta 240×340; 856×612
   aguanta 420×300; el loop de 1287×720 aguanta 520×292. */
/* ── El mosaico de fotos del panel de cultura ───────────────────────────────
   Las mismas fotos del carrusel del hero y con el mismo tratamiento —tarjeta
   de radio 12, epígrafe sobre degradado, la del centro más grande—, sólo que
   acá no se arrastran: se van pasando solas.

   Antes era UNA foto de 240×340 que se reemplazaba. Se veía como una imagen
   de archivo; el carrusel de arriba se entiende de inmediato como «así es
   esto», y repetir su lenguaje acá cuesta poco y dice lo mismo. */
.mosaico{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.mosaico__via{display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;height:100%}
.mosaico__foto{position:relative;flex:0 0 auto;margin:0;
  width:150px;height:214px;border-radius:12px;overflow:hidden;
  background:var(--fondo-hondo);
  transition:width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1),
             opacity .55s cubic-bezier(.4,0,.2,1)}
.mosaico__foto img{width:100%;height:100%;object-fit:cover;display:block;
  color:transparent}
/* Sólo tres a la vista: con cinco, cada una queda tan chica que no se
   distingue quién está en la foto. Las otras dos esperan su turno. */
.mosaico__foto{display:none}
.mosaico__foto[data-activa],
.mosaico__foto[data-vecina]{display:block}
.mosaico__foto[data-activa]{width:196px;height:280px}
.mosaico__foto[data-vecina]{opacity:.55}
.mosaico__foto figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:36px 12px 12px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));
  font-size:13px;line-height:18px;color:#fff;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.mosaico__foto[data-activa] figcaption{opacity:1}

@media (max-width:900px){
  .mosaico__foto{width:110px;height:158px}
  .mosaico__foto[data-activa]{width:150px;height:214px}
  .mosaico__foto figcaption{font-size:12px;padding:28px 10px 10px}
}

.pieza--fotos{width:240px;height:340px}
.pieza--equipo{width:420px;height:300px}
/* El video de reposo llena el panel, como el fondo a sangre de linear.app/quality.
   Iba a 520×292 fijos dentro de un panel de 588×529: quedaban ~118px de blanco
   muerto arriba y abajo, y a 390 el video se salía 244px y el <overflow:hidden>
   del panel le cortaba el título por la mitad. */
.pieza--video{width:100%;height:100%}

.pieza--fotos img{position:absolute;inset:0;opacity:0;
  transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.pieza--fotos img[data-activa]{opacity:1}

/* El botón que abre la charla: el loop mudo y un vidrio abajo. */
.panel-video,.lp-tarjeta{font:inherit}
.panel-video{display:block;padding:0;border:0;background:none;cursor:pointer;
  width:100%;height:100%;position:relative}
.panel-video__vidrio{position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;
  background:rgba(16,16,18,.55);backdrop-filter:blur(12px);
  transition:background .2s cubic-bezier(.4,0,.2,1)}
.panel-video:hover .panel-video__vidrio{background:rgba(16,16,18,.72)}
.panel-video__play{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:#fff;color:var(--tinta)}
.panel-video__play svg{width:16px;height:16px}
.panel-video__meta{display:block;text-align:left;min-width:0}
.panel-video__tit{display:block;font-size:15px;line-height:20px;font-weight:500;color:#fff}
.panel-video__pie{display:block;font-size:12px;line-height:16px;color:rgba(255,255,255,.7)}
.panel-video:focus-visible{outline:2px solid var(--naranjo);outline-offset:2px}

/* Los logos de clientes, ya sobre el panel gris. */
/* Doce logos en dos columnas no entran en el panel: pasan a tres, con menos
   aire, y cada uno con un alto máximo para que un PNG grande no domine.

   Cada logo ocupa una CELDA de alto fijo y se centra adentro. Antes se le
   fijaba `height` al <img>, que es lo mismo sólo mientras todos los logos sean
   igual de anchos: los muy anchos (Volcom, Picton) chocaban contra el ancho de
   la columna y se achicaban por debajo del alto pedido, así que la fila
   quedaba despareja. Con la celda fija, la fila se lee alineada aunque cada
   logo ceda distinto. */
/* ── Los logos de clientes ─────────────────────────────────────────────────
   Nueve huecos a la vista, trece logos rotando. La rotación no es un adorno:
   es lo que permite mostrar trece clientes sin una fila huérfana —trece no se
   divide en tres— y sin achicar la celda a cuatro columnas, donde un logotipo
   horizontal queda de 17px de alto.

   La separación la hace el HUECO, no el logo. Cada logo se dibuja dentro de
   una caja de alto fijo y no puede pasar del 78% de su ancho: sin ese tope,
   un logotipo ancho llenaba la celda de borde a borde y los de al lado se
   tocaban, aunque la separación declarada fuera de 20.
   ────────────────────────────────────────────────────────────────────────── */
.panel-logos{display:grid;align-content:center;justify-items:center;
  gap:26px 28px;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:44px;padding-inline:16px}

.logo-hueco{position:relative;display:grid;place-items:center;
  width:100%;height:100%;min-width:0}
/* TODOS los logos del hueco comparten la misma celda. Sin esto, durante los
   dos cuadros que van entre que se agrega el clon y que al saliente se le pone
   `data-saliendo`, el clon está en flujo y la grilla abre una segunda fila
   implícita: el que sale se corre 8px hacia arriba a opacidad plena y vuelve.
   Son 33ms, y es exactamente el tic que se ve al cambiar. */
.logo-hueco img{grid-area:1 / 1}
.panel-logos img{max-width:78%;max-height:28px;width:auto;height:auto;
  object-fit:contain;display:block;opacity:.85;
  transition:opacity .3s cubic-bezier(.4,0,.2,1)}
/* Mientras entra o sale, el logo se apila sobre el que estaba: los dos ocupan
   el mismo lugar y el cruce no mueve la grilla. */
.logo-hueco img[data-saliendo]{position:absolute;inset:0;margin:auto;opacity:0}
.logo-hueco img[data-entrando]{opacity:0}

/* Peso ÓPTICO, no alto. Un logotipo horizontal a 28px ocupa el triple de área
   que uno casi cuadrado o de dos renglones a esa misma altura, y se lee el
   doble de grande. Los que suben son los compactos: Sky es casi cuadrado,
   PuntoTicket apila dos renglones y Sura es casi cuadrado también. */
.panel-logos img[alt="Sky Airline"]{max-height:35px}
.panel-logos img[alt="PuntoTicket"]{max-height:36px}
.panel-logos img[alt="AFP Uno"]{max-height:31px}
.panel-logos img[alt="Sura"]{max-height:36px}
/* Estos tres son wordmarks muy anchos: su límite no es el alto sino el ancho
   del hueco, así que a 78% quedaban en 16-20px contra los 28 del resto. */
.panel-logos img[alt="VanTrust Capital"],
.panel-logos img[alt="Picton"],
.panel-logos img[alt="Volcom Capital"],
.panel-logos img[alt="Kaufmann"],
.panel-logos img[alt="Global66"]{max-width:92%}
.panel-logos img[alt="AFP PlanVital"]{max-height:34px}
/* VanTrust es gris claro de origen: el .85 general lo hundía de más. */
.panel-logos img[alt="VanTrust Capital"]{opacity:1}

/* La reserva no se ve nunca: es de donde salen los logos que van entrando. */
.panel-logos__reserva{display:none}

@media (prefers-reduced-motion:reduce){
  .panel-logos img{transition:none}
}

.panel-logos__pie{grid-column:1 / -1;margin:0;text-align:center;
  font-size:14px;line-height:20px;color:var(--tinta-3)}

/* El reproductor del componente vive suelto: acá sólo se le quita el hero. */
/* El componente trae su propia pila tipográfica ("Inter Variable", SF Pro,
   Arial de última). Acá la página tiene UNA familia, así que se le apuntan sus
   dos variables a la Inter del proyecto: si no, el reproductor cae en Arial y
   la auditoría de familias deja de dar una sola. */
.linear-player{--lp-font:Inter,sans-serif;--lp-font-mono:Inter,sans-serif}
/* El componente se monta como hero de pantalla completa. Acá vive dentro del
   panel, así que se le saca todo eso y se lo deja centrar como una pieza más.
   El diálogo del reproductor es position:fixed, no lo afecta. */
.linear-player--panel{position:static;display:grid;place-items:center;
  width:100%;height:100%;min-height:0;padding:0;background:none}

/* El reproductor del hito de 2026 no tiene panel de reposo: sólo existen su
   portada y su diálogo, los dos `fixed`. La sección en sí no ocupa lugar en el
   flujo, así que vive al final de la línea de tiempo sin empujar nada. */
.linear-player--suelto{position:static;display:block;width:0;height:0;
  min-height:0;padding:0;margin:0;background:none}

@media (max-width:900px){
  .h2--grande{font-size:40px;max-width:none}
  .creemos{grid-template-columns:1fr;gap:32px}
  /* El panel iba en rgb(242,241,239), un gris que no es ninguno de los dos
   fondos declarados de la página —ni el blanco ni el --fondo-hondo— así que
   se leía como una mancha de otro color detrás del video. Ahora es del color
   de la página y lo que lo delimita es el filete. */
.creemos__medios{order:-1}
  .panel-logos{padding:32px 8px;gap:22px 16px;grid-template-columns:repeat(3,1fr);
    grid-auto-rows:38px}
  /* Abajo de 500 el hueco baja a 75px de ancho y los wordmarks quedan de 11px
     de alto, ilegibles. Con dos columnas el hueco llega a ~110. */
  @media (max-width:500px){
    .panel-logos{grid-template-columns:repeat(2,1fr);gap:20px 14px}
    .panel-logos img{max-width:90%}
  }
  .panel-logos img{max-height:24px;max-width:86%}
  .panel-logos img[alt="Sky Airline"]{max-height:30px}
  .panel-logos img[alt="PuntoTicket"]{max-height:31px}
  .panel-logos img[alt="AFP Uno"]{max-height:27px}
  .panel-logos img[alt="Sura"]{max-height:31px}
}

.sec--hondo .valor__ico > div{background:var(--fondo)}
.valor__ico svg{width:20px;height:20px;display:block;color:var(--tinta)}
.valor h4{margin:0 0 10px;font-size:16px;font-weight:500;line-height:24px}
.valor p{margin:0;font-size:16px;line-height:28px;color:var(--tinta-2)}
@media (max-width:900px){.valores{grid-template-columns:1fr;gap:36px}}

/* ── Stack: las etiquetas de tecnologías ──────────────────────────────────── */
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:32px;border-top:1px solid var(--filete)}
.stack__t{width:100%;margin:0 0 4px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3)}
.stack span{display:inline-flex;align-items:center;height:28px;padding:0 8px;border:1px solid var(--filete);
  border-radius:6px;background:var(--caja);font-size:12px;line-height:16px;color:var(--tinta-2);white-space:nowrap}

/* ════════════════════════════════════════════════════════════════════════════
   BENEFICIOS  ·  estructura de resend.com/careers
   Rejilla de tres columnas SIN separación: las celdas comparten filete. La
   última columna no dibuja el borde derecho y la última fila no dibuja el de
   abajo, así la rejilla queda abierta y no encajonada.
   ════════════════════════════════════════════════════════════════════════════ */
.beneficios{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;
  border-top:1px solid var(--filete);border-left:1px solid var(--filete)}
/* Los números son los de la celda de Resend, medidos: 36 arriba, 40 a los
   lados, 48 abajo, y 8 entre las tres piezas. */
.beneficio{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:28px 32px 32px;
  border-width:0 1px 1px 0;
  border-style:solid;
  border-color:var(--filete);
}
/* El ícono no está en Resend: su rejilla es título, texto y chip. Se agrega
   porque en claro las celdas quedan muy planas sin un ancla visual.

   La construcción es la de clerk.com/careers: un SVG de 48 dibujado a mano,
   trazo de 2, puntas redondas y sin relleno, donde el dibujo queda QUIETO y se
   mueve una sola pieza de acento. Lo que permite animar las partes por
   separado es `transform-box: fill-box`, que hace que cada trazo gire y escale
   sobre su propio centro y no sobre el origen del lienzo.

   Cada ícono usa el mecanismo que le corresponde por lo que representa; no hay
   uno solo para los seis. Eso es lo que se copió de Clerk, y lo que antes
   fallaba: los seis compartían un mismo arco y unos mismos destellos.

   Se mueve al entrar en pantalla, como el de Clerk: se comprobó que sus
   transformaciones no cambian con el puntero encima, sólo quedan aplicadas
   después de que el bloque aparece. */
/* ── Íconos de beneficios ───────────────────────────────────────────────────
   Los mecanismos salen de medir el hover de clerk.com/careers cuadro por
   cuadro: la animación la escribe JavaScript en el `style` inline de cada
   parte del SVG, así que en un navegador headless no corre y hay que abrirlo
   de verdad para verla. Todo el trabajo está en variantes/ y scripts/:
     medir-clerk.mjs      muestrea el hover del original cada 20ms
     curvas-clerk.mjs     convierte las muestras en linear() de CSS
     tira-movimiento.mjs  arma una tira de cuadros para poder revisarla
     holgura-iconos.mjs   ninguna pieza que se mueve toca al resto
     banda-tinta.mjs      cada ícono llena el cuadro como los de Clerk
     islas-tinta.mjs      componentes conexos: piezas fusionadas y huecos

   Antes de esto los seis compartían un mismo arco y unos mismos destellos —4
   de cada 5-7 formas eran idénticas— y el hover giraba ese anillo compartido.
   Ahora cada uno mueve una pieza propia. */
.beneficio__ico{display:block;width:48px;height:48px;color:var(--tinta-3);
  transition:color .45s cubic-bezier(.33,1,.68,1)}
.beneficio__ico svg{width:48px;height:48px;display:block;overflow:visible}
.beneficio:hover .beneficio__ico{color:var(--tinta)}
/* Cada parte se mueve desde su propio centro: sin esto una rotación de 50°
   manda la pieza a la otra punta del lienzo. */
.beneficio__ico :is(path,circle,rect,line,g,polyline){
  transform-box:fill-box;transform-origin:50% 50%}
/* Una llama se apaga hacia la mecha, no hacia el aire. */
.beneficio__ico [data-origen="base"]{transform-origin:50% 100%}

/* ── destello ───────────────────────────────────────────────────────────────
   El mecanismo del primer ícono de Clerk, con sus curvas medidas: la pieza
   sale en 89ms, ESPERA 134ms afuera ya girada 50°, y vuelve con un resorte
   que se pasa a 1,159 y rebota a 0,974 antes de acomodarse. 760ms en total,
   y 161ms de escalón entre piezas hermanas.

   Las curvas van literales y no en una variable: dentro de un @keyframes,
   `animation-timing-function: var(--x)` no se resuelve y el resorte
   desaparece sin avisar. Y no se pueden aproximar con cubic-bezier: una
   cúbica tiene un solo lomo, puede sobrepasar pero no sobrepasar Y REBOTAR. */
@keyframes ben-destello{
  0%   { scale:1; animation-timing-function:linear(0.0000 0.0%, 0.4899 25.8%, 0.8317 50.6%, 0.9968 75.3%, 1.0000 100.0%) }
  11.7%{ scale:0 }
  29.3%{ scale:0; animation-timing-function:linear(0.0000 0.0%, 0.1372 4.3%, 0.4038 8.6%, 0.7628 12.8%, 0.9756 17.1%, 1.1056 21.2%, 1.1590 25.5%, 1.1466 30.0%, 1.1054 34.1%, 1.0606 38.2%, 1.0199 42.5%, 0.9855 46.7%, 0.9748 50.8%, 0.9740 54.9%, 0.9791 59.2%, 0.9888 63.3%, 0.9957 67.4%, 1.0007 71.5%, 1.0035 75.6%, 1.0043 79.7%, 1.0039 83.6%, 1.0025 87.9%, 1.0012 92.2%, 1.0000 96.3%) }
  100% { scale:1 }
}
@keyframes ben-giro-izq{
  0%{rotate:0deg} 11.7%{rotate:-50deg}
  29.3%{rotate:-50deg; animation-timing-function:linear(0.0000 0.0%, 0.1144 7.3%, 0.2224 14.5%, 0.3529 21.8%, 0.4484 29.0%, 0.5380 36.0%, 0.6220 43.2%, 0.7238 50.8%, 0.7926 57.7%, 0.8511 64.7%, 0.9039 71.9%, 0.9590 79.2%, 0.9867 86.1%, 1.0000 93.1%)}
  71%,100%{rotate:0deg}
}
@keyframes ben-giro-der{
  0%{rotate:0deg} 11.7%{rotate:50deg}
  29.3%{rotate:50deg; animation-timing-function:linear(0.0000 0.0%, 0.1144 7.3%, 0.2224 14.5%, 0.3529 21.8%, 0.4484 29.0%, 0.5380 36.0%, 0.6220 43.2%, 0.7238 50.8%, 0.7926 57.7%, 0.8511 64.7%, 0.9039 71.9%, 0.9590 79.2%, 0.9867 86.1%, 1.0000 93.1%)}
  71%,100%{rotate:0deg}
}
/* Se aplica SÓLO por su clase. Una regla global sobre la tarjeta le mete este
   mecanismo a cualquier pieza marcada, encima del que le toque, y el defecto
   no lo canta ningún arnés: se ve como un solape. */
.beneficio.m-destello:hover [data-a="1"],
.beneficio:hover .m-destello [data-a="1"]{animation:ben-destello 760ms both, ben-giro-izq 760ms both}
.beneficio.m-destello:hover [data-a="2"],
.beneficio:hover .m-destello [data-a="2"]{animation:ben-destello 760ms 161ms both, ben-giro-der 760ms 161ms both}
.beneficio.m-destello:hover [data-a="3"],
.beneficio:hover .m-destello [data-a="3"]{animation:ben-destello 760ms 322ms both, ben-giro-izq 760ms 322ms both}

/* ── giro ───────────────────────────────────────────────────────────────────
   El asterisco de Claude ya está COMPLETO en reposo —que es lo que ve casi
   todo el mundo— y gira al pasar el cursor.

   Gira 180° y no 45° ni 90° por una razón del dibujo: ocho brazos tienen
   simetría rotacional cada 45°, así que un giro de 45 o de 90 es literalmente
   invisible —se probó, y los doce cuadros del gesto salían idénticos—. Con 180
   el movimiento se ve todo el camino y el estado final coincide con el de
   partida, así que no queda desalineado.

   La curva es la del resorte medido en Clerk: se pasa un 16 % y rebota antes
   de acomodarse. Va literal porque dentro de un @keyframes un var() no se
   resuelve. */
@keyframes ben-gira{
  0%  { rotate:0deg; animation-timing-function:linear(0.0000 0.0%, 0.1372 4.3%, 0.4038 8.6%, 0.7628 12.8%, 0.9756 17.1%, 1.1056 21.2%, 1.1590 25.5%, 1.1466 30.0%, 1.1054 34.1%, 1.0606 38.2%, 1.0199 42.5%, 0.9855 46.7%, 0.9748 50.8%, 0.9740 54.9%, 0.9791 59.2%, 0.9888 63.3%, 0.9957 67.4%, 1.0007 71.5%, 1.0035 75.6%, 1.0043 79.7%, 1.0039 83.6%, 1.0025 87.9%, 1.0012 92.2%, 1.0000 96.3%) }
  100%{ rotate:180deg }
}
.beneficio:hover .m-gira [data-a]{animation:ben-gira 760ms both}

/* ── dibujado ───────────────────────────────────────────────────────────────
   El trazo se dibuja solo, escalonado. El largo de cada trazo lo mide el
   script al cargar: el stroke-dasharray tiene que ser EXACTAMENTE ese largo,
   y a ojo queda corto (el trazo nunca cierra) o largo (arranca ya dibujado).

   Ojo con este mecanismo: deja el acento INVISIBLE en reposo, que es lo que
   ve casi todo el mundo. En la taza no molesta —una taza sin vapor sigue
   siendo una taza— pero en un ícono cuyo acento es el dibujo entero, la
   tarjeta apagada se ve incompleta. */
.beneficio__ico.m-dibujo [data-a]{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 520ms cubic-bezier(.65,0,.35,1)}
.beneficio__ico.m-dibujo [data-a="2"]{transition-delay:.13s}
.beneficio__ico.m-dibujo [data-a="3"]{transition-delay:.26s}
.beneficio:hover .m-dibujo [data-a]{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  /* Apagar sólo `animation` deja vivo el dibujado, que va con `transition`. */
  .beneficio__ico *{animation:none !important;transition:none !important}
  .beneficio__ico.m-dibujo [data-a]{stroke-dashoffset:0}
}
/* 20/400 sobre 20: el interlineado es exactamente el cuerpo, medido en Resend */
.beneficio h4{margin:0;font-size:20px;font-weight:400;line-height:20px;letter-spacing:normal}
/* 14/400 sobre 24.08. El 24.08 es medido, no redondeado a 24 */
.beneficio p{flex:1 1 auto;margin:4px 0 0;font-size:14px;line-height:24.08px;color:var(--tinta-2)}
/* Chip de 28 de alto, radio 10, sangría 0 8, texto 12/500 sobre 16, y nunca
   parte en dos líneas */
.chip{
  display:inline-flex;align-items:center;align-self:flex-start;
  height:28px;padding:0 8px;margin-top:4px;
  border-radius:10px;
  background:rgba(9,9,11,.05);
  font-size:12px;font-weight:500;line-height:16px;color:var(--tinta-2);
  white-space:nowrap;
}
@media (max-width:980px){.beneficios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.beneficios{grid-template-columns:1fr}.beneficio{padding:28px 24px 32px}}

/* ════════════════════════════════════════════════════════════════════════════
   VACANTES  ·  estructura de mercury.com/jobs
   La fila es una rejilla, no una tabla que reparte sola: el cargo manda, las
   condiciones van al medio y la flecha ocupa 24 fijos al final. Filete arriba
   de cada fila, ancho completo.
   ════════════════════════════════════════════════════════════════════════════ */
.vacantes{margin-top:40px;border-bottom:1px solid var(--filete)}
.vacante{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 24px;
  align-items:center;
  gap:24px;
  padding:20px 4px;
  border-top:1px solid var(--filete);
  text-decoration:none;
  transition:background .2s ease,padding .2s ease;
}
/* Con sólo `padding-inline`, al pasar el puntero el cargo saltaba 12px a la
   derecha y el meta 12 a la izquierda: la fila temblaba. El margen negativo
   deja que el fondo sangre hacia afuera sin mover una letra. */
.vacante:hover{background:rgba(9,9,11,.03);
  padding-inline:16px;margin-inline:-12px}
.vacante:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.vacante__cargo{font-size:20px;font-weight:500;line-height:28px;letter-spacing:-.01em}
.vacante__cond{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.vacante__cond span{font-size:14px;line-height:24px;color:var(--tinta-2);white-space:nowrap}
.vacante__cond span + span::before{content:"·";margin-right:8px;color:var(--tinta-3)}
.vacante__flecha{display:flex;align-items:center;justify-content:flex-end;width:24px;color:var(--tinta-3)}
.vacante__flecha svg{width:11px;height:18px;display:block;transition:translate .2s ease}
.vacante:hover .vacante__flecha svg{translate:3px}
@media (max-width:760px){
  .vacante{grid-template-columns:minmax(0,1fr) 24px;gap:8px 16px;padding:20px 4px}
  .vacante__cargo{grid-column:1}
  .vacante__cond{grid-column:1;justify-content:flex-start}
  .vacante__flecha{grid-column:2;grid-row:1 / span 2}
}

/* ════════════════════════════════════════════════════════════════════════════
   PASOS  ·  estructura de joinfleek.com/es/careers
   Cuadro con el número, y al lado el título y la descripción. El cuadro baja
   2 para caer a la altura de la primera línea del título.
   ════════════════════════════════════════════════════════════════════════════ */
.pasos{display:flex;flex-direction:column;gap:20px;margin-top:48px}
.paso{display:flex;align-items:flex-start;gap:16px}
.paso__n{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-top:2px;flex-shrink:0;
  border-radius:6px;background:var(--tinta);
  font-size:13px;font-weight:600;line-height:18px;color:#fff;
  font-variant-numeric:tabular-nums;
}
.paso__t{margin:0 0 2px;font-size:20px;font-weight:500;line-height:32px;letter-spacing:-.01em}
.paso__d{margin:0;font-size:16px;line-height:26px;color:var(--tinta-2);max-width:72ch}

/* ════════════════════════════════════════════════════════════════════════════
   ACORDEÓN  ·  estructura de fintoc.com/jobs
   El panel abre de grid-template-rows 0fr a 1fr, que es lo que permite animar
   una altura que no se conoce de antemano. El «+» rota 45° con la propiedad
   suelta `rotate`. Abrir uno cierra el anterior.
   ════════════════════════════════════════════════════════════════════════════ */
.faq{display:flex;flex-direction:column;margin-top:40px;max-width:820px}
.faq__item{border-bottom:1px solid var(--filete)}
.faq__item:last-child{border-bottom:0}
.faq__b{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:20px 0;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:500;line-height:24px;
  color:var(--tinta);text-align:left;
}
.faq__b:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.faq__mas{
  display:block;width:18px;height:18px;flex-shrink:0;color:var(--tinta-3);
  transition-property:transform,translate,scale,rotate;
  transition-duration:.2s;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.faq__item[data-abierto="si"] .faq__mas{rotate:45deg}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.faq__item[data-abierto="si"] .faq__panel{grid-template-rows:1fr}
.faq__panel > div{overflow:hidden}
.faq__panel p{margin:0;padding:0 0 20px;max-width:70ch;font-size:15px;line-height:26px;color:var(--tinta-2)}

/* ════════════════════════════════════════════════════════════════════════════
   CAJA DE SECCIÓN  ·  estructura de vambe.ai/careers/sdr
   Se usa en las páginas de cada oferta: ícono y título en fila, y debajo la
   lista con viñeta de ícono. El ícono de cada punto baja 2 para caer a la
   altura de la primera línea.
   ════════════════════════════════════════════════════════════════════════════ */
.caja{
  padding:24px;
  margin-bottom:24px;
  border:1px solid var(--filete);
  border-radius:16px;
  background:var(--caja);
}
.caja__enc{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.caja__enc svg{width:20px;height:20px;flex-shrink:0;color:var(--tinta-3)}
.caja__enc h3{margin:0;font-size:20px;font-weight:600;line-height:28px;letter-spacing:-.015em}
.caja ul{list-style:none;margin:0;padding:0}
.caja li{display:flex;align-items:flex-start;gap:12px}
.caja li:not(:last-child){margin-bottom:12px}
.caja li svg{width:20px;height:20px;margin-top:2px;flex-shrink:0;color:var(--tinta-3)}
.caja li span{font-size:16px;line-height:26px;color:var(--tinta-2)}
.caja > p{margin:0;font-size:16px;line-height:26px;color:var(--tinta-2)}
.caja > p + p{margin-top:16px}

/* ════════════════════════════════════════════════════════════════════════════
   PÁGINA DE OFERTA
   ════════════════════════════════════════════════════════════════════════════ */
.volver{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;
  font-size:14px;color:var(--tinta-2);text-decoration:none}
.volver:hover{color:var(--tinta)}
.volver svg{width:14px;height:14px}

.oferta__enc{padding-block:48px 40px;border-bottom:1px solid var(--filete)}
.oferta__enc h1{font-size:36px;line-height:1.14;margin-bottom:16px}
.oferta__meta{display:flex;flex-wrap:wrap;gap:8px}
.oferta__meta span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border:1px solid var(--filete);border-radius:10px;background:var(--caja);
  font-size:12px;line-height:16px;color:var(--tinta-2);white-space:nowrap}

.chip__ico{flex:0 0 auto;width:14px;height:14px;color:var(--tinta-3)}

.oferta__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;
  align-items:start;padding-block:48px 96px}
/* Las dos tarjetas son UNA celda de la grilla. Sueltas, la segunda contaba
   como tercer ítem y se iba a la fila de abajo, debajo del texto. */
.oferta__panel{position:sticky;top:96px;display:grid;gap:16px;align-content:start}
.oferta__lado{padding:24px;border:1px solid var(--filete);
  border-radius:16px;background:var(--caja)}
.oferta__lado h3{margin:0 0 16px;font-size:16px;font-weight:600;line-height:24px}
.oferta__lado p{margin:0 0 20px;font-size:14px;line-height:22px;color:var(--tinta-2)}
.oferta__lado .boton{width:100%}
/* La ficha: cada dato con su ícono, como los chips de la cabecera. Sin ellos
   eran tres pares de texto y había que leerlos todos para encontrar el que
   interesa. */
.oferta__lado dl{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--filete)}
.ficha{display:grid;gap:16px}
.ficha__fila{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.ficha__ico{width:16px;height:16px;margin-top:4px;color:var(--tinta-3)}
.oferta__lado dt{font-size:12px;line-height:20px;color:var(--tinta-3)}
.oferta__lado dd{margin:0 0 12px;font-size:14px;line-height:22px}
.oferta__lado dd:last-child{margin-bottom:0}
@media (max-width:900px){
  .oferta__cuerpo{grid-template-columns:1fr;gap:32px}
  .oferta__lado{position:static}
}

/* ════════════════════════════════════════════════════════════════════════════
   CIERRE Y PIE
   ════════════════════════════════════════════════════════════════════════════ */
.cierre{padding-block:96px;border-top:1px solid var(--filete);text-align:center}
.cierre .h2{margin-inline:auto}
.cierre .bajada{margin:0 auto 24px;text-align:center}
.cierre .boton{margin-inline:auto}

/* El pie de cardda.com, traducido clase por clase de su marcado real
   (leído el 2026-08-18, a 1440 px). La equivalencia, para poder auditarla:

     footer            bg-gray-900 text-gray-300 py-12   → #111827 / #D1D5DB / 48
     contenedor        max-w-7xl px-4 sm:px-6 lg:px-8    → 1280 / 16·24·32
     rejilla exterior  md:grid-cols-[18rem_minmax(0,1fr)] gap-x-8 gap-y-10 mb-8
     rejilla enlaces   auto-fit minmax(140px,1fr), mismo gap
     h3                text-white font-semibold mb-4     → 16/600 blanco, 16 abajo
     ul                space-y-2                          → 8 entre ítems
     lema              text-gray-400 max-w-md mb-4       → #9CA3AF, 28rem, 16
     redes             flex gap-4, h-6 w-6               → 16 de gap, 24 el ícono
     respaldo          flex flex-col items-start gap-5   → apilados, 20 de gap
     barra legal       pt-8 border-t border-gray-800     → 32 arriba, #1F2937

   Los tres logos se invierten por filtro, no son archivos aparte: Cardda e YC
   con brightness(0) invert(1), que los deja siluetas blancas puras; Platanus
   sólo con invert(1), que le conserva la forma en vez de aplanarla. */
.pie{background:rgb(17,24,39);color:rgb(209,213,219);
  padding-block:48px;font-size:16px;line-height:24px}
.pie__env{width:100%;max-width:1280px;margin-inline:auto;padding-inline:16px}
@media (min-width:640px){ .pie__env{padding-inline:24px} }
@media (min-width:1024px){ .pie__env{padding-inline:32px} }
/* md:grid-cols-[18rem_minmax(0,1fr)] — o sea una sola columna hasta 768 y dos
   de ahí para arriba. Acá el corte estaba en 860 y a 768 el pie salía 60px más
   alto que el del sitio. */
.pie__rejilla{display:grid;grid-template-columns:minmax(0,1fr);
  gap:40px 32px;margin-bottom:32px}
@media (min-width:768px){
  .pie__rejilla{grid-template-columns:18rem minmax(0,1fr)}
}

.pie__marca{display:block}
.pie__logo-caja{margin-bottom:16px}
.pie__logo{height:28px;width:auto;display:block;filter:brightness(0) invert(1)}
.pie__lema{margin:0 0 16px;max-width:28rem;
  font-size:16px;line-height:24px;color:rgb(156,163,175)}
.pie__social{display:flex;gap:16px}
.pie__social a{color:rgb(156,163,175);display:block;
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.pie__social a:hover{color:#fff}
.pie__social svg{width:24px;height:24px;display:block;fill:currentColor}

.pie__cols{display:grid;gap:40px 32px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* letter-spacing y text-wrap se anulan a propósito: la regla global de esta
   página los pone en todo h1..h4, pero el pie es marcado ajeno y en cardda.com
   los h3 van sin apretar. Heredarlos corría cada encabezado unos píxeles y era
   lo único que salía rojo en la comparación de columnas. */
.pie__col h3{margin:0 0 16px;font-size:16px;font-weight:600;line-height:24px;
  letter-spacing:normal;text-wrap:wrap;color:#fff}
.pie__col ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px}
.pie__col a{color:rgb(209,213,219);text-decoration:none;font-size:16px;line-height:20px;
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.pie__col a:hover{color:#fff}

.pie__respaldo{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pie__respaldo img{width:auto;display:block;object-fit:contain}
.pie__yc{height:28px;filter:brightness(0) invert(1)}
.pie__platanus{height:24px;filter:invert(1)}

.pie__legal{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding-top:32px;border-top:1px solid rgb(31,41,55)}
/* 12,4/16, medido en cardda.com. No es un valor elegido ni el text-sm de
   Tailwind por defecto (14/20): su escala está sobre una raíz distinta y ahí
   text-sm resuelve en 12,4. Se copia el número medido porque la cáscara se
   replica, no se aproxima. Es el único lugar del pie con ese tamaño. */
.pie__legal p{margin:0;font-size:12.4px;line-height:16px;color:rgb(156,163,175)}
.pie__legal nav{display:flex;gap:24px;flex-wrap:wrap}
.pie__legal a{font-size:12.4px;line-height:16px;color:rgb(156,163,175);text-decoration:none;
  transition:color .15s cubic-bezier(.4,0,.2,1)}
.pie__legal a:hover{color:#fff}
/* md: la barra legal pasa a una sola fila con los extremos separados */
@media (min-width:768px){
  .pie__legal{flex-direction:row;justify-content:space-between}
}



/* ── Aparición al entrar en pantalla ──────────────────────────────────────── */
/* El bloque nace 10px abajo y sube. Sin JavaScript no pasa nada: el estado
   base ya es visible, así que si el script falla la página se lee igual. */
.revela{opacity:1}
.js .revela{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .revela.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .revela{opacity:1;transform:none}
}

@media (max-width:760px){
  :root{--aire:72px}
  h1{font-size:40px;letter-spacing:-1px}
  .h2{font-size:32px}
  .oferta__enc h1{font-size:30px}
}

/* ── Capítulos de la charla, debajo del video ───────────────────────────────
   Dónde van importa y costó tres intentos: el panel .creemos__medios contiene
   cuatro .medio absolutos con inset:0 —uno por pliegue del acordeón— así que
   todo lo que se sume dentro de un .medio se apila encima de lo que ya hay.
   Lo único estático de esa rama es section.linear-player, y ahí adentro sí se
   puede poner una fila debajo del video.

   El carrusel del componente está pensado para un hero a ancho completo y se
   apoya en el ancho de la ventana; acá se acota a una fila que se arrastra. El
   componente queda intacto para su uso normal en ~/Projects/components. */
.creemos__bajo{display:flex;flex-direction:column;gap:12px;min-width:0}
.creemos__bajo .linear-player__carousel{position:static;width:100%;max-width:100%;
  min-width:0;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;padding-bottom:2px}
.creemos__bajo .linear-player__carousel::-webkit-scrollbar{display:none}
.creemos__bajo .linear-player__carousel-inner{display:flex;gap:10px;
  transform:none !important;width:max-content}
.creemos__bajo .linear-player__card{flex:0 0 124px;width:124px !important;
  transform-origin:0 100%}
.creemos__bajo .linear-player__card img{width:100%;height:70px;object-fit:cover}
.creemos__bajo .linear-player__card-label{font-size:12px}
.creemos__bajo .linear-player__card-title{font-size:14px;line-height:1.3}
.creemos__bajo .linear-player__nav-btn{display:none}
/* El .pieza del video se estiraba y empujaba el carrusel al fondo del panel. */

/* ── Miniatura del hito de 2026 ─────────────────────────────────────────────
   Antes era un enlace que sacaba al visitante a YouTube. Ahora es una
   miniatura que reproduce ahí mismo: al hacer clic se cambia por un iframe,
   que recién en ese momento pide la red. Sin clic no se carga nada de
   YouTube — ni el script, ni la cookie. */
.mini-video{display:block;margin:12px auto 0;max-width:320px}
.mini-video__btn{position:relative;display:block;width:100%;padding:0;border:0;
  border-radius:10px;overflow:hidden;background:#000;cursor:pointer;
  font:inherit;line-height:0;
  transition:transform .3s cubic-bezier(.33,1,.68,1)}
.mini-video__btn:hover{transform:translateY(-2px)}
.mini-video__btn:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.mini-video__btn img,.mini-video__btn video{width:100%;height:auto;display:block;
  opacity:.82;transition:opacity .3s ease}
.mini-video__btn:hover img,.mini-video__btn:hover video{opacity:1}
/* 32 y no 44: la miniatura bajó a 140×79 para entrar en el riel, y a 44 el
   botón le tapaba media imagen. */
.mini-video__play{position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--tinta);
  transition:scale .3s cubic-bezier(.34,1.56,.64,1)}
.mini-video__btn:hover .mini-video__play{scale:1.08}
/* Chip de duración abajo a la derecha, como el de cualquier miniatura de
   video. Antes era la frase «Verlo en dos minutos» tendida sobre la imagen:
   con la miniatura a 140 de ancho, el texto se salía por la derecha. */
.mini-video__rotulo{position:absolute;right:6px;bottom:6px;
  padding:1px 4px;border-radius:6px;background:rgba(8,9,10,.78);
  font-size:12px;font-weight:500;line-height:16px;color:#fff;
  font-variant-numeric:tabular-nums}
.mini-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;display:block}
@media (prefers-reduced-motion:reduce){
  .mini-video__btn,.mini-video__btn img,.mini-video__play{transition:none}
}

/* El componente trae valores de su propio sistema; se alinean con el de la
   página: relleno en grilla de 4 y el radio del chip al declarado. */
.creemos__bajo .linear-player__cta{padding-right:20px}
.creemos__bajo .linear-player__kbd{border-radius:6px}

/* ── El bloque de capítulos vive DENTRO del diálogo ─────────────────────────
   Es lo que hace linear.app/quality: en reposo se ve el video y un botón; el
   resto de la interfaz —los episodios, la descripción, el atajo— aparece
   recién al abrir. Antes estaba en el panel chico y se veía todo de una. */
/* ── LA PORTADA · linear.app/quality, medida en vivo a 1440×900 ─────────────
   El error de la vuelta anterior fue tratar el reproductor como si fuera toda
   la referencia. No lo es. Lo que Linear tiene son DOS capas:

     1. la portada — video de fondo a sangre, columna de texto a la izquierda
        (título 40/510/−0.88, bajada 15/400/24 en #8A8F98, botón blanco de 40
        de alto con el atajo P, y una línea de metadatos de 12) y la fila de
        momentos abajo, con la tarjeta activa más grande que las demás;
     2. el reproductor — 1280×720 exactos, centrado, con 80 de aire a los
        lados y 90 arriba y abajo, que se abre ENCIMA de la portada y la deja
        ver atenuada por detrás.

   Antes acá había una sola capa: se abría el reproductor pelado y la fila de
   momentos colgaba debajo. Por eso no se parecía.
   ────────────────────────────────────────────────────────────────────────── */
/* z-index 90 y no 48: la barra del sitio es `sticky` con z-index 50 y asomaba
   arriba de la portada. Es una toma de pantalla completa, como la de Linear. */
.lq{position:fixed;inset:0;z-index:90;background:#08090A;
  animation:lq-entra .3s cubic-bezier(.16,1,.3,1) both}
.lq[hidden]{display:none}
@keyframes lq-entra{from{opacity:0}to{opacity:1}}

.lq__fondo{position:absolute;inset:0;overflow:hidden}
.lq__fondo .linear-player__bg-stack{position:absolute;inset:0;display:block}
/* La escala del 108% se come el borde transparente que deja el desenfoque:
   sin ella se ve un marco lavado alrededor de todo el cuadro. */
.lq__fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* blur(6px) exactos, leídos de la capa `blurVideo` de Linear. Con 14 el
     orador era una mancha; con `saturate`+`brightness` encima aparecía un
     turquesa que el original no tiene. En Linear el filtro sólo desenfoca: lo
     que apaga son los degradados. */
  filter:blur(6px);scale:1.04}

/* Las velas: Linear no oscurece la pantalla entera —eso apagaría el video—
   sino que pone dos degradados, uno ancho a la izquierda (720 de 1440) para
   que se lea la columna de texto, y uno angosto a la derecha (360). */
.lq__vela{position:absolute;top:0;bottom:0;pointer-events:none}
.lq__vela--izq{left:0;width:60%;
  background:linear-gradient(to right,rgba(8,9,10,.96),rgba(8,9,10,.8) 45%,transparent)}
.lq__vela--der{right:0;width:25%;
  background:linear-gradient(to left,rgba(8,9,10,.7),transparent)}
/* y una base abajo, para la fila de momentos */
/* Sin fila de momentos no hay nada abajo que sostener, y la vela al 52%
   apagaba medio cuadro vacío. */
.lq:not(:has(.lq__momentos))::after{height:30%}
.lq::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  pointer-events:none;
  background:linear-gradient(to top,#08090A 0%,rgba(8,9,10,.86) 22%,transparent)}
/* y una arriba, suave, para el ojal */
.lq::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;
  pointer-events:none;z-index:1;
  background:linear-gradient(rgba(8,9,10,.75),transparent)}

/* El ojal de arriba a la izquierda: en Linear es la marca del ciclo con su
   nombre en dos renglones, a 11px. Acá es la marca de Cardda —invertida, que
   el archivo es gris oscuro y el fondo es negro— y de dónde salió la charla. */
.lq__ojal{position:absolute;top:40px;left:max(24px,calc((100% - 1024px) / 2 + 24px));
  z-index:3;display:flex;align-items:center;gap:14px}
.lq__ojal img{height:16px;width:auto;display:block;filter:invert(1) brightness(1.9)}
.lq__ojal span{padding-left:14px;border-left:1px solid rgba(247,248,248,.22);
  font-size:11px;line-height:14px;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(247,248,248,.62)}

/* Las flechas del carrusel, arriba de la fila y a la izquierda, como Linear.
   El componente ya sabía manejarlas —prevBtn/nextBtn con su `disabled`— pero
   el markup no las traía y el CSS las apagaba con `display:none`. */
.lq__flechas{display:flex;gap:8px;
  padding-left:max(24px,calc((100% - 1024px) / 2 + 24px));margin-bottom:20px}
.lq__flechas .linear-player__nav-btn{display:grid;place-items:center;
  position:static;width:32px;height:32px}

.lq__env{position:absolute;inset:0;display:grid;align-content:center;
  padding:0 max(24px,calc((100% - 1024px) / 2 + 24px))}
.lq__copia{max-width:388px;position:relative;z-index:2}
.lq__tit{margin:0;font-size:40px;line-height:44px;letter-spacing:-.88px;
  font-weight:510;color:#F7F8F8}
.lq__desc{margin:16px 0 0;font-size:15px;line-height:24px;letter-spacing:-.165px;
  color:#8A8F98}
.lq__play{display:inline-flex;align-items:center;gap:10px;margin-top:40px;
  height:40px;padding:0 14px 0 18px;border:0;border-radius:9999px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:510;line-height:40px;
  background:#E5E5E6;color:#08090A;
  transition:background .15s cubic-bezier(.4,0,.2,1)}
.lq__play:hover{background:#fff}
.lq__play:focus-visible{outline:2px solid #F7F8F8;outline-offset:3px}
.lq__kbd{display:grid;place-items:center;width:20px;height:20px;
  border-radius:5px;background:rgba(0,0,0,.08);
  /* line-height:1 obligatorio: el botón declara 40 y una caja de línea de 40
     dentro de un cuadro de 20 empuja la letra fuera del recuadro. */
  font-family:inherit;font-size:12px;line-height:1;font-weight:510;color:#08090A}
.lq__meta{margin:24px 0 0;font-size:12px;line-height:16.8px;color:#8A8F98}
/* Linear pone acá una banda con «Follow» y tres cápsulas de plataforma. Sin
   nada, el bloque de la izquierda queda flaco y el aire hasta las flechas se
   vuelve enorme. Acá va lo único honesto que hay: la charla en YouTube. */
.lq__play{margin-right:12px}
.lq__enlace{display:inline-flex;align-items:center;gap:8px;height:40px;
  padding:0 16px;border-radius:9999px;text-decoration:none;
  background:rgba(255,255,255,.05);color:rgba(247,248,248,.82);
  font-size:14px;font-weight:500;
  transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.lq__enlace:hover{background:rgba(255,255,255,.1);color:#F7F8F8}
.lq__enlace:focus-visible{outline:2px solid #F7F8F8;outline-offset:3px}

.lq__cerrar{position:absolute;top:24px;right:24px;z-index:4;
  display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:0;border-radius:8px;cursor:pointer;
  background:rgba(247,248,248,.05);color:rgba(247,248,248,.65);
  transition:background .15s cubic-bezier(.4,0,.2,1)}
.lq__cerrar:hover{background:rgba(247,248,248,.12);color:#F7F8F8}
.lq__cerrar:focus-visible{outline:2px solid #F7F8F8;outline-offset:2px}

/* La fila de momentos: tarjetas de 140 con póster 16:9, 32 de separación, y la
   activa a 192 —más grande— alineada por ABAJO con las demás, no por el centro
   (en Linear las bases coinciden en y=852 y es lo que las hace ver como una
   fila y no como un escalón). */
.lq__momentos{position:absolute;left:0;right:0;bottom:40px;z-index:2}
/* El mismo margen que la columna de texto: la tarjeta activa arranca en la
   misma izquierda que el título (232 a 1440, igual que Linear). */
.lq__momentos .linear-player__carousel{position:static;width:100%;max-width:100%;
  /* margin-left:0 explícito: el componente trae 24 y eso corría la fila entera,
     así que la tarjeta activa quedaba en x=256 contra los 232 del título — el
     desfase rompía la única línea vertical fuerte de la composición. */
  margin-left:0;
  display:flex;overflow-x:auto;scrollbar-width:none;
  padding:0 max(24px,calc((100% - 1024px) / 2 + 24px));
  /* La tarjeta activa se dibuja con una escala, así que pinta 20px más abajo
     de su caja de maquetación: con `overflow-y:hidden` el título quedaba
     cortado por los descensos. `clip` + margen deja pintar afuera sin habilitar
     desplazamiento vertical. */
  overflow-y:clip;overflow-clip-margin:28px}
.lq__momentos .linear-player__carousel::-webkit-scrollbar{display:none}
.lq__momentos .linear-player__carousel-inner{display:flex;align-items:flex-end;
  gap:32px;transform:none !important;width:max-content}
.lq__momentos .linear-player__card{flex:0 0 140px;width:140px !important;
  transform-origin:0 100%;transition:flex-basis .3s cubic-bezier(.16,1,.3,1),
  width .3s cubic-bezier(.16,1,.3,1)}
.lq__momentos .linear-player__card[data-active="true"]{flex-basis:192px;width:192px !important}
.lq__momentos .linear-player__card img{width:100%;height:79px;object-fit:cover;
  transition:height .3s cubic-bezier(.16,1,.3,1)}
.lq__momentos .linear-player__card[data-active="true"] img{height:108px}
.lq__momentos .linear-player__card[data-active="true"] .linear-player__poster-wrapper{
  outline:1px solid rgba(255,255,255,.28)}
/* El componente sólo dibuja un filete en hover. Sobre un fondo oscuro eso no
   se registra: acá la tarjeta además se levanta y se aclara. */
.lq__momentos .linear-player__card{cursor:pointer}
.lq__momentos .linear-player__card .linear-player__poster-wrapper{
  transition:transform .2s cubic-bezier(.4,0,.2,1),filter .2s cubic-bezier(.4,0,.2,1)}
.lq__momentos .linear-player__card:hover .linear-player__poster-wrapper{
  transform:translateY(-3px);filter:brightness(1.15)}
.lq__momentos .linear-player__card .linear-player__card-title{
  transition:color .2s cubic-bezier(.4,0,.2,1)}
.lq__momentos .linear-player__card:hover .linear-player__card-title{color:#F7F8F8}
.lq__momentos .linear-player__card-label{color:#62666D}
.lq__momentos .linear-player__card-title{color:#D0D6E0;
  font-size:12px;font-weight:590;line-height:16.8px}

/* ── El reproductor, encima de la portada ────────────────────────────────── */
/* En Linear el diálogo NO tapa la portada con un velo opaco: el video ocupa
   1280×720 centrado y lo de atrás se sigue viendo, apenas atenuado. */
[data-lp-dialog]{z-index:92;display:grid;place-items:center;padding:0}
[data-lp-dialog] .linear-player__scrim{background:rgba(8,9,10,.9)}
/* El tamaño se limita por el ANCHO, nunca por el alto. El contenedor tiene
   `aspect-ratio:1280/720` con `overflow:hidden`: un `max-height` no lo encoge,
   le recorta el borde de abajo —a 1440×820 se comía el 15% del cuadro, justo
   donde está el zócalo quemado con el nombre— y encima recorta sólo abajo, no
   centrado. Acotando el ancho, la proporción hace el resto y el cuadro entra
   entero. Los tres términos dan 1280 a 1440×900, que es la medida exacta de
   Linear: 80 de aire a los lados y 90 arriba y abajo. */
[data-lp-dialog] .linear-player__root{max-width:none;
  width:min(1280px, calc(100vw - 160px), calc((100vh - 180px) * 16 / 9))}

/* Degradados de protección. El video tiene planos claros: sin esto, el título
   de arriba y los controles de abajo quedan blanco sobre blanco. Linear pone
   los dos; el componente no traía ninguno. */
[data-lp-dialog] .linear-player__video-container::before,
[data-lp-dialog] .linear-player__video-container::after{
  content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  transition:opacity .2s cubic-bezier(.4,0,.2,1)}
[data-lp-dialog] .linear-player__video-container::before{
  top:0;height:120px;background:linear-gradient(rgba(8,9,10,.55),transparent)}
/* Fuerte a propósito: este video trae un zócalo quemado turquesa brillante
   («9.5 · DE VALDIVIA A SILICON VALLEY») justo donde van los controles. Con
   .62 los botones y el tiempo quedaban blanco sobre turquesa claro. */
[data-lp-dialog] .linear-player__video-container::after{
  bottom:0;height:200px;
  background:linear-gradient(to top,rgba(8,9,10,.92),rgba(8,9,10,.6) 45%,transparent)}
/* con el puntero quieto el componente esconde su chrome: los degradados se van
   con él, si no quedaría una sombra sobre un video sin nada encima */
[data-lp-dialog] .linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover))
  .linear-player__video-container::before,
[data-lp-dialog] .linear-player__root[data-idle="true"]:not(:has(.linear-player__controls:hover))
  .linear-player__video-container::after{opacity:0}

/* Los subtítulos se apoyaban justo sobre el zócalo quemado del video («DE
   VALDIVIA A SILICON VALLEY»), y se leían dos textos encimados. */
/* Los controles, sobre vidrio. Este video trae quemado un zócalo turquesa
   brillante con el nombre del orador justo donde va la barra: el degradado de
   abajo no alcanzaba a apagarlo y el play, el mute y el tiempo quedaban
   blanco sobre turquesa claro, con texto blanco debajo. La píldora de vidrio
   es el mismo recurso que el componente ya usa en sus botones. */
[data-lp-dialog] .linear-player__controls{
  border-radius:12px;background:rgba(8,9,10,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding-block:6px;inset-inline:16px;
  max-inline-size:min(1120px,calc(100% - 32px))}
/* El título de arriba, por lo mismo: cae sobre el cielo claro del plano. */
[data-lp-dialog] .linear-player__video-title{
  padding:4px 10px;border-radius:8px;background:rgba(8,9,10,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* Y los de la esquina de arriba a la derecha: ahí el video pone un recuadro
   con el orador, así que «Ver en YouTube» y la cruz caían sobre imagen viva. */
[data-lp-dialog] .linear-player__video-overlay .linear-player__glass{
  background:rgba(8,9,10,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-lp-dialog] .linear-player__video-overlay .linear-player__glass:hover{
  background:rgba(8,9,10,.72)}

/* A 390 el ancho útil es de 366 y ocho controles no entran: se esconden los
   tres que no hacen falta en un teléfono. */
@media (max-width:700px){
  [data-lp-dialog] .linear-player__rate,
  [data-lp-dialog] [data-lp-pip],
  [data-lp-dialog] [data-lp-captions]{display:none}
}

[data-lp-dialog] .linear-player__captions{bottom:96px}
/* En un cuadro de 206px de alto, 96 de zócalo es media pantalla. */
@media (max-width:700px){ [data-lp-dialog] .linear-player__captions{bottom:52px} }

@media (max-width:900px){
  .lq__env{padding:0 24px;align-content:end;padding-bottom:300px}
  .lq__tit{font-size:26px;line-height:31px;letter-spacing:-.4px}
  .lq__desc{font-size:14px;line-height:22px}
  .lq__vela--izq{width:100%;
    background:linear-gradient(to top,rgba(8,9,10,.95) 40%,rgba(8,9,10,.5))}
  .lq__vela--der{display:none}
  /* 44 y no 24: el título del momento quedaba pegado al borde de abajo, sin
     un pixel de aire, y en un teléfono ahí abajo está la barra del sistema. */
  .lq__momentos{bottom:44px}
  .lq__flechas{margin-bottom:14px}
  .lq__momentos .linear-player__card{flex:0 0 120px;width:120px !important}
  .lq__momentos .linear-player__card img{height:68px}
  .lq__momentos .linear-player__card[data-active="true"]{flex-basis:150px;width:150px !important}
  .lq__momentos .linear-player__card[data-active="true"] img{height:84px}
  [data-lp-dialog] .linear-player__root{width:calc(100vw - 24px)}
}

/* La miniatura del hito se cortaba abajo: el texto del hito vive en una caja
   de alto fijo con overflow oculto, así que una imagen de 16/9 no entraba.
   Se le da su propio alto y se deja que la caja crezca. */
.hito__texto:has(.mini-video){overflow:visible}
.mini-video{max-width:140px}
.mini-video__btn{aspect-ratio:16/9}
.mini-video__btn img,.mini-video__btn video{height:100%;object-fit:cover}

/* El dedo tiene que apuntar al video, y el video cambia de lugar: a la derecha
   en escritorio, arriba del texto en móvil (.creemos__medios{order:-1}). */
/* `.dedo` existe como clase base en el HTML: sin regla propia, el arnés de
   pulcritud la marca como clase huérfana —que es justo el chequeo que atrapa
   los estilos que se borraron sin querer. */
.dedo{font-style:normal}
.dedo--arriba{display:none}
@media (max-width:900px){
  .dedo--lado{display:none}
  .dedo--arriba{display:inline}
}

/* A 390 el hito de 2026 quedaba a 10px de la sección siguiente: es el único
   que lleva miniatura y ahí abajo no hay lugar. Achicarla sale más barato que
   darle 40px de aire de más a los otros diez hitos, que ya tienen 190-240.
   Va al final del archivo a propósito: `.mini-video{max-width:260px}` se
   declara más abajo que el bloque de móvil y con la misma especificidad le
   ganaba, así que el override tiene que ir después. */
@media (max-width:900px){ .mini-video{max-width:140px} }

/* ── El formulario de postulación ───────────────────────────────────────────
   Vive en la propia página de la oferta. Antes el botón sacaba a Dover: había
   que salir del sitio, y esa página repite entera la descripción del cargo con
   sus etiquetas en inglés.

   Sin JavaScript el formulario igual sirve: es un <form> con `action` y
   `method`, y la validación nativa del navegador alcanza. El JavaScript sólo
   mejora los mensajes y evita la recarga.                                    */
.formu{position:relative;max-width:620px;display:grid;gap:16px;
  /* `minmax(0,1fr)` y no `1fr` a secas: una pista de grilla se dimensiona al
     contenido de su ítem más ancho, así que el nombre del archivo sin cortar
     ensanchaba el FORMULARIO ENTERO más allá de la pantalla a 360. */
  grid-template-columns:minmax(0,1fr)}
.formu__par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px}
/* La trampa para robots no se ve, pero no puede ser `display:none`: hay
   rellenadores que ignoran lo que está oculto así y llenan igual. */
/* Fuera de la vista SIN mandarla a -9999px: a 360 esa posición hacía que el
   arnés cazara un desborde horizontal. `clip-path` la esconde sin sacarla del
   flujo de coordenadas, y sigue siendo rellenable por un robot, que es el
   punto. */
.formu__miel{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* Lo mismo que en `.formu`: `.campo` es grilla y sus ítems se dimensionan al
   contenido. Sin `minmax(0,1fr)`, la caja del archivo —que lleva un nombre sin
   cortar— se hacía 345 dentro de un campo de 312 y desbordaba la pantalla. */
.campo{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;min-width:0}
.campo label{font-size:14px;font-weight:500;line-height:20px;color:var(--tinta)}
.campo__opt{font-weight:400;color:var(--tinta-3)}
.campo{gap:4px}
/* Subrayado y no caja, como en fintoc.com/careers. Su campo mide 48 de alto,
   casi lo mismo que medía el nuestro: lo que lo hace ver compacto no es el
   tamaño sino que no lleva marco. Ocho cajas apiladas en un cuadro de 640 pesan
   como un formulario de banco; ocho líneas, no.

   16px de texto igual: abajo de 16, Safari en iOS hace zoom al enfocar y deja
   la página corrida a lo ancho. */
.campo input,.campo textarea{
  font:inherit;font-size:16px;line-height:24px;color:var(--tinta);
  padding:6px 0;border:0;border-bottom:1px solid var(--filete);border-radius:0;
  background:none;width:100%;
  transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.campo textarea{resize:vertical;min-height:56px;padding-top:2px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo input:hover,.campo textarea:hover{border-bottom-color:rgba(9,9,11,.32)}
/* El foco engrosa la línea en vez de dibujar un halo: con el marco afuera, un
   halo flotaría sobre nada. */
.campo input:focus,.campo textarea:focus{outline:none;
  border-bottom-color:var(--tinta);box-shadow:0 1px 0 0 var(--tinta)}
.campo__error{font-size:13px;line-height:18px;color:#B42318;min-height:0}
.campo[data-mal] input,.campo[data-mal] textarea{border-bottom-color:#B42318}
.campo[data-mal] input:focus,.campo[data-mal] textarea:focus{
  box-shadow:0 1px 0 0 #B42318}

/* El campo de archivo nativo no se puede estilar, así que se tapa con uno
   dibujado y se deja el real encima, invisible pero clickeable: así el clic y
   el foco del teclado siguen siendo los del navegador. */
.archivo{position:relative;display:block}
/* El input real va invisible pero sigue siendo un control del navegador: sin
   esto conserva su borde gris de 2px y su Arial, que no son de la página.
   Invisible no es lo mismo que inexistente. */
.archivo input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  border:0;padding:0;font:inherit}
.formu__miel input{border:0;font:inherit}
.archivo__falso{display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 7px;border:1px dashed var(--filete);border-radius:8px;
  background:#fff;
  transition:border-color .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1)}
/* El borde punteado prometía que se podía arrastrar y no se podía: eso es peor
   que no dibujarlo. Ahora escucha, y lo dice mientras el archivo está encima. */
.archivo[data-encima] .archivo__falso{border-color:var(--tinta);background:var(--fondo-hondo)}
.archivo__quitar{position:absolute;right:10px;top:50%;translate:0 -50%;z-index:1;
  padding:4px 8px;border:0;border-radius:6px;cursor:pointer;
  font:inherit;font-size:14px;line-height:20px;color:var(--tinta-2);
  background:var(--fondo-hondo)}
.archivo__quitar:hover{color:var(--tinta)}
.archivo input:hover + .archivo__falso{border-color:rgba(9,9,11,.32)}
.archivo input:focus-visible + .archivo__falso{border-color:var(--tinta);
  box-shadow:0 0 0 3px rgba(9,9,11,.08)}
.archivo__boton{flex:0 0 auto;padding:4px 10px;border-radius:6px;
  background:var(--fondo-hondo);font-size:14px;font-weight:500;line-height:20px}
/* `min-width:0` obligatorio: un ítem flex no se encoge por debajo de su
   contenido, y con `white-space:nowrap` el nombre del archivo empujaba la caja
   más allá del ancho de la pantalla a 360. El recorte con puntos suspensivos
   sólo funciona si además se le permite achicarse. */
.archivo__nombre{min-width:0;font-size:15px;line-height:22px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archivo__nombre[data-puesto]{color:var(--tinta)}

.formu__pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.formu__pie .boton{min-width:200px;justify-content:center}
.formu__nota{font-size:14px;line-height:20px;color:var(--tinta-2)}
.formu[data-enviando] .boton{opacity:.6;pointer-events:none}
/* Es el estado más grave y era el más chico: un párrafo gris al pie. Con caja
   propia se lee como lo que es, un plan B, y no como una nota al margen. */
.formu__respaldo{margin:0;padding:16px 20px;border-radius:12px;
  border:1px solid var(--filete);background:var(--caja);
  font-size:15px;line-height:24px;color:var(--tinta-2)}
.formu__respaldo a{color:var(--tinta);font-weight:500}

/* El acuse de recibo reemplaza al formulario: dejarlo debajo obliga a
   scrollear para saber si salió. */
.formu--listo{position:relative;overflow:hidden;display:grid;gap:8px;justify-items:start;
  padding:32px;border:1px solid var(--filete);border-radius:16px;
  background:var(--caja);max-width:620px}
/* El confeti se dibuja sobre la caja entera y no recibe clics. */
.formu__confeti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.formu--listo > *:not(.formu__confeti){position:relative;z-index:1}
.formu__pregunta{margin:8px 0 0;font-size:14px;line-height:22px;color:var(--tinta-2)}
.formu__pregunta a{color:var(--tinta);font-weight:500}
.formu--listo:focus{outline:none}
.formu--listo dl{display:grid;gap:4px;margin:12px 0 0;font-size:15px;line-height:24px}
.formu--listo dt{color:var(--tinta-3)}
.formu--listo dd{margin:0;color:var(--tinta)}
.formu--listo h3{margin:0;font-size:20px;line-height:28px}
.formu--listo p{margin:0;font-size:15px;line-height:24px;color:var(--tinta-2)}

@media (max-width:900px){
  .formu__par{grid-template-columns:1fr}
  .formu__pie .boton{width:100%}
}

/* ── El panel de la oferta: postular y lo que te llevas ─────────────────────
   La estructura es la de fintoc.com/careers: una tarjeta con el botón y los
   datos duros, y debajo otra con los beneficios. Ver los beneficios al lado
   del botón es lo que hace que el botón valga la pena.                       */
.oferta__cuerpo{align-items:start}
.oferta__lado--extra{position:static}
.oferta__postular{display:block;margin-bottom:20px}
.oferta__postular .boton{width:100%;justify-content:center}

.ventajas{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ventajas li{display:flex;align-items:center;gap:10px;
  font-size:14px;line-height:20px;color:var(--tinta-2)}
.ventajas__ico{flex:0 0 auto;width:18px;height:18px;color:var(--tinta-3)}
/* Botón y no un enlace subrayado: es la salida de la tarjeta y compite con
   nada, así que puede verse como lo que es. */
.ventajas__mas{width:100%;margin-top:20px}

/* ── El cuadro de postulación ───────────────────────────────────────────────
   Elemento nativo: el foco atrapado, Escape y el telón vienen del navegador.
   Lo único que hay que hacer a mano es el aspecto y la entrada.              */
.postu{width:min(640px,calc(100vw - 32px));max-height:min(880px,calc(100vh - 32px));
  padding:0;border:0;border-radius:16px;background:var(--fondo);color:var(--tinta);
  overflow:hidden;box-shadow:0 24px 60px rgba(9,9,11,.22),0 2px 8px rgba(9,9,11,.08)}
.postu::backdrop{background:rgba(9,9,11,.6);backdrop-filter:blur(3px)}
.postu[open]{animation:postu-entra .28s cubic-bezier(.16,1,.3,1) both}
.postu[open]::backdrop{animation:postu-telon .28s ease both}
@keyframes postu-entra{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes postu-telon{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .postu[open],.postu[open]::backdrop{animation:none}
}

/* La caja es una columna con la cabecera fija y el cuerpo desplazándose: si se
   desplaza el diálogo entero, el título y la cruz se van de la pantalla justo
   cuando más se necesitan. */
.postu__caja{display:flex;flex-direction:column;max-height:inherit}
.postu__enc{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 24px;border-bottom:1px solid var(--filete);background:var(--fondo)}
.postu__tit{margin:0;font-size:16px;font-weight:600;line-height:24px}
.postu__cerrar{display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:0;border-radius:8px;cursor:pointer;background:none;color:var(--tinta-2);
  transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}
.postu__cerrar:hover{background:var(--fondo-hondo);color:var(--tinta)}
.postu__cuerpo{flex:1 1 auto;overflow-y:auto;padding:20px 24px 24px}

/* Dentro del cuadro el formulario ya no compite con nada: ocupa todo el ancho
   y pierde el tope de 620 que tenía cuando vivía en la página. */
.postu .formu{max-width:none}
.formu__regla{margin:0;font-size:14px;line-height:20px;color:var(--tinta-3)}
/* Los ojales que separan los dos bloques, medidos en el cuadro de Fintoc:
   12px con 1.44 de espaciado, en el gris más claro. */
.formu__ojal{margin:4px 0 0;font-size:12px;font-weight:500;line-height:16px;
  letter-spacing:1.44px;text-transform:uppercase;color:var(--tinta-3)}
.formu__ojal:first-of-type{margin-top:0}
.formu__pie .luz{display:block}
.formu__pie .luz .boton{width:100%;justify-content:center}

@media (max-width:900px){
  /* A pantalla chica el cuadro ocupa todo: un diálogo flotante de 640 en un
     teléfono es un diálogo de pantalla completa con esquinas desperdiciadas. */
  .postu{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
}

/* ═══ Carrusel de equipo ═══════════════════════════════════════════════════
   Del componente componentes/carrusel-equipo de ~/Projects/jobs. Réplica de la
   mecánica de ramp.com/careers, medida sobre su DOM: avanza UNA tarjeta, frena
   y espera tres segundos. Sus clases van bajo .carrusel-equipo__* y el
   contenedor es [data-carrusel-equipo], así que no chocan con el carrusel de
   fotos que ya existía. */
/* ── Carrusel de equipo ────────────────────────────────────────────────────────
   Mecánica y medidas tomadas del DOM de ramp.com/careers. Ver README.md.
   Depende de que exista `--pie` en el overlay; lo escribe el JS. */

.carrusel-equipo{position:relative;overflow:hidden;padding:10px 0 14px;
  cursor:grab;touch-action:pan-y pinch-zoom}
.carrusel-equipo[data-arrastrando="si"]{cursor:grabbing}

.carrusel-equipo__via{display:flex;list-style:none;padding:0;margin:0;will-change:transform}
/* El aire entre tarjetas va acá y no en la tarjeta: el carrusel MIDE el paso
   del DOM (offsetLeft de la segunda menos la primera), así que sumarlo al
   contenedor lo deja alineado solo. */
.carrusel-equipo__pieza{flex:0 0 auto;padding-inline:8px}

/* 336×542 = el mismo ratio 0,620 de Ramp, un 6% más chico para que entre más
   aire entre tarjetas y el timeline suba. El texto se escala en la misma
   proporción a propósito: las fotos traen el tercio superior vacío, y un texto
   que no encoge con la tarjeta se le va encima a la persona —ya pasó.
   Las fotos están generadas con ese mismo ratio y con el tercio superior
   vacío para que el texto no caiga sobre la persona. */
.carrusel-equipo__tarjeta{position:relative;height:542px;width:336px;overflow:hidden;
  border-radius:12px;will-change:transform;background:#efece5}
@media(max-width:820px){.carrusel-equipo__tarjeta{height:460px;width:286px}}
@media(max-width:520px){.carrusel-equipo__tarjeta{height:420px;width:260px}}
.carrusel-equipo__tarjeta img{display:block;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none}

/* El texto va ARRIBA sobre la foto, no abajo. display:block, no flex. */
.carrusel-equipo__texto{position:absolute;inset:0;z-index:2;padding:32px;display:block;
  pointer-events:none;opacity:var(--pie,1)}
@media(max-width:820px){.carrusel-equipo__texto{padding:24px}}

/* Píldora del nombre: gris translúcido con desenfoque, letras grises. */
/* El nombre lleva al perfil cuando lo tenemos.

   `pointer-events:auto` es lo que lo hace clickeable: la capa de texto entera
   va en `none` para que se pueda arrastrar el carrusel tomándolo de cualquier
   parte, y eso también apagaba el enlace. */
.carrusel-equipo__nombre--link{text-decoration:none;cursor:pointer;pointer-events:auto;
  display:inline-flex;align-items:center;
  transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1)}
.carrusel-equipo__nombre--link:hover,
.carrusel-equipo__nombre--link:focus-visible{color:#2a251d;background:rgba(33,33,33,.18)}

/* La flecha aparece recién al apuntar: dibujarla siempre convierte cada píldora
   en un botón, y la mayoría está para leerse. El ancho se anima junto con el
   margen para que el nombre no dé un salto al aparecer. */
.carrusel-equipo__ir{flex:none;width:0;margin-left:0;opacity:0;overflow:visible;
  transition:width .18s cubic-bezier(.4,0,.2,1),margin-left .18s cubic-bezier(.4,0,.2,1),
    opacity .18s cubic-bezier(.4,0,.2,1)}
.carrusel-equipo__nombre--link:hover .carrusel-equipo__ir,
.carrusel-equipo__nombre--link:focus-visible .carrusel-equipo__ir{width:11px;margin-left:5px;opacity:1}

.carrusel-equipo__nombre{background:rgba(33,33,33,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:6px;padding:6px;width:fit-content;
  color:rgba(74,66,55,.62);font-size:14px;line-height:20px;font-weight:400}

/* Ramp usa casi negro, pero sobre fotos de fondo gris medio. Nuestras tarjetas
   son beige claro: el mismo negro golpea de más. Va gris cálido. */
.carrusel-equipo__frase{margin:16px 0 0;color:#4a4237;font-size:20px;line-height:24px;
  font-weight:400;letter-spacing:-.012em;text-wrap:pretty}
@media(max-width:820px){.carrusel-equipo__frase{font-size:19px;line-height:23px;margin-top:12px}}