- de verdad: es un procedimiento con orden, y quien lo oiga con un
lector de pantalla tiene que oír "1 de 3". El número grande no se pinta
con texto, sale del contador de la lista. */
.pasos{
list-style:none;margin:26px 0 40px;padding:0;
display:grid;gap:34px;
}
.pasos li{margin:0}
/* El hueco del pantallazo, mientras no esté. Proporción de teléfono para que
al llegar la imagen no se mueva nada de sitio. */
/* La proporción es la REAL de las capturas (560x1214), no 9/16: un iPhone
de hoy es mucho más alargado y con 9/16 se recortaban por arriba y por
abajo (18-09-2026). */
.pasos .pantalla{
/* `height:auto` es imprescindible: el atributo `height` del
del navegador, sin JavaScript. Se abren
solas aunque el guion falle, y el buscador del móvil las encuentra. */
.duda{border-bottom:1px solid #E8E7E1}
.duda summary{
list-style:none;cursor:pointer;padding:19px 0;
font-size:17.5px;font-weight:600;letter-spacing:-.015em;line-height:1.3;
display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.duda summary::-webkit-details-marker{display:none}
.duda summary .ms{font-size:24px;flex:none;transition:transform .22s var(--simetrica);color:var(--gris)}
.duda[open] summary .ms{transform:rotate(180deg)}
.duda p{
margin:0 0 20px;font-size:16px;line-height:1.5;color:var(--gris);
max-width:56ch;
}
/* ── Industria del turismo ──────────────────────────────────────────────
Una sección más de la página: los titulares y las bajadas son los de
siempre, aquí solo van las cifras, que no existen en ningún otro sitio. */
/* El titular de /turismo. Usa el mismo eje que el `h1` de la portada, con
algo menos de cuerpo: aquí el titular NO es el argumento, solo dice de qué
va la página; el argumento es el primer bloque. */
.titulo-turismo{
font-size:clamp(40px,10vw,54px);line-height:1.04;letter-spacing:-.028em;
font-weight:700;margin:0;padding-top:78px;text-align:center;
}
.cifra{margin-top:36px}
.cifra:first-of-type{margin-top:30px}
/* `tabular-nums` evita que el número baile de ancho mientras cuenta. */
.cifra .numero{
display:block;font-size:clamp(56px,15vw,68px);line-height:1;
letter-spacing:-.04em;font-weight:700;color:var(--verde);
font-variant-numeric:tabular-nums;
}
.cifra .bajada{margin-top:6px}
/* La fuente en pequeño, pero a la vista: quien lee esto es del ramo y sin
fuente esto es un folleto. */
.cifra .fuente{
margin:8px auto 0;font-size:13px;line-height:1.35;color:var(--gris);max-width:44ch;
}
.correo{color:var(--verde-hondo)}
/* El formulario de /creadores. Vive en la página, no dentro de un panel, así
que necesita su propio ancho y su aire: los campos heredan `.campo`, que ya
está resuelto. (16-09-2026) */
.pedir{
display:grid;gap:14px;max-width:420px;margin:30px auto 0;text-align:left;
}
.pedir .aviso{margin-top:4px}
/* El cierre de descarga. No se pinta en el móvil: allí manda la banda fija. */
.cierre{display:none}
.tiendas{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.tiendas .boton{font-size:16px;padding:14px 22px}
.tiendas .boton svg{width:21px;height:21px;fill:#fff;flex:none;display:block}
/* El QR solo tiene sentido en el escritorio: en un móvil ya estás en el
aparato donde se instala. Lleva a /d, que mira qué teléfono lo escanea y
manda al App Store o a Google Play. */
.qr{display:none}
.panel .otros{
margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.panel .otros a{
font-size:15.5px;font-weight:600;color:var(--verde-hondo);text-decoration:none;
}
/* El acceso no es una pantalla completa como Ayuda o Contacto: es una
ventana encima, con la página detrás desenfocada. Así se entiende que no
te has ido a ningún sitio, solo has abierto una puerta. */
#acceso{
padding:24px;display:grid;place-items:center;overflow:auto;
background:rgba(17,19,16,.34);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
#acceso .hoja{
position:relative;width:100%;max-width:410px;
background:var(--blanco);border-radius:18px;
padding:36px 32px 30px;
}
#acceso .cerrar{position:absolute;top:10px;right:10px;color:var(--gris)}
#acceso .cerrar .ms{font-size:26px}
#acceso h2{font-size:25px;letter-spacing:-.02em;text-align:left;margin:0 0 22px}
/* El aviso no ocupa sitio mientras está vacío, que era el hueco blanco
entre Entrar y "o entra con". */
#acceso .aviso{min-height:0}
#acceso .campo{--cuerpo:16px;--renglon:19px;--lado:14px;--arriba:21px;--abajo:5px;--encoge:.72;--sube:6px}
#acceso form{gap:13px}
/* Sin bajar el cuerpo: por debajo de 18,66px en negrita el botón deja de
contar como texto grande y el verde de marca ya no cumpliría. */
#acceso .enviar{padding:15px}
/* Entrar con Apple o con Google. Son los mismos flujos que ya usa la app en
este dominio, con sus mismos identificadores y direcciones de vuelta, así
que no hay nada nuevo que registrar en Apple ni en Google. */
#acceso .separador{
display:flex;align-items:center;gap:12px;margin:16px 0 14px;
font-size:13px;color:var(--gris);
}
#acceso .separador::before,#acceso .separador::after{
content:"";flex:1;height:1px;background:#E4E2D9;
}
#acceso .sociales{display:grid;gap:10px}
#acceso .social{
font:inherit;font-size:16px;font-weight:600;color:var(--tinta);
background:none;border:1.5px solid #DCDAD0;border-radius:8px;
padding:13px;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:10px;
}
#acceso .social svg{width:19px;height:19px;flex:none}
#acceso .social .manzana,#acceso .social svg:first-child{fill:var(--tinta)}
#acceso .social[disabled]{opacity:.5;cursor:default}
/* El registro reusa la misma ventana que el acceso y va por pasos: correo,
código y datos. Es el mismo recorrido de tres llamadas que hace la app. */
#registro,
#recuperar{
padding:24px;display:grid;place-items:center;overflow:auto;
background:rgba(17,19,16,.34);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
#registro .hoja,
#recuperar .hoja{
position:relative;width:100%;max-width:410px;
background:var(--blanco);border-radius:18px;padding:36px 32px 30px;
}
#registro .cerrar,
#recuperar .cerrar{position:absolute;top:10px;right:10px;color:var(--gris)}
#registro .cerrar .ms,
#recuperar .cerrar .ms{font-size:26px}
#registro h2,
#recuperar h2{font-size:25px;letter-spacing:-.02em;text-align:left;margin:0 0 18px}
#registro form,
#recuperar form{display:grid;gap:13px}
#registro .explica,
#recuperar .explica{margin:0 0 2px;font-size:15px;line-height:1.4;color:var(--gris)}
#registro .campo,
#recuperar .campo{--cuerpo:16px;--renglon:19px;--lado:14px;--arriba:21px;--abajo:5px;--encoge:.72;--sube:6px}
#registro .aviso,
#recuperar .aviso{min-height:0}
/* Sin bajar el cuerpo: por debajo de 18,66px en negrita el botón deja de
contar como texto grande y el verde de marca ya no cumpliría. */
#registro .enviar,
#recuperar .enviar{padding:15px}
#registro .otra-vez,
#recuperar .otra-vez{
font:inherit;font-size:14.5px;font-weight:600;color:var(--verde-hondo);
background:none;border:0;padding:4px;cursor:pointer;justify-self:center;
}
#registro .otra-vez[disabled],
#recuperar .otra-vez[disabled]{color:var(--gris);cursor:default}
#registro [name=codigo],
#recuperar [name=codigo]{
text-align:center;letter-spacing:.42em;font-size:22px;font-weight:600;
}
/* El aviso de cuenta pendiente de borrar. Se pinta desde el guion cuando el
login lo devuelve, así que no está en el HTML de ninguna página. Usa la
misma ventana que el acceso: fondo oscuro y hoja blanca. */
.panel.rescate{
padding:24px;display:grid;place-items:center;overflow:auto;
background:rgba(17,19,16,.34);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
opacity:1;visibility:visible;
}
.panel.rescate .hoja{
position:relative;width:100%;max-width:410px;
background:var(--blanco);border-radius:18px;padding:36px 32px 30px;
}
.panel.rescate h2{font-size:25px;letter-spacing:-.02em;text-align:left;margin:0 0 14px}
.panel.rescate .explica{margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--gris)}
.panel.rescate .enviar{width:100%;margin-top:0}
.panel.rescate .otros{margin-top:16px}
body.bloqueado{overflow:hidden}
/* ── Portada ───────────────────────────────────────────────── */
.portada{padding:16px 0 8px;text-align:center}
.logo{width:104px;height:auto;display:block;margin:40px auto 37px}
h1{
font-size:clamp(38px,10.5vw,54px);
/* 1,03 amontonaba las palabras en los titulares de tres líneas: a 1440 el
h1 son 70 px con 72 de interlineado, o sea nada (18-09-2026). 1,08
separa lo justo sin que el titular pierda fuerza. */
line-height:1.08;letter-spacing:-.028em;font-weight:700;
margin:0 0 4px;text-wrap:balance;
}
.entradilla{font-size:18px;line-height:1.5;color:var(--gris);margin:0 auto;max-width:30ch}
/* El botón de la demo, bajo el titular. En contorno, no relleno: la acción
principal de la portada sigue siendo descargarse la app, y dos botones
macizos seguidos se restan fuerza el uno al otro. */
.ver-demo{margin:22px 0 0;display:grid;justify-items:center}
.boton-linea{
display:inline-flex;align-items:center;justify-content:center;
font-size:16.5px;font-weight:600;letter-spacing:-.01em;
color:var(--tinta);text-decoration:none;
border:1.5px solid var(--tinta);border-radius:8px;
padding:14px 24px;
transition:transform 160ms var(--entra),background-color .2s ease,color .2s ease;
}
.boton-linea:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
.boton-linea:hover{background:var(--tinta);color:#fff}
}
@media (prefers-reduced-motion:reduce){ .boton-linea{transition:none} }
/* ── Bloques ───────────────────────────────────────────────── */
section.bloque{padding:80px 0 0;text-align:center}
/* La marca de Instagram, del fichero que ya tenía la web antigua.
Va encima del titular en vez del antetítulo que quitamos: dice lo
mismo sin una palabra. */
.ig{width:44px;height:44px;display:block;margin:0 auto 18px}
h2{
font-size:clamp(34px,9.2vw,47px);line-height:1.04;letter-spacing:-.026em;
font-weight:700;margin:0 0 16px;text-wrap:balance;
}
/* La bajada es la letra pequeña debajo del titular: cuanto más grande sea el
titular, más callada tiene que estar ella. */
/* Interlineado 1,55 y no 1,32: esto es texto corrido de varias líneas, no
un rótulo, y apretado se lee peor (18-09-2026). */
.bajada{font-size:16.5px;line-height:1.55;color:var(--gris);margin:0 auto;max-width:44ch}
/* ── La animación de la versión vieja, sin GSAP ─────────────
Nueve fotos en rejilla que se encogen, se vuelven redondas y vuelan a su
sitio sobre el mapa. Tres se apagan por el camino: en el mapa no caben
todas. Son los mismos destinos que usaba la página antigua.
LA VUELTA NO PISA EL MAPA (18-09-2026). El fallo era que las fotos
deshacían el camino entre el 92% y el 100%, que es justo el tramo en que
el mapa se estaba apagando: al 94% el mapa seguía al 93% de opacidad con
tres fotos de rejilla a tamaño completo encima, y al 98% con las ocho.
Medido, no supuesto.
El arreglo NO es quitar la vuelta (se probó y no vale: tiene que volver),
es SEPARAR LOS DOS TRAMOS:
88% → 93% el mapa se apaga con todo quieto en su sitio.
93% → 100% ya sin mapa debajo, las fotos vuelven a la rejilla.
Por eso los recorridos aguantan hasta el 93% y el mapa, el avatar y la
capa se apagan al 88%. Son 0,6 s de despedida y 0,84 s de vuelta.
Va con keyframes de CSS y no con una librería porque esta página tiene que
abrir rápido con datos, que era una de las pegas del encargo. */
/* Las animaciones sin fin se paran mientras no se ven (16-09-2026). Eran
siete corriendo siempre: la escena del héroe seguía dando vueltas con el
visitante leyendo el pie, y el desfile de categorías desde el primer
fotograma aunque esté a cuatro pantallas de distancia. El navegador las
pinta en cada refresco, las vea alguien o no. */
[data-quieta],[data-quieta] *{animation-play-state:paused}
.escena{position:relative;width:100%;aspect-ratio:1/1;margin-top:26px}
.escena .vuelo{position:absolute;inset:0}
.escena .mapa{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
border-radius:22px;
opacity:0;animation:aparece-mapa 12s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes aparece-mapa{
0%,42%{opacity:0} 50%,88%{opacity:1} 93%,100%{opacity:0}
}
.escena .foto{
position:absolute;aspect-ratio:1/1;object-fit:cover;border-radius:14%;
display:block;
animation-duration:12s;animation-timing-function:cubic-bezier(.65,0,.35,1);
animation-iteration-count:infinite;
}
/* La publicación se convierte en el avatar de quien la publicó, que es
exactamente lo que se ve en el mapa de la app. */
.escena .capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.escena .avatar{
opacity:0;animation:aparece-avatar 12s cubic-bezier(.65,0,.35,1) infinite;
}
/* Y la foto se apaga debajo. Si se queda, asoma un filo por detrás del
avatar, que trae su propio borde claro recortado. */
.escena .foto.muda .capa:not(.avatar){
animation:apaga-foto 12s cubic-bezier(.65,0,.35,1) infinite;
}
/* El despegue estaba al 42% de un ciclo de 12 s, o sea CINCO SEGUNDOS de
rejilla quieta antes de que pasara nada (16-09-2026). Quien baja rápido no
llegaba a ver lo único que explica el producto. El retardo NEGATIVO arranca
el ciclo ya empezado, así que el despegue cae a 1,5 s.
No se toca ni un fotograma: del 0% al 42% la rejilla es idéntica, así que
al cargar se ve exactamente lo mismo que antes.
VA DESPUÉS a propósito: `animation:` en forma abreviada reinicia el retardo
a cero, así que puesto antes el avatar se quedaba 3,5 s desincronizado. */
.escena .mapa,.escena .foto,.escena .avatar,
.escena .foto.muda .capa:not(.avatar){animation-delay:-3.5s}
@keyframes aparece-avatar{
0%,44%{opacity:0} 50%,88%{opacity:1} 93%,100%{opacity:0}
}
@keyframes apaga-foto{
0%,44%{opacity:1} 50%,88%{opacity:0} 93%,100%{opacity:1}
}
/* CON MOVIMIENTO REDUCIDO, UN FOTOGRAMA ENTERO, no medio de cada uno.
Antes se apagaba cada animación por su lado y se le daba a mano el valor
final a unas y no a otras: el mapa y los avatares salían en su estado de
llegada, y las fotos en el de partida. Resultado, nueve fotos a tamaño de
rejilla encima del mapa, que no es ningún fotograma de la animación. Se
veía raro porque lo era (Ignacio, 16-09-2026).
Ahora se para el ciclo entero en el mismo instante, el 67%, que es donde
se ve lo que la escena cuenta: las publicaciones ya colocadas en el mapa
y convertidas en quien las publicó. Al parar el ciclo y no las animaciones
una a una, todo queda en el mismo sitio del relato, aquí y en la versión
apaisada de escritorio, que tiene sus propios recorridos. */
@media (prefers-reduced-motion:reduce){
.escena .mapa,.escena .foto,.escena .avatar,
.escena .foto.muda .capa:not(.avatar){
animation-delay:-8s;animation-play-state:paused;
}
}
.foto-1{left:4%;top:4%;width:28%;animation-name:vuelo-1}
@keyframes vuelo-1{
0%,42% {left:4%;top:4%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:5.25%;top:2.25%;width:19.0%;border-radius:50%;opacity:1}
100% {left:4%;top:4%;width:28%;border-radius:14%;opacity:1}
}
.foto-2{left:36%;top:4%;width:28%;animation-name:vuelo-2}
@keyframes vuelo-2{
0%,42% {left:36%;top:4%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:36%;top:4%;width:19%;border-radius:14%;opacity:0}
100% {left:36%;top:4%;width:28%;border-radius:14%;opacity:1}
}
.foto-3{left:68%;top:4%;width:28%;animation-name:vuelo-3}
@keyframes vuelo-3{
0%,42% {left:68%;top:4%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:14.25%;top:26.25%;width:19.0%;border-radius:50%;opacity:1}
100% {left:68%;top:4%;width:28%;border-radius:14%;opacity:1}
}
.foto-4{left:4%;top:36%;width:28%;animation-name:vuelo-4}
@keyframes vuelo-4{
0%,42% {left:4%;top:36%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:4%;top:36%;width:19%;border-radius:14%;opacity:0}
100% {left:4%;top:36%;width:28%;border-radius:14%;opacity:1}
}
.foto-5{left:36%;top:36%;width:28%;animation-name:vuelo-5}
@keyframes vuelo-5{
0%,42% {left:36%;top:36%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:65.25%;top:3.25%;width:19.0%;border-radius:50%;opacity:1}
100% {left:36%;top:36%;width:28%;border-radius:14%;opacity:1}
}
.foto-6{left:68%;top:36%;width:28%;animation-name:vuelo-6}
@keyframes vuelo-6{
0%,42% {left:68%;top:36%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:68%;top:36%;width:19%;border-radius:14%;opacity:0}
100% {left:68%;top:36%;width:28%;border-radius:14%;opacity:1}
}
.foto-7{left:4%;top:68%;width:28%;animation-name:vuelo-7}
@keyframes vuelo-7{
0%,42% {left:4%;top:68%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:62.25%;top:68.25%;width:19.0%;border-radius:50%;opacity:1}
100% {left:4%;top:68%;width:28%;border-radius:14%;opacity:1}
}
.foto-8{left:36%;top:68%;width:28%;animation-name:vuelo-8}
@keyframes vuelo-8{
0%,42% {left:36%;top:68%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:4.25%;top:52.25%;width:19.0%;border-radius:50%;opacity:1}
100% {left:36%;top:68%;width:28%;border-radius:14%;opacity:1}
}
.foto-9{left:68%;top:68%;width:28%;animation-name:vuelo-9}
@keyframes vuelo-9{
0%,42% {left:68%;top:68%;width:28%;border-radius:14%;opacity:1}
50%,93% {left:75.25%;top:32.25%;width:19.0%;border-radius:50%;opacity:1}
100% {left:68%;top:68%;width:28%;border-radius:14%;opacity:1}
}
/* ── Imágenes simuladas ────────────────────────────────────── */
figure{margin:26px 0 0}
.lienzo{
position:relative;border-radius:22px;overflow:hidden;
background:var(--crema-honda);
aspect-ratio:4/5;
}
.lienzo.ancho{aspect-ratio:4/3}
.lienzo svg,.lienzo .retrato{display:block;width:100%;height:100%;object-fit:cover}
.lienzo svg text{font-family:inherit}
/* Cuatro fotos en bucle de 20 s, cinco cada una.
Van apiladas y la de abajo, la primera, no se anima nunca: es lo que se ve
al cargar y lo que reaparece al cerrarse el ciclo.
Las otras tres ENTRAN fundiendo por encima y SALEN de golpe, pero solo
cuando la siguiente ya las tapa del todo. Si salieran fundiendo se verían
las dos a la vez y asomaría la de abajo por detrás. */
.rotativa{position:relative}
.rotativa .retrato{position:absolute;inset:0}
.rotativa .pasa{opacity:0;animation:20s linear infinite}
.rotativa .pasa:nth-of-type(2){animation-name:foto-2}
.rotativa .pasa:nth-of-type(3){animation-name:foto-3}
.rotativa .pasa:nth-of-type(4){animation-name:foto-4}
@keyframes foto-2{0%,23%{opacity:0}25%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes foto-3{0%,48%{opacity:0}50%,75%{opacity:1}75.01%,100%{opacity:0}}
@keyframes foto-4{0%,73%{opacity:0}75%,97%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.rotativa .pasa{animation:none}
}
/* El enlace que se comparte, encima de la foto. */
.lienzo.rotativa{--p:0}
/* La pastilla del enlace entra con el scroll, no está puesta de antemano:
así se entiende que compartir es algo que HACES, no un adorno de la foto. */
.lienzo .enlace{
opacity:var(--p);
transform:translateY(calc(-20px * (1 - var(--p))));
position:absolute;left:16px;right:16px;top:16px;z-index:2;background:rgba(255,255,255,.94);
border-radius:12px;padding:12px 16px;font-size:14px;color:#6E7269;text-align:left;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lienzo .enlace .ms{font-size:21px;flex:none;color:var(--tinta)}
/* La publicación tal cual se ve en la app: la foto a sangre, los datos sobre
ella y el botón de reservar junto a los me gusta. Replica la pantalla real,
no es una tarjeta inventada. */
.lienzo.publicacion{position:relative;text-align:left;color:#fff}
.lienzo.publicacion .retrato{position:absolute;inset:0}
.lienzo.publicacion .velo{
position:absolute;left:0;right:0;top:0;height:46%;
background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.28) 62%,transparent);
}
.lienzo.publicacion .ms{color:#fff}
.acciones{position:absolute;right:16px;top:14px;display:flex;gap:18px}
.acciones .ms{font-size:23px}
.ficha{position:absolute;left:16px;right:16px;top:52px;display:flex;gap:13px}
.ficha .cara{width:62px;height:62px;border-radius:50%;flex:none;object-fit:cover;border:2.5px solid #fff}
.ficha .datos{min-width:0;flex:1}
.ficha p{margin:0}
.cuando{font-size:12.5px;letter-spacing:.07em;color:rgba(255,255,255,.82)}
.sitio{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:1px}
.entrada{
font-size:14.5px;color:rgba(255,255,255,.78);margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cuentas{display:flex;align-items:center;gap:16px;margin-top:11px;font-size:15px;font-weight:600}
.cuentas span{display:flex;align-items:center;gap:6px}
.cuentas .ms{font-size:19px}
.cuentas .reservar{
border:1.4px solid rgba(255,255,255,.9);border-radius:8px;padding:7px 15px;
font-size:14.5px;font-weight:600;margin-left:2px;
}
.pie-iconos{position:absolute;right:18px;bottom:16px;display:flex;gap:16px}
.pie-iconos .ms{font-size:28px}
/* Material Symbols Rounded: la familia de iconos de todo el proyecto. La app
la carga igual en su versión web. Sin fuente cargada no se ve el nombre
suelto, el &display=block deja el hueco vacío hasta que llega. */
.ms{
font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;
line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
direction:ltr;-webkit-font-feature-settings:"liga";font-variation-settings:"FILL" 0;
font-size:22px;display:inline-block;user-select:none;
}
.ms.relleno{font-variation-settings:"FILL" 1}
/* La publicación se apaga y el botón de reservar viaja al centro SEGÚN
BAJAS, no de golpe. Todo cuelga de --p, que va de 0 a 1 y lo escribe el
scroll: si vuelves a subir, el botón deshace el camino y vuelve a su sitio.
El recorrido empieza tarde a propósito, con la publicación ya bien dentro
de la pantalla. */
.lienzo.publicacion{--p:0}
.lienzo.publicacion .oscurece{
position:absolute;inset:0;pointer-events:none;
background:rgba(0,0,0,calc(.66 * var(--p)));
}
/* El botón crece y viaja al centro, pero se queda en contorno: filete blanco
y texto blanco, sin relleno. */
.cuentas .reservar{
transform:translate(calc(var(--dx,0px) * var(--p)), calc(var(--dy,0px) * var(--p)));
border-color:rgba(255,255,255,calc(.6 + .4 * var(--p)));
border-width:calc(1.4px + .4px * var(--p));
padding:calc(7px + 6px * var(--p)) calc(15px + 13px * var(--p));
font-size:calc(14.5px + 2.5px * var(--p));
}
/* Los contadores se apagan: en ese momento solo queremos que se mire el botón. */
.cuentas span:not(.reservar){opacity:calc(1 - var(--p) * 1.6)}
@media (prefers-reduced-motion:reduce){
.lienzo.publicacion{--p:1}
}
/* ── Vídeo ─────────────────────────────────────────────────── */
/* El vídeo bueno es vertical, el de la ficha del App Store, así que va dentro
de un teléfono. El marco es CSS y no una imagen: pesa cero, se ve nítido en
cualquier pantalla y se puede reteñir. */
.telefono{
max-width:306px;margin:26px auto 0;padding:11px;position:relative;
background:var(--tinta);border-radius:47px;
}
.telefono .muesca{
position:absolute;top:11px;left:50%;transform:translateX(-50%);
width:37%;height:25px;background:var(--tinta);border-radius:0 0 15px 15px;
display:flex;align-items:center;justify-content:center;
}
/* La cámara, apenas un tono por encima del negro del marco: si se ve
demasiado deja de ser un detalle y pasa a ser un adorno. */
.telefono .muesca::after{
content:"";width:9px;height:9px;border-radius:50%;
background:#2A2E29;margin-top:-4px;margin-left:52%;
}
.video{
border-radius:36px;background:var(--tinta);
aspect-ratio:9/16;display:grid;place-items:center;position:relative;overflow:hidden;
}
/* El cartel es un fotograma del propio vídeo. El .mp4 pesa 7,8 MB y NO se
carga hasta que se pulsa: en un móvil con datos sería la mitad de la
página por algo que casi nadie va a ver. */
.video .pelicula,.video .cartel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--tinta)}
.video.sonando .cartel{display:none}
.video .play{position:relative}
/* El mando es nuestro y cubre todo el vídeo: un toque arranca, otro pausa.
Nada de barra del navegador, ni pantalla completa, ni descargar. */
.video .mando{
position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;
display:grid;place-items:center;
}
.video .play{
width:76px;height:76px;border-radius:50%;background:rgba(40,44,40,.55);
display:grid;place-items:center;transition:opacity .25s var(--entra);
}
.video.reproduciendo .play{opacity:0}
/* Mientras baja el fichero, una rueda: son un par de megas y en 4G se nota. */
.video.cargando::after{
content:"";position:absolute;width:40px;height:40px;border-radius:50%;
border:3px solid rgba(255,255,255,.28);border-top-color:#fff;
animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.video .play::after{
content:"";border-left:21px solid #fff;
border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px;
}
/* ── Todo en uno ────────────────────────────────────────────
Tres sitios de distinta clase sobre el mismo plano, con quién recomienda
cada uno. TARJETAS CON RADIO, no círculos: aquí el círculo es el avatar
(así lo usa la escena del héroe) y esto son sitios, no personas.
La variedad la dan `--x`, `--y` y `--escala`. El globo va siempre en el
mismo sitio respecto a su tarjeta: con tres anclas distintas no parecía
desordenado a propósito, parecía descolocado (Ignacio, 18-09-2026). */
.todo .vista{
position:relative;margin-top:34px;border-radius:22px;overflow:hidden;
background:var(--crema-honda);
--p:0; /* lo escribe portada.js según se baja; de 0 a 1 */
}
.todo .plano{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.todo .sitio{
position:absolute;left:var(--x);top:var(--y);
width:calc(26% * var(--escala));
/* Cada una arranca en su momento. Solo se animan `transform` y `opacity`,
que son las dos que no obligan al navegador a recalcular la página. */
--pi:clamp(0,calc((var(--p) - var(--inicio)) * 2.6),1);
opacity:var(--pi);
transform:
translate(-50%,-50%)
translateY(calc(12px * (1 - var(--pi))))
scale(calc(.94 + .06 * var(--pi)));
}
.todo .sitio img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
/* El radio de las categorías: la página ya tiene su escala de esquinas. */
border-radius:16px;
border:3px solid #fff;
/* La sombra crece con la tarjeta: lo que está más cerca proyecta más.
Eso es la perspectiva, no colocarlas torcidas. */
box-shadow:0 calc(9px * var(--escala)) calc(26px * var(--escala)) rgba(17,19,16,.17);
}
/* El globo entra DESPUÉS que su tarjeta: primero llega el sitio y luego
habla quien lo recomienda. Y crece desde su propia colita, no desde el
centro, que es de donde sale. */
.todo .globo{
position:absolute;left:0;bottom:calc(100% + 11px);
margin:0;white-space:nowrap;
background:var(--blanco);color:var(--tinta);
font-size:13.5px;font-weight:600;letter-spacing:-.01em;
padding:8px 13px;border-radius:12px;
box-shadow:0 6px 18px rgba(17,19,16,.14);
--pg:clamp(0,calc((var(--p) - var(--inicio) - .10) * 3.4),1);
opacity:var(--pg);
transform-origin:14px 100%;
transform:scale(calc(.92 + .08 * var(--pg)));
}
.todo .globo::after{
content:"";position:absolute;left:11px;bottom:-4px;
width:10px;height:10px;background:inherit;transform:rotate(45deg);
border-radius:2px;
}
/* En estrecho el plano mide la mitad: las tarjetas crecen en proporción, el
globo encoge y se le deja partir en dos líneas. */
@media (min-width:900px){
/* Apaisado, como la escena del héroe. En 4/3 el plano se comía media
pantalla de alto y las tarjetas se perdían dentro (18-09-2026). */
.todo .plano{aspect-ratio:16/9}
}
/* En vertical el plano NO puede ir apaisado: a 327 px de ancho las tres
tarjetas no caben en fila y se montaban unas sobre otras. Cuadrado y en
diagonal, que es como se reparte el sitio en una pantalla alta.
Y el globo va DEBAJO de la tarjeta, no encima: arriba, el de la primera
se salía del plano por el borde de arriba (18-09-2026). */
@media (max-width:899px){
.todo .plano{aspect-ratio:1/1}
.todo .sitio{
width:calc(31% * var(--escala));
left:var(--xm,var(--x));top:var(--ym,var(--y));
}
.todo .globo{
bottom:auto;top:calc(100% + 8px);
transform-origin:14px 0;
font-size:11.5px;padding:6px 10px;line-height:1.25;
white-space:normal;max-width:112px;
}
/* La colita, ahora apuntando hacia arriba. */
.todo .globo::after{bottom:auto;top:-4px}
}
@media (prefers-reduced-motion:reduce){
/* Menos movimiento no es menos contenido: la escena se ve montada. */
.todo .sitio{opacity:1;transform:translate(-50%,-50%)}
.todo .globo{opacity:1;transform:none}
}
/* ── Categorías ─────────────────────────────────────────────
Un desfile sin fin de publicaciones, de borde a borde de la pantalla. El
truco: la lista va escrita DOS veces y la animación desplaza justo la
mitad, así que al terminar vuelve al mismo sitio y no se ve la costura. */
.categorias{
--paso:188px;
margin:44px calc(50% - 50vw) 0;width:100vw;overflow:hidden;padding-bottom:28px;
}
/* Va a saltos, no de corrido: tres segundos quieta y salta a la siguiente.
Cada salto son 240 px, el ancho de una publicación más su hueco. Al llegar
a la novena la animación vuelve a cero, y como la lista está escrita dos
veces lo que se ve en ese instante es idéntico: el salto no se percibe. */
.desfile{
display:flex;gap:12px;width:max-content;
/* Este relleno es lo que deja la publicación activa en el centro de la
pantalla, con media a cada lado. */
padding-left:calc(50vw - var(--paso) / 2 + 6px);
animation:desfile 27s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes desfile{
0.000%,8.815%{transform:translateX(calc(var(--paso) * -1))}
11.111%,19.926%{transform:translateX(calc(var(--paso) * -2))}
22.222%,31.037%{transform:translateX(calc(var(--paso) * -3))}
33.333%,42.148%{transform:translateX(calc(var(--paso) * -4))}
44.444%,53.259%{transform:translateX(calc(var(--paso) * -5))}
55.556%,64.370%{transform:translateX(calc(var(--paso) * -6))}
66.667%,75.481%{transform:translateX(calc(var(--paso) * -7))}
77.778%,86.593%{transform:translateX(calc(var(--paso) * -8))}
88.889%,97.704%{transform:translateX(calc(var(--paso) * -9))}
100%{transform:translateX(calc(var(--paso) * -10))}
}
@media (hover:hover) and (pointer:fine){
.categorias:hover .desfile{animation-play-state:paused}
}
.categoria{position:relative;width:calc(var(--paso) - 12px);flex:none}
.categoria img{
display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;
}
.categoria .punto{
position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
}
.categoria .punto .ms{font-size:27px;color:#fff}
@media (prefers-reduced-motion:reduce){
/* El fundido se queda, que ayuda a entender el cambio; el desplazamiento no. */
.panel{transform:none;transition:opacity .2s linear,visibility .2s}
.desfile{animation:none}
/* Al parar la animación, el carril de 3.660 px se queda recortado dentro
de un `overflow:hidden` y solo asoman DOS tarjetas de diecinueve, sin
manera de llegar al resto (16-09-2026). Quien pide menos movimiento no
tiene por qué perder contenido: se deja mover a mano. La barra se
esconde porque el carril ya se entiende por el recorte de los lados. */
.categorias{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.categorias::-webkit-scrollbar{display:none}
}
/* El botón que abre el buzón, centrado como el resto del bloque. */
.llamada{margin:26px 0 0;display:flex;justify-content:center}
/* El correo se queda debajo, en pequeño: hay quien prefiere escribir desde
su propio buzón, y a un destino conviene dárselo. Pero el camino que
convierte es el botón, así que el correo no le compite. */
.otra-via{margin:16px 0 0;font-size:14.5px;color:var(--gris);text-align:center}
.llamada .boton{font-size:16.5px;padding:18px 30px;border-radius:8px}
/* ── La charla de /creadores ────────────────────────────────
Los dos globos de un mensaje directo: él pregunta a la izquierda, tú
contestas a la derecha. Es la conversación que se repite cada semana, y
dicha así se entiende sin leer el párrafo de debajo. */
.charla{
display:grid;gap:12px;margin:26px auto 0;max-width:440px;
}
.charla .dice{
margin:0;padding:13px 17px;font-size:16px;line-height:1.4;
border-radius:18px;max-width:82%;width:fit-content;
text-align:left;
}
/* La suya: gris y pegada a la izquierda, con la esquina de abajo cuadrada,
que es como se pinta un mensaje recibido en cualquier aplicación. */
.charla .suya{
background:var(--crema-honda);color:var(--tinta);
border-bottom-left-radius:5px;justify-self:start;
}
/* La tuya: oscura y a la derecha. */
.charla .mia{
background:var(--tinta);color:#fff;font-weight:500;
border-bottom-right-radius:5px;justify-self:end;
}
.mensajes .bajada{margin-top:26px}
@media (min-width:900px){
.charla{max-width:520px;margin-top:34px}
.charla .dice{font-size:17.5px}
}
/* ── El gráfico de cuánto dura una publicación (/creadores) ──
Va en SVG y no en imagen: es texto, se lee con lector de pantalla, pesa
nada y se ve nítido en cualquier pantalla. Sin cifras en los ejes a
propósito: compara formas, no mide. */
.grafico{margin:30px 0 0}
.grafico svg{display:block;width:100%;height:auto}
.grafico .rotulo{
font-family:inherit;font-size:19px;font-weight:600;letter-spacing:-.01em;
}
.grafico .eje{font-family:inherit;font-size:14px;font-weight:500}
.grafico figcaption{
margin-top:14px;font-size:13.5px;line-height:1.4;color:var(--gris);
text-align:center;
}
/* En el móvil el SVG se pinta a la mitad de tamaño, así que un rótulo de 19
unidades salía a 7 px en pantalla: ilegible (medido el 18-09-2026). Las
unidades del viewBox no son píxeles, hay que compensar a mano. */
@media (max-width:899px){
.grafico .rotulo{font-size:30px}
.grafico .eje{font-size:23px}
}
@media (min-width:900px){
.duracion .grafico{margin-top:44px;max-width:760px;margin-left:auto;margin-right:auto}
}
/* ── Ejemplos: tres cuentas de verdad ──────────────────────
Una fila de tres, nada más. En el móvil se apilan, que es lo que hace el
resto de la página. Aquí el avatar SÍ va en círculo: son personas. */
.ejemplos .fila{
display:grid;gap:18px;margin-top:34px;
grid-template-columns:1fr;
}
.cuenta{
display:grid;gap:0;text-decoration:none;color:inherit;text-align:left;
}
.cuenta .foto{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:16px;background:var(--crema-honda);
}
.cuenta .quien{display:flex;align-items:center;gap:10px;margin-top:14px}
.cuenta .cara{
width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
background:var(--crema-honda);
}
.cuenta .nombres{display:grid;min-width:0}
.cuenta .nombres strong{
font-size:16px;font-weight:600;letter-spacing:-.015em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cuenta .alias{
font-size:13.5px;color:var(--gris);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cuenta-que{
display:block;margin-top:10px;
font-size:15.5px;line-height:1.45;color:var(--gris);
}
.cuantas{
display:block;margin-top:6px;
font-size:13px;font-weight:600;color:var(--verde-hondo);
}
@media (hover:hover) and (pointer:fine){
.cuenta .foto{transition:transform .22s var(--entra)}
.cuenta:hover .foto{transform:scale(1.015)}
}
@media (prefers-reduced-motion:reduce){
.cuenta .foto{transition:none}
.cuenta:hover .foto{transform:none}
}
@media (min-width:900px){
.ejemplos .fila{grid-template-columns:repeat(3,1fr);gap:28px}
}
/* ── Las puertas por público ────────────────────────────────
Abajo del todo, justo antes del pie: a quien ha llegado hasta aquí se le
ofrece dónde seguir. Es un