/*
Theme Name: Boconó (Astra hijo)
Theme URI: https://boconospecialtycoffee.com
Description: Tema hijo de Astra para Boconó Specialty Coffee. Aquí viven la paleta, las tipografías y los ajustes propios, para que sobrevivan a las actualizaciones de Astra.
Author: Boconó
Template: astra
Version: 8.151
Text Domain: bocono
*/

/* Tokens de color web de la Guía UX/UI de Samantha (marca/bocono-guia-ux-ui-web.html, § 03),
   copiados tal cual. Los nombres antiguos (--bnc-*) quedan como alias de estos para que
   todo lo escrito antes tome los tonos web sin reescribirlo. */
:root {
	--bg:            #EFDDC3;   /* arena — fondo por defecto (18/9/2026, Carlos: «el de Codex me gusta más y aplica a toda la web») */
	--bg-alt:        #F2E8DA;   /* crema — sección alterna (antes era al revés) */
	--bg-invert:     #252626;   /* carbón — sección oscura */
	--surface:       #FFFFFF;   /* tarjetas y campos, nunca fondo de página */
	--ink:           #252626;
	--ink-soft:      #252626ad; /* 68 %: el 65 % de la guía da 4,44:1 sobre crema y AA pide 4,5; con 68 % sale 4,8 (16/9). Nunca inventar un gris nuevo */
	--ink-invert:    #F2E8DA;
	--ink-accent:    #812326;   /* vino — enlaces y texto de acento */
	--action:        #D37B2F;
	--action-hover:  #B56A28;
	--action-active: #9C5B23;
	--action-ink:    #252626;   /* texto sobre naranja — 4,8:1 AA */
	--focus:         #D37B2F;
	--border:        #252626;   /* 1,5 px sólido */
	--floral:        #C085A2;
	--frutal:        #812326;
	--caramelo:      #D37B2F;
	--caramelo-fondo:#DDA73E;   /* miel: el fondo de la banda sensorial de los caramelizados (18/9/2026, Carlos: «el tono más de miel caramelo» de Codex; el cuadrado del perfil sigue en naranja) */
	--descafeinado:  #FFFFFF;   /* blanco (18/9/2026, Carlos: «el descafeinado debe ir en su color, que es blanco; haz el cuadro igual que a todos los demás colores»). Antes era arena, y con el fondo de la web en arena desaparecía */
	--success:       #2E6B4F;
	--radius:        2px;
	--stroke:        1.5px;
	--linea-suave:   #25262633; /* carbón al 20 %: separadores internos */

	--bnc-naranja:  var(--action);
	--bnc-crema:    var(--bg);
	--bnc-rosa:     var(--floral);
	--bnc-granate:  var(--ink-accent);
	--bnc-carbon:   var(--ink);
	/* Oro de las valoraciones: la única excepción al código de color, decidida por Carlos el
	   12/9/2026. No clasifica nada: solo pinta las estrellas de las reseñas. Contraste 3,4:1
	   sobre el blanco de la tarjeta y 3,1:1 sobre el crema, por encima del 3:1 que pide la norma
	   para elementos gráficos. */
	--bnc-oro:      #C08A1E;
	--bnc-arena:    var(--bg-alt);
	--bnc-hueso:    var(--surface);
	--bnc-linea:    var(--linea-suave);
}

/* Las fuentes variables de Samantha (MARCA.md § 2), servidas desde el tema hijo con sus
   dos ejes: wght (100–900) y wdth (Anybody 50–150, Archivo 62–125). Antes Astra cargaba
   estáticas de Google (400/700, ancho 100) y el eje de ancho, que es el que marca la
   jerarquía del brand board, no existía. Subconjunto latino, woff2. */
@font-face { font-family: "Anybody"; src: url("fuentes/anybody.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; }
@font-face { font-family: "Anybody"; src: url("fuentes/anybody-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fuentes/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fuentes/archivo-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

/* Los cinco papeles del brand board. El ancho marca la jerarquía: 122 para gritar, 78 para el dato. */
.bnc-display  { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 122; text-transform: uppercase; }
.bnc-titular  { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 78; text-transform: uppercase; }
.bnc-cifra    { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 94; }
.bnc-etiqueta { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; letter-spacing: .2em; text-transform: uppercase; }
body          { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 400, "wdth" 100; }
b, strong     { font-variation-settings: "wght" 700, "wdth" 100; }

/* Escala de encabezados de la Guía UX/UI § 06 (valores medidos por Samantha). El ancho
   es parte de la jerarquía. Interlineado nunca por debajo de 1 para que la Í no pierda
   la tilde (bug conocido de Anybody). */
html body h1, html body .entry-title { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 112; text-transform: uppercase; font-size: 56px; line-height: 1; }
html body h2 { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 108; text-transform: uppercase; font-size: 36px; line-height: 1.05; }
html body h3 { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; text-transform: uppercase; font-size: 24px; line-height: 1.1; }
html body h4 { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; text-transform: uppercase; font-size: 18px; line-height: 1.15; }
html body h5 { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; text-transform: uppercase; letter-spacing: .16em; font-size: 14px; line-height: 1.3; }
html body h6 { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; line-height: 1.3; }
@media (max-width: 767px) {
	html body h1, html body .entry-title { font-size: 32px; }
	html body h2 { font-size: 26px; }
	html body h3 { font-size: 20px; }
	html body h4 { font-size: 17px; }
	html body h6 { font-size: 11px; }
}
.bnc-display { font-size: 88px; line-height: .95; letter-spacing: -.01em; }
@media (max-width: 767px) { .bnc-display { font-size: 44px; } }
/* El nombre de producto en tarjeta es un H4 de la guía (18 px, wdth 84, versales). */
.woocommerce-loop-product__title, h4.woocommerce-loop-product__title { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; text-transform: uppercase; font-size: 18px; line-height: 1.15; }

/* Aquí vivía el estilo de la franja de promesas de Astra (`.ast-above-header-bar
   .ast-builder-html-element` y `.bnc-promesa`). Se retira el 10/9/2026: los tres mensajes
   los pinta ahora `bocono-banda-superior.php` con su propio marcado, y el widget HTML de
   Astra que los contenía se ha vaciado (`astra-settings[header-html-1]`, copia en
   `_bnc_header_html_1_antes`). Tenerlo en los dos sitios repetía el texto en el HTML.
   Lo que queda de aquello está al final, en el bloque BANDA SUPERIOR. */
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
	font-family: "Anybody", "Archivo", system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}
/* El logo es la primera pantalla: nunca carga diferida ni marcador. */
.site-logo-img img { loading: eager; }

/* Sin sombras en ningún botón (guía de Samantha, § 02). Astra se las pone a todos desde el
   Customizer —`button, .button, input[type=submit]…` con 0 1px 2px al 5 %— y detrás del «+» de la
   tarjeta móvil se veía un cuadro gris (medido el 13/9 en el navegador). Mismos selectores y
   cargados después: gana esta. */
button, .ast-button, .button, input[type="button"], input[type="reset"], input[type="submit"],
a:where(.wp-block-button__link) { box-shadow: none; }

/* Botones: naranja con texto carbón, sin sombra, esquinas suaves. */
.ast-theme-transparent-header .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wp-block-button__link {
	background: var(--bnc-naranja);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wp-block-button__link:hover {
	background: var(--bnc-granate);
	color: #fff;
}

/* Bloques de botón de Gutenberg (Astra les pone más peso a sus reglas). */
.wp-block-button .wp-block-button__link.wp-element-button {
	background: var(--bnc-naranja);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
	border: 2px solid var(--bnc-naranja);
}
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	background: transparent;
	color: var(--bnc-granate);
	border-color: var(--bnc-granate);
}
.wp-block-button .wp-block-button__link.wp-element-button:hover {
	background: var(--bnc-granate);
	border-color: var(--bnc-granate);
	color: #fff;
}

/* Bloques de dato de la ficha de café: origen, perfil sensorial y receta. */
.bnc-bloques-cafe { margin: 1.2em 0 1.5em; }
.bnc-bloque { border-top: 1px solid var(--bnc-linea); padding: 1em 0; }
.bnc-bloque h2 { font-size: 1.05em; margin: 0 0 .6em; letter-spacing: .02em; text-transform: uppercase; }
.bnc-barras { list-style: none; margin: 0 0 .6em; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .4em 1.4em; }
.bnc-barras li { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.bnc-barras__pista { display: inline-flex; gap: 4px; }
.bnc-barras__pista i { width: 22px; height: 8px; border-radius: 4px; background: var(--bnc-arena); }
.bnc-barras__pista i.on { background: var(--bnc-naranja); }
.bnc-receta table { width: 100%; border-collapse: collapse; font-size: .95em; }
.bnc-receta th, .bnc-receta td { padding: .45em .6em; border-bottom: 1px solid var(--bnc-linea); text-align: left; }

/* Home: aire entre capas y preguntas frecuentes legibles. */
.bnc-home-marca { padding: 2.5rem 0 1.5rem; }
.bnc-home-marca .bnc-intro { font-size: 1.15em; max-width: 40em; }
.bnc-home-compra, .bnc-home-porque, .bnc-home-faq, .bnc-home-guia { padding: 1.5rem 0; }
.bnc-home-faq .wp-block-details { border-bottom: 1px solid var(--bnc-linea); padding: .6em 0; }
.bnc-home-faq .wp-block-details summary { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-weight: 600; cursor: pointer; }

/* Plantilla de ficha de café (bocono-plantilla-ficha-cafe.php): resumen. */
.bnc-chips { list-style: none; margin: .2em 0 .9em; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.bnc-chips li { background: var(--bnc-arena); border-radius: 999px; padding: .2em .8em; font-size: .85em; font-weight: 600; margin: 0; }
.bnc-tostado-por { font-size: .9em; color: #555; margin: .9em 0 0; }

/* Plantilla de ficha de café: secciones largas. */
.bnc-ficha-cafe { max-width: 46em; margin: 2rem auto 0; }
.bnc-seccion { border-top: 1px solid var(--bnc-linea); padding: 1.8em 0; }
.bnc-seccion > h2 { font-size: 1.35em; margin: 0 0 .7em; letter-spacing: .01em; }
.bnc-seccion h3 { font-size: 1.05em; margin: 1.3em 0 .4em; }
.bnc-seccion p:last-child { margin-bottom: 0; }
.bnc-seccion--el-cafe h2:not(:first-child), .bnc-seccion--el-cafe h3 { font-size: 1.1em; margin-top: 1.2em; }
.bnc-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; margin: 0 0 1em; }
.bnc-formato { display: block; border: 1px solid var(--bnc-linea); border-radius: 8px; padding: 1em; color: inherit; text-decoration: none; }
.bnc-formato--actual { border-color: var(--bnc-naranja); background: var(--bnc-hueso); }
.bnc-formato .bnc-cifra { display: block; font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.bnc-formato .bnc-precio { display: block; margin: .3em 0 .5em; font-weight: 600; }
.bnc-formato .bnc-porkilo { color: #666; font-weight: 400; font-size: .9em; }
.bnc-formato p { margin: 0; font-size: .92em; }
.bnc-lote { font-size: 1.05em; }
.bnc-metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8em; margin: 0 0 1em; }
.bnc-metodo { background: var(--bnc-hueso); border-radius: 8px; padding: .9em; }
.bnc-metodo h3 { margin: 0 0 .3em; font-size: 1em; }
.bnc-metodo .bnc-dosis { display: block; font-size: .95em; }
.bnc-metodo .bnc-molienda { display: block; margin-top: .5em; font-size: .72em; text-transform: uppercase; letter-spacing: .05em; color: var(--bnc-granate); font-weight: 600; }
.bnc-nota { font-size: .92em; color: var(--ink-soft); }
.bnc-sca__numero { font-size: 2.6em; font-weight: 700; color: var(--ink-accent); line-height: 1; margin: 0 0 .4em; } /* (13/9) iba en naranja sobre crema, 2,6:1: el naranja no escribe sobre claro; el vino sí (guía § 04) */
.bnc-faq details { border-bottom: 1px solid var(--bnc-linea); padding: .6em 0; }
.bnc-faq summary { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-weight: 600; cursor: pointer; }
.bnc-seccion--valoraciones #reviews { margin: 0; }

/* Plantilla de categoría (bocono-plantilla-categoria.php). */
.bnc-cat-intro { max-width: 64ch; margin: 0 0 1.5em; font-size: 1.08em; }
.bnc-cat-texto { max-width: 46em; margin: 2.5rem auto 0; border-top: 1px solid var(--bnc-linea); padding-top: 1.8em; }
.bnc-cat-faq { margin-top: 1.5em; }
.bnc-cat-faq h2 { font-size: 1.35em; margin: 0 0 .7em; }

/* Categoría de cafés 1.1: confianza, filtros, tabla, precio, vídeo, fotos. */
body .bnc-cat-confianza { display: flex; flex-wrap: wrap; gap: .4em .9em; margin: 0 0 1.4em; padding: 0; list-style: none; font-size: .92em; color: #4a4038; }
body .bnc-cat-confianza li { padding: .25em .7em; border: 1px solid var(--bnc-linea); border-radius: 999px; background: var(--bnc-hueso); }
.bnc-cat-confianza li.bnc-cat-estrellas { border-color: var(--bnc-naranja); color: var(--bnc-carbon); }
.bnc-cat-filtros { margin: 0 0 1.6em; }
.bnc-cat-filtros h2 { font-size: 1.15em; margin: 0 0 .5em; }
.bnc-cat-filtros .bnc-cat-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .5em; margin: 0 0 .45em; }
.bnc-cat-filtros .bnc-cat-rotulo { font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); min-width: 9em; }
body .bnc-cat-filtros a { display: inline-block; padding: .3em .8em; border: 1px solid var(--bnc-linea); border-radius: 999px; background: #fff; color: var(--bnc-carbon); text-decoration: none; font-size: .92em; }
.bnc-cat-filtros a:hover, .bnc-cat-filtros a.bnc-activo { border-color: var(--bnc-naranja); background: var(--bnc-crema); }
.bnc-cat-filtros a small { color: #7a6e64; margin-left: .3em; }
.bnc-cat-filtro-aviso { margin: 0 0 1.2em; padding: .6em .9em; background: var(--bnc-crema); border-radius: 6px; font-size: .95em; }
.bnc-cat-bloques { max-width: 60em; margin: 2.5rem auto 0; }
.bnc-cat-bloques h2 { font-size: 1.4em; margin: 0 0 .6em; }
.bnc-cat-bloques > section { margin: 0 0 2.6em; }
.bnc-cat-tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bnc-cat-tabla { width: 100%; border-collapse: collapse; font-size: .9em; min-width: 46em; }
.bnc-cat-tabla th, .bnc-cat-tabla td { padding: .55em .6em; border-bottom: 1px solid var(--bnc-linea); text-align: left; vertical-align: top; }
.bnc-cat-tabla th { background: var(--bnc-hueso); font-weight: 600; white-space: nowrap; }
.bnc-cat-tabla td.bnc-num, .bnc-cat-tabla th.bnc-num { text-align: right; white-space: nowrap; }
body .bnc-cat-tabla td a { color: var(--ink-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bnc-cat-tabla td a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.bnc-cat-tabla-nota { font-size: .85em; color: var(--ink-soft); margin: .5em 0 0; }
.bnc-cat-video { position: relative; aspect-ratio: 16 / 9; background: var(--bg-invert); border-radius: 0; overflow: hidden; }
.bnc-cat-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bnc-cat-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bnc-cat-video button { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(37, 38, 38, .45); border: 0; cursor: pointer; color: var(--ink-invert); font: 600 1.1em/1.3 inherit; text-shadow: none; }
.bnc-cat-video button::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto .5em; border-radius: 0; background: var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23252626' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/38px no-repeat; }
/* «En fotos» de una categoría: cada imagen conserva su proporción. Antes iban recortadas a 4:3 y
   con la esquina redondeada, y una sola se estiraba a todo el ancho del texto: la bolsa de Brasil
   salía como un cuadro pegado en mitad de la página (visto el 11/9 en pantalla). */
body .bnc-cat-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; align-items: start; }
body .bnc-cat-fotos li { margin: 0; }
/* Con el alto acotado, las apaisadas y las verticales quedan a la misma altura y la fila no sale
   dentada (las tres de Venezuela son de teléfono: dos verticales y una apaisada). */
.bnc-cat-fotos img { width: auto; max-width: 100%; height: auto; max-height: 26em; display: block; margin-inline: auto; }
/* Las láminas de origen son dibujo sobre blanco: multiplicadas, el blanco pasa a ser el crema. */
.bnc-cat-fotos img.bnc-sobre-blanco { mix-blend-mode: multiply; }
body .bnc-cat-fotos--una { grid-template-columns: minmax(0, 34em); justify-content: center; }
.bnc-cat-fotos figcaption { font-size: .85em; color: var(--ink-soft); margin-top: .4em; }
@media (max-width: 640px) {
	.bnc-cat-filtros .bnc-cat-rotulo { min-width: 100%; }
	.bnc-cat-bloques h2 { font-size: 1.25em; }
}

/* Plantilla de ficha de equipamiento (bocono-plantilla-ficha-equipo.php). */
/* Sin sombra (guía § 02): algo le ponía `0 0 30px` negro al 15 % al marco del vídeo, y sin
   el vídeo cargado se veía como una caja flotante vacía. */
.bnc-video { margin: 0; box-shadow: none !important; }
.bnc-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }
.bnc-tabla { width: 100%; border-collapse: collapse; font-size: .95em; }
.bnc-tabla th, .bnc-tabla td { padding: .5em .7em; border-bottom: 1px solid var(--bnc-linea); text-align: left; vertical-align: top; }
.bnc-tabla th { width: 32%; font-weight: 600; background: var(--bnc-hueso); }
.bnc-descarga { display: inline-block; }


/* Relatos (bocono-relatos.php): artículos de la guía montados desde campos. Portado del staging con la paleta de Samantha. */
.bnc-relato { --rel-l: var(--bnc-linea); --rel-s: var(--bnc-hueso); max-width: 760px; margin: 0 auto; line-height: 1.68; }
body.bnc-relato-activo .entry-header, body.bnc-relato-activo .entry-title, body.bnc-relato-activo .entry-meta { max-width: 760px; margin-left: auto; margin-right: auto; }
.bnc-rel-rotulo { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bnc-granate); font-weight: 700; margin: 0 0 12px; }
.bnc-rel-entradilla { font-size: 19px; line-height: 1.5; color: var(--ink); font-weight: 400; margin: 0 0 32px; }
.bnc-rel-entradilla p { margin: 0 0 14px; }
/* (13/9) Aquí iba la «banda de cifras» de los relatos (.bnc-rel-datos): retirada por Carlos. */
.bnc-rel-cuerpo { font-size: 16px; }
.bnc-relato .bnc-rel-cuerpo h2 { font-size: 36px; line-height: 1.05; margin: 48px 0 16px; }
.bnc-relato .bnc-rel-cuerpo h3 { font-size: 24px; line-height: 1.1; color: var(--ink-accent); margin: 32px 0 12px; }
.bnc-rel-cuerpo p { margin: 0 0 16px; }
.bnc-rel-cuerpo figure { margin: 26px 0; }
.bnc-rel-cuerpo figure img { width: 100%; height: auto; display: block; border-radius: 0; }
.bnc-rel-cuerpo figcaption, .bnc-rel-portada figcaption, .bnc-rel-video figcaption, .bnc-rel-fotos figcaption { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-top: 8px; }
.bnc-rel-cuerpo table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: .92rem; }
.bnc-rel-cuerpo th, .bnc-rel-cuerpo td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rel-l); }
.bnc-rel-portada { margin: 0 0 30px; }
.bnc-rel-portada-img { width: 100%; height: auto; display: block; border-radius: 0; max-height: 460px; object-fit: cover; object-position: center; }
.bnc-rel-video { margin: 34px 0; max-width: 1000px; }
.bnc-rel-video-v { max-width: 380px; margin-left: auto; margin-right: auto; }
.bnc-rel-video video { width: 100%; height: auto; display: block; border-radius: 0; background: var(--bg-invert); }
.bnc-rel-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 34px 0; }
.bnc-rel-fotos figure { margin: 0; }
.bnc-rel-foto { width: 100%; height: auto; display: block; border-radius: 0; }
.bnc-rel-fotos .bnc-rel-fig:not(.bnc-rel-fig-ancha) .bnc-rel-foto { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.bnc-rel-fotos .bnc-rel-fig-ancha { grid-column: 1 / -1; }
/* 7.98 (13/9/2026): sin `aspect-ratio: auto`. Chrome da `contain: size` a las imágenes con `sizes="auto"` (las
   perezosas de WordPress) y WordPress les pone `contain-intrinsic-size: 3000px 1500px`; con `auto` la foto perdía la
   proporción de sus atributos `width` y `height` y salía siempre a 480 px de alto, recortada. */
.bnc-rel-fotos .bnc-rel-fig-ancha .bnc-rel-foto { max-height: 480px; object-fit: cover; }
.bnc-rel-cita { margin: 32px 0; padding: 0 0 0 24px; border-left: var(--stroke) solid var(--border); }
.bnc-rel-cita blockquote { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); font-style: normal; border: 0; padding: 0; }
.bnc-rel-cita figcaption { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 12px; }
.bnc-rel-fuentes { margin: 48px 0 0; padding: 24px; background: var(--bg-alt); border: var(--stroke) solid var(--border); border-radius: var(--radius); }
.bnc-relato .bnc-rel-fuentes h2 { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 12px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.bnc-rel-fuentes ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.bnc-rel-fuentes li { margin: 0 0 7px; }
.bnc-rel-fuentes span, .bnc-rel-fuentes em { color: var(--ink); font-style: normal; }
.bnc-rel-faq { margin: 40px 0 0; }
.bnc-relato .bnc-rel-faq h2 { font-size: 36px; line-height: 1.05; margin: 0 0 16px; }
.bnc-rel-enlaces { margin: 48px 0 0; border-top: var(--stroke) solid var(--border); padding-top: 24px; }
.bnc-relato .bnc-rel-enlaces h2 { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 12px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.bnc-rel-enlaces ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
/* (13/9) `.entry-content ul { padding-left: 20px }` empata con la de arriba y va después: las tarjetas
   salían 20 px metidas respecto al texto. */
.entry-content .bnc-rel-enlaces ul { margin: 0; padding: 0; }
/* (13/9) Pie de las galerías de WordPress: el núcleo lo pone encima de la foto, en blanco con sombra sobre un
   degradado desenfocado, y en fotos claras no se lee (contraste). Va debajo, igual que el pie de cualquier foto. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none; display: none; }
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { position: static; background: none; color: rgba(37, 38, 38, .65); text-shadow: none; padding: 0; margin: 6.5px 0 0; max-height: none; overflow: visible; font-size: 13px; line-height: 1.6; text-align: start; }
html body .entry-content .bnc-rel-enlaces a:not(.button) { display: block; text-decoration: none; border: var(--stroke) solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); color: var(--ink); }
html body .entry-content .bnc-rel-enlaces a:not(.button):hover strong { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.bnc-rel-enlaces strong { display: block; color: var(--ink); font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 18px; line-height: 1.15; text-transform: uppercase; }
.bnc-rel-enlaces span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }

/* =========================================================================
   Ajuste al brand board de Samantha (MARCA.md, 9/9/2026, orden de Carlos: «así
   queremos todo»). Bloques rectos con borde fino, sin esquinas redondeadas; etiquetas
   en Archivo 700/82 espaciadas y en versales; cifras y valores en Anybody; fotos en
   bloque rectangular limpio. Va al final para pasar por encima de lo anterior.
   ====================================================================== */

/* La etiqueta del brand board, reutilizable. */
.bnc-etiqueta, .bnc-bloque h2, .bnc-origen dt, .bnc-barras__nombre, .bnc-metodo .bnc-molienda,
.bnc-cat-tabla th, .bnc-cat-filtros .bnc-cat-rotulo, .bnc-chips li, .bnc-rel-rotulo, .bnc-formato .bnc-porkilo {
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 700, "wdth" 82;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-size: .72em;
	color: var(--bnc-carbon);
}
.bnc-bloque h2 { margin: 0 0 .8em; }

/* Guía UX/UI § 02: fotografía a radio 0 y sin marco; botones, campos, tarjetas y chips a 2 px. */
.bnc-cat-fotos img, .bnc-cat-video, .bnc-video iframe, .bnc-rel-cuerpo figure img, .bnc-rel-portada-img,
.bnc-rel-video video, .bnc-rel-foto, .bnc-origen dl div, .bnc-barras__pista i, .wp-block-image img, .entry-content img,
.woocommerce-product-gallery img, .products img {
	border-radius: 0 !important;
}
.bnc-rel-fuentes, .bnc-rel-enlaces a, .bnc-formato, .bnc-metodo, .bnc-chips li, .bnc-cat-filtro-aviso,
body .bnc-cat-confianza li, body .bnc-cat-filtros a,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.wp-block-button .wp-block-button__link.wp-element-button {
	border-radius: var(--radius) !important;
}


/* Medidores sensoriales (Guía § 10): 28 × 10 px, 4 px de separación, llenos en carbón,
   vacíos con borde carbón al 33 %. La intensidad se lee por lleno y vacío, nunca por color. */
.bnc-barras li { flex-direction: row; align-items: center; gap: 4px; margin-bottom: 10px; }
.bnc-barras__nombre { width: 110px; flex: none; }
.bnc-barras__pista { gap: 4px; }
.bnc-barras__pista i { width: 28px; height: 10px; background: transparent; border: 1px solid #25262654; box-sizing: border-box; }
.bnc-barras__pista i.on { background: var(--ink); border-color: var(--ink); }

/* Receta: cuatro números y ya, grandes, en Anybody. */
.bnc-metodo { background: var(--bnc-crema); border: 1px solid var(--bnc-carbon); padding: 1em; }
.bnc-metodo h3 { font-variation-settings: "wght" 800, "wdth" 78; text-transform: uppercase; font-size: .95em; }
.bnc-metodo .bnc-dosis { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 94; font-size: 1.35em; line-height: 1.15; margin: .2em 0 .4em; }
.bnc-metodo .bnc-molienda { color: var(--bnc-granate); }
/* 7.99 (14/9/2026): la tarjeta, con el borde de 1,5 px de la guía (llevaba 1 px), y el vídeo de cada método.
   El botón es un enlace en vino con un triángulo de play; el vídeo se abre en un <dialog> que crea el script de
   bocono-plantilla-ficha-cafe.php y solo se descarga al pulsar. */
.bnc-metodo { border-width: var(--stroke); }
/* 8.01 (14/9/2026): el nombre del método empezaba 41 px (móvil) y 46 px (escritorio) por debajo del borde de la
   tarjeta, porque `.bnc-seccion h3 { margin: 1.2em 0 .4em }` va después en esta hoja y pisaba `.bnc-metodo h3`. */
html body .bnc-seccion .bnc-metodo h3 { margin-top: 0; }
html body .bnc-metodo .bnc-metodo-video { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: .4em 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-accent); font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 600, "wdth" 100; font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: 0; text-align: left; text-transform: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
html body .bnc-metodo .bnc-metodo-video::before { content: ""; flex: 0 0 auto; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
html body .bnc-metodo .bnc-metodo-video:hover { color: var(--ink); text-decoration-thickness: 2px; }
.bnc-video-dialogo { width: min(92vw, 960px); max-width: none; max-height: 92vh; padding: 0; border: var(--stroke) solid var(--border); border-radius: 0; background: var(--bg-invert); color: var(--ink-invert); box-shadow: none; }
.bnc-video-dialogo::backdrop { background: rgba(37, 38, 38, .72); }
.bnc-video-dialogo__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 16px; }
html body .bnc-video-dialogo__titulo { margin: 0; font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-weight: 700; font-size: 16px; line-height: 1.2; text-transform: uppercase; color: var(--ink-invert); }
html body .bnc-video-dialogo__cerrar { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-invert); font-size: 28px; line-height: 1; cursor: pointer; }
.bnc-video-dialogo__marco video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(92vh - 52px); background: #000; }
/* 8.02 (14/9/2026): vídeos alojados de las fichas de equipo (`_bnc_videos_propios`, plantilla de equipo 1.1), con la
   misma forma que los de los artículos: sin radio, fondo carbón mientras carga y pie de 13 px. */
.bnc-video-propio { margin: 0; }
.bnc-video + .bnc-video-propio, .bnc-video-propio + .bnc-video-propio { margin-top: 32px; }
.bnc-video-propio video { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0; background: var(--bg-invert); }
.bnc-video-propio--v { max-width: 380px; margin-left: auto; margin-right: auto; }
.bnc-video-propio figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.bnc-receta th { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; letter-spacing: .2em; text-transform: uppercase; font-size: .72em; }
.bnc-receta td { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; }

/* Formatos y precio. */
.bnc-formato { border: 1px solid var(--bnc-carbon); background: #fff; }
.bnc-formato--actual { border-width: 2px; background: var(--bnc-crema); }
.bnc-formato .bnc-cifra { font-size: 1.7em; }
.bnc-formato .bnc-precio { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 1.1em; }
.bnc-formato .bnc-porkilo { font-size: .68em; letter-spacing: .1em; color: inherit; opacity: .75; }

/* Chips de notas y franjas de la categoría: etiquetas rectas. */
.bnc-chips li { background: var(--bnc-arena); padding: .35em .7em; }
body .bnc-cat-confianza li { border-color: var(--bnc-carbon); background: #fff; }
body .bnc-cat-confianza li.bnc-cat-estrellas { background: var(--bnc-carbon); color: var(--bnc-crema); border-color: var(--bnc-carbon); }
body .bnc-cat-filtros a { border-color: var(--bnc-carbon); }
body .bnc-cat-filtros a:hover, body .bnc-cat-filtros a.bnc-activo { background: var(--bnc-carbon); color: var(--bnc-crema); border-color: var(--bnc-carbon); }
.bnc-cat-tabla th { background: var(--bnc-crema); border-bottom: 1px solid var(--bnc-carbon); }
.bnc-cat-tabla td.bnc-num { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; }
.bnc-cat-video button::before { border-radius: 0; }

/* La cifra SCA y los números grandes, en el naranja de la marca. */
.bnc-sca__numero { font-variation-settings: "wght" 800, "wdth" 94; }

/* Botones: rectos, carbón sobre naranja como manda la lámina (texto oscuro sobre acento). */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wp-block-button .wp-block-button__link.wp-element-button {
	font-family: "Anybody", "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 800, "wdth" 94;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--bnc-carbon);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wp-block-button .wp-block-button__link.wp-element-button:hover { color: #fff; }

/* =========================================================================
   Guía UX/UI de la web (Samantha, v1.0, 9/9/2026; marca/bocono-guia-ux-ui-web.html).
   Valores medidos, aplicados tal cual. Va al final del fichero y manda sobre lo anterior.
   ====================================================================== */

/* § 05 Fondos: crema por defecto; el blanco solo en tarjetas y campos. */
html body, .site, .site-content, .ast-separate-container .ast-article-single, .ast-separate-container .ast-article-post,
.ast-separate-container .ast-woocommerce-container, .ast-page-builder-template .site-content, #content { background: var(--bg); }
.bnc-seccion-arena { background: var(--bg-alt); }
.bnc-seccion-carbon { background: var(--bg-invert); color: var(--ink-invert); }

/* § 06 Cuerpo: 16 px, interlineado 1,6, máximo 68 caracteres, a la izquierda. */
html body { font-size: 16px; line-height: 1.6; color: var(--ink); }
.entry-content p, .bnc-cat-texto p, .bnc-seccion p, .bnc-cat-bloques p { max-width: 68ch; }
.bnc-intro, .entry-content .bnc-intro { font-size: 19px; line-height: 1.5; max-width: 64ch; }
@media (max-width: 767px) { .bnc-intro, .entry-content .bnc-intro { font-size: 17px; } }
.bnc-nota, .bnc-cat-tabla-nota, figcaption, .wp-element-caption { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
em { font-style: normal; } /* § 06: sin cursiva en la interfaz salvo variedad botánica */
.bnc-variedad-botanica { font-style: italic; }

/* § 08 Enlaces en texto: vino, subrayado con separación; hover a carbón y 2 px. */
.entry-content a:not(.button):not(.wp-block-button__link), .bnc-cat-texto a, .bnc-seccion a:not(.bnc-formato), .bnc-cat-bloques a, .bnc-origen-enlace a, .bnc-rel-cuerpo a, .bnc-cat-filtro-aviso a {
	color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .14s ease-out;
}
.entry-content a:not(.button):hover, .bnc-cat-texto a:hover, .bnc-seccion a:hover, .bnc-cat-bloques a:hover, .bnc-origen-enlace a:hover, .bnc-rel-cuerpo a:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* § 16 Foco visible siempre: anillo naranja de 3 px con 2 px de separación. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--focus) !important; outline-offset: 2px;
}

/* § 07 Botones: Archivo 700 / 84, 14 px, versales, .08em; 52 px; borde 1,5 carbón; radio 2. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wp-block-button .wp-block-button__link.wp-element-button, .bnc-boton {
	display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 32px;
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
	border: var(--stroke) solid var(--border); background: var(--action); color: var(--action-ink);
	box-shadow: none; transition: background .14s ease-out, color .14s ease-out;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.wp-block-button .wp-block-button__link.wp-element-button:hover, .bnc-boton:hover { background: var(--action-hover); color: var(--action-ink); border-color: var(--border); transform: none; }
.woocommerce a.button:active, .woocommerce button.button:active, .bnc-boton:active { background: var(--action-active); }
.woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce a.button.disabled { background: var(--bg-alt); color: #25262666; border-color: #25262666; cursor: not-allowed; opacity: 1; }
/* Secundario: transparente con borde; en las tarjetas del listado, porque el naranja es un solo botón por pantalla. */
.products .button, .products a.button, .products a.button.add_to_cart_button, .bnc-boton--sec, .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
	background: transparent; color: var(--ink); border-color: var(--border); height: 40px; padding: 0 20px; font-size: 12px;
}
.products .button:hover, .products a.button:hover, .bnc-boton--sec:hover, .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover { background: var(--ink); color: var(--ink-invert); }
/* (15/9, 8.10) Astra pinta todo botón con el foco del naranja oscuro (`button:focus { background-color: #B56A28;
   border-color: #B56A28 }`, en su hoja dinámica). Al principal le vale, porque es su propio color de «pasar por encima»;
   al secundario no: «Ver el mapa» se volvía naranja al llegarle el tabulador. Con el foco conserva su aspecto, y el
   anillo de la guía es lo que lo señala. */
.bnc-boton--sec:focus:not(:hover) { background-color: transparent; color: var(--ink); border-color: var(--border); }
/* (13/9) El botón secundario de los bloques salía con texto y borde naranjas sobre crema (en «Qué es el café de
   especialidad»): Astra pinta el de contorno con `.wp-block-buttons .wp-block-button.is-style-outline > …:not(.has-text-color)`,
   que pesa (0,5,0) y le ganaba a la regla de arriba. Guía § 07: secundario transparente, borde carbón y texto carbón,
   del mismo tamaño que el principal cuando van juntos; al pasar el ratón, carbón con texto crema. */
body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-text-color) {
	background: transparent; color: var(--ink); border: var(--stroke) solid var(--border); height: 52px; padding: 0 32px; font-size: 14px;
}
body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-text-color):hover { background: var(--ink); color: var(--ink-invert); border-color: var(--border); }
@media (max-width: 767px) { .woocommerce a.button, .woocommerce button.button, .bnc-boton { height: 48px; } }
@media (max-width: 479px) { .single_add_to_cart_button { width: 100%; } }

/* § 09 Formularios: campo de 52 px, borde 1,5 carbón, radio 2, etiqueta encima en versales. */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-input-wrapper .select2-selection, .wp-block-search__input, input[type="email"], input[type="text"], input[type="number"], input[type="tel"], input[type="password"] {
	height: 52px; padding: 0 14px; background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; color: var(--ink); box-shadow: none;
}
.woocommerce form .form-row textarea { height: auto; padding: 12px 14px; }
.woocommerce form .form-row label, .bnc-campo label { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--ink-accent); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--border); }
.woocommerce-error, .woocommerce-message, .woocommerce-info { border-top: none; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.woocommerce-error { border-color: var(--ink-accent); }
.woocommerce-message { border-color: var(--success); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; border: var(--stroke) solid var(--border); border-radius: 0; accent-color: var(--ink); }

/* § 10 Tarjeta de producto: borde 1,5, superficie blanca, imagen 4:5 sobre crema, sin sombra;
   en hover solo el nombre pasa a vino. */
/* La tarjeta, sin caja blanca. Carlos, 12/9/2026: «necesito que no existan imágenes con fondos
   de cuadros, todas bonitas sin fondo (el mismo de la página)». La tarjeta estaba en blanco y el
   render de la bolsa, que trae su blanco quemado, se multiplicaba contra ese blanco: cuadro. Sin
   fondo y sin marco, como ya estaba resuelto en el móvil (docs/11-DISENO-MOVIL-V2.md). */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { border: 0; border-radius: 0; background: transparent; padding: 0 0 16px; box-shadow: none; }
.woocommerce ul.products li.product img { aspect-ratio: 1 / 1; object-fit: contain; background: transparent; width: 100%; }
/* Carlos, 9/9 (21:20): «las fotos en ningún lugar pueden quedar así de feas con el fondo blanco
   como un cuadro». Las fotos de producto vienen sobre blanco: con mezcla multiplicativa el
   blanco se funde con el fondo de la página (crema) y la bolsa negra no cambia. Vale para
   tarjetas, galería de la ficha, relacionados y miniaturas del carrito. */
/* 12/9/2026: el multiplicado se limita a las imágenes que **siguen** viniendo sobre blanco (las
   láminas de origen y las cinco fotos de producto que el guion no pudo acremar). Las 83 fotos de
   producto restantes ya traen el crema quemado en los píxeles (tools/zg77-fondo-crema.php), así
   que multiplicarlas otra vez las oscurecería. */
.woocommerce ul.products li.product img.bnc-sobre-blanco, .woocommerce-product-gallery img.bnc-sobre-blanco,
.bnc-cat-tabla img.bnc-sobre-blanco, .woocommerce-cart-form img.bnc-sobre-blanco,
.woocommerce-mini-cart img.bnc-sobre-blanco, .bnc-barra-compra img.bnc-sobre-blanco { mix-blend-mode: multiply; }
.woocommerce-product-gallery, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image, .woocommerce-product-gallery ol.flex-control-thumbs li { background: var(--bg); }
.woocommerce ul.products li.product .ast-shop-product-out-of-stock { background: var(--bg-alt); color: var(--ink-accent); font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius); }
.woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 0 16px; }
.woocommerce ul.products li.product:hover { transform: none; box-shadow: none; }
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--ink-accent); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 4px 0 6px; }
/* Precio de la tarjeta. La cifra en Anybody y grande; **todo lo demás que WooCommerce y el
   plugin de suscripciones meten dentro de `.price`, pequeño**. Antes el tamaño se aplicaba
   al bloque entero y «o suscríbete para ahorrar hasta un 12 %» salía a 24 px, partido en
   cuatro líneas: 218 px de alto solo de precio en una tarjeta de 158 px de ancho. */
