.tarvos-app-page {
  --app-bg: #f5f7fb;
  --app-surface: rgba(255, 255, 255, 0.9);
  --app-surface-strong: #ffffff;
  --app-soft: rgba(232, 238, 249, 0.72);
  --app-text: var(--tarvos-color-navy-900, #0b1020);
  --app-muted: #66728a;
  --app-muted-strong: #485774;
  --app-line: rgba(39, 57, 98, 0.12);
  --app-line-strong: rgba(91, 128, 204, 0.22);
  --app-accent: #3465f4;
  --app-accent-2: #8b5cf6;
  --app-accent-3: #06b6d4;
  --app-radius: 18px;
  --app-radius-sm: 12px;
  --app-max: 1560px;
  --app-readable: 900px;
  --app-gutter: clamp(16px, 4vw, 42px);
  --app-shadow: 0 22px 55px rgba(16, 24, 40, 0.09);
  --app-shadow-soft: 0 12px 34px rgba(16, 24, 40, 0.07);
  min-height: 100vh;
  width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 16% 10%, rgba(80, 126, 255, 0.10), transparent 28rem),
    radial-gradient(circle at 86% 2%, rgba(139, 92, 246, 0.10), transparent 30rem),
    linear-gradient(180deg, #fbfcff 0%, var(--app-bg) 42%, #f7f9fd 100%);
  color: var(--app-text);
  font-family: var(--tarvos-font-sans, "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

.tarvos-app-page *,
.tarvos-app-page *::before,
.tarvos-app-page *::after {
  box-sizing: border-box;
}

.tarvos-app-page > .tarvos-legacy-app,
.tarvos-app-page > [class$="-app"],
.tarvos-app-page > [class$="-page"],
.tarvos-app-page .tarvos-legacy-app {
  width: 100%;
  margin-inline: auto;
  background: transparent !important;
  color: var(--app-text) !important;
}

.tarvos-app-page .tarvos-legacy-app .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.tarvos-app-page .tarvos-legacy-app a.visually-hidden:focus {
  position: fixed !important;
  z-index: 100000 !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.72rem 1rem !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  border: 2px solid #ffffff !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: #4320aa !important;
  box-shadow: 0 0 0 3px #7047f5, 0 8px 24px rgba(22, 15, 54, 0.22) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.tarvos-app-hero {
  width: min(var(--app-readable), calc(100% - (var(--app-gutter) * 2)));
  min-height: clamp(270px, 34vw, 390px);
  margin-inline: auto;
  padding: clamp(4.4rem, 9vw, 7.2rem) 0 clamp(2.4rem, 6vw, 4.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent !important;
  color: var(--app-text);
}

.tarvos-app-eyebrow,
.tarvos-app-page :is(.eyebrow, .m3d-eyebrow, .fi-kicker) {
  display: none !important;
}

.tarvos-app-hero__title,
.tarvos-app-page :is(.main-header h1, .m3d-hero h1, .fi-hero h1, .db-header h1) {
  max-width: 1080px;
  margin: 0 auto;
  color: var(--app-text);
  background: linear-gradient(120deg, #2f66f5 8%, #7895ff 48%, #9b7cff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.9rem, 6vw, 5.35rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
  text-wrap: balance;
  text-transform: none;
}

.tarvos-app-hero__summary,
.tarvos-app-page :is(.hero-definition, .m3d-subtitle, .fi-subtitle, .subtitle, .db-header p) {
  max-width: 920px;
  margin: 1.25rem auto 0;
  color: var(--app-muted-strong);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.72;
  text-wrap: balance;
}

.tarvos-app-hero__intro {
  max-width: 920px;
  margin: 1rem auto 0;
  color: #354563;
  font-size: clamp(1rem, 1.45vw, 1.15rem);
  line-height: 1.7;
  text-wrap: balance;
}

.tarvos-app-content {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
  margin-inline: auto;
}

.tarvos-app-content > * {
  max-width: none !important;
}

body .tarvos-app-page .tarvos-legacy-app[class*="tarvos-legacy-app--"] {
  background: transparent !important;
}

body .tarvos-app-page .tarvos-legacy-app[class*="tarvos-legacy-app--"] :is(
  .tp-page,
  .ce-page,
  .nc-page,
  .gm-page,
  .m3d-page,
  .fi-page,
  .db-page,
  .dm-page,
  .ar-page,
  .galton-page,
  .lentes-page,
  .espejos-page,
  .refrac-page,
  .ondas-page,
  .oe-page,
  .ac-page
) {
  background: transparent !important;
}

.tarvos-app-content :is(
  .tp-page,
  .ce-page,
  .nc-page,
  .gm-page,
  .m3d-page,
  .fi-page,
  .db-page,
  .dm-page,
  .ar-page,
  .galton-page,
  .lentes-page,
  .espejos-page,
  .refrac-page,
  .ondas-page,
  .oe-page,
  .ac-page
) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  background: transparent !important;
}

.tarvos-app-page :is(.container, .m3d-main, .fi-shell, #mainContainer, #mainContent, .db-app, .app-container, .simulator-container, .main-container) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.tarvos-app-page :is(.panel, .card, .control-panel, .result-panel, .canvas-panel, .viewer-panel, .element-panel, .controls-wrapper, .symbol-wrap, .panel-model, .panel-summary-box, .app-card, .data-card) {
  border-color: var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background-color: var(--app-surface) !important;
  box-shadow: var(--app-shadow-soft);
}

.tarvos-app-page :is(button, .button, .btn, input, select, textarea) {
  border-radius: var(--app-radius-sm);
  font-family: inherit;
}

.tarvos-app-page :is(button, .button, .btn) {
  min-height: 42px;
  border: 1px solid var(--app-line);
  color: var(--app-text);
  font-weight: 780;
}

.tarvos-app-page :is(
  button[type="submit"],
  button.primary,
  button.active,
  button[aria-pressed="true"],
  .button-primary,
  .btn-primary,
  .button.primary,
  .btn.primary,
  .button.active,
  .btn.active,
  [role="button"].primary,
  [role="button"].active,
  [role="button"][aria-pressed="true"]
) {
  color: #ffffff !important;
  border-color: transparent;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
}

/* Variante reutilizable para filtros y chips activos que deben conservar texto oscuro. */
.tarvos-app-page :is(button, [role="button"])[data-tarvos-active-style="subtle"][aria-pressed="true"] {
  color: #35167f !important;
  border-color: #9e83ed !important;
  background: #eee8ff !important;
  box-shadow: inset 0 0 0 1px rgba(112, 71, 245, .08) !important;
}

.tarvos-app-page :is(input, select, textarea) {
  min-height: 42px;
  border: 1px solid var(--app-line);
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--app-text);
}

.tarvos-app-page :focus-visible {
  outline: 3px solid rgba(52, 101, 244, 0.32);
  outline-offset: 3px;
}

.tarvos-app-learning {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
  margin: clamp(3.5rem, 7vw, 5.2rem) auto 0;
  border-top: 1px solid var(--app-line);
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2.8rem, 7vw, 5rem);
}

.tarvos-app-learning__title {
  max-width: 840px;
  margin: 0 auto 1.6rem;
  color: transparent;
  background: linear-gradient(120deg, #4776ff, #8f80ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.tarvos-app-learning__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.78fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.tarvos-app-learning__editorial,
.tarvos-app-learning__faq,
.tarvos-app-learning__visual {
  min-width: 0;
}

.tarvos-app-learning__editorial > p {
  margin: 0 0 1.25rem;
  color: var(--app-muted-strong);
  font-size: 1.02rem;
  line-height: 1.78;
}

.tarvos-app-learning h3 {
  margin: 0 0 0.95rem;
  color: var(--app-text);
  font-size: 1.18rem;
  line-height: 1.25;
}

.tarvos-app-learning__errors {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  padding: 1rem 1.1rem;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-soft);
}

.tarvos-app-learning__errors ul,
.tarvos-app-learning__visual ul {
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--app-muted-strong);
  line-height: 1.62;
}

.tarvos-app-learning__faq {
  display: grid;
  gap: 0.8rem;
}

.tarvos-app-learning__faq h3 {
  margin-bottom: 0.2rem;
}

.tarvos-app-learning__faq details {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-soft);
  overflow: clip;
}

.tarvos-app-learning__faq summary {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0.92rem 1rem;
  color: #3f73ff;
  font-weight: 850;
  cursor: pointer;
}

.tarvos-app-learning__faq summary::-webkit-details-marker {
  display: none;
}

.tarvos-app-learning__faq summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--app-soft);
  color: var(--app-muted);
  font-weight: 900;
}

.tarvos-app-learning__faq details[open] summary::after {
  content: "-";
}

.tarvos-app-learning__faq details p {
  margin: 0;
  border-top: 1px solid var(--app-line);
  padding: 1rem 1.05rem 1.1rem;
  color: var(--app-muted-strong);
  line-height: 1.68;
}

.tarvos-app-learning__visual {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  padding: 1.3rem;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

.tarvos-app-copy-status {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 9999;
  max-width: min(340px, calc(100vw - 2rem));
  border: 1px solid rgba(52, 101, 244, 0.28);
  border-radius: var(--app-radius-sm);
  padding: 0.78rem 0.95rem;
  background: var(--app-text);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(7, 17, 31, 0.24);
  font-size: 0.92rem;
  font-weight: 780;
}

.tarvos-app-copy-status[hidden] {
  display: none;
}

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

@media (max-width: 1180px) {
  .tarvos-app-hero {
    min-height: clamp(250px, 36vw, 340px);
  }

  .tarvos-app-learning__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .tarvos-app-page {
    --app-gutter: clamp(12px, 4vw, 20px);
  }

  .tarvos-app-hero {
    min-height: 240px;
    padding-top: 3.4rem;
    padding-bottom: 2rem;
  }

  .tarvos-app-hero__title,
  .tarvos-app-page :is(.main-header h1, .m3d-hero h1, .fi-hero h1, .db-header h1) {
    font-size: clamp(2.25rem, 12vw, 3.3rem);
  }

  .tarvos-app-hero__summary,
  .tarvos-app-hero__intro {
    font-size: 1rem;
  }
}

/* Plantilla común de aplicaciones · refinamiento editorial 2026-07 */
.tarvos-app-page {
  --app-max: 1480px;
  --app-readable: 1080px;
  --app-gutter: clamp(14px, 3vw, 36px);
  background: #f7f8fb;
}

.tarvos-app-hero {
  width: min(var(--app-readable), calc(100% - (var(--app-gutter) * 2)));
  min-height: 0;
  padding: clamp(3.2rem, 6vw, 5rem) 0 clamp(2.3rem, 4vw, 3.4rem);
  align-items: flex-start;
  text-align: left;
}

.tarvos-app-hero__title {
  max-width: 15ch;
  margin: 0;
  color: var(--app-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(2.7rem, 4.8vw, 4.4rem);
  font-weight: 890;
  letter-spacing: -.075em;
  line-height: .98;
}

.tarvos-app-hero__summary,
.tarvos-app-hero__intro {
  max-width: 800px;
  margin: 1rem 0 0;
  color: var(--app-muted-strong);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.67;
  text-wrap: pretty;
}

.tarvos-app-hero__intro {
  margin-top: .55rem;
  color: var(--app-muted);
  font-size: .96rem;
}

.tarvos-app-content {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
}

.tarvos-app-learning {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.tarvos-app-learning__title {
  max-width: 760px;
  margin: 0 0 1.6rem;
  color: var(--app-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  letter-spacing: -.055em;
  text-align: left;
}

.tarvos-app-learning__layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr);
  gap: 1.25rem;
}

.tarvos-app-learning__editorial > p {
  max-width: 760px;
  margin-bottom: 1rem;
  font-size: .98rem;
  line-height: 1.72;
}

.tarvos-app-learning__errors,
.tarvos-app-learning__faq details,
.tarvos-app-learning__visual {
  border-radius: 14px;
  box-shadow: none;
}

.tarvos-app-learning__faq { gap: .55rem; }
.tarvos-app-learning__faq summary { min-height: 50px; color: var(--app-text); font-size: .9rem; }
.tarvos-app-learning__faq details p { font-size: .9rem; }

@media (max-width: 720px) {
  .tarvos-app-hero { padding-top: 2.6rem; padding-bottom: 2rem; }
  .tarvos-app-hero__title { font-size: clamp(2.45rem, 12vw, 3.7rem); }
  .tarvos-app-learning__layout { grid-template-columns: 1fr; }
}

.tarvos-app-learning__visual {
  grid-column: 1 / -1;
  padding: 1rem 1.1rem;
}
.tarvos-app-learning__visual ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-left: 1.1rem;
}
@media (max-width: 900px) {
  .tarvos-app-learning__visual ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tarvos-app-learning__visual ul { grid-template-columns: 1fr; }
}

/* START TARVOS APP SHELL REFINEMENT 20260715 */
.tarvos-app-hero {
  width: min(1180px, calc(100% - (var(--app-gutter) * 2)));
  padding: clamp(3.4rem, 6vw, 5.4rem) 0 clamp(2.2rem, 4vw, 3rem);
}

.tarvos-app-hero__eyebrow,
.tarvos-app-learning__eyebrow {
  margin: 0 0 .75rem;
  color: #5b28d2;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tarvos-app-hero__title {
  max-width: 15ch;
  font-size: clamp(2.9rem, 5vw, 4.8rem);
}

.tarvos-app-learning {
  width: min(1480px, calc(100% - (var(--app-gutter) * 2)));
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(32, 42, 70, .1);
}

.tarvos-app-learning__header {
  max-width: 820px;
  margin-bottom: 1.35rem;
}

.tarvos-app-learning__title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.02;
}

