/* =========================================================
   FV Propiedades — estilos del carrusel en el sitio
   Paleta de marca: dorado #B79967 + negro #181817.
   Cambia las variables de abajo para ajustar los colores.
   ========================================================= */
.fvp-bloque {
  --fvp-ink: #181817;
  --fvp-ink-70: #3A3A38;
  --fvp-gold: #B79967;
  --fvp-gold-d: #9C7F4F;
  --fvp-line: #E3DDD1;
  --fvp-muted: #6B6660;
  --fvp-white: #FFFFFF;
  --fvp-wa: #128C4A; /* verde WhatsApp, se conserva por reconocimiento de marca */

  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}
.fvp-bloque *, .fvp-bloque *::before, .fvp-bloque *::after { box-sizing: inherit; }
.fvp-bloque img { max-width: 100%; display: block; }

/* ---------------------------------------------------------
   REINICIO A PRUEBA DE TEMA
   Muchos temas de WordPress traen sus propios estilos globales
   para <button>, que chocan con los controles del carrusel
   (por eso se veían óvalos azules/blancos al pasar fotos).
   "all: unset" borra esos estilos heredados antes de aplicar
   los nuestros, para que el plugin se vea igual sin importar
   el tema que use el sitio.
   --------------------------------------------------------- */
.fvp-bloque button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}

.fvp-titulo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fvp-ink);
  margin: 0 0 14px;
  padding: 0 4px;
}

.fvp-carrusel-envoltura { position: relative; }

.fvp-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fvp-track::-webkit-scrollbar { display: none; }

.fvp-tarjeta {
  flex: 0 0 82%;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--fvp-white);
  border: 1px solid var(--fvp-line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 620px) { .fvp-tarjeta { flex-basis: 46%; } }

.fvp-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #E7E1D3;
  overflow: hidden;
}
.fvp-foto-track {
  display: flex;
  height: 100%;
  transition: transform .35s ease;
}
.fvp-foto-img { width: 100%; height: 100%; object-fit: cover; flex: 0 0 100%; }

.fvp-foto-vacia {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  color: #8C8578; font-size: .85rem; font-weight: 600;
}
.fvp-foto-vacia svg { width: 44px; height: 44px; }

.fvp-foto::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(24,24,23,.8), rgba(24,24,23,0));
  pointer-events: none;
}
.fvp-chip {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--fvp-white);
  color: var(--fvp-ink);
  font-weight: 700;
  font-size: .78rem;
  padding: 4px 11px;
  border-radius: 999px;
}
.fvp-precio {
  position: absolute; left: 14px; bottom: 10px; z-index: 1;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--fvp-white);
  letter-spacing: -.01em;
}

/* ---- Flechas de la mini-galería dentro de cada tarjeta ----
   Antes: <button> heredaba el color/tamaño/forma del tema.
   Ahora: tamaño, color y forma quedan fijos con !important en
   las propiedades visuales clave, para que ningún estilo del
   tema pueda volver a agrandarlas ni cambiarles el color.      */
.fvp-foto-nav {
  all: unset;
  box-sizing: border-box;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--fvp-ink) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24,24,23,.25);
}
.fvp-foto-prev { left: 8px !important; right: auto !important; }
.fvp-foto-next { right: 8px !important; left: auto !important; }

.fvp-foto-puntos {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px; z-index: 2;
  pointer-events: none;
}
.fvp-foto-punto {
  width: 5px !important; height: 5px !important;
  min-width: 5px; min-height: 5px;
  border-radius: 50% !important;
  background: rgba(255,255,255,.55) !important;
  display: block;
}
.fvp-foto-punto.activo { background: var(--fvp-white) !important; }

.fvp-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fvp-cuerpo h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; color: var(--fvp-ink); }
.fvp-ciudad { margin: -6px 0 0; color: var(--fvp-muted); font-size: .9rem; }

.fvp-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--fvp-ink-70); font-size: .9rem; font-weight: 600; }

.fvp-acciones { margin-top: auto; display: grid; gap: 8px; }

/* Botón "Más información" — dorado de marca con texto blanco fijo,
   incluso al pasar el cursor (algunos temas fuerzan el texto de los
   enlaces a azul en :hover; el color aquí lleva !important para que
   esa regla del tema no lo pise). */
.fvp-cta {
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center; text-decoration: none;
  background: var(--fvp-gold); color: var(--fvp-white) !important;
  font-weight: 700; padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--fvp-gold);
  transition: border-color .3s ease, background .3s ease, letter-spacing .3s ease;
}
.fvp-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.fvp-cta:hover, .fvp-cta:focus-visible {
  background: var(--fvp-gold-d);
  border-color: var(--fvp-gold-d);
  color: var(--fvp-white) !important;
  letter-spacing: .01em;
}
.fvp-cta:hover::before, .fvp-cta:focus-visible::before { transform: translateX(120%); }

