/* ══════════════════════════════════════════════════════════════════
   v16-recursos.css — Recursos (escaparate), ficha de «Diseña tu producto IA» y avance en la home.
   Se apoya en home-v16.css (h16-*) y v16-paginas.css (p16-*). Clases nuevas: r16- (comunes) y dpi16- (ficha).
   Movimiento: el de siempre (h16-rv, curva de la marca); las cartas se reparten, se voltean al tocarlas
   y el tablero se monta por zonas. Solo transform y opacity. Espaciado en escala de 8 px.
   Colores del tablero SOLO para identificar las cinco áreas.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --r16-riesgos: #d981f7; --r16-evaluacion: #5ebcff; --r16-capacidades: #0de5ba; --r16-dispositivos: #f4ec06; --r16-recursos: #fda900;
}

/* ── Botón con borde claro (sobre fondo oscuro) y enlace secundario ── */
.r16-btn-borde { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 13px 24px; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.42); color: var(--white) !important; font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .16s ease-out; }
.r16-btn-borde:hover, .r16-btn-borde:focus-visible { border-color: var(--mint); background: rgba(18,227,188,.08); }
.r16-btn-borde:active { transform: scale(.97); }
.r16-btn-borde--tinta { border-color: rgba(9,16,14,.35); color: var(--ink) !important; }
.r16-btn-borde--tinta:hover, .r16-btn-borde--tinta:focus-visible { border-color: var(--ink); background: rgba(9,16,14,.06); }

/* ── Sellos de acceso ── */
.r16-acceso { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px; font-size: .74rem; font-weight: 700; line-height: 1.2; }
.r16-acceso svg { width: 13px; height: 13px; flex-shrink: 0; }
.r16-acceso--comunidad { background: var(--ink); color: var(--white); }
.r16-acceso--comunidad svg { color: var(--mint); }
.r16-acceso--abierto { background: var(--mint-pale); color: #0a5c4d; }
.p16-sec--oscuro .r16-acceso--comunidad, .p16-hero .r16-acceso--comunidad, .r16-teaser .r16-acceso--comunidad { background: rgba(18,227,188,.14); color: var(--mint); }

/* ── Áreas del tablero (chips con su color) ── */
.r16-areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.r16-area { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 50px; border: 1px solid var(--h16-chip-line);
  font-size: .78rem; font-weight: 600; color: var(--h16-text); }
.r16-area::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--mint)); flex-shrink: 0; }
.p16-sec--oscuro .r16-area, .r16-teaser .r16-area { border-color: rgba(255,255,255,.2); color: var(--h16-soft-dark); }
.r16-z-riesgos { --c: var(--r16-riesgos); } .r16-z-evaluacion { --c: var(--r16-evaluacion); } .r16-z-capacidades { --c: var(--r16-capacidades); }
.r16-z-dispositivos { --c: var(--r16-dispositivos); } .r16-z-recursos { --c: var(--r16-recursos); }

/* ══ CARTA QUE SE VOLTEA (componente común) ══
   <button class="r16-carta" aria-pressed="false"><span class="r16-carta-in"><img class="r16-cara r16-cara-a"><img class="r16-cara r16-cara-r"></span></button> */
.r16-carta { --tx: 0; --ty: 0; position: relative; display: block; width: 100%; aspect-ratio: 300 / 424; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; border-radius: 7% / 5%; perspective: 1400px; -webkit-tap-highlight-color: transparent; }
.r16-carta-in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .85s var(--h16-ease);
  transform: rotateX(calc(var(--ty) * -8deg)) rotateY(calc(var(--tx) * 10deg)); }
