/* iwp-fpage.css — las páginas de funcionalidades con el formato de la portada.
   Orden de carga: iwp-tokens.css → iwp-palette.css → iwp-bundle.css → iwp-home.css → este.

   Orden del usuario (2026-10-02): «las páginas de funcionalidades deben seguir el
   mismo diseño que la home y SuperWeb/AutoRedes». Las fichas tenían su propio
   CSS de página (≈550 líneas en un <style> en cada una, sobre itw-page.css).
   Pasan a escenas del sistema (.iwp-scene, .iwp-card, .iwp-faq, .iwp-steps,
   .iwp-bigstats, .iwp-ba). Aquí vive solo lo que el sistema no trae y piden
   los bloques propios de una ficha: migas, datos clave del hero, respuesta
   corta, bloques de texto largo, capturas, registro tipo terminal, tabla de
   resumen y detalles clave. Mismo color y tipografía que la portada.
   Desde el 2026-10-02 lo cargan también Precios y Comprar (sección al final). */

/* Enlace «Saltar al contenido» que ya llevaban las fichas: solo se ve al tabular. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Hero ---------- */

/* Migas en el lugar del antetítulo: mismo tamaño y mayúsculas que .iwp-scene__eyebrow. */
.itw-crumbs a { color: inherit; text-decoration: none; }
.itw-crumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.itw-crumbs span[aria-hidden] { margin: 0 8px; opacity: .55; }
.itw-crumbs [aria-current] { color: var(--brand); }

/* El h1 de una ficha es más largo que el de la portada: misma escala, una
   pizca menos de máximo para que no pase de tres líneas a 1160px. */
.itw-fhero h1 { font-size: clamp(34px, 5.6vw, 60px); }
.itw-fhero .iwp-scene__lead { max-width: 52ch; }

/* Datos clave de la funcionalidad (era la «maqueta» del hero): fichas en fila,
   con la misma caja que la tira «Lo esencial» de la portada. */
.itw-kv {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
.itw-kv__item {
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.itw-kv__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.itw-kv__k::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #4c56c0, #764ba2); }
.itw-kv__v { display: block; margin-top: 8px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }

/* Rejilla fija por número de datos (3 o 4), para no dejar uno huérfano en tableta. */
.itw-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.itw-kv--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .itw-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-10); }
  .itw-kv--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .itw-kv, .itw-kv--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Vídeo de la ficha (2026-10-02, Importación de imágenes): el mismo patrón que la portada y
   AutoRedes — 16:9 en PC y 4:5 en tableta y móvil (el CSS oculta uno y solo se reproduce el
   visible), mudo al entrar en pantalla y botón de sonido. */
