/* Three connected stations: a graphic, a visible outcome and three key ideas. */
#como-lo-hacemos .method-composition{--method-marker:clamp(32px,4svh,70px);--method-diagram:clamp(124px,min(17vw,19svh),340px);--method-gap:clamp(24px,4vw,110px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2.2svh,40px);min-height:calc(var(--stage-height)*.78);width:100%}
#como-lo-hacemos .method-heading h2{font-size:clamp(30px,min(3.4vw,4.4svh),82px);line-height:1.08;margin:0}
#como-lo-hacemos .method-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--method-gap);list-style:none;margin:0;padding:0}
#como-lo-hacemos .method-steps::before{content:'';position:absolute;left:calc(16.6667% - var(--method-gap)*.333333);right:calc(16.6667% - var(--method-gap)*.333333);top:calc(var(--method-marker)*.5);height:1px;background:#65734d}
#como-lo-hacemos .method-step{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;background:none;border:0}
#como-lo-hacemos .method-step:not(:last-child)::after{content:'';position:absolute;top:calc(var(--method-marker)*.5 - 4px);right:calc(-1 * var(--method-gap)*.5);width:8px;height:8px;border-top:1px solid #a8b785;border-right:1px solid #a8b785;transform:rotate(45deg)}
#como-lo-hacemos .method-number{position:relative;display:grid;place-items:center;align-self:center;width:var(--method-marker);height:var(--method-marker);border:1px solid #a2bb62;border-radius:50%;background:var(--bg);color:var(--lime);font-size:clamp(14px,1.8svh,32px);line-height:1;z-index:1}
#como-lo-hacemos .method-visual{display:block;flex:none;align-self:center;width:min(100%,calc(var(--method-diagram)*1.78));height:var(--method-diagram);margin:clamp(8px,1.2svh,24px) 0;overflow:visible}
#como-lo-hacemos .method-visual :is(.method-neutral,.method-accent){fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#como-lo-hacemos .method-neutral{stroke:#809078}
#como-lo-hacemos .method-accent{stroke:var(--lime)}
#como-lo-hacemos .method-muted-dot{fill:#87927d}
#como-lo-hacemos .method-dashed{stroke-dasharray:4 5}
#como-lo-hacemos .method-step-body{display:flex;flex-direction:column;flex:1;min-width:0}
#como-lo-hacemos .method-step h3{font-size:clamp(22px,min(2.1vw,3.2svh),58px);line-height:1.2;color:var(--white);margin:0 0 clamp(8px,1.1svh,22px)}
#como-lo-hacemos .method-output{display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(132px,17.5svh,310px);padding:clamp(10px,1.4svh,28px) 0;border-top:1px solid #53633b}
#como-lo-hacemos .method-output-value{font-size:clamp(46px,min(5.6vw,7.2svh),126px);line-height:1;font-weight:400;color:var(--lime);white-space:nowrap}
#como-lo-hacemos .method-output-value abbr{text-decoration:none;cursor:help}
#como-lo-hacemos .method-output-label{font-size:clamp(15px,min(1.6vw,2.2svh),40px);line-height:1.25;color:#e6eadf;margin-top:clamp(5px,.8svh,16px)}
#como-lo-hacemos .method-output-note{font-size:clamp(12px,min(1.15vw,1.6svh),28px);line-height:1.4;color:#adb9a0;margin-top:clamp(5px,.65svh,12px);max-width:34ch}
#como-lo-hacemos .method-highlights{display:flex;flex-direction:column;gap:clamp(4px,.6svh,12px);margin:clamp(10px,1.4svh,26px) 0 0;padding:0;list-style:none}
#como-lo-hacemos .method-highlights>li{display:flex;align-items:baseline;gap:.7em;font-size:clamp(15px,min(1.45vw,2svh),34px);line-height:1.4;color:#c7cfc0}
#como-lo-hacemos .method-highlights>li::before{content:'+';color:#9aae75;flex:none}
#como-lo-hacemos .how-action{margin:0;gap:clamp(20px,2.3vw,56px)}
#como-lo-hacemos .how-action .button{min-height:48px;font-size:clamp(14px,1.6svh,28px);padding:clamp(12px,1.6svh,28px) clamp(18px,2vw,48px)}
#como-lo-hacemos .how-action .text-link{font-size:clamp(13px,1.5svh,27px);min-height:44px}
@media(min-width:768px) and (max-height:800px){
 main>#como-lo-hacemos.section-wrap{padding-block:18px}
 #como-lo-hacemos>.section-meta{font-size:11px;padding-bottom:8px;margin-bottom:14px}
 #como-lo-hacemos .method-composition{--method-marker:32px;--method-diagram:106px;gap:16px;min-height:calc(var(--stage-height)*.80)}
 #como-lo-hacemos .method-heading h2{font-size:30px}
 #como-lo-hacemos .method-step h3{font-size:22px;margin-bottom:8px}
 #como-lo-hacemos .method-output{min-height:132px;padding-block:10px}
 #como-lo-hacemos .method-output-value{font-size:48px}
 #como-lo-hacemos .method-output-label{font-size:16px}
 #como-lo-hacemos .method-output-note{font-size:12px}
 #como-lo-hacemos .method-highlights>li{font-size:15px}
 #como-lo-hacemos .how-action .button{min-height:48px;padding:12px 18px;font-size:14px}
}
@media(min-width:768px) and (max-width:1099px){
 #como-lo-hacemos .method-composition{--method-gap:24px;--method-marker:36px}
 #como-lo-hacemos .method-step h3{font-size:22px}
 #como-lo-hacemos .method-output{min-height:160px}
 #como-lo-hacemos .method-output-value{font-size:46px}
 #como-lo-hacemos .method-output-label{font-size:16px}
 #como-lo-hacemos .method-output-note{font-size:12px}
 #como-lo-hacemos .method-highlights>li{font-size:14px}
 #como-lo-hacemos .how-action .button,#como-lo-hacemos .how-action .text-link{font-size:14px}
}
@media(max-width:767px){
 #como-lo-hacemos .method-composition{--method-marker:32px;min-height:0;gap:28px}
 #como-lo-hacemos .method-heading h2{font-size:clamp(26px,7.4vw,38px)}
 #como-lo-hacemos .method-steps{grid-template-columns:minmax(0,1fr);gap:30px}
 #como-lo-hacemos .method-steps::before{left:16px;right:auto;top:16px;bottom:16px;width:1px;height:auto}
 #como-lo-hacemos .method-step{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;row-gap:10px}
 #como-lo-hacemos .method-number{grid-column:1;grid-row:1/3;align-self:start}
 #como-lo-hacemos .method-visual{grid-column:2;grid-row:1;width:min(200px,100%);height:104px;margin:0;justify-self:start;align-self:center}
 #como-lo-hacemos .method-step-body{grid-column:2;grid-row:2}
 #como-lo-hacemos .method-step h3{font-size:23px;margin-bottom:8px}
 #como-lo-hacemos .method-output{min-height:0;padding-block:10px}
 #como-lo-hacemos .method-output-value{font-size:40px}
 #como-lo-hacemos .method-output-label{font-size:16px;margin-top:5px}
 #como-lo-hacemos .method-output-note{font-size:12px;margin-top:5px}
 #como-lo-hacemos .method-highlights{gap:4px;margin-top:4px}
 #como-lo-hacemos .method-highlights>li{font-size:15px}
 #como-lo-hacemos .method-step:not(:last-child)::after{top:auto;bottom:-19px;right:auto;left:12px;transform:rotate(135deg)}
 #como-lo-hacemos .how-action{align-items:flex-start;flex-direction:column;gap:12px}
 #como-lo-hacemos .how-action .button{min-height:48px;width:100%;justify-content:center;font-size:14px;padding:12px}
 #como-lo-hacemos .how-action .text-link{font-size:14px}
}