/* Presentación visual del trabajo desarrollado; la captura utiliza datos de muestra. */
.hero-content { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:55px; }
.hero-case-link { display:inline-flex; gap:10px; align-items:center; margin-top:24px; color:#b9edfa; font-size:14px; font-weight:800; text-decoration:underline; text-underline-offset:5px; }
.hero-case-link:hover { color:white; }
.portfolio-hero-visual { display:block; min-width:0; padding:20px; border:1px solid rgba(178,223,245,.28); border-radius:24px; background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(5,46,77,.2)); box-shadow:0 30px 90px rgba(0,9,26,.24); }
.portfolio-hero-label { display:flex; align-items:center; gap:10px; padding:1px 1px 15px; color:#c6edfa; font-size:11px; font-weight:800; letter-spacing:.11em; }
.portfolio-live-dot { width:8px; height:8px; border-radius:50%; background:#67e8f9; box-shadow:0 0 0 4px rgba(103,232,249,.16); }
.portfolio-screen-link { display:block; overflow:hidden; border:1px solid rgba(255,255,255,.36); border-radius:14px; background:#f4f7fb; box-shadow:0 26px 48px rgba(0,12,37,.28); text-decoration:none; transition:transform .25s,box-shadow .25s; }
.portfolio-screen-link:hover { transform:translateY(-4px); box-shadow:0 32px 55px rgba(0,12,37,.38); }
.portfolio-screen-link:focus-visible { outline:3px solid #67e8f9; outline-offset:4px; }
.portfolio-screen-top { display:flex; align-items:center; justify-content:space-between; gap:10px; height:37px; padding:0 13px; color:#627890; background:white; font-size:10px; }
.portfolio-screen-top > span:first-child { color:#76a5c4; font-size:9px; letter-spacing:2px; }
.portfolio-screen-top strong { font-weight:700; }
.portfolio-screen-top > span:last-child { color:#0e7490; font-size:15px; }
.portfolio-screen-link img { display:block; width:100%; height:auto; max-width:none; }
.portfolio-hero-bottom { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:17px 2px 1px; color:#d6e8f5; font-size:12px; }
.portfolio-hero-bottom strong { flex:none; color:#67e8f9; font-size:10px; letter-spacing:.06em; }
.product-section .product-label { letter-spacing:.08em; text-transform:uppercase; }
.product-section .product-link { text-underline-offset:5px; }
.portfolio-feature-section { overflow:hidden; background:linear-gradient(155deg,#f0f7fc,#fff 50%,#edfafe); }
.portfolio-feature-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:55px; }
.portfolio-eyebrow { display:block; color:#0b7896; font-size:12px; font-weight:800; letter-spacing:.11em; }
.portfolio-feature-copy h2 { max-width:480px; margin:17px 0; font-size:clamp(35px,3.8vw,51px); line-height:1.12; letter-spacing:-.04em; }
.portfolio-feature-copy > p:not(.portfolio-proof-note) { max-width:480px; color:#475569; font-size:17px; }
.portfolio-feature-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.portfolio-feature-points span { padding:7px 10px; border:1px solid #cae6ee; border-radius:999px; color:#185574; background:#effbfe; font-size:12px; font-weight:800; }
.portfolio-feature-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:32px; }
.portfolio-secondary-link { color:#1d4ed8; font-size:14px; font-weight:800; text-underline-offset:5px; }
.portfolio-inquiry-link { display:inline-block; margin-top:18px; color:#245073; font-size:13px; font-weight:700; text-underline-offset:4px; }
.portfolio-feature-copy .portfolio-proof-note { max-width:400px; margin-top:23px; color:#64748b; font-size:12px; }
.portfolio-feature-visual { min-width:0; padding:13px; border:1px solid #bed5e8; border-radius:18px; background:white; box-shadow:0 27px 70px rgba(18,54,82,.13); }
.portfolio-feature-top { display:flex; justify-content:space-between; gap:15px; padding:9px 10px 18px; color:#256383; font-size:10px; font-weight:800; letter-spacing:.07em; }
.portfolio-feature-screen { display:block; width:100%; padding:0; overflow:hidden; border:1px solid #d4e1ed; border-radius:10px; background:#f7fafd; cursor:zoom-in; }
.portfolio-feature-screen img { display:block; width:100%; max-width:none; height:auto; transition:transform .25s; }
.portfolio-feature-screen:hover img { transform:scale(1.015); }
.portfolio-feature-caption { display:block; padding:13px 9px 2px; color:#526d83; font-size:12px; text-align:right; }
.portfolio-feature-bottom { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:45px; overflow:hidden; border:1px solid #d8e6ef; border-radius:13px; background:#d8e6ef; }
.portfolio-feature-bottom a { display:block; min-width:0; padding:21px 23px; background:#fff; text-decoration:none; transition:background .2s; }
.portfolio-feature-bottom a:hover { background:#effafe; }
.portfolio-feature-bottom a > span { display:block; margin-bottom:6px; color:#0b7896; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.portfolio-feature-bottom strong { display:flex; justify-content:space-between; gap:10px; font-size:14px; line-height:1.4; }
.portfolio-feature-bottom strong span { color:#2563eb; }
@media (max-width:900px) { .hero-content { grid-template-columns:1fr; } .portfolio-hero-visual { width:min(100%,680px); margin-inline:auto; } }
@media (max-width:900px) { .portfolio-feature-grid { grid-template-columns:1fr; gap:34px; } .portfolio-feature-copy h2,.portfolio-feature-copy > p:not(.portfolio-proof-note) { max-width:680px; } }
@media (max-width:600px) { .portfolio-hero-visual { padding:12px; border-radius:16px; } .portfolio-screen-top { height:29px; font-size:9px; } .portfolio-hero-bottom { align-items:flex-start; flex-direction:column; gap:4px; padding-top:12px; font-size:11px; } .portfolio-feature-actions { align-items:flex-start; flex-direction:column; } .portfolio-feature-actions .btn { width:100%; } .portfolio-feature-bottom { grid-template-columns:1fr; } .portfolio-feature-top { align-items:flex-start; flex-direction:column; gap:2px; padding-bottom:12px; } }
@media (prefers-reduced-motion:reduce) { .portfolio-screen-link,.portfolio-feature-screen img,.portfolio-feature-bottom a { transition:none; } }