.tarvos-app-learning__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr);
  gap: 1rem;
  align-items: start;
}

.tarvos-app-learning__editorial,
.tarvos-app-learning__faq,
.tarvos-app-learning__visual {
  min-width: 0;
}

.tarvos-app-learning__editorial > p {
  margin: 0 0 1rem;
  color: #4d5870;
  font-size: .98rem;
  line-height: 1.7;
}

.tarvos-app-learning__errors,
.tarvos-app-learning__visual {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(32, 42, 70, .1);
  border-radius: 16px;
  background: #fff;
}

.tarvos-app-learning__errors h3,
.tarvos-app-learning__faq h3,
.tarvos-app-learning__visual h3 {
  margin: 0 0 .7rem;
  font-size: 1rem;
}

.tarvos-app-learning__errors ul,
.tarvos-app-learning__visual ul {
  margin: 0;
  padding-left: 1.15rem;
  color: #4d5870;
  font-size: .9rem;
  line-height: 1.6;
}

.tarvos-app-learning__faq {
  display: grid;
  gap: .55rem;
}

.tarvos-app-learning__faq details {
  overflow: hidden;
  border: 1px solid rgba(32, 42, 70, .1);
  border-radius: 14px;
  background: #fff;
}

.tarvos-app-learning__faq summary {
  min-height: 48px;
  padding: .85rem 2.8rem .85rem 1rem;
  font-size: .9rem;
}

.tarvos-app-learning__faq details p {
  margin: 0;
  padding: 0 1rem 1rem;
  color: #4d5870;
  font-size: .9rem;
  line-height: 1.6;
}

.tarvos-app-learning__visual {
  grid-column: 1 / -1;
}

.tarvos-app-learning__visual ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem 1.2rem;
}

@media (max-width: 900px) {
  .tarvos-app-learning__layout { grid-template-columns: 1fr; }
  .tarvos-app-learning__visual ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .tarvos-app-hero { padding-top: 2.7rem; }
  .tarvos-app-hero__title { font-size: clamp(2.45rem, 12vw, 3.65rem); }
  .tarvos-app-learning__visual ul { grid-template-columns: 1fr; }
}
/* END TARVOS APP SHELL REFINEMENT 20260715 */

