/* ============================================================
   Estilos específicos de la ficha de producto (producto-detalle)
   ============================================================ */

/* Forzar diseño header tipo scrolled siempre en las internas */
#site-header header {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}
#site-header .nav-link { color: var(--text) !important; text-shadow: none !important; }
#site-header .nav-link:hover { color: var(--blue) !important; }
#site-header .nav-logo-img { filter: none !important; }
/* El header se fuerza blanco pero sin la clase .scrolled, así que el cambio de
   logo no se dispara solo: hay que forzar la versión a color. Sin esto queda
   el logo claro sobre fondo blanco, es decir invisible. */
#site-header .nav-logo-img--light { display: none !important; }
#site-header .nav-logo-img--dark  { display: block !important; }
#site-header .hamburger span { background: var(--text) !important; }

/* Upper wrapper with exact products background */
.upper-content-bg {
  background-color: #ffffff;
  background-image: url('/assets/img/fondos/nosotros.png');
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Hero Clean Style */
.product-detail-hero {
  background: transparent;
  padding: 5.5rem 0 1.5rem;
}

.breadcrumbs {
  margin-bottom: 1.25rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
}
.breadcrumbs a { color: var(--accent); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs a:hover { color: var(--blue-dark); }

/* ══════════════════════════════════════════
   GALERÍA — deslizador
   Antes era una foto fija de 330px con una grilla de miniaturas debajo. Con
   fichas de 7 y hasta 10 fotos esa grilla ocupaba dos o tres filas de 80px,
   así que la foto —lo único que el visitante mira— quedaba más chica que el
   índice de fotos. Ahora las fotos se deslizan en horizontal dentro del mismo
   marco (flechas, puntos o gesto) y abajo sólo van los puntos, que ocupan
   ~10px en vez de ~290px. Ese espacio se lo queda la imagen.
   ══════════════════════════════════════════ */
.gallery-container {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.main-image {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  border: 1px solid rgba(79, 175, 79, 0.1);
  height: 470px;
  /* El relleno va en cada lámina, no acá: si lo lleva la tarjeta, al deslizar
     la foto se ve pasar por encima de ese margen antes de que la recorte. */
  padding: 0;
  overflow: hidden;
}
/* Pista: todas las fotos en fila; se desplaza en múltiplos de 100%. */
.pd-track {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.pd-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem;
  box-sizing: border-box;
}
.pd-slide img,
.pd-slide .pd-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}
/* El giro 360° es un WebP animado con fondo transparente. Se le quita la
   sombra: recalcularla en cada uno de sus 181 fotogramas cuesta caro y no
   aporta, porque la animación ya tiene su propio volumen. */
.pd-slide img.pd-giro { filter: none; }
.pd-slide .pd-video { width: 100%; height: 100%; }


/* ── Modelo 3D ──────────────────────────────────────────────
   El botón vive sobre la lámina del giro 360°: el visitante ve la animación
   de inmediato y decide si quiere el 3D, que es lo pesado. */
.pd-3d-btn {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 30px;
  background: rgba(11, 31, 58, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pd-3d-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 20px rgba(79,175,79,.35); }
.pd-3d-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pd-3d-btn[disabled] { opacity: .75; cursor: default; }
.pd-3d-btn svg { width: 16px; height: 16px; }

.pd-modelo {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
  /* El visor ya trae su propio cursor de arrastre. */
}

/* Con el 3D montado la tarjeta crece y la lámina suelta su relleno: el modelo
   aprovecha todo el marco, que es lo que se pide de una vista manipulable.
   Las fotos siguen con su alto de siempre — sólo cambia cuando hay 3D. */
.main-image.pd-con-3d { height: min(660px, 74vh); }
.main-image.pd-con-3d .pd-slide { padding: .5rem; }
.pd-modelo { width: 100%; height: 100%; min-height: 320px; }
@media (max-width: 860px) {
  .main-image.pd-con-3d { height: min(520px, 68vh); }
}


/* Flechas. Se ocultan cuando hay una sola foto (lo hace el marcado) y se
   apagan al llegar a los extremos, para que se note que la lista terminó. */
.pd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border, #e2e8f0);
  background: rgba(255,255,255,.92);
  color: var(--blue-dark, #0b1f3a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  transition: background .25s ease, color .25s ease, opacity .25s ease;
  z-index: 2;
}
.pd-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pd-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-arrow[disabled] { opacity: .3; cursor: default; }
.pd-arrow[disabled]:hover { background: rgba(255,255,255,.92); color: var(--blue-dark, #0b1f3a); border-color: var(--border, #e2e8f0); }
.pd-arrow svg { width: 18px; height: 18px; }
.pd-prev { left: .7rem; }
.pd-next { right: .7rem; }

/* Contador discreto, para saber cuántas fotos hay sin contar los puntos. */
.pd-count {
  position: absolute;
  right: .9rem;
  bottom: .8rem;
  background: rgba(11,31,58,.72);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .15rem .55rem;
  border-radius: 20px;
  z-index: 2;
}

/* Puntos: el activo se alarga en vez de sólo cambiar de color, que es más
   legible de un vistazo cuando hay diez. */
.pd-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}
.pd-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.pd-dot:hover { background: #94a3b8; }
.pd-dot.active { background: var(--accent); width: 26px; }
.pd-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Info Principal Limpia */
.product-info-badge { display: inline-block; padding: 0.5rem 1.2rem; border-radius: 30px; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; background: var(--accent); color: #fff; margin-bottom: 1.5rem; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(79, 175, 79, 0.3); }
.product-info-title { font-family: 'Barlow Condensed', sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 0.75rem; line-height: 1.1; text-transform: uppercase; }

.divider { width: 60px; height: 4px; background: var(--accent); border-radius: 2px; margin-bottom: 1.1rem; }

.product-info-desc { font-size: 1rem; color: #475569; line-height: 1.7; margin-bottom: 1.75rem; }

/* ══════════════════════════════════════════
   ESPECIFICACIONES — grilla de celdas
   Antes era una lista de filas con separadores punteados y una barra verde al
   costado: el dato y su etiqueta competían en la misma línea, alineados a
   extremos opuestos, y con valores largos ("Telescópico tipo H 7m") la fila se
   descuadraba. Ahora cada dato es una celda: etiqueta arriba en versalitas,
   valor abajo grande. Se lee como la tabla de una ficha técnica y no como una
   lista suelta.
   Las líneas de la grilla son el gap de 1px dejando ver el fondo del
   contenedor: así no hay que apagar bordes por columna ni por fila.
   ══════════════════════════════════════════ */
.specs-block { margin-top: .25rem; }
.specs-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #64748b;
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
/* Filete que continúa el título hasta el borde: cierra el bloque sin encerrarlo. */
.specs-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--accent), rgba(203,213,225,0));
}
.specs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
}
.spec-row {
  background: #fff;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: background .25s ease;
}
.spec-row:hover { background: #f8fafc; }
/* Si algún producto queda con un número impar de datos, el último ocupa la
   fila entera en vez de dejar media celda vacía. */
.spec-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.spec-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.spec-label i { color: var(--accent); font-size: .88rem; width: 15px; text-align: center; }
.spec-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue-dark);
  line-height: 1.1;
  margin: 0;
}

/* Tabs */
.detail-tabs-section { padding: 2.75rem 0; background: transparent; }
.tabs-nav { display: flex; border-bottom: 2px solid #e2e8f0; margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn { background: none; border: none; padding: 0.9rem 1.5rem; font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s; position: relative; white-space: nowrap; }
.tab-btn.active { color: var(--accent); }
.tab-btn.active::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 4px; background: var(--accent); border-radius: 4px 4px 0 0; }
.tab-btn:hover:not(.active) { color: var(--blue-dark); }
.tab-content { display: none; animation: fadeIn 0.4s ease forwards; }
.tab-content.active { display: block; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }

/* Animated pulse target */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Forcing 1fr 1fr to wrap on mobile */
@media (max-width: 992px) {
  .hero-grid-2 { grid-template-columns: 1fr !important; }
}

/* MODAL ELEGANTE */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 29, 76, 0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999; opacity: 0; visibility: hidden;
  transition: all 0.3s ease;
}
.modal-overlay.active {
  opacity: 1; visibility: visible;
}
.modal-content {
  background: #fff; border-radius: 16px; padding: 2.5rem;
  width: 90%; max-width: 500px; position: relative;
  transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
}
.modal-close {
  position: absolute; top: 15px; right: 20px;
  font-size: 2rem; color: var(--muted);
  cursor: pointer; transition: color 0.3s ease;
  background: transparent; border: none; padding: 0;
}
.modal-close:hover { color: var(--accent); }
.modal-content .form-group { margin-bottom: 1.2rem; }
.modal-content label { display: block; margin-bottom: 0.5rem; font-family: 'Barlow', sans-serif; font-weight: 600; color: var(--blue-dark); font-size: 0.9rem; }
.modal-content input, .modal-content textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: 8px; border: 1px solid #e2e8f0; font-family: 'Barlow', sans-serif; font-size: 1rem; outline: none; transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box; background: #f8fafc;
}
.modal-content input:focus, .modal-content textarea:focus {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 175, 79, 0.1);
}

