/* ══════════════════════════════════════════════════════════════════
   v16-proyectos.css — SOLO para proyectos-v16.php («Hecho en el laboratorio»)
   Se apoya en home-v16.css y v16-paginas.css. Clases propias con prefijo pv-.
   Mismo lenguaje de movimiento: solo transform/opacity; movimiento reducido = quieto.
   ══════════════════════════════════════════════════════════════════ */

/* Hero: anclas a los dos proyectos */
.pv-saltos { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pv-saltos a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 50px; border: 1px solid rgba(255,255,255,.28); color: var(--white); font-size: .88rem; font-weight: 700; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.pv-saltos a:hover { border-color: var(--mint); color: var(--mint); }
.pv-saltos small { font-size: .7rem; font-weight: 700; color: var(--h16-soft-dark-2); letter-spacing: .06em; }
.pv-hero-pie { margin: 10px 0 0; font-size: .78rem; color: var(--h16-soft-dark-2); }

/* Cómo nace un proyecto: tres pasos en línea */
.pv-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: pv; }
.pv-pasos li { counter-increment: pv; border-top: 2px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.pv-pasos li::before { content: "0" counter(pv); font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--h16-mint-text); }
.pv-pasos strong { font-size: 1.12rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.pv-pasos span { font-size: .95rem; line-height: 1.6; color: var(--h16-text); }

/* Proyecto: cabecera con logotipo pequeño */
.pv-proyecto { display: flex; flex-direction: column; gap: 40px; scroll-margin-top: 96px; }
.pv-cab { display: flex; align-items: center; gap: 18px; }
.pv-logo { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: var(--mint-pale); }
.pv-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-cab-txt { display: flex; flex-direction: column; gap: 6px; }

/* Vídeo estrella de CronoGuía */
.pv-video { position: relative; padding-bottom: 56.25%; border-radius: 28px; overflow: hidden; background: var(--ink-soft); }
.pv-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-video-ctrl { position: absolute; left: 20px; bottom: 20px; z-index: 2; min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,.4); background: rgba(9,16,14,.6); color: var(--white); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; display: none; align-items: center; gap: 8px; transition: border-color .2s ease, color .2s ease, transform .16s ease-out; }
.h16-js .pv-video-ctrl { display: inline-flex; }
.pv-video-ctrl:hover { border-color: var(--mint); color: var(--mint); }
.pv-video-ctrl:active { transform: scale(.97); }
.pv-video-ctrl svg { width: 14px; height: 14px; fill: currentColor; }
.pv-pie-foto { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--mid); }

/* Texto + ficha */
.pv-cuerpo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.pv-texto { display: flex; flex-direction: column; gap: 18px; }
.pv-ficha { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--line); border-radius: 24px; padding: 8px 28px; background: var(--white); }
.pv-ficha > div { padding: 18px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.pv-ficha > div:last-child { border-bottom: none; }
.pv-ficha dt { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h16-mint-text); }
.pv-ficha dd { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink); }
.pv-ficha dd a { padding: 19px 0 4px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--mint); }
.pv-ficha dd a:hover { color: var(--h16-mint-text); }
.p16-sec--off .pv-ficha { background: var(--white); }

/* Premio: discreto y profesional */
.pv-premio { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--mint-bg); border: 1px solid #cdeee5; text-decoration: none; color: var(--ink); transition: border-color .2s ease; }
a.pv-premio:hover { border-color: var(--mint); }
.pv-premio svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--h16-mint-text); margin-top: 2px; }
.pv-premio span { display: flex; flex-direction: column; gap: 4px; }
.pv-premio b { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h16-mint-text); }
.pv-premio em { font-style: normal; font-size: .95rem; line-height: 1.5; font-weight: 600; }
.pv-premio i { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--h16-mint-text); }

/* Galería de fotos reales */
.pv-galeria { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.pv-galeria figure { margin: 0; display: flex; flex-direction: column; }
.pv-galeria .h16-foto { padding-bottom: 75%; border-radius: 22px; }

/* Capturas de la app en marco de móvil */
.pv-moviles { display: flex; gap: 18px; justify-content: center; align-items: flex-end; list-style: none; margin: 0; padding: 0; }
.pv-moviles li { flex: 0 1 200px; }
.pv-moviles li:nth-child(2) { transform: translateY(-24px); }
.pv-movil { position: relative; padding-bottom: 199.3%; border-radius: 26px; overflow: hidden; border: 6px solid var(--ink); background: var(--ink); box-shadow: 0 24px 48px -28px rgba(9,16,14,.45); }
.pv-movil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pv-moviles figcaption { margin-top: 10px; font-size: .78rem; line-height: 1.4; text-align: center; color: var(--mid); }

/* Episodio de origen: miniatura con enlace a YouTube */
.pv-episodio { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; text-decoration: none; color: inherit; padding: 14px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--white); transition: border-color .25s ease, transform .25s ease-out; }
.pv-episodio:hover { border-color: var(--mint); transform: translateY(-3px); }
.pv-episodio-img { position: relative; padding-bottom: 56.25%; border-radius: 14px; overflow: hidden; background: var(--ink-soft); }
.pv-episodio-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-episodio-img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(9,16,14,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%2312E3BC'/%3E%3C/svg%3E") center/22px no-repeat; }
.pv-episodio-txt { display: flex; flex-direction: column; gap: 6px; }
.pv-episodio-txt b { font-size: 1.02rem; line-height: 1.35; font-weight: 800; }
.pv-episodio-txt span { font-size: .85rem; color: var(--mid); }

/* Bitácora (fondo oscuro) con foto de la presentación */
.pv-bitacora { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .pv-cuerpo, .pv-bitacora { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .pv-pasos { grid-template-columns: 1fr; }
  .pv-galeria { grid-template-columns: 1fr 1fr; }
  .pv-galeria figure:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pv-video { border-radius: 20px; }
  .pv-video-ctrl { left: 12px; bottom: 12px; }
  .pv-ficha { padding: 4px 20px; }
  .pv-episodio { grid-template-columns: 1fr; }
  .pv-moviles { gap: 10px; }
  .pv-moviles li:nth-child(2) { transform: translateY(-14px); }
  .pv-movil { border-width: 4px; border-radius: 18px; }
  .pv-logo { width: 52px; height: 52px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.h16-forzar-anim) .pv-episodio, body:not(.h16-forzar-anim) .pv-episodio:hover,
  body:not(.h16-forzar-anim) .pv-video-ctrl { transition: none; transform: none; }
}

/* Enlace dentro de un párrafo o de una lista */
.pv-enlace-txt { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--mint); padding: 17px 0 4px; }
.pv-enlace-txt:hover { color: var(--h16-mint-text); }

/* «También hecho en el laboratorio»: mención de la herramienta de la comunidad */
.pv-tambien { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding-top: 48px; border-top: 1.5px solid var(--line); }
.pv-tambien-tit { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--h16-mint-text); }