/*
Theme Name: Ortopedia Belgrano
Theme URI: https://ortopediabelgrano.com.ar
Description: Child theme de Kadence con la identidad de marca de Ortopedia Belgrano. Tokens y tipografia segun 02_SISTEMA_DISENO.md.
Author: Ortopedia Belgrano
Template: kadence
Version: 0.1.0
Text Domain: ob-child
*/

:root {
	--ob-azul: #14457A;
	--ob-azul-osc: #0E3460;
	--ob-azul-cl: #1A5FA0;
	--ob-verde: #2EA88B;
	--ob-verde-osc: #17695A;
	--ob-coral: #FF8A5B;
	--ob-coral-osc: #C2410C;
	--ob-grafito: #243240;
	--ob-gris: #5B6B7A;

	/* Design primitives ported from the prototype (and tuned tighter). */
	--ob-soft: #f4f7fa;
	--ob-gris-cl: #EEF3F7;
	--ob-linea: #e1e8f0;
	--ob-r: 14px;
	/* Refined over the prototype: softer, tinted with the brand azul hue. */
	--ob-shadow: 0 6px 24px rgba(20, 69, 122, .08);
	--ob-shadow-lift: 0 14px 32px rgba(20, 69, 122, .12);
	--ob-shadow-coral: 0 8px 20px rgba(255, 138, 91, .30);
}

/* ============================================================
   Clases de utilidad de la paleta (.has-X-color / .has-X-background-color).
   WordPress debería emitirlas desde theme.json y en este stack NO lo hace
   (las de la paleta default de WP sí están; las nuestras no llegan al HTML).
   Consecuencia medida en vivo (2026-07-27): todo elemento que confiaba solo
   en la clase renderizaba el color heredado — el CTA blanco del hero de
   /andadores/ quedó a contraste 1,19:1 (ilegible) y los eyebrows verde-osc
   salían oscuros. Mismo formato que emite el core: var(preset) + !important.
   Y OJO: las variables --wp--preset--color--* TAMPOCO llegan al runtime
   (medido: getPropertyValue devuelve vacío en html y body), así que las
   definimos acá espejando theme.json — si cambia la paleta, cambiar AMBOS.
   ============================================================ */
:root {
	--wp--preset--color--azul: #14457A;
	--wp--preset--color--azul-osc: #0E3460;
	--wp--preset--color--verde: #2EA88B;
	--wp--preset--color--verde-osc: #17695A;
	--wp--preset--color--coral: #FF8A5B;
	--wp--preset--color--coral-osc: #C2410C;
	--wp--preset--color--grafito: #243240;
	--wp--preset--color--gris: #5B6B7A;
	--wp--preset--color--blanco: #FFFFFF;
	--wp--preset--color--gris-claro: #F4F6F8;
}

.has-azul-color { color: var(--wp--preset--color--azul) !important; }
.has-azul-osc-color { color: var(--wp--preset--color--azul-osc) !important; }
.has-verde-color { color: var(--wp--preset--color--verde) !important; }
.has-verde-osc-color { color: var(--wp--preset--color--verde-osc) !important; }
.has-coral-color { color: var(--wp--preset--color--coral) !important; }
.has-coral-osc-color { color: var(--wp--preset--color--coral-osc) !important; }
.has-grafito-color { color: var(--wp--preset--color--grafito) !important; }
.has-gris-color { color: var(--wp--preset--color--gris) !important; }
.has-blanco-color { color: var(--wp--preset--color--blanco) !important; }
.has-gris-claro-color { color: var(--wp--preset--color--gris-claro) !important; }

.has-azul-background-color { background-color: var(--wp--preset--color--azul) !important; }
.has-azul-osc-background-color { background-color: var(--wp--preset--color--azul-osc) !important; }
.has-verde-background-color { background-color: var(--wp--preset--color--verde) !important; }
.has-verde-osc-background-color { background-color: var(--wp--preset--color--verde-osc) !important; }
.has-coral-background-color { background-color: var(--wp--preset--color--coral) !important; }
.has-coral-osc-background-color { background-color: var(--wp--preset--color--coral-osc) !important; }
.has-grafito-background-color { background-color: var(--wp--preset--color--grafito) !important; }
.has-gris-background-color { background-color: var(--wp--preset--color--gris) !important; }
.has-blanco-background-color { background-color: var(--wp--preset--color--blanco) !important; }
.has-gris-claro-background-color { background-color: var(--wp--preset--color--gris-claro) !important; }

/* (fin de utilidades de paleta — el :root de tokens sigue arriba) */
:root {
	/* Single easing token — calmer than the prototype's default ease. */
	--ob-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   Global focus-visible — accessible, on-brand, never harsh.
   Improvement over the prototype (which had no focus styling).
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible,
.ob-btn:focus-visible,
.ob-hero-dot:focus-visible,
.ob-cfg-opt:focus-visible {
	outline: 3px solid var(--ob-azul-cl);
	outline-offset: 2px;
	border-radius: 6px;
}

/* `select` y `textarea` quedaron FUERA de la regla de arriba, y no se pueden
   sumar ahí: `select:focus-visible` pesa (0,1,1), lo MISMO que el
   `select:focus{outline:0}` de Kadence — empatan y gana Kadence, que carga
   después. Resultado real medido en la ficha: el <select> de "Ancho de asiento"
   —el campo OBLIGATORIO para poder comprar— no marcaba el foco de ninguna
   forma, mientras el input de cantidad, que sí entra por `input:focus-visible`,
   lo marcaba bien. El prefijo `body` sube la cuenta de elementos a (0,1,2) y
   nos devuelve el anillo sin recurrir a !important.

   El checkout NO se ve afectado: su regla propia pesa (0,3,1) y sigue ganando,
   así que ahí el foco se mantiene con borde azul + halo. */
body select:focus-visible,
body textarea:focus-visible {
	outline: 3px solid var(--ob-azul-cl);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ============================================================
   INTEGRIDAD DE LAYOUT — fixes de overflow horizontal y sticky.
   Tres bugs de fondo que desajustaban el home en todos lados:

   1) Header sticky roto. El <header> (template-part) mide solo el
      alto de su contenido, y `position:sticky` SOLO pega dentro del
      alto de su contenedor padre → al scrollear más que eso, el
      header se iba. `display:contents` disuelve la caja del wrapper:
      el .ob-header-main pasa a pegarse respecto a .wp-site-blocks
      (toda la pagina). Verificado: no introduce gaps verticales.

   2) Contenido `alignwide` desplazado ~19px a la derecha. Kadence
      inyecta padding de borde + max-width 1280 en los wrappers
      full-bleed, y los hijos `alignwide` calculaban un margen
      negativo asimetrico que los desbordaba. Los fijamos al
      wide-size (1200) y los centramos.

   3) Mini-carrito off-canvas generaba scroll lateral. El drawer
      cerrado de WooCommerce queda `position:fixed` fuera de pantalla
      a la derecha y empujaba ~57px de overflow. Lo ocultamos cuando
      su overlay esta en estado cerrado (--is-hidden); al abrirlo,
      WooCommerce cambia esa clase y vuelve a mostrarse.
   ============================================================ */
header.wp-block-template-part {
	display: contents;
}

.wp-site-blocks .alignwide {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

.wc-block-components-drawer__screen-overlay--is-hidden {
	display: none !important;
}

/* Red de seguridad anti-scroll-horizontal. Las bandas full-bleed de Kadence
   se dimensionan contra 100vw (que INCLUYE el ancho del scrollbar) → quedan
   ~8px mas anchas que el area visible y generan scroll lateral. Clipear en
   .wp-site-blocks (NO en html/body) elimina ese sobrante sin romper el
   header sticky, porque el contenedor mide todo el alto del contenido y no
   se vuelve el scroller real (el scroll sigue en el viewport). Tambien
   contiene cualquier panel del mega-menu que se asome en anchos intermedios.
   No alcanza al mini-carrito (position:fixed): ese se oculta arriba. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Regla de oro: el color de ACCION (coral) solo en CTAs / agregar al carrito.
   Kadence estiliza sus propios botones de WooCommerce, asi que los forzamos aca. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button,
/* `.wp-element-button` encadenado NO es decorativo: sube la especificidad de
   0-1-0 a 0-2-0 para ganarle a Kadence. Kadence declara
   `button, .button, .wp-block-button__link, .wp-element-button {...}` en
   `kadence-global-css`, que empata en 0-1-0 y carga DESPUES que `ob-child-css`
   (posiciones 14 vs 19 de los <link> en produccion) — o sea que ganaba por
   orden, en silencio. Medido en vivo el 2026-07-21: el boton del catalogo
   salia #2B6CB0 con texto #2D3748 = 2.21:1, ninguno de los dos un color de
   marca, sobre el CTA principal de cada categoria. Los botones que a proposito
   NO son coral estan scopeados con wrapper (.ob-filter-clear, .ob-empty-cta,
   .ob-size-guide, .ob-product) y siguen ganando: empatan en 0-2-0 y vienen
   despues en este archivo. */
.wp-block-button__link.wp-element-button {
	background-color: var(--ob-coral);
	border-color: var(--ob-coral);
	/* Texto grafito sobre coral = 5.6:1 (WCAG AA). El blanco sobre coral
	   daba 2.3:1 y solo pasaba en hover. En hover el fondo se oscurece
	   (coral-osc) y el texto vuelve a blanco (5.2:1). */
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover,
/* Mismo motivo de especificidad que la regla base de arriba. */
.wp-block-button__link.wp-element-button:hover {
	background-color: var(--ob-coral-osc);
	border-color: var(--ob-coral-osc);
	color: #fff;
}

/* El add-to-cart de la ficha NO lo cubria ninguna de las dos reglas de arriba.
   El fix de 2026-07-21 (comentario extenso mas arriba) encadeno
   `.wp-block-button__link.wp-element-button` — que sube a 0-2-0 y le gana a
   `kadence-global-css`, pero NO matchea este boton: sus clases son
   `single_add_to_cart_button button alt wp-element-button`, sin
   `.wp-block-button__link`. Asi que caia en `.woocommerce button.button.alt`
   (0-3-1), y `kadence/css/woocommerce.min.css` declara ESE MISMO selector con
   `var(--global-palette-btn-bg)`: empate exacto resuelto por orden de carga.
   Medido en vivo el 2026-07-29 sobre la ficha del rollator AN-620: <link>
   posicion 9 (ob-child) vs 17 (woocommerce.min) → ganaba Kadence en silencio y
   el CTA principal de toda la tienda salia #2B6CB0, texto blanco. El comentario
   de `@media (max-width:781px)` mas abajo ya asumia que era coral.
   0-5-2 le saca cuatro clases de ventaja al empate, sin `!important`.
   Verificar con getComputedStyle EN PRODUCCION despues de tocar esto: el
   ganador lo decide el orden real de los <link>, y ese orden no existe en local. */
.ob-product form.cart button.single_add_to_cart_button.button.alt {
	background-color: var(--ob-coral);
	border-color: var(--ob-coral);
	/* Grafito, no blanco: 5.6:1 sobre coral (AA). El blanco da 2.3:1 y solo
	   pasa en hover, cuando el fondo baja a coral-osc. */
	color: var(--ob-grafito);
}

.ob-product form.cart button.single_add_to_cart_button.button.alt:hover,
.ob-product form.cart button.single_add_to_cart_button.button.alt:focus {
	background-color: var(--ob-coral-osc);
	border-color: var(--ob-coral-osc);
	color: #fff;
}

/* Precio en grafito y Montserrat (numeros firmes y legibles). */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

/* Stock disponible en verde-confianza. Verde-osc (no verde) para que el
   texto sobre blanco pase contraste: #2EA88B daba 2.96:1, #17695A da 6.55:1. */
.woocommerce .stock.in-stock {
	color: var(--ob-verde-osc);
	font-weight: 600;
}

/* ============================================================
   Pulido general — vida, luz y efectos
   ============================================================ */

/* Tarjetas de producto: elevación al hover. */
.woocommerce ul.products li.product {
	background: #fff;
	border-radius: 14px;
	padding: 10px 10px 16px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(20, 69, 122, .13);
}
.woocommerce ul.products li.product img {
	border-radius: 10px;
	/* Foto completa y centrada en caja uniforme, sin crop (thumbnails ya sin
	   crop físico: woocommerce_thumbnail_cropping=uncropped + regenerate).
	   1/1: mismo ratio que el bloque woocommerce/product-image de
	   archive/categoría/home (ver comentario ahí) y que la foto principal de
	   la ficha — landing, categoría y ficha tienen que verse igual. Este
	   selector clásico ul.products li.product lo usan
	   patterns/landing-content.php y los relacionados de la ficha
	   ([ob_related_products] en functions.php). */
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: #fff;
}

/* Botones tipo pastilla con micro-animación. */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
	border-radius: 999px !important;
	transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 138, 91, .35);
}

/* ============================================================
   Featured products — woocommerce/product-collection grid.
   The front page uses the block (flex layout), NOT ul.products, so
   we style the block items to match the prototype's product card:
   white card, contained image, border-top body, azul price.
   ============================================================ */
.wp-block-woocommerce-product-template {
	gap: 18px;
}

.wp-block-woocommerce-product-template > li,
.wp-block-woocommerce-product-template .wc-block-product {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s var(--ob-ease), box-shadow .18s var(--ob-ease);
}

.wp-block-woocommerce-product-template > li:hover,
.wp-block-woocommerce-product-template .wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: var(--ob-shadow-lift);
}

/* Image "box": contained, padded, neutral — never edge-bleed/cropped. */
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image {
	padding: 14px 14px 0;
}

/* Photo-first (client call 2026-07-18: "la gente quiere ver fotos, no el
   nombre"): uniform box + contain = big uniform photos, no crop.
   GOTCHA (2026-07-19): el bloque woocommerce/product-image emite
   `object-fit`/`aspect-ratio` como estilo INLINE en el <img> (ver
   ProductImage.php render_image()) — un inline SIEMPRE gana sobre esta
   regla externa aunque no lleve !important. Antes el bloque no declaraba
   "scale" y WooCommerce cae al default `cover` → recortaba ~22% de cada
   foto pese a esta regla. Fix real: los 3 usos del bloque
   (front-page/archive-product/taxonomy-product_cat) ahora setean
   `"scale":"contain","aspectRatio":"1/1"` — el inline pasa a coincidir
   con esta hoja. object-fit acá queda de RESPALDO por si algún día se
   saca el atributo del bloque.

   1/1 desde 2026-07-30. Antes era 3/4 (0.75), elegido en su momento
   contra una distribución de catálogo de 0.69–0.91 con mediana ~0.74.
   Esa distribución YA NO ES LA REAL: medidos los 99 productos con foto
   del product-sitemap, ancho/alto va de 0.21 a 1.90 con mediana 0.92,
   así que 1/1 queda al doble de cerca de la mediana que 3/4
   (|1.00-0.92| = 0.08 contra |0.75-0.92| = 0.17). Con 3/4 el listado
   desperdiciaba una mediana de 32% de aire vertical por tarjeta en
   /tienda/ (máx 58%, 12 de 16 tarjetas sobre 20%); con 1/1 el producto
   mediano desperdicia ~8%. SI SE VUELVE A TOCAR ESTO, MEDIR DE NUEVO
   ANTES: el catálogo se mueve y este número se vence.
   (contain nunca recorta, sea cual sea el ratio de la caja.)
   No fijamos `height` a propósito: si hubiera un height explícito
   compitiendo con el aspect-ratio inline, el height gana (spec CSS) y el
   aspect-ratio queda ignorado — con width:100% + aspect-ratio el alto se
   calcula solo y la grilla queda igual de pareja, sin ese conflicto. */
.wp-block-woocommerce-product-template .wc-block-components-product-image img,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img {
	width: 100%;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 8px;
}

/* Body block sits under a hairline divider, like the prototype card. */
.wp-block-woocommerce-product-template .wp-block-post-title {
	margin: 12px 14px 4px;
	padding-top: 12px;
	border-top: 1px solid var(--ob-linea);
	color: var(--ob-grafito);
	/* Clamp to 2 lines so every card title occupies the same vertical space,
	   keeping the grid uniform regardless of product-name length. min-height
	   reserves the 2 lines even for short names. */
	min-height: 42px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* SKU chico bajo el título de cada tarjeta. Vive FUERA del h3 de arriba
   (sibling, inyectado por render_block en functions.php) para no competir
   por el line-clamp de 2 líneas con nombres de producto largos. */
.wp-block-woocommerce-product-template .ob-card-sku {
	display: block;
	margin: 0 14px 2px;
	text-align: center;
	/* Atenuado a propósito: es metadato para el comprador B2B de recompra;
	   para la compradora B2C primeriza es ruido entre título y precio.
	   No se borra (el B2B lo usa) — se demota. */
	font-size: 12px;
	color: var(--ob-gris);
	opacity: .8;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	margin: 0 14px;
	color: var(--ob-azul);
}

/* Add-to-cart pinned to the bottom so CTAs align across cards. */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button {
	margin: 10px 14px 14px;
	margin-top: auto;
}

/* ============================================================
   Landing
   ============================================================ */

/* Badge de exclusividad. */
.ob-badge {
	display: inline-block;
	background: var(--ob-coral);
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .2px;
	padding: 7px 16px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(255, 138, 91, .35);
}

/* Íconos SVG de línea (Lucide-style), en color de marca. */
.ob-icon {
	width: 42px;
	height: 42px;
	fill: none;
	stroke: var(--ob-azul);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ob-icon-coral { stroke: var(--ob-coral); }
.ob-icon-verde { stroke: var(--ob-verde); }

/* Tarjetas de la guía "¿qué andador necesitás?". */
.ob-guide .wp-block-column {
	background: #fff;
	border: 1px solid #e7ecf1;
	border-radius: 16px;
	padding: 26px 22px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ob-guide .wp-block-column:hover {
	transform: translateY(-5px);
	box-shadow: var(--ob-shadow-lift);
	border-color: var(--ob-verde);
}

/* Why-us circle icon: gentle lift + tint on card hover. */
.ob-guide .wp-block-column > .wp-block-group > div:first-child {
	transition: transform .18s var(--ob-ease), background-color .18s var(--ob-ease);
}

.ob-guide .wp-block-column:hover > .wp-block-group > div:first-child {
	transform: translateY(-2px);
	background: #e3edf6;
}

/* ============================================================
   Footer top-margin reset (block theme requirement)
   ============================================================ */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ============================================================
   Topbar
   The brand color presets (azul-osc / blanco) are NOT reliably
   emitted on the front end, so the has-*-background-color classes
   resolve to nothing. Drive the dark band + legible white text from
   the --ob-* hex tokens directly so it never depends on presets.
   ============================================================ */
.ob-topbar {
	background-color: var(--ob-azul-osc) !important;
	font-size: 13px;
	text-align: center;
	/* Kill the 20px vertical padding WordPress auto-adds to groups with a
	   background (.has-background). The promo is one line; the inline 7px on
	   the <p> is enough. Saves ~40px of header height. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.ob-topbar p {
	color: #dbe9f5;
	margin: 0;
}

.ob-topbar p strong {
	color: #fff;
}

/* ============================================================
   Sticky main header
   ============================================================ */
.ob-header-main {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: #fff !important;
	border-bottom: 1px solid #e1e8f0;
	/* Franja blanca compacta. El alto extra NO venia de aca: el wp-block-group
	   del header traia 20px de padding vertical (default del layout constrained).
	   Lo bajamos para que el hero suba. */
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

/* El wp-block-columns del header sumaba min-height 64 + 8px de padding +
   ~30px de margin-block. Lo apretamos a una barra fina que abraza el
   contenido (el logo, 48px, es lo mas alto). */
.ob-header-row {
	min-height: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Header is a single centered 3-part row.
   The core "columns" flex layout does NOT auto-grow a width-less
   middle column, so without this the search collapses and the row
   pins hard-left with a big empty gap. Force a clean grow/shrink. */
.ob-header-row {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	gap: 20px;
	flex-wrap: nowrap;
	min-height: 64px;
}

/* Tablet/mobile: let the search drop to its own full-width line so the
   brand + icons stay on one tidy row and nothing gets crushed. */
@media (max-width: 860px) {
	/* Brand (left) + icons (right) share one row; search drops to a full-width
	   line below. NOTE: core WP forces every column to flex-basis:100% !important
	   below 782px — the columns block carries .is-not-stacked-on-mobile to opt out
	   so these rules can govern the layout instead of stacking everything.
	   That opt-out class also makes core set `flex-wrap:nowrap !important`, so we
	   must both outrank it (0,3,0 > 0,2,0) AND match its !important to re-enable
	   wrap; otherwise the search never drops to its own line. */
	.ob-header-main .ob-header-row.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		row-gap: 10px;
		justify-content: space-between;
	}

	/* Search: force it onto its own row, last. Scoped under .ob-header-main to
	   outrank the base .ob-header-row column rule that sits later in the file. */
	.ob-header-main .ob-header-row > .wp-block-column:not([style*="0 0 auto"]) {
		flex: 0 0 100%;
		order: 3;
	}

	.ob-search {
		max-width: none;
	}
}

/* Left (brand) and right (icons) columns hug their content. */
.ob-header-row > .wp-block-column[style*="flex:0 0 auto"],
.ob-header-row > .wp-block-column[style*="flex: 0 0 auto"] {
	flex: 0 0 auto;
	width: auto;
}

/* Middle column (search) takes all remaining space. */
.ob-header-row > .wp-block-column:not([style*="0 0 auto"]) {
	flex: 1 1 auto;
	min-width: 0;
}

/* Brand: logo + title sit together, title in azul, never wrapping. */
.ob-header-row .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

.ob-header-row .wp-block-site-title a {
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 19px;
	line-height: 1;
	text-decoration: none;
}

/* Search bar inside header — cap its width so it doesn't sprawl,
   centered within the flexible middle column. */
.ob-search {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.ob-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	border: 2px solid #e1e8f0;
	border-radius: 10px;
	overflow: hidden;
}

.ob-search .wp-block-search__input {
	border: none;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	outline: none;
	flex: 1;
}

.ob-search .wp-block-search__button {
	background: var(--ob-azul);
	color: #fff;
	border: none;
	padding: 0 18px;
	cursor: pointer;
	font-size: 18px;
	border-radius: 0;
}

.ob-search .wp-block-search__button:hover {
	background: var(--ob-azul-osc);
}

/* Nav icons row — text links + woo account/cart icons, aligned. */
.ob-nav-icons {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--ob-azul);
	font-weight: 600;
	font-size: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The text nav links render as <li>; strip list chrome. */
.ob-nav-icons > .wp-block-navigation-item {
	margin: 0;
	list-style: none;
}

.ob-nav-icon-link,
.ob-nav-icons a {
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.ob-nav-icons a:hover {
	color: var(--ob-azul-osc);
}

/* WhatsApp del header: asesor a un click. Verde WhatsApp (no coral: el coral
   queda exclusivo de CTAs de compra/oferta). Pill con contorno que se rellena
   en hover; touch target >=44px para el público mayor. */
.ob-nav-icons a.ob-header-wa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid #0E7A3E;
	border-radius: 999px;
	color: #0E7A3E;
	background: transparent;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease;
}
.ob-nav-icons a.ob-header-wa:hover,
.ob-nav-icons a.ob-header-wa:focus-visible {
	background: #0E7A3E;
	color: #fff;
}
.ob-header-wa svg {
	flex: 0 0 auto;
}

/* "Visitanos" del header: el local físico es ancla de confianza (desde 1985,
   frente al Pirovano) — pill azul de marca junto al carrito. Mismo patrón que
   el pill de WhatsApp: contorno que se rellena en hover, touch >=44px. */
.ob-nav-icons a.ob-header-visit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--ob-azul);
	border-radius: 999px;
	color: var(--ob-azul);
	background: transparent;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease;
}

.ob-nav-icons a.ob-header-visit:hover,
.ob-nav-icons a.ob-header-visit:focus-visible {
	background: var(--ob-azul);
	color: #fff;
}

.ob-header-visit svg {
	flex: 0 0 auto;
}
/* En pantallas chicas el float global de WhatsApp ya cubre el canal:
   ocultamos el pill del header para no duplicar y ganar aire. */
@media (max-width: 860px) {
	.ob-nav-icons a.ob-header-wa,
	.ob-nav-icons a.ob-header-visit {
		display: none;
	}
}

/* WooCommerce account + mini-cart blocks: render as compact azul
   icon buttons that sit cleanly in the row (no preset dependency). */
.ob-nav-icons .wp-block-woocommerce-customer-account a,
.ob-nav-icons .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ob-azul);
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
}

.ob-nav-icons .wp-block-woocommerce-customer-account a:hover,
.ob-nav-icons .wc-block-mini-cart__button:hover {
	color: var(--ob-azul-osc);
}

.ob-nav-icons .wp-block-woocommerce-customer-account svg,
.ob-nav-icons .wc-block-mini-cart__icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ob-nav-icons .wc-block-mini-cart__amount {
	color: var(--ob-grafito);
	font-weight: 700;
}

/* Hide the search input's screen-reader label remnants from layout. */
.ob-search .wp-block-search__label.screen-reader-text {
	position: absolute;
}

/* ============================================================
   FiboSearch (AJAX product search) — brand skin.
   Replaces the old .ob-search (wp:search) bar in the header. Only the
   outer frame + focus state are themed; FiboSearch owns the internal
   layout (magnifier, preloader, live autocomplete panel), so we don't
   fight its positioning — just match the old bar's 560px cap, hairline
   border and 10px radius.
   ============================================================ */
.ob-search-fibo {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

/* The wp:shortcode output gets wrapped by wpautop in a stray <p>, which broke
   FiboSearch's flex row and inflated the field height. display:contents drops
   that phantom box so the input sits as a direct child again. */
.ob-search-fibo p {
	margin: 0;
	display: contents;
}

.ob-search-fibo .dgwt-wcas-search-wrapp {
	width: 100%;
	max-width: none;
}

.ob-search-fibo .dgwt-wcas-sf-wrapp {
	border: 2px solid #e1e8f0;
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s var(--ob-ease, ease);
}

.ob-search-fibo .dgwt-wcas-sf-wrapp:focus-within {
	border-color: var(--ob-azul);
}

.ob-search-fibo input.dgwt-wcas-search-input {
	height: 44px;
	/* 16px, no menos: bajo 16px iOS hace zoom al enfocar y no lo deshace
	   (zoom trap). Mismo fix que los selects de filtros del 2026-07-26 —
	   este input había quedado afuera de aquella pasada. */
	font-size: 16px;
	font-family: inherit;
	color: var(--ob-grafito);
}

/* ============================================================
   Category mega-menu (azul strip → dynamic dropdowns)
   Server-rendered by patterns/mega-menu.php from the live
   product_cat taxonomy. Desktop dropdowns are pure CSS
   (hover + :focus-within); JS only powers the mobile hamburger.
   ============================================================ */
.ob-cats-bar {
	background: var(--ob-azul);
	/* Same .has-background phantom padding as the topbar — the puertas' own
	   11px padding defines the bar height. Saves another ~40px. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.ob-mega {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

/* Hamburger is desktop-hidden; the bar shows the full horizontal list. */
.ob-mega-burger {
	display: none;
}

.ob-mega-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ob-mega-item {
	position: relative;
	list-style: none;
	margin: 0;
}

/* Top-level bar link / trigger. */
.ob-mega-top {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 12px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s var(--ob-ease);
}

.ob-mega-top:hover,
.ob-mega-item:focus-within > .ob-mega-top {
	color: #fff;
	background: var(--ob-azul-cl);
}

.ob-mega-caret {
	transition: transform .2s var(--ob-ease);
	opacity: .85;
}

.ob-mega-item.has-children.is-hover-open > .ob-mega-top .ob-mega-caret,
.ob-mega-item.has-children:focus-within > .ob-mega-top .ob-mega-caret {
	transform: rotate(180deg);
}

/* The per-item accordion button is mobile-only. */
.ob-mega-sub-toggle {
	display: none;
}

/* ---- Desktop mega-panel: absolute, no layout shift ---- */
.ob-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 260px;
	background: #fff;
	border-radius: 0 0 var(--ob-r) var(--ob-r);
	box-shadow: var(--ob-shadow-lift);
	padding: 14px 16px 12px;
	/* GPU-friendly reveal: opacity + transform only, never width/height. */
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s var(--ob-ease), transform .18s var(--ob-ease),
		visibility 0s linear .18s;
}

/* Wider, multi-column panel for categories with many subs (>4). */
.ob-mega-panel--cols {
	min-width: 460px;
}

.ob-mega-panel--cols .ob-mega-panel-list {
	columns: 2;
	column-gap: 22px;
}

/* ---- Grouped panel: several real categories side by side as columns ----
   Used when a puerta bundles more than one category (e.g. "Camas y colchones",
   "Sillas de ruedas" + Eléctricas). Each ".ob-mega-sect" is one column. */
.ob-mega-panel--grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 24px;
	min-width: 440px;
}

.ob-mega-panel--grid .ob-mega-sect {
	flex: 1 1 160px;
}

/* The "Ver todo" row spans the full width below the columns. */
.ob-mega-panel--grid .ob-mega-all {
	flex: 1 0 100%;
}

/* Column title = the real category the sub-links belong to (also a link). */
.ob-mega-sect-h {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ob-azul);
	padding: 6px 10px 3px;
	text-decoration: none;
}

.ob-mega-sect-h:hover,
.ob-mega-sect-h:focus-visible {
	color: var(--ob-azul-osc);
	text-decoration: underline;
}

