/* ============================================================ Capa de animacion compartida por todas las paginas. Se carga desde el , antes que nada, para que la cortina de carga pinte sin parpadeo. Todo lo que hay aqui es decorativo: si el navegador no soporta alguna pieza, o si el visitante pidio menos movimiento, la pagina se ve completa y quieta. Nunca se oculta contenido de forma que dependa de que el JavaScript llegue a ejecutarse. ============================================================ */ /* ---------- 1. Cortina de carga ---------- Vive en pseudoelementos de , no en un nodo del cuerpo, para poder existir desde la primera linea que parsea el navegador. Se retira sola con una animacion: aunque el JavaScript falle a medias, nunca deja la pantalla en blanco. */ html.bc-cargando { overflow: hidden; } html.bc-cargando::before, html.bc-cargando::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; } html.bc-cargando::before { background: #ffffff; animation: bcCortina .42s cubic-bezier(.4,0,.2,1) .52s forwards; } html.bc-cargando::after { z-index: 10000; background: url("imagenes/logotipo/web/favicon-180.png") center center / 74px 74px no-repeat; animation: bcSelloEntra .46s cubic-bezier(.2,.7,.3,1) both, bcSelloSale .34s cubic-bezier(.4,0,1,1) .5s forwards; } @keyframes bcCortina { to { opacity: 0; visibility: hidden; } } @keyframes bcSelloEntra { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } @keyframes bcSelloSale { to { opacity: 0; transform: scale(1.14); } } /* ---------- 2. Aparicion por tipo de elemento ---------- Cada familia entra distinto. El titulo se descubre de abajo hacia arriba con un recorte, que es lo que mejor luce con una serif; el texto solo sube; la imagen se acerca; el boton da un pequeno impulso; el icono gira al aparecer. */ /* Titulos: recorrido mas largo que el del texto y una apertura de escala desde la esquina inferior izquierda, de modo que el titular parezca asentarse en su sitio. Aqui hubo un clip-path que descubria el titulo tras un recorte. Se retiro: el estado final llevaba un inset negativo, el navegador descartaba esa declaracion y el titulo se quedaba con el recorte cerrado del estado inicial, es decir, invisible. No se sustituye por otro recorte ni por una mascara porque cualquiera de los dos seguiria dependiendo de que el estado final se aplique entero; con opacidad y transformacion, si algo fallara, el titulo se ve igual. */ [data-bc-anim="titulo"] { opacity: 0; transform: translateY(34px) scale(.985); transform-origin: left bottom; transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1); } [data-bc-anim="titulo"].bc-on { opacity: 1; transform: none; } /* Texto: subida corta y limpia, un poco despues que el titulo. */ [data-bc-anim="texto"] { opacity: 0; transform: translateY(16px); transition: opacity .66s ease, transform .66s cubic-bezier(.22,.61,.36,1); } [data-bc-anim="texto"].bc-on { opacity: 1; transform: none; } /* Imagenes: acercamiento leve que se deshace al entrar. */ [data-bc-anim="imagen"] { opacity: 0; transform: scale(1.055); transition: opacity .9s ease, transform 1.05s cubic-bezier(.22,.61,.36,1); } [data-bc-anim="imagen"].bc-on { opacity: 1; transform: none; } /* Botones: impulso con un rebase muy corto al final. */ [data-bc-anim="boton"] { opacity: 0; transform: translateY(12px) scale(.94); transition: opacity .42s ease, transform .58s cubic-bezier(.34,1.56,.5,1); } [data-bc-anim="boton"].bc-on { opacity: 1; transform: none; } /* Iconos: giran y crecen desde su centro. */ [data-bc-anim="icono"] { opacity: 0; transform: scale(.62) rotate(-14deg); transition: opacity .46s ease, transform .68s cubic-bezier(.34,1.4,.5,1); } [data-bc-anim="icono"].bc-on { opacity: 1; transform: none; } /* Tarjetas y listados: entran en bloque, mas sobrios. */ [data-bc-anim="pieza"] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); } [data-bc-anim="pieza"].bc-on { opacity: 1; transform: none; } /* ---------- 3. Linea viva en las bandas azules ---------- Una linea celeste que se funde en blanco recorre el borde superior y el inferior en sentidos opuestos, de modo que la banda parece rodeada por un trazo que circula. */ .bc-borde-vivo { position: relative; } .bc-borde-vivo::before, .bc-borde-vivo::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 4; pointer-events: none; background-image: linear-gradient(90deg, rgba(143,211,230,0) 0%, rgba(143,211,230,.35) 24%, #8FD3E6 44%, #ffffff 50%, #8FD3E6 56%, rgba(143,211,230,.35) 76%, rgba(143,211,230,0) 100%); background-repeat: no-repeat; background-size: 42% 100%; opacity: .9; } .bc-borde-vivo::before { top: 0; animation: bcTrazoIda 7.5s cubic-bezier(.6,0,.4,1) infinite; } .bc-borde-vivo::after { bottom: 0; animation: bcTrazoVuelta 7.5s cubic-bezier(.6,0,.4,1) infinite; } @keyframes bcTrazoIda { 0% { background-position: -45% 0; } 100% { background-position: 145% 0; } } @keyframes bcTrazoVuelta { 0% { background-position: 145% 0; } 100% { background-position: -45% 0; } } /* ---------- 4. Sombra en las imagenes que no la traian ---------- La reparte el JavaScript solo a las imagenes grandes que no heredan ya una sombra del contenedor, para no tocar logotipos, iconos ni ornamentos. */ .bc-sombra { box-shadow: 0 30px 58px -40px rgba(31,98,141,.85); } .bc-sombra-caja { border-radius: 22px; box-shadow: 0 30px 58px -40px rgba(31,98,141,.85); } /* ---------- 5. Movil ---------- Los estilos del sitio van en linea, asi que aqui hace falta !important para poder corregirlos. */ @media (max-width: 680px) { /* Imagenes: nunca desbordan y conservan su proporcion. */ img { max-width: 100%; height: auto; } .bc-profe-foto img, .bc-ficha-foto img, .bc-pase img { height: 100% !important; } /* Los recuadros muy anchos se vuelven menos apaisados para que la figura no quede diminuta en una pantalla estrecha. */ .bc-profe-foto { min-height: 320px !important; } /* Botones: area de toque comoda y ancho completo cuando van solos o en pareja. */ .bc-cta { width: 100%; justify-content: center; padding: 17px 26px !important; font-size: 15.5px !important; } .bc-botones { flex-direction: column; align-items: stretch; gap: 12px !important; } .bc-botones .bc-cta { width: 100%; } /* Titulares y texto centrados en las bandas de cierre, que es donde el bloque queda suelto sin nada al lado. */ .bc-centrar-movil { text-align: center !important; } .bc-centrar-movil .bc-rotulo { justify-content: center; } /* La ficha de precio deja de repartirse a los lados. */ .bc-oferta-precio { flex-direction: column; align-items: flex-start !important; } .bc-oferta-precio .bc-cta { width: 100%; } /* Menos recorrido en las entradas: en pantalla corta un desplazamiento largo se siente lento. */ [data-bc-anim="titulo"] { transform: translateY(16px); } [data-bc-anim="pieza"], [data-bc-anim="texto"] { transform: translateY(12px); } [data-bc-anim="imagen"] { transform: scale(1.03); } /* Aire entre secciones. En movil los bloques se apilan y el mismo hueco que en escritorio separa, aqui parece un vacio. Las medidas van en el atributo style de cada seccion, asi que se reconocen por su valor y hace falta !important para poder rebajarlas. */ section[style*="margin-top:72px"] { margin-top: 48px !important; } section[style*="margin-top:70px"] { margin-top: 46px !important; } section[style*="margin-top:66px"] { margin-top: 44px !important; } section[style*="margin-top:64px"] { margin-top: 42px !important; } section[style*="margin:78px 0 0"] { margin-top: 52px !important; } section[style*="padding-top:76px"] { padding-top: 48px !important; } /* Relleno interior de las bandas a sangre. */ section [style*="padding:66px 32px"], section [style*="padding:64px 32px"] { padding-top: 46px !important; padding-bottom: 46px !important; } } @media (max-width: 420px) { html.bc-cargando::after { background-size: 60px 60px; } } /* ---------- 6. Respeto por quien pide menos movimiento ---------- */ @media (prefers-reduced-motion: reduce) { html.bc-cargando::before, html.bc-cargando::after { display: none; } html.bc-cargando { overflow: visible; } [data-bc-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .bc-borde-vivo::before, .bc-borde-vivo::after { animation: none; background-position: 50% 0; } }