/* ==========================================================================
   polish.css · Pulido de simetría, orden y legibilidad (QA de diseño 2026-10-20)
   Se carga al final de <head> en todas las páginas, después de los <style>
   propios de cada página. No redefine la identidad: solo corrige pisos de
   legibilidad, ritmo y alineación. Ver DISENO_QA.md.
   ========================================================================== */

/* 1. Piso de legibilidad: ningún texto funcional por debajo de 11px.
   Se mantienen las mayúsculas espaciadas de las etiquetas cortas (sistema del brandbook). */
.eyebrow,
.stat-grid span,
.inst-hero .eyebrow,
.country-tab,
.nos-country-tab,
.country-meta span,
.nos-country-meta span,
.nos-metrics span,
.lab-dark .stat-grid span,
.metrics span,
.metric-row span,
.tl-tag,
.test-tag,
.feature small,
.diff-card small,
.cat-card small,
.prod-tag,
.prod-pills span,
.category-pill,
.cat-filters button,
.pd-fact small,
.pd-related-card small,
.cf-hero-facts span,
.cf-groups-label,
.cf-ph small,
.cf-help small,
.footer-bottom,
.footer-bottom span {
  font-size: 11px;
}
.nos-country-detail .nos-units-list span,
.cf-countries span {
  font-size: 11px;
  line-height: 1.3;
}
.cf-countries span { padding: 4px 8px }

/* 2. Metadatos largos: sin mayúsculas forzadas (se leen como texto, no como etiqueta). */
.art-card small,
.story-card small,
.featured-article small,
.unit-card small,
.unit-grid .unit-card small,
.units-grid .unit-card small,
.partner-cell span,
.partner-logo-item span,
.partners-list .partner-row b,
#marcas .partner-row b,
.coverage caption {
  text-transform: none;
  letter-spacing: .02em;
  font-size: 12px;
  line-height: 1.5;
}
.art-card small b,
.story-card small b,
.featured-article small b {
  text-transform: none;
  letter-spacing: .02em;
  font-size: inherit;
}

/* 3. Encabezados de tarjetas de pruebas: pasan de h3 a h2 (orden de encabezados) con el mismo aspecto. */
.prod-body h2 {
  font: 400 20px/1.3 var(--display);
  letter-spacing: -.02em;
  margin: 0;
  color: inherit;
}

/* 4. Ritmo y simetría de tarjetas: igual altura por fila y CTA alineado al pie. */
.cat-grid,
.articles-row,
.article-list,
.val-grid,
.unit-grid,
.cf-grid,
.pd-related,
.pd-related-grid { align-items: stretch }
.art-card,
.story-card,
.val-card { display: flex; flex-direction: column }
.val-card > a:last-child,
.val-card .text-link { margin-top: auto }

/* 5. Mapas regionales: el viewBox del SVG se amplió a la izquierda (index y nosotros)
   para que la etiqueta "Ecuador" no se recorte en pantallas angostas. */

/* 6. Catálogo de Fertilidad: misma familia visual que el resto del sitio. */
.cf-card { border-radius: 4px 4px 42px 4px }
.cf-stage-count { font-size: 12px }
.cf-table { font-size: 13px }
.cf-table th { font-size: 12px }
.cf-route { font-size: 13px }
.cf-related small { font-size: 12px }
.cf-code { font-size: 12px }
@media (max-width: 600px) {
  .cf-ph.cf-img { height: 168px }
  .cf-filters input { flex-basis: 100% }
  .cf-table-wrap { margin-right: 0; -webkit-overflow-scrolling: touch }
  .cf-table th, .cf-table td { padding: 9px 10px }
  .cf-detail-copy h2 { font-size: 26px }
}

/* Chips de países: separados y sin cortes dentro del chip (tarjeta y ficha). */
.cf-countries,
.cf-countries-full { display: flex; flex-wrap: wrap; gap: 6px }
.cf-countries span,
.cf-countries-full span { white-space: nowrap; border-radius: 2px 2px 8px 2px }

/* Ficha (modal) en móvil: ocupa toda la pantalla y no desborda en horizontal. */
@media (max-width: 600px) {
  .cf-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 }
  .cf-dialog-inner { max-height: 100dvh; overflow-x: hidden }
  .cf-close { margin: 12px 12px 0 0 }
}

/* 7. Logos de fabricantes: mismo peso óptico en Inicio, Nosotros y Laboratorios. */
.partner-cell img { height: 44px; max-width: 160px; opacity: .8 }
@media (max-width: 650px) {
  .partner-grid { grid-template-columns: 1fr }
  .partner-cell { min-height: 112px; padding: 24px 16px }
}

/* 8. Pruebas destacadas (Diagnostics) en móvil: el enlace "Ver" va después de la descripción. */
@media (max-width: 760px) {
  .test-row > a { order: 5; margin-top: 2px }
}

