/* Pagina de cada proyecto a medida (/a-medida/<proyecto>).
   Prefijo pj- para no chocar con el resto del sitio. Reusa los tokens de :root de
   /estilos.css (--acento, --fondo, --borde...) y los componentes compartidos
   (.wrap, .contacto, .btn). Los botones "Ver" y el modal vienen de demos.css. */

/* Esta pagina no es de scroll con "snap" (eso es de la home): app.js le pone
   scroll-snap-type al <html> en todo el sitio y aca se anula. */
html { scroll-snap-type: none !important; }

/* ── Portada ── */
.pj-hero { background: var(--acento) radial-gradient(60% 130% at 95% 70%, rgba(63,182,255,.38), transparent 66%); color: #fff; padding: 3rem 0 5.2rem; }
.pj-hero .wrap, .pj-ficha-wrap.wrap { max-width: 1040px; }   /* mismo ancho que las secciones: todo comparte el borde izquierdo */
.pj-volver { display: flex; width: fit-content; align-items: center; gap: .45rem; color: rgba(255,255,255,.85); font-weight: 700; font-size: .9rem; text-decoration: none; margin-bottom: 2.4rem; }
.pj-volver:hover { color: #fff; }
.pj-volver svg { width: 16px; height: 16px; }
.pj-eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .4rem .9rem; margin-bottom: 1.2rem; }
.pj-hero h1 { font-size: clamp(2.2rem, 6vw, 3.7rem); font-weight: 900; line-height: 1.04; margin: 0 0 1.2rem; letter-spacing: -.025em; text-wrap: balance; }
.pj-hero h1 span { color: #b9e4ff; }
.pj-hero p { font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.6; color: rgba(255,255,255,.92); margin: 0; max-width: 640px; text-wrap: pretty; }
.pj-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.pj-hero .am-ver { margin: 0; padding: .85rem 1.3rem; font-size: .98rem; background: #fff; color: var(--acento); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.pj-hero .am-ver:hover { background: var(--acento-suave); }
.pj-hero .am-ver--sec { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.42); }
.pj-hero .am-ver--sec:hover { background: rgba(255,255,255,.26); }

/* ── Ficha tecnica (resumen que se lee de un vistazo) ── */
.pj-ficha-wrap { margin-top: -2.6rem; position: relative; z-index: 2; }
.pj-ficha { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border: 1px solid var(--borde); border-radius: 1.1rem; box-shadow: 0 18px 44px rgba(36,59,90,.12); margin: 0; overflow: hidden; }
.pj-ficha > div { padding: 1.1rem 1.2rem; border-right: 1px solid var(--borde); }
.pj-ficha > div:last-child { border-right: none; }
.pj-ficha dt { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); margin-bottom: .35rem; }
.pj-ficha dd { margin: 0; font-size: .88rem; font-weight: 700; line-height: 1.4; color: var(--acento-osc); }
.pj-ficha .pj-ok { display: inline-block; font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px; background: #dcfce7; color: #16a34a; }
@media (max-width: 900px) {
  .pj-ficha { grid-template-columns: repeat(2, 1fr); }
  .pj-ficha > div { border-bottom: 1px solid var(--borde); }
  .pj-ficha > div:nth-child(2n) { border-right: none; }
  .pj-ficha > div:last-child { grid-column: 1 / -1; border-bottom: none; }
}

/* ── Secciones ── */
.pj-sec { padding: 4.2rem 0; }
.pj-sec--fondo { background: var(--fondo); }
.pj-sec .wrap { max-width: 1040px; }
.pj-tit { max-width: 680px; margin-bottom: 2.2rem; }
.pj-tit .pj-lbl { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: .6rem; }
.pj-tit h2 { margin: 0 0 .7rem; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--acento-osc); text-wrap: balance; }
.pj-tit p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--tenue); text-wrap: pretty; }

/* ── El desafio ── */
.pj-retos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.pj-reto { background: #fff; border: 1px solid var(--borde); border-radius: 1.1rem; padding: 1.5rem 1.5rem 1.4rem; display: flex; gap: 1.1rem; }
.pj-reto-n { flex-shrink: 0; width: 38px; height: 38px; border-radius: .7rem; background: var(--acento-suave); color: var(--acento); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.pj-reto h3 { margin: 0 0 .4rem; font-size: 1.08rem; font-weight: 800; line-height: 1.25; color: var(--acento-osc); }
.pj-reto p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--tenue); }
@media (max-width: 760px) { .pj-retos { grid-template-columns: 1fr; } }

/* ── Como funciona ── */
.pj-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: paso; }
.pj-paso { position: relative; background: #fff; border: 1px solid var(--borde); border-radius: 1.1rem; padding: 1.3rem 1.2rem 1.2rem; }
.pj-paso::before { counter-increment: paso; content: counter(paso); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 900; margin-bottom: .9rem; }
.pj-paso h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; color: var(--acento-osc); }
.pj-paso p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--tenue); }
.pj-pasos--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pj-pasos, .pj-pasos--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pj-pasos, .pj-pasos--3 { grid-template-columns: 1fr; } }

