/* ── BITÁCORA ──
   [v2026.11.03-1] planes_comerciales.css
   2026-11-03 | LA BARRA ÚNICA (preview aprobado por Alberto el 03-11): sale el ajuste del celular que escondía «Buscar
     servicios»; ahora el celular de la barra lo resuelve hv-nav.css (queda la lupa).
   [v2026.10.07-1] planes_comerciales.css
   2026-10-07 | El fondo pasa a ser la imagen de planes_heavensy_v6 (manosuperior1.jpg, como en
     planes.css: centrada, cubriendo, fija y desde debajo de la barra de 54 px), pedido de Alberto.
     Salen el azul #334182 con sus dos luces del prototipo; ese azul queda solo mientras carga.
   [v2026.10.06-2] planes_comerciales.css
   2026-10-06 (2) | + .pcp-vista: el selector de vista debajo del título (preview v4), pastillas
     translúcidas sobre el azul y la elegida en blanco. Las tarjetas ya no se cortan al subir:
     la rejilla deja aire arriba.
   [v2026.10.06-1] planes_comerciales.css — archivo nuevo
   2026-10-06 | La página pública de planes nueva (pages/planes_comerciales.html), como el preview
     v3 aprobado por Alberto el 06-10: fondo azul #334182 del prototipo con dos luces suaves,
     el título de siempre y las tarjetas (pc-tarjeta.css) todas del mismo ancho, centradas;
     el mismo alto lo pone pcTarjeta.igualarAltos. Todo bajo .pcp- (la barra es hv-nav.css).
*/
/* [07-10] El fondo es la imagen de planes_heavensy_v6 (planes.css, tema azul oscuro): fija y
   cubriendo la pantalla desde debajo de la barra. --pcp-barra es la altura de .hv-nav (hv-nav.css).
   --pcp-fondo se ve mientras la imagen carga. La url va escrita en el body y no en una variable:
   dentro de una variable, la ruta relativa no siempre se resuelve desde este archivo. */
:root {
  --pcp-fondo: #334182;
  --pcp-barra: 54px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; font-family: 'DM Sans', sans-serif; color: #fff;
  background: var(--pcp-fondo) url('../img/manosuperior1.jpg') center var(--pcp-barra) / cover no-repeat fixed;
}
.pcp-hero { text-align: center; padding: 48px 20px 26px; }
.pcp-hero h1 { font: 600 clamp(26px, 3.6vw, 40px)/1.2 'Poppins', sans-serif; margin: 0 0 12px; color: #fff; }
.pcp-hero h1 span { color: #fff; }
.pcp-hero p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 15px; }
.pcp-sep { margin: 0 8px; opacity: .7; }
.pcp-cuerpo { max-width: 1240px; margin: 0 auto; padding: 10px 24px 64px; }
/* [06-10 (2)] El selector de vista */
.pcp-vista { display: inline-flex; gap: 4px; padding: 4px; margin-top: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; backdrop-filter: blur(6px); }
.pcp-vista[hidden] { display: none; }
.pcp-vista button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: rgba(255, 255, 255, .85); font: 600 12.5px 'DM Sans', sans-serif; padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.pcp-vista button svg { width: 14px; height: 14px; flex-shrink: 0; }
.pcp-vista button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pcp-vista button.on { background: #fff; color: #4c3fb8; box-shadow: 0 2px 8px rgba(10, 20, 70, .25); }
.pcp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; align-items: flex-start; padding-top: 8px; }
.pcp-grid > .pc-card { flex: 0 0 300px; max-width: 100%; }
.pcp-grupo + .pcp-grupo { margin-top: 34px; }
.pcp-grupo-tit {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 18px;
  font: 700 11px 'DM Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.pcp-grupo-tit svg { width: 15px; height: 15px; color: #c4b5fd; flex-shrink: 0; }
.pcp-grupo-tit::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
.pcp-estado { text-align: center; padding: 50px 20px; color: rgba(255, 255, 255, .8); font-size: 14px; }
.pcp-estado.pcp-error { color: #fecaca; }
.pcp-spinner {
  display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%;
  animation: pcp-gira .8s linear infinite;
}
@keyframes pcp-gira { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .pcp-cuerpo { padding: 6px 16px 40px; }
  .pcp-hero { padding: 34px 16px 20px; }
}