/*
Theme Name:  MPC V3 Responsivo
Theme URI:   https://manpro.com.mx/
Author:      CubitLab para MPC
Description: Tema clasico de MPC (Mantenimiento Productivo Computarizado). Replica
             exacta del diseno aprobado en "MPC Home standalone.html": sin page
             builder y sin bloques, para poder portar el CSS y el JS tal cual.
             La logica de sitio (CPT producto, taxonomia, 301, WhatsApp) NO vive
             aqui, vive en el plugin `mpc-core`, para sobrevivir a los cambios de tema.
Version:     0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: mpc-v3
Tags:        industrial, one-column, custom-menu, translation-ready
*/

/* =============================================================================
   CSS portado LITERALMENTE del standalone aprobado. No normalizar ni "mejorar"
   valores: ante cualquier diferencia visual, el standalone gana.
   Fuente: Nuevo_estilo_mpc/MPC_home/MPC Home standalone.html  (<style> del <head>)
   ========================================================================== */

* { box-sizing: border-box; }
body { margin:0; background:#F5F5F5; font-family:"Open Sans",system-ui,sans-serif; color:#141414; -webkit-font-smoothing:antialiased; }
a { color:#CD2122; text-decoration:none; }
a:hover { color:#DD3333; }
button { font-family:inherit; }
::selection { background:#CD2122; color:#fff; }
img { max-width:100%; }
/* R7.7 — Los titulares son editables desde /wp-admin, y una palabra más larga
   que su caja (un modelo con guiones, una URL pegada) se salía recortada en
   móvil. `break-word` sólo actúa cuando la palabra NO cabe; a diferencia de
   `anywhere` no cambia el tamaño intrínseco, así que con el contenido del
   diseño no mueve un píxel — comprobado con la huella del HTML y las cajas de
   los titulares antes y después. */
h1, h2, h3 { overflow-wrap:break-word; }
.mont { font-family:Montserrat,sans-serif; }
.wrap { max-width:1240px; margin:0 auto; padding-left:32px; padding-right:32px; }
.site { width:100%; background:#fff; }
.kicker { font-family:Montserrat,sans-serif; font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.btn { display:inline-block; font-family:Montserrat,sans-serif; font-weight:700; font-size:13.5px; letter-spacing:1.4px; text-transform:uppercase; text-align:center; }
.btn-red { background:#CD2122; color:#fff; }
.btn-red:hover { background:#DD3333; color:#fff; }
.btn-ghost { border:2px solid rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover { border-color:#fff; color:#fff; }

/* Topbar */
.topbar { background:#0D0D0D; color:#9A9A9A; font-size:13px; }
.topbar .wrap { height:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.topbar a { color:#9A9A9A; }
.topbar a.tel { color:#E8E8E8; font-weight:600; }

/* Header / nav */
#mpc-header { background:#141414; position:sticky; top:0; z-index:60; transition:box-shadow .25s; }
#mpc-head-row { height:78px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
#mpc-brand { display:flex; align-items:center; gap:14px; color:#fff; }
#mpc-brand img { height:70px; width:auto; display:block; }
.nav-desktop { display:flex; align-items:stretch; gap:2px; height:78px; }
.nav-link { height:78px; padding:0 20px; display:flex; align-items:center; gap:8px; color:#DDD; font-family:Montserrat,sans-serif; font-weight:700; font-size:13.5px; letter-spacing:1.2px; text-transform:uppercase; border-bottom:3px solid transparent; background:transparent; border-top:0; border-left:0; border-right:0; cursor:pointer; }
.nav-link:hover { color:#fff; border-bottom-color:#CD2122; }
/* R8.2/A2: estado activo del menu. La Home no lo traia (es una pagina suelta);
   los 4 standalone interiores lo estrenan con estos mismos valores. */
.nav-link.on { color:#fff; border-bottom-color:#CD2122; }
.nav-cta { align-self:center; margin-left:18px; padding:14px 26px; }
body[data-scrolled="1"] #mpc-header { box-shadow:0 12px 30px rgba(0,0,0,.35); }
body[data-scrolled="1"] #mpc-brand { display:none; }
body[data-scrolled="1"] #mpc-head-row, body[data-scrolled="1"] .nav-desktop, body[data-scrolled="1"] .nav-link { height:52px; }
body[data-scrolled="1"] .nav-cta { padding:8px 22px; }
body[data-scrolled="1"] #mpc-panel { top:52px; }

/* Mega panel */
#mpc-panel { position:absolute; left:0; right:0; top:78px; background:#fff; border-top:3px solid #CD2122; box-shadow:0 26px 50px rgba(0,0,0,.28); display:none; }
#mpc-panel.open { display:block; }
.panel-grid { display:grid; grid-template-columns:288px 1fr 292px; min-height:394px; }
.rail { padding:26px 22px 26px 0; border-right:1px solid #E6E6E6; display:flex; flex-direction:column; gap:2px; }
.rail-tabs { display:flex; flex-direction:column; gap:2px; }
.rail-title { margin:0 0 14px; font-family:Montserrat,sans-serif; font-weight:700; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#6E6E6E; }
.rail-btn { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:13px 14px; border:0; border-left:3px solid transparent; background:transparent; color:#141414; cursor:pointer; text-align:left; font-family:"Open Sans",sans-serif; }
.rail-btn.on { border-left-color:#CD2122; background:#F5F5F5; }
.rail-btn .ric { color:#CD2122; display:flex; }
.rail-btn .rname { font-family:Montserrat,sans-serif; font-weight:700; font-size:14px; line-height:1.25; }
.rail-btn .rkick { font-size:11px; color:#6E6E6E; letter-spacing:.2px; }
.rail-btn .rcount { font-size:11px; color:#9A9A9A; font-family:Montserrat,sans-serif; font-weight:700; }
.panel-items { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:2px 20px; align-content:start; }
.panel-items a { display:flex; align-items:center; gap:9px; padding:7px 8px 7px 0; font-size:13.5px; line-height:1.3; color:#3A3A3A; }
.panel-items a:hover, .panel-items a.on { color:#141414; }
.panel-items .dot { width:5px; height:5px; background:#CD2122; flex:0 0 5px; }
/* 7-sep: unica entrada al catalogo. «Todos los productos» no tiene item propio
   en el menu, asi que el mega-menu cierra la lista de categorias con su enlace.
   Rojo #CD2122, el del resto del sitio; la alineacion (17px = 3px de borde +
   14px de padding) es la misma de los iconos de categoria. */
.rail-all { margin-top:14px; padding:12px 14px; border-left:3px solid transparent; font-weight:700; font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; color:#CD2122; }
.rail-all:hover { color:#DD3333; }
.panel-preview { margin-top:auto; padding-top:20px; border-top:1px solid #EDEDED; display:flex; align-items:center; gap:18px; }
.panel-cta { background:#34495E; color:#fff; padding:30px 28px; display:flex; flex-direction:column; }

/* Hero */
.hero { position:relative; background:#141414; color:#fff; overflow:hidden; }
.hero-shot { position:absolute; top:0; right:0; width:56%; height:calc(100% - 400px); background-size:cover; background-position:center; opacity:0; filter:grayscale(.7) contrast(1.05); transition:opacity 1.6s ease; pointer-events:none; }
.hero-shot.on { opacity:.32; }
.hero h1 { margin:26px 0 0; font-family:Montserrat,sans-serif; font-weight:800; font-size:76px; line-height:.98; letter-spacing:-2.2px; max-width:15ch; text-wrap:balance; }
.hero h1 em { font-style:normal; color:#FF4B4B; }
.hero-sub { margin:24px 0 0; font-size:19px; line-height:1.6; color:#C6C6C6; max-width:44ch; }
/* Carrusel diagonal */
.diag { position:relative; display:flex; gap:3px; width:calc(100% + 60px); margin-left:-30px; }
.diag a { position:relative; display:block; overflow:hidden; height:400px; flex:1 1 0; transform:skewX(-7deg); transition:flex-grow .55s cubic-bezier(.4,0,.2,1); color:#fff; outline-offset:-3px; }
.diag a.on { flex-grow:2.35; }
.diag .tint { position:absolute; inset:0; transform:skewX(7deg) scale(1.35); background-size:cover; background-position:center; filter:grayscale(.55); transition:filter .55s ease; }
.diag a.on .tint { filter:none; }
.diag .pad { position:absolute; left:0; bottom:0; width:100%; padding:0 0 34px; transform:skewX(7deg); display:block; }
.diag .inner { display:block; padding:0 24px; transition:padding .55s cubic-bezier(.4,0,.2,1); }
.diag .more { display:none; }
.diag a.on .more { display:block; }

/* Secciones */
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.vp-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:76px; align-items:start; }
.ghost { position:absolute; font-family:Montserrat,sans-serif; font-weight:800; line-height:1; color:#E9E9E9; text-transform:uppercase; white-space:nowrap; }
.band { background:#CD2122; color:#fff; clip-path:polygon(0 0,46.5% 0,50% 30px,53.5% 0,100% 0,100% 100%,0 100%); }
/* 16-oct, pedido del cliente: el standalone trae 4 diferenciadores en 4
   columnas; se quitó «Reporte automático del instrumento» y la rejilla pasa a
   3 para que no quede un hueco a la derecha. En móvil sigue a 1 columna (abajo). */
.diff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.diff-card { background:#34495E; color:#fff; padding:34px 28px 30px; display:flex; flex-direction:column; min-height:290px; border-top:4px solid #CD2122; }
.diff-card:hover { background:#3D566E; }
.star-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.star-card { background:#1D1D1D; display:flex; flex-direction:column; }
.ind-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ind-card { background:#fff; padding:30px 26px 28px; display:flex; flex-direction:column; min-height:230px; border-bottom:4px solid #E1E1E1; color:#141414; }
.ind-card:hover { border-bottom-color:#CD2122; color:#141414; }
.map-sec { background:#fff; display:grid; grid-template-columns:1.1fr 1fr; }
.loc-btn { padding:12px 16px; border:0; cursor:pointer; font-family:Montserrat,sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; background:#fff; color:#141414; }
.loc-btn.on { background:#CD2122; color:#fff; }
footer a.flink { font-size:13.5px; color:#B8B8B8; }
footer a.flink:hover { color:#fff; }
footer a.fsoc { color:#B8B8B8; display:flex; }
footer a.fsoc:hover { color:#fff; }

/* Menú móvil */
#mpc-burger { display:none; width:44px; height:44px; background:#CD2122; border:0; flex-direction:column; gap:5px; align-items:center; justify-content:center; cursor:pointer; }
#mpc-burger span { width:18px; height:2px; background:#fff; display:block; }
#mpc-mobile { display:none; position:fixed; inset:0; z-index:80; background:#141414; color:#fff; flex-direction:column; }
#mpc-mobile.open { display:flex; }
.mm-head { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid #2A2A2A; flex:0 0 auto; }
.mm-close { width:44px; height:44px; background:transparent; border:1px solid #3A3A3A; color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.mm-close:hover { border-color:#CD2122; color:#CD2122; }
.mm-body { flex:1; overflow:auto; }
.mm-acc-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:17px 16px; background:transparent; border:0; color:#fff; cursor:pointer; font-family:"Open Sans",sans-serif; }
.mm-acc-btn.on { background:#1A1A1A; }
.mm-acc-btn .sign { color:#CD2122; font-size:18px; line-height:1; }
.mm-sub { background:#0F0F0F; padding:6px 16px 18px 52px; display:none; flex-direction:column; }
.mm-sub.open { display:flex; }
.mm-sub a { padding:11px 0; font-size:14px; color:#C4C4C4; border-bottom:1px solid #1C1C1C; }
.mm-sub a:hover { color:#fff; }
/* El mismo acceso al catalogo en movil, debajo del acordeon. Aqui el rojo es
   #FF6B6B —el que ya usan «Ver todos ›» y el hover de .mm-link en este overlay—
   porque #CD2122 sobre #141414 se lee mal. */
.mm-all { display:block; padding:18px 16px; border-bottom:1px solid #262626; font-weight:700; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:#FF6B6B; }
.mm-all:hover { color:#fff; }
.mm-link { display:block; padding:18px 16px; border-bottom:1px solid #262626; font-family:Montserrat,sans-serif; font-weight:700; font-size:14px; color:#fff; }
.mm-link:hover { color:#FF6B6B; }
.mobile-cats { display:none; }

/* ══ Responsive (según frames móviles aprobados) ══ */
/* 18-oct: con «Blog» el menú tiene 5 entradas y por debajo de ~1064px ya no cabe
   junto a la leyenda del logo: a 901px la leyenda se encimaba con «Productos». En
   ese rango la leyenda y su separador se ocultan; de 1101px en adelante el
   header queda igual que en el diseño, y el móvil (≤900px) sigue su propia regla.
   El !important es por el separador, que trae `display:block` en línea. */
@media (min-width: 901px) and (max-width: 1100px) {
  #mpc-brand .sep, #mpc-brand .tag { display:none !important; }
}
@media (max-width: 900px) {
  .wrap { padding-left:20px; padding-right:20px; }
  .nav-desktop { display:none; }
  #mpc-burger { display:flex; }
  #mpc-head-row { height:62px; gap:16px; }
  #mpc-brand img { height:34px; }
  #mpc-brand .sep, #mpc-brand .tag { display:none; }
  /* 18-oct, del standalone del blog («frames aprobados del blog»), para TODO el
     sitio a pedido del diseñador: al compactar el header en móvil el logo se
     queda (a 28px) y la hamburguesa baja a 40px. Sin esto el logo desaparecía
     y la hamburguesa saltaba a la izquierda. */
  body[data-scrolled="1"] #mpc-brand { display:flex; }
  body[data-scrolled="1"] #mpc-brand img { height:28px; }
  body[data-scrolled="1"] #mpc-burger { width:40px; height:40px; }
  .topbar .wrap { font-size:11px; }
  .topbar .mail { display:none; }
  .hero h1 { font-size:36px; letter-spacing:-1.2px; }
  .hero-sub { font-size:14.5px; }
  .hero-ctas { flex-direction:column; margin-bottom:34px !important; }
  .hero-ctas .btn { padding:16px !important; }
  .hero-shot { width:100%; height:100%; opacity:0; }
  .hero-shot.on { opacity:.14; }
  .diag { display:none; }
  .mobile-cats { display:grid; grid-template-columns:1fr 1fr; gap:2px; padding-bottom:34px; }
  .mobile-cats a { background:#1D1D1D; padding:16px 14px 18px; color:#fff; display:flex; flex-direction:column; gap:9px; }
  .mobile-cats a:hover { background:#CD2122; color:#fff; }
  .mobile-cats .cic { color:#CD2122; display:flex; }
  .trust-grid { grid-template-columns:1fr; gap:22px; }
  .trust-grid > div { padding:0 !important; border-left:0 !important; }
  .vp-grid { grid-template-columns:1fr; gap:34px; }
  .ghost { display:none; }
  .band { clip-path:polygon(0 0,44% 0,50% 22px,56% 0,100% 0,100% 100%,0 100%); }
  .diff-grid, .star-grid, .ind-grid { grid-template-columns:1fr; }
  .diff-card { min-height:0; }
  .map-sec { grid-template-columns:1fr; }
  .map-sec .map-box { min-height:320px !important; }
  .map-sec .visit { padding:44px 24px !important; }
  footer .foot-grid { grid-template-columns:1fr !important; gap:30px !important; }
  h1, h2 { letter-spacing:-.8px; }
  section h2 { font-size:28px !important; }
}


/* =============================================================================
   Reglas que en el standalone viven en <style> sueltos dentro del <body>.
   Se consolidan aqui sin tocar valores: son globales y el CSS de un tema
   de WordPress no puede quedar disperso en las plantillas.
   ========================================================================== */

/* --- clientes de la franja de confianza --- */
.cl{font-weight:700;font-size:15px;letter-spacing:.6px;color:#6E6E6E;}

/* --- puntos numerados de la propuesta de valor --- */
.vp{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid #E1E1E1;}
.vpn{font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;color:#CD2122;padding-top:3px;width:26px;flex:0 0 26px;}
.vpt{display:flex;flex-direction:column;gap:6px;}
.vpt b{font-family:Montserrat,sans-serif;font-weight:700;font-size:16.5px;}
.vpt i{font-style:normal;font-size:14.5px;line-height:1.6;color:#5B5B5B;}

/* --- bullets y enlace de las lineas estrella --- */
.star-ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.star-ul li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#D2D2D2;line-height:1.5;}
.star-ul li::before{content:"";width:5px;height:5px;background:#CD2122;margin-top:7px;flex:0 0 5px;}
.star-more{margin-top:auto;padding-top:26px;font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#fff;}
.star-more:hover{color:#FF6B6B;}
/* tarjeta con dos enlaces (23-oct): el contenedor ocupa el sitio de .star-more y quedan a su altura */
.star-links{margin-top:auto;padding-top:26px;display:flex;flex-wrap:wrap;gap:12px 28px;}
.star-links .star-more{margin-top:0;padding-top:0;}

/* --- columnas del footer --- */
.fcol{display:flex;flex-direction:column;gap:11px;}
.ft{font-family:Montserrat,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;margin-bottom:5px;}

/* --- banda roja: hover de los CTA ---
   En el standalone estos dos estados van como onmouseover/onmouseout en linea.
   Se trasladan a CSS sin cambiar un solo valor; el !important es necesario
   porque el color base sigue viniendo de un style="" en linea, igual que alli. */
.band-cta-solid:hover { background:#141414 !important; color:#fff !important; }
.band-cta-ghost:hover { border-color:#fff !important; background:rgba(0,0,0,.12) !important; }