/* ============================================================================
   SPICA STUDIO · V6 · SOLUTION PRO (r14, 1-sep-2026)
   Plantilla de las tres hojas de la Specialty 02 (2.1, 2.2, 2.3). Carga despues
   de demos/pro.css y antes de responsive.css, asi que manda sobre tokens, base,
   sections y demos SOLO en estas tres paginas. Ningun token se redefine: lo que
   empieza por --pro- es local de la plantilla.

   Lenguaje: LA SALA OSCURA. --slate de punta a punta, un solo acento (teal;
   --teal-bright para texto chico sobre slate, 5.11:1) y --teal-vivid SOLO en la
   banda del modelo de entrega (P3), que es la unica superficie a sangre de la
   hoja. Es la unica pieza del sitio donde Geist Mono lleva los TITULARES DE
   SECCION (.pro-title: mayusculas por CSS, tracking 0.12em, peso 500). El display
   del hero sigue en Archivo 800; los nombres de feature van en Geist 400.

   Cero pines, cero cortinas, cero video propio salvo la feature con clip que
   gobierna js/media-io.js. Grilla de lineas (nunca puntos) solo en el hero.
   ========================================================================== */

/* ============================================================================
   0 · SUPERFICIE Y TIPOS SOBRE OSCURO
   ========================================================================== */
body.pro {
  background: var(--slate);
  color: var(--paper);
}
.pro ::selection { background: var(--teal-bright); color: var(--ink); }
/* un solo acento en la hoja: el anillo de foco tambien es teal (5.11:1 sobre slate) */
.pro :focus-visible { outline-color: var(--teal-bright); }

.pro .kicker { color: rgba(246, 245, 241, 0.65); }
.pro .kicker .kicker__num { color: var(--teal-bright); }
.pro .display, .pro .h2, .pro .h3 { color: var(--paper); }
.pro .lead { color: rgba(246, 245, 241, 0.78); }

/* el titular mono de seccion: la diferencia "pro" */
.pro-title {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}

/* remedio C35 sin media query: ningun hijo de grilla impone su min-content */
.pro-cards > *,
.pro-feat__head > *,
.pro-delivery__grid > *,
.pro-ba__grid > *,
.pro-running__grid > *,
.pro-links__grid > *,
.pro-card > *,
.pro-running__card > *,
.pro-feat__ui > * { min-width: 0; }

/* ---- botones sobre slate ---------------------------------------------------
   El primario negro del sistema desaparece sobre slate: aqui la pastilla es
   papel con tinta y el agua es teal (papel sobre teal 4.53:1). El label cruza
   de tinta a papel de golpe a los 210ms, cuando la ola ya cubre ~85% del texto
   (misma receta que .door-card--violet en sections.css). */
.pro .btn--primary {
  background: var(--paper);
  color: var(--ink);
  transition: color 0.01s step-end 0.21s;
}
.pro .btn--primary::before,
.pro .btn--primary::after { background: var(--teal); }
.pro .btn--primary:hover,
.pro .btn--primary:focus-visible { color: var(--paper); }
.pro .btn--ghost {
  border-color: rgba(246, 245, 241, 0.34);
  color: var(--paper);
}
.pro .btn--ghost::before,
.pro .btn--ghost::after { background: var(--paper); }
.pro .btn--ghost:hover,
.pro .btn--ghost:focus-visible { color: var(--ink); border-color: var(--paper); }
@media (hover: none) {
  .pro .btn--primary:hover { color: var(--ink); }
  .pro .btn--ghost:hover { color: var(--paper); border-color: rgba(246, 245, 241, 0.34); }
}

/* chips sobre slate (el "US only" del kicker de 2.1 y de los cross-links).
   Sin tinte de fondo y con el texto en papel (r14 correccion P2-3): el chip
   cae sobre slate (kicker) y sobre slate raised (tarjetas de cross-link), y
   --teal-bright como texto solo pasa AA sobre slate (5.11) pero no sobre
   raised (4.36); con el tinte al 14 % bajaba a 4.11. Papel al 86 % mide 9.5
   sobre slate y 8.1 sobre raised; el teal se queda en el borde. Misma receta
   que .dm-chip en demos/pro.css. Una sola regla, asi el chip se ve igual en
   toda la hoja. */
