/* ========================================================================== BUXUS — CSS del tema -------------------------------------------------------------------------- Regla: acá NO se escriben valores sueltos. Todo sale de theme.json: Color ........ var(--wp--preset--color--*) (paleta del DS) Tipografía ... var(--wp--preset--font-size--*) (xs · s · m · l · precio-m · h-4…h-1 · display · precio-l) Espaciado .... var(--wp--preset--spacing--*) (10=4 · 20=8 · 30=12 · 40=16 · 50=24 · 60…90 fluidos) Radios ....... var(--wp--preset--border-radius--*) (sm=4 · md=8 · lg=16 · full) Resto ........ var(--wp--custom--*) (control, icono, borde, tracking, movimiento, capa, sombra, gutter…) Excepciones aceptadas: 0, 1, 100%, fracciones (fr), ángulos, opacidades. Puntos de corte (las media queries no aceptan variables): --móvil max-width: 599px (sólo ajustes que no se resuelven con clamp/auto-fit) 782px es el de la barra de admin de WordPress: no es del diseño. Todo lo que puede ser fluido usa clamp() o grid auto-fit, no media queries. Secciones = componentes del Figma (página Design System, frames 04 y 05): 0. Base · 1. Logo · 2. Icono · 3. Botón · 4. Etiqueta · 5. Muestra de color 6. Campo · 7. Cantidad · 8. Header · 9. Tarjeta de producto · 10. Beneficios 11. Footer · 12. Ficha de producto · 13. Carrito y checkout · 14. Secciones de contenido ========================================================================== */ /* Atajos locales (alias cortos de tokens de theme.json; no son valores nuevos) */ :root { --bx-c-marca: var(--wp--preset--color--lima); --bx-c-marca-hover: var(--wp--preset--color--lima-400); --bx-c-texto: var(--wp--preset--color--grafito); --bx-c-texto-2: var(--wp--preset--color--secundario); --bx-c-acento: var(--wp--preset--color--acento); --bx-c-borde: var(--wp--preset--color--borde); --bx-c-borde-fuerte: var(--wp--preset--color--borde-fuerte); --bx-c-fondo: var(--wp--preset--color--blanco); --bx-r-sm: var(--wp--preset--border-radius--sm); --bx-r-md: var(--wp--preset--border-radius--md); --bx-r-lg: var(--wp--preset--border-radius--lg); --bx-r-full: var(--wp--preset--border-radius--full); --bx-t-rapido: var(--wp--custom--movimiento--rapido); --bx-t-lento: var(--wp--custom--movimiento--lento); --bx-s-1: var(--wp--preset--spacing--10); --bx-s-2: var(--wp--preset--spacing--20); --bx-s-3: var(--wp--preset--spacing--30); --bx-s-4: var(--wp--preset--spacing--40); --bx-s-5: var(--wp--preset--spacing--50); /* Anillo de foco/selección: separación blanca + contorno */ --bx-anillo: 0 0 0 var(--wp--custom--borde--separacion) var(--bx-c-fondo); } /* ---------- 0. Base ---------- */ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { height: auto; } :where(.wp-site-blocks) > * { margin-block-start: 0; } .bx-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bx-hp { position: absolute; left: -9999px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- 1. Logo ---------- */ .buxus-logo-link { display: inline-flex; color: inherit; line-height: 0; } .buxus-logo { height: auto; } .buxus-header .buxus-logo { width: var(--wp--custom--logo--header); color: var(--bx-c-texto); } .buxus-footer .buxus-logo { width: var(--wp--custom--logo--footer); color: var(--bx-c-fondo); margin-bottom: var(--bx-s-2); } /* ---------- 2. Icono (24 px, trazo 2) ---------- */ .bx-icono { width: var(--wp--custom--icono--contenedor); height: var(--wp--custom--icono--contenedor); border-radius: var(--bx-r-full); background: var(--wp--preset--color--lima-50); display: inline-grid; place-items: center; flex: none; color: var(--bx-c-texto); } .bx-icono svg { width: var(--wp--custom--icono--sm); height: var(--wp--custom--icono--sm); } /* ---------- 3. Botón (Primario = theme.json · Secundario · Contorno · Texto) ---------- */ .wp-element-button, .wp-block-button__link { transition: background-color var(--bx-t-rapido), color var(--bx-t-rapido), box-shadow var(--bx-t-rapido); } .wp-block-button.is-style-secundario .wp-block-button__link { background: var(--bx-c-texto); color: var(--bx-c-fondo); } .wp-block-button.is-style-secundario .wp-block-button__link:hover { background: var(--wp--preset--color--grafito-900); } .wp-block-button.is-style-contorno .wp-block-button__link { background: transparent; color: var(--bx-c-texto); box-shadow: inset 0 0 0 var(--wp--custom--borde--medio) currentColor; } .wp-block-button.is-style-contorno .wp-block-button__link:hover { background: var(--bx-c-texto); color: var(--bx-c-fondo); box-shadow: none; } .has-grafito-background-color .wp-block-button.is-style-contorno .wp-block-button__link, .has-background-dim ~ * .wp-block-button.is-style-contorno .wp-block-button__link { color: var(--bx-c-fondo); } .has-grafito-background-color .wp-block-button.is-style-contorno .wp-block-button__link:hover { background: var(--bx-c-fondo); color: var(--bx-c-texto); } .wp-block-button.is-style-texto .wp-block-button__link { background: transparent; color: var(--bx-c-acento); padding-inline: 0; } .wp-block-button.is-style-texto .wp-block-button__link::after { content: " →"; } .wp-element-button.disabled, .wp-element-button:disabled { opacity: .5; cursor: not-allowed; } /* ---------- 4. Etiqueta (kicker de texto y badge) ---------- */ .is-style-etiqueta, .bx-etiqueta { font-size: var(--wp--preset--font-size--xs) !important; font-weight: 600; letter-spacing: var(--wp--custom--tracking--etiqueta); text-transform: uppercase; margin-bottom: var(--bx-s-2); } p.is-style-etiqueta:not(.has-text-color) { color: var(--bx-c-acento); } /* Badge sobre la foto (NUEVO, OFERTA…) */ .wc-block-components-product-sale-badge, .onsale { background: var(--bx-c-marca) !important; color: var(--wp--preset--color--grafito-950) !important; border: 0 !important; border-radius: var(--bx-r-sm) !important; font-size: var(--wp--preset--font-size--xs) !important; font-weight: 600; letter-spacing: var(--wp--custom--tracking--etiqueta); text-transform: uppercase; padding: var(--bx-s-1) var(--bx-s-2) !important; } .bx-pendiente { background: color-mix(in srgb, var(--wp--preset--color--aviso) 14%, var(--bx-c-fondo)); color: var(--wp--preset--color--aviso); padding: 0 var(--bx-s-1); border-radius: var(--bx-r-sm); font-size: .9em; } /* ---------- 5. Muestra de color (selector de variante + puntos en tarjeta) ---------- */ .bx-swatches { display: flex; align-items: center; gap: var(--bx-s-3); margin-block: var(--bx-s-2) var(--bx-s-3); } .bx-swatch { width: var(--wp--custom--control--sm); height: var(--wp--custom--control--sm); padding: 0; border: 0; cursor: pointer; border-radius: var(--bx-r-full); background: var(--bx-color); box-shadow: var(--wp--custom--sombra--filete); transition: box-shadow var(--bx-t-rapido); } .bx-swatch:hover { box-shadow: var(--wp--custom--sombra--filete), var(--bx-anillo), 0 0 0 calc(var(--wp--custom--borde--separacion) + var(--wp--custom--borde--medio)) var(--bx-c-borde-fuerte); } .bx-swatch.is-activo { box-shadow: var(--wp--custom--sombra--filete), var(--bx-anillo), 0 0 0 calc(var(--wp--custom--borde--separacion) + var(--wp--custom--borde--grueso)) var(--bx-c-texto); } .bx-swatch:focus-visible { outline: var(--wp--custom--borde--grueso) solid var(--bx-c-acento); outline-offset: var(--bx-s-2); } .bx-swatches__nombre { font-weight: 600; margin-left: var(--bx-s-1); } .bx-dots { display: flex; gap: var(--bx-s-2); margin-block: var(--bx-s-1); } .bx-dot { width: var(--bx-s-4); height: var(--bx-s-4); border-radius: var(--bx-r-full); background: var(--bx-color); box-shadow: var(--wp--custom--sombra--filete); } /* ---------- 6. Campo de formulario ---------- */ .bx-form { display: grid; gap: var(--bx-s-1); max-width: var(--wp--custom--ancho--texto); } .bx-form__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wp--custom--grilla--campo)), 1fr)); column-gap: var(--bx-s-4); } .bx-campo { display: grid; gap: var(--bx-s-2); margin: 0 0 var(--bx-s-3); } .bx-campo label { font-size: var(--wp--preset--font-size--s); font-weight: 600; } .bx-opcional { font-weight: 400; color: var(--bx-c-texto-2); } .bx-campo input, .bx-campo textarea { font: inherit; color: var(--bx-c-texto); background: var(--bx-c-fondo); width: 100%; border: var(--wp--custom--borde--medio) solid var(--bx-c-borde-fuerte); border-radius: var(--bx-r-md); padding: var(--bx-s-3) var(--bx-s-4); box-sizing: border-box; /* sin esto el alto mínimo se sumaba al relleno (~75 px por campo) */ } .bx-campo input { height: var(--wp--custom--control--md); } /* 48 px, igual que botones y cantidad */ .bx-campo textarea { min-height: calc(var(--wp--custom--control--md) * 2.5); resize: vertical; } /* Si un campo queda solo en su fila de la grilla (p. ej. Localidad), ocupa el ancho completo */ .bx-form__grilla > .bx-campo:last-child:nth-child(odd) { grid-column: 1 / -1; } .bx-campo input:focus, .bx-campo textarea:focus { outline: none; border-color: var(--bx-c-acento); box-shadow: 0 0 0 var(--wp--custom--borde--separacion) var(--wp--preset--color--lima-100); } .bx-aviso { padding: var(--bx-s-4) var(--bx-s-5); border-radius: var(--bx-r-md); background: var(--wp--preset--color--lima-50); border-left: var(--bx-s-1) solid var(--bx-c-marca); } /* ---------- 7. Cantidad ---------- */ .quantity input.qty { height: var(--wp--custom--control--md); width: calc(var(--wp--custom--control--md) * 2); border: var(--wp--custom--borde--medio) solid var(--bx-c-borde-fuerte); border-radius: var(--bx-r-full); text-align: center; font: inherit; font-weight: 600; color: var(--bx-c-texto); background: var(--bx-c-fondo); } .quantity input.qty:focus { outline: none; border-color: var(--bx-c-acento); } /* ---------- 8. Header ---------- */ .buxus-topbar p { margin: 0; } .buxus-header { position: sticky; top: 0; z-index: var(--wp--custom--capa--header); } .admin-bar .buxus-header { top: 32px; } /* alto de la barra de admin de WP */ @media (max-width: 782px) { .admin-bar .buxus-header { top: 0; } } /* Ítem de menú: PASTILLA (no subrayado). El subrayado quedaba debajo de la línea base y el menú parecía "caído"; la pastilla es simétrica respecto del texto y repite la forma de los botones. */ .buxus-header .wp-block-navigation a { padding: var(--bx-s-1) var(--bx-s-3) !important; border-radius: var(--bx-r-full); transition: background-color var(--bx-t-rapido), color var(--bx-t-rapido); } .buxus-header .wp-block-navigation a:hover { background: var(--wp--preset--color--lima-50); } .buxus-header .wp-block-navigation .current-menu-item a, .buxus-header .wp-block-navigation a[aria-current="page"] { background: var(--wp--preset--color--lima-100); } .buxus-header-tools .wp-block-search__button, .buxus-header-tools .wc-block-mini-cart__button, .buxus-header-tools .wp-block-woocommerce-customer-account a { background: none; border: 0; color: var(--bx-c-texto); padding: var(--bx-s-2); } .buxus-header-tools svg { width: var(--wp--custom--icono--md); height: var(--wp--custom--icono--md); } .buxus-header-tools .wc-block-mini-cart__badge { background: var(--bx-c-marca); color: var(--wp--preset--color--grafito-950); font-weight: 600; } /* ---------- 9. Tarjeta de producto ---------- */ /* Grilla: más aire entre filas que entre columnas, para que el botón de una fila no se lea como parte de la foto de la fila de abajo. */ .buxus-grilla .wc-block-product-template { column-gap: var(--wp--custom--grilla--columnas) !important; /* row-gap en 0: con subgrid, el gap de la grilla se aplicaría también ENTRE las partes de cada card. La separación entre filas de cards la da el margen al pie de la card (abajo). */ row-gap: 0 !important; margin-bottom: calc(var(--wp--custom--grilla--filas) * -1) !important; align-items: stretch; /* WooCommerce calcula el ancho de columna asumiendo su gap de 1.25em; con nuestro gap hay que rehacer la fórmula: N columnas exactas, que bajan solas si no hay lugar. */ --bx-cols: 4; grid-template-columns: repeat(auto-fill, minmax(max(var(--wp--custom--grilla--card-min), calc((100% - (var(--bx-cols) - 1) * var(--wp--custom--grilla--columnas)) / var(--bx-cols))), 1fr)) !important; } .buxus-grilla .wc-block-product-template.columns-2 { --bx-cols: 2; } .buxus-grilla .wc-block-product-template.columns-3 { --bx-cols: 3; } .buxus-grilla .wc-block-product-template.columns-5 { --bx-cols: 5; } /* Card con SUBGRID: cada fila de la grilla comparte 5 pistas (foto · título · meta · precio · botón). El título más largo de la fila define el alto para todas → precio y botón siempre alineados, sin reservar líneas vacías ni cortar nombres. La card es una TARJETA BLANCA contenida (borde + radio) para que se lea dónde empieza y termina cada producto; la separación entre filas es el margen inferior del
  • (grilla/filas). */ .buxus-grilla .wc-block-product { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin: 0 0 var(--wp--custom--grilla--filas) !important; } .buxus-card { display: grid !important; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; height: auto; background: var(--bx-c-fondo); border: var(--wp--custom--borde--fino) solid var(--bx-c-borde); border-radius: var(--bx-r-lg); padding: var(--wp--custom--card--padding); transition: box-shadow var(--bx-t-rapido), border-color var(--bx-t-rapido); } .buxus-card:hover { box-shadow: var(--wp--custom--sombra--card); border-color: transparent; } .buxus-card > * { margin-block: 0 !important; } .buxus-card .wc-block-components-product-image { background: var(--bx-c-fondo); border-radius: var(--bx-r-md); overflow: hidden; margin-bottom: var(--bx-s-4) !important; } .buxus-card .wc-block-components-product-image img { aspect-ratio: 1; object-fit: cover; border-radius: 0 !important; transition: transform var(--bx-t-lento); } .buxus-card:hover .wc-block-components-product-image img { transform: scale(1.03); } .buxus-card .wp-block-post-title { font-weight: 600; line-height: var(--wp--custom--alto-linea--titulo); text-wrap: pretty; } .buxus-card .wp-block-post-title a { color: var(--bx-c-texto); text-decoration: none; } /* Toda la card es clickeable (el enlace del título se estira), el botón queda por encima */ .buxus-card { position: relative; } .buxus-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .buxus-card .wp-block-button, .buxus-card .wc-block-components-product-button { position: relative; z-index: 2; } .bx-meta { display: grid; gap: var(--bx-s-2); padding-top: var(--bx-s-1); align-content: start; } .bx-meta:empty { padding: 0; } .bx-art { margin: 0; font-size: var(--wp--preset--font-size--s); color: var(--bx-c-texto-2); } .buxus-card .bx-dots { margin: 0; } /* Precio y botón al pie de la card */ .buxus-card .wc-block-components-product-price { align-self: end; padding-top: var(--bx-s-3); } .buxus-card .wp-block-button, .buxus-card .wc-block-components-product-button { width: 100%; margin-top: var(--bx-s-3) !important; } .buxus-card .wc-block-components-product-button__button, .buxus-card .wp-block-button__link { width: 100%; justify-content: center; border-radius: var(--bx-r-full); min-height: var(--wp--custom--control--sm); } /* ---------- 10. Beneficios ---------- */ .wp-block-group.is-style-tarjeta { background: var(--bx-c-fondo); border-radius: var(--bx-r-lg); padding: var(--bx-s-5); } .bx-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wp--custom--grilla--beneficio)), 1fr)); gap: var(--bx-s-5); } .bx-beneficio { display: flex; gap: var(--bx-s-3); align-items: flex-start; } .bx-beneficio p { margin: 0; } .bx-beneficio strong { display: block; font-weight: 600; } .bx-beneficio span { font-size: var(--wp--preset--font-size--s); color: var(--bx-c-texto-2); } /* Variante compacta: lista en la ficha de producto */ .bx-mini-beneficios { list-style: none; display: grid; gap: var(--bx-s-3); font-size: var(--wp--preset--font-size--s); padding: var(--bx-s-4) 0 0; margin: var(--bx-s-5) 0 0 !important; border-top: var(--wp--custom--borde--fino) solid var(--bx-c-borde); } .bx-mini-beneficios li { display: flex; gap: var(--bx-s-3); align-items: center; } .bx-mini-beneficios svg { width: var(--wp--custom--icono--sm); height: var(--wp--custom--icono--sm); flex: none; color: var(--bx-c-acento); } /* ---------- 11. Footer ---------- */ .buxus-footer .buxus-footer-desc { color: var(--bx-c-borde-fuerte); max-width: var(--wp--custom--ancho--parrafo-corto); } .buxus-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bx-s-3); } .buxus-footer a { text-decoration: none; } .buxus-footer a:hover { text-decoration: underline; text-underline-offset: var(--wp--custom--borde--separacion); } .buxus-footer .buxus-footer-sep { border: 0; border-top: var(--wp--custom--borde--fino) solid var(--bx-c-texto-2); opacity: 1; } /* ---------- 12. Ficha de producto ---------- */ /* El bloque de galería de WooCommerce trae max-width: 512px: ocupa toda su columna (~720 px) */ .buxus-producto .wp-block-woocommerce-product-image-gallery { max-width: none; width: 100%; } .buxus-producto .woocommerce-product-gallery { width: 100% !important; float: none !important; background: none; overflow: visible; } /* Foto principal: su propio contenedor con radio (la foto trae su fondo) */ .buxus-producto .woocommerce-product-gallery .flex-viewport, .buxus-producto .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child { border-radius: var(--bx-r-lg); overflow: hidden; border: var(--wp--custom--borde--fino) solid var(--bx-c-borde); } /* Miniaturas: opacidad completa (antes 60% → se lavaban), borde fino; la activa con anillo grafito como la muestra de color seleccionada. */ .buxus-producto .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(6, 1fr); /* 6 fotos por producto: 3 colores + medidas + 2 ambientes */ gap: var(--bx-s-3); padding: var(--bx-s-3) 0 0 !important; margin: 0 !important; overflow: visible !important; /* WooCommerce lo trae en hidden y recortaba el anillo de la activa */ } .buxus-producto .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; } /* !important en box-shadow: WooCommerce pone `.woocommerce div.product div.images img { box-shadow: none }`, más específica */ .buxus-producto .flex-control-thumbs img { opacity: 1 !important; display: block; aspect-ratio: 1; object-fit: cover; cursor: pointer; border-radius: var(--bx-r-md); box-shadow: inset 0 0 0 var(--wp--custom--borde--fino) var(--bx-c-borde), 0 0 0 var(--wp--custom--borde--fino) var(--bx-c-borde) !important; transition: box-shadow var(--bx-t-rapido); } .buxus-producto .flex-control-thumbs img:hover { box-shadow: var(--bx-anillo), 0 0 0 calc(var(--wp--custom--borde--separacion) + var(--wp--custom--borde--medio)) var(--bx-c-borde-fuerte) !important; } .buxus-producto .flex-control-thumbs img.flex-active { box-shadow: var(--bx-anillo), 0 0 0 calc(var(--wp--custom--borde--separacion) + var(--wp--custom--borde--grueso)) var(--bx-c-texto) !important; } .buxus-producto-info > * + * { margin-block-start: var(--bx-s-3); } .buxus-precio-l, .buxus-precio-l .amount { font-size: var(--wp--preset--font-size--precio-l) !important; } .buxus-precio-l small { font-size: var(--wp--preset--font-size--s); color: var(--bx-c-texto-2); font-weight: 400; } .buxus-add-to-cart table.variations { border: 0; margin: var(--bx-s-2) 0 var(--bx-s-1); } .buxus-add-to-cart table.variations th, .buxus-add-to-cart table.variations td { display: block; padding: 0; border: 0; text-align: left; } .buxus-add-to-cart table.variations th label { font-size: var(--wp--preset--font-size--xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--wp--custom--tracking--etiqueta); } .buxus-add-to-cart .reset_variations, .buxus-add-to-cart .woocommerce-variation-price { display: none !important; } /* mismo precio en todos los colores */ .buxus-add-to-cart .woocommerce-variation { margin: 0; } .buxus-add-to-cart .woocommerce-variation:empty, .buxus-add-to-cart .woocommerce-variation-availability:empty { display: none; } .buxus-add-to-cart form.cart, .buxus-add-to-cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--bx-s-3); align-items: stretch; } .buxus-add-to-cart .single_add_to_cart_button { flex: 1 1 var(--wp--custom--grilla--boton); min-height: var(--wp--custom--control--md); border-radius: var(--bx-r-full) !important; } /* Pestañas */ .wp-block-woocommerce-product-details .wc-tabs { border-bottom: var(--wp--custom--borde--fino) solid var(--bx-c-borde); } .wp-block-woocommerce-product-details .wc-tabs li a { font-weight: 600; color: var(--bx-c-texto-2); text-decoration: none; } .wp-block-woocommerce-product-details .wc-tabs li.active a { color: var(--bx-c-texto); box-shadow: inset 0 calc(var(--wp--custom--borde--grueso) * -1) 0 var(--bx-c-marca); } .wp-block-woocommerce-product-details .woocommerce-Tabs-panel { max-width: var(--wp--custom--ancho--texto); } .woocommerce-Tabs-panel > h2:first-child { display: none; } .woocommerce-product-attributes { border: 0; } .woocommerce-product-attributes th, .woocommerce-product-attributes td { border-bottom: var(--wp--custom--borde--fino) solid var(--bx-c-borde); padding: var(--bx-s-3) 0; text-align: left; } /* Migas */ .wc-block-breadcrumbs, .woocommerce-breadcrumb, .wc-block-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--bx-c-texto-2); text-decoration: none; } /* ---------- 13. Carrito y checkout (bloques de WooCommerce con el DS) ---------- */ .wc-block-components-button:not(.is-link) { border-radius: var(--bx-r-full) !important; background: var(--bx-c-marca); color: var(--bx-c-texto); font-weight: 600; min-height: var(--wp--custom--control--md); } .wc-block-components-button:not(.is-link):hover { background: var(--bx-c-marca-hover); } .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select select { border-radius: var(--bx-r-md) !important; } .wc-block-components-text-input input:focus { border-color: var(--bx-c-acento) !important; box-shadow: 0 0 0 var(--wp--custom--borde--medio) var(--bx-c-acento) !important; } /* ---------- 14. Secciones de contenido ---------- */ /* Títulos: líneas parejas (evita viudas tipo "libre." sola en un renglón) */ h1, h2, h3, .has-display-font-size { text-wrap: balance; } /* Hero: el texto va a caja angosta → "Disfrutá la vida / al aire libre." y párrafo en 3 líneas */ .bx-hero .wp-block-columns > .wp-block-column:first-child > * { max-width: var(--wp--custom--ancho--hero); } .bx-radio, .bx-radio img { border-radius: var(--bx-r-lg); overflow: hidden; } .has-display-font-size { font-weight: 700; line-height: var(--wp--custom--alto-linea--display); letter-spacing: var(--wp--custom--tracking--display); } /* Tarjeta de categoría (home) */ .bx-cat { position: relative; border-radius: var(--bx-r-lg); overflow: hidden; } .bx-cat .wp-block-cover__background { background: var(--wp--custom--velo--foto) !important; opacity: 1 !important; } .bx-cat a { color: inherit; text-decoration: none; } .bx-cat a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .bx-cat img { transition: transform var(--bx-t-lento); } .bx-cat:hover img { transform: scale(1.04); } /* Secciones a todo el ancho: van pegadas entre sí (sin el blockGap del contenido, que dejaba franjas blancas entre fondos de color). */ .wp-block-post-content > .alignfull { margin-block: 0; } /* Cover a todo el ancho: el contenido "wide" queda a caja con el resto del sitio. WP pone width:auto al contenedor cuando la posición es custom (centro-izquierda, etc.), por eso se fuerza el 100% y se centra la caja adentro. */ .wp-block-cover.alignfull .wp-block-cover__inner-container { width: 100% !important; box-sizing: border-box; padding-inline: var(--wp--custom--gutter); } .wp-block-cover.alignfull .wp-block-cover__inner-container > .alignwide { max-width: var(--wp--style--global--wide-size); margin-inline: auto; width: 100%; } /* Lista con check */ .bx-lista-check { list-style: none; padding: 0; display: grid; gap: var(--bx-s-2); } .bx-lista-check li { padding-left: calc(var(--bx-s-5) + var(--bx-s-1)); position: relative; } .bx-lista-check li::before { content: ""; position: absolute; left: 0; top: .35em; width: var(--bx-s-4); height: calc(var(--bx-s-2) + 1px); border-left: var(--wp--custom--borde--grueso) solid var(--bx-c-marca); border-bottom: var(--wp--custom--borde--grueso) solid var(--bx-c-marca); transform: rotate(-45deg); } /* Preguntas frecuentes (bloque Detalles) */ .wp-block-details summary { font-weight: 600; font-size: var(--wp--preset--font-size--l); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--bx-s-4); } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: "+"; font-size: var(--wp--preset--font-size--h-4); line-height: 1; color: var(--bx-c-acento); transition: transform var(--bx-t-rapido); } .wp-block-details[open] summary::after { transform: rotate(45deg); } .wp-block-details > :not(summary) { margin-top: var(--bx-s-3); color: var(--bx-c-texto-2); } /* WhatsApp flotante */ .bx-wa { position: fixed; right: var(--wp--custom--gutter); bottom: var(--wp--custom--gutter); z-index: var(--wp--custom--capa--flotante); width: calc(var(--wp--custom--control--md) + var(--bx-s-2)); aspect-ratio: 1; border-radius: var(--bx-r-full); display: grid; place-items: center; background: var(--wp--custom--externo--whatsapp); color: var(--bx-c-fondo); box-shadow: var(--wp--custom--sombra--flotante); transition: transform var(--bx-t-rapido); } .bx-wa:hover { transform: scale(1.06); color: var(--bx-c-fondo); } /* Tarjetas de contenido en columnas (Nosotros): mismo alto por fila */ .bx-tarjetas > .wp-block-column { display: flex; } .bx-tarjetas .is-style-tarjeta { flex: 1; border: var(--wp--custom--borde--fino) solid var(--bx-c-borde); } .bx-tarjetas .is-style-tarjeta p { margin-block-start: var(--bx-s-2); } /* Institucional: lista de precios de tándems (sobre banda grafito) */ .bx-precios-tandem { list-style: none; padding: 0; margin: 0 0 var(--bx-s-5); display: grid; } .bx-precios-tandem li { display: flex; justify-content: space-between; gap: var(--bx-s-4); padding-block: var(--bx-s-3); border-bottom: var(--wp--custom--borde--fino) solid color-mix(in srgb, var(--bx-c-fondo) 20%, transparent); } .bx-precios-tandem strong { font-size: var(--wp--preset--font-size--precio-m); font-weight: 600; white-space: nowrap; } /* Formulario dentro de tarjeta: ocupa todo el ancho de su columna */ .is-style-tarjeta .bx-form { max-width: none; } /* Header: menú e íconos centrados en la ALTURA DE LA "x" del logotipo (pedido de Marcos). Medido en el vector (viewBox 303×86): la x va de y=26 a y=84,9 → su centro está al 64,5 % del alto del logo; el centro de la caja está al 50 % (la "b" sube con su asta). Con todo centrado en la fila, menú e íconos bajan esa diferencia: 14,5 % del alto del logo = ancho × 86/303 × 0,145. */ :root { --bx-logo-ajuste-x: calc(var(--wp--custom--logo--header) * 86 / 303 * 0.145); } .buxus-header .wp-block-group.alignwide, .buxus-header .wp-block-group.alignwide > .wp-block-group { align-items: center !important; } /* nav.… : WP pone la clase wp-block-navigation también al