/* =========================================================================
   HÁBITAT MÉDICA GROUP — hoja de estilos
   =========================================================================

   Tipografía
   ----------
   Archivo para todo el texto e IBM Plex Mono para lo que es dato: claves,
   cifras y unidades. La distinción no es decorativa — en un catálogo de 5,286
   referencias la clave es lo que el comprador copia y pega, y en monoespaciada
   se lee carácter por carácter sin confundir un 0 con una O.

   Ambas se sirven desde este mismo servidor. Por velocidad, y porque el aviso
   de privacidad dice que no se llama a terceros: pedirlas a Google sería
   mandarle la IP de cada visitante.

   Escalas
   -------
   Tamaños, espacios, radios y sombras salen de una escala fija. Antes había
   27 tamaños de letra, 17 radios y 29 sombras distintas: nada de eso se
   percibe como decisión, se percibe como desorden.
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;          /* variable: todo el rango en un archivo */
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #003C78;
  --blue: #005A9E;
  --blue-deep: #002B57;
  --teal: #008676;
  --green: #37845D;
  --ink: #12334b;
  --muted: #5C7181;
  --cloud: #f3f8fa;
  --line: #dce9ee;
  --white: #ffffff;
  --shadow: 0 18px 48px rgba(7, 67, 105, 0.12);

  /* --- tipografía --- */
  --texto: "Archivo", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dato: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala de tamaños. Diez pasos: los cuatro primeros para dato denso,
     los últimos con clamp() para que el titular respire en pantalla grande. */
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-base: 15px;
  --t-lg: 17px;
  --t-xl: clamp(18px, 1.4vw, 19px);
  --t-2xl: clamp(21px, 2.2vw, 24px);
  --t-3xl: clamp(27px, 3.6vw, 40px);
  --t-4xl: clamp(34px, 5.2vw, 58px);

  /* --- espaciado, base 4 --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 88px;

  /* --- radios: cuatro, no diecisiete --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;

  /* --- elevación: tres niveles con un propósito cada uno --- */
  --s-1: 0 1px 2px rgba(0,35,66,.05), 0 2px 8px rgba(0,35,66,.05);
  --s-2: 0 2px 6px rgba(0,35,66,.06), 0 14px 34px rgba(0,35,66,.10);
  --s-3: 0 4px 12px rgba(0,35,66,.10), 0 28px 64px rgba(0,35,66,.18);

  --transicion: .22s cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }

/* Ningún campo por debajo de 16px: Safari en iPhone hace zoom al enfocar uno
   más pequeño y deja la página descuadrada justo cuando alguien va a escribir. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea { font-size: 16px; }

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--texto);
  font-size: var(--t-lg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* La coma decimal y el cero cortado evitan leer 0 donde dice O en una clave. */
  font-feature-settings: "cv05" 1, "ss01" 1; text-rendering: optimizeLegibility; }

/* Los titulares se aprietan; el texto corrido no. Una grotesca a 40px con el
   mismo tracking que a 15px se ve suelta y amateur. */