.pro main .chip {
  background: transparent;
  border-color: var(--line-on-dark);
  color: rgba(246, 245, 241, 0.86);
}
.pro main .chip--us {
  background: transparent;
  border-color: var(--teal-bright);
  color: rgba(246, 245, 241, 0.86);
}

/* la escala por montaje: cada slot la declara en data-scale y la entrada la
   copia a --s. Misma receta que demos/pro.css para las pro-*: el .demo compone
   a 100% / s y se ve a 100% del slot, centrado. Se aplica al .demo, nunca a un
   ancestro, para que fakeCursor mida bien (PLAN 6). Asi las svc-* de 2.3
   (svc-fit, svc-where a 0,72) entran en la tarjeta igual que las pro-*. */
.pro .demo[data-scale] {
  --s: 1;
  width: calc(100% / var(--s));
  margin-inline: calc((100% - 100% / var(--s)) / 2);
  transform: scale(var(--s));
  transform-origin: center;
}

/* ============================================================================
   1 · P0 · HERO · slate + grilla de lineas cada 96px + orbita
   ========================================================================== */
.pro-hero {
  position: relative;
  padding: clamp(8.5rem, 20vh, 12rem) 0 var(--rhythm-half);
  overflow: hidden;
}
/* la grilla del ref: lineas, no puntos; se apaga hacia abajo para que la
   orbita y el titular no compitan con ella */
.pro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line-on-dark) 50%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line-on-dark) 50%, transparent) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.55) 62%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.55) 62%, transparent 96%);
}
.pro-hero > * { position: relative; }
.pro-hero__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  text-align: center;
}
.pro-hero__copy > * { max-width: 54rem; }
.pro-hero .lead { max-width: 52ch; }
.pro-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

/* la orbita: 720 x 560, la escena del Home al centro y los anillos detras.
   .pro-orbit es el bloque (caja + pie); .pro-orbit__box la caja de 720 x 560 */
.pro-orbit {
  width: min(720px, 100%);
  margin: var(--rhythm-half) auto 0;
}
.pro-orbit__box {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 560;
  display: grid;
  place-items: center;
}
/* los anillos viven DENTRO de la caja de 720 x 560 (PLAN E3, UX 6.2; r14
   correccion P1-2). Con viewBox 1000 y xMidYMid meet el lado del SVG es el
   menor de la caja, y la elipse exterior (rx 490 / 1000) nunca pasa de 0,49
   de ese lado en ninguna fase del giro: ningun anillo cruza la leyenda de
   abajo ni el CTA de arriba, a ningun ancho. La grilla vive en el hero
   entero (::before), asi que la de demos/pro.css dentro de la caja se
   apaga: una sola grilla, sin dos rejillas desfasadas. */
.pro-orbit__rings,
.pro-orbit .demo--pro-rings {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  color: var(--teal-bright);
  overflow: visible;
  background-image: none;
  z-index: 0;
}
.pro-orbit__rings svg,
.pro-orbit .demo--pro-rings .pr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* r14 correccion P2 (SUPERVISION-PRO, 2.a ronda): con min-height 0 el stage
   media 0 x 0 antes de montar, y el IntersectionObserver del motor (umbral
   0,35 sobre el propio stage) no dispara si su punto central cae bajo el
   pliegue (2.1 a 1440 x 900: y = 902, 10 s sin montar). Con el minimo de .demo
   (UX 6.3, 420px) el stage tiene area desde el primer frame, cabe en la caja
   de 560 y sigue centrado; la escena montada (357 a 469 de alto) lo desborda o
   no segun la hoja, sin salto de maqueta porque la caja ya tiene aspect-ratio. */
.pro-orbit__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 420px;
}
.pro-orbit__cap {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--teal-bright);
}

/* ============================================================================
   2 · P1 · WHAT IT DOES · tres tarjetas papel raised con mini demo
   ========================================================================== */