.woocommerce ul.products li.product .price { font-size: 13px; color: var(--ink-soft); line-height: 1.5; display: block; }
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price .bnc-desde { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 20px; color: var(--ink); text-decoration: none; }
.woocommerce ul.products li.product .price .bnc-desde { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del, .woocommerce ul.products li.product .price del .amount { font-size: 13px; color: var(--ink-soft); opacity: 1; } /* 16/9: WooCommerce pone opacity .5 al precio tachado y el gris caía a 1,99:1 */
/* El reclamo de la suscripción: una línea suya, pequeña, sin comerse la tarjeta. */
.woocommerce ul.products li.product .price .wcsatt-sub-options,
.woocommerce ul.products li.product .price .wcsatt-sub-discount { display: inline; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: normal; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.woocommerce ul.products li.product .price .wcsatt-sub-options { display: block; margin-top: 2px; }
.bnc-kicker { display: block; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 12px; }
.bnc-datos-linea { display: block; font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; }
/* Cuadrado de perfil de taza: color + palabra, siempre. 11 px en listado, 14 px en ficha. */
.bnc-perfil-taza { display: inline-flex; align-items: center; gap: 6px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; }
.bnc-perfil-taza i { width: 11px; height: 11px; display: block; background: var(--c, var(--ink)); }
.bnc-perfil-taza--descafeinado i { box-sizing: border-box; }
.summary .bnc-perfil-taza { font-size: 14px; }
.summary .bnc-perfil-taza i { width: 14px; height: 14px; }
/* Rejilla: 4 columnas en escritorio, 3 en tablet, 2 en móvil. */
@media (min-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } }

/* § 10 Tablas: cabecera arena, filas alternas blanco y crema; acordeón de 64 px con H4 y +/−. */
.bnc-cat-tabla { background: var(--surface); border: var(--stroke) solid var(--border); font-size: 14px; }
.bnc-cat-tabla th { background: var(--bg-alt); font-size: 11px; letter-spacing: .14em; border-bottom: 1px solid var(--linea-suave); }
.bnc-cat-tabla td { border-bottom: 1px solid var(--linea-suave); }
.bnc-cat-tabla tbody tr:nth-child(even) td { background: var(--bg); }
.bnc-faq details, .bnc-cat-faq details, .bnc-home-faq .wp-block-details, .wp-block-details { border-bottom: 1px solid var(--linea-suave); padding: 0; }
.bnc-faq summary, .bnc-cat-faq summary, .wp-block-details summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; text-transform: uppercase; font-size: 18px; line-height: 1.15; list-style: none; cursor: pointer; }
.bnc-faq summary::-webkit-details-marker, .wp-block-details summary::-webkit-details-marker { display: none; }
.bnc-faq summary::after, .bnc-cat-faq summary::after, .wp-block-details summary::after { content: "+"; font-family: "Archivo", system-ui, sans-serif; font-weight: 400; font-size: 24px; line-height: 1; flex: none; }
details[open] > summary::after { content: "\2212"; }
.bnc-faq details > div, .wp-block-details > :not(summary) { padding: 0 0 16px; max-width: 68ch; }

