/* ==========================================================================
   TURNOVER — hoja propia, medida del mockup aprobado (1344×768)

     héroe          411/1344 → relación 3.27:1 → 440 px de alto a 1440
     panel de texto 45% del ancho; la foto ocupa el resto, a sangre
     fondo panel    #F6F4F5 (crema, no el degradado azul del resto)
     titular        #002559 · palabra destacada #3795FF
     franja pálida  19.9% del alto
     banda de área  #263B5A

   Solo la carga esta página (`extra_css: turnover`).
   ========================================================================== */
.page--turnover {
  --tv-cream:  #F6F4F5;
  --tv-navy:   #002559;
  --tv-accent: #3795FF;
  --tv-band:   #263B5A;
  --tv-pale:   #EAF3FD;
  --tv-grey:   #5C6469;
}

/* Nav flotando sobre el héroe, como en la landing. */
.page--turnover .header {
  /* fixed, no absolute: así el nav —y el "Get a quote"— siguen visibles
     durante todo el scroll. No ocupa hueco porque flota sobre el héroe. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; padding-top: 16px;
}
.page--turnover .nav { min-height: 66px; }

/* ---------- Héroe ----------
   Foto a sangre en todo el ancho con el texto encima, no panel + foto.
   Relación 2.68:1 medida del markup. */
.tv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #F4F2EF;   /* muestreado de la pared de la foto, para que la
                            máscara funda sin salto de tono */
  min-height: clamp(430px, 37.3vw, 700px);
  display: flex; align-items: center;
  padding-top: 92px;
}
.tv-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  /* COVER y sin máscara: la foto ya nace en 2.72:1, la misma relación del
     héroe, así que va de lado a lado sin recortar nada y sin dejar hueco.
     Se recortó de una generación 1.75:1 quitándole el sobrante de alto — el
     original tenía sitio de sobra arriba y abajo. */
  object-fit: cover; object-position: 50% 50%; border-radius: 0;
}
/* Velo. `to right` y no un ángulo: con ángulo la línea del degradado mide más
   que el ancho de la caja, las paradas caen fuera del recuadro y nunca llega a
   transparente — tapa la foto entera. */
.tv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    rgba(246,244,245,.92) 0%,  rgba(246,244,245,.86) 28%,
    rgba(246,244,245,.55) 42%, rgba(246,244,245,.18) 54%,
    rgba(246,244,245,0) 64%);
}
.tv-hero__inner { position: relative; width: 100%; }
/* 58% y no 48%: a 4.34vw el titular necesita ~780px para "turnover cleaning"
   en una línea, y con 741 se partía en cuatro renglones. */
.tv-hero__text { display: grid; gap: clamp(12px, 1.2vw, 22px); max-width: min(58%, 920px); }

.tv-rule { display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--tv-accent); }
.tv-rule--center { margin: 14px auto 0; }

.tv-h1 {
  margin: 0; font-weight: 800;
  /* 58px sobre 1344 = 4.34vw, medido del markup. Iba a 3.35vw, un 23% menos, y
     ese era el motivo principal de que el héroe no se pareciera. */
  font-size: clamp(2rem, 4.34vw, 5.4rem);
  line-height: 1.06; letter-spacing: -0.03em; color: var(--tv-navy);
}
.tv-h1 em { font-style: normal; color: var(--tv-accent); }
.tv-h1 .spark { display: inline-block; color: var(--tv-accent); margin-left: .12em; }
.tv-h1 .spark svg { display: inline-block; width: .36em; height: .36em; vertical-align: .2em; }

.tv-lede { font-size: clamp(.95rem, 1.2vw, 1.3rem); line-height: 1.5; color: var(--tv-grey); max-width: 34ch; }

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

.tv-points { display: flex; flex-wrap: wrap; gap: 12px clamp(14px, 1.7vw, 26px); }
.tv-points li { display: flex; gap: 9px; align-items: center; }
/* FLEX y no grid+place-content: con el svg en % el track se auto-dimensiona
   contra el hijo y el centrado sale desplazado un cuarto del círculo. */
