/* ============================================================================
   GesMan OLYMPUS — Estilo de FICHA DE PRODUCTO (Machinery).
   Diseño propio, reutilizable (data-driven en product-template.php). Tema oscuro
   OLYMPUS con acentos oro (#E0B564) y cian (#5BC0BE); los renders se lucen sobre
   "escenarios" claros para que el equipo industrial resalte.
   Este es el estilo estandar de las fichas de aqui en adelante.
   ============================================================================ */
.mp {
  --gold: #E0B564;
  --gold-soft: #F2D08C;
  --cyan: #5BC0BE;
  --ink: #f5f8ff;
  --muted: #9fb0d0;
  --muted-2: #7f8fb0;
  --line: rgba(224, 181, 100, .18);
  --line-2: rgba(150, 170, 210, .16);
  --panel: rgba(17, 24, 45, .66);
  --panel-2: rgba(13, 19, 38, .82);
  --stage: linear-gradient(155deg, #f6f8f4 0%, #e7ece3 62%, #dbe2d6 100%);
  color: var(--ink);
}
.mp * { box-sizing: border-box; }
.mp .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.mp .accent { color: var(--gold); }

/* Volver */
.mp-back {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: color .18s ease;
}
.mp-back:hover { color: var(--gold-soft); }

/* ---------- HERO ---------- */
.mp-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center;
  padding: 1.6rem 0 3rem;
}
.mp-eyebrow {
  display: inline-block; color: var(--cyan); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem;
}
.mp-title {
  font-family: 'Cinzel', serif; font-weight: 700; line-height: 1;
  font-size: clamp(2.8rem, 6vw, 4.6rem); margin: 0 0 1rem;
  background: linear-gradient(180deg, #fff 0%, var(--gold-soft) 55%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mp-lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.65; max-width: 46ch; margin: 0 0 1.6rem; }

.mp-stats { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.7rem; }
.mp-stat {
  flex: 1 1 120px; min-width: 110px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: .85rem 1rem;
}
.mp-stat .v { font-family: 'Cinzel', serif; font-size: 1.55rem; font-weight: 700; color: var(--ink); line-height: 1; }
.mp-stat .v span { font-size: .9rem; color: var(--gold); margin-left: .15rem; }
.mp-stat .l { color: var(--muted-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .35rem; }

.mp-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.mp-btn {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 12px;
  padding: .78rem 1.3rem; font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mp-btn-primary { background: linear-gradient(90deg, var(--gold), #d3a24f); color: #201704; box-shadow: 0 8px 22px rgba(224,181,100,.25); }
.mp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(224,181,100,.38); }
.mp-btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.mp-btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* Escenario de imagen (render sobre panel claro) */
.mp-stage {
  position: relative; border-radius: 22px; background: var(--stage);
  padding: 1rem; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.14);
}
.mp-stage::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(18,68,80,.10), transparent 70%);
}
.mp-stage img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 22px rgba(20,40,30,.22)); }
/* El hero abraza el render recortado (sin forzar proporcion, para que la maquina se vea grande). */
.mp-hero .mp-stage img { width: 100%; height: auto; }
/* Visor 3D en el escenario (partials/viewer-3d.php). El resplandor ::after va encima en el orden
   de pintado: sin pointer-events:none tapaba el 42% inferior del canvas y no se podía arrastrar. */
.mp-stage::after { pointer-events: none; }
.mp-stage .lx-3d--stage { position: relative; z-index: 1; width: 100%; height: clamp(300px, 38vw, 470px); margin: 0; }
.mp-hero .mp-stage .lx-3d-poster { width: 100%; height: 100%; object-fit: contain; }
.mp-stage .lx-3d-badge { background: rgba(255,255,255,.85); }

/* ---------- SECCIONES ---------- */
.mp-section { padding: 3rem 0; border-top: 1px solid var(--line-2); }
.mp-section-head { max-width: 640px; margin: 0 0 1.8rem; }
.mp-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.mp-section-head h2 { font-family: 'Cinzel', serif; font-size: clamp(1.5rem, 3vw, 2rem); margin: .3rem 0 .5rem; color: var(--ink); }
.mp-section-head p { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }

