/* PORTFOLIO: el tema define tipografías, texto, enlaces y bordes.
 * La única excepción visual es el fondo gris solicitado para las tarjetas.
 * Las demás reglas organizan medidas, espacios y distribución. */
.p16-card { background-color: #F5F5F5; }

/* Listado: una tarjeta por fila. */
.p16-list { display: grid; gap: 32px; width: 100%; margin: 32px 0; }
/* Dos columnas: contenido a la izquierda e imagen a la derecha. */
.p16-card .p16-card__link { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 480px; }
.p16-card__copy { padding: 38px; display: flex; align-items: flex-start; flex-direction: column; }
.p16-card__client { margin: 0 0 24px; }
.p16-card__client span { margin-right: 10px; }
.p16-card h2 { margin: 0 0 46px; }
/* El margen automático sitúa los datos en la parte inferior del texto. */
.p16-card__facts { margin: auto 0 0; padding: 0; display: grid; gap: 12px; }
.p16-card__facts li { display: flex; gap: 13px; align-items: baseline; }
.p16-card__facts li > span { width: 22px; flex: none; }
.p16-card__cta { margin-top: 25px; }
.p16-card__cta span { margin-left: 12px; }
/* La imagen conserva su proporción y se muestra completa, sin recortes. */
.p16-card__visual { display: flex; align-items: center; justify-content: center; padding: 32px 32px 32px 0; min-width: 0; }
.p16-card__image { display: block; width: 100%; height: auto; max-height: 490px; object-fit: contain; }
.p16-card__placeholder { display: grid; place-items: center; min-height: 360px; width: 100%; }
/* Contenedores de las páginas propias, centrados y con ancho limitado. */
.p16-archive, .p16-detail { width: min(1120px, calc(100% - 48px)); margin: 64px auto; float: none !important; }
.p16-archive__header { max-width: 730px; margin-bottom: 48px; }
.p16-back { margin-bottom: 36px; }
.p16-detail__header { max-width: 940px; }
.p16-detail__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
.p16-detail__facts dt { margin-bottom: 8px; }
.p16-detail__facts dd { margin: 0; }
.p16-detail__cover { margin: 40px 0; }
.p16-detail__cover img { max-height: 650px; width: 100%; object-fit: contain; display: block; }
/* Cuerpo editorial más estrecho que la portada para facilitar la lectura. */
.p16-detail__content { max-width: 860px; margin: 48px auto; }
.p16-detail__content h2 { margin-top: 40px; }
.p16-detail__content .wp-block-gallery { margin: 32px 0; }
/* Móvil: apilamos contenido e imagen y reducimos espacios laterales. */
@media (max-width: 700px) {
    /* Dos columnas: contenido a la izquierda e imagen a la derecha. */
.p16-card .p16-card__link { grid-template-columns: 1fr; min-height: 0; }
    .p16-card__copy { padding: 28px; }
    .p16-card h2 { margin-bottom: 32px; }
    /* La imagen conserva su proporción y se muestra completa, sin recortes. */
.p16-card__visual { padding: 0 20px 24px; }
    .p16-card__image { max-height: 400px; }
    .p16-detail__facts { grid-template-columns: 1fr; gap: 16px; }
    /* Contenedores de las páginas propias, centrados y con ancho limitado. */
.p16-archive, .p16-detail { width: calc(100% - 32px); margin: 36px auto; }
    .p16-list { gap: 22px; }
}


/* Identidad del cliente: logo pequeño y proporcionado, también en la ficha. */
.p16-card__client { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.p16-card__client img.p16-client__logo { display: block; width: auto; height: auto; max-height: 30px; max-width: min(180px, 100%); object-fit: contain; }
/* SVG originales de Pixelarticons: currentColor conserva el color del tema. */
.p16-card__facts li { align-items: center; }
.p16-card__icon svg, .p16-card__cta svg { display: block; width: 24px; height: 24px; }
.p16-card__facts li > .p16-card__icon { width: 24px; flex: none; }
.p16-card__cta { display: inline-flex; align-items: center; }


/* Navegación y etiquetas: los iconos heredan el color del texto del tema. */
.p16-back a, .p16-detail__facts dt { display: flex; align-items: center; gap: 8px; }
.p16-back svg, .p16-detail__facts dt svg { width: 24px; height: 24px; flex: none; }
/* Reglas superior e inferior, y separadores entre las columnas de datos.
 * currentColor utiliza el color del tema sin introducir una nueva paleta. */
.p16-detail__facts { border-block: 1px solid currentColor; gap: 0; }
.p16-detail__facts > div { min-width: 0; padding: 24px; }
.p16-detail__facts > div + div { border-inline-start: 1px solid currentColor; }
/* En móvil los datos se apilan: el separador pasa a ser horizontal. */
@media (max-width: 700px) {
    .p16-detail__facts > div { padding: 20px 0; }
    .p16-detail__facts > div + div { border-inline-start: 0; border-block-start: 1px solid currentColor; }
}

/* La tarjeta completa es un único enlace: quitar su subrayado evita que se
 * propague al título, el cliente y los datos. !important contrarresta la regla
 * global del tema, pero queda limitado a las tarjetas del portfolio.
 * Los estados de interacción conservan el mismo criterio y el foco del tema. */
body .p16-list .p16-card a.p16-card__link,
body .p16-list .p16-card a.p16-card__link:is(:hover, :focus, :active, :visited) {
    text-decoration: none !important;
}
/* Solo la llamada a la acción lleva subrayado; el enlace sigue cubriendo
 * también el título y la imagen, sin añadir enlaces anidados. */
/* El texto tiene su propio elemento para dibujar el subrayado dentro del flex. */
body .p16-list .p16-card a.p16-card__link .p16-card__cta-label {
    margin-left: 0;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* La tarjeta conserva el color de texto de su contexto incluso en hover/foco.
 * Así el enlace global no recolorea el cliente, los datos ni sus iconos. */
body .p16-list .p16-card a.p16-card__link,
body .p16-list .p16-card a.p16-card__link:is(:hover, :focus, :active, :visited) {
    color: inherit !important;
}
/* Sombra solicitada, sin desplazar la tarjeta. El foco de teclado recibe
 * el mismo feedback y conserva el contorno accesible que establezca el tema. */
.p16-list .p16-card:hover,
.p16-list .p16-card:focus-within {
    box-shadow: 5px 5px #DB3260;
}
/* Usamos el color secundario global de Elementor, configurado por el sitio.
 * Si no está disponible, recurrimos al color de interacción de Astra. */
body .p16-list .p16-card a.p16-card__link:is(:hover, :focus-visible) .p16-card__cta {
    color: var(--e-global-color-secondary, var(--ast-global-color-1, currentColor));
}

/* La transición va en el estado base para suavizar tanto la entrada como la salida. */
.p16-list .p16-card {
    transition: box-shadow 300ms ease;
}
/* Respetamos la preferencia de reducir animaciones del sistema. */
@media (prefers-reduced-motion: reduce) {
    .p16-list .p16-card { transition: none; }
}