/* KAMU · estilos globales: cabecera, pie, utilidades compartidas por los bloques.
   Los colores salen siempre de la paleta de theme.json (var(--wp--preset--color--*)). */

:root {
	--k-azul: var(--wp--preset--color--azul);
	--k-azul-tarjeta: var(--wp--preset--color--azul-tarjeta);
	--k-azul-profundo: var(--wp--preset--color--azul-profundo);
	--k-carbon: var(--wp--preset--color--carbon);
	--k-crema: var(--wp--preset--color--crema);
	--k-crema-claro: var(--wp--preset--color--crema-claro);
	--k-blanco: var(--wp--preset--color--blanco);
	--k-cafe: var(--wp--preset--color--cafe);
	--k-cafe-oscuro: var(--wp--preset--color--cafe-oscuro);
	--k-cafe-claro: var(--wp--preset--color--cafe-claro);
	--k-pizarra: var(--wp--preset--color--pizarra);
	--k-gris-claro: var(--wp--preset--color--gris-claro);
	--k-titulo: var(--wp--preset--font-family--lora);
	--k-texto: var(--wp--preset--font-family--outfit);
	--k-gl: max(16px, env(safe-area-inset-left, 0px));
	--k-gr: max(16px, env(safe-area-inset-right, 0px));
	--k-ancho: 1200px;
	--k-radio: 16px;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:where(img, video) { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--k-cafe-claro); outline-offset: 3px; border-radius: 6px; }
.k-claro :focus-visible { outline-color: var(--k-cafe-oscuro); }
.num, .k-num { font-variant-numeric: tabular-nums; }
.k-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
em.k-acento, .k-acento em, h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--k-cafe); }

/* Piezas compartidas por los bloques KAMU */
.k-env { width: 100%; max-width: var(--k-ancho); margin-inline: auto; }
.k-banda { padding-left: var(--k-gl); padding-right: var(--k-gr); padding-block: clamp(64px, 9vw, 112px); }
.k-claro { background: var(--k-crema-claro); color: var(--k-pizarra); }
.k-claro :is(h2, h3) { color: var(--k-azul); }
.k-eyebrow { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--k-cafe-claro); }
.k-claro .k-eyebrow { color: var(--k-cafe-oscuro); }
.k-encabezado { display: grid; gap: 16px; max-width: 44rem; margin-bottom: clamp(36px, 5vw, 60px); }
.k-encabezado h2 + p { margin-top: 6px !important; } /* más aire entre el título y la descripción */
.k-encabezado h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3rem); }
.k-encabezado p { margin: 0; font-size: 1.1rem; }
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
	font: 500 1rem/1 var(--k-texto); text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s; touch-action: manipulation; }
.k-btn-primario { background: var(--k-cafe-oscuro); color: var(--k-blanco); }
.k-btn-primario:hover { background: #7A5A40; color: var(--k-blanco); transform: translateY(-1px); }
.k-btn-azul { background: var(--k-azul); color: var(--k-crema-claro); }
.k-btn-azul:hover { background: var(--k-azul-tarjeta); color: var(--k-crema-claro); }
/* Botón con borde (sobre fondo oscuro): antes solo existía en el CSS de la portada y en la ficha salía blanco */
.k-btn.k-btn-borde { border-color: color-mix(in srgb, var(--k-crema) 55%, transparent); color: var(--k-crema); background: transparent; }
.k-btn.k-btn-borde:hover { background: var(--k-crema); color: var(--k-azul); }
.k-btn[disabled], .k-btn[aria-busy="true"] { opacity: .55; cursor: default; transform: none; }
.k-formato { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border: 1px solid rgb(27 38 50 / .2); border-radius: 999px; padding: 3px; background: var(--k-blanco); }
.k-formato input { position: absolute; opacity: 0; pointer-events: none; }
.k-formato label { margin: 0; display: block; text-align: center; padding: 6px 10px; border-radius: 999px; font-size: .88rem; color: var(--k-pizarra); cursor: pointer; transition: background-color .2s, color .2s; }
.k-formato input:checked + label { background: var(--k-azul); color: var(--k-crema-claro); }
/* Formato sin stock: nombre tachado, más suave, y "pronto" al lado sin tachar (no dice "agotado") */
.k-formato label { white-space: nowrap; }
.k-formato input:disabled + label { opacity: .6; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.k-formato input:disabled + label::after { content: "pronto"; display: inline-block; margin-left: 5px; font-size: .85em; font-style: italic; } /* inline-block: el tachado del nombre no lo alcanza */
.k-formato input:focus-visible + label { outline: 2px solid var(--k-cafe-oscuro); outline-offset: 2px; }
.k-puntos { display: flex; gap: 5px; }
.k-puntos i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; }
.k-puntos i.on { background: currentColor; }

/* Cabecera */
.k-cabecera { position: sticky; top: 0; z-index: 50;
	border-bottom: 1px solid color-mix(in srgb, var(--k-crema) 12%, transparent); padding-top: env(safe-area-inset-top, 0px); }
/* Fondo con desenfoque en una capa aparte: con backdrop-filter en la cabecera misma, el menú del celular
   (position: fixed) quedaba encerrado en la barra de 68 px en vez de cubrir la pantalla */
.k-cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--k-azul) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.admin-bar .k-cabecera { top: var(--wp-admin--admin-bar--height, 0px); }
/* El menú sigue la página: el sticky va en el contenedor de la parte "header" (hijo directo de .wp-site-blocks).
   En la cabecera sola no funcionaba: su contenedor mide lo mismo que ella y no tenía espacio para quedarse arriba. */
