@charset "UTF-8";
/* Portada MercheStetic: formas organicas + raya dorada (2026-11-02) */
.hero-photo{background-color:#2b0f4f!important;background-image:linear-gradient(125deg,#240a45 0%,#4b1a86 35%,#8a2fa8 70%,#c2489f 100%)!important;isolation:isolate}
.hero-photo::before{content:"";position:absolute;inset:-15%;z-index:0;pointer-events:none;background:radial-gradient(34% 36% at 14% 20%,rgba(255,120,200,.75),transparent 70%),radial-gradient(30% 32% at 88% 12%,rgba(240,200,120,.60),transparent 70%),radial-gradient(38% 40% at 78% 88%,rgba(255,150,210,.65),transparent 70%),radial-gradient(34% 38% at 6% 92%,rgba(130,80,255,.80),transparent 70%),radial-gradient(28% 30% at 48% 45%,rgba(190,120,255,.45),transparent 70%);filter:blur(22px);animation:hero-aurora 16s ease-in-out infinite alternate}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 120%,rgba(20,5,45,.55),transparent 60%),radial-gradient(90% 70% at 50% -20%,rgba(20,5,45,.35),transparent 60%)}
@keyframes hero-aurora{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}50%{transform:translate3d(2%,-3%,0) scale(1.08) rotate(3deg)}100%{transform:translate3d(-3%,2%,0) scale(1.04) rotate(-3deg)}}
.hero-photo>*{position:relative;z-index:1}
.hero-photo div.relative.hidden{z-index:1}
.hero-photo div.relative.hidden>*{position:relative;z-index:1}
.hero-photo div.relative.hidden::before{content:"";position:absolute;z-index:0;left:-22%;right:-22%;top:50%;height:16px;border-radius:999px;transform:rotate(-22deg);background:linear-gradient(90deg,rgba(243,220,160,0),#f6e3ae 6%,#d9b45f 50%,#f6e3ae 94%,rgba(243,220,160,0));filter:blur(3px);box-shadow:0 0 50px 16px rgba(232,196,120,.55)}
.hero-photo div.relative.hidden::after{content:"";position:absolute;z-index:0;inset:-6%;border-radius:2.5rem;background:radial-gradient(60% 60% at 50% 50%,rgba(240,205,140,.35),transparent 70%);filter:blur(24px)}
@media (prefers-reduced-motion:reduce){.hero-photo::before{animation:none}}

/* v3: foto mas compacta + chips flotantes (solo escritorio) */
@media (min-width:1024px){
.hero-photo div.relative.hidden::after{inset:auto;z-index:3;left:-34px;bottom:70px;width:auto;height:auto;border-radius:999px;filter:none;background:rgba(255,255,255,.94);color:#5b2a86;font:600 13px/1 Outfit,system-ui,sans-serif;padding:11px 16px;white-space:nowrap;box-shadow:0 10px 30px rgba(30,5,60,.35);content:"\2726  Enfermera y esteticista";animation:hero-float 6s ease-in-out infinite alternate;animation-delay:-3s}
.hero-photo>div.mx-auto::before,.hero-photo>div.mx-auto::after{position:absolute;z-index:3;background:rgba(255,255,255,.94);color:#5b2a86;font:600 13px/1 Outfit,system-ui,sans-serif;padding:11px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 30px rgba(30,5,60,.35);pointer-events:none;animation:hero-float 5s ease-in-out infinite alternate}
.hero-photo>div.mx-auto::before{content:"\2726  Diagn\00f3stico personalizado";left:540px;top:110px}
.hero-photo>div.mx-auto::after{content:"\2726  C\00e1mara termogr\00e1fica";right:-14px;top:330px;animation-duration:7s;animation-delay:-2s}
.hero-photo div.relative.hidden>div{height:580px;box-shadow:0 30px 70px rgba(20,5,45,.5)}
.hero-photo div.relative.hidden>div>img{height:100%;object-fit:cover;object-position:50% 28%}
}
@keyframes hero-float{0%{transform:translateY(-7px)}100%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.hero-photo>div.mx-auto::before,.hero-photo>div.mx-auto::after,.hero-photo div.relative.hidden::after{animation:none}}

/* v5: fondo claro, mezcla lila + blanco (escritorio) */
@media (min-width:1024px){
.hero-photo{background-color:#f3ecfc!important;background-image:linear-gradient(125deg,#ffffff 0%,#f1e8fc 28%,#dcc8f3 62%,#c7a9ea 100%)!important}
.hero-photo::before{background:radial-gradient(34% 36% at 10% 18%,rgba(255,255,255,.95),transparent 70%),radial-gradient(32% 34% at 90% 10%,rgba(246,226,175,.70),transparent 70%),radial-gradient(38% 40% at 82% 92%,rgba(244,170,214,.55),transparent 70%),radial-gradient(34% 38% at 8% 95%,rgba(176,140,240,.60),transparent 70%),radial-gradient(28% 30% at 50% 50%,rgba(255,255,255,.65),transparent 70%)!important;filter:blur(26px)!important}
.hero-photo::after{background:none!important}
.hero-photo h1,.hero-photo h1 *{color:#3b1766!important;text-shadow:none!important}
.hero-photo .max-w-2xl p{color:#53317f!important;filter:none!important;text-shadow:none!important}
.hero-photo .max-w-2xl span.inline-flex{color:#5b2a86!important;background:rgba(255,255,255,.7)!important;border-color:rgba(91,42,134,.25)!important}
.hero-photo .max-w-2xl a:nth-of-type(2){color:#5b2a86!important;border-color:rgba(91,42,134,.45)!important;background:rgba(255,255,255,.55)!important}
.hero-photo>div.mx-auto::before,.hero-photo>div.mx-auto::after,.hero-photo div.relative.hidden::after{box-shadow:0 10px 28px rgba(91,42,134,.25)!important;border:1px solid rgba(91,42,134,.12)}
.hero-photo div.relative.hidden>div{box-shadow:0 30px 70px rgba(91,42,134,.35)!important}
}

/* v6: fondo marmol lila-blanco */
@media (min-width:1024px){
.hero-photo{background-color:#f3ecfc!important;background-image:url(/assets/hero-marble.webp)!important;background-size:112% auto!important;background-position:0% 40%!important;background-repeat:no-repeat!important;animation:hero-drift 26s ease-in-out infinite alternate}
.hero-photo::before{background:radial-gradient(30% 34% at 92% 8%,rgba(246,226,175,.55),transparent 70%),radial-gradient(34% 38% at 85% 95%,rgba(244,170,214,.30),transparent 70%)!important;filter:blur(28px)!important;animation:none!important}
}
@keyframes hero-drift{0%{background-position:0% 40%}100%{background-position:100% 62%}}
@media (prefers-reduced-motion:reduce){.hero-photo{animation:none!important}}

/* v7: marmol con vetas */
@media (min-width:1024px){
.hero-photo{background-image:url(/assets/hero-marble-2.webp)!important;background-size:cover!important;background-position:30% 50%!important;animation:hero-drift2 30s ease-in-out infinite alternate!important}
}
@keyframes hero-drift2{0%{background-position:20% 45%;background-size:112% auto}100%{background-position:80% 60%;background-size:122% auto}}

/* v8: izquierda mas clara para el texto */
@media (min-width:1024px){
.hero-photo::after{background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.72) 28%,rgba(255,255,255,.28) 48%,rgba(255,255,255,0) 62%)!important}
}