/* § 12 Cabecera: carbón, menú Archivo 700 / 84, 13 px, versales, .12em, crema; activo naranja con subrayado. */
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-invert); padding-top: 12px; padding-bottom: 12px; }
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover { color: var(--ink-invert); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--action); }
.ast-primary-header-bar .main-header-menu > .current-menu-item > .menu-link, .ast-primary-header-bar .main-header-menu > .current-menu-ancestor > .menu-link { color: var(--action) !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ast-site-header-cart .ast-cart-menu-wrap .count, .ast-site-header-cart .ast-icon-shopping-cart .count { border-radius: 0 !important; background: var(--action); color: var(--ink); }
/* Franja de perfil: el único elemento decorativo permitido (§ 03). */
.bnc-franja-perfil { display: flex; height: 8px; }
.bnc-franja-perfil span { flex: 1; }
.bnc-franja-perfil span:nth-child(1) { background: var(--floral); }
.bnc-franja-perfil span:nth-child(2) { background: var(--frutal); }
.bnc-franja-perfil span:nth-child(3) { background: var(--caramelo); }
.bnc-franja-perfil span:nth-child(4) { background: var(--descafeinado); }

/* § 11 Ficha de datos del lote (8.18, 15/9/2026 por la noche; Carlos, en el móvil: «demasiado simple, adáptalo a la guía
   de Samantha»). La ficha técnica impresa: sin caja blanca, una regla de 1,5 px arriba y abajo y filas separadas por
   1 px al 20 %; etiqueta Archivo 11 px / .14em en carbón 65 % a la izquierda, dato Anybody 700/94 a 18 px a la derecha;
   las cifras (altitud, SCA, fecha de tueste) a 24 px con dígitos tabulares, porque «el dato manda sobre el adjetivo».
   En escritorio, dos columnas para que el bloque de compra entre en la primera pantalla (decisión del 12/9). */
.bnc-origen dl.bnc-lote-datos { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; border: 0; border-top: var(--stroke) solid var(--border); border-bottom: var(--stroke) solid var(--border); background: transparent; }
.bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--linea-suave); border-radius: 0; }
.bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila:last-child { border-bottom: 0; }
.bnc-origen dl.bnc-lote-datos dt { flex: 0 1 auto; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--ink-soft); }
.bnc-origen dl.bnc-lote-datos dd { margin: 0; text-align: right; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 18px; line-height: 1.2; color: var(--ink); }
.bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila--cifra dd { font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (8.19) Dos columnas solo desde 1.200 px: a 960 la columna de compra mide 415 px y «Fecha de tueste 02.09.26» no cabía en media. */
@media (min-width: 1200px) {
	.bnc-origen dl.bnc-lote-datos { grid-template-columns: 1fr 1fr; column-gap: 32px; }
	.bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila:last-child { border-bottom: 1px solid var(--linea-suave); }
	.bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila:nth-last-child(-n+2):nth-child(2n+1), .bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila:nth-last-child(-n+1):nth-child(2n) { border-bottom: 0; }
}
/* Selector de formato: botonera segmentada de 44 px; la opción elegida en carbón, no en naranja. */
.bnc-formatos { display: inline-flex; gap: 0; border: var(--stroke) solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bnc-formato { border: 0; border-right: var(--stroke) solid var(--border); background: var(--surface); padding: 12px 18px; }
.bnc-formato:last-child { border-right: 0; }
.bnc-formato--actual { background: var(--ink); color: var(--ink-invert); border-width: 0 var(--stroke) 0 0; }
.bnc-formato--actual .bnc-porkilo, .bnc-formato--actual .bnc-precio { color: var(--ink-invert); }
.bnc-formato p { display: none; }
.bnc-formato .bnc-cifra { font-size: 1.2em; }
/* Línea de frescura bajo el botón: cuerpo S, sin iconos. */
.bnc-tostado-por { font-size: 13px; color: var(--ink-soft); }
/* Estrellas de valoración en carbón, no amarillas. */
.woocommerce .star-rating span::before, .woocommerce .star-rating::before, .comment-form-rating .stars a { color: var(--bnc-oro); }

/* § 15 Movimiento: solo respuesta a la acción; respetar reduce-motion. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Remates (9/9, 20:05): las secciones de ficha y categoría usan el H2 de la guía (36 px),
   los subtítulos dentro de la descripción el H3 (24 px); estrellas en carbón por encima
   del color que Astra inyecta. */
.bnc-seccion > h2, .bnc-cat-bloques h2, .bnc-cat-faq h2, .bnc-cat-filtros h2, .bnc-seccion--el-cafe h2:not(:first-child) { font-size: 36px; line-height: 1.05; }
.bnc-seccion h3, .bnc-seccion--el-cafe h3 { font-size: 24px; line-height: 1.1; margin: 1.2em 0 .4em; }
@media (max-width: 767px) { .bnc-seccion > h2, .bnc-cat-bloques h2, .bnc-cat-faq h2, .bnc-cat-filtros h2 { font-size: 26px; } .bnc-seccion h3 { font-size: 20px; } }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before, .woocommerce p.stars a { color: var(--bnc-oro) !important; }
.woocommerce .star-rating span, .woocommerce .star-rating span .rating { color: var(--bnc-carbon); } /* 16/9: el texto oculto «Valorado con…» heredaba el dorado (1,65:1); las estrellas siguen en oro por ::before */
/* Selección de texto y contador del carrito con los tokens de la guía. */
::selection { background: var(--action); color: var(--ink); }

/* § 08 Migas: Archivo 12 px, separador fino en carbón 65 %, la página actual sin enlace. */
.woocommerce-breadcrumb, .rank-math-breadcrumb { font-family: "Archivo", system-ui, sans-serif; font-size: 12px; color: var(--ink-soft); }
.woocommerce-breadcrumb a, .rank-math-breadcrumb a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
/* § 11 Galería: miniaturas en fila debajo de la foto, como las de la ficha de Codex que Carlos
   puso de referencia el 12/9/2026. Antes iban en columna a la izquierda con la galería vertical
   de Astra, que además recortaba la miniatura a 72 × 90 (`cover`) y le metía fondo blanco: la
   bolsa salía cortada y dentro de un cuadro. Ahora: fila, cuadradas, `contain` y sin fondo. */
.woocommerce div.product div.images .flex-control-thumbs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 84px; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img { width: 84px; height: 84px; object-fit: contain; opacity: 1; background: transparent; mix-blend-mode: multiply; outline: var(--stroke) solid #25262626; outline-offset: calc(var(--stroke) * -1); border: 0; border-radius: 0 !important; cursor: pointer; }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { outline-color: var(--ink); }
/* 11/9/2026: cuadrada y en blanco mientras las fotos sean las que hay. Todas las imágenes principales de producto son hoy cuadradas —los renders de las bolsas, de 600 × 600; las máquinas, PNG de 1.024 × 1.024—, y la caja 4:5 de la guía las dejaba con bandas arriba y abajo en todas las fichas: en la Classe 5, unos 400 px de crema vacía en la primera pantalla del móvil. Cuando lleguen las fotos en 4:5 y sobre crema (PENDIENTES C33), se vuelve a 4 / 5 y var(--bg). */
.woocommerce div.product div.images .woocommerce-product-gallery__image img { background: transparent; aspect-ratio: 1 / 1; object-fit: contain; }
/* La columna de miniaturas la pone Astra Pro con su galería «vertical-slider», el ajuste que
   tienen producción y el staging y que a v2 le faltaba (puesto el 11/9/2026). Aquí había una
   rejilla de 72 px + 1fr que intentaba hacer lo mismo sobre el carrusel horizontal, y lo
   rompía: en escritorio se veía una sola miniatura con las dos flechas encima. Con la galería
   vertical de Astra, esa rejilla la volvía a romper (columna de miniaturas a 0 px), así que
   se ha quitado.

   Lo que sí se ajusta de la galería vertical de Astra, y por qué:
   - Su script (vertical-product-gallery-slider.js) mide la primera miniatura, pone la columna
     a cuatro de alto y **le impone esa misma altura a la foto principal**: salía de 470 × 510
     en escritorio y de 264 × 306 en el móvil. La foto se suelta (`height: auto !important`)
     y la cuadra la regla de arriba (aspect-ratio 1 / 1).
   - Miniaturas de 72 × 90 como pide la guía, en cajas de 100 px: el script avanza «altura
     de la imagen + 10 px» por paso, así que la separación tiene que ser 10 y el marco no
     puede restar altura (va con `outline`, no con `border`): con borde se desfasaba 2 px por
     paso.
   - Flechas: las de Astra salían como círculos vacíos (su icono viene de una fuente que no se
     carga) encima de la primera y la cuarta miniatura. Van debajo de la columna, dos
     cuadrados carbón de 32 px con la punta dibujada con bordes.
   - En el móvil la columna le quitaba 80 px de ancho a la foto: ahí la foto va a todo el
     ancho y las miniaturas debajo, en una tira que se desliza. Astra coloca cada miniatura
     con `position: absolute`; en la tira van en su sitio, o cada una medía 353 px de alto.
   Probado inyectando el CSS antes de publicarlo (Sage y Sidamo, 1440 y 375 px). */
@media (min-width: 922px) {
	.ast-product-gallery-layout-vertical-slider #ast-gallery-thumbnails { width: 72px; }
	.ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner .ast-woocommerce-product-gallery__image { width: 72px; height: 100px; padding: 0 0 10px; box-sizing: border-box; }
	.ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner .ast-woocommerce-product-gallery__image img { width: 72px; height: 90px; object-fit: cover; border: 0; outline: var(--stroke) solid #25262640; outline-offset: calc(var(--stroke) * -1); border-radius: 0; background: var(--surface); }
	.ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner .flex-active-slide img { outline-color: var(--ink); }
	/* Solo cuando hay miniaturas: Astra marca con `ast-product-gallery-with-no-image` las fichas
	   de una sola foto (la Fiorenzato, la Cafiza, la Drip Pot), y ahí no hay columna que dejar
	   libre: la etiqueta de oferta se quedaba 84 px dentro de la foto en vez de en su esquina. */
	html body.single-product .ast-product-gallery-layout-vertical-slider:not(.ast-product-gallery-with-no-image) div.images.woocommerce-product-gallery > .flex-viewport { margin-left: 84px !important; height: auto !important; }
	.ast-product-gallery-layout-vertical-slider .woocommerce-product-gallery__wrapper img { height: auto !important; }
	html body .ast-product-gallery-layout-vertical-slider:not(.ast-product-gallery-with-no-image) .bnc-ficha-arriba > .ast-onsale-card { left: calc(84px + 1.5em); }
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-prev,
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-next {
		position: absolute !important; top: 408px !important; bottom: auto !important; left: 0 !important; right: auto !important; transform: none !important;
		width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important;
		background: var(--ink) !important; border: 0 !important; border-radius: var(--radius) !important; box-shadow: none !important;
	}
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-next { left: 40px !important; }
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-prev::before,
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-next::before { content: none !important; }
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-prev::after,
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-next::after {
		content: "" !important; position: absolute !important; top: 14px !important; left: 11px !important; right: auto !important; bottom: auto !important;
		width: 10px !important; height: 10px !important; box-sizing: border-box !important; background: none !important;
		border-style: solid !important; border-color: var(--ink-invert) !important; border-width: 2px 2px 0 0 !important;
		transform: rotate(-45deg) !important;
	}
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-navigation-next::after { top: 8px !important; transform: rotate(135deg) !important; }
	html body .ast-product-gallery-layout-vertical-slider .ast-vertical-navigation-wrapper button.flex-disabled { opacity: .35 !important; pointer-events: none; }
	html body .ast-product-gallery-layout-vertical-slider .ast-vertical-navigation-wrapper button:not(.flex-disabled) { opacity: 1 !important; }
}
@media (max-width: 921px) {
	html body.single-product .ast-product-gallery-layout-vertical-slider div.images.woocommerce-product-gallery { display: flex; flex-direction: column; }
	html body.single-product .ast-product-gallery-layout-vertical-slider div.images.woocommerce-product-gallery > .flex-viewport { margin-left: 0 !important; order: 1; height: auto !important; }
	.ast-product-gallery-layout-vertical-slider #ast-gallery-thumbnails { position: static; width: 100%; height: auto !important; order: 2; margin-top: 8px; }
	.ast-product-gallery-layout-vertical-slider #ast-vertical-thumbnail-wrapper { height: auto !important; overflow-x: auto; overflow-y: hidden; }
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner { position: static; display: flex; align-items: flex-start; gap: 8px; height: auto !important; min-height: 0 !important; transform: none !important; }
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner .ast-woocommerce-product-gallery__image { flex: 0 0 64px; width: 64px; height: auto !important; min-height: 0 !important; padding: 0 !important; aspect-ratio: auto !important; }
	html body .ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner img { position: static !important; display: block; width: 64px; height: 80px; object-fit: cover; border: 0; outline: var(--stroke) solid #25262640; outline-offset: calc(var(--stroke) * -1); background: var(--surface); }
	.ast-product-gallery-layout-vertical-slider #ast-vertical-slider-inner .flex-active-slide img { outline-color: var(--ink); }
	.ast-product-gallery-layout-vertical-slider .ast-vertical-navigation-wrapper { display: none; }
	.ast-product-gallery-layout-vertical-slider .woocommerce-product-gallery__wrapper img { height: auto !important; }
}
/* Tamaños de letra de los bloques de WordPress, a la escala de la guía (§ 06). Venían de
   Astra con «grande» = 36 px, y los artículos traídos del staging usan esa clase en sus
   párrafos: el cuerpo salía a 36 px, más grande que su propio título. */
:root, body, .editor-styles-wrapper {
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--medium: 17px;
	--wp--preset--font-size--large: 19px;
	--wp--preset--font-size--x-large: 24px;
	--wp--preset--font-size--huge: 30px;
}
.entry-content .has-large-font-size { line-height: 1.6; }
/* El H1 de las entradas lo pisaba Astra con `header.entry-header .entry-title` (32 px). */
html body header.entry-header .entry-title, html body .ast-single-post .entry-title { font-size: 56px; line-height: 1.05; }
@media (max-width: 767px) { html body header.entry-header .entry-title, html body .ast-single-post .entry-title { font-size: 34px; } }
/* Ancho de lectura del artículo: por debajo de 68 caracteres por línea (§ 05). */
.single-post .entry-content > p, .single-post .entry-content > ul, .single-post .entry-content > ol,
.single-post .entry-content > h2, .single-post .entry-content > h3, .single-post .entry-content > blockquote { max-width: 68ch; }

/* «Para quién es (y para quién no)» en la ficha de equipamiento: va en el bloque de compra,
   sobre fondo arena, y es lo que separa dos modelos parecidos (§ 9 de ARQUITECTURA-SEO). */
.bnc-para-quien { margin: 0 0 14px; padding: 14px 16px; background: var(--bg-alt); border-radius: var(--radius); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.bnc-para-quien a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
.single-product div.product .summary > .bnc-para-quien { order: 7; }

/* Contacto (bocono-contacto.php): formulario a la izquierda y datos a la derecha. */
.bnc-contacto { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; margin: 24px 0 0; }
/* Cuando el formulario lo pone Elementor, aquí solo van los datos de al lado. */
.bnc-contacto--solo-datos { grid-template-columns: 1fr; }
.bnc-contacto--solo-datos .bnc-contacto__form { display: none; }
.bnc-contacto--solo-datos .bnc-contacto__datos { border-left: 0; border-top: var(--stroke) solid var(--border); padding: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; }
.bnc-contacto--solo-datos .bnc-contacto__datos h2 { grid-column: 1 / -1; }
.bnc-campo { margin: 0 0 16px; }
.bnc-campo label { display: block; margin: 0 0 6px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bnc-campo input[type="text"], .bnc-campo input[type="email"], .bnc-campo select, .bnc-campo textarea { width: 100%; padding: 0 14px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; color: var(--ink); }
.bnc-campo input[type="text"], .bnc-campo input[type="email"], .bnc-campo select { height: 52px; }
.bnc-campo textarea { padding: 12px 14px; line-height: 1.6; }
.bnc-campo--casilla label { display: flex; gap: 10px; align-items: flex-start; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: normal; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.bnc-campo--casilla a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
.bnc-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bnc-contacto__ok { padding: 16px; border: var(--stroke) solid var(--success); border-radius: var(--radius); background: var(--surface); font-size: 16px; }
.bnc-contacto__error { color: var(--ink-accent); font-weight: 700; }
.bnc-contacto__datos { border-left: var(--stroke) solid var(--border); padding-left: 32px; }
.bnc-contacto__datos h2 { font-size: 22px; margin: 0 0 16px; }
.bnc-contacto__datos p { font-size: 16px; line-height: 1.6; }
.bnc-contacto__datos a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
.bnc-contacto__datos .bnc-nota { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 900px) { .bnc-contacto { grid-template-columns: 1fr; gap: 32px; } .bnc-contacto__datos { border-left: 0; border-top: var(--stroke) solid var(--border); padding: 24px 0 0; } }

/* Banner de cookies (CookieYes, el mismo de producción) con la caja de la guía: crema,
   borde 1,5 en carbón, radio 2, sin sombra; «Aceptar» en carbón y los otros dos en
   secundario. Se decide desde aquí y no desde el panel del plugin para que viaje con el tema. */
/* El contenedor del aviso de cookies es transparente y en móvil ocupa media pantalla (358 px de 640
   a 320 de ancho). Mientras el aviso no se pinta, se comía los toques de todo lo que tenía debajo,
   tarjetas de producto incluidas (medido el 13/9). Solo recibe toques lo que se ve. */
.cky-consent-container { pointer-events: none; }
.cky-consent-container > * { pointer-events: auto; }
.cky-consent-container .cky-consent-bar { background: var(--bg) !important; border: var(--stroke) solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: none !important; color: var(--ink) !important; }
.cky-consent-container .cky-title, .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des * { color: var(--ink) !important; font-family: "Archivo", system-ui, sans-serif !important; }
.cky-consent-container .cky-title { font-family: "Anybody", "Archivo", system-ui, sans-serif !important; font-variation-settings: "wght" 700, "wdth" 94; }
.cky-notice-btn-wrapper .cky-btn { border-radius: var(--radius) !important; border: var(--stroke) solid var(--border) !important; font-family: "Archivo", system-ui, sans-serif !important; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; min-height: 40px; box-shadow: none !important; }
.cky-notice-btn-wrapper .cky-btn-accept { background: var(--ink) !important; color: var(--ink-invert) !important; }
.cky-notice-btn-wrapper .cky-btn-reject, .cky-notice-btn-wrapper .cky-btn-customize { background: transparent !important; color: var(--ink) !important; }
.cky-notice-btn-wrapper .cky-btn-reject:hover, .cky-notice-btn-wrapper .cky-btn-customize:hover { background: var(--bg-alt) !important; }
.cky-modal .cky-preference-center { border-radius: var(--radius) !important; border: var(--stroke) solid var(--border) !important; }

/* Contador del carrito. Llegaba sin icono y con el número dentro de un bloque naranja con
   borde blanco de 3 px: un pegote. Ahora es una pastilla pequeña de 18 px pegada al icono
   de la bolsa, naranja con la cifra en carbón (§ 03: sobre naranja se escribe en carbón). */
/* Astra dibuja una caja con borde de 2 px alrededor del icono del carrito. El elemento es
   `.ast-addon-cart-wrap` (no `.ast-cart-menu-wrap`, que es el de otras versiones): sobre el
   carbón se veía como un recuadro blanco alrededor de la bolsa. Fuera los dos. */
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-site-header-cart.ast-menu-cart-with-border .ast-addon-cart-wrap,
.ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap,
.ast-site-header-cart .ast-cart-menu-wrap { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.ast-site-header-cart .ast-cart-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.ast-site-header-cart .cart-container { display: inline-flex; align-items: center; color: var(--ink-invert); }
.ast-site-header-cart .astra-icon svg, .ast-site-header-cart .cart-container svg { width: 22px; height: 22px; fill: var(--ink-invert); }
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-site-header-cart .cart-container .count {
	position: static; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 6px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--action); color: var(--ink); border: 0 !important;
	border-radius: var(--radius);
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94;
	font-size: 11px; line-height: 1;
}
.ast-site-header-cart .count::after, .ast-site-header-cart .count::before { display: none; }

/* Mini carrito de la cabecera: Astra lo dejaba pintado a la vista y en columna estrecha
   («No hay productos en el carrito» escrito en vertical al lado del contenido). Se oculta
   y baja como panel al pasar el ratón o al llegar por teclado, con la caja de la guía. */
.ast-site-header-cart { position: relative; }
.ast-site-header-cart .ast-site-header-cart-data {
	position: absolute; top: 100%; right: 0; z-index: 9500; width: 320px; max-width: 92vw;
	padding: 16px; background: var(--surface); color: var(--ink); text-align: left;
	border: var(--stroke) solid var(--border); border-radius: var(--radius);
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease-out, transform .15s ease-out;
}
.ast-site-header-cart:hover .ast-site-header-cart-data,
.ast-site-header-cart:focus-within .ast-site-header-cart-data { opacity: 1; visibility: visible; transform: none; }
.ast-site-header-cart .ast-site-header-cart-data .woocommerce-mini-cart__empty-message { margin: 0 0 12px; font-size: 14px; }
/* Un solo botón naranja por pantalla (§ 07): el del carrito vacío va en secundario. */
.ast-site-header-cart .ast-site-header-cart-data .button { width: 100%; margin: 4px 0 0; background: transparent; color: var(--ink); border: var(--stroke) solid var(--border); }
.ast-site-header-cart .ast-site-header-cart-data .button:hover { background: var(--ink); color: var(--ink-invert); }
.ast-site-header-cart .ast-site-header-cart-data .button.checkout { background: var(--action); color: var(--action-ink); border-color: var(--border); }
@media (max-width: 767px) { .ast-site-header-cart .ast-site-header-cart-data { display: none; } }

/* Tienda: navegación por familia y por perfil, con los chips de la categoría. */
.bnc-tienda-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.bnc-tienda-nav .bnc-cat-rotulo { margin-right: 4px; }
.bnc-cat-chip--perfil { display: inline-flex; align-items: center; gap: 8px; }
.bnc-cat-chip--perfil i { width: 11px; height: 11px; background: var(--c); border-radius: 0; display: inline-block; }

.bnc-tienda-texto { margin-top: 40px; }
.bnc-tienda-texto h2 { margin-top: 1.4em; }
.bnc-tienda-texto p { max-width: 68ch; }

/* Hero de producción traído tal cual (plantilla de Elementor «Hero de producción», zg26),
   con el negro carbón de la marca por orden de Carlos. El CSS que Elementor genera para
   esa sección vive en producción y no viaja con la plantilla, así que los colores se fijan
   aquí: sin esto, «Specialty Coffee» y «Roaster» salían en carbón sobre una ilustración
   casi negra, es decir, invisibles. La sección se identifica por su id de Elementor, que
   viaja dentro del JSON y no cambia. */
/* Dentro del hero, los colores globales de Elementor pasan a ser los de la marca: así no
   hace falta pelear con la especificidad del CSS que Elementor genera por plantilla
   (`.bnc-template-hero .elementor-element-… .elementor-heading-title`), que gana a cualquier
   regla de dos clases. Se cambia el valor de la variable, no la regla. */
.elementor-element-80335c5 {
	/* La altura, el centrado y el fondo también venían del CSS que Elementor genera en
	   producción, y ese fichero no viaja con la plantilla: se fijan aquí los mismos valores
	   que tiene la sección en su JSON (55 vh, contenido centrado). */
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--bg-invert);
	/* La ilustración del fondo es negro puro (#000) y la cabecera es carbón (#252626), así
	   que se veía el corte entre las dos. Con `lighten` cada píxel toma el más claro entre
	   la imagen y el carbón: **el negro de la ilustración pasa a ser exactamente el carbón
	   de la cabecera** y el trazo claro no se toca. Es lo que pedía Carlos el 10/9. */
	background-blend-mode: lighten;
	--e-global-color-primary: var(--ink-invert);
	--e-global-color-secondary: var(--ink-invert);
	--e-global-color-text: var(--ink-invert);
}
.elementor-element-80335c5 .elementor-heading-title,
.elementor-element-80335c5 .elementor-icon,
.elementor-element-80335c5 .elementor-icon svg { color: var(--ink-invert); fill: var(--ink-invert); }
.elementor-element-80335c5 .elementor-heading-title { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 108; text-transform: uppercase; letter-spacing: .02em; }
/* A sangre. Elementor escribe el ancho de sus contenedores con una especificidad que gana a
   cualquier regla de dos clases (`.bnc-template-hero .elementor-element.elementor-element-…`),
   así que aquí hace falta el `!important`: sin él el hero quedaba con 20 px de crema a cada
   lado, como un recuadro pegado debajo de la cabecera. */
.elementor .elementor-element.elementor-element-80335c5 {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/* «Servicio de tueste» (Elementor 20194): la cabecera con la sonda, a todo lo ancho como en
   producción; en v2 salía en una caja de 1200 px, pegada como un cuadro (11/9/2026). El interior
   (`e-con-inner`) sigue en caja, así que el título no se mueve. */
.elementor .elementor-element.elementor-element-9ce929f {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/* Y su vídeo, en una sección carbón (c049e11) que salía en caja de 1200 px y, en móvil, con 85 px
   de carbón vacío encima y debajo: a todo lo ancho, como el vídeo de la portada, con el vídeo en
   su caja y menos aire en móvil. */
.elementor .elementor-element.elementor-element-c049e11 {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
@media (max-width: 767px) {
	.elementor .elementor-element.elementor-element-c049e11 > .e-con-inner { padding-top: 32px !important; padding-bottom: 32px !important; }
}
/* La ilustración del fondo es de trazo claro: sobre el carbón se lee sin apagarla. */
@media (max-width: 767px) { .elementor-element-80335c5 { min-height: 46vh !important; } }

/* Home. El hero va en carbón por orden de Carlos (9/9/2026: «el hero ponle el mismo negro
   del diseño de Samantha»), con la regla de contraste de la guía: sobre carbón se escribe
   en crema, y el naranja solo es tinta sobre carbón, nunca sobre fondo claro. Con el pie
   son las dos únicas secciones carbón, y no van seguidas (§ 03). */
/* El ancho de lectura se centra con el padding del hero, no centrando cada hijo: así el
   título y los párrafos quedan alineados a la izquierda (§ 05) en vez de centrados. */
.bnc-home-hero { background: var(--bg-invert); color: var(--ink-invert); margin: 0 0 48px; padding: 64px max(24px, calc((100% - 1280px) / 2)) 72px; }
.bnc-home-hero > * { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
html body .bnc-home-hero h1 { color: var(--ink-invert); max-width: 22ch; margin: 0 0 20px; }
.bnc-home-hero .bnc-kicker { color: var(--action); margin: 0 0 14px; }
.bnc-home-hero .bnc-intro { font-size: 20px; line-height: 1.5; max-width: 62ch; color: var(--ink-invert); }
.bnc-home-hero p { color: #f2e8dad9; max-width: 68ch; }
.bnc-home-hero .wp-block-buttons { margin-top: 28px; }
.bnc-home-hero .wp-block-button__link { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.bnc-home-hero .is-style-outline .wp-block-button__link { background: transparent; color: var(--ink-invert); border-color: var(--ink-invert); }
.bnc-home-hero .is-style-outline .wp-block-button__link:hover { background: var(--ink-invert); color: var(--ink); }
/* Fotos de la home, 11/9/2026 (C47). Hasta hoy cada foto iba en media columna recortada a 4:5,
   «pegada como un cuadro» (Carlos). Ahora cada una entra de una forma distinta y siempre a
   sangre, sin marco, sin sombra y con radio 0 (§ 03 de la guía y MARCA § 5):
   - banda: el cafetal ocupa todo el ancho y el texto va encima, en un panel carbón (origen);
   - partida: la foto llena media pantalla hasta el borde y el texto ocupa la otra mitad
     (tostadores sobre crema, X-Madrid sobre arena);
   - tira: el tueste en cuatro fotos seguidas, de borde a borde, cada una con su rótulo;
   - vídeo: la segunda sección carbón de la página; la otra es el hero y no van seguidas.
   El hueco lateral de lo que va a sangre es el del texto del resto de la página (1104 px de
   contenido en Astra, medido el 11/9 a 1440 px), para que los títulos caigan en la misma
   vertical. Los hijos de estos grupos pierden el margen de bloque de WordPress: en una
   rejilla, ese margen desalinea las columnas. */
.bnc-home-banda, .bnc-home-partida, .bnc-home-video, .bnc-home-tira, .bnc-foto-sangre {
	--bnc-hueco: max(20px, calc((100vw - 1104px) / 2));
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.bnc-home-banda > *, .bnc-home-partida > *, .bnc-home-video > *, .bnc-home-tira > * { margin: 0 !important; }
.bnc-home-banda figure img, .bnc-home-partida figure img, .bnc-home-tira figure img { display: block; width: 100%; max-width: none; border-radius: 0 !important; box-shadow: none; }

/* Una sola fotografía a todo lo ancho, cuando la imagen se sostiene sola y merece verse grande
   (la barra de Lavapiés en su página, 12/9/2026). El pie cae en la vertical del texto. */
.bnc-foto-sangre { margin-top: 0; margin-bottom: 72px; }
/* El alto va con `!important` porque Astra fuerza `height: auto` a las imágenes del contenido y
   dejaba la foto entera, con medio mostrador vacío abajo (medido el 12/9: 960 px en vez de 490). */
.bnc-foto-sangre img { display: block; width: 100%; max-width: none; height: clamp(300px, 34vw, 520px) !important; object-fit: cover; object-position: center 34%; border-radius: 0 !important; box-shadow: none; }
.bnc-foto-sangre figcaption { padding: 12px var(--bnc-hueco) 0; font-size: .85em; color: var(--ink-soft); }
@media (max-width: 767px) {
	.bnc-foto-sangre { margin-bottom: 48px; }
	.bnc-foto-sangre img { height: 340px !important; object-position: 56% 38%; }
}

/* Banda: el cafetal a todo lo ancho y el texto en un panel carbón encima. */
.bnc-home-banda { display: flex; align-items: center; min-height: 640px; padding: 72px var(--bnc-hueco); margin-top: 0; margin-bottom: 72px; overflow: hidden; background: var(--bg-invert); }
.bnc-home-banda > .bnc-home-banda__foto { position: absolute; inset: 0; }
.bnc-home-banda .bnc-home-banda__foto img { height: 100%; object-fit: cover; object-position: center 60%; }
.bnc-home-banda .bnc-home-banda__foto figcaption { position: absolute; right: var(--bnc-hueco); bottom: 16px; margin: 0; padding: 6px 10px; background: var(--bg-invert); color: var(--ink-invert); font-size: 13px; line-height: 1.3; text-align: left; }
.bnc-home-banda .bnc-home-banda__panel { position: relative; max-width: 540px; padding: 40px 40px 30px; background: var(--bg-invert); color: var(--ink-invert); }
html body .bnc-home-banda__panel h2, .bnc-home-banda__panel p, .bnc-home-banda__panel li, .bnc-home-banda__panel strong { color: var(--ink-invert); }
html body .bnc-home-banda__panel h2 { margin: 0 0 16px; }
.bnc-home-banda__panel ul { margin: 20px 0 0; padding-left: 1.1em; }
.bnc-home-banda__panel li { margin-bottom: 10px; }
.bnc-home-banda__panel li::marker { color: var(--action); } /* naranja sobre carbón: permitido */

/* Partida: la foto hasta el borde de la pantalla y el texto alineado con el resto. */
.bnc-home-partida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; margin-top: 0; margin-bottom: 72px; }
.bnc-home-partida > .bnc-home-partida__foto { position: relative; min-height: 620px; }
/* Encuadre por defecto a un 20 % desde arriba: en un retrato vertical recortado a 4:5 (móvil), el
   centro dejaba la cara fuera (visto el 11/9 en «Quién tuesta» de la tienda). */
.bnc-home-partida .bnc-home-partida__foto img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 20%; }
.bnc-home-tostadores .bnc-home-partida__foto img { object-position: center 22%; }
.bnc-home-partida .bnc-home-partida__texto { align-self: center; padding: 64px var(--bnc-hueco) 64px 64px; }
.bnc-home-partida--der .bnc-home-partida__texto { padding: 64px 64px 64px var(--bnc-hueco); }
html body .bnc-home-partida__texto h2 { margin: 0 0 16px; }
.bnc-home-partida__texto p { max-width: 60ch; }
.bnc-home-visita { background: var(--bg-alt); }
/* Tres cifras en Anybody, en vino: el único acento que puede escribir sobre claro. */
.bnc-home-cifras { list-style: none; margin: 28px 0 8px !important; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: var(--stroke) solid var(--border); }
.bnc-home-cifras li { margin: 0; font-size: 13px; line-height: 1.5; }
.bnc-home-cifras strong { display: block; margin-bottom: 6px; font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 100; font-size: 30px; line-height: 1; color: var(--ink-accent); }

/* Enlace de «ver más» al pie de cada sección. */
.bnc-home-mas { margin-top: 20px; }
.bnc-home-mas a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--ink-accent); }
.bnc-home-mas a::after { content: " →"; }
.bnc-home-mas a:hover { color: var(--ink-accent); }

/* Escaparates de producto (los tres de producción), con la tarjeta del catálogo. */
.bnc-home-escaparate { margin: 0 0 72px; }
html body .bnc-home-escaparate > h2 { margin: 0 0 12px; }
.bnc-home-escaparate > p { max-width: 68ch; }
html body .bnc-home-escaparate > h3 { margin: 40px 0 10px; }
.bnc-home-escaparate .woocommerce { margin-top: 28px; }
.bnc-home-escaparate ul.products { margin-bottom: 0 !important; }

/* La taza: el texto a dos columnas y el tueste en una tira de cuatro fotos. */
.bnc-home-taza { margin: 0 0 72px; }
.bnc-home-taza__texto { columns: 2 320px; column-gap: 56px; }
.bnc-home-taza__texto p { break-inside: avoid; margin: 0 0 1em; }
.bnc-home-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px !important; }
.bnc-home-tira figure { position: relative; }
.bnc-home-tira figure img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.bnc-home-tira figure figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: 10px 16px 11px; background: var(--bg-invert); color: var(--ink-invert); font-size: 14px; line-height: 1.3; text-align: left; }
.bnc-home-tira figcaption strong { margin-right: 6px; color: var(--action); font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 100; }

/* El vídeo, sobre carbón. */
.bnc-home-video { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 80px var(--bnc-hueco); margin-top: 0; margin-bottom: 72px; background: var(--bg-invert); color: var(--ink-invert); }
html body .bnc-home-video h2, .bnc-home-video p { color: var(--ink-invert); }
html body .bnc-home-video h2 { margin: 0 0 16px; }
.bnc-home-video__marco iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.bnc-home-video .bnc-yt:focus-visible { outline-color: var(--ink-invert); }

.bnc-home-faq__mas { margin-top: 20px; font-size: 16px; }
/* En los grupos «constrained» de la portada, lo que es más estrecho que el ancho de contenido
   (párrafos a 68 ch, preguntas a 72 ch) se alinea a la izquierda con su título en vez de
   centrarse: WordPress dejaba el título a la izquierda y el texto en medio (visto el 11/9). */
.bnc-home-faq.is-layout-constrained > *,
.bnc-home-guia.is-layout-constrained > *,
.bnc-home-perfiles.is-layout-constrained > * {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1104px)) / 2)) !important;
	margin-right: auto !important;
}
/* Astra rellena cada grupo hijo directo de .entry-content con `--wp--custom--ast-default-block-*-
   padding` (48 px en escritorio, 24 en móvil) con una regla de dos clases, que pesa más que las de
   una de arriba: la foto de Carlos y la de X-Madrid se quedaban a 48 px del borde, el panel del
   origen y el texto del vídeo fuera de la vertical del resto, y en móvil la banda del origen
   metida hacia dentro (visto el 11/9 en pantalla). Aquí, con una clase más. Las secciones de
   texto conservan el relleno de Astra: es lo que pone sus títulos en la misma vertical. */
.entry-content > .bnc-home-partida.wp-block-group { padding: 0; }
/* Dos medias pantallas seguidas forman una retícula, con las fotos tocándose por la esquina: sin
   crema entre ellas en escritorio (en Lavapiés quedaban 25 px, que parecían un error; visto el 11/9).
   En móvil cada foto va encima de su texto y conservan su separación. */
@media (min-width: 768px) {
	.entry-content > .bnc-home-partida.wp-block-group:has(+ .bnc-home-partida) { margin-bottom: 0; }
	.entry-content > .bnc-home-partida.wp-block-group + .bnc-home-partida.wp-block-group { margin-top: 0; }
}
/* Los mismos componentes en páginas cuyo texto va a ras del contenedor (1200 px, sin el relleno
   de los grupos de la portada), como «Café de especialidad en Madrid»: el hueco se mide con 1200. */
.bnc-home-partida.bnc-sangre-llano, .bnc-home-banda.bnc-sangre-llano { --bnc-hueco: max(20px, calc((100vw - 1200px) / 2)); }
/* Y en las que van en el contenedor en caja de Astra (ast-separate-container: las fichas de los
   locales de Rank Math), cuyo texto mide 1120 px (medido el 11/9 en la de X-Madrid). */
.bnc-home-partida.bnc-sangre-1120, .bnc-home-banda.bnc-sangre-1120, .bnc-foto-sangre.bnc-sangre-1120 { --bnc-hueco: max(20px, calc((100vw - 1120px) / 2)); }
/* Y en el texto del pie de la tienda, que va en una columna centrada de 960 px (`.bnc-tienda-texto`). */
.bnc-home-partida.bnc-sangre-960, .bnc-home-banda.bnc-sangre-960 { --bnc-hueco: max(20px, calc((100vw - 960px) / 2)); }
/* En móvil ese contenedor deja el texto a 25 px del borde, no a 20 (medido en la de X-Madrid). */
@media (max-width: 767px) {
	.bnc-home-partida.bnc-sangre-1120 .bnc-home-partida__texto { padding-left: 25px; padding-right: 25px; }
	/* Y el pie de la tienda y las páginas con el texto a ras del contenedor, a 16 px (medido el 11/9
	   en la tienda y en «Dónde visitarnos»). */
	.bnc-home-partida.bnc-sangre-960 .bnc-home-partida__texto,
	.bnc-home-partida.bnc-sangre-llano .bnc-home-partida__texto { padding-left: 16px; padding-right: 16px; }
}
/* Imágenes de fabricante sobre blanco (fotos de producto, esquemas): multiplicadas, el blanco pasa
   a ser el crema de la página y no quedan como un recuadro pegado. Solo las que llevan la clase:
   en una foto con fondo real, multiplicar la oscurecería. */
img.bnc-sobre-blanco { mix-blend-mode: multiply; box-shadow: none; border-radius: 0; }
/* Las cartas de la cafetería (/menu-x/, la del QR de X-Madrid, y /menu/): una imagen por carta,
   en una columna que se lee de un vistazo; a todo lo ancho salían a 2000 px de alto y borrosas. */
.entry-content .wp-block-image.bnc-carta { max-width: 760px; margin: 0 auto 32px; }
.entry-content .wp-block-image.bnc-carta img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
@media (max-width: 767px) { .entry-content .wp-block-image.bnc-carta { margin-bottom: 16px; } }
/* El vídeo de las fichas de equipo: su carátula es la foto del producto sobre blanco. Sin el fondo
   carbón del botón y multiplicada sobre el crema, no queda como un recuadro blanco pegado (visto el
   11/9 en la Classe 5). Solo en `.bnc-video`: la portada y la guía llevan fotos con fondo real. */
.bnc-video .bnc-yt { background: transparent; }
.bnc-video .bnc-yt img { mix-blend-mode: multiply; }
.entry-content > .bnc-home-banda.wp-block-group { padding: 72px var(--bnc-hueco); }
.entry-content > .bnc-home-video.wp-block-group { padding: 80px var(--bnc-hueco); }
.entry-content .bnc-home-cifras { padding: 18px 0 0; }
.bnc-home-cifras strong { white-space: nowrap; }
@media (max-width: 1024px) {
	.entry-content > .bnc-home-video.wp-block-group { padding: 64px 20px; }
}
@media (max-width: 767px) {
	.entry-content > .bnc-home-banda.wp-block-group { padding: 0; }
	.entry-content > .bnc-home-video.wp-block-group { padding: 48px 20px; }
	/* Tres columnas de 100 px partían «Madrid Specialty Coffee Roaster Champion» en cinco líneas
	   y dejaban la «h» de «24–48 h» sola: en móvil, una fila por cifra. */
	.bnc-home-cifras { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* La columna de la cifra, en px: en em medía con la letra de la leyenda (13 px) y «24–48 h»,
	   a 24 px, se montaba sobre su texto. */
	.bnc-home-cifras li { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: baseline; gap: 12px; }
	.bnc-home-cifras strong { margin: 0; font-size: 24px; }
}

@media (max-width: 1024px) {
	.bnc-home-partida .bnc-home-partida__texto { padding: 48px 20px 48px 40px; }
	.bnc-home-partida--der .bnc-home-partida__texto { padding: 48px 40px 48px 20px; }
	.bnc-home-cifras strong { font-size: 24px; }
	.bnc-home-video { gap: 36px; padding: 64px 20px; }
}
@media (max-width: 767px) {
	/* En móvil la foto va arriba, entera de ancho, y el texto debajo. El panel del origen
	   se monta un poco sobre la foto, para que siga leyéndose como una sola pieza. */
	.bnc-home-banda { display: block; min-height: 0; padding: 0; margin-bottom: 48px; overflow: visible; background: transparent; }
	.bnc-home-banda > .bnc-home-banda__foto { position: relative; }
	.bnc-home-banda .bnc-home-banda__foto img { height: auto; aspect-ratio: 4 / 3; }
	.bnc-home-banda .bnc-home-banda__foto figcaption { top: 0; left: 0; right: auto; bottom: auto; font-size: 12px; }
	.bnc-home-banda .bnc-home-banda__panel { max-width: none; margin: -40px 16px 0 !important; padding: 28px 20px 18px; }
	.bnc-home-partida { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
	.bnc-home-partida > .bnc-home-partida__foto { min-height: 0; order: -1; }
	.bnc-home-partida .bnc-home-partida__foto img { position: static; height: auto; aspect-ratio: 4 / 5; }
	.bnc-home-visita .bnc-home-partida__foto img { aspect-ratio: 4 / 3; }
	.bnc-home-partida .bnc-home-partida__texto, .bnc-home-partida--der .bnc-home-partida__texto { padding: 32px 20px 36px; }
	.bnc-home-cifras { gap: 12px; }
	.bnc-home-cifras li { font-size: 13px; }
	.bnc-home-escaparate, .bnc-home-taza { margin-bottom: 48px; }
	.bnc-home-taza__texto { columns: 1; }
	.bnc-home-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px !important; }
	.bnc-home-tira figure figcaption { padding: 7px 10px 8px; font-size: 12px; }
	.bnc-home-video { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 48px 20px; margin-bottom: 48px; }
}

/* Las tres puertas y las secciones del cuerpo. */
.bnc-home-puertas, .bnc-home-perfiles, .bnc-home-guia { margin: 0 0 48px; }
.bnc-home-puertas h2, .bnc-home-perfiles h3 { font-size: 22px; margin: 0 0 8px; }
.bnc-home-puertas h2 a, .bnc-home-perfiles h3 a { color: inherit; text-decoration: none; }
.bnc-home-puertas h2 a:hover, .bnc-home-perfiles h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--action); }
.bnc-home-puertas p, .bnc-home-perfiles p { font-size: 16px; line-height: 1.6; }
/* Elegir por perfil de taza: cuatro columnas, cada una con su cuadrado de color. */
.bnc-home-perfiles { background: var(--bg-alt); padding: 40px 24px; border-radius: var(--radius); }
.bnc-home-perfiles > h2 { margin-top: 0; }
.bnc-home-perfiles .bnc-perfil-taza { font-size: 14px; }
.bnc-home-perfiles__rejilla { margin-top: 24px; }
.bnc-home-guia p { max-width: 68ch; }
.bnc-home-faq { margin: 0 0 48px; }
.bnc-home-faq .wp-block-details { border-top: 1px solid var(--linea-suave); padding: 14px 0; max-width: 72ch; }
.bnc-home-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--linea-suave); }
.bnc-home-faq summary { cursor: pointer; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 100; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.bnc-home-faq summary::-webkit-details-marker { display: none; }
.bnc-home-faq summary::after { content: "+"; font-family: "Anybody", "Archivo", sans-serif; font-size: 22px; line-height: 1; }
.bnc-home-faq details[open] summary::after { content: "–"; }
.bnc-home-faq details p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; max-width: 68ch; }
@media (max-width: 767px) {
	.bnc-home-hero { padding: 40px 0 48px; margin-bottom: 32px; }
	.bnc-home-hero .bnc-intro { font-size: 17px; }
	.bnc-home-perfiles { padding: 28px 16px; }
}

/* Guía del café (bocono-plantilla-guia.php): índice por bloques, tarjetas 4:5 como el
   catálogo, rejilla de 3 en escritorio y 1 en móvil (§ 05 y § 09 de la guía). */
.bnc-guia-bloque { margin: 48px 0 0; }
.bnc-guia-bloque > h2 { margin: 0 0 20px; }
/* La rejilla es una lista: la regla de Astra para las listas del contenido (margen izquierdo de
   20 px) pesaba más que esta y descuadraba las tarjetas a la izquierda. Con .entry-content delante
   manda esta (11/9/2026). */
.bnc-guia-rejilla, .entry-content .bnc-guia-rejilla { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; }
/* Tarjeta de artículo: la misma caja que la tarjeta de producto (borde de 1,5 px, radio de 2 px,
   fondo de superficie, sin sombra) y la foto en 3:2, la proporción de la fotografía de reportaje;
   en 4:5 la foto de cata se quedaba en dos manos y una taza. */
.bnc-guia-pieza { margin: 0; display: flex; flex-direction: column; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.bnc-guia-pieza > a { display: block; color: inherit; text-decoration: none; }
.bnc-guia-pieza h3 { font-size: 20px; line-height: 1.15; margin: 16px 16px 0; }
.bnc-guia-pieza > a:hover h3, .bnc-guia-pieza > a:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--action); }
.bnc-guia-pieza > a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bnc-guia-foto { display: block; overflow: hidden; background: var(--bg-alt); aspect-ratio: 3 / 2; border-bottom: var(--stroke) solid var(--border); }
.bnc-guia-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; display: block; }
.bnc-guia-pieza p { margin: 8px 16px 18px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.bnc-guia-cierre p { max-width: 68ch; }
.bnc-guia-cierre a, .bnc-guia-migas a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 4px; }
.bnc-guia-migas { margin: 40px 0 0; font-family: "Archivo", system-ui, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bnc-guia-hermanas .bnc-guia-rejilla { grid-template-columns: repeat(3, 1fr); }
.bnc-guia-hermanas .bnc-guia-pieza h3 { font-size: 17px; }
/* Astra pone a cada figura e imagen suelta de una entrada una sombra de 30 px (su CSS dinámico:
   `.ast-article-single figure { box-shadow: 0 0 30px rgba(0,0,0,.15) }`). La guía: sin sombras,
   y la fotografía sin marco (11/9/2026). */
html body .ast-article-single figure, html body .ast-article-single img:not(figure img) { box-shadow: none; }

/* Franja bajo la cabecera (bocono-franja.php). Primero fue la foto del probador como fondo CSS en
   la tienda y en todas las categorías; el 11/9 por la noche Carlos la vio en molinillos: «¿qué
   lógica tiene eso?». Ahora cada página lleva su propia foto como imagen de verdad (nombre, título
   y alt), elegida por lo que vende, y el encuadre sale de sus campos (`--bnc-franja-pos`).
   Alturas: primero fue de 120 px y a Carlos le pareció «muy corta»; probadas 200, 240, 280 y 320
   en escritorio, 280 deja la sonda entera, la mano completa y el mecanismo del tostador debajo
   (producción la tiene a 394). Foto a sangre, radio 0 y sin sombra (§ 03). */
.bnc-franja { display: block; height: 280px; overflow: hidden; background: var(--bg-alt); }
.bnc-franja .bnc-franja__foto { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: var(--bnc-franja-pos, 50% 50%); border-radius: 0; box-shadow: none; }
@media (max-width: 1024px) { .bnc-franja { height: 230px; } }
@media (max-width: 767px) {
	.bnc-franja { height: 190px; }
	.bnc-franja .bnc-franja__foto { object-position: var(--bnc-franja-pos-movil, var(--bnc-franja-pos, 50% 50%)); }
}
/* Con el mismo peso que la regla de escritorio (.entry-content delante): sin él, el móvil se
   quedaba en tres columnas de 100 px con los títulos partidos letra a letra (11/9/2026). */
@media (max-width: 991px) { .bnc-guia-rejilla, .entry-content .bnc-guia-rejilla, .bnc-guia-hermanas .bnc-guia-rejilla { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 600px) { .bnc-guia-rejilla, .entry-content .bnc-guia-rejilla, .bnc-guia-hermanas .bnc-guia-rejilla { grid-template-columns: 1fr; } }

/* Favoritos y comparación (bocono-favoritos-comparar.php): botones secundarios; el
   activo en carbón, nunca en naranja (el naranja es solo del botón de compra). */
.woocommerce ul.products li.product { position: relative; }
.bnc-fc-acciones { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bnc-fc-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; min-height: 36px; padding: 0 8px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1; cursor: pointer; }
.bnc-fc-boton:hover { background: var(--bg-alt); }
.bnc-fc-boton.is-on { background: var(--ink); color: var(--ink-invert); }
.bnc-fc-boton:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Los dos botones iban en cuadrados blancos de 36 px con borde de 1,5 px, uno encima de otro:
   en el móvil de Carlos (12/9) tapaban media bolsa. Ahora van en fila, más pequeños, sin borde y
   sobre un blanco translúcido; el icono manda y la foto se ve entera. */
.bnc-fc-acciones { flex-direction: row; gap: 4px; top: 6px; right: 6px; }
.bnc-fc-boton--favoritos, .bnc-fc-boton--comparar { min-width: 32px; min-height: 32px; padding: 0; border-color: transparent; background: var(--surface); font-size: 14px; }
.bnc-fc-boton--favoritos:hover, .bnc-fc-boton--comparar:hover { background: var(--surface); border-color: var(--border); }
.bnc-fc-boton--favoritos.is-on, .bnc-fc-boton--comparar.is-on { background: var(--ink); color: var(--ink-invert); border-color: var(--ink); }
/* (15/9, 8.10) En las tarjetas, el corazón y las flechas se volvían naranja oscuro con el foco (la regla `button:focus`
   de Astra; los de la ficha ya iban bien porque su regla pesa más). Con el foco, blanco y sin borde, como en reposo; al
   pasar por encima, el borde, como siempre. */
.bnc-fc-acciones:not(.bnc-fc-acciones--ficha) .bnc-fc-boton:focus:not(.is-on) { background-color: var(--surface); color: var(--ink); border-color: transparent; }
.bnc-fc-acciones:not(.bnc-fc-acciones--ficha) .bnc-fc-boton:focus:not(.is-on):hover { border-color: var(--border); }
/* Y la tarjeta reparte el alto: el botón de compra cae abajo del todo, así todas las tarjetas de
   una fila acaban a la misma altura aunque una tenga estrellas y otra no. */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .added_to_cart { margin-top: auto; }
/* Astra le da `order: 2` a la valoración: con el resumen en columna flexible, las estrellas se
   iban debajo del botón (12/9). Vuelven a su sitio, entre los datos del lote y el precio. */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .review-rating { order: 0; }
.bnc-fc-acciones--ficha { position: static; flex-direction: row; gap: 10px; margin: 12px 0 0; }
.single-product div.product .summary > .bnc-fc-acciones--ficha { order: 13; }
.bnc-fc-acciones--ficha .bnc-fc-boton { min-height: 40px; padding: 0 14px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bnc-fc-vacio { font-size: 16px; }
.bnc-fc-otro { margin: 24px 0 0; }
.bnc-fc-otro a, .bnc-fc-vacio a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 4px; }
.bnc-fc-tabla th[scope="row"] { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; vertical-align: middle; }
.bnc-fc-tabla thead th { vertical-align: top; min-width: 160px; }
.bnc-fc-tabla thead img { width: 100%; max-width: 140px; height: auto; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; display: block; margin: 0 0 8px; }
.bnc-fc-tabla thead span { display: block; font-family: "Archivo", system-ui, sans-serif; font-size: 14px; line-height: 1.3; }
.bnc-fc-quitar { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink-accent); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bnc-fc-buscador { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; max-width: 640px; }
.bnc-fc-buscador input[type="search"] { flex: 1 1 240px; height: 52px; padding: 0 14px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; color: var(--ink); }
.bnc-fc-atajos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; color: var(--ink); }
@media (max-width: 767px) { .bnc-fc-acciones--ficha { flex-wrap: wrap; } }

/* § 12 Pie: cierre con la franja de perfil de 8 px a sangre. */
.bnc-franja-perfil--pie { height: 8px; width: 100%; }
/* § 12 Pie carbón (bocono-pie.php): newsletter arriba con un campo, cuatro columnas en
   escritorio y acordeón en móvil, cierre con la franja. Texto crema; enlaces crema con
   subrayado naranja al pasar; botón secundario (el naranja es para la compra). */
html body .bnc-pie { background: var(--bg-invert); color: var(--ink-invert); margin: 48px 0 0; padding: 0; }
.bnc-pie a { color: var(--ink-invert); text-decoration: none; }
.bnc-pie a:hover, .bnc-pie a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--action); }
.bnc-pie a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.bnc-pie__interior { max-width: 1280px; margin: 0 auto; padding: 48px 24px 32px; }
.bnc-pie__news { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: center; padding: 0 0 32px; border-bottom: 1px solid #f2e8da33; }
.bnc-pie__titulo-news, .bnc-pie .bnc-pie__titulo-news { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 108; font-size: 28px; line-height: 1.05; text-transform: uppercase; color: var(--ink-invert); margin: 0 0 8px; }
.bnc-pie__news-texto p { margin: 0; font-size: 16px; color: #f2e8dacc; max-width: 44ch; }
.bnc-pie__form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.bnc-pie__form input[type="email"] { height: 52px; padding: 0 14px; border: var(--stroke) solid var(--ink-invert); border-radius: var(--radius); background: transparent; color: var(--ink-invert); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; width: 100%; }
.bnc-pie__form input[type="email"]::placeholder { color: #f2e8da99; }
.bnc-pie__form input[type="email"]:focus { outline: 2px solid var(--action); outline-offset: 2px; }
/* (15/9, 8.11) …y con el borde crema también con el foco: Astra pinta el borde de todo campo enfocado de azul (#046BD2,
   `input[type="email"]:focus`, (0,2,1)), que no es de la paleta, y aquí ganaba a la regla de arriba. */
.bnc-pie .bnc-pie__form input[type="email"]:focus { border-color: var(--ink-invert); }
.bnc-pie .bnc-boton--pie { height: 52px; padding: 0 22px; background: transparent; color: var(--ink-invert); border-color: var(--ink-invert); font-size: 13px; }
.bnc-pie .bnc-boton--pie:hover { background: var(--ink-invert); color: var(--ink); border-color: var(--ink-invert); }
.bnc-pie__trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bnc-pie__news-nota, .bnc-pie__news-error, .bnc-pie__news-ok { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #f2e8daa6; }
.bnc-pie__news-nota a { text-decoration: underline; text-underline-offset: 3px; }
.bnc-pie__news-error { color: var(--action); }
.bnc-pie__news-ok { font-size: 16px; color: var(--ink-invert); }
.bnc-pie__columnas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0 32px; }
.bnc-pie__col { border: 0; margin: 0; padding: 0; background: transparent; }
.bnc-pie__col-titulo, .bnc-pie .bnc-pie__col-titulo { list-style: none; cursor: default; margin: 0 0 14px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-invert); }
.bnc-pie__col-titulo::-webkit-details-marker { display: none; }
.bnc-pie__sub, .bnc-pie .bnc-pie__sub { margin: 20px 0 10px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #f2e8daa6; }
.bnc-pie__lista { list-style: none; margin: 0; padding: 0; }
.bnc-pie__lista li { margin: 0 0 8px; font-size: 16px; line-height: 1.4; }
.bnc-pie__lista--legal { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f2e8da33; }
.bnc-pie__lista--legal li { font-size: 13px; }
.bnc-pie__nota { font-size: 13px; line-height: 1.6; color: #f2e8dacc; margin: 12px 0 0; max-width: 34ch; }
.bnc-pie__nota strong { color: var(--ink-invert); }
.bnc-pie__envios { margin: 0 0 16px; }
.bnc-pie__direccion { font-style: normal; font-size: 16px; line-height: 1.6; }
.bnc-pie__mapa { display: inline-block; margin-top: 6px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--action); }
.bnc-pie__final { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 0; border-top: 1px solid #f2e8da33; font-size: 13px; color: #f2e8daa6; }
.bnc-pie__final p { margin: 0; }
.bnc-pie__final a { color: var(--ink-invert); }
.bnc-pie .bnc-franja-perfil--pie { margin: 0; }
@media (max-width: 991px) { .bnc-pie__columnas { grid-template-columns: 1fr 1fr; } .bnc-pie__news { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
	.bnc-pie__interior { padding: 32px 16px 24px; }
	.bnc-pie__columnas { grid-template-columns: 1fr; gap: 0; padding: 8px 0 24px; }
	.bnc-pie__col { border-bottom: 1px solid #f2e8da33; padding: 14px 0; }
	.bnc-pie__col-titulo, .bnc-pie .bnc-pie__col-titulo { cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0; min-height: 44px; }
	.bnc-pie__col-titulo::after { content: "+"; font-family: "Anybody", "Archivo", sans-serif; font-size: 22px; line-height: 1; }
	.bnc-pie__col[open] > .bnc-pie__col-titulo { margin-bottom: 12px; }
	.bnc-pie__col[open] > .bnc-pie__col-titulo::after { content: "–"; }
	.bnc-pie__form { grid-template-columns: 1fr; }
	.bnc-pie__nota { max-width: none; }
}
html body .woocommerce-breadcrumb, html body .rank-math-breadcrumb { font-size: 12px; }

/* § 10 Filtros: casillas (no radios), etiqueta de filtro con borde 1,5 y radio 2, contador de
   resultados, «Borrar filtros»; en móvil, panel plegable con el botón «Ver N cafés». */
.bnc-cat-filtros-panel > summary { list-style: none; display: none; margin: 0 0 12px; }
.bnc-cat-filtros-panel > summary::-webkit-details-marker { display: none; }
.bnc-cat-filtros-panel > summary small { margin-left: 8px; }
.bnc-cat-filtros .bnc-cat-fila { align-items: center; gap: 8px 8px; }
.bnc-cat-casilla { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.bnc-cat-casilla input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); border-radius: 0; }
.bnc-cat-casilla:has(input:checked) { background: var(--ink); color: var(--ink-invert); }
.bnc-cat-casilla small { color: inherit; opacity: .65; margin-left: 2px; }
.bnc-cat-casilla .bnc-perfil-taza__cuadro { width: 11px; height: 11px; display: block; }
.bnc-perfil-taza__cuadro--floral { background: var(--floral); }
.bnc-perfil-taza__cuadro--frutal { background: var(--frutal); }
.bnc-perfil-taza__cuadro--caramelizado { background: var(--caramelo); }
.bnc-perfil-taza__cuadro--descafeinado { background: var(--descafeinado); box-sizing: border-box; }
body .bnc-cat-filtros a.bnc-cat-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.bnc-cat-fila--acciones { margin-top: 4px; }
.bnc-cat-aplicar { display: none; } /* con JS las casillas envían solas; el botón queda para móvil y sin JS */
.bnc-cat-borrar { font-family: "Archivo", system-ui, sans-serif; font-size: 13px; color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.bnc-cat-filtros-panel > summary { display: inline-flex; }
	.bnc-cat-filtros-panel:not([open]) .bnc-cat-filtros { display: none; }
	.bnc-cat-filtros-panel[open] .bnc-cat-filtros { position: fixed; inset: 0; z-index: 9000; background: var(--bg); overflow: auto; padding: 24px 16px 96px; margin: 0; }
	.bnc-cat-filtros-panel[open] .bnc-cat-aplicar { display: inline-flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9001; background: var(--action); color: var(--action-ink); width: auto; }
	.bnc-cat-filtros .bnc-cat-rotulo { min-width: 100%; }
}
@media (max-width: 767px) { .bnc-cat-aplicar { display: inline-flex; } }

/* § 11 Barra fija inferior en la ficha móvil: precio a la izquierda, botón a la derecha, 64 px. */
.bnc-barra-compra { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--surface); border-top: var(--stroke) solid var(--border); }
.bnc-barra-compra .bnc-barra-precio { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 24px; }
.bnc-barra-compra .bnc-boton { height: 44px; padding: 0 20px; font-size: 13px; }
@media (max-width: 767px) { body.bnc-barra-compra-visible .bnc-barra-compra { display: flex; } body.bnc-barra-compra-visible { padding-bottom: 64px; } }

/* § 12 Cabecera de 88 px en escritorio (más la franja de 32): Astra la dejaba en 112 por el
   relleno del logo y la altura del menú. Logo a 64 px de alto (≈ 102 px de ancho, por
   encima del mínimo de 84 de la guía). */
@media (min-width: 922px) {
	html body .ast-primary-header-bar, html body .ast-primary-header-bar .ast-builder-grid-row { min-height: 88px; height: 88px; }
	html body .ast-primary-header-bar .site-branding { padding-top: 0; padding-bottom: 0; }
	html body .ast-primary-header-bar .site-logo-img img { max-height: 64px; width: auto; }
	html body .ast-primary-header-bar .main-header-menu .menu-link { height: auto; line-height: 1.2; }
}

/* La fila «above» de Astra se queda oculta, pero por otra razón que la de antes.
   Yo la había apagado leyendo el § 12 de la guía —88 px de cabecera en escritorio y la
   franja de promesas «bajando a donde trabaja»— y el resultado fue que v2 perdió una fila
   entera de la cabecera: el widget seguía ahí con los tres mensajes, midiendo 0 × 0 px.
   Carlos, 10/9/2026: «la que hizo codex me encanta incluso con la banda beige arriba».
   Manda él. La banda vuelve arriba, y la pinta `bocono-banda-superior.php`; esta regla
   solo evita que Astra imprima además su fila vacía. */
html body .ast-above-header-wrap { display: none; }
@media (max-width: 921px) { html body .ast-mobile-header-wrap .ast-above-header-wrap { display: none; } }
@media (max-width: 921px) {
	/* Móvil: 64 px antes del contenido (§ 12). */
	html body .ast-mobile-header-wrap .ast-primary-header-bar, html body .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row { height: 64px; min-height: 64px; }
	html body .ast-mobile-header-wrap .site-branding { padding-top: 0; padding-bottom: 0; }
	html body .ast-mobile-header-wrap .site-logo-img img { max-height: 54px; width: auto; } /* ≈ 86 px de ancho: la guía pide 84 mínimo */
}

/* § 11 Bloque de compra en el orden de la guía (kicker · H1 · perfil y notas · valoración ·
   impresión con SCA · ficha de datos · selectores · precio · botón · frescura): el orden se
   fija por CSS sobre lo que Astra y WooCommerce imprimen, sin tocar sus ganchos. */
.single-product div.product .summary { display: flex; flex-direction: column; }
.single-product div.product .summary > * { order: 50; }
.single-product div.product .summary > .bnc-kicker { order: 1; margin: 0 0 6px; }
.single-product div.product .summary > .product_title { order: 2; margin: 0 0 8px; }
.single-product div.product .summary > .bnc-perfil-taza { order: 3; }
.single-product div.product .summary > .bnc-chips { order: 4; }
.single-product div.product .summary > .woocommerce-product-rating { order: 5; margin: 0 0 12px; }
.single-product div.product .summary > .bnc-impresion { order: 6; }
/* 11/9/2026: la descripción corta va detrás del botón de compra y no delante. En los cafés
   no se ve (la plantilla la vacía en la ficha y la pinta en la banda sensorial), pero en nueve
   de las doce fichas de equipo es una lista de especificaciones —en la Classe 5, en
   mayúsculas: «2 GRUPOS… PESO: 56 kg… CALDERA PRINCIPAL 11 litros»— que repite la ficha
   técnica y empujaba el precio y el botón casi dos pantallas hacia abajo en el móvil. No se
   quita nada: solo cambia de sitio, y así lo primero que se ve es qué es, cuánto cuesta y
   dónde se compra. */
.single-product div.product .summary > .woocommerce-product-details__short-description { order: 11; }
.single-product div.product .summary > .bnc-bloques-cafe { order: 8; margin: 0 0 16px; }
.single-product div.product .summary > .price { order: 9; margin: 0 0 8px; }
.single-product div.product .summary > form.cart { order: 10; }
.single-product div.product .summary > .bnc-tostado-por { order: 11; }
.single-product div.product .summary > .product_meta { order: 60; }
/* Astra repite las categorías encima del título; ya van en el kicker y en el pie de la ficha. */
html body.single-product div.product .summary > .single-product-category { display: none !important; }
.bnc-kicker--ficha { font-size: 12px; letter-spacing: .14em; }
/* Impresión en taza con el SCA: franja del color del perfil (texto en carbón; sobre vino, en crema). */
.bnc-impresion { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 12px; padding: 10px 14px; background: var(--bg-alt); color: var(--ink); border-radius: var(--radius); }
.bnc-impresion strong { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 18px; line-height: 1.2; }
.bnc-impresion__sca { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 94; font-size: 18px; white-space: nowrap; }
.bnc-perfil-fondo--floral { background: var(--floral) !important; color: var(--ink) !important; }
.bnc-perfil-fondo--frutal { background: var(--frutal) !important; color: var(--ink-invert) !important; }
.bnc-perfil-fondo--caramelizado { background: var(--caramelo-fondo) !important; color: var(--ink) !important; }
.bnc-perfil-fondo--descafeinado { background: var(--descafeinado) !important; color: var(--ink) !important; }
/* Ficha de datos dentro del bloque de compra: sin título grande, es parte de la compra. */
.summary .bnc-bloques-cafe { margin: 0; }
.summary .bnc-bloque { border-top: 0; padding: 0; }
.summary .bnc-bloque h2 { margin: 0 0 6px; }
/* Precio del bloque de compra en cifra Anybody (§ 06: cifra de precio 32 px). */
.single-product div.product .summary > .price, .single-product div.product .summary > .price .amount, .single-product div.product .summary .woocommerce-variation-price .amount { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 32px; color: var(--ink); }
/* El símbolo, del mismo tamaño que la cifra. Encogerlo tenía sentido cuando iba delante
   («€13,50»), donde estorbaba; ahora que va detrás y con espacio, como manda el español,
   un euro pequeño detrás de un número grande parece una errata. */
.single-product div.product .summary > .price .woocommerce-Price-currencySymbol { font-size: 1em; }
/* …y lo mismo que en la tarjeta, que aquí faltaba y era peor.
   El complemento de suscripciones cuelga «— o suscríbete para ahorrar hasta un 12 %» dentro
   del mismo `.price`, así que heredaba los 32 px de Anybody del importe: en móvil salía a
   tres renglones enormes, más grandes que el propio precio, empujando el botón de compra
   fuera de la pantalla. Es el mismo destrozo que Carlos fotografió en la tienda el 10/9,
   pero en la ficha, donde se vende. El importe se queda como está; la frase baja a cuerpo de
   texto, en Archivo y en tinta suave, y el guión suelto desaparece. */
.single-product div.product .summary > .price .wcsatt-dash { display: none; }
.single-product div.product .summary > .price .wcsatt-sub-options,
.single-product div.product .summary > .price .wcsatt-sub-discount {
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 400, "wdth" 100;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-soft);
}
.single-product div.product .summary > .price .wcsatt-sub-options { display: inline; }
.single-product div.product .summary > .price .wcsatt-sub-options::before {
	content: "";
	display: block;
	margin-top: 4px;
}
/* Botoneras segmentadas de formato y molienda (§ 11): 44 px, borde 1,5 px, radio 2 px; la
   opción elegida en carbón (el naranja es solo del botón de compra); la agotada, tachada y
   sin puntero, con «Agotado» debajo. El <select> de WooCommerce sigue en el formulario, oculto. */
.single-product div.product .summary > .bnc-seg-campo--formato { order: 9; margin: 0 0 12px; }
.bnc-seg-campo .bnc-etiqueta { display: block; margin: 0 0 6px; }
.bnc-seg { display: inline-flex; flex-wrap: wrap; border: var(--stroke) solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.bnc-seg__op { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-right: var(--stroke) solid var(--border); border-radius: 0; background: transparent; color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; text-decoration: none; cursor: pointer; }
.bnc-seg__op:last-child { border-right: 0; }
/* Los botones se reparten el ancho de su fila.
   Sin esto, las siete moliendas caían en dos filas de 302 y 315 px dentro de una caja de
   343: los 41 y los 28 que sobraban quedaban dentro del borde como **una casilla vacía al
   final de cada fila**, que se lee como un botón que no ha cargado. Con `flex-grow` cada
   fila llena su ancho y el reparto respeta que «Prensa francesa» ocupe más que «Filtro». */
.bnc-seg__op { flex: 1 0 auto; }
/* (15/9, 8.06) Con cuatro opciones o más (las moliendas), la botonera partía en filas con líneas que no casaban: cada
   botón llevaba la suya a la derecha, en una fila caían a 126 y 238 px y en la siguiente a 178 y 262, y entre filas no
   había ninguna. En escritorio, «Italiana» se quedaba sola en la segunda fila, estirada a 550 px. Ahora es una rejilla
   de hasta tres columnas iguales (dos si no caben a 110 px, como dentro de la Caja Combinada) y las líneas son el hueco
   de 1,5 px sobre fondo carbón. Si la última opción queda sola, llega hasta el final de su fila. La de formato, con dos
   opciones, sigue igual. `:where()` deja la especificidad baja para que «pasar por encima» y «elegida» sigan mandando. */
.bnc-seg:has(> .bnc-seg__op:nth-child(4)) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(110px, calc((100% - 2 * var(--stroke)) / 3)), 1fr));
	gap: var(--stroke);
	background: var(--border);
}
:where(.bnc-seg:has(> .bnc-seg__op:nth-child(4))) > .bnc-seg__op { border-right: 0; background: var(--surface); }
:where(.bnc-seg:has(> .bnc-seg__op:nth-child(4))) > .bnc-seg__op:last-child { grid-column-end: -1; }
.bnc-seg__op:hover { background: var(--bg-alt); color: var(--ink); }
.bnc-seg__op.is-on, .bnc-seg__op.is-on:hover { background: var(--ink); color: var(--ink-invert); }
.bnc-seg__op:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
/* (15/9, 8.10) Con el foco, cada botón de la botonera se pintaba del naranja oscuro de los botones de Astra
   (`button:focus { background-color: #B56A28; border-color: #B56A28 }`, que gana a `:where()`): el anillo naranja de la
   guía, por dentro, no se veía sobre ese fondo (1,3:1), la letra carbón quedaba a 3,65:1 y la línea de al lado cambiaba
   de color. Con el foco, cada botón conserva su fondo, su letra y su línea, y lleva el anillo. */
.bnc-seg__op:focus { background-color: transparent; color: var(--ink); border-color: var(--border); }
:where(.bnc-seg:has(> .bnc-seg__op:nth-child(4))) > .bnc-seg__op:focus { background-color: var(--surface); }
.bnc-seg__op:focus:hover { background-color: var(--bg-alt); }
.bnc-seg__op.is-on:focus { background-color: var(--ink); color: var(--ink-invert); }
.bnc-seg__op small { display: none; font-size: 9px; letter-spacing: .08em; }
.bnc-seg__op.is-agotado { text-decoration: line-through; color: var(--ink-soft); cursor: default; pointer-events: none; }
.bnc-seg__op.is-agotado small { display: block; text-decoration: none; }
.bnc-seg__ayuda { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 1.4em; }
.bnc-seg__ayuda:empty { display: none; }
select.bnc-seg-oculto { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; }
.single-product table.variations td.value { position: relative; }
/* Selectores de formato y molienda: mismo campo de 52 px de la guía, etiqueta encima en versales. */
.single-product table.variations th.label { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 0 0 6px; vertical-align: bottom; }
.single-product table.variations td.value select { height: 52px; padding: 0 14px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; color: var(--ink); width: 100%; }
/* Cada atributo, en su propia fila y a todo el ancho: la etiqueta encima y la botonera
   debajo. Con rejilla se superponían las filas cuando hay dos atributos (formato y
   molienda) y la botonera se quedaba en 71 px, partida en dos líneas. */
.single-product table.variations, .single-product table.variations tbody,
.single-product table.variations tr, .single-product table.variations th,
.single-product table.variations td { display: block; width: 100%; }
.single-product table.variations { margin: 0 0 12px; border: 0; }
.single-product table.variations tr { margin: 0 0 14px; }
.single-product table.variations th, .single-product table.variations td { padding: 0; border: 0; text-align: left; }
.single-product .reset_variations { font-size: 12px; }
/* Cantidad y botón en una fila; el botón es el único naranja de la pantalla. */
.single-product form.cart .quantity .qty { height: 52px; width: 72px; text-align: center; border: var(--stroke) solid var(--border); border-radius: var(--radius); font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 18px; }
.single-product form.cart .woocommerce-variation-add-to-cart, .single-product form.cart:not(.variations_form) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Galería fija a la izquierda mientras se baja por el bloque de compra (§ 11). Su contenedor
   es `.bnc-ficha-arriba` (bocono-ficha-galeria-fija.php), que envuelve solo la galería y el
   bloque de compra: con el `div.product` entero de contenedor, la foto seguía pegada encima de
   la descripción, la ficha técnica y las preguntas hasta el final de la página. */
.single-product .bnc-ficha-arriba { display: flow-root; }
@media (min-width: 922px) { .single-product div.product div.images.woocommerce-product-gallery { position: sticky; top: 104px; } }
/* Banda sensorial: fondo del perfil, frase grande en Anybody a la izquierda, «Tostado por» a la derecha. */
.bnc-banda-sensorial { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: center; margin: 32px 0 0; padding: 48px 44px; background: var(--bg-alt); color: var(--ink); }
.bnc-banda-sensorial__frase p { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.22; margin: 0; max-width: none; text-wrap: balance; }
.bnc-banda-sensorial__tostado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-left: 56px; border-left: 1px solid currentColor; }
.bnc-banda-sensorial__tostado .bnc-isotipo { display: block; width: 96px; height: auto; margin-bottom: 8px; fill: currentColor; } /* (8.17, 15/9) SVG en línea a color del texto, sin fondo; antes una miniatura con fondo crema */
.bnc-banda-sensorial__tostado strong { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 18px; line-height: 1.2; }
.bnc-banda-sensorial__tostado .bnc-etiqueta, .bnc-banda-sensorial__tostado .bnc-nota { color: inherit; opacity: 1; } /* 16/9: al 85 % sobre naranja daba 3,87:1; carbón pleno da 4,7 */
.bnc-banda-sensorial .bnc-nota { font-size: 13px; }
@media (max-width: 767px) { .bnc-banda-sensorial { grid-template-columns: 1fr; padding: 24px 16px; gap: 20px; } .bnc-banda-sensorial__frase p { font-size: 22px; } .bnc-banda-sensorial__tostado { padding-left: 0; border-left: 0; border-top: 1px solid currentColor; padding-top: 16px; } .single-product table.variations { grid-template-columns: 1fr; } .single-product table.variations tr > th, .single-product table.variations tr > td { grid-row: auto; } }
/* Migas arriba del bloque de compra, no debajo (Astra las mete en el resumen). */
.single-product div.product .summary > .woocommerce-breadcrumb { order: 0; margin: 0 0 12px; }
/* Ficha técnica en PDF: botón secundario bajo la línea de frescura. */
.single-product div.product .summary > .bnc-ficha-pdf { order: 12; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bnc-ficha-pdf .bnc-nota { font-size: 13px; }

/* ==========================================================================
   § 09 bis — La tienda en móvil. Revisado en pantalla a 375 px el 10/9/2026,
   después de que Carlos dijera que la tienda era impresentable. Cada arreglo
   de aquí sale de una medida tomada en el navegador, no de una suposición.
   ========================================================================== */

/* Chips de navegación por familia y por perfil de taza.
   Estaban escritos solo para `.bnc-cat-filtros`, y en la tienda viven dentro de
   `nav.bnc-tienda-nav`: salían como enlaces pelados en vino y el contador se pegaba
   al nombre («Cafés de especialidad11»). Se estilan por su propia clase, allá donde
   estén, y el contador se separa con el `gap` del flex. */
body a.bnc-cat-chip {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 14px;
	border: var(--stroke) solid var(--border); border-radius: var(--radius);
	background: var(--surface); color: var(--ink); text-decoration: none;
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 700, "wdth" 84;
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
body a.bnc-cat-chip:hover, body a.bnc-cat-chip:focus-visible, body a.bnc-cat-chip.bnc-activo {
	background: var(--ink); color: var(--ink-invert); border-color: var(--ink);
}
body a.bnc-cat-chip small {
	font-variation-settings: "wght" 400, "wdth" 84;
	font-size: 11px; letter-spacing: 0; color: inherit; opacity: .75; margin: 0; /* 16/9: al 60 % sobre blanco daba 4,12:1; al 75 %, 6 */
}
.bnc-tienda-nav .bnc-cat-rotulo { font-family: "Archivo", system-ui, sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 767px) {
	/* Dos filas de chips ocupaban media pantalla antes del primer café: se deslizan. */
	.bnc-tienda-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
	.bnc-tienda-nav::-webkit-scrollbar { display: none; }
	.bnc-tienda-nav > * { flex: 0 0 auto; }
	.bnc-tienda-nav .bnc-cat-rotulo { position: sticky; left: 0; }
}

/* Franja de confianza. Eran cuatro cajas con borde entero: en móvil se apilaban a lo
   ancho y se comían 173 px antes de ver un solo café. Además el radio de 999 px
   contradecía la guía (§ 02: radio máximo 2 px en cualquier elemento). Ahora es una
   línea de texto separada por filetes finos, y en móvil una lista sin cajas. */
body .bnc-cat-confianza {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
	margin: 0 0 20px; padding: 0; list-style: none;
	font-family: "Archivo", system-ui, sans-serif; font-size: 13px; line-height: 1.35;
	color: var(--ink-soft);
}
body .bnc-cat-confianza li { padding: 0; border: 0; border-radius: 0; background: transparent; }
body .bnc-cat-confianza li + li { border-left: 1px solid rgba(37, 38, 38, .2); padding-left: 14px; }
body .bnc-cat-confianza li.bnc-cat-estrellas {
	background: transparent; color: var(--ink); border-color: transparent;
	font-variation-settings: "wght" 700, "wdth" 84;
}
@media (max-width: 767px) {
	body .bnc-cat-confianza { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; font-size: 12px; }
	body .bnc-cat-confianza li + li { border-left: 0; padding-left: 0; }
}

/* Tarjeta de producto, estructura fija de la guía (§ 09): imagen 4:5 sobre crema ·
   kicker de origen · nombre en H4 · cuadrado de perfil con su palabra · tres datos del
   lote en una línea · precio en Anybody · botón. Borde 1,5 px y sin sombra. */
.woocommerce ul.products li.product { border-width: var(--stroke); }
/* Astra imprime encima el nombre de la categoría, que repite palabra por palabra el
   kicker de origen que ya lleva la tarjeta. Dos veces «Costa Rica» en 158 px. */
.woocommerce ul.products li.product .ast-woo-product-category { display: none; }
/* En hover la tarjeta no se mueve: solo el nombre pasa a vino (guía § 09). */
.woocommerce ul.products li.product:hover { transform: none; box-shadow: none; }
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--ink-accent); }