.fvp-mas { text-align: center; font-size: .88rem; color: var(--fvp-ink-70); font-weight: 600; text-decoration: none; }
.fvp-mas:hover { color: var(--fvp-gold-d); text-decoration: underline; }

.fvp-controles { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 8px; }

/* ---- Flechas del carrusel principal (mismo reinicio a prueba de tema) ---- */
.fvp-flecha {
  all: unset;
  box-sizing: border-box;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--fvp-line) !important;
  background: var(--fvp-white) !important;
  color: var(--fvp-ink) !important;
  display: grid !important; place-items: center !important;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.fvp-flecha:hover { border-color: var(--fvp-gold) !important; color: var(--fvp-gold-d) !important; }
.fvp-flecha svg { width: 18px; height: 18px; pointer-events: none; }

.fvp-puntos { display: flex; gap: 7px; }
.fvp-puntos .fvp-punto {
  all: unset;
  box-sizing: border-box;
  display: block !important;
  width: 8px !important; height: 8px !important;
  min-width: 8px; min-height: 8px;
  border-radius: 50% !important;
  background: #D8CFBB !important;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.fvp-puntos .fvp-punto[aria-current="true"] {
  width: 24px !important;
  border-radius: 999px !important;
  background: var(--fvp-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fvp-track { scroll-behavior: auto; }
  .fvp-foto-track { transition: none; }
  .fvp-cta, .fvp-cta::before, .fvp-flecha, .fvp-mas { transition: none; }
}

/* =========================================================
   Página tipo Bio — [fv_bio]
   Hero con banner + logo circular, enlaces, videos y botón
   flotante de WhatsApp. Usa las mismas variables de arriba.
   ========================================================= */
.fvp-bio {
  --fvp-bio-col: 520px;
  max-width: var(--fvp-bio-col);
  margin: 0 auto;
  font-family: inherit;
}
.fvp-bio, .fvp-bio *, .fvp-bio *::before, .fvp-bio *::after { box-sizing: border-box; }
.fvp-bio img { max-width: 100%; display: block; }
/* Solo se resetean elementos <button> reales (los del carrusel).
   Los enlaces .fvp-btn y .fvp-wa-flotante son <a>, mucho menos
   propensos a heredar estilos agresivos de un tema, y sus reglas
   de abajo ya definen cada propiedad visual que necesitan. */
.fvp-bio button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}

.fvp-hero { position: relative; }
.fvp-hero-banner {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  background: var(--fvp-ink, #181817);
  border-radius: 0 0 24px 24px;
}
.fvp-logo-badge {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  width: 92px; height: 92px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--fvp-gold, #B79967), 0 12px 26px rgba(24,24,23,.28);
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 2;
}
/* La imagen se recorta a círculo aquí (no en el contenedor), para que
   el anillo animado de abajo pueda expandirse más allá del logo sin
   quedar cortado. */
.fvp-logo-badge img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
/* Anillo dorado que emite un pulso suave — un guiño elegante a un
   "listado disponible ahora", sin distraer del contenido. */
.fvp-logo-badge::before, .fvp-logo-badge::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--fvp-gold, #B79967);
  animation: fvpLogoPulso 3.2s ease-out infinite;
  pointer-events: none;
}
.fvp-logo-badge::after { animation-delay: 1.6s; }
@keyframes fvpLogoPulso {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}

