/* ==========================================================================
   ÍNDICE DE SECCIONES (TOC) - OPTIMIZACIÓN DE TOKENS PARA ASISTENTES IA / DEV
   ==========================================================================
   Para consultar una sección sin leer todo el archivo, busca la etiqueta [@sec:ID]
   o consulta solo las líneas delimitadas por [@sec:ID:start] y [@sec:ID:end].
   Comando de búsqueda rápida:
     grep -n "@sec:" bmacow-custom/bmacow-ux.css

   TAG                      | DESCRIPCIÓN
   -------------------------+------------------------------------------------
   @sec:variables-resets    | Variables CSS (:root), reset base y accesibilidad
   @sec:header-base         | Header flotante base y navegación
   @sec:hero-cinematic      | Hero cinemático y reproducción voluntaria
   @sec:layout-surfaces     | Secciones, superficies, títulos y botones base
   @sec:catalog-filters     | Catálogo B2B, rejilla y filtros details/summary
   @sec:product-sheet       | Ficha de producto, galería y especificaciones
   @sec:documents           | Rejilla de documentos descargables
   @sec:dialogs-modals      | Modales nativos (<dialog>), cotizador y toasts
   @sec:responsive-core     | Media queries generales (1100px, 800px, 600px)
   @sec:footer-contact      | Pie de página y atención compartida
   ========================================================================== */

/* ==========================================================================
   [@sec:variables-resets:start] Variables CSS (:root), Resets y Accesibilidad
   ========================================================================== */
