/* Photo-first enhancement: progressive, non-destructive layer */
:root{--photo-ink:#0c1013;--photo-accent:#f2bf5d}
html{scroll-behavior:smooth}
body{background:var(--photo-ink)}
#myCarousel{height:100vh;height:100svh;min-height:440px;background:#080a0b}
#myCarousel .carousel-inner,#myCarousel .carousel-item{height:100%!important}
#myCarousel .carousel-item.bg{background-color:#0a0c0e;background-size:contain!important;background-position:center center!important;background-repeat:no-repeat}
#myCarousel .carousel-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 65%,rgba(0,0,0,.52))}
#myCarousel .carousel-item>.container-fluid{position:relative;z-index:1;height:100%}
#myCarousel .carousel-header{top:clamp(105px,16vh,190px);left:clamp(0px,3vw,40px);max-width:calc(100% - 30px)}
#myCarousel .carousel-caption{width:min(500px,calc(100% - 100px));background:rgba(9,13,17,.72)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.13);border-radius:8px;backdrop-filter:blur(8px);left:50%;transform:translateX(-50%);padding:14px 18px;bottom:42px}
#myCarousel .carousel-caption h2{font-size:clamp(1rem,2vw,1.4rem);margin-bottom:8px}
#myCarousel .carousel-caption a{font-size:.85rem}
#myCarousel .carousel-control-prev,#myCarousel .carousel-control-next{width:8%;min-width:44px;z-index:3}
#myCarousel .carousel-indicators{bottom:0;z-index:3;max-width:80%;margin-left:auto;margin-right:auto;max-height:18px;overflow:hidden}
#myCarousel .carousel-header .section-title{text-shadow:none!important;letter-spacing:.12em;font-weight:700}
#myCarousel .carousel-info .comentario{max-width:min(680px,calc(100vw - 40px))!important;min-width:0!important;max-height:50svh;overflow:auto;bottom:100%;left:50%;transform:translateX(-50%);box-shadow:0 6px 26px rgba(0,0,0,.35)!important;border-radius:6px;line-height:1.5}
#portfolio img{height:auto}
#portfolio .portfolio-item img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
@media(max-width:767px){
 #myCarousel .carousel-header{left:0;top:100px}
 #myCarousel .carousel-header .section-title{font-size:24px}
 #myCarousel .carousel-header .section-description{font-size:.9rem}
 #myCarousel .carousel-caption{width:calc(100% - 92px);padding:10px 12px;bottom:40px}
 #myCarousel .carousel-caption h2{font-size:1rem}
 #myCarousel .carousel-info .comentario{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#myCarousel .carousel-item{transition:none!important}}