/* ==========================================================================
Capa FreeMind I&T — aviso de sitio en desarrollo y no pagado
Estética de freemindiyt.com: negro dominante, blanco, CERO acentos de
color, cero degradados, cero sombras, cero radios.
Es una capa aparte a propósito: no toca ni una regla del sitio del Dr.
Amauri. Se quita el día del lanzamiento borrando tres cosas de index.html
(ver el final de este archivo).
========================================================================== */
.fm {
--fm-ink: #000;
--fm-paper: #fff;
--fm-line: rgba(255, 255, 255, .14);
--fm-e: cubic-bezier(.2, .7, .3, 1);
--fm-soft: cubic-bezier(.4, 0, .2, 1);
--fm-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--fm-mono: "Martian Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
/* Compuerta: la activa un script en línea del de cada página para pintar
el negro antes del primer fotograma, y así no ver un destello del contenido
antes de que monte la puerta. Se quita sola a los 5 s pase lo que pase. */
html.fm-esperando::before {
content: "";
position: fixed;
inset: 0;
z-index: 9499;
background: #000;
}
/* Mientras la puerta está puesta, la página de detrás no se desplaza. */
html.fm-bloqueado,
html.fm-bloqueado body { overflow: hidden; }
/* ══════════════════════════════════════════════════════════════════════════
1. PUERTA — el aviso de sitio en desarrollo y no pagado
No es decoración: es una condición que el cliente tiene que leer y aceptar
antes de recorrer la demostración. Por eso, a diferencia de una animación de
entrada, NO se salta con un clic, NO se cierra sola y NO desaparece con
prefers-reduced-motion (ahí sale entera, pero quieta).
La marca es el logo de FreeMind I&T con un signo de admiración en lugar de
los dos rombos: mismas coordenadas, misma banda de 36.5 unidades.
Dos fases:
1. La marca se dibuja en el CENTRO exacto de la pantalla.
2. Sube y aparece el texto con los dos botones.
══════════════════════════════════════════════════════════════════════════ */
.fm-puerta {
position: fixed;
inset: 0;
z-index: 9500;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(20px, 4vw, 56px);
background: var(--fm-ink);
color: var(--fm-paper);
font-family: var(--fm-display);
-webkit-font-smoothing: antialiased;
/* Se puede desplazar, pero SIN barra a la vista.
Motivo: para que la marca se forme en el centro exacto de la pantalla, el
bloque arranca desplazado hacia abajo y vuelve a su sitio al terminar. Ese
desplazamiento asoma unos 50 px por debajo durante los 3,6 s que dura la
animación, y el navegador saca una barra que aparece, parpadea y se va. El
contenido cabe de sobra (583 px de 862), así que esa barra no informa de
nada: solo ensucia.
Se oculta la barra, no la capacidad de desplazar: en una pantalla muy baja
—un móvil apaisado— se sigue llegando a los botones con la rueda, el dedo
o el tabulador. */
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Edge antiguo */
overscroll-behavior: contain; /* que el desplazamiento no se filtre a la página de detrás */
}
.fm-puerta::-webkit-scrollbar { width: 0; height: 0; }
/* Al aceptar se levanta y el script la saca del DOM. */
.fm-puerta[data-fuera="true"] { animation: fmSalir .6s var(--fm-e) forwards; }
/* BLINDAJE. Esta capa se cuelga encima de un sitio ajeno y hereda lo que ese
sitio le imponga a las etiquetas. En Toma Cero pasó: sus h2 llevan
text-transform:uppercase y el título salía «SITIO EN DESARROLLO» a gritos.
Se neutraliza solo lo que suele filtrarse por etiqueta; no es un reset
completo, que sería más frágil que el problema. */
.fm-puerta :is(h2, p, ul, li, button, a, span, strong) {
text-transform: none;
font-style: normal;
font-variant: normal;
}
.fm-puerta :is(ul, li) {
list-style: none;
padding: 0;
margin: 0;
}
/* Las excepciones: las etiquetas en mono SÍ van en mayúsculas — y también lo
que llevan dentro, o el enlace de la firma se queda en minúsculas mientras
el texto que lo rodea va en versales. */
.fm-puerta :is(.fm-puerta__etiqueta, .fm-puerta__firma, .fm-puerta__k),
.fm-puerta :is(.fm-puerta__etiqueta, .fm-puerta__firma, .fm-puerta__k) * {
text-transform: uppercase;
}
.fm-puerta__centro {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 52ch;
margin: auto;
/* La marca se forma en el CENTRO de la pantalla, no encima del centro: el
bloque arranca bajado la mitad de lo que ocupa el texto —que ya está ahí,
invisible, reservando su sitio— y después sube. El valor lo mide el
script, porque depende de cuánto texto haya. */
transform: translateY(var(--fm-baja, 0px));
}
/* ── La marca ── */
.fm-puerta__marca {
display: block;
/* El mismo tamaño que el logo en la entrada de freemindiyt.com. */
width: clamp(120px, 16vw, 168px);
height: auto;
/* Los puntos de los vértices sobresalen del viewBox. */
overflow: visible;
}
/* Contorno que se traza. 2.2 es el hilo con el que se DIBUJA, no el grosor
del marco: el marco sale del relleno, que es una banda de 36.5 unidades. */
.fm-marcaRing {
fill: none;
stroke: var(--fm-paper);
stroke-width: 2.2;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
/* Relleno: la misma forma exacta que el contorno, así que no hay salto. */
.fm-marcaFill {
fill: var(--fm-paper);
fill-rule: evenodd;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
/* Eco: el hexágono se expande y se desvanece, como un pulso de radar. Es lo
que hace que el aviso resalte sin usar un solo color. */
.fm-hexEcho {
fill: none;
stroke: var(--fm-paper);
stroke-width: 2.2;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.fm-puerta .fm-v {
--d: 0ms;
fill: var(--fm-paper);
opacity: 0;
transform: scale(.2);
transform-box: fill-box;
transform-origin: center;
}
/* ── Texto ── */
.fm-puerta__etiqueta {
margin: 2.2rem 0 0;
font-family: var(--fm-mono);
font-size: 10px;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
opacity: 0;
}
.fm-puerta__titulo {
margin: .9rem 0 0;
font-family: var(--fm-display);
font-size: clamp(1.5rem, 4vw, 2.3rem);
font-weight: 600;
letter-spacing: -.03em;
line-height: 1.05;
color: var(--fm-paper);
text-wrap: balance;
opacity: 0;
transform: translateY(8px);
}
.fm-puerta__texto {
margin: 1.1rem 0 0;
font-family: var(--fm-display);
font-size: clamp(.95rem, 1.4vw, 1.05rem);
line-height: 1.6;
color: var(--fm-paper);
opacity: 0;
transform: translateY(8px);
}
.fm-puerta__texto strong { font-weight: 600; }
.fm-puerta__filete {
width: 100%;
height: 1px;
margin-top: 2.4rem;
background: var(--fm-line);
opacity: 0;
}
/* ── Botones ── */
.fm-puerta__botones {
display: flex;
gap: 12px;
margin-top: 1.8rem;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
transform: translateY(8px);
}
.fm-puerta__b {
font-family: var(--fm-display);
font-size: .95rem;
font-weight: 500;
padding: 14px 26px;
border: 1px solid var(--fm-paper);
cursor: pointer;
transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.fm-puerta__b--si { background: var(--fm-paper); color: var(--fm-ink); }
.fm-puerta__b--si:hover { background: transparent; color: var(--fm-paper); }
.fm-puerta__b--no {
background: transparent;
color: var(--fm-paper);
border-color: var(--fm-line);
opacity: .75;
}
.fm-puerta__b--no:hover { opacity: 1; border-color: var(--fm-paper); }
.fm-puerta__b:focus-visible { outline: 1px solid var(--fm-paper); outline-offset: 3px; }
.fm-puerta__firma {
margin-top: 2.6rem;
font-family: var(--fm-mono);
font-size: 9.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .4);
opacity: 0;
}
.fm-puerta__firma a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.fm-puerta__firma a:hover { color: var(--fm-paper); }
/* ── Coreografía ───────────────────────────────────────────────────────────
Los tiempos son los de freemindiyt.com. Los solapes son a propósito: el
relleno entra en 2250 ms cuando el trazo aún no se ha apagado (2400 ms), y
el texto entra MIENTRAS el bloque sube (2700 → 3600 ms). Separar las fases
hace que la animación pegue tirones.
────────────────────────────────────────────────────────────────────────── */
.fm-puerta.fm-play .fm-v {
animation:
fmVertice .55s var(--fm-soft) var(--d) both,
fmDesaparecer .5s var(--fm-e) 1550ms forwards;
}
.fm-puerta.fm-play .fm-marcaRing {
animation:
fmTrazar 1.4s var(--fm-soft) 1000ms forwards,
fmDesaparecer .65s linear 2400ms forwards;
}
.fm-puerta.fm-play .fm-marcaFill {
animation:
fmAparecer .95s var(--fm-soft) 2250ms forwards,
fmLatidoMarca 2.8s ease-in-out 3900ms infinite;
}
.fm-puerta.fm-play .fm-hexEcho {
animation: fmEco 2.8s var(--fm-e) 3900ms infinite;
}
.fm-puerta.fm-play .fm-puerta__centro { animation: fmSubirBloque .9s var(--fm-e) 2700ms forwards; }
.fm-puerta.fm-play .fm-puerta__etiqueta { animation: fmAparecer .7s var(--fm-soft) 2950ms forwards; }
.fm-puerta.fm-play .fm-puerta__titulo { animation: fmSubir .7s var(--fm-soft) 3060ms forwards; }
.fm-puerta.fm-play .fm-puerta__texto { animation: fmSubir .7s var(--fm-soft) 3180ms forwards; }
.fm-puerta.fm-play .fm-puerta__filete { animation: fmAparecer .7s var(--fm-soft) 3320ms forwards; }
.fm-puerta.fm-play .fm-puerta__botones { animation: fmSubir .7s var(--fm-soft) 3420ms forwards; }
.fm-puerta.fm-play .fm-puerta__firma { animation: fmAparecer .7s var(--fm-soft) 3600ms forwards; }
/* Estado final sin animación. El contenido de la puerta NUNCA depende de que
la animación llegue a correr: si no corre, se planta esto. */
.fm-puerta.fm-quieto .fm-marcaRing { stroke-dashoffset: 0; opacity: 0; }
.fm-puerta.fm-quieto .fm-marcaFill { opacity: 1; }
.fm-puerta.fm-quieto .fm-v { opacity: 0; }
.fm-puerta.fm-quieto .fm-puerta__centro { transform: none; }
.fm-puerta.fm-quieto .fm-puerta__etiqueta,
.fm-puerta.fm-quieto .fm-puerta__titulo,
.fm-puerta.fm-quieto .fm-puerta__texto,
.fm-puerta.fm-quieto .fm-puerta__filete,
.fm-puerta.fm-quieto .fm-puerta__botones,
.fm-puerta.fm-quieto .fm-puerta__firma { opacity: 1; transform: none; }
/* ── Panel de rechazo ── */
.fm-puerta__no {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 50ch;
margin: auto;
opacity: 0;
transform: translateY(10px);
animation: fmSubir .6s var(--fm-e) forwards;
}
.fm-puerta[data-rechazado="true"] .fm-puerta__centro { display: none; }
.fm-puerta[data-rechazado="true"] .fm-puerta__no { display: flex; }
.fm-puerta__palabra {
margin: 1.6rem 0 0;
font-family: var(--fm-display);
font-size: clamp(1.3rem, 3vw, 1.8rem);
font-weight: 600;
letter-spacing: -.03em;
color: var(--fm-paper);
}
.fm-puerta__palabra span { font-weight: 300; margin-left: .3em; }
.fm-puerta__notxt {
margin: 1.2rem 0 0;
font-family: var(--fm-display);
font-size: clamp(.95rem, 1.4vw, 1.05rem);
line-height: 1.6;
color: rgba(255, 255, 255, .8);
}
/* El lema del grupo, con el filete de la casa a la izquierda. Es la frase que
cierra: va aparte del párrafo para que se lea como declaración, no como
coletilla. */
.fm-puerta__lema {
margin: 1.6rem 0 0;
padding-left: 1.1em;
border-left: 2px solid var(--fm-paper);
text-align: left;
font-family: var(--fm-display);
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.45;
letter-spacing: -.02em;
color: var(--fm-paper);
}
/* Dos clases a propósito: el blindaje de arriba usa `.fm-puerta :is(ul, li)`,
que tiene más especificidad que una clase suelta y le ganaba a este margen —
la lista se subía y se solapaba con el lema. */
.fm-puerta .fm-puerta__datos {
list-style: none;
padding: 2rem 0 0;
margin: 2.2rem 0 0;
display: grid;
gap: 1.3rem;
width: 100%;
border-top: 1px solid var(--fm-line);
}
.fm-puerta__k {
display: block;
font-family: var(--fm-mono);
font-size: 9.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255, 255, 255, .5);
margin-bottom: .5em;
}
.fm-puerta__v {
color: var(--fm-paper);
font-family: var(--fm-display);
font-size: 1.02rem;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.fm-puerta__v:hover { opacity: .75; }
.fm-puerta__volver { margin-top: 2.4rem; }
@keyframes fmVertice { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fmTrazar { to { stroke-dashoffset: 0; } }
@keyframes fmDesaparecer { to { opacity: 0; } }
@keyframes fmAparecer { to { opacity: 1; } }
@keyframes fmSubir { to { opacity: 1; transform: none; } }
@keyframes fmSubirBloque { to { transform: translateY(0); } }
@keyframes fmSalir { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes fmLatidoMarca { 0%, 100% { transform: scale(1); } 38% { transform: scale(1.05); } }
@keyframes fmEco {
0% { opacity: .5; transform: scale(1); }
70% { opacity: 0; transform: scale(1.22); }
100% { opacity: 0; transform: scale(1.22); }
}
/* ==========================================================================
PARA QUITARLA EL DÍA DEL LANZAMIENTO
En index.html, borrar:
1.
2. el bloque
Y del de Google Fonts, los tramos family=Archivo… y family=Martian+Mono…
Después se pueden borrar este archivo y js/freemind-aviso.js.
========================================================================== */