/* ============================================================================
   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; }

/* ---------- 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; }
.mp-shot .media { background: var(--stage); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: .8rem; }
.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;
}