/* Portafolio — templates/archive-portafolio.html, single-portafolio.html.
   Mismo criterio que blog.css: estiliza las clases que ya genera el Query
   Loop en vez de reinventar la estructura. */

/*
 * Portafolio = vitrina de agencia: se hojea, no se lee — la comparación
 * entre casos importa más que el detalle de cada uno, por eso el primer
 * caso (el más reciente) se destaca a doble ancho ("spotlight") con solo
 * CSS (:first-child), sin necesitar una consulta aparte.
 */
.pf-hero{padding:3.5rem 0 2.5rem;text-align:center}
.pf-hero .section-intro{margin:0 auto}
.pf-services-teaser{text-align:center;background:var(--gray-100)}
.pf-services-teaser .section-intro{margin:0 auto 1.5rem}
.pf-archive{padding-bottom:4rem}
.pf-archive .section-title{margin-top:.5rem}

.pf-grid .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;list-style:none;margin:2rem 0 0;padding:0}
.pf-grid .wp-block-post{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.pf-grid .wp-block-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pf-grid .wp-block-post-featured-image{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--gray-100)}
.pf-grid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block}
.pf-grid .wp-block-post-title{padding:1.1rem 1.5rem 0;font-size:1.05rem;margin:0}
.pf-grid .wp-block-post-title a{color:var(--black)}
.pf-grid .wp-block-post-title a:hover{color:var(--purple)}
.pf-grid .wp-block-post-excerpt{padding:.5rem 1.5rem 1.5rem;font-size:.88rem;color:var(--green-dark);font-weight:600}

/* Caso destacado (el más reciente): doble ancho, imagen a la izquierda,
   texto más grande a la derecha — igual que la pieza "hero" de un
   portafolio de agencia real. */
.pf-grid .wp-block-post-template > .wp-block-post:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.pf-grid .wp-block-post-template > .wp-block-post:first-child .wp-block-post-featured-image{aspect-ratio:auto;height:100%;min-height:280px}
.pf-grid .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title{font-size:1.5rem;padding:2rem 2rem 0}
.pf-grid .wp-block-post-template > .wp-block-post:first-child .wp-block-post-excerpt{padding:.75rem 2rem 2rem;font-size:1.05rem}
@media (max-width:780px){.pf-grid .wp-block-post-template > .wp-block-post:first-child{grid-column:auto;grid-template-columns:1fr}.pf-grid .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title{font-size:1.05rem;padding:1.1rem 1.5rem 0}.pf-grid .wp-block-post-template > .wp-block-post:first-child .wp-block-post-excerpt{padding:.5rem 1.5rem 1.5rem;font-size:.88rem}}

.pf-grid .wp-block-query-pagination{grid-column:1/-1;margin-top:1rem;display:flex;justify-content:center;gap:.75rem;font-size:.9rem;font-weight:600}
.pf-grid .wp-block-query-pagination a{color:var(--green-dark)}
.pf-grid .wp-block-query-pagination .wp-block-query-pagination-numbers .current{color:var(--purple)}

@media (max-width:980px){.pf-grid .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.pf-grid .wp-block-post-template{grid-template-columns:1fr}}

/*
 * Caso de estudio individual: se lee como una historia con desenlace, no
 * como un artículo — situación → reto → enfoque → resultado, con el
 * resultado destacado en su propia tarjeta (acento verde = desenlace
 * positivo, mismo código de color que el resto del sitio usa para
 * "resuelto"/"aprobado").
 */
.pf-single{padding:3rem 0 4rem}
.pf-single-wrap{max-width:780px}
.pf-back{display:inline-block;margin-bottom:1.5rem;font-size:.88rem;font-weight:600;color:var(--green-dark)}
.pf-back:hover{text-decoration:underline}
.pf-single .wp-block-post-title{margin-bottom:.6rem;font-size:clamp(1.7rem,3vw,2.2rem)}
.pf-single-lead{font-size:1.12rem;line-height:1.55;color:var(--green-dark);font-weight:700;margin-bottom:1.75rem}
.pf-single .wp-block-post-featured-image{margin:0 0 2.25rem;border-radius:var(--r-lg);overflow:hidden}

.pf-single .wp-block-post-content{font-size:1.02rem;line-height:1.75;color:var(--gray-700)}
.pf-single .wp-block-post-content > p{margin-bottom:1.25rem}
.pf-single .wp-block-post-content h2{display:flex;align-items:center;gap:.65rem;font-size:1.25rem;margin:2.25rem 0 1rem}
.pf-single .wp-block-post-content h2::before{content:'';flex:none;width:26px;height:3px;border-radius:2px;background:var(--purple)}
.pf-single .wp-block-post-content > ul{margin:0 0 1.25rem 1.1rem}
.pf-single .wp-block-post-content > ul > li{margin-bottom:.5rem;color:var(--gray-700)}

/* La tarjeta de resultado — lo primero que se lee al llegar a esa
   sección, aunque el ojo se salte el resto del párrafo. */
.pf-result{background:var(--green-soft);border:1px solid rgba(46,185,143,.3);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin:0 0 1.5rem}
.pf-result strong{display:block;color:var(--green-dark);font-family:var(--serif-h);font-size:1.15rem;margin-bottom:.35rem}
.pf-result-note{font-style:italic;color:var(--gray-500);font-size:.86rem;margin-bottom:1.75rem}

.pf-cta{margin-top:2.5rem;padding:2rem;background:var(--gray-100);border-radius:var(--r-lg);text-align:center}
.pf-cta p{margin-bottom:1rem;color:var(--gray-700);font-size:1.02rem}