/* 9. Navegación del header en móvil: el desplazamiento horizontal se insinúa con un fundido, no con palabras cortadas. */
@media (max-width: 760px) {
  .brand-interior .site-header .header-links {
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    padding-right: 32px;
    scrollbar-width: none;
  }
  .brand-interior .site-header .header-links::-webkit-scrollbar { display: none }
}

/* 10. Ritmo vertical de Inicio: una sola medida entre secciones en escritorio. */
@media (min-width: 761px) {
  .brands-section,
  .map-section,
  .partners-section { padding-top: 96px; padding-bottom: 96px }
}

/* 11. Fotos de producto del catálogo (propias y de fabricante, fondo blanco o transparente,
   proporciones variadas): mismo lienzo blanco, misma altura y mismo encuadre en todas las tarjetas. */
img.cf-img {
  height: 200px;
  padding: 20px 28px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.cf-detail-media:has(img.cf-detail-img) { background: #fff; border-right: 1px solid var(--line) }
img.cf-detail-img { max-height: 380px; object-fit: contain }
@media (max-width: 860px) {
  .cf-detail-media:has(img.cf-detail-img) { border-right: 0; border-bottom: 1px solid var(--line) }
}
@media (max-width: 600px) {
  img.cf-img { height: 168px; padding: 16px 24px }
}

/* 12. Texto de lectura de 12px como mínimo: footer, migas de pan, etiquetas de tarjetas del catálogo y pasos en móvil. */
.site-footer .footer-grid a,
.site-footer .footer-grid span { font-size: 13px }
.site-footer .footer-bottom,
.site-footer .footer-bottom span { font-size: 12px }
.breadcrumbs { font-size: 12px }
.cf-card .prod-tag { font-size: 12px }
@media (max-width: 760px) {
  .step-item p { font-size: 12px }
}
.site-footer .footer-grid b { font-size: 12px }
.site-footer .footer-brand p { font-size: 13px; line-height: 1.6 }

/* Fondos IA con profundidad y deriva lenta (21-10-2026). El contenido de la sección queda por encima. */
.has-depth{position:relative;isolation:isolate;overflow:hidden}
.bg-depth{position:absolute;inset:-14% 0;z-index:-1;background:var(--bg) var(--bg-pos,center)/cover no-repeat;transform:translate3d(0,calc((var(--depth-p,.5) - .5) * -22%),0) scale(1.05);will-change:transform;pointer-events:none}
.bg-depth.is-soft{opacity:.55}
.bg-depth.is-drift{animation:bgDrift 28s ease-in-out infinite alternate}
@keyframes bgDrift{from{background-position:30% 50%}to{background-position:70% 50%}}
.bg-depth.fade-left{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 35%,#000 70%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 35%,#000 70%)}
.motion-off .bg-depth{transform:none;animation:none}
@media(prefers-reduced-motion:reduce){.bg-depth{transform:none;animation:none}}
.has-depth .diff-card{background:rgba(255,255,255,.94)}
.bg-depth.is-right{background-size:auto 100%;background-position:right center;inset:-8% 0}
.bg-depth.is-faint{opacity:.38}
@media(max-width:1100px){.bg-depth.is-right{opacity:.3}}

/* 13. Responsive (21-10-2026): áreas táctiles de 44 px y menú desplazable con pista visual, sin cambiar el diseño de escritorio. */
@media (max-width: 760px) {
  .site-header nav a, .header-links a { min-height: 44px; display: inline-flex; align-items: center }
  .header-links { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 28px; scrollbar-width: none }
  .header-links::-webkit-scrollbar { display: none }
  .back-bar a { display: inline-flex; align-items: center; min-height: 40px }
  a.text-link { min-height: 44px; display: inline-flex; align-items: center }
  .contact-info a { min-height: 44px; display: flex; align-items: center }
}

/* Menú visible en tablet: version-b.css lo ocultaba entre 761 y 980 px (interiores) y entre 601 y 980 px (Inicio) sin ofrecer alternativa. */
@media (min-width: 761px) and (max-width: 980px) {
  .site-header .header-links { display: flex; flex: 1; justify-content: flex-end; gap: 18px; font-size: 13px; overflow-x: auto; white-space: nowrap; scrollbar-width: none }
  .site-header .header-links a { flex: none }
}
@media (min-width: 601px) and (max-width: 760px) {
  body:not(.brand-interior) .site-header .header-links { display: flex; flex: 1; justify-content: flex-end; gap: 16px; font-size: 13px; white-space: nowrap; -webkit-mask-image: none; mask-image: none; padding-right: 0 }
}
@media (max-width: 760px) { .cf-reset { min-height: 44px } .cf-page { min-width: 44px; height: 44px } }
/* «Mi cotización» no tapa tarjetas ni paginación. */
.cf-has-quote .cf-pager { padding-bottom: 110px }
@media (max-width: 600px) { .cf-quote-fab { left: 16px; right: 16px; justify-content: center } }
@media (max-width: 760px) { .site-footer .footer-grid a { display: inline-block; padding: 6px 0 } }