/* ═══════════════════════════════════════════
   PRODUCT PAGE — estilos específicos
═══════════════════════════════════════════ */

/* ── Hero del producto ─────────────────── */
.pp-hero{
  padding:8rem 0 5rem;
  background:
    radial-gradient(80% 60% at 70% 30%, rgba(106,191,46,.06), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--gray50) 100%);
  border-bottom:1px solid var(--gray200);
  position:relative;overflow:hidden;
}
.pp-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,37,64,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(70% 70% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%, #000, transparent 80%);
  pointer-events:none;
}
.pp-hero .container{position:relative;z-index:1;}
.pp-hero-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center;
}
@media(max-width:880px){
  .pp-hero{padding:6rem 0 3rem;}
  .pp-hero-grid{grid-template-columns:1fr;gap:2.5rem;}
}

.pp-crumb{
  display:flex;align-items:center;gap:.4rem;
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:var(--gray400);margin-bottom:1.4rem;
}
.pp-crumb a{color:var(--gray600);transition:color .2s;}
.pp-crumb a:hover{color:var(--green2);}
.pp-crumb .sep{color:var(--gray200);}
.pp-crumb .current{color:var(--navy);}

.pp-cat-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--gray100);color:var(--navy);
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;margin-bottom:1.2rem;
}
.pp-cat-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

.pp-title{
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  font-weight:800;color:var(--navy);
  line-height:1.05;letter-spacing:-.02em;
  margin-bottom:1.2rem;
}
.pp-title em{font-style:normal;color:var(--green);}
.pp-lead{
  font-size:1.05rem;color:var(--gray600);line-height:1.6;
  max-width:540px;margin-bottom:1.8rem;
}

.pp-hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem;}

.pp-quickfacts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  padding-top:1.8rem;border-top:1px solid var(--gray200);
}
.pp-quickfact{display:flex;flex-direction:column;gap:.2rem;}
.pp-quickfact .lbl{font-size:.65rem;font-weight:700;color:var(--gray400);letter-spacing:.12em;text-transform:uppercase;}
.pp-quickfact .val{font-size:1rem;font-weight:700;color:var(--navy);}

/* ── Imagen del producto en hero ─────── */
.pp-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;}
.pp-hero-image{
  position:relative;
  width:100%;max-width:580px;aspect-ratio:4/3;
  background:#fff !important;
  border-radius:32px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 70px -20px rgba(10,37,64,.25), 0 8px 24px rgba(106,191,46,.12);
  overflow:hidden;
}
.pp-hero-image::before{
  content:'';position:absolute;top:10%;left:10%;width:35%;height:35%;
  background:radial-gradient(circle, rgba(255,255,255,.7), transparent 60%);
  border-radius:50%;
}
.pp-hero-image img{
  width:95%;height:95%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;
  filter:none;
  animation:capFloat 6s ease-in-out infinite;
  position:relative;z-index:1;
}
/* Variante para fotografía real (servicios de Maquila): la foto cubre el
   100% del recuadro sin dejar espacio en blanco alrededor — a diferencia de
   los renders de cápsula (PNG transparente), que usan contain con margen. */
.pp-hero-image.photo-fill img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* La imagen se escala ligeramente (scale) para que el giro/flotación nunca
   deje huecos en las esquinas: siempre llena su recuadro y queda recortada
   limpiamente por overflow:hidden + border-radius del contenedor. */
@keyframes capFloat{
  0%,100%{transform:translateY(4px) rotate(-2deg) scale(1.08);}
  50%{transform:translateY(-6px) rotate(-1deg) scale(1.08);}
}
.pp-hero-badge{
  position:absolute;top:1.2rem;right:1.2rem;
  background:#fff;color:var(--navy);
  padding:8px 14px;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:.4rem;z-index:2;
}
.pp-hero-badge svg{width:14px;height:14px;color:var(--green);}

/* ── Sección "¿Qué es?" ─────────────── */
.pp-section{padding:5rem 0;}
.pp-section.alt{background:var(--gray50);}
.pp-section-head{
  text-align:center;max-width:680px;margin:0 auto 3rem;
}
.pp-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green2);
  background:#e8f5e0;padding:5px 14px;border-radius:100px;margin-bottom:1rem;
}
.pp-h2{
  font-size:clamp(1.6rem, 3vw, 2.2rem);font-weight:800;
  color:var(--navy);line-height:1.15;letter-spacing:-.01em;
  margin-bottom:1rem;
}
.pp-h2 em{font-style:normal;color:var(--green);}
.pp-section-sub{font-size:1rem;color:var(--gray600);line-height:1.6;}

