/* Cainetwork Portafolio - página de proyecto. Todo va dentro de .cnp para no chocar con el tema. */
.cnp {--orange: #E8A23B;
    --ink: #000;
    --text: #1b1b1b;
    --muted: #4a4a4a;
    --line: #dcdcdc;}
.cnp, .cnp *, .cnp *::before, .cnp *::after {box-sizing: border-box;}
.cnp {margin: 0; font-family: 'Montserrat', system-ui, sans-serif; font-size: 16px; color: var(--text); background: #fff;}
.cnp img {max-width: 100%;}
.cnp .sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.cnp a:focus-visible, .cnp summary:focus-visible {outline: 3px solid var(--orange); outline-offset: 3px;}
.cnp .wrap {width: min(1200px, 90vw); margin: 0 auto;}
.cnp h1, .cnp h2, .cnp h3 {margin: 0; font-weight: 800; line-height: 1.1;}
.cnp h2 {font-size: clamp(1.6rem, 2.8vw, 2.4rem);}
.cnp h3 {font-size: 1.25rem; line-height: 1.25;}
.cnp p {margin: 0;}
.cnp .body-text {font-size: 1.0625rem; line-height: 1.7; color: var(--muted); max-width: 66ch;}
.cnp .btn {display: inline-block; background: var(--orange); color: var(--ink);
    font-weight: 700; font-size: 1rem; text-decoration: none;
    padding: .9em 1.5em; border-radius: 10px;}
.cnp .btn:hover {background: #f0b255;}
.cnp .live, .cnp .textlink {font-weight: 600; text-decoration: underline;
    text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px;}
.cnp .live {color: #fff;}
.cnp .textlink {color: var(--ink);}
.cnp .hero {position: relative; isolation: isolate; color: #fff; background: var(--ink); overflow: hidden;}
.cnp .hero-bg {position: absolute; inset: 0; z-index: -1; background: var(--c, #006d94);}
.cnp .hexbg {position: absolute; inset: 0; width: 100%; height: 100%; display: block;}
.cnp .hero-grid {min-height: min(100svh, 880px);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center; gap: clamp(24px, 4vw, 64px);
    padding: clamp(28px, 6vh, 64px) 0;}
.cnp .crumbs {font-size: .9375rem; color: rgba(255,255,255,.85); margin-bottom: clamp(18px, 4vh, 36px);}
.cnp .crumbs a {color: inherit; text-decoration: none;}
.cnp .crumbs a:hover {text-decoration: underline;}
.cnp .crumbs span::before {content: "/"; margin: 0 .55em; opacity: .6;}
.cnp .hero h1 {font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom: 1.1rem;}
.cnp .lead {font-size: 1.125rem; line-height: 1.6; color: #eef0f3; max-width: 36ch; margin-bottom: 1.6rem;}
.cnp .facts {display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0 0 1.9rem; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25);}
.cnp .facts div {min-width: 0;}
.cnp .facts dt {font-size: .875rem; color: rgba(255,255,255,.8); margin-bottom: 2px;}
.cnp .facts dd {margin: 0; font-weight: 700;}
.cnp .actions {display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;}
.cnp .scene {width: min(100%, 780px); justify-self: center; perspective: 1800px; perspective-origin: 50% 35%;}
.cnp .rig {position: relative; width: 100%; padding-bottom: 6%; transform-style: preserve-3d; transform: rotateX(var(--rx, 2deg)) rotateY(var(--ry, 0deg)); will-change: transform;}
.cnp .shadow {position: absolute; left: 6%; right: 6%; bottom: 0; height: 6%; background: rgba(0,0,0,.5); border-radius: 50%; filter: blur(16px); transform: translateZ(-40px) translateX(var(--sx, 0px));}
.cnp .laptop {position: relative; width: 82%; transform-style: preserve-3d;}
.cnp .lid {position: relative; aspect-ratio: 16 / 10.4; background: var(--ink); border-radius: 1.4% 1.4% .6% .6% / 2.2% 2.2% 1% 1%; padding: 1.5% 1.5% 2.2%; box-shadow: inset 0 0 0 1px rgba(232,162,59,.45); transform-style: preserve-3d;}
.cnp .lid::before {content: ""; position: absolute; inset: 0; background: #050505; border-radius: inherit; transform: translateZ(-10px);}
.cnp .lid::after {content: ""; position: absolute; top: .7%; left: 50%; width: .5%; aspect-ratio: 1; border-radius: 50%; background: #2a2a2d; transform: translateX(-50%);}
.cnp .base {position: relative; width: 112%; margin-left: -6%; aspect-ratio: 51 / 1; background: #202022; border-radius: 0 0 8px 8px; border-top: 1px solid #3a3a3d;}
.cnp .base::before {content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 50%; background: #0e0e0f; transform: translateX(-50%); border-radius: 0 0 6px 6px;}
.cnp .screen {position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; border-radius: .4%;}
.cnp .screen img {position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; will-change: transform; user-select: none; -webkit-user-drag: none;}
.cnp .phone {position: absolute; right: 0; bottom: 3%; width: 18.5%; aspect-ratio: 9 / 19; background: var(--ink); border-radius: 16% / 7.6%; box-shadow: inset 0 0 0 1px rgba(232,162,59,.45); transform-style: preserve-3d; transform: translateZ(var(--pz, 40px)); will-change: transform;}
.cnp .phone::before {content: ""; position: absolute; inset: 0; background: #050505; border-radius: inherit; transform: translateZ(-7px);}
.cnp .phone::after {content: ""; position: absolute; top: 2.6%; left: 50%; width: 28%; height: 2.4%; background: #000; border-radius: 99px; transform: translateX(-50%); z-index: 3;}
.cnp .phone .screen {position: absolute; left: 4.4%; right: 4.4%; top: 2.1%; bottom: 2.1%; width: auto; height: auto; border-radius: 12% / 5.6%;}
.cnp .story {padding: clamp(48px, 9vh, 96px) 0 0;}
.cnp .story-row {display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 64px); padding: clamp(32px, 6vh, 56px) 0; border-top: 1px solid var(--line);}
.cnp .story-row:last-child {border-bottom: 1px solid var(--line);}
.cnp .story-row ul {margin: 1.2rem 0 0; padding-left: 1.2rem; max-width: 66ch;}
.cnp .story-row li {font-size: 1.0625rem; line-height: 1.6; color: var(--muted); margin-bottom: .55rem; padding-left: .3rem;}
.cnp .story-row li::marker {color: var(--orange);}
.cnp .ps {margin-top: 2rem; max-width: 66ch;}
.cnp .ps-title {margin: 0 0 .9rem; font-size: 1rem; font-weight: 600; color: var(--text);}
.cnp .ps-grid {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; margin: 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.cnp .ps-grid dt {font-size: .9rem; color: var(--muted); line-height: 1.35; order: 2;}
.cnp .ps-grid div {display: flex; flex-direction: column;}
.cnp .ps-grid dd {margin: 0 0 .25rem; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1; color: var(--ink); order: 1;}
.cnp .ps-note {margin: .7rem 0 0; font-size: .9rem; color: var(--muted);}
@media (max-width: 600px) {
.cnp .ps-grid {grid-template-columns: repeat(2, minmax(0,1fr));}
}
.cnp .dev-note {margin-top: 1.4rem; max-width: 66ch; font-size: .875rem; line-height: 1.5; color: #5b5b5b; background: #f4f4f4; border: 1px dashed #b9b9b9; border-radius: 8px; padding: .8rem 1rem;}
.cnp .details {padding: clamp(56px, 10vh, 112px) 0 0;}
.cnp .details > .wrap > h2 {margin-bottom: clamp(28px, 5vh, 56px); max-width: 20ch;}
.cnp .detail {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(40px, 8vh, 88px);}
.cnp .detail:nth-of-type(even) {grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);}
.cnp .detail:nth-of-type(even) .shot {order: 2;}
.cnp .shot {margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f4f4f4;}
.cnp .shot img {display: block; width: 100%; height: auto;}
.cnp .detail h3 {margin-bottom: .6rem; font-size: 1.5rem;}
.cnp .mobile-row {display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: 0;}
.cnp .mobile-row h3 {margin-bottom: .6rem; font-size: 1.5rem;}
.cnp .phones {display: flex; justify-content: center; gap: clamp(12px, 2.5vw, 32px);}
.cnp .mini {flex: 0 1 200px; aspect-ratio: 9 / 19; background: var(--ink); border-radius: 16% / 7.6%; box-shadow: inset 0 0 0 1px rgba(232,162,59,.45); position: relative;}
.cnp .mini::after {content: ""; position: absolute; top: 2.6%; left: 50%; width: 28%; height: 2.2%; background: #000; border-radius: 99px; transform: translateX(-50%);}
.cnp .mini div {position: absolute; left: 4.4%; right: 4.4%; top: 2.1%; bottom: 2.1%; overflow: hidden; border-radius: 12% / 5.6%; background: #fff;}
.cnp .mini img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;}
.cnp .mini:nth-child(2) {transform: translateY(-18px);}
.cnp .faq {padding: clamp(64px, 11vh, 120px) 0 0;}
.cnp .faq-grid {display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 64px);}
.cnp .faq h2 {max-width: 14ch;}
.cnp details {border-top: 1px solid var(--line);}
.cnp details:last-child {border-bottom: 1px solid var(--line);}
.cnp summary {list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; position: relative;}
.cnp summary::-webkit-details-marker {display: none;}
.cnp summary::after {content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 600; color: var(--ink);}
.cnp details[open] summary::after {content: "\2212";}
.cnp details p {padding: 0 2.5rem 1.4rem 0; font-size: 1.0625rem; line-height: 1.7; color: var(--muted); max-width: 62ch;}
.cnp .cta {margin-top: clamp(64px, 11vh, 120px); background: var(--ink); color: #fff; padding: clamp(48px, 9vh, 88px) 0;}
.cnp .cta .wrap {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: center;}
.cnp .cta h2 {font-size: clamp(1.7rem, 3.2vw, 2.7rem); margin-bottom: .8rem; max-width: 20ch;}
.cnp .cta p {font-size: 1.125rem; line-height: 1.6; color: #e7e9ec; max-width: 44ch;}
.cnp .cta .btn {justify-self: start;}
.cnp .related {padding: clamp(56px, 10vh, 104px) 0;}
.cnp .related h2 {margin-bottom: clamp(20px, 4vh, 36px);}
.cnp .rel {display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding: 1.2rem 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none;}
.cnp .rel:last-child {border-bottom: 1px solid var(--line);}
.cnp .rel img {display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line);}
.cnp .rel strong {display: block; font-size: 1.25rem; font-weight: 800; margin-bottom: .25rem;}
.cnp .rel span.meta {color: var(--muted); font-size: 1rem;}
.cnp .rel .more {font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px;}
.cnp .rel:hover strong {text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px;}
@media (max-width: 900px) {
.cnp .hero-grid {grid-template-columns: 1fr; min-height: 0; padding-bottom: 40px;}
.cnp .lead {max-width: 52ch;}
.cnp .scene {width: min(100%, 560px);}
.cnp .story-row, .cnp .faq-grid, .cnp .mobile-row, .cnp .cta .wrap {grid-template-columns: 1fr;}
.cnp .detail, .cnp .detail:nth-of-type(even) {grid-template-columns: 1fr;}
.cnp .detail:nth-of-type(even) .shot {order: 0;}
.cnp .rel {grid-template-columns: 120px minmax(0, 1fr);}
.cnp .rel .more {grid-column: 2;}
.cnp .phones {margin-top: 8px;}
.cnp .mini:nth-child(2) {transform: none;}
}
@media (max-width: 560px) {
.cnp .phone {width: 28%;}
.cnp .laptop {width: 100%;}
.cnp .facts {gap: 12px 24px;}
.cnp .rel {grid-template-columns: 96px minmax(0, 1fr);}
.cnp .rel strong {font-size: 1.0625rem;}
}
.cnp .quote {margin: 2rem 0 0; max-width: 66ch; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.cnp .quote blockquote {margin: 0 0 .8rem; padding: 0; border: 0;}
.cnp .quote blockquote p {font-size: 1.25rem; line-height: 1.5; font-weight: 600; color: var(--ink);}
.cnp .quote figcaption {font-size: .9375rem; color: var(--muted);}
.cnp .body-text p + p {margin-top: 1rem;}
.cnp .body-text ul, .cnp .body-text ol {margin: 1rem 0 0; padding-left: 1.2rem;}
.cnp .rel img {width: 100%; height: auto;}
.cnp .rel > span:first-child {display: block; aspect-ratio: 16 / 9; background: #f0f0f0; border-radius: 10px;}
.cnp .detail .shot img, .cnp .screen img {max-width: none;}
.cnp .detail .shot img {max-width: 100%;}