/* Kebel · Asesoría y gestión — piezas propias de esta presentación (usa estilo.css y escenas.css del portafolio) */

/* Portada: ruta Colombia–Venezuela sobre la foto */
.ruta { position: absolute; left: 1120px; top: 760px; width: 700px; height: 190px; overflow: visible; z-index: 2; }
.ruta .draw { fill: none; stroke: var(--gold-2); stroke-width: 3; stroke-dasharray: 4 10; stroke-linecap: round; }
.ruta .rn { fill: var(--deep); stroke: var(--gold-2); stroke-width: 4; }
.ruta .rt { font-size: 22px; letter-spacing: .22em; fill: var(--ink); font-weight: 800; }
.ruta .pulso { fill: var(--gold-2); filter: drop-shadow(0 0 8px var(--gold-2)); }
#a15 .cv-t { font-size: 170px; letter-spacing: -.04em; }
#a15 .cv-logo { width: 400px; margin-bottom: 40px; }
#a15 .ph.card { left: 1130px; top: 170px; width: 680px; height: 760px; }
#a15 .ph.card img { object-position: 30% 50%; }

/* 02 · Quiénes somos */
.anillo { position: absolute; left: 1180px; top: 150px; width: 680px; height: 680px; overflow: visible; animation: girar 40s linear infinite; }
.anillo .draw { fill: none; stroke: rgba(246,196,69,.55); stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; }
@keyframes girar { to { transform: rotate(360deg); } }
.pin { position: absolute; display: flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 700; color: var(--soft); background: rgba(6,20,42,.82); border: 1px solid rgba(246,196,69,.45); border-radius: 999px; padding: 12px 24px 12px 14px; backdrop-filter: blur(6px); }
.pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 12px var(--gold-2); }
.pin b { color: var(--ink); font-weight: 800; }

