/* ========================================================= PLANTILLA "AVENTURA ESPACIAL" — cumpleaños infantil, cosmos. Hoja de estilo AUTOCONTENIDA: NO depende de base.css/temas.css. Comparte el contrato de datos del motor (motor.js): mismas clases/IDs/ data-rol/data-modulo; cambia el copy y el envoltorio visual. Dirección estética: espacio profundo (nebulosa índigo→morado + campo de estrellas), planeta con anillo, cohete y neón cyan/magenta + amarillo estrella. Mobile-first · accesible · sin dependencias. Fuentes (las enlaza el render en ): Orbitron (display tech), Fredoka (cuerpo redondeado amigable). ========================================================= */ :root { --espacio: #0a0e2a; /* índigo muy profundo */ --espacio-2: #141a44; --nebulosa-1: #3a1d6e; /* morado nebulosa */ --nebulosa-2: #1b1150; --cyan: #38e1ff; --cyan-d: #16b8d8; --magenta: #ff4fd8; --magenta-d: #d72bb0; --estrella: #ffd84d; /* amarillo estrella */ --estrella-c: #fff3c2; --blanco: #f4f7ff; --texto: #d6ddff; /* lavanda claro legible sobre el cosmos */ --texto-2: #9aa6e0; --panel: rgba(34, 26, 84, 0.55); --panel-bord: rgba(120, 130, 230, 0.32); --f-display: "Orbitron", system-ui, sans-serif; --f-texto: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif; --esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px; --esp-5:40px; --esp-6:64px; --esp-7:96px; --radio: 18px; --radio-sm: 12px; --glow-cyan: 0 0 22px rgba(56, 225, 255, .45); --glow-magenta: 0 0 22px rgba(255, 79, 216, .4); --glow-estrella: 0 0 26px rgba(255, 216, 77, .5); --transicion: .25s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--f-texto); font-size: 16px; line-height: 1.65; color: var(--texto); background-color: var(--espacio); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Espacio profundo: nebulosa (gradientes de color) — capa fija de fondo */ body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(60% 45% at 18% 12%, rgba(58, 29, 110, .85), transparent 70%), radial-gradient(55% 50% at 85% 22%, rgba(255, 79, 216, .14), transparent 70%), radial-gradient(70% 55% at 70% 80%, rgba(56, 225, 255, .12), transparent 72%), radial-gradient(120% 100% at 50% 0%, var(--espacio-2) 0%, var(--nebulosa-2) 42%, var(--espacio) 78%); background-repeat: no-repeat; } /* Campo de estrellas CSS (puntos a distintos tamaños/brillos) — capa fija */ body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1.6px 1.6px at 12% 16%, #fff, transparent), radial-gradient(1.3px 1.3px at 78% 9%, rgba(255,255,255,.85), transparent), radial-gradient(2px 2px at 33% 36%, var(--estrella-c), transparent), radial-gradient(1.4px 1.4px at 88% 42%, var(--cyan), transparent), radial-gradient(1.2px 1.2px at 22% 60%, rgba(255,255,255,.75), transparent), radial-gradient(1.8px 1.8px at 63% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 8% 82%, rgba(255,255,255,.7), transparent), radial-gradient(1.6px 1.6px at 50% 20%, var(--estrella), transparent), radial-gradient(1.2px 1.2px at 92% 76%, rgba(255,255,255,.7), transparent), radial-gradient(1.4px 1.4px at 44% 88%, rgba(255,255,255,.8), transparent), radial-gradient(1.2px 1.2px at 72% 30%, var(--magenta), transparent), radial-gradient(1.5px 1.5px at 30% 8%, rgba(255,255,255,.85), transparent), radial-gradient(1.3px 1.3px at 58% 52%, rgba(255,255,255,.65), transparent), radial-gradient(1.3px 1.3px at 16% 40%, var(--cyan), transparent), radial-gradient(1.2px 1.2px at 95% 58%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 6% 30%, var(--estrella-c), transparent); background-repeat: no-repeat; animation: titilar 5.5s ease-in-out infinite; } @keyframes titilar { 0%,100%{opacity:.65} 50%{opacity:1} } img { max-width: 100%; display: block; } iframe { border: 0; } /* Reveal al hacer scroll */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .fade-up.is-visible { opacity: 1; transform: none; } /* ========================================================= HERO — el lanzamiento ========================================================= */ .hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--esp-7) var(--esp-4); overflow: hidden; /* el cosmos (body) ES la portada: nunca usa foto de hero */ background-image: none !important; } .hero__overlay { display: none; } /* halo de nebulosa concentrado tras el nombre */ .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 30%; left: 50%; transform: translateX(-50%); width: min(96%, 560px); height: 420px; background: radial-gradient(closest-side, rgba(255, 79, 216, .22), transparent 70%), radial-gradient(closest-side at 60% 60%, rgba(56, 225, 255, .2), transparent 72%); filter: blur(6px); } /* PLANETA con anillo (decorativo, esquina superior) */ .hero__planeta { position: absolute; z-index: -1; pointer-events: none; top: 9%; right: -34px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffe9a8 0%, var(--estrella) 22%, #e08a3c 55%, #8a3c8f 100%); box-shadow: var(--glow-estrella), inset -10px -8px 22px rgba(0,0,0,.45); animation: flotar-planeta 9s ease-in-out infinite; } .hero__planeta::after { content: ""; position: absolute; top: 50%; left: 50%; width: 210px; height: 56px; border: 7px solid rgba(56, 225, 255, .55); border-radius: 50%; transform: translate(-50%, -50%) rotate(-26deg); box-shadow: 0 0 16px rgba(56, 225, 255, .35); border-bottom-color: rgba(56, 225, 255, .12); } @keyframes flotar-planeta { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} } /* COHETE (decorativo, lado opuesto) */ .hero__cohete { position: absolute; z-index: -1; pointer-events: none; bottom: 16%; left: 7%; width: 30px; height: 64px; transform: rotate(18deg); animation: flotar-cohete 6s ease-in-out infinite; } .hero__cohete-cuerpo { position: absolute; inset: 0; background: linear-gradient(180deg, var(--blanco) 0 60%, #c7cffb 100%); border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%; box-shadow: 0 0 14px rgba(56, 225, 255, .4); } .hero__cohete-cuerpo::before { /* ventana */ content: ""; position: absolute; top: 28%; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan), inset 0 0 4px #0a2a3a; } .hero__cohete-cuerpo::after { /* aletas + llama */ content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--estrella); filter: drop-shadow(0 6px 6px rgba(255, 216, 77, .6)); } @keyframes flotar-cohete { 0%,100%{transform:rotate(18deg) translateY(0)} 50%{transform:rotate(18deg) translateY(-18px)} } /* ESTRELLA FUGAZ (decorativa) — cruza el hero de vez en cuando. Confinada por el overflow:hidden del .hero → nunca genera scroll. */ .hero__cometa { position: absolute; z-index: -1; pointer-events: none; top: 14%; left: -8%; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px 1px var(--cyan), 0 0 16px 2px rgba(56, 225, 255, .55); opacity: 0; animation: cometa 11s ease-in 4s infinite; } .hero__cometa::before { /* estela */ content: ""; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 90px; height: 2px; background: linear-gradient(90deg, transparent, rgba(56, 225, 255, .85), var(--magenta)); border-radius: 2px; } @keyframes cometa { 0% { opacity: 0; transform: translate(0, 0); } 3% { opacity: 1; } 14% { opacity: 1; } 17%, 100%{ opacity: 0; transform: translate(118vw, 46vh); } } .hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; } /* monograma en insignia de misión (motor.js → data-rol="hero-sello") */ .hero__sello { width: 78px; height: 78px; margin-bottom: var(--esp-4); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; color: var(--espacio); background: radial-gradient(circle at 35% 30%, var(--estrella-c), var(--estrella) 70%); border: 3px solid var(--blanco); border-radius: 50%; box-shadow: var(--glow-estrella), inset 0 0 0 5px rgba(255,255,255,.25); } .hero__sello:empty { display: none; } .hero__intro { display: inline-block; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(.72rem, 3.4vw, .9rem); color: var(--cyan); padding: .5em 1.1em; border: 1px solid rgba(56, 225, 255, .5); border-radius: 999px; background: rgba(56, 225, 255, .08); box-shadow: var(--glow-cyan); } .hero__nombres { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.2rem, 18vw, 7rem); line-height: .94; letter-spacing: .02em; color: var(--blanco); margin: var(--esp-4) 0 var(--esp-3); text-shadow: 0 0 12px rgba(244, 247, 255, .7), 0 0 30px rgba(56, 225, 255, .55), 0 0 48px rgba(255, 79, 216, .4); } .hero__amp { display: block; font-size: .4em; color: var(--cyan); } .hero__sub { font-family: var(--f-texto); font-weight: 500; font-size: clamp(.98rem, 4vw, 1.18rem); color: var(--texto); max-width: 28ch; margin: 0 auto var(--esp-4); } .hero__fecha { display: inline-block; font-family: var(--f-display); font-weight: 600; letter-spacing: .14em; font-size: clamp(.9rem, 4vw, 1.1rem); color: var(--estrella-c); padding: .45em 1em; border-radius: var(--radio-sm); background: rgba(255, 216, 77, .1); border: 1px solid rgba(255, 216, 77, .45); box-shadow: var(--glow-estrella); } .hero__scroll { margin-top: var(--esp-6); display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--f-texto); font-weight: 600; font-size: .82rem; letter-spacing: .06em; color: var(--magenta); text-decoration: none; } .hero__flecha { display: block; font-size: 1.7rem; line-height: .6; animation: rebote 1.8s ease-in-out infinite; } .hero__scroll-txt { text-transform: uppercase; letter-spacing: .14em; } @keyframes rebote { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} } /* ========================================================= ESTRUCTURA — secciones flotando en el cosmos ========================================================= */ main { padding: var(--esp-6) var(--esp-3) var(--esp-7); } .seccion { position: relative; max-width: 580px; margin: 0 auto var(--esp-5); padding: var(--esp-6) var(--esp-4); text-align: center; background: var(--panel); border: 1px solid var(--panel-bord); border-radius: var(--radio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 14px 40px rgba(4, 6, 26, .5), inset 0 0 0 1px rgba(255,255,255,.03); } .galeria.seccion { padding-left: 0; padding-right: 0; overflow: hidden; } /* DIVISOR — estrella de 4 puntas con destellos a los lados (todo por CSS) */ .divisor { position: relative; display: block; width: 170px; height: 22px; margin: 0 auto var(--esp-4); font-size: 0; } .divisor::before { /* destello izq→der */ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(56,225,255,.5) 35%, var(--magenta) 50%, rgba(56,225,255,.5) 65%, transparent); } .divisor::after { /* destello de 4 puntas al centro */ content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); background: var(--estrella); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); box-shadow: var(--glow-estrella); } /* Títulos de sección */ .seccion__titulo, .bienvenida__titulo { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.12; color: var(--blanco); letter-spacing: .02em; margin-bottom: var(--esp-4); text-shadow: 0 0 18px rgba(56, 225, 255, .35); } /* ========================================================= BIENVENIDA ========================================================= */ .bienvenida__titulo { color: var(--estrella-c); text-shadow: var(--glow-estrella); } .bienvenida__texto { max-width: 480px; margin: 0 auto; color: var(--texto); font-size: 1.08rem; } /* ========================================================= CUENTA REGRESIVA — consola de despegue ========================================================= */ .contador__lista { list-style: none; display: flex; gap: var(--esp-2); justify-content: center; flex-wrap: wrap; } .contador__item { min-width: 70px; padding: var(--esp-3) var(--esp-2); background: rgba(10, 14, 42, .6); border: 1px solid rgba(56, 225, 255, .35); border-radius: var(--radio-sm); box-shadow: inset 0 0 16px rgba(56, 225, 255, .12); } .contador__num { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 8vw, 2.5rem); line-height: 1; color: var(--cyan); text-shadow: var(--glow-cyan); } .contador__label { display: block; margin-top: var(--esp-2); font-family: var(--f-texto); font-weight: 600; font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; color: var(--texto-2); } /* ========================================================= EVENTO (la fiesta) + MAPA ========================================================= */ .evento__hora { display: inline-block; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--cyan); margin-bottom: var(--esp-3); } .evento__lugar { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 5.5vw, 1.9rem); color: var(--blanco); line-height: 1.15; text-shadow: 0 0 16px rgba(255, 79, 216, .35); } .evento__direccion { color: var(--texto-2); margin: var(--esp-2) 0 var(--esp-4); } .evento__mapa { border: 1px solid var(--panel-bord); border-radius: var(--radio-sm); overflow: hidden; box-shadow: var(--glow-cyan); } .evento__mapa iframe { width: 100%; height: 290px; display: block; filter: saturate(.85) brightness(.92); } /* Botones de acción (cohete neón) */ .evento__boton, .mesa-regalos__link { display: inline-block; margin-top: var(--esp-4); padding: .7em 1.6em; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: var(--espacio); background: linear-gradient(120deg, var(--cyan), var(--magenta)); box-shadow: var(--glow-cyan); transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion); } .evento__boton:hover, .mesa-regalos__link:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255, 79, 216, .5); filter: brightness(1.06); } .evento__boton:active, .mesa-regalos__link:active { transform: translateY(0); } /* ========================================================= ITINERARIO — plan de vuelo numerado ========================================================= */ .itinerario__lista { list-style: none; max-width: 460px; margin: 0 auto; text-align: left; counter-reset: paso; } .itinerario__item { display: grid; grid-template-columns: 40px 84px 1fr; align-items: center; gap: var(--esp-2); padding: var(--esp-3) 0; border-bottom: 1px dashed rgba(120, 130, 230, .3); } .itinerario__item:last-child { border-bottom: none; } .itinerario__item::before { counter-increment: paso; content: counter(paso); width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--espacio); background: radial-gradient(circle at 35% 30%, var(--estrella-c), var(--estrella) 75%); border-radius: 50%; box-shadow: var(--glow-estrella); } .itinerario__hora { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--cyan); } .itinerario__actividad { color: var(--texto); } /* ========================================================= DRESS CODE — tu traje espacial ========================================================= */ .dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--texto); } .dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .dress-code__color { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--blanco); box-shadow: 0 0 14px rgba(56, 225, 255, .3); } /* ========================================================= MESA DE REGALOS ========================================================= */ .mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); color: var(--texto); } .mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; } .mesa-regalos__link { margin-top: 0; } /* ========================================================= GALERÍA — bitácora estelar ========================================================= */ .carrusel { position: relative; } .carrusel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carrusel__track::-webkit-scrollbar { display: none; } .carrusel__slide { flex: 0 0 84%; scroll-snap-align: center; padding: 0 var(--esp-2); } .carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--panel-bord); border-radius: var(--radio-sm); box-shadow: 0 0 18px rgba(56, 225, 255, .2); cursor: zoom-in; } .carrusel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(56, 225, 255, .5); background: rgba(10, 14, 42, .7); color: var(--cyan); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: var(--glow-cyan); } .carrusel__nav--prev { left: 10px; } .carrusel__nav--next { right: 10px; } .carrusel__dots { display: flex; justify-content: center; gap: 9px; margin-top: var(--esp-4); } .carrusel__dot { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid rgba(56, 225, 255, .6); background: transparent; padding: 0; cursor: pointer; border-radius: 2px; } .carrusel__dot.is-active { background: var(--estrella); border-color: var(--estrella); box-shadow: var(--glow-estrella); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 26, .94); padding: var(--esp-3); opacity: 0; visibility: hidden; transition: opacity var(--transicion); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__img { max-width: 100%; max-height: 85vh; border: 1px solid rgba(56, 225, 255, .5); border-radius: var(--radio-sm); box-shadow: var(--glow-cyan); } .lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: none; border: none; color: var(--cyan); font-size: 2.4rem; cursor: pointer; line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cyan); font-size: 2.6rem; cursor: pointer; padding: var(--esp-2); } .lightbox__nav--prev { left: var(--esp-1); } .lightbox__nav--next { right: var(--esp-1); } /* ========================================================= RSVP — registro de tripulación ========================================================= */ .rsvp__nota { color: var(--texto-2); margin-bottom: var(--esp-4); } .rsvp__form { max-width: 420px; margin: 0 auto; text-align: left; } .rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-3); font-size: .82rem; color: var(--cyan); } .campo { margin-bottom: var(--esp-3); border: none; } .campo__label { display: block; margin-bottom: var(--esp-1); font-family: var(--f-display); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); } .campo__input { width: 100%; padding: var(--esp-2) var(--esp-3); font-family: var(--f-texto); font-size: 1rem; color: var(--blanco); background: rgba(10, 14, 42, .55); border: 1px solid var(--panel-bord); border-radius: var(--radio-sm); transition: border-color var(--transicion), box-shadow var(--transicion); } .campo__input::placeholder { color: var(--texto-2); opacity: .7; } .campo__input:focus-visible { outline: none; border-color: var(--cyan); box-shadow: var(--glow-cyan); } .rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-2); } .rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; color: var(--texto); } .rsvp__radio input { accent-color: var(--magenta); width: 18px; height: 18px; } .boton { display: block; width: 100%; margin-top: var(--esp-3); padding: .85em; border: none; border-radius: 999px; font-family: var(--f-display); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; color: var(--espacio); background: linear-gradient(120deg, var(--cyan), var(--magenta)); box-shadow: var(--glow-cyan); transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion); } .boton:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255, 79, 216, .5); filter: brightness(1.06); } .boton:active { transform: translateY(0); } .boton:focus-visible { outline: 3px solid var(--estrella); outline-offset: 3px; } .boton:disabled { opacity: .55; cursor: default; filter: none; transform: none; } .rsvp__radio input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 600; min-height: 1.4em; } .rsvp__estado--ok { color: var(--estrella-c); } .rsvp__estado--error { color: #ff8aa3; } /* foco visible en links del hero/scroll */ .hero__scroll:focus-visible, .evento__boton:focus-visible, .mesa-regalos__link:focus-visible, .carrusel__nav:focus-visible, .carrusel__dot:focus-visible, .musica:focus-visible, .lightbox__cerrar:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } /* ========================================================= MÚSICA (botón flotante) ========================================================= */ .musica { position: fixed; bottom: var(--esp-3); right: var(--esp-3); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(56, 225, 255, .55); background: rgba(10, 14, 42, .85); color: var(--cyan); cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; box-shadow: var(--glow-cyan); } .musica[aria-pressed="true"] .musica__icono { animation: girar 4s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ========================================================= PIE — colofón estelar ========================================================= */ .pie { position: relative; text-align: center; padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 60px); } .pie::before { content: ""; position: absolute; top: var(--esp-5); left: 50%; transform: translateX(-50%); width: 18px; height: 18px; background: var(--estrella); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); box-shadow: var(--glow-estrella); } .pie__nombres { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; color: var(--blanco); text-shadow: 0 0 14px rgba(56, 225, 255, .55), 0 0 30px rgba(255, 79, 216, .4); } .pie__fecha { font-family: var(--f-display); font-weight: 500; letter-spacing: .12em; font-size: .8rem; margin: var(--esp-2) 0 var(--esp-3); color: var(--texto-2); } .pie__credito { font-family: var(--f-texto); font-weight: 500; font-size: .9rem; color: var(--cyan); } /* ========================================================= BARRA DE PREVIEW (dev) ========================================================= */ .preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(4, 6, 26, .95); color: #fff; padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; } .preview__chip { background: rgba(255,255,255,.12); color: #fff; border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; } .preview__chip.is-active { background: var(--cyan); color: #04122a; } /* ========================================================= RESPONSIVE ========================================================= */ @media (min-width: 768px) { main { padding-top: var(--esp-7); } .seccion { max-width: 640px; padding: var(--esp-7) var(--esp-6); } .hero__planeta { width: 170px; height: 170px; right: -20px; } .hero__planeta::after { width: 270px; height: 70px; } .carrusel__slide { flex: 0 0 60%; } .carrusel__slide img { aspect-ratio: 16/10; } .evento__mapa iframe { height: 350px; } } /* ========================================================= ACCESIBILIDAD — prefers-reduced-motion ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .fade-up { opacity: 1; transform: none; } }