.pro-does { padding: var(--rhythm) 0; }
.pro-does .section-head { margin-bottom: calc(var(--rhythm) * 0.35); }
.pro-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.pro-card {
  position: relative;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  min-height: 24rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-content: start;
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.pro-card:hover { transform: translateY(-5px); box-shadow: 0 18px 50px rgba(17, 17, 16, 0.35); }
.pro-card__demo {
  display: grid;
  place-items: center;
  min-height: 15rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.pro-card__demo .demo { min-height: 0; }
.pro-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.pro-card__line { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }

/* ============================================================================
   3 · P2 · LAS CUATRO FEATURES · cabecera + foto a sangre + UI flotante
   ========================================================================== */
.pro-features { padding-bottom: var(--rhythm-half); }
.pro-feat { padding-top: var(--rhythm-half); }
.pro-feat__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.pro-feat__title { display: grid; gap: 0.6rem; }
.pro-feat__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--teal-bright);
}
/* nombre en sans ligera con letra abierta, como manda el brief */
.pro-feat__name {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-wrap: balance;
}
.pro-feat__checks {
  display: grid;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.86);
  line-height: 1.5;
}
.pro-feat__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.pro-feat__checks svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.05rem;
  color: var(--teal-bright);
}
/* los checks se dibujan al entrar, solo con JS (sin JS nacen dibujados) */
.js .pro-feat__checks svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.js .pro-feat__checks.is-in svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.42s var(--ease-out);
}
.js .pro-feat__checks.is-in li:nth-child(2) svg path { transition-delay: 0.12s; }
.js .pro-feat__checks.is-in li:nth-child(3) svg path { transition-delay: 0.24s; }

/* la foto: 100vw x min(72svh, 720px); el tercio derecho lo pide limpio el
   shotlist para que la UI flote ahi */
.pro-feat__photo {
  position: relative;
  width: 100%;
  height: min(72svh, 720px);
  overflow: hidden;
  background: var(--slate-raised);
}
.pro-feat__media {
  position: absolute;
  inset: 0;
}
.pro-feat__media img,
.pro-feat__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* respaldo de superficie (r14): las doce fotos ya estan montadas; esta clase
   queda por si un webp falta en un montaje futuro. Misma caja, sin texto */
.pro-feat__media--pending {
  background:
    radial-gradient(70% 90% at 32% 50%, color-mix(in srgb, var(--teal-vivid) 30%, var(--slate)), transparent 100%),
    var(--slate-raised);
}
.pro-feat__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 40%, rgba(44, 39, 52, 0.55) 100%);
}
/* la UI: nota oscura de 440 x 300 anclada al tercio derecho */
.pro-feat__ui {
  position: absolute;
  right: max(var(--gutter), 8%);
  top: 50%;
  transform: translateY(-50%);
  width: 440px;
  max-width: calc(100% - var(--gutter) * 2);
  min-height: 300px;
  padding: 0.85rem;
  background: var(--slate-raised);
  border: 1px solid var(--line-on-dark);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(17, 17, 16, 0.4);
  display: grid;
  place-items: center;
}
.pro-feat__ui .demo { min-height: 0; }
/* nota mono bajo una feature (la linea de add-on de 2.1, SPEC-COPY E.5.3):
   va dentro del article, en su shell, despues de la foto */
.pro-feat__note {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: rgba(246, 245, 241, 0.72);
  max-width: 62ch;
}

/* ============================================================================
   4 · P3 · MODELO DE ENTREGA · la unica banda a sangre, teal vivid + papel
   ========================================================================== */
.pro-delivery {
  background: var(--teal-vivid);
  color: var(--paper);
  padding: var(--rhythm) 0;
}
.pro-delivery__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pro-delivery__copy { display: grid; gap: 1.2rem; }
/* sobre teal vivid SOLO papel (4.66:1): nada de tintes ni grises */
.pro-delivery .kicker,
.pro-delivery .kicker .kicker__num { color: var(--paper); }
.pro-delivery .pro-title { color: var(--paper); }
.pro-delivery__copy > p:not(.kicker) {
  color: var(--paper);
  font-size: var(--text-lead);
  line-height: 1.55;
  max-width: 52ch;
}
.pro-delivery__note {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: none;
  max-width: 62ch;
}
.pro-delivery__card {
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(0.8rem, 1.8vw, 1.4rem);
  display: grid;
  place-items: center;
}
.pro-delivery__card .demo { width: 100%; }

/* ============================================================================
   5 · P4 · ANTES / DESPUES · slate raised (cruces) y papel raised (checks teal)
   ========================================================================== */
