.glass-panel {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(150, 123, 178, 0.1);
}
.inner-glow {
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-left: 1px solid rgba(255, 255, 255, 0.7);
}
.hover-zoom img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hover-zoom:hover img { transform: scale(1.08); }
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.product-photo { background: #efeeec; }

.hero-bg {
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(238,219,255,0.9), transparent 60%),
        radial-gradient(ellipse 55% 45% at 85% 15%, rgba(216,186,250,0.75), transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 85%, rgba(218,206,253,0.8), transparent 60%),
        radial-gradient(ellipse 50% 45% at 10% 90%, rgba(228,228,204,0.55), transparent 60%),
        linear-gradient(160deg, #faf9f7 0%, #f4f3f1 45%, #efeeec 100%);
}
.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: 0.55;
}
@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -25px) scale(1.06); }
    100% { transform: translate(0, 0) scale(1); }
}
.hero-blob-1 { top: -10%; left: -8%; width: 46vw; height: 46vw; background: #8369a3; animation: drift 16s ease-in-out infinite; }
.hero-blob-2 { bottom: -15%; right: -10%; width: 50vw; height: 50vw; background: #dacefd; animation: drift 20s ease-in-out infinite reverse; }
.hero-blob-3 { top: 30%; right: 15%; width: 26vw; height: 26vw; background: #c8c8b0; opacity: 0.35; animation: drift 24s ease-in-out infinite; }

/* Fondo tornasolado lila/blanco para las secciones del landing (lila dominante, blanco como destello) */
.iridescent-bg {
    background:
        radial-gradient(ellipse 80% 70% at 15% 12%, rgba(255, 255, 255, 0.75), transparent 55%),
        radial-gradient(ellipse 70% 60% at 88% 22%, rgba(255, 255, 255, 0.55), transparent 55%),
        radial-gradient(ellipse 80% 70% at 82% 92%, rgba(255, 255, 255, 0.6), transparent 55%),
        radial-gradient(ellipse 70% 60% at 10% 90%, rgba(255, 255, 255, 0.5), transparent 55%),
        linear-gradient(135deg, #e7d8fa 0%, #d8bafa 28%, #eedbff 52%, #dacefd 76%, #ecdefb 100%);
}

/* Campos de formulario: bordes redondos, fondo vidrio, sombra lila suave.
   !important porque el plugin "forms" de Tailwind CDN inyecta su propio reset
   (border-radius:0, etc.) con la misma especificidad y gana por orden de carga. */
input.form-field,
select.form-field,
textarea.form-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(216, 186, 250, 0.6) !important;
    border-radius: 1rem !important;
    padding: 14px 18px !important;
    box-shadow: 0 4px 16px rgba(150, 123, 178, 0.12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.form-field::placeholder {
    color: #9c94a3;
    opacity: 1;
}
input.form-field:focus,
select.form-field:focus,
textarea.form-field:focus {
    outline: none;
    border-color: #6a5188 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 8px 26px rgba(150, 123, 178, 0.28) !important;
}
select.form-field {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5188' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 18px !important;
    padding-right: 46px !important;
    cursor: pointer;
}
textarea.form-field {
    resize: vertical;
    min-height: 130px;
}