/* === Tarjeta de producto en móvil — docs/11-DISENO-MOVIL-V2.md (12/9/2026) ===
   Sin contenedor: la imagen y el texto van sobre el fondo de la página, como en la referencia que
   aprobó Carlos. Fluida de 320 a 767 px —rejilla por fracciones, tipografía y huecos con clamp()—,
   imagen cuadrada, título corto de dos líneas, una sola línea técnica y el precio con el botón «+».
   Una nota: el encargo pedía un punto redondo de color; el sistema de Samantha usa cuadrado con su
   palabra (PERFIL-DE-TAZA.md) y manda Samantha, así que el testigo va cuadrado. */
@media (max-width: 767px) {
	/* Columnas por ancho mínimo, no fijas a dos: salen dos en cualquier móvil en vertical (hasta
	   450 px) y cuatro con el móvil en horizontal, donde con dos o tres cada foto medía más que la
	   pantalla (13/9). Las reglas de columnas de Astra (móvil 2, tableta 3) pesan (0,4,1) y en la hoja
	   combinada de LiteSpeed van detrás de esta, así que a igual peso ganaban: a 740 px salían tres.
	   Por eso el selector lleva `body` y `[class*="columns-"]:not(.elementor-grid)`: (0,4,2). */
	body.woocommerce-page ul.products[class*="columns-"]:not(.elementor-grid),
	body .woocommerce ul.products[class*="columns-"]:not(.elementor-grid) {
		display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: clamp(22px, 6vw, 30px) clamp(10px, 3.5vw, 16px); margin: 0; padding: 0;
	}
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
		background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0;
		width: auto !important; float: none !important; display: flex; flex-direction: column;
		position: relative;
	}
	/* El blanco que se veía detrás de la bolsa lo pintaban el marco de Astra y la propia imagen; con
	   los dos en transparente, el multiplicado convierte el blanco del render en el crema de la
	   página y la bolsa flota, que es justo lo que pedía Carlos. */
	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a,
	.woocommerce ul.products li.product img { background: transparent !important; }
	.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { margin-bottom: clamp(8px, 2.5vw, 12px); }
	.woocommerce ul.products li.product img {
		aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto !important;
	}
	/* El resumen reserva dos líneas de título y la línea técnica: así dos tarjetas contiguas acaban
	   a la misma altura aunque una tenga más texto que la otra. */
	.woocommerce ul.products li.product .astra-shop-summary-wrap {
		padding: 0; display: flex; flex-direction: column; position: relative;
		min-height: clamp(96px, 27vw, 124px);
	}
	/* Lo que no entra en la tarjeta de móvil. */
	.woocommerce ul.products li.product .bnc-kicker,
	.woocommerce ul.products li.product .bnc-perfil-taza,
	.woocommerce ul.products li.product .bnc-datos-linea,
	.woocommerce ul.products li.product .review-rating,
	.woocommerce ul.products li.product .star-rating,
	.woocommerce ul.products li.product .price .wcsatt-sub-options,
	.woocommerce ul.products li.product .price .wcsatt-sub-discount,
	.woocommerce ul.products li.product .astra-shop-summary-wrap > .button,
	.woocommerce ul.products li.product .astra-shop-summary-wrap > .added_to_cart,
	.woocommerce ul.products li.product .bnc-fc-acciones { display: none !important; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-family: "Anybody", "Archivo", system-ui, sans-serif;
		font-variation-settings: "wght" 700, "wdth" 88;
		font-size: clamp(14px, 4.1vw, 16px); line-height: 1.15; text-transform: none; letter-spacing: 0;
		margin: 0 0 4px; min-height: 2.3em;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.woocommerce ul.products li.product .price {
		display: block; margin: auto 0 0; padding-right: 40px;
		font-size: clamp(15px, 4.4vw, 18px);
	}
	.woocommerce ul.products li.product .price .amount,
	.woocommerce ul.products li.product .price ins .amount { font-size: clamp(15px, 4.4vw, 18px); }
	.woocommerce ul.products li.product .price .bnc-desde { font-size: clamp(11px, 3vw, 12px); }
	.woocommerce ul.products li.product .price del,
	.woocommerce ul.products li.product .price del .amount { font-size: clamp(11px, 3vw, 12px); }
	/* Orden dentro de la tarjeta: nombre, línea técnica y, al fondo, el precio. El nombre va dentro
	   de un enlace, que es el hijo real del resumen: ordenar el h4 no hacía nada (12/9). */
	.woocommerce ul.products li.product .ast-loop-product__link,
	.woocommerce ul.products li.product .woocommerce-loop-product__title { order: 1; }
	.bnc-tm-linea { order: 2; }
	.woocommerce ul.products li.product .price { order: 3; }
	/* Las tarjetas de una fila miden lo mismo y el precio cae al fondo en todas. */
	.woocommerce ul.products li.product { height: 100%; }
	/* El resumen es contenedor de consulta: la línea técnica mide su letra por el ancho de su columna
	   y no por el de la pantalla, porque en la portada la columna es más estrecha que en la categoría
	   a igual pantalla (13/9). Sin `position` propio (la regla de arriba le ponía `relative`). */
	.woocommerce ul.products li.product .astra-shop-summary-wrap { flex: 1 1 auto; position: static; container-type: inline-size; }
	/* Toda la tarjeta es enlace (docs/11, punto 7). Hasta el 13/9 solo respondían la foto y el
	   nombre: la línea técnica, el hueco y el precio no llevaban a ninguna parte (medido en el
	   navegador). La foto ya lleva su enlace; el del nombre se estira sobre todo el resumen (que, por
	   ser contenedor, es su marco). El «+» y «Avisarme» van encima. */
	.woocommerce ul.products li.product .ast-loop-product__link::after {
		content: ""; position: absolute; inset: 0; z-index: 1;
	}
	/* Nombre corto: el `<h4>` conserva el nombre completo —lo que lee Google y el lector de
	   pantalla— y en móvil se enseña el corto que trae `data-corto`. Ni se duplica texto ni se
	   pierde el largo. */
	/* El recorte a dos líneas va en el nombre corto y no en el `<h4>`: el nombre completo, a cuerpo 0,
	   contaba como tercera línea y ponía puntos suspensivos a todo nombre corto que ocupara dos
	   («Venezuela Campo / Elías…», visto a 320 px el 13/9). */
	.woocommerce ul.products li.product .woocommerce-loop-product__title[data-corto] {
		font-size: 0; display: block; -webkit-line-clamp: none; overflow: visible; min-height: 0;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title[data-corto]::before {
		content: attr(data-corto);
		/* Con texto alternativo vacío, el lector de pantalla no lee el corto delante del completo. El
		   navegador que no entienda la barra se queda con la declaración de arriba. */
		content: attr(data-corto) / "";
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
		font-size: clamp(14px, 4.1vw, 16px); line-height: 1.15;
	}
	/* Agotado: la bolsa se sigue viendo y encima va un velo del color de la página; nunca una banda
	   cruzando el producto. Se hace con velo y no con `filter` ni `opacity` sobre la imagen, porque
	   las dos rompen el multiplicado y la bolsa desaparecía (visto el 12/9 en pantalla). */
	.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap { position: relative; }
	.woocommerce ul.products li.product.outofstock .astra-shop-thumbnail-wrap::after {
		content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bg); opacity: .5; pointer-events: none;
	}
	/* La etiqueta de Astra venía estirada a todo el marco con fondo arena opaco y tapaba la bolsa
	   entera: parecía que el agotado no tuviera foto (12/9). Atada a su esquina y a su tamaño, por
	   encima del velo —debajo se veía lavada (13/9)— y con la medida de etiqueta de la guía: Archivo
	   700 · wdth 82 · versales · .2em · 11 px en móvil. */
	.woocommerce ul.products li.product .ast-shop-product-out-of-stock {
		position: absolute; inset: 6px auto auto 6px; z-index: 2; width: auto; height: auto; margin: 0;
		display: inline-block; padding: 5px 4px 5px 6px; line-height: 1; border-radius: 2px; pointer-events: none;
		font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-weight: 700;
		font-variation-settings: "wght" 700, "wdth" 82; letter-spacing: .2em; text-transform: uppercase;
	}
}

/* La línea técnica, el «+», «Avisarme», las hojas y el aviso de suscripción son de móvil. */
.bnc-tm-linea, .bnc-tm-mas, .bnc-tm-avisar, .bnc-tm-hoja, .bnc-tm-suscripcion { display: none; }
@media (max-width: 767px) {
	/* Una sola línea también para la más larga, «Caramelización · Natural · 85 SCA»: medida el 13/9,
	   a 12 px ocupa 181 px, y a 360 px de pantalla la columna tiene 158. Se estrecha con el eje de
	   ancho de Archivo al valor de etiqueta de la guía (wdth 82) en vez de bajar el cuerpo, y el
	   cuerpo sigue al ancho de la columna (`cqi`; el resumen es el contenedor): 11 px hasta una
	   columna de 160 y 12 desde 174. Por debajo de 360 px de pantalla recorta con puntos suspensivos
	   (docs/11, punto 4). */
	.bnc-tm-linea {
		display: block; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wdth" 82;
		font-size: clamp(11px, 7.6cqi - 1.2px, 12px); line-height: 1.3; word-spacing: -.04em; color: rgba(37, 38, 38, .78);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 6px;
	}
	/* El cuadrado del perfil, a la medida de la guía en listados (§ 10): 11 px y radio 0. */
	.bnc-tm-punto { width: 11px; height: 11px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
	/* (8.27, 17/9/2026) Un <i> vacío es un icono (los cuadrados de perfil, la flecha de CookieYes), no una
	   cursiva: con `font-style: italic` heredado de Astra, el navegador pedía archivo-italic.woff2 (104 KB, prioridad
	   muy alta) en páginas sin una sola letra en cursiva, solo para medir la línea de esos iconos. */
	i:empty { font-style: normal; }
	.bnc-tm-punto--floral { background: var(--floral); }
	.bnc-tm-punto--frutal { background: var(--frutal); }
	.bnc-tm-punto--caramelizado { background: var(--caramelo); }
	.bnc-tm-punto--descafeinado { background: var(--descafeinado); box-sizing: border-box; }
	/* «+»: zona táctil de 44 px a la derecha del precio, por encima del enlace de la tarjeta y sin
	   sombra. */
	.bnc-tm-mas {
		display: flex; align-items: center; justify-content: center;
		position: absolute; right: -7px; bottom: -7px; z-index: 2; width: 44px; height: 44px;
		padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink);
		font-family: "Anybody", "Archivo", system-ui, sans-serif; font-size: 20px; line-height: 1; cursor: pointer;
	}
	.bnc-tm-mas::before {
		content: ""; position: absolute; width: 30px; height: 30px;
		border: var(--stroke) solid var(--border); border-radius: 50%;
	}
	/* (15/9, 8.12) Con el foco del teclado, el «+» y «Avisarme» se pintaban del naranja oscuro de los botones de Astra
	   (`button:focus { background-color: #B56A28 }`), un cuadrado de 44 px sobre la tarjeta. Conservan su aspecto; el
	   foco lo señala el anillo. */
	.bnc-tm-mas:focus, .bnc-tm-avisar:focus { background-color: transparent; border-color: transparent; }
	.bnc-tm-mas:focus { color: var(--ink); }
	.bnc-tm-avisar:focus { color: var(--ink-accent); }
	/* «Avisarme» del agotado, en el mismo sitio que el «+», para que las tarjetas de una fila acaben
	   con el precio a la misma altura; abre la hoja con el formulario. A 320 px el precio ocupa 84 px
	   y el enlace 50, en una columna de 138 (medido el 13/9). */
	.bnc-tm-avisar {
		display: flex; align-items: center; justify-content: flex-end;
		position: absolute; right: 0; bottom: -7px; z-index: 2; min-width: 44px; height: 44px;
		margin: 0; padding: 0 0 0 4px; border: 0; background: none; box-shadow: none; cursor: pointer;
		color: var(--ink-accent); font-family: "Archivo", system-ui, sans-serif;
		font-size: clamp(11px, 3.2vw, 12px); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
	}
	.woocommerce ul.products li.product.outofstock .price { padding-right: 52px; }
	/* Si un precio largo no cabe, la cifra se estrecha antes de partirse en dos líneas. */
	.woocommerce ul.products li.product .price { container-type: inline-size; }
	@container (max-width: 90px) {
		.woocommerce ul.products li.product .price .amount { font-variation-settings: "wght" 700, "wdth" 80; }
	}
	/* Las hojas (formatos y aviso), ancladas abajo. */
	.bnc-tm-hoja {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
		max-height: 85vh; overflow-y: auto;
		background: var(--surface); border-top: var(--stroke) solid var(--border); padding: 16px 16px 24px;
	}
	.bnc-tm-hoja[hidden] { display: none; }
	.bnc-tm-hoja__titulo {
		margin: 0 0 10px; font-family: "Anybody", "Archivo", system-ui, sans-serif;
		font-variation-settings: "wght" 700, "wdth" 88; font-size: 15px;
	}
	.bnc-tm-hoja__texto { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--ink); }
	.bnc-tm-hoja ul { list-style: none; margin: 0; padding: 0; }
	.bnc-tm-hoja li + li { margin-top: 8px; }
	.bnc-tm-formato {
		display: flex; justify-content: space-between; align-items: center; gap: 12px;
		min-height: 48px; padding: 0 14px; text-decoration: none; font-size: 14px;
		border: var(--stroke) solid var(--border); background: var(--bg); color: var(--ink);
	}
	.bnc-tm-formato__precio { font-family: "Anybody", "Archivo", system-ui, sans-serif; }
	/* El formulario del aviso, con las medidas de la guía: etiqueta encima en versales de 11 px,
	   campo de 52 px y botón de 48 en móvil. Es la única acción de la hoja, así que va en naranja con
	   texto carbón. El campo va a 16 px para que el iPhone no amplíe la página al tocarlo. */
	.bnc-tm-aviso-form { display: grid; gap: 8px; margin: 0; }
	.bnc-tm-aviso-form label {
		font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-weight: 700;
		letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
	}
	.bnc-tm-aviso-form input[type="email"] {
		width: 100%; height: 52px; margin: 0; padding: 0 14px; font-size: 16px; color: var(--ink);
		border: var(--stroke) solid var(--border); border-radius: 2px; background: var(--surface); box-shadow: none;
	}
	.bnc-tm-aviso-form input[type="email"]::placeholder { color: var(--ink-soft); opacity: 1; }
	.bnc-tm-aviso-form button[type="submit"] {
		height: 48px; margin: 0; padding: 0 16px; border: var(--stroke) solid var(--border); border-radius: 2px;
		background: var(--action); color: var(--ink); box-shadow: none; cursor: pointer;
		font-family: "Archivo", system-ui, sans-serif; font-size: 14px;
		font-variation-settings: "wght" 700, "wdth" 84; letter-spacing: .08em; text-transform: uppercase;
	}
	.bnc-tm-aviso-form button[type="submit"][hidden] { display: none; }
	.bnc-tm-trampa { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
	.bnc-tm-aviso-msg { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
	.bnc-tm-aviso-msg:empty { display: none; }
	.bnc-tm-hoja__legal { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
	.bnc-tm-hoja__legal a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 2px; }
	.bnc-tm-cerrar {
		display: block; width: 100%; min-height: 44px; margin-top: 12px; border: 0; background: none; box-shadow: none;
		color: var(--ink-soft); font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
	}
	body.bnc-tm-abierta::after { content: ""; position: fixed; inset: 0; background: #25262699; z-index: 9998; }
	/* Carbón al 78 % y no `--ink-soft`: al 65 % sobre crema da 4,46:1, por debajo de AA (13/9). */
	.bnc-tm-suscripcion {
		display: block; margin: 0 0 14px; font-family: "Archivo", system-ui, sans-serif;
		font-size: 12px; color: rgba(37, 38, 38, .78);
	}
}

/* El agotado llevaba el botón naranja relleno y el disponible el de contorno: al perder la clase
   `add_to_cart_button` no le llegaba el estilo secundario. Devuelto a su sitio (12/9/2026). */
.woocommerce ul.products li.product.outofstock .button,
.woocommerce ul.products li.product .button.product_type_variable:not(.add_to_cart_button) {
	background: transparent; color: var(--ink); border-color: var(--border);
}

/* La barra de herramientas de la tienda: Astra la clava en el fondo de la pantalla en
   móvil, donde se comía 61 px fijos, truncaba el selector de orden («Orden predetermi…»)
   y chocaba con el botón de cookies y con el de subir. Va donde va en escritorio: encima
   de la rejilla. El contador y el orden siguen estando, solo dejan de estorbar. */
/* Astra la fija con `.ast-header-break-point .ast-shop-toolbar-container` (dos clases),
   que gana a `html body .clase`. Se iguala en clases y se sube con el elemento. */
@media (max-width: 921px) {
	html body.ast-header-break-point .ast-shop-toolbar-container,
	html body .ast-shop-toolbar-container {
		position: static; width: auto; left: auto; right: auto; bottom: auto;
		padding: 0; margin: 0 0 16px; background: transparent; box-shadow: none; border: 0;
	}
	html body.ast-header-break-point .ast-shop-toolbar-container .ast-shop-toolbar,
	html body .ast-shop-toolbar-container .ast-shop-toolbar {
		display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
	}
	/* Sin la barra pegada abajo, el botón de subir y el de cookies dejan de solaparse. */
	html body #ast-scroll-top { bottom: 20px; }
	/* Donde hay rejilla de productos, en móvil, el botón de subir no se pinta: flotaba justo encima
	   del «+» de la columna derecha y se quedaba con el toque de compra (visto a 320 px el 13/9). */
	@media (max-width: 767px) {
		html body.tax-product_cat #ast-scroll-top, html body.tax-product_tag #ast-scroll-top,
		html body.post-type-archive-product #ast-scroll-top, html body.search #ast-scroll-top,
		html body.home #ast-scroll-top { display: none !important; }
	}
	/* Dentro va `.ast-sticky-shop-filters`, que trae fondo gris #f8f8f8 y 10/20 de relleno:
	   suelta, sin la barra fija, se veía como un cajón blanco atravesado en la página. */
	html body .ast-shop-toolbar-container .ast-sticky-shop-filters {
		display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
		background: transparent; padding: 0; box-shadow: none; border: 0; min-height: 0; justify-content: flex-start;
	}
}
/* El desplegable de orden venía a 160 px fijos y cortaba su propia opción por defecto:
   «Orden predetermi…». Se le da el ancho que pide su texto y la forma de campo de la
   guía (§ 08: 1,5 px carbón, radio 2, 40 px de alto). */
html body .woocommerce-ordering select,
html body .ast-shop-toolbar-container select {
	width: auto; min-width: 214px; max-width: 100%;
	height: 40px; padding: 0 36px 0 12px;
	border: var(--stroke) solid var(--border); border-radius: var(--radius);
	background-color: var(--surface); color: var(--ink);
	font-family: "Archivo", system-ui, sans-serif; font-size: 13px;
}

/* El rótulo que se queda pegado mientras los chips se deslizan necesita fondo propio;
   si no, los chips le pasan por debajo y se lee un amasijo. */
@media (max-width: 767px) {
	.bnc-tienda-nav .bnc-cat-rotulo { background: var(--bg); padding-right: 10px; z-index: 2; }
}

/* Precio de la tarjeta. El complemento de suscripciones imprime un guión suelto antes de
   «o suscríbete», y la cifra del descuento vive fuera del <small>, así que se quedaba
   grande y en negrita mientras el resto encogía. */
.woocommerce ul.products li.product .price .wcsatt-dash { display: none; }
.woocommerce ul.products li.product .price .wcsatt-sub-options { display: block; }
@media (max-width: 767px) {
	.woocommerce ul.products li.product .price .wcsatt-sub-discount { font-size: 11px; line-height: 1.3; font-variation-settings: "wght" 700, "wdth" 84; }
}

/* Botón de la tarjeta: era un rectángulo de 124 px con el texto pegado a la izquierda y
   partido en dos líneas dentro de una caja de 40 px. Ancho completo y centrado. */
.woocommerce ul.products li.product .button {
	display: flex; width: 100%; justify-content: center; align-items: center;
	text-align: center; height: auto; min-height: 40px; padding: 10px 10px; line-height: 1.2;
}

/* El complemento de suscripciones parte su frase en dos: el texto va dentro de un <small>
   en negrita y la cifra del descuento queda fuera, así que en la tarjeta se leía
   «o suscríbete para ahorrar hasta un» y en la línea siguiente, huérfano, «12 %».
   Se juntan en un párrafo de peso normal, con un salto forzado detrás del precio. */
.woocommerce ul.products li.product .price .wcsatt-sub-options {
	display: inline; font-variation-settings: "wght" 400, "wdth" 84; color: var(--ink-soft);
}
.woocommerce ul.products li.product .price .wcsatt-sub-options::before { content: ""; display: block; }
.woocommerce ul.products li.product .price .wcsatt-sub-discount {
	font-variation-settings: "wght" 400, "wdth" 84; color: var(--ink-soft);
}

/* Botón flotante de preferencias de cookies. Es obligatorio tenerlo (retirar el
   consentimiento tiene que ser tan fácil como darlo), pero venía en el rojo del
   complemento, que no es un color de la marca, y en círculo. Carbón y radio 2. */
html body .cky-btn-revisit-wrapper .cky-btn-revisit {
	background: var(--ink) !important; border-radius: var(--radius) !important;
	width: 40px !important; height: 40px !important;
	border: var(--stroke) solid var(--ink) !important; box-shadow: none !important;
}
html body .cky-btn-revisit-wrapper .cky-btn-revisit img { filter: brightness(0) invert(1); width: 20px; height: 20px; }

/* Rejilla de la guía § 02: en móvil (desde 320 px) el margen lateral y el medianil son de
   16 px, no de 20; y el relleno interior de la tarjeta, 16. Con 20 y 20 las columnas
   quedaban en 157,5 px y el nombre del café se partía en cuatro líneas. Con los valores
   de la guía son 163,5. En «móvil grande» (desde 480) el margen sube a 24. */
@media (max-width: 479px) {
	html body .site-content .ast-container, html body .ast-container { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 480px) and (max-width: 767px) {
	html body .site-content .ast-container, html body .ast-container { padding-left: 24px; padding-right: 24px; }
}
/* (13/9) Aquí había, para móvil, hueco de 24/16 en la rejilla, 16 px de relleno a los lados del
   resumen y 16 debajo de la tarjeta: eran de la tarjeta con caja. Con `html body` delante solo
   casaban dentro de un `div.woocommerce` —la portada y los bloques de productos—, así que en la
   portada la tarjeta salía 32 px más estrecha que en la categoría, partía el precio en dos líneas y
   recortaba la línea técnica (medido a 430 px). Quitadas: la tarjeta sin contenedor de docs/11 es
   la misma en todas partes. */

/* Botón flotante de «subir». Astra lo pinta en el color de acento, o sea naranja, y la
   guía dice que solo hay un botón naranja por pantalla: en la tienda ese es «Elegir
   formato». Aquí va en carbón, que es lo que corresponde a un control secundario. */
html body #ast-scroll-top {
	background: var(--ink); color: var(--ink-invert); border-radius: var(--radius);
	border: var(--stroke) solid var(--ink); box-shadow: none;
}
html body #ast-scroll-top:hover { background: var(--ink-accent); border-color: var(--ink-accent); color: var(--ink-invert); }

/* El envoltorio del botón de cookies trae el rojo del complemento en un `style` en línea
   (#BF3943) y un radio del 50 %: quedaba un aro rojo alrededor del cuadrado carbón. Hay
   que ganarle al atributo, de ahí el !important. */
html body .cky-btn-revisit-wrapper {
	background-color: var(--ink) !important; border-radius: var(--radius) !important;
	width: 40px !important; height: 40px !important; box-shadow: none !important;
}
html body .cky-btn-revisit-wrapper .cky-btn-revisit { width: 40px !important; height: 40px !important; border: 0 !important; }

/* Titulares: reparto equilibrado de las líneas. Un H1 de cinco líneas con la última
   coja se lee peor, y no cuesta nada dejar que el navegador equilibre. */
html body h1, html body h2, html body h3, html body .entry-title { text-wrap: balance; }

/* § 02 de la guía: radio máximo 2 px en cualquier elemento, y «no existe ningún elemento
   redondeado en esta web». Quedaban dos: las flechas del carrusel de miniaturas de la
   ficha (círculos de 30 px, y además la de la derecha salía medio cortada fuera de la
   pantalla en móvil) y la etiqueta de oferta de Astra, que venía en píldora. */
html body .woocommerce-product-gallery .flex-direction-nav a,
html body .woocommerce-product-gallery .flex-direction-nav .flex-next,
html body .woocommerce-product-gallery .flex-direction-nav .flex-prev,
html body .flex-direction-nav a,
html body .flex-next, html body .flex-prev {
	border-radius: var(--radius);
	background: var(--ink); color: var(--ink-invert);
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	opacity: 1; text-indent: 0; box-shadow: none;
}
html body .flex-next { right: 0; }
html body .flex-prev { left: 0; }
/* Y con una flecha dentro, que no la tenían.
   Al cuadrarlas el 10/9 quedaron dos **cuadrados carbón vacíos** encima de la tira de
   miniaturas: el icono de Astra viene de una fuente que este tema no carga, así que su
   `::before` no pintaba nada, y el texto del enlace («Next», «Previous») tampoco se veía.
   Dos bloques negros sin nada dentro se leen como un error de carga, no como un control.
   La flecha se dibuja con dos bordes girados 45°, que no necesita ninguna fuente. */
html body .flex-direction-nav a { font-size: 0; position: relative; }
html body .flex-direction-nav a::after {
	content: "";
	width: 9px; height: 9px;
	border: 2px solid var(--ink-invert);
	border-left: 0; border-bottom: 0;
	transform: rotate(45deg);
	margin-left: -3px;
}
html body .flex-direction-nav .flex-prev::after {
	transform: rotate(-135deg);
	margin-left: 3px;
}
/* La deshabilitada tiene que parecerlo: antes salía idéntica a la activa.
   Lleva `!important` a regañadientes, y por un motivo concreto: flexslider **escribe la
   opacidad en el atributo `style` del propio enlace** desde JavaScript, y un estilo en línea
   gana a cualquier hoja. Comprobado: la regla estaba en el CSS servido y el valor calculado
   seguía siendo 1. */
html body .flex-direction-nav a.flex-disabled {
	opacity: .35 !important;
	pointer-events: none;
}

/* La galería, sin un solo cuadro blanco. Carlos, 12/9/2026: «necesito que no existan imágenes
   con fondos de cuadros, todas bonitas sin fondo (el mismo de la página)». El render de la bolsa
   trae su blanco quemado en los píxeles; con `mix-blend-mode: multiply` ese blanco se multiplica
   por el crema del contenedor y desaparece. Lo que lo rompía era esto mismo: el contenedor estaba
   en blanco, así que el multiplicado daba blanco y la ficha salía con un cuadro. Todo a crema. */
/* El contenedor va en crema, no transparente: `position: sticky` lo convierte en contexto de
   apilamiento propio y `mix-blend-mode` solo mezcla dentro de él. Con el contenedor transparente,
   el blanco del render se multiplicaba contra la nada y salía blanco: el cuadro. Con el crema
   detrás, blanco × crema = crema y la bolsa flota. */
html body .woocommerce-product-gallery { background: var(--bg); }
/* Y el crema tiene que estar **dentro** del grupo aislado: flexslider le pone un `transform` al
   carril de imágenes, y un transform crea otro contexto de apilamiento. Con el carril
   transparente, el multiplicado del render volvía a no tener con qué mezclarse. Todo en crema. */
html body .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
html body .woocommerce-product-gallery .woocommerce-product-gallery__image,
html body .woocommerce-product-gallery ol.flex-control-thumbs li,
html body .woocommerce div.product div.images .flex-viewport {
	background: var(--bg);
}
html body .woocommerce-product-gallery .woocommerce-product-gallery__image img,
html body .woocommerce-product-gallery ol.flex-control-thumbs li img { background: transparent; }
html body .ast-on-card-button.ast-onsale-card,
html body .ast-on-card-button.ast-onsale-card.circle,
html body span.onsale, html body .woocommerce span.onsale {
	border-radius: var(--radius);
	background: var(--action); color: var(--action-ink);
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 700, "wdth" 82;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	padding: 4px 10px; min-width: 0; min-height: 0; line-height: 1.2;
}

/* § 02 de la guía, escala de espaciado: «separación titular → cuerpo, 16 px en escritorio
   y 12 px en móvil». El editor de bloques deja 24 px en los dos, que en móvil separa
   demasiado la etiqueta de perfil de su descripción y estira las secciones sin motivo. */
.entry-content h1 + p, .entry-content h2 + p, .entry-content h3 + p, .entry-content h4 + p,
.entry-content h2 + ul, .entry-content h3 + ul,
.bnc-seccion h2 + p, .bnc-seccion h3 + p { margin-top: 16px; }
@media (max-width: 767px) {
	.entry-content h1 + p, .entry-content h2 + p, .entry-content h3 + p, .entry-content h4 + p,
	.entry-content h2 + ul, .entry-content h3 + ul,
	.bnc-seccion h2 + p, .bnc-seccion h3 + p { margin-top: 12px; }
}

/* El fondo de la miniatura de producto: blanco, no crema.
   La guía dice dos cosas que aquí chocan: la tarjeta tiene «superficie blanca» (§ 09) y la
   foto va «sobre fondo claro, que el packaging negro pide fondo crema, no blanco». La
   segunda es una instrucción para **quien exporta la foto**, no para el CSS: veinte de las
   veintitrés imágenes destacadas son JPEG con el blanco quemado en sus propios píxeles. Al
   poner crema detrás, la crema solo asomaba en las bandas de arriba y abajo del encuadre
   4:5 y quedaban dos blancos distintos dentro de la misma tarjeta, que es exactamente el
   «fondo blanco como un cuadro» que Carlos señaló el 10/9.
   Mientras las bolsas no se reexporten sobre crema (anotado en PENDIENTES), el fondo se
   iguala en blanco: un blanco liso se lee como una tarjeta; dos, como un error. */
/* ACTUALIZADO 12/9/2026. Carlos zanjó el dilema al revés de como lo había resuelto yo: «necesito
   que no existan imágenes con fondos de cuadros, todas bonitas sin fondo (el mismo de la
   página)». Así que el fondo de la tarjeta y del envoltorio de la foto es el crema de la página,
   no blanco, y el `mix-blend-mode: multiply` de la imagen convierte el blanco quemado del render
   en ese mismo crema. Resultado: la bolsa flota, no hay cuadro. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	background-color: var(--bg);
}

/* La tabla comparativa de la categoría tiene diez columnas y mide 938 px: en un móvil de
   375 cabe menos de la mitad. Ya se desliza dentro de su envoltorio, que es lo correcto,
   pero nada se lo decía al lector. Se añade una sombra de borde que aparece solo mientras
   quede tabla a la derecha: es la señal estándar y no ocupa sitio.
   Se hace con `background-attachment: local` sobre el propio envoltorio, así que no
   necesita JavaScript ni un elemento de más. */
/* (13/9) Sin degradados ni sombras (guía § 17): la tabla sigue deslizándose dentro de su envoltorio y en móvil lo dice su rótulo. */
.bnc-cat-tabla-envoltorio { background: none; }
@media (max-width: 767px) {
	/* Y un rótulo, porque la sombra sola es sutil de más en una tabla de datos. */
	.bnc-cat-tabla-envoltorio::before {
		content: "Desliza la tabla para ver el resto";
		display: block; margin: 0 0 8px;
		font-family: "Archivo", system-ui, sans-serif;
		font-variation-settings: "wght" 400, "wdth" 100;
		font-size: 12px; color: var(--ink-soft);
	}
}


/* ============================================================================
   BANDA SUPERIOR  (mu-plugin bocono-banda-superior.php)
   ============================================================================
   Carlos, 10/9/2026: «la que hizo codex me encanta incluso con la banda beige arriba».
   Medido ese día: Codex 27 px de arena con tres mensajes en versales de 10 px; producción
   36 px de granate con uno solo; v2 no tenía banda, la fila entera faltaba.

   El arena es el token de la guía (#EFDDC3), no el #F3DDC1 de Codex, que venía de la
   paleta vieja. Tinta carbón sobre arena: 12,4:1. */
.bnc-banda {
	background: var(--bg-alt);
	color: var(--ink);
	border-bottom: 1.5px solid var(--ink);
}
.bnc-banda-caja {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}
.bnc-banda-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	min-height: 28px;
}
.bnc-banda-item {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 600, "wdth" 100;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.bnc-banda-icono {
	flex: none;
	display: block;
}

/* Entre 768 y 1024 los tres mensajes suman más ancho que el contenedor. En vez de
   encogerlos hasta ser ilegibles, se recorta el espacio entre ellos y, si aún no caben,
   cae el primero: el premio es el que menos vende de los tres. */
@media (max-width: 1024px) and (min-width: 768px) {
	.bnc-banda-lista { gap: 20px; }
}
@media (max-width: 900px) and (min-width: 768px) {
	.bnc-banda-item:first-child { display: none; }
}

/* En móvil no caben ni dos. Los tres siguen en el HTML —los lee Google y los lee un lector
   de pantalla— y se turnan en pantalla cada cuatro segundos. Sin JavaScript: tres elementos
   apilados en la misma celda de una rejilla y una animación de opacidad desfasada. */
@media (max-width: 767px) {
	.bnc-banda-lista {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 30px;
	}
	.bnc-banda-item {
		grid-area: 1 / 1;
		justify-content: center;
		opacity: 0;
		animation: bnc-banda-turno 12s infinite;
		animation-delay: calc(var(--bnc-banda-turno) * 4s);
	}
	@keyframes bnc-banda-turno {
		0%, 2%   { opacity: 0; transform: translateY(4px); }
		4%, 30%  { opacity: 1; transform: none; }
		33%, 100%{ opacity: 0; transform: translateY(-4px); }
	}
	/* Ley Europea de Accesibilidad: quien pide menos movimiento se queda con el mensaje
	   que más vende, quieto. */
	@media (prefers-reduced-motion: reduce) {
		.bnc-banda-item { animation: none; opacity: 0; }
		.bnc-banda-item:last-child { opacity: 1; }
	}
}


/* ============================================================================
   CUENTA EN LA CABECERA
   ============================================================================
   Codex enseña «Mi cuenta» con su palabra; v2 tenía solo un icono, y encima el enlace iba a
   `wp-login.php` en vez de a `/mi-cuenta/` (arreglado el 10/9/2026 en `astra-settings`).
   Al encender el texto, Astra lo pintó en vino sobre carbón —1,5:1, ilegible— porque hereda
   el color de enlace del sitio. Aquí toma el mismo tratamiento que las entradas del menú:
   Archivo 700 / 84, 13 px, versales, crema, y el naranja solo como subrayado al pasar. */
.ast-primary-header-bar .ast-header-account,
.ast-primary-header-bar .ast-header-account-wrap { flex: none; }
.ast-primary-header-bar .ast-header-account-link,
.ast-primary-header-bar .ast-header-account-link:visited {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 7px;
	color: var(--ink-invert);
}
.ast-primary-header-bar .ast-header-account-text {
	/* Sin esto la palabra salía partida en «MI / CUE / NTA»: la sección derecha reparte el
	   ancho entre buscador, cuenta y carrito, y a la cuenta le tocaban 40 px. */
	white-space: nowrap;
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 700, "wdth" 84;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--ink-invert);
}
.ast-primary-header-bar .ast-header-account-link:hover .ast-header-account-text,
.ast-primary-header-bar .ast-header-account-link:focus-visible .ast-header-account-text {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--action);
}
/* El icono que acompaña al texto, al tamaño de la palabra y no al de un icono suelto. */
.ast-primary-header-bar .ast-header-account-link .ahfb-svg-iconset svg {
	width: 17px;
	height: 17px;
}

