/* V28: approved animal/phone/card compositions. Presentation only, scoped to the existing tour. */
#la-app .tour-product{--phone-width:min(350px,49%);height:850px;min-height:0;padding:0;max-width:780px;margin:0 auto;isolation:isolate;container-type:inline-size}
#la-app .tour-smartphone{top:16px;left:0;width:var(--phone-width);padding:9px;border-radius:40px}
#la-app .tour-smartphone:after{background:linear-gradient(110deg,#cad5c9 0%,#607963 2%,#10291c 6%,#22392a 88%,#b5cbb6 98%);border-color:#81977d;box-shadow:0 22px 24px #153a2a32,inset 0 0 0 2px #e4ece0a0,2px 3px 0 #91a78c}
#la-app .tour-capture{border-radius:29px;transform:rotate(-1.5deg)}
#la-app .tour-module-info{position:absolute;left:calc(var(--phone-width) - 9px);right:auto;top:76px;width:calc(100% - var(--phone-width));max-width:380px;padding:24px 22px;margin:0;transform:rotate(-2deg);border-radius:29px;background:linear-gradient(150deg,#fff 70%,#f0f7e9);border:1px solid #e6ecdf;box-shadow:0 19px 28px #173e2724,0 3px 6px #173e2709;z-index:5}
#la-app .tour-module-info h3{font-size:25px;line-height:1.15;letter-spacing:-.035em;margin-bottom:17px}
#la-app .tour-description{font-size:15px;line-height:1.5;margin-bottom:16px}
#la-app .tour-highlights{gap:9px;padding:14px 12px 14px 35px;border-radius:21px;background:#fffffff0}
#la-app .tour-highlights li{font-size:13px;line-height:1.35}
#la-app .tour-module-eyebrow{font-size:8px;letter-spacing:.06em}
#la-app .tour-organic{inset:4px -5px 20px 10px;transform:rotate(-7deg);border-radius:56% 44% 26% 74%/30% 34% 66% 70%;background:radial-gradient(ellipse at 82% 72%,#71994b 0%,#c2dda9 43%,#edf6e6 79%)}
#la-app .tour-organic:after{border:0;background:linear-gradient(140deg,transparent 40%,#d9edc76b);inset:38% -5% -2% -5%;border-radius:70% 30% 63% 37%;opacity:1;transform:rotate(15deg)}
#la-app #tour-panel-0 .tour-organic{background:radial-gradient(ellipse at 85% 75%,#386e42,#a7c98d 50%,#e5f1dd 82%)}
#la-app #tour-panel-3 .tour-organic{background:radial-gradient(ellipse at 88% 74%,#b7794c,#edbf97 49%,#faf0e7 83%)}
#la-app #tour-panel-4 .tour-organic{background:radial-gradient(ellipse at 88% 74%,#356041,#9cbe83 49%,#eaf4df 83%)}
#la-app .tour-photo-hook{left:auto;right:auto;bottom:0;top:auto;width:90%;height:auto;margin:0;transform:none;aspect-ratio:auto;z-index:3;animation:explore-in .35s ease}
#la-app .tour-photo-hook img{display:block;object-fit:contain;object-position:center;width:100%;height:auto;filter:drop-shadow(0 12px 10px #15372225);mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 96%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 96%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in}
#la-app .photo-home{width:95%;left:33%;bottom:0;top:auto}
#la-app .photo-home img{mask-image:none;-webkit-mask-image:none}
#la-app .photo-animals{width:85%;left:24%;bottom:5px;top:auto}
#la-app .photo-room{width:100%;left:38%;bottom:0;top:auto}
#la-app .photo-agenda{width:85%;left:15%;bottom:12px;top:auto}
#la-app .photo-species{width:43%;left:53%;bottom:15px;top:auto}
#la-app .tour-focus{border:1.2px solid #75aa5d;box-shadow:0 0 0 2px #bce0a64d,0 0 10px #81bb5c22;border-radius:7px}
#la-app .tour-connection{z-index:4}
#la-app .tour-connection path{stroke:#7da65f;stroke-width:1.3;opacity:.9}
#la-app .tour-connection circle{stroke:#72a454;fill:#f7fff0}
#la-app .tour-image-note{left:0;right:0;bottom:-4px;width:auto;text-align:left;line-height:1.5;max-width:100%;font-size:10px;z-index:5}
#la-app .tour-expanded{margin-top:25px}
@media(min-width:801px) and (max-width:1100px){
 #la-app .tour-product{--phone-width:min(270px,49%);height:735px}
 #la-app .tour-smartphone{width:var(--phone-width)}
 #la-app .tour-module-info{width:calc(100% - var(--phone-width) + 5px);left:calc(var(--phone-width) - 10px);top:60px;padding:19px 17px;max-width:330px}
 #la-app .tour-module-info h3{font-size:21px}#la-app .tour-description{font-size:13px}#la-app .tour-highlights li{font-size:12px}
}
@media(max-width:800px){
 #la-app .tour-product{--phone-width:62%;width:100%;height:auto;min-height:0;aspect-ratio:1/2.2;padding:0;max-width:530px}
 #la-app .tour-smartphone{top:12px;left:1%;width:var(--phone-width);padding:7px;border-radius:32px}
 #la-app .tour-capture{border-radius:24px;transform:rotate(-1.5deg)}
 #la-app .tour-module-info{position:absolute;top:13%;left:auto;right:3px;width:42%;max-width:none;padding:13px 11px;margin:0;transform:rotate(-2deg);border-radius:21px}
 #la-app .tour-module-info h3{font-size:clamp(16px,4.45vw,22px);line-height:1.13;margin-bottom:12px;letter-spacing:-.035em}
 #la-app .tour-card-icon{width:31px;height:31px;margin:0 7px 7px 0}
 #la-app .tour-card-symbol{width:19px;height:19px}
 #la-app .tour-module-eyebrow{font-size:6px;letter-spacing:.04em;line-height:1.3;margin-bottom:5px}
 #la-app .tour-description{font-size:clamp(11px,3.05vw,14px);line-height:1.4;margin-bottom:12px}
 #la-app .tour-highlights{padding:10px 5px 10px 22px;gap:8px;border-radius:15px;grid-template-columns:1fr}
 #la-app .tour-highlights li{font-size:clamp(10.5px,2.8vw,13px);line-height:1.3;padding-left:1px;font-weight:600}
 #la-app .tour-highlights li:before{left:-17px;width:15px;height:15px;font-size:11px;top:0}
 #la-app .tour-organic{inset:4px -3px 13px 0;border-radius:55% 45% 30% 70%/30% 21% 79% 70%}
 #la-app .tour-organic:after{inset:48% -2% -1% -3%}
 #la-app .photo-home{width:116%;left:1%;right:auto;top:auto;bottom:12px;height:auto;transform:none}
 #la-app .photo-animals{width:110%;left:5%;right:auto;top:auto;bottom:10px;height:auto;transform:none}
 #la-app .photo-room{width:125%;left:0;right:auto;top:auto;bottom:4px;height:auto;transform:none}
 #la-app .photo-agenda{width:110%;left:-5%;right:auto;top:auto;bottom:4px;height:auto;transform:none}
 #la-app .photo-species{width:75%;left:40%;right:auto;top:auto;bottom:0;height:auto;transform:none}
 #la-app #tour-panel-3 .tour-product{aspect-ratio:1/2.25;min-height:0;padding:0}
 #la-app #tour-panel-4 .tour-product{aspect-ratio:1/2.3;min-height:0;padding:0}
 #la-app .tour-image-note{font-size:9px;bottom:-13px;max-width:100%;left:0;right:0}
 #la-app .tour-expanded{margin-top:32px}
}
@media(max-width:360px){
 #la-app .tour-module-info{padding:11px 9px;right:1px;width:42%}
 #la-app .tour-module-info h3{font-size:15px}
 #la-app .tour-description{font-size:11px;line-height:1.35}
 #la-app .tour-highlights{gap:7px;padding-left:20px;padding-right:3px}
 #la-app .tour-highlights li{font-size:10.5px;line-height:1.25}
 #la-app .tour-card-icon{width:26px;height:26px;margin-right:6px}#la-app .tour-card-symbol{width:17px;height:17px}
 #la-app .tour-smartphone{padding:6px;border-radius:28px}#la-app .tour-capture{border-radius:21px}
}
@media(prefers-reduced-motion:reduce){#la-app .tour-photo-hook{animation:none!important}}

/* Fine mobile proportions: a wider card crosses the outer frame; foreground remains below the real controls. */
@media(max-width:800px){
 #la-app .tour-product{--phone-width:58%;aspect-ratio:1/2.1}
 #la-app .tour-module-info{width:46%;top:12%;padding:13px 11px}
 #la-app .tour-module-eyebrow{display:none}
 #la-app .tour-module-info h3{font-size:clamp(16px,4.4vw,22px)}
 #la-app .photo-home{width:140%;left:12%;bottom:15px}
 #la-app .photo-animals{width:130%;left:1%;bottom:0}
 #la-app .photo-room{width:150%;left:-2%;bottom:4px}
 #la-app .photo-agenda{width:145%;left:-38%;bottom:4px}
 #la-app #tour-panel-3 .tour-product{aspect-ratio:1/2.3}
 #la-app .photo-species{width:68%;left:40%;top:53%;bottom:auto}
}
@media(max-width:360px){#la-app .tour-module-info{width:46%;padding:11px 9px}#la-app .tour-module-info h3{font-size:15px}}
/* Organic perimeter plus an opaque head region: preserve faces without a photographic rectangle. */
#la-app .photo-animals{--head-x:55.5%;--head-y:38%;--head-rx:29%;--head-ry:25%}
#la-app .photo-room{--head-x:29.5%;--head-y:58.5%;--head-rx:25%;--head-ry:30%}
#la-app .photo-agenda{--head-x:69%;--head-y:24.5%;--head-rx:34%;--head-ry:29%}
#la-app .photo-species{--head-x:48.5%;--head-y:18.5%;--head-rx:41%;--head-ry:24%}
#la-app .photo-animals img,#la-app .photo-room img,#la-app .photo-agenda img,#la-app .photo-species img{mask-image:radial-gradient(ellipse 65% 65% at 50% 54%,#000 69%,transparent 87%),radial-gradient(ellipse var(--head-rx) var(--head-ry) at var(--head-x) var(--head-y),#000 85%,transparent 100%);mask-composite:add;-webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 54%,#000 69%,transparent 87%),radial-gradient(ellipse var(--head-rx) var(--head-ry) at var(--head-x) var(--head-y),#000 85%,transparent 100%);-webkit-mask-composite:source-over}
/* Overlap the frame, keeping the contextual screenshot region readable. */
@media(max-width:800px){#la-app .tour-product{--phone-width:56%}#la-app .tour-module-info{width:45%;right:0}}
/* Head clearance measured against each real card, including the longest Fichas copy. */
@media(min-width:801px){#la-app #tour-panel-3 .tour-product{height:920px}#la-app #tour-panel-4 .tour-product{height:940px}#la-app .photo-species{width:35%;left:60%;bottom:15px}}
@media(max-width:800px){#la-app #tour-panel-3 .tour-module-info{top:8%}#la-app #tour-panel-4 .tour-module-info{top:7%}#la-app .photo-species{top:58%}#la-app .tour-capture img{aspect-ratio:auto 709/1536}}
@media(max-width:360px){
 #la-app .tour-module-info,#la-app #tour-panel-3 .tour-module-info,#la-app #tour-panel-4 .tour-module-info{top:5%}
 #la-app .tour-module-info h3{font-size:14.5px}
 #la-app .tour-description{font-size:10.5px;line-height:1.35}
 #la-app #tour-panel-3 .tour-product{aspect-ratio:1/2.4}
 #la-app #tour-panel-4 .tour-product{aspect-ratio:1/2.8}
 #la-app .photo-species{top:60%}
}
/* Authentic habitat-only crops connect the foreground to the organic scene. */
#la-app #tour-panel-4 .tour-product:before,#la-app #tour-panel-3 .tour-product:before{content:'';position:absolute;z-index:0;pointer-events:none;inset:32% -2% 0 0;background:center/cover no-repeat;filter:blur(2px);border-radius:46% 54% 28% 72%;mask-image:linear-gradient(transparent,#000 33%,#000 90%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 33%,#000 90%,transparent)}
#la-app #tour-panel-4 .tour-product:before{background-image:url('assets/explore-species-context-v28.webp')}
#la-app #tour-panel-3 .tour-product:before{background-image:url('assets/explore-agenda-context-v28.webp');inset:38% -2% 0 0}
#la-app #tour-panel-4 .tour-product:before,#la-app #tour-panel-3 .tour-product:before{z-index:1;opacity:.8;filter:blur(3px) brightness(1.15)}
@media(max-width:800px){#la-app .photo-species{width:56%;left:44%;top:auto;bottom:18px}#la-app .tour-image-note.species-note{top:100%;bottom:auto}#la-app #tour-panel-4 .tour-expanded{margin-top:70px}}
