:root {
  --guinda: #9b2247;
  --guinda-2: #7f1b3a;
  --guinda-soft: #f8edf1;
  --verde: #1e5b4f;
  --dorado: #a57f2c;
  --ink: #171b21;
  --muted: #5f6875;
  --bg: #ffffff;
  --surface: #ffffff;
  --line: rgba(23, 27, 33, .11);
  --shadow: 0 18px 48px rgba(23, 27, 33, .10);
  --header-h: 104px;
  --nav-w: 116px;
  --gap: clamp(14px, 2vw, 26px);
  --radius-xl: 28px;
  --radius: 20px;
  --radius-sm: 14px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(155, 34, 71, .06), transparent 28%),
    radial-gradient(circle at 90% 100%, rgba(30, 91, 79, .04), transparent 30%),
    #fff;
}
button, input, textarea, select, video { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 30;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid rgba(155, 34, 71, .16);
  box-shadow: 0 10px 32px rgba(23, 27, 33, .06);
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(320px, 1.15fr) minmax(360px, .95fr);
  align-items: center;
  gap: 18px;
  padding: 0 calc(var(--nav-w) + 18px) 0 28px;
}

.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--guinda), var(--dorado), var(--verde));
}

.header-logo {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
}
.logo-right { justify-content: flex-end; gap: 10px; overflow: hidden; }
.logo-box {
  display: grid;
  place-items: center;
  width: 92px;
  height: 74px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(155, 34, 71, .14);
  box-shadow: 0 8px 20px rgba(23, 27, 33, .07);
  overflow: hidden;
  padding: 8px;
  flex: 0 0 auto;
}
.logo-circle { border-radius: 50%; width: 78px; height: 78px; padding: 1px; }
.logo-wide { width: clamp(180px, 16vw, 238px); height: 78px; padding: 4px 8px; border-radius: 18px; }
.logo-hmz { width: 78px; height: 78px; padding: 2px; border-radius: 18px; }
.logo-box img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.logo-circle img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.logo-hmz img, .logo-sedena-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-title { display: grid; gap: 2px; min-width: 0; }
.brand-title strong { color: var(--guinda); font-size: clamp(20px, 1.8vw, 30px); line-height: 1; }
.brand-title small { color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-center { text-align: center; min-width: 0; display: grid; gap: 4px; }
.header-center span { color: var(--guinda); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.header-center strong { color: var(--ink); font-size: clamp(15px, 1.18vw, 20px); line-height: 1.12; }

.app-nav {
  position: fixed;
  z-index: 35;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: var(--nav-w);
  padding: 14px 10px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  border-left: 1px solid rgba(155, 34, 71, .16);
  box-shadow: -10px 0 32px rgba(23, 27, 33, .06);
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.nav-item {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 8px 6px;
  font-weight: 850;
  transition: .2s ease;
}
.nav-item img { width: 29px; height: 29px; object-fit: contain; }
.nav-item span { font-size: 12px; line-height: 1; }
.nav-item:hover,
.nav-item.active {
  transform: translateX(-2px);
  color: var(--guinda);
  background: var(--guinda-soft);
  border-color: rgba(155, 34, 71, .18);
}

.book-app {
  position: fixed;
  inset: var(--header-h) var(--nav-w) 0 0;
  overflow: hidden;
  padding: var(--gap);
  perspective: 1800px;
}
.book-pages { position: relative; width: 100%; height: 100%; }
.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-11deg) translateX(34px) scale(.985);
  transform-origin: left center;
  transition: opacity .34s ease, transform .46s cubic-bezier(.22,.72,.18,1);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98)),
    radial-gradient(circle at 5% 10%, rgba(155, 34, 71, .08), transparent 28%);
  border: 1px solid var(--line);
  box-shadow: 0 22px 60px rgba(23, 27, 33, .09);
}
.page.active { opacity: 1; pointer-events: auto; transform: rotateY(0) translateX(0) scale(1); }
.page.was-active { transform: rotateY(13deg) translateX(-28px) scale(.985); }

.page-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: clamp(20px, 2.3vw, 34px);
  display: grid;
  gap: clamp(14px, 1.7vw, 24px);
}
.home-grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.hero-copy { min-width: 0; align-self: center; }
.kicker { margin: 0 0 8px; color: var(--guinda); font-size: clamp(12px, 1vw, 15px); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(56px, 7vw, 112px); line-height: .86; letter-spacing: -.055em; color: var(--guinda); text-transform: uppercase; }
h2 { margin: 0 0 10px; font-size: clamp(34px, 4vw, 62px); line-height: .96; letter-spacing: -.045em; color: var(--guinda); }
h3 { margin: 0 0 8px; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.04; color: var(--ink); }
p { margin-bottom: 0; color: var(--muted); line-height: 1.35; font-size: clamp(15px, 1.08vw, 19px); }
.lead { font-size: clamp(22px, 2vw, 34px); font-weight: 800; color: var(--ink); line-height: 1.12; max-width: 820px; }
.body-copy { max-width: 780px; font-weight: 650; }

.action-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn,
.phase-card button,
.op-card button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover,
.phase-card button:hover,
.op-card button:hover { transform: translateY(-2px); }
.primary { background: linear-gradient(135deg, var(--guinda), var(--guinda-2)); color: #fff; box-shadow: 0 14px 28px rgba(155, 34, 71, .22); }
.ghost,
.soft { color: var(--guinda); background: #fff; border: 1px solid rgba(155, 34, 71, .18); }

.hero-side { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.image-card,
.card-mosaic article,
.note-panel,
.phase-card,
.timeline-detail,
.discipline-card,
.discipline-detail,
.op-card,
.video-card,
.closing-panel,
.book-callout {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.image-card { margin: 0; overflow: hidden; min-height: 0; display: grid; grid-template-rows: 1fr auto; }
.image-card img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.image-card figcaption { padding: 13px 16px; color: var(--muted); font-weight: 800; font-size: 14px; }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.metric-row article { border-radius: 18px; background: var(--guinda-soft); border: 1px solid rgba(155,34,71,.14); padding: 14px; text-align: center; }
.metric-row strong { display: block; color: var(--guinda); font-size: clamp(26px, 3vw, 46px); line-height: .9; }
.metric-row span { color: var(--muted); font-size: 13px; font-weight: 850; }

.mobile-card-menu { display: none; }
.split-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
.page-heading { max-width: 1050px; }
.page-heading.compact { max-width: 1120px; }
.card-mosaic { display: grid; gap: 16px; min-height: 0; }
.card-mosaic.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flip-card { perspective: 1000px; cursor: pointer; min-height: 190px; padding: 0; overflow: hidden; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 190px; transition: transform .55s ease; transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front,
.flip-back { position: absolute; inset: 0; backface-visibility: hidden; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.flip-front span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--guinda); color: #fff; font-weight: 900; }
.flip-back { transform: rotateY(180deg); background: linear-gradient(180deg, var(--guinda-soft), #fff); }
.note-panel { padding: 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.note-panel p { max-width: 880px; }

.model-page { grid-template-rows: auto 1fr auto; }
.phase-board { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.phase-card { padding: 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; overflow: hidden; }
.phase-card span { width: 52px; height: 52px; display: grid; place-items: center; background: var(--guinda); color: #fff; border-radius: 16px; font-weight: 950; }
.phase-card button,
.op-card button { justify-self: start; background: var(--guinda-soft); color: var(--guinda); border: 1px solid rgba(155,34,71,.18); }
.book-callout { padding: 18px 20px; font-weight: 750; color: var(--muted); }
.book-callout strong { color: var(--guinda); }

.route-page { grid-template-rows: auto 1fr; }
.timeline-module { min-height: 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 16px; }
.timeline-tabs { min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 10px; }
.timeline-tab { border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 12px; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--muted); font-weight: 900; }
.timeline-tab span { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--guinda-soft); color: var(--guinda); }
.timeline-tab.active { background: var(--guinda-soft); border-color: rgba(155,34,71,.24); color: var(--guinda); }
.timeline-detail { padding: 26px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.timeline-detail h3 { font-size: clamp(30px, 3.4vw, 54px); color: var(--guinda); }
.result-box { margin-top: 14px; display: grid; gap: 6px; padding: 15px; border-radius: 18px; background: var(--guinda-soft); border: 1px solid rgba(155,34,71,.12); }
.result-box strong { color: var(--guinda); }
.result-box span { color: var(--muted); font-weight: 750; }

.discipline-page { grid-template-rows: auto 1fr; }
.discipline-module { min-height: 0; display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.discipline-grid { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.discipline-card { border: 1px solid var(--line); padding: 16px; display: grid; align-content: center; justify-items: start; gap: 10px; text-align: left; transition: .2s ease; }
.discipline-card img { width: clamp(40px, 4.2vw, 66px); height: clamp(40px, 4.2vw, 66px); }
.discipline-card strong { color: var(--guinda); font-size: clamp(16px, 1.4vw, 22px); }
.discipline-card.active { background: var(--guinda-soft); border-color: rgba(155,34,71,.28); }
.discipline-detail { padding: 24px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.discipline-detail > img { width: clamp(72px, 7vw, 110px); height: clamp(72px, 7vw, 110px); margin-bottom: 14px; }
.discipline-detail h3 { font-size: clamp(34px, 4vw, 64px); color: var(--guinda); }

.operation-page { grid-template-rows: auto 1fr; }
.operation-grid { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.op-card { padding: 18px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; overflow: hidden; }
.op-card span { font-size: clamp(42px, 5vw, 82px); line-height: .8; font-weight: 950; color: rgba(155,34,71,.16); }
.op-card h3 { color: var(--guinda); }

.multimedia-page { grid-template-rows: auto 1fr; }
.video-grid { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.video-card { padding: 16px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; overflow: hidden; }
.video-card video { width: 100%; height: 100%; min-height: 170px; max-height: 310px; object-fit: cover; background: #111; border-radius: 18px; }
.closing-panel { padding: 20px; display: grid; align-content: center; justify-items: center; text-align: center; }
.closing-panel img { width: min(220px, 75%); max-height: 170px; object-fit: contain; margin-bottom: 12px; }

.mobile-home { display: none; }
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(23, 27, 33, .42); }
.modal.open { display: flex; }
.modal-card { position: relative; width: min(760px, 100%); border-radius: 28px; background: #fff; border-top: 8px solid var(--guinda); box-shadow: 0 26px 70px rgba(23,27,33,.22); padding: 28px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--guinda-soft); color: var(--guinda); font-size: 24px; }

@media (max-width: 1180px) {
  :root { --header-h: 94px; }
  .app-header { padding: 0 18px; grid-template-columns: minmax(190px,.85fr) minmax(210px,1fr) minmax(300px,1.05fr); }
  .logo-circle { width: 70px; height: 70px; padding: 1px; }
  .logo-circle img { width: 68px; height: 68px; }
  .logo-wide { width: clamp(176px, 22vw, 220px); height: 70px; padding: 4px 7px; }
  .logo-hmz { width: 70px; height: 70px; padding: 2px; }
  .app-nav {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    height: 86px;
    grid-template-columns: repeat(7, minmax(0,1fr));
    grid-template-rows: 1fr;
    border-left: 0;
    border-top: 1px solid rgba(155,34,71,.16);
    padding: 8px 12px;
  }
  .nav-item:hover,
  .nav-item.active { transform: translateY(-2px); }
  .book-app { inset: var(--header-h) 0 86px 0; }
  h1 { font-size: clamp(46px, 6vw, 82px); }
  h2 { font-size: clamp(30px, 4vw, 52px); }
  .home-grid { grid-template-columns: .96fr 1.04fr; }
  .phase-board, .operation-grid, .video-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .phase-card, .op-card { padding: 16px; }
}

@media (max-width: 860px) {
  .header-center { display: none; }
  .app-header { grid-template-columns: minmax(160px, .75fr) minmax(250px, 1.25fr); }
  .brand-title small { display: none; }
  .logo-wide { width: clamp(168px, 28vw, 210px); }
  .logo-hmz { width: 70px; }
  .home-grid,
  .discipline-module,
  .timeline-module { grid-template-columns: 1fr; }
  .hero-side { display: none; }
  .card-mosaic.three, .phase-board, .operation-grid, .video-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeline-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .timeline-tab { display: grid; justify-items: center; text-align: center; font-size: 12px; padding: 8px 4px; }
  .timeline-tab span { width: 30px; height: 30px; }
}

@media (max-width: 640px) {
  :root { --header-h: 82px; --gap: 10px; }
  .app-header { padding: 0 10px; gap: 8px; grid-template-columns: minmax(62px, .35fr) minmax(190px, .65fr); }
  .logo-box { width: 58px; height: 58px; border-radius: 16px; }
  .logo-circle { width: 58px; height: 58px; padding: 1px; }
  .logo-circle img { width: 56px; height: 56px; }
  .logo-wide { width: 128px; height: 58px; padding: 3px 5px; }
  .logo-hmz { width: 58px; height: 58px; padding: 2px; }
  .logo-right { gap: 6px; }
  .brand-title { display: none; }
  .app-nav { display: none; }
  .book-app { inset: var(--header-h) 0 0 0; padding: 10px; }
  .page { border-radius: 22px; }
  .page-content { padding: 14px; gap: 10px; }
  h1 { font-size: clamp(42px, 16vw, 68px); }
  h2 { font-size: clamp(24px, 8vw, 34px); }
  h3 { font-size: clamp(18px, 5.4vw, 24px); }
  p { font-size: clamp(13px, 3.7vw, 15px); line-height: 1.25; }
  .lead { font-size: clamp(17px, 5vw, 22px); }
  .hero-copy { align-self: start; }
  .hero-copy .body-copy,
  .hero-copy .action-row { display: none; }
  .home-grid { grid-template-rows: auto 1fr; }
  .mobile-card-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; }
  .mobile-menu-card {
    border: 1px solid rgba(155,34,71,.16);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fff9fb);
    box-shadow: 0 12px 28px rgba(23,27,33,.08);
    padding: 12px;
    display: grid;
    gap: 6px;
    text-align: left;
    align-content: center;
    min-height: 0;
  }
  .mobile-menu-card img { width: 30px; height: 30px; }
  .mobile-menu-card strong { color: var(--guinda); font-size: 15px; }
  .mobile-menu-card span { color: var(--muted); font-size: 11px; line-height: 1.1; }
  .mobile-home { display: grid; place-items: center; position: fixed; z-index: 50; right: 14px; bottom: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--guinda); color: #fff; box-shadow: 0 14px 30px rgba(155,34,71,.25); font-weight: 900; }
  body[data-page="inicio"] .mobile-home { display: none; }
  .split-page, .model-page, .route-page, .discipline-page, .operation-page, .multimedia-page { grid-template-rows: auto 1fr; }
  .page-heading p:not(.kicker) { display: none; }
  .card-mosaic.three,
  .phase-board,
  .operation-grid,
  .video-grid,
  .discipline-grid { grid-template-columns: 1fr; gap: 8px; }
  .card-mosaic.three .flip-card:nth-child(n+3),
  .operation-grid .op-card:nth-child(n+4),
  .video-grid .video-card:nth-child(n+2) { display: none; }
  .note-panel,
  .book-callout { display: none; }
  .flip-card, .flip-inner { min-height: 118px; }
  .flip-front, .flip-back { padding: 14px; }
  .flip-front span { width: 36px; height: 36px; border-radius: 12px; }
  .phase-card, .op-card, .timeline-detail, .discipline-detail, .video-card, .closing-panel { padding: 14px; border-radius: 18px; }
  .phase-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; }
  .phase-card span { width: 38px; height: 38px; grid-row: 1 / 3; }
  .phase-card p { display: none; }
  .phase-card button { padding: 8px 12px; font-size: 12px; }
  .timeline-module { gap: 8px; }
  .timeline-tabs { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
  .timeline-tab { border-radius: 14px; font-size: 0; padding: 7px 3px; }
  .timeline-tab span { margin: 0; }
  .timeline-detail h3 { font-size: clamp(22px, 7vw, 30px); }
  .discipline-module { gap: 8px; }
  .discipline-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .discipline-card { border-radius: 16px; padding: 10px; gap: 5px; }
  .discipline-card img { width: 28px; height: 28px; }
  .discipline-card strong { font-size: 12px; }
  .discipline-detail > img { width: 48px; height: 48px; margin-bottom: 6px; }
  .discipline-detail h3 { font-size: clamp(24px, 8vw, 34px); }
  .result-box { margin-top: 8px; padding: 10px; border-radius: 14px; }
  .op-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; }
  .op-card span { font-size: 36px; grid-row: 1 / 3; }
  .op-card p { display: none; }
  .op-card button { padding: 8px 12px; font-size: 12px; }
  .video-card video { min-height: 120px; max-height: 150px; }
  .closing-panel img { max-height: 72px; }
  .modal-card { padding: 22px; border-radius: 22px; }
}

@media (max-height: 720px) and (min-width: 641px) {
  :root { --header-h: 86px; }
  .logo-circle, .logo-wide, .logo-hmz { height: 62px; }
  .logo-circle, .logo-hmz { width: 62px; }
  .logo-circle { padding: 1px; }
  .logo-circle img { width: 60px; height: 60px; }
  h1 { font-size: clamp(48px, 6vw, 88px); }
  h2 { font-size: clamp(28px, 3.3vw, 48px); }
  p { font-size: clamp(14px, 1vw, 17px); }
  .page-content { padding: 20px; }
  .phase-card, .op-card { padding: 14px; }
}


/* Ajustes finales solicitados: logo SEDENA legible, botones eliminados, flips verticales, layout 04 y slider 05 */
.logo-sedena-mark { display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; background:#fff; }
.logo-sedena-mark img { width:100%; height:100%; object-fit:cover; object-position:center center; transform:scale(1.08); }
.objective-direct { margin-top:18px; padding:18px 20px; border-radius:var(--radius-xl); background:linear-gradient(180deg, var(--guinda-soft), #fff); border:1px solid rgba(155,34,71,.16); box-shadow:var(--shadow); max-width:840px; }
.objective-direct h3 { color:var(--guinda); }
.note-redesign { grid-template-columns: 1fr 1fr; align-items:stretch; }
.inline-note { display:grid; gap:8px; padding:18px; border-radius:20px; background:var(--guinda-soft); border:1px solid rgba(155,34,71,.14); color:var(--muted); font-weight:750; }
.inline-note strong { color:var(--guinda); }
.phase-flip-board { grid-template-columns:repeat(3,minmax(0,1fr)); }
.phase-flip-card { perspective:1100px; cursor:pointer; min-height:0; border-radius:var(--radius-xl); outline:none; }
.phase-flip-inner { position:relative; width:100%; height:100%; min-height:clamp(250px, 36vh, 430px); transform-style:preserve-3d; transition:transform .62s cubic-bezier(.22,.72,.18,1); transform-origin:bottom center; }
.phase-flip-card.flipped .phase-flip-inner { transform:rotateX(180deg); }
.phase-front, .phase-back { position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow); background:#fff; padding:22px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.phase-front { background:linear-gradient(180deg,#fff,#fff9fb); }
.phase-front span { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--guinda); color:#fff; font-weight:950; }
.phase-front h3, .phase-back h3 { color:var(--guinda); }
.phase-front em { font-style:normal; color:var(--guinda); font-weight:850; font-size:13px; }
.phase-back { transform:rotateX(180deg); background:linear-gradient(180deg,var(--guinda-soft),#fff); }
.discipline-module { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
.discipline-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.discipline-detail { min-height:0; display:grid; grid-template-columns:auto 1fr 1.2fr; align-items:center; gap:18px; justify-content:initial; padding:18px 22px; }
.discipline-detail > img { margin:0; }
.discipline-detail .result-box { margin-top:0; }
.operation-slider-module { min-height:0; display:grid; grid-template-columns:.78fr 1.22fr; gap:16px; }
.op-slider-window { min-height:0; overflow:hidden; border-radius:var(--radius-xl); }
.op-slider-track { height:100%; display:flex; transition:transform .48s cubic-bezier(.22,.72,.18,1); }
.op-slide { flex:0 0 100%; border:1px solid var(--line); border-radius:var(--radius-xl); background:#fff; box-shadow:var(--shadow); padding:22px; text-align:left; display:grid; grid-template-rows:auto auto 1fr; gap:12px; align-content:center; }
.op-slide span { font-size:clamp(58px,6vw,96px); line-height:.8; font-weight:950; color:rgba(155,34,71,.18); }
.op-slide h3 { color:var(--guinda); font-size:clamp(30px,3.2vw,52px); }
.op-slide.active { background:linear-gradient(180deg,var(--guinda-soft),#fff); border-color:rgba(155,34,71,.28); }
.op-detail-panel { min-height:0; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.op-detail-panel h3 { color:var(--guinda); font-size:clamp(30px,3.4vw,54px); }
.detail-stack { display:grid; gap:12px; }
.detail-block { padding:14px 16px; border-radius:18px; background:var(--guinda-soft); border:1px solid rgba(155,34,71,.12); }
.detail-block strong { display:block; margin-bottom:6px; color:var(--guinda); }
.detail-block p { margin:0; }
.modal, [data-modal], [data-close-modal] { display:none !important; }
@media (max-width:1180px){ .phase-flip-board{grid-template-columns:repeat(3,minmax(0,1fr));} .operation-slider-module{grid-template-columns:.82fr 1.18fr;} }
@media (max-width:860px){ .note-redesign{grid-template-columns:1fr;} .discipline-grid{grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;} .discipline-card{padding:10px; justify-items:center; text-align:center;} .discipline-detail{grid-template-columns:1fr; text-align:left; align-content:center;} .operation-slider-module{grid-template-columns:1fr; grid-template-rows:minmax(0,.65fr) minmax(0,1fr);} .op-slide{padding:16px;} .phase-flip-inner{min-height:clamp(210px,31vh,330px);} }
@media (max-width:640px){ .objective-direct{padding:12px; margin-top:10px;} .phase-flip-board{grid-template-columns:1fr; gap:8px;} .phase-flip-board .phase-flip-card:nth-child(n+3){display:none;} .phase-flip-inner{min-height:126px;} .phase-front,.phase-back{padding:12px; border-radius:18px;} .phase-front span{width:36px;height:36px;border-radius:12px;} .phase-front p{display:none;} .discipline-grid{grid-template-columns:repeat(5,minmax(0,1fr));} .discipline-card img{width:24px;height:24px;} .discipline-card strong{font-size:10px;} .discipline-detail{padding:12px;} .operation-slider-module{gap:8px;} .op-slide{padding:12px; border-radius:18px;} .op-slide span{font-size:42px;} .op-detail-panel{padding:12px;border-radius:18px;} .detail-block{padding:10px;} }


/* Corrección final obligatoria: SEDENA legible, sin botones iniciales, página 04 superior y slider operativo */
.logo-right .logo-sedena-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 4px 8px !important;
  background: #fff !important;
}
.logo-right .logo-sedena-mark img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.13) translateX(0) !important;
}
.objective-direct {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--guinda-soft), #fff);
  border: 1px solid rgba(155,34,71,.16);
  box-shadow: var(--shadow);
}
.note-redesign {
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
}
.phase-front, .phase-back {
  border-radius: var(--radius-xl);
}
.phase-front em { color: var(--guinda); font-style: normal; font-weight: 900; }
.discipline-module {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
.discipline-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-content: start !important;
}
.discipline-detail {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  align-content: center;
}
.discipline-detail > img { grid-row: 1 / 4; margin: 0 !important; }
.operation-slider-module {
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr) !important;
}
.op-slider-window {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}
.op-slide {
  flex: 0 0 100%;
}
.op-slider-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.op-slider-controls button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--guinda);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(155,34,71,.18);
}
.op-slider-controls button:disabled { opacity: .35; cursor: default; }
@media (max-width:1180px) {
  .logo-right .logo-sedena-mark { width: clamp(210px, 24vw, 285px) !important; }
  .logo-right .logo-sedena-mark img { transform: scale(1.18) !important; }
}
@media (max-width:860px) {
  .note-redesign { grid-template-columns: 1fr !important; }
  .discipline-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
  .discipline-detail { grid-template-columns: 1fr; }
  .discipline-detail > img { grid-row: auto; }
  .operation-slider-module { grid-template-columns: 1fr !important; grid-template-rows: minmax(0,.72fr) minmax(0,1fr); }
}
@media (max-width:640px) {
  .logo-right .logo-sedena-mark { width: 118px !important; padding: 3px 4px !important; }
  .logo-right .logo-sedena-mark img { transform: scale(1.28) !important; }
  .note-redesign { display: grid !important; }
  .discipline-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
  .operation-slider-module { grid-template-rows: minmax(0,.62fr) minmax(0,1fr); }
  .op-slider-controls button { width: 36px; height: 36px; }
}


/* Ajuste solicitado: reducir 4px logo SEDENA y dejar 2px de margen posterior */
.logo-right .logo-sedena-mark { width: clamp(276px, calc(25vw - 4px), 356px) !important; padding: 4px 10px 4px 8px !important; }
.logo-right .logo-sedena-mark img { width: auto !important; height: 100% !important; max-height: calc(100% - 2px) !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.11) translateX(-1px) !important; margin-right: 2px !important; }
@media (max-width:1180px){ .logo-right .logo-sedena-mark { width: clamp(206px, calc(24vw - 4px), 281px) !important; } }
@media (max-width:640px){ .logo-right .logo-sedena-mark { width: 114px !important; } }

/* Reparación página 02: volteo vertical fijo sin descenso */
.phase-flip-card { position: relative; height: clamp(250px, 36vh, 430px); min-height: clamp(250px, 36vh, 430px); overflow: hidden; }
.phase-flip-inner { height: 100% !important; min-height: 0 !important; transform-origin: center center !important; }
.phase-front, .phase-back { inset: 0; }
@media (max-width:860px){ .phase-flip-card { height: clamp(210px, 31vh, 330px); min-height: clamp(210px, 31vh, 330px); } }
@media (max-width:640px){ .phase-flip-card { height: 126px; min-height: 126px; } }

/* Página 05: cards diagonales expansibles en lugar de slider */
.operation-diagonal-module { min-height: 0; display: grid; grid-template-columns: minmax(320px,.85fr) minmax(0,1.15fr); gap: 16px; align-items: stretch; }
.op-diagonal-stack { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 6px 0; }
.op-diagonal-card { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 18px 18px 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; width: clamp(220px, 86%, 360px); transition: width .35s ease, transform .35s ease, background .25s ease, border-color .25s ease; overflow: hidden; }
.op-diagonal-card:nth-child(1) { transform: translateX(0); }
.op-diagonal-card:nth-child(2) { transform: translateX(24px); }
.op-diagonal-card:nth-child(3) { transform: translateX(48px); }
.op-diagonal-card:nth-child(4) { transform: translateX(72px); }
.op-diagonal-card span { font-size: clamp(42px, 4.8vw, 72px); line-height: .8; font-weight: 950; color: rgba(155,34,71,.18); }
.op-diagonal-card h3 { margin: 0 0 6px; color: var(--guinda); font-size: clamp(22px, 2.2vw, 34px); }
.op-diagonal-card p { margin: 0; font-size: clamp(14px, 1vw, 17px); }
.op-diagonal-card.active { width: min(100%, 430px); background: linear-gradient(180deg, var(--guinda-soft), #fff); border-color: rgba(155,34,71,.30); }
.op-diagonal-card.active:nth-child(1) { transform: translateX(26px); }
.op-diagonal-card.active:nth-child(2) { transform: translateX(42px); }
.op-diagonal-card.active:nth-child(3) { transform: translateX(58px); }
.op-diagonal-card.active:nth-child(4) { transform: translateX(74px); }
@media (max-width:1180px){ .operation-diagonal-module { grid-template-columns: minmax(280px,.9fr) minmax(0,1.1fr); } .op-diagonal-card { width: clamp(210px, 82%, 320px); } .op-diagonal-card.active { width: min(100%, 380px); } }
@media (max-width:860px){ .operation-diagonal-module { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .op-diagonal-stack { gap: 10px; } .op-diagonal-card, .op-diagonal-card.active { width: 100%; } .op-diagonal-card:nth-child(n), .op-diagonal-card.active:nth-child(n) { transform: translateX(0); } }
@media (max-width:640px){ .op-diagonal-card { padding: 14px; grid-template-columns: auto 1fr; border-radius: 18px; } .op-diagonal-card span { font-size: 34px; } .op-diagonal-card h3 { font-size: 18px; } }
.op-slider-window, .op-slider-track, .op-slider-controls, #opSliderPrev, #opSliderNext { display: none !important; }


/* Ajuste adicional del logo SEDENA: 4px menos e incluir águila + letras */
.logo-right .logo-sedena-mark { width: clamp(268px, calc(25vw - 12px), 348px) !important; padding: 4px 8px 4px 6px !important; }
.logo-right .logo-sedena-mark img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; transform: none !important; margin-right: 0 !important; }
@media (max-width:1180px){ .logo-right .logo-sedena-mark { width: clamp(198px, calc(24vw - 12px), 273px) !important; } }
@media (max-width:640px){ .logo-right .logo-sedena-mark { width: 106px !important; } }

/* Página 05 rediseñada: cards simétricas y detalle solo tras selección */
.operation-diagonal-module { grid-template-columns: 1fr !important; grid-template-rows: 1fr; }
.op-diagonal-stack { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-content: center; justify-items: stretch; padding: 0; }
.op-diagonal-card { width: 100% !important; min-height: 160px; transform: none !important; }
.op-diagonal-card:nth-child(n) { transform: none !important; }
.op-detail-panel { display: none; opacity: 0; transform: translateX(24px); }
.operation-diagonal-module.has-selection { grid-template-columns: minmax(250px,.78fr) minmax(0,1.22fr) !important; gap: 18px; }
.operation-diagonal-module.has-selection .op-diagonal-stack { display: flex !important; flex-direction: column; gap: 10px; }
.operation-diagonal-module.has-selection .op-diagonal-card { width: clamp(200px, 82%, 300px) !important; min-height: 110px; }
.operation-diagonal-module.has-selection .op-diagonal-card:nth-child(1) { transform: translateX(-4px) !important; }
.operation-diagonal-module.has-selection .op-diagonal-card:nth-child(2) { transform: translateX(10px) !important; }
.operation-diagonal-module.has-selection .op-diagonal-card:nth-child(3) { transform: translateX(24px) !important; }
.operation-diagonal-module.has-selection .op-diagonal-card:nth-child(4) { transform: translateX(38px) !important; }
.operation-diagonal-module.has-selection .op-diagonal-card.active { width: min(100%, 340px) !important; background: linear-gradient(180deg, var(--guinda-soft), #fff); border-color: rgba(155,34,71,.30); }
.operation-diagonal-module.has-selection .op-detail-panel { display: flex; opacity: 1; transform: translateX(0); }
.op-detail-panel { transition: opacity .3s ease, transform .35s ease; }
@media (max-width:860px){ .operation-diagonal-module.has-selection { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; } .operation-diagonal-module.has-selection .op-diagonal-stack { display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); } .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { width:100% !important; transform:none !important; } .op-detail-panel { transform:none; } }
@media (max-width:640px){ .op-diagonal-stack { grid-template-columns: 1fr; gap: 10px; } .op-diagonal-card { min-height: 124px; } .operation-diagonal-module.has-selection .op-diagonal-stack { grid-template-columns:1fr; } }


/* Ajuste final de encabezado: logos y títulos completos, sin recorte */
:root { --header-h: 112px; }
.app-header { grid-template-columns: minmax(250px,.86fr) minmax(340px,1.12fr) minmax(385px,1.02fr) !important; gap: 12px !important; padding: 0 calc(var(--nav-w) + 16px) 0 18px !important; overflow: hidden; }
.header-logo { min-width: 0; }
.logo-right { gap: 10px !important; overflow: hidden !important; }
.logo-right .logo-box, .logo-left .logo-box { border-radius: 16px; }
.logo-left .logo-circle { width: 76px !important; height: 76px !important; padding: 1px !important; }
.logo-left .logo-circle img { width: 74px !important; height: 74px !important; object-fit: contain !important; }
.logo-right .logo-hmz { width: 76px !important; height: 76px !important; padding: 3px !important; border-radius: 16px !important; }
.logo-right .logo-hmz img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; }
.logo-right .logo-sedena-mark { width: clamp(250px, 22vw, 320px) !important; height: 76px !important; padding: 4px 8px !important; border-radius: 14px !important; background: #fff !important; overflow: hidden !important; }
.logo-right .logo-sedena-mark img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center center !important; transform: none !important; margin: 0 !important; }
.brand-title { gap: 3px !important; }
.brand-title strong { font-size: clamp(18px, 1.7vw, 28px) !important; }
.brand-title small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.05 !important; font-size: 12px !important; }
.header-center { align-content: center; gap: 4px; }
.header-center span { font-size: 11px !important; line-height: 1.05 !important; }
.header-center strong { font-size: clamp(14px, 1.02vw, 18px) !important; line-height: 1.08 !important; overflow: visible !important; }
@media (max-width: 1180px) { .app-header { grid-template-columns: minmax(200px,.8fr) minmax(300px,1.1fr) minmax(310px,1fr) !important; padding: 0 18px 0 16px !important; } .logo-right .logo-hmz, .logo-left .logo-circle { width: 70px !important; height: 70px !important; } .logo-left .logo-circle img { width: 68px !important; height: 68px !important; } .logo-right .logo-sedena-mark { width: clamp(214px, 22vw, 270px) !important; height: 70px !important; } .header-center strong { font-size: clamp(13px, 1.12vw, 16px) !important; } }
@media (max-width: 860px) { :root { --header-h: 106px; } .app-header { grid-template-columns: minmax(160px,.65fr) minmax(230px,1fr) minmax(240px,.95fr) !important; gap: 8px !important; } .logo-right .logo-hmz, .logo-left .logo-circle { width: 62px !important; height: 62px !important; } .logo-left .logo-circle img { width: 60px !important; height: 60px !important; } .logo-right .logo-sedena-mark { width: 208px !important; height: 62px !important; } .brand-title small { font-size: 11px !important; } .header-center span { font-size: 10px !important; } .header-center strong { font-size: 13px !important; } }
@media (max-width: 640px) { :root { --header-h: 96px; } .app-header { grid-template-columns: minmax(116px,.48fr) minmax(160px,.72fr) minmax(156px,.65fr) !important; padding: 0 8px !important; gap: 6px !important; } .logo-left { gap: 8px !important; } .logo-left .logo-circle, .logo-right .logo-hmz { width: 54px !important; height: 54px !important; } .logo-left .logo-circle img { width: 52px !important; height: 52px !important; } .logo-right .logo-sedena-mark { width: 150px !important; height: 54px !important; padding: 3px 6px !important; } .brand-title strong { font-size: 16px !important; } .brand-title small { font-size: 10px !important; } .header-center span { font-size: 9px !important; } .header-center strong { font-size: 11px !important; } }

/* Ajuste final página 05: cards izquierdas uniformes, sin desbordes */
.operation-diagonal-module.has-selection { grid-template-columns: 290px minmax(0,1fr) !important; gap: 16px !important; align-items: stretch; }
.operation-diagonal-module.has-selection .op-diagonal-stack { width: 290px; min-width: 290px; max-width: 290px; display: flex !important; flex-direction: column; gap: 10px; overflow: hidden; }
.operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { width: 100% !important; min-width: 100% !important; max-width: 100% !important; min-height: 108px !important; max-height: 108px !important; padding: 14px 14px 14px 16px !important; transform: none !important; }
.operation-diagonal-module.has-selection .op-diagonal-card { grid-template-columns: 56px 1fr !important; gap: 10px !important; }
.operation-diagonal-module.has-selection .op-diagonal-card span { font-size: 34px !important; align-self: start; }
.operation-diagonal-module.has-selection .op-diagonal-card h3 { font-size: 20px !important; line-height: 1.05 !important; margin: 0 0 4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.operation-diagonal-module.has-selection .op-diagonal-card p { font-size: 13px !important; line-height: 1.18 !important; margin: 0 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.op-detail-panel, .detail-stack, .detail-block { overflow: hidden; }
@media (max-width: 860px) { .operation-diagonal-module.has-selection { grid-template-columns: 1fr !important; } .operation-diagonal-module.has-selection .op-diagonal-stack { width: 100%; min-width: 0; max-width: none; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); } .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { max-height: none !important; min-height: 116px !important; } }
@media (max-width: 640px) { .operation-diagonal-module.has-selection .op-diagonal-stack { grid-template-columns: 1fr; } .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { min-height: 104px !important; } }


/* Ajuste solicitado final página 05: cards siempre arriba y detalle abajo */
.operation-diagonal-module, .operation-diagonal-module.has-selection { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; gap: 16px !important; align-items: stretch !important; }
.op-diagonal-stack, .operation-diagonal-module.has-selection .op-diagonal-stack { width: 100% !important; min-width: 0 !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 14px !important; align-content: start !important; padding: 0 !important; overflow: visible !important; }
.op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 142px !important; max-height: none !important; padding: 16px !important; display: grid !important; grid-template-columns: 52px 1fr !important; gap: 10px !important; align-items: start !important; transform: none !important; border-radius: 20px !important; overflow: hidden !important; }
.op-diagonal-card:nth-child(n), .operation-diagonal-module.has-selection .op-diagonal-card:nth-child(n), .operation-diagonal-module.has-selection .op-diagonal-card.active:nth-child(n) { transform: none !important; }
.op-diagonal-card span, .operation-diagonal-module.has-selection .op-diagonal-card span { font-size: 34px !important; line-height: .9 !important; align-self: start !important; }
.op-diagonal-card h3, .operation-diagonal-module.has-selection .op-diagonal-card h3 { margin: 0 0 4px !important; font-size: 20px !important; line-height: 1.05 !important; color: var(--guinda) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.op-diagonal-card p, .operation-diagonal-module.has-selection .op-diagonal-card p { margin: 0 !important; font-size: 13px !important; line-height: 1.18 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; }
.op-diagonal-card.active, .operation-diagonal-module.has-selection .op-diagonal-card.active { background: linear-gradient(180deg, var(--guinda-soft), #fff) !important; border-color: rgba(155,34,71,.34) !important; box-shadow: 0 14px 26px rgba(155,34,71,.16) !important; }
.op-detail-panel { display: flex !important; opacity: 1 !important; transform: none !important; min-height: 0 !important; }
.operation-diagonal-module.has-selection .op-detail-panel { display: flex !important; opacity: 1 !important; transform: none !important; }
.op-detail-panel .detail-stack { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.op-detail-panel .detail-block { min-height: 0; }
@media (max-width: 1180px) { .op-diagonal-stack, .operation-diagonal-module.has-selection .op-diagonal-stack { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { min-height: 132px !important; } .op-detail-panel .detail-stack { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .op-diagonal-stack, .operation-diagonal-module.has-selection .op-diagonal-stack { grid-template-columns: 1fr !important; gap: 10px !important; } .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { min-height: 118px !important; padding: 14px !important; } }


/* Ajuste solicitado: separador institucional sólido y pestañas superiores por área */
:root { --area-tabs-h: 58px; }

.app-header::after {
  background: var(--guinda) !important;
}

.area-tabs {
  position: fixed;
  z-index: 34;
  top: var(--header-h);
  left: 0;
  right: var(--nav-w);
  height: var(--area-tabs-h);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 8px var(--gap);
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(155,34,71,.16);
  box-shadow: 0 8px 24px rgba(23,27,33,.05);
}

.area-tab {
  height: 100%;
  min-width: 0;
  border: 1px solid rgba(155,34,71,.16);
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 850;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.area-tab img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.area-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area-tab:hover,
.area-tab.active {
  transform: translateY(-1px);
  color: var(--guinda);
  background: var(--guinda-soft);
  border-color: rgba(155,34,71,.32);
}

.book-app {
  inset: calc(var(--header-h) + var(--area-tabs-h)) var(--nav-w) 0 0 !important;
}

/* Páginas internas de manual por área: permiten scroll */
.manual-area-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.manual-area-page .page-content,
.manual-area-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid;
  gap: 18px;
  padding-bottom: 34px;
}

.manual-area-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.14);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fff9fb);
  box-shadow: var(--shadow);
}

.manual-area-hero h2 {
  margin-bottom: 10px;
}

.manual-area-hero img {
  width: clamp(68px, 8vw, 110px);
  height: clamp(68px, 8vw, 110px);
  object-fit: contain;
}

.manual-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.manual-section-card,
.manual-block,
.manual-concept-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.manual-section-card,
.manual-block {
  padding: clamp(16px, 1.6vw, 24px);
}

.manual-section-card.objective {
  background: var(--guinda-soft);
  border-color: rgba(155,34,71,.18);
}

.manual-block-head {
  margin-bottom: 12px;
}

.manual-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.manual-concept-card {
  padding: 16px;
  box-shadow: none;
}

.manual-concept-card strong {
  display: block;
  color: var(--guinda);
  margin-bottom: 8px;
}

.manual-block.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.manual-sequence,
.manual-indicators {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.manual-sequence li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 16px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.12);
}

.manual-sequence span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--guinda);
  color: #fff;
  font-weight: 900;
}

.manual-indicators li {
  padding: 11px 12px;
  border-radius: 14px;
  background: #f7f7f7;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 650;
}

@media (max-width:1180px) {
  .area-tabs {
    right: 0;
    bottom: auto;
  }
  .book-app {
    inset: calc(var(--header-h) + var(--area-tabs-h)) 0 86px 0 !important;
  }
}

@media (max-width:860px) {
  :root { --area-tabs-h: 62px; }
  .area-tabs {
    grid-template-columns: repeat(5, minmax(116px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: start;
    padding: 8px 12px;
  }
  .area-tab {
    min-width: 116px;
  }
  .manual-section-grid,
  .manual-block.two-cols {
    grid-template-columns: 1fr;
  }
  .manual-concept-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px) {
  :root { --area-tabs-h: 58px; }
  .area-tabs {
    top: var(--header-h);
    grid-template-columns: repeat(5, minmax(105px, 1fr));
    gap: 8px;
    padding: 7px 10px;
  }
  .area-tab {
    min-width: 105px;
    border-radius: 14px;
    font-size: 12px;
    padding: 7px 8px;
  }
  .area-tab img {
    width: 21px;
    height: 21px;
  }
  .book-app {
    inset: calc(var(--header-h) + var(--area-tabs-h)) 0 0 0 !important;
  }
  .manual-area-content {
    padding: 14px !important;
    gap: 12px;
  }
  .manual-area-hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .manual-area-hero img {
    width: 62px;
    height: 62px;
  }
  .manual-concept-grid {
    grid-template-columns: 1fr;
  }
}


/* Ajuste global posterior al agregado de pestañas: compactar y reacomodar para evitar cortes */
:root { --area-tabs-h: 52px; }
.area-tabs { height: var(--area-tabs-h) !important; gap: 8px !important; padding: 6px 12px !important; }
.area-tab { min-height: 38px; padding: 6px 8px !important; font-size: 13px; }
.area-tab img { width: 20px !important; height: 20px !important; }
.book-app { inset: calc(var(--header-h) + var(--area-tabs-h)) var(--nav-w) 0 0 !important; }
.page { border-radius: 28px !important; }
.page-content { padding: clamp(14px, 1.45vw, 20px) !important; gap: clamp(10px, 1.1vw, 16px) !important; align-content: start !important; overflow: auto !important; }
.page-content > * { min-width: 0; }
h1 { font-size: clamp(44px, 5.7vw, 84px) !important; margin-bottom: 8px !important; }
h2 { font-size: clamp(28px, 3.4vw, 48px) !important; margin-bottom: 8px !important; }
h3 { font-size: clamp(18px, 1.35vw, 24px) !important; margin-bottom: 6px !important; }
p { font-size: clamp(13px, .92vw, 16px) !important; line-height: 1.28 !important; }
.kicker { font-size: clamp(10px, .75vw, 12px) !important; margin-bottom: 6px !important; }
.lead { font-size: clamp(18px, 1.55vw, 26px) !important; line-height: 1.08 !important; }
.body-copy { max-width: 720px !important; }
.hero-side, .card-mosaic, .phase-board, .timeline-module, .discipline-module, .video-grid, .operation-diagonal-module { gap: 12px !important; }
.image-card figcaption { padding: 10px 12px !important; font-size: 12px !important; }
.metric-row article { padding: 10px !important; }
.metric-row strong { font-size: clamp(22px, 2.5vw, 34px) !important; }
.metric-row span { font-size: 12px !important; }
.flip-card { min-height: 160px !important; }
.flip-inner { min-height: 160px !important; }
.flip-front, .flip-back, .phase-front, .phase-back { padding: 16px !important; }
.note-panel, .timeline-detail, .discipline-detail, .video-card, .closing-panel, .book-callout { padding: 16px !important; }
.phase-flip-card { height: clamp(190px, 27vh, 285px) !important; min-height: clamp(190px, 27vh, 285px) !important; }
.phase-front em { font-size: 11px; }
.timeline-tab { padding: 10px !important; gap: 8px !important; }
.timeline-tab span { width: 30px !important; height: 30px !important; }
.timeline-detail h3 { font-size: clamp(24px, 2.5vw, 38px) !important; }
.result-box { margin-top: 10px !important; padding: 12px !important; gap: 4px !important; }
.discipline-card { padding: 12px !important; gap: 8px !important; }
.discipline-card img { width: clamp(34px, 3.2vw, 52px) !important; height: clamp(34px, 3.2vw, 52px) !important; }
.discipline-card strong { font-size: clamp(15px, 1.1vw, 18px) !important; }
.discipline-detail > img { width: clamp(56px, 5vw, 84px) !important; height: clamp(56px, 5vw, 84px) !important; margin-bottom: 10px !important; }
.discipline-detail h3 { font-size: clamp(26px, 2.8vw, 40px) !important; }
.op-diagonal-stack, .operation-diagonal-module.has-selection .op-diagonal-stack { gap: 10px !important; }
.op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card, .operation-diagonal-module.has-selection .op-diagonal-card.active { min-height: 126px !important; padding: 14px !important; }
.op-diagonal-card span { font-size: 28px !important; }
.op-diagonal-card h3 { font-size: 18px !important; }
.op-diagonal-card p { font-size: 12px !important; -webkit-line-clamp: 2 !important; }
.op-detail-panel .detail-stack { gap: 10px !important; }
.video-card video { min-height: 136px !important; max-height: 220px !important; }
.closing-panel img { width: min(160px, 60%) !important; max-height: 120px !important; }
.manual-area-content { padding-bottom: 20px !important; gap: 14px !important; }
.manual-area-hero, .manual-section-card, .manual-block, .manual-concept-card { padding: 14px !important; }
.manual-concept-grid { gap: 10px !important; }
.manual-sequence li, .manual-indicators li { padding: 9px 10px !important; }
@media (max-width: 1180px) { :root { --area-tabs-h: 50px; } .area-tabs { padding: 6px 10px !important; } .page-content { padding: 14px !important; gap: 10px !important; } .home-grid, .timeline-module, .discipline-module { grid-template-columns: 1fr !important; } .hero-side { grid-template-rows: auto auto !important; } .video-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .closing-panel { grid-column: 1 / -1; } .page-heading { max-width: none !important; } }
@media (max-width: 860px) { :root { --area-tabs-h: 56px; } .page-content { padding: 12px !important; overflow: auto !important; } .card-mosaic.three, .phase-board, .video-grid, .op-diagonal-stack, .operation-diagonal-module.has-selection .op-diagonal-stack { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .note-panel { grid-template-columns: 1fr !important; } .app-header { overflow: hidden !important; } }
@media (max-width: 640px) { :root { --area-tabs-h: 54px; } .area-tabs { padding: 6px 8px !important; gap: 6px !important; } .area-tab { min-width: 98px !important; font-size: 11px !important; } .page-content { padding: 12px !important; gap: 10px !important; } .home-grid, .card-mosaic.three, .phase-board, .video-grid, .op-diagonal-stack, .operation-diagonal-module.has-selection .op-diagonal-stack, .manual-section-grid, .manual-block.two-cols, .manual-concept-grid { grid-template-columns: 1fr !important; } .flip-card, .phase-flip-card, .op-diagonal-card { min-height: auto !important; height: auto !important; } .video-card video { min-height: 120px !important; } }


/* Ajuste de página 01: cards con mejor aprovechamiento del contenedor */
.page[data-page="resumen"] .card-mosaic.three { grid-template-columns: repeat(3, minmax(0,1fr)) !important; align-items: stretch; gap: 14px !important; }
.page[data-page="resumen"] .flip-card { min-height: 210px !important; }
.page[data-page="resumen"] .flip-inner { min-height: 210px !important; }
.page[data-page="resumen"] .flip-front, .page[data-page="resumen"] .flip-back { padding: 18px 18px 16px !important; display: grid !important; grid-template-rows: auto auto 1fr !important; justify-content: start !important; align-content: start !important; gap: 10px !important; }
.page[data-page="resumen"] .flip-front span { width: 42px !important; height: 42px !important; border-radius: 13px !important; font-size: 15px !important; }
.page[data-page="resumen"] .flip-front h3, .page[data-page="resumen"] .flip-back h3 { font-size: clamp(20px, 1.45vw, 24px) !important; margin: 0 !important; }
.page[data-page="resumen"] .flip-front p, .page[data-page="resumen"] .flip-back p { font-size: clamp(14px, 1vw, 16px) !important; line-height: 1.3 !important; font-weight: 700; color: var(--muted) !important; align-self: start; }
.page[data-page="resumen"] .flip-back { background: linear-gradient(180deg, #fff7fa, #fff) !important; }
.page[data-page="resumen"] .flip-back::after { content: "Resultado operativo"; align-self: end; justify-self: start; padding: 6px 10px; border-radius: 999px; background: rgba(155,34,71,.08); color: var(--guinda); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.page[data-page="resumen"] .note-panel { padding: 18px !important; grid-template-columns: 1.15fr .85fr !important; gap: 16px !important; }
.page[data-page="resumen"] .inline-note { padding: 14px 16px; border-radius: 18px; background: #fff9fb; border: 1px solid rgba(155,34,71,.12); }

/* Ajuste de página 04: mejor simetría y botón al manual */
.page[data-page="disciplinas"] .discipline-module { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; gap: 14px !important; }
.page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; gap: 12px !important; align-items: stretch; }
.page[data-page="disciplinas"] .discipline-card { min-height: 130px; padding: 14px 12px !important; border-radius: 20px !important; justify-items: center !important; text-align: center !important; align-content: center !important; }
.page[data-page="disciplinas"] .discipline-card img { width: 40px !important; height: 40px !important; }
.page[data-page="disciplinas"] .discipline-card strong { font-size: 16px !important; line-height: 1.08 !important; }
.page[data-page="disciplinas"] .discipline-detail { display: grid !important; grid-template-columns: auto 1.1fr .9fr !important; gap: 16px !important; align-items: center !important; padding: 18px !important; }
.page[data-page="disciplinas"] .discipline-detail > img { margin: 0 !important; width: 76px !important; height: 76px !important; }
.page[data-page="disciplinas"] .discipline-detail h3 { font-size: clamp(28px, 2.2vw, 34px) !important; margin-bottom: 6px !important; }
.page[data-page="disciplinas"] .discipline-detail p { max-width: none !important; }
.page[data-page="disciplinas"] .discipline-detail .kicker { grid-column: 2; margin-bottom: 0 !important; }
.page[data-page="disciplinas"] #disciplineName, .page[data-page="disciplinas"] #disciplineText { grid-column: 2; }
.page[data-page="disciplinas"] .discipline-detail .result-box { margin-top: 0 !important; grid-column: 3; }
.page[data-page="disciplinas"] .detail-actions { grid-column: 3; display: flex; justify-content: flex-start; margin-top: 8px; }
.manual-link-btn { border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--guinda), var(--guinda-2)); color: #fff; font-weight: 900; padding: 11px 16px; box-shadow: 0 10px 18px rgba(155,34,71,.18); transition: transform .2s ease, box-shadow .2s ease; }
.manual-link-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(155,34,71,.22); }
@media (max-width: 1180px) { .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } .page[data-page="disciplinas"] .discipline-detail { grid-template-columns: auto 1fr !important; } .page[data-page="disciplinas"] .discipline-detail .result-box, .page[data-page="disciplinas"] .detail-actions { grid-column: 2 !important; } .page[data-page="resumen"] .card-mosaic.three { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 860px) { .page[data-page="resumen"] .card-mosaic.three { grid-template-columns: 1fr !important; } .page[data-page="resumen"] .note-panel { grid-template-columns: 1fr !important; } .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .page[data-page="disciplinas"] .discipline-detail { grid-template-columns: 1fr !important; text-align: left !important; } .page[data-page="disciplinas"] .discipline-detail .kicker, .page[data-page="disciplinas"] #disciplineName, .page[data-page="disciplinas"] #disciplineText, .page[data-page="disciplinas"] .discipline-detail .result-box, .page[data-page="disciplinas"] .detail-actions { grid-column: 1 !important; } }
@media (max-width: 640px) { .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: 1fr !important; } .page[data-page="disciplinas"] .discipline-card { min-height: 100px; } .manual-link-btn { width: 100%; justify-content: center; } }


/* Rediseño página 04: composición simétrica, minimalista y moderna */
.page[data-page="disciplinas"] .discipline-page { gap: 16px !important; }
.page[data-page="disciplinas"] .page-heading.compact { max-width: 100% !important; }
.page[data-page="disciplinas"] .discipline-module { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; gap: 16px !important; align-items: stretch !important; }
.page[data-page="disciplinas"] .discipline-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; gap: 14px !important; }
.page[data-page="disciplinas"] .discipline-card { min-height: 136px !important; padding: 16px 12px !important; border-radius: 22px !important; background: linear-gradient(180deg, #fff, #fcf8fa) !important; border: 1px solid rgba(148,163,184,.20) !important; box-shadow: 0 10px 24px rgba(15,23,42,.05) !important; display: grid !important; gap: 10px !important; align-content: center !important; justify-items: center !important; text-align: center !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important; }
.page[data-page="disciplinas"] .discipline-card:hover { transform: translateY(-2px); box-shadow: 0 16px 26px rgba(155,34,71,.10) !important; }
.page[data-page="disciplinas"] .discipline-card.active { background: linear-gradient(180deg, #fff7fa, #ffffff) !important; border-color: rgba(155,34,71,.28) !important; box-shadow: 0 18px 30px rgba(155,34,71,.14) !important; }
.page[data-page="disciplinas"] .discipline-card img { width: 42px !important; height: 42px !important; }
.page[data-page="disciplinas"] .discipline-card strong { font-size: 16px !important; line-height: 1.12 !important; color: var(--ink) !important; }
.page[data-page="disciplinas"] .modern-discipline-detail { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; align-items: stretch !important; background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.page[data-page="disciplinas"] .discipline-info-panel, .page[data-page="disciplinas"] .discipline-action-panel { background: #fff !important; border: 1px solid rgba(148,163,184,.18) !important; border-radius: 26px !important; padding: 20px !important; box-shadow: 0 14px 28px rgba(15,23,42,.05) !important; min-height: 238px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
.page[data-page="disciplinas"] .discipline-hero-row { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 12px !important; }
.page[data-page="disciplinas"] .discipline-icon-shell { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 22px; background: linear-gradient(180deg, #fff7fa, #fff); border: 1px solid rgba(155,34,71,.12); display: flex; align-items: center; justify-content: center; }
.page[data-page="disciplinas"] .discipline-icon-shell img { width: 48px !important; height: 48px !important; margin: 0 !important; }
.page[data-page="disciplinas"] .discipline-title-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page[data-page="disciplinas"] .discipline-title-stack .kicker { margin: 0 !important; }
.page[data-page="disciplinas"] .discipline-title-stack h3 { font-size: clamp(28px, 2.2vw, 36px) !important; margin: 0 !important; color: var(--guinda) !important; }
.page[data-page="disciplinas"] #disciplineText { font-size: clamp(15px, 1.02vw, 17px) !important; line-height: 1.4 !important; margin: 0 !important; max-width: none !important; }
.page[data-page="disciplinas"] .discipline-action-panel { gap: 14px !important; }
.page[data-page="disciplinas"] .discipline-action-panel .result-box { margin: 0 !important; min-height: 114px; display: grid; align-content: center; }
.page[data-page="disciplinas"] .detail-caption { font-size: 14px !important; line-height: 1.36 !important; color: var(--muted); margin: 0 !important; }
.page[data-page="disciplinas"] .detail-actions { margin-top: auto !important; display: flex !important; justify-content: flex-start !important; }
.page[data-page="disciplinas"] .manual-link-btn { min-height: 46px; padding: 12px 18px !important; border-radius: 999px !important; font-size: 14px !important; letter-spacing: .01em; }
@media (max-width: 1180px) { .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } .page[data-page="disciplinas"] .modern-discipline-detail { grid-template-columns: 1fr !important; } .page[data-page="disciplinas"] .discipline-info-panel, .page[data-page="disciplinas"] .discipline-action-panel { min-height: 0 !important; } }
@media (max-width: 860px) { .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .page[data-page="disciplinas"] .discipline-card { min-height: 120px !important; } .page[data-page="disciplinas"] .discipline-icon-shell { width: 70px; height: 70px; flex-basis: 70px; } .page[data-page="disciplinas"] .discipline-title-stack h3 { font-size: 28px !important; } }
@media (max-width: 640px) { .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: 1fr !important; } .page[data-page="disciplinas"] .discipline-card { min-height: 98px !important; } .page[data-page="disciplinas"] .discipline-info-panel, .page[data-page="disciplinas"] .discipline-action-panel { padding: 16px !important; border-radius: 20px !important; } .page[data-page="disciplinas"] .discipline-hero-row { align-items: flex-start !important; } .page[data-page="disciplinas"] .manual-link-btn { width: 100% !important; } }


/* Manual completo de Terapia Física */
.fisio-area-content { gap: 18px !important; }
.fisio-hero { background: linear-gradient(180deg, #fff, #fff9fb) !important; }
.fisio-definition-block, .fisio-video-block { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: center; }
.fisio-feature-image { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.fisio-feature-image img { width: 100%; height: auto; display: block; object-fit: contain; }
.fisio-feature-image figcaption, .fisio-video-placeholder figcaption { padding: 10px 12px; font-size: 12px; color: var(--muted); font-weight: 750; }
.fisio-impact-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; align-items: stretch; }
.fisio-effect-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.fisio-effect-grid article { border: 1px solid rgba(155,34,71,.12); background: #fff9fb; border-radius: 18px; padding: 13px; display: grid; gap: 6px; }
.fisio-effect-grid strong { color: var(--guinda); font-size: 15px; }
.fisio-effect-grid span { color: var(--muted); font-size: 13px; line-height: 1.3; font-weight: 650; }
.fisio-assessment-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.fisio-assessment-card { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.04); }
.fisio-assessment-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(148,163,184,.18); }
.fisio-assessment-card strong { display:block; color: var(--guinda); font-size: 18px; margin-bottom: 6px; }
.fisio-assessment-card p { margin:0 !important; }
.fisio-flow-block { align-items: start; }
.fisio-video-block code { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #f4f4f5; color: var(--guinda); font-weight: 800; white-space: normal; word-break: break-all; }
.fisio-video-placeholder { margin: 0; border: 1px solid rgba(155,34,71,.14); background: #fff; border-radius: 22px; overflow: hidden; }
.fisio-video-placeholder img { width: 100%; height: 220px; object-fit: cover; display: block; filter: saturate(.92); }
.fisio-close-block { background: var(--guinda-soft) !important; border-color: rgba(155,34,71,.16) !important; }
@media (max-width: 1180px) { .fisio-definition-block, .fisio-video-block, .fisio-impact-layout { grid-template-columns: 1fr; } .fisio-assessment-card { grid-template-columns: 170px 1fr; } .fisio-assessment-card img { height: 108px; } }
@media (max-width: 860px) { .fisio-effect-grid, .fisio-assessment-grid { grid-template-columns: 1fr; } .fisio-assessment-card { grid-template-columns: 150px 1fr; } }
@media (max-width: 640px) { .fisio-assessment-card { grid-template-columns: 1fr; } .fisio-assessment-card img { height: auto; max-height: 210px; object-fit: contain; } .fisio-video-placeholder img { height: auto; } }


/* Terapia Física: video local y visor de imágenes ampliadas */
.fisio-image-frame { position: relative; width: 100%; display: grid; place-items: center; background: #fff; border-radius: 16px; overflow: hidden; }
.fisio-image-frame > img { width: 100% !important; height: auto !important; max-height: 260px; object-fit: contain !important; display: block; border-radius: 14px; background: #fff; }
.fisio-feature-image .fisio-image-frame > img { max-height: 360px; }
.fisio-assessment-card .fisio-image-frame > img { height: 128px !important; max-height: 128px; object-fit: contain !important; }
.image-expand-btn { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border: 1px solid rgba(155,34,71,.20); border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(15,23,42,.14); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; z-index: 2; }
.image-expand-btn:hover { transform: translateY(-1px) scale(1.03); background: #fff; box-shadow: 0 10px 22px rgba(155,34,71,.18); }
.image-expand-btn img { width: 20px !important; height: 20px !important; object-fit: contain !important; }
.fisio-video-frame { margin: 0; border: 1px solid rgba(155,34,71,.14); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px rgba(15,23,42,.04); }
.fisio-video-frame iframe { width: 100%; min-height: 310px; border: 0; display: block; background: #111; }
.fisio-video-frame figcaption { padding: 10px 12px; font-size: 12px; color: var(--muted); font-weight: 750; }
.image-lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.78); padding: clamp(14px, 3vw, 36px); }
.image-lightbox.open { display: flex; }
.image-lightbox img#lightboxImage { max-width: 96vw; max-height: 92vh; object-fit: contain; background: #fff; border-radius: 18px; box-shadow: 0 24px 72px rgba(0,0,0,.34); }
.image-lightbox-close { position: fixed; top: 18px; right: 20px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--guinda); font-size: 32px; line-height: 1; box-shadow: 0 12px 28px rgba(0,0,0,.20); }
@media (max-width: 860px) { .fisio-video-frame iframe { min-height: 240px; } .fisio-assessment-card .fisio-image-frame > img { height: 160px !important; max-height: 160px; } }
@media (max-width: 640px) { .fisio-video-frame iframe { min-height: 210px; } .image-expand-btn { width: 34px; height: 34px; right: 8px; bottom: 8px; } .fisio-assessment-card .fisio-image-frame > img { height: auto !important; max-height: 220px; } }


/* =========================================================
   ACTUALIZACIÓN PICAM: página 00, menú izquierdo, sin Recursos
   ========================================================= */
:root { --nav-w: 116px; --area-tabs-h: 54px; }

.app-header {
  padding: 0 26px 0 calc(var(--nav-w) + 24px) !important;
}

.app-header::after { background: var(--guinda) !important; }

.app-nav {
  left: 0 !important;
  right: auto !important;
  border-left: 0 !important;
  border-right: 1px solid rgba(155, 34, 71, .16) !important;
  box-shadow: 10px 0 32px rgba(23, 27, 33, .06) !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
}
.nav-item:hover,
.nav-item.active { transform: translateX(2px) !important; }

.area-tabs {
  left: var(--nav-w) !important;
  right: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.book-app {
  inset: calc(var(--header-h) + var(--area-tabs-h)) 0 0 var(--nav-w) !important;
}

.page-content p,
.manual-area-content p,
.page00-content p { text-align: justify; text-justify: inter-word; }

.page00-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  height: 100% !important;
  padding: clamp(18px, 2vw, 30px) !important;
  scroll-behavior: smooth;
}

.page00-content > * + * { margin-top: clamp(18px, 2vw, 28px); }

.editorial-panel,
.page00-section,
.module-card,
.mini-check-grid article,
.process-strip article,
.ckm-grid article {
  background: #fff;
  border: 1px solid rgba(23, 27, 33, .10);
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(23, 27, 33, .07);
}

.page00-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
  gap: clamp(18px, 2.1vw, 30px);
  align-items: stretch;
  padding: clamp(22px, 2.4vw, 38px);
}

.page00-title-block { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.page00-title-block h1 { max-width: 980px; }
.hero-action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pill-action {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--guinda), var(--guinda-2));
  color: #fff;
  padding: 12px 18px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(155,34,71,.20);
}
.pill-action.soft { background: #fff; color: var(--guinda); border: 1px solid rgba(155,34,71,.20); box-shadow: none; }

.page00-figure { margin: 0; min-height: 320px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-radius: 24px; border: 1px solid rgba(155,34,71,.12); background: #fff; }
.page00-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.page00-figure figcaption { padding: 12px 14px; color: var(--muted); font-weight: 800; font-size: 13px; }

.page00-section { padding: clamp(18px, 2vw, 28px); }
.section-title-row { display: grid; gap: 4px; margin-bottom: 16px; }
.module-grid { display: grid; gap: 16px; }
.module-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-card { padding: 18px; box-shadow: none; display: flex; flex-direction: column; gap: 10px; }
.module-card span { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--guinda); color: #fff; font-weight: 950; }
.module-card details,
.editorial-panel details,
.manual-guidance-block details { margin-top: 8px; border: 1px solid rgba(155,34,71,.12); border-radius: 16px; padding: 10px 12px; background: #fff9fb; }
.module-card summary,
.editorial-panel summary,
.manual-guidance-block summary { cursor: pointer; font-weight: 900; color: var(--guinda); }
.module-card details p,
.editorial-panel details p,
.manual-guidance-block details p { margin-top: 8px; }

.split-editorial { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.compact-panel { padding: clamp(18px, 2vw, 28px); }
.accent-panel { background: linear-gradient(180deg, #fff9fb, #fff) !important; }
.mini-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.mini-check-grid article { padding: 14px; box-shadow: none; }
.mini-check-grid strong { display: block; color: var(--guinda); margin-bottom: 6px; }
.mini-check-grid span { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; font-weight: 650; }

.process-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.process-strip article { padding: 16px; box-shadow: none; position: relative; overflow: hidden; }
.process-strip article::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--guinda); }
.process-strip strong { display: block; color: var(--guinda); font-size: 18px; margin-bottom: 8px; }

.evidence-panel { background: linear-gradient(180deg, #ffffff, #fff9fb); }
.ckm-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ckm-grid article { padding: 14px; box-shadow: none; }
.ckm-grid b { display: block; color: var(--guinda); margin-bottom: 6px; }
.ckm-grid span { color: var(--muted); font-size: 13px; line-height: 1.3; font-weight: 650; }

.redesigned-summary .page-heading p,
.robust-route-page .page-heading p,
.robust-operation-page .page-heading p { max-width: 1100px; }
.executive-cards .flip-card { min-height: 230px !important; }
.executive-cards .flip-front,
.executive-cards .flip-back { gap: 12px !important; }

.robust-route-page .timeline-tabs { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
.robust-route-page .timeline-tab { min-height: 0; }
.robust-route-page .timeline-tab span { flex: 0 0 auto; }

.robust-model-page .phase-flip-card { min-height: clamp(240px, 32vh, 340px) !important; height: clamp(240px, 32vh, 340px) !important; }

.manual-guidance-block { background: linear-gradient(180deg, #fff9fb, #fff); border-color: rgba(155,34,71,.16) !important; }

/* Página 04: orden y simetría conservada */
.page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
.page[data-page="disciplinas"] .discipline-card strong { color: var(--ink) !important; }

@media (max-width:1180px) {
  .app-header { padding: 0 18px !important; }
  .app-nav { left: 0; right: 0 !important; bottom: 0; top: auto; width: auto; height: 86px; grid-template-columns: repeat(6, minmax(0,1fr)) !important; grid-template-rows: 1fr !important; border-right: 0 !important; border-top: 1px solid rgba(155,34,71,.16); }
  .area-tabs { left: 0 !important; right: 0 !important; }
  .book-app { inset: calc(var(--header-h) + var(--area-tabs-h)) 0 86px 0 !important; }
  .page00-hero,
  .split-editorial { grid-template-columns: 1fr; }
  .module-grid.three,
  .mini-check-grid,
  .ckm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .robust-route-page .timeline-module { grid-template-columns: 1fr !important; }
  .robust-route-page .timeline-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(2, auto) !important; }
}

@media (max-width:860px) {
  .area-tabs { grid-template-columns: repeat(5, minmax(112px,1fr)) !important; overflow-x: auto; }
  .module-grid.three,
  .mini-check-grid,
  .ckm-grid,
  .process-strip { grid-template-columns: 1fr; }
  .page00-figure { min-height: 240px; }
  .robust-route-page .timeline-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width:640px) {
  .book-app { inset: calc(var(--header-h) + var(--area-tabs-h)) 0 0 0 !important; }
  .app-nav { display: none; }
  .page00-content { padding: 12px !important; }
  .page00-hero,
  .page00-section,
  .compact-panel { padding: 16px; border-radius: 22px; }
  .robust-route-page .timeline-tabs { grid-template-columns: 1fr; }
  .page[data-page="disciplinas"] .discipline-grid { grid-template-columns: 1fr !important; }
}

/* Manual Psicología PICAM: integración de instrumentos y flujos */
.psicologia-manual-content {
  text-align: justify;
  hyphens: auto;
}
.psicologia-hero {
  background: linear-gradient(180deg, #fff, #fff8fb);
}
.psych-overview-grid,
.psych-tool-grid,
.psych-calculator-grid,
.psych-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.psych-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.psych-flow-grid article,
.psych-tool-card,
.psych-calculator-card,
.psych-forms-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  padding: clamp(14px, 1.35vw, 20px);
  box-shadow: 0 12px 28px rgba(23, 27, 33, .055);
  min-width: 0;
}
.psych-flow-grid article span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
  margin-bottom: 10px;
}
.psych-flow-grid h4,
.psych-tool-card h4,
.psych-calculator-card h4 {
  margin: 0 0 8px;
  color: var(--guinda);
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.08;
}
.psych-tool-card details {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.12);
}
.psych-tool-card summary {
  cursor: pointer;
  color: var(--guinda);
  font-weight: 900;
}
.doc-button,
.score-button {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--guinda);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  border: 0;
  box-shadow: 0 10px 20px rgba(155,34,71,.16);
}
.score-grid {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.compact-score-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.score-grid label {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: #fbfbfb;
  border: 1px solid rgba(23,27,33,.08);
  text-align: center;
  font-weight: 800;
  color: var(--muted);
}
.score-grid label span {
  font-size: 11px;
  color: var(--guinda);
}
.score-grid select {
  width: 100%;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(23,27,33,.16);
  background: #fff;
  text-align: center;
  color: var(--ink);
}
.score-output {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff8fb;
  border: 1px solid rgba(155,34,71,.14);
  color: var(--ink);
  font-weight: 850;
}
.psych-forms-grid article strong {
  display: block;
  color: var(--guinda);
  margin-bottom: 6px;
  font-size: clamp(16px, 1.08vw, 19px);
}
.psych-thumb-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.psych-thumb-gallery figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(23,27,33,.06);
}
.psych-thumb-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--line);
}
.psych-thumb-gallery figcaption {
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
}
.zoom-link {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(155,34,71,.92);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.psych-handoff-block .manual-indicators li,
.psych-handoff-block .manual-sequence li {
  text-align: left;
}
@media (max-width: 1180px) {
  .psych-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psych-thumb-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compact-score-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .psych-overview-grid,
  .psych-tool-grid,
  .psych-calculator-grid,
  .psych-forms-grid,
  .psych-flow-grid,
  .psych-thumb-gallery {
    grid-template-columns: 1fr;
  }
  .compact-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Psicologia: flujo secuenciado, PDFs descargables y limpieza de miniaturas/interactivos */
.psych-sequenced-care, .psych-decision-pathway, .psych-instruments-block { scroll-margin-top: 120px; }
.psych-stage-ladder { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; counter-reset: psychstep; }
.psych-stage-ladder article, .psych-decision-grid article, .download-card { border:1px solid var(--line); border-radius:var(--radius-xl); background:#fff; padding:clamp(15px,1.35vw,20px); box-shadow:0 12px 28px rgba(23,27,33,.055); min-width:0; }
.psych-stage-ladder article { display:grid; grid-template-rows:auto auto 1fr; gap:8px; }
.psych-stage-ladder article span { width:38px; height:38px; display:grid; place-items:center; border-radius:14px; background:var(--guinda); color:#fff; font-weight:950; }
.psych-stage-ladder h4, .psych-decision-grid strong, .download-card h4 { margin:0 0 7px; color:var(--guinda); font-size:clamp(17px,1.15vw,21px); line-height:1.1; }
.psych-decision-grid, .psych-download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.download-card { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.download-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; min-width:210px; }
.soft-doc-button { background:#fff !important; color:var(--guinda) !important; border:1px solid rgba(155,34,71,.22) !important; box-shadow:none !important; }
.psych-calculators-block, .psych-gallery-block { display:none !important; }
.psych-manual-content .manual-block-head p, .psicologia-manual-content p { text-align:justify; }
@media (max-width:1180px){ .psych-stage-ladder{grid-template-columns:repeat(2,minmax(0,1fr));} .download-card{grid-template-columns:1fr;} .download-actions{justify-content:flex-start; min-width:0;} }
@media (max-width:760px){ .psych-stage-ladder, .psych-decision-grid, .psych-download-grid{grid-template-columns:1fr;} .doc-button{width:100%;} .download-actions{width:100%;} }


/* Integración por áreas como páginas internas dentro del contenedor */
.manual-subpage .subpage-content,
.manual-area-page .page-content {
  text-align: justify;
  text-justify: inter-word;
}

.subpage-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 4px;
}

.back-area-btn,
.internal-nav-btn,
.manual-link-btn,
.page-link-btn {
  cursor: pointer;
}

.back-area-btn {
  border: 1px solid rgba(155,34,71,.20);
  background: #fff;
  color: var(--guinda);
  font-weight: 900;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.area-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.internal-button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.internal-nav-btn {
  border: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg,#fff,#fff9fb);
  border-radius: 24px;
  padding: 18px 16px;
  min-height: 118px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 14px 24px rgba(15,23,42,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.internal-nav-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(155,34,71,.32);
  box-shadow: 0 18px 30px rgba(155,34,71,.12);
}

.internal-nav-btn img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.internal-nav-btn span {
  color: var(--guinda);
  font-weight: 950;
  line-height: 1.15;
}

.subpage-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.subpage-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
  min-height: 150px;
}

.flow-list {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 12px 0 0;
}

.flow-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 18px;
  padding: 14px;
}

.flow-list li > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
}

.flow-list strong {
  display: block;
  color: var(--guinda);
  margin-bottom: 4px;
}

.instrument-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.two-col-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px 16px;
  margin-top: 12px;
}

.two-col-list p {
  padding: 10px 12px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 14px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.tag-cloud span {
  display: inline-flex;
  border-radius: 999px;
  padding: 9px 12px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 850;
  border: 1px solid rgba(155,34,71,.14);
}

.manual-alert {
  padding: 16px 18px;
  border-radius: 20px;
  background: #fff7ed;
  color: #7c2d12;
  border: 1px solid #fed7aa;
  font-weight: 750;
}

.document-page-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.document-page {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.document-page img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: contain;
}

.document-page figcaption {
  padding: 8px 4px 0;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.video-embed-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.video-embed-card video {
  width: 100%;
  max-height: 420px;
  margin-top: 12px;
  border-radius: 18px;
  background: #111;
}

.manual-block.two-cols {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

@media (max-width:1180px) {
  .internal-button-grid,
  .subpage-card-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .document-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:860px) {
  .area-intro-grid,
  .manual-block.two-cols,
  .two-col-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width:640px) {
  .internal-button-grid,
  .subpage-card-grid {
    grid-template-columns: 1fr;
  }
  .internal-nav-btn {
    min-height: 92px;
    padding: 14px;
  }
  .flow-list li {
    grid-template-columns: 40px 1fr;
  }
  .flow-list li > span {
    width: 34px;
    height: 34px;
  }
}


/* Ventanas emergentes internas para páginas de instrumentos y flujos por área */
#internalPageTemplates {
  display: none !important;
}

body.internal-modal-open {
  overflow: hidden !important;
}

.internal-area-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 22px;
}

.internal-area-modal.open {
  display: flex;
}

.internal-area-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .58);
  backdrop-filter: blur(6px);
}

.internal-area-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 30px 90px rgba(0,0,0,.32);
}

.internal-area-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg, #fff, #fff9fb);
}

.internal-area-modal-header h2 {
  margin: 0 !important;
  font-size: clamp(24px, 2.5vw, 38px) !important;
  line-height: 1.02 !important;
  color: var(--guinda) !important;
}

.internal-area-modal-close {
  border: 1px solid rgba(155,34,71,.22);
  border-radius: 999px;
  background: #fff;
  color: var(--guinda);
  font-weight: 950;
  padding: 11px 16px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.internal-area-modal-content {
  overflow: auto;
  padding: 20px;
  background: #fbfbfb;
  text-align: justify;
  text-justify: inter-word;
}

.internal-area-modal-content .page-content,
.internal-area-modal-content .manual-area-content,
.internal-area-modal-content .subpage-content {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  gap: 16px !important;
}

.internal-area-modal-content .manual-area-hero {
  margin-bottom: 0;
}

.internal-area-modal-content .document-page-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.internal-area-modal-content .document-page img {
  max-height: none;
}

@media (max-width: 860px) {
  .internal-area-modal {
    padding: 10px;
  }

  .internal-area-modal-dialog {
    max-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  .internal-area-modal-header {
    padding: 14px;
    align-items: flex-start;
  }

  .internal-area-modal-content {
    padding: 14px;
  }

  .internal-area-modal-content .document-page-grid,
  .internal-area-modal-content .subpage-card-grid,
  .internal-area-modal-content .area-intro-grid,
  .internal-area-modal-content .internal-button-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .internal-area-modal-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .internal-area-modal-close {
    width: 100%;
  }
}


/* Cards de enlace a páginas HTML colocadas como assets */
.asset-link-grid-block {
  text-align: left;
}

.asset-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 12px;
}

.asset-link-card {
  min-height: 122px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg, #fff, #fff9fb);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 14px 26px rgba(15,23,42,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.asset-link-card:hover {
  transform: translateY(-2px);
  border-color: rgba(155,34,71,.32);
  box-shadow: 0 18px 32px rgba(155,34,71,.12);
}

.asset-link-card img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.asset-link-card span {
  color: var(--guinda);
  font-weight: 950;
  line-height: 1.15;
}

.asset-link-card small {
  color: var(--muted);
  font-weight: 800;
}

@media (max-width:1180px) {
  .asset-link-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px) {
  .asset-link-grid {
    grid-template-columns: 1fr;
  }
  .asset-link-card {
    min-height: 96px;
  }
}


/* Páginas secundarias integradas dentro del contenedor principal */
.embedded-asset-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.embedded-asset-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  text-align: justify;
  text-justify: inter-word;
}

.embedded-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  padding: 4px 0 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84));
  backdrop-filter: blur(10px);
}

.embedded-asset-page .asset-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 0;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: var(--shadow);
}

.embedded-asset-page .asset-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 56px) !important;
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--guinda);
  text-align: left;
}

.embedded-asset-page .asset-hero p {
  max-width: 980px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.42 !important;
}

.embedded-asset-page .asset-icon {
  width: clamp(64px, 7vw, 102px);
  height: clamp(64px, 7vw, 102px);
  object-fit: contain;
}

.embedded-asset-page .asset-section,
.embedded-asset-page .asset-card,
.embedded-asset-page .asset-callout,
.embedded-asset-page .asset-document,
.embedded-asset-page .instrument-table,
.embedded-asset-page .video-card,
.embedded-asset-page .doc-page-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 1.6vw, 24px);
  box-shadow: var(--shadow);
}

.embedded-asset-page .asset-section h3,
.embedded-asset-page .asset-card h3,
.embedded-asset-page .asset-document h3 {
  color: var(--guinda);
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.08;
  margin: 0 0 10px;
}

.embedded-asset-page .asset-section p,
.embedded-asset-page .asset-card p,
.embedded-asset-page .asset-document p,
.embedded-asset-page .asset-doc-text p {
  color: var(--muted);
  line-height: 1.48 !important;
  margin: 0 0 10px;
  text-align: justify;
}

.embedded-asset-page .asset-card-grid,
.embedded-asset-page .subpage-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.embedded-asset-page .asset-card {
  min-height: 155px;
  display: grid;
  align-content: start;
}

.embedded-asset-page .asset-card span,
.embedded-asset-page .tag-cloud span {
  display: inline-flex;
  width: fit-content;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(155,34,71,.12);
}

.embedded-asset-page .asset-flow-list,
.embedded-asset-page .flow-list {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 12px 0 0;
}

.embedded-asset-page .asset-flow-list li,
.embedded-asset-page .flow-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.12);
}

.embedded-asset-page .asset-flow-list li > span,
.embedded-asset-page .flow-list li > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
}

.embedded-asset-page .asset-flow-list strong,
.embedded-asset-page .flow-list strong {
  display: block;
  color: var(--guinda);
  margin-bottom: 4px;
}

.embedded-asset-page .asset-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.embedded-asset-page .asset-table-wrap {
  overflow: auto;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.embedded-asset-page .asset-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.embedded-asset-page .asset-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: top;
  color: var(--muted);
  font-size: 14px;
}

.embedded-asset-page .doc-page-grid,
.embedded-asset-page .document-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.embedded-asset-page .doc-page-card,
.embedded-asset-page .document-page {
  margin: 0;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.embedded-asset-page .doc-page-card img,
.embedded-asset-page .document-page img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}

.embedded-asset-page .doc-page-card figcaption,
.embedded-asset-page .document-page figcaption {
  text-align: center;
  color: var(--muted);
  font-weight: 850;
  padding-top: 8px;
}

.embedded-asset-page .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.embedded-asset-page .asset-alert,
.embedded-asset-page .manual-alert {
  padding: 16px 18px;
  border-radius: 20px;
  background: #fff7ed;
  color: #7c2d12;
  border: 1px solid #fed7aa;
  font-weight: 750;
}

.embedded-asset-page .video-card video,
.embedded-asset-page .video-embed-card video {
  width: 100%;
  max-height: 520px;
  border-radius: 20px;
  background: #111;
}

.asset-link-card {
  cursor: pointer;
}

.asset-link-card[href="#"] {
  outline: none;
}

@media (max-width: 1180px) {
  .embedded-asset-page .asset-card-grid,
  .embedded-asset-page .subpage-card-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .embedded-asset-page .doc-page-grid,
  .embedded-asset-page .document-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .embedded-asset-page .asset-hero {
    grid-template-columns: 1fr;
  }
  .embedded-asset-page .asset-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .embedded-asset-page .asset-card-grid,
  .embedded-asset-page .subpage-card-grid {
    grid-template-columns: 1fr;
  }
  .embedded-asset-page .asset-flow-list li,
  .embedded-asset-page .flow-list li {
    grid-template-columns: 40px 1fr;
  }
  .embedded-asset-page .asset-flow-list li > span,
  .embedded-asset-page .flow-list li > span {
    width: 34px;
    height: 34px;
  }
}


/* Refuerzo navegación interna: páginas secundarias tipo área */
.embedded-asset-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.embedded-asset-page.active {
  display: block !important;
}

.embedded-asset-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  text-align: justify;
  text-justify: inter-word;
}

.asset-link-card[href^="#"] {
  cursor: pointer;
}

.asset-link-card[href^="#"]:focus-visible,
.back-area-btn:focus-visible {
  outline: 3px solid rgba(155,34,71,.35);
  outline-offset: 3px;
}

.embedded-topbar {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 4px 0 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  backdrop-filter: blur(10px);
}


/* Rediseño infográfico de páginas secundarias */
.infographic-subpage {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.infographic-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  text-align: justify;
  text-justify: inter-word;
}

.infographic-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: var(--shadow);
}

.infographic-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 58px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em;
  color: var(--guinda);
  text-align: left;
}

.infographic-hero p {
  max-width: 980px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.42 !important;
}

.area-logo-orb {
  width: clamp(86px, 9vw, 118px);
  height: clamp(86px, 9vw, 118px);
  border-radius: 32px;
  display: grid;
  place-items: center;
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.65);
}

.area-logo-orb img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.metric-strip article,
.insight-card,
.styled-table-card,
.mini-dashboard,
.flow-panel,
.split-panel > article,
.video-embed-card,
.infographic-alert {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 1.6vw, 22px);
  box-shadow: var(--shadow);
}

.metric-strip article {
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.metric-strip span,
.card-tag {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 900;
  font-size: 12px;
}

.metric-strip strong {
  color: var(--guinda);
  font-size: clamp(22px,2.2vw,34px);
  line-height: 1;
}

.metric-strip small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.25;
}

.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--guinda);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

.section-divider::before,
.section-divider::after {
  content: "";
  height: 1px;
  background: rgba(155,34,71,.22);
  flex: 1;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.insight-card {
  min-height: 166px;
}

.insight-card h3,
.styled-table-card h3,
.mini-dashboard h3,
.flow-node h3,
.split-panel h3,
.video-embed-card h3 {
  margin: 8px 0 8px;
  color: var(--guinda);
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.08;
}

.insight-card p,
.flow-node p,
.mini-dashboard span,
.timeline-visual p {
  color: var(--muted);
  line-height: 1.45 !important;
  text-align: justify;
}

.flow-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px,1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.flow-node {
  min-width: 180px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 22px;
  padding: 16px;
}

.flow-node span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
}

.styled-table-card {
  overflow: auto;
}

.styled-table-card table {
  width: 100%;
  border-collapse: collapse;
}

.styled-table-card th {
  background: var(--guinda);
  color: #fff;
  text-align: left;
  padding: 12px;
  font-size: 14px;
}

.styled-table-card td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  color: var(--muted);
  vertical-align: top;
  font-size: 14px;
}

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.gauge-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

.gauge-ring {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--guinda) calc(var(--value)*1%), #eadde2 0);
}

.gauge-ring span {
  background: #fff;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: var(--guinda);
}

.timeline-visual {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.timeline-visual article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow);
}

.timeline-visual article span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
}

.timeline-visual h3 {
  margin: 10px 0 6px;
  color: var(--guinda);
}

.pill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow);
}

.pill-cloud span {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 850;
  border: 1px solid rgba(155,34,71,.14);
}

.split-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.dashboard-grid article {
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 18px;
  padding: 14px;
}

.dashboard-grid strong {
  display: block;
  color: var(--guinda);
  margin-bottom: 6px;
}

.infographic-alert {
  background: #fff7ed;
  color: #7c2d12;
  border-color: #fed7aa;
  font-weight: 750;
}

.video-embed-card video {
  width: 100%;
  max-height: 520px;
  border-radius: 20px;
  background: #111;
}

@media (max-width: 1180px) {
  .metric-strip,
  .insight-grid,
  .gauge-grid,
  .timeline-visual,
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .infographic-hero,
  .split-panel {
    grid-template-columns: 1fr;
  }
  .flow-track {
    grid-template-columns: 1fr;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .metric-strip,
  .insight-grid,
  .gauge-grid,
  .timeline-visual,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* Integración estructural MANUAL INTERACTIVO PICAM + flujograma */
.foundation-content,
.foundation-home { height: auto !important; min-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; display: grid !important; gap: 18px !important; text-align: justify; text-justify: inter-word; }
.foundation-hero { grid-template-columns: 1.2fr .8fr !important; align-items: stretch !important; }
.hero-badge-stack { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: center; }
.hero-badge-stack span { border-radius: 22px; background: var(--guinda-soft); color: var(--guinda); border: 1px solid rgba(155,34,71,.14); padding: 18px; text-align: center; font-weight: 950; letter-spacing: .1em; }
.frame-action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.frame-action { border: 1px solid rgba(155,34,71,.18); background: #fff; border-radius: 26px; padding: 14px; min-height: 210px; display: grid; grid-template-rows: 1fr auto auto; gap: 10px; text-align: left; box-shadow: var(--shadow); }
.frame-action:hover { transform: translateY(-2px); border-color: rgba(155,34,71,.35); }
.frame-preview { display: grid; align-content: center; gap: 8px; min-height: 110px; border-radius: 20px; border: 2px solid rgba(155,34,71,.18); background: linear-gradient(180deg,#fff9fb,#fff); padding: 14px; }
.frame-preview b { color: var(--guinda); font-size: 16px; }
.frame-preview em { color: var(--muted); font-style: normal; font-weight: 800; }
.frame-action strong { color: var(--guinda); font-size: 20px; }
.frame-action small { color: var(--muted); font-weight: 750; line-height: 1.25; }
.module-grid, .symmetry-grid, .route-stage-grid, .area-role-grid { display: grid; gap: 16px; }
.module-grid.three-balanced { grid-template-columns: repeat(3,minmax(0,1fr)); }
.module-grid.four-balanced, .symmetry-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.area-role-grid.five-balanced { grid-template-columns: repeat(5,minmax(0,1fr)); }
.module-grid article, .symmetry-grid article, .route-stage-grid article, .area-role-grid button { background:#fff; border:1px solid var(--line); border-radius: var(--radius-xl); padding:18px; box-shadow: var(--shadow); min-height: 150px; overflow-wrap: anywhere; }
.module-grid span, .route-stage-grid span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--guinda); color:#fff; font-weight:950; margin-bottom:10px; }
.module-grid h3, .route-stage-grid h3, .symmetry-grid b { color: var(--guinda); margin: 0 0 8px; }
.module-grid p, .route-stage-grid p, .symmetry-grid p { color: var(--muted); line-height: 1.42; margin: 0; }
.flow-diagram-panel { display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); }
.flow-pill { min-height:70px; display:grid; place-items:center; border-radius:20px; background:var(--guinda-soft); color:var(--guinda); font-weight:950; text-align:center; }
.flow-arrow { color:var(--guinda); font-weight:950; font-size:22px; }
.flow-image-card { display:grid; grid-template-columns:.75fr 1.25fr; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); align-items:center; }
.expandable-figure { position:relative; margin:0; border-radius:20px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.expandable-figure img { width:100%; height:auto; object-fit:contain; }
.image-expand-btn { position:absolute; right:12px; bottom:12px; z-index:2; border:0; border-radius:999px; background:var(--guinda); color:#fff; font-weight:950; padding:9px 12px; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.route-stage-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.area-role-grid button { display:grid; justify-items:center; align-content:center; gap:10px; text-align:center; }
.area-role-grid img { width:46px; height:46px; }
.area-role-grid strong { color:var(--guinda); font-size:17px; }
.area-role-grid small { color:var(--muted); font-weight:750; line-height:1.25; }
.document-access-panel, .document-library-panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); }
.document-access-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px; margin-top:12px; }
.resource-pdf-btn { min-height:58px; border-radius:18px; border:1px solid rgba(155,34,71,.18); background:linear-gradient(180deg,#fff,#fff9fb); color:var(--guinda); font-weight:950; padding:10px; text-align:center; }
.resource-pdf-btn:hover { background: var(--guinda); color:#fff; }
.pdf-resource-modal { position:fixed; inset:0; z-index:8000; display:none; padding:20px; }
.pdf-resource-modal.open { display:flex; }
.pdf-modal-backdrop { position:absolute; inset:0; background:rgba(17,24,39,.64); backdrop-filter:blur(6px); }
.pdf-modal-dialog { position:relative; z-index:1; width:min(1180px,100%); max-height:calc(100vh - 40px); margin:auto; display:grid; grid-template-rows:auto 1fr; border-radius:28px; overflow:hidden; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.pdf-modal-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; background:#fff9fb; border-bottom:1px solid rgba(155,34,71,.16); }
.pdf-modal-dialog h2 { margin:0; color:var(--guinda); }
.pdf-modal-dialog button { border:1px solid rgba(155,34,71,.2); border-radius:999px; background:#fff; color:var(--guinda); font-weight:950; padding:10px 14px; }
.pdf-modal-dialog iframe { width:100%; height:82vh; border:0; background:#fff; }
.image-lightbox { position:fixed; inset:0; z-index:8500; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(17,24,39,.72); backdrop-filter:blur(6px); }
.image-lightbox.open { display:flex; }
.image-lightbox img { max-width:94vw; max-height:88vh; object-fit:contain; background:#fff; border-radius:16px; box-shadow:0 22px 60px rgba(0,0,0,.35); }
.image-lightbox-close { position:absolute; top:18px; right:18px; border:0; border-radius:999px; background:#fff; color:var(--guinda); width:46px; height:46px; font-size:26px; font-weight:900; }
.asset-link-grid, .internal-button-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
.asset-link-card, .internal-nav-btn, .insight-card, .module-grid article, .route-stage-grid article { overflow: hidden; overflow-wrap:anywhere; }
.asset-link-card span, .internal-nav-btn span { line-height:1.18; }
@media (min-width:1181px) { .asset-link-grid:has(.asset-link-card:nth-child(4):last-child) { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } .document-access-grid:has(.resource-pdf-btn:nth-child(4):last-child) { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:1180px) { .frame-action-grid, .module-grid.four-balanced, .symmetry-grid.four, .document-access-grid, .area-role-grid.five-balanced { grid-template-columns: repeat(2,minmax(0,1fr)); } .flow-diagram-panel { grid-template-columns:1fr; } .flow-arrow { transform: rotate(90deg); justify-self:center; } .flow-image-card { grid-template-columns:1fr; } .route-stage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .frame-action-grid, .module-grid.three-balanced, .module-grid.four-balanced, .symmetry-grid.four, .route-stage-grid, .area-role-grid.five-balanced, .document-access-grid { grid-template-columns:1fr; } .foundation-hero { grid-template-columns:1fr !important; } }

/* Rediseño de páginas numeradas y documentos PICAM */
.numbered-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.numbered-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: clamp(16px, 2vw, 24px) !important;
  align-content: start !important;
  text-align: justify;
  text-justify: inter-word;
}

.relaxed-heading {
  max-width: 1120px !important;
  padding-bottom: 4px;
}

.relaxed-heading h2 {
  font-size: clamp(32px, 3.6vw, 58px) !important;
  line-height: .98 !important;
}

.relaxed-heading p {
  max-width: 980px;
  line-height: 1.45 !important;
}

.numbered-hero {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr);
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(180deg,#fff,#fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 2.2vw, 30px);
  box-shadow: var(--shadow);
}

.numbered-hero h1 {
  font-size: clamp(42px, 6vw, 96px) !important;
  line-height: .86 !important;
  margin-bottom: 14px;
}

.numbered-hero p {
  max-width: 880px;
  color: var(--muted);
  line-height: 1.44 !important;
  font-weight: 650;
}

.hero-frame-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: center;
}

.hero-frame-stack span {
  min-height: 76px;
  border-radius: 22px;
  background: #fff;
  border: 2px solid rgba(155,34,71,.20);
  color: var(--guinda);
  display: grid;
  place-items: center;
  font-weight: 950;
  letter-spacing: .10em;
  box-shadow: inset 0 0 0 7px #fff7fa;
}

.framed-home-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 14px !important;
}

.frame-action {
  min-height: 190px !important;
  padding: 16px !important;
  border: 1px solid rgba(155,34,71,.16) !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg,#fff,#fff9fb) !important;
  box-shadow: var(--shadow) !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 12px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.frame-preview {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border-radius: 20px;
  border: 2px solid rgba(155,34,71,.22);
  box-shadow: inset 0 0 0 7px #fff;
  background: var(--guinda-soft);
  color: var(--guinda);
}

.frame-preview b {
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.frame-preview em {
  font-style: normal;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.15;
}

.frame-action strong {
  color: var(--guinda);
  font-size: clamp(18px,1.35vw,23px);
  line-height: 1.05;
}

.frame-action small {
  color: var(--muted);
  line-height: 1.28;
  font-weight: 750;
}

.numbered-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.numbered-metric-strip article,
.numbered-card,
.numbered-panel,
.vector-flow-panel,
.flow-image-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 1.65vw, 24px);
  box-shadow: var(--shadow);
  min-width: 0;
}

.numbered-metric-strip article {
  min-height: 124px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.numbered-metric-strip span,
.card-tag {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-size: 12px;
  font-weight: 950;
}

.numbered-metric-strip strong {
  color: var(--guinda);
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1;
}

.numbered-metric-strip small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.25;
}

.numbered-card-grid {
  display: grid;
  gap: 16px;
}

.numbered-card-grid.four-even,
.symmetry-grid.four.force-four,
.picam-timeline.four-even {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.numbered-card-grid.six-even {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.numbered-card {
  min-height: 166px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: hidden;
}

.numbered-card h3,
.numbered-panel h3,
.vector-flow-panel h3,
.flow-image-card h3 {
  color: var(--guinda);
  font-size: clamp(20px, 1.65vw, 28px) !important;
  line-height: 1.08;
  margin-bottom: 8px;
}

.numbered-card p,
.numbered-panel p,
.flow-image-card p {
  color: var(--muted);
  line-height: 1.42 !important;
  overflow-wrap: anywhere;
}

.numbered-flow {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow);
}

.flow-track-free {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px,1fr));
  gap: 14px;
}

.flow-track-free article {
  min-height: 160px;
  border-radius: 22px;
  border: 1px solid rgba(155,34,71,.12);
  background: #fff9fb;
  padding: 16px;
}

.flow-track-free span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
  margin-bottom: 10px;
}

.flow-track-free h3 {
  color: var(--guinda);
  font-size: 18px !important;
  line-height: 1.1;
}

.flow-track-free p {
  color: var(--muted);
  line-height: 1.35 !important;
}

.panel-head-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 12px;
}

.picam-flow-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.08);
}

.flow-image-card {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(360px,1.2fr);
  gap: 18px;
  align-items: start;
}

.expandable-figure,
.auto-expand-wrap,
.doc-page-card,
.document-page {
  position: relative;
}

.expandable-figure img,
.auto-expand-wrap img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.image-expand-btn,
.auto-image-expand-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  border: 0;
  border-radius: 999px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
  padding: 9px 13px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.compact-doc-panel .refined-doc-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.refined-doc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.resource-pdf-btn {
  border: 1px solid rgba(155,34,71,.16);
  background: linear-gradient(180deg,#fff,#fff9fb);
  border-radius: 20px;
  padding: 14px;
  min-height: 96px;
  display: grid;
  gap: 6px;
  align-content: center;
  text-align: left;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
}

.resource-pdf-btn strong {
  color: var(--guinda);
  font-weight: 950;
  line-height: 1.1;
}

.resource-pdf-btn small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.25;
}

.resource-pdf-btn.compact {
  min-height: auto;
  padding: 10px 14px;
  border-radius: 999px;
  width: max-content;
}

/* PDF modal */
.pdf-modal,
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: none;
}

.pdf-modal.open,
.image-lightbox.open {
  display: flex;
}

.pdf-modal {
  padding: 20px;
  align-items: stretch;
  justify-content: center;
}

.pdf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.64);
  backdrop-filter: blur(8px);
}

.pdf-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.55);
}

.pdf-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg,#fff,#fff9fb);
}

.pdf-modal-header h2 {
  margin: 0;
  color: var(--guinda);
  font-size: clamp(22px,2.4vw,36px) !important;
}

.pdf-modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pdf-modal-actions a,
.pdf-modal-actions button {
  border: 1px solid rgba(155,34,71,.20);
  border-radius: 999px;
  background: #fff;
  color: var(--guinda);
  font-weight: 950;
  padding: 10px 14px;
  text-decoration: none;
}

.pdf-modal-viewer {
  background: #2f3338;
  min-height: 0;
}

.pdf-modal-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* Lightbox */
.image-lightbox {
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17,24,39,.75);
  backdrop-filter: blur(8px);
}

.image-lightbox img {
  max-width: 96vw;
  max-height: 90vh;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--guinda);
  font-weight: 950;
  padding: 10px 15px;
}

body.modal-open {
  overflow: hidden !important;
}

@media (max-width: 1280px) {
  .refined-doc-grid,
  .numbered-card-grid.four-even,
  .symmetry-grid.four.force-four,
  .picam-timeline.four-even,
  .framed-home-actions,
  .numbered-metric-strip {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .numbered-card-grid.six-even {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .flow-track-free {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .numbered-hero,
  .flow-image-card {
    grid-template-columns: 1fr;
  }
  .refined-doc-grid,
  .compact-doc-panel .refined-doc-grid,
  .numbered-card-grid.four-even,
  .numbered-card-grid.six-even,
  .symmetry-grid.four.force-four,
  .picam-timeline.four-even,
  .framed-home-actions,
  .numbered-metric-strip,
  .flow-track-free {
    grid-template-columns: 1fr !important;
  }
  .pdf-modal {
    padding: 8px;
  }
  .pdf-modal-dialog {
    height: calc(100vh - 16px);
    border-radius: 20px;
  }
  .pdf-modal-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Corrección integral solicitada: marcos, flujo completo, cards interactivas e imágenes */
.hero-window-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: center;
}

.framework-open-btn {
  min-height: 86px;
  border-radius: 24px;
  border: 2px solid rgba(155,34,71,.20);
  background: linear-gradient(180deg, #fff, #fff9fb);
  box-shadow: inset 0 0 0 7px #fff, 0 14px 28px rgba(23,27,33,.08);
  padding: 14px 16px;
  text-align: left;
  display: grid;
  gap: 6px;
}

.framework-open-btn strong {
  color: var(--guinda);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.05;
}

.framework-open-btn small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
}

.interactive-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.info-flip-card {
  min-height: 228px;
  perspective: 1200px;
  cursor: pointer;
  position: relative;
}

.info-flip-card .flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
  border-radius: var(--radius-xl);
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 8px;
}

.info-flip-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff9fb, #fff);
}

.info-flip-card.flipped .flip-front {
  transform: rotateY(180deg);
}

.info-flip-card.flipped .flip-back {
  transform: rotateY(0);
}

.info-flip-card span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 950;
  font-size: 12px;
}

.info-flip-card h3 {
  color: var(--guinda);
  font-size: clamp(18px,1.5vw,25px) !important;
  line-height: 1.08;
}

.info-flip-card p {
  color: var(--muted);
  line-height: 1.35 !important;
}

.info-flip-card small {
  align-self: end;
  color: var(--guinda);
  font-weight: 900;
}

.full-flow-map {
  overflow: hidden;
}

.flow-canvas-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.flow-canvas {
  min-width: 1240px;
  display: grid;
  gap: 18px;
  padding: 4px;
}

.flow-row {
  display: grid;
  grid-template-columns: minmax(190px,1fr) 34px minmax(190px,1fr) 34px minmax(220px,1fr);
  gap: 10px;
  align-items: center;
}

.compact-row {
  grid-template-columns: minmax(170px,1fr) 34px minmax(190px,1fr) 34px minmax(230px,1fr);
}

.flow-box,
.flow-decision {
  background: #fff;
  border: 1px solid rgba(155,34,71,.16);
  border-radius: 22px;
  padding: 15px;
  min-height: 120px;
  box-shadow: 0 12px 26px rgba(23,27,33,.06);
  display: grid;
  align-content: start;
  gap: 7px;
}

.flow-box h3 {
  margin: 0 0 3px;
  color: var(--guinda);
  font-size: 18px !important;
  line-height: 1.08;
}

.flow-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.25 !important;
  font-size: 13px;
  text-align: left;
}

.flow-decision {
  min-height: 138px;
  place-items: center;
  text-align: center;
  background: #fff7fa;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  padding: 28px;
}

.flow-decision strong {
  color: var(--guinda);
  font-size: 16px;
  line-height: 1.1;
}

.flow-decision span {
  color: var(--muted);
  font-weight: 900;
}

.flow-arrow-line {
  display: grid;
  place-items: center;
  color: var(--guinda);
  font-size: 28px;
  font-weight: 950;
}

.flow-branch-grid {
  display: grid;
  grid-template-columns: 2.2fr .8fr;
  gap: 16px;
  align-items: start;
}

.flow-branch {
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 26px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(23,27,33,.06);
}

.flow-branch h4 {
  margin: 0 0 12px;
  color: var(--guinda);
  font-size: 18px;
  letter-spacing: .02em;
}

.flow-subbranch-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 14px;
  margin-top: 14px;
}

.flow-stack {
  display: grid;
  gap: 10px;
}

.flow-box.start { border-color: rgba(30,91,79,.25); }
.flow-box.lab { background: #f5fbf9; border-color: rgba(30,91,79,.22); }
.flow-box.doc { background: #fffaf0; border-color: rgba(165,127,44,.22); }
.flow-box.traffic { background: linear-gradient(90deg, #fee2e2, #fef3c7, #dcfce7); }
.flow-box.follow { background: #f8fafc; }

.framework-modal {
  position: fixed;
  inset: 0;
  z-index: 7200;
  display: none;
  padding: 22px;
  align-items: center;
  justify-content: center;
}

.framework-modal.open {
  display: flex;
}

.framework-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.62);
  backdrop-filter: blur(8px);
}

.framework-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}

.framework-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  border-bottom: 1px solid rgba(155,34,71,.14);
}

.framework-header h2 {
  color: var(--guinda);
  font-size: clamp(24px,2.7vw,42px) !important;
  margin: 0;
}

.framework-header button {
  border: 1px solid rgba(155,34,71,.2);
  border-radius: 999px;
  background: #fff;
  color: var(--guinda);
  font-weight: 950;
  padding: 10px 14px;
}

.framework-body {
  overflow: auto;
  padding: 22px;
  display: grid;
  gap: 16px;
}

.framework-body .framework-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.framework-body article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.framework-body h3 {
  color: var(--guinda);
  font-size: 20px !important;
}

.framework-body p {
  color: var(--muted);
  line-height: 1.4 !important;
}

.medicine-lab-dashboard {
  margin-top: 0;
}

@media (max-width: 1280px) {
  .interactive-flip-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .hero-window-actions,
  .interactive-flip-grid,
  .framework-body .framework-grid,
  .flow-branch-grid,
  .flow-subbranch-grid {
    grid-template-columns: 1fr;
  }
  .flow-canvas {
    min-width: 980px;
  }
}

@media (max-width: 640px) {
  .interactive-flip-grid {
    grid-template-columns: 1fr;
  }
}


.visual-gallery-panel {
  overflow: hidden;
}

.visual-doc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.visual-doc-card {
  position: relative;
  margin: 0;
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
}

.visual-doc-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
}

@media (max-width: 1280px) {
  .visual-doc-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  .visual-doc-grid {
    grid-template-columns: 1fr;
  }
}

#pdfObject {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}


/* Material Symbols iconografía Google */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 500;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-grid;
  place-items: center;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-iconified,
.asset-link-card .material-symbols-rounded,
.discipline-card .material-symbols-rounded,
.area-role-grid .material-symbols-rounded {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--guinda-soft);
  color: var(--guinda);
  border: 1px solid rgba(155,34,71,.14);
}

.manual-area-hero .material-symbols-rounded,
.infographic-hero .material-symbols-rounded,
.area-logo-orb .material-symbols-rounded {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  font-size: 54px;
  color: var(--guinda);
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.14);
}

/* Flujo PICAM interactivo sin rombos */
.interactive-flow-board {
  overflow: hidden;
}

.flow-board-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
}

.flow-board {
  min-width: 1320px;
  display: grid;
  gap: 18px;
  padding: 4px;
}

.flow-lane,
.flow-branch-panel,
.flow-path {
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 28px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 14px 28px rgba(23,27,33,.06);
}

.lane-title,
.path-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--guinda);
  margin-bottom: 14px;
}

.lane-title .material-symbols-rounded,
.path-title .material-symbols-rounded {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--guinda-soft);
  font-size: 24px;
}

.flow-row {
  display: grid;
  grid-template-columns: minmax(210px,1fr) 34px minmax(210px,1fr) 34px minmax(230px,1fr) 34px minmax(240px,1fr);
  gap: 10px;
  align-items: center;
}

.flow-row.wrap-row {
  grid-template-columns: minmax(210px,1fr) 34px minmax(240px,1fr) 34px minmax(260px,1fr);
}

.flow-split {
  display: grid;
  grid-template-columns: 2.15fr .85fr;
  gap: 16px;
  align-items: start;
}

.flow-subgrid {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 14px;
  margin-top: 14px;
}

.flow-stack {
  display: grid;
  gap: 10px;
}

.flow-step-card {
  border: 1px solid rgba(155,34,71,.16);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  padding: 14px;
  min-height: 126px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 10px;
  align-content: start;
  text-align: left;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.flow-step-card:hover {
  transform: translateY(-2px);
  border-color: rgba(155,34,71,.34);
  box-shadow: 0 18px 32px rgba(155,34,71,.14);
}

.flow-step-card .material-symbols-rounded {
  grid-row: span 3;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--guinda);
  background: #fff;
  border: 1px solid rgba(155,34,71,.14);
  font-size: 25px;
}

.flow-step-card strong {
  color: var(--guinda);
  font-size: 16px;
  line-height: 1.1;
}

.flow-step-card small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.24;
}

.flow-step-card.decision {
  background: linear-gradient(180deg, #fff7ed, #fff);
  border-color: #fed7aa;
}

.flow-step-card.branch {
  background: linear-gradient(180deg, #eef8f5, #fff);
  border-color: rgba(30,91,79,.22);
}

.flow-step-card.lab {
  background: linear-gradient(180deg, #eff6ff, #fff);
  border-color: rgba(59,130,246,.24);
}

.flow-step-card.doc {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border-color: rgba(165,127,44,.22);
}

.flow-step-card.team {
  background: linear-gradient(180deg, #f5f3ff, #fff);
  border-color: rgba(109,40,217,.20);
}

.flow-step-card.traffic {
  background: linear-gradient(90deg, #fee2e2, #fef3c7, #dcfce7);
}

.flow-step-card.follow {
  background: linear-gradient(180deg, #f8fafc, #fff);
}

.flow-connector {
  display: grid;
  place-items: center;
  color: var(--guinda);
  font-size: 28px;
  font-weight: 950;
}

.flow-connector::before {
  content: "→";
}

.flow-connector i {
  display: none;
}

.accept-branch {
  border-color: rgba(30,91,79,.24);
  background: linear-gradient(180deg, #fff, #f7fcfa);
}

.no-branch {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff, #fff7ed);
}

.path-accept {
  background: #fbfffd;
  border-color: rgba(30,91,79,.18);
}

.path-decline {
  background: #fffaf5;
  border-color: #fed7aa;
}

/* Modal de información del flujo */
.flow-info-modal {
  position: fixed;
  inset: 0;
  z-index: 7300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.flow-info-modal.open {
  display: flex;
}

.flow-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.62);
  backdrop-filter: blur(8px);
}

.flow-info-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}

.flow-info-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  border-bottom: 1px solid rgba(155,34,71,.14);
}

.flow-info-header h2 {
  color: var(--guinda);
  font-size: clamp(24px,2.7vw,42px) !important;
  margin: 0;
}

.flow-info-header button {
  border: 1px solid rgba(155,34,71,.2);
  border-radius: 999px;
  background: #fff;
  color: var(--guinda);
  font-weight: 950;
  padding: 10px 14px;
}

.flow-info-body {
  padding: 22px;
  overflow: auto;
  display: grid;
  gap: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.flow-info-body .flow-detail-card {
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 22px;
  padding: 16px;
}

/* PDF modal robustness */
.pdf-modal-viewer object,
.pdf-modal-viewer iframe,
#pdfObject,
#pdfFrame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

@media (max-width: 1100px) {
  .flow-board {
    min-width: 1080px;
  }
  .flow-split,
  .flow-subgrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .manual-area-hero .material-symbols-rounded,
  .infographic-hero .material-symbols-rounded,
  .area-logo-orb .material-symbols-rounded {
    width: 68px;
    height: 68px;
    font-size: 42px;
  }
}


/* Restauración de iconos SVG de áreas y ajuste de iconografía Material */
.area-svg-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.area-tab .area-svg-icon,
.asset-link-card .area-svg-icon,
.area-role-grid .area-svg-icon {
  width: 42px;
  height: 42px;
}

.manual-area-hero .area-svg-icon,
.area-logo-orb .area-svg-icon,
.doc-platform-hero .doc-area-icon {
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
  object-fit: contain;
  padding: 10px;
  border-radius: 28px;
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.14);
}

.nav-item .material-symbols-rounded,
.flow-step-card .material-symbols-rounded,
.lane-title .material-symbols-rounded,
.path-title .material-symbols-rounded {
  display: inline-grid;
  place-items: center;
  text-align: center;
  line-height: 1;
}

.nav-item .material-symbols-rounded {
  width: 30px;
  height: 30px;
  font-size: 26px;
  margin: 0 auto 4px;
}

/* Botones de documentos convertidos a páginas */
.resource-doc-btn {
  border: 1px solid rgba(155,34,71,.16);
  background: linear-gradient(180deg,#fff,#fff9fb);
  border-radius: 20px;
  padding: 14px;
  min-height: 96px;
  display: grid;
  gap: 6px;
  align-content: center;
  text-align: left;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
  cursor: pointer;
}

.resource-doc-btn strong {
  color: var(--guinda);
  font-weight: 950;
  line-height: 1.1;
}

.resource-doc-btn small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.25;
}

/* Páginas completas de documentos en formato plataforma */
.doc-platform-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.doc-platform-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  align-content: start !important;
  text-align: justify;
  text-justify: inter-word;
}

.doc-platform-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg,#fff,#fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: var(--shadow);
}

.doc-platform-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.5vw, 54px) !important;
  line-height: .98 !important;
  letter-spacing: -.04em;
  color: var(--guinda);
  text-align: left;
}

.doc-platform-hero p {
  color: var(--muted);
  line-height: 1.42 !important;
  font-weight: 650;
}

.doc-infographic-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 1.7vw, 24px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.doc-infographic-panel h3 {
  color: var(--guinda);
  font-size: clamp(21px, 1.8vw, 30px) !important;
  line-height: 1.08;
}

.doc-selectable-text {
  display: grid;
  gap: 10px;
}

.doc-selectable-text h3 {
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(155,34,71,.13);
  color: var(--guinda);
  font-size: clamp(18px, 1.4vw, 24px) !important;
}

.doc-selectable-text p {
  margin: 0;
  color: var(--muted);
  line-height: 1.52 !important;
  text-align: justify;
}

.doc-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 10px 0;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.doc-table th {
  background: var(--guinda);
  color: #fff;
  text-align: left;
  padding: 10px;
  font-size: 13px;
}

.doc-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  color: var(--muted);
  vertical-align: top;
  font-size: 13px;
  line-height: 1.35;
}

.doc-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.doc-visual-card {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
}

.doc-visual-card img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
}

.doc-visual-card figcaption {
  padding-top: 8px;
  text-align: center;
  color: var(--muted);
  font-weight: 850;
}

/* Framework modal fallback visible and centered */
.framework-modal.open,
.flow-info-modal.open,
.image-lightbox.open {
  display: flex !important;
}

.framework-open-btn {
  cursor: pointer;
}

@media (max-width: 1180px) {
  .doc-visual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .doc-platform-hero {
    grid-template-columns: 1fr;
  }
}

/* Ajuste final solicitado: iconos, marcos, páginas infográficas y botón ampliar */
.area-svg-icon {
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.area-tab .area-svg-icon {
  width: 52px !important;
  height: 52px !important;
  padding: 6px;
  border-radius: 16px;
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.14);
}

.area-role-grid .area-svg-icon,
.asset-link-card .area-svg-icon,
.discipline-card .area-svg-icon {
  width: 58px !important;
  height: 58px !important;
  padding: 8px;
  border-radius: 18px;
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.14);
  margin: 0 auto;
}

.manual-area-hero .area-svg-icon,
.area-logo-orb .area-svg-icon,
.doc-platform-hero .doc-area-icon {
  width: clamp(100px, 8vw, 132px) !important;
  height: clamp(100px, 8vw, 132px) !important;
  padding: 14px;
  border-radius: 32px;
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.75);
}

.nav-item .material-symbols-rounded {
  width: 42px !important;
  height: 42px !important;
  font-size: 34px !important;
  margin: 0 auto 6px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.flow-step-card .material-symbols-rounded,
.lane-title .material-symbols-rounded,
.path-title .material-symbols-rounded {
  width: 52px !important;
  height: 52px !important;
  font-size: 34px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.image-expand-btn,
.auto-image-expand-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  cursor: pointer;
}

.image-expand-btn img,
.auto-image-expand-btn img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.image-expand-btn span,
.auto-image-expand-btn span {
  font-size: 12px;
  line-height: 1;
}

.home-summary-flips {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.home-flip-card {
  min-height: 224px !important;
}

.home-flip-card .flip-front {
  place-items: center;
  text-align: center;
  align-content: center;
}

.home-flip-card .flip-front h3 {
  font-size: clamp(26px, 2.5vw, 42px) !important;
  line-height: .96;
}

.home-flip-card .flip-back p {
  color: var(--muted);
  line-height: 1.38 !important;
  text-align: center;
}

/* Documentos como infografías, no como blog */
.doc-platform-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.doc-platform-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  align-content: start !important;
}

.doc-platform-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(18px, 2vw, 30px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg,#fff,#fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: var(--shadow);
}

.doc-platform-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.6vw, 56px) !important;
  line-height: .96 !important;
  color: var(--guinda);
  text-align: left;
}

.doc-platform-hero p {
  color: var(--muted);
  line-height: 1.42 !important;
  font-weight: 650;
}

.doc-infographic-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 1.7vw, 24px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.doc-summary-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.doc-summary-dashboard article {
  min-height: 112px;
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  padding: 14px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.doc-summary-dashboard span {
  color: var(--guinda);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.doc-summary-dashboard strong {
  color: var(--guinda);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1;
}

.doc-summary-dashboard small {
  color: var(--muted);
  font-weight: 750;
}

.doc-chunk-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.doc-chunk-card {
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 24px;
  background: linear-gradient(180deg,#fff,#fff9fb);
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
  overflow: hidden;
}

.doc-chunk-card summary {
  list-style: none;
  cursor: pointer;
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.doc-chunk-card summary::-webkit-details-marker {
  display: none;
}

.doc-chunk-card summary span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--guinda);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.doc-chunk-card summary strong {
  color: var(--guinda);
  line-height: 1.1;
}

.doc-chunk-card summary em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.doc-chunk-body {
  padding: 0 16px 16px;
  display: grid;
  gap: 8px;
}

.doc-chunk-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45 !important;
  text-align: justify;
}

.doc-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 10px 0;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.doc-table th {
  background: var(--guinda);
  color: #fff;
  text-align: left;
  padding: 10px;
  font-size: 13px;
}

.doc-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  color: var(--muted);
  vertical-align: top;
  font-size: 13px;
  line-height: 1.35;
}

.doc-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.doc-visual-card {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
}

.doc-visual-card img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
}

.doc-visual-card figcaption {
  padding-top: 8px;
  text-align: center;
  color: var(--muted);
  font-weight: 850;
}

.framework-modal.open {
  display: flex !important;
}

.framework-open-btn {
  cursor: pointer;
  pointer-events: auto !important;
}

@media (max-width: 1280px) {
  .home-summary-flips,
  .doc-summary-dashboard {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 900px) {
  .doc-platform-hero,
  .doc-chunk-board,
  .doc-visual-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .home-summary-flips,
  .doc-summary-dashboard {
    grid-template-columns: 1fr !important;
  }
}


/* Integración de menú lateral izquierdo con estilo original PICAM */
.app-nav {
  left: 0 !important;
  right: auto !important;
  top: var(--header-h) !important;
  bottom: 0 !important;
  width: var(--nav-w) !important;
  padding: 14px 10px !important;
  background: linear-gradient(180deg, #fff, #fff9fb) !important;
  border-right: 1px solid rgba(155, 34, 71, .16) !important;
  border-left: 0 !important;
  box-shadow: 10px 0 32px rgba(23, 27, 33, .06) !important;
  display: grid !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.app-header {
  padding: 0 28px 0 calc(var(--nav-w) + 18px) !important;
}

.area-tabs {
  left: var(--nav-w) !important;
  right: 0 !important;
  padding: 8px var(--gap) !important;
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid rgba(155,34,71,.16) !important;
  box-shadow: 0 8px 24px rgba(23,27,33,.05) !important;
}

.book-app {
  inset: calc(var(--header-h) + var(--area-tabs-h)) 0 0 var(--nav-w) !important;
}

.nav-item {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  padding: 8px 6px !important;
  font-weight: 850 !important;
  transition: .2s ease !important;
  min-width: 0 !important;
}

.nav-svg-icon {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-item > span {
  font-size: 12px !important;
  line-height: 1 !important;
  text-align: center !important;
}

.nav-item:hover,
.nav-item.active {
  transform: translateX(2px) !important;
  color: var(--guinda) !important;
  background: var(--guinda-soft) !important;
  border-color: rgba(155, 34, 71, .18) !important;
}

.area-tab {
  height: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(155,34,71,.16) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  font-weight: 850 !important;
}

.area-tab .area-svg-icon {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.area-tab span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.area-tab:hover,
.area-tab.active {
  transform: translateY(-1px) !important;
  color: var(--guinda) !important;
  background: var(--guinda-soft) !important;
  border-color: rgba(155,34,71,.32) !important;
}

/* Iconos de área en cards y headers */
.asset-link-card .area-svg-icon,
.area-role-grid .area-svg-icon,
.discipline-card .area-svg-icon {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: var(--guinda-soft) !important;
  border: 1px solid rgba(155,34,71,.14) !important;
  margin: 0 auto !important;
}

.manual-area-hero .area-svg-icon,
.area-logo-orb .area-svg-icon,
.doc-platform-hero .doc-area-icon {
  width: clamp(100px, 8vw, 132px) !important;
  height: clamp(100px, 8vw, 132px) !important;
  object-fit: contain !important;
  padding: 14px !important;
  border-radius: 32px !important;
  background: var(--guinda-soft) !important;
  border: 1px solid rgba(155,34,71,.14) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.75) !important;
}

/* Botón ampliar con iconografía SVG */
.image-expand-btn,
.auto-image-expand-btn {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 8 !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--guinda) !important;
  color: #fff !important;
  font-weight: 950 !important;
  padding: 9px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.24) !important;
  cursor: pointer !important;
}

.image-expand-btn img,
.auto-image-expand-btn img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.image-expand-btn span,
.auto-image-expand-btn span {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Material complementario de Nutrición */
.nutrition-complements-panel {
  overflow: hidden;
}

.nutrition-complement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.nutrition-complement-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg,#fff,#fff9fb);
  box-shadow: var(--shadow);
  min-width: 0;
}

.nutrition-complement-card .doc-visual-card {
  margin: 0;
  min-height: 250px;
}

.nutrition-complement-card .doc-visual-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 18px;
}

.nutrition-card-copy {
  display: grid;
  gap: 6px;
}

.nutrition-card-copy span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 950;
  font-size: 12px;
}

.nutrition-card-copy h3 {
  color: var(--guinda);
  font-size: clamp(18px, 1.4vw, 24px) !important;
  line-height: 1.1;
  margin: 0;
}

.nutrition-card-copy p {
  color: var(--muted);
  line-height: 1.38 !important;
  margin: 0;
}

/* Popover nativo para marcos de página 00 */
.framework-popover {
  width: min(940px, calc(100vw - 32px));
  border: 0;
  border-radius: 30px;
  padding: 0;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
  overflow: hidden;
}

.framework-popover::backdrop {
  background: rgba(17,24,39,.62);
  backdrop-filter: blur(8px);
}

.framework-popover-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  border-bottom: 1px solid rgba(155,34,71,.14);
}

.framework-popover-header h2 {
  color: var(--guinda);
  font-size: clamp(24px,2.7vw,42px) !important;
  margin: 0;
}

.framework-popover-header button {
  border: 1px solid rgba(155,34,71,.2);
  border-radius: 999px;
  background: #fff;
  color: var(--guinda);
  font-weight: 950;
  padding: 10px 14px;
}

.framework-popover .framework-grid {
  padding: 22px;
}

@media (max-width: 1180px) {
  :root { --nav-w: 100px; }
  .nutrition-complement-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .app-nav {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 76px !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    grid-auto-rows: unset !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(155,34,71,.16) !important;
    box-shadow: 0 -10px 32px rgba(23,27,33,.06) !important;
  }
  .app-header { padding: 0 14px !important; }
  .area-tabs { left: 0 !important; }
  .book-app { inset: calc(var(--header-h) + var(--area-tabs-h)) 0 76px 0 !important; }
  .nav-svg-icon { width: 25px !important; height: 25px !important; }
  .nav-item > span { font-size: 10px !important; }
}

@media (max-width: 700px) {
  .nutrition-complement-grid { grid-template-columns: 1fr; }
}


/* Estandarización final de todas las áreas con estructura de Terapia Física */
.area-standard-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.area-standard-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 34px !important;
}

.area-standard-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

.area-standard-intro {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 16px !important;
}

.area-standard-links .asset-link-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.area-standard-concept-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

.area-standard-process {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 16px !important;
}

.area-standard-guidance details {
  margin-top: 12px;
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 18px;
  background: #fff9fb;
  padding: 12px 14px;
}

.area-standard-guidance summary {
  cursor: pointer;
  color: var(--guinda);
  font-weight: 950;
}

.area-standard-documents .refined-doc-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

.offline-ui-icon {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  display: block !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(155,34,71,.14) !important;
}

.flow-step-card .offline-ui-icon {
  grid-row: span 3;
}

.lane-title .offline-ui-icon,
.path-title .offline-ui-icon {
  width: 38px !important;
  height: 38px !important;
  padding: 7px !important;
  background: var(--guinda-soft) !important;
}

@media (max-width: 1280px) {
  .area-standard-links .asset-link-grid,
  .area-standard-documents .refined-doc-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 900px) {
  .area-standard-hero,
  .area-standard-intro,
  .area-standard-process,
  .area-standard-links .asset-link-grid,
  .area-standard-concept-grid,
  .area-standard-documents .refined-doc-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Ajuste puntual página 00: solo título, texto y marcos simétricos */
.page00-simple {
  grid-template-columns: 1fr !important;
  align-items: center !important;
  text-align: center !important;
  min-height: min(76vh, 760px);
  padding: clamp(28px, 4vw, 56px) !important;
}

.page00-simple > div {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  justify-items: center;
}

.page00-simple h1 {
  text-align: center !important;
  margin-bottom: 0 !important;
}

.page00-simple p:not(.kicker) {
  max-width: 980px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.page00-framework-actions {
  width: min(980px, 100%);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 22px) !important;
  margin-top: 4px;
}

.page00-framework-actions .framework-open-btn {
  min-height: 118px !important;
  text-align: center !important;
  justify-items: center !important;
  align-content: center !important;
  padding: 18px !important;
}

.page00-framework-actions .framework-open-btn strong {
  text-align: center;
}

.page00-framework-actions .framework-open-btn small {
  text-align: center;
}

@media (max-width: 900px) {
  .page00-framework-actions {
    grid-template-columns: 1fr !important;
  }
  .page00-simple {
    min-height: auto;
  }
}


/* Ajustes página 00 sin scroll + rediseño página 01 */
.page[data-page="inicio"] {
  overflow: hidden !important;
}

.page[data-page="inicio"] .page-content {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  padding-top: clamp(14px, 2vh, 26px) !important;
  padding-bottom: clamp(14px, 2vh, 26px) !important;
}

.page00-simple {
  width: min(1120px, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100% - 8px) !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(20px, 3vw, 40px) !important;
}

.page00-simple > div {
  max-width: 1080px !important;
  display: grid !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  justify-items: center !important;
}

.page00-simple h1 {
  font-size: clamp(40px, 5.5vw, 82px) !important;
  line-height: .86 !important;
  margin: 0 !important;
  text-align: center !important;
}

.page00-simple p:not(.kicker) {
  max-width: 920px !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.34 !important;
}

.page00-framework-actions {
  width: min(920px, 100%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.5vw, 18px) !important;
  margin-top: 0 !important;
}

.page00-framework-actions .framework-open-btn {
  min-height: 96px !important;
  padding: 14px !important;
  text-align: center !important;
  justify-items: center !important;
  align-content: center !important;
}

.page00-framework-actions .framework-open-btn strong,
.page00-framework-actions .framework-open-btn small {
  text-align: center !important;
}

/* Página 01: resumen ejecutivo rediseñado */
.executive-summary-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.executive-summary-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
}

.executive-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 18px;
  align-items: stretch;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg, #fff, #fff9fb);
  box-shadow: var(--shadow);
}

.executive-copy h2 {
  margin: 0 0 10px;
  color: var(--guinda);
  font-size: clamp(40px, 5vw, 78px) !important;
  line-height: .88 !important;
  letter-spacing: -.05em;
}

.executive-lead {
  max-width: 930px;
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.42 !important;
  text-align: justify;
}

.executive-snapshot {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-height: 170px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(155,34,71,.16);
  background: #fff;
  box-shadow: inset 0 0 0 8px #fff7fa;
}

.executive-snapshot span,
.executive-triad span,
.executive-flow span,
.executive-flip-card span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 950;
  font-size: 12px;
}

.executive-snapshot strong {
  color: var(--guinda);
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: .95;
}

.executive-snapshot small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.25;
}

.executive-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.executive-triad article,
.executive-dashboard,
.executive-flow article {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  min-width: 0;
}

.executive-triad h3,
.executive-dashboard h3,
.executive-flow h3 {
  margin: 8px 0 8px;
  color: var(--guinda);
  font-size: clamp(20px, 1.6vw, 28px) !important;
  line-height: 1.08;
}

.executive-triad p,
.executive-flow p {
  margin: 0;
  color: var(--muted);
  line-height: 1.38 !important;
  text-align: justify;
}

.executive-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--guinda);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
}

.executive-separator::before,
.executive-separator::after {
  content: "";
  height: 1px;
  background: rgba(155,34,71,.22);
  flex: 1;
}

.executive-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.executive-flow article {
  position: relative;
  overflow: hidden;
}

.executive-flow article::after {
  content: "";
  position: absolute;
  top: 26px;
  right: -9px;
  width: 18px;
  height: 18px;
  background: var(--guinda);
  transform: rotate(45deg);
  opacity: .18;
}

.executive-flow article:last-child::after {
  display: none;
}

.executive-dashboard {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) 1fr;
  gap: 16px;
  align-items: center;
}

.executive-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.executive-dashboard-grid article {
  min-height: 96px;
  border-radius: 18px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.12);
  padding: 13px;
  display: grid;
  gap: 5px;
}

.executive-dashboard-grid strong {
  color: var(--guinda);
  line-height: 1.1;
}

.executive-dashboard-grid span {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.25;
  font-size: 13px;
}

.executive-flip-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.executive-flip-card {
  min-height: 190px !important;
}

.executive-flip-card .flip-face {
  text-align: center;
  place-items: center;
  align-content: center;
}

.executive-flip-card h3 {
  color: var(--guinda);
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.05;
}

.executive-flip-card p {
  color: var(--muted);
  line-height: 1.34 !important;
  text-align: center;
}

@media (max-width: 1180px) {
  .executive-triad,
  .executive-flow,
  .executive-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .executive-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .page[data-page="inicio"] {
    overflow-y: auto !important;
  }
  .page[data-page="inicio"] .page-content {
    overflow: visible !important;
    place-items: start center !important;
  }
  .page00-framework-actions,
  .executive-hero,
  .executive-triad,
  .executive-flow,
  .executive-dashboard-grid,
  .executive-flip-panel {
    grid-template-columns: 1fr !important;
  }
}


/* Ajustes solicitados: página 00 con imagen, página 03 con esquema compacto */
.page00-with-image {
  width: min(1180px, 100%) !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(290px, .92fr) !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(16px, 2.4vw, 34px) !important;
  text-align: left !important;
}

.page00-copy {
  display: grid !important;
  gap: clamp(13px, 1.45vw, 20px) !important;
  justify-items: start !important;
  max-width: 680px !important;
}

.page00-with-image h1 {
  text-align: left !important;
  font-size: clamp(38px, 5vw, 74px) !important;
  line-height: .88 !important;
  margin: 0 !important;
}

.page00-lead {
  max-width: 660px !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.38 !important;
  font-size: clamp(16px, 1.35vw, 21px) !important;
}

.page00-with-image .page00-framework-actions {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.page00-with-image .framework-open-btn {
  min-height: 104px !important;
  padding: 14px 12px !important;
  border-radius: 22px !important;
}

.page00-with-image .framework-open-btn strong {
  font-size: clamp(17px, 1.35vw, 22px) !important;
  line-height: 1.08 !important;
}

.page00-with-image .framework-open-btn small {
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

.page00-patient-card {
  position: relative;
  margin: 0;
  min-height: 350px;
  height: min(50vh, 470px);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(155,34,71,.16);
  box-shadow: var(--shadow);
  background: #fff;
}

.page00-patient-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page00-patient-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(17,24,39,.58));
  pointer-events: none;
}

.page00-patient-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
  font-weight: 950;
  letter-spacing: .02em;
}

/* Página 03: contenedores reducidos 10% y todos los bloques clicables */
.route-content .interactive-flow-board {
  padding: calc(clamp(16px, 1.65vw, 24px) * .9) !important;
}

.route-content .flow-board {
  transform: scale(.90);
  transform-origin: top left;
  width: 111.111%;
  min-width: 1188px !important;
  gap: 16px !important;
  padding-bottom: 0 !important;
}

.route-content .flow-lane,
.route-content .flow-branch-panel,
.route-content .flow-path {
  border-radius: 25px !important;
  padding: 14px !important;
}

.route-content .flow-step-card {
  min-height: 113px !important;
  padding: 13px !important;
  border-radius: 20px !important;
  gap: 6px 9px !important;
}

.route-content .flow-step-card strong {
  font-size: 14.5px !important;
}

.route-content .flow-step-card small {
  font-size: 11.7px !important;
  line-height: 1.2 !important;
}

.route-content .flow-step-card .offline-ui-icon,
.route-content .lane-title .offline-ui-icon,
.route-content .path-title .offline-ui-icon {
  width: 38px !important;
  height: 38px !important;
  padding: 7px !important;
}

.route-content .lane-title,
.route-content .path-title {
  cursor: pointer;
  border-radius: 16px;
  padding: 8px 10px;
  transition: background .2s ease, transform .2s ease;
}

.route-content .lane-title:hover,
.route-content .path-title:hover {
  background: var(--guinda-soft);
  transform: translateY(-1px);
}

.route-content .flow-info-trigger {
  outline: none;
}

.route-content .flow-info-trigger:focus-visible,
.route-content .flow-step-card:focus-visible {
  outline: 3px solid rgba(155,34,71,.32);
  outline-offset: 3px;
}

@media (max-width: 1060px) {
  .page00-with-image {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .page00-copy {
    justify-items: center !important;
    max-width: 100% !important;
  }
  .page00-with-image h1,
  .page00-lead {
    text-align: center !important;
  }
  .page00-patient-card {
    height: 300px;
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .page00-with-image .page00-framework-actions {
    grid-template-columns: 1fr !important;
  }
  .route-content .flow-board {
    transform: none;
    width: auto;
  }
}


/* Ajustes páginas 02, 03, 04, 05 */
.page00-patient-card.no-image-expand .image-expand-btn,
.page00-patient-card.no-image-expand .auto-image-expand-btn {
  display: none !important;
}

.route-content .numbered-card.flow-info-trigger {
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.route-content .numbered-card.flow-info-trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(155,34,71,.28);
  box-shadow: 0 18px 34px rgba(155,34,71,.12);
}

.route-content .flow-info-trigger:focus-visible {
  outline: 3px solid rgba(155,34,71,.32);
  outline-offset: 3px;
}

.area-flip-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.area-role-flip-card {
  min-height: 250px !important;
  perspective: 1200px;
  cursor: pointer;
}

.area-role-flip-card .flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
  border-radius: var(--radius-xl);
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
}

.area-role-flip-card .flip-front .area-svg-icon {
  width: 74px !important;
  height: 74px !important;
  padding: 10px !important;
  border-radius: 22px !important;
  background: var(--guinda-soft) !important;
  border: 1px solid rgba(155,34,71,.14) !important;
}

.area-role-flip-card .flip-front strong {
  color: var(--guinda);
  font-size: clamp(18px, 1.3vw, 24px);
  line-height: 1.05;
}

.area-role-flip-card .flip-front small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.25;
}

.area-role-flip-card .flip-front em {
  font-style: normal;
  color: var(--guinda);
  font-size: 12px;
  font-weight: 950;
}

.area-role-flip-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff9fb, #fff);
}

.area-role-flip-card.flipped .flip-front {
  transform: rotateY(180deg);
}

.area-role-flip-card.flipped .flip-back {
  transform: rotateY(0);
}

.area-role-flip-card .flip-back span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 950;
  font-size: 12px;
}

.area-role-flip-card .flip-back h3 {
  color: var(--guinda);
  font-size: clamp(18px, 1.3vw, 24px) !important;
  line-height: 1.05;
  margin: 0;
}

.area-role-flip-card .flip-back p {
  color: var(--muted);
  line-height: 1.35 !important;
  margin: 0;
  text-align: center;
}

.area-role-flip-card .flip-back small {
  color: var(--guinda);
  font-weight: 900;
}

@media (max-width: 1280px) {
  .area-flip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .area-flip-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Ajuste final de subpáginas: blog interno, gráficos y ampliación solo con icono */
.doc-blog-panel {
  display: grid;
  gap: 18px;
}

.doc-blog-panel > h3 {
  color: var(--guinda);
  font-size: clamp(24px, 2.1vw, 38px) !important;
  line-height: 1.04;
  margin: 0;
}

.doc-blog-lead {
  color: var(--muted);
  line-height: 1.48 !important;
  font-weight: 650;
  margin: 0;
  text-align: justify;
}

.doc-blog-summary {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(260px, .55fr);
  gap: 16px;
  align-items: stretch;
}

.doc-blog-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.doc-blog-stat-cards article {
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  padding: 15px;
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 116px;
  box-shadow: 0 10px 22px rgba(23,27,33,.05);
}

.doc-blog-stat-cards strong {
  color: var(--guinda);
  font-size: clamp(28px, 2.4vw, 42px);
  line-height: .92;
}

.doc-blog-stat-cards span {
  color: var(--guinda);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.doc-blog-stat-cards small {
  color: var(--muted);
  font-weight: 750;
}

.doc-blog-chart {
  border: 1px solid rgba(155,34,71,.14);
  background: #fff;
  border-radius: 22px;
  padding: 15px;
  display: grid;
  gap: 10px;
  box-shadow: inset 0 0 0 8px #fff7fa;
}

.doc-blog-bar-row {
  display: grid;
  grid-template-columns: 84px 1fr 38px;
  align-items: center;
  gap: 9px;
}

.doc-blog-bar-row span {
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}

.doc-blog-bar-row i {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--guinda) var(--bar), rgba(155,34,71,.13) var(--bar));
  display: block;
}

.doc-blog-bar-row b {
  color: var(--guinda);
  font-size: 13px;
  text-align: right;
}

.doc-blog-layout {
  display: grid;
  grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.doc-blog-toc {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 8px;
  border-radius: 24px;
  border: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg,#fff,#fff9fb);
  padding: 14px;
  box-shadow: 0 12px 24px rgba(23,27,33,.06);
  max-height: 66vh;
  overflow: auto;
}

.doc-blog-toc strong {
  color: var(--guinda);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.doc-blog-toc a {
  text-decoration: none;
  color: var(--muted);
  border: 1px solid rgba(155,34,71,.12);
  background: #fff;
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.doc-blog-toc a:hover {
  color: var(--guinda);
  background: var(--guinda-soft);
}

.doc-blog-article {
  display: grid;
  gap: 16px;
}

.doc-blog-section {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;
}

.doc-blog-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg,var(--guinda),var(--dorado));
}

.doc-blog-number {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
  margin-bottom: 10px;
}

.doc-blog-section h4 {
  color: var(--guinda);
  font-size: clamp(21px, 1.7vw, 30px) !important;
  line-height: 1.07;
  margin: 0 0 10px;
}

.doc-blog-section-body {
  display: grid;
  gap: 10px;
}

.doc-blog-section-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58 !important;
  text-align: justify;
  font-size: clamp(15px, 1.05vw, 18px);
}

.doc-blog-section-body ul,
.doc-blog-section-body ol {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  padding-left: 22px;
}

.doc-blog-section-body .doc-table-wrap {
  margin: 10px 0;
}

/* Botón ampliar: solo icono, tipo overlay de video */
.image-expand-btn,
.auto-image-expand-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(17, 24, 39, .78) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(7px);
}

.image-expand-btn img,
.auto-image-expand-btn img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.image-expand-btn span,
.auto-image-expand-btn span {
  display: none !important;
}

.doc-visual-card,
.visual-doc-card,
.auto-expand-wrap,
.expandable-figure,
.document-page,
.doc-page-card {
  position: relative;
}

.doc-visual-card img,
.visual-doc-card img,
.auto-expand-wrap img,
.expandable-figure img,
.document-page img,
.doc-page-card img {
  cursor: zoom-in;
}

.page00-patient-card img {
  cursor: default !important;
}

@media (max-width: 1120px) {
  .doc-blog-summary,
  .doc-blog-layout {
    grid-template-columns: 1fr;
  }

  .doc-blog-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .doc-blog-stat-cards {
    grid-template-columns: 1fr;
  }
}


/* Corrección final: encabezado institucional, formularios visuales y ampliación robusta */
.doc-institutional-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  border: 1px solid rgba(155,34,71,.14);
  box-shadow: var(--shadow);
}

.doc-header-brand {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.doc-institutional-header h3 {
  color: var(--guinda);
  font-size: clamp(20px, 1.8vw, 32px) !important;
  line-height: 1.05;
  margin: 0;
}

.doc-institutional-header small {
  color: var(--muted);
  font-weight: 800;
}

.doc-header-logos {
  display: flex;
  gap: 10px;
  align-items: center;
}

.doc-logo {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(23,27,33,.07);
  overflow: hidden;
  padding: 6px;
}

.doc-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.doc-logo-picam { width: 74px; height: 74px; border-radius: 50%; padding: 1px; }
.doc-logo-hmz { width: 72px; height: 72px; padding: 2px; }
.doc-logo-sedena { width: clamp(150px, 14vw, 210px); height: 72px; }

.doc-original-header-strip {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(155,34,71,.14);
  background: #fff;
  box-shadow: 0 10px 22px rgba(23,27,33,.05);
}

.doc-original-header-strip img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  object-position: top center;
  border-radius: 14px;
  background: #fff;
}

.psych-form-panel {
  display: grid;
  gap: 14px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(155,34,71,.14);
  background: linear-gradient(180deg,#fff,#fff9fb);
  box-shadow: var(--shadow);
  padding: clamp(16px, 1.7vw, 24px);
}

.psych-form-panel header {
  display: grid;
  gap: 8px;
}

.psych-form-panel h3 {
  color: var(--guinda);
  font-size: clamp(24px, 2vw, 36px) !important;
  line-height: 1.06;
  margin: 0;
}

.psych-form-panel header p:not(.kicker) {
  color: var(--muted);
  line-height: 1.42 !important;
  margin: 0;
}

.psych-form-panel header span {
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.16);
  color: var(--guinda);
  font-weight: 950;
  font-size: 12px;
}

.psych-form-sheet {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.psych-form-row {
  display: grid;
  grid-template-columns: minmax(150px, .36fr) minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 16px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.10);
}

.psych-form-row strong,
.psych-field-card label {
  color: var(--guinda);
  font-weight: 950;
}

.psych-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
}

.psych-options span {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.14);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
}

.psych-options i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(155,34,71,.45);
  flex: 0 0 auto;
}

.psych-field-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(155,34,71,.12);
  background: #fff9fb;
}

.psych-field-card div {
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.18);
}

.psych-field-card .wide { width: 100%; }
.psych-field-card .tall { height: 86px; }

/* Ícono de pantalla completa adjunto */
.image-expand-btn,
.auto-image-expand-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(17, 24, 39, .82) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(7px);
}

.image-expand-btn img,
.auto-image-expand-btn img {
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
  filter: none !important;
}

.image-lightbox {
  z-index: 9999 !important;
}

@media (max-width: 900px) {
  .doc-institutional-header,
  .psych-form-row {
    grid-template-columns: 1fr;
  }

  .doc-header-logos {
    justify-content: flex-start;
  }

  .psych-options {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}


/* Rediseño integral del Manual de Medicina: contenido en una sola página de área */
.medicina-manual-full-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.medicina-manual-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 40px !important;
}

.med-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.5vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(155,34,71,.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(155,34,71,.10), transparent 32%);
  box-shadow: var(--shadow);
}

.med-hero h2 {
  color: var(--guinda);
  font-size: clamp(42px, 5vw, 84px) !important;
  line-height: .88 !important;
  letter-spacing: -.055em;
  margin: 0 0 12px;
}

.med-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.42 !important;
  margin: 0;
}

.med-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: var(--guinda-soft) !important;
  border: 1px solid rgba(155,34,71,.14) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.med-anchor-nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.med-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 999px;
  padding: 9px 8px;
  font-weight: 950;
  font-size: 12px;
  line-height: 1;
}

.med-dashboard,
.med-check-grid,
.med-education-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.med-card,
.med-step-card,
.med-process-grid article,
.med-screen-card,
.med-documentation-panel,
.med-treatment-tabs article,
.med-diagnosis-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.med-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  min-height: 170px;
}

.med-card span,
.med-process-grid span,
.med-screen-card > span,
.med-flip-card span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-size: 12px;
  font-weight: 950;
}

.med-card h3,
.med-section h3,
.med-process-grid strong,
.med-screen-card h4,
.med-documentation-panel h4,
.med-table-wrap h4,
.med-diagnosis-grid h4 {
  color: var(--guinda);
}

.med-card h3 {
  font-size: clamp(18px, 1.35vw, 24px) !important;
  line-height: 1.08;
  margin: 0;
}

.med-card p,
.med-section-head p,
.med-process-grid p,
.med-screen-card p,
.med-diagnosis-grid li,
.med-documentation-panel li {
  color: var(--muted);
  line-height: 1.42 !important;
  margin: 0;
}

.med-section {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.med-section-head {
  display: grid;
  gap: 8px;
}

.med-section-head h3 {
  font-size: clamp(28px, 2.6vw, 46px) !important;
  line-height: .98;
  margin: 0;
}

.med-section-head p:not(.kicker) {
  color: var(--muted);
  line-height: 1.45 !important;
  max-width: 1100px;
  text-align: justify;
}

.med-step-timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.med-step-card {
  min-height: 238px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  min-width: 180px;
}

.med-step-card > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
}

.med-step-card h3 {
  color: var(--guinda);
  font-size: 18px !important;
  line-height: 1.08;
  margin: 0 0 4px;
}

.med-step-card small {
  display: inline-flex;
  width: fit-content;
  color: var(--guinda);
  background: var(--guinda-soft);
  border-radius: 999px;
  padding: 6px 9px;
  font-weight: 950;
  margin-bottom: 6px;
}

.med-step-card p {
  color: var(--muted);
  line-height: 1.35 !important;
  margin: 0;
}

.med-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.med-process-grid article {
  position: relative;
  padding: 18px;
  display: grid;
  gap: 8px;
  overflow: hidden;
}

.med-process-grid article::after {
  content: "";
  position: absolute;
  top: 25px;
  right: -8px;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  background: var(--guinda);
  opacity: .18;
}

.med-process-grid article:last-child::after {
  display: none;
}

.med-process-grid strong {
  font-size: 21px;
  line-height: 1.08;
}

.med-check-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.med-flip-card {
  position: relative;
  min-height: 230px !important;
  perspective: 1200px;
}

.med-flip-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
}

.med-flip-card .flip-front h3,
.med-flip-card .flip-back h3 {
  margin: 0;
  color: var(--guinda);
  font-size: clamp(19px, 1.35vw, 26px) !important;
  line-height: 1.08;
}

.med-flip-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff9fb, #fff);
}

.med-flip-card.flipped .flip-front { transform: rotateY(180deg); }
.med-flip-card.flipped .flip-back { transform: rotateY(0); }

.med-flip-card p {
  color: var(--muted);
  line-height: 1.35 !important;
  margin: 0;
  text-align: center;
}

.med-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 16px;
  align-items: start;
}

.med-card-stack {
  display: grid;
  gap: 14px;
}

.med-table-wrap {
  display: grid;
  gap: 10px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(155,34,71,.12);
  background: #fff;
  box-shadow: 0 12px 24px rgba(23,27,33,.05);
  margin-bottom: 14px;
}

.med-table-wrap h4 {
  margin: 0;
  padding: 14px 16px 0;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.1;
}

.med-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.med-table-wrap th {
  text-align: left;
  color: #fff;
  background: var(--guinda);
  padding: 11px 12px;
  vertical-align: top;
}

.med-table-wrap td {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  vertical-align: top;
  line-height: 1.35;
}

.med-table-wrap tbody tr:nth-child(even) td {
  background: #fff9fb;
}

.med-diagnosis-grid,
.med-treatment-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.med-diagnosis-grid article {
  padding: 18px;
}

.med-diagnosis-grid h4 {
  margin: 0 0 10px;
  font-size: 21px;
}

.med-diagnosis-grid ul,
.med-documentation-panel ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}

.med-screening-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  align-items: start;
}

.med-screen-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.med-screen-card h4 {
  margin: 0;
  font-size: clamp(22px, 1.6vw, 30px);
  line-height: 1.08;
}

.med-component-list {
  display: grid;
  gap: 8px;
}

.med-component-list span {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 16px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.10);
}

.med-component-list b {
  color: var(--guinda);
  line-height: 1.1;
}

.med-component-list small {
  color: var(--muted);
  line-height: 1.25;
  font-weight: 750;
}

.med-form-sheet {
  display: grid;
  gap: 9px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 13px;
}

.med-form-row {
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.10);
}

.med-form-row strong {
  color: var(--guinda);
  line-height: 1.1;
}

.med-form-row div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.med-form-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.med-form-row i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(155,34,71,.45);
  flex: 0 0 auto;
}

.med-treatment-tabs {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.med-treatment-tabs article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #fff9fb);
}

.med-treatment-tabs strong {
  color: var(--guinda);
  font-size: 20px;
}

.med-treatment-tabs p {
  color: var(--muted);
  line-height: 1.35 !important;
  margin: 0;
}

.med-education-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.med-documentation-panel {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #fff9fb);
}

.med-documentation-panel h4 {
  font-size: clamp(22px, 1.6vw, 30px);
  margin: 0 0 12px;
}

@media (max-width: 1320px) {
  .med-anchor-nav { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .med-dashboard,
  .med-process-grid,
  .med-treatment-tabs,
  .med-check-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .med-diagnosis-grid,
  .med-education-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 980px) {
  .med-hero,
  .med-two-col,
  .med-screening-grid,
  .med-documentation-panel {
    grid-template-columns: 1fr;
  }
  .med-hero { text-align: center; justify-items: center; }
  .med-anchor-nav { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .med-dashboard,
  .med-process-grid,
  .med-treatment-tabs,
  .med-check-grid,
  .med-diagnosis-grid,
  .med-education-grid {
    grid-template-columns: 1fr;
  }
  .med-form-row {
    grid-template-columns: 1fr;
  }
}


/* Rediseño integral del Manual de Psicología: contenido en una sola página de área */
.psicologia-manual-full-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.psicologia-manual-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 40px !important;
}

.psico-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.5vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(155,34,71,.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,249,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(155,34,71,.10), transparent 32%);
  box-shadow: var(--shadow);
}

.psico-hero h2 {
  color: var(--guinda);
  font-size: clamp(42px, 5vw, 84px) !important;
  line-height: .88 !important;
  letter-spacing: -.055em;
  margin: 0 0 12px;
}

.psico-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.42 !important;
  margin: 0;
}

.psico-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: var(--guinda-soft) !important;
  border: 1px solid rgba(155,34,71,.14) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.psico-anchor-nav {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.psico-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: var(--guinda-soft);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: 999px;
  padding: 9px 8px;
  font-weight: 950;
  font-size: 12px;
  line-height: 1;
}

.psico-dashboard,
.psico-model-grid,
.psico-matrix-cards,
.psico-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.psico-card,
.psico-step-card,
.psico-decision-flow article,
.psico-form-panel,
.psico-screen-card,
.psico-solution-grid article,
.psico-code-panel,
.psico-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.psico-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  min-height: 170px;
}

.psico-card span,
.psico-decision-flow span,
.psico-solution-grid span,
.psico-flip-card span,
.psico-form-panel header span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-size: 12px;
  font-weight: 950;
}

.psico-card h3,
.psico-section h3,
.psico-decision-flow strong,
.psico-screen-card h4,
.psico-table-wrap h4,
.psico-form-panel h4,
.psico-code-panel h4,
.psico-solution-grid h4 {
  color: var(--guinda);
}

.psico-card h3 {
  font-size: clamp(18px, 1.35vw, 24px) !important;
  line-height: 1.08;
  margin: 0;
}

.psico-card p,
.psico-section-head p,
.psico-decision-flow p,
.psico-screen-card p,
.psico-solution-grid p,
.psico-code-grid p,
.psico-competency-panel p {
  color: var(--muted);
  line-height: 1.42 !important;
  margin: 0;
}

.psico-section {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.psico-section-head {
  display: grid;
  gap: 8px;
}

.psico-section-head h3 {
  font-size: clamp(28px, 2.6vw, 46px) !important;
  line-height: .98;
  margin: 0;
}

.psico-section-head p:not(.kicker) {
  color: var(--muted);
  line-height: 1.45 !important;
  max-width: 1100px;
  text-align: justify;
}

.psico-step-timeline {
  display: grid;
  grid-template-columns: repeat(9, minmax(172px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.psico-step-card {
  min-height: 246px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fff9fb);
  min-width: 172px;
}

.psico-step-card > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--guinda);
  color: #fff;
  font-weight: 950;
}

.psico-step-card h3 {
  color: var(--guinda);
  font-size: 18px !important;
  line-height: 1.08;
  margin: 0 0 4px;
}

.psico-step-card small {
  display: inline-flex;
  width: fit-content;
  color: var(--guinda);
  background: var(--guinda-soft);
  border-radius: 999px;
  padding: 6px 9px;
  font-weight: 950;
  margin-bottom: 6px;
}

.psico-step-card p {
  color: var(--muted);
  line-height: 1.35 !important;
  margin: 0;
}

.psico-decision-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.psico-decision-flow article {
  position: relative;
  padding: 18px;
  display: grid;
  gap: 8px;
  overflow: hidden;
}

.psico-decision-flow article.danger {
  border-color: rgba(155,34,71,.28);
  background: linear-gradient(180deg, #fff, #fff6f8);
}

.psico-decision-flow article.success {
  border-color: rgba(30,91,79,.25);
  background: linear-gradient(180deg, #fff, #f7fffb);
}

.psico-decision-flow strong {
  font-size: 22px;
  line-height: 1.08;
}

.psico-competency-panel {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(155,34,71,.12);
  background: linear-gradient(180deg,#fff,#fff9fb);
  box-shadow: var(--shadow);
}

.psico-competency-panel h4 {
  color: var(--guinda);
  margin: 0 0 8px;
  font-size: clamp(22px, 1.6vw, 30px);
}

.psico-competency-panel ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 24px;
  color: var(--muted);
  line-height: 1.36;
  font-weight: 750;
}

.psico-form-layout {
  display: grid;
  gap: 16px;
}

.psico-form-panel {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.psico-form-panel header {
  display: grid;
  gap: 8px;
}

.psico-form-panel h4 {
  margin: 0;
  font-size: clamp(22px, 1.6vw, 30px);
  line-height: 1.08;
}

.psico-form-panel header p {
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.psico-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.psico-field-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.10);
}

.psico-field-card label {
  color: var(--guinda);
  font-weight: 950;
  line-height: 1.15;
}

.psico-field-card div {
  height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(155,34,71,.22);
}

.psico-screen-grid,
.psico-decision-grid,
.psico-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.psico-screen-card,
.psico-solution-grid article {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.psico-screen-card h4,
.psico-solution-grid h4 {
  margin: 0;
  font-size: clamp(21px, 1.55vw, 29px);
  line-height: 1.08;
}

.psico-screen-card > span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--guinda-soft);
  color: var(--guinda);
  font-weight: 950;
  font-size: 12px;
}

.psico-form-row {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-radius: 16px;
  background: #fff9fb;
  border: 1px solid rgba(155,34,71,.10);
}

.psico-form-row strong {
  color: var(--guinda);
  line-height: 1.1;
}

.psico-form-row div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.psico-form-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.14);
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.psico-form-row i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(155,34,71,.45);
  flex: 0 0 auto;
}

.psico-flip-card {
  position: relative;
  min-height: 230px !important;
  perspective: 1200px;
}

.psico-flip-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
}

.psico-flip-card .flip-front h3,
.psico-flip-card .flip-back h3 {
  margin: 0;
  color: var(--guinda);
  font-size: clamp(19px, 1.35vw, 26px) !important;
  line-height: 1.08;
}

.psico-flip-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff9fb, #fff);
}

.psico-flip-card.flipped .flip-front { transform: rotateY(180deg); }
.psico-flip-card.flipped .flip-back { transform: rotateY(0); }

.psico-flip-card p {
  color: var(--muted);
  line-height: 1.35 !important;
  margin: 0;
  text-align: center;
}

.psico-matrix-cards {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.psico-output-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.psico-code-panel {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #fff9fb);
}

.psico-code-panel h4 {
  font-size: clamp(22px, 1.6vw, 30px);
  margin: 0;
}

.psico-code-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.psico-code-grid article {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(155,34,71,.12);
  padding: 12px;
}

.psico-code-grid b {
  color: var(--guinda);
}

.psico-table-wrap {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  background: #fff;
  margin-bottom: 14px;
}

.psico-table-wrap h4 {
  margin: 0;
  padding: 14px 16px 0;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.1;
}

.psico-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.psico-table-wrap th {
  text-align: left;
  color: #fff;
  background: var(--guinda);
  padding: 11px 12px;
  vertical-align: top;
}

.psico-table-wrap td {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  vertical-align: top;
  line-height: 1.35;
}

.psico-table-wrap tbody tr:nth-child(even) td {
  background: #fff9fb;
}

.psico-table-wrap.compact table,
.psico-data-table.compact {
  min-width: 760px;
}

@media (max-width: 1320px) {
  .psico-anchor-nav { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .psico-dashboard,
  .psico-model-grid,
  .psico-field-grid,
  .psico-screen-grid,
  .psico-decision-grid,
  .psico-solution-grid,
  .psico-output-grid,
  .psico-code-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 980px) {
  .psico-hero,
  .psico-competency-panel,
  .psico-code-panel,
  .psico-decision-flow {
    grid-template-columns: 1fr;
  }

  .psico-hero {
    text-align: center;
    justify-items: center;
  }

  .psico-anchor-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .psico-dashboard,
  .psico-model-grid,
  .psico-field-grid,
  .psico-screen-grid,
  .psico-decision-grid,
  .psico-solution-grid,
  .psico-matrix-cards,
  .psico-output-grid,
  .psico-code-grid {
    grid-template-columns: 1fr;
  }
}


/* Ajuste visual solicitado para Psicología: entrevista y soluciones sutiles */
.psico-soft-head {
  max-width: 1120px;
}

.psico-soft-head h3 {
  color: #7b1f3a !important;
}

.psico-soft-head p:not(.kicker) {
  max-width: 1040px !important;
  color: #5f6672 !important;
}

/* Guía de entrevista: contenedores amplios, simétricos y menos saturados */
.psico-interview-redesign {
  gap: 22px !important;
  background: linear-gradient(180deg, #fff, #fffcfd) !important;
}

.psico-interview-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.psico-interview-map article {
  min-height: 154px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(122,31,58,.12);
  background: #fff;
  box-shadow: 0 10px 22px rgba(23,27,33,.045);
  display: grid;
  gap: 8px;
  align-content: start;
}

.psico-interview-map strong {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #f7eef2;
  color: #7b1f3a;
  font-weight: 950;
}

.psico-interview-map span {
  color: #26313f;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 950;
  line-height: 1.05;
}

.psico-interview-map p {
  color: #667085;
  line-height: 1.36 !important;
  margin: 0;
}

.psico-interview-modules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.psico-interview-module {
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 30px;
  border: 1px solid rgba(122,31,58,.10);
  background: #fff;
  box-shadow: 0 16px 34px rgba(23,27,33,.055);
  display: grid;
  gap: 20px;
}

.psico-interview-module header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(122,31,58,.10);
}

.psico-interview-module header > strong {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f5f0eb;
  color: #7b1f3a;
  font-weight: 950;
  font-size: 18px;
}

.psico-interview-module h4 {
  margin: 0 0 7px;
  color: #2b3340;
  font-size: clamp(24px, 1.8vw, 34px);
  line-height: 1.05;
}

.psico-interview-module header p {
  margin: 0;
  color: #667085;
  line-height: 1.42 !important;
}

.psico-question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.psico-question-list section {
  min-height: 150px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(122,31,58,.08);
  background: linear-gradient(180deg, #fff, #fbfaf8);
  display: grid;
  align-content: start;
  gap: 8px;
}

.psico-question-list h5 {
  margin: 0;
  color: #424b5a;
  font-size: clamp(18px, 1.25vw, 23px);
  line-height: 1.1;
}

.psico-question-list p {
  margin: 0;
  color: #667085;
  line-height: 1.44 !important;
}

/* Punto de decisión sin etiquetas */
#psico-decision .psico-flip-card .flip-face {
  gap: 12px !important;
}

#psico-decision .psico-flip-card h3 {
  max-width: 92%;
}

/* Análisis de soluciones: bloques separados, sobrios y claros */
.psico-solutions-redesign {
  gap: 22px !important;
  background: linear-gradient(180deg, #fff, #fffdfb) !important;
}

.psico-solution-roadmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}

.psico-solution-roadmap article {
  min-height: 260px;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 28px;
  border: 1px solid rgba(38,49,63,.10);
  background: #fff;
  box-shadow: 0 14px 30px rgba(23,27,33,.055);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  align-content: start;
}

.psico-solution-roadmap strong {
  grid-row: span 3;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f5f0eb;
  color: #6f293f;
  font-weight: 950;
  font-size: 18px;
}

.psico-solution-roadmap h4 {
  color: #2b3340;
  margin: 0;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.08;
}

.psico-solution-roadmap p {
  color: #667085;
  margin: 0;
  line-height: 1.42 !important;
}

.psico-solution-roadmap ul {
  grid-column: 2;
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #667085;
  line-height: 1.34;
  font-weight: 730;
}

.psico-solution-roadmap li::marker {
  color: #8b6f45;
}

/* MSDET y Salida del área sin etiquetas */
#psico-msdet .psico-card,
#psico-salida .psico-card {
  gap: 12px;
  min-height: 150px;
}

#psico-msdet .psico-card h3,
#psico-salida .psico-card h3 {
  color: #2b3340 !important;
}

#psico-msdet .psico-card p,
#psico-salida .psico-card p {
  color: #667085 !important;
}

@media (max-width: 1180px) {
  .psico-interview-map,
  .psico-question-list,
  .psico-solution-roadmap {
    grid-template-columns: 1fr;
  }

  .psico-solution-roadmap article {
    grid-template-columns: 1fr;
  }

  .psico-solution-roadmap strong,
  .psico-solution-roadmap ul {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .psico-interview-module header {
    grid-template-columns: 1fr;
  }
}


/* Ajuste global de legibilidad y simetría: incremento de textos pequeños +2 pt */
:root {
  --readable-text: clamp(17px, 1.05vw, 19px);
  --readable-small: clamp(14.7px, .92vw, 16.5px);
  --readable-micro: clamp(13.8px, .86vw, 15.5px);
  --readable-line: 1.48;
}

/* Texto base más legible sin afectar títulos principales */
.page p,
.page li,
.page td,
.page th,
.page label,
.page input,
.page textarea,
.page select,
.page button {
  font-size: max(var(--readable-text), 1em);
  overflow-wrap: anywhere;
}

.page small,
.page .kicker,
.page .card-tag,
.page figcaption,
.page .doc-blog-toc a,
.page .med-anchor-nav a,
.page .psico-anchor-nav a,
.page .area-role-flip-card .flip-front em {
  font-size: var(--readable-small) !important;
  line-height: 1.28 !important;
}

.page p,
.page li {
  line-height: var(--readable-line) !important;
}

.page h3,
.page h4,
.page strong,
.page b {
  overflow-wrap: anywhere;
}

.page table {
  table-layout: auto;
}

.page td,
.page th {
  line-height: 1.38 !important;
  vertical-align: top;
}

/* Contenedores más holgados para compensar el aumento de fuente */
.numbered-card,
.manual-section-card,
.manual-concept-card,
.med-card,
.psico-card,
.executive-triad article,
.executive-flow article,
.executive-dashboard-grid article,
.area-role-flip-card,
.psico-screen-card,
.med-screen-card,
.psico-solution-roadmap article,
.psico-interview-module,
.psico-question-list section {
  min-height: max-content !important;
}

.numbered-card,
.manual-section-card,
.manual-concept-card,
.med-card,
.psico-card {
  padding: clamp(18px, 1.7vw, 24px) !important;
  gap: 12px !important;
}

.manual-concept-grid,
.numbered-card-grid,
.symmetry-grid,
.executive-dashboard-grid,
.med-dashboard,
.med-process-grid,
.med-treatment-tabs,
.med-diagnosis-grid,
.med-education-grid,
.psico-dashboard,
.psico-model-grid,
.psico-matrix-cards,
.psico-output-grid,
.psico-screen-grid,
.psico-decision-grid,
.psico-solution-grid,
.psico-code-grid {
  align-items: stretch !important;
}

.manual-concept-grid > *,
.numbered-card-grid > *,
.symmetry-grid > *,
.executive-dashboard-grid > *,
.med-dashboard > *,
.med-process-grid > *,
.med-treatment-tabs > *,
.med-diagnosis-grid > *,
.med-education-grid > *,
.psico-dashboard > *,
.psico-model-grid > *,
.psico-matrix-cards > *,
.psico-output-grid > *,
.psico-screen-grid > *,
.psico-decision-grid > *,
.psico-solution-grid > *,
.psico-code-grid > * {
  height: 100%;
}

/* Área de Psicología: corregir huecos y organizar rol del psicólogo */
#psico-rol .psico-model-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

#psico-rol .psico-card {
  min-height: 230px !important;
  align-content: start;
  padding: clamp(22px, 2vw, 28px) !important;
  background: linear-gradient(180deg, #fff, #fffdfb);
}

#psico-rol .psico-card h3 {
  color: #2b3340 !important;
  font-size: clamp(23px, 1.55vw, 30px) !important;
  line-height: 1.1 !important;
  margin: 0;
}

#psico-rol .psico-card p {
  color: #667085 !important;
  line-height: 1.48 !important;
  text-align: left;
}

#psico-rol .psico-competency-panel {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 24px !important;
  padding: clamp(24px, 2.2vw, 34px) !important;
  align-items: stretch;
}

#psico-rol .psico-competency-panel > div,
#psico-rol .psico-competency-panel > ol {
  min-height: 100%;
  border-radius: 24px;
}

#psico-rol .psico-competency-panel > div {
  display: grid;
  align-content: start;
  gap: 12px;
}

#psico-rol .psico-competency-panel ol {
  background: #fff;
  border: 1px solid rgba(122,31,58,.09);
  padding: 22px 22px 22px 42px !important;
  margin: 0 !important;
  gap: 12px !important;
}

#psico-rol .psico-competency-panel li {
  font-size: var(--readable-text) !important;
  line-height: 1.45 !important;
}

/* Guía de entrevista y análisis de soluciones: más aire y mejor alineación */
.psico-interview-map {
  gap: 22px !important;
}

.psico-interview-map article {
  min-height: 190px !important;
  padding: clamp(22px, 2vw, 30px) !important;
}

.psico-question-list {
  gap: 22px !important;
}

.psico-question-list section {
  min-height: 195px !important;
  padding: clamp(22px, 2vw, 30px) !important;
}

.psico-interview-module {
  gap: 24px !important;
  padding: clamp(26px, 2.4vw, 38px) !important;
}

.psico-solution-roadmap {
  gap: 24px !important;
  align-items: stretch;
}

.psico-solution-roadmap article {
  min-height: 320px !important;
  padding: clamp(24px, 2.2vw, 34px) !important;
}

.psico-solution-roadmap p,
.psico-solution-roadmap li {
  font-size: var(--readable-text) !important;
  line-height: 1.45 !important;
}

/* Cards reversibles: compensar texto ampliado */
.med-flip-card,
.psico-flip-card,
.area-role-flip-card,
.executive-flip-card {
  min-height: 270px !important;
}

.med-flip-card .flip-face,
.psico-flip-card .flip-face,
.area-role-flip-card .flip-face,
.executive-flip-card .flip-face {
  padding: clamp(20px, 1.8vw, 28px) !important;
}

/* Timelines: texto legible y contenedores más anchos para evitar desbordes */
.med-step-timeline,
.psico-step-timeline {
  gap: 14px !important;
}

.med-step-card,
.psico-step-card {
  min-width: 215px !important;
  min-height: 295px !important;
  padding: clamp(18px, 1.6vw, 24px) !important;
}

.med-step-card h3,
.psico-step-card h3 {
  font-size: clamp(19px, 1.2vw, 23px) !important;
}

.med-step-card p,
.psico-step-card p {
  font-size: var(--readable-small) !important;
  line-height: 1.38 !important;
}

/* Formularios y tablas: evitar saturación */
.med-form-row,
.psico-form-row {
  gap: 12px !important;
  padding: 14px !important;
}

.med-form-row span,
.psico-form-row span,
.psych-options span {
  font-size: var(--readable-small) !important;
  line-height: 1.25 !important;
  padding: 8px 11px !important;
}

.med-table-wrap,
.psico-table-wrap,
.doc-table-wrap {
  overflow-x: auto !important;
}

.med-table-wrap table,
.psico-table-wrap table,
.doc-table {
  min-width: 720px;
}

/* Navegación interna: texto más grande sin desbordar */
.med-anchor-nav,
.psico-anchor-nav {
  gap: 10px !important;
}

.med-anchor-nav a,
.psico-anchor-nav a {
  min-height: 40px;
  display: grid;
  place-items: center;
  white-space: normal;
}

/* Ajustes responsive para conservar simetría */
@media (max-width: 1320px) {
  #psico-rol .psico-model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  #psico-rol .psico-model-grid,
  #psico-rol .psico-competency-panel {
    grid-template-columns: 1fr !important;
  }

  .psico-interview-map,
  .psico-question-list,
  .psico-solution-roadmap {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  .page p,
  .page li,
  .page td,
  .page th,
  .page label,
  .page input,
  .page textarea,
  .page select,
  .page button {
    font-size: 17px !important;
  }

  .page small,
  .page .kicker,
  .page .card-tag {
    font-size: 14.5px !important;
  }

  .med-step-card,
  .psico-step-card {
    min-width: 240px !important;
  }
}


/* Psicología: Flujo operativo completo en 3 líneas de 3 cards */
.psico-step-timeline-3x3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.psico-flow-line {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: 30px;
  border: 1px solid rgba(38,49,63,.10);
  background: linear-gradient(180deg, #fff, #fffdfb);
  box-shadow: 0 12px 28px rgba(23,27,33,.055);
}

.psico-flow-line-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(38,49,63,.10);
}

.psico-flow-line-head span {
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f5f0eb;
  color: #6f293f;
  font-weight: 950;
  font-size: var(--readable-small);
}

.psico-flow-line-head strong {
  color: #2b3340;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.1;
}

.psico-flow-line-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.psico-flow-line-cards .psico-step-card {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 255px !important;
  height: 100%;
  background: #fff;
}

.psico-flow-line-cards .psico-step-card > span {
  background: #7b1f3a;
}

@media (max-width: 1100px) {
  .psico-flow-line-cards {
    grid-template-columns: 1fr !important;
  }

  .psico-flow-line-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Manual integral de Nutrición */
.nutricion-manual-full-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.nutricion-manual-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 42px !important;
}

.nutri-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(30,91,79,.08), transparent 34%);
  box-shadow: var(--shadow);
}

.nutri-hero h2 {
  color: var(--guinda);
  font-size: clamp(42px, 5vw, 84px) !important;
  line-height: .9 !important;
  letter-spacing: -.05em;
  margin: 0 0 12px;
}

.nutri-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
  font-weight: 650;
}

.nutri-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: rgba(30,91,79,.09) !important;
  border: 1px solid rgba(30,91,79,.12) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.nutri-anchor-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.nutri-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 999px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.nutri-dashboard,
.nutri-highlight-grid,
.nutri-guidance-grid,
.nutri-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.nutri-card,
.nutri-panel,
.nutri-step-card,
.nutri-visual-card,
.nutri-flow-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.nutri-card {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 1.8vw, 24px);
  min-height: 180px;
  align-content: start;
}

.nutri-card span,
.nutri-panel-head span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 12px;
  font-weight: 950;
}

.nutri-card h3,
.nutri-panel h4,
.nutri-section h3,
.nutri-visual-copy h4 {
  color: var(--guinda);
}

.nutri-card h3 {
  margin: 0;
  font-size: clamp(21px, 1.5vw, 29px) !important;
  line-height: 1.1;
}

.nutri-card p,
.nutri-panel p,
.nutri-visual-copy p,
.nutri-panel li,
.nutri-section-head p,
.nutri-step-card p,
.nutri-metric-list p {
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
}

.nutri-section {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.nutri-section-head {
  display: grid;
  gap: 8px;
}

.nutri-section-head h3 {
  font-size: clamp(30px, 2.7vw, 48px) !important;
  line-height: .98;
  margin: 0;
}

.nutri-section-head p:not(.kicker) {
  max-width: 1100px;
  text-align: justify;
}

.nutri-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.nutri-step-card {
  min-height: 238px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fcfdfa);
}

.nutri-step-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #1e5b4f;
  color: #fff;
  font-weight: 950;
}

.nutri-step-card h3 {
  margin: 0 0 6px;
  color: #2b3340;
  font-size: clamp(20px, 1.35vw, 26px) !important;
  line-height: 1.1;
}

.nutri-two-col,
.nutri-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr);
  gap: 18px;
  align-items: stretch;
}

.nutri-two-col.reverse {
  grid-template-columns: minmax(340px, .95fr) minmax(0, 1fr);
}

.nutri-panel {
  padding: clamp(20px, 2vw, 28px);
  display: grid;
  gap: 16px;
  background: linear-gradient(180deg, #fff, #fffdfb);
}

.nutri-panel-head {
  display: grid;
  gap: 8px;
}

.nutri-panel h4 {
  margin: 0;
  font-size: clamp(24px, 1.8vw, 34px) !important;
  line-height: 1.06;
}

.nutri-check-grid,
.nutri-plan-cards,
.nutri-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.nutri-metric-list article {
  display: grid;
  gap: 8px;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(30,91,79,.10);
  background: #fbfdfc;
}

.nutri-metric-list strong {
  color: #1e5b4f;
}

.nutri-visual-grid,
.nutri-education-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: stretch;
}

.nutri-visual-grid.three-up {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.nutri-visual-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 14px;
}

.nutri-visual-card .doc-visual-card {
  position: relative;
  margin: 0;
  min-height: 260px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(30,91,79,.10);
  background: #f7faf9;
  display: grid;
  place-items: center;
}

.nutri-visual-card .doc-visual-card img:first-child {
  display: block;
  max-width: 100%;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 18px;
}

.nutri-visual-copy {
  display: grid;
  gap: 8px;
  padding: 4px 2px 2px;
}

.nutri-visual-copy h4 {
  margin: 0;
  font-size: clamp(20px, 1.35vw, 26px);
  line-height: 1.1;
}

.nutri-visual-copy p {
  text-align: left;
}

.nutri-flow-block {
  padding: 16px;
}

.nutri-guidance-grid .nutri-card,
.nutri-output-grid .nutri-card,
.nutri-highlight-grid .nutri-card {
  min-height: 168px;
}

@media (max-width: 1320px) {
  .nutri-dashboard,
  .nutri-highlight-grid,
  .nutri-guidance-grid,
  .nutri-output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutri-visual-grid.three-up {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 1040px) {
  .nutri-anchor-nav {
    grid-template-columns: repeat(3, minmax(0,1fr));
    position: static;
  }

  .nutri-two-col,
  .nutri-two-col.reverse,
  .nutri-plan-layout,
  .nutri-step-grid,
  .nutri-check-grid,
  .nutri-plan-cards,
  .nutri-metric-list,
  .nutri-visual-grid,
  .nutri-education-grid,
  .nutri-visual-grid.three-up {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .nutri-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .nutri-anchor-nav,
  .nutri-dashboard,
  .nutri-highlight-grid,
  .nutri-guidance-grid,
  .nutri-output-grid {
    grid-template-columns: 1fr;
  }
}


/* Ajustes específicos Nutrición: sin imágenes de formatos, flip cards y simetría */
.nutri-history-redesign .nutri-history-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
  align-items: stretch;
}

.nutri-history-redesign .nutri-history-panel {
  min-height: 100%;
}

.nutri-history-redesign .nutri-check-grid,
.nutri-history-redesign .nutri-metric-list {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

#nutri-antropometria .nutri-highlight-grid,
#nutri-salida .nutri-output-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}

#nutri-antropometria .nutri-highlight-grid .nutri-card,
#nutri-salida .nutri-output-grid .nutri-card {
  width: 100%;
  height: 100%;
  min-height: 190px;
}

.nutri-flip-visual-grid,
.nutri-education-flip-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}

.nutri-flip-visual-card {
  position: relative;
  min-height: 460px;
  perspective: 1200px;
  cursor: pointer;
}

.nutri-flip-visual-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.12);
  background: #fff;
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;
}

.nutri-flip-visual-card .flip-front figure {
  margin: 0;
  min-height: 255px;
  max-height: 290px;
  border-radius: 22px;
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.10);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.nutri-flip-visual-card .flip-front img {
  width: 100%;
  height: 100%;
  max-height: 290px;
  object-fit: contain;
  cursor: default !important;
}

.nutri-flip-caption {
  display: grid;
  gap: 8px;
}

.nutri-flip-caption h4,
.nutri-flip-visual-card .flip-back h4 {
  color: var(--guinda);
  margin: 0;
  font-size: clamp(21px, 1.45vw, 28px);
  line-height: 1.08;
}

.nutri-flip-caption p,
.nutri-flip-visual-card .flip-back p,
.nutri-flip-visual-card .flip-back li {
  color: var(--muted);
  line-height: 1.42 !important;
  margin: 0;
}

.nutri-flip-caption small,
.nutri-flip-visual-card .flip-back small {
  color: #1e5b4f;
  font-weight: 900;
}

.nutri-flip-visual-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  padding: clamp(20px, 1.9vw, 28px);
  overflow: auto;
}

.nutri-flip-visual-card.flipped .flip-front {
  transform: rotateY(180deg);
}

.nutri-flip-visual-card.flipped .flip-back {
  transform: rotateY(0);
}

.nutri-flip-visual-card .flip-back ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

#nutri-antropometria .nutri-flip-visual-card:nth-child(7) {
  grid-column: 1 / -1;
  min-height: 360px;
}

#nutri-antropometria .nutri-flip-visual-card:nth-child(7) .flip-front {
  grid-template-columns: minmax(320px, .7fr) minmax(0, 1fr);
  align-items: center;
}

#nutri-antropometria .nutri-flip-visual-card:nth-child(7) .flip-front figure {
  min-height: 260px;
}

.nutri-education-flip-card {
  min-height: 540px;
}

.nutri-education-flip-card .flip-front figure {
  min-height: 345px;
  max-height: 390px;
}

.nutri-education-flip-card .flip-front img {
  max-height: 390px;
}

.nutri-plan-layout-text {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

.nutri-menu-extract {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(30,91,79,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  box-shadow: var(--shadow);
}

.nutri-menu-head {
  display: grid;
  gap: 8px;
}

.nutri-menu-head h4 {
  color: var(--guinda);
  margin: 0;
  font-size: clamp(26px, 2vw, 38px);
  line-height: 1.05;
}

.nutri-menu-head p:not(.kicker) {
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.nutri-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

.nutri-menu-grid article {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(30,91,79,.10);
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 260px;
}

.nutri-menu-grid h5 {
  color: #1e5b4f;
  margin: 0;
  font-size: clamp(18px, 1.2vw, 23px);
}

.nutri-menu-grid p {
  color: var(--muted);
  margin: 0;
  line-height: 1.36 !important;
  font-size: var(--readable-small);
}

.nutri-menu-grid strong {
  color: #2b3340;
}

#nutri-plan .nutri-plan-cards {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

#nutri-plan .nutri-plan-cards .nutri-card {
  min-height: 170px;
}

.no-image-expand img {
  cursor: default !important;
}

@media (max-width: 1320px) {
  .nutri-menu-grid,
  #nutri-plan .nutri-plan-cards {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 1120px) {
  .nutri-history-redesign .nutri-history-panel-grid,
  #nutri-antropometria .nutri-highlight-grid,
  #nutri-salida .nutri-output-grid,
  .nutri-flip-visual-grid,
  .nutri-education-flip-grid,
  .nutri-menu-grid,
  #nutri-plan .nutri-plan-cards {
    grid-template-columns: 1fr !important;
  }

  #nutri-antropometria .nutri-flip-visual-card:nth-child(7) {
    grid-column: auto;
  }

  #nutri-antropometria .nutri-flip-visual-card:nth-child(7) .flip-front {
    grid-template-columns: 1fr;
  }

  .nutri-flip-visual-card,
  .nutri-education-flip-card {
    min-height: 560px;
  }
}


/* Ajuste final Nutrición: alineación inferior de etiqueta y simetría en educación */
.nutri-flip-visual-card .flip-front {
  grid-template-rows: auto 1fr !important;
  align-content: stretch !important;
}

.nutri-flip-visual-card .flip-front figure {
  width: 100%;
}

.nutri-flip-caption {
  height: 100%;
  min-height: 150px;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: stretch !important;
}

.nutri-flip-caption h4 {
  align-self: start;
}

.nutri-flip-caption p {
  align-self: start;
}

.nutri-flip-caption small {
  align-self: end !important;
  justify-self: start;
  margin-top: 12px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* Educación alimentaria: tres tarjetas extendidas y simétricas */
#nutri-educacion .nutri-education-flip-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 22px !important;
}

#nutri-educacion .nutri-education-flip-card {
  min-height: 650px !important;
  height: 100%;
}

#nutri-educacion .nutri-education-flip-card .flip-face {
  height: 100%;
}

#nutri-educacion .nutri-education-flip-card .flip-front {
  grid-template-rows: 390px 1fr !important;
}

#nutri-educacion .nutri-education-flip-card .flip-front figure {
  min-height: 390px !important;
  max-height: 390px !important;
  height: 390px !important;
}

#nutri-educacion .nutri-education-flip-card .flip-front img {
  width: 100%;
  height: 100%;
  max-height: 390px !important;
  object-fit: contain;
}

#nutri-educacion .nutri-education-flip-card .nutri-flip-caption {
  min-height: 190px;
}

#nutri-educacion .nutri-education-flip-card .flip-back {
  align-content: start !important;
}

#nutri-educacion .nutri-education-flip-card .flip-back ol {
  margin-top: 8px;
}

@media (max-width: 1120px) {
  #nutri-educacion .nutri-education-flip-grid {
    grid-template-columns: 1fr !important;
  }

  #nutri-educacion .nutri-education-flip-card {
    min-height: 640px !important;
  }
}


/* Ajuste Nutrición: Consejería práctica, Adaptación cultural y Mensajes clave simétricos */
#nutri-educacion .nutri-guidance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  align-items: stretch !important;
}

#nutri-educacion .nutri-guidance-grid .nutri-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 210px !important;
  padding: clamp(22px, 2vw, 30px) !important;
  align-content: start !important;
}

#nutri-educacion .nutri-guidance-grid .nutri-card h3 {
  min-height: 2.2em;
}

@media (max-width: 1120px) {
  #nutri-educacion .nutri-guidance-grid {
    grid-template-columns: 1fr !important;
  }

  #nutri-educacion .nutri-guidance-grid .nutri-card h3 {
    min-height: 0;
  }
}


/* Manual integral de Terapia Física */
.terapia-manual-full-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.terapia-manual-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 42px !important;
}

.terapia-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(30,91,79,.08), transparent 34%);
  box-shadow: var(--shadow);
}

.terapia-hero h2 {
  color: var(--guinda);
  font-size: clamp(42px, 5vw, 84px) !important;
  line-height: .9 !important;
  letter-spacing: -.05em;
  margin: 0 0 12px;
}

.terapia-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
  font-weight: 650;
}

.terapia-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: rgba(30,91,79,.09) !important;
  border: 1px solid rgba(30,91,79,.12) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.terapia-anchor-nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.terapia-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 999px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.terapia-dashboard,
.terapia-safety-grid,
.terapia-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.terapia-card,
.terapia-step-card,
.terapia-flip-card,
.terapia-progression-grid article,
.terapia-interventions-panel,
.terapia-infographic-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.terapia-card {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 1.8vw, 24px);
  min-height: 180px;
  align-content: start;
}

.terapia-card span,
.terapia-progression-grid span,
.terapia-flip-card span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 12px;
  font-weight: 950;
}

.terapia-card h3,
.terapia-section h3,
.terapia-infographic-copy h4,
.terapia-progression-grid h4 {
  color: var(--guinda);
}

.terapia-card h3 {
  margin: 0;
  font-size: clamp(21px, 1.5vw, 29px) !important;
  line-height: 1.1;
}

.terapia-card p,
.terapia-section-head p,
.terapia-step-card p,
.terapia-infographic-copy p,
.terapia-progression-grid p,
.terapia-flip-card p {
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
}

.terapia-section {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.terapia-section-head {
  display: grid;
  gap: 8px;
}

.terapia-section-head.compact h3 {
  font-size: clamp(24px, 2vw, 34px) !important;
}

.terapia-section-head h3 {
  font-size: clamp(30px, 2.7vw, 48px) !important;
  line-height: .98;
  margin: 0;
}

.terapia-section-head p:not(.kicker) {
  max-width: 1100px;
  text-align: justify;
}

.terapia-flow-grid,
.terapia-assessment-grid,
.terapia-session-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.terapia-step-card {
  min-height: 250px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fcfdfa);
}

.terapia-step-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #1e5b4f;
  color: #fff;
  font-weight: 950;
}

.terapia-step-card h3 {
  margin: 0 0 6px;
  color: #2b3340;
  font-size: clamp(20px, 1.35vw, 26px) !important;
  line-height: 1.1;
}

.terapia-step-card small {
  display: inline-flex;
  width: fit-content;
  color: #1e5b4f;
  background: rgba(30,91,79,.10);
  border-radius: 999px;
  padding: 6px 9px;
  font-weight: 950;
  margin-bottom: 8px;
}

.terapia-flip-card {
  position: relative;
  min-height: 270px !important;
  perspective: 1200px;
}

.terapia-flip-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(20px, 1.8vw, 28px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
}

.terapia-flip-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  overflow: auto;
}

.terapia-flip-card.flipped .flip-front { transform: rotateY(180deg); }
.terapia-flip-card.flipped .flip-back { transform: rotateY(0); }

.terapia-flip-card h3 {
  margin: 0;
  color: #2b3340;
  font-size: clamp(20px, 1.45vw, 28px) !important;
  line-height: 1.1;
}

.terapia-progression-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.terapia-progression-grid article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 1.8vw, 26px);
  min-height: 210px;
}

.terapia-progression-grid h4 {
  margin: 0;
  font-size: clamp(22px, 1.6vw, 30px);
}

.terapia-interventions-panel {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.terapia-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.terapia-chip-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(30,91,79,.14);
  color: var(--muted);
  padding: 9px 13px;
  font-weight: 850;
  line-height: 1.2;
}

.terapia-infographic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}

.terapia-infographic-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: 14px;
  min-height: 100%;
}

.terapia-infographic-card .doc-visual-card {
  position: relative;
  margin: 0;
  min-height: 360px;
  max-height: 480px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(30,91,79,.10);
  background: #f7faf9;
  display: grid;
  place-items: center;
}

.terapia-infographic-card .doc-visual-card > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
  cursor: zoom-in;
}

.terapia-infographic-copy {
  display: grid;
  gap: 8px;
  padding: 4px 2px 2px;
}

.terapia-infographic-copy h4 {
  margin: 0;
  font-size: clamp(22px, 1.45vw, 30px);
  line-height: 1.08;
}

.terapia-output-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.terapia-output-grid .terapia-card {
  min-height: 190px;
}

@media (max-width: 1320px) {
  .terapia-anchor-nav {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .terapia-dashboard,
  .terapia-safety-grid,
  .terapia-flow-grid,
  .terapia-assessment-grid,
  .terapia-session-grid,
  .terapia-output-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 1040px) {
  .terapia-anchor-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .terapia-progression-grid,
  .terapia-infographic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .terapia-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .terapia-anchor-nav,
  .terapia-dashboard,
  .terapia-safety-grid,
  .terapia-flow-grid,
  .terapia-assessment-grid,
  .terapia-session-grid,
  .terapia-output-grid {
    grid-template-columns: 1fr;
  }
}


/* Terapia Física: algoritmos de intervención dentro de ruta */
.terapia-algoritmos-panel {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.12);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  box-shadow: var(--shadow);
}

.terapia-algoritmo-layout {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: stretch;
}

.terapia-algoritmo-image-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}

.terapia-algoritmo-image-card figure {
  position: relative;
  margin: 0;
  min-height: 310px;
  border-radius: 22px;
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.10);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.terapia-algoritmo-image-card figure > img:first-child {
  width: 100%;
  height: 100%;
  max-height: 430px;
  object-fit: contain;
  cursor: zoom-in;
}

.terapia-algoritmo-image-card h4 {
  color: var(--guinda);
  font-size: clamp(22px, 1.45vw, 30px);
  line-height: 1.08;
  margin: 0 0 8px;
}

.terapia-algoritmo-image-card p {
  color: var(--muted);
  line-height: 1.44 !important;
  margin: 0;
}

.terapia-algoritmo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.terapia-algoritmo-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 170px;
  padding: clamp(16px, 1.5vw, 22px);
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(30,91,79,.11);
  box-shadow: 0 10px 22px rgba(23,27,33,.045);
}

.terapia-algoritmo-grid article span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: #1e5b4f;
  color: #fff;
  font-weight: 950;
}

.terapia-algoritmo-grid h4 {
  margin: 0;
  color: #2b3340;
  font-size: clamp(20px, 1.35vw, 26px);
  line-height: 1.1;
}

.terapia-algoritmo-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42 !important;
}

/* Fullscreen / zoom reconstruido desde cero */
.picam-image-zoom {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  background: rgba(10, 15, 25, .88);
  backdrop-filter: blur(8px);
}

.picam-image-zoom.open {
  display: grid !important;
}

.picam-image-zoom__inner {
  position: relative;
  width: min(96vw, 1500px);
  height: min(92vh, 980px);
  display: grid;
  place-items: center;
}

.picam-image-zoom__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

.picam-image-zoom__close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(17,24,39,.92);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.image-expand-btn,
.auto-image-expand-btn {
  cursor: pointer !important;
}

@media (max-width: 1180px) {
  .terapia-algoritmo-layout,
  .terapia-algoritmo-grid {
    grid-template-columns: 1fr;
  }
}


/* Corrección Terapia Física: fullscreen sin recorte, valoración simétrica y algoritmo sin imagen */
.picam-image-zoom {
  padding: 28px !important;
  overflow: hidden !important;
}

.picam-image-zoom__inner {
  width: min(96vw, 1420px) !important;
  height: min(88vh, 860px) !important;
  max-width: 96vw !important;
  max-height: 88vh !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  padding: clamp(12px, 1.6vw, 22px);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}

.picam-image-zoom__img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.picam-image-zoom__close {
  top: -18px !important;
  right: -18px !important;
}

/* Evitar que el lightbox anterior afecte la imagen reconstruida */
#picamImageZoomModal img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Valoración fisioterapéutica: cards centradas, simétricas y con mejor distribución */
#terapia-valoracion .terapia-assessment-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#terapia-valoracion .terapia-flip-card {
  min-height: 300px !important;
  height: 100% !important;
  width: 100% !important;
}

#terapia-valoracion .terapia-flip-card .flip-face {
  padding: clamp(20px, 1.65vw, 26px) !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

#terapia-valoracion .terapia-flip-card .flip-front {
  grid-template-rows: auto auto 1fr auto !important;
}

#terapia-valoracion .terapia-flip-card .flip-front span {
  justify-self: center;
}

#terapia-valoracion .terapia-flip-card h3 {
  width: 100%;
  min-height: 2.35em;
  display: grid;
  place-items: center;
  text-align: center !important;
  color: #2b3340 !important;
  line-height: 1.12 !important;
}

#terapia-valoracion .terapia-flip-card p {
  max-width: 95%;
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 1.42 !important;
}

#terapia-valoracion .terapia-flip-card small {
  align-self: end !important;
  justify-self: center;
  margin-top: auto;
  color: #1e5b4f;
  font-weight: 900;
  min-height: 24px;
}

#terapia-valoracion .terapia-flip-card .flip-back {
  align-content: center !important;
}

/* Algoritmo de intervención sin imagen: ocupar todo el ancho */
.terapia-algoritmo-layout.sin-imagen {
  grid-template-columns: 1fr !important;
}

.terapia-algoritmo-layout.sin-imagen .terapia-algoritmo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

.terapia-algoritmo-layout.sin-imagen .terapia-algoritmo-grid article {
  min-height: 190px !important;
}

@media (max-width: 1380px) {
  #terapia-valoracion .terapia-assessment-grid,
  .terapia-algoritmo-layout.sin-imagen .terapia-algoritmo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #terapia-valoracion .terapia-assessment-grid,
  .terapia-algoritmo-layout.sin-imagen .terapia-algoritmo-grid {
    grid-template-columns: 1fr !important;
  }

  .picam-image-zoom {
    padding: 14px !important;
  }

  .picam-image-zoom__inner {
    width: 96vw !important;
    height: 86vh !important;
    padding: 10px !important;
  }

  .picam-image-zoom__close {
    top: 8px !important;
    right: 8px !important;
  }
}


/* Corrección definitiva fullscreen: impedir desbordamiento de imágenes expandidas */
html.picam-zoom-active,
html.picam-zoom-active body,
body.picam-zoom-active {
  overflow: hidden !important;
}

.picam-image-zoom,
#imageLightbox.image-lightbox,
#imageLightbox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: none;
  place-items: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  background: rgba(10, 15, 25, .90) !important;
  z-index: 2147483647 !important;
}

.picam-image-zoom.open,
#imageLightbox.open {
  display: grid !important;
}

.picam-image-zoom__inner {
  width: calc(100vw - 52px) !important;
  height: calc(100vh - 52px) !important;
  max-width: 1380px !important;
  max-height: calc(100vh - 52px) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: #fff !important;
}

.picam-image-zoom__img,
#lightboxImage {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 90px) !important;
  max-height: calc(100vh - 90px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  transform: none !important;
}

.picam-image-zoom__close,
.image-lightbox-close {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 2147483647 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(17,24,39,.96) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .picam-image-zoom,
  #imageLightbox.image-lightbox,
  #imageLightbox {
    padding: 10px !important;
  }

  .picam-image-zoom__inner {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    padding: 8px !important;
  }

  .picam-image-zoom__img,
  #lightboxImage {
    max-width: calc(100vw - 36px) !important;
    max-height: calc(100vh - 36px) !important;
  }

  .picam-image-zoom__close,
  .image-lightbox-close {
    top: 12px !important;
    right: 12px !important;
  }
}


/* Rediseño integral del área de Medicina: formato unificado con Psicología, Nutrición y Terapia Física */
.medicina-redesign-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.medicina-redesign-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 42px !important;
}

.medx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(30,91,79,.08), transparent 34%);
  box-shadow: var(--shadow);
}

.medx-hero h2 {
  color: var(--guinda);
  font-size: clamp(42px, 5vw, 84px) !important;
  line-height: .9 !important;
  letter-spacing: -.05em;
  margin: 0 0 12px;
}

.medx-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
  font-weight: 650;
}

.medx-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: rgba(30,91,79,.09) !important;
  border: 1px solid rgba(30,91,79,.12) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.medx-anchor-nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.medx-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 999px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.medx-dashboard,
.medx-treatment-grid,
.medx-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.medx-card,
.medx-step-card,
.medx-module,
.medx-screen-card,
.medx-diagnosis-grid article,
.medx-flow-line,
.medx-table-cluster,
.medx-exam-cards {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.medx-card {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 1.8vw, 24px);
  min-height: 180px;
  align-content: start;
}

.medx-card span,
.medx-line-head span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 12px;
  font-weight: 950;
}

.medx-card h3,
.medx-section h3,
.medx-screen-card h4,
.medx-module h4,
.medx-diagnosis-grid h4 {
  color: var(--guinda);
}

.medx-card h3 {
  margin: 0;
  font-size: clamp(21px, 1.5vw, 29px) !important;
  line-height: 1.1;
}

.medx-card p,
.medx-section-head p,
.medx-step-card p,
.medx-module p,
.medx-module li,
.medx-screen-card p,
.medx-diagnosis-grid p,
.medx-table-cluster td {
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
}

.medx-section {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.medx-section-head {
  display: grid;
  gap: 8px;
}

.medx-section-head h3 {
  font-size: clamp(30px, 2.7vw, 48px) !important;
  line-height: .98;
  margin: 0;
}

.medx-section-head p:not(.kicker) {
  max-width: 1100px;
  text-align: justify;
}

.medx-flow-lines {
  display: grid;
  gap: 22px;
}

.medx-flow-line {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 1.6vw, 22px);
  background: linear-gradient(180deg, #fff, #fffdfb);
}

.medx-line-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(38,49,63,.10);
}

.medx-line-head strong {
  color: #2b3340;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.1;
}

.medx-line-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.medx-step-card {
  min-height: 255px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: #fff;
}

.medx-step-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #1e5b4f;
  color: #fff;
  font-weight: 950;
}

.medx-step-card h3 {
  margin: 0 0 8px;
  color: #2b3340;
  font-size: clamp(20px, 1.35vw, 26px) !important;
  line-height: 1.1;
}

.medx-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
  align-items: stretch;
}

.medx-module {
  padding: clamp(22px, 2vw, 30px);
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.medx-module h4 {
  margin: 0;
  font-size: clamp(24px, 1.7vw, 32px);
  line-height: 1.08;
}

.medx-module ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.medx-exam-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 18px;
  align-items: start;
}

.medx-exam-cards {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.medx-table-cluster {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: #fff;
  overflow: hidden;
}

.medx-table-cluster.single {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.medx-table-cluster .med-table-wrap {
  margin: 0 !important;
  width: 100%;
}

.medx-table-cluster table {
  min-width: 780px;
}

.medx-diagnosis-grid,
.medx-screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.medx-diagnosis-grid article,
.medx-screen-card {
  padding: clamp(20px, 1.8vw, 26px);
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.medx-diagnosis-grid h4,
.medx-screen-card h4 {
  margin: 0;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.1;
}

.medx-screen-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.medx-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.medx-form-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(30,91,79,.14);
  color: var(--muted);
  padding: 8px 11px;
  font-weight: 850;
  line-height: 1.2;
}

.medx-output-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.medx-treatment-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.medx-output-grid .medx-card,
.medx-treatment-grid .medx-card {
  min-height: 190px;
}

@media (max-width: 1320px) {
  .medx-anchor-nav {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .medx-dashboard,
  .medx-treatment-grid,
  .medx-output-grid,
  .medx-diagnosis-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .medx-line-cards {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 1040px) {
  .medx-anchor-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .medx-module-grid,
  .medx-exam-layout,
  .medx-screen-grid,
  .medx-line-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .medx-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .medx-anchor-nav,
  .medx-dashboard,
  .medx-treatment-grid,
  .medx-output-grid,
  .medx-diagnosis-grid {
    grid-template-columns: 1fr;
  }
}


/* Medicina: tablas convertidas en tarjetas con ampliación institucional */
.medx-table-cluster {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.medx-table-cluster.single {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.medx-table-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 245px;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.12);
  background:
    linear-gradient(180deg, #fff, #fbfdfc);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.medx-table-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30,91,79,.24);
  box-shadow: 0 18px 38px rgba(23,27,33,.10);
}

.medx-table-card:focus-visible {
  outline: 3px solid rgba(30,91,79,.28);
  outline-offset: 3px;
}

.medx-table-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.medx-table-card-copy {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.medx-table-card-copy span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f7faf9;
  color: #1e5b4f;
  border: 1px solid rgba(30,91,79,.12);
  font-size: var(--readable-small);
  font-weight: 950;
}

.medx-table-card-copy h4 {
  margin: 0;
  color: #2b3340;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.08;
}

.medx-table-card-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42 !important;
}

.medx-table-card-copy ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.32;
}

.medx-table-card-meta {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  align-self: end;
  padding-top: 8px;
  border-top: 1px solid rgba(30,91,79,.10);
}

.medx-table-card-meta b {
  color: var(--guinda);
  font-size: clamp(24px, 1.8vw, 34px);
  line-height: 1;
}

.medx-table-card-meta small {
  color: var(--muted);
  font-weight: 850;
  margin-right: 8px;
}

.medx-table-open-btn {
  position: absolute;
  right: 18px;
  bottom: 18px;
  border: 0;
  border-radius: 999px;
  background: #1e5b4f;
  color: #fff;
  padding: 10px 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(30,91,79,.18);
}

.medx-table-card template {
  display: none !important;
}

/* Modal de tabla médica */
.medx-table-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: none;
  place-items: center;
  padding: clamp(16px, 2.5vw, 38px);
  background: rgba(10, 15, 25, .82);
  backdrop-filter: blur(8px);
}

.medx-table-modal.open {
  display: grid !important;
}

.medx-table-modal-panel {
  width: min(94vw, 1380px);
  height: min(90vh, 920px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 26px 90px rgba(0,0,0,.42);
}

.medx-table-modal-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(16px, 1.8vw, 24px);
  background:
    linear-gradient(180deg, #fff, #fbfdfc);
  border-bottom: 1px solid rgba(30,91,79,.12);
}

.medx-table-modal-head h3 {
  color: var(--guinda);
  margin: 0;
  font-size: clamp(26px, 2vw, 40px);
  line-height: 1.05;
}

.medx-table-modal-close {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(17,24,39,.94);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.medx-table-modal-body {
  overflow: auto;
  padding: clamp(16px, 2vw, 24px);
  background: #fff;
}

.medx-table-modal-body .med-table-wrap {
  display: grid;
  gap: 12px;
  width: max-content;
  min-width: 100%;
  margin: 0 !important;
  border-radius: 22px;
  border: 1px solid rgba(30,91,79,.14);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 28px rgba(23,27,33,.08);
}

.medx-table-modal-body .med-table-wrap h4 {
  margin: 0;
  padding: 16px 18px 0;
  color: var(--guinda);
  font-size: clamp(22px, 1.6vw, 32px);
  line-height: 1.08;
}

.medx-table-modal-body table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 16px;
}

.medx-table-modal-body th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1e5b4f !important;
  color: #fff !important;
  text-align: left;
  padding: 13px 14px !important;
  line-height: 1.28 !important;
  vertical-align: top;
}

.medx-table-modal-body td {
  padding: 13px 14px !important;
  color: #4b5563 !important;
  line-height: 1.38 !important;
  vertical-align: top;
  border-bottom: 1px solid rgba(30,91,79,.10) !important;
}

.medx-table-modal-body tbody tr:nth-child(even) td {
  background: #f8fbfa !important;
}

body.medx-table-modal-open {
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  .medx-table-cluster,
  .medx-table-cluster.single {
    grid-template-columns: 1fr !important;
  }

  .medx-table-card {
    min-height: 230px;
  }
}

@media (max-width: 760px) {
  .medx-table-card {
    grid-template-columns: 1fr;
  }

  .medx-table-open-btn {
    position: static;
    justify-self: start;
    grid-column: 1 / -1;
  }

  .medx-table-modal {
    padding: 10px;
  }

  .medx-table-modal-panel {
    width: 96vw;
    height: 92vh;
    border-radius: 20px;
  }

  .medx-table-modal-body table {
    font-size: 14px;
    min-width: 760px;
  }
}


/* Medicina: cards de tabla simplificadas */
.medx-table-card-simple {
  grid-template-columns: auto minmax(0, 1fr) !important;
  min-height: 210px !important;
  align-content: stretch !important;
  padding: clamp(22px, 2vw, 30px) !important;
}

.medx-table-card-simple .medx-table-card-copy {
  height: 100%;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 12px !important;
  align-content: stretch !important;
}

.medx-table-card-simple .medx-table-card-copy h4 {
  margin: 0 !important;
  color: #2b3340 !important;
  font-size: clamp(23px, 1.6vw, 31px) !important;
  line-height: 1.08 !important;
}

.medx-table-card-simple .medx-table-card-copy p {
  color: var(--muted) !important;
  line-height: 1.44 !important;
  margin: 0 !important;
  align-self: start;
}

.medx-table-card-simple .medx-table-card-copy small {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.14);
  color: #1e5b4f;
  font-weight: 950;
  line-height: 1.15 !important;
  font-size: var(--readable-small) !important;
}

.medx-table-card-simple .medx-table-card-copy span,
.medx-table-card-simple .medx-table-card-copy ul,
.medx-table-card-simple .medx-table-card-meta,
.medx-table-card-simple .medx-table-open-btn {
  display: none !important;
}

.medx-table-card-simple .medx-table-card-icon {
  align-self: start;
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
}

@media (max-width: 760px) {
  .medx-table-card-simple {
    grid-template-columns: 1fr !important;
  }
}


/* Medicina: popup de tablas a pantalla completa fuera del contenedor de plataforma */
.medx-table-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 2147483600 !important;
  display: none;
  place-items: center !important;
  padding: clamp(22px, 3vw, 48px) !important;
  box-sizing: border-box !important;
  background: rgba(10, 15, 25, .88) !important;
  backdrop-filter: blur(10px);
  overflow: hidden !important;
}

.medx-table-modal.open {
  display: grid !important;
}

.medx-table-modal-panel {
  width: 100% !important;
  height: 100% !important;
  max-width: calc(100vw - clamp(44px, 6vw, 96px)) !important;
  max-height: calc(100vh - clamp(44px, 6vw, 96px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 30px 96px rgba(0,0,0,.44) !important;
  box-sizing: border-box !important;
}

.medx-table-modal-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: clamp(14px, 1.4vw, 22px) !important;
  background: linear-gradient(180deg, #fff, #fbfdfc) !important;
  border-bottom: 1px solid rgba(30,91,79,.12) !important;
}

.medx-table-modal-head h3 {
  margin: 0 !important;
  color: var(--guinda) !important;
  font-size: clamp(22px, 1.7vw, 34px) !important;
  line-height: 1.04 !important;
}

.medx-table-modal-close {
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,.96) !important;
  color: #fff !important;
  font-size: 32px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.medx-table-modal-body {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
  padding: clamp(12px, 1.5vw, 22px) !important;
  box-sizing: border-box !important;
  background: #fff !important;
  display: grid !important;
  place-items: center !important;
}

.medx-table-scale-stage {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

.medx-table-scale-content {
  transform-origin: center center !important;
  will-change: transform;
}

.medx-table-modal-body .med-table-wrap {
  display: grid !important;
  gap: 10px !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(30,91,79,.14) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(23,27,33,.08) !important;
}

.medx-table-modal-body .med-table-wrap h4 {
  margin: 0 !important;
  padding: 12px 14px 0 !important;
  color: var(--guinda) !important;
  font-size: 22px !important;
  line-height: 1.06 !important;
}

.medx-table-modal-body table {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-collapse: collapse !important;
  font-size: 15px !important;
  table-layout: auto !important;
}

.medx-table-modal-body th {
  position: static !important;
  background: #1e5b4f !important;
  color: #fff !important;
  text-align: left !important;
  padding: 10px 11px !important;
  line-height: 1.18 !important;
  vertical-align: top !important;
  white-space: normal !important;
}

.medx-table-modal-body td {
  color: #4b5563 !important;
  padding: 10px 11px !important;
  line-height: 1.22 !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(30,91,79,.10) !important;
  white-space: normal !important;
}

.medx-table-modal-body tbody tr:nth-child(even) td {
  background: #f8fbfa !important;
}

html.medx-table-modal-open,
body.medx-table-modal-open {
  overflow: hidden !important;
}

@media (max-width: 760px) {
  .medx-table-modal {
    padding: 12px !important;
  }

  .medx-table-modal-panel {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 20px !important;
  }

  .medx-table-modal-head {
    padding: 12px !important;
  }

  .medx-table-modal-close {
    width: 46px !important;
    height: 46px !important;
  }
}


/* Medicina: rediseño de tablas dentro del popup con scroll interno seguro */
.medx-table-modal.medx-scroll-table-mode {
  overflow: hidden !important;
  padding: clamp(18px, 2.4vw, 42px) !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-table-modal-panel {
  width: 100% !important;
  height: 100% !important;
  max-width: calc(100vw - clamp(36px, 4.8vw, 84px)) !important;
  max-height: calc(100vh - clamp(36px, 4.8vw, 84px)) !important;
  overflow: hidden !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-table-modal-head {
  min-height: 76px;
  padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.8vw, 26px) !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-table-modal-body {
  display: block !important;
  place-items: unset !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: clamp(14px, 1.6vw, 24px) !important;
  background: linear-gradient(180deg, #fff, #fbfdfc) !important;
  scrollbar-gutter: stable both-edges;
}

.medx-table-modal.medx-scroll-table-mode .medx-table-scale-stage {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-table-scale-content {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, auto) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(30,91,79,.16) !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(23,27,33,.10) !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap h4 {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 !important;
  padding: 16px 18px !important;
  color: var(--guinda) !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(30,91,79,.12) !important;
  font-size: clamp(23px, 1.55vw, 34px) !important;
  line-height: 1.08 !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap table {
  width: 100% !important;
  min-width: 980px !important;
  max-width: none !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  font-size: clamp(13px, .78vw, 16px) !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #1e5b4f !important;
  color: #fff !important;
  text-align: left !important;
  padding: 12px 13px !important;
  line-height: 1.18 !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap td {
  padding: 12px 13px !important;
  color: #4b5563 !important;
  line-height: 1.26 !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(30,91,79,.10) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap tbody tr:nth-child(even) td {
  background: #f8fbfa !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap tbody tr:hover td {
  background: #eef7f4 !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-scroll-shell {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  max-height: calc(100vh - 210px);
  scrollbar-gutter: stable both-edges;
}

/* Tablas estrechas: se ajustan a ancho completo sin forzar overflow horizontal */
.medx-table-modal.medx-scroll-table-mode .med-table-wrap.medx-compact-table table {
  min-width: 100% !important;
}

/* Tablas extensas: scroll horizontal interno en vez de recorte */
.medx-table-modal.medx-scroll-table-mode .med-table-wrap.medx-wide-table table {
  min-width: 1120px !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap.medx-extra-wide-table table {
  min-width: 1320px !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-table-scroll-hint {
  display: none;
  padding: 10px 14px;
  background: #f7faf9;
  color: #1e5b4f;
  font-weight: 900;
  border-bottom: 1px solid rgba(30,91,79,.10);
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap.medx-wide-table .medx-table-scroll-hint,
.medx-table-modal.medx-scroll-table-mode .med-table-wrap.medx-extra-wide-table .medx-table-scroll-hint {
  display: block;
}

@media (max-width: 900px) {
  .medx-table-modal.medx-scroll-table-mode {
    padding: 10px !important;
  }

  .medx-table-modal.medx-scroll-table-mode .medx-table-modal-panel {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 20px !important;
  }

  .medx-table-modal.medx-scroll-table-mode .medx-table-modal-body {
    padding: 10px !important;
  }

  .medx-table-modal.medx-scroll-table-mode .med-table-scroll-shell {
    max-height: calc(100vh - 170px);
  }

  .medx-table-modal.medx-scroll-table-mode .med-table-wrap table {
    font-size: 13px !important;
    min-width: 860px !important;
  }
}


/* Medicina: descripciones alusivas y celdas largas en párrafos dentro del popup */
.medx-table-card-simple .medx-table-card-copy p {
  text-align: left !important;
  color: var(--muted) !important;
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap td.medx-long-cell {
  min-width: 260px;
  max-width: 420px;
}

.medx-table-modal.medx-scroll-table-mode .medx-cell-paragraphs {
  display: grid;
  gap: 8px;
  max-width: 100%;
}

.medx-table-modal.medx-scroll-table-mode .medx-cell-paragraphs p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.28 !important;
  color: inherit !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-cell-paragraphs p + p {
  padding-top: 7px !important;
  border-top: 1px solid rgba(30,91,79,.10);
}

.medx-table-modal.medx-scroll-table-mode .med-table-wrap td,
.medx-table-modal.medx-scroll-table-mode .med-table-wrap th {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
}


/* Medicina: tablas reconstruidas con celdas estructuradas sin etiquetas textuales */
.medx-table-modal.medx-scroll-table-mode .medx-clean-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-clean-table {
  width: 100% !important;
  min-width: 980px !important;
  table-layout: fixed !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-clean-table th,
.medx-table-modal.medx-scroll-table-mode .medx-clean-table td {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-cell-blocks {
  display: grid !important;
  gap: 7px !important;
  max-width: 100%;
}

.medx-table-modal.medx-scroll-table-mode .medx-cell-blocks p {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  line-height: 1.26 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.medx-table-modal.medx-scroll-table-mode .medx-cell-blocks p + p {
  padding-top: 7px !important;
  border-top: 1px solid rgba(30,91,79,.10) !important;
}

.medx-table-modal.medx-scroll-table-mode td.medx-structured-cell {
  min-width: 250px;
}

.medx-table-card-simple .medx-table-card-copy p {
  text-align: left !important;
}


/* Ajuste final: popup de tablas médicas con scroll interno y sin etiqueta superior */
.medx-table-modal .medx-table-modal-head .kicker,
.medx-table-modal-head .kicker {
  display: none !important;
}

.medx-table-modal .medx-table-modal-panel {
  overflow: hidden !important;
}

.medx-table-modal .medx-table-modal-body {
  min-height: 0 !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

.medx-table-modal .medx-table-scale-stage {
  width: 100% !important;
  min-height: 100% !important;
  overflow: visible !important;
}

.medx-table-modal .medx-table-scale-content {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

.medx-table-modal .med-table-scroll-shell {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 220px) !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

.medx-table-modal .med-table-wrap {
  max-width: 100% !important;
}

/* Accesos superiores a las áreas: texto más cercano al logo */
.area-tab {
  gap: 4px !important;
  justify-content: center !important;
  padding-inline: 8px !important;
}

.area-tab img,
.area-tab .area-svg-icon {
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

.area-tab span {
  margin-left: 0 !important;
  letter-spacing: -.01em;
}

/* Tarjetas/elementos con logo de área: reducir distancia entre ícono y texto */
.area-logo-orb + *,
.area-svg-icon + span,
.area-svg-icon + h3,
.area-svg-icon + p {
  margin-left: 0 !important;
}

.asset-link-card,
.flow-step-card,
.area-tab {
  column-gap: 4px !important;
}

.area-tab .area-svg-icon {
  width: 24px !important;
  height: 24px !important;
}


/* Ajuste final: tablas centradas, márgenes seguros del popup y accesos de área centrados */
.medx-table-modal {
  padding: 20px 20px 26px 20px !important;
  box-sizing: border-box !important;
}

.medx-table-modal .medx-table-modal-panel {
  width: calc(100vw - 40px) !important;
  height: calc(100vh - 46px) !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 46px) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.medx-table-modal .medx-table-modal-body {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px 18px 26px 18px !important;
  box-sizing: border-box !important;
  display: block !important;
}

.medx-table-modal .medx-table-scale-stage {
  width: 100% !important;
  min-height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.medx-table-modal .medx-table-scale-content,
.medx-table-modal #medxFullscreenTableBody {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: none !important;
}

.medx-table-modal .med-table-wrap {
  margin: 0 auto 24px auto !important;
  justify-self: center !important;
}

.medx-table-modal .med-table-scroll-shell {
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  padding: 0 0 22px 0 !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable both-edges !important;
}

.medx-table-modal .med-table-scroll-shell table {
  margin-left: auto !important;
  margin-right: auto !important;
}

.medx-table-modal .med-table-wrap.medx-compact-table,
.medx-table-modal .med-table-wrap:not(.medx-wide-table):not(.medx-extra-wide-table) {
  max-width: min(100%, 1180px) !important;
}

.medx-table-modal .med-table-wrap.medx-wide-table,
.medx-table-modal .med-table-wrap.medx-extra-wide-table {
  width: 100% !important;
  max-width: 100% !important;
}

/* Accesos a áreas: logo en contenedor independiente, texto centrado y cercano */
.area-tab {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  padding: 7px 10px !important;
}

.area-tab-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background: rgba(155,34,71,.09) !important;
  border: 1px solid rgba(155,34,71,.18) !important;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.72), 0 8px 16px rgba(23,27,33,.06) !important;
}

.area-tab-icon img.area-svg-icon,
.area-tab .area-tab-icon img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.area-tab-label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.08 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.area-tab.active .area-tab-icon,
.area-tab:hover .area-tab-icon {
  background: rgba(155,34,71,.14) !important;
  border-color: rgba(155,34,71,.30) !important;
}

@media (max-width: 760px) {
  .medx-table-modal {
    padding: 20px 20px 28px 20px !important;
  }

  .medx-table-modal .medx-table-modal-panel {
    width: calc(100vw - 40px) !important;
    height: calc(100vh - 48px) !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 48px) !important;
  }

  .area-tab {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 5px 6px !important;
  }

  .area-tab-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 11px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 19px !important;
    height: 19px !important;
  }
}


/* Ajuste: accesos directos a áreas centrados y etiquetas de tabla en una sola línea */
.area-tab {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-auto-rows: min-content !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  height: 100% !important;
  min-height: 0 !important;
}

.area-tab-icon {
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
}

.area-tab-label,
.area-tab span.area-tab-label {
  align-self: center !important;
  justify-self: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.05 !important;
}

.medx-table-card-simple[data-table-card="medx-table-01"] .medx-table-card-copy small,
.medx-table-card-simple[data-table-card="medx-table-02"] .medx-table-card-copy small {
  width: max-content !important;
  min-width: 230px !important;
  max-width: none !important;
  white-space: nowrap !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (max-width: 760px) {
  .area-tab {
    grid-template-columns: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .medx-table-card-simple[data-table-card="medx-table-01"] .medx-table-card-copy small,
  .medx-table-card-simple[data-table-card="medx-table-02"] .medx-table-card-copy small {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
}


/* Medicina: reacomodo simétrico de Mediciones y hallazgos prioritarios */
#med-exploracion .medx-exam-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}

#med-exploracion .medx-table-cluster {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  align-items: stretch !important;
}

#med-exploracion .medx-table-card-simple {
  min-height: 230px !important;
  height: 100% !important;
  overflow: hidden !important;
}

#med-exploracion .medx-table-card-simple .medx-table-card-copy {
  min-width: 0 !important;
}

#med-exploracion .medx-table-card-simple .medx-table-card-copy h4,
#med-exploracion .medx-table-card-simple .medx-table-card-copy p {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#med-exploracion .medx-table-card-simple .medx-table-card-copy small {
  max-width: 100% !important;
}

#med-exploracion .medx-exam-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  align-items: stretch !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#med-exploracion .medx-exam-cards .medx-card {
  height: 100% !important;
  min-height: 225px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 10px !important;
  align-content: start !important;
  overflow: hidden !important;
}

#med-exploracion .medx-exam-cards .medx-card h3 {
  min-height: 2.2em;
  display: grid;
  align-items: center;
  margin: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#med-exploracion .medx-exam-cards .medx-card p {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto;
}

@media (max-width: 1180px) {
  #med-exploracion .medx-table-cluster,
  #med-exploracion .medx-exam-cards {
    grid-template-columns: 1fr !important;
  }

  #med-exploracion .medx-exam-cards .medx-card h3 {
    min-height: 0;
  }
}


/* Rediseño integral del área de Laboratorio Clínico */
.laboratorio-redesign-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.laboratorio-redesign-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 42px !important;
}

.labx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(30,91,79,.08), transparent 34%);
  box-shadow: var(--shadow);
}

.labx-hero h2 {
  color: var(--guinda);
  font-size: clamp(42px, 5vw, 84px) !important;
  line-height: .9 !important;
  letter-spacing: -.05em;
  margin: 0 0 12px;
}

.labx-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
  font-weight: 650;
}

.labx-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: rgba(30,91,79,.09) !important;
  border: 1px solid rgba(30,91,79,.12) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.labx-anchor-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.labx-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 999px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.labx-dashboard,
.labx-pre-grid,
.labx-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.labx-card,
.labx-step-card,
.labx-analysis-card,
.labx-recurrent-panel article,
.labx-signal {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.labx-card {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 1.8vw, 24px);
  min-height: 180px;
  align-content: start;
  overflow: hidden;
}

.labx-card span,
.labx-recurrent-panel span,
.labx-signal span,
.labx-analysis-card span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 12px;
  font-weight: 950;
}

.labx-card h3,
.labx-section h3,
.labx-recurrent-panel h4,
.labx-signal h4 {
  color: var(--guinda);
}

.labx-card h3 {
  margin: 0;
  font-size: clamp(21px, 1.5vw, 29px) !important;
  line-height: 1.1;
}

.labx-card p,
.labx-section-head p,
.labx-step-card p,
.labx-recurrent-panel p,
.labx-signal p,
.labx-analysis-card p {
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
  overflow-wrap: break-word;
}

.labx-section {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.labx-section-head {
  display: grid;
  gap: 8px;
}

.labx-section-head h3 {
  font-size: clamp(30px, 2.7vw, 48px) !important;
  line-height: .98;
  margin: 0;
}

.labx-section-head p:not(.kicker) {
  max-width: 1120px;
  text-align: justify;
}

.labx-picam-route {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}

.labx-step-card {
  min-height: 270px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #fcfdfa);
  overflow: hidden;
}

.labx-step-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #1e5b4f;
  color: #fff;
  font-weight: 950;
}

.labx-step-card h3 {
  margin: 0 0 6px;
  color: #2b3340;
  font-size: clamp(20px, 1.35vw, 26px) !important;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.labx-step-card small {
  display: inline-flex;
  width: fit-content;
  color: #1e5b4f;
  background: rgba(30,91,79,.10);
  border-radius: 999px;
  padding: 6px 9px;
  font-weight: 950;
  margin-bottom: 8px;
  line-height: 1.1;
}

.labx-recurrent-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.labx-recurrent-panel article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 1.8vw, 26px);
  min-height: 215px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.labx-recurrent-panel h4,
.labx-signal h4 {
  margin: 0;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.1;
}

.labx-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}

.labx-analysis-card {
  position: relative;
  min-height: 360px !important;
  perspective: 1200px;
}

.labx-analysis-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(20px, 1.8vw, 28px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
  overflow: hidden;
}

.labx-analysis-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  overflow: auto;
  text-align: left;
  justify-items: start;
  align-content: start;
}

.labx-analysis-card.flipped .flip-front { transform: rotateY(180deg); }
.labx-analysis-card.flipped .flip-back { transform: rotateY(0); }

.labx-analysis-card h3 {
  margin: 0;
  color: #2b3340;
  font-size: clamp(22px, 1.6vw, 31px) !important;
  line-height: 1.1;
  text-align: center;
}

.labx-analysis-detail {
  display: grid;
  gap: 9px;
}

.labx-analysis-detail strong {
  color: #1e5b4f;
}

.labx-analysis-card small {
  color: #1e5b4f;
  font-weight: 900;
  align-self: end;
}

.labx-pre-grid,
.labx-output-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.labx-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

.labx-signal {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(20px, 1.8vw, 26px);
  min-height: 220px;
}

.labx-signal.green { background: linear-gradient(180deg, #fff, #f3fbf5); }
.labx-signal.yellow { background: linear-gradient(180deg, #fff, #fffaf0); }
.labx-signal.red { background: linear-gradient(180deg, #fff, #fff5f5); }

.labx-signal.green span { background: rgba(34,132,73,.12); color: #1f7a43; }
.labx-signal.yellow span { background: rgba(184,126,0,.14); color: #8a5b00; }
.labx-signal.red span { background: rgba(155,34,71,.12); color: var(--guinda); }

.labx-follow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1420px) {
  .labx-picam-route {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .labx-dashboard {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 1180px) {
  .labx-anchor-nav {
    position: static;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .labx-analysis-grid,
  .labx-pre-grid,
  .labx-output-grid,
  .labx-recurrent-panel,
  .labx-signal-grid,
  .labx-follow-grid,
  .labx-picam-route {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 780px) {
  .labx-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .labx-anchor-nav,
  .labx-dashboard {
    grid-template-columns: 1fr;
  }
}


/* Integración del panel inflamatorio de citocinas en Laboratorio */
#labx-analisis .labx-analysis-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.labx-kit-card .flip-front {
  align-content: start;
}

.labx-kit-thumb-wrap {
  width: 100%;
  min-height: 132px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 18px;
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.10);
}

.labx-kit-thumb-wrap img {
  width: 100%;
  max-height: 124px;
  object-fit: contain;
  border-radius: 12px;
}

@media (max-width: 1420px) {
  #labx-analisis .labx-analysis-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 1180px) {
  #labx-analisis .labx-analysis-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Bloques de citocinas extraídos del ZIP fuente */
/* Área de laboratorio: determinación de citocinas Th1/Th2/Th17 */
.laboratorio-cito-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.laboratorio-cito-content {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 42px !important;
}

.labcito-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,91,79,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,251,.98)),
    radial-gradient(circle at 0% 0%, rgba(30,91,79,.08), transparent 34%);
  box-shadow: var(--shadow);
}

.labcito-hero h2 {
  color: var(--guinda);
  font-size: clamp(38px, 4.6vw, 76px) !important;
  line-height: .92 !important;
  letter-spacing: -.045em;
  margin: 0 0 12px;
}

.labcito-hero p:not(.kicker) {
  max-width: 980px;
  color: var(--muted);
  line-height: 1.48 !important;
  margin: 0;
  font-weight: 650;
  text-align: justify;
}

.labcito-hero .area-svg-icon {
  width: clamp(104px, 9vw, 146px) !important;
  height: clamp(104px, 9vw, 146px) !important;
  object-fit: contain;
  padding: 16px !important;
  border-radius: 34px !important;
  background: rgba(30,91,79,.09) !important;
  border: 1px solid rgba(30,91,79,.12) !important;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
}

.labcito-anchor-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}

.labcito-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 999px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}

.labcito-dashboard,
.labcito-route-grid,
.labcito-method-grid,
.labcito-output-grid {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.labcito-dashboard {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.labcito-mini-card,
.labcito-route-card,
.labcito-method-card,
.labcito-output-card,
.labcito-recurrent-note,
.labcito-kit-card,
.labcito-reagents-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.labcito-mini-card,
.labcito-route-card,
.labcito-method-card,
.labcito-output-card {
  padding: clamp(18px, 1.8vw, 24px);
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 180px;
  overflow: hidden;
}

.labcito-mini-card span,
.labcito-route-card span,
.labcito-method-card span,
.labcito-flip-card span,
.labcito-reagents-card span,
.labcito-kit-copy span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 12px;
  font-weight: 950;
}

.labcito-mini-card h3,
.labcito-section h3,
.labcito-route-card h4,
.labcito-method-card h4,
.labcito-output-card h4,
.labcito-kit-card h4,
.labcito-reagents-card h4 {
  margin: 0;
  color: var(--guinda);
}

.labcito-mini-card h3 {
  font-size: clamp(21px, 1.5vw, 29px) !important;
  line-height: 1.1;
}

.labcito-mini-card p,
.labcito-route-card p,
.labcito-method-card p,
.labcito-output-card p,
.labcito-section-head p,
.labcito-recurrent-note,
.labcito-kit-copy p,
.labcito-kit-copy li,
.labcito-flip-card p,
.labcito-flip-card li,
.labcito-reagents-card,
.labcito-reagent-row {
  color: var(--muted);
  line-height: 1.46 !important;
}

.labcito-section {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(155,34,71,.12);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, #fffdfd);
  box-shadow: var(--shadow);
}

.labcito-section-head {
  display: grid;
  gap: 8px;
}

.labcito-section-head h3 {
  font-size: clamp(30px, 2.7vw, 48px) !important;
  line-height: .98;
  margin: 0;
}

.labcito-section-head p:not(.kicker) {
  max-width: 1120px;
  text-align: justify;
}

.labcito-route-grid {
  grid-template-columns: repeat(5, minmax(0,1fr));
}

.labcito-route-card {
  min-height: 220px;
}

.labcito-route-card span,
.labcito-method-card span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #1e5b4f;
  color: #fff;
  font-weight: 950;
}

.labcito-route-card.current {
  background: linear-gradient(180deg, #fff, #f5fbf8);
  border-color: rgba(30,91,79,.25);
  box-shadow: 0 12px 28px rgba(30,91,79,.12);
}

.labcito-recurrent-note {
  padding: 18px 20px;
  background: linear-gradient(180deg, #fcfffd, #f7fbf9);
}

.labcito-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}

.labcito-flip-card {
  position: relative;
  min-height: 320px !important;
  perspective: 1200px;
}

.labcito-flip-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(20px, 1.8vw, 28px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
  overflow: hidden;
}

.labcito-flip-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  overflow: auto;
  text-align: left;
  justify-items: start;
  align-content: start;
}

.labcito-flip-card.flipped .flip-front { transform: rotateY(180deg); }
.labcito-flip-card.flipped .flip-back { transform: rotateY(0); }

.labcito-flip-card h3 {
  margin: 0;
  color: #2b3340;
  font-size: clamp(22px, 1.6vw, 31px) !important;
  line-height: 1.1;
}

.labcito-flip-card ul {
  margin: 0;
  padding-left: 18px;
}

.labcito-flip-card small {
  color: #1e5b4f;
  font-weight: 900;
  align-self: end;
}

.labcito-method-grid {
  grid-template-columns: repeat(5, minmax(0,1fr));
}

.labcito-method-card {
  min-height: 220px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.labcito-kit-grid {
  display: grid;
  gap: 18px;
}

.labcito-kit-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 18px;
  padding: 20px;
  align-items: center;
}

.labcito-kit-copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

.labcito-kit-copy ul {
  margin: 0;
  padding-left: 18px;
}

.labcito-kit-figure {
  margin: 0;
  padding: 18px;
  border-radius: 24px;
  background: #fafcfc;
  border: 1px solid rgba(30,91,79,.10);
  display: grid;
  gap: 10px;
  justify-items: center;
  align-content: start;
}

.labcito-kit-figure img {
  width: 100%;
  max-width: 420px;
  object-fit: contain;
  border-radius: 20px;
  background: #fff;
}

.labcito-kit-figure figcaption {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.labcito-reagents-card {
  padding: 20px;
  display: grid;
  gap: 14px;
}

.labcito-reagent-table {
  display: grid;
  gap: 0;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 20px;
  overflow: hidden;
}

.labcito-reagent-row {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(150px,.7fr);
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid rgba(30,91,79,.09);
  background: #fff;
}

.labcito-reagent-row.head {
  background: #f3f8f6;
  border-top: 0;
  color: #2b3340;
}

.labcito-output-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 1400px) {
  .labcito-route-grid,
  .labcito-method-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .labcito-dashboard,
  .labcito-profile-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 1180px) {
  .labcito-anchor-nav {
    position: static;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .labcito-kit-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .labcito-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .labcito-anchor-nav,
  .labcito-dashboard,
  .labcito-route-grid,
  .labcito-profile-grid,
  .labcito-method-grid,
  .labcito-output-grid {
    grid-template-columns: 1fr !important;
  }
  .labcito-reagent-row {
    grid-template-columns: 1fr;
  }
}


/* Laboratorio: panel clínico complementario */
.labcito-anchor-nav {
  grid-template-columns: repeat(7, minmax(0,1fr)) !important;
}

.labcito-clinical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}

.labcito-clinical-card {
  position: relative;
  min-height: 330px !important;
  perspective: 1200px;
}

.labcito-clinical-card .flip-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(20px, 1.8vw, 28px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.22,.72,.18,1);
  overflow: hidden;
}

.labcito-clinical-card .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  overflow: auto;
  text-align: left;
  justify-items: start;
  align-content: start;
}

.labcito-clinical-card.flipped .flip-front { transform: rotateY(180deg); }
.labcito-clinical-card.flipped .flip-back { transform: rotateY(0); }

.labcito-clinical-card span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,91,79,.10);
  color: #1e5b4f;
  font-size: 12px;
  font-weight: 950;
}

.labcito-clinical-card h3 {
  margin: 0;
  color: #2b3340;
  font-size: clamp(22px, 1.6vw, 31px) !important;
  line-height: 1.1;
}

.labcito-clinical-card p {
  color: var(--muted);
  line-height: 1.46 !important;
  margin: 0;
  overflow-wrap: break-word;
}

.labcito-clinical-card small {
  color: #1e5b4f;
  font-weight: 900;
  align-self: end;
}

@media (max-width: 1180px) {
  .labcito-anchor-nav {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  .labcito-clinical-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 880px) {
  .labcito-anchor-nav {
    grid-template-columns: 1fr !important;
  }
}


/* Ajuste de navegación para coexistencia labx/labcito */
.labx-anchor-nav{grid-template-columns:repeat(10,minmax(0,1fr))!important;}
@media(max-width:1420px){.labx-anchor-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;}}
@media(max-width:880px){.labx-anchor-nav{grid-template-columns:1fr!important;}}


/* Laboratorio: Panel central PICAM en 3 bloques por línea */
#labx-analisis .labx-analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#labx-analisis .labx-analysis-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
}

@media (max-width: 1180px) {
  #labx-analisis .labx-analysis-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Laboratorio: IL-6 integrada a Th1 y reactivos del kit sin cantidades */
#labcito-kit .labcito-reagent-row {
  grid-template-columns: 1fr !important;
}

#labcito-kit .labcito-reagent-row.head {
  justify-items: start !important;
}

#labcito-kit .labcito-reagent-row span {
  width: 100%;
}

#labcito-perfil .labcito-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1180px) {
  #labcito-perfil .labcito-profile-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Nutrición: pantorrilla y velocidad de marcha en la misma línea */
#nutri-antropometria .nutri-visual-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card {
  grid-column: span 2 !important;
  width: 100% !important;
}

#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:nth-last-child(2),
#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:last-child {
  grid-column: span 3 !important;
}

@media (max-width: 1180px) {
  #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card,
  #nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:nth-last-child(2),
  #nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:last-child {
    grid-column: auto !important;
  }
}

@media (max-width: 760px) {
  #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Nutrición: rediseño específico de la card de circunferencia de pantorrilla */
#nutri-antropometria .nutri-calf-card {
  min-height: 520px !important;
}

#nutri-antropometria .nutri-calf-card .flip-front {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 16px !important;
}

#nutri-antropometria .nutri-calf-card .flip-front figure {
  min-height: 345px !important;
  max-height: none !important;
  height: 100% !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #f7faf9 !important;
}

#nutri-antropometria .nutri-calf-card .flip-front img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

#nutri-antropometria .nutri-calf-card .nutri-flip-caption {
  align-self: end !important;
  display: grid !important;
  gap: 8px !important;
  padding: 14px 14px 12px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(30,91,79,.10) !important;
}

@media (max-width: 1180px) {
  #nutri-antropometria .nutri-calf-card {
    min-height: 500px !important;
  }
}


/* Nutrición: ajustes finales de pantorrilla, velocidad de marcha y circunferencia abdominal */
#nutri-antropometria .nutri-calf-card .nutri-flip-caption {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-self: end !important;
}

#nutri-antropometria .nutri-calf-card .flip-front {
  grid-template-rows: minmax(330px, 1fr) auto !important;
  align-content: stretch !important;
}

#nutri-antropometria .nutri-calf-card .flip-front figure {
  min-height: 340px !important;
  height: 100% !important;
}

#nutri-antropometria .nutri-speed-card .flip-front {
  display: grid !important;
  grid-template-rows: minmax(255px, 290px) auto !important;
  align-content: start !important;
  gap: 12px !important;
}

#nutri-antropometria .nutri-speed-card .flip-front figure {
  min-height: 255px !important;
  max-height: 290px !important;
  height: 100% !important;
}

#nutri-antropometria .nutri-speed-card .nutri-flip-caption {
  align-self: start !important;
}

#nutri-antropometria .nutri-speed-card .nutri-flip-caption small {
  display: inline-block !important;
  margin-top: 0 !important;
}


/* Nutrición: igualar altura de imagen de pantorrilla con velocidad de marcha */
#nutri-antropometria .nutri-calf-card .flip-front {
  grid-template-rows: minmax(255px, 290px) auto !important;
  align-content: start !important;
}

#nutri-antropometria .nutri-calf-card .flip-front figure {
  min-height: 255px !important;
  max-height: 290px !important;
  height: 100% !important;
}

#nutri-antropometria .nutri-calf-card .flip-front img {
  max-height: 290px !important;
}


/* Nuevas áreas: Salud Dental y Esquema Integral */
.area-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px !important; }
.area-tab { padding: 8px 8px !important; font-size: 13px !important; }
.area-tab-label { white-space: normal !important; line-height: 1.05 !important; text-align: center !important; }
.area-role-grid.seven-balanced { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.area-role-grid.seven-balanced .area-role-flip-card { min-height: 186px; }
@media (max-width: 1360px) {
  .area-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; height: auto !important; min-height: var(--area-tabs-h); }
  .book-app { inset: calc(var(--header-h) + var(--area-tabs-h) + 6px) var(--nav-w) 0 0 !important; }
}
@media (max-width: 1100px) {
  .area-role-grid.seven-balanced { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .area-role-grid.seven-balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dentalx-anchor-nav, .integralx-anchor-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 26px rgba(23,27,33,.07);
  backdrop-filter: blur(10px);
}
.dentalx-anchor-nav a, .integralx-anchor-nav a {
  text-decoration: none;
  text-align: center;
  color: var(--guinda);
  background: #f7faf9;
  border: 1px solid rgba(30,91,79,.12);
  border-radius: 999px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}
.dentalx-section, .integralx-section {
  display: grid;
  gap: 16px;
}
.dentalx-section-head h3, .integralx-section-head h3 { color: var(--guinda); margin: 0 0 8px; font-size: clamp(24px, 1.7vw, 34px); }
.dentalx-section-head p, .integralx-section-head p { margin: 0; color: var(--muted); }
.dentalx-dashboard, .dentalx-scheme-grid, .dentalx-output-grid,
.integralx-dashboard, .integralx-output-grid, .integralx-qa-grid, .integralx-area-map {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: stretch;
}
.dentalx-step-grid, .integralx-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.dentalx-guidance-grid, .dentalx-check-grid, .integralx-traffic-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.dentalx-card, .dentalx-step, .integralx-card, .integralx-step, .integralx-area-map article, .integralx-traffic {
  border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow);
}
.dentalx-card, .integralx-card, .integralx-area-map article, .integralx-traffic { display: grid; gap: 10px; align-content: start; padding: clamp(18px, 1.8vw, 24px); min-height: 180px; }
.dentalx-step, .integralx-step { display: grid; gap: 10px; padding: clamp(18px, 1.8vw, 24px); min-height: 190px; align-content: start; }
.dentalx-card span, .integralx-card span, .dentalx-flip .flip-front span {
  width: fit-content; padding: 7px 10px; border-radius: 999px; background: rgba(30,91,79,.10); color: #1e5b4f; font-size: 12px; font-weight: 950;
}
.dentalx-card h3, .dentalx-card h4, .dentalx-step h4, .integralx-card h3, .integralx-card h4, .integralx-step h4, .integralx-area-map h4, .integralx-traffic h4, .dentalx-flip h4 { color: var(--guinda); margin: 0; }
.dentalx-card p, .dentalx-step p, .integralx-card p, .integralx-step p, .integralx-area-map p, .integralx-traffic p, .dentalx-flip p { margin: 0; color: var(--muted); line-height: 1.48; }
.dentalx-step b, .integralx-step b {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--guinda); color: #fff; font-size: 18px;
}
.dentalx-flip { min-height: 260px; }
.dentalx-flip .flip-face { padding: 18px; display: grid; align-content: start; gap: 10px; }
.dentalx-flip .flip-front small, .dentalx-flip .flip-back small { color: var(--muted); font-weight: 800; }
.dentalx-check-grid ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; }
.integralx-area-map article { grid-template-columns: auto 1fr; align-items: start; }
.integralx-area-map article .offline-ui-icon { margin: 0; }
.integralx-traffic.green { border-color: rgba(52,168,83,.24); background: #f3fbf5; }
.integralx-traffic.amber { border-color: rgba(240,163,10,.24); background: #fff9ef; }
.integralx-traffic.red { border-color: rgba(217,48,37,.24); background: #fff4f3; }
@media (max-width: 1280px) {
  .dentalx-dashboard, .dentalx-scheme-grid, .dentalx-output-grid, .integralx-dashboard, .integralx-output-grid, .integralx-qa-grid, .integralx-area-map { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dentalx-step-grid, .integralx-step-grid, .dentalx-guidance-grid, .dentalx-check-grid, .integralx-traffic-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dentalx-anchor-nav, .integralx-anchor-nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .dentalx-dashboard, .dentalx-scheme-grid, .dentalx-output-grid, .integralx-dashboard, .integralx-output-grid, .integralx-qa-grid, .integralx-area-map, .dentalx-step-grid, .integralx-step-grid, .dentalx-guidance-grid, .dentalx-check-grid, .integralx-traffic-grid, .dentalx-anchor-nav, .integralx-anchor-nav { grid-template-columns: 1fr; }
}


/* Ajuste responsivo para siete pestañas de área sin empalme */
.area-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
}
.area-tabs::-webkit-scrollbar { height: 6px; }
.area-tabs::-webkit-scrollbar-thumb { background: rgba(155,34,71,.18); border-radius: 999px; }
.area-tab { flex: 1 1 0 !important; min-width: 132px !important; }
@media (max-width: 1360px) {
  .area-tabs { grid-template-columns: none !important; }
  .area-tab { flex: 0 0 150px !important; }
  .book-app { inset: calc(var(--header-h) + var(--area-tabs-h)) var(--nav-w) 0 0 !important; }
}


/* Esquema Integral: reacomodo horizontal de títulos en Contribución por área */
#integralx-areas .integralx-area-map {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#integralx-areas .integralx-area-map article {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  grid-template-areas:
    "icon title"
    "icon text" !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
  align-items: start !important;
  min-height: 190px !important;
  overflow: hidden !important;
}

#integralx-areas .integralx-area-map article .integralx-area-icon,
#integralx-areas .integralx-area-map article .offline-ui-icon {
  grid-area: icon !important;
  width: 54px !important;
  height: 54px !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 0 !important;
}

#integralx-areas .integralx-area-map article .integralx-area-title,
#integralx-areas .integralx-area-map article h4 {
  grid-area: title !important;
  display: block !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  min-width: 0 !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

#integralx-areas .integralx-area-map article .integralx-area-text,
#integralx-areas .integralx-area-map article p {
  grid-area: text !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

@media (max-width: 1180px) {
  #integralx-areas .integralx-area-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #integralx-areas .integralx-area-map {
    grid-template-columns: 1fr !important;
  }

  #integralx-areas .integralx-area-map article {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
}


/* Portada previa de acceso PICAM */
.picam-entry-body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(155,34,71,.16), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(30,91,79,.16), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #fbf7f8 52%, #f7faf9 100%);
}

.picam-entry-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 56px);
}

.picam-entry-card {
  width: min(760px, 92vw);
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(34px, 5vw, 70px);
  border-radius: 36px;
  border: 1px solid rgba(155,34,71,.16);
  background: rgba(255,255,255,.88);
  box-shadow: 0 26px 80px rgba(23,27,33,.14);
  text-align: center;
  backdrop-filter: blur(18px);
}

.picam-entry-kicker {
  color: var(--guinda);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(12px, 1.2vw, 15px);
}

.picam-entry-logo-button {
  width: clamp(190px, 26vw, 300px);
  height: clamp(190px, 26vw, 300px);
  border: 0;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 34px);
  box-shadow:
    0 20px 50px rgba(155,34,71,.18),
    inset 0 0 0 1px rgba(155,34,71,.18),
    inset 0 0 0 12px rgba(255,255,255,.75);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.picam-entry-logo-button:hover,
.picam-entry-logo-button:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 28px 62px rgba(155,34,71,.24),
    inset 0 0 0 1px rgba(155,34,71,.24),
    inset 0 0 0 12px rgba(255,255,255,.84);
  outline: 4px solid rgba(30,91,79,.18);
  outline-offset: 8px;
}

.picam-entry-logo-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.picam-entry-card h1 {
  margin: 4px 0 0;
  color: var(--guinda);
  font-size: clamp(48px, 8vw, 92px);
  line-height: .9;
  letter-spacing: .02em;
}

.picam-entry-card p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
  font-size: clamp(18px, 2vw, 24px);
}

.picam-entry-access {
  margin-top: 4px;
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--guinda);
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(155,34,71,.22);
}

.picam-entry-access:hover,
.picam-entry-access:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
}


/* ===== Responsive agregado iPad: menú hamburguesa para áreas y navegación inferior ===== */
.ipad-area-menu-toggle,
.ipad-area-menu-backdrop {
  display: none;
}

@media (min-width: 641px) and (max-width: 1180px) {
  :root {
    --ipad-bottom-nav-h: 84px;
  }

  .ipad-area-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: fixed;
    top: calc(var(--header-h) + 10px);
    right: 16px;
    z-index: 1300;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(122, 18, 52, 0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    color: var(--guinda, #7A1234);
    box-shadow: 0 12px 26px rgba(27, 31, 41, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
  }

  .ipad-area-menu-toggle__label {
    line-height: 1;
    white-space: nowrap;
  }

  .ipad-area-menu-toggle__icon {
    width: 20px;
    height: 16px;
    display: inline-grid;
    align-content: center;
    gap: 4px;
  }

  .ipad-area-menu-toggle__icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .22s ease, opacity .22s ease;
  }

  body.ipad-area-menu-open .ipad-area-menu-toggle__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.ipad-area-menu-open .ipad-area-menu-toggle__icon span:nth-child(2) {
    opacity: 0;
  }
  body.ipad-area-menu-open .ipad-area-menu-toggle__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .ipad-area-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1240;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
  }

  body.ipad-area-menu-open .ipad-area-menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Oculta la barra superior de áreas y la transforma en menú hamburguesa */
  .area-tabs {
    position: fixed !important;
    top: calc(var(--header-h) + 68px) !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(380px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--header-h) - 98px) !important;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: 10px !important;
    padding: 14px !important;
    overflow: auto !important;
    border-radius: 24px !important;
    border: 1px solid rgba(122, 18, 52, 0.16) !important;
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 24px 50px rgba(24, 31, 41, 0.18) !important;
    transform: translateY(-10px) scale(0.985);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1280 !important;
  }

  body.ipad-area-menu-open .area-tabs {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .area-tab {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  .area-tab-icon {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
  }

  /* La navegación lateral pasa al pie de pantalla para iPad */
  .app-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: var(--ipad-bottom-nav-h) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(122, 18, 52, 0.16) !important;
    box-shadow: 0 -12px 26px rgba(17, 24, 39, 0.08);
    z-index: 1200 !important;
  }

  .nav-item {
    min-height: 100% !important;
  }

  .book-app {
    inset: var(--header-h) 0 var(--ipad-bottom-nav-h) 0 !important;
  }

  .page-content {
    padding-top: 18px !important;
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  .ipad-area-menu-toggle {
    top: calc(var(--header-h) + 8px);
    right: 12px;
    min-height: 46px;
    padding: 0 14px;
  }

  .area-tabs {
    top: calc(var(--header-h) + 62px) !important;
    right: 12px !important;
    width: min(340px, calc(100vw - 24px)) !important;
  }
}


/* Ajuste solicitado: en iPad las pestañas superiores dentro del menú hamburguesa se muestran como listado vertical */
@media (min-width: 641px) and (max-width: 1180px) {
  .area-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .area-tab {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .area-tab-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.12 !important;
  }
}


/* Ajuste adicional: compactar pestañas del menú hamburguesa en iPad para mostrar todas las opciones sin scroll */
@media (min-width: 641px) and (max-width: 1180px) {
  .area-tabs {
    gap: 6px !important;
    padding: 10px !important;
    max-height: calc(100dvh - var(--header-h) - 86px) !important;
    overflow: hidden !important;
  }

  .area-tab {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  .area-tab-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  .area-tabs {
    gap: 5px !important;
    padding: 8px !important;
  }

  .area-tab {
    min-height: 42px !important;
    padding: 7px 9px !important;
    gap: 8px !important;
  }

  .area-tab-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 0.86rem !important;
    line-height: 1.02 !important;
  }
}


/* Rediseño definitivo iPad: menú de áreas como ventana emergente con cards */
.ipad-area-menu-modal-head,
.ipad-area-menu-close {
  display: none;
}

@media (min-width: 641px) and (max-width: 1180px) {
  .ipad-area-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: fixed !important;
    top: calc(var(--header-h) + 10px) !important;
    right: 16px !important;
    z-index: 1300 !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(155,34,71,.20) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--guinda) !important;
    box-shadow: 0 12px 26px rgba(23,27,33,.12) !important;
    font-weight: 900 !important;
  }

  .ipad-area-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1240 !important;
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }

  body.ipad-area-menu-open .ipad-area-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .area-tabs {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(820px, calc(100vw - 44px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 120px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    align-content: start !important;
    padding: 18px !important;
    border: 1px solid rgba(155,34,71,.18) !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 34px 90px rgba(23,27,33,.28) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
    transform: translate(-50%, -48%) scale(.96) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1280 !important;
  }

  body.ipad-area-menu-open .area-tabs {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .ipad-area-menu-modal-head {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 2px 2px 10px 2px !important;
    border-bottom: 1px solid rgba(155,34,71,.14) !important;
  }

  .ipad-area-menu-modal-title {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .ipad-area-menu-modal-title span {
    color: #1e5b4f !important;
    font-weight: 950 !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .ipad-area-menu-modal-title strong {
    color: var(--guinda) !important;
    font-size: clamp(20px, 2.4vw, 30px) !important;
    line-height: 1.05 !important;
  }

  .ipad-area-menu-close {
    display: inline-grid !important;
    place-items: center !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(155,34,71,.20) !important;
    border-radius: 999px !important;
    background: var(--guinda) !important;
    color: #fff !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 24px rgba(155,34,71,.20) !important;
  }

  .area-tab {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(72px, 8dvh, 86px) !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(155,34,71,.14) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #fff, #fff9fb) !important;
    box-shadow: 0 12px 26px rgba(23,27,33,.07) !important;
    text-align: left !important;
  }

  .area-tab:hover,
  .area-tab.active {
    transform: translateY(-1px) !important;
    color: var(--guinda) !important;
    background: linear-gradient(180deg, #fff7fa, #fff) !important;
    border-color: rgba(155,34,71,.30) !important;
  }

  .area-tab-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    background: rgba(155,34,71,.09) !important;
    border: 1px solid rgba(155,34,71,.16) !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 27px !important;
    height: 27px !important;
    object-fit: contain !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.08 !important;
    font-size: clamp(14px, 1.55vw, 18px) !important;
    font-weight: 950 !important;
  }

  .app-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: var(--ipad-bottom-nav-h, 84px) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(155,34,71,.16) !important;
    box-shadow: 0 -12px 26px rgba(17, 24, 39, 0.08) !important;
    z-index: 1200 !important;
  }

  .book-app {
    inset: var(--header-h) 0 var(--ipad-bottom-nav-h, 84px) 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  .area-tabs {
    width: min(640px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 92px) !important;
    gap: 9px !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }

  .area-tab {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: clamp(58px, 7dvh, 68px) !important;
    padding: 9px 11px !important;
    gap: 9px !important;
    border-radius: 18px !important;
  }

  .area-tab-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 13px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 23px !important;
    height: 23px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 14px !important;
    line-height: 1.04 !important;
  }

  .ipad-area-menu-modal-head {
    padding-bottom: 8px !important;
  }

  .ipad-area-menu-close {
    min-height: 38px !important;
    padding: 7px 12px !important;
  }
}


/* iPad: ventana de áreas sin botón interno de cierre; el botón hamburguesa conserva apertura/cierre */
@media (min-width: 641px) and (max-width: 1180px) {
  .ipad-area-menu-modal-head {
    justify-content: center !important;
    text-align: center !important;
  }

  .ipad-area-menu-modal-title {
    justify-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  #ipadAreaMenuClose,
  .ipad-area-menu-close {
    display: none !important;
  }
}


/* ===== Corrección tablet 11": layout real de tablet, navegación inferior y menú emergente centrado ===== */
/* Aplica a tablets Android/iPad de 11" en vertical u horizontal, incluyendo viewports de hasta 1366px. */
@media (min-width: 641px) and (max-width: 1366px) {
  :root {
    --tablet11-bottom-nav-h: 86px;
  }

  html,
  body {
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--header-h) !important;
    z-index: 1220 !important;
    padding: 0 18px !important;
  }

  .app-header .logo-left,
  .app-header .logo-right {
    min-width: 0 !important;
  }

  .app-header .brand-title small,
  .app-header .header-center span,
  .app-header .header-center strong {
    white-space: normal !important;
  }

  /* Menú inferior: evita que los botones se acumulen en la esquina superior izquierda. */
  .app-nav {
    display: grid !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(var(--tablet11-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    grid-auto-flow: column !important;
    grid-auto-rows: unset !important;
    gap: 8px !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid rgba(155,34,71,.18) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: 0 -14px 32px rgba(23,27,33,.10) !important;
    z-index: 1210 !important;
    transform: none !important;
  }

  .app-nav .nav-item,
  .nav-item {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  .app-nav .nav-item.active,
  .app-nav .nav-item:hover {
    transform: translateY(-1px) !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    display: block !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* El contenido queda entre header y navegación inferior, sin reservar espacio para barra superior de áreas. */
  .book-app {
    position: fixed !important;
    inset: var(--header-h) 0 calc(var(--tablet11-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) 0 !important;
    width: 100vw !important;
    height: auto !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: clamp(10px, 1.4vw, 18px) !important;
    perspective: none !important;
  }

  .book-pages,
  .page {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .page {
    border-radius: 26px !important;
  }

  .page-content {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: clamp(14px, 1.6vw, 22px) !important;
  }

  /* Botón hamburguesa visible para abrir/cerrar áreas en tablet 11". */
  .ipad-area-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: fixed !important;
    top: calc(var(--header-h) + 12px) !important;
    right: 18px !important;
    z-index: 1320 !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(155,34,71,.20) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.97) !important;
    color: var(--guinda) !important;
    box-shadow: 0 12px 26px rgba(23,27,33,.13) !important;
    font-weight: 950 !important;
  }

  .ipad-area-menu-toggle__icon {
    width: 20px !important;
    height: 16px !important;
    display: inline-grid !important;
    align-content: center !important;
    gap: 4px !important;
  }

  .ipad-area-menu-toggle__icon span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  body.ipad-area-menu-open .ipad-area-menu-toggle__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.ipad-area-menu-open .ipad-area-menu-toggle__icon span:nth-child(2) {
    opacity: 0 !important;
  }

  body.ipad-area-menu-open .ipad-area-menu-toggle__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  .ipad-area-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1260 !important;
    background: rgba(15,23,42,.34) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.ipad-area-menu-open .ipad-area-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Áreas como ventana emergente centrada con cards: no se muestra como barra superior ni se amontona. */
  .area-tabs {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(840px, calc(100vw - 44px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 120px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: 12px !important;
    padding: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(155,34,71,.18) !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 34px 90px rgba(23,27,33,.28) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transform: translate(-50%, -48%) scale(.96) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1290 !important;
  }

  body.ipad-area-menu-open .area-tabs {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .ipad-area-menu-modal-head {
    grid-column: 1 / -1 !important;
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 2px !important;
    padding: 0 4px 8px 4px !important;
    border-bottom: 1px solid rgba(155,34,71,.14) !important;
  }

  .ipad-area-menu-modal-title {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .ipad-area-menu-modal-title span {
    color: #1e5b4f !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  .ipad-area-menu-modal-title strong {
    color: var(--guinda) !important;
    font-size: clamp(20px, 2.3vw, 30px) !important;
    line-height: 1.05 !important;
  }

  .ipad-area-menu-close,
  #ipadAreaMenuClose {
    display: none !important;
  }

  .area-tab {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(70px, 7dvh, 84px) !important;
    height: auto !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border: 1px solid rgba(155,34,71,.14) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #fff, #fff9fb) !important;
    box-shadow: 0 12px 26px rgba(23,27,33,.07) !important;
    text-align: left !important;
  }

  .area-tab-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    background: rgba(155,34,71,.09) !important;
    border: 1px solid rgba(155,34,71,.16) !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    display: block !important;
    width: 100% !important;
    color: inherit !important;
    font-size: clamp(14px, 1.45vw, 17px) !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --tablet11-bottom-nav-h: 78px;
  }

  .app-header {
    padding: 0 12px !important;
  }

  .area-tabs {
    width: min(650px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 96px) !important;
    gap: 9px !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }

  .area-tab {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: clamp(58px, 6.6dvh, 68px) !important;
    padding: 9px 11px !important;
    gap: 9px !important;
    border-radius: 18px !important;
  }

  .area-tab-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 13px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 22px !important;
    height: 22px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 14px !important;
    line-height: 1.04 !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 10px !important;
  }
}


/* FIX tablet 11": capas clicables del botón hamburguesa */
@media (min-width: 641px) and (max-width: 1366px) {
  #ipadAreaMenuToggle.ipad-area-menu-toggle {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 5000 !important;
  }

  #ipadAreaMenuToggle.ipad-area-menu-toggle * {
    pointer-events: none !important;
  }

  body.ipad-area-menu-open #ipadAreaMenuToggle.ipad-area-menu-toggle {
    z-index: 5001 !important;
  }

  #ipadAreaMenuBackdrop.ipad-area-menu-backdrop {
    pointer-events: none !important;
  }

  body.ipad-area-menu-open #ipadAreaMenuBackdrop.ipad-area-menu-backdrop {
    pointer-events: auto !important;
  }

  body.ipad-area-menu-open #areaTabs.area-tabs {
    pointer-events: auto !important;
  }
}


/* ===== Tablet 11 sin hamburguesa: pestañas de área superiores + navegación inferior ===== */
@media (min-width: 641px) and (max-width: 1366px) {
  :root {
    --tablet11-area-tabs-h: 66px;
    --tablet11-bottom-nav-h: 86px;
  }

  html,
  body {
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body {
    padding: 0 !important;
  }

  .app-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--header-h) !important;
    z-index: 1220 !important;
    padding: 0 18px !important;
  }

  .ipad-area-menu-toggle,
  .ipad-area-menu-backdrop,
  .ipad-area-menu-modal-head,
  .ipad-area-menu-close,
  #ipadAreaMenuToggle,
  #ipadAreaMenuBackdrop,
  #ipadAreaMenuClose {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.ipad-area-menu-open {
    overflow: hidden !important;
  }

  /* Pestañas de área como barra superior tipo laptop, no menú emergente. */
  .area-tabs {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--tablet11-area-tabs-h) !important;
    max-height: var(--tablet11-area-tabs-h) !important;
    min-height: var(--tablet11-area-tabs-h) !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: stretch !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(155,34,71,.16) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 22px rgba(23,27,33,.06) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1215 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .area-tab {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, auto) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 6px !important;
    border: 1px solid rgba(155,34,71,.16) !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    text-align: center !important;
    transform: none !important;
  }

  .area-tab.active,
  .area-tab:hover {
    color: var(--guinda) !important;
    background: var(--guinda-soft) !important;
    border-color: rgba(155,34,71,.28) !important;
    transform: translateY(-1px) !important;
  }

  .area-tab-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    background: rgba(155,34,71,.08) !important;
    border: 1px solid rgba(155,34,71,.14) !important;
    box-shadow: none !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: clamp(10px, 1.1vw, 13px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Navegación principal inferior conservada. */
  .app-nav {
    display: grid !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(var(--tablet11-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    grid-auto-rows: unset !important;
    grid-auto-flow: column !important;
    gap: 8px !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid rgba(155,34,71,.18) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: 0 -14px 32px rgba(23,27,33,.10) !important;
    z-index: 1210 !important;
    transform: none !important;
  }

  .app-nav .nav-item,
  .nav-item {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    display: block !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .book-app {
    position: fixed !important;
    inset: calc(var(--header-h) + var(--tablet11-area-tabs-h)) 0 calc(var(--tablet11-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow: hidden !important;
    padding: clamp(10px, 1.4vw, 18px) !important;
    perspective: none !important;
  }

  .book-pages,
  .page {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .page {
    border-radius: 26px !important;
  }

  .page-content {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: clamp(14px, 1.6vw, 22px) !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --tablet11-area-tabs-h: 62px;
    --tablet11-bottom-nav-h: 78px;
  }

  .app-header {
    padding: 0 12px !important;
  }

  .area-tabs {
    gap: 5px !important;
    padding: 6px 7px !important;
  }

  .area-tab {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 2px !important;
    padding: 4px 3px !important;
    border-radius: 13px !important;
  }

  .area-tab-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 10px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 16px !important;
    height: 16px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 10px !important;
  }
}


/* ===== Tablet 11": menú principal superior reducido al 50% + pestañas de área debajo ===== */
@media (min-width: 641px) and (max-width: 1366px) {
  :root {
    --tablet11-main-nav-h: 43px;
    --tablet11-area-tabs-h: 66px;
  }

  html, body {
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--header-h) !important;
    z-index: 1240 !important;
    padding: 0 18px !important;
  }

  .ipad-area-menu-toggle,
  .ipad-area-menu-backdrop,
  .ipad-area-menu-modal-head,
  .ipad-area-menu-close,
  #ipadAreaMenuToggle,
  #ipadAreaMenuBackdrop,
  #ipadAreaMenuClose {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-nav {
    display: grid !important;
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--tablet11-main-nav-h) !important;
    min-height: var(--tablet11-main-nav-h) !important;
    max-height: var(--tablet11-main-nav-h) !important;
    padding: 3px 8px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    grid-auto-rows: unset !important;
    grid-auto-flow: column !important;
    gap: 6px !important;
    background: rgba(255,255,255,.985) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(155,34,71,.16) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: 0 8px 22px rgba(23,27,33,.055) !important;
    z-index: 1230 !important;
    transform: none !important;
  }

  .app-nav .nav-item,
  .nav-item {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 2px 4px !important;
    border-radius: 11px !important;
    transform: none !important;
  }

  .app-nav .nav-item.active,
  .app-nav .nav-item:hover {
    transform: translateY(-1px) !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    display: block !important;
    max-width: 100% !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .area-tabs {
    position: fixed !important;
    top: calc(var(--header-h) + var(--tablet11-main-nav-h)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--tablet11-area-tabs-h) !important;
    min-height: var(--tablet11-area-tabs-h) !important;
    max-height: var(--tablet11-area-tabs-h) !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: stretch !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(155,34,71,.16) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 22px rgba(23,27,33,.05) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1220 !important;
  }

  .area-tab {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, auto) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 6px !important;
    border: 1px solid rgba(155,34,71,.16) !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    text-align: center !important;
    transform: none !important;
  }

  .area-tab.active,
  .area-tab:hover {
    color: var(--guinda) !important;
    background: var(--guinda-soft) !important;
    border-color: rgba(155,34,71,.28) !important;
    transform: translateY(-1px) !important;
  }

  .area-tab-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    background: rgba(155,34,71,.08) !important;
    border: 1px solid rgba(155,34,71,.14) !important;
    box-shadow: none !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: clamp(10px, 1.1vw, 13px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .book-app {
    position: fixed !important;
    inset: calc(var(--header-h) + var(--tablet11-main-nav-h) + var(--tablet11-area-tabs-h)) 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow: hidden !important;
    padding: clamp(10px, 1.4vw, 18px) !important;
    perspective: none !important;
  }

  .book-pages,
  .page {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .page {
    border-radius: 26px !important;
  }

  .page-content {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: clamp(14px, 1.6vw, 22px) !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --tablet11-main-nav-h: 39px;
    --tablet11-area-tabs-h: 62px;
  }

  .app-header {
    padding: 0 12px !important;
  }

  .app-nav {
    padding: 2px 6px !important;
    gap: 4px !important;
  }

  .app-nav .nav-item,
  .nav-item {
    gap: 3px !important;
    padding: 2px 3px !important;
    border-radius: 10px !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 13px !important;
    height: 13px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 7.5px !important;
    line-height: .98 !important;
  }

  .area-tabs {
    gap: 5px !important;
    padding: 6px 7px !important;
  }

  .area-tab {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 2px !important;
    padding: 4px 3px !important;
    border-radius: 13px !important;
  }

  .area-tab-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 10px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 16px !important;
    height: 16px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }
}


/* ===== Tablet 11": bloque central de botones data-page superior, +10% altura y separación de 4px con áreas ===== */
@media (min-width: 641px) and (max-width: 1366px) {
  :root {
    --tablet11-main-nav-h: 48px;      /* +10% aprox. sobre 43px */
    --tablet11-area-tabs-h: 66px;
    --tablet11-nav-area-gap: 4px;
  }

  .app-nav {
    top: var(--header-h) !important;
    left: 20vw !important;
    right: 20vw !important;
    bottom: auto !important;
    width: 60vw !important;
    max-width: 60vw !important;
    height: var(--tablet11-main-nav-h) !important;
    min-height: var(--tablet11-main-nav-h) !important;
    max-height: var(--tablet11-main-nav-h) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 3px !important;
    padding: 4px 6px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 0 0 18px 18px !important;
    border-left: 1px solid rgba(155,34,71,.12) !important;
    border-right: 1px solid rgba(155,34,71,.12) !important;
  }

  .app-nav .nav-item,
  .nav-item {
    justify-self: center !important;
    align-self: center !important;
    justify-content: center !important;
    align-content: center !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 2px 3px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 8.8px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .area-tabs {
    top: calc(var(--header-h) + var(--tablet11-main-nav-h) + var(--tablet11-nav-area-gap)) !important;
  }

  .book-app {
    inset: calc(var(--header-h) + var(--tablet11-main-nav-h) + var(--tablet11-nav-area-gap) + var(--tablet11-area-tabs-h)) 0 0 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --tablet11-main-nav-h: 43px;      /* +10% aprox. sobre 39px */
    --tablet11-area-tabs-h: 62px;
    --tablet11-nav-area-gap: 4px;
  }

  .app-nav {
    left: 20vw !important;
    right: 20vw !important;
    width: 60vw !important;
    max-width: 60vw !important;
    gap: 2px !important;
    padding: 3px 5px !important;
    border-radius: 0 0 15px 15px !important;
  }

  .app-nav .nav-item,
  .nav-item {
    gap: 2px !important;
    padding: 2px !important;
    border-radius: 9px !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 7.8px !important;
    line-height: .98 !important;
  }
}


/* =========================================================
   Rediseño PICAM: lectura extendida, paleta sobria y navegación superior en laptop/tablet
   ========================================================= */
:root {
  --guinda: #245b5f !important;
  --guinda-2: #1d4b50 !important;
  --guinda-soft: #e6f1f1 !important;
  --verde: #376a5f !important;
  --dorado: #8a6f34 !important;
  --ink: #1f2933 !important;
  --muted: #5b6773 !important;
  --bg: #f5f7f8 !important;
  --surface: #ffffff !important;
  --line: rgba(31, 41, 51, .13) !important;
  --shadow: 0 16px 38px rgba(31, 41, 51, .08) !important;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif !important;
  --top-main-nav-h: 52px;
  --top-area-tabs-h: 68px;
}

html,
body {
  font-family: var(--font) !important;
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(36,91,95,.06), transparent 28%),
    radial-gradient(circle at 90% 100%, rgba(138,111,52,.05), transparent 30%),
    #f5f7f8 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

p,
li,
small,
label,
button,
input,
select,
textarea,
.page-content,
.manual-area-content {
  font-family: var(--font) !important;
}

p,
li,
.manual-area-content p,
.page-content p {
  font-size: clamp(15px, 1.03vw, 17px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
.brand-title strong,
.header-center strong {
  letter-spacing: -.015em !important;
  line-height: 1.12 !important;
}

.app-header {
  background: rgba(255,255,255,.97) !important;
  border-bottom-color: rgba(36,91,95,.16) !important;
  box-shadow: 0 10px 28px rgba(31,41,51,.06) !important;
}

.app-header::after {
  background: linear-gradient(90deg, #245b5f, #8a6f34, #376a5f) !important;
}

/* Laptop/PC: la barra que era lateral ahora se comporta como la versión tablet/iPad. */
@media (min-width: 901px) {
  :root {
    --top-main-nav-h: 52px;
    --top-area-tabs-h: 70px;
  }

  .app-header {
    padding: 0 28px !important;
  }

  .app-nav {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 20vw !important;
    right: 20vw !important;
    bottom: auto !important;
    width: 60vw !important;
    height: var(--top-main-nav-h) !important;
    min-height: var(--top-main-nav-h) !important;
    max-height: var(--top-main-nav-h) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    grid-auto-rows: unset !important;
    grid-auto-flow: column !important;
    gap: 4px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(36,91,95,.14) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 26px rgba(31,41,51,.07) !important;
    z-index: 1230 !important;
    transform: none !important;
  }

  .app-nav .nav-item,
  .nav-item {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 3px 5px !important;
    border-radius: 12px !important;
    transform: none !important;
  }

  .app-nav .nav-item.active,
  .app-nav .nav-item:hover {
    background: var(--guinda-soft) !important;
    border-color: rgba(36,91,95,.24) !important;
    color: var(--guinda) !important;
    transform: translateY(-1px) !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 9.5px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .area-tabs {
    position: fixed !important;
    top: calc(var(--header-h) + var(--top-main-nav-h) + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: var(--top-area-tabs-h) !important;
    min-height: var(--top-area-tabs-h) !important;
    max-height: var(--top-area-tabs-h) !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid rgba(36,91,95,.14) !important;
    box-shadow: 0 8px 22px rgba(31,41,51,.05) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 1220 !important;
    overflow: hidden !important;
  }

  .book-app {
    position: fixed !important;
    inset: calc(var(--header-h) + var(--top-main-nav-h) + 4px + var(--top-area-tabs-h)) 0 0 0 !important;
    padding: clamp(12px, 1.4vw, 20px) !important;
    overflow: hidden !important;
    perspective: none !important;
  }
}

/* Mantener el mismo patrón superior en tablet. */
@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --tablet11-main-nav-h: 48px !important;
    --tablet11-area-tabs-h: 64px !important;
    --tablet11-nav-area-gap: 4px !important;
  }

  .app-nav {
    top: var(--header-h) !important;
    left: 20vw !important;
    right: 20vw !important;
    width: 60vw !important;
    height: var(--tablet11-main-nav-h) !important;
    min-height: var(--tablet11-main-nav-h) !important;
    max-height: var(--tablet11-main-nav-h) !important;
    border-radius: 0 0 16px 16px !important;
  }

  .area-tabs {
    top: calc(var(--header-h) + var(--tablet11-main-nav-h) + 4px) !important;
  }

  .book-app {
    inset: calc(var(--header-h) + var(--tablet11-main-nav-h) + 4px + var(--tablet11-area-tabs-h)) 0 0 0 !important;
  }
}

/* Tabs de áreas con menos saturación visual. */
.area-tab {
  border-color: rgba(36,91,95,.15) !important;
  background: #fff !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.area-tab.active,
.area-tab:hover {
  color: var(--guinda) !important;
  background: var(--guinda-soft) !important;
  border-color: rgba(36,91,95,.30) !important;
}

.area-tab-icon {
  background: rgba(36,91,95,.08) !important;
  border-color: rgba(36,91,95,.14) !important;
}

/* Contención y lectura: menos bloques densos, más aire y scroll interno controlado. */
.page {
  border-radius: 26px !important;
  border-color: rgba(31,41,51,.12) !important;
  box-shadow: 0 18px 44px rgba(31,41,51,.08) !important;
}

.page-content,
.manual-area-content,
.area-standard-content,
.doc-platform-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  gap: clamp(14px, 1.4vw, 22px) !important;
  padding: clamp(16px, 1.7vw, 26px) !important;
}

.card-mosaic,
.card-mosaic.three,
.phase-board,
.manual-section-grid,
.manual-block.two-cols,
.manual-concept-grid,
.area-standard-intro,
.area-standard-process,
.area-standard-concept-grid,
.refined-doc-grid,
.psych-overview-grid,
.psych-tool-grid,
.psych-calculator-grid,
.psych-forms-grid,
.nutri-visual-grid,
.integralx-area-map,
.recipe-steps,
.biblio-grid {
  gap: clamp(12px, 1.2vw, 18px) !important;
}

.module-card,
.page00-section,
.manual-section-card,
.psych-tool-card,
.psych-calculator-card,
.psych-forms-grid article,
.area-standard-card,
.integralx-area-card,
.readability-block,
.recipe-steps article,
.biblio-grid article {
  border-radius: 22px !important;
  border: 1px solid rgba(31,41,51,.12) !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(31,41,51,.055) !important;
  padding: clamp(14px, 1.35vw, 20px) !important;
}

/* Bloque interdisciplinario directo en cada área */
.interdisciplinary-direct-links {
  display: grid !important;
  gap: 14px !important;
  background: linear-gradient(180deg, #fff, #f3f8f8) !important;
}

.interdisciplinary-head {
  display: grid !important;
  gap: 6px !important;
}

.interdisciplinary-head > span {
  color: #8a6f34 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.interdisciplinary-head h3 {
  margin: 0 !important;
  color: #1d4b50 !important;
  font-size: clamp(20px, 1.5vw, 28px) !important;
}

.interdisciplinary-head p {
  margin: 0 !important;
  max-width: 980px !important;
}

.inline-route-btn {
  justify-self: start !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(36,91,95,.22) !important;
  border-radius: 999px !important;
  background: #e6f1f1 !important;
  color: #1d4b50 !important;
  font-weight: 900 !important;
}

.recipe-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

.recipe-steps article {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 12px !important;
}

.recipe-number {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #245b5f !important;
  color: white !important;
  font-weight: 950 !important;
}

.recipe-steps h4,
.biblio-grid h4 {
  margin: 0 0 6px !important;
  color: #1d4b50 !important;
  font-size: 16px !important;
}

.recipe-steps p,
.biblio-grid p {
  margin: 0 !important;
  color: #586673 !important;
  font-size: 15px !important;
}

/* Bibliografía Psicología */
.psych-biblio {
  display: grid !important;
  gap: 14px !important;
  background: linear-gradient(180deg, #fff, #f8f4e9) !important;
}

.biblio-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

/* Responsivo para evitar amontonamiento. */
@media (max-width: 1180px) {
  .recipe-steps,
  .biblio-grid {
    grid-template-columns: 1fr !important;
  }

  p,
  li,
  .manual-area-content p,
  .page-content p {
    font-size: 15.5px !important;
  }
}

@media (max-width: 760px) {
  .recipe-steps article {
    grid-template-columns: 34px minmax(0,1fr) !important;
  }

  .recipe-number {
    width: 34px !important;
    height: 34px !important;
  }
}


/* =========================================================
   Ajustes finales solicitados: identidad, áreas 4/3, zoom por imagen y navegación inferior
   ========================================================= */
:root {
  --defensa-red: #9b2247;
  --clinical-primary: #245b5f;
  --clinical-primary-2: #1d4b50;
  --clinical-soft: #e6f1f1;
  --clinical-ink: #1f2933;
  --clinical-muted: #586673;
  --header-h: 82px !important;
  --area-tabs-h-final: 58px;
  --bottom-main-nav-h-final: 58px;
  --read-size: 16px;
}

/* Mantener el rojo institucional en PICAM y Secretaría, sin volver roja toda la interfaz. */
.defensa-red-text,
.picam-entry-card h1,
#picam-entry-title,
.brand-title strong,
.header-center span {
  color: var(--defensa-red) !important;
}

.header-center strong,
.brand-title small {
  color: var(--clinical-ink) !important;
}

.app-header {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  padding: 0 22px !important;
}

.logo-box {
  width: 68px !important;
  height: 58px !important;
  border-radius: 14px !important;
  padding: 5px !important;
}

.logo-circle {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  padding: 1px !important;
}

.logo-circle img {
  width: 56px !important;
  height: 56px !important;
}

.logo-wide {
  width: clamp(142px, 12vw, 178px) !important;
  height: 58px !important;
}

.logo-hmz {
  width: 58px !important;
  height: 58px !important;
}

.brand-title strong {
  font-size: clamp(19px, 1.45vw, 25px) !important;
}

.brand-title small,
.header-center strong {
  font-size: clamp(12px, .95vw, 16px) !important;
  line-height: 1.08 !important;
}

.header-center span {
  font-size: 10.5px !important;
  letter-spacing: .10em !important;
}

/* Barra principal: se retira de arriba y se mueve abajo en laptop/PC y tablet. */
@media (min-width: 641px) {
  .app-nav {
    position: fixed !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    width: min(720px, 72vw) !important;
    height: var(--bottom-main-nav-h-final) !important;
    min-height: var(--bottom-main-nav-h-final) !important;
    max-height: var(--bottom-main-nav-h-final) !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    grid-auto-rows: unset !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(36,91,95,.18) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 -8px 28px rgba(31,41,51,.12) !important;
    z-index: 1230 !important;
  }

  .app-nav .nav-item,
  .nav-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px 3px !important;
    border-radius: 15px !important;
    transform: none !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 19px !important;
    height: 19px !important;
    margin: 0 auto !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .app-nav .nav-item.active,
  .app-nav .nav-item:hover {
    color: var(--clinical-primary-2) !important;
    background: var(--clinical-soft) !important;
    border-color: rgba(36,91,95,.26) !important;
    transform: translateY(-1px) !important;
  }

  /* Áreas directamente debajo del encabezado para recuperar espacio vertical. */
  .area-tabs {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--area-tabs-h-final) !important;
    min-height: var(--area-tabs-h-final) !important;
    max-height: var(--area-tabs-h-final) !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 6px 12px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(36,91,95,.15) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 6px 18px rgba(31,41,51,.055) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 1220 !important;
  }

  .area-tab {
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, auto) !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 5px !important;
    border-radius: 13px !important;
  }

  .area-tab-icon {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    border-radius: 10px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 16px !important;
    height: 16px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: clamp(9.5px, .82vw, 12px) !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .book-app {
    position: fixed !important;
    inset: calc(var(--header-h) + var(--area-tabs-h-final)) 0 calc(var(--bottom-main-nav-h-final) + 22px) 0 !important;
    padding: clamp(10px, 1.2vw, 18px) !important;
    overflow: hidden !important;
    perspective: none !important;
  }
}

/* Sección de áreas: mantener ratio visual 4 + 3 y centrado en laptop y tablet. */
@media (min-width: 641px) {
  .page[data-page="disciplinas"] .area-role-grid,
  .page[data-page="disciplinas"] .area-flip-grid,
  .area-role-grid.seven-balanced {
    width: min(1180px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.4vw, 22px) !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  .page[data-page="disciplinas"] .area-role-grid > *,
  .area-role-grid.seven-balanced > * {
    grid-column: span 3 !important;
    width: 100% !important;
    min-height: 230px !important;
    height: 100% !important;
  }

  .page[data-page="disciplinas"] .area-role-grid > *:nth-child(5),
  .area-role-grid.seven-balanced > *:nth-child(5) {
    grid-column: 2 / span 3 !important;
  }

  .page[data-page="disciplinas"] .area-role-grid > *:nth-child(6),
  .area-role-grid.seven-balanced > *:nth-child(6) {
    grid-column: 5 / span 3 !important;
  }

  .page[data-page="disciplinas"] .area-role-grid > *:nth-child(7),
  .area-role-grid.seven-balanced > *:nth-child(7) {
    grid-column: 8 / span 3 !important;
  }

  .area-role-flip-card,
  .info-flip-card {
    min-height: 230px !important;
  }
}

/* En móvil pequeño se permite apilar para no romper lectura. */
@media (max-width: 640px) {
  .page[data-page="disciplinas"] .area-role-grid,
  .area-role-grid.seven-balanced {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Simetría general de contenedores y texto estandarizado. */
.page-content,
.manual-area-content,
.area-standard-content,
.doc-platform-content {
  font-size: var(--read-size) !important;
  line-height: 1.56 !important;
}

.page-content p,
.manual-area-content p,
.area-standard-content p,
.doc-platform-content p,
.page-content li,
.manual-area-content li,
.area-standard-content li,
.doc-platform-content li,
.module-card p,
.manual-section-card p,
.area-standard-card p,
.recipe-steps p,
.biblio-grid p,
.flip-back p,
.flip-front small,
.info-flip-card small,
.info-flip-card p {
  font-size: var(--read-size) !important;
  line-height: 1.56 !important;
}

.module-card,
.page00-section,
.manual-section-card,
.psych-tool-card,
.psych-calculator-card,
.psych-forms-grid article,
.area-standard-card,
.integralx-area-card,
.readability-block,
.recipe-steps article,
.biblio-grid article,
.info-flip-card,
.phase-flip-card,
.flip-card {
  border-radius: 22px !important;
  padding: clamp(15px, 1.25vw, 20px) !important;
  border: 1px solid rgba(31,41,51,.12) !important;
  box-shadow: 0 10px 26px rgba(31,41,51,.055) !important;
}

/* Ampliación por hover/click directo en imagen: sin botón visible. */
.image-expand-btn,
.auto-image-expand-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.picam-zoomable-image,
section.page figure img:not(.area-svg-icon),
section.page .doc-visual-card > img,
section.page .visual-doc-card > img,
section.page .document-page img,
section.page .terapia-infographic-card figure > img,
section.page .terapia-algoritmo-image-card figure > img {
  cursor: zoom-in !important;
}

.picam-zoomable-image:hover,
section.page figure img:not(.area-svg-icon):hover {
  filter: brightness(.98) contrast(1.02) !important;
}

/* Ajuste de pantalla inicial sin alterar el logo: letras PICAM en rojo Defensa. */
.picam-entry-card h1,
#picam-entry-title {
  color: var(--defensa-red) !important;
}

.picam-entry-kicker {
  color: var(--clinical-primary-2) !important;
}

.picam-entry-access {
  background: var(--clinical-primary) !important;
  color: #fff !important;
}

/* Tablets: mismo comportamiento que laptop/PC. */
@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --header-h: 78px !important;
    --area-tabs-h-final: 56px;
    --bottom-main-nav-h-final: 54px;
    --read-size: 15.5px;
  }

  .logo-box {
    width: 60px !important;
    height: 52px !important;
  }

  .logo-circle {
    width: 52px !important;
    height: 52px !important;
  }

  .logo-circle img {
    width: 50px !important;
    height: 50px !important;
  }

  .logo-wide {
    width: 132px !important;
    height: 52px !important;
  }

  .logo-hmz {
    width: 52px !important;
    height: 52px !important;
  }

  .app-nav {
    width: min(690px, 84vw) !important;
    bottom: 8px !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 17px !important;
    height: 17px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 9px !important;
  }

  .area-tabs {
    gap: 5px !important;
    padding: 5px 8px !important;
  }

  .area-tab {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 2px !important;
  }

  .area-tab-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .area-tab-icon img.area-svg-icon,
  .area-tab .area-tab-icon img {
    width: 15px !important;
    height: 15px !important;
  }

  .area-tab-label,
  .area-tab span.area-tab-label {
    font-size: 9px !important;
  }

  .page[data-page="disciplinas"] .area-role-grid > *,
  .area-role-grid.seven-balanced > * {
    min-height: 210px !important;
  }
}


/* =========================================================
   Ajuste final: barra superior compacta, nutrición simétrica y títulos sin rojo
   ========================================================= */
:root {
  --defensa-red: #9b2247;
  --clinical-primary: #245b5f;
  --clinical-primary-2: #1d4b50;
  --clinical-soft: #e6f1f1;
  --clinical-ink: #1f2933;
  --clinical-muted: #3f4c56;
  --header-h: 58px !important;
  --bottom-main-nav-h-final: 58px;
  --area-tabs-h-final: 56px;
  --read-size: 16px;
}

/* Barra superior con la misma altura que el menú inferior. */
.app-header {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  padding: 0 16px !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.header-logo {
  gap: 8px !important;
  min-width: 0 !important;
}

.logo-box {
  width: 46px !important;
  height: 42px !important;
  border-radius: 10px !important;
  padding: 3px !important;
  box-shadow: 0 4px 12px rgba(31,41,51,.055) !important;
}

.logo-circle {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.logo-circle img {
  width: 40px !important;
  height: 40px !important;
}

.logo-wide {
  width: clamp(108px, 9vw, 138px) !important;
  height: 42px !important;
  padding: 2px 5px !important;
}

.logo-hmz {
  width: 42px !important;
  height: 42px !important;
  padding: 2px !important;
}

.brand-title {
  gap: 0 !important;
}

.brand-title strong {
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1 !important;
}

.brand-title small {
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1.04 !important;
}

.header-center {
  gap: 1px !important;
}

.header-center span {
  font-size: clamp(8px, .62vw, 10px) !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
}

.header-center strong {
  font-size: clamp(10px, .78vw, 13px) !important;
  line-height: 1.05 !important;
}

.logo-right {
  gap: 6px !important;
}

/* Conservación exclusiva del rojo institucional. */
.picam-entry-card h1,
#picam-entry-title,
.brand-title strong,
.header-center span {
  color: var(--defensa-red) !important;
}

/* Todo título/subtítulo dentro de páginas debe ser verde, no rojo. */
.book-app :is(h1, h2, h3, h4, h5, h6),
.book-app :is(.kicker, .eyebrow, .section-kicker, .manual-kicker, .doc-kicker, .page-kicker),
.book-app :is(.page-heading span, .manual-section-title, .area-standard-title, .interdisciplinary-head > span),
.book-app :is(.flip-back span, .phase-tag, .pill-label, .metric-label),
.page :is(h1, h2, h3, h4, h5, h6),
.page :is(.kicker, .eyebrow, .section-kicker, .manual-kicker, .doc-kicker, .page-kicker) {
  color: var(--clinical-primary-2) !important;
}

.book-app :is(p, li, small, label, td, th),
.page :is(p, li, small, label, td, th) {
  color: var(--clinical-ink) !important;
}

/* Textos secundarios pueden ser gris clínico, nunca rojo. */
.book-app :is(.muted, .subtitle, .caption, figcaption, em),
.page :is(.muted, .subtitle, .caption, figcaption, em) {
  color: var(--clinical-muted) !important;
}

/* Excepciones funcionales: números/badges conservan contraste. */
.recipe-number,
.psych-flow-grid article span,
.flow-step-number,
.step-number,
.badge-number,
[class*="number"] {
  color: #fff !important;
}

/* Acentos/botones activos en verde clínico. */
.app-nav .nav-item.active,
.app-nav .nav-item:hover,
.area-tab.active,
.area-tab:hover {
  color: var(--clinical-primary-2) !important;
  background: var(--clinical-soft) !important;
  border-color: rgba(36,91,95,.26) !important;
}

.inline-route-btn,
.pill-action,
.primary-action,
button.primary {
  background: var(--clinical-primary) !important;
  border-color: var(--clinical-primary) !important;
  color: #fff !important;
}

/* Recalcular layout con barra superior compacta. */
@media (min-width: 641px) {
  .area-tabs {
    top: var(--header-h) !important;
    height: var(--area-tabs-h-final) !important;
    min-height: var(--area-tabs-h-final) !important;
    max-height: var(--area-tabs-h-final) !important;
    padding: 5px 10px !important;
  }

  .book-app {
    inset: calc(var(--header-h) + var(--area-tabs-h-final)) 0 calc(var(--bottom-main-nav-h-final) + 22px) 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  :root {
    --header-h: 56px !important;
    --area-tabs-h-final: 54px;
    --bottom-main-nav-h-final: 56px;
    --read-size: 15.8px;
  }

  .app-header {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  .logo-box {
    width: 40px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  .logo-circle {
    width: 38px !important;
    height: 38px !important;
  }

  .logo-circle img {
    width: 36px !important;
    height: 36px !important;
  }

  .logo-wide {
    width: 104px !important;
    height: 38px !important;
  }

  .logo-hmz {
    width: 38px !important;
    height: 38px !important;
  }

  .brand-title strong {
    font-size: 14px !important;
  }

  .brand-title small {
    font-size: 8.5px !important;
  }

  .header-center span {
    font-size: 7.8px !important;
  }

  .header-center strong {
    font-size: 9.5px !important;
  }
}

/* Nutrición: mediciones clave con tarjetas iguales, título y descripción inicial visibles. */
#nutri-antropometria .nutri-visual-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

#nutri-antropometria .nutri-key-measure-card,
#nutri-antropometria .nutri-flip-visual-card {
  width: 100% !important;
  min-height: 360px !important;
  height: 360px !important;
  max-height: 360px !important;
  display: block !important;
}

#nutri-antropometria .nutri-key-measure-card .flip-front,
#nutri-antropometria .nutri-key-measure-card .flip-back,
#nutri-antropometria .nutri-flip-visual-card .flip-front,
#nutri-antropometria .nutri-flip-visual-card .flip-back {
  min-height: 360px !important;
  height: 360px !important;
  max-height: 360px !important;
  display: grid !important;
  grid-template-rows: 185px auto minmax(48px, auto) auto !important;
  align-content: start !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-key-measure-card figure,
#nutri-antropometria .nutri-flip-visual-card figure {
  width: 100% !important;
  height: 185px !important;
  min-height: 185px !important;
  max-height: 185px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#nutri-antropometria .nutri-key-measure-card img,
#nutri-antropometria .nutri-flip-visual-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

#nutri-antropometria .nutri-key-measure-card h3,
#nutri-antropometria .nutri-key-measure-card h4,
#nutri-antropometria .nutri-key-measure-card strong,
#nutri-antropometria .nutri-flip-visual-card h3,
#nutri-antropometria .nutri-flip-visual-card h4,
#nutri-antropometria .nutri-flip-visual-card strong {
  display: block !important;
  margin: 8px 0 4px 0 !important;
  color: var(--clinical-primary-2) !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
  min-height: 36px !important;
  overflow: visible !important;
}

#nutri-antropometria .nutri-key-measure-card p,
#nutri-antropometria .nutri-key-measure-card small,
#nutri-antropometria .nutri-flip-visual-card p,
#nutri-antropometria .nutri-flip-visual-card small {
  display: block !important;
  color: var(--clinical-ink) !important;
  font-size: 15px !important;
  line-height: 1.34 !important;
  margin: 0 !important;
  max-height: 82px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-key-measure-card em,
#nutri-antropometria .nutri-flip-visual-card em {
  color: var(--clinical-muted) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  align-self: end !important;
}

@media (max-width: 1180px) {
  #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: 1fr !important;
  }

  #nutri-antropometria .nutri-key-measure-card,
  #nutri-antropometria .nutri-flip-visual-card,
  #nutri-antropometria .nutri-key-measure-card .flip-front,
  #nutri-antropometria .nutri-key-measure-card .flip-back,
  #nutri-antropometria .nutri-flip-visual-card .flip-front,
  #nutri-antropometria .nutri-flip-visual-card .flip-back {
    height: auto !important;
    max-height: none !important;
    min-height: 330px !important;
  }
}


/* =========================================================
   Ajuste: reducción 30% de logotipos y contenedores en barra superior
   ========================================================= */
:root {
  --header-h: 58px !important;
}

/* Mantener la barra estable, pero reducir los elementos internos para evitar cortes. */
.app-header {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  align-items: center !important;
}

.header-logo {
  align-items: center !important;
  gap: 6px !important;
  min-height: 0 !important;
}

/* Reducción aproximada del 30% respecto al ajuste anterior. */
.logo-box {
  width: 32px !important;
  height: 29px !important;
  min-width: 32px !important;
  min-height: 29px !important;
  max-width: 32px !important;
  max-height: 29px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.logo-circle {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.logo-circle img {
  width: 27px !important;
  height: 27px !important;
  max-width: 27px !important;
  max-height: 27px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.logo-wide {
  width: clamp(76px, 6.4vw, 97px) !important;
  height: 29px !important;
  min-width: 76px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  padding: 1px 3px !important;
  border-radius: 8px !important;
}

.logo-hmz {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
  padding: 1px !important;
  border-radius: 8px !important;
}

.logo-box img,
.logo-hmz img,
.logo-sedena-mark img,
.logo-wide img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

.logo-right {
  gap: 5px !important;
  align-items: center !important;
  min-height: 0 !important;
}

.brand-title strong {
  font-size: clamp(13px, .92vw, 16px) !important;
  line-height: 1 !important;
}

.brand-title small {
  font-size: clamp(8px, .62vw, 10px) !important;
  line-height: 1 !important;
}

.header-center span {
  font-size: clamp(7.5px, .55vw, 9px) !important;
  line-height: 1 !important;
}

.header-center strong {
  font-size: clamp(9px, .68vw, 11.5px) !important;
  line-height: 1.02 !important;
}

@media (min-width: 641px) and (max-width: 900px) {
  .logo-box {
    width: 28px !important;
    height: 27px !important;
    min-width: 28px !important;
    min-height: 27px !important;
    max-width: 28px !important;
    max-height: 27px !important;
    padding: 1px !important;
    border-radius: 7px !important;
  }

  .logo-circle {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
  }

  .logo-circle img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  .logo-wide {
    width: 73px !important;
    min-width: 73px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
  }

  .logo-hmz {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
  }
}


/* =========================================================
   Corrección: reducción real 20% y logo PICAM centrado dentro de su contenedor
   ========================================================= */
:root {
  --header-h: 58px !important;
}

/* Mantener barra compacta, pero aumentar logos respecto al ajuste de 30%. */
.app-header {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  align-items: center !important;
  overflow: hidden !important;
}

.logo-box {
  width: 37px !important;
  height: 34px !important;
  min-width: 37px !important;
  min-height: 34px !important;
  max-width: 37px !important;
  max-height: 34px !important;
  padding: 2px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}

/* PICAM: centrado explícito, sin desplazamiento ni recorte dentro del círculo. */
.logo-left .logo-circle,
.header-logo.logo-left .logo-circle {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 1px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.logo-left .logo-circle img,
.header-logo.logo-left .logo-circle img {
  width: 31px !important;
  height: 31px !important;
  max-width: 31px !important;
  max-height: 31px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
  display: block !important;
  transform: none !important;
}

.logo-wide {
  width: clamp(86px, 7.2vw, 110px) !important;
  height: 34px !important;
  min-width: 86px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 2px 4px !important;
  border-radius: 9px !important;
}

.logo-hmz {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 1px !important;
  border-radius: 9px !important;
}

.logo-wide img,
.logo-hmz img,
.logo-sedena-mark img,
.logo-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

@media (min-width: 641px) and (max-width: 900px) {
  .logo-box {
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    max-width: 32px !important;
    max-height: 30px !important;
    padding: 1px !important;
    border-radius: 8px !important;
  }

  .logo-left .logo-circle,
  .header-logo.logo-left .logo-circle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    padding: 1px !important;
  }

  .logo-left .logo-circle img,
  .header-logo.logo-left .logo-circle img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  .logo-wide {
    width: 83px !important;
    min-width: 83px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }

  .logo-hmz {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
}


/* =========================================================
   Corrección Psicología/Nutrición: contraste, simetría y contención
   ========================================================= */

/* Psicología: encabezados de matrices/tablas con texto blanco. */
#area-psicologia .psico-data-table thead th,
.page[data-page="area-psicologia"] .psico-data-table thead th,
.page[data-page="area-psicologia"] .psico-table-wrap table thead th,
.page[data-page="area-psicologia"] table thead th {
  background: var(--clinical-primary, #245b5f) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.42) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.page[data-page="area-psicologia"] .psico-data-table thead th *,
.page[data-page="area-psicologia"] table thead th * {
  color: #ffffff !important;
}

/* Nutrición: el encabezado de Antropometría y tamizaje debe ajustarse al texto, sin exceso inferior. */
#nutri-antropometria .nutri-section-head {
  display: grid !important;
  gap: 6px !important;
  padding: clamp(14px, 1.15vw, 18px) clamp(16px, 1.35vw, 22px) !important;
  margin: 0 0 12px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
}

#nutri-antropometria .nutri-section-head .kicker,
#nutri-antropometria .nutri-section-head h3,
#nutri-antropometria .nutri-section-head p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#nutri-antropometria .nutri-section-head p {
  max-width: 1080px !important;
}

/* Nutrición: tarjetas de texto inicial en tamaño uniforme y sin espacio muerto. */
#nutri-antropometria .nutri-highlight-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

#nutri-antropometria .nutri-highlight-grid > article,
#nutri-antropometria .nutri-uniform-card {
  min-height: 168px !important;
  height: 168px !important;
  max-height: 168px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: start !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-highlight-grid > article span {
  margin: 0 !important;
}

#nutri-antropometria .nutri-highlight-grid > article h3 {
  margin: 0 !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: flex-start !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
}

#nutri-antropometria .nutri-highlight-grid > article p {
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 16px !important;
  line-height: 1.38 !important;
  overflow: hidden !important;
}

/* Nutrición: todas las tarjetas visuales/flip del mismo tamaño y acomodo similar. */
#nutri-antropometria .nutri-visual-grid,
#nutri-antropometria .nutri-flip-visual-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 16px !important;
}

#nutri-antropometria .nutri-visual-grid > *,
#nutri-antropometria .nutri-flip-visual-grid > *,
#nutri-antropometria .nutri-flip-visual-card,
#nutri-antropometria .nutri-uniform-flip-card,
#nutri-antropometria .nutri-calf-card,
#nutri-antropometria .nutri-speed-card {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
  display: block !important;
  overflow: hidden !important;
}

/* Anular reglas anteriores específicas de pantorrilla/velocidad que rompían simetría. */
#nutri-antropometria .nutri-calf-card,
#nutri-antropometria .nutri-speed-card,
#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:nth-last-child(2),
#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:last-child {
  grid-column: auto !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-face,
#nutri-antropometria .nutri-uniform-flip-card .flip-face,
#nutri-antropometria .nutri-flip-visual-card .flip-front,
#nutri-antropometria .nutri-flip-visual-card .flip-back {
  width: 100% !important;
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

/* Cara frontal: imagen completa, título y descripción visibles; etiqueta inferior derecha. */
#nutri-antropometria .nutri-flip-visual-card .flip-front {
  display: grid !important;
  grid-template-rows: 178px minmax(0, 1fr) 28px !important;
  gap: 10px !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-items: stretch !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-front figure {
  width: 100% !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fbfb !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-front figure img,
#nutri-antropometria .nutri-flip-visual-card .flip-front img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

#nutri-antropometria .nutri-flip-caption {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(58px, auto) !important;
  align-content: start !important;
  gap: 5px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-flip-caption h4,
#nutri-antropometria .nutri-flip-visual-card .flip-front h4,
#nutri-antropometria .nutri-flip-visual-card .flip-front strong {
  margin: 0 !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  min-height: 38px !important;
  max-height: 42px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-flip-caption p,
#nutri-antropometria .nutri-flip-visual-card .flip-front p {
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15.5px !important;
  line-height: 1.34 !important;
  max-height: 86px !important;
  overflow: hidden !important;
}

/* "Presiona para ver pasos" siempre abajo a la derecha, con margen inferior interno. */
#nutri-antropometria .nutri-flip-visual-card .flip-front small,
#nutri-antropometria .nutri-flip-caption small {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 4px 6px 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Cara posterior: todo el contenido inicia arriba y el cierre queda abajo derecha sin empalmes. */
#nutri-antropometria .nutri-flip-visual-card .flip-back {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) 28px !important;
  gap: 7px !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-items: stretch !important;
  text-align: left !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-back h4,
#nutri-antropometria .nutri-flip-visual-card .flip-back h3,
#nutri-antropometria .nutri-flip-visual-card .flip-back strong {
  margin: 0 !important;
  align-self: start !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-back p {
  margin: 0 !important;
  align-self: start !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15px !important;
  line-height: 1.30 !important;
  max-height: 58px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-back ol,
#nutri-antropometria .nutri-flip-visual-card .flip-back ul {
  margin: 0 !important;
  padding-left: 20px !important;
  align-self: start !important;
  overflow: auto !important;
  min-height: 0 !important;
  max-height: 210px !important;
  scrollbar-width: thin !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-back li {
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 14.5px !important;
  line-height: 1.28 !important;
  margin-bottom: 4px !important;
}

#nutri-antropometria .nutri-flip-visual-card .flip-back small {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 4px 6px 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Adaptaciones manteniendo simetría. */
@media (max-width: 1180px) {
  #nutri-antropometria .nutri-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #nutri-antropometria .nutri-visual-grid,
  #nutri-antropometria .nutri-flip-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #nutri-antropometria .nutri-highlight-grid,
  #nutri-antropometria .nutri-visual-grid,
  #nutri-antropometria .nutri-flip-visual-grid {
    grid-template-columns: 1fr !important;
  }

  #nutri-antropometria .nutri-highlight-grid > article,
  #nutri-antropometria .nutri-uniform-card {
    height: auto !important;
    max-height: none !important;
    min-height: 150px !important;
  }
}


/* =========================================================
   Ajuste Nutrición: margen inferior +4px y zoom directo sobre imagen sin activar flip
   ========================================================= */

/* Antropometría y tamizaje: aumentar margen inferior para que no corte el texto del último contenedor. */
#nutri-antropometria .nutri-highlight-grid > article,
#nutri-antropometria .nutri-uniform-card {
  padding-bottom: 18px !important;
}

#nutri-antropometria .nutri-highlight-grid > article p,
#nutri-antropometria .nutri-uniform-card p {
  max-height: none !important;
  padding-bottom: 4px !important;
}

/* En la cara frontal, la imagen es una zona independiente de zoom; el resto de la tarjeta conserva el flip. */
#nutri-antropometria .nutri-flip-visual-card .flip-front figure,
#nutri-antropometria .nutri-uniform-flip-card .flip-front figure {
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

#nutri-antropometria .nutri-card-zoom-image,
#nutri-antropometria .nutri-flip-visual-card .flip-front figure img,
#nutri-antropometria .nutri-uniform-flip-card .flip-front figure img {
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

/* La zona de giro queda fuera de la imagen: texto, etiqueta y cuerpo de la tarjeta. */
#nutri-antropometria .nutri-flip-caption,
#nutri-antropometria .nutri-flip-caption *,
#nutri-antropometria .nutri-flip-visual-card .flip-front small,
#nutri-antropometria .nutri-uniform-flip-card .flip-front small {
  cursor: pointer !important;
}

/* Margen inferior reforzado para la etiqueta inferior derecha. */
#nutri-antropometria .nutri-flip-visual-card .flip-front small,
#nutri-antropometria .nutri-flip-caption small,
#nutri-antropometria .nutri-flip-visual-card .flip-back small {
  margin-bottom: 10px !important;
}


/* =========================================================
   Menú principal desplegable superior + Nutrición uniforme total
   ========================================================= */

/* El menú inferior se convierte en botón superior izquierdo desplegable. */
@media (min-width: 641px) {
  .picam-main-menu-toggle {
    position: fixed !important;
    top: calc(var(--header-h) + 7px) !important;
    left: 12px !important;
    z-index: 1245 !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
    border: 1px solid rgba(36,91,95,.22) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 24px rgba(31,41,51,.10) !important;
    padding: 9px !important;
  }

  .picam-main-menu-toggle span {
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #245b5f !important;
    display: block !important;
    margin: 2px 0 !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  body.picam-main-menu-open .picam-main-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.picam-main-menu-open .picam-main-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.picam-main-menu-open .picam-main-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  /* Dar espacio al icono dentro de la misma línea de pestañas de área. */
  .area-tabs {
    padding-left: 64px !important;
  }

  /* Desplegable hacia abajo y a la derecha. */
  .app-nav {
    position: fixed !important;
    top: calc(var(--header-h) + 58px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: 270px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(46px, auto) !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(36,91,95,.18) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 18px 42px rgba(31,41,51,.16) !important;
    z-index: 1240 !important;
    transform: translate(-8px, -8px) scale(.98) !important;
    transform-origin: top left !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }

  body.picam-main-menu-open .app-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(0, 0) scale(1) !important;
  }

  .app-nav .nav-item,
  .nav-item {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: stretch !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  .nav-svg-icon,
  .app-nav .nav-svg-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* Ya no se reserva espacio para menú inferior. */
  .book-app {
    inset: calc(var(--header-h) + var(--area-tabs-h-final)) 0 0 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .picam-main-menu-toggle {
    top: calc(var(--header-h) + 6px) !important;
    left: 10px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .area-tabs {
    padding-left: 60px !important;
  }

  .app-nav {
    top: calc(var(--header-h) + 56px) !important;
    left: 10px !important;
    width: 250px !important;
  }

  .app-nav .nav-item,
  .nav-item {
    height: 44px !important;
    min-height: 44px !important;
  }

  .nav-item > span,
  .app-nav .nav-item > span {
    font-size: 13.5px !important;
  }
}

/* En móvil se mantiene visible como botón superior compacto si la pantalla lo permite. */
@media (max-width: 640px) {
  .picam-main-menu-toggle {
    display: none !important;
  }
}

/* Nutrición: pantorrilla y velocidad de marcha deben tener EXACTAMENTE el mismo tamaño que las demás tarjetas con imagen. */
#nutri-antropometria .nutri-visual-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 390px !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#nutri-antropometria .nutri-visual-grid > *,
#nutri-antropometria .nutri-flip-visual-card,
#nutri-antropometria .nutri-uniform-flip-card,
#nutri-antropometria .nutri-force-uniform-size,
#nutri-antropometria .nutri-calf-card,
#nutri-antropometria .nutri-speed-card,
#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:nth-last-child(2),
#nutri-antropometria .nutri-visual-grid .nutri-flip-visual-card:last-child {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
  align-self: stretch !important;
}

#nutri-antropometria .nutri-force-uniform-size .flip-face,
#nutri-antropometria .nutri-force-uniform-size .flip-front,
#nutri-antropometria .nutri-force-uniform-size .flip-back,
#nutri-antropometria .nutri-calf-card .flip-face,
#nutri-antropometria .nutri-calf-card .flip-front,
#nutri-antropometria .nutri-calf-card .flip-back,
#nutri-antropometria .nutri-speed-card .flip-face,
#nutri-antropometria .nutri-speed-card .flip-front,
#nutri-antropometria .nutri-speed-card .flip-back {
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
}

/* Anular reglas previas específicas que hacían más grandes las imágenes de pantorrilla. */
#nutri-antropometria .nutri-calf-card .flip-front,
#nutri-antropometria .nutri-speed-card .flip-front,
#nutri-antropometria .nutri-force-uniform-size .flip-front {
  display: grid !important;
  grid-template-rows: 178px minmax(0, 1fr) 28px !important;
  align-content: start !important;
}

#nutri-antropometria .nutri-calf-card .flip-front figure,
#nutri-antropometria .nutri-speed-card .flip-front figure,
#nutri-antropometria .nutri-force-uniform-size .flip-front figure {
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
  width: 100% !important;
}

#nutri-antropometria .nutri-calf-card .flip-front img,
#nutri-antropometria .nutri-speed-card .flip-front img,
#nutri-antropometria .nutri-force-uniform-size .flip-front img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1180px) {
  #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 390px !important;
  }
}

@media (max-width: 640px) {
  #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
}


/* =========================================================
   Corrección menú Inicio: icono home y desplegable vertical sin amontonamiento
   ========================================================= */
@media (min-width: 641px) {
  #picamMainMenuToggle.picam-home-menu-toggle,
  .picam-main-menu-toggle.picam-home-menu-toggle {
    position: fixed !important;
    top: calc(var(--header-h) + 6px) !important;
    left: 12px !important;
    z-index: 1300 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(36,91,95,.24) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 24px rgba(31,41,51,.10) !important;
    transform: none !important;
  }

  #picamMainMenuToggle.picam-home-menu-toggle span,
  .picam-main-menu-toggle.picam-home-menu-toggle span {
    display: none !important;
  }

  .picam-home-menu-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
  }

  body.picam-main-menu-open #picamMainMenuToggle.picam-home-menu-toggle {
    background: #e6f1f1 !important;
    border-color: rgba(36,91,95,.36) !important;
  }

  /* Desplegable vertical: se fuerza una sola columna para evitar amontonamiento. */
  #appNav.app-nav {
    position: fixed !important;
    top: calc(var(--header-h) + 54px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--header-h) - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-content: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(36,91,95,.18) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 18px 42px rgba(31,41,51,.16) !important;
    z-index: 1290 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
    transform-origin: top left !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }

  body.picam-main-menu-open #appNav.app-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  #appNav.app-nav .nav-item {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: stretch !important;
    align-content: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    text-align: left !important;
    transform: none !important;
  }

  #appNav.app-nav .nav-svg-icon {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  #appNav.app-nav .nav-item > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Las pestañas de área siguen dejando espacio al botón Home. */
  .area-tabs {
    padding-left: 64px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  #picamMainMenuToggle.picam-home-menu-toggle,
  .picam-main-menu-toggle.picam-home-menu-toggle {
    top: calc(var(--header-h) + 6px) !important;
    left: 10px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .picam-home-menu-icon {
    width: 23px !important;
    height: 23px !important;
  }

  #appNav.app-nav {
    top: calc(var(--header-h) + 52px) !important;
    left: 10px !important;
    width: 264px !important;
    min-width: 264px !important;
    max-width: 264px !important;
  }

  #appNav.app-nav .nav-item {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}


/* =========================================================
   Corrección crítica: Home sí despliega, primera imagen sin zoom y texto blanco
   ========================================================= */

/* Primera imagen/pantalla inicial sin cursor de zoom ni comportamiento visual de lupa. */
.picam-first-image-no-zoom,
.picam-first-image-card img.picam-first-image-no-zoom,
section.page[data-page="inicio"] .picam-first-image-no-zoom {
  cursor: default !important;
  pointer-events: auto !important;
  filter: none !important;
}

.picam-first-image-card :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,em,li),
.picam-first-image-white-text,
.picam-first-image-white-text * {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.42) !important;
}

/* Evitar que reglas globales de títulos verdes afecten texto dentro de la primera imagen. */
section.page[data-page="inicio"] .picam-first-image-card :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,em,li) {
  color: #ffffff !important;
}

/* Home desplegable: una sola columna, visible al abrir y sin amontonamiento. */
@media (min-width: 641px) {
  #picamMainMenuToggle.picam-home-menu-toggle {
    position: fixed !important;
    top: calc(var(--header-h) + 6px) !important;
    left: 12px !important;
    z-index: 1400 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(36,91,95,.24) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 24px rgba(31,41,51,.10) !important;
    cursor: pointer !important;
  }

  #picamMainMenuToggle.picam-home-menu-toggle .picam-home-menu-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  body.picam-main-menu-open #picamMainMenuToggle.picam-home-menu-toggle {
    background: #e6f1f1 !important;
    border-color: rgba(36,91,95,.42) !important;
  }

  #appNav.app-nav {
    position: fixed !important;
    top: calc(var(--header-h) + 54px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--header-h) - 72px) !important;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-auto-flow: unset !important;
    grid-auto-rows: unset !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(36,91,95,.18) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.992) !important;
    box-shadow: 0 18px 42px rgba(31,41,51,.16) !important;
    z-index: 1390 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
  }

  body.picam-main-menu-open #appNav.app-nav {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  #appNav.app-nav .nav-item {
    flex: 0 0 46px !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: 46px !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: stretch !important;
    align-content: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    text-align: left !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #appNav.app-nav .nav-svg-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  #appNav.app-nav .nav-item > span {
    display: block !important;
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #1d4b50 !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  #appNav.app-nav {
    top: calc(var(--header-h) + 52px) !important;
    width: 264px !important;
    min-width: 264px !important;
    max-width: 264px !important;
  }
}


/* =========================================================
   Menú Home definitivo: despliega el antiguo menú inferior como lista vertical izquierda
   ========================================================= */
@media (min-width: 641px) {
  #picamMainMenuToggle.picam-home-menu-toggle {
    position: fixed !important;
    top: calc(var(--header-h) + 6px) !important;
    left: 12px !important;
    z-index: 5000 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(36,91,95,.24) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 24px rgba(31,41,51,.10) !important;
    cursor: pointer !important;
    transform: none !important;
  }

  #picamMainMenuToggle.picam-home-menu-toggle .picam-home-menu-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
  }

  body.picam-main-menu-open #picamMainMenuToggle.picam-home-menu-toggle {
    background: #e6f1f1 !important;
    border-color: rgba(36,91,95,.42) !important;
  }

  /* Estado cerrado: no ocupa espacio y no permite clics. */
  #appNav.app-nav.picam-main-dropdown-nav,
  #appNav.app-nav {
    position: fixed !important;
    top: calc(var(--header-h) + 54px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--header-h) - 72px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-content: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(36,91,95,.18) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.992) !important;
    box-shadow: 0 18px 42px rgba(31,41,51,.16) !important;
    z-index: 4990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
    transform-origin: top left !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  /* Estado abierto: lista vertical, una opción por fila. */
  body.picam-main-menu-open #appNav.app-nav.picam-main-dropdown-nav,
  body.picam-main-menu-open #appNav.app-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  #appNav.app-nav .nav-item {
    position: relative !important;
    flex: 0 0 46px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: 46px !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-items: start !important;
    justify-content: stretch !important;
    align-content: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    text-align: left !important;
    transform: none !important;
  }

  #appNav.app-nav .nav-svg-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  #appNav.app-nav .nav-item > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #1d4b50 !important;
  }

  .area-tabs {
    padding-left: 64px !important;
  }

  .book-app {
    inset: calc(var(--header-h) + var(--area-tabs-h-final)) 0 0 0 !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  #picamMainMenuToggle.picam-home-menu-toggle {
    top: calc(var(--header-h) + 6px) !important;
    left: 10px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  #picamMainMenuToggle.picam-home-menu-toggle .picam-home-menu-icon {
    width: 23px !important;
    height: 23px !important;
  }

  #appNav.app-nav.picam-main-dropdown-nav,
  #appNav.app-nav {
    top: calc(var(--header-h) + 52px) !important;
    left: 10px !important;
    width: 264px !important;
    min-width: 264px !important;
    max-width: 264px !important;
  }
}

/* Cualquier texto realmente colocado dentro/sobre una imagen debe tener contraste blanco. */
.picam-first-image-card :is(h1,h2,h3,h4,h5,h6,p,span,strong,small,em,li,figcaption),
.picam-image-overlay-white-text,
.picam-image-overlay-white-text *,
figure[class*="image"] :is(figcaption,.caption,.overlay,h1,h2,h3,h4,p,span,strong,small),
[class*="image-card"] :is(figcaption,.caption,.overlay,h1,h2,h3,h4,p,span,strong,small) {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.48) !important;
}

/* La primera imagen protegida no muestra lupa ni abre zoom. */
img.picam-first-image-no-zoom,
img[data-no-expand="true"].picam-first-image-no-zoom,
.picam-first-image-card img {
  cursor: default !important;
  filter: none !important;
}


/* =========================================================
   Nutrición: pantorrilla y velocidad de marcha con el MISMO formato
   que el resto de métricas clave de Antropometría y tamizaje
   ========================================================= */
#nutri-antropometria .nutri-calf-card,
#nutri-antropometria .nutri-speed-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
  align-self: stretch !important;
}

#nutri-antropometria .nutri-calf-card .flip-face,
#nutri-antropometria .nutri-speed-card .flip-face,
#nutri-antropometria .nutri-calf-card .flip-front,
#nutri-antropometria .nutri-speed-card .flip-front,
#nutri-antropometria .nutri-calf-card .flip-back,
#nutri-antropometria .nutri-speed-card .flip-back {
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
}

#nutri-antropometria .nutri-calf-card .flip-front,
#nutri-antropometria .nutri-speed-card .flip-front {
  display: grid !important;
  grid-template-rows: 178px minmax(0, 1fr) 28px !important;
  gap: 10px !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-items: stretch !important;
  padding: 14px !important;
}

#nutri-antropometria .nutri-calf-card .flip-front figure,
#nutri-antropometria .nutri-speed-card .flip-front figure {
  width: 100% !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fbfb !important;
}

#nutri-antropometria .nutri-calf-card .flip-front img,
#nutri-antropometria .nutri-speed-card .flip-front img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

#nutri-antropometria .nutri-calf-card .nutri-flip-caption,
#nutri-antropometria .nutri-speed-card .nutri-flip-caption {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(58px, auto) 28px !important;
  align-content: start !important;
  gap: 5px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#nutri-antropometria .nutri-calf-card .nutri-flip-caption h4,
#nutri-antropometria .nutri-speed-card .nutri-flip-caption h4 {
  margin: 0 !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  min-height: 38px !important;
  max-height: 42px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-calf-card .nutri-flip-caption p,
#nutri-antropometria .nutri-speed-card .nutri-flip-caption p {
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15.5px !important;
  line-height: 1.34 !important;
  max-height: 86px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-calf-card .nutri-flip-caption small,
#nutri-antropometria .nutri-speed-card .nutri-flip-caption small {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 4px 6px 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#nutri-antropometria .nutri-calf-card .flip-back h4,
#nutri-antropometria .nutri-speed-card .flip-back h4 {
  margin: 0 !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
}

#nutri-antropometria .nutri-calf-card .flip-back p,
#nutri-antropometria .nutri-speed-card .flip-back p {
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15px !important;
  line-height: 1.30 !important;
  max-height: 58px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-calf-card .flip-back ol,
#nutri-antropometria .nutri-speed-card .flip-back ol {
  margin: 0 !important;
  padding-left: 20px !important;
  overflow: auto !important;
  min-height: 0 !important;
  max-height: 210px !important;
}

#nutri-antropometria .nutri-calf-card .flip-back li,
#nutri-antropometria .nutri-speed-card .flip-back li {
  font-size: 14.5px !important;
  line-height: 1.28 !important;
  margin-bottom: 4px !important;
}


/* =========================================================
   Psicología: tarjetas más holgadas, matrices sin repetición
   e integración de variables PICAM
   ========================================================= */
#area-psicologia .psico-card,
.page[data-page="area-psicologia"] .psico-card {
  min-height: 230px !important;
  padding: 24px !important;
  gap: 14px !important;
  align-content: start !important;
}

#area-psicologia .psico-screen-card,
.page[data-page="area-psicologia"] .psico-screen-card {
  min-height: 320px !important;
  padding: 22px !important;
  gap: 14px !important;
  align-content: start !important;
}

#area-psicologia .psico-step-card,
.page[data-page="area-psicologia"] .psico-step-card {
  min-height: 310px !important;
  padding: 22px !important;
}

#area-psicologia .psico-flip-card,
.page[data-page="area-psicologia"] .psico-flip-card {
  min-height: 290px !important;
}

#area-psicologia .psico-flip-card .flip-face,
.page[data-page="area-psicologia"] .psico-flip-card .flip-face {
  padding: 24px !important;
  align-content: start !important;
}

#area-psicologia .psico-table-wrap,
.page[data-page="area-psicologia"] .psico-table-wrap {
  padding-bottom: 8px !important;
}

#area-psicologia .psico-table-wrap table,
.page[data-page="area-psicologia"] .psico-table-wrap table {
  min-width: 1100px !important;
}

#area-psicologia .psico-table-wrap th,
#area-psicologia .psico-table-wrap td,
.page[data-page="area-psicologia"] .psico-table-wrap th,
.page[data-page="area-psicologia"] .psico-table-wrap td {
  padding: 14px 14px !important;
  font-size: 15px !important;
  line-height: 1.38 !important;
  white-space: normal !important;
}

#area-psicologia .psico-table-wrap td:first-child,
.page[data-page="area-psicologia"] .psico-table-wrap td:first-child {
  font-weight: 900;
  color: #245b5f;
  width: 15%;
}

#area-psicologia .psico-matrix-cards,
#area-psicologia .psico-output-grid,
.page[data-page="area-psicologia"] .psico-matrix-cards,
.page[data-page="area-psicologia"] .psico-output-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#psico-integracion-picam .psico-picam-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

#psico-integracion-picam .psico-picam-data-card {
  min-height: 250px !important;
  background: linear-gradient(180deg, #ffffff, #fbfcfc);
}

#psico-integracion-picam .psico-picam-data-card h3 {
  color: #245b5f !important;
}

#psico-integracion-picam .psico-bullet-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
}

#psico-integracion-picam .psico-bullet-list li {
  color: #4e5867;
  line-height: 1.35 !important;
}

@media (max-width: 1320px) {
  #psico-integracion-picam .psico-picam-data-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  #area-psicologia .psico-matrix-cards,
  #area-psicologia .psico-output-grid,
  .page[data-page="area-psicologia"] .psico-matrix-cards,
  .page[data-page="area-psicologia"] .psico-output-grid,
  #psico-integracion-picam .psico-picam-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #area-psicologia .psico-matrix-cards,
  #area-psicologia .psico-output-grid,
  .page[data-page="area-psicologia"] .psico-matrix-cards,
  .page[data-page="area-psicologia"] .psico-output-grid,
  #psico-integracion-picam .psico-picam-data-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Psicología: variables por sección + bibliografía con DOI
   ========================================================= */
#area-psicologia .psico-vars-panel,
.page[data-page="area-psicologia"] .psico-vars-panel {
  display: grid;
  gap: 14px;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid rgba(36,91,95,.10);
  border-radius: 24px;
  background: linear-gradient(180deg,#fcfefe,#ffffff);
}

#area-psicologia .psico-vars-head h4,
.page[data-page="area-psicologia"] .psico-vars-head h4 {
  margin: 0 0 6px;
  color: #245b5f;
  font-size: clamp(20px,1.45vw,28px);
}

#area-psicologia .psico-vars-head p,
.page[data-page="area-psicologia"] .psico-vars-head p {
  margin: 0;
  color: #556070;
  line-height: 1.45 !important;
}

#area-psicologia .psico-vars-grid,
.page[data-page="area-psicologia"] .psico-vars-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  align-items: stretch;
}

#area-psicologia .psico-vars-card,
.page[data-page="area-psicologia"] .psico-vars-card {
  min-height: 220px !important;
}

#area-psicologia .psico-bullet-list,
.page[data-page="area-psicologia"] .psico-bullet-list,
.integralx-bullet-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
}

#area-psicologia .psico-bullet-list li,
.page[data-page="area-psicologia"] .psico-bullet-list li,
.integralx-bullet-list li {
  color: #596273;
  line-height: 1.35 !important;
}

.psico-ref-action {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 4px;
}

.psico-ref-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #245b5f;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(36,91,95,.18);
}

.psico-ref-btn:hover { background: #1c4b4f; }

.psico-ref-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16,24,40,.58);
  padding: 24px;
}

.psico-ref-modal.open { display: flex; }

.psico-ref-modal-panel {
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15,23,42,.26);
  padding: 24px;
}

.psico-ref-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.psico-ref-modal-head h3 {
  margin: 0;
  color: #245b5f;
  font-size: clamp(24px,1.8vw,34px);
}

.psico-ref-modal-close {
  appearance: none;
  border: 0;
  background: #eff4f4;
  color: #245b5f;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.psico-ref-modal-body {
  display: grid;
  gap: 14px;
}

.psico-ref-entry {
  border: 1px solid rgba(36,91,95,.12);
  border-radius: 20px;
  padding: 16px 18px;
  background: linear-gradient(180deg,#fff,#fbfdfd);
}

.psico-ref-entry h4 {
  margin: 0 0 8px;
  color: #245b5f;
  font-size: 18px;
}

.psico-ref-entry p {
  margin: 0 0 6px;
  color: #334155;
  line-height: 1.45 !important;
}

.psico-ref-entry code {
  display: inline-block;
  margin-top: 2px;
  color: #7b1f3a;
  background: #f8f1f4;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.integralx-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}

.integralx-data-card {
  min-height: 260px;
}

.integralx-data-card h3 {
  color: #245b5f;
  margin: 0 0 10px;
}

@media (max-width: 1100px) {
  #area-psicologia .psico-vars-grid,
  .page[data-page="area-psicologia"] .psico-vars-grid,
  .integralx-data-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  #area-psicologia .psico-vars-grid,
  .page[data-page="area-psicologia"] .psico-vars-grid,
  .integralx-data-grid {
    grid-template-columns: 1fr;
  }
  .psico-ref-modal { padding: 14px; }
  .psico-ref-modal-panel {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    padding: 18px;
  }
}


/* =========================================================
   Ajustes finales Psicología + Esquema Integral
   ========================================================= */

/* Flujo operativo completo: al quitar "Flujo", mantener aire y simetría en las cards. */
#psico-ruta .psico-step-card {
  grid-template-rows: auto auto 1fr !important;
  align-content: start !important;
  gap: 10px !important;
}

#psico-ruta .psico-step-card h3 {
  margin-top: 0 !important;
}

#psico-ruta .psico-step-card p {
  margin-top: 0 !important;
}

/* BDI/BAI/Estrés: la tarjeta Integración PICAM ocupa fila completa y queda simétrica. */
#psico-tamizajes .psico-screen-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

#psico-tamizajes .psico-screen-card-wide {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 260px !important;
}

#psico-tamizajes .psico-screen-card-wide .psico-scale-preview {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#psico-tamizajes .psico-screen-card-wide .psico-form-row {
  min-height: 108px !important;
  align-content: start !important;
}

/* Variables complementarias para tamizaje psicológico: centrar sus contenedores. */
#psico-tamizajes .psico-tamiz-vars .psico-vars-grid {
  grid-template-columns: repeat(2, minmax(280px, 430px)) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  max-width: 940px !important;
  margin: 0 auto !important;
}

/* Punto de decisión: texto centrado y etiqueta inferior alineada en ambas caras. */
#psico-decision .psico-decision-grid {
  align-items: stretch !important;
}

#psico-decision .psico-flip-card {
  min-height: 300px !important;
}

#psico-decision .psico-flip-card .flip-face {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 24px !important;
}

#psico-decision .psico-flip-card .flip-front h3,
#psico-decision .psico-flip-card .flip-back h3,
#psico-decision .psico-flip-card .flip-back p {
  align-self: center !important;
  justify-self: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#psico-decision .psico-flip-card .flip-front small,
#psico-decision .psico-flip-card .flip-back small {
  align-self: end !important;
  justify-self: center !important;
  margin: 12px 0 0 !important;
  min-height: 32px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: #245b5f !important;
  font-weight: 900 !important;
}

/* Esquema Integral: relaciones entre áreas y variables completas. */
#integralx-datos .integralx-data-grid,
#integralx-relaciones-areas .integralx-relation-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#integralx-datos .integralx-data-card,
#integralx-relaciones-areas .integralx-relation-card {
  min-height: 285px !important;
  align-content: start !important;
}

#integralx-relaciones-areas .integralx-relation-card h3,
#integralx-datos .integralx-data-card h3 {
  color: #245b5f !important;
  margin-bottom: 8px !important;
}

#integralx-relaciones-areas .integralx-relation-card p {
  margin: 0 0 10px !important;
  color: #334155 !important;
  line-height: 1.42 !important;
}

#integralx-relaciones-areas .integralx-bullet-list,
#integralx-datos .integralx-bullet-list {
  margin: 0 !important;
  padding-left: 20px !important;
  display: grid !important;
  gap: 5px !important;
}

#integralx-relaciones-areas .integralx-bullet-list li,
#integralx-datos .integralx-bullet-list li {
  color: #596273 !important;
  line-height: 1.34 !important;
}

/* Responsive */
@media (max-width: 1180px) {
  #psico-tamizajes .psico-screen-grid,
  #integralx-datos .integralx-data-grid,
  #integralx-relaciones-areas .integralx-relation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #psico-tamizajes .psico-screen-card-wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  #psico-tamizajes .psico-screen-grid,
  #psico-tamizajes .psico-tamiz-vars .psico-vars-grid,
  #psico-tamizajes .psico-screen-card-wide .psico-scale-preview,
  #integralx-datos .integralx-data-grid,
  #integralx-relaciones-areas .integralx-relation-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Nutrición: pantorrilla como cadera, velocidad como brazo + zoom en consejería
   ========================================================= */

/* Anula cualquier regla previa específica de pantorrilla/velocidad y las deja como cards estándar de métricas clave. */
#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"],
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"],
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"],
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
  display: block !important;
  align-self: stretch !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-face,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-face,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .flip-face,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .flip-face {
  width: 100% !important;
  min-height: 390px !important;
  height: 390px !important;
  max-height: 390px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-front,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-front,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .flip-front,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .flip-front {
  display: grid !important;
  grid-template-rows: 178px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-items: stretch !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-front figure,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-front figure,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .flip-front figure,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .flip-front figure {
  width: 100% !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fbfb !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-front img,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-front img,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .flip-front img,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .flip-front img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .nutri-flip-caption,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .nutri-flip-caption {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(58px, auto) 28px !important;
  align-content: start !important;
  gap: 5px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption h4,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption h4,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .nutri-flip-caption h4,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .nutri-flip-caption h4 {
  margin: 0 !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  min-height: 38px !important;
  max-height: 42px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption p,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption p,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .nutri-flip-caption p,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .nutri-flip-caption p {
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15.5px !important;
  line-height: 1.34 !important;
  max-height: 86px !important;
  overflow: hidden !important;
}

#nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption small,
#nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption small,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="cadera"] .nutri-flip-caption small,
#nutri-antropometria .nutri-visual-grid > article[data-nutri-match="brazo"] .nutri-flip-caption small {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 4px 6px 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Infografías y herramientas de consejería: imagen clickeable para zoom dentro de las cards. */
#nutri-educacion .nutri-education-zoom-image,
#nutri-educacion .nutri-education-flip-card .flip-front figure img {
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

#nutri-educacion .nutri-education-flip-card .flip-front figure {
  cursor: zoom-in !important;
}

#nutri-educacion .nutri-education-flip-card .nutri-flip-caption,
#nutri-educacion .nutri-education-flip-card .nutri-flip-caption *,
#nutri-educacion .nutri-education-flip-card .flip-front small {
  cursor: pointer !important;
}


/* =========================================================
   Nutrición DEFINITIVO: métricas simétricas + zoom en consejería
   ========================================================= */
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 410px !important;
  gap: 16px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article:nth-child(5),
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article:nth-child(6),
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article:nth-child(7),
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article:nth-child(8),
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de cadera"],
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de brazo"],
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"],
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 410px !important;
  height: 410px !important;
  max-height: 410px !important;
  display: block !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-face,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-front,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-back {
  width: 100% !important;
  min-height: 410px !important;
  height: 410px !important;
  max-height: 410px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-front {
  display: grid !important;
  grid-template-rows: 182px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-items: stretch !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-front figure {
  width: 100% !important;
  height: 182px !important;
  min-height: 182px !important;
  max-height: 182px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fbfb !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-front figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .nutri-flip-caption {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(64px, 1fr) 30px !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .nutri-flip-caption h4 {
  margin: 0 !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  min-height: 38px !important;
  max-height: 42px !important;
  overflow: hidden !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .nutri-flip-caption p {
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15.5px !important;
  line-height: 1.34 !important;
  max-height: 92px !important;
  overflow: hidden !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .nutri-flip-caption small {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 4px 8px 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-back {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) 30px !important;
  gap: 7px !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-items: stretch !important;
  text-align: left !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-back ol,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article .flip-back ul {
  margin: 0 !important;
  padding-left: 20px !important;
  overflow: auto !important;
  min-height: 0 !important;
  max-height: 220px !important;
}

/* Zoom confirmado en Infografías y herramientas de consejería. */
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-front figure,
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-front figure img,
.page[data-page="area-nutricion"] #nutri-educacion img.nutri-education-zoom-image {
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .nutri-flip-caption,
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .nutri-flip-caption *,
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-front small {
  cursor: pointer !important;
}

@media (max-width: 1180px) {
  .page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
}


/* =========================================================
   Corrección definitiva: pantorrilla visible + infografías con margen top 4px
   ========================================================= */

/* Card de pantorrilla y velocidad: se rehace el frente para que el título y texto SIEMPRE sean visibles. */
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"],
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] {
  position: relative !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 410px !important;
  min-height: 410px !important;
  max-height: 410px !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .flip-face,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-face,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-face {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 410px !important;
  min-height: 410px !important;
  max-height: 410px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .flip-front,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-front,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-front {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
}

/* Imagen contenida: nunca debe comerse el caption. */
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .flip-front figure,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-front figure,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-front figure {
  flex: 0 0 170px !important;
  width: 100% !important;
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fbfb !important;
  border: 1px solid rgba(36,91,95,.10) !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .flip-front figure img,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .flip-front figure img,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .flip-front figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: auto !important;
}

/* Caption visible, con espacio propio y encima de cualquier residuo de imagen. */
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .nutri-flip-caption,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption {
  position: relative !important;
  z-index: 3 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(62px, 1fr) 30px !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .nutri-flip-caption h4,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption h4,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption h4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .nutri-flip-caption p,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption p,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption p {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  color: var(--clinical-ink, #1f2933) !important;
  font-size: 15.5px !important;
  line-height: 1.34 !important;
  max-height: none !important;
  overflow: visible !important;
}

.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article.nutri-fixed-visible-card .nutri-flip-caption small,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Circunferencia de pantorrilla"] .nutri-flip-caption small,
.page[data-page="area-nutricion"] #nutri-antropometria .nutri-visual-grid > article[aria-label="Velocidad de marcha"] .nutri-flip-caption small {
  align-self: end !important;
  justify-self: end !important;
  margin: 0 4px 6px 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(36,91,95,.08) !important;
  color: var(--clinical-primary-2, #1d4b50) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Infografías y herramientas de consejería: cards más bajas y margen superior exacto de 4px sobre imagen. */
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-grid,
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-grid,
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-compact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card,
.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-compact-card {
  height: 390px !important;
  min-height: 390px !important;
  max-height: 390px !important;
  overflow: hidden !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-face {
  height: 390px !important;
  min-height: 390px !important;
  max-height: 390px !important;
  padding: 4px 14px 14px !important;
  overflow: hidden !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-front {
  display: grid !important;
  grid-template-rows: 232px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-content: start !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-front figure {
  width: 100% !important;
  height: 232px !important;
  min-height: 232px !important;
  max-height: 232px !important;
  margin: 0 !important;       /* el top visible lo da el padding superior de 4px del face */
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fbfb !important;
  cursor: zoom-in !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .flip-front figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

.page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-card .nutri-flip-caption {
  display: grid !important;
  grid-template-rows: auto minmax(48px, 1fr) 28px !important;
  gap: 5px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  .page[data-page="area-nutricion"] #nutri-educacion .nutri-education-grid,
  .page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-grid,
  .page[data-page="area-nutricion"] #nutri-educacion .nutri-education-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .page[data-page="area-nutricion"] #nutri-educacion .nutri-education-grid,
  .page[data-page="area-nutricion"] #nutri-educacion .nutri-education-flip-grid,
  .page[data-page="area-nutricion"] #nutri-educacion .nutri-education-compact-grid {
    grid-template-columns: 1fr !important;
  }
}