/* ===========================
   HOME
   Secciones de la portada (patógenos individuales, paneles, etc.)
   =========================== */

/* ---------- Helpers ---------- */
.container{ width:min(1100px, 92vw); margin-inline:auto; }

/* Cabecera genérica de secciones (título + subtítulo opcional) */
.section-head{
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 900px;
}
.section-head .section-title{
  margin: 0 0 .35rem;
  font-weight: 800;
  color: #202040;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
.section-head .section-subtitle{
  margin: 0;
  color: var(--vpcr-muted);
  font-size: .98rem;
}

/* ---------- Bloque principal de presentación ---------- */
.section-products{
  padding: 4rem 2rem;
}
.section-products .section-head{
  text-align: center;
  margin-bottom: 2rem;
}
.section-products .section-head h2{
  margin: 0;
  font-weight: 800;
  color: var(--vpcr-brand);
}
.section-products .section-head p{
  margin: .5rem 0 0;
  color: var(--vpcr-muted);
}

/* ===========================
   Bloque 1 · Patógenos individuales
   =========================== */

/* Alias para compatibilidad: si ya usas .categories-section, seguirá funcionando */
.pathogens-section,
.categories-section{
  padding:4rem 2rem;
  background:#f4f5f5;
}

/* Intro */
.section-intro{
  max-width:1000px;
  margin:3rem auto 4rem;
}

.section-intro.container{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:4rem;
}

/* Columna izquierda */
.intro-left{
  flex:1;
}

.intro-left h2{
  color:#7a4dff;
  font-weight:700;
  font-size: 40px;
  line-height: 1.15;
  text-align:left;      /* ← CAMBIO */
  word-spacing:normal;  /* ← CAMBIO */
  margin-bottom:1.5rem;
}


/* Video */
.intro-video{
  width:100%;
  max-width:420px;
}

.intro-video video{
  width:100%;
  height:180px;
  display:block;
  border-radius:16px;
  object-fit:cover;
  box-shadow: 0 20px 40px rgba(32,32,64,.15);
}

/* Columna derecha */
.intro-right{
  padding-top: 4.5rem;
  flex:1;
}

.intro-right p{
  max-width:430px;
  margin-right:3rem;
  font-size:20px;
  font-weight:400;
  line-height:1.5;
  color:#202040;
  text-align:justify;
}

.intro-video{
  display:block;
}

.intro-video video{
  background:#000;
}


/* Grid reutilizable */
.categories-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  max-width:1000px; margin:0 auto;
}

/* Card base */
.category-card{
  position:relative;
  height:150px; border-radius:12px; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; cursor:pointer;
  transition: background-color .25s ease, transform .18s ease, box-shadow .25s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  color:#7a4dff; /* texto + icono via currentColor */
}

/* Icono con mask: usa currentColor para heredar el color de la card */
.category-icon{
  width:80px; height:80px;
  margin-top:.5rem; margin-bottom:.3rem;
  display:inline-block;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
  transition: transform .25s ease, opacity .25s ease;
}

/* Hover general */
.category-card:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Variante veterinaria: al hover, fondo morado y texto/icono en blanco */
.category-card.veterinary:hover{
  background:#5a38b5; color:#fff;
}

/* Tooltip descriptivo */
.category-card .submenu{
  display:none; position:absolute; top:80%; left:2rem; width:80%;
  background:#fff; border-radius:12px; padding:1rem 1rem .5rem 1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  color:#7a4dff; font-size:.9rem; font-weight:400; text-align:left;
  border:1px solid rgba(0,0,0,.06);
}
.category-card:hover .submenu{ display:block; }
.submenu p{ margin:0 5px 5px; line-height:1.2; }

/* ===========================
   Bloque 2 · Paneles
   =========================== */
.panels-section{
  padding:4rem 2rem 5rem;
  background: linear-gradient(180deg, #f9f9ff, #fff 65%);
}

/* Estilo diferenciado para cards de paneles */
.panels-section .category-card{
  border:1px solid rgba(122,77,255,.18);
}
.panels-section .category-card:hover{
    background:#5a38b5; color:#fff;
}

/* ===========================
   Breakpoints
   =========================== */
@media (max-width: 1024px){
  .categories-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .intro-right p{ margin-right:0; }
}

@media (max-width: 768px){
  .section-products{ padding: 3rem 1rem; }
  .products-strip{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  .section-intro{ margin:1rem auto 2.5rem; }
  .intro-left h2{ font-size:32px; }
  .intro-right p{ font-size:18px; max-width:100%; }

  .categories-grid{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .category-card{ height: 140px; }
  .category-card .submenu{
    left:1rem; width: calc(100% - 2rem);
  }
}