/* Non-link column title ("Por tipo" / "Por material"): no link affordance. */
.ob-mega-sect-h--static,
.ob-mega-sect-h--static:hover {
	color: var(--ob-azul);
	text-decoration: none;
	cursor: default;
}

/* A puerta that only opens the panel (no single archive) is a <button>. */
.ob-mega-top--btn {
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Open on hover (via JS .is-hover-open, which adds a ~220ms close grace so the
   panel doesn't snap shut when an unsteady hand drifts) OR keyboard focus. */
.ob-mega-item.has-children.is-hover-open > .ob-mega-panel,
.ob-mega-item.has-children:focus-within > .ob-mega-panel {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: opacity .18s var(--ob-ease), transform .18s var(--ob-ease),
		visibility 0s linear 0s;
}

/* Keep panels near the right edge from spilling past it. The CTA is the last
   item (no panel); its preceding category siblings sit closest to the right
   edge, so right-align the last few items' panels instead of left-aligning. */
.ob-mega-item:nth-last-child(-n + 3) .ob-mega-panel {
	left: auto;
	right: 0;
}

.ob-mega-panel-list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}

.ob-mega-panel-list li {
	margin: 0;
	break-inside: avoid;
}

.ob-mega-sub {
	display: block;
	color: var(--ob-grafito);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	padding: 8px 10px;
	border-radius: 8px;
	transition: background-color .14s var(--ob-ease), color .14s var(--ob-ease);
}

.ob-mega-sub:hover,
.ob-mega-sub:focus-visible {
	background: var(--ob-soft);
	color: var(--ob-azul);
}

/* "Ver todo en {categoría} →" — azul, sits under a hairline divider. */
.ob-mega-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 9px 10px 3px;
	border-top: 1px solid var(--ob-linea);
	width: 100%;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.ob-mega-all svg {
	transition: transform .16s var(--ob-ease);
}

.ob-mega-all:hover,
.ob-mega-all:focus-visible {
	color: var(--ob-azul-osc);
}

.ob-mega-all:hover svg,
.ob-mega-all:focus-visible svg {
	transform: translateX(3px);
}

/* ---- Promo card: curated highlight at the right edge of a mega-panel ----
   Azul card + coral pill CTA (site button convention: grafito text on coral,
   AA). Whole card is ONE link (single tab stop); desktop only — the mobile
   accordion hides it to stay light. Panel min-width is computed inline per
   panel (columns * 180 + card) by mega-menu.php. */

/* Promo panels are wide: from the bar's middle onwards they'd spill past the
   right viewport edge on small desktops, so right-align them to their item
   (same trick as the nth-last-child(-n+3) rule above, wider net). The first
   two puertas (Sillas, Andadores) stay left-aligned. Cap to the viewport as
   a last resort: flex-wrap degrades gracefully instead of clipping.
   Width comes via --ob-promo-minw (set inline per panel by mega-menu.php);
   the mobile accordion resets it later in this file. */
.ob-mega-panel--promo {
	min-width: var(--ob-promo-minw, 440px);
	max-width: calc(100vw - 32px);
}

/* Con la barra en 5 puertas + CTA, alinear a la derecha desde la mitad de la
   barra (-n+6) capturaba TODAS las puertas y tiraba los paneles anchos fuera
   del borde IZQUIERDO (visto en prod el 2026-07-26 con "Camas y dormitorio").
   Base CSS: solo las últimas 3. El ajuste fino contra el viewport lo hace
   mega-menu.js (obClampPanel) al abrir. */
.ob-mega-item:nth-last-child(-n + 3) .ob-mega-panel--promo {
	left: auto;
	right: 0;
}

.ob-mega-promo {
	flex: 0 0 232px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	background: var(--ob-azul);
	border-radius: 12px;
	padding: 16px;
	margin: 4px 0 6px;
	text-decoration: none;
}

.ob-mega-promo-badge {
	background: var(--ob-verde-osc);
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 999px;
}

.ob-mega-promo-title {
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
}

.ob-mega-promo-copy {
	color: #dbe9f5;
	font-family: 'Open Sans', sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
}

.ob-mega-promo-img {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 8px;
	padding: 6px;
	box-sizing: border-box;
}

.ob-mega-promo-img img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: contain;
}

.ob-mega-promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 2px;
	background: var(--ob-coral);
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	padding: 12px 17px;
	border-radius: 999px;
	transition: background-color .16s var(--ob-ease), color .16s var(--ob-ease);
}

.ob-mega-promo:hover .ob-mega-promo-cta,
.ob-mega-promo:focus-visible .ob-mega-promo-cta {
	background: var(--ob-coral-osc);
	color: #fff;
}

/* ---- CTA item: the ONLY coral accent in the bar ---- */
.ob-mega-cta {
	color: var(--ob-coral);
	font-weight: 700;
	/* 15px + 700 pasa como "large text" (umbral 3:1) el contraste coral sobre
	   azul (4.19:1 real, pero a 13.5px no calificaba como large text). */
	font-size: 15px;
}

.ob-mega-cta svg {
	color: var(--ob-coral);
}

.ob-mega-cta:hover,
.ob-mega-item--cta:focus-within > .ob-mega-cta {
	background: rgba(255, 138, 91, .16);
	color: var(--ob-coral);
}

/* Visible focus ring on the azul bar (light, since the bar is dark). */
.ob-mega-top:focus-visible,
.ob-mega-burger:focus-visible,
.ob-mega-sub-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
	border-radius: 6px;
}

/* ============================================================
   Mega-menu — mobile (<=860px): hamburger + accordion
   ============================================================ */
@media (max-width: 860px) {
	.ob-mega {
		position: static;
		/* .ob-mega inherits `max-width:1200px; margin:0 auto` from the desktop
		   rule above — harmless while .ob-mega owned the whole row, but since
		   2026-07-29 it shares the row with .ob-catsbar-tel as a flex item
		   (`.ob-cats-bar > .ob-mega{flex:1 1 auto}` further down). Auto margins
		   on a flex item absorb the row's free space instead of letting
		   flex-grow/shrink size the item normally, which starves/pushes the
		   phone number sibling out past the viewport. Reset both so the flex
		   algorithm sizes .ob-mega off the real available width. */
		margin: 0;
		max-width: none;
	}

	.ob-mega-burger {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		/* Left-align, not centered: this dates from when the burger owned the
		   whole row alone. Now it shares the row with .ob-catsbar-tel, so
		   centering fights the phone number for space instead of just
		   presenting its own label — left-align keeps it compact and stops it
		   from pushing the tel block off-screen at 375-430px. */
		justify-content: flex-start;
		background: transparent;
		border: none;
		cursor: pointer;
		color: #fff;
		font-family: Montserrat, sans-serif;
		font-size: 14px;
		font-weight: 700;
		padding: 12px 16px;
	}

	.ob-mega-burger-bars {
		position: relative;
		width: 20px;
		height: 14px;
		flex-shrink: 0;
	}

	.ob-mega-burger-bars span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		border-radius: 2px;
		transition: transform .2s var(--ob-ease), opacity .2s var(--ob-ease);
	}

	.ob-mega-burger-bars span:nth-child(1) { top: 0; }
	.ob-mega-burger-bars span:nth-child(2) { top: 6px; }
	.ob-mega-burger-bars span:nth-child(3) { top: 12px; }

	/* Morph to an X when open. */
	.ob-mega.is-open .ob-mega-burger-bars span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.ob-mega.is-open .ob-mega-burger-bars span:nth-child(2) {
		opacity: 0;
	}
	.ob-mega.is-open .ob-mega-burger-bars span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Collapsed list: hidden until the hamburger opens it. */
	.ob-mega-list {
		display: none;
		flex-direction: column;
		flex-wrap: nowrap;
		background: var(--ob-azul-osc);
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ob-mega.is-open .ob-mega-list {
		display: flex;
	}

	.ob-mega-item {
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, .10);
	}

	/* Row: top link grows, the toggle button sits on the right. */
	.ob-mega-item.has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	/* flex-basis 0, no auto: con `auto` el basis hereda el `width: 100%` de
	   .ob-mega-top, y como el wrap se resuelve con el basis (antes de que el
	   shrink actúe), el toggle de 52px no entraba y caía a una segunda fila.
	   Eso duplicaba el alto de cada rubro (79px en vez de 50). */
	.ob-mega-item.has-children > .ob-mega-top {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		justify-content: space-between;
	}

	/* Hide the inline caret on mobile; the toggle button owns the affordance. */
	.ob-mega-item.has-children > .ob-mega-top .ob-mega-caret {
		display: none;
	}

	.ob-mega-top {
		width: 100%;
		padding: 14px 18px;
	}

	.ob-mega-sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 52px;
		background: transparent;
		border: none;
		border-left: 1px solid rgba(255, 255, 255, .10);
		color: #fff;
		cursor: pointer;
	}

	.ob-mega-sub-toggle svg {
		transition: transform .2s var(--ob-ease);
	}

	.ob-mega-item.is-expanded > .ob-mega-sub-toggle svg {
		transform: rotate(180deg);
	}

	/* Expanded category keeps its header row (title + chevron) pinned to the
	   top of the scrolling list, so the collapse control and the "where am I"
	   context never scroll out of sight inside a long sub-panel. Sticky is
	   bounded by the <li>, so the header pushes away naturally once the next
	   category reaches the top. Opaque background: the sub-panel scrolls
	   underneath it. */
	.ob-mega-item.is-expanded > .ob-mega-top,
	.ob-mega-item.is-expanded > .ob-mega-sub-toggle {
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--ob-azul-cl);
	}

	/* Reset desktop positioning — the panel becomes a stacked accordion body. */
	.ob-mega-panel {
		position: static;
		width: 100%;
		flex-basis: 100%;
		min-width: 0;
		opacity: 1;
		transform: none;
		visibility: hidden;
		pointer-events: none;
		box-shadow: none;
		border-radius: 0;
		background: rgba(255, 255, 255, .04);
		padding: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height .26s var(--ob-ease);
	}

	.ob-mega-panel--cols .ob-mega-panel-list {
		columns: 1;
	}

	/* Grouped panels stack as a plain accordion body on mobile. */
	.ob-mega-panel--grid {
		display: block;
		min-width: 0;
	}

	/* The promo card is desktop-only; the accordion stays light. The width
	   the desktop panel gets via --ob-promo-minw must NOT survive here: the
	   accordion body is full-width block flow. */
	.ob-mega-promo {
		display: none;
	}

	.ob-mega-panel--promo {
		min-width: 0;
		max-width: none;
	}

	.ob-mega-sect-h--static,
	.ob-mega-sect-h--static:hover {
		color: #9fe0d1;
	}

	.ob-mega-sect-h {
		padding: 12px 18px 4px;
		color: #9fe0d1;
	}

	.ob-mega-item.is-expanded > .ob-mega-panel {
		visibility: visible;
		pointer-events: auto;
		max-height: 1000px;
		padding: 6px 0 10px;
	}

	.ob-mega-sub {
		color: #dbe9f5;
		padding: 11px 28px;
		border-radius: 0;
	}

	.ob-mega-sub:hover,
	.ob-mega-sub:focus-visible {
		background: rgba(255, 255, 255, .08);
		color: #fff;
	}

	.ob-mega-all {
		margin: 4px 18px 4px;
		padding: 11px 10px 4px;
		width: auto;
		color: #9fe0d1;
		border-top-color: rgba(255, 255, 255, .12);
	}

	.ob-mega-all:hover,
	.ob-mega-all:focus-visible {
		color: #fff;
	}

	.ob-mega-cta:hover,
	.ob-mega-item--cta:focus-within > .ob-mega-cta {
		background: rgba(255, 138, 91, .20);
	}
}

/* Reduced motion: drop the panel/accordion easing. */
@media (prefers-reduced-motion: reduce) {
	.ob-mega-panel,
	.ob-mega-caret,
	.ob-mega-burger-bars span,
	.ob-mega-sub-toggle svg {
		transition: none;
	}
}

/* ============================================================
   Footer
   ============================================================ */
.ob-footer {
	font-size: 16px;
	/* Fondo azul de marca fijo: el texto del footer (titulos blancos, links
	   #aebccb) esta pensado para fondo oscuro. Lo forzamos aca en vez de
	   depender solo de la clase has-azul-background-color, para que el contraste
	   quede garantizado (WCAG AA) aunque el preset de color no cargue. */
	background: var(--ob-azul);
	/* Remate de marca: separa el footer del bloque claro de arriba. */
	border-top: 3px solid var(--ob-coral);
}

/* Títulos de columna como etiquetas: blanco puro, uppercase, con un
   pequeño acento. Sube la jerarquía sin tocar el HTML. */
.ob-footer h4 {
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	position: relative;
	padding-bottom: 8px;
}
.ob-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 2px;
	background: var(--ob-coral);
	border-radius: 2px;
}

.ob-footer-grid {
	align-items: flex-start;
}

.ob-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ob-footer-links li {
	margin-bottom: 8px;
}

.ob-footer-links a {
	color: #aebccb;
	text-decoration: none;
	display: block;
	transition: color .15s ease;
}

.ob-footer-links a:hover {
	color: #fff;
}

.ob-footer-cert {
	display: inline-block;
	background: #1a2733;
	border: 1px solid #33414f;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
	color: #cfe2f2;
	/* El chip de Datos fiscales es un <a> (link real a la constancia ARCA) —
	   los demás siguen siendo <span>; esta regla es un no-op para esos. */
	text-decoration: none;
}

a.ob-footer-cert:hover {
	border-color: var(--ob-coral);
	color: #fff;
}

/* Fila de links legales bajo el copyright: T&C, privacidad, defensa del
   consumidor. Texto chico pero >=14px (mínimo del sistema) y separadores
   decorativos aria-hidden para no ensuciar el lector de pantalla. */
.ob-footer-legal-links {
	text-align: center;
	font-size: 14px;
	color: #97a8ba;
	margin: 0 0 10px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ob-footer-legal-links a {
	color: #c3d0de;
	text-decoration: underline;
}

.ob-footer-legal-links a:hover {
	color: #fff;
}

.ob-footer-legal-links span[aria-hidden] {
	color: #5a7086;
}

.ob-pay-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--ob-grafito);
	border-radius: 6px;
	padding: 7px 10px;
	min-height: 30px;
	box-sizing: border-box;
}
.ob-pay-badge svg { display: block; }
.ob-pay-badge__txt {
	font-size: 12px;
	font-weight: 700;
	font-family: Montserrat, sans-serif;
	color: var(--ob-grafito);
}

.ob-footer-sep {
	border-color: #33414f !important;
	background-color: #33414f !important;
}

.ob-footer-legal {
	/* #7a8b9c daba 3.7:1 (falla AA). #97a8ba da ~4.8:1. */
	color: #97a8ba;
	font-size: 14px;
	text-align: center;
}

/* ============================================================
   WhatsApp floating button
   ============================================================ */
.ob-wa-float {
	position: fixed;
	bottom: 22px;
	right: 22px;
	background: #0E7A3E;
	color: #fff;
	border-radius: 50px;
	padding: 14px 20px;
	font-weight: 700;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
	z-index: 9999;
	display: flex;
	gap: 8px;
	align-items: center;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.ob-wa-float:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
	color: #fff;
}

.ob-wa-float svg {
	flex-shrink: 0;
}

/* On mobile, collapse to icon-only so it doesn't cover CTAs */
@media (max-width: 480px) {
	.ob-wa-float span {
		display: none;
	}

	.ob-wa-float {
		border-radius: 50%;
		padding: 14px;
	}
}

/* El FAB es fixed y queda flotando sobre el final de la página: sin este
   respiro, el círculo verde tapa "Todos los derechos reservados" al hacer
   scroll hasta el fondo en mobile. */
@media (max-width: 760px) {
	.ob-footer-legal {
		margin-bottom: 76px;
	}
}

/* El FAB (fixed, bottom:22/right:22, ~52px de alto) cae justo sobre la fila
   de medios de pago del footer en la columna "Contacto" (la última, más a la
   derecha) cuando las columnas están lado a lado — detectado en vivo a
   1280px tapando "Nave"/"Efectivo". Scope a >781px (breakpoint estándar de
   Gutenberg para que las wp:columns dejen de apilarse — ver el mismo valor
   en la guarda de .ob-product): en mobile las columnas se apilan y esta fila
   ya no queda pegada al borde inferior de la página. CSS-only, el FAB no se
   mueve. */
@media (min-width: 782px) {
	.ob-footer-pay {
		padding-bottom: 90px;
	}
}

/* ============================================================
   Accessibility / motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Missing-price fallback: show "Precio a consultar" when Woo price is empty */
.woocommerce div.product p.price:empty::after,
.woocommerce ul.products li.product .price:empty::after {
	content: "Precio a consultar";
	font-size: 16px;
	color: var(--ob-gris);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
}

/* ============================================================
   Trust bar (ob-child/trust-bar pattern)
   ============================================================ */

/* Negative top margin: "float" over the hero bottom edge */
.ob-trust-wrap {
	margin-top: -30px;
	position: relative;
	z-index: 5;
}

/* Vertical dividers between trust items */
.ob-trust-item--border {
	border-left: 1px solid #e1e8f0;
}

@media (max-width: 900px) {
	.ob-trust-wrap {
		margin-top: 0;
	}

	/* On mobile the columns stack; remove side borders */
	.ob-trust-item--border {
		border-left: none;
		border-top: 1px solid #e1e8f0;
	}
}

/* Mobile: 2×2 grid instead of a 4-tall stack — the visitor reaches the
   categories ~200px sooner. Overrides core's flex-basis:100% !important
   for stacked columns (same trick, later in the cascade). */
@media (max-width: 781px) {
	.ob-trust:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
		/* The layout-support container injects a 34px gap: 50% + 34px + 50%
		   never fits one row, so every card wrapped and grew to 100%. The
		   hairline borders already separate the cards. */
		gap: 0 !important;
	}

	/* Doubled class = higher specificity than core's stacked-columns rule
	   (which also carries !important and can load after this sheet).
	   min-width:0 lifts flexbox's min-width:auto floor — without it the
	   card's min-content width (~200px) exceeds the 50% basis and each
	   card still takes a full row. */
	.ob-trust:not(.is-not-stacked-on-mobile) > .ob-trust-item.ob-trust-item {
		flex-basis: 50% !important;
		min-width: 0;
	}

	.ob-trust-item--border {
		border-top: none;
	}

	.ob-trust-item:nth-child(n + 3) {
		border-top: 1px solid #e1e8f0;
	}

	/* Beats the blocks' inline padding:18px 20px (stylesheet !important
	   wins over non-important inline styles). */
	.ob-trust-item > .wp-block-group {
		padding: 14px 12px !important;
	}
}

/* Mobile: las franjas superiores a UNA idea por franja — la dirección vive
   en "Cómo llegar" (abre Maps) y los claims de envío/pago se repiten en las
   trust cards de abajo. Menos muro de avisos, hero más arriba. */
@media (max-width: 600px) {
	.ob-annobar-sub,
	.ob-topbar .ob-topbar-envios,
	.ob-topbar .ob-mp-claim {
		display: none;
	}
}

/* ============================================================
   Category tiles (ob-child/category-tiles pattern)
   ============================================================ */
.ob-tile {
	text-align: center;
	cursor: pointer;
	transition: transform .18s var(--ob-ease),
		box-shadow .18s var(--ob-ease), border-color .18s var(--ob-ease);
	position: relative;
}

.ob-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--ob-shadow-lift);
	border-color: var(--ob-verde) !important;
}

/* Icon nudges up with the card for a touch of kinetic life. */
.ob-tile svg {
	transition: transform .18s var(--ob-ease);
}

.ob-tile:hover svg {
	transform: translateY(-2px) scale(1.04);
}

/* Keyboard parity: lift the tile when its inner link is focused. */
.ob-tile:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--ob-shadow-lift);
	border-color: var(--ob-verde) !important;
}

/* ============================================================
   Configurator teaser (ob-child/configurator-teaser pattern)
   Split card editorial: foto real (izq) + arranque del cotizador
   en panel azul (der). Las opciones son links que arrastran ?uso=X.
   ============================================================ */
.ob-cfg2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--ob-shadow-lift);
	background: var(--ob-azul);
	isolation: isolate;
}

/* --- Media (foto + badge flotante) --- */
.ob-cfg2-media {
	position: relative;
	min-height: 420px;
}

/* Doble clase a propósito: en categorías el body lleva .woocommerce-page y el
   `.woocommerce-page img{height:auto}` de Kadence (que carga después) empataba
   en especificidad y ganaba — la foto quedaba con su alto natural y el resto
   de la columna era azul vacío. (0,2,1) le gana sin !important. */
.ob-cfg2 .ob-cfg2-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center; /* foco a la derecha: asesor + persona */
}

/* Velo inferior para que el badge se lea siempre */
.ob-cfg2-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(14, 52, 96, .82), rgba(14, 52, 96, 0));
	pointer-events: none;
}

.ob-cfg2-badge {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Check de confianza (reemplaza a las ★★★★★: las estrellas doradas se leían
   como puntaje de reseñas, y el sitio no publica ratings que no existen). */
.ob-cfg2-badge-ic {
	color: var(--ob-verde);
	line-height: 1;
	margin-bottom: 4px;
}

.ob-cfg2-badge-ic svg {
	width: 20px;
	height: 20px;
}

.ob-cfg2-badge b {
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 17px;
	line-height: 1.2;
}

.ob-cfg2-badge-sub {
	font-size: 13.5px;
	color: #dfeaf5;
}

/* --- Panel (arranque del cotizador) --- */
.ob-cfg2-panel {
	position: relative;
	padding: 40px;
	/* Profundidad: azul con brillo radial arriba-derecha, no plano */
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(46, 168, 139, .28) 0%, rgba(46, 168, 139, 0) 42%),
		linear-gradient(155deg, var(--ob-azul) 0%, var(--ob-azul-osc) 100%);
}

.ob-cfg2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #bff0e2;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.ob-cfg2-title {
	margin: 0 0 8px;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 29px;
	line-height: 1.15;
	letter-spacing: -.4px;
}

.ob-cfg2-sub {
	margin: 0 0 22px;
	color: #e6f0fa;
	font-size: 16px;
	line-height: 1.5;
}

/* Las 3 puertas de entrada — links tappables (≥44px, público mayor) */
.ob-cfg2-opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ob-cfg2-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .96);
	border: 2px solid transparent;
	text-decoration: none;
	color: var(--ob-azul-osc);
	transition: transform .16s var(--ob-ease), box-shadow .16s var(--ob-ease),
		border-color .16s var(--ob-ease);
}

.ob-cfg2-opt-ic {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
	line-height: 1;
}
.ob-cfg2-opt-ic svg {
	width: 24px;
	height: 24px;
	display: block;
}

.ob-cfg2-opt-tx {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	flex: 1 1 auto;
}

.ob-cfg2-opt-tx b {
	font-family: var(--wp--preset--font-family--heading, Montserrat, sans-serif);
	font-size: 16px;
}

.ob-cfg2-opt-tx small {
	color: var(--ob-gris);
	font-size: 13.5px;
	margin-top: 1px;
}

.ob-cfg2-opt-ar {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--ob-coral);
	transition: transform .18s var(--ob-ease);
}

.ob-cfg2-opt:hover {
	transform: translateY(-2px);
	border-color: var(--ob-coral);
	box-shadow: 0 10px 24px rgba(14, 52, 96, .28);
}

.ob-cfg2-opt:hover .ob-cfg2-opt-ar {
	transform: translateX(4px);
}

.ob-cfg2-opt:active {
	transform: translateY(0) scale(.99);
}

.ob-cfg2-all {
	display: inline-block;
	margin-top: 16px;
	color: #cfe6dd;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(207, 230, 221, .5);
}

.ob-cfg2-all:hover {
	color: #fff;
	text-decoration-color: #fff;
}

.ob-cfg2-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.ob-cfg2-trust span {
	color: #dfeaf5;
	font-size: 13.5px;
	font-weight: 600;
}

@media (max-width: 900px) {
	.ob-cfg2 {
		grid-template-columns: 1fr;
	}

	.ob-cfg2-media {
		min-height: 240px;
	}

	.ob-cfg2-panel {
		padding: 28px 22px 30px;
	}

	.ob-cfg2-title {
		font-size: 25px;
	}
}

/* ============================================================
   Size guide table (ob-child/size-guide pattern)
   ============================================================ */
.ob-talle-table table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	/* Floating "inner core" card: soft layered shadow instead of a flat table
	   pinned to the tray. Depth = premium. */
	box-shadow:
		0 1px 2px rgba(20, 69, 122, .05),
		0 14px 32px -12px rgba(20, 69, 122, .18);
}

.ob-talle-table th {
	background: var(--ob-azul);
	color: #fff;
	padding: 14px 16px;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	border: 0;
}

.ob-talle-table td {
	padding: 15px 16px;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #e1e8f0;
	color: var(--ob-gris);
}

.ob-talle-table tr:last-child td {
	border-bottom: 0;
}

.ob-talle-table td strong {
	font-family: Montserrat, sans-serif;
	color: var(--ob-azul);
}

/* Seat-width figure gets numeric emphasis: it is THE datum the buyer compares. */
.ob-talle-table .ob-talle-cm {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	color: var(--ob-azul);
	white-space: nowrap;
}

/* Highlighted "most common" row: soft green wash + accent edge so the default
   choice is obvious at a glance for the older buyer. */
.ob-talle-table .ob-talle-destacado td {
	background: #f0faf6;
}

.ob-talle-table .ob-talle-destacado td:first-child {
	box-shadow: inset 3px 0 0 var(--ob-verde);
}

.ob-talle-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px 3px;
	border-radius: 999px;
	background: var(--ob-verde);
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: 1px;
}

/* .ob-size-guide: bg + radius inline; premium depth added here. Soft diffused
   ambient shadow + a top inset highlight so the tray reads as a machined
   surface catching light, not a flat coloured box. */
.ob-size-guide {
	border-radius: 24px !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		0 2px 6px rgba(20, 69, 122, .04),
		0 24px 60px -22px rgba(20, 69, 122, .22);
}

/* Seat-width mini-diagram: turns a plain table block into something visual and
   didactic for older buyers. Same soft-depth language as the cards. */
.ob-seat-diagram {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: 20px 0 4px;
	padding: 15px 18px;
	background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 1px 2px rgba(20, 69, 122, .04),
		0 10px 24px -12px rgba(20, 69, 122, .14);
}

.ob-seat-diagram svg {
	flex: 0 0 auto;
	width: 88px;
	height: auto;
}

.ob-seat-diagram-cap {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ob-gris);
}

.ob-seat-diagram-cap strong {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	color: var(--ob-azul);
	margin-bottom: 2px;
}

@media (max-width: 900px) {
	.ob-size-guide .wp-block-columns {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.ob-talle-table th,
	.ob-talle-table td {
		padding: 12px 10px;
		font-size: 15px;
	}

	.ob-talle-chip {
		display: block;
		width: fit-content;
		margin: 4px 0 0;
	}
}

/* ============================================================
   Why-us (ob-child/why-us pattern)
   Uses .ob-guide from Landing section above for card hover.
   Additional rules only.
   ============================================================ */
@media (max-width: 900px) {
	.ob-guide.wp-block-columns {
		flex-wrap: wrap;
	}

	.ob-guide .wp-block-column {
		flex: 1 1 45%;
	}
}

/* ============================================================
   Reviews strip (ob-child/reviews-strip pattern)
   ============================================================ */
.ob-review {
	transition: transform .18s var(--ob-ease), box-shadow .18s var(--ob-ease);
}

.ob-review:hover {
	transform: translateY(-4px);
	box-shadow: var(--ob-shadow-lift);
}

/* Star row: slightly larger, with letter-spacing so it reads as a rating. */
.ob-review-stars {
	letter-spacing: 2px;
}

@media (max-width: 900px) {
	/* Reviews collapse to single column on mobile */
	.wp-block-columns:has(.ob-review) {
		flex-direction: column;
	}
}

/* ============================================================
   HERO — full-bleed image slider (patterns/hero.php)
   Ported from the prototype's hero, refined: tighter overlay
   falloff, calmer Ken-Burns drift, button-in-button CTA.
   ============================================================ */
.ob-hero {
	position: relative;
	height: 460px;
	overflow: hidden;
	background: var(--ob-azul-osc); /* base colour while images decode */
}

.ob-hero-track {
	position: absolute;
	inset: 0;
}

/* Slides cross-fade. First slide carries .is-active for the no-JS case. */
.ob-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.06);
	transition: opacity .9s var(--ob-ease);
}

.ob-hero-slide.is-active {
	opacity: 1;
	transform: scale(1);
	/* Slow Ken-Burns drift only while active; GPU-safe (transform/opacity). */
	transition: opacity .9s var(--ob-ease), transform 7s ease-out;
}

/* Azul gradient overlay — strongly opaque on the LEFT so the banner's
   own baked-in text disappears behind it and our copy reads crisp,
   while the banner art stays visible on the RIGHT. */
.ob-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(14, 52, 96, .97) 0%,
		rgba(14, 52, 96, .90) 42%,
		rgba(14, 52, 96, .45) 68%,
		rgba(14, 52, 96, 0) 100%);
}

.ob-hero-inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.ob-hero-box {
	position: relative;
	max-width: 560px;
	color: #fff;
	/* Subtle scrim so the H1/subhead always win over any baked-in
	   banner text that might peek through the gradient. */
	text-shadow: 0 1px 12px rgba(14, 52, 96, .55);
	/* Staggered entry — calm fade-up on load. */
	animation: ob-hero-rise .7s var(--ob-ease) both;
}

.ob-hero-eyebrow {
	color: #9fe0d1;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 10px;
}

