/* Bloque «Elige el sabor que te apetece» (bocono-perfiles-portada.php). Tarjetas de la guía: superficie blanca, borde
   de 1,5 px carbón, radio 2, sin sombra; la foto 4:3 y sin radio. Los selectores con `#content` ganan a las reglas del
   tema de producción (titulares centrados con !important, `#content p` sin ancho máximo). */
html body #content .bnc-perfiles { margin: 0 0 56px; padding: 0; max-width: none; }
html body #content .bnc-perfiles__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin: 0 0 28px; }
html body #content .bnc-perfiles .bnc-perfiles__titulo { margin: 0; text-align: left !important; text-align-last: left !important; }
html body #content .bnc-perfiles .bnc-perfiles__intro { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.55; }

html body #content .bnc-perfiles__rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
html body #content .bnc-perfiles__tarjeta { margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface, #fff); border: var(--stroke, 1.5px) solid var(--border, #252626); border-radius: var(--radius, 2px); box-shadow: none; }
html body #content .bnc-perfiles__foto { display: block; margin: 0; }
html body #content .bnc-perfiles__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; border-bottom: var(--stroke, 1.5px) solid var(--border, #252626); box-shadow: none; }
html body #content .bnc-perfiles__cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 18px 18px 20px; }
/* El tema de producción centra los titulares con `text-align` y `text-align-last` !important: los dos, a la izquierda. */
html body #content .bnc-perfiles .bnc-perfiles__nombre { margin: 0; font-size: 19px; line-height: 1.15; text-align: left !important; text-align-last: left !important; }
html body #content .bnc-perfiles .bnc-perfiles__nombre a { color: inherit; text-decoration: none; }
html body #content .bnc-perfiles .bnc-perfiles__nombre a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
html body #content .bnc-perfiles .bnc-perfiles__nombre .bnc-perfil-taza { font-size: 19px; margin: 0; gap: 9px; }
html body #content .bnc-perfiles .bnc-perfiles__nombre .bnc-perfil-taza i { width: 14px; height: 14px; }
html body #content .bnc-perfiles .bnc-perfiles__texto { margin: 0; max-width: none; font-size: 15px; line-height: 1.5; color: var(--ink, #252626); }
html body #content .bnc-perfiles .bnc-perfiles__cafes { margin: 0; max-width: none; font-size: 13px; line-height: 1.55; color: var(--ink-soft, #252626ad); }
html body #content .bnc-perfiles .bnc-perfiles__hoy { font-weight: 700; color: var(--ink, #252626); }
html body #content .bnc-perfiles .bnc-perfiles__cafes a { color: var(--ink-accent, #812326); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html body #content .bnc-perfiles .bnc-perfiles__enlace { margin-top: auto; padding-top: 10px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-weight: 700; font-size: 12.5px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-accent, #812326); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
html body #content .bnc-perfiles .bnc-perfiles__enlace:hover { color: var(--ink, #252626); }
html body #content .bnc-perfiles .bnc-perfiles__cierre { margin: 24px 0 0; max-width: 68ch; }

@media (max-width: 1024px) {
	html body #content .bnc-perfiles__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	html body #content .bnc-perfiles { margin-bottom: 40px; }
	html body #content .bnc-perfiles__cabeza { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
	html body #content .bnc-perfiles .bnc-perfiles__intro { font-size: 16px; }
	html body #content .bnc-perfiles__rejilla { gap: 12px; }
	html body #content .bnc-perfiles__cuerpo { padding: 12px 10px 14px; gap: 6px; }
	/* «CARAMELIZACIÓN» tiene que caber en una tarjeta de 165 px (teléfono de 375): el tamaño baja con la pantalla. */
	html body #content .bnc-perfiles .bnc-perfiles__nombre, html body #content .bnc-perfiles .bnc-perfiles__nombre .bnc-perfil-taza { font-size: clamp(11px, 3.4vw, 15px); letter-spacing: .08em; gap: 7px; }
	html body #content .bnc-perfiles .bnc-perfiles__nombre .bnc-perfil-taza i { width: 12px; height: 12px; }
	/* En una tarjeta de 170 px el justificado del móvil abre ríos entre palabras: aquí, a la izquierda (como en las
	   tarjetas de producto, que el tema también deja fuera del justificado). */
	html body #content .bnc-perfiles .bnc-perfiles__texto, html body #content .bnc-perfiles .bnc-perfiles__cafes { font-size: 13.5px; line-height: 1.45; text-align: left !important; -webkit-hyphens: manual !important; hyphens: manual !important; }
	html body #content .bnc-perfiles .bnc-perfiles__cafes { font-size: 12.5px; }
	html body #content .bnc-perfiles .bnc-perfiles__enlace { font-size: 11px; }
}