/* =========================================================
   Patógenos – Single Product
   ========================================================= */

:root{
  --eg-teal: #00c2cb;
  --eg-teal-dark: #0aa2a9;
  --eg-deep: #08323a;
  --eg-muted: #4a5b63;
  --eg-blue: #1a99d6;
  --eg-border: #e6edf0;
  --eg-bg: #f6fafb;
  --eg-card: #ffffff;
  --eg-shadow: 0 10px 24px rgba(6,34,44,.10);
}
/* ===== Header “estilo patógenos” SOLO en single product ===== */
.single-product .custom-header{
  position: absolute;
  background: white;          /* header transparente sobre el hero */
}

/* Colores del menú y acciones (encima del hero) */
.single-product .nav-menu li a{ color: #033840; }
.single-product .nav-menu li a:hover{
  background-color: #0e00da !important;
  color: #ffffff !important;
}
.single-product .nav-menu li.current-menu-item a{
  background-color: #033840 !important;
  color: #ffffff !important;
}

/* Iconos login / cart */
.single-product .login-icon a,
.single-product .cart-icon a,
.single-product .nav-menu li a[href*="/contacto"]::before
{
  color: #033840;
}
.single-product .login-icon a:hover,
.single-product .cart-icon a:hover,
.single-product .nav-menu li a[href*="/contacto"]:hover{
  background-color: #0e00da !important;
  color: #ffffff;
}

/* Toggle móvil / flechitas del menú (por si se ven oscuras) */
.single-product .ast-menu-toggle,
.single-product .ast-menu-toggle .ast-icon,
.single-product .dropdown-menu-toggle{
  color: #ffffff;
}
.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0;
}

/* --------- HERO Patogenos --------- */
.single-product .patogenos-hero{
  background-image: url('../images/Patogenos-page/hero-patogenos-optimized.webp');
  background-size: cover;
  background-position: center;
  min-height: 75vh; /* que ocupe toda la pantalla */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: white;
  position: relative;
}
.single-product .patogenos-hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at top left, #44dfdf 10%, transparent 50%),
    radial-gradient(circle at bottom right, #44dfdf 1%, transparent 40%),
    radial-gradient(circle at center, #0e00da 10%, transparent 60%);
  opacity: 0.85; /* ajusta si necesitas más transparencia */
  z-index: 1;
}
.single-product .patogenos-hero .hero-content{   
  margin: 0;
  text-align: center;
  z-index: 2;}
.single-product .patogenos-hero h1{
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}
.single-product .patogenos-hero p{
  font-size: 30px;
  margin-bottom: 5rem;
  margin-top: 0.5rem;
  text-align: center;
}
.single-product .patogenos-hero .product-search {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin-top: 0;
  margin-bottom: 1rem;
}

.single-product .patogenos-hero .product-search input[type="search"] {
  padding: .75rem 1rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
  min-width: 480px;
}
.single-product .patogenos-hero .product-search button {
  padding: .75rem 1rem;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}
/* --------- HERO Paneles --------- */
.single-product .paneles-hero-single {
  background-image: url('../images/paneles.webp'); /* 👈 cámbiala a tu imagen */
  background-size: cover;
  background-position: center;
  min-height: 75vh; /* ocupa toda la pantalla */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: white;
  position: relative;
  
}
.single-product .paneles-hero-single .hero-overlay-paneles {
  position: absolute;
  inset: 0;
background:
radial-gradient(circle at top left, rgba(14, 0, 218, 0.6) 10%, transparent 40%),
radial-gradient(circle at 30% 10%, rgba(68, 223, 223, 0.6) 10%, transparent 40%),
radial-gradient(circle at 60% 10%, rgba(14, 0, 218, 0.6) 15%, transparent 40%),
  radial-gradient(circle at bottom right, rgba(68, 223, 223, 0.6) 10%, transparent 30%), 
  radial-gradient(circle at center, rgba(14, 0, 218, 0.2) 30%, transparent 50%),
radial-gradient(circle at 30% 80%, rgba(14, 0, 218, 0.5) 20%, transparent 30%),
  radial-gradient(circle at top right, rgba(0, 1, 1, 0.8) 15%, transparent 40%),
radial-gradient(circle at 65% 80%, rgba(68, 223, 223, 0.5) 10%, transparent 32%),
  radial-gradient(circle at bottom left, rgba(0, 1, 1, 0.8) 20%, transparent 40%),
rgba(4, 38, 43, 0.6);
  opacity: 0.85; /* ajusta si necesitas más transparencia */
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.single-product .paneles-hero-single .hero-content-paneles {
  margin: 0;
  text-align: center;
  z-index: 2;
  padding: 2rem 5rem;
  color: white;
      max-width: 1200px;
}

.single-product .paneles-hero-single h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  line-height: 1.2;
  color: white;
}
.single-product .paneles-hero-single p {
  font-size: 30px;
  margin-bottom: 5rem;
  margin-top: 0.5rem;
  text-align: center;
}
/* -----------HERO MARCADORES --------*/
.single-product .marcadores-hero {
  background-image: url('../images/Marcadores-page/hero-marcadores-wide-optimized.webp');
  background-size: cover;
  background-position: center;
  min-height: 75vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: white;
}.single-product .marcadores-hero {
  position: relative;
  overflow: hidden;
}

.single-product .marcadores-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(5, 1, 62, 0.35); /* o blanco: rgba(255,255,255,0.3) */
  z-index: 1;
}