.ob-hero-title {
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.12;
	letter-spacing: -.5px;
	margin: 0 0 12px;
	text-wrap: balance;
}

.ob-hero-sub {
	color: #dbe9f5;
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
	max-width: 480px;
}

.ob-hero-cta {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

/* Shared hero button system (.ob-btn) — pill, physical press feedback. */
.ob-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	padding: 13px 22px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--ob-ease),
		transform .12s var(--ob-ease), box-shadow .18s var(--ob-ease);
}

.ob-btn:active {
	transform: translateY(0) scale(.98);
}

.ob-btn--coral {
	background: var(--ob-coral);
	/* Grafito sobre coral = 5.6:1 (AA). Antes #fff daba 2.3:1. */
	color: var(--ob-grafito);
	box-shadow: var(--ob-shadow-coral);
}

.ob-btn--coral:hover {
	background: var(--ob-coral-osc);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(255, 138, 91, .40);
}

/* Círculo de la flecha: tinte oscuro en reposo (texto grafito), claro en hover. */
.ob-btn--coral .ob-btn-arrow {
	background: rgba(36, 50, 64, .16);
}
.ob-btn--coral:hover .ob-btn-arrow {
	background: rgba(255, 255, 255, .32);
}

/* Button-in-button trailing arrow — nested circle, kinetic on hover. */
.ob-btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	transition: transform .18s var(--ob-ease), background-color .18s var(--ob-ease);
}

.ob-btn--coral:hover .ob-btn-arrow {
	background: rgba(255, 255, 255, .32);
	transform: translateX(3px);
}

/* Secondary CTA — solid enough to read as a real button, never a
   faint "ghost" floating over the banner. Crisp text, defined border. */
.ob-btn--ghost {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .85);
	padding: 11px 22px;
	text-shadow: none;
	backdrop-filter: blur(2px);
}

.ob-btn--ghost:hover {
	background: rgba(255, 255, 255, .28);
	color: #fff;
	transform: translateY(-2px);
}

/* Keep CTA labels crisp — the box scrim must not soften button text. */
.ob-hero-cta .ob-btn {
	text-shadow: none;
}

/* Chip de confianza factual, anclado sobre la foto (derecha). Suma prueba
   social donde el ojo mira (las personas), sin depender de un rating. Se
   posiciona por encima de la tira de confianza y despejado del FAB de WhatsApp. */
.ob-hero-badge {
	position: absolute;
	right: 32px;
	bottom: 104px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 320px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .96);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(14, 52, 96, .30);
	animation: ob-hero-rise .9s var(--ob-ease) both;
	animation-delay: .25s;
}

.ob-hero-badge-ic {
	color: var(--ob-azul);
	flex-shrink: 0;
	display: flex;
}

.ob-hero-badge-t {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	color: var(--ob-azul);
	font-size: 15px;
	line-height: 1.2;
}

.ob-hero-badge-s {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: #5a6b7d;
	line-height: 1.25;
}

/* En mobile el hero pasa a wash inferior y centra el copy: el chip estorbaría. */
@media (max-width: 760px) {
	.ob-hero-badge {
		display: none;
	}
}

/* Dots / slide selectors. */
.ob-hero-dots {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	display: flex;
	/* El area tactil de cada dot es 44px (::before mas abajo). Con dots de
	   10px, el paso centro-a-centro minimo para no superponer areas es
	   44 - 10 = 34px (caso mas chico: dos dots inactivos adyacentes). */
	gap: 34px;
	justify-content: center;
	z-index: 3;
}

.ob-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 999px;
	/* Anillo azul sutil: los dots blancos se perdían sobre banners claros. */
	background: rgba(255, 255, 255, .70);
	box-shadow: 0 0 0 1px rgba(20, 69, 122, .40);
	cursor: pointer;
	transition: width .25s var(--ob-ease), background-color .25s var(--ob-ease);
}

.ob-hero-dot.is-active {
	background: var(--ob-coral);
	width: 26px;
}

@keyframes ob-hero-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	.ob-hero {
		height: 520px;
	}

	.ob-hero-title {
		font-size: 28px;
	}

	.ob-hero-sub {
		font-size: 16px;
	}

	/* On narrow screens, switch overlay to a bottom-up wash for legibility. */
	.ob-hero-overlay {
		background: linear-gradient(0deg,
			rgba(14, 52, 96, .96) 0%,
			rgba(14, 52, 96, .55) 55%,
			rgba(14, 52, 96, .25) 100%);
	}

	.ob-hero-inner {
		align-items: flex-end;
		padding-bottom: 56px;
	}

	/* Stack the hero CTAs full-width so older users get large, unambiguous
	   tap targets instead of two pills crammed onto one 375px row. */
	.ob-hero-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.ob-hero-cta .ob-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Reduced motion: no Ken-Burns, no entry animation, no auto-rotate drift. */
@media (prefers-reduced-motion: reduce) {
	.ob-hero-slide,
	.ob-hero-slide.is-active {
		transform: none;
		transition: opacity .3s linear;
	}

	.ob-hero-box {
		animation: none;
	}
}

/* ============================================================
   HERO "decisión" (.ob-hd) — patterns/hero.php
   ============================================================
   Reemplaza al slider de 4 banners de arriba (.ob-hero-*). Namespace NUEVO a
   propósito: el CSS del hero viejo son 44 reglas desparramadas por todo el
   archivo (2065-2385, 3360, 5937, 5968, 6027), así que reusar sus clases era
   pedir una colisión silenciosa. Con prefijo propio, revertir = tocar SOLO
   patterns/hero.php. El CSS viejo queda muerto pero inerte; se borra en un
   commit de limpieza aparte, una vez que este hero esté confirmado en vivo.

   Las 3 decisiones de diseño, todas medidas (ver prototipo-web/hero-variantes.html):

   1. CERO TEXTO SOBRE FOTO. El hero viejo ponía el h1 de 28px encima del banner:
      en un celular, al sol, para alguien de 50-75. Acá el texto vive en un panel
      blanco y la foto es una columna aparte — el contraste ya no depende de qué
      imagen toque ni de la hora del día. 10/10 checks pasan WCAG AA.

   2. LAS PUERTAS SUBEN AL HERO. Medido en producción: las 3 puertas de decisión
      arrancaban en y=2798px a 375x812, o sea 3,4 pantallas de scroll — y el 68%
      del tráfico real es celular. Acá entran en la primera pantalla.

   3. SIN SLIDER. 4 fotos = 4 candidatos a LCP en una home de 2,6 s, y hacía
      imposible verificar el contraste del CTA (la constitución lo lista como uno
      de los 3 puntos que solo se comprueban con ojos humanos). Una foto fija lo
      elimina como problema en vez de dejarlo abierto.

   Breakpoint 782px: es uno de los cuatro a los que apunta la Fase 6 del bases
   (600/782/1024/1200). NO agregar un 14º breakpoint acá. */
.ob-hd {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	min-height: 560px;
	background: #fff;
}

/* Dieta vertical desktop (2026-07-30): con las mini-puertas de camas/andadores
   el panel llegó a ~810px de alto y en una laptop 1366x768 (~210px de chrome
   arriba) el pliegue cortaba en la 3ra puerta — WhatsApp y mini-puertas
   enterrados, el mismo error que este hero arregló en mobile. Presupuesto
   objetivo: panel ≤ ~680px para que la píldora de WhatsApp cierre dentro de la
   primera pantalla. Todos los recortes de acá abajo son REDUCCIONES: al mobile
   (que hereda lo que su media query no pisa) solo le suman aire al pliegue. */
.ob-hd-txt {
	padding: 32px 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ob-hd-eyebrow {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ob-verde-osc);
	margin: 0 0 10px;
}

.ob-hd-title {
	font-family: Montserrat, sans-serif;
	/* Tope 38px (antes 42): a 3 líneas la diferencia son ~13px de pliegue y a
	   38px sigue siendo por lejos lo más grande de la pantalla. */
	font-size: clamp(29px, 3.2vw, 38px);
	line-height: 1.11;
	font-weight: 800;
	color: var(--ob-azul);
	letter-spacing: -.5px;
	margin: 0 0 12px;
	max-width: 16ch;
}

.ob-hd-sub {
	font-size: 17.5px;
	color: #3d4c5a;
	margin: 0 0 16px;
	/* 58ch: la frase completa (~58 caracteres) entra en UNA línea desde 1366px
	   de viewport — a 44ch wrapeaba a 2 y costaba ~26px de pliegue. */
	max-width: 58ch;
}

.ob-hd-q {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ob-gris);
	margin: 0 0 8px;
}

.ob-hd-doors {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Fila entera tocable: 60px de alto mínimo y ancho completo de la columna.
   Muy por encima de los 44px de WCAG 2.5.5, que es el punto — el usuario tipo
   tiene 50-75 años y está resolviendo esto desde el teléfono. */
.ob-hd-door {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 11px 16px;
	background: var(--ob-soft);
	border: 2px solid var(--ob-linea);
	border-radius: var(--ob-r);
	text-decoration: none;
	transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}

.ob-hd-door:hover,
.ob-hd-door:focus-visible {
	border-color: var(--ob-coral);
	background: #fff;
	transform: translateX(3px);
}

.ob-hd-door-tx {
	flex: 1;
}

.ob-hd-door-t {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.25;
	color: var(--ob-azul-osc);
}

.ob-hd-door-s {
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ob-gris);
	margin-top: 2px;
}

/* Chip circular coral SIEMPRE visible: el lenguaje de acción de las puertas
   vivía solo en el hover — que en celular no existe, y el 68% del tráfico es
   mobile. Coral = acción (las puertas SON acciones), grafito sobre coral en
   reposo (contrato de contraste 5,6:1). */
.ob-hd-door-ar {
	flex: none;
	box-sizing: content-box;
	padding: 5px;
	background: var(--ob-coral);
	border-radius: 50%;
	color: var(--ob-grafito);
	transition: transform .14s ease, background-color .14s ease, color .14s ease;
}

.ob-hd-door:hover .ob-hd-door-ar,
.ob-hd-door:focus-visible .ob-hd-door-ar {
	transform: translateX(3px);
	background: var(--ob-coral-osc);
	color: #fff;
}

/* Píldora y horario en UNA fila cuando el ancho da (flex-wrap): en desktop el
   horario al lado de la píldora ahorra ~28px de alto; a 375px no entra y
   wrapea solo a su propia línea, como estaba. */
.ob-hd-alt {
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 15px;
	color: #3d4c5a;
}

/* Píldora outline verde WhatsApp (mismo verde que .ob-cot-btn.wa): botón de
   verdad para el indeciso, subordinado a las puertas (outline, no relleno). */
.ob-hd-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 18px;
	border: 2px solid #0E7A3E;
	border-radius: 999px;
	color: #0E7A3E;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .14s ease, color .14s ease;
}

.ob-hd-wa:hover,
.ob-hd-wa:focus-visible {
	background: #0E7A3E;
	color: #fff;
}

/* Puertas a camas/andadores, como MINI-PUERTAS (2026-07-30, antes chips):
   son 2 de los 3 públicos y la ÚNICA entrada del hero a esas verticales —
   mismo lenguaje visual que las 3 puertas de sillas (reusan .ob-hd-door con
   el modificador --mini), compactas para no disputarles la jerarquía. */
.ob-hd-other {
	margin: 12px 0 0;
}

.ob-hd-other-q {
	display: block;
	font-size: 14px;
	color: var(--ob-gris);
	margin: 0 0 6px;
}

.ob-hd-other-doors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

.ob-hd-door--mini {
	min-height: 54px;
	padding: 10px 14px;
	gap: 10px;
}

.ob-hd-door--mini .ob-hd-door-t {
	font-size: 15px;
}

.ob-hd-door--mini .ob-hd-door-s {
	font-size: 12.5px;
}

/* Horario de respuesta del WhatsApp del hero (Fase 1 #5 de 00_BASES_UX:
   expectativa de respuesta junto al boton). Mismo dato publicado en /contacto/. */
.ob-hd-alt-hs {
	display: block;
	font-size: 13px;
	color: var(--ob-gris);
}

.ob-hd-media {
	position: relative;
	background: var(--ob-soft);
}

/* El <picture> va ABSOLUTO, fuera del flujo. La foto de asesoramiento es
   vertical (928x1152): en flujo, su altura intrínseca (~1080px a ancho de
   columna) definía la fila del grid y pisaba el min-height de 560px — el hero
   quedaba del doble de alto. Absoluta contra .ob-hd-media (ya relative), la
   altura la manda el panel de texto y object-fit:cover recorta la foto. */
.ob-hd-media picture {
	position: absolute;
	inset: 0;
}

/* <img> real (no background-image): el preload scanner la descubre solo, y
   width/height evitan el salto de layout (CLS) mientras baja. object-position
   Y=25%: con la celda ~1.55:1 y la foto vertical, cover recorta solo en
   vertical; 25% abre la ventana en la banda px 140-740 de la original —
   las dos caras con aire arriba, las manos y la rueda hasta el eje. */
.ob-hd-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.ob-hd-badge {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	display: flex;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, .96);
	border-radius: var(--ob-r);
	padding: 14px 16px;
	box-shadow: var(--ob-shadow-lift);
}

.ob-hd-badge svg {
	flex: none;
	stroke: var(--ob-azul);
}

.ob-hd-badge b {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	color: var(--ob-azul-osc);
}

.ob-hd-badge span span {
	font-size: 13.5px;
	color: var(--ob-gris);
}

@media (max-width: 782px) {
	.ob-hd {
		grid-template-columns: 1fr;
	}

	.ob-hd-txt {
		padding: 24px 22px 30px;
	}

	.ob-hd-title {
		font-size: 28px;
		letter-spacing: -.6px;
	}

	.ob-hd-sub {
		font-size: 16.5px;
		margin-bottom: 16px;
	}

	/* Franja de foto compacta y ARRIBA del texto. El presupuesto vertical acá es
	   real y está medido a 375x812: el h1 lleva "silla de ruedas" completo por
	   SEO y eso le cuesta una 4ta línea. La medición del 2026-07-26 (148px de
	   foto → 3ra puerta en y=800) quedó VIEJA: la annobar del 10% en efectivo
	   se agregó después y le comió ~40px al pliegue — la 3ra puerta volvió a
	   quedar decapitada. Recuperado el 2026-07-27: foto a 110px, padding del
	   panel a 24px arriba y puertas compactas (padding 11/14, min-height 56px)
	   en este media query → 3ra puerta cierra en y=801 sobre 812 CON annobar.
	   2026-07-29: ese número había derivado a y=860 (48px FUERA del pliegue) —
	   el eyebrow wrapeaba a 2 líneas y el chrome de arriba creció a 207px.
	   Rebalanceado: subtítulo oculto (−69px), eyebrow a 1 línea (−21px), foto
	   110→145px (+35px) → 3ra puerta cierra en y=797 sobre 812, 15px de aire
	   (medido en viewport real, no headless: el headless recorta de más a la
	   derecha y hace creer que hay overflow — scrollWidth es 375 = viewport).
	   Verificar ese número después de cualquier cambio acá. Medir antes de
	   tocar. */
	.ob-hd-media {
		/* height FIJA, no min-height: sin altura definida en el contenedor, el
		   height:100% del <img> resuelve por aspect-ratio (928x1152 -> ~466px a
		   375px de viewport) y la 3ra puerta cae bien abajo del pliegue.
		   object-fit:cover recorta el resto.
		   190px (antes 110): en 110px la franja no alcanzaba a mostrar la silla
		   — solo una banda ambigua de personas. Los 80px extra salen del
		   subtítulo (oculto acá), del eyebrow (1 línea) y de la barra de
		   categorías (menú y teléfono compartiendo fila), no del pliegue. */
		height: 190px;
		order: -1;
	}

	/* Encuadre mobile propio: la foto es vertical y el 16% de desktop muestra
	   la banda de las caras — la silla queda fuera y la franja no comunica el
	   producto. Este offset baja la ventana para que entren la cara de la
	   asesora, las manos y el arco de la rueda: calidez Y producto.
	   48% sobre 190px de franja = px originales 327-797: cara completa (nunca
	   cortar por los ojos) + la rueda con el aro de empuje. */
	.ob-hd-photo {
		/* En mobile la foto es un asset DEDICADO ya recortado
		   (bannerob_asesoramiento_local_mobile.webp, 750x400) servido por el
		   <picture> de hero.php: no se recorta por CSS, solo se centra. */
		object-position: 50% 50%;
	}

	/* 1 línea, no 2: a 13px con .12em de tracking el texto wrapea y cuesta
	   21px de pliegue. Bajar el tracking (no el cuerpo) es lo que lo hace
	   entrar sin castigar la legibilidad. */
	.ob-hd-eyebrow {
		font-size: 12px;
		letter-spacing: .05em;
		margin-bottom: 10px;
	}

	/* El subtítulo cae en mobile: repite lo que ya dicen el h1 y las tres
	   puertas ("contanos para quién es" = exactamente la pregunta ¿Cómo se va
	   a mover?). En desktop se queda: ahí el espacio vertical no compite. */
	.ob-hd-sub {
		display: none;
	}

	.ob-hd-door {
		min-height: 56px;
		padding: 11px 14px;
	}

	/* El badge se oculta en mobile, mismo criterio que el hero viejo: sobre una
	   franja de 170px tapaba casi toda la foto. La señal de "local físico" no se
	   pierde — la levanta la trust-bar que va inmediatamente debajo. */
	.ob-hd-badge {
		display: none;
	}

	/* Mini-puertas apiladas: a 375px dos columnas dejan ~150px por tarjeta y
	   el subtítulo wrapea ilegible. Este bloque vive DEBAJO del pliegue
	   (después del WhatsApp), así que apilar no toca la medición de la 3ra
	   puerta (y=797). */
	.ob-hd-other-doors {
		grid-template-columns: 1fr;
	}
}

/* Section heading helper */
.ob-sec-head {
	text-align: center;
}

/* ============================================================
   Especialistas band (ob-child/especialistas pattern)
   Full-bleed azul — mirrors configurator-teaser colour approach.
   ============================================================ */
.ob-especialistas {
	background-color: var(--ob-azul);
	color: #fff;
}

.ob-especialistas .wp-block-heading,
.ob-especialistas p {
	color: inherit;
}

/* Proof-points row: wrap gracefully on mobile */
.ob-esp-proofs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 24px;
	margin-bottom: 32px;
}

@media (max-width: 600px) {
	.ob-esp-proofs {
		flex-direction: column;
		align-items: flex-start;
		padding: 0 8px;
	}
}

/* ============================================================
   Lead magnet band (ob-child/lead-magnet pattern)
   Gris-claro background, centred, email form layout.
   ============================================================ */
.ob-lead-magnet {
	background-color: #F4F6F8;
}

.ob-lm-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.ob-lm-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	background: var(--ob-coral);
	/* grafito sobre coral en reposo = 5.6:1 (AA); blanco solo en hover sobre coral-osc. */
	color: var(--ob-grafito);
	border-radius: 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, transform .12s ease;
}

.ob-lm-submit:hover {
	background: var(--ob-coral-osc);
	color: #fff;
	transform: translateY(-2px);
}

/* ============================================================
   SVG line icons — 24×24 azul stroke (category tiles, why-us)
   Larger variant (44×44) used in tile icons is sized inline;
   this rule covers any .ob-icon usage at canonical 24px.
   ============================================================ */
.ob-tile svg,
.ob-guide svg {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

.ob-esp-proofs svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* ============================================================
   CATEGORY ARCHIVE / SHOP  (taxonomy-product_cat + archive-product)
   One template serves all 45 categories. Reuses --ob-* tokens only;
   coral stays exclusive to CTAs.
   ============================================================ */

/* ---- Breadcrumbs: subtle, constrained, never shouty ---- */
.ob-breadcrumbs-band {
	background: #fff;
	border-bottom: 1px solid var(--ob-linea);
}

.ob-breadcrumbs-band .wc-block-breadcrumbs,
.ob-breadcrumbs-band .woocommerce-breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
	font-size: 13px;
	color: var(--ob-gris);
	font-family: 'Open Sans', sans-serif;
}

.ob-breadcrumbs-band a {
	color: var(--ob-gris);
	text-decoration: none;
	transition: color .15s var(--ob-ease);
}

.ob-breadcrumbs-band a:hover {
	color: var(--ob-azul);
}

/* ---- Category hero band: light azul-tinted, NOT a giant image ---- */
.ob-cat-hero {
	/* Soft azul wash → gris-claro, so it reads lighter than the home hero. */
	background: linear-gradient(180deg, #eaf1f8 0%, var(--ob-soft) 100%);
	border-bottom: 1px solid var(--ob-linea);
	padding-top: 38px;
	padding-bottom: 34px;
}

.ob-cat-hero-title {
	margin: 0 0 10px;
	color: var(--ob-azul);
	letter-spacing: -.5px;
	text-wrap: balance;
}

.ob-cat-hero-desc {
	max-width: 720px;
	margin: 0;
	color: var(--ob-gris);
	font-size: 17px;
	line-height: 1.55;
}

/* ---- Category hero: trust chips + WhatsApp/cotizador CTA (dinámico) ---- */
.ob-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.ob-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ob-azul);
}

.ob-cat-chip svg {
	flex-shrink: 0;
	color: inherit;
}

.ob-cat-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.ob-cat-cta-lead {
	flex-basis: 100%;
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--ob-gris);
}

.ob-cat-cta-wa,
.ob-cat-cta-alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 46px;
	padding: 12px 26px;
	border-radius: 999px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: background-color .18s var(--ob-ease), color .18s var(--ob-ease), border-color .18s var(--ob-ease);
}

/* Mismo contrato de contraste que los botones coral del sitio (ver la regla
   de oro arriba): grafito sobre coral = 5.6:1 (WCAG AA). El blanco sobre
   coral da 2.3:1 y NO pasa. En hover el fondo se oscurece a coral-osc y
   recien ahi el texto vuelve a blanco (5.2:1). */
.ob-cat-cta-wa {
	background: var(--ob-coral);
	color: var(--ob-grafito);
	border: 2px solid var(--ob-coral);
}

.ob-cat-cta-wa:hover {
	background: var(--ob-coral-osc);
	border-color: var(--ob-coral-osc);
	color: #fff;
}

.ob-cat-cta-wa:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(20, 69, 122, .25);
}

.ob-cat-cta-alt {
	background: transparent;
	color: var(--ob-azul);
	border: 2px solid var(--ob-azul);
}

.ob-cat-cta-alt:hover {
	background: var(--ob-azul);
	color: #fff;
}

.ob-cat-cta-alt:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(20, 69, 122, .25);
}

@media (prefers-reduced-motion: reduce) {
	.ob-cat-cta-wa,
	.ob-cat-cta-alt {
		transition: none;
	}
}

@media (max-width: 760px) {
	.ob-cat-cta-wa,
	.ob-cat-cta-alt {
		width: 100%;
	}
}

/* ============================================================
   Dynamic subcategory tiles (patterns/category-subtiles.php)
   Same visual language as the home .ob-tile cards.
   ============================================================ */
.ob-subtiles-eyebrow {
	margin: 0 0 6px;
	color: var(--ob-verde-osc);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}

.ob-subtiles-title {
	margin: 0;
	text-align: center;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 26px;
}

.ob-subtiles-grid {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.ob-subtile {
	margin: 0;
	list-style: none;
}

.ob-subtile-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	text-align: center;
	background: var(--ob-soft);
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 22px 18px;
	text-decoration: none;
	transition: transform .18s var(--ob-ease),
		box-shadow .18s var(--ob-ease), border-color .18s var(--ob-ease);
}

.ob-subtile-link:hover,
.ob-subtile-link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--ob-shadow-lift);
	border-color: var(--ob-verde);
}

.ob-subtile-icon {
	display: inline-flex;
	transition: transform .18s var(--ob-ease);
}

.ob-subtile-link:hover .ob-subtile-icon,
.ob-subtile-link:focus-visible .ob-subtile-icon {
	transform: translateY(-2px) scale(1.04);
}

/* Variante con FOTO real del producto estrella de la categoría (reemplaza al
   ícono de carpeta genérico). Fondo tintado + mix-blend para que el blanco de
   la foto se funda con la tarjeta, como las tiles de la home. */
.ob-subtile-link.has-photo {
	background: #fff;
	padding: 14px 14px 18px;
}
.ob-subtile-photo {
	width: 100%;
	height: 130px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, var(--ob-gris-cl) 100%);
	border: 1px solid var(--ob-linea);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .18s var(--ob-ease);
}
.ob-subtile-photo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
	transition: transform .18s var(--ob-ease);
}
.ob-subtile-link.has-photo:hover .ob-subtile-photo,
.ob-subtile-link.has-photo:focus-visible .ob-subtile-photo {
	border-color: var(--ob-verde);
}
.ob-subtile-link.has-photo:hover .ob-subtile-photo img,
.ob-subtile-link.has-photo:focus-visible .ob-subtile-photo img {
	transform: scale(1.04);
}

.ob-subtile-name {
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.25;
}

.ob-subtile-count {
	color: var(--ob-gris);
	font-size: 12px;
	font-family: 'Open Sans', sans-serif;
}

/* ============================================================
   Shop toolbar (results count + catalog sorting)
   ============================================================ */
.ob-shop-toolbar {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ob-linea);
	gap: 14px;
}

.ob-shop-toolbar .woocommerce-result-count,
.ob-shop-toolbar .wc-block-product-results-count {
	margin: 0;
	color: var(--ob-gris);
	font-size: 14px;
}

.ob-shop-toolbar select,
.ob-shop-toolbar .orderby {
	border: 1px solid var(--ob-linea);
	border-radius: 10px;
	padding: 9px 14px;
	/* 16px: iOS hace zoom al enfocar controles con fuente menor a 16px
	   (mismo fix que el select de variación de la ficha). */
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color: var(--ob-grafito);
	background: #fff;
	cursor: pointer;
}

.ob-shop-toolbar select:focus-visible {
	outline: 3px solid var(--ob-azul-cl);
	outline-offset: 2px;
}

/* ============================================================
   Two-column body: sidebar (filters) + grid
   ============================================================ */
.ob-shop-cols {
	align-items: flex-start;
}

/* The product grid is the wide column; sidebar hugs its 260px width. */
.ob-shop-sidebar {
	flex-grow: 0 !important;
}

.ob-shop-main {
	flex-grow: 1;
	min-width: 0;
}

/* Sticky filters on desktop — long grids keep the filters in reach. */
.ob-filters {
	position: sticky;
	top: 84px; /* clears the sticky header */
	background: var(--ob-soft);
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 18px 18px 8px;
}

.ob-filters-head {
	margin: 0 0 14px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

.ob-filter-block {
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--ob-linea);
}

.ob-filter-block:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.ob-filter-block h3 {
	margin: 0 0 10px;
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

/* Modern Product Filters (WC 10): the inner filter blocks ship overlay-drawer
   widths that overflow our 260px inline sidebar (measured: 453px). Constrain
   everything to the column; the checkbox boxes lose the stray border too. */
.ob-filters .wc-block-product-filters,
.ob-filters .wc-block-product-filters * {
	max-width: 100%;
	box-sizing: border-box;
}

.ob-filters .wp-block-woocommerce-product-filter-status,
.ob-filters .wp-block-woocommerce-product-filter-attribute,
.ob-filters .wp-block-woocommerce-product-filter-taxonomy {
	width: 100%;
	border: none;
}

/* The floating "open filters" overlay button makes no sense inline. */
.ob-filters .wc-block-product-filters__open-overlay {
	display: none;
}

/* Price slider ships a fixed 453px track (min-width interno) and two 215px
   inputs meant for the overlay drawer: pin the track to the column and stack
   the min/max inputs full-width (finger-friendly for the older audience). */
.ob-filters .wc-block-product-filter-price-slider__range,
.ob-filters .wc-block-product-filter-price-slider__range .range-bar,
.ob-filters .wc-block-product-filter-price-slider__range input {
	width: 100% !important;
	min-width: 0;
}

.ob-filters .wc-block-product-filter-price-slider__content {
	display: block;
}

.ob-filters .wc-block-product-filter-price-slider__left,
.ob-filters .wc-block-product-filter-price-slider__right {
	width: 100%;
	margin-top: 8px;
}

.ob-filters .wc-block-product-filter-price-slider__left input,
.ob-filters .wc-block-product-filter-price-slider__right input {
	width: 100%;
}

/* WooCommerce filter internals: align checkboxes/labels to brand neutrals. */
.ob-filters label,
.ob-filters .wc-block-components-checkbox__label,
.ob-filters .wc-block-checkbox-list__label {
	color: var(--ob-grafito);
	/* Piso de legibilidad 15px para el público mayor (igual que la letra
	   chica del checkout); los labels no disparan zoom en iOS. */
	font-size: 15px;
	font-family: 'Open Sans', sans-serif;
}

.ob-filters .wc-block-components-price-slider__range-input-progress,
.ob-filters .wc-block-components-filter-reset-button,
.ob-filters a {
	color: var(--ob-azul);
}

/* Price slider + active accents pick up the brand azul (no new colours). */
.ob-filters .wc-block-components-price-slider__range-input::-webkit-slider-thumb,
.ob-filters .wc-block-components-price-slider__range-input::-moz-range-thumb {
	background: var(--ob-azul);
}

/* "Apply" / filter buttons stay azul (utility), NOT coral — coral is CTA-only. */
.ob-filters .wc-block-components-filter-submit-button,
.ob-filters button.wc-block-components-button:not(.ob-empty-cta button) {
	background: var(--ob-azul);
	border-color: var(--ob-azul);
}

.ob-filters .wc-block-components-filter-submit-button:hover {
	background: var(--ob-azul-osc);
	border-color: var(--ob-azul-osc);
}

/* "Limpiar filtros": ghost azul (utilitario), NUNCA coral — el coral es exclusivo
   del CTA de compra. Sin este override hereda el coral del botón por defecto y
   compite con "Agregar al carrito" en la misma vista. (Auditoría 2026-07-11.) */
.ob-filter-clear .wp-block-button__link {
	background: transparent !important;
	color: var(--ob-azul) !important;
	border: 2px solid var(--ob-azul) !important;
}
.ob-filter-clear .wp-block-button__link:hover,
.ob-filter-clear .wp-block-button__link:focus-visible {
	background: var(--ob-azul) !important;
	color: #fff !important;
}

/* CTA de WhatsApp del estado vacío de categoría: verde de marca como todo WhatsApp
   del sitio, no coral. */
.ob-empty-cta .wp-block-button__link {
	background: #0E7A3E !important;
	color: #fff !important;
	border-color: #0E7A3E !important;
}
.ob-empty-cta .wp-block-button__link:hover,
.ob-empty-cta .wp-block-button__link:focus-visible {
	background: #0A6533 !important;
	border-color: #0A6533 !important;
}

/* ---- Mobile filters toggle: hidden on desktop ---- */
.ob-filters-mobile {
	display: none;
}

.ob-filters-mobile-summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	background: #fff;
	border: 2px solid var(--ob-azul);
	border-radius: 10px;
	padding: 10px 18px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 16px;
}

