/* ===================================================================== * /porteria · lo propio de la página de control de ingresos * * Todo acotado bajo `.pt-pg` (la clase del ) y con el prefijo `pt-`. * El motivo está en docs/GOTCHAS.md §4 y no es teórico: `estilos.css` pasa las * 300 reglas y ya se pisaron dos veces nombres genéricos. Antes de agregar una * clase acá, grepearla allá. * * Ni un hex suelto: todo sale de tokens.css (docs/MARCA.md). * Y minmax(0, 1fr) en cada grilla — `1fr` pelado es `minmax(auto, 1fr)` y ese * `auto` no baja del contenido, así que un dato largo estira la columna entera. * ===================================================================== */ /* =========================================================== hero */ .pt-pg .pt-hero-fila{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--sp-7); align-items:center; } .pt-pg .pt-hero h1{ margin:var(--sp-3) 0 0 } .pt-pg .pt-oro{ color:var(--gold) } .pt-pg .pt-hero-bajada{ margin:var(--sp-4) 0 0; max-width:56ch; color:var(--muted); font-size:var(--fs-lg); line-height:1.65; } .pt-pg .pt-hero-botones{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-top:var(--sp-6); } .pt-pg .pt-hero-link{ color:var(--cyan); text-decoration:none; font-weight:600; font-size:var(--fs-md); } .pt-pg .pt-hero-link:hover{ text-decoration:underline } /* ---- el ciclo de cuatro sellos, como figura del hero ---- */ .pt-pg .pt-ciclo{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); } .pt-pg .pt-ciclo-tit{ margin:0 0 var(--sp-4); font-family:var(--baj); text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-xs); color:var(--subtle); } .pt-pg .pt-ciclo-lista{ list-style:none; margin:0; padding:0 } .pt-pg .pt-sello{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 var(--sp-4); padding:0 0 var(--sp-4) var(--sp-5); position:relative; } /* La línea de tiempo: un borde a la izquierda y un punto por sello. El último no lleva línea, o el recorrido parece seguir después de que la persona se fue. */ .pt-pg .pt-sello::before{ content:''; position:absolute; left:4px; top:6px; width:1px; height:100%; background:var(--line-2); } .pt-pg .pt-sello-ult::before{ display:none } .pt-pg .pt-sello::after{ content:''; position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:var(--r-pill); background:var(--panel-2); border:2px solid var(--cyan); } .pt-pg .pt-sello-ult::after{ border-color:var(--gold) } .pt-pg .pt-sello-hora{ grid-row:1; color:var(--ink); font-weight:700; font-size:var(--fs-md) } .pt-pg .pt-sello-que{ grid-row:1; color:var(--ink); font-weight:600; font-size:var(--fs-md) } .pt-pg .pt-sello-quien{ grid-column:2; grid-row:2; color:var(--subtle); font-size:var(--fs-sm); } .pt-pg .pt-ciclo-pie{ margin:var(--sp-2) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--line); color:var(--gold-1); font-size:var(--fs-sm); line-height:1.5; } /* ================================================== por qué nos llaman */ .pt-pg .pt-males{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); } .pt-pg .pt-mal{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-6); } .pt-pg .pt-mal h3{ margin:0 0 var(--sp-3); font-size:var(--fs-xl) } .pt-pg .pt-mal p{ margin:0; color:var(--muted); line-height:1.65 } /* ============================================================ el demo */ .pt-pg .pt-demo{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); align-items:start; } .pt-pg .pt-col{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; min-height:320px; } .pt-pg .pt-col-cab{ padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); background:var(--panel-2); } .pt-pg .pt-col-tit{ margin:0; font-family:var(--baj); text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-md); color:var(--ink); } .pt-pg .pt-col-quien{ margin:2px 0 0; color:var(--subtle); font-size:var(--fs-xs) } .pt-pg .pt-col-cuerpo{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4) } /* El registro es la columna que menos cambia: va un poco más apagada para que la atención quede en las dos donde hay botones. */ .pt-pg .pt-col-registro{ background:var(--navy) } /* ---- estados vacíos y tarjetas ---- */ .pt-pg .pt-hueco{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:flex-start } .pt-pg .pt-hueco-txt{ margin:0; color:var(--muted); font-size:var(--fs-md) } .pt-pg .pt-tarjeta{ display:flex; flex-direction:column; gap:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4); background:var(--panel-2); } .pt-pg .pt-tarjeta-ok{ border-color:var(--ok-borde); background:var(--sobre-ok) } .pt-pg .pt-tarjeta-espera{ border-color:var(--line-2) } .pt-pg .pt-tarjeta-pasar{ border-color:var(--ok-borde); background:var(--sobre-ok) } .pt-pg .pt-tarjeta-salida{ border-color:var(--oro-borde); background:var(--sobre-oro) } .pt-pg .pt-tarjeta-cab{ margin:0; font-family:var(--baj); text-transform:uppercase; letter-spacing:.07em; font-size:var(--fs-xs); color:var(--subtle); } .pt-pg .pt-cab-ok{ color:var(--ok) } .pt-pg .pt-cab-oro{ color:var(--gold) } .pt-pg .pt-tarjeta-txt{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.6 } .pt-pg .pt-persona{ margin:0; font-size:var(--fs-xl); font-weight:700; color:var(--ink) } .pt-pg .pt-persona-doc{ margin:0; color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-conocida{ margin:0; color:var(--cyan); font-size:var(--fs-sm); line-height:1.55; } .pt-pg .pt-conocida b{ color:var(--ink) } .pt-pg .pt-ayuda{ margin:0; color:var(--subtle); font-size:var(--fs-sm); line-height:1.55 } /* ---- los dos campos que salen cargados solos ---- */ .pt-pg .pt-campos{ margin:0; display:grid; gap:var(--sp-2) } .pt-pg .pt-campo{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-3); align-items:baseline; padding:var(--sp-2) var(--sp-3); background:var(--navy); border:1px solid var(--line); border-radius:var(--r-sm); } .pt-pg .pt-campo dt{ color:var(--subtle); font-size:var(--fs-xs) } .pt-pg .pt-campo dd{ margin:0; color:var(--ink); font-weight:600; font-size:var(--fs-md) } /* ---- el reloj de la espera ---- */ .pt-pg .pt-espera-reloj{ margin:0; display:flex; align-items:baseline; gap:var(--sp-3) } .pt-pg .pt-espera-reloj .num{ font-size:var(--fs-3xl); font-weight:700; color:var(--gold) } .pt-pg .pt-espera-txt{ color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-muelle{ margin:0; color:var(--ink); font-size:var(--fs-lg) } .pt-pg .pt-muelle b{ color:var(--ok) } /* ---- la carga de bultos ---- */ .pt-pg .pt-bultos-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) } .pt-pg .pt-bultos-rot{ color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-bultos-input{ width:78px; padding:var(--sp-2) var(--sp-3); background:var(--navy); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-lg); font-weight:700; text-align:center; } .pt-pg .pt-bultos-input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px } /* ---- el cierre del demo ---- */ .pt-pg .pt-cierre-txt{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.6 } .pt-pg .pt-cierre-dato{ margin:0; padding-top:var(--sp-3); border-top:1px solid var(--ok-borde); color:var(--muted); font-size:var(--fs-sm); line-height:1.55; } .pt-pg .pt-cierre-dato b{ color:var(--ok); font-size:var(--fs-xl) } /* ---- botones ---- */ .pt-pg .pt-btn{ align-self:flex-start; cursor:pointer; padding:var(--sp-3) var(--sp-4); background:var(--panel-2); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-md); font-weight:600; transition:border-color var(--ease), background var(--ease), color var(--ease); } .pt-pg .pt-btn:hover{ border-color:var(--gold-2); color:var(--gold-1) } .pt-pg .pt-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px } .pt-pg .pt-btn-primario{ background:var(--gold); color:var(--navy); border-color:var(--gold); } .pt-pg .pt-btn-primario:hover{ background:var(--gold-1); border-color:var(--gold-1); color:var(--navy) } /* Los de equivocarse a propósito: se ven como lo que son —una invitación, no la acción principal— pero no se esconden, porque son medio argumento. */ .pt-pg .pt-probar{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); padding-top:var(--sp-4); border-top:1px dashed var(--line-2); } .pt-pg .pt-probar-tit{ margin:0; font-family:var(--baj); text-transform:uppercase; letter-spacing:.07em; font-size:var(--fs-xs); color:var(--subtle); } .pt-pg .pt-btn-mal{ padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); font-weight:500; background:transparent; color:var(--muted); border-style:dashed; } .pt-pg .pt-btn-mal:hover{ color:var(--bad); border-color:var(--bad) } /* ---- el cartel del freno ---- */ .pt-pg .pt-aviso{ margin:0; padding:var(--sp-3) var(--sp-4); background:var(--panel-2); border:1px solid var(--bad); border-left-width:3px; border-radius:var(--r-sm); color:var(--ink); font-size:var(--fs-sm); line-height:1.55; } /* ---- el tablero de logística ---- */ .pt-pg .pt-fila{ display:flex; flex-direction:column; gap:var(--sp-3); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r-sm); padding:var(--sp-4); background:var(--panel-2); } .pt-pg .pt-fila-espera{ border-left-color:var(--gold) } .pt-pg .pt-fila-adentro{ border-left-color:var(--cyan) } .pt-pg .pt-fila-cerrada{ border-left-color:var(--ok) } .pt-pg .pt-fila-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) } .pt-pg .pt-fila-cab .num{ color:var(--gold); font-weight:700; font-size:var(--fs-lg) } .pt-pg .pt-chip{ display:inline-block; padding:2px var(--sp-3); border-radius:var(--r-pill); font-family:var(--baj); text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-xs); font-weight:700; } .pt-pg .pt-chip-espera{ background:var(--sobre-oro); color:var(--gold-1); border:1px solid var(--oro-borde) } .pt-pg .pt-chip-adentro{ background:var(--panel); color:var(--cyan); border:1px solid var(--line-2) } .pt-pg .pt-chip-ok{ background:var(--sobre-ok); color:var(--ok); border:1px solid var(--ok-borde) } .pt-pg .pt-fila-quien{ margin:0; color:var(--ink); font-weight:600; font-size:var(--fs-lg) } .pt-pg .pt-fila-emp{ color:var(--muted); font-weight:400 } .pt-pg .pt-fila-pedido{ margin:0; color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-fila-rot{ margin:0; color:var(--muted); font-size:var(--fs-sm); line-height:1.55 } .pt-pg .pt-muelles{ display:flex; flex-wrap:wrap; gap:var(--sp-2) } .pt-pg .pt-muelle-btn{ cursor:pointer; min-width:44px; padding:var(--sp-2) var(--sp-3); background:var(--navy); color:var(--muted); border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:var(--baj); font-size:var(--fs-lg); font-weight:700; transition:border-color var(--ease), color var(--ease), background var(--ease); } .pt-pg .pt-muelle-btn:hover{ color:var(--ink); border-color:var(--gold-2) } .pt-pg .pt-muelle-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px } .pt-pg .pt-muelle-elegido{ background:var(--gold); color:var(--navy); border-color:var(--gold) } /* ---- lo que queda registrado ---- */ .pt-pg .pt-linea{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3) } .pt-pg .pt-hito{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); } .pt-pg .pt-hito:last-child{ border-bottom:0; padding-bottom:0 } .pt-pg .pt-hito-hora{ grid-row:1; color:var(--cyan); font-size:var(--fs-sm); font-weight:700 } .pt-pg .pt-hito-que{ grid-row:1; color:var(--ink); font-size:var(--fs-md); font-weight:600 } .pt-pg .pt-hito-quien{ grid-column:2; grid-row:2; color:var(--subtle); font-size:var(--fs-xs) } .pt-pg .pt-registro-vacio{ margin:0; color:var(--subtle); font-size:var(--fs-sm); line-height:1.55 } .pt-pg .pt-cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--line); } .pt-pg .pt-cifra{ display:flex; flex-direction:column; gap:2px } .pt-pg .pt-cifra b{ font-size:var(--fs-2xl); font-weight:700; color:var(--ink); line-height:1 } .pt-pg .pt-cifra span{ color:var(--subtle); font-size:var(--fs-xs); line-height:1.3 } .pt-pg .pt-demo-pie{ margin:var(--sp-5) 0 0; text-align:center; color:var(--subtle); font-size:var(--fs-sm); } /* ========================================================== qué incluye */ .pt-pg .pt-modulos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); } .pt-pg .pt-modulo{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); } .pt-pg .pt-modulo h3{ margin:0 0 var(--sp-2); font-size:var(--fs-lg) } .pt-pg .pt-modulo p{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.6 } /* =========================================================== cómo se pone */ .pt-pg .pt-pasos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); } .pt-pg .pt-paso{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); } .pt-pg .pt-paso-n{ margin:0 0 var(--sp-3); font-family:var(--baj); font-size:var(--fs-3xl); font-weight:700; color:var(--gold); line-height:1; } .pt-pg .pt-paso h3{ margin:0 0 var(--sp-2); font-size:var(--fs-lg) } .pt-pg .pt-paso p{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.6 } /* ============================================================= preguntas */ .pt-pg .pt-faq{ display:grid; gap:var(--sp-3); max-width:80ch } .pt-pg .pt-pregunta{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); } .pt-pg .pt-pregunta summary{ cursor:pointer; color:var(--ink); font-weight:600; font-size:var(--fs-lg); } .pt-pg .pt-pregunta summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px } .pt-pg .pt-pregunta[open] summary{ color:var(--gold-1); margin-bottom:var(--sp-3) } .pt-pg .pt-pregunta p{ margin:0; color:var(--muted); line-height:1.65 } /* ================================== el segundo demo: ingresos de personal */ /* Dos columnas y no tres: acá no hay tercera punta —es el portón y la lista—, así que la grilla de tres dejaría un hueco que se lee como si faltara algo. */ .pt-pg .pt-demo-dos{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) } .pt-pg .pt-buscar-rot{ display:block; color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-buscar-rot b{ color:var(--gold-1) } .pt-pg .pt-buscar{ width:100%; padding:var(--sp-3) var(--sp-4); background:var(--navy); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-lg); } .pt-pg .pt-buscar::placeholder{ color:var(--subtle) } .pt-pg .pt-buscar:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px } /* ---- los resultados de la búsqueda ---- */ .pt-pg .pt-fila-persona{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--sp-3); width:100%; text-align:left; cursor:pointer; padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); background:var(--panel-2); color:inherit; border:1px solid var(--line); border-radius:var(--r-sm); font-family:inherit; transition:border-color var(--ease), background var(--ease); } .pt-pg .pt-fila-persona:hover{ border-color:var(--gold-2); background:var(--panel) } .pt-pg .pt-fila-persona:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px } .pt-pg .pt-fp-nombre{ color:var(--ink); font-weight:600; font-size:var(--fs-md) } .pt-pg .pt-fp-datos{ grid-column:1; display:flex; flex-wrap:wrap; gap:var(--sp-3); color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-fp-dentro{ grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--gold); font-size:var(--fs-xs); font-family:var(--baj); text-transform:uppercase; letter-spacing:.06em; } .pt-pg .pt-chapa{ padding:1px var(--sp-2); border-radius:var(--r-sm); background:var(--navy); border:1px solid var(--line-2); color:var(--gold-1); letter-spacing:.04em; } .pt-pg .pt-sin{ margin:0; color:var(--subtle); font-size:var(--fs-sm); line-height:1.55 } /* ---- el panel de la persona elegida ---- */ .pt-pg .pt-rot{ margin:0; color:var(--subtle); font-size:var(--fs-sm) } .pt-pg .pt-desde{ margin:0; color:var(--muted); font-size:var(--fs-md) } .pt-pg .pt-desde b{ color:var(--gold) } .pt-pg .pt-vehiculos{ display:flex; flex-wrap:wrap; gap:var(--sp-2) } .pt-pg .pt-veh{ cursor:pointer; padding:var(--sp-2) var(--sp-3); background:var(--navy); color:var(--muted); border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-sm); font-weight:600; transition:border-color var(--ease), color var(--ease), background var(--ease); } .pt-pg .pt-veh:hover{ color:var(--ink); border-color:var(--gold-2) } .pt-pg .pt-veh:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px } .pt-pg .pt-veh-elegido{ background:var(--gold); color:var(--navy); border-color:var(--gold) } .pt-pg .pt-chapa-fila{ display:flex; flex-direction:column; gap:var(--sp-2) } .pt-pg .pt-chapa-input{ width:100%; max-width:190px; padding:var(--sp-2) var(--sp-3); background:var(--navy); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-lg); font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .pt-pg .pt-chapa-input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px } /* ---- quién está adentro ---- */ .pt-pg .pt-adentro{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3) } .pt-pg .pt-dentro{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); } .pt-pg .pt-dentro:last-child{ border-bottom:0; padding-bottom:0 } .pt-pg .pt-dentro-hora{ grid-row:1; color:var(--cyan); font-size:var(--fs-sm); font-weight:700 } .pt-pg .pt-dentro-nombre{ grid-row:1; color:var(--ink); font-size:var(--fs-md); font-weight:600 } .pt-pg .pt-dentro-veh{ grid-column:2; grid-row:2; color:var(--subtle); font-size:var(--fs-xs) } /* ---- las tres razones de abajo ---- */ .pt-pg .pt-porques{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); margin-top:var(--sp-6); } .pt-pg .pt-porque{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); } .pt-pg .pt-porque h3{ margin:0 0 var(--sp-2); font-size:var(--fs-lg) } .pt-pg .pt-porque p{ margin:0; color:var(--muted); font-size:var(--fs-md); line-height:1.6 } /* ============================================================ responsive */ @media (max-width:1040px){ .pt-pg .pt-hero-fila{ grid-template-columns:minmax(0,1fr) } .pt-pg .pt-demo{ grid-template-columns:repeat(2,minmax(0,1fr)) } /* El registro pasa a lo ancho abajo: es el resumen de las dos de arriba. */ .pt-pg .pt-col-registro{ grid-column:1 / -1; min-height:0 } .pt-pg .pt-demo-dos{ grid-template-columns:repeat(2,minmax(0,1fr)) } .pt-pg .pt-males, .pt-pg .pt-modulos, .pt-pg .pt-porques{ grid-template-columns:repeat(2,minmax(0,1fr)) } .pt-pg .pt-pasos{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:720px){ .pt-pg .pt-demo, .pt-pg .pt-demo-dos, .pt-pg .pt-males, .pt-pg .pt-modulos, .pt-pg .pt-porques, .pt-pg .pt-pasos{ grid-template-columns:minmax(0,1fr) } .pt-pg .pt-col{ min-height:0 } .pt-pg .pt-hero-botones{ gap:var(--sp-3) } .pt-pg .pt-btn{ align-self:stretch; text-align:center } } /* En pantalla táctil, los blancos de toque no bajan de 44px. */ @media (pointer:coarse){ .pt-pg .pt-btn, .pt-pg .pt-muelle-btn, .pt-pg .pt-veh, .pt-pg .pt-fila-persona, .pt-pg .pt-buscar, .pt-pg .pt-chapa-input, .pt-pg .pt-bultos-input{ min-height:44px } } /* Quien pidió menos movimiento no ve transiciones. */ @media (prefers-reduced-motion:reduce){ .pt-pg .pt-btn, .pt-pg .pt-muelle-btn, .pt-pg .pt-veh, .pt-pg .pt-fila-persona{ transition:none } }