.pro-ba { padding: var(--rhythm) 0 var(--rhythm-half); }
.pro-ba__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: stretch;
}
.pro-ba__card {
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3vw, 2.6rem);
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.pro-ba__card--before {
  background: var(--slate-raised);
  border: 1px solid var(--line-on-dark);
  color: rgba(246, 245, 241, 0.82);
}
.pro-ba__card--before .h3 { color: var(--paper); }
.pro-ba__card--after {
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 26px 60px rgba(17, 17, 16, 0.35);
}
.pro-ba__card--after .h3 { color: var(--ink); }
.pro-ba__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pro-ba__card--before .pro-ba__tag { color: rgba(246, 245, 241, 0.62); }
.pro-ba__card--after .pro-ba__tag { color: var(--teal); }
.pro-ba__list { display: grid; gap: 0.7rem; margin-top: 0.3rem; }
.pro-ba__list li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 480;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.pro-ba__list svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.15rem;
}
.pro-ba__card--before .pro-ba__list svg { color: rgba(246, 245, 241, 0.5); }
.pro-ba__card--after .pro-ba__list li { color: var(--ink-soft); }
.pro-ba__card--after .pro-ba__list svg { color: var(--teal); }
.pro-ba__cta {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--rhythm-half) * 0.75);
}

/* ============================================================================
   6 · P5 · UP AND RUNNING · lista de cuatro pasos + step-launch en tarjeta
   ========================================================================== */
.pro-running { padding: var(--rhythm-half) 0 var(--rhythm); }
.pro-running__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pro-running__copy {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}
.pro-steps {
  display: grid;
  border-top: 1px solid var(--line-on-dark);
  margin: 0.4rem 0 0.4rem;
  width: 100%;
  max-width: 34rem;
}
.pro-steps li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-on-dark);
  color: rgba(246, 245, 241, 0.86);
  font-size: 0.98rem;
  line-height: 1.5;
}
.pro-steps__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  color: var(--teal-bright);
}
.pro-running__media { display: grid; justify-items: center; }
.pro-running__card {
  width: min(340px, 100%);
  min-height: 380px;
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px rgba(17, 17, 16, 0.35);
  padding: 1rem;
  display: grid;
  place-items: center;
}
.pro-running__card .demo { min-height: 0; width: 100%; }

/* ============================================================================
   7 · P6 · CROSS-LINKS · banda sobre slate, tres tarjetas slate raised
   ========================================================================== */
.pro-links { padding: var(--rhythm-half) 0 var(--rhythm); }
.pro-links__title { margin-bottom: calc(var(--rhythm-half) * 0.6); }
.pro-links__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.pro-links__card {
  position: relative;
  background: var(--slate-raised);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: transform var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease);
}
.pro-links__card:hover { transform: translateY(-4px); border-color: var(--teal-bright); }
.pro-links__name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pro-links__line { color: rgba(246, 245, 241, 0.75); font-size: 0.95rem; line-height: 1.5; }
/* r14 correccion P2-3: el enlace va en papel (8.1:1 sobre slate raised) y
   solo la flecha lleva el teal; --teal-bright como texto de 11px sobre la
   tarjeta raised media 4.36, por debajo de AA */