h1, h2, h3, h4 { font-family: var(--texto); font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
h1 { letter-spacing: -.032em; }
p { text-wrap: pretty; }

/* Todo lo que es dato va en monoespaciada y con cifras de ancho fijo: las
   columnas de claves y cantidades quedan alineadas solas. */
.dato .n, .product-meta strong, .cart-count, .quantity-control strong,
.product-category-code, .carga-formatos span, .zona-formatos span,
.archivo-ico, .listo-folio strong, .paso-n, .step-number, .flujo-item::before,
.eyebrow, .sec-ojo, .product-visual-label, .verified-image-badge,
.tag, .catalog-note, .active-filter {
  font-family: var(--dato); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
button, select { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 1000; padding: 12px 18px; background: var(--ink); color: white; border-radius: 8px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.12); background: #fff; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 210px; height: auto; }
nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; }
nav a { text-decoration: none; }
nav a:not(.header-cta):hover { color: var(--blue); }
.header-cta { padding: 13px 18px; border-radius: 999px; background: var(--blue); color: white; box-shadow: 0 8px 22px rgba(7, 101, 167, .22); }
.header-cta:hover { background: var(--blue-deep); }

.hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #043c68 0%, #075d97 54%, #068f9b 100%); color: white; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 26px 26px; mask-image: linear-gradient(to right, black, transparent 55%); }
.hero-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(10px); opacity: .18; }
.hero-glow-one { right: 4%; top: -160px; background: #56e2c2; }
.hero-glow-two { left: 28%; bottom: -270px; background: #58a6ff; }
.hero-grid { position: relative; z-index: 1; min-height: 620px; padding-block: 70px 80px; display: grid; grid-template-columns: 1.06fr .94fr; gap: 74px; align-items: center; }
.eyebrow { margin: 0 0 17px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; color: #c7fff0; }
.eyebrow span { width: 29px; height: 2px; background: #57e0bd; }
.eyebrow-dark { color: var(--blue); }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(42px, 5vw, 67px); line-height: 1.03; letter-spacing: -.045em; }
.hero h1 em { display: block; color: #7ee6cf; font-style: normal; }
.hero-lede { max-width: 645px; margin: 25px 0 28px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.65; }
.hero-search { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; max-width: 650px; padding: 7px 7px 7px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: white; box-shadow: 0 20px 50px rgba(0, 26, 50, .25); }
.search-icon { width: 17px; height: 17px; border: 2px solid #77909f; border-radius: 50%; position: relative; display: inline-block; }
.search-icon::after { content: ""; position: absolute; width: 7px; height: 2px; background: #77909f; right: -5px; bottom: -2px; transform: rotate(45deg); border-radius: 2px; }
.hero-search input, .filter-search input { width: 100%; border: 0; outline: none; color: var(--ink); background: transparent; }
.hero-search input { min-height: 48px; font-size: 15px; }
.hero-search input::placeholder, .filter-search input::placeholder { color: #8aa0ae; }
.hero-search button { min-height: 48px; padding: 0 25px; border: 0; border-radius: 12px; background: var(--green); color: white; font-weight: 800; }
.hero-search button:hover { background: #2F7550; }
.trust-row { display: flex; gap: 30px; margin-top: 32px; }
.trust-row div { padding-right: 28px; border-right: 1px solid rgba(255,255,255,.22); }
.trust-row div:last-child { border-right: 0; padding-right: 0; }
.trust-row strong, .trust-row span { display: block; }
.trust-row strong { font-size: 15px; }
.trust-row span { margin-top: 5px; color: rgba(255,255,255,.65); font-size: 12px; }

.hero-visual { position: relative; min-height: 470px; }
.hero-photo { position: absolute; overflow: hidden; border: 5px solid rgba(255,255,255,.82); border-radius: 18px; box-shadow: 0 26px 65px rgba(0,27,52,.34); background: #dcecf2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-main { width: 72%; height: 420px; left: 0; top: 22px; transform: rotate(-2deg); }
.hero-photo-main img { object-position: 56% center; }
.hero-photo-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,43,72,.68), transparent 52%); }
.hero-photo-main span { position: absolute; z-index: 1; left: 23px; bottom: 22px; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.hero-photo-small { width: 38%; height: 205px; right: 0; border-width: 4px; border-radius: 18px; transform: rotate(3deg); }
.hero-photo-top { top: 0; }
.hero-photo-bottom { bottom: 0; transform: rotate(2deg); }
.assistance-card { position: absolute; z-index: 4; left: 10%; bottom: -12px; display: flex; align-items: center; gap: 12px; min-width: 300px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.6); border-radius: 12px; background: rgba(255,255,255,.95); color: var(--ink); box-shadow: var(--shadow); }
.assistance-card > span:last-child { margin-left: auto; color: var(--blue); font-size: 25px; }
.assistance-card strong, .assistance-card small { display: block; }
.assistance-card small { margin-top: 3px; color: var(--muted); }
.assistance-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(44,180,114,.14); }

.category-section { padding: 92px 0 76px; background: white; }
.section-heading { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: end; margin-bottom: 33px; }
.section-heading h2, .catalog-heading h2 { margin: 0; font-size: clamp(31px, 4vw, 46px); letter-spacing: -.035em; line-height: 1.12; }
.section-heading > p { margin: 0 0 3px; color: var(--muted); line-height: 1.65; font-size: 15px; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-card { position: relative; min-height: 235px; overflow: hidden; border: 0; border-radius: 18px; color: white; text-align: left; background: #0c5c91; box-shadow: 0 10px 32px rgba(5, 67, 104, .12); isolation: isolate; transition: transform .24s, box-shadow .24s; }
.category-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(5, 67, 104, .2); }
.category-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.category-card:hover img { transform: scale(1.045); }
.category-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(3,38,63,.92) 0%, rgba(3,57,91,.2) 68%, rgba(3,57,91,.06)); }
.category-card-content { position: absolute; left: 19px; right: 19px; bottom: 17px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.category-card strong, .category-card small { display: block; }
.category-card strong { max-width: 180px; font-size: 17px; line-height: 1.18; }
.category-card small { margin-top: 6px; color: rgba(255,255,255,.72); font-size: 11px; }
.category-arrow { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(255,255,255,.12); font-size: 17px; }

.catalog-section { padding: 88px 0 100px; background: var(--cloud); border-top: 1px solid #e8f1f4; }
.catalog-heading { display: flex; justify-content: space-between; gap: 34px; align-items: end; margin-bottom: 31px; }
.catalog-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.catalog-note span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d9eef4; color: var(--blue); font-weight: 800; }
.filters { position: relative; z-index: 3; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 11px 35px rgba(7, 69, 105, .06); }
.filter-primary { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 13px; padding: 17px; }
.primary-search-field { min-width: 0; }
.filter-step-copy { display: flex; align-items: center; gap: 11px; margin: 0 0 10px 2px; }
.filter-step-copy strong, .filter-step-copy small { display: block; }
.filter-step-copy strong { font-size: 15px; }
.filter-step-copy small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.step-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; color: white; background: var(--blue); font-size: 14px; font-weight: 900; }
.filter-search { min-height: 58px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 0 16px; border: 2px solid #cfe3ea; border-radius: 12px; background: white; transition: border-color .2s, box-shadow .2s; }
.filter-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(7,101,167,.1); }
.filter-search input { width: 100%; min-height: 54px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; }
.catalog-search-button { min-height: 98px; align-self: end; padding: 15px 19px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; border: 0; border-radius: 12px; color: white; background: var(--green); box-shadow: 0 10px 24px rgba(44,180,114,.24); text-align: left; }
.catalog-search-button:hover { background: #2F7550; }
.catalog-search-button strong, .catalog-search-button small { display: block; }
.catalog-search-button strong { font-size: 19px; }
.catalog-search-button small { margin-top: 2px; color: #fff; font-size: 11px; letter-spacing: .01em; }
.step-number-light { color: var(--green); background: white; }
.button-arrow { font-size: 25px; }
.optional-filters { display: grid; grid-template-columns: minmax(200px,.8fr) 1fr 1fr auto; gap: 12px; align-items: end; padding: 15px 17px 17px; border-top: 1px solid var(--line); background: #f8fbfc; }
.optional-filter-copy { align-self: center; }
.optional-filter-copy strong, .optional-filter-copy small { display: block; }
.optional-filter-copy strong { color: var(--blue); font-size: 13px; }
.optional-filter-copy small { max-width: 180px; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.select-field > span { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: 11px; font-weight: 800; }
.filters select { width: 100%; min-height: 48px; padding: 0 38px 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; }
.clear-button { min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; color: var(--blue); background: #eaf5f8; white-space: nowrap; font-weight: 800; }
.clear-button:hover { background: #dcedf2; }
.active-filters { margin: 16px 0 -4px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.active-filters[hidden] { display: none; }
.active-filter { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 13px; border: 1px solid #cfe3ec; border-radius: 999px; color: var(--blue-deep); background: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; transition: border-color .15s, background .15s; }
.active-filter:hover { border-color: #8fc4d8; background: #f2f9fc; }
.active-filter span[aria-hidden] { color: #6f93a5; font-size: 15px; line-height: 1; }
.active-filter-all { border-style: dashed; color: #5d7d8e; font-weight: 600; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 24px 2px 17px; }
.results-bar p { margin: 0; }
#results-count { font-weight: 800; }
.results-help { color: var(--muted); font-size: 13px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 380px;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--s-1);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.product-card:hover { transform: translateY(-3px); border-color: #a9cee0; box-shadow: var(--s-2); }
/* El teclado tiene que ver dónde está, igual que el ratón. */
.product-card:focus-within { border-color: var(--blue); box-shadow: var(--s-2); }
.product-visual { --tone-a: #075f9d; --tone-b: #09a38f; position: relative; height: 132px; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, color-mix(in srgb, var(--tone-a) 86%, #0a2334), color-mix(in srgb, var(--tone-b) 74%, #0b2c3e)); }
.product-visual::before { content: ""; position: absolute; z-index: -1; width: 170px; height: 170px; right: -48px; top: -74px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 27px rgba(255,255,255,.055), 0 0 0 54px rgba(255,255,255,.04); }
.product-visual::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .16; background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 20px 20px; mask-image: linear-gradient(to right, black, transparent 76%); }
.area-tone-qx { --tone-a: #075f9d; --tone-b: #00a695; }
.area-tone-ms { --tone-a: #0b6ea8; --tone-b: #29a8a0; }
.area-tone-ce { --tone-a: #087aa2; --tone-b: #42b6b0; }
.area-tone-pb { --tone-a: #126e81; --tone-b: #2db777; }
.area-tone-sc { --tone-a: #0a6194; --tone-b: #3f9fbe; }
.area-tone-va { --tone-a: #14748f; --tone-b: #4fb9a8; }
.area-tone-md { --tone-a: #087b86; --tone-b: #35b678; }
.area-tone-ha { --tone-a: #0d8288; --tone-b: #4cc08c; }
.area-tone-ld { --tone-a: #0b5594; --tone-b: #3d82c6; }
.area-tone-ro { --tone-a: #27678f; --tone-b: #6a91ba; }
.area-tone-me { --tone-a: #385b83; --tone-b: #648f9d; }
.area-tone-cg { --tone-a: #36556c; --tone-b: #7692a6; }
.area-tone-rp { --tone-a: #1c6f6a; --tone-b: #52ad7d; }
.area-tone-oi { --tone-a: #42677c; --tone-b: #6d8b99; }
.type-icon { position: absolute; z-index: 2; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -52%);
  color: rgba(255,255,255,.96); transition: transform var(--transicion); }
.product-card:hover .type-icon { transform: translate(-50%, -52%) scale(1.06); }
.product-category-code { position: absolute; z-index: 1; left: 11px; top: 11px; padding: 3px 7px; border-radius: 8px;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.15); backdrop-filter: blur(3px);
  font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .06em; }
.product-visual-label { position: absolute; z-index: 3; right: 11px; bottom: 10px; white-space: nowrap;
  color: rgba(255,255,255,.66); font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.product-visual::after { z-index: 1; opacity: .9; background: linear-gradient(180deg, rgba(4,34,54,0) 45%, rgba(4,34,54,.45) 100%); mask-image: none; }
.exact-product-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 9px 12px 26px; object-fit: contain; background: white; }
.verified-image-badge { position: absolute; z-index: 3; right: 9px; top: 9px; padding: 5px 8px; border: 1px solid #bce7d4; border-radius: 999px; color: #08764b; background: rgba(239,255,248,.96); box-shadow: 0 5px 14px rgba(0,65,45,.08); font-size: 11px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.has-exact-image .product-category-code, .has-exact-image .product-visual-label, .has-exact-image .type-icon { display: none; }
.has-exact-image::after { display: none; }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.product-category { margin: 0 0 10px; color: var(--teal); text-transform: uppercase; letter-spacing: .075em; font-size: 11px; font-weight: 900; }
.product-card h3 { margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: -.006em; }
.product-tags { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.product-tags:empty { display: none; }
.tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .015em; }
.tag-specialty { color: #0b6ea8; background: #eaf4fb; }
.tag-sterile { color: #0a7a52; background: #e6f7ee; }
.product-meta { margin-top: 14px; display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.product-meta div:last-child { margin-top: 3px; padding-top: 7px; border-top: 1px dashed var(--line); }
.product-meta div { display: flex; justify-content: space-between; gap: 10px; }
.product-meta span:first-child { color: #687983; }
.product-meta strong { color: var(--ink); text-align: right; font-weight: 500; font-size: 12px; letter-spacing: .01em; overflow-wrap: anywhere; }
.add-cart-button { width: 100%; min-height: 46px; margin-top: auto; padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid #b9dde6; border-radius: 12px; color: var(--navy); background: #f4fbfc; font-size: 13px; font-weight: 700;
  transition: color var(--transicion), background var(--transicion), border-color var(--transicion); }
.add-cart-button:hover { color: white; border-color: var(--blue); background: var(--blue); }
.add-cart-symbol { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 999px; color: #fff; background: var(--navy); font-size: 15px; font-weight: 700; line-height: 1; transition: background var(--transicion); }
.add-cart-button:hover .add-cart-symbol { color: var(--navy); background: #fff; }
.add-cart-button.is-added { color: #08764b; border-color: #a9dfc7; background: #effbf5; }
.add-cart-button.is-added .add-cart-symbol { background: var(--green); }
.add-cart-button.is-added:hover { color: white; border-color: #2F7550; background: #2F7550; }
.add-cart-button.is-added:hover .add-cart-symbol { color: #2F7550; background: white; }
.empty-state { max-width: 620px; margin: 55px auto 0; text-align: center; }
.empty-symbol { margin: 0 auto 15px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--teal); background: #dcf3ef; font-size: 34px; font-weight: 300; }
.empty-state h3 { margin: 0 0 10px; font-size: 25px; }
.empty-state p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.empty-state a { display: inline-flex; padding: 13px 18px; border-radius: 8px; background: var(--blue); color: white; text-decoration: none; font-weight: 800; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.load-more { min-height: 50px; padding: 0 25px; border: 1px solid #a9cedb; border-radius: 999px; color: var(--blue); background: white; font-weight: 850; }
.load-more:hover { color: white; background: var(--blue); border-color: var(--blue); }

.service-banner { padding: 70px 0; color: white; background: linear-gradient(125deg, #074a7b, #057d91); }
.service-banner-inner { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.service-banner h2 { max-width: 740px; margin: 0; font-size: clamp(29px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -.035em; }
.service-banner p:not(.eyebrow) { margin: 14px 0 0; color: rgba(255,255,255,.72); }
.service-banner a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 20px; padding: 17px 22px; border-radius: 12px; color: var(--blue-deep); background: white; text-decoration: none; font-weight: 850; box-shadow: 0 14px 30px rgba(0,35,58,.2); }
.service-banner a:hover { background: #e9fbf6; }

.cart-launcher { position: fixed; z-index: 45; right: 22px; bottom: 22px; min-width: 280px; padding: 11px 13px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; color: white; background: var(--blue-deep); box-shadow: 0 16px 42px rgba(0,35,58,.28); text-align: left; }
.cart-launcher:hover { background: #052f50; }
.cart-launcher-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--blue-deep); background: #87ead1; font-size: 25px; font-weight: 700; }
.cart-launcher strong, .cart-launcher small { display: block; }
.cart-launcher strong { font-size: 14px; }
.cart-launcher small { max-width: 170px; margin-top: 2px; overflow: hidden; color: rgba(255,255,255,.68); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.cart-count { min-width: 31px; height: 31px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; color: var(--blue-deep); background: white; font-size: 12px; font-weight: 900; }
.cart-backdrop { position: fixed; z-index: 80; inset: 0; background: rgba(3,31,51,.56); backdrop-filter: blur(3px); }
.quote-cart { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(520px, 100%); display: flex; flex-direction: column; color: var(--ink); background: white; box-shadow: -24px 0 70px rgba(0,31,53,.24); transform: translateX(102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.quote-cart[aria-hidden="false"] { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
body.cart-open { overflow: hidden; }
.cart-header { padding: 24px 24px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--line); }
.cart-eyebrow { margin: 0 0 5px; color: var(--teal); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 900; }
.cart-header h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
.cart-close { width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 12px; color: var(--blue); background: #eaf5f8; font-size: 29px; line-height: 1; }
.cart-close:hover { background: #d7ebf1; }
.cart-intro { margin: 0; padding: 15px 24px; color: var(--muted); background: #f5fafb; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.cart-items { flex: 1; overflow-y: auto; padding: 9px 24px 20px; }
.cart-item { padding: 17px 0; border-bottom: 1px solid var(--line); }
.cart-item-copy > span { color: var(--teal); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 900; }
.cart-item h3 { margin: 6px 0 5px; font-size: 14px; line-height: 1.4; }
.cart-item-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.cart-item-actions { margin-top: 13px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.quantity-control { display: grid; grid-template-columns: 38px 46px 38px; align-items: center; overflow: hidden; border: 1px solid #cfe1e7; border-radius: 8px; background: white; }
.quantity-control button { width: 38px; height: 36px; border: 0; color: var(--blue); background: #eef7f9; font-size: 19px; }
.quantity-control button:hover { color: white; background: var(--blue); }
.quantity-control strong { text-align: center; font-size: 13px; }
.remove-cart-item { min-height: 36px; padding: 0 8px; border: 0; color: #8a4e4e; background: transparent; font-size: 11px; font-weight: 800; text-decoration: underline; }
.cart-empty { flex: 1; padding: 60px 30px; text-align: center; }
.cart-empty[hidden] { display: none; }
.cart-empty > span { width: 62px; height: 62px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--teal); background: #dff5ef; font-size: 34px; }
.cart-empty strong { display: block; font-size: 19px; }
.cart-empty p { max-width: 300px; margin: 9px auto 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cart-footer { max-height: 62vh; overflow-y: auto; padding: 18px 24px 22px; border-top: 1px solid var(--line); background: white; box-shadow: 0 -10px 26px rgba(7,67,105,.06); }
.cart-summary { margin-bottom: 13px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 12px; }
.cart-summary strong { color: var(--ink); text-align: right; }
.lead-form { padding-top: 15px; border-top: 1px solid var(--line); }
.lead-form-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.lead-form-heading strong, .lead-form-heading small { display: block; }
.lead-form-heading strong { font-size: 13px; }
.lead-form-heading small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.lead-form-heading .step-number { width: 27px; height: 27px; flex-basis: 27px; font-size: 12px; }
.lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lead-form-grid label > span { display: block; margin: 0 0 5px 2px; color: var(--muted); font-size: 11px; font-weight: 850; }
.lead-form-grid input { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid #cfe1e7; border-radius: 8px; color: var(--ink); background: white; font-size: 12px; }
.lead-form-grid input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,101,167,.09); }
.lead-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send-quote-button { width: 100%; min-height: 58px; margin-top: 13px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; border-radius: 12px; color: white; background: var(--green); box-shadow: 0 10px 24px rgba(44,180,114,.22); text-align: left; font-size: 13px; font-weight: 900; cursor: pointer; }
.send-quote-button:hover { background: #2F7550; }
.send-quote-button span { font-size: 22px; }
.send-quote-button.is-disabled { color: #78909d; background: #e7eff2; box-shadow: none; cursor: default; }
.lead-form-status { min-height: 16px; margin: 9px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.lead-form-status.is-success { color: #08764b; font-weight: 800; }
.lead-form-status.is-error { color: #a43d3d; font-weight: 800; }
.clear-cart-button { width: 100%; min-height: 38px; margin-top: 7px; border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.clear-cart-button:disabled { opacity: .45; cursor: default; }

footer { padding: 55px 0 18px; background: #062e4d; color: white; }
.footer-grid { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 70px; padding-bottom: 40px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-brand img { width: 190px; filter: brightness(0) invert(1); opacity: .94; }
.footer-grid p { max-width: 390px; margin: 14px 0 0; color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.65; }
.footer-grid strong { color: #8cead3; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.footer-grid a { color: rgba(255,255,255,.8); font-size: 13px; text-decoration: none; }
.footer-grid a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.58); font-size: 11px; }

body.embed .site-header { display: none; }
body.embed .hero-grid { min-height: auto; padding-block: 48px 62px; }
body.embed .hero { border-radius: 18px 18px 0 0; }
body.embed footer { padding-bottom: 24px; }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-copy { max-width: 780px; }
  .hero-visual { width: min(650px, 100%); }
  .category-grid, .product-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-primary { grid-template-columns: minmax(0, 1fr) 230px; }
  .optional-filters { grid-template-columns: 1fr 1fr; }
  .optional-filter-copy { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 28px, 1180px); }
  .header-inner { min-height: 72px; }
  .brand img { width: 175px; }
  nav > a:not(.header-cta) { display: none; }
  .header-cta { padding: 11px 14px; font-size: 12px; }
  .hero-grid { padding-block: 54px 64px; }
  .hero h1 { font-size: clamp(39px, 11.4vw, 57px); }
  .hero-lede { font-size: 15px; }
  .hero-search { grid-template-columns: 24px 1fr; padding-right: 10px; }
  .hero-search button { grid-column: 1 / -1; width: 100%; }
  .trust-row { gap: 15px; overflow-x: auto; padding-bottom: 5px; }
  .trust-row div { min-width: 130px; }
  .hero-visual { min-height: 410px; }
  .hero-photo-main { width: 76%; height: 350px; }
  .hero-photo-small { width: 37%; height: 165px; }
  .assistance-card { left: 2%; min-width: min(300px, 92%); }
  .category-section, .catalog-section { padding-block: 66px; }
  .section-heading { grid-template-columns: 1fr; gap: 17px; }
  .section-heading > p { max-width: 620px; }
  .category-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card { min-height: 210px; }
  .catalog-heading { display: block; }
  .catalog-note { margin-top: 15px; }
  .filter-primary { grid-template-columns: 1fr; }
  .catalog-search-button { min-height: 70px; }
  .optional-filters { grid-template-columns: 1fr; }
  .optional-filter-copy { grid-column: auto; }
  .results-help { display: none; }
  .service-banner-inner { display: block; }
  .service-banner a { margin-top: 27px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { display: block; line-height: 1.7; }
}

@media (max-width: 500px) {
  nav { gap: 8px; }
  .brand img { width: 158px; }
  .header-cta { padding: 10px 12px; }
  .hero h1 { font-size: 40px; line-height: 1.06; }
  .trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .trust-row div { min-width: 0; padding-right: 8px; }
  .trust-row strong { font-size: 13px; }
  .trust-row span { font-size: 11px; line-height: 1.35; }
  .category-grid, .product-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 220px; }
  .product-card { min-height: 370px; }
  .hero-visual { min-height: 345px; }
  .hero-photo-main { width: 79%; height: 290px; border-radius: 18px; }
  .hero-photo-small { height: 135px; border-radius: 18px; }
  .assistance-card { bottom: -13px; padding: 12px 14px; }
  .cart-launcher { left: 14px; right: 14px; bottom: 14px; min-width: 0; }
  .quote-cart { width: 100%; }
  .cart-header { padding: 20px 18px 15px; }
  .cart-header h2 { font-size: 22px; }
  .cart-intro { padding: 13px 18px; }
  .cart-items { padding-inline: 18px; }
  .cart-footer { padding: 15px 18px 18px; }
  .lead-form-grid { grid-template-columns: 1fr; }
}

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

/* ===================== CARGA DE REQUISICIÓN ===================== */
.req-pagina{padding:46px 0 72px; background:var(--cloud); min-height:70vh}
.req-encabezado{max-width:66ch; margin-bottom:34px}
.req-encabezado h1{margin:10px 0 12px; font-size:clamp(27px,3.6vw,40px); line-height:1.12; letter-spacing:-.022em}
.req-lede{margin:0; font-size:16.5px; line-height:1.6; color:var(--muted)}

.req-columnas{display:grid; grid-template-columns:1.35fr .65fr; gap:30px; align-items:start}
@media (max-width:900px){ .req-columnas{grid-template-columns:1fr; gap:24px} }

/* zona de carga */
.zona-carga{display:grid; justify-items:center; gap:5px; padding:38px 22px; cursor:pointer;
  border:2px dashed #9fc3da; border-radius:14px; background:var(--white); text-align:center;
  transition:border-color .18s ease, background .18s ease}
.zona-carga:hover{border-color:var(--navy); background:#f7fbfd}
.zona-carga:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.zona-carga.encima{border-color:var(--green); background:#eefaf3; border-style:solid}
.zona-carga.tiene-archivos{padding:24px 20px}
.zona-ico{display:grid; place-items:center; width:52px; height:52px; margin-bottom:6px;
  border-radius:12px; background:#eaf3f9; color:var(--navy)}
.zona-carga strong{font-size:17px; letter-spacing:-.01em}
.zona-carga small{font-size:13.5px; color:var(--muted)}
.zona-formatos{display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:10px}
.zona-formatos span{padding:3px 9px; border-radius:5px; background:#eaf3f9; color:var(--navy);
  font-size:11px; font-weight:800; letter-spacing:.05em}
.zona-limite{margin-top:4px; font-size:12.5px; color:#61717A}

/* archivos elegidos */
.lista-archivos{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.archivo{display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--white);
  border:1px solid var(--line); border-radius:10px}
.archivo-ico{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:8px;
  background:var(--navy); color:#fff; font-size:10px; font-weight:900; letter-spacing:.03em}
.archivo-datos{flex:1; min-width:0}
.archivo-datos strong{display:block; font-size:14px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.archivo-datos small{font-size:12.5px; color:var(--muted)}
.archivo-quitar{flex:none; width:30px; height:30px; border:1px solid var(--line); border-radius:8px;
  background:var(--white); color:var(--muted); font-size:19px; line-height:1; cursor:pointer;
  transition:border-color .16s ease, color .16s ease}
.archivo-quitar:hover{border-color:#d98a8a; color:#a33}

/* campos */
.req-campos{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
@media (max-width:620px){ .req-campos{grid-template-columns:1fr} }
.req-campos .campo-ancho{grid-column:1/-1}
.req-campos label{display:grid; gap:6px}
.req-campos label > span{font-size:13px; font-weight:600; color:var(--ink)}
.req-campos label > span b{color:#b4472f}
.req-campos input, .req-campos select, .req-campos textarea{
  padding:12px 13px; border:1px solid var(--line); border-radius:9px; background:var(--white);
  color:var(--ink); font:400 15px/1.4 inherit; width:100%}
.req-campos textarea{resize:vertical; min-height:78px}
.req-campos input:focus, .req-campos select:focus, .req-campos textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(7,101,167,.14)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* acciones */
.req-enviar{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:20px; padding:15px 24px; border:0; border-radius:10px;
  background:var(--green); color:#fff; font:800 15.5px/1 inherit; cursor:pointer;
  text-decoration:none; transition:background .18s ease, opacity .18s ease}
.req-enviar:hover{background:#219a5e}
.req-enviar:disabled{opacity:.45; cursor:not-allowed}
.req-secundario{display:inline-flex; align-items:center; justify-content:center; padding:12px 20px;
  border:1px solid var(--line); border-radius:10px; background:var(--white); color:var(--navy);
  font-weight:700; font-size:14px; text-decoration:none; transition:border-color .16s ease}
.req-secundario:hover{border-color:var(--navy)}

.estado-envio{margin:12px 0 0; font-size:14px; line-height:1.5; min-height:1.2em}
.estado-envio.is-error{color:#a33}
.estado-envio.is-proceso{color:var(--navy)}
.req-nota{margin:16px 0 0; font-size:12.5px; line-height:1.55; color:#61717A}

/* acuse */
.panel-listo{padding:38px 30px; background:var(--white); border:1px solid var(--line);
  border-radius:14px; text-align:center}
.panel-listo:focus{outline:none}
.listo-marca{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px;
  border-radius:50%; background:#e7f7ee; color:#1f8a53; font-size:26px; font-weight:900}
.panel-listo h2{margin:0 0 8px; font-size:24px; letter-spacing:-.02em}
.listo-folio{margin:0 0 18px; font-size:15px; color:var(--muted)}
.listo-folio strong{display:inline-block; padding:3px 11px; border-radius:6px; background:#eaf3f9;
  color:var(--navy); font-size:16px; letter-spacing:.04em}
.listo-resumen{margin-bottom:16px; text-align:left}
.listo-resumen ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.listo-resumen li{padding:10px 13px; border:1px solid var(--line); border-radius:9px; font-size:14px}
.listo-resumen li small{display:block; margin-top:2px; color:var(--muted); font-size:12.5px}
.listo-resumen .no-leidos{margin:10px 0 0; padding:11px 13px; border-radius:9px;
  background:#fdf3e6; color:#8a5a12; font-size:13px; line-height:1.5}
.listo-texto{margin:0 0 22px; font-size:15px; line-height:1.6; color:var(--muted)}
.listo-acciones{display:grid; gap:10px}
.listo-acciones .req-enviar{margin-top:0}

/* apoyo lateral */
.req-apoyo{display:grid; gap:16px; align-content:start}
.req-apoyo h2{margin:0 0 4px; font-size:16px; letter-spacing:-.01em}
.req-pasos{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:p}
.req-pasos li{display:grid; gap:3px; padding-left:38px; position:relative}
.req-pasos li::before{counter-increment:p; content:counter(p); position:absolute; left:0; top:1px;
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:12.5px; font-weight:800}
.req-pasos strong{font-size:14.5px}
.req-pasos span{font-size:13.5px; line-height:1.5; color:var(--muted)}
.req-alterna{padding:17px 18px; background:var(--white); border:1px solid var(--line); border-radius:12px}
.req-alterna strong{display:block; font-size:14.5px; margin-bottom:5px}
.req-alterna p{margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--muted)}

/* =========================================================================
   PORTADA
   Envuelve al catálogo: hero con almacén real, capacidad, requisición,
   infraestructura y cierre. La paleta sale del logotipo: azul #003C78 y
   verde #60B484.
   ========================================================================= */

:root {
  --verde-claro: #60B484;
  --azul-50: #EDF3F9;
  --azul-100: #D4E4F2;
  --azul-800: #002F5E;
  --linea-suave: #EBF1F6;
}

/* ---------- encabezado fijo ---------- */
.pagina-home .site-header { position: sticky; top: 0; border-bottom: 1px solid var(--line); transition: box-shadow .22s; }
.pagina-home .site-header.fijo { box-shadow: 0 4px 18px rgba(0,35,66,.08); }
.pagina-home .header-inner { justify-content: flex-start; gap: 28px; }
.pagina-home nav { margin-left: auto; gap: 26px; font-size: 14px; font-weight: 600; }
.pagina-home nav a { position: relative; padding: 8px 0; color: var(--muted); }
.pagina-home nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.pagina-home nav a:hover { color: var(--navy); }
.pagina-home nav a:hover::after { transform: scaleX(1); }
.header-acciones { display: flex; align-items: center; gap: 10px; }
.btn-fantasma { display: inline-flex; align-items: center; justify-content: center; padding: 12px 17px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); background: transparent; text-decoration: none; font-size: 13px; font-weight: 700; transition: border-color .2s, background .2s; }
.btn-fantasma:hover { border-color: var(--navy); background: var(--azul-50); }
.pagina-home .header-cta { border-radius: 8px; background: var(--green); box-shadow: 0 6px 18px rgba(62,148,104,.26); font-size: 13px; font-weight: 700; text-decoration: none; }
.pagina-home .header-cta:hover { background: #2F7550; }

/* ---------- botones de la portada ---------- */
.btn-verde, .btn-azul, .btn-claro { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 25px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 700; transition: background .22s, border-color .22s, box-shadow .22s; }
.btn-verde { color: #fff; background: var(--green); box-shadow: 0 2px 10px rgba(62,148,104,.28); }
.btn-verde:hover { background: #2F7550; box-shadow: 0 6px 20px rgba(62,148,104,.34); }
.btn-azul { color: #fff; background: var(--navy); }
.btn-azul:hover { background: #004A90; }
.btn-claro { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38); backdrop-filter: blur(6px); }
.btn-claro:hover { background: rgba(255,255,255,.24); }

/* ---------- hero ---------- */
.hero-home { position: relative; overflow: hidden; color: #fff; background: var(--azul-800); }
.hero-fondo { position: absolute; inset: 0; z-index: 0; }
.hero-fondo img, .hero-fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La fotografía es el respaldo y también lo primero que se pinta: el video entra
   encima cuando ya puede reproducirse, así la portada nunca aparece en negro. */
.hero-fondo video { opacity: 0; transition: opacity .8s ease; }
.hero-fondo.con-video video { opacity: 1; }
/* Velo de marca. Denso donde va el texto y abierto hacia la derecha, que es
   donde se ve moverse la operación: si se cierra parejo, el video no se nota. */
/* La densidad no es estética: el video tiene cuadros casi blancos (las
   camionetas, el cielo). Medido sobre el píxel más claro, hace falta alfa .60
   para que el texto blanco conserve 4.5:1. Se mantiene .72 en toda la columna
   del texto y se abre después, que es donde se ve moverse la operación. */
/* Velo uniforme por omisión: en pantallas medianas el texto ocupa todo el ancho
   y no hay dónde abrir sin dejarlo ilegible. */
.hero-fondo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,26,52,.82) 0%, rgba(0,32,64,.78) 100%); }

/* A partir de aquí el texto ya no llega al borde derecho: ahí sí se abre el velo
   y se ve moverse la operación. El .72 no es estético — medido sobre el píxel
   más claro del video hace falta .60 para que el texto blanco conserve 4.5:1. */
@media (min-width: 1120px) {
  .hero-fondo::after { background:
    linear-gradient(100deg, rgba(0,26,52,.88) 0%, rgba(0,30,60,.82) 40%, rgba(0,36,70,.72) 60%,
                            rgba(0,44,86,.44) 80%, rgba(0,50,100,.3) 100%); }
}
.hero-home-inner { position: relative; z-index: 2; }
.hero-home-inner { position: relative; z-index: 1; padding: 84px 0 68px; }
.hero-caja { max-width: 720px; }
.hero-home h1 { margin: 0 0 16px; font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.032em; text-wrap: balance; }
.hero-home h1 em { display: block; color: #8FD9B0; font-style: normal; }
.hero-home .hero-lede { max-width: 56ch; margin: 0 0 30px; color: rgba(255,255,255,.88); font-size: clamp(16px, 1.9vw, 18px); line-height: 1.6; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-buscador { margin-top: 44px; max-width: 800px; }
.buscador-et { display: block; margin-bottom: 9px; color: rgba(255,255,255,.78); font-size: 13px; }
.buscador-et strong { color: #fff; font-weight: 700; }
.hero-home .hero-search { max-width: 800px; border-radius: 12px; }
.sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 0; font-size: 13px; }
.sugerencias > span { color: rgba(255,255,255,.62); }
.sug { padding: 6px 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: rgba(255,255,255,.9); background: none; font-size: 13px; font-weight: 500; transition: background .2s, border-color .2s; }
.sug:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.16); }

/* ---------- barra de capacidad ---------- */
.confianza { background: #fff; border-bottom: 1px solid var(--line); }
.confianza-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 30px 0; }
.dato { position: relative; padding: 22px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .22s, transform .22s, box-shadow .22s; }
.dato::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--green), var(--navy)); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.dato:hover { border-color: #c3d8e6; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,35,66,.09); }
.dato:hover::after { transform: scaleX(1); }
.dato-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; color: var(--navy); background: var(--azul-50); transition: color .22s, background .22s; }
.dato-ico svg { width: 23px; height: 23px; }
.dato:hover .dato-ico { color: #fff; background: var(--navy); }
.dato .n { display: block; margin-bottom: 6px; color: var(--navy); font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.dato p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------- encabezados de sección ---------- */
.seccion-cab { max-width: 66ch; margin-bottom: 34px; }
.seccion-cab h2, .req-texto h2, .cierre h2, .catalog-heading h2 { margin: 0 0 12px; font-size: clamp(27px, 3.5vw, 40px); font-weight: 700; line-height: 1.14; letter-spacing: -.028em; text-wrap: balance; }
.seccion-lede { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.catalog-heading .seccion-lede { max-width: 62ch; margin-top: 12px; }

/* revelado al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .rev { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
  .rev.visible { opacity: 1; transform: none; }
}

/* ---------- bloque de requisición ---------- */
.req-bloque { padding: 84px 0; background: var(--azul-50); }
.req-rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.pasos { display: grid; gap: 17px; margin: 26px 0 30px; }
.paso { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.paso-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: #fff; background: var(--navy); font-size: 14px; font-weight: 800; }
.paso h3 { margin: 5px 0 3px; font-size: 15px; font-weight: 700; }
.paso p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.tarjeta-carga { display: grid; justify-items: center; gap: 5px; padding: 46px 26px; border: 2px dashed #5B93C4; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; text-decoration: none; color: inherit; transition: border-color .22s, background .22s, transform .22s; }
.tarjeta-carga:hover { border-color: var(--green); background: #F4FBF7; transform: translateY(-3px); }
.carga-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 12px; color: var(--navy); background: var(--azul-50); }
.tarjeta-carga strong { font-size: 17px; letter-spacing: -.01em; }
.tarjeta-carga > small { color: var(--muted); font-size: 14px; }
.carga-boton { margin-top: 16px; padding: 12px 20px; border-radius: 8px; color: #fff; background: var(--navy); font-size: 14px; font-weight: 700; }
.tarjeta-carga:hover .carga-boton { background: #004A90; }
.carga-formatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.carga-formatos span { padding: 4px 10px; border-radius: 8px; color: var(--navy); background: var(--azul-50); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.carga-limite { margin-top: 10px; color: #61717A; font-size: 12px; }

/* ---------- catálogo dentro de la portada ---------- */
.pagina-home .catalog-section { padding: 84px 0 96px; }
.pagina-home .catalog-heading { align-items: start; }
.pagina-home #area-grid { margin: 26px 0 0; }

/* ---------- infraestructura ---------- */
.infra { position: relative; overflow: hidden; padding: 88px 0; color: #fff; background: var(--azul-800); }
.infra-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.infra-fondo img { width: 100%; height: 100%; object-fit: cover; }
/* Deriva lenta: la fotografía respira sin distraer del texto que va encima. */
@media (prefers-reduced-motion: no-preference) {
  .infra-fondo img { animation: deriva 30s ease-in-out infinite alternate; }
  @keyframes deriva { from { transform: scale(1.05) translate3d(-1%,-.7%,0); } to { transform: scale(1.13) translate3d(1%,.7%,0); } }
}
.infra-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,35,74,.94) 0%, rgba(0,35,74,.88) 45%, rgba(0,47,94,.95) 100%); }
.infra-inner { position: relative; z-index: 1; }
.infra .seccion-lede { color: rgba(255,255,255,.84); }
.infra-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.infra-item { padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.07); }
.infra-item h3 { margin: 0 0 7px; font-size: 17px; font-weight: 700; }
.infra-item p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.58; }

/* mosaico de instalaciones: una pieza principal y cinco de apoyo */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 138px; gap: 14px; margin-top: 34px; }
.gfoto { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.06); }
.gfoto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.gfoto::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .88; background: linear-gradient(transparent 42%, rgba(0,26,52,.9)); transition: opacity .4s ease; }
.gfoto:hover img { transform: scale(1.07); }
.gfoto:hover::after { opacity: .96; }
.gfoto figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 16px 17px; opacity: .94; transform: translateY(6px); transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .4s ease; }
.gfoto:hover figcaption { opacity: 1; transform: none; }
.gfoto figcaption b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.gfoto figcaption span { display: block; margin-top: 4px; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.45; }
/* En las piezas chicas el detalle estorbaría: sólo se muestra en las grandes. */
.gfoto:not(.g-destacada):not(.g-flota) figcaption span { display: none; }
.gfoto:not(.g-destacada):not(.g-flota):hover figcaption span { display: block; }
/* El almacén y la flota son la prueba que un comprador busca: ocupan el doble.
   Las cuatro restantes van iguales abajo, para que ninguna parezca relleno. */
.g-destacada { grid-column: span 2; grid-row: span 2; }
.g-flota { grid-column: span 2; grid-row: span 2; }

/* ---------- proceso ---------- */
.proceso { padding: 84px 0; background: #fff; }
.flujo { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; counter-reset: paso; }
.flujo-item { padding: 24px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .22s, transform .22s; }
.flujo-item:hover { border-color: var(--green); transform: translateY(-3px); }
.flujo-item::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 11px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.flujo-item h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.flujo-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- cierre ---------- */
.cierre { padding: 84px 0; background: var(--cloud); border-top: 1px solid var(--line); }
.cierre-caja { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.cierre .seccion-lede { margin-bottom: 26px; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.contacto-caja { padding: 32px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.contacto-caja h3 { margin: 0 0 16px; font-size: 15px; font-weight: 800; }
.contacto-linea { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contacto-linea:last-child { border-bottom: 0; }
.contacto-linea b { font-weight: 700; }
.contacto-linea small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.contacto-linea small a { color: var(--navy); text-decoration: none; font-weight: 600; }
.contacto-linea small a:hover { text-decoration: underline; }

/* ---------- WhatsApp flotante ---------- */
.wa-flota { position: fixed; z-index: 46; right: 22px; bottom: 84px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; background: #25D366; box-shadow: 0 6px 22px rgba(0,0,0,.26); transition: transform .2s; }
.wa-flota:hover { transform: scale(1.06); }
.wa-flota svg { width: 29px; height: 29px; fill: #fff; }

/* ---------- adaptación a pantallas pequeñas ---------- */
@media (max-width: 1050px) {
  .pagina-home nav { display: none; }
  .req-rejilla { grid-template-columns: 1fr; gap: 34px; }
  .cierre-caja { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 1000px) {
  .confianza-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .g-destacada, .g-flota { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 760px) {
  .pagina-home .header-acciones .btn-fantasma { display: none; }
  .hero-home-inner { padding: 56px 0 52px; }
  .hero-home h1 { font-size: clamp(31px, 8.6vw, 44px); }
  .hero-home .hero-search { grid-template-columns: 24px 1fr; padding-right: 10px; }
  .hero-buscador { margin-top: 32px; }
  .confianza-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 26px 0; }
  .dato { padding: 18px 16px; }
  .dato-ico { width: 38px; height: 38px; margin-bottom: 11px; }
  .dato .n { font-size: 25px; }
  .req-bloque, .infra, .proceso, .cierre { padding: 60px 0; }
  .pagina-home .catalog-section { padding: 60px 0 72px; }
  .tarjeta-carga { padding: 34px 20px; }
  .contacto-caja { padding: 24px; }
  .wa-flota { right: 16px; bottom: 82px; width: 50px; height: 50px; }
  .wa-flota svg { width: 26px; height: 26px; }
}
@media (max-width: 520px) {
  .galeria { grid-template-columns: 1fr; grid-auto-rows: 165px; }
  .g-destacada, .g-flota { grid-column: span 1; grid-row: span 2; }
  .gfoto:not(.g-destacada):not(.g-flota) figcaption span { display: block; }
  .hero-acciones .btn-verde, .hero-acciones .btn-claro,
  .cierre-acciones .btn-verde, .cierre-acciones .btn-fantasma { flex: 1 1 100%; }
  .wa-flota { bottom: 86px; }
}

/* El botón flotante de requisición sólo se muestra con productos dentro:
   vacío no lleva a ninguna parte y tapa el contenido de la portada. */
.pagina-home .cart-launcher { display: none; }
.pagina-home .cart-launcher.tiene-productos { display: grid; }
.pagina-home .cart-launcher.tiene-productos ~ .wa-flota { bottom: 88px; }
.pagina-home .wa-flota { bottom: 22px; }
@media (max-width: 760px) {
  .pagina-home .wa-flota { bottom: 16px; }
  .pagina-home .cart-launcher.tiene-productos ~ .wa-flota { bottom: 84px; }
}

/* El encabezado fijo tapa el título al saltar con un enlace interno: se le
   reserva su altura a cada destino. */
.pagina-home :where(#requisicion, #catalogo, #infraestructura, #proceso, #contacto, #top) { scroll-margin-top: 96px; }
.pagina-home .results-bar { scroll-margin-top: 100px; }

/* En una sola columna las dos leyendas del pie se pegaban en un renglón. */
@media (max-width: 760px) {
  .footer-bottom { display: grid; gap: 6px; }
}

/* Área táctil: en pantalla chica los atajos de búsqueda y los datos de
   contacto se pulsan con el dedo, no con un puntero. */
@media (max-width: 760px) {
  .sug { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; }
  .contacto-linea small a { display: inline-block; padding: 6px 0; }
}

/* ---------- acuse: WhatsApp es el paso siguiente, no un botón más ----------
   Sin CRM conectado, este mensaje es la vía por la que el equipo se entera de
   que hay una requisición esperando. Por eso domina el acuse. */
.listo-siguiente { margin: 22px 0 18px; padding: 24px 22px; border: 1px solid #cdeedd; border-radius: 12px; background: #f2fbf6; text-align: left; }
.siguiente-paso { margin: 0 0 6px; color: #1f8a55; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.listo-siguiente h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.02em; }
.listo-siguiente > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.wa-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 14px 22px; border-radius: 12px; color: #fff; background: #25D366; box-shadow: 0 8px 22px rgba(37,211,102,.28); text-decoration: none; font-size: 15px; font-weight: 800; transition: background .2s, box-shadow .2s; }
.wa-boton:hover { background: #1db855; box-shadow: 0 12px 28px rgba(37,211,102,.34); }
.wa-boton svg { flex: none; fill: currentColor; }
.listo-siguiente > small { display: block; margin-top: 12px; color: #61717A; font-size: 12px; line-height: 1.5; }
.listo-siguiente > small a { color: var(--navy); font-weight: 700; }
.listo-acciones .req-secundario { width: 100%; }

/* ===================== PÁGINAS LEGALES =====================
   Texto largo para leer, no para hojear: medida corta, interlínea amplia. */
.pagina-legal { padding: 50px 0 80px; background: var(--cloud); }
.legal-ancho { max-width: 760px; }
.pagina-legal h1 { margin: 10px 0 16px; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -.028em; }
.legal-lede { margin: 0 0 14px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.legal-fecha { margin: 0 0 34px; color: var(--muted); font-size: 13px; }
.legal-bloque { padding: 26px 0; border-top: 1px solid var(--line); }
.legal-bloque h2 { margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.legal-bloque p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
.legal-bloque p:last-child { margin-bottom: 0; }
.legal-bloque a { color: var(--navy); font-weight: 600; }
.legal-lista { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 9px; font-size: 15px; line-height: 1.65; }
.legal-lista li::marker { color: var(--green); }
.legal-aparte { padding: 16px 18px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: #fff; }
.legal-consentimiento { margin: 30px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.65; }
.legal-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Los huecos por llenar tienen que doler a la vista: publicar el aviso con un
   corchete dentro sería peor que no tenerlo. */
.por-completar { padding: 2px 7px; border: 1px dashed #b4712f; border-radius: 8px; color: #8a5300; background: #fdf3e2; font-weight: 700; }

@media (max-width: 600px) {
  .pagina-legal { padding: 34px 0 60px; }
  .legal-bloque { padding: 22px 0; }
  .legal-acciones .btn-verde, .legal-acciones .btn-fantasma { flex: 1 1 100%; }
}

/* Aviso legal en el punto donde se piden los datos, no sólo en el pie. */
.lead-form-legal { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.lead-form-legal a { color: var(--navy); font-weight: 700; }

/* =========================================================================
   OFICIO
   Cosas que casi nadie nombra y todo el mundo nota cuando faltan.
   ========================================================================= */

/* --- foco visible ---------------------------------------------------------
   El anillo del navegador es un punteado gris que se pierde sobre cualquier
   fondo. Quien navega con teclado necesita saber siempre dónde está. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero-home :focus-visible,
.infra :focus-visible,
footer :focus-visible { outline-color: #8FD9B0; }
/* Sin :focus-visible el anillo aparecía también al hacer clic con el ratón. */
:focus:not(:focus-visible) { outline: none; }

/* --- selección de texto ---------------------------------------------------
   Un comprador selecciona claves para copiarlas. El azul del sistema no es
   el de la marca y sobre el azul oscuro se lee mal. */
::selection { color: #fff; background: var(--blue); }
.hero-home ::selection, .infra ::selection { color: var(--navy); background: #8FD9B0; }

/* --- barra de desplazamiento ---------------------------------------------- */
@supports (scrollbar-color: auto) {
  .cart-items, .cart-footer { scrollbar-color: #b9cedb transparent; scrollbar-width: thin; }
}

/* --- esqueleto de carga ---------------------------------------------------
   Antes decía "Preparando catálogo…" sobre una zona vacía. Con 5,286 productos
   el hueco dura lo suficiente para que parezca que algo falló. Se dibuja la
   forma de lo que viene, que es lo que hace que la espera se sienta corta. */
.product-grid.cargando { pointer-events: none; }
.hueso { min-height: 380px; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.hueso-lamina { height: 132px; background: var(--line); }
.hueso-cuerpo { padding: 18px; display: grid; gap: 9px; }
.hueso-linea { height: 11px; border-radius: 8px; background: var(--line); }
.hueso-linea.corta { width: 45%; }
.hueso-linea.media { width: 72%; }
.hueso-linea.alta { height: 46px; margin-top: 12px; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .hueso-lamina, .hueso-linea {
    background: linear-gradient(90deg, var(--line) 25%, #eaf2f6 37%, var(--line) 63%);
    background-size: 400% 100%;
    animation: latido 1.4s ease-in-out infinite;
  }
  @keyframes latido { from { background-position: 100% 0; } to { background-position: 0 0; } }
}

/* --- impresión ------------------------------------------------------------
   Una requisición se imprime y se lleva a una junta. En papel sobran el video,
   los botones y el fondo azul; hace falta que las direcciones sean legibles. */
@media print {
  .hero-home, .infra, .proceso, .wa-flota, .cart-launcher, .quote-cart, .cart-backdrop,
  .filters, .load-more-wrap, .category-grid, .site-header, .req-bloque, .skip-link { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .catalog-section, .cierre, .pagina-legal { padding: 0; background: #fff; }
  .product-grid { display: block; }
  .product-card { min-height: 0; margin-bottom: 8pt; padding-bottom: 6pt; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; box-shadow: none; break-inside: avoid; }
  .product-visual, .add-cart-button, .product-tags { display: none; }
  .product-body { padding: 0; }
  /* En papel el enlace no se puede pulsar: se escribe a dónde iba. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* La pista del atajo: presente, nunca protagonista. */
.filter-search { grid-template-columns: 28px 1fr auto; }
.pista-atajo { padding: 4px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 8px;
  color: var(--muted); background: #f7fbfc; font-family: var(--dato); font-size: 11px; line-height: 1; white-space: nowrap;
  transition: opacity var(--transicion); }
.filter-search:focus-within .pista-atajo { opacity: 0; }

/* ===================== REFINAR RESULTADOS =====================
   Sustituye al bloque de categorías y al segundo buscador. Deliberadamente
   discreto: acotar lo que ya se encontró no es volver a empezar, y no debe
   competir con el campo de búsqueda que vive arriba. */
.refinar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.refinar-et { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.refinar .select-field { flex: 1 1 190px; min-width: 0; }
.refinar .select-field select { width: 100%; min-height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink); background: #fff; }
.refinar .clear-button { min-height: 42px; }
.volver-al-buscador { margin-left: auto; padding: 10px 14px; border-radius: 8px; color: var(--navy);
  text-decoration: none; font-size: 13px; font-weight: 700; }
.volver-al-buscador:hover { background: var(--azul-50); text-decoration: underline; }
@media (max-width: 600px) {
  .refinar { gap: 8px; }
  .refinar .select-field { flex: 1 1 100%; }
  .volver-al-buscador { margin-left: 0; width: 100%; text-align: center; background: var(--azul-50); }
}

/* El buscador del héroe ahora es el único: gana presencia. */
.hero-home .hero-search { max-width: 820px; }
.hero-home .hero-search input { min-height: 56px; font-size: 17px; }
.hero-home .hero-search button { min-height: 56px; padding: 0 30px; font-size: 16px; }

/* La marca, visible en la ficha. El comprador de instrumental la necesita para
   saber qué le llega; antes sólo viajaba al CRM. */
.product-brand { display: flex; align-items: baseline; gap: 6px; margin: 7px 0 0; }
.product-brand span { color: var(--muted); font-size: 11px; font-family: var(--dato); letter-spacing: .04em; text-transform: uppercase; }
.product-brand strong { color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: -.005em; }

/* ===================== PÁGINAS DE CATÁLOGO =====================
   Son las que ve un buscador: existen para que un producto pueda encontrarse
   desde Google, no para competir con la búsqueda de la portada. */
.pagina-catalogo { padding: 34px 0 80px; background: var(--cloud); }
.pagina-catalogo h1 { margin: 10px 0 14px; font-size: clamp(27px, 3.6vw, 40px); line-height: 1.14; }
.pagina-catalogo h2 { margin: 38px 0 16px; font-size: 22px; font-weight: 700; }
.lede-seo { margin: 0 0 28px; max-width: 70ch; color: var(--muted); font-size: 17px; line-height: 1.6; }

.migajas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.migajas a { color: var(--navy); font-weight: 600; }
.migajas span[aria-hidden] { color: #a9bccb; }

.rejilla-seo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ficha-seo { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--s-1); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.ficha-seo:hover { transform: translateY(-3px); border-color: #a9cee0; box-shadow: var(--s-2); }
.ficha-seo > a { display: block; padding: 0 0 2px; text-decoration: none; color: inherit; }
.ficha-seo img { width: 100%; height: 130px; object-fit: contain; padding: 12px 14px 4px; background: #fff; }
.ficha-seo-sinfoto { display: grid; place-items: center; height: 130px; color: #fff; font-family: var(--dato); font-size: 19px; background: linear-gradient(140deg, #0a3f66, #0b5f6e); }
.ficha-seo h3 { margin: 0; padding: 10px 16px 0; font-size: 14px; line-height: 1.4; }
.ficha-seo dl { margin: 10px 16px 16px; display: grid; gap: 5px; font-size: 12px; }
.ficha-seo dl div { display: flex; justify-content: space-between; gap: 10px; }
.ficha-seo dt { color: var(--muted); }
.ficha-seo dd { margin: 0; color: var(--ink); font-family: var(--dato); font-size: 12px; text-align: right; overflow-wrap: anywhere; }

.indice-seo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.indice-seo li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.indice-seo a { color: var(--navy); font-weight: 700; font-size: 14px; text-decoration: none; }
.indice-seo a:hover { text-decoration: underline; }
.indice-seo span { color: var(--muted); font-family: var(--dato); font-size: 12px; }

.producto-seo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.producto-seo-visual { display: grid; place-items: center; min-height: 300px; border-radius: 12px; background: var(--cloud); overflow: hidden; }
.producto-seo-visual img { width: 100%; height: auto; max-height: 380px; object-fit: contain; padding: 18px; }
.producto-seo-visual span { color: var(--muted); font-size: 14px; }
.producto-seo h1 { margin: 6px 0 20px; font-size: clamp(22px, 2.6vw, 30px); }
.producto-seo-datos { margin: 0 0 22px; display: grid; gap: 10px; }
.producto-seo-datos div { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.producto-seo-datos dt { color: var(--muted); }
.producto-seo-datos dd { margin: 0; font-family: var(--dato); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.producto-seo-datos dd a { color: var(--navy); font-weight: 600; }
.producto-seo-nota { margin: 0 0 22px; padding: 14px 16px; border-left: 3px solid var(--green); border-radius: 0 12px 12px 0; background: var(--cloud); font-size: 14px; line-height: 1.6; }
.producto-seo-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.relacionados { margin-top: 44px; }

.paginacion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.paginacion a, .paginacion span { min-width: 42px; min-height: 42px; display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font-family: var(--dato); font-size: 13px; text-decoration: none; }
.paginacion a:hover { border-color: var(--navy); background: var(--azul-50); }
.paginacion span[aria-current] { color: #fff; background: var(--navy); border-color: var(--navy); }

@media (max-width: 1050px) { .rejilla-seo { grid-template-columns: repeat(3, 1fr); } .producto-seo { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 760px)  { .rejilla-seo { grid-template-columns: repeat(2, 1fr); } .pagina-catalogo { padding: 24px 0 60px; } }
@media (max-width: 480px)  { .rejilla-seo { grid-template-columns: 1fr; } .producto-seo { padding: 18px; } .producto-seo-acciones .btn-verde, .producto-seo-acciones .btn-fantasma { flex: 1 1 100%; } }