.r16-carta[aria-pressed="true"] .r16-carta-in { transform: rotateX(calc(var(--ty) * -8deg)) rotateY(calc(180deg + var(--tx) * 10deg)); }
.r16-cara { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 7% / 5%; background: #fff; object-fit: cover;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; user-select: none; -webkit-user-drag: none;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.18); }
.r16-cara-r { transform: rotateY(180deg); }
.r16-carta:focus-visible { outline: 3px solid var(--mint); outline-offset: 6px; border-radius: 14px; }
@media (hover: hover) and (pointer: fine) {
  .r16-carta { transition: transform .45s var(--h16-ease); }
  .r16-carta:hover { transform: translateY(-8px); }
}
.r16-pista { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: .85rem; font-weight: 600; color: var(--h16-soft-dark-2); }
.r16-pista-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: r16sonar 2.4s ease-out infinite; }
@keyframes r16sonar { 0% { box-shadow: 0 0 0 0 rgba(18,227,188,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(18,227,188,0); } }

/* ══ ESCENA: tablero que se monta por zonas + cartas que encajan + abanico ══ */
.r16-escena { position: relative; width: 100%; aspect-ratio: 1.22; container-type: inline-size; }
.r16-tablero { position: absolute; left: 4%; top: 6%; width: 92%; aspect-ratio: 2000 / 1413; transform: perspective(1800px) rotateX(26deg) rotateZ(-6deg); transform-origin: 50% 60%; }
.r16-tablero-base { position: absolute; inset: 0; border-radius: 1.4cqw; border: 1.5px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.03); }
.r16-zona { position: absolute; inset: 0; border-radius: 1.4cqw; overflow: hidden; }
.r16-zona img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.r16-zona-todo { box-shadow: 0 3cqw 6cqw rgba(0,0,0,.45); }
.r16-zona-riesgos { clip-path: polygon(0 0, 50% 0, 50% 33%, 17.5% 33%, 17.5% 39%, 0 39%); }
.r16-zona-evaluacion { clip-path: polygon(50% 0, 100% 0, 100% 39%, 82.5% 39%, 82.5% 33%, 50% 33%); }
.r16-zona-capacidades { clip-path: polygon(17.5% 33%, 82.5% 33%, 82.5% 39%, 85% 39%, 85% 61%, 82.5% 61%, 82.5% 67%, 17.5% 67%, 17.5% 61%, 15% 61%, 15% 39%, 17.5% 39%); }
.r16-zona-dispositivos { clip-path: polygon(0 61%, 17.5% 61%, 17.5% 67%, 50% 67%, 50% 100%, 0 100%); }
.r16-zona-recursos { clip-path: polygon(50% 67%, 82.5% 67%, 82.5% 61%, 100% 61%, 100% 100%, 50% 100%); }
.r16-encaja { position: absolute; width: 13.922%; height: 28.044%; }
.r16-encaja img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 7% / 5%; box-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.3); }
.r16-abanico { position: absolute; inset: 0; pointer-events: none; }
.r16-abanico .r16-flot { position: absolute; width: 22cqw; pointer-events: auto; }
.r16-flot-1 { left: 26%; top: 47%; --r: -10deg; --dx: 24cqw; }
.r16-flot-2 { left: 46%; top: 42%; --r: 1deg; --dx: 4cqw; }
.r16-flot-3 { left: 66%; top: 48%; --r: 11deg; --dx: -16cqw; }
.r16-escena .r16-pista { position: absolute; left: 4%; bottom: -4px; }

/* Estado inicial (solo con JS) y montaje al recibir .is-on */
.h16-js .r16-escena .r16-tablero-base { opacity: 0; transition: opacity .8s var(--h16-ease) .1s; }
.h16-js .r16-escena .r16-zona { opacity: 0; transform: translateY(-3cqw) scale(1.03); transition: opacity .45s ease, transform .9s var(--h16-ease); transition-delay: calc(.3s + var(--i) * .16s); }
.h16-js .r16-escena .r16-zona-todo { transition-delay: 1.2s; }
.h16-js .r16-escena .r16-encaja { opacity: 0; transform: translate3d(30%, -60%, 0) rotate(-14deg) scale(1.15); transition: opacity .35s ease, transform 1s var(--h16-ease); transition-delay: calc(1.35s + var(--i) * .13s); }
.h16-js .r16-escena .r16-flot { opacity: 0; transform: translate3d(var(--dx), 40cqw, 0) scale(.85); transition: opacity .4s ease, transform 1.1s var(--h16-ease); transition-delay: calc(2s + var(--i) * .12s); }
.h16-js .r16-escena .r16-pista { opacity: 0; transition: opacity .6s ease 3s; }
.r16-escena.is-on .r16-tablero-base, .r16-escena.is-on .r16-zona, .r16-escena.is-on .r16-encaja, .r16-escena.is-on .r16-pista { opacity: 1; transform: none; }
.r16-escena.is-on .r16-flot { opacity: 1; transform: rotate(var(--r)); }
.r16-escena.is-fin .r16-flot { transition: transform .6s var(--h16-ease); transition-delay: 0s; }
.r16-escena.is-fin .r16-pista.usada { opacity: 0; transition-delay: 0s; }