/* Features */
.mp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.mp-feature { background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 1.35rem; transition: border-color .18s ease, transform .18s ease; }
.mp-feature:hover { border-color: var(--line); transform: translateY(-3px); }
.mp-feature .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: .8rem;
  background: rgba(91,192,190,.12); border: 1px solid rgba(91,192,190,.28); color: var(--cyan); }
.mp-feature .ic svg { width: 22px; height: 22px; }
.mp-feature h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink); }
.mp-feature p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* Galería de vistas */
.mp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; }
.mp-shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #0d1226; }
/* overflow:hidden: sin él, el alto propio de la imagen le ganaba al aspect-ratio (mínimo por contenido)
   y las vistas panorámicas no quedaban en banda ancha. */
.mp-shot .media { background: var(--stage); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: .8rem; overflow: hidden; }
.mp-shot .media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(20,40,30,.18)); }
/* Vistas panoramicas (lateral / planta): a todo el ancho, en banda ancha. */
.mp-shot--wide { grid-column: 1 / -1; }
.mp-shot--wide .media { aspect-ratio: 18 / 5; }
@media (max-width: 640px) { .mp-shot--wide .media { aspect-ratio: 12 / 5; } }
.mp-shot .cap { padding: .6rem .85rem; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.mp-shot .cap::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }

/* Ficha técnica */
.mp-specs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.mp-specs { background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.mp-specs .row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line-2); }
.mp-specs .row:last-child { border-bottom: 0; }
.mp-specs .row:nth-child(odd) { background: rgba(255,255,255,.015); }
.mp-specs .k { color: var(--muted); font-size: .9rem; }
.mp-specs .val { color: var(--ink); font-weight: 700; font-size: .92rem; text-align: right; }
.mp-specs-note { margin: 0 0 1rem; color: var(--muted-2); font-size: .85rem; }

/* Tags / aplicaciones */
.mp-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.mp-tag { background: rgba(91,192,190,.08); border: 1px solid rgba(91,192,190,.24); color: #bfeae9;
  border-radius: 999px; padding: .4rem .85rem; font-size: .85rem; }

/* Opciones a medida */
.mp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem 1.3rem; }
.mp-opt { display: flex; align-items: flex-start; gap: .6rem; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.mp-opt svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--gold); margin-top: .12rem; }

/* CTA final */
.mp-cta { text-align: center; border: 1px solid var(--line); border-radius: 22px; padding: 2.6rem 1.5rem;
  background: radial-gradient(120% 140% at 50% 0%, rgba(224,181,100,.10), transparent 60%), var(--panel-2); }
.mp-cta h2 { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .6rem; }
.mp-cta p { color: var(--muted); max-width: 540px; margin: 0 auto 1.5rem; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .mp-hero { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 1rem; }
  .mp-hero .mp-stage { order: -1; }
  .mp-specs-wrap { grid-template-columns: 1fr; }
}

/* Descarga del brochure. Tercera accion del hero, deliberadamente mas discreta que "Solicitar
   cotizacion": es para quien todavia no quiere hablar con un vendedor, no para desviar al que si.
   Fondo tenue en vez de contorno pelado para que no compita con el boton fantasma de la ficha. */
.mp-btn-doc {
  background: rgba(224,181,100,.08);
  border-color: rgba(224,181,100,.32);
  color: var(--gold);
}
.mp-btn-doc:hover {
  background: rgba(224,181,100,.16);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.mp-btn-doc svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Peso y formato: nadie deberia descubrir que pincho 400 KB DESPUES de haberlo hecho. */
.mp-btn-meta {
  font-size: .72rem;
  font-weight: 600;
  opacity: .72;
  letter-spacing: .03em;
  padding-left: .1rem;
}