/* ==========================================================================
   Espacio publicitario de Zoriak Pharma
   Usa los tokens del sistema de diseno de la SVC (main.css).

   Decision de marca: el unico archivo de logo que existe es BLANCO, asi que
   siempre va sobre .zk-panel-oscuro. Se usa un oscuro NEUTRO y no el crimson
   de la SVC, porque la especificacion pide separar con claridad el contenido
   patrocinado de la informacion institucional de la Sociedad.
   Si llega la version a color del logo, basta con retirar .zk-panel-oscuro.
   ========================================================================== */

:root {
  --zk-panel: #1E2430;
  --zk-panel-borde: #2C3444;
}

/* -------------------------------------------------- panel de marca reutilizable */

.zk-panel-oscuro {
  background: var(--zk-panel);
  border: 1px solid var(--zk-panel-borde);
}

/* ------------------------------------------------------------ tarjeta de entrada */

/* La entrada vive en la pantalla principal: necesita aire por debajo para no
   quedar pegada al encabezado de la seccion siguiente. */
#home-zoriak-entry { margin-bottom: 24px; }

.zk-entrada {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.zk-entrada:hover,
.zk-entrada:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 36, 48, .28);
}

.zk-entrada-logo { height: 30px; width: auto; flex-shrink: 0; }

.zk-entrada-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.zk-entrada-etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.zk-entrada-accion { font-size: 14px; font-weight: 600; color: #FFFFFF; }

.zk-entrada-flecha { color: rgba(255, 255, 255, .75); display: flex; flex-shrink: 0; }

/* -------------------------------------------------------------------- cabecera */

.zk-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  margin-bottom: 18px;
}

.zk-cabecera-logo { height: 42px; width: auto; max-width: 78%; }

/* En movil la franja es estrecha y el logo centrado ya la llena: el rotulo solo
   aparece en escritorio, donde hace falta para equilibrar el ancho. */
.zk-cabecera-rotulo { display: none; }

/* -------------------------------------------------------------------- buscador */

.zk-buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary, #F4F9FF);
  border: 1px solid #E1E8F2;
  padding: 0 14px;
  margin-bottom: 18px;
}

.zk-buscador-icono { color: var(--text-secondary, #666); display: flex; flex-shrink: 0; }

.zk-buscador-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 0;
  font-family: inherit;
  font-size: 16px;            /* 16px o mas: por debajo, iOS hace zoom al enfocar */
  color: var(--text-primary, #333);
  outline: none;
  min-width: 0;
}

.zk-buscador-input::placeholder { color: #9AA4B2; }
.zk-buscador-input::-webkit-search-cancel-button { cursor: pointer; }

/* ------------------------------------------------------------ rejilla y tarjeta */

/* Rejilla adaptativa, no de columnas fijas. A 768px la barra lateral de escritorio
   (desktop.css) entra en el mismo punto de ruptura y se comia el ancho: con un
   numero fijo de columnas la ultima tarjeta se salia 21px. Con auto-fill la
   rejilla se ajusta al ancho real que quede, sea cual sea. */
.zk-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.zk-producto {
  background: #FFFFFF;
  border: 1px solid #E6EBF2;
  padding: 10px 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.zk-producto:hover,
.zk-producto:focus-visible {
  border-color: var(--red-primary, #B3153B);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
  outline: none;
}

.zk-producto-arte {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}

/* contain: el mockup nunca se deforma ni se recorta (criterio de aceptacion 6) */
.zk-producto-img { width: 100%; height: 100%; object-fit: contain; }

.zk-producto-nombre {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #333);
  line-height: 1.25;
}

.zk-producto-conc {
  font-size: 12px;
  font-weight: 600;
  color: var(--red-primary, #B3153B);
  margin-top: 3px;
}

.zk-producto-activo {
  font-size: 11px;
  color: var(--text-secondary, #666);
  margin-top: 4px;
  line-height: 1.35;
}

/* ----------------------------------------------------------------- estado vacio */

.zk-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 20px;
  color: var(--text-secondary, #666);
}

.zk-vacio-icono { display: flex; justify-content: center; color: #C3CBD6; margin-bottom: 12px; }
.zk-vacio-texto { font-size: 14px; margin: 0; }

/* ----------------------------------------------------------------------- ficha */

.zk-detalle-arte {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  margin-bottom: 16px;
}

.zk-detalle-img { width: 100%; height: 100%; object-fit: contain; }

.zk-detalle-info { border-top: 1px solid #E6EBF2; }

.zk-detalle-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #EEF2F7;
}

.zk-detalle-etiqueta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-secondary, #666);
  flex-shrink: 0;
}

.zk-detalle-valor {
  font-size: 14px;
  color: var(--text-primary, #333);
  text-align: right;
  line-height: 1.4;
}

.zk-detalle-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-top: 18px;
}

.zk-logo-pie { height: 26px; width: auto; }

/* --------------------------------------------------------------------- lineas */

.zk-seccion-titulo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-primary, #333);
  margin: 32px 0 16px;
}

.zk-lineas-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 10px;
}

.zk-linea { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }

/* sin deformar: los iconos son circulares y cuadrados de origen */
.zk-linea-icono { width: 62px; height: 62px; object-fit: contain; }

.zk-linea-nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #666);
  line-height: 1.3;
}

/* ------------------------------------------------------------ auspiciado por */

/* Cierre sobre fondo claro con el logo oscuro: se lee como credito de patrocinio,
   no como otro banner. Separa el contenido patrocinado de lo institucional. */
.zk-auspicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px;
  margin: 32px 0 8px;
  border-top: 1px solid #E6EBF2;
}

.zk-auspicio-titulo {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-secondary, #666666);
}

.zk-auspicio-logo { height: 34px; width: auto; max-width: 70%; }

/* ------------------------------------------------------------------ escritorio */

@media (min-width: 768px) {
  /* Techo de ancho. Sin el, un monitor mas grande no agranda el producto: solo
     añade columnas. A 1440 salian 5 columnas y a 1920 siete, con el arte del
     producto a 185px — mas pequeño que en un telefono. Con 1040px caben 4
     columnas de ~246px y el arte sube a ~220px. */
  #zoriak-content {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Minimo 200px, no 220: con el tope de 1040px de arriba ya salen 4 columnas en
     escritorio, y 220 rompia la tablet vertical (contenedor de ~448px junto a la
     barra lateral), que caia a 1 sola columna por 4px de diferencia. */
  .zk-rejilla { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }

  /* Cabecera compacta y alineada a la izquierda. Centrada y a todo ancho dejaba
     una franja oscura con solo el 15% de llenado: lo primero que veia el ojo era
     un vacio negro. */
  .zk-cabecera {
    justify-content: flex-start;
    padding: 22px 32px;
    margin-bottom: 22px;
  }
  .zk-cabecera-logo { height: 54px; max-width: none; }

  .zk-cabecera-rotulo {
    display: block;
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
  }

  /* Nadie escribe el nombre de un farmaco a lo ancho de un metro de pantalla. */
  .zk-buscador { max-width: 440px; }

  .zk-lineas-rejilla { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .zk-linea-icono { width: 76px; height: 76px; }
  .zk-producto-nombre { font-size: 14px; }
  .zk-producto-activo { font-size: 12px; }
}

/* Sin regla intermedia de columnas: auto-fill ya reparte solo entre 480 y 767. */

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .zk-entrada, .zk-producto { transition: none; }
  .zk-entrada:hover, .zk-producto:hover { transform: none; }
}