.single-product .marcadores-hero .hero-content-marcadores {
  position: relative;
  z-index: 2;
  max-width: 1200px;
    margin: 8rem 0 0 5rem;
    padding: 2rem 5rem;
    color: white;
  text-align: center;
}

.single-product .marcadores-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
    color: white;
}

.single-product .marcadores-hero p {
  font-size: 30px;
  margin-bottom: 5rem;
  margin-top: 0.5rem;
}
/* --------- CONTENEDOR --------- */
.single-product .producto-patogeno-container{
  max-width: 1200px;
  margin: 28px auto 60px;
  padding: 0 20px;
  color: var(--eg-deep);
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------- FILA: IMAGEN + CONTENIDO --------- */
.single-product .producto-hero{
  display: grid;
  grid-template-columns: minmax(260px, 450px) 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 36px;
}
.single-product .producto-imagen img{
  display: block;
  width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: var(--eg-shadow);
}
.single-product .producto-titulo{
  font-size: clamp(24px, 3.4vw, 30px);
  margin: 0 0 8px;
}
.single-product .producto-descripcion{
  margin: 0 0 12px;
  color: var(--eg-muted);
  line-height: 1.55;
}

/* Lista con checks */
.single-product .producto-iconos{
  list-style: none; padding: 0; margin: 0 0 12px;
}
.single-product .producto-iconos li{
  position: relative;
  padding-left: 28px;
  margin: 8px 0;
  line-height: 1.45;
}
.single-product .producto-iconos li::before{
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #0ea57a;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat center / 16px 16px;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat center / 16px 16px;
}
.single-product .producto-precio{
  margin-top: 10px;
  color: var(--eg-blue);
  font-weight: 700;
  font-size: 20px;
}

/* --------- FILA: TABLAS + CARD --------- */
.single-product .producto-tablas{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}
.single-product .tablas-col > *{ margin-bottom: 26px; }

/* Tabla genérica */
.single-product table{
  width: 100%;
  border-collapse: collapse;
  background: var(--eg-card);
  box-shadow: var(--eg-shadow);
  border-radius: 10px;
  overflow: hidden;
}
.single-product .tabla-info h2,
.single-product .tabla-transporte h2{
  font-size: 20px;
  margin: 16px 0 10px;
}
.single-product table th,
.single-product table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--eg-border);
  vertical-align: top;
  font-size: 15px;
}
.single-product table th{
  width: 40%;
  background: #f1f5f8;
  font-weight: 600;
}
.single-product table tr:last-child th,
.single-product table tr:last-child td{ border-bottom: 0; }

/* --------- CARD: FORM --------- */
.single-product .producto-formulario{
  position: sticky; top: 90px;
  background: var(--eg-card);
  box-shadow: var(--eg-shadow);
  border-radius: 14px;
  padding: 18px;
}
.single-product .btn-descarga{
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  background: var(--eg-deep);
  color: #fff; border-radius: 8px;
  text-decoration: none; font-weight: 700;
  margin-bottom: 12px;
}
.single-product .btn-descarga.is-disabled{
  opacity: .5; cursor: not-allowed;
}
.single-product .lead-form{
  color: var(--eg-muted);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.single-product .formulario-cotizacion input,
.single-product .formulario-cotizacion textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--eg-border);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  outline: none;
}
.single-product .formulario-cotizacion input:focus,
.single-product .formulario-cotizacion textarea:focus{
  border-color: var(--eg-teal);
  box-shadow: 0 0 0 3px rgba(0,194,203,.12);
}
.single-product .input-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.single-product .formulario-cotizacion button{
  width: 100%;
  padding: 12px;
  border: 0; border-radius: 8px;
  background: var(--eg-teal);
  color: #fff; font-weight: 700; cursor: pointer;
}
.single-product .formulario-cotizacion button:hover{
  background: var(--eg-teal-dark);
}
/* Contenedor del add-to-cart debajo del precio */
.single-product .producto-contenido .producto-comprar{ margin-top: 8px; }