/* ══ AVANCE EN LA HOME (dentro de «Tres formas de empezar») ══ */
.r16-teaser { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
  padding: 56px 56px 48px; border-radius: 28px; background: var(--dark); color: var(--white); overflow: hidden; isolation: isolate; }
.r16-teaser::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 70% at 78% 50%, rgba(18,227,188,.14), rgba(18,227,188,0) 70%); }
.r16-teaser-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 460px; }
.r16-teaser .h16-ceja { color: var(--mint); }
.r16-teaser .h16-h3 { color: var(--white); }
.r16-teaser .h16-h3 em { font-style: normal; color: var(--mint); }
.r16-teaser .h16-p { color: var(--h16-soft-dark); }
.r16-teaser .h16-k { color: var(--mint); background: none; padding: 0; }
.r16-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.r16-teaser .r16-escena { aspect-ratio: 1.3; }

/* ══ RECURSOS · escaparate ══ */
.r16-hero-kit { position: relative; width: 100%; aspect-ratio: 1.15; }
.r16-hero-kit figure { position: absolute; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.25); }
.r16-hero-kit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r16-kit-1 { left: 0; top: 4%; width: 66%; aspect-ratio: 1024 / 724; --r: -5deg; }
.r16-kit-2 { right: 0; top: 30%; width: 62%; aspect-ratio: 1024 / 724; --r: 4deg; }
.r16-kit-3 { left: 12%; bottom: 0; width: 26%; aspect-ratio: 300 / 424; --r: -8deg; border-radius: 7% / 5%; }
.r16-kit-4 { left: 34%; bottom: 3%; width: 26%; aspect-ratio: 300 / 424; --r: 6deg; border-radius: 7% / 5%; }
.h16-js .r16-hero-kit figure { opacity: 0; transform: translateY(40px) rotate(0deg) scale(.96); transition: opacity .6s ease, transform 1.1s var(--h16-ease); transition-delay: calc(.35s + var(--i) * .14s); }
.r16-hero-kit.is-on figure { opacity: 1; transform: rotate(var(--r)); }
html.h16-js:not(.h16-visto) .r16-hero-kit figure { transition-delay: calc(1.3s + var(--i) * .14s); }

/* Destacado */
.r16-destacado { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.r16-pantalla { position: relative; border-radius: 22px; overflow: hidden; background: var(--off); border: 1.5px solid var(--line); box-shadow: 0 32px 64px -40px rgba(9,16,14,.45); }
.r16-pantalla img { display: block; width: 100%; height: auto; }
.r16-pantalla--oscura { border-color: rgba(255,255,255,.12); background: var(--ink-soft); }
.r16-destacado-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.r16-destacado-texto .p16-lista { margin: 8px 0; }

/* Filtro */
.r16-filtro { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.r16-filtro button { min-height: 44px; padding: 0 20px; border-radius: 50px; border: 1.5px solid var(--h16-chip-line); background: var(--white); color: var(--ink);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.r16-filtro button:hover { border-color: var(--mint); }
.r16-filtro button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.r16-filtro-n { margin-left: 6px; font-weight: 600; opacity: .6; }

/* Fichas */
.r16-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.r16-fichas > li { display: flex; }
.r16-fichas > li[hidden] { display: none; }
.r16-ficha { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--white); border: 1.5px solid var(--line); border-radius: 24px; overflow: hidden;
  color: var(--ink); text-decoration: none; transition: transform .3s var(--h16-ease), border-color .3s ease, box-shadow .3s ease; }
a.r16-ficha:hover, a.r16-ficha:focus-visible { transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 16px 40px -24px rgba(9,16,14,.25); }
.r16-ficha-img { position: relative; display: block; aspect-ratio: 1024 / 724; overflow: hidden; background: var(--mint-bg); border-bottom: 1.5px solid var(--line); }
.r16-ficha-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--h16-ease); }
a.r16-ficha:hover .r16-ficha-img img { transform: scale(1.03); }
.r16-ficha-icono { display: grid; place-items: center; aspect-ratio: 1024 / 724; background: var(--dark); border-bottom: 1.5px solid var(--line); color: var(--mint); }
.r16-ficha-icono svg { width: 56px; height: 56px; }
.r16-ficha-icono small { display: block; margin-top: 16px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .8rem; color: var(--h16-soft-dark); text-align: center; padding: 0 16px; }
.r16-ficha-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 24px 28px; flex: 1; }
.r16-ficha-cuerpo .p16-card-titulo { font-size: 1.25rem; }
.r16-ficha-cuerpo .p16-texto { font-size: .95rem; line-height: 1.65; }
.r16-ficha-ir { margin-top: auto; padding-top: 8px; font-size: .9rem; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--mint); }
.r16-ficha-acceso { position: absolute; top: 16px; left: 16px; z-index: 1; }
.r16-ficha--proxima { border-style: dashed; border-color: var(--h16-chip-line); background: transparent; }
.r16-ficha--proxima .r16-ficha-cuerpo { justify-content: center; padding: 40px 28px; }
.r16-ficha--proxima .r16-mas { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mint-pale); color: #0a5c4d; font-size: 1.6rem; font-weight: 800; }