.tv-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: #DCEBFB; color: var(--tv-accent);
}
.tv-points__ico svg { width: 50%; height: 50%; flex: none; }
.tv-points b { display: block; font-size: clamp(.74rem, .84vw, .9rem); font-weight: 700; color: var(--tv-navy); line-height: 1.25; }
.tv-points span span { display: block; font-size: clamp(.74rem, .84vw, .9rem); color: var(--tv-grey); line-height: 1.25; }

.tv-trust { display: flex; gap: 8px; align-items: center;
  font-size: clamp(.78rem, .9vw, .95rem); font-weight: 600; color: var(--tv-navy); }
.tv-trust svg { width: 15px; height: 15px; color: var(--tv-accent); flex: none; }

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

/* ---------- Resultados ---------- */
.tv-results { background: var(--tv-pale); padding-block: clamp(40px, 4vw, 68px); text-align: center; }
.tv-results h2 {
  margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 800;
  letter-spacing: -0.02em; text-transform: none; color: var(--tv-navy);
}
.tv-results ul { display: grid; gap: 22px; margin-top: 34px; text-align: left; }
@media (min-width: 760px)  { .tv-results ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tv-results ul { grid-template-columns: repeat(5, 1fr); gap: 18px; } }
.tv-results li { display: flex; gap: 10px; align-items: flex-start; }
.tv-results__ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tv-accent); color: #fff;
}
.tv-results__ico svg { width: 50%; height: 50%; flex: none; }
.tv-results b { display: block; font-size: .8rem; font-weight: 700; color: var(--tv-navy); line-height: 1.3; }
.tv-results span span { display: block; font-size: .76rem; color: var(--tv-grey); line-height: 1.4; margin-top: 2px; }

/* ---------- Área de servicio ---------- */
.tv-area { background: var(--tv-band); color: #fff; padding-block: clamp(30px, 3vw, 48px); text-align: center; }
.tv-area h2 {
  margin: 0 0 20px; font-size: clamp(1.05rem, 1.5vw, 1.5rem); font-weight: 800;
  letter-spacing: -0.02em; text-transform: none; color: #fff;
}
.tv-area ul { display: flex; flex-wrap: wrap; gap: 14px clamp(18px, 2.4vw, 40px); justify-content: center; }
.tv-area li { display: flex; gap: 6px; align-items: center; font-size: clamp(.8rem, .95vw, 1rem); font-weight: 600; }
.tv-area svg { width: 16px; height: 16px; color: #8FC4FF; flex: none; }

/* El marcador de imagen trae su propio texto y padding, y en una caja de 76x30
   desborda y parte la fila del CTA. Mientras no exista la foto, se muestra como
   una pastilla punteada muda. */
.tv-avatars.imgph {
  font-size: 0; padding: 0; width: 76px; height: 30px;
  border-radius: 999px; overflow: hidden;
}
.tv-cta > .btn { flex: none; }
.tv-trusted { flex: 1 1 200px; min-width: 0; }

/* ---------- FAQ sin foto ----------
   Al quitar la imagen el acordeón se quedaría a 1543px de ancho — más aún que
   los 1035 que ya se leían amontonados. Se acota y se centra: las preguntas
   sostienen la sección solas. */
.faq__grid--solo { display: block; }
.faq__grid--solo .faq__wrap { max-width: 860px; margin-inline: auto; }


/* ---------- Vídeo del héroe ----------
   MISMO tratamiento que Property Managers, que es donde funciona: a sangre,
   `inset: 0`, sin franja ni máscara. Lo tenía en una tira lateral del 34% con
   un degradado en el canto, y eso era todo el problema — no el clip, que es el
   mismo archivo en las dos páginas. */
.tv-hero__bg,
.tv-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%; border-radius: 0;
}
.tv-hero__video { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.tv-hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tv-hero__video { display: none; } }