/* sections/10-inicio.css */
#inicio {
--ax-xh: calc(var(--ax-hero-h) * .42);
--ax-x-l: calc(var(--ax-meridian) - var(--ax-xh) / 2);
position: relative; background: var(--ax-bg);
}
@media (max-width: 1279px) { #inicio { --ax-xh: calc(var(--ax-hero-h) * .38); } }
@media (max-width: 1023px) { #inicio { --ax-xh: calc(var(--ax-hero-h) * .32); } }
#inicio .ax-hero__stage { position: relative; height: var(--ax-hero-h); overflow: clip; z-index: 1; touch-action: pan-y; }
html.ax-split #inicio { height: calc(2 * var(--ax-hero-h)); display: flex; flex-direction: column; }
html.ax-split #inicio .ax-hero__stage { position: sticky; top: 0; flex: none; }
#inicio .ax-hero__layer { position: absolute; inset: 0; pointer-events: none; }
#inicio .ax-hero__layer :is(a, button) { pointer-events: auto; }
html.ax-split #inicio [data-ax-half] { will-change: transform; }
#inicio .ax-hero__ground {
position: absolute; left: calc(var(--ax-vw100) * -.2); width: calc(var(--ax-vw100) * 1.4);
top: var(--ax-datum); height: calc(var(--ax-hero-h) * 1.2);
background: var(--ax-ground); will-change: transform;
transform-origin: calc(var(--ax-meridian) + var(--ax-vw100) * .2) 0;
}
#inicio .ax-hero__topo { position: absolute; inset: 0; width: 100%; height: 100%; }
#inicio .ax-hero__topo path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
#inicio .ax-hero__topo .ax-topo-minor { stroke: var(--ax-line); }
#inicio .ax-hero__topo .ax-topo-index { stroke: var(--ax-line-strong); }
#inicio .ax-hero__cover { position: absolute; top: -1px; bottom: 0; background: var(--ax-bg); transform: scaleX(0); }
#inicio .ax-hero__cover--l { left: 0; width: calc(var(--ax-meridian) + var(--ax-vw100) * .2); transform-origin: 0 50%; }
#inicio .ax-hero__cover--r { right: 0; left: calc(var(--ax-meridian) + var(--ax-vw100) * .2); transform-origin: 100% 50%; }
#inicio .ax-hero__grid {
position: absolute; left: var(--ax-x0); width: var(--ax-content-w); top: 0; height: var(--ax-datum);
display: grid; grid-template-columns: repeat(var(--ax-cols), minmax(0, 1fr)); column-gap: var(--ax-gutter);
transform-origin: 50% 100%;
}
#inicio .ax-hero__grid i { border-left: 1px solid var(--ax-grid); border-right: 1px solid var(--ax-grid); }
@media (max-width: 1023px) { #inicio .ax-hero__grid i:nth-child(n+9) { display: none; } }
@media (max-width: 767px) { #inicio .ax-hero__grid i:nth-child(n+5) { display: none; } }
#inicio .ax-hero__merid {
position: absolute; left: var(--ax-meridian); width: 1px;
background: repeating-linear-gradient(to bottom, var(--ax-line-strong) 0 12px, transparent 12px 16px, var(--ax-line-strong) 16px 18px, transparent 18px 22px);
}
#inicio .ax-hero__merid--up { top: 110px; height: calc(var(--ax-datum) - 110px); }
#inicio .ax-hero__merid--down { top: calc(var(--ax-datum) + 1px); bottom: 0; }
@media (min-width: 768px) { #inicio .ax-hero__merid--down { bottom: calc(40px + var(--ax-tbl-h, 0px) + 8px); } }
#inicio .ax-hero__bubble--x { left: calc(var(--ax-meridian) - 12.5px); top: 84px; }
#inicio .ax-hero__edge { position: absolute; left: 0; right: 0; height: 1px; background: var(--ax-line-strong); opacity: 0; }
#inicio .ax-hero__edge--sky { top: calc(var(--ax-datum) - 1px); }
#inicio .ax-hero__edge--gnd { top: calc(var(--ax-datum) + 1px); }
html.ax-split #inicio.is-opening .ax-hero__edge { opacity: 1; }
#inicio .ax-hero__datum { position: absolute; left: 0; right: 0; top: var(--ax-datum); height: 0; border-top: 1px dashed var(--ax-line-strong); }
#inicio .ax-hero__bubble--0 { right: calc(var(--ax-frame-l) + 24px); top: -13.5px; }
#inicio .ax-hero__horizon {
position: absolute; left: calc(var(--ax-vw100) * -.2); width: calc(var(--ax-vw100) * 1.4); top: var(--ax-datum); height: 1px;
will-change: transform; transform-origin: calc(var(--ax-meridian) + var(--ax-vw100) * .2) 50%;
}
#inicio .ax-hero__laser { position: absolute; inset: 0; background: var(--ax-laser); transform-origin: calc(var(--ax-meridian) + var(--ax-vw100) * .2) 50%; }
#inicio .ax-hero__h1 .ax-pc { background: var(--ax-text); }
#inicio.ax-perturbed:not(.ax-cyan-claimed) .ax-hero__h1 .ax-pc { background: var(--ax-laser); }
#inicio .ax-hero__x { position: absolute; width: var(--ax-xh); height: var(--ax-xh); left: var(--ax-x-l); top: calc(var(--ax-datum) - var(--ax-xh) / 2); }
#inicio .ax-hero__x .ax-x__half { position: absolute; inset: 0; }
#inicio .ax-hero__beam {
left: calc(var(--ax-meridian) - var(--ax-xh) * .1955); width: calc(var(--ax-xh) * .391); top: calc(var(--ax-datum) - 2px); height: 4px;
transform-origin: 50% 66.667%; 
}
#inicio .ax-hero__spot { position: absolute; left: calc(var(--ax-meridian) - 2px); top: calc(var(--ax-datum) - 2px); width: 4px; height: 4px; background: var(--ax-laser); opacity: 0; }
#inicio .ax-hero__claim {
position: absolute; left: var(--ax-x0); width: calc(7 * var(--ax-col) + 6 * var(--ax-gutter));
bottom: calc(var(--ax-hero-h) - var(--ax-datum) + 34px);
}
#inicio .ax-hero__kicker { margin-bottom: 24px; }
#inicio .ax-hero__kicker .ax-line > .ax-kicker--rule { display: flex; }
#inicio .ax-hero__h1 {
font-size: clamp(52px, min(7.2vw, calc((var(--ax-datum) - 172px) / 2.88)), 104px);
margin-bottom: calc(-1em * ((var(--ax-lh) - 1) / 2 + var(--ax-nr-desc)));
}
#inicio .ax-hero__evidence {
position: absolute; left: var(--ax-x0); width: calc(6 * var(--ax-col) + 5 * var(--ax-gutter));
top: calc(var(--ax-datum) + 40px - .398 * 20px);
}
#inicio .ax-hero__m { overflow-x: visible; overflow-y: clip; padding: 4px; margin: -4px; }
#inicio .ax-hero__m--ctas { margin-top: 28px; }
#inicio .ax-hero__lede { max-width: 31em; }
#inicio .ax-hero__marcos {
position: absolute; left: var(--ax-x0); bottom: 40px; max-width: calc(7 * var(--ax-col) + 6 * var(--ax-gutter));
font: 400 10.5px/1.6 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text-muted);
}
#inicio .ax-hero__marcos-k { display: block; color: var(--ax-text-3); font-weight: 500; }
#inicio .ax-hero__co {
--co-x: calc(var(--ax-meridian) + var(--ax-xh) * .1955 + 6px);
--co-y: calc(var(--ax-datum) + .5px);
--co-run: calc(var(--ax-x0) + 10 * var(--ax-pitch) - var(--co-x) - 56px);
--co-max: calc(2 * var(--ax-col) + var(--ax-gutter));
}
#inicio .ax-hero__co .ax-co__label { width: var(--co-max); }
@media (max-width: 1279px) { #inicio .ax-hero__co .ax-co__label small { display: none; } #inicio .ax-hero__co .ax-co__label { width: max-content; } }
@media (max-width: 1023px) { #inicio .ax-hero__co { display: none; } }
#inicio .ax-hero__tbl { position: absolute; z-index: 3; right: calc(var(--ax-frame-l) + var(--ax-margin)); bottom: 40px; display: grid; gap: 6px; }
html.ax-split #inicio .ax-hero__tbl { position: sticky; bottom: 40px; right: auto; margin: auto calc(var(--ax-frame-l) + var(--ax-margin)) 40px auto; flex: none; }
html:not(.ax-js) #inicio .ax-hero__probe { visibility: hidden; }
#inicio .ax-hero__probe { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#inicio .ax-hero__hint { white-space: nowrap; }
#inicio .ax-hero__hint-touch, html.ax-touch #inicio .ax-hero__hint-fine { display: none; }
html.ax-touch #inicio .ax-hero__hint-touch { display: inline; }
#inicio .ax-hero__test {
position: relative; flex: none; padding: 2px 0;
font: 500 10.5px/1.45 var(--ax-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ax-text);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ax-text-3);
}
#inicio .ax-hero__test::after { content: ""; position: absolute; inset: -13px -8px; } 
#inicio .ax-hero__test:hover { text-decoration-color: var(--ax-text); }
#inicio .ax-hero__tbl { width: max(374px, calc(var(--ax-frame-l) + var(--ax-frame-w) - var(--ax-margin) - var(--ax-meridian))); }
#inicio .ax-hero__tb { --ax-tb-cols: 3; width: 100%; grid-template-columns: minmax(112px, 1fr) minmax(140px, 1.25fr) minmax(104px, 1fr); }
#inicio .ax-hero__tb dd { min-width: 0; }
@media (min-width: 768px) { #inicio .ax-hero__kicker .ax-line > span { white-space: nowrap; } }
@media (max-width: 1279px) {
#inicio :is(.ax-hero__k1, .ax-hero__k2) { display: block; }
#inicio .ax-hero__kicker .ax-line > .ax-kicker--rule { align-items: flex-start; }
#inicio .ax-hero__kicker .ax-kicker--rule::before { margin-top: .65em; }
#inicio .ax-hero__h1 { font-size: clamp(52px, min(7.2vw, calc((var(--ax-datum) - 187px) / 2.88)), 104px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
#inicio .ax-hero__marcos { max-width: calc(var(--ax-meridian) - var(--ax-x0) - 32px); }
}
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 760px) { #inicio .ax-hero__marcos { bottom: 24px; } }
@media (min-width: 1024px) { #inicio .ax-hero__ctas { flex-wrap: nowrap; } }
@media (max-width: 1279px) {
#inicio .ax-hero__tb { grid-template-columns: minmax(112px, 1fr) minmax(140px, 1.25fr); }
#inicio :is(.ax-hero__c-rev, .ax-hero__c-emision) { display: none; }
#inicio .ax-hero__tbl { width: max(270px, calc(var(--ax-frame-l) + var(--ax-frame-w) - var(--ax-margin) - var(--ax-meridian))); }
#inicio .ax-hero__probe { width: 0; min-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; }
#inicio .ax-hero__hint { white-space: normal; min-width: 100%; text-wrap: balance; }
}
@media (min-width: 768px) and (max-height: 699px) {
#inicio .ax-hero__hint { display: none; }
#inicio .ax-hero__probe { justify-content: flex-end; }
#inicio .ax-hero__marcos { bottom: 24px; }
}
@media (max-width: 1279px) { #inicio :is(.ax-crop--tl, .ax-crop--tr) { display: none; } } 
#inicio.ax-perturbed .ax-hero__laser { background: var(--ax-laser); }
html.ax-intro #inicio .ax-hero__grid { transform: scaleY(0); }
html.ax-intro #inicio .ax-hero__laser { transform: scaleX(0); }
html.ax-intro #inicio .ax-hero__cover { transform: scaleX(1); }
html.ax-intro #inicio .ax-hero__claim .ax-line > span { transform: translateY(calc(100% + .32em)); }
html.ax-intro #inicio .ax-hero__m > * { transform: translateY(calc(-100% - 8px)); }
html.ax-intro #inicio :is(.ax-hero__x, .ax-hero__beam) { opacity: 0; }
html.ax-intro #inicio :is(.ax-co__dot, .ax-hero__bubble) { transform: scale(0); }
html.ax-intro #inicio :is(.ax-co__sh) { transform: scaleX(0); }
html.ax-intro #inicio .ax-co__guide { transform: rotate(-55deg) scaleX(0); }
html.ax-intro #inicio .ax-co__label { clip-path: inset(0 100% 0 0); }
html.ax-intro #inicio [data-ax-ro] { visibility: hidden; }
html.ax-play #inicio .ax-hero__grid { animation: ax-h-grid 600ms var(--ax-ease-trazo) backwards; }
html.ax-play #inicio .ax-hero__spot { animation: ax-h-spot 520ms linear 150ms; }
html.ax-play #inicio .ax-hero__laser { animation: ax-h-laser var(--ax-dur-linea) var(--ax-ease-corte) 250ms backwards; }
html.ax-play #inicio .ax-hero__cover--l { animation: ax-h-cover var(--ax-dur-linea) var(--ax-ease-corte) 250ms backwards; }
html.ax-play #inicio .ax-hero__cover--r { animation: ax-h-cover var(--ax-dur-linea) var(--ax-ease-corte) 250ms backwards; }
html.ax-play #inicio .ax-hero__claim .ax-line > span { animation: ax-h-rise var(--ax-dur-linea) var(--ax-ease-asiento) backwards; }
html.ax-play #inicio .ax-hero__kicker .ax-line > span { animation-delay: 300ms; }
html.ax-play #inicio .ax-hero__h1 .ax-line:nth-child(1) > span { animation-delay: 390ms; }
html.ax-play #inicio .ax-hero__h1 .ax-line:nth-child(2) > span { animation-delay: 480ms; }
html.ax-play #inicio .ax-hero__h1 .ax-line:nth-child(3) > span { animation-delay: 570ms; }
html.ax-play #inicio .ax-hero__m > * { animation: ax-h-drop var(--ax-dur-reveal) var(--ax-ease-asiento) 500ms backwards; }
html.ax-play #inicio .ax-hero__m--ctas > * { animation-delay: 590ms; }
html.ax-play #inicio .ax-hero__x--v { animation: ax-h-v var(--ax-dur-linea) var(--ax-ease-asiento) 700ms backwards, ax-h-fade 300ms linear 700ms backwards; }
html.ax-play #inicio .ax-hero__x--l { animation: ax-h-l var(--ax-dur-linea) var(--ax-ease-asiento) 700ms backwards, ax-h-fade 300ms linear 700ms backwards; }
html.ax-play #inicio .ax-hero__beam { animation: ax-h-fade 1ms step-end 700ms backwards, ax-h-ignite 1220ms linear 700ms backwards; }
html.ax-play #inicio .ax-co__dot { animation: ax-h-pop 120ms var(--ax-ease-ui) 1900ms backwards; }
html.ax-play #inicio .ax-co__sh { animation: ax-h-sh 110ms linear 1900ms backwards; }
html.ax-play #inicio .ax-co__guide { animation: ax-h-guide 190ms var(--ax-ease-trazo) 2010ms backwards; }
html.ax-play #inicio .ax-co__label { animation: ax-h-label 160ms var(--ax-ease-ui) 2200ms backwards; }
html.ax-play #inicio .ax-hero__bubble { animation: ax-h-pop 240ms var(--ax-ease-asiento) 1950ms backwards; }
@keyframes ax-h-grid { from { transform: scaleY(0); } }
@keyframes ax-h-spot { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.5, .25); } }
@keyframes ax-h-laser { from { transform: scaleX(0); } }
@keyframes ax-h-cover { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ax-h-rise { from { transform: translateY(calc(100% + .32em)); } }
@keyframes ax-h-drop { from { transform: translateY(calc(-100% - 8px)); } }
@keyframes ax-h-v { from { transform: translateY(-56px); } }
@keyframes ax-h-l { from { transform: translateY(56px); } }
@keyframes ax-h-fade { from { opacity: 0; } }
@keyframes ax-h-ignite { 0%, 90.1% { transform: scaleY(.25); background-color: var(--ax-laser); } 100% { transform: none; } }
@keyframes ax-h-pop { from { transform: scale(0); } }
@keyframes ax-h-sh { from { transform: scaleX(0); } }
@keyframes ax-h-guide { from { transform: rotate(-55deg) scaleX(0); } }
@keyframes ax-h-label { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 1023px) {
#inicio .ax-hero__claim { width: calc(5 * var(--ax-col) + 4 * var(--ax-gutter)); }
#inicio .ax-hero__h1 { font-size: clamp(52px, min(8vw, calc((var(--ax-datum) - 187px) / 2.88)), 104px); }
#inicio .ax-hero__evidence { width: calc(4 * var(--ax-col) + 3 * var(--ax-gutter)); top: calc(var(--ax-datum) + 40px - .398 * 18px); }
#inicio .ax-hero__lede { font-size: 18px; }
#inicio .ax-hero__ctas { flex-direction: column; align-items: flex-start; gap: 8px; }
#inicio .ax-hero__marcos { max-width: calc(4 * var(--ax-col) + 3 * var(--ax-gutter)); }
#inicio .ax-hero__tbl { width: max(176px, calc(var(--ax-frame-l) + var(--ax-frame-w) - var(--ax-margin) - var(--ax-meridian))); }
#inicio .ax-hero__tb { grid-template-columns: minmax(0, 1fr); }
#inicio :is(.ax-hero__c-proyecto, .ax-hero__c-inc) { display: none; }
}
@media (max-width: 767px) {
#inicio {
--ax-xh: clamp(116px, calc((var(--ax-datum) - 316px) * 2), 168px);
display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip;
padding: 0 var(--ax-margin) 40px; min-height: var(--ax-hero-h);
}
#inicio .ax-hero__stage, #inicio .ax-hero__sky-front, #inicio .ax-hero__ground-front { display: contents; }
#inicio .ax-hero__ground { height: auto; bottom: -1px; }
#inicio .ax-hero__claim {
position: relative; left: auto; bottom: auto; width: auto; grid-row: 1; z-index: 2;
height: var(--ax-datum); padding-top: calc(var(--ax-nav-h) + 28px);
}
#inicio .ax-hero__kicker .ax-kicker--rule::before { display: none; }
#inicio .ax-hero__h1 { font-size: 52px; margin-bottom: 0; }
#inicio .ax-hero__evidence { position: relative; left: auto; top: auto; width: auto; grid-row: 2; z-index: 2; margin-top: calc(var(--ax-xh) / 2 + 24px - .398 * 18px); }
#inicio .ax-hero__lede { font-size: 18px; }
#inicio .ax-hero__cta-x { display: none; }
#inicio .ax-hero__m--ctas { margin-top: 20px; }
#inicio .ax-hero__ctas { flex-direction: column; align-items: stretch; gap: 4px; }
#inicio .ax-hero__cta { width: 100%; white-space: nowrap; text-align: center; letter-spacing: .12em; padding: 17px 16px; }
#inicio .ax-hero__cta2 { align-self: flex-start; }
#inicio .ax-hero__tbl { position: relative; right: auto; bottom: auto; grid-row: 3; margin-top: 40px; z-index: 2; justify-self: start; width: auto; }
#inicio .ax-hero__probe { flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; }
#inicio .ax-hero__hint { white-space: normal; }
#inicio .ax-hero__tb { grid-template-columns: repeat(2, auto); width: auto; }
#inicio :is(.ax-hero__c-proyecto, .ax-hero__c-inc, .ax-hero__c-emision, .ax-hero__c-rev) { display: none; }
#inicio .ax-hero__c-hora { grid-column: auto; }
#inicio .ax-hero__marcos { position: relative; left: auto; bottom: auto; grid-row: 4; margin-top: 28px; z-index: 2; max-width: none; }
#inicio :is(.ax-hero__co, .ax-hero__bubble, .ax-hero__merid--up, .ax-crop--bl, .ax-crop--br) { display: none; }
#inicio .ax-hero__grid { left: var(--ax-margin); width: calc(var(--ax-vw100) - 2 * var(--ax-margin)); }
}