/*
 * Retoques visuales nuestros sobre la copia de Framer de inmobiliarias.
 *
 * El HTML y el CSS de Framer se quedan tal cual (los rehace
 * scripts/framer/copiar.py); lo que queremos distinto va aquí, después de sus
 * estilos. Se apunta por `data-framer-name` y no por las clases `framer-xxxx`
 * porque esas cambian de una página a otra para la misma pieza.
 * Lo carga cada página desde copiar.py (corrección `retoques`).
 */

/* ── 1 · «Cuando tu operación deja de depender del tiempo humano…»: el logo
 *       de Visionarius donde acaban las seis líneas. Framer lo metía de 56 px
 *       en una caja de 40 que lo recortaba en cuadrado; ahora es un círculo
 *       más grande, pegado al punto donde convergen las líneas (el centro de
 *       abajo del dibujo, 16 px por encima: el hueco que deja la columna). */
#benefits [data-framer-name="Logo"] {
  width: 76px;
  height: 76px;
  margin: -16px 0 18px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(110, 231, 128, 0.35), 0 0 22px rgba(74, 199, 88, 0.35);
}
#benefits [data-framer-name="Logo"] > div { width: 100%; }
#benefits [data-framer-name="Logo"] img { border-radius: 50%; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  #benefits [data-framer-name="Logo"] { width: 68px; height: 68px; }
}
@media (max-width: 809.98px) {
  #benefits [data-framer-name="Logo"] { width: 56px; height: 56px; margin-bottom: 14px; }
}

/* ── 2 · «Paso 1 · Captura multicanal»: Framer desenfocaba (blur 1 px) todo el
 *       orbe, logo incluido, y por eso se veía borroso. El desenfoque se queda
 *       sólo en los dos círculos que giran detrás. */
[data-framer-name="Orb"] { filter: none !important; -webkit-filter: none !important; }
[data-framer-name="Orb"] > [data-framer-name="Small circle"],
[data-framer-name="Orb"] > [data-framer-name="Large circle"] { filter: blur(1px); }

/* ── 3 · «¿Todavía no has visto el sistema en acción…?»: los dos móviles
 *       (Restail y Vivalta) iban pequeños dentro de una caja negra punteada con
 *       borde. Fuera la caja: sin fondo, sin borde ni las dos líneas de adorno;
 *       el punteado queda como textura que se difumina detrás, con un halo
 *       verde, y los móviles van grandes, enteros y con sombra. */
.framer-pmrTa.framer-u7WnO [data-framer-name="Images"] {
  background: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  will-change: auto !important;
}
.framer-pmrTa.framer-u7WnO [data-framer-name="Images"]::after { display: none !important; }
.framer-pmrTa.framer-u7WnO [data-framer-name="Images"]::before {
  content: "";
  position: absolute;
  inset: 6% 2% 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(74, 199, 88, 0.26), rgba(74, 199, 88, 0));
}
.framer-pmrTa.framer-u7WnO [data-framer-name="Line Left"],
.framer-pmrTa.framer-u7WnO [data-framer-name="Line Top"] { display: none !important; }
.framer-pmrTa.framer-u7WnO [data-framer-name="BG Image"] {
  top: -12% !important;
  left: -12% !important;
  width: 124% !important;
  height: 124% !important;
  opacity: 0.5 !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
  mask-image: radial-gradient(closest-side, #000 20%, transparent);
}
.framer-pmrTa.framer-u7WnO [data-framer-name="Image 01"] {
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  overflow: visible !important;
  will-change: auto !important;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.65));
}

/* Ordenador: la columna de los móviles crece (490 px) a costa del margen
 * derecho del texto, que se queda con el mismo ancho; los móviles (520 px)
 * entran un poco en ese margen, sin llegar a las letras. */
.framer-pmrTa.framer-u7WnO[data-framer-name="Desktop"] [data-framer-name="Grid"] {
  gap: 0 !important;
  align-items: stretch !important;
}
.framer-pmrTa.framer-u7WnO[data-framer-name="Desktop"] [data-framer-name="Left"] { padding-right: 20px !important; }
.framer-pmrTa.framer-u7WnO[data-framer-name="Desktop"] [data-framer-name="Right"] {
  flex: 0 0 490px !important;
  height: auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.framer-pmrTa.framer-u7WnO[data-framer-name="Desktop"] [data-framer-name="Images"] {
  width: 520px !important;
  margin-left: -30px;
}

/* Tablet: en dos columnas el texto iba en una tira estrecha y los móviles se
 * salían por la derecha. Una columna: el texto arriba y los móviles debajo. */
.framer-pmrTa.framer-u7WnO[data-framer-name="Tablet"] [data-framer-name="Grid"] {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.framer-pmrTa.framer-u7WnO[data-framer-name="Tablet"] [data-framer-name="Left"] {
  flex: none !important;
  width: auto !important;
  padding: 56px 56px 8px !important;
}
.framer-pmrTa.framer-u7WnO[data-framer-name="Tablet"] [data-framer-name="Right"] {
  flex: none !important;
  width: auto !important;
  justify-content: center !important;
  padding: 0 32px 28px;
}
.framer-pmrTa.framer-u7WnO[data-framer-name="Tablet"] [data-framer-name="Images"] {
  width: 100% !important;
  max-width: 580px;
}

/* Móvil: los móviles a todo el ancho de la tarjeta (antes 202 px de alto). */
.framer-pmrTa.framer-u7WnO[data-framer-name="Phone"] [data-framer-name="Right"] {
  justify-content: center !important;
  padding: 0 4px 16px;
}
.framer-pmrTa.framer-u7WnO[data-framer-name="Phone"] [data-framer-name="Images"] { width: 100% !important; }