.hvg{
--pap:#FFFFFF; --cre:#F7F2EA; --are:#ECE3D6; --car:#14110D;
--topo:#4B453C; --cob:#A87C4F; --cobp:#8C6A47; --lin:#DCD2C3;
box-sizing:border-box; margin:2.6em 0; max-width:100%;
padding:clamp(20px,4.8vw,28px) clamp(16px,4.2vw,26px) clamp(14px,3.4vw,20px);
background:var(--pap); border:1px solid var(--lin);
font-family:"Schibsted Grotesk",system-ui,sans-serif; color:var(--car);
view-timeline-axis:block;
}
.hvg *{ box-sizing:border-box }
.hvg-1{ view-timeline-name:--fa }
.hvg-2{ view-timeline-name:--fb }
.hvg-3{ view-timeline-name:--fc }
.hvg h3{
font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
font-size:clamp(21px,3.4vw,28px); line-height:1.18; letter-spacing:-.01em;
color:var(--car); margin:0 0 6px; text-wrap:balance;
}
.hvg .hvg-sub{ font-size:clamp(12.5px,2.1vw,14px); line-height:1.45; color:var(--topo); margin:0 0 26px }
.hvg figcaption{
margin:22px 0 0; padding-top:12px; border-top:1px solid var(--lin);
font-style:normal; font-size:11.5px; line-height:1.45; color:var(--topo);
}
.hvg b{ font-weight:600; color:var(--car) }
.hvg-1{ --g:clamp(14px,4vw,46px); --eje:clamp(44px,11vw,58px) }
.hvg-filac,.hvg-filap{ display:flex; gap:var(--g); padding-right:var(--eje) }
.hvg-filac{ position:relative; height:clamp(176px,40vw,258px) }
.hvg-caja,.hvg-pcol{ flex:1; min-width:0; position:relative }
.hvg-ref{
position:absolute; left:0; right:0; top:57.8%; height:1px; z-index:2;
background:var(--topo); transform-origin:left;
}
.hvg-ref i{ position:absolute; right:0; top:5px; font-style:normal; font-size:10.5px; color:var(--topo) }
.hvg-barra{ position:absolute; left:0; right:0 }
.hvg-barra.arriba{ top:0; height:57.8%; transform-origin:bottom; background:var(--cob) }
.hvg-barra.abajo{ top:57.8%; height:39.6%; transform-origin:top; background:var(--car) }
.hvg-cif{
display:flex; align-items:flex-end; min-height:clamp(36px,7.4vw,52px); margin:18px 0 0;
font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(30px,6.4vw,46px);
line-height:1; color:var(--cob);
}
.hvg-cif.osc{ font-family:"Schibsted Grotesk",system-ui,sans-serif; font-weight:600;
font-size:clamp(14px,2.9vw,19px); line-height:1.25; color:var(--car) }
.hvg-pie{ margin:14px 0 0 }
.hvg-pie b{ display:block; font-size:clamp(13px,2.5vw,15px) }
.hvg-pie span{ display:block; font-size:clamp(11.5px,2.2vw,13px); color:var(--topo); margin-top:2px }
.hvg-nota{
margin:26px 0 0; padding-top:16px; border-top:1px solid var(--lin);
font-size:clamp(13px,2.4vw,15px); line-height:1.55; max-width:54ch;
}
.hvg-fila{ margin:0 0 20px }
.hvg-fila .hvg-et{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:7px }
.hvg-fila .hvg-et b{ font-size:clamp(13px,2.5vw,15px) }
.hvg-fila .hvg-et i{
font-style:normal; font-family:"Cormorant Garamond",Georgia,serif;
font-size:clamp(19px,4vw,28px); line-height:1; color:var(--car);
}
.hvg-fila.alta .hvg-et i{ color:var(--cobp) }
.hvg-via{ height:15px; background:var(--are) }
.hvg-lle{ height:100%; transform-origin:left; background:var(--cob) }
.hvg-fila.alta .hvg-lle{ background:var(--cobp) }
.hvg-mas{ font-size:clamp(11.5px,2.2vw,13px); color:var(--topo); margin:7px 0 0 }
.hvg-prov{
display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center;
margin:28px 0 0; padding-top:22px; border-top:1px solid var(--lin);
}
.hvg-rej{
flex:0 0 auto; width:min(236px,100%);
display:grid; grid-template-columns:repeat(10,1fr); gap:5px;
}
.hvg-pt{ aspect-ratio:1; border-radius:50%; background:var(--cob) }
.hvg-pt.no{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--topo) }
.hvg-prov p{ flex:1 1 220px; margin:0; font-size:clamp(12.5px,2.3vw,14.5px); line-height:1.55 }
.hvg-3{ --colfe:clamp(70px,19vw,116px); --gap:clamp(12px,3vw,24px); --dia:clamp(2px,.62vw,4px) }
.hvg-lin{
position:relative; display:grid; align-items:start;
grid-template-columns:var(--colfe) 1fr; column-gap:var(--gap); margin:4px 0 0;
}
.hvg-eje{
position:absolute; left:calc(var(--colfe) + var(--gap)); top:7px; bottom:14px;
width:1px; background:var(--lin); transform-origin:top;
}
.hvg-fe{
grid-column:1; text-align:right; padding:0 0 26px;
font-size:clamp(11.5px,2.2vw,13px); line-height:1.35; color:var(--topo);
}
.hvg-qu{ grid-column:2; position:relative; padding:0 0 26px clamp(16px,3vw,24px) }
.hvg-qu::before{
content:""; position:absolute; left:-4px; top:4px; width:9px; height:9px;
border-radius:50%; background:var(--cob);
}
.hvg-qu.cae::before{ background:var(--pap); box-shadow:inset 0 0 0 1.5px var(--topo) }
.hvg-qu.fin::before{ background:var(--car) }
.hvg-qu b{ display:inline-block; font-size:clamp(13.5px,2.6vw,15.5px); line-height:1.3; margin-bottom:3px }
.hvg-qu .hvg-de{ display:block; font-size:clamp(12px,2.3vw,13.5px); line-height:1.5; color:var(--topo) }
.hvg-vig{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin:11px 0 0 }
.hvg-vb{
display:block; height:9px; min-width:2px; flex:0 0 auto;
width:calc(var(--dias) * var(--dia)); background:var(--cob); transform-origin:left;
}
.hvg-vig i{
font-style:normal; font-weight:600; font-size:clamp(11.5px,2.2vw,13px); color:var(--car);
}
.hvg-qu.cae b{ color:var(--topo) }
.hvg-qu.cae b::after{
content:""; display:block; height:1px; background:var(--topo); margin-top:-9px;
transform-origin:left;
}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.hvg-ref{ transform:scaleX(0); animation:hvgAncho .001s linear both }
.hvg-eje{ animation:hvgAlto .001s linear both }
.hvg-barra,.hvg-lle{ transform:scaleY(0); animation:hvgAlto .001s linear both }
.hvg-lle{ transform:scaleX(0); animation-name:hvgAncho }
.hvg-cif,.hvg-pie,.hvg-nota,.hvg-mas,.hvg-prov p,.hvg-fila .hvg-et,.hvg-fe,.hvg-qu,.hvg-vig i,.hvg-ref i{
opacity:0; animation:hvgEntra .001s linear both }
.hvg-pt{ opacity:0; transform:scale(.4); animation:hvgPunto .001s linear both }
.hvg-eje{ transform:scaleY(0); animation-name:hvgAlto }
.hvg-vb{ transform:scaleX(0); animation:hvgAncho .001s linear both }
.hvg-qu.cae b::after{ animation:hvgTacha .001s linear both }
.hvg-1 *{ animation-timeline:--fa } .hvg-2 *{ animation-timeline:--fb } .hvg-3 *{ animation-timeline:--fc }
.hvg-1 .hvg-ref{ animation-range:entry 24% entry 42% }
.hvg-1 .hvg-barra{ animation-range:entry 38% entry 72% }
.hvg-1 .hvg-ref i{ animation-range:entry 40% entry 56% }
.hvg-1 .hvg-cif{ animation-range:entry 60% entry 80% }
.hvg-1 .hvg-pie{ animation-range:entry 66% entry 86% }
.hvg-1 .hvg-nota{ animation-range:entry 74% entry 94% }
.hvg-2 .hvg-fila .hvg-et{ animation-range:entry 22% entry 40% }
.hvg-2 .hvg-lle{ animation-range:entry 28% entry 62% }
.hvg-2 .hvg-fila.alta .hvg-lle{ animation-range:entry 34% entry 72% }
.hvg-2 .hvg-mas{ animation-range:entry 56% entry 74% }
.hvg-2 .hvg-pt{ animation-range:entry calc(44% + var(--i)*.42%) entry calc(60% + var(--i)*.42%) }
.hvg-2 .hvg-prov p{ animation-range:entry 80% entry 96% }
.hvg-3 .hvg-eje{ animation-range:entry 18% entry 78% }
.hvg-3 .hvg-fe,.hvg-3 .hvg-qu{ animation-range:entry calc(22% + var(--n)*9%) entry calc(40% + var(--n)*9%) }
.hvg-3 .hvg-vb{ animation-range:entry calc(34% + var(--n)*9%) entry calc(54% + var(--n)*9%) }
.hvg-3 .hvg-vig i{ animation-range:entry calc(46% + var(--n)*9%) entry calc(60% + var(--n)*9%) }
.hvg-3 .hvg-qu.cae b::after{ animation-range:entry calc(40% + var(--n)*9%) entry calc(54% + var(--n)*9%) }
.hvg-3 .hvg-nota{ animation-range:entry 80% entry 96% }
}
}
@keyframes hvgAncho{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes hvgAlto { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes hvgEntra{ from{opacity:0; translate:0 6px} to{opacity:1; translate:0 0} }
@keyframes hvgPunto{ from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)} }
@keyframes hvgTacha{ from{transform:scaleX(0)} to{transform:scaleX(1)} }