.itw-demo-video { position: relative; margin: 56px auto 0; max-width: 1100px; border-radius: var(--radius-xl, 20px); overflow: hidden; box-shadow: var(--shadow-lift, 0 30px 80px rgba(41,38,27,.14)); background: #f3f4f9; aspect-ratio: 16 / 9; }
.itw-demo-video video { display: block; width: 100%; height: 100%; }
.itw-demo-video__v { display: none !important; }
.itw-demo-video__sound { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(41, 38, 27, .88); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(41, 38, 27, .25); }
.itw-demo-video__sound:hover { background: #29261b; }
.itw-demo-video__sound:focus-visible { outline: 3px solid #667eea; outline-offset: 3px; }
.itw-demo-video__sound svg { width: 20px; height: 20px; flex: none; }
.itw-demo-video__sound .is-on, .itw-demo-video__sound[aria-pressed="true"] .is-off { display: none; }
.itw-demo-video__sound[aria-pressed="true"] .is-on { display: block; }
@media (max-width: 640px) { .itw-demo-video__sound { right: 12px; bottom: 12px; height: 40px; padding: 0 14px; font-size: 13px; } }
@media (max-width: 1024px) {
  .itw-demo-video { aspect-ratio: 4 / 5; max-width: 560px; max-width: min(560px, 64svh); }
  .itw-demo-video__h { display: none !important; }
  .itw-demo-video__v { display: block !important; }
}
@media (max-width: 640px) { .itw-demo-video { margin-top: 32px; border-radius: var(--radius-lg, 14px); } }

/* --raised (2026-10-02, Importación de imágenes): los subtítulos de ESTE vídeo van pegados al
   borde inferior y casi de lado a lado, y el botón en su sitio de siempre tapaba el final de casi
   todos en móvil. Se sube por encima de esa franja (en % del alto del vídeo, para que el hueco sea
   el mismo en cualquier ancho) y en 4:5 queda solo el icono: la píldora con texto tapaba el aviso
   «404 · imagen no encontrada» y las fotos nuevas. El texto sigue siendo el nombre accesible y el
   title. El anillo claro lo separa del cierre azul marino. Elegido por un panel de 4 jueces sobre
   capturas reales y medido fotograma a fotograma; la portada y AutoRedes no lo usan. */
.itw-demo-video--raised .itw-demo-video__sound { bottom: 11%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 20px rgba(41, 38, 27, .25); }
@media (max-width: 1024px) {
  .itw-demo-video--raised .itw-demo-video__sound { bottom: 13.5%; width: 44px; padding: 0; justify-content: center; }
  .itw-demo-video--raised .itw-demo-video__sound span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@media (max-width: 640px) {
  .itw-demo-video--raised .itw-demo-video__sound { width: 40px; }
}

/* ---------- Respuesta corta ---------- */

.itw-answer { max-width: 900px; margin: 0 auto; text-align: center; }
/* «Respuesta corta» es el h2 de la escena (orden de titulares h1 → h2 → h3) pero se ve
   como antetítulo: gana a la regla de titulares de iwp-home.css (.iwp-scene h2). */
.iwp-scene .itw-answer__label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 1.4px; text-wrap: wrap; }
.itw-answer__text { margin: 0; color: var(--ink); text-wrap: pretty; }
.itw-answer__text b, .itw-answer__text strong { font-weight: 700; }

/* ---------- Bloques de texto (titular a un lado, texto al otro) ---------- */

.itw-prose {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16);
  align-items: start;
}
.itw-prose__head h2 { margin: 0; color: var(--ink); text-align: left; }
.itw-prose__head h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: var(--space-5);
  border-radius: 4px;
  background: linear-gradient(90deg, #4c56c0, #764ba2);
}
@media (min-width: 981px) {
  .itw-prose__head { position: sticky; top: 112px; }
}

.itw-text { display: grid; gap: var(--space-5); color: var(--ink-muted); }
.itw-text > * { margin: 0; }
.itw-text strong, .itw-text b { color: var(--ink); font-weight: 700; }
.itw-text a:not(.iwp-btn):not(.iwp-textlink) { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
.itw-text code, .iwp-faq__a code {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-brand);
  color: var(--brand);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .9em;
}
.itw-text .iwp-list li { font-size: inherit; line-height: inherit; }

@media (max-width: 980px) {
  .itw-prose { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* Bloque partido con imagen o registro (como las escenas partidas de la portada). */
.itw-split { align-items: center; }
.itw-split h2 { margin: 0; color: var(--ink); }
.itw-split .itw-text { margin-top: var(--space-6); }
.iwp-scene--night .itw-split h2 { color: var(--on-ink); }
.iwp-scene--night .itw-text { color: var(--on-ink-muted); }
.iwp-scene--night .itw-text strong, .iwp-scene--night .itw-text b { color: var(--on-ink); }
.iwp-scene--night .itw-text a:not(.iwp-btn):not(.iwp-textlink) { color: #aab6f2; }
/* La lista del sistema da por hecho fondo claro (texto --ink-muted): sobre la
   escena nocturna se queda en 2,4:1. Con --on-ink-muted pasa a 7:1. */
.iwp-scene--night .iwp-list li { color: var(--on-ink-muted); }
.iwp-scene--night .iwp-list li strong, .iwp-scene--night .iwp-list li b { color: var(--on-ink); }

/* ---------- Capturas y fotos ---------- */

.itw-shot { margin: 0; }
.itw-shot__frame {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}
.itw-shot__frame img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.itw-shot figcaption,
.itw-photo figcaption { margin-top: var(--space-4); font-size: 14px; line-height: 21px; color: var(--ink-subtle); }
.itw-shot figcaption b,
.itw-photo figcaption b,
.iwp-ba__caption b { color: var(--ink); font-weight: 700; }
.itw-shot--wide { max-width: 1000px; margin: var(--space-16) auto 0; text-align: center; }
.itw-shot--wide figcaption { max-width: 70ch; margin-inline: auto; }

.itw-photo { margin: 0; justify-self: center; width: 100%; max-width: 520px; }
.itw-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}

.itw-pair { margin-top: var(--space-16); }
.itw-pair .iwp-ba__frame { background: var(--surface); }

/* ---------- Registro tipo terminal ---------- */

.itw-term {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.itw-term__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}
.itw-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d9; }
.itw-term__bar b { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.itw-term__body {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  /* Las líneas largas (el título SEO de ejemplo) se parten en vez de esconderse a la derecha. */
  overflow-wrap: anywhere;
}
.itw-term__body span { color: var(--brand); }
.iwp-scene--night .panel-light { max-width: 520px; width: 100%; justify-self: center; }

@media (max-width: 600px) {
  .itw-term__body { padding: var(--space-4); font-size: 12.5px; }
}

/* ---------- Tabla de resumen ---------- */

.itw-spec-card { padding: 0; overflow: hidden; }
.itw-spec { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.55; }
.itw-spec th, .itw-spec td { padding: var(--space-4) var(--space-6); text-align: left; vertical-align: top; }
.itw-spec tr + tr th, .itw-spec tr + tr td { border-top: 1px solid var(--line); }
.itw-spec th { width: 38%; font-weight: 700; color: var(--ink); background: var(--surface-sunken); }
.itw-spec td { color: var(--ink-muted); }
.itw-spec thead th { background: var(--surface-brand); color: var(--brand); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }

@media (max-width: 600px) {
  .itw-spec, .itw-spec tbody, .itw-spec tr, .itw-spec th, .itw-spec td { display: block; width: auto; }
  .itw-spec th { padding-bottom: var(--space-2); }
  .itw-spec td { padding-top: var(--space-2); }
  .itw-spec tr + tr td { border-top: 0; }
}

/* ---------- Detalles clave ---------- */

.itw-keys { margin-top: var(--space-16); }
.itw-keys .iwp-bigstat__n { display: block; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; color: var(--brand); }
/* Cuando el dato es una palabra («Se detecta solo») y no una cifra, a 64px parte
   en dos líneas y descuadra la fila: baja a la escala de un titular. */
.itw-keys .itw-keys__n--text { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.itw-keys__label {
  display: block;
  margin-top: var(--space-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
}
.itw-keys .iwp-bigstat__t { display: block; max-width: 34ch; margin: var(--space-3) auto 0; color: var(--ink-muted); }

/* ---------- FAQ, pasos y enlaces ---------- */

.itw-faq { max-width: 860px; margin: 56px auto 0; }
.itw-steps { margin-top: 64px; }
.itw-steps .iwp-step { scroll-margin-top: 120px; }
.itw-steps .iwp-step:target { border-top-color: var(--brand); }

.itw-next { margin-top: 64px; }
.itw-next .iwp-card { position: relative; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.itw-next .iwp-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
.itw-next .iwp-card__title a { color: inherit; text-decoration: none; }
.itw-next .iwp-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.itw-next .iwp-card__title a:focus-visible { outline: none; }
.itw-next .iwp-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.itw-more { margin: 40px 0 0; text-align: center; }

/* Tarjetas de la página Funcionalidades: el enlace «en detalle» al pie. */
.itw-feat .iwp-card { display: flex; flex-direction: column; }
/* Aquí el título de cada funcionalidad es h2 (lo único que cuelga del h1), con el
   tamaño de tarjeta y no el de titular de escena. */
.iwp-scene .itw-feat .iwp-card__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.3px; text-wrap: wrap; }
.itw-feat .iwp-card__text { flex: 1; }
.itw-feat .iwp-textlink { align-self: flex-start; margin-top: var(--space-4); padding-left: 0; }

/* Marca de cada tema (H, RH...) en el sitio del icono. */
.itw-mark { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }

/* Lista de ejemplo sobre tarjeta (página Funcionalidades, categorías). */
.itw-card-list { align-self: center; }
.itw-card-list .iwp-list li { font-size: 16px; line-height: 25px; }

/* Cierre: «Pago único · Instalación asistida opcional». */
.itw-cta-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--space-6) 0 0; font-size: 14px; color: var(--on-ink-muted); }

/* ---------- Precios y Comprar (2026-10-02) ----------
   Mismo formato que las fichas (generador: _fuentes/precios-comprar/gen_pc.py). */

/* Texto solo para lectores de pantalla («Comprar el plan Básico»). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Precios: la tabla de planes de la portada (.iwp-plans) con los textos de Precios, más
   largos («3 idiomas, con el texto de Inmovilla»): columnas de texto algo más anchas. El
   nombre de cada plan es un h2 y no debe heredar la escala de los titulares de escena. */
.itw-plans { margin-top: 64px; text-align: left; scroll-margin-top: 120px; }
.itw-plans .iwp-plans__head,
.itw-plans .iwp-plan { grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1.25fr) minmax(0, 1.15fr) 132px 172px; }
.iwp-scene .itw-plan__h { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.itw-plans .iwp-plan__name { flex-wrap: wrap; }
.itw-plans .iwp-plan__cell { line-height: 22px; }
@media (max-width: 980px) {
  .itw-plans .iwp-plans__head,
  .itw-plans .iwp-plan { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Lo que trae el plan Personalizado además del plugin. */
.itw-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; margin-top: var(--space-6); text-align: left; }
.itw-custom__head .iwp-scene__eyebrow { display: block; margin-bottom: var(--space-2); }
.itw-custom__head h3 { margin: 0; color: var(--ink); }
.itw-custom__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
@media (max-width: 980px) {
  .itw-custom { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 640px) {
  .itw-custom { padding: var(--space-6); }
  .itw-custom__list { grid-template-columns: minmax(0, 1fr); }
}

.itw-plans-foot { max-width: 62ch; margin: 40px auto 0; text-align: center; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.itw-plans-foot p { margin: 0 0 12px; }
.itw-plans-foot strong { color: var(--ink); }

/* «Esto va incluido en todos los planes»: tres tarjetas con su lista. */
.itw-incl { margin-top: 64px; text-align: left; }
.itw-incl .iwp-card__title { margin-bottom: var(--space-5); }

/* Comprar: columna de contacto + tarjeta con el formulario. */
.itw-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; margin-top: 64px; text-align: left; }
@media (max-width: 980px) {
  .itw-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
}
.iwp-scene .itw-contact__title { margin: 0; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.itw-contact__lead { margin: var(--space-5) 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.itw-contact-list { list-style: none; margin: var(--space-8) 0; padding: 0; display: grid; gap: 12px; }
.itw-contact-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.itw-contact-item__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-brand); color: var(--brand); }
.itw-contact-item__icon svg { width: 20px; height: 20px; }
.itw-contact-item__k { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-subtle); }
.itw-contact-item__v { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.itw-contact-item__v:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
/* En móvil, que el correo quepa en una línea (a 360 px sobraban unos 10 px). */
@media (max-width: 640px) {
  .itw-contact-item { gap: 12px; padding: 14px 12px; }
  .itw-contact-item__icon { width: 36px; height: 36px; }
  .itw-contact-item__v { font-size: 15px; }
}

.itw-form-card { display: flex; flex-direction: column; gap: 18px; }
.iwp-scene .itw-form-card__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.itw-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) {
  .itw-form-card { padding: var(--space-6); }
  .itw-form__grid { grid-template-columns: minmax(0, 1fr); }
}
.itw-field { display: flex; flex-direction: column; gap: 8px; }
.itw-field--full { margin-top: 16px; }
.itw-field label { font-size: 14px; font-weight: 600; color: var(--ink); }
/* 16px en los campos: con menos, Safari en iPhone amplía la página al tocarlos. */
.itw-field input,
.itw-field select,
.itw-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--line-strong); border-radius: var(--radius-md); transition: border-color .18s ease, box-shadow .18s ease; }
.itw-field textarea { min-height: 120px; resize: vertical; }
.itw-field input:focus,
.itw-field select:focus,
.itw-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(76, 86, 192, .22); }
.itw-field input::placeholder,
.itw-field textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.itw-form__captcha { margin-top: 18px; }
.itw-form__submit { margin-top: 18px; }
.itw-form__note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-subtle); }
.itw-form-msg { display: none; padding: 14px 16px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; line-height: 1.5; }
.itw-form-msg.is-visible { display: block; }
.itw-form-msg--ok { background: var(--surface-mint); color: var(--mint-ink); }
.itw-form-msg--error { background: #fdeaea; color: #9b1c1c; }

@media (prefers-reduced-motion: reduce) {
  .itw-next .iwp-card:hover { transform: none; }
}

/* Panel de control (2026-10-10): capturas reales del plugin. */
.itw-panel-hero { margin-top: var(--space-12); }
.itw-split .itw-shot { margin: 0; justify-self: center; width: 100%; max-width: 600px; min-width: 0; }
.itw-split .itw-shot__frame { width: 100%; padding: var(--space-3); }
.itw-panel-grid .itw-shot__frame { width: 100%; padding: var(--space-3); }
.itw-panel-grid .itw-shot { min-width: 0; }
.itw-phones { margin-top: var(--space-12); align-items: start; }
.itw-shot--phone { max-width: 300px; margin-inline: auto; min-width: 0; }
.itw-shot--phone .itw-shot__frame { width: 100%; padding: var(--space-2); border-radius: 28px; background: var(--surface-ink); border-color: var(--line-on-ink); }
.itw-shot--phone img { width: 100%; height: 560px; object-fit: cover; object-position: top; border-radius: 20px; }
.iwp-scene--night .itw-shot figcaption { color: var(--on-ink-muted); text-align: center; }
.iwp-scene--night .itw-shot figcaption b { color: var(--on-ink); }
@media (max-width: 720px) { .itw-shot--phone img { height: 460px; } }