/* ── About product (intro larga) ─────── */
.pp-about{
  display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:start;
  max-width:1100px;margin:0 auto;
}
@media(max-width:880px){.pp-about{grid-template-columns:1fr;}}
.pp-about-text h3{
  font-size:1.5rem;font-weight:800;color:var(--navy);
  margin-bottom:1rem;letter-spacing:-.01em;
}
.pp-about-text p{
  font-size:.95rem;color:var(--gray600);
  line-height:1.7;margin-bottom:1rem;
}
.pp-about-text p strong{color:var(--navy);font-weight:600;}
.pp-about-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
}
.pp-stat-card{
  background:#fff;border:1px solid var(--gray200);
  border-radius:var(--radius-lg);padding:1.4rem 1.2rem;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.pp-stat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--green);
}
.pp-stat-num{
  font-size:2rem;font-weight:800;color:var(--navy);
  letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.pp-stat-num small{font-size:.85rem;font-weight:600;color:var(--gray600);margin-left:2px;}
.pp-stat-lbl{
  font-size:.78rem;color:var(--gray600);
  margin-top:.4rem;line-height:1.4;
}

/* ── Features grid (ventajas) ────────── */
.pp-features{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.2rem;max-width:1100px;margin:0 auto;
}
.pp-feature{
  background:#fff;border:1px solid var(--gray200);
  border-radius:var(--radius-lg);padding:1.6rem 1.4rem;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.pp-feature:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--green);
}
.pp-feature-icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg, #e8f5e0, #d4edc0);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;transition:transform .35s;
}
.pp-feature:hover .pp-feature-icon{transform:rotate(-8deg) scale(1.05);}
.pp-feature-icon svg{width:22px;height:22px;color:var(--green2);}
.pp-feature h3{
  font-size:1rem;font-weight:700;color:var(--navy);
  margin-bottom:.4rem;
}
.pp-feature p{
  font-size:.82rem;color:var(--gray600);
  line-height:1.55;
}

/* ── Applications cards ────────────────── */
.pp-apps{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;max-width:1100px;margin:0 auto;
}
.pp-app{
  background:#fff;border:1px solid var(--gray200);
  border-radius:var(--radius-lg);padding:1.4rem 1.2rem;
  display:flex;flex-direction:column;gap:.5rem;
  position:relative;overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.pp-app::after{
  content:'';position:absolute;top:0;right:0;width:60px;height:60px;
  background:radial-gradient(circle at top right, rgba(106,191,46,.1), transparent 70%);
  pointer-events:none;
}
.pp-app:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--green);
}
.pp-app-num{
  font-size:.65rem;font-weight:700;letter-spacing:.15em;
  color:var(--gray400);font-variant-numeric:tabular-nums;
}
.pp-app h4{
  font-size:.95rem;font-weight:700;color:var(--navy);
}
.pp-app p{font-size:.78rem;color:var(--gray600);line-height:1.5;}

/* ── Specs table ───────────────────────── */
.pp-specs-wrap{
  max-width:900px;margin:0 auto;
  background:#fff;border:1px solid var(--gray200);
  border-radius:var(--radius-lg);overflow:hidden;
}
/* ── Nota "Presentación por caja" ──────── */
.pp-box-note{
  max-width:900px;margin:1.5rem auto 0;
  background:#fff;border:2px solid var(--green);
  border-radius:var(--radius-lg);
  padding:1.9rem 2.1rem;
}
.pp-box-note h3{
  font-size:1.7rem;font-weight:800;color:var(--navy);
  line-height:1.08;letter-spacing:-.01em;margin-bottom:.7rem;
}
.pp-box-note p{
  font-size:1.02rem;color:var(--gray600);line-height:1.55;max-width:52ch;
}
.pp-specs-table{width:100%;border-collapse:collapse;}
.pp-specs-table tr{transition:background .15s;}
.pp-specs-table tr:not(:last-child){border-bottom:1px solid var(--gray100);}
.pp-specs-table tr:hover{background:var(--gray50);}
.pp-specs-table td{padding:1rem 1.5rem;vertical-align:top;}
.pp-specs-table td:last-child{text-wrap:pretty;}
.pp-specs-table td:first-child{
  font-size:.78rem;font-weight:600;
  color:var(--gray600);letter-spacing:.04em;
  width:38%;
}
.pp-specs-table td:last-child{
  font-size:.92rem;color:var(--navy);font-weight:600;
}
.pp-specs-table td .meta{
  display:block;font-size:.74rem;font-weight:400;
  color:var(--gray400);margin-top:2px;
}

/* ── Sizes — grid of capsule sizes ──── */
.pp-sizes{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;
  margin-top:2rem;
}
.pp-size-pill{
  background:#fff;border:1.5px solid var(--gray200);
  border-radius:12px;padding:.9rem 1.1rem;
  text-align:center;min-width:78px;
  transition:all .2s;cursor:default;
}
.pp-size-pill:hover{
  border-color:var(--green);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(106,191,46,.18);
}
.pp-size-pill-num{
  font-size:1.4rem;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1;
}
.pp-size-pill-vol{
  display:block;font-size:.62rem;font-weight:600;
  color:var(--gray400);margin-top:.3rem;
  font-variant-numeric:tabular-nums;
}