/* El inicio, como en Codex, es una casa. El enlace mantiene su nombre accesible («Inicio»)
   por el texto de lector de pantalla que va detrás del SVG. */
.bnc-menu-casa {
	display: block;
	vertical-align: middle;
}
.ast-primary-header-bar .menu-item-home > .menu-link {
	display: inline-flex;
	align-items: center;
}
/* Con siete entradas, el menú pedía 838 px y tenía 818: se partía en dos filas. La guía
   fija el tipo (Archivo 700/84, 13 px, .12em), no el aire lateral, así que el aire es lo
   que cede. */
@media (min-width: 922px) {
	.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* «Limpiar»: es un enlace, no un rótulo.
   WooCommerce pone el enlace de reiniciar la variación justo encima del precio, y con las
   versales que este tema aplica a los rótulos salía como «LIMPIAR», del mismo tamaño y color
   que «FORMATO» o «MOLIENDA». Leído de arriba abajo parecía otro campo del formulario en vez
   de la salida de emergencia que es. En minúsculas, subrayado y en tinta suave se entiende
   sin ocupar jerarquía. */
.single-product div.product .reset_variations {
	text-transform: none;
	font-variation-settings: "wght" 400, "wdth" 100;
	font-size: 13px;
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.single-product div.product .reset_variations:hover,
.single-product div.product .reset_variations:focus-visible {
	color: var(--ink);
}

/* ============================================================================
   CAJA COMBINADA  (woocommerce-product-bundles · PENDIENTES C39)
   ============================================================================
   Restaurado el complemento el 10/9/2026, el formulario salía con su CSS por defecto: cada
   café era una ficha apilada de 405 px en móvil (foto de 172 × 214, título, extracto y
   casilla), así que los diez cafés sumaban **4.835 px de scroll** antes de llegar al botón.
   Para elegir tres de diez hace falta verlos casi todos de un vistazo.

   Ahora cada café es una fila: foto de 76 px a la izquierda, y a la derecha el nombre, la
   impresión en dos líneas como mucho y la casilla con el precio. Filas separadas por el borde
   de 1,5 px carbón de la guía, sin tarjetas ni sombras. */
.bundle_form .bundled_product {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	float: none;
	width: auto;
	margin: 0;
	padding: 14px 0;
	border-bottom: var(--stroke) solid var(--border);
}
.bundle_form .bundled_product:first-of-type { border-top: var(--stroke) solid var(--border); }
/* (15/9, 8.07) La regla de arriba perdía abajo contra la de Product Bundles
   (`.woocommerce div.product.bundled_product_summary`, (0,3,1)): cada café llevaba un borde negro al 5 %, casi
   invisible, y 1,618 rem de relleno y de margen por debajo, que sumaban unos 50 px de scroll por café. Con esta, la
   línea es la carbón de la guía y la fila vuelve a sus 14 px. */
html body .bundle_form div.bundled_product.bundled_product_summary { margin-bottom: 0; padding-bottom: 14px; border-bottom: var(--stroke) solid var(--border); }
/* (15/9, 8.08) Con la línea ya en carbón se vio lo que el borde casi invisible escondía:
   - Cada fila medía lo que su texto. El formulario es flexible y con `flex-wrap` (la regla de `form.cart`), y un
     elemento flexible sin base se encoge a su contenido: en 1366 las líneas acababan en x = 894, 741, 888…, una
     escalera. Pasaba en todos los anchos menos en el móvil, donde el texto ya llena la fila.
   - Entre fila y fila, además del relleno, caían los 12 px de `gap` del formulario: 14 px encima de la línea y 26
     debajo.
   En escritorio, a dos columnas: los diez cafés caben en unos 750 px en vez de 1.463, que es lo que se buscaba desde
   el principio, verlos casi todos de un vistazo. Entre columnas, el 4 % de la ficha, lo mismo que separa la galería
   del resumen. La suscripción, el aviso y el botón van en una columna: a 1.200 px el texto salía a unos 150
   caracteres por línea. */
html body.single-product div.product form.cart.bundle_form { row-gap: 0; }
html body .bundle_form div.bundled_product.bundled_product_summary { flex: 0 0 100%; align-self: stretch; }
html body .bundle_form .wcsatt-options-prompt-text { max-width: 68ch; }
/* (8.09) …y el bloque de abajo, a lo ancho: con el texto topado a 68ch, se encogía a ese ancho y en 768 el botón
   acababa 105 px antes que las filas. */
html body.single-product div.product form.cart.bundle_form .bundle_data { flex: 0 0 100%; }
@media (min-width: 1024px) {
	html body.single-product div.product form.cart.bundle_form { column-gap: 4%; }
	html body .bundle_form div.bundled_product.bundled_product_summary { flex: 1 1 40%; max-width: 48%; }
	html body .bundle_form div.bundled_product.bundled_product_summary:nth-of-type(2) { border-top: var(--stroke) solid var(--border); }
	html body.single-product div.product form.cart.bundle_form .bundle_data { flex: 0 0 48%; max-width: 48%; }
}
/* El botón de la caja, en su sitio. Astra lo corre 1 em a la izquierda cuando la ficha tiene una cantidad oculta
   (`.woocommerce-js .product:has(.quantity input[type="hidden"]) .button.single_add_to_cart_button`, (0,6,1)), y la
   caja la tiene siempre, porque cada café lleva la suya: en el móvil el botón empezaba en x = 1, pegado al borde de la
   pantalla. Y en escritorio medía 204 px, porque el `width: auto` de Astra ganaba a la regla de más arriba. */
html body.single-product div.product form.cart.bundle_form .bundle_button .button.single_add_to_cart_button { width: 100%; margin-left: 0; }
.bundle_form .bundled_product .bundled_product_images {
	grid-column: 1;
	grid-row: 1 / span 3;
	float: none;
	width: 76px;
	margin: 0;
}
.bundle_form .bundled_product .bundled_product_images img {
	width: 76px;
	height: 95px;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	background: var(--surface);
	border-radius: 0;
	margin: 0;
}
.bundle_form .bundled_product .details {
	grid-column: 2;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.bundle_form .bundled_product_title {
	font-family: "Anybody", "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 700, "wdth" 84;
	text-transform: uppercase;
	font-size: 15px;
	line-height: 1.2;
	margin: 0 0 4px;
}
.bundle_form .bundled_product_title .bundled_product_permalink { color: var(--ink); }
.bundle_form .bundled_product_excerpt,
.bundle_form .bundled_product_excerpt p {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-soft);
	margin: 0 0 8px;
}
/* La impresión entera ocupaba tres o cuatro líneas; aquí basta con saber por dónde va. */
.bundle_form .bundled_product_excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bundle_form .bundled_product_optional_checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
}
/* 24 × 24: el mínimo que pide la guía para un objetivo táctil de este tamaño. */
.bundle_form .bundled_product_checkbox {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--ink);
	flex: none;
}
.bundle_form .bundled_product_optional_checkbox del { color: var(--ink-soft); }
.bundle_form .bundled_product_optional_checkbox ins { text-decoration: none; font-weight: 700; }
/* El total y el botón, a lo ancho del formulario y no a 189 px pegados al borde. */
.bundle_form .bundle_data { margin-top: 16px; }
.bundle_form .bundle_button,
.bundle_form .bundle_add_to_cart_button { width: 100%; justify-content: center; }
.bundle_form .bundle_price { font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 24px; margin: 0 0 8px; }
.bundle_form .bundle_error,
.bundle_form .bundle_error ul,
.bundle_form .bundle_error li {
	font-size: 13px;
	color: var(--ink-soft);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 8px;
	list-style: none;
}

/* La foto de cada café en la caja, a su tamaño.
   Salía a 38 × 48 px dentro de una columna de 76: el complemento le pone a
   `.bundled_product_images` un `max-width: 50%` pensado para su maqueta de dos columnas, y a
   la figura una sombra de 30 px que la guía no permite. */
.bundle_form .bundled_product .bundled_product_images { max-width: none; }
.bundle_form .bundled_product .bundled_product_image {
	width: 76px;
	margin: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.bundle_form .bundled_product .bundled_product_image a { display: block; }
.bundle_form .bundled_product .bundled_product_image img { width: 76px; height: 95px; max-width: none; }
/* «Sin existencias» venía en rojo puro (#FF0000), que no es de la paleta. En carbón y en
   seminegrita: junto al precio tachado y la casilla apagada ya se entiende. */
.bundle_form .stock.out-of-stock {
	color: var(--ink);
	font-family: "Archivo", system-ui, sans-serif;
	font-variation-settings: "wght" 600, "wdth" 100;
	font-size: 13px;
	margin: 6px 0 0;
}
/* …con más peso, porque la regla de arriba perdía: WooCommerce pinta `.stock.out-of-stock` en
   rojo con un selector más específico y el primer despliegue siguió saliendo #FF0000. */
html body .bundle_form .bundled_product .stock.out-of-stock { color: var(--ink); }
/* Y la foto, cuadrada: el render de la bolsa es de 600 × 600 y en un hueco 4:5 dejaba bandas
   de fondo arriba y abajo que se leían como un marco. */
html body .bundle_form .bundled_product .bundled_product_image img { height: 76px; aspect-ratio: 1 / 1; }

/* El botón de compra, a todo el ancho en el móvil.
   Ya había una regla (`@media (max-width: 479px) .single_add_to_cart_button { width: 100% }`)
   pero perdía contra la de WooCommerce para `form.cart .button`, y en la Classe 5 el botón se
   quedaba en 185 px pegado a la izquierda, al lado de un hueco. */
@media (max-width: 767px) {
	html body.single-product div.product form.cart .single_add_to_cart_button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}
/* (15/9, 8.09) …y en su sitio cuando la ficha oculta la cantidad. Si solo se puede comprar una unidad (vendido de uno
   en uno, o con una sola en existencias), WooCommerce pinta la cantidad como `<input type="hidden">` dentro de su
   `div.quantity`, y Astra corre el botón 1 em a la izquierda para compensar
   (`.woocommerce-js .product:has(.quantity input[type="hidden"]) .button.single_add_to_cart_button`). Con el formulario
   flexible no casaba: en la Hario Mini-Slim+ el botón quedaba 14 px hacia dentro en escritorio y, en el móvil, en
   x = 2, pegado al borde de la pantalla y con 28 px de hueco encima. El `div` vacío deja de pintarse (el campo oculto
   se envía igual) y el botón no lleva margen. */
html body.single-product div.product form.cart .quantity:has(> input[type="hidden"]) { display: none; }
html body.single-product div.product form.cart .single_add_to_cart_button:not(#bnc) { margin-left: 0; }

/* El selector de cantidad: un solo control de tres piezas.
   Astra añade dos enlaces «−» y «+» a cada lado del campo, pero sin borde ni fondo: se veían
   dos signos sueltos de 38 px flotando junto a una caja de 58, y no se leían como botones.
   Ahora las tres piezas miden 52 px de alto, comparten el borde de 1,5 px carbón de la guía y
   se tocan, de modo que se lee como una sola pieza. 44 px de ancho en los signos: el mínimo
   de objetivo táctil. */
html body.single-product form.cart .quantity.buttons_added {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 12px;
}
html body.single-product form.cart .quantity.buttons_added .minus,
html body.single-product form.cart .quantity.buttons_added .plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 52px;
	border: var(--stroke) solid var(--border);
	background: var(--surface);
	color: var(--ink);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	border-radius: 0;
}
html body.single-product form.cart .quantity.buttons_added .minus { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
html body.single-product form.cart .quantity.buttons_added .plus { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
html body.single-product form.cart .quantity.buttons_added .minus:hover,
html body.single-product form.cart .quantity.buttons_added .plus:hover { background: var(--bg-alt); }
html body.single-product form.cart .quantity.buttons_added .qty { border-radius: 0; margin: 0; }
/* …y el campo con su número. En el primer despliegue el `inline-flex` encogió el campo hasta
   dejarlo en unos 26 px entre los dos signos y el «1» desaparecía: justo lo contrario de lo
   que se buscaba. Ancho fijo y sin encogerse; y el grupo, pegado al margen como el resto. */
html body.single-product form.cart .quantity.buttons_added { margin-left: 0; }
html body.single-product form.cart .quantity.buttons_added .qty {
	flex: 0 0 64px;
	width: 64px;
	min-width: 64px;
	height: 52px;
	padding: 0;
	text-align: center;
	color: var(--ink);
	-moz-appearance: textfield;
}
html body.single-product form.cart .quantity.buttons_added .qty::-webkit-outer-spin-button,
html body.single-product form.cart .quantity.buttons_added .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Los campos de formulario, en carbón y no en el gris pizarra de Astra.
   Astra pinta el texto de todos los campos con `var(--ast-form-input-text, #475569)` desde su
   CSS dinámico, que se carga después de esta hoja. #475569 no es un color de la paleta de la
   guía: salía en el campo de cantidad de la ficha, y también en el buscador, el carrito y el
   pago. Se redefine la variable en la raíz y así se arreglan todos de una vez. */
:root { --ast-form-input-text: var(--ink); }
/* (15/9, 8.10) …y con el foco. Astra tiene otra variable para el campo enfocado (`--ast-form-input-focus-text`, también
   #475569): al escribir el nombre en una valoración, el texto pasaba de carbón a gris pizarra. En el pie, el campo del
   correo va sobre carbón con letra crema, y con el foco se leía gris sobre carbón, a 2:1. */
:root { --ast-form-input-focus-text: var(--ink); }
.bnc-pie__form { --ast-form-input-focus-text: var(--ink-invert); }

/* El hueco de 12 px antes del selector de cantidad en los productos simples.
   `form.cart` es flexible y con `gap: 12px`, y WooCommerce le pone el «clearfix» de siempre
   (`::before` y `::after` con `content: " "`). En un contenedor flexible esos pseudoelementos
   cuentan como elementos: el `::before` ocupaba el primer puesto y el hueco de 12 px lo
   separaba del selector, que por eso empezaba en x = 28 y no en 16 como todo lo demás. En
   flexbox no hay flotantes que limpiar, así que se quitan. */
html body.single-product div.product form.cart::before,
html body.single-product div.product form.cart::after { content: none; display: none; }

/* «Limpiar», otra vez y con más peso: la regla de más arriba perdía contra las versales que
   el tema aplica a todo lo que va dentro de `.variations`. */
html body.single-product div.product table.variations a.reset_variations,
html body.single-product div.product .variations_form a.reset_variations {
	text-transform: none;
	letter-spacing: 0;
	font-variation-settings: "wght" 400, "wdth" 100;
	font-size: 13px;
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* …y el «−» en su sitio. Astra coloca los dos signos con `position: absolute` para montarlos
   encima del campo; con el grupo flexible eso dejaba el «−» fuera del flujo y el campo
   empezaba en x = 22, **debajo del botón**: el «1» estaba, pero tapado. En flujo normal los
   tres van seguidos: «−» de 16 a 60, el campo de 60 a 124 y el «+» de 124 a 168. */
html body.single-product form.cart .quantity.buttons_added .minus,
html body.single-product form.cart .quantity.buttons_added .plus {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	transform: none;
	flex: 0 0 44px;
}
/* …y como rejilla fija. El culpable era la hoja dinámica de Astra:
   `.woocommerce-js .quantity .minus { margin-right: -38px }`, pensado para su «−» absoluto
   encima del campo. Con el «−» ya en su sitio, ese margen negativo metía el campo 38 px por
   debajo de él. Una rejilla de 44 + 64 + 44 px pone cada pieza en su casilla y los márgenes
   se anulan. El campo llena su casilla con `width: 100%`: un `input` no se estira solo. Y la
   misma hoja lo topaba a `max-width: 58px` (`.woocommerce-js .quantity input[type="number"]`)
   con 16 px de relleno a cada lado: de ahí el hueco de 6 px que quedaba antes del «+». */
html body.single-product form.cart .quantity.buttons_added {
	display: inline-grid;
	grid-template-columns: 44px 64px 44px;
	align-items: stretch;
}
html body.single-product form.cart .quantity.buttons_added > .minus,
html body.single-product form.cart .quantity.buttons_added > .qty,
html body.single-product form.cart .quantity.buttons_added > .plus {
	box-sizing: border-box;
	margin: 0 !important;
	width: 100%;
	min-width: 0;
	max-width: none;
}
html body.single-product form.cart .quantity.buttons_added > .qty {
	padding-left: 4px;
	padding-right: 4px;
}
html body.single-product form.cart .quantity.buttons_added > .minus { grid-column: 1; }
html body.single-product form.cart .quantity.buttons_added > .qty { grid-column: 2; }
html body.single-product form.cart .quantity.buttons_added > .plus { grid-column: 3; }

/* «Sin existencias» en la ficha, en carbón: WooCommerce lo pinta en su rojo (#e2401c), que no
   es de la paleta. Y el botón de añadir, cuando la variación elegida no se puede comprar, tiene
   que parecer desactivado: seguía naranja entero y al pulsarlo salía un aviso del navegador
   (visto el 11/9 en la Sage Bambino, con sus dos colores a cero). */
html body.single-product div.product .summary .stock.out-of-stock { color: var(--ink); font-weight: 700; }
html body.single-product div.product form.cart .single_add_to_cart_button.disabled,
html body.single-product div.product form.cart .single_add_to_cart_button.wc-variation-is-unavailable {
	opacity: 1; background: var(--bnc-arena); border-color: var(--bnc-arena); color: var(--bnc-carbon); cursor: not-allowed; /* 16/9: al 40 % el texto daba 1,59:1; arena con carbón se ve desactivado y se lee */
}
/* El precio tachado de la ficha: WooCommerce le pone opacity .5 y el gris caía a 2,94:1 (16/9). */
html body.single-product div.product .price del, html body.single-product div.product .price del .amount { opacity: 1; color: var(--ink-soft); }

/* Aire entre un vídeo de la descripción y el titular que lo sigue: el de 360° de la Sage
   quedaba pegado a «Descripción de la Sage Bambino». */
.bnc-seccion .wp-video { margin-bottom: 32px; }

/* El botón de enviar de los formularios de Elementor (Contacto), con el botón principal de la
   guía (§ 07). En producción toma el color «accent» del kit de Elementor; en v2 el kit activo
   apunta a uno que no existe (C42), así que salía con fondo transparente y texto blanco:
   invisible. Visto el 11/9/2026. No depende del kit: toma los tokens del tema. */
html body .elementor-widget-form .elementor-field-group .elementor-button[type="submit"] {
	height: 52px; padding: 0 32px;
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
	background: var(--action); color: var(--action-ink);
	border: var(--stroke) solid var(--border); border-radius: var(--radius); box-shadow: none;
	transition: background .14s ease-out;
}
html body .elementor-widget-form .elementor-field-group .elementor-button[type="submit"] .elementor-button-text { color: var(--action-ink); }
html body .elementor-widget-form .elementor-field-group .elementor-button[type="submit"]:hover { background: var(--action-hover); }
html body .elementor-widget-form .elementor-field-group .elementor-button[type="submit"]:active { background: var(--action-active); }

/* Aviso de origen que aún no está publicado (categorías nuevas, 12/9/2026). */
.bnc-cat-proximamente {
	margin: 0 0 28px; padding: 14px 16px; border: var(--stroke) solid var(--action);
	background: var(--surface); color: var(--ink); font-size: 16px; max-width: 60ch;
}
.bnc-cat-proximamente a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
 * Ficha de producto: la primera pantalla. 12/9/2026.
 *
 * Carlos comparó la ficha de v2 con la que hizo Codex y la diferencia que señaló no era de
 * contenido sino de composición: «bonitas, alineadas, buen tamaño». En v2 el H1 iba a 56 px en
 * una columna estrecha —tres líneas para «Café de Brasil Bourbon rojo natural»— y la ficha de
 * origen bajaba en una sola columna, así que el precio, los selectores y el botón de comprar
 * caían por debajo del pliegue en un portátil de 900 px de alto. Aquí se corrigen las tres
 * cosas: columna de texto más ancha, título a escala de ficha y aire ajustado.
 * ------------------------------------------------------------------------- */
@media (min-width: 922px) {
	.single-product div.product div.images.woocommerce-product-gallery { width: 41%; }
	.single-product div.product .summary.entry-summary { width: 55%; }
}
html body.single-product div.product .summary > .product_title.entry-title {
	font-size: clamp(28px, 2.5vw, 40px);
	line-height: 1.02;
}
.single-product div.product .summary > .bnc-impresion { margin-bottom: 10px; }
.single-product div.product .bnc-origen { margin: 0 0 14px; }
.single-product div.product .bnc-origen > h2, .single-product div.product .bnc-origen > .bnc-etiqueta { margin-bottom: 6px; }

/* -------------------------------------------------------------------------
 * Primera pantalla de tienda y categorías. 12/9/2026.
 *
 * Carlos: «en las páginas de categoría poner imágenes preciosas debajo de la cabecera y que se
 * vea en la pantalla la cabecera y los productos». Medido antes del cambio en un portátil de
 * 1440 × 900: la franja ocupaba 280 px, quedaban 100 px de aire hasta el H1 y el primer producto
 * empezaba en el píxel 918 —fuera de la pantalla—. Con la franja a 220, el aire a la mitad y los
 * márgenes de la cabecera ajustados, el primer producto sube por encima del pliegue.
 * ------------------------------------------------------------------------- */
body.archive .bnc-franja, body.post-type-archive-product .bnc-franja, body.tax-product_cat .bnc-franja { height: 220px; }
@media (max-width: 1024px) { body.archive .bnc-franja, body.post-type-archive-product .bnc-franja, body.tax-product_cat .bnc-franja { height: 180px; } }
@media (max-width: 767px)  { body.archive .bnc-franja, body.post-type-archive-product .bnc-franja, body.tax-product_cat .bnc-franja { height: 150px; } }
body.archive .site-content .ast-container, body.post-type-archive-product .site-content .ast-container { padding-top: 48px; }
/* (13/9) Astra suma 64 px de margen a #primary: con el relleno de arriba eran 92 px de crema vacía entre la franja
   y las migas, también en el móvil. Guía § 02: 48 px entre bloques en escritorio y 32 en móvil. */
html body.archive #primary:not(#bnc), html body.post-type-archive-product #primary:not(#bnc) { margin-top: 0; }
@media (max-width: 767px) { body.archive .site-content .ast-container, body.post-type-archive-product .site-content .ast-container { padding-top: 32px; } }
body.archive .woocommerce-products-header, body.post-type-archive-product .woocommerce-products-header { margin-bottom: 14px; }
body.archive .woocommerce-products-header h1, body.post-type-archive-product .woocommerce-products-header h1 { margin-bottom: 10px; }
body.archive .bnc-cat-intro, body.post-type-archive-product .bnc-cat-intro { margin: 0 0 16px; }
body.archive .bnc-cat-confianza, body.post-type-archive-product .bnc-cat-confianza { margin: 0 0 14px; }

/* Ficha en móvil: la foto no se come la primera pantalla. Antes ocupaba 700 px de alto en un
 * iPhone de 844 y el título quedaba en la tercera pantalla. Se limita a media pantalla y las
 * miniaturas van en una sola fila que se arrastra. */
@media (max-width: 767px) {
	.single-product div.product div.images .woocommerce-product-gallery__image img { max-height: 46vh; width: auto; margin: 0 auto; }
	.woocommerce div.product div.images .flex-control-thumbs { flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; }
	.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; }
	.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 66px; width: 66px; }
	.woocommerce div.product div.images .flex-control-thumbs li img { width: 66px; height: 66px; }
}

/* Ni la tarjeta ni el envoltorio de la foto pintan fondo, en ninguna anchura: el crema de la
   página es el único fondo, y sobre él el `multiply` funde el blanco del render. Esto ya estaba
   resuelto en el móvil el 12/9 por la mañana; aquí se extiende al escritorio, que era donde
   Carlos seguía viendo «cuadros». */
html body .woocommerce ul.products li.product,
html body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
html body .woocommerce ul.products li.product .astra-shop-thumbnail-wrap a,
html body .woocommerce ul.products li.product .woocommerce-LoopProduct-link { background: var(--bg); }
html body .woocommerce ul.products li.product img,
html body .woocommerce-cart-form img, html body .woocommerce-mini-cart img,
html body .bnc-rel-tarjeta img, html body .bnc-recomienda img { background: transparent; }

/* (14/9, 8.04) La Caja Combinada en el carrito del móvil: Product Bundles da a cada café una sangría de 32 px y un icono
   «↩» detrás del precio y del subtotal, y en la rejilla de la tarjeta al nombre le quedaban 99 px («natural - 250 / g»).
   Sin los dos, el nombre respira; la letra algo menor de Product Bundles sigue diciendo que son parte de la caja. */
@media (max-width: 767px) {
	html body .bundled_table_item .bundled_table_item_indent { padding-left: 0; }
	html body .bundled_table_item_price::after, html body .bundled_table_item_subtotal::after { content: none; margin: 0; }
}

/* -------------------------------------------------------------------------
 * Quién lo cultiva: el bloque de productor de las categorías de origen.
 * Campo `_bcos_category_producer` (mu-plugins/bocono-plantilla-categoria.php). Retrato a la
 * izquierda a radio 0 como toda fotografía, ficha a la derecha, marco de 1,5 px en carbón y sin
 * sombra, como manda la guía de Samantha. En móvil se apila y el retrato ocupa el ancho.
 * ------------------------------------------------------------------------- */
.bnc-productor { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(16px, 3vw, 28px); align-items: start; margin: 28px 0; padding: clamp(16px, 2.5vw, 24px); border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bnc-productor__retrato { margin: 0; }
.bnc-productor__foto { display: block; width: 100%; height: auto; border-radius: 0; }
.bnc-productor__texto > h2 { margin: 2px 0 6px; font-size: clamp(24px, 2.4vw, 34px); }
.bnc-productor__rol { margin: 0 0 2px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 600, "wdth" 94; color: var(--ink); }
.bnc-productor__lugar { margin: 0 0 12px; font-family: "Archivo", system-ui, sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.bnc-productor__texto p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .bnc-productor { grid-template-columns: 1fr; } }

/* === Cabecera con el móvil en horizontal (13/9/2026) ===
   Con el teléfono tumbado (740 × 360) las dos franjas fijas de la cabecera de Elementor —aviso de
   34 px y cabecera de 105— ocupaban 140 de los 360 px de alto y no cabía ni una tarjeta de producto
   entera (docs/11 pide validar también el móvil en horizontal). Solo en pantallas apaisadas de poca
   altura la cabecera deja de ir fija y vuelve a su sitio. El fijado de Elementor escribe en línea
   `position: fixed` y clona un espaciador, de ahí los `!important`. En vertical no cambia nada. */
@media (orientation: landscape) and (max-height: 500px) {
	.elementor-location-header .elementor-sticky--active {
		position: relative !important; top: auto !important; width: auto !important;
	}
	.elementor-location-header .elementor-sticky__spacer { display: none !important; }
}


/* =========================================================================
   Revisión de punta a punta con la Guía UX/UI (13/9/2026; Carlos: «refuerza el diseño de
   Samantha»). Auditoría medida en 34 páginas a 1.366 y 375 px: radios, sombras, contraste,
   familias, botones, campos y áreas táctiles. Aquí va lo que WooCommerce, Astra y los plugins
   pintan por encima de la guía; cada regla anota a qué regla le gana y con qué peso.
   ====================================================================== */

/* § 02 Sin sombras. Astra da a todo botón y campo `0 1px 2px rgba(0,0,0,.05)` (`button`,
   `input[type=email]`…, pesos (0,0,1) y (0,1,1)) y a las tarjetas del listado una sombra de 0 px. */
html body button,
html body input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="url"]),
html body textarea, html body select { box-shadow: none; }
html body.woocommerce ul.products li.product, html body .woocommerce ul.products li.product, html body.woocommerce-page ul.products li.product,
html body.woocommerce ul.products li.product:hover, html body .woocommerce ul.products li.product:hover, html body.woocommerce-page ul.products li.product:hover { box-shadow: none; }

/* § 08 Migas de pan: 12 px en --ink-soft; los enlaces, en vino y subrayados. Ganaba
   `.woocommerce-js .woocommerce-breadcrumb` (0,2,0): #777 a 14,7 px, 3,7:1 sobre crema. */
html body.woocommerce-js .woocommerce-breadcrumb { color: var(--ink-soft); font-size: 12px; }
html body.woocommerce-js .woocommerce-breadcrumb a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Etiqueta de oferta: era un disco naranja con sombra (`.ast-onsale-card`). El naranja es la acción
   y el color no marca estados (§ 01): recta, en carbón con texto crema. */
html body .ast-on-card-button.ast-onsale-card, html body .ast-on-card-button.ast-onsale-card.circle,
html body span.onsale, html body .woocommerce span.onsale { background: var(--bg-invert); color: var(--ink-invert); box-shadow: none; }

/* «Desde:» de los packs (Product Bundles): 0,67 em (8,7 px) en gris al 50 %, 1,7:1
   (`.woocommerce-js ul.products li.product .price .from`, (0,5,2)). Igual que el «desde» propio. */
html body.woocommerce-js ul.products li.product .price .from { font-family: "Archivo", system-ui, sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }

/* § 09 El selector de orden, con la forma de campo de la guía: 52 px, 16 px (por debajo, iOS amplía
   la página al tocarlo), borde 1,5 carbón y fondo blanco. `.woocommerce .woocommerce-ordering select`
   (0,2,1) lo dejaba sin borde, transparente y a 13 px. */
html body.woocommerce .woocommerce-ordering select, html body .woocommerce .woocommerce-ordering select,
html body.woocommerce-page .woocommerce-ordering select, html body .ast-shop-toolbar-container select {
	height: 52px; padding: 0 40px 0 14px; font-size: 16px;
	border: var(--stroke) solid var(--border); border-radius: var(--radius); background-color: var(--surface);
}

/* § 09 Casillas y radios: cuadrado de 20 px, borde 1,5 carbón, marca interior en carbón y sin
   redondear. Salían nativos (gris del sistema) o con 3 px de radio (`.woocommerce
   input[type=checkbox]`, (0,2,1)). `:not(#bnc)` sube el peso sin `!important`; el aviso de cookies,
   con sus interruptores, queda fuera. */
html body input[type="checkbox"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *),
html body input[type="radio"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *) {
	-webkit-appearance: none; appearance: none; box-sizing: border-box;
	width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0;
	border: var(--stroke) solid var(--border); border-radius: 0; background: var(--surface);
	display: inline-grid; place-content: center; vertical-align: -4px; cursor: pointer; flex: none;
}
html body input[type="checkbox"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *)::before,
html body input[type="radio"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *)::before {
	content: ""; width: 10px; height: 10px; background: var(--ink); transform: scale(0); transition: transform .14s ease-out;
}
/* (14/9, 8.05) Estas tres reglas solo llevaban `:not(#bnc)` y perdían contra las de arriba, que desde que se dejó fuera el
   aviso de cookies pesan (1,3,4): ninguna casilla ni opción se veía marcada al marcarla, ni desactivada. Llevan ya las
   mismas exclusiones y pesan (1,4,4). */
html body input[type="checkbox"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *):checked::before,
html body input[type="radio"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *):checked::before { transform: scale(1); }
html body input[type="checkbox"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *):disabled,
html body input[type="radio"]:not(#bnc):not(.cky-consent-container *):not(.cky-modal *):disabled { border-color: #25262666; background: var(--bg-alt); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { html body input:is([type="checkbox"], [type="radio"]):not(#bnc):not(.cky-consent-container *):not(.cky-modal *)::before { transition: none; } }

/* Valoraciones de la ficha: cada reseña traía 4 px de radio y el avatar iba redondo
   (`.woocommerce-js #reviews #comments ol.commentlist li …`, (2,3,2)); autor y fecha, en #777
   (3,7:1); las etiquetas del formulario, en el #111827 de Astra. Desde el 14/9 (8.03) no hay
   avatar (`bocono-valoraciones.php` quita el de Gravatar), así que la reseña va sin el margen de 50 px. */
html body.woocommerce-js #reviews #comments ol.commentlist li .comment-text { margin: 0; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); }
html body.woocommerce-js #reviews #comments ol.commentlist li img.avatar { border-radius: 0; border: 0; padding: 0; background: none; }
html body.woocommerce-js #reviews #comments ol.commentlist li .meta { color: var(--ink-soft); font-size: 13px; }
html body .comment-respond label { color: var(--ink); }
html body .wcsatt-options-prompt-fieldset { border-radius: var(--radius); }

/* § 09 Campos de los formularios de WooCommerce (acceso, caja, cuenta): Astra los dejaba sin borde
   y con 4 px de radio (`body:not(.cartflows-canvas)… .woocommerce form .form-row input.input-text`,
   (0,6,3)). */
html body:not(.cartflows-canvas):not(.cartflows-default):not(.cartflows-instant-checkout) .woocommerce form .form-row :is(input.input-text, textarea, select) {
	border: var(--stroke) solid var(--border); border-radius: var(--radius); background-color: var(--surface);
}
/* …y sus enlaces («¿Olvidaste la contraseña?»), sin subrayar por `.ast-single-post .entry-content
   .woocommerce a` (0,3,1). § 08: el enlace va siempre subrayado. */
html body .entry-content .woocommerce p a:not(.button) { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }

/* § 06 Texto largo a 68 caracteres también en las páginas de bloques. Astra da a cada hijo de
   `.entry-content[data-ast-blocks-layout]` el ancho de contenido, 1.200 px, con (0,2,0): en la
   landing de Madrid, X-Madrid, cafeterías y las legales las líneas pasaban de 160 caracteres.
   Los hijos arrancan en el borde izquierdo del contenido (medido), así que siguen alineados con
   sus titulares. */
html body .entry-content[data-ast-blocks-layout] > :is(p, ul, ol) { max-width: 68ch; }
html body .entry-content[data-ast-blocks-layout] > p.bnc-intro { max-width: 64ch; }

/* § 06 Sin cursiva en la interfaz (salvo variedad botánica): las citas de WordPress venían en
   cursiva y con la raya en negro al 5 % (`.wp-block-quote:not(…)`, (0,3,0)). */
html body blockquote, html body blockquote p, html body .wp-block-quote cite { font-style: normal; }
html body .entry-content .wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) { border-left: var(--stroke) solid var(--border); }

/* § 06 Nada centrado salvo piezas de una sola línea: pies de las imágenes centradas y subtítulo de la 404. */
html body .entry-content figure.aligncenter figcaption, html body .page-content .page-sub-title { text-align: left; }

/* § 05 Escala de titulares en las páginas de bloques. `.entry-content :where(h2)` de Astra (0,1,0)
   dejaba los H2 a 30 px (22,8 en móvil) por encima del H2 global de la guía (`html body h2`, (0,0,3)). */
html body .entry-content h2.wp-block-heading { font-size: 36px; line-height: 1.05; }
html body .entry-content h3.wp-block-heading { font-size: 24px; line-height: 1.1; }
@media (max-width: 767px) {
	html body .entry-content h2.wp-block-heading, html body .bnc-relato .bnc-rel-cuerpo h2, html body .bnc-relato .bnc-rel-faq h2 { font-size: 26px; }
	html body .entry-content h3.wp-block-heading, html body .bnc-relato .bnc-rel-cuerpo h3 { font-size: 20px; }
	.bnc-rel-entradilla { font-size: 17px; }
	.bnc-rel-cita blockquote { font-size: 17px; }
}

/* Tarjeta: el nombre del producto es el H4 de la guía, 18 px en escritorio (iba a 16 por el 1em de
   Astra, (0,4,2)). En móvil manda la tarjeta de docs/11. */
@media (min-width: 768px) {
	html body.woocommerce-js ul.products li.product .woocommerce-loop-product__title { font-size: 18px; line-height: 1.15; }
}

/* Favoritos y comparar sobre la foto: zona táctil de 44 px sin agrandar el cuadro que se ve (§ 16).
   En la ficha son botones secundarios de la guía: transparentes y con borde carbón. */
.bnc-fc-acciones:not(.bnc-fc-acciones--ficha) .bnc-fc-boton { position: relative; }
.bnc-fc-acciones:not(.bnc-fc-acciones--ficha) .bnc-fc-boton::after { content: ""; position: absolute; inset: -6px; }
.bnc-fc-acciones--ficha .bnc-fc-boton--favoritos:not(.is-on), .bnc-fc-acciones--ficha .bnc-fc-boton--comparar:not(.is-on) { background: transparent; border-color: var(--border); }
.bnc-fc-acciones--ficha .bnc-fc-boton--favoritos:not(.is-on):hover, .bnc-fc-acciones--ficha .bnc-fc-boton--comparar:not(.is-on):hover { background: var(--ink); color: var(--ink-invert); border-color: var(--ink); }

/* § 16 Área táctil de 44 px: chips de la tienda y de los filtros, paginación y «anterior / siguiente». */
html body a.bnc-cat-chip, html body .bnc-cat-filtros a.bnc-cat-chip, html body .bnc-cat-casilla { height: 44px; }
html body :is(a, span).page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
html body .post-navigation .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* 404: el buscador, con el campo de la guía. */
html body .page-content .search-form .search-field { height: 52px; padding: 0 14px; background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius); font-size: 16px; }