.wp-site-blocks > .wp-block-template-part:has(> .k-cabecera) { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .k-cabecera) { top: var(--wp-admin--admin-bar--height, 0px); }
.wp-site-blocks > .wp-block-template-part > .k-cabecera { position: relative; top: auto; }
/* Sin el espacio de 24 px que WordPress deja entre cabecera, contenido y pie: en las páginas claras (carrito,
   checkout, pedido recibido) se veía como una franja azul bajo la línea delgada del menú */
.wp-site-blocks > * + * { margin-block-start: 0; }
html { scroll-padding-top: 84px; } /* los saltos a anclas (tienda, reseñas…) no quedan tapados por el menú */
.k-cabecera-fila { min-height: 68px; gap: 24px; }
.k-marca { display: block; line-height: 0; }
.k-logo { display: block; width: 112px; height: 26px; background: var(--k-crema);
	-webkit-mask: var(--k-logo) left center / contain no-repeat; mask: var(--k-logo) left center / contain no-repeat; }
.k-cabecera .wp-block-navigation { margin-left: auto; }
.k-cabecera .wp-block-navigation a { text-decoration: none; opacity: .85; }
.k-cabecera .wp-block-navigation a:hover { opacity: 1; }
.k-cabecera .wc-block-mini-cart__button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--k-crema) 30%, transparent); color: var(--k-crema); }
.k-cabecera .wc-block-mini-cart__badge { background: var(--k-cafe-oscuro); color: var(--k-blanco); }
.k-minicarrito-hueco { flex: none; width: 55.5px; height: 40px; } /* lugar del minicarrito en carrito y checkout (functions.php) */
/* Carrito lateral cerrado: Woo solo lo deja transparente y con aria-hidden, pero sus botones seguían recibiendo el foco
   del teclado (falla de accesibilidad en PageSpeed). Oculto de verdad, después de los 0,3 s del fundido de cierre. */
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

