/* Portada de reuniones (noviembre de 2026). Va encima de styles.css, que sigue
   dando el pie, los precios, las preguntas, el vídeo demo, el contacto y la
   newsletter. Titulares en DM Serif Display (OFL, de la misma familia que DM
   Sans, servida desde /fonts); el resto en DM Sans. Las ventanas de la app son
   réplicas en CSS con ejemplos inventados. Prefijo in-. */

@font-face {
  font-family: 'DM Serif Display';
  src: url('/fonts/dm-serif-display-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

body.in {
  --in-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --in-ink: #141412;
  --in-soft: #4A4943;
  --in-dim: #86847C;
  --in-line: rgba(20, 20, 18, 0.12);
  --in-panel: #F7F5F0;
  --in-acc: var(--primary);
  --in-acc-dark: var(--primary-dark);
  --in-tinte: #FDE8DB;
  background: #fff;
  color: var(--in-ink);
}

.in-wrap { max-width: 1216px; margin: 0 auto; padding: 0 24px; }
/* En el móvil, precios, preguntas y pie (que salen de styles.css con --pad, 16 px)
   van al mismo margen que el resto de la página (24 px). */
@media (max-width: 768px) { body.in { --pad: 24px; } }
.in-h1 {
  font-family: var(--in-serif); font-weight: 400; color: var(--in-ink);
  font-size: clamp(3rem, 5.4vw, 5rem); line-height: 0.98; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.in-h2 {
  font-family: var(--in-serif); font-weight: 400; color: var(--in-ink);
  font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.01em;
  margin: 0; text-wrap: balance;
}
.in-h2s {
  font-family: var(--in-serif); font-weight: 400; color: var(--in-ink);
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.005em; margin: 0;
}
.in-h3 { font-family: var(--in-serif); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 1.95rem); line-height: 1.15; margin: 0 0 0.6rem; color: var(--in-ink); }
.in-min { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.78em; color: var(--in-dim); font-variant-numeric: tabular-nums; }

/* Los botones en píldora (.in-pill) y el menú flotante (.in-nav) están en
   styles.css: son los mismos en todas las páginas en español. */

/* ───────── Hero ───────── */
.in-hero { position: relative; overflow: hidden; padding: clamp(8rem, 13vw, 10.5rem) 0 clamp(4rem, 7vw, 6rem); }
.in-hero__wrap { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: 40px; align-items: center; }
.in-nuevo {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: #F3F1EC; color: var(--in-ink); font-size: 0.88rem; text-decoration: none;
}
.in-nuevo__tag { padding: 3px 9px; border-radius: 999px; background: var(--in-tinte); color: var(--in-acc-dark); font-size: 0.75rem; font-weight: 600; }
.in-hero .in-h1 { margin: 28px 0 30px; }
.in-hero__sub { font-size: 1.2rem; line-height: 1.45; color: var(--in-ink); margin: 0 0 32px; }
.in-hero__nota { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 0.88rem; color: var(--in-dim); }
.in-hero__alt { margin: 8px 0 0; font-size: 0.82rem; color: var(--in-dim); }
.in-hero__alt a { color: var(--in-dim); text-decoration: underline; text-underline-offset: 3px; }
.in-hero__alt a:hover { color: var(--in-ink); }

.in-hero__visual { position: relative; min-height: 600px; }
/* Fondo abstracto: un bloque naranja con trama de puntos y otro de papel rayado. */
.in-collage { position: absolute; inset: 0; pointer-events: none; }
.in-collage__a {
  position: absolute; top: -30px; right: -220px; width: 78%; height: 112%;
  background:
    radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(120% 90% at 20% 25%, #FFC29E 0%, #F07A3A 38%, #C4440B 70%, #6E2606 100%);
}
.in-collage__b {
  position: absolute; top: 60px; left: 0; width: 26%; height: 78%;
  background: repeating-linear-gradient(0deg, rgba(20, 20, 18, 0.08) 0 1px, transparent 1px 22px), #F4DCCB;
}
.in-ventana {
  position: relative; background: var(--in-panel); border: 1px solid rgba(20, 20, 18, 0.08); border-radius: 14px;
  box-shadow: 0 40px 70px -30px rgba(20, 20, 18, 0.35), 0 2px 6px rgba(20, 20, 18, 0.05);
  padding: 18px 28px 26px; color: var(--in-ink);
}
.in-ventana__puntos { display: flex; gap: 8px; }
.in-ventana__puntos i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.in-ventana__puntos i:nth-child(2) { background: #FEBC2E; }
.in-ventana__puntos i:nth-child(3) { background: #28C840; }
.in-ventana__titulo { font-family: var(--in-serif); font-size: 1.8rem; line-height: 1.15; margin: 22px 0 14px; }
.in-ventana__mini { margin: 16px 0 14px; font-size: 0.8rem; font-weight: 600; color: var(--in-dim); }
.in-hero__ventana { margin: 0 0 0 14%; min-height: 520px; }
.in-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.in-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--in-line); border-radius: 999px; font-size: 0.8rem; color: var(--in-soft); }
.in-chips .in-chips__exp { background: #fff; }
.in-nota { margin-top: 18px; font-size: 0.9rem; }
.in-nota__t { margin: 16px 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--in-dim); }
.in-nota ul { margin: 0; padding-left: 18px; }
.in-nota li { line-height: 1.5; color: var(--in-ink); }
.in-nota li ul { margin-top: 2px; }
.in-nota li li { color: var(--in-soft); list-style: '·  '; }
.in-revisar { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; color: #92400E; background: rgba(251, 191, 36, 0.24); }
.in-estado {
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--in-line); box-shadow: 0 6px 18px -10px rgba(20, 20, 18, 0.3);
  font-size: 0.82rem; color: var(--in-soft);
}
/* El resumen ya hecho: el correo al cliente en una línea y, al pie, los dos botones
   de la app, a la izquierda (a la derecha va la videollamada). */
.in-correo { margin: 0; max-width: calc(100% - 120px); font-size: 0.88rem; line-height: 1.45; color: var(--in-soft); }
.in-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: calc(100% - 120px); }
.in-acciones .in-boton-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--in-ink); }
.in-giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--in-acc); border-right-color: transparent; animation: in-giro 0.9s linear infinite; }
@keyframes in-giro { to { transform: rotate(360deg); } }
/* La videollamada, con iniciales en vez de caras. */
.in-llamada {
  position: absolute; right: -34px; bottom: 14px; width: 148px; padding: 6px; border-radius: 14px;
  background: #121211; display: grid; gap: 6px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.6);
}
.in-llamada__tile {
  position: relative; height: 96px; border-radius: 9px; display: grid; place-items: center;
  background: radial-gradient(90% 90% at 50% 30%, #6B5C52, #2C2724);
}
.in-llamada__tile--b { background: radial-gradient(90% 90% at 50% 30%, #4E5A63, #22282D); outline: 2px solid rgba(246, 180, 138, 0.85); outline-offset: -2px; }
.in-llamada__ini { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font-family: var(--in-serif); font-size: 1.5rem; color: rgba(255, 255, 255, 0.92); }
.in-llamada__nombre { position: absolute; left: 6px; bottom: 5px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.45); font-size: 0.62rem; font-weight: 500; color: #fff; }
.in-llamada__ctrl { display: flex; justify-content: center; gap: 6px; padding: 2px 0 1px; }
.in-llamada__btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2E2E2C; color: #F3F1EC; }
.in-llamada__ctrl .in-llamada__colgar { width: 34px; border-radius: 999px; background: #E5484D; color: #fff; }
.in-llamada__colgar svg { width: 17px; height: 17px; }

/* ───────── Para quién (banda oscura) ───────── */
.in-para { padding: clamp(4.5rem, 8vw, 6.5rem) 0; background: #1C1C1A; color: #F3F1EC; }
.in-para__titulo { font-family: var(--in-serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; text-align: center; margin: 0 auto 3.2rem; max-width: 26ch; }
/* En una sola línea y centrados: cada perfil sin partir, separados por un «+». */
.in-para__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.6rem; }
.in-para__lista li { position: relative; padding: 0.6rem 0; white-space: nowrap; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: rgba(243, 241, 236, 0.62); }
.in-para__lista li + li::before { content: "+"; position: absolute; left: -1.6rem; top: 50%; transform: translateY(-50%); font-weight: 300; color: rgba(243, 241, 236, 0.25); }

/* ───────── Antes, durante y después ───────── */
/* El titular, centrado; debajo, las pestañas y un solo panel a la vez (los tres
   ocupan la misma celda, así la sección no salta de alto al cambiar). Sin
   JavaScript, los tres paneles seguidos y sin pestañas. */
.in-momentos { padding: clamp(5rem, 9vw, 7rem) 0 clamp(4.5rem, 8vw, 6rem); border-top: 1px solid var(--in-line); }
/* «reuniones» del menú (/#como): el titular, justo debajo del menú, como las
   demás anclas. En escritorio, el script lo cambia para caer con la frase entera. */
.in-momentos { scroll-margin-top: calc(12px - clamp(5rem, 9vw, 7rem)); }
.in-momentos__h2 { max-width: 24ch; margin: 0 auto clamp(2.8rem, 5vw, 4rem); text-align: center; }
/* «ablalo» del titular, con el logo: a la altura de las letras de la serifa. */
/* El logotipo dentro de un titular, en texto: DM Sans extranegrita, minúsculas y
   -0,03em, como .brand-wordmark de la app. Algo más pequeño que la serifa para
   que su altura de x case con la del titular. */
.in-marca { font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: 0.92em; }
/* La frase: «ablalo te acompaña» y, en otra línea, los grupos que se van sumando
   («antes,», «durante», «y después», «de cada reunión.»). flow-root: el margen del titular cuenta en el alto de la capa, que
   el script usa para medir la pista. */
.in-momentos__frase { display: flow-root; }
.in-momentos__linea { display: block; }
.in-palabra { display: inline-block; }
/* En pantallas pequeñas, sola y una vez, al aparecer. */
.in-momentos.con-frase:not(.is-intro) .in-palabra {
  opacity: 0; transform: translateY(0.35em);
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
}
.in-momentos.con-frase:not(.is-intro) .in-palabra:nth-child(2) { transition-delay: 0.22s; }
.in-momentos.con-frase:not(.is-intro) .in-palabra:nth-child(3) { transition-delay: 0.44s; }
.in-momentos.con-frase:not(.is-intro) .in-palabra:nth-child(4) { transition-delay: 0.66s; }
.in-momentos.con-frase.frase-vista:not(.is-intro) .in-palabra { opacity: 1; transform: none; }
/* En escritorio (.is-intro), con la rueda: la frase es una capa de alto cero que
   se queda fija en el centro de la pantalla (el script le da su top), con el
   titular centrado en esa línea. Las palabras, el relevo con las pestañas y el
   ancla de #como (para caer con la frase entera) los pone el script. Sin línea
   encima: la frase sale justo después del hero. */
.in-momentos.is-intro { padding-top: 6rem; border-top: 0; }
/* La línea de la frase se desplaza para centrar lo que ya se ve, y las palabras
   que aún no han entrado (invisibles) quedarían fuera de la página por la
   derecha: se recortan. «clip» y no «hidden», que rompería el sticky. */
.in-momentos.is-intro { overflow-x: clip; }
.in-momentos.is-intro .in-momentos__frase { position: sticky; z-index: 1; height: 0; pointer-events: none; }
.in-momentos.is-intro .in-momentos__h2 {
  max-width: none; margin: 0 auto; transform: translateY(-50%);
  font-size: clamp(2.2rem, 3.3vw, 3rem); line-height: 1.12;
}
.in-momentos.is-intro .in-momentos__linea { white-space: nowrap; }
/* En escritorio, el bloque se queda fijo mientras se baja por la pista (el
   script le da su alto) y la barra de cada pestaña la mueve el scroll. */
.in-momentos.is-scroll .in-momentos__fijo { position: sticky; top: 104px; }
.in-momentos.is-scroll .in-tabs .in-tabs__barra { animation: none; transition: none; }
.in-momentos__grid { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; }
.in-momentos.js-tabs .in-momentos__grid { grid-template-columns: 220px minmax(0, 720px); gap: clamp(2.5rem, 5vw, 4.5rem); }
.in-tabs { display: none; align-self: start; }
.js-tabs .in-tabs { display: grid; }
.in-tabs button {
  position: relative; padding: 12px 0; border: 0; border-bottom: 1px solid var(--in-line); background: none;
  font: inherit; font-size: 0.95rem; text-align: left; color: var(--in-dim); cursor: pointer;
  transition: color var(--dur-quick) var(--ease-out);
}
.in-tabs button:hover, .in-tabs button.on { color: var(--in-ink); }
.in-tabs button:focus-visible { outline: 2px solid var(--in-ink); outline-offset: 2px; border-radius: 4px; }
.in-tabs__barra { position: absolute; left: 0; right: 24px; bottom: -2px; height: 3px; border-radius: 2px; background: var(--in-ink); transform: scaleX(0); transform-origin: left center; }
.in-tabs .on .in-tabs__barra { transform: scaleX(1); }
.in-momentos.is-auto .in-tabs .on .in-tabs__barra { animation: in-avance 7s linear both; }
.in-momentos.is-auto:not(.is-visible) .in-tabs .on .in-tabs__barra { animation-play-state: paused; }
@keyframes in-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.in-momento + .in-momento { margin-top: 4rem; }
.js-tabs .in-momentos__bloques { display: grid; }
.js-tabs .in-momento {
  grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.js-tabs .in-momento.on { visibility: visible; opacity: 1; transition-delay: 0s; }
.in-momento__pregunta { margin: 0 0 10px; font-size: 0.95rem; font-weight: 500; color: var(--in-acc-dark); }
.in-momento > p:not(.in-momento__pregunta) { margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--in-ink); max-width: 31em; }
.in-lamina { position: relative; overflow: hidden; border-radius: 18px; margin-top: 28px; min-height: 360px; padding: 44px 0 0 44px; }
.in-lamina--a { background: radial-gradient(120% 120% at 0% 0%, #FBE1CF 0%, #F4B993 55%, #E98B57 100%); }
.in-lamina--b { background: radial-gradient(120% 120% at 100% 0%, #EFEBE3 0%, #D9D1C2 60%, #BDB19C 100%); }
.in-lamina--c { background: radial-gradient(120% 120% at 0% 100%, #FCEDE2 0%, #F2C9AC 60%, #DC9A70 100%); }
.in-ventana--lamina { border-radius: 14px 0 0 0; border-right: 0; border-bottom: 0; min-height: 316px; box-shadow: 0 30px 60px -30px rgba(20, 20, 18, 0.45); }
.in-ventana--lamina .in-ventana__titulo { font-size: 1.55rem; margin-top: 18px; }
.in-notas p { margin: 0 0 10px; font-size: 0.95rem; }
.in-notas .in-min { margin-right: 10px; }
.in-notas__cursor::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; vertical-align: -0.18em; background: var(--in-ink); animation: in-parpadeo 1.1s steps(1) infinite; }
@keyframes in-parpadeo { 50% { opacity: 0; } }
.in-grabando { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px; border-radius: 999px; background: var(--in-ink); color: #fff; font-size: 0.8rem; }
.in-grabando__punto { width: 8px; height: 8px; border-radius: 50%; background: #FF5A4E; animation: in-latido 1.4s ease-in-out infinite; }
@keyframes in-latido { 50% { opacity: 0.35; } }
.in-cita { margin: 0 0 16px; font-size: 0.82rem; color: #3730A3; }
.in-boton-mini { display: inline-block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--in-line); background: #fff; font-size: 0.78rem; font-weight: 600; color: var(--in-soft); }

/* ───────── Pregúntale a tu expediente (banda de color) ───────── */
.in-memoria { padding: clamp(5rem, 10vw, 8rem) 0; background: #F6CDB3; }
.in-memoria__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.in-memoria__h2 { max-width: 12ch; }
.in-memoria__cta { margin-top: 32px; }
.in-memoria__sub { margin: 26px 0 0; font-size: 1.15rem; line-height: 1.45; max-width: 26em; color: var(--in-ink); }
.in-chat { display: grid; gap: 12px; padding: 26px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgba(110, 38, 6, 0.45); }
.in-chat p { margin: 0; max-width: 86%; padding: 10px 15px; font-size: 0.95rem; line-height: 1.45; }
.in-chat__yo { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--in-ink); color: #fff; }
.in-chat__app { justify-self: start; border-radius: 16px 16px 16px 4px; background: #F3F1EC; color: var(--in-ink); }
.in-chat__sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.in-chat__sugerencias span { padding: 7px 12px; border-radius: 10px; background: var(--in-tinte); color: var(--in-acc-dark); font-size: 0.82rem; font-weight: 500; }
.in-chat__caja { margin-top: 4px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--in-line); color: var(--in-dim); font-size: 0.92rem; }

/* ───────── Bloques: título a la izquierda, texto a la derecha, imagen debajo ───────── */
.in-fila { padding-top: clamp(5rem, 9vw, 7rem); }
/* Dónde caen las anclas del menú (/#privacidad, /#precios, /#demo): el
   contenido de la sección, no su margen en blanco, justo debajo del menú
   flotante (64 px) con un respiro. El navegador suma scroll-padding-top (80)
   y scroll-margin-top; script.js lee el mismo valor al hacer clic. */
.in-fila { scroll-margin-top: calc(12px - clamp(5rem, 9vw, 7rem)); }
body.in .pricing { scroll-margin-top: calc(16px - clamp(4rem, 9vh, 6.5rem)); }
body.in #demo { scroll-margin-top: -80px; }
.in-fila__cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-top: 28px; border-top: 1px solid var(--in-line); margin-bottom: 36px; }
.in-fila__cab .in-h2s { margin-bottom: 26px; }
.in-fila__tag { display: inline-block; margin-bottom: 14px; }
.in-fila__cab > p { margin: 0; font-size: 1.25rem; line-height: 1.45; color: var(--in-ink); max-width: 28em; }
.in-fila__media--dos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.in-fila__media .in-lamina { margin-top: 0; min-height: 380px; }
.in-fila__enlace { color: inherit; text-decoration: none; }
.in-fila__enlace .in-subida__zona { transition: border-color var(--dur-quick) var(--ease-out); }
.in-fila__enlace:hover .in-subida__zona { border-color: var(--in-acc); }
.in-fila__cab .in-fila__texto { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.45; color: var(--in-ink); max-width: 28em; }
.in-fila__mas { font-size: 0.92rem; }
.in-lamina--estrecha { display: grid; place-items: center; padding: 0; }
.in-subida { width: 86%; min-height: 0; padding: 22px; display: grid; gap: 16px; }
.in-subida__sel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #E9E6DF; }
.in-subida__sel span { display: grid; gap: 1px; padding: 9px; border-radius: 9px; text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--in-soft); }
.in-subida__sel small { font-size: 0.72rem; font-weight: 500; color: var(--in-dim); }
.in-subida__sel .on { background: #fff; color: var(--in-ink); box-shadow: 0 1px 3px rgba(20, 20, 18, 0.12); }
.in-subida__zona { display: grid; justify-items: center; gap: 6px; padding: 42px 16px; border: 1.5px dashed rgba(20, 20, 18, 0.22); border-radius: 14px; text-align: center; font-size: 0.85rem; color: var(--in-dim); }
.in-subida__zona svg { color: var(--in-acc); }
.in-subida__zona b { font-size: 1rem; color: var(--in-ink); }
.in-onda { display: grid; justify-items: center; align-content: center; gap: 22px; width: 116px; height: 236px; border-radius: 999px; background: #141412; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.55); }
.in-onda__marca { font-family: var(--in-serif); font-size: 3.4rem; line-height: 1; color: #fff; }
.in-onda__barras { display: flex; align-items: center; gap: 6px; height: 44px; }
.in-onda__barras i { width: 6px; border-radius: 3px; background: var(--in-acc); animation: in-barra 1.2s ease-in-out infinite; }
.in-onda__barras i:nth-child(1) { height: 16px; animation-delay: -0.2s; }
.in-onda__barras i:nth-child(2) { height: 32px; animation-delay: -0.5s; }
.in-onda__barras i:nth-child(3) { height: 44px; animation-delay: -0.1s; }
.in-onda__barras i:nth-child(4) { height: 26px; animation-delay: -0.7s; }
.in-onda__barras i:nth-child(5) { height: 14px; animation-delay: -0.35s; }
@keyframes in-barra { 50% { transform: scaleY(0.45); } }
.in-privado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.in-privado__modo { padding: 30px 32px 32px; border-radius: 18px; background: var(--in-panel); border: 1px solid rgba(20, 20, 18, 0.06); }
.in-privado__modo svg { display: block; margin-bottom: 26px; color: var(--in-ink); }
.in-privado__nombre { margin: 0 0 8px; font-family: var(--in-serif); font-size: 1.65rem; line-height: 1.1; }
.in-privado__modo p:last-child { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--in-soft); }
.in-word { width: 100%; }
.in-word__doc { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 0.85rem; font-weight: 600; color: var(--in-soft); }
.in-word__w { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #185ABD; color: #fff; font-size: 12px; font-weight: 700; }
.in-word__texto { margin: 0; max-width: 30em; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.65; }
.in-cursor { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--in-ink); animation: in-parpadeo 1.1s steps(1) infinite; }
.in-teclas { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; color: rgba(20, 20, 18, 0.55); }
.in-teclas span { padding: 14px 20px; border-radius: 12px; background: #fff; color: var(--in-ink); font-size: 1.1rem; font-weight: 600; box-shadow: 0 4px 0 rgba(20, 20, 18, 0.15), 0 14px 30px -14px rgba(20, 20, 18, 0.4); }

/* ───────── Precios y preguntas: lo de styles.css, con titulares en serifa ───────── */
body.in .pricing { margin-top: clamp(4rem, 8vw, 6rem); }
body.in .pricing h2,
body.in .faq h2 { font-family: var(--in-serif); font-weight: 400; letter-spacing: -0.01em; }
body.in .pricing h2 .accent-text { font-family: inherit; }

/* ───────── Cierre ───────── */
.in-cierre { padding: clamp(6rem, 11vw, 9rem) 0; border-top: 1px solid var(--in-line); }
.in-cierre__h2 { max-width: 15ch; margin-bottom: 40px; }
.in-cierre .in-ctas { max-width: 760px; }
.in-cierre__nota { margin-top: 20px; }

/* ───────── Pantallas pequeñas ───────── */
@media (max-width: 1024px) {
  .in-hero__wrap, .in-memoria__wrap { grid-template-columns: minmax(0, 1fr); }
  .in-hero__visual { min-height: 540px; }
  .in-momentos.js-tabs .in-momentos__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .js-tabs .in-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-tabs button { text-align: center; }
  .in-tabs__barra { right: 0; }
  .in-para__lista { gap: 0.4rem 1.8rem; }
  .in-para__lista li::before { display: none; }
}
@media (max-width: 720px) {
  .in-hero { padding-top: 7rem; }
  .in-hero__sub { font-size: 1.15rem; }
  .in-hero__visual { min-height: 500px; }
  .in-hero__ventana { margin-left: 0; padding: 16px 18px 22px; }
  /* En el móvil la videollamada cuelga por debajo de la ventana: el resumen usa todo
     el ancho y deja abajo su hueco. */
  .in-hero__ventana:has(.in-acciones) { padding-bottom: 150px; }
  .in-correo, .in-acciones { max-width: none; }
  .in-acciones .in-boton-mini { white-space: nowrap; }
  .in-collage__a { right: -60px; width: 80%; }
  .in-llamada { width: 112px; right: -4px; bottom: -34px; }
  .in-llamada__tile { height: 60px; }
  .in-llamada__ini { width: 28px; height: 28px; font-size: 1rem; margin-bottom: 14px; }
  .in-llamada__btn { width: 21px; height: 21px; }
  .in-llamada__btn svg { width: 11px; height: 11px; }
  .in-llamada__ctrl { gap: 4px; }
  .in-llamada__ctrl .in-llamada__colgar { width: 28px; }
  .in-pill--grande { width: 100%; }
  .in-para__lista li { font-size: 1.02rem; }
  .in-lamina { padding: 28px 0 0 22px; min-height: 300px; }
  .in-fila__cab { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .in-fila__media--dos, .in-privado { grid-template-columns: minmax(0, 1fr); }
  .in-tabs__largo { display: none; }
  .in-privado__modo svg { margin-bottom: 16px; }
  .in-fila__media .in-lamina { min-height: 300px; }
  .in-lamina--estrecha { min-height: 240px; }
  .in-fila__media .in-lamina--estrecha { min-height: 240px; }
  .in-subida { width: 94%; }
  .in-privado__modo { padding: 26px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .in-giro, .in-notas__cursor::after, .in-grabando__punto, .in-onda__barras i, .in-cursor, .in-tabs__barra { animation: none; }
  .js-tabs .in-momento { transition: none; }
}

/* ───────── Privacidad: los dos modos y lo que vale para los dos ───────── */
/* Los dos modos, como un díptico: dos mitades pegadas y sin esquinas
   redondeadas, con la «o» en medio. Grafito y seda para lo confidencial; la trama
   de puntos del hero, en melocotón, para la nube. */
.in-modos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 360px; }
.in-modos__lado { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 4vw, 3.2rem); }
.in-modos__lado--local { background: var(--seda-grafito); color: #F3F1EC; }
.in-modos__lado--nube {
  color: var(--in-ink);
  background:
    radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(120% 110% at 85% 10%, #FFE2CF 0%, #FBC09A 45%, #F2995F 100%);
}
.in-modos__lado--nube { padding-left: clamp(3rem, 6vw, 4.5rem); }
.in-modos__dibujo { margin-bottom: auto; opacity: 0.9; }
.in-modos__lado--local .in-modos__dibujo { color: #F6B48A; }
.in-modos__nombre { margin: 3rem 0 0.6rem; font-family: var(--in-serif); font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1; letter-spacing: -0.01em; }
.in-modos__texto { margin: 0; font-size: 1.12rem; line-height: 1.45; opacity: 0.85; }
.in-modos__o {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: #fff; color: var(--in-ink); font-family: var(--in-serif); font-size: 2.3rem; line-height: 1; padding-bottom: 8px;
  box-shadow: 0 10px 30px -12px rgba(20, 20, 18, 0.45);
}
/* Lo que vale para los dos modos: una franja fina pegada al díptico, como su pie. */
.in-garantias {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--in-line); border-top: 0; background: var(--seda-perla);
}
.in-garantias li { display: flex; align-items: center; gap: 12px; padding: 13px 20px; }
.in-garantias li + li { border-left: 1px solid var(--in-line); }
.in-garantias svg { flex: none; width: 18px; height: 18px; color: var(--in-ink); }
.in-garantias li > span { display: grid; gap: 1px; font-size: 0.84rem; line-height: 1.35; color: var(--in-soft); }
.in-garantias b { font-size: 0.88rem; font-weight: 650; color: var(--in-ink); }
.in-garantias a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--in-line); }
.in-garantias a:hover { color: var(--in-ink); text-decoration-color: currentColor; }
@media (max-width: 720px) {
  .in-modos { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .in-modos__lado { min-height: 250px; padding: 28px 24px; }
  .in-modos__lado--nube { padding-left: 24px; }
  .in-modos__lado--local { padding-bottom: 54px; }
  .in-modos__lado--nube { padding-top: 50px; }
  .in-modos__nombre { margin-top: 2rem; }
  .in-modos__o { width: 60px; height: 60px; font-size: 1.9rem; padding-bottom: 6px; }
  .in-garantias { grid-template-columns: minmax(0, 1fr); }
  .in-garantias li { padding: 12px 18px; }
  .in-garantias li + li { border-left: 0; border-top: 1px solid var(--in-line); }
}

/* La web inglesa (/en): «Your matter files, up to date on their own» no cabe en
   12ch y se iba a cuatro líneas; con 14ch se queda en tres, como en español. */
:lang(en) .in-memoria__h2 { max-width: 14ch; }

/* «¿Quieres ver cómo funciona?» con la serifa de los demás titulares de la portada. */
body.in .vdemo h2 { font-family: var(--in-serif); font-weight: 400; letter-spacing: -0.01em; }
/* La etiqueta «Nuevo · Dictado jurídico…» en una sola línea también a 320. */
@media (max-width: 360px) { .in-nuevo { font-size: 0.8rem; gap: 8px; } }