/* (13/9, segunda pasada de la auditoría, tras desplegar la primera) */

/* § 02 Sin sombras también en los botones de formulario (`input[type=submit]` de Astra, 404). */
html body input:is([type="submit"], [type="button"], [type="reset"]) { box-shadow: none; }

/* § 09 El asterisco de obligatorio iba en rojo puro (#ff0000, 3,3:1): en vino, el color de error de la guía. */
html body .required, html body abbr.required { color: var(--ink-accent); text-decoration: none; }

/* Formulario de valoración de la ficha: campos de 40 px y sin radio (WooCommerce, `#review_form #respond …`). */
html body.woocommerce-js #reviews #review_form #respond :is(input[type="text"], input[type="email"]) { height: 52px; padding: 0 14px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); }
html body.woocommerce-js #reviews #review_form #respond textarea { padding: 12px 14px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Índice de la guía: los H2 de cada bloque a la escala de la guía (Astra los dejaba a 30 y 22,8 px). */
html body .entry-content .bnc-guia-bloque > h2 { font-size: 36px; line-height: 1.05; }

/* Notas en el móvil: 12 px no está en la escala; el cuerpo S de la guía es 13. */
@media (max-width: 767px) {
	html body .entry-content .bnc-guia-bloque > h2 { font-size: 26px; }
	html body .bnc-cat-confianza li, html body .bnc-tm-suscripcion { font-size: 13px; }
}

/* 404: el titular y su subtítulo, a la izquierda (§ 06). */
html body.error404 .page-title, html body.error404 .page-sub-title { text-align: left; }

/* (13/9, tercera pasada) Las maquetaciones de Elementor que vienen de producción: el hero de la home, Servicio de
   tueste y Contacto. tools/zg103 les quita la tipografía de widget (Montserrat, pedida además a Google Fonts); aquí
   van la escala de la guía para sus titulares y la forma de sus campos y botones. La cabecera y el pie de Elementor
   quedan fuera. */
html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading :is(h1, h2, h3, h4).elementor-heading-title,
html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-divider .elementor-divider__text {
	font-family: "Anybody", "Archivo", system-ui, sans-serif; text-transform: uppercase;
}
html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading h1.elementor-heading-title { font-size: 56px; line-height: 1; font-variation-settings: "wght" 800, "wdth" 112; }
html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading h2.elementor-heading-title,
html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-divider .elementor-divider__text { font-size: 36px; line-height: 1.05; font-variation-settings: "wght" 800, "wdth" 108; }
html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading h3.elementor-heading-title { font-size: 24px; line-height: 1.1; font-variation-settings: "wght" 700, "wdth" 84; }
@media (max-width: 767px) {
	html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading h1.elementor-heading-title { font-size: 32px; }
	html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading h2.elementor-heading-title,
	html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-divider .elementor-divider__text { font-size: 26px; }
	html body .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-heading h3.elementor-heading-title { font-size: 20px; }
}

/* Frases que en Elementor iban como «titular» sin serlo: entradilla (.bnc-intro), texto (.bnc-texto) y pie de foto
   (.bnc-pie-foto). La clase la pone zg103 en el widget. */
html body .elementor-widget-heading:is(.bnc-intro, .bnc-texto, .bnc-pie-foto) .elementor-heading-title {
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 400, "wdth" 100; text-transform: none; color: var(--ink);
}
html body .elementor-widget-heading.bnc-intro .elementor-heading-title { font-size: 19px; line-height: 1.5; }
html body .elementor-widget-heading.bnc-texto .elementor-heading-title { font-size: 16px; line-height: 1.6; }
html body .elementor-widget-heading.bnc-pie-foto .elementor-heading-title { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 767px) { html body .elementor-widget-heading.bnc-intro .elementor-heading-title { font-size: 17px; } }

/* § 09 Formularios de Elementor: el campo de la guía (52 px, borde de 1,5 px carbón, radio 2, blanco y 16 px) con la
   etiqueta encima en versales. Elementor los dejaba a 40 px, con borde gris #69727d y 3 px de radio ((0,2,0)). */
html body .elementor-form .elementor-field-group .elementor-field-textual {
	min-height: 52px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background-color: var(--surface);
	color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; box-shadow: none;
}
html body .elementor-form .elementor-field-group textarea.elementor-field-textual { min-height: 140px; padding-top: 12px; }
html body .elementor-form .elementor-field-group > .elementor-field-label {
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
html body .elementor-form .elementor-field-option label { font-size: 13px; color: var(--ink); }
html body .elementor-form .elementor-button[type="submit"] {
	min-height: 52px; border-radius: var(--radius); font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84;
	font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}

/* Hero de la home (plantilla 20358): los tres «Ver…» son botones secundarios de la guía (transparentes, borde carbón;
   al pasar, carbón con texto crema). Eran el botón gris de Elementor con 3 px de radio. */
html body .bnc-template-hero .elementor-widget-button .elementor-button {
	display: inline-flex; align-items: center; min-height: 52px; padding: 0 32px;
	background: transparent; color: var(--ink); border: var(--stroke) solid var(--border); border-radius: var(--radius);
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
	transition: background-color .14s ease-out, color .14s ease-out;
}
html body .bnc-template-hero .elementor-widget-button .elementor-button:hover,
html body .bnc-template-hero .elementor-widget-button .elementor-button:focus-visible { background: var(--ink); color: var(--ink-invert); }

/* (13/9, cuarta pasada) El hero de la home, visto en pantalla: los «Ver…» salían subrayados y los titulares de las tres
   tarjetas, como enlaces de texto. `.entry-content a:not(.button):not(.wp-block-button__link)` (0,3,1) subraya todo
   enlace del contenido y no conoce `.elementor-button`. El botón no se subraya; el titular-enlace de una tarjeta, solo
   al pasar el ratón (el botón de debajo ya dice adónde se va). */
html body .entry-content .elementor-widget-button .elementor-button { text-decoration: none; }
html body .entry-content .elementor-widget-heading .elementor-heading-title a { color: inherit; text-decoration: none; }
html body .entry-content .elementor-widget-heading .elementor-heading-title a:hover { color: var(--ink-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Aviso de cookies (CookieYes). Su plantilla pinta colores en línea (rojo #BF3943, gris #F4F4F4, negro) y su hoja pone
   6 px de radio y sombra. Con la guía: tarjeta blanca con borde de 1,5 px carbón, recta y sin sombra; «Aceptar todo» y
   «Rechazar todo» con el mismo peso (lo pide la AEPD), como botones secundarios, y «Personalizar» como enlace en vino.
   El !important es la única forma de ganar a un estilo en línea. */
.cky-consent-container, .cky-consent-container .cky-consent-bar, .cky-modal, .cky-preference-center {
	border-radius: var(--radius) !important; box-shadow: none !important;
}
.cky-consent-container .cky-consent-bar, .cky-preference-center {
	border: var(--stroke) solid var(--border) !important; background-color: var(--surface) !important;
}
.cky-consent-container .cky-title, .cky-preference-center .cky-preference-title {
	font-family: "Anybody", "Archivo", system-ui, sans-serif !important; font-variation-settings: "wght" 700, "wdth" 84;
	font-size: 18px !important; line-height: 1.15 !important; text-transform: uppercase; color: var(--ink) !important;
}
.cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des p,
.cky-preference-center .cky-preference-content-wrapper, .cky-preference-center .cky-preference-content-wrapper p {
	font-family: "Archivo", system-ui, sans-serif !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--ink) !important;
}
.cky-consent-container .cky-btn, .cky-preference-center .cky-btn {
	min-height: 44px; border: var(--stroke) solid var(--border) !important; border-radius: var(--radius) !important;
	background-color: transparent !important; color: var(--ink) !important; box-shadow: none !important;
	font-family: "Archivo", system-ui, sans-serif !important; font-variation-settings: "wght" 700, "wdth" 84;
	font-size: 14px !important; letter-spacing: .08em; text-transform: uppercase;
	transition: background-color .14s ease-out, color .14s ease-out;
}
.cky-consent-container .cky-btn:hover, .cky-preference-center .cky-btn:hover { background-color: var(--ink) !important; color: var(--ink-invert) !important; opacity: 1 !important; }
.cky-consent-container .cky-btn.cky-btn-customize {
	border-color: transparent !important; color: var(--ink-accent) !important;
	text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0;
}
.cky-consent-container .cky-btn.cky-btn-customize:hover { background-color: transparent !important; color: var(--ink) !important; text-decoration-thickness: 2px; }

/* (13/9, quinta pasada) Tarjeta del listado vista en pantalla: su botón («Elegir formato», «Añadir al carrito») salía sin
   borde, como un texto suelto a lo ancho de la tarjeta. Es el secundario pequeño de la guía (§ 07): borde de 1,5 px en
   carbón, 40 px de alto y ajustado a su texto; al pasar, carbón con texto crema. En el móvil la tarjeta no lleva botón. */
html body .woocommerce ul.products li.product .button, html body.woocommerce ul.products li.product .button {
	border: var(--stroke) solid var(--border); width: auto; align-self: flex-start; padding: 0 20px;
}
html body .woocommerce ul.products li.product .button:hover, html body.woocommerce ul.products li.product .button:hover {
	background: var(--ink); color: var(--ink-invert); border-color: var(--ink);
}

/* Valoraciones, vistas en pantalla: el autor y «(propietario verificado)» salían a 19 px en el gris de WooCommerce. El
   autor, en Archivo 700 a 16 px y carbón; la marca de verificado y la fecha, en cuerpo S (13 px, --ink-soft sobre blanco,
   4,9:1). */
html body.woocommerce-js #reviews #comments ol.commentlist li .meta .woocommerce-review__author { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 100; font-size: 16px; color: var(--ink); }
html body.woocommerce-js #reviews #comments ol.commentlist li .meta :is(.woocommerce-review__verified, .woocommerce-review__published-date, .woocommerce-review__dash) { font-size: 13px; font-style: normal; color: var(--ink-soft); }

/* Formulario de valoración, visto en pantalla: «Añade una valoración» iba como texto suelto y las etiquetas, en caja
   normal de 14 a 18 px. El título, en H3 de la guía; las etiquetas, encima del campo en Archivo 700 a 11 px y en
   versales (§ 09). */
html body #reviews #review_form #respond #reply-title {
	display: block; margin: 0 0 12px; font-family: "Anybody", "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84;
	font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--ink);
}
html body #reviews #review_form #respond .comment-form label, html body #reviews #review_form #respond .comment-form-rating label {
	display: block; margin: 0 0 6px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 82;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
html body #reviews #review_form #respond .comment-form-cookies-consent label {
	display: inline; font-variation-settings: "wght" 400, "wdth" 100; font-size: 13px; letter-spacing: 0; text-transform: none;
}
html body #reviews #review_form #respond .required { color: var(--ink-accent); }
@media (max-width: 767px) { html body #reviews #review_form #respond #reply-title { font-size: 20px; } }

/* Paginación: la página actual iba en vino relleno. Lo elegido se marca en carbón (§ 11, selectores), con la cifra en crema. */
html body .woocommerce nav.woocommerce-pagination ul li span.current,
html body.woocommerce-js nav.woocommerce-pagination ul li span.current,
html body .page-numbers.current { background: var(--ink); color: var(--ink-invert); border-color: var(--ink); }

/* (13/9, séptima pasada) Lo que la auditoría final aún daba fuera de paleta. */
/* Etiquetas en el #111827 de Astra (`label { color: var(--ast-global-color-2, #111827) }`, (0,0,1)): la tabla de
   variaciones de la ficha («Formato», «Molienda») y «Recuérdame» del acceso. */
html body label, html body .woocommerce-form-login__rememberme span { color: var(--ink); }
/* El asterisco de obligatorio del acceso seguía en rojo puro por `.woocommerce form .form-row .required` (0,3,0). */
html body .woocommerce form .form-row .required { color: var(--ink-accent); }
/* Negro puro que traen textos antiguos del editor (clase `has-black-color` del núcleo, con !important). */
html body .has-black-color { color: var(--ink) !important; }
/* La caja del formulario de acceso: 3 px de radio de Astra; la guía, 2. */
html body .entry-content > div.woocommerce:not(#bnc) { border-radius: var(--radius); }

/* Negro puro que heredaban del contenido antiguo las citas de «Condiciones de compra» y las negritas de la ficha del
   Hario: toman el color de su bloque (carbón). */
html body .entry-content blockquote p, html body .entry-content p > strong { color: inherit; }
/* …y el negro venía del propio <blockquote> (regla de elemento del tema padre): la cita, en carbón. */
html body blockquote:not(#bnc) { color: var(--ink); }

/* Servicio de tueste (Elementor, 20194), reescrita el 13/9 (tools/zg107). El botón del hero es el primario de la guía:
   naranja con texto carbón, que sobre carbón sí se lee (4,8:1). Sus pies de foto, en cuerpo S con tinta carbón (sobre
   arena la tinta suave no llega a AA), y los enlaces del texto, en vino y subrayados: la plantilla de Elementor a
   ancho completo no pasa por `.entry-content`, así que no les llegaba la regla general. */
html body .bnc-page-tueste .elementor-widget-button .elementor-button {
	display: inline-flex; align-items: center; min-height: 52px; padding: 0 32px;
	background: var(--action); color: var(--action-ink); border: var(--stroke) solid var(--border); border-radius: var(--radius);
	font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 14px; letter-spacing: .08em;
	text-transform: uppercase; text-decoration: none; transition: background-color .14s ease-out;
}
html body .bnc-page-tueste .elementor-widget-button .elementor-button:hover,
html body .bnc-page-tueste .elementor-widget-button .elementor-button:focus-visible { background: var(--action-hover); color: var(--action-ink); }
@media (max-width: 479px) { html body .bnc-page-tueste .elementor-widget-button .elementor-button { width: 100%; justify-content: center; } }
html body .bnc-page-tueste .elementor-widget-image .widget-image-caption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink); text-align: left; }
html body .bnc-page-tueste .elementor-widget-text-editor p { max-width: 68ch; }
html body .bnc-page-tueste .elementor-widget-text-editor ol { margin: 0 0 16px 22px; padding: 0; max-width: 64ch; }
html body .bnc-page-tueste .elementor-widget-text-editor ol li { margin: 0 0 12px; padding-left: 4px; }
html body .bnc-page-tueste .elementor-widget-text-editor a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
html body .bnc-page-tueste .elementor-widget-text-editor a:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* Servicio de tueste, vista en pantalla: las tres fotos nuevas son verticales (1.067 × 1.600) y a media columna medían
   830 px de alto; «Quién tuesta» dejaba media sección vacía junto al texto. Recorte de bloque editorial de la guía
   (§ 14: 3:2), sin tocar el fichero, con el encuadre algo por debajo del centro, donde están la tostadora y las manos. */
html body .bnc-page-tueste .elementor-widget-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; }

/* -------------------------------------------------------------------------
 * apendice-guia-9 (13/9/2026, 7.93): aire entre la cabecera y el título de las páginas, en el móvil.
 * Medido a 375 px: en Contacto, Política de privacidad, Guía del café, Mi cuenta, Carrito y Finalizar compra el H1
 * empezaba justo donde acaba la cabecera, con 0 px de aire; Astra solo separa el contenido a partir de 922 px. El aire
 * va en la cabecera del artículo cuando es lo primero de la página y lleva el título dentro, así que no cambia nada
 * donde hay foto destacada encima (la landing de Madrid), hero de Elementor (portada, Servicio de tueste) o
 * plantilla propia (fichas, categorías, artículos de la guía).
 * ------------------------------------------------------------------------- */
/* (15/9/2026, 8.15) Y en escritorio también: a 1.063 px, Carrito, Finalizar compra, Mi cuenta, Contacto, Guía del café y
   Aviso legal seguían con el H1 pegado a la cabecera (0 px). 48 px, como la tienda y las categorías; 32 en el móvil. */