.pro-links__more {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 520;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.86);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* la tarjeta entera es el objetivo (UX 9.1): el enlace se extiende al bloque */
.pro-links__more::after { content: ""; position: absolute; inset: 0; }
.pro-links__more svg {
  width: 1em;
  height: 1em;
  color: var(--teal-bright);
  transition: transform var(--dur-state) var(--ease);
}
.pro-links__card:hover .pro-links__more svg { transform: translateX(4px); }
.pro-links__more:focus-visible { outline: none; }
.pro-links__card:has(.pro-links__more:focus-visible) { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

/* ============================================================================
   8 · P7 · FAQ · variante oscura del .faq del Home
   ========================================================================== */
.pro-faq { padding: 0 0 var(--rhythm); }
.faq--dark .faq__list { border-top-color: rgba(246, 245, 241, 0.34); }
.faq--dark .faq__item { border-bottom-color: rgba(246, 245, 241, 0.34); }
.faq--dark .faq__item summary { color: var(--paper); }
.faq--dark .faq__item summary::after {
  background:
    linear-gradient(var(--paper) 0 0) center / 12px 2px no-repeat,
    linear-gradient(var(--paper) 0 0) center / 2px 12px no-repeat;
}
.faq--dark .faq__item[open] summary { color: var(--teal-bright); }
.faq--dark .faq__item[open] summary::after {
  background:
    linear-gradient(var(--teal-bright) 0 0) center / 12px 2px no-repeat,
    linear-gradient(var(--teal-bright) 0 0) center / 2px 12px no-repeat;
}
.faq--dark .faq__item p { color: rgba(246, 245, 241, 0.75); }

/* ============================================================================
   9 · RESPONSIVE (los cortes de la casa: 1080 · 767 · 430)
   ========================================================================== */
@media (max-width: 1080px) {
  .pro-hero { padding: clamp(7.5rem, 14vh, 9.5rem) 0 var(--rhythm-half); }
  /* la orbita se mide por la escena: en tactil followup / crm / ops se apilan
     (responsive-scenes.css) y una caja fija de 4:3 no los contiene. La caja
     deja de fijar alto y el stage recupera el minimo de .demo; los anillos
     se ajustan a esa caja */
  .pro-orbit { width: 100%; }
  .pro-orbit__box { aspect-ratio: auto; padding: 1.4rem 0 0.6rem; }
  .pro-orbit__stage { min-height: 420px; }
  /* los anillos siguen en inset 0: la caja se mide por la escena y el SVG
     toma su lado menor (el ancho en telefono). r14 correccion P3 (SUPERVISION-PRO,
     2.a ronda): a 375 la caja mide 335 y la elipse exterior inclinada (-14 grados,
     mas el giro) medida por su caja envolvente llegaba a 384, mas que la caja y
     que la pantalla; el SVG toma el 86 % del ancho, centrado, para que esa caja
     envolvente (1,146 x lado) entre en los 335 px en cualquier fase del giro */
  .pro-orbit__rings svg,
  .pro-orbit .demo--pro-rings .pr-svg { width: 86%; left: 7%; }
  .pro-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .pro-card { padding: 1rem; min-height: 22rem; }
  .pro-feat__head { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
  /* la UI baja DEBAJO de la foto (PLAN E8, UX 6.2) y toma el ancho del shell:
     la figura deja de ser la caja de la foto y pasa a flujo normal; la foto
     es el bloque .pro-feat__media (16:10, 4:5 en telefono) y la UI viene
     despues (r14 correccion: antes la UI quedaba sobre la foto) */
  .pro-feat__photo { height: auto; aspect-ratio: auto; max-height: none; overflow: visible; }
  .pro-feat__media { position: relative; inset: auto; aspect-ratio: 16 / 10; max-height: 72svh; overflow: hidden; }
  .pro-feat__scrim { display: none; }
  .pro-feat__ui {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(var(--shell), 100% - var(--gutter) * 2);
    max-width: none;
    margin: 1.2rem auto 0;
  }
  .pro-delivery__grid { grid-template-columns: 1fr; }
  .pro-ba__grid { grid-template-columns: 1fr; }
  .pro-running__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .pro-links__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .pro-links__card { padding: 1.2rem; }
}

@media (max-width: 767px) {
  .pro-cards { grid-template-columns: 1fr; }
  .pro-card { min-height: 0; }
  .pro-card__demo { min-height: 14rem; }
  .pro-feat__media { aspect-ratio: 4 / 5; max-height: none; }
  .pro-feat__ui { padding: 0.7rem; }
  .pro-links__grid { grid-template-columns: 1fr; }
  .pro-links__card { min-height: 44px; }
  .pro-steps li { grid-template-columns: 2.2rem minmax(0, 1fr); }
}

@media (max-width: 430px) {
  .pro-hero__actions .btn { width: 100%; justify-content: center; }
  .pro-ba__card { padding: 1.4rem 1.2rem; }
  .pro-running__card { min-height: 0; }
}

/* en tactil el hover no se queda pegado en las tarjetas */
@media (hover: none) {
  .pro-card:hover,
  .pro-links__card:hover { transform: none; box-shadow: none; border-color: var(--line-on-dark); }
  .pro-links__card:hover .pro-links__more svg { transform: none; }
}