/* El form que genera Woo */
.single-product .producto-contenido .cart{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}

/* Caja de cantidad */
.single-product .producto-contenido .quantity .qty{
  width: 88px;
  height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--eg-border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.single-product .producto-contenido .quantity .qty:focus{
  border-color: var(--eg-teal);
  box-shadow: 0 0 0 3px rgba(0,194,203,.12);
}

/* Botón añadir a la cesta */
.single-product .producto-contenido .single_add_to_cart_button{
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--eg-teal) !important;
  color: #fff !important;
  font-weight: 700;
  border: 0;
}
.single-product .producto-contenido .single_add_to_cart_button:hover{
  background: var(--eg-teal-dark) !important;
}

/* Variaciones (si el producto es variable) */
.single-product .producto-contenido form.variations_form .variations{
  margin: 10px 0;
}
.single-product .producto-contenido table.variations td{
  padding: 6px 8px 6px 0;
}
.single-product .producto-contenido table.variations select{
  min-width: 220px;
  border: 1px solid var(--eg-border);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
.single-product .producto-contenido table.variations select:focus{
  border-color: var(--eg-teal);
  box-shadow: 0 0 0 3px rgba(0,194,203,.12);
}
.single-product .eg-back-cat { margin: .5rem 0 1rem; }

.single-product .eg-back-cat__btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem; border:1px solid rgba(0,0,0,.12);
  border-radius:999px; text-decoration:none; font-weight:600; font-size:14px;
  color:#033840;                          /* azul oscuro */
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.single-product .eg-back-cat__btn:hover {
  transform:translateX(-2px);
  border-color:rgba(0,0,0,.2);
  background:#033840;
  color:#fff;                             /* texto e ícono se ponen blancos */
}

.single-product .eg-back-cat__icon {
  width:18px; height:18px; display:block;
  fill:currentColor;                      /* el ícono hereda el color del enlace */
}



/* --------- RESPONSIVE --------- */
/* ===========================
   TABLETS (≤ 1024px)
   =========================== */
@media (max-width: 1024px) {
  /* Heroes: algo más compactos */
  .single-product .patogenos-hero,
  .single-product .paneles-hero-single,
  .single-product .marcadores-hero {
    min-height: 60vh;
    padding: 0 24px;
  }
  .single-product .patogenos-hero h1,
  .single-product .paneles-hero-single h1,
  .single-product .marcadores-hero h1 {
    font-size: 2.4rem;
  }
  .single-product .patogenos-hero p,
  .single-product .paneles-hero-single p,
  .single-product .marcadores-hero p {
    font-size: 1.25rem; /* ~20px */
    margin-bottom: 3rem;
  }
  .single-product .paneles-hero-single .hero-content-paneles,
  .single-product .marcadores-hero .hero-content-marcadores {
    padding: 2rem 3rem;
    margin: 4rem auto 0;
  }

  /* Buscador en hero */
  .single-product .patogenos-hero .product-search input[type="search"] {
    min-width: 360px;
  }

  /* Fila imagen + contenido: da más aire en tablet */
  .single-product .producto-hero {
    grid-template-columns: minmax(240px, 420px) 1fr;
    gap: 28px;
  }

  /* Fila tablas + card: pasa a 2 columnas más equilibradas */
  .single-product .producto-tablas {
    grid-template-columns: 1.2fr .8fr;
    gap: 28px;
  }

  /* Form sticky con menos top para headers más altos */
  .single-product .producto-formulario {
    top: 80px;
    padding: 16px;
  }

  /* Tipografías y celdas un poco más compactas */
  .single-product table th,
  .single-product table td {
    padding: 10px 12px;
    font-size: 14.5px;
  }
  .single-product .tabla-info h2,
  .single-product .tabla-transporte h2 {
    font-size: 19px;
  }
}

/* ===========================
   TELÉFONOS (≤ 768px)
   =========================== */
@media (max-width: 768px) {
  /* Header sobre hero — deja respiro arriba */
  .single-product .patogenos-hero,
  .single-product .paneles-hero-single,
  .single-product .marcadores-hero {
    min-height: 52vh;
    padding-top: 5rem; /* si el header se superpone */
    padding-left: 18px;
    padding-right: 18px;
  }
  .single-product .patogenos-hero h1,
  .single-product .paneles-hero-single h1,
  .single-product .marcadores-hero h1 {
    font-size: 2rem;
    margin-bottom: .5rem;
    text-align: center;
  }
  .single-product .patogenos-hero p,
  .single-product .paneles-hero-single p,
  .single-product .marcadores-hero p {
    font-size: 1.05rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  .single-product .paneles-hero-single .hero-content-paneles,
  .single-product .marcadores-hero .hero-content-marcadores {
    margin: 3rem 0 0 0;
    padding: 1.25rem 1rem;
  }

  /* Buscador hero: ancho fluido */
  .single-product .patogenos-hero .product-search {
    width: 100%;
    justify-content: center;
  }
  .single-product .patogenos-hero .product-search input[type="search"] {
    min-width: 0;
    width: 100%;
    max-width: 520px;
  }

  /* Contenedor general: reduce márgenes */
  .single-product .producto-patogeno-container {
    margin: 22px auto 48px;
    padding: 0 16px;
  }

  /* Fila imagen + contenido → 1 columna */
  .single-product .producto-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .single-product .producto-titulo {
    font-size: clamp(22px, 5.5vw, 28px);
  }
  .single-product .producto-descripcion {
    font-size: 1rem;
    line-height: 1.6;
  }
  .single-product .producto-iconos li {
    margin: 6px 0;
    padding-left: 26px;
  }

  /* Precio y comprar: apilar */
  .single-product .producto-contenido .cart {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .single-product .producto-contenido .quantity .qty {
    width: 100%;
    height: 42px;
  }
  .single-product .producto-contenido .single_add_to_cart_button {
    height: 44px;
    width: 100%;
  }

  /* Variaciones: selects full-width */
  .single-product .producto-contenido table.variations select {
    min-width: 0;
    width: 100%;
  }

  /* Input rows del formulario: 2 → 1 columna */
  .single-product .input-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Fila tablas + card → 1 columna; quita sticky en móvil */
  .single-product .producto-tablas {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .single-product .producto-formulario {
    position: static;
    top: auto;
  }

  /* Tablas más legibles en móvil */
  .single-product table th,
  .single-product table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  .single-product table th { width: 44%; }
  .single-product .tabla-info h2,
  .single-product .tabla-transporte h2 {
    font-size: 18px;
    margin: 12px 0 8px;
  }

  /* Botón volver a categoría: toca más cómodo */
  .single-product .eg-back-cat__btn {
    font-size: 13.5px;
    padding: .42rem .75rem;
    gap: .45rem;
  }
  .single-product .eg-back-cat__icon {
    width: 16px;
    height: 16px;
  }
}

/* ===========================
   TELÉFONOS PEQUEÑOS (≤ 480px)
   =========================== */
@media (max-width: 480px) {
  /* Heroes compactos */
  .single-product .patogenos-hero,
  .single-product .paneles-hero-single,
  .single-product .marcadores-hero {
    min-height: 46vh;
    padding-top: 4.5rem;
  }
  .single-product .patogenos-hero h1,
  .single-product .paneles-hero-single h1,
  .single-product .marcadores-hero h1 {
    font-size: 1.7rem;
  }
  .single-product .patogenos-hero p,
  .single-product .paneles-hero-single p,
  .single-product .marcadores-hero p {
    font-size: .98rem;
    margin-bottom: 1.5rem;
  }

  /* Márgenes compactos */
  .single-product .producto-patogeno-container {
    margin: 18px auto 36px;
    padding: 0 14px;
  }

  /* Imagen de producto: radios un poco más grandes queda bonito en chico */
  .single-product .producto-imagen img {
    border-radius: 12px;
  }

  /* Tablas comprimidas */
  .single-product table th,
  .single-product table td {
    padding: 9px 10px;
    font-size: 13.5px;
  }
  .single-product table th { width: 48%; }

  /* Formulario: controles más altos */
  .single-product .formulario-cotizacion input,
  .single-product .formulario-cotizacion textarea {
    padding: 12px;
    font-size: 14px;
  }
  .single-product .formulario-cotizacion button {
    padding: 12px;
    font-size: 15px;
  }

  /* Cantidad y botón */
  .single-product .producto-contenido .quantity .qty {
    height: 44px;
    font-size: 15px;
  }
  .single-product .producto-contenido .single_add_to_cart_button {
    height: 46px;
    font-size: 15px;
  }

  /* Títulos de secciones */
  .single-product .tabla-info h2,
  .single-product .tabla-transporte h2 {
    font-size: 17px;
  }
}