/* ══════════════════════════════════════════════════════════════════ PORTADA DE LOALIA Copia la estructura y los efectos de la portada del competidor, con la marca y los servicios de Loalia. Se apoya en `pagina-producto.css` (barra, menú, botón, muro que desfila) y añade aquí lo que solo usa la portada. Los efectos nuevos que salen de ahí: 1. Fondo morado oscuro en degradado radial. 2. Titulares con el color «relleno» por un degradado. 3. Curvas blancas que separan secciones (SVG a todo ancho). 4. Manchas de color desenfocadas detrás de las maquetas. 5. La rueda de formatos: cinco tarjetas puestas en círculo. 6. Pasos numerados con la cifra escrita a mano. 7. Tarjetas de cita en morado con la comilla amarilla. 8. La nube de integraciones. ══════════════════════════════════════════════════════════════════ */ /* ── La barra, cuando va sobre el fondo oscuro ─────────────────── */ .barra.oscura { background: rgba(5, 2, 41, .55); border-bottom-color: rgba(255,255,255,.10); } .barra.oscura .menu { color: rgba(255,255,255,.72); } .barra.oscura .menu a:hover, .barra.oscura .menu .grupo > button:hover { color: #fff; } .barra.oscura .menu .panel { background: #fff; } .barra.oscura .menu .panel a { color: var(--tinta); } .barra.oscura .mini-cta { background: var(--loalia-claro); } .barra.oscura .menu-movil > summary { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.25); } .barra.oscura .menu-movil .barras, .barra.oscura .menu-movil .barras::before, .barra.oscura .menu-movil .barras::after { background: #fff; } .barra.oscura .menu-movil[open] .barras { background: transparent; } .barra.oscura img { filter: brightness(0) invert(1); } /* ── EFECTO 1 · el fondo morado oscuro de la portada ───────────── */ /* Es UN solo fondo para toda la parte de arriba: la barra, la tarjeta grande, la cita y las dos tarjetas de «sin / con». El centro del degradado cae justo donde va la cita, por eso ahí el morado es brillante y en los bordes casi negro. Es la clave del efecto: no son dos secciones pegadas, es una sola. */ .oscuro { background: radial-gradient(89.8% 46.9% at 50% 58%, #6425C9 0%, #0A0620 100%); position: relative; overflow: hidden; } /* ── EFECTO 2 · titulares rellenos con un degradado ────────────── */ .degradado { background-image: radial-gradient(50% 50% at 50% 50%, var(--loalia-claro) 0%, var(--loalia) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; padding: .08em 0; margin: -.08em 0; } .degradado.claro { background-image: radial-gradient(50% 150% at 50% 50%, #F3F6F9 1%, var(--loalia-claro) 155%); } /* ── EFECTO 3 · las curvas que separan secciones ───────────────── */ .curva { display: block; width: 100%; height: auto; } .curva-abajo { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; } /* ── La tarjeta grande de la portada ───────────────────────────── */ .marco { width: 100%; max-width: 1200px; margin-inline: auto; padding: 40px 20px 80px; } .tarjeton-portada { background: #fff; border: 4px solid rgba(228,229,237,.5); border-radius: 40px; overflow: hidden; display: grid; grid-template-columns: 1fr; box-shadow: 0 8px 8px -4px rgba(0,0,0,.03), 0 20px 24px -4px rgba(0,0,0,.08); } @media (min-width: 940px) { .tarjeton-portada { grid-template-columns: 1fr 1fr; } } .columna-texto { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 24px; } @media (max-width: 620px) { .columna-texto { padding: 28px 22px; } } .cita-portada { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(26px, 4.2vw, 40px); } .firma-portada { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .firma-portada .redonda { width: 62px; height: 62px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--loalia-claro), var(--magenta)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 22px; } .firma-portada b { display: block; font-weight: 600; font-size: 16px; } .firma-portada span { font-size: 15px; color: var(--gris); } .entradilla { font-size: 17px; color: var(--gris); line-height: 1.5; } .ventajas-portada { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .ventajas-portada li { display: flex; align-items: flex-start; gap: 14px; font-weight: 600; font-size: 16px; } .ventajas-portada .ok { color: var(--verde); font-weight: 800; font-size: 19px; line-height: 1.3; } /* ── EFECTO 4 · el panel con las manchas desenfocadas ──────────── */ .columna-imagen { position: relative; overflow: hidden; min-height: 420px; background: linear-gradient(150deg, #EDE6FF 0%, #F6F1FF 45%, #FFE9F4 100%); display: grid; place-items: center; padding: 36px 32px; } .mancha { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: multiply; pointer-events: none; } .mancha.a { width: 460px; height: 460px; background: rgba(181,222,240,.55); top: -140px; left: -170px; } .mancha.b { width: 480px; height: 480px; background: rgba(212,49,174,.42); bottom: -170px; right: -160px; } .pila { position: relative; z-index: 1; width: 100%; max-width: 420px; } .pila .maqueta { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 14px; box-shadow: 0 10px 10px -4px rgba(0,0,0,.06), 0 30px 40px -12px rgba(0,0,0,.12); } .pila .maqueta + .maqueta { margin-top: -34px; } .pila .maqueta:nth-child(1) { transform: rotate(-3deg) translateX(-6%); } .pila .maqueta:nth-child(2) { transform: rotate(2.5deg) translateX(8%); z-index: 2; } .pila .maqueta:nth-child(3) { transform: rotate(-1.5deg) translateX(-2%); z-index: 3; } /* ── Bloque de cita centrada sobre morado ──────────────────────── */ .cita-grande { max-width: 768px; margin-inline: auto; text-align: center; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(26px, 4vw, 40px); } .firma-centrada { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; color: #fff; } .firma-centrada .redonda { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--loalia-claro), var(--magenta)); display: grid; place-items: center; font-weight: 700; font-size: 20px; } .firma-centrada b { font-weight: 600; font-size: 16px; } .firma-centrada span { font-size: 15px; color: rgba(255,255,255,.75); } /* ── EFECTO 5 · la rueda de formatos ─────────────────────────── Cinco tarjetas colgadas de una columna que se gira 72° cada vez. Solo se monta en pantallas anchas: en el móvil se ven en fila. */ .rueda { position: relative; margin-top: 40px; } .rueda .aro-formatos { display: none; } .rueda .centro-rueda { position: relative; z-index: 2; max-width: 44rem; margin: 0 auto; padding: 0 20px; text-align: center; } /* ── La rueda que gira ───────────────────────────────────────────── Medido en la web del competidor, con estos numeros clavados: · la ventana por la que se ve mide 720 px de alto y CORTA lo que se sale (`overflow: hidden`); · el centro del aro esta a 653 px del borde de arriba, o sea casi abajo del todo; · las tarjetas orbitan a 472 px de ese centro; · el aro entero da una vuelta cada 30 segundos, sin parar. Asi solo se ve el trozo de arriba del circulo: las tarjetas entran por una esquina de abajo y se van por la otra. NO se apagan en mitad del aire (eso era lo que se notaba raro), se salen por el borde y ya esta, igual que las suyas. */ @media (min-width: 900px) { .rueda { height: 720px; margin-top: 0; overflow: hidden; /* La ventana se funde con el fondo por los lados y por abajo: dos degradados cruzados que dejan el centro opaco y llevan los bordes a transparente. Asi las tarjetas no se cortan contra una linea recta: se desvanecen al llegar al borde. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%); mask-composite: intersect; } .rueda-movil { display: none; } .rueda .aro-formatos { display: block; position: absolute; left: 50%; top: 653px; width: 0; height: 0; animation: girar-aro 30s linear infinite; } /* Cada tarjeta cuelga de un radio girado 60 grados mas que el anterior, a 472 px del centro. Son SEIS: los seis formatos que dice la web. Antes eran cinco (a 72 grados) y faltaba el aviso emergente, que fue el que echo en falta Rafael. */ .rueda .radio { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(calc(var(--i) * 60deg)) translateY(-472px); } .rueda .pieza { position: absolute; left: 0; top: 0; width: 280px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; /* Al entrar y al salir por los lados, la tarjeta se difumina y se vuelve transparente, como las suyas, en vez de cortarse contra el borde. Misma duracion que el giro (30 s) y un retraso por tarjeta (6 tarjetas -> 5 s cada una) para que cada una se apague justo cuando le toca. */ /* Antes cada tarjeta se fundia sola. Rafael aclaro que en la web de referencia lo que se funde es el BORDE de la ventana, no la tarjeta: ver la mascara de .rueda. */ } /* El texto, dentro del aro, por debajo de la tarjeta de arriba. */ .rueda .centro-rueda { position: absolute; left: 0; right: 0; top: 404px; max-width: none; } .rueda .centro-rueda h2, .rueda .centro-rueda .bajada { max-width: 32rem; margin-left: auto; margin-right: auto; } } /* Pantallas de escritorio pequenas: el mismo dibujo, mas apretado. */ @media (min-width: 900px) and (max-width: 1150px) { .rueda { height: 660px; } .rueda .aro-formatos { top: 596px; } .rueda .radio { transform: rotate(calc(var(--i) * 60deg)) translateY(-430px); } .rueda .pieza { width: 240px; } .rueda .centro-rueda { top: 372px; } } @keyframes girar-aro { to { transform: rotate(360deg); } } /* 0 % = la tarjeta esta arriba del todo. Se apaga entre los 72 y los 108 grados (bajando por la derecha) y vuelve entre los 252 y los 288 (subiendo por la izquierda). */ @keyframes fundir-pieza { 0%, 20% { opacity: 1; filter: blur(0); } 30% { opacity: 0; filter: blur(8px); } 70% { opacity: 0; filter: blur(8px); } 80%, 100% { opacity: 1; filter: blur(0); } } /* ── Las tarjetas van cambiando de ejemplo ───────────────────────── Medido en su web: cambian cada SEGUNDO y de golpe — son GIF, no hay fundido. Antes las nuestras tardaban cuatro segundos y se cruzaban despacio, y por eso parecian mas lentas. Cinco imagenes por tarjeta, una por segundo: la vuelta entera son cinco segundos. */ .ficha-formato { position: relative; } .ficha-formato .capa { display: block; width: 100%; } .ficha-formato .capa + .capa { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .ficha-formato .capa { animation: pasar-ejemplo 5s steps(1, end) infinite; animation-delay: calc((var(--n) - 5) * 1s); } @keyframes pasar-ejemplo { 0% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } /* Si el ordenador tiene las animaciones al minimo: todo quieto y a la vista, sin girar y con un solo ejemplo por tarjeta. */ @media (prefers-reduced-motion: reduce) { .rueda .aro-formatos { animation: none; } .ficha-formato .capa { animation: none; } .ficha-formato .capa + .capa { opacity: 0; } } /* Medido en su web: la tarjeta es CUADRADA y la imagen la ocupa entera. Antes la nuestra era apaisada y llevaba un marco gris de 16 px alrededor, que la hacia parecer una captura pegada. */ .ficha-formato { width: 268px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #F4F4F8; } .ficha-formato svg { display: block; width: 100%; height: 100%; } .rotulo-mano { font-family: var(--mano); font-size: 24px; font-weight: 600; color: var(--tinta); text-align: center; } .rueda-movil { display: grid; gap: 22px; margin-top: 32px; } /* En ordenador la lista de movil NO se ve: ahi esta la rueda. Esta regla tiene que ir DESPUES de la de arriba, porque las dos pesan igual y gana la ultima. Al reordenar el CSS de la rueda se quedo por delante y la lista salia entera debajo de la rueda. */ @media (min-width: 900px) { .rueda-movil { display: none; } } .rueda-movil .par-formato { display: grid; gap: 8px; justify-items: center; } .velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(255,255,255,0) 38%, #fff 84%); } /* ── EFECTO 6 · «Como funciona», con las medidas del competidor ── Medido en su web: arriba dos columnas, titular de 584 px y tarjeta de 496 px rotulo letra a mano, 24 px, peso 700, morado titular 48 px, peso 800, interlineado 57.6, ultima linea morada tarjeta 496 x 212, esquinas 16, relleno 24, degradado a 105 grados, sombra 0 1px 32px 4px al 25 %, frase 24 px / 36 en dos tonos (blanco y blanco al 75 %), cara de 56 px, nombre 16 px peso 600, web 16 px peso 400 pasos 80 px por debajo; 4 columnas de 266 con 32 de hueco; ilustracion 266 x 140 con esquinas 16; numero en circulo morado de 40 px a 16 / 16 de la esquina, letra a mano 28 peso 700, con sombra; 24 px hasta el titulo (24 px, peso 800); 8 px hasta el texto (16 px / 24, gris 75,85,99). */ .cabecera-pasos { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 1000px) { .cabecera-pasos { grid-template-columns: 584px 496px; justify-content: space-between; } } .rotulo-mano-izq { margin: 0; text-align: left; font-family: var(--mano); font-size: 24px; font-weight: 700; line-height: 36px; color: var(--loalia); } .titulo-pasos { margin: 24px 0 0; text-align: left; font-family: var(--display); font-size: clamp(34px, 3.8vw, 48px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #1F2937; } .titulo-pasos .morado { color: var(--loalia); } .cita-degradada { margin-top: 21px; border-radius: 16px; padding: 24px; color: #fff; background: linear-gradient(105deg, #8E5CF5 0%, #5B2FD6 100%); box-shadow: 0 1px 32px 4px rgba(0,0,0,.25); display: grid; gap: 10px; align-content: start; } .cita-degradada .estrellas-cita { display: flex; gap: 4px; height: 16px; } .cita-degradada .estrellas-cita svg { width: 16px; height: 16px; display: block; } .cita-degradada .frase { margin: 0; font-family: var(--cuerpo); font-size: 24px; font-weight: 600; line-height: 36px; } .cita-degradada .frase .tenue { color: rgba(243,246,249,.75); } .cita-degradada .quien { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .cita-degradada .avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; /* El fondo del circulo va cambiando de color despacio: blanco, crema, rosa palido, lila, menta y vuelta. Tonos claros para que la estrella se siga leyendo encima. */ animation: fondo-marca 14s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.28); } /* El halo: un anillo con degradado que da la vuelta despacio. */ .cita-degradada .avatar::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, #FFC53D, #E0339B, #8E5CF5, #FFC53D); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: girar-halo 6s linear infinite; } .cita-degradada .avatar svg { position: relative; width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(91,47,214,.35)); } /* La estrella chica parpadea, como un brillo. */ .cita-degradada .estrella-chica { transform-origin: 18.5px 18.5px; animation: brillar 2.4s ease-in-out infinite; } @keyframes girar-halo { to { transform: rotate(360deg); } } @keyframes fondo-marca { 0% { background: #FFFFFF; } 20% { background: #FFF1C2; } 40% { background: #FFD6E8; } 60% { background: #E6DBFF; } 80% { background: #D3F4E6; } 100% { background: #FFFFFF; } } @keyframes brillar { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cita-degradada .avatar, .cita-degradada .avatar::before, .cita-degradada .estrella-chica { animation: none; } } /* El nombre, en el rosa del logo, plano y sin efectos: el degradado se perdia sobre el morado de la tarjeta. */ .cita-degradada .quien b { display: block; font-size: 16px; font-weight: 800; line-height: 24px; color: #E0339B; background: none; -webkit-text-fill-color: #E0339B; text-shadow: none; } .cita-degradada .quien span { font-size: 16px; font-weight: 400; line-height: 24px; } .pasos { display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 80px; } @media (min-width: 640px) { .pasos { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .pasos { grid-template-columns: repeat(4, 1fr); } } .paso .lienzo { position: relative; aspect-ratio: 456 / 240; border: 0; padding: 0; border-radius: 16px; overflow: hidden; background: #EDE6FF; display: block; } .paso .lienzo svg { display: block; width: 100%; height: 100%; max-width: none; } .paso .numero { position: absolute; left: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--loalia); color: #fff; display: grid; place-items: center; font-family: var(--mano); font-size: 28px; font-weight: 700; line-height: 1; box-shadow: 8px 12px 32px rgba(0,0,0,.10), 31px 49px 58px rgba(0,0,0,.09); } .paso h3 { margin-top: 24px; font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.4; color: #1F2937; } .paso p { margin-top: 8px; font-size: 16px; color: #4B5563; line-height: 24px; } /* ── EFECTO 7 · las tarjetas de cita en morado ─────────────────── */ .par { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; margin-top: 96px; } @media (min-width: 900px) { .par { grid-template-columns: 1fr 1fr; } } .par.invertido .cita-morada { order: 2; } @media (max-width: 899px) { .par.invertido .cita-morada { order: 0; } } .cita-morada { position: relative; border: 4px solid rgba(228,229,237,.5); border-radius: 40px; padding: 32px; overflow: hidden; background: linear-gradient(150deg, #7B2FF7 0%, #5B2FD6 46%, #221046 100%); box-shadow: 8px 12px 32px rgba(0,0,0,.10), 31px 50px 59px rgba(0,0,0,.09); } .cita-morada .comillas { font-family: Georgia, serif; font-size: 84px; line-height: .7; color: #FBBF24; display: block; } .cita-morada blockquote { margin-top: 20px; font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.3; color: rgba(255,255,255,.75); } .cita-morada blockquote b { color: #fff; font-weight: 600; } .cita-morada .quien { display: flex; align-items: center; gap: 16px; margin-top: 28px; } .cita-morada .redonda { width: 72px; height: 72px; border-radius: 50%; flex: none; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 22px; } .cita-morada .nombre { font-family: var(--mano); font-size: 28px; font-weight: 600; color: #fff; } .cita-morada .cargo { font-size: 15px; color: rgba(255,255,255,.8); } .bloque-funcion h2 { text-align: left; } .bloque-funcion .epigrafe { text-align: left; } .bloque-funcion .bajada { text-align: left; margin-left: 0; } .rejilla-iconos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 560px) { .rejilla-iconos { grid-template-columns: 1fr 1fr; } } .rejilla-iconos .icono { width: 56px; height: 56px; border-radius: 16px; background: rgba(91,47,214,.09); color: var(--loalia); display: grid; place-items: center; } .rejilla-iconos .icono svg { width: 28px; height: 28px; } .rejilla-iconos h3 { margin-top: 14px; font-family: var(--display); font-size: 19px; font-weight: 800; } .rejilla-iconos p { margin-top: 6px; font-size: 15px; color: var(--gris); line-height: 1.55; } /* ── EFECTO 8 · la nube de integraciones ───────────────────────── */ .nube-fila { display: grid; gap: 56px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .nube-fila { grid-template-columns: 1fr 1fr; } } .nube { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 480px; } .nube .aro-fondo { position: absolute; width: min(460px, 92%); aspect-ratio: 1; border: 4px solid rgba(228,229,237,.5); border-radius: 50%; overflow: hidden; display: grid; place-items: center; } .nube .aro-fondo i { position: absolute; border-radius: 50%; filter: blur(20px); mix-blend-mode: multiply; opacity: .5; } .nube .aro-fondo i.a { width: 400px; height: 400px; background: rgba(181,222,240,.5); } .nube .aro-fondo i.b { width: 405px; height: 405px; background: #F1BED5; } .nube .columna { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; } .nube .columna.hundida { padding-top: 64px; } .nube .columna.subida { padding-bottom: 64px; } .pastilla { width: 96px; height: 96px; border-radius: 24px; background: rgba(255,255,255,.75); border: 1.5px solid var(--linea); display: grid; place-items: center; box-shadow: 0 1.5px 3px rgba(0,0,0,.1); text-align: center; font-weight: 700; font-size: 13px; color: var(--tinta); padding: 8px; line-height: 1.2; } @media (max-width: 620px) { .pastilla { width: 72px; height: 72px; border-radius: 16px; font-size: 11.5px; } } .lista-nube { display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 8px; } @media (min-width: 560px) { .lista-nube { grid-template-columns: 1fr 1fr; } } .lista-nube h3 { font-family: var(--display); font-size: 22px; font-weight: 800; } .lista-nube p { margin-top: 8px; font-size: 16px; color: var(--gris); line-height: 1.55; } /* ── Bloques «¿tienes una tienda…?» ────────────────────────────── */ .caso .simbolo { width: 136px; height: 136px; border-radius: 50%; background: radial-gradient(60% 60% at 50% 40%, #F3ECFF 0%, #E7DBFF 100%); display: grid; place-items: center; box-shadow: 0 8px 8px -4px rgba(0,0,0,.03), 0 20px 24px -4px rgba(0,0,0,.08); } .caso .simbolo svg { width: 66px; height: 66px; color: var(--loalia); } .caso h2 { text-align: left; margin-top: 24px; font-size: clamp(26px, 3.2vw, 34px); } .caso p { margin-top: 16px; font-size: 17px; color: var(--gris); line-height: 1.55; } /* ── Pie grande, de cuatro columnas ────────────────────────────── */ footer.grande { border-top: 1px solid var(--linea); background: #fff; padding: 64px 0 30px; } footer.grande .columnas { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 640px) { footer.grande .columnas { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (min-width: 1000px) { footer.grande .columnas { grid-template-columns: repeat(4, 1fr); gap: 48px; } } footer.grande h3 { font-family: var(--cuerpo); font-size: 16px; font-weight: 700; color: #333; } footer.grande ul { list-style: none; padding: 0; margin: 15px 0 0; display: grid; gap: 4px; } footer.grande a { font-size: 14px; color: #707684; text-decoration: none; line-height: 1.5; } footer.grande a:hover { color: #8A91A3; } footer.grande .grupo + .grupo { margin-top: 32px; } footer.grande .abajo { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(0,0,0,.1); font-size: 14px; font-weight: 600; color: #666; } /* Ajustes de las secciones de la portada */ main.inicio > section { padding: 96px 0; position: relative; } main.inicio > section.sin-aire-arriba { padding-top: 0; } main.inicio > section.blanca { background: #fff; } main.inicio > section.morada { background: linear-gradient(var(--loalia-claro), var(--loalia)); color: #fff; } main.inicio > section.morada h2 { color: #fff; } main.inicio > section.morada .bajada { color: rgba(255,255,255,.82); } /* ── La nube, en el móvil ────────────────────────────────────────── Cinco columnas de pastillas no caben en 375 px: se salían 42 px por la derecha. Aquí se convierten en una nube que se ajusta sola. */ @media (max-width: 700px) { .nube { flex-wrap: wrap; align-content: center; gap: 10px; min-height: 0; max-width: 320px; margin-inline: auto; padding: 48px 0; } .nube .columna, .nube .columna.hundida, .nube .columna.subida { flex-direction: row; padding: 0; gap: 10px; } .pastilla { width: 64px; height: 64px; border-radius: 14px; font-size: 10.5px; padding: 6px; } .nube .aro-fondo { width: 300px; } } /* ══════════════════════════════════════════════════════════════════ LA MAQUETA DEL PANEL (portada, columna derecha) — 02/09/2026 Es el panel de Loalia dibujado con HTML y CSS, no una foto: se ve nítido en cualquier pantalla, pesa nada, y cambiar un texto no obliga a exportar ninguna imagen. CÓMO SE AJUSTA AL HUECO (y por qué NO se usa `scale`): la primera versión intentaba encogerla con `transform: scale(calc(100cqw / 760))`, y eso NO funciona: dividir una medida entre un número da una medida, y `scale` necesita un número pelado. El navegador se lo saltaba y la maqueta se salía. Lo que sí funciona: se le pone al panel un tamaño de letra atado al ancho del contenedor (`cqw`) y TODO lo de dentro se mide en `em`. Así la maqueta entera crece y encoge sola, sin JavaScript y sin saltos entre tamaños de pantalla. ══════════════════════════════════════════════════════════════════ */ .escena { container-type: inline-size; position: relative; width: 100%; padding-bottom: 26%; } /* ── El panel grande ───────────────────────────────────────────── */ .panel-app { width: 100%; background: #fff; border-radius: 1.33em; overflow: hidden; color: var(--tinta); line-height: 1.35; font-size: clamp(7.5px, 1.72cqw, 12.5px); box-shadow: 0 .05em .05em -.1em rgba(0,0,0,.18), 0 .19em .19em -.2em rgba(0,0,0,.16), 0 2em 2.5em -.5em rgba(0,0,0,.20); } .panel-app .cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.5em 1.67em 1em; } .panel-app .cabecera h4 { font-family: var(--display); font-size: 1.58em; font-weight: 800; display: flex; align-items: center; gap: .5em; } .panel-app .cuenta { font-size: .58em; font-weight: 700; color: var(--gris); background: var(--gris-suave); border-radius: .4em; padding: .2em .55em; } .panel-app .puntos { color: #9AA0B4; letter-spacing: .08em; font-weight: 700; margin-left: auto; margin-right: .8em; } .boton-mini { background: var(--loalia); color: #fff; border-radius: .67em; padding: .67em 1.08em; font-size: 1em; font-weight: 600; white-space: nowrap; } .panel-app .pestanas { display: flex; align-items: center; gap: .5em; padding: 0 1.67em 1.17em; } .panel-app .pestanas .p { border: 1px solid var(--linea); border-radius: .67em; padding: .5em .92em; font-size: .96em; font-weight: 600; color: var(--gris); display: inline-flex; gap: .5em; align-items: center; white-space: nowrap; } .panel-app .pestanas .p.activa { background: var(--gris-suave); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); } .panel-app .pestanas .hueco { flex: 1; } .panel-app .pestanas .redondo { width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid var(--linea); flex: none; } .panel-app .fila { display: grid; grid-template-columns: 12.3em 1fr 7.7em 6.2em; gap: 1.17em; padding: 1.33em 1.67em; border-top: 1px solid var(--linea); align-items: start; } .panel-app .quien { display: flex; gap: .75em; align-items: flex-start; } .panel-app .quien .avatar { width: 2.83em; height: 2.83em; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 1em; font-weight: 700; background: linear-gradient(135deg, var(--loalia-claro), var(--magenta)); } .panel-app .quien b { display: block; font-size: 1.04em; font-weight: 600; } .panel-app .quien span span { font-size: .92em; color: var(--gris); } .panel-app .estrellas { color: #FFA41C; font-size: 1em; letter-spacing: .12em; } .panel-app .texto { margin-top: .5em; font-size: 1em; color: #2A3142; } .panel-app .texto b { font-weight: 700; } .panel-app .etiquetas { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .75em; } .panel-app .etiquetas span { font-size: .87em; font-weight: 600; color: var(--gris); background: var(--gris-suave); border: 1px solid var(--linea); border-radius: .5em; padding: .25em .58em; } .panel-app .marca-tiempo { margin-top: .75em; font-size: .92em; color: var(--gris); display: flex; gap: .58em; align-items: center; } .panel-app .marca-tiempo .corazon { color: var(--loalia); } .panel-app .miniatura { width: 7.7em; height: 6.2em; border-radius: .67em; position: relative; overflow: hidden; background: linear-gradient(150deg, #3B2A5A, #1B1230); } .panel-app .miniatura::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-38%, -50%); border-left: 1.08em solid rgba(255,255,255,.92); border-top: .67em solid transparent; border-bottom: .67em solid transparent; } .panel-app .foto-cliente { width: 7.7em; height: 6.2em; border-radius: .67em; position: relative; background: linear-gradient(150deg, #E9DEFF, #FFE3F0); } .panel-app .foto-cliente::after { content: ""; position: absolute; inset: 1em .83em 1.17em; border-radius: .42em; background: rgba(91,47,214,.16); } .panel-app .chip { font-size: .87em; font-weight: 700; border-radius: .5em; padding: .33em .67em; white-space: nowrap; justify-self: start; } .panel-app .chip.verde { background: #E6F5EF; color: #0E7A57; } .panel-app .chip.gris { background: var(--gris-suave); color: var(--gris); } .panel-app .chip.ambar { background: #FBF1E0; color: #9A6413; } .panel-app .aviso { margin: 0 1.67em 1.33em 15.2em; border: 1px solid var(--linea); border-radius: .83em; padding: .92em 1.08em; font-size: .96em; color: var(--gris); display: flex; gap: 1em; align-items: flex-start; } .panel-app .aviso b { color: var(--tinta); font-weight: 600; } .panel-app .aviso .lineas { flex: 1; } .panel-app .aviso .lineas span { display: block; margin-top: .42em; } /* ── El panel pequeño que se monta encima ──────────────────────── */ .panel-flota { position: absolute; right: -3%; bottom: 0; width: 62%; font-size: clamp(6px, 1.35cqw, 10px); background: #fff; border: 1px solid var(--linea); border-radius: 1.2em; overflow: hidden; padding: 1.2em; box-shadow: 0 3em 6em -1.8em rgba(20,26,38,.42); } .panel-flota .barra-mini { display: flex; gap: .5em; flex-wrap: wrap; } .panel-flota .barra-mini span { font-size: .95em; font-weight: 600; color: var(--gris); border: 1px solid var(--linea); border-radius: .6em; padding: .4em .7em; } .panel-flota .barra-mini span.activa { background: rgba(91,47,214,.10); border-color: rgba(91,47,214,.28); color: var(--loalia); } .panel-flota h5 { margin-top: 1.1em; font-family: var(--display); font-size: 1.4em; font-weight: 800; } .panel-flota .pie-texto { font-size: 1.05em; color: var(--gris); margin-top: .3em; } .panel-flota .filtros { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .9em; } .panel-flota .filtros span { font-size: .95em; font-weight: 600; color: var(--gris); border: 1px solid var(--linea); border-radius: 99em; padding: .3em .8em; } .panel-flota .filtros span.activa { background: rgba(91,47,214,.10); color: var(--loalia); border-color: rgba(91,47,214,.28); } .panel-flota .galeria-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: 1em; } .mini-tarjeta { border-radius: .8em; overflow: hidden; height: 10.4em; padding: 1em; font-size: .9em; line-height: 1.35; display: flex; flex-direction: column; justify-content: space-between; } .mini-tarjeta .estrellitas { color: #FFA41C; font-size: .9em; letter-spacing: .1em; } .mini-tarjeta .autor { font-weight: 700; font-size: .95em; opacity: .85; } .mini-tarjeta.clara { background: #fff; border: 1px solid var(--linea); color: #2A3142; } .mini-tarjeta.oscura { background: #16121F; color: #fff; } .mini-tarjeta.oscura mark { background: #FFD84D; color: #16121F; padding: 0 .2em; border-radius: .2em; } .mini-tarjeta.coral { background: #F0574B; color: #fff; } .mini-tarjeta.ambar { background: #FFC53D; color: #16121F; font-weight: 700; } .mini-tarjeta.coral .rejilla-caras { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; } .mini-tarjeta.coral .rejilla-caras i { display: block; height: 2.2em; border-radius: .45em; background: rgba(255,255,255,.22); } /* En pantallas estrechas el panel flotante tapaba el principal. */ @media (max-width: 700px) { .escena { padding-bottom: 34%; } .panel-flota { right: -2%; width: 72%; } } /* ── La fila de caras + estrellas, debajo del botón ──────────────── Las caras son ilustraciones dibujadas para Loalia, no fotos: poner la cara de una persona real al lado de una reseña da a entender que esa persona la ha escrito. Cuando haya clientes que den su foto y su permiso, se cambian por las suyas. */ .prueba-social { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; } .caras { display: flex; } .caras .cara { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #fff; flex: none; box-shadow: 0 2px 6px rgba(20,26,38,.18); } .caras .cara + .cara { margin-left: -14px; } .caras .cara svg { display: block; width: 100%; height: 100%; } .prueba-social .estrellas { color: #FFA41C; font-size: 21px; letter-spacing: 2px; line-height: 1; } .prueba-social .texto { margin-top: 5px; font-size: 15px; color: var(--gris); } @media (max-width: 520px) { .caras .cara { width: 38px; height: 38px; } .prueba-social .texto { font-size: 14px; } } /* La columna de la portada ya no lleva la pila de tarjetas: ahora lleva la maqueta del panel, que se coloca sola. */ .columna-imagen { align-items: center; } /* En el movil la maqueta se queda muy pequena si la columna mantiene sus 32 px de aire a los lados: se le quitan para que respire. */ @media (max-width: 620px) { .columna-imagen { padding: 24px 14px 36px; min-height: 0; } } /* La tarjeta de la portada tiene que medir lo mismo que la del competidor (746 px de alto a 1280 px de pantalla). Estos números salen de medir las dos, no de ojo. */ @media (min-width: 940px) { .marco { padding-bottom: 72px; } .columna-imagen { min-height: 0; padding: 30px 30px 20px; } } /* ── La curva grande en «U» del final del morado ────────────────── No es una onda: es un domo. El blanco tapa desde abajo dejando el morado abombado en el centro, y las tarjetas se montan encima. */ .curva-u { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: auto; z-index: 0; display: block; } .sobre-la-curva { position: relative; z-index: 3; } /* Las tarjetas «sin / con», cuando van sobre el morado */ .oscuro .tarjeton { background: #F7F7FB; border: 2px solid rgba(255,255,255,.38); } .oscuro .tarjeton h3 { color: var(--tinta); } .oscuro .tarjeton li { color: #2A3142; } /* La buena lleva el borde amarillo, que es lo que la hace destacar, y la sombra grande y suave que ellos le ponen. */ .oscuro .tarjeton.bueno { background: #fff; border: 4px solid #FBBF24; box-shadow: -8px 10px 28px rgba(0,0,0,.16), -28px 34px 56px rgba(0,0,0,.12), -60px 66px 90px rgba(0,0,0,.06); } .oscuro .tarjeton.bueno h3 { color: var(--loalia); } /* La cita grande del morado va en blanco, como la suya */ .oscuro .cita-grande { color: #fff; } /* El retrato de la cita grande. Es foto de archivo, por eso el pie de debajo lo dice: la persona de la foto no es cliente. */ .firma-centrada .retrato { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.28); } /* El retrato de la firma de la portada. Mismo tamaño que tenia el circulo de iniciales, para que no cambie la altura de la tarjeta. */ .firma-portada .retrato { width: 62px; height: 62px; border-radius: 50%; flex: none; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(20,26,38,.18); } /* Las caras de la maqueta del panel. Son datos de ejemplo dentro de un dibujo de la aplicacion, como en cualquier captura de producto. Van con object-fit para que no se deformen al ser cuadradas. */ .panel-app .quien img.avatar { object-fit: cover; } /* Cuando un bloque de caso lleva foto en vez de icono. */ .caso .simbolo.con-foto { padding: 0; overflow: hidden; } .caso .simbolo.con-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* La linea que va debajo de la frase grande del morado. */ .bajo-cita { max-width: 40rem; margin: 18px auto 0; text-align: center; font-size: 17px; color: rgba(255,255,255,.78); } /* El h1 de la portada usa la misma pinta que la cita que habia antes. */ h1.cita-portada { margin: 0; } /* El pie de la tarjeta morada. Sustituye a la firma con nombre y cara: dice de quien es la frase de verdad, no de un cliente inventado. */ .cita-morada .pie-tarjeta { margin-top: 22px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.62); } /* La linea de oferta bajo las vinetas de la portada. */ .oferta { font-size: 15px; font-weight: 600; color: var(--loalia); } /* Un poco mas de aire en la columna de texto: es lo que hace que la tarjeta mida igual que la del competidor (746 px). */ @media (min-width: 940px) { .columna-texto { padding: 42px 48px; gap: 22px; } } /* ── Las cuatro plantillas de imagen del panel flotante ──────────── Antes eran bloques de color vacíos y parecían sin terminar. Ahora llevan cara y texto, como las del competidor. Todo en `em`, que es lo que hace que la maqueta entera encoja sola. */ .mini-tarjeta { position: relative; } .mini-tarjeta.clara, .mini-tarjeta.oscura { flex-direction: row; align-items: stretch; gap: .7em; padding: .8em; } .mini-tarjeta .mt-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .3em; } .mini-tarjeta .mt-frase { font-size: .95em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mini-tarjeta .mt-foto { width: 36%; flex: none; height: 100%; object-fit: cover; border-radius: .5em; display: block; } .mini-tarjeta.oscura .mt-foto { filter: grayscale(1) contrast(1.05); } .mini-tarjeta .mt-titulo { font-weight: 700; font-size: 1.05em; line-height: 1.2; } .mini-tarjeta.coral .rejilla-caras { grid-template-columns: 1fr 1fr; gap: .45em; margin-top: .5em; } .mini-tarjeta.coral .rejilla-caras span { display: flex; align-items: center; gap: .35em; background: rgba(255,255,255,.20); border-radius: .4em; padding: .3em; } .mini-tarjeta .mt-cara { width: 1.7em; height: 1.7em; border-radius: 50%; flex: none; object-fit: cover; display: block; } .mini-tarjeta.coral .rejilla-caras i { flex: 1; display: grid; gap: .22em; } .mini-tarjeta.coral .rejilla-caras b { display: block; height: .32em; border-radius: .2em; background: rgba(255,255,255,.75); } .mini-tarjeta.coral .rejilla-caras b.corta { width: 60%; background: rgba(255,255,255,.45); } .mini-tarjeta.ambar .mt-nota { font-family: var(--display); font-size: 2.1em; font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: .3em; } .mini-tarjeta.ambar .mt-nota span { font-family: var(--cuerpo); font-size: .38em; font-weight: 700; opacity: .7; } .mini-tarjeta.ambar .mt-caras-fila { display: flex; } .mini-tarjeta.ambar .mt-caras-fila .mt-cara { border: .16em solid #FFC53D; } .mini-tarjeta.ambar .mt-caras-fila .mt-cara + .mt-cara { margin-left: -.55em; } /* ── Los dos videos de las tarjetas «sin / con» ──────────────────── Los mismos que usa el competidor. Van arriba de todo de la tarjeta, con las esquinas redondeadas y recortados a lo ancho. */ /* ── Las dos tarjetas «sin / con», con SUS medidas ───────────────── Medido en su web, numero a numero: tarjeta 564 px de ancho, esquinas de 40 px, recorta lo que sale video 564 x 360 px, a sangre arriba, sin esquinas propias margen 32 px alrededor de la ficha blanca ficha 500 px de ancho, esquinas de 8 px, relleno de 24 px titulo 32 px, peso 800 filas 20 px, peso 600, 16 px de hueco entre ellas Antes el video media 200 px de alto y llevaba sus propias esquinas redondeadas, y el texto iba suelto en la tarjeta. Por eso se veia pequenito al lado del suyo. */ /* El hueco de abajo tiene que dar de si para que quepa la SOMBRA de la tarjeta buena. Antes eran 40 px y la sombra llega a 200: la seccion recorta lo que se sale y la cortaba en seco, dejando una raya gris de lado a lado. Eso era el corte feo entre bloques. */ .caja.mas-ancha { max-width: 1208px; padding-bottom: 120px; } /* La seccion de la rueda empieza casi pegada: el aro ya trae aire. */ .seccion-rueda { padding-top: 24px; } @media (max-width: 700px) { .caja.mas-ancha { padding-bottom: 120px; } } .enfrentadas { max-width: 1160px; margin-left: auto; margin-right: auto; } @media (min-width: 1000px) { .enfrentadas { grid-template-columns: 564px 564px; justify-content: center; } } @media (min-width: 1000px) { .enfrentadas { gap: 32px; } } .tarjeton { padding: 0; overflow: hidden; border-radius: 40px; } .gif-tarjeton { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 0; margin: 0; background: #EDEFF5; } .panel-tarjeton { margin: 32px; background: #fff; border-radius: 8px; padding: 24px; } .tarjeton h3 { font-size: 32px; font-weight: 800; margin: 0 0 8px; } .tarjeton ul { display: grid; gap: 16px; margin: 0; padding: 0; } .tarjeton li { font-size: 20px; font-weight: 600; line-height: 1.5; } /* En pantallas mas estrechas todo encoge a la vez, guardando la proporcion: el video sigue siendo 360/564 de la tarjeta. */ @media (max-width: 1120px) { .gif-tarjeton { height: auto; aspect-ratio: 564 / 360; } .panel-tarjeton { margin: 24px; } .tarjeton h3 { font-size: 27px; } .tarjeton li { font-size: 17px; } .tarjeton ul { gap: 13px; } } @media (max-width: 700px) { .tarjeton { border-radius: 28px; } .panel-tarjeton { margin: 16px; padding: 18px; } .tarjeton h3 { font-size: 24px; } .tarjeton li { font-size: 16px; } } /* ── Las marcas de la lista ──────────────────────────────────────── La ✕ es un circulo de linea fina en gris apagado; el ✓ es un doble tick morado y grueso. Se dibujan en `crear-portada.py`. */ .tarjeton .marca { flex: none; width: 22px; height: 22px; margin-top: 1px; } .tarjeton .marca.no { color: #9AA2B4; } .tarjeton .marca.si { color: var(--loalia); } .oscuro .tarjeton li { display: flex; align-items: flex-start; gap: 12px; } /* ── El bloque «tarjeta morada grande + ventajas» ────────────────── Copiado del «Instant Setup» del competidor, medido en su web (los numeros estan en herramientas/bloque_cita_ventajas.py). */ .cita-ventajas { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 1000px) { .cita-ventajas { grid-template-columns: 588px 524px; gap: 48px; justify-content: center; } /* El bloque «invertido»: las ventajas a la izquierda y la tarjeta a la derecha. Van alternando, como los suyos. */ .cita-ventajas.invertido { grid-template-columns: 524px 588px; } } .tarjeta-cita-grande { border-radius: 40px; padding: 32px; color: #fff; background: linear-gradient(180deg, #A466F5 0%, #6A1EEA 45%, #24105A 100%); box-shadow: 8px 12px 32px rgba(0,0,0,.10), 31px 50px 59px rgba(0,0,0,.09), 70px 112px 80px rgba(0,0,0,.05); } .tarjeta-cita-grande .comillas-grandes { display: block; width: 108px; height: 93px; } .tarjeta-cita-grande .frase-grande { margin: 32px 0 0; font-family: var(--cuerpo); font-size: clamp(26px, 2.9vw, 36px); line-height: 1.3; font-weight: 600; } .tarjeta-cita-grande .frase-grande .tenue { color: rgba(255,255,255,.75); } .tarjeta-cita-grande .frase-grande .clara { color: #fff; } .tarjeta-cita-grande .quien-grande { display: flex; align-items: center; gap: 16px; margin-top: 24px; } .tarjeta-cita-grande .quien-grande img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; } .tarjeta-cita-grande .quien-grande b { display: block; font-family: var(--mano); font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; } .tarjeta-cita-grande .quien-grande span { display: block; font-size: 20px; font-weight: 400; color: #fff; margin-top: 4px; } .ventajas-columna { padding-top: 24px; } .titulo-ventajas { margin: 8px 0 0; text-align: left; font-family: var(--display); font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; line-height: 1.2; color: #1F2937; } .ventajas { display: grid; grid-template-columns: 1fr; gap: 48px 24px; margin-top: 32px; } @media (min-width: 640px) { .ventajas { grid-template-columns: 250px 250px; } } .ventaja .circulo-icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #EFE6FF; color: var(--loalia); border: 1px solid #E2D6FF; } .ventaja h3 { margin-top: 16px; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 28px; color: #1F2937; } .ventaja p { margin-top: 16px; font-size: 16px; line-height: 24px; color: #4B5563; } /* Sin foto todavia: el circulo con las iniciales, del mismo tamano que la foto (96). */ /* Con tres clases, para ganar a la regla generica de los del nombre (que los pone en bloque, a 20 px y con margen). */ .tarjeta-cita-grande .quien-grande .iniciales-grande { display: grid; place-items: center; width: 96px; margin: 0; line-height: 1; height: 96px; border-radius: 50%; flex: none; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.45); font-family: var(--display); font-size: 34px; font-weight: 800; color: #fff; letter-spacing: .02em; } /* ── EFECTO 9 · la nube que respira y el haz de luz (03/09/2026) ── Pedido por Rafael («algún efecto super especial»). Tres cosas a la vez: 1. un haz de luz morado da la vuelta a la nube cada 12 s (conic-gradient girando dentro del disco); 2. cada pastilla se ENCIENDE justo cuando le pasa el haz por encima: un JS diminuto (en crear-portada.py) mide el ángulo de cada una y le pone el retraso justo (--haz); y flota arriba y abajo con un retraso distinto (--flote); 3. las dos manchas de color respiran. Flotar usa `translate` y encender usa `scale`, propiedades distintas, para que las dos animaciones no se pisen el transform. Con las animaciones al mínimo (prefers-reduced-motion) todo se queda quieto. */ .nube .pastilla { position: relative; transition: box-shadow .25s, border-color .25s, color .25s, scale .25s; } .nube .pastilla.larga { font-size: 11.5px; letter-spacing: -.01em; } @media (max-width: 700px) { .nube .pastilla.larga { font-size: 9.5px; } } .nube .pastilla:hover { border-color: var(--loalia); color: var(--loalia); box-shadow: 0 10px 26px rgba(91,47,214,.28); scale: 1.06; z-index: 2; } .nube .aro-fondo::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: conic-gradient(from -22deg, rgba(122,58,237,0) 0deg, rgba(122,58,237,.34) 22deg, rgba(122,58,237,0) 44deg); animation: barrer-nube 12s linear infinite; } @keyframes barrer-nube { to { transform: rotate(360deg); } } .nube .aro-fondo i.a { animation: respirar-mancha 9s ease-in-out infinite alternate; } .nube .aro-fondo i.b { animation: respirar-mancha 11s ease-in-out infinite alternate-reverse; } @keyframes respirar-mancha { from { transform: scale(.92) translate(-3%, 2%); } to { transform: scale(1.12) translate(3%, -2%); } } .nube.viva .pastilla { animation: flotar-pastilla 7s ease-in-out infinite, encender-pastilla 12s linear infinite; animation-delay: var(--flote, 0s), var(--haz, 0s); } @keyframes flotar-pastilla { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @keyframes encender-pastilla { 0%, 9% { scale: 1.08; border-color: var(--loalia); color: var(--loalia); box-shadow: 0 12px 30px rgba(91,47,214,.35), 0 0 0 3px rgba(122,58,237,.18); } 18%, 100% { scale: 1; border-color: var(--linea); color: var(--tinta); box-shadow: 0 1.5px 3px rgba(0,0,0,.1); } } @media (prefers-reduced-motion: reduce) { .nube .aro-fondo::after, .nube .aro-fondo i, .nube.viva .pastilla { animation: none; } } /* ── La lista de al lado de la nube, con icono (03/09/2026) ──────── Rafael: «se ve muy simple solo con las letras». Cada punto lleva la misma ficha de icono que la rejilla de funciones (morado sobre lila). */ .lista-nube .con-icono { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; } .lista-nube .con-icono .icono { width: 56px; height: 56px; border-radius: 16px; background: rgba(91,47,214,.09); color: var(--loalia); display: grid; place-items: center; } .lista-nube .con-icono .icono svg { width: 28px; height: 28px; } .lista-nube .con-icono h3 { margin-top: 2px; } .lista-nube .con-icono p { margin-top: 6px; }