/* ============================================================================
   public-hero-globos.css — posición de los globos flotantes del hero en las 4
   esquinas (.floating-card / .card-top-*/ .card-bottom-*). Compartido por las
   páginas públicas que reúsan el hero de landing.css (precios, sobre-nosotros).
   Extraído para no duplicar el bloque idéntico en cada CSS de página (#282).
   ============================================================================ */

.hero-image .floating-card {
    z-index: 2;
}

.hero-image .card-top-left {
    top: clamp(4%, 2vw, 8%);
    left: clamp(-10px, -3vw, -24px);
    right: auto;
    bottom: auto;
}

.hero-image .card-top-right {
    top: clamp(10%, 3vw, 16%);
    right: clamp(-10px, -3vw, -24px);
    left: auto;
    bottom: auto;
}

.hero-image .card-bottom-left {
    bottom: clamp(14%, 4vw, 20%);
    left: clamp(-10px, -3vw, -24px);
    top: auto;
    right: auto;
}

.hero-image .card-bottom-right {
    bottom: clamp(5%, 2vw, 9%);
    right: clamp(-10px, -3vw, -24px);
    top: auto;
    left: auto;
}

/* En pantallas chicas los globos estorban; se ocultan y la imagen manda. */
@media (max-width: 768px) {
    .hero-image .floating-card {
        display: none;
    }
}