/* Pimer detail: personal story, real app screens and InnovandoPY milestone. */
.pimer-experience,.pimer-app-section,.pimer-milestone { scroll-margin-top:0 }

.pimer-page-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px
}

.pimer-page-links a {
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:10px 16px;
    border:1px solid #d9cbe9;
    border-radius:14px;
    background:#ffffff70;
    font-size:13px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:background .2s,transform .2s
}

.pimer-page-links a:hover { background:white; transform:translateY(-2px) }
.pimer-page-links a span { color:#a14b20 }

.pimer-experience {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:70px;
    align-items:center
}

.pimer-person {
    position:relative;
    min-height:530px;
    overflow:hidden;
    border:1px solid #ffffffc0;
    border-radius:150px 150px 32px 32px;
    background:radial-gradient(ellipse at 30% 20%,#fff9e6,transparent 65%),linear-gradient(145deg,#e1cef5,#ffc9ad);
    box-shadow:inset 0 1px 0 white,0 24px 50px #6a3c7520
}

.pimer-person>img {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:92%;
    object-fit:contain;
    object-position:center bottom;
    mask-image:linear-gradient(black 60%,transparent 97%);
    -webkit-mask-image:linear-gradient(black 60%,transparent 97%)
}

.pimer-person-tag {
    position:absolute;
    top:29px;
    left:0;
    right:0;
    text-align:center;
    font-size:10px;
    letter-spacing:1.5px;
    color:#744660
}

.pimer-person-caption {
    position:absolute;
    bottom:22px;
    left:22px;
    right:22px;
    padding:20px;
    border:1px solid #ffffffa0;
    border-radius:22px;
    background:#fffaf4b0;
    box-shadow:0 10px 30px #6a3c7512;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px)
}

.pimer-person-caption span,.pimer-person-caption strong { display:block }
.pimer-person-caption span { color:#845450; font-size:9px; letter-spacing:1.5px; margin-bottom:6px }
.pimer-person-caption strong { font-family:var(--display); font-size:25px; font-weight:500 }
.pimer-story .eyebrow,.pimer-award-story .eyebrow { color:#9b430f }
.pimer-story .eyebrow:before,.pimer-award-story .eyebrow:before { background:var(--orange) }
.pimer-story .section-title,.pimer-award-story .section-title { font-size:clamp(32px,3.2vw,46px); margin-bottom:25px }
.pimer-story>p:not(.eyebrow),.pimer-award-story>p:not(.eyebrow) { font-weight:600; font-size:16px; line-height:1.85; color:var(--muted); margin:0 0 18px }
.pimer-story strong,.pimer-award-story strong { color:var(--ink) }
.pimer-role-tags { display:flex; flex-wrap:wrap; gap:8px; margin:25px 0 }
.pimer-role-tags span { padding:8px 12px; border:1px solid #dfcfe6; border-radius:10px; background:#ffffff60; font-size:11px; color:#754878 }
.pimer-story .text-link,.pimer-award-story .text-link { border-color:#d99470; color:#934216; font-size:13px }

.pimer-app-section {
    position:relative;
    isolation:isolate;
    padding:66px 0 42px;
    overflow:hidden;
    border-block:1px solid #ffffffa0;
    background:radial-gradient(ellipse at 50% 53%,#ffc9ab66,transparent 58%),linear-gradient(145deg,#fff7f2d9,#f8efffdb);
    color:var(--ink)
}

.pimer-app-heading { text-align:center; max-width:700px; margin:0 auto }
.pimer-app-heading .eyebrow { justify-content:center; color:#9b430f; font-size:10px; letter-spacing:1.6px }
.pimer-app-heading .eyebrow:before { background:var(--orange) }
.pimer-app-heading>p:last-child { margin:20px auto 0; max-width:540px; color:var(--muted); font-size:16px; font-weight:600; line-height:1.8 }

.phone-carousel { --phone-width:250px; --phone-step:236px; margin-top:18px }
.phone-stage { display:flex; gap:24px; padding:30px 18px; overflow-x:auto; scroll-snap-type:x mandatory; touch-action:pan-y; border-radius:24px }
.phone-slide { flex:0 0 var(--phone-width); scroll-snap-align:center }
.phone-frame { display:block; position:relative; width:100%; padding:7px; border:1px solid #888192; border-radius:36px; background:linear-gradient(145deg,#47444e,#15141e); box-shadow:inset 0 0 0 2px #ffffff12,0 18px 35px #55374826; cursor:zoom-in }
.phone-frame img { width:100%; height:auto; aspect-ratio:1080/2202; border-radius:28px; object-fit:contain; background:#fff }
.phone-zoom { position:absolute; bottom:22px; right:22px; width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#ffffffe6; color:#533b5b; font-size:19px; box-shadow:0 3px 12px #30203425; opacity:0; transition:opacity .2s }
.phone-frame:hover .phone-zoom,.phone-frame:focus-visible .phone-zoom { opacity:1 }

/* Animated slides must not trigger native scrolling or scroll snapping. */
.phone-carousel.is-ready .phone-stage { position:relative; display:block; height:590px; overflow:clip; scroll-snap-type:none; padding:0; perspective:1400px }
.phone-carousel.is-ready .phone-stage:before { content:''; position:absolute; left:18%; right:18%; bottom:16px; height:80px; border-radius:50%; background:radial-gradient(ellipse,#b58b9226,transparent 70%); pointer-events:none }
.phone-carousel.is-ready .phone-slide { position:absolute; top:35px; left:50%; width:var(--phone-width); scroll-snap-align:none; z-index:var(--phone-layer,1); opacity:var(--phone-opacity,1); transform:translateX(calc(-50% + var(--phone-position,0) * var(--phone-step))) translateY(var(--phone-y,0px)) scale(var(--phone-scale,1)) rotateY(var(--phone-angle,0deg)); transition:transform .75s cubic-bezier(.22,.7,.2,1),opacity .6s ease; transform-origin:center center; will-change:transform }
.phone-carousel.is-ready .phone-slide.is-distant { pointer-events:none; will-change:auto }
.phone-carousel.is-ready .phone-slide:not(.is-active) .phone-frame { cursor:pointer }
.phone-slide.is-active .phone-frame { border-color:#e9986e; box-shadow:inset 0 0 0 2px #ffffff18,0 22px 45px #a0513e38,0 0 0 5px #ffa77815 }
.phone-caption { text-align:center; min-height:75px; margin:0 auto 15px; padding-inline:15px }
.phone-caption h3 { font-family:var(--display); font-size:25px; font-weight:500; line-height:1.3; margin:0 0 7px }
.phone-caption p { font-size:13px; font-weight:600; line-height:1.7; color:var(--muted); margin:0 }
.phone-controls { display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap }
.phone-navigation { display:flex; gap:14px; align-items:center }
.phone-arrow { width:45px; height:45px; border:1px solid #d5b8ca; border-radius:14px; background:#ffffffb3; box-shadow:inset 0 1px 0 white,0 5px 12px #785d7d10; font-size:22px; transition:background .2s,transform .2s }
.phone-arrow:hover { background:#ffe2d1; transform:translateY(-2px) }
.phone-count { min-width:52px; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; color:#875b7b }
.phone-dots { display:flex; align-items:center; gap:2px }
.phone-dots button { position:relative; width:23px; height:32px; border:0; padding:0; background:transparent; border-radius:10px }
.phone-dots button:before { content:''; display:block; width:6px; height:6px; margin:auto; border-radius:50%; background:#c5aec9; transition:background .2s,transform .2s }
.phone-dots button[aria-current]:before { background:#b95622; transform:scale(1.5) }
.phone-autoplay { min-height:41px; padding:11px 14px; border:1px solid #dbc1d2; border-radius:12px; background:#ffffff80; color:#755272; font-size:11px; font-weight:700 }
.phone-autoplay:hover { background:white }
.phone-controls button:disabled { cursor:default; opacity:.55; transform:none }
.phone-help { text-align:center; color:#8d718c; font-weight:500; font-size:11px; margin:21px 15px 0 }
.phone-dialog.capture-dialog { width:min(720px,calc(100vw - 32px)) }
.phone-dialog.capture-dialog>img { max-height:76dvh; border-radius:0; margin:23px auto }
.phone-dialog .dialog-toolbar { font-size:18px }
.phone-carousel.is-paused .phone-slide { will-change:auto }

.pimer-milestone { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:65px; align-items:center }
.pimer-award-photo { margin:0; overflow:hidden; border:1px solid #ffffffd9; border-radius:30px; background:#ffffff91; box-shadow:0 20px 40px #61476212; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px) }
.pimer-award-photo>img { width:100%; height:auto; aspect-ratio:1600/1060; object-fit:contain }
.pimer-award-photo figcaption { padding:13px 22px 0; font-size:10px; color:var(--muted); font-weight:600 }
.pimer-award-amount { padding:24px 26px 29px }
.pimer-award-amount span { display:block; font-size:10px; letter-spacing:1px; color:#9b614a }
.pimer-award-amount strong { display:block; font-family:var(--display); font-size:clamp(40px,4vw,57px); font-weight:500; line-height:1.15; color:#a94712; margin:8px 0 }
.pimer-award-amount span:last-child { letter-spacing:.4px; color:var(--muted); margin-top:10px }
.pimer-funding-focus { padding:0; list-style:none; margin:26px 0 }
.pimer-funding-focus li { display:flex; gap:14px; align-items:start; margin:16px 0 }
.pimer-funding-focus li>span { display:grid; place-items:center; width:32px; height:32px; flex:none; border:1px solid #e7c6bd; border-radius:10px; background:#fff5eb90; color:#a8501f; font-size:10px }
.pimer-funding-focus strong { font-size:14px; display:block; line-height:1.5 }
.pimer-funding-focus p { margin:4px 0 0; font-weight:600; color:var(--muted); font-size:12px; line-height:1.7 }
.pimer-final-actions { justify-content:center; padding:0 0 45px }

@media(max-width:1150px) {
    .pimer-experience,.pimer-milestone { gap:40px }
    .pimer-person { min-height:510px }
    .phone-carousel { --phone-width:236px; --phone-step:215px }
    .phone-carousel.is-ready .phone-stage { height:560px }
}

@media(max-width:900px) {
    .pimer-experience { gap:30px; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr) }
    .pimer-person { min-height:470px; border-radius:120px 120px 28px 28px }
    .pimer-person-caption { padding:16px; left:15px; right:15px }
    .pimer-person-caption strong { font-size:20px }
    .pimer-story>p:not(.eyebrow),.pimer-award-story>p:not(.eyebrow) { font-size:14px }
    .pimer-milestone { gap:32px; grid-template-columns:1fr }
    .pimer-award-photo { max-width:620px; width:100%; margin:auto }
    .pimer-award-story { max-width:680px }
    .phone-controls { gap:18px }
}

@media(max-width:650px) {
    .pimer-page-links { gap:8px; margin-top:24px }
    .pimer-page-links a { font-size:11px; padding:9px 12px; gap:10px }
    .pimer-experience { grid-template-columns:minmax(0,1fr); gap:32px }
    .pimer-person { width:min(340px,100%); min-height:440px; margin:auto; border-radius:120px 120px 28px 28px }
    .pimer-story .section-title,.pimer-award-story .section-title { font-size:33px; margin-bottom:22px }
    .pimer-story>p:not(.eyebrow),.pimer-award-story>p:not(.eyebrow) { font-size:15px }
    .pimer-role-tags { gap:7px; margin:22px 0 }
    .pimer-role-tags span { font-size:10px }
    .pimer-app-section { padding:45px 0 30px }
    .pimer-app-heading .section-title { font-size:35px }
    .pimer-app-heading>p:last-child { font-size:14px; margin-top:17px; padding-inline:10px }
    .pimer-app-heading .eyebrow { font-size:8px; letter-spacing:1.2px; margin-bottom:18px }
    .phone-carousel { --phone-width:226px; --phone-step:193px; margin-top:10px }
    .phone-carousel.is-ready .phone-stage { height:520px; margin-inline:-16px; border-radius:0 }
    .phone-carousel.is-ready .phone-slide { top:25px }
    .phone-frame { padding:6px; border-radius:31px }
    .phone-frame img { border-radius:24px }
    .phone-caption { margin-bottom:14px; min-height:77px }
    .phone-caption h3 { font-size:22px }
    .phone-caption p { font-size:12px }
    .phone-controls { gap:13px 20px }
    .phone-navigation { gap:12px }
    .phone-arrow { width:43px; height:43px }
    .phone-dots { order:3; width:100%; justify-content:center }
    .phone-dots button { width:25px }
    .phone-help { font-size:10px; margin-top:10px; line-height:1.7 }
    .pimer-award-amount { padding:23px }
    .pimer-award-amount strong { font-size:44px }
    .pimer-award-photo figcaption { padding-inline:18px; font-size:9px }
    .pimer-final-actions { padding-bottom:20px }
}

@media(prefers-reduced-motion:reduce) {
    .phone-carousel .phone-slide { will-change:auto }
}

.no-motion .phone-carousel .phone-slide { will-change:auto }