/* ==========================================================================
   PROPERTY MANAGERS — hoja propia, medida del markup (1344×768)

     héroe        0→464  → relación 2.90:1
     franja cian  69 px de alto · #02ABEE
     sección 3    fondo #F3FBFD
     titular      mayúscula 28px → 39px de cuerpo = 2.89vw, en VERSALITAS
     titular col. #071E3E

   Solo la carga esta página (`extra_css: pm`).
   ========================================================================== */
.page--pm {
  --pm-navy:  #071E3E;
  --pm-cyan:  #02ABEE;
  --pm-grey:  #5C6469;
  --pm-pale:  #F3FBFD;
  /* Cian para TEXTO: el del markup da menos de 4.5:1 sobre fondo claro. Mismo
     desdoble que en landing y commercial. */
  --pm-cyan-text: #06718F;
}
.page--pm .header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; padding-top: 16px;
}
.page--pm .nav { min-height: 66px; }

/* ---------- Héroe ---------- */
.pm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #EDEBE8;
  min-height: clamp(420px, 34.5vw, 660px);   /* 2.90:1 */
  display: flex; align-items: center;
  padding-top: 92px;
}
.pm-hero__bg, .pm-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%; border-radius: 0;
}
/* El vídeo solo se descubre cuando de verdad reproduce; si no, queda el póster,
   que es el mismo fotograma y no da salto. */
.pm-hero__video { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.pm-hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pm-hero__video { display: none; } }

/* Velo. `to right` y no un ángulo: con ángulo la línea del degradado mide más
   que el ancho de la caja y las paradas caen fuera, así que nunca llega a
   transparente y tapa la foto entera. */
.pm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    rgba(237,235,232,.95) 0%,  rgba(237,235,232,.90) 26%,
    rgba(237,235,232,.66) 40%, rgba(237,235,232,.22) 52%,
    rgba(237,235,232,0) 62%);
}
.pm-hero__inner { position: relative; width: 100%; }
.pm-hero__text { display: grid; gap: clamp(14px, 1.4vw, 24px); max-width: min(52%, 780px); }

.pm-h1 {
  margin: 0; font-weight: 800;
  /* 39px sobre 1344 = 2.89vw, medido. Va en VERSALITAS como el markup. */
  font-size: clamp(1.6rem, 2.89vw, 3.5rem);
  line-height: 1.12; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--pm-navy);
}
.pm-lede { font-size: clamp(.9rem, 1.1vw, 1.2rem); line-height: 1.55; color: var(--pm-grey); max-width: 44ch; }

.pm-cta { display: flex; flex-wrap: wrap; gap: 16px clamp(20px, 2.2vw, 36px); align-items: center; }
.pm-cta .btn { flex: none; min-height: 46px; padding: 6px 6px 6px 24px; font-size: .92rem;
  background: var(--pm-navy); border-color: var(--pm-navy); }

.pm-points { display: flex; flex-wrap: wrap; gap: 12px clamp(14px, 1.7vw, 26px); }
.pm-points li { display: flex; gap: 9px; align-items: center; }
/* FLEX y no grid+place-content: con el svg en % el centrado sale desplazado. */
.pm-points__ico {
  flex: none; width: clamp(30px, 2.3vw, 40px); height: clamp(30px, 2.3vw, 40px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pm-cyan); color: #fff;
}
.pm-points__ico svg { width: 50%; height: 50%; flex: none; }
.pm-points b { display: block; font-size: clamp(.74rem, .84vw, .9rem); font-weight: 700; color: var(--pm-navy); line-height: 1.25; }
.pm-points span span { display: block; font-size: clamp(.74rem, .84vw, .9rem); color: var(--pm-grey); line-height: 1.25; }

@media (max-width: 899px) {
  .pm-hero { min-height: auto; padding-top: 116px; }
  .pm-hero::before { background: rgba(237,235,232,.94); }
  .pm-hero__text { max-width: 100%; }
  .pm-hero__inner { padding-bottom: 40px; }
}

/* ---------- Franja ---------- */
/* Texto NAVY y no blanco. Sobre el cian del markup (#02ABEE) el blanco da
   2.60:1 — por debajo incluso del 3:1 de texto grande, así que no se arregla
   agrandándolo. El navy da 6.38:1 y permite conservar el color de franja
   EXACTO del markup, que es lo que importaba. */
.pm-strip { background: var(--pm-cyan); color: var(--pm-navy); }
.pm-strip ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: 69px; align-items: center;
}
.pm-strip li { display: flex; gap: 12px; align-items: center; padding-block: 12px; }
.pm-strip li + li { border-left: 1px solid rgba(255,255,255,.35); padding-left: clamp(14px, 1.6vw, 28px); }
.pm-strip svg { width: 24px; height: 24px; flex: none; }
.pm-strip b { display: block; font-size: .84rem; font-weight: 800; line-height: 1.3; }
.pm-strip span span { display: block; font-size: .84rem; font-weight: 600; line-height: 1.3; opacity: .88; }
@media (max-width: 1059px) {
  .pm-strip ul { grid-template-columns: 1fr 1fr; gap: 14px; padding-block: 16px; }
  .pm-strip li + li { border-left: 0; padding-left: 0; }
}
@media (max-width: 559px) { .pm-strip ul { grid-template-columns: 1fr; } }

/* ---------- Por qué ---------- */
.pm-why { background: var(--pm-pale); padding-block: clamp(44px, 4.4vw, 80px); }
.pm-why__grid { display: grid; gap: clamp(28px, 3vw, 52px); align-items: center; }
@media (min-width: 1000px) { .pm-why__grid { grid-template-columns: minmax(0,.9fr) minmax(0,2.4fr); } }
.pm-eyebrow {
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pm-cyan-text); margin-bottom: 12px;
}
.pm-why h2 {
  margin: 0; font-size: clamp(1.4rem, 2.1vw, 2.2rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.025em; text-transform: none; color: var(--pm-navy);
}
.pm-why h2 em { font-style: normal; color: var(--pm-cyan-text); }

.pm-why__list { display: grid; gap: 18px; }
@media (min-width: 640px)  { .pm-why__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .pm-why__list { grid-template-columns: repeat(4, 1fr); } }
.pm-why__list li {
  background: #fff; border-radius: 14px; overflow: hidden;
  padding-bottom: 16px; text-align: center;
  box-shadow: 0 8px 22px rgba(0,28,64,.10);
}
.pm-why__list img, .pm-why__list .imgph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block;
}
.pm-why__ico {
  position: relative; margin: -22px auto 8px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pm-cyan); color: #fff; border: 3px solid #fff;
}
.pm-why__ico svg { width: 20px; height: 20px; flex: none; }
.pm-why__list b { display: block; font-size: .88rem; font-weight: 700; color: var(--pm-navy); padding-inline: 12px; }
.pm-why__list li > span:last-child {
  display: block; font-size: .76rem; line-height: 1.45; color: var(--pm-grey); padding: 4px 14px 0;
}