/* ===================================================================== Pro Racing Park · hoja principal Orden: reset · tipografía · layout · header · hero · componentes · secciones · utilidades · accesibilidad Regla de movimiento: solo transform y opacity. Nada que dispare layout. ===================================================================== */ /* ---------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* El `display` de una clase le gana al `hidden` del navegador: sin esto, un elemento con clase propia no se oculta al ponerle el atributo. Pasaba con el botón de agendar en el calendario de una reserva cancelada. */ [hidden]{display:none !important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--negro);color:var(--texto); font-family:var(--cuerpo);font-size:var(--t-cuerpo);line-height:1.55; overflow-x:hidden;-webkit-font-smoothing:antialiased; } img,video{display:block;max-width:100%;height:auto} button,input,select{font:inherit;color:inherit} a{color:inherit} /* ----------------------------------------------------------- tipografía */ /* Evogria tiene las mayúsculas más altas que Barlow: con line-height .86 las líneas se tocaban. */ /* Todo lo que usa la display y no es un heading: hereda el tracking del body (cero) y queda suelto al lado de los titulos. Se agrupa aca en vez de repetir la declaracion en cada bloque. */ .fila .nom,.pasos-lista b,.grupo-campos legend,.casilla .t,.tg-saldo, .numero b,.tarjeta-wa .t,.dia .num,.opcion-prod .nom,.hv-marco .t{ letter-spacing:var(--tr-titulo)} h1,h2,h3,h4{font-family:var(--display);color:var(--blanco);text-transform:uppercase;font-weight:900;letter-spacing:var(--tr-sub);line-height:1} h1{font-size:var(--t-hero);line-height:.96;letter-spacing:var(--tr-hero)} h2{font-size:var(--t-h2);letter-spacing:var(--tr-titulo)} h3{font-size:var(--t-h3);font-weight:700;line-height:1;letter-spacing:var(--tr-titulo)} h4{font-size:var(--t-h4);font-weight:700;letter-spacing:.02em} p{max-width:56ch} .lead{font-size:var(--t-lead);color:var(--texto);font-weight:400;max-width:52ch;line-height:1.5} /* Los dos tienen margen cero, asi que un h2 seguido de su bajada quedaba pegado: cero pixeles entre un titular de 60 px y un parrafo de 18. Se arregla en la hoja y no bloque por bloque para que no se pueda volver a olvidar en el proximo que se agregue. */ h2 + .lead{margin-top:var(--e-4)} @media(min-width:760px){h2 + .lead{margin-top:var(--e-5)}} .micro{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-ancho);font-weight:600; text-transform:uppercase;color:var(--humo)} .am{color:var(--amarillo)} .contorno{color:transparent;-webkit-text-stroke-color:rgba(255,255,255,.62); /* El trazo tiene que escalar con la letra: 1,5px fijos a 46px cierran los contraojos de la A y la P, y a 150px se ven anemicos. En em sigue al tamaño, con tope para que no engorde en el hero grande. */ -webkit-text-stroke-width:clamp(1px,.022em,2.6px); text-shadow:0 2px 22px rgba(0,0,0,.7)} /* sobre video en movimiento el trazo solo no garantiza contraste */ /* --------------------------------------------------------------- layout */ .seccion{position:relative;z-index:var(--z-contenido);padding:var(--e-9) var(--borde-pagina)} @media(min-width:900px){.seccion{padding:var(--e-10) var(--borde-pagina)}} .contenedor{max-width:var(--ancho-max);margin-inline:auto} /* --------------------------------------------------------------- header */ .progreso{position:fixed;inset:0 0 auto 0;height:2px;z-index:var(--z-progreso); transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--amarillo),var(--amarillo-alto))} /* El botón "Reservar" se comprimía a "RESER" en celular: el menú tiene margin-left:auto y crece, y el botón no declaraba flex, así que cedía ancho por debajo de su texto y overflow:hidden lo escondía. */ .header{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);display:flex;align-items:center;gap:var(--e-5); padding:var(--e-4) var(--borde-pagina); transition:background var(--d-media) var(--ease)} .header>.btn-chico{flex:0 0 auto} /* Escalera de botones: amarillo solido = reservar, y toda accion primaria de una seccion contorno blanco = alternativa secundaria (las tarjetas de precio no destacadas, y el CTA del header cuando NO es reservar) Decision de Juan (2026-09-08): **el boton Reservar va siempre destacado**, en el header incluido. Se probo con el header en contorno para que no compitiera con el CTA del hero; gana la conversion. Por eso el selector mira el destino y no la clase: en /reservar el CTA del header es WhatsApp, y ese si queda en contorno para no pelearle a los pasos de la reserva, que son la accion real de esa pagina. */ .header>.btn-chico[href="/reservar"]{ /* sobre el video el amarillo solo no separa: la sombra lo despega del cuadro */ box-shadow:0 6px 22px -8px rgba(0,0,0,.85)} .header>.btn-chico:not([href="/reservar"]){ background:transparent;color:var(--blanco); box-shadow:inset 0 0 0 1px rgba(255,255,255,.42); transition:box-shadow var(--d-rapida) var(--ease),color var(--d-rapida) var(--ease), background var(--d-rapida) var(--ease)} .header>.btn-chico:not([href="/reservar"])::before{background:var(--amarillo)} .header>.btn-chico:not([href="/reservar"]):hover, .header>.btn-chico:not([href="/reservar"]):focus-visible{color:#000;box-shadow:inset 0 0 0 1px var(--amarillo)} /* Sobre el video el header no tiene fondo y el menu va en gris (--humo): donde el clip se pone claro, "Como llegar" queda ilegible. Se ve solo en escritorio, porque en mobile el menu no esta. Un velo que baja del borde superior lo resuelve sin ensuciar el hero: se disuelve antes de llegar al titular. Va con z-index -1 para quedar detras del logo, del menu y del boton, no encima. */ .header:not(.solido)::before{content:"";position:absolute;inset:0 0 auto 0; height:190%;pointer-events:none;z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.26) 52%,transparent)} .header.solido{background:rgba(5,5,5,.86);backdrop-filter:blur(14px); border-bottom:1px solid var(--linea);padding:11px var(--borde-pagina)} /* El logo es la versión negativa de la carpeta de marca (fondo oscuro), nunca el nombre escrito con la tipografía del sitio. */ .logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto} .logo img{height:36px;width:auto;display:block} .header.solido .logo img{height:32px} .pie .logo img{height:44px} @media(max-width:420px){ .header .logo img{height:28px} .header{gap:var(--e-3);padding-inline:16px} .btn-chico{padding:9px 13px;font-size:13px} } .menu{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:var(--tr-medio);text-transform:uppercase} .menu a{color:var(--humo);text-decoration:none;position:relative;padding-bottom:3px;transition:color var(--d-rapida)} .menu a::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--amarillo); transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)} .menu a:hover,.menu a:focus-visible{color:var(--blanco)} .menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%} /* La tira que se arrastraba en horizontal se reemplazo por una hamburguesa (decision de Juan, 2026-09-08). El problema no era que no entrara: era que el corte con degradado del ultimo item no se leia como "esto se arrastra" sino como un "ATRACC..." roto, es decir, como un error de maquetado. En un header, un item cortado siempre va a parecer un error antes que una invitacion a deslizar. Lo que queda fijo en mobile es lo que decidio Juan: el logo (la vuelta al inicio), Karting (el producto principal, a un toque) y Reservar. El resto entra al panel. */ .menu{display:flex;gap:var(--e-5);margin-left:auto;min-width:0} /* 40px de alto: objetivo táctil cómodo, no el mínimo de 24 de WCAG */ .menu a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;white-space:nowrap} .atajo,.hamburguesa,.menu-movil{display:none} @media(max-width:759px){ .menu{display:none} /* Karting a la vista, con el mismo registro que tenia dentro del menu: el atajo no es un boton, es el mismo enlace en otro lugar. */ .atajo{display:inline-flex;align-items:center;min-height:44px;margin-left:auto; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:var(--tr-medio); text-transform:uppercase;color:var(--humo);text-decoration:none;white-space:nowrap; transition:color var(--d-rapida)} .atajo:hover,.atajo:focus-visible{color:var(--blanco)} .hamburguesa{display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:44px;height:44px;margin-right:calc(var(--e-3) * -1); background:none;border:0;padding:0;cursor:pointer;color:var(--blanco)} /* Dos barras y no tres: la X sale de girarlas, sin una tercera que haya que desvanecer justo cuando las otras dos estan rotando. */ .hb-barras{display:block;position:relative;width:20px;height:12px} .hb-barras i{position:absolute;left:0;right:0;height:2px;background:currentColor; transition:transform var(--d-rapida) var(--ease)} .hb-barras i:first-child{top:0} .hb-barras i:last-child{bottom:0} .hamburguesa[aria-expanded="true"] .hb-barras i:first-child{transform:translateY(5px) rotate(45deg)} .hamburguesa[aria-expanded="true"] .hb-barras i:last-child{transform:translateY(-5px) rotate(-45deg)} /* El panel baja del header, no tapa la pantalla entera: el logo y Reservar tienen que seguir a mano con el menu abierto. */ /* Opaco, no translucido: a 97,5% de opacidad el video se seguia colando detras de los enlaces y el panel parecia mal pintado. La translucidez tiene sentido en una barra fija sobre contenido; en un menu que hay que leer, no. Y sin `backdrop-filter`, que sobre un fondo opaco es trabajo de GPU que no se ve. */ .menu-movil:not([hidden]){display:block;position:absolute;top:100%;left:0;right:0; background:#0A0A0B; border-top:1px solid var(--linea);border-bottom:1px solid var(--linea); padding:var(--e-3) var(--borde-pagina) var(--e-4)} .menu-movil nav{display:grid} .menu-movil a{display:flex;align-items:center;min-height:54px; font-family:var(--cond);font-size:21px;font-weight:700;text-transform:uppercase; letter-spacing:var(--tr-sub);color:var(--blanco);text-decoration:none; border-bottom:1px solid var(--linea)} .menu-movil a:last-child{border-bottom:0} .menu-movil a:active{color:var(--amarillo)} /* Con el panel abierto el header tiene que dejar de ser transparente: si no, el panel opaco arranca justo debajo de una franja con el video corriendo atras, y los dos pedazos no se leen como una sola pieza. */ .header:has(.hamburguesa[aria-expanded="true"]){ background:#0A0A0B;backdrop-filter:none} } /* Abajo de 360 px los cuatro elementos no entran y el que se cortaba era Reservar. Cede el atajo de Karting, que es el unico de los tres que ya esta adentro del panel: el logo y Reservar no se tocan nunca. */ @media(max-width:359px){.atajo{display:none}} @media(max-width:759px) and (prefers-reduced-motion:no-preference){ .menu-movil:not([hidden]){animation:menuBaja .2s var(--ease)} @keyframes menuBaja{from{opacity:0;transform:translateY(-8px)}} } /* --------------------------------------------------------------- botones */ .btn{display:inline-block;font-family:var(--cond);font-weight:900;text-transform:uppercase; letter-spacing:.05em;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden; transition:transform var(--d-media) var(--ease),box-shadow var(--d-media) var(--ease)} .btn>span{position:relative;z-index:2} .btn::before{content:"";position:absolute;inset:0;background:var(--amarillo-oscuro); transform:translateY(101%);transition:transform .4s var(--ease)} .btn:hover::before,.btn:focus-visible::before{transform:translateY(0)} .btn-pri{background:var(--amarillo);color:#000;font-size:18px;padding:14px 32px;font-style:italic} .btn-pri:hover{box-shadow:0 14px 40px -14px var(--amarillo-55)} .btn-chico{background:var(--amarillo);color:#000;font-size:14px;padding:10px 18px;letter-spacing:.06em;font-style:italic} .btn-fantasma{border:1px solid var(--linea-clara);color:var(--blanco);font-size:15px;padding:13px 26px; background:transparent} .btn-fantasma::before{background:var(--amarillo)} .btn-fantasma:hover{color:#000;border-color:var(--amarillo)} /* ------------------------------------------------- formularios (comunes) Los usan reservar, grupos y el dashboard. Viven acá y no en la hoja de reservas justamente porque son de los tres. */ .entrada{display:grid;gap:6px} .entrada label{font-family:var(--mono);font-size:11px;letter-spacing:var(--tr-ancho); text-transform:uppercase;color:var(--humo)} .entrada input[type="text"],.entrada input[type="tel"], .entrada input[type="email"],.entrada input[type="password"]{ background:var(--carbon);border:1px solid var(--linea);padding:13px 14px;font-size:18px; color:var(--blanco);width:100%;transition:border-color var(--d-rapida)} .entrada input:focus{border-color:var(--amarillo);outline:none} .entrada .pista{font-size:13px;color:var(--humo)} .entrada.error input{border-color:var(--rojo)} .entrada .msg-error{color:var(--rojo);font-size:13px;display:none} .entrada.error .msg-error{display:block} .interruptor{display:flex;gap:var(--e-3);align-items:flex-start;cursor:pointer; border:1px solid var(--linea);padding:var(--e-4);transition:border-color var(--d-rapida)} .interruptor:hover{border-color:var(--linea-clara)} .interruptor input{width:20px;height:20px;accent-color:var(--amarillo);margin-top:2px;flex:0 0 auto} .interruptor .t{color:var(--blanco);font-size:16px;display:block} .interruptor .s{color:var(--humo);font-size:14px;display:block;margin-top:2px} .cantidad{display:flex;align-items:center;gap:var(--e-4);margin-top:var(--e-6); border:1px solid var(--linea);padding:var(--e-4) var(--e-5)} .cantidad .et{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-ancho); text-transform:uppercase;color:var(--humo)} .contador{display:flex;align-items:center;gap:var(--e-4);margin-left:auto} .contador button{width:38px;height:38px;border:1px solid var(--linea-clara);background:transparent; color:var(--blanco);font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto; transition:border-color var(--d-rapida),color var(--d-rapida)} .contador button:hover:not(:disabled){border-color:var(--amarillo);color:var(--amarillo)} .contador button:disabled{opacity:.3;cursor:not-allowed} .contador output{font-family:var(--mono);font-size:26px;min-width:2ch;text-align:center;color:var(--blanco)} .aviso-error{border:1px solid var(--rojo);background:rgba(226,58,46,.08);padding:var(--e-4); color:#FFC9C4;font-size:15px;margin-bottom:var(--e-4);display:none} .aviso-error.visible{display:block} .acciones{display:flex;gap:var(--e-3);margin-top:var(--e-6);flex-wrap:wrap} .btn:disabled{opacity:.4;cursor:not-allowed} .btn:disabled::before{display:none} /* ------------------------------------------------------------------ hero */ .hero{position:relative;min-height:100svh;display:grid;align-content:end; grid-template-columns:minmax(0,1fr);padding:110px var(--borde-pagina) 0;overflow:hidden} /* Sin el minmax(0,1fr) un dato largo de la ficha ("420 m por vuelta", que no se parte) ensanchaba la columna del grid y corría todo el hero a la derecha en un celular. */ .hero>*{min-width:0} .hero-medio{position:absolute;inset:0;z-index:var(--z-fondo);overflow:hidden} /* el recibe el parallax, la el zoom de entrada: dos transform independientes que no se pisan */ .hero-medio picture{display:block;width:100%;height:100%;will-change:transform} .hero-medio img,.hero-medio video{width:100%;height:118%;object-fit:cover;object-position:52% 42%; filter:grayscale(1) contrast(1.35) brightness(.52);transform:scale(1.14);opacity:0;will-change:transform} .cargado .hero-medio img,.cargado .hero-medio video{animation:entrarMedio 2.2s var(--ease) forwards} @keyframes entrarMedio{to{transform:scale(1);opacity:1}} /* el amarillo de marca tiñe los negros de la foto sin colorearla entera */ .hero-medio::before{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:color; background:linear-gradient(180deg,rgba(245,197,24,.16),rgba(245,197,24,.05))} .hero-medio::after{content:"";position:absolute;inset:0;z-index:3; background:linear-gradient(180deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.30) 32%,rgba(5,5,5,.72) 68%,var(--negro) 100%), radial-gradient(ellipse 75% 60% at 70% 40%,transparent,rgba(5,5,5,.75))} /* hero de página interior: más bajo, el contenido empieza antes */ .hero-interior{min-height:76svh} /* el cartel de foto pendiente va arriba, no atrás del titular */ .hero-medio .sin-foto{place-items:start center;padding-top:120px} .hero-interior h1{font-size:clamp(40px,8.5vw,104px)} .ficha .v{font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:0;white-space:normal} .rejilla{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0; background-image:linear-gradient(var(--linea) 1px,transparent 1px), linear-gradient(90deg,var(--linea) 1px,transparent 1px); background-size:100% 64px,64px 100%; mask-image:radial-gradient(ellipse 95% 75% at 50% 40%,#000 25%,transparent 100%)} .cargado .rejilla{animation:aparecer 1.6s .5s ease forwards} @keyframes aparecer{to{opacity:.55}} .barrido{position:absolute;inset:0 0 auto 0;height:2px;z-index:5;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,var(--amarillo-55),transparent)} .cargado .barrido{animation:barrer 1.5s .35s var(--ease) forwards} @keyframes barrer{0%{opacity:0;transform:translateY(0)}12%{opacity:1}100%{opacity:0;transform:translateY(100svh)}} .hero-cont{position:relative;z-index:6;display:grid;gap:var(--e-5);padding-bottom:var(--e-5)} .kicker{max-width:none;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-ancho); text-transform:uppercase;color:var(--humo);display:flex;align-items:center;gap:10px} .kicker::before{content:"";width:0;height:1px;background:var(--linea-clara)} /* Sobre negro macizo el gris alcanza, pero el kicker del hero cae encima del video: cuando el cuadro se aclara, --humo se pierde. Ahi sube a --texto y la linea al blanco tenue. Antes esto lo tapaba el amarillo, que se leia siempre; la solucion no es devolver el acento, es subir la luminancia del neutro. */ .hero-cont .kicker{color:var(--texto);text-shadow:0 1px 12px rgba(0,0,0,.75)} .hero-cont .kicker::before{background:rgba(255,255,255,.45)} .cargado .kicker::before{animation:linea .9s .3s var(--ease) forwards} @keyframes linea{to{width:38px}} .kicker span{opacity:0} .cargado .kicker span{animation:fundir .7s .45s ease forwards} @keyframes fundir{to{opacity:1}} h1 .ln{display:block;overflow:hidden} h1 .ln i{display:block;text-wrap:balance;font-style:normal;transform:translateY(105%);will-change:transform} .cargado h1 .ln i{animation:subirLinea var(--d-entrada) var(--ease) forwards} .cargado h1 .ln:nth-child(1) i{animation-delay:.42s} .cargado h1 .ln:nth-child(2) i{animation-delay:.53s} .cargado h1 .ln:nth-child(3) i{animation-delay:.64s} @keyframes subirLinea{to{transform:translateY(0)}} .entra{opacity:0;transform:translateY(16px)} .cargado .entra{animation:subirSuave .9s var(--ease) forwards} .cargado .d1{animation-delay:.95s} .cargado .d2{animation-delay:1.08s} @keyframes subirSuave{to{opacity:1;transform:none}} /* ------------------------------------------------------- reserva rápida */ .reserva-rapida{display:grid;gap:10px;grid-template-columns:1fr;max-width:840px} @media(min-width:700px){.reserva-rapida{grid-template-columns:1.1fr 1fr auto}} .campo{border:1px solid var(--linea);background:rgba(13,13,14,.72);backdrop-filter:blur(8px); padding:11px 14px;cursor:pointer;transition:border-color var(--d-media),background var(--d-media)} .campo:hover,.campo:focus-within{border-color:var(--amarillo-55);background:rgba(20,20,21,.85)} .campo .et{display:block;font-family:var(--mono);font-size:11px;letter-spacing:var(--tr-ancho); text-transform:uppercase;color:var(--humo)} .campo select,.campo input{display:block;width:100%;background:transparent;border:0;outline:0; font-size:19px;font-weight:700;color:var(--blanco);margin-top:3px;text-overflow:ellipsis} .campo select option{background:var(--carbon)} /* ------------------------------------------------------------ datos vivos */ .datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--linea); background:rgba(5,5,5,.55);backdrop-filter:blur(8px);position:relative;z-index:6} @media(min-width:760px){.datos{grid-template-columns:repeat(4,minmax(0,1fr))}} /* La ficha de las páginas interiores tiene textos ("Carreras por equipos") que no entran en una celda de celular sin partirse. El nowrap es solo para la barra de datos vivos de la home. */ .datos.ficha .v{white-space:normal;font-size:clamp(18px,4.6vw,22px)} /* con cantidad impar de datos la última celda ocupa la fila entera, así la grilla no termina en un borde colgando */ .datos.ficha .dato:last-child:nth-child(odd){grid-column:1/-1} @media(min-width:760px){ .datos.ficha .dato:last-child:nth-child(odd){grid-column:auto} .datos.ficha .dato:last-child:nth-child(4n+1){grid-column:1/-1} .datos.ficha .dato:last-child:nth-child(4n+3){grid-column:span 2} /* seis datos (karting, paintball): la segunda fila son dos mitades, no dos celdas y un hueco */ .datos.ficha .dato:nth-last-child(2):nth-child(4n+1), .datos.ficha .dato:last-child:nth-child(4n+2){grid-column:span 2} } .dato{padding:var(--e-4) 18px 14px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea); opacity:0;transform:translateY(14px)} /* Antes el ultimo dato terminaba de aparecer a los 2,24 s. Ahi estan el precio y la proxima carrera, o sea lo que la persona vino a buscar. Ahora cierra a los 0,72 s, con el mismo escalonado. */ .cargado .dato{animation:subirSuave .46s var(--ease) forwards} .cargado .dato:nth-child(1){animation-delay:.5s} .cargado .dato:nth-child(2){animation-delay:.555s} .cargado .dato:nth-child(3){animation-delay:.61s} .cargado .dato:nth-child(4){animation-delay:.665s} .dato .k{font-family:var(--mono);font-size:11px;letter-spacing:var(--tr-ancho);text-transform:uppercase;color:var(--humo)} .dato .v{font-family:var(--cuerpo);font-size:var(--t-dato);font-weight:600;line-height:1.1;margin-top:6px; font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--blanco)} .dato .v small{font-size:12px;color:var(--humo);font-weight:400} .dato.vivo .v{color:var(--amarillo)} .dato .v.destello{animation:destello .5s ease} @keyframes destello{0%{color:#fff;text-shadow:0 0 26px rgba(245,197,24,.9)}100%{text-shadow:none}} .pulso{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amarillo); margin-right:7px;vertical-align:middle;animation:latir 1.6s ease-in-out infinite} @keyframes latir{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--amarillo-55)} 50%{opacity:.55;box-shadow:0 0 0 7px rgba(245,197,24,0)}} /* --------------------------------------------------------- tira de carreras */ .tira{position:relative;z-index:var(--z-contenido);display:flex;overflow-x:auto;cursor:grab; border-block:1px solid var(--linea);background:var(--negro); scrollbar-width:none;scroll-snap-type:x proximity} .tira.agarrando{cursor:grabbing} .tira::-webkit-scrollbar{display:none} .carrera{flex:0 0 auto;min-width:158px;padding:var(--e-4) 18px;border-right:1px solid var(--linea); scroll-snap-align:start;font-family:var(--mono);font-size:12px;color:var(--humo); position:relative;overflow:hidden;user-select:none;text-decoration:none;display:block} .carrera::before{content:"";position:absolute;inset:0;background:var(--carbon); transform:translateY(101%);transition:transform .22s var(--ease)} @media (hover:hover) and (pointer:fine){ .carrera:hover::before{transform:translateY(0)} } .carrera:focus-visible::before{transform:translateY(0)} /* La tira se arrastra: el scale al presionar confirma que la tarjeta recibio el toque y no que se movio la tira entera. */ a.carrera{transition:transform var(--d-presion) var(--ease)} a.carrera:active{transform:scale(.98)} .carrera>*{position:relative;z-index:2} .carrera b{display:block;font-family:var(--cuerpo);font-size:26px;color:var(--blanco);font-weight:600} .carrera .libre{color:var(--amarillo)} .carrera .pilotos{display:block;margin-top:6px;font-size:11px;color:var(--humo-tenue); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px} .carrera.llena{opacity:.3;pointer-events:none} .carrera.llena b{text-decoration:line-through} /* Estado de carga y salida por si la consulta falla o no queda ninguna carrera hoy. Ocupa el mismo lugar que una tarjeta real para que la tira no cambie de alto cuando llegan los datos. */ .carrera.invita b{color:var(--blanco)} /* -------------------------------------------------------------- atracciones */ .mundo{margin-top:var(--e-7)} .mundo-cab{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--linea);padding-bottom:10px} .mundo-cab .n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-ancho); text-transform:uppercase;color:var(--humo-tenue)} .fila{display:grid;grid-template-columns:44px 1fr auto;gap:var(--e-4);align-items:center; padding:22px 4px;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit; position:relative;transition:transform var(--d-presion) var(--ease)} .fila::before{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--amarillo-08),transparent 55%);transition:transform .24s var(--ease)} .fila>*{position:relative;z-index:2} .fila .idx{font-family:var(--mono);font-size:var(--t-micro);color:var(--humo)} .fila .nom{font-size:var(--t-h3);text-transform:uppercase;font-weight:700;line-height:1; color:var(--blanco);transition:color .16s var(--ease)} /* El corrimiento al pasar el mouse se hacia con padding-left, que obliga al navegador a recalcular el layout en cada cuadro. Con transform va por GPU y ademas se mueve solo el bloque izquierdo: la ficha de la derecha queda anclada, que es lo que hace que la fila "se abra" en vez de deslizarse entera. */ .fila .idx,.fila .nom{transition:transform .2s var(--ease),color .16s var(--ease)} @media (hover:hover) and (pointer:fine){ .fila:hover::before{transform:scaleX(1)} .fila:hover .idx,.fila:hover .nom{transform:translateX(14px)} .fila:hover .nom{color:var(--amarillo)} } .fila:focus-visible::before{transform:scaleX(1)} .fila:focus-visible .idx,.fila:focus-visible .nom{transform:translateX(14px)} .fila:focus-visible .nom{color:var(--amarillo)} .fila:active{transform:scale(.99)} .fila .meta{font-family:var(--mono);font-size:var(--t-micro);color:var(--humo);text-align:right;letter-spacing:0} /* mobile: el nombre necesita el ancho entero, la ficha baja debajo */ @media(max-width:719px){ .fila{grid-template-columns:32px 1fr;row-gap:6px} .fila .meta{grid-column:2;text-align:left;font-size:10px;line-height:1.45} } .consulta-dato{font-family:var(--cuerpo);font-size:15px;line-height:1.55;color:var(--humo);max-width:56ch;margin-top:var(--e-4)} .consulta-dato a{color:var(--amarillo);text-decoration:underline;text-underline-offset:3px} .pendiente{display:inline-flex;gap:6px;font-family:var(--mono);font-size:11px;color:var(--humo); border:1px dashed var(--linea-clara);padding:4px 8px;letter-spacing:var(--tr-medio);text-transform:uppercase} /* #6C6C6C daba 3,70:1 sobre el negro: no pasaba AA. --humo da 5,65:1 y sigue callado */ /* miniatura que sigue al cursor */ .mini{position:fixed;inset:0 auto auto 0;width:230px;height:150px;z-index:var(--z-mini);pointer-events:none; opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg);border:1px solid var(--linea); overflow:hidden;background:var(--carbon); transition:opacity .14s var(--ease),transform .14s var(--ease)} /* Entra un poco mas lenta de lo que sale: aparecer merece un instante, desaparecer tiene que ser inmediato o se ve arrastrada por el cursor. */ .mini.visible{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg); transition:opacity .2s var(--ease),transform .2s var(--ease)} .mini img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.75)} .sin-foto{width:100%;height:100%;display:grid;place-items:center;font-family:var(--mono);font-size:10px; letter-spacing:var(--tr-ancho);text-transform:uppercase;color:var(--humo); background:repeating-linear-gradient(45deg,#111113 0 10px,#0B0B0C 10px 20px)} @media(hover:none){.mini{display:none}} /* -------------------------------------------------------------- productos */ .precios{display:grid;gap:1px;margin-top:var(--e-6);background:var(--linea);border:1px solid var(--linea)} @media(min-width:840px){.precios{grid-template-columns:repeat(3,1fr)}} .precio{background:var(--negro);padding:var(--e-6) var(--e-5);display:flex;flex-direction:column; transition:background var(--d-media)} .precio:hover{background:var(--carbon)} .precio .nom{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:26px;color:var(--blanco)} .precio .val{font-family:var(--cuerpo);font-size:36px;font-weight:600;color:var(--blanco); margin:var(--e-3) 0 var(--e-2);font-variant-numeric:tabular-nums} .precio .desc{color:var(--texto);font-size:16px;flex:1} .precio .cta{margin-top:var(--e-5)} .precio.destacado{outline:1px solid var(--amarillo-55);outline-offset:-1px} /* ------------------------------------------------------ tira de vueltas Una marca por vuelta. Las tres fases suben de altura y de brillo: reconocimiento bajo y apagado, clasificacion media, carrera al maximo. Esa progresion ES la carrera, y de paso deja comparar los tres productos sin leer: se cuentan las marcas. Todo en neutros. El amarillo sigue reservado para los CTA: si trece marcas por tarjeta fueran amarillas, el acento dejaria de senalar. */ .vueltas{display:flex;align-items:flex-end;justify-content:flex-start;gap:3px; margin:var(--e-4) 0 8px;height:20px} /* Los envoltorios de fase no pintan caja: con `display:contents` los pasan a ser items directos de la tira. Es lo que hace que TODAS las marcas midan lo mismo sin importar cuantas tenga cada fase; anidadas, la fase con mas vueltas se comia mas hueco interno y sus marcas salian mas angostas que las de al lado. */ .fase{display:contents} /* Las marcas crecen hasta 10 px y se achican hasta 3 si la tarjeta es angosta. La version anterior las fijaba en 3 px con 2 de separacion: veinte vueltas entraban en 60 px dentro de una tarjeta de 285, y eso no se lee como veinte marcas contables sino como una mancha rayada, indistinguible de un error de render. El ancho fijo tambien deja que el largo de la tira signifique algo: Sprint es visiblemente mas corta que Extreme. */ .vueltas i{display:block;flex:1 1 4px;max-width:10px;min-width:3px; height:8px;background:var(--linea-clara)} .fase.clasi i{height:13px;background:var(--humo-tenue)} .fase.corre i{height:20px;background:var(--humo)} /* El corte entre fases: tres veces el aire que hay entre marcas de la misma fase, que es lo que deja ver los tres tramos como tres tramos. */ .fase + .fase > i:first-child{margin-left:9px} /* En la tarjeta destacada la carrera se ve entera: es la que el parque quiere vender y la unica donde el contraste extra se justifica. */ .precio.destacado .fase.corre i{background:var(--blanco)} .vueltas-pie{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-ancho);text-transform:uppercase; color:var(--humo-tenue);margin:0 0 var(--e-3)} .vueltas-pie b{color:var(--humo);font-weight:700} .etiqueta{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-ancho);text-transform:uppercase; color:#000;background:var(--amarillo);padding:3px 8px;align-self:flex-start;margin-bottom:var(--e-3)} /* ------------------------------------------------------------------ FAQ */ .faq{border-top:1px solid var(--linea);margin-top:var(--e-6)} .faq details{border-bottom:1px solid var(--linea)} .faq summary{padding:20px 4px;cursor:pointer;list-style:none;display:flex;justify-content:space-between; gap:var(--e-4);font-family:var(--cond);font-size:22px;font-weight:700;color:var(--blanco); text-transform:uppercase;transition:color var(--d-rapida)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);color:var(--humo);font-size:22px; transition:transform var(--d-media) var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--amarillo)} .faq .r{padding:0 4px 22px;color:var(--texto);max-width:70ch} /* ------------------------------------------------------------- revelado */ .rv{opacity:0;transform:translateY(26px); transition:opacity var(--d-lenta) var(--ease),transform var(--d-lenta) var(--ease)} .rv.visible{opacity:1;transform:none} /* ------------------------------------------------------------------- pie La bandera a cuadros del pie no es decoracion: el pie es el final del recorrido, y ahi el cuadriculado significa llegada. Por eso es mas fuerte contra el borde de abajo y se disuelve hacia arriba, en vez de estar repartido parejo. Tres decisiones que separan esto de un fondo cuadriculado cualquiera: 1. Cuadros GRANDES (34 px). Chicos leen como la grilla de transparencia de Photoshop, que es exactamente lo que no queremos. 2. Contraste minimo: #17171A sobre #0D0D0D son trece puntos de luminancia. Se percibe como textura, no se mira como dibujo, y el texto encima sigue teniendo el contraste de siempre porque el patron casi no sube el brillo del fondo. 3. Sin imagen. Es un gradiente conico repetido: pesa cero, no pixela en pantallas retina y no suma un pedido HTTP. El patron va en un ::before absoluto con mascara vertical, y el contenido se sube con z-index para que nunca quede una letra sobre un borde de cuadro. */ .pie{border-top:1px solid var(--linea); /* El relleno de abajo es mas grande que el de arriba a proposito: esos 104 px de mas son la zona de la bandera. Sin espacio propio, el cuadriculado corre por detras de los enlaces legales y compite con ellos; con espacio propio, se lee como una franja de llegada. */ padding:var(--e-7) var(--borde-pagina) calc(var(--e-6) + 104px); display:grid;gap:var(--e-6);position:relative;z-index:var(--z-contenido); overflow:hidden} .pie::before{ content:"";position:absolute;inset:auto 0 0 0;height:132px;pointer-events:none; /* La bandera ondula, y por eso no es un gradiente: un gradiente es recto. El SVG lo genera `node _build/bandera.mjs`, que deforma la grilla con un seno cuya amplitud crece hacia abajo: contra el borde de la página flamea y hacia arriba se aquieta al mismo tiempo que se disuelve en el negro. El mosaico mide una onda entera, así que `repeat-x` no deja costura. NO editar el data URI a mano: correr el script, que lo reemplaza. */ /* BANDERA-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22720%22%20height%3D%22210%22%20viewBox%3D%220%200%20720%20210%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Cpath%20d%3D%22M0.0%200.0L23.5%200.0L23.5%2030.2L0.0%2030.0Z%22%2F%3E%3Cpath%20d%3D%22M53.5%200.0L90.0%200.0L90.0%2030.4L53.5%2030.3Z%22%2F%3E%3Cpath%20d%3D%22M126.5%200.0L156.5%200.0L156.5%2030.2L126.5%2030.3Z%22%2F%3E%3Cpath%20d%3D%22M180.0%200.0L203.5%200.0L203.5%2029.8L180.0%2030.0Z%22%2F%3E%3Cpath%20d%3D%22M233.5%200.0L270.0%200.0L270.0%2029.6L233.5%2029.7Z%22%2F%3E%3Cpath%20d%3D%22M306.5%200.0L336.5%200.0L336.5%2029.8L306.5%2029.7Z%22%2F%3E%3Cpath%20d%3D%22M360.0%200.0L383.5%200.0L383.5%2030.2L360.0%2030.0Z%22%2F%3E%3Cpath%20d%3D%22M413.5%200.0L450.0%200.0L450.0%2030.4L413.5%2030.3Z%22%2F%3E%3Cpath%20d%3D%22M486.5%200.0L516.5%200.0L516.5%2030.2L486.5%2030.3Z%22%2F%3E%3Cpath%20d%3D%22M540.0%200.0L563.5%200.0L563.5%2029.8L540.0%2030.0Z%22%2F%3E%3Cpath%20d%3D%22M593.5%200.0L630.0%200.0L630.0%2029.6L593.5%2029.7Z%22%2F%3E%3Cpath%20d%3D%22M666.5%200.0L696.5%200.0L696.5%2029.8L666.5%2029.7Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2030.2L53.5%2030.3L53.5%2061.3L23.5%2060.7Z%22%2F%3E%3Cpath%20d%3D%22M90.0%2030.4L126.5%2030.3L126.5%2061.3L90.0%2061.5Z%22%2F%3E%3Cpath%20d%3D%22M156.5%2030.2L180.0%2030.0L180.0%2060.0L156.5%2060.7Z%22%2F%3E%3Cpath%20d%3D%22M203.5%2029.8L233.5%2029.7L233.5%2058.7L203.5%2059.3Z%22%2F%3E%3Cpath%20d%3D%22M270.0%2029.6L306.5%2029.7L306.5%2058.7L270.0%2058.5Z%22%2F%3E%3Cpath%20d%3D%22M336.5%2029.8L360.0%2030.0L360.0%2060.0L336.5%2059.3Z%22%2F%3E%3Cpath%20d%3D%22M383.5%2030.2L413.5%2030.3L413.5%2061.3L383.5%2060.7Z%22%2F%3E%3Cpath%20d%3D%22M450.0%2030.4L486.5%2030.3L486.5%2061.3L450.0%2061.5Z%22%2F%3E%3Cpath%20d%3D%22M516.5%2030.2L540.0%2030.0L540.0%2060.0L516.5%2060.7Z%22%2F%3E%3Cpath%20d%3D%22M563.5%2029.8L593.5%2029.7L593.5%2058.7L563.5%2059.3Z%22%2F%3E%3Cpath%20d%3D%22M630.0%2029.6L666.5%2029.7L666.5%2058.7L630.0%2058.5Z%22%2F%3E%3Cpath%20d%3D%22M696.5%2029.8L720.0%2030.0L720.0%2060.0L696.5%2059.3Z%22%2F%3E%3Cpath%20d%3D%22M0.0%2060.0L23.5%2060.7L23.5%2091.7L0.0%2090.0Z%22%2F%3E%3Cpath%20d%3D%22M53.5%2061.3L90.0%2061.5L90.0%2093.3L53.5%2092.9Z%22%2F%3E%3Cpath%20d%3D%22M126.5%2061.3L156.5%2060.7L156.5%2091.7L126.5%2092.9Z%22%2F%3E%3Cpath%20d%3D%22M180.0%2060.0L203.5%2059.3L203.5%2088.3L180.0%2090.0Z%22%2F%3E%3Cpath%20d%3D%22M233.5%2058.7L270.0%2058.5L270.0%2086.7L233.5%2087.1Z%22%2F%3E%3Cpath%20d%3D%22M306.5%2058.7L336.5%2059.3L336.5%2088.3L306.5%2087.1Z%22%2F%3E%3Cpath%20d%3D%22M360.0%2060.0L383.5%2060.7L383.5%2091.7L360.0%2090.0Z%22%2F%3E%3Cpath%20d%3D%22M413.5%2061.3L450.0%2061.5L450.0%2093.3L413.5%2092.9Z%22%2F%3E%3Cpath%20d%3D%22M486.5%2061.3L516.5%2060.7L516.5%2091.7L486.5%2092.9Z%22%2F%3E%3Cpath%20d%3D%22M540.0%2060.0L563.5%2059.3L563.5%2088.3L540.0%2090.0Z%22%2F%3E%3Cpath%20d%3D%22M593.5%2058.7L630.0%2058.5L630.0%2086.7L593.5%2087.1Z%22%2F%3E%3Cpath%20d%3D%22M666.5%2058.7L696.5%2059.3L696.5%2088.3L666.5%2087.1Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2091.7L53.5%2092.9L53.5%20125.1L23.5%20122.9Z%22%2F%3E%3Cpath%20d%3D%22M90.0%2093.3L126.5%2092.9L126.5%20125.1L90.0%20125.9Z%22%2F%3E%3Cpath%20d%3D%22M156.5%2091.7L180.0%2090.0L180.0%20120.0L156.5%20122.9Z%22%2F%3E%3Cpath%20d%3D%22M203.5%2088.3L233.5%2087.1L233.5%20114.9L203.5%20117.1Z%22%2F%3E%3Cpath%20d%3D%22M270.0%2086.7L306.5%2087.1L306.5%20114.9L270.0%20114.1Z%22%2F%3E%3Cpath%20d%3D%22M336.5%2088.3L360.0%2090.0L360.0%20120.0L336.5%20117.1Z%22%2F%3E%3Cpath%20d%3D%22M383.5%2091.7L413.5%2092.9L413.5%20125.1L383.5%20122.9Z%22%2F%3E%3Cpath%20d%3D%22M450.0%2093.3L486.5%2092.9L486.5%20125.1L450.0%20125.9Z%22%2F%3E%3Cpath%20d%3D%22M516.5%2091.7L540.0%2090.0L540.0%20120.0L516.5%20122.9Z%22%2F%3E%3Cpath%20d%3D%22M563.5%2088.3L593.5%2087.1L593.5%20114.9L563.5%20117.1Z%22%2F%3E%3Cpath%20d%3D%22M630.0%2086.7L666.5%2087.1L666.5%20114.9L630.0%20114.1Z%22%2F%3E%3Cpath%20d%3D%22M696.5%2088.3L720.0%2090.0L720.0%20120.0L696.5%20117.1Z%22%2F%3E%3Cpath%20d%3D%22M0.0%20120.0L23.5%20122.9L23.5%20154.6L0.0%20150.0Z%22%2F%3E%3Cpath%20d%3D%22M53.5%20125.1L90.0%20125.9L90.0%20159.2L53.5%20158.0Z%22%2F%3E%3Cpath%20d%3D%22M126.5%20125.1L156.5%20122.9L156.5%20154.6L126.5%20158.0Z%22%2F%3E%3Cpath%20d%3D%22M180.0%20120.0L203.5%20117.1L203.5%20145.4L180.0%20150.0Z%22%2F%3E%3Cpath%20d%3D%22M233.5%20114.9L270.0%20114.1L270.0%20140.8L233.5%20142.0Z%22%2F%3E%3Cpath%20d%3D%22M306.5%20114.9L336.5%20117.1L336.5%20145.4L306.5%20142.0Z%22%2F%3E%3Cpath%20d%3D%22M360.0%20120.0L383.5%20122.9L383.5%20154.6L360.0%20150.0Z%22%2F%3E%3Cpath%20d%3D%22M413.5%20125.1L450.0%20125.9L450.0%20159.2L413.5%20158.0Z%22%2F%3E%3Cpath%20d%3D%22M486.5%20125.1L516.5%20122.9L516.5%20154.6L486.5%20158.0Z%22%2F%3E%3Cpath%20d%3D%22M540.0%20120.0L563.5%20117.1L563.5%20145.4L540.0%20150.0Z%22%2F%3E%3Cpath%20d%3D%22M593.5%20114.9L630.0%20114.1L630.0%20140.8L593.5%20142.0Z%22%2F%3E%3Cpath%20d%3D%22M666.5%20114.9L696.5%20117.1L696.5%20145.4L666.5%20142.0Z%22%2F%3E%3Cpath%20d%3D%22M23.5%20154.6L53.5%20158.0L53.5%20191.5L23.5%20186.6Z%22%2F%3E%3Cpath%20d%3D%22M90.0%20159.2L126.5%20158.0L126.5%20191.5L90.0%20193.2Z%22%2F%3E%3Cpath%20d%3D%22M156.5%20154.6L180.0%20150.0L180.0%20180.0L156.5%20186.6Z%22%2F%3E%3Cpath%20d%3D%22M203.5%20145.4L233.5%20142.0L233.5%20168.5L203.5%20173.4Z%22%2F%3E%3Cpath%20d%3D%22M270.0%20140.8L306.5%20142.0L306.5%20168.5L270.0%20166.8Z%22%2F%3E%3Cpath%20d%3D%22M336.5%20145.4L360.0%20150.0L360.0%20180.0L336.5%20173.4Z%22%2F%3E%3Cpath%20d%3D%22M383.5%20154.6L413.5%20158.0L413.5%20191.5L383.5%20186.6Z%22%2F%3E%3Cpath%20d%3D%22M450.0%20159.2L486.5%20158.0L486.5%20191.5L450.0%20193.2Z%22%2F%3E%3Cpath%20d%3D%22M516.5%20154.6L540.0%20150.0L540.0%20180.0L516.5%20186.6Z%22%2F%3E%3Cpath%20d%3D%22M563.5%20145.4L593.5%20142.0L593.5%20168.5L563.5%20173.4Z%22%2F%3E%3Cpath%20d%3D%22M630.0%20140.8L666.5%20142.0L666.5%20168.5L630.0%20166.8Z%22%2F%3E%3Cpath%20d%3D%22M696.5%20145.4L720.0%20150.0L720.0%20180.0L696.5%20173.4Z%22%2F%3E%3Cpath%20d%3D%22M0.0%20180.0L23.5%20186.6L23.5%20219.0L0.0%20210.0Z%22%2F%3E%3Cpath%20d%3D%22M53.5%20191.5L90.0%20193.2L90.0%20228.0L53.5%20225.6Z%22%2F%3E%3Cpath%20d%3D%22M126.5%20191.5L156.5%20186.6L156.5%20219.0L126.5%20225.6Z%22%2F%3E%3Cpath%20d%3D%22M180.0%20180.0L203.5%20173.4L203.5%20201.0L180.0%20210.0Z%22%2F%3E%3Cpath%20d%3D%22M233.5%20168.5L270.0%20166.8L270.0%20192.0L233.5%20194.4Z%22%2F%3E%3Cpath%20d%3D%22M306.5%20168.5L336.5%20173.4L336.5%20201.0L306.5%20194.4Z%22%2F%3E%3Cpath%20d%3D%22M360.0%20180.0L383.5%20186.6L383.5%20219.0L360.0%20210.0Z%22%2F%3E%3Cpath%20d%3D%22M413.5%20191.5L450.0%20193.2L450.0%20228.0L413.5%20225.6Z%22%2F%3E%3Cpath%20d%3D%22M486.5%20191.5L516.5%20186.6L516.5%20219.0L486.5%20225.6Z%22%2F%3E%3Cpath%20d%3D%22M540.0%20180.0L563.5%20173.4L563.5%20201.0L540.0%20210.0Z%22%2F%3E%3Cpath%20d%3D%22M593.5%20168.5L630.0%20166.8L630.0%20192.0L593.5%20194.4Z%22%2F%3E%3Cpath%20d%3D%22M666.5%20168.5L696.5%20173.4L696.5%20201.0L666.5%20194.4Z%22%2F%3E%3Cpath%20d%3D%22M23.5%20219.0L53.5%20225.6L53.5%20255.6L23.5%20249.0Z%22%2F%3E%3Cpath%20d%3D%22M90.0%20228.0L126.5%20225.6L126.5%20255.6L90.0%20258.0Z%22%2F%3E%3Cpath%20d%3D%22M156.5%20219.0L180.0%20210.0L180.0%20240.0L156.5%20249.0Z%22%2F%3E%3Cpath%20d%3D%22M203.5%20201.0L233.5%20194.4L233.5%20224.4L203.5%20231.0Z%22%2F%3E%3Cpath%20d%3D%22M270.0%20192.0L306.5%20194.4L306.5%20224.4L270.0%20222.0Z%22%2F%3E%3Cpath%20d%3D%22M336.5%20201.0L360.0%20210.0L360.0%20240.0L336.5%20231.0Z%22%2F%3E%3Cpath%20d%3D%22M383.5%20219.0L413.5%20225.6L413.5%20255.6L383.5%20249.0Z%22%2F%3E%3Cpath%20d%3D%22M450.0%20228.0L486.5%20225.6L486.5%20255.6L450.0%20258.0Z%22%2F%3E%3Cpath%20d%3D%22M516.5%20219.0L540.0%20210.0L540.0%20240.0L516.5%20249.0Z%22%2F%3E%3Cpath%20d%3D%22M563.5%20201.0L593.5%20194.4L593.5%20224.4L563.5%20231.0Z%22%2F%3E%3Cpath%20d%3D%22M630.0%20192.0L666.5%20194.4L666.5%20224.4L630.0%20222.0Z%22%2F%3E%3Cpath%20d%3D%22M696.5%20201.0L720.0%20210.0L720.0%20240.0L696.5%20231.0Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* BANDERA-FIN */ background-size:auto;background-repeat:repeat-x;background-position:center bottom; /* De invisible arriba a casi lleno abajo. El ultimo tramo no llega a opacidad total: una bandera que termina en un borde duro se ve pegada, y esta tiene que parecer que sale de la oscuridad. */ -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.92) 100%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.92) 100%)} /* El contenido siempre por encima del patron. */ .pie>*{position:relative;z-index:1} @media(max-width:520px){ .pie{padding-bottom:calc(var(--e-6) + 78px)} /* En mobile se achica el mosaico entero, nunca su alto suelto: el SVG tiene proporcion propia y deformarlo aplana la onda. `auto 150px` mantiene la relacion y deja cuadros de ~21 px. */ .pie::before{height:104px;background-size:auto 150px} } /* ------------------------------------------------ texturas por atraccion El pie cierra TODAS las paginas con la bandera a cuadros: esa es la identidad del parque entero. Arriba del contenido, en cambio, cada pagina abre con lo suyo, y por eso la banda va justo debajo del hero, donde la pagina termina de decir que es. Mismo registro que la bandera y por los mismos motivos: un unico color casi negro (#232327 sobre el #0D0D0D del sitio), enmascarado hacia abajo, y nunca amarillo, que esta reservado para los CTA. La banda es un div vacio con altura propia en vez de un ::before sobre la primera seccion: asi no pelea con el padding de ningun bloque, no queda nunca detras de un titulo y se puede sacar de una pagina borrando una linea. Los dibujos los genera `node _build/texturas.mjs`; NO editar los data URI a mano. */ .textura{height:96px;pointer-events:none; background-repeat:repeat-x;background-position:center top;background-size:auto} /* La mascara arranca en .72 y no en .95. En un celular se ve un pedazo del mosaico y el motivo es un susurro; en escritorio se repite tres o cuatro veces y ese mismo valor lo convertia en una franja decorativa que le ganaba al titulo de abajo. La textura tiene que estar, no protagonizar. */ .textura{ -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.32) 50%,transparent 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.32) 50%,transparent 100%)} /* En mobile se achica el mosaico entero, nunca su alto suelto: deformarlo arruina las formas redondas, que son la mitad de los motivos. */ @media(max-width:520px){.textura{height:72px;background-size:auto 96px}} /* Menos movimiento tambien es menos ruido visual: si alguien pidio calma, la decoracion sobra. */ @media(prefers-reduced-motion:reduce){.textura{display:none}} .textura--huellas{ /* TEX-huellas-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22120%22%20viewBox%3D%220%200%20360%20120%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Crect%20x%3D%220.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22360.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%2240.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%2280.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22120.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22160.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22200.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22240.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22280.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22320.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22360.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%220.0%22%20y%3D%2218.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%2220.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22380.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%2260.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22100.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22140.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22180.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22220.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22260.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22300.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22340.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22-20.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%22380.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Crect%20x%3D%2220.0%22%20y%3D%2278.0%22%20width%3D%2227%22%20height%3D%2220%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M-40.0%2070.0L-20.0%2044.0L0.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M320.0%2070.0L340.0%2044.0L360.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M0.0%2070.0L20.0%2044.0L40.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M360.0%2070.0L380.0%2044.0L400.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M40.0%2070.0L60.0%2044.0L80.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M80.0%2070.0L100.0%2044.0L120.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M120.0%2070.0L140.0%2044.0L160.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M160.0%2070.0L180.0%2044.0L200.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M200.0%2070.0L220.0%2044.0L240.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M240.0%2070.0L260.0%2044.0L280.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M280.0%2070.0L300.0%2044.0L320.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M320.0%2070.0L340.0%2044.0L360.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M360.0%2070.0L380.0%2044.0L400.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M0.0%2070.0L20.0%2044.0L40.0%2070.0%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-huellas-FIN */ } .textura--pintura{ /* TEX-pintura-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22520%22%20height%3D%22120%22%20viewBox%3D%220%200%20520%20120%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Cpath%20d%3D%22M325.2%2070.9L322.2%2081.9L311.0%2084.0L302.8%2086.5L295.2%2082.2L285.5%2076.6L290.1%2066.5L292.2%2056.0L303.2%2058.0L310.9%2058.1L315.4%2064.2Z%22%2F%3E%3Cpath%20d%3D%22M275.7%2075.3L274.5%2076.7L273.0%2077.2L270.9%2076.6L271.5%2074.4L273.0%2073.2L274.9%2073.5Z%22%2F%3E%3Cpath%20d%3D%22M338.2%2080.8L337.3%2082.3L335.8%2082.2L334.8%2081.4L334.6%2080.1L335.8%2079.5L337.3%2079.2Z%22%2F%3E%3Cpath%20d%3D%22M310.3%2099.9L310.3%20102.9L307.1%20103.5L305.4%20101.1L303.8%2097.9L307.3%2097.1L309.9%2097.5Z%22%2F%3E%3Cpath%20d%3D%22M332.3%2068.6L331.3%2070.3L329.3%2071.1L328.4%2069.3L328.1%2067.8L329.3%2066.1L331.2%2066.9Z%22%2F%3E%3Cpath%20d%3D%22M281.1%2034.7L278.0%2037.0L275.3%2038.6L273.3%2036.1L272.2%2032.8L275.4%2031.5L279.2%2030.9Z%22%2F%3E%3Cpath%20d%3D%22M284.3%20101.9L282.2%20104.2L279.6%20105.4L278.0%20103.0L278.3%20100.8L279.5%2098.0L281.9%20100.0Z%22%2F%3E%3Cpath%20d%3D%22M159.7%2082.1L153.5%2086.5L149.8%2089.2L144.9%2093.5L139.6%2090.1L136.6%2085.0L134.9%2078.6L141.8%2076.6L144.7%2069.3L150.4%2073.6L155.9%2076.0Z%22%2F%3E%3Cpath%20d%3D%22M155.5%20111.5L154.6%20114.0L151.6%20116.1L149.8%20112.9L149.9%20110.2L151.8%20107.8L155.8%20107.6Z%22%2F%3E%3Cpath%20d%3D%22M170.7%2067.0L170.7%2068.4L169.1%2068.5L167.8%2067.8L167.8%2066.1L169.2%2065.8L170.7%2065.5Z%22%2F%3E%3Cpath%20d%3D%22M138.9%2067.2L137.0%2070.3L133.6%2071.2L130.7%2069.0L131.8%2065.9L133.6%2063.2L137.4%2063.6Z%22%2F%3E%3Cpath%20d%3D%22M175.1%2060.5L178.0%2075.4L166.1%2085.0L152.3%2078.7L140.3%2077.4L131.8%2067.3L128.9%2052.9L134.0%2036.4L152.0%2040.5L164.9%2038.6L178.5%2045.4Z%22%2F%3E%3Cpath%20d%3D%22M203.6%20103.0L202.4%20104.0L201.3%20104.0L200.4%20103.6L199.9%20102.2L201.4%20102.0L202.4%20102.0Z%22%2F%3E%3Cpath%20d%3D%22M171.0%20113.6L170.3%20114.6L169.1%20115.7L168.4%20114.2L168.3%20113.0L169.1%20111.6L170.7%20112.2Z%22%2F%3E%3Cpath%20d%3D%22M143.7%2014.0L142.8%2015.5L141.1%2016.1L140.5%2014.5L140.3%2013.4L141.3%2012.6L142.5%2012.9Z%22%2F%3E%3Cpath%20d%3D%22M210.7%2016.9L209.2%2018.9L206.9%2020.2L204.4%2018.5L204.7%2015.5L207.1%2014.7L209.4%2014.7Z%22%2F%3E%3Cpath%20d%3D%22M208.6%2049.8L200.1%2055.5L196.4%2061.0L189.5%2062.1L182.4%2060.0L180.8%2052.9L177.8%2045.8L180.2%2037.0L188.8%2032.8L195.9%2039.6L201.3%2043.3Z%22%2F%3E%3Cpath%20d%3D%22M176.6%2040.7L175.7%2042.9L173.3%2043.4L171.1%2042.1L171.6%2039.6L173.0%2036.8L176.0%2038.2Z%22%2F%3E%3Cpath%20d%3D%22M228.1%2044.0L225.9%2045.7L223.8%2047.2L222.1%2045.2L222.6%2043.1L223.8%2040.7L226.8%2041.2Z%22%2F%3E%3Cpath%20d%3D%22M210.1%2031.3L209.1%2033.6L206.6%2033.9L204.0%2032.8L203.1%2029.3L206.2%2026.7L209.4%2028.6Z%22%2F%3E%3Cpath%20d%3D%22M469.8%2042.9L460.8%2059.0L444.3%2061.5L433.2%2060.8L415.1%2066.9L412.6%2049.8L416.8%2037.4L423.7%2029.0L431.7%2014.3L448.4%2015.4L463.6%2025.1Z%22%2F%3E%3Cpath%20d%3D%22M404.5%203.5L402.0%205.3L399.7%207.2L397.3%205.1L397.2%201.9L399.7%20-0.4L402.3%201.3Z%22%2F%3E%3Cpath%20d%3D%22M466.5%2067.3L466.8%2069.5L464.6%2069.2L463.3%2068.1L463.4%2066.5L464.6%2065.7L466.4%2065.5Z%22%2F%3E%3Cpath%20d%3D%22M389.6%208.9L389.4%2011.5L386.6%2012.1L384.5%2010.3L384.3%207.4L386.8%206.3L388.7%207.2Z%22%2F%3E%3Cpath%20d%3D%22M110.9%2044.6L105.9%2060.2L95.4%2075.0L77.1%2075.3L61.4%2067.7L63.3%2049.9L55.8%2037.0L66.6%2027.4L76.9%2012.7L89.0%2028.1L101.2%2031.9Z%22%2F%3E%3Cpath%20d%3D%22M107.2%20-14.5L107.3%20-11.4L104.5%20-12.4L102.5%20-13.3L102.6%20-15.6L104.3%20-17.3L106.4%20-16.3Z%22%2F%3E%3Cpath%20d%3D%22M14.5%2032.9L13.4%2036.4L9.5%2037.8L6.5%2034.9L7.7%2031.5L9.8%2029.4L12.7%2030.3Z%22%2F%3E%3Cpath%20d%3D%22M45.6%2090.1L44.2%2093.5L40.7%2093.6L39.2%2091.2L37.4%2088.2L40.8%2087.0L43.3%2087.8Z%22%2F%3E%3Cpath%20d%3D%22M33.0%2093.9L31.7%2095.5L29.9%2096.3L28.7%2094.7L28.2%2092.8L29.7%2090.5L32.5%2091.3Z%22%2F%3E%3Cpath%20d%3D%22M360.8%2080.2L355.6%2085.4L353.3%2092.9L345.8%2092.0L341.1%2087.6L338.2%2083.0L336.2%2076.9L341.6%2073.5L346.3%2072.0L353.6%2067.0L358.9%2072.9Z%22%2F%3E%3Cpath%20d%3D%22M326.4%2087.8L324.9%2089.7L322.5%2091.4L321.3%2088.8L321.5%2086.9L322.8%2085.5L325.4%2085.2Z%22%2F%3E%3Cpath%20d%3D%22M375.9%2080.1L374.7%2082.7L371.9%2083.4L369.5%2081.6L370.2%2078.9L372.1%2077.8L374.3%2078.0Z%22%2F%3E%3Cpath%20d%3D%22M351.1%20112.8L351.0%20115.1L348.8%20114.3L347.5%20113.6L347.2%20111.8L348.8%20111.2L350.4%20111.3Z%22%2F%3E%3Cpath%20d%3D%22M340.4%2093.7L340.0%2096.0L337.5%2096.4L335.9%2094.7L335.4%2092.3L337.4%2090.6L340.0%2091.3Z%22%2F%3E%3Cpath%20d%3D%22M358.0%20101.2L356.8%20102.6L355.3%20103.1L354.2%20102.0L354.1%20100.4L355.3%2099.2L356.6%20100.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-pintura-FIN */ } .textura--tazas{ /* TEX-tazas-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22460%22%20height%3D%22120%22%20viewBox%3D%220%200%20460%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%223%22%3E%3Ccircle%20cx%3D%22399.0%22%20cy%3D%2255.7%22%20r%3D%2227.2%22%2F%3E%3Ccircle%20cx%3D%22399.0%22%20cy%3D%2255.7%22%20r%3D%2219.6%22%2F%3E%3Ccircle%20cx%3D%22408.5%22%20cy%3D%2261.1%22%20r%3D%2223.9%22%2F%3E%3Ccircle%20cx%3D%22439.3%22%20cy%3D%2256.3%22%20r%3D%2219.2%22%2F%3E%3Ccircle%20cx%3D%22439.3%22%20cy%3D%2256.3%22%20r%3D%2213.8%22%2F%3E%3Ccircle%20cx%3D%22-20.7%22%20cy%3D%2256.3%22%20r%3D%2219.2%22%2F%3E%3Ccircle%20cx%3D%22-20.7%22%20cy%3D%2256.3%22%20r%3D%2213.8%22%2F%3E%3Ccircle%20cx%3D%22163.9%22%20cy%3D%2245.1%22%20r%3D%2228.5%22%2F%3E%3Ccircle%20cx%3D%22163.9%22%20cy%3D%2245.1%22%20r%3D%2220.5%22%2F%3E%3Ccircle%20cx%3D%22417.5%22%20cy%3D%2249.1%22%20r%3D%2225.1%22%2F%3E%3Ccircle%20cx%3D%22140.0%22%20cy%3D%2272.2%22%20r%3D%2220.3%22%2F%3E%3Ccircle%20cx%3D%22140.0%22%20cy%3D%2272.2%22%20r%3D%2214.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-tazas-FIN */ } .textura--globos{ /* TEX-globos-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22120%22%20viewBox%3D%220%200%20420%20120%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Cg%20transform%3D%22rotate(-7.6%20105.3%2045.0)%22%3E%3Cellipse%20cx%3D%22105.3%22%20cy%3D%2245.0%22%20rx%3D%2216.9%22%20ry%3D%2220.7%22%2F%3E%3Cpath%20d%3D%22M102.3%2065.7L108.3%2065.7L105.3%2070.7Z%22%2F%3E%3Cpath%20d%3D%22M105.3%2070.7q9.1%2014.0%200%2042.4%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(-9.0%2040.9%2029.6)%22%3E%3Cellipse%20cx%3D%2240.9%22%20cy%3D%2229.6%22%20rx%3D%2217.0%22%20ry%3D%2220.8%22%2F%3E%3Cpath%20d%3D%22M37.9%2050.3L43.9%2050.3L40.9%2055.3Z%22%2F%3E%3Cpath%20d%3D%22M40.9%2055.3q6.2%2014.0%200%2043.5%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(-6.1%20290.3%2037.8)%22%3E%3Cellipse%20cx%3D%22290.3%22%20cy%3D%2237.8%22%20rx%3D%2216.0%22%20ry%3D%2219.5%22%2F%3E%3Cpath%20d%3D%22M287.3%2057.3L293.3%2057.3L290.3%2062.3Z%22%2F%3E%3Cpath%20d%3D%22M290.3%2062.3q10.2%2014.0%200%2041.5%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(5.5%20274.3%2028.4)%22%3E%3Cellipse%20cx%3D%22274.3%22%20cy%3D%2228.4%22%20rx%3D%2216.6%22%20ry%3D%2220.2%22%2F%3E%3Cpath%20d%3D%22M271.3%2048.6L277.3%2048.6L274.3%2053.6Z%22%2F%3E%3Cpath%20d%3D%22M274.3%2053.6q6.8%2014.0%200%2047.5%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(4.8%20232.6%2031.4)%22%3E%3Cellipse%20cx%3D%22232.6%22%20cy%3D%2231.4%22%20rx%3D%2212.6%22%20ry%3D%2215.3%22%2F%3E%3Cpath%20d%3D%22M229.6%2046.7L235.6%2046.7L232.6%2051.7Z%22%2F%3E%3Cpath%20d%3D%22M232.6%2051.7q10.5%2014.0%200%2037.1%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate(-3.5%2085.5%2028.5)%22%3E%3Cellipse%20cx%3D%2285.5%22%20cy%3D%2228.5%22%20rx%3D%2213.8%22%20ry%3D%2216.8%22%2F%3E%3Cpath%20d%3D%22M82.5%2045.3L88.5%2045.3L85.5%2050.3Z%22%2F%3E%3Cpath%20d%3D%22M85.5%2050.3q9.7%2014.0%200%2030.1%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-globos-FIN */ } .textura--equipo{ /* TEX-equipo-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22120%22%20viewBox%3D%220%200%20480%20120%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Cline%20x1%3D%22432.4%22%20y1%3D%2259.3%22%20x2%3D%22428.0%22%20y2%3D%2267.1%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22432.4%22%20y1%3D%2259.3%22%20x2%3D%22359.1%22%20y2%3D%2291.7%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22432.4%22%20y1%3D%2259.3%22%20x2%3D%22363.5%22%20y2%3D%2280.9%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22432.4%22%20y1%3D%2259.3%22%20x2%3D%22332.3%22%20y2%3D%2264.5%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22177.2%22%20y1%3D%2248.9%22%20x2%3D%2283.6%22%20y2%3D%2275.8%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22177.2%22%20y1%3D%2248.9%22%20x2%3D%22119.6%22%20y2%3D%2281.7%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22428.0%22%20y1%3D%2267.1%22%20x2%3D%22359.1%22%20y2%3D%2291.7%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22428.0%22%20y1%3D%2267.1%22%20x2%3D%22363.5%22%20y2%3D%2280.9%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22428.0%22%20y1%3D%2267.1%22%20x2%3D%22332.3%22%20y2%3D%2264.5%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22359.1%22%20y1%3D%2291.7%22%20x2%3D%22363.5%22%20y2%3D%2280.9%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22359.1%22%20y1%3D%2291.7%22%20x2%3D%22332.3%22%20y2%3D%2264.5%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%22363.5%22%20y1%3D%2280.9%22%20x2%3D%22332.3%22%20y2%3D%2264.5%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%2283.6%22%20y1%3D%2275.8%22%20x2%3D%2246.3%22%20y2%3D%2276.0%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%2283.6%22%20y1%3D%2275.8%22%20x2%3D%22119.6%22%20y2%3D%2281.7%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Cline%20x1%3D%2246.3%22%20y1%3D%2276.0%22%20x2%3D%22119.6%22%20y2%3D%2281.7%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22432.4%22%20cy%3D%2259.3%22%20r%3D%226.4%22%2F%3E%3Ccircle%20cx%3D%22177.2%22%20cy%3D%2248.9%22%20r%3D%225.3%22%2F%3E%3Ccircle%20cx%3D%22428.0%22%20cy%3D%2267.1%22%20r%3D%225.6%22%2F%3E%3Ccircle%20cx%3D%22359.1%22%20cy%3D%2291.7%22%20r%3D%225.8%22%2F%3E%3Ccircle%20cx%3D%22363.5%22%20cy%3D%2280.9%22%20r%3D%227.8%22%2F%3E%3Ccircle%20cx%3D%2283.6%22%20cy%3D%2275.8%22%20r%3D%226.9%22%2F%3E%3Ccircle%20cx%3D%2246.3%22%20cy%3D%2276.0%22%20r%3D%225.5%22%2F%3E%3Ccircle%20cx%3D%22119.6%22%20cy%3D%2281.7%22%20r%3D%227.7%22%2F%3E%3Ccircle%20cx%3D%22332.3%22%20cy%3D%2264.5%22%20r%3D%226.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-equipo-FIN */ } .textura--juegos{ /* TEX-juegos-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22120%22%20viewBox%3D%220%200%20420%20120%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Cg%20transform%3D%22translate(26.6%2052.9)%20scale(1.3)%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%222.6%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22M-14%200h9.5M4.5%200h9.5M0%204.5v9.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(103.2%2055.2)%20scale(1.3)%22%3E%3Cpath%20d%3D%22M0.0%20-15.0L3.8%20-5.3L14.3%20-4.6L6.2%202.0L8.8%2012.1L0.0%206.5L-8.8%2012.1L-6.2%202.0L-14.3%20-4.6L-3.8%20-5.3Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(182.0%2034.4)%20scale(1.1)%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%222.8%22%3E%3Cpath%20d%3D%22M-15%20-3q-4%20-10%205%20-10t7%208%22%2F%3E%3Cpath%20d%3D%22M15%20-3q4%20-10%20-5%20-10t-7%208%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%226%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(251.2%2048.6)%20scale(1.4)%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%222.6%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M0%20-8v8l7%204.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(322.3%2043.3)%20scale(1.3)%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%222.6%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221.6%22%20stroke%3D%22none%22%20fill%3D%22%23232327%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(380.5%2042.9)%20scale(1.2)%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%222.6%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M0%20-14v-0M-14%200h28M0%20-14v28%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-juegos-FIN */ } .textura--telemetria{ /* TEX-telemetria-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22120%22%20viewBox%3D%220%200%20480%20120%22%3E%3Cg%20fill%3D%22%23232327%22%3E%3Cline%20x1%3D%22115.2%22%20y1%3D%2226%22%20x2%3D%22115.2%22%20y2%3D%22104.0%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%223%205%22%2F%3E%3Cline%20x1%3D%22264.0%22%20y1%3D%2226%22%20x2%3D%22264.0%22%20y2%3D%22104.0%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%223%205%22%2F%3E%3Cline%20x1%3D%22388.8%22%20y1%3D%2226%22%20x2%3D%22388.8%22%20y2%3D%22104.0%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%223%205%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%22104.0%22%20x2%3D%22480%22%20y2%3D%22104.0%22%20stroke%3D%22%23232327%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M0.0%2060.9L8.0%2054.0L16.0%2053.4L24.0%2050.9L32.0%2054.4L40.0%2055.8L48.0%2057.3L56.0%2055.3L64.0%2056.9L72.0%2052.7L80.0%2051.0L88.0%2052.0L96.0%2051.7L104.0%2053.1L112.0%2055.4L120.0%2060.8L128.0%2066.7L136.0%2072.7L144.0%2079.0L152.0%2082.9L160.0%2085.3L168.0%2084.5L176.0%2080.1L184.0%2078.2L192.0%2074.7L200.0%2070.8L208.0%2071.5L216.0%2069.8L224.0%2069.2L232.0%2072.1L240.0%2069.8L248.0%2070.0L256.0%2063.5L264.0%2059.9L272.0%2055.3L280.0%2049.2L288.0%2043.8L296.0%2041.6L304.0%2045.2L312.0%2046.8L320.0%2052.6L328.0%2055.7L336.0%2061.4L344.0%2063.7L352.0%2067.5L360.0%2070.5L368.0%2068.8L376.0%2066.3L384.0%2069.2L392.0%2069.3L400.0%2070.7L408.0%2075.7L416.0%2081.9L424.0%2082.4L432.0%2086.7L440.0%2085.2L448.0%2084.4L456.0%2078.6L464.0%2072.7L472.0%2064.5L480.0%2058.3%22%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-telemetria-FIN */ } .textura--deriva{ /* TEX-deriva-INICIO */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22440%22%20height%3D%22120%22%20viewBox%3D%220%200%20440%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23232327%22%20stroke-width%3D%227%22%3E%3Cpath%20d%3D%22M201.8%2052.6A38.8%2038.8%200%200%201%20278.3%2045.7%22%2F%3E%3Cpath%20d%3D%22M110.4%2078.0A29.2%2029.2%200%200%201%20130.8%2024.9%22%2F%3E%3Cpath%20d%3D%22M354.6%2067.4A32.9%2032.9%200%200%201%20305.0%2097.0%22%2F%3E%3Cpath%20d%3D%22M314.5%2051.8A25.6%2025.6%200%200%201%20351.5%2057.1%22%2F%3E%3Cpath%20d%3D%22M88.3%2076.2A24.2%2024.2%200%200%201%2058.3%2056.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* TEX-deriva-FIN */ } @media(min-width:820px){.pie{grid-template-columns:1.4fr 1fr 1fr}} .pie a{color:var(--humo);text-decoration:none;transition:color var(--d-rapida);display:inline-block;padding:5px 0} .pie a:hover{color:var(--amarillo)} .pie ul{list-style:none;display:grid;gap:2px} /* ------------------------------------------------------------ utilidades */ .saltar{position:absolute;left:-9999px;top:0;z-index:var(--z-modal); background:var(--amarillo);color:#000;padding:12px 18px;font-weight:900} .saltar:focus{left:var(--borde-pagina);top:12px} :focus-visible{outline:2px solid var(--amarillo);outline-offset:3px} .solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* --------------------------------------------------------- accesibilidad */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .rv,.entra,.dato,.kicker span{opacity:1 !important;transform:none !important} h1 .ln i{transform:none !important} .hero-medio img,.hero-medio video{opacity:1;transform:none} .rejilla{opacity:.5} html{scroll-behavior:auto} } /* ------------------------------------------------------- sin JavaScript */ /* El titular, la bajada, la barra de datos y todas las secciones que aparecen al scrollear arrancan invisibles y las revela el JS. Si el JS no corre (bloqueado, error de red, navegador viejo), doce páginas del sitio quedaban prácticamente en blanco. Este bloque las devuelve a su estado final. Va en una sola clase que agrega un script mínimo en el head: si ese script no corre, la clase no está y todo se ve. */ html:not(.js) .entra, html:not(.js) .rv, html:not(.js) .dato, html:not(.js) .kicker span{opacity:1;transform:none;animation:none;transition:none} html:not(.js) h1 .ln i{transform:none} html:not(.js) .kicker::before{width:44px} html:not(.js) .hero-medio img{opacity:1;transform:none} /* ------------------------------------------------------- hero con video Pedido del parque (2026-09-04): todas las páginas con un loop corto. El archivo ya viene en blanco y negro con las sombras tibias (videos.py), así que acá no hay filter: en un celular de gama media filtrar un video cuadro por cuadro se paga en batería y en cuadros perdidos. Mobile: el video vertical ocupa todo el hero. Desktop: es un panel a la derecha, como una cámara onboard; recortar un 9:16 para llenar un 16:9 dejaría un tercio de la imagen y el resto adivinado. */ .hero-video .hero-medio video, .hero-video .hero-medio .hv-poster{ position:absolute;inset:0;width:100%;height:118%;object-fit:cover;object-position:50% 42%; filter:none;transform:none;opacity:1;animation:none} .hero-video .hero-medio video{opacity:0;transition:opacity .7s var(--ease)} .hero-video .hero-medio video.andando{opacity:1} /* EL POSTER TAPABA AL VIDEO. Los dos son position:absolute con z-index:auto y el va DESPUES del