.fvp-intro { text-align: center; padding: 62px 20px 6px; }
.fvp-intro h1 {
  font-size: clamp(1.7rem, 7vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--fvp-ink, #181817);
}
.fvp-regla { width: 46px; height: 2px; background: var(--fvp-gold, #B79967); margin: 12px auto; border: 0; }
.fvp-rol {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fvp-muted, #6B6660);
  margin-bottom: 10px;
}
.fvp-tagline { margin: 0 auto; max-width: 34ch; color: var(--fvp-muted, #6B6660); }

.fvp-enlaces { display: grid; gap: 12px; padding: 22px 20px 8px; max-width: var(--fvp-bio-col); margin: 0 auto; }
.fvp-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 1.5px solid var(--fvp-line, #E3DDD1);
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  color: var(--fvp-ink, #181817);
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, transform .2s ease;
}
.fvp-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(183,153,103,.28) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.fvp-btn:hover, .fvp-btn:focus-visible { border-color: var(--fvp-gold, #B79967); transform: translateY(-2px); }
.fvp-btn:hover::before, .fvp-btn:focus-visible::before { transform: translateX(120%); }
.fvp-btn .fvp-ico {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--fvp-ink, #181817);
  color: #fff;
}
.fvp-btn .fvp-ico svg { width: 20px; height: 20px; }
.fvp-btn .fvp-txt { flex: 1; text-align: center; padding-right: 38px; }
.fvp-btn-principal { background: var(--fvp-wa, #128C4A); border-color: var(--fvp-wa, #128C4A); color: #fff; }
.fvp-btn-principal .fvp-ico { background: rgba(255,255,255,.18); }
.fvp-btn-principal:hover { border-color: var(--fvp-gold, #B79967); }

/* Tarjeta de video — formato reel (vertical), para que no se corten
   las cabezas de las personas al forzar un video vertical dentro de
   un recuadro horizontal. */
.fvp-tarjeta-video {
  flex-basis: 62% !important;
  max-width: 240px !important;
}
@media (min-width: 620px) { .fvp-tarjeta-video { flex-basis: 30% !important; } }

.fvp-video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--fvp-ink, #181817);
}
.fvp-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fvp-video-chip {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--fvp-gold, #B79967);
  color: var(--fvp-ink, #181817);
  font-weight: 700; font-size: .78rem;
  padding: 4px 11px; border-radius: 999px;
  pointer-events: none;
}

/* Botón flotante de WhatsApp */
.fvp-wa-envoltura {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  right: max(16px, calc(50vw - (var(--fvp-bio-col) / 2) + 16px));
  z-index: 999;
  display: flex; align-items: center; gap: 12px;
  pointer-events: none;
}
.fvp-wa-tip {
  all: unset;
  box-sizing: border-box;
  pointer-events: auto;
  display: block;
  background: #fff;
  color: var(--fvp-ink, #181817);
  font-weight: 700;
  font-size: .92rem;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  border: 1px solid var(--fvp-line, #E3DDD1);
  box-shadow: 0 8px 24px rgba(24,24,23,.18);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .35s ease, transform .35s ease;
  max-width: 200px;
  line-height: 1.25;
  cursor: pointer;
}
.fvp-wa-tip.fvp-mostrar { opacity: 1; transform: none; }
.fvp-wa-flotante {
  pointer-events: auto;
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--fvp-wa, #128C4A);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(18,140,74,.4);
  text-decoration: none;
  animation: fvpWiggle 7s ease-in-out 2s infinite;
}
.fvp-wa-flotante svg { width: 34px; height: 34px; position: relative; z-index: 1; }
.fvp-wa-flotante::before, .fvp-wa-flotante::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--fvp-gold, #B79967);
  animation: fvpPulse 2.4s ease-out infinite;
}
.fvp-wa-flotante::after { animation-delay: 1.2s; }

@keyframes fvpPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes fvpWiggle {
  0%, 76%, 100% { transform: rotate(0) scale(1); }
  79% { transform: rotate(-14deg) scale(1.1); }
  83% { transform: rotate(12deg)  scale(1.1); }
  87% { transform: rotate(-10deg) scale(1.1); }
  91% { transform: rotate(8deg)   scale(1.05); }
  95% { transform: rotate(-4deg)  scale(1.02); }
}

@media (min-width: 700px) {
  .fvp-bio { }
}

.fvp-footer {
  text-align: center;
  color: var(--fvp-muted, #6B6660);
  font-size: .82rem;
  padding: 36px 20px 90px;
}
.fvp-footer p { margin: 0; }

/* Fotos del broker — fila simple de 2 o más fotos, sin carrusel
   (no hace falta deslizar para tan pocas imágenes). */
.fvp-broker { padding: 36px 20px 0; max-width: 720px; margin: 0 auto; }
.fvp-broker-fotos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.fvp-broker-foto {
  flex: 1 1 45%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fvp-line, #E3DDD1);
  display: grid;
  place-items: center;
  padding: 14px;
}
/* object-fit: contain — nunca recorta. Sirve tanto para una foto de
   retrato como para un logo (con texto o insignias), que siempre debe
   verse completo. */
.fvp-broker-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Video de YouTube incrustado — se ajusta a un ancho responsivo
   manteniendo siempre la proporción panorámica 16:9. */
.fvp-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--fvp-ink, #181817);
}
.fvp-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fvp-wa-flotante, .fvp-wa-flotante::before, .fvp-wa-flotante::after { animation: none; }
  .fvp-logo-badge::before, .fvp-logo-badge::after { animation: none; }
  .fvp-btn, .fvp-btn::before, .fvp-wa-tip { transition: none; }
}