/* 04 · La oportunidad: curva */
.curva { position: absolute; left: 100px; top: 340px; width: 1000px; height: 600px; overflow: visible; }
.curva .eje { fill: none; stroke: rgba(159,177,201,.35); stroke-width: 2; }
.curva .plano { fill: none; stroke: rgba(159,177,201,.7); stroke-width: 5; stroke-dasharray: 2 12; stroke-linecap: round; }
.curva .sube { fill: none; stroke: var(--gold-2); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(246,196,69,.5)); }
.curva .area { fill: url(#gArea); }
.curva .punta { fill: var(--gold-2); }
.curva .halo { fill: none; stroke: var(--gold-2); stroke-width: 3; animation: halo 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.curva .ctag text { font-size: 26px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.curva .ctag .s2 { font-size: 22px; fill: var(--mute); font-weight: 700; }
.curva .ctag.g text:first-child { fill: var(--gold-2); }
.curva .yr { font-size: 20px; fill: var(--mute); letter-spacing: .12em; }

/* 07 · Servicios */
.svs { position: absolute; left: 120px; right: 120px; top: 350px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; perspective: 1800px; }
.sv { position: relative; height: 280px; border-radius: 22px; padding: 34px 32px 30px; background: linear-gradient(160deg, rgba(18,48,90,.85), rgba(10,31,58,.5)); border: 1px solid rgba(159,177,201,.2); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform-style: preserve-3d; transition: border-color .3s, box-shadow .3s; }
.sv:hover { border-color: rgba(246,196,69,.7); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.sv .n { position: absolute; right: 28px; top: 18px; font-size: 64px; font-weight: 800; color: rgba(246,196,69,.16); letter-spacing: -.04em; }
.sv .ico { width: 70px; height: 70px; }
.sv b { font-size: 31px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; }
.sv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(246,196,69,.16) 50%, transparent 65%); transform: translateX(var(--sx, -120%)); pointer-events: none; }
.sv.oro { background: linear-gradient(150deg, #f6c445, #e9a21b); border-color: transparent; }
.sv.oro b, .sv.oro .n { color: var(--deep); }
.sv.oro .n { opacity: .25; }
.sv.oro .ico { stroke: var(--deep); }

/* 08 · Alcance: letra en cada columna */
.letra { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 16px; background: var(--gold-2); color: var(--deep); font-size: 40px; font-weight: 800; flex: none; }
.c3 .col h3 { font-size: 36px; line-height: 1.15; }

/* 09 · Funciones: tubería upstream-midstream-downstream */
.tubo { position: absolute; left: 120px; top: 300px; width: 1680px; height: 230px; overflow: visible; }
.tubo .draw { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.tubo .tubo-in { fill: rgba(18,48,90,.85); }
.tubo .flow { stroke: var(--gold-2); }
.tubo .tramo text.t { font-size: 40px; font-weight: 800; }
.tubo .tramo text.d { font-size: 22px; fill: var(--mute); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.list2 { position: absolute; left: 120px; right: 120px; top: 590px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; list-style: none; }
.list2 li { position: relative; font-size: 29px; line-height: 1.3; padding: 18px 0 18px 50px; border-top: 1px solid rgba(159,177,201,.16); color: var(--soft); }
.list2 li::before { content: ""; position: absolute; left: 4px; top: 31px; width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); }
.list2 li b { color: var(--ink); }

/* 10 · Estrategia: dona de cuatro frentes */
.dona { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.dona .cuad { pointer-events: auto; cursor: pointer; transition: opacity .35s; }
.dona .cu { fill: rgba(18,48,90,.9); stroke: rgba(246,196,69,.55); stroke-width: 2; transition: fill .35s; }
.dona .cuad:nth-child(odd) .cu { fill: rgba(233,162,27,.2); }
.dona .cuad:hover .cu, .dona .cuad.on .cu { fill: var(--gold-2); }
.dona .cuad:hover .cuT, .dona .cuad.on .cuT { fill: var(--deep); }
.dona .cuT { font-size: 32px; font-weight: 800; transition: fill .35s; }
.dona .cuRing { fill: none; stroke: rgba(159,177,201,.3); stroke-width: 2; stroke-dasharray: 3 10; }
.dona .flecha { fill: none; stroke: var(--gold-2); stroke-width: 6; stroke-linecap: round; }
.dona .punta2 { fill: var(--gold-2); }
.dona .cuK { font-size: 26px; font-weight: 800; letter-spacing: .24em; fill: var(--ink); }
#a10.foco .cuad:not(.on) { opacity: .45; }
.qs { position: absolute; left: 120px; top: 360px; width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.q { border-radius: 20px; padding: 26px 28px; background: linear-gradient(160deg, rgba(18,48,90,.8), rgba(10,31,58,.5)); border: 1px solid rgba(159,177,201,.2); cursor: pointer; transition: border-color .3s, opacity .3s, transform .3s; min-height: 270px; }
.q b { display: block; font-size: 30px; font-weight: 800; color: var(--gold-2); margin-bottom: 14px; }
.q ul { list-style: none; }
.q li { font-size: 23px; line-height: 1.32; color: var(--soft); padding: 5px 0 5px 22px; position: relative; }
.q li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.q:hover, .q.on { border-color: rgba(246,196,69,.75); }
#a10.foco .q:not(.on) { opacity: .4; }
.toca2 { position: absolute; font-size: 20px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.toca2::before { content: "◆ "; color: var(--gold-2); }

/* 11 · Metas */
.metas { position: absolute; left: 120px; top: 350px; width: 1120px; }
.meta { display: grid; grid-template-columns: 90px 1fr; align-items: start; gap: 6px 26px; padding: 20px 0; border-top: 1px solid rgba(159,177,201,.16); }
.meta .n { font-size: 54px; font-weight: 800; color: var(--gold-2); line-height: 1; letter-spacing: -.03em; grid-row: span 2; }
.meta p { font-size: 29px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.meta .bar { height: 5px; border-radius: 3px; background: rgba(159,177,201,.15); overflow: hidden; margin-top: 10px; }
.meta .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left; }
.diana { position: absolute; left: 1330px; top: 330px; width: 480px; height: 480px; overflow: visible; }
.diana .dr { fill: none; stroke: var(--gold-2); stroke-width: 3; }
.diana .dr.f { fill: rgba(233,162,27,.12); }
.diana .dc { fill: var(--gold-2); }
.diana .dardo path { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.diana .dardo .pl { fill: var(--gold-2); stroke: none; }
.diana .impacto { fill: none; stroke: var(--gold-2); stroke-width: 4; }

/* 12 · Puente Venezuela–Colombia */
.puente { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }
.puente .draw { fill: none; stroke: var(--gold-2); stroke-width: 4; stroke-linecap: round; }
.puente .draw.b { stroke: rgba(159,177,201,.55); stroke-dasharray: 3 12; stroke-width: 3; }
.puente .pc { fill: url(#gPais); stroke: var(--gold-2); stroke-width: 4; }
.puente .pr { fill: none; stroke: rgba(246,196,69,.35); stroke-width: 2; stroke-dasharray: 2 10; }
.puente .pais text { font-size: 34px; font-weight: 800; letter-spacing: .14em; }
.puente .viaje { fill: var(--gold-2); filter: drop-shadow(0 0 10px var(--gold-2)); }
.puente .viaje.b { fill: #8fb4e3; filter: drop-shadow(0 0 10px #8fb4e3); }
.puente .arcoT { font-size: 24px; font-weight: 800; letter-spacing: .2em; fill: var(--gold-2); text-transform: uppercase; }
.lado { position: absolute; top: 760px; width: 560px; text-align: center; }
.lado b { display: block; font-size: 22px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.lado p { font-size: 28px; line-height: 1.35; color: var(--soft); }

/* 13 · Pasos: escalera */
.pz { position: absolute; width: 158px; cursor: pointer; }
.pz .blk { position: absolute; inset: 0; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(18,48,90,.95), rgba(10,31,58,.6)); border: 1px solid rgba(159,177,201,.22); border-bottom: 0; box-shadow: inset 0 5px 0 var(--gold); display: flex; justify-content: center; padding-top: 16px; transition: background .3s; }
.pz .blk b { font-size: 30px; font-weight: 800; color: var(--gold-2); letter-spacing: .04em; }
.pz .pt { position: absolute; left: -4px; right: -4px; bottom: calc(100% + 40px); font-size: 21px; line-height: 1.22; font-weight: 700; color: var(--soft); text-align: center; }
.pz:hover .blk, .pz.on .blk { background: linear-gradient(180deg, #f6c445, #e9a21b); }
.pz:hover .blk b, .pz.on .blk b { color: var(--deep); }
.pz.on .pt { color: var(--ink); }
.bola { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 18px var(--gold-2); opacity: 0; z-index: 3; pointer-events: none; }
.bandera { position: absolute; width: 70px; height: 110px; }
.bandera::before { content: ""; position: absolute; left: 0; bottom: 0; width: 4px; height: 100%; background: var(--ink); }
.bandera::after { content: ""; position: absolute; left: 4px; top: 0; width: 60px; height: 40px; background: var(--gold-2); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pdet { position: absolute; left: 120px; top: 330px; width: 640px; padding: 28px 32px; border-radius: 20px; background: rgba(6,20,42,.85); border: 1px solid rgba(246,196,69,.45); }
.pdet small { display: block; font-size: 20px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pdet b { display: block; font-size: 34px; font-weight: 800; margin-top: 8px; line-height: 1.15; }
.pdet p { font-size: 25px; line-height: 1.38; color: var(--soft); margin-top: 10px; }

/* 14 · Cronograma */
.tl { position: absolute; left: 120px; width: 1680px; top: 330px; height: 170px; }
.fases { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; }
.fase { border-radius: 12px; background: rgba(233,162,27,.16); border: 1px solid rgba(246,196,69,.5); display: flex; align-items: center; padding: 0 24px; }
.fase b { font-size: 26px; font-weight: 800; color: var(--gold-2); letter-spacing: .04em; }
.track { position: absolute; left: 0; right: 0; top: 96px; height: 8px; border-radius: 4px; background: rgba(159,177,201,.18); }
.tl-fill { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left; box-shadow: 0 0 18px rgba(246,196,69,.45); }
.meses { position: absolute; left: 0; right: 0; top: 84px; display: grid; grid-template-columns: repeat(12, 1fr); }
.mes { position: relative; text-align: center; padding-top: 44px; font-size: 21px; font-weight: 700; color: var(--mute); letter-spacing: .06em; }
.mes::before { content: ""; position: absolute; left: 50%; top: 4px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--deep); border: 3px solid var(--gold-2); }
.c3t { grid-template-columns: 1fr 1fr 2fr !important; top: 540px !important; }
.c3t .col h3 { font-size: 34px; }
.c3t .col li { font-size: 27px; }
.c3t .col:last-child ul { columns: 2; column-gap: 40px; }
.c3t .col:last-child li { break-inside: avoid; }
#a01 .cv-txt { top: 110px; }
#a01 .cv-logo { width: 400px; margin-bottom: 50px; }
#a01 .cv-t { font-size: 100px; }
.tl { top: 300px; }
.c3t { top: 500px !important; }
.c3t .col { padding: 30px 32px 26px; }
.c3t .col h3 { font-size: 32px; }
.c3t .col ul { margin-top: 14px; }
.c3t .col li { font-size: 24px; padding: 8px 0 8px 28px; }
.c3t .col li::before { top: 19px; width: 9px; height: 9px; }
#a15 .ph.card { top: 200px; height: 680px; }
#a15 .ph.card img { object-position: 6% 50%; }