html body.page:not(#bnc) #primary > .site-main > article:first-child > .entry-header:first-child:has(> .entry-title) { padding-top: 48px; }
@media (max-width: 921px) {
	html body.page:not(#bnc) #primary > .site-main > article:first-child > .entry-header:first-child:has(> .entry-title) { padding-top: 32px; }
}

/* -------------------------------------------------------------------------
 * apendice-guia-10 (13/9/2026, 7.94): «Cómo llegar», en el pie, con 44 px de área de clic. Medía 86 × 26 en
 * escritorio y en el móvil (guía § 16).
 * ------------------------------------------------------------------------- */
html body .bnc-pie .bnc-pie__mapa { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }

/* -------------------------------------------------------------------------
 * apendice-guia-11 (13/9/2026, 7.95 y 7.96): el reproductor de vídeo de WordPress (MediaElement), con la guía. Salía en
 * #222222 con un degradado encima, los contadores en Helvetica a 11 px y la barra de avance en el azul de WordPress
 * (#0073AA); lo usa el vídeo de 360° de la Sage Bambino. Fondo carbón, cifras en Archivo y la barra en crema. En 7.96, con `:not(#bnc)`: MediaElement pinta el carril y las cifras con reglas de tres clases y ganaba.
 * ------------------------------------------------------------------------- */
html body .mejs-container,
html body .mejs-container .mejs-controls,
html body .mejs-controls:not([style*="display: none"]) { background: var(--ink); font-family: "Archivo", system-ui, sans-serif; }
html body:not(#bnc) .mejs-container .mejs-time, html body:not(#bnc) .mejs-container .mejs-time span { font-family: "Archivo", system-ui, sans-serif; font-size: 13px; color: var(--ink-invert); }
html body:not(#bnc) .mejs-container .mejs-time-total,
html body:not(#bnc) .mejs-container .mejs-horizontal-volume-total { background: rgba(242, 232, 218, .33); }
html body:not(#bnc) .mejs-container .mejs-time-loaded { background: rgba(242, 232, 218, .55); }
html body:not(#bnc) .mejs-container .mejs-time-current,
html body:not(#bnc) .mejs-container .mejs-horizontal-volume-current { background: var(--ink-invert); }

/* -------------------------------------------------------------------------
 * apendice-guia-12 (13/9/2026, 7.97): la barra fija de compra del móvil (§ 11), con el precio en una línea. En los
 * cafés, el precio de la barra decía «desde 13,50 € - o suscríbete para ahorrar hasta un 12 %» a 24 px y medía
 * 230 × 115 dentro de una barra de 64, con el botón estrujado a 101 px. La barra ya lleva solo la cifra
 * (mu-plugins/bocono-plantilla-ficha-cafe.php); aquí, que la cifra no se parta y el botón no se estruje.
 * ------------------------------------------------------------------------- */
html body .bnc-barra-compra .bnc-barra-precio { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(18px, 5.6vw, 24px); line-height: 1.1; }
html body .bnc-barra-compra .bnc-barra-desde { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 400, "wdth" 100; font-weight: 400; font-size: 13px; }
html body .bnc-barra-compra .bnc-boton { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 359px) {
	html body .bnc-barra-compra { gap: 8px; padding: 0 12px; }
	html body .bnc-barra-compra .bnc-boton { padding: 0 14px; letter-spacing: .04em; }
}

/* 8.13 (15/9/2026) — El bloque de compra bailaba al cargar la ficha: CLS de 0,55 en móvil (Lighthouse). Antes de que FlexSlider
   monte la galería, las seis fotos van apiladas (la segunda en `inline-block` por una regla de WooCommerce), al montarse la
   ventana se hincha un instante a 1.150 px y luego se asienta, las miniaturas aparecen debajo y el margen inferior (2em) solo
   existe cuando el JavaScript añade la clase `woocommerce-js`. Se reserva el sitio desde el primer pintado: solo la primera foto
   a la vista, ventana cuadrada (las fotos lo son), hueco para las miniaturas y margen fijo. Medido con la prueba inyectada: de
   0,44 a 0,016. `:has()` lo entienden todos los navegadores desde 2023. */
html body.single-product div.product div.images.woocommerce-product-gallery { margin-bottom: 32px; }
html body div.product div.images.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) { display: none; }
html body div.product div.images.woocommerce-product-gallery .flex-viewport { aspect-ratio: 1 / 1; height: auto !important; overflow: hidden; min-height: 0; }
html body div.product div.images.woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(2))::after { content: ""; display: block; height: 82px; }
@media (min-width: 922px) { html body div.product div.images.woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(2))::after { height: 100px; } }
/* El enlace «Vaciar opciones» de las variaciones iba a 2,2:1 (tinta suave con `opacity: .6` de WooCommerce). */
html body.single-product div.product .variations_form a.reset_variations { color: var(--ink-accent); opacity: 1; }
/* 8.14 (15/9/2026) — La ampliación de la galería como la pide el § 11 de la guía («al hacer clic, la imagen se abre a pantalla
   completa sobre carbón al 92 %, con las flechas y el contador»). PhotoSwipe (WooCommerce) la abría sobre negro al 70 % y
   con el contador oculto por su hoja (`.pswp__counter{display:none}`). PhotoSwipe escribe la opacidad del fondo en línea,
   de ahí el `!important`; las flechas ya salen en escritorio (en móvil se pasa de foto deslizando). */
html body .pswp .pswp__bg { background: var(--bg-invert); opacity: .92 !important; }
html body .pswp .pswp__counter { display: block; font-family: "Anybody", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 94; font-size: 14px; letter-spacing: .08em; color: var(--ink-invert); opacity: 1; }
/* 8.16 (15/9/2026) — Pie de foto oculto: el texto para el buscador se queda en el HTML pero no se pinta (Carlos, 15/9 por la
   noche, en la galería de «Cafés de especialidad»: «que no diga nada o que diga algo útil y natural»). */
.bnc-pie-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 8.20 (15/9/2026) — En la ficha, «Si te gusta este, prueba» (los relacionados) salía pegado a la última tarjeta de «También
   te recomendamos» (los complementarios): las dos secciones de WooCommerce van sin margen. Separación entre bloques de la
   guía: 48 px en escritorio, 32 en el móvil. */
html body.single-product section.up-sells + section.related { margin-top: 48px; }
@media (max-width: 767px) { html body.single-product section.up-sells + section.related { margin-top: 32px; } }

/* (8.26, 16/9) Resultados de búsqueda genéricos (?s=): encabezado propio (bocono-busqueda.php) y tarjetas con el título
   a tamaño de tarjeta, no de portada. El buscador principal sigue siendo /buscar-productos/. */
.bnc-busqueda { margin: 0 0 28px; }
.bnc-busqueda__titulo { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin: 0 0 8px; }
.bnc-busqueda__cuenta { color: var(--ink-soft); margin: 0; }
.search-results .ast-article-post .entry-title { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; }

/* 8.28 (17/9/2026) — Un solo margen lateral en el móvil. Carlos, desde el iPhone: «en móvil los textos no están
   centrados, puedes ponerlos mucho mejor». Medido con `tools/margenes-movil.mjs` a 375 px: el texto empezaba a 16 px en la
   tienda y las categorías, a 20 y 36 en la portada, a 25 en los artículos, a 32 y 40 en Servicio de tueste y a 46 en
   Contacto, porque cada contenedor sumaba su relleno a los 16 px del de Astra. La guía (§ 03) fija 16 px de margen en el
   móvil y 24 desde 480 px, con los fondos de sección a sangre; el cuerpo sigue alineado a la izquierda (§ 05), que es
   lo que hace que la columna se lea recta. */
@media (max-width: 767px) {
	:root { --bnc-lado: 16px; }
	/* Elementor: cada contenedor de primer nivel va a sangre, con el margen dentro; los hijos no suman relleno. */
	html body #content .ast-container .elementor > .e-con.e-parent { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; --padding-left: var(--bnc-lado) !important; --padding-right: var(--bnc-lado) !important; }
	html body #content .ast-container .elementor .e-con.e-child { --padding-left: 0px !important; --padding-right: 0px !important; }
	/* Artículos de la guía: el margen lo pone el artículo, no el contenedor más el artículo (8,64 + 16 = 25 px). */
	html body.single-post.ast-separate-container #content .ast-container { padding-left: 0; padding-right: 0; }
	html body.single-post.ast-separate-container .ast-article-single { padding-left: var(--bnc-lado); padding-right: var(--bnc-lado); }
	/* Portada y tienda: los bloques a sangre con texto al lado de la foto, al mismo margen. */
	html body .bnc-home-partida .bnc-home-partida__texto { padding-left: var(--bnc-lado) !important; padding-right: var(--bnc-lado) !important; }
	/* La frase de la banda sensorial de la ficha ocupa el ancho de la banda: con 24 caracteres dejaba 77 px a la derecha. */
	html body .bnc-banda-sensorial__frase p { max-width: none; }
}
@media (min-width: 480px) and (max-width: 767px) { :root { --bnc-lado: 24px; } }
/* 8.28 — En la portada, la banda arena de perfiles y el panel carbón de «Desde el origen» eran cajas metidas 16 px y con
   20–24 px dentro: en el móvil van a sangre, con el mismo margen que el resto del texto. */
@media (max-width: 767px) {
	html body .entry-content > .bnc-home-perfiles { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: var(--bnc-lado) !important; padding-right: var(--bnc-lado) !important; }
	html body .bnc-home-banda .bnc-home-banda__panel { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; padding-left: var(--bnc-lado) !important; padding-right: var(--bnc-lado) !important; }
}
/* 8.28 — Astra da 24 px de relleno lateral a cada grupo de bloques de primer nivel («Cafés exóticos de temporada», «Para
   tomar en taza»…); sin fondo, ese relleno solo mete el texto hacia dentro. En el móvil, fuera. */
@media (max-width: 767px) {
	html body .entry-content > .wp-block-group:not(.has-background):not(.bnc-home-perfiles):not(.bnc-home-partida):not(.bnc-home-banda) { padding-left: 0 !important; padding-right: 0 !important; }
}
/* 8.28 — En el móvil, el selector de orden de las categorías quedaba a 43 px del borde, suelto a mitad de fila: ocupa el
   ancho de la columna, alineado con el resto. */
@media (max-width: 767px) {
	html body .ast-shop-toolbar-container .ast-shop-toolbar-aside-wrap { margin-left: 0 !important; margin-right: 0 !important; width: 100%; justify-content: flex-start; }
	html body .ast-shop-toolbar-container .woocommerce-ordering,
	html body .ast-shop-toolbar-container .woocommerce-ordering select.orderby { width: 100%; max-width: none; margin-left: 0; }
}
/* 8.29 (17/9/2026) — Portada en el móvil, primera parte. Los tres accesos de la cabecera (cafés, accesorios, máquinas)
   ocupaban 1.296 px apilados, con fotos de 280 px: pasan a tres filas de foto pequeña a la izquierda y título y botón a
   la derecha (unos 400 px). Y el separador con texto «Comprar specialty coffee», que en el móvil salía centrado en dos
   líneas con las rayas colgando, va alineado a la izquierda y sin rayas (guía § 05: nada centrado salvo una línea). */
@media (max-width: 767px) {
	html body .bnc-template-hero .elementor-element-205fc58 { flex-direction: column !important; gap: 12px !important; }
	html body .bnc-template-hero .elementor-element-205fc58 > .e-con { display: grid !important; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px; align-items: center; padding: 12px 0 !important; border-bottom: 1px solid rgba(37, 38, 38, .2); }
	html body .bnc-template-hero .elementor-element-205fc58 > .e-con:last-child { border-bottom: 0; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-image { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; width: 112px !important; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-image img { width: 112px !important; height: 112px !important; object-fit: contain; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-heading { grid-column: 2; align-self: end; margin: 0 !important; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-heading .elementor-heading-title { text-align: left !important; font-size: 18px !important; line-height: 1.15 !important; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-button { grid-column: 2; align-self: start; margin: 0 !important; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-button .elementor-button-wrapper { text-align: left !important; }
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-button .elementor-button { min-height: 44px; padding: 0 16px !important; font-size: 13px !important; }
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider { justify-content: flex-start !important; }
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider__element { text-align: left !important; margin: 0 !important; padding: 0 !important; }
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider-separator::before,
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider-separator::after { display: none !important; }
}
@media (max-width: 767px) {
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-button.elementor-align-center { text-align: left !important; }
}

/* 8.30 (17/9/2026) — Texto justificado en el móvil. (Corregido el mismo día: justificar los <li> de las listas con
   clase propia —las tarjetas de la guía— justificaba también sus titulares; ahora solo las listas de texto.) Carlos, con captura de la portada: «el texto no está centrado ni
   justificado». Con el texto alineado a la izquierda, el borde derecho queda irregular y la columna no se ve alineada.
   Es una EXCEPCIÓN suya a la guía de Samantha (§ 05, «alineado a la izquierda»), como las estrellas doradas. Para que
   el justificado no abra huecos entre palabras en 343 px: partición silábica en español (la página va en `lang="es"`)
   y la última línea a la izquierda. Solo párrafos y listas del contenido; titulares, tarjetas de producto, formularios,
   la frase grande de la banda sensorial y el aviso del mapa se quedan como estaban. (18/9/2026: y la franja de la frase
   de taza bajo el nombre, `p.bnc-impresion`, que se colaba: es un `<p>` en flex con la cifra SCA al lado, y en 224 px
   el justificado abría huecos de palabra a palabra, «Caramelo,     canela     y», en todos los cafés.) */
@media (max-width: 767px) {
	html body #content p:not(ul.products *):not(form *):not(.bnc-banda-sensorial *):not(.bnc-impresion):not(.bnc-mapa *):not([class*="has-text-align"]):not([class*="bnc-"] > li *),
	html body #content :is(ul, ol):not([class*="bnc-"]):not(.products):not(.wc-tabs):not(.menu) > li:not(form *) {
		text-align: justify;
		text-align-last: left;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 7 3 3;
		word-break: normal;
		overflow-wrap: break-word;
	}
}
/* (17/9/2026) Vídeos verticales en los artículos (el de Paola con la AeroPress): a lo sumo 360 px de ancho, centrados,
   sin radio (guía § 03). */
.wp-block-video.bnc-video-vertical { max-width: 360px; margin-left: auto; margin-right: auto; }
.wp-block-video.bnc-video-vertical video { width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--bg-invert, #252626); border-radius: 0; }
@media (max-width: 767px) { html body #content a.bnc-boton { text-align: center; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; } }
/* (17/9/2026) El campeonato, enlazado dentro de la banda sensorial: sobre naranja o malva se escribe en carbón (guía
   § 03), así que el enlace hereda el color del texto de la banda y se distingue por el subrayado. */
html body .bnc-banda-sensorial__tostado a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
html body .bnc-banda-sensorial__tostado a:hover,
html body .bnc-banda-sensorial__tostado a:focus-visible { text-decoration-thickness: 2px; }

/* (18/9/2026) «Quién tuesta tu café», en Servicio de tueste: la columna de la derecha apilaba sus fotos en
   vertical —cuatro desde que entró la de Gastón, 1.600 px de alto— al lado de un texto de 300 px, y dejaba
   media pantalla vacía a la izquierda. En escritorio las fotos pasan a rejilla de dos columnas, cada una con
   su proporción, y el texto acompaña pegado bajo la cabecera. En el móvil no cambia nada: sigue en columna. */
@media (min-width: 1025px) {
	html body .bnc-page-tueste .elementor-element.elementor-element-0231cea {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		align-content: start;
		align-items: start;
	}
	html body .bnc-page-tueste .elementor-element.elementor-element-e5bfabf {
		position: sticky;
		top: 96px;
	}
}
/* Las fotos de esta página ya van todas a 3:2 (regla de arriba, `html body .bnc-page-tueste
   .elementor-widget-image img`), así que en la rejilla salen alineadas sin tocar la proporción. Lo único que
   hace falta es que los pies, de una o de tres líneas, no descuadren la segunda fila. */
@media (min-width: 1025px) {
	html body .bnc-page-tueste .elementor-element.elementor-element-0231cea figcaption { min-height: 3.2em; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026) La primera pantalla de la ficha, según Carlos: «la información más importante cabe en la
 * pantalla completamente, incluso la galería de imágenes, la cual debe estar perfectamente alineada en su
 * parte de abajo con cantidad y añadir al carrito, todos los demás datos arriba». Y sobre la foto: «la imagen
 * principal de Codex es bastante más pequeña, lo que hizo que quepan las cosas como yo quiero y además se ve
 * más elegante, menos ordinario y tosco; igualmente el cliente puede agrandar con lupa».
 *
 * Medido a 1366 × 900 antes de tocar nada: la galería ocupaba 600 px de ancho y 794 de alto, el resumen 552,
 * y el botón de comprar caía en y = 1.237, muy por debajo del pliegue. La de Codex mide 478 px.
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	html body.single-product div.product div.images.woocommerce-product-gallery { width: 37% !important; max-width: 460px; }
	html body.single-product div.product .summary.entry-summary { width: 59% !important; }
	/* miniaturas más pequeñas: la tira cabe en una fila y la galería termina a la altura del botón */
	html body .woocommerce div.product div.images .flex-control-thumbs { gap: 8px; margin-top: 12px; }
	html body .woocommerce div.product div.images .flex-control-thumbs li,
	html body .woocommerce div.product div.images .flex-control-thumbs li img { width: 66px; }
	html body .woocommerce div.product div.images .flex-control-thumbs li img { height: 66px; }
	/* aire ajustado en la columna de datos, sin tocar la escala tipográfica */
	html body.single-product div.product .summary > .bnc-impresion { margin-bottom: 8px; }
	html body.single-product div.product .bnc-origen { margin: 0 0 10px; }
	html body.single-product div.product .summary > .woocommerce-product-rating { margin: 0 0 8px; }
	html body.single-product div.product .summary > .price { margin: 0 0 6px; }
	html body.single-product div.product .summary > .bnc-chips { margin-bottom: 8px; }
}
/* El título de la ficha, en dos líneas y con el mismo hueco en todas (18/9/2026, Carlos: «si este título lo
   bajas a dos líneas o a una ganamos buen espacio, pero tiene que ser el mismo espacio en todas las fichas
   porque queremos que absolutamente todas queden iguales»). El nombre más largo del catálogo, «Café de Costa
   Rica Honey Mujeres de Tarrazú», entra en dos líneas a este tamaño; el hueco se reserva igual aunque el
   nombre ocupe una sola. */
@media (min-width: 1025px) {
	html body.single-product div.product .summary > .product_title.entry-title {
		font-size: clamp(26px, 2.2vw, 32px);
		line-height: 1.06;
		min-height: calc(2 * 1.06em);
		text-wrap: balance;
		margin: 0 0 10px;
	}
}
/* Y lo que hace que quepa: la ficha del lote sin el aire de arriba y de abajo, los dos selectores en dos
   columnas (Carlos: «Codex usa desplegables para molienda y formato, pero me gusta más como lo hiciste tú;
   tienes que redimensionarlo y organizarlo para que quepa todo en la pantalla y sobre todo PERFECTAMENTE
   ALINEADO») y el bloque de compra compacto. Medido a 1366 × 900: el botón pasa de y = 1.280 a la primera
   pantalla. */
@media (min-width: 1025px) {
	html body.single-product div.product .summary > .bnc-bloques-cafe { margin: 0 0 12px; }
	html body.single-product .bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila { padding: 7px 0; }
	html body.single-product .bnc-origen dl.bnc-lote-datos dd { font-size: 17px; }
	html body.single-product .bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila--cifra dd { font-size: 21px; }

	html body.single-product table.variations { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: 0 0 10px; }
	html body.single-product table.variations tbody { display: contents; }
	html body.single-product table.variations tr { margin: 0; }
	html body.single-product table.variations td.value select { height: 46px; }

	html body.single-product div.product .summary > .price { margin: 0 0 4px; }
	html body.single-product .single_variation_wrap .woocommerce-variation-price { margin: 0 0 8px; }
	html body.single-product .single_variation_wrap .woocommerce-variation-add-to-cart { margin: 0; }
	html body.single-product div.product form.cart .quantity,
	html body.single-product div.product form.cart button.single_add_to_cart_button { margin-top: 0; }

	/* la galería se estira hasta el final del bloque de compra y sus miniaturas se pegan abajo: así la fila de
	   cantidad y «Añadir al carrito» y la tira de fotos terminan en la misma línea */
	html body.single-product div.product div.images.woocommerce-product-gallery { display: flex; flex-direction: column; align-self: stretch; }
	html body.single-product div.product div.images .flex-control-thumbs { margin-top: auto; }
}
/* El precio, ya dentro del formulario y pegado al botón (`bocono-ficha-compra.php`): en una sola línea, con
   su etiqueta, y sin el precio que repetía la variación justo debajo. */
html body.single-product div.product form.cart .price.bnc-precio-compra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
html body.single-product div.product form.cart .price.bnc-precio-compra > * { margin: 0; }
html body.single-product div.product .single_variation_wrap .woocommerce-variation-price { margin: 0 0 10px; }
/* Los dos grupos de botones, cada uno en su fila y a todo el ancho de la columna: los siete de molienda
   entran en una sola línea (antes hacían tres y se comían 190 px). Altura 40 px, que es la versión pequeña
   de la guía § 07 para escritorio; en el móvil siguen a 44. */
@media (min-width: 1025px) {
	html body.single-product table.variations { grid-template-columns: 1fr; row-gap: 10px; }
	html body.single-product table.variations .bnc-seg { display: flex; width: 100%; }
	html body.single-product table.variations .bnc-seg__op { min-height: 40px; padding: 0 8px; font-size: 11px; letter-spacing: .06em; }
	html body.single-product .bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila { padding: 5px 0; }
	html body.single-product .bnc-origen dl.bnc-lote-datos dd { font-size: 16px; }
	html body.single-product .bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila--cifra dd { font-size: 19px; }
}
/* y los botones se reparten el ancho en partes iguales, sin envolver: siete de molienda a 101 px */
@media (min-width: 1025px) {
	html body.single-product table.variations .bnc-seg { flex-wrap: nowrap; }
	html body.single-product table.variations .bnc-seg__op { flex: 1 1 0; min-width: 0; text-align: center; }
}
/* Sin los márgenes heredados entre los dos grupos: la tabla de variaciones pasa de 235 px a 140. */
@media (min-width: 1025px) {
	html body.single-product table.variations tr { margin: 0 !important; }
	html body.single-product table.variations th.label { padding: 0 0 4px; }
	html body.single-product table.variations { row-gap: 12px; }
}
/* La línea de frescura sube: va con los selectores y el precio, no debajo de todo (18/9/2026, encargo de
   Carlos con la ficha de Codex delante). El enlace al artículo del reposo va subrayado y con su flecha. */
.single-product div.product .summary > .bnc-tostado-por.bnc-frescura { order: 9; margin: 0 0 10px; }
.bnc-frescura__leer { color: var(--ink-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
.bnc-frescura__leer:hover, .bnc-frescura__leer:focus-visible { text-decoration-thickness: 2px; }
/* Debajo de los botones de molienda quedaban dos textos sueltos que repetían lo que ya dicen los propios
   botones y empujaban el precio fuera de la primera pantalla: la descripción de la variación («Café en
   grano», que es justo el botón que está pulsado) y «Vaciar opciones». La descripción se quita y el enlace
   de vaciar queda discreto, en su línea, sin aire alrededor. */
@media (min-width: 1025px) {
	html body.single-product .single_variation_wrap .woocommerce-variation-description { display: none; }
	html body.single-product div.product form.cart a.reset_variations { display: inline-block; margin: 2px 0 0; font-size: 12px; }
	html body.single-product div.product .summary > .bnc-tostado-por.bnc-frescura { margin: 0 0 8px; }
}
/* Notas y valoración en la misma línea, como en la ficha de Codex: las notas a la izquierda y las estrellas
   a la derecha. Ahorra una fila entera y es lo que deja el bloque de compra dentro de la primera pantalla.
   Si algún café llevara tantas notas que ocuparan más de dos tercios del ancho, las estrellas bajan solas
   (la regla solo sube la línea cuando hay sitio). */
@media (min-width: 1025px) {
	html body.single-product div.product .summary > .bnc-chips { max-width: 62%; }
	html body.single-product div.product .summary > .woocommerce-product-rating { margin: -34px 0 10px; text-align: right; }
	html body.single-product div.product .summary > .bnc-kicker--ficha { margin: 0 0 2px; }
	html body.single-product div.product .summary > .woocommerce-breadcrumb { margin: 0 0 6px; }
}
/* Las dos columnas de la ficha, en flex: así la galería puede estirarse hasta donde llega el bloque de
   compra y sus miniaturas se pegan abajo. Es lo que pedía Carlos: «la galería de imágenes debe estar
   perfectamente alineada en su parte de abajo con cantidad y añadir al carrito». (WooCommerce las coloca
   con `float`; al hacer flex el contenedor, los floats se ignoran y mandan estos anchos.) */
@media (min-width: 1025px) {
	html body.single-product .bnc-ficha-arriba { display: flex; align-items: stretch; gap: 0 4%; flex-wrap: wrap; }
	html body.single-product .bnc-ficha-arriba > div.images.woocommerce-product-gallery { float: none; margin: 0; }
	html body.single-product .bnc-ficha-arriba > .summary.entry-summary { float: none; margin: 0; }
	/* y los últimos píxeles, para que el botón entre entero en una pantalla de 900 */
	html body.single-product div.product .summary > .bnc-perfil-taza { margin: 0 0 4px; }
	html body.single-product div.product .summary > .bnc-impresion { padding: 8px 14px; margin-bottom: 6px; }
	html body.single-product div.product .summary > .bnc-bloques-cafe { margin: 0 0 8px; }
	html body.single-product table.variations { row-gap: 10px; }
}
/* Las miniaturas, en una sola fila de ocho y pegadas al fondo de la galería (la altura la fija el script de
   `bocono-ficha-compra.php`, que la iguala con la fila de comprar). */
@media (min-width: 1025px) {
	html body .woocommerce div.product div.images .flex-control-thumbs { flex-wrap: nowrap; gap: 8px; margin-top: auto; }
	html body .woocommerce div.product div.images .flex-control-thumbs li { flex: 1 1 0; width: auto; min-width: 0; }
	html body .woocommerce div.product div.images .flex-control-thumbs li img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}
/* Tres remates de la ficha, medidos en pantalla (18/9/2026): las estrellas llevaban `float: left` de
   WooCommerce y se montaban encima de las notas; la tira de miniaturas seguía envolviendo en dos filas; y
   bajo los botones de molienda salía el nombre de la opción ya elegida, que es justo lo que dice el botón
   pulsado. */
@media (min-width: 1025px) {
	html body.single-product div.product .summary > .woocommerce-product-rating { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: -32px 0 8px; }
	html body.single-product div.product .summary > .woocommerce-product-rating .star-rating { float: none !important; margin: 0; }
	html body .woocommerce div.product div.images .flex-control-thumbs { flex-wrap: nowrap !important; }
	html body.single-product table.variations p.bnc-seg__ayuda { display: none !important; }
}
@media (min-width: 1025px) {
	/* las estrellas delante del recuento, como se leen */
	html body.single-product div.product .summary > .woocommerce-product-rating .star-rating { order: -1; }
	/* y la tira de miniaturas, en una sola fila pase lo que pase */
	html body.single-product .woocommerce-product-gallery ol.flex-control-thumbs,
	html body .woocommerce div.product div.images ol.flex-control-thumbs { display: flex !important; flex-wrap: nowrap !important; }
	html body.single-product .woocommerce-product-gallery ol.flex-control-thumbs li { flex: 0 0 66px !important; width: 66px !important; }
}
/* Todas las fichas, con el bloque de compra a la misma altura: la ficha del lote reserva el sitio de cuatro
   filas aunque un café traiga menos datos (Carlos: «tiene que ser el mismo espacio en todas las fichas
   porque queremos que absolutamente todas queden iguales»). */
@media (min-width: 1025px) {
	html body.single-product .bnc-origen dl.bnc-lote-datos { min-height: 146px; align-content: start; }
}
/* (18/9/2026) Los tres accesos de la portada —cafés, accesorios, máquinas— traían fotos de proporciones
   distintas (450 × 450 y 382 × 309) y salían a 275, 340 y 340 px de ancho: tres cajas desiguales, con los
   objetos apoyados a distinta altura. Ahora las tres comparten caja, la foto se contiene dentro sin
   recortarse y apoya en la misma línea de base. */
@media (min-width: 768px) {
	html body .bnc-template-hero .elementor-element-205fc58 .elementor-widget-image img {
		display: block;
		width: 100% !important;
		max-width: 340px !important;
		height: 275px !important;
		margin-left: auto;
		margin-right: auto;
		object-fit: contain;
		object-position: center bottom;
	}
}
/* (18/9/2026) El descafeinado, en su color: blanco. Lo decidió Carlos el 9/9 y está en `PERFIL-DE-TAZA.md`,
   pero el token del tema se había quedado en arena y hoy, con el fondo de la web también en arena, el cuadrado
   y la banda sensorial de ese café desaparecían. Como manda ese documento, el filete va con `box-shadow`
   interior y no con `border`, para que el cuadrado **mida exactamente lo mismo que los otros tres** —que es lo
   que pidió Carlos: «haz el cuadro igual que a todos los demás colores»— y la fila no se descuadre. */
html body .bnc-perfil-taza--descafeinado i,
html body .bnc-cat-chip--perfil i[style*="descafeinado"],
html body .bnc-perfil-taza__cuadro--descafeinado,
html body .bnc-tm-punto--descafeinado,
html body .bnc-franja-perfil span:nth-child(4) { box-shadow: inset 0 0 0 1px #25262654; }
/* (18/9/2026) Los medidores del perfil en taza se solapaban: la rejilla admitía columnas desde 190 px y en la
   ficha, con 736 px de ancho, salían tres; cada medidor necesita 110 px de nombre más 156 de pista más la
   palabra del nivel, o sea 290 como poco, así que el nombre de uno se montaba encima de la pista del anterior.
   Con 320 px de mínimo caben dos columnas holgadas en la ficha y una sola en cualquier sitio más estrecho. */
.bnc-barras { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* La palabra del nivel, a la derecha de cada medidor (18/9/2026). En Archivo de etiqueta, como el nombre, para
   que la fila se lea de un vistazo: nombre · medidor · nivel. */
.bnc-barras li { justify-content: flex-start; }
.bnc-barras__nivel { margin-left: auto; padding-left: 10px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 13px; color: var(--ink); white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * (18/9/2026, madrugada) Los tres remates que pidió Carlos con la ficha delante:
 *  - la línea de tueste «bonita», como el aviso de Codex: punto de color, los días en carbón y el enlace al
 *    reposo visible, sin el plazo de envío, que ahí no pinta nada;
 *  - formato y molienda **uno al lado del otro**, para que ocupen menos y queden armónicos;
 *  - y todo eso dentro de la primera pantalla.
 * ------------------------------------------------------------------------- */
.bnc-frescura { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; color: var(--ink); font-size: 14px; }
/* El punto, en carbón (18/9/2026, 4:55). Iba en el caramelo del perfil «caramelización» —y en malva en los florales—,
   así que en un café frutal el naranja señalaba «frescura», y `PERFIL-DE-TAZA.md` lo prohíbe: los cuatro colores de
   perfil no clasifican nada más en toda la web. Es la misma regla que ya lleva el punto del mapa del origen. */
.bnc-frescura__punto { width: 9px; height: 9px; flex: none; background: var(--ink); border-radius: 50%; }
.bnc-frescura time, .bnc-frescura__cuando { font-variation-settings: "wght" 700, "wdth" 84; }
.bnc-frescura__leer { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.bnc-frescura__leer:hover, .bnc-frescura__leer:focus-visible { color: var(--ink-accent); text-decoration-thickness: 2px; }

@media (min-width: 1025px) {
	/* formato y molienda en la misma fila: el formato ocupa lo justo y la molienda el resto */
	html body.single-product table.variations { grid-template-columns: minmax(180px, 0.9fr) 2.4fr; column-gap: 24px; row-gap: 0; }
	html body.single-product table.variations .bnc-seg__op { padding: 0 6px; font-size: 10.5px; letter-spacing: .04em; }
}
/* En el móvil, los botones de formato ocupan el ancho como los de molienda, y el nombre de la opción ya
   elegida («Café en grano») no se repite debajo: lo dice el botón pulsado. */
@media (max-width: 1024px) {
	html body.single-product table.variations .bnc-seg { display: flex; width: 100%; }
	html body.single-product table.variations .bnc-seg--formato .bnc-seg__op { flex: 1 1 0; }
	html body.single-product table.variations p.bnc-seg__ayuda { display: none !important; }
	html body.single-product div.product form.cart a.reset_variations { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026) La galería, pensada para veinticinco fotos. Carlos: «extremadamente importante que la galería
 * de imágenes vaya en carrusel, te lo dije muchas veces; imagina que ponga 25 fotos, entonces vas a hacer
 * 5 filas hacia abajo y deformar todo».
 *
 * Lo que había: la tira de fotos medía 7.104 px de ancho con solo ocho (888 px por foto) y se salía del
 * contenedor, que estaba en `overflow: visible`; y las miniaturas se repartían el ancho, así que con 25 habrían
 * quedado de trece píxeles. Ahora la ventana recorta la tira y las miniaturas mantienen su tamaño y se
 * desplazan en horizontal, con punto de anclaje para que cada una quede encajada.
 * ------------------------------------------------------------------------- */
html body .woocommerce div.product div.images .flex-control-thumbs {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #25262654 transparent;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}
html body .woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 66px !important;
	width: 66px !important;
	scroll-snap-align: start;
}
html body .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { height: 6px; }
html body .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-thumb { background: #25262654; border-radius: 0; }

/* ---------------------------------------------------------------------------
 * (18/9/2026) Las tarjetas de producto, alineadas entre sí. Medido en la portada: las cuatro miden lo mismo y
 * la foto arranca igual, pero el título ocupa una o dos líneas según el café, solo algunos tienen valoración
 * y el botón salía de 149 px en unos y de 185 en otros; el resultado era una fila con el precio a tres alturas
 * distintas. Ahora el título reserva dos líneas, el precio y el botón se anclan abajo y el botón ocupa el
 * ancho de la tarjeta, así que las piezas de todas las tarjetas caen en la misma línea.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	html body ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
	html body ul.products li.product .woocommerce-loop-product__title { min-height: calc(2 * 1.25em); }
	html body ul.products li.product .price { margin-top: auto; }
	html body ul.products li.product .astra-shop-summary-wrap > .button,
	html body ul.products li.product a.button.add_to_cart_button,
	html body ul.products li.product a.button.product_type_variable { width: 100%; text-align: center; }
}
/* El hueco que deja una tarjeta sin valoraciones, para que la fila no baile (ver `bocono-tarjeta-movil.php`). */
.bnc-sin-valoracion { height: 14px; margin: 0 0 7px; }
/* En el móvil la tarjeta no enseña estrellas (docs/11), así que tampoco su hueco: con él, la tarjeta de un café
   sin valoraciones bajaba el título 40 px respecto a su vecina (visto el 18/9 en la portada). */
@media (max-width: 767px) { .bnc-sin-valoracion { display: none; } }

/* ---------------------------------------------------------------------------
 * (18/9/2026) El bloque de compra en dos líneas, para que quepa entero en la primera pantalla (Carlos: «me
 * gustaría que esto entre en la pantalla, ¿es posible?»). Antes eran cuatro: el precio, «Comprar una vez»,
 * «Suscríbete…» y la fila de cantidad y botón, 170 px en total. Ahora el precio y las dos formas de compra
 * van en la misma línea y la cantidad con el botón, debajo.
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	html body.single-product .single_variation_wrap .woocommerce-variation-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 12px; }
	html body.single-product .single_variation_wrap .woocommerce-variation-price > .price { margin: 0; }
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper { margin: 0; }
	html body.single-product .single_variation_wrap .wcsatt-options-prompt-fieldset { margin: 0; padding: 0; border: 0; }
	html body.single-product .single_variation_wrap ul.wcsatt-options-prompt-radios { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; }
	html body.single-product .single_variation_wrap ul.wcsatt-options-prompt-radios > li { width: auto; margin: 0; }
	html body.single-product .woocommerce-variation-add-to-cart { margin-top: 0; }
}

/* Las flechas del carrusel de la ficha (`bocono-ficha-compra.php`), según la guía: cuadrado de 44 px en
   carbón, radio de 2 px, sin sombra, la flecha en crema; el texto («Foto anterior») queda para el lector de
   pantalla. Aparecen sobre la foto, centradas en vertical, a los dos lados. */
html body.single-product .woocommerce-product-gallery { position: relative; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav a {
	position: absolute; top: 222px; z-index: 5; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-top: -22px; background: var(--ink); color: transparent; font-size: 0;
	border-radius: var(--radius); text-decoration: none; overflow: hidden; opacity: .9;
}
html body.single-product .woocommerce-product-gallery .flex-direction-nav a::before {
	content: ""; width: 12px; height: 12px; border: solid #EFDDC3; border-width: 0 2.5px 2.5px 0; display: block;
}
html body.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-prev { left: 8px; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-prev::before { transform: rotate(135deg); margin-left: 5px; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-next { right: 8px; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-next::before { transform: rotate(-45deg); margin-right: 5px; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav a:hover,
html body.single-product .woocommerce-product-gallery .flex-direction-nav a:focus-visible { opacity: 1; outline: 2px solid var(--focus); outline-offset: 2px; }
html body.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled { opacity: .25; pointer-events: none; }
@media (max-width: 1024px) { html body.single-product .woocommerce-product-gallery .flex-direction-nav a { top: 50vw; } }

/* (18/9/2026) Las preguntas frecuentes de la portada, sin la doble línea ni el hueco. Tres reglas viejas se
   sumaban (borde abajo en todas, borde arriba en todas y el último con los dos), así que entre pregunta y
   pregunta se veían dos filetes con aire en medio, y cada pregunta cerrada medía 94 px con una sola línea de
   texto. Ahora: un único filete entre preguntas, la pregunta con su área táctil y nada más cuando está
   cerrada, y la columna algo más ancha para que no quede media pantalla vacía. */
html body .bnc-home-faq .wp-block-details { border-top: 0; border-bottom: 1px solid var(--linea-suave); padding: 0; max-width: 860px; }
html body .bnc-home-faq .wp-block-details:first-of-type { border-top: 1px solid var(--linea-suave); }
html body .bnc-home-faq .wp-block-details > summary { min-height: 0; padding: 16px 0; align-items: center; }
html body .bnc-home-faq .wp-block-details > :not(summary) { margin-top: 0; padding-bottom: 18px; }

/* ---------------------------------------------------------------------------
 * (18/9/2026) El mapa del origen en la ficha (`bocono-mapa-origen.php`): la silueta del país en crema con filete
 * carbón y un punto en la región. El punto va en carbón y no en naranja, como los medidores sensoriales: en esta
 * web el naranja significa «caramelización» y no puede señalar ninguna otra cosa (`PERFIL-DE-TAZA.md`).
 * ------------------------------------------------------------------------- */
.bnc-origen-con-mapa { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; }
.bnc-origen-con-mapa__texto > :last-child { margin-bottom: 0; }
.bnc-mapa-origen { margin: 0; }
.bnc-mapa-origen__svg { display: block; width: 100%; height: auto; max-height: 280px; overflow: visible; }
.bnc-mapa-origen__tierra { fill: var(--bg-alt); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bnc-mapa-origen__halo { fill: var(--ink); opacity: .16; }
.bnc-mapa-origen__pin { fill: var(--ink); stroke: var(--bg-alt); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bnc-mapa-origen figcaption { display: block; margin-top: 10px; line-height: 1.5; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-align: center; }
@media (max-width: 767px) {
	/* En el móvil el mapa acompaña, no ocupa la pantalla: a 220 px Kenia medía 250 de alto y su silueta, que es
	   de pocos puntos, se veía tosca. */
	.bnc-origen-con-mapa { grid-template-columns: 1fr; gap: 16px; }
	.bnc-mapa-origen { max-width: 170px; margin: 0 auto; }
	.bnc-mapa-origen__svg { max-height: 190px; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026, 4:40) La primera pantalla de la ficha, medida esta vez en la pantalla de Carlos: 1536 × 730 px útiles
 * (un monitor de 1920 × 1080 con Windows al 125 %, leído de su propio Chrome). Las medidas anteriores se hicieron a
 * 1833 × 897, que no es su pantalla, y el botón de comprar acababa en y = 839: fuera. Carlos, con la captura
 * delante: «esto sigue igual».
 *
 * La guía de Samantha (§ 11) pide en el bloque de compra las migas de pan, el kicker de origen y la ficha de datos
 * con sus ocho filas, y eso se queda. El sitio sale de lo que sobraba:
 *  - el margen de Astra entre la cabecera y la ficha, de 60 px a 20;
 *  - el rótulo «Ficha del lote», que la guía no pone en el bloque de compra: queda para el lector de pantalla;
 *  - las filas de datos, de 34 px a 30;
 *  - «Vaciar opciones», que con botones no hace falta (siempre hay uno pulsado);
 *  - las etiquetas FORMATO y MOLIENDA, con la altura de su letra y no de 22 px;
 *  - el precio, con el interlineado de una cifra y no el de un párrafo (51 px de alto para una línea);
 *  - y el hueco que dejaba el botón de comprar debajo de sí.
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	/* Astra lo fija con `.ast-plain-container.ast-no-sidebar #primary`, que pesa más que una clase y dos etiquetas */
	html body.single-product.ast-plain-container #primary, html body.single-product.ast-separate-container #primary { margin-top: 20px; }
	html body.single-product div.product .summary > .product_title.entry-title { margin-bottom: 8px; }
	html body.single-product div.product .summary > .bnc-chips { margin-top: 0; margin-bottom: 6px; }
	html body.single-product div.product .summary > .bnc-impresion { padding-top: 7px; padding-bottom: 7px; }

	html body.single-product div.product .summary .bnc-bloques-cafe .bnc-origen > h2 {
		position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	html body.single-product .bnc-origen dl.bnc-lote-datos > .bnc-lote-datos__fila { padding: 3px 0; }
	/* y el sitio reservado para las cuatro filas, a su nueva altura: todas las fichas siguen igual de altas */
	html body.single-product .bnc-origen dl.bnc-lote-datos { min-height: 120px; }

	html body.single-product table.variations th.label { line-height: 16px; padding: 0 0 4px; margin-bottom: 0; }
	html body.single-product div.product form.cart a.reset_variations { display: none !important; }
	html body.single-product div.product form.cart table.variations { margin-bottom: 10px; }

	html body.single-product .single_variation_wrap .woocommerce-variation-price { margin-bottom: 8px; align-items: center; }
	html body.single-product div.product form.cart .single_variation_wrap .woocommerce-variation.single_variation { margin-bottom: 0; }
	/* «Comprar una vez · Suscríbete»: sin los 16 px que dejaba debajo; si se elige suscripción, el desplegable de
	   frecuencia se separa lo justo */
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper .wcsatt-options-product-prompt { margin-bottom: 0; }
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper .wcsatt-options-product-wrapper { margin-top: 8px; }
	/* la cifra en su propia caja flexible: sin el renglón de 25 px que la rodeaba, la fila mide lo que mide la cifra */
	html body.single-product .single_variation_wrap .woocommerce-variation-price .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
	html body.single-product .single_variation_wrap .woocommerce-variation-price .price,
	html body.single-product .single_variation_wrap .woocommerce-variation-price .price .amount,
	html body.single-product div.product form.cart > .price.bnc-precio-compra,
	html body.single-product div.product form.cart > .price.bnc-precio-compra .amount { line-height: 1.1; }
	html body.single-product div.product form.cart .quantity,
	html body.single-product div.product form.cart button.single_add_to_cart_button { margin-bottom: 0; }
}

/* La galería, a la altura exacta del bloque de compra y sin hueco entre la foto y las miniaturas. Hasta ahora la
   foto medía siempre 444 × 444 y la tira de miniaturas se iba al fondo, así que cuanto más alto era el bloque de
   compra, más aire vacío quedaba en medio. Ahora es la ventana de la foto la que ocupa lo que queda sobre las
   miniaturas, y la foto se contiene dentro, centrada: como su fondo es el mismo arena de la página (comprobado
   píxel a píxel, uno o dos puntos de diferencia), no se ve ningún recuadro, solo la bolsa. Las flechas siguen en el
   centro de la foto. */
@media (min-width: 1025px) {
	/* Astra la deja pegada al bajar con `top: 104px`: con la ficha empezando en 99, la bajaba 5 px respecto al texto */
	html body.single-product .bnc-ficha-arriba > div.images.woocommerce-product-gallery { top: 96px !important; }
	html body.single-product .bnc-ficha-arriba > div.images.woocommerce-product-gallery .flex-viewport { flex: 1 1 auto; min-height: 0; height: auto !important; margin-bottom: 0; }
	html body.single-product .bnc-ficha-arriba > div.images .flex-viewport .woocommerce-product-gallery__wrapper,
	html body.single-product .bnc-ficha-arriba > div.images .flex-viewport .woocommerce-product-gallery__image,
	html body.single-product .bnc-ficha-arriba > div.images .flex-viewport .woocommerce-product-gallery__image > a { height: 100%; }
	html body.single-product .bnc-ficha-arriba > div.images .flex-viewport .woocommerce-product-gallery__image > a { display: block; }
	html body.single-product .bnc-ficha-arriba > div.images .flex-viewport .woocommerce-product-gallery__image > a > img { width: 100%; height: 100% !important; object-fit: contain; object-position: center; }
	html body.single-product .bnc-ficha-arriba > div.images ol.flex-control-thumbs { flex: none; margin-top: 12px !important; }
	/* 96 = la tira de miniaturas (84) y su margen (12) */
	html body.single-product .bnc-ficha-arriba > div.images .flex-direction-nav a { top: calc((100% - 96px) / 2); }
}

/* El plan de suscripción, en la misma línea (18/9/2026; el guion está en `bocono-ficha-compra.php`). Carlos: «¿puedes
   hacer algo para que cuando se pise "suscríbete y ahorra" no se baje lo demás?». El desplegable «Elige un plan» salía
   debajo y empujaba 99 px la cantidad y el botón. Ahora se pone encima del texto de la opción «Suscríbete…», que el
   guion mide: la línea de precio no cambia de alto y nada se mueve. La etiqueta «Elige un plan» queda para el lector
   de pantalla, que la sigue oyendo al llegar al desplegable. */
@media (min-width: 1025px) {
	html body.single-product .single_variation_wrap .woocommerce-variation-price .wcsatt-options-wrapper { flex: 1 1 auto; min-width: 0; position: relative; }
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper.bnc-plan-en-linea .wcsatt-options-product-wrapper {
		position: absolute; left: var(--bnc-plan-x, 180px); right: 0; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2;
	}
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper.bnc-plan-en-linea .wcsatt-options-product-dropdown-label {
		position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper.bnc-plan-en-linea select.wcsatt-options-product-dropdown {
		display: block; width: 100%; max-width: 380px; height: 40px; min-height: 40px; margin: 0; padding: 0 36px 0 12px; font-size: 15px; line-height: 38px;
	}
	/* el texto de la opción, oculto mientras el desplegable está encima (sin :has() el desplegable, opaco, ya lo tapa) */
	html body.single-product .single_variation_wrap .wcsatt-options-wrapper.bnc-plan-en-linea:has(input[value="yes"]:checked) .wcsatt-options-prompt-label-subscription .wcsatt-options-prompt-action { visibility: hidden; }
}

/* Las fichas agotadas, con el botón a la misma altura que las demás (18/9/2026). «Sin existencias» salía en su propia
   línea, debajo del precio, y bajaba 30 px la cantidad y el botón; y al lado seguían «Comprar una vez» y «Suscríbete»,
   que en un café agotado no llevan a nada. Ahora el aviso va en la línea del precio, justo detrás de la cifra, y las
   dos opciones de compra se quitan mientras no haya existencias. Burundi, Kenia y Uganda están agotados también en
   producción. */
@media (min-width: 1025px) {
	html body.single-product .single_variation_wrap .woocommerce-variation.single_variation { display: flex; align-items: center; gap: 0 20px; }
	html body.single-product .single_variation_wrap .woocommerce-variation.single_variation > .woocommerce-variation-price { flex: 1 1 auto; min-width: 0; }
	html body.single-product .single_variation_wrap .woocommerce-variation.single_variation > .woocommerce-variation-availability { flex: none; margin-bottom: 8px; }
	html body.single-product .single_variation_wrap .woocommerce-variation-availability p.stock { margin: 0; font-variation-settings: "wght" 700, "wdth" 84; font-size: 14px; }
	html body.single-product .single_variation_wrap .woocommerce-variation.single_variation:has(p.stock.out-of-stock) > .woocommerce-variation-price { flex: 0 1 auto; }
	html body.single-product .single_variation_wrap .woocommerce-variation.single_variation:has(p.stock.out-of-stock) .wcsatt-options-wrapper { display: none; }
}

/* Las diez fichas, con el botón en el mismo píxel (18/9/2026). Quedaban dos diferencias de alto:
   - las estrellas: sin valoraciones no hay línea de estrellas y todo subía 8 px (Kenia, Venezuela). Ahora las notas
     reservan su hueco y las estrellas, cuando las hay, se centran sobre esa misma línea sin sumar alto;
   - la franja de impresión: sin puntuación SCA medía 7 px menos (Colombia, el descafeinado, Venezuela). Ahora mide
     siempre lo mismo. */
@media (min-width: 1025px) {
	html body.single-product div.product .summary > .bnc-chips { margin-bottom: 14px; }
	html body.single-product div.product .summary > .woocommerce-product-rating { margin-top: -43px; margin-bottom: 11px; }
	/* La Caja no tiene la fila de notas de un café: su valoración conserva una fila propia. */
	html body.single-product div.product.product-type-bundle .summary > .woocommerce-product-rating { margin-top: 0; }
	html body.single-product div.product .summary > .bnc-impresion { min-height: 43px; box-sizing: border-box; }
}
/* «Vaciar opciones», fuera también en el móvil: con los botones siempre hay uno pulsado, y el enlace solo servía para
   dejar la ficha sin formato ni precio. */
html body.single-product div.product form.cart a.reset_variations { display: none !important; }

/* ---------------------------------------------------------------------------
 * (18/9/2026) El vídeo del origen, al final de «De dónde sale» (`bocono-video-origen.php`). Encima, el pie: qué se ve y
 * de quién es, con el rótulo «En vídeo» en versales, como los demás rótulos de la ficha; debajo, la fachada de
 * YouTube a 16:9, sin radio (es una foto) y con el botón de play de la casa.
 * ------------------------------------------------------------------------- */
.bnc-video-origen { margin: 36px 0 0; max-width: 760px; }
.bnc-video-origen__pie { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.bnc-video-origen__rotulo { display: inline-block; margin-right: 6px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 767px) {
	.bnc-video-origen { margin-top: 28px; }
	.bnc-video-origen__pie { font-size: 14px; }
}
/* En el móvil el pie del vídeo va justificado, como el resto del texto de la ficha (Carlos, 17/9/2026). */
@media (max-width: 767px) {
	.bnc-video-origen__pie { text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; }
}
/* Agotado también en el móvil: sin «Comprar una vez / Suscríbete», que no llevan a nada. */
html body.single-product .single_variation_wrap .woocommerce-variation.single_variation:has(p.stock.out-of-stock) .wcsatt-options-wrapper { display: none; }
/* Aire debajo del formulario de compra (18/9/2026). Al quitarle al botón su margen inferior, en las fichas de equipo la
   lista de características se pegaba al botón. El margen va en el formulario y no en el botón: la galería se iguala con
   el borde del botón, así que esto no la mueve. */
@media (min-width: 1025px) {
	html body.single-product div.product .summary form.cart { margin-bottom: 22px; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026, auditoría de Codex V-02) La compra en el móvil, en el orden de la guía de Samantha (§ 11): «Móvil:
 * galería → nombre y precio → selectores → botón → ficha de datos → medidores → resto». La ficha de datos (ocho filas,
 * 403 px a 390 de ancho) iba antes de los selectores y dejaba el botón en y = 1.795. Ahora va detrás del botón, y la foto
 * principal se contiene en algo menos de alto. En escritorio no cambia nada.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	html body.single-product div.product .summary > .bnc-bloques-cafe { order: 11; margin-top: 8px; }
}
@media (max-width: 767px) {
	html body.single-product div.product div.images .flex-viewport .woocommerce-product-gallery__image img { max-height: 76vw; width: 100%; object-fit: contain; }
	html body.single-product div.product .summary > .woocommerce-breadcrumb { font-size: 12px; line-height: 1.5; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026) Tienda y categorías de producto: los productos, a la vista debajo de la foto.
 *
 * Carlos, con Café de Brasil en su pantalla (1536 × 730): «yo quiero que cuando se abran las páginas de categorías de
 * cafés se vean los productos en la pantalla»; y cuando propuse bajar la foto: «la foto debajo de la cabecera no la
 * muevas de allí, a lo mucho redúcele altura y que todas sean de la misma altura». Antes, el primer café empezaba en
 * y = 695 a 1536 × 730 y en y = 821 en un móvil de 390 × 844.
 *  - La foto de la franja: una sola altura para todas las páginas que la llevan (150 / 130 / 120 px).
 *  - Menos aire entre la foto y las migas (48 → 20; 32 → 16 en el móvil).
 *  - «Filtrar» y el orden, en la fila del título (bnc_arch_pinta_barra, bocono-plantilla-categoria.php); en el móvil, en
 *    una sola fila debajo del párrafo. Ya no hay «Mostrando los N resultados» ni la línea de confianza.
 *  - El párrafo de entrada, a todo el ancho del título (dos líneas en escritorio en vez de tres).
 *  - En escritorio el panel de filtros se abre como desplegable bajo su botón, sobre los productos.
 * ------------------------------------------------------------------------- */
/* La altura va en proporción al ancho (150 px a 1536, la pantalla de Carlos): así cada foto enseña la misma parte en
   cualquier pantalla de escritorio y un encuadre vale para todas. Con 150 px fijos, a 1920 se veía un 20 % menos de alto
   de la foto y en Ecuador se cortaban caras. Igual en todas las páginas que llevan franja. */
html body:not(#bnc) .bnc-franja { height: clamp(120px, 9.766vw, 190px); }
@media (max-width: 1024px) { html body:not(#bnc) .bnc-franja { height: 130px; } }
@media (max-width: 767px)  { html body:not(#bnc) .bnc-franja { height: 120px; } }
html body.archive .site-content .ast-container, html body.post-type-archive-product .site-content .ast-container { padding-top: 20px; }
@media (max-width: 767px) { html body.archive .site-content .ast-container, html body.post-type-archive-product .site-content .ast-container { padding-top: 16px; } }

html body.archive .woocommerce-products-header, html body.post-type-archive-product .woocommerce-products-header {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; margin: 0 0 20px;
}
html body.archive .woocommerce-products-header > *, html body.post-type-archive-product .woocommerce-products-header > * { grid-column: 1 / -1; }
html body.archive .woocommerce-products-header > h1, html body.post-type-archive-product .woocommerce-products-header > h1 { grid-column: 1; grid-row: 1; margin: 0; }
html body .woocommerce-products-header > .bnc-arch-barra { grid-column: 2; grid-row: 1; }
html body.archive .woocommerce-products-header .bnc-cat-intro, html body.post-type-archive-product .woocommerce-products-header .bnc-cat-intro { max-width: none; margin: 10px 0 0; }
html body.archive .woocommerce-products-header .bnc-cat-intro p, html body.post-type-archive-product .woocommerce-products-header .bnc-cat-intro p { margin: 0; }
html body .woocommerce-products-header .bnc-cat-filtro-aviso { margin: 10px 0 0; }

.bnc-arch-barra { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
html body .bnc-arch-barra .woocommerce-ordering { float: none; margin: 0; }
/* El desplegable mide lo que su opción más larga («Precio: de menor a mayor»): con el tope de 160 px de otra regla y el
   mínimo de 214, «Orden predeterminado» salía cortado. */
html body .bnc-arch-barra .woocommerce-ordering select { height: 44px; width: auto; min-width: 0; max-width: none; }
html body .bnc-arch-barra .bnc-cat-filtros-panel > summary { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 20px; cursor: pointer; }
html body .bnc-arch-barra .bnc-cat-filtros-panel > summary small { margin-left: 8px; }
html body .bnc-arch-barra .bnc-cat-filtros-panel[open] > summary { background: var(--ink); color: var(--ink-invert); }
@media (min-width: 768px) {
	html body .bnc-arch-barra .bnc-cat-filtros-panel[open] > .bnc-cat-filtros {
		position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(880px, calc(100vw - 48px)); margin: 0;
		padding: 20px 24px 16px; background: var(--bg); border: var(--stroke) solid var(--border); border-radius: var(--radius);
	}
	html body .bnc-arch-barra .bnc-cat-filtros h2 { font-size: 22px; margin: 0 0 14px; }
}
@media (max-width: 767px) {
	html body.archive .woocommerce-products-header, html body.post-type-archive-product .woocommerce-products-header { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
	html body .woocommerce-products-header > .bnc-arch-barra { grid-column: 1; grid-row: auto; order: 10; margin-top: 14px; }
	html body .bnc-arch-barra > * { flex: 1 1 0; min-width: 0; }
	html body .bnc-arch-barra .woocommerce-ordering select { width: 100%; min-width: 0; max-width: none; }
	html body .bnc-arch-barra .bnc-cat-filtros-panel > summary { width: 100%; padding: 0 12px; }
}

/* (18/9/2026) La recomendación de molienda de Boconó («Para italiana, recomendamos medio-grueso») vuelve, en pequeño, en
   la línea de «MOLIENDA», a la derecha. Carlos: «¿podemos mantener en pequeñito y sin cambiar ningún tamaño de nada
   nuestra recomendación de molienda media gruesa para la italiana? Es que solo Boconó sugiere eso». Va fuera del flujo,
   sobre la línea de la etiqueta: no mueve ni agranda nada. Cuando esté el artículo que lo explica, se enlaza desde aquí. */
html body.single-product table.variations td.value { position: relative; }
html body.single-product table.variations .bnc-seg__recomienda {
	position: absolute; right: 0; bottom: calc(100% + 9px); max-width: calc(100% - 96px); margin: 0; /* 9 px: misma línea base que «MOLIENDA» */
	font-family: "Archivo", system-ui, sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none;
	color: var(--ink-soft); text-align: right; white-space: nowrap;
}
html body.single-product table.variations .bnc-seg__recomienda strong { color: var(--ink); font-weight: 700; }
@media (max-width: 380px) { html body.single-product table.variations .bnc-seg__recomienda { font-size: 11px; } } /* a 360 px no cabía por 5 px */

/* (18/9/2026) La tienda, con los productos a la vista: la entradilla a todo el ancho y con la letra de las categorías
   (dos líneas en escritorio en vez de tres) y, en escritorio, las dos navegaciones («Qué buscas» y «O elige por cómo
   sabe») en una sola fila con botones de 40 px (medían 1.365 px de ancho en una fila de 1.200 y ocupaban dos). El rótulo
   «Qué buscas» queda para los lectores de pantalla: los tres botones de familia se entienden solos y el «O elige por cómo
   sabe» de detrás los sigue leyendo bien. Si no cabe, la segunda navegación baja entera a otra fila. En el móvil no
   cambia: son dos filas que se deslizan. */
html body.post-type-archive-product .woocommerce-products-header .bnc-cat-intro p.bnc-intro { max-width: none; font-size: inherit; line-height: inherit; margin: 0; }
@media (min-width: 1025px) {
	html body .bnc-tienda-navs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 10px; margin: 14px 0 0; }
	html body .bnc-tienda-navs .bnc-tienda-nav { margin: 0; gap: 8px; flex-wrap: nowrap; }
	html body .bnc-tienda-navs a.bnc-cat-chip { height: 40px; padding: 0 12px; font-size: 11px; letter-spacing: .08em; }
	html body .bnc-tienda-navs .bnc-tienda-nav:first-child > .bnc-cat-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	html body .bnc-tienda-navs .bnc-cat-rotulo { font-size: 11px; }
}
/* (18/9/2026) Cabeza de tienda y categorías, un poco más apretada para que la primera fila de productos entre entera:
   16 px de la foto a las migas, 8 de las migas al título y del título al párrafo, 12 del párrafo a los botones y 16 hasta
   los productos. */
html body.archive .site-content .ast-container, html body.post-type-archive-product .site-content .ast-container { padding-top: 16px; }
html body.archive .woocommerce-breadcrumb, html body.post-type-archive-product .woocommerce-breadcrumb { margin-bottom: 8px; }
html body.archive .woocommerce-products-header, html body.post-type-archive-product .woocommerce-products-header { margin-bottom: 16px; }
html body.archive .woocommerce-products-header .bnc-cat-intro, html body.post-type-archive-product .woocommerce-products-header .bnc-cat-intro { margin-top: 8px; }
@media (min-width: 1025px) { html body .bnc-tienda-navs { margin-top: 12px; } }
/* (18/9/2026) El molido que llega, debajo de «Italiana», dentro del botón: letra pequeña, sin versales, en el mismo color
   del botón (blanco sobre carbón cuando está elegido). El botón mide 44 px de alto y con las dos líneas el texto ocupa 26:
   no cambia ningún tamaño. */
html body .bnc-seg__op .bnc-seg__sub { display: block; margin-top: 3px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 500, "wdth" 90; font-weight: 500; font-size: 10px; line-height: 1.1; letter-spacing: .02em; text-transform: none; color: inherit; opacity: .85; white-space: nowrap; }
html body .bnc-seg__op.is-agotado .bnc-seg__sub { display: none; }

/* ---------------------------------------------------------------------------
 * (18/9/2026) Textos de la tienda y de las categorías: un solo eje y anchos con intención. Caso de muestra: Café de
 * Ecuador. Carlos veía «columnas estrechas en medio»: a 1.440 px, el título, la entradilla y el aviso empezaban en x = 120
 * y el texto largo en x = 240, dentro de una caja centrada de 960 px (`.bnc-cat-bloques { max-width: 60em; margin: auto }`),
 * con los párrafos a 623 px, la lista con otra sangría de 48 y unos 460 px vacíos a la derecha; el aviso era una cajita
 * de 550 px con borde naranja; y las fotos iban al final de todo.
 *  - Todo empieza en el eje del contenedor: título, entradilla, aviso, textos, recuadro del productor, vídeo y preguntas.
 *  - Texto de lectura a 68ch (unos 80 caracteres por línea, la medida que ya tenía) y a la izquierda en escritorio; en el
 *    móvil sigue justificado con partición silábica (excepción de Carlos, 8.30).
 *  - Si la categoría tiene fotos, van en la columna de al lado del texto (bnc_pinta_descripcion_categoria); en tableta y
 *    móvil, detrás del texto. Sin fotos, el texto va solo en su medida.
 *  - Entradilla corta a 1.040 px como máximo (dos líneas); el aviso de disponibilidad, franja entera con su botón.
 * ------------------------------------------------------------------------- */
html body .bnc-cat-texto.bnc-cat-bloques, html body .bnc-tienda-texto.bnc-cat-bloques { max-width: none; margin: 56px 0 0; padding-top: 48px; border-top: var(--stroke) solid var(--border); }
@media (max-width: 767px) { html body .bnc-cat-texto.bnc-cat-bloques, html body .bnc-tienda-texto.bnc-cat-bloques { margin-top: 40px; padding-top: 32px; } }
@media (min-width: 1025px) {
	html body.archive .woocommerce-products-header .bnc-cat-intro, html body.post-type-archive-product .woocommerce-products-header .bnc-cat-intro { max-width: 1040px; }
}

/* Texto de lectura */
html body .bnc-cat-descripcion > h2 { max-width: none; margin: 48px 0 16px; }
html body .bnc-cat-descripcion > h2:first-child { margin-top: 0; }
html body .bnc-cat-descripcion > h3 { margin: 32px 0 12px; }
html body .bnc-cat-descripcion > p, html body .bnc-cat-descripcion > ul, html body .bnc-cat-descripcion > ol { max-width: 68ch; margin: 0 0 1em; }
html body .bnc-cat-descripcion > ul, html body .bnc-cat-descripcion > ol { margin-left: 0; padding-left: 1.25em; }
html body .bnc-cat-descripcion li { margin: 0 0 .5em; }
html body .bnc-cat-descripcion li:last-child { margin-bottom: 0; }

/* Texto y fotos juntos */
@media (min-width: 1025px) {
	html body .bnc-cat-lectura--con-fotos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
	html body .bnc-cat-lectura__fotos .bnc-cat-fotos-seccion { margin: 0; }
	html body .bnc-cat-lectura__fotos .bnc-cat-fotos-seccion > h2 { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }
	html body .bnc-cat-lectura__fotos .bnc-cat-fotos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	html body .bnc-cat-lectura__fotos .bnc-cat-fotos img { width: 100%; max-height: none; margin: 0; }
}
@media (max-width: 1024px) {
	html body .bnc-cat-lectura__fotos { margin-top: 40px; }
}

/* Recuadro del productor, vídeo y preguntas: en el mismo eje; el texto, a su medida */
html body .bnc-cat-bloques .bnc-productor { margin: 56px 0; }
html body .bnc-productor__texto > p { max-width: 68ch; }
html body .bnc-cat-video-seccion > :not(h2) { max-width: 880px; }
html body .bnc-cat-faq details > div, html body .bnc-cat-faq details > div p { max-width: 68ch; }

/* Aviso de disponibilidad: franja en el eje, con su botón */
html body .bnc-cat-proximamente { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; max-width: none; margin: 4px 0 0; padding: 20px 24px; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 16px; }
html body .bnc-cat-proximamente p { margin: 0; max-width: 76ch; }
html body .bnc-cat-proximamente .bnc-boton { flex: none; margin: 0; }
@media (max-width: 767px) {
	html body .bnc-cat-proximamente { flex-direction: column; align-items: stretch; padding: 16px; }
	html body .bnc-cat-proximamente .bnc-boton { width: 100%; }
}
/* (18/9/2026) Sin palabras sueltas en la última línea de la entradilla y del aviso («tiene.», «Si»); y el botón del aviso,
   con el aspecto de botón secundario (le llegaba el color vino y el subrayado de los enlaces del aviso). */
@media (min-width: 768px) { html body .woocommerce-products-header .bnc-cat-intro p, html body .bnc-cat-proximamente p { text-wrap: pretty; } }
html body .bnc-cat-proximamente a.bnc-boton { color: var(--ink); text-decoration: none; }
html body .bnc-cat-proximamente a.bnc-boton:hover, html body .bnc-cat-proximamente a.bnc-boton:focus-visible { color: var(--ink-invert); }
/* Dos líneas parejas en vez de una larga y otra de dos palabras. Solo desde tableta: en el móvil el texto va justificado
   y equilibrar las líneas las acorta y abre huecos enormes entre palabras. */
@media (min-width: 768px) { html body .woocommerce-products-header .bnc-cat-intro p { text-wrap: balance; } }
/* Fotos al lado del texto en rejilla de dos cuando apiladas serían más altas que el texto; las apaisadas, a lo ancho. */
@media (min-width: 1025px) {
	html body .bnc-cat-lectura--rejilla .bnc-cat-lectura__fotos .bnc-cat-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	html body .bnc-cat-lectura--rejilla .bnc-cat-lectura__fotos .bnc-cat-foto--apaisada { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026) Portada: fondo arena continuo, un solo eje y la compra en la primera pantalla.
 *
 * Carlos veía «una columna estrecha en medio»: a 1.440 px, la cabecera (H1, entradilla y los tres accesos) y el bloque de
 * perfiles iban en paneles crema (#F2E8DA) de 1.200 px sobre el arena de la página, con los párrafos a 623 px; el H1
 * empezaba en x = 150 y el resto de secciones en x = 168 (el relleno de 48 px que Astra pone a los grupos). Y en el móvil
 * el primer «Ver cafés» quedaba en y ≈ 1.120, detrás de una ilustración de 388 px.
 *  1. Arena continuo: fuera los paneles crema (cabecera y perfiles) y la media banda crema de X-Madrid. Se quedan las
 *     bandas carbón (ilustración, origen, vídeo), que son de marca, y los fondos de producto.
 *  2. Un solo eje, el del contenedor de toda la web: 1.200 px (x = 120 a 1.440), el mismo que la tienda y las categorías.
 *     Codex proponía unos 1.280; con 1.200 el eje no salta al pasar de la portada a la tienda. Las secciones a sangre
 *     alinean su texto con ese eje.
 *  3. Entradillas cortas a 960 px en escritorio (dos líneas en vez de tres o cuatro); los textos de columna, como estaban.
 *  4. La ilustración, más baja (34 % del alto de pantalla en escritorio, 170 px en el móvil), y debajo de la entradilla
 *     «Ver cafés» (el botón naranja de la pantalla) y «Elegir por perfil de taza» (zg216).
 * ------------------------------------------------------------------------- */
html body.home .elementor-element-adc46ca, html body.home .bnc-home-perfiles, html body.home .bnc-home-visita { background: transparent !important; }
html body.home .elementor-element-adc46ca > .e-con-inner { max-width: none !important; padding-top: 36px !important; padding-bottom: 24px !important; }
html body.home .entry-content > .wp-block-group:not(.bnc-home-banda):not(.bnc-home-partida):not(.bnc-home-video):not(.bnc-home-tira) { padding-left: 0 !important; padding-right: 0 !important; }
html body.home .bnc-home-faq.is-layout-constrained > *, html body.home .bnc-home-guia.is-layout-constrained > *, html body.home .bnc-home-perfiles.is-layout-constrained > * { margin-left: 0 !important; }
html body.home :is(.bnc-home-banda, .bnc-home-partida, .bnc-home-video, .bnc-home-tira) { --bnc-hueco: max(16px, calc((100vw - 1200px) / 2)); }
html body.home .bnc-home-perfiles { padding-top: 24px !important; padding-bottom: 24px !important; }
html body.home #perfiles { scroll-margin-top: 110px; }
@media (min-width: 1025px) {
	html body.home .elementor-element-b076c26 p, html body.home .elementor-element-3e038aa p,
	html body.home .entry-content > .wp-block-group > p, html body.home .bnc-home-escaparate > p { max-width: 960px; }
}

/* Ilustración más baja, con el símbolo en proporción */
html body.home .elementor .elementor-element.elementor-element-80335c5 { min-height: clamp(240px, 34vh, 340px) !important; }
html body.home .elementor-element-80335c5 .elementor-icon { font-size: 140px; width: 140px; height: 140px; }
html body.home .elementor-element-80335c5 .elementor-icon svg { width: 100%; height: 100%; }
@media (max-width: 767px) {
	html body.home .elementor .elementor-element.elementor-element-80335c5 { min-height: 170px !important; }
	html body.home .elementor-element-80335c5 .elementor-icon { font-size: 92px; width: 92px; height: 92px; }
	html body.home .elementor-element-adc46ca > .e-con-inner { padding-top: 20px !important; }
}

/* Los dos botones de la cabecera */
html body.home .bnc-template-hero .bnc-home-cta { margin: 4px 0 12px; gap: 12px; }
html body.home .bnc-template-hero .bnc-home-cta > .elementor-widget-button { width: auto; margin: 0 !important; }
html body.home .bnc-template-hero .bnc-home-cta__principal .elementor-button { background: var(--action); border-color: var(--action); color: var(--action-ink); }
html body.home .bnc-template-hero .bnc-home-cta__principal .elementor-button:hover,
html body.home .bnc-template-hero .bnc-home-cta__principal .elementor-button:focus-visible { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-ink); }
@media (max-width: 767px) {
	html body.home .bnc-template-hero .bnc-home-cta { flex-direction: column !important; gap: 10px; }
	html body.home .bnc-template-hero .bnc-home-cta > .elementor-widget-button { width: 100%; }
	html body.home .bnc-template-hero .bnc-home-cta .elementor-button-wrapper { text-align: center !important; }
	html body.home .bnc-template-hero .bnc-home-cta .elementor-button { display: flex; width: 100%; justify-content: center; min-height: 48px; }
}
/* En el móvil, perfiles (que va a sangre) y el vídeo quedaban con el texto pegado al borde de la pantalla: 16 px, como el
   resto. El del vídeo venía de antes (la regla 8.29 quita el relleno a los grupos y no lo exceptuaba). `:not(#bnc)`
   sube el peso por encima de esas reglas con `!important`. */
@media (max-width: 767px) {
	html body.home .entry-content > .bnc-home-perfiles.wp-block-group:not(#bnc),
	html body.home .entry-content > .bnc-home-video.wp-block-group:not(#bnc) { padding-left: 16px !important; padding-right: 16px !important; }
}
/* Tableta: el H1 iba a 64 px en cuatro líneas (256 px de alto). */
@media (min-width: 768px) and (max-width: 1024px) {
	html body.home .elementor-element-c09eeea .elementor-heading-title { font-size: 46px !important; line-height: 1.02 !important; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026) Páginas: el texto en el eje del contenedor, no en una columna centrada.
 * En las páginas hechas con bloques (Café de especialidad en Madrid, X-Madrid, la guía, las legales…) los títulos iban
 * en x = 120 (a 1.440) y los párrafos, con su medida de 68ch, centrados por los márgenes automáticos de Astra (x = 408;
 * la entradilla, en x = 372): dos ejes en la misma página y una columna estrecha en medio, lo que Carlos veía «como un
 * error». Ahora todo sale del mismo borde, los párrafos conservan su medida de lectura y la entradilla llega a 1.040.
 * Los artículos no cambian (su columna de lectura centrada lleva dentro título, texto y fotos, en un solo eje). Fuera
 * carrito, pago y cuenta.
 * ------------------------------------------------------------------------- */
html body:is(.page, .single-rank_math_locations):not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content > :is(p, ul, ol, blockquote, .wp-block-quote, .wp-block-list, .wp-block-table, details, .wp-block-details) { margin-left: 0 !important; margin-right: auto !important; }
@media (min-width: 1025px) {
	html body:is(.page, .single-rank_math_locations):not(.home) .entry-content > p.bnc-intro { max-width: 1040px; }
}

/* ---------------------------------------------------------------------------
 * (18/9/2026) Servicio de tueste (Elementor 20194): arena continuo y un solo eje, el de x = 120 a 1.440 (el contenedor
 * de 1.200 de toda la web). Antes: el título del héroe en una caja centrada al 84 % (x = 251), los paneles alternos crema
 * y arena de 1.200 px con 20 px de relleno (texto en x = 140), y «Así tostamos» y el formulario en x = 150. En escritorio
 * los paneles crema (qué incluye, maquila, formulario) pasan a arena: eran el mismo «panel encajonado» de la portada.
 * En el móvil no cambia nada (ya iba todo a 16 px).
 * ------------------------------------------------------------------------- */
html body .bnc-page-tueste .elementor-element:is(.elementor-element-b1db163, .elementor-element-7fcfac9, .elementor-element-3fc0744) { background-color: transparent !important; }
@media (min-width: 1025px) {
	html body .bnc-page-tueste .elementor-element:is(.elementor-element-b1db163, .elementor-element-73b9f16, .elementor-element-7fcfac9, .elementor-element-12ee20e, .elementor-element-5ccab4f) { --padding-left: 0px; --padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
	html body .bnc-page-tueste .elementor-element:is(.elementor-element-9ce929f, .elementor-element-c049e11, .elementor-element-3fc0744) { --content-width: 1200px; }
	html body .bnc-page-tueste .elementor-element:is(.elementor-element-9ce929f, .elementor-element-c049e11, .elementor-element-3fc0744) > .e-con-inner { max-width: 1200px !important; }
	html body .bnc-page-tueste .elementor-element.elementor-element-9ce929f { --padding-left: 0px; --padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
	html body .bnc-page-tueste .elementor-element.elementor-element-caf0d85 { --width: 100%; width: 100% !important; --padding-left: 0px; --padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
	html body .bnc-page-tueste .elementor-element-caf0d85 .elementor-heading-title, html body .bnc-page-tueste .elementor-element-ddaee27 { max-width: 960px; }
}
/* La tira de cuatro fotos de «Del origen al tueste» iba en su propia caja de 1.140 (x = 150): al mismo eje que el resto. */
@media (min-width: 1025px) {
	html body .bnc-page-tueste .elementor-element.elementor-element-3318e75 { --content-width: 1200px; }
	html body .bnc-page-tueste .elementor-element.elementor-element-3318e75 > .e-con-inner { max-width: 1200px !important; }
}

/* (18/9/2026) Contacto (Elementor 20195): un solo eje con el título (x = 120 a 1.440). Las tres cajas de Elementor tenían
   su interior a 1.140 (x = 150) y las columnas del formulario 10 px de relleno más (x = 160): cuatro ejes en una página. */
@media (min-width: 1025px) {
	html body .bnc-page-contacto .elementor-element:is(.elementor-element-9300a25, .elementor-element-a524e58, .elementor-element-2e25935) { --content-width: 1200px; }
	html body .bnc-page-contacto .elementor-element:is(.elementor-element-9300a25, .elementor-element-a524e58, .elementor-element-2e25935) > .e-con-inner { max-width: 1200px !important; }
	html body .bnc-page-contacto .elementor-element.elementor-element-968a3a2 { --padding-left: 0px; padding-left: 0 !important; }
	html body .bnc-page-contacto .elementor-element.elementor-element-2134fed { --padding-right: 0px; padding-right: 0 !important; }
}
/* El botón «Filtrar» medía el 100 % más su relleno y su borde (26 px): en el móvil se montaba sobre el orden. */
html body .bnc-arch-barra .bnc-cat-filtros-panel > summary { box-sizing: border-box; }
/* Sin el «–» de las preguntas frecuentes pegado a «FILTRAR» al abrirlo: el botón ya cambia a carbón. */
html body .bnc-arch-barra .bnc-cat-filtros-panel > summary::after, html body .bnc-arch-barra .bnc-cat-filtros-panel > summary::before { content: none !important; display: none !important; }
/* (18/9/2026, auditoría de Codex V-03) «Comprar Specialty Coffee»: en escritorio el título iba centrado entre dos rayas y
   el párrafo de debajo salía del eje izquierdo (dos ejes). Ahora, como en el móvil, el título empieza en el eje y la raya
   sigue a su derecha hasta el final de la columna: título, párrafo y accesos comparten el mismo borde izquierdo. */
@media (min-width: 768px) {
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider { justify-content: flex-start !important; }
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider-separator::before { display: none !important; }
	html body .bnc-template-hero .elementor-element-ae17cd4 .elementor-divider__element { margin-left: 0 !important; padding-left: 0 !important; }
}

/* (18/9/2026, auditoría de Codex V-04) Artículos: el H1 de 56 px (el de la guía de Samantha, que no se toca) se apretaba en
   la columna de lectura de 630 px y ocupaba cinco líneas (siete a 320 px). En escritorio el título crece hacia la derecha
   desde el mismo eje que el texto, hasta 1.000 px sin salirse de la pantalla: dos o tres líneas. En el móvil, 30 px (el H1
   general es 32; los títulos de artículo son los más largos de la web). Y los párrafos, sin el desvío de 3 px que les daba
   el centrado de su medida de 68ch dentro de la columna: todo empieza en el mismo borde. */
@media (min-width: 1025px) {
	html body.single-post header.entry-header .entry-title { width: min(1000px, calc(50vw + 315px - 48px)); max-width: none; }
}
@media (max-width: 767px) {
	html body.single-post header.entry-header .entry-title { font-size: 30px; line-height: 1.05; }
}
html body.single-post .entry-content > :is(p, ul, ol) { margin-left: 0; }

/* (18/9/2026) La tabla de Cafés de especialidad marca los cafés agotados (Codex, § 6: Burundi, Kenia y Uganda salían con
   precio como si se pudieran comprar). Etiqueta como las del perfil de taza: Archivo en versalitas, en carbón. */
.bnc-cat-tabla .bnc-cat-tabla__agotado { display: block; margin-top: 3px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 11px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

/* (18/9/2026, 8.127) Ficha de café sin columnas huecas. Las secciones iban en una columna de 46em en el centro y, a
   pantalla ancha, con medio fondo vacío a cada lado (Carlos, con captura: «no quiero ninguna página así, el texto en el
   centro y la mayoría de la página hueca»). La ficha pasa al eje de 1.200 px de la cabecera y cada sección larga lleva al
   lado su columna (bocono-plantilla-ficha-cafe.php): una foto del origen o un recuadro de datos. Guía de Samantha:
   radio 2 px como mucho, borde de 1,5 px en carbón, sin sombras, fotos sin radio; el vino es el único acento que escribe. */
.bnc-recuadro { background: var(--bnc-crema); border: 1.5px solid var(--ink); border-radius: 2px; box-shadow: none; padding: 20px 24px; }
.bnc-recuadro__titulo { font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.bnc-recuadro dl, .bnc-recuadro ul { margin: 0; padding: 0; list-style: none; }
.bnc-recuadro__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-top: 1px solid var(--bnc-linea); }
.bnc-recuadro__fila:first-child, .bnc-recuadro li:first-child { border-top: 0; padding-top: 0; }
.bnc-recuadro dt { margin: 0; font-weight: 600; color: var(--ink); }
.bnc-recuadro dd { margin: 0; text-align: right; color: var(--ink); }
.bnc-recuadro__fila--marcada dt, .bnc-recuadro__fila--marcada dd { color: var(--ink-accent); font-weight: 700; }
.bnc-recuadro li { margin: 0; padding: 9px 0; border-top: 1px solid var(--bnc-linea); color: var(--ink); }
.bnc-recuadro__pie { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.bnc-lado-foto { margin: 0; }
.bnc-lado-foto img { display: block; width: 100%; height: auto; border-radius: 0; }
.bnc-seccion__lado { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 1025px) {
	/* Café y equipo al eje de 1.200 px. En las de equipo, la descripción larga (con fotos y vídeos dentro) va en la columna
	   de texto y al lado «Lo esencial» y una foto, fijos mientras se lee; el manual, en recuadro al lado de la tabla. */
	html body .bnc-ficha-cafe { max-width: 1200px; }
	html body .bnc-ficha-equipo .bnc-seccion--el-producto .bnc-seccion__lado { position: sticky; top: 112px; }
	html body .bnc-ficha-equipo .bnc-seccion--video:has(> .bnc-video + .bnc-video-propio, > figure + figure) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
	html body .bnc-ficha-equipo .bnc-seccion--video > h2 { grid-column: 1 / -1; }
	html body .bnc-ficha-equipo .bnc-seccion--video > figure { margin-top: 0; }
	html body .bnc-seccion--con-lado { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 72px; align-items: start; }
	html body .bnc-seccion--con-lado .bnc-seccion__lado { margin-top: 0; }
	html body .bnc-seccion--con-lado .bnc-seccion__texto > :first-child { margin-top: 0; }
	/* Proceso y variedades juntos cuando no hay foto ni recuadro para su columna. */
	html body .bnc-seccion-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; align-items: start; }
	/* El mapa del origen, más grande: con el eje de 1.200 px el texto de al lado se quedaba en líneas de 120 caracteres. */
	html body .bnc-ficha-cafe .bnc-origen-con-mapa { grid-template-columns: 380px minmax(0, 1fr); column-gap: 72px; }
	/* Los medidores del perfil, dos por fila (con la ficha a 1.200 px la rejilla de 320 px dejaba tres y uno; con cuatro en
	   fila, el nivel de uno se montaba sobre el nombre del siguiente). */
	html body .bnc-ficha-cafe .bnc-barras { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
	/* Las fotos de la columna de al lado, apaisadas: una vertical sola dejaba un hueco bajo un texto corto. */
	html body .bnc-seccion__lado .bnc-lado-foto img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
	/* El vídeo del origen, a todo el eje (con 760 px quedaba pegado a la izquierda y el resto vacío). */
	html body .bnc-ficha-cafe .bnc-video-origen { max-width: none; }
}

/* (18/9/2026) La franja sensorial, con la distribución de la del staging de Codex (Carlos: «esto lo podías hacer mucho
   más bonito, pero mucho, solo con la distribución del texto, mira la de Codex… en todas las fichas»). Medido allí: franja
   de 181 px con relleno de 32 × 40; titular a 34 px, condensado al 78 %, en 800 e interlineado 1,15, llenando unos 680 px
   sin equilibrar líneas; sello compacto. v2 tenía 286 px de alto, titular a 30 px y al 84 % con las líneas equilibradas
   (acababan lejos de la raya) y el isotipo a 96 px. Se queda Anybody (la guía la pide en titulares; Codex usaba Archivo). */
.bnc-banda-sensorial { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 48px; padding: 32px 40px; }
.bnc-banda-sensorial__frase p { font-variation-settings: "wght" 800, "wdth" 78; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; text-wrap: pretty; }
.bnc-banda-sensorial__tostado { gap: 6px; padding-left: 48px; }
.bnc-banda-sensorial__tostado .bnc-isotipo { width: 56px; margin-bottom: 4px; }
.bnc-banda-sensorial__tostado strong { font-size: 16px; }
@media (max-width: 767px) {
	.bnc-banda-sensorial { grid-template-columns: 1fr; padding: 24px 16px; gap: 20px; }
	.bnc-banda-sensorial__frase p { font-size: 24px; }
	.bnc-banda-sensorial__tostado { padding-left: 0; }
}

/* (18/9/2026) La rejilla de fotos de categoría, sin huecos y a la altura del texto (Carlos, con captura de Venezuela:
   tres fotos y un hueco; «metería una imagen más para completar»). Las verticales, a 4:5; las apaisadas, a lo ancho y
   a 3:2. Con fotos de proporciones distintas la columna se alargaba muy por debajo del texto. */
html body .bnc-cat-lectura--rejilla .bnc-cat-lectura__fotos .bnc-cat-fotos img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
html body .bnc-cat-lectura--rejilla .bnc-cat-lectura__fotos .bnc-cat-foto--apaisada img { aspect-ratio: 3 / 2; }

/* -------------------------------------------------------------------------
 * (18/9/2026) Productores de una categoría de origen: el campo `_bcos_category_producer` en su forma de lista
 * (mu-plugins/bocono-plantilla-categoria.php 1.5). Carlos, para Café de Venezuela: que se vea a Andrés Román, Luis La
 * Cruz, Cleiver, Samer Bou Hamdan y La Neblina, Fabiana y su familia en Palmarito, Nixon y el doctor Chávez. El primero
 * va destacado, a lo ancho: foto a la izquierda y texto a la derecha. Los demás, en tarjetas de tres columnas (o de dos,
 * si así no queda hueco al final). Guía de Samantha: marco de 1,5 px en carbón, radio de 2 px, fotos a radio 0 y sin
 * sombras; Anybody en el nombre, Archivo en el lugar y la finca; el enlace, en vino.
 * ------------------------------------------------------------------------- */
html body .bnc-cat-bloques .bnc-productores { margin: 64px 0; }
html body .bnc-productores > h2 { margin: 0 0 12px; }
html body .bnc-productores__intro { max-width: 68ch; margin: 0 0 28px; }
html body .bnc-productores__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
html body .bnc-productores__lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .bnc-productor-tarjeta { display: flex; flex-direction: column; margin: 0; border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
html body .bnc-productor-tarjeta__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
html body .bnc-productor-tarjeta__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
html body .bnc-productor-tarjeta__texto { padding: 20px 22px 24px; }
html body .bnc-productor-tarjeta__lugar { margin: 0 0 8px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
html body .bnc-productor-tarjeta h3 { margin: 0 0 6px; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.1; }
html body .bnc-productor-tarjeta__finca { margin: 0 0 12px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 600, "wdth" 94; font-size: 15px; line-height: 1.4; color: var(--ink); }
html body .bnc-productor-tarjeta__texto > p:not([class]) { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
html body .bnc-productor-tarjeta__texto > p:last-child { margin-bottom: 0; }
html body .bnc-productor-tarjeta__enlace { font-size: 15px; }
html body .bnc-productor-tarjeta__enlace a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
html body .bnc-productor-tarjeta--destacada { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 520px; }
html body .bnc-productor-tarjeta--destacada .bnc-productor-tarjeta__foto { aspect-ratio: auto; height: 100%; }
html body .bnc-productor-tarjeta--destacada .bnc-productor-tarjeta__texto { align-self: center; padding: clamp(28px, 4vw, 56px); }
html body .bnc-productor-tarjeta--destacada h3 { font-size: clamp(28px, 2.8vw, 40px); }
html body .bnc-productor-tarjeta--destacada .bnc-productor-tarjeta__texto > p:not([class]) { font-size: 17px; max-width: 56ch; }
@media (max-width: 1024px) {
	html body .bnc-productores__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body .bnc-productor-tarjeta--destacada { min-height: 440px; }
}
@media (max-width: 700px) {
	html body .bnc-cat-bloques .bnc-productores { margin: 48px 0; }
	html body .bnc-productores__lista { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	html body .bnc-productor-tarjeta--destacada { display: flex; min-height: 0; }
	html body .bnc-productor-tarjeta--destacada .bnc-productor-tarjeta__foto { aspect-ratio: 4 / 3; height: auto; }
	html body .bnc-productor-tarjeta--destacada .bnc-productor-tarjeta__texto { padding: 20px 22px 24px; }
	html body .bnc-productor-tarjeta--destacada h3 { font-size: 26px; }
	html body .bnc-productor-tarjeta--destacada .bnc-productor-tarjeta__texto > p:not([class]) { font-size: 16px; }
}
/* (18/9/2026) El texto de las tarjetas de productores, justificado en el móvil como el resto (8.30): la regla general
   deja fuera los <p> de las listas con clase `bnc-` para no justificar titulares de tarjetas, y estas lo son. El lugar
   y la finca, con clase, se quedan a la izquierda. */
@media (max-width: 767px) {
	html body .bnc-productor-tarjeta__texto > p:not([class]) { text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; overflow-wrap: break-word; }
}
/* (18/9/2026) «En vídeo» con apaisados y verticales a la vez (Café de Venezuela, bocono-plantilla-categoria.php 1.5):
   en escritorio, dos columnas: los apaisados uno debajo de otro a la izquierda y el vertical a la derecha, a su altura.
   Antes iban los tres en una columna de 880 px (esa regla ganaba a los 380 px de los verticales) y el vertical medía
   650 × 1.150 px, con media página vacía a la derecha de los apaisados. En tablet y móvil, uno debajo de otro. */
html body .bnc-cat-video-seccion > .bnc-cat-videos { max-width: none; }
html body .bnc-cat-videos .bnc-video-propio + .bnc-video-propio { margin-top: 28px; }
@media (min-width: 1025px) {
	html body .bnc-cat-videos--mixto { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
	html body .bnc-cat-videos--mixto .bnc-video-propio--v { max-width: none; margin: 0; }
}
@media (max-width: 1024px) {
	html body .bnc-cat-videos--mixto .bnc-cat-videos__apaisados { max-width: 880px; }
	html body .bnc-cat-videos--mixto .bnc-cat-videos__verticales { margin-top: 28px; }
}
/* (18/9/2026) La tira de vídeos verticales de una categoría (bocono-plantilla-categoria.php 1.5): hasta cuatro por fila
   en escritorio, dos en tablet y móvil (tres, si son tres, se quedan en una columna en el móvil para no dejar hueco). */
html body .bnc-cat-video-seccion > .bnc-cat-videos__tira { max-width: none; }
html body .bnc-cat-videos__tira { display: grid; grid-template-columns: repeat(var(--bnc-cols, 4), minmax(0, 1fr)); gap: 28px 24px; margin-top: 36px; align-items: start; }
html body .bnc-cat-videos__tira--2 { --bnc-cols: 2; }
html body .bnc-cat-videos__tira--3 { --bnc-cols: 3; }
html body .bnc-cat-videos__tira .bnc-video-propio--v { max-width: none; margin: 0; }
html body .bnc-cat-videos__tira .bnc-video-propio + .bnc-video-propio { margin-top: 0; }
@media (max-width: 1024px) {
	html body .bnc-cat-videos__tira--4 { --bnc-cols: 2; }
}
@media (max-width: 700px) {
	html body .bnc-cat-videos__tira { gap: 20px 12px; }
	html body .bnc-cat-videos__tira--3 { --bnc-cols: 1; }
}
/* (18/9/2026) Un solo vídeo vertical en una categoría, con sus pasos (Café de Colombia): el recuadro «Qué se ve en el
   vídeo» a la izquierda y el vídeo a la derecha, a 340 px; en el móvil, el vídeo primero y el recuadro debajo. Antes, un
   vertical suelto tomaba los 880 px de la columna de vídeo (1.564 px de alto). Recuadro con marco de 1,5 px en carbón,
   radio de 2 px y sin sombra, como los de las fichas. */
html body .bnc-cat-video-seccion > .bnc-cat-videos--solo-v { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: stretch; }
html body .bnc-cat-videos--solo-v .bnc-cat-videos__texto { display: flex; flex-direction: column; justify-content: center; }
html body .bnc-cat-videos--solo-v .bnc-video-propio--v { max-width: none; margin: 0; }
html body .bnc-cat-videos__texto { padding: clamp(24px, 3vw, 36px); border: var(--stroke) solid var(--border); border-radius: var(--radius); background: var(--surface); }
html body .bnc-cat-videos__titulo { margin: 0 0 16px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
html body .bnc-cat-videos__pasos { margin: 0; padding: 0; list-style: none; counter-reset: bnc-paso; }
html body .bnc-cat-videos__pasos li { position: relative; margin: 0; padding: 0 0 18px 44px; counter-increment: bnc-paso; font-size: 16px; line-height: 1.55; }
html body .bnc-cat-videos__pasos li:last-child { padding-bottom: 0; }
html body .bnc-cat-videos__pasos li::before { content: counter(bnc-paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border: var(--stroke) solid var(--border); border-radius: var(--radius); font-family: "Anybody", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 90; font-size: 14px; line-height: 26px; text-align: center; color: var(--ink); }
html body .bnc-cat-videos__pasos li strong { display: block; margin: 0 0 2px; font-family: "Anybody", system-ui, sans-serif; font-variation-settings: "wght" 800, "wdth" 90; font-size: 18px; line-height: 1.25; }
@media (max-width: 767px) {
	html body .bnc-cat-video-seccion > .bnc-cat-videos--solo-v { display: flex; flex-direction: column; gap: 24px; }
	html body .bnc-cat-videos--solo-v .bnc-video-propio--v { order: -1; max-width: 380px; width: 100%; }
	html body .bnc-cat-videos__pasos li { text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; }
}
/* (18/9/2026) Los pasos, más grandes, para que el recuadro no quede vacío junto al vídeo; y el número centrado en su
   cuadro también en el móvil (el justificado del texto se lo llevaba a la izquierda). */
html body .bnc-cat-videos--solo-v .bnc-cat-videos__titulo { margin-bottom: 22px; }
html body .bnc-cat-videos--solo-v .bnc-cat-videos__pasos li { padding: 0 0 26px 48px; font-size: 17px; }
html body .bnc-cat-videos--solo-v .bnc-cat-videos__pasos li:last-child { padding-bottom: 0; }
html body .bnc-cat-videos--solo-v .bnc-cat-videos__pasos li strong { font-size: 22px; margin-bottom: 4px; }
html body .bnc-cat-videos__pasos li::before { width: 32px; height: 32px; line-height: 30px; font-size: 15px; text-align: center; text-align-last: center; -webkit-hyphens: none; hyphens: none; }
@media (max-width: 767px) {
	html body .bnc-cat-videos--solo-v .bnc-cat-videos__pasos li { padding-left: 44px; font-size: 16px; }
	html body .bnc-cat-videos--solo-v .bnc-cat-videos__pasos li strong { font-size: 19px; }
}
html body .bnc-cat-videos__nota { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid rgba(37, 38, 38, .2); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
html body .bnc-cat-videos--solo-v .bnc-video-propio--v { align-self: start; }
/* (18/9/2026) Recuadro de datos del origen en la columna de al lado del texto de una categoría (`_bcos_category_datos`):
   el componente de los recuadros de las fichas, con cada dato en dos líneas (el nombre, en versalitas pequeñas; el valor,
   debajo), porque en esta columna los valores son frases. Sin fotos, se queda fijo al bajar. Con fotos, va encima. */
html body .bnc-cat-datos { margin: 0 0 24px; }
html body .bnc-cat-datos .bnc-recuadro { background: var(--surface); padding: 24px 28px; }
html body .bnc-cat-datos .bnc-recuadro__fila { display: block; padding: 12px 0; }
html body .bnc-cat-datos .bnc-recuadro dt { margin: 0 0 3px; font-family: "Archivo", system-ui, sans-serif; font-variation-settings: "wght" 700, "wdth" 84; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
html body .bnc-cat-datos .bnc-recuadro dd { text-align: left; font-size: 17px; line-height: 1.45; }
html body .bnc-cat-datos .bnc-recuadro__pie { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bnc-linea); font-size: 13px; color: var(--ink-soft); }
@media (min-width: 1025px) {
	html body .bnc-cat-lectura--datos .bnc-cat-lectura__fotos { position: sticky; top: 112px; align-self: start; }
}
/* (18/9/2026) Vídeo de YouTube de una categoría con su recuadro «Qué se ve en el vídeo» al lado (tercer trozo de
   `_bcos_category_video`): el vídeo, a lo ancho que deja el recuadro; debajo en el móvil. */
html body .bnc-cat-video-seccion > .bnc-cat-videos--yt { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; align-items: stretch; }
html body .bnc-cat-videos--yt .bnc-cat-videos__yt { align-self: center; }
html body .bnc-cat-videos--yt .bnc-cat-videos__yt .bnc-yt { display: block; width: 100%; }
html body .bnc-cat-videos--yt .bnc-cat-videos__texto { display: flex; flex-direction: column; justify-content: center; }
html body .bnc-cat-videos__descripcion { margin: 0; font-size: 17px; line-height: 1.6; }
@media (max-width: 1024px) {
	html body .bnc-cat-video-seccion > .bnc-cat-videos--yt { display: flex; flex-direction: column; gap: 20px; }
}
@media (max-width: 767px) {
	html body .bnc-cat-videos__descripcion { font-size: 16px; text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; }
}
/* (19/9/2026) Fichas de equipo: cada apartado de la descripción con una foto de la galería al lado, alternando lados
   (bocono-plantilla-ficha-equipo.php). Los de foto a la izquierda cambian el orden de la rejilla solo en escritorio;
   en el móvil, el texto y después la foto, como siempre. Las fotos de producto, enteras (sin recortar la máquina). */
@media (min-width: 1025px) {
	html body .bnc-seccion--con-lado.bnc-seccion--lado-izq { grid-template-columns: 380px minmax(0, 1fr); }
	html body .bnc-seccion--lado-izq .bnc-seccion__lado { order: -1; }
	html body .bnc-ficha-equipo .bnc-seccion__lado .bnc-lado-foto img { aspect-ratio: 1 / 1; object-fit: contain; object-position: 50% 50%; }
}