/* Las paginas de cada funcion (funcion.html). Va despues de landing.css y
casi todo sale de alla: la ventana y la luz de la vitrina, el vidrio de las
baldosas de la grilla, las preguntas y el cierre. Aca solo esta lo que
cambia de lugar: el titulo arriba de la ventana, las tres claves en fila y
los pasos. */
/* ---- el titulo ----
Centrado y con el aire del hero de la portada, pero sin ocupar la pantalla
entera: la ventana tiene que asomar abajo desde el primer vistazo. */
.fn-cabeza {
display: grid; justify-items: center; text-align: center;
padding: clamp(72px, 11vh, 132px) var(--gutter) 0;
}
/* Mina en su baldosa, la del inicio pero mas chica: aca acompana al titulo,
no es la portada. Como alla, la entrada espera a que este la del tinte de
la hora, para que no salte de una Mina a otra. */
.fn-icono { width: 104px; height: 104px; border-radius: 23px; }
.fn-cabeza .hero-baldosa { margin-bottom: clamp(26px, 3.6vh, 40px); }
/* Sin la luz que le sale por abajo: en el inicio anuncia las funciones que
salen de Mina, y aca no sale nada. */
.fn-cabeza .hero-baldosa::before, .fn-cabeza .hero-baldosa::after { content: none; }
/* La baldosa lleva al inicio, como el logo. */
.fn-icono { display: block; transition: transform .4s var(--ease); }
.fn-cabeza a.hero-baldosa:hover .fn-icono { transform: translateY(-3px); }
.fn-cabeza:has(img[data-tinte-icono]:not(.lista)) [data-entra] { animation-play-state: paused; }
.fn-cabeza h1.display { font-size: clamp(40px, 4.4vw, 66px); line-height: 1.05; max-width: 15em; }
.fn-cabeza .bajada {
margin-top: 24px; max-width: min(48em, 100%);
font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.5;
color: var(--tinta-2); text-wrap: balance;
}
.fn-cabeza .acciones { margin-top: 30px; display: flex; justify-content: center; gap: 12px; }
.fn-cabeza .hero-baldosa { --retraso: .02s; }
.fn-cabeza h1.display { --retraso: .1s; }
.fn-cabeza .bajada { --retraso: .2s; }
.fn-cabeza .acciones { --retraso: .3s; }
/* ---- la pantalla ----
La vitrina de la portada con una sola pantalla. Lo que alla dice .vitrina
aca lo dice .fn-vitrina: recorta la luz a lo ancho de la pagina y nada mas. */
.fn-vitrina { position: relative; z-index: 2; overflow-x: clip; }
/* En el telefono y el iPad la vitrina no recorta (abajo, como en la portada),
y la luz, que llega agrandada, se pasaba del ancho de la pantalla. Recorta
el articulo entero: arriba de la luz esta el titulo, asi que el corte
vertical que Safari hace junto con el horizontal no toca nada. */
.fn { overflow-x: clip; }
.fn-vitrina .vt-escena { padding-top: clamp(56px, 7vw, 104px); }
/* La luz de atras, del color de la funcion (su tono en la app) y no los tres
pasteles de la portada. Sutil: las mismas opacidades que alla. */
.fn-vitrina .vt-placa i {
background: linear-gradient(180deg,
transparent 4%,
color-mix(in srgb, var(--c) 30%, transparent) 32%,
color-mix(in srgb, var(--c) 34%, transparent) 58%,
color-mix(in srgb, var(--c) 18%, transparent) 80%,
transparent 100%);
}
@media (max-width: 760px) {
.fn-vitrina { overflow-x: visible; }
.fn-vitrina .vt-placa { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); }
}
@supports (-webkit-touch-callout: none) {
@media (min-width: 761px) {
.fn-vitrina { overflow-x: visible; }
.fn-vitrina .vt-placa { left: max(-22%, calc((100% - 100vw) / 2)); right: max(-22%, calc((100% - 100vw) / 2)); }
}
}
/* ---- las tres claves ----
Suben adentro del fundido de abajo de la ventana, como la leyenda en la
portada, y van como la tripa del inicio: icono suelto, nombre y lo que
hace, sin caja alrededor. */
.franja.fn-claves { padding-top: 0; padding-bottom: clamp(24px, 3vw, 48px); }
.fn-claves .ancho {
position: relative; z-index: 3;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 4vw, 64px);
margin-top: clamp(-120px, -7vw, -40px);
}
/* Como la tripa de Material en el inicio (.tripa): el icono suelto, en linea
blanca y sin baldosa, y abajo el nombre y lo que hace. */
.fn-clave i { display: block; width: 32px; height: 32px; margin-bottom: 20px; color: var(--tinta); }
.fn-clave svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fn-clave h2 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 10px; }
.fn-clave p { color: var(--tinta-2); font-size: 15.5px; line-height: 1.58; max-width: 34ch; }
/* ---- como funciona ----
El titulo a la izquierda y los pasos debajo, uno por renglon de la pagina:
el numero en la serif, el nombre y lo que pasa, separados por un filo. Es
la leyenda de la vitrina (titulo de un lado, texto del otro) en fila. */
.fn-como h2.display { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; max-width: 14em; text-wrap: balance; }
.fn-pasos { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; counter-reset: none; }
.fn-paso {
display: grid; grid-template-columns: clamp(40px, 5vw, 72px) minmax(0, 1fr) minmax(0, 1.25fr);
gap: clamp(18px, 3vw, 48px); align-items: baseline;
padding: clamp(26px, 3vw, 40px) 0;
border-top: 1px solid var(--linea);
}
.fn-paso:last-child { border-bottom: 1px solid var(--linea); }
/* El numero del tamano del nombre del paso y en su mismo renglon: mas
grande, sobresalia por arriba y se leia desalineado. */
.fn-num { font: 400 clamp(19px, 1.7vw, 23px)/1.2 var(--serif); color: rgba(245, 245, 247, .3); font-variant-numeric: tabular-nums; }
.fn-paso h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.fn-paso p { color: var(--tinta-2); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; max-width: 34em; }
@media (max-width: 760px) {
.fn-cabeza { padding-top: clamp(56px, 9vh, 88px); }
.fn-icono { width: 84px; height: 84px; border-radius: 19px; }
.fn-cabeza .bajada br.ancho, .fn-cabeza h1 br.ancho { display: none; }
.fn-cabeza h1.display { text-wrap: balance; }
.fn-cabeza .acciones { display: grid; justify-items: stretch; width: min(100%, 340px); }
.fn-cabeza .acciones .btn { justify-content: center; }
.fn-claves .ancho { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: -24px; }
.fn-clave i { margin-bottom: 14px; }
.fn-paso { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
.fn-paso p { grid-column: 2; }
}
/* ---- las piezas de los pasos ----
La caja que sigue al puntero y el vidrio de cada pieza son los de las duplas
(landing.css, .dupla-pieza y .pieza); aca solo van los dibujos. Todos cuentan
su gesto en un bucle de unos cuatro segundos, que arranca de cero cada vez
que se entra al paso (la pieza recibe .viva). Los renglones son barras de
tinta de largos distintos, como en las duplas: cuatro iguales son una
grilla, no un texto. */
.fn-piezas .pieza { width: 232px; }
.fn-paso[data-pieza] { cursor: default; }
/* subir: el campo punteado y los tres archivos cayendo de a uno */
.pz-campo {
display: grid; gap: 9px; padding: 12px;
border: 1.5px dashed var(--linea-fina); border-radius: 14px;
}
.pz-archivo {
display: flex; align-items: center; gap: 11px;
padding: 8px 10px; border-radius: 10px;
background: var(--glass-hi);
opacity: 0; transform: translateY(-14px);
}
.pz-archivo i {
display: grid; place-items: center; flex: none;
width: 30px; height: 36px; border-radius: 6px 11px 6px 6px;
background: linear-gradient(160deg, rgba(var(--tono), .95), rgba(var(--tono), .6));
font-size: 8.5px; font-weight: 700; line-height: 1; font-style: normal; letter-spacing: .04em; color: #fff;
}
.pz-archivo span { height: 7px; width: 62%; border-radius: 4px; background: currentColor; opacity: .22; }
.pieza.viva .pz-archivo { animation: pz-cae 4s var(--ease) infinite; }
.pieza.viva .pz-archivo:nth-child(2) { animation-delay: .35s; }
.pieza.viva .pz-archivo:nth-child(3) { animation-delay: .7s; }
@keyframes pz-cae {
0% { opacity: 0; transform: translateY(-14px); }
12%, 84% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: none; }
}
/* el resumen escribiendose: el titulo, y los renglones de cada tema de a uno */
.pz-hoja, .pz-resalte { display: grid; gap: 9px; justify-items: start; position: relative; }
.pz-titulo { height: 11px; width: 58%; border-radius: 5px; background: currentColor; opacity: .7; margin-bottom: 4px; }
.pz-tema { height: 8px; width: 40%; border-radius: 4px; background: currentColor; opacity: .48; margin-top: 4px; }
.pz-renglon { height: 6px; width: var(--largo); border-radius: 3px; background: currentColor; opacity: .2; }
.pz-hoja > * { transform-origin: 0 50%; }
.pieza.viva .pz-hoja > * { animation: pz-escribe 4.4s var(--ease) infinite; animation-delay: calc(var(--n) * .22s); }
.pz-hoja > :nth-child(1) { --n: 0; } .pz-hoja > :nth-child(2) { --n: 1; }
.pz-hoja > :nth-child(3) { --n: 2; } .pz-hoja > :nth-child(4) { --n: 3; }
.pz-hoja > :nth-child(5) { --n: 4; } .pz-hoja > :nth-child(6) { --n: 5; }
.pz-hoja > :nth-child(7) { --n: 6; }
@keyframes pz-escribe {
0% { transform: scaleX(0); }
14%, 86% { transform: scaleX(1); }
98%, 100% { transform: scaleX(0); }
}
/* a tu manera: el resaltador pasa por un renglon y aparece el comentario */
.pz-marcado { position: relative; opacity: 1; background: none; }
.pz-marcado::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: currentColor; opacity: .2; }
.pz-marcado b {
position: absolute; left: -4px; top: -5px; bottom: -5px; width: calc(100% + 8px);
border-radius: 4px; background: rgba(var(--tono-amarillo), .55);
transform: scaleX(0); transform-origin: 0 50%;
}
.pieza.viva .pz-marcado b { animation: pz-pasa 4.2s var(--ease) infinite; }
@keyframes pz-pasa {
0%, 8% { transform: scaleX(0); }
30%, 88% { transform: scaleX(1); }
98%, 100% { transform: scaleX(0); }
}
.pz-globo {
position: absolute; right: -6px; top: -14px;
display: grid; gap: 5px; width: 64px; padding: 9px 10px;
border-radius: 12px 12px 12px 4px;
background: rgba(var(--tono-azul), .9); box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
opacity: 0; transform: translateY(6px) scale(.8); transform-origin: 0 100%;
}
.pz-globo i { height: 5px; border-radius: 3px; background: #fff; opacity: .85; }
.pz-globo i + i { width: 64%; }
.pieza.viva .pz-globo { animation: pz-globo 4.2s var(--resorte, var(--ease)) infinite; }
@keyframes pz-globo {
0%, 32% { opacity: 0; transform: translateY(6px) scale(.8); }
42%, 88% { opacity: 1; transform: none; }
98%, 100% { opacity: 0; transform: translateY(6px) scale(.8); }
}
/* ---- la comparacion ----
La tabla de Macro con el vidrio del sitio: una caja de esquinas grandes, la
fila de arriba apenas encendida y las de abajo alternadas, sin rayas entre
columnas. La columna de Filmina lleva su nombre en la serif del logo.
Los signos: el visto a tinta plena, la raya del parcial y la cruz apagadas. */
.fn-comparar h2.display { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; max-width: 14em; text-wrap: balance; }
.fn-tabla {
margin-top: clamp(36px, 4.4vw, 60px);
border: 1px solid var(--edge); border-radius: 22px; overflow: hidden;
background: rgba(245, 245, 247, .015);
}
.fn-tabla table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fn-tabla th, .fn-tabla td { padding: clamp(16px, 1.8vw, 24px) clamp(16px, 2vw, 30px); text-align: center; vertical-align: middle; }
.fn-tabla thead th { background: rgba(245, 245, 247, .045); font-size: clamp(14.5px, 1.2vw, 17px); font-weight: 500; color: var(--tinta); }
.fn-tabla thead th:first-child { color: var(--tinta-2); font-weight: 400; }
.fn-tabla th:first-child { width: 46%; text-align: left; }
.fn-tabla tbody th { font-weight: 400; font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.45; color: var(--tinta); }
.fn-tabla tbody tr { border-top: 1px solid var(--linea-fina); }
.fn-tabla tbody tr:nth-child(even) { background: rgba(245, 245, 247, .022); }
.fn-nosotros { white-space: nowrap; }
/* Filmina en la serif del logo y un poco mas grande: la columna propia se
distingue por el nombre, sin icono. */
.fn-tabla thead .fn-nosotros { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: -.01em; }
.fn-signo { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.fn-signo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fn-si .fn-signo { color: var(--tinta); }
.fn-parcial .fn-signo { color: var(--tinta-3); }
.fn-no .fn-signo { color: rgba(245, 245, 247, .3); }
.fn-no .fn-signo svg { width: 18px; height: 18px; }
.fn-comparar-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.fn-signos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 14px; color: var(--tinta-2); }
.fn-signos li { display: inline-flex; align-items: center; gap: 8px; }
.fn-signos .fn-signo { width: 20px; height: 20px; }
.fn-signos .fn-signo svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
.fn-tabla { border-radius: 16px; }
.fn-tabla th, .fn-tabla td { padding: 14px 2px; }
.fn-tabla th:first-child { width: 33%; padding: 14px 6px 14px 12px; }
.fn-tabla thead th { font-size: 11px; letter-spacing: -.01em; }
.fn-tabla tbody th { font-size: 13.5px; }
.fn-tabla thead .fn-nosotros { font-size: 15px; }
}
/* barras de audio: comunes a grabar, explicar y podcast. Cada barra late con
su propio retraso, asi la onda no sube y baja entera como un bloque. */
.pz-barras { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.pz-barras b { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; opacity: .55; transform: scaleY(.25); }
.pieza.viva .pz-barras b { animation: pz-late 1.1s ease-in-out infinite alternate; }
.pz-barras b:nth-child(3n+1) { animation-delay: -.2s !important; }
.pz-barras b:nth-child(3n+2) { animation-delay: -.55s !important; }
.pz-barras b:nth-child(4n) { animation-delay: -.8s !important; }
@keyframes pz-late { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
/* grabar: el punto rojo y la onda, y la transcripcion escribiendose abajo */
.pz-onda { display: grid; gap: 16px; }
.pz-graba { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: var(--glass-hi); width: max-content; }
.pz-graba > i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255, 96, 86); box-shadow: 0 0 0 4px rgba(255, 96, 86, .2); }
.pieza.viva .pz-graba > i { animation: pz-punto 1.4s ease-in-out infinite; }
@keyframes pz-punto { 50% { opacity: .35; } }
.pz-dicta > * { --n: 0; }
.pz-dicta > :nth-child(2) { --n: 3; } .pz-dicta > :nth-child(3) { --n: 6; }
.pieza.viva .pz-dicta > * { animation: pz-escribe 4.4s var(--ease) infinite; animation-delay: calc(var(--n) * .22s); }
/* apuntes: titulo, vinetas y la tarea que se tilda */
.pz-nota { display: grid; gap: 11px; }
.pz-vineta, .pz-tarea { display: flex; align-items: center; gap: 9px; }
.pz-vineta > i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.pz-vineta .pz-renglon, .pz-tarea .pz-renglon, .pz-op .pz-renglon, .pz-cita .pz-renglon { flex: 1; max-width: var(--largo); width: auto; }
.pz-tarea > i { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--edge-hi, rgba(245,245,247,.3)); }
.pz-tarea svg, .pz-op svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; }
.pieza.viva .pz-tarea > i { animation: pz-caja 4s var(--ease) infinite; }
.pieza.viva .pz-tarea svg { animation: pz-tilde 4s var(--ease) infinite; }
@keyframes pz-caja { 0%, 30% { background: transparent; border-color: rgba(245,245,247,.3); } 42%, 88% { background: rgb(var(--tono-azul)); border-color: rgb(var(--tono-azul)); } 98%, 100% { background: transparent; } }
@keyframes pz-tilde { 0%, 34% { stroke-dashoffset: 14; } 48%, 88% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 14; } }
/* explicar: la diapositiva y el marco azul pasando por sus bloques */
.pz-diapo { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--glass-hi); border: 1px solid var(--linea-fina); }
.pz-bloque { display: grid; gap: 6px; }
.pz-marco {
position: absolute; left: 8px; right: 8px; top: 35px; height: 26px; border-radius: 7px;
box-shadow: 0 0 0 2px rgba(var(--tono-azul), .95), 0 0 0 6px rgba(var(--tono-azul), .16);
}
.pieza.viva .pz-marco { animation: pz-marco 5s var(--ease) infinite; }
@keyframes pz-marco {
0%, 22% { top: 35px; height: 26px; }
32%, 54% { top: 66px; height: 14px; }
64%, 88% { top: 85px; height: 26px; }
98%, 100% { top: 35px; height: 26px; }
}
.pz-habla { margin-top: 12px; color: rgb(var(--tono-azul)); }
/* preguntar: tu globo y el de Mina con la diapositiva citada */
.pz-chat { display: grid; gap: 10px; }
.pz-yo { justify-self: end; width: 62%; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: rgba(var(--tono-azul), .85); }
.pz-yo .pz-renglon { background: #fff; opacity: .9; }
.pz-mina { display: grid; gap: 7px; width: 84%; padding: 11px 12px; border-radius: 14px 14px 14px 4px; background: var(--glass-hi); }
.pz-cita { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linea-fina); }
.pz-cita > i { flex: none; width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(160deg, rgba(var(--tono-amarillo), .9), rgba(var(--tono-amarillo), .5)); }
.pz-yo, .pz-mina { opacity: 0; transform: translateY(8px); }
.pieza.viva .pz-yo { animation: pz-globo-sube 4.4s var(--ease) infinite; }
.pieza.viva .pz-mina { animation: pz-globo-sube 4.4s var(--ease) .7s infinite; }
@keyframes pz-globo-sube { 0% { opacity: 0; transform: translateY(8px); } 12%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
/* mapa: las ramas se dibujan y cada tema se pinta de su color */
.pz-mapa { display: block; width: 100%; height: auto; }
.pz-mapa path { fill: none; stroke: currentColor; stroke-opacity: .28; stroke-width: 1.4; stroke-dasharray: 260; stroke-dashoffset: 260; }
.pieza.viva .pz-mapa path { animation: pz-ramas 4.6s var(--ease) infinite; }
@keyframes pz-ramas { 0% { stroke-dashoffset: 260; } 30%, 88% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 260; } }
.pz-centro { fill: rgba(var(--tono-violeta), .5); stroke: rgba(var(--tono-violeta), .9); stroke-width: 1; }
.pz-n { fill: rgba(245, 245, 247, .06); stroke: rgba(245, 245, 247, .18); stroke-width: 1; }
.pieza.viva .pz-n { animation: pz-pinta 4.6s var(--ease) infinite; animation-delay: calc(.5s + var(--i) * .3s); }
@keyframes pz-pinta {
0%, 10% { fill: rgba(245, 245, 247, .06); stroke: rgba(245, 245, 247, .18); }
24%, 86% { fill: rgba(var(--c), .35); stroke: rgba(var(--c), .9); }
98%, 100% { fill: rgba(245, 245, 247, .06); stroke: rgba(245, 245, 247, .18); }
}
/* flashcards: la tarjeta da media vuelta y muestra la respuesta */
.pz-tarjeta { position: relative; height: 112px; perspective: 600px; }
.pz-cara {
position: absolute; inset: 0; display: grid; align-content: center; gap: 9px; padding: 16px 18px;
border-radius: 14px; background: var(--glass-hi); border: 1px solid var(--linea-fina);
backface-visibility: hidden; transform: rotateY(0);
}
.pz-cara em { position: absolute; right: 14px; bottom: 10px; font: 400 22px/1 var(--serif); font-style: normal; opacity: .4; }
.pz-dorso { transform: rotateY(180deg); background: rgba(var(--tono-violeta), .22); border-color: rgba(var(--tono-violeta), .4); }
.pieza.viva .pz-cara { animation: pz-vuelta 4.4s var(--ease) infinite; }
.pieza.viva .pz-dorso { animation-name: pz-vuelta-dorso; }
@keyframes pz-vuelta { 0%, 30% { transform: rotateY(0); } 44%, 84% { transform: rotateY(-180deg); } 98%, 100% { transform: rotateY(-360deg); } }
@keyframes pz-vuelta-dorso { 0%, 30% { transform: rotateY(180deg); } 44%, 84% { transform: rotateY(0); } 98%, 100% { transform: rotateY(-180deg); } }
/* opciones: se elige la buena y se pone verde */
.pz-opciones { display: grid; gap: 9px; }
.pz-pregunta { opacity: .5; height: 7px; margin-bottom: 4px; }
.pz-op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linea-fina); }
.pz-op > i { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(245, 245, 247, .3); }
.pieza.viva .pz-bien { animation: pz-acierto 4s var(--ease) infinite; }
.pieza.viva .pz-bien > i { animation: pz-caja-verde 4s var(--ease) infinite; }
.pieza.viva .pz-bien svg { animation: pz-tilde 4s var(--ease) infinite; }
@keyframes pz-acierto { 0%, 30% { background: transparent; border-color: var(--linea-fina); } 42%, 88% { background: var(--acierto-fondo, rgba(74,214,124,.16)); border-color: var(--acierto-borde, rgba(120,214,140,.55)); } 98%, 100% { background: transparent; } }
@keyframes pz-caja-verde { 0%, 30% { background: transparent; border-color: rgba(245,245,247,.3); } 42%, 88% { background: rgb(var(--tono-verde)); border-color: rgb(var(--tono-verde)); } 98%, 100% { background: transparent; } }
/* plan: los dias que se marcan hasta el del parcial, y lo que toca hoy */
.pz-dias { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pz-dias i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(245, 245, 247, .25); }
.pz-dias b { width: 24px; height: 24px; border-radius: 7px; background: rgba(var(--tono-amarillo), .85); margin-left: 2px; }
.pieza.viva .pz-dias i { animation: pz-dia 4.4s var(--ease) infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes pz-dia { 0%, 6% { background: transparent; border-color: rgba(245,245,247,.25); } 16%, 86% { background: rgb(var(--tono-azul)); border-color: rgb(var(--tono-azul)); } 98%, 100% { background: transparent; } }
.pz-hoy { gap: 8px; }
/* calendario: la semana, sus bloques y uno que se arrastra de dia */
.pz-semana { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; height: 96px; }
.pz-semana > span { border-radius: 7px; background: rgba(245, 245, 247, .035); border: 1px solid var(--linea-fina); }
.pz-blq {
position: absolute; width: calc((100% - 20px) / 5 - 6px);
left: calc(var(--x) * ((100% - 20px) / 5 + 5px) + 3px); top: calc(var(--y) * 1px); height: calc(var(--h) * 1px);
border-radius: 5px; background: rgba(var(--c), .7);
}
.pieza.viva .pz-mueve { animation: pz-arrastra 4.6s var(--ease) infinite; }
@keyframes pz-arrastra {
0%, 20% { transform: none; box-shadow: none; }
30% { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
52% { transform: translate(calc(200% + 10px), -22px) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
60%, 88% { transform: translate(calc(200% + 10px), -22px); box-shadow: none; }
98%, 100% { transform: none; }
}
/* dibujar: el circulo rojo y el subrayado azul sobre la diapositiva */
.pz-papel { gap: 9px; padding-bottom: 18px; }
.pz-trazo { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); overflow: visible; }
.pz-trazo path { fill: none; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pz-circulo { stroke: rgb(255, 96, 86); stroke-dasharray: 420; stroke-dashoffset: 420; }
.pz-subraya { stroke: rgb(var(--tono-azul)); stroke-dasharray: 170; stroke-dashoffset: 170; }
.pieza.viva .pz-circulo { animation: pz-dibuja 4.6s var(--ease) infinite; }
.pieza.viva .pz-subraya { animation: pz-dibuja-2 4.6s var(--ease) infinite; }
@keyframes pz-dibuja { 0%, 6% { stroke-dashoffset: 420; } 36%, 88% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 420; } }
@keyframes pz-dibuja-2 { 0%, 40% { stroke-dashoffset: 170; } 56%, 88% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 170; } }
/* podcast: dos voces que se turnan */
.pz-podcast { display: grid; gap: 12px; }
.pz-voz { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--glass-hi); }
.pz-voz > i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(var(--c), 1), rgba(var(--c), .55)); }
.pz-voz .pz-barras { color: rgb(var(--c, 245, 245, 247)); }
.pz-voz:first-child .pz-barras { color: rgb(var(--tono-violeta)); }
.pz-otra .pz-barras { color: rgb(var(--tono-amarillo)); }
.pieza.viva .pz-voz { animation: pz-turno 4s steps(1) infinite; }
.pieza.viva .pz-otra { animation-delay: -2s; }
@keyframes pz-turno { 0% { opacity: 1; } 50% { opacity: .35; } }
/* ---- el resto de Filmina ----
Tarjetas de vidrio, una por funcion: arriba la ventana de la app con su
pantalla de la vitrina en chico (el iframe de 1440 achicado al ancho, que
escribe funcion.js en --escala) y desvanecida hacia abajo como la grande;
abajo la baldosa, el nombre y la frase. Al pasar el puntero la tarjeta sube
un poco, se enciende el borde y la pantalla se anima. */
/* Va pegada a la tabla: la franja de la tabla ya dejo su aire abajo. */
.franja.fn-comparar:has(+ .fn-sigue) { padding-bottom: 0; }
.franja.fn-sigue { padding-top: clamp(48px, 5.5vw, 80px); }
.fn-cartas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.fn-carta {
position: relative; display: flex; flex-direction: column;
border-radius: 22px; overflow: hidden;
/* Sin borde: la tarjeta es el color de su funcion, apenas, mas tenue que
la baldosa del icono. */
background: color-mix(in srgb, var(--c) 7%, #000);
color: var(--tinta);
transition: transform .45s var(--ease), background .3s ease;
}
.fn-carta:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--c) 11%, #000); }
.fn-carta-ventana {
position: relative; margin: 14px 14px 0; border-radius: 12px 12px 0 0; overflow: hidden;
background: #000; border: 1px solid rgba(245, 245, 247, .1); border-bottom: 0;
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.fn-carta-ventana .titlebar-mac { height: 22px; padding: 0 10px; gap: 5px; display: flex; align-items: center; }
.fn-carta-ventana .luz { width: 7px; height: 7px; }
.fn-carta-pantalla { position: relative !important; inset: auto !important; aspect-ratio: 16 / 9; overflow: hidden; }
.fn-carta-pantalla iframe { transform: scale(var(--escala, .25)); }
/* El nombre y la flecha en el mismo renglon; la bajada abajo, a todo el
ancho. */
.fn-carta-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 6px 22px 22px; }
.fn-carta-pie i {
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 26%;
background: rgba(245, 245, 247, .07); color: #f5f5f7;
}
/* El color de la funcion en la app, el pastel de los chips de la barra
(sb-accion-chip). */
.fn-tono { --c: #b896ff; }
.fn-tono[data-tono=ambar] { --c: #ffdd6b; }
.fn-tono[data-tono=azul] { --c: #8fb8ff; }
.fn-tono[data-tono=rosa] { --c: #ffb9b1; }
.fn-tono[data-tono=verde] { --c: #a9e2b4; }
.fn-tono[data-tono=violeta] { --c: #b896ff; }
/* Sin baldosa: el icono suelto, en el color de su funcion, sobre el tinte de
la tarjeta. */
.fn-carta-pie i.fn-tono { width: 22px; height: 22px; background: none; color: var(--c); flex: none; }
.fn-carta-pie i.fn-tono svg { width: 22px; height: 22px; }
.fn-carta-pie i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* El icono al lado del nombre, en la misma linea. */
.fn-carta-pie b { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
/* Lo que dice la tarjeta ('carta' en sus textos): dos renglones que llenan
la tarjeta de borde a borde (pretty y no balance, que los emparejaria
acortando el primero). */
.fn-carta-pie p {
grid-column: 1 / -1;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
margin: 8px 0 0; color: var(--tinta-2); font-size: 14.5px; line-height: 1.45; text-wrap: pretty;
}
.fn-flecha { width: 18px; height: 18px; fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease), stroke .3s var(--ease); }
.fn-carta:hover .fn-flecha { transform: translateX(3px); stroke: var(--tinta); }
@media (max-width: 760px) {
.fn-cartas { grid-template-columns: minmax(0, 1fr); }
}
}