/* ========================================================= Mundo Caramelo — Night-party theme (v3: web oscura unificada) Display: Sora · Body: Plus Jakarta Sans ========================================================= */ /* ---------- Tokens ---------- */ :root{ /* fondos */ --bg:#0d0719; /* base de toda la web */ --bg-2:#150c28; --bg-3:#1d1136; --bar:#14041d; /* barra superior (header) */ /* superficies "glass" */ --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); /* texto */ --text:#F4EFFA; --text-soft:rgba(233,225,245,.72); /* acentos candy (identidad) */ --pink:#FF4FA3; --pink-deep:#D81E78; --turq:#1EC8B6; --turq-deep:#0E8F82; --yellow:#FFC93C; --yellow-deep:#C98A00; --grape:#8B5CF6; --grape-deep:#6D28D9; --orange:#FF7A45; --orange-deep:#DB541C; --wa:#25D366; --wa-deep:#128C7E; --stat:#b18ed7; /* números de las estadísticas */ --shadow-sm:0 2px 10px rgba(0,0,0,.35); --shadow:0 14px 38px -14px rgba(0,0,0,.55); --shadow-lg:0 30px 60px -22px rgba(0,0,0,.65); --r-sm:12px; --r:20px; --r-lg:28px; --r-pill:999px; --maxw:1160px; --gut:clamp(18px,5vw,40px); --ff-display:"Sora",system-ui,sans-serif; --ff-body:"Plus Jakarta Sans",system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1); /* más progresivo que --ease: reparte el recorrido en vez de gastarlo todo en el primer tercio. Para los movimientos que tienen que "verse". */ --ease-soft:cubic-bezier(.33,1,.68,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--ff-body); color:var(--text); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* iluminación ambiental fija: da continuidad al hacer scroll */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(55% 40% at 12% 18%, rgba(139,92,246,.13), transparent 65%), radial-gradient(45% 35% at 88% 55%, rgba(255,79,163,.08), transparent 65%), radial-gradient(60% 45% at 50% 105%, rgba(30,200,182,.06), transparent 60%), var(--bg)} img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none;padding:0} ::selection{background:var(--grape);color:#fff} :focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:6px} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2} .skip-link{position:absolute;left:-999px;top:8px;background:#fff;color:var(--bg);padding:10px 16px;border-radius:10px;z-index:200} .skip-link:focus{left:8px} /* ---------- Logo (imagen real + espiral central girando) ---------- */ .logo-mc{position:relative;display:inline-block;flex:none;border-radius:50%;overflow:hidden; width:var(--logo-s,48px);height:var(--logo-s,48px); box-shadow:0 0 0 1px rgba(255,255,255,.16),0 4px 14px rgba(0,0,0,.45)} .logo-mc__base{width:100%;height:100%;transform:scale(1.05)} /* oculta el borde blanco de la captura */ /* ventana circular sobre la espiral central: misma imagen ampliada, girando */ .logo-mc__spiral{position:absolute;width:38%;aspect-ratio:1;left:29.5%;top:25.5%;border-radius:50%;overflow:hidden; -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 74%); mask-image:radial-gradient(circle,#000 52%,transparent 74%); animation:spiral-spin 12s linear infinite} .logo-mc__spiral img{position:absolute;width:263%;max-width:none;left:-79%;top:-69%} @keyframes spiral-spin{to{transform:rotate(360deg)}} /* ---------- Pantalla de carga ---------- */ .preloader{position:fixed;inset:0;z-index:9999;display:grid;place-content:center; background:radial-gradient(120% 90% at 50% 12%, #2a1a4a 0%, #180e30 55%, var(--bg) 100%); transition:opacity .5s ease,visibility .5s ease} .preloader.is-done{opacity:0;visibility:hidden} .preloader__box{display:grid;justify-items:center;gap:1.1rem} .preloader__logo-wrap{position:relative;display:grid;place-items:center;width:96px;height:96px;margin:0 auto} .preloader__ring{position:absolute;top:50%;left:50%;margin:-70px 0 0 -70px;width:140px;height:140px;border-radius:50%; border:3px solid transparent;border-top-color:var(--pink);border-right-color:var(--yellow); border-bottom-color:var(--turq);border-left-color:var(--grape); animation:pre-spin 1s linear infinite} .preloader .logo-mc{--logo-s:96px;box-shadow:0 0 44px rgba(139,92,246,.55)} .preloader__name{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;color:#fff;letter-spacing:-.01em} .preloader__name span{color:var(--pink)} .preloader__dots{display:flex;gap:.55rem;justify-content:center} .preloader__dots span{width:11px;height:11px;border-radius:50%;background:#fff; animation:pre-bounce 1.2s ease-in-out infinite} .preloader__dots span:nth-child(1){background:var(--pink)} .preloader__dots span:nth-child(2){background:var(--yellow);animation-delay:.15s} .preloader__dots span:nth-child(3){background:var(--turq);animation-delay:.3s} @keyframes pre-spin{to{transform:rotate(360deg)}} @keyframes pre-bounce{0%,80%,100%{transform:translateY(0);opacity:.55}40%{transform:translateY(-13px);opacity:1}} /* ---------- Tipografía utilidades ---------- */ .txt-grad{ background:linear-gradient(100deg,var(--pink),var(--orange) 45%,var(--grape)); -webkit-background-clip:text;background-clip:text;color:transparent; } .kicker{font-family:var(--ff-display);font-weight:600;font-size:.88rem;text-transform:uppercase;letter-spacing:.12em;display:inline-block;margin-bottom:.6rem} .kicker--pink{color:var(--pink)} /* ---------- Botones ---------- */ .btn{ --bg-btn:var(--surface-2);--fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--ff-display);font-weight:600;font-size:1rem;line-height:1; background:var(--bg-btn);color:var(--fg); padding:.95em 1.5em;border-radius:var(--r-pill); box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s; white-space:nowrap; } .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg);filter:brightness(1.08)} .btn:active{transform:translateY(-1px) scale(.99)} .btn .ic{width:1.25em;height:1.25em;flex:none} .btn--wa{--bg-btn:linear-gradient(180deg,#2bd96e,#16a44f);--fg:#fff} .btn--ghost{--bg-btn:transparent;--fg:#fff;box-shadow:none;border:2px solid rgba(255,255,255,.4)} .btn--ghost:hover{background:#fff;color:var(--bg);border-color:#fff} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:100; background:var(--bar); border-bottom:1px solid var(--line); transition:box-shadow .3s; } .site-header.is-scrolled{box-shadow:var(--shadow-sm)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px} .brand{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--ff-display);font-weight:700;font-size:1.3rem;color:#fff;letter-spacing:-.01em} .nav{display:none} .nav a{font-family:var(--ff-display);font-weight:500;font-size:.98rem;padding:.4em .2em;position:relative;color:var(--text-soft);transition:color .2s} .nav a:hover{color:#fff} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--pink),var(--grape));transition:right .25s var(--ease)} .nav a:hover::after,.nav a:focus-visible::after{right:0} .header-actions{display:flex;align-items:center;gap:.6rem} .nav-toggle{width:44px;height:44px;display:grid;place-content:center;gap:5px;border-radius:12px} .nav-toggle span{display:block;width:24px;height:2.5px;background:#fff;border-radius:3px;transition:transform .3s var(--ease),opacity .2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media (min-width:920px){ .nav{display:flex;gap:1.6rem} .nav-toggle{display:none} } @media (max-width:919px){ .nav{ position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:.2rem; background:var(--bar);border-bottom:1px solid var(--line); padding:1rem var(--gut) 1.6rem;box-shadow:var(--shadow); transform:translateY(-130%);transition:transform .35s var(--ease); } .nav.is-open{transform:translateY(0);display:flex} .nav a{padding:.8em .2em;border-bottom:1px solid var(--line);font-size:1.08rem;color:#fff} } /* ---------- Hero (foto de la bola de espejos del salón) ---------- Capas, de atrás hacia adelante: .hero__bg (z0) la foto — se desplaza con el scroll (--py lo escribe main.js) .hero__glow (z1) los destellos de la bola girando .hero::before(z2) el velo oscuro — queda quieto para que el texto no cambie de contraste, y de paso apaga los destellos sobre la columna de texto .hero__grid (z3) el contenido */ .hero{position:relative;padding:clamp(96px,9vw,128px) 0 0;overflow:hidden;color:#fff; background:linear-gradient(180deg,#241026 0%,#1b0d26 46%,var(--bg) 100%)} /* fondo: la foto de la bola de espejos, a sangre. El parallax desplaza la foto hacia abajo siempre menos que el scroll, así la franja que destapa arriba nunca llega a verse. La foto es la MISMA en desktop y en celular: "hero-bola.jpg" (1901x785). Hasta agosto 2026 el desktop mostraba el video de la bola girando (hero-bola.mp4) con "hero-poster.jpg" de poster, pero la clienta pidió que en la compu se vea la misma foto que en el celu. Sin video, los destellos de .hero__glow vuelven a hacer todo el brillo, también en desktop. El encuadre de celular es distinto (ver el media query de abajo): ahí la foto se mide por ancho de viewport porque es muy apaisada. */ .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden; background:url("../img/hero-bola.jpg") center/cover no-repeat; transform:translate3d(0,var(--py,0px),0); will-change:transform} /* la foto ya viene oscurecida de origen: solo se refuerza el lado del texto y se funde el borde inferior con el resto de la página */ .hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(180deg, rgba(13,7,25,.10) 0%, rgba(13,7,25,.12) 58%, rgba(13,7,25,.92) 100%), radial-gradient(70% 78% at 20% 50%, rgba(13,7,25,.52), transparent 72%)} /* ---- Destellos: las facetas de la bola y las luces que proyecta ---- Dos coronas de rayos girando en el mismo sentido a distinta velocidad. Es solo transform sobre una textura ya rasterizada: no repinta nada. */ .hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden; opacity:var(--glow-o,.42); --gx:72%; /* centro de la bola en pantalla */ --gy:76%; --gs:130vmin} .hero__glow::before,.hero__glow::after{content:"";position:absolute; left:var(--gx);top:var(--gy);width:var(--gs);height:var(--gs); margin-left:calc(var(--gs) / -2);margin-top:calc(var(--gs) / -2); /* los haces nacen fuertes junto a la bola y se apagan al alejarse */ -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 20%,rgba(0,0,0,.22) 36%,transparent 54%); mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 20%,rgba(0,0,0,.22) 36%,transparent 54%); animation:ball-rays var(--gdur) linear infinite; will-change:transform} /* paradas graduales (no de golpe): así son haces difusos y no rayas marcadas */ .hero__glow::before{--gdur:78s; background:repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.10) 8deg, rgba(255,255,255,0) 17deg, rgba(255,255,255,0) 26deg)} .hero__glow::after{--gdur:126s; background:repeating-conic-gradient(from 12deg, rgba(255,79,163,0) 0deg, rgba(255,79,163,.13) 11deg, rgba(255,79,163,0) 23deg, rgba(30,200,182,0) 35deg, rgba(30,200,182,.11) 46deg, rgba(30,200,182,0) 58deg, rgba(30,200,182,0) 74deg)} @keyframes ball-rays{to{transform:rotate(360deg)}} /* el modo de fusión solo en desktop: en celular sale casi igual con alfa y es más barato */ @media (min-width:780px){.hero__glow{mix-blend-mode:screen}} /* ---- Mobile: la foto es muy apaisada (1901x785), así que con "cover" en vertical se agranda 3.4x y la bola queda irreconocible. Acá la dejamos medida por ancho de viewport: alto y encuadre quedan atados a --ball-w, así el recorte es idéntico en cualquier celular. ---- */ @media (max-width:779px){ .hero__bg{ --ball-w:130vw; /* ancho de la foto */ --ball-x:74%; /* corrimiento horizontal */ inset:0 0 auto 0; height:calc(var(--ball-w) * 0.413); /* 785/1901 */ background-size:var(--ball-w) auto; background-position:var(--ball-x) 0; transform:translate3d(0,var(--py,0px),0); /* sin scale: no hace falta */ -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,0) 100%)} .hero__glow{--gx:64%;--gy:26%;--gs:145vw;--glow-o:.4} } /* ---- Arranque: la bola aparece YA ASENTADA ---- Mientras la página se está montando (fuentes, layout, preloader) el fondo del hero queda invisible y entra SOLO con opacidad — nunca con escala — cuando main.js saca .is-booting. Así el usuario no llega a ver ningún estado intermedio. El failsafe es por si el JS no llega a correr: a los 5 s la bola se muestra igual y la página nunca queda con el hero vacío. */ .is-booting .hero__bg{opacity:0;animation:hero-boot-failsafe .45s ease 5s forwards} .is-booting .hero__glow{opacity:0;animation:glow-boot-failsafe .45s ease 5s forwards} .hero__bg,.hero__glow{transition:opacity .45s ease} @keyframes hero-boot-failsafe{to{opacity:1}} @keyframes glow-boot-failsafe{to{opacity:var(--glow-o,.42)}} .hero__grid{display:grid;position:relative;z-index:3} .hero__copy{max-width:34rem} .hero__title{font-family:var(--ff-display);font-weight:700;line-height:1.02;letter-spacing:-.03em;color:#fff; font-size:clamp(2.5rem,7.4vw,4.6rem);margin:0 0 1.1rem;text-shadow:0 4px 30px rgba(0,0,0,.45)} /* Cada línea es su propia ventana y el texto entra deslizándose desde abajo. El padding agranda la ventana para que overflow:hidden no coma la sombra ni las colas de las letras; el margen negativo + el padding del título devuelven el alto exacto de antes, así el layout no se mueve ni un píxel. */ .hero__title .ln,.cta-band__title .ln{display:block;overflow:hidden; padding:0 .12em .18em;margin:0 -.12em -.18em} .hero__title,.cta-band__title{padding-bottom:.18em} .hero__title .ln>span,.cta-band__title .ln>span{display:block} .hero__lead{font-size:clamp(1.02rem,2.4vw,1.16rem);color:var(--text-soft);max-width:42ch} .hero__lead strong{color:#fff;font-weight:700} .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem} @media (max-width:520px){ .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{width:100%} } /* ---------- Marquee ---------- La franja va oscura y cada palabra lleva el mismo degradado que "inolvidables". */ .marquee{position:relative;z-index:4;margin-top:clamp(3rem,7vw,5rem);overflow:hidden;padding:1.05rem 0; background:var(--bg-2)} .marquee::before,.marquee::after{content:"";position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,79,163,.45) 30%,rgba(139,92,246,.45) 70%,transparent)} .marquee::before{top:0} .marquee::after{bottom:0} .marquee__track{display:flex;gap:1.4rem;white-space:nowrap;width:max-content; font-family:var(--ff-display);font-weight:700;font-size:1.12rem;letter-spacing:.01em; animation:scroll 26s linear infinite} .marquee__track span{ background:linear-gradient(100deg,var(--pink),var(--orange) 45%,var(--grape)); -webkit-background-clip:text;background-clip:text;color:transparent} /* los separadores quedan en violeta tenue, sin degradado */ .marquee__track span.marquee__dot{background:none;color:rgba(177,142,215,.55)} @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- Secciones genéricas ---------- */ .section{padding:clamp(3.2rem,8vw,6rem) 0;position:relative;overflow:hidden} /* El header es sticky (72px): sin esto, al saltar por un link del menú el título de la sección queda tapado abajo de la barra. */ section[id],.cta-band[id]{scroll-margin-top:84px} /* transición suave entre secciones: línea de luz degradada */ .section+.section::before,.section--alt::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:min(880px,86%);height:1px; background:linear-gradient(90deg,transparent,rgba(139,92,246,.45) 30%,rgba(255,79,163,.45) 70%,transparent)} .section--alt{background:linear-gradient(180deg,rgba(139,92,246,.07),rgba(139,92,246,0) 32%),var(--bg-2)} /* secciones con foto de fondo: la imagen va en un pseudo-elemento con velo oscuro encima */ .section--photo{isolation:isolate} /* el scale le da recorrido al parallax (--py lo escribe main.js en la sección) */ .section--photo::after{content:"";position:absolute;inset:0;z-index:-1; background-size:cover;background-position:center;background-repeat:no-repeat; transform:translate3d(0,var(--py,0px),0) scale(1.06)} /* estos fondos solo se mueven en desktop: promoverlos a capa en celular sería gastar memoria de GPU al pedo */ @media (min-width:780px){ .section--photo::after,.cta-band__bg{will-change:transform} } .section--photo::before{z-index:1} .section--photo-nosotros::after{ background-image: linear-gradient(180deg,rgba(13,7,25,.72),rgba(13,7,25,.52) 45%,rgba(13,7,25,.78)), url("../img/bg-nosotros.jpg")} .section--photo-eventos::after{ background-image: linear-gradient(180deg,rgba(13,7,25,.78),rgba(13,7,25,.58) 45%,rgba(13,7,25,.82)), url("../img/bg-eventos.jpg")} /* sobre foto el texto necesita algo de sombra y las tarjetas, más cuerpo */ .section--photo .section-title{text-shadow:0 4px 26px rgba(9,4,16,.75)} .section--photo .section-sub, .section--photo .feature p, .section--photo .stat__lbl, .section--photo .evento__lead, .section--photo .eventos__foot{text-shadow:0 2px 14px rgba(9,4,16,.85)} .section--photo .feature, .section--photo .stat{background:rgba(26,12,44,.62)} .section-head{max-width:46rem;margin:0 auto clamp(2rem,5vw,3rem);text-align:center} .section-title{font-family:var(--ff-display);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:#fff; font-size:clamp(1.8rem,4.6vw,2.8rem)} /* cuando el título entero va en degradado, el color plano no debe pisarlo */ .section-title.txt-grad{color:transparent} .section-sub{color:var(--text-soft);margin-top:.8rem;font-size:1.05rem} /* ---------- Nosotros / features ---------- */ .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem} .feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem; backdrop-filter:blur(6px); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} .feature:hover{transform:translateY(-6px);border-color:var(--line-strong); box-shadow:0 18px 44px -18px rgba(0,0,0,.6),0 0 34px -8px color-mix(in srgb,var(--c,#8B5CF6) 35%,transparent)} .feature__ic{width:56px;height:56px;border-radius:18px;display:grid;place-content:center;margin-bottom:1rem; background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c); border:1px solid color-mix(in srgb,var(--c) 35%,transparent)} .feature__ic svg{width:30px;height:30px} .feature h3{font-family:var(--ff-display);font-weight:600;font-size:1.15rem;margin-bottom:.35rem;color:#fff} .feature p{color:var(--text-soft);font-size:.97rem} .stats{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:clamp(2rem,5vw,3rem); max-width:780px;margin-inline:auto} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:1.4rem 1rem;text-align:center;backdrop-filter:blur(6px)} .stat__num{display:block;font-family:var(--ff-display);font-weight:700;font-size:clamp(2rem,6vw,2.8rem);line-height:1; color:var(--stat)} .stat__lbl{display:block;color:var(--text-soft);font-size:.92rem;margin-top:.4rem} @media (min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}} /* ---------- Marco de los carruseles (slider del salón + galería) ---------- Antes el marco era fijo en 4:5 y la foto entraba con object-fit:contain sobre su propia versión desenfocada: las que no eran 4:5 quedaban con franjas borrosas al costado. Ahora el marco toma la proporción REAL de cada foto o video, así no le queda ninguna franja. --arw/--arh los escribe main.js con las medidas del archivo; el 4/5 es solo el valor de arranque, hasta que se sepan. La foto sigue sin recortarse ni deformarse nunca. .espacio es un RIEL de ancho FIJO: no cambia de tamaño al pasar de foto, así las flechas quedan siempre clavadas en el mismo lugar. Lo que se achica y se agranda es .espacio__stage, que va centrado adentro del riel. --foto-max ancho máximo de la foto --pasillo lugar reservado a cada lado, solo para las flechas --alto-max tope de alto, para que una vertical no ocupe toda la pantalla */ .espacio{position:relative;margin-inline:auto; --arw:4;--arh:5; --alto-max:74vh; --foto-max:560px; --pasillo:0px; max-width:calc(var(--foto-max) + var(--pasillo) * 2); /* El alto también es fijo: se reserva de entrada el lugar de la foto más alta posible y la foto va centrada adentro. Si el alto siguiera a cada archivo, al pasar de una vertical a una apaisada el bloque se achicaría y todo lo de abajo pegaría un salto. Así no se mueve nada: cambia la foto y listo. */ height:var(--alto-max); display:flex;align-items:center;justify-content:center} /* Apenas hay un poco de ancho, las flechas se van afuera de la foto. */ @media (min-width:641px){ .espacio{--pasillo:62px;--foto-max:min(560px, calc(100vw - 220px))} } /* En compu hay lugar de sobra: el contenedor mide 1160 px y la foto usaba 560, o sea la mitad. Acá se agranda bastante, reservando el pasillo de las flechas y topeando contra el ancho de la ventana para que nunca se salgan de pantalla. */ @media (min-width:900px){ .espacio{ --alto-max:min(84vh, 900px); --pasillo:76px; --foto-max:min(860px, calc(100vw - 380px))} } .espacio__stage{position:relative;overflow:hidden;border-radius:var(--r-lg); aspect-ratio:var(--arw)/var(--arh);background:var(--bg-3); flex:0 1 auto;width:100%; max-width:min(var(--foto-max), calc(var(--alto-max) * var(--arw) / var(--arh))); max-height:var(--alto-max); transition:max-width .18s var(--ease); box-shadow:var(--shadow-lg);border:1px solid var(--line)} /* Relleno: la misma foto desenfocada. Con el marco ya recortado a la proporción exacta no se llega a ver, pero queda de red por si las medidas todavía no se saben (primera carga) o por redondeos de medio píxel. */ .espacio__fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:blur(28px) brightness(.5);transform:scale(1.15)} .espacio__shot{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;cursor:zoom-in} .espacio__shot img, .espacio__shot .espacio__vid{width:100%;height:100%;object-fit:contain;position:relative} /* El carrusel muestra fotos y también algún video (la lluvia de caramelos). Los dos ocupan el mismo lugar y main.js prende uno y apaga el otro: el que no va queda con display:none para que no ocupe espacio ni cargue nada. */ .espacio__vid{display:none;position:absolute;inset:0;background:transparent} .espacio__stage.has-video .espacio__shot img{display:none} .espacio__stage.has-video .espacio__vid{display:block} /* No hay fundido al pasar de foto, a propósito: el corte seco es instantáneo y aguanta que se apriete rápido. Con fundido había que esperar a que la foto se fuera antes de traer la siguiente, y apretando seguido el marco quedaba vacío. */ .espacio__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:clamp(46px,5.4vw,64px);aspect-ratio:1;border-radius:50%; display:grid;place-content:center;font-size:clamp(1.3rem,2.4vw,1.8rem);color:#fff; background:rgba(255,255,255,.15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); transition:background .2s,transform .2s var(--ease)} .espacio__nav:hover{background:rgba(255,255,255,.3);transform:translateY(-50%) scale(1.07)} /* Clavadas en los bordes del riel: como el riel no cambia de ancho, las flechas no se mueven aunque la foto siguiente sea más angosta o más ancha. */ .espacio__prev{left:0} .espacio__next{right:0} .espacio__count{text-align:center;color:var(--text-soft);font-size:.9rem;margin-top:1rem; font-variant-numeric:tabular-nums} @media (max-width:640px){ /* En celular no hay lugar a los costados sin taparle la foto, así que las flechas bajan a una fila debajo, con el contador en el medio. Quedan lejos de los bordes de la pantalla (donde el pulgar se traba con los gestos del sistema) y no pisan nada. El swipe sigue andando, que es lo natural acá. */ /* Acá el ancho lo manda el celular, no el alto: una foto vertical ya entra a todo lo ancho. Por eso el alto reservado es el de una 3:4 a ancho completo (y nunca más de 66vh), para no dejar un hueco enorme al pedo. */ .espacio{ --alto-max:min(66vh, calc((100vw - 2 * var(--gut)) * 4 / 3)); height:calc(var(--alto-max) + 58px); padding-bottom:58px} .espacio__nav{top:auto;bottom:6px;transform:none} .espacio__nav:hover{transform:scale(1.07)} /* El max() garantiza un mínimo de aire contra los bordes: si no, en pantallas de 360 px la flecha derecha quedaba pegada al botón flotante de WhatsApp (que va fijo en right:18px y encima tiene el anillo que late). */ .espacio__prev{left:max(calc(50% - 84px), 76px)} .espacio__next{right:max(calc(50% - 84px), 76px)} .espacio__count{margin-top:-38px} } /* ---------- Nuestros eventos (3 polaroids con CTA a WhatsApp) ---------- */ .eventos-grid{display:grid;grid-template-columns:1fr;gap:3rem;justify-items:center} @media (min-width:780px){ .eventos-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start} } .evento{display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px} .evento[data-tone="pink"]{--tone:var(--pink);--tone-2:#FF6FB4} .evento[data-tone="turq"]{--tone:var(--turq);--tone-2:#2ED8C4} .evento[data-tone="grape"]{--tone:var(--grape);--tone-2:#A78BFA} /* marco polaroid */ .polaroid{width:100%;max-width:230px;background:#fff;padding:9px 9px 0; border-radius:3px;box-shadow:0 20px 42px -14px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35); transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .evento:nth-child(1) .polaroid{transform:rotate(-2deg)} .evento:nth-child(2) .polaroid{transform:rotate(1.5deg)} .evento:nth-child(3) .polaroid{transform:rotate(-1deg)} .evento:hover .polaroid{transform:rotate(0) translateY(-6px); box-shadow:0 30px 56px -16px rgba(0,0,0,.75),0 0 40px -12px color-mix(in srgb,var(--tone) 45%,transparent)} .polaroid__shot{display:block;aspect-ratio:3/4;overflow:hidden;background:#e8e2ef} .polaroid__shot img{width:100%;height:100%;object-fit:cover} .polaroid__title{font-family:var(--ff-display);font-weight:700;font-size:1.35rem; color:var(--tone-2);text-align:center;line-height:1;padding:.72em 0 .78em} /* el texto de abajo de cada polaroid va centrado, a pedido de la clienta */ .evento__lead{color:var(--text-soft);font-size:.93rem;line-height:1.6;text-align:center; max-width:290px;margin-top:1.6rem} .evento__cta{margin-top:1.2rem;display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--ff-display);font-weight:600;font-size:.82rem;letter-spacing:.02em; padding:.72em 1.5em;border-radius:var(--r-pill);color:#fff; background:linear-gradient(120deg,color-mix(in srgb,var(--tone) 80%,#000 6%),color-mix(in srgb,var(--tone) 55%,var(--grape))); box-shadow:0 10px 26px -12px color-mix(in srgb,var(--tone) 70%,transparent); transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s} .evento__cta:hover{transform:translateY(-2px);filter:brightness(1.1); box-shadow:0 14px 32px -12px color-mix(in srgb,var(--tone) 85%,transparent)} .evento__cta .ic{width:1.25em;height:1.25em;flex:none} .eventos__foot{text-align:center;color:#fff;margin-top:clamp(2.4rem,5vw,3.4rem);font-size:1rem} /* ---- Entrada de las 3 fotos ---- main.js le pone .is-in a cada .evento; lo que cambia entre dispositivos es CUÁNDO (en mobile de a una, en desktop las tres juntas) y DESDE DÓNDE. MOBILE: alternado, izquierda → derecha → izquierda, para que al scrollear cada foto entre desde un lado distinto. */ .evento{opacity:0;transform:translate3d(-72px,0,0) rotate(-6deg); transition:opacity .55s var(--ease),transform .9s var(--ease-soft); will-change:transform,opacity} .evento:nth-child(2){transform:translate3d(72px,0,0) rotate(5deg)} .evento:nth-child(3){transform:translate3d(-72px,0,0) rotate(-5deg)} .evento.is-in{opacity:1;transform:none} /* El texto y el botón entran después de que la foto aterrizó: la foto es la protagonista. Va con animación (no transition) y un keyframe con solo "from", así al terminar el elemento vuelve a sus estilos normales y el hover del botón sigue funcionando con su timing propio. */ .evento__lead,.evento__cta{opacity:0} .evento.is-in .evento__lead, .evento.is-in .evento__cta{opacity:1; animation:ev-text .5s var(--ease) backwards; animation-delay:calc(var(--i,0) * var(--ev-stag,0ms) + 240ms)} @keyframes ev-text{from{opacity:0;transform:translate3d(0,14px,0)}} @media (min-width:780px){ /* DESKTOP: las tres en fila. Entran "como cartas que se reparten": las de los costados vienen de afuera y la del medio desde abajo, todas convergiendo. */ .evento{--ev-stag:110ms; transform:translate3d(-54px,34px,0) rotate(-9deg) scale(.9); transition:opacity .6s var(--ease),transform .95s var(--ease-soft); transition-delay:calc(var(--i,0) * var(--ev-stag))} .evento:nth-child(2){transform:translate3d(0,62px,0) rotate(4deg) scale(.9)} .evento:nth-child(3){transform:translate3d(54px,34px,0) rotate(7deg) scale(.9)} /* OJO: tiene que ir DESPUÉS de los :nth-child. Pesan lo mismo (0,2,0), así que si va antes, las tarjetas 2 y 3 nunca llegan a su posición final. */ .evento.is-in{transform:none} /* profundidad: la foto flota dentro del marco mientras la sección cruza la pantalla (--pz lo escribe main.js, alternado entre tarjetas) */ .polaroid__shot img{transform:translate3d(0,var(--pz,0px),0) scale(1.08)} } /* ---------- Galería ---------- */ .gal-filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:clamp(1.8rem,4vw,2.6rem)} .chip-btn{font-family:var(--ff-display);font-weight:600;font-size:.92rem;padding:.55em 1.3em;border-radius:var(--r-pill); background:var(--surface);border:1px solid var(--line-strong);color:var(--text-soft);transition:all .2s var(--ease)} .chip-btn:hover{color:#fff;transform:translateY(-2px);border-color:rgba(255,255,255,.35)} /* el pill activo toma el color de su categoría */ .chip-btn[data-tone="pink"]{--tone:var(--pink)} .chip-btn[data-tone="turq"]{--tone:var(--turq)} .chip-btn[data-tone="grape"]{--tone:var(--grape)} .chip-btn.is-active{color:#fff;border-color:transparent; background:linear-gradient(120deg,color-mix(in srgb,var(--tone) 88%,#000 8%),color-mix(in srgb,var(--tone) 62%,var(--grape))); box-shadow:0 10px 26px -12px color-mix(in srgb,var(--tone) 75%,transparent)} /* ---------- Reseñas de Google ---------- Mismo tratamiento "glass" que las tarjetas de Nosotros (.feature): superficie translúcida, borde suave y elevación al pasar el mouse. Las estrellas y el isotipo de Google son SVG inline: no se pide nada a servidores de terceros. */ /* stretch (el default): las tres tarjetas quedan a la misma altura aunque los textos midan distinto */ .resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem} .resena{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.5rem;backdrop-filter:blur(6px);--c:var(--yellow); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} .resena:hover{transform:translateY(-6px);border-color:var(--line-strong); box-shadow:0 18px 44px -18px rgba(0,0,0,.6),0 0 34px -8px color-mix(in srgb,var(--c) 30%,transparent)} .resena__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.9rem} .resena__avatar{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-content:center; font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:#fff; background:linear-gradient(140deg,var(--grape),var(--pink))} .resena__autor{font-family:var(--ff-display);font-weight:600;font-size:1.02rem;color:#fff;line-height:1.3} .resena__stars{display:flex;gap:1px;color:var(--yellow);margin-top:.15rem} .resena__stars svg{width:15px;height:15px} /* el isotipo se va al extremo y no compite con el nombre */ .resena__google{width:19px;height:19px;flex:none;margin-left:auto;align-self:flex-start} .resena__txt{color:var(--text-soft);font-size:.97rem} .resenas__cta{margin-top:clamp(2rem,5vw,2.8rem);text-align:center} .resenas__nota{color:var(--text-soft);font-size:.92rem;margin-top:.85rem} /* blanco como la tarjeta de Google, para que se lea como "ir a Google" y no se confunda con el verde de los botones de WhatsApp (que son los de reserva) */ .btn--google{--bg-btn:#fff;--fg:#1f1f2e;box-shadow:var(--shadow)} .btn--google .ic{width:19px;height:19px} /* ---------- CTA final ---------- */ .cta-band{position:relative;overflow:hidden;isolation:isolate;text-align:center; padding:clamp(4.5rem,10vw,7rem) 0;color:#fff} /* La foto de fondo viene en dos encuadres porque la original es muy apaisada: la horizontal (1901x785) en desktop y una vertical (1080x1920) en celular. Las dos ya llegaron con el desenfoque y el velo aplicados, así que acá NO se les suma ningún filter: si no, el desenfoque quedaría duplicado. */ .cta-band__bg{position:absolute;inset:-5% -14px;z-index:-1; background:url("../img/bg-magia-pc.jpg") center/cover no-repeat; transform:translate3d(0,var(--py,0px),0)} @media (max-width:779px){ .cta-band__bg{background-image:url("../img/bg-magia-mobile.jpg")} } .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(180deg,rgba(13,7,25,.58),rgba(13,7,25,.38) 45%,rgba(13,7,25,.66)), radial-gradient(70% 80% at 50% 50%, rgba(13,7,25,.3), transparent 75%)} .cta-band__title{font-family:var(--ff-display);font-weight:700;line-height:1.1;letter-spacing:-.025em; font-size:clamp(2rem,5.2vw,3.2rem);text-shadow:0 4px 30px rgba(0,0,0,.5)} .cta-band__sub{margin-top:1rem;font-size:clamp(1.05rem,2.2vw,1.45rem);color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.5)} .cta-band__btn{margin-top:clamp(1.8rem,4vw,2.6rem);padding:1.05em 1.9em;font-size:1.08rem} /* ---------- Ubicación / contacto ---------- */ .ubic{display:grid;gap:clamp(2rem,5vw,3.4rem);align-items:center} @media (min-width:880px){.ubic{grid-template-columns:1fr 1fr}} .ubic__lead{color:var(--text-soft);font-size:1.02rem;max-width:44ch;margin-bottom:1.1rem} .ubic__title{font-family:var(--ff-display);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#fff; font-size:clamp(1.9rem,4.4vw,2.6rem)} .contact-list{display:grid;gap:1rem;margin:1.8rem 0 0} .contact-list li{display:flex;align-items:center;gap:.85rem;font-size:1rem;font-weight:600;color:var(--text)} .contact-list svg{width:38px;height:38px;flex:none;padding:8px;border-radius:12px; color:var(--c,var(--pink));background:color-mix(in srgb,var(--c,var(--pink)) 18%,transparent); border:1px solid color-mix(in srgb,var(--c,var(--pink)) 30%,transparent)} .contact-list a:hover{color:#fff;text-decoration:underline} .ubic__map{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line-strong);aspect-ratio:4/3} .ubic__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)} /* ---------- Footer ---------- */ .footer{background:var(--bg-2);color:#fff;padding-top:clamp(2.6rem,6vw,4rem);position:relative} .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,79,163,.5) 30%,rgba(139,92,246,.5) 70%,transparent)} .footer a{color:#fff;opacity:.85} .footer a:hover{opacity:1;text-decoration:underline} .footer__inner{display:grid;gap:2rem;padding-bottom:2.4rem} @media (min-width:760px){.footer__inner{grid-template-columns:1.4fr 1fr 1.2fr}} .footer__brand .brand{color:#fff} .footer .logo-mc{--logo-s:44px} .footer__brand p{color:var(--text-soft);margin-top:.8rem;max-width:32ch} .footer h4{font-family:var(--ff-display);font-weight:600;margin-bottom:.8rem;font-size:1.02rem} .footer__nav{display:flex;flex-direction:column;gap:.5rem} .footer__contact p{color:var(--text-soft);margin-bottom:.3rem} .footer__contact a{opacity:1;color:var(--text)} .footer__social{display:flex;gap:.7rem;margin-top:1rem} .footer__social a{display:grid;place-content:center;width:42px;height:42px;border-radius:12px;opacity:1; background:var(--surface-2);border:1px solid var(--line-strong);transition:transform .2s var(--ease),background .2s} .footer__social a:hover{transform:translateY(-3px);background:rgba(255,255,255,.16);text-decoration:none} .footer__social svg{width:22px;height:22px} .footer__bottom{border-top:1px solid var(--line);padding:1.2rem 0;font-size:.9rem;color:var(--text-soft);text-align:center} /* ---------- WhatsApp flotante ---------- */ /* Menú para elegir con qué escribir el mail (ver main.js). Lo posiciona el JS pegado al link; acá solo va cómo se ve. */ .menu-mail{position:fixed;z-index:130;min-width:250px;padding:.5rem; background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r); box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s} .menu-mail.is-open{opacity:1;visibility:visible;transform:none} .menu-mail__tit{font-size:.78rem;color:var(--text-soft);padding:.35rem .7rem .5rem; border-bottom:1px solid var(--line);margin-bottom:.35rem;word-break:break-all} .menu-mail__op{display:block;width:100%;text-align:left;color:#fff; font-size:.95rem;padding:.62rem .7rem;border-radius:12px; transition:background .15s} .menu-mail__op:hover,.menu-mail__op:focus-visible{background:var(--surface-2)} /* Aviso de "dirección copiada" al tocar el mail. Va abajo a la izquierda para no taparse con el botón flotante de WhatsApp, que vive abajo a la derecha. */ .aviso-copia{position:fixed;left:18px;bottom:18px;z-index:120;max-width:calc(100vw - 36px); background:rgba(29,17,54,.96);color:#fff;border:1px solid var(--line-strong); padding:.8rem 1.15rem;border-radius:var(--r-pill);font-size:.92rem;font-weight:500; box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s} .aviso-copia.is-open{opacity:1;visibility:visible;transform:none} /* En celular no entra al lado del botón de WhatsApp, así que va por encima y a todo el ancho: el mail es largo y ahí abajo tiene lugar para respirar. */ @media (max-width:640px){ .aviso-copia{left:18px;right:18px;bottom:92px;max-width:none;text-align:center} } @media (prefers-reduced-motion:reduce){.aviso-copia{transition:opacity .25s ease,visibility .25s}} .wa-float{position:fixed;right:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:.55rem; background:linear-gradient(180deg,#2bd96e,#16a44f);color:#fff;font-family:var(--ff-display);font-weight:600; padding:.85rem 1.15rem;border-radius:var(--r-pill);box-shadow:var(--shadow-lg); transition:transform .25s var(--ease)} .wa-float:hover{transform:translateY(-3px) scale(1.04)} .wa-float svg{width:28px;height:28px;flex:none} .wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#25D366;z-index:-1; animation:wa-pulse 2.4s ease-out infinite} @keyframes wa-pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}} @media (max-width:520px){.wa-float__txt{display:none}.wa-float{padding:.9rem}} /* ---------- Lightbox ---------- */ .lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,5,16,.94);backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:4vmin;opacity:0;visibility:hidden; transition:opacity .25s,visibility .25s} .lightbox.is-open{opacity:1;visibility:visible} .lb-img{max-width:92vw;max-height:86vh;border-radius:var(--r);box-shadow:var(--shadow-lg); border:1px solid var(--line-strong);animation:lbIn .3s var(--ease)} /* ampliado, el video lleva controles: acá sí tiene sentido poder pausarlo */ .lb-vid{display:none} .lightbox.is-video .lb-img{display:none} .lightbox.is-video .lb-vid{display:block} @keyframes lbIn{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}} .lb-close,.lb-nav{position:absolute;color:#fff;background:rgba(255,255,255,.12);border-radius:50%; width:52px;height:52px;display:grid;place-content:center;font-size:1.6rem;transition:background .2s,transform .2s} .lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.26);transform:scale(1.08)} .lb-close{top:18px;right:18px;font-size:2rem} .lb-nav{top:50%;transform:translateY(-50%)} .lb-prev{left:14px} .lb-next{right:14px} .lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.08)} @media (max-width:520px){.lb-nav{width:44px;height:44px}} /* ========================================================= Reveal (scroll) --------------------------------------------------------- Un elemento con .reveal arranca oculto y entra cuando el IntersectionObserver de main.js le agrega .is-visible. - data-anim elige DESDE DÓNDE entra. - --i (inline en el HTML) es el orden dentro de su grupo. Solo se animan transform y opacity. ========================================================= */ .reveal{ --dist:26px; /* recorrido */ --dur:.68s; /* duración */ --stag:90ms; /* separación entre hermanos */ --delay:0ms; /* retardo propio extra */ opacity:0; transform:translate3d(0,var(--dist),0); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); transition-delay:calc(var(--i,0) * var(--stag) + var(--delay)); } .reveal[data-anim="left"]{--dist:44px;transform:translate3d(calc(var(--dist) * -1),0,0)} .reveal[data-anim="right"]{--dist:44px;transform:translate3d(var(--dist),0,0)} .reveal[data-anim="zoom"]{--dur:.8s;transform:scale(.94)} .reveal[data-anim="rise"]{--dur:.76s;transform:translate3d(0,var(--dist),0) scale(.96)} /* va después de las variantes para poder anularlas a todas */ .reveal.is-visible{opacity:1;transform:none} /* Títulos: cada línea se desliza desde abajo detrás de su propia ventana. El contenedor no se desvanece, se mueve el de adentro. */ .reveal[data-anim="mask"]{opacity:1;transform:none;transition:none} .reveal[data-anim="mask"]>span{ transform:translate3d(0,130%,0);opacity:0; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); transition-delay:calc(var(--i,0) * var(--stag) + var(--delay)); } .reveal[data-anim="mask"].is-visible>span{transform:none;opacity:1} /* El ícono de cada feature aparece un toque después que su tarjeta */ .feature.reveal .feature__ic{transform:scale(.7) rotate(-10deg);opacity:0; transition:transform .6s var(--ease),opacity .4s var(--ease); transition-delay:calc(var(--i,0) * var(--stag) + 160ms)} .feature.reveal.is-visible .feature__ic{transform:none;opacity:1} /* Mobile: recorridos más cortos y stagger más rápido (menos cosas a la vez) */ @media (max-width:779px){ .reveal{--dist:18px;--dur:.6s;--stag:64ms} .reveal[data-anim="left"],.reveal[data-anim="right"]{--dist:30px} } /* Ubicación: el cruce info-izquierda / mapa-derecha solo tiene sentido cuando están uno al lado del otro. El :not() es necesario: sin él esta regla pesa igual que .reveal.is-visible y, por ir después, dejaría el bloque corrido. */ @media (max-width:879px){ .ubic__info.reveal:not(.is-visible), .ubic__map.reveal:not(.is-visible){transform:translate3d(0,22px,0)} } /* El marquee se frena si el mouse se apoya: se puede leer */ @media (hover:hover){.marquee:hover .marquee__track{animation-play-state:paused}} /* ---------- Reduced motion ---------- Acá va !important a propósito: varias reglas de arriba (las variantes de data-anim y los :nth-child de .evento) pesan más que un selector simple, y esta preferencia del usuario tiene que ganar siempre. */ @media (prefers-reduced-motion:reduce){ .reveal,.reveal[data-anim="mask"]>span,.evento, .evento__lead,.evento__cta,.feature.reveal .feature__ic{ opacity:1 !important;transform:none !important; transition:none !important;animation:none !important} .hero__bg,.cta-band__bg,.section--photo::after,.polaroid__shot img{ transform:none !important} .lb-img,.marquee__track,.wa-float::before,.logo-mc__spiral, .preloader__ring,.preloader__dots span, .hero__glow::before,.hero__glow::after{animation:none !important} } /* ========================================================= Red de seguridad: la web no puede quedarse en la pantalla de carga ========================================================= La pantalla de carga la saca js/main.js, y las secciones se destapan cuando ese mismo archivo las ve entrar en pantalla. Si main.js no llega a correr, el visitante se queda mirando la pantalla de carga para siempre. Y eso puede pasar sin que el sitio tenga nada roto: el pedido del .js se corta por red, el navegador del celular lo deja colgado, un bloqueador lo frena. La web se ve perfecta en la compu y muerta en un teléfono. El