/* Menú del celular (pantalla completa): logo arriba, enlaces grandes en Lora con líneas, "Arma tu pack · 10%"
   como botón al final y redes abajo. Logo y redes van dentro del menú, pero solo se ven con el menú abierto. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .k-menu-solo,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:has(> .k-menu-solo) { display: none; }
.k-cabecera .wp-block-navigation__responsive-container.is-menu-open { padding: calc(env(safe-area-inset-top, 0px) + 84px) 24px calc(env(safe-area-inset-bottom, 0px) + 32px); animation: k-menu-entra .25s ease-out; }
@keyframes k-menu-entra { from { opacity: 0; transform: translateY(-8px); } }
.k-cabecera .is-menu-open .wp-block-navigation__responsive-dialog { position: static; } /* logo y X se ubican respecto de la pantalla, a la altura de la barra */
.k-cabecera .is-menu-open .k-menu-marca { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 21px); left: 16px; }
.k-cabecera .is-menu-open .wp-block-navigation__responsive-container-close { top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; padding: 8px; color: var(--k-crema); }
.k-cabecera .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; align-items: stretch; gap: 0; }
.k-cabecera .is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.k-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--k-carbon); }
.k-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a { display: block; width: 100%; padding: 15px 0; font: 500 1.6rem/1.2 var(--k-titulo); color: var(--k-crema); opacity: 1; }
.k-cabecera .is-menu-open .wp-block-navigation__container a[aria-current="page"] { color: var(--k-cafe-claro); }
/* "Arma tu pack" pasa al final como botón (en el computador sigue siendo un enlace más) */
.k-cabecera .is-menu-open .wp-block-navigation__container > .k-menu-pack { order: 99; border: 0; margin-top: 28px; }
.k-cabecera .is-menu-open .wp-block-navigation__container > .k-menu-pack > a { display: flex; align-items: center; justify-content: center; min-height: 52px; box-sizing: border-box; padding: 0 26px; border-radius: 999px; background: var(--k-cafe-oscuro); color: var(--k-blanco); font: 500 1.05rem/1 var(--k-texto); }
.has-modal-open .k-whatsapp { display: none; } /* con el menú abierto, el botón de WhatsApp tapaba el menú */
.k-cabecera .is-menu-open .k-menu-pack .wp-block-navigation-item__label::after { content: " · 10%"; }
.k-cabecera .is-menu-open .wp-block-navigation__container > .k-menu-pack > a[aria-current="page"] { color: var(--k-blanco); }
.k-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(> .k-menu-redes) { order: 100; border: 0; margin-top: 24px; } /* WordPress las mete en la misma lista que los enlaces */
.k-cabecera .is-menu-open ul.k-menu-redes { display: flex; width: 100%; justify-content: center; gap: 6px; }
.k-cabecera .is-menu-open .k-menu-redes .wp-social-link { color: var(--k-crema); background: none; }
.k-cabecera .is-menu-open .k-menu-redes .wp-social-link a { padding: 8px; }
.k-cabecera .is-menu-open .k-menu-redes .wp-social-link svg { width: 24px; height: 24px; fill: currentColor; }

/* Pie */
.k-pie { background: var(--k-azul-profundo); color: var(--k-gris-claro); font-size: .95rem; }
.k-pie a { color: var(--k-gris-claro); text-decoration: none; }
.k-pie a:hover { color: var(--k-blanco); }
.k-pie h2 { font-family: var(--k-texto); font-weight: 500; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--k-crema); margin: 0 0 14px; }
.k-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.k-pie .k-legal { border-top: 1px solid var(--k-carbon); font-size: .85rem; }
/* Redes en íconos (bloque nativo social-links, estilo "solo logos"): crema como el resto del pie, blanco al pasar el mouse */
.k-pie ul.k-redes { display: flex; gap: 6px; margin: 0; } /* "ul" para ganarle a .k-pie ul (grid), que los ponía uno bajo otro */
.k-pie .k-redes .wp-social-link { color: var(--k-crema); background: none; transition: color .2s, transform .2s; }
.k-pie .k-redes .wp-social-link a { padding: 8px; }
.k-pie .k-redes .wp-social-link svg { width: 22px; height: 22px; fill: currentColor; }
.k-pie .k-redes .wp-social-link:hover { color: var(--k-blanco); transform: translateY(-1px); }

/* WooCommerce en el tema: migas, avisos, historia y reseñas de la ficha */
.wc-block-breadcrumbs, .woocommerce-breadcrumb { color: var(--k-gris-claro); }
.wc-block-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--k-cafe-claro); }
.k-historia { color: var(--k-gris-claro); font-size: 1.05rem; }
.k-historia strong { color: var(--k-crema); font-weight: 500; }
.k-historia .k-historia-titulo { margin: 0 0 18px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--k-cafe-claro); } /* mismo tamaño que el título de reseñas, en el café claro de la etiqueta anterior */
/* "Su historia" encerrada en un marco delgado */
.wp-block-group.k-historia { max-width: 880px; margin: clamp(40px, 6vw, 72px) auto; padding-inline: clamp(22px, 4.5vw, 52px) !important; border: 1px solid var(--k-carbon); border-radius: 24px; box-sizing: border-box; }