.ob-filters-mobile-summary::-webkit-details-marker {
	display: none;
}

/* ============================================================
   Pagination
   ============================================================ */
.ob-shop-pagination {
	gap: 6px;
}

.ob-shop-pagination .wp-block-query-pagination-numbers,
.ob-shop-pagination .page-numbers {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.ob-shop-pagination a,
.ob-shop-pagination .page-numbers {
	/* Touch target ≥44px (WCAG 2.5.5): el público mayor necesita blanco de toque
	   cómodo también en la navegación del catálogo. (Auditoría 2026-07-11.) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 13px;
	border: 1px solid var(--ob-linea);
	border-radius: 9px;
	transition: background-color .14s var(--ob-ease), color .14s var(--ob-ease);
}

.ob-shop-pagination a:hover {
	background: var(--ob-soft);
	color: var(--ob-azul-osc);
}

.ob-shop-pagination .page-numbers.current {
	background: var(--ob-azul);
	color: #fff;
	border-color: var(--ob-azul);
}

/* ============================================================
   Empty state (no published products)
   The ONE coral CTA here is intentional (WhatsApp asesoramiento).
   ============================================================ */
.ob-shop-empty {
	background: var(--ob-soft);
	border: 1px dashed var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 48px 28px;
	margin-top: 8px;
}

.ob-shop-empty h2 {
	color: var(--ob-azul);
	margin: 0 0 8px;
}

/* ============================================================
   SEO content area under the grid
   ============================================================ */
.ob-cat-seo {
	background: #fff;
	border-top: 1px solid var(--ob-linea);
}

.ob-cat-seo h2 {
	color: var(--ob-azul);
	margin: 0 0 12px;
}

.ob-cat-seo p {
	line-height: 1.65;
	margin: 0;
}

/* ============================================================
   Category archive / shop — responsive (mobile-first reflow)
   ============================================================ */
@media (max-width: 860px) {
	/* Sidebar + grid stack into one column. */
	.ob-shop-cols {
		flex-direction: column;
	}

	.ob-shop-sidebar,
	.ob-shop-main {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Filters become an off-canvas-style collapsible panel via <details>. */
	.ob-filters-mobile {
		display: block;
	}

	/* Hide the sidebar until the mobile toggle is opened. */
	.ob-shop-sidebar {
		display: none;
	}

	.ob-filters-mobile[open] ~ .ob-shop-cols .ob-shop-sidebar {
		display: block;
		order: -1; /* filters appear above the grid when expanded */
	}

	/* Static positioning on mobile — sticky has no value in a stacked flow. */
	.ob-filters {
		position: static;
		top: auto;
	}
}

@media (max-width: 600px) {
	.ob-cat-hero {
		padding-top: 26px;
		padding-bottom: 24px;
	}

	.ob-cat-hero-title {
		font-size: 28px;
	}

	.ob-cat-hero-desc {
		font-size: 15px;
	}

	.ob-subtiles-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.ob-subtiles-title {
		font-size: 22px;
	}

	/* Two product cards per row on phones (the block grid shrinks columns). */
	.ob-shop-main .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   A — Testimonios: grilla ESTÁTICA  ·  ob-child/reviews-strip
   3 tarjetas quietas (sin auto-scroll). En desktop 3 columnas; en
   mobile se apilan. Las tarjetas conservan el hover de .ob-review.
   ============================================================ */
.ob-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	/* Aire para que la sombra de elevación al hover no se recorte. */
	padding: 8px 0;
	align-items: start;
}

@media (max-width: 900px) {
	.ob-reviews-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ============================================================
   C — Motion global: scroll-reveal  ·  assets/ob-motion.js
   Fade-up sutil al entrar en viewport. El JS solo marca .ob-reveal en
   secciones BAJO el fold (evita parpadeo y deja hero/trust intactos), y
   solo en la home. Si el JS no corre, nada se oculta: todo visible.
   ============================================================ */
.ob-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s var(--ob-ease), transform .6s var(--ob-ease);
	will-change: opacity, transform;
}

.ob-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ob-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ============================================================
   B — Carrusel de catálogo EN VIVO  ·  templates/front-page.html
   El bloque de destacados pasa a scroll horizontal con snap. Muestra
   productos reales de Woo; cuando no hay publicados/destacados aparece
   el fallback (.ob-shop-empty dentro de product-collection-no-results).
   El layout carrusel queda dormido hasta que haya productos publicados.
   ============================================================ */
.ob-live-carousel .wp-block-woocommerce-product-template {
	display: flex;
	flex-wrap: nowrap;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 8px 2px 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--ob-linea) transparent;
}

.ob-live-carousel .wp-block-woocommerce-product-template > li,
.ob-live-carousel .wp-block-woocommerce-product-template .wc-block-product {
	flex: 0 0 230px;
	max-width: 230px;
	scroll-snap-align: start;
}

/* Chip "para quién" (inyectado por render_block en functions.php): retoma el
   copy de las puertas del hero para que el grid continúe la narrativa guiada
   en vez de ser un catálogo pelado. Entre imagen y título. */
.ob-live-carousel .ob-card-door {
	display: block;
	margin: 8px 10px 0;
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--ob-azul);
}

.ob-live-carousel .wp-block-woocommerce-product-template::-webkit-scrollbar {
	height: 8px;
}

/* ============================================================
   Cierre pre-footer (patterns/closing-cta.php): peak-end de la home.
   Banda azul de contraste con la última invitación antes del footer.
   ============================================================ */
.ob-close {
	background: var(--ob-azul);
	padding: 44px 18px 40px;
	text-align: center;
	color: #fff;
}

.ob-close-in {
	max-width: 720px;
	margin: 0 auto;
}

.ob-close h2 {
	margin: 0 0 8px;
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1.25;
	color: #fff;
}

.ob-close-sub {
	margin: 0 0 22px;
	font-size: 17px;
	color: #dbe9f5;
}

.ob-close-btns {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ob-close-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	min-height: 44px;
	box-sizing: border-box;
	transition: transform .15s ease, background .15s ease;
}

.ob-close-btn-wa {
	background: var(--ob-coral);
	color: var(--ob-grafito);
	box-shadow: var(--ob-shadow-coral);
}

.ob-close-btn-wa:hover {
	transform: translateY(-2px);
}

.ob-close-btn-cot {
	border: 2px solid rgba(255, 255, 255, .65);
	color: #fff;
}

.ob-close-btn-cot:hover {
	background: rgba(255, 255, 255, .12);
}

.ob-close-hs {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: #dbe9f5;
}

@media (max-width: 600px) {
	.ob-close h2 {
		font-size: 22px;
	}

	.ob-close-btns {
		flex-direction: column;
		align-items: stretch;
	}
}

.ob-live-carousel .wp-block-woocommerce-product-template::-webkit-scrollbar-thumb {
	background: var(--ob-linea);
	border-radius: 999px;
}

@media (max-width: 600px) {
	.ob-live-carousel .wp-block-woocommerce-product-template > li,
	.ob-live-carousel .wp-block-woocommerce-product-template .wc-block-product {
		flex-basis: 180px;
		max-width: 180px;
	}
}

/* Scroll affordance: without a cue the cut-off last card reads as "broken"
   rather than "swipe to see more". A right-edge fade + an explicit hint make
   the horizontal scroll obvious. Fade colour matches the section bg (#F4F7FA);
   it clears the scrollbar track at the bottom. pointer-events:none so it never
   blocks a tap on the card underneath. */
.ob-live-carousel {
	position: relative;
}

/* Fade + hint only appear when the row ACTUALLY overflows. JS (front-page.html)
   toggles `.is-scrollable` by comparing scrollWidth vs clientWidth. Without this
   guard, a short featured list (or the empty-state skeleton) would show a fade
   dimming the last card and a "swipe" hint that does nothing. */
.ob-live-carousel.is-scrollable::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	bottom: 26px;
	width: 56px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(244, 247, 250, 0) 0%, rgb(244, 247, 250) 88%);
}

.ob-carousel-hint {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--ob-azul, #14457A);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14px;
	opacity: .8;
}

/* Show the hint only next to a carousel that overflows. */
.ob-live-carousel.is-scrollable ~ .ob-carousel-hint {
	display: flex;
}

.ob-carousel-hint span {
	font-size: 17px;
	line-height: 1;
}

/* ============================================================
   D — Confianza en números  ·  ob-child/why-us
   Datos REALES: 1985, cientos de clínicas, todo el país, garantía.
   ============================================================ */
.ob-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.ob-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	/* Premium depth: soft diffused shadow + top inset highlight + a whisper of a
	   gradient, instead of a flat white box with a hard grey border. Same
	   material language as the size-guide cards. */
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
	border: 1px solid rgba(20, 69, 122, .05);
	border-radius: 18px;
	padding: 28px 18px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 1px 2px rgba(20, 69, 122, .04),
		0 16px 34px -16px rgba(20, 69, 122, .16);
	transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1),
		box-shadow .28s cubic-bezier(0.32, 0.72, 0, 1);
}

.ob-stat:hover {
	transform: translateY(-5px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 2px 4px rgba(20, 69, 122, .05),
		0 26px 50px -18px rgba(20, 69, 122, .26);
}

.ob-stat-num {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.05;
	color: var(--ob-azul);
	letter-spacing: -.5px;
}

.ob-stat-num sup {
	font-size: .55em;
	color: var(--ob-gris);
}

/* Ítems que son FRASES, no números reales ("Todo el país", "Clínicas y geriátricos"):
   más chicos que un dato numérico para no leerse como una cifra. (Auditoría 2026-07-11.) */
.ob-stat-num--text {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
}

.ob-stat-lbl {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ob-gris);
}

.ob-stats-note {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--ob-gris);
}

@media (max-width: 700px) {
	.ob-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   F — (libre) El teaser del configurador ahora vive en .ob-cfg2
   (split card editorial) más arriba. Bloque conservado como ancla.
   ============================================================ */

/* ============================================================
   G — Hero: línea de confianza embebida bajo los CTAs
   ============================================================ */
.ob-hero-trust {
	margin: 18px 0 0;
	color: #cfe2f2;
	font-size: 13.5px;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	letter-spacing: .2px;
}

@media (max-width: 760px) {
	.ob-hero-trust {
		font-size: 12.5px;
	}
}

/* ============================================================
   E — Category tiles con MEDALLÓN de ícono  ·  ob-child/category-tiles
   Cada tile es un <a> (tarjeta entera clickeable). El ícono del manual va
   en un medallón de marca (gradiente + borde). Para fotos reales: swap del
   .ob-tile-medal por <img> dentro del mismo <a>.
   ============================================================ */
.ob-tiles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

a.ob-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	text-align: center;
	text-decoration: none;
	background: #f4f7fa;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 26px 22px;
}

.ob-tile-medal {
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(145deg, #eef3f7 0%, #ffffff 100%);
	border: 1px solid var(--ob-linea);
	box-shadow: inset 0 1px 0 #fff, var(--ob-shadow);
	transition: transform .18s var(--ob-ease), border-color .18s var(--ob-ease),
		background .18s var(--ob-ease);
}

.ob-tile:hover .ob-tile-medal,
.ob-tile:focus-visible .ob-tile-medal {
	transform: translateY(-2px) scale(1.05);
	border-color: var(--ob-verde);
	background: linear-gradient(145deg, #e3f1ec 0%, #ffffff 100%);
}

.ob-tile-medal svg {
	width: 34px;
	height: 34px;
}

/* Tile con FOTO real de producto (estilo Aspen). Foto sobre un "escenario"
   uniforme, object-fit contain para no deformar el producto. Las fotos son
   heterogéneas (cada producto ocupa una fracción distinta de su lienzo 300×300):
   el cap de tamaño de la <img> le da a TODOS el mismo aire, así la silla no
   llena borde a borde ni el bastón flota solo. La normalización real (fotos
   parejas por categoría) se hace cargando la imagen del term en el admin. */
.ob-tile-photo {
	width: 100%;
	height: 168px;
	margin-bottom: 12px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 12px;
	overflow: hidden;
	background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f4f7fa 100%);
	border: 1px solid var(--ob-linea);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .18s var(--ob-ease);
}

.ob-tile-photo img {
	/* Cap uniforme: todos los productos ocupan ~el mismo escenario, con aire
	   parejo. Iguala la escala visual de fotos dispares (silla vs bastón). */
	max-width: 82%;
	max-height: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}

.ob-tile--photo {
	padding-top: 14px;
}

.ob-tile:hover .ob-tile-photo {
	border-color: var(--ob-verde);
}

.ob-tile-title {
	margin: 4px 0 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--ob-grafito);
	line-height: 1.2;
}

.ob-tile-desc {
	margin: 0;
	font-size: 13px;
	color: var(--ob-gris);
	line-height: 1.4;
}

/* CTA tile (Encontrá tu silla): acento coral — es una acción, no una categoría. */
.ob-tile--cta {
	border-color: rgba(255, 138, 91, .5);
	background: linear-gradient(180deg, #ffffff 0%, #fff5f0 100%);
}

.ob-tile--cta .ob-tile-medal {
	background: linear-gradient(145deg, #ffe9df 0%, #ffffff 100%);
	border-color: rgba(255, 138, 91, .45);
}

.ob-tile--cta:hover .ob-tile-medal {
	border-color: var(--ob-coral);
	background: linear-gradient(145deg, #ffe0d2 0%, #ffffff 100%);
}

@media (max-width: 860px) {
	.ob-tiles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {
	.ob-tiles-grid {
		gap: 12px;
	}

	a.ob-tile {
		padding: 20px 14px;
	}
}

/* ============================================================
   Footer — bloque de contacto con links clickeables (tel/WA/mail)
   sobre fondo oscuro: color claro para buen contraste.
   ============================================================ */
.ob-footer-contact a {
	color: #cfe2f2;
	text-decoration: none;
	transition: color .15s ease;
}

.ob-footer-contact a:hover {
	color: #fff;
}

/* Link "Cómo llegar" del footer (mapa). Touch target >=44px. */
.ob-footer-map {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	min-height: 44px;
	padding: 9px 15px;
	border: 1px solid #3a5c85;
	border-radius: 999px;
	color: #cfe2f2;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ob-footer-map:hover {
	background-color: #3a5c85;
	border-color: #3a5c85;
	color: #fff;
}

/* ============================================================
   Página CONTACTO (page-contacto.html): datos + mapa embebido
   ============================================================ */
.ob-contacto-grid {
	align-items: stretch;
}

.ob-contacto-card {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	padding: 28px;
	height: 100%;
	box-shadow: 0 8px 24px rgba(20, 69, 122, .06);
}

.ob-contacto-card__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--ob-azul);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 18px;
}

.ob-contacto-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ob-contacto-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ob-contacto-ico {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--ob-soft);
	color: var(--ob-azul);
}

.ob-contacto-list li > div {
	font-size: 16px;
	color: var(--ob-gris);
	line-height: 1.5;
}

.ob-contacto-list strong {
	display: block;
	color: var(--ob-azul);
	font-size: 15px;
	margin-bottom: 2px;
}

.ob-contacto-list a {
	color: var(--ob-azul-cl);
	text-decoration: none;
}

.ob-contacto-list a:hover {
	text-decoration: underline;
}

.ob-contacto-mini {
	display: inline-block;
	margin-top: 4px;
	font-weight: 700;
	color: var(--ob-verde-osc) !important;
}

.ob-contacto-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
	min-height: 52px;
	padding: 14px 20px;
	border-radius: 999px;
	background: #0E7A3E;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	transition: filter .15s ease;
}

.ob-contacto-wa:hover {
	filter: brightness(.94);
	color: #fff;
}

.ob-contacto-map {
	height: 100%;
	min-height: 380px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--ob-linea);
	box-shadow: 0 8px 24px rgba(20, 69, 122, .06);
}

.ob-contacto-map iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
	display: block;
}

@media (max-width: 781px) {
	.ob-contacto-map,
	.ob-contacto-map iframe {
		min-height: 300px;
	}
}

/* ============================================================
   Página PREGUNTAS FRECUENTES (page-preguntas-frecuentes.html):
   acordeón nativo <details>/<summary>. Sin JS. Público adulto mayor:
   pregunta 17px, target de toque alto, chevron que rota, acento coral
   al abrir. La respuesta se anima con grid-rows en navegadores que lo
   soportan; en el resto abre/cierra instantáneo (degradación limpia).
   ============================================================ */
/* Fondo suave de sección: menos clínico que el blanco puro. */
.ob-faq-wrap {
	background: linear-gradient(180deg, #eef4f9 0%, #ffffff 220px);
}

.ob-faq {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Habilita animar height:auto en el despliegue (navegadores modernos). */
	interpolate-size: allow-keywords;
}

.ob-faq__item {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 18px;
	box-shadow: var(--ob-shadow);
	overflow: hidden;
	transition: box-shadow .22s var(--ob-ease), border-color .22s var(--ob-ease), transform .22s var(--ob-ease);
}

.ob-faq__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--ob-shadow-lift);
}

/* Estado abierto: cálido — fondo tintado suave + sombra elevada. */
.ob-faq__item[open] {
	border-color: transparent;
	box-shadow: var(--ob-shadow-lift);
	background: linear-gradient(180deg, #fff 0%, var(--ob-soft) 100%);
}

.ob-faq__q {
	display: flex;
	align-items: center;
	gap: 14px;
	/* Target de toque generoso (>=60px de alto) para dedos mayores. */
	padding: 20px 22px;
	min-height: 60px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: var(--ob-azul);
	list-style: none;
	user-select: none;
	transition: background-color .18s var(--ob-ease);
}

/* Badge "?" con degradé: le pone color y calidez, rompe lo clínico. */
.ob-faq__q::before {
	content: "?";
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ob-verde) 0%, var(--ob-azul-cl) 100%);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	box-shadow: 0 3px 8px rgba(46, 168, 139, .28);
	transition: transform .22s var(--ob-ease);
}

.ob-faq__item[open] .ob-faq__q::before { transform: scale(1.1) rotate(-6deg); }

/* La pregunta ocupa el espacio; el chevron queda a la derecha. */
.ob-faq__q > span:not(.ob-faq__chev) { flex: 1 1 auto; }

.ob-faq__q:hover { background: rgba(20, 69, 122, .03); }

/* Oculta el triángulo nativo del <summary> en todos los motores. */
.ob-faq__q::-webkit-details-marker { display: none; }
.ob-faq__q::marker { content: ""; }

.ob-faq__chev {
	flex: 0 0 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
	transition: transform .28s var(--ob-ease), background-color .18s var(--ob-ease), color .18s var(--ob-ease);
}

.ob-faq__item[open] .ob-faq__chev {
	transform: rotate(180deg);
	background: var(--ob-coral);
	color: var(--ob-grafito);
}

/* Animación de despliegue: anima la altura real del contenido. Patrón moderno
   (::details-content + interpolate-size). Degrada a instantáneo donde no está. */
.ob-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size .3s var(--ob-ease), content-visibility .3s var(--ob-ease);
	transition-behavior: allow-discrete;
}

.ob-faq__item[open]::details-content {
	block-size: auto;
}

.ob-faq__a {
	padding: 0 22px 20px;
}

.ob-faq__a p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ob-gris);
}

.ob-faq__a p:last-child { margin-bottom: 0; }

.ob-faq__list {
	margin: 0 0 12px;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ob-faq__list li {
	font-size: 16px;
	line-height: 1.55;
	color: var(--ob-gris);
}

.ob-faq__list strong { color: var(--ob-grafito); }

.ob-faq__note {
	font-size: 15px !important;
	color: var(--ob-gris) !important;
	background: var(--ob-soft);
	border-left: 3px solid var(--ob-linea);
	padding: 12px 14px;
	border-radius: 8px;
}

.ob-faq__q:focus-visible {
	outline: 3px solid var(--ob-azul-cl);
	outline-offset: -3px;
}

/* Cierre: tarjeta de contacto por WhatsApp al pie del FAQ. */
.ob-faq-cta {
	margin-top: 34px;
	text-align: center;
	background: linear-gradient(180deg, #eaf1f8 0%, var(--ob-soft) 100%);
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 34px 24px;
}

.ob-faq-cta__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--ob-azul);
	font-size: 22px;
	margin: 0 0 8px;
}

.ob-faq-cta__text {
	font-size: 16px;
	color: var(--ob-gris);
	margin: 0 0 20px;
}

.ob-faq-cta__wa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #0E7A3E;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	padding: 14px 26px;
	border-radius: 999px;
	min-height: 52px;
	box-sizing: border-box;
	transition: filter .18s var(--ob-ease);
}

.ob-faq-cta__wa:hover { filter: brightness(.94); color: #fff; }

@media (max-width: 781px) {
	.ob-faq__q { font-size: 16px; padding: 18px 18px; }
	.ob-faq__a { padding: 0 18px 18px; }
}

/* ============================================================
   Páginas LEGALES/INFORMATIVAS de prosa (T&C, Privacidad, Envíos y
   devoluciones, Cómo elegir): mismo hero que Contacto/FAQ + tipografía de
   lectura larga (17px, interlineado generoso). Comparten la clase
   .ob-legal para no repetir estilos en 4 templates distintos.
   ============================================================ */
.ob-legal h2 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--ob-azul);
	font-size: 22px;
	margin: 34px 0 12px;
}

.ob-legal > .wp-block-group > h2:first-child,
.ob-legal > .wp-block-group > *:first-child + h2 {
	margin-top: 0;
}

.ob-legal p,
.ob-legal li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ob-gris);
}

.ob-legal ul {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 12px;
}

.ob-legal strong {
	color: var(--ob-grafito);
}

.ob-legal a {
	color: var(--ob-azul-cl);
	font-weight: 600;
}

.ob-legal a:hover {
	text-decoration: underline;
}

/* ============================================================
   Botón de arrepentimiento (page-boton-de-arrepentimiento.html):
   tarjeta con el formulario + constancia (id + fecha) al enviar.
   ============================================================ */
.ob-arrep-card {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 18px;
	box-shadow: var(--ob-shadow);
	padding: 30px 28px;
}

.ob-arrep-note {
	font-size: 15px !important;
	color: var(--ob-gris) !important;
	background: var(--ob-soft);
	border-left: 3px solid var(--ob-linea);
	padding: 12px 14px;
	border-radius: 8px;
	margin: 0 0 22px;
}

.ob-arrep-field {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ob-arrep-field label {
	font-weight: 700;
	font-size: 15px;
	color: var(--ob-grafito);
}

.ob-arrep-field input,
.ob-arrep-field textarea {
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	border: 2px solid var(--ob-linea);
	border-radius: 10px;
	background: #fff;
	color: var(--ob-grafito);
	resize: vertical;
}

.ob-arrep-field input:focus,
.ob-arrep-field textarea:focus {
	outline: none;
	border-color: var(--ob-azul);
	box-shadow: 0 0 0 3px rgba(20, 69, 122, .15);
}

/* Honeypot: presente en el DOM pero invisible y fuera del tab (no
   display:none, para que el bot lo complete y lo delatemos). */
.ob-arrep-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Botón coral: grafito en reposo (5.6:1 AA), blanco solo en hover sobre
   coral-osc — mismo contrato de contraste que el resto del sitio. */
.ob-arrep-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	background: var(--ob-coral);
	color: var(--ob-grafito);
	border: none;
	border-radius: 999px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.ob-arrep-submit:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}

.ob-arrep-submit:disabled {
	opacity: .7;
	cursor: default;
}

.ob-arrep-msg {
	font-size: 14px;
	margin-top: 10px;
	min-height: 1em;
}

.ob-arrep-msg.err {
	color: #D63638;
	font-weight: 600;
}

.ob-arrep-ok {
	background: linear-gradient(180deg, #fff 0%, var(--ob-soft) 100%);
	border: 1px solid var(--ob-linea);
	border-radius: 18px;
	box-shadow: var(--ob-shadow-lift);
	padding: 30px 28px;
}

.ob-arrep-ok h2 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--ob-verde-osc);
	font-size: 22px;
	margin: 0 0 12px;
}

.ob-arrep-ok p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ob-gris);
	margin: 0 0 10px;
}

.ob-arrep-ok p:last-child {
	margin-bottom: 0;
}

.ob-arrep-alt {
	text-align: center;
	font-size: 15px !important;
	margin: 20px 0 0 !important;
}

@media (max-width: 600px) {
	.ob-arrep-card,
	.ob-arrep-ok {
		padding: 24px 20px;
	}
}

/* ============================================================
   Cómo elegir (page-como-elegir.html): 3 tarjetas puente hacia cotizador /
   WhatsApp / local. Reusa el patrón visual de tarjeta del FAQ/Contacto.
   ============================================================ */
.ob-elegir-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ob-elegir-card {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 18px;
	box-shadow: var(--ob-shadow);
	padding: 28px 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ob-elegir-ic {
	font-size: 34px;
	margin-bottom: 10px;
}

.ob-elegir-card h2 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--ob-azul);
	font-size: 19px;
	margin: 0 0 10px;
}

.ob-elegir-card p {
	font-size: 15px !important;
	line-height: 1.6;
	color: var(--ob-gris);
	margin: 0 0 20px;
	flex: 1;
}

.ob-elegir-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	width: 100%;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--ob-coral);
	color: var(--ob-grafito);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.ob-elegir-btn:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}

.ob-elegir-btn.wa {
	background: #0E7A3E;
	color: #fff;
}

.ob-elegir-btn.wa:hover {
	background: #0A6533;
	color: #fff;
}

.ob-elegir-btn.ghost {
	background: #fff;
	color: var(--ob-azul);
	border: 2px solid var(--ob-linea);
}

.ob-elegir-btn.ghost:hover {
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
}

@media (max-width: 781px) {
	.ob-elegir-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Página NOSOTROS — banda historia + local (nosotros-historia.php):
   PRUEBA visual del "local físico de verdad". Grid 2col → 1col mobile.
   ============================================================ */
.ob-historia-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}

.ob-historia-photo {
	border-radius: var(--ob-r);
	overflow: hidden;
	box-shadow: var(--ob-shadow-lift);
	aspect-ratio: 4 / 3;
}

.ob-historia-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ob-historia-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ob-verde-osc);
	margin: 0 0 8px;
}

.ob-historia-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.15;
	color: var(--ob-azul);
	margin: 0 0 16px;
}

.ob-historia-tx p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ob-gris);
	margin: 0 0 14px;
}

.ob-historia-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 22px;
}

.ob-historia-chips span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-grafito);
	background: var(--ob-soft);
	border: 1px solid var(--ob-linea);
	padding: 8px 14px;
	border-radius: 999px;
}

.ob-historia-chips span svg { color: var(--ob-azul); flex: 0 0 18px; }

.ob-historia-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--ob-azul);
	text-decoration: none;
	border-bottom: 2px solid var(--ob-coral);
	padding-bottom: 2px;
	transition: color .18s var(--ob-ease);
}

.ob-historia-cta:hover { color: var(--ob-coral-osc); }

@media (max-width: 781px) {
	.ob-historia-grid { grid-template-columns: 1fr; gap: 26px; }
	.ob-historia-title { font-size: 25px; }
}

/* ============================================================
   Logo de marca (kit oficial) — header (color) + footer (negativo)
   ============================================================ */
.ob-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.ob-logo-mark {
	width: 48px;
	height: 48px;
	flex: none;
	display: block;
}

