/* Opening only: composition taken from the user's approved hero reference. */
body:has([data-screen="start"]:not(.hidden)){background:#001510}
body:has([data-screen="start"]:not(.hidden)) .ambient{background:radial-gradient(ellipse at 70% 43%,#004b382e,transparent 55%),#001510}
body:has([data-screen="start"]:not(.hidden)) .ambient:before,body:has([data-screen="start"]:not(.hidden)) .ambient:after{display:none}
body:has([data-screen="start"]:not(.hidden)) .mast{height:108px;width:min(85.2%,1060px);border-color:#648d7d55;position:relative;z-index:3}
body:has([data-screen="start"]:not(.hidden)) .brand{font:800 39px/1 Arial,sans-serif;letter-spacing:-.025em;gap:13px}
body:has([data-screen="start"]:not(.hidden)) .brand b{font:400 22px/1.2 Arial,sans-serif;letter-spacing:0;color:#f4f7f5}
body:has([data-screen="start"]:not(.hidden)) .mast-d{font:500 18px/1 Arial,sans-serif;letter-spacing:-.025em;padding:12px 18px;border:1px solid #69ffad;color:#b6ffcf;background:#00191066;gap:11px}
body:has([data-screen="start"]:not(.hidden)) .mast-d svg{order:-1;width:34px;height:26px}
.mast-label-hero{display:none}
body:has([data-screen="start"]:not(.hidden)) .mast-label-default{display:none}
body:has([data-screen="start"]:not(.hidden)) .mast-label-hero{display:inline}
.screen[data-screen="start"]{width:100%;max-width:1244px;overflow:hidden;container-type:inline-size}
.hero{position:relative;isolation:isolate;padding:35px 7.4% 80px;min-height:690px;color:#f6f7f5;font-family:Arial,sans-serif}
.hero-copy{position:relative;z-index:2;pointer-events:none}.hero-copy>*{pointer-events:auto}
.hero-kicker{font-size:24px;font-weight:600;line-height:1.2;letter-spacing:.12em;color:#7bf584}
.hero h1{margin:28px 0 27px;font:700 67px/1.06 Georgia,'Times New Roman',serif;letter-spacing:-.035em;text-wrap:initial;color:#fafafa;max-width:590px;text-shadow:0 2px 7px #0005}
.hero h1>span,.hero h1>em{display:block}.hero h1 em{font-style:normal;color:#68f586}.hero h1>em{color:#57f69a}
.hero-title-break{display:none}
.hero-reassurance{position:relative;z-index:3;text-align:center;margin:18px auto 0;max-width:600px;color:#c2d7cc;font-size:16px;line-height:1.5}
.hero-description{max-width:460px;font-size:23px;line-height:1.48;letter-spacing:-.015em;color:#f3f5f3;text-shadow:0 2px 8px #00130d}
.hero-benefits{list-style:none;display:grid;gap:20px;padding:0;margin:38px 0 0;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.hero-benefits li{display:flex;align-items:center;gap:29px;min-height:34px}
.hero-benefits svg{width:35px;height:35px;flex:0 0 35px;fill:none;stroke:#53fca3;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hero-benefits .hero-bars{fill:#53fca3;stroke:none}
.hero-portrait{position:absolute;z-index:1;width:720px;height:720px;right:-160px;top:-10px;margin:0;pointer-events:none;mix-blend-mode:lighten}
.hero-portrait img{width:100%;height:100%;max-width:none;object-fit:contain;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 71%,transparent 98%),linear-gradient(to right,transparent,#000 14%);mask-composite:intersect}
.hero-orbit{position:absolute;z-index:0;pointer-events:none;width:800px;height:800px;border-radius:50%;right:-320px;top:-10px;border:2px solid #46fdb64d;background:radial-gradient(ellipse at 21% 15%,#06de8d19,transparent 55%);box-shadow:-17px -12px 40px -22px #0dffaf80,inset 5px 7px 22px -19px #6effd6;mask-image:linear-gradient(140deg,transparent 6%,#000 24%,transparent 65%)}
.hero-orbit:before{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid #66ffbe;filter:blur(1px);box-shadow:0 0 14px #1affb2,0 0 35px #00ff9a;mask-image:conic-gradient(from 200deg,transparent 0deg,#000 55deg,transparent 106deg)}
.hero-cta{display:flex;justify-content:center;align-items:center;gap:28px;position:relative;z-index:3;width:100%;min-height:88px;margin:64px 0 0;padding:20px 30px;border:0;border-radius:999px;font:700 32px/1.2 Arial,sans-serif;letter-spacing:-.035em;color:#00160e;background:linear-gradient(155deg,#87ffc0 0%,#55f9ab 47%,#20efa0 100%);box-shadow:inset 0 1px 1px #d6ffe6aa,0 0 38px #09ff9c0d;cursor:pointer}
.hero-cta svg{width:32px;height:25px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.hero-cta:hover{filter:brightness(1.06)}.hero-cta:active{transform:translateY(1px)}
body:has([data-screen="start"]:not(.hidden)) .foot{display:none}
body:has([data-screen="start"]:not(.hidden)) #photoToggle{display:none}
@media(max-width:900px){
 body:has([data-screen="start"]:not(.hidden)) .mast{width:85.2%;height:18cqw;min-height:64px;max-height:115px;gap:8px}
 body:has([data-screen="start"]:not(.hidden)) .brand{font-size:6.1vw;gap:1.5vw;letter-spacing:-.025em}
 body:has([data-screen="start"]:not(.hidden)) .brand b{font:400 3.2vw/1.2 Arial,sans-serif;letter-spacing:0}
 body:has([data-screen="start"]:not(.hidden)) .mast-d{padding:1.8vw 2.5vw;gap:1.6vw}
 body:has([data-screen="start"]:not(.hidden)) .mast-d{font-size:3.15vw}
 body:has([data-screen="start"]:not(.hidden)) .mast-d svg{width:6vw;height:4.5vw}
 .hero{padding:4.1cqw 7.4cqw 17cqw;min-height:0}
 .hero-kicker{font-size:3.75cqw;line-height:1.2;letter-spacing:.12em}
 .hero h1{font-size:8.15cqw;line-height:1.08;letter-spacing:-.025em;margin:3.4cqw 0 4.5cqw;max-width:56cqw}
 .hero-title-break{display:initial}
 .hero-reassurance{font-size:clamp(12px,3.2cqw,18px);max-width:72cqw;margin-top:3.6cqw}
 .hero-description{max-width:47.5cqw;font-size:clamp(12px,3.2cqw,23px);line-height:1.42;letter-spacing:-.012em}
 .hero-benefits{font-size:clamp(12px,3.55cqw,24px);gap:3.4cqw;margin:6.4cqw 0 0}
 .hero-benefits li{gap:5.2cqw;min-height:4.8cqw}.hero-benefits svg{width:5.2cqw;height:5.2cqw;flex-basis:5.2cqw}
 .hero-portrait{width:81cqw;height:81cqw;right:-27cqw;top:1.5cqw}
 .hero-portrait img{mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 75%,transparent 100%),linear-gradient(to right,transparent,#000 12%);mask-composite:intersect}
 .hero-orbit{width:100cqw;height:100cqw;right:-56cqw;top:0;border-width:1px}
 .hero-orbit:before{border-width:1.5px;box-shadow:0 0 10px #1affb2,0 0 25px #00ff9a}
 .hero-cta{gap:4.7cqw;min-height:12.6cqw;margin:9.3cqw 0 0;padding:3cqw 4cqw;font-size:4.8cqw;border-radius:999px}
 .hero-cta svg{width:4.3cqw;height:3.5cqw;stroke-width:3}
}
/* The reference has one lit arc behind the portrait, not a complete ring. */
.hero-orbit{width:100%;height:auto;aspect-ratio:390/450;right:0;top:0;border:0;border-radius:0;background:none;box-shadow:none;mask-image:none;overflow:visible}
.hero-orbit:before{display:none}
.hero-cta{background:linear-gradient(180deg,#80ffbc 0%,#45f6a6 44%,#1eeda0 100%)}
@media(max-width:900px){.hero-portrait{width:90cqw;height:90cqw;right:-28cqw;top:-2cqw}}
.hero-portrait{mix-blend-mode:normal}
.hero-portrait img{clip-path:url(#portrait-outline);mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%)}
.hero-portrait>svg{position:absolute;width:0;height:0;overflow:hidden}
@media(max-width:900px){.hero-orbit{transform:translateX(4cqw)}}
.hero-portrait{mix-blend-mode:lighten}

/* Keep the original photo pixels; consume only the extracted alpha as a mask. */
.hero-portrait{mix-blend-mode:normal}
.hero-portrait img{clip-path:none;mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%),url("assets/stephanie-recorte-mascara.png");mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;mask-mode:alpha;mask-composite:intersect}

/* Approved professional portrait and short introduction. */
.hero-portrait{width:680px;height:1041px;right:-130px;top:-30px;mix-blend-mode:normal}
.hero-portrait img{object-fit:contain;clip-path:none;mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 72%),url("assets/stephanie-resultado-mascara.png"),linear-gradient(to right,transparent 0%,transparent 22%,#000 43%);mask-size:100% 100%,95% 100%,100% 100%;mask-position:center;mask-repeat:no-repeat;mask-mode:alpha;mask-composite:intersect}
.hero-about{position:relative;z-index:3;border-top:1px solid #35543f;margin:38px 0 0;padding:25px 0 0;max-width:100%;color:#bcd2c4}
.hero-about-label{font:600 10px/1.5 Arial,sans-serif;letter-spacing:.13em;color:#8be6aa}
.hero .hero-about h2{font:400 29px/1.2 Georgia,serif;letter-spacing:-.025em;color:#f1f8f3;margin:12px 0 10px;text-wrap:initial}
.hero-about>p:last-child{font:400 16px/1.65 Arial,sans-serif;max-width:720px;color:#b5ccbe}
@media(max-width:900px){
 .hero{padding-bottom:8cqw}
 .hero-portrait{width:75cqw;height:114.835cqw;right:-13cqw;top:-2cqw}
 .hero-about{margin-top:8cqw;padding-top:5.5cqw}
 .hero-about-label{font-size:9px;letter-spacing:.11em}
 .hero .hero-about h2{font-size:25px;line-height:1.2;margin:11px 0 9px}
 .hero-about>p:last-child{font-size:14px;line-height:1.65;max-width:100%}
}