/* Reseñas de la ficha en horizontal (tarjetas), con "Escribe tu reseña" junto al título */
.k-resenas-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.k-resenas-cab h2 { margin: 0; }
.k-resenas-producto ol.wp-block-woocommerce-product-review-template { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.k-resenas-producto ol.wp-block-woocommerce-product-review-template > li { margin: 0; padding: 22px; border-radius: var(--k-radio); background: var(--k-azul-tarjeta); border: 1px solid var(--k-carbon); display: grid; gap: 8px; align-content: start; }
.k-resenas-producto ol.wp-block-woocommerce-product-review-template > li > * { margin: 0; }
.k-resenas-producto .wp-block-woocommerce-product-review-author-name { font-weight: 500; color: var(--k-crema); }
.k-resenas-producto .wp-block-woocommerce-product-review-date { font-size: .85rem; color: var(--k-gris-claro); }
.k-resenas-producto .wp-block-woocommerce-product-review-content { color: var(--k-gris-claro); line-height: 1.65; }
.k-resenas-producto .wc-block-product-review-rating__container { justify-content: flex-start; text-align: left; }
.k-resenas-producto .wc-block-product-review-rating__stars { margin: 0; }
.k-resenas-producto .wp-block-woocommerce-product-review-date a { color: inherit; text-decoration: none; }

/* Formulario de reseña en un popup (lo arma blocks/ficha/view.js; sin JS se ve el formulario normal) */
#review_form_wrapper.k-modal-oculto { display: none; }
#review_form_wrapper.k-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgb(10 15 20 / .72); }
#review_form_wrapper.k-modal #review_form { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: clamp(22px, 4vw, 32px); border-radius: 22px; background: var(--k-azul); border: 1px solid var(--k-carbon); box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
#review_form_wrapper.k-modal .comment-reply-title { display: block; margin: 0 40px 10px 0; font-family: var(--k-titulo); font-weight: 700; font-size: 1.6rem; color: var(--k-blanco); }
#review_form_wrapper.k-modal .comment-form > p { margin: 0 0 14px; }
#review_form_wrapper.k-modal label { display: block; margin-bottom: 6px; color: var(--k-crema); font-size: .92rem; }
/* Estrellas para puntuar: eran botones en negro (color por defecto) sobre fondo azul */
.k-resenas-producto .comment-form-rating button { color: var(--k-cafe-claro); background: transparent; border: 0; padding: 2px; cursor: pointer; }
.k-resenas-producto .comment-form-rating button:focus-visible { outline: 2px solid var(--k-cafe-claro); outline-offset: 2px; border-radius: 4px; }
.k-resenas-producto .comment-form-rating svg { width: 28px; height: 28px; }
.k-modal-cerrar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--k-crema) 30%, transparent); background: transparent; color: var(--k-crema); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.k-modal-cerrar:hover { background: var(--k-crema); color: var(--k-azul); }
html.k-sin-scroll { overflow: hidden; }
.k-resenas-producto { border-top: 1px solid var(--k-carbon); }
.k-resenas-producto h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--k-blanco); }
.k-resenas-producto .wc-block-components-product-rating__stars, .k-resenas-producto .star-rating, .k-resenas-producto .stars a { color: var(--k-cafe); }
.k-resenas-producto a { color: var(--k-cafe-claro); }
.k-resenas-producto :is(input[type="text"], input[type="email"], textarea, select) { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--k-crema) 30%, transparent); background: var(--k-azul-tarjeta); color: var(--k-blanco); font: inherit; }
.k-resenas-producto :is(input[type="submit"], button[type="submit"]) { min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--k-cafe-oscuro); color: var(--k-blanco); font: 500 1rem var(--k-texto); cursor: pointer; }