/* ══════════════════════════════════════════
   MÓVIL
   La ficha se maquetó con estilos inline (flex row + flex: 0 0 45%), sin
   ninguna regla responsive: en un teléfono la galería quedaba en ~170px y la
   información aplastada al lado. Estas reglas la apilan y reordenan.
   Llevan !important porque compiten contra esos estilos inline.
   ══════════════════════════════════════════ */
@media (max-width: 860px) {
  .pd-layout {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .pd-layout > .gallery-container { flex: 1 1 auto !important; width: 100%; }
  .pd-layout > .product-info-wrapper { width: 100%; }

  .product-detail-hero { padding: 5rem 0 1rem; }
  .breadcrumbs { margin-bottom: 1rem; }

  /* En el teléfono la galería ya no compite con la información al lado, así
     que puede quedarse con bastante alto: es la foto del producto. */
  .main-image { height: 360px; border-radius: 10px; }
  .pd-slide { padding: 1rem; }
  .pd-arrow { width: 36px; height: 36px; }
  .pd-prev { left: .4rem; }
  .pd-next { right: .4rem; }

  .product-info-title { font-size: 1.75rem; }
  .product-info-desc { font-size: .95rem; margin-bottom: 1.25rem; }
  /* La grilla de celdas se mantiene en dos columnas: con valores cortos
     ("Litio", "7m") una sola columna deja la ficha innecesariamente larga. */
  .spec-row { padding: .8rem .9rem; }
  .spec-value { font-size: 1.2rem; }

  .detail-tabs-section { padding: 2rem 0; }

  /* Las pestañas no caben en una línea: se deslizan en horizontal en vez de
     romper el diseño. -webkit-overflow-scrolling da inercia en iOS. */
  .tabs-nav {
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { padding: .75rem 1rem; font-size: 1rem; }

  /* El candado de la ficha técnica: en pantalla chica el padding de 3rem lo
     hacía más alto que el propio contenido que tapa. */
  .tab-content > div[id^="specs-lock"],
  .tab-content > div[style*="translate(-50%, -50%)"] {
    padding: 1.75rem 1.25rem !important;
    border-radius: 16px !important;
    width: 94% !important;
  }

  .modal-content { padding: 1.5rem 1.25rem; width: 94%; }
  .modal-content .form-group[style*="grid"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
  .main-image { height: 300px; }
  .pd-dot { width: 8px; height: 8px; }
  .pd-dot.active { width: 20px; }
  .product-info-title { font-size: 1.5rem; }
}