.pj-video { margin: 2rem 0 0; }
.pj-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 1.1rem; background: #F2E9D8; box-shadow: 0 22px 60px rgba(36,59,90,.18); }
.pj-video figcaption { margin-top: .8rem; font-size: .85rem; color: var(--tenue); text-align: center; }
.pj-mas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.4rem; justify-content: center; }
.pj-mas .am-ver { margin: 0; }

/* ── Los equipos ── */
.pj-equipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pj-eq { background: #fff; border: 1px solid var(--borde); border-radius: 1.2rem; overflow: hidden; display: flex; flex-direction: column; }
.pj-eq-img { background: #eef2f7; display: flex; align-items: center; justify-content: center; padding: 1rem 1rem .4rem; height: 232px; box-sizing: border-box; }   /* altura fija: ilustraciones y fotos arrancan parejas */
.pj-eq-img svg { width: 100%; max-width: 260px; height: auto; display: block; }
/* Foto real del equipo: fondo blanco del original se funde con el del cuadro (multiply) */
.pj-eq-img--foto { padding: .8rem; }
.pj-eq-img img { display: block; max-width: 100%; max-height: 208px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.pj-eq-cuerpo { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.pj-eq-tag { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); background: var(--acento-suave); border-radius: 999px; padding: .22rem .6rem; }
.pj-eq h3 { margin: 0; font-size: 1.2rem; font-weight: 900; line-height: 1.15; color: var(--acento-osc); }
.pj-eq p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--tenue); }
/* min-height: las tres listas tecnicas arrancan a la misma altura aunque el parrafo de arriba sea mas corto */
.pj-eq dl { margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--borde); display: grid; align-content: start; gap: .55rem; min-height: var(--pj-dl, 13.4rem); }   /* cada pagina ajusta --pj-dl al largo de sus textos */
.pj-eq dt { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.pj-eq dd { margin: .1rem 0 0; font-size: .86rem; line-height: 1.45; font-weight: 600; color: var(--acento-osc); }
@media (max-width: 920px) { .pj-equipos { grid-template-columns: 1fr; } .pj-eq-img svg { max-width: 300px; } }

/* ── Arquitectura ── */
.pj-arq { background: #fff; border: 1px solid var(--borde); border-radius: 1.3rem; padding: 1.4rem 1.2rem 1rem; box-shadow: 0 14px 40px rgba(36,59,90,.07); }
.pj-arq svg { display: block; width: 100%; height: auto; }
.pj-arq text { font-family: "Montserrat", system-ui, sans-serif; }
.pj-arq-nota { margin: .8rem .4rem .2rem; font-size: .88rem; line-height: 1.6; color: var(--tenue); text-align: center; text-wrap: balance; }
/* Dos versiones del diagrama: horizontal en escritorio, vertical en celular (la horizontal
   achicada a 390px dejaba el texto ilegible y obligaba a deslizar de costado). */
.pj-arq-v { display: none !important; }
@media (max-width: 760px) {
  .pj-arq-h { display: none !important; }
  .pj-arq-v { display: block !important; max-width: 400px; margin: 0 auto; }
  .pj-arq { padding: 1.2rem .8rem .8rem; }
}

/* ── Decisiones de diseño ── */
.pj-decs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pj-dec { background: #fff; border: 1px solid var(--borde); border-radius: 1.2rem; padding: 1.5rem 1.4rem; }
.pj-dec-ico { width: 46px; height: 46px; border-radius: .9rem; background: var(--acento-suave); color: var(--acento); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.pj-dec-ico svg { width: 24px; height: 24px; }
.pj-dec h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; line-height: 1.25; color: var(--acento-osc); }
.pj-dec p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--tenue); }
@media (min-width: 861px) { .pj-dec h3 { min-height: 2.5em; } }   /* titulos de 1 y 2 lineas: los parrafos arrancan parejos */
@media (max-width: 860px) { .pj-decs { grid-template-columns: 1fr; } }

/* ── Tecnologia ── */
.pj-stack { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.pj-stack span { font-size: .8rem; font-weight: 700; color: var(--acento-osc); background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: .4rem .85rem; }

/* Boton-enlace con el estilo de los botones "Ver" secundarios de la portada (ej. "Mirar el video"). */
.pj-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: .7rem; font-weight: 800; font-size: .98rem; text-decoration: none; cursor: pointer; transition: background .18s, transform .12s; }
.pj-btn svg { width: 15px; height: 15px; }
.pj-btn:active { transform: scale(.97); }
.pj-hero .pj-btn { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.42); }
.pj-hero .pj-btn:hover { background: rgba(255,255,255,.26); }