.ob-logo-words {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.ob-logo-nm {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 21px;
	color: var(--ob-azul);
	line-height: 1;
}

.ob-logo-bg {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 20px;
	/* verde-osc (no verde) para pasar contraste como texto sobre blanco (ver comentario linea 140). */
	color: var(--ob-verde-osc);
	letter-spacing: 3px;
	line-height: 1.1;
}

.ob-footer-logo {
	display: inline-flex;
	margin-bottom: 12px;
	line-height: 0;
}

.ob-footer-logo img {
	height: 50px;
	width: auto;
	display: block;
}

@media (max-width: 600px) {
	.ob-logo-mark {
		width: 42px;
		height: 42px;
	}

	.ob-logo-nm,
	.ob-logo-bg {
		font-size: 18px;
	}
}

/* ============================================================
   Destacados vacíos → skeleton loaders (efecto "cargando" pro)
   En vez de texto pelado, tarjetas fantasma con shimmer. Cuando
   se publiquen productos, el bloque se llena solo.
   ============================================================ */
.ob-featured-empty {
	padding: 4px 0;
}

.ob-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.ob-skel-card {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 14px;
}

.ob-skel {
	background: linear-gradient(90deg, #eef3f7 25%, #f6fafd 50%, #eef3f7 75%);
	background-size: 200% 100%;
	border-radius: 8px;
	animation: ob-shimmer 1.5s ease-in-out infinite;
}

.ob-skel-img {
	height: 150px;
	margin-bottom: 14px;
}

.ob-skel-line {
	height: 12px;
	margin: 9px 0;
}

.ob-skel-line.sm {
	width: 55%;
}

.ob-skel-btn {
	height: 34px;
	margin-top: 14px;
	border-radius: 999px;
}

.ob-featured-empty-note {
	margin: 22px auto 0;
	max-width: 640px;
	text-align: center;
	font-size: 14px;
	color: var(--ob-gris);
}

.ob-featured-empty-note a {
	color: var(--ob-azul);
	font-weight: 700;
	text-decoration: none;
}

@keyframes ob-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ob-skel {
		animation: none;
	}
}

@media (max-width: 600px) {
	.ob-skeleton-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Página Nosotros — intro (la banda Especialistas se movió acá)
   ============================================================ */
.ob-page-hero {
	background: linear-gradient(180deg, #eaf1f8 0%, var(--ob-soft) 100%);
	border-bottom: 1px solid var(--ob-linea);
}

.ob-page-hero h1 {
	color: var(--ob-azul);
	letter-spacing: -.5px;
	text-wrap: balance;
}

/* ============================================================
   Landing hero (page-andadores y futuras landings): clase propia
   ob-lp-hero — NO reusar .ob-hero (esa es el slider de la home y
   fuerza height:460px + clip). Gradiente azul + texto blanco.
   ============================================================ */
.ob-lp-hero {
	background: linear-gradient(135deg, var(--ob-azul) 0%, var(--ob-azul-osc) 100%);
}

.ob-lp-hero .wp-block-heading,
.ob-lp-hero p {
	color: #fff !important;
}

/* Tira "Sobre nosotros" en la home (reemplaza la banda azul grande) */
.ob-about-strip {
	background: var(--ob-azul);
}

.ob-about-strip-inner {
	gap: 8px 20px;
	text-align: center;
}

.ob-about-strip p {
	margin: 0;
	color: #dbe9f5;
	font-size: 15px;
}

.ob-about-link {
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s var(--ob-ease);
}

.ob-about-link:hover {
	color: #9fe0d1;
}

/* ============================================================
   Ficha de producto (single-product) — cuotas + tira de confianza
   ============================================================ */

/* Código de producto (SKU), bajo el título. Seleccionable a propósito: la
   idea es que el comprador lo copie/dicte fácil por WhatsApp o teléfono. */
.ob-product-sku {
	margin: 4px 0 0;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	color: var(--ob-gris);
	user-select: text;
}

.ob-product-sku-value {
	font-weight: 700;
	color: var(--ob-grafito);
}

.ob-ficha-cuotas {
	display: inline-block;
	margin: 10px 0 16px;
	background: #E1F5EE;
	color: var(--ob-verde-osc);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 6px 14px;
	border-radius: 20px;
}

.ob-ficha-trust {
	list-style: none;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--ob-linea);
	display: grid;
	gap: 12px;
}

.ob-ficha-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ob-grafito);
}

/* Ícono en caja: mismo lenguaje visual que la trust-bar de la home, para que las
   dos páginas más vistas se lean como un solo sistema. (Auditoría 2026-07-11.) */
.ob-ficha-trust-ic {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #EEF3F7;
	color: var(--ob-azul);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* .ob-icon trae 42px por defecto; en esta caja de 34px lo achicamos. */
.ob-ficha-trust-ic .ob-icon {
	width: 20px;
	height: 20px;
}

.ob-ficha-trust small {
	color: var(--ob-gris);
}

/* Claims de pago online — condicionados al flag de pasarela (clase en el
   body, seteada por functions.php cuando NO hay pasarela cobrando; hoy la
   pasarela es Nave). Nunca prometer un medio de pago que todavía no cobra. */
body.ob-mp-off .ob-mp-claim {
	display: none;
}

/* Ficha sin precio: la pill de cuotas no tiene sentido sin un monto. */
body.ob-no-price .ob-ficha-cuotas {
	display: none;
}

/* Franja de specs de la ficha: los 2-4 datos que deciden la compra, escaneables
   (soporta N kg / ancho de asiento / peso / material). Antes vivían enterrados
   al final de la prosa de la descripción. Grid de 2 columnas: en mobile entran
   dos por fila sin achicar la tipografía, que para este público no es opción. */
/* wpautop mete un <p> intermedio en el shortcode → display:contents lo anula
   (mismo patrón ya usado por .ob-ficha-pdf-wrap). */
.ob-specs-wrap > p { display: contents; }

.ob-specs {
	list-style: none;
	margin: 16px 0 4px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.ob-specs-it {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #f4f7fa;
	border: 1px solid #e3eaf2;
	border-radius: 12px;
	min-height: 44px;
}

.ob-specs-ic {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #e3eaf2;
	color: var(--ob-azul);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ob-specs-tx {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.ob-specs-lb {
	font-size: 13px;
	color: var(--ob-gris);
}

/* El VALOR es lo que se escanea: grande y en color de marca. */
.ob-specs-vl {
	font-family: Montserrat, sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: var(--ob-azul);
	overflow-wrap: anywhere;
}

/* Pantallas muy angostas (≤380px): una sola columna antes de que el valor
   empiece a partirse en dos líneas. */
@media (max-width: 380px) {
	.ob-specs {
		grid-template-columns: 1fr;
	}
}

/* Medios de pago (ficha): tarjetas aceptadas bajo el add-to-cart. Badges en
   CSS puro — sin imágenes externas ni SVG de marca. El bloque entero lleva
   ob-mp-claim: sin pasarela online cobrando (body.ob-mp-off) no se muestra. */
.ob-pago {
	margin: 14px 0 4px;
	background: #f4f7fa;
	border: 1px solid #e3eaf2;
	border-radius: 12px;
	padding: 14px 16px;
}

.ob-pago-label {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--ob-azul);
}

.ob-pago-cards {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
}

.ob-pago-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 30px;
	padding: 0 9px;
	background: #fff;
	border: 1px solid #dfe6ee;
	border-radius: 6px;
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
}

.ob-pago-visa {
	color: #1a1f71;
	font-style: italic;
	letter-spacing: .5px;
}

.ob-pago-mc-a,
.ob-pago-mc-b {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
}

.ob-pago-mc-a {
	background: #eb001b;
}

.ob-pago-mc-b {
	background: #f79e1b;
	margin-left: -7px;
	mix-blend-mode: multiply;
}

.ob-pago-amex {
	background: #2e77bc;
	border-color: #2e77bc;
	color: #fff;
	letter-spacing: .5px;
}

.ob-pago-cabal {
	color: #005caa;
}

.ob-pago-naranja {
	/* #C63D00, no el #fe5000 de marca: blanco sobre #fe5000 a 11px/700 da
	   3.3:1 y falla AA (11px bold no es "texto grande"). El tono oscurecido
	   da ~5.1:1 y sigue leyéndose Naranja. Detectado 2026-07-29. */
	background: #C63D00;
	border-color: #C63D00;
	color: #fff;
	font-weight: 700;
}

.ob-pago-mp {
	color: #009ee3;
}

.ob-pago-modo {
	background: #00d5b8;
	border-color: #00d5b8;
	color: #0b3a33;
	letter-spacing: .5px;
}

.ob-pago-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ob-gris);
}

/* Doble precio: efectivo en el local — LÍNEA informativa, sin caja ni color
   de oferta (rediseño 2026-07-29, decisión "gana comprar online"): la caja
   coral con el monto en 26px era el elemento más gritón de la buy-box y le
   ganaba al CTA — señalizaba la opción que no escala. El monto sigue vivo
   (lo calcula ob-ficha.js sobre .ob-cash/[data-cash-amount]) pero en el
   cuerpo de texto, en grafito: informa, no compite. */
.ob-cash {
	margin: 12px 0 0;
}

.ob-cash-line-tx {
	margin: 0;
	font-size: 15px;
	color: var(--ob-gris);
	line-height: 1.5;
}

.ob-cash-line-amount {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	color: var(--ob-grafito);
	white-space: nowrap;
}

.ob-cash-link {
	color: var(--ob-azul);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ob-cash-link:hover {
	color: var(--ob-azul-osc);
}

/* Línea de respaldo — la tranquilización PEGADA al CTA (garantía, factura,
   ANMAT, devolución). Antes estos claims vivían a 3 pantallas del botón. */
.ob-respaldo {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 12px 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--ob-gris);
	line-height: 1.5;
}

.ob-respaldo li {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Separador tipográfico entre claims (no antes del primero). */
.ob-respaldo li + li::before {
	content: "·";
	color: var(--ob-linea, #E1E8F0);
	font-weight: 700;
}

.ob-respaldo a {
	color: var(--ob-azul);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ob-respaldo a:hover {
	color: var(--ob-azul-osc);
}

/* WhatsApp consult — link secundario bajo el CTA (rediseño 2026-07-29: era un
   botón verde de 74px que competía con el add-to-cart; el asesoramiento es
   una puerta abierta, no un segundo CTA). Verde WhatsApp solo en el ícono y
   el texto — sin fondo. min-height 44px = piso táctil. */
.ob-ficha-wa {
	margin: 10px 0 4px;
}

.ob-ficha-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: #0E7A3E;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: color .15s var(--ob-ease, ease);
}

.ob-ficha-wa-btn span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ob-ficha-wa-btn:hover {
	color: #0A6533;
}

.ob-ficha-wa-btn svg {
	flex: 0 0 auto;
}

/* Estimador de envío por CP (patrón icomsalud.ar): el costo se conoce en la
   ficha, antes del carrito. Público mayor: input de 16px (además evita el
   auto-zoom de iOS) y controles de 44px de alto (piso táctil — 44 y no 48:
   ningún control secundario debe superar la altura del CTA de compra, brief
   2026-07-29). Azul de marca, no coral — es un ayudante, no compite.
   Vive a ANCHO COMPLETO en .ob-ficha-abajo (rediseño 2026-07-29): dentro del
   buy-box era el bloque más alto de la columna y quedaba DESPUÉS del botón.
   El max-width evita un input de 1200px: la tarjeta mide lo que un form. */
.ob-envio {
	margin: 0 0 4px;
	max-width: 640px;
	background: #f7fafd;
	border: 1px solid rgba(20, 69, 122, .18);
	border-radius: 12px;
	padding: 12px 14px;
}

/* El título ES el <label> del input (compactado 2026-07-31: antes había un
   segundo renglón "¿A dónde lo enviamos?…" que lo duplicaba). */
.ob-envio-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	cursor: pointer;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--ob-azul);
}

.ob-envio-head .ob-icon {
	flex: 0 0 auto;
	stroke: var(--ob-azul);
}

.ob-envio-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Input angosto a propósito: es un dato de 4 dígitos — a ancho completo
   (medía ~430px) leía como un form roto. Prefijo .ob-product: el CSS de
   formularios de Kadence (carga después) pisa el max-width con menos que
   0-3-0 de especificidad. */
.ob-product .ob-envio .ob-envio-input {
	flex: 1 1 120px;
	max-width: 200px;
	min-width: 0;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 16px;
	color: var(--ob-azul);
	background: #fff;
	border: 1px solid rgba(20, 69, 122, .35);
	border-radius: 10px;
}

.ob-envio-input:focus {
	outline: 2px solid var(--ob-azul);
	outline-offset: 1px;
}

.ob-envio-btn {
	flex: 0 0 auto;
	min-height: 44px;
	min-width: 44px;
	padding: 10px 20px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	background: var(--ob-azul);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s var(--ob-ease, ease);
}

.ob-envio-btn:hover {
	background: var(--ob-azul-osc, #0d3560);
}

.ob-envio-btn:disabled {
	opacity: .6;
	cursor: default;
}

/* El resultado vive en un nodo aria-live SIEMPRE presente (vacío hasta que se
   calcula): ocultarlo con display:none rompería el anuncio del lector de
   pantalla. Vacío no ocupa alto porque el margen va solo cuando tiene texto. */
.ob-envio-result {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ob-gris);
}

.ob-envio-result:not(:empty) {
	margin-top: 10px;
}

.ob-envio-result.is-free {
	color: var(--ob-verde-osc);
	font-weight: 600;
}

.ob-envio-result.is-error {
	color: #b3261e;
}

/* Sin cobertura (hoy: Tierra del Fuego): tiene que distinguirse de una
   cotización normal — es el estado que deriva al asesor humano. */
.ob-envio-result.is-warn {
	color: #92400e;
	font-weight: 600;
}

.ob-envio-result a {
	color: var(--ob-azul);
	font-weight: 700;
}

.ob-envio-help {
	/* min-height 44px + flex: target aislado, no aplica la excepción de
	   target inline de WCAG 2.5.5 — medía 143×22. Vive DENTRO de
	   .ob-envio-row, empujado a la derecha; en mobile envuelve a su
	   propia línea (flex-wrap de la fila). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: auto;
	font-size: 14px;
	color: var(--ob-gris);
	text-decoration: underline;
}

/* Medios de pago a ancho completo (rediseño 2026-07-29): mismo ancho de
   tarjeta que el estimador para que la franja de ayudantes lea como una
   familia, no como bloques sueltos. */
.ob-ficha-abajo .ob-pago {
	max-width: 640px;
	margin: 0 0 4px;
}

/* ============================================================
   Franja de ayudantes en 2 columnas (desktop) — 2026-07-30
   ============================================================
   Medido en producción antes de este cambio, sobre la ficha de la cama a
   1920x1080: los ayudantes ocupaban 585px apilados de a uno, o sea MÁS que
   la zona de compra entera (630px), y con tres anchos distintos —
   estimador 640 a la izquierda, "todavía no estás seguro" y confianza a
   1200, y medios de pago 640 CENTRADO. Toda la mitad derecha quedaba
   vacía desde que terminaba el buy-box hasta la descripción. La página
   arrancaba en dos columnas y se convertía en una cinta de una sola.

   El centrado de medios de pago no era una decisión: es que el WP
   constrained layout mete `margin-left/right: auto !important` en cada
   HIJO DIRECTO (`.is-layout-constrained > :where(...)`, especificidad
   0-1-0). El estimador se salvaba de casualidad por estar envuelto en un
   wp:group; .ob-pago sale de un wp:html y queda suelto, así que se lo
   comía la regla. Por eso acá hay que pisar los márgenes con !important y
   con especificidad 0-2-0 (el prefijo .ob-product), o el grid no manda.

   Esto NO contradice el rediseño del 2026-07-29 (ver cabecera de
   templates/single-product.html): los ayudantes SIGUEN fuera del buy-box y
   debajo de la zona de compra. Lo único que cambia es que dejan de ser
   cinco filas de a una. Reparto 2026-07-31: el estimador cruza arriba como
   franja de una línea; decidir y medios de pago van lado a lado abajo; la
   tira de confianza cruza al final porque es una tira, no una tarjeta. */
@media (min-width: 861px) {
	.ob-product .ob-ficha-abajo {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
		align-items: start;
	}

	.ob-product .ob-ficha-abajo > * {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* El estimador cruza arriba como franja de UNA línea (título = label,
	   input angosto, botón, ayuda a la derecha): compactado 2026-07-31 —
	   como tarjeta alta en la columna 1 medía 253px para un dato de 4
	   dígitos y era el bloque más pesado de la franja. */
	.ob-product .ob-ficha-abajo .ob-envio-wrap {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.ob-product .ob-ficha-abajo .ob-envio {
		max-width: none;
		margin-bottom: 0;
		padding: 10px 16px;
	}

	.ob-product .ob-ficha-abajo .ob-envio-form {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.ob-product .ob-ficha-abajo .ob-envio-head {
		margin: 0;
		flex: 0 0 auto;
	}

	.ob-product .ob-ficha-abajo .ob-envio-row {
		flex: 1 1 auto;
	}

	.ob-product .ob-ficha-abajo .ob-ficha-decidir {
		grid-column: 1;
		grid-row: 2;
	}

	.ob-product .ob-ficha-abajo .ob-pago {
		grid-column: 2;
		grid-row: 2;
		max-width: none;
		margin: 0;
	}

	.ob-product .ob-ficha-abajo .ob-ficha-trust {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* ============================================================
   Barra de compra sticky (includes/barra-compra.php) — Fase 3
   ============================================================
   Fija abajo, visible solo cuando el form real está fuera de pantalla
   (clase .is-on la pone assets/ob-barra-compra.js). Coral únicamente en
   el botón (es EL CTA), texto grafito en reposo y blanco en hover — regla
   Grafito-on-Coral del sistema. z-index debajo del FAB de WhatsApp, que
   se levanta con body.ob-barra-on para no quedar tapado. */
.ob-barra-compra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px max(14px, calc((100% - 1200px) / 2)) calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--ob-linea);
	box-shadow: 0 -8px 24px rgba(20, 69, 122, .10);
	transform: translateY(110%);
	transition: transform .25s var(--ob-ease, ease);
}

.ob-barra-compra.is-on {
	transform: none;
}

.ob-barra-compra-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ob-barra-compra-nombre {
	font-size: 13px;
	color: var(--ob-gris);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ob-barra-compra-precio {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: var(--ob-azul);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ob-barra-compra-btn {
	margin-left: auto;
	flex: 0 0 auto;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--ob-coral);
	color: #243240;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	box-shadow: var(--ob-shadow-coral);
	transition: background .15s var(--ob-ease, ease), color .15s var(--ob-ease, ease);
}

.ob-barra-compra-btn:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}

.ob-barra-compra-btn:focus-visible {
	outline: 3px solid var(--ob-azul-cl);
	outline-offset: 2px;
}

/* El FAB de WhatsApp sube por encima de la barra mientras esté visible
   (la barra mide ~68px + safe-area). */
body.ob-barra-on .ob-wa-float {
	bottom: calc(84px + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
	.ob-barra-compra {
		transition: none;
	}
}

/* Título de relacionados (query propia [ob_related_products]). */
.ob-related-title {
	font-family: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: var(--ob-azul);
	margin: 0 0 18px;
}

/* ============================================================
   TAP TARGETS de 44px — footer y header (WCAG 2.5.5 / Apple HIG)
   ============================================================
   Medido a 375×812 con el rect + los pseudo-elementos (que es de donde sale el
   área táctil real): en TODOS falla la ALTURA, no el ancho. Links de navegación
   del footer 26px, teléfono/WhatsApp/email 20px, legales 22px. Los íconos del
   header fallan al revés: 44 de alto pero 24 y 40 de ancho.

   POR QUÉ NO SE USA EL TRUCO DEL `::before` (el de `.ob-hero-dot`, que agranda
   la zona de toque sin mover el layout): los links del footer están a 26px uno
   de otro, así que áreas de 44px se SOLAPARÍAN entre vecinos y un toque caería
   en el link de al lado. En una lista vertical la única solución correcta es
   separación real. El truco del pseudo sirve para elementos AISLADOS, no para
   listas — por eso funciona bien en los dots del hero y acá no.

   Se usa `min-height` + flex en vez de padding suelto para que el área crezca de
   forma predecible sin depender del line-height heredado. */
.ob-footer-links a,
.ob-footer-contact a,
.ob-footer-legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Los de navegación ocupan el ancho de la columna: el renglón entero es tocable,
   que es lo que espera el dedo (y no obliga a apuntarle a las letras). */
.ob-footer-links a {
	display: flex;
	width: 100%;
}

/* "Datos fiscales" del footer SÍ es un link (34px de alto). OJO: la clase
   `.ob-footer-cert` la comparten además dos <span> que son insignias (AFIP
   DataWeb y ANMAT) y NO se tocan — por eso el selector lleva el `a`. */
a.ob-footer-cert {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Íconos del header: acá SÍ falta ancho. `min-width` no alcanza en el de cuenta
   porque es un <div> contenedor sin ancho propio; se centra el contenido para que
   el ícono no quede pegado al borde al ensanchar. */
.ob-nav-icons .wp-block-woocommerce-customer-account,
.ob-nav-icons .wc-block-mini-cart__button {
	min-width: 44px;
	justify-content: center;
}

/* …y el <a> de adentro tiene que ocupar ese ancho: ensanchar solo el contenedor
   deja el link en 24px, y el dedo toca el LINK, no el div que lo envuelve. */
.ob-nav-icons .wc-block-customer-account__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* El logo quedaba en 42px: le faltaban 2 para el mínimo. */
.ob-logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Checkboxes del carrito y del checkout (WC Blocks). El <input> mide 20×20, pero
   lo que se toca es el <label> que lo envuelve — y ese medía 195×20.
   Se agranda con padding vertical y NO centrando: el label ya viene con
   `align-items: flex-start` y hay labels de varias líneas (consentimientos), donde
   centrar dejaría el casillero flotando en el medio del párrafo. Con
   `padding-block: 12px` una línea da 20+24 = 44 exactos y se ve centrada, y en
   varias líneas el casillero sigue arriba, alineado con el primer renglón.

   OJO con los radios de método de pago y de envío: su <input> también mide 20×20,
   pero su label envuelve el renglón entero (375×50 medido) y YA cumple. Medir el
   input en vez del área tocable los cuenta como falla — mismo error que el doc 19
   cometió con los dots del hero. No los toques. */
.wc-block-components-checkbox label {
	min-height: 44px;
	padding-block: 12px;
}

/* Botones que quedaban a 40-43px, o sea a 1-4px del mínimo. Entre ellos el
   "Agregar al carrito" de la ficha (213×40): el botón que convierte.
   Se centra con flex porque `min-height` sobre un inline-block agranda la caja
   pero deja el texto arriba.

   `ul.wc-tabs a` y no `.ob-ficha-tabs a`: el segundo también agarraría los links
   DENTRO de la descripción del producto, que son texto en línea y están exentos
   por WCAG 2.5.5 ("the target is in a sentence"). Agrandarlos rompería el párrafo
   sin ganar accesibilidad. Por la misma razón NO se tocan las migas de pan, el
   "Cómo llegar →" de la barra ni el "Coordinalo por WhatsApp →" de la caja de
   efectivo: los tres viven dentro de una oración.

   Tampoco cuenta el "Saltar al contenido" (1×1): es el skip link, que solo
   aparece al tabular. Medirlo apagado lo cuenta como falla y no lo es. */
.single_add_to_cart_button,
.wp-block-button__link,
ul.wc-tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

/* Zoom trap de la ficha: iOS hace zoom automático al enfocar cualquier campo de
   formulario con tipografía MENOR a 16px, y después no vuelve solo — el usuario
   queda con la página ampliada y desencajada. Medido en el DOM: el <select> de
   variación y el input de cantidad estaban en 14.4px, o sea justo sobre los dos
   campos que hay que tocar SÍ o SÍ para comprar. 16px es el umbral exacto, no
   una preferencia estética. (19 §1 / Fase 2 del bases.) */
.ob-product .quantity input.qty {
	font-size: 16px;
}

/* El <select> de variación necesita MÁS especificidad que el resto:
   woocommerce-blocktheme.css lo fija en --wp--preset--font-size--small (14.4px)
   con `.woocommerce table.variations tr td select` = (0,2,4), que le gana a un
   `.ob-product .variations select` = (0,2,1). Sumamos la clase del form para
   llegar a (0,3,1): en especificidad la columna de CLASES se compara PRIMERO,
   así que 3 clases ganan aunque el rival tenga más elementos. Sin !important.
   El input de cantidad va en la regla de arriba, aparte y más suelta, porque en
   los productos SIMPLES el form es `form.cart` y no tiene `variations_form`. */
.ob-product .variations_form .variations select {
	font-size: 16px;
}

/* Ayuda para decidir (cotizador + local) — patterns/ficha-decidir.php. Tarjeta
   liviana con filas tipo link: DELIBERADAMENTE de bajo peso visual. El buy-box ya
   tiene el CTA coral y el WhatsApp verde; una tercera píldora full-width diluye la
   acción (misma razón que .ob-ficha-pdf-wrap, abajo). */
.ob-ficha-decidir {
	margin: 0;
	border: 1px solid var(--ob-linea);
	border-radius: 12px;
	padding: 14px 16px;
	background: #fff;
}

.ob-ficha-decidir-t {
	margin: 0 0 8px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--ob-azul);
}

.ob-ficha-decidir-op {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 6px;
	border-radius: 9px;
	text-decoration: none;
	color: inherit;
	transition: background .15s var(--ob-ease, ease);
}

.ob-ficha-decidir-op + .ob-ficha-decidir-op {
	border-top: 1px solid var(--ob-linea);
}

.ob-ficha-decidir-op:hover {
	background: #f4f7fa;
}

.ob-ficha-decidir-ic {
	flex: 0 0 auto;
	display: flex;
	color: var(--ob-azul);
}

.ob-ficha-decidir-ic svg {
	width: 22px;
	height: 22px;
}

.ob-ficha-decidir-tx {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ob-ficha-decidir-tx b {
	font-size: 15px;
	line-height: 1.3;
	color: var(--ob-azul);
}

.ob-ficha-decidir-tx small {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ob-gris);
}

.ob-ficha-decidir-ar {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--ob-azul);
	font-size: 17px;
}

/* Franja ancho completo bajo la zona de compra (rediseño 2026-07-25). Contenedor
   de los ayudantes que bajaron del buy-box: cotizador/local + tira de confianza.
   Fuera de la columna angosta, entran lado a lado y llenan el hueco que quedaba
   vacío a la izquierda debajo de la galería. Peso visual BAJO: sigue siendo el
   mismo card liviano y los mismos links, solo cambia el ancho y el reparto. */
@media (min-width: 720px) {
	/* Cotizador + local: uno al lado del otro. El título abarca las dos columnas.
	   Con un solo destino (productos que no son sillas → solo "probá antes de
	   comprar") el link ocupa todo el ancho en vez de dejar media fila vacía. */
	.ob-ficha-abajo .ob-ficha-decidir {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		row-gap: 2px;
		align-items: start;
	}
	.ob-ficha-abajo .ob-ficha-decidir-t {
		grid-column: 1 / -1;
	}
	.ob-ficha-abajo .ob-ficha-decidir-op + .ob-ficha-decidir-op {
		border-top: 0;
	}
	.ob-ficha-abajo .ob-ficha-decidir-op:only-of-type {
		grid-column: 1 / -1;
	}

	/* Confianza: los 3 claims en fila (envíos · garantía · dudas). En mobile
	   siguen apilados 1 por fila (la regla base de .ob-ficha-trust). */
	.ob-ficha-abajo .ob-ficha-trust {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px 24px;
		align-items: center;
	}
}

/* Ficha técnica en PDF — LINK secundario discreto (no píldora): es utilidad fría
   que no debe competir por peso con "Agregar al carrito" (coral) ni "Consultá por
   WhatsApp" (verde) en el buy-box. Tres píldoras full-width iguales diluían la
   acción. El wpautop del shortcode mete un <p> intermedio → display:contents lo
   anula. (Auditoría 2026-07-11.) */
.ob-ficha-pdf-wrap > p { display: contents; }

/* El PDF ahora es cabecera de la ficha técnica (arriba de los tabs), no un
   link suelto en el buy-box → lo separo de la franja de confianza de arriba. */
.ob-ficha-pdf-wrap {
	margin-top: 28px;
}

.ob-ficha-pdf {
	margin: 0 0 4px;
}

.ob-ficha-pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: 0;
	color: var(--ob-azul, #14457A);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 2px;
	min-height: 44px;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s var(--ob-ease, ease);
}

.ob-ficha-pdf-btn:hover {
	color: var(--ob-azul-osc, #0e335c);
	background: none;
}

.ob-ficha-pdf-btn svg {
	flex: 0 0 auto;
}

.ob-ficha-pdf-note {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ob-gris);
	line-height: 1.45;
	text-align: center;
}

/* Botón "Que me asesoren" de la guía de talles → verde WhatsApp, idéntico al
   botón de asesoría de la ficha. Va a WhatsApp (asesoría = el diferencial), así
   que usa el VERDE del sistema, no coral (reservado a la acción de compra) ni
   azul. El pattern pedía coral vía has-coral-background-color, pero ese preset
   no pinta en este theme (ver .ob-footer / .ob-cfg); lo definimos acá. */
.ob-size-guide .wp-block-button__link {
	background: #0E7A3E !important;
	color: #fff !important;
}
.ob-size-guide .wp-block-button__link:hover {
	background: #0A6533 !important;
	color: #fff !important;
}

/* ============================================================
   WooCommerce product cards — estilo de marca (matar el default genérico)
   Carrusel de la home + tienda + categorías. Botón "Agregar al carrito"
   en coral (color de acción), card con borde/hover de marca.
   ============================================================ */
.ob-live-carousel {
	/* Carrusel de destacados (bloque product-collection de la home).
	   NOTA: el archivo venía cortado acá ('.ob-live-car'); regla completada
	   para no romper el parseo del CSS que sigue. */
	display: block;
}

/* ============================================================
   Popup newsletter (#ob-newsletter-pop) — descuentos y novedades
   (promesa del cupón 10% pausada). Disparado por assets/newsletter-popup.js.
   ============================================================ */
.ob-np-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(14, 52, 96, .55);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .22s ease;
}
.ob-np-overlay.is-open {
	opacity: 1;
}
.ob-np-overlay[hidden] {
	display: none;
}

.ob-np-card {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 18px;
	padding: 38px 32px 26px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(14, 52, 96, .35);
	transform: translateY(14px) scale(.98);
	transition: transform .24s var(--ob-ease);
}
.ob-np-overlay.is-open .ob-np-card {
	transform: translateY(0) scale(1);
}

.ob-np-close {
	position: absolute;
	top: 8px;
	right: 10px;
	/* Touch target ≥44px (WCAG 2.5.5 / público mayor). El ícono se centra con flex. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--ob-gris);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}
.ob-np-close:hover {
	background: var(--ob-gris-cl);
	color: var(--ob-grafito);
}

.ob-np-eyebrow {
	margin: 0 0 8px;
	/* verde-osc (no verde) para pasar contraste sobre blanco. */
	color: var(--ob-verde-osc);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.ob-np-title {
	margin: 0 0 10px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.15;
}
.ob-np-desc {
	margin: 0 0 22px;
	color: var(--ob-gris);
	font-size: 16px;
	line-height: 1.5;
}

.ob-np-form {
	margin-bottom: 6px;
	text-align: left;
}
.ob-np-field {
	margin: 0;
}
.ob-np-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-gris);
}
.ob-np-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.ob-np-row input {
	flex: 1 1 200px;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	border: 2px solid var(--ob-linea);
	border-radius: 10px;
	background: #fff;
	color: var(--ob-grafito);
}
/* Anillo de foco azul, igual al del checkout: el público mayor necesita VER
   cuál campo está activo (style.css: bloque CHECKOUT, misma regla). */
.ob-np-row input:focus {
	outline: none;
	border-color: var(--ob-azul);
	box-shadow: 0 0 0 3px rgba(20, 69, 122, .15);
}
/* Honeypot: presente en el DOM pero invisible y fuera del tab (no
   display:none, para que el bot lo complete y lo delatemos). */
.ob-np-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ob-np-msg {
	margin-top: 8px;
	font-size: 14px;
	text-align: center;
}
.ob-np-msg.err {
	color: #D63638;
	font-weight: 600;
}

.ob-np-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 13px 24px;
	background: var(--ob-coral);
	/* grafito sobre coral en reposo = 5.6:1 (AA); blanco solo en hover sobre coral-osc. */
	color: var(--ob-grafito);
	border: 0;
	border-radius: 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.ob-np-submit:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}
.ob-np-submit:disabled {
	opacity: .7;
	cursor: default;
}

/* Panel de éxito: código del cupón grande y seleccionable + botón de copiar. */
.ob-np-ok {
	margin-bottom: 12px;
	text-align: center;
}
.ob-np-ok-tx {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--ob-grafito);
}
.ob-np-code {
	display: inline-block;
	margin: 0 2px;
	padding: 2px 10px;
	background: var(--ob-gris-cl);
	border: 1px dashed var(--ob-azul);
	border-radius: 6px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: .5px;
	user-select: all;
}
.ob-np-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
	padding: 10px 20px;
	background: var(--ob-coral);
	color: var(--ob-grafito);
	border: 0;
	border-radius: 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.ob-np-copy:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}
