
:root {
  --u: min(calc(100vw / 1440), calc(100svh / 900));          
  --m: max(16px, calc(50vw - 644 * var(--u)));               
  --tope: calc(var(--alto-nav) + env(safe-area-inset-top, 0px));   
  --alto-cartel: max(calc(900 * var(--u)), 100svh);          
}
html { scrollbar-gutter: auto; }
html.trabada { scrollbar-gutter: stable; }
body::after {
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 64px 64px;
}
.f-conecta { clip-path: inset(25% 0 25% 0 round 50% 50% 0 0); }
.portada > .marco { padding-top: var(--tope); }
@media (max-width: 860px) { .celda { margin-top: max(-5vw, -20px); } }
.cabecera { container-type: inline-size; }
.cabecera.solida { background: var(--negro); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.marca { transition: translate .9s cubic-bezier(.7, 0, .2, 1); }
.cabecera.solida .marca, body:has(.cortina) .marca {
  translate: calc(var(--m) - max(var(--borde-izq), (100cqw - 1320px) / 2 + var(--borde-izq))) 0;
}
.cabecera.libre { background: transparent; }
.servicio { position: relative; overflow: clip; isolation: isolate; border-top: 0; margin-bottom: 8px; view-timeline: --cartel block; }
.servicio .marco, .servicio.par .marco { display: block; max-width: none; padding: 0; }
.servicio .info, .cortina .servicio .info {
  position: static; top: auto; display: grid; gap: 0; justify-items: start; align-content: start;
  padding-inline: var(--m); box-sizing: border-box; min-width: 0;
}
.servicio.par .info { order: 0; }
.servicio .forma-servicio { position: absolute; z-index: 0; margin: 0; }
.servicio .ceja {
  position: relative; z-index: 4; font-family: var(--display); font-weight: 800; font-size: var(--tam-nombre);
  line-height: 1; letter-spacing: 0; color: var(--blanco);
}
.servicio h2, .tinta-texto {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em;
  line-height: .9; font-size: var(--t);
}
.servicio h2 { position: relative; z-index: 1; }
.l { display: block; white-space: nowrap; }
.sujeto { position: absolute; z-index: 3; display: block; height: auto; max-width: none; pointer-events: none; }
.tinta { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.tinta-texto { position: absolute; color: var(--negro); }
.servicio .boton.color {
  position: relative; z-index: 4; background: var(--c); border-color: var(--c); color: var(--negro);
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, calc(26 * var(--u)), 30px); line-height: 1;
  text-transform: uppercase; padding: .5em 1em; min-height: 44px; box-sizing: border-box;
}
.servicio .boton.color svg { width: .8em; height: .8em; }
.servicio .boton.color:hover { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.boton:active { scale: .97; }
@media (hover: none) {
  .servicio .boton.color:hover { background: var(--c); border-color: var(--c); color: var(--negro); }
}
.servicio[data-s="aprende"] {
  --t: calc(172 * var(--u));
  --d: min(calc(820 * var(--u)), calc(100svh - var(--tope) - 16px));   
  --visor: calc(660 * var(--u));
  --y-info: max(calc(var(--tope) + 8px), calc(84 * var(--u)));
  --aire-ceja: calc(14 * var(--u));
  --t-ponte: var(--t);                                                 
  --t-frase: calc(120 * var(--u));                                     
  --holo: #236fe2;                                                     
  --ancho-auto: min(100vw, calc(100svh * 16 / 9));
  --alto-auto: calc(var(--ancho-auto) * 9 / 16);
  --x-auto: calc(50vw - var(--ancho-auto) / 2);
  --y-auto: calc(100svh - var(--alto-auto));
  --h-persona: calc(960 * var(--u));
  --y-persona: calc(100svh - var(--h-persona) + max(var(--h-persona) * .09, 100lvh - 100svh + 4px));
  --x-cara: calc(50vw + 565 * var(--u));
  --x-disco: calc(var(--x-auto) + var(--ancho-auto) * .332);
  --y-disco: calc(var(--y-auto) + var(--alto-auto) * .618);
  --r-disco: calc(480 * var(--u));
}
.servicio[data-s="aprende"] .obras { display: none; }
.tramo-aprende { position: relative; height: calc(360svh + 100lvh); }   
.servicio[data-s="aprende"] { margin-bottom: -100lvh; }
.servicio[data-s="aprende"] ~ .servicio {
  background:
    linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px) 0 0 / 64px 64px fixed,
    linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px) 0 0 / 64px 64px fixed,
    var(--negro);
}
.aprende-fijo { position: sticky; top: 0; height: 100lvh; overflow: clip; }
.cortina .aprende-fijo { position: relative; top: auto; }   
.aprende-fijo .oculta { visibility: hidden; }
.servicio[data-s="aprende"] .info { min-height: var(--alto-cartel); padding-top: var(--y-info); }
.servicio[data-s="aprende"] .ceja { grid-row: 1; margin-bottom: var(--aire-ceja); }
.servicio[data-s="aprende"] .forma-servicio,
.servicio[data-s="aprende"] .tinta {
  width: var(--d); height: var(--d); border-radius: 50%;
  left: calc(50vw - 20 * var(--u));
  top: calc(var(--tope) + (100svh - var(--tope) - var(--d)) / 2);
}
.servicio .visor {
  position: absolute; z-index: 4; width: var(--visor); height: auto; transform-origin: 50% 50%;
  left: calc(50vw - 20 * var(--u) + var(--d) / 2 - var(--visor) / 2);
  top: calc(var(--tope) + (100svh - var(--tope)) / 2 - var(--visor) * .325);
}
.servicio[data-s="aprende"] .boton { grid-row: 3; margin-top: calc(34 * var(--u)); }
.servicio[data-s="aprende"] h2 { grid-row: 2; grid-column: 1; }
.frase {
  grid-row: 2; grid-column: 1; position: relative; z-index: 1; visibility: hidden;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .9;
  font-size: var(--t-frase);
}
.frase.ponte { font-size: var(--t-ponte); }
.aprende-fijo:not([data-escena="1"]) h2 { opacity: 0; }
.aprende-fijo[data-escena="2"] .frase.ponte,
.aprende-fijo[data-escena="3"] .frase.practica,
.aprende-fijo[data-escena="6"] .frase.haciendo { visibility: visible; }
.aprende-fijo:not([data-escena="1"]) .tinta .tinta-texto:not(.ponte) { visibility: hidden; }
.tinta .tinta-texto.ponte { font-size: var(--t-ponte); visibility: hidden; }
.aprende-fijo[data-escena="2"] .tinta .tinta-texto.ponte { visibility: visible; }
.disco-aprende .tinta-texto { font-size: var(--t-frase); }
.servicio[data-s="aprende"] .aprende-fijo[data-escena="6"] .boton {
  position: absolute; left: var(--m); margin: 0;
  top: calc(var(--y-info) + var(--tam-nombre) + var(--aire-ceja) + var(--t-frase) * 1.8 + 22 * var(--u));
}
.servicio[data-s="aprende"] .aprende-fijo[data-escena="6"] .boton.color:not(:hover) { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.aprende-taller { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.disco-aprende {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--cian);
  clip-path: circle(0px);
}
.auto-lienzo { position: absolute; z-index: 3; display: block; left: var(--x-auto); top: var(--y-auto); width: var(--ancho-auto); height: var(--alto-auto); }
.persona { position: absolute; z-index: 3; left: var(--x-cara); top: var(--y-persona); width: 0; height: var(--h-persona); }
.persona .p0 { --cx: 775; }
.persona .p1 { --cx: 920; }
.persona .p2 { --cx: 700; }
.persona .p3 { --cx: 603; }
.persona img { position: absolute; top: 0; left: calc(var(--h-persona) * var(--cx) / -1300); width: auto; height: 100%; max-width: none; }
.linea-holo { position: absolute; height: 3px; margin-top: -1px; background: var(--holo); }
.servicio[data-s="aprende"].con-rueda {
  --ancho-auto: min(90vw, 144svh);
  --x-auto: min(max(0px, calc(100vw - var(--ancho-auto) * .61 - 10 * var(--u) - var(--h-arma) * .8923)),
                calc(100vw - var(--ancho-auto) * .61 - 10 * var(--u) - var(--h-arma) * .6316));
  --x-eje: calc(var(--x-auto) + var(--ancho-auto) * .61);
  --y-eje: 70svh;
  --y-auto: calc(var(--y-eje) - var(--alto-auto) * .5083);
  --dx-fin: max(0px, calc(8px - var(--x-auto) - var(--ancho-auto) * .014));
  --dy-fin: min(0px, calc(100svh - 10px - var(--y-auto) - var(--alto-auto) * .944));
  --h-arma: calc(100lvh - 10px);
  --y-arma: 10px;
  --x-arma: calc(var(--x-eje) + 10 * var(--u) - var(--h-arma) * .1254);
  --x-disco: calc(var(--x-auto) + var(--dx-fin) + var(--ancho-auto) * .332);
  --y-disco: calc(var(--y-auto) + var(--dy-fin) + var(--alto-auto) * .618 - 120 * var(--u));
  --r-disco: calc(560 * var(--u));
}
.servicio[data-s="aprende"].con-toque {
  --h-arma: min(100vw, calc(100lvh / .82));
  --y-arma: max(calc(var(--h-arma) * -.03), calc(100lvh - var(--h-arma)));
  --x-arma: calc(100vw - var(--h-arma));
  --ancho-auto: calc(var(--h-arma) * 1.1406);
  --x-auto: calc(var(--x-arma) - var(--h-arma) * .0742);
  --y-auto: calc(var(--y-arma) + var(--h-arma) * .1877);
  --t-frase: calc(150 * var(--u));                                     
  --nariz-fin: calc(var(--m) - 16 * var(--u));                         
  --dx-fin: calc(var(--nariz-fin) - var(--x-auto) - var(--ancho-auto) * .014);
  --dy-fin: min(0px, calc(100svh - 10px - var(--y-auto) - var(--alto-auto) * .944));
  --x-disco: calc(var(--x-auto) + var(--dx-fin) + var(--ancho-auto) * .332);
  --y-disco: calc(var(--y-auto) + var(--dy-fin) + var(--alto-auto) * .618 - 120 * var(--u));
  --r-disco: calc(560 * var(--u));
}
.con-rueda .auto-lienzo, .con-toque .auto-lienzo {
  transform: translate(calc(var(--dx-fin) * var(--fin, 0)), calc(var(--dy-fin) * var(--fin, 0)));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.4%);
  mask-image: linear-gradient(to right, transparent, #000 1.4%);
}
.persona .arma { top: calc(var(--y-arma) - var(--y-persona)); left: calc(var(--x-arma) - var(--x-cara)); height: var(--h-arma); }
.arma-manos { position: absolute; z-index: 3; left: var(--x-arma); top: var(--y-arma); width: auto; height: var(--h-arma); max-width: none; }
.solo-tel { display: none; }
.servicio[data-s="juega"] {
  --t: calc(88 * var(--u));
  --lado: calc(270 * var(--u));
  --y-titulo: calc(max(var(--tope) + 8px, 72 * var(--u)) + var(--tam-nombre) + 8 * var(--u));   
  min-height: var(--alto-cartel);
}
.servicio[data-s="juega"] .info { padding-top: max(calc(var(--tope) + 8px), calc(72 * var(--u))); }
.servicio[data-s="juega"] .ceja { margin-bottom: calc(8 * var(--u)); }
.servicio[data-s="juega"] .l { display: inline; }
.servicio[data-s="juega"] h2, .servicio[data-s="juega"] .tinta-texto { white-space: nowrap; }
.servicio[data-s="juega"] .forma-servicio,
.servicio[data-s="juega"] .tinta {
  width: var(--lado); height: var(--lado);
  left: calc(var(--m) + 954 * var(--u)); top: calc(var(--y-titulo) - 10 * var(--u));
}
.servicio[data-s="juega"] .obras { display: block; padding-top: calc(4 * var(--u)); }
.servicio .juego { position: relative; z-index: 2; }
.fotos-juega {
  display: grid; grid-template-columns: calc(760 * var(--u)) calc(500 * var(--u)); grid-template-rows: auto 1fr; column-gap: calc(28 * var(--u)); align-items: start;
  padding: calc(8 * var(--u)) var(--m) calc(44 * var(--u));
}
.evento { position: relative; z-index: 3; display: block; width: 100%; height: auto; }
.evento-grande { grid-row: 1 / span 2; }
.evento-menor { margin-top: calc(26 * var(--u)); }
.servicio[data-s="juega"] .boton { justify-self: start; align-self: end; margin-top: calc(24 * var(--u)); }
.servicio[data-s="crea"] {
  --t: calc(96 * var(--u));
  --alto-tri: calc(100svh - var(--tope) - 8px);
  --ancho-tri: calc(var(--alto-tri) * 1.7);
  --x-tri: calc(50vw + 150 * var(--u));                                
  --alto-imp: min(calc(770 * var(--u)), calc(100svh - var(--tope) - 16px));
  --ancho-imp: calc(var(--alto-imp) * 774 / 900);
}
.tramo-crea { position: relative; height: 240svh; }
.crea-fijo { position: sticky; top: 0; height: 100svh; overflow: clip; }
.cortina .crea-fijo { position: relative; top: auto; }                 
.servicio[data-s="crea"] .info { padding-top: max(calc(var(--tope) + 8px), calc(72 * var(--u))); }
.servicio[data-s="crea"] .ceja { margin-bottom: calc(8 * var(--u)); }
.servicio[data-s="crea"] .l2, .servicio[data-s="crea"] .l3 { font-size: 1.134em; }
.servicio[data-s="crea"] .forma-servicio,
.servicio[data-s="crea"] .tinta {
  width: var(--ancho-tri); height: var(--alto-tri);
  left: calc(var(--x-tri) - var(--ancho-tri) / 2);
  top: calc(var(--tope) + 8px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.impresora { width: var(--ancho-imp); left: calc(50vw + 14 * var(--u)); top: calc(100svh - var(--alto-imp) - 6 * var(--u)); }
.servicio[data-s="crea"] .boton { margin-top: calc(26 * var(--u)); }
.servicio[data-s="conecta"] { --t: calc(163 * var(--u)); }
.servicio[data-s="conecta"] .info { min-height: max(calc(640 * var(--u)), calc(var(--tope) + 8px + 590 * var(--u))); padding-top: max(calc(var(--tope) + 8px), calc(110 * var(--u))); }
.servicio[data-s="conecta"] .ceja { margin-bottom: calc(26 * var(--u)); }
.servicio[data-s="conecta"] .l { display: inline; }
.servicio[data-s="conecta"] h2, .servicio[data-s="conecta"] .tinta-texto { white-space: nowrap; }
.servicio[data-s="conecta"] .forma-servicio,
.servicio[data-s="conecta"] .tinta {
  width: calc(1180 * var(--u)); height: calc(590 * var(--u));
  left: calc(50vw - 310 * var(--u)); bottom: 0;
  clip-path: circle(63.2456% at 50% 100%);
}
.servicio[data-s="conecta"] .boton { margin-top: calc(40 * var(--u)); }
.bloque { border-top: 0; }
.ia .marco {
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; box-sizing: border-box;
  min-height: 100svh; max-width: none; padding-inline: var(--m);
  padding-block: calc(var(--tope) + 40 * var(--u)) calc(72 * var(--u));
}
.ia .titulo { gap: calc(16 * var(--u)); }
.ia h2 { font-size: calc(168 * var(--u)); line-height: 1; white-space: nowrap; }
.ia .acelera, .ia .decide { display: block; }
.ia .acelera { color: var(--tenue); }
.punto { color: transparent; }
.punto::after {
  content: ""; display: inline-block; width: .36em; height: .18em; margin-left: -.2em;
  background: var(--naranja); border-radius: .18em .18em 0 0;
}
.herramientas { display: flex; justify-content: space-between; border: 0; }
.herramientas li { padding: 0; border: 0; }
.herramientas svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 26px; min-height: 26px; transition: fill .2s, transform .35s var(--curva); }
.herramientas li:hover svg { fill: var(--c); transform: scale(1.2); }
.herramientas span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contacto .marco { display: block; max-width: none; padding-inline: var(--m); padding-block: calc(70 * var(--u)); }
.contacto .titulo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(12 * var(--u)) 24px; }
.contacto h2 { grid-column: 1 / -1; grid-row: 2; font-size: calc(157 * var(--u)); line-height: 1.02; white-space: nowrap; }
.contacto .correo { grid-column: 2; grid-row: 1; }
.dir a { color: inherit; text-decoration: none; }
.dir a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacto:has(input[value="Aprende"]:checked) { --c: var(--cian); }
.contacto:has(input[value="Juega"]:checked) { --c: var(--magenta); }
.contacto:has(input[value="Crea"]:checked) { --c: var(--amarillo); }
.contacto:has(input[value="Conecta"]:checked) { --c: var(--naranja); }
.crear { color: var(--c, var(--blanco)); transition: color .25s; }
form { margin-top: calc(34 * var(--u)); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(30 * var(--u)) 0; align-items: end; }
fieldset { grid-column: 1 / -1; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.campos { display: contents; }
.campo { padding-right: 28px; }
.campo:nth-child(2) { grid-column: span 2; }
.campo input:focus { border-bottom-color: var(--c, var(--blanco)); box-shadow: 0 1px 0 var(--c, var(--blanco)); }
.campo input[aria-invalid="true"] { border-bottom-color: var(--blanco); box-shadow: 0 1px 0 var(--blanco); }
.chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea); }
.chip {
  display: grid; justify-items: start; gap: calc(16 * var(--u));
  padding: calc(20 * var(--u)) 16px calc(18 * var(--u)) 12px;
  border: 0; border-right: 1px solid var(--linea); border-radius: 0;
  font-size: var(--tam-nombre); color: var(--blanco); transition: color .25s;
}
.chip:last-child { border-right: 0; }
.chip .f {
  width: calc(160 * var(--u)); height: calc(160 * var(--u)); opacity: 1; flex: none;
  transition: background-color .25s, transform .35s var(--curva); transform-origin: 0 100%;
}
.chip .f-crea { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: calc(176 * var(--u)); }
.chip .f-conecta { clip-path: inset(50% 0 0 0 round 50% 50% 0 0); width: calc(216 * var(--u)); height: calc(216 * var(--u)); margin-top: calc(-56 * var(--u)); }
.chip:hover { color: var(--blanco); }
.chip:hover .f { transform: scale(1.06); }
.chip:has(input:checked) { border-color: var(--linea); }
form:has(.chip input:checked) .chip:not(:has(input:checked)) { color: var(--tenue); }
form:has(.chip input:checked) .chip:not(:has(input:checked)) .f { background: var(--linea); }
.envio { display: block; }
.boton.lleno {
  width: 100%; box-sizing: border-box; justify-content: space-between;
  background: var(--c, var(--blanco)); border-color: var(--c, var(--blanco));
  font-family: var(--display); font-weight: 800; font-size: var(--tam-nombre); line-height: 1;
  text-transform: uppercase; padding: .42em .9em;
}
.boton.lleno svg { width: 1em; height: 1em; }
.boton.lleno:hover { background: var(--blanco); border-color: var(--blanco); }
.estado:empty { display: none; }
.pie { border-top: 0; }
.firma { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.firma .f { width: 22px; height: 22px; }
.pie .derechos { margin-left: 28px; }
@media (max-width: 860px) and (orientation: portrait) {
  :root { --u: min(calc(100vw / 390), calc(100svh / 640)); --m: 16px; --alto-cartel: max(100svh, calc(700 * var(--u))); }   
  .servicio[data-s="aprende"] {
    --t: calc(58 * var(--u));
    --d: min(calc(540 * var(--u)), calc(100svh - 300 * var(--u)));
    --visor: calc(var(--d) * .69);
    --aire-ceja: calc(10 * var(--u));
    --t-ponte: calc(86 * var(--u));
    --t-frase: calc(64 * var(--u));
    --ancho-auto: 150vw;
    --x-auto: 0px;
    --y-auto: 18svh;
    --h-persona: 60svh;
    --x-cara: 84vw;
    --r-disco: calc(250 * var(--u));
  }
  .persona .p1 { --cx: 860; }                         
  .persona .p3 { --cx: 560; }                         
  .servicio[data-s="aprende"].con-rueda {
    --ancho-auto: min(140vw, 68svh);
    --x-eje: 72vw;
    --x-auto: calc(var(--x-eje) - var(--ancho-auto) * .61);
    --h-arma: 62svh;
    --y-arma: calc(100svh - var(--h-arma) + max(8px, 100lvh - 100svh));
    --y-eje: calc(var(--y-arma) + var(--h-arma) * .7635);
    --x-arma: calc(var(--x-eje) - var(--h-arma) * .3839);
    --y-disco: calc(var(--y-auto) + var(--dy-fin) + var(--alto-auto) * .618 - 160 * var(--u));
    --r-disco: calc(530 * var(--u));                  
  }
  .persona { z-index: 2; }
  .solo-pc { display: none; }
  .solo-tel { display: block; }
  .servicio[data-s="aprende"].con-toque {
    --t-frase: calc(64 * var(--u));
    --nariz-fin: 10px;
    --dy-fin: calc(100svh - 10px - var(--y-auto) - var(--alto-auto) * .944);   
    --y-disco: calc(var(--y-auto) + var(--dy-fin) + var(--alto-auto) * .618 - 160 * var(--u));
    --r-disco: calc(530 * var(--u));
  }
  .servicio[data-s="aprende"] .l2 { font-size: calc(78.7 * var(--u)); }
  .servicio[data-s="aprende"] .l3 { font-size: calc(86.4 * var(--u)); }
  .servicio[data-s="aprende"] .forma-servicio,
  .servicio[data-s="aprende"] .tinta { left: calc(290 * var(--u) - var(--d) / 2); top: calc(236 * var(--u)); }
  .servicio .visor { left: calc(290 * var(--u) - var(--d) * .521); top: calc(236 * var(--u) + var(--d) * .276); }
  .servicio[data-s="aprende"] .boton { position: absolute; left: var(--m); top: calc(236 * var(--u) + var(--d) - 24 * var(--u)); margin: 0; }
  .servicio[data-s="juega"] { --t: calc(67 * var(--u)); --lado: calc(124 * var(--u)); }
  .servicio[data-s="juega"] .l { display: block; }
  .servicio[data-s="juega"] .forma-servicio,
  .servicio[data-s="juega"] .tinta { left: calc(100% - var(--lado)); top: calc(var(--y-titulo) + var(--t) * 2.72 + 6 * var(--u) - var(--lado)); }
  .fotos-juega { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: calc(6 * var(--u)) 0 calc(28 * var(--u)); }
  .evento-grande { grid-row: auto; }
  .evento-menor { width: 72vw; justify-self: end; margin-top: calc(8 * var(--u)); }
  .servicio[data-s="juega"] .boton { margin: calc(16 * var(--u)) 0 0 var(--m); }
  .servicio[data-s="crea"] {
    --t: calc(52.5 * var(--u));
    --alto-tri: calc(100svh - 204 * var(--u));
    --ancho-tri: calc(var(--alto-tri) * 1.15);
    --x-tri: 62vw;
    --alto-imp: min(calc((100vw - 12px) * 900 / 774), calc(100svh - 334 * var(--u)));
  }
  .servicio[data-s="crea"] .info { padding-top: max(calc(var(--tope) + 8px), calc(84 * var(--u))); }
  .servicio[data-s="crea"] .forma-servicio,
  .servicio[data-s="crea"] .tinta { top: calc(204 * var(--u)); }
  .impresora { left: calc(50vw - var(--ancho-imp) / 2); top: calc(100svh - var(--alto-imp) - 4px); }
  .servicio[data-s="crea"] .boton { margin-top: calc(14 * var(--u)); }
  .servicio[data-s="conecta"] { --t: calc(105 * var(--u)); }
  .servicio[data-s="conecta"] .info { min-height: calc(600 * var(--u)); padding-top: max(calc(var(--tope) + 8px), calc(70 * var(--u))); }
  .servicio[data-s="conecta"] .l { display: block; }
  .servicio[data-s="conecta"] .forma-servicio,
  .servicio[data-s="conecta"] .tinta { width: calc(560 * var(--u)); height: calc(280 * var(--u)); left: calc(-85 * var(--u)); }
  .servicio[data-s="conecta"] .boton.color { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
  .ia .marco { min-height: 0; gap: calc(40 * var(--u)); padding-block: calc(72 * var(--u)) calc(64 * var(--u)); }
  .ia h2 { font-size: calc(54 * var(--u)); }
  .herramientas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 0; justify-items: center; }
  .herramientas svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .contacto h2 { font-size: calc(68 * var(--u)); white-space: normal; line-height: 1; }
  .contacto .titulo { grid-template-columns: 1fr; }
  .contacto .correo { grid-column: 1; grid-row: 3; font-size: 13px; }
  form { grid-template-columns: 1fr; }
  .campo:nth-child(2) { grid-column: auto; }
  .campo { padding-right: 0; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { border-bottom: 1px solid var(--linea); }
  .chip:nth-child(2n) { border-right: 0; }
  .chip .f { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
  .chip .f-crea { width: calc(92 * var(--u)); }
  .chip .f-conecta { width: calc(112 * var(--u)); height: calc(112 * var(--u)); margin-top: calc(-28 * var(--u)); }
  .firma { margin-left: 0; }
  .pie .derechos { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .servicio .boton.color:hover svg { animation: empuja 1.1s var(--curva) infinite; }
  @supports (animation-timeline: view()) {
    @keyframes subir { from { translate: 0 calc(90 * var(--u)); } }
    @keyframes abre-circulo { from { clip-path: circle(14%); } to { clip-path: circle(50%); } }
    @keyframes abre-cuadro { from { clip-path: inset(34%); } to { clip-path: inset(0); } }
    @keyframes abre-triangulo { from { clip-path: polygon(50% 62%, 69% 100%, 31% 100%); } to { clip-path: polygon(50% 0, 100% 100%, 0 100%); } }
    @keyframes abre-medio { from { clip-path: circle(18% at 50% 100%); } to { clip-path: circle(63.2456% at 50% 100%); } }
    .sujeto, .servicio .visor, .evento-menor { animation: subir linear both; animation-timeline: --cartel; animation-range: entry 0% entry 100%; }
    .servicio[data-s="aprende"] .forma-servicio, .servicio[data-s="aprende"] .tinta { animation: abre-circulo linear backwards; animation-timeline: --cartel; animation-range: entry 0% entry 80%; }
    .servicio[data-s="juega"] .forma-servicio, .servicio[data-s="juega"] .tinta { animation: abre-cuadro linear both; animation-timeline: --cartel; animation-range: entry 0% entry 80%; }
    .servicio[data-s="crea"] .forma-servicio, .servicio[data-s="crea"] .tinta { animation: abre-triangulo linear both; animation-timeline: --cartel; animation-range: entry 0% entry 80%; }
    .servicio[data-s="conecta"] .forma-servicio, .servicio[data-s="conecta"] .tinta { animation: abre-medio linear both; animation-timeline: --cartel; animation-range: entry 0% entry 90%; }
    .cortina * { animation: none !important; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .tramo-crea { height: auto; }
  .crea-fijo { position: relative; top: auto; }
  .tramo-aprende { height: auto; }
  .servicio[data-s="aprende"] { margin-bottom: 8px; }
  .aprende-fijo { position: relative; top: auto; height: auto; }
  .aprende-taller { position: relative; inset: auto; height: 100svh; }
  .servicio[data-s="aprende"] .boton { position: absolute; left: var(--m); top: calc(var(--alto-cartel) + var(--y-info)); margin: 0; }
}
@media (max-width: 860px) and (orientation: portrait) and (max-aspect-ratio: 3/5) {
  .servicio[data-s="aprende"].con-toque { --t-frase: calc(88 * var(--u)); }
}
@media (max-aspect-ratio: 11/10) {
  .servicio[data-s="aprende"].con-toque { --r-disco: 120svh; }
}
@media (max-height: 500px) {
  .servicio[data-s="aprende"].con-toque { --t-frase: calc(100 * var(--u)); }
}
.servicio[data-s="aprende"].con-escaner {
  --h-tec: max(calc(var(--h-arma) * .95), 50svh);
  --y-tec: calc(var(--y-arma) + var(--h-arma) * .0727);
  --x-tec: calc(var(--x-arma) + var(--h-arma) * .84 - var(--h-tec) * .29);
}
.con-escaner .persona { z-index: 2; }
.con-escaner .persona .p3 { top: calc(var(--y-tec) - var(--y-persona)); left: calc(var(--x-tec) - var(--x-cara)); height: var(--h-tec); }
.servicio[data-s="aprende"].auto-quieto {
  --dx-fin: 0px;
  --dy-fin: 0px;
  --x-esquina: calc(var(--x-auto) + var(--ancho-auto) * .648);
  --y-esquina: calc(var(--y-auto) + var(--alto-auto) * .838);
  --x-disco: calc((var(--m) + var(--x-esquina)) / 2);
  --y-disco: calc((var(--y-info) + var(--y-esquina)) / 2);
  --r-disco: calc(hypot(var(--x-esquina) - var(--m), var(--y-esquina) - var(--y-info)) * .53);
}
.servicio[data-s="aprende"].con-entrada {
  --h-entra: calc((var(--h-persona) * .49 + var(--h-arma) * .337) / 2 / .395);
  --x-entra: max(6px, calc((var(--x-cara) - var(--h-persona) * .0846 + var(--x-arma) + var(--h-arma) * .825) / 2 - var(--h-entra) * .65), calc(100vw - var(--h-entra) * .9631));   
  --y-entra: max(calc(100lvh - var(--h-entra) + 4px), calc((var(--y-persona) + var(--h-persona) * .16 + var(--y-arma) + var(--h-arma) * .248) / 2 - var(--h-entra) * .185));
}
.con-entrada .persona .p-entra { top: calc(var(--y-entra) - var(--y-persona)); left: calc(var(--x-entra) - var(--x-cara)); height: var(--h-entra); }
.servicio.con-marcas {
  --piso: calc(100lvh - 100svh);
  --forma-ancho: calc(1180 * var(--u));
  --forma-izq: calc(50vw - 310 * var(--u));
  --centro-x: calc(var(--forma-izq) + var(--forma-ancho) / 2);
  --alto-titulo: calc(163 * var(--u) * 1.8);
  --ctl-w: 700; --ctl-x: 130; --ctl-b: 120;
  --cam-w: 475; --cam-x: -300; --cam-b: 14;
}
.tramo-conecta { position: relative; height: calc(175svh + 100lvh); }
.conecta-fijo { position: sticky; top: 0; height: 100lvh; overflow: clip; background: var(--negro); }
.cortina .conecta-fijo { position: relative; top: auto; }
.cortina .mundo { display: none; }
.servicio.con-marcas .info { min-height: 0; padding-top: max(calc(var(--tope) + 8px), calc(110 * var(--u))); }
.servicio.con-marcas .ceja { margin-bottom: calc(22 * var(--u)); }
.servicio.con-marcas .l { display: block; }
.servicio.con-marcas h2 { height: var(--alto-titulo); display: flex; flex-direction: column; justify-content: flex-end; }
.servicio.con-marcas[data-s="conecta"] .forma-servicio,
.servicio.con-marcas[data-s="conecta"] .tinta { width: var(--forma-ancho); height: calc(var(--forma-ancho) / 2); left: var(--forma-izq); bottom: var(--piso); }
.servicio.con-marcas .frase-marca { position: relative; z-index: 4; margin: calc(20 * var(--u)) 0 0; max-width: calc(430 * var(--u)); font-size: clamp(15px, calc(19 * var(--u)), 21px); line-height: 1.35; color: var(--fra, var(--plata)); }
.servicio.con-marcas[data-s="conecta"] .boton.color {
  margin-top: calc(24 * var(--u)); background: var(--b-bg); border-color: var(--b-bg); color: var(--b-fg); border-radius: var(--b-radio); box-shadow: var(--b-sombra);
  font-family: var(--f-boton); font-weight: var(--p-boton); font-style: var(--e-boton); font-size: var(--t-boton); text-transform: var(--c-boton); transition: none;
}
.servicio.con-marcas[data-s="conecta"] .boton.color:hover { background: var(--b-fg); border-color: var(--b-fg); color: var(--b-bg); }
.mundo { position: absolute; inset: 0; z-index: 5; visibility: hidden; overflow: clip; background: var(--bg); }
.mundo.activo { visibility: visible; }
.mundo.entrando { visibility: visible; z-index: 6; }
.mundo-forma { position: absolute; z-index: 0; left: var(--forma-izq); bottom: var(--piso); width: var(--forma-ancho); aspect-ratio: 2 / 1; clip-path: circle(63.2456% at 50% 100%); background: var(--naranja); overflow: hidden; }
.mundo-forma img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.mundo .ceja { color: var(--tit); }
.servicio.con-marcas .mundo h2 { font-family: var(--f-titulo); font-weight: var(--p-titulo); font-style: var(--e-titulo); text-transform: var(--c-titulo); line-height: var(--a-titulo); font-size: var(--t); color: var(--tit); white-space: nowrap; }
.mundo-tinta { position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: circle(calc(var(--forma-ancho) / 2) at var(--centro-x) calc(100% - var(--piso))); }
.mundo-tinta .ceja, .mundo-tinta .frase-marca, .mundo-tinta .boton { visibility: hidden; }
.servicio.con-marcas .mundo-tinta h2 { color: var(--tin); }
.mundo-control, .control-marca, .mundo-camaleon, .camaleon-marca { position: absolute; z-index: 3; display: block; height: auto; max-width: none; pointer-events: none; }
.mundo-control, .control-marca {
  width: calc(var(--ctl-w) * var(--u)); left: calc(var(--centro-x) + (var(--ctl-x) - var(--ctl-w) / 2) * var(--u)); bottom: calc(var(--piso) + var(--ctl-b) * var(--u)); z-index: 4;
  filter: var(--p-sombra);
}
.mundo-camaleon, .camaleon-marca { width: calc(var(--cam-w) * var(--u)); left: calc(var(--centro-x) + (var(--cam-x) - var(--cam-w) / 2) * var(--u)); bottom: calc(var(--piso) + var(--cam-b) * var(--u)); }
.mundo .mundo-control { visibility: hidden; }
.mundo.activo .mundo-control.vigente, .mundo.entrando .mundo-control.vigente { visibility: visible; }
.cabecera.solida.sobre-marca { background: transparent; border-bottom-color: transparent; }
.cabecera.logo-oscuro .marca img { filter: brightness(0); }
.m-inmersus { --f-titulo: var(--display); --p-titulo: 900; --e-titulo: normal; --c-titulo: uppercase; --a-titulo: .9; --t: calc(163 * var(--u));
  --f-boton: var(--display); --p-boton: 800; --e-boton: normal; --c-boton: uppercase; --t-boton: clamp(22px, calc(26 * var(--u)), 30px); --b-bg: var(--naranja); --b-fg: var(--negro); --b-radio: 999px; --b-sombra: none;
  --p-sombra: drop-shadow(0 calc(24 * var(--u)) calc(22 * var(--u)) rgb(0 0 0 / .45)); }
.m-naranja { --f-titulo: "Unbounded", "Arial Black", sans-serif; --p-titulo: 900; --e-titulo: normal; --c-titulo: uppercase; --a-titulo: 1; --t: calc(92 * var(--u));
  --f-boton: "Unbounded", "Arial Black", sans-serif; --p-boton: 900; --e-boton: normal; --c-boton: uppercase; --t-boton: clamp(15px, calc(18 * var(--u)), 20px); --b-bg: #1537ff; --b-fg: #fff3e4; --b-radio: 999px; --b-sombra: calc(5 * var(--u)) calc(5 * var(--u)) 0 var(--negro);
  --p-sombra: drop-shadow(0 calc(40 * var(--u)) calc(26 * var(--u)) rgb(70 16 0 / .5)); }
.m-rojo { --f-titulo: "Bodoni Moda", Didot, Georgia, serif; --p-titulo: 700; --e-titulo: italic; --c-titulo: none; --a-titulo: .98; --t: calc(140 * var(--u));
  --f-boton: "Bodoni Moda", Didot, Georgia, serif; --p-boton: 700; --e-boton: italic; --c-boton: none; --t-boton: clamp(20px, calc(26 * var(--u)), 30px); --b-bg: var(--negro); --b-fg: #ffc9c2; --b-radio: 0; --b-sombra: none;
  --p-sombra: drop-shadow(calc(20 * var(--u)) calc(34 * var(--u)) calc(16 * var(--u)) rgb(70 0 0 / .45)); }
.m-morado { --f-titulo: "Shrikhand", Georgia, serif; --p-titulo: 400; --e-titulo: normal; --c-titulo: none; --a-titulo: 1; --t: calc(128 * var(--u));
  --f-boton: "Shrikhand", Georgia, serif; --p-boton: 400; --e-boton: normal; --c-boton: none; --t-boton: clamp(20px, calc(25 * var(--u)), 30px); --b-bg: #c6f21a; --b-fg: #4a12c9; --b-radio: calc(14 * var(--u)); --b-sombra: calc(5 * var(--u)) calc(5 * var(--u)) 0 #1b0750;
  --p-sombra: drop-shadow(calc(16 * var(--u)) calc(14 * var(--u)) 0 rgb(40 8 96 / .6)); }
@media (max-width: 860px) and (orientation: portrait) {
  .servicio.con-marcas {
    --forma-ancho: min(calc(680 * var(--u)), calc(2 * (100svh - 392 * var(--u))));   
    --forma-izq: calc(50vw - var(--forma-ancho) / 2);
    --alto-titulo: calc(76 * var(--u) * 1.8);
    --ctl-w: 380; --ctl-x: 40; --ctl-b: 114;
    --cam-w: 250; --cam-x: -70; --cam-b: 6;
  }
  .servicio.con-marcas .info { padding-top: max(calc(var(--tope) + 8px), calc(70 * var(--u))); }
  .servicio.con-marcas .frase-marca { max-width: min(calc(100vw - 32px), calc(320 * var(--u))); }
  .m-inmersus { --t: calc(76 * var(--u)); }
  .m-naranja { --t: calc(39 * var(--u)); }
  .m-rojo { --t: calc(66 * var(--u)); }
  .m-morado { --t: calc(60 * var(--u)); }
}
@media (max-width: 860px) and (orientation: portrait) and (min-aspect-ratio: 3/5) {
  .servicio.con-marcas { --ctl-w: 330; --ctl-x: 120; --ctl-b: 50; --cam-x: -105; }
}
@media (max-width: 860px) and (orientation: portrait) and (max-height: 700px) {
  .servicio.con-marcas { --ctl-w: 300; --ctl-x: 60; --ctl-b: 76; --cam-w: 200; --cam-x: -85; --cam-b: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .servicio.con-marcas { --piso: 0px; }
  .tramo-conecta { height: auto; }
  .conecta-fijo { position: relative; top: auto; height: auto; overflow: visible; }
  .servicio.con-marcas .conecta-fijo > .info { min-height: 100svh; }
  .servicio.con-marcas[data-s="conecta"] .forma-servicio,
  .servicio.con-marcas[data-s="conecta"] .tinta { top: calc(100svh - var(--forma-ancho) / 2); bottom: auto; }
  .mundo { position: relative; inset: auto; height: 100svh; visibility: visible; }
  .mundo .mundo-control.vigente { visibility: visible; }
  .camaleon-marca { top: calc(100svh - var(--cam-b) * var(--u) - var(--cam-w) * var(--u) * 992 / 1600); bottom: auto; }
  .control-marca { top: calc(100svh - var(--ctl-b) * var(--u) - var(--ctl-w) * var(--u)); bottom: auto; }
}