/* Páginas de texto y artículos del blog */
.k-articulo .k-eyebrow a { color: inherit; text-decoration: none; }
.k-articulo-meta { gap: 6px 16px; font-size: .9rem; color: var(--k-cafe-claro); margin-top: 12px; }
.k-articulo-meta > * { margin: 0; }
/* sin fecha en el artículo (decisión de Pablo, 2026-10-30): queda solo el tiempo de lectura, sin el separador "·" */
/* Textos sueltos de páginas y entradas (los bloques KAMU dentro del contenido llevan sus propios estilos) */
:where(.k-articulo, .wp-block-post-content) :is(h2, h3):not(:where([class*="wp-block-kamu-"] *)) { margin-top: 2em; }
:where(.wp-block-post-content) h2:not(:where([class*="wp-block-kamu-"] *)) { font-size: clamp(1.6rem, 3vw, 2.1rem); }
:where(.wp-block-post-content) h3:not(:where([class*="wp-block-kamu-"] *)) { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
:where(.wp-block-post-content) :is(p, li):not(:where([class*="wp-block-kamu-"] *)) { color: var(--k-gris-claro); font-size: 1.07rem; line-height: 1.75; }
:where(.wp-block-post-content) strong:not(:where([class*="wp-block-kamu-"] *)) { color: var(--k-crema); font-weight: 500; }
:where(.wp-block-post-content) .wp-block-image img { border-radius: 18px; }
:where(.wp-block-post-content) .wp-block-separator { border: 0; border-top: 1px solid var(--k-carbon); margin-block: 2.5em; opacity: 1; }
:where(.wp-block-post-content) .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* tablas anchas: se desplazan dentro de su caja en celular en vez de ensanchar la página */
:where(.wp-block-post-content) .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
:where(.wp-block-post-content) .wp-block-table :is(th, td) { border: 1px solid var(--k-carbon); padding: 10px 12px; text-align: left; color: var(--k-gris-claro); }
:where(.wp-block-post-content) .wp-block-table th { background: var(--k-azul-tarjeta); color: var(--k-crema); }
:where(.wp-block-post-content) .wp-block-details { border-bottom: 1px solid var(--k-carbon); padding-block: 14px; }
:where(.wp-block-post-content) .wp-block-details summary { cursor: pointer; font-family: var(--k-titulo); font-weight: 700; font-size: 1.15rem; color: var(--k-crema); }
:where(.wp-block-post-content) .wp-block-quote { border-left: 3px solid var(--k-cafe); padding-left: 20px; font-family: var(--k-titulo); font-style: italic; }
.k-claro :where(.wp-block-post-content) :is(p, li):not(:where([class*="wp-block-kamu-"] *)) { color: var(--k-pizarra); }
.k-claro :where(.wp-block-post-content) strong:not(:where([class*="wp-block-kamu-"] *)) { color: var(--k-azul); }

/* WhatsApp propio (reemplaza a Joinchat) */
.k-whatsapp { position: fixed; z-index: 60; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center; background: var(--k-cafe-oscuro); color: var(--k-blanco); box-shadow: 0 10px 24px rgb(0 0 0 / .35); transition: transform .25s; }
.k-whatsapp:hover { transform: scale(1.06); color: var(--k-blanco); }
@media (max-width: 900px) { body:has(.k-armador) .k-whatsapp { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); } }
.k-whatsapp svg { width: 28px; height: 28px; }

/* Aviso al agregar al carrito */
.k-toast { position: fixed; z-index: 70; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(calc(100% + 140px)); max-width: min(calc(100% - 32px), 620px); box-sizing: border-box; /* antes left:50% + translate: solo usaba la mitad de la pantalla y el texto quedaba cortado */
	background: var(--k-crema-claro); color: var(--k-azul); padding: 18px 26px; border-radius: 16px; font-size: 1.08rem; line-height: 1.45; text-align: center; box-shadow: 0 12px 30px rgb(0 0 0 / .35); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.k-toast.ver { transform: none; }
@media (max-width: 700px) { .k-toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } } /* sobre el botón de WhatsApp */
.k-toast a { color: var(--k-cafe-oscuro); font-weight: 500; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* Encabezado de página (Contacto, Aprende de café): subtítulo, título, bajada y línea delgada, como el de la tienda */
.k-cab-pagina { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px) !important; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--k-carbon); }
.k-cab-pagina > * { margin: 0 !important; }
.k-cab-pagina .k-eyebrow { color: var(--k-cafe-claro); }
.k-cab-pagina h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--k-blanco); } /* mismo tamaño y color que el título de la tienda */
.k-cab-pagina .k-bajada { max-width: 40rem; color: var(--k-gris-claro); font-size: 1.1rem; line-height: 1.6; }
/* En el artículo: título algo menor (hay títulos largos) y menos aire antes de la foto */
.k-cab-pagina.k-cab-articulo { margin-bottom: clamp(28px, 4vw, 40px) !important; padding-bottom: clamp(24px, 3.5vw, 36px); }
.k-cab-articulo h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.12; }
.k-cab-articulo .k-eyebrow a { color: inherit; text-decoration: none; }
.k-cab-articulo .k-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .k-articulo-foto, .k-articulo-foto img { aspect-ratio: 2 / 1 !important; } } /* en celular 3:1 quedaba en 114 px de alto */
/* 404: botones bajo la línea del encabezado */
.k-acciones-404 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0 !important; margin-bottom: clamp(8px, 2vw, 16px) !important; }