.ob-np-ok-note {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--ob-gris);
}

.ob-np-fine {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--ob-gris);
	line-height: 1.4;
}
.ob-np-alt {
	margin: 0 0 10px;
	font-size: 14px;
}
.ob-np-alt a {
	color: var(--ob-azul);
	text-decoration: underline;
}
.ob-np-alt a:hover {
	color: var(--ob-azul-osc, var(--ob-azul));
}
.ob-np-decline {
	margin-top: 2px;
	border: 0;
	background: transparent;
	color: var(--ob-gris);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}
.ob-np-decline:hover {
	color: var(--ob-grafito);
}

@media (prefers-reduced-motion: reduce) {
	.ob-np-overlay,
	.ob-np-card {
		transition: none;
	}
}

/* ============================================================
   CHECKOUT  ·  bloque woocommerce/checkout — skin de marca
   ------------------------------------------------------------
   El checkout corre con el Checkout Block de WooCommerce (no el
   shortcode clasico): React hidrata las clases .wc-block-checkout*.
   Solo tocamos PRESENTACION (colores, tipografia, layout, foco) —
   ni un campo ni una regla de negocio. Coral SIGUE siendo exclusivo
   del CTA (boton "Realizar pedido"); azul = utilidad/marca; verde =
   confianza. Reusa los tokens --ob-* del resto del tema.
   ============================================================ */

/* ---- Header slim del checkout (override del part checkout-header de
   WooCommerce, en parts/checkout-header.html). Distraction-free: logo
   → inicio + salida EXPLICITA "Volver a la tienda" (el publico mayor no
   intuye que el logo es un link) + sello "Compra 100% segura" en verde
   confianza. Sin mega-menu ni buscador: no se fuga la conversion. ---- */
.ob-checkout-header { padding-block: 12px; }
.ob-checkout-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1140px;
	margin-inline: auto;
	width: 100%;
	/* Gutter lateral: sin esto el contenido besa los bordes en mobile
	   (el row es HTML crudo, no hereda el padding constrained del theme). */
	padding-inline: clamp(16px, 4vw, 24px);
	box-sizing: border-box;
}
.ob-checkout-header-aside {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.ob-checkout-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}
.ob-checkout-back:hover,
.ob-checkout-back:focus-visible { text-decoration: underline; }
.ob-checkout-back svg { flex: 0 0 auto; }
.ob-checkout-secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--verde);
}
.ob-checkout-secure svg { flex: 0 0 auto; }
@media (max-width: 600px) {
	/* Empaquetados a la IZQUIERDA (sin space-between) para que "Compra 100%
	   segura" nunca bese el borde derecho en pantallas chicas; si no entran
	   en una línea, bajan limpio (flex-wrap ya activo). */
	.ob-checkout-header-aside { gap: 10px 16px; width: 100%; }
	.ob-checkout-secure { font-size: 13px; }
}

/* ---- Ancho: un checkout a 2 columnas se ahoga en el contentSize
   de 720px del theme.json. Lo liberamos a ~1140 y lo centramos, igual
   que hacemos con .alignwide (mismo patron de !important para ganarle
   al cap del layout "constrained" del bloque de pagina). ---- */
.wp-block-woocommerce-checkout {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* La columna del formulario no debe desbordar cuando hay inputs anchos. */
.wc-block-checkout__main {
	min-width: 0;
}

/* ---- Pasos como secciones aireadas (separador hairline, NO cards con
   sombra: evita pelear con el numero de paso que Woo posiciona en el
   padding-left reservado). ---- */
.wc-block-checkout__main .wc-block-components-checkout-step {
	padding-top: 22px;
	margin-top: 22px;
	border-top: 1px solid var(--ob-linea);
}

.wc-block-checkout__main .wc-block-components-checkout-step:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

/* Titulos de paso en Montserrat azul (jerarquia de marca). */
.wc-block-components-checkout-step__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	color: var(--ob-azul);
}

.wc-block-components-checkout-step__description {
	color: var(--ob-gris);
}

/* ---- Inputs / selects / textareas: mismo lenguaje que el resto de los
   formularios del tema (borde 2px, radio 10px, foco azul). Solo color y
   forma — NO tocamos el padding para no romper el label flotante de Woo. ---- */
.wc-block-checkout__main .wc-block-components-text-input input,
.wc-block-checkout__main .wc-block-components-text-input textarea,
.wc-block-checkout__main .wc-blocks-components-select select,
.wc-block-checkout__main .wc-block-components-address-form input,
.wc-block-checkout__main .wc-block-components-address-form select,
.wc-block-checkout__main .wc-block-components-combobox input {
	border: 2px solid #e1e8f0;
	border-radius: 10px;
	background: #fff;
	color: var(--ob-grafito);
	font-family: 'Open Sans', sans-serif;
	transition: border-color .18s var(--ob-ease, ease);
}

.wc-block-checkout__main .wc-block-components-text-input input:focus,
.wc-block-checkout__main .wc-block-components-text-input textarea:focus,
.wc-block-checkout__main .wc-blocks-components-select select:focus,
.wc-block-checkout__main .wc-block-components-address-form input:focus,
.wc-block-checkout__main .wc-block-components-address-form select:focus,
.wc-block-checkout__main .wc-block-components-combobox input:focus {
	border-color: var(--ob-azul);
	/* Anillo de foco: el público mayor necesita VER cuál campo está activo. */
	box-shadow: 0 0 0 3px rgba(20, 69, 122, 0.15);
	outline: none;
}

/* Label flotante: azul cuando el campo esta activo/relleno. */
.wc-block-checkout__main .wc-block-components-text-input.is-active label {
	color: var(--ob-azul);
}

/* ---- Estado de ERROR: rojo claro inequívoco (NO coral — el coral es
   exclusivo del CTA) y mensaje grande y legible. Refuerza el borde que
   WooCommerce ya pinta, con nuestra forma (2px + radio) y anillo al foco. ---- */
.wc-block-checkout__main .wc-block-components-text-input.has-error input,
.wc-block-checkout__main .wc-block-components-text-input.has-error textarea,
.wc-block-checkout__main .wc-block-components-address-form .has-error input,
.wc-block-checkout__main .wc-block-components-combobox.has-error input {
	border-color: #D63638;
}
.wc-block-checkout__main .wc-block-components-text-input.has-error input:focus,
.wc-block-checkout__main .wc-block-components-address-form .has-error input:focus {
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.15);
}
.wc-block-checkout__main .wc-block-components-validation-error {
	color: #B32124;
	/* 16px: el momento de mayor ansiedad del embudo no puede tener el texto más
	   chico del recorrido, menos con público adulto mayor. */
	font-size: 16px;
	font-weight: 600;
}

/* ---- Refuerzo de PAGO + GARANTÍA justo arriba del botón "Realizar el
   pedido". Pseudo-elemento sobre el contenedor de acciones: presentación
   pura, no inyecta nodos en el árbol de React (hydration-safe). Verde =
   confianza; el coral sigue siendo exclusivo del botón. ---- */
.wc-block-checkout__actions::before {
	content: "Pago protegido · Garantía oficial · Tarjetas, MODO o QR";
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	/* verde-osc (no verde) para pasar contraste como texto (ver comentario linea 140). */
	color: var(--ob-verde-osc, #17695A);
	background: rgba(46, 168, 139, 0.08);
	border: 1px solid rgba(46, 168, 139, 0.28);
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 14px;
}
@media (max-width: 600px) {
	.wc-block-checkout__actions::before { font-size: 14px; }
}

/* Contrato ob-mp-off (functions.php: ob_mp_enabled()): sin MP configurado, el refuerzo no promete cuotas. */
body.ob-mp-off .wc-block-checkout__actions::before {
	content: "Pago protegido · Garantía oficial";
}

/* ---- Opciones de envio y de pago: tarjetas seleccionables. El estado
   elegido se marca con borde azul + fondo suave (:has = navegadores
   modernos; degrada limpio al look default si no lo soportan). ---- */
.wc-block-checkout__main .wc-block-components-radio-control__option {
	border: 1px solid var(--ob-linea);
	border-radius: 12px;
	margin-bottom: 10px;
	transition: border-color .15s var(--ob-ease, ease),
		background-color .15s var(--ob-ease, ease);
}

.wc-block-checkout__main .wc-block-components-radio-control__option:hover {
	border-color: var(--ob-azul-cl);
}

.wc-block-checkout__main .wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--ob-azul);
	background: var(--ob-soft);
}

/* El punto del radio en color de marca. */
.wc-block-checkout__main .wc-block-components-radio-control__input:checked {
	color: var(--ob-azul);
}

/* ---- Sidebar del resumen: tarjeta de marca, pegajosa en desktop para
   que el total y el CTA queden siempre a la vista al hacer scroll. ---- */
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar {
	position: sticky;
	top: 84px; /* despeja el header sticky */
	align-self: flex-start;
	background: var(--ob-soft);
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 22px 20px;
	box-shadow: var(--ob-shadow);
}

/* Renglones del resumen + totales. */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--ob-grafito);
	font-weight: 600;
}

.wc-block-components-totals-item__label {
	color: var(--ob-gris);
}

.wc-block-components-totals-item__value {
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

/* Total final: el numero protagonista, en azul firme. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ob-azul);
	font-size: 22px;
}

/* Cupon: utilidad → azul, NUNCA coral. */
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
	color: var(--ob-azul);
}

/* ---- CTA final "Realizar pedido": ya hereda coral del boton global;
   le damos presencia full-width y pildora grande (la unica accion coral
   de toda la pantalla). ---- */
.wc-block-components-checkout-place-order-button {
	width: 100%;
	justify-content: center;
	font-size: 17px;
	padding: 16px 22px;
	border-radius: 999px !important;
	box-shadow: var(--ob-shadow-coral);
	/* Coral = color de accion (regla de oro de marca). Kadence pinta este
	   boton con su azul primario a mayor especificidad, asi que forzamos el
	   coral aca. Texto grafito sobre coral = 5.6:1 (WCAG AA). */
	background: var(--ob-coral) !important;
	border-color: var(--ob-coral) !important;
	color: var(--ob-grafito) !important;
}

.wc-block-components-checkout-place-order-button:hover {
	background: var(--ob-coral-osc) !important;
	border-color: var(--ob-coral-osc) !important;
	color: #fff !important;
}

/* ============================================================
   CARRITO  ·  bloque woocommerce/cart — skin de marca
   ------------------------------------------------------------
   Mismo mundo que el checkout (Cart Block de React, clases
   .wc-block-cart*). Reusa el sidebar sticky (arriba) y la tira
   de confianza .ob-checkout-trust (inyectada por functions.php).
   Coral SIGUE exclusivo del CTA "Pasar al pago".
   ============================================================ */

/* Ancho liberado a 1140 y centrado, igual que el checkout. */
.wp-block-woocommerce-cart {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wc-block-cart__main {
	min-width: 0;
}

/* Titulo del resumen "Total del carrito" en Montserrat azul. */
.wc-block-cart__totals-title {
	font-family: Montserrat, sans-serif;
	color: var(--ob-azul);
}

/* ---- CTA "Pasar al pago": la unica accion coral de la pantalla,
   full-width y pildora, igual que "Realizar pedido" del checkout.
   Kadence lo pinta con su azul a mayor especificidad → forzamos coral.
   Texto grafito sobre coral = 5.6:1 (WCAG AA). ---- */
.wc-block-cart__submit-button {
	width: 100%;
	justify-content: center;
	font-size: 17px;
	padding: 16px 22px;
	border-radius: 999px !important;
	box-shadow: var(--ob-shadow-coral);
	background: var(--ob-coral) !important;
	border-color: var(--ob-coral) !important;
	color: var(--ob-grafito) !important;
}

.wc-block-cart__submit-button:hover {
	background: var(--ob-coral-osc) !important;
	border-color: var(--ob-coral-osc) !important;
	color: #fff !important;
}

/* ============================================================
   Pago a la vista (ob-paybar) — franja de medios de pago + cuotas
   arriba del carrito y el checkout. Inyectada por functions.php.
   ============================================================ */
.ob-paybar {
	max-width: 1140px;
	margin: 0 auto 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	background: var(--ob-soft);
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 14px 18px;
}
.ob-paybar-it {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ob-paybar-ic {
	font-size: 22px;
	line-height: 1;
}
.ob-paybar-tx {
	display: flex;
	flex-direction: column;
}
.ob-paybar-tx b {
	color: var(--ob-grafito);
	font-size: 14px;
	font-weight: 700;
}
.ob-paybar-tx i {
	color: var(--ob-gris);
	font-size: 12.5px;
	font-style: normal;
}
@media (max-width: 760px) {
	.ob-paybar {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* ============================================================
   Order-bump (ob-bump) — cross-sell contextual (silla→almohadón,
   cama→colchón). checkout-bump.js lo mueve al SIDEBAR ("a la
   derecha", bajo el resumen), así que va vertical y compacto.
   Acento coral = oferta (regla de marca); botón coral OUTLINE
   para NO competir con el pill coral de "Realizar pedido".
   ============================================================ */
.ob-bump {
	background: #fff;
	border: 2px dashed var(--ob-coral);
	border-radius: var(--ob-r);
	padding: 18px 16px;
	text-align: center;
	margin: 16px auto 0;
	max-width: 380px;
}
/* Ya dentro del sidebar: ocupa el ancho de la tarjeta de resumen. */
.wc-block-checkout__sidebar .ob-bump {
	max-width: none;
	margin-top: 18px;
}
.ob-bump-tag {
	display: inline-block;
	background: var(--ob-coral);
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 20px;
}
.ob-bump-img {
	display: block;
	width: 92px;
	height: 92px;
	object-fit: contain;
	margin: 12px auto 4px;
}
.ob-bump-tt {
	color: var(--ob-grafito);
	font-weight: 700;
	font-size: 15px;
	margin: 6px 0 0;
	line-height: 1.3;
}
.ob-bump-sub {
	color: var(--ob-gris);
	font-size: 13px;
	margin: 6px 0 0;
	line-height: 1.5;
}
.ob-bump-pr {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--ob-azul);
	margin: 12px 0;
}
.ob-bump-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #fff;
	color: var(--ob-coral-osc);
	border: 2px solid var(--ob-coral);
	border-radius: 999px;
	padding: 12px 18px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	min-height: 44px;
	transition: background 0.15s, color 0.15s;
}
.ob-bump-btn:hover {
	/* coral-osc (no coral) para que el blanco pase contraste, patron de style.css:112. */
	background: var(--ob-coral-osc);
	border-color: var(--ob-coral-osc);
	color: #fff;
}

/* ============================================================
   Tira de confianza del checkout (inyectada por functions.php
   debajo del bloque). Mismo lenguaje visual que la trust-bar /
   la ficha: iconos azul, microcopy gris, una sola linea WhatsApp.
   ============================================================ */
.ob-checkout-trust {
	max-width: 1140px;
	margin: 24px auto 0;
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 20px 22px;
	box-shadow: var(--ob-shadow);
}

.ob-checkout-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.ob-co-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.ob-co-ico {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--ob-azul);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ob-co-tt {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--ob-grafito);
	line-height: 1.2;
}

.ob-co-sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--ob-gris);
	line-height: 1.35;
}

/* Renglon WhatsApp: el diferencial de marca, verde para "hablar con
   alguien que sabe", sin competir con el coral del CTA. */
.ob-co-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ob-linea);
	font-size: 14px;
	color: var(--ob-grafito);
	text-align: center;
	flex-wrap: wrap;
}

.ob-co-wa a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #0A6533;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	text-decoration: none;
}

.ob-co-wa a:hover {
	color: #157a3b;
}

.ob-co-wa svg {
	flex: 0 0 auto;
}

@media (max-width: 1000px) {
	/* Apilado: el sidebar baja, sin sticky (no aporta en flujo vertical). */
	.wc-block-checkout__sidebar {
		position: static;
		top: auto;
	}
}

@media (max-width: 760px) {
	.ob-checkout-trust-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 420px) {
	.ob-checkout-trust-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   ACCESIBILIDAD + UX MOBILE (tanda dirigida por la auditoría).
   Público primario: adultos mayores. Objetivos táctiles >=44px,
   microcopys legibles y header/ficha/hero usables en 360-414px.
   ============================================================ */

/* --- Objetivos táctiles >=44px (WCAG 2.5.5) --- */
.ob-nav-icons a,
.ob-nav-icon-link,
.ob-nav-icons .wp-block-woocommerce-customer-account a,
.ob-nav-icons .wc-block-mini-cart__button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Dots del hero: área táctil de 44px vía pseudo, sin agrandar el punto ni
   separarlos visualmente (el ::before es parte del botón, captura el toque). */
.ob-hero-dot {
	position: relative;
}
.ob-hero-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
}

/* --- Microcopys: piso de tamaño para legibilidad de adultos mayores.
   El cuerpo principal ya es 16px; acá subimos solo los subtextos chicos. --- */
.ob-co-sub { font-size: 13.5px; }
.ob-stat-lbl { font-size: 15px; }
.ob-stats-note { font-size: 13px; }
.ob-footer-legal { font-size: 14px; }
.ob-topbar { font-size: 14px; }

/* Touch targets del mega-menú mobile (acordeón de subcategorías). */
@media (max-width: 860px) {
	.ob-mega-sub {
		padding: 13px 28px;
	}
}

/* Hero mobile: la altura fija dejaba ~250px muertos arriba con el copy al
   fondo. Pasa a altura natural con el copy centrado y a la vista. */
@media (max-width: 760px) {
	.ob-hero {
		height: auto;
		min-height: 440px;
	}
	.ob-hero-inner {
		align-items: center;
		padding-top: 36px;
		padding-bottom: 36px;
	}
}

/* Ficha: apilado explícito y CTA principal full-width por encima del
   WhatsApp (en mobile el add-to-cart coral debe dominar). 781px = punto
   real donde WordPress apila las columnas.

   display:contents en las columnas (rediseño 2026-07-29): las specs viven
   bajo la galería (columna izquierda) por decisión desktop, pero apilando
   columnas enteras quedarían entre la foto y el TÍTULO. Con contents, los
   bloques de ambas columnas se vuelven hijos flex directos y el `order` los
   intercala: foto → título → precio → specs → CTA → respaldo. Los bloques
   sin order explícito no importan: todos los hijos reales lo llevan.
   A11y: el orden DOM (que lee un lector de pantalla) queda igual que el
   desktop; los únicos interactivos reordenados visualmente (CTA/links)
   conservan entre sí la misma secuencia relativa que en el DOM. */
@media (max-width: 781px) {
	.ob-product .wp-block-columns {
		flex-direction: column;
		/* gap 0, no 24: con contents el gap separaría CADA bloque; el ritmo
		   lo ponen los márgenes propios de cada uno (como en desktop). */
		gap: 0 !important;
	}
	.ob-product .wp-block-columns > .wp-block-column {
		display: contents;
	}
	.ob-product .wp-block-woocommerce-product-image-gallery { order: 1; }
	.ob-product .wp-block-post-title { order: 2; margin-top: 18px; }
	.ob-product .ob-product-sku-wrap { order: 3; }
	.ob-product .wp-block-woocommerce-product-rating { order: 4; }
	.ob-product .wp-block-woocommerce-product-price { order: 5; }
	.ob-product .ob-ficha-cuotas { order: 6; }
	/* Specs ANTES del botón: es el lugar que ya funcionaba — el dato que
	   decide ("soporta N kg") se lee camino al CTA, no después. */
	.ob-product .ob-specs-wrap { order: 7; }
	.ob-product .wp-block-add-to-cart-form { order: 8; margin-top: 14px; }
	.ob-product .ob-respaldo { order: 9; }
	.ob-product .ob-cash { order: 10; }
	.ob-product .ob-ficha-wa { order: 11; }
	.ob-product .single_add_to_cart_button,
	.ob-product form.cart button.button,
	.ob-product .wc-block-components-product-button .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 600px) {
	/* Topbar: más chico y con respiro para no comerse 3-4 líneas. */
	.ob-topbar { font-size: 12.5px; }
	.ob-topbar p { padding: 5px 12px; }

	/* Header compacto: dejar logo + cuenta + carrito. Los links de texto ya
	   están en el mega-menú y el footer; el monto del mini-cart se oculta. */
	.ob-nav-icons .ob-nav-icon-link { display: none; }
	/* 10px, no 16: con el mini-carrito visible el bloque de iconos no entraba
	   en la fila del logo y el header se partía en dos renglones. */
	.ob-nav-icons { gap: 10px; }
	.ob-nav-icons .wc-block-mini-cart__amount { display: none; }

	/* Toolbar de orden (shop/categoría): apilar y full-width tocable. */
	.ob-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.ob-shop-toolbar select,
	.ob-shop-toolbar .orderby {
		width: 100%;
		min-height: 44px;
	}
}

/* Guardas anti-overflow horizontal en mobile (hero + ficha): el contenido
   DEBE entrar en el viewport; sin esto se recorta contra overflow-x:clip. */
@media (max-width: 760px) {
	.ob-hero-inner {
		width: 100%;
		box-sizing: border-box;
		padding-left: 18px;
		padding-right: 18px;
	}
	.ob-hero-box {
		max-width: 100%;
	}
}