/* Bmacow UI 12: identidad industrial y consulta técnica accesible. */
:root {
  --ux-ink: #202728;
  --ux-muted: #56605f;
  --ux-paper: #f6f5f1;
  --ux-line: #d9ded9;
  --ux-radius: 12px;
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: #171f20; }
a { text-underline-offset: 4px; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #a66b00; outline-offset: 4px; }
[hidden], dialog:not([open]), .ux-js-only { display: none !important; }
.ux-js .ux-js-only { display: inline-flex !important; }
.ux-js dialog:not([open]) { display: none !important; }
.screen-reader-text, .ux-honeypot { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.ux-skip { position: fixed; top: -100px; left: 20px; z-index: 100001; padding: 14px 20px; background: white; color: #111; }
.ux-skip:focus { top: 12px; }

/* [@sec:variables-resets:end] */

/* ==========================================================================
   [@sec:header-base:start] Header Flotante Base y Navegación
   ========================================================================== */
/* Header flotante y superficies */
.ux-header { background: linear-gradient(#10191de0, transparent); padding: 20px 0; }
.ux-header.is-scrolled { padding: 13px 0; }
body:not(.home) .ux-header { background: #f6f5f1f2; border-bottom: 1px solid var(--ux-line); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 13px 0; }
body:not(.home) .ux-desktop-nav a { color: var(--ux-ink); }
body:not(.home) .ux-desktop-nav a:hover { color: var(--color-gold); }
body:not(.home) .c-header-video__logo-text { color: var(--ux-ink); }
.ux-header .c-header-video__inner { gap: 24px; max-width: 1500px; margin: auto; }
.ux-header .c-header-video__brand { flex-shrink: 0; }
.ux-header .c-header-video__brand img { max-width: 175px; height: auto; max-height: 58px; }
.ux-desktop-nav, .ux-header-actions { display: flex; align-items: center; gap: 24px; }
.ux-desktop-nav a { font-size: 14px; color: #fff; text-decoration: none; padding: 12px 0; }
.ux-desktop-nav a:hover { color: var(--color-gold); }
.ux-header-actions { gap: 10px; }
.ux-header button { cursor: pointer; min-height: 44px; border-radius: 30px; }
.ux-icon-button, .ux-menu-button { min-width: 44px; background: #ffffff12; border: 1px solid #ffffff40; color: white; font-size: 25px; align-items: center; justify-content: center; }
.ux-header-quote { padding: 10px 18px; gap: 9px; align-items: center; border: 1px solid #ffffff50; background: #ffffff0c; color: white; font-size: 13px; }
[data-quote-count] { font-variant-numeric: tabular-nums; padding: 3px 7px; background: var(--color-gold); color: #151c1d; border-radius: 20px; min-width: 23px; text-align: center; }
.ux-js .ux-menu-button { display: none !important; }
.ux-noscript-nav { padding: 10px 20px; background: #172022; }
.ux-noscript-nav a { color: white; }

/* [@sec:header-base:end] */

/* ==========================================================================
   [@sec:hero-cinematic:start] Hero Cinemático y Reproducción Voluntaria de Video
   ========================================================================== */
/* Hero cinemático y reproducción voluntaria de video */
.hero-cinematic { background: radial-gradient(ellipse at 75% 45%, #485352, #182021 70%); position: relative; }
.hero-cinematic__media { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.hero-cinematic__poster, .hero-cinematic__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cinematic__video { opacity: 1; filter: none; }
.hero-cinematic__overlay { width: 58%; background: linear-gradient(90deg,#111c21c7, #111c214d 66%,transparent); position: absolute; z-index: 2; }
.hero-cinematic__content { padding-bottom: 120px; position: relative; z-index: 3; }
.hero-cinematic__content .content-wrapper { width: 43%; max-width: 520px; }
.hero-title { font-size: clamp(32px,3.15vw,54px); line-height: 1.13; letter-spacing: -.04em; }
.hero-subtitle { font-size: 17px; line-height: 1.65; max-width: 390px; }
.hero-copy { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
.hero-actions { flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 14px; }
.hero-explore-link { color: #fff; font-size: 13px; font-weight: 600; text-decoration: underline; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.hero-explore-link:hover { color: var(--color-gold); }
.ux-hero-video-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; transition: background 0.2s, border-color 0.2s; }
.ux-hero-video-toggle:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--color-gold); }
.ux-hero-video-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.ux-hero-video-notice { margin-top: 10px; font-size: 12px; color: #fff; background: rgba(180, 40, 40, 0.85); padding: 8px 14px; border-radius: 4px; }
.ux-hero-video-notice button { margin-left: 8px; background: #fff; color: #172022; border: 0; border-radius: 3px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.ux-hero-scroll { position: absolute; bottom: 46px; left: 5vw; z-index: 4; color: white; text-decoration: none; font-size: 12px; }

/* [@sec:hero-cinematic:end] */

/* ==========================================================================
   [@sec:layout-surfaces:start] Secciones, Superficies, Títulos y Botones Base
   ========================================================================== */
/* Secciones y superficies */
.ux-section { padding: 76px 0; }
.ux-section h2, .ux-catalog h1, .ux-dialog h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.18; }
.ux-section h2 { font-size: clamp(26px,3vw,38px); margin: 8px 0 24px; }
.ux-section h3 { font-size: 20px; line-height: 1.4; margin: 14px 0; }
.ux-section p { line-height: 1.7; }
.ux-surface, .ux-catalog { background: var(--ux-paper); color: var(--ux-ink); }
.ux-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 14px; color: #697365; }
.ux-brands .ux-kicker, .ux-contact .ux-kicker { color: var(--color-gold); }
.ux-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-bottom: 24px; }
.ux-section-heading h2 { max-width: 570px; }
.ux-intro { max-width: 420px; }
.ux-muted { color: var(--ux-muted); font-size: 13px; line-height: 1.65; }
.ux-button { display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; border: 1px solid transparent; border-radius: 6px; background: var(--color-gold); color: #172022; font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; text-align: center; }
.ux-button:hover { background: #f2bb42; color: #172022; }
.ux-button--secondary { border-color: #8d9692; background: transparent; color: var(--ux-ink); }
.ux-button--secondary:hover { background: #e6e9e2; }
.ux-button:disabled { opacity: .6; cursor: not-allowed; }
.ux-text-link { color: inherit; font-size: 14px; font-weight: 600; line-height: 1.6; padding: 10px 0; display: inline-block; }
.ux-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ux-search { margin: 20px 0 12px; max-width: 800px; }
.ux-search label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.ux-search-row { display: flex; background: white; border: 1px solid #9ca69f; padding: 6px; gap: 8px; border-radius: 8px; }
.ux-search input[type=search] { flex: 1; width: 0; min-width: 0; min-height: 48px; border: 0; padding: 10px 14px; background: white; color: var(--ux-ink); font-size: 16px; border-radius: 4px; }
.ux-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.ux-category { display: block; border: 1px solid var(--ux-line); border-radius: 8px; color: var(--ux-ink); text-decoration: none; padding: 26px; background: white; transition: border-color .2s, transform .2s; }
.ux-category:hover { border-color: #a87918; transform: translateY(-3px); }
.ux-category-number { font-family: monospace; color: #7a846e; font-size: 12px; }
.ux-category span:last-child { font-size: 13px; }
.ux-help, .ux-document-teaser { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 32px; background: #e9ece5; border: 1px solid #d5ddd0; border-radius: 10px; margin-top: 40px; }
.ux-help h2, .ux-help h3 { margin: 0 0 8px; font-size: 23px; }
.ux-help p, .ux-document-teaser p { margin: 0; max-width: 620px; }
.ux-help .ux-button, .ux-document-teaser .ux-button { flex-shrink: 0; }
.ux-help .ux-kicker { margin-bottom: 10px; }
.ux-brands { background: #202a2b; text-align: center; }
.ux-brands h2 { font-size: 27px; }
.ux-brands p { color: #d3dbd5; font-size: 13px; }
.ux-brand-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ux-brand-grid a { color: white; text-decoration: none; border: 1px solid #ffffff40; border-radius: 6px; padding: 16px 20px; font-weight: 700; font-size: 15px; }
.ux-brand-grid a:hover { border-color: var(--color-gold); }
.ux-sector-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--ux-line); gap: 24px; }
.ux-sector-grid article { padding-top: 15px; }
.ux-sector-grid p { color: var(--ux-muted); font-size: 14px; }
.ux-document-teaser { background: white; }
.ux-contact { background: #202a2b; }
.ux-contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.ux-contact-grid p { font-size: 14px; color: #d9dfdb; }
.ux-contact-grid a:not(.ux-button) { color: white; }
.ux-contact-grid h3 { font-size: 17px; }

/* [@sec:layout-surfaces:end] */

/* ==========================================================================
   [@sec:catalog-filters:start] Catálogo B2B y Filtros details/summary
   ========================================================================== */
/* Catálogo y filtros details/summary */
.ux-catalog { min-height: 70vh; padding: 130px 0 70px; }
.ux-catalog-heading { padding: 30px 0 38px; border-bottom: 1px solid var(--ux-line); margin-bottom: 32px; }
.ux-catalog-heading h1 { margin: 6px 0 16px; font-size: clamp(30px,4vw,48px); }
.ux-catalog-heading > p { max-width: 650px; line-height: 1.7; }
.ux-catalog-layout { display: grid; grid-template-columns: 215px minmax(0,1fr); gap: 32px; align-items: start; }
.ux-filters { border: 1px solid var(--ux-line); border-radius: 8px; padding: 20px; background: white; }
.ux-filters summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; min-height: 44px; padding: 4px 0; }
.ux-filters summary::-webkit-details-marker { display: none; }
.ux-filters summary::after { content: "▾"; font-size: 14px; transition: transform 0.2s ease; }
.ux-filters[open] summary::after { transform: rotate(180deg); }
.ux-filters h2 { font-size: 17px; margin-top: 0; }
.ux-filters label { display: block; margin: 17px 0 7px; font-size: 13px; font-weight: 600; }
.ux-filters select, .ux-doc-filters select { width: 100%; padding: 10px; min-height: 44px; background: white; color: var(--ux-ink); border: 1px solid #a6afa9; border-radius: 4px; font-size: 14px; }
.ux-filters .ux-button { width: 100%; margin-top: 22px; }
.ux-filters .ux-text-link { font-size: 12px; display: inline-block; margin-top: 8px; }
.ux-results-bar { margin-bottom: 20px; }
.ux-result-count { font-size: 13px; margin: 0 0 10px; color: var(--ux-muted); }
.ux-active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ux-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: white; border: 1px solid var(--ux-line); border-radius: 20px; font-size: 12px; color: var(--ux-ink); text-decoration: none; transition: border-color .2s, background .2s; }
.ux-chip:hover { border-color: #8e2626; background: #fdf2f2; color: #8e2626; }
.ux-chip__remove { font-weight: bold; font-size: 14px; line-height: 1; }
.ux-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ux-product-card { display: flex; flex-direction: column; padding: 20px; background: white; border: 1px solid var(--ux-line); border-radius: 8px; min-width: 0; }
.ux-product-card:hover { border-color: #b48a32; }
.ux-product-card-link { color: var(--ux-ink); text-decoration: none; }
.ux-product-card-thumb-wrap { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ux-product-card-thumb-wrap img { width: 100%; height: auto; max-height: 180px; object-fit: contain; }
.ux-product-card-body { display: flex; flex-direction: column; flex-grow: 1; }
.ux-product-card h2 { font-family: var(--font-body); font-size: 16px; line-height: 1.45; margin: 8px 0; overflow-wrap: anywhere; }
.ux-product-meta, .ux-sku { font-size: 12px; color: #586353; line-height: 1.6; overflow-wrap: anywhere; }
.ux-product-meta { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.ux-specs { font-size: 12px; line-height: 1.55; margin: 10px 0 20px; }
.ux-specs div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid #edf0eb; }
.ux-specs dt { color: var(--ux-muted); }
.ux-specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ux-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ux-card-actions .ux-button { font-size: 12px; padding: 12px 6px; }
.ux-breadcrumb { font-size: 13px; margin: 10px 0 32px; line-height: 1.6; }
.ux-breadcrumb a { color: inherit; }

/* [@sec:catalog-filters:end] */

/* ==========================================================================
   [@sec:product-sheet:start] Ficha de Producto, Galería y Tabla Técnica
   ========================================================================== */
/* Ficha de producto: escritorio con grid-areas (foto izquierda, identidad y datos a la derecha) */
.ux-product-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "gallery identity" "gallery details"; gap: 12px 60px; align-items: start; }
.ux-product-gallery { grid-area: gallery; }
.ux-product-identity { grid-area: identity; }
.ux-product-details { grid-area: details; }
.ux-product-identity h1 { font-size: clamp(26px,3vw,39px); margin: 8px 0 14px; overflow-wrap: anywhere; }
.ux-product-identity .ux-sku, .ux-product-identity .ux-model { font-size: 13px; color: var(--ux-muted); margin: 4px 0; }
.ux-product-details .ux-specs { font-size: 14px; }
.ux-product-image { display: block; background: white; padding: 25px; border-radius: 8px; border: 1px solid var(--ux-line); }
.ux-product-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.ux-gallery-thumbs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ux-gallery-thumbs a { display: block; background: white; border: 1px solid var(--ux-line); border-radius: 4px; padding: 6px; }
.ux-gallery-thumbs img { width: 75px; height: 75px; object-fit: contain; }
.ux-product-description, .ux-long-description { font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.ux-long-description img { max-width: 100%; height: auto; }
.ux-long-description table { display: block; overflow-x: auto; max-width: 100%; }
.ux-product-help { padding: 22px; background: #e9ece5; border-radius: 8px; margin-top: 28px; }
.ux-product-help h2 { font-size: 17px; }
.ux-product-help p, .ux-product-help a { font-size: 13px; color: var(--ux-ink); line-height: 1.6; }
.ux-table-wrap { overflow-x: auto; }
.ux-technical-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; background: white; }
.ux-technical-table caption { text-align: left; color: var(--ux-muted); padding: 0 0 15px; }
.ux-technical-table th, .ux-technical-table td { padding: 16px 20px; border-bottom: 1px solid var(--ux-line); overflow-wrap: anywhere; }
.ux-technical-table th { width: 35%; background: #ecefe8; font-weight: 600; }
.ux-variant { padding: 20px; background: white; border: 1px solid var(--ux-line); border-radius: 6px; display: flex; gap: 20px; align-items: center; justify-content: space-between; margin: 10px 0; }
.ux-variant h3 { font-size: 16px; margin: 0; }
.ux-variant p { font-size: 13px; }
.ux-variant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ux-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
.ux-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid var(--ux-line); color: var(--ux-ink); text-decoration: none; background: white; border-radius: 4px; }
.ux-pagination .current { background: #26312c; color: white; }
.ux-empty { border: 1px dashed #9da799; padding: 40px; border-radius: 8px; background: #fff8; }
.ux-empty h2 { font-size: 23px; }
.ux-empty p { line-height: 1.7; }

/* [@sec:product-sheet:end] */

/* ==========================================================================
   [@sec:documents:start] Rejilla de Documentos Descargables
   ========================================================================== */
/* Documentos */
.ux-doc-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.ux-doc-card { border: 1px solid var(--ux-line); padding: 28px; border-radius: 8px; background: white; }
.ux-doc-card h2 { font-size: 20px; }
.ux-doc-card p { font-size: 14px; line-height: 1.7; }
.ux-doc-products { margin-top: 14px; font-size: 13px; border-top: 1px solid var(--ux-line); padding-top: 10px; }
.ux-doc-products strong { display: block; margin-bottom: 4px; color: var(--ux-ink); }
.ux-doc-products a { color: var(--ux-ink); text-decoration: underline; }
.ux-doc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 30px; }
.ux-doc-filters select { width: min(240px,100%); }
.ux-doc-filters a { color: inherit; font-size: 13px; }

/* [@sec:documents:end] */

/* ==========================================================================
   [@sec:dialogs-modals:start] Diálogos Nativos (<dialog>), Cotizador y Toasts
   ========================================================================== */
/* Diálogos nativos: foco y Escape gestionados por el navegador. */
.ux-dialog { color: var(--ux-ink); background: var(--ux-paper); border: 1px solid #d2d8ce; border-radius: 14px; width: min(760px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 40px; box-shadow: 0 20px 90px #0005; overflow-y: auto; overscroll-behavior: contain; }
.ux-dialog::backdrop { background: #081416bc; backdrop-filter: blur(5px); }
.ux-dialog h2 { font-size: 30px; padding-right: 35px; margin-top: 10px; }
.ux-dialog > p { font-size: 14px; line-height: 1.7; }
.ux-dialog-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 1px solid #c0c9bd; border-radius: 50%; background: transparent; font-size: 26px; color: var(--ux-ink); cursor: pointer; }
.ux-dialog-open { overflow: hidden; }
.ux-menu-dialog nav { display: grid; gap: 4px; }
.ux-menu-dialog nav a { display: block; padding: 15px 0; border-bottom: 1px solid var(--ux-line); font-size: 22px; color: var(--ux-ink); text-decoration: none; }
.ux-menu-dialog .ux-muted { margin-top: 28px; }
.ux-search-results { list-style: none; margin: 20px 0 0; padding: 0; }
.ux-search-results a { display: grid; gap: 6px; padding: 16px 0; color: inherit; border-bottom: 1px solid var(--ux-line); text-decoration: none; }
.ux-search-results a:hover strong { text-decoration: underline; }
.ux-search-results span { font-size: 12px; color: var(--ux-muted); }
#fsSearchResults { margin-top: 25px; font-size: 14px; }
.ux-quote-item { display: grid; grid-template-columns: minmax(0,1fr) 85px auto; gap: 15px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ux-line); }
.ux-quote-item strong { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ux-quote-item p { font-size: 12px; color: var(--ux-muted); }
.ux-quote-item label { font-size: 11px; }
.ux-quote-item input { display: block; width: 100%; min-height: 44px; border: 1px solid #a6afa9; border-radius: 4px; padding: 8px; color: var(--ux-ink); background: white; font-size: 16px; }
.ux-remove { border: 0; color: #8e2626; background: transparent; cursor: pointer; text-decoration: underline; min-height: 44px; padding: 8px; font-size: 13px; }
.ux-email-details { border-top: 1px solid var(--ux-line); margin-top: 28px; padding-top: 20px; }
.ux-email-details summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 12px 0; }
.ux-quote-form label { display: block; margin: 16px 0 8px; font-weight: 600; font-size: 13px; }
.ux-quote-form input, .ux-quote-form textarea { width: 100%; border: 1px solid #a6afa9; border-radius: 4px; padding: 12px; background: white; color: var(--ux-ink); min-height: 44px; font-size: 16px; }
.ux-quote-form textarea { resize: vertical; }
.ux-quote-form a { color: inherit; }
.ux-quote-form > p { font-size: 13px; line-height: 1.6; }
.ux-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ux-status { margin-top: 15px; }
.ux-toast { position: fixed; bottom: 28px; left: 24px; max-width: min(420px,calc(100% - 110px)); background: #172022; border: 1px solid var(--color-gold); padding: 18px 22px; border-radius: 8px; z-index: 10000; color: white; font-size: 13px; line-height: 1.6; opacity: 0; transform: translateY(15px); transition: .2s; pointer-events: none; }
.ux-toast.is-visible { opacity: 1; transform: none; }
.ux-js .ux-mobile-bar { display: none !important; }
.native-float-whatsapp { right: 24px; left: auto; bottom: 24px; z-index: 900; width: 56px; height: 56px; }
.reveal-up, .reveal-svg { opacity: 1; transform: none; }
.footer-outer-wrapper { overflow: hidden; }
.footer-blueprint { opacity: .45; max-height: 200px; }
.site-footer-glass { background: #172022; }
.site-footer-glass a { overflow-wrap: anywhere; }

/* [@sec:dialogs-modals:end] */

/* ==========================================================================
   [@sec:responsive-core:start] Media Queries Generales (1100px, 800px, 600px)
   ========================================================================== */
@media (max-width: 1100px) {
  .ux-header .c-header-video__inner { padding: 0 24px; gap: 16px; }
  .ux-desktop-nav { gap: 14px; }
  .ux-desktop-nav a { font-size: 12px; }
  .ux-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ux-catalog-layout { gap: 22px; }
  .ux-help, .ux-document-teaser { align-items: start; flex-direction: column; }
  .ux-sector-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .ux-desktop-nav { display: none; }
  .ux-js .ux-menu-button { display: inline-flex !important; }
  .ux-header .c-header-video__brand img { max-height: 48px; max-width: 130px; }
  .ux-header-quote { font-size: 12px; padding: 8px 12px; }
  .hero-cinematic__content .content-wrapper { width: 60%; max-width: 430px; }
  .hero-cinematic__overlay { width: 85%; }
  .ux-section { padding: 52px 0; }
  .ux-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ux-section-heading { align-items: start; flex-direction: column; gap: 5px; }
  .ux-contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .ux-product-layout { display: flex; flex-direction: column; gap: 24px; }
  .ux-product-gallery, .ux-product-identity, .ux-product-details { width: 100%; min-width: 0; }
  .ux-product-image img { max-height: 380px; }
  .ux-catalog-layout { grid-template-columns: 1fr; }
  .ux-filters form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 10px; align-items: center; }
  .ux-filters label { margin: 0; }
  .ux-filters .ux-button { margin: 0; }
  .ux-doc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .ux-header .c-header-video__inner { padding: 0 16px; gap: 10px; }
  .ux-header .c-header-video__logo-text { font-size: 18px; }
  .ux-js .ux-header-quote { display: none !important; }
  .ux-js .ux-mobile-bar { display: flex !important; }
  .ux-mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; gap: 10px; background: #172022; border-top: 1px solid #ffffff30; padding: 9px 16px max(9px,env(safe-area-inset-bottom)); }
  .ux-mobile-bar a, .ux-mobile-bar button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; text-decoration: none; border-radius: 4px; }
  .ux-mobile-bar a { color: white; padding: 0 15px; }
  .ux-mobile-bar button { flex: 1; background: var(--color-gold); border: 0; color: #172022; font-weight: 700; }
  .ux-mobile-bar [data-quote-count] { background: #172022; color: white; }
  body { padding-bottom: 70px; }
  .native-float-whatsapp { bottom: 85px; right: 16px; width: 50px; height: 50px; }
  .ux-toast { bottom: 85px; left: 16px; }

  /* Hero móvil compacto para primera pantalla 360x800 / 390x844 */
  .hero-cinematic { min-height: 0; align-items: flex-start; justify-content: flex-start; }
  .hero-cinematic__content { padding: 130px 22px 48px; width: 100%; }
  .hero-cinematic__content .content-wrapper { width: 100%; max-width: 360px; margin: 0; }
  .hero-cinematic__overlay { width: 100%; background: linear-gradient(0deg,#111b20ed 0%,#111b20aa 60%,rgba(17,27,32,0.6) 100%); }
  .hero-title { font-size: clamp(26px,7vw,36px); margin-bottom: 8px; }
  .hero-subtitle { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
  .hero-actions { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  .ux-hero-scroll { display: none; }
  .ux-search { margin: 12px 0 8px; }
  .ux-search-row { gap: 4px; }
  .ux-search input[type=search] { padding: 9px 8px; font-size: 16px; min-height: 44px; }
  .ux-search .ux-button { padding: 8px 14px; min-height: 44px; }

  .ux-category-grid { gap: 10px; }
  .ux-category { padding: 18px; }
  .ux-category h3 { font-size: 16px; }
  .ux-category span:last-child { font-size: 11px; }
  .ux-help, .ux-document-teaser { padding: 24px; }
  .ux-help .ux-button, .ux-document-teaser .ux-button { width: 100%; font-size: 13px; }
  .ux-sector-grid { grid-template-columns: 1fr; gap: 10px; }
  .ux-sector-grid article { border-bottom: 1px solid var(--ux-line); }
  .ux-catalog { padding-top: 100px; }
  .ux-catalog-heading { padding: 12px 0 18px; margin-bottom: 16px; }
  .ux-catalog-heading > p:not(.ux-kicker) { font-size: 14px; line-height: 1.5; margin: 12px 0; }
  .ux-catalog-heading h1 { font-size: 28px; margin-bottom: 10px; }
  .ux-filters { padding: 8px 14px; }
  .ux-catalog-layout { gap: 16px; }

  /* Tarjeta de producto horizontal compacta en móvil */
  .ux-product-grid, .ux-doc-grid { grid-template-columns: 1fr; gap: 12px; }
  .ux-product-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
  .ux-product-card-link { display: flex; gap: 12px; width: 100%; align-items: flex-start; }
  .ux-product-card-thumb-wrap { width: 85px; height: 85px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fcfcfc; border: 1px solid #f0f0f0; border-radius: 4px; overflow: hidden; margin-bottom: 0; }
  .ux-product-card-thumb-wrap img { width: 85px; height: 85px; object-fit: contain; }
  .ux-product-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ux-product-card h2 { font-size: 14px; margin: 2px 0 4px; line-height: 1.35; }
  .ux-product-card .ux-product-meta, .ux-product-card .ux-sku { font-size: 11px; line-height: 1.4; }
  .ux-product-card .ux-specs { margin: 4px 0 6px; font-size: 11px; }
  .ux-card-actions { margin-top: 6px; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; }
  .ux-card-actions .ux-button { font-size: 12px; padding: 8px 10px; min-height: 44px; }

  /* Ficha de producto en móvil: imagen compacta ampliable */
  .ux-product-layout { gap: 16px; }
  .ux-product-image { padding: 12px; max-height: 280px; display: flex; align-items: center; justify-content: center; }
  .ux-product-image img { max-height: 250px; object-fit: contain; }
  .ux-variant { flex-direction: column; align-items: start; }
  .ux-variant-actions { width: 100%; justify-content: space-between; margin-top: 10px; }
  .ux-technical-table th, .ux-technical-table td { padding: 12px; font-size: 13px; }
  .ux-empty { padding: 24px; }
  .ux-dialog { padding: 28px 20px; width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 10px; }
  .ux-dialog h2 { font-size: 25px; }
  .ux-quote-item { grid-template-columns: minmax(0,1fr) 75px; }
  .ux-quote-item .ux-remove { grid-column: 1/-1; justify-self: start; }
  .ux-form-columns { grid-template-columns: 1fr; gap: 0; }
  .ux-filters form { grid-template-columns: minmax(0,1fr); }
  .ux-filters label { margin-top: 8px; }
  .ux-filters .ux-button { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.ux-brand-grid a { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ux-brand-grid img { width: 100px; height: 40px; object-fit: contain; }

/* [@sec:responsive-core:end] */

/* ==========================================================================
   [@sec:footer-contact:start] Pie de Página y Atención Compartida
   ========================================================================== */
/* Atención compartida por todas las páginas. */
.ux-footer-contact { scroll-margin-top: 100px; }
.ux-footer-contact .footer-grid { grid-template-columns: 1.15fr 1fr 1.2fr; }
.ux-footer-contact .footer-title { font-size: 18px; }
.ux-footer-address { font-style: normal; color: #d9dfdb; line-height: 1.8; margin-bottom: 12px; }
.ux-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.ux-footer-nav a, .ux-footer-link { color: white; display: inline-flex; align-items: center; min-height: 44px; }
.ux-footer-whatsapp { margin-top: 18px; font-size: 13px; padding: 14px 18px; }
@media (max-width: 800px) {
  .ux-footer-contact .footer-grid { grid-template-columns: 1fr; text-align: left !important; }
  .ux-footer-contact .footer-col { min-width: 0; }
}

/* [@sec:footer-contact:end] */