.poseidon-hero__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: opacity .25s, background .3s, color .3s;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
.poseidon-hero__btn:hover { opacity: .85; }
.poseidon-hero__btn--primary { box-shadow: 0 4px 14px rgba(0,0,0,.15); }

.poseidon-hero__content h1,
.poseidon-hero__content p { word-break: break-word; }

.poseidon-hero__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
}

/* ── Adaptación mobile ──
   Por debajo de 640px: si se cargó una imagen específica para mobile, se
   reemplaza el fondo (misma posición/tamaño/repetición ya definidos inline);
   y el contenido (texto + botones) se centra siempre, sin importar la
   alineación elegida para desktop, porque en pantallas angostas ya no hay
   espacio para que se vea bien un layout a izquierda/derecha. */
@media (max-width: 640px) {
    .poseidon-hero--has-mobile-bg { background-image: var(--poseidon-hero-bg-mobile) !important; }
    .poseidon-hero__container { align-items: center !important; }
    .poseidon-hero__content { text-align: center !important; }
    .poseidon-hero__buttons { justify-content: center !important; }
}

@media (max-width: 480px) {
    .poseidon-hero__container { padding-left: 16px !important; padding-right: 16px !important; }
    .poseidon-hero__content { padding: 24px 0 0 !important; }
    .poseidon-hero__buttons { flex-direction: column; align-items: stretch; padding: 16px 0 32px !important; }
    .poseidon-hero__btn { width: 100%; max-width: 320px; text-align: center; }
    .poseidon-hero--left .poseidon-hero__btn,
    .poseidon-hero--right .poseidon-hero__btn { margin-left: auto; margin-right: auto; }
}