/* ══ FICHA DE LA HERRAMIENTA ══ */
.dpi16-hero .h16-wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 48px; }
.dpi16-hero { min-height: 88vh; min-height: 88svh; display: flex; align-items: center; padding: 152px 0 104px; }
.dpi16-hero .h16-wrap { width: 100%; }
.dpi16-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 76% 50%, rgba(18,227,188,.13), rgba(18,227,188,0) 70%), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 70%); mask-image: linear-gradient(to right, transparent 30%, #000 70%); }
.dpi16-hero .p16-acciones { margin-top: 8px; }
.dpi16-nota { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--h16-soft-dark-2); max-width: 460px; }
.dpi16-nota a { color: var(--white); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Pasos */
.dpi16-pasos { counter-reset: none; }
.dpi16-paso { gap: 16px; }
/* Gráfico (captura de la herramienta) sin recorte, sobre el fondo de la propia app */
.r16-foto-grafico { background: #eef3f1; }
.r16-foto-grafico img { object-fit: contain; }
.dpi16-paso-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mint); color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.dpi16-paso .p16-card-titulo em { font-style: normal; color: var(--h16-mint-text); }

/* Demo: cinco cartas, una por área */
.dpi16-demo-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.dpi16-mano { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 8px 0 0; }
.dpi16-mano li { display: flex; flex-direction: column; gap: 16px; }
.dpi16-mano .r16-area { align-self: flex-start; }
.h16-js .dpi16-mano li { opacity: 0; transform: translateY(56px) rotate(var(--r, 0deg)); transition: opacity .5s ease, transform 1s var(--h16-ease); transition-delay: calc(var(--i) * 110ms); }
.dpi16-mano.is-on li { opacity: 1; transform: none; }
.dpi16-mano li:nth-child(1) { --r: -6deg; } .dpi16-mano li:nth-child(2) { --r: -3deg; } .dpi16-mano li:nth-child(4) { --r: 3deg; } .dpi16-mano li:nth-child(5) { --r: 6deg; }

/* Qué te llevas: informe en dos capas */
.dpi16-informe { position: relative; padding: 0 0 12% 0; }
.dpi16-informe .r16-pantalla + .r16-pantalla { position: absolute; right: -4%; bottom: 0; width: 42%; }
.dpi16-informe .dpi16-capa2 { transform: rotate(2deg); }

/* Sola/o o en equipo */
.dpi16-modos .p16-card { gap: 16px; padding: 36px; }
.dpi16-cifras { display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; margin: 0; padding: 0; }
.dpi16-cifras li { display: flex; flex-direction: column; gap: 4px; }
.dpi16-cifras strong { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.dpi16-cifras li > span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }

/* ── Menciones en otras páginas: tarjeta enlazada compacta ── */
.r16-mencion { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 28px 20px 20px; border-radius: 24px;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .3s var(--h16-ease), border-color .3s ease, box-shadow .3s ease; }
a.r16-mencion:hover, a.r16-mencion:focus-visible { transform: translateY(-4px); border-color: var(--mint); box-shadow: 0 16px 40px -24px rgba(9,16,14,.25); }
.r16-mencion-img { position: relative; height: 112px; }
.r16-mencion-img img { position: absolute; top: 50%; width: 56px; height: auto; aspect-ratio: 300 / 424; border-radius: 6px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); transition: transform .5s var(--h16-ease); }
.r16-mencion-img img:nth-child(1) { left: 6px; transform: translateY(-50%) rotate(-9deg); }
.r16-mencion-img img:nth-child(2) { left: 28px; transform: translateY(-54%) rotate(1deg); z-index: 1; }
.r16-mencion-img img:nth-child(3) { left: 50px; transform: translateY(-50%) rotate(10deg); }
a.r16-mencion:hover .r16-mencion-img img:nth-child(1) { transform: translateY(-50%) translateX(-6px) rotate(-14deg); }
a.r16-mencion:hover .r16-mencion-img img:nth-child(3) { transform: translateY(-50%) translateX(6px) rotate(15deg); }
.r16-mencion-txt { display: flex; flex-direction: column; gap: 6px; }
.r16-mencion-txt b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.r16-mencion-txt span { font-size: .92rem; line-height: 1.55; color: var(--h16-text); }
.r16-mencion-ir { font-size: .9rem; font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--mint); }
.r16-mencion--oscura { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: var(--white); }
.r16-mencion--oscura .r16-mencion-txt span { color: var(--h16-soft-dark); }
a.r16-mencion--oscura:hover, a.r16-mencion--oscura:focus-visible { border-color: var(--mint); box-shadow: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .r16-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dpi16-mano { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .r16-teaser { padding: 48px 40px 40px; gap: 32px; }
}
@media (max-width: 860px) {
  .dpi16-hero { min-height: 0; padding: 128px 0 88px; }
  .dpi16-hero .h16-wrap, .r16-destacado, .r16-teaser { grid-template-columns: 1fr; }
  .dpi16-hero .r16-escena { max-width: 560px; }
  .r16-teaser { padding: 40px 32px 32px; }
  .r16-teaser .r16-escena { max-width: 520px; justify-self: center; }
  .dpi16-demo-cab { grid-template-columns: 1fr; gap: 16px; }
  /* La mano se desliza en horizontal dentro de su carril (sin scroll de página) */
  .dpi16-carril { margin: 0 -40px; padding: 0 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dpi16-carril::-webkit-scrollbar { display: none; }
  .dpi16-mano { grid-template-columns: repeat(5, 42vw); width: max-content; padding: 8px 40px 16px 0; }
  .dpi16-mano li { scroll-snap-align: center; }
  .dpi16-informe { padding-bottom: 16%; }
  .r16-hero-kit { max-width: 520px; }
}
@media (max-width: 720px) {
  .r16-fichas { grid-template-columns: 1fr; }
  .r16-teaser { padding: 32px 20px 24px; border-radius: 24px; }
  .dpi16-carril { margin: 0 -20px; padding: 0 20px; }
  .dpi16-mano { grid-template-columns: repeat(5, 58vw); gap: 16px; padding-right: 20px; }
  .dpi16-modos .p16-card { padding: 28px 24px; }
  .dpi16-cifras strong { font-size: 2rem; }
  .r16-mencion { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px 20px 16px 12px; }
  .r16-mencion-img { height: 96px; }
  .r16-mencion-img img { width: 46px; }
  .r16-mencion-img img:nth-child(2) { left: 22px; } .r16-mencion-img img:nth-child(3) { left: 38px; }
  .r16-mencion-ir { grid-column: 2; justify-self: start; }
  .dpi16-informe .r16-pantalla + .r16-pantalla { right: -2%; width: 46%; }
}

/* Versión quieta (?sin-animaciones=1 sin h16-forzar-anim) */
@media (prefers-reduced-motion: reduce) {
  body:not(.h16-forzar-anim) .r16-escena *, body:not(.h16-forzar-anim) .dpi16-mano li, body:not(.h16-forzar-anim) .r16-hero-kit figure,
  body:not(.h16-forzar-anim) .r16-carta-in { transition: none !important; }
}
.r16-quieta .r16-escena *, .r16-quieta .dpi16-mano li, .r16-quieta .r16-hero-kit figure { transition: none !important; }
.dpi16-hitos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; }
@media (max-width: 720px) { .dpi16-hitos { grid-template-columns: 1fr; } }
.r16-ficha-icono > span { display: flex; flex-direction: column; align-items: center; }
.r16-ficha-acceso .r16-acceso--comunidad { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.r16-ficha-acceso .r16-acceso { box-shadow: 0 4px 14px -6px rgba(9,16,14,.35); }
.r16-ficha-icono small { overflow-wrap: anywhere; max-width: 100%; }
.dpi16-cifras li { flex: 0 0 auto; }
.dpi16-cifras strong { display: inline-flex; align-self: flex-start; }