/*
 * Portafolio (templates/portafolio.php). Se carga despues de portada.css y
 * usa sus tokens y piezas (.ap-h1, .ap-lead, .ap-cierre, .ap-ico). Tarjetas
 * sueltas redondeadas como la portada v3; etiquetas en Sora, nada de
 * monoespaciada pequena (preferencia de Alejandro, 2026-09-25).
 */

/* ---------- cabecera y filtros ---------- */
.pf-hero { padding-block: 56px 8px; }
.pf-hero .ap-lead { margin-bottom: 0; max-width: 44em; }
.pf-sec { padding-block: 28px 72px; }

.pf-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.pf-filtros button {
	font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1;
	padding: 11px 16px; min-height: 44px; border-radius: 999px; cursor: pointer;
	background: var(--panel); color: var(--ink); border: 1px solid var(--cream-300);
}
.pf-filtros button span { color: var(--ink-500); font-weight: 700; margin-left: 4px; }
.pf-filtros button:hover { border-color: var(--green-200); }
.pf-filtros button[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.pf-filtros button[aria-pressed="true"] span { color: #fff; }
.pf-filtros button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---------- tarjetas ---------- */
.pf-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-card[hidden] { display: none; }
.ay-page a.pf-abrir {
	display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
	background: var(--panel); border: 1px solid var(--cream-300); border-radius: 20px; overflow: hidden;
	transition: transform 180ms cubic-bezier(.2, .7, .3, 1), border-color 180ms;
}
.ay-page a.pf-abrir:hover { transform: translateY(-3px); border-color: var(--green-200); }
.ay-page a.pf-abrir:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }
.pf-portada { aspect-ratio: 16 / 10; background: var(--green-50); border-bottom: 1px solid var(--cream-300); overflow: hidden; }
.pf-portada img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-portada-ico { display: flex; align-items: center; justify-content: center; }
.pf-portada-ico .ap-ico { width: 96px; height: 96px; border-radius: 26px; background: var(--panel); }
.pf-portada-ico .ap-ico svg { width: 58px; height: 58px; }
.pf-cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ay-portada .pf-cuerpo h2, .ay-portada .pf-cuerpo h3 {
	font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25;
	letter-spacing: -.01em; margin: 0; padding: 0; color: var(--ink);
}
.pf-cuerpo p { margin: 0; color: var(--ink-700); font-size: 15.5px; line-height: 1.5; }

.pf-estado {
	align-self: flex-start; font-family: var(--font-display); font-size: 13px; font-weight: 700;
	padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.pf-estado-a { background: var(--green-50); color: var(--green-800); }
.pf-estado-b { background: var(--amber-100); color: #7a5200; }

.pf-etiquetas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-etiquetas li {
	font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1;
	padding: 6px 10px; border-radius: 999px; background: var(--cream-50); border: 1px solid var(--cream-300); color: var(--ink-700);
}
.pf-cuerpo .pf-etiquetas { margin-top: auto; padding-top: 6px; }

/* ---------- el caso, en una ventana ---------- */
html:has(dialog.pf-caso[open]) { overflow: hidden; }
dialog.pf-caso {
	width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
	padding: 0; border: 0; border-radius: 24px; background: var(--cream-50); color: var(--ink);
	overscroll-behavior: contain;
}
dialog.pf-caso::backdrop { background: rgba(10, 58, 0, .62); }
/* Sin JS, el ancla muestra el caso en la pagina. */
dialog.pf-caso:target:not([open]) { display: block; position: static; margin: 24px auto; }
.pf-caso-in { position: relative; padding: 28px clamp(20px, 4vw, 44px) 36px; }
.pf-cerrar {
	position: sticky; top: 0; float: right; margin: -8px -12px 0 12px; z-index: 2;
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cream-300);
	background: var(--panel); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pf-cerrar svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.pf-cerrar:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.pf-caso-cabeza { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ay-portada .pf-caso-cabeza h2 {
	font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1;
	letter-spacing: -.03em; margin: 0; padding: 0; color: var(--ink); text-wrap: balance;
}
.pf-caso-cabeza p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-700); max-width: 44em; }

.pf-visuales { display: grid; gap: 16px; margin-bottom: 8px; }
.pf-fig { margin: 0; }
.pf-fig img, .pf-fig video { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--cream-300); background: var(--panel); }
.pf-fig figcaption { font-size: 14px; color: var(--ink-500); margin-top: 8px; text-align: center; }
.pf-marco { border: 1px solid var(--cream-300); border-radius: 14px; overflow: hidden; background: var(--panel); }
.pf-marco img { border: 0; border-radius: 0; }
.pf-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--cream-300); font-size: 13px; color: var(--ink-500); }
.pf-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--cream-300); }
.pf-barra span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-video.pf-vertical { max-width: 340px; margin-inline: auto; }
.pf-par, .pf-galeria { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* Antes y despues suelen ser verticales: acotados para que no ocupen dos pantallas. */
.pf-par { max-width: 640px; margin-inline: auto; width: 100%; }
.pf-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .pf-galeria { grid-template-columns: 1fr 1fr; } }
.pf-grafo img { background: var(--panel); }