/* ── Colores swatches ──────────────── */
.pp-colors-wrap{
  max-width:900px;margin:0 auto;
  background:#fff;border:1px solid var(--gray200);
  border-radius:var(--radius-lg);padding:2rem;
}
.pp-colors-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
  gap:.8rem;
}
.pp-color{
  aspect-ratio:1/1;border-radius:14px;
  border:2px solid rgba(0,0,0,.06);
  position:relative;cursor:default;
  transition:transform .25s, box-shadow .25s;
}
.pp-color:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  z-index:1;
}
.pp-color::after{
  content:attr(data-name);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--navy);color:#fff;
  padding:4px 10px;border-radius:6px;
  font-size:.65rem;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
  z-index:10;
}
.pp-color:hover::after{opacity:1;}
.pp-colors-more{
  background:linear-gradient(135deg, var(--gray100), var(--gray200));
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;color:var(--gray600);
}

/* ── Compliance row ──────────────── */
.pp-compliance{
  display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;
  max-width:900px;margin:2.5rem auto 0;
}
.pp-comp-pill{
  display:flex;align-items:center;gap:.6rem;
  background:#fff;border:1px solid var(--gray200);
  padding:.7rem 1.2rem;border-radius:100px;
  font-size:.85rem;font-weight:600;color:var(--navy);
  transition:all .2s;
}
.pp-comp-pill:hover{
  border-color:var(--green);
  box-shadow:0 4px 12px rgba(106,191,46,.15);
  transform:translateY(-2px);
}
.pp-comp-pill svg{width:18px;height:18px;color:var(--green);}

/* ── CTA grande ─────────────────────── */
.pp-cta{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  color:#fff;padding:4rem 3rem;border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;
  max-width:1100px;margin:0 auto;
}
.pp-cta::before{
  content:'';position:absolute;top:-50%;right:-10%;width:60%;height:200%;
  background:radial-gradient(ellipse, rgba(106,191,46,.18), transparent 60%);
  pointer-events:none;
}
@media(max-width:780px){
  .pp-cta{grid-template-columns:1fr;padding:2.5rem 1.5rem;text-align:center;}
}
.pp-cta-text{position:relative;z-index:1;}
.pp-cta h2{
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);font-weight:800;
  letter-spacing:-.01em;line-height:1.15;margin-bottom:.8rem;
}
.pp-cta h2 em{font-style:normal;color:var(--green);}
.pp-cta p{
  font-size:.95rem;line-height:1.6;
  color:rgba(255,255,255,.78);max-width:480px;
}
@media(max-width:780px){.pp-cta p{margin:0 auto;}}
.pp-cta-actions{
  display:flex;flex-direction:column;gap:.6rem;
  position:relative;z-index:1;
}
.pp-cta .btn{justify-content:center;}
.pp-cta-fineprint{
  font-size:.72rem;color:rgba(255,255,255,.5);
  margin-top:.4rem;text-align:center;
}

/* ── Related products ─────────────── */
.pp-related{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.2rem;max-width:1100px;margin:0 auto;
}
.pp-related-card{
  background:#fff;border:1px solid var(--gray200);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  color:inherit;
}
.pp-related-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--green);
}
.pp-related-img{
  height:140px;display:flex;align-items:center;justify-content:center;
  padding:0;overflow:hidden;background:#fff;
}
.pp-related-img img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center;
  filter:none;
  transition:transform .35s;
}
.pp-related-card:hover .pp-related-img img{transform:scale(1.06);}

/* ── Packshots de producto (cápsulas Y maquinaria) ──────────────
   A diferencia de las fotos de escena (maquila: fotografía real de
   planta, a sangre completa), tanto las cápsulas (cap-*) como los
   equipos de maquinaria (maq-*) son fotografía de producto aislada
   sobre fondo blanco — recortarlas con "cover" corta el producto o,
   peor, deja ver solo el margen blanco vacío (se ve como si la
   imagen no hubiera cargado). Se muestran completas ("contain"),
   con más aire vertical y el fondo de marca tintado (definido inline
   por tarjeta) para que no luzcan flotando sobre blanco puro. Se
   detectan por el nombre de archivo, sin tocar el HTML de cada
   página. */
.pp-related-img:has(img[src*="/cap-"]){
  height:184px;padding:1.1rem;
  /* el tinte de color viene del style inline de cada tarjeta (da contraste,
     clave para packshots de producto que se pierden sobre blanco puro) */
}
.pp-related-img img[src*="/cap-"]{
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
}
.pp-related-card:hover .pp-related-img img[src*="/cap-"]{transform:scale(1.04);}
.pp-related-body{padding:1rem 1.2rem;}

.pp-related-name{font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:.2rem;}
.pp-related-tag{
  font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green2);
}
.pp-related-arrow{
  margin-top:.6rem;display:flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:600;color:var(--green);
  transition:gap .2s;
}
.pp-related-card:hover .pp-related-arrow{gap:.6rem;}
.pp-related-arrow svg{width:12px;height:12px;}

/* Scroll reveal */
.pp-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.pp-reveal.visible{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .pp-hero-image img{animation:none!important;}
}