/* Sistema editorial premium compartido por todas las aplicaciones */
.tarvos-app-page{
  --app-bg:#f7f8fc;
  --app-surface:#fff;
  --app-text:#11162b;
  --app-muted:#6f7890;
  --app-muted-strong:#4f5b74;
  --app-line:#e1e6ef;
  --app-accent:#6f3df4;
  --app-accent-2:#4f28bd;
  background:
    radial-gradient(circle at 15% 0%,rgba(111,61,244,.065),transparent 24rem),
    radial-gradient(circle at 88% 3%,rgba(139,92,246,.055),transparent 26rem),
    linear-gradient(180deg,#fff 0,#f8f9fc 22rem,#f7f8fc 100%);
}
.tarvos-app-hero{
  width:min(1120px,calc(100% - (var(--app-gutter)*2)));
  min-height:0;
  padding:clamp(2.35rem,5vw,4rem) 0 clamp(1.75rem,4vw,2.7rem);
}
.tarvos-app-hero__eyebrow{
  display:inline-flex!important;
  margin:0 0 .9rem!important;
  padding:.42rem .72rem;
  border:1px solid rgba(111,61,244,.18);
  border-radius:999px;
  color:var(--app-accent-2)!important;
  background:#f4f0ff;
  font-size:.72rem!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
}
.tarvos-app-hero__title{
  max-width:980px;
  color:var(--app-text)!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  font-size:clamp(2.7rem,5.5vw,5.15rem);
  font-weight:900;
  letter-spacing:-.07em;
  line-height:.96;
}
.tarvos-app-hero__summary{
  max-width:760px;
  margin-top:1.1rem;
  font-size:clamp(1rem,1.45vw,1.18rem);
  line-height:1.65;
}
.tarvos-app-content{padding-top:.15rem}
.tarvos-app-page :is(.panel,.card,.control-panel,.result-panel,.canvas-panel,.viewer-panel,.element-panel,.controls-wrapper,.symbol-wrap,.panel-model,.panel-summary-box,.app-card,.data-card){
  border:1px solid var(--app-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 18px 48px rgba(17,22,43,.065)!important;
}
.tarvos-app-learning{
  margin-top:clamp(3rem,6vw,4.8rem);
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--app-line);
  border-radius:24px;
  background:rgba(255,255,255,.9);
  box-shadow:0 22px 58px rgba(17,22,43,.065);
}
.tarvos-app-learning__header{max-width:820px;margin:0 auto clamp(1.5rem,3vw,2.2rem);text-align:center}
.tarvos-app-learning__eyebrow{
  display:inline-flex;
  margin:0 0 .7rem;
  padding:.38rem .68rem;
  border-radius:999px;
  color:var(--app-accent-2);
  background:#f4f0ff;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tarvos-app-learning__title{
  margin:0;
  color:var(--app-text)!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  font-size:clamp(1.9rem,3.4vw,3rem);
  letter-spacing:-.055em;
}
.tarvos-app-learning__layout{grid-template-columns:minmax(0,.92fr) minmax(330px,.78fr);gap:1.25rem}
.tarvos-app-learning__editorial,.tarvos-app-learning__faq,.tarvos-app-learning__visual{
  padding:clamp(1rem,2vw,1.35rem);
  border:1px solid var(--app-line);
  border-radius:18px;
  background:#fff;
}
.tarvos-app-learning__errors{
  border-color:#fecaca!important;
  background:#fff4f2!important;
  box-shadow:none!important;
}
.tarvos-app-learning__errors h3{color:#b42318}
.tarvos-app-learning__errors li::marker{color:#ef4444}
.tarvos-app-learning__faq{gap:.65rem}
.tarvos-app-learning__faq details{box-shadow:none;border-radius:14px}
.tarvos-app-learning__faq summary{color:var(--app-text);font-weight:780}
.tarvos-app-learning__faq summary::after{color:var(--app-accent);font-size:1.3rem}
.tarvos-app-learning__faq details[open]{border-color:rgba(111,61,244,.28);background:#fbfaff}
@media(max-width:820px){
  .tarvos-app-hero{padding-top:2rem;padding-bottom:1.5rem}
  .tarvos-app-hero__title{font-size:clamp(2.35rem,11vw,3.7rem)}
  .tarvos-app-learning__layout{grid-template-columns:1fr}
}


/* =========================================================
   PLANTILLA PREMIUM FINAL · TODAS LAS APLICACIONES
   ========================================================= */
.tarvos-app-page {
  --app-bg: #f6f7fb;
  --app-surface: #ffffff;
  --app-soft: #f2efff;
  --app-text: #11162b;
  --app-muted: #6c7690;
  --app-muted-strong: #46536d;
  --app-line: #e1e5ee;
  --app-accent: #7047f5;
  --app-accent-2: #4f28bd;
  --app-radius: 22px;
  --app-radius-sm: 13px;
  --app-max: 1480px;
  --app-readable: 1180px;
  --app-gutter: clamp(14px, 3vw, 36px);
  min-height: 100vh;
  padding: 0 0 clamp(3.5rem, 6vw, 5.5rem);
  background:
    radial-gradient(circle at 12% 0%, rgba(112, 71, 245, .07), transparent 24rem),
    radial-gradient(circle at 91% 3%, rgba(139, 92, 246, .055), transparent 26rem),
    linear-gradient(180deg, #fbfbfe 0%, #f6f7fb 34rem, #f6f7fb 100%);
}

.tarvos-app-hero {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
  min-height: 0;
  margin: clamp(1.7rem, 3.5vw, 3rem) auto clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.6rem, 3.5vw, 2.7rem);
  border: 1px solid rgba(71, 55, 126, .12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 18%, rgba(112, 71, 245, .14), transparent 17rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(249,247,255,.97));
  box-shadow: 0 22px 62px rgba(22, 24, 48, .075);
  text-align: left;
}

.tarvos-app-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .72fr);
  gap: clamp(1.6rem, 4vw, 3.8rem);
  align-items: center;
}

.tarvos-app-hero__copy {
  min-width: 0;
}

.tarvos-app-hero__eyebrow {
  display: inline-flex !important;
  align-items: center;
  min-height: 30px;
  margin: 0 0 .9rem !important;
  padding: .42rem .72rem;
  border: 1px solid rgba(112, 71, 245, .18);
  border-radius: 999px;
  color: var(--app-accent-2) !important;
  background: #f3efff;
  font-size: .69rem !important;
  font-weight: 880 !important;
  letter-spacing: .12em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.tarvos-app-hero__title {
  max-width: 16ch;
  margin: 0;
  color: var(--app-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(2.65rem, 4.8vw, 4.75rem);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .96;
  text-wrap: balance;
}

.tarvos-app-hero__summary {
  max-width: 780px;
  margin: 1rem 0 0;
  color: var(--app-muted-strong);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.67;
  text-wrap: pretty;
}

.tarvos-app-hero__guide {
  min-width: 0;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  border: 1px solid rgba(112, 71, 245, .16);
  border-radius: 20px;
  background: rgba(244, 241, 255, .84);
}

.tarvos-app-hero__guide-label {
  margin: 0 0 .55rem !important;
  color: var(--app-accent-2);
  font-size: .68rem;
  font-weight: 880;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tarvos-app-hero__guide-text {
  margin: 0 !important;
  color: #3f4b65;
  font-size: .94rem;
  line-height: 1.62;
}

.tarvos-app-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.tarvos-app-hero__action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: .72rem .95rem;
  border: 1px solid #d9d2f2;
  border-radius: 999px;
  color: #3e2a75 !important;
  background: #fff;
  font-size: .78rem;
  font-weight: 830;
  text-decoration: none !important;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.tarvos-app-hero__action:hover,
.tarvos-app-hero__action:focus-visible {
  border-color: #bca9fb;
  background: #faf8ff;
  transform: translateY(-1px);
}

.tarvos-app-hero__action--primary {
  color: #fff !important;
  border-color: var(--app-accent);
  background: var(--app-accent);
  box-shadow: 0 12px 24px rgba(112, 71, 245, .2);
}

.tarvos-app-hero__action--primary:hover,
.tarvos-app-hero__action--primary:focus-visible {
  border-color: var(--app-accent-2);
  background: var(--app-accent-2);
}

.tarvos-app-workspace {
  width: 100%;
  scroll-margin-top: 7rem;
}

.tarvos-app-content {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
  margin-inline: auto;
  padding-top: 0;
}

.tarvos-app-content > .tarvos-legacy-app,
.tarvos-app-content > [class$="-app"],
.tarvos-app-content > [class$="-page"] {
  border-radius: 24px;
}

.tarvos-app-page :is(
  .panel, .card, .control-panel, .result-panel, .canvas-panel,
  .viewer-panel, .element-panel, .controls-wrapper, .symbol-wrap,
  .panel-model, .panel-summary-box, .app-card, .data-card
) {
  border: 1px solid var(--app-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 16px 44px rgba(17, 22, 43, .06) !important;
}

.tarvos-app-page :is(input, select, textarea) {
  border-color: #dce2ec !important;
  background: #fbfcfe !important;
}

.tarvos-app-page :is(input, select, textarea):focus {
  border-color: rgba(112, 71, 245, .52) !important;
  outline: 3px solid rgba(112, 71, 245, .11) !important;
}

.tarvos-app-learning {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2)));
  margin: clamp(2.5rem, 5vw, 4.2rem) auto 0;
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  border: 1px solid var(--app-line);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 58px rgba(17, 22, 43, .06);
}

.tarvos-app-learning__header {
  max-width: 880px;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.8rem);
  text-align: left;
}

.tarvos-app-learning__eyebrow {
  display: inline-flex;
  margin: 0 0 .65rem;
  padding: .38rem .68rem;
  border-radius: 999px;
  color: var(--app-accent-2);
  background: #f3efff;
  font-size: .67rem;
  font-weight: 880;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tarvos-app-learning__title {
  max-width: 20ch;
  margin: 0;
  color: var(--app-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-align: left;
}

.tarvos-app-learning__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .82fr);
  gap: 1rem;
  align-items: start;
}

.tarvos-app-learning__editorial,
.tarvos-app-learning__faq,
.tarvos-app-learning__visual {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--app-line);
  border-radius: 18px;
  background: #fff;
}

.tarvos-app-learning__editorial > p {
  max-width: 760px;
  margin: 0 0 1rem;
  color: var(--app-muted-strong);
  font-size: .96rem;
  line-height: 1.72;
}

.tarvos-app-learning__errors {
  padding: 1rem 1.1rem;
  border: 1px solid #fecaca !important;
  border-radius: 15px !important;
  background: #fff5f3 !important;
  box-shadow: none !important;
}

.tarvos-app-learning__errors h3 {
  color: #b42318;
}

.tarvos-app-learning__faq {
  display: grid;
  gap: .58rem;
}

.tarvos-app-learning__faq details {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.tarvos-app-learning__faq details[open] {
  border-color: rgba(112, 71, 245, .28);
  background: #fbfaff;
}

.tarvos-app-learning__faq summary {
  min-height: 50px;
  padding: .85rem 1rem;
  color: var(--app-text);
  font-size: .9rem;
  font-weight: 800;
}

.tarvos-app-learning__faq summary::after {
  color: var(--app-accent);
  background: #f1edff;
}

.tarvos-app-learning__visual {
  grid-column: 1 / -1;
}

.tarvos-app-learning__visual ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem 1.25rem;
}

@media (max-width: 980px) {
  .tarvos-app-hero__grid,
  .tarvos-app-learning__layout {
    grid-template-columns: 1fr;
  }

  .tarvos-app-hero__guide {
    max-width: 760px;
  }

  .tarvos-app-learning__visual ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .tarvos-app-page {
    --app-gutter: 12px;
    padding-bottom: 3rem;
  }

  .tarvos-app-hero {
    margin-top: 1rem;
    padding: 1.25rem;
    border-radius: 20px;
  }

  .tarvos-app-hero__title {
    font-size: clamp(2.35rem, 11.5vw, 3.55rem);
  }

  .tarvos-app-hero__guide {
    padding: 1rem;
  }

  .tarvos-app-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tarvos-app-learning {
    padding: 1rem;
    border-radius: 20px;
  }

  .tarvos-app-learning__visual ul {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   APPS · PLANTILLA EDITORIAL CONTINUA, SIN TARJETAS ANIDADAS
   ========================================================= */
.tarvos-app-page {
  --app-page: #fff;
  background: #fff !important;
}
.tarvos-app-hero {
  width: min(1280px, calc(100% - clamp(2rem, 8vw, 10rem)));
  margin: 0 auto;
  padding: clamp(5.4rem, 8vw, 7.2rem) 0 clamp(2.2rem, 4vw, 3.4rem);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tarvos-app-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.tarvos-app-hero__copy { max-width: 820px; }
.tarvos-app-hero__guide {
  align-self: end;
  padding: .2rem 0 .25rem clamp(1.2rem, 2.5vw, 2rem) !important;
  border: 0 !important;
  border-left: 1px solid #e4e7ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tarvos-app-hero__guide-label { margin-bottom: .55rem; }
.tarvos-app-hero__guide-text { margin: 0; color: #526078; }
.tarvos-app-hero__actions { margin-top: 1rem; }
.tarvos-app-hero__action {
  min-height: 40px;
  border-radius: 999px;
  padding-inline: 1rem;
}
.tarvos-app-workspace,
.tarvos-app-learning {
  width: min(1280px, calc(100% - clamp(2rem, 8vw, 10rem)));
  margin-inline: auto;
}
.tarvos-app-workspace {
  padding: clamp(1.2rem, 2.5vw, 2rem) 0 clamp(3rem, 6vw, 5rem);
  border-top: 1px solid #e7e9f0;
}
.tarvos-app-content { padding: 0 !important; }
.tarvos-app-content > *:first-child { margin-top: 0 !important; }
.tarvos-app-learning {
  margin-top: 0;
  padding: clamp(3.8rem, 7vw, 6rem) 0 clamp(4.5rem, 8vw, 7rem);
  border: 0 !important;
  border-top: 1px solid #e7e9f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tarvos-app-learning__editorial,
.tarvos-app-learning__faq,
.tarvos-app-learning__visual {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tarvos-app-learning__editorial { padding: 0 !important; }
.tarvos-app-learning__errors {
  margin-top: 1.35rem;
  border: 0 !important;
  border-left: 3px solid #e44c4c !important;
  border-radius: 0 !important;
  padding: .2rem 0 .2rem 1rem !important;
  background: transparent !important;
}
.tarvos-app-learning__faq { padding: 0 !important; }
.tarvos-app-learning__faq details {
  border: 0 !important;
  border-bottom: 1px solid #e5e8ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tarvos-app-learning__faq summary { padding-inline: 0 !important; }
.tarvos-app-learning__faq details p { padding-inline: 0 !important; }
.tarvos-app-learning__visual {
  padding: 1.25rem 0 0 !important;
  border-top: 1px solid #e5e8ef !important;
}
@media (max-width: 900px) {
  .tarvos-app-hero__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .tarvos-app-hero__guide { padding-left: 0 !important; border-left: 0 !important; }
}

/* =========================================================
   TARVOS · APPS A ANCHO COMPLETO
   La herramienta usa el espacio disponible; el texto conserva una medida legible.
   ========================================================= */
body:has(.tarvos-app-page) .site-main,
body:has(.tarvos-app-page) .ct-container,
body:has(.tarvos-app-page) .ct-container-full,
body:has(.tarvos-app-page) [data-content="normal"] {
  width: 100% !important;
  max-width: none !important;
}

.tarvos-app-page {
  --app-max: 1840px;
  --app-gutter: clamp(14px, 2.25vw, 38px);
}

.tarvos-app-hero,
.tarvos-app-content,
.tarvos-app-workspace,
.tarvos-app-learning {
  width: min(var(--app-max), calc(100% - (var(--app-gutter) * 2))) !important;
  max-width: none !important;
}

.tarvos-app-hero__copy {
  max-width: 960px !important;
}

.tarvos-app-content > .tarvos-legacy-app,
.tarvos-app-content > [class$="-app"],
.tarvos-app-page :is(.container, .tp-page .container, .m3d-main, .fi-shell, #mainContainer, #mainContent, .db-app, .app-container, .simulator-container, .main-container) {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 720px) {
  .tarvos-app-page { --app-gutter: 10px; }
}

/* =========================================================
   APPS — ANCHO ÚTIL REAL
   El shell global deja de encerrar las herramientas en 1280/1480 px.
   ========================================================= */
body:has(.tarvos-app-page) .site-main,
body:has(.tarvos-app-page) #main,
body:has(.tarvos-app-page) .ct-container,
body:has(.tarvos-app-page) .ct-container-full,
body:has(.tarvos-app-page) [data-content="normal"] {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.tarvos-app-page {
  --app-max: none !important;
  --app-gutter: clamp(12px, 2vw, 32px) !important;
  width: 100% !important;
  max-width: none !important;
}

.tarvos-app-page :is(.tarvos-app-hero, .tarvos-app-content, .tarvos-app-workspace, .tarvos-app-learning) {
  width: calc(100% - (var(--app-gutter) * 2)) !important;
  max-width: none !important;
}

.tarvos-app-page .tarvos-app-content > :is(.tarvos-legacy-app, [class$="-app"], [class$="-page"]),
.tarvos-app-page :is(.container, .app-container, .main-container, .simulator-container, .controls-wrapper, #mainContainer, #mainContent) {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 720px) {
  .tarvos-app-page { --app-gutter: 10px !important; }
}

/* =========================================================
   APPS · REFINAMIENTO EDITORIAL 2026-07
   Menos cajas, controles inequívocos y una jerarquía común.
   ========================================================= */
.tarvos-app-page {
  --app-gutter: clamp(18px, 2.2vw, 38px) !important;
  background: #fff !important;
}

.tarvos-app-page .tarvos-app-hero {
  padding-top: clamp(5.1rem, 7vw, 6.6rem) !important;
  padding-bottom: clamp(2rem, 3.5vw, 3rem) !important;
}

.tarvos-app-page .tarvos-app-learning__eyebrow {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6437df !important;
}

.tarvos-app-page .tarvos-app-hero__title {
  max-width: 18ch !important;
}

.tarvos-app-page .tarvos-app-hero__guide {
  padding: 0 0 .2rem clamp(1.25rem, 2.4vw, 2rem) !important;
  border: 0 !important;
  border-left: 1px solid #e2e5ed !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-workspace {
  padding-top: clamp(1.35rem, 2.6vw, 2.25rem) !important;
}

/* Las superficies funcionales conservan separación, no profundidad decorativa. */
.tarvos-app-page .tarvos-app-content :is(
  .panel, .card, .control-panel, .result-panel, .canvas-panel,
  .viewer-panel, .element-panel, .controls-wrapper, .symbol-wrap,
  .panel-model, .panel-summary-box, .app-card, .data-card,
  .db-card, .dm-card, .fi-panel, .gm-selector, .m3d-search-card,
  .m3d-viewer-card, .m3d-info-card, .board-card, .histogram-card
) {
  box-shadow: none !important;
}

/* La primera franja de interacción de cada app se integra en el lienzo. */
.tarvos-app-page .tarvos-app-content :is(
  .controls,
  .tp-toolbar,
  .controls-card,
  .gm-selector,
  .m3d-search-card,
  .ar-controls,
  .on-controls,
  .oa-controls,
  .rl-controls-card
) {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem) !important;
  padding: 0 0 clamp(1.35rem, 2.6vw, 2rem) !important;
  border: 0 !important;
  border-bottom: 1px solid #e4e7ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Campos claramente interactivos, con selector visible. */
.tarvos-app-page .tarvos-app-content :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px !important;
  border: 1px solid #dbe1eb !important;
  border-radius: 12px !important;
  color: #11162b !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-content select {
  padding-right: 2.4rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237047f5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .85rem center !important;
  background-size: 16px !important;
  appearance: none !important;
  cursor: pointer !important;
}

.tarvos-app-page .tarvos-app-content :is(input, select, textarea):hover {
  border-color: #b8c1d1 !important;
}

.tarvos-app-page .tarvos-app-content :is(input, select, textarea):focus {
  border-color: #7047f5 !important;
  outline: 3px solid rgba(112, 71, 245, .12) !important;
  outline-offset: 0 !important;
}

.tarvos-app-page .tarvos-app-content label {
  color: #495671;
  font-weight: 760;
}

/* El área principal y el resultado lateral se leen como una sola herramienta. */
.tarvos-app-page .tarvos-app-content :is(.viz-area, .viewer-area, .canvas-panel, .viewer-panel) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-content :is(.element-panel, .data-card) {
  box-shadow: none !important;
}

/* Configuración electrónica: misma solución editorial que la tabla periódica. */
.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls {
  padding: 0 0 clamp(1.4rem, 3vw, 2rem) !important;
  border: 0 !important;
  border-bottom: 1px solid #e4e7ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr) !important;
  gap: 1.4rem !important;
  align-items: end !important;
  margin-bottom: 1rem !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-heading p {
  margin: 0 !important;
  color: #526078 !important;
  font-size: .84rem !important;
  line-height: 1.55 !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-eyebrow {
  margin-bottom: .3rem !important;
  color: #4f28bd !important;
  font-size: .68rem !important;
  font-weight: 880 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-heading h2 {
  margin: 0 !important;
  color: #11162b !important;
  font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
  font-weight: 880 !important;
  letter-spacing: -.045em !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(190px, 1fr)) minmax(280px, 1.1fr) !important;
  gap: .8rem !important;
  align-items: stretch !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .control-group {
  gap: .4rem !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .form-input {
  min-height: 52px !important;
  border-radius: 13px !important;
  background: #fff !important;
  font-size: .92rem !important;
  font-weight: 760 !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .control-toggle {
  justify-self: stretch !important;
  min-height: 52px !important;
  padding: .75rem .9rem !important;
  border: 1px solid #dbe1eb !important;
  border-radius: 13px !important;
  color: #34415b !important;
  background: #fafbfe !important;
  cursor: pointer !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .ce-notice {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: .8rem !important;
  margin: 1rem 0 0 !important;
  padding: .9rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e4e7ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .app-shell {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px) !important;
  gap: clamp(1.5rem, 2.6vw, 2.6rem) !important;
  padding-top: clamp(1.8rem, 3.5vw, 2.8rem) !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .viz-area {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .element-panel {
  position: sticky !important;
  top: 108px !important;
  padding: 0 0 0 clamp(1.2rem, 2vw, 2rem) !important;
  border: 0 !important;
  border-left: 1px solid #e4e7ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .symbol-wrap,
.tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .configuration-card {
  box-shadow: none !important;
}

@media (max-width: 980px) {
  .tarvos-app-page .tarvos-app-hero__guide {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-heading,
  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .app-shell {
    grid-template-columns: 1fr !important;
  }

  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .control-toggle {
    grid-column: 1 / -1 !important;
  }

  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .element-panel {
    position: static !important;
    padding: 1.8rem 0 0 !important;
    border-top: 1px solid #e4e7ef !important;
    border-left: 0 !important;
  }
}

@media (max-width: 620px) {
  .tarvos-app-page { --app-gutter: 12px !important; }

  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .controls-wrapper {
    grid-template-columns: 1fr !important;
  }

  .tarvos-app-page--configuracion-electronica .tarvos-legacy-app--configuracion-electronica .ce-page .control-toggle {
    grid-column: auto !important;
  }
}

/* =========================================================
   APPS · SISTEMA VISUAL FINAL
   Lienzo blanco continuo, jerarquía editorial y guías sin tarjetas decorativas.
   ========================================================= */
.tarvos-app-page {
  background: #fff !important;
}

.tarvos-app-page .tarvos-app-learning {
  overflow: visible !important;
  margin-top: 0 !important;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4.2rem, 7vw, 6.4rem) !important;
  border: 0 !important;
  border-top: 1px solid #e2e6ee !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__header {
  max-width: 860px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem) !important;
  text-align: left !important;
}

.tarvos-app-page .tarvos-app-learning__title {
  max-width: 21ch !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

.tarvos-app-page .tarvos-app-learning__layout {
  gap: 0 clamp(1.5rem, 3vw, 3rem) !important;
  padding-top: clamp(1.35rem, 2.6vw, 2rem);
  border-top: 1px solid #e2e6ee;
}

.tarvos-app-page .tarvos-app-learning__editorial,
.tarvos-app-page .tarvos-app-learning__faq,
.tarvos-app-page .tarvos-app-learning__visual {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__editorial > p {
  color: #46536d;
}

.tarvos-app-page .tarvos-app-learning__errors {
  margin-top: 1.35rem;
  padding: .1rem 0 .1rem 1rem !important;
  border: 0 !important;
  border-left: 3px solid #dc4b43 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__faq details {
  border: 0 !important;
  border-bottom: 1px solid #e2e6ee !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__faq details:first-of-type {
  border-top: 1px solid #e2e6ee !important;
}

.tarvos-app-page .tarvos-app-learning__faq details[open] {
  background: transparent !important;
}

.tarvos-app-page .tarvos-app-learning__faq summary,
.tarvos-app-page .tarvos-app-learning__faq details p {
  padding-inline: 0 !important;
}

.tarvos-app-page .tarvos-app-learning__faq summary::after {
  color: #5a31ce !important;
  background: #f1edff !important;
}

.tarvos-app-page .tarvos-app-learning__visual {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.3rem);
  padding-top: clamp(1.5rem, 3vw, 2.3rem) !important;
  border-top: 1px solid #e2e6ee !important;
}

@media (max-width: 980px) {
  .tarvos-app-page .tarvos-app-learning__layout {
    gap: 1.8rem;
  }
}


/* Recursos visuales interactivos reutilizables en todas las apps. */
.tarvos-app-page .tarvos-app-interactive-visual :is(canvas, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Evita renderizar de inicio las guías extensas situadas bajo la herramienta. */
@supports (content-visibility: auto) {
  .tarvos-app-page .tarvos-app-learning {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

/* =========================================================
   APPS · MAPAS CONCEPTUALES REUTILIZABLES 2026-07-29
   Gráficos ligeros, sin fondos difuminados ni dependencias externas.
   ========================================================= */
.tarvos-app-page .tarvos-concept-visual .tarvos-learning-visual__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tarvos-app-page .tarvos-concept-visual .tarvos-learning-visual__header h3 {
  margin: 0 0 .3rem;
  color: #11162b;
  font-size: 1.05rem;
  font-weight: 880;
  letter-spacing: -.035em;
}

.tarvos-app-page .tarvos-concept-visual .tarvos-learning-visual__header p {
  max-width: 780px;
  margin: 0;
  color: #66728a;
  font-size: .78rem;
  line-height: 1.58;
}

.tarvos-app-page .tarvos-concept-visual .tarvos-learning-visual__icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #5a31ce;
  background: #f1edff;
}

.tarvos-app-page .tarvos-concept-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.tarvos-app-page .tarvos-concept-card {
  --concept-color: #7047f5;
  --concept-soft: #f7f4ff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-content: start;
  min-width: 0;
  padding: .9rem .95rem;
  border-top: 3px solid var(--concept-color);
  background: var(--concept-soft);
}

.tarvos-app-page .tarvos-concept-card--blue {
  --concept-color: #3977db;
  --concept-soft: #f3f7ff;
}

.tarvos-app-page .tarvos-concept-card--cyan {
  --concept-color: #1594a9;
  --concept-soft: #f1fafb;
}

.tarvos-app-page .tarvos-concept-card--emerald {
  --concept-color: #148267;
  --concept-soft: #f1faf6;
}

.tarvos-app-page .tarvos-concept-card--amber {
  --concept-color: #b56a00;
  --concept-soft: #fff8eb;
}

.tarvos-app-page .tarvos-concept-card__symbol {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--concept-color) 30%, white);
  border-radius: 10px;
  color: var(--concept-color);
  background: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 850;
}

.tarvos-app-page .tarvos-concept-card__copy {
  min-width: 0;
}

.tarvos-app-page .tarvos-concept-card__copy h4 {
  margin: 0 0 .2rem;
  color: #202b42;
  font-size: .78rem;
  font-weight: 850;
}

.tarvos-app-page .tarvos-concept-card__copy strong {
  display: block;
  margin-bottom: .3rem;
  color: var(--concept-color);
  font-size: .68rem;
  line-height: 1.4;
}

.tarvos-app-page .tarvos-concept-card__copy p {
  margin: 0;
  color: #66728a;
  font-size: .65rem;
  line-height: 1.52;
}

.tarvos-app-page .tarvos-concept-card__slots {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-top: .15rem;
}

.tarvos-app-page .tarvos-concept-card__slots > span {
  display: inline-flex;
  width: 27px;
  height: 30px;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--concept-color) 28%, white);
  border-top: 0;
  color: var(--concept-color);
  background: rgba(255, 255, 255, .72);
  font-size: .65rem;
  font-weight: 900;
}

.tarvos-app-page .tarvos-concept-card__slots i {
  font-style: normal;
}

/* Los controles activos de tipo sutil conservan siempre contraste, incluso
   cuando la regla global de botones activos utiliza texto blanco. */
.tarvos-app-page :is(button, [role="button"])[data-tarvos-active-style="subtle"][aria-pressed="true"],
.tarvos-app-page--tabla-periodica .panel-model__motion[aria-pressed="true"] {
  color: #4723aa !important;
  border-color: #bcaef0 !important;
  background: #f7f4ff !important;
  box-shadow: none !important;
}

.tarvos-app-page--tabla-periodica .panel-model__motion[aria-pressed="true"] .panel-model__motion-icon,
.tarvos-app-page--tabla-periodica .panel-model__motion[aria-pressed="true"] .panel-model__motion-label {
  color: #4723aa !important;
}

@media (max-width: 980px) {
  .tarvos-app-page .tarvos-concept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tarvos-app-page .tarvos-concept-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   APPS · GUÍA VISUAL DE GEOMETRÍAS MOLECULARES
   ========================================================= */
.tarvos-app-page .tarvos-molecular-shapes .tarvos-learning-visual__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tarvos-app-page .tarvos-molecular-shapes .tarvos-learning-visual__header h3 {
  margin: 0 0 .3rem;
  color: #11162b;
  font-size: 1.05rem;
  font-weight: 880;
  letter-spacing: -.035em;
}

.tarvos-app-page .tarvos-molecular-shapes .tarvos-learning-visual__header p {
  max-width: 820px;
  margin: 0;
  color: #66728a;
  font-size: .78rem;
  line-height: 1.58;
}

.tarvos-app-page .tarvos-molecular-shapes .tarvos-learning-visual__icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #5a31ce;
  background: #f1edff;
}

.tarvos-app-page .tarvos-molecular-shapes__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
}

.tarvos-app-page .tarvos-molecular-shape {
  --shape-color: #7047f5;
  --shape-soft: #f7f4ff;
  min-width: 0;
  padding: .8rem .82rem;
  border-top: 3px solid var(--shape-color);
  background: var(--shape-soft);
}

.tarvos-app-page .tarvos-molecular-shape--blue {
  --shape-color: #3977db;
  --shape-soft: #f3f7ff;
}

.tarvos-app-page .tarvos-molecular-shape--cyan {
  --shape-color: #1594a9;
  --shape-soft: #f1fafb;
}

.tarvos-app-page .tarvos-molecular-shape--emerald {
  --shape-color: #148267;
  --shape-soft: #f1faf6;
}

.tarvos-app-page .tarvos-molecular-shape--amber {
  --shape-color: #b56a00;
  --shape-soft: #fff8eb;
}

.tarvos-app-page .tarvos-molecular-shape__diagram {
  display: grid;
  height: 74px;
  place-items: center;
  margin-bottom: .45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--shape-color) 18%, white);
}

.tarvos-app-page .tarvos-molecular-shape__diagram svg {
  width: 94px;
  max-width: 100%;
  height: 66px;
  overflow: visible;
}

.tarvos-app-page .tarvos-molecular-shape__diagram path {
  fill: none;
  stroke: color-mix(in srgb, var(--shape-color) 58%, #788398);
  stroke-width: 4;
  stroke-linecap: round;
}

.tarvos-app-page .tarvos-molecular-shape__diagram circle {
  fill: #fff;
  stroke: var(--shape-color);
  stroke-width: 2.6;
}

.tarvos-app-page .tarvos-molecular-shape__diagram circle:nth-of-type(2) {
  fill: var(--shape-color);
}

.tarvos-app-page .tarvos-molecular-shape__copy h4 {
  margin: 0 0 .18rem;
  color: #202b42;
  font-size: .78rem;
  font-weight: 860;
}

.tarvos-app-page .tarvos-molecular-shape__copy strong,
.tarvos-app-page .tarvos-molecular-shape__copy span {
  display: block;
}

.tarvos-app-page .tarvos-molecular-shape__copy strong {
  margin-bottom: .2rem;
  color: var(--shape-color);
  font-size: .67rem;
  line-height: 1.45;
}

.tarvos-app-page .tarvos-molecular-shape__copy span {
  color: #69758b;
  font-size: .63rem;
}

@media (max-width: 1080px) {
  .tarvos-app-page .tarvos-molecular-shapes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tarvos-app-page .tarvos-molecular-shapes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .tarvos-app-page .tarvos-molecular-shapes__grid {
    grid-template-columns: 1fr;
  }
}

/* Reusable visual workflow used by the chemistry apps. */
.tarvos-app-page .tarvos-workflow-visual {
  --workflow-violet: #6840ee;
  --workflow-line: #dfe4ef;
  min-width: 0;
}

.tarvos-app-page .tarvos-workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.tarvos-app-page .tarvos-workflow-step {
  --workflow-accent: #6840ee;
  position: relative;
  min-width: 0;
  padding: 1.05rem 0 0;
  border-top: 2px solid var(--workflow-accent);
}

.tarvos-app-page .tarvos-workflow-step--cyan { --workflow-accent: #087f9c; }
.tarvos-app-page .tarvos-workflow-step--emerald { --workflow-accent: #08775d; }
.tarvos-app-page .tarvos-workflow-step--amber { --workflow-accent: #a76400; }

.tarvos-app-page .tarvos-workflow-step__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  margin-bottom: .7rem;
  border: 1px solid color-mix(in srgb, var(--workflow-accent) 35%, white);
  border-radius: 50%;
  color: var(--workflow-accent);
  background: #fff;
  font-size: .78rem;
  font-weight: 850;
}

.tarvos-app-page .tarvos-workflow-step h4 {
  margin: 0 0 .75rem;
  color: #141a2c;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -.02em;
}

.tarvos-app-page .tarvos-workflow-step > p {
  margin: .75rem 0 0;
  color: #667187;
  font-size: .78rem;
  line-height: 1.62;
}

.tarvos-app-page .tarvos-workflow-step__graphic {
  min-height: 92px;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--workflow-accent) 12%, #e5e9f1);
  border-radius: 14px;
  background: color-mix(in srgb, var(--workflow-accent) 4%, #fbfcff);
  color: #222a3e;
}

.tarvos-app-page .tarvos-workflow-step__graphic dl,
.tarvos-app-page .tarvos-workflow-step__graphic dl div {
  margin: 0;
}

.tarvos-app-page .tarvos-workflow-step__graphic--family-map dl {
  display: grid;
  gap: .36rem;
}

.tarvos-app-page .tarvos-workflow-step__graphic--family-map dl div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

.tarvos-app-page .tarvos-workflow-step__graphic--family-map dt {
  font-weight: 800;
}

.tarvos-app-page .tarvos-workflow-step__graphic--family-map dd {
  margin: 0;
  color: var(--workflow-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tarvos-app-page .tarvos-workflow-step__graphic--charge-balance,
.tarvos-app-page .tarvos-workflow-step__graphic--atom-balance,
.tarvos-app-page .tarvos-workflow-step__graphic--molecule-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.tarvos-app-page .tarvos-workflow-ion {
  font-size: 1.15rem;
  font-weight: 780;
}

.tarvos-app-page .tarvos-workflow-step__graphic--charge-balance i,
.tarvos-app-page .tarvos-workflow-step__graphic--charge-balance b,
.tarvos-app-page .tarvos-workflow-step__graphic--molecule-flow b {
  color: #667085;
  font-style: normal;
}

.tarvos-app-page .tarvos-workflow-step__graphic--charge-balance strong,
.tarvos-app-page .tarvos-workflow-step__graphic--atom-balance strong {
  color: var(--workflow-accent);
  font-size: 1.1rem;
}

.tarvos-app-page .tarvos-workflow-step__graphic--naming {
  display: grid;
  gap: .4rem;
}

.tarvos-app-page .tarvos-workflow-step__graphic--naming div {
  display: grid;
  gap: .08rem;
  padding-left: .65rem;
  border-left: 2px solid var(--workflow-accent);
}

.tarvos-app-page .tarvos-workflow-step__graphic--naming b {
  font-size: .75rem;
}

.tarvos-app-page .tarvos-workflow-step__graphic--naming span {
  color: #69758b;
  font-size: .68rem;
}

.tarvos-app-page .tarvos-workflow-step__graphic--equation-system code {
  display: grid;
  gap: .28rem;
  color: #262d41;
  font-size: .72rem;
  white-space: normal;
}

.tarvos-app-page .tarvos-workflow-ratio {
  display: grid;
  min-height: 64px;
  place-items: center;
  color: var(--workflow-accent);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: .04em;
}

.tarvos-app-page .tarvos-workflow-molecule {
  display: inline-grid;
  min-width: 56px;
  min-height: 50px;
  place-items: center;
  padding: .45rem;
  border: 1px solid color-mix(in srgb, var(--workflow-accent) 28%, white);
  border-radius: 12px;
  background: #fff;
  color: var(--workflow-accent);
  font-size: .72rem;
  font-weight: 850;
}

.tarvos-app-page .tarvos-workflow-molecule--3d {
  border-radius: 50%;
  box-shadow: inset -8px -8px 14px rgba(104,64,238,.11);
}

@media (max-width: 900px) {
  .tarvos-app-page .tarvos-workflow-steps { grid-template-columns: 1fr; }
}

/* Visual guide for geometric-optics apps. */
.tarvos-app-page .tarvos-optics-guide {
  --optics-violet: #6f4df6;
  --optics-blue: #2878ff;
  --optics-green: #16a96b;
  --optics-orange: #ee8b16;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 10%, rgba(111, 77, 246, .11), transparent 18rem),
    linear-gradient(145deg, #ffffff, #faf9ff) !important;
}

.tarvos-app-page .tarvos-optics-guide__scene {
  margin-top: 1rem;
  padding: clamp(.5rem, 2vw, 1rem);
  border: 1px solid rgba(65, 49, 120, .09);
  border-radius: 18px;
  background:
    linear-gradient(rgba(111, 77, 246, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 77, 246, .035) 1px, transparent 1px),
    #fff;
  background-size: 28px 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 34px rgba(35, 24, 74, .06);
}

.tarvos-app-page .tarvos-optics-guide__scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.tarvos-app-page .tarvos-optics-guide__axis { fill: none; stroke: #928aa2; stroke-width: 1.5; }
.tarvos-app-page .tarvos-optics-guide__optic { fill: none; stroke: #1e1930; stroke-width: 4; stroke-linecap: round; }
.tarvos-app-page .tarvos-optics-guide__hatch { fill: none; stroke: #a49dad; stroke-width: 2; stroke-linecap: round; }
.tarvos-app-page .tarvos-optics-guide__ray { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.tarvos-app-page .tarvos-optics-guide__ray--blue { stroke: var(--optics-blue); }
.tarvos-app-page .tarvos-optics-guide__ray--green { stroke: var(--optics-green); }
.tarvos-app-page .tarvos-optics-guide__ray--orange { stroke: var(--optics-orange); }
.tarvos-app-page .tarvos-optics-guide__object,
.tarvos-app-page .tarvos-optics-guide__image { fill: none; stroke: #1e1930; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tarvos-app-page .tarvos-optics-guide__image { stroke: var(--optics-violet); }
.tarvos-app-page .tarvos-optics-guide__point--violet { fill: var(--optics-violet); }
.tarvos-app-page .tarvos-optics-guide__point--orange { fill: var(--optics-orange); }
.tarvos-app-page .tarvos-optics-guide__label { fill: #5f586d; font: 700 14px var(--tarvos-font-sans, Inter, sans-serif); }

.tarvos-app-page .tarvos-optics-guide__legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .8rem;
}

.tarvos-app-page .tarvos-optics-guide__legend-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .72rem .8rem;
  border: 1px solid rgba(65, 49, 120, .08);
  border-radius: 13px;
  background: rgba(255,255,255,.86);
}

.tarvos-app-page .tarvos-optics-guide__legend-item > span { width: 28px; height: 4px; flex: 0 0 auto; border-radius: 999px; background: var(--optics-blue); }
.tarvos-app-page .tarvos-optics-guide__legend-item--green > span { background: var(--optics-green); }
.tarvos-app-page .tarvos-optics-guide__legend-item--orange > span { background: var(--optics-orange); }
.tarvos-app-page .tarvos-optics-guide__legend-item div { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tarvos-app-page .tarvos-optics-guide__legend-item strong { color: #201a31; font-size: .76rem; line-height: 1.2; }
.tarvos-app-page .tarvos-optics-guide__legend-item small { color: #716a7f; font-size: .68rem; line-height: 1.3; }

@media (max-width: 720px) {
  .tarvos-app-page .tarvos-optics-guide__legend { grid-template-columns: 1fr; }
  .tarvos-app-page .tarvos-optics-guide__scene { padding: .25rem; }
}

/* =========================================================
   Guías visuales de ondas
   ========================================================= */
.tarvos-app-page .tarvos-wave-guide {
  --wave-guide-blue: #2868f0;
  --wave-guide-violet: #6f4df6;
  --wave-guide-orange: #e48718;
  --wave-guide-green: #159c68;
  --wave-guide-cyan: #0e9fba;
  --wave-guide-pink: #d84f9e;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 4%, rgba(111,77,246,.10), transparent 28%),
    linear-gradient(160deg, #fff 0%, #fbfaff 100%);
}
.tarvos-app-page .tarvos-wave-guide .tarvos-learning-visual__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tarvos-app-page .tarvos-wave-guide .tarvos-learning-visual__header h3 {
  margin: 0;
  color: #201a31;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: -.02em;
}
.tarvos-app-page .tarvos-wave-guide .tarvos-learning-visual__header p {
  margin: .45rem 0 0;
  color: #716a7f;
  font-size: .84rem;
  line-height: 1.55;
}
.tarvos-app-page .tarvos-wave-guide .tarvos-learning-visual__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(111,77,246,.10);
  color: #6f4df6;
}
.tarvos-app-page .tarvos-wave-guide__scene {
  overflow: hidden;
  padding: .35rem;
  border: 1px solid rgba(40,31,77,.09);
  border-radius: 18px;
  background:
    linear-gradient(rgba(111,77,246,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,77,246,.025) 1px, transparent 1px),
    #fff;
  background-size: 22px 22px;
}
.tarvos-app-page .tarvos-wave-guide__scene svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tarvos-app-page .tarvos-wave-guide__panel {
  fill: rgba(247,246,251,.82);
  stroke: rgba(40,31,77,.08);
  stroke-width: 1.5;
}
.tarvos-app-page .tarvos-wave-guide__axis,
.tarvos-app-page .tarvos-wave-guide__equilibrium {
  fill: none;
  stroke: #aaa4b4;
  stroke-width: 1.5;
}
.tarvos-app-page .tarvos-wave-guide__equilibrium { stroke-dasharray: 6 5; }
.tarvos-app-page .tarvos-wave-guide__support {
  fill: none;
  stroke: #777181;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 5;
}
.tarvos-app-page .tarvos-wave-guide__spring {
  fill: none;
  stroke: #797382;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tarvos-app-page .tarvos-wave-guide__wave {
  fill: none;
  stroke: var(--wave-guide-blue);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tarvos-app-page .tarvos-wave-guide__wave--space { stroke: var(--wave-guide-orange); }
.tarvos-app-page .tarvos-wave-guide__wave--time { stroke: var(--wave-guide-green); }
.tarvos-app-page .tarvos-wave-guide__amplitude,
.tarvos-app-page .tarvos-wave-guide__lambda,
.tarvos-app-page .tarvos-wave-guide__period,
.tarvos-app-page .tarvos-wave-guide__probe,
.tarvos-app-page .tarvos-wave-guide__playhead,
.tarvos-app-page .tarvos-wave-guide__propagation,
.tarvos-app-page .tarvos-wave-guide__phasor,
.tarvos-app-page .tarvos-wave-guide__projection,
.tarvos-app-page .tarvos-wave-guide__phasor-axis,
.tarvos-app-page .tarvos-wave-guide__phasor-circle {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tarvos-app-page .tarvos-wave-guide__amplitude,
.tarvos-app-page .tarvos-wave-guide__probe,
.tarvos-app-page .tarvos-wave-guide__phasor,
.tarvos-app-page .tarvos-wave-guide__projection { stroke: var(--wave-guide-violet); }
.tarvos-app-page .tarvos-wave-guide__lambda { stroke: var(--wave-guide-orange); }
.tarvos-app-page .tarvos-wave-guide__period { stroke: var(--wave-guide-green); }
.tarvos-app-page .tarvos-wave-guide__playhead,
.tarvos-app-page .tarvos-wave-guide__propagation { stroke: var(--wave-guide-blue); }
.tarvos-app-page .tarvos-wave-guide__probe,
.tarvos-app-page .tarvos-wave-guide__playhead,
.tarvos-app-page .tarvos-wave-guide__projection { stroke-dasharray: 5 4; }
.tarvos-app-page .tarvos-wave-guide__phasor-axis,
.tarvos-app-page .tarvos-wave-guide__phasor-circle { stroke: #b3adbc; stroke-width: 1.5; }
.tarvos-app-page .tarvos-wave-guide__particle {
  fill: var(--wave-guide-orange);
  stroke: #fff;
  stroke-width: 2.5;
}
.tarvos-app-page .tarvos-wave-guide__particle--violet { fill: var(--wave-guide-violet); }
.tarvos-app-page .tarvos-wave-guide__particle--blue { fill: var(--wave-guide-blue); }
.tarvos-app-page .tarvos-wave-guide__particle--green { fill: var(--wave-guide-green); }
.tarvos-app-page .tarvos-wave-guide__particle--cyan { fill: var(--wave-guide-cyan); }
.tarvos-app-page .tarvos-wave-guide__particle--pink { fill: var(--wave-guide-pink); }
.tarvos-app-page .tarvos-wave-guide__particle--orange { fill: var(--wave-guide-orange); }
.tarvos-app-page .tarvos-wave-guide__label {
  fill: #312a40;
  font: 800 14px var(--tarvos-font-sans, Inter, sans-serif);
}
.tarvos-app-page .tarvos-wave-guide__small-label {
  fill: #716a7f;
  font: 700 11px var(--tarvos-font-sans, Inter, sans-serif);
}
.tarvos-app-page .tarvos-wave-guide__formula {
  fill: #5f3fd2;
  font: italic 800 15px Georgia, serif;
}
.tarvos-app-page .tarvos-wave-guide__legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.tarvos-app-page .tarvos-wave-guide__legend-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .75rem;
  border: 1px solid rgba(40,31,77,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
}
.tarvos-app-page .tarvos-wave-guide__legend-item > span {
  width: 26px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--wave-guide-violet);
}
.tarvos-app-page .tarvos-wave-guide__legend-item--orange > span { background: var(--wave-guide-orange); }
.tarvos-app-page .tarvos-wave-guide__legend-item--green > span { background: var(--wave-guide-green); }
.tarvos-app-page .tarvos-wave-guide__legend-item--blue > span { background: var(--wave-guide-blue); }
.tarvos-app-page .tarvos-wave-guide__legend-item div { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.tarvos-app-page .tarvos-wave-guide__legend-item strong { color: #201a31; font-size: .72rem; line-height: 1.2; }
.tarvos-app-page .tarvos-wave-guide__legend-item small { color: #716a7f; font-size: .64rem; line-height: 1.35; }

@media (max-width: 720px) {
  .tarvos-app-page .tarvos-wave-guide__legend { grid-template-columns: 1fr; }
  .tarvos-app-page .tarvos-wave-guide__scene { padding: 0; }
}

/* =========================================================
   Guía visual de interferencia y difracción
   ========================================================= */
.tarvos-app-page .tarvos-interference-guide {
  --interference-violet: #6f4df6;
  --interference-blue: #2c72f4;
  --interference-orange: #e58a1b;
  --interference-green: #169d69;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 6%, rgba(111,77,246,.12), transparent 26%),
    linear-gradient(155deg, #fff 0%, #fbfaff 100%);
}
.tarvos-app-page .tarvos-interference-guide .tarvos-learning-visual__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tarvos-app-page .tarvos-interference-guide .tarvos-learning-visual__header h3 {
  margin: 0;
  color: #201a31;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: -.02em;
}
.tarvos-app-page .tarvos-interference-guide .tarvos-learning-visual__header p {
  margin: .45rem 0 0;
  color: #716a7f;
  font-size: .84rem;
  line-height: 1.55;
}
.tarvos-app-page .tarvos-interference-guide .tarvos-learning-visual__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(111,77,246,.10);
  color: var(--interference-violet);
}
.tarvos-app-page .tarvos-interference-guide__scene {
  overflow: hidden;
  padding: .35rem;
  border: 1px solid rgba(40,31,77,.09);
  border-radius: 18px;
  background:
    linear-gradient(rgba(111,77,246,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,77,246,.025) 1px, transparent 1px),
    #fff;
  background-size: 22px 22px;
}
.tarvos-app-page .tarvos-interference-guide__scene svg { display: block; width: 100%; height: auto; }
.tarvos-app-page .tarvos-interference-guide__panel { fill: rgba(247,246,251,.82); stroke: rgba(40,31,77,.08); stroke-width: 1.5; }
.tarvos-app-page .tarvos-interference-guide__incoming { fill: none; stroke: #a59db1; stroke-width: 1.8; stroke-linecap: round; opacity: .72; }
.tarvos-app-page .tarvos-interference-guide__barrier { fill: none; stroke: #30293d; stroke-width: 8; stroke-linecap: round; }
.tarvos-app-page .tarvos-interference-guide__slit { fill: none; stroke: var(--interference-violet); stroke-width: 4; stroke-linecap: round; }
.tarvos-app-page .tarvos-interference-guide__source { stroke: #fff; stroke-width: 2.5; }
.tarvos-app-page .tarvos-interference-guide__source--one { fill: var(--interference-blue); }
.tarvos-app-page .tarvos-interference-guide__source--two { fill: var(--interference-violet); }
.tarvos-app-page .tarvos-interference-guide__front { fill: none; stroke-width: 1.7; opacity: .38; }
.tarvos-app-page .tarvos-interference-guide__front--one { stroke: var(--interference-blue); }
.tarvos-app-page .tarvos-interference-guide__front--two { stroke: var(--interference-violet); }
.tarvos-app-page .tarvos-interference-guide__path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.tarvos-app-page .tarvos-interference-guide__path--one { stroke: var(--interference-blue); }
.tarvos-app-page .tarvos-interference-guide__path--two { stroke: var(--interference-violet); }
.tarvos-app-page .tarvos-interference-guide__probe { fill: var(--interference-orange); stroke: #fff; stroke-width: 3; }
.tarvos-app-page .tarvos-interference-guide__screen { fill: none; stroke: #ddd8e7; stroke-width: 10; stroke-linecap: round; }
.tarvos-app-page .tarvos-interference-guide__axis { fill: none; stroke: #aaa4b4; stroke-width: 1.3; stroke-dasharray: 5 5; }
.tarvos-app-page .tarvos-interference-guide__dimension { fill: none; stroke: var(--interference-orange); stroke-width: 1.8; stroke-linecap: round; }
.tarvos-app-page .tarvos-interference-guide__intensity { fill: none; stroke: var(--interference-violet); stroke-width: 3.2; stroke-linecap: round; }
.tarvos-app-page .tarvos-interference-guide__label { fill: #312a40; font: 800 13px var(--tarvos-font-sans, Inter, sans-serif); }
.tarvos-app-page .tarvos-interference-guide__small-label { fill: #716a7f; font: 700 11px var(--tarvos-font-sans, Inter, sans-serif); }
.tarvos-app-page .tarvos-interference-guide__formula { fill: #5f3fd2; font: italic 800 14px Georgia, serif; }
.tarvos-app-page .tarvos-interference-guide__conditions,
.tarvos-app-page .tarvos-interference-guide__legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.tarvos-app-page .tarvos-interference-guide__conditions > div,
.tarvos-app-page .tarvos-interference-guide__legend-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .72rem .78rem;
  border: 1px solid rgba(40,31,77,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.88);
}
.tarvos-app-page .tarvos-interference-guide__conditions > div { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; row-gap: .08rem; }
.tarvos-app-page .tarvos-interference-guide__conditions strong,
.tarvos-app-page .tarvos-interference-guide__legend-item strong { color: #211b31; font-size: .76rem; line-height: 1.2; }
.tarvos-app-page .tarvos-interference-guide__conditions small,
.tarvos-app-page .tarvos-interference-guide__legend-item small { color: #716a7f; font-size: .67rem; line-height: 1.35; }
.tarvos-app-page .tarvos-interference-guide__conditions small { grid-column: 2; }
.tarvos-app-page .tarvos-interference-guide__condition-dot { width: 11px; height: 11px; grid-row: 1 / span 2; border-radius: 50%; background: var(--interference-blue); box-shadow: 0 0 0 5px rgba(44,114,244,.10); }
.tarvos-app-page .tarvos-interference-guide__condition-dot--min { background: #8a8295; box-shadow: 0 0 0 5px rgba(138,130,149,.10); }
.tarvos-app-page .tarvos-interference-guide__condition-dot--envelope { background: var(--interference-orange); box-shadow: 0 0 0 5px rgba(229,138,27,.10); }
.tarvos-app-page .tarvos-interference-guide__legend-item > span { width: 28px; height: 4px; flex: 0 0 auto; border-radius: 999px; background: var(--interference-violet); }
.tarvos-app-page .tarvos-interference-guide__legend-item--blue > span { background: var(--interference-blue); }
.tarvos-app-page .tarvos-interference-guide__legend-item--orange > span { background: var(--interference-orange); }
.tarvos-app-page .tarvos-interference-guide__legend-item div { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 720px) {
  .tarvos-app-page .tarvos-interference-guide__conditions,
  .tarvos-app-page .tarvos-interference-guide__legend { grid-template-columns: 1fr; }
  .tarvos-app-page .tarvos-interference-guide__scene { padding: .15rem; }
}

/* =========================================================
   GUÍA VISUAL · REFRACCIÓN DE LA LUZ
   ========================================================= */
.tarvos-app-page .tarvos-refraction-guide {
  --refraction-violet: #6f4df6;
  --refraction-blue: #2c72f4;
  --refraction-green: #159b69;
  --refraction-orange: #df871b;
  --refraction-red: #d94f66;
  display: grid;
  gap: 1rem;
}
.tarvos-app-page .tarvos-refraction-guide .tarvos-learning-visual__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tarvos-app-page .tarvos-refraction-guide .tarvos-learning-visual__header h3 {
  margin: 0;
  color: #211b31;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: -.03em;
}
.tarvos-app-page .tarvos-refraction-guide .tarvos-learning-visual__header p {
  max-width: 720px;
  margin: .38rem 0 0;
  color: #716a7f;
  font-size: .78rem;
  line-height: 1.5;
}
.tarvos-app-page .tarvos-refraction-guide .tarvos-learning-visual__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--refraction-violet);
  background: #f3efff;
}
.tarvos-app-page .tarvos-refraction-guide__scene {
  overflow: hidden;
  padding: .5rem;
  border: 1px solid rgba(40,31,77,.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 80% 10%, rgba(111,77,246,.10), transparent 15rem),
    #fbfafc;
}
.tarvos-app-page .tarvos-refraction-guide__scene svg { display: block; width: 100%; height: auto; }
.tarvos-app-page .tarvos-refraction-guide__panel { fill: rgba(255,255,255,.88); stroke: rgba(40,31,77,.08); stroke-width: 1.5; }
.tarvos-app-page .tarvos-refraction-guide__medium { stroke: rgba(111,77,246,.10); stroke-width: 1; }
.tarvos-app-page .tarvos-refraction-guide__interface { fill: none; stroke: #938ba0; stroke-width: 2.2; }
.tarvos-app-page .tarvos-refraction-guide__normal { fill: none; stroke: #9f98aa; stroke-width: 1.5; stroke-dasharray: 6 6; }
.tarvos-app-page .tarvos-refraction-guide__incident,
.tarvos-app-page .tarvos-refraction-guide__reflected,
.tarvos-app-page .tarvos-refraction-guide__refracted,
.tarvos-app-page .tarvos-refraction-guide__guide,
.tarvos-app-page .tarvos-refraction-guide__white-ray,
.tarvos-app-page .tarvos-refraction-guide__spectrum {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tarvos-app-page .tarvos-refraction-guide__incident { stroke: var(--refraction-violet); stroke-width: 4; }
.tarvos-app-page .tarvos-refraction-guide__reflected { stroke: var(--refraction-orange); stroke-width: 3.2; }
.tarvos-app-page .tarvos-refraction-guide__refracted { stroke: var(--refraction-green); stroke-width: 4; }
.tarvos-app-page .tarvos-refraction-guide__guide { stroke: #aaa4b4; stroke-width: 1.4; stroke-dasharray: 5 5; }
.tarvos-app-page .tarvos-refraction-guide__arc { fill: none; stroke-width: 1.6; stroke-dasharray: 3 3; }
.tarvos-app-page .tarvos-refraction-guide__arc--incident { stroke: var(--refraction-violet); }
.tarvos-app-page .tarvos-refraction-guide__arc--refracted { stroke: var(--refraction-green); }
.tarvos-app-page .tarvos-refraction-guide__point { fill: #fff; stroke: var(--refraction-violet); stroke-width: 3; }
.tarvos-app-page .tarvos-refraction-guide__prism { fill: rgba(44,114,244,.07); stroke: rgba(44,114,244,.62); stroke-width: 2; }
.tarvos-app-page .tarvos-refraction-guide__white-ray { stroke: #d9d4e4; stroke-width: 5; }
.tarvos-app-page .tarvos-refraction-guide__spectrum { stroke-width: 5; }
.tarvos-app-page .tarvos-refraction-guide__spectrum--low { opacity: .82; }
.tarvos-app-page .tarvos-refraction-guide__label { fill: #312a40; font: 800 12px var(--tarvos-font-sans, Inter, sans-serif); }
.tarvos-app-page .tarvos-refraction-guide__small-label { fill: #716a7f; font: 700 11px var(--tarvos-font-sans, Inter, sans-serif); }
.tarvos-app-page .tarvos-refraction-guide__formula { fill: #5f3fd2; font: italic 800 14px Georgia, serif; }
.tarvos-app-page .tarvos-refraction-guide__conditions,
.tarvos-app-page .tarvos-refraction-guide__legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .65rem;
}
.tarvos-app-page .tarvos-refraction-guide__conditions > div,
.tarvos-app-page .tarvos-refraction-guide__legend-item {
  min-width: 0;
  padding: .82rem;
  border: 1px solid rgba(40,31,77,.08);
  border-radius: 14px;
  background: #fff;
}
.tarvos-app-page .tarvos-refraction-guide__conditions > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  row-gap: .08rem;
}
.tarvos-app-page .tarvos-refraction-guide__conditions strong,
.tarvos-app-page .tarvos-refraction-guide__legend-item strong { color: #211b31; font-size: .76rem; line-height: 1.2; }
.tarvos-app-page .tarvos-refraction-guide__conditions small,
.tarvos-app-page .tarvos-refraction-guide__legend-item small { color: #716a7f; font-size: .67rem; line-height: 1.35; }
.tarvos-app-page .tarvos-refraction-guide__conditions small { grid-column: 2; }
.tarvos-app-page .tarvos-refraction-guide__condition-dot {
  width: 11px;
  height: 11px;
  grid-row: 1 / span 2;
  border-radius: 50%;
  background: var(--refraction-green);
  box-shadow: 0 0 0 5px rgba(21,155,105,.10);
}
.tarvos-app-page .tarvos-refraction-guide__condition-dot--away { background: var(--refraction-blue); box-shadow: 0 0 0 5px rgba(44,114,244,.10); }
.tarvos-app-page .tarvos-refraction-guide__condition-dot--tir { background: var(--refraction-red); box-shadow: 0 0 0 5px rgba(217,79,102,.10); }
.tarvos-app-page .tarvos-refraction-guide__legend-item { display: flex; align-items: center; gap: .65rem; }
.tarvos-app-page .tarvos-refraction-guide__legend-item > span { width: 28px; height: 4px; flex: 0 0 auto; border-radius: 999px; background: var(--refraction-violet); }
.tarvos-app-page .tarvos-refraction-guide__legend-item--orange > span { background: var(--refraction-orange); }
.tarvos-app-page .tarvos-refraction-guide__legend-item--blue > span { background: var(--refraction-blue); }
.tarvos-app-page .tarvos-refraction-guide__legend-item div { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 760px) {
  .tarvos-app-page .tarvos-refraction-guide__conditions,
  .tarvos-app-page .tarvos-refraction-guide__legend { grid-template-columns: 1fr; }
  .tarvos-app-page .tarvos-refraction-guide__scene { padding: .15rem; }
}

/* =========================================================
   GUÍAS VISUALES · REGRESIÓN Y DISTRIBUCIÓN BINOMIAL
   ========================================================= */
.tarvos-app-page .tarvos-regression-guide,
.tarvos-app-page .tarvos-binomial-guide{
  overflow:hidden;
  background:linear-gradient(145deg,#fff 0%,#faf8ff 100%);
}
.tarvos-app-page .tarvos-regression-guide__diagram,
.tarvos-app-page .tarvos-binomial-guide__diagram{
  display:block;
  width:100%;
  height:auto;
  margin:.9rem 0 .75rem;
  border-radius:18px;
}
.tarvos-app-page .tarvos-regression-guide__legend{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
}
.tarvos-app-page .tarvos-regression-guide__legend>div{
  position:relative;
  min-width:0;
  padding:.7rem .68rem .68rem 1.9rem;
  border:1px solid rgba(80,58,118,.12);
  border-radius:13px;
  background:rgba(255,255,255,.86);
}
.tarvos-app-page .tarvos-regression-guide__legend strong,
.tarvos-app-page .tarvos-regression-guide__legend small{
  display:block;
}
.tarvos-app-page .tarvos-regression-guide__legend strong{
  color:#2b2138;
  font-size:.73rem;
  line-height:1.3;
}
.tarvos-app-page .tarvos-regression-guide__legend small{
  margin-top:.18rem;
  color:#756b83;
  font-size:.64rem;
  line-height:1.4;
}
.tarvos-app-page .tarvos-regression-guide__dot{
  position:absolute;
  left:.68rem;
  top:.78rem;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#171328;
}
.tarvos-app-page .tarvos-regression-guide__dot--fit{background:#6f3df4}
.tarvos-app-page .tarvos-regression-guide__dot--residual{background:#dd6b5a}
.tarvos-app-page .tarvos-binomial-guide__formulae{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
}
.tarvos-app-page .tarvos-binomial-guide__formulae>div{
  padding:.72rem .65rem;
  border:1px solid rgba(80,58,118,.12);
  border-radius:13px;
  background:rgba(255,255,255,.88);
  text-align:center;
}
.tarvos-app-page .tarvos-binomial-guide__formulae strong,
.tarvos-app-page .tarvos-binomial-guide__formulae span{
  display:block;
}
.tarvos-app-page .tarvos-binomial-guide__formulae strong{
  color:#6f3df4;
  font:800 .8rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.tarvos-app-page .tarvos-binomial-guide__formulae span{
  margin-top:.24rem;
  color:#756b83;
  font-size:.64rem;
  line-height:1.35;
}
@media(max-width:620px){
  .tarvos-app-page .tarvos-regression-guide__legend,
  .tarvos-app-page .tarvos-binomial-guide__formulae{grid-template-columns:1fr}
}

/*
 * Suelo táctil compartido para todas las herramientas. La especificidad de
 * #main permite corregir componentes heredados sin duplicar reglas por app.
 */
#main .tarvos-app-page .tarvos-app-workspace :is(button, [role="button"], a[role="button"]) {
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
}

#main .tarvos-app-page .tarvos-app-workspace :is(
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="range"],
  select:not(.dm-visually-hidden),
  textarea
) {
  min-block-size: 44px !important;
}

#main .tarvos-app-page .tarvos-app-workspace label:has(input:is([type="checkbox"], [type="radio"])) {
  min-block-size: 44px;
}

#main .tarvos-app-page .tarvos-app-workspace :is(
  button,
  [role="button"],
  a[role="button"],
  input,
  select,
  textarea,
  canvas,
  svg[tabindex]
):focus-visible {
  outline: 3px solid #17233f !important;
  outline-offset: 2px !important;
}

/* =========================================================
   APPS · GUÍA VISUAL UNIFICADA
   Replica la lectura editorial de la tabla periódica en todas las apps:
   explicación arriba, preguntas a la izquierda y mapa gráfico a la derecha.
   ========================================================= */
.tarvos-app-page .tarvos-app-learning__layout {
  grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr) !important;
  column-gap: clamp(1.6rem, 3.4vw, 3.4rem) !important;
  row-gap: 0 !important;
}

.tarvos-app-page .tarvos-app-learning__editorial {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.2rem) !important;
  border-bottom: 1px solid #e2e6ee !important;
}

.tarvos-app-page .tarvos-app-learning__editorial > p {
  margin: 0 !important;
}

.tarvos-app-page .tarvos-app-learning__editorial .tarvos-app-learning__errors {
  margin: 0 !important;
  align-self: start;
}

.tarvos-app-page .tarvos-app-learning__faq {
  grid-column: 1;
  padding-top: clamp(1.5rem, 3vw, 2.2rem) !important;
}

.tarvos-app-page .tarvos-app-learning__visual {
  grid-column: 2;
  margin-top: 0 !important;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0 0 clamp(1.2rem, 2.6vw, 2.4rem) !important;
  border-top: 0 !important;
  border-left: 1px solid #e2e6ee !important;
}

.tarvos-app-page .tarvos-app-learning__visual :is(
  .tarvos-optics-guide__scene,
  .tarvos-wave-guide__scene,
  .tarvos-refraction-guide__scene,
  .tarvos-interference-guide__scene
) {
  max-height: 310px;
  padding: .35rem !important;
  border-color: #e2e6ee !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__visual :is(
  .tarvos-optics-guide__scene,
  .tarvos-wave-guide__scene,
  .tarvos-refraction-guide__scene,
  .tarvos-interference-guide__scene
) svg {
  width: 100% !important;
  max-height: 292px;
}

.tarvos-app-page .tarvos-regression-guide__diagram,
.tarvos-app-page .tarvos-binomial-guide__diagram {
  max-height: 275px;
  object-fit: contain;
}

.tarvos-app-page .tarvos-workflow-steps {
  grid-template-columns: 1fr !important;
}

.tarvos-app-page .tarvos-concept-grid,
.tarvos-app-page .tarvos-molecular-shapes__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.tarvos-app-page :is(
  .tarvos-optics-guide,
  .tarvos-wave-guide,
  .tarvos-refraction-guide,
  .tarvos-interference-guide,
  .tarvos-regression-guide,
  .tarvos-binomial-guide
) {
  background: transparent !important;
}

@media (max-width: 980px) {
  .tarvos-app-page .tarvos-app-learning__layout,
  .tarvos-app-page .tarvos-app-learning__editorial {
    grid-template-columns: 1fr !important;
  }

  .tarvos-app-page .tarvos-app-learning__faq,
  .tarvos-app-page .tarvos-app-learning__visual {
    grid-column: 1;
  }

  .tarvos-app-page .tarvos-app-learning__visual {
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #e2e6ee !important;
  }
}

@media (max-width: 620px) {
  .tarvos-app-page .tarvos-concept-grid,
  .tarvos-app-page .tarvos-molecular-shapes__grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   NORMA GLOBAL DE APPS — SIN SCROLL VERTICAL ANIDADO
   La página crece con la herramienta. Solo conservan overflow
   las tablas, carruseles horizontales y visores a pantalla completa.
   ========================================================= */
.tarvos-app-page :is(
  .trv-regression__shell,
  .trv-binomial__shell,
  .mw-shell,
  .ha-shell,
  .ol-shell,
  .om-shell
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.tarvos-app-page :is(
  .trv-regression__sidebar,
  .trv-regression__main,
  .trv-regression__sidebar-scroll,
  .trv-regression__workspace,
  .trv-binomial__sidebar,
  .trv-binomial__main,
  .trv-binomial__sidebar-scroll,
  .trv-binomial__workspace,
  .mw-sidebar-scroll,
  .mw-workspace,
  .ha-sidebar-scroll,
  .ha-workspace,
  .ol-sidebar-scroll,
  .ol-workspace,
  .om-sidebar-scroll,
  .om-workspace
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
}

/* El scroll horizontal sigue permitido en tablas y pestañas estrechas. */
.tarvos-app-page :is(
  .trv-reg-table-wrap,
  .trv-reg-metrics-wrap,
  .fi-table-wrap,
  .trv-tabs
) {
  overflow-x: auto !important;
}

/* Contraste único para todas las acciones principales violetas. */
.tarvos-app-page :is(
  .trv-primary-button,
  .trv-mini-button--primary,
  .fi-primary,
  .iw-primary,
  .nc-primary,
  .tp-primary,
  button[class*="primary"],
  a[class*="primary"],
  button[class*="violet"],
  a[class*="violet"]
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.tarvos-app-page :is(
  .trv-primary-button,
  .trv-mini-button--primary,
  .fi-primary,
  .iw-primary,
  .nc-primary,
  .tp-primary,
  button[class*="primary"],
  a[class*="primary"],
  button[class*="violet"],
  a[class*="violet"]
) :is(span,strong,small,svg) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* =========================================================
   GUÍAS ÚTILES SIN ILUSTRACIONES DECORATIVAS · 20260803
   ========================================================= */
.tarvos-app-page .tarvos-principles-guide {
  --principle-tone: #6f4df6;
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(38, 31, 70, .11);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28, 21, 61, .055);
}
.tarvos-app-page .tarvos-principles-guide__header {
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(38, 31, 70, .09);
}
.tarvos-app-page .tarvos-principles-guide__header p {
  margin: 0 0 .3rem;
  color: var(--principle-tone);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tarvos-app-page .tarvos-principles-guide__header h3 {
  margin: 0;
  color: #1a152c;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.14;
  letter-spacing: -.035em;
}
.tarvos-app-page .tarvos-principles-guide__header span {
  display: block;
  margin-top: .45rem;
  color: #6e687a;
  font-size: .78rem;
  line-height: 1.5;
}
.tarvos-app-page .tarvos-principles-guide__rules {
  display: grid;
  gap: .65rem;
}
.tarvos-app-page .tarvos-principles-guide__rule {
  --rule-color: #6f4df6;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: .85rem .9rem;
  border: 1px solid rgba(38, 31, 70, .095);
  border-left: 3px solid var(--rule-color);
  border-radius: .9rem;
  background: #fafafd;
}
.tarvos-app-page .tarvos-principles-guide__rule--blue { --rule-color: #2878ff; }
.tarvos-app-page .tarvos-principles-guide__rule--green { --rule-color: #16a96b; }
.tarvos-app-page .tarvos-principles-guide__rule--orange { --rule-color: #ee8b16; }
.tarvos-app-page .tarvos-principles-guide__rule--violet { --rule-color: #6f4df6; }
.tarvos-app-page .tarvos-principles-guide__index {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .7rem;
  background: color-mix(in srgb, var(--rule-color) 12%, white);
  color: var(--rule-color);
  font-size: .72rem;
  font-weight: 900;
}
.tarvos-app-page .tarvos-principles-guide__rule strong {
  display: block;
  color: #211a34;
  font-size: .82rem;
  line-height: 1.3;
}
.tarvos-app-page .tarvos-principles-guide__rule p {
  margin: .18rem 0 0;
  color: #696275;
  font-size: .72rem;
  line-height: 1.45;
}
.tarvos-app-page .tarvos-principles-guide__footer {
  display: grid;
  gap: .2rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(38, 31, 70, .09);
  color: #6d6678;
  font-size: .72rem;
  line-height: 1.45;
}
.tarvos-app-page .tarvos-principles-guide__footer strong { color: #2b243a; }
@media (max-width: 720px) {
  .tarvos-app-page .tarvos-principles-guide__rule {
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: .75rem;
  }
  .tarvos-app-page .tarvos-principles-guide__index {
    width: 1.9rem;
    height: 1.9rem;
  }
}

/* =========================================================
   APPS · SHELL PREMIUM UNIFICADO V4 · 2026-08-26
   Mismo lenguaje visual que Recursos: hero blanco y editorial,
   herramienta contenida y cierre de aprendizaje sin ruido visual.
   ========================================================= */
body:has(.tarvos-app-page),
body:has(.tarvos-app-page) #main,
body:has(.tarvos-app-page) .site-main,
body:has(.tarvos-app-page) .content-area,
body:has(.tarvos-app-page) [data-content="normal"] {
  background: #fff !important;
  background-image: none !important;
}

.tarvos-app-page {
  --app-shell: 1320px !important;
  --app-gutter: clamp(18px, 4vw, 52px) !important;
  --app-ink-premium: #111426;
  --app-copy-premium: #58647b;
  --app-muted-premium: #7c879a;
  --app-line-premium: #e7e9ef;
  --app-soft-premium: #f7f7fa;
  --app-softer-premium: #fafafd;
  --app-violet-premium: #6d43ed;
  --app-violet-strong-premium: #5730ce;
  width: 100% !important;
  max-width: none !important;
  background: #fff !important;
}

.tarvos-app-page :is(.tarvos-app-hero, .tarvos-app-workspace, .tarvos-app-learning) {
  width: min(var(--app-shell), calc(100% - (var(--app-gutter) * 2))) !important;
  max-width: var(--app-shell) !important;
  margin-inline: auto !important;
}

/* Hero idéntico en las 16 apps: sin eyebrow, tarjeta lateral ni glow. */
.tarvos-app-page .tarvos-app-hero {
  display: flex !important;
  min-height: clamp(370px, 30vw, 410px) !important;
  align-items: center !important;
  margin-top: 0 !important;
  padding: clamp(54px, 6.2vw, 86px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: left !important;
}

.tarvos-app-page .tarvos-app-hero::before,
.tarvos-app-page .tarvos-app-hero::after,
.tarvos-app-page .tarvos-app-hero__eyebrow,
.tarvos-app-page .tarvos-app-hero__grid,
.tarvos-app-page .tarvos-app-hero__guide,
.tarvos-app-page .tarvos-app-hero__actions {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-hero__grid {
  display: contents !important;
}

.tarvos-app-page .tarvos-app-hero__copy {
  width: 100% !important;
  max-width: 1020px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tarvos-app-page .tarvos-app-hero__title {
  max-width: 1000px !important;
  margin: 0 !important;
  color: var(--app-ink-premium) !important;
  font-family: inherit !important;
  font-size: clamp(3rem, 5vw, 4.45rem) !important;
  font-weight: 820 !important;
  letter-spacing: -.055em !important;
  line-height: 1.015 !important;
  text-align: left !important;
  text-wrap: balance;
}

.tarvos-app-page .tarvos-app-hero__summary {
  max-width: 790px !important;
  margin: 24px 0 0 !important;
  color: var(--app-copy-premium) !important;
  font-size: clamp(1.02rem, 1.25vw, 1.14rem) !important;
  font-weight: 450 !important;
  line-height: 1.72 !important;
  text-align: left !important;
  text-wrap: pretty;
}

.tarvos-app-page .tarvos-app-hero__jump {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin-top: 28px !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(109, 67, 237, .32) !important;
  border-radius: 0 !important;
  color: var(--app-violet-strong-premium) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .86rem !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

.tarvos-app-page .tarvos-app-hero__jump svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  stroke: currentColor !important;
  transition: transform .18s ease !important;
}

.tarvos-app-page .tarvos-app-hero__jump:hover svg,
.tarvos-app-page .tarvos-app-hero__jump:focus-visible svg {
  transform: translateX(3px) !important;
}

/* Área funcional: nada de banda gris a todo el ancho. */
.tarvos-app-page .tarvos-app-workspace {
  margin-top: 0 !important;
  padding: 0 0 clamp(56px, 6vw, 82px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-workspace::before,
.tarvos-app-page .tarvos-app-workspace::after {
  display: none !important;
  content: none !important;
}

.tarvos-app-page .tarvos-app-workspace__inner,
.tarvos-app-page .tarvos-app-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Cierre editorial: mismo ritmo que la guía premium de Recursos. */
.tarvos-app-page .tarvos-app-learning {
  display: block !important;
  margin-top: clamp(74px, 8vw, 112px) !important;
  margin-bottom: clamp(72px, 8vw, 110px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning::before,
.tarvos-app-page .tarvos-app-learning::after,
.tarvos-app-page .tarvos-app-learning__eyebrow {
  display: none !important;
  content: none !important;
}

.tarvos-app-page .tarvos-app-learning__header {
  display: grid !important;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1.14fr) !important;
  align-items: end !important;
  gap: clamp(36px, 6vw, 88px) !important;
  max-width: none !important;
  margin: 0 0 clamp(38px, 5vw, 58px) !important;
  padding: 0 !important;
  text-align: left !important;
}

.tarvos-app-page .tarvos-app-learning__title {
  max-width: 650px !important;
  margin: 0 !important;
  color: var(--app-ink-premium) !important;
  font-size: clamp(2.15rem, 3.4vw, 3.15rem) !important;
  font-weight: 810 !important;
  letter-spacing: -.052em !important;
  line-height: 1.06 !important;
  text-align: left !important;
  text-wrap: balance;
}

.tarvos-app-page .tarvos-app-learning__lead {
  max-width: 680px !important;
  margin: 0 !important;
  color: var(--app-copy-premium) !important;
  font-size: .98rem !important;
  line-height: 1.72 !important;
  text-align: left !important;
  text-wrap: pretty;
}

.tarvos-app-page .tarvos-app-learning__layout {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.tarvos-app-page .tarvos-app-learning__editorial {
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__editorial:empty {
  display: none !important;
}

.tarvos-app-page .tarvos-app-learning__errors {
  display: grid !important;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr) !important;
  gap: clamp(24px, 4vw, 54px) !important;
  align-items: start !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: var(--app-copy-premium) !important;
  background: #f5f2fb !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__errors h3 {
  margin: 0 !important;
  color: var(--app-ink-premium) !important;
  font-size: 1.08rem !important;
  font-weight: 790 !important;
  letter-spacing: -.025em !important;
  line-height: 1.35 !important;
}

.tarvos-app-page .tarvos-app-learning__errors ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: #606b80 !important;
  font-size: .82rem !important;
  line-height: 1.58 !important;
}

.tarvos-app-page .tarvos-app-learning__errors li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 16px !important;
  color: inherit !important;
}

.tarvos-app-page .tarvos-app-learning__errors li::before {
  position: absolute !important;
  top: .62em !important;
  left: 0 !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--app-violet-premium) !important;
  content: "" !important;
}

.tarvos-app-page .tarvos-app-learning__errors li::marker { content: "" !important; }

/* Visual didáctica: una sola superficie sobria, sin sombras ni bordes dobles. */
.tarvos-app-page .tarvos-app-learning__visual {
  grid-column: 1 / span 7 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(22px, 2.6vw, 30px) !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--app-soft-premium) !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__visual :is(.tarvos-principles-guide, .tarvos-regression-guide) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* FAQ: panel suave con preguntas blancas, igual que Recursos. */
.tarvos-app-page .tarvos-app-learning__faq {
  grid-column: 8 / -1 !important;
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(24px, 2.8vw, 32px) !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--app-soft-premium) !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__faq > h3 {
  margin: 0 0 8px !important;
  color: var(--app-ink-premium) !important;
  font-size: 1.2rem !important;
  font-weight: 790 !important;
  letter-spacing: -.028em !important;
  line-height: 1.3 !important;
}

.tarvos-app-page .tarvos-app-learning__faq details {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(17, 20, 38, .02) !important;
}

.tarvos-app-page .tarvos-app-learning__faq details[open] {
  border: 0 !important;
  background: #fff !important;
}

.tarvos-app-page .tarvos-app-learning__faq summary {
  min-height: 0 !important;
  padding: 16px 48px 16px 18px !important;
  color: var(--app-ink-premium) !important;
  font-size: .91rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.tarvos-app-page .tarvos-app-learning__faq summary::after {
  right: 14px !important;
  width: 25px !important;
  height: 25px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--app-violet-strong-premium) !important;
  background: #f4f1fd !important;
  font-size: .92rem !important;
}

.tarvos-app-page .tarvos-app-learning__faq details p {
  max-width: 780px !important;
  margin: -2px 0 0 !important;
  padding: 0 48px 18px 18px !important;
  color: #657086 !important;
  font-size: .86rem !important;
  line-height: 1.65 !important;
}

/* Si una app no tiene visual, la FAQ utiliza todo el ancho. */
.tarvos-app-page .tarvos-app-learning__layout > .tarvos-app-learning__faq:first-child,
.tarvos-app-page .tarvos-app-learning__editorial + .tarvos-app-learning__faq:last-child {
  grid-column: 1 / -1 !important;
}

@media (max-width: 980px) {
  .tarvos-app-page .tarvos-app-learning__header {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .tarvos-app-page .tarvos-app-learning__errors {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .tarvos-app-page .tarvos-app-learning__errors ul {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tarvos-app-page .tarvos-app-learning__visual,
  .tarvos-app-page .tarvos-app-learning__faq {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  .tarvos-app-page {
    --app-gutter: 15px !important;
  }

  .tarvos-app-page .tarvos-app-hero {
    display: block !important;
    min-height: 0 !important;
    padding: 38px 0 54px !important;
  }

  .tarvos-app-page .tarvos-app-hero__title {
    font-size: clamp(2.45rem, 11.8vw, 3.35rem) !important;
    letter-spacing: -.05em !important;
  }

  .tarvos-app-page .tarvos-app-hero__summary { margin-top: 18px !important; }
  .tarvos-app-page .tarvos-app-hero__jump { margin-top: 22px !important; }
  .tarvos-app-page .tarvos-app-workspace { padding-bottom: 48px !important; }
  .tarvos-app-page .tarvos-app-learning { margin-top: 66px !important; }
  .tarvos-app-page .tarvos-app-learning__header { margin-bottom: 30px !important; }
  .tarvos-app-page .tarvos-app-learning__title { font-size: clamp(2rem, 9vw, 2.65rem) !important; }
  .tarvos-app-page .tarvos-app-learning__errors,
  .tarvos-app-page .tarvos-app-learning__visual,
  .tarvos-app-page .tarvos-app-learning__faq {
    padding: 20px !important;
    border-radius: 18px !important;
  }
}

/* =========================================================
   APPS · SHELL PREMIUM V5 · 2026-08-27
   Cierre editorial equivalente a Recursos, sin gráficos decorativos.
   ========================================================= */
.tarvos-app-page .tarvos-app-learning__layout {
  display: block !important;
}

/* Defensa ante HTML cacheado de la versión anterior: las visualizaciones
   editoriales inferiores dejan de formar parte de la plantilla de apps. */
.tarvos-app-page .tarvos-app-learning__visual {
  display: none !important;
}

.tarvos-app-page .tarvos-app-learning__errors {
  display: grid !important;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr) !important;
  gap: clamp(24px, 4vw, 54px) !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #606b80 !important;
  background: #f5f2fb !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__note-heading {
  min-width: 0 !important;
}

.tarvos-app-page .tarvos-app-learning__note {
  display: inline-block !important;
  margin: 0 0 10px !important;
  color: var(--app-violet-strong-premium, #5730ce) !important;
  font-size: .66rem !important;
  font-weight: 820 !important;
  letter-spacing: .11em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.tarvos-app-page .tarvos-app-learning__errors h3 {
  margin: 0 !important;
  color: var(--app-ink-premium, #111426) !important;
  font-size: 1.08rem !important;
  font-weight: 790 !important;
  letter-spacing: -.025em !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.tarvos-app-page .tarvos-app-learning__errors ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: #606b80 !important;
  font-size: .82rem !important;
  line-height: 1.58 !important;
}

.tarvos-app-page .tarvos-app-learning__errors li {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 16px !important;
  color: inherit !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.tarvos-app-page .tarvos-app-learning__errors li::before {
  position: absolute !important;
  top: .62em !important;
  left: 0 !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--app-violet-premium, #6d43ed) !important;
  content: "" !important;
}

.tarvos-app-page .tarvos-app-learning__errors li::marker {
  content: "" !important;
}

.tarvos-app-page .tarvos-app-learning__faq {
  display: grid !important;
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr) !important;
  gap: clamp(36px, 6vw, 78px) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: clamp(64px, 7vw, 90px) 0 0 !important;
  padding: clamp(28px, 3.2vw, 40px) !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--app-soft-premium, #f7f7fa) !important;
  box-shadow: none !important;
}

.tarvos-app-page .tarvos-app-learning__faq-heading,
.tarvos-app-page .tarvos-app-learning__faq-list {
  min-width: 0 !important;
}

.tarvos-app-page .tarvos-app-learning__faq-heading h3 {
  margin: 0 !important;
  color: var(--app-ink-premium, #111426) !important;
  font-size: 1.22rem !important;
  font-weight: 790 !important;
  letter-spacing: -.028em !important;
  line-height: 1.3 !important;
}

.tarvos-app-page .tarvos-app-learning__faq-heading p {
  margin: 8px 0 0 !important;
  color: var(--app-muted-premium, #7c879a) !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}

.tarvos-app-page .tarvos-app-learning__faq-list {
  display: grid !important;
  gap: 9px !important;
}

.tarvos-app-page .tarvos-app-learning__faq-list details {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(17, 20, 38, .02) !important;
}

.tarvos-app-page .tarvos-app-learning__faq-list details[open] {
  background: #fff !important;
}

.tarvos-app-page .tarvos-app-learning__faq-list summary {
  min-height: 0 !important;
  padding: 16px 48px 16px 18px !important;
  color: var(--app-ink-premium, #111426) !important;
  font-size: .91rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.tarvos-app-page .tarvos-app-learning__faq-list details p {
  max-width: 780px !important;
  margin: -2px 0 0 !important;
  padding: 0 48px 18px 18px !important;
  color: #657086 !important;
  font-size: .86rem !important;
  line-height: 1.65 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 980px) {
  .tarvos-app-page .tarvos-app-learning__errors,
  .tarvos-app-page .tarvos-app-learning__faq {
    grid-template-columns: 1fr !important;
  }

  .tarvos-app-page .tarvos-app-learning__errors {
    gap: 18px !important;
  }

  .tarvos-app-page .tarvos-app-learning__errors ul {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tarvos-app-page .tarvos-app-learning__faq {
    gap: 22px !important;
  }
}

@media (max-width: 720px) {
  .tarvos-app-page .tarvos-app-learning__errors,
  .tarvos-app-page .tarvos-app-learning__faq {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .tarvos-app-page .tarvos-app-learning__faq {
    margin-top: 50px !important;
  }
}

/* =========================================================
   APPS · PARIDAD EXACTA CON RECURSOS V6 · 2026-08-27
   Replica la geometría del shell premium de Recursos. Este
   bloque va al final para neutralizar reglas históricas de Apps.
   ========================================================= */
.tarvos-app-page {
  --app-shell: 1320px !important;
}

.tarvos-app-page :is(.tarvos-app-hero, .tarvos-app-workspace, .tarvos-app-learning) {
  width: min(1320px, calc(100% - clamp(32px, 6vw, 96px))) !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
}

.tarvos-app-page .tarvos-app-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: clamp(370px, 30vw, 410px) !important;
  padding: clamp(54px, 6.2vw, 86px) 0 !important;
}

.tarvos-app-page .tarvos-app-hero__copy {
  width: 100% !important;
  max-width: 1020px !important;
  margin: 0 !important;
  align-self: auto !important;
}

.tarvos-app-page .tarvos-app-content,
.tarvos-app-page .tarvos-app-workspace > :first-child {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 720px) {
  .tarvos-app-page :is(.tarvos-app-hero, .tarvos-app-workspace, .tarvos-app-learning) {
    width: min(1320px, calc(100% - 30px)) !important;
  }

  .tarvos-app-page .tarvos-app-hero {
    display: block !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 38px 0 54px !important;
  }
}