/* Conversacion de ejemplo, en marco de telefono. */
.pf-chat { margin: 0 auto; width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--cream-300); border-radius: 22px; overflow: hidden; }
.pf-chat figcaption { font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 12px 16px; background: var(--green-950); color: #fff; }
.pf-msgs { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--cream-50); }
.pf-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pf-in { align-self: flex-start; background: var(--panel); border: 1px solid var(--cream-300); border-bottom-left-radius: 4px; }
.pf-out { align-self: flex-end; background: var(--green-100); border: 1px solid var(--green-200); border-bottom-right-radius: 4px; }
.pf-evento { align-self: center; font-family: var(--font-display); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--amber-600); color: #7a5200; background: var(--panel); }

/* Diagrama: pasos con flecha, en fila en pantallas anchas. */
.pf-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .pf-pasos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; } }
.pf-pasos li { position: relative; background: var(--panel); border: 1px solid var(--cream-300); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pf-pasos li:last-child { background: var(--green-50); border-color: var(--green-200); }
.pf-pasos b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.pf-pasos span { font-size: 14px; line-height: 1.4; color: var(--ink-500); }
.pf-pasos li + li::before {
	content: "\2193"; position: absolute; left: 50%; top: -10px; transform: translate(-50%, -50%);
	font-family: var(--font-display); font-weight: 700; color: var(--green-deep);
}
@media (min-width: 760px) {
	.pf-pasos li + li::before { content: "\2192"; left: -14px; top: 50%; }
}

.pf-audios { display: grid; gap: 10px; }
@media (min-width: 700px) { .pf-audios { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-audio-pie { grid-column: 1 / -1; } }
.pf-audio { display: grid; gap: 6px; background: var(--panel); border: 1px solid var(--cream-300); border-radius: 14px; padding: 12px 14px; }
.pf-audio span { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.pf-audio audio { width: 100%; }
.ay-portada .pf-audio-pie { margin: 2px 0 0; font-size: 14px; color: var(--ink-500); }

/* Texto del caso. */
.pf-texto { max-width: 46em; }
.ay-portada .pf-texto h3, .ay-portada .pf-mentes h3 {
	font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3;
	margin: 26px 0 8px; padding: 0; color: var(--ink);
}
.ay-portada .pf-texto p { margin: 0; color: var(--ink-700); font-size: 16.5px; line-height: 1.6; }
.pf-texto ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink-700); font-size: 16.5px; line-height: 1.55; }
.pf-texto .pf-etiquetas { margin: 0 0 10px; }

.pf-mentes ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .pf-mentes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-mentes li { background: var(--panel); border: 1px solid var(--cream-300); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.pf-mentes b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.pf-mentes span { font-size: 14px; line-height: 1.45; color: var(--ink-500); }
.ay-portada .pf-aviso { margin: 0; font-size: 14.5px; color: var(--ink-500); background: var(--amber-100); border-radius: 12px; padding: 10px 14px; }

.pf-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cream-300); }

/* En el celular, el caso ocupa toda la pantalla. */
@media (max-width: 640px) {
	dialog.pf-caso { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
	.pf-caso-in { padding: 18px 16px 32px; }
	.pf-par { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ay-page a.pf-abrir { transition: none; }
	.ay-page a.pf-abrir:hover { transform: none; }
}