@media (max-width: 781px) {
	/* .ob-product es .alignfull sin background propio (no necesita "sangrar"
	   borde a borde) — el break-out estándar de Gutenberg (margin: calc(50% -
	   50vw)) asume que el padding del contenedor padre es SIMÉTRICO. Cuando no
	   lo es (detectado en vivo: WooCommerce Blocks deja un inline
	   `padding-right:0` en el body — probablemente el cálculo de scrollbar del
	   mini-cart drawer — mientras el padding-left del wrapper sigue en ~24px),
	   ese margen negativo simétrico (-12px/-12px) queda mal calzado sobre un
	   padre asimétrico y el bloque entero se corre 12px de más por CADA lado
	   → overflow-x:clip del .wp-site-blocks recorta breadcrumb/H1/descripción
	   por los dos bordes. Fix a prueba de esa asimetría: anular el margen
	   negativo así .ob-product nunca puede exceder el ancho real de su padre,
	   sea cual sea su padding en cada lado.
	   !important en el padding: Kadence (tema padre) trae
	   `.alignfull, .alignwide { padding-left:0; padding-right:0; }` con la
	   MISMA especificidad que .ob-product y cargada después en cascada — sin
	   !important nuestro padding pierde y el contenido queda pegado al borde. */
	.ob-product {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Breadcrumb, H1 y descripción de la ficha también deben respetar el
	   viewport: sin esto, títulos largos ("Silla de ruedas de aluminio
	   reclinable con elevapiernas") desbordan y overflow-x:clip los recorta
	   por ambos lados. */
	.ob-product .wc-block-breadcrumbs,
	.ob-product .woocommerce-breadcrumb {
		max-width: 100%;
		box-sizing: border-box;
		flex-wrap: wrap;
		overflow-wrap: break-word;
		word-break: break-word;
	}
	.ob-product .wp-block-post-title,
	.ob-product h1.wp-block-post-title {
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Mismo bug, alcance ACOTADO A UNA ALLOW-LIST: cualquier grupo/columnas
	   .alignwide anidado DIRECTO dentro de una sección .alignfull hereda el
	   mismo negative-margin break-out de Gutenberg (relativo al VIEWPORT, no
	   a su padre inmediato) y el mismo corte por la asimetría de arriba —
	   nidar dentro de un .alignfull ya arreglado no lo hereda gratis.
	   Antes esto era un selector genérico `.alignfull:not(.ob-product) >
	   .alignwide` — sonaba prolijo pero pisaba ~45 matches reales del sitio
	   sin mirarlos uno por uno. Revisión en vivo encontró wrappers que ESE
	   16px de padding forzado rompía:
	     - .ob-header-row (parts/header.html, header sticky de todo el sitio):
	       ajustado a mano a tolerancias de pocos px (ver comentario más abajo
	       en este archivo, sección del header mobile compacto) — un padding
	       nuevo lo desalinea.
	     - .ob-cfg2 (patterns/configurator-teaser.php, home): tiene fondo
	       propio + border-radius + overflow:hidden con una foto a propósito
	       edge-to-edge — el padding forzado deja barras azules alrededor de
	       la foto.
	     - .ob-size-guide (patterns/size-guide.php): ya trae padding:36px
	       inline en los 4 lados — forzar solo izq/der a 16px vuelve la
	       tarjeta asimétrica.
	     - .ob-landing-compare-wrap (patterns/landing-content.php): tabla
	       comparativa con scroll horizontal propio — no debe angostarse.
	   Por eso la regla es una lista explícita de los wrappers CONFIRMADOS
	   alignwide-sin-fondo-propio-que-de-verdad-desbordan, no un selector
	   estructural que adivina. Cada uno agregado acá fue mirado en el DOM
	   real, no supuesto por el patrón de anidamiento:
	     - .ob-cat-hero > su grupo interno (encabezado H1 de /tienda/ y de
	       categoría — mismo patrón en archive-product.html y
	       patterns/category-hero.php).
	     - .ob-shop (<main> > .ob-shop — layout de la tienda, grilla de 2
	       columnas en mobile).
	     - .ob-footer-grid (.ob-footer > .ob-footer-grid — fila de columnas
	       del footer, incluida la de medios de pago).
	     - .ob-about-strip-inner (tira "Sobre nosotros" del home).
	   Ninguno de estos 4 tiene fondo/border/overflow propio en el elemento
	   mismo (el fondo, si existe, vive en el .alignfull padre, que esta
	   regla NO toca — .ob-cat-hero, .ob-footer y .ob-about-strip siguen
	   sangrando borde a borde sin cambios). */
	.ob-cat-hero > .wp-block-group,
	.ob-shop,
	.ob-footer-grid,
	.ob-about-strip-inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* .ob-trust SÍ tiene fondo/borde/sombra propios (tarjeta blanca flotante,
	   ver patterns/trust-bar.php) — a diferencia de la lista de arriba, acá
	   NO se puede sumar el padding:16px de golpe: sus 4 columnas ya traen
	   18-20px de padding propio (inline, por columna) y un padding extra en
	   el wrapper duplicaría el aire y descuadraría el borde/sombra de la
	   tarjeta contra las columnas internas. Pero el audit en producción SÍ
	   encontró sus títulos ("Garantía 12 meses", etc.) cortados a 375px —
	   mismo bug de negative-margin, la tarjeta entera se corre y desborda.
	   Fix quirúrgico: sólo anular el margen/ancho (el overshoot real), sin
	   tocar el padding — la tarjeta conserva su aire interno tal cual
	   estaba diseñada, solo deja de exceder el viewport. */
	.ob-trust {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* .ob-cot-wrap (cotizador) is the same shape as .ob-product above: .alignfull
	   with no background of its own (only vertical padding), wrapping a plain
	   #ob-cotizador-app div with no align class. At desktop it's recentered by
	   Gutenberg's "constrained" layout (max-width:960px + auto margins), so it
	   never touches the viewport edge and any overflow is invisible slack. At
	   mobile the app IS the full width (960px doesn't constrain a narrower
	   viewport, and .ob-cot-wrap itself has no horizontal padding of its own),
	   so it inherits the exact same negative-margin/asymmetric-body-padding
	   break-out bug — clipping the H1 question and intro copy on both edges. */
	.ob-cot-wrap {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* .ob-cot-head's override moved out of here on purpose — see the
	   unconditional (non-media-query) `.ob-cot-head` rule further down this
	   file. That later, unscoped rule sets the SAME `margin` shorthand
	   property at equal specificity (0-1-0), and later source position wins
	   ties regardless of media-query nesting — a longhand override placed
	   HERE would be silently discarded by the browser (verified via
	   computed style, not by eye: getComputedStyle at 375px showed -18px,
	   not -16px, before this fix). The real override now lives right after
	   that rule so it actually wins the cascade. */
}

@media (max-width: 600px) {
	/* H1 de la ficha al tamaño mobile (en desktop hereda h1 40px → desborda). */
	.ob-product .wp-block-post-title,
	.ob-product h1.wp-block-post-title {
		font-size: 27px;
		line-height: 1.2;
		overflow-wrap: break-word;
	}
}

/* ==========================================================================
   BARRA DE ANUNCIO  (ob-annobar) — promo pago en efectivo en el local.
   Inyectada por functions.php en wp_body_open, sitewide, dismissable.
   Coral = oferta. Texto grafito sobre coral = 5.6:1 (WCAG AA).
   ========================================================================== */
.ob-annobar {
	background: var(--ob-coral);
	color: var(--ob-grafito);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 9px 44px 9px 16px;
	position: relative;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
}
.ob-annobar-tx {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.ob-annobar-ic {
	display: inline-flex;
	flex: none;
}
.ob-annobar-ic svg {
	display: block;
}
.ob-annobar-tx b {
	font-weight: 800;
}
.ob-annobar-sub {
	font-weight: 600;
	opacity: 0.92;
}
.ob-annobar-cta {
	color: var(--ob-grafito);
	font-weight: 800;
	text-decoration: underline;
	white-space: nowrap;
}
.ob-annobar-cta:hover {
	color: #fff;
}
.ob-annobar-x {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--ob-grafito);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	/* Touch target ≥44px (WCAG 2.5.5). */
	min-width: 44px;
	min-height: 44px;
}
.ob-annobar-x:hover {
	color: #fff;
}
/* Desktop: se ve la redacción larga, no la corta. */
.ob-annobar-short {
	display: none;
}

/* ==========================================================================
   HEADER MOBILE COMPACTO (≤760px)
   Medido en vivo a 390px: había 366px de franjas (43% de la primera pantalla)
   antes de que empezara el hero — annobar 3 líneas (102px) + topbar azul
   (54px) + logo/buscador (146px) + barra de categorías (46px). Se recorta a
   ~206px sin perder ningún mensaje:
     · el annobar dice lo mismo en una línea (redacción corta + sin dirección);
     · la topbar azul se oculta y su teléfono baja a la barra de categorías;
     · el buscador se colapsa detrás de una lupa (assets/mega-menu.js).
   Todo vive acá adentro: el desktop queda intacto.
   ========================================================================== */
@media (max-width: 760px) {
	/* --- 1. Annobar en una sola línea --- */
	.ob-annobar-long,
	.ob-annobar-sub {
		display: none;
	}
	.ob-annobar-short {
		display: inline;
	}
	.ob-annobar {
		font-size: 14px;
		padding: 7px 44px 7px 14px;
		gap: 8px;
	}
	.ob-annobar-tx {
		flex-wrap: nowrap;
		gap: 8px;
	}

	/* --- 2. La topbar azul se va (su teléfono renace abajo) --- */
	.ob-topbar {
		display: none;
	}

	/* --- 3. Buscador detrás de la lupa --- */
	.ob-search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* Touch target ≥44px (WCAG 2.5.5). */
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--ob-azul);
		cursor: pointer;
	}
	/* Se oculta la COLUMNA entera, no el buscador: en una fila not-stacked la
	   columna seguiría ocupando su ancho. Clase propia (.ob-search-col) en vez
	   de :has() a propósito — :has() no existe en navegadores viejos y este
	   público los tiene. */
	.ob-search-col {
		display: none;
	}
	/* Abierto: panel a lo ancho, debajo de la fila del logo. */
	.ob-search-col.is-open {
		display: block;
		flex: 0 0 100%;
		max-width: 100%;
		order: 9;
		padding-top: 10px;
	}
	/* La fila DEBE envolver (así el buscador abierto cae en su propia línea:
	   regla de ≤860px más arriba), así que logo + iconos tienen que entrar sí o
	   sí en un renglón. A 390px la fila mide 330px reales y el contenido pedía
	   344 (logo 184 + iconos 140 + gap 20) → los iconos caían a un segundo
	   renglón y el header crecía 39px. Se recortan los dos gaps: 184 + 128 + 10
	   = 322, con 8px de aire.
	   OJO: esto NO se reproduce con `coming_soon` activo — ese flag esconde el
	   mini-carrito y el bloque de iconos mide 84px en vez de 140. */
	.ob-header-row {
		gap: 10px;
	}
	.ob-nav-icons {
		gap: 10px;
	}
	/* Margen de seguridad: si el contenido crece, que comprima en vez de
	   romper la fila en dos. */
	.ob-header-row > .wp-block-column {
		min-width: 0;
	}

	/* --- 4. Tap-to-call en la barra de categorías ---
	   Menú y teléfono COMPARTEN fila (2026-07-29). El intento anterior de
	   compartirla se revirtió porque el panel desplegable, al ser hijo de
	   .ob-mega y estar en flujo, heredaba el ancho reducido del menú (~190px)
	   y el mega-menú entero vivía en media pantalla. La causa raíz no era
	   compartir la fila: era el panel en flujo. Sacándolo a `absolute` contra
	   .ob-cats-bar (que ya es position:relative) recupera los 375px completos
	   y la fila del teléfono deja de costar 48px de pliegue.
	   El teléfono NO se elimina: el comprador acá sesga adulto mayor y muchos
	   llaman en vez de escribir por WhatsApp. */
	.ob-cats-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 10px;
		row-gap: 0;
	}
	.ob-cats-bar > .ob-mega {
		flex: 1 1 auto;
		min-width: 0;
	}
	.ob-catsbar-tel {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		/* flex:none — el número es texto incompresible; que ceda el menú. */
		flex: 0 0 auto;
		min-height: 46px;
		padding: 0 14px 0 0;
		color: #fff;
		font-family: Montserrat, sans-serif;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	/* Panel FUERA del flujo: se ancla a la barra completa, no al ancho del
	   menú. Overlay sobre el hero en vez de empujarlo — comportamiento
	   estándar de un desplegable, y lo que permite compartir la fila. */
	.ob-mega.is-open .ob-mega-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
	}
}

/* El teléfono de la barra de categorías es exclusivo de mobile: en desktop
   sigue estando en la topbar azul, que ahí no se oculta. */
@media (min-width: 761px) {
	.ob-catsbar-tel,
	.ob-search-toggle {
		display: none;
	}
}

@media (max-width: 600px) {
	.ob-annobar {
		font-size: 13.5px;
		padding-right: 40px;
	}
}

/* ==========================================================================
   COTIZADOR GUIADO  (patterns/cotizador.php + assets/cotizador.js)
   Herramienta de descubrimiento para el familiar que compra con miedo a
   equivocarse. Tokens de marca, touch targets >=44px, cuerpo >=16px (público
   adulto mayor). Coral solo en CTA. Recomienda modelos REALES del catálogo.
   ========================================================================== */
#ob-cotizador-app {
	color: var(--ob-grafito);
	font-size: 16px;
	line-height: 1.6;
}

/* Barra de pasos */
.ob-cot-head {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fff;
	border-bottom: 1px solid var(--ob-linea);
	margin: 0 -18px 26px;
}

/* Mobile override for the -18px break-out above. MUST live here, AFTER the
   unconditional rule: both are specificity 0-1-0, and the unconditional
   `margin` shorthand above sets margin-left/right too — so with equal
   specificity, whichever declaration comes LATER in source order wins,
   regardless of which one sits inside a media query. An earlier attempt put
   this override inside the `@media (max-width:781px)` block up near
   .ob-cot-wrap (source position ~350 lines above this point) and it was
   dead code: getComputedStyle(.ob-cot-head).marginLeft at 375px still read
   "-18px", not "-16px" — the later unconditional rule silently won every
   time. Confirmed fixed the same way: computed marginLeft/marginRight now
   read "-16px" at ≤781px.
   -18px assumed a horizontal padding on #ob-cotizador-app that never
   existed (grep confirms no rule ever set it) — the sticky steps pill row
   was just overflowing 18px past its real container on both sides. Now
   that .ob-cot-wrap above has a real, local (non-viewport-relative) 16px
   padding, -16px matches it exactly so the pill row's white background
   sits flush instead of overshooting. */
@media (max-width: 781px) {
	.ob-cot-head {
		margin-left: -16px;
		margin-right: -16px;
	}
}

.ob-cot-steps {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	padding: 14px 18px;
	gap: 8px;
}
.ob-cot-stp {
	flex: 1;
	text-align: center;
	font-size: 13px;
	color: var(--ob-gris);
	font-weight: 600;
	position: relative;
	padding-top: 26px;
}
.ob-cot-stp::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ob-linea);
}
.ob-cot-stp.done::before {
	content: '✓';
	background: var(--ob-verde);
	border-color: var(--ob-verde);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 13px;
}
.ob-cot-stp.active::before {
	background: var(--ob-azul);
	border-color: var(--ob-azul);
}
.ob-cot-stp.active {
	color: var(--ob-azul);
}

/* Pasos */
.ob-cot-step {
	display: none;
}
.ob-cot-step.show {
	display: block;
	animation: obCotFade 0.25s ease;
}
@keyframes obCotFade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ob-cot-step.show { animation: none; }
}
.ob-cot-q {
	text-align: center;
	font-size: 27px;
	margin: 0 0 8px;
	color: var(--ob-azul);
}
.ob-cot-sub {
	text-align: center;
	color: var(--ob-gris);
	margin: 0 auto 16px;
	max-width: 560px;
}
/* Micro-refuerzo de confianza: baja la fricción de arrancar el cotizador. */
.ob-cot-reassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	margin: 0 auto 24px;
}
.ob-cot-reassure span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-verde-osc);
	background: #E1F5EE;
	padding: 6px 14px;
	border-radius: 999px;
}
.ob-cot-hint {
	text-align: center;
	color: var(--ob-gris);
	font-size: 15px;
	margin-top: 18px;
}

/* Tarjetas de uso (paso 0) */
.ob-cot-cards {
	display: grid;
	/* Grilla fluida: 3 columnas en desktop, 2 en tablet, 1 en mobile. Cards más
	   chicas = paso 0 más liviano y dinámico (adiós "bloques grandes"). */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.ob-cot-c {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 2px solid var(--ob-linea);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.18s, transform 0.18s;
	font: inherit;
	color: inherit;
	padding: 0;
}
.ob-cot-c:hover {
	border-color: var(--ob-verde);
	box-shadow: 0 12px 28px rgba(20, 69, 122, 0.14);
	transform: translateY(-3px);
}
.ob-cot-c:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}
.ob-cot-c.sel {
	border-color: var(--ob-azul);
	box-shadow: 0 8px 24px rgba(20, 69, 122, 0.15);
}
.ob-cot-c-ph {
	height: 128px;
	/* Fondo tintado suave: el producto POP-ea en vez de flotar sobre blanco. */
	background: linear-gradient(180deg, #fff 0%, var(--ob-gris-cl) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-bottom: 1px solid var(--ob-linea);
}
.ob-cot-c-ph img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.ob-cot-ph0 {
	color: #cbd5e0;
	font-size: 13px;
	text-align: center;
}
.ob-cot-c-tx {
	display: block;
	padding: 14px 16px;
}
.ob-cot-c-tt {
	display: block;
	font-size: 17px;
	color: var(--ob-grafito);
	font-weight: 700;
}
.ob-cot-c-d {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ob-gris);
	margin-top: 5px;
}
.ob-cot-c-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ob-verde-osc);
	background: #E1F5EE;
	padding: 3px 10px;
	border-radius: 20px;
	margin-top: 10px;
}
/* Pulso del catálogo: badge "N modelos para vos" (inyectado por JS). El
   catálogo REACCIONA a cada opción desde el primer paso. */
.ob-cot-c-count {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ob-azul);
}
.ob-cot-c-count svg { color: var(--ob-verde); flex: 0 0 14px; }
.ob-cot-c-count b { font-weight: 800; }
/* Puerta del indeciso: tarjeta de ayuda, tintada en azul de marca para leerse
   como "el que no sabe, por acá" y no como otra silla más. */
.ob-cot-c-help {
	border-color: var(--ob-azul);
	background: #F7FAFD;
	text-decoration: none;
}
.ob-cot-c-ph-help {
	color: var(--ob-azul);
	background: linear-gradient(180deg, #F7FAFD 0%, #E6EFF8 100%);
}

/* Contador del total del surtido, arriba de las cards (inyectado por JS). */
.ob-cot-pulse {
	text-align: center;
	font-size: 15px;
	color: var(--ob-gris);
	background: var(--ob-gris-cl);
	border-radius: 12px;
	padding: 12px 18px;
	margin: 0 auto 20px;
	max-width: 620px;
}
.ob-cot-pulse b { color: var(--ob-azul); font-weight: 800; }

/* Opciones (paso 1). auto-fit y no repeat(3): las preguntas tienen 2, 3 o 4
   opciones — el 3 fijo dejaba un huérfano solo abajo con 4 (peso, asiento)
   y un hueco con 2 (critique 2026-07-27, consistencia). */
.ob-cot-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.ob-cot-opt {
	display: block;
	width: 100%;
	background: #fff;
	border: 2px solid var(--ob-linea);
	border-radius: 12px;
	padding: 18px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	font: inherit;
	color: inherit;
	min-height: 44px;
}
.ob-cot-opt:hover {
	border-color: var(--ob-verde);
}
.ob-cot-opt:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}
.ob-cot-opt.sel {
	border-color: var(--ob-azul);
	background: var(--ob-gris-cl);
}
.ob-cot-opt .ic {
	display: block;
	font-size: 30px;
}
.ob-cot-opt .tt {
	display: block;
	font-size: 16px;
	color: var(--ob-grafito);
	font-weight: 700;
	margin-top: 6px;
}
.ob-cot-opt .d {
	display: block;
	font-size: 14px;
	color: var(--ob-gris);
	margin-top: 4px;
}
/* Contador de modelos por preferencia (paso 1, inyectado por JS). */
.ob-cot-opt-n {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 800;
	color: var(--ob-azul);
	background: var(--ob-gris-cl);
	padding: 3px 10px;
	border-radius: 999px;
}
.ob-cot-opt.sel .ob-cot-opt-n { background: #fff; }
.ob-cot-talle {
	background: var(--ob-gris-cl);
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 18px;
	font-size: 14px;
	color: var(--ob-gris);
}
.ob-cot-talle b {
	color: var(--ob-azul);
}

/* Navegación */
.ob-cot-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	gap: 12px;
}
.ob-cot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ob-coral);
	/* Texto grafito en reposo (5.6:1), blanco solo en hover sobre coral-osc: mismo patron que style.css:112. */
	color: var(--ob-grafito);
	border: none;
	border-radius: 10px;
	padding: 13px 26px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	min-height: 48px;
	transition: background 0.15s;
}
.ob-cot-btn:hover {
	background: var(--ob-coral-osc);
	color: #fff;
}
.ob-cot-btn.ghost {
	background: #fff;
	color: var(--ob-azul);
	border: 2px solid var(--ob-linea);
}
.ob-cot-btn.ghost:hover {
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
}
.ob-cot-btn.wa {
	background: #0E7A3E;
	/* Blanco sobre verde 5.4:1 — el grafito base del boton coral daria 2.4:1 aca. */
	color: #fff;
}
.ob-cot-btn.wa:hover {
	background: #0A6533;
	color: #fff;
}

/* Resultado: tarjetas de modelos reales */
.ob-cot-rhead {
	text-align: center;
	margin-bottom: 22px;
}
.ob-cot-rhead h2 {
	font-size: 27px;
	color: var(--ob-azul);
}
.ob-cot-rhead p {
	color: var(--ob-gris);
	max-width: 620px;
	margin: 6px auto 0;
}
/* La cantidad real define el layout: con 1-2 modelos las columnas se ajustan
   y se centran — una tarjeta sola en una grilla de tres se leía "no tengo
   más" en vez de "esta es la tuya" (critique 2026-07-27). */
.ob-cot-models {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
	justify-content: center;
	gap: 16px;
}

/* Modo protagonista (un solo modelo): tarjeta horizontal con foto grande.
   El estado de 1 resultado es el MÁS frecuente en las ramas reales — se
   diseña como veredicto, no como grilla vacía. */
.ob-cot-models.solo {
	grid-template-columns: minmax(0, 680px);
}
.ob-cot-models.solo .ob-cot-m {
	flex-direction: row;
	align-items: stretch;
}
.ob-cot-models.solo .ob-cot-m .ob-cot-ph {
	height: auto;
	min-height: 240px;
	flex: 0 0 44%;
}
.ob-cot-models.solo .ob-cot-b {
	flex: 1;
	justify-content: center;
}

/* Echo del caso sobre el veredicto: lo elegido, en humano, con salida para
   cambiar UNA respuesta (no rehacer todo). */
.ob-cot-echo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	margin-bottom: 12px;
}
.ob-cot-echo-tx {
	font-size: 14px;
	font-weight: 600;
	color: var(--ob-gris);
	background: var(--ob-gris-cl);
	border-radius: 999px;
	padding: 8px 16px;
}
.ob-cot-echo-edit {
	font: 700 13px/1 Montserrat, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ob-azul);
	background: #fff;
	border: 2px solid var(--ob-linea);
	border-radius: 999px;
	padding: 0 16px;
	min-height: 44px;
	cursor: pointer;
	transition: border-color .18s var(--ob-ease), background .18s var(--ob-ease);
}
.ob-cot-echo-edit:hover {
	border-color: var(--ob-azul);
	background: var(--ob-gris-cl);
}

/* La línea del asesor en cada tarjeta: qué distingue a ESTE modelo. Verde =
   confianza (nunca coral: no es una acción). */
.ob-cot-why {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ob-verde-osc);
	background: #e1f5ee;
	border-radius: 8px;
	padding: 7px 10px;
	margin: 2px 0 6px;
}
.ob-cot-m {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.ob-cot-m .ob-cot-ph {
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: #fff;
	border-bottom: 1px solid var(--ob-linea);
}
.ob-cot-m .ob-cot-ph img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
.ob-cot-b {
	padding: 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ob-cot-sku {
	font-family: monospace;
	font-size: 12px;
	color: var(--ob-gris);
}
.ob-cot-m h3 {
	font-size: 15px;
	color: var(--ob-grafito);
	font-weight: 700;
	margin: 3px 0 8px;
	line-height: 1.3;
}
.ob-cot-m h3 a {
	color: inherit;
	text-decoration: none;
}
.ob-cot-m h3 a:hover {
	color: var(--ob-azul);
}
/* 15px, no 13: acá viven la capacidad y la medida del asiento — la info que
   decide el calce, para un público que sesga a baja visión (critique 2026-07-27). */
.ob-cot-spec {
	font-size: 15px;
	color: var(--ob-gris);
	margin-bottom: 3px;
}
.ob-cot-spec b {
	color: var(--ob-grafito);
}
.ob-cot-pr {
	font-size: 21px;
	font-weight: 800;
	color: var(--ob-azul);
	margin-top: 8px;
}
.ob-cot-cuo {
	font-size: 13px;
	color: var(--ob-verde-osc);
}
.ob-cot-cons {
	font-size: 15px;
	font-weight: 700;
	color: var(--ob-coral-osc);
	margin-top: 8px;
}
.ob-cot-add {
	width: 100%;
	margin-top: 12px;
	background: var(--ob-azul);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	min-height: 44px;
	transition: background 0.15s;
}
.ob-cot-add:hover {
	background: var(--ob-azul-osc);
}
.ob-cot-add.wa {
	background: #0E7A3E;
}
.ob-cot-add.wa:hover {
	background: #0A6533;
}

/* Cross-sell almohadones */
.ob-cot-cross {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	padding: 20px;
	margin-top: 22px;
}
.ob-cot-cross h3 {
	font-size: 18px;
	color: var(--ob-grafito);
	font-weight: 700;
}
.ob-cot-cross-sub {
	color: var(--ob-gris);
	font-size: 14px;
	margin-top: 4px;
}
.ob-cot-cross-lst {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-top: 14px;
}
.ob-cot-alm {
	border: 1px solid var(--ob-linea);
	border-radius: 10px;
	padding: 10px 8px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s;
	text-decoration: none;
	display: block;
}
.ob-cot-alm:hover {
	border-color: var(--ob-verde);
}
.ob-cot-alm img {
	height: 64px;
	object-fit: contain;
	max-width: 100%;
}
.ob-cot-alm .n {
	display: block;
	font-size: 14px;
	color: var(--ob-grafito);
	margin: 6px 0 3px;
	line-height: 1.25;
	min-height: 30px;
}
.ob-cot-alm .p {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ob-azul);
}
.ob-cot-extra {
	margin-top: 14px;
	font-size: 13px;
	color: var(--ob-gris);
}
.ob-cot-extra b {
	color: var(--ob-coral-osc);
}
.ob-cot-chip {
	display: inline-block;
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
	font-weight: 700;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 20px;
	margin: 2px;
}
/* Chip que abre la ficha (ramas consultivas con producto en Woo): se lee y se
   toca como un enlace. Sin botón de comprar — el cierre sigue siendo el asesor. */
.ob-cot-chip--link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 16px;
	margin: 4px;
	font-size: 14px;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--ob-azul);
	transition: background .15s ease, box-shadow .15s ease;
}
.ob-cot-chip--link:hover,
.ob-cot-chip--link:focus-visible {
	background: var(--ob-gris-cl);
	box-shadow: 0 2px 8px rgba(20, 69, 122, .18);
}
.ob-cot-chip-arrow {
	font-size: 18px;
	line-height: 1;
}

/* Confianza + postural */
.ob-cot-conf {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 14px;
	color: var(--ob-gris);
	margin-top: 22px;
}
.ob-cot-quote {
	background: #fff;
	border-radius: 18px;
	padding: 34px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(20, 69, 122, 0.1);
}
.ob-cot-quote .ic {
	font-size: 46px;
}
.ob-cot-quote h2 {
	color: var(--ob-grafito);
	margin: 10px 0;
}
.ob-cot-quote p {
	color: var(--ob-gris);
	max-width: 560px;
	margin: 0 auto 18px;
}
.ob-cot-quote-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
/* Captura de lead en el resultado: activo propio, gancho de asesoramiento */
.ob-cot-lead {
	max-width: 560px;
	margin: 26px auto 0;
	padding: 20px 22px;
	background: var(--ob-gris-cl);
	border: 1px solid var(--ob-linea);
	border-radius: 14px;
	text-align: left;
}
.ob-cot-lead-tx b {
	display: block;
	color: var(--ob-grafito);
	font-size: 16px;
	margin-bottom: 4px;
}
.ob-cot-lead-tx span {
	display: block;
	color: var(--ob-gris);
	font-size: 14px;
	margin-bottom: 14px;
}
.ob-cot-lead-field {
	margin-top: 10px;
}
.ob-cot-lead-field:first-of-type {
	margin-top: 0;
}
.ob-cot-lead-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ob-gris);
	margin-bottom: 4px;
}
.ob-cot-lead-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ob-cot-lead input {
	flex: 1 1 200px;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	border: 2px solid var(--ob-linea);
	border-radius: 10px;
	background: #fff;
	color: var(--ob-grafito);
}
.ob-cot-lead input:focus {
	outline: none;
	border-color: var(--ob-azul);
	box-shadow: 0 0 0 3px rgba(20, 69, 122, 0.15);
}
.ob-cot-lead-row .ob-cot-btn {
	flex: 0 0 auto;
}
.ob-cot-lead-name {
	width: 100%;
}
/* Honeypot: presente en el DOM pero invisible y fuera del tab (no display:none,
   para que el bot lo complete y lo delatemos). */
.ob-cot-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ob-cot-lead-msg {
	font-size: 14px;
	margin-top: 8px;
}
.ob-cot-lead-msg.err {
	color: #D63638;
	font-weight: 600;
}
.ob-cot-lead-ok {
	/* verde-osc (no verde) para pasar contraste como texto sobre blanco. */
	color: var(--ob-verde-osc, #17695A);
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	padding: 6px 0;
}
/* Lista de modelos posturales pediátricos (solo nombres, sin specs) */
.ob-cot-quote-list {
	max-width: 620px;
	margin: 0 auto 20px;
	text-align: center;
}
.ob-cot-quote-list .lbl {
	display: block;
	font-weight: 600;
	color: var(--ob-gris);
	font-size: 14px;
	margin-bottom: 10px;
}

/* Asesor real, siempre visible */
.ob-cot-advisor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	background: var(--ob-gris-cl);
	border: 1px solid var(--ob-linea);
	border-radius: 16px;
	padding: 18px 22px;
	margin-top: 30px;
}
.ob-cot-advisor-tx b {
	display: block;
	color: var(--ob-grafito);
	font-size: 16px;
}
.ob-cot-advisor-tx span {
	display: block;
	color: var(--ob-gris);
	font-size: 14px;
	margin-top: 2px;
}

@media (max-width: 760px) {
	.ob-cot-cards {
		grid-template-columns: 1fr;
	}
	/* auto-fit también acá: el `1fr 1fr` fijo reintroducía en mobile el mismo
	   huérfano que el auto-fit de desktop resuelve. El mínimo de 140px deja 2
	   columnas a 375px (4 opciones = 2+2, sin huérfano) y 3 en tablet. */
	.ob-cot-row {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
	/* Con TRES opciones, dos columnas siempre dejan una suelta abajo. Apiladas a
	   ancho completo se leen mejor que tres apretadas —el público sesga adulto
	   mayor— y desaparece el hueco. `:has()` degrada solo: sin soporte quedan
	   las 2 columnas de arriba, que es el comportamiento actual. */
	.ob-cot-row:has(> .ob-cot-opt:nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}
	.ob-cot-models {
		grid-template-columns: 1fr;
	}
	/* En mobile el modo protagonista se apila: foto arriba, texto abajo. */
	.ob-cot-models.solo .ob-cot-m {
		flex-direction: column;
	}
	.ob-cot-models.solo .ob-cot-m .ob-cot-ph {
		min-height: 190px;
		flex: none;
	}
	.ob-cot-cross-lst {
		grid-template-columns: 1fr 1fr;
	}
	.ob-cot-q,
	.ob-cot-rhead h2 {
		font-size: 23px;
	}
	.ob-cot-advisor {
		flex-direction: column;
		align-items: flex-start;
	}
	.ob-cot-advisor .ob-cot-btn {
		width: 100%;
	}
}

/* Relacionados: si la query propia [ob_related_products] no trae ningún
   producto (devuelve ''), no mostramos la banda gris vacía. Progressive
   enhancement con :has() — en navegadores sin soporte el selector se ignora
   y la banda se ve como antes (degradación segura). Detecta producto por la
   imagen de la tarjeta del loop de Woo. */
.ob-related:not(:has(ul.products img)) {
	display: none;
}

/* Estados deshabilitados: sin esto, un botón sin stock o un submit en curso se ve
   idéntico a uno activo. El público mayor, ante la duda de si su clic "funcionó",
   reintenta o abandona creyendo que la web está rota. Un patrón único para botones
   de compra, submits de formularios y el CTA del cotizador. (Auditoría 2026-07-11.) */
button:disabled,
button[disabled],
.wp-block-button__link[disabled],
.wp-block-button__link[aria-disabled="true"],
.ob-cot-btn:disabled,
.ob-cot-add:disabled,
.wc-block-components-button:disabled {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
}

/* ============================================================
   LANDINGS DE CAMPAÑA (Google Ads) — patterns/landing-content.php
   Todo nuevo selector va scopeado bajo `.ob-landing` para no filtrar
   estilos al resto del sitio. Los CTA (.ob-cat-cta-wa/-alt) y los chips
   de confianza (.ob-cat-chip) son globales A PROPÓSITO — se reusan tal
   cual, ver el comment-header del pattern.
   ============================================================ */

/* ---- 1) Hero split ---- */
.ob-landing-hero {
	background: linear-gradient(135deg, #eaf1f8 0%, var(--ob-soft) 55%, #fff 100%);
	border-bottom: 1px solid var(--ob-linea);
	padding: 44px 0;
}

.ob-landing-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 44px;
	align-items: center;
}

.ob-landing-hero-grid--nomedia {
	grid-template-columns: 1fr;
}

.ob-landing-hero-copy {
	max-width: 620px;
}

.ob-landing-eyebrow {
	margin: 0 0 10px;
	color: var(--ob-verde-osc);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	/* 14px = piso de metadato del sistema de diseño (publico adulto mayor). */
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ob-landing-h1 {
	margin: 0 0 16px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.12;
	letter-spacing: -.5px;
	text-wrap: balance;
}

.ob-landing-lead {
	margin: 0;
	color: var(--ob-gris);
	font-size: 18px;
	line-height: 1.6;
}

.ob-landing-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

.ob-landing-hero-media {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--ob-shadow-lift);
	aspect-ratio: 4 / 3.4;
	background: #fff;
}

/* contain, no cover (2026-07-30): la foto del hero es una FOTO DE PRODUCTO
   (primer SKU de la vitrina, fondo blanco) — cover la recortaba y el andador
   salía sin ruedas ni manijas. contain sobre la tarjeta blanca muestra el
   producto entero; el padding le da aire contra los bordes redondeados y el
   padding-bottom extra reserva la franja del caption "Ver ficha". */
.ob-landing-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 20px 20px 74px;
	display: block;
}

