:root {
    /* El color real de la tapa de cada tubo. No son colores de la marca: el color de la tapa indica el tubo */
    --tapa-lila: #9466C2; --tapa-celeste: #5FB3E0; --tapa-verde: #2E9A58; --tapa-roja: #D2372F; --tapa-amarilla: #EDBB22;
    --torula-azul: #2F66C8; --tapa-neutra: #ABAAB1;
  }
  .t-lila { --c: var(--tapa-lila); color: var(--tapa-lila); }
  .t-celeste { --c: var(--tapa-celeste); color: var(--tapa-celeste); }
  .t-verde { --c: var(--tapa-verde); color: var(--tapa-verde); }
  .t-roja { --c: var(--tapa-roja); color: var(--tapa-roja); }
  .t-amarilla { --c: var(--tapa-amarilla); color: var(--tapa-amarilla); }
  .t-azul { color: var(--torula-azul); }
  .t-neutra { color: var(--tapa-neutra); }
  .con-liquido { --liquido: #DCE5EB; }

  /* Las anclas: la cabecera fija y la barra del catálogo no tapan lo que se abre (--ancla-area la mide el script) */
  #indice { scroll-margin-top: var(--alto-cabecera); }
  .area { scroll-margin-top: var(--ancla-area, calc(var(--alto-cabecera) + 150px)); }
  .oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .catalogo [hidden] { display: none !important; }

  /* El catálogo (D29): la barra queda pegada bajo la cabecera al bajar, con el buscador y las ocho áreas como pestañas.
     Sin JavaScript (sin la clase con-pestanas en <html>) el buscador no aparece y las pestañas son un índice de las áreas */
  .barra-examenes { position: sticky; top: var(--alto-cabecera); z-index: 20; background: var(--gris-claro); border-bottom: 1px solid var(--linea);
    padding: 14px 0 12px; transition: box-shadow .25s; }
  .barra-examenes.pegada { box-shadow: 0 18px 26px -24px rgba(31,30,29,.55); }
  .barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; margin-bottom: 12px; }
  html:not(.con-pestanas) .buscador { display: none; }
  .buscador { position: relative; flex: 0 1 540px; min-width: 0; }
  .buscador input { display: block; width: 100%; height: 50px; padding: 0 50px 0 46px; border: 1px solid var(--linea-tarjeta); border-radius: 14px; background: #fff;
    font: inherit; font-size: 16px; color: var(--carbon); -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
  .buscador input::placeholder { color: var(--suave); opacity: 1; }
  /* Vacío, el texto de ejemplo usa también el lugar de la X */
  .buscador input:placeholder-shown { padding-right: 14px; }
  .buscador input:focus { outline: none; border-color: var(--naranjo); box-shadow: 0 0 0 3px var(--naranjo-claro); }
  .buscador input::-webkit-search-cancel-button, .buscador input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  .buscador-lupa { position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; color: var(--suave); stroke-width: 2; pointer-events: none; }
  .buscador-limpiar { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--suave);
    transition: background .2s, color .2s; }
  .buscador-limpiar:hover { background: var(--gris-claro); color: var(--carbon); }
  .buscador-limpiar .ic { width: 18px; height: 18px; stroke-width: 2; }
  .barra-saltos { flex: none; display: flex; flex-wrap: wrap; gap: 6px 26px; }
  .barra-saltos .enlace-flecha { font-size: 14px; color: var(--carbon); }
  .barra-saltos .enlace-flecha .ic { width: 16px; height: 16px; }

  /* Las pestañas: ícono, nombre y número de exámenes. Si no caben, la fila se desliza, y el borde se desvanece hacia donde hay más */
  .pestanas-areas { display: flex; gap: 5px; overflow-x: auto; margin: -3px; padding: 3px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pestanas-areas::-webkit-scrollbar { display: none; }
  .pestanas-areas.mas-der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .pestanas-areas.mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
  .pestanas-areas.mas-izq.mas-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
  .pestana-area { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 14px; background: #fff;
    border: 1px solid var(--linea-tarjeta); white-space: nowrap; transition: border-color .2s, background .2s; }
  .pestana-area:hover { border-color: var(--naranjo); }
  .pestana-area:focus-visible { outline: 2px solid var(--naranjo-hondo); outline-offset: 1px; }
  .pestana-area .burbuja-ic { width: 30px; height: 30px; flex: none; }
  .pestana-area .burbuja-ic .ic { width: 16px; height: 16px; }
  .pestana-area-txt { line-height: 1.2; }
  .pestana-area-txt b { display: block; font-size: 13.5px; font-weight: 500; }
  .pestana-area-txt small { display: block; font-size: 11.5px; color: var(--suave); margin-top: 2px; }
  .pestana-area[aria-selected="true"] { background: var(--naranjo-claro); border-color: var(--naranjo); }
  .pestana-area[aria-selected="true"] small { color: var(--naranjo-hondo); }
  .buscando .pestana-area[aria-selected="true"] { background: #fff; border-color: var(--linea-tarjeta); }
  .buscando .pestana-area[aria-selected="true"] small { color: var(--suave); }

  /* Lo que encuentra el buscador: la cuenta, que se anuncia, y las filas que calzan, con su área */
  .encontrados-cuenta { font-size: 15px; color: var(--suave); }
  .buscando .encontrados-cuenta { margin-bottom: 14px; }
  .encontrados-cuenta b { font-weight: 600; color: var(--carbon); }
  .encontrados.vacio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 30px; padding: 30px 36px;
    border-radius: 24px; background: var(--gris-claro); }
  .encontrados.vacio .encontrados-fito { grid-column: 1; grid-row: 1 / 3; width: 112px; height: auto; transform: rotate(-6deg); }
  .encontrados.vacio .encontrados-cuenta { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 17px; max-width: 48ch; }
  .encontrados.vacio .encontrados-cuenta b { display: block; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; margin-bottom: 6px; }
  .encontrados-wsp { grid-column: 2; grid-row: 2; align-self: start; justify-self: start; }
  .en-area { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--suave); }
  .en-area .burbuja-ic { width: 20px; height: 20px; flex: none; }
  .en-area .burbuja-ic .ic { width: 11px; height: 11px; stroke-width: 2; }
  .tabla-encontrados mark { background: var(--amarillo-claro); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1px var(--amarillo-claro); }

  /* Las ocho áreas: el título con su burbuja y una tabla por área. Con las pestañas se ve una a la vez, y mientras se busca, ninguna.
     En el celular, cada fila es una tarjeta */
  .areas-examenes { padding-top: 48px; }
  .con-pestanas .area:not(.activa), .con-pestanas .buscando .area { display: none; }
  .con-pestanas .area + .area { margin-top: 0; }
  .con-pestanas .area-volver { display: none; }
  .area + .area { margin-top: 96px; }
  .area-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 22px; }
  .area-cab h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.028em; font-weight: 500; }
  .area-volver { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--suave); transition: color .2s; }
  .area-volver:hover { color: var(--carbon); }
  .area-volver .ic { width: 17px; height: 17px; color: var(--naranjo); stroke-width: 2; }
  .tabla-examenes { table-layout: fixed; }
  .tabla-examenes .c-examen { width: 40%; }
  .tabla-examenes .c-tiempo { width: 17%; }
  .tabla-examenes .c-muestra { width: 38%; }
  .tabla-examenes .c-consulta { width: 5%; }
  /* La consulta por WhatsApp de cada examen: la pone el script, con el mensaje ya escrito */
  .tabla-examenes td.consulta { padding: 8px 12px; text-align: center; }
  .consultar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--naranjo-claro); color: var(--naranjo-hondo);
    transition: background .2s, color .2s; }
  .consultar:hover { background: var(--naranjo); color: #fff; }
  .consultar .ic { width: 19px; height: 19px; }
  .tabla-examenes tbody th { text-align: left; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--carbon);
    background: none; padding: 14px 18px; border-top: 1px solid var(--linea); vertical-align: top; }
  .tabla-examenes small { display: block; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--suave); margin-top: 3px; }
  /* En la columna Muestra, el tipo de muestra sigue al contenedor en la misma línea */
  .tabla-examenes td small { display: inline; font-size: 13.5px; }
  .tabla-examenes td small::before { content: "·"; margin: 0 7px 0 8px; color: var(--suave); }
  .tabla-examenes tbody tr:not(.grupo):hover > * { background: #FAFAFB; }
  .tabla-examenes tr.grupo th { padding: 20px 18px 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--naranjo-hondo); }
  .tabla-examenes tr.grupo th::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--naranjo); margin: 0 10px 2px 0; vertical-align: middle; }
  .plazo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--gris-claro); font-size: 13.5px; font-weight: 500; line-height: 1.35; }
  .plazo .ic { display: none; width: 15px; height: 15px; color: var(--naranjo-hondo); stroke-width: 2; }
  .envase { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 500; }
  .tapas { display: inline-flex; gap: 3px; flex: none; margin-top: 5px; }
  .tapa { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31,30,29,.16); }

  /* Paquetes: los exámenes que reúne cada uno y su tiempo de entrega */
  .paquetes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .paquete { background: #fff; border-radius: 22px; padding: 18px 22px 20px; display: flex; flex-direction: column; box-shadow: 0 24px 40px -34px rgba(31,30,29,.45); }
  .paquete-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .paquete .paso-num { width: 40px; height: 40px; font-size: 14px; }
  .paquete h3 { flex: 1; font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; margin-top: 18px; }
  .paquete h3 span { display: block; }
  .paquete h3 span + span { margin-top: 4px; }
  .paquete .mas { color: var(--naranjo-hondo); font-weight: 600; margin-right: 2px; }
  .paquete-plazo { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 14px; font-weight: 500; }
  .paquete-plazo .ic { width: 18px; height: 18px; color: var(--naranjo); }

  /* Toma de muestras: cada contenedor dibujado, los tubos con el color real de su tapa */
  .toma-ayuda { display: flex; align-items: center; gap: 14px; }
  .toma-ayuda .sello { width: 58px; height: 58px; }
  .envases-grupo { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-bottom: 14px; }
  .envases + .envases-grupo { margin-top: 40px; }
  .envases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .envase-tarjeta { background: var(--gris-claro); border-radius: 22px; padding: 10px 10px 20px; display: flex; flex-direction: column; }
  .envase-dibujo { background: #fff; border-radius: 16px; height: 150px; display: flex; align-items: center; justify-content: center; }
  .dibujo { display: block; flex: none; width: 80px; height: 120px; }
  .dibujo + .dibujo { margin-left: -30px; }
  .envase-texto { padding: 16px 10px 0; }
  .envase-tarjeta h4 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
  .envase-muestra { font-size: 14px; line-height: 1.45; margin-top: 6px; }
  .envase-uso { font-size: 13.5px; line-height: 1.45; color: var(--suave); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gris-medio); }
  .envase-uso span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--carbon); margin-bottom: 4px; }

  /* Cómo enviar una muestra: los tres pasos en una franja, sobre el amarillo del inicio */
  .enviar { background: var(--amarillo); overflow: hidden; }
  .enviar.patron::before { background-image: url("../img/patron-blanco.svg"); opacity: .3; }
  .enviar .bajada { color: rgba(31,30,29,.74); }
  .pasos-franja { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .paso-corto { background: #fff; border-radius: 24px; padding: 26px 26px 24px; display: flex; flex-direction: column; box-shadow: 0 26px 40px -30px rgba(31,30,29,.5); }
  .paso-corto h3 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; margin-top: 16px; }
  .paso-corto p { font-size: 15px; color: var(--suave); margin-top: 6px; }
  .paso-corto p.nota { color: var(--naranjo-hondo); font-weight: 500; margin-top: 8px; }
  .paso-corto .enlace-flecha { margin-top: auto; padding-top: 16px; }
  .paso-corto .descargas { margin-top: 18px; max-width: none; }

  @media (max-width: 1240px) {
    .paquetes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 1100px) {
    .envases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pasos-franja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paso-corto:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 880px) {
    /* La barra: el buscador a lo ancho y las pestañas en una fila que se desliza con el dedo, de borde a borde */
    .barra-examenes { padding: 10px 0; }
    .barra-fila { margin-bottom: 10px; }
    .barra-saltos { display: none; }
    html:not(.con-pestanas) .barra-fila { display: none; }
    .buscador { flex: 1 1 auto; }
    .buscador input { height: 46px; }
    .buscador-lupa { top: 13px; }
    .buscador-limpiar { top: 4px; }
    .pestanas-areas { margin: -3px -16px; padding: 3px 16px; scroll-padding-inline: 16px; }
    .pestana-area { flex: 0 0 auto; }
    .areas-examenes { padding: 28px 0 72px; }
    .tabla-examenes .c-examen { width: 38%; }
    .tabla-examenes .c-tiempo { width: 20%; }
    .tabla-examenes .c-muestra { width: 34%; }
    .tabla-examenes .c-consulta { width: 8%; }
    .tabla-examenes td.consulta { padding: 8px 6px; }
    .encontrados.vacio { gap: 14px 22px; padding: 24px; }
    .encontrados.vacio .encontrados-fito { width: 88px; }
    .area + .area { margin-top: 72px; }
    .paquetes, .envases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pasos-franja { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    /* Sin resultados: Fito y el mensaje lado a lado, y el botón a lo ancho */
    .encontrados.vacio { gap: 16px; padding: 20px; border-radius: 20px; }
    .encontrados.vacio .encontrados-fito { grid-row: 1; width: 64px; align-self: start; }
    .encontrados.vacio .encontrados-cuenta { align-self: center; font-size: 15px; }
    .encontrados.vacio .encontrados-cuenta b { font-size: 21px; }
    .encontrados-wsp { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
    /* La cuenta de lo encontrado, pegada a sus tarjetas */
    .buscando .encontrados-cuenta { margin-bottom: 8px; }
    .area + .area { margin-top: 56px; }
    /* La burbuja a la izquierda, el nombre y la cuenta uno sobre otro, y el enlace al índice a la derecha */
    .area-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; margin-bottom: 6px; }
    .area-cab .burbuja-ic { grid-row: 1 / 3; width: 44px; height: 44px; }
    .area-cab .burbuja-ic .ic { width: 21px; height: 21px; }
    .area-cab h2 { grid-column: 2; font-size: 25px; }
    .area-cab .cuenta { grid-column: 2; justify-self: start; padding: 3px 10px; font-size: 12px; }
    .area-volver { grid-column: 3; grid-row: 1 / 3; }
    /* La tabla pasa a tarjetas: el examen arriba, con la consulta por WhatsApp a su derecha; el tiempo y la muestra debajo */
    .tabla-examenes, .tabla-examenes tbody, .tabla-examenes th, .tabla-examenes td { display: block; }
    .tabla-examenes colgroup, .tabla-examenes thead { display: none; }
    .tabla-examenes { background: none; border: 0; border-radius: 0; overflow: visible; font-size: 14px; }
    .tabla-examenes tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 7px 10px; background: #fff;
      border: 1px solid var(--linea-tarjeta); border-radius: 16px; padding: 10px 13px 11px; margin-top: 6px; }
    .tabla-examenes tbody th, .tabla-examenes td { padding: 0; border: 0; }
    .tabla-examenes tbody th { grid-column: 1 / 3; font-size: 15px; line-height: 1.35; }
    .tabla-examenes td[data-etiqueta="Tiempo"] { grid-column: 1; grid-row: 2; }
    .tabla-examenes td[data-etiqueta="Muestra"] { grid-column: 2 / 4; grid-row: 2; min-width: 0; line-height: 1.35; padding-top: 3px; }
    .tabla-examenes td.consulta { grid-column: 3; grid-row: 1; padding: 0; margin: -3px -5px 0 0; }
    .consultar { width: 36px; height: 36px; }
    .tabla-examenes td[data-etiqueta="Muestra"] .tapas { margin-top: 3px; }
    .tabla-examenes small { font-size: 12.5px; margin-top: 2px; }
    .tabla-examenes td small { display: block; font-size: 12.5px; }
    .tabla-examenes td small::before { content: none; }
    .tabla-examenes tbody tr:not(.grupo):hover > * { background: none; }
    .tabla-examenes tr.grupo { display: block; background: none; border: 0; border-radius: 0; padding: 0; margin-top: 0; }
    .tabla-examenes tr.grupo th { padding: 18px 2px 0; }
    .plazo { padding: 3px 9px; font-size: 13px; }
    .plazo .ic { display: block; }
    /* Paquetes: los exámenes en un renglón corrido, para que la tarjeta quede baja */
    .paquetes { grid-template-columns: 1fr; gap: 8px; }
    .paquete { padding: 14px 16px; }
    .paquete .paso-num { width: 34px; height: 34px; font-size: 13px; }
    .paquete h3 { margin-top: 10px; font-size: 16px; }
    .paquete h3 { text-wrap: wrap; }
    .paquete h3 span { display: inline; white-space: nowrap; }
    .paquete h3 span + span { margin-top: 0; }
    .paquete-plazo { margin-top: 10px; padding-top: 9px; }
    .toma-ayuda .sello { display: none; }
    .envases { grid-template-columns: 1fr; gap: 10px; }
    .envase-tarjeta { flex-direction: row; padding: 8px; }
    .envase-dibujo { width: 92px; height: auto; flex: none; }
    .dibujo { width: 60px; height: 90px; }
    .dibujo + .dibujo { margin-left: -24px; }
    .envase-texto { padding: 8px 8px 6px 14px; }
    .envase-tarjeta h4 { font-size: 16px; }
    .envase-muestra { font-size: 13.5px; }
    .envase-uso { font-size: 13px; margin-top: 8px; padding-top: 8px; }
    .paso-corto { padding: 22px 20px 20px; }
  }
  /* En el celular la cabecera va sin foto, para que el buscador quede a la vista antes (27-10) */
  @media (max-width: 560px) { .cabecera-pagina .cabecera-foto { display: none; } }
  /* «Más de 150 exámenes» destacado en la portada (pedido de Fidelis del 28-10, D31) */
  .bajada .destacado { color: var(--naranjo); font-weight: 600; }