/* Caption comprable sobre la foto: nombre del modelo real + Ver ficha. */
.ob-landing-hero-caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	background: rgba(255, 255, 255, .95);
	border: 1px solid var(--ob-linea);
	border-radius: 12px;
	text-decoration: none;
	font-size: 14px;
	color: #3d4c5a;
}

.ob-landing-hero-caption b {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--ob-azul);
	white-space: nowrap;
}

.ob-landing-hero-caption:hover span,
.ob-landing-hero-caption:focus-visible span {
	text-decoration: underline;
}

/* Precio "desde" del hero: el dato que todo el que llega de un anuncio vino
   a buscar. Habla de claridad ("el precio que ves es el final"), nunca de
   superioridad — no competimos por precio. */
.ob-landing-hero-price {
	margin: 0 0 18px;
	font-size: 16px;
	color: #3d4c5a;
}

.ob-landing-hero-price strong {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: var(--ob-azul);
}

/* Puertas del fork (rollator vs fijo): el atajo del que ya decidió la rama.
   Subordinadas a los CTAs — tarjetas chicas, borde fino, sin coral. */
.ob-landing-hero-fork {
	margin-top: 24px;
}

.ob-landing-hero-fork-q {
	margin: 0 0 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ob-gris);
}

/* auto-fit, no 1fr 1fr: la landing genérica de sillas trae 3 puertas y las
   demás 2 — la grilla se acomoda sola sin tarjetas enanas. */
.ob-landing-hero-fork-doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	max-width: 640px;
}

.ob-landing-hero-door {
	display: block;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(16, 42, 67, .06);
	transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.ob-landing-hero-door:hover,
.ob-landing-hero-door:focus-visible {
	border-color: var(--ob-azul);
	box-shadow: 0 4px 14px rgba(16, 42, 67, .12);
	transform: translateY(-1px);
}

.ob-landing-hero-door-t {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	color: var(--ob-azul);
}

.ob-landing-hero-door-s {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	color: var(--ob-gris);
}

@media (max-width: 860px) {
	.ob-landing-hero {
		padding: 32px 0;
	}
	.ob-landing-hero-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.ob-landing-hero-copy {
		max-width: none;
	}
	.ob-landing-hero-media {
		aspect-ratio: 16 / 10;
	}
	.ob-landing-hero-ctas .ob-cat-cta-wa,
	.ob-landing-hero-ctas .ob-cat-cta-alt {
		width: 100%;
	}
	/* Puertas del fork apiladas: a 375px dos columnas dejan ~150px por
	   tarjeta y el título wrapea a 3 líneas — ilegible para este público. */
	.ob-landing-hero-fork-doors {
		grid-template-columns: 1fr;
		max-width: none;
	}
	.ob-landing-hero-caption {
		font-size: 13px;
	}
	/* Dieta mobile del hero (2026-07-30): a 375px era una pared de texto y el
	   CTA quedaba fuera de la primera pantalla — y acá aterrizan los anuncios.
	   h1 más compacto, lead al piso de 16px del sistema (nunca menos: público
	   adulto mayor) y el CTA sube. */
	.ob-landing-hero {
		padding: 24px 0;
	}
	.ob-landing-h1 {
		font-size: 26px;
		margin-bottom: 12px;
	}
	.ob-landing-lead {
		font-size: 16px;
		line-height: 1.5;
	}
	.ob-landing-hero-price {
		margin: 10px 0 0;
	}
	.ob-landing-hero-price strong {
		font-size: 20px;
	}
	/* La frase de claridad baja a línea propia: pegada al monto wrapeaba
	   partida en cualquier ancho chico. */
	.ob-landing-hero-price-note {
		display: block;
		font-size: 13.5px;
		margin-top: 2px;
	}
	.ob-landing-hero-ctas {
		margin-top: 16px;
	}
}

/* ---- 2) Chips de confianza ---- */
.ob-landing-chips {
	justify-content: center;
	padding: 22px 0;
	margin: 0;
	border-bottom: 1px solid var(--ob-linea);
}

/* ---- 3) Beneficios ---- */
.ob-landing-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.ob-landing-benefit {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	padding: 26px 24px;
	transition: transform .18s var(--ob-ease), box-shadow .18s var(--ob-ease);
}

.ob-landing-benefit:hover {
	transform: translateY(-4px);
	box-shadow: var(--ob-shadow-lift);
}

.ob-landing-benefit-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--ob-gris-cl);
	color: var(--ob-azul);
	margin-bottom: 14px;
}

.ob-landing-benefit-ic svg {
	width: 26px;
	height: 26px;
}

.ob-landing-benefit h3 {
	margin: 0 0 8px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
}

.ob-landing-benefit p {
	margin: 0;
	color: var(--ob-gris);
	font-size: 15.5px;
	line-height: 1.55;
}

@media (max-width: 760px) {
	.ob-landing-benefits {
		grid-template-columns: 1fr;
	}
}

/* ---- 4) Grilla de productos en vivo ---- */
.ob-landing-grid-wrap {
	scroll-margin-top: 90px;
}

.ob-landing-grid.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* Puente de cross-sell y grupos de la vitrina: 3 tarjetas, no 4. */
.ob-landing-grid.products.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Grilla agrupada (grid_groups): título + encuadre por rama, ver
   landing-content.php sección 4. */
.ob-landing-grid-group + .ob-landing-grid-group {
	margin-top: 36px;
}

.ob-landing-grid-group-t {
	font-family: Montserrat, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--ob-azul);
	margin: 0 0 4px;
}

.ob-landing-grid-group-lead {
	color: var(--ob-gris);
	font-size: 15.5px;
	margin: 0 0 16px;
}

/* Cierre con acción post-FAQ (peak-end), ver landing-content.php sección 9. */
.ob-landing-close {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}

.ob-landing-close-t {
	font-family: Montserrat, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--ob-azul);
	margin: 0 0 6px;
}

.ob-landing-close-sub {
	color: var(--ob-gris);
	font-size: 16px;
	margin: 0 0 18px;
}

.ob-landing-close .ob-cat-cta-wa {
	display: inline-flex;
}

.ob-landing-card-sku {
	margin: 2px 0 0;
	color: var(--ob-gris);
	/* 14px es el piso de "legal/metadato" del sistema de diseño (footer);
	   12.5px quedaba por debajo de todo lo demas del sitio. */
	font-size: 14px;
	text-align: center;
}

.ob-landing-grid-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.ob-landing-grid-more:hover {
	text-decoration: underline;
}

.ob-landing-grid-empty {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	color: var(--ob-gris);
	font-size: 16px;
}

.ob-landing-grid-empty .ob-cat-cta-wa {
	display: inline-flex;
	margin-top: 16px;
}

@media (max-width: 960px) {
	/* El selector .columns-3 repetido no es redundante: la regla desktop de 3
	   columnas es más específica que esta, y sin él seguiría ganando en mobile. */
	.ob-landing-grid.products,
	.ob-landing-grid.products.columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.ob-landing-grid.products,
	.ob-landing-grid.products.columns-3 {
		grid-template-columns: 1fr;
	}
}

/* ---- 5) Comparativa aluminio vs acero ----
   La pieza que más decide la compra de la landing, así que se lee como tarjeta
   y no como planilla. La columna `is-focus` (el material del que habla la
   página) lleva una banda de marca que guía el ojo SIN declararla ganadora:
   el copy de la sección promete comparación honesta y dice que el otro material
   no es inferior — tildes contra cruces contradirían el texto con el diseño. */
.ob-landing-compare-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	box-shadow: 0 1px 2px rgba(16, 42, 74, .04), 0 8px 24px rgba(16, 42, 74, .06);
}

.ob-landing-compare {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	background: #fff;
}

.ob-landing-compare th,
.ob-landing-compare td {
	padding: 16px 20px;
	text-align: left;
	font-size: 15px;
	border-bottom: 1px solid var(--ob-linea);
	vertical-align: top;
}

.ob-landing-compare thead th {
	background: var(--ob-soft);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	padding-top: 18px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--ob-linea);
}

.ob-landing-compare tbody th {
	color: var(--ob-azul);
	font-weight: 700;
	white-space: nowrap;
}

.ob-landing-compare tbody td {
	color: var(--ob-gris);
	line-height: 1.5;
}

/* Cebra suave: son 5 filas de 3 columnas — sin guía horizontal el ojo salta de
   fila al pasar de "Aluminio" a "Acero" y la comparación se pierde. */
.ob-landing-compare tbody tr:nth-child(even) th,
.ob-landing-compare tbody tr:nth-child(even) td {
	background: rgba(16, 42, 74, .022);
}

/* --- Columna en foco: banda vertical de marca --- */
.ob-landing-compare .is-focus {
	background: rgba(20, 69, 122, .05);
	box-shadow: inset 1px 0 0 rgba(20, 69, 122, .12), inset -1px 0 0 rgba(20, 69, 122, .12);
}

.ob-landing-compare tbody tr:nth-child(even) td.is-focus {
	background: rgba(20, 69, 122, .07);
}

.ob-landing-compare thead th.is-focus {
	background: rgba(20, 69, 122, .11);
}

.ob-landing-compare tbody td.is-focus {
	color: var(--ob-texto, #1B2A3D);
	font-weight: 600;
}

.ob-landing-compare-mat {
	display: block;
	color: var(--ob-gris);
	font-size: 17px;
}

.ob-landing-compare-mat--alu {
	color: var(--ob-azul);
}

/* Bajada del encabezado: dice a QUIÉN le sirve cada material. Sin esto la
   tabla obliga a leer las 5 filas para sacar la conclusión que el visitante
   quiere en 2 segundos. */
.ob-landing-compare-note {
	display: block;
	margin-top: 3px;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--ob-gris);
	white-space: normal;
}

/* Sobre el tinte de la columna en foco, el gris de marca queda en ~4.5:1 — pasa
   AA raspando. Con público mayor no se navega al filo del mínimo: se oscurece. */
.ob-landing-compare thead th.is-focus .ob-landing-compare-note {
	color: #3D4E5E;
}

/* Salida al final de cada columna: el que se da cuenta de que le sirve el otro
   material se va al catálogo filtrado, no de la página. */
.ob-landing-compare tfoot th,
.ob-landing-compare tfoot td {
	border-bottom: none;
	padding-top: 18px;
	padding-bottom: 18px;
}

.ob-landing-compare-cta {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ob-azul);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 160ms ease;
}

.ob-landing-compare-cta:hover,
.ob-landing-compare-cta:focus-visible {
	border-bottom-color: currentColor;
}

/* Mismo peso y color que el CTA focus A PROPÓSITO: la tabla dice "la manual
   no es una opción menor" y un link gris/fino la contradecía con el diseño
   (critique 2026-07-27, P2). La clase queda por compat con el markup. */
.ob-landing-compare-cta--alt {
	color: var(--ob-azul);
}

/* Sin tfoot, la última fila cierra sola contra el borde redondeado del wrap.
   Con tfoot (clase `has-foot`, la pone el markup) conserva su línea, que ahí
   sí separa los datos de los links de salida. Se resuelve con una clase y no
   con :has() a propósito: parte del público navega en equipos viejos. */
.ob-landing-compare:not(.has-foot) tbody tr:last-child th,
.ob-landing-compare:not(.has-foot) tbody tr:last-child td {
	border-bottom: none;
}

/* En mobile la tabla NO se achica: se APILA en tarjetas. Comprimir a 13px una
   comparativa que decide la compra es ilegible para nuestro publico (la hija
   que elige la silla desde el telefono). Cada fila pasa a ser una tarjeta y
   cada celda dice su material via ::before (atributo data-mat del markup). */
@media (max-width: 640px) {
	/* El wrap deja de ser tarjeta: cada FILA pasa a serlo. Si no, quedaría una
	   tarjeta con sombra conteniendo tarjetas con borde. */
	.ob-landing-compare-wrap {
		overflow-x: visible;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.ob-landing-compare,
	.ob-landing-compare tbody,
	.ob-landing-compare tfoot,
	.ob-landing-compare tr,
	.ob-landing-compare th,
	.ob-landing-compare td {
		display: block;
		width: auto;
	}

	.ob-landing-compare {
		min-width: 0;
	}

	.ob-landing-compare thead {
		display: none;
	}

	/* La banda vertical no existe apilado: el foco se marca con el borde
	   izquierdo de la celda, que es la traducción honesta del mismo recurso. */
	.ob-landing-compare .is-focus,
	.ob-landing-compare tbody tr:nth-child(even) td.is-focus {
		background: rgba(20, 69, 122, .05);
		box-shadow: inset 3px 0 0 var(--ob-azul);
	}

	/* La cebra del desktop NO aplica apilado (cada fila ya es su propia tarjeta),
	   pero se repite el selector con :nth-child para ganarle en especificidad:
	   si solo se reseteara, el `th` de las filas pares perdería el azul y quedaría
	   texto BLANCO sobre fondo blanco — el label de la fila desaparece. */
	.ob-landing-compare tbody tr:nth-child(even) th {
		background: var(--ob-azul);
	}

	.ob-landing-compare tbody tr:nth-child(even) td:not(.is-focus) {
		background: none;
	}

	/* Los links de salida se despegan de las tarjetas y quedan como fila propia. */
	.ob-landing-compare tfoot th {
		display: none;
	}

	.ob-landing-compare tfoot td {
		border: 0;
		padding: 6px 2px;
	}

	.ob-landing-compare tfoot td.is-focus {
		background: none;
		box-shadow: none;
	}

	.ob-landing-compare tbody tr {
		margin-bottom: 14px;
		border: 1px solid var(--ob-borde, #E4E9F0);
		border-radius: 12px;
		overflow: hidden;
	}

	.ob-landing-compare tbody th {
		background: var(--ob-azul);
		color: #fff;
		font-size: 16px;
		padding: 12px 14px;
	}

	.ob-landing-compare tbody td {
		padding: 12px 14px;
		font-size: 16px;
		line-height: 1.5;
		border-bottom: 1px solid var(--ob-borde, #E4E9F0);
	}

	.ob-landing-compare tbody tr td:last-child {
		border-bottom: 0;
	}

	.ob-landing-compare tbody td::before {
		content: attr(data-mat);
		display: block;
		margin-bottom: 2px;
		color: var(--ob-azul);
		font-family: Montserrat, sans-serif;
		font-weight: 700;
		font-size: 14px;
	}
}

/* ---- 8) FAQ ---- */
.ob-landing-faq {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ob-landing-faq-item {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: 12px;
	padding: 4px 20px;
}

.ob-landing-faq-item summary {
	padding: 16px 0;
	color: var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
}

.ob-landing-faq-item summary::-webkit-details-marker {
	display: none;
}

.ob-landing-faq-item summary::after {
	content: "+";
	float: right;
	color: var(--ob-azul);
	font-weight: 700;
}

.ob-landing-faq-item[open] summary::after {
	content: "–";
}

.ob-landing-faq-item p {
	margin: 0 0 18px;
	color: var(--ob-gris);
	font-size: 15px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.ob-landing-benefit {
		transition: none;
	}
}

/* =========================================================================
   ZOOM SUAVE DE LA FOTO AL PASAR EL MOUSE (tarjetas de producto)
   =========================================================================
   Las fotos usan `object-fit: contain` en una caja de alto fijo (nunca se
   recortan: el catálogo tiene relaciones de aspecto dispares y recortar una
   silla le corta ruedas o apoyapiés). Eso deja aire alrededor de la foto.
   El zoom del 4% ocupa parte de ese aire — la foto "respira" hacia el marco
   sin salirse ni deformar nada.

   Tres decisiones deliberadas:
   1. `(hover: hover) and (pointer: fine)` — solo mouse. En touch el hover se
      queda "pegado" tras el tap y la foto quedaría agrandada sin motivo.
   2. 4% y 350ms — el público es adulto mayor: el movimiento tiene que
      insinuar que la tarjeta es clickeable, no llamar la atención sobre sí
      mismo. Un zoom más marcado marea y compite con el CTA.
   3. `overflow: hidden` en la tarjeta para que el zoom quede recortado
      contra el borde redondeado y no pise a la tarjeta vecina.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {

	.wp-block-woocommerce-product-template .wc-block-components-product-image,
	.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image,
	.ob-landing-grid li.product {
		overflow: hidden;
	}

	.wp-block-woocommerce-product-template .wc-block-components-product-image img,
	.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img,
	.ob-landing-grid li.product img {
		transition: transform 350ms ease-out;
	}

	.wp-block-woocommerce-product-template > li:hover .wc-block-components-product-image img,
	.wp-block-woocommerce-product-template > li:hover .wp-block-woocommerce-product-image img,
	.wp-block-woocommerce-product-template .wc-block-product:hover .wc-block-components-product-image img,
	.wp-block-woocommerce-product-template .wc-block-product:hover .wp-block-woocommerce-product-image img,
	.ob-landing-grid li.product:hover img {
		transform: scale(1.04);
	}
}

/* Movimiento reducido: quien lo pidió a nivel sistema no ve NADA moverse.
   No es un bug — es la preferencia del usuario y manda sobre el efecto. */
@media (prefers-reduced-motion: reduce) {

	.wp-block-woocommerce-product-template .wc-block-components-product-image img,
	.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img,
	.ob-landing-grid li.product img {
		transition: none;
	}

	.wp-block-woocommerce-product-template > li:hover .wc-block-components-product-image img,
	.wp-block-woocommerce-product-template > li:hover .wp-block-woocommerce-product-image img,
	.ob-landing-grid li.product:hover img {
		transform: none;
	}
}

/* ============================================================
   Caja de la foto principal de la ficha (single-product)
   ============================================================
   El bloque woocommerce/product-image-gallery no encajona nada: renderiza
   el alto que dicte la proporción del original. Medido en headless sobre
   producción a 1920x1080 (2026-07-30), con la columna de galería en 512px
   de ancho, eso daba un rango de 270px a 2399px de alto según el producto
   — el bastón canadiense (252x1181) ocupaba 2399px, dos pantallas y media,
   y el 46% del catálogo pasaba los 560px. Además el CTA cambiaba de altura
   en cada ficha, porque la columna izquierda mandaba.

   1/1 y NO 3/4 (que es lo que usan las tarjetas de listado, más arriba en
   este archivo): aquel 3/4 se eligió contra una mediana de catálogo de
   ~0.74 que YA NO ES LA REAL. Medición de los 99 productos con foto del
   product-sitemap (2026-07-30): ancho/alto va de 0.21 a 1.90 con mediana
   0.92 — o sea 1/1 queda al doble de cerca de la mediana que 3/4
   (|1.00-0.92| = 0.08 contra |0.75-0.92| = 0.17). Si se vuelve a tocar
   esto, medir de nuevo antes: el catálogo se mueve.

   Sin max-height a propósito, por dos razones. Una: a 1/1 con el ancho
   natural de la columna la caja ya se autolimita (512x512 en desktop,
   ~375x375 en mobile). Dos: `width:100%` + `aspect-ratio` + `max-height`
   NO conserva la relación — el tope recorta el alto pero el ancho se
   queda en 100%, así que la caja deja de tener el ratio pedido (para
   topar un ratio hay que topar el ANCHO). Verificado en headless.

   `contain` nunca recorta, sea cual sea la proporción del original: los
   extremos (bastones muy verticales, camas apaisadas) quedan con aire a
   los lados o arriba, nunca cortados. Es deliberado — es equipamiento
   médico, el comprador tiene que ver la pieza entera. */
.ob-product .woocommerce-product-gallery__image img,
.ob-product .woocommerce-product-gallery .wp-post-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: #fff;
}

/* ============================================================
   Lightbox de la ficha (assets/ob-lightbox.js)
   Solo se ejecuta en single-product.html (is_product()) — ver el enqueue
   condicional en functions.php. En listados/landing NUNCA se carga este JS,
   así que estas reglas nunca compiten con el clic-a-la-ficha de las tarjetas.
   ============================================================ */

/* El trigger nativo de WooCommerce (36px, ícono emoji de una CDN externa)
   queda enqueueado por Kadence pero no abre nada con un clic real en este
   tema de bloques (ver cabecera de ob-lightbox.js) — se oculta y el propio
   .ob-gallery-zoom-btn lo reemplaza. */
.woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce-product-gallery {
	position: relative;
}

/* Contexto de posición para la lupa: el botón se cuelga del visor de la foto
   grande (.flex-viewport, lo crea flexslider), NO de la galería entera — la
   galería incluye la fila de thumbnails y el botón quedaba flotando al lado
   de las miniaturas, abajo de la foto (visto en producción 2026-07-31). */
.woocommerce-product-gallery .flex-viewport {
	position: relative;
}

.woocommerce-product-gallery__image img {
	cursor: zoom-in;
}

/* Thumbnails de la galería: el CSS de Kadence (woocommerce.min.css) los deja
   enanos (60×65) y APAGADOS (opacity .5 sobre fotos con fondo blanco = grises
   sucios), centrados con un translate raro y margin-top -32px. Sus selectores
   (`.woocommerce div.product div.images .flex-control-thumbs li img`, más
   variantes `li:first-child`/`li:nth-child(n)` que llegan a 0-5-3) le GANAN a
   cualquier selector razonable del tema hijo Y carga después (gotcha
   documentado en CLAUDE.md) → acá va !important, no hay vuelta elegante.
   Diseño: 72px, a todo color, tarjeta con borde y el activo marcado en azul
   de marca — mismo lenguaje que las tarjetas del resto del sitio. */
.ob-product .woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	gap: 10px;
	position: static !important;
	left: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.ob-product .woocommerce-product-gallery ol.flex-control-thumbs li {
	float: none !important;
	width: 72px !important;
	height: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.ob-product .woocommerce-product-gallery ol.flex-control-thumbs li img {
	display: block;
	width: 72px !important;
	height: 72px !important;
	object-fit: contain;
	background: #fff;
	padding: 4px;
	border: 2px solid var(--ob-linea) !important;
	border-radius: 10px;
	opacity: 1 !important;
	cursor: pointer;
	transition: border-color .15s var(--ob-ease, ease);
}

.ob-product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.ob-product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	border-color: var(--ob-azul) !important;
}

/* Affordance de lupa, ≥44px de lado (público adulto mayor: el clic en la
   foto tiene que ser evidente). */
.ob-gallery-zoom-btn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--ob-azul);
	box-shadow: var(--ob-shadow-lift);
	cursor: zoom-in;
	transition: transform .15s var(--ob-ease), background-color .15s var(--ob-ease);
}

.ob-gallery-zoom-btn:hover {
	background: var(--ob-azul);
	color: #fff;
}

.ob-gallery-zoom-btn:focus-visible {
	outline: 3px solid var(--ob-azul);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.ob-gallery-zoom-btn:hover {
		transform: scale(1.06);
	}
}

/* ---- Diálogo modal ---- */
.ob-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 23, 33, 0);
	opacity: 0;
	transition: opacity .2s var(--ob-ease), background-color .2s var(--ob-ease);
}

.ob-lightbox.is-open {
	background: rgba(15, 23, 33, .92);
	opacity: 1;
}

.ob-lightbox-dialog {
	position: relative;
	width: 100%;
	max-width: 900px;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ob-lightbox-stage {
	max-width: 100%;
	max-height: calc(100vh - 100px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ob-lightbox-img {
	max-width: 100%;
	max-height: calc(100vh - 100px);
	width: auto;
	height: auto;
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

.ob-lightbox-close,
.ob-lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--ob-grafito);
	cursor: pointer;
	transition: background-color .15s var(--ob-ease);
}

.ob-lightbox-close:hover,
.ob-lightbox-nav:hover {
	background: #fff;
	color: var(--ob-azul);
}

.ob-lightbox-close:focus-visible,
.ob-lightbox-nav:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.ob-lightbox-close {
	top: -8px;
	right: -8px;
}

.ob-lightbox-nav {
	top: 50%;
	transform: translateY(-50%);
}

.ob-lightbox-prev {
	left: -8px;
}

.ob-lightbox-next {
	right: -8px;
}

.ob-lightbox-counter {
	position: absolute;
	bottom: -34px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

@media (max-width: 600px) {
	.ob-lightbox {
		padding: 16px;
	}

	.ob-lightbox-close {
		top: 8px;
		right: 8px;
	}

	.ob-lightbox-prev {
		left: 8px;
	}

	.ob-lightbox-next {
		right: 8px;
	}

	.ob-lightbox-counter {
		bottom: -28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ob-lightbox {
		transition: none;
	}

	.ob-gallery-zoom-btn {
		transition: none;
	}
}

/* ============================================================
   MI CUENTA · dashboard (includes/mi-cuenta.php)
   ------------------------------------------------------------
   Pantalla post-compra, no de gestión: baja la ansiedad de "¿dónde
   está mi pedido?". Público objetivo incluye adultos mayores y
   familiares con apuro — cuerpo 17px mínimo, objetivos táctiles
   >=44px, un único CTA coral (el asesor de WhatsApp).
   ============================================================ */

.ob-mc-dashboard {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 8px 0 24px;
}

.ob-mc-greeting {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--ob-grafito);
	line-height: 1.25;
}

.ob-mc-card {
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	box-shadow: var(--ob-shadow);
	padding: 22px 24px;
}

/* --- Tarjeta de pedido --- */

.ob-mc-order-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 6px;
}

.ob-mc-order-number {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--ob-azul);
}

.ob-mc-status {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
}

/* Verde: va bien (se está preparando o ya se entregó). */
.ob-mc-status--ok {
	background: #E9F6F1;
	color: var(--ob-verde-osc);
}

/* Gris: en espera, sin acción del cliente todavía. */
.ob-mc-status--wait {
	background: var(--ob-gris-cl);
	color: var(--ob-gris);
}

/* Coral oscuro: necesita atención (cancelado, reintegrado, pago no completado). */
.ob-mc-status--alert {
	background: #FBE7DD;
	color: var(--ob-coral-osc);
}

.ob-mc-order-date {
	margin: 0 0 14px;
	font-size: 17px;
	color: var(--ob-gris);
}

.ob-mc-order-items {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 17px;
	color: var(--ob-grafito);
	line-height: 1.6;
}

.ob-mc-order-items li {
	padding-left: 18px;
	position: relative;
}

.ob-mc-order-items li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ob-azul-cl);
}

.ob-mc-order-items-more {
	color: var(--ob-gris);
	font-style: italic;
}

.ob-mc-order-total {
	margin: 0 0 16px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--ob-grafito);
}

.ob-mc-order-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--ob-azul);
	text-decoration: none;
}

.ob-mc-order-link:hover {
	color: var(--ob-azul-osc);
	text-decoration: underline;
}

/* --- Estado vacío (sin pedidos todavía) --- */

.ob-mc-empty-tt {
	margin: 0 0 6px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--ob-grafito);
}

.ob-mc-empty-sub {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ob-gris);
}

.ob-mc-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ob-mc-empty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--ob-azul);
	border: 2px solid var(--ob-azul);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	transition: background-color .18s var(--ob-ease), color .18s var(--ob-ease);
}

.ob-mc-empty-btn:hover {
	background: var(--ob-azul-osc);
	border-color: var(--ob-azul-osc);
	color: #fff;
}

.ob-mc-empty-btn--ghost {
	background: transparent;
	color: var(--ob-azul);
}

.ob-mc-empty-btn--ghost:hover {
	background: var(--ob-soft);
	color: var(--ob-azul-osc);
}

/* --- Asesor por WhatsApp: la palanca principal de la pantalla. Único
   coral de esta vista. --- */

.ob-mc-wa {
	background: #FFF6F1;
	border-color: #FFD8BF;
}

.ob-mc-wa-tt {
	margin: 0 0 6px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--ob-grafito);
}

.ob-mc-wa-sub {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ob-gris);
}

.ob-mc-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--ob-coral);
	color: var(--ob-grafito);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	box-shadow: var(--ob-shadow-coral);
	transition: background-color .18s var(--ob-ease), color .18s var(--ob-ease), transform .12s var(--ob-ease);
}

.ob-mc-wa-btn:hover {
	background: var(--ob-coral-osc);
	color: #fff;
	transform: translateY(-2px);
}

/* --- Accesos rápidos --- */

.ob-mc-quick {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.ob-mc-quick-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 96px;
	padding: 18px 12px;
	background: #fff;
	border: 1px solid var(--ob-linea);
	border-radius: var(--ob-r);
	box-shadow: var(--ob-shadow);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--ob-azul);
	text-align: center;
	text-decoration: none;
	transition: transform .18s var(--ob-ease), box-shadow .18s var(--ob-ease), border-color .18s var(--ob-ease);
}

.ob-mc-quick-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ob-shadow-lift);
	border-color: var(--ob-azul-cl);
}

.ob-mc-quick-card svg {
	width: 26px;
	height: 26px;
	stroke: var(--ob-azul);
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.ob-mc-card {
		padding: 18px;
	}

	.ob-mc-greeting {
		font-size: 22px;
	}

	.ob-mc-quick {
		grid-template-columns: 1fr;
	}
}